/* ============================================================ PALETTES — alternate themes for the site. Activate by setting the `data-theme` attribute on : Each palette overrides the same tokens defined in style.css :root, so layout, components and adaptivity stay untouched. ============================================================ */ /* ============================================================ Crimson — deep red on a clean white background. Sophisticated, high-contrast, casino-friendly. ============================================================ */ [data-theme="crimson"] { /* ---------- Base text / background ---------- */ --color-fg: #1c0d0d; --color-fg-muted: #7a2828; --color-fg-subtle: #5b1a1a; --color-bg: #ffffff; --color-bg-elev: #fff7f7; --color-border: #fadcdc; --color-border-soft: #fdeaea; /* ---------- Brand / accents ---------- */ --color-primary: #b91c1c; --color-primary-ink: #ffffff; --color-primary-shadow: rgba(185, 28, 28, 0.30); /* ---------- Headings ---------- */ --color-h1: #7f1d1d; --color-h2: #b91c1c; --color-h3: #991b1b; --color-h4: #7f1d1d; --color-h5: #5c1414; --color-h6: #4a1010; --color-success: #b91c1c; --color-success-strong: #7f1d1d; --color-neutral-ink: #5c1414; --color-neutral-ink-weak: #fadcdc; /* ---------- Header / Nav ---------- */ --topbar-bg: #ffffff; --topbar-ink: #7f1d1d; --subnav-bg: #7f1d1d; --subnav-link: #fadcdc; --subnav-link-hover: #ffffff; --topnav-bg: #fff7f7; /* ---------- Buttons (legacy primary) ---------- */ --btn-primary-bg: #b91c1c; --btn-primary-fg: #ffffff; --btn-primary-bg-hover: #7f1d1d; --btn-secondary-bg: #4b1414; --btn-secondary-fg: #ffffff; --btn-secondary-bg-hover: #2a0a0a; --btn-shadow: 0 4px 15px rgba(185, 28, 28, 0.25); --btn-shadow-hover: 0 6px 20px rgba(185, 28, 28, 0.35); /* Premium gold button — keep gold for the CTA so it still pops on red brand */ --btn-premium-fg: #1c0d0d; --btn-premium-bg-1: #fff3b0; --btn-premium-bg-2: #f7d36a; --btn-premium-bg-3: #c9972a; --btn-premium-border: rgba(201, 151, 42, 0.55); --btn-premium-shadow: 0 10px 28px rgba(201, 151, 42, 0.35); --btn-premium-shadow-hover: 0 14px 34px rgba(201, 151, 42, 0.45); --btn-premium-glow: 0 0 0 3px rgba(247, 211, 106, 0.28); /* ---------- Tables ---------- */ --table-bg: #ffffff; --table-border: #fadcdc; --table-head-bg: #fff7f7; --table-head-accent: #b91c1c; --table-row-hover: #fff1f1; --table-col-separator: #b91c1c; /* ---------- Generic cards (legacy grid layout) ---------- */ --card-bg: #ffffff; --card-border: #fadcdc; --card-shadow: 0 4px 20px rgba(185, 28, 28, 0.08); --card-shadow-hover: 0 8px 30px rgba(185, 28, 28, 0.12); /* Star rating stays gold — readable on white, signals quality */ --rating-star-empty: #f4d8d8; --rating-star-filled: #f1c40f; /* Exclusive badge — gold border on white, classy */ --exclusive-border: 2px solid #c9972a; --exclusive-badge-bg: #b91c1c; --exclusive-badge-fg: #ffffff; --badge-top1: #f1c40f; --badge-top2: #d1d5db; --badge-top3: #cd7f32; /* ---------- Misc ---------- */ --shadow-soft: 0 2px 10px rgba(28, 13, 13, 0.06); --shadow-strong: 0 4px 20px rgba(28, 13, 13, 0.10); --focus-outline: 2px solid #b91c1c; /* ============================================================ Semantic palette (used by review cards, lists, pros/cons) Re-route the neutrals & accents to fit the crimson theme. */ --c-success: #16a34a; /* keep green for "money / bonus" */ --c-success-strong: #15803d; --c-success-soft: rgba(22, 163, 74, 0.14); --c-danger: #b91c1c; /* matches brand */ --c-info: #b91c1c; /* re-route info to brand red */ --c-info-soft: #fde2e2; --c-info-soft-2: #fac6c6; --c-info-strong: #7f1d1d; --c-info-light: #f5a3a3; --c-warning: #f59e0b; --c-neutral-text: #1c0d0d; --c-neutral-text-muted: rgba(28, 13, 13, 0.60); --c-neutral-bg: #ffffff; --c-neutral-bg-elev: #fff7f7; --c-neutral-border: rgba(127, 29, 29, 0.12); --c-neutral-divider: rgba(127, 29, 29, 0.10); --c-neutral-shadow: rgba(127, 29, 29, 0.10); --c-neutral-shadow-strong: rgba(127, 29, 29, 0.18); /* ---------- Review card overrides ---------- */ --rc-pos-border: rgba(127, 29, 29, 0.30); --rc-star-off: rgba(127, 29, 29, 0.20); /* Exclusive badge inside rev-card — gold pill on white */ --rc-excl-bg: rgba(201, 151, 42, 0.12); --rc-excl-fg: #8b6914; --rc-excl-border: rgba(201, 151, 42, 0.45); /* "Read review" button — soft red */ --rc-review-btn-bg: #fde2e2; --rc-review-btn-border: #fac6c6; --rc-review-btn-fg: #7f1d1d; --rc-review-btn-bg-hover: #fac6c6; --rc-review-btn-border-hover: #f5a3a3; /* "Play now" — strong red CTA */ --rc-play-btn-bg: #b91c1c; --rc-play-btn-fg: #ffffff; --rc-play-btn-bg-hover: #7f1d1d; /* Bonus stays green for that money feel; switch the next line to var(--c-danger) if you want red instead. */ /* --rc-accent: var(--c-danger); */ /* ---------- Lists ---------- */ --list-card-border-hover: rgba(127, 29, 29, 0.22); --list-bullet-bg: var(--c-success); /* green check on white still reads well */ --list-counter-bg: #b91c1c; --list-counter-shadow: 0 2px 6px rgba(185, 28, 28, 0.30); /* ---------- Pros & Cons ---------- */ --pc-pros: #16a34a; --pc-cons: #b91c1c; } /* ============================================================ Azure — bright sky blue brand on a clean white background. Crisp, modern, fintech-flavoured. ============================================================ */ [data-theme="azure"] { /* ---------- Base text / background ---------- */ --color-fg: #0c1a2b; --color-fg-muted: #4b6b8a; --color-fg-subtle: #2c4a6b; --color-bg: #ffffff; --color-bg-elev: #f0f9ff; --color-border: #d6ecfb; --color-border-soft: #e8f4fc; --author-fg: #f1eaea; --author-muted: #ffffff; --author-border: #00001a; --author-link: #ffffff; --author-link-hover: #fff; --author-bg: #00001a; /* ---------- Brand / accents ---------- */ --color-primary: #289fd6; --color-primary-ink: #ffffff; --color-primary-shadow: rgba(14, 165, 233, 0.30); /* ---------- Headings ---------- */ --color-h1: #075985; --color-h2: #0369a1; --color-h3: #0284c7; --color-h4: #0369a1; --color-h5: #0c4a6e; --color-h6: #082f49; --color-success: #0ea5e9; --color-success-strong: #0369a1; --color-neutral-ink: #0c4a6e; --color-neutral-ink-weak: #d6ecfb; /* ---------- Header / Nav ---------- */ --topbar-bg: #ffffff; --topbar-ink: #075985; --subnav-bg: #075985; --subnav-link: #d6ecfb; --subnav-link-hover: #ffffff; --topnav-bg: #f0f9ff; /* ---------- Buttons (legacy primary) ---------- Use a deeper navy for the button background — white text needs strong contrast and the bright sky tone (#0ea5e9) is too light for that. */ --btn-primary-bg: #075985; --btn-primary-fg: #ffffff; --btn-primary-bg-hover: #0c4a6e; --btn-secondary-bg: #475569; --btn-secondary-fg: #ffffff; --btn-secondary-bg-hover: #334155; --btn-shadow: 0 4px 15px rgba(7, 89, 133, 0.30); --btn-shadow-hover: 0 6px 20px rgba(7, 89, 133, 0.40); /* Premium gold button — keeps gold to stand out against blue brand */ --btn-premium-fg: #0c1a2b; --btn-premium-bg-1: #fff3b0; --btn-premium-bg-2: #f7d36a; --btn-premium-bg-3: #c9972a; --btn-premium-border: rgba(201, 151, 42, 0.55); --btn-premium-shadow: 0 10px 28px rgba(201, 151, 42, 0.35); --btn-premium-shadow-hover: 0 14px 34px rgba(201, 151, 42, 0.45); --btn-premium-glow: 0 0 0 3px rgba(247, 211, 106, 0.28); /* ---------- Tables ---------- */ --table-bg: #ffffff; --table-border: #d6ecfb; --table-head-bg: #f0f9ff; --table-head-accent: #0ea5e9; --table-row-hover: #e8f4fc; --table-col-separator: #0ea5e9; /* ---------- Generic cards (legacy grid layout) ---------- */ --card-bg: #ffffff; --card-border: #d6ecfb; --card-shadow: 0 4px 20px rgba(14, 165, 233, 0.08); --card-shadow-hover: 0 8px 30px rgba(14, 165, 233, 0.14); --rating-star-empty: #e0eef9; --rating-star-filled: #f1c40f; --exclusive-border: 2px solid #0ea5e9; --exclusive-badge-bg: #0284c7; --exclusive-badge-fg: #ffffff; --badge-top1: #f1c40f; --badge-top2: #cbd5e1; --badge-top3: #cd7f32; /* ---------- Misc ---------- */ --shadow-soft: 0 2px 10px rgba(12, 26, 43, 0.06); --shadow-strong: 0 4px 20px rgba(12, 26, 43, 0.10); --focus-outline: 2px solid #0ea5e9; /* ============================================================ Semantic palette */ --c-success: #16a34a; --c-success-strong: #15803d; --c-success-soft: rgba(22, 163, 74, 0.14); --c-danger: #dc2626; --c-info: #0ea5e9; --c-info-soft: #e0f2fe; --c-info-soft-2: #bae6fd; --c-info-strong: #075985; --c-info-light: #7dd3fc; --c-warning: #f59e0b; --c-neutral-text: #0c1a2b; --c-neutral-text-muted: rgba(12, 26, 43, 0.60); --c-neutral-bg: #ffffff; --c-neutral-bg-elev: #f0f9ff; --c-neutral-border: rgba(7, 89, 133, 0.12); --c-neutral-divider: rgba(7, 89, 133, 0.10); --c-neutral-shadow: rgba(7, 89, 133, 0.10); --c-neutral-shadow-strong: rgba(7, 89, 133, 0.18); /* ---------- Review card overrides ---------- */ --rc-pos-border: rgba(7, 89, 133, 0.30); --rc-star-off: rgba(7, 89, 133, 0.20); /* Exclusive badge — sky blue pill on white */ --rc-excl-bg: rgba(14, 165, 233, 0.12); --rc-excl-fg: #0369a1; --rc-excl-border: rgba(14, 165, 233, 0.40); /* "Read review" — pastel sky */ --rc-review-btn-bg: #e0f2fe; --rc-review-btn-border: #bae6fd; --rc-review-btn-fg: #075985; --rc-review-btn-bg-hover: #bae6fd; --rc-review-btn-border-hover: #7dd3fc; /* "Play now" — saturated blue, white text reads cleanly */ --rc-play-btn-bg: #0369a1; --rc-play-btn-fg: #ffffff; --rc-play-btn-bg-hover: #075985; /* ---------- Lists ---------- */ --list-card-border-hover: rgba(7, 89, 133, 0.22); --list-bullet-bg: var(--c-success); --list-counter-bg: #0ea5e9; --list-counter-shadow: 0 2px 6px rgba(14, 165, 233, 0.30); /* ---------- Pros & Cons ---------- */ --pc-pros: #16a34a; --pc-cons: #dc2626; }