/* Hallmark · macrostructure: Feature Stack (sticky visual + scroll-synced steps, plus two card sliders) · H9 hero knobs: centrepiece=MOQI mascot (hand-built SVG, Tier B, animated, follows the pointer), scale=dominant, side=right of the copy, ground=WebGL silk (hero only), people chips=one round then rest * theme: custom · vibe: "white paper, one MOQI gradient, warm chat" · paper: oklch(99.3% 0.003 205) · accent: oklch(75.8% 0.129 201.83) * display: Huninn (zh) / Quicksand (en, and Latin in zh headings) · body: Geist + Noto Sans TC · MOQI: Google Sans Flex · axes: light / geometric-sans / cool * studied: no · context: inferred · v1.1.0 * nav: N5 floating glass pill · footer: Ft5 statement · enrichment: E5 hand-built SVG mascot + WebGL silk (hero only) * slop test 2026-10-02: 53/58 pass · owner override (SPEC §1): 2 gradient text, 22 neutral-white glass, 23 + 29 hero silk, 27 no reduced-motion * contrast: pass (40–41) · nav: N5 · footer: Ft5 · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) */ /* Hallmark · pre-emit critique: P4 H4 E4 S5 R3 V4 (philosophy, hierarchy, execution, specificity, restraint, variety; final QA 2026-10-02, none below 3) */ /* MoqiKey site tokens (SPEC §4, §4a). Every colour, font, space, radius and timing in the CSS comes from here. Hex anchors from the app (Palette.kt, MoqiButton.kt, FlowBackground.kt) converted to OKLCH; each value round-trips to the same 8-bit hex. */ :root { /* Paper and ink */ --color-paper: oklch(99.3% 0.003 205); --color-paper-2: oklch(97.4% 0.006 205); --color-paper-3: oklch(94.6% 0.008 205); --color-card: oklch(100% 0 0 / 0.86); --color-ink: oklch(27.54% 0.0114 225.53); /* #22292C app ink */ --color-ink-2: oklch(45.34% 0.015 229.23); /* #4E585D app ink2 */ --color-muted: oklch(55.57% 0.0143 229.11); /* #6B757A app muted: AA on paper only (4.6:1), not on paper-2 */ --color-rule: oklch(90.91% 0.0077 228.86); /* #DCE2E5 app appLine */ /* Brand (fills only; text stays ink) */ --color-cyan: oklch(75.8% 0.129 201.83); /* #00C8D3 app accent */ --color-cyan-soft: oklch(94.65% 0.0354 200.92); /* #D3F5F7 app accentSoft / bubbleOut */ --color-on-brand: oklch(26.15% 0.0414 205.38); /* #042A2E app onAccent */ --color-pink: oklch(78.14% 0.1538 349.18); /* #FF8CC7 app secondary: gradient stop only */ --color-focus: oklch(55% 0.12 205); /* Captions: muted on paper, ink-2 on paper-2 / paper-3 (base.css swaps it per band) */ --color-caption: var(--color-muted); /* MOQI's gradient, the only gradient on the site (§1.2). Stops stay hex on purpose: legacy colours make the browser blend in sRGB, as Compose does in the app. */ --grad-moqi: linear-gradient(180deg, #8BEFF5 0%, #00C8D3 45%, #FF8CC7 100%); --grad-moqi-text: linear-gradient(100deg, #007C85, #C03A82); --color-cyan-ink: #007C85; /* app accentInk: the deep cyan of the text gradient */ /* MOQI's private palette (moqi.css, effects.css), from MoqiButton.kt and the app's glass. Hex / rgb on purpose, like the gradient stops above: MOQI's gradients must blend in sRGB as they do in the app. --moqi-cyan and --moqi-pink are --color-cyan and --color-pink. */ --moqi-cyan: #00C8D3; --moqi-pink: #FF8CC7; --moqi-ring-cyan: #34E6EF; /* MoqiButton.kt RING_CYAN */ --moqi-cyan-a50: rgb(0 200 211 / .5); --moqi-cyan-a36: rgb(0 200 211 / .36); --moqi-cyan-a30: rgb(0 200 211 / .3); --moqi-cyan-a16: rgb(0 200 211 / .16); --moqi-cyan-a0: rgb(0 200 211 / 0); --moqi-pink-a32: rgb(255 140 199 / .32); --moqi-pink-a0: rgb(255 140 199 / 0); --moqi-face-top: #FFFFFF; /* MoqiMascot baseTop */ --moqi-face-low: #E6FAFB; /* lerp(white, accent, .1) */ --moqi-key-fill: rgb(255 255 255 / .95); /* app kbTool */ --moqi-open-top: #45D7DF; /* lerp(accent, white, .27) */ --moqi-open-low: #00AAB3; /* lerp(accent, black, .15) */ --moqi-think-top: #00B4BE; /* lerp(accent, black, .1) */ --moqi-think-low: #007C83; /* lerp(accent, black, .38) */ --moqi-sheen: rgb(255 255 255 / .5); /* app glassSheen */ --moqi-rim-hi: rgb(255 255 255 / .95); /* app glassRim */ --moqi-rim-mid: rgb(255 255 255 / .43); /* glassRim at 45 % */ --moqi-rim-lo: rgb(255 255 255 / .25); /* app glassRimLow */ --moqi-white-a50: rgb(255 255 255 / .5); --moqi-white-a0: rgb(255 255 255 / 0); --moqi-key-shadow: rgb(11 74 82 / .18); /* app glassShadow */ --moqi-avatar: linear-gradient(135deg, #D3F5F7, #FFE4F1); /* app Avatar: accentSoft → secondarySoft, behind a person's first letter */ /* Hero silk (FlowBackground.kt, light) */ --silk-1: oklch(98.35% 0.0079 253.85); /* #F6FAFF mist */ --silk-2: oklch(85.47% 0.0751 205.42); /* #93DEE7 powder cyan */ --silk-3: oklch(85.44% 0.0949 349); /* #FFB6D9 powder pink */ /* Shadow: ink-tinted, two layers, low alpha */ --shadow-soft: 0 1px 2px oklch(27.54% 0.0114 225.53 / 0.06), 0 12px 32px -12px oklch(27.54% 0.0114 225.53 / 0.18); --shadow-lift: 0 2px 4px oklch(27.54% 0.0114 225.53 / 0.06), 0 20px 44px -16px oklch(27.54% 0.0114 225.53 / 0.24); /* Liquid Glass (§4a): neutral white material; colour comes only from what is behind it */ --glass-fill: oklch(100% 0 0 / 0.62); --glass-fill-strong: oklch(100% 0 0 / 0.8); --glass-fill-nav: oklch(100% 0 0 / 0.34); /* the nav: clear enough to see the page bend at its rim (owner, 2026-10-02: .7 hid it); its labels carry a white halo */ --glass-fill-lens: oklch(99.6% 0.003 205 / 0.34); /* clear lens (icon buttons) while refracting */ --glass-fill-solid: oklch(99.6% 0.003 205 / 0.94); /* no backdrop-filter, or less transparency asked */ --glass-light: 100% 0 0; /* OKLCH channels of the glass's white light (rim, sheen, specular); glass.css adds the alpha */ --glass-rim: oklch(100% 0 0 / 0.72); --glass-hairline: oklch(27.54% 0.0114 225.53 / 0.07); --glass-shade: oklch(27.54% 0.0114 225.53 / 0.04); --glass-shadow: 0 1px 2px oklch(27.54% 0.0114 225.53 / 0.05), 0 10px 30px -10px oklch(27.54% 0.0114 225.53 / 0.2); --glass-blur: 18px; --glass-saturate: 1.7; /* Type */ /* Chinese body text is Noto Sans TC from Google Fonts on every device (owner, 2026-10-02: the same face everywhere is worth the download). Google serves CJK fonts in unicode-range slices, so a page fetches only the slices its own characters fall in; the system fonts after it show while those load. Huninn (headings) comes the same way. */ --font-cjk: "Noto Sans TC", "Noto Sans CJK TC", "PingFang TC", "Microsoft JhengHei", sans-serif; /* The word MOQI, in the logo's typeface (owner, 2026-10-02). Loaded as a four-letter subset (text=MOQI). */ --font-moqi: "Google Sans Flex", "Geist", sans-serif; /* Headings: Latin letters in Quicksand (owner, 2026-10-02), Chinese in Huninn. Quicksand comes first so it takes the Latin in Chinese headings too; those rules set font-variation-settings "wght" 600, which brings Quicksand up to Huninn's one weight and which static Huninn ignores (no faux bold). */ --font-display-zh: "Quicksand", "Huninn", var(--font-cjk); --font-display-en: "Quicksand", "Geist", sans-serif; /* Zhuyin keys and tone marks: Huninn's own glyphs, never Quicksand's spacing accents (ˊ ˇ ˋ). */ --font-zhuyin: "Huninn", var(--font-cjk); --font-body: "Geist", var(--font-cjk); --font-mono: "Geist Mono", ui-monospace, monospace; /* Type scale: major third from 16px; display sizes clamp */ --text-xs: 0.8125rem; /* 13px labels only */ --text-sm: 0.9375rem; /* 15px */ --text-base: 1rem; /* 16px */ --text-body: 1.0625rem; /* 17px reading text */ --text-md: 1.25rem; --text-lg: 1.5625rem; --text-xl: clamp(1.625rem, 1.2rem + 1.4vw, 1.953rem); --text-2xl: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem); --text-3xl: clamp(2.125rem, 1.3rem + 3.2vw, 3.5rem); --text-display: clamp(2.5rem, 1.2rem + 4.6vw, 5rem); /* Measure: 30–38 zh characters, 60–70 en characters */ --measure-zh: 34em; --measure-en: 66ch; /* Space (4pt) */ --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 72px; --space-3xl: 112px; --space-4xl: 160px; /* Chat bubbles as the app draws them (slightly more room below the text than above) */ --bubble-pad: 8px 14px 9px; --page-max: 75rem; --page-gutter: clamp(16px, 4.5vw, 56px); --rule-hair: 1px; /* Radii */ --radius-key: 10px; --radius-card: 28px; --radius-pill: 999px; /* Layers */ --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-nav: 40; --z-overlay: 60; --z-toast: 80; /* Motion */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in: cubic-bezier(.55, 0, 1, .45); --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* Measured overshoot (about 8 %), for the mascot, key presses and the liquid press only */ --ease-spring: cubic-bezier(.3, 1.32, .5, 1); --dur-fast: 140ms; --dur: 260ms; --dur-slow: 600ms; } /* Each language in its own faces (owner, 2026-10-02; the build loads them from Google Fonts on that language's pages only). zh-HK: Noto Sans HK. ja: Noto Sans JP, headings in Zen Maru Gothic (rounded, like Huninn). ko: Noto Sans KR, headings in Jua (rounded). th: Noto Sans Thai, headings in Mitr. vi: Be Vietnam Pro, headings in Quicksand, which has the Vietnamese marks. */ :root[lang="zh-Hant-HK"] { --font-cjk: "Noto Sans HK", "Noto Sans CJK HK", "PingFang HK", "Microsoft JhengHei", sans-serif; } :root:lang(ja) { --font-cjk: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; --font-display-ja: "Quicksand", "Zen Maru Gothic", var(--font-cjk); } :root:lang(ko) { --font-cjk: "Noto Sans KR", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --font-display-ko: "Quicksand", "Jua", var(--font-cjk); } :root:lang(th) { --font-thai: "Noto Sans Thai", "Sukhumvit Set", "Thonburi", "Leelawadee UI", sans-serif; --font-body: "Geist", var(--font-thai); --font-display-th: "Quicksand", "Mitr", var(--font-thai); } :root:lang(vi) { --font-body: "Be Vietnam Pro", "Geist", sans-serif; --font-display-vi: "Quicksand", "Be Vietnam Pro", sans-serif; } /* A real damped spring (zeta 0.62) where linear() easing is supported */ @supports (transition-timing-function: linear(0, 1)) { :root { --ease-spring: linear(0, 0.009 1.2%, 0.056 3.1%, 0.148 5.4%, 0.28 8%, 0.437 10.8%, 0.601 13.8%, 0.754 17%, 0.883 20.4%, 0.98 23.9%, 1.043 27.5%, 1.076 31.3%, 1.083 35.2%, 1.075 39.2%, 1.058 43.4%, 1.038 47.6%, 1.02 51.9%, 1.007 56.3%, 0.998 60.9%, 0.994 65.5%, 0.993 70.2%, 0.994 75%, 0.996 79.8%, 0.998 84.7%, 0.999 89.8%, 1); } }