/* ========================================================= KESEF Light Theme Activated via , toggled by js/theme.js. Redefines the same custom properties modern.css/admin.css already use everywhere, plus explicit fixes for the handful of rules that use hardcoded colors instead of a variable (nav/topbar backgrounds, glass-tinted form inputs, status badges, gold-as-text contrast). ========================================================= */ :root[data-theme="light"] { --dark-base: #f7f4ee; --dark-surface: #ffffff; --dark-card: #ffffff; --dark-card2: #f3efe6; --glass: rgba(26, 26, 46, 0.035); --glass-hover: rgba(26, 26, 46, 0.06); --glass-border: rgba(26, 26, 46, 0.10); --gold: #96700f; --gold-light: #b8882f; --gold-dark: #74560c; --gold-glow: rgba(150, 112, 15, 0.18); --text-hi: #1a1a2e; --text-mid: rgba(26, 26, 46, 0.72); --text-lo: rgba(26, 26, 46, 0.48); --shadow-card: 0 8px 30px rgba(20, 20, 30, .08); --shadow-hover: 0 16px 46px rgba(20, 20, 30, .14); } /* ===== Hardcoded backgrounds that bypass the variables above ===== */ [data-theme="light"] .container-fluid.bg-dark:first-of-type { background: rgba(255, 255, 255, .95) !important; border-bottom: 1px solid var(--glass-border); } [data-theme="light"] .kesef-topbar { background: rgba(255, 255, 255, .92) !important; border-bottom: 1px solid rgba(150, 112, 15, .15); } [data-theme="light"] .nav-bar { background: rgba(255, 255, 255, .95) !important; border-bottom: 1px solid rgba(150, 112, 15, .18); box-shadow: 0 6px 30px rgba(20, 20, 30, .08); } /* Footer background already flips via --dark-surface/--dark-base, but its links use Bootstrap's hardcoded .text-white utility, which doesn't. */ [data-theme="light"] .container-fluid.bg-dark.text-white a.text-white, [data-theme="light"] .container-fluid.bg-dark.text-white p.text-white { color: var(--text-hi) !important; } [data-theme="light"] .container-fluid.bg-dark.text-white a.text-white:hover { color: var(--gold) !important; } [data-theme="light"] .container-fluid.bg-dark.text-white .btn-outline-light { border-color: rgba(26, 26, 46, .25) !important; color: var(--text-hi) !important; } [data-theme="light"] .container-fluid.bg-dark.text-white .btn-outline-light:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: #fff !important; } [data-theme="light"] .container-fluid.bg-dark.text-white .border-top.border-secondary { border-color: rgba(26, 26, 46, .12) !important; } [data-theme="light"] .dropdown-menu { background: rgba(255, 255, 255, .98) !important; border: 1px solid rgba(150, 112, 15, .15) !important; box-shadow: 0 16px 50px rgba(20, 20, 30, .14) !important; } [data-theme="light"] .kesef-admin-nav { background: rgba(255, 255, 255, .97); border-bottom: 1px solid rgba(150, 112, 15, .2); } /* Glass-tinted form inputs: white-on-white is invisible once cards turn light, so flip the tint to a faint dark wash instead. */ [data-theme="light"] .glass-card .form-control, [data-theme="light"] .glass-card select.form-control { background: rgba(26, 26, 46, .035) !important; border: 1px solid var(--glass-border) !important; color: var(--text-hi) !important; } [data-theme="light"] .glass-card .form-control:focus { background: rgba(26, 26, 46, .06) !important; } [data-theme="light"] .kesef-toggle-option { background: rgba(26, 26, 46, .035); } [data-theme="light"] .kesef-logout-btn { border: 1px solid rgba(26, 26, 46, .18); } /* Gallery page hero banner: hardcoded dark gradient + a white-to-gold text-clip heading, defined in gallery.php's own inline