/* ============================================================ The Andalus Academy, Light ("white") theme overrides. Activated by adding the `light` class to . Works on every page that links this file (uses the same Tailwind utility classes + shared component classes). ============================================================ */ html.light { color-scheme: light; } html.light body { background-color: #F6F1E7 !important; color: #1F1B16 !important; } html.light ::selection { background: rgba(201,162,39,0.30); color: #3a2e08; } html.light ::-webkit-scrollbar-track { background: #EFE8DA; } html.light ::-webkit-scrollbar-thumb { border-color: #EFE8DA; } /* ---------- base surfaces ---------- */ html.light .bg-ink-900 { background-color: #F6F1E7; } html.light .bg-ink-800 { background-color: #EAE3D5; } html.light .bg-ink-800\/95 { background-color: rgba(255,255,255,0.96); } html.light .bg-ink-800\/90 { background-color: rgba(255,255,255,0.92); } html.light .bg-ink-800\/80 { background-color: rgba(255,255,255,0.90); } html.light .bg-ink-800\/70 { background-color: rgba(255,255,255,0.78); } html.light .bg-ink-800\/60 { background-color: rgba(255,255,255,0.66); } html.light .bg-ink-800\/50 { background-color: rgba(255,255,255,0.58); } html.light .bg-ink-800\/40 { background-color: rgba(255,255,255,0.50); } html.light .bg-ink-800\/30 { background-color: rgba(255,255,255,0.45); } html.light .bg-ink-700\/70 { background-color: rgba(255,255,255,0.85); } html.light .bg-ink-700\/50 { background-color: rgba(255,255,255,0.72); } html.light .bg-ink-700\/40 { background-color: rgba(255,255,255,0.68); } html.light .bg-ink-700\/20 { background-color: rgba(255,255,255,0.45); } html.light .bg-ink-900\/70 { background-color: rgba(246,241,231,0.70); } /* ---------- text ---------- */ html.light .text-parchment { color: #1F1B16; } html.light .text-parchment\/90 { color: rgba(31,27,22,0.9); } html.light .text-parchment\/85 { color: rgba(31,27,22,0.88); } html.light .text-parchment\/80 { color: rgba(31,27,22,0.85); } html.light .text-sand { color: #6E6453; } html.light .text-sand\/70 { color: rgba(110,100,83,0.85); } html.light .text-sand\/60 { color: rgba(110,100,83,0.75); } html.light .text-sand\/50 { color: rgba(110,100,83,0.65); } html.light .placeholder-sand\/50::placeholder { color: rgba(110,100,83,0.55); } /* gold text → deeper gold for contrast on cream */ html.light .text-gold-100, html.light .text-gold-200, html.light .text-gold-300, html.light .text-gold-300\/70, html.light .text-gold-400, html.light .text-gold-400\/70 { color: #836310; } /* deepened for AA (4.96:1) on cream */ html.light .text-gold-500\/40 { color: rgba(154,118,19,0.55); } /* gold gradient text → darker so it reads on light */ html.light .text-gold-gradient { background-image: linear-gradient(120deg, #8A6A14 0%, #C9A227 45%, #A9831C 60%, #8A6A14 100%); } /* ---------- borders (stronger so they show on cream) ---------- */ html.light .border-gold-500\/10 { border-color: rgba(201,162,39,0.22); } html.light .border-gold-500\/15 { border-color: rgba(201,162,39,0.28); } html.light .border-gold-500\/20 { border-color: rgba(201,162,39,0.32); } html.light .border-gold-500\/25 { border-color: rgba(201,162,39,0.38); } html.light .border-gold-500\/30 { border-color: rgba(201,162,39,0.45); } html.light .border-gold-500\/40 { border-color: rgba(201,162,39,0.55); } /* ---------- gradient stops (image frames / cards) ---------- */ html.light .from-ink-500 { --tw-gradient-from: #ECE4D5 var(--tw-gradient-from-position); --tw-gradient-to: rgb(236 228 213 / 0) var(--tw-gradient-to-position); } html.light .from-ink-600, html.light .from-ink-600\/60, html.light .from-ink-600\/80 { --tw-gradient-from: #EFE8DC var(--tw-gradient-from-position); --tw-gradient-to: rgb(239 232 220 / 0) var(--tw-gradient-to-position); } html.light .from-ink-700\/80 { --tw-gradient-from: #F2ECE0 var(--tw-gradient-from-position); --tw-gradient-to: rgb(242 236 224 / 0) var(--tw-gradient-to-position); } html.light .from-ink-900\/40 { --tw-gradient-from: rgba(246,241,231,0.4) var(--tw-gradient-from-position); --tw-gradient-to: rgb(246 241 231 / 0) var(--tw-gradient-to-position); } html.light .via-ink-700\/60 { --tw-gradient-to: rgb(236 228 213 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #ECE4D5 var(--tw-gradient-via-position), var(--tw-gradient-to); } html.light .to-ink-800, html.light .to-ink-800\/60, html.light .to-ink-800\/80 { --tw-gradient-to: #E4DCCB var(--tw-gradient-to-position); } html.light .to-ink-900 { --tw-gradient-to: #F6F1E7 var(--tw-gradient-to-position); } /* tone the big ambient glows down on light so they don't muddy */ html.light .bg-gold-600\/20 { background-color: rgba(169,131,28,0.12); } html.light .bg-gold-600\/10 { background-color: rgba(169,131,28,0.08); } html.light .bg-gold-500\/10 { background-color: rgba(201,162,39,0.10); } html.light .bg-gold-500\/5 { background-color: rgba(201,162,39,0.06); } html.light .bg-emerald-deep\/30 { background-color: rgba(46,139,111,0.14); } html.light .bg-emerald-deep\/20 { background-color: rgba(46,139,111,0.10); } /* geometric tessellation a touch stronger so it reads on cream */ html.light .geo-layer { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23A9831C' stroke-width='0.9' stroke-opacity='0.65'%3E%3Cpath d='M60 14 L106 60 L60 106 L14 60 Z'/%3E%3Cpath d='M92.5 27.5 L27.5 27.5 L27.5 92.5 L92.5 92.5 Z'/%3E%3Ccircle cx='60' cy='60' r='15'/%3E%3C/g%3E%3C/svg%3E"); } /* ============================================================ Shared component classes (auth + dashboards) ============================================================ */ html.light .label { color: #1F1B16; } html.light .field { background-color: #FFFFFF; color: #1F1B16; border-color: rgba(201,162,39,0.30); } html.light .field::placeholder { color: rgba(110,100,83,0.55); } html.light select.field { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6453' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 1rem; } html.light .card { background: rgba(255,255,255,0.72); border-color: rgba(201,162,39,0.22); } html.light .role-card-inner { background: rgba(255,255,255,0.7); border-color: rgba(201,162,39,0.25); } html.light .role-card input:checked + .role-card-inner { background: rgba(201,162,39,0.12); border-color: #C9A227; } html.light .pill-inner { color: #6E6453; border-color: rgba(201,162,39,0.30); } html.light .pill:hover .pill-inner { color: #1F1B16; } html.light .pill input:checked + .pill-inner { background: rgba(201,162,39,0.14); color: #7E6116; border-color: #C9A227; } html.light .seg-inner { background: #FFFFFF; color: #6E6453; border-color: rgba(201,162,39,0.30); } html.light .seg:hover .seg-inner { border-color: rgba(201,162,39,0.6); color: #1F1B16; } html.light .seg input:checked + .seg-inner { background: rgba(201,162,39,0.16); color: #7E6116; border-color: #C9A227; box-shadow: 0 8px 22px -14px rgba(154,118,19,0.5); } html.light .seg input:disabled + .seg-inner { opacity: .55; } /* date/time + select inputs read clearly on cream */ html.light input[type="date"].field, html.light input[type="datetime-local"].field, html.light input[type="time"].field { color: #1F1B16; } html.light input.field::-webkit-calendar-picker-indicator { filter: invert(0.45) sepia(1) saturate(3) hue-rotate(5deg); } html.light .toast { background: rgba(255,255,255,0.97); color: #7E6116; border-color: rgba(201,162,39,0.45); box-shadow: 0 16px 40px -16px rgba(80,60,10,0.35); } /* theme toggle button polish */ html.light [data-theme-toggle] { color: #9A7613; } /* ============================================================ Light theme, decorative depth so the Andalus detailing (stars, shooting stars, sparkles, glows, icons) stays visible, sharp and premium on the cream background. Many of these elements set white/pale colours inline, so we override with !important to recolour them for light. ============================================================ */ /* twinkling stars → warm gold dots with a soft glow */ html.light .star { background: #B68A1E !important; box-shadow: 0 0 4px rgba(154,118,19,0.55) !important; } /* shooting stars → gold/bronze trail with a warm glow */ html.light .shooting { background: linear-gradient(90deg, rgba(154,118,19,0), #B8860B 40%, #7E5E12 60%, rgba(154,118,19,0)) !important; filter: drop-shadow(0 0 5px rgba(154,118,19,0.55)) !important; } /* Star-of-Bethlehem sparkles → gold fills, darker centre, real depth */ html.light .asteroid { opacity: 0.72 !important; } html.light .asteroid svg { filter: drop-shadow(0 4px 10px rgba(120,90,10,0.32)) !important; } html.light .asteroid svg path { fill: #B68A1E !important; } html.light .asteroid svg line { stroke: #8A6A14 !important; stroke-opacity: 0.5 !important; } html.light .asteroid svg circle { fill: #6E5410 !important; } /* drifting gold motes in the logo intro */ html.light .mote { background-color: #B68A1E !important; } /* ambient colour glows: keep gentle depth visible on cream */ html.light .bg-gold-500\/25 { background-color: rgba(201,162,39,0.18); } html.light .bg-azure-500\/15 { background-color: rgba(74,104,156,0.16); } html.light .bg-violet\/10 { background-color: rgba(124,92,210,0.13); } html.light .bg-violet\/15 { background-color: rgba(124,92,210,0.15); } html.light .bg-teal\/10 { background-color: rgba(31,122,110,0.13); } html.light .bg-sky\/15 { background-color: rgba(47,111,174,0.14); } /* coloured subject / accent icons + labels, deepened so they meet WCAG AA (4.5:1) on the cream background, incl. the faded /70 metadata labels ("Ages 5 to 11", "Years 7 to 9", …) which were the weakest. */ html.light .text-sky, html.light .text-sky\/70 { color: #225F96; } html.light .text-coral, html.light .text-coral\/70 { color: #A93B25; } html.light .text-violet,html.light .text-violet\/70{ color: #6A45D0; } html.light .text-teal, html.light .text-teal\/70 { color: #156152; } html.light .text-amber, html.light .text-amber\/70 { color: #7A5A0C; } /* icon chip backgrounds (very faint /10 tints vanish on cream) */ html.light .bg-sky\/10 { background-color: rgba(44,115,184,0.13); } html.light .bg-coral\/10 { background-color: rgba(210,85,59,0.13); } html.light .bg-violet\/10 { background-color: rgba(106,69,208,0.13); } html.light .bg-teal\/10 { background-color: rgba(28,132,115,0.13); } html.light .bg-amber\/10 { background-color: rgba(176,125,8,0.13); } html.light .group:hover .bg-sky\/20 { background-color: rgba(44,115,184,0.2); } html.light .group:hover .bg-violet\/20 { background-color: rgba(106,69,208,0.2); } html.light .group:hover .bg-coral\/20 { background-color: rgba(210,85,59,0.2); } html.light .group:hover .bg-teal\/20 { background-color: rgba(28,132,115,0.2); } html.light .group:hover .bg-amber\/20 { background-color: rgba(176,125,8,0.2); } /* spinning khatam geometry, a touch stronger so it shows on cream */ html.light svg.geo-spin, html.light svg.geo-spin-rev { opacity: 0.3 !important; } /* card shadows: warm, soft depth instead of harsh black on cream */ html.light .shadow-xl, html.light .shadow-2xl { box-shadow: 0 18px 44px -20px rgba(120,90,10,0.28) !important; } /* ============================================================ Light theme, v2 polish. Fixes washed-out / muddy-grey sections and panels that were left un-mapped (so they kept their dark colour on cream), and lifts the decorative colour + detailing so light mode feels as crafted as dark mode. ============================================================ */ /* --- section washes & panels that previously stayed dark (muddy grey) --- */ html.light .bg-ink-900\/40 { background-color: rgba(236,228,214,0.55); } /* alternating-section tint */ html.light .bg-ink-900\/60 { background-color: rgba(236,228,214,0.72); } html.light .bg-ink-900\/80 { background-color: rgba(246,241,231,0.88); } html.light .bg-ink-700\/80 { background-color: rgba(255,255,255,0.90); } html.light .bg-ink-700\/30 { background-color: rgba(255,255,255,0.62); } /* "Full pricing details" */ /* feature panels: gradient stops left un-mapped, these were the muddy "Every subject includes" / "Need something else?" cards */ html.light .from-ink-600\/70 { --tw-gradient-from: #EFE8DC var(--tw-gradient-from-position); --tw-gradient-to: rgb(239 232 220 / 0) var(--tw-gradient-to-position); } html.light .to-emerald-deep\/20 { --tw-gradient-to: rgba(46,139,111,0.10) var(--tw-gradient-to-position); } html.light .to-emerald-deep\/30 { --tw-gradient-to: rgba(46,139,111,0.14) var(--tw-gradient-to-position); } /* --- "Who we help" stage cards: colour tints + borders were too faint --- */ html.light .from-sky\/\[0\.07\] { --tw-gradient-from: rgba(47,111,174,0.12) var(--tw-gradient-from-position); --tw-gradient-to: rgb(47 111 174 / 0) var(--tw-gradient-to-position); } html.light .from-teal\/\[0\.07\] { --tw-gradient-from: rgba(28,132,115,0.12) var(--tw-gradient-from-position); --tw-gradient-to: rgb(28 132 115 / 0) var(--tw-gradient-to-position); } html.light .from-violet\/\[0\.07\] { --tw-gradient-from: rgba(106,69,208,0.12) var(--tw-gradient-from-position); --tw-gradient-to: rgb(106 69 208 / 0) var(--tw-gradient-to-position); } html.light .from-amber\/\[0\.07\] { --tw-gradient-from: rgba(176,125,8,0.13) var(--tw-gradient-from-position); --tw-gradient-to: rgb(176 125 8 / 0) var(--tw-gradient-to-position); } html.light .from-coral\/\[0\.07\] { --tw-gradient-from: rgba(210,85,59,0.12) var(--tw-gradient-from-position); --tw-gradient-to: rgb(210 85 59 / 0) var(--tw-gradient-to-position); } /* stronger coloured borders so the stage cards have a real edge on cream */ html.light .border-sky\/20 { border-color: rgba(47,111,174,0.40); } html.light .border-teal\/20 { border-color: rgba(28,132,115,0.40); } html.light .border-violet\/20 { border-color: rgba(106,69,208,0.40); } html.light .border-amber\/20 { border-color: rgba(176,125,8,0.42); } html.light .border-coral\/20 { border-color: rgba(210,85,59,0.40); } /* coloured icon chips at /15 (pale tints vanish on cream) */ html.light .bg-teal\/15 { background-color: rgba(28,132,115,0.16); } html.light .bg-violet\/15 { background-color: rgba(106,69,208,0.16); } html.light .bg-amber\/15 { background-color: rgba(176,125,8,0.18); } html.light .bg-coral\/15 { background-color: rgba(210,85,59,0.16); } html.light .bg-emerald-soft\/15 { background-color: rgba(46,139,111,0.16); } html.light .text-emerald-soft { color: #1C7A5F; } /* --- ambient colour glows: lift so the depth is actually visible --- */ html.light .bg-gold-600\/20 { background-color: rgba(169,131,28,0.16); } html.light .bg-sky\/10 { background-color: rgba(47,111,174,0.12); } html.light .bg-amber\/\[0\.08\] { background-color: rgba(176,125,8,0.12); } html.light .bg-emerald-soft\/10 { background-color: rgba(46,139,111,0.12); } html.light .bg-teal\/\[0\.06\] { background-color: rgba(28,132,115,0.11); } /* --- geometric khatam tessellation: lift so the lattice reads on cream --- */ html.light .geo-layer { opacity: 0.18 !important; }