.legal-container { max-width: 720px; margin: 0 auto; padding: clamp(2rem, 4vw, 3.5rem) 1.6rem 5rem; } .legal-card { background: var(--glass-bg, rgba(6, 12, 24, 0.75)); border: 1px solid var(--glass-border, rgba(79, 172, 254, 0.22)); border-radius: 24px; padding: clamp(1.6rem, 3.5vw, 2.4rem); margin-bottom: 1.4rem; box-shadow: 0 25px 80px rgba(15, 23, 42, 0.35); } .legal-eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #4facfe; margin-bottom: 0.6rem; } /* QA R5 (2026-07-18): CN mirror of EN's h1 rule needs an explicit CJK fallback before generic 'serif' — the same tofu-risk pattern legal.css hit on r18/r19 (self-hosted Noto Serif SC, loaded via Google Fonts link on this page instead — see chinese/legal.html ). */ .legal-card h1 { font-family: 'Cormorant Garamond', 'Noto Serif SC', 'Songti SC', 'SimSun', serif; font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 600; margin: 0 0 0.6rem; background: linear-gradient(135deg, #4facfe, #9479ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .legal-card h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.6rem; color: rgba(248, 250, 252, 0.9); } .legal-card p, .legal-card dd { margin: 0.3rem 0; color: rgba(248, 250, 252, 0.78); line-height: 1.6; } .legal-card dl { margin: 0.4rem 0; } .legal-card dt { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: #4facfe; margin-top: 0.7rem; } .legal-card dd { margin-left: 0; padding-left: 0; } .legal-card a { color: #4facfe; text-decoration: underline; text-underline-offset: 2px; } .legal-todo { font-size: 0.85rem; padding: 0.45rem 0.7rem; border-radius: 8px; background: rgba(232, 184, 109, 0.1); border: 1px solid rgba(232, 184, 109, 0.25); color: rgba(245, 208, 138, 0.9); display: inline-block; } /* QA R5 P2 (2026-07-18): [data-ux-mode="cozy"] .btn-primary (src/styles/components/buttons.css) sets background: var(--color-primary) = hsl(200,60%,45%), which is only 3.87:1 against the white label on the header Login CTA — fails WCAG AA 4.5:1. This file only loads on this page (page-local — does not touch the global --color-primary token used app-wide), so the bare .btn-primary selector below still only affects this page's two Header.js instances of the button: the desktop nav one (inside .site-header) AND the mobile-menu-overlay one (a SIBLING of .site-header, not a descendant — an earlier `.site-header .btn-primary`-scoped version of this rule missed it, verified live at 390px with the mobile menu open). Reuses the already-shipped --color-primary-dim token (hsl(200,55%,38%) = 5.27:1) for the resting state, with a darker shade for :hover so the two states stay visually distinct. */ [data-ux-mode="cozy"] .btn-primary { background: var(--color-primary-dim, hsl(200, 55%, 38%)); } [data-ux-mode="cozy"] .btn-primary:hover { background: hsl(200, 55%, 28%); }