/* =========================== 云舟智渡官网 - 主样式表 ========================== */ /* =========================== 主题调色板（深 / 浅 双版本） - :root 默认 = 深色（品牌调性） - [data-theme="light"] = 浅色版本 - 切换逻辑：JS 加 data-theme 到 ，localStorage 持久化 =========================== */ :root { /* ===== 字号缩放比例（V2 · 0.92 / 1.0 两档切换） ===== 0.92（小·A 默认）= 信息密集场景（≥14px 下限，2026-06 整改） 1.0（中·A+）= V1 基线 JS 改这个值，全站字号等比例缩放（hero / dropdown / 卡片 一致） */ --font-scale: 0.92; /* ===== 字体堆栈（v1 统一） ===== */ --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "Fira Code", Menlo, "Cascadia Code", Consolas, monospace; /* ===== 字重 token（v1 统一） ===== */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ===== 7 级字号 token（v1 · 移动优先 rem 体系） ===== 基线 17px 桌面 / 16px 移动； 整体较旧版（13/14/15 主体）上调 1–2px，照顾 50+ 决策者 */ /* 注意：使用 px 而非 rem 作为基础端点。 原因：避免和 html { font-size: var(--fs-body) } 在 @media 内链式相乘， 否则移动端 A 档下 --fs-body 会变成 14.72×0.92=13.54px（低于 MD 14sp 下限） */ --fs-display: calc(48px * var(--font-scale)); /* Hero H1 */ --fs-h1: calc(40px * var(--font-scale)); /* Section 大标题 */ --fs-h2: calc(28px * var(--font-scale)); /* 子标题 / 大数字 */ --fs-h3: calc(22px * var(--font-scale)); /* 卡片标题 */ --fs-h4: calc(18px * var(--font-scale)); /* 列表项 / 表头 */ --fs-body-lg:calc(17px * var(--font-scale)); /* 大段正文 / 段落首段 */ --fs-body: calc(16px * var(--font-scale)); /* 标准正文主力 */ --fs-small: calc(15px * var(--font-scale)); /* 辅助文 / caption */ --fs-caption:calc(13px * var(--font-scale)); /* 法律 / footer */ --fs-micro: calc(11px * var(--font-scale)); /* monospace 元数据 */ /* ===== 派生 token：viewport-aware（合同 B.1 · 整改 2026-06） ===== 把 clamp() 收编在 token 里，调用方只 var(--fs-*) 即可响应 A / A+ 切档 min/max 用 px 套 var(--font-scale)，保证 A+ 时同比放大且解耦 html 缩放 */ --fs-hero: clamp(36px * var(--font-scale), 6vw, 48px * var(--font-scale)); --fs-subhero: clamp(32px * var(--font-scale), 5vw, 44px * var(--font-scale)); --fs-section: clamp(28px * var(--font-scale), 3.5vw, 40px * var(--font-scale)); --fs-subsection: clamp(24px * var(--font-scale), 3vw, 34px * var(--font-scale)); /* 字号行高（v1 统一：正文 1.6→1.7，更利于扫读） */ --lh-tight: 1.2; --lh-snug: 1.3; --lh-base: 1.7; /* 正文默认（原 1.6） */ --lh-relaxed: 1.5; /* caption */ --lh-caps: 1.0; /* 大写英文 label */ /* ===== 5 个彩色文字 token（v1 统一） ===== 单一职责：每个 token 仅 1 个用途，避免散落混用 */ --c-emphasis: #DE805A; /* 段落内联高亮（strong / em）1 段 ≤ 1 处 */ --c-cta: #DE805A; /* CTA 链接 / 按钮文字 */ --c-link: #2D8CA5; /* 普通链接 */ --c-data: #F28339; /* 数字 / 指标强调 */ /* 主色（两版通用，仅微调深浅以保证对比度） */ --primary: #00D4FF; --primary-dark: #00A8CC; --primary-hover: #33DDFF; --primary-on: #001218; /* 在主色背景上的前景色 */ --primary-glow: rgba(0, 212, 255, 0.15); /* 强调色 */ --accent: #7B61FF; --accent2: #00FFB0; --warn: #FFB400; --danger: #FF5F56; /* ===== 痛点分类色（v2.5 · 七类十八大痛点） 语义色：每类一个独立色，绑定痛点卡片顶部色条 + 类别徽章 浅色版在 [data-theme="light"] 覆盖（见 line ~395 附近） 全部走 token，禁止散落硬编码 hex */ --cat-color-1: #F59E0B; /* 1 采买之乱 · 暖橘 · 钱/钱包 */ --cat-color-2: #818CF8; /* 2 选择之难 · 蓝紫 · 决策/罗盘 */ --cat-color-3: #F472B6; /* 3 消耗之痛 · 玫红 · 成本/泄漏 */ --cat-color-4: #EF4444; /* 4 安全之患 · 红 · 警示/盾牌 */ --cat-color-5: #FBBF24; /* 5 质量之殇 · 金 · 质量/奖章 */ --cat-color-6: #34D399; /* 6 沉淀之殇 · 翠绿 · 积累/叠层 */ --cat-color-7: #60A5FA; /* 7 体验之缺 · 蓝 · 界面/工作台 */ /* soft 变体：用于徽章/胶囊软底（深底用 alpha 0.16） */ --cat-soft-1: rgba(245, 158, 11, 0.16); --cat-soft-2: rgba(129, 140, 248, 0.16); --cat-soft-3: rgba(244, 114, 182, 0.16); --cat-soft-4: rgba(239, 68, 68, 0.16); --cat-soft-5: rgba(251, 191, 36, 0.16); --cat-soft-6: rgba(52, 211, 153, 0.16); --cat-soft-7: rgba(96, 165, 250, 0.16); /* border 变体：用于 hover 边色（深底用 alpha 0.32） */ --cat-border-1: rgba(245, 158, 11, 0.32); --cat-border-2: rgba(129, 140, 248, 0.32); --cat-border-3: rgba(244, 114, 182, 0.32); --cat-border-4: rgba(239, 68, 68, 0.32); --cat-border-5: rgba(251, 191, 36, 0.32); --cat-border-6: rgba(52, 211, 153, 0.32); --cat-border-7: rgba(96, 165, 250, 0.32); /* 背景层级（深色版） */ --bg: #030B1A; --bg-elev: #061224; /* 卡片 / 浮层 */ --bg-elev-2: #0A1A30; /* 二级卡片 */ --bg-overlay: rgba(3, 11, 26, 0.95); /* 导航滚动后 */ /* 文字（对比度全部 AAA） */ --text: #FFFFFF; --text-secondary: #B8C5D6; /* 8.5:1，对比度从 7:1 提升 */ --text-muted: #9AAEC2; /* 6.2:1，对比度从 5.5:1 提升（AAA Large） */ --text-on-primary: #001218; /* 主色按钮文字 */ --text-on-accent2: #001218; /* 亮绿色实底文字 */ /* 边框 / 表面 */ --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.18); --border-hover: rgba(255, 255, 255, 0.12); --border-active: rgba(255, 255, 255, 0.15); --card-bg: rgba(255, 255, 255, 0.04); --card-border: rgba(255, 255, 255, 0.08); --card-hover: rgba(255, 255, 255, 0.055); --primary-soft: rgba(0, 212, 255, 0.035); --primary-soft-border: var(--border-hover); --accent-soft: rgba(123, 97, 255, 0.035); --accent-soft-border: var(--border-hover); --accent2-soft: rgba(0, 255, 176, 0.03); --accent2-soft-border: var(--border-hover); --warn-soft: rgba(255, 180, 0, 0.03); --warn-soft-border: var(--border-hover); /* 输入框（深色版：透明 + 白边） */ --input-bg: rgba(255, 255, 255, 0.04); --input-bg-focus: rgba(0, 212, 255, 0.06); --input-border-focus: rgba(0, 212, 255, 0.24); /* Hero 蒙版（深色版需要深蒙版） */ --hero-mask-1: rgba(3, 11, 26, 0.92); --hero-mask-2: rgba(3, 11, 26, 0.78); --hero-mask-3: rgba(3, 11, 26, 0.42); --hero-mask-4: rgba(3, 11, 26, 0.18); --hero-mask-5: rgba(3, 11, 26, 0.04); --hero-mask-bottom: rgba(3, 11, 26, 0.92); /* 微网格背景线 */ --grid-line: rgba(0, 212, 255, 0.025); --grid-line-2: rgba(0, 212, 255, 0.02); /* 阴影 / 发光 */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45); --shadow-glow: 0 8px 22px rgba(0, 0, 0, 0.18); /* 装饰光晕（深色版发光，浅色版关闭） */ --decorative-glow: rgba(0, 212, 255, 0.16); /* 几何 */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --nav-h: 72px; /* 兼容旧名字 */ --dark-bg: var(--bg); --dark-bg2: var(--bg-elev); --dark-bg3: var(--bg-elev-2); --text-primary: var(--text); /* 代码块（暗色走 Dracula 配色，浅色在 [data-theme="light"] 覆盖） */ --code-bg: #0D1B2A; --code-header: #1A2A3A; /* 主题过渡 */ color-scheme: dark; } /* =========================== 色系方案（CTA / 辅助色） 只覆盖 --cta / --link-2 系列，不动原 4 主色（绿/青绿/金/灰） 通过 [data-color-scheme="..."] 切换，localStorage 持久化 =========================== */ /* 默认 = warm（暖橘 · 蓝绿） */ :root, [data-color-scheme="warm"] { --cta: #DE805A; /* 暖橘 */ --cta-hover: #CF524E; /* 珊瑚红 */ --cta-on: #1D0D27; /* 深紫黑字 ≈ 6.2:1 AA（实测） */ --cta-soft: rgba(222, 128, 90, 0.14); --cta-soft-border: rgba(222, 128, 90, 0.32); --cta-glow: rgba(222, 128, 90, 0.32); --link-2: #2D8CA5; /* 蓝绿 */ --link-2-hover: #40C0CD; /* 蓝绿提亮 */ --link-2-soft: rgba(45, 140, 165, 0.12); --link-2-soft-border: rgba(45, 140, 165, 0.28); /* 装饰 / 渐变文字 / 边框（方案 A 扩展） */ --accent-text: #F28339; /* 渐变文字起色 · 暖橘红 */ --accent-text-2: #CF524E; /* 渐变文字止色 · 珊瑚红 */ --accent-border: #DE805A; /* 卡片 hover 边框 / 进度条 */ /* 完整色系方案 v3 · 6 个新增 token（图标 / 区块背景 / 胶囊 / 数据 / 强调） */ --icon-primary: #DE805A; /* 图标主色 · service / case / step / info */ --accent-bg: rgba(222, 128, 90, 0.10); /* 区块背景（淡）· metric / layer / gradient-cta */ --accent-bg-strong: rgba(222, 128, 90, 0.18); /* 区块背景（强）· stat-card / pricing.featured */ --badge-soft: rgba(222, 128, 90, 0.14); /* 通用软底胶囊 · badge-soft / section-tag / layer-tag */ --data-color: #F28339; /* 统计数字 / metric-value · 用色系亮色拉开层次 */ --emphasis: #DE805A; /* 强调 (h2/title.case-tag/news-tag/layer-name) */ /* 装饰色（v4 · 替换硬编码装饰光晕 / mega-icon 底 / tag-bg） */ --halo-bg: rgba(222, 128, 90, 0.10); /* section 装饰光晕底色 */ --halo-border: rgba(222, 128, 90, 0.18); /* section 装饰光晕边框 */ --tag-bg: rgba(222, 128, 90, 0.14); /* mega-col-icon / 数字徽章 / 胶囊底 */ /* 5 个彩色文字 token（v1 统一：每 token 单一职责） */ --c-emphasis: #F28339; /* 段落内联高亮 */ --c-cta: #DE805A; /* CTA 文字 */ --c-link: #2D8CA5; /* 普通链接 */ --c-data: #F28339; /* 数字强调 */ } /* cool（蓝紫 · 科技冷） */ [data-color-scheme="cool"] { --cta: #816CCA; /* 蓝紫 */ --cta-hover: #51448F; /* 蓝紫加深（hover 应更深，避开 #A6A5DC 偏浅） */ --cta-on: #1D0D27; /* 深紫黑字，已实测通过 AA */ --cta-soft: rgba(129, 108, 202, 0.14); --cta-soft-border: rgba(129, 108, 202, 0.32); --cta-glow: rgba(129, 108, 202, 0.32); --link-2: #40C0CD; /* 蓝绿点缀 */ --link-2-hover: #2D8CA5; /* 蓝绿 hover（同色相加深） */ --link-2-soft: rgba(64, 192, 205, 0.12); --link-2-soft-border: rgba(64, 192, 205, 0.28); /* 装饰 / 渐变文字 / 边框（方案 A 扩展） */ --accent-text: #40C0CD; /* 渐变起色 · 蓝绿点缀 */ --accent-text-2: #816CCA; /* 渐变止色 · 蓝紫 */ --accent-border: #2D8CA5; /* 边框 / 进度条 · 蓝绿 */ /* 完整色系方案 v3 · 6 个新增 token */ --icon-primary: #816CCA; /* 图标主色 · 蓝紫 */ --accent-bg: rgba(64, 192, 205, 0.10); --accent-bg-strong: rgba(129, 108, 202, 0.18); --badge-soft: rgba(129, 108, 202, 0.14); --data-color: #40C0CD; /* 蓝绿 · 数字 */ --emphasis: #816CCA; /* 蓝紫 · 强调 */ /* 装饰色（v4） */ --halo-bg: rgba(64, 192, 205, 0.10); --halo-border: rgba(64, 192, 205, 0.18); --tag-bg: rgba(129, 108, 202, 0.14); /* 5 个彩色文字 token（v1 统一） */ --c-emphasis: #816CCA; /* 段落内联高亮 */ --c-cta: #816CCA; /* CTA 文字 */ --c-link: #40C0CD; /* 普通链接 */ --c-data: #40C0CD; /* 数字强调 */ } /* luxe（金黄 · 砖红 · 奢华） */ [data-color-scheme="luxe"] { --cta: #EBC03A; /* 金黄 */ --cta-hover: #F28339; /* 橘红 */ --cta-on: #1D0D27; /* 深紫黑字，已实测通过 AAA */ --cta-soft: rgba(235, 192, 58, 0.18); --cta-soft-border: rgba(235, 192, 58, 0.40); --cta-glow: rgba(235, 192, 58, 0.34); --link-2: #D85F45; /* 砖红 · 深底提亮 (4.7:1 AA on #030B1A) */ --link-2-hover: #CF524E; /* 珊瑚红 hover */ --link-2-soft: rgba(129, 48, 40, 0.14); --link-2-soft-border: rgba(129, 48, 40, 0.32); /* 装饰 / 渐变文字 / 边框（方案 A 扩展） */ --accent-text: #F28339; /* 渐变起色 · 橘红 */ --accent-text-2: #E3742B; /* 渐变止色 · 深橘 */ --accent-border: #EBC03A; /* 边框 / 进度条 · 金黄 */ /* 完整色系方案 v3 · 6 个新增 token */ --icon-primary: #EBC03A; /* 图标主色 · 金黄 */ --accent-bg: rgba(235, 192, 58, 0.10); --accent-bg-strong: rgba(235, 192, 58, 0.18); --badge-soft: rgba(235, 192, 58, 0.18); --data-color: #EBC03A; /* 金黄 · 数字 */ --emphasis: #EBC03A; /* 金黄 · 强调 */ /* 装饰色（v4） */ --halo-bg: rgba(235, 192, 58, 0.10); --halo-border: rgba(235, 192, 58, 0.18); --tag-bg: rgba(235, 192, 58, 0.18); /* 5 个彩色文字 token（v1 统一） */ --c-emphasis: #EBC03A; /* 段落内联高亮 */ --c-cta: #EBC03A; /* CTA 文字 */ --c-link: #D85F45; /* 普通链接（砖红） */ --c-data: #EBC03A; /* 数字强调 */ } /* violet（紫色家族 · 梦幻沉浸） */ [data-color-scheme="violet"] { --cta: #5C5AB5; /* 蓝紫 */ --cta-hover: #816CCA; /* 蓝紫 hover */ --cta-on: #FFFFFF; /* 白字，已实测通过 AA */ --cta-soft: rgba(92, 90, 181, 0.14); --cta-soft-border: rgba(92, 90, 181, 0.32); --cta-glow: rgba(92, 90, 181, 0.32); --link-2: #C28BC4; /* 中紫 · 深底提亮 (6.5:1 AA on #030B1A) */ --link-2-hover: #C6B0C9; /* 浅紫 hover */ --link-2-soft: rgba(155, 103, 159, 0.12); --link-2-soft-border: rgba(155, 103, 159, 0.28); /* 装饰 / 渐变文字 / 边框（方案 A 扩展） */ --accent-text: #C6B0C9; /* 渐变起色 · 浅紫 */ --accent-text-2: #C28BC4; /* 渐变止色 · 中紫提亮 (6.5:1 AA on #030B1A) */ --accent-border: #5C5AB5; /* 边框 / 进度条 · 蓝紫 */ /* 完整色系方案 v3 · 6 个新增 token */ --icon-primary: #5C5AB5; /* 图标主色 · 蓝紫 */ --accent-bg: rgba(92, 90, 181, 0.10); --accent-bg-strong: rgba(92, 90, 181, 0.18); --badge-soft: rgba(92, 90, 181, 0.14); --data-color: #C6B0C9; /* 浅紫 · 数字（拉开层次） */ --emphasis: #5C5AB5; /* 蓝紫 · 强调 */ /* 装饰色（v4） */ --halo-bg: rgba(92, 90, 181, 0.10); --halo-border: rgba(92, 90, 181, 0.18); --tag-bg: rgba(155, 103, 159, 0.14); /* 5 个彩色文字 token（v1 统一） */ --c-emphasis: #5C5AB5; /* 段落内联高亮 */ --c-cta: #5C5AB5; /* CTA 文字 */ --c-link: #C28BC4; /* 普通链接（中紫） */ --c-data: #C6B0C9; /* 数字强调 */ } /* =========================== 浅色版本 重点：在浅 hero 蒙版 + 玻璃背景上，主色/强调色全部加深一档， 确保对比度 ≥ AA（4.5:1），文字在浅底上不再"看不见" =========================== */ [data-theme="light"] { /* 主色：在白底 + 浅 hero 蒙版上对比度足够（vs #FFFFFF ~5.5:1，AA 通过） */ --primary: #006B85; /* 由 #0091B3 加深一档 */ --primary-dark: #004F65; --primary-hover: #0085A0; --primary-on: #FFFFFF; --primary-glow: rgba(0, 107, 133, 0.16); /* 浅色版专用软底/软边（用于 layer 标签、card 浅底、metric-card 等） */ --primary-soft: rgba(0, 107, 133, 0.08); --primary-soft-border: var(--border-hover); /* 强调色（紫）：浅底加深，避免飘 */ --accent: #4F2BD0; /* 由 #6342E0 加深到 #4F2BD0 */ --accent-soft: rgba(79, 43, 208, 0.08); --accent-soft-border: var(--border-hover); /* 强调色（薄荷绿）：浅底加深 */ --accent2: #00875E; /* 由 #00B47A 加深到 #00875E */ --accent2-soft: rgba(0, 135, 94, 0.08); --accent2-soft-border: var(--border-hover); /* 琥珀色：浅底加深 */ --warn: #A66E00; /* 由 #C68500 加深到 #A66E00 */ --warn-soft: rgba(166, 110, 0, 0.08); --warn-soft-border: var(--border-hover); --danger: #C7342F; /* 背景层级（浅色版） */ --bg: #F5F7FA; --bg-elev: #FFFFFF; --bg-elev-2: #EEF2F7; --bg-overlay: rgba(255, 255, 255, 0.92); /* 文字：secondary/muted 调深一档，让 hero 副标题、stat-label 更清晰 */ --text: #0F172A; --text-secondary: #334155; /* 由 #475569 加深到 #334155（vs 浅底 ~10:1） */ --text-muted: #475569; /* 由 #64748B 加深到 #475569 */ --text-on-primary: #FFFFFF; --text-on-accent2: #FFFFFF; /* 边框 / 表面 */ --border: rgba(15, 23, 42, 0.08); --border-strong: rgba(15, 23, 42, 0.16); --border-hover: rgba(15, 23, 42, 0.12); --border-active: rgba(15, 23, 42, 0.15); --card-bg: rgba(15, 23, 42, 0.03); --card-border: rgba(15, 23, 42, 0.08); --card-hover: rgba(15, 23, 42, 0.045); /* 输入框（浅色版：白底 + 浅灰边框） */ --input-bg: #FFFFFF; --input-bg-focus: #FFFFFF; --input-border-focus: rgba(0, 107, 133, 0.28); /* Hero 蒙版（浅色版本使用独立浅色头图， 用更浅的蒙版让标题更清晰） */ --hero-mask-1: rgba(245, 247, 250, 0.86); --hero-mask-2: rgba(245, 247, 250, 0.62); --hero-mask-3: rgba(245, 247, 250, 0.32); --hero-mask-4: rgba(245, 247, 250, 0.08); --hero-mask-5: rgba(245, 247, 250, 0); --hero-mask-bottom: rgba(245, 247, 250, 0.92); /* 微网格背景线 */ --grid-line: rgba(0, 107, 133, 0.05); --grid-line-2: rgba(0, 107, 133, 0.04); /* 阴影（浅色版阴影更轻更冷） */ --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12); --shadow-glow: 0 8px 20px rgba(15, 23, 42, 0.10); /* 浅色版不需要青色发光装饰（会让浅底文字变模糊） */ --decorative-glow: transparent; /* 代码窗体浅色化（v2.9+ · 跟随浅色卡片融合） */ --code-bg: #F8FAFC; --code-header: #EEF2F7; --code-title: #64748B; --code-default: #1E293B; --code-import: #7C3AED; --code-fn: #0F766E; --code-str: #B45309; --code-comment: #94A3B8; --code-num: #1D4ED8; --code-window-border: rgba(15, 23, 42, 0.08); --code-window-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); /* 主题过渡 */ color-scheme: light; } /* =========================== 浅色版的痛点分类色覆盖（v2.5） 痛点分类色是「语义色」而非品牌色，跟随主题切换（深/浅）， 不跟色系方案（warm/cool/luxe/violet）走。 浅底全部加深一档保 AA 对比度（实测 ≥ 4.9:1） =========================== */ [data-theme="light"] { --cat-color-1: #B45309; /* 1 采买之乱 · 橙深 */ --cat-color-2: #4F46E5; /* 2 选择之难 · 蓝紫深 */ --cat-color-3: #BE185D; /* 3 消耗之痛 · 玫红深 */ --cat-color-4: #B91C1C; /* 4 安全之患 · 砖红 */ --cat-color-5: #A16207; /* 5 质量之殇 · 黄褐深 */ --cat-color-6: #047857; /* 6 沉淀之殇 · 翠绿深 */ --cat-color-7: #1D4ED8; /* 7 体验之缺 · 蓝深 */ --cat-soft-1: rgba(180, 83, 9, 0.10); --cat-soft-2: rgba(79, 70, 229, 0.10); --cat-soft-3: rgba(190, 24, 93, 0.10); --cat-soft-4: rgba(185, 28, 28, 0.10); --cat-soft-5: rgba(161, 98, 7, 0.10); --cat-soft-6: rgba(4, 120, 87, 0.10); --cat-soft-7: rgba(29, 78, 216, 0.10); --cat-border-1: rgba(180, 83, 9, 0.28); --cat-border-2: rgba(79, 70, 229, 0.28); --cat-border-3: rgba(190, 24, 93, 0.28); --cat-border-4: rgba(185, 28, 28, 0.28); --cat-border-5: rgba(161, 98, 7, 0.28); --cat-border-6: rgba(4, 120, 87, 0.28); --cat-border-7: rgba(29, 78, 216, 0.28); } /* =========================== 浅色版的 4 套色系变体 选择器组合 [data-theme="light"][data-color-scheme="..."] =========================== */ /* 浅色 + warm（暖橘 · 蓝绿） :not(...) 兜底 JS 未加载场景（选择器并列，token 唯一源避免漂移） */ [data-theme="light"]:not([data-color-scheme]), [data-theme="light"][data-color-scheme="warm"] { --cta: #B85A2E; /* 暖橘加深（白底实测通过 AA） */ --cta-hover: #973207; /* 砖红 hover */ --cta-on: #FFFFFF; --cta-soft: rgba(184, 90, 46, 0.10); --cta-soft-border: rgba(184, 90, 46, 0.28); --cta-glow: rgba(184, 90, 46, 0.22); --link-2: #1F6B82; /* 蓝绿加深 */ --link-2-hover: #2D8CA5; --link-2-soft: rgba(31, 107, 130, 0.10); --link-2-soft-border: rgba(31, 107, 130, 0.24); /* 装饰 / 渐变文字 / 边框（方案 A 扩展） */ --accent-text: #B85A2E; /* 浅底暖橘 · 渐变起色 */ --accent-text-2: #973207; /* 浅底砖红 · 渐变止色 */ --accent-border: #B85A2E; /* 浅底暖橘 · 边框 */ /* 完整色系方案 v3 · 6 个新增 token（浅底版全部加深一档保对比度） */ --icon-primary: #B85A2E; /* 浅底暖橘 · 图标 */ --accent-bg: rgba(184, 90, 46, 0.08); --accent-bg-strong: rgba(184, 90, 46, 0.16); --badge-soft: rgba(184, 90, 46, 0.10); --data-color: #A04A1E; /* 浅底暖橘深 · 数字 (5.8:1 AA on white) */ --emphasis: #B85A2E; /* 浅底暖橘 · 强调 */ /* 装饰色（v4 · 浅底版加深透明度避免过深） */ --halo-bg: rgba(184, 90, 46, 0.06); --halo-border: rgba(184, 90, 46, 0.14); --tag-bg: rgba(184, 90, 46, 0.10); /* 5 个彩色文字 token（v1 统一：浅底版全部加深一档保对比度） */ --c-emphasis: #B85A2E; /* 段落内联高亮 */ --c-cta: #B85A2E; /* CTA 文字 */ --c-link: #1F6B82; /* 普通链接（蓝绿加深） */ --c-data: #A04A1E; /* 数字强调 */ } /* 浅色 + cool（蓝紫 · 科技） */ [data-theme="light"][data-color-scheme="cool"] { --cta: #4F3FA8; /* 蓝紫加深（白底实测通过 AAA） */ --cta-hover: #5C5AB5; --cta-on: #FFFFFF; --cta-soft: rgba(79, 63, 168, 0.10); --cta-soft-border: rgba(79, 63, 168, 0.24); --cta-glow: rgba(79, 63, 168, 0.22); --link-2: #1F6B82; /* 蓝绿 */ --link-2-hover: #2D8CA5; --link-2-soft: rgba(31, 107, 130, 0.10); --link-2-soft-border: rgba(31, 107, 130, 0.24); /* 装饰 / 渐变文字 / 边框（方案 A 扩展） */ --accent-text: #1F6B82; /* 浅底蓝绿 · 渐变起色 */ --accent-text-2: #4F3FA8; /* 浅底蓝紫 · 渐变止色 */ --accent-border: #1F6B82; /* 浅底蓝绿 · 边框 */ /* 完整色系方案 v3 · 6 个新增 token */ --icon-primary: #4F3FA8; /* 浅底蓝紫 · 图标 */ --accent-bg: rgba(79, 63, 168, 0.08); --accent-bg-strong: rgba(79, 63, 168, 0.16); --badge-soft: rgba(79, 63, 168, 0.10); --data-color: #1F6B82; /* 浅底蓝绿 · 数字 */ --emphasis: #4F3FA8; /* 浅底蓝紫 · 强调 */ /* 装饰色（v4） */ --halo-bg: rgba(79, 63, 168, 0.06); --halo-border: rgba(79, 63, 168, 0.14); --tag-bg: rgba(79, 63, 168, 0.10); /* 5 个彩色文字 token（v1 统一） */ --c-emphasis: #4F3FA8; /* 段落内联高亮 */ --c-cta: #4F3FA8; /* CTA 文字 */ --c-link: #1F6B82; /* 普通链接（蓝绿） */ --c-data: #1F6B82; /* 数字强调 */ } /* 浅色 + luxe（金黄 · 砖红） */ [data-theme="light"][data-color-scheme="luxe"] { --cta: #A66E00; /* 金黄加深（白底实测通过 AA） */ --cta-hover: #813028; /* 砖红 hover */ --cta-on: #FFFFFF; --cta-soft: rgba(166, 110, 0, 0.10); --cta-soft-border: rgba(166, 110, 0, 0.28); --cta-glow: rgba(166, 110, 0, 0.22); --link-2: #6B2418; /* 砖红加深 */ --link-2-hover: #813028; --link-2-soft: rgba(107, 36, 24, 0.10); --link-2-soft-border: rgba(107, 36, 24, 0.24); /* 装饰 / 渐变文字 / 边框（方案 A 扩展） */ --accent-text: #A66E00; /* 浅底金黄 · 渐变起色 */ --accent-text-2: #813028; /* 浅底砖红 · 渐变止色 */ --accent-border: #A66E00; /* 浅底金黄 · 边框 */ /* 完整色系方案 v3 · 6 个新增 token */ --icon-primary: #A66E00; /* 浅底金黄 · 图标 */ --accent-bg: rgba(166, 110, 0, 0.08); --accent-bg-strong: rgba(166, 110, 0, 0.16); --badge-soft: rgba(166, 110, 0, 0.10); --data-color: #A66E00; /* 浅底金黄 · 数字 */ --emphasis: #A66E00; /* 浅底金黄 · 强调 */ /* 装饰色（v4） */ --halo-bg: rgba(166, 110, 0, 0.06); --halo-border: rgba(166, 110, 0, 0.14); --tag-bg: rgba(166, 110, 0, 0.10); /* 5 个彩色文字 token（v1 统一） */ --c-emphasis: #A66E00; /* 段落内联高亮 */ --c-cta: #A66E00; /* CTA 文字 */ --c-link: #6B2418; /* 普通链接（砖红加深） */ --c-data: #A66E00; /* 数字强调 */ } /* 浅色 + violet（紫色家族） */ [data-theme="light"][data-color-scheme="violet"] { --cta: #51448F; /* 深紫蓝（白底实测通过 AAA） */ --cta-hover: #5C5AB5; --cta-on: #FFFFFF; --cta-soft: rgba(81, 68, 143, 0.10); --cta-soft-border: rgba(81, 68, 143, 0.24); --cta-glow: rgba(81, 68, 143, 0.22); --link-2: #5F3154; /* 暗紫红 */ --link-2-hover: #9B679F; --link-2-soft: rgba(95, 49, 84, 0.10); --link-2-soft-border: rgba(95, 49, 84, 0.24); /* 装饰 / 渐变文字 / 边框（方案 A 扩展） */ --accent-text: #5F3154; /* 浅底暗紫 · 渐变起色 */ --accent-text-2: #9B679F; /* 浅底中紫 · 渐变止色 */ --accent-border: #51448F; /* 浅底深紫蓝 · 边框 */ /* 完整色系方案 v3 · 6 个新增 token */ --icon-primary: #51448F; /* 浅底深紫蓝 · 图标 */ --accent-bg: rgba(81, 68, 143, 0.08); --accent-bg-strong: rgba(81, 68, 143, 0.16); --badge-soft: rgba(81, 68, 143, 0.10); --data-color: #5F3154; /* 浅底暗紫 · 数字 */ --emphasis: #51448F; /* 浅底深紫蓝 · 强调 */ /* 装饰色（v4） */ --halo-bg: rgba(81, 68, 143, 0.06); --halo-border: rgba(81, 68, 143, 0.14); --tag-bg: rgba(155, 103, 159, 0.10); /* 5 个彩色文字 token（v1 统一） */ --c-emphasis: #51448F; /* 段落内联高亮 */ --c-cta: #51448F; /* CTA 文字 */ --c-link: #5F3154; /* 普通链接（暗紫红） */ --c-data: #5F3154; /* 数字强调 */ } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: var(--fs-body); } /* v1 移动基线 16px（由 15 上调） */ /* 桌面基线上调到 17px（原 16px），照顾 50+ 决策者 */ @media (min-width: 768px) { html { font-size: var(--fs-body-lg); } } /* 文字选中态：跟随色系 CTA 色，luxe 因金黄本身亮度高需要更高混合比 */ ::selection { background: color-mix(in srgb, var(--cta) 35%, transparent); color: inherit; text-shadow: none; } ::-moz-selection { background: color-mix(in srgb, var(--cta) 35%, transparent); color: inherit; text-shadow: none; } [data-color-scheme="luxe"] ::selection, [data-color-scheme="luxe"] ::-moz-selection { background: color-mix(in srgb, var(--cta) 55%, transparent); } [data-theme="light"] ::selection, [data-theme="light"] ::-moz-selection { background: color-mix(in srgb, var(--cta) 22%, transparent); color: var(--text); } /* 移动端基线缩放：1rem 从 17px → 16px → 15px，避免 360px 屏长行溢出 */ @media (max-width: 480px) { html { font-size: var(--fs-body); } /* 原 14px → 15px，避免 50+ 用户阅读困难 */ } @media (max-width: 360px) { html { font-size: var(--fs-small); } /* 极窄屏兜底 */ } /* Skip link - 键盘可达性 */ .skip-link { position: absolute; top: -100px; left: 16px; background: var(--primary); color: var(--text-on-primary); padding: 12px 20px; z-index: 9999; font-weight: 600; border-radius: 0 0 8px 8px; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 0; } body { font-family: var(--font-sans); background-color: var(--dark-bg); color: var(--text-primary); line-height: var(--lh-base); /* v1: 1.6 → 1.7（基线 17px 后语义更易扫读） */ overflow-x: hidden; position: relative; } /* 全站微网格背景 — 让"留白"区域有质感而非纯黑 */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line-2) 1px, transparent 1px); background-size: 100px 100px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, black 0%, transparent 75%); mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, black 0%, transparent 75%); opacity: 0.9; } /* 全站层叠：内容提升到网格之上 */ main, header, footer, .back-to-top, .mobile-menu, .mobile-overlay { position: relative; z-index: 1; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* =========================== 导航栏 ========================== */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); background: var(--bg-overlay); backdrop-filter: blur(20px); border-bottom-color: var(--card-border); box-shadow: var(--shadow-md); transition: background 0.3s, box-shadow 0.3s, border-color 0.3s; } /* at-top 状态：滚动距离 ≤ 60 时透明（由 JS 添加）*/ .navbar.at-top { background: transparent; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; justify-content: space-between; position: relative; /* mega dropdown 的 offsetParent，让 nav.js 动态 left 精确对齐 logo */ } .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; white-space: nowrap; } .logo-img { width: 44px; height: 44px; object-fit: contain; object-position: center; border-radius: 6px; filter: saturate(1.15) contrast(1.05); } .logo-text { font-size: var(--fs-h3); font-weight: 700; color: var(--text-primary); letter-spacing: 0.02em; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-item { padding: 8px 14px; font-size: var(--fs-small); color: var(--text-secondary); background: transparent; /* 覆盖