:root { --nav-bg-height: calc(20em + calc(2em + 3em + 2.5em + 3em)); --cubic-default: cubic-bezier(0.525, 0, 0, 1); --duration-fast: 0.2s; --duration-normal: 0.450s; --color-dark: #001829; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible { outline: 1px solid var(--color-dark); } .nav-bg { transition: height var(--duration-normal) var(--cubic-default); } .page-bg { transition: opacity var(--duration-fast) var(--cubic-default); } .nav { transition: color var(--duration-fast) var(--cubic-default); } .nav-button { transition: all var(--duration-fast) var(--cubic-default); } /* ———— SHOW DROPDOWN ———— */ .nav-dropdown { transition: all var(--duration-fast) ease, transform var(--duration-normal) var(--cubic-default); } [data-dropdown-toggle]:hover+.nav-dropdown, [data-dropdown-toggle]:focus-visible+.nav-dropdown, .nav-dropdown:hover, .nav-dropdown:focus-within { opacity: 1; visibility: visible; pointer-events: auto; } /*———— STYLING WHEN DROPDOWN IS OPEN ———— */ :is(body:has([data-dropdown-toggle]:hover), body:has([data-dropdown-toggle]:focus-visible), body:has([data-dropdown-toggle]:focus-within), body:has(.nav-dropdown:hover), body:has(.nav-dropdown:focus-within)) { .nav-bg { height: var(--nav-bg-height); } .page-bg { opacity: 1; } .nav { color: var(--color-dark); } .nav-button { border-color: var(--color-dark); color: var(--color-dark); } .nav-button.is--primary { background-color: var(--color-dark); border-color: var(--color-dark); color: #f9f4f1; } } /*———— DROPDOWN TOGGLE ———— */ .nav-link__dropdown-icon { transition: transform var(--duration-normal) var(--cubic-default); } [data-dropdown-toggle] { transition: background-color var(--duration-fast) var(--cubic-default); } /*———— DESKTOP HOVER AND FOCUS ———— */ @media screen and (min-width: 768px) { [data-dropdown-toggle]:hover .nav-link__dropdown-icon, [data-dropdown-toggle]:focus .nav-link__dropdown-icon, [data-dropdown-toggle]:focus-within .nav-link__dropdown-icon, [data-dropdown-toggle]:has(+ .nav-dropdown:hover) .nav-link__dropdown-icon, [data-dropdown-toggle]:has(+ .nav-dropdown:focus-within) .nav-link__dropdown-icon { transform: rotate(180deg); } [data-dropdown-toggle]:hover, [data-dropdown-toggle]:focus, [data-dropdown-toggle]:focus-within, [data-dropdown-toggle]:has(+ .nav-dropdown:hover), [data-dropdown-toggle]:has(+ .nav-dropdown:focus-within) { background-color: #E9E0D8; } } /*———— DROPDOWN CONTENT LIST ITEMS ———— */ .nav-dropdown__content-li { transition: all var(--duration-normal) var(--cubic-default); transition-delay: 0.18s; opacity: 0; transform: translate(4em, 0px); } .nav-dropdown__content-li:nth-child(2) { transition-delay: 0.24s; } .nav-dropdown__content-li:nth-child(3) { transition-delay: 0.3s; } .nav-dropdown__content-li:nth-child(4) { transition-delay: 0.36s; } .nav-dropdown__content-li:nth-child(5) { transition-delay: 0.44s; } body:has([data-dropdown-toggle]:hover) [data-dropdown-toggle]:hover+.nav-dropdown .nav-dropdown__content-li, body:has([data-dropdown-toggle]:focus-visible) .nav-dropdown__content-li, body:has([data-dropdown-toggle]:focus-within) .nav-dropdown__content-li, body:has(.nav-dropdown:hover) .nav-dropdown__content-li, body:has(.nav-dropdown:focus-within) .nav-dropdown__content-li { opacity: 1; transform: translate(0em, 0px); } /*———— DROPDOWN LINKS + IMAGES ———— */ .nav-dropdown__link:hover .nav-dropdown__img-overlay, .nav-dropdown__link:focus-visible .nav-dropdown__img-overlay { opacity: 0; } .nav-dropdown__link:hover .nav-dropdown__img, .nav-dropdown__link:focus-visible .nav-dropdown__img { transform: scale(1.1); } /*———— DROPDOWN LINKS ———— */ .nav-dropdown__link.is--static:hover, .nav-dropdown__link.is--static:focus-visible { background: #E9E0D8; } /* ———— NAV LINKS ———— */ a.nav-link .nav-link__label::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: currentColor; transition: transform var(--duration-normal) var(--cubic-default); transform: scale(0, 1); transform-origin: right center; } a.nav-link:hover .nav-link__label::after, a.nav-link:focus-visible .nav-link__label::after { transform: scale(1, 1); transform-origin: left center; } /* ———— MOBILE STATE WITH BURGER MENU ———— */ @media screen and (max-width: 767px) { :root { --nav-bg-height: 100dvh; } .nav-dropdown__overflow { transition: grid-template-rows var(--duration-normal) var(--cubic-default); } .nav-center { transition: all var(--duration-normal) var(--cubic-default), opacity var(--duration-fast) var(--cubic-default); } .menu-button__line { transition: all var(--duration-normal) var(--cubic-default); } /* ———— STYLES WHEN MENU IS OPEN ———— */ :is([data-menu-status="open"]) { color: var(--color-dark); .menu-button__line:nth-of-type(1) { transform: translate(0px, 0.125em) rotate(135deg); background-color: #f9f4f1; } .menu-button__line:nth-of-type(2) { transform: translate(0px, -0.175em) rotate(-135deg); background-color: #f9f4f1; } .nav-bg { height: var(--nav-bg-height); } .page-bg { opacity: 1; } .nav-button.is--primary { background-color: var(--color-dark); border-color: var(--color-dark); color: #f9f4f1; } .nav-center { opacity: 1; visibility: visible; transform: translate(0px, 0em); transition-delay: 0.1s; } } [data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__overflow { grid-template-rows: 1fr; } [data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__content-li { opacity: 1; transform: translate(0em, 0px); } [data-dropdown-toggle="open"] .nav-link__dropdown-icon { transform: rotate(180deg); } }