body > header{ --header-h: calc(var(--lh) * 3); } header > .top-header{ background: var(--clr-header); height: calc(var(--lh) * 1); display: flex; justify-content: space-between; } header > .top-header > h1{ color: white; margin-left: calc(var(--lh) * 0.5); line-height: var(--lh); text-transform: uppercase; } header > .top-header > h1 > a{ text-decoration: none; } /* LANG ========================================================================== */ nav.lang-menu ul{ display: flex; gap: calc(var(--lh) * 0.5); justify-content: flex-end; padding-right: calc(var(--lh) * 0.5); line-height: var(--lh); /* theme 2 */ /* background: var(--clr-soft); */ } nav.lang-menu a{ color: rgba(255,255,255,0.5); text-decoration: none; } nav.lang-menu li.active a{ color: white; } /* order */ nav.lang-menu #lang__en{ order: 1; } nav.lang-menu #lang__fr{ order: 2; } nav.lang-menu #lang__nl{ order: 3; } nav.lang-menu #lang__es{ order: 4; } /* NAVIGATION ========================================================================== */ nav.nav-menu{ height: calc(var(--lh) * 2); display: flex; justify-content: space-between; align-items: stretch; background: var(--clr-soft); border-top: var(--border); border-bottom: var(--border); border-color: var(--clr-header); box-sizing: border-box; color: var(--clr-header); } ul.nav-menu__pages{ flex: 1 1 0; display: flex; align-items: stretch; } div.nav-menu__footer{ flex: 1 1 0; display: flex; align-items: stretch; /* square */ max-width: calc(var(--lh) * 2); } /* ----- MAIN NAV ----- */ ul.nav-menu__pages li{ flex: 1 0 0%; box-sizing: border-box; max-width: 16rem; position: relative; border-right: var(--border); border-color: var(--clr-header); overflow: hidden; } ul.nav-menu__pages a{ color: currentColor; display: block; height: 100%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; text-align: center; text-transform: uppercase; text-decoration: none; transition: 300ms font-variation-settings; font-variation-settings: "SERI" 0, "slnt" 0; padding: 0 0.5em; } ul.nav-menu__pages a span{ padding-top: 0.2em; } ul.nav-menu__pages a span{ overflow: hidden; text-overflow: ellipsis; } /* variations */ ul.nav-menu__pages a:hover, ul.nav-menu__pages li.active a{ font-variation-settings: "SERI" 100, "slnt" 0; } nav.nav-menu li.active{ background: white; } /* order */ nav.nav-menu #nav__index{ order: 1; } nav.nav-menu #nav__projects{ order: 2; } nav.nav-menu #nav__gallery{ order: 3; margin-right: calc(-1 * var(--border-width)); } /* ----- FOOTER LINK ----- */ .open-footer{ /* border */ border-left: var(--border); border-color: var(--clr-header); /* square size */ flex: 1 0 0; }