/* Cobalt signal -- Patrick's pick from the 2026-07-13 four-candidate palette experiment (PROJECT_LOG entry of that date has the full decision trail; UX_SPEC §10 has the color role sheet these values implement). Every text/background pair here verified >= 4.5:1 (WCAG AA) computationally as part of that experiment. */ :root { --accent: #1d4ed8; --accent-bg: #dbeafe; --success-bg: #dcfce7; --success-text: #15803d; --warning-bg: #fef3c7; --warning-text: #b45309; --danger-bg: #fee2e2; --danger-text: #b91c1c; --border: #e2e8f0; --text: #0f172a; --muted: #64748b; --bg: #fcfcfd; /* Hover tint for WHITE surfaces (outline buttons, list rows): the global `button:hover { opacity: 0.9 }` is visible on a filled cobalt button but mathematically invisible on #fff over a near-white page (Patrick, 2026-07-14). Slate-100, same family as --border/--bg. */ --hover-bg: #f1f5f9; /* Departure-board character for times/service designators (F2, UX_SPEC §9 Rule 4) -- structure without added color, no web font needed (system monospace stacks). */ --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace; } /* ---- Alternative palettes (color-experiment story, PROJECT_LOG 2026-07-13) ---- Applied by setting data-palette on (see shared.js initPaletteTools). Cobalt WON and now lives in :root above; the losing candidates below are kept "for now" (Patrick's words) so the ?palette switcher can still compare cheaply, plus "classic" preserving the pre-experiment steel-blue baseline. Each block overrides ONLY brand/atmosphere tokens plus a shared, contrast-fixed functional trio; the SEMANTIC meanings (red=broken, amber=caution, green=ok) never change per palette -- that's the role sheet's fixed half (UX_SPEC §10). Every text/background pair in every block verified >= 4.5:1 (WCAG AA) computationally; notable adaptations from the raw coolors.co picks: teal's amber D97706 and slate-cyan's F59E0B fail as TEXT on white (~3.4:1 / ~2.2:1), so both use amber-700 B45309 for text and keep the character in the washes; slate-cyan's 22D3EE fails as a button fill under white text (~1.9:1), so the accent is its darker cousin 0E7490. Delete all of this once the choice feels settled. */ :root[data-palette="classic"] { --accent: #185fa5; --accent-bg: #dce8f5; --success-bg: #eaf3de; --success-text: #27500a; --warning-bg: #faeeda; --warning-text: #633806; --danger-bg: #fcebeb; --danger-text: #791f1f; --border: #d3d1c7; --text: #2c2c2a; --muted: #5f5e5a; --bg: #f1efe8; } :root[data-palette="teal"] { --accent: #0f766e; --accent-bg: #ccfbf1; --success-bg: #dcfce7; --success-text: #15803d; --warning-bg: #fef3c7; --warning-text: #b45309; --danger-bg: #fee2e2; --danger-text: #b91c1c; --border: #e2e8f0; --text: #111827; --muted: #64748b; --bg: #f8fafc; } :root[data-palette="slate-cyan"] { --accent: #0e7490; --accent-bg: #cffafe; --success-bg: #dcfce7; --success-text: #15803d; --warning-bg: #fef3c7; --warning-text: #b45309; --danger-bg: #fee2e2; --danger-text: #b91c1c; --border: #cbd5e1; --text: #0f172a; --muted: #64748b; --bg: #f8fafc; } :root[data-palette="timetable"] { --accent: #4338ca; --accent-bg: #e0e7ff; --success-bg: #dcfce7; --success-text: #15803d; --warning-bg: #fef3c7; --warning-text: #b45309; --danger-bg: #fee2e2; --danger-text: #b91c1c; --border: #e7e5e4; --text: #292524; --muted: #57534e; --bg: #faf7f0; } * { box-sizing: border-box; } /* ---- Focus states (E1, UX audit finding #10: "no focus styles") -- one visible, on-brand ring for every keyboard-focusable element, site-wide, rather than relying on each browser's own default outline (which several buttons/links here never explicitly override, but whose default appearance is inconsistent across browsers and easy to lose track of against custom backgrounds). :focus-visible (not :focus) so a mouse click still shows no ring -- only keyboard/other non-pointer focus does. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 0 16px 64px; } main { max-width: 480px; margin: 0 auto; } /* ---- Font-size discipline (F2, UX_SPEC §9 Rule 1): four sizes only -- 20 (page title) / 16 (verdict + major headings) / 14 (all body content) / 12 (captions only -- provenance, meta, footer, timestamps). Rule 2: --muted is legal ONLY on 12px rules below; anything 14px+ uses --text or a semantic color, because if it matters enough to be body text, it matters enough to be readable. ---- */ h1 { font-size: 20px; font-weight: 500; margin: 0 0 4px; } p.subtitle { color: var(--text); font-size: 14px; margin: 0 0 4px; } p.scope-note { color: var(--muted); font-size: 12px; margin: 0 0 20px; } p.footer-note { color: var(--muted); font-size: 12px; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--border); } p.footer-note a { color: var(--accent); } /* ---- Shared header (all pages, UX_SPEC.md §2) ---- */ .site-header { max-width: 480px; margin: 0 auto; padding: 16px 0 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .site-header .wordmark { font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; } /* Brand mark (2026-07-20, mockup-approved: docs/mockups/2026-07-20-branch-adoption.html "Tier 1" -- the fork, drawn for real). Colored via product tokens, not fixed brand hex, so it themes correctly with the ?palette switcher: structure/dead-branch in --muted, way-out in --accent, the X in --warning-text -- the same amber every result screen already uses for "was a problem, not a disaster". */ .wordmark-mark { width: 20px; height: 13.3px; margin-right: 6px; flex-shrink: 0; } .wordmark-mark .k-line, .wordmark-mark .k-ring, .wordmark-mark .k-dead { stroke: var(--muted); fill: none; } .wordmark-mark .k-ring { fill: var(--bg); } .wordmark-mark .k-dot { fill: var(--muted); } .wordmark-mark .k-dead { stroke-dasharray: 6 5; } .wordmark-mark .k-x { stroke: var(--warning-text); } .wordmark-mark .k-live { stroke: var(--accent); fill: none; } .wordmark-mark .k-end { stroke: var(--accent); fill: var(--bg); } .wordmark-mark .k-enddot { fill: var(--accent); } .wordmark-mark .k-line, .wordmark-mark .k-x { stroke-width: 5; } .wordmark-mark .k-dead { stroke-width: 4.5; } .wordmark-mark .k-live { stroke-width: 6; } .wordmark-mark .k-ring, .wordmark-mark .k-end { stroke-width: 4.5; } .wordmark-mark .k-line, .wordmark-mark .k-dead, .wordmark-mark .k-live, .wordmark-mark .k-x { stroke-linecap: round; } .wordmark-accent { color: var(--accent); } .site-header .wordmark-by { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 4px; } .site-header nav { display: flex; gap: 14px; align-items: baseline; } .site-header nav a { font-size: 14px; color: var(--accent); text-decoration: none; } .site-header nav a.current { color: var(--text); text-decoration: none; font-weight: 500; } .test-mode-chip { font-size: 12px; font-weight: 500; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; margin-left: 8px; } .orientation-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 20px; } .orientation-step { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--border); border-radius: 12px; padding: 12px 8px; text-align: center; } .orientation-step-action { border-top-color: var(--accent); } .orientation-step-watch { border-top-color: var(--warning-text); } .orientation-step-resolve { border-top-color: var(--success-text); } .orientation-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--bg); color: var(--muted); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; } .orientation-icon svg { width: 18px; height: 18px; } .orientation-icon-accent { background: var(--accent-bg); color: var(--accent); } .orientation-icon-warning { background: var(--warning-bg); color: var(--warning-text); } .orientation-icon-success { background: var(--success-bg); color: var(--success-text); } .status-icon { display: inline-flex; vertical-align: -3px; margin-right: 6px; } .status-icon svg { width: 15px; height: 15px; } .orientation-title { font-size: 12px; font-weight: 600; margin: 0 0 2px; } .orientation-text { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.3; } @media (max-width: 380px) { .orientation-strip { grid-template-columns: 1fr; } } .example-section { background: var(--accent-bg); border: 1px dashed var(--accent); border-radius: 16px; padding: 16px; margin-bottom: 28px; } .example-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 8px; } .example-caption { font-size: 12px; color: var(--muted); margin: 8px 0 0; font-style: italic; } /* ---- Landing hero, "two clocks" (2026-07-17, replaced the two-door section; A3 refinement same day) ---- The clock spans carry the app's own status colors on purpose: amber = running late, red = the thing you'll lose -- the same meanings every result screen uses. The times sit in their own grid column so they align like a departure board (ragged placement read as accidental, Patrick's live feedback). */ /* One column, same as every other section: main caps content at 480px (the page is deliberately phone-shaped), and both attempts at a side-by-side hero fought that shape and lost (A2/A3, withdrawn 2026-07-17 -- see index.html's hero comment). The release the old green card carried now lives in the timeline's green third row. */ .hero { padding: 8px 0 4px; margin-bottom: 26px; } /* Alert timeline (Concept A', 2026-07-19 -- replaces the A4 clock grid; see index.html's hero comment). Each row: mono timestamp | rail with status dot | title + sub. The rail is what makes it read as "record of events, minute by minute" rather than three floating claims; the timestamp column is fixed so all times align, and the check mark lives in the title text, never beside a time. h1 wraps the rows (spans only -- h1 can't hold block elements), same pattern the clock grid used. */ .hero-context { font-size: 13px; color: var(--muted); margin: 0 0 14px; } .hero-context strong { color: var(--text); font-weight: 700; } .hero-tl { display: block; margin: 0 0 4px; font-size: inherit; font-weight: inherit; letter-spacing: normal; line-height: 1.4; } .hero-tl-row { display: grid; grid-template-columns: 42px 16px 1fr; column-gap: 8px; } .hero-tl-time { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--muted); text-align: right; padding-top: 4px; font-variant-numeric: tabular-nums; } .hero-tl-rail { position: relative; display: block; } .hero-tl-rail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--border); transform: translateX(-50%); } .hero-tl-row:first-child .hero-tl-rail::before { top: 9px; } .hero-tl-row:last-child .hero-tl-rail::before { height: 9px; bottom: auto; } .hero-tl-dot { position: absolute; left: 50%; top: 6px; width: 10px; height: 10px; border-radius: 50%; transform: translateX(-50%); box-shadow: 0 0 0 2px var(--bg); } .hero-tl-card { display: block; padding: 0 0 16px; } .hero-tl-row:last-child .hero-tl-card { padding-bottom: 0; } .hero-tl-title { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; } .hero-tl-sub { display: block; font-size: 13.5px; font-weight: 400; color: var(--muted); margin-top: 1px; } .hero-tl-warn .hero-tl-title { color: var(--warning-text); } .hero-tl-warn .hero-tl-dot { background: var(--warning-text); } .hero-tl-bad .hero-tl-title { color: var(--danger-text); } .hero-tl-bad .hero-tl-dot { background: var(--danger-text); } .hero-tl-ok .hero-tl-title { color: var(--success-text); } .hero-tl-ok .hero-tl-dot { background: var(--success-text); } .hero-tl-ok .hero-tl-sub { color: var(--success-text); } .hero-answer { font-size: 17px; color: var(--text); margin: 14px 0 20px; } .hero-answer strong { color: var(--accent); } .hero-cta-row { margin: 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .hero-cta-row .button-link { width: auto; } .hero-ghost { color: var(--accent); font-size: 13.5px; font-weight: 500; text-decoration: none; } .hero-ghost:hover { text-decoration: underline; } .hero-cta-sub { font-size: 12px; color: var(--muted); margin: 8px 0 0; } @media (max-width: 480px) { .hero-tl-title { font-size: 15.5px; } .hero-tl-row { grid-template-columns: 38px 14px 1fr; column-gap: 7px; } } form { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; } label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; } select, input[type="number"], input[type="text"], input[type="date"], input[type="datetime-local"] { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 14px; background: #fff; color: var(--text); } input[type="number"] { width: 110px; } .section-heading { font-size: 16px; font-weight: 500; margin: 0 0 4px; } .section-sub { font-size: 14px; color: var(--text); margin: 0 0 12px; } .demo-section { margin-bottom: 20px; } /* A link that looks like