/* ========================================================================== styles/base.css — reset, page base, layout wrappers, utilities Owner: scaffold-agent. Source: DESIGN_SPEC §1–§2. Tokens: src/tokens.css. Section shells (#nav, #hero, #press, …) are styled by their OWNERS, never here. The only layout this file gives is: body, .container and the two band wrappers (.band--dark, .band--light) from DESIGN_SPEC §2.4. Breakpoint literals (custom properties do not work in @media): tablet (max-width: 1199.98px) · nav-mobile (max-width: 839.98px) quote-sm (max-width: 809px) · phone (max-width: 789.98px) ========================================================================== */ /* ---------- 1. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; /* §2.3: tab-click scrolling is done in JS */ } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } h1, h2, h3, h4, h5, h6 { font: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; /* §2.3: links have no underline and inherit color */ -webkit-tap-highlight-color: transparent; } strong, b { font-weight: var(--fw-bold); } [hidden] { display: none !important; } /* ---------- 2. Page base (§2.3) ---------- */ body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: var(--fw-medium); color: var(--color-text); background: var(--color-bg); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } main { display: block; } /* ---------- 3. Container (§2.2) ---------- */ /* 1000 at x=220 (1440) · 772 at x=24 (820) · 342 at x=24 (390) */ .container { width: var(--container); margin-inline: auto; } /* ---------- 4. Band wrappers (§2.4, scaffold-owned) ---------- */ .band { position: relative; display: flex; flex-direction: column; } /* Dark band: bento + import. Children are NOT centered (align stretch): a child with a max-width centers itself (margin-inline: auto). */ .band--dark { background: var(--color-bg-dark); padding: var(--space-80) 0 var(--space-200); gap: var(--space-76); } /* Light band (#features): sharing, history, live-data, broadcast, more-reasons. Children ARE centered (align-items: center): give them width: 100% + max-width. */ .band--light { background: var(--color-bg); align-items: center; padding: var(--space-140) var(--gutter) 0; gap: var(--feature-gap); overflow: hidden; } @media (max-width: 1199.98px) { .band--dark { gap: 78px; } /* tablet band gap (DESIGN_SPEC §18 #10) */ } @media (max-width: 789.98px) { .band--dark { gap: 0; } /* phone: bento carries its own 65px padding */ .band--light { padding-top: var(--space-80); } } /* ---------- 5. Buttons and pills (structure only; each section sets size, fill, color) ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); margin: 0; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .btn:disabled, .btn[aria-disabled="true"] { cursor: default; pointer-events: none; } .pill { display: inline-flex; align-items: center; border-radius: var(--radius-pill); white-space: nowrap; } /* ---------- 6. Placeholder fills (DESIGN_SPEC §0.2) ---------- */ .ph { background: var(--grad-placeholder); } .ph-dark { background: var(--grad-placeholder-dark); } /* ---------- 7. Typography utilities (one per type-scale token, §1.5) ---------- Each sets family, size, line-height, letter-spacing (0 when the token has none) and the weight used in the spec table. Sizes switch at the breakpoints inside tokens.css, so never re-declare them in media queries. Declared after .btn/.pill so `class="btn t-button"` keeps the type. */ .t-display { font-family: var(--font-sans); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display, 0); font-weight: var(--fw-bold); } .t-title-xl { font-family: var(--font-sans); font-size: var(--fs-title-xl); line-height: var(--lh-title-xl); letter-spacing: var(--ls-title-xl, 0); font-weight: var(--fw-bold); } .t-title-l { font-family: var(--font-sans); font-size: var(--fs-title-l); line-height: var(--lh-title-l); letter-spacing: var(--ls-title-l, 0); font-weight: var(--fw-bold); } .t-title-l-soft { font-family: var(--font-sans); font-size: var(--fs-title-l-soft); line-height: var(--lh-title-l-soft); letter-spacing: var(--ls-title-l-soft, 0); font-weight: var(--fw-bold); } .t-title-m { font-family: var(--font-sans); font-size: var(--fs-title-m); line-height: var(--lh-title-m); letter-spacing: var(--ls-title-m, 0); font-weight: var(--fw-bold); } .t-title-s { font-family: var(--font-sans); font-size: var(--fs-title-s); line-height: var(--lh-title-s); letter-spacing: var(--ls-title-s, 0); font-weight: var(--fw-bold); } .t-card-xl { font-family: var(--font-sans); font-size: var(--fs-card-xl); line-height: var(--lh-card-xl); letter-spacing: var(--ls-card-xl, 0); font-weight: var(--fw-semibold); } .t-card-l { font-family: var(--font-sans); font-size: var(--fs-card-l); line-height: var(--lh-card-l); letter-spacing: var(--ls-card-l, 0); font-weight: var(--fw-semibold); } .t-card-l-dark { font-family: var(--font-sans); font-size: var(--fs-card-l-dark); line-height: var(--lh-card-l-dark); letter-spacing: var(--ls-card-l-dark, 0); font-weight: var(--fw-semibold); } .t-card-m { font-family: var(--font-sans); font-size: var(--fs-card-m); line-height: var(--lh-card-m); letter-spacing: var(--ls-card-m, 0); font-weight: var(--fw-semibold); } .t-board { font-family: var(--font-sans); font-size: var(--fs-board); line-height: var(--lh-board); letter-spacing: var(--ls-board, 0); font-weight: var(--fw-semibold); } .t-quote { font-family: var(--font-serif); font-size: var(--fs-quote); line-height: var(--lh-quote); letter-spacing: var(--ls-quote, 0); font-weight: var(--fw-bold); } .t-lead-l { font-family: var(--font-sans); font-size: var(--fs-lead-l); line-height: var(--lh-lead-l); letter-spacing: var(--ls-lead-l, 0); font-weight: var(--fw-medium); } .t-lead-l-tight { font-family: var(--font-sans); font-size: var(--fs-lead-l-tight); line-height: var(--lh-lead-l-tight); letter-spacing: var(--ls-lead-l-tight, 0); font-weight: var(--fw-medium); } .t-link-lg { font-family: var(--font-sans); font-size: var(--fs-link-lg); line-height: var(--lh-link-lg); letter-spacing: var(--ls-link-lg, 0); font-weight: var(--fw-medium); } .t-lead-m { font-family: var(--font-sans); font-size: var(--fs-lead-m); line-height: var(--lh-lead-m); letter-spacing: var(--ls-lead-m, 0); font-weight: var(--fw-medium); } .t-lead-s { font-family: var(--font-sans); font-size: var(--fs-lead-s); line-height: var(--lh-lead-s); letter-spacing: var(--ls-lead-s, 0); font-weight: var(--fw-medium); } .t-lead-s-tight { font-family: var(--font-sans); font-size: var(--fs-lead-s-tight); line-height: var(--lh-lead-s-tight); letter-spacing: var(--ls-lead-s-tight, 0); font-weight: var(--fw-medium); } .t-body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body, 0); font-weight: var(--fw-medium); } .t-body-card { font-family: var(--font-sans); font-size: var(--fs-body-card); line-height: var(--lh-body-card); letter-spacing: var(--ls-body-card, 0); font-weight: var(--fw-medium); } .t-small { font-family: var(--font-sans); font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--ls-small, 0); font-weight: var(--fw-regular); } .t-button { font-family: var(--font-sans); font-size: var(--fs-button); line-height: var(--lh-button); letter-spacing: var(--ls-button, 0); font-weight: var(--fw-semibold); } .t-button-sm { font-family: var(--font-sans); font-size: var(--fs-button-sm); line-height: var(--lh-button-sm); letter-spacing: var(--ls-button-sm, 0); font-weight: var(--fw-medium); } .t-nav { font-family: var(--font-sans); font-size: var(--fs-nav); line-height: var(--lh-nav); letter-spacing: var(--ls-nav, 0); font-weight: var(--fw-medium); } .t-nav-cta { font-family: var(--font-sans); font-size: var(--fs-nav-cta); line-height: var(--lh-nav-cta); letter-spacing: var(--ls-nav-cta, 0); font-weight: var(--fw-medium); } .t-wordmark { font-family: var(--font-sans); font-size: var(--fs-wordmark); line-height: var(--lh-wordmark); letter-spacing: var(--ls-wordmark, 0); font-weight: var(--fw-semibold); } .t-announcement { font-family: var(--font-sans); font-size: var(--fs-announcement); line-height: var(--lh-announcement); letter-spacing: var(--ls-announcement, 0); font-weight: var(--fw-medium); } .t-footer-heading { font-family: var(--font-sans); font-size: var(--fs-footer-heading); line-height: var(--lh-footer-heading); letter-spacing: var(--ls-footer-heading, 0); font-weight: var(--fw-semibold); } .t-footer-link { font-family: var(--font-sans); font-size: var(--fs-footer-link); line-height: var(--lh-footer-link); letter-spacing: var(--ls-footer-link, 0); font-weight: var(--fw-regular); } .t-label { font-family: var(--font-sans); font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-label, 0); font-weight: var(--fw-semibold); } .t-caption { font-family: var(--font-sans); font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption, 0); font-weight: var(--fw-regular); } .t-micro { font-family: var(--font-sans); font-size: var(--fs-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro, 0); font-weight: var(--fw-medium); } .t-ui-body { font-family: var(--font-sans); font-size: var(--fs-ui-body); line-height: var(--lh-ui-body); letter-spacing: var(--ls-ui-body, 0); font-weight: var(--fw-medium); } .t-ui-subhead { font-family: var(--font-sans); font-size: var(--fs-ui-subhead); line-height: var(--lh-ui-subhead); letter-spacing: var(--ls-ui-subhead, 0); font-weight: var(--fw-regular); } .t-ui-footnote { font-family: var(--font-sans); font-size: var(--fs-ui-footnote); line-height: var(--lh-ui-footnote); letter-spacing: var(--ls-ui-footnote, 0); font-weight: var(--fw-regular); } .t-hand { font-family: var(--font-hand); font-size: var(--fs-hand); line-height: var(--lh-hand); letter-spacing: var(--ls-hand, 0); font-weight: var(--fw-regular); } /* weight overrides (the spec's T(name, weight, …) notation) */ .fw-regular { font-weight: var(--fw-regular); } .fw-medium { font-weight: var(--fw-medium); } .fw-semibold { font-weight: var(--fw-semibold); } .fw-bold { font-weight: var(--fw-bold); } /* text-wrap: balance only where the spec says so (§2.3) */ .balance { text-wrap: balance; } /* ---------- 8. Accessibility ---------- */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* ---------- 9. Reduced motion (base) ---------- tokens.css already zeroes the spring / hover durations. This stops CSS loops everywhere; JS loops (ticker, parallax, radar) must also check matchMedia('(prefers-reduced-motion: reduce)') in their own scripts. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; } }