/* ============================================================================ wake.css — the shared Wake web design foundation (web-parity plan, Phase 0) ---------------------------------------------------------------------------- ONE token layer for every web surface, carrying the native iOS app's exact light + dark palette (ios/WakeApp/UI/Shared/WakeStyle.swift). Pages link this, delete their own drifted :root block, and inherit an appearance-adaptive theme for free — because their CSS already reads var(--ink)/var(--accent)/... . Dark theme is a corrected invert (warm cream ⇄ deep navy-night), NOT a naive flip; the hexes below match the app swatch-for-swatch. See docs/web-parity-plan.md. Keep in lock-step with WakeStyle.swift. ============================================================================ */ :root{ color-scheme: light dark; /* native scrollbars/controls follow the theme in dark */ /* — core palette (light) — */ --paper:#faf8f4; /* page ground */ --card:#faf8f4; /* lifted surface (== paper in light; delineated by hairlines) */ --ink:#16294d; /* primary text + data (navy) */ --dim:#525d6e; /* secondary text (navy-slate, ≥6:1 on paper) */ --label:#3a4658; /* section headers (a touch stronger than dim) */ --accent:#b51e34; /* the ONE highlight — leader, "now", the single CTA */ --river:#2e6cb5; /* course line (web-only; the map is Apple's on iOS) */ --good:#2f6b4f; /* faster / healthy */ --warn:#c77d1a; /* degraded / waiting */ --scaffold:#c9ccd1; /* gridlines, inactive dots, baselines */ --faint:#efe9dd; /* quiet / off-state surface */ --fill:#ece6da; /* chip, sparkline area tint */ --hair:rgba(22,41,77,.12); /* 1px borders + dividers */ --hair2:rgba(22,41,77,.07); /* faint dividers (table rows) */ --shadow:0 2px 14px rgba(21,25,29,.10); /* — semantic aliases consumed by the spectator + operator surfaces (Phases 2–3) — */ --buffer:var(--warn); /* viewer "waiting for boats" */ --amber:var(--warn); /* program "setup" badge */ --live:var(--good); /* operator racing / auto-start */ --stop:var(--accent); /* operator scratched / danger */ --idle:#aab1b9; /* operator not-started */ /* — type — */ --display:"Big Shoulders Display","Arial Narrow",sans-serif; --serif:"Source Serif 4",Georgia,serif; /* — motion — */ --ease:cubic-bezier(.22,.61,.36,1); /* easeOut, the native default */ --dur-1:.12s; /* press / tap feedback */ --dur-2:.22s; /* reveals, tab + deck transitions */ } @media (prefers-color-scheme: dark){ :root{ --paper:#0c1626; --card:#14223c; /* one rung above ground — lifts in dark */ --ink:#eef1f4; /* cool near-white (a de-warmed invert) */ --dim:#9fb0cb; --label:#b7c4da; --accent:#ec3a52; /* brightened so crimson still reads on navy-night */ --river:#4d8fd6; --good:#34d27b; --warn:#f2a93a; --scaffold:#384867; --faint:#14223c; --fill:#1b2c4a; --hair:rgba(159,176,203,.15); --hair2:rgba(159,176,203,.08); --shadow:0 2px 16px rgba(0,0,0,.45); --idle:#5b6b83; } } /* ── WakeSpinner — the branded loading indicator (crimson flywheel + pulsing W) ── Drop-in replacement for every static "Loading…" text. Markup comes from wake-ui.js (wakeSpinner) or is inlined for the pre-JS first paint. Theme-aware because the SVG reads var(--hair)/var(--accent)/var(--ink). */ .wsp{ display:block; width:var(--wsp-size,72px); height:var(--wsp-size,72px); } .wsp-arc{ transform-box:fill-box; transform-origin:center; animation:wsp-rot 1.15s linear infinite; } .wsp-dot{ transform-box:fill-box; transform-origin:center; animation:wsp-pulse 1.05s ease-in-out infinite; } @keyframes wsp-rot{ to{ transform:rotate(360deg); } } @keyframes wsp-pulse{ 0%,100%{ opacity:.5; transform:scale(.62); } 50%{ opacity:1; transform:scale(1); } } .wsp-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:56px 8px; text-align:center; } .wsp-label{ font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.02em; color:var(--dim); } /* ── WakeMark — the one Wake mark, for every web surface ───────────────────── The vector W + crimson beat-dot from icon.svg. NEVER a font glyph and never a bare dot: the beat-dot is a FIXED part of the art (the terminal of the last stroke), not free-floating punctuation beside a wordmark. Mirrors the native WakeMark (ios/WakeApp/UI/Shared/WakeComponents.swift) — keep in lock-step. There is no build step here, so the markup is inlined per page rather than imported. It is therefore byte-identical everywhere, and CONTEXT supplies the colors through the three knobs below — that is what lets one frozen string serve the paper header, the navy chrome band, and the quiet footer alike. scripts/check-wake-mark.mjs holds every copy to that string (CI web job); the canonical source is WAKE_MARK_SVG in wake-ui.js. --wm-size the mark's box (default 26px) --wm-ink the W's stroke (default var(--ink); footers go --dim) --wm-dot the beat-dot's fill (default var(--accent) — the one crimson) --wm-ring the beat-dot's keyline — separates the dot from the W's top-right arm, so it must match the LOCAL ground (default var(--card), the .whome disc; use var(--paper) on the page itself). In light these are one hex; in dark they are not — hence the knob. The three colors are declared on :root, NOT on .wmk, so an ancestor can repaint the mark for its own ground (`#top .wlock{--wm-ink:#faf8f4}` over the navy band) and have the .wmk inherit it. Declaring them on .wmk itself silently defeats that: a custom property set ON an element beats the value inherited from its parent, so the navy band's pinned paper-white lost to .wmk's own var(--ink) and the W went navy-on-navy — invisible, and only in LIGHT (dark's --ink is near-white, so it passed by luck). */ :root{ --wm-ink:var(--ink); --wm-dot:var(--accent); --wm-ring:var(--card); } .wmk{ display:block; width:var(--wm-size,26px); height:var(--wm-size,26px); flex:none; } /* The mark in a disc — a ≥44px home link on the app surfaces, decorative on the sign-in gates (where it is a and the :active press simply never fires). --wh-size scales the disc; --wm-size the mark riding inside it. */ .whome{ display:inline-flex; align-items:center; justify-content:center; width:var(--wh-size,44px); height:var(--wh-size,44px); border-radius:50%; background:var(--card); border:1px solid var(--hair); text-decoration:none; box-shadow:0 1px 4px rgba(21,25,29,.07); } .whome:active{ transform:scale(.92); } /* The lockup — mark + wordmark, plus an optional context label ("Coach"). --wl-size scales the wordmark; the mark rides --wm-size independently. */ .wlock{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:inherit; --wm-size:32px; --wm-ring:var(--paper); } /* Optical alignment: the mark's sharp miter valleys spike the W's ink downward, so a geometric flex-center leaves its visual mass below the wordmark's cap-line. Lift it onto the shared horizontal centerline. (Smaller than the -2px the landing page used pre-primitive: the 32-unit viewBox already carries the art slightly high of centre.) */ .wlock .wmk{ transform:translateY(-1px); } .wlock .nm{ font-family:var(--display); font-weight:900; font-size:var(--wl-size,21px); letter-spacing:.03em; line-height:1; white-space:nowrap; } .wlock .nm b{ font-weight:500; letter-spacing:.04em; } /* the quieter "Rowing" half */ .wlock .ctx{ font-family:var(--display); font-weight:700; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); white-space:nowrap; } /* ── a11y baseline every surface inherits ── */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; } @media (prefers-reduced-motion: reduce){ .wsp-arc, .wsp-dot{ animation:none; } .wsp-dot{ opacity:1; transform:none; } }