0554c6a067
CDP diagnostic on deckhearth.com/dashboard after PR #100 found that the body gradient was being applied but completely invisible. Root cause: Layout.js line 610's root flex container had style={{ backgroundColor: 'var(--bg-primary)' }} That paints an opaque warm-white over the entire viewport, directly on top of the body's hearth gradient. The gradient was painting and the body element confirmed it via getComputedStyle, but no pixel of it reached the screen because the 1118x984 Layout root sat opaquely above it. Fix part 1: remove the backgroundColor from Layout's root <div>. The desktop sidebar (lines 738-744) and the mobile drawer (lines 630-640) already have their own translucent glass backgrounds via var(--glass-surface-mid) + backdrop-filter, so they don't depend on the parent. The main content area (line 822) is intentionally transparent. Removing the opaque parent lets the body gradient show through everything except the explicit glass surfaces. Fix part 2: boost gradient intensity. The 8%/6% alpha radials from PR #100 are technically there but visually undetectable. Bumped to: - 28% ember at bottom-left (the seat of the fire) - 18% ember at bottom-right (keeps wide displays from feeling lopsided) - 16% gold top-right (smoke catching last light) And added a third linear-gradient color stop so the warmth ramps visibly from top to bottom rather than being a flat 2-step. Together these make the "fireplace warmth" actually perceptible, which gives every glass surface a non-uniform substrate to blur — finally fulfilling the original "Liquid Glass over hearth" brief that PRs #97/#98/#99/#100 each got partway toward. Lint + vitest + build all green locally. Co-authored-by: Cursor <cursoragent@cursor.com>
1070 lines
No EOL
31 KiB
CSS
1070 lines
No EOL
31 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Custom styles */
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
|
sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
/* Theme Variables - Deck Hearth Fire-Inspired */
|
|
:root {
|
|
/* Light Theme - Warm Daylight by the Hearth */
|
|
--bg-primary-light: #fefcf8; /* Warm cream, like sunlit stone */
|
|
--bg-secondary-light: #f7f3ed; /* Soft beige, like aged parchment */
|
|
--bg-tertiary-light: #f0e6d6; /* Light wood tone */
|
|
--text-primary-light: #2d1810; /* Dark chocolate brown */
|
|
--text-secondary-light: #5d4037; /* Medium brown, like burnt wood */
|
|
--text-accent-light: #d84315; /* Ember orange */
|
|
--border-light: #e8dcc6; /* Light wood border */
|
|
--shadow-light: 0 4px 6px -1px rgba(45, 24, 16, 0.1);
|
|
--gradient-primary-light: linear-gradient(135deg, #ff6f00 0%, #d84315 100%); /* Fire gradient */
|
|
--gradient-secondary-light: linear-gradient(135deg, #ffab40 0%, #ff6f00 100%); /* Golden flame */
|
|
--accent-flame-light: #ff6f00; /* Bright flame orange */
|
|
--accent-ember-light: #d84315; /* Deep ember red */
|
|
--accent-gold-light: #ffab40; /* Golden flame */
|
|
--accent-wood-light: #8d6e63; /* Rich wood tone */
|
|
--input-bg-light: #fefcf8;
|
|
--input-border-light: #e8dcc6;
|
|
--input-text-light: #2d1810;
|
|
--input-placeholder-light: #5d4037;
|
|
|
|
/* RGB color variables for backdrop-blur effects */
|
|
--bg-primary-rgb: 254, 252, 248;
|
|
--bg-secondary-rgb: 247, 243, 237;
|
|
--bg-tertiary-rgb: 240, 230, 214;
|
|
--accent-ember-rgb: 216, 67, 21; /* RGB version of #d84315 */
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
/* Dark Theme - Cozy Evening by the Fire */
|
|
--bg-primary-dark: #1a0f0a; /* Deep charcoal, like burnt wood */
|
|
--bg-secondary-dark: #2d1b12; /* Rich dark brown, like oak */
|
|
--bg-tertiary-dark: #3d2317; /* Medium brown, like mahogany */
|
|
--text-primary-dark: #fff8f0; /* Warm white, like firelight */
|
|
--text-secondary-dark: #d7c4b0; /* Soft cream, like candlelight */
|
|
--text-accent-dark: #ff8a50; /* Bright flame orange */
|
|
--border-dark: #4a2f1f; /* Dark wood border */
|
|
--shadow-dark: 0 4px 6px -1px rgba(26, 15, 10, 0.4);
|
|
--gradient-primary-dark: linear-gradient(135deg, #ff8a50 0%, #d84315 100%); /* Evening fire */
|
|
--gradient-secondary-dark: linear-gradient(135deg, #ffab40 0%, #ff6f00 100%); /* Golden embers */
|
|
--accent-flame-dark: #ff8a50; /* Bright flame */
|
|
--accent-ember-dark: #d84315; /* Glowing ember */
|
|
--accent-gold-dark: #ffab40; /* Golden glow */
|
|
--accent-wood-dark: #8d6e63; /* Warm wood */
|
|
--input-bg-dark: #2d1b12;
|
|
--input-border-dark: #4a2f1f;
|
|
--input-text-dark: #fff8f0;
|
|
--input-placeholder-dark: #d7c4b0;
|
|
--search-bg-dark: #2d1b12;
|
|
--search-border-dark: #4a2f1f;
|
|
--search-text-dark: #fff8f0;
|
|
--search-placeholder-dark: #d7c4b0;
|
|
|
|
/* RGB color variables for backdrop-blur effects */
|
|
--bg-primary-rgb: 26, 15, 10;
|
|
--bg-secondary-rgb: 45, 27, 18;
|
|
--bg-tertiary-rgb: 61, 35, 23;
|
|
--accent-ember-rgb: 216, 67, 21; /* RGB version of #d84315 */
|
|
}
|
|
|
|
/* ============================================================
|
|
Liquid Glass tokens — added by liquid-glass-design-tokens convoy
|
|
(2026-06-03). See docs/DESIGN_TOKENS.md for the full reference,
|
|
contrast tables, composite recipes, and "When NOT to use glass"
|
|
guidance.
|
|
============================================================ */
|
|
|
|
:root {
|
|
/* Glass surfaces (light) — 3-step legibility ramp.
|
|
low: modal panels inside a scrim, card detail, inline sub-panels.
|
|
mid: sidebar rail, header strip, mobile bottom-bar.
|
|
high: popovers, dropdowns, tooltips (can land over anything). */
|
|
--glass-surface-low: rgba(254, 252, 248, 0.55);
|
|
--glass-surface-mid: rgba(254, 252, 248, 0.68);
|
|
--glass-surface-high: rgba(254, 252, 248, 0.82);
|
|
|
|
/* Glass blur + saturate (theme-independent; inherited by dark). */
|
|
--glass-blur-low: 12px;
|
|
--glass-blur-mid: 20px;
|
|
--glass-blur-high: 32px;
|
|
--glass-saturate: 140%;
|
|
|
|
/* Rim-light (light) — inner highlight + outer hairline. */
|
|
--rim-light-inner: inset 0 1px 0 0 rgba(255, 255, 255, 0.65);
|
|
--rim-light-outer: 0 0 0 1px rgba(45, 24, 16, 0.08);
|
|
|
|
/* Ember rim — composable RGB triple + two preset variants.
|
|
Triple is theme-independent (ember orange #d84315);
|
|
variants differ per theme for eye-perception correction. */
|
|
--ember-rim-color: 216, 67, 21;
|
|
--ember-rim-subtle: inset 0 0 0 1px rgba(216, 67, 21, 0.35);
|
|
--ember-rim-pronounced:
|
|
inset 0 0 0 1px rgba(216, 67, 21, 0.55),
|
|
0 0 16px 0 rgba(216, 67, 21, 0.30);
|
|
|
|
/* Elevation (light) — warm-brown-tinted shadows. */
|
|
--elevation-flat: none;
|
|
--elevation-ambient:
|
|
0 4px 12px -2px rgba(45, 24, 16, 0.08),
|
|
0 2px 4px -1px rgba(45, 24, 16, 0.04);
|
|
--elevation-pronounced:
|
|
0 24px 48px -12px rgba(45, 24, 16, 0.20),
|
|
0 12px 24px -6px rgba(45, 24, 16, 0.10),
|
|
0 4px 8px -2px rgba(45, 24, 16, 0.06);
|
|
|
|
/* Modal scrim (light) — warm coffee-brown, NOT pure black. */
|
|
--modal-scrim: rgba(45, 24, 16, 0.35);
|
|
|
|
/* Motion (theme-independent). 4-tier duration taxonomy + 3 easings.
|
|
See docs/MOTION_SYSTEM.md for usage, examples, and the
|
|
prefers-reduced-motion contract. */
|
|
--motion-duration-instant: 0ms;
|
|
--motion-duration-quick: 150ms; /* hover, focus, micro-state */
|
|
--motion-duration-default: 250ms; /* default for most transitions */
|
|
--motion-duration-slow: 400ms; /* modal scale, sidebar slide */
|
|
--motion-duration-deliberate: 600ms; /* hero, onboarding, celebration */
|
|
|
|
--motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* default */
|
|
--motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* delight */
|
|
--motion-ease-linear: linear; /* progress */
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
/* Glass surfaces (dark) — same alpha ramp over warm-charcoal base. */
|
|
--glass-surface-low: rgba(26, 15, 10, 0.55);
|
|
--glass-surface-mid: rgba(26, 15, 10, 0.68);
|
|
--glass-surface-high: rgba(26, 15, 10, 0.82);
|
|
|
|
/* Rim-light (dark) — softer warm-white inner + faint outer. */
|
|
--rim-light-inner: inset 0 1px 0 0 rgba(255, 248, 240, 0.12);
|
|
--rim-light-outer: 0 0 0 1px rgba(255, 248, 240, 0.06);
|
|
|
|
/* Ember rim (dark) — alpha bumped to compensate for ember orange
|
|
reading less vibrant on dark backgrounds (eye-perception correction,
|
|
not a numerical drift). RGB triple inherits from :root. */
|
|
--ember-rim-subtle: inset 0 0 0 1px rgba(216, 67, 21, 0.40);
|
|
--ember-rim-pronounced:
|
|
inset 0 0 0 1px rgba(216, 67, 21, 0.65),
|
|
0 0 16px 0 rgba(216, 67, 21, 0.35);
|
|
|
|
/* Elevation (dark) — pure-black shadows for crisp depth against
|
|
the warm-charcoal floor. */
|
|
--elevation-ambient:
|
|
0 4px 12px -2px rgba(0, 0, 0, 0.40),
|
|
0 2px 4px -1px rgba(0, 0, 0, 0.30);
|
|
--elevation-pronounced:
|
|
0 24px 48px -12px rgba(0, 0, 0, 0.55),
|
|
0 12px 24px -6px rgba(0, 0, 0, 0.40),
|
|
0 4px 8px -2px rgba(0, 0, 0, 0.25);
|
|
|
|
/* Modal scrim (dark) — heavier black; dark theme starts dark so
|
|
needs more contrast to feel "behind" the modal. */
|
|
--modal-scrim: rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
/* Fallback for browsers without backdrop-filter support (<3% of
|
|
sessions per caniuse 2026-06-03). Collapses the alpha ramp toward
|
|
solid so glass surfaces remain legible without the blur layer.
|
|
Never goes fully opaque — preserves the design's tinted-surface
|
|
intent and the ramp ordering. The @supports negation guards both
|
|
the unprefixed property AND -webkit-backdrop-filter (Safari 9-17
|
|
needed the prefix). */
|
|
@supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
|
|
:root {
|
|
--glass-surface-low: rgba(254, 252, 248, 0.92);
|
|
--glass-surface-mid: rgba(254, 252, 248, 0.95);
|
|
--glass-surface-high: rgba(254, 252, 248, 0.98);
|
|
}
|
|
[data-theme="dark"] {
|
|
--glass-surface-low: rgba(26, 15, 10, 0.92);
|
|
--glass-surface-mid: rgba(26, 15, 10, 0.95);
|
|
--glass-surface-high: rgba(26, 15, 10, 0.98);
|
|
}
|
|
}
|
|
|
|
/* 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:
|
|
/* Bright ember pool, bottom-left — the "seat of the fire". */
|
|
radial-gradient(
|
|
ellipse 70% 50% at 12% 105%,
|
|
rgba(255, 100, 0, 0.28) 0%,
|
|
rgba(255, 128, 0, 0.14) 30%,
|
|
rgba(255, 171, 64, 0.04) 60%,
|
|
transparent 80%
|
|
),
|
|
/* Secondary ember, bottom-right — keeps the warmth from feeling
|
|
lopsided on wide displays. */
|
|
radial-gradient(
|
|
ellipse 55% 45% at 95% 100%,
|
|
rgba(255, 140, 30, 0.18) 0%,
|
|
rgba(255, 171, 64, 0.05) 50%,
|
|
transparent 75%
|
|
),
|
|
/* Soft gold glow, top-right — the "smoke catching last light". */
|
|
radial-gradient(
|
|
ellipse 55% 45% at 90% -5%,
|
|
rgba(255, 171, 64, 0.16) 0%,
|
|
transparent 65%
|
|
),
|
|
/* Base wash: cooler at top, warmer at bottom for fireplace ambient. */
|
|
linear-gradient(
|
|
180deg,
|
|
rgba(254, 252, 248, 1) 0%,
|
|
rgba(252, 244, 230, 1) 60%,
|
|
rgba(250, 238, 220, 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 70% 50% at 12% 105%,
|
|
rgba(255, 100, 0, 0.32) 0%,
|
|
rgba(255, 128, 0, 0.16) 30%,
|
|
transparent 70%
|
|
),
|
|
radial-gradient(
|
|
ellipse 55% 45% at 95% 100%,
|
|
rgba(255, 140, 30, 0.18) 0%,
|
|
transparent 70%
|
|
),
|
|
radial-gradient(
|
|
ellipse 55% 45% at 90% -5%,
|
|
rgba(124, 58, 237, 0.14) 0%,
|
|
transparent 65%
|
|
),
|
|
linear-gradient(
|
|
180deg,
|
|
rgba(26, 15, 10, 1) 0%,
|
|
rgba(42, 24, 16, 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% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
transform: scale(1.02);
|
|
}
|
|
}
|
|
|
|
/* Default theme variables for light theme */
|
|
:root {
|
|
--bg-primary: var(--bg-primary-light);
|
|
--bg-secondary: var(--bg-secondary-light);
|
|
--bg-tertiary: var(--bg-tertiary-light);
|
|
--text-primary: var(--text-primary-light);
|
|
--text-secondary: var(--text-secondary-light);
|
|
--text-accent: var(--text-accent-light);
|
|
--border: var(--border-light);
|
|
--shadow: var(--shadow-light);
|
|
--gradient-primary: var(--gradient-primary-light);
|
|
--gradient-secondary: var(--gradient-secondary-light);
|
|
--accent-flame: var(--accent-flame-light);
|
|
--accent-ember: var(--accent-ember-light);
|
|
--accent-gold: var(--accent-gold-light);
|
|
--accent-wood: var(--accent-wood-light);
|
|
/* Legacy color mappings for compatibility */
|
|
--accent-blue: var(--accent-flame-light);
|
|
--accent-purple: var(--accent-ember-light);
|
|
--accent-pink: var(--accent-gold-light);
|
|
--input-bg: var(--input-bg-light);
|
|
--input-border: var(--input-border-light);
|
|
--input-text: var(--input-text-light);
|
|
--input-placeholder: var(--input-placeholder-light);
|
|
|
|
/* RGB color variables for backdrop-blur effects */
|
|
--bg-primary-rgb: 254, 252, 248;
|
|
--bg-secondary-rgb: 247, 243, 237;
|
|
--bg-tertiary-rgb: 240, 230, 214;
|
|
}
|
|
|
|
/* Dark theme variables */
|
|
[data-theme="dark"] {
|
|
--bg-primary: var(--bg-primary-dark);
|
|
--bg-secondary: var(--bg-secondary-dark);
|
|
--bg-tertiary: var(--bg-tertiary-dark);
|
|
--text-primary: var(--text-primary-dark);
|
|
--text-secondary: var(--text-secondary-dark);
|
|
--text-accent: var(--text-accent-dark);
|
|
--border: var(--border-dark);
|
|
--shadow: var(--shadow-dark);
|
|
--gradient-primary: var(--gradient-primary-dark);
|
|
--gradient-secondary: var(--gradient-secondary-dark);
|
|
--accent-flame: var(--accent-flame-dark);
|
|
--accent-ember: var(--accent-ember-dark);
|
|
--accent-gold: var(--accent-gold-dark);
|
|
--accent-wood: var(--accent-wood-dark);
|
|
/* Legacy color mappings for compatibility */
|
|
--accent-blue: var(--accent-flame-dark);
|
|
--accent-purple: var(--accent-ember-dark);
|
|
--accent-pink: var(--accent-gold-dark);
|
|
--input-bg: var(--input-bg-dark);
|
|
--input-border: var(--input-border-dark);
|
|
--input-text: var(--input-text-dark);
|
|
--input-placeholder: var(--input-placeholder-dark);
|
|
}
|
|
|
|
/* Custom component styles - Fire-themed */
|
|
.btn-primary {
|
|
@apply font-bold py-3 px-6 rounded-2xl transition-all duration-300 shadow-lg hover:shadow-xl;
|
|
background: var(--gradient-primary);
|
|
color: white;
|
|
}
|
|
|
|
.btn-flame {
|
|
@apply font-bold py-2 px-4 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg;
|
|
background-color: var(--accent-flame);
|
|
color: white;
|
|
}
|
|
|
|
.btn-flame:hover {
|
|
background-color: var(--accent-ember);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-ember {
|
|
@apply font-bold py-2 px-4 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg;
|
|
background-color: var(--accent-ember);
|
|
color: white;
|
|
}
|
|
|
|
.btn-ember:hover {
|
|
background: var(--gradient-primary);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-gold {
|
|
@apply font-bold py-2 px-4 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg;
|
|
background-color: var(--accent-gold);
|
|
color: white;
|
|
}
|
|
|
|
.btn-gold:hover {
|
|
background: var(--gradient-secondary);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.gradient-bg-fire {
|
|
background: var(--gradient-primary);
|
|
}
|
|
|
|
.gradient-bg-golden {
|
|
background: var(--gradient-secondary);
|
|
}
|
|
|
|
.gradient-bg-ember {
|
|
background: linear-gradient(135deg, #d84315 0%, #bf360c 100%);
|
|
}
|
|
|
|
/* Fire glow effects */
|
|
.fire-glow {
|
|
box-shadow: 0 0 20px rgba(255, 111, 0, 0.3);
|
|
}
|
|
|
|
.ember-glow {
|
|
box-shadow: 0 0 15px rgba(216, 67, 21, 0.4);
|
|
}
|
|
|
|
/* Navigation Accessibility Enhancements */
|
|
.nav-item:hover,
|
|
.nav-item-bottom:hover {
|
|
background-color: var(--bg-tertiary) !important;
|
|
color: var(--text-primary) !important;
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.nav-item:focus-within,
|
|
.nav-item-bottom:focus-within {
|
|
background-color: var(--bg-tertiary) !important;
|
|
color: var(--text-primary) !important;
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.nav-item-active {
|
|
background-color: var(--bg-tertiary) !important;
|
|
color: var(--text-primary) !important;
|
|
border-left: 3px solid var(--accent-ember);
|
|
padding-left: calc(1rem - 3px);
|
|
}
|
|
|
|
.nav-item-hover:hover {
|
|
border-left: 3px solid var(--accent-flame);
|
|
padding-left: calc(1rem - 3px);
|
|
}
|
|
|
|
.nav-item-hover:focus-within {
|
|
border-left: 3px solid var(--accent-ember);
|
|
padding-left: calc(1rem - 3px);
|
|
}
|
|
|
|
/* High contrast mode support */
|
|
@media (prefers-contrast: high) {
|
|
.nav-item:hover,
|
|
.nav-item-bottom:hover,
|
|
.nav-item:focus-within,
|
|
.nav-item-bottom:focus-within {
|
|
outline: 2px solid var(--accent-ember);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
/* Reduced motion support — site-wide sweep (added by motion-system-pass
|
|
convoy, 2026-06-03). Per WCAG SC 2.3.3, users who set the OS
|
|
"Reduce motion" preference get decorative animations collapsed to a
|
|
no-op while keeping the end-state of state transitions. The 0.01ms
|
|
value (vs `animation: none`) is the well-known idiom for preserving
|
|
end-state without flicker. Essential motion (e.g. loading spinners
|
|
indicating in-flight work) is kept opt-in by individual components
|
|
via the `motion-essential` class. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
|
|
.motion-essential,
|
|
.motion-essential * {
|
|
animation-duration: revert !important;
|
|
animation-iteration-count: revert !important;
|
|
transition-duration: revert !important;
|
|
}
|
|
|
|
.nav-item,
|
|
.nav-item-bottom {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply font-bold py-3 px-6 rounded-2xl transition-all duration-300 shadow-lg hover:shadow-xl;
|
|
background: var(--gradient-secondary);
|
|
color: white;
|
|
}
|
|
|
|
.input-field {
|
|
@apply w-full px-4 py-3 border rounded-2xl shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-0 transition-all duration-200;
|
|
background-color: var(--input-bg);
|
|
border-color: var(--input-border);
|
|
color: var(--input-text);
|
|
}
|
|
|
|
.input-field::placeholder {
|
|
color: var(--input-placeholder);
|
|
}
|
|
|
|
.card {
|
|
@apply rounded-3xl shadow-lg p-6 transition-all duration-300;
|
|
background-color: var(--bg-primary);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
/* ============================================================
|
|
.glass-panel — canonical "content card" utility for body
|
|
surfaces on authenticated pages. The Liquid Glass recipe in
|
|
class form so pages can apply it without importing the
|
|
<GlassSurface> primitive for every flat container. Added by
|
|
glass-body-panels PR after PR #96 left admin/settings/dashboard
|
|
body cards on solid --bg-secondary.
|
|
|
|
Composition matches <GlassSurface tint="mid" rim="subtle"
|
|
elevation="ambient" blur="mid">. Always pair with rounded-*
|
|
from Tailwind (the class itself doesn't set border-radius
|
|
because consumers vary between rounded-xl and rounded-2xl).
|
|
============================================================ */
|
|
/* IMPORTANT — composing rim + elevation tokens correctly.
|
|
The --rim-light-outer / --rim-light-inner / --elevation-* tokens are
|
|
COMPLETE box-shadow declarations (each contains offset/spread/color or
|
|
the `inset` keyword), not raw color values. They are designed to be
|
|
*chained into a single box-shadow*, exactly the way <GlassSurface>'s
|
|
`boxShadow: shadowParts.join(', ')` composes them. Do NOT use
|
|
`border: 1px solid var(--rim-light-outer)` — that parses
|
|
`border-width` from the first token of the shadow string ("0"), which
|
|
yields a 0px border. And do NOT wrap --rim-light-inner in another
|
|
`inset 0 1px 0` prefix — the token already contains its own `inset`
|
|
keyword, so wrapping produces invalid syntax that the browser drops
|
|
the entire box-shadow declaration for. PR #98 had both mistakes,
|
|
which is why the panels in PR #97/#98 had neither visible border nor
|
|
drop shadow despite the backdrop-filter being correct.
|
|
|
|
Backdrop-filter quirks with Next.js 16's Lightning CSS (also relevant):
|
|
1) `backdrop-filter: blur(var(--X)) saturate(var(--Y))` is silently
|
|
stripped (var() inside function args breaks the optimizer). Use
|
|
LITERAL values here. Tokens stay in :root for the <GlassSurface>
|
|
JSX primitive which sets backdropFilter via inline style.
|
|
2) Writing both `backdrop-filter` AND `-webkit-backdrop-filter` with
|
|
identical values triggers Lightning CSS's buggy de-dup; it keeps
|
|
only the `-webkit-` form which modern browsers ignore. Write only
|
|
the unprefixed form; Lightning CSS's autoprefixer adds the prefix
|
|
per browserslist (ios_saf <18 still needs it). */
|
|
.glass-panel {
|
|
background: var(--glass-surface-mid);
|
|
backdrop-filter: blur(12px) saturate(180%);
|
|
box-shadow:
|
|
var(--rim-light-inner),
|
|
var(--rim-light-outer),
|
|
var(--elevation-ambient);
|
|
}
|
|
|
|
.glass-panel-strong {
|
|
background: var(--glass-surface-high);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
box-shadow:
|
|
var(--rim-light-inner),
|
|
var(--rim-light-outer),
|
|
var(--elevation-pronounced);
|
|
}
|
|
|
|
/* Gradient text effects — Deck Hearth warm palette only.
|
|
The pre-Deck-Hearth aliases (.glow-blue / .glow-purple / .glow-pink,
|
|
.gradient-text-blue / .gradient-text-purple, .gradient-bg-purple)
|
|
were removed by the finish-liquid-glass-design PR after sweeping
|
|
their last consumers to --accent-ember equivalents. */
|
|
.gradient-text-gold {
|
|
background: linear-gradient(135deg, #ffab40 0%, #ff6f00 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.gradient-text-flame {
|
|
background: linear-gradient(135deg, #ff6f00 0%, #d84315 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.gradient-text-ember {
|
|
background: linear-gradient(135deg, #d84315 0%, #bf360c 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Theme toggle button */
|
|
.theme-toggle {
|
|
@apply p-2 rounded-2xl transition-all duration-300;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Header icons */
|
|
.header-icon {
|
|
@apply p-2 rounded-xl transition-all duration-200;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Logo styling */
|
|
.logo-container {
|
|
@apply rounded-2xl flex items-center justify-center transition-all duration-300;
|
|
background: var(--gradient-primary);
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--text-secondary);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-accent);
|
|
}
|
|
|
|
/* Search bar specific styling */
|
|
.search-bar {
|
|
@apply w-full px-4 py-3 border rounded-2xl shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-0 transition-all duration-200;
|
|
background-color: var(--input-bg);
|
|
border-color: var(--input-border);
|
|
color: var(--input-text);
|
|
}
|
|
|
|
.search-bar::placeholder {
|
|
color: var(--input-placeholder);
|
|
}
|
|
|
|
/* Action buttons with proper gradients */
|
|
.action-btn-primary {
|
|
@apply font-bold py-3 px-6 rounded-2xl transition-all duration-300 shadow-lg hover:shadow-xl;
|
|
background: var(--gradient-primary);
|
|
color: white;
|
|
}
|
|
|
|
.action-btn-secondary {
|
|
@apply font-bold py-3 px-6 rounded-2xl transition-all duration-300 shadow-lg hover:shadow-xl;
|
|
background: var(--gradient-secondary);
|
|
color: white;
|
|
}
|
|
|
|
/* Particle Effects for High Rarity Cards */
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0px) translateX(0px);
|
|
opacity: 0.7;
|
|
}
|
|
25% {
|
|
transform: translateY(-8px) translateX(4px);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: translateY(-4px) translateX(-2px);
|
|
opacity: 0.8;
|
|
}
|
|
75% {
|
|
transform: translateY(-12px) translateX(6px);
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
@keyframes sparkle {
|
|
0%, 100% {
|
|
transform: scale(1) rotate(0deg);
|
|
opacity: 0.8;
|
|
}
|
|
25% {
|
|
transform: scale(1.5) rotate(90deg);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(0.8) rotate(180deg);
|
|
opacity: 0.6;
|
|
}
|
|
75% {
|
|
transform: scale(1.2) rotate(270deg);
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
@keyframes aura {
|
|
0%, 100% {
|
|
opacity: 0.1;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.2;
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
@keyframes edgeFloat {
|
|
0%, 100% {
|
|
opacity: 0.7;
|
|
transform: translateY(0px) translateX(0px);
|
|
}
|
|
25% {
|
|
opacity: 1;
|
|
transform: translateY(-3px) translateX(2px);
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
transform: translateY(-1px) translateX(-1px);
|
|
}
|
|
75% {
|
|
opacity: 0.9;
|
|
transform: translateY(-4px) translateX(3px);
|
|
}
|
|
}
|
|
|
|
@keyframes edgeGlow {
|
|
0%, 100% {
|
|
opacity: 0.4;
|
|
transform: scale(1);
|
|
}
|
|
25% {
|
|
opacity: 0.8;
|
|
transform: scale(1.2);
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
transform: scale(0.8);
|
|
}
|
|
75% {
|
|
opacity: 0.9;
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
/* Enhanced glow effects for mythic and enchanted cards */
|
|
.card-mythic-glow {
|
|
box-shadow:
|
|
0 0 20px rgba(255, 215, 0, 0.4),
|
|
0 0 40px rgba(255, 215, 0, 0.2),
|
|
0 0 60px rgba(255, 215, 0, 0.1);
|
|
}
|
|
|
|
.card-enchanted-glow {
|
|
box-shadow:
|
|
0 0 20px rgba(168, 85, 247, 0.4),
|
|
0 0 40px rgba(168, 85, 247, 0.2),
|
|
0 0 60px rgba(168, 85, 247, 0.1);
|
|
}
|
|
|
|
/* Card Hover Panel Styles */
|
|
.card-item-container {
|
|
position: relative;
|
|
}
|
|
|
|
.card-item-container:hover {
|
|
z-index: 50;
|
|
}
|
|
|
|
.card-item-container.selected {
|
|
z-index: 60;
|
|
}
|
|
|
|
/* Ensure proper layering during animations */
|
|
.card-grid-container {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Prevent text selection during card interactions */
|
|
.card-item-container * {
|
|
user-select: none;
|
|
}
|
|
|
|
/* Side panel specific styles */
|
|
.card-side-panel {
|
|
transform-origin: left center;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
/* Responsive adjustments for side panels */
|
|
@media (max-width: 1280px) {
|
|
.card-side-panel {
|
|
width: 16rem; /* w-64 */
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.card-side-panel {
|
|
display: none; /* Hide panels on smaller screens */
|
|
}
|
|
}
|
|
|
|
/* Dark mode improvements */
|
|
@media (prefers-color-scheme: dark) {
|
|
.card-side-panel {
|
|
backdrop-filter: blur(8px) brightness(0.8);
|
|
}
|
|
}
|
|
|
|
/* Smooth panel transitions */
|
|
.card-panel-enter {
|
|
opacity: 0;
|
|
transform: translateX(8px);
|
|
}
|
|
|
|
.card-panel-enter-active {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
transition: all 300ms ease-out;
|
|
}
|
|
|
|
/* Rarity Effects */
|
|
/* Mythic/Legendary - Golden glow */
|
|
.rarity-glow-mythic {
|
|
box-shadow:
|
|
0 0 25px rgba(251, 191, 36, 0.5),
|
|
0 0 50px rgba(251, 191, 36, 0.35),
|
|
0 0 75px rgba(251, 191, 36, 0.25);
|
|
}
|
|
|
|
.rarity-particles-mythic::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at 20% 30%, rgba(251, 191, 36, 0.3) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 70%, rgba(251, 191, 36, 0.2) 0%, transparent 50%),
|
|
radial-gradient(circle at 60% 20%, rgba(251, 191, 36, 0.25) 0%, transparent 50%);
|
|
animation: mythic-sparkle 4s ease-in-out infinite;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
@keyframes mythic-sparkle {
|
|
0%, 100% { opacity: 0.3; }
|
|
50% { opacity: 0.7; }
|
|
}
|
|
|
|
/* Rare - Purple glow */
|
|
.rarity-glow-rare {
|
|
box-shadow:
|
|
0 0 20px rgba(168, 85, 247, 0.45),
|
|
0 0 40px rgba(168, 85, 247, 0.35),
|
|
0 0 60px rgba(168, 85, 247, 0.25);
|
|
}
|
|
|
|
.rarity-particles-rare::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at 30% 40%, rgba(168, 85, 247, 0.2) 0%, transparent 40%),
|
|
radial-gradient(circle at 70% 60%, rgba(168, 85, 247, 0.15) 0%, transparent 40%);
|
|
animation: rare-shimmer 3s ease-in-out infinite;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
@keyframes rare-shimmer {
|
|
0%, 100% { opacity: 0.2; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
/* Uncommon - Blue glow */
|
|
.rarity-glow-uncommon {
|
|
box-shadow:
|
|
0 0 12px rgba(96, 165, 250, 0.35),
|
|
0 0 25px rgba(96, 165, 250, 0.25);
|
|
}
|
|
|
|
.rarity-particles-uncommon::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at 40% 30%, rgba(96, 165, 250, 0.15) 0%, transparent 30%);
|
|
animation: uncommon-twinkle 2.5s ease-in-out infinite;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
@keyframes uncommon-twinkle {
|
|
0%, 100% { opacity: 0.1; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
|
|
/* Enchanted/Secret - Pink/Rainbow glow */
|
|
.rarity-glow-enchanted {
|
|
box-shadow:
|
|
0 0 28px rgba(244, 114, 182, 0.5),
|
|
0 0 55px rgba(168, 85, 247, 0.35),
|
|
0 0 80px rgba(59, 130, 246, 0.25);
|
|
}
|
|
|
|
.rarity-particles-enchanted::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(circle at 25% 25%, rgba(244, 114, 182, 0.3) 0%, transparent 40%),
|
|
radial-gradient(circle at 75% 75%, rgba(168, 85, 247, 0.2) 0%, transparent 40%),
|
|
radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.25) 0%, transparent 40%);
|
|
animation: enchanted-rainbow 3s ease-in-out infinite;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
@keyframes enchanted-rainbow {
|
|
0%, 100% {
|
|
opacity: 0.4;
|
|
transform: rotate(0deg);
|
|
}
|
|
33% {
|
|
opacity: 0.6;
|
|
transform: rotate(120deg);
|
|
}
|
|
66% {
|
|
opacity: 0.5;
|
|
transform: rotate(240deg);
|
|
}
|
|
}
|
|
|
|
/* Hover enhancement for rarity effects */
|
|
.card-item-container:hover .rarity-glow-mythic {
|
|
box-shadow:
|
|
0 0 30px rgba(251, 191, 36, 0.6),
|
|
0 0 60px rgba(251, 191, 36, 0.5),
|
|
0 0 90px rgba(251, 191, 36, 0.4);
|
|
}
|
|
|
|
.card-item-container:hover .rarity-glow-rare {
|
|
box-shadow:
|
|
0 0 25px rgba(168, 85, 247, 0.6),
|
|
0 0 50px rgba(168, 85, 247, 0.5),
|
|
0 0 75px rgba(168, 85, 247, 0.4);
|
|
}
|
|
|
|
.card-item-container:hover .rarity-glow-uncommon {
|
|
box-shadow:
|
|
0 0 20px rgba(96, 165, 250, 0.5),
|
|
0 0 40px rgba(96, 165, 250, 0.4);
|
|
}
|
|
|
|
.card-item-container:hover .rarity-glow-enchanted {
|
|
box-shadow:
|
|
0 0 35px rgba(244, 114, 182, 0.7),
|
|
0 0 70px rgba(244, 114, 182, 0.6),
|
|
0 0 105px rgba(244, 114, 182, 0.5);
|
|
}
|
|
|
|
/* Utility classes */
|
|
.flex-2 {
|
|
flex: 2;
|
|
}
|
|
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Floating particle animation */
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0px) translateX(0px) scale(1);
|
|
opacity: 0.6;
|
|
}
|
|
25% {
|
|
transform: translateY(-20px) translateX(10px) scale(1.1);
|
|
opacity: 0.8;
|
|
}
|
|
50% {
|
|
transform: translateY(-10px) translateX(-15px) scale(0.9);
|
|
opacity: 1;
|
|
}
|
|
75% {
|
|
transform: translateY(-25px) translateX(5px) scale(1.05);
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 4s ease-in-out infinite;
|
|
}
|
|
|
|
/* Fire Glow Background Animation */
|
|
@keyframes fire-glow {
|
|
0%, 100% {
|
|
filter: hue-rotate(0deg) brightness(1) saturate(1);
|
|
transform: scale(1);
|
|
}
|
|
25% {
|
|
filter: hue-rotate(5deg) brightness(1.05) saturate(1.1);
|
|
transform: scale(1.02);
|
|
}
|
|
50% {
|
|
filter: hue-rotate(-3deg) brightness(0.98) saturate(1.05);
|
|
transform: scale(0.99);
|
|
}
|
|
75% {
|
|
filter: hue-rotate(8deg) brightness(1.03) saturate(1.08);
|
|
transform: scale(1.01);
|
|
}
|
|
}
|
|
|
|
.fire-glow-bg {
|
|
animation: fire-glow 12s ease-in-out infinite;
|
|
}
|
|
|
|
/* Ember Floating Animation */
|
|
@keyframes ember-float {
|
|
0% {
|
|
transform: translateY(0px) translateX(0px) scale(0.8);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 0.6;
|
|
}
|
|
20% {
|
|
transform: translateY(-30px) translateX(15px) scale(1);
|
|
opacity: 0.8;
|
|
}
|
|
40% {
|
|
transform: translateY(-60px) translateX(-10px) scale(0.9);
|
|
opacity: 1;
|
|
}
|
|
60% {
|
|
transform: translateY(-90px) translateX(20px) scale(1.1);
|
|
opacity: 0.7;
|
|
}
|
|
80% {
|
|
transform: translateY(-120px) translateX(-5px) scale(0.8);
|
|
opacity: 0.4;
|
|
}
|
|
100% {
|
|
transform: translateY(-150px) translateX(10px) scale(0.6);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.animate-ember-float {
|
|
animation: ember-float 10s linear infinite;
|
|
}
|
|
|
|
/* Mobile Navigation Styles */
|
|
.h-safe-area-inset-bottom {
|
|
height: env(safe-area-inset-bottom, 0px);
|
|
}
|
|
|
|
/* Mobile responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
/* Ensure content doesn't get hidden behind mobile nav */
|
|
.mobile-content-padding {
|
|
padding-bottom: 80px; /* Space for mobile navigation */
|
|
}
|
|
|
|
/* Mobile navigation backdrop blur support */
|
|
@supports (backdrop-filter: blur(16px)) {
|
|
.mobile-nav-backdrop {
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
}
|
|
}
|
|
|
|
/* Fallback for browsers without backdrop-filter */
|
|
@supports not (backdrop-filter: blur(16px)) {
|
|
.mobile-nav-backdrop {
|
|
background-color: rgba(var(--bg-secondary-rgb), 0.95) !important;
|
|
}
|
|
}
|
|
} |