From 505c2e3ca53161ebf48cc9f8939558cac5f2a82e Mon Sep 17 00:00:00 2001
From: serversdown <brian@serversdown.net>
Date: Thu, 11 Jun 2026 20:34:31 +0000
Subject: [PATCH] =?UTF-8?q?style(portal):=20warm,=20solid=20light=20mode?=
 =?UTF-8?q?=20=E2=80=94=20paper=20bg=20+=20defined=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Light mode was washed out. Switch the background to warm paper (#f7f5ef), make
panels solid white (no longer translucent/ghostly) with a warm hairline border
and a grounded two-layer shadow, and warm the text ink. Light-specific hover
shadow (the dark one is invisible on paper). Also fix two dark-only reds — the
alarm banner and active-event text now use var(--lvl-bad) so they read on both
themes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 templates/portal/base.html     | 32 ++++++++++++++++++--------------
 templates/portal/location.html |  8 ++++----
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/templates/portal/base.html b/templates/portal/base.html
index 36e8109..7fd0a3a 100644
--- a/templates/portal/base.html
+++ b/templates/portal/base.html
@@ -48,24 +48,28 @@
             --lvl-ok: #34d399; --lvl-warn: #fbbf24; --lvl-bad: #f87171;
             --m-lp: #60a5fa; --m-lmax: #f87171; --m-l1: #c084fc; --m-l10: #fbbf24;
         }
-        /* ---- light ---- */
+        /* ---- light (warm paper) ---- */
         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);
+            --bg: #f7f5ef;                                /* warm paper */
+            --grid: rgba(92, 78, 52, 0.05);              /* warm faint grid */
+            --aurora-1: rgba(120, 140, 205, 0.15);       /* soft cool wash */
+            --aurora-2: rgba(244, 139, 28, 0.12);        /* brand warmth */
+            --text: #2a2620;                             /* warm charcoal ink */
+            --text-dim: #7c756a;                         /* warm muted */
+            --border: rgba(60, 50, 35, 0.15);
+            --border-bright: rgba(60, 50, 35, 0.12);
+            --panel-a: #ffffff;                          /* solid — no longer ghostly */
+            --panel-b: #fbfaf5;
+            --panel-inset: rgba(255, 255, 255, 0.9);
+            --panel-shadow: 0 14px 30px -16px rgba(60, 50, 35, 0.26), 0 2px 6px -2px rgba(60, 50, 35, 0.08);
+            --header-bg: rgba(247, 245, 239, 0.85);
             --lvl-ok: #16a34a; --lvl-warn: #d97706; --lvl-bad: #dc2626;
             --m-lp: #2563eb; --m-lmax: #dc2626; --m-l1: #9333ea; --m-l10: #d97706;
         }
+        /* On light, the hover-lift shadow wants warm depth (the dark one is invisible on paper). */
+        html[data-theme="light"] .panel-hover:hover {
+            box-shadow: 0 22px 44px -20px rgba(60, 50, 35, 0.30), 0 0 0 1px var(--accent-glow);
+        }
 
         html, body { height: 100%; }
         body {
diff --git a/templates/portal/location.html b/templates/portal/location.html
index b846da9..88a4f1f 100644
--- a/templates/portal/location.html
+++ b/templates/portal/location.html
@@ -19,8 +19,8 @@
 {% if not has_device %}
 <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 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">
+<div id="p-alarm-banner" class="hidden reveal mt-5 px-4 py-3 rounded-xl bg-[rgba(220,38,38,0.10)] border border-[rgba(220,38,38,0.32)] text-[var(--lvl-bad)] text-sm flex items-center gap-2.5">
+    <svg class="w-5 h-5 shrink-0" 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>
@@ -280,8 +280,8 @@ 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 = '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>
+            row.className = 'panel px-3.5 py-2.5 text-sm ' + (active ? 'border-[rgba(220,38,38,0.4)]' : '');
+            row.innerHTML = `<div class="${active ? 'text-[var(--lvl-bad)] font-medium' : '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);
         }