/* Legal pages — extends the homepage design system in home.css. */ .legal-header .nav-links { gap: 18px; } .legal-header .legal-home { color: var(--ink-2); font-size: 15px; } .legal-header .legal-home:hover { color: var(--ink); } .legal-shell { width: min(100% - 48px, 1120px); margin: 0 auto; padding: 72px 0 112px; } .legal-intro { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 64px; align-items: end; padding: 36px 0 54px; border-bottom: 1px solid var(--seam); } /* 网格项默认 min-width:auto = 最小内容宽, 而德语复合词标题("Rückerstattungsrichtlinie") 在 42px 下就是一个 500px+ 的不可断整块 → 它把这一列连同整页撑到视口之外, 被 body{overflow-x:hidden} 横向裁掉(与工单B4 的 .screen/.rname 同一类病)。 min-width:0 让这一列老老实实缩到可用宽, 断行交给下面 main.doc h1 的规则处理。 */ .legal-intro > div { min-width: 0; } .legal-intro::after { content: ""; width: 100%; aspect-ratio: 1.55; border-radius: var(--r-card); background: radial-gradient(circle at 28% 28%, var(--yellow) 0 9%, transparent 9.5%), radial-gradient(circle at 70% 35%, var(--blue) 0 12%, transparent 12.5%), radial-gradient(circle at 48% 72%, var(--red) 0 10%, transparent 10.5%), linear-gradient(145deg, var(--card), var(--panel)); border: 1px solid var(--seam); box-shadow: var(--sh-soft); } .legal-kicker { color: var(--ink-2); font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 18px; } main.doc h1 { max-width: 18ch; font-size: clamp(42px, 6vw, 68px); line-height: 1.02; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; /* 兜底断词: break-word 只在"这个词单独占一整行也放不下"时才生效, 放得下的 语言(en/fr/es/zh…)完全不受影响, 标题不会被无端打散。 */ overflow-wrap: break-word; } /* 但光靠 break-word 会切在"Datenschutzerklä|rung"这种地方 —— 德语复合词在 42px 标题下 动辄 500px+, 硬断必然难看。hyphens:auto 让浏览器按德语断词词典加连字符 ("Datenschutz-|erklärung"), break-word 退居兜底。只挂 :lang(de)(页面 ), 其余六语标题一个像素不动 —— 同 home.css 里 :lang(ja) 的做法。 */ :lang(de) main.doc h1 { -webkit-hyphens: auto; hyphens: auto; } /* 前缀: Safari 17 以前只认 -webkit- */ main.doc .updated { color: var(--fine); font-size: 14px; margin-top: 20px; } .legal-body { max-width: 760px; margin: 0 auto; padding-top: 56px; } .legal-body > p:first-child { color: var(--ink-2); font-size: 18px; line-height: 1.7; margin-bottom: 34px; } main.doc h2 { font-size: clamp(23px, 3vw, 29px); line-height: 1.2; font-weight: 600; letter-spacing: -.018em; margin: 48px 0 16px; padding-top: 4px; } main.doc p, main.doc li { color: var(--ink-2); font-size: 16px; line-height: 1.75; } main.doc p { margin-bottom: 16px; } main.doc strong { color: var(--ink); font-weight: 600; } main.doc ul { list-style: none; display: grid; gap: 14px; margin: 18px 0 24px; } main.doc li { position: relative; padding-left: 24px; } main.doc li::before { content: ""; position: absolute; left: 2px; top: .74em; width: 7px; height: 7px; border-radius: 50%; background: var(--green); } main.doc a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blue) 55%, transparent); text-underline-offset: 3px; } main.doc a:hover { text-decoration-color: var(--blue); } main.doc .soft { color: var(--fine); } .legal-footer .links { align-items: center; } .legal-footer .copyright { color: var(--fine); font-size: 13px; } @media (max-width: 720px) { .legal-shell { width: min(100% - 36px, 1120px); padding: 44px 0 80px; } .legal-intro { grid-template-columns: 1fr; gap: 30px; padding: 24px 0 40px; } .legal-intro::after { width: min(180px, 55vw); } .legal-header .legal-home { display: none; } .legal-header .brand-name { display: none; } .legal-header .nav-links { gap: 10px; } .legal-header .btn-sm { padding: 9px 13px; font-size: 13px; } .legal-body { padding-top: 42px; } main.doc h2 { margin-top: 40px; } }