/*
* Seasonal theme. /assets/seasons.js sets html[data-season] to fall,
* halloween, thanksgiving or christmas; with no season the site keeps its
* gold look. The dark Generator mode keeps its own studio colors.
*/
/* ── Palettes ─────────────────────────────────────────────── */
/* Pumpkin orange on fall brown. */
html[data-season="halloween"] {
--season-field: #f6dcbb;
--season-field-2: #eac196;
--season-page: #fdf4e9;
--season-glow: rgba(232, 113, 26, 0.26);
--season-glow-2: rgba(92, 52, 24, 0.18);
--season-accent: #e8711a;
--season-accent-hover: #f2852e;
--season-accent-deep: #c25a12;
--season-accent-ink: #2a1608;
--season-accent-2: #f5a443;
--season-deep: #3f2414;
--season-deep-hover: #563219;
--season-deep-ink: #ffe7c9;
--season-ink: #3a2213;
--season-muted: #8b5428;
--season-pill: rgba(255, 241, 224, 0.9);
--season-pill-hover: #fff6ea;
--season-tint: rgba(232, 113, 26, 0.1);
--season-line: rgba(176, 88, 22, 0.32);
--season-sparkle: linear-gradient(105deg, transparent 28%, rgba(255, 236, 200, 0.3) 38%, rgba(255, 214, 150, 0.75) 47%, rgba(255, 250, 235, 0.85) 54%, rgba(255, 190, 110, 0.55) 62%, transparent 76%);
}
/* Rust, amber and chestnut. */
html[data-season="fall"] {
--season-field: #f4e2c4;
--season-field-2: #e8c99c;
--season-page: #fcf6ec;
--season-glow: rgba(194, 87, 31, 0.2);
--season-glow-2: rgba(140, 96, 30, 0.16);
--season-accent: #b9521c;
--season-accent-hover: #c9601f;
--season-accent-deep: #8f3c12;
--season-accent-ink: #fff4e6;
--season-accent-2: #d99a2b;
--season-deep: #5a3317;
--season-deep-hover: #6d3f1d;
--season-deep-ink: #fff0dc;
--season-ink: #3d2615;
--season-muted: #8a5a30;
--season-pill: rgba(255, 246, 232, 0.9);
--season-pill-hover: #fffaf2;
--season-tint: rgba(185, 82, 28, 0.09);
--season-line: rgba(160, 88, 30, 0.3);
--season-sparkle: linear-gradient(105deg, transparent 28%, rgba(255, 214, 140, 0.25) 38%, rgba(255, 196, 90, 0.7) 47%, rgba(255, 244, 214, 0.8) 54%, rgba(240, 140, 60, 0.5) 62%, transparent 76%);
}
/* Cranberry, wheat and roasted brown. */
html[data-season="thanksgiving"] {
--season-field: #f2e5cc;
--season-field-2: #e5cfa6;
--season-page: #fcf7ee;
--season-glow: rgba(201, 154, 58, 0.24);
--season-glow-2: rgba(143, 45, 52, 0.12);
--season-accent: #8f2d34;
--season-accent-hover: #a2373f;
--season-accent-deep: #6d1f26;
--season-accent-ink: #fff3e6;
--season-accent-2: #c99a3a;
--season-deep: #4d301d;
--season-deep-hover: #613d26;
--season-deep-ink: #fdf0dc;
--season-ink: #3a281a;
--season-muted: #85603c;
--season-pill: rgba(255, 248, 236, 0.9);
--season-pill-hover: #fffbf4;
--season-tint: rgba(201, 154, 58, 0.12);
--season-line: rgba(140, 84, 38, 0.3);
--season-sparkle: linear-gradient(105deg, transparent 28%, rgba(255, 228, 170, 0.25) 38%, rgba(240, 200, 110, 0.65) 47%, rgba(255, 246, 222, 0.75) 54%, rgba(230, 150, 120, 0.45) 62%, transparent 76%);
}
/* Holly red, evergreen and snow. */
html[data-season="christmas"] {
--season-field: #f6f2ea;
--season-field-2: #e6ede4;
--season-page: #fbfaf6;
--season-glow: rgba(192, 38, 47, 0.16);
--season-glow-2: rgba(29, 92, 55, 0.18);
--season-accent: #c0262f;
--season-accent-hover: #d0353e;
--season-accent-deep: #941b23;
--season-accent-ink: #fff7f0;
--season-accent-2: #d8a845;
--season-deep: #1d4a2f;
--season-deep-hover: #265c3b;
--season-deep-ink: #fdf6ec;
--season-ink: #1f2a22;
--season-muted: #4f6455;
--season-pill: rgba(255, 253, 249, 0.92);
--season-pill-hover: #fff;
--season-tint: rgba(29, 74, 47, 0.08);
--season-line: rgba(29, 74, 47, 0.26);
--season-sparkle: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, 0.25) 38%, rgba(255, 226, 150, 0.7) 47%, rgba(255, 255, 255, 0.85) 54%, rgba(170, 230, 190, 0.45) 62%, transparent 76%);
}
html[data-season] ::selection {
background: var(--season-glow);
color: inherit;
}
/* ── Home wall ────────────────────────────────────────────── */
html.wall-root[data-season]:not(.is-generator) {
background: var(--season-field);
}
html.wall-root[data-season]:not(.is-generator) body {
background:
radial-gradient(ellipse 80% 55% at 50% -10%, var(--season-glow), transparent 62%),
radial-gradient(ellipse 60% 45% at 100% 105%, var(--season-glow-2), transparent 60%),
linear-gradient(180deg, var(--season-field), var(--season-field-2));
}
/* A solid color so the loading screen still fades out. */
html[data-season] .boot:not(.is-open) { background-color: var(--season-field); }
html[data-season] .boot .aag-mark { background: var(--season-accent); }
html[data-season] .boot-story { color: var(--season-muted); }
html[data-season] .wall-empty { color: var(--season-muted); }
html.wall-root[data-season]:not(.is-generator) .wall-search-blur {
background: radial-gradient(ellipse at center, var(--season-pill) 0%, var(--season-tint) 34%, transparent 68%);
}
html.wall-root[data-season]:not(.is-generator) .wall-search input {
background: var(--season-pill);
color: var(--season-ink);
box-shadow:
0 0 0 1px var(--season-line),
0 16px 40px rgba(60, 30, 10, 0.1);
}
html.wall-root[data-season]:not(.is-generator) .wall-search input::placeholder { color: var(--season-muted); }
html.wall-root[data-season]:not(.is-generator) .wall-search input:focus {
box-shadow:
0 0 0 1.5px var(--season-accent),
0 16px 40px var(--season-glow);
}
html.wall-root[data-season]:not(.is-generator) .wall-search-icon { color: var(--season-accent); }
/* The season's second color: fall brown, or evergreen at Christmas. */
html.wall-root[data-season]:not(.is-generator) .wall-generator {
background: var(--season-deep);
color: var(--season-deep-ink);
box-shadow: none;
}
html.wall-root[data-season]:not(.is-generator) .wall-generator:hover {
background: var(--season-deep-hover);
}
/* Page pills: Login, Newsletter, Buy Tokens, Admin. */
html.wall-root[data-season]:not(.is-generator) .wall-actions a:not(.nav-cta):not(.nav-offers):not(.is-news-on):not(.wall-profile),
html.wall-root[data-season]:not(.is-generator) .wall-actions button:not(.nav-cta):not(.nav-offers):not(.nav-pair-toggle):not(.wall-profile),
html.wall-root[data-season]:not(.is-generator) .wall-actions .nav-auth-profile {
background: var(--season-pill);
color: var(--season-ink);
box-shadow:
inset 0 0 0 1px var(--season-line),
0 8px 22px rgba(60, 30, 10, 0.1);
}
html.wall-root[data-season]:not(.is-generator) .wall-actions a:not(.nav-cta):not(.nav-offers):not(.is-news-on):not(.wall-profile):hover,
html.wall-root[data-season]:not(.is-generator) .wall-actions button:not(.nav-cta):not(.nav-offers):not(.nav-pair-toggle):not(.wall-profile):hover,
html.wall-root[data-season]:not(.is-generator) .wall-actions .nav-auth-profile:hover {
background: var(--season-pill-hover);
color: var(--season-deep);
box-shadow:
inset 0 0 0 1px var(--season-accent),
0 10px 24px var(--season-glow);
}
html.wall-root[data-season]:not(.is-generator) .wall-actions .nav-pair-toggle { color: var(--season-ink); }
/* Subscribe: the season's main color with a matching shimmer. */
html.wall-root[data-season]:not(.is-generator) .wall-actions .nav-cta {
background: var(--season-accent);
color: var(--season-accent-ink);
box-shadow: 0 8px 22px var(--season-glow);
}
html.wall-root[data-season]:not(.is-generator) .wall-actions .nav-cta:hover {
background: var(--season-accent-hover);
color: var(--season-accent-ink);
box-shadow: 0 10px 26px var(--season-glow);
}
html.wall-root[data-season]:not(.is-generator) .wall-actions .nav-cta:active,
html.wall-root[data-season]:not(.is-generator) .wall-actions .nav-cta.is-down {
background: var(--season-accent-deep);
}
html.wall-root[data-season]:not(.is-generator) .wall-actions .nav-cta::before,
html.wall-root[data-season]:not(.is-generator) .wall-actions a.nav-news.is-news-on::before {
background: var(--season-sparkle);
}
/* Newsletter while news is open. */
html.wall-root[data-season]:not(.is-generator) .wall-actions a.nav-news.is-news-on,
html.wall-root[data-season]:not(.is-generator) .wall-actions a.nav-news.is-news-on:active,
html.wall-root[data-season]:not(.is-generator) .wall-actions a.nav-news.is-news-on.is-down {
background: var(--season-deep);
color: var(--season-deep-ink);
}
html.wall-root[data-season]:not(.is-generator) .wall-actions a.nav-news.is-news-on:hover {
background: var(--season-deep-hover);
color: var(--season-deep-ink);
}
html.wall-root[data-season]:not(.is-generator) .wall-actions .nav-offers {
background: var(--season-pill-hover);
color: var(--season-deep);
box-shadow:
inset 0 0 0 1px var(--season-accent),
0 8px 22px var(--season-glow);
}
html.wall-root[data-season]:not(.is-generator) .wall-actions .nav-offers:hover {
background: #fff;
color: var(--season-deep);
}
html.wall-root[data-season]:not(.is-generator) .nav-offers-count {
background: var(--season-accent);
color: var(--season-accent-ink);
}
/* Card and preview controls. */
html.wall-root[data-season]:not(.is-generator) .login-submit {
background: var(--season-accent);
color: var(--season-accent-ink);
}
html.wall-root[data-season]:not(.is-generator) .focus-close {
border-color: var(--season-line);
color: var(--season-deep);
}
html.wall-root[data-season]:not(.is-generator) .focus-close:focus-visible { outline-color: var(--season-accent); }
html.wall-root[data-season]:not(.is-generator) .focus-actions button { color: var(--season-ink); }
html.wall-root[data-season]:not(.is-generator) .focus-actions button:hover { color: var(--season-accent-deep); }
/* ── Public pages ─────────────────────────────────────────── */
html[data-season][data-theme="light"] {
--gold: var(--season-accent);
--gold-deep: var(--season-accent-deep);
--amber: var(--season-accent-2);
}
html[data-season][data-theme="light"]:not(.wall-root) body {
background:
radial-gradient(ellipse 90% 46% at 50% -12%, var(--season-glow), transparent 58%),
radial-gradient(ellipse 40% 32% at 100% 80%, var(--season-glow-2), transparent 55%),
var(--season-page);
}
html[data-season][data-theme="light"] .glass-nav { border-color: var(--season-line); }
html[data-season][data-theme="light"] .glass-panel,
html[data-season][data-theme="light"] .glass-card,
html[data-season][data-theme="light"] .review-card { border-color: var(--season-line); }
html[data-season][data-theme="light"] .glass-card:hover {
border-color: var(--season-accent);
box-shadow: 0 22px 50px var(--season-glow);
}
html[data-season][data-theme="light"]:not(.wall-root) .nav-cta {
background: linear-gradient(180deg, var(--season-accent-hover), var(--season-accent));
color: var(--season-accent-ink);
}
html[data-season][data-theme="light"]:not(.wall-root) .nav-cta:hover { box-shadow: 0 12px 30px var(--season-glow); }
html[data-season][data-theme="light"] .nav-auth-btn {
border-color: var(--season-line);
background: var(--season-tint);
color: var(--season-deep);
}
html[data-season][data-theme="light"] .nav-auth-btn:hover {
background: var(--season-accent);
color: var(--season-accent-ink);
}
html[data-season][data-theme="light"] .btn-primary {
background: linear-gradient(120deg, var(--season-accent-hover), var(--season-accent) 50%, var(--season-accent-deep));
color: var(--season-accent-ink);
box-shadow: 0 10px 30px var(--season-glow);
}
html[data-season][data-theme="light"] .btn-primary:hover:not(:disabled) { box-shadow: 0 18px 44px var(--season-glow); }
html[data-season][data-theme="light"] .btn-secondary { border-color: var(--season-line); }
html[data-season][data-theme="light"] .btn-secondary:hover {
border-color: var(--season-accent);
background: var(--season-tint);
}
html[data-season][data-theme="light"] .eyebrow { color: var(--season-muted); }
html[data-season][data-theme="light"] .gold-text,
html[data-season][data-theme="light"] .counter {
background: linear-gradient(180deg, var(--season-accent-2) 0%, var(--season-accent) 48%, var(--season-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
html[data-season][data-theme="light"] .field input,
html[data-season][data-theme="light"] .field select,
html[data-season][data-theme="light"] .field textarea { border-color: var(--season-line); }
html[data-season][data-theme="light"] .field input:focus,
html[data-season][data-theme="light"] .field select:focus,
html[data-season][data-theme="light"] .field textarea:focus { border-color: var(--season-accent); }
html[data-season][data-theme="light"] .auth-tab.active {
border-color: var(--season-accent);
background: var(--season-tint);
color: var(--season-deep);
}
html[data-season][data-theme="light"] .price-badge {
border-color: var(--season-line);
background: var(--season-tint);
color: var(--season-accent-deep);
}
html[data-season][data-theme="light"] .plan-card:hover,
html[data-season][data-theme="light"] .plan-card.selected {
background: var(--season-pill-hover);
border-color: var(--season-accent);
}
/* Ambient orbs and gold icons set inline on each page. */
html[data-season] .orb { background: var(--season-accent) !important; }
html[data-season] .orb + .orb { background: var(--season-accent-2) !important; }
html[data-season] [fill="#f0c45c"] { fill: var(--season-accent); }
html[data-season] [stroke="#f0c45c"] { stroke: var(--season-accent); }
html[data-season] [style*="background:rgba(240,196,92,0.12)"] {
background: var(--season-tint) !important;
border-color: var(--season-line) !important;
}