/* ========================================================================== B2B 营销诊断 · Design Tokens -------------------------------------------------------------------------- 版本：v1.0 ｜ 设计师：颜好看 ｜ 技术栈：原生 HTML + CSS + JS（无构建链） 设计语言：咨询公司交付物（稳重 / 克制 / 可信），不是 SaaS 落地页，不是 AI 产品 ┌──────────────────────────────────────────────────────────────────────┐ │ 不懂设计也能改：只动下面这 6 个变量，全站跟着变 │ │ │ │ 1. --brand-600 品牌主色（按钮、选中态、雷达图） │ │ 2. --brass-600 辅助色（陪跑服务区、行业基准线） │ │ 3. --text-base 正文字号（改大 = 全站字变大） │ │ 4. --radius-md 圆角大小（改小 = 更严肃，改大 = 更亲和） │ │ 5. --brand-50 选中态浅底（必须是很浅的主色，不然会很刺眼） │ │ 6. --control-h 按钮/输入框高度（不得低于 44px，触屏会点不中） │ │ │ │ 改完请做两件事：① 手机上看一遍 ② 按 Ctrl+P 打印预览看一遍 │ └──────────────────────────────────────────────────────────────────────┘ 【铁律】除本文件外，项目里任何 .css / .html 都不得出现裸颜色值（#xxx）。 例外只有两个：#fff（纯白）和 #000（纯黑）。要颜色就用 var(--xxx)。 如果本文件里没有你要的颜色，先在这里加一个变量，再去用。 ========================================================================== */ :root { /* ====================================================================== 1. 品牌色 · A1 身份层 ---------------------------------------------------------------------- 主色 = 墨蓝（Ink Navy）。选它的理由： · 中国 B2B 制造业/外贸老板对"深蓝"有天然的专业信任（正装色、公文色） · 它不是 Tailwind 默认蓝 #2563EB，也不是 AI 默认靛蓝 #6366F1 · 打印出来在黑白打印机上是深灰，不会糊成一团黑 OKLCH 参考：oklch(0.44 0.098 243)（如需换色，保持 L 在 0.40–0.48 之间） ====================================================================== */ --brand-900: #0B2942; /* 页面顶栏底、报告封面标题 */ --brand-800: #123A5C; /* 大标题（报告 H1/H2） */ --brand-700: #174B75; /* 按钮 hover、链接 hover */ --brand-600: #1C5C8F; /* * 主色：按钮底、选中态、雷达图"你的企业"线 */ --brand-500: #2A72AB; /* 图标、图表第二系列 */ --brand-300: #8FB6D4; /* 进度条已完成段（浅） */ --brand-100: #D6E6F2; /* 选中卡片边框、分隔强调 */ --brand-50: #EFF5FA; /* * 选中态浅底、信息提示框底 */ /* 主色的 RGB 分量，只用于需要半透明的地方：rgb(var(--brand-600-rgb) / .12) */ --brand-600-rgb: 28 92 143; /* 辅助色 = 铜黄（Brass）。选它的理由： · 它是"这段不是诊断内容"的标记色 —— 陪跑服务区、停止清单、风险提示 · 一看到铜黄底，老板就知道"从这里开始是要花钱 / 要停工的事" · 不用橙 #F97316（太跳，像电商促销） 【重要】铜黄绝不用于数据对比。我们没有行业基线数据， 不画任何编造出来的对标线。数据表达只有墨蓝一个色。 OKLCH 参考：oklch(0.55 0.088 68) */ --brass-800: #6B4A1E; /* 铜黄底上的深色文字 */ --brass-700: #8A5F28; /* 陪跑服务按钮底（白字对比 5.2:1，达标） */ --brass-600: #A8762F; /* * 辅助色：服务区标记、停止清单标记 */ --brass-100: #EFE2CB; /* 服务卡片边框 */ --brass-50: #FBF6EC; /* * 服务区浅底（和品牌蓝区一眼区分） */ --brass-600-rgb: 168 118 47; /* ====================================================================== 2. 中性色与语义角色 · A1 身份层 带极微量蓝倾向（不是纯灰，也不是奶油/米黄 —— 那会显得像小清新博客） ====================================================================== */ --bg: #F5F7FA; /* 页面底色（报告区用，让白纸浮起来） */ --bg-app: #EDF1F5; /* 表单区底色（比报告区再深一点，聚焦） */ --surface: #FFFFFF; /* 卡片、题目卡、报告纸 */ --surface-sunken: #EEF2F6; /* 三级表面：表格表头底、代码块、已禁用底 */ --surface-warm: #F2F5F8; /* B-slot：提示条、引用块底 */ --fg: #16202A; /* 主文字（近黑带蓝，对比白 15.4:1） */ --fg-2: #33414F; /* 次级文字：题目选项、表格内容（对比白 9.6:1） */ --muted: #5B6B7B; /* 说明文字（对比白 5.5:1，达标） */ --meta: #667487; /* 三级文字：时间戳、页脚（对比白 4.8:1，达标）*/ --meta-rgb: 102 116 135; --border: #DAE1E8; /* 默认边框：卡片、输入框、分隔线 */ --border-strong: #B4C1CD; /* hover 边框、表格外框 */ --border-soft: #EDF1F5; /* 卡片内部行分隔（比 --border 更淡） */ /* ====================================================================== 3. 语义色 · A2 结构层 全部是"深色版"，不是鲜亮版 —— 鲜亮的绿/红在小字上会刺眼，且打印偏色 ====================================================================== */ --success: #1B7A4B; /* 深绿：完成、达标 */ --success-bg: #E8F4ED; /* 成功提示底 */ --success-line: #A8D5BC; /* 成功提示边框 */ --warn: #8A5A08; /* 琥珀深：需注意、跳过提醒 */ --warn-bg: #FDF3E2; --warn-line: #E8C98A; --danger: #A3201B; /* 砖红：错误、不达标 */ --danger-bg: #FBECEB; --danger-line: #E8B4B1; --info: var(--brand-600); --info-bg: var(--brand-50); --info-line: var(--brand-100); /* 按钮/选中态语义别名 —— 组件里用这些，不要直接用 --brand-600 */ --accent: var(--brand-600); --accent-hover: var(--brand-700); --accent-active: var(--brand-800); --accent-on: #ffffff; /* 主色底上的文字 */ --accent-quiet: var(--brand-50); /* 主色浅底 */ --accent-line: var(--brand-100); /* 主色浅边框 */ /* ====================================================================== 4. 字体 · A1 身份层 ---------------------------------------------------------------------- 重要决策：不引入任何网络字体（Google Fonts / 思源 CDN 都不引）。 理由：① 部署在 EdgeOne Pages 免费版，中文 Web Font 动辄 3–8MB，首屏必卡 ② 目标用户是 35–55 岁国内老板，PingFang(苹果) / 雅黑(Windows) 质量足够 ③ 你要自己改文案，少一层依赖少一个坑 代价：Windows 上标题略不如 Mac 精致。可接受。 ====================================================================== */ --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* 衬线只用在报告的"卷首语/结论摘要"这类需要正式感的段落，以及全部打印正文 */ --font-serif: "Songti SC", "Source Han Serif SC", "Noto Serif SC", "SimSun", Georgia, serif; /* 等宽只用在：报告编号、评分数字、百分比、表格数字列（数字对齐必须等宽） */ --font-mono: "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, "Courier New", monospace; --font-body: var(--font-sans); --font-display: var(--font-sans); --font-print: var(--font-serif); /* 打印时正文切换到这个，见 @media print */ /* ====================================================================== 5. 字号阶梯 · A1 结构层 ---------------------------------------------------------------------- 基准 17px（不是常见的 16px）—— 目标用户 35–55 岁，字大一级少一次投诉 全站字号只从这个阶梯取，不要在组件里写 font-size: 19px 这种 ====================================================================== */ --text-2xs: 13px; /* 仅用于徽章、表格脚注、页脚版权 —— 全站最小，不得再小 */ --text-xs: 15px; /* 辅助说明、字段 help text —— 这是"小字"的下限 */ --text-sm: 16px; /* 表格内容、列表项 */ --text-base:17px; /* * 正文（报告正文、题干说明） */ --text-md: 18px; /* * 题目题干、卡片小标题 */ --text-lg: 20px; /* 区块小标题（报告 H3） */ --text-xl: 24px; /* 报告 H2 */ --text-2xl: 30px; /* 页面主标题 */ --text-3xl: 36px; /* 首屏主标题（PC） */ --text-4xl: 42px; /* 仅首屏主标题（≥1280px 时用） */ /* 手机端等比缩小（在 @media 里整体切换，见文件末尾） */ --text-2xs-m: 13px; --text-xs-m: 15px; --text-sm-m: 16px; --text-base-m:17px; /* 手机上正文不缩小，反而保持 17px */ --text-md-m: 17px; --text-lg-m: 19px; --text-xl-m: 21px; --text-2xl-m: 25px; --text-3xl-m: 28px; /* ====================================================================== 6. 字重与行高 ---------------------------------------------------------------------- 只用三档。原因：微软雅黑只有 Regular/Bold 两个字重文件， 写 500/510/590 在 Windows 上会被四舍五入成 400 或 700，白写。 ====================================================================== */ --weight-regular: 400; /* 正文、说明 */ --weight-medium: 600; /* 题干、选项选中、按钮文字、表头（Windows 下=粗） */ --weight-bold: 700; /* 大标题、报告 H1/H2 */ --leading-tight: 1.25; /* ≥30px 的大标题 */ --leading-snug: 1.4; /* 20–28px 小标题 */ --leading-normal: 1.6; /* 题干、卡片文字 */ --leading-body: 1.8; /* * 报告长段落正文（中文行高必须大，不然糊） */ --leading-print: 1.75; /* 打印正文行高 */ /* ====================================================================== 7. 字距 ====================================================================== */ --tracking-tight: -0.01em; /* ≥30px 大标题 */ --tracking-normal: 0; /* 正文 */ --tracking-wide: 0.02em; /* 小字（15–16px） */ --tracking-caps: 0.08em; /* 全大写英文标签、报告编号、小型标签 */ /* ====================================================================== 8. 间距 · A2 结构层（4px 网格） 只允许这些值：4 8 12 16 20 24 32 40 48 64 80 禁止 5 7 13 15 22 30 这类"随手写的数字" ====================================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ====================================================================== 9. 圆角 · A2 结构层 偏小 —— 咨询报告的调性不需要"圆润亲和"。卡片最大 10px，超过就是 AI 味 ====================================================================== */ --radius-xs: 3px; --radius-sm: 4px; /* 徽章、标签、小按钮 */ --radius-md: 6px; /* * 按钮、输入框、选项行 */ --radius-lg: 10px; /* * 卡片、题目卡、服务卡 */ --radius-xl: 14px; /* 报告封面块、提示条 */ --radius-pill: 999px;/* 进度条、圆点、胶囊标签 */ /* ====================================================================== 10. 边框与阴影 · A2 结构层 ---------------------------------------------------------------------- Hairline First：卡片靠 1px 边框 + 底色差建立层级，不靠大阴影。 全站禁止"1px 边框 + 大模糊阴影"同时出现在同一个元素上（幽灵卡片） ====================================================================== */ --border-w: 1px; --border-w-thick:2px; /* 仅用于：选中态边框、聚焦环内圈 */ --hairline: 1px solid var(--border); --elev-0: none; --elev-1: 0 1px 2px rgb(11 41 66 / 0.05); /* 卡片静止 */ --elev-2: 0 2px 8px rgb(11 41 66 / 0.07); /* 卡片 hover */ --elev-3: 0 12px 32px rgb(11 41 66 / 0.14); /* 弹窗/toast */ --elev-inset: inset 0 1px 0 rgb(255 255 255 / 0.6); /* 表头高光 */ /* 聚焦环 —— 全站统一，禁止 outline: none 而不给替代 */ --focus-ring: 0 0 0 3px rgb(var(--brand-600-rgb) / 0.32); --focus-ring-offset: 2px; /* ====================================================================== 11. 动效 · A2 结构层 ---------------------------------------------------------------------- MOTION_INTENSITY = 2（这个项目几乎不需要动效） 动效只做三件事：hover 变色 / 步骤切换 / 进度推进。其余一律不做。 禁止 bounce、elastic、回弹、以及任何 overshoot 缓动。 ====================================================================== */ --dur-instant: 80ms; /* 按下反馈 */ --dur-fast: 150ms; /* * 默认收敛值：hover、选中、聚焦 */ --dur-base: 200ms; /* 内容进入、折叠展开 */ --dur-slow: 300ms; /* 步骤切换（不超过这个） */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out-quart */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-linear: linear; /* 仅用于进度条推进 */ /* ====================================================================== 12. 布局 · A1 结构层 ====================================================================== */ --container-max: 1160px; /* 站点最宽容器（首屏、报告外壳） */ --container-form: 760px; /* 表单区：窄一点，一行一题，眼睛不用来回扫 */ --container-read: 720px; /* 报告正文：约 38 个汉字/行，是中文舒适上限 */ --container-gutter: 24px; /* 桌面左右留白 */ --container-gutter-m: 16px; /* 手机左右留白 */ --section-y: 64px; /* 桌面节区间距 */ --section-y-tablet:48px; --section-y-phone: 40px; /* 断点（写死在 @media 里，不做成变量 —— CSS 变量不能用于媒体查询） */ /* sm:640px md:768px lg:1024px xl:1280px */ /* ====================================================================== 13. 组件尺寸 · B 插槽层 ---------------------------------------------------------------------- 硬底线：任何可点击元素，命中区不小于 44×44px（手指大小 / 无障碍要求） ====================================================================== */ --tap-min: 44px; /* * 命中区下限，不可突破 */ --control-h: 48px; /* 按钮、输入框、选择器（桌面） */ --control-h-lg: 56px; /* 主 CTA 按钮、分档选项行 */ --control-h-mob: 52px; /* 手机上的按钮/输入框（手指更粗） */ --control-pad-x: 20px; /* 按钮左右内边距 */ --input-pad-x: 14px; --option-min-h: 56px; /* 单选/分档选项行最小高度 */ --option-min-h-m: 60px; /* 手机上 */ --header-h: 60px; /* 顶部品牌条（桌面） */ --header-h-mob: 52px; --actionbar-h: 68px; /* 表单底部固定操作条（含安全区另加） */ --progress-h: 6px; /* 顶部细进度条 */ --progress-step: 32px; /* 步骤圆点直径 */ /* ====================================================================== 14. 层级 · A2 结构层 ====================================================================== */ --z-base: 0; --z-sticky: 100; /* 顶部品牌条 */ --z-actionbar: 200; /* 表单底部操作条 */ --z-draftbar: 300; /* 草稿恢复提示条 */ --z-overlay: 400; /* 生成中全屏遮罩 */ --z-modal: 500; --z-toast: 600; /* ====================================================================== 15. 报告与图表专用 · C 扩展层 ====================================================================== */ --report-paper-w: 210mm; /* A4 宽，打印时报告纸宽度 */ --report-pad: 28px; /* 报告纸内边距（屏幕） */ --report-pad-m: 18px; /* 报告纸内边距（手机） */ /* 五维雷达图（SCMRO：自己 / 客户 / 市场 / 竞争 / 承接） 只有一条数据线（墨蓝）+ 一圈满分基准线（灰虚线 = 5 分满分）。 不画行业对标线：我们没有可信的同业基线数据，不编。 */ --chart-grid: var(--border); --chart-grid-strong: var(--border-strong); --chart-self-stroke: var(--brand-600); --chart-self-fill: rgb(var(--brand-600-rgb) / 0.16); --chart-self-dot: var(--brand-700); --chart-fullmark: #8B98A5; /* 满分基准线（5 分的正五边形，灰虚线） */ --chart-fullmark-dash: 4 4; --chart-skipped-fill: url(#skipHatch); /* 被跳过维度的斜线纹理，见设计提示词 §8.4 */ /* 评分条：五维得分 0.0–5.0，满分即整条 被跳过的维度：得分上限锁 3.0，仍纳入加权（不是不计分、不做权重归一化）。 所以评分条上要画出 3.0 处的一道刻度，表示"这一维最多只能到这儿"。 */ --score-fill: var(--brand-600); --score-track: var(--surface-sunken); --score-cap: var(--chart-fullmark); /* 3.0 上限刻度线（灰） */ --score-cap-dash: 3 3; /* 结论标签：强项 / 待改进 / 风险 */ --tag-good-fg: var(--success); --tag-good-bg: var(--success-bg); --tag-mid-fg: var(--warn); --tag-mid-bg: var(--warn-bg); --tag-risk-fg: var(--danger); --tag-risk-bg: var(--danger-bg); /* 健康度等级 A/B/C/D —— 阈值来自方法论原文，不可自行调整。 A ≥4.2 可扩量 / B 3.4–4.1 补短板后扩量 / C 2.6–3.3 先修闭环 / D <2.6 暂停投放 */ --grade-a-fg: var(--success); --grade-a-bg: var(--success-bg); --grade-a-line: var(--success-line); --grade-b-fg: var(--brand-700); --grade-b-bg: var(--brand-50); --grade-b-line: var(--brand-100); --grade-c-fg: var(--warn); --grade-c-bg: var(--warn-bg); --grade-c-line: var(--warn-line); --grade-d-fg: var(--danger); --grade-d-bg: var(--danger-bg); --grade-d-line: var(--danger-line); --grade-badge-d: 64px; /* 封面等级徽章直径（手机 52px） */ /* 红线横幅（报告首页最顶部，触发任一红线时出现） */ --banner-redline-bg: var(--danger-bg); --banner-redline-line: var(--danger-line); --banner-redline-fg: var(--danger); /* 停止清单 / 风险提示高亮块（铜黄 = "这段要停工 / 要花钱"） */ --block-stop-bg: var(--brass-50); --block-stop-line: var(--brass-100); --block-stop-fg: var(--brass-800); --block-stop-mark: var(--brass-600); /* 优先清单 P0 / P1 标签 */ --pri-p0-fg: var(--danger); --pri-p0-bg: var(--danger-bg); --pri-p1-fg: var(--brand-700); --pri-p1-bg: var(--brand-50); /* 附录工具包（7 份可填写模板）—— 打印出来要能直接用笔写 */ --blank-underline: var(--border-strong); /* 填空位下划线，打印时改黑 */ --blank-inline-min-w: 72px; /* 行内填空位最小宽度 */ --blank-block-h: 32px; /* 整行填空位高度（屏幕） */ --blank-block-h-print: 9mm; /* 整行填空位高度（打印，够手写） */ --cell-write-h: 36px; /* 表格内可手写单元格最小高度 */ --checkbox-d: 18px; /* 附录勾选框边长（屏幕） */ --checkbox-d-print: 5mm; /* 附录勾选框边长（打印） */ --appendix-head-bg: var(--surface-warm); /* 模板顶部用途条底 */ --appendix-note-bg: var(--surface-sunken); /* 模板末尾验收/注脚底 */ } /* ========================================================================== 手机端字号与间距覆盖（≤640px） —— 做法：只改变量，不改组件。这样新增组件自动适配 ========================================================================== */ @media (max-width: 640px) { :root { --text-2xs: 13px; --text-xs: 15px; --text-sm: 16px; --text-base: 17px; /* 手机上正文反而不能缩，小屏更需要大 */ --text-md: 17px; --text-lg: 19px; --text-xl: 21px; --text-2xl: 25px; --text-3xl: 28px; --text-4xl: 28px; --section-y: var(--section-y-phone); --container-gutter: var(--container-gutter-m); --control-h: var(--control-h-mob); --control-h-lg: 56px; --option-min-h: var(--option-min-h-m); --report-pad: var(--report-pad-m); } } /* ========================================================================== 打印覆盖（@media print） -------------------------------------------------------------------------- 这一段是整个项目的关键交付之一：报告要能被 Ctrl+P 打成 PDF， 打出来得像一份正式咨询报告，而不是一张网页截图。 设计原则： ① 白底黑字 —— 这里把整套语义色重定义为打印版，组件不动就自动变 ② 去掉所有不能点的东西 —— 按钮、导航、提示条全部 display:none ③ 分页可控 —— 标题不被切断、表格跨页重复表头、每个大模块另起一页 ④ 保留必要的灰底 —— 评分条、雷达图必须带色，否则信息丢失（用 exact） ========================================================================== */ @media print { :root { /* ① 打印版配色：白底黑字 + 深灰层级 */ --bg: #fff; --bg-app: #fff; --surface: #fff; --surface-sunken: #f2f2f2; --surface-warm: #f7f7f7; --fg: #000; --fg-2: #1a1a1a; --muted: #333; --meta: #555; --border: #b0b0b0; --border-strong: #555; --border-soft: #dcdcdc; /* 主色在打印时降级为黑 —— 除非元素开了 print-color-adjust: exact */ --accent: #000; --accent-on: #fff; --accent-quiet: #f2f2f2; --accent-line: #999; /* 雷达图满分基准线在打印时加深，白纸上才看得见 */ --chart-fullmark: var(--border-strong); /* 打印态 = #555 */ /* 铜黄块（服务区 / 停止清单）打印时文字与边框加深，浅底保留 */ --block-stop-fg: var(--fg); --block-stop-line: var(--meta); /* 附录填空位：打印后要能用笔写，线必须够黑、格子必须够高 */ --blank-underline: #000; --blank-block-h: var(--blank-block-h-print); --checkbox-d: var(--checkbox-d-print); --appendix-head-bg: #f2f2f2; --appendix-note-bg: #f7f7f7; /* ② 动效全部归零，避免打印出中间态 */ --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; /* ③ 阴影全部去掉，打印机打不出层次，只会脏 */ --elev-0: none; --elev-1: none; --elev-2: none; --elev-3: none; --focus-ring: none; /* ④ 打印字号用 pt（A4 上 10.5pt ≈ 14px，但中文要更大，这里 11.5pt） */ --text-2xs: 8pt; --text-xs: 9.5pt; --text-sm: 10.5pt; --text-base: 11.5pt; /* * 打印正文 */ --text-md: 12pt; --text-lg: 13pt; --text-xl: 15pt; --text-2xl: 18pt; --text-3xl: 21pt; --text-4xl: 21pt; --leading-body: 1.75; --leading-normal:1.5; /* ⑤ 打印排版用衬线（宋体）—— 纸媒习惯，长文更易读 */ --font-body: var(--font-serif); --font-display: var(--font-sans); /* ⑥ 间距压缩，一页多放内容，少砍树 */ --section-y: 24pt; --space-6: 16pt; --space-8: 18pt; --space-10: 20pt; --space-12: 22pt; --report-pad: 0px; /* 纸边距交给 @page 的 margin */ } }