From ea21b01ed637bd688887e2d039248f12eda2947f Mon Sep 17 00:00:00 2001
From: varutasu <104105839+varutasu@users.noreply.github.com>
Date: Thu, 4 Jun 2026 11:14:53 -0500
Subject: [PATCH] =?UTF-8?q?feat(design-system):=20redesign=20v2=20#6=20?=
 =?UTF-8?q?=E2=80=94=20card=20grid=20outer-glow=20(#106)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sub-convoy #6 from .convoys/redesign-v2-from-mockups.md. The
operator mockup shows TCG card thumbnails in the Featured
Collection grid with a soft warm glow emanating around each card,
suggesting "light cast onto cards" — the hearth metaphor at the
card level.

What ships:
- styles/globals.css: new .card-grid-outer-glow utility with a
  single cheap box-shadow (warm orange at 18% alpha on light /
  28% on dark) + a slightly bolder hover state (32%/50%). Honors
  the AGENTS.md performance budget ("card grids may NOT use glass
  on every card item") — this is a single-axis shadow, not a
  backdrop-filter.
- components/CardItem.js: outer .card-item-container picks up the
  new class. The rarity-color glow on the inner chrome is
  UNTOUCHED (umbrella § 5 #6 explicit guard).

Tests:
- npm run test:run: 113/113
- npm run lint: clean
- npm run build: green

Next: #7 (dashboard rebuild) + #8 (right-rail Spotlight).

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/CardItem.js |  2 +-
 styles/globals.css     | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/components/CardItem.js b/components/CardItem.js
index 7781125..4ed31ad 100644
--- a/components/CardItem.js
+++ b/components/CardItem.js
@@ -287,7 +287,7 @@ export default function CardItem({
 
   // Grid view
   return (
-    <div className="card-item-container relative group bg-transparent rounded-xl transition-all duration-150 overflow-visible transform hover:scale-102 hover:z-10">
+    <div className="card-item-container card-grid-outer-glow relative group bg-transparent rounded-xl transition-all duration-150 overflow-visible transform hover:scale-102 hover:z-10">
       {/* Main Card Container */}
       <div 
         className={`relative rounded-xl border-2 transition-all duration-200 overflow-hidden cursor-pointer ${
diff --git a/styles/globals.css b/styles/globals.css
index c81c912..822a9f8 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -444,6 +444,43 @@ body {
   transform: translateX(4px);
 }
 
+/* Card grid outer-glow (redesign-v2 sub-convoy #6, 2026-06-04).
+   The operator's mockup shows TCG card thumbnails in the Featured
+   Collection grid with a soft warm glow emanating around each card,
+   suggesting "light cast onto the cards" — the hearth metaphor at
+   the card level. Applied to the outermost CardItem container so it
+   sits OUTSIDE the rarity-color glow (which lives on the card's
+   inner chrome). Single cheap box-shadow per card; safe on long
+   scroll lists where stacked filters would jank.
+   AGENTS.md performance budget: "card grids may NOT use glass on
+   every card item" — this is a single-axis shadow, not a backdrop-
+   filter, so it stays well under that budget. */
+.card-grid-outer-glow {
+  box-shadow:
+    0 0 24px -4px rgba(255, 128, 0, 0.18),
+    0 4px 12px -2px rgba(0, 0, 0, 0.10);
+  transition: box-shadow var(--motion-duration-default)
+    var(--motion-ease-out);
+}
+
+.card-grid-outer-glow:hover {
+  box-shadow:
+    0 0 32px -2px rgba(255, 128, 0, 0.32),
+    0 8px 16px -4px rgba(0, 0, 0, 0.15);
+}
+
+[data-theme="dark"] .card-grid-outer-glow {
+  box-shadow:
+    0 0 28px -4px rgba(255, 110, 30, 0.28),
+    0 4px 12px -2px rgba(0, 0, 0, 0.40);
+}
+
+[data-theme="dark"] .card-grid-outer-glow:hover {
+  box-shadow:
+    0 0 40px -2px rgba(255, 110, 30, 0.50),
+    0 8px 16px -4px rgba(0, 0, 0, 0.50);
+}
+
 /* Sidebar active-pill (redesign-v2 sub-convoy #2, 2026-06-04).
    The operator's mockup shows the active nav item as a bold rounded-2xl
    pill with an ember-orange gradient fill and a soft outer ember glow.