site(layout): marketing template design debt — CTA above the fold, count-aware grids, CJK phrase-safe headings, one face per role

[objectstack-fleet]

Fixes #223

Branch. This PR carries 8 commit(s) from the seat's linear stack, replayed onto main @ 5bd416d. The replay is patch-equal to git diff 3a531e1 lin/issue-223, with byte-identical diffs. Head: 2834605. The staged SHAs quoted below are the pre-replay commits; their content is unchanged.

Layout design debt on the marketing template: the card's seven items, plus two defects the seat added in the Claim: (a) the home hero's media note in dark mode, and (b) the video play button covering the poster title on phones. No copy changed. The CJK keep-together work is markup only: a wbr element between phrases, and the phrases rejoin to the copy exactly.

Staged on the seat's linear stack top lin/issue-222 (3a531e1). Eight commits: one per item ((a) and (b) ride with their own), plus one that extends item 2 to the blog list, posts and cluster pages (seat review). Head: 0424a43.

Per item

1. CTA below the laptop fold: fixed. At 1366×625 the primary CTA is now above the fold on all 15 marketing pages and on home, in en, zh-Hans and ja (worst: FDE at 613px; it was 899px).

   • Marketing template:
     • The h1 takes a vh term, clamp(2.9rem, min(5.1vw, 7.4vh), 4.45rem). That is 46px at 625px of viewport height and 55px at 750, and it stops binding at 962px, so tall desktops are unchanged.
     • The copy column is the wider one (1.15fr against 0.75fr).
     • On desktop only, the hero top padding, the lead's leading (1.85 → 1.72) and the CTA row's margin are tightened.
   • Home:
     • A wide but short screen keeps the source order (lead and CTA row above the video). The reorder that put the video first now fires on narrow screens only (max-width 900px).
     • The desktop lead is 40rem wide at 1.72 leading, so the nine-line ja lead fits too.
     • Trade-off, as the card asked: at 1366×625 the video's visible slice goes from 320px to 43px (en) and 0px (ja). At 1920×945, 314px of it still shows.

2. CJK headlines splitting words: fixed, on the marketing templates and, as an extension from the seat's review, on the blog list, posts and cluster pages. scripts/lib/cjk-phrases.mjs cuts a zh or ja heading into phrases from the ICU word segmenter (Intl.Segmenter).

   • In ja, particles, okurigana and auxiliaries stay with their word, and katakana splits are rejoined. In zh, one-character words join a neighbour.
   • The heading renders a wbr element between phrases and sets word-break: keep-all (the form BudouX emits). overflow-wrap: anywhere remains only as a last resort.
   • Why not word-break: auto-phrase: it is Chromium-only and Japanese-only, so it fixes neither zh nor Safari/Firefox.
   • Template-rendered headings (phraseHtml) cover:
     • the h1/h2 of the marketing template, home (and the home eyebrow), security and the glossary index;
     • blog card titles (ArticleCard);
     • the post title and related-posts heading (BlogPost);
     • the cluster h1, h2 and card titles (ClusterPage).
   • phraseHtml escapes exactly as Astro does, so a heading that needs no wbr renders byte for byte as before.
   • Headings authored inside MDX post bodies: a small step in the existing markdown pipeline, not left alone.
     • rehypeCjkHeadingPhrases is added to the one markdown.rehypePlugins list, after the segment-break step (MDX inherits it). BlogPost sets keep-all on those headings.
     • It reads the locale from the source file name (index.zh-Hans.mdx, index.ja.mdx), so en and other spaced-script posts are untouched.
     • It works only inside h1-h6. It never enters code, pre, kbd or samp, and it adds a wbr only beside text.
   • Byte-diff proof, previous tip 42d55d9 against 0424a43, over all 893 built files (hashed /_astro names normalized):
     • every en, de, es, fr and ko page, and every root file (rss, llms.txt, sitemaps), is identical;
     • 198 zh/ja pages differ only by wbr, and all 6,713 of those wbr sit inside an h1-h6, none inside code;
     • 0 pages differ in any other way. Heading ids are unchanged.
   • Where a ja phrase was wider than its line, the size now fits it:
     • home section headings: at most 2.5rem in ja;
     • home h1 on phones: 2.15rem in ja;
     • security h1 and h2 on phones;
     • the cluster h1: clamp(1.8rem, 4.4vw, 4.2rem) in ja, so the eleven-character katakana word アプリプラットフォーム fits. At 5.6rem it broke as 「アプリ / プラットフォーム」 by chance at these widths; with keep-all it would otherwise break inside the word.
   • A ja one-kanji suffix after a stem with okurigana stays with it (働き方).
   • Results (tables below):
     • marketing set: 0 word splits, 0 particle splits and 0 one-character last lines in ja and zh-Hans at the six viewports;
     • blog/post/cluster set: 157 of 450 headings → 2.

3. Lone cards in 3-column grids: fixed. The marketing item grid and the glossary index sit on six tracks and take their rows from the card count (src/lib/card-rows.ts):

   • 4 cards → 2 + 2; 5 → 3 + 2; 7 → 3 + 2 + 2; 22 glossary terms → six rows of 3, then two rows of 2;
   • at two columns, an odd last card takes the whole row.

   Before, 24 of 37 item grids per locale (and the glossary) ended on a short row; after, every grid's last row is full at 1366, 1920 and 390.

4. Decision table cut off on phones: already fixed in this stack by c9d4d71, the phone-width table commit from the Phone-width reading of blog tables and diagrams: table rows run up to 2,394px on one line, and diagram text renders at 3–4px #213 work, which drops the 760px floor below 640px. Measured at 3a531e1: all 60 decision tables (15 pages, en and zh-Hans, at 360 and 390) fit, with the third column visible and no page overflow. No change here.

5. One-word orphans in headings: fixed.

   • h1/h2 take text-wrap: balance on the marketing template, home, security, pricing, legal and cluster pages, and on the glossary index.
   • Home's two-part headings and the security h1 are two block lines, each balanced on its own, instead of text either side of a forced line break. That forced break was what left "model," and "agents." alone on phones.
   • "What changes, who reviews it, what runs" now reads "What changes, who / reviews it, what runs" at every desktop width.
   • Result: 0 one-word last lines in en, ja and zh-Hans (146 in en before).

6. Home video poster: fixed. Poster strings are decided as option A (see notes).

   • The poster SVG is now artwork only. VideoEmbed draws the words over it as HTML, placed where the artwork drew them, in the same face and colours, and sized to the frame in container units.
   • The title is each locale's existing video caption ("ObjectStack 90 秒总览", "ObjectStack を / 90 秒で"); en is unchanged ("ObjectStack / in 90 Seconds").
   • Below 560px of frame:
     • the 5px sub-line is left out;
     • the eyebrow keeps a floor (9.5–10px, from about 5.9px) and wraps only between its parts.

7. Typography: one face per role.

   • Display (--font-display: Iowan Old Style, Palatino, Songti SC, Noto Serif CJK SC) for page titles (h1) and section headings (h2), on every page. Pricing, security, legal and cluster now take it.
   • Text (--font-sans) for card and item titles, body and UI. The glossary index's term cards now take it.
   • Mono stays the label face.
   • Evidence: the audit below, plus pricing/security first-screen screenshots before/after.

(a) Dark-mode media note: fixed. The note over the home hero image takes the dark surface (--surface at 90%, --line border, --ink text) instead of the light theme's near-white glass.

(b) Play button over the poster title (390, 360): fixed. Below 560px of frame the badge moves up (40%) and shrinks to 52px, so it sits between the eyebrow and the title.

Fold measurement: 1366×625, primary CTA bottom y (px), fold = 625

page	en before	en after	zh-Hans before	zh-Hans after	ja before	ja after
home	1207	550	1175	550	1271	609
product-tour	626	446	522	446	626	446
platform	763	505	658	476	763	505
ai	690	535	586	476	690	535
mcp	795	565	658	505	795	565
permissions	763	505	658	476	763	505
data-modeling	795	535	658	505	795	535
app-ui	690	535	658	476	690	535
automation	763	583	658	505	763	583
approvals	795	535	658	476	795	535
analytics	795	583	658	476	795	583
trust-center	867	583	658	505	867	583
templates	594	446	562	416	594	446
agent-developer	835	554	626	476	835	554
forward-deployed-engineers	899	613	763	554	899	613
customer-stories	626	476	522	398	626	476
below the fold	15 of 16	0	12 of 16	0	15 of 16	0

ja marketing pages render the English copy, so their numbers equal en. At the other desktop viewports after the change, the worst marketing CTA bottom is 699 at 1440×750, 724 at 1512×830 and 832 at 1920×945 (all above their folds). The worst home CTA bottom is ja: 628 at 1440×750, 641 at 1512×830 and 658 at 1920×945.

CJK headline breaks: h1/h2 (plus the home eyebrow), six viewports, home, platform, pricing, security, FDE, glossary index and all 15 marketing pages

	ja before	ja after	zh-Hans before	zh-Hans after
word split across lines	61	0	241	0
particle cut from its word	14	0	—	—
one-character last line	17	0	103	0

Named cases from the card:

viewport	page	before	after
390, 360	ja home h1	オントロジーが / ソフトウェ / アである。	オントロジーが / ソフトウェアである。
390	ja home eyebrow	ObjectStack の上に構築された商用ランタイム環 / 境	ObjectStack の上に / 構築された商用ランタイム環境
1366	zh platform h1	一个业务系统需要 / 的一切，随时可投 / 入生产。	一个业务系统需要的 / 一切，随时可投入生产。
360	zh platform h1	一个业务系统需要 / 的一切，随时可投 / 入生产。	一个业务系统 / 需要的一切，随时 / 可投入生产。
360	zh platform h2	六大能力域，一个开 / 放、受治理的运行时	六大能力域，一个 / 开放、受治理的运行时
360	zh platform h2	一份定义，背后是一整 / 个应用。	一份定义，背后 / 是一整个应用。
360	zh platform h2	让 Agent 来写，让人来 / 审	让 Agent 来写， / 让人来审
1366	ja home h2	データは自社ネ / ットワーク内 / に。 / AI は権限の内 / 側で動く。	データは自社 / ネットワーク内に。 / AI は権限の / 内側で動く。

Extension: blog list, posts, cluster pages, glossary terms (zh-Hans and ja, at 1366, 390 and 360, h1/h2)

	before (42d55d9)	after (0424a43)
headings that split a word or leave one character	157 of 450	2 of 450
blog list card titles (ArticleCard)	125	2
blog posts: title and body headings (BlogPost, MDX)	26	0
cluster pages (ClusterPage)	6	0

What remains (2, both the same heading): the ja card title 「FDE(フォワードデプロイドエンジニア)は何を使うのか？…」 at 1366 and 360.

• 「フォワードデプロイドエンジニア」 is a single 15-character katakana word, and with its brackets and "FDE" it forms one unbreakable unit of about 390px.
• A card line is about 330px at the card title size, so the last-resort overflow-wrap breaks inside the word.
• Removing that would take a smaller card title for one post, or a copy change (a middle dot in the loanword). Neither is done here.

Examples:

viewport	page	before	after
1366	zh blog card	开放与封闭企业本体：谁拥有业 / 务语义层	开放与封闭企业本体： / 谁拥有业务语义层
1366	zh blog card	FDE(前沿部署工程师)用什么工 / 具？一套本体优先的开源技术栈	FDE(前沿部署工程师)用什么 / 工具？一套本体优先的开源技术栈
1366	zh post h1	AI Agent 数据安全边界：如何在企 / 业权限内工作	AI Agent 数据安全边界： / 如何在企业权限内工作
390	zh post body h2	第一层边界：agent 必须继承用户身 / 份	第一层边界：agent / 必须继承用户身份
390	zh post body h2	第三层边界：先只读，再建议，再执 / 行	第三层边界：先只读， / 再建议，再执行
1366, 360	ja cluster h1 (self-hosted-ai)	企業アプリケー / ション向けセ / ルフホスト AI (1366)	企業アプリケーション / 向けセルフホスト AI

Typography audit: computed face per heading role (13 page types × en/ja)

role	before	after
page title (h1)	display: home, marketing, glossary, blog · text: pricing, security, terms, privacy, cluster	display: all 13
section heading (h2 ≥ 23px)	display: home, marketing, blog, glossary term · text: security, cluster	display: all
card / item title (≤ 22px)	text: most · display: glossary index, blog list	text: all but the blog list (see notes)

Gates (at 0424a43; the same set also ran green at 42d55d9)

• pnpm check (under the shared lock, verdict command-exit 0): Result (154 files): 0 errors, 0 warnings, 0 hints.
• pnpm build (under the shared lock):
  • verdict: command-exit 0;
  • 880 pages built;
  • svg-text-fit OK;
  • share images rendered, no uncovered glyph;
  • content lint --dist passed: CJK line breaks 0 segment breaks, quotation marks 0 wrong, 93151 links resolve.
• pnpm content:lint: passed (339 files, 44 glossary terms). pnpm content:lint --published: passed (339 files, 44 glossary terms).
• pnpm seo:smoke: passed (870 HTML pages; 569 sitemap URLs; 5424 canonical/hreflang annotations).
• pnpm svg:lint: OK (112 SVGs, 2244 text boxes).

Screenshots

There are 1,152 in all: full page plus first screen, for home, platform, pricing, security, FDE, the glossary index, data-modeling and permissions.

• Viewports: 1366×625, 1440×750, 1512×830, 1920×945, 390×844 and 360×800.
• Light and dark, in en, zh-Hans and ja; before (3a531e1) and after (42d55d9).
• Lazy images were scrolled into view.
• Contact sheets and focused crops (grids, decision tables, poster, media note) were looked at.

For the extension there are 96 more: full page plus first screen, before (42d55d9) and after (0424a43).

• Pages: /zh-Hans/blog/, /ja/blog/, one zh-Hans post (ai-agent-business-data-security-boundaries) and one zh-Hans cluster page (ai-native-app-platform).
• Viewports: 1366×625, 390×844 and 360×800, light and dark.
• Also looked at: crops of the ja cluster h1 at 1366 and 360.

They were captured in the container's Chromium 141, with its fonts: no Iowan, Avenir or Songti, so Latin falls back to DejaVu/Liberation and CJK to WenQuanYi or IPA Gothic. The line counts are therefore pessimistic for macOS readers.

Acceptance notes

• Poster strings (item 6), decided A in the seat's review:
  • the eyebrow ("OPEN PROTOCOL & RUNTIME · APACHE-2.0") stays English in every locale;
  • the sub-line ("Data model · UI · workflows · permissions — one context window.") is drawn on the English page only;
  • the seat files the translated strings (option B) as a separate copy card.
• Blog list card titles (ArticleCard.astro) keep the display face. The blog list is outside this card's surface, and its featured card title is display-sized. Unifying it with the text-face card titles elsewhere is a one-line change if wanted.
• The blog list's own h1 and section h2s (ArticleList.astro) are untouched: another in-flight item holds that file, and none of those headings measured a split.
• The keep-all rules on the blog, post and cluster templates apply to zh and ja only, with balance in the same rule, so Latin headings there render exactly as before.
• The zh approvals hero title uses straight ASCII quotes around 同意. The phrase splitter pairs them, but CJK copy normally takes curly or corner quotes. This is a copy matter, unchanged here.
• In 「跟着那笔 10 万的订单走一遍流程」 the copy has a space between 10 and 万, which is a break opportunity no markup removes. This is a copy matter, unchanged here.
• Korean headings are not given keep-all. No defect was measured in ko, and that would change Korean wrapping site-wide.

---

Generated by Claude Code

🤖 Generated with Claude Code

https://claude.ai/code/session_01FeA1nwBz1ohH65dvffUGKr