/* ============================================================================ Streetbeat — Base Foundational reset + base element styles + page container, shared by EVERY page through the Site.astro layout (homepage included — post Astro migration there is no separate bespoke homepage base). Depends on assets/css/tokens.css (colors, --max-width) and assets/css/typography.css (--ts-body-base-* type tokens), which must be linked before this file. ============================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Root-level horizontal clip. Full-bleed sections are contained at their own box (see the team stage), but this is the page-wide backstop: a clip on the ROOT element is applied to the viewport itself, so any stray horizontal overrun can never widen the layout viewport and trigger the mobile zoom-out / "everything creeps off screen" failure. `clip` (not `hidden`) keeps overflow-y `visible` — the window still scrolls vertically, no second scroll container to fight the overlay scrollbar or GSAP pins. Mirrors the body floor below. */ /* Smooth anchor motion is driven explicitly by Site.astro after pinned-section geometry has settled. Keeping it on the root makes every programmatic scroll (including ScrollTrigger's refresh corrections and browser hash restoration) animate through stale intermediate measurements, which can pin a later chapter while the sticky hero is still onscreen. */ html { overflow-x: clip; } /* Text style: Body/Base */ body { font-family: var(--ts-body-base-family); font-size: var(--ts-body-base-size); font-weight: var(--ts-body-base-weight); line-height: var(--ts-body-base-line); letter-spacing: var(--ts-body-base-spacing); background: var(--surface-canvas); color: var(--text-primary); -webkit-font-smoothing: antialiased; /* Site floor (--site-min): below it the page holds this width and the viewport scrolls horizontally rather than reflowing further. (body's overflow-x clip below only clips its OWN overflow to this width; the window still scrolls to show the full body when narrower.) The fixed nav and the footer carry the same floor so all three chrome layers agree. */ min-width: var(--site-min); /* Full-bleed sections (TeamCarousel's 100vw 3D ring, the pinned LogoCloud runway) are authored to overrun the page edges and be clipped here — the legacy homepage set this on and the Astro migration dropped it, which is what let that overflow become a page-wide horizontal scroll. `clip` (not `hidden`) so never becomes a nested scroll container: `overflow-x: hidden` would force overflow-y to compute to `auto`, adding a second vertical scroller that fights the overlay scrollbar + GSAP pins. */ overflow-x: clip; } a { color: inherit; text-decoration: none; } .skip-link { position: fixed; top: var(--space-12); left: var(--space-12); z-index: var(--z-skip-link); padding: var(--space-12) var(--space-16); border-radius: var(--radius-pill); background: var(--surface-dark); color: var(--text-on-dark-primary); transform: translateY(calc(-100% - var(--space-16))); transition: transform 0.2s var(--ease); } .skip-link:focus-visible { transform: translateY(0); } #page:focus { outline: none; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-24); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }