From f688b2b343dada78a288aa3c696ea63bbbd12511 Mon Sep 17 00:00:00 2001
From: jules <cloudtech@juleslive.net>
Date: Wed, 10 Jun 2026 13:47:54 +1000
Subject: [PATCH] Add calm background variant (body[data-bg=calm])
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Full-strength drift floods short consumer pages — the white glass
surfaces cluster and the app reads as a card floating on a poster
(diagnosed on me.sky-ai.com). Calm keeps the same hue story at about
half the stain: corner gradients ~45% alpha, drift blobs at 0.4. Dark
mode keeps its standard gradients (already calm); only the drift layer
eases to 0.7.

Opt-in per consumer app; drift stays the default.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 theme.css | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/theme.css b/theme.css
index bb30969..49cf7c2 100644
--- a/theme.css
+++ b/theme.css
@@ -499,6 +499,35 @@
             radial-gradient(ellipse 42% 34% at 16% 80%, oklch(0.30 0.07 145 / 0.45), transparent 55%);
     }
 
+    /*
+     * ── Calm variant ── opt-in via body[data-bg="calm"]. The same hue
+     * story at roughly half the stain: corner gradients drop to ~45%
+     * alpha and the drift layer dims to match. For consumer surfaces
+     * (me.sky-ai.com) where full-strength drift floods short pages and
+     * the app reads as a white card floating on a poster. Dark mode is
+     * already calm — it keeps the standard dark gradients, only the
+     * drift layer eases.
+     */
+    body[data-bg="calm"] {
+        background-image:
+            radial-gradient(ellipse 80% 60% at 12% 8%, oklch(0.92 0.09 295 / 0.32), transparent 60%),
+            radial-gradient(ellipse 70% 60% at 88% 14%, oklch(0.93 0.1 350 / 0.30), transparent 55%),
+            radial-gradient(ellipse 80% 60% at 92% 88%, oklch(0.93 0.1 200 / 0.30), transparent 60%),
+            radial-gradient(ellipse 70% 60% at 8% 92%, oklch(0.94 0.09 145 / 0.28), transparent 55%),
+            linear-gradient(180deg, oklch(0.985 0.012 295), oklch(0.97 0.015 320));
+    }
+    html.dark body[data-bg="calm"] {
+        background-image:
+            radial-gradient(ellipse 70% 55% at 10% 8%,  oklch(0.32 0.09 295 / 0.65), transparent 60%),
+            radial-gradient(ellipse 60% 50% at 90% 14%, oklch(0.30 0.09 340 / 0.60), transparent 55%),
+            radial-gradient(ellipse 70% 55% at 92% 90%, oklch(0.28 0.07 200 / 0.55), transparent 60%),
+            radial-gradient(ellipse 60% 50% at 8% 92%,  oklch(0.30 0.06 145 / 0.50), transparent 55%),
+            linear-gradient(180deg, oklch(0.10 0.012 285), oklch(0.08 0.018 295));
+    }
+    body[data-bg="calm"] [data-slot="aurora-field"] { display: block; }
+    body[data-bg="calm"] .aurora-blob { opacity: 0.4; }
+    html.dark body[data-bg="calm"] .aurora-blob { opacity: 0.7; }
+
     @keyframes prism-drift-a {
         0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
         33%      { transform: translate3d(5%, -3%, 0) rotate(10deg) scale(1.07); }