Skip to content

Flatten AI experience surfaces #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
G-Fourteen merged 1 commit into from
Nov 1, 2025
Merged

Flatten AI experience surfaces #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 17 additions & 26 deletions AI/ai.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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);
}
4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
59 changes: 11 additions & 48 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -54,26 +50,14 @@ 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);
position: relative;
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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -507,15 +470,15 @@ 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);
}

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);
Expand Down
31 changes: 18 additions & 13 deletions tests/test_theme.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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