rstillwell/deckhearth
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

feat(design-system): redesign v2 #6 — card grid outer-glow #106

Merged
varutasu merged 1 commit from redesign-v2-6-card-outer-glow into main 2026-06-04 12:14:54 -04:00
Conversation 3 Commits 1 Files changed 2 +38 -1
2 changed files with 38 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit c9fa0b219d - Show all commits

2
components/CardItem.js
View file

@ -287,7 +287,7 @@ export default function CardItem({
// Grid view // Grid view
return ( 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 */} {/* Main Card Container */}
<div <div
className={`relative rounded-xl border-2 transition-all duration-200 overflow-hidden cursor-pointer ${ className={`relative rounded-xl border-2 transition-all duration-200 overflow-hidden cursor-pointer ${

37
styles/globals.css
View file

@ -444,6 +444,43 @@ body {
transform: translateX(4px); 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). /* 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 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. pill with an ember-orange gradient fill and a soft outer ember glow.