From 011189a38cd297b5d98b86e00b92a73032a05475 Mon Sep 17 00:00:00 2001 From: zhangxiang Date: Mon, 31 Aug 2026 17:24:59 +0800 Subject: [PATCH] =?UTF-8?q?fix(css):=20globals.css=2022=20=E4=B8=AA=20rgb?= =?UTF-8?q?=20=E5=8F=98=E9=87=8F=E6=A0=BC=E5=BC=8F=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=EF=BC=88=E9=80=97=E5=8F=B7=E2=86=92=E7=A9=BA=E6=A0=BC=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tailwind v3 颜色配置 rgb(var(--color-X-rgb) / ) 要求 RGB 分量空格分隔。 原逗号分隔 'R, G, B' 与 组合生成无效 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 变量改为空格分隔，恢复颜色正确显示。 --- src/app/globals.css | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 4199c12..b8deede 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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; } }