/* ============================================================================ * BABYWEEKS — Complete stylesheet * Cream paper + serif display + teal accent + deep green hero + fixed tabs * Fraunces (display) + Inter (body) + Schibsted Grotesk (eyebrows/labels/nav, * D-429) + IBM Plex Mono (code/data/numbers only) * ========================================================================== */ /* All design values live in /styles/tokens.css (D-421) — loaded before this * file. The aliases below keep un-migrated selectors (and progress.css / * weaning.css) working on the old names while sections move to the semantic * names directly. Remove each alias once nothing references it. Do NOT add * new literal values here — new values go in tokens.css primitives. * (--font-display / --font-body / --font-mono now come straight from * tokens.css under the same names — no alias needed.) */ :root { --paper: var(--surface-ground); --paper-2: var(--surface-sunken); --paper-card: var(--surface-card); --ink: var(--text-primary); --ink-soft: var(--text-secondary); --ink-mute: var(--text-tertiary); --rule: var(--border-hairline); --hero: var(--surface-hero); --hero-2: var(--surface-hero-2); --hero-soft: var(--ornament); --warm: var(--accent); --warm-soft: var(--accent-soft); --col-max: var(--layout-col-max); --r-sm: var(--radius-control); --r-md: var(--radius-card); --r-lg: var(--radius-card-lg); --shadow-soft: var(--shadow-card); } /* ============================================================================ * Reset & Baseline * ========================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } /* Accessibility: remove focus ring on mouse/touch, keep it for keyboard navigation */ :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-2); } html, body { font-family: var(--font-body); background: var(--surface-ground); color: var(--text-primary); font-size: 100%; /* user's text size = the root unit (Dynamic Type, D-423) — never a fixed px */ line-height: var(--leading-150); font-feature-settings: 'kern' on, 'liga' on; min-height: 100vh; min-height: 100dvh; overscroll-behavior: none; } body { padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); } #app { min-height: 100vh; min-height: 100dvh; max-width: var(--layout-col-max); margin: 0 auto; /* Bottom clearance so the last card isn't swallowed by the tab bar: * tab bar (~46px + safe area) + footer-tag (~32px) + breathing room. * Was 120px before the Phase 0/1 footer tag landed; was a raw 150px until D-511 * snapped it to the grid (152 = 38 × 4) and gave it a name. */ padding: 0 var(--space-24) var(--scroll-clear); position: relative; } /* ──────────────────────────────────────────────────────────────────────────── * 🔴 THE COLUMN, FOR THINGS THAT ARE NOT INSIDE #app. (D-711) * * `#app` above holds the column for ordinary surfaces. A FULL-SCREEN DRILL-IN is not * inside it: every one of them mounts `position: fixed; inset: 0` from its view file, which * takes it out of #app's box entirely. So each drill-in had to REMEMBER to restate the * column for itself. Seven did. Two did not — and the two that did not were found by Andrew, * one at a time, on consecutive days: * * 2026-07-30 603 timeline Gate 2, item 1 * 2026-07-31 701 search "the dev, search pages are still full width" * 2026-07-31 405 About "about is fine for now but rendered full screen" * 2026-07-31 COLL not-found text against the window edge, no chrome at all * * Four instances of ONE defect in two days is a missing mechanism, not sloppy execution * (D-706). This is the mechanism. The column is now a NAMED THING a host carries, not a * declaration a card has to remember — and check 47 fails the build when a full-screen host * is mounted without it. * * ── WHY IT IS ON THE HOST AND COLUMNS THE CONTENT, RATHER THAN ON THE HOST ITSELF ──────── * The host is the full-bleed scroll container AND the background plane; the card root inside * it carries the column and the card colour (phase.js documents this deliberately: "ground, * not card … the read's own root carries the card background inside its column"). Columning * the HOST would pull `--surface-ground` into a centred strip and leave raw at the * window edges on all seven surfaces that were already right. So: `.appcol` goes on the * host, and the column lands on what the host renders. * * `width: 100%` is load-bearing, not decoration. Search's host is a column FLEX container, * and on a flex item `margin-inline: auto` overrides `align-items: stretch` — without an * explicit width its children would shrink to fit their text. * * ── `.appcol-self` — THE ONE HOST THAT IS ALSO ITS OWN CONTENT ROOT ────────────────────── * `search.js` mounts `.ssf` directly as the fixed host; there is no wrapper to put `.appcol` * on. It takes the column on itself. Two placements, ONE declaration — which is the whole * point: the token is written here and nowhere else. * ────────────────────────────────────────────────────────────────────────────────────── */ .appcol > *, .appcol-self { width: 100%; max-width: var(--layout-col-max); margin-inline: auto; } /* ============================================================================ * Links & basic elements * ========================================================================== */ a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; } /* Used on