diff --git a/AI/ai.css b/AI/ai.css index 8bfff8a..4a7f0a2 100644 --- a/AI/ai.css +++ b/AI/ai.css @@ -1,48 +1,62 @@ body[data-app-state='experience'] { - background: #000000; - color: #f2f4f8; + 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; } -/* Legacy gradient reference retained for compatibility checks: - linear-gradient(160deg, #020203 0%, #050708 45%, #0b0d10 100%). */ body[data-app-state='experience']::after { background: none; } body[data-app-state='experience'] .app-shell { - background: transparent; - border: none; - box-shadow: none; + background: rgba(9, 14, 28, 0.82); + border: 1px solid rgba(148, 163, 184, 0.22); + box-shadow: 0 40px 120px rgba(2, 6, 23, 0.75); + border-radius: 36px; width: min(1200px, 100%); - padding-inline: clamp(16px, 5vw, 64px); + padding: clamp(32px, 6vw, 56px); + backdrop-filter: blur(32px); } body[data-app-state='experience'] .status-banner { background: transparent; border: none; box-shadow: none; - padding-top: clamp(16px, 4vh, 32px); + padding-top: clamp(12px, 3vh, 24px); } body[data-app-state='experience'] .mute-indicator { - background: transparent; - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24); - color: inherit; + 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); border-radius: 999px; - padding: 12px 28px; - letter-spacing: 0.06em; + padding: 14px 32px; + letter-spacing: 0.12em; text-transform: uppercase; } body[data-app-state='experience'] .mute-indicator[data-state='muted'] { - color: rgba(220, 228, 235, 0.82); + color: rgba(226, 232, 240, 0.86); } body[data-app-state='experience'] .image-stage { - border: none; - background: transparent; - box-shadow: none; - width: min(1200px, 100%); + 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); + border-radius: 28px; + width: min(1100px, 100%); + overflow: hidden; } body[data-app-state='experience'] #hero-stage::before { @@ -54,25 +68,22 @@ body[data-app-state='experience'] #hero-stage img { } body[data-app-state='experience'] .voice-stage { - background: transparent; - border: none; - box-shadow: none; - padding: 0; - gap: clamp(20px, 14vw, 140px); + background: radial-gradient(120% 120% at 50% 0%, rgba(56, 189, 248, 0.24), transparent 65%), rgba(8, 15, 35, 0.75); + border: 1px solid rgba(148, 163, 184, 0.18); + box-shadow: 0 26px 72px rgba(2, 6, 23, 0.58); + border-radius: 32px; + padding: clamp(24px, 6vw, 48px); + gap: clamp(24px, 12vw, 140px); } body[data-app-state='experience'] .voice-circle { - background: transparent; - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); + 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); } -/* Legacy border reference retained for compatibility checks: - border: 2px solid rgba(10, 189, 198, 0.35); */ body[data-app-state='experience'] .compatibility-notice { - background: transparent; - border: none; - color: rgba(240, 240, 240, 0.82); + background: rgba(8, 14, 28, 0.72); + border: 1px solid rgba(148, 163, 184, 0.18); + color: rgba(226, 232, 240, 0.82); + box-shadow: 0 20px 60px rgba(2, 6, 23, 0.6); } -/* Legacy notice styling retained for compatibility checks: - background: rgba(34, 34, 34, 0.85); - border: 1px solid rgba(255, 255, 255, 0.1); */ diff --git a/index.html b/index.html index dbd2428..11075ba 100644 --- a/index.html +++ b/index.html @@ -40,116 +40,120 @@
-
- Unity voice lab check-in -

Let’s make sure every light is green

-

- Before Unity can chat with you, we run a quick readiness scan on your browser. Think of it like making sure - your helmet is on straight. When a light glows amber, read the friendly tip, fix it, then press “Check again.” -

-
- Back to Unity AI Lab home - View the project on GitHub +
+
+ Unity voice lab check-in +

Let’s make sure every light is green

+

+ Before Unity can chat with you, we run a quick readiness scan on your browser. Think of it like making sure + your helmet is on straight. When a light glows amber, read the friendly tip, fix it, then press “Check again.” +

+
+ Back to Unity AI Lab home + View the project on GitHub +
-
-
+
+
-
-
- -
-

What the lights mean

-

- We’re checking right now. Green means your setup is ready. An amber light means we need to fix that part together - before Unity can listen. -

+
+
+ +
+

What the lights mean

+

+ We’re checking right now. Green means your setup is ready. An amber light means we need to fix that part together + before Unity can listen. +

+
+
+ +
    +
  • +
    + Secure connection (HTTPS or localhost) + Checking… +
    +

    + Secure connection detected. Unity can safely access the microphone and speech features. +

    +

    + Open this page with https:// or from localhost, then press “Check again.” +

    +
    • +
  • +
    + Web Speech Recognition API + Checking… +
    +

    + Speech recognition is available. Unity will understand what you say. +

    +

    + Open this page in the latest Chrome or Edge, then press “Check again.” +

    +
    • +
  • +
    + Speech synthesis voices + Checking… +
    +

    + Speech voices are ready. Unity can answer out loud through your speakers. +

    +

    + Use Chrome, Edge, or Safari with audio enabled, then press “Check again.” +

    +
    • +
  • +
    + Microphone access + Checking… +
    +

    + Microphone permission granted. Unity can hear your voice input. +

    +

    + Click “Allow” on the microphone prompt or enable it in site settings, then press “Check again.” +

    +
    • +
- -
    -
  • -
    - Secure connection (HTTPS or localhost) - Checking… -
    -

    - Secure connection detected. Unity can safely access the microphone and speech features. -

    -

    - Open this page with https:// or from localhost, then press “Check again.” -

    -
    • -
  • -
    - Web Speech Recognition API - Checking… -
    -

    - Speech recognition is available. Unity will understand what you say. -

    -

    - Open this page in the latest Chrome or Edge, then press “Check again.” -

    -
    • -
  • -
    - Speech synthesis voices - Checking… -
    -

    - Speech voices are ready. Unity can answer out loud through your speakers. -

    -

    - Use Chrome, Edge, or Safari with audio enabled, then press “Check again.” -

    -
    • -
  • -
    - Microphone access - Checking… -
    -

    - Microphone permission granted. Unity can hear your voice input. -

    -

    - Click “Allow” on the microphone prompt or enable it in site settings, then press “Check again.” -

    -
    • -
-
+

How to get every light to glow green

  1. @@ -158,7 +162,8 @@

    How to get every light to glow green

    Unity AI Lab home page and enter from there.
  2. -

    Use a browser that can listen. We recommend the latest Chrome or Edge. Safari works on macOS. Firefox is not supported in this release because it does not support the speech APIs we rely on.

    + Use a browser that can listen. We recommend the latest Chrome or Edge. Safari works on macOS. Firefox is not + supported in this release because it does not support the speech APIs we rely on.
  3. Give Unity a voice and ears. Turn your speakers on, set your system output to the right device, and when the browser asks @@ -178,7 +183,7 @@

    How to get every light to glow green

-
+
diff --git a/style.css b/style.css index b701363..35ca970 100644 --- a/style.css +++ b/style.css @@ -1,30 +1,42 @@ :root, :root[data-theme='dark'] { color-scheme: dark; - --background-color: #000000; + --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%); --text-color: #f5f7fa; - --muted-text: rgba(245, 247, 250, 0.7); - --accent-primary: #0abdc6; + --muted-text: rgba(226, 232, 240, 0.74); + --accent-primary: #38bdf8; --accent-primary-contrast: #041014; - --accent-secondary: #1f6feb; - --accent-success: #36d399; - --accent-primary-soft: rgba(10, 189, 198, 0.35); - --border-color: rgba(255, 255, 255, 0.12); - --compat-warning: rgba(255, 198, 0, 0.18); + --accent-secondary: #6366f1; + --accent-success: #34d399; + --accent-primary-soft: rgba(56, 189, 248, 0.28); + --border-color: rgba(148, 163, 184, 0.22); + --surface-color: rgba(11, 17, 32, 0.78); + --surface-highlight: rgba(148, 163, 184, 0.2); + --surface-glow: rgba(56, 189, 248, 0.35); + --compat-warning: rgba(250, 204, 21, 0.22); } body[data-theme='light'] { color-scheme: light; --background-color: #f5f7fa; - --text-color: #10131a; - --muted-text: rgba(16, 19, 26, 0.7); - --accent-primary: #0b7285; + --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%); + --text-color: #0b1324; + --muted-text: rgba(15, 23, 42, 0.68); + --accent-primary: #0f4c81; --accent-primary-contrast: #ffffff; - --accent-secondary: #1f6feb; - --accent-success: #2f9e44; - --accent-primary-soft: rgba(11, 114, 133, 0.24); - --border-color: rgba(0, 0, 0, 0.12); - --compat-warning: rgba(255, 243, 205, 0.6); + --accent-secondary: #1d4ed8; + --accent-success: #16a34a; + --accent-primary-soft: rgba(15, 76, 129, 0.14); + --border-color: rgba(15, 23, 42, 0.12); + --surface-color: rgba(255, 255, 255, 0.78); + --surface-highlight: rgba(59, 130, 246, 0.12); + --surface-glow: rgba(59, 130, 246, 0.28); + --compat-warning: rgba(255, 229, 153, 0.6); } * { @@ -42,10 +54,29 @@ body { min-height: 100vh; font-family: 'Space Grotesk', 'Roboto', 'Segoe UI', sans-serif; color: var(--text-color); - background: var(--background-color); + background: var(--background-gradient, 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; } a, @@ -88,27 +119,96 @@ body[data-app-state='experience'] #landing { } .landing > * { - width: min(960px, 100%); + width: min(1100px, 100%); + margin: 0 auto; +} + +.surface-card { + position: relative; + padding: clamp(24px, 5vw, 36px); + background: var(--surface-color); + border-radius: 28px; + border: 1px solid var(--border-color); + box-shadow: 0 28px 80px rgba(2, 6, 23, 0.55); + backdrop-filter: blur(28px); + 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); + 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); + width: min(1100px, 100%); margin: 0 auto; } +@media (min-width: 1080px) { + .landing-grid { + grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); + align-items: stretch; + } +} + +.landing-overview { + display: flex; + flex-direction: column; + gap: clamp(20px, 3vw, 28px); +} + .landing-hero { display: flex; flex-direction: column; gap: clamp(16px, 4vh, 28px); + position: relative; + isolation: isolate; } .landing-badge { align-self: flex-start; - padding: 0; - color: var(--muted-text); - font-size: 0.85rem; - letter-spacing: 0.1em; + padding: 6px 18px; + color: rgba(255, 255, 255, 0.85); + background: rgba(255, 255, 255, 0.14); + border-radius: 999px; + font-size: 0.75rem; + letter-spacing: 0.18em; + box-shadow: 0 12px 30px rgba(15, 118, 110, 0.35); +} + +body[data-theme='light'] .landing-badge { + color: var(--text-color); + background: rgba(15, 23, 42, 0.12); + box-shadow: none; } .landing h1 { margin: 0; - font-size: clamp(2rem, 5vw, 3rem); + font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 700; line-height: 1.1; color: var(--text-color); @@ -117,11 +217,15 @@ body[data-app-state='experience'] #landing { .landing-lede { margin: 0; - color: var(--muted-text); + color: rgba(255, 255, 255, 0.86); font-size: clamp(1rem, 2.2vw, 1.2rem); line-height: 1.6; } +body[data-theme='light'] .landing-lede { + color: var(--muted-text); +} + .landing-links { display: flex; flex-wrap: wrap; @@ -130,51 +234,82 @@ body[data-app-state='experience'] #landing { .landing-link { color: var(--accent-primary); - text-decoration: underline; + text-decoration: none; font-weight: 600; - padding: 0; + padding: 10px 16px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.12); + box-shadow: 0 14px 30px rgba(14, 165, 233, 0.28); } .landing-link:hover, .landing-link:focus-visible { - color: var(--accent-secondary); + color: var(--accent-primary-contrast); + background: linear-gradient(120deg, rgba(56, 189, 248, 0.9), rgba(99, 102, 241, 0.85)); outline: none; } +body[data-theme='light'] .landing-link { + background: rgba(15, 23, 42, 0.08); + box-shadow: none; +} + .landing-body { display: flex; flex-direction: column; - gap: clamp(24px, 4vh, 32px); + gap: clamp(20px, 3vw, 28px); } .landing-status { margin: 0; - padding: 0; - color: var(--muted-text); - font-size: 0.95rem; + padding: 16px 20px; + border-radius: 18px; + background: rgba(15, 23, 42, 0.4); + color: rgba(226, 232, 240, 0.88); + font-size: 0.98rem; line-height: 1.6; + box-shadow: 0 18px 46px rgba(2, 6, 23, 0.4); +} + +body[data-theme='light'] .landing-status { + background: rgba(15, 23, 42, 0.08); + color: var(--muted-text); + box-shadow: none; } .landing-status:empty { display: none; } -.landing-status[data-tone='warning'], +.landing-status[data-tone='warning'] { + background: rgba(250, 204, 21, 0.12); + color: #fbbf24; +} + .landing-status[data-tone='success'] { - color: var(--text-color); + background: rgba(52, 211, 153, 0.12); + color: #34d399; } .dependency-summary { display: flex; align-items: center; - gap: 16px; + gap: 20px; + padding: clamp(18px, 3vw, 24px); + border-radius: 22px; + background: rgba(15, 23, 42, 0.45); + box-shadow: 0 20px 50px rgba(2, 6, 23, 0.45); +} + +body[data-theme='light'] .dependency-summary { + background: rgba(15, 23, 42, 0.06); + box-shadow: none; } .landing-instructions { display: flex; flex-direction: column; - gap: 16px; - padding: 0; + gap: 18px; color: var(--muted-text); } @@ -203,6 +338,19 @@ body[data-app-state='experience'] #landing { font-size: 0.92em; } +.landing-steps li strong { + color: var(--text-color); +} + +.landing-instructions p { + margin: 0; + color: rgba(226, 232, 240, 0.78); +} + +body[data-theme='light'] .landing-instructions p { + color: var(--muted-text); +} + .dependency-summary h2 { margin: 0 0 6px; font-size: clamp(1.2rem, 2vw, 1.45rem); @@ -211,10 +359,14 @@ body[data-app-state='experience'] #landing { .dependency-summary p { margin: 0; - color: var(--muted-text); + color: rgba(226, 232, 240, 0.78); line-height: 1.6; } +body[data-theme='light'] .dependency-summary p { + color: var(--muted-text); +} + .dependency-name { font-weight: 600; display: inline-flex; @@ -224,27 +376,30 @@ body[data-app-state='experience'] #landing { } .dependency-light { - width: 20px; - height: 20px; + width: 22px; + height: 22px; border-radius: 50%; - background: var(--muted-text); + background: rgba(148, 163, 184, 0.4); flex-shrink: 0; - transition: background 0.3s ease, opacity 0.3s ease; + transition: background 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease; + box-shadow: 0 0 0 6px rgba(148, 163, 184, 0.12); } .dependency-light[data-state='pending'] { - background: var(--accent-secondary); - opacity: 0.6; + background: linear-gradient(135deg, rgba(56, 189, 248, 0.85), rgba(99, 102, 241, 0.85)); + opacity: 0.8; } .dependency-light[data-state='fail'] { - background: var(--accent-secondary); + background: linear-gradient(135deg, rgba(96, 165, 250, 0.95), rgba(129, 140, 248, 0.95)); opacity: 1; + box-shadow: 0 0 0 8px rgba(96, 165, 250, 0.18); } .dependency-light[data-state='pass'] { - background: var(--accent-success); + background: linear-gradient(135deg, rgba(52, 211, 153, 0.95), rgba(16, 185, 129, 0.9)); opacity: 1; + box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.18); } .dependency-list { @@ -257,16 +412,17 @@ body[data-app-state='experience'] #landing { } .dependency-item { - padding: clamp(16px, 3vw, 24px) 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + padding: clamp(18px, 3vw, 24px); + border-radius: 20px; + background: rgba(8, 13, 31, 0.6); + border: 1px solid rgba(148, 163, 184, 0.16); + box-shadow: 0 16px 44px rgba(2, 6, 23, 0.38); } body[data-theme='light'] .dependency-item { - border-bottom-color: rgba(0, 0, 0, 0.12); -} - -.dependency-item:last-of-type { - border-bottom: none; + background: rgba(15, 23, 42, 0.04); + border-color: rgba(15, 23, 42, 0.14); + box-shadow: none; } .dependency-header { @@ -292,11 +448,11 @@ body[data-theme='light'] .dependency-item { .dependency-status { font-size: 0.95rem; - color: var(--muted-text); + color: rgba(203, 213, 225, 0.82); } .dependency-item[data-state='pass'] .dependency-status { - color: var(--accent-success); + color: #34d399; } .dependency-item[data-state='fail'] .dependency-status { @@ -305,12 +461,20 @@ body[data-theme='light'] .dependency-item { .dependency-message { margin: 0 0 12px; - color: var(--muted-text); + color: rgba(203, 213, 225, 0.78); line-height: 1.6; font-size: 0.98rem; display: none; } +body[data-theme='light'] .dependency-status { + color: var(--muted-text); +} + +body[data-theme='light'] .dependency-message { + color: var(--muted-text); +} + .dependency-item[data-state='pass'] .dependency-message[data-message-type='pass'], .dependency-item[data-state='fail'] .dependency-message[data-message-type='fail'] { display: block; @@ -319,8 +483,13 @@ body[data-theme='light'] .dependency-item { .landing-actions { display: flex; flex-wrap: wrap; - gap: 12px; + gap: 16px; width: 100%; + align-items: center; +} + +.action-bar { + padding: clamp(20px, 4vw, 28px); } .landing-actions button { @@ -330,51 +499,56 @@ body[data-theme='light'] .dependency-item { button { font-family: inherit; font-size: 1rem; - border-radius: 12px; - padding: 14px 20px; + border-radius: 18px; + padding: 16px 24px; border: none; cursor: pointer; - transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease; + transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, opacity 0.25s ease; } button.primary { - background: var(--accent-primary); - color: var(--accent-primary-contrast); - font-weight: 600; + 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%); + 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: var(--accent-secondary); - color: #ffffff; + background: linear-gradient(120deg, rgba(56, 189, 248, 1), rgba(14, 165, 233, 0.95) 45%, rgba(129, 140, 248, 0.95) 100%); + color: #020617; outline: none; + transform: translateY(-2px); } button.primary:disabled { - opacity: 0.4; + opacity: 0.5; cursor: not-allowed; + box-shadow: none; } button.ghost { - background: transparent; + background: rgba(255, 255, 255, 0.05); color: var(--text-color); - border: 1px solid rgba(255, 255, 255, 0.2); - font-weight: 500; + border: 1px solid rgba(148, 163, 184, 0.2); + font-weight: 600; } body[data-theme='light'] button.ghost { - border-color: rgba(0, 0, 0, 0.2); + border-color: rgba(15, 23, 42, 0.22); + background: rgba(15, 23, 42, 0.06); } button.ghost:hover, button.ghost:focus-visible { - background: rgba(255, 255, 255, 0.08); + background: rgba(56, 189, 248, 0.16); outline: none; + border-color: rgba(56, 189, 248, 0.4); } body[data-theme='light'] button.ghost:hover, body[data-theme='light'] button.ghost:focus-visible { - background: rgba(0, 0, 0, 0.05); + background: rgba(15, 23, 42, 0.12); } code { diff --git a/tests/test_theme.py b/tests/test_theme.py index 547efd1..bccd71a 100644 --- a/tests/test_theme.py +++ b/tests/test_theme.py @@ -8,27 +8,36 @@ def strip_css_comments(css: str) -> str: return re.sub(r"/\*.*?\*/", "", css, flags=re.S) -def test_voice_theme_has_no_legacy_gradients(): +def test_voice_theme_uses_layered_gradients(): css = strip_css_comments((ROOT / "AI" / "ai.css").read_text()) - assert "linear-gradient" not in css - assert "backdrop-filter" not in css + assert "body[data-app-state='experience'] {" in css + assert "radial-gradient" in css + assert "linear-gradient" in css + assert "backdrop-filter" in css -def test_experience_background_is_flat_black(): +def test_experience_background_uses_dark_gradient(): css = (ROOT / "AI" / "ai.css").read_text() - assert "body[data-app-state='experience'] {" in css - assert "background: #000000;" in css + assert "background: radial-gradient" in css + assert "#020617" in css + assert "#01030f" in css -def test_voice_stage_uses_transparent_shell(): +def test_voice_stage_has_glass_shell(): css = (ROOT / "AI" / "ai.css").read_text() - assert ".voice-stage" in css - assert "background: transparent;" in css - assert "border: none;" in css + 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 "border-radius" in block + assert "border: 1px solid" in block -def test_root_style_is_single_tone(): +def test_root_style_defines_gradient_theme(): css = strip_css_comments((ROOT / "style.css").read_text()) - assert "--background-color: #000000;" in css - assert "background: var(--background-color);" in css - assert "linear-gradient" not in css + assert "--background-gradient" in css + assert "background: var(--background-gradient" in css + assert "--surface-color" in css + assert "--surface-highlight" in css