/* Base — body, typography, links, focus rings */ /* Prevent flash of pre-translated (English) content: i18n.js fetches the dictionary asynchronously, so without this rule the static fallback text would render briefly in English before the translation lands. i18n.js adds the .i18n-ready class to when applyTranslations() completes. JS-disabled users see a blank page — acceptable since carousel, mobile drawer, and the contact form all depend on JS already. */ html:not(.i18n-ready) body { visibility: hidden; } body { font-family: var(--font-sans); font-size: var(--fs-base); color: var(--color-text); background: var(--color-bg); line-height: var(--lh-normal); } /* ========================================================= Chinese typography — html[lang="zh"] scoped Browsers pick per-glyph fonts from --font-sans, so the rules below adjust line-height, letter-spacing and tracking for CJK glyphs only. ========================================================= */ html[lang="zh"] body { line-height: var(--cjk-line-height); letter-spacing: var(--cjk-letter-spacing); /* Subtle proportional alternates where supported */ font-feature-settings: "palt" 0; text-spacing-trim: trim-start; } /* Headings — neutralise the English-only negative tracking; Chinese glyphs are square so they need near-zero tracking */ html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3, html[lang="zh"] h4, html[lang="zh"] h5, html[lang="zh"] h6 { letter-spacing: var(--cjk-heading-tracking); } /* Tighter, fuller characters look better at the same point size */ html[lang="zh"] h1 { font-weight: 700; } html[lang="zh"] h2 { font-weight: 700; } html[lang="zh"] h3 { font-weight: 600; } /* Eyebrows / labels — Chinese fits more characters per line */ html[lang="zh"] .eyebrow { letter-spacing: 0.05em; } /* Forms — Chinese placeholder text reads better with slight letter-spacing */ html[lang="zh"] .form-field input, html[lang="zh"] .form-field textarea { letter-spacing: var(--cjk-letter-spacing); } /* Brand name — bolder for Chinese visual weight balance */ html[lang="zh"] .brand-name strong { letter-spacing: 0.01em; } body.no-scroll { overflow: hidden; } h1 { font-size: var(--fs-4xl); letter-spacing: -0.02em; } h2 { font-size: var(--fs-3xl); letter-spacing: -0.015em; } h3 { font-size: var(--fs-2xl); letter-spacing: -0.01em; } h4 { font-size: var(--fs-xl); } h5 { font-size: var(--fs-lg); } h6 { font-size: var(--fs-md); } p { color: var(--color-text-muted); } a { color: var(--color-primary); transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--color-circuit); } :focus-visible { outline: 3px solid var(--color-circuit); outline-offset: 2px; border-radius: var(--radius-sm); } /* Skip link (a11y) */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-primary); color: white; padding: var(--sp-3) var(--sp-4); z-index: 1000; } .skip-link:focus { left: var(--sp-4); top: var(--sp-4); } ::selection { background: var(--color-circuit); color: white; } .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .section { padding-block: clamp(3rem, 7vw, 6rem); } .section--tight { padding-block: clamp(2rem, 5vw, 4rem); } .section--dark { background: var(--color-bg-dark); color: var(--color-text-on-dark); } .section--dark p { color: var(--color-text-on-dark-muted); } .section-title { text-align: center; margin-bottom: var(--sp-2); } .section-subtitle { text-align: center; color: var(--color-text-muted); max-width: 640px; margin-inline: auto; margin-bottom: var(--sp-7); } .section--dark .section-subtitle { color: var(--color-text-on-dark-muted); } .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--fs-xs); font-weight: 600; color: var(--color-circuit); margin-bottom: var(--sp-3); } .section--dark .eyebrow { color: var(--color-circuit-light); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }