feat(design-system): hearth body gradient + glass page header strips #100

Merged

varutasu merged 1 commit from hearth-bg-and-page-header-glass into main

2026-06-04 10:12:25 -04:00

varutasu commented

2026-06-04 09:56:11 -04:00

(Migrated from github.com)

Why this exists

You reported on /my-cards (local dev build) that "nothing has changed" after PRs #97 / #98 / #99. CDP diagnostic on both the production page and your local build found the actual reasons the design vibe still felt flat:

Body bg is a flat warm-white (#fefcf8). Glass surfaces sitting on a same-hue solid have nothing to blur. The backdrop-filter renders correctly but produces no visible distortion — the panel reads as a 68%-alpha rectangle over a 100%-identical-color background, which is visually indistinguishable from a solid card. The reason the "glass" looked like a flat panel was never the panel CSS — it was the canvas underneath.
Pages with populated data have zero .glass-panel elements after #97's sweep. Your /my-cards (2 cards) renders no glass at all because the one panel I migrated was the empty-state CTA, which never appears when you have cards. /dashboard had 5 glass surfaces but its visible page header strip stayed flat per my earlier (wrong) "page headers stay solid" call. That call was right only if there's a topbar to stack against — this layout has a sidebar, so the page header strip is the only horizontal chrome and absolutely should be glass.

What this PR does

A. Hearth gradient on body

A soft warm wash that gives glass surfaces a real substrate to blur and distort. Two radial glows + one vertical gradient, all background-attachment: fixed so scrolling content slides OVER the gradient (the parallax that makes glass feel real):

```css
body {
background-image:
radial-gradient(ellipse 80% 60% at 15% 100%,
rgba(255,128,0,0.08) 0%, rgba(255,128,0,0.02) 40%, transparent 70%),
radial-gradient(ellipse 60% 50% at 85% 0%,
rgba(255,171,64,0.06) 0%, transparent 60%),
linear-gradient(180deg, rgba(254,252,248,1) 0%, rgba(252,246,235,1) 100%);
background-attachment: fixed;
}
```

Dark theme uses purple instead of gold for the second radial. All alphas low (8% / 6% in light; 16% / 8% in dark) — readable, not garish.

B. `.page-header-glass` utility + sweep

New utility for the recurring "page header strip" pattern. Higher tint than .glass-panel (the strip spans full content width and needs more visual weight), same blur + rim-light + a 1px shadow as the bottom separator:

```css
.page-header-glass {
background: var(--glass-surface-high);
backdrop-filter: blur(20px) saturate(180%);
box-shadow: var(--rim-light-inner), 0 1px 0 var(--border);
}
```

Mechanically swept to 6 page header strips:

pages/my-cards.js
pages/dashboard.js
pages/community/collections.js
components/CardsPageView.js (used by /cards)
components/CollectionsPageView.js (used by /collections)
components/CollectionPageView.js (used by /collection/[id])

Expected visual outcome

On every authenticated page, you'll now see:

A subtle warm radial glow at the bottom-left of the viewport (visible behind the card grid as soft amber wash) and a fainter gold glow top-right
The page header strip becomes a floating translucent band with a hairline white highlight on its top edge, separated from the body by a 1px line, with the gradient visibly bleeding through
The existing .glass-panel surfaces (#97's 18 cards) now actually look like glass because they have a non-uniform substrate to distort

Tests

npm run build — green, compiled CSS verified (background, backdrop-filter both prefixed + unprefixed, chained box-shadow all present)
npm run lint — clean
npm run test:run — 104/104 vitest pass

Test plan

CI green
After promote, hard-refresh `deckhearth.com/my-cards` — should now show a warm gradient bg + floating glass page-header strip
Same for `/dashboard`, `/cards`, `/collections`, `/community/collections`, `/collection/[id]`
Dark mode: gradient + headers still legible

Made with Cursor

## Why this exists You reported on /my-cards (local dev build) that "nothing has changed" after PRs #97 / #98 / #99. CDP diagnostic on both the production page and your local build found the actual reasons the design vibe still felt flat: 1. **Body bg is a flat warm-white (#fefcf8).** Glass surfaces sitting on a same-hue solid have nothing to blur. The backdrop-filter renders correctly but produces no visible distortion — the panel reads as a 68%-alpha rectangle over a 100%-identical-color background, which is visually indistinguishable from a solid card. The reason the "glass" looked like a flat panel was never the panel CSS — it was the canvas underneath. 2. **Pages with populated data have zero `.glass-panel` elements after #97's sweep.** Your /my-cards (2 cards) renders no glass at all because the one panel I migrated was the empty-state CTA, which never appears when you have cards. /dashboard had 5 glass surfaces but its visible page header strip stayed flat per my earlier (wrong) "page headers stay solid" call. That call was right only if there's a topbar to stack against — this layout has a *sidebar*, so the page header strip is the only horizontal chrome and absolutely should be glass. ## What this PR does ### A. Hearth gradient on body A soft warm wash that gives glass surfaces a real substrate to blur and distort. Two radial glows + one vertical gradient, all `background-attachment: fixed` so scrolling content slides OVER the gradient (the parallax that makes glass feel real): \`\`\`css body { background-image: radial-gradient(ellipse 80% 60% at 15% 100%, rgba(255,128,0,0.08) 0%, rgba(255,128,0,0.02) 40%, transparent 70%), radial-gradient(ellipse 60% 50% at 85% 0%, rgba(255,171,64,0.06) 0%, transparent 60%), linear-gradient(180deg, rgba(254,252,248,1) 0%, rgba(252,246,235,1) 100%); background-attachment: fixed; } \`\`\` Dark theme uses purple instead of gold for the second radial. All alphas low (8% / 6% in light; 16% / 8% in dark) — readable, not garish. ### B. `.page-header-glass` utility + sweep New utility for the recurring "page header strip" pattern. Higher tint than `.glass-panel` (the strip spans full content width and needs more visual weight), same blur + rim-light + a 1px shadow as the bottom separator: \`\`\`css .page-header-glass { background: var(--glass-surface-high); backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--rim-light-inner), 0 1px 0 var(--border); } \`\`\` Mechanically swept to 6 page header strips: - `pages/my-cards.js` - `pages/dashboard.js` - `pages/community/collections.js` - `components/CardsPageView.js` (used by `/cards`) - `components/CollectionsPageView.js` (used by `/collections`) - `components/CollectionPageView.js` (used by `/collection/[id]`) ## Expected visual outcome On every authenticated page, you'll now see: - A subtle warm radial glow at the bottom-left of the viewport (visible behind the card grid as soft amber wash) and a fainter gold glow top-right - The page header strip becomes a floating translucent band with a hairline white highlight on its top edge, separated from the body by a 1px line, with the gradient visibly bleeding through - The existing `.glass-panel` surfaces (#97's 18 cards) now actually look like glass because they have a non-uniform substrate to distort ## Tests - `npm run build` — green, compiled CSS verified (background, backdrop-filter both prefixed + unprefixed, chained box-shadow all present) - `npm run lint` — clean - `npm run test:run` — 104/104 vitest pass ## Test plan - [ ] CI green - [ ] After promote, hard-refresh \`deckhearth.com/my-cards\` — should now show a warm gradient bg + floating glass page-header strip - [ ] Same for \`/dashboard\`, \`/cards\`, \`/collections\`, \`/community/collections\`, \`/collection/[id]\` - [ ] Dark mode: gradient + headers still legible Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-04 09:56:13 -04:00

(Migrated from github.com)

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tcg-vault	Ready	Preview, Comment	Jun 4, 2026 1:56pm

[vc]: #JJmPxQ9EsFjTEgAn5YttmcvGBCP0ykkuOnApK6lqynQ=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMvdGNnLXZhdWx0LzhENXNiRHJLWHlrUzJTUnNLSzNVYTIyaEI2dlYiLCJwcmV2aWV3VXJsIjoidGNnLXZhdWx0LWdpdC1oZWFydGgtYmctYW5kLTgxOGQyMS1yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0Y2ctdmF1bHQtZ2l0LWhlYXJ0aC1iZy1hbmQtODE4ZDIxLXJhbmRhbGwtc3RpbGx3ZWxscy1wcm9qZWN0cy52ZXJjZWwuYXBwIn0sInJvb3REaXJlY3RvcnkiOm51bGx9XSwicmVxdWVzdFJldmlld1VybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS92ZXJjZWwtYWdlbnQvcmVxdWVzdC1yZXZpZXc/b3duZXI9dmFydXRhc3UmcmVwbz10Y2ctdmF1bHQmcHI9MTAwIn0= The latest updates on your projects. Learn more about [Vercel for GitHub](https://vercel.link/github-learn-more). | Project | Deployment | Actions | Updated (UTC) | | :--- | :----- | :------ | :------ | | [tcg-vault](https://vercel.com/randall-stillwells-projects/tcg-vault) | ![Ready](https://vercel.com/static/status/ready.svg) [Ready](https://vercel.com/randall-stillwells-projects/tcg-vault/8D5sbDrKXykS2SRsKK3Ua22hB6vV) | [Preview](https://tcg-vault-git-hearth-bg-and-818d21-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-hearth-bg-and-818d21-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 1:56pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=100" rel="noreferrer"><picture><source media="(prefers-color-scheme: dark)" srcset="https://agents-vade-review.vercel.sh/request-review-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://agents-vade-review.vercel.sh/request-review-light.svg"><img src="https://agents-vade-review.vercel.sh/request-review-light.svg" alt="Request Review"></picture></a>

github-actions[bot] commented

2026-06-04 09:56:27 -04:00

(Migrated from github.com)

Pipeline Health

Build + CI gates

Gate	Status
Vercel build (Preview)	✅ pass
CI: Lint	✅ pass
CI: Schema map fresh	❌ skipped
Preview smoke	✅ pass
Visual diff	✅ pass

Build runs on Vercel; this CI runs lint and schema-map drift only (no duplicate build).

Role reports

Role	Status
Reviewer report	⏳ pending
A11y audit	⏳ pending
Design system audit	⏳ pending

See individual comments above for details. This rollup updates automatically.

## Pipeline Health ### Build + CI gates | Gate | Status | | --- | --- | | Vercel build (Preview) | ✅ pass | | CI: Lint | ✅ pass | | CI: Schema map fresh | ❌ skipped | | Preview smoke | ✅ pass | | Visual diff | ✅ pass | _Build runs on Vercel; this CI runs lint and schema-map drift only (no duplicate build)._ ### Role reports | Role | Status | | --- | --- | | Reviewer report | ⏳ pending | | A11y audit | ⏳ pending | | Design system audit | ⏳ pending | See individual comments above for details. This rollup updates automatically.

github-actions[bot] commented

2026-06-04 09:57:30 -04:00

(Migrated from github.com)

Visual Diff

Screenshots and diffs uploaded as artifacts: view run

If intentional changes: update snapshots locally with npx playwright test --project=visual --update-snapshots and commit.

## Visual Diff Screenshots and diffs uploaded as artifacts: [view run](https://github.com/varutasu/tcg-vault/actions/runs/26956335258) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.