.nav.scrolled { background: #FCFBF8; } .nav.scrolled .nav-inner { color: #6D6850; } /* Geen transition: all */ .nav, .nav-inner { transition: color 200ms ease, background-color 200ms ease; } ::selection { background: rgba(109, 104, 80, 0.35); color: #6A472C; } ::-moz-selection { background: rgba(109, 104, 80, 0.35); color: #6A472C; } /* Slick */ .slider-item { display: inline-block; } .slider-list { display: block; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus, .slick-slide, .slick-slide * { outline: none; } :root { --nav-bg-height: calc(20em + 10.5em); --cubic-default: cubic-bezier(0.525, 0, 0, 1); --duration-fast: 0.2s; --duration-normal: 0.45s; --color-dark: #2b1d15; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible { outline: 1px solid var(--color-dark); } /* Nav */ .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), background-color var(--duration-fast) var(--cubic-default); } .nav-button { transition: color var(--duration-fast) var(--cubic-default), background-color var(--duration-fast) var(--cubic-default), border-color var(--duration-fast) var(--cubic-default); } /* Dropdown */ .nav-dropdown { transition: opacity var(--duration-fast) ease, visibility var(--duration-fast) ease, transform var(--duration-normal) var(--cubic-default); } [data-dropdown-toggle="open"]+.nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; } /* Gebruik JS class i.p.v. zware body:has() */ .nav.recolor-navbar { color: var(--color-dark); } .nav.recolor-navbar .nav-bg { height: var(--nav-bg-height); } .nav.recolor-navbar .page-bg { opacity: 1; } .nav.recolor-navbar .nav-button { border-color: var(--color-dark); color: var(--color-dark); } .nav.recolor-navbar .nav-button.is--primary { background-color: var(--color-dark); border-color: var(--color-dark); color: #fff; } /* Dropdown icon */ .nav-link__dropdown-icon { transition: transform var(--duration-normal) var(--cubic-default); } [data-dropdown-toggle] { transition: background-color var(--duration-fast) var(--cubic-default); } [data-dropdown-toggle="open"] .nav-link__dropdown-icon { transform: rotate(180deg); } /* Dropdown items */ .nav-dropdown__content-li { transition: opacity var(--duration-normal) var(--cubic-default), transform var(--duration-normal) var(--cubic-default); opacity: 0; transform: translate3d(4em, 0, 0); } .nav-dropdown__content-li:nth-child(2) { transition-delay: 0.08s; } .nav-dropdown__content-li:nth-child(3) { transition-delay: 0.12s; } .nav-dropdown__content-li:nth-child(4) { transition-delay: 0.16s; } .nav-dropdown__content-li:nth-child(5) { transition-delay: 0.2s; } [data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__content-li { opacity: 1; transform: translate3d(0, 0, 0); } /* 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.05); } .nav-dropdown__link.is--static:hover, .nav-dropdown__link.is--static:focus-visible { background: #D7D1CD; } /* Nav underline */ a.nav-link .nav-link__label, a.nav-link-mega .nav-link__label, a.nav-link.nav-link-mega .nav-link__label { position: relative; display: inline-block; } a.nav-link .nav-link__label::after, a.nav-link-mega .nav-link__label::after, a.nav-link.nav-link-mega .nav-link__label::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform var(--duration-normal) var(--cubic-default); } @media (hover: hover) and (pointer: fine) { a.nav-link:hover .nav-link__label::after, a.nav-link:focus-visible .nav-link__label::after, a.nav-link-mega:hover .nav-link__label::after, a.nav-link-mega:focus-visible .nav-link__label::after, a.nav-link.nav-link-mega:hover .nav-link__label::after, a.nav-link.nav-link-mega:focus-visible .nav-link__label::after { transform: scaleX(1); transform-origin: left center; } } /* Underline links */ [data-underline-link] { text-decoration: none; position: relative; } [data-underline-link]::before, [data-underline-link="alt"]::before, [data-underline-link="alt"]::after { content: ""; position: absolute; bottom: -0.0625em; left: 0; width: 100%; height: 0.0625em; background-color: currentColor; transition: transform 0.45s cubic-bezier(0.625, 0.05, 0, 1); transform-origin: right; transform: scaleX(0); } [data-underline-link="alt"]::before { transform-origin: left; transform: scaleX(1); } [data-underline-link="alt"]::after { transform-origin: right; transform: scaleX(0); } @media (hover: hover) and (pointer: fine) { [data-hover]:hover [data-underline-link]::before, [data-underline-link]:hover::before { transform-origin: left; transform: scaleX(1); } [data-hover]:hover [data-underline-link="alt"]::before, [data-underline-link="alt"]:hover::before { transform-origin: right; transform: scaleX(0); } [data-hover]:hover [data-underline-link="alt"]::after, [data-underline-link="alt"]:hover::after { transform-origin: left; transform: scaleX(1); } } /* Mobile */ @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: opacity var(--duration-fast) var(--cubic-default), visibility var(--duration-fast) var(--cubic-default), transform var(--duration-normal) var(--cubic-default); } .menu-button__line { transition: transform var(--duration-normal) var(--cubic-default), background-color var(--duration-fast) var(--cubic-default); } [data-menu-status="closed"] .nav-center { opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, -1em, 0); } [data-menu-status="open"] { color: var(--color-dark); } [data-menu-status="open"] .nav-center { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0); } [data-menu-status="open"] .menu-button__line:nth-of-type(1) { transform: translate3d(0, 0.125em, 0) rotate(135deg); background-color: #fff; } [data-menu-status="open"] .menu-button__line:nth-of-type(2) { transform: translate3d(0, -0.175em, 0) rotate(-135deg); background-color: #fff; } [data-menu-status="open"] .nav-bg { height: var(--nav-bg-height); } [data-menu-status="open"] .page-bg { opacity: 1; } [data-menu-status="open"] .nav-button.is--primary { background-color: var(--color-dark); border-color: var(--color-dark); color: #fff; } [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: translate3d(0, 0, 0); } } /* Minder animaties als gebruiker/browser dat wil */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }