From 70506b1f13c6b9894b90d827a14b1625d12ff083 Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Thu, 4 Jun 2026 09:34:46 -0500
Subject: [PATCH] fix(design-system): unblock body hearth gradient + boost
 intensity
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CDP diagnostic on deckhearth.com/dashboard after PR #100 found that
the body gradient was being applied but completely invisible. Root
cause: Layout.js line 610's root flex container had

  style={{ backgroundColor: 'var(--bg-primary)' }}

That paints an opaque warm-white over the entire viewport, directly
on top of the body's hearth gradient. The gradient was painting and
the body element confirmed it via getComputedStyle, but no pixel of
it reached the screen because the 1118x984 Layout root sat opaquely
above it.

Fix part 1: remove the backgroundColor from Layout's root <div>. The
desktop sidebar (lines 738-744) and the mobile drawer (lines 630-640)
already have their own translucent glass backgrounds via
var(--glass-surface-mid) + backdrop-filter, so they don't depend on
the parent. The main content area (line 822) is intentionally
transparent. Removing the opaque parent lets the body gradient show
through everything except the explicit glass surfaces.

Fix part 2: boost gradient intensity. The 8%/6% alpha radials from
PR #100 are technically there but visually undetectable. Bumped to:
  - 28% ember at bottom-left (the seat of the fire)
  - 18% ember at bottom-right (keeps wide displays from feeling
    lopsided)
  - 16% gold top-right (smoke catching last light)
And added a third linear-gradient color stop so the warmth ramps
visibly from top to bottom rather than being a flat 2-step.

Together these make the "fireplace warmth" actually perceptible,
which gives every glass surface a non-uniform substrate to blur —
finally fulfilling the original "Liquid Glass over hearth" brief
that PRs #97/#98/#99/#100 each got partway toward.

Lint + vitest + build all green locally.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/Layout.js |  2 +-
 styles/globals.css   | 48 ++++++++++++++++++++++++++++++--------------
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/components/Layout.js b/components/Layout.js
index 818d5a8..7c6c017 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -607,7 +607,7 @@ export default function Layout({ children, user = null, showSearch = false }) {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   return (
-    <div className="flex h-screen" style={{ backgroundColor: 'var(--bg-primary)' }}>
+    <div className="flex h-screen">
       {/* Mobile Navigation - Bottom bar for mobile */}
       <MobileNavigation 
         onMenuOpen={() => setIsMobileMenuOpen(true)} 
diff --git a/styles/globals.css b/styles/globals.css
index 03a604a..fe0f71d 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -202,21 +202,34 @@ body {
 body {
   background-color: var(--bg-primary-light);
   background-image:
+    /* Bright ember pool, bottom-left — the "seat of the fire". */
     radial-gradient(
-      ellipse 80% 60% at 15% 100%,
-      rgba(255, 128, 0, 0.08) 0%,
-      rgba(255, 128, 0, 0.02) 40%,
-      transparent 70%
+      ellipse 70% 50% at 12% 105%,
+      rgba(255, 100, 0, 0.28) 0%,
+      rgba(255, 128, 0, 0.14) 30%,
+      rgba(255, 171, 64, 0.04) 60%,
+      transparent 80%
     ),
+    /* Secondary ember, bottom-right — keeps the warmth from feeling
+       lopsided on wide displays. */
     radial-gradient(
-      ellipse 60% 50% at 85% 0%,
-      rgba(255, 171, 64, 0.06) 0%,
-      transparent 60%
+      ellipse 55% 45% at 95% 100%,
+      rgba(255, 140, 30, 0.18) 0%,
+      rgba(255, 171, 64, 0.05) 50%,
+      transparent 75%
     ),
+    /* Soft gold glow, top-right — the "smoke catching last light". */
+    radial-gradient(
+      ellipse 55% 45% at 90% -5%,
+      rgba(255, 171, 64, 0.16) 0%,
+      transparent 65%
+    ),
+    /* Base wash: cooler at top, warmer at bottom for fireplace ambient. */
     linear-gradient(
       180deg,
       rgba(254, 252, 248, 1) 0%,
-      rgba(252, 246, 235, 1) 100%
+      rgba(252, 244, 230, 1) 60%,
+      rgba(250, 238, 220, 1) 100%
     );
   background-attachment: fixed;
   color: var(--text-primary-light);
@@ -226,20 +239,25 @@ body {
   background-color: var(--bg-primary-dark);
   background-image:
     radial-gradient(
-      ellipse 80% 60% at 15% 100%,
-      rgba(255, 128, 0, 0.16) 0%,
-      rgba(255, 128, 0, 0.04) 40%,
+      ellipse 70% 50% at 12% 105%,
+      rgba(255, 100, 0, 0.32) 0%,
+      rgba(255, 128, 0, 0.16) 30%,
       transparent 70%
     ),
     radial-gradient(
-      ellipse 60% 50% at 85% 0%,
-      rgba(124, 58, 237, 0.08) 0%,
-      transparent 60%
+      ellipse 55% 45% at 95% 100%,
+      rgba(255, 140, 30, 0.18) 0%,
+      transparent 70%
+    ),
+    radial-gradient(
+      ellipse 55% 45% at 90% -5%,
+      rgba(124, 58, 237, 0.14) 0%,
+      transparent 65%
     ),
     linear-gradient(
       180deg,
       rgba(26, 15, 10, 1) 0%,
-      rgba(38, 22, 14, 1) 100%
+      rgba(42, 24, 16, 1) 100%
     );
   background-attachment: fixed;
   color: var(--text-primary-dark);
-- 
2.45.2