/* ============================================================================= HIGH-CONTRAST DARK SKIN · SITEWIDE · HC-PLATFORM-2026-05-30 ----------------------------------------------------------------------------- Sitewide companion to weather-hc.css. Read on a PHONE, often OUTDOORS. Legibility beats aesthetics: near-black background, near-white text, SOLID saturated chips/pills with BOLD black/white text. No pastels, no tint-on-tint. SELF-CONTAINED OVERRIDE — touches NO JavaScript and no imagery. Loads LAST in (after light-theme.css + the design-system + any inline blocks) so it wins the cascade. Token redefinitions + !important beat light-theme.css's own light-value !important tokens by load order; surface rules carry !important and match/exceed existing specificity. Reversible: delete this file + its on each page to restore the light theme. The weather page keeps its own weather-hc.css (storm/forecast specific); this file is the general platform skin for every other page. ========================================================================== */ /* ---------------------------------------------------------------------------- 1 · TOKENS — flip every custom property defined by light-theme.css AND the design-system to a dark high-contrast palette. ---------------------------------------------------------------------------- */ :root, :root[data-theme="dark"], body.theme-dark{ /* --- light-theme.css native tokens --- */ --bg: #05070a !important; /* near-black page */ --bg2: #0d1219 !important; --bg3: #161d28 !important; --bg4: #1c2531 !important; --bg5: #243042 !important; --surface: #05070a !important; --surface2: #0d1219 !important; --text: #ffffff !important; /* ~19:1 on --bg */ --text2: #e7edf5 !important; /* ~16:1 */ --text3: #c8d3e0 !important; /* muted, still ≥10:1 */ --text4: #aebfd4 !important; /* faint label, ≥8:1 */ --line: #36435a !important; --line2: #2a3446 !important; --slate: #aebfd4 !important; /* accents — bright on dark */ --gold: #ffc02e !important; --gold-l: #ffd66b !important; --gold-d: #e0a316 !important; --orange: #ff7a3a !important; --orange-l: #ff9d4d !important; --green: #36d07f !important; --red: #ff6b6b !important; --ice: #E8C96A !important; --blue: #5b9bff !important; --cyan: #5fd6e8 !important; --purple: #b69bff !important; --hivis: #ffc02e !important; --hivis-d: #e0a316 !important; --tactical: #ffc02e !important; --tactical-d:#e0a316 !important; --shadow: 0 2px 10px rgba(0,0,0,.6) !important; --shadow-lg: 0 8px 30px rgba(0,0,0,.7) !important; /* --- design-system token names --- */ --paper: #05070a !important; --paper-2: #0d1219 !important; --paper-3: #161d28 !important; --ink: #ffffff !important; --ink-2: #e7edf5 !important; --ink-3: #c8d3e0 !important; --ink-4: #aebfd4 !important; --line-strong:#4a5870 !important; --panel: #0d1219 !important; --panel-2: #161d28 !important; --panel-3: #1c2531 !important; --panel-line:#3a414d !important; --panel-line-2:#555d6b !important; --on-panel: #ffffff !important; --on-panel-2:#e2e6ec !important; --on-panel-3:#b8bdc6 !important; --amber: #ffc02e !important; --amber-bright:#ffd66b !important; --amber-deep: #e0a316 !important; --amber-fg: #161200 !important; --blue-bright: #E8C96A !important; --blue-deep: #1f4ba8 !important; --blue-fg: #ffffff !important; --green-bright:#4ade80 !important; --green-deep: #0a7d3b !important; --green-fg: #ffffff !important; --ice-bright: #a7dbf5 !important; --ice-fg: #001226 !important; --orange-bright:#ff9d4d !important; --orange-fg: #1a0900 !important; --red-bright: #ff8a8a !important; --red-deep: #b1281a !important; --red-fg: #ffffff !important; color-scheme: dark; } /* ---------------------------------------------------------------------------- 2 · BASE — dark canvas, comfortable arm's-length type ---------------------------------------------------------------------------- */ html{ background:#05070a !important; } body{ background:#05070a !important; color:#ffffff !important; -webkit-font-smoothing:antialiased; } p, li, td, th, dd, dt, figcaption, blockquote{ color:#e7edf5 !important; } h1,h2,h3,h4,h5,h6{ color:#ffffff !important; } small, .muted, .meta, .subtitle, .sub, .caption, .eyebrow, .sec-lbl{ color:#aebfd4 !important; } a{ color:#ffd23a; } a:hover{ color:#ffe480; } hr{ border-color:#36435a !important; } /* ---------------------------------------------------------------------------- 3 · SURFACES — solid dark cards/panels, readable borders, no pale gradients ---------------------------------------------------------------------------- */ .section, .card, .panel, .tile, .box, .cm-card, .show-points, .showcase, .live-card, .pipe-card, .part-card, .parts-grid, .cat-card, .feature, .album-card, .gallery-card, .product-card, .spec-card, .quote-card, details, summary, .accordion, .disclosure{ background:#0d1219 !important; border-color:#36435a !important; color:#ffffff !important; } summary{ color:#ffffff !important; } section{ background:transparent !important; } select, input, textarea{ background:#161d28 !important; color:#ffffff !important; border:1px solid #4a5870 !important; } select option{ background:#0d1219; color:#fff; } ::placeholder{ color:#9aa7b8 !important; } /* ---------------------------------------------------------------------------- 4 · NAV + FOOTER — identical treatment on every page ---------------------------------------------------------------------------- */ .nav, .nav-inner, header.nav, nav.nav{ background:#05070a !important; border-bottom:1px solid #36435a !important; } .nl, .nav a, .nav-links a{ color:#ffffff !important; } .nl.active, .nl-cta, .nav .active{ color:#ffc02e !important; } .footer, footer, .footer-inner{ background:#05070a !important; border-top:1px solid #36435a !important; color:#e7edf5 !important; } .footer a, footer a, .footer-links a{ color:#e7edf5 !important; } .footer a:hover, footer a:hover{ color:#ffd23a !important; } /* ---------------------------------------------------------------------------- 5 · CHIPS / PILLS / BADGES / TAGS — solid fill, bold high-contrast text ---------------------------------------------------------------------------- */ .chip, .pill, .badge, .tag, .label-pill, .corner-tag, .stat-pill, .sec-lbl{ background:#161d28 !important; color:#ffffff !important; border:1px solid #4a5870 !important; font-weight:800 !important; text-shadow:none !important; } .chip.active, .pill.active, .tag.active, .badge.active{ background:#ffc02e !important; color:#161200 !important; border-color:#ffc02e !important; } /* Semantic status fills */ .chip-amber,.status-amber,.banner-amber,.tag-amber{ background:#ffc02e !important; color:#161200 !important; border-color:#ffc02e !important; } .chip-green,.status-green,.banner-green,.tag-green{ background:#0a7d3b !important; color:#ffffff !important; border-color:#0a7d3b !important; } .chip-red,.status-red,.banner-red,.tier-alert,.tag-red{ background:#b1281a !important; color:#ffffff !important; border-color:#b1281a !important; } .chip-blue,.banner-blue,.tag-blue{ background:#1f4ba8 !important; color:#ffffff !important; border-color:#1f4ba8 !important; } .chip-neutral{ background:#161d28 !important; color:#ffffff !important; border-color:#4a5870 !important; } /* ---------------------------------------------------------------------------- 6 · BUTTONS / CTAs — primary = solid amber, outline = bright ring ---------------------------------------------------------------------------- */ .btn, button.btn, a.btn, .cta, .btn-pri, .btn-primary, .sec-cta, .hero-cta{ font-weight:800 !important; text-shadow:none !important; } .btn-pri, .btn-primary, .cta-primary, .nl-cta{ background:#ffc02e !important; color:#000000 !important; border-color:#ffc02e !important; } .btn-out, .btn-secondary, .btn-ghost{ background:transparent !important; color:#ffffff !important; border:1px solid #7d8aa0 !important; } .btn-out:hover, .btn-secondary:hover{ border-color:#ffc02e !important; color:#ffc02e !important; } /* ---------------------------------------------------------------------------- 7 · DATA VALUES — big, bold, tabular, bright white; labels = bright slate ---------------------------------------------------------------------------- */ .value, .stat, .number, .stat-num, .stat-value, .big-num, .metric-val, .reading{ color:#ffffff !important; font-weight:800 !important; font-variant-numeric:tabular-nums !important; } .stat-label, .metric-label, .field-label, .tile-label, .card-label, .show-label{ color:#aebfd4 !important; font-weight:800 !important; letter-spacing:.06em; text-transform:uppercase; } /* ---------------------------------------------------------------------------- 8 · HEROES — keep cinematic dark photo treatment + white text (do NOT lighten) ---------------------------------------------------------------------------- */ .hero, .hero.dark-hero, .hero[data-hero-mode="dark"], .kerr-verified-banner{ color:#ffffff !important; } .hero h1, .hero h2, .hero h3, .hero p, .hero .hero-sub, .hero .hero-lede{ color:#ffffff !important; } /* ---------------------------------------------------------------------------- 9 · SVG CHART TEXT + tooltips — readable on dark (data/imagery untouched) ---------------------------------------------------------------------------- */ svg text{ fill:#e7edf5 !important; } svg text[fill="#0e1116"], svg text[fill="#000"], svg text[fill="black"]{ fill:#e7edf5 !important; } .tooltip, [class*="scrub-tip"], [class*="chart-tip"]{ background:#0d1219 !important; color:#ffffff !important; border:1px solid #4a5870 !important; font-weight:700 !important; } /* ---------------------------------------------------------------------------- 10 · MAP UI — Leaflet controls/popups legible on dark page (tiles untouched) ---------------------------------------------------------------------------- */ .leaflet-popup-content-wrapper, .leaflet-popup-tip{ background:#0d1219 !important; color:#ffffff !important; } .leaflet-popup-content{ color:#ffffff !important; } .leaflet-bar a{ background:#161d28 !important; color:#ffffff !important; border-color:#4a5870 !important; } /* ---------------------------------------------------------------------------- 11 · TAP TARGETS — ≥44px (Apple HIG) for sun/glove use + mobile safety ---------------------------------------------------------------------------- */ html, body{ overflow-x:hidden !important; max-width:100vw; } img, video{ max-width:100%; height:auto; } @media (max-width:880px){ .nl, .nl-cta, .hero-cta, .sec-cta, a.btn, button.btn, .cta{ min-height:44px !important; } }