/** * LoopLogiQ Light Mode Overrides * * The site is built entirely with hardcoded dark-theme Tailwind utility classes * (bg-slate-900, text-slate-300, bg-[#090511], etc.) rather than CSS custom * properties, so assets/js/theme.js flipping `data-theme` on had nothing * to react to -- the toggle worked (state, localStorage, icon swap) but the page * never actually changed color. This file re-maps the color utility classes * reused across every page to a light equivalent, scoped under * [data-theme="light"] so it only applies when the toggle (or a light OS * preference) is active. Loaded after tailwind.min.css on every page that has * the theme toggle so the higher-specificity selectors here win. */ :root[data-theme="light"] { color-scheme: light; } /* Page background gradient + default text color */ :root[data-theme="light"] body { background: linear-gradient(to bottom right, #f8fafc, #eef2ff, #ffffff) !important; color: #1e293b !important; } /* Solid dark-hex backgrounds used for header/footer/sections */ :root[data-theme="light"] .bg-\[\#090511\], :root[data-theme="light"] .bg-\[\#06030c\] { background-color: #ffffff !important; } :root[data-theme="light"] .bg-\[\#090511\]\/45 { background-color: rgba(255, 255, 255, 0.75) !important; } :root[data-theme="light"] .bg-\[\#090511\]\/95 { background-color: rgba(255, 255, 255, 0.96) !important; } /* Card / panel surfaces. Every dark neutral surface class used anywhere on the site should be listed here -- if a new one shows up (grep for `bg-slate-`), it needs an entry here AND, if it can contain a highlight or similar, a matching line in the "white text on these surfaces" block near the bottom of this file. */ :root[data-theme="light"] .bg-slate-800, :root[data-theme="light"] .bg-slate-800\/70, :root[data-theme="light"] .bg-slate-900, :root[data-theme="light"] .bg-slate-900\/60, :root[data-theme="light"] .bg-slate-900\/70, :root[data-theme="light"] .bg-slate-900\/75, :root[data-theme="light"] .bg-slate-900\/80, :root[data-theme="light"] .bg-slate-900\/90 { background-color: #f1f5f9 !important; } :root[data-theme="light"] .bg-slate-950, :root[data-theme="light"] .bg-slate-950\/70, :root[data-theme="light"] .bg-slate-950\/75, :root[data-theme="light"] .bg-slate-950\/80, :root[data-theme="light"] .bg-slate-950\/90 { background-color: #ffffff !important; } /* Text colors: light-on-dark slate scale flips to dark-on-light */ :root[data-theme="light"] .text-slate-100 { color: #0f172a !important; } :root[data-theme="light"] .text-slate-200 { color: #1e293b !important; } :root[data-theme="light"] .text-slate-300 { color: #334155 !important; } :root[data-theme="light"] .text-slate-400 { color: #475569 !important; } :root[data-theme="light"] .text-slate-500 { color: #64748b !important; } /* Borders: dark hairlines flip to light hairlines */ :root[data-theme="light"] .border-slate-700, :root[data-theme="light"] .border-slate-700\/60, :root[data-theme="light"] .border-slate-700\/70, :root[data-theme="light"] .border-slate-800, :root[data-theme="light"] .border-slate-800\/80, :root[data-theme="light"] .border-slate-950 { border-color: #e2e8f0 !important; } /* Inputs (forms use bg-slate-900 + border-slate-700 + text-slate-100 directly) */ :root[data-theme="light"] input, :root[data-theme="light"] textarea, :root[data-theme="light"] select { background-color: #f8fafc !important; color: #0f172a !important; } :root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder { color: #94a3b8 !important; } /* Glassmorphic surfaces used for panels/badges/widgets across the site */ :root[data-theme="light"] .glass-panel, :root[data-theme="light"] .floating-growth-badge { background: rgba(255, 255, 255, 0.85) !important; border-color: rgba(148, 163, 184, 0.4) !important; } /* white/[0.0x] translucent overlays used for subtle fills and hover states */ :root[data-theme="light"] .bg-white\/5 { background-color: rgba(15, 23, 42, 0.05) !important; } :root[data-theme="light"] .bg-white\/10 { background-color: rgba(15, 23, 42, 0.08) !important; } /* Mobile menu panel + header keep their own explicit dark backgrounds inline */ :root[data-theme="light"] #mobileMenu, :root[data-theme="light"] header { background-color: rgba(255, 255, 255, 0.96) !important; } /* Accent text colors (violet/cyan/amber/emerald/pink/indigo) are all tuned as light-tint-on-dark-background pastels -- e.g. text-cyan-300, used 380+ times site-wide for labels and headline accents. On a light/white background those same pastels have poor contrast and barely read at all ("doesn't pop"). Darken each to a ~700-level shade so they stay legible on light backgrounds while keeping the same hue identity. */ :root[data-theme="light"] .text-cyan-300, :root[data-theme="light"] .text-cyan-400 { color: #0e7490 !important; } :root[data-theme="light"] .text-violet-200, :root[data-theme="light"] .text-violet-300, :root[data-theme="light"] .text-violet-300\/90, :root[data-theme="light"] .text-violet-400 { color: #6d28d9 !important; } :root[data-theme="light"] .text-indigo-200, :root[data-theme="light"] .text-indigo-300 { color: #4338ca !important; } :root[data-theme="light"] .text-amber-300 { color: #b45309 !important; } :root[data-theme="light"] .text-emerald-300, :root[data-theme="light"] .text-emerald-400 { color: #047857 !important; } :root[data-theme="light"] .text-pink-300 { color: #be185d !important; } :root[data-theme="light"] .text-red-300, :root[data-theme="light"] .text-red-300\/80, :root[data-theme="light"] .text-red-400, :root[data-theme="light"] .text-red-400\/70 { color: #b91c1c !important; } /* Red warning/error surfaces (the "3 hrs Before" crossed-out stat card, error banners) are translucent dark-red-on-dark-page washes; over a light page that same low opacity composites into a muted mauve that's borderline against the darkened red text above, so give these a deliberately light, more opaque backing instead. */ :root[data-theme="light"] .bg-red-950\/30, :root[data-theme="light"] .bg-red-900\/20, :root[data-theme="light"] .bg-red-500\/20 { background-color: rgba(254, 226, 226, 0.8) !important; } :root[data-theme="light"] .border-red-500\/25, :root[data-theme="light"] .border-red-500\/40 { border-color: rgba(185, 28, 28, 0.35) !important; } /* Same dilution problem as the red cards above, on the indigo "Result" stat card -- translucent dark indigo over a light page washes out to a pale lavender, and the highlighted numbers inside it ("3 hours", "10 minutes") would otherwise be white-on-near-white. */ :root[data-theme="light"] .bg-indigo-900\/25 { background-color: rgba(224, 231, 255, 0.8) !important; } /* Any white/light text nested inside (or directly on) one of the surfaces above needs to flip dark along with its background, or it goes invisible -- e.g. the Hoop Hopper floating badge's "Play Hoop Hopper & See What We Do" label, a phone mockup's white caller-ID text on bg-slate-950/70, or the "3 hours"/"10 minutes" highlights in the case-study cards. Colored/gradient buttons (brand-button, bg-indigo-500, etc.) are untouched by this file and correctly keep white text, since gradients aren't targeted by these background-color selectors. */ :root[data-theme="light"] .bg-slate-800 .text-white, :root[data-theme="light"] .bg-slate-800\/70 .text-white, :root[data-theme="light"] .bg-slate-900 .text-white, :root[data-theme="light"] .bg-slate-900\/60 .text-white, :root[data-theme="light"] .bg-slate-900\/70 .text-white, :root[data-theme="light"] .bg-slate-900\/75 .text-white, :root[data-theme="light"] .bg-slate-900\/80 .text-white, :root[data-theme="light"] .bg-slate-900\/90 .text-white, :root[data-theme="light"] .bg-slate-950 .text-white, :root[data-theme="light"] .bg-slate-950\/70 .text-white, :root[data-theme="light"] .bg-slate-950\/75 .text-white, :root[data-theme="light"] .bg-slate-950\/80 .text-white, :root[data-theme="light"] .bg-slate-950\/90 .text-white, :root[data-theme="light"] .bg-red-900\/20 .text-white, :root[data-theme="light"] .bg-red-950\/30 .text-white, :root[data-theme="light"] .bg-indigo-900\/25 .text-white, :root[data-theme="light"] .glass-panel .text-white, :root[data-theme="light"] .floating-growth-badge .text-white, :root[data-theme="light"] .bg-white\/5 .text-white, :root[data-theme="light"] .bg-white\/10 .text-white { color: #0f172a !important; }