/* ============================================================ LiveQ Design Kit — tokens.css Custom properties only. Consumed by components.css + screens. Palette derived from aipowerpack.org (index.html). ------------------------------------------------------------ PRIMARY ACCENT = magenta #be2f9f. Rationale: it is the source site's signature brand hue (the centre of the hero wordmark gradient) and — crucially — it is NOT a traffic-light colour. Blue / green / red all carry meaning in a classroom signalling system, so reserving those for LISTEN / WORK / ALERT and giving the *brand* a hue that can never be mistaken for a state keeps decoration and meaning cleanly separate. Magenta also sits clear of Liv's royal-blue jacket, so the mascot never reads as a status light. ------------------------------------------------------------ Colours are written as hex/rgb (not oklch) on purpose: the student surface runs in WeChat's in-app webview on mid-range Androids, where older Chromium builds lack oklch(). Hues were *derived* in oklch (state bases ≈ L 0.58, C 0.15, hues 235 / 150 / 28) then pinned to hex for compatibility. ============================================================ */ /* ---- self-hosted fonts (no CDN; China-network safe) ---- */ /* Only the 400 masters are shipped here. Drop bricolage-600/700/800 and instrument-500/600 into assets/fonts/ to upgrade weights; until then heavier weights are synthesised from 400. */ @font-face{ font-family:'Bricolage Grotesque';font-style:normal;font-weight:400; font-display:swap;src:url('assets/fonts/bricolage-400.ttf') format('truetype'); } @font-face{ font-family:'Instrument Sans';font-style:normal;font-weight:400; font-display:swap;src:url('assets/fonts/instrument-400.ttf') format('truetype'); } /* Noto Sans SC — self-hosted SUBSET covering the app's fixed Chinese UI strings (the wellbeing line, labels). Subsetting keeps this a few KB instead of ~8MB: the full face is unnecessary because student-typed Chinese renders in the device font, which every phone in this cohort has. Without this, the Chinese mirror line rendered as tofu boxes on any device lacking a CJK font. Regenerate with: pyftsubset NotoSansSC-Regular.otf --text="" \ --output-file=assets/fonts/noto-sans-sc-subset.woff2 --flavor=woff2 */ @font-face{ font-family:'Noto Sans SC';font-style:normal;font-weight:400; font-display:swap;src:url('assets/fonts/noto-sans-sc-subset.woff2') format('woff2'); } :root{ /* ===================== PALETTE ===================== */ /* parchment backgrounds + ink (from the source site) */ --lq-bg: #f4ede2; /* page */ --lq-bg-sunk: #ece2d2; /* recessed panels, wells */ --lq-surface: #fffdf8; /* cards (warm white) */ --lq-surface-2: #f7f0e6; /* secondary cards */ --lq-ink: #1c1a15; /* primary text */ --lq-ink-2: #5c5648; /* secondary text */ --lq-ink-3: #8a8072; /* muted / meta */ --lq-line: #e6ddce; /* hairline borders */ --lq-line-2: rgba(28,26,21,.12); /* primary accent — magenta (brand, never a state) */ --lq-primary: #be2f9f; --lq-primary-ink: #8f2077; /* text/icon on light, AA on parchment */ --lq-primary-tint: #f7e2f1; /* soft brand background */ --lq-on-primary: #ffffff; /* ===================== SEMANTIC STATE COLOURS ===================== Reserved EXCLUSIVELY for meaning. Never used decoratively. Each: -base (fills/borders) · -ink (text on tint, AA) · -tint (bg) */ /* LISTEN — attention / "look up" */ --lq-listen: #1479c9; --lq-listen-ink: #0d5790; --lq-listen-tint: #e1eefb; --lq-on-listen: #ffffff; /* WORK — activity / timer running */ --lq-work: #2f9e5e; --lq-work-ink: #1c6b3e; --lq-work-tint: #e3f4ea; --lq-on-work: #ffffff; /* ALERT — moderation / urgent */ --lq-alert: #d5382f; --lq-alert-ink: #9c261e; --lq-alert-tint: #fbe5e3; --lq-on-alert: #ffffff; /* neutral / closed state (ambient, no urgency) */ --lq-neutral: #8a8072; --lq-neutral-tint: #efe7db; /* ===================== TYPE ===================== */ --lq-font-display:'Bricolage Grotesque','Noto Sans SC',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --lq-font-body:'Instrument Sans','Noto Sans SC',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --lq-font-mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace; --lq-w-reg:400; --lq-w-med:500; --lq-w-semi:600; --lq-w-bold:700; --lq-w-black:800; /* Student scale — comfortable, 360px phones */ --lq-fs-micro:12px; --lq-fs-caption:13px; --lq-fs-body:16px; /* base reading size on phone */ --lq-fs-body-lg:18px; --lq-fs-title:22px; --lq-fs-headline:28px; --lq-fs-display:34px; --lq-lh-tight:1.08; --lq-lh-snug:1.3; --lq-lh-body:1.5; /* Teacher scale — compact, dense desktop dashboard */ --lq-fs-c-micro:11px; --lq-fs-c-label:12px; --lq-fs-c-body:13px; --lq-fs-c-body-lg:14px; --lq-fs-c-title:16px; --lq-fs-c-headline:21px; /* Projector scale — readable from 10–15 m on washed-out hardware. Sized for a 1920-wide render; digits dominate the room. */ --lq-fs-proj-label:32px; --lq-fs-proj-body:44px; --lq-fs-proj-mode:80px; /* LISTEN / WORK word */ --lq-fs-proj-title:88px; /* broadcast takeover heading */ --lq-fs-proj-headline:120px; --lq-fs-proj-timer:220px; /* countdown digits, back-row legible */ /* ===================== SPACING ===================== */ /* comfortable — student surfaces (big taps, breathing room) */ --lq-s-1:4px; --lq-s-2:8px; --lq-s-3:12px; --lq-s-4:16px; --lq-s-5:20px; --lq-s-6:24px; --lq-s-7:32px; --lq-s-8:40px; --lq-s-9:56px; --lq-s-10:72px; /* compact — teacher dashboard (tight queues + meters) */ --lq-c-1:2px; --lq-c-2:4px; --lq-c-3:6px; --lq-c-4:8px; --lq-c-5:12px; --lq-c-6:16px; --lq-c-7:20px; --lq-c-8:28px; /* ===================== RADIUS (rounded-card feel) ===================== */ --lq-r-xs:8px; --lq-r-sm:11px; --lq-r-md:14px; --lq-r-lg:18px; --lq-r-xl:22px; --lq-r-2xl:28px; --lq-r-pill:999px; /* ===================== ELEVATION ===================== */ --lq-shadow-sm:0 2px 8px rgba(90,60,40,.08); --lq-shadow-md:0 14px 34px rgba(90,60,40,.10); --lq-shadow-lg:0 22px 46px rgba(90,60,40,.16); /* ===================== INTERACTION ===================== */ --lq-touch-min:44px; /* never smaller (finger target) */ --lq-focus-ring:0 0 0 3px rgba(190,47,159,.42); --lq-tap-fade:transform .12s ease, box-shadow .12s ease; }