/* live.php restyle overrides — admin/STYLE-GUIDE.md. live.php predates the shared header/nav (its own dead .site-nav/.logo/.mobile-menu-toggle CSS is never rendered — the page uses includes/header.php now) and carries its own sky-blue accent (#0EA5E9/#14B8A6) instead of the site's #1683C4, plus a JetBrains Mono numeric style, an uppercase tier ladder on the wind/wave bars, and a purple "Virtual" badge. Loaded after site-next.css, keyed on body[data-page="live"]. Two shared includes render on this page and are overridden here rather than in their own files: includes/wind-rose-figure.php and includes/postmortem-card.php (both via the figure chassis in includes/figure-frame.php — .ribbon-*, .ws-figure). Neither is edited directly. */ /* ── Tokens (§2): re-point the page's own card token and theme.css's --ws-live-card-* set, scoped, instead of restating every rule that reads them. Dark: the translucent film (rgba(255,255,255,.03..08)) becomes the real card/inset tokens. Light: this is the fix for --ws-live-card-surface, which theme.css sets to a gradient in light — gone once it reads --dn-inset instead. Inner panels (condition tiles, the radar, the chart, the table) read as panels INSIDE the outer .station-card, so they get the inset pairing (--dn-inset / edge), not a second full card. ── */ body[data-page="live"] { --ws-card-bg: var(--ws-bg-card-solid); --ws-live-card-bg: var(--ws-bg-card-solid); --ws-live-card-border: var(--dn-inset-edge); --ws-live-card-surface: var(--dn-inset); --ws-live-card-white: var(--dn-inset); background: var(--ws-bg-page); } body[data-page="live"]::before { background: none; } [data-theme="light"] body[data-page="live"] { /* theme.css hardcodes this to a literal #64748B in light; --ws-text-secondary is the corrected 7.6:1 value (site-next.css §1.7), so read it instead of restating a colour. */ --ws-live-card-text-muted: var(--ws-text-secondary); } /* ── Type (§1.1): one typeface, no monospace, tabular digits on every numeric column. ── */ /* NOT `inherit`: body inherits from , which has no font, and the whole page fell to Times (09-26 phone look). */ body[data-page="live"] { font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; } body[data-page="live"] :is( .station-location, .condition-value, .uwr-wind, .chart-bar-value, .chart-bar-gust-value, .chart-bar-time, .chart-bar-wave-value, .chart-bar-period, .data-table td, .forecast-time, .forecast-wind, .forecast-dir ) { font-family: inherit; font-variant-numeric: tabular-nums; } /* ── Sentence case (§1.2): the two caps+tracking labels, lifted per the guide's size rule. "Maybe/stale" is drawn as an outline only (no fill) so it reads on the same channel as the week card's maybe tiles do. ── */ body[data-page="live"] .freshness-chip { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; padding: 3px 10px; background: transparent; border: 1px solid var(--wsv-maybe); color: var(--wsv-maybe); } body[data-page="live"] .freshness-chip.is-offline { border-color: var(--ws-border-default); color: var(--ws-text-muted); background: transparent; } body[data-page="live"] .uwr-from-label { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ws-text-secondary); } body[data-page="live"] .chart-now-label { letter-spacing: 0; } /* The figure chassis (shared by the wind rose and the postmortem card) uppercases its own eyebrow and receipt-toggle label with CSS; the two callers on this page ALSO strtoupper() the eyebrow string itself in PHP (includes/wind-rose-figure.php, includes/postmortem-card.php), which text-transform can't undo except by forcing the case back down — safe here because the only letters in either eyebrow are already-lowercase words plus a station id and a date. */ body[data-page="live"] .ribbon-eyebrow { font-family: inherit; font-variant-numeric: tabular-nums; text-transform: lowercase; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--ws-text-secondary); } body[data-page="live"] .ribbon-receipt > summary { font: 600 13px/1 inherit; letter-spacing: 0; text-transform: none; color: var(--ws-text-secondary); } body[data-page="live"] .wsl-tag { font-family: inherit; letter-spacing: 0; text-transform: none; } /* The finding's bolded number is orange in the shared chassis (§1.3: orange is gone). Colour only, not case: the wind rose's finding bolds a compass range ("NE-SW") in the same tag, and the postmortem's "We called it " caps come from a PHP strtoupper() that shares this selector with that compass text, so a blanket lowercase would wrongly downcase "NE"/"SW". */ body[data-page="live"] .ribbon-finding strong, body[data-page="live"] .ribbon-finding b { color: inherit; } /* ── Colour (§1.3): the page's own accent (#0EA5E9/#14B8A6) repointed to the site's blue, and the good/marginal/poor bar ladder repointed to the verdict tokens. Bar fills stay solid (including marginal) rather than outline-only — this mirrors dashboard-next.css's .week-day-spark bars, which are the same "a coloured bar IS the magnitude" case the tile outline rule doesn't apply to. ── */ body[data-page="live"] :is(.site-nav-btn, .btn-primary) { background: var(--dn-accent); box-shadow: none; } body[data-page="live"] .logo-text .stoke, body[data-page="live"] .page-header h1 { background: none; -webkit-text-fill-color: currentColor; color: var(--ws-text-bright); } body[data-page="live"] .btn-primary { color: #FFFFFF; box-shadow: none; } body[data-page="live"] .btn-primary:hover { background: var(--dn-accent-hover); transform: none; box-shadow: none; } body[data-page="live"] .site-nav-btn:hover { transform: none; box-shadow: none; background: var(--dn-accent-hover); } body[data-page="live"] .btn-secondary { border-width: 1px; } body[data-page="live"] .nav-link:hover { background: rgba(22, 131, 196, .1); border-color: var(--dn-accent); color: var(--dn-accent); } body[data-page="live"] .btn-secondary:hover { background: rgba(22, 131, 196, .1); border-color: rgba(22, 131, 196, .5); color: var(--dn-accent); } body[data-page="live"] .site-nav-link:hover { color: var(--ws-text-primary); } body[data-page="live"] :is(.station-header, .data-table th) { background: var(--dn-inset); } body[data-page="live"] .station-badge { background: var(--ws-overlay-light); color: var(--ws-text-secondary); border: 1px solid var(--ws-border-default); } body[data-page="live"] .condition-card:hover { border-color: var(--dn-inset-edge); filter: brightness(1.06); } body[data-page="live"] .uwr-row:hover { background: rgba(22, 131, 196, .06); } body[data-page="live"] .data-table tr:hover td { background: rgba(22, 131, 196, .05); } /* Upwind Radar: "fired" is a met condition (go-green, matches .live-card.conditions-met on the dashboard); "armed" is a switch the rider turned on (tappable blue, matches .quick-alert-btn .alert-set there) — the two states read differently on purpose. The target row (this station) gets the text-coloured ring the guide uses for "your spot", not the accent. */ body[data-page="live"] .uwr-row.uwr-downwind .uwr-rail::before { background: none; border-left: 2px dashed var(--dn-inset-edge); width: 0; } body[data-page="live"] .uwr-row.uwr-fired .uwr-rail::after { background: var(--wsv-go-text); } body[data-page="live"] .uwr-node { background: var(--dn-inset); border-color: var(--ws-text-muted); } body[data-page="live"] .uwr-row.uwr-fired .uwr-node { background: var(--wsv-go-text); border-color: var(--wsv-go-text); } @keyframes uwrPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.35); opacity: .5; } } body[data-page="live"] .uwr-row.uwr-target .uwr-node { background: var(--dn-inset); border-color: var(--ws-text-bright); box-shadow: none; outline: 2px solid var(--dn-inset-edge); outline-offset: 2px; } body[data-page="live"] .uwr-row.uwr-target .uwr-name { color: var(--ws-text-bright); } body[data-page="live"] .uwr-from-arrow { color: var(--ws-text-secondary); } body[data-page="live"] .uwr-summary.uwr-active { color: var(--wsv-go-text); } body[data-page="live"] .uwr-row.uwr-fired .uwr-status { color: var(--wsv-go-text); } body[data-page="live"] .uwr-watch-btn.uwr-armed { border-color: var(--dn-accent); color: var(--dn-accent); background: transparent; } body[data-page="live"] :is(.uwr-container, .chart-container, .table-container) { box-shadow: none; } body[data-page="live"] .forecast-section { background: var(--dn-inset); border: 1px solid var(--dn-inset-edge); } /* Wind/wave bar ladder — good/marginal/poor is the same three-state verdict as the week card, drawn on a bar instead of a tile. */ body[data-page="live"] .chart-bar-fill.gust { background: rgba(148, 163, 184, .25); } body[data-page="live"] :is(.chart-bar-fill.good, .wave-bar-fill.wave-good, .forecast-fill.good) { background: var(--wsv-go-text); box-shadow: none; } body[data-page="live"] :is(.chart-bar-fill.marginal, .wave-bar-fill.wave-marginal, .forecast-fill.marginal) { background: var(--wsv-maybe); box-shadow: none; } body[data-page="live"] :is(.chart-bar-fill.poor, .wave-bar-fill.wave-poor, .forecast-fill.poor) { background: var(--ws-text-muted); box-shadow: none; } body[data-page="live"] :is(.chart-now-line, .wave-now-line) { background: var(--ws-text-secondary); } body[data-page="live"] .chart-now-label { background: var(--ws-overlay-strong); color: var(--ws-text-primary); } body[data-page="live"] :is(.chart-bar-wave-value) { color: var(--ws-live-card-text-dark); } body[data-page="live"] :is(.chart-bar-gust-value, .chart-bar-time, .chart-bar-period, .forecast-time, .forecast-dir) { color: var(--ws-text-muted); } body[data-page="live"] :is(.chart-bar-dir, .chart-row-label, .chart-section-labels) { color: var(--ws-text-secondary); } /* Postmortem strip dots ("called right" / "missed" / no call) map onto the same red = we were wrong, green = met condition tokens as everywhere else on the site. */ body[data-page="live"] .pm-dot-hit i { background: var(--wsv-go-text); } body[data-page="live"] .pm-dot-miss i { border-color: var(--wsv-wrong); } body[data-page="live"] .pm-dot-none i { background: var(--ws-overlay-strong); } body[data-page="live"] .pm-cta { background: var(--dn-inset); border: 1px solid var(--dn-inset-edge); } body[data-page="live"] .pm-cta-btn { background: var(--dn-accent); } body[data-page="live"] .pm-cta-btn:hover { background: var(--dn-accent-hover); } /* The chassis colours .ribbon-finding #F1F5F9, written for the always-dark homepage. On this page's light theme that drew every figure's lead sentence — the wind rose's, the post-mortem's, the lake-breeze calls' — near-white on a light card (found 2026-09-27). The page's own text token, which both themes define. */ body[data-page="live"] .ribbon-finding { color: var(--ws-text); } /* Lake-breeze calls: the post-mortem's rules. The meter dot stays the orange 'actual' series of a forecast-vs-actual chart (the carve-out below); the "came in" pip is the met-condition green; the ask is the same plain inset card with the site's blue button. */ body[data-page="live"] .ws-thermledger .tl-hit .tl-res::before { background: var(--wsv-go-text); } body[data-page="live"] .ws-thermledger .tl-cta { background: var(--dn-inset); border: 1px solid var(--dn-inset-edge); } body[data-page="live"] .ws-thermledger .tl-cta-btn { background: var(--dn-accent); } body[data-page="live"] .ws-thermledger .tl-cta-btn:hover { background: var(--dn-accent-hover); } body[data-page="live"] .pm-key-ours { background: #1f77b4; } /* one series in a two-line forecast-vs-actual chart, not the verdict ladder — same carve-out as forecast.php's hour-bar ramp (§1.3); left as-is */ /* The purple "Virtual" pill is set with an inline style attribute in both places it renders (live.php:1258 has no class to hook at all; live.php:1340 has one but no external stylesheet rule can outrank an inline style without !important, which the guide reserves for beating a rule that itself uses !important — this one doesn't). Not fixed here; see the report. */ /* ── Chrome (§1.4): flat cards, 20/12px radii, no glows. ── */ body[data-page="live"] :is(.station-card, .empty-state) { box-shadow: none; border-color: var(--ws-border-default); } body[data-page="live"] .ws-signedout { border-color: var(--ws-border-default); } body[data-page="live"] .site-nav-links { box-shadow: none; border: 1px solid var(--ws-border-default); } body[data-page="live"] .empty-state h2 { color: var(--ws-text-bright); } body[data-page="live"] .empty-state p { color: var(--ws-text-muted); } body[data-page="live"] .no-data { color: var(--ws-text-muted); } /* Decorative icon slots emptied of their emoji in the markup collapse rather than leaving a dead gap where one used to sit. */ body[data-page="live"] .condition-icon:empty { display: none; margin: 0; } /* ── Light theme (§1.7): the token block above already carries every card/inset colour through (--ws-bg-card-solid, --dn-inset, --dn-inset-edge all flip under [data-theme="light"] in theme.css / site-next.css), so nothing page-specific is needed beyond the text-muted fix already listed with the other token re-points. ── */ /* 09-26 fix pass: the virtual-station pill was an inline purple (a tier hue); it is a label now. Auto-refresh "on" is a state, not the page's filled button: outline, blue text. */ body[data-page="live"] .station-badge-virtual { background: var(--dn-inset); color: var(--ws-text-secondary); box-shadow: inset 0 0 0 1px var(--dn-inset-edge); } body[data-page="live"] #autoRefreshBtn.btn-primary { background: transparent; color: var(--dn-accent); border: 1px solid var(--dn-accent); box-shadow: none; } /* The reading's age ("36 minutes ago") was still caps at phone width (09-26 look). */ body[data-page="live"] .wsnap-age { text-transform: none; letter-spacing: 0; } /* The reading's age is meta, not a caution; staleness is the freshness chip's job (09-26). */ body[data-page="live"] .wsnap-age { color: var(--ws-text-muted); }