/* ===== Calibre design tokens ===== */ :root { /* Headline serif — swappable via tweaks */ --font-serif: "Instrument Serif", ui-serif, Georgia, serif; --font-serif-weight: 400; --font-serif-tracking: -0.01em; /* Default: dark lime theme (port of DALE) */ --bg: #0a0e14; --surface: #141820; --elevated: #1a1f29; --ink: #e6e8ee; --ink2: #c8cbd4; --muted: #8a92a3; --line: #1f2937; --line-soft: #2a3340; --accent: #a3e635; /* lime */ --accent-ink:#0a0e14; --accent2: #10b981; /* emerald */ --danger: #ef4444; --warning: #f59e0b; --info: #06b6d4; --purple: #a78bfa; --shadow-lift: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -8px rgba(0,0,0,0.7); --shadow-glow: 0 0 0 1px rgba(163,230,53,0.35), 0 12px 40px -8px rgba(163,230,53,0.25); --grad-accent: linear-gradient(135deg, #a3e635 0%, #10b981 100%); } /* Accent palette presets (used by tweaks) */ .theme-lime { --accent:#a3e635; --accent-ink:#0a0e14; --accent2:#10b981; } .theme-cyan { --accent:#22d3ee; --accent-ink:#001017; --accent2:#3b82f6; } .theme-violet{ --accent:#a78bfa; --accent-ink:#0d0820; --accent2:#ec4899; } .theme-amber { --accent:#f59e0b; --accent-ink:#1a0e00; --accent2:#ef4444; } /* Density */ .density-cozy { --pad-card: 1.5rem; --gap-stack: 1rem; } .density-compact{ --pad-card: 1rem; --gap-stack: 0.625rem;} /* Surface */ .theme-paper { --bg: #f6f5f0; --surface: #ffffff; --elevated: #ffffff; --ink: #131516; --ink2: #2a2d33; --muted: #6b7280; --line: #e6e3da; --line-soft: #f0ede4; } /* ===== Base ===== */ html, body { height: 100%; } body { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Numerals */ .tabular { font-variant-numeric: tabular-nums; } /* Serif headline overrides — applied alongside Tailwind's font-serif so the selected face's correct optical weight & tracking land per-font. */ .font-serif { font-family: var(--font-serif) !important; font-weight: var(--font-serif-weight, 400); letter-spacing: var(--font-serif-tracking, -0.01em); } /* Per-font calibration — Tailwind class on swapped by the tweaks panel */ .serif-instrument { --font-serif: "Instrument Serif", Georgia, serif; --font-serif-weight: 400; --font-serif-tracking: -0.01em; } .serif-dm { --font-serif: "DM Serif Display", Georgia, serif; --font-serif-weight: 400; --font-serif-tracking: -0.02em; } .serif-newsreader{ --font-serif: "Newsreader", Georgia, serif; --font-serif-weight: 500; --font-serif-tracking: -0.018em; } .serif-cormorant { --font-serif: "Cormorant Garamond", Georgia, serif;--font-serif-weight: 500; --font-serif-tracking: -0.014em; } .serif-bricolage { --font-serif: "Bricolage Grotesque", system-ui, sans-serif; --font-serif-weight: 600; --font-serif-tracking: -0.025em; } /* Background grid texture for landing */ .grid-bg { background-image: radial-gradient(circle at 20% 0%, rgba(163,230,53,0.10), transparent 50%), radial-gradient(circle at 80% 30%, rgba(16,185,129,0.10), transparent 55%), linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: auto, auto, 56px 56px, 56px 56px; background-position: 0 0, 0 0, -1px -1px, -1px -1px; } .dotgrid { background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 18px 18px; } .theme-paper .dotgrid { background-image: radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px); } /* Tubular dividers */ .divider-soft { border-color: var(--line); } /* Scrollbar (subtle) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line-soft); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: #3a4456; } /* Focus ring */ .focus-ring { outline: 2px solid var(--accent); outline-offset: 2px; } /* Selection */ ::selection { background: var(--accent); color: var(--accent-ink); } /* Subtle scanline / film for hero */ .scanlines::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 4px); pointer-events: none; } /* ===== Components ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; border-radius: 0.625rem; font-weight: 600; font-size: 0.875rem; border: 1px solid transparent; transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px -6px rgba(163,230,53,0.55); } .btn-primary:hover { filter: brightness(1.05); } .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-soft); } .btn-secondary:hover { background: var(--elevated); } .btn-ghost { background: transparent; color: var(--ink2); } .btn-ghost:hover { background: var(--surface); color: var(--ink); } .btn-danger { background: rgba(239,68,68,0.12); color: var(--danger); border-color: rgba(239,68,68,0.3); } .btn-danger:hover { background: rgba(239,68,68,0.2); } .btn-lg { padding: 0.875rem 1.25rem; font-size: 0.95rem; border-radius: 0.75rem; } .btn-sm { padding: 0.4rem 0.75rem; font-size: 0.8rem; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; } .card-elev { background: var(--elevated); box-shadow: var(--shadow-lift); } .chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 0.75rem; font-weight: 500; color: var(--ink2); white-space: nowrap; } .chip-accent { background: rgba(163,230,53,0.1); border-color: rgba(163,230,53,0.3); color: var(--accent); } .chip-emerald{ background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3); color: var(--accent2); } .chip-danger { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: var(--danger); } .chip-warn { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.3); color: var(--warning); } .chip-info { background: rgba(6,182,212,0.1); border-color: rgba(6,182,212,0.3); color: var(--info); } .chip-purple { background: rgba(167,139,250,0.1); border-color: rgba(167,139,250,0.3); color: var(--purple); } /* Tutor chat message blocks */ .tutor-msg { display: flex; flex-direction: column; gap: 0.75rem; } .tutor-msg-compact { gap: 0.625rem; } .tutor-msg-heading { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--ink); padding-left: 0.625rem; border-left: 2px solid var(--accent); line-height: 1.35; } .tutor-msg-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem; border-radius: 0.375rem; font-size: 0.625rem; font-weight: 700; background: rgba(163,230,53,0.12); color: var(--accent); border: 1px solid rgba(163,230,53,0.25); flex-shrink: 0; } .tutor-msg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .tutor-msg-item { background: var(--bg); border: 1px solid var(--line); border-radius: 0.625rem; padding: 0.625rem 0.75rem; } .tutor-msg-label { font-size: 0.75rem; font-weight: 600; color: var(--ink); margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.375rem; } .tutor-msg-step { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 999px; font-size: 0.625rem; font-weight: 700; background: var(--elevated); color: var(--accent); border: 1px solid var(--line-soft); } .tutor-msg-body { font-size: 0.8125rem; line-height: 1.55; color: var(--ink2); } .tutor-msg-compact .tutor-msg-body { font-size: 0.8125rem; } /* Input */ .input { width: 100%; background: var(--elevated); border: 1px solid var(--line-soft); border-radius: 0.625rem; padding: 0.625rem 0.875rem; color: var(--ink); font-size: 0.9rem; transition: border-color .15s ease, box-shadow .15s ease; } .input::placeholder { color: var(--muted); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(163,230,53,0.18); } /* Sidebar item */ .nav-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; color: var(--ink2); font-size: 0.875rem; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; } .nav-item:hover { background: var(--surface); color: var(--ink); } .nav-item.active { background: rgba(163,230,53,0.12); color: var(--accent); } /* Question option pill */ .opt { display: flex; align-items: flex-start; gap: 0.875rem; padding: 0.9rem 1rem; border: 1px solid var(--line-soft); border-radius: 0.875rem; background: var(--surface); cursor: pointer; transition: all .15s; text-align: left; width: 100%; } .opt:hover { border-color: rgba(163,230,53,0.4); background: var(--elevated); } .opt.selected { border-color: var(--accent); background: rgba(163,230,53,0.06); box-shadow: 0 0 0 1px var(--accent) inset; } .opt.correct { border-color: rgba(16,185,129,0.6); background: rgba(16,185,129,0.08); } .opt.wrong { border-color: rgba(239,68,68,0.6); background: rgba(239,68,68,0.06); } .opt-key { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.78rem; background: var(--elevated); border: 1px solid var(--line-soft); color: var(--ink2); } .opt.selected .opt-key { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .opt.correct .opt-key { background: var(--accent2); color: #000; border-color: var(--accent2); } .opt.wrong .opt-key { background: var(--danger); color: #fff; border-color: var(--danger); } /* Question navigator pills */ .qpill { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 0.78rem; font-weight: 600; background: var(--surface); border: 1px solid var(--line-soft); color: var(--ink2); cursor: pointer; transition: all .12s; position: relative; } .qpill:hover { background: var(--elevated); color: var(--ink); } .qpill.answered { background: rgba(163,230,53,0.14); border-color: rgba(163,230,53,0.35); color: var(--accent); } .qpill.flagged::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; background: var(--warning); border-radius: 50%; border: 2px solid var(--bg); } .qpill.current { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba(163,230,53,0.18); } /* Streak flame */ .flame { background: linear-gradient(180deg, #fef3c7 0%, #f59e0b 60%, #ef4444 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Glowing ring (around current rank/score) */ .glow-ring { box-shadow: 0 0 0 1px rgba(163,230,53,0.3), 0 0 28px -4px rgba(163,230,53,0.4), inset 0 0 24px -8px rgba(163,230,53,0.3); } /* Accent gradient text */ .txt-gradient { background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Marquee animation */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee { display: flex; gap: 3rem; animation: marquee 38s linear infinite; } @keyframes pulseDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.92); } } .pulse-dot { animation: pulseDot 1.6s ease-in-out infinite; } @keyframes spinSlow { to { transform: rotate(360deg); } } .spin-slow { animation: spinSlow 14s linear infinite; } /* Slide-up only (no opacity in keyframes so element stays visible even if the animation is interrupted by Tailwind-JIT style re-injection). */ @keyframes slideUp { from { transform: translateY(10px);} to { transform: none; } } .fade-up { opacity: 1; animation: slideUp .4s ease-out forwards; } .fade-up-d1 { opacity: 1; animation: slideUp .4s ease-out .06s forwards; } .fade-up-d2 { opacity: 1; animation: slideUp .4s ease-out .12s forwards; } .fade-up-d3 { opacity: 1; animation: slideUp .4s ease-out .18s forwards; } /* Mark text */ .markhi { background: linear-gradient(transparent 60%, rgba(163,230,53,0.32) 60%); padding: 0 2px; }