From f760e81309bff16e61ccd3f61b9cc560588df317 Mon Sep 17 00:00:00 2001
From: serversdown <brian@serversdown.net>
Date: Thu, 11 Jun 2026 20:10:29 +0000
Subject: [PATCH] style(portal): live-console location page, polished access
 splash, light/dark toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Location page rebuilt as a monitoring console: Leq hero readout (mono, level-
  colored, auto-flips with theme), instrument strip for Lp/Lmax/L1/L10, refined
  dark Chart.js (mono ticks, thin lines), panel-styled alert history, polished
  pause overlay. All live-stream/chart/alert JS hooks preserved.
- Access page → centered branded splash.
- Light/Dark toggle: CSS-variable theme system (structure + level/metric accent
  colors flip), header sun/moon button, localStorage + no-flash boot script,
  smooth body transition. On toggle, a 'portal-theme' event re-skins the Chart.js
  trace and swaps Leaflet tiles (CARTO dark <-> light) + recolors map dots.

All JS hook IDs intact (verified); both themes validated to parse + balance.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 templates/portal/access_required.html |  15 ++-
 templates/portal/base.html            | 117 +++++++++++++------
 templates/portal/location.html        | 159 ++++++++++++++++----------
 templates/portal/overview.html        |  21 ++--
 4 files changed, 205 insertions(+), 107 deletions(-)

diff --git a/templates/portal/access_required.html b/templates/portal/access_required.html
index b6d7423..95591d0 100644
--- a/templates/portal/access_required.html
+++ b/templates/portal/access_required.html
@@ -1,20 +1,19 @@
 {% extends "portal/base.html" %}
 {% block title %}Access{% endblock %}
 {% block content %}
-<div class="max-w-md mx-auto mt-16 text-center">
-    <div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-slate-800 border border-slate-700 mb-5">
-        <svg class="w-7 h-7 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+<div class="max-w-md mx-auto mt-20 text-center reveal">
+    <div class="panel inline-flex items-center justify-center w-16 h-16 rounded-2xl mb-6">
+        <svg class="w-7 h-7 text-[var(--text-dim)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                   d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
         </svg>
     </div>
     {% if reason == "invalid" %}
-        <h1 class="text-xl font-semibold mb-2">This link isn't valid</h1>
-        <p class="text-gray-400 text-sm">The access link is expired or has been revoked.
-            Please contact TMI for a new link.</p>
+        <h1 class="text-2xl font-bold tracking-tight mb-2">This link isn't valid</h1>
+        <p class="text-[var(--text-dim)] text-sm leading-relaxed">The access link is expired or has been revoked.<br>Please contact TMI for a new link.</p>
     {% else %}
-        <h1 class="text-xl font-semibold mb-2">Access link required</h1>
-        <p class="text-gray-400 text-sm">Open the monitoring link TMI sent you to view your locations.</p>
+        <h1 class="text-2xl font-bold tracking-tight mb-2">Access link required</h1>
+        <p class="text-[var(--text-dim)] text-sm leading-relaxed">Open the monitoring link TMI sent you to view your locations.</p>
     {% endif %}
 </div>
 {% endblock %}
diff --git a/templates/portal/base.html b/templates/portal/base.html
index e771c96..36e8109 100644
--- a/templates/portal/base.html
+++ b/templates/portal/base.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}Monitoring{% endblock %} · TMI</title>
 
+    <!-- apply saved theme before paint (no flash) -->
+    <script>(function(){var t=localStorage.getItem('portal-theme')||'dark';document.documentElement.setAttribute('data-theme',t);})();</script>
+
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
@@ -25,16 +28,45 @@
     <meta name="theme-color" content="#080b14">
 
     <style>
+        /* ---- dark (default) ---- */
         :root {
             --bg: #080b14;
-            --border: rgba(124, 146, 188, 0.14);
-            --border-bright: rgba(168, 188, 224, 0.30);
+            --grid: rgba(124, 146, 188, 0.045);
+            --aurora-1: rgba(20, 42, 102, 0.55);
+            --aurora-2: rgba(125, 35, 77, 0.18);
             --text: #e7ecf6;
             --text-dim: #8c98b0;
+            --border: rgba(124, 146, 188, 0.14);
+            --border-bright: rgba(168, 188, 224, 0.30);
+            --panel-a: rgba(24, 33, 54, 0.72);
+            --panel-b: rgba(12, 18, 31, 0.62);
+            --panel-inset: rgba(255, 255, 255, 0.05);
+            --panel-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.85);
+            --header-bg: rgba(8, 11, 20, 0.72);
             --accent: #f48b1c;
             --accent-glow: rgba(244, 139, 28, 0.40);
-            --ok: #34d399; --warn: #fbbf24; --bad: #f87171;
+            --lvl-ok: #34d399; --lvl-warn: #fbbf24; --lvl-bad: #f87171;
+            --m-lp: #60a5fa; --m-lmax: #f87171; --m-l1: #c084fc; --m-l10: #fbbf24;
         }
+        /* ---- light ---- */
+        html[data-theme="light"] {
+            --bg: #eef1f8;
+            --grid: rgba(20, 42, 102, 0.05);
+            --aurora-1: rgba(120, 150, 220, 0.22);
+            --aurora-2: rgba(244, 139, 28, 0.10);
+            --text: #16203a;
+            --text-dim: #5d6b86;
+            --border: rgba(20, 42, 102, 0.13);
+            --border-bright: rgba(20, 42, 102, 0.22);
+            --panel-a: rgba(255, 255, 255, 0.92);
+            --panel-b: rgba(248, 250, 254, 0.85);
+            --panel-inset: rgba(255, 255, 255, 0.6);
+            --panel-shadow: 0 18px 40px -28px rgba(40, 55, 95, 0.35);
+            --header-bg: rgba(244, 246, 251, 0.80);
+            --lvl-ok: #16a34a; --lvl-warn: #d97706; --lvl-bad: #dc2626;
+            --m-lp: #2563eb; --m-lmax: #dc2626; --m-l1: #9333ea; --m-l10: #d97706;
+        }
+
         html, body { height: 100%; }
         body {
             margin: 0;
@@ -42,28 +74,27 @@
             font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
             font-feature-settings: "ss01";
             background-color: var(--bg);
-            /* atmosphere: a navy aurora up top + a faint instrument grid */
             background-image:
-                radial-gradient(1100px 560px at 50% -12%, rgba(20, 42, 102, 0.55), transparent 68%),
-                radial-gradient(700px 400px at 88% 8%, rgba(125, 35, 77, 0.18), transparent 70%),
-                linear-gradient(rgba(124, 146, 188, 0.045) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(124, 146, 188, 0.045) 1px, transparent 1px);
+                radial-gradient(1100px 560px at 50% -12%, var(--aurora-1), transparent 68%),
+                radial-gradient(700px 400px at 88% 8%, var(--aurora-2), transparent 70%),
+                linear-gradient(var(--grid) 1px, transparent 1px),
+                linear-gradient(90deg, var(--grid) 1px, transparent 1px);
             background-size: auto, auto, 46px 46px, 46px 46px;
             background-attachment: fixed;
+            transition: background-color .3s ease, color .3s ease;
         }
         ::selection { background: rgba(244, 139, 28, 0.30); }
 
         .font-mono, .reading { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
 
-        /* Panel system — translucent, hairline-lit, with depth */
         .panel {
             position: relative;
-            background: linear-gradient(180deg, rgba(24, 33, 54, 0.72), rgba(12, 18, 31, 0.62));
+            background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
             border: 1px solid var(--border);
             border-radius: 16px;
             backdrop-filter: blur(8px);
             -webkit-backdrop-filter: blur(8px);
-            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 22px 48px -28px rgba(0, 0, 0, 0.85);
+            box-shadow: 0 1px 0 var(--panel-inset) inset, var(--panel-shadow);
         }
         .panel::before {
             content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
@@ -73,43 +104,46 @@
         .panel-hover:hover {
             transform: translateY(-3px);
             border-color: rgba(244, 139, 28, 0.55);
-            box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--accent-glow);
+            box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--accent-glow);
         }
-
         .hairline { border-top: 1px solid var(--border); }
 
-        /* Live indicator */
+        /* metric accent colors (flip per theme) */
+        .c-lp { color: var(--m-lp); } .c-lmax { color: var(--m-lmax); }
+        .c-l1 { color: var(--m-l1); } .c-l10 { color: var(--m-l10); }
+
         .live-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: pulse 2.2s infinite; }
         @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 9px rgba(244, 139, 28, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 139, 28, 0); } }
 
-        /* Staggered load reveal */
         @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
         .reveal { opacity: 0; animation: rise .55s cubic-bezier(.2, .7, .2, 1) forwards; }
 
-        /* Brand signal-bars mark */
         .signal-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
         .signal-bars i { width: 3px; background: var(--accent); border-radius: 1px; animation: bars 1.4s ease-in-out infinite; }
-        .signal-bars i:nth-child(1) { height: 40%; animation-delay: 0s; }
-        .signal-bars i:nth-child(2) { height: 70%; animation-delay: .2s; }
-        .signal-bars i:nth-child(3) { height: 100%; animation-delay: .4s; }
-        .signal-bars i:nth-child(4) { height: 55%; animation-delay: .6s; }
+        .signal-bars i:nth-child(1) { height: 40%; } .signal-bars i:nth-child(2) { height: 70%; animation-delay: .2s; }
+        .signal-bars i:nth-child(3) { height: 100%; animation-delay: .4s; } .signal-bars i:nth-child(4) { height: 55%; animation-delay: .6s; }
         @keyframes bars { 0%, 100% { transform: scaleY(.5); opacity: .7; } 50% { transform: scaleY(1); opacity: 1; } }
 
-        /* Dark Leaflet polish */
-        .leaflet-container { background: #0a0f1c !important; }
-        .leaflet-tooltip { background: rgba(14, 20, 34, 0.95); border: 1px solid var(--border-bright); color: var(--text); box-shadow: none; font-family: inherit; font-size: 12px; }
+        .theme-toggle { color: var(--text-dim); transition: color .2s ease, background .2s ease; }
+        .theme-toggle:hover { color: var(--text); }
+        html[data-theme="light"] .moon { display: none; }
+        html[data-theme="dark"] .sun, :root:not([data-theme="light"]) .sun { display: none; }
+
+        /* Leaflet polish (dark default; .leaflet-light tweaks tooltip for light) */
+        .leaflet-container { background: var(--bg) !important; }
+        .leaflet-tooltip { background: var(--panel-a); border: 1px solid var(--border-bright); color: var(--text); box-shadow: none; font-family: inherit; font-size: 12px; }
         .leaflet-tooltip-top::before { border-top-color: var(--border-bright); }
-        .leaflet-control-attribution { background: rgba(8, 11, 20, 0.6) !important; color: #5a6478 !important; }
-        .leaflet-control-attribution a { color: #7a8499 !important; }
+        .leaflet-control-attribution { background: rgba(0,0,0,0.25) !important; color: var(--text-dim) !important; }
+        .leaflet-control-attribution a { color: var(--text-dim) !important; }
         ::-webkit-scrollbar { width: 9px; height: 9px; }
         ::-webkit-scrollbar-thumb { background: rgba(124, 146, 188, 0.22); border-radius: 9px; }
     </style>
     {% block head %}{% endblock %}
 </head>
 <body class="min-h-full antialiased">
-    <header class="sticky top-0 z-30 border-b border-[var(--border)] bg-[rgba(8,11,20,0.72)] backdrop-blur-xl">
+    <header class="sticky top-0 z-30 border-b border-[var(--border)] bg-[var(--header-bg)] backdrop-blur-xl">
         <div class="max-w-5xl mx-auto px-5 py-3.5 flex items-center justify-between">
-            <a href="/portal" class="flex items-center gap-2.5 group">
+            <a href="/portal" class="flex items-center gap-2.5">
                 <span class="signal-bars"><i></i><i></i><i></i><i></i></span>
                 <span class="font-semibold tracking-tight text-[15px]">
                     TMI <span class="text-[var(--text-dim)] font-normal">Monitoring</span>
@@ -117,9 +151,15 @@
                     <span class="text-seismo-orange">{{ client.name }}</span>{% endif %}
                 </span>
             </a>
-            {% if client %}
-            <a href="/portal/logout" class="text-[13px] text-[var(--text-dim)] hover:text-[var(--text)] transition-colors">Sign out</a>
-            {% endif %}
+            <div class="flex items-center gap-1.5">
+                <button onclick="togglePortalTheme()" class="theme-toggle p-2 rounded-lg" title="Toggle light / dark" aria-label="Toggle theme">
+                    <svg class="moon w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
+                    <svg class="sun w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+                </button>
+                {% if client %}
+                <a href="/portal/logout" class="text-[13px] text-[var(--text-dim)] hover:text-[var(--text)] transition-colors px-2">Sign out</a>
+                {% endif %}
+            </div>
         </div>
     </header>
 
@@ -127,10 +167,23 @@
         {% block content %}{% endblock %}
     </main>
 
-    <footer class="max-w-5xl mx-auto px-5 py-10 text-[11px] text-[var(--text-dim)]/70 flex items-center gap-2">
-        <span class="w-1 h-1 rounded-full bg-[var(--text-dim)]/50"></span>
+    <footer class="max-w-5xl mx-auto px-5 py-10 text-[11px] text-[var(--text-dim)] flex items-center gap-2 opacity-70">
+        <span class="w-1 h-1 rounded-full bg-[var(--text-dim)]"></span>
         Read-only monitoring view · data provided as-is for informational purposes
     </footer>
+
+    <script>
+        // Theme toggle. Pages can listen for 'portal-theme' to re-skin canvases/maps.
+        function cssVar(n) { return getComputedStyle(document.documentElement).getPropertyValue(n).trim(); }
+        function togglePortalTheme() {
+            const cur = document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
+            const next = cur === 'light' ? 'dark' : 'light';
+            document.documentElement.setAttribute('data-theme', next);
+            try { localStorage.setItem('portal-theme', next); } catch (e) {}
+            document.documentElement.setAttribute('content', next === 'light' ? '#eef1f8' : '#080b14');
+            document.dispatchEvent(new CustomEvent('portal-theme', { detail: next }));
+        }
+    </script>
     {% block scripts %}{% endblock %}
 </body>
 </html>
diff --git a/templates/portal/location.html b/templates/portal/location.html
index 7ebe04e..b846da9 100644
--- a/templates/portal/location.html
+++ b/templates/portal/location.html
@@ -4,61 +4,74 @@
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
 {% endblock %}
 {% block content %}
-<a href="/portal" class="text-sm text-gray-400 hover:text-gray-200">&larr; All locations</a>
-<h1 class="text-2xl font-semibold mt-1">{{ location.name }}</h1>
-<div class="flex items-center gap-2 text-sm mt-1 mb-6">
-    <span id="p-badge" class="hidden px-2 py-0.5 text-xs font-medium rounded-full"></span>
-    <span id="p-fresh" class="text-gray-400"></span>
+<a href="/portal" class="reveal inline-flex items-center gap-1.5 text-sm text-[var(--text-dim)] hover:text-[var(--text)] transition-colors">
+    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
+    All locations
+</a>
+<div class="reveal mt-3 flex flex-wrap items-end justify-between gap-3">
+    <h1 class="text-3xl font-bold tracking-tight">{{ location.name }}</h1>
+    <div class="flex items-center gap-2.5">
+        <span id="p-badge" class="hidden"></span>
+        <span id="p-fresh" class="text-[var(--text-dim)] font-mono text-xs"></span>
+    </div>
 </div>
 
 {% if not has_device %}
-<div class="rounded-xl border border-slate-700 bg-slate-800/50 p-8 text-center text-gray-400">
-    No device is currently assigned to this location.
-</div>
+<div class="panel reveal p-12 text-center text-[var(--text-dim)] mt-6">No device is currently assigned to this location.</div>
 {% else %}
-<div id="p-alarm-banner" class="hidden mb-4 px-4 py-3 rounded-lg bg-red-900/30 border border-red-700/50 text-red-200 text-sm flex items-center gap-2">
-    <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+<div id="p-alarm-banner" class="hidden reveal mt-5 px-4 py-3 rounded-xl bg-[rgba(248,113,113,0.10)] border border-[rgba(248,113,113,0.38)] text-red-200 text-sm flex items-center gap-2.5">
+    <svg class="w-5 h-5 shrink-0 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
               d="M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4a2 2 0 00-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z"/>
     </svg>
-    <span id="p-alarm-text">Currently above threshold.</span>
+    <span id="p-alarm-text" class="font-medium">Currently above threshold.</span>
 </div>
-<div class="grid grid-cols-2 sm:grid-cols-5 gap-3 mb-6">
-    <div class="rounded-lg bg-slate-800/60 border border-slate-700 p-3">
-        <div class="text-xs text-gray-400">Lp (Instant)</div>
-        <div id="p-lp" class="text-2xl font-bold text-blue-400">--</div><div class="text-xs text-gray-500">dB</div>
+
+<!-- Hero console: Leq primary + instrument strip -->
+<div class="panel reveal mt-5 p-6 sm:p-7" style="animation-delay:60ms">
+    <div class="text-[10px] uppercase tracking-[0.22em] text-[var(--text-dim)] font-mono mb-1.5">Leq · average</div>
+    <div class="flex items-baseline gap-2.5">
+        <span id="p-leq" class="reading text-6xl sm:text-7xl leading-none font-semibold">--</span>
+        <span class="text-sm text-[var(--text-dim)] font-mono">dB</span>
     </div>
-    <div class="rounded-lg bg-slate-800/60 border border-slate-700 p-3">
-        <div class="text-xs text-gray-400">Leq (Average)</div>
-        <div id="p-leq" class="text-2xl font-bold text-green-400">--</div><div class="text-xs text-gray-500">dB</div>
-    </div>
-    <div class="rounded-lg bg-slate-800/60 border border-slate-700 p-3">
-        <div class="text-xs text-gray-400">Lmax (Max)</div>
-        <div id="p-lmax" class="text-2xl font-bold text-red-400">--</div><div class="text-xs text-gray-500">dB</div>
-    </div>
-    <div class="rounded-lg bg-slate-800/60 border border-slate-700 p-3">
-        <div class="text-xs text-gray-400">L1</div>
-        <div id="p-ln1" class="text-2xl font-bold text-purple-400">--</div><div class="text-xs text-gray-500">dB</div>
-    </div>
-    <div class="rounded-lg bg-slate-800/60 border border-slate-700 p-3">
-        <div class="text-xs text-gray-400">L10</div>
-        <div id="p-ln2" class="text-2xl font-bold text-orange-400">--</div><div class="text-xs text-gray-500">dB</div>
+
+    <div class="hairline mt-6 pt-5 grid grid-cols-2 sm:grid-cols-4 gap-5">
+        <div>
+            <div class="text-[10px] uppercase tracking-[0.15em] text-[var(--text-dim)] font-mono">Lp · instant</div>
+            <div class="mt-1 flex items-baseline gap-1"><span id="p-lp" class="reading text-2xl font-semibold c-lp">--</span><span class="text-[10px] text-[var(--text-dim)] font-mono">dB</span></div>
+        </div>
+        <div>
+            <div class="text-[10px] uppercase tracking-[0.15em] text-[var(--text-dim)] font-mono">Lmax · peak</div>
+            <div class="mt-1 flex items-baseline gap-1"><span id="p-lmax" class="reading text-2xl font-semibold c-lmax">--</span><span class="text-[10px] text-[var(--text-dim)] font-mono">dB</span></div>
+        </div>
+        <div>
+            <div class="text-[10px] uppercase tracking-[0.15em] text-[var(--text-dim)] font-mono">L1</div>
+            <div class="mt-1 flex items-baseline gap-1"><span id="p-ln1" class="reading text-2xl font-semibold c-l1">--</span><span class="text-[10px] text-[var(--text-dim)] font-mono">dB</span></div>
+        </div>
+        <div>
+            <div class="text-[10px] uppercase tracking-[0.15em] text-[var(--text-dim)] font-mono">L10</div>
+            <div class="mt-1 flex items-baseline gap-1"><span id="p-ln2" class="reading text-2xl font-semibold c-l10">--</span><span class="text-[10px] text-[var(--text-dim)] font-mono">dB</span></div>
+        </div>
     </div>
 </div>
 
-<div class="relative rounded-xl border border-slate-700 bg-slate-800/50 p-4" style="min-height: 360px;">
-    <canvas id="p-chart"></canvas>
-    <div id="p-paused" class="hidden absolute inset-0 flex items-center justify-center bg-slate-900/70 rounded-xl">
-        <button onclick="resumeStream()"
-                class="px-4 py-2 rounded-lg bg-seismo-orange/20 text-seismo-orange border border-seismo-orange/40 hover:bg-seismo-orange/30 text-sm font-medium">
-            &#9208; Live paused — click to resume
-        </button>
+<!-- Live trace -->
+<div class="panel reveal mt-5 overflow-hidden" style="animation-delay:120ms">
+    <div class="px-5 pt-4 text-[10px] uppercase tracking-[0.22em] text-[var(--text-dim)] font-mono">Live trace · last 2h</div>
+    <div class="relative px-3 pb-3 pt-2" style="min-height: 340px;">
+        <canvas id="p-chart"></canvas>
+        <div id="p-paused" class="hidden absolute inset-0 flex items-center justify-center bg-[rgba(8,11,20,0.78)] rounded-xl backdrop-blur-sm">
+            <button onclick="resumeStream()"
+                    class="px-4 py-2 rounded-lg bg-seismo-orange/15 text-seismo-orange border border-seismo-orange/40 hover:bg-seismo-orange/25 text-sm font-medium transition-colors">
+                &#9208; Live paused — tap to resume
+            </button>
+        </div>
     </div>
 </div>
 
-<!-- Alert history (read-only) -->
-<div class="mt-6">
-    <h2 class="text-sm font-medium text-gray-400 mb-2">Alert history</h2>
+<!-- Alert history -->
+<div class="reveal mt-7" style="animation-delay:180ms">
+    <div class="text-[10px] uppercase tracking-[0.22em] text-[var(--text-dim)] font-mono mb-3">Alert history</div>
     <div id="p-events" class="space-y-2"></div>
 </div>
 {% endif %}
@@ -72,40 +85,65 @@ const cd = { t: [], lp: [], leq: [], ln1: [], ln2: [] };
 let chart;
 const numOrNull = v => { const f = parseFloat(v); return isNaN(f) ? null : f; };
 
-function ds(label, color) {
-    return { label, data: [], borderColor: color, backgroundColor: color,
-             borderWidth: 2, pointRadius: 0, tension: 0.3, spanGaps: true };
+// Level color for the Leq hero (matches the overview bands).
+const LEVEL_AMBER = 55, LEVEL_RED = 70;
+function leqColor(measuring, v) {
+    // CSS var refs so the hero color auto-flips with the theme.
+    if (!measuring || v == null || isNaN(v)) return 'var(--text)';
+    if (v >= LEVEL_RED) return 'var(--lvl-bad)';
+    if (v >= LEVEL_AMBER) return 'var(--lvl-warn)';
+    return 'var(--lvl-ok)';
+}
+function paintLeq(measuring, leqVal) {
+    const el = document.getElementById('p-leq');
+    if (el) el.style.color = leqColor(measuring, parseFloat(leqVal));
+}
+
+function ds(label) { return { label, data: [], borderWidth: 1.5, pointRadius: 0, tension: 0.35, spanGaps: true }; }
+function skinChart() {
+    if (!chart) return;
+    const dim = cssVar('--text-dim');
+    const cols = [cssVar('--m-lp'), cssVar('--lvl-ok'), cssVar('--m-l1'), cssVar('--m-l10')];
+    chart.data.datasets.forEach((d, i) => { d.borderColor = cols[i]; d.backgroundColor = cols[i]; });
+    const grid = 'rgba(124,146,188,0.10)', gridX = 'rgba(124,146,188,0.05)', border = 'rgba(124,146,188,0.18)';
+    const y = chart.options.scales.y, x = chart.options.scales.x;
+    y.ticks.color = dim; y.title.color = dim; y.grid.color = grid; y.border.color = border;
+    x.ticks.color = dim; x.grid.color = gridX; x.border.color = border;
+    chart.options.plugins.legend.labels.color = cssVar('--text');
+    chart.update('none');
 }
 function initChart() {
     const ctx = document.getElementById('p-chart').getContext('2d');
+    const mono = { family: 'IBM Plex Mono', size: 10 };
     chart = new Chart(ctx, {
         type: 'line',
-        data: { labels: [], datasets: [
-            ds('Lp', 'rgb(96,165,250)'), ds('Leq', 'rgb(74,222,128)'),
-            ds('L1', 'rgb(192,132,252)'), ds('L10', 'rgb(251,146,60)') ] },
+        data: { labels: [], datasets: [ds('Lp'), ds('Leq'), ds('L1'), ds('L10')] },
         options: {
             responsive: true, maintainAspectRatio: false, animation: false,
             interaction: { intersect: false, mode: 'index' },
             scales: {
-                y: { min: 30, max: 130, title: { display: true, text: 'dB', color: '#94a3b8' },
-                     ticks: { color: '#94a3b8' }, grid: { color: 'rgba(148,163,184,0.12)' } },
-                x: { ticks: { color: '#94a3b8', maxTicksLimit: 8 }, grid: { color: 'rgba(148,163,184,0.12)' } }
+                y: { min: 30, max: 130, title: { display: true, text: 'dB', font: { family: 'IBM Plex Mono' } },
+                     ticks: { font: mono }, grid: {}, border: {} },
+                x: { ticks: { font: mono, maxTicksLimit: 8 }, grid: {}, border: {} }
             },
-            plugins: { legend: { labels: { color: '#cbd5e1' } } }
+            plugins: { legend: { labels: { font: { family: 'Hanken Grotesk' }, usePointStyle: true, pointStyleWidth: 10, boxHeight: 7 } } }
         }
     });
+    skinChart();
 }
+document.addEventListener('portal-theme', skinChart);
 
 function setCard(id, v) { document.getElementById(id).textContent = (v == null || v === '') ? '--' : v; }
 function setBadge(measuring, lastSeen) {
     const b = document.getElementById('p-badge'), f = document.getElementById('p-fresh');
-    if (measuring === null) { b.className = 'hidden px-2 py-0.5 text-xs font-medium rounded-full'; b.textContent = ''; }
-    else if (measuring) { b.className = 'px-2 py-0.5 text-xs font-medium rounded-full bg-green-900/40 text-green-300'; b.textContent = '● Live'; }
-    else { b.className = 'px-2 py-0.5 text-xs font-medium rounded-full bg-slate-700 text-gray-300'; b.textContent = '■ Stopped'; }
+    const base = 'inline-flex items-center gap-1.5 px-2.5 py-1 text-[11px] rounded-full border ';
+    if (measuring === null) { b.className = 'hidden'; b.textContent = ''; }
+    else if (measuring) { b.className = base + 'border-[rgba(244,139,28,0.45)] text-seismo-orange'; b.innerHTML = '<span class="live-dot"></span> Live'; }
+    else { b.className = base + 'border-[var(--border)] text-[var(--text-dim)]'; b.textContent = 'Stopped'; }
     f.innerHTML = fmtFreshness(lastSeen);
 }
 function fmtFreshness(iso) {
-    if (!iso) return '<span class="text-gray-500">no recent reading</span>';
+    if (!iso) return '<span class="text-[var(--text-dim)]">no recent reading</span>';
     const t = new Date(iso.endsWith('Z') ? iso : iso + 'Z');
     const s = Math.max(0, Math.round((Date.now() - t.getTime()) / 1000));
     let ago, stale = false;
@@ -113,7 +151,7 @@ function fmtFreshness(iso) {
     else if (s < 60) ago = s + 's ago';
     else if (s < 3600) { ago = Math.round(s / 60) + 'm ago'; stale = s >= 300; }
     else { ago = Math.round(s / 3600) + 'h ago'; stale = true; }
-    const cls = stale ? 'text-amber-400' : 'text-gray-400';
+    const cls = stale ? 'text-amber-400' : 'text-[var(--text-dim)]';
     return `as of ${t.toLocaleTimeString()} <span class="${cls}">(${ago}${stale ? ' · cached' : ''})</span>`;
 }
 
@@ -131,6 +169,7 @@ async function prefill() {
         setCard('p-ln1', d.ln1); setCard('p-ln2', d.ln2);
         const measuring = d.measurement_state === 'Start' || d.measurement_state === 'Measure';
         setBadge(measuring, d.last_seen);
+        paintLeq(measuring, d.leq);
     } catch (e) { /* keep last values */ }
 }
 async function backfill() {
@@ -184,6 +223,7 @@ function openStream() {
         setCard('p-ln1', d.ln1); setCard('p-ln2', d.ln2);
         const measuring = d.measurement_state === 'Start' || d.measurement_state === 'Measure';
         setBadge(measuring, d.timestamp || new Date().toISOString());
+        paintLeq(measuring, d.leq);
         pushPoint(d);
     };
     ws.onclose = () => { ws = null; };
@@ -231,7 +271,7 @@ async function loadEvents() {
                 j.active > 1 ? `${j.active} alerts currently active` : 'Currently above threshold.';
         } else banner.classList.add('hidden');
         const list = document.getElementById('p-events');
-        if (!events.length) { list.innerHTML = '<div class="text-sm text-gray-500">No alerts have fired.</div>'; return; }
+        if (!events.length) { list.innerHTML = '<div class="text-sm text-[var(--text-dim)]">No alerts have fired.</div>'; return; }
         list.innerHTML = '';
         for (const e of events) {
             const m = EV_METRIC[e.metric] || e.metric;
@@ -240,10 +280,9 @@ async function loadEvents() {
                                 : `${fmtAlertTime(e.onset_at)} → ${fmtAlertTime(e.clear_at)}`;
             const peak = (e.peak_value != null) ? ` · peak ${e.peak_value} dB` : '';
             const row = document.createElement('div');
-            row.className = 'px-3 py-2 rounded-lg border text-sm ' +
-                (active ? 'border-red-700/60 bg-red-900/20 text-red-200' : 'border-slate-700 bg-slate-800/40 text-gray-300');
-            row.innerHTML = `<div>${e.rule_name || 'Alert'} <span class="text-xs text-gray-400">· ${m} ${e.threshold_db} dB</span></div>
-                <div class="text-xs text-gray-400">${when}${peak}</div>`;
+            row.className = 'panel px-3.5 py-2.5 text-sm ' + (active ? 'border-[rgba(248,113,113,0.4)]' : '');
+            row.innerHTML = `<div class="${active ? 'text-red-300' : 'text-[var(--text)]'}">${e.rule_name || 'Alert'} <span class="text-xs text-[var(--text-dim)] font-mono">· ${m} ${e.threshold_db} dB</span></div>
+                <div class="text-xs text-[var(--text-dim)] font-mono mt-0.5">${when}${peak}</div>`;
             list.appendChild(row);
         }
     } catch (e) { /* leave history as-is */ }
diff --git a/templates/portal/overview.html b/templates/portal/overview.html
index a4760fb..f5673a2 100644
--- a/templates/portal/overview.html
+++ b/templates/portal/overview.html
@@ -62,16 +62,23 @@
 const LOCATIONS = {{ locations|tojson }};
 const liveState = {};          // loc.id -> {status, leq(num|null), leqStr}
 const markersById = {};        // loc.id -> circleMarker (for live recolor)
+let tiles = null;              // map tile layer (re-skinned on theme toggle)
 
-// Dot/level color. Placeholder bands until per-location alert thresholds exist.
+// Dot/level color (computed hex; reads the theme CSS vars so it flips with theme).
 const LEVEL_AMBER = 55, LEVEL_RED = 70;
-const COLOR_IDLE = '#5a6478';
 function levelColor(st) {
-    if (!st || st.status !== 'measuring' || st.leq == null) return COLOR_IDLE;
-    if (st.leq >= LEVEL_RED) return '#f87171';
-    if (st.leq >= LEVEL_AMBER) return '#fbbf24';
-    return '#34d399';
+    if (!st || st.status !== 'measuring' || st.leq == null) return cssVar('--text-dim');
+    if (st.leq >= LEVEL_RED) return cssVar('--lvl-bad');
+    if (st.leq >= LEVEL_AMBER) return cssVar('--lvl-warn');
+    return cssVar('--lvl-ok');
 }
+function tileUrl() {
+    return document.documentElement.getAttribute('data-theme') === 'light'
+        ? 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
+        : 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';
+}
+// Re-skin map tiles + recolor everything when the theme flips.
+document.addEventListener('portal-theme', () => { if (tiles) tiles.setUrl(tileUrl()); refreshAll(); });
 function num(v) { const f = parseFloat(v); return isNaN(f) ? null : f; }
 
 function fmtAgo(iso) {
@@ -163,7 +170,7 @@ if (withCoords.length) {
     const mapEl = document.getElementById('loc-map');
     mapEl.classList.remove('hidden');
     const map = L.map('loc-map', { scrollWheelZoom: false, attributionControl: true });
-    L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+    tiles = L.tileLayer(tileUrl(), {
         maxZoom: 19, subdomains: 'abcd', attribution: '© OpenStreetMap © CARTO'
     }).addTo(map);
     const pts = [];