/** * Webflow Animation & Interaction Styles Replacement * ================================================== * This CSS replaces Webflow's IX2 (Interactions 2.0) initial states * and provides smooth animations for self-hosted deployment. */ /* =========================================== 0. NAVBAR FIXES =========================================== */ /* * The Webflow CSS stack (webflow.css + dcode---updated.webflow.css) handles * ALL navbar styling at ALL breakpoints: * .navbar { position: fixed; inset: 0% 0% auto; } * .navbar.v3 { background-color: #fff0; } * .navbar.global { z-index: 100; background-color: var(--bg-color); } * * We ONLY override properties that webflow.js may set as inline styles * during mobile nav open/close, which could persist after a viewport resize. */ /* --- V3 Navbar: Hide pill on mobile (≤767px) --- */ /* dcode CSS .nav-menu.v3 { display: flex } at base wins over * webflow.css [data-collapse='small'] .w-nav-menu { display: none } * because dcode loads later at equal specificity. Force the hide, * but allow webflow.js to show it when hamburger is tapped. */ @media screen and (max-width: 767px) { .navbar.v3 .w-nav-menu:not([data-nav-menu-open]) { display: none !important; } } /* --- V3 Navbar: Desktop only (pill visible above 767px) --- */ /* index.html uses data-collapse="small" → collapses at 767px */ @media screen and (min-width: 768px) { .navbar.v3 .w-nav-menu { display: flex !important; position: relative !important; transform: none !important; width: auto !important; height: auto !important; } .navbar.v3 .w-nav-button { display: none !important; } } /* --- Global Navbar: Desktop only (links visible above 991px) --- */ /* Other pages use data-collapse="medium" → collapses at 991px */ @media screen and (min-width: 992px) { .navbar.global .w-nav-menu { display: flex !important; position: static !important; transform: none !important; width: auto !important; height: auto !important; float: none !important; } .navbar.global .w-nav-button { display: none !important; } } /* =========================================== 1. IX2 CLASS - Enable Animation Initial States =========================================== */ /* When JavaScript loads, the w-mod-ix class is added to . * This deactivates the inline