html.lenis, html.lenis body { height: auto } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain } .lenis.lenis-stopped { overflow: clip } .lenis.lenis-smooth iframe { pointer-events: none } #page-fader { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background-color: var(--bg-color); opacity: 1; transition: opacity 0.15s ease-out; } #page-fader.is-hidden { opacity: 0; transition: opacity 0.15s ease-out; } :root { --size-unit: 16; --size-container-ideal: 1440; --size-container-min: 992px; --size-container-max: 1800px; --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max)); --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit))); } @media screen and (max-width: 991px) { :root { --size-container-ideal: 834; --size-container-min: 768px; --size-container-max: 991px; } } @media screen and (max-width: 767px) { :root { --size-container-ideal: 550; --size-container-min: 480px; --size-container-max: 767px; } } @media screen and (max-width: 479px) { :root { --size-container-ideal: 390; --size-container-min: 320px; --size-container-max: 479px; } } body { font-size: var(--size-font); } .container { max-width: var(--size-container); } .container.medium { max-width: calc(var(--size-container) * 0.85); } .container.small { max-width: calc(var(--size-container) * 0.7); } html.lenis, html.lenis body { height: auto } html, body { scrollbar-width: none; -ms-overflow-style: none; } h1, h2, h3, h4, h5 { -webkit-text-rendering: optimizeSpeed; text-rendering: optimizeSpeed; -webkit-transform: translateZ(0); font-kerning: none; } body { font-optical-sizing: none; } @media (min-width: 992px) { .navbar { transition: transform 1s ease, color 1s ease; transform: translateY(0%) rotate(0.001deg); } body[data-scrolling-started="true"][data-scrolling-direction="down"] .navbar { transform: translateY(-100%) rotate(0.001deg); } } .nav__inner { transition: background-color 1s ease; background-color: inherit; } body[data-scrolling-started="true"][data-scrolling-direction="up"] .nav__inner { background-color: var(--bg-color); } body[data-scrolling-started="true"][data-scrolling-direction="up"] .nav_mobile .bold-nav-full__bar { background-color: var(--bg-color) !important; } body[data-scrolling-started="true"][data-scrolling-direction="up"] .nav__item-link { color: var(--black); } body[data-scrolling-started="true"][data-scrolling-direction="up"] .logo { filter: none; } body[data-scrolling-started="true"][data-scrolling-direction="up"] .bold-nav-full__hamburger-bar.light { background-color: var(--black); } @media (max-width: 991px) { .logo.white { transition: filter 0.25s ease; transition-delay: 0s; } .bold-nav-full__hamburger-bar.light { transition: background-color 0.25s ease; transition-delay: 0s; } html.is-nav-open .logo.white { filter: invert(0%) !important; transition-delay: 0.4s; } html.is-nav-open .bold-nav-full__hamburger-bar.light { background-color: #000 !important; transition-delay: 0.4s; } } .bold-nav-full__bar { transform: translateY(0); transition: transform 1s ease; will-change: transform; } body[data-scrolling-started="true"][data-scrolling-direction="down"] .nav_mobile .bold-nav-full__bar { transform: translateY(-110%); } body[data-scrolling-direction="up"] .nav_mobile .bold-nav-full__bar, body[data-scrolling-started="false"] .nav_mobile .bold-nav-full__bar { transform: translateY(0); } html.is-nav-open .nav_mobile .bold-nav-full__bar { transform: translateY(0) !important; } .bold-nav-full__hamburger .bold-nav-full__hamburger-bar { transform: translate(0, 0) rotate(0.001deg); transition: transform 0.5s cubic-bezier(.7, 0, .3, 1); } .bold-nav-full__hamburger .bold-nav-full__hamburger-bar:nth-child(1) { transform: translate(0, -.45em) scale(1, 1) rotate(0.001deg); } .bold-nav-full__hamburger .bold-nav-full__hamburger-bar:nth-child(3) { transform: translate(0, .45em) scale(1, 1) rotate(0.001deg); } .bold-nav-full__hamburger:hover .bold-nav-full__hamburger-bar:nth-child(1) { transform: translate(0, -.45em) scale(.5, 1) rotate(0.001deg); } .bold-nav-full__hamburger:hover .bold-nav-full__hamburger-bar:nth-child(3) { transform: translate(0, .45em) scale(.5, 1) rotate(0.001deg); } [data-navigation-status="active"] .bold-nav-full__hamburger-bar:nth-child(1) { transform: translate(0, 0) rotate(45deg) scale(1, 1); } [data-navigation-status="active"] .bold-nav-full__hamburger-bar:nth-child(2) { transform: translate(-150%, 0) rotate(0.001deg) scale(1, 1); } [data-navigation-status="active"] .bold-nav-full__hamburger-bar:nth-child(3) { transform: translate(0, 0) rotate(-45deg) scale(1, 1); } [data-navigation-status="active"] .bold-nav-full__hamburger:hover .bold-nav-full__hamburger-bar:nth-child(1) { transform: translate(0, 0) rotate(45deg) scale(.7, 1); } [data-navigation-status="active"] .bold-nav-full__hamburger:hover .bold-nav-full__hamburger-bar:nth-child(3) { transform: translate(0, 0) rotate(-45deg) scale(.7, 1); } .bold-nav-full__tile { transition: clip-path 1s cubic-bezier(.9, 0, .1, 1); clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); } [data-navigation-status="active"] .bold-nav-full__tile { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } .bold-nav-full__link { transform: translateY(100%) rotate(5deg); transition: transform 0.75s cubic-bezier(.7, 0, .3, 1); } .bold-nav-full__li:nth-child(1) .bold-nav-full__link { transition-delay: 0.2s; } .bold-nav-full__li:nth-child(2) .bold-nav-full__link { transition-delay: 0.15s; } .bold-nav-full__li:nth-child(3) .bold-nav-full__link { transition-delay: 0.1s; } .bold-nav-full__li:nth-child(4) .bold-nav-full__link { transition-delay: 0.05s; } .bold-nav-full__li:nth-child(5) .bold-nav-full__link { transition-delay: 0s; } [data-navigation-status="active"] .bold-nav-full__link { transform: translateY(0%) rotate(0.001deg); transition-delay: 0.3s; } [data-navigation-status="active"] .bold-nav-full__li:nth-child(1) .bold-nav-full__link { transition-delay: 0.3s; } [data-navigation-status="active"] .bold-nav-full__li:nth-child(2) .bold-nav-full__link { transition-delay: 0.35s; } [data-navigation-status="active"] .bold-nav-full__li:nth-child(3) .bold-nav-full__link { transition-delay: 0.4s; } [data-navigation-status="active"] .bold-nav-full__li:nth-child(4) .bold-nav-full__link { transition-delay: 0.45s; } [data-navigation-status="active"] .bold-nav-full__li:nth-child(5) .bold-nav-full__link { transition-delay: 0.5s; } [data-navigation-status="active"] .bold-nav-full__li:nth-child(6) .bold-nav-full__link { transition-delay: 0.55s; } [data-navigation-status="active"] .bold-nav-full__li:nth-child(7) .bold-nav-full__link { transition-delay: 0.6s; } [data-navigation-status="active"] .bold-nav-full__li:nth-child(8) .bold-nav-full__link { transition-delay: 0.65s; } [data-navigation-status="active"] .bold-nav-full__li:nth-child(9) .bold-nav-full__link { transition-delay: 0.7s; } .bold-nav-full__li { transition: opacity 0.5s cubic-bezier(.7, 0, .3, 1); } .bold-nav-full__ul:has(.bold-nav-full__li:hover) .bold-nav-full__li { opacity: 0.15; } .bold-nav-full__ul:has(.bold-nav-full__li:hover) .bold-nav-full__li:hover { opacity: 1; } .bold-nav-full__link .bold-nav-full__link-text { transition: transform 0.5s cubic-bezier(.7, 0, .3, 1); transform: translateY(0%) rotate(0.001deg); } .bold-nav-full__link:hover .bold-nav-full__link-text { transform: translateY(-100%) rotate(0.001deg); } /* btn */ .btn-h { transition: background-color 260ms ease, color 260ms ease, column-gap 260ms ease; } .btn-h .btn-h_icon { color: inherit; transition: color 260ms ease; } .btn-h .btn-h_icon svg { transform: rotate(0deg); transform-origin: 50% 50%; transition: transform 260ms ease; } /* Hover/focus */ .btn-h:hover, .btn-h:focus-visible { column-gap: 3em; } .btn-h:hover, .btn-h:focus-visible { background-color: var(--primary); } .btn-h.orange:hover, .btn-h.orange:focus-visible { background-color: var(--black); } .btn-h:hover .btn-h_icon svg, .btn-h:focus-visible .btn-h_icon svg { transform: rotate(45deg); } /* btns .btn-label{ position: relative; overflow: hidden; z-index: 0; transition: color 220ms ease; } .btn-label::before{ content: ""; position: absolute; inset: 0; transform: translateY(100%); transition: transform 320ms cubic-bezier(.2,.8,.2,1); z-index: -1; } .btn-label::before{ background: var(--primary); } .btn-label.black::before{ background: var(--black); } .btn-label.light::before{ background: var(--white); } .btn:hover .btn-label.black, .btn:focus-visible .btn-label{ border-color: var(--black); } .btn:hover .btn-label.light, .btn:focus-visible .btn-label{ border-color: var(--white); } .btn:hover .btn-label, .btn:focus-visible .btn-label{ border-color: var(--primary); } .btn:hover .btn-label, .btn:focus-visible .btn-label{ color: #fff; } .btn:hover .btn-label.light, .btn:focus-visible .btn-label.light{ color: var(--black); } .btn:hover .btn-label::before, .btn:focus-visible .btn-label::before{ transform: translateY(0); }