/* INTEGRATION NOTE: the Google Fonts @import that was here is replaced by local copies of the same two fonts
(Sora and JetBrains Mono, SIL Open Font License, latin subset) in fonts/ui/, so the page works offline.
Everything else in this file is the design handoff, unchanged. */
@font-face{font-family:Sora;font-style:normal;font-weight:100 800;font-display:swap;src:url("fonts/ui/Sora-latin.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("fonts/ui/JetBrainsMono-latin.woff2") format("woff2")}
/* ==========================================================================
EVACUSENSE THEME - direction 4a "Graphite"
Styling only. No JavaScript, no element IDs, no tag-name layout rules
other than body/a. Safe to drop in: it never touches app logic.
--------------------------------------------------------------------------
INSTRUCTIONS FOR CLAUDE CODE (integration steps)
--------------------------------------------------------------------------
1. Link this file after any existing stylesheet.
2. Do NOT rename or remove existing IDs, data-attributes or JS hooks.
Only ADD the `es-` classes below to existing elements.
3. Map existing UI to classes using section 3 ("COMPONENT MAP").
4. For the map, do not use CSS. Copy values from section 6 into the
MapLibre layer paint properties.
5. Replace any hard-coded colours/fonts in existing CSS with the
variables in section 1.
6. The Sora/JetBrains Mono @import above is optional. Delete it to use
system fonts only; the fallbacks in --font and --mono take over.
CONTENTS
1. Design tokens (CSS variables)
2. Base
3. Component map (existing UI -> class)
4. Components
5. Screen layouts (landing, replay)
6. MapLibre values
7. Rules
========================================================================== */
/* ==========================================================================
1. DESIGN TOKENS
Change a value here and the whole UI updates.
========================================================================== */
:root{
/* Surfaces */
--es-bg:#0a0b0d; /* page background */
--es-panel:rgba(12,14,18,.84); /* translucent side panel over the map */
--es-line:#23262e; /* hairline borders and dividers */
--es-line-strong:#3a3e47; /* outline buttons, inputs */
/* Text */
--es-text:#ecebe8; /* primary text, logo off-white */
--es-text-soft:#c9c8c4; /* secondary text, list rows */
--es-muted:#8a8d93; /* labels, captions, disclaimer */
/* Data colours. Each has ONE meaning. Do not reuse for decoration. */
--es-fire:#ff6a2b; /* fire detections, logo accent, progress fill, focus ring */
--es-road-affected:#e5484d; /* affected roads ONLY */
--es-route-exit:#9cc9f0; /* exit route ONLY */
/* Shape */
--es-radius:2px; /* all buttons, panels, inputs */
--es-blur:12px; /* panel backdrop blur */
/* Type */
--es-font:Sora,system-ui,-apple-system,"Segoe UI",sans-serif;
--es-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* ==========================================================================
2. BASE
========================================================================== */
body{margin:0;background:var(--es-bg);color:var(--es-text);font-family:var(--es-font);-webkit-font-smoothing:antialiased}
a{color:var(--es-fire)}
a:hover{color:#ff9060}
/* ==========================================================================
3. COMPONENT MAP (existing UI -> class to add)
--------------------------------------------------------------------------
Landing page
page wrapper ................ es-landing
top-left logo + wordmark .... es-brand
small line above title ...... es-eyebrow
title (h1) .................. es-title
one-sentence description .... es-lede
button row .................. es-actions
primary button .............. es-btn
secondary button ............ es-btn es-btn--secondary
globe container ............. es-globe
Replay screen
map container ............... es-map (MapLibre mounts inside)
left side panel ............. es-panel es-sidebar
"Replay time" caption ....... es-label
big date/time readout ....... es-readout
date next to readout ........ es-readout-date
play button ................. es-play
slider track / fill / thumb . es-slider / es-slider-fill / es-slider-thumb
row of 3 headline numbers ... es-stats
one stat .................. es-stat
stat caption .............. es-label
stat value ................ es-number
"Areas cut off" section ..... es-section
section heading row ....... es-section-head
area row .................. es-row
Briefing section ............ es-section
language picker ........... es-select
briefing text ............. es-body
audio player row .......... es-audio
disclaimer .................. es-disclaimer
map legend .................. es-legend
legend swatch ............. es-swatch es-swatch--fire | --road | --exit
Estimated values (use anywhere a number is an estimate)
the number .................. es-est
the tag after it ............ es-est-tag (text: "est.")
========================================================================== */
/* ==========================================================================
4. COMPONENTS
========================================================================== */
/* ---- Buttons ----------------------------------------------------------- */
/*
*/
.es-btn{
display:inline-block;padding:14px 22px;cursor:pointer;
font:600 15px var(--es-font);letter-spacing:.01em;
color:var(--es-bg);background:var(--es-text);
border:1px solid var(--es-text);border-radius:var(--es-radius);
}
.es-btn:hover{background:#fff;border-color:#fff}
.es-btn--secondary{color:var(--es-text);background:transparent;border-color:var(--es-line-strong)}
.es-btn--secondary:hover{background:rgba(236,235,232,.06);border-color:var(--es-muted)}
.es-btn:focus-visible{outline:2px solid var(--es-fire);outline-offset:2px}
/* ---- Panel ------------------------------------------------------------- */
.es-panel{
box-sizing:border-box;padding:24px;color:var(--es-text);
background:var(--es-panel);
-webkit-backdrop-filter:blur(var(--es-blur));backdrop-filter:blur(var(--es-blur));
border:1px solid var(--es-line);border-radius:var(--es-radius);
}
/* ---- Text styles ------------------------------------------------------- */
.es-label{font:400 11px var(--es-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--es-muted)}
.es-eyebrow{font:400 14px var(--es-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--es-muted);margin:0 0 28px}
.es-title{font:600 clamp(40px,5.3vw,68px)/1.06 var(--es-font);letter-spacing:-.025em;margin:0 0 28px}
.es-lede{font:400 21px/1.55 var(--es-font);color:var(--es-muted);max-width:500px;margin:0 0 44px}
.es-body{font-size:13px;line-height:1.5;color:var(--es-text-soft);margin:0}
.es-number{font:600 28px var(--es-font)}
.es-readout{font:600 60px/1.1 var(--es-font);letter-spacing:-.01em}
.es-readout-date{font-size:16px;color:var(--es-muted);margin-left:14px}
.es-disclaimer{font-size:11px;line-height:1.45;color:var(--es-muted);border-top:1px solid var(--es-line);padding-top:10px;margin-top:auto}
/* ---- "Estimated" label ------------------------------------------------- */
/* Use on EVERY estimated figure:
1,240est. */
.es-est{text-decoration:underline dotted var(--es-muted);text-underline-offset:5px}
.es-est-tag{font:400 11px var(--es-mono);letter-spacing:.04em;color:var(--es-muted);margin-left:6px}
/* ---- Brand lockup ------------------------------------------------------ */
/*
EVACUSENSE
Or use evacusense-2a-lockup.svg directly and skip this class. */
.es-brand{display:flex;align-items:center;gap:16px}
.es-brand img,.es-brand svg{width:40px;height:40px}
.es-brand span{font:600 20px var(--es-font);letter-spacing:.14em}
/* ---- Slider + play ----------------------------------------------------- */
/* Style your existing control; if it is a native , see the
native rules below. If it is custom divs, use es-slider / -fill / -thumb. */
.es-play{
width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;cursor:pointer;
color:var(--es-bg);background:var(--es-text);border:1px solid var(--es-text);border-radius:var(--es-radius);
}
.es-slider{position:relative;flex:1;height:2px;background:var(--es-line)}
.es-slider-fill{height:100%;background:var(--es-fire)}
.es-slider-thumb{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--es-text)}
input[type="range"].es-slider-native{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--es-line);outline:none}
input[type="range"].es-slider-native::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--es-text);border:0;border-radius:0;cursor:pointer}
input[type="range"].es-slider-native::-moz-range-thumb{width:14px;height:14px;background:var(--es-text);border:0;border-radius:0;cursor:pointer}
input[type="range"].es-slider-native:focus-visible{outline:2px solid var(--es-fire);outline-offset:6px}
/* ---- Stats, sections, rows -------------------------------------------- */
.es-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.es-stat{padding-left:12px;border-left:1px solid var(--es-line)}
.es-stat .es-label{display:block;font-size:10px;letter-spacing:.08em;margin-bottom:6px}
.es-section{border-top:1px solid var(--es-line);padding-top:12px}
.es-section-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;margin-bottom:8px;cursor:pointer}
.es-row{display:flex;justify-content:space-between;padding:5px 0;font-size:14px;color:var(--es-text-soft)}
/* ---- Language picker + audio ------------------------------------------ */
.es-select{
font:400 13px var(--es-font);color:var(--es-text-soft);background:transparent;
border:1px solid var(--es-line);border-radius:var(--es-radius);padding:4px 12px;cursor:pointer;
}
.es-audio{display:flex;align-items:center;gap:12px;font:400 12px var(--es-mono);color:var(--es-muted)}
/* ---- Map legend -------------------------------------------------------- */
.es-legend{
display:flex;flex-direction:column;gap:10px;padding:16px 20px;
font:400 13px var(--es-mono);color:var(--es-muted);
background:var(--es-panel);border:1px solid var(--es-line);border-radius:var(--es-radius);
}
.es-legend > *{display:flex;align-items:center;gap:12px}
.es-swatch{display:inline-block;flex:none}
.es-swatch--fire{width:10px;height:10px;border-radius:50%;background:var(--es-fire)}
.es-swatch--road{width:22px;height:4px;background:var(--es-road-affected)}
.es-swatch--exit{width:22px;height:4px;background:var(--es-route-exit)}
/* ==========================================================================
5. SCREEN LAYOUTS
========================================================================== */
/* ---- Landing: text left, globe right ---------------------------------- */
.es-landing{min-height:100vh;box-sizing:border-box;padding:40px 64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:0 48px;background:var(--es-bg)}
.es-landing > .es-brand{grid-column:1 / -1}
.es-landing > .es-copy{align-self:center;max-width:600px} /* wrap eyebrow, title, lede, actions */
.es-landing > .es-globe{align-self:center;justify-self:center;width:100%;max-width:640px;aspect-ratio:1}
.es-actions{display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:800px){.es-landing{grid-template-columns:1fr;padding:24px}.es-landing > .es-globe{max-width:360px}}
/* ---- Replay: full-screen map, floating panel on the left -------------- */
.es-replay{position:relative;width:100vw;height:100vh;overflow:hidden;background:var(--es-bg)}
.es-map{position:absolute;inset:0}
.es-sidebar{position:absolute;left:24px;top:24px;bottom:24px;width:380px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}
.es-replay > .es-legend{position:absolute;right:24px;bottom:24px}
@media (max-width:700px){.es-sidebar{left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:55vh}.es-replay > .es-legend{display:none}}
/* ==========================================================================
6. MAPLIBRE VALUES (not CSS: copy into layer paint properties)
--------------------------------------------------------------------------
Map background / base ........ #0e1116
Roads (all) .................. line-color rgba(236,235,232,.28) line-width 1.5
Affected roads ............... line-color #e5484d line-width 3.5 line-cap round
Exit route ................... line-color #9cc9f0 line-width 4 line-cap round
Fire detections (circle) ..... circle-color #ff6a2b circle-radius 3-4
plus a glow layer: circle-color #ff6a2b
circle-opacity .25 circle-radius 12 circle-blur .6
Satellite imagery ............ keep as raster layer; add a flat overlay
fill-color #0a0b0d fill-opacity .35 so the
orange and red stay readable.
========================================================================== */
/* ==========================================================================
7. RULES (keep the system consistent)
--------------------------------------------------------------------------
- Orange = fire and progress only. Never a button fill.
- Red = affected roads only. Pale blue = exit route only.
- Primary button is off-white; there is one per view.
- Every estimated number gets .es-est and .es-est-tag.
- Radius is always var(--es-radius) (2px). No pill shapes, no shadows.
- No gradients. The only blur is the panel backdrop.
- The logo SVGs (evacusense-2a-*.svg) must not be recoloured or redrawn.
========================================================================== */
EVACUSENSE