/* ============================================================ 创一下 (cyxhome.com) 设计令牌 · Design Tokens ------------------------------------------------------------ 全站唯一的设计变量来源。配色 / 字号 / 圆角 / 阴影 / 间距的 任何调整，只改这里，全站生效。 命名规范：--cx-<类别>-<语义>[-<状态>] 版本：v9 · 2026-10-01（WF3 批次：三层字体栈 —— 新增 --cx-font-heading / --cx-font-body，正文由思源切系统字体； WF 批次1：字体栈拆分 —— 新增 --cx-font-latin / --cx-font-ui / --cx-font-mono； W5-2B 批次：交互态启用 —— 新增 --cx-dur-1~4 时长令牌、启用 --cx-ease，65 条 transition 统一走令牌；W5-2A 批次：层2 分档合并 + 层3 族收敛，新增 10 个令牌、收敛 285 处；W5 批次：收编辅助色 / 局部页色板共 7 个令牌； W1 批次：品牌蓝整族下移、--cx-ink-4 加深、补行高/缓动令牌； W3 批次：新增 --cx-font-sans，字体栈收敛为单一来源） 【维护规则】 1) 本文件必须在 custom.css / portal.css / thread.css / forum.css 之前加载（当前由 template/discuzx5/common/header_common.php 引入） 2) 这里只管前台自研样式。Discuz 后台主题变量 --dz-* 是另一套体系， 两者不要互相引用（--dz-fa 例外：由 custom.css 显式对齐到 --cx-ink-2） 3) 变量名一经确定不再改名；废弃值先标 @deprecated 保留一个版本周期 4) 改本文件后，记得同步提升引用方 CSS 的 ?v= 版本号 5) **与小程序同源**：色板数值镜像 cyx-miniprogram/app.wxss 的 page{--brand/--ink-1..6/--line/--fill-*}，两端改动需同步 6) ⚠️ 待同步（2026-09-28 · W1）：本批改动了品牌蓝整族与 --cx-ink-4， cyx-miniprogram/app.wxss 尚未同步（已确认本轮不动小程序）。 下次动小程序时，按下表对齐： --brand #2f7bff → #1f5fd6 --brand-deep #1d5fd6 → #1748a8 --brand-lite #5b9bff → #4d86ee --ink-4 #98a2b3 → #6b7686 ============================================================ */ /* ═══════════════════════════════════════════════════════════════════════ 思源黑体（Noto Sans SC）自建子集 · W73 批次 ───────────────────────────────────────────────────────────────────── · 为什么自建子集：Google 的 unicode-range 分片在中文场景几乎无效 （实测全站 1189 字命中 61/101 个分片，合计 3.0MB，与整包同量级）； 本站用真实字符集做子集，单字重仅 ~200KB，快 15 倍。 · 字符集：界面文案 + 数据库实际内容，去重 1189 汉字 + 高频符号， 共 1413 字形。实测对线上真实内容覆盖 97.5%，缺失部分为生僻符号 与 emoji，会安静回退到系统字体。 · font-display: swap —— 先用系统字体渲染，字体到位再替换， 首屏渲染不被阻塞（代价是极短暂的字形切换）。 · ⚠️ 路径必须用相对路径：本文件是纯 .css，Discuz 的 {STATICURL} 模板变量 只在 .php/.tpl 里被解析，写在这里会原样输出 → 浏览器请求 404。 本文件位于 static/css/，字体在 static/fonts/，故用 ../fonts/。 · 版本号：字体文件更新时必须同步 +1，否则用户拿不到新字体。 ═══════════════════════════════════════════════════════════════════════ */ @font-face { font-family: "Noto Sans SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/noto-sans-sc-400.woff2?v=1") format("woff2"); } @font-face { font-family: "Noto Sans SC"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/noto-sans-sc-500.woff2?v=1") format("woff2"); } :root { /* ─────────────── 品牌色 ─────────────── */ --cx-brand: #1f5fd6; /* 主品牌蓝（原 #2f7bff：白底对比 3.89→5.73，达 AA）*/ --cx-brand-hover: #1450c4; /* 悬停态（原 #0b63ef）*/ --cx-brand-active: #0a3e9e; /* 按下 / 激活态（原 #0353cc）*/ --cx-brand-deep: #1748a8; /* 渐变暗端（原 #1d5fd6；小程序 --brand-deep）*/ --cx-brand-soft: #eaf2ff; /* 品牌浅底：选中行、标签底 */ --cx-brand-soft2: #f4f8ff; /* 更浅：整块浅底 */ --cx-brand-soft3: #d6e6ff; /* 更重：浅底上的描边 */ --cx-brand-lite: #4d86ee; /* 渐变亮端（原 #5b9bff；小程序 --brand-lite）*/ --cx-brand-lite2: #3f78e0; /* 渐变亮端 2（原 #4e8fff）*/ --cx-brand-ring: rgba(31, 95, 214, .14); /* 聚焦光环 */ /* ─────────────── 文字色 5 档（对齐小程序 --ink-*）─────────────── */ --cx-ink-1: #1b2b4a; /* 标题 / 强调 */ --cx-ink-2: #344054; /* 正文 */ --cx-ink-3: #667085; /* 次要文字 */ --cx-ink-4: #616b7a; /* 弱化：时间、计数、占位（#98a2b3 2.58 → 4.60 达标；9/30 再由 #6b7686 统一调深）*/ --cx-ink-5: #c3cad6; /* 最弱：分隔符、禁用、空态（小程序 --ink-6）*/ --cx-ink-invert: #ffffff; /* 深底上的文字 */ /* @deprecated 兼容别名（v1 命名 → v2 档位），保留一个版本周期 */ --cx-text-1: var(--cx-ink-1); --cx-text-2: var(--cx-ink-2); --cx-text-3: var(--cx-ink-3); --cx-text-4: var(--cx-ink-4); /* ─────────────── 边框 / 分隔线 ─────────────── */ --cx-border-strong: #d0d5dd; /* 输入框描边等需要看得见的边框 */ --cx-border: #e8ecf2; /* 常规分隔线 */ --cx-border-soft: #eef1f5; /* 极轻分隔：表格行、列表底 */ /* ─────────────── 背景 / 中性填充 ─────────────── */ --cx-bg-page: #f5f6f8; /* 页面底 */ --cx-bg-card: #ffffff; /* 卡片底 */ --cx-bg-soft: #fbfcfe; /* 输入框底 */ --cx-fill-1: #f7f9fc; /* 最轻填充：表格行、列表底 */ --cx-fill-2: #f4f7fc; /* 轻填充：筛选条、条状块 */ --cx-fill-3: #f2f5fa; /* 中填充：标签、空态 */ --cx-fill-4: #edf1f8; /* 重填充：hover、强调块 */ /* ─────────────── 状态色（对齐小程序 --red/--orange/--green/--purple）─── */ --cx-danger: #c93a20; /* 错误 / 警示（文字） */ --cx-danger-soft: #fef0ef; /* 错误浅底 */ --cx-danger-ink: #b42318; /* 浅底上的深红字 */ --cx-success: #12b76a; /* 成功 */ --cx-success-soft: #e7f8ef; /* 成功浅底 */ --cx-success-ink: #0b6b3a; /* 浅底上的深绿字 */ --cx-warning: #f79009; /* 提醒 */ --cx-warning-soft: #fff6e8; /* 提醒浅底 */ --cx-warning-ink: #b54708; /* 浅底上的深棕字 */ --cx-purple: #7f56d9; /* 辅助色 */ --cx-purple-soft: #f4f0fe; --cx-teal: #12b0a0; /* 辅助色 */ --cx-teal-soft: #e9f8fb; --cx-amber-soft: #fff8ec; /* 琥珀浅底（签到 / 等级） */ --cx-star: #f5a623; /* 等级星星（暖橙） */ /* ─────────────── 辅助色 / 局部页色板（W5 收编）─────────────── 下列颜色原以字面量散落在自研页面（积分空间 / 等级说明 / 新手指引 / 我的关注） 与自定义 CSS 中，被反复复用却无令牌。此处**只做命名、不改数值**， 故收编前后渲染结果逐像素一致（已用同窗口逐像素比对验证）。 */ --cx-orange: #f26419; /* 品牌橙：签到 / 等级 / 指引页强调色 */ --cx-orange-deep: #e8590c; /* 品牌橙·深：精华 / 标题高亮 */ --cx-orange-lite: #ff8a3d; /* 品牌橙·渐变亮端 */ --cx-orange-lite2: #ffb26b; /* 品牌橙·渐变最亮端 */ --cx-orange-soft: #fff3e6; /* 品牌橙浅底 */ --cx-ink-mute: #616b7a; /* 弱化说明文字（原 #8b95a8 白底仅 3.02:1，w72 调深至全底 ≥4.76:1） */ --cx-link: #0a4fbd; /* 次要链接 / 动作文字（介于 brand 与 brand-hover） */ /* ─────────────── 颜色补档（2026-09-29 W5-2A：层2 分档 + 层3 族收敛） 仅「保真新增」与「族内收敛目标」，业务里勿再写裸色值 */ --cx-ink-1b: #1a2233; /* 正文深（蓝灰）· 原字面量最多 15 处 */ --cx-ink-1c: #1f2d3d; /* 正文深二号（蓝灰）· 4 处 */ --cx-ink-2b: #475467; /* 正文次（Untitled UI gray-600）· 9 处 */ --cx-ink-3b: #5a6478; /* 次级文字（蓝灰）· 14 处 */ --cx-ink-3c: #5b6b82; /* 次级文字二号（蓝灰）· 7 处 */ --cx-ink-3d: #4a5a74; /* 次级文字三号（蓝灰）· 4 处 */ --cx-ink-mute-b: #616b7a; /* 弱文字（原 #98a2b3 白底仅 2.86:1，w72 调深至达标）· 5 处 */ --cx-success-line: #cfefda; /* 成功态描边（比 success-soft 深一档） */ --cx-orange-tint: #ffd9b3; /* 橙系中浅底/描边（补签、漏签标记） */ --cx-amber-tint: #fef0c7; /* 琥珀浅底（审核日志等级标签） */ --cx-orange-ink: #a8430a; /* 品牌橙·可达文字档（压浅橙底 4.56:1 / 作底白字 6.05:1）· w72 */ /* ── w72 补档：下列 4 个令牌此前被引用但从未定义，一直靠 var() fallback 兜底 ── */ --cx-text: #1a2233; /* 正文色（原 portal.css fallback #1a2233） */ --cx-text-weak: #667085; /* 弱文字（原 fallback #8a92a6 仅 3.2:1 → 上调至 AA） */ --cx-radius: 12px; /* 卡片圆角（原 fallback 12px） */ --cx-focus-ring: 0 0 0 3px rgba(31, 95, 214, .16); /* 焦点环（原 custom.css fallback） */ /* ─────────────── 字体族 1 档（W3 新增：全站唯一字体栈来源）─────────────── 系统级中文字体优先；数字/英文走各平台 UI 字体（Windows: Segoe UI，macOS: SF）。 ⚠️ 编辑器 iframe 是独立文档、读不到本文件的变量，其字体在 template/discuzx5/common/extend_wysiwyg.css 里以字面量重复维护，两处必须同步。 */ --cx-font-sans: "Noto Sans SC", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; /* WF 批次1 新增：西文/数字栈、中英混排栈（body 实际值）、等宽栈 */ --cx-font-latin: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --cx-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --cx-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; /* === WF3 batch: three-layer font stacks (heading / body / mono) === [layering] heading -- Noto Sans SC first. Few chars + large size => size is not the concern, identity is. Noto has a clearer skeleton above 20px than system CJK fonts. body -- system fonts first. Long-form reading: most natural glyphs, zero download, zero FOUT. Common choice of Chinese content sites (Zhihu / Juejin / V2EX / SSPAI). mono -- code blocks, tabular numbers. [ordering rule] Latin fonts MUST precede CJK fonts. Font matching is per-character: latin letters hit the first western font in the stack; CJK skips all western fonts and lands on the first CJK font. Reversed order makes latin/digits render with a CJK font. [metrics warning] System CJK fonts render latin/digits ~3% wider than Noto Sans SC. CJK glyph width is IDENTICAL (full-width monospace). Check fixed-width containers that hold digits for overflow. WARN: the editor iframe is a separate document and cannot read these variables. Its font is duplicated as a literal in template/discuzx5/common/extend_wysiwyg.css -- keep both in sync. */ --cx-font-heading: "Noto Sans SC", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --cx-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* === wf batch: serif stack for large article headlines === [why] Long-form reading + display headline in ONE sans family flattens hierarchy. A serif headline is the standard move on Chinese content sites (Zhihu column / SSPAI / Caixin). [no webfont] CJK serif glyph sets are huge (a 400-weight Song subset is ~300KB vs 200KB for Noto Sans SC) and the OS already ships a real serif on every platform. Zero download, zero FOUT. [fallback-safe] A missing glyph never renders as tofu: Chinese serif faces share the full GB18030 range, and any gap falls through to "serif" (system default), never to .notdef boxes. [upgrade path] If a self-hosted subset is added later, put a @font-face block at the top of this file with family name "Noto Serif SC" -- it is already first in this stack, no other change needed. */ --cx-font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STZhongsong", "SimSun", "Georgia", "Times New Roman", serif; /* ─────────────── 字号 8 档（收敛 16 档 → 8 档）─────────────── */ --cx-fs-xs: 12px; --cx-fs-sm: 13px; --cx-fs-base: 14px; --cx-fs-md: 15px; --cx-fs-lg: 16px; --cx-fs-xl: 18px; --cx-fs-2xl: 20px; --cx-fs-3xl: 24px; /* 字重 */ --cx-fw-normal: 400; --cx-fw-medium: 500; --cx-fw-bold: 600; /* ─────────────── 行高 3 档（W1 预置，供 W4 字号行高批次使用）─────────────── */ --cx-lh-tight: 1.35; /* 标题、单行紧凑 */ --cx-lh-normal: 1.6; /* 列表项、卡片摘要（默认） */ --cx-lh-loose: 1.8; /* 长正文：帖子 / 文章 / 知识库 */ /* ─────────────── 动效缓动 + 时长（W1 预置，W5-2B 启用）─────────────── */ --cx-ease: cubic-bezier(.4, 0, .2, 1); /* 时长 4 档（收敛 9 种 → 4 档；W5-2B 新增）*/ --cx-dur-1: .15s; /* 微交互：hover 变色 */ --cx-dur-2: .18s; /* 默认：按钮 / 图标 / 阴影 */ --cx-dur-3: .22s; /* 面板展开 / 轻微缩放 */ --cx-dur-4: .45s; /* 叙事动画：进度条、淡入 */ /* ─────────────── 圆角 4 档（收敛 9 档 → 4 档）─────────────── */ --cx-r-s: 6px; --cx-r-m: 10px; --cx-r-l: 14px; --cx-r-pill: 999px; /* ─────────────── 阴影 4 档（收敛 35 种 → 4 档）─────────────── sh-1 静息微影：列表行、行内小卡（几乎看不出浮起） sh-2 常规卡静息：内容卡放在页面底上的默认态 sh-3 大卡 / 浮层：hero、登录卡、弹层 lift 卡片悬停浮起：全站唯一的"抬手"动效反馈 —— 品牌光晕（按钮/hero 的 rgba(15,90,230,*) 等）不进这套， 它属于按钮的设计语言，不是卡片层级。 */ --cx-sh-1: 0 1px 2px rgba(16, 24, 40, .04); --cx-sh-2: 0 2px 10px rgba(20, 60, 130, .05); --cx-sh-3: 0 14px 36px rgba(20, 60, 130, .12); --cx-sh-lift: 0 8px 20px rgba(20, 60, 130, .12); /* ============================================================ 卡片三档规范 · Card tiers（U3） 两端同一套档位，改动只需对齐这里的数值。 档位 网页半径/内边距 小程序 rpx 用途 L1 小卡 10px / 14px 20rpx / 28rpx 行内小卡、标签块、统计格、列表行 L2 常规卡 14px / 18px 28rpx / 36rpx 内容卡（文章卡、回复卡、表单、面板） L3 大卡 18px / 24px 36rpx / 48rpx 区块卡、hero、浮层 ＊小程序 1rpx = 0.5px（750rpx 设计宽），故 20rpx = 10px，两端数值严格对齐。 ============================================================ */ --cx-card-r-1: var(--cx-r-m); /* 10px */ --cx-card-r-2: var(--cx-r-l); /* 14px */ --cx-card-r-3: 18px; --cx-card-pad-1: 14px; --cx-card-pad-2: 18px; --cx-card-pad-3: 24px; --cx-card-sh-1: var(--cx-sh-1); /* 小卡：几乎无浮起 */ --cx-card-sh-2: var(--cx-sh-2); /* 常规卡静息 */ --cx-card-sh-3: var(--cx-sh-3); /* 大卡 / 浮层 */ --cx-card-sh-lift: var(--cx-sh-lift); /* 卡片悬停浮起 */ /* ─────────────── 间距 6 档（8px 基准栅格）─────────────── */ --cx-sp-1: 4px; --cx-sp-2: 8px; --cx-sp-3: 12px; --cx-sp-4: 16px; --cx-sp-5: 24px; --cx-sp-6: 32px; /* ─────────────── 层级 ─────────────── */ --cx-z-dropdown: 900; --cx-z-sticky: 950; --cx-z-modal: 1000; --cx-z-toast: 1100; } /* ═══════════════════════════════════════════════════════════════ T7 令牌层 · 追加于 2026-10-03 可整段删除回滚。回滚同时把 ?v= 改回 13 / 96 / 9。 ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ T7 · 字体层级体系（TYPOGRAPHY SYSTEM v1） · 2026-10-03 --------------------------------------------------------------------------- 目标：把「13 档散乱字号 + 26 档散乱行高 + 6 档字距」收敛为 「4 层 · 9 档字号 · 6 档行高 · 3 档字距 · 4 档行宽」的可推导体系。 【层级定义】层级由「阅读重要性」决定，不随组件走。 同一层级在不同页面必须完全一致 —— 这是可推导、可扩展的前提。 L1 标题层 3 档 h1 / h2 / h3 页面与区块的结构标识，单行，允许截断 L2 正文层 2 档 prose / body 唯一承载「要读的内容」的层，可换行，限行宽 L3 辅助层 2 档 info / sub 解释、说明、时间、统计，可换行 L4 标签层 2 档 tag / num 角标、状态、计数，单行禁止换行 【推导规则】 · 往上(+1 档) = 信息权重提升 · 往下(-1 档) = 信息权重降低 · L2 内部按「读」还是「扫」分档：读→prose(16)，扫→body(15) · 相邻层差值 ≥ 1px；同层内不做区分（避免"看起来有层级其实没差"） · L4 是全站下限，任何文字不得 < 12px 【行业依据】中文排版通行值（非个人偏好）： · 桌面长文正文 16px，行高 1.8，行宽 30-42 字 · 桌面摘要/列表 15px，行高 1.7，行宽 36-46 字 · 中文正文不加正字距（方块字自带字距，加字距破坏词组连贯性） · 标题可加 0.02em~0.05em 字距增强"呼吸感" · 数据/计数用 tabular-nums，避免跳动 【与旧令牌的关系】 旧 8 档 --cx-fs-* 全部保留为「新体系的兼容别名」，值已按层级重定标。 92% 的存量规则（466 处）引用的是旧令牌 → 改令牌值即全局生效， 无需逐条改 466 个选择器。这是本次收敛成本最低的路径。 旧 --cx-lh-tight/normal/loose 保留，但语义重新对齐新 6 档。 命名规范： --cx-fs- 字号 role ∈ {h1,h2,h3,prose,body,info,sub,tag,num} --cx-lh- 行高 role ∈ {h1,h2,h3,prose,body,info,sub,tag,num} --cx-lw- 行宽上限 role ∈ {prose,body,narrow,full} --cx-ls- 字距 role ∈ {title,prose,tag} --cx-fw- 字重 role ∈ {regular,medium,semibold,bold} ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────────────── 一、字号 9 档（4 层） 旧档 → 新档映射： xs→tag / sm→info / base→body / md→prose lg→h3 / xl→h2 / 2xl→h1b / 3xl→h1 ───────────────────────────────────────────────────────────────────── */ /* L1 标题层 */ --cx-fs-h1: 24px; /* 页面主标题：等级阶梯 / 频道大标题 */ --cx-fs-h1b: 22px; /* 主标题下的紧邻大标题（搜索页标题） */ --cx-fs-h2: 19px; /* 区块标题：知识库分组 / 文章标题 */ --cx-fs-h3: 16px; /* 条目标题：主题列表标题 / 卡片标题 */ /* L2 正文层 —— 分「读」与「扫」两档，这是本次体系的核心 */ --cx-fs-prose: 16px; /* 长文正文：帖子 .t_f / 文章正文 / FAQ / 知识库条目 */ --cx-fs-body: 15px; /* 摘要正文：列表摘要 / 板块描述 / 卡片简介 */ /* L3 辅助层 */ --cx-fs-info: 14px; /* 信息说明：时间 / 作者 / 来源 / 表单标签 */ --cx-fs-sub: 13px; /* 次要说明：统计 / 页脚 / 版权 / 提示 */ /* L4 标签层 —— 全站下限 */ --cx-fs-tag: 12px; /* 徽标 / 状态 / 备案 */ --cx-fs-num: 12px; /* 计数数字（配 tabular-nums） */ /* ── 兼容别名：旧 8 档「只提底部，不动标题」───────────────────────── 存量 466 处引用这些名字。策略是【只上移底部三档】： 改动：sm 13→14、base 14→15、md 15→16 （共 279 处，占 60%） 不动：xs 12（已是下限）、lg 16、xl 18、2xl 20、3xl 24（标题不"小"） 为什么标题档不动： · 大标题本来就不偏小，不是本次要解决的问题 · --cx-fs-base 同时被 44px 高的按钮/输入框引用（.cx-altitem / .cx-btn-main / #typeid / .px），提 1px 需实测控件是否溢出 · 标题层 16/18/20/24 的级差已足够清晰，压缩会削弱层级对比 改后底部形成 12 / 14 / 15 / 16 的密集梯度（正文最密）， 标题层保持 16 / 18 / 20 / 24 的稀疏梯度 —— 两段式级差， 正是设计系统的标准做法（小字密、大字疏）。 */ --cx-fs-xs: 12px; /* 不动 —— 已是 L4 下限 */ --cx-fs-sm: 14px; /* 13 → 14 → info */ --cx-fs-base: 15px; /* 14 → 15 → body */ --cx-fs-md: 16px; /* 15 → 16 → prose */ --cx-fs-lg: 16px; /* 不动 —— → h3 */ --cx-fs-xl: 18px; /* 不动 —— → h2（值另由映射层提到 19） */ --cx-fs-2xl: 20px; /* 不动 —— → h1b */ --cx-fs-3xl: 24px; /* 不动 —— → h1 */ /* ───────────────────────────────────────────────────────────────────── 二、行高 6 档（收敛 26 档 → 6 档） 规则：行高比 = lh 值 / 字号。所有层级 ≥ 1.3，避免中文行盒塌陷。 正文层不写死 px，全部用无单位比例 → 改字号时行高自动跟随。 ───────────────────────────────────────────────────────────────────── */ --cx-lh-h1: 1.3; /* 大标题单行：32px/24px，收紧避免过大空隙 */ --cx-lh-h2: 1.4; /* 区块标题：27px/19px */ --cx-lh-h3: 1.5; /* 条目标题：24px/16px */ --cx-lh-prose: 1.8; /* 长文正文：29px/16px —— 中文长文舒适值 */ --cx-lh-body: 1.7; /* 摘要正文：26px/15px */ --cx-lh-info: 1.65; /* 信息说明：23px/14px */ --cx-lh-sub: 1.6; /* 次要说明：21px/13px */ --cx-lh-tag: 1.5; /* 标签徽标：18px/12px */ --cx-lh-num: 1.5; /* 计数：18px/12px */ /* 旧 3 档保留 —— 【值一律不动】 审计发现这 3 个令牌被用在 12px 固定高度胶囊（.cx-fp-credits span， padding 5px 4px 4px）、44px 大标题、图标行等对行高敏感的位置。 全局改值会撑破这些容器。 → 存量行高问题一律在「映射层」按选择器精确修，不动令牌值。 */ --cx-lh-tight: 1.35; /* 不动（存量 17 处，含固定高容器） */ --cx-lh-normal: 1.6; /* 不动（存量 41 处） */ --cx-lh-loose: 1.8; /* 不动（存量 23 处，长文正文） */ /* ───────────────────────────────────────────────────────────────────── 三、行宽上限 4 档（新增 —— 现状完全缺失，是 81 字/行问题的根因） 依据：中文长文 30-42 字/行；列表摘要 36-46 字/行。 超过 46 字眼睛回扫起点会跳行，读错行。 ───────────────────────────────────────────────────────────────────── */ --cx-lw-prose: 42em; /* 长文正文：16px × 42em = 672px */ --cx-lw-body: 46em; /* 摘要正文：15px × 46em = 690px */ --cx-lw-narrow: 30em; /* 窄栏正文：侧栏 FAQ / 评论 */ --cx-lw-full: none; /* 不限宽（表格 / 列表容器 / 头像旁短文本） */ /* ───────────────────────────────────────────────────────────────────── 四、字距 3 档（新增 —— 现状 6 档散乱，含 -.01em 负字距） 依据：中文正文不加正字距；标题加 0.02em 增强呼吸感。 ───────────────────────────────────────────────────────────────────── */ --cx-ls-title: .02em; /* 标题：24/22/19/16px 用 */ --cx-ls-prose: 0; /* 正文：0 —— 方块字自带字距 */ --cx-ls-tag: .04em; /* 标签：12px 小字加字距提升辨识度 */ /* ───────────────────────────────────────────────────────────────────── 五、字重 4 档（收敛 4 → 4，值不变，补 700 档） ───────────────────────────────────────────────────────────────────── */ --cx-fw-regular: 400; /* 正文 */ --cx-fw-medium: 500; /* 辅助强调 / 按钮 */ --cx-fw-semibold: 600; /* 标题 / 小标题 */ --cx-fw-bold: 700; /* 仅用于表格表头与极少数强调 */ /* 旧 3 档保留（存量引用） */ --cx-fw-normal: 400; --cx-fw-medium: 500; --cx-fw-bold: 600; /* ───────────────────────────────────────────────────────────────────── 六、容器安全边距 4 档（新增 —— 修「文字贴边」32 处 + 「留白不足」59 处） 规则：任何承载文字的容器，上下内边距 ≥ 10px，左右 ≥ 12px。 移动端（≤860px）安全边距减半但不低于 8px。 ───────────────────────────────────────────────────────────────────── */ --cx-pad-safe-y: 10px; --cx-pad-safe-x: 12px; --cx-pad-safe-y-s: 8px; /* 窄屏 */ --cx-pad-safe-x-s: 10px; /* 窄屏 */ /* ───────────────────────────────────────────────────────────────────── 七、换行与省略策略 4 档（新增 —— 修截断 3 处 + nowrap 切字 3 处） 规则： · 长文（prose）→ 必须可换行，禁止 nowrap · 标题（h1-h3）→ 单行省略 ellipsis · 摘要（body）→ 单行省略；摘要超过 3 行时用 line-clamp 3 · 标签（tag/num）→ 单行 nowrap，且容器必须 min-width:0 才能省略 ───────────────────────────────────────────────────────────────────── */ --cx-wrap-normal: normal; /* 正文换行 */ --cx-wrap-ellip: nowrap; /* 单行 + 省略 */ --cx-clamp-2: -webkit-line-clamp: 2; /* 摘要 2 行截断 */ --cx-clamp-3: -webkit-line-clamp: 3; /* 摘要 3 行截断 */ /* 省略号（Safari / Firefox 兼容） */ --cx-ellipsis: ellipsis; }