From a4b3a8f7fefb8c7f9e3832f50800adb7f9774257 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Thu, 12 Mar 2026 09:44:38 +0800
Subject: [PATCH] Switch ambient background to radial gradients + glassmorphism
 cards

Blurred circle approach was invisible on near-black backgrounds.
Use radial-gradient orbs at 25%/15% opacity instead, with semi-transparent
cards (backdrop-filter: blur) so the ambient effect shows through.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/dashboard/DashboardAmbient.tsx | 28 ++++++++-----------
 .../components/dashboard/DashboardPage.tsx    |  2 +-
 frontend/src/index.css                        |  7 +++++
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/dashboard/DashboardAmbient.tsx b/frontend/src/components/dashboard/DashboardAmbient.tsx
index 76aa2b8..a99ab4e 100644
--- a/frontend/src/components/dashboard/DashboardAmbient.tsx
+++ b/frontend/src/components/dashboard/DashboardAmbient.tsx
@@ -1,30 +1,26 @@
 /**
- * Muted ambient background for the dashboard.
- * Two accent-colored drifting orbs at very low opacity — adds depth
- * and movement without distracting from content. Reuses the same
- * drift keyframes as the login AmbientBackground but at ~25% opacity.
+ * Ambient background effect for the dashboard.
  *
- * Also renders a noise texture and vignette overlay for tactile depth.
+ * Uses CSS radial gradients on a full-size div with animated position shifting.
+ * The accent color is read from CSS custom properties so it works with any theme.
+ *
+ * Also renders a noise texture for tactile depth and a radial vignette
+ * to darken edges and draw focus to center content.
  */
 export default function DashboardAmbient() {
   return (
-    <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden" aria-hidden="true">
-      {/* Primary orb — top-left drift */}
+    <div className="pointer-events-none absolute inset-0 z-0" aria-hidden="true">
+      {/* Animated gradient orbs — position shifts via CSS animation */}
       <div
-        className="absolute h-[600px] w-[600px] rounded-full opacity-[0.12] blur-[120px] animate-drift-1"
+        className="absolute inset-0 animate-drift-1"
         style={{
-          background: 'radial-gradient(circle, hsl(var(--accent-color)) 0%, transparent 70%)',
-          top: '-5%',
-          left: '-10%',
+          background: 'radial-gradient(ellipse 70% 55% at 10% 10%, hsl(var(--accent-color) / 0.25) 0%, transparent 55%)',
         }}
       />
-      {/* Secondary orb — bottom-right drift */}
       <div
-        className="absolute h-[450px] w-[450px] rounded-full opacity-[0.07] blur-[120px] animate-drift-2"
+        className="absolute inset-0 animate-drift-2"
         style={{
-          background: 'radial-gradient(circle, hsl(var(--accent-color)) 0%, transparent 70%)',
-          bottom: '5%',
-          right: '-5%',
+          background: 'radial-gradient(ellipse 55% 45% at 85% 85%, hsl(var(--accent-color) / 0.15) 0%, transparent 55%)',
         }}
       />
       {/* Noise texture */}
diff --git a/frontend/src/components/dashboard/DashboardPage.tsx b/frontend/src/components/dashboard/DashboardPage.tsx
index 381e5a8..79aca90 100644
--- a/frontend/src/components/dashboard/DashboardPage.tsx
+++ b/frontend/src/components/dashboard/DashboardPage.tsx
@@ -165,7 +165,7 @@ export default function DashboardPage() {
     : null;
 
   return (
-    <div className="flex flex-col h-full relative">
+    <div className="flex flex-col h-full relative dashboard-glass">
       <DashboardAmbient />
       {/* Header — greeting + date + quick add */}
       <div className="relative z-10 px-4 md:px-6 pt-4 sm:pt-6 pb-1 sm:pb-2 flex items-center justify-between">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 30ab049..575407b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -457,6 +457,13 @@ form[data-submitted] input:invalid + button {
 
 /* ── Dashboard ambient layers ── */
 
+/* Dashboard glassmorphism — cards become semi-transparent to let ambient show through */
+.dashboard-glass .bg-card {
+  background-color: hsl(0 0% 5% / 0.80) !important;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
 /* Card breathing glow — data-aware "alive" pulse for urgent cards */
 @keyframes card-breathe {
   0%, 100% { box-shadow: 0 0 0 0 hsl(var(--accent-color) / 0.05); }