/* ============================================================================= 商务圈 · 合作资源库 — Design Tokens v1.0 ----------------------------------------------------------------------------- 基准：首页原型截图像素取样（1364px 渲染宽 @ scale≈1.0） 用途：唯一色值/尺寸来源。任何页面不得再写死 hex 与魔法数字。 接入： 末尾「兼容映射层」会把旧变量（--brand/--text/--border/--panel…） 指向新 token，index.html 可零改造先接入。 ============================================================================= */ :root{ /* --------------------------------------------------------------------------- 1. 色彩 · 品牌橙阶 #FF6600 为品牌基准，用于标识、图标、描边、强调。 ⚠️ 纯 #FF6600 不适合承载文字/白字按钮（对比度不足）， 文字与实心按钮请用 --c-brand-text / --c-brand-600 / --c-brand-700。 --------------------------------------------------------------------------- */ --c-brand-50:#FFF7F1; --c-brand-100:#FFF1E6; /* 原型实测：eyebrow 底、解密按钮底 */ --c-brand-200:#FFDCC2; --c-brand-300:#FFBB8A; --c-brand-400:#FF9247; --c-brand-500:#FF6600; /* 品牌基准（原型 logo #FE6F00，规范化为 #FF6600） */ --c-brand-600:#E85D00; /* 实心按钮底 / hover，白字对比 3.5:1 */ --c-brand-700:#C24E00; /* 橙色文字，白底 4.79:1 · 暖白底 4.51:1 → AA ✓ */ --c-brand-800:#9A3412; /* 暖卡片标题，暖底 6.61:1 → AAA ✓ */ --c-brand-soft:rgba(255,102,0,.10); /* 2. 色彩 · 中性暖灰（画布偏暖，灰阶同步偏移，避免冷暖打架） */ --c-ink-900:#16181D; /* 原型实测：主标题、卡片公司名 */ --c-ink-700:#3D4046; --c-ink-600:#44474D; /* 原型实测：CTA 副标题 */ --c-ink-500:#6B7280; /* 次要文字、时间 */ --c-ink-400:#8A8D94; /* 原型实测：行业标签字、占位文字 */ --c-ink-300:#B9BCC2; /* 禁用 */ --c-line:#ECEAE3; /* 原型实测：卡片描边、顶栏底线 */ --c-line-strong:#DCD8CF; /* hover 描边 */ --c-fill:#F2F0EA; /* 原型实测：行业标签底、次级填充 */ --c-fill-hover:#F7F6F1; --c-surface:#FFFFFF; /* 卡片、输入框 */ --c-surface-2:#FFFCF9; /* 卡片内嵌区块 */ --c-canvas:#FAF9F6; /* 原型实测：页面底色（全幅，含顶栏） */ --c-overlay:rgba(22,24,29,.44); /* 3. 色彩 · 语义 每组给「装饰色」与「文字色」两个值：装饰色保原型的观感，文字色保证 AA。 原型字色 / 规范后字色 / 对比度：青 3.30→4.60，紫 4.10→5.32 */ --c-success:#0E9488; /* 原型实测：乙方徽章色（装饰/图标） */ --c-success-text:#0B7A70; /* 文字用，4.60:1 ✓ */ --c-success-bg:#E1F5F1; --c-success-line:#BEE9E2; --c-info:#2B5FE3; /* 原型实测：甲方徽章色，4.70:1 ✓ 可直用 */ --c-info-text:#2B5FE3; --c-info-bg:#E8EEFF; --c-info-line:#C9D8FF; --c-violet:#7C4DFF; /* 品牌方（装饰/图标） */ --c-violet-text:#6A3AE6; /* 文字用，5.32:1 ✓ */ --c-violet-bg:#EFEAFF; --c-violet-line:#DCD2FF; --c-warning:#B45309; --c-warning-bg:#FFF7ED; --c-danger:#D93A3A; --c-danger-bg:#FEF1F1; --c-danger-line:#F7C9C9; /* 4. 角色徽章（语义固定：甲方蓝 / 乙方青 / 品牌方紫 / 甲乙方渐变） ⚠️ PRD §4.7 写「乙方紫」，与原型及现网实现（乙方青 #0E9488）冲突，以本表为准。 */ --role-a-text:var(--c-info-text); --role-a-bg:var(--c-info-bg); --role-a-line:var(--c-info-line); --role-b-text:var(--c-success-text);--role-b-bg:var(--c-success-bg); --role-b-line:var(--c-success-line); --role-brand-text:var(--c-violet-text);--role-brand-bg:var(--c-violet-bg);--role-brand-line:var(--c-violet-line); --role-ab-text:#5B4BD6; --role-ab-bg:linear-gradient(90deg,#E8EEFF 0%,#EFEAFF 100%); --role-ab-line:#D2D6F5; /* 5. 字体 */ --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC", "Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC","Segoe UI",Roboto,sans-serif; --font-num:"SF Mono",ui-monospace,Menlo,Consolas,monospace; /* 仅用于条号/金额对齐 */ /* 6. 字号（由原型汉字墨迹高度反推） 11 表格/极小 · 12 标签/时间 · 13 eyebrow/热门词 · 14 正文/导航 16 卡片标题/搜索输入 · 18 CTA标题 · 22 区块标题 · 28 大标题 */ --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-22:22px; --fs-28:28px; /* 7. 字重（不使用 900，800 已是视觉上限，避免发虚） */ --fw-r:400; --fw-m:500; --fw-sb:600; --fw-b:700; --fw-eb:800; /* 8. 行高 */ --lh-tight:1.25; /* 大标题 */ --lh-snug:1.4; /* 卡片标题 */ --lh-base:1.55; /* 正文 */ --lh-loose:1.65; /* 9. 间距（4pt 基准） */ --sp-1:2px; --sp-2:4px; --sp-3:8px; --sp-4:12px; --sp-5:16px; --sp-6:20px; --sp-7:24px; --sp-8:32px; --sp-9:40px; --sp-10:48px; --sp-11:64px; /* 10. 圆角 */ --r-xs:4px; /* 极小标记 */ --r-sm:6px; /* 角色/行业标签 */ --r-md:8px; /* 小按钮 */ --r-lg:10px; /* 常规按钮 */ --r-xl:14px; /* 搜索框、卡片、CTA 条（原型实测） */ --r-2xl:16px; --r-pill:999px; /* 胶囊：eyebrow、热门词、导航、coin pill */ /* 11. 阴影（克制：静态卡片无阴影，仅 hover 与浮层使用） */ --sh-1:0 1px 2px rgba(22,24,29,.04); --sh-2:0 2px 8px rgba(22,24,29,.05); --sh-hover:0 10px 30px rgba(22,24,29,.08); --sh-pop:0 16px 48px rgba(22,24,29,.14); --sh-brand:0 8px 30px rgba(255,102,0,.14); --sh-focus:0 0 0 3px rgba(255,102,0,.22); /* 12. 动效 */ --dur-1:120ms; --dur-2:180ms; --dur-3:260ms; --ease-out:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.4,0,.2,1); /* 13. 布局 */ --w-content:1180px; /* 原型实测内容列宽（边框线取样：三卡 380×3 + 20×2 = 1180） */ --w-shell:1228px; /* 外壳＝内容列 1180 + 两侧 24 内边距（用于 max-width） */ --w-narrow:768px; /* 搜索框、阅读态 */ --w-header:64px; /* 原型实测顶栏高 */ --w-card:380px; /* 业务卡宽 */ --h-card:186px; /* 业务卡高（锁死） */ --gap-card:20px; /* 卡片列间距 */ --gutter:24px; --z-header:50; --z-pop:100; --z-toast:200; /* 14. 栅格 */ --grid-gap:var(--sp-8); /* 卡片列间距 32（原型实测） */ --grid-cols:3; /* 首页今日最新 */ } /* 断点（文档用，CSS 无法定义变量断点） ≥1200 桌面：三列卡 900-1199 小桌面：三列卡（列宽压缩至 ≥280） 640-899 平板：两列卡 <640 移动：单列卡、顶栏两行、搜索按钮收缩为图标+文字 */ /* ============================================================================= 兼容映射层 — 让现有 index.html 只加一行 即可获得新 token ============================================================================= */ :root{ --bg:var(--c-canvas); --panel:var(--c-surface); --panel2:var(--c-fill); --border:var(--c-line); --text:var(--c-ink-900); --muted:var(--c-ink-500); --brand:var(--c-brand-500); --green:var(--c-success); --greenbg:var(--c-success-bg); --gray:var(--c-ink-500); --graybg:var(--c-fill); --purple:var(--c-violet); --purple-soft:var(--c-violet-bg); --user:var(--c-info-bg); --bot:var(--c-fill); --tag:var(--c-info); --cta:var(--c-brand-500); } /* 基础排版基线（可选启用） */ html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--c-canvas); color:var(--c-ink-900); font-family:var(--font-sans); font-size:var(--fs-14); line-height:var(--lh-base); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .num{ font-variant-numeric:tabular-nums; } @media (prefers-reduced-motion:reduce){ :root{ --dur-1:0ms; --dur-2:0ms; --dur-3:0ms; } }