/* ============================================================================ OPSD · 设计令牌与基础原语（全站共享，由 layout.html 无条件加载） 数值来源 design/redesign-light-spec.md §2（暖纸四层 + 墨阶 + 赭色专色）， 体验约定来源 design/redesign-light-ux.md（对比度 §2.5、断点 §3、ESC §2.2）。 这一层只放「跨页面共享」的东西：reset、令牌、排版原语、按钮、输入框、法务行、 降级偏好，以及错误页（它没有 PageCSS，见文件末尾）。页面自己的布局放各自的 home3d.css / products.css，只在对应 PageCSS 下加载。 三条不能破的约束： 1. --ink-2 只允许出现在 --paper-3 之上；其余层一律 --ink-1。 2. 赭色只往深调，不往浅调（#fbfbfc 压 #a8582f 只有 4.95:1，余量 0.45）。 3. 边界用真 border，不用 box-shadow 伪描边（forced-colors 下会消失）。 ========================================================================= */ :root { /* 暖纸四层（只允许相邻层叠放） */ --paper-0: #e9e7e2; /* L* 91.7 页面最外层 */ --paper-1: #f0eee9; /* L* 94.1 Δ+2.4 墙：顶栏、首屏纸面 */ --paper-2: #f5f4f0; /* L* 96.2 Δ+2.1 表面：目录区 */ --paper-3: #faf9f6; /* L* 97.9 Δ+1.7 内容：输入框底、浮层 */ /* 墨四档（ink-2 只在 paper-3 上过 AA，见 ux §2.5） */ --ink-0: #171512; /* 17.3:1 @paper-3 */ --ink-1: #5a554c; /* ≈6.0:1 @paper-3，正文/标签的最低可用档 */ --ink-2: #6b655a; /* ≈4.6:1 @paper-3 —— 仅允许出现在 --paper-3 之上 */ --ink-3: #9a9ea5; /* 仅装饰 / disabled */ --line-0: rgba(23, 21, 18, .06); --line-1: rgba(23, 21, 18, .10); --line-2: rgba(23, 21, 18, .18); --line-3: rgba(23, 21, 18, .28); --tint: rgba(23, 21, 18, .035); --hover: rgba(23, 21, 18, .05); --press: rgba(23, 21, 18, .08); --sel-bg: rgba(23, 21, 18, .065); --fill: #171512; --onfill: #fbfbfc; /* 实心块上的文字，与 --on-accent 同值 */ /* 一支赭色专色（v2.4 裁决：升格为主色，但按「套色」做，不是换品牌色）。 只许出现在四个位置：主 CTA 实心底 / 节点圆点 / 选中态 2px 条 / 链接 hover 下划线。 chip 底、行 hover 底、卡片描边、法务行、图标、--paper-1 与 --paper-0 之上——一律不用。 实测：#fbfbfc 压 #a8582f = 4.95:1（余量只有 0.45，所以按钮底只能往深调，不能往浅调）； 赭当文字：paper-3 4.86 ✓ / paper-2 4.65 ✓ / paper-1 4.41 ✗ / paper-0 4.14 ✗。 */ --accent: #a8582f; --accent-hover: #8f4a26; /* 6.39:1，状态只变深不变浅 */ --accent-press: #7d4020; /* 7.73:1 */ --accent-soft: rgba(168, 88, 47, .14); /* 选中环等弱化用法 */ --on-accent: #fbfbfc; --ink-node: #1b1916; /* 非激活节点（首页只画 featured 点，留作备用） */ /* 语义色（降饱和暖偏，避免与赭打架）；dot 只做 ≤8px 填充，文字走 *-ink */ --ok-dot: #4f8a63; --ok-ink: #2f6f4d; --warn-dot: #7d6a2f; --warn-ink: #7a6326; /* 地球墨阶（JS 侧另有一份设备像素升档表，见 globe-ink.js） */ --ink-grid: rgba(23, 21, 18, .14); --ink-outline: rgba(23, 21, 18, .42); --focus: rgba(23, 21, 18, .68); /* 字体栈：不引入 webfont */ --font-cjk: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "JetBrains Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace; --font-brand: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", Georgia, serif; /* 字号阶梯（中文为准；11px 只接纯英文与数字，中文正文下限 13px） */ --fs-display: 48px; --lh-display: 56px; /* B §4.2 把首屏标题定在 48/56 */ --fs-h2: 24px; --lh-h2: 34px; --fs-h3: 18px; --lh-h3: 28px; --fs-lead: 16px; --lh-lead: 28px; --fs-body: 14px; --lh-body: 22px; --fs-body-s: 13px; --lh-body-s: 20px; --fs-caps: 11px; --lh-caps: 16px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --r-xs: 4px; --r-sm: 5px; --r-md: 7px; --r-lg: 9px; --r-xl: 14px; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-morph: cubic-bezier(.32, .72, 0, 1); --pad: clamp(20px, 3.2vw, 48px); --topbar-h: 56px; --banner-h: 32px; /* 浮层阴影：全站仅此一处允许用阴影，且必须配 .5px --line-2 */ --shadow-overlay: 0 2.8px 2.2px rgba(23, 21, 18, .034), 0 6.7px 5.3px rgba(23, 21, 18, .048), 0 12.5px 10px rgba(23, 21, 18, .06), 0 22.3px 17.9px rgba(23, 21, 18, .072), 0 41.8px 33.4px rgba(23, 21, 18, .086), 0 100px 80px rgba(23, 21, 18, .12); } /* ------------------------------------------------------------------ reset */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } /* 平滑滚动只在用户真的开始操作之后才打开： 否则带 hash 的深链在加载时会被动画化，截图/评审会正好停在动画中间。 */ html { scroll-behavior: auto; scroll-padding-top: calc(var(--topbar-h) + 8px); } html.is-scrollfx { scroll-behavior: smooth; } body { font-family: var(--font-cjk); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; /* 全站 400：层级靠字号 × 颜色 × 字距 */ color: var(--ink-0); background: var(--paper-1); -webkit-text-size-adjust: 100%; } h1, h2, h3, p, figure, figcaption, ul, li { margin: 0; padding: 0; } ul { list-style: none; } a { color: inherit; text-decoration: none; } b, strong { font-weight: 400; } button, input { font: inherit; color: inherit; } svg { display: block; } img { max-width: 100%; } h1, h2, h3 { font-weight: 400; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip { position: absolute; left: 12px; top: -48px; z-index: 80; padding: 8px 12px; border-radius: var(--r-md); background: var(--paper-3); border: .5px solid var(--line-2); font-size: var(--fs-body-s); color: var(--ink-0); transition: top 140ms ease; } .skip:focus-visible { top: 8px; } /* -------------------------------------------------------------- 排版原语 */ .t-caps { font-family: var(--font-mono); font-size: var(--fs-caps); line-height: var(--lh-caps); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; } /* 纯英文/代码/规格用 mono；中文与数字混排只上 tabular-nums，不切字体族 */ .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; } .num { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ 按钮 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-md); border: 0; font-size: var(--fs-body); line-height: 20px; font-weight: 400; cursor: pointer; white-space: nowrap; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 180ms var(--ease-morph); } .btn-primary { background: var(--accent); color: var(--on-accent); /* 不加渐变：135deg 霓虹渐变是旧设计的零件，一出现整版就退回现状语汇。 也不加 inset 0 0 0 .5px 的墨色内环——那是实心墨块防糊边的技巧，压在赭底上会显脏。 */ box-shadow: 0 1px 2px rgba(20, 22, 26, .16), 0 6px 14px -4px rgba(20, 22, 26, .18); } .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 2px 4px rgba(20, 22, 26, .18), 0 10px 20px -6px rgba(20, 22, 26, .20); } .btn-primary:active { background: var(--accent-press); transform: scale(.99) translateY(.5px); box-shadow: 0 1px 2px rgba(20, 22, 26, .16); } .btn-secondary { background: var(--tint); border: .5px solid var(--line-1); color: var(--ink-0); } .btn-secondary:hover { background: var(--hover); border-color: var(--line-2); } .btn-secondary:active { transform: scale(.99); } .btn-sm { height: 32px; padding: 0 12px; font-size: var(--fs-body-s); } /* 文字按钮。顶栏在 --paper-1 上，赭文字只有 4.41:1 不过 AA， 所以这里的下划线用墨色；赭色下划线只出现在 paper-2 / paper-3 之上（索引区内）。 */ .link { color: var(--ink-1); font-size: var(--fs-body); line-height: 20px; transition: color 140ms ease; } .link:hover { color: var(--ink-0); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: currentColor; } .link-s { font-size: var(--fs-body-s); line-height: 20px; } /* 把