/* ============================================================ Sports Cards Shop — Theme Variations Six hand-tuned themes selectable from header dropdown. Each theme overrides CSS custom properties globally. Applied via [data-theme="..."] on element. ============================================================ */ /* Default theme vars extended with header tokens so per-theme overrides cover the sticky header + section accents. */ :root { --scs-header-bg: rgba(0, 0, 0, 0.78); --scs-header-bg-scrolled: rgba(0, 0, 0, 0.92); --scs-body-font-size: 16px; --scs-line-height: 1.6; --scs-display-letter: 0.2em; --scs-nav-letter: 0.14em; --scs-border-width: 1px; } /* ------------------------------------------------------------ 1) Royal Vault — luxury default. Black + ambient gold. ------------------------------------------------------------ */ [data-theme="royal-vault"] { /* Inherits defaults from :root — no overrides needed. */ } /* ------------------------------------------------------------ 2) Rookie Card — classic pack-fresh navy/red. Bold sans. ------------------------------------------------------------ */ [data-theme="rookie-card"] { --scs-color-bg: #0B1B3A; --scs-color-bg-deep: #061229; --scs-color-bg-warm: #102654; --scs-color-surface: #123060; --scs-color-surface-raised: #1A3E78; --scs-color-gold: #E84C3D; --scs-color-gold-bright: #FF7061; --scs-color-gold-deep: #A83025; --scs-color-gold-soft: rgba(232, 76, 61, 0.75); --scs-color-gold-hairline: rgba(255, 255, 255, 0.22); --scs-color-gold-glow: rgba(232, 76, 61, 0.28); --scs-color-text: #FFFFFF; --scs-color-text-muted: #B9C6DC; --scs-color-text-dim: #6683B5; --scs-color-crimson: #FFD43B; --scs-font-sans: "Inter", system-ui, sans-serif; --scs-font-display: "Oswald", Impact, sans-serif; --scs-font-serif: "Oswald", sans-serif; --scs-radius-sm: 4px; --scs-radius-md: 10px; --scs-radius-lg: 18px; --scs-header-bg: rgba(6, 18, 41, 0.9); --scs-header-bg-scrolled: rgba(6, 18, 41, 0.98); --scs-body-font-size: 16px; --scs-line-height: 1.55; --scs-display-letter: 0.08em; --scs-nav-letter: 0.12em; --scs-border-width: 2px; --scs-shadow-card: 0 12px 36px rgba(232, 76, 61, 0.22); --scs-shadow-gold: 0 0 24px rgba(232, 76, 61, 0.4); } /* ------------------------------------------------------------ 3) Diamond Refractor — icy holo silver + cyan. Geometric. ------------------------------------------------------------ */ [data-theme="diamond-refractor"] { --scs-color-bg: #0F172A; --scs-color-bg-deep: #050913; --scs-color-bg-warm: #1E293B; --scs-color-surface: #1E293B; --scs-color-surface-raised: #334155; --scs-color-gold: #7DD3FC; --scs-color-gold-bright: #BAE6FD; --scs-color-gold-deep: #0284C7; --scs-color-gold-soft: rgba(125, 211, 252, 0.7); --scs-color-gold-hairline: rgba(125, 211, 252, 0.28); --scs-color-gold-glow: rgba(125, 211, 252, 0.28); --scs-color-text: #F1F5F9; --scs-color-text-muted: #94A3B8; --scs-color-text-dim: #64748B; --scs-font-sans: "Rajdhani", "Inter", sans-serif; --scs-font-display: "Rajdhani", "Inter", sans-serif; --scs-font-serif: "Rajdhani", sans-serif; --scs-radius-sm: 0; --scs-radius-md: 2px; --scs-radius-lg: 4px; --scs-header-bg: rgba(5, 9, 19, 0.82); --scs-header-bg-scrolled: rgba(5, 9, 19, 0.95); --scs-body-font-size: 16.5px; --scs-line-height: 1.55; --scs-display-letter: 0.16em; --scs-nav-letter: 0.2em; --scs-border-width: 1px; --scs-shadow-card: 0 18px 60px rgba(125, 211, 252, 0.18); --scs-shadow-gold: 0 0 28px rgba(125, 211, 252, 0.32); } /* ------------------------------------------------------------ 4) Vintage Card — tobacco-era cream + burgundy. Serif. ------------------------------------------------------------ */ [data-theme="vintage-card"] { --scs-color-bg: #F2E8D5; --scs-color-bg-deep: #E9DCC1; --scs-color-bg-warm: #F8F1E1; --scs-color-surface: #FFFBF0; --scs-color-surface-raised: #FFFFFF; --scs-color-gold: #7A1F1F; --scs-color-gold-bright: #A82F2F; --scs-color-gold-deep: #451212; --scs-color-gold-soft: rgba(122, 31, 31, 0.7); --scs-color-gold-hairline: rgba(122, 31, 31, 0.28); --scs-color-gold-glow: rgba(122, 31, 31, 0.16); --scs-color-text: #2C1810; --scs-color-text-muted: #5C3A21; --scs-color-text-dim: #8B6B4A; --scs-color-crimson: #7A1F1F; --scs-font-sans: "EB Garamond", Georgia, serif; --scs-font-display: "Playfair Display", "EB Garamond", serif; --scs-font-serif: "EB Garamond", Georgia, serif; --scs-radius-sm: 2px; --scs-radius-md: 4px; --scs-radius-lg: 6px; --scs-header-bg: rgba(242, 232, 213, 0.92); --scs-header-bg-scrolled: rgba(233, 220, 193, 0.98); --scs-body-font-size: 17px; --scs-line-height: 1.75; --scs-display-letter: 0.05em; --scs-nav-letter: 0.08em; --scs-border-width: 1px; --scs-shadow-card: 0 8px 28px rgba(76, 51, 27, 0.18); --scs-shadow-gold: 0 0 20px rgba(122, 31, 31, 0.14); --scs-shadow-inset: inset 0 0 0 1px var(--scs-color-gold-hairline); } /* ------------------------------------------------------------ 5) Neon Grade — card-show energy. Violet + cyan + magenta. ------------------------------------------------------------ */ [data-theme="neon-grade"] { --scs-color-bg: #120827; --scs-color-bg-deep: #070213; --scs-color-bg-warm: #1C1141; --scs-color-surface: #241454; --scs-color-surface-raised: #2F1D6E; --scs-color-gold: #00E5FF; --scs-color-gold-bright: #8DFAFF; --scs-color-gold-deep: #00A3B8; --scs-color-gold-soft: rgba(0, 229, 255, 0.7); --scs-color-gold-hairline: rgba(255, 46, 204, 0.4); --scs-color-gold-glow: rgba(0, 229, 255, 0.4); --scs-color-text: #F0F4FF; --scs-color-text-muted: #A095D8; --scs-color-text-dim: #6B5FA8; --scs-color-crimson: #FF2ECC; --scs-font-sans: "Space Grotesk", "Inter", sans-serif; --scs-font-display: "Space Grotesk", "Inter", sans-serif; --scs-font-serif: "Space Grotesk", monospace; --scs-radius-sm: 0; --scs-radius-md: 0; --scs-radius-lg: 0; --scs-header-bg: rgba(7, 2, 19, 0.85); --scs-header-bg-scrolled: rgba(7, 2, 19, 0.96); --scs-body-font-size: 15.5px; --scs-line-height: 1.6; --scs-display-letter: 0.18em; --scs-nav-letter: 0.22em; --scs-border-width: 2px; --scs-shadow-card: 0 0 0 1px rgba(255, 46, 204, 0.28), 0 16px 60px rgba(0, 229, 255, 0.22); --scs-shadow-gold: 0 0 32px rgba(0, 229, 255, 0.5); } /* ------------------------------------------------------------ 6) Courtside — hardwood warm. Amber + cream + walnut. Friendly. ------------------------------------------------------------ */ [data-theme="courtside"] { --scs-color-bg: #FFFBF0; --scs-color-bg-deep: #F5EDD8; --scs-color-bg-warm: #FFF5E0; --scs-color-surface: #FFFFFF; --scs-color-surface-raised: #FFFDF8; --scs-color-gold: #C2410C; --scs-color-gold-bright: #EA580C; --scs-color-gold-deep: #7C2D12; --scs-color-gold-soft: rgba(194, 65, 12, 0.7); --scs-color-gold-hairline: rgba(194, 65, 12, 0.28); --scs-color-gold-glow: rgba(234, 88, 12, 0.22); --scs-color-text: #3F2A15; --scs-color-text-muted: #6E4E2D; --scs-color-text-dim: #9C7554; --scs-color-crimson: #C2410C; --scs-font-sans: "Nunito", system-ui, sans-serif; --scs-font-display: "Anton", Impact, sans-serif; --scs-font-serif: "Nunito", sans-serif; --scs-radius-sm: 6px; --scs-radius-md: 14px; --scs-radius-lg: 24px; --scs-header-bg: rgba(255, 251, 240, 0.92); --scs-header-bg-scrolled: rgba(245, 237, 216, 0.98); --scs-body-font-size: 16.5px; --scs-line-height: 1.65; --scs-display-letter: 0.06em; --scs-nav-letter: 0.1em; --scs-border-width: 1px; --scs-shadow-card: 0 14px 34px rgba(124, 45, 18, 0.18); --scs-shadow-gold: 0 0 26px rgba(234, 88, 12, 0.28); } /* ============================================================ Global elements that react to theme vars ============================================================ */ body.scs-body { font-size: var(--scs-body-font-size); line-height: var(--scs-line-height); background-color: var(--scs-color-bg); color: var(--scs-color-text); } .scs-primary-nav__list a { letter-spacing: var(--scs-nav-letter); } h1, h2, h3, .scs-section__title, .scs-brand__sitename { letter-spacing: var(--scs-display-letter); } /* Buttons respect theme radius + border thickness. */ .scs-button { border-radius: var(--scs-radius-md); border-width: var(--scs-border-width); } /* Ensure footer + section backgrounds use theme bg tokens (were hard-coded). */ .scs-site-footer { background-color: var(--scs-color-bg-deep); color: var(--scs-color-text-muted); } /* Header icons adopt theme text color. */ .scs-icon-btn { color: var(--scs-color-text); } .scs-icon-btn:hover { color: var(--scs-color-gold-bright); } /* Primary nav link color tracks theme. */ .scs-primary-nav__list a { color: var(--scs-color-text); } /* ============================================================ Per-theme signature styling — buttons, cards, typography ============================================================ */ /* ---- 2) Rookie Card — sharp Oswald caps, red-chip buttons ---- */ [data-theme="rookie-card"] .scs-hero__title { font-weight: 700; font-style: italic; letter-spacing: 0.04em; } [data-theme="rookie-card"] .scs-section__title { font-weight: 700; text-transform: uppercase; } [data-theme="rookie-card"] .scs-button { background-color: var(--scs-color-gold); color: #FFFFFF; border: 2px solid var(--scs-color-gold-deep); box-shadow: 0 4px 0 var(--scs-color-gold-deep); text-transform: uppercase; font-weight: 700; } [data-theme="rookie-card"] .scs-button:hover { background-color: var(--scs-color-gold-bright); color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 6px 0 var(--scs-color-gold-deep); } [data-theme="rookie-card"] .scs-button--ghost { background-color: transparent; color: #FFFFFF; border-color: #FFFFFF; box-shadow: 0 4px 0 rgba(255, 255, 255, 0.25); } [data-theme="rookie-card"] .scs-button--ghost:hover { background-color: rgba(255, 255, 255, 0.12); color: #FFFFFF; } [data-theme="rookie-card"] .scs-card-tile { border: 2px solid var(--scs-color-gold); background-color: var(--scs-color-surface); } /* ---- 3) Diamond Refractor — condensed caps, thin lines, cool gloss ---- */ [data-theme="diamond-refractor"] .scs-hero__title { font-weight: 600; text-transform: uppercase; letter-spacing: 0.25em; } [data-theme="diamond-refractor"] .scs-button { background-image: linear-gradient(135deg, var(--scs-color-gold) 0%, var(--scs-color-gold-bright) 50%, var(--scs-color-gold) 100%); background-size: 200% 200%; color: #0F172A; border: 0; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; transition: background-position 0.6s ease; } [data-theme="diamond-refractor"] .scs-button:hover { background-position: 100% 0; color: #0F172A; box-shadow: 0 8px 24px rgba(125, 211, 252, 0.4); } [data-theme="diamond-refractor"] .scs-button--ghost { background-image: none; background-color: transparent; color: var(--scs-color-gold-bright); border: 1px solid var(--scs-color-gold); } [data-theme="diamond-refractor"] .scs-button--ghost:hover { background-color: rgba(125, 211, 252, 0.1); color: var(--scs-color-gold-bright); } [data-theme="diamond-refractor"] .scs-card-tile { border: 1px solid rgba(125, 211, 252, 0.3); background-color: rgba(30, 41, 59, 0.7); backdrop-filter: blur(10px); } /* ---- 4) Vintage Card — heritage burgundy, serif, soft tan ---- */ [data-theme="vintage-card"] .scs-hero__title { font-family: "Playfair Display", serif; font-style: italic; font-weight: 700; letter-spacing: 0.02em; text-transform: none; } [data-theme="vintage-card"] .scs-section__title { font-weight: 700; text-transform: none; font-style: italic; } [data-theme="vintage-card"] .scs-button { background-color: var(--scs-color-gold); color: #F2E8D5; border: 1px solid var(--scs-color-gold-deep); font-family: "EB Garamond", serif; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } [data-theme="vintage-card"] .scs-button:hover { background-color: var(--scs-color-gold-bright); color: #FFFBF0; } [data-theme="vintage-card"] .scs-button--ghost { background-color: transparent; color: var(--scs-color-gold); border: 1px solid var(--scs-color-gold); } [data-theme="vintage-card"] .scs-button--ghost:hover { background-color: var(--scs-color-gold); color: #F2E8D5; } [data-theme="vintage-card"] .scs-card-tile { background-color: var(--scs-color-surface); border: 1px solid rgba(122, 31, 31, 0.2); box-shadow: 0 4px 16px rgba(76, 51, 27, 0.1); } [data-theme="vintage-card"] .scs-primary-nav__list a { color: var(--scs-color-text); } [data-theme="vintage-card"] .scs-site-footer { background-color: #E9DCC1; color: var(--scs-color-text-muted); } [data-theme="vintage-card"] .scs-site-footer a { color: var(--scs-color-text); } /* ---- 5) Neon Grade — sharp edges + glow, pink hairlines, cyan fills ---- */ [data-theme="neon-grade"] .scs-hero__title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; text-shadow: 0 0 4px rgba(0, 229, 255, 0.9), 0 0 16px rgba(0, 229, 255, 0.6), 0 0 40px rgba(255, 46, 204, 0.4); } [data-theme="neon-grade"] .scs-section__title { color: var(--scs-color-gold); text-shadow: 0 0 12px rgba(0, 229, 255, 0.6); } [data-theme="neon-grade"] .scs-button { background-color: transparent; color: var(--scs-color-gold); border: 2px solid var(--scs-color-gold); text-transform: uppercase; font-weight: 700; letter-spacing: 0.22em; box-shadow: 0 0 0 1px rgba(255, 46, 204, 0.4), 0 0 20px rgba(0, 229, 255, 0.25), inset 0 0 12px rgba(0, 229, 255, 0.15); } [data-theme="neon-grade"] .scs-button:hover { background-color: var(--scs-color-gold); color: #070213; box-shadow: 0 0 0 1px rgba(255, 46, 204, 0.6), 0 0 32px rgba(0, 229, 255, 0.6); } [data-theme="neon-grade"] .scs-button--ghost { color: #FF2ECC; border-color: #FF2ECC; box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.3), 0 0 20px rgba(255, 46, 204, 0.3); } [data-theme="neon-grade"] .scs-button--ghost:hover { background-color: #FF2ECC; color: #070213; } [data-theme="neon-grade"] .scs-card-tile { border: 1px solid #FF2ECC; background-color: rgba(36, 20, 84, 0.7); box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.2), 0 16px 48px rgba(0, 229, 255, 0.15); } /* ---- 6) Courtside — friendly Anton/Nunito, rounded amber pills ---- */ [data-theme="courtside"] .scs-hero__title { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; } [data-theme="courtside"] .scs-section__title { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; } [data-theme="courtside"] .scs-button { background-color: var(--scs-color-gold); color: #FFFBF0; border: 0; border-radius: 999px; padding: 14px 32px; font-family: "Nunito", sans-serif; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 8px 20px rgba(194, 65, 12, 0.3); } [data-theme="courtside"] .scs-button:hover { background-color: var(--scs-color-gold-bright); color: #FFFBF0; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(234, 88, 12, 0.4); } [data-theme="courtside"] .scs-button--ghost { background-color: transparent; color: var(--scs-color-gold); border: 2px solid var(--scs-color-gold); box-shadow: none; } [data-theme="courtside"] .scs-button--ghost:hover { background-color: var(--scs-color-gold); color: #FFFBF0; } [data-theme="courtside"] .scs-card-tile { background-color: var(--scs-color-surface); border-radius: var(--scs-radius-lg); box-shadow: 0 10px 28px rgba(124, 45, 18, 0.12); border: 0; } [data-theme="courtside"] .scs-site-footer { background-color: #F5EDD8; color: var(--scs-color-text-muted); } [data-theme="courtside"] .scs-site-footer a { color: var(--scs-color-text); } /* ============================================================ Light-theme accessibility fixes — ensures text remains legible when themes flip to light surfaces (vintage, courtside). ============================================================ */ [data-theme="vintage-card"] .scs-hero__tagline, [data-theme="courtside"] .scs-hero__tagline { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); } /* Hero CTAs over dark hero image in light themes need a readable surface. */ [data-theme="vintage-card"] .scs-hero .scs-button--ghost, [data-theme="courtside"] .scs-hero .scs-button--ghost { background-color: rgba(255, 251, 240, 0.92); color: var(--scs-color-gold-deep); border-color: var(--scs-color-gold); } [data-theme="vintage-card"] .scs-hero .scs-button--ghost:hover, [data-theme="courtside"] .scs-hero .scs-button--ghost:hover { background-color: var(--scs-color-gold); color: #FFFBF0; } [data-theme="vintage-card"] .scs-site-header__menubar, [data-theme="courtside"] .scs-site-header__menubar { background-color: transparent; border-top-color: var(--scs-color-gold-hairline); border-bottom-color: var(--scs-color-gold-hairline); } /* Theme-switcher dropdown menu — light/dark surface per theme. */ [data-theme="vintage-card"] .scs-theme-switcher__menu, [data-theme="courtside"] .scs-theme-switcher__menu { background-color: rgba(255, 251, 240, 0.98); border-color: var(--scs-color-gold-hairline); color: var(--scs-color-text); } [data-theme="vintage-card"] .scs-theme-switcher__option, [data-theme="courtside"] .scs-theme-switcher__option { color: var(--scs-color-text); } [data-theme="vintage-card"] .scs-theme-switcher__option-note, [data-theme="courtside"] .scs-theme-switcher__option-note { color: var(--scs-color-text-muted); } /* Unified focus ring — ensures a11y focus visibility across all themes. */ .scs-button:focus-visible, .scs-icon-btn:focus-visible, .scs-theme-switcher__btn:focus-visible, .scs-theme-switcher__option:focus-visible, .scs-primary-nav__list a:focus-visible, .scs-header-search input:focus-visible { outline: 2px solid var(--scs-color-gold-bright); outline-offset: 2px; } /* ============================================================ Theme Switcher — dropdown UI in header ============================================================ */ .scs-theme-switcher { position: relative; display: inline-flex; align-items: center; } .scs-theme-switcher__btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: transparent; color: var(--scs-color-text); border: 1px solid var(--scs-color-gold-soft); border-radius: 999px; font-family: var(--scs-font-sans); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: border-color var(--scs-transition-base), background-color var(--scs-transition-base), color var(--scs-transition-base); } .scs-theme-switcher__btn:hover, .scs-theme-switcher__btn:focus-visible { border-color: var(--scs-color-gold); background-color: rgba(212, 175, 55, 0.08); outline: none; color: var(--scs-color-gold-bright); } .scs-theme-switcher__swatch { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.15); } .scs-theme-switcher__label { white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; } .scs-theme-switcher__caret { width: 10px; height: 10px; fill: currentColor; transition: transform var(--scs-transition-base); } .scs-theme-switcher[data-open="true"] .scs-theme-switcher__caret { transform: rotate(180deg); } .scs-theme-switcher__menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 260px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; padding: 8px; background-color: rgba(10, 6, 4, 0.98); border: 1px solid var(--scs-color-gold-hairline); border-radius: var(--scs-radius-md); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--scs-transition-base), transform var(--scs-transition-base), visibility 0s linear 200ms; z-index: 120; scrollbar-width: thin; scrollbar-color: #4a2e15 #000000; } .scs-theme-switcher__menu::-webkit-scrollbar { width: 10px; background: #000000; } .scs-theme-switcher__menu::-webkit-scrollbar-track { background: #000000; border-left: 1px solid #4a2e15; } .scs-theme-switcher__menu::-webkit-scrollbar-thumb { background: #000000; border: 1px solid #4a2e15; border-radius: 0; } .scs-theme-switcher__menu::-webkit-scrollbar-thumb:hover { background: #1a0f05; border-color: #8B5A2B; } .scs-theme-switcher[data-open="true"] .scs-theme-switcher__menu { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } [data-theme="vintage-card"] .scs-theme-switcher__menu, [data-theme="courtside"] .scs-theme-switcher__menu { background-color: rgba(255, 251, 240, 0.98); } .scs-theme-switcher__option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: transparent; color: var(--scs-color-text); border: 0; border-radius: var(--scs-radius-sm); font-family: var(--scs-font-sans); font-size: 0.85rem; text-align: left; cursor: pointer; transition: background-color var(--scs-transition-base); } .scs-theme-switcher__option:hover, .scs-theme-switcher__option:focus-visible { background-color: rgba(212, 175, 55, 0.1); outline: none; } .scs-theme-switcher__option[aria-checked="true"] { background-color: rgba(212, 175, 55, 0.14); } .scs-theme-switcher__option-swatches { display: inline-flex; gap: 2px; flex-shrink: 0; } .scs-theme-switcher__option-swatches span { width: 14px; height: 20px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); } .scs-theme-switcher__option-name { flex: 1 1 auto; font-weight: 600; letter-spacing: 0.04em; } .scs-theme-switcher__option-note { font-size: 0.7rem; color: var(--scs-color-text-muted); letter-spacing: 0.06em; text-transform: uppercase; } .scs-theme-switcher__option[aria-checked="true"] .scs-theme-switcher__option-name { color: var(--scs-color-gold-bright); } @media (max-width: 767px) { .scs-theme-switcher__label { display: none; } .scs-theme-switcher__btn { padding: 0 8px; } .scs-theme-switcher__menu { right: auto; left: 50%; transform: translate(-50%, -6px); min-width: 240px; } .scs-theme-switcher[data-open="true"] .scs-theme-switcher__menu { transform: translate(-50%, 0); } } /* ================================================================ EXTENDED THEMES 7–26 — each overrides palette, fonts, radius, border width, letter-spacing, line-height, header background, and carries at least one signature element override so the look AND layout feel distinct. ================================================================ */ /* ---- 7) Galaxy Foil — cosmic magenta + deep purple, Orbitron ---- */ [data-theme="galaxy-foil"] { --scs-color-bg: #0A0423; --scs-color-bg-deep: #04010E; --scs-color-bg-warm: #160932; --scs-color-surface: #1E0E3E; --scs-color-surface-raised: #2B1456; --scs-color-gold: #E64AFF; --scs-color-gold-bright: #FF8DFF; --scs-color-gold-deep: #8A1FC2; --scs-color-gold-soft: rgba(230,74,255,0.65); --scs-color-gold-hairline: rgba(230,74,255,0.35); --scs-color-gold-glow: rgba(255,141,255,0.4); --scs-color-text: #F0E6FF; --scs-color-text-muted: #A595C8; --scs-color-text-dim: #6B5894; --scs-font-sans: "Orbitron", "Inter", sans-serif; --scs-font-display: "Orbitron", sans-serif; --scs-font-serif: "Orbitron", sans-serif; --scs-radius-sm: 0; --scs-radius-md: 0; --scs-radius-lg: 2px; --scs-header-bg: rgba(4,1,14,0.88); --scs-header-bg-scrolled: rgba(4,1,14,0.97); --scs-body-font-size: 15.5px; --scs-line-height: 1.55; --scs-display-letter: 0.22em; --scs-nav-letter: 0.28em; --scs-border-width: 1px; --scs-shadow-card: 0 18px 60px rgba(230,74,255,0.25); --scs-shadow-gold: 0 0 30px rgba(230,74,255,0.55); } [data-theme="galaxy-foil"] .scs-button { background: linear-gradient(135deg,#E64AFF,#8A1FC2); color:#FFF; border:0; text-transform:uppercase; letter-spacing:0.26em; font-weight:700; } [data-theme="galaxy-foil"] .scs-button--ghost { background:transparent; color:#FF8DFF; border:1px solid #E64AFF; } /* ---- 8) Emerald Vault — deep forest + dim gold, Merriweather serif ---- */ [data-theme="emerald-vault"] { --scs-color-bg: #0A1F16; --scs-color-bg-deep: #040C08; --scs-color-bg-warm: #132E22; --scs-color-surface: #15382A; --scs-color-surface-raised: #1D4A37; --scs-color-gold: #C9A961; --scs-color-gold-bright: #E8D28A; --scs-color-gold-deep: #8C7238; --scs-color-gold-soft: rgba(201,169,97,0.6); --scs-color-gold-hairline: rgba(201,169,97,0.28); --scs-color-gold-glow: rgba(232,210,138,0.2); --scs-color-text: #E8F0E5; --scs-color-text-muted: #8FA690; --scs-color-text-dim: #5A6D5B; --scs-font-sans: "Merriweather", Georgia, serif; --scs-font-display: "Merriweather", Georgia, serif; --scs-font-serif: "Merriweather", Georgia, serif; --scs-radius-sm: 4px; --scs-radius-md: 6px; --scs-radius-lg: 10px; --scs-header-bg: rgba(4,12,8,0.88); --scs-header-bg-scrolled: rgba(4,12,8,0.97); --scs-body-font-size: 16.5px; --scs-line-height: 1.72; --scs-display-letter: 0.04em; --scs-nav-letter: 0.08em; --scs-border-width: 1px; } [data-theme="emerald-vault"] .scs-button { background:var(--scs-color-gold); color:#0A1F16; border:0; font-style:italic; font-weight:700; } /* ---- 9) Tokyo Arcade — crimson/black/white, Unica One ---- */ [data-theme="tokyo-arcade"] { --scs-color-bg: #0F0F0F; --scs-color-bg-deep: #000000; --scs-color-bg-warm: #1A1A1A; --scs-color-surface: #171717; --scs-color-surface-raised: #222222; --scs-color-gold: #FF2E3A; --scs-color-gold-bright: #FF7080; --scs-color-gold-deep: #B91F28; --scs-color-gold-soft: rgba(255,46,58,0.7); --scs-color-gold-hairline: rgba(255,255,255,0.22); --scs-color-gold-glow: rgba(255,46,58,0.35); --scs-color-text: #FFFFFF; --scs-color-text-muted: #A8A8A8; --scs-color-text-dim: #616161; --scs-font-sans: "Unica One", "Inter", sans-serif; --scs-font-display: "Unica One", sans-serif; --scs-font-serif: "Unica One", sans-serif; --scs-radius-sm: 0; --scs-radius-md: 0; --scs-radius-lg: 0; --scs-header-bg: rgba(0,0,0,0.95); --scs-header-bg-scrolled: rgba(0,0,0,1); --scs-body-font-size: 15.5px; --scs-line-height: 1.45; --scs-display-letter: 0.16em; --scs-nav-letter: 0.18em; --scs-border-width: 3px; } [data-theme="tokyo-arcade"] .scs-button { background:#FF2E3A; color:#FFF; border:3px solid #FFF; font-weight:700; letter-spacing:0.24em; } [data-theme="tokyo-arcade"] .scs-button:hover { background:#FFF; color:#FF2E3A; } /* ---- 10) Retro 94 — dark teal + hot pink, Righteous ---- */ [data-theme="retro-94"] { --scs-color-bg: #0D2A2E; --scs-color-bg-deep: #061416; --scs-color-bg-warm: #144044; --scs-color-surface: #1A4E54; --scs-color-surface-raised: #22656D; --scs-color-gold: #FF4FA1; --scs-color-gold-bright: #FF8DC1; --scs-color-gold-deep: #B82E77; --scs-color-gold-soft: rgba(255,79,161,0.65); --scs-color-gold-hairline: rgba(255,223,72,0.35); --scs-color-gold-glow: rgba(255,79,161,0.35); --scs-color-text: #FFF8E7; --scs-color-text-muted: #BCD9DB; --scs-color-text-dim: #6E8D8F; --scs-font-sans: "Righteous", "Inter", sans-serif; --scs-font-display: "Righteous", sans-serif; --scs-font-serif: "Righteous", sans-serif; --scs-radius-sm: 8px; --scs-radius-md: 14px; --scs-radius-lg: 22px; --scs-header-bg: rgba(6,20,22,0.9); --scs-header-bg-scrolled: rgba(6,20,22,0.98); --scs-body-font-size: 16px; --scs-line-height: 1.6; --scs-display-letter: 0.06em; --scs-nav-letter: 0.12em; --scs-border-width: 2px; } [data-theme="retro-94"] .scs-button { background:linear-gradient(135deg,#FF4FA1,#FFDF48); color:#0D2A2E; border:2px solid #FFF; } /* ---- 11) Stadium Turf — grass green + white stripes, Fjalla One ---- */ [data-theme="stadium-turf"] { --scs-color-bg: #0C2E1A; --scs-color-bg-deep: #051610; --scs-color-bg-warm: #134527; --scs-color-surface: #175434; --scs-color-surface-raised: #1F6842; --scs-color-gold: #FFDF48; --scs-color-gold-bright: #FFF08F; --scs-color-gold-deep: #C9AB1F; --scs-color-gold-soft: rgba(255,223,72,0.7); --scs-color-gold-hairline: rgba(255,255,255,0.28); --scs-color-gold-glow: rgba(255,223,72,0.35); --scs-color-text: #FFFFFF; --scs-color-text-muted: #BDD5C5; --scs-color-text-dim: #6E8A7A; --scs-font-sans: "Fjalla One", "Inter", sans-serif; --scs-font-display: "Fjalla One", sans-serif; --scs-font-serif: "Fjalla One", sans-serif; --scs-radius-sm: 2px; --scs-radius-md: 4px; --scs-radius-lg: 6px; --scs-header-bg: rgba(5,22,16,0.92); --scs-header-bg-scrolled: rgba(5,22,16,0.99); --scs-body-font-size: 16px; --scs-line-height: 1.5; --scs-display-letter: 0.12em; --scs-nav-letter: 0.18em; --scs-border-width: 1px; } [data-theme="stadium-turf"] .scs-button { background:#FFDF48; color:#0C2E1A; border:0; text-transform:uppercase; font-weight:700; } /* ---- 12) Gunmetal — brutalist gunmetal + silver, IBM Plex Mono ---- */ [data-theme="gunmetal"] { --scs-color-bg: #1C2025; --scs-color-bg-deep: #0E1114; --scs-color-bg-warm: #282D34; --scs-color-surface: #2C323A; --scs-color-surface-raised: #3A4149; --scs-color-gold: #9EA6B3; --scs-color-gold-bright: #D4DAE3; --scs-color-gold-deep: #5E6670; --scs-color-gold-soft: rgba(158,166,179,0.65); --scs-color-gold-hairline: rgba(158,166,179,0.3); --scs-color-gold-glow: rgba(212,218,227,0.25); --scs-color-text: #E6E9EE; --scs-color-text-muted: #8D96A0; --scs-color-text-dim: #596069; --scs-font-sans: "IBM Plex Mono", "Courier New", monospace; --scs-font-display: "IBM Plex Mono", monospace; --scs-font-serif: "IBM Plex Mono", monospace; --scs-radius-sm: 0; --scs-radius-md: 0; --scs-radius-lg: 0; --scs-header-bg: rgba(14,17,20,0.95); --scs-header-bg-scrolled: rgba(14,17,20,1); --scs-body-font-size: 14.5px; --scs-line-height: 1.65; --scs-display-letter: 0.08em; --scs-nav-letter: 0.14em; --scs-border-width: 2px; } [data-theme="gunmetal"] .scs-button { background:transparent; color:#E6E9EE; border:2px solid #E6E9EE; border-radius:0; font-family:"IBM Plex Mono",monospace; text-transform:uppercase; } [data-theme="gunmetal"] .scs-button:hover { background:#E6E9EE; color:#1C2025; } /* ---- 13) Sunset Autograph — plum → orange gradient, Sacramento script ---- */ [data-theme="sunset-auto"] { --scs-color-bg: #2A0E1C; --scs-color-bg-deep: #18050F; --scs-color-bg-warm: #3E1528; --scs-color-surface: #4B1A31; --scs-color-surface-raised: #5E223E; --scs-color-gold: #FF8A5C; --scs-color-gold-bright: #FFC09F; --scs-color-gold-deep: #C15A2B; --scs-color-gold-soft: rgba(255,138,92,0.65); --scs-color-gold-hairline: rgba(255,138,92,0.3); --scs-color-gold-glow: rgba(255,192,159,0.3); --scs-color-text: #FFF5ED; --scs-color-text-muted: #D4A89B; --scs-color-text-dim: #8A6A60; --scs-font-sans: "Outfit", "Inter", sans-serif; --scs-font-display: "Sacramento", cursive; --scs-font-serif: "Sacramento", cursive; --scs-radius-sm: 10px; --scs-radius-md: 18px; --scs-radius-lg: 28px; --scs-header-bg: rgba(24,5,15,0.9); --scs-header-bg-scrolled: rgba(24,5,15,0.98); --scs-body-font-size: 16px; --scs-line-height: 1.65; --scs-display-letter: 0; --scs-nav-letter: 0.1em; --scs-border-width: 1px; } [data-theme="sunset-auto"] .scs-hero__title, [data-theme="sunset-auto"] .scs-section-head__title { font-family:"Sacramento",cursive !important; font-size:clamp(3rem,6vw,5.5rem) !important; letter-spacing:0 !important; } [data-theme="sunset-auto"] .scs-button { background:linear-gradient(135deg,#FF8A5C,#C15A2B); color:#FFF; border:0; border-radius:999px; } /* ---- 14) Coliseum — light marble + bronze, Cormorant classical ---- */ [data-theme="coliseum"] { --scs-color-bg: #FAF3E0; --scs-color-bg-deep: #EDE2C4; --scs-color-bg-warm: #FEF9EA; --scs-color-surface: #FFFCF0; --scs-color-surface-raised: #FFFFFF; --scs-color-gold: #8A5A2B; --scs-color-gold-bright: #B0783F; --scs-color-gold-deep: #5C3C1C; --scs-color-gold-soft: rgba(138,90,43,0.6); --scs-color-gold-hairline: rgba(138,90,43,0.3); --scs-color-gold-glow: rgba(176,120,63,0.2); --scs-color-text: #2C1F10; --scs-color-text-muted: #5F4A30; --scs-color-text-dim: #8F7756; --scs-font-sans: "Cormorant Garamond", Georgia, serif; --scs-font-display: "Cormorant Garamond", Georgia, serif; --scs-font-serif: "Cormorant Garamond", Georgia, serif; --scs-radius-sm: 2px; --scs-radius-md: 3px; --scs-radius-lg: 4px; --scs-header-bg: rgba(250,243,224,0.94); --scs-header-bg-scrolled: rgba(237,226,196,0.99); --scs-body-font-size: 17px; --scs-line-height: 1.76; --scs-display-letter: 0.04em; --scs-nav-letter: 0.1em; --scs-border-width: 1px; } [data-theme="coliseum"] .scs-button { background:#8A5A2B; color:#FAF3E0; border:0; font-style:italic; } /* ---- 15) Pitch White — crisp white + cricket green, Lora ---- */ [data-theme="pitch-white"] { --scs-color-bg: #FFFFFF; --scs-color-bg-deep: #F5F7F5; --scs-color-bg-warm: #FAFCFA; --scs-color-surface: #FFFFFF; --scs-color-surface-raised: #FFFFFF; --scs-color-gold: #00703C; --scs-color-gold-bright: #00A457; --scs-color-gold-deep: #004421; --scs-color-gold-soft: rgba(0,112,60,0.6); --scs-color-gold-hairline: rgba(0,112,60,0.24); --scs-color-gold-glow: rgba(0,164,87,0.2); --scs-color-text: #0C1F12; --scs-color-text-muted: #4E6453; --scs-color-text-dim: #89998E; --scs-font-sans: "Lora", Georgia, serif; --scs-font-display: "Lora", Georgia, serif; --scs-font-serif: "Lora", Georgia, serif; --scs-radius-sm: 4px; --scs-radius-md: 8px; --scs-radius-lg: 12px; --scs-header-bg: rgba(255,255,255,0.96); --scs-header-bg-scrolled: rgba(245,247,245,0.99); --scs-body-font-size: 16.5px; --scs-line-height: 1.72; --scs-display-letter: 0.02em; --scs-nav-letter: 0.08em; --scs-border-width: 1px; } [data-theme="pitch-white"] .scs-button { background:#00703C; color:#FFF; border:0; } /* ---- 16) Hologram — iridescent aqua/pink/violet, Bungee Shade ---- */ [data-theme="hologram"] { --scs-color-bg: #050810; --scs-color-bg-deep: #020308; --scs-color-bg-warm: #0A1020; --scs-color-surface: #0E1630; --scs-color-surface-raised: #151E40; --scs-color-gold: #7FFFD4; --scs-color-gold-bright: #C9FFF0; --scs-color-gold-deep: #1FB089; --scs-color-gold-soft: rgba(127,255,212,0.7); --scs-color-gold-hairline: rgba(255,127,200,0.35); --scs-color-gold-glow: rgba(127,255,212,0.4); --scs-color-text: #FFFFFF; --scs-color-text-muted: #A9C5C6; --scs-color-text-dim: #5F7879; --scs-font-sans: "Bungee Shade", "Inter", sans-serif; --scs-font-display: "Bungee Shade", sans-serif; --scs-font-serif: "Bungee Shade", sans-serif; --scs-radius-sm: 0; --scs-radius-md: 0; --scs-radius-lg: 4px; --scs-header-bg: rgba(2,3,8,0.92); --scs-header-bg-scrolled: rgba(2,3,8,1); --scs-body-font-size: 15px; --scs-line-height: 1.55; --scs-display-letter: 0.1em; --scs-nav-letter: 0.2em; --scs-border-width: 2px; } [data-theme="hologram"] .scs-hero__title, [data-theme="hologram"] .scs-section-head__title { background: linear-gradient(135deg,#7FFFD4,#FF7FC8,#A67FFF,#7FFFD4) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; background-size: 300% 300%; animation: holo-shift 6s linear infinite; } @keyframes holo-shift { to { background-position: 300% 0; } } [data-theme="hologram"] .scs-button { background:linear-gradient(135deg,#7FFFD4,#FF7FC8); color:#050810; border:0; font-weight:700; } /* ---- 17) Mono Press — editorial BW with red accent, Archivo Black ---- */ [data-theme="mono-press"] { --scs-color-bg: #FFFFFF; --scs-color-bg-deep: #F4F4F4; --scs-color-bg-warm: #FAFAFA; --scs-color-surface: #FFFFFF; --scs-color-surface-raised: #FFFFFF; --scs-color-gold: #E63946; --scs-color-gold-bright: #FF5A66; --scs-color-gold-deep: #A5202A; --scs-color-gold-soft: rgba(230,57,70,0.6); --scs-color-gold-hairline: #000000; --scs-color-gold-glow: rgba(230,57,70,0.2); --scs-color-text: #000000; --scs-color-text-muted: #555555; --scs-color-text-dim: #999999; --scs-font-sans: "Inter", sans-serif; --scs-font-display: "Archivo Black", "Inter", sans-serif; --scs-font-serif: "Archivo Black", sans-serif; --scs-radius-sm: 0; --scs-radius-md: 0; --scs-radius-lg: 0; --scs-header-bg: rgba(255,255,255,0.96); --scs-header-bg-scrolled: rgba(244,244,244,1); --scs-body-font-size: 16px; --scs-line-height: 1.62; --scs-display-letter: 0; --scs-nav-letter: 0.14em; --scs-border-width: 3px; } [data-theme="mono-press"] .scs-button { background:#000; color:#FFF; border:0; border-radius:0; text-transform:uppercase; font-weight:900; } [data-theme="mono-press"] .scs-button--ghost { background:#FFF; color:#000; border:3px solid #000; } /* ---- 18) Casino Royale — deep crimson felt + gold, Playfair ---- */ [data-theme="casino-royale"] { --scs-color-bg: #3A0F17; --scs-color-bg-deep: #1E060B; --scs-color-bg-warm: #52141F; --scs-color-surface: #5A1923; --scs-color-surface-raised: #71202C; --scs-color-gold: #D4AF37; --scs-color-gold-bright: #F2D16B; --scs-color-gold-deep: #8E6B20; --scs-color-gold-soft: rgba(212,175,55,0.7); --scs-color-gold-hairline: rgba(212,175,55,0.35); --scs-color-gold-glow: rgba(242,209,107,0.3); --scs-color-text: #FFF5E6; --scs-color-text-muted: #D6B9A8; --scs-color-text-dim: #8E7166; --scs-font-sans: "Playfair Display", Georgia, serif; --scs-font-display: "Playfair Display", Georgia, serif; --scs-font-serif: "Playfair Display", Georgia, serif; --scs-radius-sm: 2px; --scs-radius-md: 4px; --scs-radius-lg: 6px; --scs-header-bg: rgba(30,6,11,0.92); --scs-header-bg-scrolled: rgba(30,6,11,0.99); --scs-body-font-size: 17px; --scs-line-height: 1.7; --scs-display-letter: 0.02em; --scs-nav-letter: 0.08em; --scs-border-width: 1px; } [data-theme="casino-royale"] .scs-hero__title, [data-theme="casino-royale"] .scs-section-head__title { font-style:italic; } [data-theme="casino-royale"] .scs-button { background:#D4AF37; color:#3A0F17; border:1px solid #8E6B20; font-style:italic; font-weight:700; } /* ---- 19) Bauhaus — primary RYB geometric, Unica One grid ---- */ [data-theme="bauhaus"] { --scs-color-bg: #F5F5F0; --scs-color-bg-deep: #E8E8DF; --scs-color-bg-warm: #FAFAF2; --scs-color-surface: #FFFFFF; --scs-color-surface-raised: #FFFFFF; --scs-color-gold: #E63946; --scs-color-gold-bright: #FF5A66; --scs-color-gold-deep: #A5202A; --scs-color-gold-soft: rgba(230,57,70,0.7); --scs-color-gold-hairline: rgba(17,17,17,0.3); --scs-color-gold-glow: rgba(241,196,15,0.4); --scs-color-crimson: #1E3A8A; --scs-color-text: #111111; --scs-color-text-muted: #555555; --scs-color-text-dim: #999999; --scs-font-sans: "Unica One", "Inter", sans-serif; --scs-font-display: "Unica One", sans-serif; --scs-font-serif: "Unica One", sans-serif; --scs-radius-sm: 0; --scs-radius-md: 0; --scs-radius-lg: 0; --scs-header-bg: rgba(245,245,240,0.96); --scs-header-bg-scrolled: rgba(232,232,223,1); --scs-body-font-size: 16px; --scs-line-height: 1.55; --scs-display-letter: 0.08em; --scs-nav-letter: 0.2em; --scs-border-width: 3px; } [data-theme="bauhaus"] .scs-button { background:#E63946; color:#FFF; border:3px solid #111; border-radius:0; text-transform:uppercase; font-weight:700; } [data-theme="bauhaus"] .scs-button--ghost { background:#F1C40F; color:#111; border:3px solid #111; } /* ---- 20) Sakura Drift — pastel pink + cream, Caveat handwritten ---- */ [data-theme="sakura"] { --scs-color-bg: #FDF2F8; --scs-color-bg-deep: #F8DCE8; --scs-color-bg-warm: #FFF5FA; --scs-color-surface: #FFFFFF; --scs-color-surface-raised: #FFFFFF; --scs-color-gold: #EC4899; --scs-color-gold-bright: #F472B6; --scs-color-gold-deep: #9D174D; --scs-color-gold-soft: rgba(236,72,153,0.6); --scs-color-gold-hairline: rgba(236,72,153,0.25); --scs-color-gold-glow: rgba(244,114,182,0.3); --scs-color-text: #4C1D4B; --scs-color-text-muted: #9E4E8E; --scs-color-text-dim: #B87AAE; --scs-font-sans: "Caveat", "Inter", cursive; --scs-font-display: "Caveat", cursive; --scs-font-serif: "Caveat", cursive; --scs-radius-sm: 12px; --scs-radius-md: 22px; --scs-radius-lg: 36px; --scs-header-bg: rgba(253,242,248,0.94); --scs-header-bg-scrolled: rgba(248,220,232,0.99); --scs-body-font-size: 17.5px; --scs-line-height: 1.55; --scs-display-letter: 0.01em; --scs-nav-letter: 0.06em; --scs-border-width: 2px; } [data-theme="sakura"] .scs-hero__title, [data-theme="sakura"] .scs-section-head__title { font-size:clamp(2.4rem,5vw,4.5rem) !important; text-transform:none !important; font-weight:700 !important; } [data-theme="sakura"] .scs-button { background:linear-gradient(135deg,#F472B6,#EC4899); color:#FFF; border:0; border-radius:999px; font-size:1.1rem; font-weight:700; } /* ---- 21) Space Command — NASA navy + orange, Barlow ---- */ [data-theme="space-nasa"] { --scs-color-bg: #0B1F3A; --scs-color-bg-deep: #050E1E; --scs-color-bg-warm: #132E52; --scs-color-surface: #173660; --scs-color-surface-raised: #1E4478; --scs-color-gold: #FF6B1A; --scs-color-gold-bright: #FF9057; --scs-color-gold-deep: #C14A0C; --scs-color-gold-soft: rgba(255,107,26,0.7); --scs-color-gold-hairline: rgba(255,107,26,0.3); --scs-color-gold-glow: rgba(255,144,87,0.35); --scs-color-text: #E6EDF9; --scs-color-text-muted: #9BAEC9; --scs-color-text-dim: #5C6E85; --scs-font-sans: "Barlow", "Inter", sans-serif; --scs-font-display: "Orbitron", "Barlow", sans-serif; --scs-font-serif: "Barlow", sans-serif; --scs-radius-sm: 4px; --scs-radius-md: 6px; --scs-radius-lg: 10px; --scs-header-bg: rgba(5,14,30,0.92); --scs-header-bg-scrolled: rgba(5,14,30,0.99); --scs-body-font-size: 15.5px; --scs-line-height: 1.58; --scs-display-letter: 0.1em; --scs-nav-letter: 0.18em; --scs-border-width: 2px; } [data-theme="space-nasa"] .scs-button { background:#FF6B1A; color:#FFF; border:0; text-transform:uppercase; font-weight:800; letter-spacing:0.18em; } /* ---- 22) Retro 70s — warm brown + peach, Righteous ---- */ [data-theme="retro-70s"] { --scs-color-bg: #3D2712; --scs-color-bg-deep: #2A1908; --scs-color-bg-warm: #52361C; --scs-color-surface: #5F3F23; --scs-color-surface-raised: #76502D; --scs-color-gold: #F4A261; --scs-color-gold-bright: #FAC48F; --scs-color-gold-deep: #C47839; --scs-color-gold-soft: rgba(244,162,97,0.7); --scs-color-gold-hairline: rgba(244,162,97,0.3); --scs-color-gold-glow: rgba(250,196,143,0.3); --scs-color-text: #FFF5E0; --scs-color-text-muted: #D4B294; --scs-color-text-dim: #8E7355; --scs-font-sans: "Righteous", "Inter", sans-serif; --scs-font-display: "Righteous", sans-serif; --scs-font-serif: "Righteous", sans-serif; --scs-radius-sm: 10px; --scs-radius-md: 20px; --scs-radius-lg: 32px; --scs-header-bg: rgba(42,25,8,0.9); --scs-header-bg-scrolled: rgba(42,25,8,0.98); --scs-body-font-size: 16.5px; --scs-line-height: 1.6; --scs-display-letter: 0.04em; --scs-nav-letter: 0.1em; --scs-border-width: 1px; } [data-theme="retro-70s"] .scs-button { background:#F4A261; color:#3D2712; border:0; border-radius:999px; text-transform:uppercase; font-weight:700; } /* ---- 23) Mercury Chrome — reflective metallic silver, Bebas Neue ---- */ [data-theme="mercury"] { --scs-color-bg: #141A22; --scs-color-bg-deep: #080B10; --scs-color-bg-warm: #1E2631; --scs-color-surface: #232C38; --scs-color-surface-raised: #2D3745; --scs-color-gold: #CCD7E4; --scs-color-gold-bright: #FFFFFF; --scs-color-gold-deep: #8995A4; --scs-color-gold-soft: rgba(204,215,228,0.7); --scs-color-gold-hairline: rgba(204,215,228,0.3); --scs-color-gold-glow: rgba(255,255,255,0.3); --scs-color-text: #F0F4F8; --scs-color-text-muted: #8A97A6; --scs-color-text-dim: #4F5A66; --scs-font-sans: "Bebas Neue", "Inter", sans-serif; --scs-font-display: "Bebas Neue", sans-serif; --scs-font-serif: "Bebas Neue", sans-serif; --scs-radius-sm: 0; --scs-radius-md: 2px; --scs-radius-lg: 4px; --scs-header-bg: rgba(8,11,16,0.92); --scs-header-bg-scrolled: rgba(8,11,16,0.99); --scs-body-font-size: 15px; --scs-line-height: 1.55; --scs-display-letter: 0.22em; --scs-nav-letter: 0.28em; --scs-border-width: 1px; } [data-theme="mercury"] .scs-button { background:linear-gradient(180deg,#FFFFFF,#CCD7E4 60%,#8995A4); color:#141A22; border:0; text-transform:uppercase; font-weight:400; letter-spacing:0.26em; } /* ---- 24) Chalkboard — dark green board + chalk yellow, Special Elite ---- */ [data-theme="chalkboard"] { --scs-color-bg: #1E2D23; --scs-color-bg-deep: #121A15; --scs-color-bg-warm: #2B4034; --scs-color-surface: #324A3B; --scs-color-surface-raised: #3E5949; --scs-color-gold: #FFE14D; --scs-color-gold-bright: #FFF387; --scs-color-gold-deep: #C2A927; --scs-color-gold-soft: rgba(255,225,77,0.7); --scs-color-gold-hairline: rgba(255,225,77,0.3); --scs-color-gold-glow: rgba(255,243,135,0.3); --scs-color-text: #F3F1D8; --scs-color-text-muted: #B8B799; --scs-color-text-dim: #767659; --scs-font-sans: "Special Elite", "Courier New", monospace; --scs-font-display: "Special Elite", monospace; --scs-font-serif: "Special Elite", monospace; --scs-radius-sm: 4px; --scs-radius-md: 8px; --scs-radius-lg: 12px; --scs-header-bg: rgba(18,26,21,0.9); --scs-header-bg-scrolled: rgba(18,26,21,0.99); --scs-body-font-size: 16.5px; --scs-line-height: 1.65; --scs-display-letter: 0.04em; --scs-nav-letter: 0.08em; --scs-border-width: 1px; } [data-theme="chalkboard"] .scs-button { background:transparent; color:#FFE14D; border:2px dashed #FFE14D; font-family:"Special Elite",monospace; } /* ---- 25) Aurora — deep night + mint/cyan/purple gradients, Outfit ---- */ [data-theme="aurora"] { --scs-color-bg: #081826; --scs-color-bg-deep: #030A12; --scs-color-bg-warm: #0F2638; --scs-color-surface: #122F45; --scs-color-surface-raised: #183B57; --scs-color-gold: #5EEAD4; --scs-color-gold-bright: #A7F3E5; --scs-color-gold-deep: #1F9781; --scs-color-gold-soft: rgba(94,234,212,0.65); --scs-color-gold-hairline: rgba(167,139,250,0.3); --scs-color-gold-glow: rgba(167,243,229,0.3); --scs-color-text: #E0FAF3; --scs-color-text-muted: #94BBB4; --scs-color-text-dim: #587872; --scs-font-sans: "Outfit", "Inter", sans-serif; --scs-font-display: "Outfit", sans-serif; --scs-font-serif: "Outfit", sans-serif; --scs-radius-sm: 14px; --scs-radius-md: 20px; --scs-radius-lg: 28px; --scs-header-bg: rgba(3,10,18,0.9); --scs-header-bg-scrolled: rgba(3,10,18,0.98); --scs-body-font-size: 16px; --scs-line-height: 1.62; --scs-display-letter: 0.03em; --scs-nav-letter: 0.1em; --scs-border-width: 1px; } [data-theme="aurora"] .scs-button { background:linear-gradient(135deg,#5EEAD4,#A78BFA,#EC4899); color:#081826; border:0; border-radius:999px; font-weight:700; } /* ---- 26) Dusty Attic — light sepia beige, Merriweather italic ---- */ [data-theme="dusty-attic"] { --scs-color-bg: #E8DCC4; --scs-color-bg-deep: #D4C4A3; --scs-color-bg-warm: #F2E7D0; --scs-color-surface: #F8EFDA; --scs-color-surface-raised: #FDF7E4; --scs-color-gold: #8C6B3D; --scs-color-gold-bright: #A88857; --scs-color-gold-deep: #5A4325; --scs-color-gold-soft: rgba(140,107,61,0.6); --scs-color-gold-hairline: rgba(140,107,61,0.3); --scs-color-gold-glow: rgba(168,136,87,0.2); --scs-color-text: #3E2E1A; --scs-color-text-muted: #705A3F; --scs-color-text-dim: #9A8969; --scs-font-sans: "Merriweather", Georgia, serif; --scs-font-display: "Merriweather", Georgia, serif; --scs-font-serif: "Merriweather", Georgia, serif; --scs-radius-sm: 2px; --scs-radius-md: 3px; --scs-radius-lg: 5px; --scs-header-bg: rgba(232,220,196,0.94); --scs-header-bg-scrolled: rgba(212,196,163,0.99); --scs-body-font-size: 17px; --scs-line-height: 1.74; --scs-display-letter: 0.02em; --scs-nav-letter: 0.06em; --scs-border-width: 1px; } [data-theme="dusty-attic"] .scs-hero__title, [data-theme="dusty-attic"] .scs-section-head__title { font-style:italic !important; } [data-theme="dusty-attic"] .scs-button { background:#8C6B3D; color:#F8EFDA; border:0; font-style:italic; } /* ============================================================ Universal light-theme accessibility fixes — headers / menubar / dropdowns for the new light palettes (coliseum, pitch-white, mono-press, bauhaus, sakura, dusty-attic). ============================================================ */ [data-theme="coliseum"] .scs-site-header__menubar, [data-theme="pitch-white"] .scs-site-header__menubar, [data-theme="mono-press"] .scs-site-header__menubar, [data-theme="bauhaus"] .scs-site-header__menubar, [data-theme="sakura"] .scs-site-header__menubar, [data-theme="dusty-attic"] .scs-site-header__menubar { background-color: transparent; } [data-theme="coliseum"] .scs-theme-switcher__menu, [data-theme="pitch-white"] .scs-theme-switcher__menu, [data-theme="mono-press"] .scs-theme-switcher__menu, [data-theme="bauhaus"] .scs-theme-switcher__menu, [data-theme="sakura"] .scs-theme-switcher__menu, [data-theme="dusty-attic"] .scs-theme-switcher__menu { background-color: rgba(255,255,255,0.98); color: #111; } [data-theme="coliseum"] .scs-theme-switcher__option, [data-theme="pitch-white"] .scs-theme-switcher__option, [data-theme="mono-press"] .scs-theme-switcher__option, [data-theme="bauhaus"] .scs-theme-switcher__option, [data-theme="sakura"] .scs-theme-switcher__option, [data-theme="dusty-attic"] .scs-theme-switcher__option { color: #111; }