/* Base styles — element selectors, page layout (.app, .main), sidebar + filter chrome (.filter-*, .sidebar*), and the few universal utility classes (.loading, .coverage-strip). Loaded after tokens.css so var(--...) references resolve. Sister sheets (components.css, charts.css, per-tab CSS) will arrive in later phases of the migration; see docs/FRONTEND-MIGRATION.md. */ /* The dark theme also slightly recolours the underlying basemap inside Leaflet popups so they don't read as pure white pop-ups against a dark page. */ html[data-theme="dark"] .leaflet-popup-content-wrapper, html[data-theme="dark"] .leaflet-popup-tip { background: var(--card); color: var(--ink); } html[data-theme="dark"] .leaflet-container { background: var(--paper-2); } /* CartoDB Positron tiles look harsh on dark mode — apply a mild inversion + hue-shift so the basemap reads as a soft dark grey while keeping the marker dots legible. */ html[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9); } * { box-sizing: border-box; } /* "overflow-x: clip" rather than "hidden" — same belt-and-braces against horizontal page scroll, but unlike hidden it doesn't establish a scroll container, so position:sticky descendants (the tab bar, the sidebar) actually stick when you scroll. */ html, body { overflow-x: clip; } /* Paint the page background on , not just . When a page is shorter than the viewport (e.g. the Home landing on a tall display), the area below is the canvas — and with a transparent the browser fills it with the OS default, which on a dark-mode OS is a dark grey/navy that reads as "stray blue space" below the last band. An explicit themed background here makes that area always match the page (cream in light, the dark surface in dark theme). */ html { background: var(--paper); } body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: "Charter", "Iowan Old Style", "Cambria", Georgia, serif; font-weight: 600; letter-spacing: -0.01em; margin: 0; } /* Uppercase eyebrow label — used above section bodies and chart cards to name what comes next. Consolidates ~10 bespoke selectors across compare/themes/reports that all encoded this same recipe with arbitrary letter-spacing (0.04em / 0.05em / 0.06em) and font-size (10/11/12px) drift. Canonical values match the existing --track-eyebrow / --text-xs token usage on .sidebar h3 et al. Composes with the existing class on the element when the original needs to carry extras (border, flex layout, custom margin) — see .toolkit-area-title and .aar-insights-title for that pattern. Use .eyebrow--sm for 10px variants (e.g. dense picker labels). */ .eyebrow { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--ink-3); margin: 0 0 6px; } .eyebrow--sm { font-size: var(--text-nano); } .loading { padding: 120px 28px; text-align: center; color: var(--ink-3); font-size: 14px; } /* ── Loading skeletons ────────────────────────────────────────────── .skel is the shared shimmer primitive (one recipe; callers add a sizing class). It backs the boot state painted from index.html and async chart mounts like the trust inspection-history timeline. The sweep is dropped under prefers-reduced-motion. */ .skel { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--paper-2); } .skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--ink) 6%, transparent), transparent ); animation: skel-shimmer 1.4s ease-in-out infinite; } @keyframes skel-shimmer { 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } } /* Boot state (index.html): the branded hero + a slim indeterminate progress bar, replaced wholesale by render() when the data lands. Deliberately NOT a body skeleton — the Home steps have very different shapes, so generic bands would misrepresent what's coming (see the index.html comment). */ .boot { min-height: 100vh; } .boot-loading { padding: 40px 56px 80px; text-align: center; } .boot-progress { position: relative; height: 3px; width: min(360px, 60%); margin: 0 auto 16px; border-radius: 2px; overflow: hidden; background: var(--paper-2); } .boot-progress > span { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 2px; background: var(--accent); animation: boot-progress-slide 1.25s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes boot-progress-slide { 0% { left: -40%; } 100% { left: 100%; } } .boot-status { color: var(--ink-3); font-size: 14px; margin: 0; } @media (prefers-reduced-motion: reduce) { .boot-progress > span { animation: none; left: 0; width: 100%; opacity: 0.4; } } @media (max-width: 720px) { .boot-loading { padding-left: var(--space-6); padding-right: var(--space-6); } } /* Trust inspection-history timeline placeholder (charts/timeline.js trustTimelineSkeletonHtml) — rows shaped like the master timeline so the section shows a cue, not a blank gap, while the trust shard loads. */ .tl-skeleton { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; } .tl-skeleton-row { height: 16px; width: 100%; } .tl-skeleton-row:nth-child(2) { width: 86%; } .tl-skeleton-row:nth-child(3) { width: 92%; } .tl-skeleton-row:nth-child(4) { width: 78%; } .tl-skeleton-row:nth-child(5) { width: 88%; } /* Coverage strip — small, factual, sits under the pills on the Big-picture tab. Visible but not loud. */ .coverage-strip { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin: 0 0 22px; padding: 8px 12px; border-left: 3px solid var(--rule); background: var(--paper-2); border-radius: 2px; } .coverage-strip--ok { border-left-color: var(--g-strong); } .coverage-strip--partial { border-left-color: var(--g-attention); } /* Two-column app layout — main content on the left, sidebar on the right. The sidebar can be collapsed via the Filters toggle in the tab bar; when collapsed, .app--sidebar-collapsed drops the sidebar column and the sidebar element itself is hidden. */ .app { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; } .app--sidebar-collapsed { grid-template-columns: minmax(0, 1fr); } .app--sidebar-collapsed .sidebar { display: none; } @media (max-width: 1000px) { /* Below 1000px there isn't room for a side-by-side layout. The sidebar becomes an overlay panel on the right that slides in over the content when the user taps "Show filters". This avoids pushing the main content down by hundreds of pixels whenever the filter panel is open. */ .app, .app--sidebar-collapsed { grid-template-columns: 1fr; } .sidebar { position: fixed !important; top: 0; right: 0; width: min(320px, 90vw); height: 100vh; border-left: 1px solid var(--rule) !important; border-right: none !important; box-shadow: -8px 0 24px rgba(0,0,0,0.08); z-index: 31; } .app--sidebar-collapsed .sidebar { display: none; } /* iOS Safari < 17.4 has a known scroll-bleed bug where touch- scrolling inside a modal