:root { --header-h: 56px; } /* ---- Theme tokens ---- Both themes are complete, independent palettes -- nothing here relies on one theme's values leaking into the other. `[data-theme]` is set on by the inline snippet in index.html (before first paint) and flipped by the header toggle in app.js, which also persists the choice to localStorage. Dark is the fallback if the attribute is ever missing. */ :root, :root[data-theme="dark"] { color-scheme: dark; --surface-1: #1a1a19; --page-plane: #0d0d0d; --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781; --gridline: #2c2c2a; --border: rgba(255,255,255,0.10); --hover-overlay: rgba(255,255,255,0.06); --series-blue: #3987e5; --status-good: #0ca30c; --status-warning: #fab219; --status-serious: #ec835a; --status-critical: #d03b3b; } :root[data-theme="light"] { color-scheme: light; --surface-1: #f3f2ee; --page-plane: #ffffff; --text-primary: #16160f; --text-secondary: #4d4c45; --text-muted: #767468; --gridline: #e2e0d8; --border: rgba(0,0,0,0.12); --hover-overlay: rgba(0,0,0,0.05); --series-blue: #1d5fc2; --status-good: #0a8a0a; --status-warning: #a56600; --status-serious: #c1552e; --status-critical: #b62f2f; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--page-plane); color: var(--text-primary); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } a { color: var(--series-blue); } /* ---- Header ---- */ .site-header { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; background: var(--page-plane); } .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text-primary); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; } .brand img { width: 24px; height: 24px; } .brand .tag { color: var(--text-muted); font-weight: 500; font-size: 12px; margin-left: 6px; white-space: nowrap; } .site-nav { display: flex; gap: 18px; align-items: center; } @media (max-width: 860px) { .brand .tag { display: none; } .site-nav { gap: 10px; } } @media (max-width: 560px) { .site-header { flex-wrap: wrap; height: auto; padding: 8px 16px; gap: 6px; } .site-nav { flex-wrap: wrap; gap: 8px 14px; } } .site-nav a { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 600; } .site-nav a:hover { color: var(--text-primary); } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-primary); font-size: 14px; line-height: 1; cursor: pointer; } .theme-toggle:hover { background: var(--hover-overlay); } .theme-toggle-icon { pointer-events: none; } /* ---- Stat bar ---- */ .stat-bar { display: flex; gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); flex-wrap: wrap; } .stat-bar .stat { flex: 1 1 140px; background: var(--page-plane); padding: 10px 16px; } .stat .value { font-size: 20px; font-weight: 800; line-height: 1.1; } .stat .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; } .stat .value.pending { color: var(--status-warning); } .stat .value.issued { color: var(--status-good); } /* ---- Status explainer ---- */ .status-explainer { margin: 0; padding: 8px 16px; font-size: 12px; color: var(--text-muted); border-bottom: 1px solid var(--border); } .status-explainer strong { color: var(--text-secondary); font-weight: 700; } .status-explainer a { color: var(--text-muted); text-decoration: underline; } .status-explainer a:hover { color: var(--text-secondary); } /* ---- Location strip ---- */ /* [hidden] must be listed so it can win: an author stylesheet's plain `.location-strip { display: flex }` otherwise beats the browser's own default `[hidden] { display: none }` rule, since author styles always outrank the UA stylesheet regardless of selector specificity. Without this, app.js's `.hidden = true` (used by both the dismiss button and the auto-hide-when-nothing-to-say case) sets the DOM property correctly but the strip stays visually on screen -- confirmed as a real, reproducible bug via headless-browser testing before this fix, not a hypothetical. */ .location-strip[hidden] { display: none; } .location-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: var(--surface-1); border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-secondary); } .location-strip span { flex: 1 1 auto; min-width: 0; } .location-strip-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .location-strip button { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 6px 12px; border: 1px solid var(--border); background: transparent; color: var(--text-primary); cursor: pointer; } .location-strip button:hover { background: var(--hover-overlay); } .location-strip button:disabled { opacity: 0.5; cursor: default; } #location-strip-btn { border-color: var(--series-blue); color: var(--series-blue); } #location-strip-dismiss { border: none; background: none; color: var(--text-muted); font-size: 18px; line-height: 1; padding: 2px 4px; border-radius: 4px; } #location-strip-dismiss:hover { color: var(--text-primary); background: var(--hover-overlay); } .strip-search-wrap { width: 220px; flex: 0 0 auto; } .strip-search-wrap input { width: 100%; background: var(--surface-1); border: 1px solid var(--border); color: var(--text-primary); border-radius: 999px; padding: 6px 12px; font-size: 12px; } @media (max-width: 640px) { .location-strip { flex-wrap: wrap; } .location-strip span { flex-basis: 100%; } .strip-search-wrap { width: 100%; order: -1; margin-bottom: 6px; } } /* ---- Ad slots ---- */ .ad-slot { display: flex; align-items: center; justify-content: center; background: var(--surface-1); border: 1px dashed var(--border); color: var(--text-muted); font-size: 12px; min-height: 60px; margin: 10px 16px; border-radius: 8px; } .ad-slot.leaderboard { min-height: 90px; } .ad-slot.sidebar-ad { min-height: 250px; } /* ---- Layout ---- */ .app-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0; height: calc(100dvh - var(--header-h)); } @media (max-width: 860px) { .app-body { grid-template-columns: 1fr; height: auto; } #map { height: 60vh; } } #map { width: 100%; height: 100%; background: var(--surface-1); } .sidebar { border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } .filters { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .filter-group { display: flex; flex-direction: column; gap: 4px; } .filter-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .check-list { display: flex; flex-direction: column; gap: 2px; } .check-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-primary); } /* .filters input { flex: 1 } (below) is meant for the search/county text inputs -- without this override a checkbox nested in a .check-row inherits flex:1 too and stretches to fill the whole row instead of staying checkbox-sized. */ .check-row input[type="checkbox"] { flex: none; width: auto; } .layer-count { font-size: 12px; color: var(--text-muted); } .layer-count strong { color: var(--text-secondary); } .filters .row { display: flex; gap: 8px; } .filters select, .filters input { flex: 1; background: var(--surface-1); border: 1px solid var(--border); color: var(--text-primary); border-radius: 8px; padding: 7px 9px; font-size: 13px; } .permit-list { overflow-y: auto; flex: 1; padding: 4px 0; } .permit-card { padding: 10px 14px; border-bottom: 1px solid var(--gridline); cursor: pointer; } .permit-card:hover { background: var(--surface-1); } .permit-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .permit-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .permit-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 6px; border-radius: 999px; flex-shrink: 0; } .permit-badge.pending { color: var(--status-warning); background: rgba(250,178,25,0.12); } .permit-badge.issued { color: var(--status-good); background: rgba(12,163,12,0.12); } .permit-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .empty-state { padding: 24px 16px; color: var(--text-muted); font-size: 13px; text-align: center; } /* Leaflet popup theming */ .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface-1); color: var(--text-primary); } .popup-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; } .popup-row { font-size: 12px; color: var(--text-secondary); } /* ---- Static pages (about/privacy/contact) ---- */ .page { max-width: 720px; margin: 0 auto; padding: 32px 20px 60px; line-height: 1.6; } .page h1 { font-size: 26px; margin-bottom: 4px; } .page h2 { font-size: 18px; margin-top: 28px; } .page p, .page li { color: var(--text-secondary); font-size: 15px; } .page .updated { color: var(--text-muted); font-size: 12px; margin-bottom: 24px; } footer.site-footer { text-align: center; color: var(--text-muted); font-size: 12px; padding: 18px; border-top: 1px solid var(--border); } footer.site-footer a { color: var(--text-muted); } /* ---- Alerts page (site/alerts.html) ---- Map-first, same shape as the homepage's .app-body: a big picker pane (map or county list, whichever territory method is active) plus a narrow sidebar for the actual form -- the map is the primary, default interaction, not a small widget buried inside form fields. */ /* [hidden] listed first so it wins over the .alerts-body { display: grid } rule below -- an author stylesheet's plain display rule otherwise beats the browser's own [hidden] { display: none } default regardless of selector specificity (same real bug already fixed once for .location-strip -- see that rule's comment). */ .alerts-body[hidden] { display: none; } .alerts-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0; height: calc(100dvh - var(--header-h)); } @media (max-width: 860px) { .alerts-body { grid-template-columns: 1fr; height: auto; } .picker-pane, #radius-map { height: 60vh; } } .alerts-main { position: relative; height: 100%; } .picker-pane { height: 100%; display: flex; flex-direction: column; } .picker-pane[hidden] { display: none; } #radius-map { width: 100%; height: 100%; background: var(--surface-1); } .location-search-form { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 1000; display: flex; gap: 6px; } .location-search-input-wrap { flex: 1; min-width: 0; position: relative; } .location-search-form input { width: 100%; background: var(--surface-1); border: 1px solid var(--border); color: var(--text-primary); border-radius: 8px; padding: 9px 11px; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.25); } .location-suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); max-height: 220px; overflow-y: auto; } .location-suggestion { padding: 8px 11px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--border); } .location-suggestion:last-child { border-bottom: none; } .location-suggestion:hover, .location-suggestion.active { background: var(--hover-overlay); } .geocoder-attribution { position: absolute; top: 48px; left: 12px; z-index: 1000; margin: 0; font-size: 10px; color: var(--text-muted); background: var(--surface-1); padding: 2px 6px; border-radius: 4px; } .geocoder-attribution a { color: var(--text-muted); } .radius-map-overlay { position: absolute; left: 16px; bottom: 16px; z-index: 1000; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--text-secondary); box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .county-picker-header { padding: 12px 14px; border-bottom: 1px solid var(--border); } .county-picker-header input { width: 100%; background: var(--surface-1); border: 1px solid var(--border); color: var(--text-primary); border-radius: 8px; padding: 9px 11px; font-size: 14px; } .picker-pane .county-list { flex: 1; overflow-y: auto; padding: 12px 14px; border: none; border-radius: 0; max-height: none; } .alerts-sidebar { border-left: 1px solid var(--border); overflow-y: auto; padding: 24px 20px; } .alerts-sidebar h1 { font-size: 20px; margin: 0 0 4px; } .alerts-sidebar .updated { color: var(--text-muted); font-size: 12px; margin-bottom: 20px; } @media (max-width: 860px) { .alerts-sidebar { border-left: none; border-top: 1px solid var(--border); } } .alert-form { display: flex; flex-direction: column; gap: 18px; } .alert-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-primary); } .alert-form input[type="email"], .alert-form select { background: var(--surface-1); border: 1px solid var(--border); color: var(--text-primary); border-radius: 8px; padding: 9px 11px; font-size: 14px; } .alert-form fieldset { border: 1px solid var(--border); border-radius: 10px; padding: 14px; } .alert-form legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); } .radio-row { flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 14px; margin-bottom: 6px; } .hint-inline { color: var(--text-muted); font-size: 12px; } .hp-field { position: absolute; left: -9999px; top: -9999px; } .hint { font-size: 12px; color: var(--text-muted); margin: 6px 0; } #radius-controls { margin-top: 10px; } .county-group-heading { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin: 8px 0 4px; } .county-item { flex-direction: row !important; align-items: center; gap: 6px !important; font-size: 13px; padding: 2px 0; } .consent-row { flex-direction: row !important; align-items: flex-start; gap: 8px !important; font-size: 13px; color: var(--text-secondary); } .consent-row input { margin-top: 3px; } .alert-submit { align-self: flex-start; font-size: 14px; font-weight: 600; border-radius: 999px; padding: 10px 22px; border: 1px solid var(--series-blue); color: var(--series-blue); background: var(--surface-1); cursor: pointer; } .alert-submit:hover { background: var(--hover-overlay); } .alert-submit:disabled { opacity: 0.6; cursor: default; } .af-error { color: var(--status-critical); font-size: 13px; } .alerts-status { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 16px; font-size: 15px; }