. JS in main.js flips * aria-expanded, toggles the [hidden] attribute on the overlay, and adds * .bwc-no-scroll to . CSS keys all state off [aria-expanded] + * [hidden] — no

dependency, no [open] state read or * written. Robust across Safari, Brave, Firefox. * * Universal contract: * - Hover gated @media (hover: hover) and (pointer: fine) * - :focus-visible custom — 2px gold + 4px offset (matches components.css) * - Exact transition properties only — NEVER transition: all * - UI durations ≤200ms (tooltip 160). NO motion on the keyboard-init * toggle (Emil §6.3 rule 1) — icons swap via [aria-expanded] state * without transition. GSAP enhances open/close in Phase 7. * - prefers-reduced-motion handled globally in utilities.css. * - Logical properties everywhere (inset-block-*, inline-size, etc.). */ /* =========================================================================== * 1. Header outer — fixed overlay pattern. Sits above the hero video * without consuming layout height (no document flow contribution). * The wrapper spans inset-inline: 0 to enable centred-container * positioning of the pill. pointer-events: none on the wrapper + * pointer-events: auto on .bwc-nav-pill (bloc 2) ensures only the * pill itself catches clicks — clicks on the empty band around the * pill pass through to the hero CTAs below. Pattern: Apple, Stripe, * wattlecorp.com/ae. * ========================================================================= */ .bwc-header { position: fixed; inset-block-start: 1rem; inset-inline: 0; z-index: var(--bwc-z-sticky); pointer-events: none; } /* =========================================================================== * 2. Nav pill — Fluid Island translucent container * ========================================================================= */ .bwc-nav-pill { display: flex; inline-size: 100%; /* fill .bwc-container content area — without this, the flex container auto-sizes to its content and collapses on mobile when desktop items are display:none */ align-items: center; justify-content: space-between; gap: clamp(1rem, 2vw, 2rem); padding-block: 0.5rem; padding-inline: 1.5rem 0.5rem; /* tighter right inline for flush CTA / toggle */ background-color: color-mix(in srgb, var(--bwc-bg) 85%, transparent); /* warm-black 85% — frosted-glass surface so scrolled page content never bleeds through and renders the pill illegible */ border: 1px solid rgba(245, 241, 232, 0.08); border-radius: 999px; backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); /* Safari */ pointer-events: auto; /* counter to .bwc-header pointer-events: none — the pill itself catches clicks */ } /* =========================================================================== * 3. Brand wordmark — Fraunces SOFT 10, premium editorial anchor * ========================================================================= */ .bwc-nav-brand { display: inline-flex; align-items: center; gap: 0.5rem; /* picto → wordmark rhythm */ font-family: var(--bwc-font-display); font-size: var(--bwc-fs-base); font-weight: 520; font-optical-sizing: auto; font-variation-settings: 'SOFT' 10; letter-spacing: -0.01em; color: var(--bwc-text); text-decoration: none; white-space: nowrap; } /* Brand mark — square padlock picto left of the Fraunces wordmark. Sized * in rem off the pill rhythm; 30px desktop / 26px ≤767px so it stays * recognisable without crowding the wordmark or inflating pill height. * Square asset (96×96 source) → height drives width via the img attrs. */ .bwc-nav-brand__mark { display: block; inline-size: 1.625rem; /* 26px — mobile base */ block-size: 1.625rem; } @media (min-width: 768px) { .bwc-nav-brand__mark { inline-size: 1.875rem; /* 30px — desktop */ block-size: 1.875rem; } } .bwc-nav-brand:focus-visible { outline: 2px solid var(--bwc-accent-gold); outline-offset: 4px; border-radius: 2px; } /* =========================================================================== * 4. Desktop / Mobile mutually-exclusive containers * Below md: mobile

visible, desktop hidden. * md+ (768px): desktop visible (flex), mobile hidden. * ========================================================================= */ .bwc-nav-desktop { display: none; } .bwc-nav-mobile { display: block; } @media (min-width: 768px) { .bwc-nav-desktop { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); } .bwc-nav-mobile { display: none; } } /* =========================================================================== * 5. Items list — horizontal in the pill, vertical (overridden) in overlay * ========================================================================= */ .bwc-nav-items { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.5rem); list-style: none; margin: 0; padding: 0; } /* =========================================================================== * 6. Nav link — color + traced gold hairline on hover / aria-current * ========================================================================= */ .bwc-nav-link { position: relative; display: inline-block; color: var(--bwc-text); font-family: var(--bwc-font-body); font-size: var(--bwc-fs-sm); font-weight: 500; text-decoration: none; padding-block: 0.25rem; transition: color var(--bwc-dur-tooltip) var(--bwc-ease-out); } .bwc-nav-link::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: -2px; block-size: 1px; background-color: var(--bwc-accent-gold); transform: scaleX(0); transform-origin: left center; transition: transform var(--bwc-dur-tooltip) var(--bwc-ease-out); } @media (hover: hover) and (pointer: fine) { .bwc-nav-link:hover { color: var(--bwc-accent-gold); } .bwc-nav-link:hover::after { transform: scaleX(1); } } .bwc-nav-link:focus-visible { outline: 2px solid var(--bwc-accent-gold); outline-offset: 4px; border-radius: 2px; } /* Active page — sticky gold treatment (hairline always visible) */ .bwc-nav-link[aria-current="page"] { color: var(--bwc-accent-gold); } .bwc-nav-link[aria-current="page"]::after { transform: scaleX(1); } /* =========================================================================== * 7. Nav CTA — compact pill, override .bwc-btn-primary padding for header rhythm * ========================================================================= */ .bwc-nav-cta { padding-block: 0.5rem; padding-inline: 1.25rem; font-size: var(--bwc-fs-sm); } /* =========================================================================== * 8. Mobile toggle — circular hamburger