/** * ============================================================================= * SYBILLAE THEME SYSTEM * ============================================================================= * * Three visual modes: Twilight (night), Digital (brutalist), Day (grand central). * Each theme overrides the CSS custom properties defined in brand.css. * * Theme is applied via data-theme attribute on : * — default (dark, gold, serif) * — light, black, monospace, square * — teal, gold, classical serif * * ============================================================================= */ /* ============================================================================= THEME TRANSITION Smooth color/font transition when switching themes. ============================================================================= */ html[data-theme-transitioning], html[data-theme-transitioning] *, html[data-theme-transitioning] *::before, html[data-theme-transitioning] *::after { transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, fill 0.5s ease, stroke 0.5s ease !important; } /* ============================================================================= TWILIGHT (Night Mode) — The Default Deep void + gold accents + Cormorant Garamond. Values match :root in brand.css. This block exists for explicit targeting. ============================================================================= */ [data-theme="twilight"] { color-scheme: dark; } /* ============================================================================= DIGITAL (Brutalist / Coffee Shop Mode) Warm off-white + black accents + Michroma + Space Mono. Square buttons, no glow, no gradients, extreme whitespace. ============================================================================= */ [data-theme="digital"] { color-scheme: light; /* ---- FOUNDATION ---- */ --color-deep-void: #F5F5F0; --color-midnight: #FFFFFF; --color-indigo-night: #EBEBEB; --color-twilight: #E0E0DA; /* ---- ACCENT (ink black replaces gold) ---- */ --color-sol-warm: #333330; --color-sol-gold: #1A1A1A; --color-sol-amber: #1A1A1A; /* ---- SECONDARY ---- */ --color-cusp-coral: #8A6E6E; --color-cusp-rose: #8A6E6E; --color-aurora-violet: #6B6B80; /* ---- NEUTRALS ---- */ --color-star-silver: #555550; --color-text-primary: #1A1A1A; --color-text-secondary: #555550; --color-text-dim: #A09E96; /* ---- FUNCTIONAL ---- */ --color-error: #C44D3F; /* ---- RGB TRIPLETS (for rgba() usage) ---- */ --accent-rgb: 26, 26, 26; --accent-light-rgb: 51, 51, 48; --secondary-rgb: 138, 110, 110; --glass-rgb: 0, 0, 0; --glow-rgb: 26, 26, 26; /* ---- BORDERS ---- */ --border-subtle: 1px solid rgba(26, 26, 26, 0.04); --border-light: 1px solid rgba(26, 26, 26, 0.06); --border-medium: 1px solid rgba(26, 26, 26, 0.10); --border-accent-gold: 1px solid rgba(26, 26, 26, 0.15); --border-accent-rose: 1px solid rgba(138, 110, 110, 0.20); /* ---- GRADIENTS ---- */ --gradient-horizon: linear-gradient(135deg, #1A1A1A 0%, #555550 50%, #1A1A1A 100%); --gradient-dawn: linear-gradient(135deg, #F5F5F0 0%, #E0E0DA 50%, #1A1A1A 100%); --gradient-eclipse: none; --gradient-sol-text: linear-gradient(135deg, #1A1A1A, #333330, #1A1A1A); --gradient-cusp-text: linear-gradient(135deg, #8A6E6E, #6B6B80); --gradient-button: #1A1A1A; --gradient-button-hover: #333330; --gradient-card-featured: rgba(26, 26, 26, 0.03); --gradient-divider: linear-gradient(to right, rgba(26, 26, 26, 0.4) 0%, rgba(26, 26, 26, 0.1) 50%, rgba(26, 26, 26, 0.4) 100%); /* ---- SHADOWS ---- */ --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.10); --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-glow-gold: none; --shadow-glow-rose: none; --shadow-glow-intense: none; /* ---- TYPOGRAPHY ---- */ --font-display: 'Michroma', -apple-system, sans-serif; --font-body: 'Space Mono', 'Courier New', monospace; /* ---- SURFACE ---- */ --nav-bg: rgba(245, 245, 240, 0.92); /* ---- BUTTON SHAPE ---- */ --radius-cta: 0px; /* ---- SELECTION ---- */ --selection-bg: rgba(26, 26, 26, 0.12); /* ---- SCROLLBAR ---- */ --scrollbar-track: #F5F5F0; --scrollbar-thumb: #E0E0DA; --scrollbar-thumb-hover: #A09E96; } /* ============================================================================= DAY (Grand Central / Celestial Cartography Mode) Deep teal + bright gold + Playfair Display + Libre Baskerville. Painterly, illustrative, gold-outlined buttons. ============================================================================= */ [data-theme="day"] { color-scheme: dark; /* ---- FOUNDATION ---- */ --color-deep-void: #1C5D5D; --color-midnight: #164B4B; --color-indigo-night: #22706E; --color-twilight: #2A8280; /* ---- ACCENT (bright warm gold) ---- */ --color-sol-warm: #F0D070; --color-sol-gold: #E2B84B; --color-sol-amber: #D4A030; /* ---- SECONDARY ---- */ --color-cusp-coral: #D4917E; --color-cusp-rose: #D4917E; --color-aurora-violet: #8A7EB5; /* ---- NEUTRALS ---- */ --color-star-silver: rgba(248, 244, 234, 0.60); --color-text-primary: #F8F4EA; --color-text-secondary: rgba(248, 244, 234, 0.70); --color-text-dim: rgba(248, 244, 234, 0.45); /* ---- RGB TRIPLETS ---- */ --accent-rgb: 226, 184, 75; --accent-light-rgb: 240, 208, 112; --secondary-rgb: 212, 145, 126; --glass-rgb: 255, 255, 255; --glow-rgb: 226, 184, 75; /* ---- BORDERS ---- */ --border-subtle: 1px solid rgba(226, 184, 75, 0.06); --border-light: 1px solid rgba(226, 184, 75, 0.10); --border-medium: 1px solid rgba(226, 184, 75, 0.18); --border-accent-gold: 1px solid rgba(226, 184, 75, 0.25); --border-accent-rose: 1px solid rgba(212, 145, 126, 0.20); /* ---- GRADIENTS ---- */ --gradient-horizon: linear-gradient(135deg, #E2B84B 0%, #D4917E 30%, #8A7EB5 60%, #1C5D5D 100%); --gradient-dawn: linear-gradient(135deg, #1C5D5D 0%, #22706E 30%, #D4917E 65%, #E2B84B 100%); --gradient-eclipse: radial-gradient(circle at 40% 50%, #E2B84B 0%, #D4917E 25%, #22706E 50%, #1C5D5D 80%); --gradient-sol-text: linear-gradient(135deg, #F0D070, #E2B84B, #D4A030); --gradient-cusp-text: linear-gradient(135deg, #D4917E, #8A7EB5); --gradient-button: transparent; --gradient-button-hover: rgba(226, 184, 75, 0.08); --gradient-card-featured: linear-gradient(135deg, rgba(226, 184, 75, 0.08), rgba(212, 145, 126, 0.06)); --gradient-divider: linear-gradient(to right, rgba(226, 184, 75, 0.1) 0%, rgba(226, 184, 75, 0.5) 50%, rgba(226, 184, 75, 0.1) 100%); /* ---- SHADOWS ---- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.18); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.20); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.22); --shadow-glow-gold: 0 0 20px rgba(226, 184, 75, 0.15); --shadow-glow-rose: 0 0 20px rgba(212, 145, 126, 0.15); --shadow-glow-intense: 0 0 40px rgba(226, 184, 75, 0.25); /* ---- TYPOGRAPHY ---- */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Libre Baskerville', Georgia, serif; --font-label: 'Raleway', -apple-system, sans-serif; /* ---- SURFACE ---- */ --nav-bg: rgba(28, 93, 93, 0.92); /* ---- BUTTON SHAPE ---- */ --radius-cta: 9999px; /* ---- SELECTION ---- */ --selection-bg: rgba(226, 184, 75, 0.20); /* ---- SCROLLBAR ---- */ --scrollbar-track: #1C5D5D; --scrollbar-thumb: #22706E; --scrollbar-thumb-hover: rgba(226, 184, 75, 0.4); } /* ============================================================================= BUTTON OVERRIDES PER THEME ============================================================================= */ /* Digital: solid black, square, no glow */ [data-theme="digital"] .waitlist-cta-button, [data-theme="digital"] .submit-button, [data-theme="digital"] .sticky-nav-cta { background: #1A1A1A !important; color: #F5F5F0 !important; border-color: transparent !important; box-shadow: none !important; border-radius: 0 !important; } [data-theme="digital"] .waitlist-cta-button:hover, [data-theme="digital"] .submit-button:hover:not(:disabled), [data-theme="digital"] .sticky-nav-cta:hover { background: #333330 !important; box-shadow: none !important; } /* Day: transparent fill, gold outline, pill shape */ [data-theme="day"] .waitlist-cta-button, [data-theme="day"] .submit-button, [data-theme="day"] .sticky-nav-cta { background: transparent !important; color: #E2B84B !important; border: 1px solid rgba(226, 184, 75, 0.30) !important; box-shadow: none !important; border-radius: 9999px !important; } [data-theme="day"] .waitlist-cta-button:hover, [data-theme="day"] .submit-button:hover:not(:disabled), [data-theme="day"] .sticky-nav-cta:hover { background: rgba(226, 184, 75, 0.08) !important; border-color: #E2B84B !important; box-shadow: none !important; } /* ============================================================================= DIGITAL MODE — Additional Overrides These handle specific component patterns that need light-mode treatment. ============================================================================= */ /* Scrollbar for digital */ [data-theme="digital"] ::-webkit-scrollbar-track { background: var(--scrollbar-track, #F5F5F0); } [data-theme="digital"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb, #E0E0DA); } [data-theme="digital"] ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover, #A09E96); } [data-theme="digital"] * { scrollbar-color: #E0E0DA #F5F5F0; } /* Selection */ [data-theme="digital"] ::selection { background: rgba(26, 26, 26, 0.12); color: #1A1A1A; } /* Focus ring */ [data-theme="digital"] :focus-visible { outline-color: #1A1A1A; } /* Typography weight adjustments for Digital */ [data-theme="digital"] h1, [data-theme="digital"] h2, [data-theme="digital"] h3, [data-theme="digital"] h4, [data-theme="digital"] .h1, [data-theme="digital"] .h2, [data-theme="digital"] .h3 { font-weight: 400; letter-spacing: 0.15em; } /* Digital gradient text should just be solid color */ [data-theme="digital"] .text-gradient-sol, [data-theme="digital"] .text-gradient-cusp, [data-theme="digital"] .text-gradient-horizon { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: #1A1A1A !important; background-clip: unset !important; } /* Typography for Day mode */ [data-theme="day"] .text-section-label, [data-theme="day"] .text-ui-label { font-family: 'Raleway', -apple-system, sans-serif; } /* ============================================================================= DAY MODE — Additional Overrides ============================================================================= */ [data-theme="day"] ::-webkit-scrollbar-track { background: #1C5D5D; } [data-theme="day"] ::-webkit-scrollbar-thumb { background: #22706E; } [data-theme="day"] ::-webkit-scrollbar-thumb:hover { background: rgba(226, 184, 75, 0.4); } [data-theme="day"] * { scrollbar-color: #22706E #1C5D5D; } [data-theme="day"] ::selection { background: rgba(226, 184, 75, 0.20); color: #F8F4EA; } [data-theme="day"] :focus-visible { outline-color: #E2B84B; }