/* * Theme system — Denver Zen Den * * The site's default visual register is dark (cosmic). When the user toggles * to light mode, a [data-theme="light"] attribute is set on , and the * rules below override the dark theme via cascade specificity. * * Edit this one file to change every page in the preview site. */ /* ============================================================ LIGHT MODE OVERRIDES (scoped to [data-theme="light"]) ============================================================ */ [data-theme="light"] { --void: #FAF8F4; --deep-space: #FFFFFF; --nebula-dark: #F2EFE9; --nebula-mid: #ECE8DF; --star-white: #1A1A2E; --gold: #B89548; --gold-light: #D4B86A; --light-text-strong: #1A1A2E; --light-text: rgba(26, 26, 46, 0.80); --light-text-muted: rgba(26, 26, 46, 0.62); --light-border: rgba(0, 0, 0, 0.08); --light-border-strong: rgba(0, 0, 0, 0.14); } /* ===== BASE — DAWN SKY ===== */ [data-theme="light"] body { /* Sunrise gradient — top sky blue down to warm horizon */ background: radial-gradient(ellipse 700px 220px at 50% 78%, rgba(255, 215, 140, 0.55) 0%, rgba(255, 200, 140, 0.0) 65%), linear-gradient(180deg, #D8E7F2 0%, /* pale sky blue */ #EAEAF1 22%, #FBE8D1 55%, /* warm gold */ #FCD3B6 80%, /* peach */ #F8C29B 100%) !important; background-attachment: fixed !important; color: var(--light-text) !important; } /* Sun-glow that floats just above the horizon */ [data-theme="light"] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle 90px at 50% 75%, rgba(255, 230, 170, 0.85) 0%, rgba(255, 220, 150, 0.50) 30%, rgba(255, 220, 150, 0.0) 70%); mix-blend-mode: screen; } /* Hide cosmic-only dark-mode ornaments */ [data-theme="light"] body::after { display: none !important; } /* film grain */ [data-theme="light"] #starfield { display: none !important; } [data-theme="light"] #cosmosBar, [data-theme="light"] .cosmos-bar, [data-theme="light"] .event-horizon, [data-theme="light"] .aurora-layer, [data-theme="light"] .green-horizon { display: none !important; } [data-theme="light"] .hero-particles { display: none !important; } /* ===== DRIFTING CLOUDS (replaces shooting-stars in light mode) ===== */ /* Pure soft cloud silhouettes — no text — drifting slowly across the dawn sky. * Reuses the existing dark-mode shooting-star elements; we hide their text * labels and render an SVG cloud shape via background-image. */ @keyframes cloudDrift { 0% { transform: translateX(-25vw); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(125vw); opacity: 0; } } [data-theme="light"] .shooting-star { display: block !important; position: fixed; left: 0; width: 220px; height: 90px; background: url("data:image/svg+xml;utf8,") no-repeat center/contain !important; filter: none !important; box-shadow: none !important; border: none !important; transform-origin: center; animation: cloudDrift 110s linear infinite !important; opacity: 0.92; z-index: 1; pointer-events: none; overflow: visible; } [data-theme="light"] .star-label { display: none !important; } /* Vary heights via the homepage's inline top:% styles; varied speeds for depth */ [data-theme="light"] .shooting-star[style*="top:10%"] { top: 11% !important; width: 240px; height: 100px; animation-duration: 130s !important; } [data-theme="light"] .shooting-star[style*="top:14%"] { top: 8% !important; width: 180px; height: 75px; animation-duration: 95s !important; opacity: 0.78; } [data-theme="light"] .shooting-star[style*="top:32%"] { top: 22% !important; width: 200px; height: 82px; animation-duration: 120s !important; } [data-theme="light"] .shooting-star[style*="top:50%"] { top: 32% !important; width: 260px; height: 108px; animation-duration: 140s !important; opacity: 0.85; } [data-theme="light"] .shooting-star[style*="top:55%"] { top: 28% !important; width: 160px; height: 68px; animation-duration: 100s !important; opacity: 0.75; } [data-theme="light"] .shooting-star[style*="top:62%"] { top: 18% !important; width: 200px; height: 82px; animation-duration: 115s !important; } [data-theme="light"] .shooting-star[style*="top:72%"] { top: 38% !important; width: 220px; height: 92px; animation-duration: 125s !important; opacity: 0.82; } @media (prefers-reduced-motion: reduce) { [data-theme="light"] .shooting-star { animation: none !important; opacity: 0.7 !important; left: 30vw !important; } } @media (max-width: 600px) { [data-theme="light"] .shooting-star { width: 150px !important; height: 60px !important; animation-duration: 90s !important; } } /* ===== NAVIGATION ===== */ [data-theme="light"] nav { background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(20px) !important; border-bottom: 1px solid var(--light-border) !important; } [data-theme="light"] nav.scrolled { background: rgba(255, 255, 255, 0.97) !important; box-shadow: 0 1px 30px rgba(123, 94, 167, 0.06) !important; } [data-theme="light"] .nav-logo { color: var(--light-text-strong) !important; } [data-theme="light"] .nav-links a { color: rgba(26, 26, 46, 0.72) !important; } [data-theme="light"] .nav-links a:hover { color: var(--gold) !important; } [data-theme="light"] .nav-cta { color: var(--gold) !important; border-color: var(--gold) !important; } [data-theme="light"] .nav-cta:hover { background: var(--gold) !important; color: #FFFFFF !important; } [data-theme="light"] .nav-toggle span { background: var(--light-text-strong) !important; } @media (max-width: 768px) { [data-theme="light"] .nav-links { background: #FFFFFF !important; border-left: 1px solid var(--light-border) !important; } [data-theme="light"] .nav-links a { color: var(--light-text-strong) !important; } } /* ===== ANNOUNCEMENT BANNER ===== */ [data-theme="light"] .banner { background: linear-gradient(90deg, #B89548, #D4B86A) !important; } [data-theme="light"] .banner p { color: #FFFFFF !important; } [data-theme="light"] .banner a { color: #1A1A2E !important; } /* ===== HERO (transparent so the dawn sky shows through) ===== */ [data-theme="light"] .hero, [data-theme="light"] .hero-strip { background: transparent !important; } [data-theme="light"] .hero-content, [data-theme="light"] .hero-text { color: var(--light-text-strong) !important; } [data-theme="light"] .hero-text h1, [data-theme="light"] .hero h1 { color: var(--light-text-strong) !important; } [data-theme="light"] .hero-text .modality-label, [data-theme="light"] .hero-text .page-label, [data-theme="light"] .hero-text .offer-meta { color: rgba(26, 26, 46, 0.55) !important; } [data-theme="light"] .hero-text .offer-meta .dot { background: var(--gold) !important; } [data-theme="light"] .hero-badge { background: rgba(184, 149, 72, 0.10) !important; border: 1px solid rgba(184, 149, 72, 0.25) !important; color: #1A1A2E !important; } [data-theme="light"] .hero-photo { background: linear-gradient(135deg, #ECE8DF, #FFFFFF) !important; box-shadow: none !important; } [data-theme="light"] .hero-photo .placeholder-text { color: rgba(26, 26, 46, 0.45) !important; } /* Remove all text-shadows in light mode for a cleaner read */ [data-theme="light"] .photo-caption, [data-theme="light"] .hero-photo .photo-caption { text-shadow: none !important; } [data-theme="light"] * { text-shadow: none !important; } /* ===== SECTIONS (paper laid over sky) ===== */ [data-theme="light"] section, [data-theme="light"] section.content { background: transparent !important; } /* alt-bg becomes a translucent paper card so the sky still hints through */ [data-theme="light"] .alt-bg { background: rgba(255, 255, 255, 0.78) !important; backdrop-filter: blur(8px); } [data-theme="light"] .section-title { color: var(--light-text-strong) !important; } [data-theme="light"] .section-label { color: rgba(26, 26, 46, 0.55) !important; } [data-theme="light"] .section-subtitle { color: rgba(26, 26, 46, 0.65) !important; } [data-theme="light"] .lead { color: var(--light-text-strong) !important; } [data-theme="light"] p.body, [data-theme="light"] section p { color: var(--light-text) !important; } [data-theme="light"] .intro { background: rgba(255, 255, 255, 0.78) !important; backdrop-filter: blur(8px); } /* ===== OFFERING / SERVICE CARDS ===== */ [data-theme="light"] .offering-card, [data-theme="light"] .offering-card-body { background: #FFFFFF !important; } [data-theme="light"] .offering-card { box-shadow: none !important; border: 1px solid var(--light-border) !important; } [data-theme="light"] .offering-card:hover { box-shadow: none !important; border-color: var(--gold) !important; } [data-theme="light"] .offering-card-body p { color: var(--light-text) !important; } [data-theme="light"] .offering-card .offering-detail { color: rgba(26, 26, 46, 0.55) !important; border-color: var(--light-border) !important; } [data-theme="light"] .offering-card h3 { color: var(--light-text-strong) !important; } [data-theme="light"] .offering-card .tag { color: var(--gold) !important; } /* Audience / contact / pillar / deal / journey cards */ [data-theme="light"] .audience-card, [data-theme="light"] .contact-card, [data-theme="light"] .pillar-card, [data-theme="light"] .deal-card, [data-theme="light"] .journey-card { background: #FFFFFF !important; border: 1px solid var(--light-border) !important; box-shadow: none !important; } [data-theme="light"] .audience-card:hover, [data-theme="light"] .deal-card:hover { border-color: var(--gold) !important; } [data-theme="light"] .audience-card h3, [data-theme="light"] .contact-card .value, [data-theme="light"] .deal-card h3 { color: var(--light-text-strong) !important; } [data-theme="light"] .audience-card p, [data-theme="light"] .contact-card .note, [data-theme="light"] .pillar-card p, [data-theme="light"] .deal-card .blurb, [data-theme="light"] .deal-card .body, [data-theme="light"] .journey-card p { color: var(--light-text) !important; } [data-theme="light"] .deal-card .deal-meta { background: #FAF8F4 !important; } [data-theme="light"] .deal-card .deal-meta .pack { color: var(--light-text-strong) !important; } [data-theme="light"] .deal-card .deal-meta .price { color: var(--gold) !important; } /* ===== LISTS ===== */ [data-theme="light"] .included-list li, [data-theme="light"] .who-list li { color: var(--light-text-strong) !important; border-bottom-color: var(--light-border) !important; } [data-theme="light"] .included-list li::before, [data-theme="light"] .who-list li::before { color: var(--gold) !important; } /* ===== GATING ===== */ [data-theme="light"] .gating { background: rgba(123, 94, 167, 0.06) !important; border-left-color: rgba(123, 94, 167, 0.5) !important; color: var(--light-text) !important; } /* ===== PULL QUOTES ===== */ [data-theme="light"] .pull { border-top-color: var(--light-border-strong) !important; border-bottom-color: var(--light-border-strong) !important; } /* ===== SESSION GRID ===== */ [data-theme="light"] .session-grid { background: #FAF8F4 !important; border: 1px solid var(--light-border) !important; } [data-theme="light"] .session-grid dd { color: var(--light-text-strong) !important; } [data-theme="light"] .session-grid dt { color: rgba(26, 26, 46, 0.55) !important; } /* ===== FAQ ===== */ [data-theme="light"] .faq-item { border-bottom-color: var(--light-border) !important; } [data-theme="light"] .faq-a { color: var(--light-text) !important; } /* ===== RELATED CARDS ===== */ [data-theme="light"] .related-card { background: linear-gradient(160deg, rgba(123,94,167,0.04), rgba(74,111,165,0.03)) !important; border: 1px solid var(--light-border) !important; } [data-theme="light"] .related-card:hover { background: linear-gradient(160deg, rgba(184,149,72,0.06), rgba(123,94,167,0.04)) !important; border-color: var(--gold) !important; } [data-theme="light"] .related-card p { color: var(--light-text) !important; } /* ===== HOMEPAGE-SPECIFIC SECTIONS ===== */ [data-theme="light"] .benefits, [data-theme="light"] .wizard-section, [data-theme="light"] .field-notes, [data-theme="light"] .testimonials, [data-theme="light"] .about-strip { background: transparent !important; } [data-theme="light"] .benefits .section-title, [data-theme="light"] .wizard-section .section-title, [data-theme="light"] .testimonials .section-title, [data-theme="light"] .field-notes .section-title, [data-theme="light"] .about-strip .section-title { color: var(--light-text-strong) !important; } [data-theme="light"] .benefits .section-subtitle, [data-theme="light"] .wizard-section .section-subtitle, [data-theme="light"] .testimonials .section-subtitle, [data-theme="light"] .field-notes .section-subtitle { color: rgba(26,26,46,0.65) !important; } [data-theme="light"] .about-strip { background: rgba(255, 255, 255, 0.78) !important; backdrop-filter: blur(8px); } [data-theme="light"] .about-strip-content { color: var(--light-text) !important; } [data-theme="light"] .about-strip-content .section-label { color: var(--gold) !important; } [data-theme="light"] .about-strip-content .section-title { color: var(--light-text-strong) !important; } [data-theme="light"] .growth-bar { border-top-color: var(--light-border) !important; } [data-theme="light"] .growth-seg { background: rgba(26,26,46,0.08) !important; } [data-theme="light"] .growth-meta { color: rgba(26,26,46,0.55) !important; } [data-theme="light"] .growth-count, [data-theme="light"] .growth-stage { color: var(--gold) !important; } /* ===== BUTTONS ===== */ [data-theme="light"] .btn-ghost { color: var(--light-text-strong) !important; border-color: rgba(26, 26, 46, 0.25) !important; } [data-theme="light"] .btn-ghost:hover { border-color: var(--gold) !important; color: var(--gold) !important; } [data-theme="light"] .btn-text { color: rgba(26, 26, 46, 0.55) !important; } [data-theme="light"] .btn-text:hover { color: var(--gold) !important; } [data-theme="light"] .btn-primary { color: #FFFFFF !important; background: linear-gradient(135deg, #B89548, #D4B86A) !important; } [data-theme="light"] .btn-primary:hover { box-shadow: 0 8px 35px rgba(184, 149, 72, 0.35) !important; } /* ===== FINAL CTA ===== */ [data-theme="light"] .final-cta { background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F4 100%) !important; } [data-theme="light"] .final-cta h2 { color: var(--light-text-strong) !important; } [data-theme="light"] .final-cta p { color: var(--light-text) !important; } /* ===== FOOTER (keep dark for grounding) ===== */ [data-theme="light"] footer { background: #1A1A2E !important; border-top: 1px solid var(--light-border-strong) !important; } [data-theme="light"] .footer-brand .nav-logo { color: #FAF8F4 !important; } [data-theme="light"] .footer-brand p { color: rgba(232, 230, 240, 0.65) !important; } [data-theme="light"] .footer-col h5 { color: var(--gold-light) !important; } [data-theme="light"] .footer-col a { color: rgba(232, 230, 240, 0.65) !important; } [data-theme="light"] .footer-col a:hover { color: var(--gold-light) !important; } [data-theme="light"] .footer-bottom { border-top-color: rgba(255, 255, 255, 0.08) !important; } [data-theme="light"] .footer-bottom p { color: rgba(232, 230, 240, 0.4) !important; } [data-theme="light"] .footer-social a { color: rgba(232, 230, 240, 0.5) !important; } /* ===== INLINE LINKS ===== */ [data-theme="light"] .inline-link { color: var(--gold) !important; border-bottom-color: rgba(184,149,72,0.4) !important; } [data-theme="light"] .inline-link:hover { color: #1A1A2E !important; border-bottom-color: #1A1A2E !important; } /* ============================================================ THEME TOGGLE BUTTON (visible in BOTH modes) ============================================================ */ .theme-toggle { position: fixed; top: 6px; /* sits inside the 44px announcement bar */ right: 1rem; z-index: 10001; /* above .banner (1002) and nav (1000) */ width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.30); backdrop-filter: blur(8px); color: #FFFFFF; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; font-family: inherit; -webkit-tap-highlight-color: transparent; padding: 0; } .theme-toggle:hover { transform: translateY(0) scale(1.08); border-color: #FFFFFF; background: rgba(0, 0, 0, 0.45); } .theme-toggle:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } .theme-toggle svg { width: 16px; height: 16px; display: block; } /* When the announcement banner tucks away (scrolled past 250px), the toggle should still read well over the nav background. */ body.banner-hidden .theme-toggle { background: rgba(6, 6, 18, 0.65); border-color: rgba(212, 184, 106, 0.4); color: #D4B86A; } body.banner-hidden .theme-toggle:hover { background: rgba(6, 6, 18, 0.85); border-color: #D4B86A; } /* Light-mode states */ [data-theme="light"] .theme-toggle { /* While the announcement bar is visible the gradient is gold — keep the toggle dark for contrast. */ background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.55); color: #FFFFFF; } [data-theme="light"] body.banner-hidden .theme-toggle { background: rgba(255, 255, 255, 0.85); border-color: rgba(184, 149, 72, 0.5); color: #B89548; } [data-theme="light"] body.banner-hidden .theme-toggle:hover { background: rgba(255, 255, 255, 1); border-color: #B89548; } @media (max-width: 600px) { .theme-toggle { top: 5px; right: 0.7rem; width: 28px; height: 28px; } .theme-toggle svg { width: 14px; height: 14px; } }