Fix light mode

diff --git a/site/assets/styles.css b/site/assets/styles.css
index cac2dbab813dcda0896db6681ce6dbe202e4aecd..225b16135baf5f627814ccf9d174ec70978265bf 100644 (file)
--- a/site/assets/styles.css
+++ b/site/assets/styles.css
@@ -1,6 +1,6 @@
-/* === zndr.dk — dark-first theme === */
+/* === zndr.dk — full theme & layout === */
 
-/* Core palette (dark) */
+/* --- Dark mode defaults (base palette) --- */
 :root {
   --bg: #0b0f1a;        /* page background */
   --card: #111827;      /* card background */
@@ -26,10 +26,10 @@ body {
 .container { max-width: 1100px; margin: 0 auto; padding: 32px 20px 48px; }
 header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 28px; }
 .brand { display:flex; align-items:center; gap:12px; text-decoration:none; color: inherit; }
-.logo { width:36px; height:36px; border-radius:10px; background: #0f172a; display:grid; place-items:center; box-shadow: 0 8px 24px var(--shadow); }
+.logo { width:36px; height:36px; border-radius:10px; background:#0f172a; display:grid; place-items:center; box-shadow: 0 8px 24px var(--shadow); }
 .logo svg { width:22px; height:22px; fill:#fff; }
-.title { font-weight: 700; letter-spacing: .2px; }
-.subtitle { color: var(--muted); font-size: 0.95rem; }
+.title { font-weight:700; letter-spacing:.2px; }
+.subtitle { color:var(--muted); font-size:.95rem; }
 
 /* Search */
 .search { width:100%; margin:18px 0 24px; }
@@ -38,103 +38,126 @@ header { display:flex; align-items:center; justify-content:space-between; gap:16
   padding:12px 14px;
   border-radius:12px;
   border:1px solid var(--ring);
-  background: #0f172a;
-  color: var(--fg);
-  outline: none;
+  background:#0f172a;
+  color:var(--fg);
+  outline:none;
 }
 .search input:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
+  border-color:var(--accent);
+  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
 }
 
 /* Grid + Cards */
-.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
+.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:14px; }
 
 .card {
-  position: relative;
-  border-radius: 14px;
-  background: var(--card);
-  border: 1px solid var(--ring);
-  padding: 16px 14px 14px;
-  text-decoration: none;
-  color: inherit;
+  position:relative;
+  border-radius:14px;
+  background:var(--card);
+  border:1px solid var(--ring);
+  padding:16px 14px 14px;
+  text-decoration:none;
+  color:inherit;
   transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
-  box-shadow: 0 8px 24px var(--shadow);
+  box-shadow:0 8px 24px var(--shadow);
 }
+.card h3 { margin:0 0 6px; font-size:1.05rem; color:var(--fg); }
+.card p  { margin:0; font-size:.95rem; color:var(--muted); }
+
+/* Dark-mode hover with stronger glow */
 .card:hover {
   transform: translateY(-2px);
   border-color: var(--accent);
-  box-shadow: 0 12px 28px color-mix(in oklab, var(--accent) 20%, #000 60%);
+  box-shadow:
+    0 6px 14px rgba(0,0,0,0.7),
+    0 0 18px color-mix(in oklab, var(--accent) 90%, transparent);
 }
-.card h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--fg); }
-.card p  { margin: 0; font-size: .95rem; color: var(--muted); }
 
+/* Chip (top-right badge) */
 .chip {
   position:absolute; top:10px; right:10px;
-  font-size: .75rem;
+  font-size:.75rem;
   border:1px solid var(--ring);
   padding:.1rem .5rem;
   border-radius:999px;
   color: color-mix(in oklab, var(--fg) 80%, #fff 0%);
-  background: #0f172a;
+  background:#0f172a; /* ok for dark; overridden in light block below */
 }
 
 /* Links in footer/content */
-a { color: var(--accent); }
-a:hover { color: var(--accent-strong); }
+a { color:var(--accent); }
+a:hover { color:var(--accent-strong); }
 
 /* Footer */
 footer {
-  margin-top: 36px; display:flex; gap:12px; flex-wrap:wrap;
+  margin-top:36px; display:flex; gap:12px; flex-wrap:wrap;
   align-items:center; justify-content:space-between;
-  color: var(--muted); font-size:.9rem;
+  color:var(--muted); font-size:.9rem;
 }
 .foot-links { display:flex; gap:12px; flex-wrap:wrap; }
-.foot-links a { color: inherit; text-decoration: none; border-bottom:1px dashed var(--ring); }
-.foot-links a:hover { color: var(--fg); border-bottom-color: var(--accent); }
+.foot-links a { color:inherit; text-decoration:none; border-bottom:1px dashed var(--ring); }
+.foot-links a:hover { color:var(--fg); border-bottom-color:var(--accent); }
 
 /* Focus-visible for keyboard users */
 :where(a, input).focus-visible, :where(a, input):focus-visible {
-  outline: 3px solid var(--accent);
-  outline-offset: 2px;
-  border-radius: 10px;
-}
-.card.is-lan {
-  opacity: 0.8;
-  position: relative;
+  outline:3px solid var(--accent);
+  outline-offset:2px;
+  border-radius:10px;
 }
-.card.is-lan::after {
-  content: '';
-  position: absolute; inset: 0;
-  pointer-events: none;
-  background: repeating-linear-gradient(
-    45deg,
-    transparent 0 6px,
-    rgba(255,255,255,0.04) 6px 12px
-  );
-  border-radius: 14px;
+
+/* Static dim style for LAN-only cards (no JS needed) */
+.card.is-lan,
+.card.is-offline {
+  opacity:0.82; /* readable but visibly dimmed */
+  position:relative;
 }
-@media (prefers-color-scheme: light) {
-  .card.is-lan::after {
-    background: repeating-linear-gradient(
-      45deg,
-      transparent 0 6px,
-      rgba(0,0,0,0.03) 6px 12px
-    );
-  }
+.card.is-lan::after,
+.card.is-offline::after {
+  content:'';
+  position:absolute; inset:0; pointer-events:none;
+  background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,0.04) 6px 12px);
+  border-radius:14px;
 }
 
-
+/* --- Light mode overrides all in one place --- */
 @media (prefers-color-scheme: light) {
   :root {
-    --bg: #f6f7fb;
-    --card: #ffffff;
-    --fg: #0f172a;
-    --muted: #475569;
-    --ring: #cbd5e1;
-    --accent: #2563eb;
-    --accent-strong: #1d4ed8;
+    --bg:#f6f7fb;
+    --card:#ffffff;
+    --fg:#0f172a;
+    --muted:#475569;
+    --ring:#cbd5e1;
+    --accent:#2563eb;
+    --accent-strong:#1d4ed8;
     --shadow: rgba(2, 6, 23, .18);
   }
-  .search input { background: #ffffff; }
+
+  .search input { background:#ffffff; }
+
+  /* Make chip readable in light */
+  .chip {
+    background:#eef2f7;
+    color:#0f172a;
+    border-color:#cbd5e1;
+  }
+
+  /* Lighten logo box in light (or set to transparent if you prefer) */
+  .logo {
+    background:#e2e8f0;
+    box-shadow:0 6px 16px rgba(2, 6, 23, 0.10);
+  }
+
+  /* Softer hover shadows in light mode */
+  .card:hover {
+    box-shadow:
+      0 6px 12px rgba(0,0,0,0.15),
+      0 0 6px rgba(0,0,0,0.05);
+  }
+
+  /* Lighter stripe for dimmed cards on light bg */
+  .card.is-lan::after,
+  .card.is-offline::after {
+    background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0,0,0,0.03) 6px 12px);
+  }
 }
+