From ecb666bc1dbf8cd87995a2d645bfb985a0c2e1df Mon Sep 17 00:00:00 2001
From: Avi <avi@aiolabs.com>
Date: Mon, 24 Aug 2026 19:44:11 -0500
Subject: [PATCH] Glass theme: real frosted-glass look
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Translucent surfaces with backdrop blur over an aurora gradient
backdrop, hairline light borders, softened accent tints, frosted
modal scrim, inverted sidebar logo. Scoped entirely to
html[data-theme='glass'] — other themes untouched.
---
 frontend/src/styles.css | 89 ++++++++++++++++++++++++++++++-----------
 1 file changed, 66 insertions(+), 23 deletions(-)

diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 60604c0..c2c7acb 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -87,31 +87,73 @@
   --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.85), 0 0 32px rgba(255, 20, 147, 0.12);
 }
 
-/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme
-   (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
+/* "Glass" — frosted-glass aesthetic inspired by the Meridian Obsidian theme
+   (MIT): translucent blurred panels floating over an aurora-lit deep
+   blue-black field, cyan accents, hairline light borders. */
 :root[data-theme='glass'] {
-  --bg: #0d0d0d;
-  --surface: #1a1a1f;
-  --surface-2: #24242a;
-  --border: #3a3a44;
-  --border-strong: #4a4a5a;
-  --text: #e0e0e7;
-  --text-muted: #888899;
+  --bg: #0a0d13;
+  --surface: rgba(23, 29, 41, 0.58);
+  --surface-2: rgba(255, 255, 255, 0.05);
+  --surface-hover: rgba(255, 255, 255, 0.09);
+  --border: rgba(255, 255, 255, 0.1);
+  --border-strong: rgba(255, 255, 255, 0.2);
+  --text: #e8ecf4;
+  --text-muted: #96a2b6;
   --primary: #7fdbff;
-  --primary-hover: #5bc0de;
-  --primary-soft: #1e2a3a;
-  --on-primary: #050512;
-  --danger: #ff6b6b;
-  --danger-soft: #332a2a;
-  --warning: #f0ad4f;
-  --warning-soft: #332a2a;
-  --success: #5cb85c;
-  --success-soft: #2ecc71;
-  --info: #5bc0de;
-  --info-soft: #1e2c3c;
+  --primary-hover: #a3e5ff;
+  --primary-soft: rgba(127, 219, 255, 0.13);
+  --on-primary: #06121c;
+  --danger: #ff8080;
+  --danger-soft: rgba(255, 107, 107, 0.14);
+  --warning: #ffc46b;
+  --warning-soft: rgba(240, 173, 79, 0.15);
+  --success: #7ed99a;
+  --success-soft: rgba(92, 184, 92, 0.16);
+  --info: #82c9ea;
+  --info-soft: rgba(91, 192, 222, 0.14);
   --focus: #7fdbff;
-  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
-  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 36px rgba(0, 0, 0, 0.38);
+  --shadow-modal: 0 18px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
+}
+
+/* Glass scene: the aurora backdrop lives on <body>; panels above it are
+   translucent and blurred so the glow reads through them. */
+html[data-theme='glass'] body {
+  background:
+    radial-gradient(1000px 640px at 10% -10%, rgba(127, 219, 255, 0.15), transparent 60%),
+    radial-gradient(880px 560px at 92% 6%, rgba(150, 130, 255, 0.12), transparent 58%),
+    radial-gradient(760px 720px at 50% 120%, rgba(91, 192, 222, 0.1), transparent 62%), #0a0d13;
+}
+
+html[data-theme='glass'] .app-shell,
+html[data-theme='glass'] .main {
+  background: transparent;
+}
+
+/* Frosted panes: every major surface blurs whatever sits behind it. */
+html[data-theme='glass'] .card,
+html[data-theme='glass'] .sidebar,
+html[data-theme='glass'] .modal,
+html[data-theme='glass'] .empty-state,
+html[data-theme='glass'] .profile-card,
+html[data-theme='glass'] .compose-preview {
+  -webkit-backdrop-filter: blur(18px) saturate(160%);
+  backdrop-filter: blur(18px) saturate(160%);
+}
+
+html[data-theme='glass'] input[type='text'],
+html[data-theme='glass'] input[type='search'],
+html[data-theme='glass'] input[type='password'],
+html[data-theme='glass'] select,
+html[data-theme='glass'] textarea {
+  background: rgba(255, 255, 255, 0.045);
+  border-color: rgba(255, 255, 255, 0.16);
+}
+
+html[data-theme='glass'] .modal-backdrop {
+  background: rgba(4, 7, 12, 0.5);
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
 }
 
 * {
@@ -369,7 +411,8 @@ a {
 /* The artwork is black-on-white; flip it in dark themes so it stays black
    bird on dark tile instead of a glaring white square. */
 html[data-theme='dark'] .sidebar-logo img,
-html[data-theme='neon'] .sidebar-logo img {
+html[data-theme='neon'] .sidebar-logo img,
+html[data-theme='glass'] .sidebar-logo img {
   filter: invert(1);
 }