/* theme.css — light-theme overrides + the Auto/Light/Dark toggle. Selectors use html[data-theme="light"] (specificity 0,1,1) so they OUTRANK each page's :root (0,1,0) no matter the stylesheet load order. The pages keep their dark :root tokens; these only apply when is set. */ html[data-theme="light"]{ /* index.html token names */ --bg:#f4eeff; --bg-2:#ece2ff; --panel:rgba(255,255,255,.58); --panel-2:rgba(255,255,255,.74); --line:rgba(60,50,110,.16); --ink:#241f3a; --muted:#5b5680; --muted-2:#847fa6; /* archive.html / arcade / game token names */ --space:#f4eeff; --glass:rgba(255,255,255,.58); --soft:#5b5680; } /* vibrant cream → lilac shell (applies to every page's body) */ html[data-theme="light"] body{ background:linear-gradient(160deg,#fff4ec 0%,#f6efff 46%,#ece0ff 100%) !important; background-attachment:fixed; } /* keep the aurora colourful but gentle, so the glass reads as frosted */ html[data-theme="light"] .aurora{opacity:.5} html[data-theme="light"] .vignette{ background:radial-gradient(120% 80% at 50% -10%,transparent 48%,rgba(150,130,205,.14) 100%) !important; } /* frosted glass + soft depth — preserve the glassy, 3D feel on light */ html[data-theme="light"] .card, html[data-theme="light"] .pillar, html[data-theme="light"] .gate, html[data-theme="light"] .tile, html[data-theme="light"] .panel{ box-shadow:0 18px 46px -24px rgba(80,60,150,.50) !important; } html[data-theme="light"] .card:hover, html[data-theme="light"] .tile:hover{ border-color:rgba(80,60,150,.30) !important; box-shadow:0 26px 60px -26px rgba(80,60,150,.62) !important; } /* hardcoded dark surfaces → light equivalents */ html[data-theme="light"] header.nav.scrolled{background:rgba(255,255,255,.74) !important; border-bottom-color:var(--line)} html[data-theme="light"] .mobile-menu{background:rgba(255,255,255,.94) !important} html[data-theme="light"] .menu-btn{background:rgba(255,255,255,.6) !important} html[data-theme="light"] .stat{background:rgba(255,255,255,.6) !important} html[data-theme="light"] .pillar{background:rgba(255,255,255,.58) !important} html[data-theme="light"] .file{background:rgba(255,255,255,.62) !important} html[data-theme="light"] input{background:rgba(255,255,255,.78) !important; color:var(--ink)} html[data-theme="light"] .cover{background:linear-gradient(120deg,#e9e2ff,#dcf5ef) !important} html[data-theme="light"] .btn-ghost:hover{border-color:rgba(60,50,110,.28) !important} /* game-specific translucent fills that were white-on-dark */ html[data-theme="light"] .ex{background:rgba(120,90,200,.08) !important} html[data-theme="light"] .slot:not(.filled){background:rgba(120,90,200,.13) !important; box-shadow:inset 0 0 0 2px rgba(60,50,110,.32)} html[data-theme="light"] .x, html[data-theme="light"] .audio{background:rgba(60,50,110,.10) !important} /* ---- Auto / Light / Dark toggle ---- */ #elc-theme-toggle{ position:fixed; z-index:9999; right:14px; bottom:14px; display:flex; gap:2px; padding:4px; border-radius:999px; background:var(--panel-2,rgba(255,255,255,.1)); border:1px solid var(--line,rgba(255,255,255,.14)); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); box-shadow:0 10px 28px rgba(40,30,80,.22); font-family:var(--body,system-ui,sans-serif); } #elc-theme-toggle button{ all:unset; cursor:pointer; width:36px; height:32px; display:grid; place-items:center; border-radius:999px; font-size:13px; font-weight:700; color:var(--muted,#9a96c4); transition:.2s; } #elc-theme-toggle button:hover{color:var(--ink,#fff)} #elc-theme-toggle button.active{ background:linear-gradient(110deg,var(--practise,#8b6cff),var(--use,#1fc4b6)); color:#fff; box-shadow:0 4px 14px rgba(139,108,255,.4); } #elc-theme-toggle .lbl{font-size:10.5px; letter-spacing:.06em; padding:0 8px; width:auto} @media (prefers-reduced-motion:reduce){#elc-theme-toggle button{transition:none}} /* ---- membership tiers on the home page (#club) ---- */ html[data-theme="light"] .club-wrap{ background:linear-gradient(160deg,rgba(255,205,70,.16),rgba(139,108,255,.12) 55%,rgba(255,255,255,.45)) !important; border-color:rgba(60,50,110,.12) !important; } /* Starter (Transcript) — clean frosted white card */ html[data-theme="light"] .tier{ background:rgba(255,255,255,.66) !important; border-color:rgba(60,50,110,.14) !important; box-shadow:0 18px 46px -26px rgba(80,60,150,.45) !important; } /* Fluency Club — clearly highlighted, warm gold glass */ html[data-theme="light"] .tier.featured-tier{ background:linear-gradient(165deg,rgba(255,231,176,.92),rgba(255,255,255,.72)) !important; border-color:rgba(240,160,30,.6) !important; box-shadow:0 28px 64px -24px rgba(240,160,30,.55) !important; } html[data-theme="light"] .tier:hover{border-color:rgba(240,160,30,.45) !important} /* readable accents on light */ html[data-theme="light"] .tier .ribbon{color:#b07514; border-color:rgba(240,160,30,.5)} html[data-theme="light"] .tier .ribbon.plain{color:var(--muted); border-color:var(--line)} html[data-theme="light"] .tier .trial{color:#0f9b90} html[data-theme="light"] .tier li svg{color:#0f9b90} html[data-theme="light"] .legend .trial-note{color:#0f9b90} html[data-theme="light"] .club-glow{opacity:.4} /* ---- Practice Arcade / Archive top bar + tabs + upsell (token-driven, theme-safe) ---- */ html[data-theme="light"] .tabs a.active, html[data-theme="light"] .acct .out:hover{color:#06121f} html[data-theme="light"] .upsell{background:linear-gradient(120deg,rgba(139,108,255,.14),rgba(31,196,182,.12)) !important} /* clue-room: calm the background glow on light so relics read crisply */ html[data-theme="light"] #stagebg{opacity:.4} /* ---- Clue Room game: full light-theme parity (premium, contrasting) ---- */ /* soft violet depth instead of heavy black shadow on glass surfaces */ html[data-theme="light"] .card-glass{box-shadow:0 18px 46px -24px rgba(80,60,150,.5) !important} /* progress + accents that washed out on light */ html[data-theme="light"] .dots i{background:rgba(60,50,110,.18); box-shadow:inset 0 0 0 1px rgba(60,50,110,.25)} html[data-theme="light"] .pill .ep{color:#0f9b90} html[data-theme="light"] .frac, html[data-theme="light"] .kick{color:#c98a12} html[data-theme="light"] .keeper{color:#b9791b} /* scrims become bright frosted glass, not dark veils */ html[data-theme="light"] .modal{background:rgba(245,239,255,.55) !important} html[data-theme="light"] .intro{background:radial-gradient(120% 90% at 50% 0%,rgba(139,108,255,.18),rgba(245,239,255,.82)) !important} /* warm info card + secondary action button on light */ html[data-theme="light"] .oriva{background:rgba(255,255,255,.62) !important; border:1px solid rgba(60,50,110,.14) !important} html[data-theme="light"] .actions a.btn[href="/practice-arcade.html"]{background:rgba(60,50,110,.08) !important; box-shadow:inset 0 0 0 1px rgba(60,50,110,.16)} /* night banner reads on a bright sky */ html[data-theme="light"] .nightbanner .big{background:linear-gradient(100deg,#2a2150,#d98a14) !important; filter:drop-shadow(0 0 18px rgba(240,160,30,.4))} html[data-theme="light"] .nightbanner .small{color:#2a2150; text-shadow:none} /* ---- smooth, premium theme transition (surfaces without transform hovers) ---- */ @media (prefers-reduced-motion:no-preference){ body, header.nav, .gate, .hint, .menu, .tabs, .upsell, .pill, .dots i{ transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease, color .35s ease; } } /* solve-the-sentence feedback (outside the card) on light */ html[data-theme="light"] .sb-msg.ok{color:#0f9b90} html[data-theme="light"] .sb-msg.nudge{color:#c98a12} /* solve card: keep every element defined on light theme */ html[data-theme="light"] .reset{box-shadow:inset 0 0 0 1.8px rgba(60,50,110,.30)} html[data-theme="light"] .reset:hover{box-shadow:inset 0 0 0 1.8px #0f9b90} html[data-theme="light"] #puzzle .panel{border-color:rgba(60,50,110,.18)} html[data-theme="light"] .sentence{color:#241f3a} /* In-menu placement (mobile): sits inline inside the slide-down menu */ #elc-theme-toggle.in-menu{position:static;right:auto;bottom:auto;z-index:auto;box-shadow:none} @media (max-width:1080px){#elc-theme-toggle:not(.in-menu){opacity:0;pointer-events:none}}