mirror of
https://github.com/multica-ai/multica.git
synced 2026-08-04 17:18:35 +02:00
503b09c5de
The landing tree set `--font-serif` to Instrument Serif, which ships Latin only, so zh/ja/ko headlines fell out of the stack onto the browser default sans while the Latin next to them stayed in a high-contrast display serif. A `Noto_Serif_SC` next/font entry was loaded as `--font-serif-zh` but no rule ever referenced it, and it requested `subsets: ["latin"]`, so it downloaded no CJK glyphs either way — remove it. Compose `--font-serif` for the landing tree in static CSS instead, with a per-`<html lang>` CJK tail, mirroring the `--font-sans` chain in globals.css: Chinese before Korean by default, a Mincho-first chain promoted for `ja` so Kanji do not get Chinese glyph shapes. Platform Songti/Mincho/Myeongjo faces rather than a multi-megabyte CJK webfont. The 16 landing surfaces that inlined `font-[family-name:var(--font-serif)]` now share a `.landing-serif` hook, which gives the per-locale metric reset a precise target: CJK headings drop the Latin display tracking (down to -0.038em) and sub-1 leading (0.93) that crowded ideographs and collided the two lines of a `<br />`-split headline. Korean additionally gets `word-break: keep-all` so wrapped Hangul breaks at word boundaries. Scoped to h1/h2 so the Latin-only footer wordmark keeps its tuned tracking. The English landing hero renders pixel-identical to before. Co-authored-by: Lambda <lambda@multica.ai> Co-authored-by: multica-agent <github@multica.ai>
50 lines
2.5 KiB
CSS
50 lines
2.5 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "shadcn/tailwind.css";
|
|
@import "../../../packages/ui/styles/tokens.css";
|
|
@import "../../../packages/ui/styles/base.css";
|
|
@import "./custom.css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@source "../../../packages/ui/**/*.{ts,tsx}";
|
|
@source "../../../packages/core/**/*.{ts,tsx}";
|
|
@source "../../../packages/views/**/*.{ts,tsx}";
|
|
|
|
/* Font stack. `--font-inter` is the next/font Inter family (+ its synthetic
|
|
size-adjusted fallback), set on <html> by inter.variable in app/layout.tsx.
|
|
We compose `--font-sans` here in static CSS — rather than baking the CJK tail
|
|
into next/font's `fallback` — so it can be overridden per `<html lang>` and
|
|
stays CSP-safe (no inline <style>). Tailwind's `font-sans` utility resolves
|
|
`var(--font-sans)` (see packages/ui/styles/tokens.css `@theme inline`).
|
|
|
|
Default (en / zh / ko): Latin chars render with Inter; CJK chars fall through
|
|
to the platform Chinese fonts, then Korean. Chinese MUST stay before Korean so
|
|
zh users never get Korean Hanja glyph shapes (Hangul is a separate Unicode
|
|
block, so ko users still get Korean fonts for Hangul). Kept in sync with
|
|
apps/desktop/src/renderer/src/globals.css. */
|
|
:root {
|
|
--font-sans: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
"PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Apple SD Gothic Neo",
|
|
"Malgun Gothic", "Noto Sans CJK KR", sans-serif;
|
|
}
|
|
|
|
/* Japanese: Kanji are Han ideographs sharing the same Unicode block as Chinese,
|
|
and CSS font-fallback order is NOT affected by `<html lang>` — so the
|
|
Chinese-first default above would hand Japanese users Chinese glyph shapes
|
|
for shared ideographs. Promote a Japanese-first CJK chain only for Japanese.
|
|
`[lang|="ja"]` is the BCP-47 language-range selector: it matches exactly `ja`
|
|
or `ja-<region>` (layout.tsx emits `ja-JP`), never unrelated 3-letter subtags
|
|
such as `jam`. Inter still leads for Latin; zh/ko remain as a deep fallback. */
|
|
html[lang|="ja"] {
|
|
--font-sans: var(--font-inter), "Hiragino Sans", "Hiragino Kaku Gothic ProN",
|
|
"Yu Gothic", "YuGothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP",
|
|
-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
|
|
"Microsoft YaHei", "Noto Sans CJK SC", "Apple SD Gothic Neo", "Malgun Gothic",
|
|
"Noto Sans CJK KR", sans-serif;
|
|
}
|
|
|
|
/* The landing tree overrides `--font-serif` with its own Instrument Serif +
|
|
per-locale CJK chain, built on the same structure; see "Landing editorial
|
|
serif" in ./custom.css and keep the two CJK orderings in sync. */
|