/* ============================================ 主题：声场（Acoustic Field）— 首套新主题 ============================================ 「剧场暗场蓝 × 钨丝灯琥珀」（主题系统设计规划 §3.2） 把站点从「展示音箱的公司」变成「掌控声与光的空间工程队」。 与极简的主题性格差异： - 渐变降级为纯色/深色微渐变（渐变是极简的个性，不是本主题的） - 中文衬线大标题 + 微字距（刊物质感） - 收敛圆角（8px/4px 工程感） - 快而稳的动效曲线 - 装饰语言：频率刻度尺 + VU 电平表（--decor-* 开关） 规则：本文件只含变量赋值与装饰类显隐，禁止组件规则（验收 grep 检查）。 ============================================ */ :root[data-theme="acoustic"] { /* ── 色彩 ── */ --color-bg-page: #FAFAF8; /* 暖白纸感，衬托工程摄影暖光 */ --color-bg-surface: #FFFFFF; --color-bg-inset: #F3F1EC; /* 暖灰凹陷区 */ --color-bg-hover: #F5F3EE; --color-bg-nav: rgba(250, 250, 248, 0.9); /* 暖白玻璃导航 */ --color-bg-nav-scrolled: rgba(250, 250, 248, 0.96); --color-bg-nav-mobile: rgba(250, 250, 248, 0.98); --color-bg-hero: #EDEAE3; /* 图片未加载时的暖调兜底 */ --color-primary: #1B2A4A; /* 深夜蓝——剧场暗场 */ --color-primary-light: #2E4470; --color-accent: #E8A33D; /* 钨丝灯琥珀（~3200K），全站唯一亮色 */ --color-secondary: #2E4470; /* 渐变中段并入深夜蓝系 */ --color-on-primary: #F5F0E8; /* 深夜蓝上的暖白 */ --color-on-accent: #1B2A4A; /* 琥珀上的深夜蓝（对比度优于白字） */ --color-text: #232323; /* 中性近黑（不带紫调） */ --color-text-secondary: #5A5750; /* 暖灰次级 */ --color-text-muted: #9B968C; --color-text-neutral: #5A5750; --color-text-strong: #3D3A34; --color-text-nav: #4A4740; --color-border: #E5E1D8; /* 暖调分隔线 */ --color-border-light: #EDEAE2; --color-border-strong: #C9C4B8; --color-border-crumb: #C9C4B8; --color-link: var(--color-primary); --color-link-hover: var(--color-accent); /* 链接悬停点亮琥珀 */ --color-selection: rgba(232, 163, 61, 0.25); /* 琥珀选中底 */ /* 功能色（2026-09-20 收编自模板内联样式）：警示红调暖，与剧场暖调协调 */ --color-danger: #D9544A; --color-on-danger: #FFFFFF; --color-chip-bg: rgba(27, 42, 74, 0.06); /* 分站链接胶囊底：并入深夜蓝系 */ --color-scrim: rgba(27, 42, 74, 0.6); /* 深夜蓝系遮罩（替代黑系） */ --color-scrim-search: rgba(18, 28, 50, 0.92); --color-scrim-strong: rgba(18, 28, 50, 0.75); /* 提示气泡：深夜蓝系浓罩 */ --color-bg-dark: #141E33; /* 暗面板：更深的剧场暗场 */ --color-on-dark-link: #E8A33D; /* 暗面板上的琥珀高亮 */ --color-on-dark-heading: #F5F0E8; --color-on-dark-body: #C9C4B8; /* 暗面板正文：暖灰 */ --color-on-dark-dim: #2A3550; --color-bg-menu-hover: #F3F1EC; /* ── 渐变（渐变浓度降级：纯色或同系微渐变） ── */ /* 装饰短线：深夜蓝系微渐变（原为蓝紫亮渐变） */ --gradient-accent: linear-gradient(135deg, #1B2A4A, #2E4470); /* 主按钮：不再渐变，纯琥珀。linear-gradient 同色值 = 视觉纯色，组件层无需分支 */ --gradient-btn: linear-gradient(135deg, #E8A33D, #E8A33D); /* CTA 大区块：深夜蓝纯色微渐变 */ --gradient-cta: linear-gradient(135deg, #1B2A4A, #223354); /* hero 遮罩：左浓右透，配合 hero 左文右图 */ --gradient-scrim-hero: linear-gradient(90deg, rgba(27, 42, 74, 0.88) 0%, rgba(27, 42, 74, 0.45) 45%, rgba(27, 42, 74, 0.08) 75%); /* 页面 banner 遮罩：纵向压暗，保文字可读 */ --gradient-scrim-banner: linear-gradient(180deg, rgba(27, 42, 74, 0.35), rgba(27, 42, 74, 0.82)); /* 产品参数卡底：暖纸微渐变 */ --gradient-inset-card: linear-gradient(135deg, #FAF8F3 0%, #F1EEE6 100%); /* hero 光晕：琥珀极淡（原蓝系光晕） */ --gradient-hero-glow: radial-gradient(circle, rgba(232, 163, 61, 0.08) 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, #141E33, #1F2C45); /* 深色卡片：并入剧场暗场 */ /* ── 主色系 tint / 描边 / 光环 / 阴影（深夜蓝系透明度变体，对位极简的 #3573C5 系） ── */ --color-primary-tint-1: rgba(27, 42, 74, 0.04); --color-primary-tint-2: rgba(27, 42, 74, 0.06); --color-primary-tint-3: rgba(27, 42, 74, 0.08); --color-primary-tint-4: rgba(27, 42, 74, 0.15); --color-primary-line-soft: rgba(27, 42, 74, 0.10); --color-primary-line-medium: rgba(27, 42, 74, 0.16); --color-primary-line-strong: rgba(27, 42, 74, 0.38); --color-primary-ring-soft: rgba(27, 42, 74, 0.12); --color-primary-ring-strong: rgba(27, 42, 74, 0.22); --shadow-primary-strong: rgba(27, 42, 74, 0.40); --shadow-primary-medium: rgba(27, 42, 74, 0.25); --shadow-primary-soft: rgba(27, 42, 74, 0.07); /* ── 白色系结构色（与极简共用同构，白系不随主题变） ── */ --color-bg-param-row: rgba(255, 255, 255, 0.72); --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.92); --color-on-scrim-medium: rgba(255, 255, 255, 0.85); --color-on-scrim-secondary: rgba(255, 255, 255, 0.78); --color-on-dark-line: rgba(255, 255, 255, 0.08); --color-on-dark-btn-border: rgba(255, 255, 255, 0.24); --color-on-dark-btn-hover: rgba(255, 255, 255, 0.07); /* ── 发丝线 / 中性阴影（黑白系结构性，全主题通用，此处显式重申暖调适配） ── */ --color-hairline: rgba(20, 20, 18, 0.07); --color-scrollbar-thumb: #CFC9BC; --shadow-nav-scrolled: 0 2px 12px rgba(20, 20, 18, 0.07); --shadow-dropdown: 0 10px 40px rgba(27, 42, 74, 0.16); --shadow-cta-btn: 0 8px 30px rgba(20, 20, 18, 0.24); /* ── 图片卡遮罩渐变（深夜蓝系替代黑系） ── */ --gradient-scrim-card: linear-gradient(180deg, rgba(27, 42, 74, 0.12) 0%, rgba(27, 42, 74, 0.62) 100%); --gradient-scrim-card-hover: linear-gradient(180deg, rgba(27, 42, 74, 0.06) 0%, rgba(27, 42, 74, 0.52) 100%); /* ── 装饰渐变（404 电平表）：深夜蓝→琥珀，本主题的信号色 */ --gradient-decor: linear-gradient(135deg, #1B2A4A, #2E4470 55%, #E8A33D); /* ── hero 文字（遮罩是深夜蓝浓罩 → 文字用暖白系）── */ --color-hero-heading: #F5F0E8; --color-hero-subtitle: #E8A33D; --color-hero-desc: rgba(245, 240, 232, 0.82); --color-hero-outline: #F5F0E8; --color-hero-outline-border: rgba(245, 240, 232, 0.45); --color-hero-outline-hover: #E8A33D; --color-hero-outline-hover-bg: rgba(232, 163, 61, 0.12); /* ── 字体排印 ── */ /* 中文衬线标题，刊物质感。首版系统衬线栈兜底（webfont 体积评估后再引入，见规划 §2.6） */ --font-display: "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", serif; --font-body: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif; --tracking-display: 0.04em; /* 中文衬线大标题微加字距 */ --leading-display: 1.3; /* 衬线标题行高略松于黑体 */ /* ── 形状（收敛圆角，工程感） ── */ --radius-card: 8px; --radius-btn: 4px; --radius-input: 4px; --radius-pill: 4px; /* 胶囊也收敛：工程感优先于亲和 */ --radius-dropdown: var(--radius-card); --radius-overlay-input: var(--radius-card); /* ── 动效（快而稳的工程感） ── */ --motion-ease: cubic-bezier(0.2, 0, 0.2, 1); --motion-ease-out: cubic-bezier(0.2, 0, 0.2, 1); --motion-duration: 0.25s; /* ── 装饰类开关：双装饰全开 ── */ --decor-freq-scale: 1; /* 频率刻度尺：1/3 倍频程 */ --decor-vu-meter: 1; /* 统计带 VU 电平表填充 */ } /* ============================================ 装饰类样式（规划 §2.5：结构在模板，显隐与样式在主题） 组件层永不引用这些类名；新增装饰类须在所有主题文件中显式声明显隐。 ============================================ */ /* ── 频率刻度尺：31.5 ~ 16k（1/3 倍频程中心频率） ── section 间隔装饰：刻度数字 + 细线，置于 .section-header 的标题渐变短线旁 */ :root[data-theme="acoustic"] .decor-freq-scale { display: flex; align-items: baseline; justify-content: center; gap: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--color-text-muted); user-select: none; } :root[data-theme="acoustic"] .decor-freq-scale::before, :root[data-theme="acoustic"] .decor-freq-scale::after { content: ''; flex: 1 1 40px; height: 1px; background: var(--color-border); } /* ── VU 电平表填充：统计数字带底部的电平条 ── 结构（模板）：.stat-vu 内 7 根 ，由主题决定是否点亮 */ :root[data-theme="acoustic"] .stat-vu { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 14px; margin-top: 10px; } :root[data-theme="acoustic"] .stat-vu i { width: 3px; border-radius: 1px 1px 0 0; background: var(--gradient-decor); opacity: 0.85; } /* 静态电平序列：中间高两侧低，读作一段被定格的信号 */ :root[data-theme="acoustic"] .stat-vu i:nth-child(1) { height: 30%; } :root[data-theme="acoustic"] .stat-vu i:nth-child(2) { height: 48%; } :root[data-theme="acoustic"] .stat-vu i:nth-child(3) { height: 68%; } :root[data-theme="acoustic"] .stat-vu i:nth-child(4) { height: 100%; } :root[data-theme="acoustic"] .stat-vu i:nth-child(5) { height: 72%; } :root[data-theme="acoustic"] .stat-vu i:nth-child(6) { height: 50%; } :root[data-theme="acoustic"] .stat-vu i:nth-child(7) { height: 32%; }