/* ============================================================ Language switching — 繁體中文 (zh-Hant) for HK · Macau · Taiwan Two pieces: 1. .lg-gate — conspicuous first-visit entry selector. SEO-SAFE: it is an overlay on TOP of the fully rendered English page (no redirect, no cloaking, content crawlable with JS off). Real to /zh-hant/ does the routing; hreflang in tells crawlers about the pair. 2. .lg-toggle — persistent EN / 繁 segmented control in the top utility bar, for switching at any time. Traditional glyphs use Noto Serif/Sans TC (imported in ). ============================================================ */ :root { --font-serif-tc: "Noto Serif TC", "Noto Serif SC", Georgia, serif; --font-sans-tc: "Noto Sans TC", "Noto Sans SC", system-ui, sans-serif; } /* ---------- 1. Entry gate ---------------------------------- */ .lg-gate { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 32px; background: var(--parchment); opacity: 0; animation: lg-gate-in 420ms cubic-bezier(0.22,1,0.36,1) forwards; } .lg-gate[hidden] { display: none; } @keyframes lg-gate-in { to { opacity: 1; } } /* faint meridian texture so the gate feels like part of the brand world */ .lg-gate__bg { position: absolute; inset: 0; background-image: url('/assets/pattern-meridians.svg'); background-size: 260px 260px; opacity: 0.05; pointer-events: none; } .lg-gate__card { position: relative; width: 100%; max-width: 720px; background: var(--paper, #fff); border: 1px solid var(--rule); border-top: 3px solid var(--brand-red); box-shadow: 0 40px 100px rgba(2,29,66,0.28); padding: 48px 52px 40px; text-align: center; transform: translateY(10px); animation: lg-card-in 520ms 80ms cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes lg-card-in { to { transform: translateY(0); } } .lg-gate__brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; } .lg-gate__logo { height: 40px; width: 40px; object-fit: contain; } .lg-gate__zh { font-family: var(--font-serif-tc); font-weight: 700; font-size: 24px; line-height: 1; color: var(--brand-red); letter-spacing: 0.02em; } .lg-gate__wm { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1; color: var(--brand-navy); letter-spacing: -0.01em; } .lg-gate__eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; } .lg-gate__eyebrow b { color: var(--brand-red); font-weight: 700; } .lg-gate__title { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.15; color: var(--brand-navy); margin: 0 0 28px; } .lg-gate__title .lg-tc { font-family: var(--font-serif-tc); } .lg-gate__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; } .lg-choice { position: relative; display: flex; flex-direction: column; gap: 4px; text-align: center; /* explicit —