From e27319908db179045de6b48023aab70e3c6346da Mon Sep 17 00:00:00 2001
From: KoalaDev <6156589+Shik3i@users.noreply.github.com>
Date: Sun, 12 Jul 2026 05:48:27 +0200
Subject: [PATCH] refactor(website): apply day/night sky palette variables to
 sync theater illustration and video canvas

---
 website/styles/demo.css            | 15 ++++++++++-----
 website/styles/hero.css            |  9 +++++++++
 website/styles/landing-primary.css |  4 +++-
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/website/styles/demo.css b/website/styles/demo.css
index 2b652ef..d54346d 100644
--- a/website/styles/demo.css
+++ b/website/styles/demo.css
@@ -687,17 +687,22 @@ html.theme-light .hero-demo-scene .demo-video::after {
     height: 100%;
 }
 
-.hero-demo-scene .film-stars { fill: var(--demo-stars) !important; }
+.hero-demo-scene .film-stars,
+.illus-sync-theater .film-stars { fill: var(--demo-stars) !important; }
 .hero-demo-scene .film-clouds { fill: var(--demo-stars) !important; }
 .hero-demo-scene .film-mist-scroll { fill: var(--demo-stars) !important; }
 .hero-demo-scene .film-shooting-star { stroke: var(--demo-stars) !important; }
-.hero-demo-scene .film-moon {
+.hero-demo-scene .film-moon,
+.illus-sync-theater .film-moon {
     fill: var(--demo-moon) !important;
     filter: drop-shadow(0 0 6px var(--demo-moon));
 }
-.hero-demo-scene .film-mtn-scroll { fill: var(--demo-mountain) !important; }
-.hero-demo-scene .film-mid-scroll > * { fill: var(--demo-midground) !important; }
-.hero-demo-scene .film-fore-scroll > * { fill: var(--demo-foreground) !important; }
+.hero-demo-scene .film-mtn-scroll,
+.illus-sync-theater .film-mtn-scroll { fill: var(--demo-mountain) !important; }
+.hero-demo-scene .film-mid-scroll > *,
+.illus-sync-theater .film-mid-scroll > * { fill: var(--demo-midground) !important; }
+.hero-demo-scene .film-fore-scroll > *,
+.illus-sync-theater .film-fore-scroll > * { fill: var(--demo-foreground) !important; }
 
 /* Stars: staggered twinkle so the sky feels alive */
 .film-star {
diff --git a/website/styles/hero.css b/website/styles/hero.css
index df9651d..dad4cb6 100644
--- a/website/styles/hero.css
+++ b/website/styles/hero.css
@@ -712,6 +712,12 @@ html.theme-light .koala-speech-bubble::after {
    put white text on a colour get a darker shade (these beat inline styles). */
 .hero-demo-scene {
     --accent: oklch(0.80 0.10 150);
+}
+/* The step-3 sync theater reuses the film SVG and must follow the same
+   day/night palette; --accent stays hero-only (its cards sit on the page
+   surface, not on the demo sky). */
+.hero-demo-scene,
+.illus-sync-theater {
     --demo-sky-top: oklch(0.22 0.055 152);
     --demo-sky-mid: oklch(0.145 0.035 150);
     --demo-sky-bottom: oklch(0.075 0.018 145);
@@ -746,6 +752,9 @@ html.theme-light .koala-speech-bubble::after {
 
 html.theme-light .hero-demo-scene {
     --accent: oklch(0.60 0.12 150);
+}
+html.theme-light .hero-demo-scene,
+html.theme-light .illus-sync-theater {
     --demo-sky-top: oklch(0.86 0.085 78);
     --demo-sky-mid: oklch(0.76 0.095 112);
     --demo-sky-bottom: oklch(0.54 0.10 150);
diff --git a/website/styles/landing-primary.css b/website/styles/landing-primary.css
index 677b3e1..8d4fc6c 100644
--- a/website/styles/landing-primary.css
+++ b/website/styles/landing-primary.css
@@ -847,7 +847,9 @@
 .player-video-canvas {
     height: 70px;
     border-radius: 8px;
-    background: linear-gradient(135deg, oklch(0.20 0.04 145), oklch(0.22 0.05 45));
+    /* Sky behind the film SVG — --demo-* flips day/night with the theme
+       (defined on .illus-sync-theater in hero.css) */
+    background: linear-gradient(160deg, var(--demo-sky-top) 0%, var(--demo-sky-mid) 52%, var(--demo-sky-bottom) 100%);
     position: relative;
     overflow: hidden;
     display: flex;