/* ========================================================================== 星禾双语 · 悦见中秋 — 基础样式 依赖 tokens.css。只放全局重置、排版基调与通用工具类； 组件样式进 components.css。 ========================================================================== */ /* ========================================================================== 0. 唯一自托管字体：Marcellus（Latin 子集，14.5KB） -------------------------------------------------------------------------- 为什么只上拉丁子集： · 中文一套思源宋体 woff2 是 5~10MB —— 现场网络（手机热点）扛不住， 而微信里白屏/半截字比"字体不够精致"严重得多。汉字继续走系统宋体栈。 · 拉丁子集只有 14.5KB，且**只承担数字与英文展示字**， 恰好补掉最显眼的缺口：`0 / 5`、`01–05`、日期、英文标题。 为什么选 Marcellus：罗马碑体，笔画是"横细竖粗 + 端点有衬线"， 与中文宋体的骨架同源 —— 中英混排时不会一个像印刷一个像系统 UI。 ⚠️ unicode-range 必须保留（与 Google 分片一致）：没有它，浏览器会把 「汉字」也交给这个字体去试，凭空多一次回退判断。 ========================================================================== */ @font-face { font-family: "Marcellus"; src: url("../fonts/marcellus-latin.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100dvh; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text); background-color: var(--c-bg); /* 夜色：底部一团极淡的暖光（月与灯），顶部一层冷银薄光（呼应云纹的银白线描）。 ⚠️ 这两层画在 body 自身上，位于 body::before(云纹) 与 body::after(压暗层) **之下**， 只负责给底色打底；页面真正的明暗层次在 components.css 的那两层伪元素里调。 */ background-image: radial-gradient( 120% 60% at 50% 108%, rgba(233, 185, 73, 0.1) 0%, rgba(233, 185, 73, 0) 62% ), radial-gradient( 90% 45% at 50% -12%, rgba(150, 186, 210, 0.12) 0%, rgba(150, 186, 210, 0) 70% ); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* 弹层/抽屉打开时锁滚动（由 JS 加在 上） */ html.is-locked, html.is-locked body { overflow: hidden; touch-action: none; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; } button { cursor: pointer; -webkit-tap-highlight-color: transparent; } a { color: var(--c-gold); text-decoration: none; } ul, ol { list-style: none; } /* ---------- 标题：中文走宋体，英文走衬线 ---------- */ h1, h2, h3, h4 { font-weight: 500; line-height: var(--lh-tight); } /* ---------- 标题：走衬线栈 ---------- 中英复用同一套标题规则：--font-serif 在 html:lang(en) 下会被 components.css 重映射为西文衬线，因此这里不需要按语言分叉。 */ :lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) h4, h1, h2, h3, .font-serif-zh { font-family: var(--font-serif); } /* 中文标题用宽字距；西文不吃这一套（见 components.css 语言态修正） */ :lang(zh) h1, :lang(zh) h2, :lang(zh) h3, .font-serif-zh { letter-spacing: var(--ls-wide); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } /* ---------- 焦点可见（键盘可达） ---------- */ :focus-visible { outline: 2px solid var(--c-gold-soft); outline-offset: 3px; border-radius: var(--r-sm); } ::selection { background: rgba(233, 185, 73, 0.32); color: var(--c-text); } /* ---------- 布局工具 ---------- */ .container { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-pad); } .stack > * + * { margin-top: var(--sp-5); } .divider { height: 1px; background: var(--c-hairline); border: 0; } .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; } /* 点击区不小于 44px */ .tap { min-width: var(--tap-min); min-height: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; } /* ---------- 文字 ---------- */ .text-muted { color: var(--c-text-muted); } .eyebrow { font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--c-text-muted); } /* ---------- 滚动条（桌面） ---------- */ @media (pointer: fine) { ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--c-bg); } ::-webkit-scrollbar-thumb { background: rgba(233, 185, 73, 0.22); border-radius: var(--r-pill); } ::-webkit-scrollbar-thumb:hover { background: rgba(233, 185, 73, 0.36); } } /* ---------- 降低动态效果 ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }