/* ════════════════════════════════════════════════════════════ AURORA SKIN (preview): the landing-page look, inside the app. Fully reversible: applies ONLY when . Toggle it in Settings or the side menu. To remove the feature entirely, delete this file, its in app.html, and the skin toggle lines marked "aurora skin" in app.html. ════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap'); html[data-skin="aurora"]{ --bg:#070b18;--panel:#101a36;--ink:#eef1fb;--muted:#9aa5c3; --line:#212e52;--accent:#9d8fff;--accent2:#ffb454;--gold:#ffb454; --accent-soft:#7c6bff26;--good:#3ce0a0;--bad:#ff6b6b;--warn:#ffb454; --grad:linear-gradient(135deg,#7c6bff,#5a8bff); --wash:#7c6bff1a;--stem:#8fa0d8; --shadow:0 1px 4px #01030a66,0 8px 28px #01030a55; --shadow-lg:0 18px 55px #01030a88; --font-display:"Space Grotesk","Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; } /* aurora background: violet + blue + teal glows over the dark base */ html[data-skin="aurora"] body{ background-color:var(--bg); background-image: radial-gradient(760px 520px at 12% -6%,#7c6bff30,transparent 62%), radial-gradient(900px 600px at 92% 4%,#5a8bff2a,transparent 60%), radial-gradient(640px 480px at 74% 96%,#3ce0d01c,transparent 62%), url("stem-bg-dark.svg"); background-repeat:no-repeat,no-repeat,no-repeat,repeat; background-size:100% 900px,100% 900px,100% 900px,600px 600px; } /* glassy panels and header, like the landing page cards */ html[data-skin="aurora"] .bar{background:#070b18cc;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} html[data-skin="aurora"] .rail-card, html[data-skin="aurora"] .subj-card, html[data-skin="aurora"] .course-card, html[data-skin="aurora"] .ach-card, html[data-skin="aurora"] .side-drawer, html[data-skin="aurora"] .stat-tile{ background:linear-gradient(165deg,#ffffff10,#ffffff08); border-color:var(--line); } html[data-skin="aurora"] .rail-card:hover, html[data-skin="aurora"] .subj-card:hover, html[data-skin="aurora"] .course-card:hover{border-color:#3a4a7d} /* hero banner: aurora gradient instead of navy */ html[data-skin="aurora"] .learn-hero{ background: radial-gradient(420px 260px at 88% 0%,#3ce0d033,transparent 65%), linear-gradient(135deg,#4c3dd4,#5a8bff); } /* amber CTAs, like the landing page */ html[data-skin="aurora"] .lh-btn, html[data-skin="aurora"] .nav-cta{ background:linear-gradient(135deg,#ffb454,#ff8a3d);color:#2b1503; } /* gradient shimmer on the big page titles */ html[data-skin="aurora"] .page-title{ background:linear-gradient(100deg,#eef1fb 30%,#a78bfa 55%,#3ce0d0 80%); background-size:200% auto;-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* inputs on dark glass */ html[data-skin="aurora"] input, html[data-skin="aurora"] select, html[data-skin="aurora"] textarea{background:#0c1329;border-color:var(--line);color:var(--ink)} @media(prefers-reduced-motion:reduce){ html[data-skin="aurora"] .page-title{animation:none} }