/* ============================================================ SABOTAGE WATCH — Light theme override layer Scoped under html.light so a single stylesheet can be loaded on every page; the theme toggle adds/removes .light on . Loads AFTER styles.css. Re-tokens the palette to a light surface and fixes every hard-coded dark surface. ============================================================ */ html.light{ /* surfaces → light */ --ink: #f4f5f7; /* page background */ --ink-2: #ffffff; /* cards / surfaces */ --ink-3: #eceef1; /* hover / inset */ --ink-4: #dfe3e8; /* chart tracks / bars */ /* text → dark */ --paper: #14181d; --paper-dim: #3c444d; --muted: #69727c; --muted-2: #97a0aa; /* hairlines */ --line: rgba(18,24,31,.12); --line-2: rgba(18,24,31,.07); --line-strong:rgba(18,24,31,.22); /* accent: slightly deeper red for AA contrast on white */ --red: #db1f18; --red-2: #b81812; --red-deep: #8f110c; --red-glow: rgba(219,31,24,.28); --accent: #db1f18; /* cable network: darker teal so it reads on a light basemap */ --cable: #1f7d92; --pipe-gas: #7c8590; --pipe-oil: #9a5a30; } html.light body{ background:var(--ink); color:var(--paper); } /* ---- soft elevation for cards on light ---- */ html.light .panel{ box-shadow:0 1px 2px rgba(18,24,31,.04), 0 6px 22px -14px rgba(18,24,31,.18); } html.light .story{ box-shadow:0 1px 2px rgba(18,24,31,.04), 0 8px 24px -16px rgba(18,24,31,.2); } /* ============================================================ TOP STATUS BAR (stays dark in both themes) ============================================================ */ html.light .statusbar{ background:#11151a; border-bottom:1px solid rgba(255,255,255,.08); color:#9aa3ad; } html.light .statusbar .live{ color:#fff; } html.light .statusbar #sb-latest{ color:#c7ccd2 !important; } /* ============================================================ MASTHEAD ============================================================ */ html.light .masthead{ background:rgba(255,255,255,.82); border-bottom:1px solid var(--line); } html.light .nav a:hover{ background:var(--ink-3); } html.light .btn-support{ background:var(--red); color:#fff; } html.light .btn-support:hover{ background:var(--red-2); } html.light .hamburger{ background:var(--ink-2); } html.light .btn-account, html.light .btn-theme{ background:var(--ink-2); } html.light .nav-dd-menu{ box-shadow:0 16px 40px rgba(18,24,31,.18); } /* ============================================================ HERO + sub-page hero ============================================================ */ html.light .hero::after{ background: radial-gradient(105% 75% at 80% -10%, rgba(219,31,24,.10), transparent 55%), radial-gradient(85% 65% at 6% 115%, rgba(31,125,146,.08), transparent 60%); } html.light .hero-bg{ opacity:.7; } /* ============================================================ MAP ============================================================ */ html.light #map{ background:#dfe4ea; } html.light .leaflet-container{ background:#dfe4ea; } html.light .map-badge, html.light .map-basemap, html.light .map-mobile-filter button, html.light .map-tool-btn{ background:rgba(255,255,255,.86); border-color:var(--line); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } html.light .map-badge{ color:var(--muted); } html.light .map-badge b{ color:var(--paper); } html.light .map-basemap button{ color:var(--muted); } html.light .map-basemap button.on{ background:var(--red); color:#fff; } html.light .map-mobile-filter button{ color:var(--paper); } html.light .map-tool-btn{ color:var(--paper); } html.light .map-tool-btn:hover{ border-color:var(--line-strong); background:#fff; } /* Leaflet zoom + attribution */ html.light .leaflet-bar a{ background:rgba(255,255,255,.92)!important; color:var(--paper)!important; border-color:var(--line)!important; } html.light .leaflet-bar a:hover{ background:var(--ink-3)!important; } html.light .leaflet-control-attribution{ background:rgba(255,255,255,.78)!important; color:var(--muted)!important; } html.light .leaflet-control-attribution a{ color:var(--red-2)!important; } /* incident markers: pale map needs a darker separating ring */ html.light .inc-marker{ border-color:#fff; box-shadow:0 0 0 1.4px rgba(18,24,31,.28), 0 1px 4px rgba(18,24,31,.28); } html.light .inc-marker.sel{ box-shadow:0 0 0 3px var(--paper), 0 0 14px 3px currentColor; } /* clusters: white chips with colored ring + count */ html.light .sw-cluster div{ background:#fff; color:var(--red); border-color:var(--red); box-shadow:0 0 0 4px rgba(219,31,24,.12), 0 2px 8px rgba(18,24,31,.16); } html.light .sw-cluster.mid div{ background:#fff; color:#b5780b; border-color:var(--c-arson); box-shadow:0 0 0 4px rgba(230,159,0,.14), 0 2px 8px rgba(18,24,31,.16); } html.light .sw-cluster.sm div{ background:#fff; color:#0e8f6e; border-color:var(--c-cable); box-shadow:0 0 0 4px rgba(45,212,167,.16), 0 2px 8px rgba(18,24,31,.16); } /* ============================================================ DRAWER + SOURCE BUTTON ============================================================ */ html.light .drawer{ box-shadow:-30px 0 60px rgba(18,24,31,.18); } html.light .src-link{ background:var(--red); color:#fff; } html.light .src-link:hover{ background:var(--red-2); } /* ============================================================ STORY CARD TAG ============================================================ */ html.light .story .ph .tag{ background:rgba(255,255,255,.92); color:var(--paper); border-color:var(--line); } /* ============================================================ FOOTER ============================================================ */ html.light .footer{ background:var(--ink-2); border-top:1px solid var(--line); } /* ============================================================ MOBILE MENU + SCRIM (overlay panels) ============================================================ */ html.light .mobile-menu{ background:var(--ink-2); border-left:1px solid var(--line); } html.light .scrim{ background:rgba(18,24,31,.45); } /* ============================================================ AUTH / PROFILE / FORM chrome that referenced dark glass ============================================================ */ html.light .auth-pane.on, html.light select.inp option{ background:var(--ink-2); }