/* ── CJK Typography Overrides (Simplified Chinese) ────────────────────────────────── Fraunces, Manrope and Fragment Mono (imported from Google Fonts in css/theme-surya.css) carry no Simplified Chinese coverage, so every CJK glyph currently falls through to a per-character OS fallback — a serif on Windows, a different sans on macOS, another on Android — and the same page reads as three different designs. This stylesheet repairs four treatments that are actively wrong for Chinese: 1. System CJK font stack replacing the three webfont-backed --font-* tokens. 2. Negative letter-spacing neutralised (it collides adjacent CJK strokes). 3. Uppercase micro-labels reset — text-transform is a no-op on Han characters, and it leaves the label mismatched against the wide tracking it was paired with. 4. Raised line-height, because CJK glyphs are square and fill their em box. LINK ORDER: this file must be linked AFTER css/theme-surya.css on every HTML page that serves Chinese — zh/index.html. The English page (index.html) must not link it at all, and the Google Fonts @import in css/theme-surya.css stays exactly where it is: the English page keeps its webfonts. Note that `body` is a specificity tie with the base body rule, so link order is what decides the CJK line-height there. SCOPE: every rule below is gated on html[lang="zh"] or html[lang^="zh-"] (e.g. zh-Hans, zh-CN). An html[lang="en"] document matches none of these selectors, so the English rendering is unchanged by construction. No @font-face, no @import: system faces only, nothing to download. ─────────────────────────────────────────────────────────────────────────────── */ /* ── 1. System CJK font stack ────────────────────────────────────────────── Real CJK faces are listed ahead of the generic keywords so the browser never reaches for `sans-serif` while a proper CJK face is installed. Windows gets Microsoft YaHei, macOS/iOS PingFang SC / Hiragino Sans GB, Android and Linux get the Noto / Source Han family. Latin runs inside a Chinese page are covered by the first entry on each platform, so mixed-script lines stay on one type voice. ────────────────────────────────────────────────────────────────────────── */ html[lang="zh"], html[lang^="zh-"] { --font-heading: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Noto Sans CJK SC', 'Source Han Sans SC', 'Noto Sans SC', sans-serif; --font-body: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Noto Sans CJK SC', 'Source Han Sans SC', 'Noto Sans SC', sans-serif; --font-mono: 'Sarasa Mono SC', 'Noto Sans Mono CJK SC', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans CJK SC', 'Source Han Sans SC', 'Noto Sans SC', monospace; } /* Fragments Mono carries no CJK, and the prompt/pre blocks are the one place a Chinese run is expected inside a monospaced surface. */ html[lang="zh"] pre, html[lang^="zh-"] pre, html[lang="zh"] code, html[lang^="zh-"] code, html[lang="zh"] kbd, html[lang^="zh-"] kbd, html[lang="zh"] samp, html[lang^="zh-"] samp { font-family: var(--font-mono); } /* ── 2. Neutralise negative letter-spacing ───────────────────────────────── Overrides, in the files they originate from: css/theme-surya.css:64 h1, h2, h3, h4, h5, h6 letter-spacing: -0.01em css/theme-surya.css:116 #landing-view h1 letter-spacing: -0.02em css/theme-surya.css:205 .results-title-pct letter-spacing: -0.03em css/theme-surya.css:221 .results-section-title letter-spacing: -0.01em css/theme-surya.css:341 #landing-view h1 (≤480px) letter-spacing: -0.01em css/results.css:29 .results-title-name letter-spacing: -0.02em styles.css:88 #landing-view h1 letter-spacing: -0.02em styles.css:148 #landing-view h1 (≤480px) letter-spacing: -0.01em Han glyphs are monospaced squares with no side bearing to absorb tightening, so a negative em value pulls neighbouring strokes into each other. `normal` is the correct neutral value for the script; it is not "no tracking" by omission. ────────────────────────────────────────────────────────────────────────── */ html[lang="zh"] h1, html[lang^="zh-"] h1, html[lang="zh"] h2, html[lang^="zh-"] h2, html[lang="zh"] h3, html[lang^="zh-"] h3, html[lang="zh"] h4, html[lang^="zh-"] h4, html[lang="zh"] h5, html[lang^="zh-"] h5, html[lang="zh"] h6, html[lang^="zh-"] h6, html[lang="zh"] #landing-view h1, html[lang^="zh-"] #landing-view h1, html[lang="zh"] .results-title-name, html[lang^="zh-"] .results-title-name, html[lang="zh"] .results-title-pct, html[lang^="zh-"] .results-title-pct, html[lang="zh"] .results-section-title, html[lang^="zh-"] .results-section-title, html[lang="zh"] .results-deep-dive-heading, html[lang^="zh-"] .results-deep-dive-heading { letter-spacing: normal; } html[lang="zh"] body, html[lang^="zh-"] body, html[lang="zh"] p, html[lang^="zh-"] p, html[lang="zh"] li, html[lang^="zh-"] li, html[lang="zh"] button, html[lang^="zh-"] button, html[lang="zh"] a, html[lang^="zh-"] a { letter-spacing: normal; } /* ── 3. Uppercase micro-labels ──────────────────────────────────────────── Overrides, in the files they originate from: css/quiz.css:218-219 .quiz-label uppercase + letter-spacing 0.06em css/results.css:393-394 .results-review-phase uppercase + 0.05em css/theme-surya.css:132-133 #landing-view .meta uppercase + 0.05em styles.css:104-105 #landing-view .meta uppercase + 0.05em text-transform: uppercase is a no-op on Han characters, so a translated label keeps no visual weight advantage while still paying the wide tracking that was only ever paired with the uppercase Latin form. Both halves of the pair are reset together: dropping the tracking while leaving the transform would fix neither. ────────────────────────────────────────────────────────────────────────── */ html[lang="zh"] .quiz-label, html[lang^="zh-"] .quiz-label, html[lang="zh"] .results-review-phase, html[lang^="zh-"] .results-review-phase, html[lang="zh"] #landing-view .meta, html[lang^="zh-"] #landing-view .meta { text-transform: none; letter-spacing: normal; } /* The remaining chips and counters carry wide positive tracking for the same Latin-micro-label reason; reset the tracking so a Chinese label is not stranded mid-air, but leave text-transform alone since these never declare one. */ html[lang="zh"] .quiz-chrome-chip, html[lang^="zh-"] .quiz-chrome-chip, html[lang="zh"] .quiz-chrome-counter, html[lang^="zh-"] .quiz-chrome-counter, html[lang="zh"] .quiz-number-chip, html[lang^="zh-"] .quiz-number-chip, html[lang="zh"] .results-ast-chip, html[lang^="zh-"] .results-ast-chip { letter-spacing: normal; } /* ── 4. Line-height ─────────────────────────────────────────────────────── Tight line-heights this overrides, in the files they originate from: styles.css:11 / css/theme-surya.css:57 body 1.6 styles.css:86 / css/theme-surya.css:116 #landing-view h1 1.1 styles.css:96 / css/theme-surya.css:124 #landing-view .subtitle 1.4 css/theme-surya.css:67-69 h1 / h2 / h3 1.1 / 1.2 / 1.3 css/theme-surya.css:167 .quiz-question 1.3 css/quiz.css:82 .quiz-scenario 1.55 css/quiz.css:91 .quiz-question 1.4 css/quiz.css:109 .quiz-option-btn 1.45 css/results.css:169 .results-action-narrative 1.6 css/results.css:226 .results-action-desc 1.5 css/results.css:273 .results-deep-dive-sub 1.5 css/results.css:303 .results-prompt-pre 1.5 css/results.css:401 .results-review-scenario 1.5 css/results.css:415 .results-review-option 1.5 css/results.css:436 .results-review-feedback 1.5 css/results.css:449 .results-review-best 1.5 A Latin line box is sized around ascender/descender and needs ~1.15 to sit cleanly; a CJK glyph occupies nearly the full em square, so the same ratio clips the visual gap between consecutive lines. Body copy goes to 1.75 and the largest display type is floored at 1.4 rather than tracking the Latin 1.1/1.2. ────────────────────────────────────────────────────────────────────────── */ html[lang="zh"] body, html[lang^="zh-"] body { line-height: 1.75; } html[lang="zh"] p, html[lang^="zh-"] p, html[lang="zh"] li, html[lang^="zh-"] li, html[lang="zh"] dd, html[lang^="zh-"] dd, html[lang="zh"] blockquote, html[lang^="zh-"] blockquote, html[lang="zh"] .subtitle, html[lang^="zh-"] .subtitle, html[lang="zh"] .error, html[lang^="zh-"] .error, html[lang="zh"] .quiz-notice, html[lang^="zh-"] .quiz-notice { line-height: 1.75; } /* Headings — floored at 1.4, opened up further as the type grows. */ html[lang="zh"] h1, html[lang^="zh-"] h1, html[lang="zh"] #landing-view h1, html[lang^="zh-"] #landing-view h1, html[lang="zh"] .results-title-name, html[lang^="zh-"] .results-title-name { line-height: 1.4; } html[lang="zh"] h2, html[lang^="zh-"] h2, html[lang="zh"] h3, html[lang^="zh-"] h3, html[lang="zh"] h4, html[lang^="zh-"] h4, html[lang="zh"] h5, html[lang^="zh-"] h5, html[lang="zh"] h6, html[lang^="zh-"] h6, html[lang="zh"] .results-section-title, html[lang^="zh-"] .results-section-title, html[lang="zh"] .results-deep-dive-heading, html[lang^="zh-"] .results-deep-dive-heading { line-height: 1.5; } /* The 120px Progression Title percentage is digit-only and is deliberately left on the original 0.9 — it holds no CJK glyph, and the single line never wraps. */ /* Question Card and its children. */ html[lang="zh"] .quiz-card, html[lang^="zh-"] .quiz-card, html[lang="zh"] .quiz-scenario, html[lang^="zh-"] .quiz-scenario, html[lang="zh"] .quiz-question, html[lang^="zh-"] .quiz-question, html[lang="zh"] .quiz-option-btn, html[lang^="zh-"] .quiz-option-btn, html[lang="zh"] .quiz-option-text, html[lang^="zh-"] .quiz-option-text { line-height: 1.7; } html[lang="zh"] .quiz-back-btn, html[lang^="zh-"] .quiz-back-btn { line-height: 1.7; } /* Results prose: Action Plan, Narrative, Deep-Dive, Review, Best Practice. */ html[lang="zh"] .results-action-narrative, html[lang^="zh-"] .results-action-narrative, html[lang="zh"] .results-action-title, html[lang^="zh-"] .results-action-title, html[lang="zh"] .results-action-desc, html[lang^="zh-"] .results-action-desc, html[lang="zh"] .results-deep-dive-sub, html[lang^="zh-"] .results-deep-dive-sub, html[lang="zh"] .results-review-summary, html[lang^="zh-"] .results-review-summary, html[lang="zh"] .results-review-scenario, html[lang^="zh-"] .results-review-scenario, html[lang="zh"] .results-review-question, html[lang^="zh-"] .results-review-question, html[lang="zh"] .results-review-option, html[lang^="zh-"] .results-review-option, html[lang="zh"] .results-review-feedback, html[lang^="zh-"] .results-review-feedback, html[lang="zh"] .results-review-best, html[lang^="zh-"] .results-review-best, html[lang="zh"] .results-review-link, html[lang^="zh-"] .results-review-link, html[lang="zh"] .results-narrative-summary, html[lang^="zh-"] .results-narrative-summary, html[lang="zh"] .results-prompt-summary, html[lang^="zh-"] .results-prompt-summary { line-height: 1.7; } /* Buttons in the results view are single-line controls, but their labels can be Chinese; 1.7 keeps them optically consistent with the prose above them. */ html[lang="zh"] .results-download-btn, html[lang^="zh-"] .results-download-btn, html[lang="zh"] .results-share-btn, html[lang^="zh-"] .results-share-btn, html[lang="zh"] .results-copy-btn, html[lang^="zh-"] .results-copy-btn, html[lang="zh"] .results-review-btn, html[lang^="zh-"] .results-review-btn, html[lang="zh"] .results-review-back-btn, html[lang^="zh-"] .results-review-back-btn, html[lang="zh"] .results-retake-btn, html[lang^="zh-"] .results-retake-btn { line-height: 1.7; } /* Deep-Dive Prompt and any other preformatted block. */ html[lang="zh"] pre, html[lang^="zh-"] pre, html[lang="zh"] .results-prompt-pre, html[lang^="zh-"] .results-prompt-pre, html[lang="zh"] code, html[lang^="zh-"] code { line-height: 1.7; } /* ── 5. Risk Radar axis labels ──────────────────────────────────────────── js/results.js buildRadar() sets a font-family presentation attribute on both tspans of every axis label. A presentation attribute is the weakest thing in the author origin — it sits below every selector-based rule — so this stylesheet rule wins over it without !important. It carries the CJK-capable stack for the Chinese page only; the attribute keeps applying unchanged on the English page. ────────────────────────────────────────────────────────────────────────── */ html[lang="zh"] .results-radar-svg text, html[lang^="zh-"] .results-radar-svg text, html[lang="zh"] .results-radar-svg tspan, html[lang^="zh-"] .results-radar-svg tspan, html[lang="zh"] .results-radar-svg text tspan, html[lang^="zh-"] .results-radar-svg text tspan { font-family: var(--font-body); letter-spacing: normal; }