/* ============================================================
HALLOWEEN THEME — haunted-luxe storefront design system.
Same class surface as editorial/theme.css (so shared header/
footer/drawer/component classes stay styled), restyled around
aubergine-velvet surfaces, moonlit ivory ink and pumpkin-fire
accents with witch-purple panels.
Adds --radius/--shadow tokens (Classic-compatible so shared
override markup keeps working) plus Halloween --gold/--felt
(aliased as --pumpkin/--witch).
References --theme-* (accent) from theme-generator.php.
============================================================ */
/* ── Halloween design system — haunted luxe. Keeps Casino token NAMES,
remaps VALUES. --gold*=pumpkin, --felt*=witch-purple. ── */
/* Two rooms of the same house. Light is a Halloween afternoon: parchment
and bone-white paper, ink-black line work, pumpkin and candy-corn
accents, a dusky violet where the dark mode has oxblood. Dark is the
mansion at midnight: walnut panelling, oxblood velvet, bone-white ink
and tarnished brass, with a pale spectral green for anything happening
now. Both share the type and the ornaments. */
:root {
--font-display: 'Playfair Display', Georgia, serif;
--font-text: 'EB Garamond', Georgia, serif;
--paper: #f3ead8;
--paper-2: #fdf8ee;
--ink: #1f1714;
--ink-2: #45372f;
--ink-soft: #6f5f54;
--rule: rgba(31, 23, 20, 0.20);
--rule-soft: rgba(31, 23, 20, 0.10);
--radius: 6px;
--radius-sm: 4px;
/* Paper cut-outs: a crisp ink edge and a short drop, never a glow. */
--shadow: 0 1px 0 rgba(31,23,20,.10), 0 0 0 1px rgba(31,23,20,.08);
--shadow-md: 3px 3px 0 -1px rgba(31,23,20,.82), 0 16px 30px -20px rgba(90,45,10,.45), 0 0 0 1px rgba(31,23,20,.14);
/* Pumpkin (the theme's --gold in this room) */
--gold: #a94709;
--gold-2: #ec8a2c;
--gold-soft: rgba(222, 110, 26, 0.13);
--gold-ink: #1f1714;
--notify-accent: var(--gold);
--candy: #f2b432;
/* Dusky violet (the theme's --felt) — still a dark panel by day */
--felt: #4b305f;
--felt-2: #2f1d40;
--on-felt: #fbf3e4;
--on-felt-soft: rgba(251, 243, 228, 0.76);
--cz-gold-deep: #8a3905;
--cz-cream: #fbf3e4;
--cz-cream-soft: rgba(251, 243, 228, 0.76);
--hdr-strip-bg: linear-gradient(180deg, #34204a 0%, #2a1a3c 100%);
--hdr-strip-rule: rgba(236, 138, 44, 0.55);
--brand-gradient: linear-gradient(160deg, var(--felt) 0%, var(--felt-2) 60%, #22152f 100%);
--brand-glow-1: rgba(242, 180, 50, 0.26);
--brand-glow-2: rgba(236, 138, 44, 0.22);
--spin-duration: 1.6s;
--blood: #a8262b;
--ghost: #23775c;
--moon: #f6dd8f;
--pumpkin: var(--gold); --pumpkin-2: var(--gold-2);
--pumpkin-soft: var(--gold-soft); --pumpkin-ink: var(--gold-ink);
--witch: var(--felt); --witch-2: var(--felt-2);
--hw-felt-ink: var(--felt);
--nav-accent: var(--gold);
--theme-50: #fff4e6; --theme-100: #ffe2bf; --theme-200: #fbc68c; --theme-300: #f5a65c; --theme-400: #ec8a2c;
--theme-500: #d26a14; --theme-600: #a94709; --theme-700: #8f3c08; --theme-800: #6b2d07; --theme-900: #3f1a04;
--theme-50-rgb: 255,244,230; --theme-100-rgb: 255,226,191; --theme-200-rgb: 251,198,140; --theme-300-rgb: 245,166,92; --theme-400-rgb: 236,138,44;
--theme-500-rgb: 210,106,20; --theme-600-rgb: 169,71,9; --theme-700-rgb: 143,60,8; --theme-800-rgb: 107,45,7; --theme-900-rgb: 63,26,4;
--theme-primary: var(--theme-600); --theme-primary-hover: var(--theme-700);
--theme-primary-light: var(--theme-100); --theme-primary-dark: var(--theme-800);
--theme-600-accent: var(--theme-600); --theme-900-dark: var(--theme-900);
--theme-600-ink: #fff;
--hw-seg-a: #c95a12; --hw-seg-b: #1f1714;
/* Brass hairlines and tints, re-inked in burnt pumpkin by day. */
--hw-pip: #f2b432; --hw-logout: #a8262b; --hw-scrim: rgba(47,29,64,.5);
--hw-drawer-scrim: radial-gradient(120% 120% at 0% 0%, rgba(75,48,95,0.55) 0%, rgba(31,23,20,0.6) 100%);
--hw-brass-rgb: 169, 71, 9; --hw-brass-2-rgb: 236, 138, 44; --hw-brass-deep-rgb: 143, 60, 8;
/* Cobweb lace for a top corner, spun from the left or from the right. */
--hw-cobweb: url("data:image/svg+xml;utf8,");
--hw-cobweb-r: url("data:image/svg+xml;utf8,");
--hw-cobweb-pale-r: url("data:image/svg+xml;utf8,");
/* The same damask, drawn in ink, with cobweb lace caught in it. */
--damask: url("data:image/svg+xml;utf8,");
--page-bg:
radial-gradient(1100px 520px at 50% -100px, rgba(242,180,50,0.20), transparent 70%) no-repeat,
radial-gradient(900px 700px at 0% 100%, rgba(75,48,95,0.12), transparent 70%) no-repeat,
radial-gradient(700px 520px at 100% 30%, rgba(236,138,44,0.08), transparent 70%) no-repeat,
var(--damask) repeat,
var(--paper);
}
/* The shared Tailwind tokens (dynamic-theme.css) are white and grey by
default; by day they take the parchment instead. */
html:not(.dark) {
--bg-primary: #fdf8ee; --bg-secondary: #f7efe0; --bg-tertiary: #efe4cf;
--text-primary: #1f1714; --text-secondary: #45372f; --text-tertiary: #6f5f54;
--border-primary: rgba(31,23,20,.16); --border-secondary: rgba(31,23,20,.26);
}
html.dark, html.dark body {
--font-display: 'Playfair Display', Georgia, serif;
--font-text: 'EB Garamond', Georgia, serif;
--paper: #17110f;
--paper-2: #221816;
--ink: #efe6d3;
--ink-2: #cdbfa8;
--ink-soft: #a3968a;
--rule: rgba(201, 164, 92, 0.22);
--rule-soft: rgba(201, 164, 92, 0.10);
--radius: 6px;
--radius-sm: 4px;
--shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 0 1px rgba(201,164,92,.06);
--shadow-md: 0 18px 40px -16px rgba(0,0,0,.75), 0 0 0 1px rgba(201,164,92,.10);
/* Brass (the theme's --gold) */
--gold: #c9a45c;
--gold-2: #e2c78f;
--gold-soft: rgba(201, 164, 92, 0.14);
--gold-ink: #1c140c;
--notify-accent: var(--gold);
/* Oxblood velvet (the theme's --felt) — always a dark panel */
--felt: #3a1a1f;
--felt-2: #211013;
--on-felt: #efe6d3;
--on-felt-soft: rgba(239, 230, 211, 0.72);
--cz-gold-deep: #8a6a30;
--cz-cream: #efe6d3;
--cz-cream-soft: rgba(239, 230, 211, 0.72);
--hdr-strip-bg: linear-gradient(180deg, #1d1513 0%, #17110f 100%);
--hdr-strip-rule: rgba(201, 164, 92, 0.35);
--brand-gradient: linear-gradient(160deg, var(--felt) 0%, var(--felt-2) 60%, #17110f 100%);
--brand-glow-1: rgba(226, 199, 143, 0.18);
--brand-glow-2: rgba(120, 40, 48, 0.30);
--spin-duration: 1.6s;
--blood: #c2474b;
--ghost: #9ed2bf;
--moon: #efe6d3;
--pumpkin: var(--gold); --pumpkin-2: var(--gold-2);
--pumpkin-soft: var(--gold-soft); --pumpkin-ink: var(--gold-ink);
--witch: var(--felt); --witch-2: var(--felt-2);
/* Oxblood is a panel colour; words that wear it by day turn brass at night. */
--hw-felt-ink: var(--gold-2);
--nav-accent: var(--gold);
/* The site's accent (--theme-*, from theme-generator.php) follows the
brass, as Bazaar's does with its ruby; otherwise an admin's blue
lands on every button. The darker steps carry white text. */
--theme-50: #f8f1e2; --theme-100: #efe0bd; --theme-200: #e2c78f; --theme-300: #d8b878; --theme-400: #c9a45c;
--theme-500: #a8843f; --theme-600: #8a6a30; --theme-700: #6e5425; --theme-800: #4f3c1a; --theme-900: #2e2310;
--theme-50-rgb: 248,241,226; --theme-100-rgb: 239,224,189; --theme-200-rgb: 226,199,143; --theme-300-rgb: 216,184,120; --theme-400-rgb: 201,164,92;
--theme-500-rgb: 168,132,63; --theme-600-rgb: 138,106,48; --theme-700-rgb: 110,84,37; --theme-800-rgb: 79,60,26; --theme-900-rgb: 46,35,16;
--theme-primary: var(--theme-600); --theme-primary-hover: var(--theme-700);
--theme-primary-light: var(--theme-100); --theme-primary-dark: var(--theme-800);
--theme-600-accent: var(--theme-600); --theme-900-dark: var(--theme-900);
--theme-600-ink: #fff;
--hw-seg-a: #8a1420; --hw-seg-b: #1b1210;
--hw-pip: #e2c78f; --hw-logout: #8a6a30; --hw-scrim: rgba(6,37,26,0.6);
--hw-drawer-scrim: radial-gradient(120% 120% at 0% 0%, rgba(58,26,31,0.72) 0%, rgba(6,37,26,0.82) 100%);
--hw-brass-rgb: 201, 164, 92; --hw-brass-2-rgb: 226, 199, 143; --hw-brass-deep-rgb: 168, 132, 63;
/* Damask wallpaper, barely there, under a candle glow from above. */
--damask: url("data:image/svg+xml;utf8,");
--page-bg:
radial-gradient(1100px 520px at 50% -80px, rgba(var(--hw-brass-2-rgb),0.16), transparent 70%) no-repeat,
radial-gradient(900px 700px at 0% 100%, rgba(120,40,48,0.28), transparent 70%) no-repeat,
var(--damask) repeat,
var(--paper);
}
/* Game boards (the arena posts these into each game): parchment by day,
walnut, brass and oxblood at night. */
html:not(.dark) {
--game-bg: #fbf3e2;
--game-surface: #efe3cb;
--game-surface-2: #fffaf0;
--game-ink: #1f1714;
--game-muted: #6f5f54;
--game-accent: #d2600f;
--game-accent-ink:#ffffff;
--game-good: #23775c;
--game-bad: #a8262b;
--game-tile-1: #fbe7c0;
--game-tile-2: #f6d27e;
--game-tile-3: #f2b432;
--game-tile-4: #ec8a2c;
--game-tile-5: #c95a12;
--game-tile-6: #a77fc4;
--game-tile-7: #4b305f;
--game-tile-8: #1f1714;
--game-radius: 6px;
--game-font: 'Playfair Display', Georgia, serif;
--game-font-css: "/assets/css/fonts.css";
--game-arena-screen: #fbf3e2;
--game-arena-coins: #b44c0b;
--game-arena-win: #23775c;
--game-arena-danger: #a8262b;
--game-pattern: url("data:image/svg+xml;utf8,");
}
html.dark {
--game-bg: #17110f;
--game-surface: #221816;
--game-surface-2: #2b201c;
--game-ink: #efe6d3;
--game-muted: #a3968a;
--game-accent: #c9a45c;
--game-accent-ink:#1c140c;
--game-good: #9ed2bf;
--game-bad: #e0686b;
--game-tile-1: #4a3a31;
--game-tile-2: #6e5425;
--game-tile-3: #c9a45c;
--game-tile-4: #e2c78f;
--game-tile-5: #8a1420;
--game-tile-6: #c2474b;
--game-tile-7: #2f6b58;
--game-tile-8: #efe6d3;
--game-radius: 6px;
--game-font: 'Playfair Display', Georgia, serif;
--game-font-css: "/assets/css/fonts.css";
--game-arena-screen: #17110f;
--game-arena-coins: #e2c78f;
--game-arena-win: #9ed2bf;
--game-arena-danger: #e0686b;
--game-pattern: url("data:image/svg+xml;utf8,");
}
body, body.font-sans { background: var(--paper); color: var(--ink); font-family: var(--font-text); font-variant-numeric: lining-nums; }
/* Display headlines — Cinzel gold-leaf serif */
.font-display, h1.display, h2.display, h3.display {
font-family: 'Playfair Display', Georgia, serif;
letter-spacing: 0.01em;
}
.display-italic {
font-style: normal;
}
.text-gradient-theme {
background: linear-gradient(115deg, var(--gold-2) 0%, var(--gold) 48%, var(--cz-gold-deep) 110%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Eyebrow label — gilded small caps */
.ed-eyebrow {
font-family: 'EB Garamond', sans-serif;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.24em;
color: var(--gold);
}
/* Tight eyebrow — same style, letter-spacing stripped so it stays on one line
in narrow cards. !important guards against the Tailwind CDN Preflight
(injected after this stylesheet) winning the cascade on these props. */
.ed-eyebrow-tight {
font-size: 9px !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
}
/* Section eyebrow — gold diamond pip */
.section-eyebrow {
display: inline-flex; align-items: center; gap: 0.6rem;
font-family: 'EB Garamond', sans-serif;
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.24em;
color: var(--gold);
margin-bottom: 0.7rem;
}
.section-eyebrow::before {
content: '◆'; font-size: 8px; line-height: 1;
color: var(--gold); opacity: 0.85; flex-shrink: 0;
}
/* View-all arrow link — gold underline */
.btn-view-all {
display: inline-flex; align-items: center; gap: 0.45rem;
font-family: 'EB Garamond', sans-serif;
font-size: 0.78rem; font-weight: 600;
letter-spacing: 0.05em;
white-space: nowrap; flex-shrink: 0;
color: var(--ink);
padding-bottom: 3px;
border-bottom: 1px solid var(--gold);
text-decoration: none;
transition: gap 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-view-all svg { transition: transform 0.2s ease; }
.btn-view-all:hover { gap: 0.75rem; color: var(--gold); border-bottom-color: var(--gold-2); }
[dir="rtl"] .btn-view-all svg { transform: scaleX(-1); }
.ed-rule { background-color: var(--rule); }
.ed-rule-soft { background-color: var(--rule-soft); }
/* Felt grain overlay (used on hero) */
.ed-grain::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: var(--noise);
opacity: 0.5; mix-blend-mode: multiply;
}
html.dark .ed-grain::before { mix-blend-mode: screen; opacity: 0.35; }
/* Number ornament — gilded serif */
.ed-folio {
font-family: 'Playfair Display', Georgia, serif;
font-style: normal;
font-weight: 600;
color: var(--gold);
}
/* Header search — filled field, gold focus glow */
.ed-search {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius-sm);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ed-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
/* Text link with arrow — gold */
.ed-link-arrow {
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: 'EB Garamond', sans-serif;
font-size: 0.8rem; font-weight: 600;
color: var(--gold); text-decoration: none;
transition: gap 0.18s ease, color 0.18s ease;
}
.ed-link-arrow:hover { gap: 0.7rem; color: var(--gold-2); }
html.dark .ed-link-arrow:hover { color: var(--gold-2); }
/* Primary CTA — gold-leaf chip */
.ed-btn-primary {
display: inline-flex; align-items: center; gap: 0.55rem;
padding: 0.75rem 1.5rem;
white-space: nowrap;
font-family: 'EB Garamond', sans-serif;
font-size: 0.85rem; font-weight: 700;
letter-spacing: 0.03em;
color: var(--gold-ink);
background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 100%);
border-radius: var(--radius-sm);
border: 1px solid var(--gold);
box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.35);
transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.ed-btn-primary:hover {
filter: brightness(1.06);
box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.35);
transform: translateY(-1px);
}
/* Beat dynamic-theme.css .dark button { color: var(--text-primary) } */
html.dark .ed-btn-primary { color: var(--gold-ink); }
/* …and index.php's homepage `.ed-btn-primary:hover { background: var(--paper) }`
(editorial invert) — re-assert the pumpkin chip so gold-ink text stays legible. */
html.dark .ed-btn-primary:hover {
color: var(--gold-ink);
background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 100%);
border-color: var(--gold);
}
.ed-btn-secondary {
display: inline-flex; align-items: center; gap: 0.55rem;
padding: 0.72rem 1.4rem;
font-family: 'EB Garamond', sans-serif;
font-size: 0.82rem; font-weight: 600;
color: var(--ink);
background: var(--paper-2);
border-radius: var(--radius-sm);
border: 1px solid var(--rule);
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.ed-btn-secondary:hover { background: var(--paper); border-color: var(--gold); color: var(--ink); }
/* Shared CTA — gold-leaf chip */
.ed-plan-cta {
display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
padding: 0.75rem 1.5rem; border-radius: var(--radius-sm);
font-family: 'EB Garamond', sans-serif;
font-size: 0.85rem; font-weight: 700;
letter-spacing: 0.03em;
background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 100%);
color: var(--gold-ink);
border: 1px solid var(--gold);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
transition: filter 0.18s ease, transform 0.18s ease;
text-decoration: none;
}
.ed-plan-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
html.dark .ed-plan-cta { color: var(--gold-ink); }
/* Re-assert pumpkin chip over index.php homepage `.ed-plan-cta:hover { background: var(--paper) }`. */
html.dark .ed-plan-cta:hover {
color: var(--gold-ink);
background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 100%);
}
/* Plan / dossier cards — felt-framed, elevated */
.ed-plan {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.ed-plan:hover { border-color: var(--gold); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ed-plan-featured {
position: relative;
background: linear-gradient(160deg, var(--felt) 0%, var(--felt-2) 100%);
color: var(--on-felt);
border: 1px solid var(--gold);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ed-plan-featured:hover { transform: translateY(-2px); }
html.dark .ed-plan-featured { background: linear-gradient(160deg, var(--felt) 0%, var(--felt-2) 100%); color: var(--on-felt); border-color: var(--gold); }
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(240,208,115,0.28); }
html.dark .ed-plan-featured .ed-plan-hairline { border-color: rgba(240,208,115,0.28); }
.ed-plan-featured .ed-plan-cta { background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 100%); color: var(--gold-ink); border-color: var(--gold-2); }
.ed-plan-featured .ed-plan-cta:hover { filter: brightness(1.08); color: var(--gold-ink); }
html.dark .ed-plan-featured .ed-plan-cta { background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 100%); color: var(--gold-ink); border-color: var(--gold-2); }
html.dark .ed-plan-featured button.ed-plan-cta { color: var(--gold-ink); }
/* Shop card — felt-framed, elevated */
.shop-card {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.shop-card:hover { border-color: var(--gold); box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* Header status strip */
.ed-status {
font-family: 'EB Garamond', sans-serif;
font-size: 10.5px;
letter-spacing: 0.08em;
color: var(--ink-soft);
}
/* Drawer typography */
.drawer-section-label {
display: flex; align-items: center; gap: 0.6rem;
font-family: 'EB Garamond', sans-serif;
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.2em;
color: var(--gold);
padding: 1.1rem 1.5rem 0.4rem;
}
.drawer-section-label::after {
content: ''; flex: 1; height: 1px; background: var(--rule);
}
.drawer-nav-row {
display: flex; align-items: center; gap: 0.85rem;
padding: 0.65rem 1.5rem;
font-family: 'EB Garamond', sans-serif;
font-size: 0.92rem; font-weight: 500;
color: var(--ink-2);
transition: background 0.15s ease, color 0.15s ease;
text-decoration: none;
}
.drawer-nav-row:hover { background: var(--gold-soft); color: var(--ink); }
.drawer-logout, .drawer-login {
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
margin: 1rem 1.5rem 1.25rem;
padding: 0.85rem 1rem;
border-radius: var(--radius-sm);
font-family: 'EB Garamond', sans-serif;
font-size: 0.86rem; font-weight: 700;
text-decoration: none;
transition: background 0.18s ease, filter 0.18s ease;
}
.drawer-logout { color: #8a6a30; border: 1px solid rgba(184,67,26,0.25); }
.drawer-logout:hover { background: rgba(184,67,26,0.06); }
.drawer-login { color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 100%); }
.drawer-login:hover { filter: brightness(1.06); }
html.dark .drawer-logout { color: #f4a17b; border-color: rgba(244,161,123,0.20); }
/* Mobile glass header */
.mobile-glass-header {
background: rgba(243,238,247,0.85);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header {
background: rgba(23,17,15,0.80);
}
/* Avatar ring — gold */
.ed-avatar-ring {
box-shadow: 0 0 0 1px var(--paper-2), 0 0 0 2px var(--gold);
}
/* Hide Alpine cloak */
[x-cloak] { display: none !important; }
/* Dropdown */
.ed-dropdown {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
overflow: hidden;
}
html.dark .ed-dropdown { background: var(--paper-2); box-shadow: 0 14px 36px -12px rgba(0,0,0,0.65), 0 0 0 1px rgba(217,180,83,.10); }
.ed-dropdown-item {
display: flex; align-items: center; gap: 0.85rem;
padding: 0.7rem 1rem;
font-family: 'EB Garamond', sans-serif;
font-size: 0.88rem; font-weight: 500;
color: var(--ink-2);
text-decoration: none;
transition: background 0.14s ease, color 0.14s ease;
}
.ed-dropdown-item:hover { background: var(--gold-soft); color: var(--ink); }
html.dark .ed-dropdown-item:hover { background: var(--gold-soft); color: var(--ink); }
.ed-section-cap {
font-family: 'EB Garamond', sans-serif;
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.2em;
color: var(--gold);
padding: 0.9rem 1rem 0.4rem;
}
/* ── Halloween header: witch-felt status strip, pumpkin-ruled main bar ── */
.hdr-strip .ed-status { color: var(--on-felt); }
.hdr-strip a:hover,
.hdr-strip button:hover { color: var(--gold-2); }
.hdr-strip .dark-mode-toggle:hover { color: var(--gold-2); }
#desktopHeader { box-shadow: 0 1px 0 var(--gold-soft); }
/* ── Auth (login/register) brand panel — brand-* tokens defined in the
primary :root block above (Halloween haunted-luxe). ── */
/* ── Home: mystery-box card frame + winner-ticker accent (halloween) ── */
.ed-card-mystery {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.ed-card-mystery:hover { border-color: var(--gold); box-shadow: var(--shadow-md); }
body .wt-card:hover { border-color: var(--gold); }
/* ══════════════════════════════════════════════════════════════════════════
Payment cluster (payment.php -> payment/*) — halloween: witch-felt panels, pumpkin gilt,
Cinzel display. Scoped cas-pay-*.
══════════════════════════════════════════════════════════════════════════ */
/* Top bar — felt strip, gold rule */
.cas-pay-topbar {
background: var(--hdr-strip-bg, linear-gradient(160deg, var(--felt) 0%, var(--felt-2) 100%));
border-bottom: 1px solid var(--gold);
box-shadow: 0 1px 0 var(--gold-soft);
}
.cas-pay-crest {
width: 1.75rem; height: 1.75rem; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-2), var(--gold));
}
.cas-pay-title {
font-family: var(--font-display, 'Playfair Display', serif);
font-weight: 700; letter-spacing: .01em; color: var(--on-felt);
}
/* Cards — felt surface, gold hairline */
.cas-pay-card {
background: var(--paper-2);
border: 1px solid var(--gold-soft);
border-radius: var(--radius, 14px);
box-shadow: var(--shadow);
}
/* Eyebrows / section titles */
.cas-pay-eyebrow {
font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: var(--gold);
}
.cas-pay-section-title {
font-family: var(--font-display, 'Playfair Display', serif); font-weight: 700; color: var(--ink);
}
.cas-pay-collapse-btn { border-bottom: 1px solid var(--gold-soft); background: none; }
.cas-pay-collapse-btn:hover { background: rgba(166,124,30,.05); }
/* Item */
.cas-pay-lineitem {
border-radius: var(--radius-sm, 9px);
background: rgba(166,124,30,.05);
border: 1px solid var(--gold-soft);
}
.cas-pay-itemname {
font-family: var(--font-display, 'Playfair Display', serif); font-weight: 700; color: var(--ink);
}
.cas-pay-amount {
font-family: var(--font-display, 'Playfair Display', serif); font-weight: 700;
color: var(--gold); letter-spacing: -.01em;
}
.cas-pay-hero-frame { position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--gold-soft); pointer-events: none; }
.cas-pay-qty-hero {
position: absolute; top: .625rem; right: .625rem;
font-size: 12px; font-weight: 800; color: var(--gold-ink);
background: linear-gradient(180deg, var(--gold-2), var(--gold));
padding: .125rem .625rem; border-radius: 999px;
}
.cas-pay-qty-badge {
position: absolute; bottom: -.375rem; right: -.375rem;
font-size: 10px; font-weight: 800; color: var(--gold-ink);
background: linear-gradient(180deg, var(--gold-2), var(--gold));
padding: .0625rem .375rem; border-radius: 999px; line-height: 1.5;
box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
/* Countdown */
.cas-pay-countdown {
display: flex; align-items: center; gap: .5rem;
padding: .5rem .75rem; border-radius: var(--radius-sm, 9px);
background: var(--gold-soft);
}
.cas-pay-countdown-time {
font-size: 11px; font-weight: 800; color: var(--gold);
background: var(--paper-2); border-radius: 999px; padding: .125rem .625rem;
}
/* Price rows / totals */
.cas-pay-row { border-bottom: 1px solid var(--gold-soft); }
.cas-pay-free {
font-size: 10px; font-weight: 800; letter-spacing: .04em;
color: #2f9e6b; background: rgba(47,158,107,.12);
padding: .125rem .5rem; border-radius: 999px;
}
.cas-pay-total {
border-top: 2px solid var(--gold-soft); font-size: 15px;
font-family: var(--font-display, 'Playfair Display', serif); font-weight: 700; color: var(--ink);
}
.cas-pay-total > span:last-child { color: var(--gold); }
/* Address */
.cas-pay-address-inner {
border: 1.5px solid var(--gold-soft); border-radius: var(--radius-sm, 9px);
background: rgba(166,124,30,.04);
}
/* Gateways — VIP cashier tiles */
.cas-pay-gw {
border: 2px solid var(--gold-soft); border-radius: var(--radius-sm, 9px);
background: rgba(166,124,30,.03);
transition: border-color .14s, background .14s, transform .14s, box-shadow .14s;
}
.cas-pay-gw:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.cas-pay-gw-on { border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 0 0 1px var(--gold); }
.cas-pay-gw-radio {
width: 1rem; height: 1rem; border-radius: 999px; border: 2px solid var(--ink-soft);
transition: border-color .14s, background .14s;
}
.cas-pay-gw-radio-on { border-color: var(--gold); background: linear-gradient(180deg, var(--gold-2), var(--gold)); }
/* CTA — gilded */
.cas-pay-cta {
font-family: var(--font-display, 'Playfair Display', serif); font-weight: 700;
font-size: 14px; letter-spacing: .01em; border: none; border-radius: 999px;
cursor: pointer; color: var(--gold-ink);
background: linear-gradient(180deg, var(--gold-2, #d8b878), var(--gold, #c9a45c));
transition: filter .15s, transform .15s, box-shadow .15s;
}
.cas-pay-cta:hover:not(:disabled) { filter: brightness(1.05); box-shadow: var(--shadow-md); }
.cas-pay-cta:active:not(:disabled) { transform: scale(.99); }
.cas-pay-cta-off, .cas-pay-cta:disabled {
background: var(--gold-soft); color: var(--ink-soft); cursor: not-allowed;
}
/* Fixed bottom bar */
.cas-pay-fixed {
background: var(--paper-2); border-top: 1px solid var(--gold);
box-shadow: 0 -4px 24px rgba(0,0,0,.28);
}
/* Modal */
.cas-pay-modal {
background: var(--paper-2); border: 1px solid var(--gold-soft);
border-radius: 1.5rem; box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.cas-pay-modal-title {
font-family: var(--font-display, 'Playfair Display', serif); font-weight: 700;
font-size: 19px; color: var(--ink);
}
/* Result / status card (payment-success · -failed · -cancelled) */
.cas-pay-result { position: relative; overflow: hidden; }
.cas-pay-result-stripe {
height: 3px;
background: linear-gradient(90deg, var(--gold-2), var(--gold) 55%, var(--cz-gold-deep) 110%);
}
.cas-pay-result-medallion {
width: 4rem; height: 4rem; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
border: 1px solid transparent;
box-shadow: inset 0 0 0 4px var(--paper-2), 0 6px 20px -8px rgba(0,0,0,.4);
}
.cas-pay-result-btn2 {
font-family: var(--font-display, 'Playfair Display', serif); font-weight: 700;
font-size: 13px; letter-spacing: .01em; color: var(--gold);
border: 1px solid var(--gold-soft); border-radius: 999px;
background: rgba(166,124,30,.04);
transition: border-color .15s, background .15s, color .15s;
}
.cas-pay-result-btn2:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--ink); }
/* ══ Halloween decoration vocabulary ══════════════════════════════════ */
/* Cobweb corner — drop .hw-cobweb on any position:relative card/panel */
.hw-cobweb { position: relative; }
.hw-cobweb::before { /* a gilt corner bracket, as on a picture frame */
content: ''; position: absolute; top: 6px; left: 6px; width: 22px; height: 22px;
pointer-events: none; z-index: 1;
background: no-repeat top left / contain
url("data:image/svg+xml;utf8,");
}
[dir="rtl"] .hw-cobweb::before { left: auto; right: 0; transform: scaleX(-1); }
/* Spooky divider — hairline with a centered bat mark */
.hw-rule {
position: relative; height: 1px; border: 0;
background: linear-gradient(90deg, transparent, var(--rule) 20%, var(--rule) 80%, transparent);
}
.hw-rule::after { /* a small brass lozenge at the centre */
content: '\25C6'; color: var(--gold); position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); font-size: 12px; line-height: 1;
background: var(--paper); padding: 0 .5rem; opacity: .8;
}
/* Glyph chip — pumpkin/bat/ghost accent mark (replaces casino ◆ pip) */
.hw-glyph { display: inline-flex; align-items: center; justify-content: center;
color: var(--pumpkin); font-size: .9em; line-height: 1; }
.section-eyebrow::before { content: none !important; color: initial !important; opacity: 1 !important; }
/* Motion off for reduced-motion users (atmosphere handles its own) */
@media (prefers-reduced-motion: reduce) {
.hw-atmo__bat, .hw-atmo__fog { animation: none !important; }
}
/* ══ Header: a mansion's front hall ═════════════════════════════════════
Quiet walnut bar, a double brass rule along its foot, the house name
set in italic beside the logo, and the primary nav as plain engraved
links with a brass rule under the current page. ══════════════════════ */
.hw-lanternpill { position: relative; }
.hw-flicker { animation: hw-flicker 2.6s ease-in-out infinite; }
@keyframes hw-flicker { 0%, 100% { opacity: 1; } 42% { opacity: .5; } 46% { opacity: .95; } 70% { opacity: .55; } }
.mm-signbar-lantern { display: none; }
.mm-signbar::after,
.mm-porch-rail::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; pointer-events: none;
border-top: 1px solid rgba(var(--hw-brass-rgb),.38); border-bottom: 1px solid rgba(var(--hw-brass-rgb),.14);
}
.mm-porch-rail { box-shadow: none !important; }
.mm-brand-seal {
display: inline-flex; align-items: center;
font-family: var(--font-text) !important; font-style: italic; font-weight: 400 !important;
font-size: 1.05rem !important; letter-spacing: 0 !important; color: var(--gold) !important;
padding-left: 1rem; border-left: 1px solid var(--rule);
}
.mm-shingle-row::before { content: none; }
#ob-hw-tabbar { background: var(--paper) !important; align-items: center; border-bottom: 1px solid var(--rule-soft); }
.mm-shingle-tab {
position: relative; flex: 0 0 auto;
display: inline-flex; align-items: center; white-space: nowrap;
padding: 0 14px; height: 48px;
font-family: var(--font-text); font-size: 1.05rem; font-weight: 500; letter-spacing: .01em; text-decoration: none;
color: var(--ink-2) !important; background: none; border: 0;
transition: color .16s ease;
}
.mm-shingle-tab:hover { color: var(--ink) !important; }
.mm-shingle-tab.active { color: var(--gold-2) !important; }
.mm-shingle-tab.active::after {
content: ''; position: absolute; left: 14px; right: 14px; bottom: 10px; height: 1px; background: var(--gold);
}
/* ── Dark/light toggle: "night clouds" ──
header.js (runHalloweenNightTransition) builds one moon, eight clouds
and four bats inside #pxThemeFx once, then re-randomizes each one's
position/size/timing/direction via CSS custom properties on every
toggle before playing .is-covering → .is-holding → .is-receding. The
clouds billow in from random spots (with the moon glowing in behind
them and bats flitting across in front) until they fully hide the
screen; the mode swap happens once covered, then everything scatters
back apart along equally random paths — no two toggles play alike. */
.px-fx--halloween-night::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(120% 90% at 50% 28%, rgb(58,26,31), rgb(6, 3, 10) 72%);
opacity: 0;
}
.px-fx--halloween-night.is-covering::before { animation: pxNightSkyIn 460ms ease-out forwards; }
.px-fx--halloween-night.is-holding::before { opacity: 1; }
.px-fx--halloween-night.is-receding::before { animation: pxNightSkyOut 640ms ease-in forwards; }
@keyframes pxNightSkyIn { to { opacity: 1; } }
@keyframes pxNightSkyOut { from { opacity: 1; } to { opacity: 0; } }
.px-fx__moon {
position: absolute; top: 14%; left: 50%;
width: min(20vw, 150px); aspect-ratio: 1;
transform: translate(-50%, -50%) scale(.4);
border-radius: 50%;
background: radial-gradient(circle at 36% 32%, #fffdf0 0%, #f4ecc7 42%, #cdbf8f 78%, #a89a68 100%);
box-shadow: 0 0 70px 22px rgba(255, 247, 214, .38), inset -10px -8px 0 rgba(0, 0, 0, .08);
opacity: 0;
}
.px-fx--halloween-night.is-covering .px-fx__moon { animation: pxMoonIn 520ms ease-out 100ms forwards; }
.px-fx--halloween-night.is-holding .px-fx__moon { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.px-fx--halloween-night.is-receding .px-fx__moon { animation: pxMoonOut 560ms ease-in forwards; }
@keyframes pxMoonIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes pxMoonOut { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(.5); } }
.px-fx__cloud {
position: absolute;
top: var(--top, 30%); left: var(--left, 30%);
width: 170px; height: 92px;
border-radius: 50%;
background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .5), rgba(58,26,31, .95) 68%);
box-shadow:
58px 16px 0 -6px rgba(58,26,31, .95),
-52px 20px 0 -10px rgba(58,26,31, .92),
26px -22px 0 -16px rgba(58,26,31, .88),
-30px 28px 0 4px rgba(58,26,31, .92),
92px -4px 0 -20px rgba(58,26,31, .85);
filter: drop-shadow(0 16px 26px rgba(6, 3, 12, .55));
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
.px-fx--halloween-night.is-covering .px-fx__cloud {
animation: pxCloudIn var(--in-dur, 480ms) ease-out var(--in-delay, 0ms) forwards;
}
.px-fx--halloween-night.is-holding .px-fx__cloud {
opacity: 1;
transform: translate(-50%, -50%) scale(var(--scale, 1));
}
.px-fx--halloween-night.is-receding .px-fx__cloud {
animation: pxCloudOut var(--out-dur, 480ms) ease-in var(--out-delay, 0ms) forwards;
}
@keyframes pxCloudIn {
0% { opacity: 0; transform: translate(calc(-50% - var(--drift, 0px)), -50%) scale(calc(var(--scale, 1) * .45)); }
55% { opacity: 1; }
100% { opacity: 1; transform: translate(-50%, -50%) scale(var(--scale, 1)); }
}
@keyframes pxCloudOut {
0% { opacity: 1; transform: translate(-50%, -50%) scale(var(--scale, 1)); }
100% { opacity: 0; transform: translate(calc(-50% + var(--drift, 0px)), -50%) scale(calc(var(--scale, 1) * .6)); }
}
.px-fx__bat {
position: absolute;
top: var(--by, 30%); left: -8%;
width: 32px; height: 15px;
background: #150a1f;
clip-path: polygon(50% 32%, 60% 8%, 65% 28%, 78% 2%, 84% 30%, 100% 16%, 80% 46%, 100% 64%, 78% 52%, 70% 78%, 60% 52%, 50% 68%, 40% 52%, 30% 78%, 22% 52%, 0% 64%, 20% 46%, 0% 16%, 16% 30%, 22% 2%, 35% 28%, 40% 8%);
opacity: 0;
filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5));
}
.px-fx--halloween-night.is-covering .px-fx__bat,
.px-fx--halloween-night.is-holding .px-fx__bat {
animation:
pxBatFly var(--bdur, 800ms) linear var(--bdelay, 0ms) forwards,
pxBatBob 480ms ease-in-out var(--bdelay, 0ms) infinite,
pxBatFlap 170ms ease-in-out var(--bdelay, 0ms) infinite;
}
@keyframes pxBatFly {
0% { left: -8%; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { left: 112%; opacity: 0; }
}
@keyframes pxBatBob {
0%, 100% { top: var(--by, 30%); }
50% { top: calc(var(--by, 30%) - 9%); }
}
@keyframes pxBatFlap {
0%, 100% { transform: scaleY(1) scaleX(var(--bdir, 1)); }
50% { transform: scaleY(.4) scaleX(var(--bdir, 1)); }
}
@media (prefers-reduced-motion: reduce) {
.hw-lanternpill::before, .hw-flicker { animation: none !important; }
.mm-signbar-lantern::after { animation: none !important; }
.mm-shingle-tab:hover { transform: none; }
.px-fx--halloween-night::before,
.px-fx__moon, .px-fx__cloud, .px-fx__bat { animation: none !important; }
}
/* ══ Drawer: The Crypt — bespoke haunted armoire (mobile side drawer) ══
Its own signature, not a palette swap of the shared drawer skeleton:
a torn-veil outer edge, a moon-glowed crypt-arch banner with a hanging
bat charm + wax-sealed avatar ring, spirit wisps drifting behind the
nav list, dripping-wax section rules, tombstone icon chips on every
row, and bubbling-cauldron CTAs. Motion is transform/opacity only and
gated by reduced-motion, mirroring hw-atmosphere.php's contract. ══ */
/* Torn-veil edge — replaces a flat border-inline-end.
#sideMenu is already `position:fixed` (Tailwind .fixed) which is itself
a valid containing block for this absolutely-positioned pseudo-element —
do NOT also set position:relative here, it would silently overwrite
.fixed (same specificity, this stylesheet loads after Tailwind's) and
break the drawer's slide-in/overlay behavior entirely. */
.hw-drawer::after {
content: ''; position: absolute; top: 0; bottom: 0; inset-inline-end: -1px; width: 13px;
pointer-events: none; z-index: 3;
background: var(--paper-2);
clip-path: polygon(0 0, 100% 3%, 8% 8%, 100% 13%, 6% 18%, 100% 24%, 10% 29%, 100% 35%,
4% 40%, 100% 46%, 8% 51%, 100% 57%, 6% 62%, 100% 68%, 10% 73%, 100% 79%,
4% 84%, 100% 90%, 8% 95%, 100% 100%, 0 100%);
box-shadow: 2px 0 8px rgba(10, 4, 18, .28);
}
[dir="rtl"] .hw-drawer::after { transform: scaleX(-1); }
/* Ambient panel glow behind the nav list — moon + violet fog, echoes --page-bg */
.hw-drawer-scroll { position: relative; z-index: 0; }
.hw-drawer-scroll::before {
content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(220px 160px at 90% 0%, rgba(202,169,79,.10), transparent 70%),
radial-gradient(260px 220px at 0% 100%, rgba(120,40,48,.14), transparent 72%);
}
/* Spirit wisps — drift up out of the fog behind the rows, then gutter out */
.hw-drawer-wisp {
position: absolute; bottom: 4%; width: 5px; height: 5px; border-radius: 50%;
background: radial-gradient(circle at 40% 35%, #fff, #c084fc 42%, rgba(120,40,48,0) 72%);
box-shadow: 0 0 10px 2px rgba(120,40,48,.45); opacity: 0; z-index: -1; pointer-events: none;
animation: hw-drawer-wisp-rise 11s ease-in 1 forwards; will-change: transform, opacity;
}
.hw-drawer-wisp--1 { left: 18%; animation-delay: 0s; }
.hw-drawer-wisp--2 { left: 52%; animation-delay: 3.6s; width: 4px; height: 4px; }
.hw-drawer-wisp--3 { left: 80%; animation-delay: 7.2s; }
@keyframes hw-drawer-wisp-rise {
0% { transform: translateY(0) scale(.6); opacity: 0; }
14% { opacity: .8; }
55% { transform: translateY(-160px) scale(1); }
100% { transform: translateY(-320px) scale(.35); opacity: 0; }
}
/* Crypt-arch banner — tattered pumpkin-ember hem + hanging bat charm */
.hw-drawer-banner { position: relative; overflow: hidden; }
.hw-drawer-banner::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; pointer-events: none;
border-top: 1px solid rgba(var(--hw-brass-rgb),.38); border-bottom: 1px solid rgba(var(--hw-brass-rgb),.14);
}
.hw-drawer-charm { display: none !important; }
.hw-drawer-charm { position: absolute; top: 4px; inset-inline-start: 72px; width: 24px; opacity: .5; color: #150a1f; z-index: 1; transform-origin: top center; }
html.dark .hw-drawer-charm { color: #0f0b09; opacity: .65; }
.hw-drawer-charm svg { width: 100%; height: auto; display: block; fill: currentColor; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
[dir="rtl"] .hw-drawer-charm { transform: scaleX(-1); }
/* Wax-sealed avatar ring — conic gilt band + dripping wax beads */
.hw-wax-ring { border-radius: 999px; }
.hw-wax-ring::before {
content: ''; position: absolute; inset: -3px; border-radius: 999px;
background: conic-gradient(from 200deg, var(--gold-2), var(--gold) 55%, var(--cz-gold-deep) 78%, var(--gold-2));
z-index: -1;
}
.hw-wax-ring::after {
content: ''; position: absolute; bottom: -5px; inset-inline-start: 50%; transform: translateX(-50%);
width: 6px; height: 7px; border-radius: 0 0 50% 50%;
background: linear-gradient(180deg, var(--gold-2), var(--cz-gold-deep));
box-shadow: 10px 3px 0 -2px var(--gold), -10px 1px 0 -3px var(--gold-2);
}
/* Section labels — carved-pumpkin marker + dripping-wax rule */
.hw-drawer-scroll .drawer-section-label { text-shadow: 0 0 10px rgba(var(--hw-brass-rgb), .18); }
.hw-drawer-scroll .drawer-section-label::after {
height: 2px;
background:
radial-gradient(circle, var(--gold-soft) 1.5px, transparent 1.6px) repeat-x left 2px / 7px 100%,
var(--rule);
}
/* Bat-mark rule between drawer nav groups needs to cut against the panel, not the page */
.hw-drawer-scroll .hw-rule::after { background: var(--paper-2); }
/* Tombstone icon chip on every nav row */
.drawer-nav-row { position: relative; z-index: 1; }
.hw-drawer-icon {
width: 26px; height: 24px; border-radius: 8px 8px 3px 3px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
background: linear-gradient(180deg, rgba(var(--hw-brass-deep-rgb),.10) 0%, rgba(58,26,31,.08) 100%);
border: 1px solid var(--gold-soft);
transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.drawer-nav-row:hover .hw-drawer-icon,
.drawer-nav-row:focus-visible .hw-drawer-icon {
transform: translateY(-1px); border-color: var(--gold);
background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 100%);
}
.drawer-nav-row:hover .hw-drawer-icon i,
.drawer-nav-row:focus-visible .hw-drawer-icon i { color: var(--gold-ink) !important; }
.drawer-nav-row:hover { background: radial-gradient(120px 40px at 0% 50%, var(--gold-soft), transparent 85%); }
/* Bubbling-cauldron CTAs — rising bead glow on hover/focus */
.drawer-login, .drawer-logout { position: relative; overflow: hidden; }
.drawer-login::before, .drawer-logout::before {
content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
background:
radial-gradient(4px 4px at 20% 85%, rgba(255,255,255,.7), transparent 70%),
radial-gradient(3px 3px at 55% 90%, rgba(255,255,255,.6), transparent 70%),
radial-gradient(3.5px 3.5px at 80% 85%, rgba(255,255,255,.65), transparent 70%);
animation: hw-cauldron-bubble 2.8s ease-in 4;
}
.drawer-login:hover::before, .drawer-login:focus-visible::before,
.drawer-logout:hover::before, .drawer-logout:focus-visible::before { opacity: 1; }
@keyframes hw-cauldron-bubble {
0% { transform: translateY(0); opacity: 0; }
10% { opacity: .9; }
80% { opacity: .3; }
100% { transform: translateY(-14px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hw-drawer-wisp { animation: none !important; display: none; }
.drawer-login::before, .drawer-logout::before { animation: none !important; }
.hw-drawer-icon { transition: none; }
}
/* ══ Mansion finish ══════════════════════════════════════════════════════
Small labels are set in italic text type rather than tracked capitals,
and the footer loses its pumpkin patch for a plain double brass rule. */
.ed-eyebrow {
font-family: var(--font-text); font-style: italic; font-weight: 500;
font-size: .98rem; letter-spacing: 0; text-transform: none; color: var(--gold);
}
.hw-patch__horizon, .hw-patch__lantern, .hw-patch__flicker { display: none !important; }
.hw-vine {
height: 4px; background: none !important;
border-top: 1px solid rgba(var(--hw-brass-rgb),.38); border-bottom: 1px solid rgba(var(--hw-brass-rgb),.14);
}
.hw-vine::before, .hw-vine::after { content: none !important; }
/* The shared stylesheet's .font-display utility loads after this file; the
theme's display face has to win over it. Icons inside keep their own font,
or a title's icon chip comes out empty. */
body .font-display, body .font-display :not(i, svg, [class*="fa-"]) { font-family: var(--font-display); }
/* Gilt portrait frame around a lot's main picture (auction/gallery.php,
mystery-box/hero.php), the same moulding as the home page's featured lot. */
.hm-portrait {
position: relative; padding: 12px;
background: linear-gradient(135deg, #6e5425 0%, #e2c78f 18%, #a8843f 38%, #f0dcaa 52%, #8a6a30 70%, #d8b878 86%, #6e5425 100%);
box-shadow: 0 30px 60px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,240,200,.35);
}
.hm-portrait::before {
content: ''; position: absolute; inset: 5px; pointer-events: none; z-index: 1;
border: 1px solid rgba(40,28,10,.55); box-shadow: inset 0 0 0 1px rgba(255,236,190,.35);
}
.hm-portrait__mat {
background: radial-gradient(80% 70% at 50% 40%, #2a1d1a, #0f0b09);
box-shadow: inset 0 0 0 1px rgba(var(--hw-brass-rgb),.45), inset 0 0 40px rgba(0,0,0,.85);
}
@media (max-width: 480px) { .hm-portrait { padding: 9px; } }
/* The mystery box page's box, hung the same way. */
.mb-pedestal {
border-radius: 0 !important;
background:
radial-gradient(80% 70% at 50% 40%, #2a1d1a, #0f0b09) padding-box,
linear-gradient(135deg, #6e5425 0%, #e2c78f 18%, #a8843f 38%, #f0dcaa 52%, #8a6a30 70%, #d8b878 86%, #6e5425 100%) border-box !important;
border: 12px solid transparent !important;
box-shadow: 0 30px 60px -28px rgba(0,0,0,.9), inset 0 0 0 1px rgba(var(--hw-brass-rgb),.45), inset 0 0 40px rgba(0,0,0,.85) !important;
}
/* Plugin pages that paint their main buttons with Tailwind's yellow/amber
gradient, and the lottery's gradient title, take the brass instead. */
.bg-gradient-to-r.from-yellow-400, .bg-gradient-to-r.from-yellow-500, .bg-gradient-to-r.from-amber-400, .bg-gradient-to-r.from-amber-500, .bg-gradient-to-r.from-orange-500 {
background-image: linear-gradient(180deg, var(--gold-2), var(--gold)) !important; color: var(--gold-ink) !important;
}
.bg-gradient-to-r.from-yellow-400 *, .bg-gradient-to-r.from-yellow-500 *, .bg-gradient-to-r.from-amber-400 *, .bg-gradient-to-r.from-amber-500 *, .bg-gradient-to-r.from-orange-500 * { color: inherit !important; }
.heading-gradient {
background-image: linear-gradient(115deg, #f0dcaa 0%, var(--gold-2) 40%, var(--gold) 100%) !important;
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* The gold chips keep dark lettering: the shared dark rule for buttons
(dynamic-theme.css) would letter them near-white. */
html.dark .wallet-hero-btn-primary,
html.dark .spin-btn.mb-open { color: #1c140c; }
/* ══ By day ═══════════════════════════════════════════════════════════════
The same frames and rules, re-inked for parchment: gilt becomes black
lacquer with a pumpkin bead, brass hairlines become ink, and glows that
only read on black become short paper-cut shadows. */
html:not(.dark) .hm-portrait {
background: linear-gradient(135deg, #2b211c 0%, #4a3a31 16%, #17110e 38%, #3a2d26 54%, #120d0b 72%, #33271f 88%, #1f1714 100%);
box-shadow: 6px 6px 0 -2px rgba(236,138,44,.9), 0 26px 40px -28px rgba(70,35,10,.6), 0 0 0 1px #1f1714;
}
html:not(.dark) .hm-portrait::before { border-color: #ec8a2c; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
html:not(.dark) .hm-portrait__mat {
background: radial-gradient(80% 70% at 50% 40%, #fffaf0, #eadbc0);
box-shadow: inset 0 0 0 1px rgba(31,23,20,.45), inset 0 0 30px rgba(120,70,20,.18);
}
html:not(.dark) .mb-pedestal {
background:
radial-gradient(80% 70% at 50% 40%, #fffaf0, #eadbc0) padding-box,
linear-gradient(135deg, #2b211c 0%, #4a3a31 16%, #17110e 38%, #3a2d26 54%, #120d0b 72%, #33271f 88%, #1f1714 100%) border-box !important;
box-shadow: 6px 6px 0 -2px rgba(236,138,44,.9), 0 26px 40px -28px rgba(70,35,10,.6), inset 0 0 0 1px rgba(31,23,20,.45) !important;
}
html:not(.dark) .mobile-glass-header { background: rgba(243,234,216,.88); }
html:not(.dark) .drawer-logout { color: var(--blood); border-color: rgba(168,38,43,.3); }
html:not(.dark) .drawer-logout:hover { background: rgba(168,38,43,.06); }
html:not(.dark) .ed-dropdown { box-shadow: var(--shadow-md); }
html:not(.dark) .ed-btn-primary, html:not(.dark) .ed-plan-cta, html:not(.dark) .drawer-login {
box-shadow: 2px 2px 0 0 #1f1714, inset 0 1px 0 rgba(255,255,255,.35);
border-color: #1f1714;
}
html:not(.dark) .ed-btn-primary:hover { box-shadow: 3px 3px 0 0 #1f1714, inset 0 1px 0 rgba(255,255,255,.35); }
html:not(.dark) .ed-btn-secondary { border-color: rgba(31,23,20,.55); }
html:not(.dark) .ed-btn-secondary:hover { border-color: #1f1714; background: var(--paper-2); }
html:not(.dark) .btn-view-all:hover { color: var(--gold); border-bottom-color: var(--gold); }
html:not(.dark) .ed-link-arrow:hover { color: var(--cz-gold-deep); }
html:not(.dark) .mm-shingle-tab.active { color: var(--gold) !important; }
html:not(.dark) .mm-signbar::after, html:not(.dark) .mm-porch-rail::after,
html:not(.dark) .hw-drawer-banner::after, html:not(.dark) .hw-vine {
border-top-color: rgba(31,23,20,.55); border-bottom-color: rgba(236,138,44,.55);
}
html:not(.dark) .hw-cobweb::before {
background-image: url("data:image/svg+xml;utf8,");
}
html:not(.dark) .hw-drawer-scroll::before {
background:
radial-gradient(220px 160px at 90% 0%, rgba(242,180,50,.16), transparent 70%),
radial-gradient(260px 220px at 0% 100%, rgba(75,48,95,.10), transparent 72%);
}
html:not(.dark) .hw-drawer-wisp { background: radial-gradient(circle at 40% 35%, #fff, #f2b432 42%, rgba(236,138,44,0) 72%); box-shadow: none; }
html:not(.dark) .hw-drawer-scroll .drawer-section-label { text-shadow: none; }
html:not(.dark) .hw-drawer-icon { background: var(--paper); border-color: rgba(31,23,20,.28); }
html:not(.dark) .heading-gradient { background-image: linear-gradient(115deg, var(--gold-2) 0%, var(--gold) 55%, var(--cz-gold-deep) 100%) !important; }
html:not(.dark) .ed-plan-featured .ed-plan-hairline { border-color: rgba(251,243,228,.28); }
html:not(.dark) .ed-plan:hover, html:not(.dark) .shop-card:hover, html:not(.dark) .ed-card-mystery:hover { border-color: #1f1714; }
html:not(.dark) .cas-pay-topbar { border-bottom-color: var(--gold-2); }
html:not(.dark) .cas-pay-fixed { box-shadow: 0 -10px 24px -14px rgba(70,35,10,.4); border-top-color: #1f1714; }
html:not(.dark) .cas-pay-modal { box-shadow: 6px 6px 0 -2px rgba(31,23,20,.85), 0 24px 50px -20px rgba(70,35,10,.45); border-color: rgba(31,23,20,.4); }
html:not(.dark) .cas-pay-title { color: var(--on-felt); }
/* The lozenge on plain section rules becomes a small bat by day (the home
sections' own rules keep their bare line). */
html:not(.dark) .hw-rule { overflow: visible; background: linear-gradient(90deg, transparent, rgba(31,23,20,.35) 20%, rgba(31,23,20,.35) 80%, transparent); }
html:not(.dark) .hw-rule:not([class*="hw-rule--"])::after {
content: ''; width: 46px; height: 16px; opacity: 1; padding: 0;
background: no-repeat center / 30px 13px url("data:image/svg+xml;utf8,"), var(--paper);
}
html:not(.dark) .hw-drawer-scroll .hw-rule:not([class*="hw-rule--"])::after { background-color: var(--paper-2); }
/* Payment results by day: a calling card with an ink edge, a candy-corn
rail and cobweb lace in the corner. */
html:not(.dark) .cas-pay-result {
border: 1px solid #1f1714; border-radius: 4px;
background: no-repeat top right / 80px var(--hw-cobweb-r), var(--paper-2);
box-shadow: 6px 6px 0 -2px #ec8a2c, 0 26px 50px -30px rgba(70,35,10,.5);
}
html:not(.dark) .cas-pay-result-stripe { height: 5px; border-bottom: 1px solid #1f1714; background: linear-gradient(90deg, #f2b432 0 33.3%, #ec8a2c 33.3% 66.6%, #fdf8ee 66.6%); }
html:not(.dark) .cas-pay-result-medallion { box-shadow: inset 0 0 0 4px var(--paper-2), 2px 2px 0 0 #1f1714; border-color: #1f1714 !important; }
html:not(.dark) .cas-pay-result-btn2 { border-color: rgba(31,23,20,.5); color: var(--ink); }
html:not(.dark) .cas-pay-cta { border: 1px solid #1f1714; box-shadow: 2px 2px 0 0 #1f1714; }
/* ── Dark/light toggle: the spider's web (assets/js/halloween.js) ── */
.px-fx--hw-web { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
/* The threads are spun in a colour that shows on the page being left, and
take the one that shows on the new mode's colour as the web fills */
.px-fx--hw-web.is-to-dark { --fx-fill: #1b1210; --fx-fill-2: #241712; --fx-silk: rgba(31, 23, 20, .72); --fx-silk-to: rgba(240, 222, 190, .7); --fx-rim: rgba(240, 222, 190, .85); --fx-body: #120c0a; --fx-mark: #ec8a2c; --fx-eye: #f2b432; --fx-bat: #0d0807; }
.px-fx--hw-web.is-to-light { --fx-fill: #fbf3e4; --fx-fill-2: #f3e5c9; --fx-silk: rgba(240, 222, 190, .8); --fx-silk-to: rgba(31, 23, 20, .72); --fx-rim: rgba(240, 222, 190, .9); --fx-body: #1f1714; --fx-mark: #d26a14; --fx-eye: #f2b432; --fx-bat: #2f1d40; }
.px-fx--hw-web > svg { position: absolute; inset: 0; overflow: visible; }
.px-fx--hw-web .hw-fx-veil { fill: var(--fx-fill); opacity: 0; }
.px-fx--hw-web .hw-fx-fills path { fill: var(--fx-fill); opacity: 0; }
.px-fx--hw-web .hw-fx-fills path.is-b { fill: var(--fx-fill-2); }
.px-fx--hw-web .hw-fx-drop,
.px-fx--hw-web .hw-fx-spokes path,
.px-fx--hw-web .hw-fx-strands path { fill: none; stroke: var(--fx-silk); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); }
.px-fx--hw-web .hw-fx-spokes path { stroke-width: 1.8; }
.px-fx--hw-web .hw-fx-spider {
position: absolute; left: var(--cx); top: 0; width: 88px; height: 88px; margin-left: -44px;
transform: translateY(-100px); filter: drop-shadow(0 0 1.5px var(--fx-rim)) drop-shadow(0 6px 10px rgba(0, 0, 0, .35));
}
.px-fx--hw-web .hw-fx-spider svg { display: block; width: 100%; height: 100%; }
.px-fx--hw-web .hw-fx-legs path { fill: none; stroke: var(--fx-body); stroke-width: 3.2; stroke-linecap: round; }
.px-fx--hw-web .hw-fx-abdomen, .px-fx--hw-web .hw-fx-head { fill: var(--fx-body); }
.px-fx--hw-web .hw-fx-mark { fill: var(--fx-mark); }
.px-fx--hw-web .hw-fx-eye { fill: var(--fx-eye); }
.px-fx--hw-web .hw-fx-bat { position: absolute; left: var(--cx); top: var(--cy); width: 56px; margin: -12px 0 0 -28px; opacity: 0; }
.px-fx--hw-web .hw-fx-bat svg { display: block; width: 100%; fill: var(--fx-bat); }
.px-fx--hw-web.is-dropping .hw-fx-drop { transition: stroke-dashoffset .3s cubic-bezier(.5, 0, .5, 1); stroke-dashoffset: 0; }
.px-fx--hw-web.is-dropping .hw-fx-spider { transition: transform .32s cubic-bezier(.45, 0, .35, 1.25); transform: translateY(calc(var(--cy) - 44px)); }
.px-fx--hw-web.is-spinning .hw-fx-spokes path { transition: stroke-dashoffset .26s cubic-bezier(.3, 0, .3, 1) calc(var(--i) * 22ms); stroke-dashoffset: 0; }
.px-fx--hw-web.is-spinning .hw-fx-strands path { transition: stroke-dashoffset .24s ease-out calc(90ms + (var(--k) - 1) * 40ms); stroke-dashoffset: 0; }
.px-fx--hw-web.is-spinning .hw-fx-spider { animation: hw-fx-spin .4s ease-in-out; }
.px-fx--hw-web.is-filling .hw-fx-fills path { transition: opacity .14s ease calc((var(--k) - 1) * 45ms); opacity: 1; }
.px-fx--hw-web.is-filling .hw-fx-drop,
.px-fx--hw-web.is-filling .hw-fx-spokes path,
.px-fx--hw-web.is-filling .hw-fx-strands path { transition: stroke .3s ease .1s; stroke: var(--fx-silk-to); stroke-dashoffset: 0; }
.px-fx--hw-web.is-filling .hw-fx-veil { transition: opacity .1s ease .3s; opacity: 1; }
.px-fx--hw-web.is-clearing .hw-fx-veil { transition: none; opacity: 0; }
.px-fx--hw-web.is-clearing .hw-fx-fills path { transition: opacity .2s ease calc((7 - var(--k)) * 45ms); opacity: 0; }
.px-fx--hw-web.is-clearing .hw-fx-spokes path,
.px-fx--hw-web.is-clearing .hw-fx-strands path,
.px-fx--hw-web.is-clearing .hw-fx-drop { transition: opacity .3s ease .25s; opacity: 0; stroke: var(--fx-silk-to); stroke-dashoffset: 0; }
.px-fx--hw-web.is-clearing .hw-fx-spider { transition: transform .45s cubic-bezier(.5, 0, .7, .3) .1s; transform: translateY(-110px); }
.px-fx--hw-web.is-clearing .hw-fx-bat { animation: hw-fx-bat .5s cubic-bezier(.3, 0, .6, 1) var(--bd) both; }
@keyframes hw-fx-spin { 50% { transform: translateY(calc(var(--cy) - 44px)) rotate(18deg); } }
@keyframes hw-fx-bat {
0% { opacity: 0; transform: translate(0, 0) scale(.3); }
20% { opacity: 1; }
50% { transform: translate(calc(var(--bx) * .5), calc(var(--by) * .5 - 20px)) scale(.85, .6); }
100% { opacity: 1; transform: translate(var(--bx), var(--by)) scale(1); }
}
/* ── Phones ──
.text-fit (assets/css/header.css) clips a title to one line with an
ellipsis; here it wraps, and long words ("Mystery Boxen") wrap whole. */
@media (max-width: 639px) {
html body .text-fit { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; word-break: normal; hyphens: manual; }
html body h2.text-fit { font-size: clamp(1.5rem, 8vw, 1.875rem); }
/* .truncate clips names and labels to one line with an ellipsis; on phones they wrap */
html body .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
}
/* At 360 the logo, App chip and lantern pill (or a German "Registrieren",
Arabic "التطبيق") need more than the row has: the logo gives way first,
then the padding. */
@media (max-width: 419px) {
html body .mobile-glass-header { padding-inline: .625rem; }
html body .mobile-glass-header > div { gap: .375rem; }
html body .mobile-glass-header > div:first-child { min-width: 0; flex: 0 1 auto; }
html body .mobile-glass-header > div:last-child { flex: none; }
html body .mobile-glass-header .logo-container { min-width: 0; }
html body .mobile-glass-header .logo-container img { max-width: min(130px, 100%); height: auto; max-height: 2.25rem; }
html body .mobile-glass-header .pwa-chip { padding-inline: .625rem; }
html body .mobile-glass-header .hw-lanternpill { padding-inline: .625rem; }
html body .mobile-glass-header .ed-btn-primary { padding-inline: .75rem !important; }
}
/* The shared dark sheet tints .bg-yellow-50 but has no light partner for
.text-yellow-800, which leaves search's "Did you mean" notice brown on brown. */
html.dark body .bg-yellow-50.text-yellow-800 { color: var(--ink) !important; }
/* ── Night: the shared dark sheet's stock slates and blues ──
Its .dark tokens fill every field, select and grey card with cool slate;
panel them in walnut instead. */
html.dark {
--bg-primary: #1d1513; --bg-secondary: #241a17; --bg-tertiary: #2b201c;
--text-primary: #efe6d3; --text-secondary: #cdbfa8; --text-tertiary: #a3968a;
--border-primary: rgba(201, 164, 92, .22); --border-secondary: rgba(201, 164, 92, .36);
}
/* This room keeps --theme-50 pale after dark, so a picked or hovered card
in the shared address list turned cream under bone-white ink. */
html.dark body .has-\[\:checked\]\:bg-theme-50:has(:checked),
html.dark body .hover\:bg-theme-50:hover { background-color: var(--gold-soft); }
html.dark body .has-\[\:checked\]\:border-theme-500:has(:checked) { border-color: var(--gold) !important; }
html body .accent-blue-600, html body .accent-purple-600, html body .accent-theme-600 { accent-color: var(--gold); }
/* Fixed Tailwind blues and purples (coupon Apply, "+ Add", icons) take the
brass, as skin/light.css gives them the pumpkin by day; header.css pins
its own dark blues with !important. */
html.dark body :is(.bg-purple-500, .bg-purple-600, .bg-indigo-500, .bg-indigo-600, .bg-blue-500, .bg-blue-600, .bg-violet-500, .bg-violet-600) { background-color: var(--gold) !important; }
html.dark body :is(.bg-purple-500, .bg-purple-600, .bg-indigo-500, .bg-indigo-600, .bg-blue-500, .bg-blue-600, .bg-violet-500, .bg-violet-600).text-white { color: var(--gold-ink) !important; }
html.dark body :is(.hover\:bg-purple-700, .hover\:bg-indigo-700, .hover\:bg-blue-700, .hover\:bg-violet-700):hover { background-color: var(--gold-2) !important; }
html.dark body :is(.text-purple-400, .text-purple-500, .text-purple-600, .text-indigo-400, .text-indigo-500, .text-indigo-600, .text-blue-400, .text-blue-500, .text-blue-600, .text-violet-500, .text-violet-600) { color: var(--gold-2) !important; }
html.dark body :is(.hover\:text-blue-700, .hover\:text-purple-700, .hover\:text-indigo-700):hover { color: var(--moon) !important; }
html.dark body :is(.focus\:ring-purple-400, .focus\:ring-blue-400, .focus\:ring-blue-500):focus { --tw-ring-color: rgba(201, 164, 92, .4); }
html.dark body :is(.focus\:border-purple-400, .focus\:border-blue-400, .focus\:border-blue-500):focus { border-color: var(--gold) !important; }
/* header.css pins .bg-white and .border-gray-100 to fixed slates after dark;
the language cards and their save bar sit on the walnut instead. */
html.dark body .lang-card.bg-white, html.dark body:has(.lang-card) .footer-safe .bg-white { background-color: var(--paper-2) !important; }
html.dark body .lang-card.border-gray-100 { border-color: var(--rule) !important; }
html.dark body .lang-card:has(input:checked) { border-color: var(--gold) !important; background-color: color-mix(in srgb, var(--gold) 10%, var(--paper-2)) !important; }
/* pages/home.css loads after this sheet and redraws .ed-plan-cta as an ink
pill in Inter; the home strips' Open Box and Buy Now keep the chip. */
html body .ed-plan-cta {
border-radius: var(--radius-sm); font-family: 'EB Garamond', sans-serif; font-weight: 700; letter-spacing: .03em;
background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 100%); color: var(--gold-ink);
}
html body .ed-plan-cta:hover { background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 100%); color: var(--gold-ink); }
/* .text-fit clips to its line box (header.css), and at a line-height of 1
Playfair's descenders were cut ("Privacv Policv"); pad them room and pull
the margin back so the layout stays put. */
html body :is(h1, h2).text-fit:not([class*="mb-"]) { padding-bottom: .14em; margin-bottom: -.14em; }
html body :is(h1, h2).text-fit[class*="mb-"] { padding-bottom: .14em; }
/* Cart expiry notice: a gold-washed slip with ink letters, the store's
gilt rather than the plain warn tone. */
html body div:has(> span > #cart-countdown) {
background: linear-gradient(var(--gold-soft), var(--gold-soft)), var(--paper-2);
border-color: color-mix(in srgb, var(--gold) 45%, transparent);
color: var(--ink);
}
html body div:has(> span > #cart-countdown) > svg { color: var(--gold); }
html.dark body div:has(> span > #cart-countdown) > svg { color: var(--gold-2); }
/* X's brand black disappears into the walnut after dark; ring it. */
html.dark body a.bg-black.text-white.rounded-xl[href*="/intent/"] { box-shadow: inset 0 0 0 1px rgba(239, 230, 211, .28); }
/* The negotiate-price form's Send prints stock amber; it takes the CTA chip. */
html body #shopB2bNegotiateForm button[type="submit"] {
background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 100%) !important; color: var(--gold-ink) !important;
border: 1px solid var(--gold); border-radius: var(--radius-sm); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
html:not(.dark) body #shopB2bNegotiateForm button[type="submit"] { border-color: #1f1714; box-shadow: 2px 2px 0 0 #1f1714, inset 0 1px 0 rgba(255, 255, 255, .35); }
/* Sold count and bar on a draw card: a fixed inline amber (and again from the
live stock script) that misses the brass after dark. */
html body [id^="tix-pct-"]:is([style*="#d97706"], [style*="217, 119, 6"]) { color: var(--gold) !important; }
html body [id^="tix-bar-"]:is([style*="#d97706"], [style*="217, 119, 6"]) { background: linear-gradient(90deg, var(--gold-2), var(--gold)) !important; }
/* Status tones (kernel 1.1.166): this theme's own green, amber, red and info hues
for the shared .px-tone-* chips and notes, each set so its chip and text
read at 4.5:1 or better on this theme's paper in light and dark. */
html:root { --px-good: #23765b; --px-warn: #b45309; --px-crit: #a6262b; --px-info: #9838fa; }
html.dark:root { --px-good: #9dd2bf; --px-warn: #fbbf23; --px-crit: #e0676a; --px-info: #bf83fc; }
/* Changing language, the scene (halloween.js): the cauldron the old name
drops into before the reload and the new one rises from after it, in
green smoke. The cauldron is the same on both pages, so the reload never
shows. */
.hw-lang-stage { background: color-mix(in srgb, var(--felt-2) 64%, transparent); }
.hw-lang-scene {
--hw-lang-ghost: #8fe3a9;
position: relative; display: flex; flex-direction: column; align-items: center;
width: min(560px, 100%); box-sizing: border-box; padding: 30px 20px 18px; text-align: center;
color: var(--on-felt); border-radius: var(--radius);
background: radial-gradient(90% 70% at 50% 100%, rgba(143, 227, 169, .12), transparent 70%), var(--brand-gradient);
box-shadow: inset 0 0 0 1px rgba(var(--hw-brass-2-rgb), .38), 0 34px 70px -28px rgba(0, 0, 0, .7);
font-family: var(--font-text);
}
.hw-lang-moon {
position: absolute; top: 16px; right: 20px; width: 30px; height: 30px; border-radius: 50%;
box-shadow: inset -8px 3px 0 0 var(--moon); transform: rotate(-20deg); opacity: .9;
}
.hw-lang-words {
position: relative; display: grid; place-items: center; width: 100%; padding: 0 8px; box-sizing: border-box;
font: 700 clamp(28px, 8.4vw, 46px)/1.1 var(--font-display);
}
.hw-lang-words > span { grid-area: 1 / 1; max-width: 100%; overflow-wrap: anywhere; }
.hw-lang-old { opacity: 0; transform: translateY(64px) scale(.3) rotate(10deg); }
.hw-lang-new { color: var(--hw-lang-ghost); text-shadow: 0 0 16px rgba(143, 227, 169, .55), 0 1px 2px rgba(0, 0, 0, .5); }
.hw-lang-pot { position: relative; z-index: 1; width: 170px; height: 118px; margin-top: 2px; }
.hw-lang-fire {
position: absolute; left: 50%; bottom: 0; width: 76px; height: 28px; margin-left: -38px;
display: flex; align-items: flex-end; justify-content: space-between;
}
.hw-lang-fire i {
width: 22px; height: 28px; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; transform-origin: 50% 100%;
background: radial-gradient(circle at 50% 78%, #fff3c4 0, var(--candy) 28%, var(--gold-2) 52%, rgba(236, 138, 44, 0) 74%);
}
.hw-lang-fire i:nth-child(2) { height: 34px; }
.hw-lang-cauldron {
position: absolute; left: 20px; right: 20px; top: 20px; height: 76px;
border-radius: 18px 18px 60px 60px / 14px 14px 56px 56px;
background: radial-gradient(120% 90% at 32% 22%, #4d4560 0, #221d2b 55%, #121017 100%);
box-shadow: inset 0 -10px 16px rgba(0, 0, 0, .45), 0 12px 18px -10px rgba(0, 0, 0, .7);
}
.hw-lang-cauldron::before {
content: ''; position: absolute; left: -10px; right: -10px; top: -8px; height: 18px; border-radius: 50%;
background: linear-gradient(#3e3649, #1a1620); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14);
}
.hw-lang-cauldron::after {
content: ''; position: absolute; left: 14px; right: 14px; bottom: -9px; height: 12px;
background: linear-gradient(90deg, #1a1620 0 12px, transparent 12px calc(100% - 12px), #1a1620 calc(100% - 12px));
}
.hw-lang-brew {
position: absolute; left: -3px; right: -3px; top: -4px; height: 12px; border-radius: 50%;
background: #5d3a78; box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .4);
}
.hw-lang-glow {
position: absolute; inset: 0; border-radius: 50%; background: var(--hw-lang-ghost);
box-shadow: 0 0 18px 6px rgba(143, 227, 169, .5);
}
.hw-lang-brew i {
position: absolute; bottom: 3px; left: 16%; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box;
border: 1.5px solid rgba(255, 255, 255, .6); opacity: 0; transform: translateY(-14px) scale(1.1);
}
.hw-lang-brew i:nth-of-type(2) { left: 34%; width: 7px; height: 7px; }
.hw-lang-brew i:nth-of-type(3) { left: 52%; }
.hw-lang-brew i:nth-of-type(4) { left: 68%; width: 6px; height: 6px; }
.hw-lang-brew i:nth-of-type(5) { left: 80%; width: 8px; height: 8px; }
.hw-lang-smoke { position: absolute; left: 50%; top: 18px; width: 0; height: 0; }
.hw-lang-smoke i {
position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; border-radius: 50%;
background: radial-gradient(circle, rgba(143, 227, 169, .7), rgba(143, 227, 169, 0) 68%);
opacity: 0; --hw-lang-sx: 0px;
}
.hw-lang-smoke i:nth-child(1) { --hw-lang-sx: -26px; }
.hw-lang-smoke i:nth-child(2) { --hw-lang-sx: 22px; }
.hw-lang-smoke i:nth-child(3) { --hw-lang-sx: -6px; }
.hw-lang-smoke i:nth-child(4) { --hw-lang-sx: 30px; }
.hw-lang-tag {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin-top: 12px;
font: 700 12px/1 var(--font-display); letter-spacing: .14em; color: var(--on-felt-soft);
}
.hw-lang-end { display: inline-flex; align-items: center; gap: 6px; }
.hw-lang-flag { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.hw-lang-arrow { color: var(--hw-lang-ghost); }
/* Out: the cauldron comes up bubbling and the old name drops in. */
.px-lang-stage-out .hw-lang-scene { animation: hw-lang-scene-in .34s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .hw-lang-old { animation: hw-lang-drop .48s cubic-bezier(.5, 0, .75, .4) .36s both; }
.px-lang-stage-out .hw-lang-new { opacity: 0; }
.px-lang-stage-out .hw-lang-glow { animation: hw-lang-glow-on .24s ease-out .6s both; }
.hw-lang-stage .hw-lang-brew i { animation: hw-lang-bubble .32s ease-out 2 both; }
.hw-lang-stage .hw-lang-brew i:nth-of-type(2) { animation-delay: .12s; }
.hw-lang-stage .hw-lang-brew i:nth-of-type(3) { animation-delay: .24s; }
.hw-lang-stage .hw-lang-brew i:nth-of-type(4) { animation-delay: .06s; }
.hw-lang-stage .hw-lang-brew i:nth-of-type(5) { animation-delay: .18s; }
.hw-lang-stage .hw-lang-fire i { animation: hw-lang-flicker .36s ease-in-out 2 both; }
.hw-lang-stage .hw-lang-fire i:nth-child(2) { animation-delay: .08s; }
.hw-lang-stage .hw-lang-fire i:nth-child(3) { animation-delay: .04s; }
/* In: the brew turns, the new name rises in smoke and the cauldron goes. */
.px-lang-stage-in .hw-lang-glow { animation: hw-lang-glow-off .4s ease-in .45s both; }
.px-lang-stage-in .hw-lang-smoke i { animation: hw-lang-smoke .8s ease-out both; }
.px-lang-stage-in .hw-lang-smoke i:nth-child(2) { animation-delay: .1s; }
.px-lang-stage-in .hw-lang-smoke i:nth-child(3) { animation-delay: .18s; }
.px-lang-stage-in .hw-lang-smoke i:nth-child(4) { animation-delay: .24s; }
.px-lang-stage-in .hw-lang-new { animation: hw-lang-rise .55s cubic-bezier(.2, .8, .3, 1.1) .2s both; }
.px-lang-stage-in .hw-lang-scene { animation: hw-lang-scene-out .25s ease-in 1s both; }
@keyframes hw-lang-scene-in { from { transform: translateY(36px) scale(.96); opacity: 0; } }
@keyframes hw-lang-scene-out { to { transform: translateY(-18px); opacity: 0; } }
@keyframes hw-lang-drop {
0% { transform: none; opacity: 1; }
25% { transform: translateY(-10px) rotate(-4deg); opacity: 1; }
}
@keyframes hw-lang-glow-on { from { opacity: 0; } }
@keyframes hw-lang-glow-off { to { opacity: .15; } }
@keyframes hw-lang-bubble { 0% { opacity: 0; transform: translateY(2px) scale(.4); } 40% { opacity: 1; } }
@keyframes hw-lang-flicker { 50% { transform: scale(.88, 1.2); opacity: .8; } }
@keyframes hw-lang-smoke {
from { opacity: 0; transform: translate(var(--hw-lang-sx), 0) scale(.4); }
35% { opacity: .9; }
to { opacity: 0; transform: translate(calc(var(--hw-lang-sx) * 1.6), -100px) scale(1.7); }
}
@keyframes hw-lang-rise {
from { opacity: 0; transform: translateY(60px) scale(.4); filter: blur(8px); }
60% { opacity: 1; filter: blur(1px); }
to { filter: blur(0); }
}
@media (max-width: 460px) {
.hw-lang-moon { display: none; }
.hw-lang-scene { padding: 24px 14px 16px; }
}
/* Phones: the hero's two buttons stay side by side, each as wide as its
label needs, their text and padding shrinking with the screen; a label
still too long takes two even lines inside its button. A home section's title and its "View all" link
share one row too: the title keeps a little under half of it, breaking
between words if it must, and only a very long link label takes two
lines. */
@media (max-width: 639px) {
html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: .5rem; }
html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) > :is(.ed-btn-primary, .ed-btn-secondary) {
flex: 1 1 auto; min-width: min-content; width: auto; margin: 0; justify-content: center; text-align: center; white-space: normal; text-wrap: balance;
padding-inline: clamp(.5rem, 2.6vw, 1.25rem); font-size: clamp(.75rem, 3.5vw, .9375rem); line-height: 1.15;
}
html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) > :is(.ed-btn-primary, .ed-btn-secondary) > :is(svg, i, img) { flex: none; }
html body div.flex.justify-between:has(> div h2.text-fit):has(> a) { flex-direction: row; flex-wrap: nowrap; align-items: flex-end; column-gap: .75rem; }
html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > div { flex: 1 1 0; min-width: 45%; }
html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > a { flex: 0 1 auto; max-width: 55%; margin: 0; white-space: normal; text-wrap: balance; text-align: center; font-size: .8125rem; line-height: 1.2; letter-spacing: .02em; gap: .375rem; }
html body div.flex.justify-between:has(> div h2.text-fit):has(> a) h2.text-fit { font-size: clamp(1.25rem, 6.4vw, 1.75rem); overflow-wrap: break-word; }
}
/* Confirm windows at night: OK takes the dark gold ink of the theme's night
buttons; white on the pale gold stood near 2.3:1. */
html.dark body .px-confirm__btn--ok:not(.px-confirm__btn--destructive) { color: var(--gold-ink); }
/* Upload progress at night (components/upload-progress-modal.php is
inline-styled for white; the daytime plaque is in skin/light.css): a
walnut plaque with a brass bead on an oxblood scrim. */
html.dark body #uploadProgressOverlay { background: rgba(33, 16, 19, .72) !important; }
html.dark body #uploadProgressOverlay > [role="dialog"] {
border-radius: 4px !important; background: linear-gradient(180deg, var(--paper-2), var(--paper)) !important;
border: 1px solid rgba(var(--hw-brass-rgb), .55); box-shadow: inset 0 0 0 4px var(--paper-2), inset 0 0 0 5px rgba(var(--hw-brass-rgb), .3), 0 30px 60px -20px rgba(0, 0, 0, .85) !important;
font-family: var(--font-text);
}
html.dark body #uploadProgressOverlay [role="dialog"] > div:first-child > span {
border-radius: 50% !important; background: linear-gradient(150deg, var(--gold-2), var(--gold)) !important; color: var(--gold-ink) !important;
}
html.dark body #upTitle { font-family: var(--font-display); font-size: 1.15rem !important; color: var(--ink) !important; }
html.dark body #upSub { font-style: italic; font-size: .9rem !important; color: var(--ink-soft) !important; }
html.dark body #uploadProgressOverlay div:has(> #upBar) { background: rgba(0, 0, 0, .35) !important; border: 1px solid rgba(var(--hw-brass-rgb), .3); }
html.dark body #upBar { background: linear-gradient(90deg, var(--gold), var(--gold-2)) !important; }
html.dark body #upMsg { color: var(--ink-soft) !important; white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere; }
html.dark body #upPct { font-family: var(--font-display); color: var(--gold-2) !important; }
html[dir="rtl"].dark body #upSub { font-style: normal; }
/* Reduced motion: the live pings, bobbing icons, badge pulses and the
mystery box winners rail used in this theme's components hold still;
the rail scrolls by hand instead. */
@media (prefers-reduced-motion: reduce) {
html body :is(.animate-ping, .animate-bounce, .animate-pulse-soft, .float-animate, .ghero-casino__live, .flash-glow, .hw-flicker, .animate-marquee) { animation: none !important; }
html body .cas-win-rail:has(.animate-marquee) { overflow-x: auto; }
}
/* Words on the theme's good tone (free delivery, discounts). */
html body .hw-good { color: var(--px-good); }
/* Stock Tailwind greens are too pale for small print on parchment. */
html:not(.dark) body :is(.text-emerald-600, .text-green-600) { color: var(--px-good); }
/* The site's accent steps as text and fills. At night the 600 step is a
dull brass that sinks into the walnut, so plain text-theme-600 takes the
400; white lettering on the 500 fill becomes the dark gold ink. */
html.dark body :is(.text-theme-600:not([class*="dark:text-"]), [style^="color:var(--theme-600"]) { color: var(--theme-400) !important; }
html body .bg-theme-500.text-white { color: var(--gold-ink); }
/* At night every picture well is lit from above like a portrait under a
picture light, so black speakers, phones and boxes keep their outline
against the walnut instead of sinking into it. */
html.dark { --hw-well: radial-gradient(72% 64% at 50% 40%, #5c483b 0%, #46362c 50%, #382b24 100%); }
html.dark body .hw-well { background: var(--hw-well) !important; }
html.dark body :is(.hm-frame__mat, .hm-portrait__mat) { background: var(--hw-well); }
/* Recent winners strip. It also stops while one of its cards has focus,
slides towards the reading side on right-to-left pages (the shared loop
only runs leftwards, which empties the row there), and holds still with
each winner shown once when there are too few of them to fill the row
(data-wt-still, set by assets/js/components/home/winner-ticker.js). */
html body .wt-wrap:focus-within .wt-track { animation-play-state: paused; }
@keyframes wt-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: no-preference) {
html[dir="rtl"] body .wt-track { animation-name: wt-scroll-rtl; }
}
html body .wt-wrap[data-wt-still] .wt-track { animation: none; transform: none; margin-inline: auto; }
html body .wt-wrap[data-wt-still] .wt-card[data-wt-repeat] { display: none; }
/* Windows (wallet, sign-out and the plugins' windows) sit on their own panel,
so the secondary text, accent links and buttons in them take the deeper
shades below to read at 4.5:1 there; the page around keeps its own. */
html:not(.dark) [role="dialog"] {
--theme-500: #a25210;
--gold-ink: #0d0907;
}
html:not(.dark) [role="dialog"] :is(.wallet-hero-btn-primary, .ed-btn-primary, .spin-btn, [class*="from-yellow-"], [class*="from-amber-"]) {
color: #0d0907;
}
/* rev 868fe5109c9f2a2b */