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

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
Conversation 3 Commits 1 Files changed 7 +68 -7
7 changed files with 68 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/CardsPageView.js
View file

@ -49,7 +49,7 @@ export default function CardsPageView(props) {
return (
<>
{/* Header */}
<div className="p-4 sm:p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
<div className="page-header-glass p-4 sm:p-6">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl sm:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>

2
components/CollectionPageView.js
View file

@ -78,7 +78,7 @@ export default function CollectionPageView(props) {
<>
<div className="min-h-screen" style={{ backgroundColor: 'var(--bg-primary)' }}>
{/* Header */}
<div className="p-6 border-b" style={{ backgroundColor: 'var(--bg-secondary)', borderColor: 'var(--border)' }}>
<div className="page-header-glass p-6">
<div className="flex items-center justify-between mb-6">
{/* Back button */}
<div className="flex items-center">

2
components/CollectionsPageView.js
View file

@ -48,7 +48,7 @@ export default function CollectionsPageView(props) {
return (
<>
{/* Header */}
<div className="p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
<div className="page-header-glass p-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold" style={{ color: 'var(--text-primary)' }}>

2
pages/community/collections.js
View file

@ -198,7 +198,7 @@ export default function CommunityCollections() {
return (
<Layout user={user}>
{/* Header */}
<div className="p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
<div className="page-header-glass p-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold" style={{ color: 'var(--text-primary)' }}>

2
pages/dashboard.js
View file

@ -80,7 +80,7 @@ export default function Dashboard() {
return (
<Layout user={user}>
{/* Header */}
<div className="p-4 sm:p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
<div className="page-header-glass p-4 sm:p-6">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl sm:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>

2
pages/my-cards.js
View file

@ -262,7 +262,7 @@ export default function MyCards() {
return (
<Layout user={user}>
{/* Header */}
<div className="p-4 sm:p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
<div className="page-header-glass p-4 sm:p-6">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl sm:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>

63
styles/globals.css
View file

@ -188,17 +188,78 @@ body {
}
}
/* Apply theme colors */
/* Apply theme colors.
The hearth gradient: a soft warm wash that gives glass surfaces a real
substrate to blur and distort. Without this the page bg is flat warm-
white and the blur is functionally invisible (the chief reason the
first 3 redesign PRs landed but the user said "still looks the same").
Two layers:
- A radial ember glow biased to the bottom-left (the seat of a fire)
- A soft vertical gradient from cooler-top to warmer-bottom
Fixed attachment so scrolling content slides over the gradient rather
than pulling it along — that's what gives glass surfaces their
parallax-blur behavior. */
body {
background-color: var(--bg-primary-light);
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;
color: var(--text-primary-light);
}
[data-theme="dark"] 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%,
transparent 70%
),
radial-gradient(
ellipse 60% 50% at 85% 0%,
rgba(124, 58, 237, 0.08) 0%,
transparent 60%
),
linear-gradient(
180deg,
rgba(26, 15, 10, 1) 0%,
rgba(38, 22, 14, 1) 100%
);
background-attachment: fixed;
color: var(--text-primary-dark);
}
/* .page-header-glass — the recurring "page header strip" pattern
(full-bleed band at the top of authenticated pages: dashboard, my-
cards, cards, collections, community/collections, collection/[id],
scanner). Uses a higher-tint surface than .glass-panel because the
strip spans the whole content width and needs more visual weight,
but inherits the same rim + blur recipe. Pairs with `border-bottom:
1px solid var(--border)` for the separator line below. */
.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);
}
/* Card Scanner Animations */
@keyframes pulse {
0%, 100% {