/* CJK locale layer — Simplified Chinese (/zh/). Spec and rationale: docs/i18n/typography-v1.md SCOPE: every rule is scoped to [lang^="zh"] on . Nothing here can reach an English page, and a future /fr/ locale inherits none of it (French is Latin script and needs no typography layer at all). The prefix match — ^="zh" rather than ="zh-Hans" — means a later zh-Hant locale picks this up without a selector change. LOAD ORDER: this file must come AFTER main.css and pangoni.css. It overrides theme utilities that carry !important, so it has to win on source order as well as specificity. NO WEBFONT. A full Simplified Chinese webfont is 5-15 MB. This layer ships zero font files and zero @font-face rules, by design. */ /* --------------------------------------------------------------------------- 1. FONT STACK Latin families come FIRST so that mixed-script runs — "M-Pesa", "Pangoni", "QuickBooks", "KSh 0" — render in a proper Latin face. If a CJK family led the stack, those runs would be drawn with the CJK font's own Latin glyphs, which are designed to occupy a full-width em box and look wrong next to real Latin type. The English site already uses a system stack (-apple-system, BlinkMacSystem- Font, "Segoe UI", Roboto) and loads no Latin webfont, so the Latin half here is simply that stack, kept identical for cross-locale consistency. CJK coverage: PingFang SC (macOS/iOS 10+), Hiragino Sans GB (older macOS), Microsoft YaHei (Windows), Microsoft JhengHei (Windows, Traditional builds), Source Han Sans SC / Noto Sans CJK SC (Linux, Android, Adobe installs), WenQuanYi Micro Hei (older Linux). --------------------------------------------------------------------------- */ [lang^="zh"] body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif; } /* Form controls and buttons do not inherit font-family from body in any browser's UA stylesheet. Without this, a Chinese placeholder or button label falls back to the platform default and visibly mismatches the page. */ [lang^="zh"] input, [lang^="zh"] textarea, [lang^="zh"] select, [lang^="zh"] button, [lang^="zh"] .btn { font-family: inherit; } /* --------------------------------------------------------------------------- 2. VERTICAL RHYTHM English body line-height on this site is 1.625 (--x-body-line-height). Chinese has no inter-word spaces and much higher glyph density, so the same value reads as cramped: there is no whitespace inside a line to relieve it. Body size is deliberately NOT reduced. 1rem/16px sits squarely in the 15-17px range recommended for Chinese body text, and dropping to 15px makes Microsoft YaHei's hinting muddy on Windows at common zoom levels. Line-height, not size, is the lever that matters here. --------------------------------------------------------------------------- */ [lang^="zh"] body { line-height: 1.75; } [lang^="zh"] p, [lang^="zh"] li { line-height: 1.8; } [lang^="zh"] p { margin-bottom: 1.35em; /* English theme sits near 1em */ } /* Headings need the opposite treatment. A display heading at 1.75 looks like loosely stacked rows rather than one unit, because CJK headline glyphs are large and already well separated. */ [lang^="zh"] h1, [lang^="zh"] h2, [lang^="zh"] h3, [lang^="zh"] h4, [lang^="zh"] h5, [lang^="zh"] h6, [lang^="zh"] .display-1, [lang^="zh"] .display-2, [lang^="zh"] .display-3, [lang^="zh"] .display-4, [lang^="zh"] .display-5, [lang^="zh"] .display-6 { line-height: 1.4; } /* --------------------------------------------------------------------------- 3. LETTER-SPACING RESET The theme's .ls-tight (-0.025em) and .ls-tighter (-0.05em) are used 43 times across the six target pages. Negative tracking is a Latin display-type trick: it closes the loose sidebearings of capital letters. CJK glyphs already sit flush inside a full-width em box with no sidebearing to reclaim, so negative tracking overlaps strokes and degrades legibility outright. Reset to normal rather than removing the classes from the markup, so the English pages keep their intended typography and the /zh/ pages can reuse the same components verbatim. --------------------------------------------------------------------------- */ [lang^="zh"] .ls-tight, [lang^="zh"] .ls-tighter, [lang^="zh"] .ls-wide, [lang^="zh"] .ls-wider, [lang^="zh"] .ls-widest { letter-spacing: normal !important; } /* --------------------------------------------------------------------------- 4. NO ITALICS Simplified Chinese has no italic form. Browsers synthesise one by shearing the glyphs, which looks like a rendering fault rather than emphasis. is included because this codebase uses it 215 times as an icon carrier (), never as italic text — normalising it is harmless there and correct everywhere else.
is italic in the UA stylesheet and is used 6 times on the target pages, including the Nairobi office address that Phase 4 adds to /zh/contact. --------------------------------------------------------------------------- */ [lang^="zh"] em, [lang^="zh"] i, [lang^="zh"] cite, [lang^="zh"] address, [lang^="zh"] blockquote, [lang^="zh"] .font-italic, [lang^="zh"] .fst-italic { font-style: normal !important; } /* Emphasis has to come from somewhere. Weight and colour, not slant. */ [lang^="zh"] em, [lang^="zh"] cite { font-weight: 600; } /* --------------------------------------------------------------------------- 5. WEIGHT — avoid synthesised bold Synthetic bold on CJK smears strokes together, and dense glyphs suffer far more than Latin letterforms do. PingFang SC, Microsoft YaHei and Noto Sans CJK SC all ship a real Medium/Semibold, so 600 resolves to a genuine weight where 700+ may be synthesised from a Regular master. --------------------------------------------------------------------------- */ [lang^="zh"] strong, [lang^="zh"] b, [lang^="zh"] .fw-bold, [lang^="zh"] .font-bold { font-weight: 600; } [lang^="zh"] .fw-bolder, [lang^="zh"] .font-bolder { font-weight: 700; } /* --------------------------------------------------------------------------- 6. LINE BREAKING word-break: normal (NOT break-all) so Latin product names — M-Pesa, Pangoni, QuickBooks, eTIMS — are never split mid-word. overflow-wrap: break-word is the safety valve for a genuinely unbreakable long token. line-break: strict applies the stricter CJK line-breaking rules, which keep full-width punctuation off the start of a line. text-spacing-trim is the real CSS Text 4 property for trimming the built-in half-em of full-width brackets and punctuation at line edges. It is not universally supported and degrades to no-op where absent; there is no property literally named "text-spacing". --------------------------------------------------------------------------- */ [lang^="zh"] body, [lang^="zh"] p, [lang^="zh"] li, [lang^="zh"] h1, [lang^="zh"] h2, [lang^="zh"] h3, [lang^="zh"] h4, [lang^="zh"] h5, [lang^="zh"] h6, [lang^="zh"] td, [lang^="zh"] th { word-break: normal; overflow-wrap: break-word; line-break: strict; text-spacing-trim: space-first; } /* The theme sets .text-break to word-break: break-word !important, which in practice behaves like break-all in some engines and would split Latin brand names. */ [lang^="zh"] .text-break { word-break: normal !important; overflow-wrap: break-word !important; } /* Never justify. Without hyphenation, justified CJK opens rivers of whitespace between glyphs. Nothing on this site currently sets justify; this is a guard against it arriving later. */ [lang^="zh"] p, [lang^="zh"] li, [lang^="zh"] .text-justify { text-align: left; } /* --------------------------------------------------------------------------- 7. LEGIBILITY FLOOR A Chinese glyph packs many more strokes into the same em box than a Latin letter, so it becomes unreadable at sizes where Latin is merely small. Roughly 13px is the practical floor; below that, strokes merge. .badge-free is defined at 0.62rem (~10px) with text-transform: uppercase — uppercase is a no-op on Chinese, and 10px is illegible. is used 13 times on the target pages. --------------------------------------------------------------------------- */ [lang^="zh"] small, [lang^="zh"] .small, [lang^="zh"] .text-xs, [lang^="zh"] .badge, [lang^="zh"] .badge-free, [lang^="zh"] .pg-chip { font-size: 0.8125rem; /* 13px floor */ } /* text-transform does nothing to Chinese glyphs but still applies to any Latin run in the same string, producing "M-PESA" inside otherwise sentence-case Chinese copy. */ [lang^="zh"] .text-uppercase, [lang^="zh"] .badge-free { text-transform: none !important; }