/* ═══════════════════════════════════════════════════════════════ InSightYou — LIGHT COLOR SCHEME ═══════════════════════════════════════════════════════════════ Mirror of theme-dark.css: the SAME variable list, light values. Applied when (set by the top-bar toggle, remembered in localStorage under "isy_theme"). TO CHANGE A COLOR: edit it here (and its counterpart in theme-dark.css). Keep every hex value and its "-rgb" triplet twin in sync. Never hardcode colors elsewhere in the theme. ═══════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { /* ── Backgrounds & surfaces ─────────────────────────────── */ --bg: #eae4f4; /* page background (soft light lavender) */ --bg-rgb: 234,228,244; --deep-night: #f6f3fb; /* cards, panels, nav surfaces */ --deep-night-rgb: 246,243,251; --deep-iris: #d8cbec; /* nebula glow, image placeholders */ --deep-iris-rgb: 216,203,236; --iris-deep: #e2d9f1; /* softest nebula tone */ --iris-mid: #d5c7eb; /* mid gradient stops */ --iris-mid-rgb: 213,199,235; /* ── Brand purples ──────────────────────────────────────── */ --core-purple: #5a2a9e; /* primary brand purple (unchanged) */ --core-purple-rgb: 90,42,158; --purple-bright: #6b35b5; /* button hover gradient start */ --mid-amethyst: #7a41c9; /* slightly deepened for contrast on white */ --mid-amethyst-rgb:122,65,201; --amethyst-bright: #8a50d8; /* button hover gradient end */ --soft-violet: #6f37bf; /* accent text: dark enough to read on white */ --soft-violet-rgb: 111,55,191; --violet-pale: #8a50d8; /* violet glints */ --violet-pale-rgb: 138,80,216; --dot: #cbb8ec; /* idle pager/pulse dots */ --orb-glint: #ffffff; /* highlight on the logo orb */ /* ── Text ───────────────────────────────────────────────── */ --moon-white: #241537; /* headings + primary text (dark ink) */ --moon-white-rgb: 36,21,55; --text: var(--moon-white); --muted: rgba(36,21,55,0.78); /* secondary text */ --muted2: rgba(36,21,55,0.55); /* faintest text */ --neutral: #6b6b6b; /* neutral gray text */ --ink-muted: #5c5375; /* muted ink */ /* ── Gold accents ───────────────────────────────────────── */ --gold: #8a6820; /* darkened for contrast on light bg */ --gold-rgb: 138,104,32; --gold-warm: #7e6212; /* gold gradient dark end */ --gold-light: #7d611c; /* prices, hovers */ --gold-shade-rgb: 233,222,196; /* soft gold-tinted backgrounds */ /* ── Borders, shadows, glass ────────────────────────────── */ --border: rgba(90,42,158,0.16); --border-light: rgba(90,42,158,0.09); --shadow: 0 20px 60px rgba(88,64,138,0.16); --glow: 0 0 40px rgba(122,65,201,0.14); --glass-rgb: 36,21,55; /* subtle input/panel washes: rgba(glass, .03) */ --shade-rgb: 88,64,138; /* soft lavender shadows & scrims */ /* ── Decorative sky ─────────────────────────────────────── */ --star: #ab94d9; /* soft lavender specks */ /* ── Status colors ──────────────────────────────────────── */ --error: #b03030; /* error text */ --error-rgb: 176,48,48; --error-deep: #a83232; /* error backgrounds/borders */ --error-deep-rgb: 180,40,40; --success: #1e7a3d; /* success text */ --success-rgb: 30,122,61; --success-deep-rgb:26,122,61; /* success backgrounds/borders */ --warn-rgb: 170,100,30; /* warning text */ --warn-deep-rgb: 180,100,40; /* warning backgrounds/borders */ --info-rgb: 40,100,190; /* info text */ --info-deep-rgb: 26,60,100; /* info backgrounds/borders */ /* ── Misc fixed tones ───────────────────────────────────── */ --on-accent: #ffffff; /* text on purple buttons */ --on-gold: #ffffff; /* text on gold buttons (gold is dark in light mode) */ --paper: #f0ece4; /* warm paper tone (workbooks) */ --paper-rgb: 240,236,228; --tan: #8a6f47; /* warm tan accents */ } /* ── Light-mode fine-tuning ───────────────────────────────── Small corrections where a raw palette swap isn't enough. */ /* the fixed nebulae are painted for a black sky — soften them */ :root[data-theme="light"] .isy-nebula { opacity: 0.35 !important; } :root[data-theme="light"] .isy-nebula--3 { opacity: 0.06 !important; } /* Hero / parallax overlays: the dark theme washes photos toward black with heavy gradients; a straight palette swap washes them toward white and the images disappear. Lighter alphas keep the photos visible while text stays on the strong side of the gradient. */ :root[data-theme="light"] .isy-overlay-dark-left::before { background: linear-gradient(to right, rgba(var(--bg-rgb),0.85) 0%, rgba(var(--bg-rgb),0.4) 50%, rgba(var(--bg-rgb),0.05) 100%); } :root[data-theme="light"] .isy-overlay-dark-top::before { background: linear-gradient(to top, rgba(var(--bg-rgb),0.92) 0%, rgba(var(--bg-rgb),0.4) 50%, rgba(var(--bg-rgb),0.05) 100%); } :root[data-theme="light"] .isy-overlay-near-black::before { background: rgba(var(--bg-rgb),0.55); } :root[data-theme="light"] .isy-truffle-hero::before { background: linear-gradient(135deg, rgba(var(--bg-rgb),0.88) 0%, rgba(var(--bg-rgb),0.45) 55%, rgba(var(--bg-rgb),0.08) 100%); } :root[data-theme="light"] .ish-hero__ov { background: linear-gradient(135deg, rgba(var(--bg-rgb),0.85) 0%, rgba(var(--bg-rgb),0.5) 50%, rgba(var(--iris-mid-rgb),0.3) 100%); } :root[data-theme="light"] .ish-flagship__ov { background: linear-gradient(to top, rgba(var(--bg-rgb),0.9) 8%, rgba(var(--bg-rgb),0.4) 55%, rgba(var(--bg-rgb),0.1) 100%); } /* ── Readability boosts (owner feedback: light theme must be "more in your face" — faint dark-mode alphas are illegible as dark ink on light) ── */ :root[data-theme="light"] .isy-nav__links a { color: rgba(var(--moon-white-rgb),0.8) !important; } :root[data-theme="light"] .isy-nav__links a:hover { color: var(--moon-white) !important; } :root[data-theme="light"] .isy-nav__lang { color: rgba(var(--moon-white-rgb),0.65); } :root[data-theme="light"] .isy-nav__account { color: rgba(var(--moon-white-rgb),0.75); } /* ghost buttons sit on photos: give them a frosted panel so they read */ :root[data-theme="light"] .btn--ghost { border-color: rgba(var(--moon-white-rgb),0.35); color: rgba(var(--moon-white-rgb),0.85); background: rgba(var(--deep-night-rgb),0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } :root[data-theme="light"] .btn--ghost:hover { border-color: var(--core-purple); color: var(--core-purple); background: rgba(var(--deep-night-rgb),0.8) !important; } /* homepage: pillar numbers, card metadata, hero/course subtitles */ :root[data-theme="light"] .ish-pillar__num { color: rgba(var(--mid-amethyst-rgb),0.32); } :root[data-theme="light"] .ish-hero__sub { color: rgba(var(--moon-white-rgb),0.78); } :root[data-theme="light"] .ish-ins-card__meta { color: rgba(var(--moon-white-rgb),0.55); } :root[data-theme="light"] .ish-ins-card__img img { opacity: 1; } :root[data-theme="light"] .ish-course-card__sub { color: rgba(var(--moon-white-rgb),0.75); } /* photo cards/banners: solid footing under dark text, photo clear above */ :root[data-theme="light"] .ish-course-card__ov { background: linear-gradient(to top, rgba(var(--bg-rgb),0.97) 0%, rgba(var(--bg-rgb),0.55) 45%, rgba(var(--bg-rgb),0.06) 100%); } :root[data-theme="light"] .ish-flagship__ov { background: linear-gradient(to top, rgba(var(--bg-rgb),0.96) 8%, rgba(var(--bg-rgb),0.6) 55%, rgba(var(--bg-rgb),0.12) 100%); } /* footer: copyright + column headers were near-invisible */ :root[data-theme="light"] .isy-footer__copy { color: rgba(var(--moon-white-rgb),0.55); } :root[data-theme="light"] .isy-footer__col h5 { color: rgba(var(--soft-violet-rgb),0.85); } /* workbook cards: gold metadata + labels were too faint on light */ :root[data-theme="light"] .isy-wbs-spread__num { color: rgba(var(--gold-rgb),0.75); } :root[data-theme="light"] .isy-wbs-card__meta { color: rgba(var(--gold-rgb),0.9); } :root[data-theme="light"] .isy-wbs-card__course-label { color: rgba(var(--moon-white-rgb),0.55); } :root[data-theme="light"] .isy-wbs-spread__badge--pages { color: rgba(var(--gold-rgb),0.9); border-color: rgba(var(--gold-rgb),0.35); } /* workbook cover previews: dark-tuned gradients turn to pale mush on light — give the mini covers a saturated lavender presence instead */ :root[data-theme="light"] .isy-wbs-spread--standalone .isy-wbs-spread__left { background: linear-gradient(155deg, rgba(var(--core-purple-rgb),0.32), rgba(var(--deep-iris-rgb),0.9)); } :root[data-theme="light"] .isy-wbs-spread--course .isy-wbs-spread__left { background: linear-gradient(155deg, rgba(var(--info-deep-rgb),0.35), rgba(var(--deep-iris-rgb),0.9)); } :root[data-theme="light"] .isy-wbs-spread__heading { color: rgba(var(--moon-white-rgb),0.9); } :root[data-theme="light"] .isy-wbs-spread__spine { background: linear-gradient(180deg, rgba(var(--core-purple-rgb),0.6), rgba(var(--deep-iris-rgb),0.4)); } :root[data-theme="light"] .isy-wbs-spread__tl { background: rgba(var(--core-purple-rgb),0.35); } :root[data-theme="light"] .isy-wbs-spread__rl { background: rgba(var(--core-purple-rgb),0.22); }