/* ========================================================================== NanoBeadMill · Design Tokens v1.0 定稿日期：2026-10-02 身份：方案 A-minus（前端 100% 品牌化，后端真实披露国内主体） 用法：整段粘进 WordPress 子主题的 style.css 顶部，或在 Kadence 的 "Customizer → Additional CSS" 里引入。所有组件只准引用变量， 不准再写死色值。 ========================================================================== */ :root { /* ---- 品牌主色：方案 A「氧化锆青」基底 ---- */ --ink : #10171b; /* 标题与正文。近黑，带极轻蓝调（= 炭黑浆料 / 石墨） */ --paper : #f4f6f8; /* 页面底。冷调白（= 钛白浆料） */ --surface : #ffffff; /* 卡片、表格、表单底 */ --surface-2 : #eef2f5; /* 次级面：表头、浅色区块、图位占位 */ --line : #dbe2e8; /* 1px 描边。默认用描边，不用阴影 */ --line-strong : #c3ced7; /* 输入框边框、图标描边、次要数字 */ --muted : #5a6a75; /* 副标题、说明文字、表头 */ /* ---- 强调色（accent）：链接、图标、当前导航、图表曲线、数据高亮 ---- */ --accent : #0d7d8c; /* 精密青。避开 NETZSCH / WAB / Bühler 的全蓝阵营 */ --accent-dark : #0a5c68; /* 悬停 / 压深 */ --accent-soft : #e3f1f3; /* 标签底、提示框底、表格悬停行 */ /* ---- 信号色（signal）：【定稿】全站唯一的暖色，仅用于 CTA 与警示 ---- */ --signal : #c9451f; /* CTA 常态。白字对比度 4.82:1，通过 WCAG AA */ --signal-dark : #9e3512; /* CTA 悬停 / 按下 */ --signal-soft : #fbeee9; /* 警示框底、必填星号底（如需要） */ /* ⚠️ 已废弃，不要再出现： #d98014（原方案 A 琥珀，白字对比度仅 2.98:1） #e0522a（方案 C 朱红，白字对比度仅 3.88:1） 两者都低于 WCAG AA 的 4.5:1，且按钮文字 15px/600 不算大号文字。 */ --ok : #1f6a45; /* 成功态、合规标识 */ --error : #a23030; /* 表单错误 */ /* ---- 深色区（收口 CTA 带、页脚）---- */ --deep : #0d1418; --deep-2 : #162228; --on-deep : #e8eef1; --on-deep-mut : #93a4ad; --line-deep : #26353d; /* ---- 字体 ---- */ --font-sans : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --font-mono : 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace; /* 规则：所有数字、型号、参数、单位一律用 --font-mono。 例：0.3 mm / D90 < 100 nm / 8–15 m/s / 5 – 150 L。 这是「工业精密感」最便宜的来源，不要省。 */ /* ---- 圆角 ---- */ --r-card : 8px; /* 卡片、表格、表单 */ --r-chip : 4px; /* 标签、徽标 */ --r-btn : 4px; /* 按钮、输入框。不要用 >12px 的大圆角，会显得消费级 */ /* ---- 阴影：只在悬浮态和浮层用 ---- */ --shadow : 0 18px 44px rgb(16 23 27 / 10%); /* ---- 间距系统：4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 ---- */ --sp-section : 96px; /* 章节纵向间距（桌面） */ --sp-section-m : 56px; /* 章节纵向间距（移动） */ --sp-gap : 20px; /* 卡片网格间距 */ } /* ========================================================================== 构件基元（WordPress 子主题照抄，不要改色值） ========================================================================== */ /* 按钮 —— 悬停色必须跟随 --signal-dark，不要另写 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: var(--r-btn); font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: -.01em; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .btn-primary { background: var(--signal); color: #fff; } .btn-primary:hover, .btn-primary:focus-visible { background: var(--signal-dark); color: #fff; } .btn-outline { border-color: var(--line-strong); color: var(--ink); background: var(--surface); } .btn-outline:hover, .btn-outline:focus-visible { border-color: var(--accent); color: var(--accent-dark); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-sm { padding: 9px 16px; font-size: 14px; } /* 元数据标签 —— 卡片上的小编号（PM-N、M-101） */ .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; padding: 4px 8px; border-radius: var(--r-chip); background: var(--accent-soft); color: var(--accent-dark); } .chip-ink { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); } .chip-warn { background: var(--signal); color: #fff; } /* 卡片 —— 静态用描边，不用阴影 */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px; display: flex; flex-direction: column; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .card.hoverable:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); } /* 章节小标签 */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .eyebrow::before { content: ""; width: 2px; height: 12px; background: var(--accent); border-radius: 1px; } /* 参数表 —— 数字右对齐 + 等宽 + 悬停高亮行 */ table { width: 100%; border-collapse: collapse; } thead th { background: var(--surface-2); text-align: left; padding: 13px 18px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); } tbody td { padding: 14px 18px; border-bottom: 1px solid var(--line); } tbody tr:hover { background: var(--accent-soft); } td.num, th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } td.key { font-family: var(--font-mono); font-weight: 600; color: var(--accent-dark); white-space: nowrap; } /* 提示框 —— 诚实劝退、技术说明 */ .callout { background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 0 var(--r-card) var(--r-card) 0; padding: 24px 28px; } /* 深色收口带 */ .band-deep { background: var(--deep); color: var(--on-deep); } .band-deep h2 { color: #fff; } .band-deep p { color: var(--on-deep-mut); } .band-deep .btn-outline { border-color: var(--line-deep); color: var(--on-deep); background: transparent; } .band-deep .btn-outline:hover { border-color: var(--on-deep-mut); color: #fff; } /* ========================================================================== 使用红线（写页面时自查） 1. --signal（暖色）只出现在 CTA 按钮、警示、必填星号。全站暖色占比 ≤3%。 2. --accent 绝不出现在按钮上——会和 CTA 抢焦点。 3. 数字、型号、单位一律 --font-mono。 4. 静态卡片用 1px --line 描边，不要默认阴影。阴影只在 hover 和浮层。 5. 圆角不超过 12px。 ========================================================================== */