/* ============================================ 1828 MANHOOD ACADEMY — COLOR THEMES Usage: add class="theme-light" or "theme-dark" to ============================================ */ /* ---- THEME 4: Original Mode (Forest Green/Gold) ---- */ body.theme-original { --color-bg: #1F3A2E; --color-bg-section: rgba(15, 44, 44, 0.6); --color-bg-card: rgba(15, 44, 44, 0.5); --color-bg-overlay: rgba(230, 200, 79, 0.1); --color-hero-bg: linear-gradient(135deg, #1F3A2E, #0F2C2C); --color-primary: #E6C84F; --color-secondary: #D6B84A; --color-text: #E5E5E5; --color-text-muted: #E6C84F; --color-btn-bg: #F2E05A; --color-btn-text: #1F3A2E; --color-btn-hover: #E6C84F; --color-border: #D6B84A; --color-nav-bg: rgba(230, 200, 79, 0.1); --color-highlight: #FF6A2B; --color-divider: #D6B84A; } /* ---- THEME 1: Original Dark (Navy/Gold) ---- */ body.theme-dark { --color-bg: #1a2332; --color-bg-section: rgba(0, 0, 0, 0.3); --color-bg-card: rgba(255, 255, 255, 0.05); --color-bg-overlay: rgba(255, 215, 0, 0.1); --color-primary: #c9a961; --color-secondary: #e8d5b7; --color-text: #f5f5f5; --color-text-muted: #e8d5b7; --color-btn-bg: #c9a961; --color-btn-text: #1a2332; --color-btn-hover: #e8d5b7; --color-border: #c9a961; --color-nav-bg: rgba(255, 215, 0, 0.1); } /* ---- THEME 3: Blue Mode (Navy/Gold/Steel Blue) ---- */ body.theme-blue { --color-bg: #F3F6FA; --color-bg-section: #E6EDF5; --color-bg-card: #FFFFFF; --color-bg-overlay: rgba(78, 111, 147, 0.1); --color-hero-bg: linear-gradient(135deg, #4E6F93, #1E3A5F); --color-primary: #D4B06A; --color-secondary: #C7A458; --color-text: #1E2F45; --color-text-muted: #44566C; --color-btn-bg: #D4B06A; --color-btn-text: #1E3A5F; --color-btn-hover: #B9974E; --color-border: #E6EDF5; --color-nav-bg: rgba(78, 111, 147, 0.1); --color-highlight: #D4B06A; --color-divider: #6C7A8C; } /* ---- THEME 2: Light (Burnt Orange/Cream) ---- */ body.theme-light { --color-bg: #FFF3E6; --color-bg-section: rgba(30, 42, 56, 0.06); --color-bg-card: rgba(30, 42, 56, 0.05); --color-bg-overlay: rgba(217, 106, 43, 0.1); --color-primary: #D96A2B; --color-secondary: #F08A4B; --color-text: #2A2A2A; --color-text-muted: #F08A4B; --color-btn-bg: #D96A2B; --color-btn-text: #FFF3E6; --color-btn-hover: #F08A4B; --color-border: #D96A2B; --color-nav-bg: rgba(217, 106, 43, 0.1); --color-highlight: #F4C542; } /* ---- SHARED STYLES (use variables) ---- */ body { background: var(--color-bg); color: var(--color-text); transition: background 0.3s, color 0.3s; } /* Force all text to use theme color in dark mode */ body.theme-dark p, body.theme-dark li, body.theme-dark .pillar p, body.theme-dark .vision-item p, body.theme-dark .week p, body.theme-dark .bio p, body.theme-dark .bio-box p, body.theme-dark .week-box p, body.theme-dark .quote-box p, body.theme-dark .reassurance p, body.theme-dark .subhead { color: #f5f5f5; }