/* ============================================================
NEW YEAR'S EVE THEME — a midnight party over the city.
Same class surface as editorial/theme.css, so shared header,
footer, drawer and component classes stay styled.
Built from the last night of the year: a skyline with its
windows lit, fireworks over the roofs, a split-flap board
counting down to midnight, confetti and gold-foil tickets
lettered like an invitation. Midnight ink and gold by night
(the default); by day the morning after, ivory and gold foil
under a pale dawn with the confetti still falling.
The theme sets the --theme-* accent ramp itself (gold by
night, deep foil by day), so the admin's accent colour
setting does not apply while it is active.
============================================================ */
:root {
--font-display: 'Bona Nova SC', 'Inter Tight', Georgia, serif;
--font-ui: 'Inter Tight', 'Inter', system-ui, sans-serif;
--paper: #f6f3ec;
--paper-2: #ffffff;
--paper-3: #ece8de;
--ink: #151a3b;
--ink-2: #3a3f60;
--ink-soft: #676b88;
--rule: rgba(21, 26, 59, 0.13);
--rule-soft: rgba(21, 26, 59, 0.07);
--radius: 14px;
--radius-sm: 10px;
--shadow: 0 1px 2px rgba(21, 26, 59, .06), 0 6px 16px -8px rgba(21, 26, 59, .18);
--shadow-md: 0 2px 4px rgba(21, 26, 59, .06), 0 18px 34px -16px rgba(21, 26, 59, .32);
/* Foil gold */
--theme-50: #fbf6e8;
--theme-100: #f5e9c6;
--theme-200: #ead292;
--theme-300: #dcb862;
--theme-400: #c99d3e;
--theme-500: #b4862a;
--theme-600: #8a6312;
--theme-700: #6d4c0c;
--theme-800: #4f3708;
--theme-900: #322204;
--theme-500-rgb: 180, 134, 42;
--theme-600-rgb: 138, 99, 18;
/* Midnight, the colour of the night panels in both modes */
--night: #0b1031;
--night-2: #141b45;
--night-3: #1d2658;
--on-night: #f7f1e1;
--on-night-soft: rgba(247, 241, 225, .74);
/* Firework colours: deep enough to read on ivory by day */
--fw-gold: #c99327; --fw-rose: #d8436d; --fw-aqua: #16968f; --fw-violet: #6a52d6; --fw-ivory: #1d2552;
/* Gold foil, for tickets, rules and the main buttons by night */
--foil: linear-gradient(115deg, #b98a2e 0%, #f2d88f 20%, #d3a446 38%, #fbe8aa 55%, #c59132 74%, #efcf82 100%);
--foil-flat: #d9ae55;
--foil-ink: #241a05;
/* Names other themes' shared markup reaches for */
--gold: #b4862a;
--gold-2: #d9ae55;
--gold-soft: rgba(180, 134, 42, 0.1);
--gold-ink: #151a3b;
--felt: #0b1031;
--felt-2: #141b45;
--on-felt: #f7f1e1;
--on-felt-soft: rgba(247, 241, 225, 0.78);
--peacock: #16968f;
--peacock-soft: rgba(22, 150, 143, 0.11);
--red: #8a6312;
--red-soft: rgba(180, 134, 42, 0.1);
--rose: #d8436d;
--rose-soft: rgba(180, 134, 42, 0.1);
--notify-accent: var(--theme-500);
--nav-accent: var(--theme-600);
--hdr-strip-bg: #0b1031;
--hdr-strip-rule: transparent;
--text-primary: var(--ink);
/* Buttons: midnight with gold lettering by day, gold foil by night */
--btn-bg: #161c48;
--btn-bg-hover: #212a63;
--btn-ink: #f6dd98;
--btn-shadow: inset 0 0 0 1px rgba(217, 174, 85, .55), 0 8px 18px -10px rgba(11, 16, 49, .7);
--btn-shadow-hover: inset 0 0 0 1px rgba(242, 216, 143, .9), 0 12px 22px -10px rgba(11, 16, 49, .7);
/* Confetti on a gold hairline: the theme's border band */
--confetti-band: url("data:image/svg+xml;utf8,") repeat-x left center / 140px 14px;
/* Gold dust across the page */
--stars: url("data:image/svg+xml;utf8,");
/* The city: lit windows over two rows of roofs, as a 1200×150 tile */
--skyline: url("data:image/svg+xml;utf8,");
--skyline-night: url("data:image/svg+xml;utf8,");
--skyline-foot: url("data:image/svg+xml;utf8,");
/* The night sky behind the footer, the winners page, the splash and the
wallet, in both modes */
--night-bg:
radial-gradient(520px 300px at 85% 0%, rgba(169, 155, 255, .22), transparent 70%),
radial-gradient(460px 280px at 8% 10%, rgba(242, 205, 114, .14), transparent 70%),
radial-gradient(600px 300px at 50% 120%, rgba(255, 106, 149, .12), transparent 70%),
linear-gradient(180deg, #0b1031 0%, #0a0e2a 100%);
--night-stars: url("data:image/svg+xml;utf8,");
--page-bg: var(--stars) repeat, var(--paper);
}
html.dark {
--paper: #0a0e2a;
--paper-2: #121838;
--paper-3: #1b2249;
--ink: #f5f0e2;
--ink-2: #d8d3c4;
--ink-soft: #a0a3bf;
--rule: rgba(245, 240, 226, 0.13);
--rule-soft: rgba(245, 240, 226, 0.07);
--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px -8px rgba(0, 0, 0, .7);
--shadow-md: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 36px -14px rgba(0, 0, 0, .85);
--theme-50: #1a1a2c;
--theme-100: #2a2638;
--theme-200: #5a4a2a;
--theme-300: #f8e3a8;
--theme-400: #f2d48a;
--theme-500: #e7c26a;
--theme-600: #f0cf7f;
--theme-700: #f8e3a8;
--theme-800: #fbeec8;
--theme-900: #fdf7e4;
--theme-500-rgb: 231, 194, 106;
--theme-600-rgb: 240, 207, 127;
--fw-gold: #f2cd72; --fw-rose: #ff6a95; --fw-aqua: #5ee0d6; --fw-violet: #a99bff; --fw-ivory: #fff6dc;
--gold: #f0cf7f;
--gold-2: #f8e3a8;
--gold-soft: rgba(231, 194, 106, 0.13);
--felt: #070a22;
--felt-2: #121838;
--peacock: #5ee0d6;
--peacock-soft: rgba(94, 224, 214, 0.13);
--red: #f0cf7f;
--red-soft: rgba(231, 194, 106, 0.14);
--rose: #ff6a95;
--rose-soft: rgba(231, 194, 106, 0.14);
--nav-accent: var(--theme-500);
--hdr-strip-bg: #060920;
--btn-bg: var(--foil);
--btn-bg-hover: linear-gradient(115deg, #c99a3c 0%, #f8e3a8 25%, #e0b456 45%, #fdf0c0 60%, #d39f3e 80%, #f5da94 100%);
--btn-ink: #1a1405;
--btn-shadow: 0 1px 0 rgba(255, 246, 220, .5) inset, 0 8px 22px -10px rgba(242, 205, 114, .5);
--btn-shadow-hover: 0 1px 0 rgba(255, 246, 220, .6) inset, 0 12px 28px -10px rgba(242, 205, 114, .65);
--stars: var(--night-stars);
--page-bg:
radial-gradient(900px 420px at 15% -140px, rgba(169, 155, 255, 0.1), transparent 70%) no-repeat,
radial-gradient(900px 420px at 90% -160px, rgba(242, 205, 114, 0.08), transparent 70%) no-repeat,
var(--night-stars) repeat,
var(--paper);
}
/* ── Materials ──
The pieces every surface is built from, shared by the skin sheets
(assets/css/skin/) and the plugin variants:
- the four firework colours (--fw-*) for fills and marks, with --ink-*
for lettering in those colours on paper;
- the golden ticket: a card with a half-round notch cut from each side
(--ticket-notch, a mask) and a perforated tear line (--perf);
- the split-flap tile (--flap-face, --flap-ink) for numbers that count:
the current page, a day of the streak, a stat;
- the foil seal, a twenty-point starburst sticker (--seal-mask) behind
icons, toasts and badges;
- the confetti band across the top of every sheet and dialog, a curled
streamer (--streamer-rule) under headings, a spark (--spark) in front
of kickers and the midnight clock (--clock-dot);
- the invitation's double gold rule (--invite-rule) inside cards that
ask for something, and the city skyline along the foot of a scene. */
:root {
--ink-gold: #7a560c; --ink-rose: #a8274f; --ink-aqua: #0d6d68; --ink-violet: #4a35a8;
--theme-600-ink: #f6dd98;
/* The notches sit at the middle; a card that wants them elsewhere
writes the mask out with its own --notch-y, since a custom property
resolves where it is declared. */
--ticket-notch:
radial-gradient(circle 10px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
radial-gradient(circle 10px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
--perf: repeating-linear-gradient(90deg, rgba(21, 26, 59, .26) 0 7px, transparent 7px 12px);
--flap-face: linear-gradient(180deg, #1d2658 0 calc(50% - 1px), #05081c calc(50% - 1px) calc(50% + 1px), #141b45 calc(50% + 1px));
--flap-ink: #f6dd98;
--seal-mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat;
--streamer-rule: url("data:image/svg+xml;utf8,");
--spark: url("data:image/svg+xml;utf8,");
--clock-dot: url("data:image/svg+xml;utf8,");
--invite-rule: inset 0 0 0 5px var(--paper-2), inset 0 0 0 6px rgba(201, 154, 60, .75);
--foil-edge: linear-gradient(90deg, #b98a2e, #f2d88f 18%, #d3a446 36%, #fbe8aa 54%, #c59132 72%, #efcf82 90%, #b98a2e);
--fw-stripe: repeating-linear-gradient(90deg, var(--fw-gold) 0 16px, var(--fw-rose) 16px 32px, var(--fw-aqua) 32px 48px, var(--fw-violet) 48px 64px);
/* Behind a product: a pale dawn over the roofs, a burst of gold
overhead */
--party-view:
radial-gradient(circle at 50% 38%, rgba(242, 216, 143, .6) 0 14%, rgba(242, 216, 143, 0) 44%),
var(--skyline) repeat-x center bottom / auto 34%,
linear-gradient(180deg, #f3eee6 0, #f8efe6 58%, #fbf8f1 100%);
}
html.dark {
--ink-gold: #f2cd72; --ink-rose: #ff8fb0; --ink-aqua: #7fe9e0; --ink-violet: #c2b8ff;
--theme-600-ink: #1a1405;
--perf: repeating-linear-gradient(90deg, rgba(245, 240, 226, .3) 0 7px, transparent 7px 12px);
--invite-rule: inset 0 0 0 5px var(--paper-2), inset 0 0 0 6px rgba(242, 205, 114, .55);
--streamer-rule: url("data:image/svg+xml;utf8,");
--spark: url("data:image/svg+xml;utf8,");
--party-view:
radial-gradient(circle at 50% 38%, rgba(169, 155, 255, .3) 0 14%, rgba(169, 155, 255, 0) 44%),
var(--skyline-night) repeat-x center bottom / auto 34%,
var(--night-stars),
linear-gradient(180deg, #141b45 0, #0f1438 60%, #0a0e2a 100%);
}
/* ── Game palette ──
The earn-games arena hands these to each HTML5 board, so 2048 tiles, hex
cells and word-grid letters come out as split-flap tiles and foil: ivory
and midnight by day, midnight and gold by night. Tiles rise from ivory
through gold, rose and aqua to violet and midnight. */
:root {
--game-bg: #f6f3ec;
--game-surface: #e9e3d3;
--game-surface-2: #ffffff;
--game-ink: #151a3b;
--game-muted: #676b88;
--game-accent: #161c48;
--game-accent-ink:#f6dd98;
--game-good: #16968f;
--game-bad: #d8436d;
--game-tile-1: #fbf1d4;
--game-tile-2: #f2d88f;
--game-tile-3: #e2b04f;
--game-tile-4: #f3a3bb;
--game-tile-5: #d8436d;
--game-tile-6: #4fbdb4;
--game-tile-7: #6a52d6;
--game-tile-8: #161c48;
--game-radius: 8px;
--game-font: 'Inter Tight', 'Inter', system-ui, sans-serif;
--game-font-css: "/assets/themes/new-years-eve/assets/fonts/fonts.css";
/* Arena chrome (assets/css/game-arena.css): ivory and gold by day, not a
dark screen */
--game-arena-screen: #fbf8f1;
--game-arena-coins: #8a6312;
--game-arena-win: #16968f;
--game-arena-danger: #d8436d;
--game-pattern: url("data:image/svg+xml;utf8,");
}
html.dark {
--game-bg: #0a0e2a;
--game-surface: #121838;
--game-surface-2: #1d2658;
--game-ink: #f5f0e2;
--game-muted: #a0a3bf;
--game-accent: #e7c26a;
--game-accent-ink:#1a1405;
--game-good: #5ee0d6;
--game-bad: #ff6a95;
--game-tile-1: #1d2658;
--game-tile-2: #2c3672;
--game-tile-3: #4a3d9e;
--game-tile-4: #7c66e0;
--game-tile-5: #2a9e96;
--game-tile-6: #e2557f;
--game-tile-7: #e7c26a;
--game-tile-8: #fbe8aa;
--game-arena-screen: #0b1031;
--game-arena-coins: #f2cd72;
--game-arena-win: #5ee0d6;
--game-arena-danger: #ff6a95;
--game-pattern: url("data:image/svg+xml;utf8,");
}
/* ── Base ──
Tailwind's compiled sheet loads after the theme, so selectors that must
beat its single-class utilities carry an extra html qualifier. */
html body {
background: var(--page-bg);
color: var(--ink);
font-family: var(--font-ui);
}
html .font-sans { font-family: var(--font-ui); }
html .font-display, h1.display, h2.display, h3.display {
font-family: var(--font-display);
font-weight: 700;
font-synthesis: none;
letter-spacing: .01em;
font-variant-numeric: lining-nums;
}
.display-italic { font-style: normal; }
/* Figures set in tabular columns read better in the UI face: the engraved
display face draws old-style figures there. */
html .font-display.tabular-nums, html .font-display[class*="tabular"] { font-family: var(--font-ui); font-weight: 800; letter-spacing: 0; }
::selection { background: #f2d88f; color: #151a3b; }
.text-gradient-theme { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--theme-600); }
.ed-eyebrow {
font-family: var(--font-ui);
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.16em;
color: var(--theme-600);
}
/* Arabic and Urdu letters join; tracking would pull them apart. */
[dir="rtl"] :is(.ed-eyebrow, .section-eyebrow, .ed-section-cap, .drawer-section-label, .ed-subnav-eyebrow, .ny-strip-chip,
.ny-hero__kicker, .ny-board__title, .ny-board__unit, .ny-ticket__kind, .ny-ticket__admit, .ny-win__head, .ny-wn__eyebrow, .ny-wn__label, .ny-wn__shop) { letter-spacing: 0; }
.ed-eyebrow-tight { font-size: 9px !important; letter-spacing: 0 !important; white-space: nowrap !important; }
/* Section eyebrow — a four-point spark in front of the label */
html .section-eyebrow {
display: inline-flex; align-items: center; gap: 0.55rem;
font-family: var(--font-ui);
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.16em;
color: var(--theme-600);
margin-bottom: 0.7rem;
}
html .section-eyebrow::before {
content: ''; flex-shrink: 0;
width: 12px; height: 12px;
background: var(--foil);
clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.btn-view-all {
display: inline-flex; align-items: center; gap: 0.45rem;
font-family: var(--font-ui);
font-size: 0.9rem; font-weight: 600;
white-space: nowrap; flex-shrink: 0;
color: var(--ink);
padding: .3rem .1rem 2px;
border-bottom: 2px solid var(--theme-500);
text-decoration: none;
transition: gap 0.18s ease;
}
.btn-view-all:hover { gap: 0.75rem; }
[dir="rtl"] .btn-view-all svg { transform: scaleX(-1); }
.ed-rule { background-color: var(--rule); }
.ed-rule-soft { background-color: var(--rule-soft); }
.ed-grain::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--stars); }
.ed-folio { font-family: var(--font-display); font-weight: 700; color: var(--theme-600); }
/* ── Header ── */
#desktopHeader .hdr-search {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: 999px;
}
#desktopHeader .hdr-search:focus-within { border-color: var(--theme-500); box-shadow: 0 0 0 3px var(--gold-soft); }
.ed-search { background: transparent; border: none; }
.hdr-strip, .hdr-strip .ed-status { color: rgba(247, 241, 225, 0.88); }
.hdr-strip a:hover, .hdr-strip button:hover { color: #f2d88f; }
/* The confetti band: scattered confetti on a gold hairline, under the
main header bar and wherever a section needs a border. */
.ny-band { height: 14px; background: var(--confetti-band); }
/* The same band over a solid ground, where it sits on top of a picture */
.ny-band--solid { background: var(--confetti-band), var(--paper); }
/* A gold-foil hairline with a diamond at its middle, for headings and
ticket faces */
.ny-deco {
display: flex; align-items: center; gap: .6rem; color: var(--theme-500);
}
.ny-deco::before, .ny-deco::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .7; }
/* The season chip in the status strip */
.ny-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; letter-spacing: .08em; color: #f2d88f; }
.ny-strip-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.ny-strip-chip bdi { unicode-bidi: isolate; }
[data-ny-phase][hidden], [data-ny-season][hidden], [data-ny-group][hidden] { display: none !important; }
.ny-strip-season, .ny-strip-season > span { display: inline-flex; align-items: center; gap: 1rem; min-width: 0; }
.ny-strip-sep { color: rgba(247, 241, 225, .4); }
/* The desktop strip shares its line with the menu; the second half of the
chip joins it only where there is room for both. */
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1439px) { .ny-strip-chip__extra { display: none; } }
.ed-subnav { align-items: center; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.ed-subnav-inner { display: flex; align-items: center; gap: 1.25rem; width: 100%; padding: 0.6rem 2rem; }
@media (min-width: 1280px) { .ed-subnav-inner { padding-left: 2.5rem; padding-right: 2.5rem; } }
.ed-subnav-eyebrow {
flex-shrink: 0;
font-family: var(--font-ui); font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--theme-600); white-space: nowrap;
padding-right: 1.25rem; border-right: 1px solid var(--rule);
}
[dir="rtl"] .ed-subnav-eyebrow { padding-right: 0; padding-left: 1.25rem; border-right: 0; border-left: 1px solid var(--rule); }
.ed-subnav-items { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.ed-subnav-item {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.42rem 0.85rem; border-radius: 999px;
font-family: var(--font-ui); font-size: 0.9rem; font-weight: 500;
color: var(--ink-2); text-decoration: none;
}
.ed-subnav-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.ed-subnav-item:hover { color: var(--ink); background: var(--paper-3); }
.ed-subnav-item.active { background: var(--btn-bg); color: var(--btn-ink); }
.ed-subnav-item:focus-visible { outline: 2px solid var(--theme-500); outline-offset: 2px; }
/* ── Links and buttons ── */
.ed-link-arrow {
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: var(--font-ui); font-size: 0.92rem; font-weight: 600;
color: var(--ink); text-decoration: none;
padding-bottom: 2px; border-bottom: 2px solid var(--theme-500);
transition: gap 0.18s ease;
}
.ed-link-arrow:hover { gap: 0.7rem; }
html .ed-btn-primary, html .ed-plan-cta, html .drawer-login {
display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
padding: 0.8rem 1.55rem;
white-space: nowrap;
font-family: var(--font-ui); font-size: 0.97rem; font-weight: 700; letter-spacing: .01em;
color: var(--btn-ink);
background: var(--btn-bg);
border: 0;
border-radius: 999px;
box-shadow: var(--btn-shadow);
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
html .ed-btn-primary:hover, html .ed-plan-cta:hover, html .drawer-login:hover {
background: var(--btn-bg-hover); color: var(--btn-ink);
transform: translateY(-1px); box-shadow: var(--btn-shadow-hover);
}
html .ed-btn-primary:active, html .ed-plan-cta:active { transform: translateY(1px); }
html.dark .ed-btn-primary, html.dark .ed-btn-primary:hover,
html.dark .ed-plan-cta, html.dark .ed-plan-cta:hover, html.dark button.ed-plan-cta { color: var(--btn-ink); }
html body .ed-plan-featured .ed-plan-cta, html.dark body .ed-plan-featured .ed-plan-cta,
html body .ed-plan-cta, html.dark body .ed-plan-cta {
background: var(--btn-bg); color: var(--btn-ink); border: 0; box-shadow: var(--btn-shadow);
}
html body .ed-plan-featured .ed-plan-cta { background: var(--foil); color: #1a1405; box-shadow: 0 8px 20px -10px rgba(242, 205, 114, .6); }
.ed-btn-primary:focus-visible, .ed-btn-secondary:focus-visible, .ed-plan-cta:focus-visible { outline: 3px solid var(--theme-500); outline-offset: 3px; }
.ed-btn-secondary {
display: inline-flex; align-items: center; gap: 0.55rem;
padding: 0.76rem 1.4rem;
font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600;
color: var(--ink); background: var(--paper-2);
border: 1px solid var(--rule); border-radius: 999px;
transition: background 0.15s ease, border-color .15s ease;
}
.ed-btn-secondary:hover { background: var(--paper-3); border-color: var(--theme-500); }
html.dark .ed-btn-secondary { color: var(--ink); }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: var(--btn-ink); }
/* ── Cards: crisp corners, a fine edge, a lift on hover ── */
html .ed-plan, html .shop-card {
position: relative;
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
html .ed-plan:hover, html .shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
html .ed-plan-featured {
position: relative;
background: var(--night-stars), var(--night-bg); color: #f7f1e1;
border: 1px solid rgba(242, 216, 143, .4); border-radius: var(--radius);
overflow: hidden;
}
.ed-plan-featured::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
background: var(--confetti-band); pointer-events: none;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(247, 241, 225, .2); }
/* ── Status text ── */
.ed-status { font-family: var(--font-ui); font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink-soft); }
.ed-topnav-link { color: rgba(247, 241, 225, 0.88); text-decoration: none; transition: color 0.16s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: #f2d88f; }
/* ── Drawer ── */
.drawer-section-label {
display: flex; align-items: center; gap: 0.6rem;
font-family: var(--font-ui); font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--theme-600); padding: 1.1rem 1.5rem 0.4rem;
}
.drawer-section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
/* header.css forces the labels to slate after dark */
html.dark .drawer-section-label { color: var(--theme-600) !important; }
.drawer-nav-row {
display: flex; align-items: center; gap: 0.85rem;
padding: 0.65rem 1.5rem;
font-family: var(--font-ui); font-size: 1rem; font-weight: 500;
color: var(--ink-2); text-decoration: none;
}
.drawer-nav-row:hover { background: var(--paper-3); color: var(--ink); }
.drawer-logout, .drawer-login { margin: 1rem 1.5rem 1.25rem; padding: 0.85rem 1rem; }
.drawer-logout {
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
border-radius: 999px; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600;
color: var(--theme-600); border: 1px solid var(--theme-500); text-decoration: none;
}
.drawer-logout:hover { background: var(--gold-soft); }
.mobile-glass-header {
background: rgba(246, 243, 236, 0.94);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(10, 14, 42, 0.94); }
.ed-avatar-ring { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--theme-500); }
[x-cloak] { display: none !important; }
.ed-dropdown {
background: var(--paper-2);
border: 1px solid var(--rule); border-radius: 14px;
box-shadow: var(--shadow-md);
overflow: hidden;
}
.ed-dropdown-item {
display: flex; align-items: center; gap: 0.85rem;
padding: 0.68rem 1rem;
font-family: var(--font-ui); font-size: 0.95rem; font-weight: 500;
color: var(--ink-2); text-decoration: none;
}
.ed-dropdown-item:hover { background: var(--paper-3); color: var(--ink); }
.ed-section-cap {
font-family: var(--font-ui); font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--theme-600); padding: 0.9rem 1rem 0.4rem;
}
.ed-mobile-link.active { color: var(--nav-accent); }
/* ── Fireworks (nye_burst_svg()): each burst blooms from its heart, hangs,
and fades as its sparks fall a little, timed by --d (cycle) and --w
(delay); held fully open for visitors who ask for less motion ── */
.ny-burst { display: block; width: 100%; height: auto; overflow: visible; }
.ny-burst__rays { transform-origin: 50px 50px; transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
.ny-burst__rays { animation: ny-bloom var(--d, 3.6s) cubic-bezier(.15, .7, .3, 1) var(--w, 0s) 3 both; }
.ny-burst__heart { animation: ny-flash var(--d, 3.6s) ease-out var(--w, 0s) 3 both; }
}
@keyframes ny-bloom {
0% { transform: scale(.08); opacity: 0; }
6% { opacity: 1; }
38% { transform: scale(1); opacity: 1; }
70% { transform: scale(1.08) translateY(4px); opacity: 0; }
100% { transform: scale(1.08) translateY(4px); opacity: 0; }
}
@keyframes ny-flash { 0%, 100% { opacity: 0; } 4% { opacity: 1; } 22% { opacity: 0; } }
/* A launch: the trail a rocket leaves on its way up to a burst */
.ny-trail { position: absolute; width: 2px; height: 70px; border-radius: 2px; background: linear-gradient(0deg, transparent, currentColor); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.ny-trail { animation: ny-rise var(--d, 3.6s) cubic-bezier(.3, .6, .4, 1) calc(var(--w, 0s) - .7s) 3 both; }
}
@keyframes ny-rise { 0% { transform: translateY(160px); opacity: 0; } 4% { opacity: .9; } 17% { transform: translateY(0); opacity: .9; } 20%, 100% { transform: translateY(0); opacity: 0; } }
/* ── Confetti falling across a section (nye_confetti()), each piece
placed by --x, coloured by --c and timed by --d/--w; scattered and
still for visitors who ask for less motion ── */
.ny-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.ny-confetti__p {
position: absolute; top: -16px; left: var(--x); width: 9px; height: 4px;
background: var(--c, #f2cd72); border-radius: 1px; opacity: .9;
transform: rotate(var(--r, 20deg));
}
.ny-confetti__p--c { width: 6px; height: 6px; border-radius: 50%; }
.ny-confetti__p--s { width: 12px; height: 12px; background: none; border: 2px solid var(--c, #f2cd72); border-color: var(--c) transparent transparent transparent; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
.ny-confetti__p { animation: ny-fall var(--d, 12s) linear var(--w, 0s) 1 both; }
}
@media (prefers-reduced-motion: reduce) { .ny-confetti__p { top: var(--y, 30%); } }
@keyframes ny-fall {
0% { transform: translate(0, 0) rotate(var(--r, 20deg)) rotateY(0); }
25% { transform: translate(18px, 28vh) rotate(calc(var(--r, 20deg) + 90deg)) rotateY(180deg); }
50% { transform: translate(-12px, 56vh) rotate(calc(var(--r, 20deg) + 180deg)) rotateY(360deg); }
75% { transform: translate(14px, 84vh) rotate(calc(var(--r, 20deg) + 270deg)) rotateY(540deg); }
100% { transform: translate(0, calc(112vh + 30px)) rotate(calc(var(--r, 20deg) + 360deg)) rotateY(720deg); }
}
/* The city, standing along the foot of a section */
.ny-skyline { height: 120px; background: var(--skyline) repeat-x center bottom / auto 100%; }
html.dark .ny-skyline { background-image: var(--skyline-night); }
.ny-skyline--night, html.dark .ny-skyline--night { background-image: var(--skyline-foot); }
/* ── Dark/light toggle: a rocket from the switch ──
assets/themes/new-years-eve/assets/js/new-years-eve.js registers the
transition: a rocket climbs from the switch, trailing sparks, to the
upper middle of the screen and bursts; the light of the burst floods
the page, the mode flips inside the glow, and the glow drains away
while the sparks fall. */
.px-fx--ny-rocket { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--ny-rocket .ny-rk {
position: absolute; left: var(--ox); top: var(--oy); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
border-radius: 50%; background: #fffaf0; box-shadow: 0 0 12px 5px #f2cd72, 0 0 28px 10px rgba(242, 205, 114, .45);
transition: transform .52s cubic-bezier(.25, .6, .35, 1);
}
.px-fx--ny-rocket .ny-rk::after {
content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 160px; margin-left: -1.5px; border-radius: 2px;
background: linear-gradient(180deg, #fff3c4, rgba(242, 205, 114, .6) 30%, transparent);
transform-origin: 50% 0; transform: rotate(var(--ta, 0deg));
}
.px-fx--ny-rocket.is-up .ny-rk { transform: translate(var(--dx), var(--dy)); }
.px-fx--ny-rocket.is-burst .ny-rk { opacity: 0; transition: opacity .1s; }
.px-fx--ny-rocket .ny-glow {
position: absolute; left: var(--bx); top: var(--by); width: 300vmax; height: 300vmax; margin: -150vmax 0 0 -150vmax;
border-radius: 50%;
background: radial-gradient(circle, #fffaf0 0 3%, #f8dd97 6%, var(--flood) 16%, var(--flood) 100%);
transform: scale(0); opacity: 1;
}
.px-fx--ny-rocket.is-burst .ny-glow { transform: scale(1); transition: transform .38s cubic-bezier(.2, .7, .3, 1); }
.px-fx--ny-rocket.is-clearing .ny-glow { opacity: 0; transition: opacity .55s ease .05s; transform: scale(1); }
.px-fx--ny-rocket .ny-spark {
position: absolute; left: var(--bx); top: var(--by); width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
border-radius: 50%; background: var(--c); box-shadow: 0 0 8px 1px var(--c); opacity: 0;
}
.px-fx--ny-rocket.is-burst .ny-spark { opacity: 1; transform: translate(var(--sx), var(--sy)); transition: transform .6s cubic-bezier(.1, .7, .3, 1); }
.px-fx--ny-rocket.is-clearing .ny-spark { opacity: 0; transform: translate(var(--sx), calc(var(--sy) + 60px)); transition: transform .7s ease-in, opacity .7s ease-in; }
/* ── Footer: the city at night in both modes — the skyline rises from the
page into the footer with its windows lit, fireworks above the roofs ── */
.ny-footer {
--paper: #070a22;
--paper-2: #121838;
--paper-3: #1b2249;
--ink: #f7f1e1;
--ink-2: #ded8c7;
--ink-soft: #a8aac4;
--rule: rgba(247, 241, 225, 0.15);
--rule-soft: rgba(247, 241, 225, 0.08);
--theme-500: #f2cd72; --theme-600: #f2d88f; --theme-700: #f8e3a8;
--theme-500-rgb: 242, 205, 114;
position: relative;
}
.ny-footer-top { position: relative; height: 170px; margin-bottom: -1px; overflow: hidden; }
.ny-footer-top .ny-skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; z-index: 1; }
.ny-footer-top .ny-fw { position: absolute; z-index: 0; width: 64px; color: var(--c); }
.ny-footer-top .ny-confetti { z-index: 0; }
/* Below 1024px the footer under the skyline is hidden (mobile-nav-explore.js),
so on a short page the city would stop mid-screen over bare paper; the
page holds it down at the foot of the screen instead. */
@media (max-width: 1023.98px) {
html body > main#px-spa-content { min-height: calc(100vh - 170px); min-height: calc(100svh - 170px); }
}
.ny-footer a:hover { color: #f2d88f; }
html .ny-footer .ed-footer-link, html .ny-footer .ed-footer-heading { font-family: var(--font-ui); }
html .ny-footer .ed-footer-heading { color: #f2d88f; letter-spacing: .16em; }
html.dark #desktopFooter li { color: var(--ink-2) !important; }
html .ed-floating-nav {
background: var(--paper-2);
border: 1px solid var(--rule);
box-shadow: var(--shadow-md);
}
html .ed-floating-nav .ed-floating-link { font-family: var(--font-ui); font-size: .92rem; font-weight: 500; color: var(--ink-2); }
html .ed-floating-nav .ed-floating-link:hover { background: var(--paper-3); color: var(--ink); }
html body .ed-floating-nav a.ed-floating-link.active { background: var(--btn-bg); color: var(--btn-ink) !important; }
html body .ed-floating-nav a.ed-floating-link.active > span { color: var(--btn-ink) !important; }
/* The newsletter as an invitation: ivory card, a double gold rule inside
its edge with stepped corners */
html body .ny-footer .ed-newsletter {
position: relative;
background:
radial-gradient(260px 160px at 100% 0%, rgba(242, 216, 143, .45), transparent 70%),
#fbf8f0;
color: #151a3b;
border: 0; border-radius: 6px;
box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .7);
overflow: hidden;
}
html body .ny-footer .ed-newsletter::before {
content: ''; position: absolute; inset: 10px; pointer-events: none; border-radius: 3px;
border: 1px solid #c99a3c; box-shadow: inset 0 0 0 3px #fbf8f0, inset 0 0 0 4px rgba(201, 154, 60, .5);
}
html body .ny-footer .ed-newsletter::after { display: none; }
html body .ny-footer .ed-newsletter, html body .ny-footer .ed-newsletter * { --ink: #151a3b; --ink-2: #3a3f60; }
html body .ny-footer .ed-newsletter h4, html.dark body .ny-footer .ed-newsletter h4 { font-family: var(--font-display); font-weight: 700; color: #151a3b; }
html.dark body .ny-footer .ed-newsletter p { color: #3a3f60; }
html body .ny-footer .ed-newsletter-input { background: #ffffff !important; color: #151a3b !important; border: 1px solid rgba(21, 26, 59, .2) !important; border-radius: 999px; }
html body .ny-footer .ed-newsletter-input::placeholder { color: #676b88; }
html body .ny-footer .ed-newsletter-input:focus { border-color: #b4862a !important; box-shadow: 0 0 0 3px rgba(180, 134, 42, .18); }
html body .ny-footer .ed-newsletter-btn {
background: #161c48; color: #f6dd98; border: 0; border-radius: 999px;
font-family: var(--font-ui); font-weight: 700;
}
html body .ny-footer .ed-newsletter-age { color: #3a3f60; }
/* Logo card: the light-mode logo on an ivory invitation card with a gold
rule inside its edge, wherever it sits on the night (footer, splash). */
.ny-plaque {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
padding: 1rem 1.6rem;
background: #fbf8f0;
border-radius: 6px;
box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .6);
}
.ny-plaque::before { content: ''; position: absolute; inset: 5px; border: 1px solid #c99a3c; border-radius: 3px; pointer-events: none; }
/* Long titles and descriptions show in full; a card grows instead of
clipping them. */
html [class*="line-clamp-"] { -webkit-line-clamp: unset; }
html body .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* .text-fit (assets/css/header.css) shrinks a title to one line with JS,
measured before the display face loads; under this theme it wraps. */
html body .text-fit { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* ── Dark-mode greys from assets/css/header.css ──
header.css forces a neutral near-black palette onto Tailwind's light
utilities with !important; these follow the theme's own surfaces. */
html.dark body { background-color: var(--paper) !important; }
html.dark .mobile-glass-header { background: rgba(10, 14, 42, 0.94) !important; border-bottom-color: var(--rule) !important; }
html.dark #desktopFooter { background: var(--paper) !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(18, 24, 56, 0.96) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark .premium-profile-header { background: var(--paper-2) !important; }
html.dark .premium-dropdown,
html.dark #mobileExploreSheet .bg-white,
html.dark #logoutModal .bg-white,
html.dark .bg-white,
html.dark [x-data] .bg-white,
html.dark .bg-white.shadow-xl,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .odd\:bg-white:nth-child(odd) { background-color: var(--paper-2) !important; }
html.dark .bg-gray-50,
html.dark .even\:bg-gray-50:nth-child(even) { background-color: var(--paper) !important; }
html.dark .bg-gray-100,
html.dark #mobileExploreSheet .bg-gray-100,
html.dark thead { background-color: var(--paper-3) !important; }
html.dark .from-white, html.dark .from-gray-50 { --tw-gradient-from: var(--paper) !important; }
html.dark .to-white, html.dark .to-gray-50 { --tw-gradient-to: var(--paper) !important; }
html.dark .via-white, html.dark .via-gray-50 { --tw-gradient-via: var(--paper-2) !important; }
html.dark .from-gray-100 { --tw-gradient-from: var(--paper-2) !important; }
html.dark .to-gray-100 { --tw-gradient-to: var(--paper-2) !important; }
html.dark .search-input,
html.dark select:not(.no-dark) { background-color: var(--paper-2) !important; }
html.dark .gradient-bg { background: linear-gradient(-45deg, #1b2249, #0a0e2a, #141b45, #070a22) !important; }
html.dark [class*="dark:bg-[#121218]"], html.dark [class*="dark:bg-[#0"] { background-color: var(--paper-2) !important; }
/* header.css fills every dark-mode field with a navy #0d1117; here fields
take the theme's own midnight. Same selector shape so it outranks it. */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.no-dark),
html.dark textarea:not(.no-dark),
html.dark select:not(.no-dark) {
background-color: #070a22 !important;
border-color: rgba(245, 240, 226, .2) !important;
color: #f5f0e2 !important;
}
/* Inverted panels: shared markup paints some panels with background
var(--ink) and letters them in var(--paper), which only works while ink
is dark. After dark those panels take the deepest midnight. */
html.dark [style*="background: var(--ink)"],
html.dark [style*="background:var(--ink)"],
html.dark [style*="background-color: var(--ink)"],
html.dark [style*="background-color:var(--ink)"] {
--ink: #060920;
--paper: #f5f0e2;
border-color: rgba(242, 205, 114, .3);
}
html header.safe-top-header[style] { background: rgba(246, 243, 236, .95) !important; }
html.dark header.safe-top-header[style] { background: rgba(10, 14, 42, .95) !important; }
/* ── Login / register / forgot-password brand panel: the city at night ── */
:root, html.dark {
--brand-gradient: var(--night-bg);
--brand-glow-1: rgba(242, 205, 114, 0.26);
--brand-glow-2: rgba(169, 155, 255, 0.24);
}
.brand-panel { background: var(--night-stars), var(--night-bg) !important; }
/* assets/css/pages/login.css loads after the theme and draws ::after as a
round glow; here it is the skyline along the panel's foot. */
html .brand-panel::after {
content: ''; position: absolute;
left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
width: 100% !important; height: 110px !important;
border-radius: 0 !important; transform: none !important; opacity: 1 !important;
background: var(--skyline-foot) repeat-x center bottom / auto 100% !important;
}
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(247, 241, 225, 0.84) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 700 !important; }
/* ── Wallet balance card: a VIP pass for the night — midnight with a gold
foil sash across its corner, a burst above the city along its foot ── */
html body .wallet-hero {
position: relative;
background:
linear-gradient(135deg, transparent 0 72%, rgba(242, 216, 143, .0) 72%),
var(--night-stars),
var(--night-bg);
border: 1px solid rgba(242, 216, 143, .35);
border-radius: 18px;
box-shadow: var(--shadow-md);
color: #f7f1e1;
overflow: hidden;
}
html body .wallet-hero::before {
left: 0; right: 0; top: auto; bottom: 0; height: 70px; border-radius: 0;
background: var(--skyline-night) repeat-x center bottom / auto 100%;
}
html body .wallet-hero::after {
content: ''; position: absolute; right: -54px; top: 22px; width: 220px; height: 26px;
background: var(--foil);
box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6);
transform: rotate(38deg);
pointer-events: none;
}
html[dir="rtl"] body .wallet-hero::after { right: auto; left: -54px; transform: rotate(-38deg); }
html body .wallet-hero > * { position: relative; z-index: 1; }
/* The kernel letters the small print in white at .25-.4, too faint on
midnight; the 'Wallet' tag keeps clear of the sash. */
html body .wallet-hero > .mb-8 { padding-inline-end: 96px; }
html body .wallet-hero > .mb-8 span[style], html body .wallet-hero .mt-3 > span[style] { color: var(--on-night-soft) !important; }
html body .wallet-balance-num {
font-family: var(--font-ui); font-variation-settings: normal; font-weight: 800;
font-variant-numeric: tabular-nums;
color: #ffffff;
}
html body .wallet-hero-btn-primary { background: var(--foil); color: #1a1405; border: 0; font-family: var(--font-ui); font-weight: 700; border-radius: 999px; }
html body .wallet-hero-btn-primary:hover { filter: brightness(1.06); color: #1a1405; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 600; color: #f7f1e1; border-color: rgba(247, 241, 225, .45); border-radius: 999px; }
/* ── Mystery box card (styled by assets/css/pages/home.css): a gift tied
with a gold foil ribbon down its side ── */
html .ed-card-mystery {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius);
overflow: hidden;
}
html .ed-card-mystery:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
html .ed-card-mystery::before {
top: 0; bottom: 0; left: 20%; right: auto; width: 10px; height: auto; border-radius: 0;
background: var(--foil); opacity: 1; z-index: 0;
}
[dir="rtl"] .ed-card-mystery::before { left: auto; right: 20%; }
html .ed-card-mystery img { position: relative; z-index: 1; }
/* ── Product page buy box: the confetti band along its top ── */
html body .pd-buybox {
position: relative;
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
overflow: hidden;
padding-top: 1.4rem;
}
html body .pd-buybox::before {
content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 14px;
background: var(--confetti-band);
}
html body .pd-buybox .font-display.text-4xl { font-weight: 700; color: var(--theme-600); }
.pd-title { font-weight: 700 !important; }
/* The mystery box plugin's own button is ink on paper and dynamic-theme's
".dark button" turns its label the colour of its fill; readable here on
plugin releases without their own fix. */
html.dark button.spin-btn:not(:disabled) { color: var(--paper); }
/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
tier chips, focus rings) take the theme's gold. */
html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: var(--theme-500); }
html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: var(--theme-600); }
html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600 { color: var(--theme-600); }
/* Solid purple action buttons (coupon Apply and the like) sit beside a
field and take the colour of the main buttons. */
html .bg-purple-600.text-white, html .bg-indigo-600.text-white, html .bg-violet-600.text-white {
background: var(--btn-bg) !important; color: var(--btn-ink) !important; border-radius: 999px;
}
html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50, html .bg-purple-100 { background-color: var(--gold-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50 { background-color: var(--gold-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200 { border-color: rgba(180, 134, 42, .3); }
html.dark .border-violet-200 { border-color: rgba(231, 194, 106, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(180, 134, 42, .35); }
html .focus\:border-purple-400:focus { border-color: var(--theme-500); }
/* Shared buttons drawn in the accent with white lettering (Place Order,
Buy Now bars) are the theme's main buttons. */
html .bg-theme-600.text-white, html .bg-theme-500.text-white,
html .bg-blue-600.text-white, html .bg-blue-500.text-white {
background: var(--btn-bg) !important;
color: var(--btn-ink) !important;
box-shadow: var(--btn-shadow) !important;
}
html .bg-theme-600.text-white:hover, html .bg-theme-500.text-white:hover { background: var(--btn-bg-hover) !important; }
html .bg-theme-600.text-white [class*="border-white"] { border-color: rgba(246, 221, 152, .3); border-top-color: var(--btn-ink); }
/* ── Winners page cards ── */
html .wnc { border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--rule); box-shadow: var(--shadow); }
html .wnc:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
/* ── Cart and checkout: the order total as the stub of a ticket ──
Picked out by what the panels contain, so no copies of their markup
(or their Alpine hooks) live in the theme. */
html [id^="cart-row-"] { background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: var(--radius) !important; }
html .rounded-2xl:has(> div > div > #summary-total),
html section.rounded-2xl:has([x-text="totalDisplay()"]) {
position: relative;
background: var(--paper-2) !important;
border: 1px solid var(--rule) !important;
border-radius: var(--radius) !important;
box-shadow: var(--shadow-md) !important;
overflow: hidden;
padding-top: 1.6rem !important;
}
html .rounded-2xl:has(> div > div > #summary-total)::before,
html section.rounded-2xl:has([x-text="totalDisplay()"])::before {
content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 14px;
background: var(--confetti-band);
}
html .rounded-2xl:has(> div > div > #summary-total) > div,
html section.rounded-2xl:has([x-text="totalDisplay()"]) > div { border-style: dashed !important; }
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
font-family: var(--font-ui);
font-weight: 800;
font-size: 1.6rem;
font-variant-numeric: tabular-nums;
color: var(--theme-600);
}
/* The status strip holds one line, never wrapping inside its 32px. */
.hdr-strip .ed-status, .hdr-strip .ed-status * { white-space: nowrap; }
.hdr-strip .ed-status { font-size: 11px; letter-spacing: .05em; }
@media (max-width: 1023px) { .hdr-strip .ny-strip-chip { font-size: 10px; gap: .35rem; } }
/* Small phones: the dark-mode switch and the App chip in the header drop
their words and keep their icons. */
@media (max-width: 419px) {
html .hdr-strip .dark-mode-toggle span { display: none; }
html .mobile-glass-header .pwa-chip__label { display: none; }
html .mobile-glass-header .pwa-chip { padding: 0 .6rem; }
}
/* ── My Winnings: each prize as a golden ticket — a foil header with its
serial number, the picture, then a perforated tear line with a notch
cut from each side before the stub ── */
.ny-win {
--notch: 11px;
position: relative;
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: transform .18s ease, box-shadow .18s ease;
}
.ny-win:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ny-win__head {
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
padding: .55rem 1rem;
background: var(--foil); color: #241a05;
border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
font-family: var(--font-display); font-weight: 700; font-size: .92rem; letter-spacing: .06em;
}
.ny-win__serial { font-family: var(--font-ui); font-weight: 700; font-size: .78rem; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.ny-win__wrap { background: var(--stars), color-mix(in srgb, var(--theme-100) 45%, var(--paper-2)); }
/* A soft glow behind the prize, as on the shop's wells, so dark products
and box art stay visible on the night */
html.dark .ny-win__wrap { background: var(--night-stars), radial-gradient(circle at 50% 52%, rgba(120, 112, 220, .42), transparent 64%), linear-gradient(180deg, #141b45, #0d1236); }
.ny-win__wrap > .absolute { z-index: 3; }
/* The tear line: dashes between two half-circle notches */
.ny-win__tear { position: relative; height: 0; border-top: 2px dashed var(--rule); margin: 0 var(--notch); }
.ny-win__tear::before, .ny-win__tear::after {
content: ''; position: absolute; top: calc(-1 * var(--notch) - 1px); width: calc(2 * var(--notch)); height: calc(2 * var(--notch));
border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule);
}
.ny-win__tear::before { left: calc(-2 * var(--notch) - 1px); clip-path: inset(0 0 0 50%); }
.ny-win__tear::after { right: calc(-2 * var(--notch) - 1px); clip-path: inset(0 50% 0 0); }
.ny-win__tag {
display: inline-flex; align-items: center;
padding: .22rem .6rem;
font-size: 11px; font-weight: 700; letter-spacing: .06em;
color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px;
}
.ny-win__tag--open { color: #f6dd98; background: #161c48; border-color: transparent; }
.ny-win__tag--done { color: #ffffff; background: #16968f; border-color: transparent; }
html.dark .ny-win__tag--open { color: #1a1405; background: var(--foil); }
html.dark .ny-win__tag--done { color: #070a22; background: #5ee0d6; }
.ny-win__name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.ny-win__label { padding-top: .6rem; border-top: 1px solid var(--rule-soft); }
.ny-win__price { font-family: var(--font-ui); font-weight: 800; font-size: clamp(1.05rem, 3.4vw, 1.2rem); line-height: 1; color: var(--theme-600); font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.ny-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .9rem; }
.ny-win__cart, .ny-win__btn-off {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
border-radius: 999px; font-weight: 600;
}
.ny-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); }
.ny-win__cart:hover { border-color: var(--theme-500); color: var(--theme-600); }
.ny-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; }
.ny-win__claimed {
display: flex; align-items: center; justify-content: center; gap: .4rem;
min-height: 2.75rem; padding: .5rem;
font-size: .9rem; font-weight: 600;
color: var(--theme-600); background: var(--gold-soft); border-radius: 999px;
}
/* ── Illustrations (includes/art.php): the night and the city follow the
mode; the gold, the paper and the firework colours carry over. ── */
html.dark .ny-art { --a-night: #2c3672; --a-night-2: #3a4590; --a-city: #1b2453; --a-paper: #f7f1e1; --a-line: #c9cbe0; }
.ny-art { display: block; max-width: 100%; height: auto; }
/* ── Standalone pages ──
Age check, unsubscribe and change language are their own documents
that never run header.php's head_meta, so the skin sheets don't reach
them; their few rules live here, where they do load. */
html body.age-check-body { background: var(--stars), var(--paper); font-family: var(--font-ui); }
html body .age-check-card {
position: relative; overflow: hidden;
padding-top: 2.8rem; padding-bottom: 3.6rem;
background: var(--stars), var(--paper-2);
border: 1px solid var(--rule);
border-radius: 16px;
box-shadow: var(--invite-rule), var(--shadow-md);
}
html body .age-check-card::before {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 20px;
background: var(--foil-edge) left top / 100% 3px no-repeat, var(--confetti-band);
background-position: left top, left 5px;
}
html body .age-check-card::after {
content: ''; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 40px;
background: var(--skyline) repeat-x center bottom / auto 100%; opacity: .75;
}
html.dark body .age-check-card::after { background-image: var(--skyline-night); opacity: 1; }
html body .age-check-logo { border-radius: 50%; padding: 6px; background: radial-gradient(circle, var(--paper-2) 0 64%, transparent 65%), var(--foil); }
html body .age-check-title { font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; }
html body .age-check-input { border-radius: 10px; border: 1.5px solid var(--rule); background: var(--paper-2); font-family: var(--font-ui); }
html body .age-check-input:focus { border-color: var(--theme-500); box-shadow: 0 0 0 3px rgba(var(--theme-500-rgb), .22); outline: none; }
html body .age-check-submit { border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--btn-shadow); font-family: var(--font-ui); }
html body .age-check-foot a { color: var(--theme-600); }
/* Change language: each language an invitation card; the chosen one ringed
in gold foil, its flag in a foil ring */
html body .lang-card {
border-radius: 12px !important;
border: 1.5px dashed var(--rule) !important;
background: var(--paper-2) !important;
transition: transform .15s ease, border-color .15s ease;
}
html body .lang-card:hover { transform: translateY(-2px); border-color: var(--theme-500) !important; }
html body .lang-card:has(input:checked) {
border-style: solid !important;
border-color: transparent !important;
box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 4px #d9ae55, var(--invite-rule), var(--shadow) !important;
background: color-mix(in srgb, var(--fw-gold) 10%, var(--paper-2)) !important;
}
html body .lang-card img { border-radius: 50%; padding: 2px; background: var(--foil); }
html body .lang-card:has(input:checked) .rounded-full:has(> .fa-check) { background: var(--btn-bg) !important; color: var(--btn-ink) !important; }
html body:has(.lang-card) h1 { font-family: var(--font-display); font-weight: 700 !important; letter-spacing: .01em !important; }
html body:has(.lang-card) .footer-safe { box-shadow: 0 -12px 24px -18px rgba(11, 16, 49, .55); }
html body:has(.lang-card) .footer-safe::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; background: var(--confetti-band); }
html body:has(.lang-card) .w-9.h-9.rounded-xl:has(> .fa-language) { background: var(--foil) !important; color: #241a05 !important; border-radius: 0 !important; -webkit-mask: var(--seal-mask); mask: var(--seal-mask); }
/* The page's own save button is a white-lettered gradient of --theme-*,
which goes pale gold after dark; it takes the theme's primary button. */
html body button[form="langForm"] { background: var(--btn-bg); color: var(--btn-ink); border-radius: 999px; box-shadow: var(--btn-shadow); }
html body button[form="langForm"]:hover { background: var(--btn-bg-hover); color: var(--btn-ink); box-shadow: var(--btn-shadow-hover); }
/* header.css letters every dark-mode footer heading and field by the
footer's id; the invitation card keeps its midnight ink and white field
after dark. */
html.dark body :is(#desktopFooter, .ny-footer) .ed-newsletter h4 { color: #151a3b !important; }
html.dark body :is(#desktopFooter, .ny-footer) .ed-newsletter p:not(#newsletter-msg) { color: #3a3f60 !important; }
html.dark body :is(#desktopFooter, .ny-footer) input.ed-newsletter-input { background-color: #ffffff !important; color: #151a3b !important; border-color: rgba(21, 26, 59, .2) !important; }
/* Phones: headings break only between words, never mid-word. */
@media (max-width: 639px) {
html body .reveal.flex-row:has(> .btn-view-all) h2.text-fit { font-size: clamp(1.5rem, 8vw, 1.875rem); }
html body :is(h1, h2, h3):is(.text-fit, .truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
}
/* Phones: a ticket's two dates stack rather than run into each other; the
bids page's four tiles go two by two ("Gesamtgebote" was cut off); the
auction page's browse link drops under its heading ("Andere Auktionen
durchstöbern" pushed the page wider). */
@media (max-width: 639px) {
html body .grid.grid-cols-2.rtl-text-right:has(> div > .whitespace-nowrap) { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
html body .grid.grid-cols-4:has(> div > p.text-3xl.font-extrabold) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; }
}
/* Review stars take a deeper shade of the gold by day; the accent itself
is too pale on this paper to read as stars. */
html:not(.dark) { --px-star: #aa7e28; }
/* 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: #157f3d; --px-warn: #b45309; --px-crit: #d53462; --px-info: #735cff; }
html.dark:root { --px-good: #4ade80; --px-warn: #fbbf23; --px-crit: #ff94b3; --px-info: #b4a8ff; }
/* Changing language, the scene (new-years-eve.js): the countdown tile over
the old name before the reload, and after it midnight, fireworks over the
skyline and the new name written in their sparks. The night is the same
on both pages, so the reload never shows. */
.ny-lang-stage { background: color-mix(in srgb, var(--night) 62%, transparent); }
.ny-lang-scene {
--ny-lang-gold: #f2cd72; --ny-lang-rose: #ff6a95; --ny-lang-aqua: #5ee0d6; --ny-lang-violet: #a99bff; --ny-lang-ivory: #fff6dc;
position: relative; display: flex; flex-direction: column; align-items: center;
width: min(560px, 100%); box-sizing: border-box; padding: 24px 20px 62px; text-align: center;
color: var(--on-night); border-radius: var(--radius); font-family: var(--font-ui);
background: radial-gradient(80% 60% at 50% 0%, var(--night-3), transparent 70%), linear-gradient(180deg, var(--night), var(--night-2));
box-shadow: inset 0 0 0 1px rgba(217, 174, 85, .4), 0 34px 70px -28px rgba(0, 0, 0, .7);
}
.ny-lang-tile, .ny-lang-words, .ny-lang-tag { position: relative; z-index: 1; }
.ny-lang-sky { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ny-lang-city {
position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
background: radial-gradient(circle, rgba(242, 205, 114, .85) 0 1px, transparent 1.6px) 3px 6px / 11px 9px, #060920;
clip-path: polygon(0 100%, 0 42%, 7% 42%, 7% 22%, 13% 22%, 13% 52%, 19% 52%, 19% 12%, 23% 12%, 24% 0, 25% 12%, 29% 12%, 29% 56%, 38% 56%, 38% 30%, 46% 30%, 46% 62%, 53% 62%, 53% 16%, 60% 16%, 60% 46%, 68% 46%, 68% 26%, 73% 26%, 74% 6%, 75% 26%, 80% 26%, 80% 50%, 88% 50%, 88% 32%, 95% 32%, 95% 60%, 100% 60%, 100% 100%);
}
.ny-lang-fw { position: absolute; left: 16%; top: 20%; width: 0; height: 0; --ny-lang-c: var(--ny-lang-gold); }
.ny-lang-fw:nth-child(2) { left: 82%; top: 16%; --ny-lang-c: var(--ny-lang-rose); }
.ny-lang-fw:nth-child(3) { left: 50%; top: 9%; --ny-lang-c: var(--ny-lang-ivory); }
.ny-lang-fw:nth-child(4) { left: 26%; top: 52%; --ny-lang-c: var(--ny-lang-aqua); }
.ny-lang-fw:nth-child(5) { left: 74%; top: 50%; --ny-lang-c: var(--ny-lang-violet); }
.ny-lang-fw i {
position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%;
background: var(--ny-lang-c); box-shadow: 0 0 6px 1px var(--ny-lang-c);
opacity: 0; transform: rotate(var(--ny-lang-a, 0deg)) translateY(-44px) scale(.4);
}
.ny-lang-fw i:nth-child(2) { --ny-lang-a: 30deg; }
.ny-lang-fw i:nth-child(3) { --ny-lang-a: 60deg; }
.ny-lang-fw i:nth-child(4) { --ny-lang-a: 90deg; }
.ny-lang-fw i:nth-child(5) { --ny-lang-a: 120deg; }
.ny-lang-fw i:nth-child(6) { --ny-lang-a: 150deg; }
.ny-lang-fw i:nth-child(7) { --ny-lang-a: 180deg; }
.ny-lang-fw i:nth-child(8) { --ny-lang-a: 210deg; }
.ny-lang-fw i:nth-child(9) { --ny-lang-a: 240deg; }
.ny-lang-fw i:nth-child(10) { --ny-lang-a: 270deg; }
.ny-lang-fw i:nth-child(11) { --ny-lang-a: 300deg; }
.ny-lang-fw i:nth-child(12) { --ny-lang-a: 330deg; }
.ny-lang-tile {
display: grid; width: 60px; height: 72px; border-radius: 8px; perspective: 300px;
background: linear-gradient(180deg, var(--night-3) 0 50%, var(--night-2) 50%);
box-shadow: inset 0 0 0 1px rgba(217, 174, 85, .5), 0 12px 22px -10px rgba(0, 0, 0, .7);
font: 700 46px/72px var(--font-display); color: var(--foil-flat);
}
.ny-lang-tile::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); }
.ny-lang-tile b { grid-area: 1 / 1; opacity: 0; transform: translateY(-40%) rotateX(80deg); }
.ny-lang-tile b:nth-child(3) { opacity: 1; transform: none; }
.ny-lang-words {
display: grid; place-items: center; width: 100%; margin-top: 14px;
font: 700 clamp(28px, 8.4vw, 46px)/1.15 var(--font-display);
}
.ny-lang-words > span { grid-area: 1 / 1; max-width: 100%; }
.ny-lang-old { overflow-wrap: anywhere; }
.ny-lang-new { position: relative; }
.ny-lang-ink {
display: block; overflow-wrap: anywhere; color: transparent; -webkit-background-clip: text; background-clip: text;
background-image: var(--foil); filter: drop-shadow(0 0 10px rgba(242, 205, 114, .45));
clip-path: inset(-30% -10% -30% -10%);
}
.ny-lang-sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.ny-lang-sweep b {
position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%;
background: var(--ny-lang-ivory); box-shadow: 0 0 12px 5px rgba(242, 205, 114, .8);
}
.ny-lang-to-rtl .ny-lang-sweep b { left: auto; right: 0; }
.ny-lang-tag {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin-top: 14px;
font: 600 12px/1 var(--font-ui); letter-spacing: .14em; color: var(--on-night-soft);
}
.ny-lang-end { display: inline-flex; align-items: center; gap: 6px; }
.ny-lang-globe { width: 18px; height: 18px; flex: none; }
.ny-lang-arrow { color: var(--foil-flat); }
/* Out: the night comes up and the tile counts down over the old name. */
.px-lang-stage-out .ny-lang-scene { animation: ny-lang-scene-in .3s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .ny-lang-tile b:nth-child(1) { animation: ny-lang-n3 .85s linear both; }
.px-lang-stage-out .ny-lang-tile b:nth-child(2) { animation: ny-lang-n2 .85s linear both; }
.px-lang-stage-out .ny-lang-tile b:nth-child(3) { animation: ny-lang-n1 .85s linear both; }
.px-lang-stage-out .ny-lang-ink { clip-path: inset(-30% 100% -30% -10%); }
.px-lang-stage-out .ny-lang-to-rtl .ny-lang-ink { clip-path: inset(-30% -10% -30% 100%); }
/* In: midnight. The tile goes, the fireworks burst and their sparks write the new name. */
.px-lang-stage-in .ny-lang-tile { animation: ny-lang-strike .2s ease-in .05s both; }
.px-lang-stage-in .ny-lang-old { animation: ny-lang-fade .25s ease-in .08s both; }
.px-lang-stage-in .ny-lang-fw i { animation: ny-lang-spark .55s cubic-bezier(.15, .7, .3, 1) .08s both; }
.px-lang-stage-in .ny-lang-fw:nth-child(2) i { animation-delay: .2s; }
.px-lang-stage-in .ny-lang-fw:nth-child(3) i { animation-delay: .3s; }
.px-lang-stage-in .ny-lang-fw:nth-child(4) i { animation-delay: .4s; }
.px-lang-stage-in .ny-lang-fw:nth-child(5) i { animation-delay: .48s; }
.px-lang-stage-in .ny-lang-ink { animation: ny-lang-write .45s ease-in-out .38s both; }
.px-lang-stage-in .ny-lang-to-rtl .ny-lang-ink { animation-name: ny-lang-write-rtl; }
.px-lang-stage-in .ny-lang-sweep { animation: ny-lang-sweep .45s ease-in-out .38s both; }
.px-lang-stage-in .ny-lang-to-rtl .ny-lang-sweep { animation-name: ny-lang-sweep-rtl; }
.px-lang-stage-in .ny-lang-scene { animation: ny-lang-scene-out .25s ease-in 1s both; }
@keyframes ny-lang-scene-in { from { transform: translateY(36px) scale(.96); opacity: 0; } }
@keyframes ny-lang-scene-out { to { transform: translateY(-20px); opacity: 0; } }
@keyframes ny-lang-n3 { 0%, 28% { opacity: 1; transform: none; } 36% { opacity: 0; transform: translateY(-40%) rotateX(80deg); } }
@keyframes ny-lang-n2 {
0%, 30% { opacity: 0; transform: translateY(40%) rotateX(-80deg); }
38%, 58% { opacity: 1; transform: none; }
66% { opacity: 0; transform: translateY(-40%) rotateX(80deg); }
}
@keyframes ny-lang-n1 { 0%, 60% { opacity: 0; transform: translateY(40%) rotateX(-80deg); } 68% { opacity: 1; transform: none; } }
@keyframes ny-lang-strike { to { opacity: 0; transform: scale(.6); } }
@keyframes ny-lang-fade { to { opacity: 0; transform: translateY(8px); } }
@keyframes ny-lang-spark { from { opacity: 0; transform: rotate(var(--ny-lang-a, 0deg)) translateY(0) scale(1); } 8%, 70% { opacity: 1; } }
@keyframes ny-lang-write { from { clip-path: inset(-30% 100% -30% -10%); } }
@keyframes ny-lang-write-rtl { from { clip-path: inset(-30% -10% -30% 100%); } }
@keyframes ny-lang-sweep { 8%, 85% { opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
@keyframes ny-lang-sweep-rtl { 8%, 85% { opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }
@media (max-width: 460px) {
.ny-lang-scene { padding: 20px 14px 58px; }
}
/* 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 just over half of it (room for a
section icon and a whole word like "Mystery"), breaking between words, 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: 52%; }
html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > a { flex: 0 1 auto; max-width: 48%; 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; }
}
/* 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: #8b6820;
}
/* rev 868fe5109c9f2a2b */