/* * Custom styles on top of the Webflow export. Linked into every page by * scripts/build.mjs, so they survive re-exporting from Webflow. */ /* * Keep the scrollbar's space reserved. Finsweet's scroll-disable sets * overflow: hidden while a popup is open, which otherwise removes the * scrollbar and shifts the page sideways. The build adds * fs-scrolldisable-gap="false" to so Finsweet doesn't also pad it. */ html { scrollbar-gutter: stable; } /* * Navbar scroll animation with CSS scroll-driven animations. * * Replaces Webflow's "Navbar Animation - Desktop/Mobile" interactions, which * measured progress against the height of the whole page, so the wordmark * slid out long before the navbar finished changing and the timing shifted * whenever the page got longer. These ranges are fixed scroll distances. * * CSS animations take precedence over the inline styles Webflow's interaction * still writes, so browsers without animation-timeline keep Webflow's version. */ :root { /* Navbar shrinks, darkens and the logo shrinks between these scroll offsets */ --navbar-scroll-start: 40px; --navbar-scroll-end: 360px; /* The wordmark slides out over the last part of that range */ --wordmark-exit-start: 220px; } @supports (animation-timeline: scroll()) { .navbar_component { animation: navbar-compact linear both; animation-timeline: scroll(root block); animation-range: var(--navbar-scroll-start) var(--navbar-scroll-end); } .navbar_component .nav-logo { animation: nav-logo-compact linear both; animation-timeline: scroll(root block); animation-range: var(--navbar-scroll-start) var(--navbar-scroll-end); } .navbar_component .wordmark { animation: wordmark-exit linear both; animation-timeline: scroll(root block); animation-range: var(--wordmark-exit-start) var(--navbar-scroll-end); } } @keyframes navbar-compact { from { height: 7rem; background-color: #0b182600; } to { height: 5rem; background-color: var(--dark-blue02, #0b1826); } } @keyframes nav-logo-compact { from { height: 4rem; } to { height: 3rem; } } @keyframes wordmark-exit { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* * Keyboard focus ring in the brand yellow everywhere. !important because the * Webflow CSS removes outlines on some controls (dropdown toggle, nav button, * inputs) and the export's global styles set a blue ring after this file. */ a:focus-visible, button:focus-visible, div:focus-visible { outline: 0.125rem solid var(--yellow, #fac826) !important; outline-offset: 0.125rem; transition: outline 0!important; } /* FAQ questions (made focusable by public/js/site.js) need more room */ .accordion-item [role="button"]:focus-visible { outline-offset: 6px; border-radius: 2px; }