/* =========================================================================== Public website — components that exist only on the marketing pages. This file is an EXTENSION of static/css/main.css, not a replacement and not a second design system. Two rules govern everything below: 1. NO BRAND HEX. Every colour here is a var() reference to a token defined in main.css. That is what makes light mode, dark mode and the .on-dark scope work without a single media query in this file. If you find yourself typing a "#", the token you want already exists. 2. Gold is never named. Components ask for --accent; .on-dark remaps it. Put navy behind a block by giving it .on-dark and the gold follows. It lives here rather than in main.css only because main.css belongs to the platform's shared design system and this app does not own it. Anything below that turns out to be genuinely shared belongs there instead. Mobile-first throughout: the base rules are the 375px layout and the media queries add width, never take it away. EVERYTHING IS INSIDE @layer marketing. That layer is declared last but one in main.css's order statement, after `portal`, so this file can override a shared component without a specificity war and `utilities` still wins over it. Nothing may be added outside the layer block: an unlayered declaration beats every layered one regardless of specificity, and a half-layered file is worse than no layers at all. The form set (.field, .field-radio, .field-check, .field-error, the honeypot), .notice and its modifiers have moved into main.css — they were defined here AND in two portal stylesheets, differently, and only never collided because no two of those files ever loaded together. =========================================================================== */ @layer marketing { /* --- Header and navigation ----------------------------------------------- main.css fixes the header at one row of --header-h. Six nav links plus a button do not fit that at 375px, so on narrow screens the header grows and the links wrap. site.js then upgrades it to a disclosure — but the wrapped layout is the fallback, so a visitor with no JavaScript still has every link. ------------------------------------------------------------------------ */ .public .site-header-inner { height: auto; min-height: var(--header-h); flex-wrap: wrap; padding-top: 0.5rem; padding-bottom: 0.5rem; } /* The wordmark is 306px at its display size, which alone is wider than a 375px screen minus its gutters. Rather than wrap the header onto two rows and lose a third of a phone viewport to sticky chrome, the lockup steps down. The crest carries the identity at this size. */ @media (max-width: 559px) { .public .site-header .lockup-word { font-size: 0.75rem; letter-spacing: 0.06em; } .public .site-header .crest-sm { width: 22px; } } .site-nav-links { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem 1.1rem; } /* The collapse is done in CSS, at a media query, and NOT switched on by JavaScript. Doing it in JS after a deferred script runs means every mobile page load paints a four-row wrapped nav and then snaps to one row — a visible jump on the primary target.