/** * ============================================ * THEME SYSTEM - LIGHT & DARK MODES * ============================================ * Theme-specific color applications * Applied via .light-mode and .dark-mode classes on */ /* ==================== LIGHT MODE ==================== */ html.light-mode body { background-color: var(--color-bg-light); color: var(--color-text-light); } /* Headline gradient */ .light-mode .headline { background: linear-gradient( 135deg, var(--color-primary) 0%, var(--color-accent-orange) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* Fallback for browsers that don't support background-clip */ color: var(--color-primary); } /* Countdown numbers */ .light-mode .countdown-number { color: var(--color-primary); text-shadow: var(--text-shadow-glow-light); } .light-mode .countdown-label { color: var(--color-text-light); opacity: var(--opacity-subtle); } .light-mode .countdown-separator { color: var(--color-text-light); } /* Launch date */ .light-mode .launch-date { color: #94a3b8; opacity: var(--opacity-subtle); } /* Value prop cards */ .light-mode .value-item { background: var(--color-surface-light); border-color: var(--color-border-light); box-shadow: var(--shadow-md-light); } .light-mode .value-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-lg-light); background: var(--color-surface-light-hover); } .light-mode .value-text { color: var(--color-text-light); } /* Hook text */ .light-mode .hook { color: var(--color-text-light); } /* Email input */ .light-mode .email-input { background: var(--color-surface-light); color: var(--color-text-light); border-color: var(--color-border-light); } .light-mode .email-input::placeholder { color: var(--color-text-light-muted); } .light-mode .email-input:focus { border-color: var(--color-primary); box-shadow: var(--shadow-md-light); } /* CTA button */ .light-mode .cta-button { background: linear-gradient( 135deg, var(--color-primary) 0%, var(--color-primary-dark) 100% ); color: white; box-shadow: var(--shadow-md-light); } .light-mode .cta-button:hover { box-shadow: var(--shadow-lg-light); } /* Social proof */ .light-mode .social-proof { color: var(--color-text-light); } .light-mode .social-proof strong { color: var(--color-accent-orange); } /* Social icons */ .light-mode .social-icon { filter: invert(0); opacity: var(--opacity-subtle); } .light-mode .social-icon:hover { opacity: 1; } /* Theme toggle */ .light-mode .toggle-switch { background-color: rgba(148, 163, 184, 0.3); border-color: var(--color-border-light); } .light-mode .toggle-slider { transform: translateX(0); background-color: var(--color-primary); } /* ==================== DARK MODE ==================== */ html.dark-mode body { background-color: var(--color-bg-dark); color: var(--color-text-dark); } /* Headline gradient */ .dark-mode .headline { background: linear-gradient( 135deg, var(--color-accent-cyan) 0%, var(--color-primary) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* Fallback for browsers that don't support background-clip */ color: var(--color-accent-cyan); } /* Countdown numbers */ .dark-mode .countdown-number { color: var(--color-accent-cyan); text-shadow: var(--text-shadow-glow-dark); } .dark-mode .countdown-label { color: var(--color-text-dark); opacity: var(--opacity-muted); } .dark-mode .countdown-separator { color: var(--color-text-dark); } /* Launch date */ .dark-mode .launch-date { color: #94a3b8; opacity: var(--opacity-subtle); } /* Value prop cards */ .dark-mode .value-item { background: var(--color-surface-dark); border-color: var(--color-border-dark); box-shadow: var(--shadow-md-dark); } .dark-mode .value-item:hover { border-color: var(--color-accent-cyan); box-shadow: var(--shadow-lg-dark); background: var(--color-surface-dark-hover); } .dark-mode .value-text { color: var(--color-text-dark); } /* Hook text */ .dark-mode .hook { color: var(--color-text-dark); } /* Email input */ .dark-mode .email-input { background: var(--color-surface-dark); color: var(--color-text-dark); border-color: var(--color-border-dark); } .dark-mode .email-input::placeholder { color: var(--color-text-dark-muted); } .dark-mode .email-input:focus { border-color: var(--color-accent-cyan); box-shadow: var(--shadow-md-dark); } /* CTA button */ .dark-mode .cta-button { background: linear-gradient( 135deg, var(--color-accent-cyan) 0%, var(--color-primary) 100% ); color: var(--color-bg-dark); box-shadow: var(--shadow-md-dark); } .dark-mode .cta-button:hover { box-shadow: var(--shadow-lg-dark); } /* Social proof */ .dark-mode .social-proof { color: var(--color-text-dark); } .dark-mode .social-proof strong { color: var(--color-accent-cyan); } /* Social icons */ .dark-mode .social-icon { color: #22d3ee; opacity: var(--opacity-visible); } .dark-mode .social-icon:hover { opacity: 1; } /* Theme toggle */ .dark-mode .toggle-switch { background-color: rgba(34, 211, 238, 0.3); border-color: var(--color-border-dark); } .dark-mode .toggle-slider { transform: translateX(var(--toggle-slider-offset)); background-color: var(--color-accent-cyan); } /* ==================== ACCESSIBILITY: High Contrast ==================== */ @media (prefers-contrast: high) { .light-mode .value-item, .dark-mode .value-item { border-width: var(--border-width-thick); } .light-mode .email-input, .dark-mode .email-input { border-width: var(--border-width-thick); } } /* ==================== ACCESSIBILITY: Forced Colors Mode ==================== */ @media (forced-colors: active) { .cta-button { border: 2px solid currentColor; } .value-item { border: 2px solid currentColor; } }