From 974e048f76f7797029d3a36df27380e24bffcc99 Mon Sep 17 00:00:00 2001
From: Matt Batchelder <matt@buzzbee.dev>
Date: Mon, 6 Apr 2026 05:59:45 -0400
Subject: [PATCH] feat: Update bright panel styles to use theme variables for
 improved readability and consistency

---
 theme/assets/css/main.css | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css
index 14e2e26..8d6154f 100644
--- a/theme/assets/css/main.css
+++ b/theme/assets/css/main.css
@@ -9446,13 +9446,14 @@ p:last-child { margin-bottom: 0; }
 
 /* Dim (indoor) screen — content washed out by sunlight */
 .bright-panel__screen--dim { background: rgba(30,30,40,0.6); }
-.bright-panel__screen--dim .bright-panel__content { filter: blur(0.5px); opacity: 0.2; }
+/* opacity 0.48: still clearly "washed out" vs the vivid panel, but text remains legible */
+.bright-panel__screen--dim .bright-panel__content { opacity: 0.48; }
 .bright-panel__screen--dim .bright-panel__eyebrow,
 .bright-panel__screen--dim .bright-panel__title,
-.bright-panel__screen--dim .bright-panel__sub { color: rgba(255,255,255,0.6); }
+.bright-panel__screen--dim .bright-panel__sub { color: rgba(255,255,255,0.75); }
 .bright-panel__glare {
   position: absolute; inset: 0;
-  background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, transparent 60%);
+  background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, transparent 60%);
   pointer-events: none;
 }
 
@@ -9465,22 +9466,23 @@ p:last-child { margin-bottom: 0; }
 .bright-panel__screen--vivid .bright-panel__title   { color: #fff; }
 .bright-panel__screen--vivid .bright-panel__sub     { color: rgba(255,255,255,0.7); }
 
-/* Spec row under each panel */
+/* Spec row under each panel — uses theme tokens so it reads on any page background */
 .bright-panel__spec { padding: 0 2px; }
-.bright-panel__nits  { font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 2px; }
-.bright-panel__label { font-size: 10px; color: rgba(255,255,255,0.4); margin-bottom: 5px; }
+.bright-panel__nits  { font-size: 13px; font-weight: 800; color: var(--color-text); margin-bottom: 2px; }
+.bright-panel__label { font-size: 10px; color: var(--color-text-muted); margin-bottom: 5px; }
 .bright-panel__bar {
-  height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden;
+  height: 3px; border-radius: 2px; background: var(--color-border); overflow: hidden;
 }
 .bright-panel__bar-fill { height: 100%; border-radius: 2px; }
-.bright-panel__bar-fill--low  { width: 14%; background: rgba(255,255,255,0.25); }
+.bright-panel__bar-fill--low  { width: 14%; background: var(--color-text-muted); }
 .bright-panel__bar-fill--high {
   width: 100%; background: var(--color-primary);
   animation: bright-bar-enter 1.5s ease forwards;
 }
 
+/* "vs" separator — theme-aware so it shows on both light and dark pages */
 .bright-vs {
-  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.25);
+  font-size: 11px; font-weight: 700; color: var(--color-text-muted);
   align-self: center; flex-shrink: 0; margin-top: -24px;
 }