/* =============================================================== Shared i18n stylesheet — modal, settings button, @font-face declarations, and per-language typography rules. Loaded by landing / workspace / about / docs. ================================================================== */ /* ---- Brand-identity lock ---- The Proscenium wordmark and hero title stay in Fraunces with fixed metrics regardless of language. Without this, CJK font-family and letter-spacing overrides alter the logo appearance. */ .logo, .brand, .footer-brand { font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif !important; letter-spacing: -0.01em !important; font-weight: 500 !important; } h1.hero-title { font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif !important; font-weight: 400 !important; letter-spacing: -0.035em !important; font-size: clamp(64px, 11vw, 148px) !important; } h1.hero-title .em { font-style: italic !important; } .psc-lang-modal h2 .em, .lang-modal h2 .em, .modal h2 .em { font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif !important; font-style: italic !important; } /* ---------------- Custom Chinese fonts ---------------- */ /* Registered under a single family so we can control weight ranges with fallbacks. Files live under /fonts/chinese/. */ @font-face { font-family: 'Proscenium CN'; src: url('/fonts/chinese/wencang-shufang.ttf') format('truetype'); font-weight: 300 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Proscenium CN'; src: url('/fonts/chinese/lemi-zhixia.ttf') format('truetype'); font-weight: 600 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Proscenium CN Display'; src: url('/fonts/chinese/gongfan-free.ttf') format('truetype'); font-weight: 400 900; font-style: normal; font-display: swap; } /* ---------------- Chinese typography ---------------- Only applied when the page's is zh-CN. Leaves every other language untouched. -------------------------------------------------- */ html[lang="zh-CN"] body { font-family: 'Proscenium CN', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; line-height: 1.85; letter-spacing: 0.02em; font-feature-settings: 'palt' 1; text-rendering: optimizeLegibility; } /* Display / headings use the heavier display face for identity. */ html[lang="zh-CN"] .serif, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3, html[lang="zh-CN"] h4, html[lang="zh-CN"] h1.page-title, html[lang="zh-CN"] h2.section-title, html[lang="zh-CN"] h2.closer-title, html[lang="zh-CN"] .feature-copy h3, html[lang="zh-CN"] .closer h2, html[lang="zh-CN"] .hero-tagline, html[lang="zh-CN"] .doc-section h2, html[lang="zh-CN"] .modal h2, html[lang="zh-CN"] .lang-modal h2 { font-family: 'Proscenium CN Display', 'Proscenium CN', 'PingFang SC', 'Hiragino Sans GB', 'Songti SC', serif; font-weight: 600; letter-spacing: 0.04em; line-height: 1.3; } /* Body copy — a slightly taller line-height so Chinese characters breathe. Balances proper-noun Latin runs inline. */ html[lang="zh-CN"] p, html[lang="zh-CN"] li, html[lang="zh-CN"] .hero-desc, html[lang="zh-CN"] .feature-copy p, html[lang="zh-CN"] .feature-list li, html[lang="zh-CN"] .section-lede, html[lang="zh-CN"] .closer p, html[lang="zh-CN"] .prose p, html[lang="zh-CN"] .doc-section p, html[lang="zh-CN"] .doc-section li, html[lang="zh-CN"] .note-body, html[lang="zh-CN"] .sugg-desc, html[lang="zh-CN"] .msg, html[lang="zh-CN"] .nav-links a, html[lang="zh-CN"] .footer-brand .footer-tag { font-family: inherit; letter-spacing: 0.025em; line-height: 1.9; font-weight: 400; } /* Headings — the hero-title is brand-locked above; remaining heading size/spacing stays per-language for translated content. */ html[lang="zh-CN"] h1.page-title { font-size: clamp(40px, 6vw, 76px); letter-spacing: 0.04em; } html[lang="zh-CN"] .hero-tagline { font-style: normal; font-weight: 500; letter-spacing: 0.04em; } html[lang="zh-CN"] .page-lede { letter-spacing: 0.03em; font-weight: 400; line-height: 1.65; } /* CJK line-breaking — avoid orphaned characters, balance lines */ html[lang="zh-CN"] p, html[lang="zh-CN"] li, html[lang="zh-CN"] .hero-desc, html[lang="zh-CN"] .hero-tagline, html[lang="zh-CN"] .section-lede, html[lang="zh-CN"] .feature-copy p, html[lang="zh-CN"] .closer p, html[lang="zh-CN"] .page-lede, html[lang="zh-CN"] .doc-section p { line-break: strict; word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; } html[lang="zh-CN"] .hero-desc, html[lang="zh-CN"] .section-lede, html[lang="zh-CN"] .feature-copy p, html[lang="zh-CN"] .closer p { max-width: 620px; margin-left: auto; margin-right: auto; } /* Buttons + kicker + label tracking */ html[lang="zh-CN"] .btn, html[lang="zh-CN"] .lang-continue-btn, html[lang="zh-CN"] .icon-btn.pill, html[lang="zh-CN"] .nav-settings { letter-spacing: 0.1em; font-weight: 500; } html[lang="zh-CN"] .kicker, html[lang="zh-CN"] .feature-kicker span:last-child, html[lang="zh-CN"] .track-label, html[lang="zh-CN"] .tb-btn, html[lang="zh-CN"] .toc-title { letter-spacing: 0.18em; } html[lang="zh-CN"] .chip { letter-spacing: 0.06em; } /* Numbers stay in Latin family for readability */ html[lang="zh-CN"] .step-num, html[lang="zh-CN"] .folder-count, html[lang="zh-CN"] .count, html[lang="zh-CN"] .badge { font-family: 'Fraunces', 'Inter', serif; letter-spacing: 0; } /* Modal — the CN display face sings at large size */ html[lang="zh-CN"] .lang-modal h2, html[lang="zh-CN"] .modal h2 { letter-spacing: 0.04em; line-height: 1.25; } /* ---------------- Japanese ---------------- */ html[lang="ja"] body { font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', -apple-system, sans-serif; font-weight: 350; letter-spacing: 0.02em; line-height: 1.85; } html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] h4, html[lang="ja"] .serif, html[lang="ja"] .hero-tagline { font-family: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif; font-weight: 500; letter-spacing: 0.02em; line-height: 1.3; } html[lang="ja"] .hero-tagline { font-style: normal; font-weight: 500; } html[lang="ja"] .btn, html[lang="ja"] .lang-continue-btn { letter-spacing: 0.08em; } /* Japanese line-breaking — avoid orphaned characters, balance lines */ html[lang="ja"] p, html[lang="ja"] li, html[lang="ja"] .hero-desc, html[lang="ja"] .hero-tagline, html[lang="ja"] .section-lede, html[lang="ja"] .feature-copy p, html[lang="ja"] .closer p, html[lang="ja"] .page-lede, html[lang="ja"] .doc-section p { line-break: strict; word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; } html[lang="ja"] .hero-desc, html[lang="ja"] .section-lede, html[lang="ja"] .feature-copy p, html[lang="ja"] .closer p { max-width: 620px; margin-left: auto; margin-right: auto; } /* ---------------- Korean ---------------- */ html[lang="ko"] body { font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', -apple-system, sans-serif; font-weight: 350; letter-spacing: 0; line-height: 1.8; } html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3, html[lang="ko"] .serif { font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif; font-weight: 500; line-height: 1.3; } /* ---------------- Arabic (RTL) ---------------- */ html[lang="ar"] { direction: rtl; } html[lang="ar"] body { font-family: 'Noto Sans Arabic', 'Amiri', 'Geeza Pro', 'Segoe UI', -apple-system, sans-serif; font-weight: 400; letter-spacing: 0; line-height: 1.85; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .serif { font-family: 'Noto Serif Arabic', 'Amiri', serif; font-weight: 500; line-height: 1.4; } /* ---------------- Latin overrides for long strings ---------------- */ html[lang="de"] .hero-desc, html[lang="de"] .section-lede, html[lang="de"] .feature-copy p, html[lang="de"] .closer p { max-width: 720px; text-wrap: pretty; } html[lang="de"] .btn, html[lang="de"] .lang-continue-btn { padding: 14px 22px; font-size: 14px; } html[lang="de"] .hero-eyebrow, html[lang="de"] .feature-list li, html[lang="de"] .nav-links a { letter-spacing: normal; } html[lang="es"] .hero-desc, html[lang="es"] .section-lede { max-width: 720px; } html[lang="fr"] .btn, html[lang="fr"] .lang-continue-btn { padding: 14px 22px; } html[lang="fr"] .hero-desc, html[lang="fr"] .section-lede { max-width: 720px; } /* =============================================================== LANGUAGE MODAL + PRE-RENDER GATE The modal itself lives outside the page's content and is inserted by every page once, so it renders identically everywhere. ================================================================== */ /* Pre-render gate: hide the page until we know a language is set. */ html.psc-lang-pending body > *:not(.psc-lang-backdrop):not(.lang-backdrop):not(.modal-backdrop):not(script) { visibility: hidden !important; } html.psc-lang-pending { background: var(--psc-bg, #faf7f2); } .psc-lang-backdrop { position: fixed; inset: 0; z-index: 9999; background: rgba(31, 28, 23, 0.42); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .psc-lang-backdrop.open { opacity: 1; pointer-events: auto; } html.psc-lang-pending .psc-lang-backdrop { opacity: 1 !important; pointer-events: auto !important; visibility: visible !important; } .psc-lang-modal { background: #ffffff; color: #1f1c17; border-radius: 24px; box-shadow: 0 40px 100px rgba(31, 28, 23, 0.18), 0 8px 24px rgba(31, 28, 23, 0.08); padding: 44px 40px 36px; max-width: 540px; width: 100%; text-align: center; border: 1px solid #ece5d7; transform: translateY(24px) scale(0.97); opacity: 0; transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } .psc-lang-backdrop.open .psc-lang-modal, html.psc-lang-pending .psc-lang-backdrop .psc-lang-modal { transform: translateY(0) scale(1); opacity: 1; } .psc-lang-mark { width: 48px; height: 48px; margin: 0 auto 20px; color: #b8935a; display: grid; place-items: center; } .psc-lang-modal h2 { font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif; font-weight: 400; font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 10px; color: #1f1c17; } .psc-lang-modal h2 .em { font-style: italic; color: #b8935a; } .psc-lang-sub { color: #8a8074; font-size: 15px; margin: 0 0 32px; line-height: 1.6; } .psc-lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 30px; } .psc-lang-option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #ffffff; border: 1px solid #ece5d7; border-radius: 14px; text-align: left; color: #1f1c17; cursor: pointer; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; font-size: 15px; font-family: inherit; } .psc-lang-option:hover { border-color: #d4b688; background: #fbf8f2; } .psc-lang-option.selected { border-color: #b8935a; background: linear-gradient(135deg, rgba(184, 147, 90, 0.12), transparent); box-shadow: 0 0 0 3px rgba(184, 147, 90, 0.18); } .psc-lang-option .psc-native { font-weight: 500; font-size: 17px; } .psc-lang-option .psc-english { color: #8a8074; font-size: 12.5px; letter-spacing: 0.03em; } .psc-lang-text { display: flex; flex-direction: column; gap: 2px; } .psc-check { margin-left: auto; color: #b8935a; opacity: 0; transition: opacity 0.2s; } .psc-lang-option.selected .psc-check { opacity: 1; } .psc-continue-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 32px; border-radius: 999px; font-size: 15px; font-weight: 500; font-family: inherit; border: none; cursor: pointer; background: #1f1c17; color: #faf7f2; box-shadow: 0 4px 12px rgba(31, 28, 23, 0.12), 0 12px 32px rgba(31, 28, 23, 0.08); transition: background 0.25s, transform 0.25s, box-shadow 0.25s; } .psc-continue-btn:hover:not(:disabled) { transform: translateY(-1px); background: #2b271f; } .psc-continue-btn:disabled { opacity: 0.35; cursor: not-allowed; } .psc-continue-btn .psc-arrow { transition: transform 0.25s; } .psc-continue-btn:hover:not(:disabled) .psc-arrow { transform: translateX(3px); } /* Chinese-typography inside the modal */ html[lang="zh-CN"] .psc-lang-modal { font-family: 'Proscenium CN', 'PingFang SC', 'Hiragino Sans GB', sans-serif; } html[lang="zh-CN"] .psc-lang-modal h2 { font-family: 'Proscenium CN Display', 'Proscenium CN', 'PingFang SC', serif; letter-spacing: 0.04em; font-weight: 600; } html[lang="zh-CN"] .psc-continue-btn { letter-spacing: 0.1em; } @media (max-width: 640px) { .psc-lang-grid { grid-template-columns: 1fr; } .psc-lang-modal { padding: 32px 24px 28px; } } @media (prefers-reduced-motion: reduce) { .psc-lang-backdrop, .psc-lang-modal, .psc-continue-btn { transition: none !important; animation: none !important; } }