/* ============================================ 令牌目录（第一层）— 主题系统设计规划 §2.2 ============================================ 这里定义全站组件层（site.css）可引用的全部语义令牌， 取「中性默认值」。真正的主题值由 themes/*.css 在 :root[data-theme=xxx] 下覆盖。 分层规则（验收用 grep 检查）： 1. site.css 组件层只允许写 var(--token)，禁止字面量色值/圆角； 允许的例外：结构性透明度（rgba 黑白系阴影、遮罩的透明度部分见令牌） 2. 主题文件只含变量赋值与装饰类显隐，禁止组件规则 3. 新增令牌必须同步补全所有主题文件，缺一项验收不过 本文件同时携带不随主题变化的原子：字体栈、滚动条、动效基准。 ============================================ */ /* Google Fonts：国内可达性一般，仅作渐进增强（失败时回退系统字体栈） */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@400;500;600;700&display=swap'); :root { /* ── 色彩（中性默认 = 极简主题值，防止主题文件缺失时裸奔） ── */ /* 页面底色 */ --color-bg-page: #F5F7FA; /* 卡片/浮层底色 */ --color-bg-surface: #FFFFFF; /* 凹陷区（滚动条槽、参数卡底等） */ --color-bg-inset: #F0F2F5; /* 悬停态底色 */ --color-bg-hover: #F8F9FB; /* 导航条底色（玻璃拟态） */ --color-bg-nav: rgba(255, 255, 255, 0.85); /* 导航滚动后底色（更实） */ --color-bg-nav-scrolled: rgba(255, 255, 255, 0.95); /* 移动端抽屉底色 */ --color-bg-nav-mobile: rgba(255, 255, 255, 0.98); /* hero 落地图底色（图片未加载时的兜底） */ --color-bg-hero: #E8EDF5; /* 品牌主色：链接、导航激活、eyebrow 小字 */ --color-primary: #3573C5; /* 主色亮变体（链接 hover、暗面板描边） */ --color-primary-light: #5A92D9; /* 全站唯一亮强调色：CTA、数据高亮（每主题只许一个） */ --color-accent: #A861BD; /* 按钮渐变的第二色（btn 渐变中段） */ --color-secondary: #646ACD; /* 主色上的文字 */ --color-on-primary: #FFFFFF; /* 强调色上的文字 */ --color-on-accent: #FFFFFF; /* 正文主色 */ --color-text: #1A1A2E; /* 次级文字 */ --color-text-secondary: #4A4A68; /* 辅助文字/占位符 */ --color-text-muted: #9CA3AF; /* 通用中性次级文字（表单、说明，旧 --text-secondary #6B7280 角色） */ --color-text-neutral: #6B7280; /* 深色输入区文字（表单 label、正文） */ --color-text-strong: #374151; /* 导航链接未激活 */ --color-text-nav: #4B5563; /* 分隔线/描边 */ --color-border: #E5E7EB; /* 更浅的分隔线（卡片内分区） */ --color-border-light: #F0F0F5; /* 描边按钮边框 */ --color-border-strong: #D0D5DD; /* 面包屑分隔符 */ --color-border-crumb: #D0D5DD; /* 链接 */ --color-link: var(--color-primary); --color-link-hover: var(--color-primary-light); /* 文字选中底色 */ --color-selection: rgba(53, 115, 197, 0.15); /* ── 功能色（2026-09-20 补：原先散落在模板内联样式里） ── */ /* 警示/必填星号/置顶徽章底 */ --color-danger: #EF4444; /* 警示底上的文字 */ --color-on-danger: #FFFFFF; /* 分站页链接胶囊的淡色底 */ --color-chip-bg: rgba(14, 159, 110, 0.08); /* 图片卡遮罩（黑系，solution-card 等） */ --color-scrim: rgba(0, 0, 0, 0.6); /* 搜索浮层整屏遮罩 */ --color-scrim-search: rgba(26, 26, 46, 0.9); /* 提示气泡遮罩（比 --color-scrim 更浓） */ --color-scrim-strong: rgba(0, 0, 0, 0.7); /* 暗面板（footer、404 面板） */ --color-bg-dark: #1A1A2E; /* 暗面板上的主色文字（footer 图标、链接 hover） */ --color-on-dark-link: #D0D5FF; /* 暗面板上的标题文字 */ --color-on-dark-heading: #F3F4F6; /* 暗面板上的正文（关于我们页深色卡片） */ --color-on-dark-body: #D1D5DB; /* 暗面板掉电平条（404 err-drop） */ --color-on-dark-dim: #3A3A52; /* 下拉/hover 菜单底（导航下拉项 hover） */ --color-bg-menu-hover: #F3F4F6; /* ── 渐变（四支语义令牌 + 装饰渐变） ── */ /* 装饰短线（hero-line/section-line）、导航激活下划线、logo 渐变文字、stat 渐变数字 */ --gradient-accent: linear-gradient(135deg, #3573C5, #A861BD); /* 主按钮 */ --gradient-btn: linear-gradient(135deg, #3573C5, #646ACD); /* CTA 大区块背景 */ --gradient-cta: linear-gradient(135deg, #3573C5, #646ACD, #A861BD); /* hero 遮罩（浅色雾面，左浓右淡） */ --gradient-scrim-hero: linear-gradient(135deg, rgba(232, 237, 245, 0.85) 0%, rgba(232, 237, 245, 0.4) 50%, rgba(232, 237, 245, 0.1) 100%); /* 页面 banner 遮罩（蓝紫浓罩） */ --gradient-scrim-banner: linear-gradient(135deg, rgba(53, 115, 197, 0.85), rgba(168, 97, 189, 0.75)); /* 产品参数卡底（极淡冷灰渐变） */ --gradient-inset-card: linear-gradient(135deg, #f8f9fc 0%, #f0f2f8 100%); /* hero 光晕（径向） */ --gradient-hero-glow: radial-gradient(circle, rgba(53, 115, 197, 0.06) 0%, transparent 70%); /* CTA 内高光（径向） */ --gradient-cta-glow: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%); /* 暗面板渐变（关于我们页「公司规模」「公司管理」深色卡片） */ --gradient-dark-panel: linear-gradient(135deg, #1A1A2E, #2D2D44); /* 主色系 tint / 描边 / 光环 / 阴影（#3573C5 系透明度变体） */ --color-primary-tint-1: rgba(53, 115, 197, 0.04); --color-primary-tint-2: rgba(53, 115, 197, 0.06); --color-primary-tint-3: rgba(53, 115, 197, 0.08); --color-primary-tint-4: rgba(53, 115, 197, 0.15); --color-primary-line-soft: rgba(53, 115, 197, 0.08); --color-primary-line-medium: rgba(53, 115, 197, 0.12); --color-primary-line-strong: rgba(53, 115, 197, 0.3); --color-primary-ring-soft: rgba(53, 115, 197, 0.1); --color-primary-ring-strong: rgba(53, 115, 197, 0.2); --shadow-primary-strong: rgba(53, 115, 197, 0.4); --shadow-primary-medium: rgba(53, 115, 197, 0.25); --shadow-primary-soft: rgba(53, 115, 197, 0.06); /* 白色系结构色（玻璃底 / 遮罩上的白 / 暗面板分隔） */ --color-bg-param-row: rgba(255, 255, 255, 0.7); --color-overlay-line: rgba(255, 255, 255, 0.2); --color-overlay-input: rgba(255, 255, 255, 0.1); --color-overlay-input-focus: rgba(255, 255, 255, 0.15); --color-overlay-close-hover: rgba(255, 255, 255, 0.2); --color-overlay-placeholder: rgba(255, 255, 255, 0.5); --color-on-scrim: rgba(255, 255, 255, 0.9); /* CTA 副文案等略暗的一档 */ --color-on-scrim-medium: rgba(255, 255, 255, 0.85); --color-on-scrim-secondary: rgba(255, 255, 255, 0.75); --color-on-dark-line: rgba(255, 255, 255, 0.08); /* 404 暗面板上的按钮描边/悬停底（原 err-panel 专值） */ --color-on-dark-btn-border: rgba(255, 255, 255, 0.22); --color-on-dark-btn-hover: rgba(255, 255, 255, 0.06); /* 发丝线 / 中性阴影（黑白系结构性，全主题通用） */ --color-hairline: rgba(0, 0, 0, 0.06); --color-scrollbar-thumb: #D0D0D8; --shadow-nav-scrolled: 0 2px 12px rgba(0, 0, 0, 0.06); --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.12); --shadow-cta-btn: 0 8px 30px rgba(0, 0, 0, 0.2); /* 图片卡遮罩渐变（黑系，solution-card） */ --gradient-scrim-card: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%); --gradient-scrim-card-hover: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.5) 100%); /* 装饰渐变（404 电平表等）：极简主题下同 CTA 三色渐变 */ --gradient-decor: linear-gradient(135deg, #3573C5, #646ACD, #A861BD); /* ── 字体排印 ── */ --font-display: 'Outfit', 'Montserrat', 'Noto Sans SC', sans-serif; --font-body: 'Inter', 'Roboto', 'Noto Sans SC', 'Microsoft YaHei', sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace; --tracking-display: 0; --leading-display: 1.2; /* ── 形状 ── */ /* 卡片大圆角 */ --radius-card: 12px; /* 按钮/输入框圆角 */ --radius-btn: 8px; --radius-input: 8px; /* 胶囊（tag/热词/404 出口链接） */ --radius-pill: 20px; /* 导航下拉圆角（现 12px） */ --radius-dropdown: var(--radius-card); /* 搜索输入/提交圆角（现 12px） */ --radius-overlay-input: var(--radius-card); /* ── 阴影三档 ── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1); /* ── 动效 ── */ --motion-ease: ease; --motion-ease-out: ease-out; --motion-duration: 0.3s; /* ── 兼容别名（过渡期） ── 15 个 Beetl 模板的内联样式仍引用改造前的老变量名。 这里统一映射到新语义令牌，模板零改动；后续清理模板后可删除本段。 注意：--bg-secondary 在改造前就未定义过（模板笔误），为保持行为一致同样不定义。 */ --primary: var(--color-primary); --primary-light: var(--color-primary-light); --accent: var(--color-accent); --secondary: var(--color-secondary); --gradient: var(--gradient-cta); --gradient-btn: var(--gradient-btn); --bg-page: var(--color-bg-page); --bg-white: var(--color-bg-surface); --bg-light: var(--color-bg-inset); --bg-hover: var(--color-bg-hover); --text-dark: var(--color-text); --text-body: var(--color-text-secondary); --text-secondary: var(--color-text-neutral); --text-muted: var(--color-text-muted); --border: var(--color-border); --border-light: var(--color-border-light); --radius: var(--radius-card); --radius-sm: var(--radius-btn); /* ── hero 文字（叠在 --gradient-scrim-hero 上）── 极简主题遮罩是浅雾面 → 文字用深色； 声场主题遮罩是深夜蓝浓罩 → 主题文件覆盖为暖白系。 */ --color-hero-heading: var(--color-text); --color-hero-subtitle: var(--color-primary); --color-hero-desc: var(--color-text-neutral); --color-hero-outline: var(--color-text); --color-hero-outline-border: var(--color-border-strong); --color-hero-outline-hover: var(--color-primary); --color-hero-outline-hover-bg: var(--color-primary-tint-1); /* ── 装饰类开关（0=隐藏 1=显示，主题文件覆盖） ── */ /* 频率刻度尺：31.5~16k 1/3 倍频程 */ --decor-freq-scale: 0; /* 统计带 VU 电平表填充 */ --decor-vu-meter: 0; }