fix(css): globals.css 22 个 rgb 变量格式修复(逗号→空格)

Tailwind v3 颜色配置 rgb(var(--color-X-rgb) / <alpha-value>) 要求 RGB 分量空格分隔。
原逗号分隔 'R, G, B' 与 <alpha-value> 组合生成无效 CSS 'rgb(10, 14, 20 / 1)',
浏览器解析失败回退 rgba(0,0,0,0) 透明,导致 bg-ink / bg-brand/15 / border-brand/30
等所有依赖 alpha 的颜色全站不可见(Hero H1、立即咨询按钮、slogan badge 隐形)。

修复后将 22 个 --color-*-rgb 变量改为空格分隔,恢复颜色正确显示。
This commit is contained in:
2026-08-31 17:24:59 +08:00
parent bf9c992300
commit 011189a38c
+22 -22
View File
@@ -17,7 +17,7 @@ body {
--color-ink: #0A0E14;
--color-ink-light: #0F1419;
--color-ink-lighter: #151B23;
--color-ink-rgb: 10, 14, 20;
--color-ink-rgb: 10 14 20;
/* 品牌信号色:朱砂红 — Committed 色彩策略(Bain 式自信表达) */
--color-brand: #C41E3A;
@@ -25,7 +25,7 @@ body {
--color-brand-light: #E04A68;
--color-brand-soft: rgba(196, 30, 58, 0.12);
--color-brand-bg: #FEF2F4;
--color-brand-rgb: 196, 30, 58;
--color-brand-rgb: 196 30 58;
/* 品牌色深色区块(Bain 式深红背景) */
--color-brand-section: #8B1530;
--color-brand-section-text: #F8FAFC;
@@ -34,40 +34,40 @@ body {
/* 辅助色:服务/行业编码 */
--color-accent-blue: #3B82F6;
--color-accent-blue-soft: rgba(59, 130, 246, 0.12);
--color-accent-blue-rgb: 59, 130, 246;
--color-accent-blue-rgb: 59 130 246;
--color-accent-teal: #14B8A6;
--color-accent-teal-soft: rgba(20, 184, 166, 0.12);
--color-accent-teal-rgb: 20, 184, 166;
--color-accent-teal-rgb: 20 184 166;
--color-accent-amber: #F59E0B;
--color-accent-amber-soft: rgba(245, 158, 11, 0.12);
--color-accent-amber-rgb: 245, 158, 11;
--color-accent-amber-rgb: 245 158 11;
--color-accent-purple: #8B5CF6;
--color-accent-purple-soft: rgba(139, 92, 246, 0.12);
--color-accent-purple-rgb: 139, 92, 246;
--color-accent-purple-rgb: 139 92 246;
--color-accent-cyan: #06B6D4;
--color-accent-cyan-soft: rgba(6, 182, 212, 0.12);
--color-accent-cyan-rgb: 6, 182, 212;
--color-accent-cyan-rgb: 6 182 212;
/* 背景色层级 */
--color-bg-primary: #FFFFFF;
--color-bg-secondary: #F8FAFC;
--color-bg-secondary-rgb: 248, 250, 252;
--color-bg-secondary-rgb: 248 250 252;
--color-bg-tertiary: #F1F5F9;
--color-bg-section: #F8FAFC;
--color-bg-hover: #F1F5F9;
--color-bg-elevated: #FFFFFF;
--color-bg-primary-rgb: 255, 255, 255;
--color-bg-primary-rgb: 255 255 255;
/* 文字色层级 */
--color-text-primary: #0A0E14;
--color-text-secondary: #334155;
--color-text-secondary-rgb: 51, 65, 85;
--color-text-secondary-rgb: 51 65 85;
--color-text-tertiary: #475569;
--color-text-muted: #64748B;
--color-text-muted-rgb: 100, 116, 139;
--color-text-muted-rgb: 100 116 139;
--color-text-subtle: #64748B;
--color-text-placeholder: #64748B;
/* 仅用于 ≥24px 大号装饰性文本(如章节序号),对白底 3.41:1,满足 AA 大字 3:1。
@@ -79,17 +79,17 @@ body {
让 20 处 gap-px bg-border-primary 网格线与所有卡片边框都自动弱化(约 50%),
与增强的卡片阴影呼应,视觉从"靠硬边分界"转为"靠阴影分层"。 */
--color-border-primary: #EEF2F7;
--color-border-primary-rgb: 238, 242, 247;
--color-border-primary-rgb: 238 242 247;
--color-border-secondary: #CBD5E1;
--color-border-secondary-rgb: 203, 213, 225;
--color-border-secondary-rgb: 203 213 225;
--color-border-accent: #0A0E14;
--color-border-accent-rgb: 10, 14, 20;
--color-border-accent-rgb: 10 14 20;
--color-border-light: #F1F5F9;
--color-border-light-rgb: 241, 245, 249;
--color-border-light-rgb: 241 245 249;
--color-border-dark: #334155;
--color-border-dark-rgb: 51, 65, 85;
--color-border-dark-rgb: 51 65 85;
--color-border-brand: #C41E3A;
--color-border-brand-rgb: 196, 30, 58;
--color-border-brand-rgb: 196 30 58;
/* 链接色 */
--color-link: #0A0E14;
@@ -99,24 +99,24 @@ body {
--color-success: #16A34A;
--color-success-hover: #15803D;
--color-success-bg: #F0FDF4;
--color-success-rgb: 22, 163, 74;
--color-success-rgb: 22 163 74;
/* 文字专用:--color-success 仅 3.30:1,作正文色不达 AA;本值 5.02:1(于 success-bg 上 4.79:1 */
--color-success-text: #15803D;
--color-warning: #D97706;
--color-warning-hover: #B45309;
--color-warning-bg: #FFFBEB;
--color-warning-rgb: 217, 119, 6;
--color-warning-rgb: 217 119 6;
/* 文字专用:--color-warning 仅 3.19:1,作正文色不达 AA;本值 5.02:1(于 warning-bg 上 4.84:1 */
--color-warning-text: #B45309;
--color-error: #C41E3A;
--color-error-hover: #A01830;
--color-error-bg: #FEF2F4;
--color-error-rgb: 196, 30, 58;
--color-error-rgb: 196 30 58;
--color-info: #3B82F6;
--color-info-rgb: 59, 130, 246;
--color-info-rgb: 59 130 246;
--color-info-bg: #EFF6FF;
/* 文字专用:--color-info 仅 3.68:1,作正文色不达 AA;本值 6.70:1(于 info-bg 上 6.16:1 */
--color-info-text: #1D4ED8;
@@ -649,7 +649,7 @@ body {
--color-text-secondary: #1a1a1a;
--color-border-primary: #000000;
/* Tailwind border-* 工具类消费 rgb 通道,需同步覆写,否则高对比度模式下边框静默失效 */
--color-border-primary-rgb: 0, 0, 0;
--color-border-primary-rgb: 0 0 0;
}
}