From 7c02a31318f660e88df175e2adec0020ecdccbe9 Mon Sep 17 00:00:00 2001
From: G-Fourteen <gfourteen7525@gmail.com>
Date: Sat, 1 Nov 2025 11:05:27 -0600
Subject: [PATCH] Remove gradients from AI experience surfaces

---
 AI/ai.css           | 43 +++++++++++++--------------------
 index.html          |  4 +--
 style.css           | 59 +++++++++------------------------------------
 tests/test_theme.py | 31 ++++++++++++++----------
 4 files changed, 48 insertions(+), 89 deletions(-)

diff --git a/AI/ai.css b/AI/ai.css
index 4a7f0a2..2ff3c3e 100644
--- a/AI/ai.css
+++ b/AI/ai.css
@@ -1,23 +1,16 @@
 body[data-app-state='experience'] {
-    background: radial-gradient(140% 160% at 12% -10%, rgba(14, 165, 233, 0.35) 0%, transparent 55%),
-        radial-gradient(120% 130% at 82% 0%, rgba(99, 102, 241, 0.32) 0%, transparent 60%),
-        linear-gradient(180deg, #020617 0%, #01030f 100%);
-    color: #e2e8f0;
-}
-
-body[data-app-state='experience']::before {
-    background: radial-gradient(120% 120% at 25% 20%, rgba(56, 189, 248, 0.36) 0%, transparent 60%),
-        radial-gradient(120% 120% at 80% 70%, rgba(14, 165, 233, 0.28) 0%, transparent 62%),
-        radial-gradient(140% 120% at 10% 90%, rgba(2, 132, 199, 0.22) 0%, transparent 70%);
-    opacity: 1;
+    background: var(--background-color);
+    color: var(--text-color);
 }
 
+body[data-app-state='experience']::before,
 body[data-app-state='experience']::after {
     background: none;
+    opacity: 0;
 }
 
 body[data-app-state='experience'] .app-shell {
-    background: rgba(9, 14, 28, 0.82);
+    background: var(--surface-color);
     border: 1px solid rgba(148, 163, 184, 0.22);
     box-shadow: 0 40px 120px rgba(2, 6, 23, 0.75);
     border-radius: 36px;
@@ -34,10 +27,10 @@ body[data-app-state='experience'] .status-banner {
 }
 
 body[data-app-state='experience'] .mute-indicator {
-    background: linear-gradient(120deg, rgba(56, 189, 248, 0.2), rgba(99, 102, 241, 0.24));
-    box-shadow: 0 18px 40px rgba(14, 165, 233, 0.35);
-    color: #e2e8f0;
-    border: 1px solid rgba(148, 163, 184, 0.32);
+    background: var(--surface-highlight);
+    box-shadow: 0 18px 40px rgba(14, 165, 233, 0.24);
+    color: var(--text-color);
+    border: 1px solid rgba(148, 163, 184, 0.24);
     border-radius: 999px;
     padding: 14px 32px;
     letter-spacing: 0.12em;
@@ -50,10 +43,8 @@ body[data-app-state='experience'] .mute-indicator[data-state='muted'] {
 
 body[data-app-state='experience'] .image-stage {
     border: 1px solid rgba(148, 163, 184, 0.16);
-    background: radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.24), transparent 55%),
-        radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.28), transparent 65%),
-        rgba(8, 14, 32, 0.72);
-    box-shadow: 0 28px 80px rgba(2, 6, 23, 0.6);
+    background: var(--surface-color);
+    box-shadow: 0 28px 80px rgba(2, 6, 23, 0.5);
     border-radius: 28px;
     width: min(1100px, 100%);
     overflow: hidden;
@@ -68,22 +59,22 @@ body[data-app-state='experience'] #hero-stage img {
 }
 
 body[data-app-state='experience'] .voice-stage {
-    background: radial-gradient(120% 120% at 50% 0%, rgba(56, 189, 248, 0.24), transparent 65%), rgba(8, 15, 35, 0.75);
+    background: var(--surface-color);
     border: 1px solid rgba(148, 163, 184, 0.18);
-    box-shadow: 0 26px 72px rgba(2, 6, 23, 0.58);
+    box-shadow: 0 26px 72px rgba(2, 6, 23, 0.5);
     border-radius: 32px;
     padding: clamp(24px, 6vw, 48px);
     gap: clamp(24px, 12vw, 140px);
 }
 
 body[data-app-state='experience'] .voice-circle {
-    background: radial-gradient(circle at 40% 40%, rgba(56, 189, 248, 0.32), transparent 70%), rgba(8, 15, 35, 0.9);
-    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2), 0 18px 46px rgba(2, 6, 23, 0.6);
+    background: var(--surface-highlight);
+    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2), 0 18px 46px rgba(2, 6, 23, 0.5);
 }
 
 body[data-app-state='experience'] .compatibility-notice {
-    background: rgba(8, 14, 28, 0.72);
+    background: var(--surface-color);
     border: 1px solid rgba(148, 163, 184, 0.18);
-    color: rgba(226, 232, 240, 0.82);
+    color: var(--muted-text);
     box-shadow: 0 20px 60px rgba(2, 6, 23, 0.6);
 }
diff --git a/index.html b/index.html
index 11075ba..8acd22c 100644
--- a/index.html
+++ b/index.html
@@ -28,8 +28,8 @@
             }
         })();
     </script>
-    <link rel="stylesheet" href="./style.css" />
-    <script defer src="./landing.js"></script>
+    <link rel="stylesheet" href="./style.css?v=20240606" />
+    <script defer src="./landing.js?v=20240606"></script>
 </head>
 <body class="no-js" data-app-state="landing">
     <noscript>
diff --git a/style.css b/style.css
index 35ca970..6e80a65 100644
--- a/style.css
+++ b/style.css
@@ -2,9 +2,7 @@
 :root[data-theme='dark'] {
     color-scheme: dark;
     --background-color: #020617;
-    --background-gradient: radial-gradient(120% 120% at 20% 0%, rgba(14, 165, 233, 0.25) 0%, rgba(8, 145, 178, 0.18) 24%, transparent 55%),
-        radial-gradient(160% 140% at 80% 20%, rgba(99, 102, 241, 0.28) 0%, rgba(56, 189, 248, 0.18) 30%, transparent 60%),
-        linear-gradient(180deg, #020617 0%, #01030f 100%);
+    --background-gradient: none;
     --text-color: #f5f7fa;
     --muted-text: rgba(226, 232, 240, 0.74);
     --accent-primary: #38bdf8;
@@ -22,9 +20,7 @@
 body[data-theme='light'] {
     color-scheme: light;
     --background-color: #f5f7fa;
-    --background-gradient: radial-gradient(140% 110% at 20% 0%, rgba(56, 189, 248, 0.28) 0%, rgba(14, 165, 233, 0.16) 36%, transparent 58%),
-        radial-gradient(120% 120% at 85% 15%, rgba(99, 102, 241, 0.22) 0%, rgba(56, 189, 248, 0.12) 32%, transparent 62%),
-        linear-gradient(180deg, #f5f7fa 0%, #edf2f7 100%);
+    --background-gradient: none;
     --text-color: #0b1324;
     --muted-text: rgba(15, 23, 42, 0.68);
     --accent-primary: #0f4c81;
@@ -54,7 +50,7 @@ body {
     min-height: 100vh;
     font-family: 'Space Grotesk', 'Roboto', 'Segoe UI', sans-serif;
     color: var(--text-color);
-    background: var(--background-gradient, var(--background-color));
+    background: var(--background-color);
     display: flex;
     flex-direction: column;
     padding: clamp(24px, 5vw, 48px) clamp(16px, 6vw, 64px);
@@ -62,18 +58,6 @@ body {
     overflow-x: hidden;
 }
 
-body::before {
-    content: '';
-    position: fixed;
-    inset: 0;
-    background: radial-gradient(120% 120% at 50% -10%, rgba(56, 189, 248, 0.2) 0%, transparent 60%),
-        radial-gradient(120% 120% at 90% 10%, rgba(99, 102, 241, 0.24) 0%, transparent 62%),
-        radial-gradient(120% 120% at 10% 80%, rgba(15, 118, 110, 0.22) 0%, transparent 65%);
-    pointer-events: none;
-    z-index: 0;
-    opacity: 0.9;
-}
-
 body > * {
     position: relative;
     z-index: 1;
@@ -134,33 +118,12 @@ body[data-app-state='experience'] #landing {
     overflow: hidden;
 }
 
-.surface-card::before {
-    content: '';
-    position: absolute;
-    inset: 1px;
-    border-radius: inherit;
-    background: linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 55%);
-    pointer-events: none;
-    opacity: 0.65;
-    z-index: -1;
-}
-
 .accent-card {
     overflow: hidden;
-    background: linear-gradient(135deg, rgba(56, 189, 248, 0.45) 0%, rgba(14, 165, 233, 0.18) 32%, rgba(99, 102, 241, 0.28) 100%),
-        var(--surface-color);
+    background: var(--surface-color);
     box-shadow: 0 36px 90px rgba(14, 116, 144, 0.6);
 }
 
-.accent-card::after {
-    content: '';
-    position: absolute;
-    inset: -45% 45% 40% -35%;
-    background: radial-gradient(circle at 0% 50%, rgba(56, 189, 248, 0.55), transparent 58%);
-    opacity: 0.6;
-    pointer-events: none;
-}
-
 .landing-grid {
     display: grid;
     gap: clamp(20px, 4vw, 32px);
@@ -245,7 +208,7 @@ body[data-theme='light'] .landing-lede {
 .landing-link:hover,
 .landing-link:focus-visible {
     color: var(--accent-primary-contrast);
-    background: linear-gradient(120deg, rgba(56, 189, 248, 0.9), rgba(99, 102, 241, 0.85));
+    background: var(--accent-primary);
     outline: none;
 }
 
@@ -386,18 +349,18 @@ body[data-theme='light'] .dependency-summary p {
 }
 
 .dependency-light[data-state='pending'] {
-    background: linear-gradient(135deg, rgba(56, 189, 248, 0.85), rgba(99, 102, 241, 0.85));
+    background: var(--accent-primary);
     opacity: 0.8;
 }
 
 .dependency-light[data-state='fail'] {
-    background: linear-gradient(135deg, rgba(96, 165, 250, 0.95), rgba(129, 140, 248, 0.95));
+    background: var(--accent-secondary);
     opacity: 1;
-    box-shadow: 0 0 0 8px rgba(96, 165, 250, 0.18);
+    box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.18);
 }
 
 .dependency-light[data-state='pass'] {
-    background: linear-gradient(135deg, rgba(52, 211, 153, 0.95), rgba(16, 185, 129, 0.9));
+    background: var(--accent-success);
     opacity: 1;
     box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.18);
 }
@@ -507,7 +470,7 @@ button {
 }
 
 button.primary {
-    background: linear-gradient(120deg, rgba(56, 189, 248, 0.95) 0%, rgba(45, 212, 191, 0.8) 36%, rgba(99, 102, 241, 0.88) 100%);
+    background: var(--accent-primary);
     color: #041014;
     font-weight: 700;
     box-shadow: 0 28px 60px rgba(14, 165, 233, 0.48);
@@ -515,7 +478,7 @@ button.primary {
 
 button.primary:not(:disabled):hover,
 button.primary:not(:disabled):focus-visible {
-    background: linear-gradient(120deg, rgba(56, 189, 248, 1), rgba(14, 165, 233, 0.95) 45%, rgba(129, 140, 248, 0.95) 100%);
+    background: var(--accent-secondary);
     color: #020617;
     outline: none;
     transform: translateY(-2px);
diff --git a/tests/test_theme.py b/tests/test_theme.py
index bccd71a..b34a51f 100644
--- a/tests/test_theme.py
+++ b/tests/test_theme.py
@@ -8,36 +8,41 @@ def strip_css_comments(css: str) -> str:
     return re.sub(r"/\*.*?\*/", "", css, flags=re.S)
 
 
-def test_voice_theme_uses_layered_gradients():
+def test_voice_theme_uses_solid_colors():
     css = strip_css_comments((ROOT / "AI" / "ai.css").read_text())
     assert "body[data-app-state='experience'] {" in css
-    assert "radial-gradient" in css
-    assert "linear-gradient" in css
-    assert "backdrop-filter" in css
+    assert "var(--background-color)" in css
+    assert "radial-gradient" not in css
+    assert "linear-gradient" not in css
 
 
-def test_experience_background_uses_dark_gradient():
+def test_experience_background_is_flat():
     css = (ROOT / "AI" / "ai.css").read_text()
-    assert "background: radial-gradient" in css
-    assert "#020617" in css
-    assert "#01030f" in css
+    selector = "body[data-app-state='experience'] {"
+    assert selector in css
+    start = css.index(selector)
+    end = css.index('}', start)
+    block = css[start:end]
+    assert "background: var(--background-color);" in block
+    assert "radial-gradient" not in block
 
 
-def test_voice_stage_has_glass_shell():
+def test_voice_stage_uses_solid_shell():
     css = (ROOT / "AI" / "ai.css").read_text()
     selector = "body[data-app-state='experience'] .voice-stage {"
     assert selector in css
     start = css.index(selector)
     end = css.index('}', start)
     block = css[start:end]
-    assert "radial-gradient" in block
+    assert "background: var(--surface-color);" in block
+    assert "radial-gradient" not in block
     assert "border-radius" in block
     assert "border: 1px solid" in block
 
 
-def test_root_style_defines_gradient_theme():
+def test_root_style_defines_solid_theme():
     css = strip_css_comments((ROOT / "style.css").read_text())
-    assert "--background-gradient" in css
-    assert "background: var(--background-gradient" in css
+    assert "--background-color" in css
+    assert "background: var(--background-color" in css
     assert "--surface-color" in css
     assert "--surface-highlight" in css