/** * tokens.css — 全站设计令牌（CSS 自定义属性） * 职责：统一间距、字体、断点的数值来源 * 设计规范来源：.github/sdd/steering/ui-rules.md * 加载顺序：所有页面 内第一个 CSS（在 header.css 之前） * * 断点层级（来自 ui-rules §二）： * ≥ 1440px 大屏PC —— 内容居中，max-width: 1440px * 1280–1439px 常规PC —— 内容居中，max-width: 1280px * 768–1279px 平板 —— 模块自适应，允许换行 * ≤ 767px 手机 —— 单列布局，模块纵向排列 */ /* ── 常规PC 默认（1280px–1439px，含大屏PC 基准）── */ :root { /* 间距令牌 */ --space-section: 120px; /* Section 与 Section 之间的间距 */ --space-block: 48px; /* 模块内区域间距（标题到内容等） */ --space-element: 24px; /* 元素间距；同时作为模块间距（ui-rules §五：24px） */ --space-tight: 16px; /* 紧凑间距、小间隔 */ --space-xs: 8px; /* 极小间距（badge padding 等） */ /* 页面容器（ui-rules §五）*/ --page-gutter: 40px; /* PC 左右安全边距 */ --content-max-w: 1280px; /* 常规PC 内容最大宽度（1280–1439px 区间） */ /* 字体令牌（ui-rules §六）*/ --font-body: 16px; /* PC 正文字号 */ --font-small: 14px; /* 辅助文字 */ --line-height: 1.6; /* 统一行高 */ /* 栅格（ui-rules §五）*/ --grid-columns: 12; /* 12 栅格系统 */ --module-gap: 24px; /* 模块间距 */ /* 标题字号层级（2026-06-22 新增，详见 specs/css-spacing-progressive-migration-plan §十三）*/ --title-hero: 56px; /* 首屏 H1，PC 默认 */ --title-section: 48px; /* 模块一级视觉标题 */ --title-row: 36px; /* 图文行标题 */ --title-caption: 16px; /* 小项标题 / caption */ } /* ── 大屏PC（≥ 1440px）── */ @media (min-width: 1440px) { :root { --content-max-w: 1440px; /* 大屏PC 内容最大宽度（ui-rules §三 ①）*/ } } /* ── 平板（768px – 1279px）── */ @media (max-width: 1279px) { :root { --space-section: 80px; --space-block: 40px; --space-section-inner: 64px; /* 有可见背景 section 的内部呼吸间距（product-features 等 padding-top/bottom）*/ --space-element: 20px; --page-gutter: 24px; /* 平板左右安全边距（ui-rules §五）*/ /* 标题字号层级 — 平板 */ --title-hero: 36px; --title-section: 36px; --title-row: 22px; --title-caption: 14px; } } /* ── 宽平板（1024px – 1279px）────────────────────────────────────── 背景：768–1279px 统一值在 1024px 宽屏平板上模块间距偏小，需独立档位。 以 1024px 在 768→1280px 区间约 50% 位置线性插值 iPad↔PC： --space-section: 80 + (120-80)×0.4 = 96px （用户指定） --space-block: 40 + (48-40)×0.5 = 44px --space-element: 20 + (24-20)×0.5 = 22px --page-gutter: 24 + (40-24)×0.5 = 32px --space-section-inner 和 title token 保持 iPad 64px/36px 档不变。 ──────────────────────────────────────────────────────────────────── */ @media (min-width: 1024px) and (max-width: 1279px) { :root { --space-section: 96px; --space-block: 44px; --space-element: 22px; --page-gutter: 32px; /* --space-section-inner: 继承 64px（已由上方 max-width:1279px 块设定） */ /* title tokens: 继承 iPad 36px/22px（已由上方 max-width:1279px 块设定） */ } } /* ── 手机（≤ 767px）── */ @media (max-width: 767px) { :root { --space-section: 64px; --space-block: 32px; --space-section-inner: 48px; /* 有可见背景 section 的内部呼吸间距（product-features 等 padding-top/bottom）*/ --space-element: 16px; --space-tight: 12px; --page-gutter: 16px; /* 手机左右安全边距（ui-rules §五）*/ --font-body: 14px; /* 手机正文字号（ui-rules §六）*/ /* 标题字号层级 — 手机 */ --title-hero: 24px; --title-section: 24px; --title-row: 18px; --title-caption: 14px; } }