templates/portal/base.html

@@ -25,7 +25,7 @@
         }
     </script>
     <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32.png">
-    <meta name="theme-color" content="#f7f5ef">
+    <meta name="theme-color" content="#eef2f9">
 
     <style>
         /* ---- dark (default) ---- */
@@ -48,27 +48,27 @@
             --lvl-ok: #34d399; --lvl-warn: #fbbf24; --lvl-bad: #f87171;
             --m-lp: #60a5fa; --m-lmax: #f87171; --m-l1: #c084fc; --m-l10: #fbbf24;
         }
-        /* ---- light (warm paper) ---- */
+        /* ---- light (cool) — solid cards on a cool ground ---- */
         html[data-theme="light"] {
-            --bg: #f7f5ef;                                /* warm paper */
+            --bg: #eef2f9;                               /* cool light */
-            --grid: rgba(92, 78, 52, 0.05);              /* warm faint grid */
+            --grid: rgba(20, 42, 102, 0.05);             /* cool faint grid */
-            --aurora-1: rgba(120, 140, 205, 0.15);       /* soft cool wash */
+            --aurora-1: rgba(120, 150, 220, 0.18);       /* cool wash */
-            --aurora-2: rgba(244, 139, 28, 0.12);        /* brand warmth */
+            --aurora-2: rgba(244, 139, 28, 0.08);        /* faint brand accent */
-            --text: #2a2620;                             /* warm charcoal ink */
+            --text: #16203a;                             /* cool navy ink */
-            --text-dim: #7c756a;                         /* warm muted */
+            --text-dim: #5d6b86;                         /* cool muted */
-            --border: rgba(60, 50, 35, 0.15);
+            --border: rgba(20, 42, 102, 0.13);
-            --border-bright: rgba(60, 50, 35, 0.12);
+            --border-bright: rgba(20, 42, 102, 0.18);
-            --panel-a: #ffffff;                          /* solid — no longer ghostly */
+            --panel-a: #ffffff;                          /* solid — kept from the un-ghosting pass */
-            --panel-b: #fbfaf5;
+            --panel-b: #f7f9fc;
             --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);
+            --panel-shadow: 0 14px 30px -16px rgba(40, 55, 95, 0.22), 0 2px 6px -2px rgba(40, 55, 95, 0.07);
-            --header-bg: rgba(247, 245, 239, 0.85);
+            --header-bg: rgba(238, 242, 249, 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). */
+        /* On light, the hover-lift shadow wants cool depth (the dark one vanishes on light). */
         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);
+            box-shadow: 0 22px 44px -20px rgba(40, 55, 95, 0.26), 0 0 0 1px var(--accent-glow);
         }
 
         html, body { height: 100%; }
@@ -185,7 +185,7 @@
             document.documentElement.setAttribute('data-theme', next);
             try { localStorage.setItem('portal-theme', next); } catch (e) {}
             const mc = document.querySelector('meta[name="theme-color"]');
-            if (mc) mc.setAttribute('content', next === 'light' ? '#f7f5ef' : '#080b14');
+            if (mc) mc.setAttribute('content', next === 'light' ? '#eef2f9' : '#080b14');
             document.dispatchEvent(new CustomEvent('portal-theme', { detail: next }));
         }
     </script>