/* ============================================================================ LearnIt — shared design system (tokens + components) Dark premium theme. Import on every page: Pair with learnit-icons.js for the icon set. Built on the existing brand palette (yearhub.css): deep teal-navy + #9bbdd4 + Instrument Serif/Inter. ========================================================================== */ :root{ /* ---- base surfaces ---- */ --li-bg: hsl(201, 100%, 13%); --li-bg-2: hsl(201, 86%, 10%); --li-bg-deep: #00080f; --li-ink: #000a14; /* ---- glass surfaces ---- */ --li-surface: rgba(255,255,255,0.035); --li-surface-2: rgba(255,255,255,0.06); --li-surface-hover: rgba(255,255,255,0.085); --li-border: rgba(255,255,255,0.09); --li-border-strong: rgba(255,255,255,0.18); /* ---- text ---- */ --li-text: #f3f7fb; --li-text-soft: hsl(208, 18%, 80%); --li-text-muted: hsl(208, 14%, 64%); --li-text-dim: hsl(208, 12%, 48%); /* ---- accents ---- */ --li-accent: #9bbdd4; --li-accent-2: #6ea8d8; --li-accent-deep: #3f78c0; --li-accent-grad: linear-gradient(135deg, #7fb0de 0%, #3f78c0 100%); --li-accent-soft: rgba(155,189,212,0.14); --li-gold: #d8b56c; --li-gold-soft: rgba(216,181,108,0.13); --li-gold-border: rgba(216,181,108,0.40); /* ---- semantic ---- */ --li-good: #6fd3a6; --li-good-soft: rgba(111,211,166,0.14); --li-warn: #e7bb5e; --li-bad: #ec8d8d; /* ---- subject hues (for icon tiles) ---- */ --li-maths:#5b9bd5; --li-english:#9b8bd6; --li-hsie:#6cb6c9; --li-history:#caa46a; --li-science:#5fc59a; --li-sor:#c79ad0; --li-hms:#e29a86; /* ---- type ---- */ --li-font-display:'Instrument Serif', Georgia, 'Times New Roman', serif; --li-font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ---- radius / shadow / motion ---- */ --li-r-xs:8px; --li-r-sm:12px; --li-r:16px; --li-r-lg:22px; --li-r-xl:28px; --li-r-pill:999px; --li-shadow-1:0 2px 10px rgba(0,0,0,0.22); --li-shadow-2:0 14px 44px rgba(0,0,0,0.38); --li-shadow-glow:0 0 0 1px rgba(155,189,212,0.18), 0 14px 44px rgba(0,0,0,0.4); --li-ease:cubic-bezier(.22,1,.36,1); --li-t:.34s var(--li-ease); } /* ---------- page base (opt-in via .li-page on ) ---------- */ .li-page{ margin:0; color:var(--li-text); font-family:var(--li-font); background: radial-gradient(820px 560px at 6% -8%, rgba(155,139,214,0.20), transparent 56%), /* violet */ radial-gradient(720px 560px at 96% 4%, rgba(95,197,154,0.15), transparent 55%), /* green */ radial-gradient(1000px 820px at 78% 116%, rgba(108,182,201,0.17), transparent 56%), /* teal */ radial-gradient(620px 520px at 26% 104%, rgba(216,181,108,0.09), transparent 60%), /* gold */ linear-gradient(180deg, var(--li-bg) 0%, var(--li-bg-2) 60%, var(--li-ink) 100%); background-attachment:fixed; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* ---------- typography helpers ---------- */ .li-display{ font-family:var(--li-font-display); font-weight:400; line-height:1.04; letter-spacing:-.5px; } .li-display em{ font-style:italic; color:var(--li-accent); } .li-kicker{ font-size:11px; font-weight:700; letter-spacing:2.4px; text-transform:uppercase; color:var(--li-accent); } .li-muted{ color:var(--li-text-muted); } .li-dim{ color:var(--li-text-dim); } /* ---------- icon primitives ---------- */ .li-ico{ display:inline-flex; width:1em; height:1em; vertical-align:-0.14em; } .li-ico svg{ width:100%; height:100%; display:block; } .li-ico svg [stroke]{ stroke:currentColor; } .li-ico svg [fill]:not([fill="none"]){ fill:currentColor; } .li-icotile{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:52px; height:52px; border-radius:14px; font-size:26px; background:var(--li-surface-2); border:1px solid var(--li-border); color:var(--li-accent); box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); } .li-icotile.sm{ width:40px; height:40px; border-radius:11px; font-size:20px; } /* ---------- card ---------- */ .li-card{ position:relative; background:var(--li-surface); border:1px solid var(--li-border); border-radius:var(--li-r-lg); box-shadow:var(--li-shadow-1); backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%); transition:transform var(--li-t), background var(--li-t), border-color var(--li-t), box-shadow var(--li-t); } .li-card.pad{ padding:24px 26px; } a.li-card{ text-decoration:none; color:inherit; display:block; } .li-card.hover:hover, a.li-card:hover{ transform:translateY(-4px); background:var(--li-surface-hover); border-color:var(--li-border-strong); box-shadow:var(--li-shadow-2); } .li-card.accent-top::before{ content:''; position:absolute; inset:0 0 auto 0; height:3px; border-radius:var(--li-r-lg) var(--li-r-lg) 0 0; background:var(--li-accent-grad); opacity:.85; } /* ---- Direction-B colour-coded cards: add .tinted (+ optional --yc) or a .subj-* class ---- */ .li-card.tinted::before{ content:''; position:absolute; inset:0 0 auto 0; height:3px; border-radius:var(--li-r-lg) var(--li-r-lg) 0 0; background:var(--yc, var(--li-accent)); opacity:.9; } .li-card.tinted:hover{ border-color:var(--yc, var(--li-border-strong)); } .li-card.tinted .li-icotile{ background:var(--yc-soft, var(--li-surface-2)); color:var(--yc, var(--li-accent)); } .li-card.subj-maths { --yc:var(--li-maths); --yc-soft:rgba(91,155,213,0.15); } .li-card.subj-english{ --yc:var(--li-english); --yc-soft:rgba(155,139,214,0.16); } .li-card.subj-hsie { --yc:var(--li-hsie); --yc-soft:rgba(108,182,201,0.15); } .li-card.subj-history{ --yc:var(--li-history); --yc-soft:rgba(202,164,106,0.15); } .li-card.subj-science{ --yc:var(--li-science); --yc-soft:rgba(95,197,154,0.15); } .li-card.subj-sor { --yc:var(--li-sor); --yc-soft:rgba(199,154,208,0.15); } .li-card.subj-hms { --yc:var(--li-hms); --yc-soft:rgba(226,154,134,0.15); } /* ---------- buttons ---------- */ .li-btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--li-font); font-weight:600; font-size:14.5px; padding:12px 20px; border-radius:var(--li-r-pill); border:1px solid var(--li-border); cursor:pointer; background:var(--li-surface-2); color:var(--li-text); text-decoration:none; transition:all var(--li-t); white-space:nowrap; } .li-btn:hover{ background:var(--li-surface-hover); border-color:var(--li-border-strong); transform:translateY(-1px); } .li-btn .li-ico{ font-size:18px; } .li-btn--primary{ background:var(--li-accent-grad); border-color:transparent; color:#06223f; font-weight:700; box-shadow:0 8px 24px rgba(63,120,192,0.34); } .li-btn--primary:hover{ filter:brightness(1.06); box-shadow:0 12px 30px rgba(63,120,192,0.46); } .li-btn--ghost{ background:transparent; } .li-btn--gold{ background:var(--li-gold-soft); border-color:var(--li-gold-border); color:var(--li-gold); } /* ---------- pills / badges / chips ---------- */ .li-pill{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; padding:5px 12px; border-radius:var(--li-r-pill); background:var(--li-gold-soft); border:1px solid var(--li-gold-border); color:var(--li-gold); } .li-badge{ display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 9px; border-radius:var(--li-r-pill); } .li-badge.live{ background:var(--li-good-soft); color:var(--li-good); } .li-badge.accent{ background:var(--li-accent-soft); color:var(--li-accent); } .li-chip{ display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:600; font-size:14px; cursor:pointer; padding:9px 16px; border-radius:var(--li-r-pill); background:var(--li-surface-2); border:1.5px solid var(--li-border); color:var(--li-text-soft); transition:all var(--li-t); } .li-chip:hover{ border-color:var(--li-border-strong); color:var(--li-text); } .li-chip.on{ background:var(--li-accent-soft); border-color:var(--li-accent); color:#fff; } /* ---------- inputs ---------- */ .li-input{ width:100%; box-sizing:border-box; font:inherit; font-size:15px; color:var(--li-text); padding:13px 15px; border-radius:var(--li-r-sm); border:1px solid var(--li-border); background:rgba(255,255,255,0.04); transition:all var(--li-t); } .li-input::placeholder{ color:var(--li-text-dim); } .li-input:focus{ outline:none; border-color:var(--li-accent); box-shadow:0 0 0 3px var(--li-accent-soft); background:rgba(255,255,255,0.06); } /* ---------- tabs (segmented) ---------- */ .li-tabs{ display:inline-flex; gap:4px; padding:4px; background:var(--li-surface); border:1px solid var(--li-border); border-radius:var(--li-r-pill); } .li-tab{ display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:600; font-size:14px; cursor:pointer; border:0; padding:9px 18px; border-radius:var(--li-r-pill); background:transparent; color:var(--li-text-muted); transition:all var(--li-t); } .li-tab:hover{ color:var(--li-text); } .li-tab.on{ background:var(--li-accent-grad); color:#06223f; font-weight:700; box-shadow:0 6px 18px rgba(63,120,192,0.3); } /* ---------- divider + misc ---------- */ .li-divider{ height:1px; background:var(--li-border); border:0; margin:18px 0; } .li-progress{ height:6px; border-radius:var(--li-r-pill); background:rgba(255,255,255,0.06); overflow:hidden; } .li-progress > span{ display:block; height:100%; border-radius:inherit; background:var(--li-accent-grad); } .li-inf{ display:inline-flex; align-items:center; gap:5px; color:var(--li-accent); font-weight:600; } /* math variables (see learnit-mathvar.js) — italic serif, like HSC papers */ .mv{ font-style:italic; font-family:'Georgia','Times New Roman',serif; } /* aligned, stacked equation working (see learnit-mathfmt.js) — HSC marking style */ .li-eq{ display:inline-table; margin:.2em 0; vertical-align:top; } .li-eqr{ display:table-row; } .li-eq-l,.li-eq-o,.li-eq-r{ display:table-cell; vertical-align:baseline; padding:.06em 0; } .li-eq-l{ white-space:nowrap; } .li-eq-o{ padding-left:.35em; padding-right:.4em; } .li-eq-r{ overflow-wrap:anywhere; } /* shared site footer (see learnit-footer.js) */ .li-footer{ border-top:1px solid var(--li-border); margin-top:64px; padding:40px 24px 48px; background:rgba(0,8,16,0.35); color:var(--li-text-muted); font-family:var(--li-font); } .li-footer .li-foot-in{ max-width:1080px; margin:0 auto; display:flex; flex-wrap:wrap; gap:18px 32px; align-items:flex-start; justify-content:space-between; } .li-footer .li-foot-brand{ font-family:var(--li-font-display); font-size:26px; color:var(--li-text); } .li-footer .li-foot-brand em{ font-style:italic; color:var(--li-accent); } .li-footer .li-foot-tag{ font-size:13px; color:var(--li-text-muted); margin-top:4px; max-width:34ch; line-height:1.55; } .li-footer nav{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; } .li-footer nav a{ color:var(--li-text-soft); text-decoration:none; font-size:13.5px; transition:color var(--li-t); } .li-footer nav a:hover{ color:var(--li-accent); } .li-footer .li-foot-legal{ flex-basis:100%; border-top:1px solid var(--li-border); margin-top:8px; padding-top:16px; font-size:12px; color:var(--li-text-dim); line-height:1.6; } /* reduced motion */ @media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }