/* ============================================================ PALETTES — optional theme overrides for :root variables Usage: 1) Ensure this file is included after style.cvda27u-css (see layouts/partials/head.cvda27u-html) 2) Set in data/site.cvda27u-yaml: theme.cvda27u-palette: "blue-dark" (or any value below) (it becomes automatically) Available palettes: - light, dark - pink-light, pink-dark - blue-light, blue-dark - green-light, green-dark - yellow-light, yellow-dark ============================================================ */ /* ---------- Base: DARK (matches current default) ---------- */ :root[data-palette="dark"] { --color-body-bg: #0f0a1a; --color-surface: #1a1329; --color-surface-alt: #221a35; --color-surface-glass: rgba(26, 19, 41, 0.7); --color-text: #f4f1ff; --color-text-muted: rgba(244, 241, 255, 0.6); --color-border: rgba(255, 255, 255, 0.06); --color-body-bg-60: rgba(15, 10, 26, 0.6); --color-body-bg-70: rgba(15, 10, 26, 0.7); --color-body-bg-75: rgba(15, 10, 26, 0.75); --color-body-bg-85: rgba(15, 10, 26, 0.85); --color-body-bg-90: rgba(15, 10, 26, 0.9); --color-surface-alt-50: rgba(34, 26, 53, 0.5); --color-white-02: rgba(255, 255, 255, 0.02); --color-white-03: rgba(255, 255, 255, 0.03); --color-white-05: rgba(255, 255, 255, 0.05); --color-white-06: var(--color-border); --color-white-08: rgba(255, 255, 255, 0.08); --color-white-10: rgba(255, 255, 255, 0.1); --color-white-15: rgba(255, 255, 255, 0.15); --color-white-20: rgba(255, 255, 255, 0.2); --color-white-75: rgba(255, 255, 255, 0.75); --color-black-30: rgba(0, 0, 0, 0.3); --color-black-40: rgba(0, 0, 0, 0.4); --color-black-50: rgba(0, 0, 0, 0.5); --color-black-60: rgba(0, 0, 0, 0.6); --gradient-hero-overlay: linear-gradient(180deg, var(--color-body-bg-60) 0%, var(--color-body-bg-90) 100%); --gradient-live-results: linear-gradient(180deg, var(--color-transparent) 0%, var(--color-surface-alt-50) 100%); --gradient-popup-overlay: linear-gradient(180deg, var(--color-body-bg-60) 0%, var(--color-body-bg-85) 100%); } /* ---------- Readability: LIGHT variants on dark overlays ---------- */ :root[data-palette="light"], :root[data-palette$="-light"] { --color-hero-text: var(--color-white); --color-hero-text-muted: var(--color-white-75); --color-overlay-text: var(--color-white); --color-popup-text: var(--color-white); } /* ---------- Base: LIGHT ---------- */ :root[data-palette="light"] { --color-body-bg: #f7f7fb; --color-surface: #ffffff; --color-surface-alt: #f0f1f7; --color-surface-glass: rgba(255, 255, 255, 0.72); --color-text: #0f172a; --color-text-muted: rgba(15, 23, 42, 0.65); --color-border: rgba(15, 23, 42, 0.12); /* Keep overlays dark for contrast on images */ --color-body-bg-60: rgba(15, 23, 42, 0.6); --color-body-bg-70: rgba(15, 23, 42, 0.7); --color-body-bg-75: rgba(15, 23, 42, 0.75); --color-body-bg-85: rgba(15, 23, 42, 0.85); --color-body-bg-90: rgba(15, 23, 42, 0.9); --color-surface-alt-50: rgba(240, 241, 247, 0.8); /* Used across UI as subtle hover/tint colors */ --color-white-02: rgba(15, 23, 42, 0.02); --color-white-03: rgba(15, 23, 42, 0.03); --color-white-05: rgba(15, 23, 42, 0.05); --color-white-06: var(--color-border); --color-white-08: rgba(15, 23, 42, 0.08); --color-white-10: rgba(15, 23, 42, 0.1); --color-white-15: rgba(15, 23, 42, 0.15); --color-white-20: rgba(15, 23, 42, 0.2); /* Overlays/buttons still need actual white contrast */ --color-overlay-btn-bg: rgba(255, 255, 255, 0.1); --color-overlay-btn-hover-bg: rgba(255, 255, 255, 0.15); --color-overlay-btn-border: rgba(255, 255, 255, 0.2); /* Shadows feel too heavy on light bg otherwise */ --color-black-30: rgba(15, 23, 42, 0.12); --color-black-40: rgba(15, 23, 42, 0.18); --color-black-50: rgba(15, 23, 42, 0.24); --color-black-60: rgba(15, 23, 42, 0.32); --gradient-hero-overlay: linear-gradient(180deg, var(--color-body-bg-60) 0%, var(--color-body-bg-90) 100%); --gradient-live-results: linear-gradient(180deg, var(--color-transparent) 0%, var(--color-surface-alt-50) 100%); --gradient-popup-overlay: linear-gradient(180deg, var(--color-body-bg-60) 0%, var(--color-body-bg-85) 100%); } /* ============================================================ ACCENTS — each palette defines both light + dark variant ============================================================ */ /* ---------- Pink ---------- */ :root[data-palette="pink-dark"] { --color-body-bg: #0f0a1a; --color-surface: #1a1329; --color-surface-alt: #221a35; --color-surface-glass: rgba(26, 19, 41, 0.7); --color-text: #f4f1ff; --color-text-muted: rgba(244, 241, 255, 0.6); --color-border: rgba(255, 255, 255, 0.06); --color-primary: #db2777; --color-primary-hover: #be185d; --color-accent: #f472b6; --color-badge-popular: #ec4899; --color-badge-jackpot: #fde047; --color-star: #fbbf24; --color-primary-40: rgba(219, 39, 119, 0.4); --color-primary-50: rgba(219, 39, 119, 0.5); } :root[data-palette="pink-light"] { --color-body-bg: #f7f7fb; --color-surface: #ffffff; --color-surface-alt: #f0f1f7; --color-surface-glass: rgba(255, 255, 255, 0.72); --color-text: #0f172a; --color-text-muted: rgba(15, 23, 42, 0.65); --color-border: rgba(15, 23, 42, 0.12); --color-primary: #db2777; --color-primary-hover: #be185d; --color-accent: #f472b6; --color-badge-popular: #ec4899; --color-badge-jackpot: #fde047; --color-star: #fbbf24; --color-primary-40: rgba(219, 39, 119, 0.4); --color-primary-50: rgba(219, 39, 119, 0.5); } /* ---------- Blue ---------- */ :root[data-palette="blue-dark"] { --color-body-bg: #0f0a1a; --color-surface: #1a1329; --color-surface-alt: #221a35; --color-surface-glass: rgba(26, 19, 41, 0.7); --color-text: #f4f1ff; --color-text-muted: rgba(244, 241, 255, 0.6); --color-border: rgba(255, 255, 255, 0.06); --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-accent: #38bdf8; --color-badge-popular: #0ea5e9; --color-badge-jackpot: #fde047; --color-star: #fbbf24; --color-primary-40: rgba(37, 99, 235, 0.4); --color-primary-50: rgba(37, 99, 235, 0.5); } :root[data-palette="blue-light"] { --color-body-bg: #f7f7fb; --color-surface: #ffffff; --color-surface-alt: #f0f1f7; --color-surface-glass: rgba(255, 255, 255, 0.72); --color-text: #0f172a; --color-text-muted: rgba(15, 23, 42, 0.65); --color-border: rgba(15, 23, 42, 0.12); --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-accent: #38bdf8; --color-badge-popular: #0ea5e9; --color-badge-jackpot: #fde047; --color-star: #fbbf24; --color-primary-40: rgba(37, 99, 235, 0.4); --color-primary-50: rgba(37, 99, 235, 0.5); } /* ---------- Green ---------- */ :root[data-palette="green-dark"] { --color-body-bg: #0f0a1a; --color-surface: #1a1329; --color-surface-alt: #221a35; --color-surface-glass: rgba(26, 19, 41, 0.7); --color-text: #f4f1ff; --color-text-muted: rgba(244, 241, 255, 0.6); --color-border: rgba(255, 255, 255, 0.06); --color-primary: #16a34a; --color-primary-hover: #15803d; --color-accent: #22c55e; --color-badge-popular: #10b981; --color-badge-jackpot: #fde047; --color-star: #fbbf24; --color-primary-40: rgba(22, 163, 74, 0.4); --color-primary-50: rgba(22, 163, 74, 0.5); } :root[data-palette="green-light"] { --color-body-bg: #f7f7fb; --color-surface: #ffffff; --color-surface-alt: #f0f1f7; --color-surface-glass: rgba(255, 255, 255, 0.72); --color-text: #0f172a; --color-text-muted: rgba(15, 23, 42, 0.65); --color-border: rgba(15, 23, 42, 0.12); --color-primary: #16a34a; --color-primary-hover: #15803d; --color-accent: #22c55e; --color-badge-popular: #10b981; --color-badge-jackpot: #fde047; --color-star: #fbbf24; --color-primary-40: rgba(22, 163, 74, 0.4); --color-primary-50: rgba(22, 163, 74, 0.5); } /* ---------- Yellow ---------- */ :root[data-palette="yellow-dark"] { --color-body-bg: #0f0a1a; --color-surface: #1a1329; --color-surface-alt: #221a35; --color-surface-glass: rgba(26, 19, 41, 0.7); --color-text: #f4f1ff; --color-text-muted: rgba(244, 241, 255, 0.6); --color-border: rgba(255, 255, 255, 0.06); /* Slightly darker amber for contrast with white text */ --color-primary: #d97706; --color-primary-hover: #b45309; --color-accent: #fbbf24; --color-badge-popular: #f97316; --color-badge-jackpot: #fde047; --color-star: #fde047; --color-primary-40: rgba(217, 119, 6, 0.4); --color-primary-50: rgba(217, 119, 6, 0.5); } :root[data-palette="yellow-light"] { --color-body-bg: #f7f7fb; --color-surface: #ffffff; --color-surface-alt: #f0f1f7; --color-surface-glass: rgba(255, 255, 255, 0.72); --color-text: #0f172a; --color-text-muted: rgba(15, 23, 42, 0.65); --color-border: rgba(15, 23, 42, 0.12); --color-primary: #d97706; --color-primary-hover: #b45309; --color-accent: #fbbf24; --color-badge-popular: #f97316; --color-badge-jackpot: #fde047; --color-star: #fde047; --color-primary-40: rgba(217, 119, 6, 0.4); --color-primary-50: rgba(217, 119, 6, 0.5); }