/* ============================================================================ 無意 WUYI — 设计令牌 / Design Tokens v1.0 · 全中文品牌站 ---------------------------------------------------------------------------- 用法： 本文件只包含：变量 + 少量无侵入的排版工具类。不含组件样式。 字体二进制由 scripts/subset_fonts.py 生成，声明在 fonts.css。 ========================================================================== */ /* --------------------------------------------------------------------------- 0. 根节点 ------------------------------------------------------------------------ */ :root { /* 注意：本站沿用原站 62.5%（10px）基准，所有尺寸都是 rem 计算。 这里**不要**改成 100%，否则整站 rem 尺寸会放大 1.6 倍导致排版崩塌。 中文版的字号覆盖集中在 assets/css/zh.css，用 px/em 写，不依赖根字号。 */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* 中文渲染开关（放在最前，供排版引擎使用） */ font-kerning: normal; text-rendering: optimizeLegibility; } /* --------------------------------------------------------------------------- 1a. 字重 ------------------------------------------------------------------------ 宋体大字用 200（ExtraLight）才有原站明朝体的细横；黑体正文必须 400。 Windows 的「微软雅黑」只有 400/700 两档（Light 是独立家族名），任何 300 的正文在 Win 上会被四舍五入到 400 或合成伪细体 —— 故正文锁 400。 ------------------------------------------------------------------------ */ :root { --fw-display: 200; /* ≥40px 宋体标题 */ --fw-heading: 300; /* 20–32px 宋体标题 */ --fw-body: 400; /* 正文，全平台安全值 */ --fw-em: 500; /* 强调（中文不用 bold，用 +100 字重） */ --fw-label: 400; /* 拉丁大写标签 */ } /* --------------------------------------------------------------------------- 1. 字体栈 ------------------------------------------------------------------------ 命名原则： · 中文族名在「宋/黑」两族内切换，不跨风格混排（宋+楷同期出现需有理由）。 · 每一栈都以「本机最可能命中的同风格字体」收尾，保证离线/首屏不跳字。 ------------------------------------------------------------------------ */ :root { /* 品牌字「無意」：实际由 SVG 路径绘制（见 DESIGN.md §1.1）。 此栈是 SVG 缺失时的兜底，取宋体最细一档。 */ --font-brand: "WUYI Brand", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN", "Songti SC", "STSong", "SimSun", serif; /* 标题 / 导航 / 栏目名：宋体（明朝体同源） */ --font-serif: "WUYI Serif", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN", "Songti SC", "STSong", "SimSun", serif; /* 正文 / 说明 / 表单：黑体。不用自托管，直接吃系统字体，0 下载字节。 */ --font-sans: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "Helvetica Neue", "Segoe UI", Arial, sans-serif; /* 引文 / 诗句 / 署名：楷体承担中文的「斜体」语域（中文无真斜体） */ --font-kai: "WUYI Kai", "LXGW WenKai", "LXGW WenKai Screen", "Kaiti SC", "STKaiti", "KaiTi", "TW-Kai", serif; /* 拉丁衬线小字：年份、拉丁品牌名、页码 */ --font-latin-serif: "EB Garamond", "Garamond", "Apple Garamond", "Times New Roman", serif; /* 拉丁无衬线标签：EST. / SINCE / NEW 等小型大写 */ --font-latin-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif; /* 数字专用：价格、克数、日期。优先等宽数字（配合 font-variant-numeric） */ --font-num: "Inter", "Helvetica Neue", -apple-system, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; } /* --------------------------------------------------------------------------- 2. 字号阶梯 ------------------------------------------------------------------------ 比例 1.25（大三度偏紧），锚点 16px。下行加一个 off-scale 的 14px。 12 / 14(off) / 16 / 20 / 24 / 32 / 40 / 48 / 64 ------------------------------------------------------------------------ */ :root { --fs-12: 0.75rem; /* 12px — 仅拉丁大写标签，禁用于汉字正文 */ --fs-14: 0.875rem; /* 14px — 次要正文 / 图注 / 表单 */ --fs-16: 1rem; /* 16px — 正文基准 */ --fs-20: 1.25rem; /* 20px — 小标题 h3 */ --fs-24: 1.5rem; /* 24px — 标题 h2 */ --fs-32: 2rem; /* 32px — 标题 h1 */ --fs-40: 2.5rem; /* 40px — 页面主视觉标题 */ --fs-48: 3rem; /* 48px — 章节大字 */ --fs-64: 4rem; /* 64px — 品牌字桌面尺寸 */ /* 语义别名 —— 组件里只引用这一层，不直接写 --fs-32 */ --fs-body: var(--fs-16); --fs-body-sm: var(--fs-14); --fs-caption: var(--fs-12); --fs-lead: var(--fs-20); /* 导语 */ --fs-h3: var(--fs-20); --fs-h2: clamp(1.5rem, 2.2vw, 2rem); /* 24 → 32 */ --fs-h1: clamp(2rem, 3.6vw, 3rem); /* 32 → 48 */ --fs-display: clamp(2.5rem, 6.2vw, 4rem); /* 40 → 64 */ --fs-brand: clamp(2.75rem, 7.4vw, 4rem); /* 44 → 64 */ /* 竖排标签比同级横排小一档：竖排单列宽度 = 行高，字号过大会吃掉横向空间 */ --fs-vertical: var(--fs-14); --fs-vertical-lg: var(--fs-16); } /* --------------------------------------------------------------------------- 3. 行高 ------------------------------------------------------------------------ */ :root { --lh-brand: 1.15; /* 品牌二字，单行，压缩 */ --lh-display: 1.25; /* 40–64px 大字标题 */ --lh-heading: 1.45; /* 20–32px 标题（中文标题行高不能低于 1.35） */ --lh-body: 1.85; /* 16px 正文主力值 */ --lh-copy: 1.9; /* 长文（>300 字）再放松一档 */ --lh-small: 1.7; /* 14px 次要正文 */ --lh-caption: 1.6; /* 12px 拉丁标签 */ --lh-vertical: 1.9; /* 竖排：此行高即「列间距」 */ } /* --------------------------------------------------------------------------- 4. 字距 letter-spacing ------------------------------------------------------------------------ 中文与西文分开：汉字是定宽方块，字距直接等于字间空白，因此正文必须为 0。 ------------------------------------------------------------------------ */ :root { /* —— 中文 —— */ --ls-cjk-body: 0; /* 16px 正文：严禁加字距 */ --ls-cjk-small: 0.02em; /* 12–14px 汉字：极微量，抵消小字粘连 */ --ls-cjk-head: 0.06em; /* 20–32px 标题 */ --ls-cjk-display: 0.08em; /* 40–64px 大字标题 */ --ls-cjk-brand: 0.16em; /* 品牌二字：仪式感，仅二字可用 */ --ls-vertical: 0.1em; /* 竖排标签：沿纵轴生效 */ /* —— 西文 —— */ --ls-latin-body: 0; /* 拉丁正文：交给字体自身 kern */ --ls-latin-caps: 0.18em; /* 大写小字标签（EST. / SINCE） */ --ls-latin-caps-lg: 0.24em; /* 页脚版权行等超小号大写 */ --ls-num: 0.02em; /* 等宽数字，避免数位挤在一起 */ /* 中英间距基准：text-autospace 插入的间距约为 0.25 全角，对应 0.125em */ --cjk-latin-gap: 0.125em; } /* --------------------------------------------------------------------------- 5. 段落测量（每行字数） ------------------------------------------------------------------------ 单位用 em：中文 1em == 1 个汉字宽，所以 em 数值 == 每行字数。 ch 单位在中文字体里取「0」的宽度(≈0.5em)，不能直接当字数用。 ------------------------------------------------------------------------ */ :root { --measure-narrow: 22em; /* 导语 / 大字号段落：22 字/行 */ --measure: 30em; /* 正文标准：30 字/行（≈480px @16px） */ --measure-wide: 34em; /* 长文/文章页：34 字/行（≈544px） */ --measure-max: 38em; /* 绝对上限，超过 38 字换行会掉头 */ /* 段间节奏 */ --para-gap: 1.85em; /* = 一个行高，形成「空一行」 */ --heading-gap-top: 3.7em; /* 标题上方 = 2 行高 */ --heading-gap-bottom: 0.9em; /* 标题下方 ≈ 半行 */ } /* --------------------------------------------------------------------------- 6. 颜色 ------------------------------------------------------------------------ 中性 6 档，全部带极轻微暖调（+R -B），避免纯灰在暖光与食物照片旁发冷。 色值已按 WCAG 2.1 计算对比度，注释中的比值针对 --paper (#faf9f5)。 ------------------------------------------------------------------------ */ :root { --ink-900: #111110; /* 正文黑。非 #000：OLED 上纯黑会「咬」掉笔画边缘。 15.9:1 */ --ink-700: #3a3a36; /* 次级标题 / 强调正文 10.5:1 */ --gray-600: #6b6b64; /* 图注、元信息、禁用文字 5.2:1 */ --gray-400: #9c9c94; /* 分隔线标签、占位符（不承载关键信息） 2.8:1 */ --gray-200: #d5d4cd; /* 边框、1px 分隔线 1.5:1 */ --gray-100: #e8e7e0; /* 区块底、图片占位 1.2:1 */ --paper: #faf9f5; /* 页面底：和纸白，非纯白 */ --white: #ffffff; /* 仅用于图片上的反白文字 */ /* 语义映射 */ --color-bg: var(--paper); --color-text: var(--ink-900); --color-text-soft: var(--ink-700); --color-text-mute: var(--gray-600); --color-rule: var(--gray-200); --color-surface: var(--gray-100); --color-inverse-bg: var(--ink-900); --color-inverse-text: var(--paper); /* 季节色 —— 每季只允许激活一个，通过 [data-season] 切换 */ --season-spring: #c2a09b; /* 樱 */ --season-summer: #40595f; /* 靛 */ --season-autumn: #a06a3f; /* 柿 */ --season-winter: #4b4b53; /* 墨 */ --accent: var(--season-autumn); /* 默认；建议按当前季节在 覆盖 */ /* 状态色：只用于表单校验，不进入视觉体系 */ --color-error: #9e3b30; /* 6.0:1 */ --color-success: var(--ink-700); /* 刻意不用绿色，成功态仅靠文案与对勾 */ } html[data-season="spring"] { --accent: var(--season-spring); } html[data-season="summer"] { --accent: var(--season-summer); } html[data-season="autumn"] { --accent: var(--season-autumn); } html[data-season="winter"] { --accent: var(--season-winter); } /* --------------------------------------------------------------------------- 7. 间距刻度（8px 基准） ------------------------------------------------------------------------ 4px 是唯一的半档，只用于图标内边距、描边微调等「光学」场景。 ------------------------------------------------------------------------ */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 192px; /* 语义间距 */ --gap-inline: var(--space-4); /* 行内元素间距（图标与文字） */ --gap-stack: var(--space-6); /* 同组段落/列表之间 */ --gap-block: var(--space-9); /* 内容块之间 */ --section-y: clamp(64px, 10vw, 128px); /* 章节上下留白 */ --hero-y: clamp(96px, 14vw, 192px); /* 首屏文字块的上下呼吸 */ } /* --------------------------------------------------------------------------- 8. 栅格与容器 ------------------------------------------------------------------------ */ :root { --page-max: 1440px; /* 内容最大宽度（更宽的屏幕交给背景图出血） */ --content-max: 1200px; /* 常规内容栏 */ --grid-columns: 12; --gutter: 24px; --gutter-sm: 16px; --edge: clamp(20px, 5vw, 64px); /* 页面左右安全边距 */ } /* --------------------------------------------------------------------------- 9. 线条 / 圆角 / 阴影 ------------------------------------------------------------------------ 原站无圆角、无阴影。此处显式归零，防止组件库带进来。 ------------------------------------------------------------------------ */ :root { --hairline: 1px; --rule: var(--hairline) solid var(--color-rule); --radius: 0; --shadow: none; --overlay-hero: rgba(17, 17, 16, 0.18); /* 首屏图上的极轻遮罩 */ } /* --------------------------------------------------------------------------- 10. 动效 —— 淡入、慢速、无回弹 ------------------------------------------------------------------------ */ :root { --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 240ms; --dur-base: 480ms; --dur-slow: 900ms; --dur-hero: 1400ms; } /* =========================================================================== 排版工具类 ========================================================================== */ /* --- 中文基础排版 ------------------------------------------------------- */ .u-cjk { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-cjk-body); color: var(--color-text); /* 避头尾：strict 会在「，。」「」』：；！？」前禁止断行 */ line-break: strict; word-break: normal; overflow-wrap: break-word; /* 明确关闭自动加空，改由构建期 .u-lat 包裹拉丁串控制，避免双重间距 */ text-autospace: no-autospace; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .u-cjk-title { font-family: var(--font-serif); font-weight: 300; line-height: var(--lh-heading); letter-spacing: var(--ls-cjk-head); text-align: justify; text-align-last: left; /* 中文标题不撑满，避免末行拉散 */ text-justify: inter-ideograph; } .u-measure { max-width: var(--measure); } .u-measure-wide { max-width: var(--measure-wide); } .u-measure-narrow{ max-width: var(--measure-narrow); } /* --- 段落节奏 ----------------------------------------------------------- */ .u-cjk p, p.u-cjk { margin: 0 0 var(--para-gap); text-align: justify; text-justify: inter-ideograph; } .u-cjk p:last-child { margin-bottom: 0; } /* --- 拉丁串包裹（构建期自动生成 ） ------------------ */ .u-lat { margin-inline: 0.15em; /* 1/4 个汉字的一半，视觉上与 text-autospace 等效 */ font-family: var(--font-latin-sans); letter-spacing: var(--ls-latin-body); } /* 紧邻全角标点时不需要额外间距，交给标点自身的左/右侧空白 */ .u-lat + .u-punct-start, .u-punct-end + .u-lat { margin-inline: 0; } /* --- 标点占位压缩 ------------------------------------------------------- */ /* Chrome/Edge 123+：把行首全角标点的左半空白切掉，消除「空洞」 */ @supports (text-spacing-trim: trim-start) { .u-cjk { text-spacing-trim: trim-start; } } /* --- 竖排 --------------------------------------------------------------- */ /* 关键点： 1. writing-mode 需加 height 约束才会折列；不写 height 则永远单列。 2. line-height 在竖排下是「列间距」，不是行距。 3. 字体必须带 vert GSUB 表，否则「，。」会跑到格子中间（Noto Serif CJK 有）。 */ .u-vertical { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; text-orientation: mixed; line-height: var(--lh-vertical); letter-spacing: var(--ls-vertical); font-size: var(--fs-vertical); font-feature-settings: "vert" 1, "vrt2" 1; text-align: start; display: inline-block; /* 规避 Safari 中 flex 子项按横排计算尺寸的旧 bug */ white-space: nowrap; } .u-vertical--tight { letter-spacing: 0.04em; } .u-vertical--loose { letter-spacing: 0.18em; } /* 竖排中的拉丁：≤3 字母立正（upright），长词保持旋转（mixed，默认） */ .u-vertical .u-latin-upright { text-orientation: upright; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-latin-sans); font-size: 0.85em; } /* 縦中横：竖排里的 1–4 位数字横躺。Safari 只稳支持 all，故此处用 all。 */ .u-combine { text-combine-upright: all; -webkit-text-combine: horizontal; letter-spacing: var(--ls-num); font-variant-numeric: tabular-nums; } /* digits 写法更省（只横排数字串），Chrome 支持时优先 */ @supports (text-combine-upright: digits 2) { .u-combine { text-combine-upright: digits 2; } } /* 竖排容器里的横排小块（如英文段落）不要用；此处仅提供「竖排内的横排数字行」 */ .u-vertical .u-horizontal-inline { writing-mode: horizontal-tb; display: inline-block; margin-block: 0.35em; } /* --- 移动端：竖排降级 ---------------------------------------------------- */ /* 768px 以下竖排标签改为横排：竖排单列 + 字距会占到 40px 以上宽度， 在 375px 屏上挤压正文；同时 iOS Safari 竖排遇长数字串会异常断列。 */ @media (max-width: 767px) { :root { --ls-vertical: 0.12em; /* 改横排后字距改由横排规则接管 */ --section-y: 64px; } .u-vertical { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; text-orientation: initial; display: inline; white-space: normal; letter-spacing: var(--ls-cjk-small); } .u-vertical .u-latin-upright { text-orientation: initial; letter-spacing: var(--ls-latin-caps); } .u-combine { text-combine-upright: none; -webkit-text-combine: none; } } /* 允许「仅在桌面竖排」的装饰性标签（如栏目侧标） */ @media (max-width: 767px) { .u-vertical--desktop-only { display: none; } } /* --- 竖排的双向兜底：不支持竖排的环境（极旧 WebView） ------------------- */ @supports not (writing-mode: vertical-rl) { .u-vertical { writing-mode: horizontal-tb; display: block; } } /* --- 无障碍：减少动效 --------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-hero: 0ms; } } /* --- 打印 --------------------------------------------------------------- */ @media print { :root { --color-bg: #ffffff; --color-text: #000000; } }