style(portal): field-instrument redesign — shell + overview

A refined dark "field instrument" aesthetic for the client-facing portal:
- Type: Hanken Grotesk UI + IBM Plex Mono for readings (dB values feel like real
  instrumentation). Tabular numerals.
- Atmosphere: deep navy-black base with a navy/burgundy aurora and a faint fixed
  instrument grid; sticky blurred header with an animated signal-bars mark.
- Panel system (.panel/.panel-hover): translucent, hairline-lit, depth + hover
  lift. Pulsing live dot; staggered load reveal.
- Overview: mono Leq hero on each tile (colored by level when live), pill badges
  with the pulsing dot, rollup pills, dark CARTO map tiles, level-colored dots.

All live-data JS hook IDs preserved (verified). No backend change.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

templates/portal/overview.html

@@ -4,49 +4,55 @@
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
 {% endblock %}
 {% block content %}
-<h1 class="text-2xl font-semibold mb-1">Your monitoring locations</h1>
-<p class="text-gray-400 text-sm mb-6">Live sound levels for your active locations. Read-only.</p>
+<div class="reveal">
+    <div class="text-[11px] uppercase tracking-[0.2em] text-seismo-orange/80 font-mono mb-2">Live monitoring</div>
+    <h1 class="text-3xl font-bold tracking-tight">Your locations</h1>
+    <p class="text-[var(--text-dim)] text-sm mt-1">Real-time sound levels across your active monitoring sites.</p>
+</div>
 
 {% if locations %}
 <!-- Status rollup (filled live from the per-location /live fetches) -->
-<div id="rollup" class="hidden mb-5 flex flex-wrap items-center gap-2 text-sm">
-    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
-        <span class="text-gray-400">Locations</span><b id="r-total" class="text-gray-100">&ndash;</b>
-    </span>
-    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
-        <span class="w-2 h-2 rounded-full bg-green-500"></span><b id="r-live">&ndash;</b><span class="text-gray-400">live</span>
-    </span>
-    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
-        <span class="w-2 h-2 rounded-full bg-slate-500"></span><b id="r-off">&ndash;</b><span class="text-gray-400">offline</span>
-    </span>
-    <span id="r-peak-wrap" class="hidden inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
-        <span class="text-gray-400">Loudest now</span><b id="r-peak" class="text-seismo-orange">&ndash;</b><span class="text-gray-400">dB Leq &middot;</span><span id="r-peak-loc" class="text-gray-300"></span>
-    </span>
+<div id="rollup" class="hidden mt-6 mb-6 flex flex-wrap items-center gap-2.5">
+    <div class="panel px-4 py-2.5 flex items-center gap-2.5">
+        <span class="text-[var(--text-dim)] text-[10px] uppercase tracking-[0.15em]">Locations</span>
+        <b id="r-total" class="reading text-lg font-semibold">&ndash;</b>
+    </div>
+    <div class="panel px-4 py-2.5 flex items-center gap-2">
+        <span class="live-dot"></span><b id="r-live" class="reading text-lg font-semibold text-seismo-orange">&ndash;</b><span class="text-[var(--text-dim)] text-xs">live</span>
+    </div>
+    <div class="panel px-4 py-2.5 flex items-center gap-2">
+        <span class="w-2 h-2 rounded-full bg-[var(--text-dim)]/50"></span><b id="r-off" class="reading text-lg font-semibold">&ndash;</b><span class="text-[var(--text-dim)] text-xs">offline</span>
+    </div>
+    <div id="r-peak-wrap" class="hidden panel px-4 py-2.5 flex items-center gap-2">
+        <span class="text-[var(--text-dim)] text-[10px] uppercase tracking-[0.15em]">Loudest now</span>
+        <b id="r-peak" class="reading text-lg font-semibold text-seismo-orange">&ndash;</b><span class="text-[var(--text-dim)] text-xs">dB</span>
+        <span id="r-peak-loc" class="text-[var(--text-dim)] text-sm"></span>
+    </div>
 </div>
 
-<div id="loc-map" class="h-64 rounded-xl overflow-hidden mb-6 hidden border border-slate-700"></div>
+<div id="loc-map" class="panel reveal hidden h-72 overflow-hidden mb-6" style="animation-delay:80ms"></div>
 
 <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
     {% for loc in locations %}
     <a href="/portal/location/{{ loc.id }}" data-loc="{{ loc.id }}"
-       class="loc-tile block rounded-xl border border-slate-700 bg-slate-800/50 p-4 hover:border-seismo-orange transition-colors">
+       class="loc-tile panel panel-hover reveal block p-5" style="animation-delay: {{ (loop.index0 * 55) + 140 }}ms">
         <div class="flex items-start justify-between gap-2">
-            <div class="font-semibold">{{ loc.name }}</div>
-            <span class="loc-badge hidden shrink-0 px-2 py-0.5 text-xs rounded-full"></span>
+            <div class="min-w-0">
+                <div class="font-semibold tracking-tight truncate">{{ loc.name }}</div>
+                <div class="text-xs text-[var(--text-dim)] mt-0.5 truncate">{{ loc.address or loc.project_name or '' }}</div>
+            </div>
+            <span class="loc-badge hidden shrink-0"></span>
         </div>
-        <div class="text-xs text-gray-400 mt-0.5 truncate">{{ loc.address or loc.project_name or '' }}</div>
-        <div class="mt-3 flex items-baseline gap-1">
-            <span class="loc-leq text-3xl font-bold text-seismo-orange">--</span>
-            <span class="text-sm text-gray-400">dB Leq</span>
+        <div class="mt-5 flex items-baseline gap-1.5">
+            <span class="loc-leq reading text-[2.6rem] leading-none font-semibold">--</span>
+            <span class="text-xs text-[var(--text-dim)] font-mono tracking-wide">dB&nbsp;Leq</span>
         </div>
-        <div class="loc-fresh text-xs text-gray-500 mt-1">&nbsp;</div>
+        <div class="loc-fresh text-[11px] text-[var(--text-dim)]/70 mt-2 font-mono">&nbsp;</div>
     </a>
     {% endfor %}
 </div>
 {% else %}
-<div class="rounded-xl border border-slate-700 bg-slate-800/50 p-8 text-center text-gray-400">
-    No active monitoring locations yet.
-</div>
+<div class="panel reveal p-12 text-center text-[var(--text-dim)] mt-6">No active monitoring locations yet.</div>
 {% endif %}
 {% endblock %}
 
@@ -57,15 +63,14 @@ const LOCATIONS = {{ locations|tojson }};
 const liveState = {};          // loc.id -> {status, leq(num|null), leqStr}
 const markersById = {};        // loc.id -> circleMarker (for live recolor)
 
-// Dot/level color. Bands are placeholders until per-location alert thresholds
-// exist (M2 alerts will color by threshold breach instead).
+// Dot/level color. Placeholder bands until per-location alert thresholds exist.
 const LEVEL_AMBER = 55, LEVEL_RED = 70;
-const COLOR_IDLE = '#64748b';  // slate-500 — not producing a live level
+const COLOR_IDLE = '#5a6478';
 function levelColor(st) {
     if (!st || st.status !== 'measuring' || st.leq == null) return COLOR_IDLE;
-    if (st.leq >= LEVEL_RED) return '#ef4444';    // red-500
-    if (st.leq >= LEVEL_AMBER) return '#f59e0b';  // amber-500
-    return '#22c55e';                              // green-500
+    if (st.leq >= LEVEL_RED) return '#f87171';
+    if (st.leq >= LEVEL_AMBER) return '#fbbf24';
+    return '#34d399';
 }
 function num(v) { const f = parseFloat(v); return isNaN(f) ? null : f; }
 
@@ -78,11 +83,13 @@ function fmtAgo(iso) {
     return 'updated ' + Math.round(s / 3600) + 'h ago';
 }
 
+const BADGE_BASE = 'loc-badge inline-flex items-center gap-1.5 shrink-0 px-2.5 py-1 text-[11px] rounded-full border ';
+
 function updateMarker(loc) {
     const m = markersById[loc.id]; if (!m) return;
     const st = liveState[loc.id];
     m.setStyle({ fillColor: levelColor(st) });
-    let label = loc.name;
+    let label = `<b>${loc.name}</b>`;
     if (st) {
         if (st.status === 'measuring') label += ` &middot; ${st.leqStr} dB Leq`;
         else if (st.status === 'stopped') label += ' &middot; stopped';
@@ -102,23 +109,18 @@ async function loadTile(loc) {
         const d = j.data;
         if (!d) {
             liveState[loc.id] = { status: j.reason === 'no_device' ? 'nodevice' : 'offline', leq: null };
-            if (badge) {
-                badge.classList.remove('hidden');
-                badge.textContent = j.reason === 'no_device' ? 'No device' : 'Offline';
-                badge.className = 'loc-badge shrink-0 px-2 py-0.5 text-xs rounded-full bg-slate-700 text-gray-300';
-            }
-            if (leqEl) leqEl.textContent = '--';
+            if (badge) { badge.classList.remove('hidden'); badge.className = BADGE_BASE + 'border-[var(--border)] text-[var(--text-dim)]'; badge.textContent = j.reason === 'no_device' ? 'No device' : 'Offline'; }
+            if (leqEl) { leqEl.textContent = '--'; leqEl.style.color = 'var(--text-dim)'; }
             if (fresh) fresh.innerHTML = '&nbsp;';
         } else {
             const measuring = d.measurement_state === 'Start' || d.measurement_state === 'Measure';
             const leqStr = (d.leq == null || d.leq === '') ? '--' : d.leq;
             liveState[loc.id] = { status: measuring ? 'measuring' : 'stopped', leq: num(d.leq), leqStr };
-            if (leqEl) leqEl.textContent = leqStr;
+            if (leqEl) { leqEl.textContent = leqStr; leqEl.style.color = measuring ? levelColor(liveState[loc.id]) : 'var(--text)'; }
             if (badge) {
                 badge.classList.remove('hidden');
-                badge.textContent = measuring ? '● Live' : 'Stopped';
-                badge.className = 'loc-badge shrink-0 px-2 py-0.5 text-xs rounded-full ' +
-                    (measuring ? 'bg-green-900/40 text-green-300' : 'bg-slate-700 text-gray-300');
+                if (measuring) { badge.className = BADGE_BASE + 'border-[rgba(244,139,28,0.45)] text-seismo-orange'; badge.innerHTML = '<span class="live-dot"></span> Live'; }
+                else { badge.className = BADGE_BASE + 'border-[var(--border)] text-[var(--text-dim)]'; badge.textContent = 'Stopped'; }
             }
             if (fresh) fresh.textContent = fmtAgo(d.last_seen);
         }
@@ -155,30 +157,28 @@ async function refreshAll() {
 refreshAll();
 setInterval(refreshAll, 15000);
 
-// Map of locations that have coordinates — dots recolor live via updateMarker().
+// Map of locations with coordinates — dark tiles, dots recolor live.
 const withCoords = LOCATIONS.filter(l => l.coordinates);
 if (withCoords.length) {
     const mapEl = document.getElementById('loc-map');
     mapEl.classList.remove('hidden');
-    const map = L.map('loc-map', { scrollWheelZoom: false });
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-        { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(map);
+    const map = L.map('loc-map', { scrollWheelZoom: false, attributionControl: true });
+    L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+        maxZoom: 19, subdomains: 'abcd', attribution: '© OpenStreetMap © CARTO'
+    }).addTo(map);
     const pts = [];
     withCoords.forEach(l => {
         const [la, lo] = (l.coordinates || '').split(',').map(Number);
         if (!isNaN(la) && !isNaN(lo)) {
-            // Same dot style as the internal project map (circleMarker, not a pin),
-            // but recolored live by current level.
             markersById[l.id] = L.circleMarker([la, lo], {
-                radius: 8, fillColor: levelColor(liveState[l.id]), color: '#fff',
-                weight: 2, opacity: 1, fillOpacity: 0.9,
+                radius: 7, fillColor: levelColor(liveState[l.id]), color: '#fff',
+                weight: 2, opacity: 0.9, fillOpacity: 0.95,
             }).addTo(map).bindTooltip(l.name, { direction: 'top', offset: [0, -6] });
             pts.push([la, lo]);
         }
     });
-    if (pts.length) map.fitBounds(pts, { padding: [30, 30], maxZoom: 15 });
+    if (pts.length) map.fitBounds(pts, { padding: [36, 36], maxZoom: 15 });
     else mapEl.classList.add('hidden');
-    // Paint dots with whatever live data has already arrived.
     LOCATIONS.forEach(updateMarker);
 }
 </script>