/* ============================================================ site.css - The Bridge Up Project One stylesheet, no build step. Read this first. HOW THIS FILE IS ORGANISED TIER 0 holds the base styles and MUST STAY FIRST: everything below is written to override it at equal specificity. Later tiers are corrections layered on top rather than edits in place, so source order is load-bearing. Do not reorder. All design tokens live in a single :root at the top - colour, type scale, leading, tracking, spacing, radii, shadows, z-index. Change them there, not at the point of use. TWO CONTRACTS THAT WILL BREAK THINGS IF IGNORED 1. Anything hidden for animation must be gated behind .js on AND resolved by the reduced-motion block in TIER 7. CSS that hides what the engine no longer reveals strands content invisible. See TIER 5 and TIER 7. 2. The nav and footer are duplicated across four HTML files. scripts/check-chrome.js blocks commits where they drift. CONTENTS FONTS - self-hosted L58 TIER 0 — BASE L113 The Bridge Up Project — polish & motion layer L510 SCROLL REVEAL L590 TEXT APPEARANCE — word-by-word headline reveal L624 PARALLAX LAYERS L648 NAV L723 BUTTONS — press feedback was missing everywhere L790 CARDS — resting depth so they stop reading as flat o L808 MISSION — a gold hairline to anchor an otherwise bar L843 PROGRAM VISUAL — the bridge builds itself. L859 FOOTER L906 MOBILE — scroll-linked work now runs here too, at an L928 TIER 2 — depth, material, and alignment L943 TIER 3 — adaptive layout L1121 NAV — every destination visible on desktop, one cont L1139 STATS — lead figure + stacked pair, replacing 3 equa L1182 CONNECT PATHS — two primary routes, one secondary. L1393 PROGRAMS — let the card grid choose its own column c L1423 TABLET L1432 PHONE L1447 TIER 4 — cohesion L1536 TIER 5 — GSAP engine handoff L1646 CTA CHOREOGRAPHY — "Span" (primary) and "Circuit" (s L1715 TIER 6 — CROSS-DEVICE FIDELITY L1849 TIER 7 — REDUCED MOTION IS NOT HONOURED L2046 TIER 8 — SCROLL-DRIVEN MOTION RUNS AT EVERY WIDTH L2096 ============================================================ */ /* ============================================================ FONTS - self-hosted Google Fonts was the last third-party runtime dependency on a site that self-hosts everything else. It cost more than a request: the is a render-blocking stylesheet from another origin, and motion.js gates every text animation on document.fonts.ready, so a slow font response stalled the whole choreography up to its 2.5s cap. Both families are SIL Open Font License 1.1, which permits redistribution; see fonts/OFL.txt. Variable woff2, latin and latin-ext only - the site is lang="en" and the other subsets were never going to be requested. font-display: swap is kept: text renders immediately in the fallback and reflows once, which beats invisible text. ============================================================ */ @font-face{ font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ============================================================ TIER 0 — BASE Was duplicated inline in all four HTML files. Consolidated here. MUST STAY FIRST IN THIS FILE. It occupies the cascade position the inline