From c08558cfb4fde1d0dda89628226f7489937f5f3d Mon Sep 17 00:00:00 2001
From: Jonathan Sykes <telemagnadon@gmail.com>
Date: Mon, 17 Aug 2026 00:29:52 +0000
Subject: [PATCH] =?UTF-8?q?Enhance=205=20layout=20themes=20with=20structur?=
 =?UTF-8?q?al=20CSS=20=E2=80=94=20topbar,=20nav=20accents,=20mini-bar,=20a?=
 =?UTF-8?q?mbient=20layers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/styles.css | 204 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 201 insertions(+), 3 deletions(-)

diff --git a/frontend/styles.css b/frontend/styles.css
index fd9e304..e354d36 100755
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -2850,6 +2850,41 @@ html[data-layout="sanctuary-stage"] .main > *:last-child {
 html[data-layout="sanctuary-stage"] .mini-bar {
   bottom: calc(56px + env(safe-area-inset-bottom));
 }
+html[data-layout="sanctuary-stage"] .topbar {
+  background: rgba(9, 11, 16, 0.6);
+  backdrop-filter: blur(20px) saturate(1.4);
+  -webkit-backdrop-filter: blur(20px) saturate(1.4);
+  border-bottom: 1px solid rgba(245, 158, 11, 0.12);
+  box-shadow: none;
+}
+html[data-layout="sanctuary-stage"] .player-stage {
+  position: relative;
+}
+html[data-layout="sanctuary-stage"] .player-stage::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(245, 158, 11, 0.07), transparent 70%);
+  z-index: 0;
+}
+html[data-layout="sanctuary-stage"] .bottom-nav {
+  background: rgba(9, 11, 16, 0.85);
+  backdrop-filter: blur(20px) saturate(1.4);
+  -webkit-backdrop-filter: blur(20px) saturate(1.4);
+  border-top: 1px solid rgba(245, 158, 11, 0.12);
+}
+html[data-layout="sanctuary-stage"] .bottom-nav-btn.active { color: #fbbf24; }
+html[data-layout="sanctuary-stage"] .mini-bar-inner {
+  background: rgba(9, 11, 16, 0.85);
+  backdrop-filter: blur(20px) saturate(1.4);
+  -webkit-backdrop-filter: blur(20px) saturate(1.4);
+  border-top: 1px solid rgba(245, 158, 11, 0.12);
+}
+html[data-layout="sanctuary-stage"] .brand-mark {
+  background: linear-gradient(145deg, #fbbf24, #d97706);
+  box-shadow: 0 6px 18px -4px rgba(245, 158, 11, 0.5), inset 0 1px 0 rgba(255,255,255,0.25);
+}
 
 /* --- Liturgical Chronicle --------------------------------------------------
  * Light parchment palette with burgundy accent and serif typography.
@@ -2928,6 +2963,43 @@ html[data-layout="living-hymnal"] body::before {
     radial-gradient(900px 600px at 18% -10%, rgba(99, 102, 241, 0.08), transparent 60%),
     radial-gradient(700px 500px at 100% 110%, rgba(99, 102, 241, 0.04), transparent 55%);
 }
+html[data-layout="living-hymnal"] .sidebar {
+  background: linear-gradient(180deg, #0d0d10, #09090b);
+  border-right: 1px solid #27272a;
+}
+html[data-layout="living-hymnal"] .nav-item {
+  border-radius: 8px;
+  padding-left: 18px;
+}
+html[data-layout="living-hymnal"] .nav-item.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 60%;
+  background: #6366f1;
+  border-radius: 0 3px 3px 0;
+}
+html[data-layout="living-hymnal"] .topbar {
+  background: #0d0d10;
+  border-bottom: 1px solid #27272a;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+html[data-layout="living-hymnal"] .mini-bar-inner {
+  background: linear-gradient(180deg, #18181b, #0d0d10);
+  border-top: 1px solid #27272a;
+}
+html[data-layout="living-hymnal"] .playlist-item {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  padding: 8px 10px;
+}
+html[data-layout="living-hymnal"] .brand-mark {
+  background: linear-gradient(145deg, #818cf8, #4f46e5);
+  box-shadow: 0 6px 18px -4px rgba(99, 102, 241, 0.5), inset 0 1px 0 rgba(255,255,255,0.25);
+}
 
 /* --- Sunday Broadcaster ----------------------------------------------------
  * Near-black with crimson/rose accent for a live-broadcast feel.
@@ -2950,13 +3022,55 @@ html[data-layout="broadcaster"] body::before {
     radial-gradient(900px 600px at 18% -10%, rgba(244, 63, 94, 0.09), transparent 60%),
     radial-gradient(700px 500px at 100% 110%, rgba(244, 63, 94, 0.04), transparent 55%);
 }
+html[data-layout="broadcaster"] .sidebar {
+  background: linear-gradient(180deg, #0a0a0e, #050507);
+}
 html[data-layout="broadcaster"] .topbar {
-  border-bottom: 2px solid rgba(244, 63, 94, 0.25);
+  position: relative;
+  min-height: 58px;
+  background: linear-gradient(180deg, #0a0a0e 0%, #050507 100%);
+  border-bottom: 2px solid rgba(244, 63, 94, 0.3);
+}
+html[data-layout="broadcaster"] .topbar::after {
+  content: '● LIVE';
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 11px;
+  font-weight: 800;
+  color: #f43f5e;
+  letter-spacing: 0.08em;
+  font-family: system-ui, sans-serif;
+  pointer-events: none;
 }
 html[data-layout="broadcaster"] .brand-mark {
   background: linear-gradient(145deg, #fb7185, #e11d48);
   box-shadow: 0 6px 18px -4px rgba(244, 63, 94, 0.5), inset 0 1px 0 rgba(255,255,255,0.25);
 }
+html[data-layout="broadcaster"] .nav-item.active {
+  background: rgba(244, 63, 94, 0.08);
+  color: #fb7185;
+}
+html[data-layout="broadcaster"] .nav-item.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 60%;
+  background: #f43f5e;
+  border-radius: 0 3px 3px 0;
+}
+html[data-layout="broadcaster"] .mini-bar-inner {
+  background: linear-gradient(180deg, #141418, #0a0a0e);
+  border-top: 1px solid rgba(244, 63, 94, 0.15);
+}
+html[data-layout="broadcaster"] .playlist-item.active {
+  background: rgba(244, 63, 94, 0.08);
+  border-left: 3px solid #f43f5e;
+}
 
 /* --- Contemplative Sanctuary ------------------------------------------------
  * Deep blue-black with teal accent and serif typography. Sidebar collapses
@@ -2986,6 +3100,49 @@ html[data-layout="contemplative"] .bottom-nav { display: flex; }
 html[data-layout="contemplative"] .mini-bar {
   bottom: calc(56px + env(safe-area-inset-bottom));
 }
+html[data-layout="contemplative"] .topbar {
+  background: transparent;
+  border-bottom: 1px solid rgba(45, 212, 191, 0.08);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+html[data-layout="contemplative"] .brand,
+html[data-layout="contemplative"] .topbar {
+  font-family: Georgia, 'Times New Roman', serif;
+}
+html[data-layout="contemplative"] .player-stage {
+  position: relative;
+}
+html[data-layout="contemplative"] .player-stage::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(45, 212, 191, 0.06), transparent 70%);
+  z-index: 0;
+}
+html[data-layout="contemplative"] .bottom-nav {
+  background: rgba(10, 14, 20, 0.9);
+  backdrop-filter: blur(20px) saturate(1.4);
+  -webkit-backdrop-filter: blur(20px) saturate(1.4);
+  border-top: 1px solid rgba(45, 212, 191, 0.1);
+}
+html[data-layout="contemplative"] .bottom-nav-btn.active { color: #5eead4; }
+html[data-layout="contemplative"] .mini-bar-inner {
+  background: rgba(10, 14, 20, 0.9);
+  backdrop-filter: blur(20px) saturate(1.5);
+  -webkit-backdrop-filter: blur(20px) saturate(1.5);
+  border-top: 1px solid rgba(45, 212, 191, 0.1);
+}
+html[data-layout="contemplative"] .playlist-item.active {
+  background: rgba(45, 212, 191, 0.06);
+  border-left: 2px solid #2dd4bf;
+}
+html[data-layout="contemplative"] .nav-item.active { color: #5eead4; }
+html[data-layout="contemplative"] .brand-mark {
+  background: linear-gradient(145deg, #5eead4, #0d9488);
+  box-shadow: 0 6px 18px -4px rgba(45, 212, 191, 0.4), inset 0 1px 0 rgba(255,255,255,0.25);
+}
 
 /* --- Bento Hub -------------------------------------------------------------
  * GitHub-dark-ish with honey-gold accent. Tighter borders give a
@@ -3018,10 +3175,51 @@ html[data-layout="bento-hub"] .brand-mark {
   box-shadow: 0 6px 18px -4px rgba(234, 179, 8, 0.45), inset 0 1px 0 rgba(255,255,255,0.25);
 }
 html[data-layout="bento-hub"] .sidebar {
-  border-right-color: var(--line);
+  background: #13181f;
+  border-right: 1px solid #30363d;
+}
+html[data-layout="bento-hub"] .brand {
+  border-bottom: 1px solid #21262d;
+  padding-bottom: 18px;
+}
+html[data-layout="bento-hub"] .nav-item {
+  border-radius: 6px;
+}
+html[data-layout="bento-hub"] .nav-item.active {
+  background: rgba(234, 179, 8, 0.08);
+  color: #fbbf24;
+}
+html[data-layout="bento-hub"] .nav-item.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 60%;
+  background: #eab308;
+  border-radius: 0 3px 3px 0;
+}
+html[data-layout="bento-hub"] .playlist-item {
+  background: #0d1117;
+  border: 1px solid #21262d;
+  border-radius: 8px;
+  margin: 3px 0;
+  padding: 8px 12px;
+}
+html[data-layout="bento-hub"] .playlist-item.active {
+  border-color: #eab308;
+  background: rgba(234, 179, 8, 0.05);
 }
 html[data-layout="bento-hub"] .topbar {
-  border-bottom-color: var(--line);
+  background: #13181f;
+  border-bottom: 2px solid #21262d;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+html[data-layout="bento-hub"] .mini-bar-inner {
+  background: linear-gradient(180deg, #1c2333, #13181f);
+  border-top: 1px solid #30363d;
 }
 
 /* Grid-column overrides only apply on screens wide enough for an inline sidebar