/* ============================================================ DARK MODE (default) Override Bootstrap's CSS variables so Bootstrap components (cards, tables, forms) respond to the theme automatically. ============================================================ */ :root { /* Our own variables */ --gold: #D4AF37; --gold-dark: #B8941F; --dark-navy: #1a2332; --light-text: #F5F5DC; --muted-text: #C9B896; --body-bg: #1a2332; --text-color: #F5F5DC; --card-bg: #2a3a4a; --border-color: rgba(255, 255, 255, 0.1); --input-bg: #1a2332; /* Override Bootstrap variables for dark mode */ --bs-body-bg: #1a2332; --bs-body-color: #F5F5DC; --bs-heading-color: #F5F5DC; --bs-emphasis-color: #F5F5DC; --bs-card-bg: #2a3a4a; --bs-card-color: #F5F5DC; --bs-card-cap-bg: rgba(255, 255, 255, 0.05); --bs-border-color: rgba(255, 255, 255, 0.1); --bs-border-color-translucent: rgba(255, 255, 255, 0.1); --bs-table-color: #F5F5DC; --bs-table-bg: transparent; --bs-table-border-color: rgba(255, 255, 255, 0.1); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); } /* ============================================================ LIGHT MODE (data-theme="light") ============================================================ */ [data-theme="light"] { /* Our own variables */ --body-bg: #F8FAFC; --dark-navy: #FFFFFF; --light-text: #1E293B; --muted-text: #475569; --text-color: #1E293B; --card-bg: #FFFFFF; --border-color: #e2e8f0; --input-bg: #FFFFFF; /* Override Bootstrap variables for light mode */ --bs-body-bg: #F8FAFC; --bs-body-color: #1E293B; --bs-heading-color: #1E293B; --bs-emphasis-color: #1E293B; --bs-card-bg: #FFFFFF; --bs-card-color: #1E293B; --bs-card-cap-bg: rgba(0, 0, 0, 0.03); --bs-border-color: #e2e8f0; --bs-border-color-translucent: rgba(0, 0, 0, 0.175); --bs-table-color: #1E293B; --bs-table-bg: transparent; --bs-table-border-color: #e2e8f0; --bs-table-striped-bg: rgba(0, 0, 0, 0.03); } /* ============================================================ DARK MODE — explicit [data-theme="dark"] to override Bootstrap when theme.js sets the attribute on . ============================================================ */ [data-theme="dark"] { --body-bg: #1a2332; --dark-navy: #1a2332; --light-text: #F5F5DC; --muted-text: #C9B896; --text-color: #F5F5DC; --card-bg: #2a3a4a; --border-color: rgba(255, 255, 255, 0.1); --input-bg: #1a2332; --bs-body-bg: #1a2332; --bs-body-color: #F5F5DC; --bs-heading-color: #F5F5DC; --bs-emphasis-color: #F5F5DC; --bs-card-bg: #2a3a4a; --bs-card-color: #F5F5DC; --bs-card-cap-bg: rgba(255, 255, 255, 0.05); --bs-border-color: rgba(255, 255, 255, 0.1); --bs-border-color-translucent: rgba(255, 255, 255, 0.1); --bs-table-color: #F5F5DC; --bs-table-bg: transparent; --bs-table-border-color: rgba(255, 255, 255, 0.1); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); } /* Force readable text on common elements in dark mode */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #F5F5DC !important; } [data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] li, [data-theme="dark"] td, [data-theme="dark"] th { color: #F5F5DC !important; } [data-theme="dark"] a:not(.btn):not(.nav-link):not(.nav-item):not(.dropdown-item):not(.lang-btn):not(.video-placeholder-btn):not(.watch-btn):not(.donate-btn):not(.map-btn):not(.mobile-lang-popup a):not(.mobile-more-donate) { color: #D4AF37 !important; } /* Video modal card — always dark, always light text, theme-independent */ .video-modal-card { background: #1e2d3d !important; color: #F5F5DC !important; } .video-modal-card h1, .video-modal-card h2, .video-modal-card h3, .video-modal-card h4, .video-modal-card h5, .video-modal-card h6, .video-modal-card p, .video-modal-card span, .video-modal-card li { color: #F5F5DC !important; } /* Gold-background button links — same dark text in both light and dark mode */ .video-placeholder-btn, .watch-btn, .donate-btn, .map-btn { color: #1a2332 !important; } /* Lang switcher buttons keep their own colors in dark mode */ [data-theme="dark"] .lang-btn { color: white !important; } [data-theme="dark"] .lang-btn.active { color: #1a1a2e !important; } /* Mobile language popup — inactive links white, active link dark on gold background */ [data-theme="dark"] .mobile-lang-popup a { color: white !important; } [data-theme="dark"] .mobile-lang-popup a.active { color: #FF0000 !important; background: #D4AF37 !important; font-weight: 700 !important; } /* Mobile donation button — dark text on gold background */ [data-theme="dark"] .mobile-more-donate, [data-theme="dark"] .mobile-more-donate:link, [data-theme="dark"] .mobile-more-donate:visited, [data-theme="dark"] .mobile-more-donate:hover, [data-theme="dark"] .mobile-more-donate:active { color: #1a1a2e !important; } /* Restoration content has a light background image — keep text dark */ [data-theme="dark"] .restoration-content h1, [data-theme="dark"] .restoration-content h2, [data-theme="dark"] .restoration-content h3, [data-theme="dark"] .restoration-content h4, [data-theme="dark"] .restoration-content h5, [data-theme="dark"] .restoration-content h6 { color: #000 !important; } [data-theme="dark"] .restoration-content p, [data-theme="dark"] .restoration-content span, [data-theme="dark"] .restoration-content li { color: #000 !important; } /* page-titles has background:#fff in style.css — override it in dark mode */ [data-theme="dark"] .page-titles { background: #2a3a4a !important; } [data-theme="dark"] .welcome-text h4, [data-theme="dark"] .page-titles h4 { color: #F5F5DC !important; } /* ============================================================ BODY — theme background & base text ============================================================ */ body { color: var(--text-color) !important; background-color: var(--body-bg) !important; } /* ============================================================ BOOTSTRAP CARD OVERRIDES Cards sit on the themed background and must follow it. ============================================================ */ .card { background-color: var(--card-bg) !important; color: var(--text-color) !important; border-color: var(--border-color) !important; } .card-header, .card-footer { background-color: var(--card-bg) !important; border-color: var(--border-color) !important; color: var(--text-color) !important; } .card-body { color: var(--text-color) !important; } .card-title, .card-subtitle { color: var(--text-color) !important; } /* Headings & text only inside Bootstrap cards */ .card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card p, .card label, .card small { color: var(--text-color) !important; } .text-muted { color: var(--muted-text) !important; } /* ============================================================ TABLES ============================================================ */ .table { color: var(--text-color) !important; border-color: var(--border-color) !important; } .table th, .table td { color: var(--text-color) !important; border-color: var(--border-color) !important; background-color: transparent !important; } .table-striped > tbody > tr:nth-of-type(odd) > * { color: var(--text-color) !important; background-color: rgba(255, 255, 255, 0.03) !important; } [data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(0, 0, 0, 0.03) !important; } /* ============================================================ FORMS ============================================================ */ .form-control { background-color: var(--input-bg) !important; color: var(--text-color) !important; border-color: var(--border-color) !important; } .form-control::placeholder { color: var(--muted-text) !important; } /* form labels outside of cards */ .form-group label, .form-label { color: var(--text-color) !important; } /* ============================================================ HEADER, NAV-HEADER & SIDEBAR — theme-aware Targets both [data-theme] on and [data-theme-version] on ============================================================ */ [data-theme="light"] .header, [data-theme-version="light"] .header { background-color: #FFFFFF !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } [data-theme="light"] .nav-header, [data-theme-version="light"] .nav-header { background-color: #FFFFFF !important; } [data-theme="light"] .dlabnav, [data-theme-version="light"] .dlabnav { background-color: #FFFFFF !important; } [data-theme="light"] .header .nav-link, [data-theme="light"] .header .navbar-nav .nav-link, [data-theme-version="light"] .header .nav-link, [data-theme-version="light"] .header .navbar-nav .nav-link { color: #1E293B !important; } [data-theme="light"] .header .nav-link:hover, [data-theme-version="light"] .header .nav-link:hover { color: #D4AF37 !important; } [data-theme="light"] .dlabnav .metismenu > li > a, [data-theme-version="light"] .dlabnav .metismenu > li > a { color: #1E293B !important; } [data-theme="light"] .dlabnav .metismenu > li.mm-active > a, [data-theme="light"] .dlabnav .metismenu > li > a:hover, [data-theme-version="light"] .dlabnav .metismenu > li.mm-active > a, [data-theme-version="light"] .dlabnav .metismenu > li > a:hover { color: #D4AF37 !important; } [data-theme="light"] .hamburger .line, [data-theme-version="light"] .hamburger .line { background: #1E293B !important; } [data-theme="dark"] .header, [data-theme-version="dark"] .header { background-color: #1a2332 !important; } [data-theme="dark"] .nav-header, [data-theme-version="dark"] .nav-header { background-color: #1a2332 !important; } [data-theme="dark"] .dlabnav, [data-theme-version="dark"] .dlabnav { background-color: #1a2332 !important; } [data-theme="dark"] .header .nav-link, [data-theme="dark"] .header .navbar-nav .nav-link, [data-theme-version="dark"] .header .nav-link, [data-theme-version="dark"] .header .navbar-nav .nav-link { color: #F5F5DC !important; } [data-theme="dark"] .header .nav-link:hover, [data-theme-version="dark"] .header .nav-link:hover { color: #D4AF37 !important; }