/* ============================================= THEMES ------------------------------------------------- Each palette is a self-contained block selected by [data-theme="…"] on the element. All colour tokens live here so that styles.css can focus purely on layout, typography & components. ------------------------------------------------- Token contract every theme MUST provide: --navy / --navy-dark / --navy-mid / --navy-rgb — primary "deep" surface / text accent --gold / --gold-light / --gold-pale / --gold-rgb — primary "warm" accent --ivory / --cream / --off-white — soft background tones --border-gold / --border-light --shadow-sm / --shadow-md / --shadow-lg ============================================= */ /* ── 01 · Classic — Deep Navy & Warm Gold (default) ── */ :root, [data-theme="classic"] { --navy: #1C2951; --navy-dark: #111B35; --navy-mid: #243460; --navy-rgb: 28, 41, 81; --gold: #C9A84C; --gold-light: #E8D5A3; --gold-pale: #F7EDD8; --gold-rgb: 201, 168, 76; --ivory: #F5E6C8; --cream: #FAFAF5; --off-white: #F4F2EE; --border-gold: rgba(201, 168, 76, 0.25); --border-light: rgba(28, 41, 81, 0.08); --shadow-sm: 0 2px 12px rgba(28, 41, 81, 0.07); --shadow-md: 0 8px 32px rgba(28, 41, 81, 0.11); --shadow-lg: 0 20px 60px rgba(28, 41, 81, 0.16); } /* ── 02 · Noir — Obsidian & Champagne ── */ [data-theme="noir"] { --navy: #0F0F0F; --navy-dark: #060606; --navy-mid: #1C1C1C; --navy-rgb: 15, 15, 15; --gold: #D4AF5E; --gold-light: #E8CFA0; --gold-pale: #F0E4CC; --gold-rgb: 212, 175, 94; --ivory: #EDE0C8; --cream: #F6F3EC; --off-white: #EEE9E0; --border-gold: rgba(212, 175, 94, 0.28); --border-light: rgba(15, 15, 15, 0.09); --shadow-sm: 0 2px 12px rgba(15, 15, 15, 0.10); --shadow-md: 0 8px 32px rgba(15, 15, 15, 0.14); --shadow-lg: 0 20px 60px rgba(15, 15, 15, 0.22); } /* ── 03 · Sage — Deep Forest & Antique Gold ── */ [data-theme="sage"] { --navy: #1A3322; --navy-dark: #0F2018; --navy-mid: #254838; --navy-rgb: 26, 51, 34; --gold: #B8963C; --gold-light: #D4B870; --gold-pale: #ECD8A8; --gold-rgb: 184, 150, 60; --ivory: #E8D8B0; --cream: #F7F5EE; --off-white: #F0EDE4; --border-gold: rgba(184, 150, 60, 0.28); --border-light: rgba(26, 51, 34, 0.09); --shadow-sm: 0 2px 12px rgba(26, 51, 34, 0.08); --shadow-md: 0 8px 32px rgba(26, 51, 34, 0.12); --shadow-lg: 0 20px 60px rgba(26, 51, 34, 0.18); } /* ── 04 · Rose — Mauve & Rose Gold ── */ [data-theme="rose"] { --navy: #2C1A2E; --navy-dark: #1A0F1C; --navy-mid: #3E2842; --navy-rgb: 44, 26, 46; --gold: #C49096; --gold-light: #D8ADB2; --gold-pale: #EDD0D4; --gold-rgb: 196, 144, 150; --ivory: #E8CDD0; --cream: #FAF7F8; --off-white: #F3EEF0; --border-gold: rgba(196, 144, 150, 0.30); --border-light: rgba(44, 26, 46, 0.08); --shadow-sm: 0 2px 12px rgba(44, 26, 46, 0.07); --shadow-md: 0 8px 32px rgba(44, 26, 46, 0.11); --shadow-lg: 0 20px 60px rgba(44, 26, 46, 0.17); } /* ── 05 · Azure — Royal Indigo & Platinum ── */ [data-theme="azure"] { --navy: #14306B; --navy-dark: #0A1E48; --navy-mid: #1E3F86; --navy-rgb: 20, 48, 107; --gold: #B8C6D9; --gold-light: #D7DFEA; --gold-pale: #ECEFF5; --gold-rgb: 184, 198, 217; --ivory: #DCE3EE; --cream: #F7F9FC; --off-white: #EFF2F7; --border-gold: rgba(184, 198, 217, 0.40); --border-light: rgba(20, 48, 107, 0.09); --shadow-sm: 0 2px 12px rgba(20, 48, 107, 0.08); --shadow-md: 0 8px 32px rgba(20, 48, 107, 0.12); --shadow-lg: 0 20px 60px rgba(20, 48, 107, 0.18); } /* ── 06 · Bordeaux — Wine & Antique Gold ── */ [data-theme="bordeaux"] { --navy: #4A0E1F; --navy-dark: #2E0613; --navy-mid: #621A2C; --navy-rgb: 74, 14, 31; --gold: #CBA257; --gold-light: #E2C189; --gold-pale: #F1DEB7; --gold-rgb: 203, 162, 87; --ivory: #ECD9B0; --cream: #FAF6F1; --off-white: #F2ECE3; --border-gold: rgba(203, 162, 87, 0.28); --border-light: rgba(74, 14, 31, 0.09); --shadow-sm: 0 2px 12px rgba(74, 14, 31, 0.08); --shadow-md: 0 8px 32px rgba(74, 14, 31, 0.13); --shadow-lg: 0 20px 60px rgba(74, 14, 31, 0.20); } /* ── 07 · Midnight — Aubergine & Platinum Gold ── */ [data-theme="midnight"] { --navy: #1A1740; --navy-dark: #0E0C2A; --navy-mid: #2A2658; --navy-rgb: 26, 23, 64; --gold: #C7B98A; --gold-light: #DCD0AC; --gold-pale: #EDE5C8; --gold-rgb: 199, 185, 138; --ivory: #E1D6B0; --cream: #F7F5F0; --off-white: #EFEBE2; --border-gold: rgba(199, 185, 138, 0.30); --border-light: rgba(26, 23, 64, 0.09); --shadow-sm: 0 2px 12px rgba(26, 23, 64, 0.09); --shadow-md: 0 8px 32px rgba(26, 23, 64, 0.14); --shadow-lg: 0 20px 60px rgba(26, 23, 64, 0.22); } /* ── 08 · Terracotta — Sienna & Warm Sand ── */ [data-theme="terracotta"] { --navy: #5C2A1E; --navy-dark: #3D1A12; --navy-mid: #7A3A2A; --navy-rgb: 92, 42, 30; --gold: #C98D5E; --gold-light: #E0B188; --gold-pale: #F1D5B8; --gold-rgb: 201, 141, 94; --ivory: #EBC9A6; --cream: #FAF4ED; --off-white: #F2E9DE; --border-gold: rgba(201, 141, 94, 0.28); --border-light: rgba(92, 42, 30, 0.09); --shadow-sm: 0 2px 12px rgba(92, 42, 30, 0.08); --shadow-md: 0 8px 32px rgba(92, 42, 30, 0.13); --shadow-lg: 0 20px 60px rgba(92, 42, 30, 0.19); } /* ============================================= THEME TRANSITION Applied briefly when switching palettes so the change feels intentional rather than jarring. ============================================= */ .theme-transitioning, .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, fill 0.4s ease, stroke 0.4s ease !important; } /* ============================================= THEME PICKER COMPONENT Fixed bottom-right palette button that reveals a card with an elegant 2-column grid of swatches. ============================================= */ .theme-toggle { position: fixed; bottom: 2rem; right: 2rem; z-index: 2000; } .theme-toggle-btn { width: 52px; height: 52px; border-radius: 50%; background: var(--navy); border: 1.5px solid var(--border-gold); color: var(--gold); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(var(--gold-rgb), 0.10); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, background-color 0.35s ease, color 0.35s ease; position: relative; z-index: 1; } .theme-toggle-btn::after { /* subtle pulsing halo so visitors notice it */ content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(var(--gold-rgb), 0.35); opacity: 0; animation: themePulse 2.8s ease-in-out infinite; pointer-events: none; } @keyframes themePulse { 0%, 100% { opacity: 0; transform: scale(0.95); } 50% { opacity: 0.5; transform: scale(1.08); } } .theme-toggle-btn:hover { transform: scale(1.08) rotate(18deg); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.38); } .theme-toggle-btn[aria-expanded="true"] { transform: rotate(180deg); } .theme-toggle-btn[aria-expanded="true"]::after { animation: none; opacity: 0; } /* ── Picker panel ── */ .theme-panel { position: absolute; bottom: calc(100% + 0.9rem); right: 0; background: var(--navy-dark); border: 1px solid var(--border-gold); border-radius: 16px; padding: 1.25rem 1.15rem 1.1rem; width: 320px; opacity: 0; transform: translateY(10px) scale(0.96); transform-origin: bottom right; pointer-events: none; transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--gold-rgb), 0.08); } .theme-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; } .theme-panel-header { margin-bottom: 0.9rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .theme-panel-eyebrow { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 0.3rem; } .theme-panel-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: rgba(255, 255, 255, 0.92); margin: 0 0 0.15rem; line-height: 1.2; } .theme-panel-sub { font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); margin: 0; line-height: 1.45; } /* ── Swatch grid ── */ .theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem; } .theme-swatch { position: relative; display: flex; flex-direction: column; gap: 0.55rem; background: rgba(255, 255, 255, 0.025); border: 1.5px solid rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 0.6rem 0.65rem 0.65rem; cursor: pointer; text-align: left; font-family: var(--font-body); transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .theme-swatch:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); transform: translateY(-1px); } .theme-swatch:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.35); } .theme-swatch.active { border-color: rgba(var(--gold-rgb), 0.65); background: rgba(var(--gold-rgb), 0.10); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.15); } /* Preview band — a slim gradient of the theme's primary deep colour and warm accent. */ .swatch-preview { display: block; width: 100%; height: 32px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.10); background: linear-gradient( 135deg, var(--sw-deep) 0%, var(--sw-deep) 55%, var(--sw-warm) 55%, var(--sw-warm) 100% ); position: relative; overflow: hidden; } .swatch-preview::after { /* soft sheen for a luxe feel */ content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55% ); pointer-events: none; } .swatch-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; } .swatch-name { font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.88); letter-spacing: 0.2px; line-height: 1.15; } .swatch-desc { display: block; font-size: 0.62rem; color: rgba(255, 255, 255, 0.42); font-weight: 400; margin-top: 2px; letter-spacing: 0.3px; } .swatch-check { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); color: var(--navy-dark); font-size: 0.55rem; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.6); transition: opacity 0.2s ease, transform 0.2s ease; flex-shrink: 0; } .theme-swatch.active .swatch-check { opacity: 1; transform: scale(1); } /* ── Responsive picker ── */ @media (max-width: 575.98px) { .theme-toggle { bottom: 1.25rem; right: 1.25rem; } .theme-panel { width: min(320px, calc(100vw - 2rem)); } } @media (prefers-reduced-motion: reduce) { .theme-toggle-btn::after { animation: none; } .theme-transitioning, .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after { transition: none !important; } }