From d5d951c8dfa6831e794fad4d6377f4474f5b33df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20Nicou=C3=A9?= Date: Tue, 14 Jun 2022 16:08:23 +0200 Subject: [PATCH] Improve accessibility features --- assets/css/partials/_animations.scss | 18 ++++++++++ assets/css/partials/_variables.scss | 4 ++- assets/css/style.min.css | 2 +- assets/css/style.min.css.map | 2 +- assets/css/style.scss | 45 ++++++++++++++++-------- assets/js/app.js | 51 +++++++++++++++++----------- site/templates/base.twig | 34 +++++++++++++------ site/templates/home.twig | 4 +-- 8 files changed, 112 insertions(+), 48 deletions(-) diff --git a/assets/css/partials/_animations.scss b/assets/css/partials/_animations.scss index c72fa6b..ec6a2c3 100644 --- a/assets/css/partials/_animations.scss +++ b/assets/css/partials/_animations.scss @@ -2,6 +2,24 @@ // ANIMATIONS // ---------------------------------------------------------------------------- +@-webkit-keyframes expand-outline { + from { + outline-offset: 0; + } + to { + outline-offset: 2px; + } +} + +@keyframes expand-outline { + from { + outline-offset: 0; + } + to { + outline-offset: 2px; + } +} + @-webkit-keyframes wave-up { 0% { top: 0; diff --git a/assets/css/partials/_variables.scss b/assets/css/partials/_variables.scss index 2345b00..85ca4d8 100644 --- a/assets/css/partials/_variables.scss +++ b/assets/css/partials/_variables.scss @@ -46,6 +46,7 @@ --black: #000; --transparent-black: rgba(0, 0, 0, 0.8); --jet: #333333; + --transparent-jet: rgba(51, 51, 51, 0.8); --granite-gray: #666666; --spanish-gray: #999999; --light-gray: #cccccc; @@ -54,7 +55,8 @@ // Plyr (audio player) - --plyr-color-main: var(--transparent-black); + --plyr-color-main: var(--transparent-jet); + --plyr-tab-focus-color: var(--white); } // Media queries diff --git a/assets/css/style.min.css b/assets/css/style.min.css index 168601b..5dae5d4 100644 --- a/assets/css/style.min.css +++ b/assets/css/style.min.css @@ -1 +1 @@ -html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@font-face{font-family:"Nunito";src:url(../fonts/nunito/Nunito-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:"Nunito";src:url(../fonts/nunito/Nunito-Italic.ttf) format("truetype");font-weight:400;font-style:italic}@font-face{font-family:"Nunito";src:url(../fonts/nunito/Nunito-Medium.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:"Nunito";src:url(../fonts/nunito/Nunito-MediumItalic.ttf) format("truetype");font-weight:500;font-style:italic}@font-face{font-family:"Nunito";src:url(../fonts/nunito/Nunito-SemiBold.ttf) format("truetype");font-weight:600;font-style:normal}@font-face{font-family:"Nunito";src:url(../fonts/nunito/Nunito-SemiBoldItalic.ttf) format("truetype");font-weight:600;font-style:italic}@font-face{font-family:"Nunito";src:url(../fonts/nunito/Nunito-Bold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:"Nunito";src:url(../fonts/nunito/Nunito-BoldItalic.ttf) format("truetype");font-weight:700;font-style:italic}@font-face{font-family:"Gloria Hallelujah";src:url(../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format("truetype");font-weight:400;font-style:normal}:root{--text-font-family: "Nunito", Verdana, sans-serif;--logo-font-family: "Gloria Hallelujah", Verdana, sans-serif;--regular-font-weight: 400;--medium-font-weight: 500;--semi-bold-font-weight: 600;--bold-font-weight: 700;--text-font-size: 1rem;--caption-font-size: 0.9rem;--footnote-font-size: 0.8rem;--text-line-height: 1.4rem;--h1-font-size: 1.8rem;--h2-font-size: 1.4rem;--h3-font-size: 1.2rem;--content-max-width: 140rem;--text-max-width: 70rem;--icon-size: 2.5rem;--header-bar-vertical-padding: 1rem;--header-bar-horizontal-padding: 2rem;--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--icon-size));--footer-bar-vertical-padding: 1rem;--footer-bar-horizontal-padding: 2rem;--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size));--generic-section-vertical-padding: 3rem;--generic-section-horizontal-padding: 2rem;--home-section-vertical-padding: 2rem;--home-section-horizontal-padding: 2rem;--home-section-min-height: calc(100vh - var(--header-bar-height) - var(--footer-bar-height));--home-nav-gap: 1rem;--home-nav-item-size: 2rem;--home-nav-item-translation: 0;--home-nav-image-max-height: calc(100vh - var(--header-bar-height) - ((var(--generic-section-vertical-padding) + var(--home-nav-item-size) + var(--home-nav-gap)) * 2) - var(--footer-bar-height));--black: #000;--transparent-black: rgba(0, 0, 0, 0.8);--jet: #333333;--granite-gray: #666666;--spanish-gray: #999999;--light-gray: #cccccc;--white: #fff;--transparent-white: rgba(255, 255, 255, 0.8);--plyr-color-main: var(--transparent-black)}@media screen and (min-width: 48rem){:root{--text-font-size: 1.2rem;--caption-font-size: 1.1rem;--footnote-font-size: 1rem;--h1-font-size: 2rem;--h2-font-size: 1.6rem;--h3-font-size: 1.4rem;--icon-size: 3rem;--header-bar-vertical-padding: 2rem;--header-bar-horizontal-padding: 4rem;--footer-bar-vertical-padding: 2rem;--footer-bar-horizontal-padding: 4rem;--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size));--generic-section-horizontal-padding: 4rem;--home-section-horizontal-padding: 4rem}}@-webkit-keyframes wave-up{0%{top:0}60%{top:-0.5rem}100%{top:0}}@keyframes wave-up{0%{top:0}60%{top:-0.5rem}100%{top:0}}@-webkit-keyframes wave-down{0%{bottom:0}60%{bottom:-0.5rem}100%{bottom:0}}@keyframes wave-down{0%{bottom:0}60%{bottom:-0.5rem}100%{bottom:0}}body{font-family:var(--text-font-family);font-size:var(--text-font-size);line-height:var(--text-font-size);color:var(--jet);background-color:var(--white)}h1,h2,h3{color:var(--black)}h1{font-family:var(--logo-font-family);font-size:var(--h1-font-size);line-height:var(--h1-font-size)}h2{font-family:var(--text-font-family);font-size:var(--h2-font-size);line-height:var(--h2-font-size);margin:0 0 4rem 0}h3{font-family:var(--text-font-family);font-size:var(--h3-font-size);line-height:var(--h3-font-size);margin:2rem 0 1rem 0}p{text-align:justify;line-height:var(--text-line-height)}strong{font-weight:var(--bold-font-weight)}em{font-style:italic}a{color:var(--jet);text-decoration:underline;-webkit-transition:color 200ms ease-in-out;-o-transition:color 200ms ease-in-out;transition:color 200ms ease-in-out}a:hover,a:focus,a:active{color:var(--black)}body{min-height:100vh;overflow-x:hidden;display:-ms-grid;display:grid;grid:"header" var(--header-bar-height) "main" 1fr "footer" auto/1fr}.body--hidden-overflow-y{overflow-y:hidden}header{grid-area:header}main{grid-area:main}footer{grid-area:footer}.header-bar{width:100%;height:var(--header-bar-height);margin:auto;padding:var(--header-bar-vertical-padding) max(var(--header-bar-horizontal-padding),(100vw - var(--content-max-width))/2 + var(--header-bar-horizontal-padding));background-color:var(--transparent-white);border-bottom:1px solid var(--transparent-white);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:1;-webkit-transition:height 400ms ease-in-out,border-bottom 400ms ease-in-out;-o-transition:height 400ms ease-in-out,border-bottom 400ms ease-in-out;transition:height 400ms ease-in-out,border-bottom 400ms ease-in-out}.header-bar--fixed{position:fixed;--header-bar-vertical-padding: 0.5rem;--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--icon-size));top:calc(-1*var(--header-bar-height));border-bottom:1px solid var(--light-gray);-webkit-transition:transform 400ms ease-in-out;-o-transition:transform 400ms ease-in-out;transition:transform 400ms ease-in-out}.header-bar--visible{-webkit-transform:translateY(var(--header-bar-height));-ms-transform:translateY(var(--header-bar-height));transform:translateY(var(--header-bar-height))}.header-bar__logo{width:max-content;-webkit-transition:transform 400ms ease-in-out;-o-transition:transform 400ms ease-in-out;transition:transform 400ms ease-in-out;-webkit-transform-origin:left;-ms-transform-origin:left;transform-origin:left}.header-bar__logo--small{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}.header-bar__logo-link{text-decoration:none}.header-bar__nav{position:relative;z-index:2}.header-bar__nav-button{position:relative;z-index:3;width:var(--icon-size);height:var(--icon-size);padding:0;overflow:hidden;border:none;border-radius:50%;background-color:var(--jet);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:transform 200ms ease-in-out,background-color 400ms ease-in-out;-o-transition:transform 200ms ease-in-out,background-color 400ms ease-in-out;transition:transform 200ms ease-in-out,background-color 400ms ease-in-out}.header-bar__nav-button svg{width:100%;height:100%;padding:10%;flex-shrink:0;-webkit-transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;-o-transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out}.header-bar__nav-button svg:nth-child(1){fill:var(--white);opacity:1}.header-bar__nav-button svg:nth-child(2){fill:var(--black);opacity:0}.header-bar__nav-button:hover,.header-bar__nav-button:active{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.header-bar__nav-button--custom-focus{background-color:var(--white)}.header-bar__nav-button--custom-focus svg{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.header-bar__nav-button--custom-focus svg:nth-child(1){opacity:0}.header-bar__nav-button--custom-focus svg:nth-child(2){opacity:1}.header-bar__nav-menu{position:fixed;z-index:2;top:0;left:100vw;min-width:100vw;max-width:100vw;height:100vh;padding:calc(var(--header-bar-height) + 4rem) max(4rem,(100vw - var(--content-max-width))/2 + 4rem) 4rem 4rem;background-color:var(--transparent-black);color:var(--white);overflow-x:hidden;overflow-y:auto;-webkit-transition:transform 400ms ease-in-out;-o-transition:transform 400ms ease-in-out;transition:transform 400ms ease-in-out}.header-bar__nav-menu>li+li{border-top:1px solid var(--spanish-gray)}.header-bar__nav-menu>li li{margin:0 0 0 2rem;border-top:1px solid var(--granite-gray)}.header-bar__nav-menu>li a,.header-bar__nav-menu>li span{display:block;padding:1rem 0;color:var(--light-gray);text-decoration:none;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:transform 400ms ease-in-out;-o-transition:transform 400ms ease-in-out;transition:transform 400ms ease-in-out}.header-bar__nav-menu>li a:hover,.header-bar__nav-menu>li a:focus,.header-bar__nav-menu>li a:active{color:var(--white)}.header-bar__nav-menu .header-bar__nav-item--active{list-style:disc outside}.header-bar__nav-menu .header-bar__nav-item--active a{color:var(--white)}.header-bar__nav-menu--visible{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.header-bar__nav-menu--visible .header-bar__nav-item-1 a,.header-bar__nav-menu--visible .header-bar__nav-item-1 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 500ms ease-in-out;-o-transition:transform 500ms ease-in-out;transition:transform 500ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-2 a,.header-bar__nav-menu--visible .header-bar__nav-item-2 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 600ms ease-in-out;-o-transition:transform 600ms ease-in-out;transition:transform 600ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-3 a,.header-bar__nav-menu--visible .header-bar__nav-item-3 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 700ms ease-in-out;-o-transition:transform 700ms ease-in-out;transition:transform 700ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-4 a,.header-bar__nav-menu--visible .header-bar__nav-item-4 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 800ms ease-in-out;-o-transition:transform 800ms ease-in-out;transition:transform 800ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-5 a,.header-bar__nav-menu--visible .header-bar__nav-item-5 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 900ms ease-in-out;-o-transition:transform 900ms ease-in-out;transition:transform 900ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-6 a,.header-bar__nav-menu--visible .header-bar__nav-item-6 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1000ms ease-in-out;-o-transition:transform 1000ms ease-in-out;transition:transform 1000ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-7 a,.header-bar__nav-menu--visible .header-bar__nav-item-7 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1100ms ease-in-out;-o-transition:transform 1100ms ease-in-out;transition:transform 1100ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-8 a,.header-bar__nav-menu--visible .header-bar__nav-item-8 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1200ms ease-in-out;-o-transition:transform 1200ms ease-in-out;transition:transform 1200ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-9 a,.header-bar__nav-menu--visible .header-bar__nav-item-9 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1300ms ease-in-out;-o-transition:transform 1300ms ease-in-out;transition:transform 1300ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-10 a,.header-bar__nav-menu--visible .header-bar__nav-item-10 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1400ms ease-in-out;-o-transition:transform 1400ms ease-in-out;transition:transform 1400ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-11 a,.header-bar__nav-menu--visible .header-bar__nav-item-11 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1500ms ease-in-out;-o-transition:transform 1500ms ease-in-out;transition:transform 1500ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-12 a,.header-bar__nav-menu--visible .header-bar__nav-item-12 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1600ms ease-in-out;-o-transition:transform 1600ms ease-in-out;transition:transform 1600ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-13 a,.header-bar__nav-menu--visible .header-bar__nav-item-13 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1700ms ease-in-out;-o-transition:transform 1700ms ease-in-out;transition:transform 1700ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-14 a,.header-bar__nav-menu--visible .header-bar__nav-item-14 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1800ms ease-in-out;-o-transition:transform 1800ms ease-in-out;transition:transform 1800ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-15 a,.header-bar__nav-menu--visible .header-bar__nav-item-15 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1900ms ease-in-out;-o-transition:transform 1900ms ease-in-out;transition:transform 1900ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-16 a,.header-bar__nav-menu--visible .header-bar__nav-item-16 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 2000ms ease-in-out;-o-transition:transform 2000ms ease-in-out;transition:transform 2000ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-17 a,.header-bar__nav-menu--visible .header-bar__nav-item-17 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 2100ms ease-in-out;-o-transition:transform 2100ms ease-in-out;transition:transform 2100ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-18 a,.header-bar__nav-menu--visible .header-bar__nav-item-18 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 2200ms ease-in-out;-o-transition:transform 2200ms ease-in-out;transition:transform 2200ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-19 a,.header-bar__nav-menu--visible .header-bar__nav-item-19 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 2300ms ease-in-out;-o-transition:transform 2300ms ease-in-out;transition:transform 2300ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-20 a,.header-bar__nav-menu--visible .header-bar__nav-item-20 span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 2400ms ease-in-out;-o-transition:transform 2400ms ease-in-out;transition:transform 2400ms ease-in-out}.header-bar__nav-overlay{position:fixed;z-index:1;top:0;left:0;width:100vw;height:100vh;background-color:var(--black);opacity:0;pointer-events:none;will-change:opacity;-webkit-transition:opacity 400ms ease-in-out;-o-transition:opacity 400ms ease-in-out;transition:opacity 400ms ease-in-out}.header-bar__nav-overlay--visible{opacity:.2;pointer-events:auto;cursor:pointer}@media screen and (min-width: 48rem){.header-bar__nav-menu{min-width:50vw}}@media screen and (min-width: 62rem){.header-bar__nav-menu{min-width:25vw}}.home-section{max-width:var(--content-max-width);min-height:var(--home-section-min-height);margin:auto;padding:var(--home-section-vertical-padding) var(--home-section-horizontal-padding);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.home__nav{height:100%;display:-ms-grid;display:grid;grid:"top-left top top-right" var(--home-nav-item-size) "left center right" auto "bottom-left bottom bottom-right" var(--home-nav-item-size)/var(--home-nav-item-size) auto var(--home-nav-item-size);place-content:center center;gap:var(--home-nav-gap);line-height:0}.home__nav-image{grid-area:center}.home__nav-image img{min-width:12rem;max-width:min(100%,2500px);min-height:12rem;max-height:var(--home-nav-image-max-height)}.home__nav--2-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--2-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--3-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--3-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--3-items .home__nav-item-3{grid-area:bottom;place-self:start center}.home__nav--4-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--4-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--4-items .home__nav-item-3{grid-area:bottom-left;place-self:start end;-webkit-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--4-items .home__nav-item-4{grid-area:bottom-right;place-self:start start;-webkit-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav-link{color:var(--black);font-size:var(--h3-font-size);text-decoration:none;opacity:0;-webkit-transition:opacity 600ms ease-in-out;-o-transition:opacity 600ms ease-in-out;transition:opacity 600ms ease-in-out}.home__nav-link div{opacity:0;-webkit-transition:opacity 600ms ease-in-out;-o-transition:opacity 600ms ease-in-out;transition:opacity 600ms ease-in-out}.home__nav-link--visible{opacity:1}.home__nav-link--visible div{opacity:1}.home__nav-letter--wave-up{-webkit-animation:wave-up 600ms ease-out;animation:wave-up 600ms ease-in-out}.home__nav-letter--wave-down{-webkit-animation:wave-down 600ms ease-out;animation:wave-down 600ms ease-in-out}.gallery-section,.biography-section{max-width:var(--content-max-width);margin:auto;padding:var(--generic-section-vertical-padding) var(--generic-section-horizontal-padding)}.gallery__title,.biography__title{text-align:center}.gallery__introduction,.biography__presentation{max-width:var(--text-max-width);margin:auto}.gallery__introduction h3:nth-child(1),.biography__presentation h3:nth-child(1){margin:0 0 1rem 0}.gallery__introduction p+p,.gallery__introduction p+ul,.biography__presentation p+p,.biography__presentation p+ul{margin:1rem 0 0 0}.gallery__introduction ul,.biography__presentation ul{line-height:var(--text-line-height)}.gallery__introduction ul+ul,.gallery__introduction ul+p,.biography__presentation ul+ul,.biography__presentation ul+p{margin:1rem 0 0 0}.gallery__introduction ul li,.biography__presentation ul li{position:relative;padding:0 0 0 1rem}.gallery__introduction ul li+li,.biography__presentation ul li+li{margin:.5rem 0 0 0}.gallery__introduction ul li:before,.biography__presentation ul li:before{content:"•";position:absolute;top:0;left:0}.gallery__artwork{display:table;max-width:min(1280px,100%);margin:auto}.gallery__artwork+.gallery__artwork{margin:2rem auto 0 auto}.gallery__artwork .gallery__image,.gallery__artwork .gallery__video{display:block;max-height:80vh}.gallery__artwork .gallery__video--full-screen{max-height:initial}.gallery__artwork figcaption{display:table-caption;caption-side:bottom;margin:1rem auto 0 auto;font-size:var(--caption-font-size);font-style:italic}@media screen and (min-width: 48rem){.gallery__artwork+.gallery__artwork{margin:3rem auto 0 auto}}.error-section{max-width:var(--content-max-width);margin:auto;padding:var(--generic-section-vertical-padding) var(--generic-section-horizontal-padding)}.error__title{text-align:center}.error__message{max-width:var(--text-max-width);margin:auto;text-align:center}.error__button{margin:1rem 0 0 0;text-align:center}.error__button a{display:inline-block;padding:1rem;border-radius:10px;color:var(--white);background-color:var(--jet);text-decoration:none;font-weight:var(--semi-bold-font-weight);-webkit-transition:background-color 200ms ease-in-out;-o-transition:background-color 200ms ease-in-out;transition:background-color 200ms ease-in-out}.error__button a:hover,.error__button a:focus,.error__button a:active{background-color:var(--black)}.footer-bar{max-width:var(--content-max-width);height:var(--footer-bar-height);margin:auto;padding:var(--footer-bar-vertical-padding) var(--footer-bar-horizontal-padding);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.footer-bar__social{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.footer-bar__social a{width:var(--icon-size);height:var(--icon-size);border-radius:50%;background-color:var(--jet);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:transform 200ms ease-in-out;-o-transition:transform 200ms ease-in-out;transition:transform 200ms ease-in-out}.footer-bar__social a+a{margin:0 0 0 1rem}.footer-bar__social a svg{fill:var(--white);-webkit-transition:fill 200ms ease-in-out;-o-transition:fill 200ms ease-in-out;transition:fill 200ms ease-in-out}.footer-bar__social a:hover,.footer-bar__social a:active{transform:scale(1.1)}.footer-bar__social a.footer-bar__instagram-button svg{width:55%;height:55%}.footer-bar__social a.footer-bar__email-button svg{width:70%;height:70%}.footer-bar__copyright{font-size:var(--footnote-font-size);margin:1rem 0 0 0}@media screen and (min-width: 48rem){.footer-bar{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.footer-bar__social{order:2}.footer-bar__copyright{order:1;margin:0}}/*# sourceMappingURL=style.min.css.map */ +html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@font-face{font-family:"Nunito";src:url(../fonts/nunito/Nunito-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:"Nunito";src:url(../fonts/nunito/Nunito-Italic.ttf) format("truetype");font-weight:400;font-style:italic}@font-face{font-family:"Nunito";src:url(../fonts/nunito/Nunito-Medium.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:"Nunito";src:url(../fonts/nunito/Nunito-MediumItalic.ttf) format("truetype");font-weight:500;font-style:italic}@font-face{font-family:"Nunito";src:url(../fonts/nunito/Nunito-SemiBold.ttf) format("truetype");font-weight:600;font-style:normal}@font-face{font-family:"Nunito";src:url(../fonts/nunito/Nunito-SemiBoldItalic.ttf) format("truetype");font-weight:600;font-style:italic}@font-face{font-family:"Nunito";src:url(../fonts/nunito/Nunito-Bold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:"Nunito";src:url(../fonts/nunito/Nunito-BoldItalic.ttf) format("truetype");font-weight:700;font-style:italic}@font-face{font-family:"Gloria Hallelujah";src:url(../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format("truetype");font-weight:400;font-style:normal}:root{--text-font-family: "Nunito", Verdana, sans-serif;--logo-font-family: "Gloria Hallelujah", Verdana, sans-serif;--regular-font-weight: 400;--medium-font-weight: 500;--semi-bold-font-weight: 600;--bold-font-weight: 700;--text-font-size: 1rem;--caption-font-size: 0.9rem;--footnote-font-size: 0.8rem;--text-line-height: 1.4rem;--h1-font-size: 1.8rem;--h2-font-size: 1.4rem;--h3-font-size: 1.2rem;--content-max-width: 140rem;--text-max-width: 70rem;--icon-size: 2.5rem;--header-bar-vertical-padding: 1rem;--header-bar-horizontal-padding: 2rem;--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--icon-size));--footer-bar-vertical-padding: 1rem;--footer-bar-horizontal-padding: 2rem;--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size));--generic-section-vertical-padding: 3rem;--generic-section-horizontal-padding: 2rem;--home-section-vertical-padding: 2rem;--home-section-horizontal-padding: 2rem;--home-section-min-height: calc(100vh - var(--header-bar-height) - var(--footer-bar-height));--home-nav-gap: 1rem;--home-nav-item-size: 2rem;--home-nav-item-translation: 0;--home-nav-image-max-height: calc(100vh - var(--header-bar-height) - ((var(--generic-section-vertical-padding) + var(--home-nav-item-size) + var(--home-nav-gap)) * 2) - var(--footer-bar-height));--black: #000;--transparent-black: rgba(0, 0, 0, 0.8);--jet: #333333;--transparent-jet: rgba(51, 51, 51, 0.8);--granite-gray: #666666;--spanish-gray: #999999;--light-gray: #cccccc;--white: #fff;--transparent-white: rgba(255, 255, 255, 0.8);--plyr-color-main: var(--transparent-jet);--plyr-tab-focus-color: var(--white)}@media screen and (min-width: 48rem){:root{--text-font-size: 1.2rem;--caption-font-size: 1.1rem;--footnote-font-size: 1rem;--h1-font-size: 2rem;--h2-font-size: 1.6rem;--h3-font-size: 1.4rem;--icon-size: 3rem;--header-bar-vertical-padding: 2rem;--header-bar-horizontal-padding: 4rem;--footer-bar-vertical-padding: 2rem;--footer-bar-horizontal-padding: 4rem;--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size));--generic-section-horizontal-padding: 4rem;--home-section-horizontal-padding: 4rem}}@-webkit-keyframes expand-outline{from{outline-offset:0}to{outline-offset:2px}}@keyframes expand-outline{from{outline-offset:0}to{outline-offset:2px}}@-webkit-keyframes wave-up{0%{top:0}60%{top:-0.5rem}100%{top:0}}@keyframes wave-up{0%{top:0}60%{top:-0.5rem}100%{top:0}}@-webkit-keyframes wave-down{0%{bottom:0}60%{bottom:-0.5rem}100%{bottom:0}}@keyframes wave-down{0%{bottom:0}60%{bottom:-0.5rem}100%{bottom:0}}body{font-family:var(--text-font-family);font-size:var(--text-font-size);line-height:var(--text-font-size);color:var(--jet);background-color:var(--white)}h1,h2,h3{color:var(--black)}h1{font-family:var(--logo-font-family);font-size:var(--h1-font-size);line-height:var(--h1-font-size)}h2{font-family:var(--text-font-family);font-size:var(--h2-font-size);line-height:var(--h2-font-size);margin:0 0 4rem 0}h3{font-family:var(--text-font-family);font-size:var(--h3-font-size);line-height:var(--h3-font-size);margin:2rem 0 1rem 0}p{text-align:justify;line-height:var(--text-line-height)}strong{font-weight:var(--bold-font-weight)}em{font-style:italic}a{color:var(--jet);text-decoration:underline;border-radius:2px;-webkit-transition:color 200ms ease-in-out;-o-transition:color 200ms ease-in-out;transition:color 200ms ease-in-out}a:hover,a:focus,a:active{color:var(--black)}a:focus-visible{outline:1px dashed var(--black);outline-offset:2px;-webkit-animation:expand-outline 200ms ease-out;animation:expand-outline 200ms ease-in-out}body{min-height:100vh;overflow-x:hidden;display:-ms-grid;display:grid;grid:"header" var(--header-bar-height) "main" 1fr "footer" auto/1fr}.body--hidden-overflow-y{overflow-y:hidden}header{grid-area:header}main{grid-area:main}footer{grid-area:footer}.header-bar{width:100%;height:var(--header-bar-height);margin:auto;padding:var(--header-bar-vertical-padding) max(var(--header-bar-horizontal-padding),(100vw - var(--content-max-width))/2 + var(--header-bar-horizontal-padding));background-color:var(--transparent-white);border-bottom:1px solid var(--transparent-white);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:1;-webkit-transition:height 400ms ease-in-out,border-bottom 400ms ease-in-out;-o-transition:height 400ms ease-in-out,border-bottom 400ms ease-in-out;transition:height 400ms ease-in-out,border-bottom 400ms ease-in-out}.header-bar--fixed{position:fixed;--header-bar-vertical-padding: 0.5rem;--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--icon-size));top:calc(-1*var(--header-bar-height));border-bottom:1px solid var(--light-gray);-webkit-transition:transform 400ms ease-in-out;-o-transition:transform 400ms ease-in-out;transition:transform 400ms ease-in-out}.header-bar--visible{-webkit-transform:translateY(var(--header-bar-height));-ms-transform:translateY(var(--header-bar-height));transform:translateY(var(--header-bar-height))}.header-bar__logo{width:max-content;-webkit-transition:transform 400ms ease-in-out;-o-transition:transform 400ms ease-in-out;transition:transform 400ms ease-in-out;-webkit-transform-origin:left;-ms-transform-origin:left;transform-origin:left}.header-bar__logo--small{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}.header-bar__logo-link{text-decoration:none}.header-bar__nav{position:relative;z-index:2}.header-bar__nav-button{position:relative;z-index:3;width:var(--icon-size);height:var(--icon-size);padding:0;overflow:hidden;border:none;border-radius:50%;background-color:var(--jet);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:transform 200ms ease-in-out,background-color 400ms ease-in-out;-o-transition:transform 200ms ease-in-out,background-color 400ms ease-in-out;transition:transform 200ms ease-in-out,background-color 400ms ease-in-out}.header-bar__nav-button svg{width:100%;height:100%;padding:10%;flex-shrink:0;-webkit-transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;-o-transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out}.header-bar__nav-button svg:nth-child(1){fill:var(--white);opacity:1}.header-bar__nav-button svg:nth-child(2){fill:var(--black);opacity:0}.header-bar__nav-button:hover,.header-bar__nav-button:active{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.header-bar__nav-button--custom-focus{background-color:var(--white)}.header-bar__nav-button--custom-focus svg{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.header-bar__nav-button--custom-focus svg:nth-child(1){opacity:0}.header-bar__nav-button--custom-focus svg:nth-child(2){opacity:1}.header-bar__nav-menu{position:fixed;z-index:2;top:0;left:100vw;min-width:100vw;max-width:100vw;height:100vh;padding:calc(var(--header-bar-height) + 4rem) max(4rem,(100vw - var(--content-max-width))/2 + 4rem) 4rem 4rem;background-color:var(--transparent-black);color:var(--white);overflow-x:hidden;overflow-y:auto;-webkit-transition:transform 400ms ease-in-out;-o-transition:transform 400ms ease-in-out;transition:transform 400ms ease-in-out}.header-bar__nav-menu>li+li{border-top:1px solid var(--spanish-gray)}.header-bar__nav-menu>li li{margin:0 0 0 2rem;border-top:1px solid var(--granite-gray)}.header-bar__nav-menu>li div{padding:1rem 0;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:transform 400ms ease-in-out;-o-transition:transform 400ms ease-in-out;transition:transform 400ms ease-in-out}.header-bar__nav-menu>li div a,.header-bar__nav-menu>li div span{color:var(--light-gray)}.header-bar__nav-menu>li div a{text-decoration:none}.header-bar__nav-menu>li div a:hover,.header-bar__nav-menu>li div a:focus,.header-bar__nav-menu>li div a:active{color:var(--white)}.header-bar__nav-menu>li div a:focus-visible{outline:1px dashed var(--white)}.header-bar__nav-menu .header-bar__nav-item--active{list-style:disc outside}.header-bar__nav-menu .header-bar__nav-item--active a{color:var(--white)}.header-bar__nav-menu--visible{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.header-bar__nav-menu--visible .header-bar__nav-item-1 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 500ms ease-in-out;-o-transition:transform 500ms ease-in-out;transition:transform 500ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-2 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 600ms ease-in-out;-o-transition:transform 600ms ease-in-out;transition:transform 600ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-3 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 700ms ease-in-out;-o-transition:transform 700ms ease-in-out;transition:transform 700ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-4 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 800ms ease-in-out;-o-transition:transform 800ms ease-in-out;transition:transform 800ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-5 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 900ms ease-in-out;-o-transition:transform 900ms ease-in-out;transition:transform 900ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-6 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1000ms ease-in-out;-o-transition:transform 1000ms ease-in-out;transition:transform 1000ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-7 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1100ms ease-in-out;-o-transition:transform 1100ms ease-in-out;transition:transform 1100ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-8 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1200ms ease-in-out;-o-transition:transform 1200ms ease-in-out;transition:transform 1200ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-9 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1300ms ease-in-out;-o-transition:transform 1300ms ease-in-out;transition:transform 1300ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-10 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1400ms ease-in-out;-o-transition:transform 1400ms ease-in-out;transition:transform 1400ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-11 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1500ms ease-in-out;-o-transition:transform 1500ms ease-in-out;transition:transform 1500ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-12 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1600ms ease-in-out;-o-transition:transform 1600ms ease-in-out;transition:transform 1600ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-13 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1700ms ease-in-out;-o-transition:transform 1700ms ease-in-out;transition:transform 1700ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-14 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1800ms ease-in-out;-o-transition:transform 1800ms ease-in-out;transition:transform 1800ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-15 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 1900ms ease-in-out;-o-transition:transform 1900ms ease-in-out;transition:transform 1900ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-16 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 2000ms ease-in-out;-o-transition:transform 2000ms ease-in-out;transition:transform 2000ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-17 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 2100ms ease-in-out;-o-transition:transform 2100ms ease-in-out;transition:transform 2100ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-18 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 2200ms ease-in-out;-o-transition:transform 2200ms ease-in-out;transition:transform 2200ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-19 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 2300ms ease-in-out;-o-transition:transform 2300ms ease-in-out;transition:transform 2300ms ease-in-out}.header-bar__nav-menu--visible .header-bar__nav-item-20 div{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:transform 2400ms ease-in-out;-o-transition:transform 2400ms ease-in-out;transition:transform 2400ms ease-in-out}.header-bar__nav-overlay{position:fixed;z-index:1;top:0;left:0;width:100vw;height:100vh;background-color:var(--black);opacity:0;pointer-events:none;will-change:opacity;-webkit-transition:opacity 400ms ease-in-out;-o-transition:opacity 400ms ease-in-out;transition:opacity 400ms ease-in-out}.header-bar__nav-overlay--visible{opacity:.2;pointer-events:auto;cursor:pointer}@media screen and (min-width: 48rem){.header-bar__nav-menu{min-width:50vw}}@media screen and (min-width: 62rem){.header-bar__nav-menu{min-width:25vw}}.home-section{max-width:var(--content-max-width);min-height:var(--home-section-min-height);margin:auto;padding:var(--home-section-vertical-padding) var(--home-section-horizontal-padding);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.home__nav{height:100%;display:-ms-grid;display:grid;grid:"top-left top top-right" var(--home-nav-item-size) "left center right" auto "bottom-left bottom bottom-right" var(--home-nav-item-size)/var(--home-nav-item-size) auto var(--home-nav-item-size);place-content:center center;gap:var(--home-nav-gap);line-height:0}.home__nav-image{grid-area:center}.home__nav-image img{min-width:12rem;max-width:min(100%,2500px);min-height:12rem;max-height:var(--home-nav-image-max-height)}.home__nav--2-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--2-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--3-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--3-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--3-items .home__nav-item-3{grid-area:bottom;place-self:start center}.home__nav--4-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--4-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--4-items .home__nav-item-3{grid-area:bottom-left;place-self:start end;-webkit-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--4-items .home__nav-item-4{grid-area:bottom-right;place-self:start start;-webkit-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav-link{color:var(--black);font-size:var(--h3-font-size);text-decoration:none;opacity:0;-webkit-transition:opacity 600ms ease-in-out;-o-transition:opacity 600ms ease-in-out;transition:opacity 600ms ease-in-out}.home__nav-link div{opacity:0;-webkit-transition:opacity 600ms ease-in-out;-o-transition:opacity 600ms ease-in-out;transition:opacity 600ms ease-in-out}.home__nav-link--visible{opacity:1}.home__nav-link--visible div{opacity:1}.home__nav-letter--wave-up{-webkit-animation:wave-up 600ms ease-out;animation:wave-up 600ms ease-in-out}.home__nav-letter--wave-down{-webkit-animation:wave-down 600ms ease-out;animation:wave-down 600ms ease-in-out}.gallery-section,.biography-section{max-width:var(--content-max-width);margin:auto;padding:var(--generic-section-vertical-padding) var(--generic-section-horizontal-padding)}.gallery__title,.biography__title{text-align:center}.gallery__introduction,.biography__presentation{max-width:var(--text-max-width);margin:auto}.gallery__introduction h3:nth-child(1),.biography__presentation h3:nth-child(1){margin:0 0 1rem 0}.gallery__introduction p+p,.gallery__introduction p+ul,.biography__presentation p+p,.biography__presentation p+ul{margin:1rem 0 0 0}.gallery__introduction ul,.biography__presentation ul{line-height:var(--text-line-height)}.gallery__introduction ul+ul,.gallery__introduction ul+p,.biography__presentation ul+ul,.biography__presentation ul+p{margin:1rem 0 0 0}.gallery__introduction ul li,.biography__presentation ul li{position:relative;padding:0 0 0 1rem}.gallery__introduction ul li+li,.biography__presentation ul li+li{margin:1rem 0 0 0}.gallery__introduction ul li:before,.biography__presentation ul li:before{content:"•";position:absolute;top:0;left:0}.gallery__artwork{display:table;max-width:min(1280px,100%);margin:auto}.gallery__artwork+.gallery__artwork{margin:2rem auto 0 auto}.gallery__artwork .gallery__image,.gallery__artwork .gallery__video{display:block;max-height:80vh}.gallery__artwork .gallery__video--full-screen{max-height:initial}.gallery__artwork figcaption{display:table-caption;caption-side:bottom;margin:1rem auto 0 auto;font-size:var(--caption-font-size);font-style:italic;line-height:var(--text-line-height)}@media screen and (min-width: 48rem){.gallery__artwork+.gallery__artwork{margin:3rem auto 0 auto}}.error-section{max-width:var(--content-max-width);margin:auto;padding:var(--generic-section-vertical-padding) var(--generic-section-horizontal-padding)}.error__title{text-align:center}.error__message{max-width:var(--text-max-width);margin:auto;text-align:center}.error__button{margin:1rem 0 0 0;text-align:center}.error__button a{display:inline-block;padding:1rem;border-radius:10px;color:var(--white);background-color:var(--jet);text-decoration:none;font-weight:var(--semi-bold-font-weight);-webkit-transition:background-color 200ms ease-in-out;-o-transition:background-color 200ms ease-in-out;transition:background-color 200ms ease-in-out}.error__button a:hover,.error__button a:focus,.error__button a:active{background-color:var(--black)}.footer-bar{max-width:var(--content-max-width);height:var(--footer-bar-height);margin:auto;padding:var(--footer-bar-vertical-padding) var(--footer-bar-horizontal-padding);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.footer-bar__social{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.footer-bar__social a{width:var(--icon-size);height:var(--icon-size);border-radius:50%;background-color:var(--jet);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:transform 200ms ease-in-out;-o-transition:transform 200ms ease-in-out;transition:transform 200ms ease-in-out}.footer-bar__social a+a{margin:0 0 0 1rem}.footer-bar__social a svg{fill:var(--white);-webkit-transition:fill 200ms ease-in-out;-o-transition:fill 200ms ease-in-out;transition:fill 200ms ease-in-out}.footer-bar__social a:hover,.footer-bar__social a:focus,.footer-bar__social a:active{transform:scale(1.1)}.footer-bar__social a.footer-bar__instagram-button svg{width:55%;height:55%}.footer-bar__social a.footer-bar__email-button svg{width:70%;height:70%}.footer-bar__copyright{font-size:var(--footnote-font-size);margin:1rem 0 0 0}@media screen and (min-width: 48rem){.footer-bar{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.footer-bar__social{order:2}.footer-bar__copyright{order:1;margin:0}}/*# sourceMappingURL=style.min.css.map */ diff --git a/assets/css/style.min.css.map b/assets/css/style.min.css.map index c6fa612..becdb5a 100644 --- a/assets/css/style.min.css.map +++ b/assets/css/style.min.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["partials/_minireset.css","partials/_fonts.scss","partials/_variables.scss","partials/_animations.scss","style.scss"],"names":[],"mappings":"CAIA,yGAuBI,SACA,UAGJ,kBAMI,eACA,mBAGJ,GACI,gBAGJ,oBAGI,SAGJ,KACI,sBAGJ,qBACI,mBAGJ,UAEI,YACA,eAGJ,OACI,SAGJ,MACI,yBACA,iBAGJ,MAEI,UCtEJ,WACI,qBACA,+DACA,gBACA,kBAGJ,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,oEACA,gBACA,kBAGD,WACC,qBACA,gEACA,gBACA,kBAGD,WACC,qBACA,sEACA,gBACA,kBAGD,WACC,qBACA,4DACA,gBACA,kBAGD,WACC,qBACA,kEACA,gBACA,kBAKD,WACC,gCACA,oFACA,gBACA,kBChED,MAII,kDACA,6DACA,2BACA,0BACA,6BACA,wBACA,uBACA,4BACA,6BACA,2BACA,uBACA,uBACA,uBAIA,4BACA,wBACA,oBACA,oCACA,sCACA,uFACA,oCACA,sCACA,sHACA,yCACA,2CACA,sCACA,wCACA,6FACA,qBACA,2BACA,+BACA,mMAIA,cACA,wCACA,eACA,wBACA,wBACA,sBACA,cACA,8CAIA,4CAQJ,qCAEI,MAII,yBACA,4BACA,2BACA,qBACA,uBACA,uBAIA,kBACA,oCACA,sCACA,oCACA,sCACA,uFACA,2CACA,yCClFR,2BACI,GACF,MAEE,IACF,YAED,KACC,OAIF,mBACC,GACC,MAEE,IACF,YAED,KACC,OAIF,6BACI,GACF,SAEE,IACF,eAED,KACC,UAIF,qBACI,GACF,SAEE,IACF,eAED,KACC,UCrCF,KACI,oCACA,gCACA,kCACA,iBACA,8BAGJ,SAGI,mBAGJ,GACI,oCACA,8BACA,gCAGJ,GACI,oCACA,8BACA,gCACA,kBAGJ,GACI,oCACA,8BACA,gCACA,qBAGJ,EACI,mBACA,oCAGJ,OACI,oCAGJ,GACI,kBAKJ,EACI,iBACA,0BACA,2CACA,sCACA,mCAEA,yBAGI,mBAOR,KACI,iBACA,kBACA,iBACA,aACA,KACI,+DAMR,yBACC,kBAGD,OACI,iBAGJ,KACI,eAGJ,OACI,iBASJ,YACC,WACG,gCACA,YACH,iKACA,0CACA,iDACG,oBACA,oBACA,aACA,yBACA,sBACA,8BACA,yBACA,sBACA,mBACH,UACA,mBACC,yDAED,cACC,yDAED,WACC,yDAGD,mBACC,eACA,sCACA,uFACA,sCACA,0CACA,+CACA,0CACA,uCAGD,qBACC,uDACA,mDACA,+CAIF,kBACI,kBACH,+CACA,0CACA,uCACA,8BACG,0BACH,sBAEA,yBACC,6BACA,yBACA,qBAIF,uBACI,qBAGJ,iBACC,kBACA,UAGD,wBACC,kBACA,UACA,uBACA,wBACA,UACA,gBACA,YACA,kBACA,4BACA,eACA,oBACA,oBACA,aACA,yBACA,sBACA,mBACA,mBACC,+DAED,cACC,+DAED,WACC,+DAGD,4BACC,WACA,YACA,YACA,cACM,mBACL,sDAEK,cACL,sDAEK,WACL,sDAIF,yCACC,kBACA,UAGD,yCACC,kBACA,UAGE,6DAEF,6BACA,yBACA,qBAGD,sCACC,8BAEA,0CACC,oCACG,gCACA,4BAGJ,uDACC,UAGD,uDACC,UAKH,sBACC,eACA,UACA,MACA,WACA,gBACA,gBACA,aACA,8GACA,0CACA,mBACA,kBACA,gBACA,+CACA,0CACA,uCAIC,4BACC,yCAGD,4BACC,kBACA,yCAGD,yDAEC,cACA,eACA,wBACA,qBACA,mCACA,+BACA,2BACA,+CACA,0CACA,uCAGD,oGAGC,mBAIF,oDACC,wBAEA,sDACC,mBAIF,+BACC,oCACA,gCACA,4BAKE,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,qHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,qHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,qHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAOL,yBACC,eACA,UACA,MACA,OACA,YACA,aACA,8BACA,UACA,oBACA,oBACA,6CACA,wCACA,qCAEA,kCACC,WACA,oBACA,eAIF,qCAEC,sBACC,gBAIF,qCAEC,sBACC,gBAUF,cACI,mCACA,0CACA,YACA,oFACA,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBAGJ,WACI,YACA,iBACA,aACA,KACI,iMAIJ,4BACA,wBACA,cAGJ,iBACI,iBAEA,qBACI,gBACA,2BACA,iBACA,4CAMJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAOR,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,iBACA,wBAMJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,sBACA,qBACA,kBACI,sEAEJ,cACI,sEAEJ,UACI,sEAIR,sCACI,uBACA,uBACA,kBACI,uEAEJ,cACI,uEAEJ,UACI,uEAKZ,gBACI,mBACA,8BACA,qBACA,UACA,6CACA,wCACA,qCAEA,oBACI,UACA,6CACA,wCACA,qCAIR,yBACI,UAEA,6BACI,UAIR,2BACI,yCACA,oCAGJ,6BACI,2CACA,sCAKJ,oCAEI,mCACA,YACA,0FAGJ,kCAEI,kBAGJ,gDAEI,gCACA,YAEA,gFACI,kBAKA,kHAEI,kBAIR,sDACF,oCAEM,sHAEI,kBAGV,4DACC,kBACA,mBAGD,kEACC,mBAGD,0EACC,YACA,kBACA,MACA,OAKH,kBACI,cACA,2BACA,YAEA,oCACI,wBAGJ,oEAEI,cACA,gBAKA,+CACI,mBAIR,6BACI,sBACA,oBACA,wBACA,mCACA,kBAIR,qCAIQ,oCACI,yBAOZ,eACI,mCACA,YACA,0FAGJ,cACI,kBAGJ,gBACI,gCACA,YACA,kBAGJ,eACI,kBACA,kBAEA,iBACI,qBACA,aACA,mBACA,mBACA,4BACA,qBACA,yCACA,sDACA,iDACA,8CAEA,sEAGI,8BAWZ,YACI,mCACA,gCACA,YACA,gFACA,oBACA,oBACA,aACA,4BACA,6BACA,0BACA,sBACA,yBACA,sBACA,mBAGJ,oBACI,oBACA,oBACA,aACA,yBACA,sBACA,mBAEA,sBACF,uBACA,wBACA,kBACA,4BACM,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBACN,+CACA,0CACA,uCAEM,wBACI,kBAGJ,0BACL,kBACM,0CACA,qCACA,kCAIP,yDAEC,qBAMD,uDACC,UACA,WAMD,mDACC,UACA,WAKH,uBACI,oCACA,kBAGJ,qCAEI,YACI,8BACA,6BACA,uBACA,mBACA,yBACA,sBACA,8BACA,sBACA,mBACA,qBAGJ,oBACI,QAGJ,uBACI,QACA","file":"style.min.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["partials/_minireset.css","partials/_fonts.scss","partials/_variables.scss","partials/_animations.scss","style.scss"],"names":[],"mappings":"CAIA,yGAuBI,SACA,UAGJ,kBAMI,eACA,mBAGJ,GACI,gBAGJ,oBAGI,SAGJ,KACI,sBAGJ,qBACI,mBAGJ,UAEI,YACA,eAGJ,OACI,SAGJ,MACI,yBACA,iBAGJ,MAEI,UCtEJ,WACI,qBACA,+DACA,gBACA,kBAGJ,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,oEACA,gBACA,kBAGD,WACC,qBACA,gEACA,gBACA,kBAGD,WACC,qBACA,sEACA,gBACA,kBAGD,WACC,qBACA,4DACA,gBACA,kBAGD,WACC,qBACA,kEACA,gBACA,kBAKD,WACC,gCACA,oFACA,gBACA,kBChED,MAII,kDACA,6DACA,2BACA,0BACA,6BACA,wBACA,uBACA,4BACA,6BACA,2BACA,uBACA,uBACA,uBAIA,4BACA,wBACA,oBACA,oCACA,sCACA,uFACA,oCACA,sCACA,sHACA,yCACA,2CACA,sCACA,wCACA,6FACA,qBACA,2BACA,+BACA,mMAIA,cACA,wCACA,eACA,yCACA,wBACA,wBACA,sBACA,cACA,8CAIA,0CACA,qCAQJ,qCAEI,MAII,yBACA,4BACA,2BACA,qBACA,uBACA,uBAIA,kBACA,oCACA,sCACA,oCACA,sCACA,uFACA,2CACA,yCCpFR,kCACI,KACF,iBAED,GACC,oBAIF,0BACC,KACC,iBAED,GACC,oBAIF,2BACI,GACF,MAEE,IACF,YAED,KACC,OAIF,mBACC,GACC,MAEE,IACF,YAED,KACC,OAIF,6BACI,GACF,SAEE,IACF,eAED,KACC,UAIF,qBACI,GACF,SAEE,IACF,eAED,KACC,UCvDF,KACI,oCACA,gCACA,kCACA,iBACA,8BAGJ,SAGI,mBAGJ,GACI,oCACA,8BACA,gCAGJ,GACI,oCACA,8BACA,gCACA,kBAGJ,GACI,oCACA,8BACA,gCACA,qBAGJ,EACI,mBACA,oCAGJ,OACI,oCAGJ,GACI,kBAKJ,EACI,iBACA,0BACH,kBACG,2CACA,sCACA,mCAEA,yBAGI,mBAGP,gBACC,gCACA,mBACA,gDACG,2CAML,KACI,iBACA,kBACA,iBACA,aACA,KACI,+DAMR,yBACC,kBAGD,OACI,iBAGJ,KACI,eAGJ,OACI,iBASJ,YACC,WACG,gCACA,YACH,iKACA,0CACA,iDACG,oBACA,oBACA,aACA,yBACA,sBACA,8BACA,yBACA,sBACA,mBACH,UACA,mBACC,yDAED,cACC,yDAED,WACC,yDAGD,mBACC,eACA,sCACA,uFACA,sCACA,0CACA,+CACA,0CACA,uCAGD,qBACC,uDACA,mDACA,+CAIF,kBACI,kBACH,+CACA,0CACA,uCACA,8BACG,0BACH,sBAEA,yBACC,6BACA,yBACA,qBAIF,uBACI,qBAGJ,iBACC,kBACA,UAGD,wBACC,kBACA,UACA,uBACA,wBACA,UACA,gBACA,YACA,kBACA,4BACA,eACA,oBACA,oBACA,aACA,yBACA,sBACA,mBACA,mBACC,+DAED,cACC,+DAED,WACC,+DAGD,4BACC,WACA,YACA,YACA,cACM,mBACL,sDAEK,cACL,sDAEK,WACL,sDAIF,yCACC,kBACA,UAGD,yCACC,kBACA,UAGE,6DAEF,6BACA,yBACA,qBAGD,sCACC,8BAEA,0CACC,oCACG,gCACA,4BAGJ,uDACC,UAGD,uDACC,UAKH,sBACC,eACA,UACA,MACA,WACA,gBACA,gBACA,aACA,8GACA,0CACA,mBACA,kBACA,gBACA,+CACA,0CACA,uCAIC,4BACC,yCAGD,4BACC,kBACA,yCAGD,6BACC,eACA,mCACA,+BACA,2BACA,+CACA,0CACA,uCAEA,iEAEC,wBAGD,+BACC,qBAEA,gHAGC,mBAGD,6CACC,gCAMJ,oDACC,wBAEA,sDACC,mBAIF,+BACC,oCACA,gCACA,4BAKE,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAOL,yBACC,eACA,UACA,MACA,OACA,YACA,aACA,8BACA,UACA,oBACA,oBACA,6CACA,wCACA,qCAEA,kCACC,WACA,oBACA,eAIF,qCAEC,sBACC,gBAIF,qCAEC,sBACC,gBAUF,cACI,mCACA,0CACA,YACA,oFACA,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBAGJ,WACI,YACA,iBACA,aACA,KACI,iMAIJ,4BACA,wBACA,cAGJ,iBACI,iBAEA,qBACI,gBACA,2BACA,iBACA,4CAMJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAOR,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,iBACA,wBAMJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,sBACA,qBACA,kBACI,sEAEJ,cACI,sEAEJ,UACI,sEAIR,sCACI,uBACA,uBACA,kBACI,uEAEJ,cACI,uEAEJ,UACI,uEAKZ,gBACI,mBACA,8BACA,qBACA,UACA,6CACA,wCACA,qCAEA,oBACI,UACA,6CACA,wCACA,qCAIR,yBACI,UAEA,6BACI,UAIR,2BACI,yCACA,oCAGJ,6BACI,2CACA,sCAKJ,oCAEI,mCACA,YACA,0FAGJ,kCAEI,kBAGJ,gDAEI,gCACA,YAEA,gFACI,kBAKA,kHAEI,kBAIR,sDACF,oCAEM,sHAEI,kBAGV,4DACC,kBACA,mBAGD,kEACC,kBAGD,0EACC,YACA,kBACA,MACA,OAKH,kBACI,cACA,2BACA,YAEA,oCACI,wBAGJ,oEAEI,cACA,gBAKA,+CACI,mBAIR,6BACI,sBACA,oBACA,wBACA,mCACA,kBACA,oCAIR,qCAIQ,oCACI,yBAOZ,eACI,mCACA,YACA,0FAGJ,cACI,kBAGJ,gBACI,gCACA,YACA,kBAGJ,eACI,kBACA,kBAEA,iBACI,qBACA,aACA,mBACA,mBACA,4BACA,qBACA,yCACA,sDACA,iDACA,8CAEA,sEAGI,8BAWZ,YACI,mCACA,gCACA,YACA,gFACA,oBACA,oBACA,aACA,4BACA,6BACA,0BACA,sBACA,yBACA,sBACA,mBAGJ,oBACI,oBACA,oBACA,aACA,yBACA,sBACA,mBAEA,sBACF,uBACA,wBACA,kBACA,4BACM,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBACN,+CACA,0CACA,uCAEM,wBACI,kBAGJ,0BACL,kBACM,0CACA,qCACA,kCAIP,qFAGC,qBAMD,uDACC,UACA,WAMD,mDACC,UACA,WAKH,uBACI,oCACA,kBAGJ,qCAEI,YACI,8BACA,6BACA,uBACA,mBACA,yBACA,sBACA,8BACA,sBACA,mBACA,qBAGJ,oBACI,QAGJ,uBACI,QACA","file":"style.min.css"} \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss index 99ca96c..402c23a 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -61,6 +61,7 @@ em { a { color: var(--jet); text-decoration: underline; + border-radius: 2px; -webkit-transition: color 200ms ease-in-out; -o-transition: color 200ms ease-in-out; transition: color 200ms ease-in-out; @@ -70,8 +71,14 @@ a { &:active { color: var(--black); } -} + &:focus-visible { + outline: 1px dashed var(--black); + outline-offset: 2px; + -webkit-animation: expand-outline 200ms ease-out; + animation: expand-outline 200ms ease-in-out; + } +} // General grid layout @@ -286,24 +293,33 @@ footer { border-top: 1px solid var(--granite-gray); } - a, - span { - display: block; + div { padding: 1rem 0; - color: var(--light-gray); - text-decoration: none; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: transform 400ms ease-in-out; -o-transition: transform 400ms ease-in-out; transition: transform 400ms ease-in-out; - } - a:hover, - a:focus, - a:active { - color: var(--white); + a, + span { + color: var(--light-gray); + } + + a { + text-decoration: none; + + &:hover, + &:focus, + &:active { + color: var(--white); + } + + &:focus-visible { + outline: 1px dashed var(--white); + } + } } } @@ -323,8 +339,7 @@ footer { @for $i from 1 through 20 { .header-bar__nav-item-#{$i} { - a, - span { + div { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); @@ -626,7 +641,7 @@ footer { } li + li { - margin: 0.5rem 0 0 0; + margin: 1rem 0 0 0; } li:before { @@ -666,6 +681,7 @@ footer { margin: 1rem auto 0 auto; font-size: var(--caption-font-size); font-style: italic; + line-height: var(--text-line-height); } } @@ -783,6 +799,7 @@ footer { &:hover, + &:focus, &:active { transform: scale(1.1); } diff --git a/assets/js/app.js b/assets/js/app.js index 18ebe1c..4e488c4 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -21,13 +21,14 @@ let videoPlayers = []; // HEADER BAR ANIMATION // const headerBar = document.querySelector('.header-bar'); -const headerLogo =document.querySelector('.header-bar__logo'); +const headerLogo = document.querySelector('.header-bar__logo'); let scrollOffset = 0; // NAVIGATION MENU ANIMATION // const headerNavBtn = document.querySelector('.header-bar__nav-button'); const headerNavMenu = document.querySelector('.header-bar__nav-menu'); +const headerNavMenuListEls = document.querySelectorAll('.header-bar__nav-menu li'); const headerNavOverlay = document.querySelector('.header-bar__nav-overlay'); const touchPosition = { initialX: null, @@ -181,12 +182,8 @@ function setUpVideoPlayers() { 'duration', 'mute', 'volume', - 'settings', 'fullscreen' ], - settings: [ - 'quality' - ], i18n: { play: 'Lire', pause: 'Mettre sur pause', @@ -198,20 +195,6 @@ function setUpVideoPlayers() { unmute: 'Activer le son', enterFullscreen: 'Activer le mode plein écran', exitFullscreen: 'Quitter le mode plein écran' - }, - tooltips: { - controls: true, - seek: true - }, - quality: { - default: 720, - options: [ - 1080, - 720, - 480, - 360, - 240, - ] } }); } @@ -268,6 +251,16 @@ function toggleHeaderNav() { } } +// Open header navigation +function openHeaderNav() { + if (headerNavBtn && headerNavMenu) { + headerNavBtn.classList.add('header-bar__nav-button--custom-focus'); + headerNavMenu.classList.add('header-bar__nav-menu--visible'); + headerNavOverlay.classList.add('header-bar__nav-overlay--visible'); + document.body.classList.add('body--hidden-overflow-y'); + } +} + // Close header navigation function closeHeaderNav() { if (headerNavBtn && headerNavMenu) { @@ -295,6 +288,24 @@ function closeHeaderNavOnClick() { }); } +// Open header navigation on menu list focusin event +function openHeaderNavBeforeFocus() { + if (headerNavMenuListEls) { + for (let i = 0; i < headerNavMenuListEls.length; i++) { + headerNavMenuListEls[i].addEventListener('focusin', openHeaderNav); + } + } +} + +// Close header navigation on menu list focusout event +function closeHeaderNavAfterFocus() { + if (headerNavMenuListEls) { + for (let i = 0; i < headerNavMenuListEls.length; i++) { + headerNavMenuListEls[i].addEventListener('focusout', closeHeaderNav); + } + } +} + // Close header navigation on touchstart and touchmove events (swipe right) function closeHeaderNavOnSwipe() { headerNavMenu.addEventListener('touchstart', function(e) { @@ -352,4 +363,6 @@ document.addEventListener('scroll', function() { toggleHeaderNavOnClick(); closeHeaderNavOnClick(); +openHeaderNavBeforeFocus(); +closeHeaderNavAfterFocus(); closeHeaderNavOnSwipe(); diff --git a/site/templates/base.twig b/site/templates/base.twig index e9d09b9..efd7b24 100644 --- a/site/templates/base.twig +++ b/site/templates/base.twig @@ -21,13 +21,13 @@