/* ════════════════════════════════════════════════ Ceramic Guys — LIGHT MODE OVERRIDES Applied when is set. Variables defined in each page's :root are overridden here so the existing layout/CSS automatically inverts. ════════════════════════════════════════════════ */ html.light-mode { /* Public site + booking variables */ --bg: #fafafa; --surface: #ffffff; --surface-hover: #f1f1f1; --surface-light: #ebebeb; --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.18); --text-main: #1a1a1a; --text-muted: #555555; --text-dark: #777777; /* Admin variables (different names but same intent) */ --surface-2: #f1f1f1; --border-hover: rgba(0, 0, 0, 0.18); --text: #2a2a2a; --white: #111111; /* admin uses --white for headings; flip to dark text */ --gold-glow: rgba(197, 160, 89, 0.25); --shadow: 0 2px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); /* Gold accents stay the same so the brand identity holds. */ } /* Hardcoded dark colours that don't use variables need explicit overrides */ html.light-mode .header { background: rgba(250, 250, 250, 0.95) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } html.light-mode .nav-menu.is-active { background: rgba(250, 250, 250, 0.98) !important; } /* Mobile nav menu (when collapsed/expanded) */ html.light-mode .mobile-toggle svg { stroke: var(--text-main); } /* Hero glow softens significantly in light mode */ html.light-mode .hero-glow { opacity: 0.4; mix-blend-mode: multiply; } /* Banner image overlay — darker imagery needs less contrast */ html.light-mode .hero-banner { filter: brightness(1.02); } /* Sections explicitly themed to dark surface should fall back to light */ html.light-mode body { background-color: var(--bg); color: var(--text-main); } /* Cards/surfaces with rgba black tint */ html.light-mode [style*="background:#0a0a0a"], html.light-mode [style*="background: #0a0a0a"], html.light-mode [style*="background:#111"], html.light-mode [style*="background: #111"], html.light-mode [style*="background:#0f0f0f"], html.light-mode [style*="background: #0f0f0f"], html.light-mode [style*="background:#030303"], html.light-mode [style*="background: #030303"] { background: var(--surface) !important; color: var(--text-main) !important; } /* Inline-styled paragraphs/spans inside a flipped dark banner keep their hardcoded white text — pull them back to readable dark text in light mode. Gold-styled spans/strongs/links remain gold by virtue of their own inline color. */ html.light-mode [style*="background:#0a0a0a"] p[style*="color:rgba(255"], html.light-mode [style*="background: #0a0a0a"] p[style*="color:rgba(255"], html.light-mode [style*="background:#111"] p[style*="color:rgba(255"], html.light-mode [style*="background: #111"] p[style*="color:rgba(255"], html.light-mode [style*="background:#0f0f0f"] p[style*="color:rgba(255"], html.light-mode [style*="background: #0f0f0f"] p[style*="color:rgba(255"], html.light-mode [style*="background:#030303"] p[style*="color:rgba(255"], html.light-mode [style*="background: #030303"] p[style*="color:rgba(255"], html.light-mode [style*="background:#0a0a0a"] p[style*="color:#fff"], html.light-mode [style*="background: #0a0a0a"] p[style*="color:#fff"], html.light-mode [style*="background:#111"] p[style*="color:#fff"], html.light-mode [style*="background: #111"] p[style*="color:#fff"], html.light-mode [style*="background:#0f0f0f"] p[style*="color:#fff"], html.light-mode [style*="background: #0f0f0f"] p[style*="color:#fff"], html.light-mode [style*="background:#030303"] p[style*="color:#fff"], html.light-mode [style*="background: #030303"] p[style*="color:#fff"] { color: var(--text-main) !important; } /* Sections with hardcoded inline pure black background */ html.light-mode section[style*="background:#000"], html.light-mode section[style*="background: #000"], html.light-mode #faqs[style] { background: var(--bg) !important; color: var(--text-main) !important; } /* Notification banner stays dark (it's a promo stripe) but ensures readable in light mode */ html.light-mode .cg-notification-banner { background: #1a1a1a !important; color: #f7f1e6 !important; } html.light-mode .cg-notification-banner * { color: inherit !important; } html.light-mode .cg-notification-banner button { color: #f7f1e6 !important; } /* FAQ-specific accordions / containers — ensure inner text colors are correct */ html.light-mode #faqs *, html.light-mode .cg-faq-section * { color: inherit; } html.light-mode .cg-faq-title { color: var(--text-main) !important; } /* ──────────── THEME TOGGLE BUTTON ──────────── */ .theme-toggle { appearance: none; background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); color: var(--text-main, #fff); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: 14px; padding: 0; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; flex: 0 0 auto; } html.light-mode .theme-toggle { border-color: rgba(0, 0, 0, 0.15); color: var(--text-main); } .theme-toggle:hover { border-color: var(--accent-gold, #c5a059); color: var(--accent-gold, #c5a059); } .theme-toggle:focus-visible { outline: 2px solid var(--accent-gold, #c5a059); outline-offset: 2px; } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html.light-mode .theme-toggle .icon-sun { display: block; } html.light-mode .theme-toggle .icon-moon { display: none; } /* Position toggle on mobile so it's tappable */ @media (max-width: 768px) { .theme-toggle { width: 36px; height: 36px; margin-left: 8px; } } /* ──────────── ADMIN PANEL OVERRIDES ──────────── The admin uses many hardcoded dark colours that don't go through CSS variables. Patch them here. */ html.light-mode .admin-header { background: rgba(250, 250, 250, 0.95) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; } html.light-mode .sidebar { background: #ffffff !important; border-right: 1px solid rgba(0, 0, 0, 0.06) !important; } html.light-mode .brand, html.light-mode .admin-header .brand { color: var(--gold, #c5a059) !important; } html.light-mode .brand span, html.light-mode .admin-header .brand span { color: rgba(0, 0, 0, 0.45) !important; } html.light-mode .hamburger { color: var(--text-main) !important; border-color: rgba(0, 0, 0, 0.12) !important; } /* All white-tint borders go invisible on white cards — flip to dark tint */ html.light-mode .stat-card, html.light-mode .booking-card, html.light-mode .holiday-item, html.light-mode .coupon-row, html.light-mode .settings-card, html.light-mode .filter-bar, html.light-mode .stats-bar { border-color: rgba(0, 0, 0, 0.08) !important; } /* Sidebar link inactive state */ html.light-mode .side-link { color: var(--text-main, #2a2a2a); } html.light-mode .side-link:hover { background: rgba(197, 160, 89, 0.08); color: var(--gold, #c5a059); } /* Input/select/textarea borders need a visible tint. Match the Metronic-override specificity exactly with the :not() qualifiers so we win the cascade. */ html.light-mode .settings-field input, html.light-mode .settings-field textarea, html.light-mode .settings-field select, html.light-mode .settings-field input:not([type="checkbox"]):not([type="radio"]), html.light-mode .cg-modal-field input, html.light-mode .cg-modal-field textarea, html.light-mode .cg-modal-field select, html.light-mode .cg-modal-field input:not([type="checkbox"]):not([type="radio"]), html.light-mode .login-panel input, html.light-mode #pkg-editor input, html.light-mode #pkg-editor textarea, html.light-mode #pkg-editor select { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.18) !important; color: var(--text-main, #1a1a1a) !important; } /* Focus state — gold accent stays */ html.light-mode .settings-field input:focus, html.light-mode .settings-field textarea:focus, html.light-mode .settings-field select:focus, html.light-mode .cg-modal-field input:focus, html.light-mode .cg-modal-field textarea:focus, html.light-mode .cg-modal-field select:focus, html.light-mode .login-panel input:focus { background: rgba(197, 160, 89, 0.04) !important; border-color: var(--gold, #c5a059) !important; box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.18) !important; } /* Chrome autofill puts a 1000px inset box-shadow on the input which paints over the bg with dark colour. Override it with a light inset and dark text. */ html.light-mode .login-panel input:-webkit-autofill, html.light-mode .login-panel input:-webkit-autofill:hover, html.light-mode .login-panel input:-webkit-autofill:focus, html.light-mode .settings-field input:-webkit-autofill, html.light-mode .settings-field input:-webkit-autofill:hover, html.light-mode .settings-field input:-webkit-autofill:focus, html.light-mode .cg-modal-field input:-webkit-autofill, html.light-mode .cg-modal-field input:-webkit-autofill:hover, html.light-mode .cg-modal-field input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important; -webkit-text-fill-color: var(--text-main, #1a1a1a) !important; border-color: rgba(0, 0, 0, 0.18) !important; } /* The select dropdown arrow uses a hardcoded grey stroke (#777) which is fine on both modes — leave it. */ /* Manual-booking dropdown arrow svg url uses #777 — visible. Leave as is. */ /* Make sure the buttons (.btn-outline, .btn-gold etc.) are also visible. */ html.light-mode .btn-outline { color: var(--gold, #c5a059) !important; border-color: rgba(197, 160, 89, 0.5) !important; } html.light-mode .btn-outline:hover { background: rgba(197, 160, 89, 0.08) !important; border-color: var(--gold, #c5a059) !important; } html.light-mode .btn-danger { color: #c0392b !important; border-color: rgba(192, 57, 43, 0.4) !important; } html.light-mode .btn-success { color: #1e8a4f !important; border-color: rgba(30, 138, 79, 0.4) !important; } /* Section message / settings-message containers */ html.light-mode .settings-message.success { background: rgba(30, 138, 79, 0.06) !important; border-color: rgba(30, 138, 79, 0.25) !important; color: #1e8a4f !important; } html.light-mode .settings-message.error { background: rgba(192, 57, 43, 0.06) !important; border-color: rgba(192, 57, 43, 0.25) !important; color: #c0392b !important; } /* Filter tabs container background */ html.light-mode .filter-bar { background: #ffffff !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; } html.light-mode .filter-tab { color: var(--text-muted, #666) !important; background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.08) !important; } html.light-mode .filter-tab.active { background: rgba(197, 160, 89, 0.14) !important; color: var(--gold, #c5a059) !important; border-color: rgba(197, 160, 89, 0.3) !important; } /* Stats-bar container */ html.light-mode .stats-bar { background: #ffffff !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; } /* Stat-card numbers visible */ html.light-mode .stat-card { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } html.light-mode .stat-card .num { color: var(--text-main, #1a1a1a) !important; } /* Booking cards get a visible border + subtle shadow */ html.light-mode .booking-card, html.light-mode .holiday-item, html.light-mode .coupon-row { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } html.light-mode .booking-card:hover, html.light-mode .holiday-item:hover, html.light-mode .coupon-row:hover { border-color: rgba(0, 0, 0, 0.18) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important; } /* Settings card */ html.light-mode .settings-card { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } /* Settings pill / status badge containers */ html.light-mode .settings-pill { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.08) !important; color: var(--text-muted, #555) !important; } /* Modal background */ html.light-mode .cg-modal-overlay { background: rgba(0, 0, 0, 0.45) !important; } /* Help text and small descriptions */ html.light-mode .settings-help, html.light-mode small.help, html.light-mode .field-hint { color: var(--text-muted, #666) !important; } /* Login panel border was hardcoded white-tint */ html.light-mode .login-panel { border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(197, 160, 89, 0.05) !important; } /* Small/secondary buttons */ html.light-mode .btn-small, html.light-mode .btn-sm, html.light-mode .btn { border-color: rgba(0, 0, 0, 0.15); } html.light-mode .btn-small { border: 1px solid rgba(0, 0, 0, 0.15) !important; color: var(--text-main, #333) !important; background: rgba(0, 0, 0, 0.02) !important; } html.light-mode .btn-small:hover { background: rgba(197, 160, 89, 0.08) !important; border-color: var(--gold, #c5a059) !important; color: var(--gold, #c5a059) !important; } /* Disabled mobile-toggle / hamburger contrast */ html.light-mode .hamburger { background: rgba(0, 0, 0, 0.02) !important; border-color: rgba(0, 0, 0, 0.12) !important; } html.light-mode .hamburger:hover { background: rgba(0, 0, 0, 0.06) !important; border-color: var(--gold, #c5a059) !important; } /* Sidebar mobile slide-out: dark text on light bg */ html.light-mode .sidebar .side-close { color: var(--text-main, #1a1a1a) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; } html.light-mode .sidebar .side-close button { border-color: rgba(0, 0, 0, 0.12) !important; color: var(--text-muted, #555) !important; } html.light-mode .sidebar .side-close button:hover { border-color: var(--gold, #c5a059) !important; color: var(--gold, #c5a059) !important; } /* Sidebar overlay (mobile) */ html.light-mode .sidebar-overlay { background: rgba(0, 0, 0, 0.45) !important; } /* Auth flash banner */ html.light-mode .auth-flash { background: rgba(30, 138, 79, 0.08) !important; color: #1e8a4f !important; border: 1px solid rgba(30, 138, 79, 0.25) !important; } /* Email preview iframe wrap */ html.light-mode .email-preview-overlay { background: rgba(0, 0, 0, 0.45) !important; } html.light-mode .email-preview-box { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16) !important; } /* Packages form (the editor block) */ html.light-mode .packages-form { background: rgba(0, 0, 0, 0.02) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; } html.light-mode .packages-form h3 { color: var(--text-main, #1a1a1a) !important; } /* Date inputs (calendar picker) - ensure they're visible */ html.light-mode input[type="date"], html.light-mode input[type="time"], html.light-mode input[type="datetime-local"], html.light-mode input[type="month"] { color-scheme: light; } /* Editor select dropdown opens — option list */ html.light-mode select option { background: #ffffff; color: var(--text-main, #1a1a1a); } /* Login panel */ html.light-mode .login-panel { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.08); } /* Toast notifications: dark text on light bg */ html.light-mode .toast { background: #ffffff !important; color: var(--text-main) !important; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } /* Modal overlays/content */ html.light-mode .cg-modal { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.08) !important; } html.light-mode .cg-modal-header, html.light-mode .cg-modal-footer { border-color: rgba(0, 0, 0, 0.08) !important; } html.light-mode .cg-modal-header h3 { color: var(--text-main) !important; } /* Misc background tint elements */ html.light-mode .empty-state { background: rgba(0, 0, 0, 0.02); color: var(--text-muted, #555); } /* ─── Admin: hardcoded white text on cards (heavy !important overrides) ─── */ html.light-mode .settings-card h1, html.light-mode .settings-card h2, html.light-mode .settings-card h3, html.light-mode .settings-card h4 { color: var(--text-main, #1a1a1a) !important; } html.light-mode .settings-card p, html.light-mode .settings-help, html.light-mode .login-panel p { color: var(--text-muted, #555) !important; } html.light-mode .settings-field label, html.light-mode .settings-field .label, html.light-mode .cg-modal-field label, html.light-mode .checkbox-row, html.light-mode .checkbox-row span, html.light-mode .cg-modal-checkbox-label, html.light-mode .cg-modal-checkbox-label span { color: var(--text-main, #1a1a1a) !important; } /* Booking-card text inside */ html.light-mode .booking-card, html.light-mode .booking-card h3, html.light-mode .booking-card h4, html.light-mode .booking-card p, html.light-mode .booking-card span, html.light-mode .booking-card strong, html.light-mode .booking-card .bc-main, html.light-mode .booking-card .bc-detail, html.light-mode .booking-card .bc-meta { color: var(--text-main, #1a1a1a) !important; } /* Stat cards */ html.light-mode .stat-card .num, html.light-mode .stat-card .label { color: var(--text-main, #1a1a1a) !important; } html.light-mode .stat-card .label { color: var(--text-muted, #555) !important; } /* Holiday and coupon row inner text */ html.light-mode .holiday-item, html.light-mode .holiday-item *, html.light-mode .coupon-row, html.light-mode .coupon-row * { color: var(--text-main, #1a1a1a); } /* Admin header subtitle (the small "Ceramic Guys — Booking Management" line) */ html.light-mode .admin-header p, html.light-mode .admin-header .subtitle { color: var(--text-muted, #555) !important; } /* Toast close X */ html.light-mode .toast-close { color: var(--text-muted, #555) !important; } /* Modal field labels */ html.light-mode .cg-modal-field label, html.light-mode .cg-modal-header h3 { color: var(--text-main, #1a1a1a) !important; } /* The "show notification banner" checkbox label was barely visible too */ html.light-mode .settings-field .checkbox-row, html.light-mode .settings-field .checkbox-row * { color: var(--text-main, #1a1a1a) !important; } /* Side-link inactive needs visible label */ html.light-mode .sidebar .side-link { color: var(--text-main, #2a2a2a) !important; } html.light-mode .sidebar .side-link.active, html.light-mode .sidebar .side-link:hover { color: var(--gold, #c5a059) !important; } /* "Loading…" placeholders */ html.light-mode .empty-state p { color: var(--text-muted, #555) !important; } /* Settings card section dividers/h3 group titles like "ADD NEW FAQ" */ html.light-mode .settings-card h3 { color: var(--text-main, #1a1a1a) !important; } html.light-mode .filter-tab { color: var(--text-muted, #555); } html.light-mode .filter-tab.active, html.light-mode .filter-tab[class*="active"] { background: rgba(197, 160, 89, 0.14); color: var(--gold, #c5a059); }