/* ========================================================================== design-tokens-creators.css —— creators.html 第 6 页「扩展令牌」 -------------------------------------------------------------------------- ⚠️ 只新增，不修改。assets/css/tokens.css 现有令牌一个字都不动。 ⚠️ 引入顺序必须是：tokens.css → design-tokens-creators.css → site.css （扩展令牌可以引用现有令牌，故放在 tokens.css 之后；site.css 里若要 写 .cr-* 组件样式，也依赖这里定义的变量，故放在 site.css 之前。） 设计寄存器：Brand（营销专栏页） 三轴刻度：VARIANCE=7 / MOTION=6 / DENSITY=6 作者：颜好看 | 2026-09-19 命名规则：--cr-{类别}-{用途}-{变体} （cr = creators） ========================================================================== */ :root { /* ==================================================================== 1. 四核霓虹 —— 与现有紫粉基调同源，只提饱和/提亮，并补两个对比色相 -------------------------------------------------------------------- 现有 --c-accent #B9A6FF（淡紫，低饱和） → --cr-neon-violet #9B6BFF（提纯） 现有 --c-accent-2 #FF9FD6（淡粉，低饱和） → --cr-neon-magenta #FF3DBE（提纯） 新增 --cr-neon-cyan / --cr-neon-amber 作为对比色相，分别承载 「数据/信息」与「加购/高亮」两种语义。 ⚠️ 使用规则（硬约束）： ① 同一屏内同时可见的霓虹色相 ≤ 2 个 —— 禁止 3 个霓虹色相同屏。 ② 霓虹禁用于正文段落，只用于 ≥14px 的数字、徽标、标题、边框。 ③ 禁止紫(#9B6BFF) ↔ 青(#2FE6FF) 之间任何渐变过渡 —— 二者互为互补色， 红绿色盲下会混淆，尤其在数据条/图表等需区分层次的场景。 允许：同色相内的明度渐变（如 #2FE6FF → #35B8CC）； 两个并列色块之间直接切换（不是渐变）。 豁免：站点既有的紫→粉品牌渐变（favicon 等既有资产）——属品牌识别， 不是数据表达。 ④ 浅色主题下四色明度接近，②条件外另需禁止 cyan + violet 同屏（见下方 light 段）。 ==================================================================== */ --cr-neon-cyan: #2FE6FF; /* 数据 / 指标 / 链接 / 焦点 实测 13.23:1 */ --cr-neon-magenta: #FF3DBE; /* 品牌主推 / 人设 / 冠军节点 实测 6.35:1 */ --cr-neon-violet: #9B6BFF; /* 次级强调 / 分类 / 平台徽标 实测 5.66:1 */ --cr-neon-amber: #FFD84D; /* 加购 / 提醒 / 峰值高亮 实测 14.47:1 */ /* 以上实测值基于底色 #08080A，按 WCAG 2.1 相对亮度公式脚本实算，非估算。 复算脚本：docs/contrast-check.js；明细表见 DESIGN-creators.md §3.5。 */ /* 霓虹柔化版：12% 不透明度，用于描边底 / chip 背景 */ --cr-neon-cyan-soft: rgba(47, 230, 255, 0.12); --cr-neon-magenta-soft: rgba(255, 61, 190, 0.12); --cr-neon-violet-soft: rgba(155, 107, 255, 0.12); --cr-neon-amber-soft: rgba(255, 216, 77, 0.12); /* 霓虹边框 */ --cr-line-neon: rgba(47, 230, 255, 0.34); /* 默认霓虹边框 */ --cr-line-neon-hot: rgba(255, 61, 190, 0.42); /* 主推档边框 */ /* ==================================================================== 2. 发光阴影 —— 暗底上的「浮起感」靠边缘变亮，不靠底下变暗（沿用现有思路） ==================================================================== */ --cr-glow-cyan: 0 0 0 1px rgba(47, 230, 255, 0.30), 0 0 22px -6px rgba(47, 230, 255, 0.34); --cr-glow-magenta: 0 0 0 1px rgba(255, 61, 190, 0.30), 0 0 22px -6px rgba(255, 61, 190, 0.34); --cr-glow-soft: 0 0 18px -4px rgba(47, 230, 255, 0.22); /* 卡片 hover 抬起：继承 --shadow-lift 的思路（不位移，避免同排错位） */ --cr-lift: 0 16px 36px -16px rgba(0, 0, 0, 0.70), inset 0 1px 0 rgba(255, 255, 255, 0.09); /* 图表配色 —— 数据可视化专用（全部带文字图例，不靠颜色单独表意） ⚠️ 本页新资产一律禁止跨色相渐变。青(#2FE6FF) 与 紫(#9B6BFF) 是「并列色块」， 不得做青→紫渐变过渡（那是跨色相）。需要层次时用「同色相不同明度」 或「并列色块 + 文字图例」。紫→粉渐变属站点既有品牌资产，不在此列， 但 creators 页新增的一切视觉资产都不使用跨色相渐变。 ==================================================================== */ --cr-chart-track: rgba(255, 255, 255, 0.07); /* 轨道底 */ --cr-chart-bar: var(--cr-neon-cyan); /* 数据条主色 */ --cr-chart-bar-alt: var(--cr-neon-violet); /* 数据条次色（青主 + 紫辅，两色并列不使用渐变过渡） */ --cr-chart-gender-a: var(--cr-neon-magenta); /* 性别分布 A 段 */ --cr-chart-gender-b: var(--cr-neon-cyan); /* 性别分布 B 段 */ /* 时段峰值柱：早期版本指向 amber，但区块 2「粉丝画像」按色相推演结论收敛为 单色相 {cyan}（否则 1∩2 交界并集会被抬到 2 以上）。 故峰值改用「青的同色相明度变体」表达层次 —— 同色相内做明度差是合规的， 跨色相才是禁止项（见上方图表配色注释）。 用 color-mix 派生而非再写一遍色值：主题切换时自动跟随 --cr-neon-cyan， 不会出现「改了主色、峰值柱忘了改」的漂移。 验证：node docs/verify-hues.js 中区块 2 声明色相 = {cyan} */ --cr-chart-peak: color-mix(in srgb, var(--cr-neon-cyan) 82%, white); /* ==================================================================== 4. 动态网格 —— 比现有 hero 的 92px 更密，强化「直播间信号感」 ==================================================================== */ --cr-grid-size: 56px; --cr-grid-line: var(--c-line-soft); /* ==================================================================== 5. 时间线（战绩轨道） ==================================================================== */ --cr-track-line: var(--c-line); /* 轨道线 */ --cr-node-size: 11px; /* 节点圆点直径 */ --cr-node-bg: var(--c-bg-raise); --cr-node-ring: var(--cr-line-neon); /* 普通节点环 */ --cr-node-hot: var(--cr-neon-magenta); /* 冠军节点（发光） */ /* ==================================================================== 6. 数据条（条形图）几何 -------------------------------------------------------------------- 原设 --cr-bar-h / --cr-bar-radius / --cr-bar-gap 三个「统一尺寸」令牌， 实测各图条的几何并不统一，令牌无从落地： · .cr-bar （地域横条） height=8 rx=9999 · .cr-bar-v （年龄竖柱） height 各异 rx=6 · .cr-bar-h （性别堆叠） height=20 rx=无 · .cr-bar-v （时段竖柱） height 各异 rx=无（24 根） 若强行统一会在 .cr-bar-v/.cr-bar-h 上改变既有渲染（柱宽变胶囊 / 堆叠条被压扁）， 且 SVG presentation attribute 上写 var() 在旧 WebKit / 微信内置浏览器支持不一致。 故不留「定义了却永不引用」的死令牌，几何一律就地在各 上声明。 ==================================================================== */ /* ==================================================================== 7. 排版扩展 —— 复用现有三字族，只补电竞化的字号/字距 ==================================================================== */ --cr-fs-stat-sm: clamp(1.5rem, 2.4vw, 2.2rem); /* 6 格看板数字 */ --cr-fs-stat: clamp(2rem, 3.2vw, 3rem); /* 档案卡关键指标 */ --cr-fs-stat-lg: clamp(2.6rem, 4.4vw, 4.2rem); /* 首屏 / 主推大数字 */ --cr-ls-mega: 0.3em; /* 超宽全大写眉标 */ --cr-ls-stat: -0.03em; /* 大数字负字距 */ /* ==================================================================== 8. 焦点环 —— 键盘可达（a11y 硬要求） ==================================================================== */ --cr-focus: 0 0 0 3px rgba(47, 230, 255, 0.42); /* ==================================================================== 9. 动效时长 —— 新增的三个「持续微动效」周期 缓动一律复用现有 --e-out / --e-inout，禁止弹跳缓动。 ==================================================================== */ --cr-t-grid: 40s; /* 动态网格平移 */ --cr-t-breath: 3.2s; /* 霓虹呼吸 */ --cr-t-bar: 1.2s; /* 数据条增长 */ /* ==================================================================== 10. 双视角（F3）主题色 —— 令牌层给默认值，切换时由 site.css 覆写 视角切换只改这两个变量，卡片/图标的强调色随之联动，不改 DOM。 默认取主播视角（品红，单色相，无辅色——见 DESIGN §P2-1.6/L796）。 经纪人视角的启用见 site.css 的 .cr-view[data-view="agent"] 规则。 ==================================================================== */ --cr-view-accent: var(--cr-neon-magenta); /* 视角主强调色（默认主播视角） */ /* 视角辅强调色（agent 视角的次级 UI：轻提示锚点 / 图例）。 按 DESIGN §P2-1.6（L794）映射到「分类 / 识别」角色位： 暗色 = taxonomy(violet)，浅色 = taxonomy(amber) —— 由 §11 自动派生， 不在浅色段重复覆写（避免「改了 taxonomy、这里忘了跟」的漂移）。 */ --cr-view-accent-2: var(--cr-role-taxonomy); /* ==================================================================== 11. 语义角色位「分类 / 识别 / 徽标」 -------------------------------------------------------------------- 这个角色在暗色下由 violet 承担，但浅色主题明文禁用 cyan + violet 同屏 （见上方浅色段的额外约束）。逐块躲避会与语义硬锚点冲突（例如「品牌墙＝ 分类＝紫」紧邻「价格＝数字＝青」，主色相无法错开），故采用构造性解法： 浅色主题下把本角色位整体指向 amber，于是 violet 在浅色下恒不出现， 「cyan + violet 同屏 / 相邻」由构造自动满足。 ⚠️ 凡是「平台徽标 / 作品类型 / 图例 / 分类标签」这类角色， 一律引用本令牌，不要直接写 --cr-neon-violet —— 直写 violet 会让浅色主题漏掉这条降级，导致浅色下青紫同屏。 ⚠️ 注意：区块 0（首屏）的平台徽标按色相推演结论走品红，不用本角色位。 ==================================================================== */ --cr-role-taxonomy: var(--cr-neon-violet); /* 暗色 = 紫 */ } /* ========================================================================== 浅色主题适配 -------------------------------------------------------------------------- 现有站点支持 。高饱和霓虹在白底上会「失光」且刺眼， 所以浅色主题下把霓虹整体压深（保色相、降明度、提饱和），保证对比度仍达标。 本页默认跟随站点主题，不强制暗色。 ========================================================================== */ html[data-theme="light"] { /* 对比度实测基准：WCAG 2.1 相对亮度公式，底色 #FAFAF8。 全部为脚本实算值（非估算），复算脚本 docs/contrast-check.js，明细见 DESIGN §3.5。 */ --cr-neon-cyan: #16758C; /* 深青 实测 5.08:1 ✅ AA */ --cr-neon-magenta: #C2247E; /* 深品红 实测 5.22:1 ✅ AA */ --cr-neon-violet: #6741C4; /* 深紫 实测 6.42:1 ✅ AA */ --cr-neon-amber: #8A5E00; /* 深棕金 实测 5.46:1 ✅ AA */ /* ⚠️ 浅色主题额外约束：上述四色明度被压到接近区间，小尺寸下 cyan 与 violet 易混。 故浅色主题下「每屏 ≤2 色相」要更严格执行 —— 禁用 cyan + violet 组合同屏， 且二者不得相邻放置。详见 DESIGN §3.6。 */ --cr-neon-cyan-soft: rgba(22, 117, 140, 0.10); --cr-neon-magenta-soft: rgba(194, 36, 126, 0.10); --cr-neon-violet-soft: rgba(103, 65, 196, 0.10); --cr-neon-amber-soft: rgba(138, 94, 0, 0.10); --cr-line-neon: rgba(22, 117, 140, 0.38); --cr-line-neon-hot: rgba(194, 36, 126, 0.42); --cr-glow-cyan: 0 0 0 1px rgba(22, 117, 140, 0.32), 0 0 18px -8px rgba(22, 117, 140, 0.26); --cr-glow-magenta: 0 0 0 1px rgba(194, 36, 126, 0.32), 0 0 18px -8px rgba(194, 36, 126, 0.26); --cr-glow-soft: 0 0 14px -6px rgba(22, 117, 140, 0.20); --cr-lift: 0 12px 30px -14px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.60); --cr-chart-track: rgba(8, 8, 10, 0.08); --cr-focus: 0 0 0 3px rgba(22, 117, 140, 0.40); /* 语义角色位「分类 / 识别 / 徽标」在浅色下整体降级为 amber。 这是「浅色禁用 cyan + violet 同屏」的构造性解法 —— 降级后 violet 在 浅色主题下恒不出现，规则自动满足，无需逐块检查。 验证：node docs/verify-hues.js → 浅色主题实际色相集合 {cyan, magenta, amber} */ --cr-role-taxonomy: var(--cr-neon-amber); } /* ========================================================================== 减少动态效果 —— 硬要求：全部降级为静态终态，绝不白屏 ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --cr-t-grid: 0.001ms; --cr-t-breath: 0.001ms; --cr-t-bar: 0.001ms; } }