/* ============================================================================= theme.css — 配色主题系统（THEME SYSTEM） ----------------------------------------------------------------------------- 本文件只做一件事：定义颜色变量。所有组件颜色都必须从下面这些变量取值，不要在 style.css 里写死颜色。切换主题的方式（任选其一）： 1. 手动改 HTML： ← 生产环境推荐 2. 页面右下角主题切换器（开发用，由 SITE_CONFIG.enableThemeSwitcher 控制是否显示）已有 5 套主题： theme-navy Deep Navy + Gold 深海军蓝 + 金 theme-blue International Business Blue 国际商务蓝 theme-luxury Black + Ivory + Gold 黑 + 象牙白 + 金 theme-green Dark Green + Beige 深墨绿 + 米色 theme-minimal Minimal Black & White 极简黑白 ===== USER CONFIGURATION ===== 如果你要改品牌色，只改下面 :root 与 .theme-* 里的 --brand / --accent 即可，其余派生色（hover、soft、on-accent）请同步微调。 ============================================================================= */ /* ============================================================================= THEME CONFIGURATION ① 全局非颜色令牌（排版 / 间距 / 圆角）—— 所有主题共用 ② :root 内同时给出「主题 01 Deep Navy + Gold」作为默认值 ============================================================================= */ :root { /* ---------- 字体 ---------- */ --font-display: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif; /* ---------- 布局 ---------- */ --container: 1240px; /* 内容最大宽度 */ --gutter: 24px; /* 左右安全边距 */ --radius: 2px; /* 只用极小圆角，保持 B2B 的克制感 */ --radius-lg: 4px; --header-h: 76px; /* 顶部导航高度（JS 会读它做锚点偏移） */ --section-y: 104px; /* 区块上下留白 */ /* ---------- 动效 ---------- */ --ease: cubic-bezier(.22, .61, .36, 1); --dur: .28s; /* ========================================================================= 主题 01 —— Deep Navy + Gold（默认） ========================================================================= */ --bg: #FFFFFF; /* 页面底色 */ --bg-alt: #F4F6F9; /* 交替区块底色 */ --surface: #FFFFFF; /* 卡片底色 */ --surface-2: #F7F8FA; /* 次级卡片 / 输入框底色 */ --text: #16202E; /* 正文 */ --text-2: #5B6774; /* 次要文字 */ --text-3: #8B95A1; /* 极弱文字 / 占位符 */ --heading: #0B1626; /* 标题 */ --border: #E2E7ED; /* 常规描边 */ --border-strong: #CBD3DC; /* 强描边 */ --brand: #0B1E3A; /* 品牌主色（深色区块 / 图标） */ --brand-soft: rgba(11, 30, 58, .06); --on-brand: #FFFFFF; --accent: #C09A45; /* 强调色 / 最重要的 CTA */ --accent-hover: #A9822F; --on-accent: #101418; /* 强调色上的文字颜色 */ --hero-bg: #08172C; /* 深色区块背景（Hero / 制造 / CTA / Footer） */ --hero-bg-2: #0C2340; --hero-text: #FFFFFF; --hero-muted: rgba(255, 255, 255, .70); --hero-border: rgba(255, 255, 255, .14); --hero-surface: rgba(255, 255, 255, .05); --header-bg: rgba(255, 255, 255, .92); /* 滚动后导航底色 */ --focus: #C09A45; /* 键盘焦点环 */ --shadow-sm: 0 1px 2px rgba(12, 24, 40, .05); --shadow-md: 0 12px 32px rgba(12, 24, 40, .08); --shadow-lg: 0 24px 64px rgba(12, 24, 40, .16); --overlay: rgba(6, 14, 26, .62); /* 弹窗遮罩 */ } /* ============================================================================= 主题 02 —— International Business Blue International Business Blue + 亮蓝 CTA ============================================================================= */ .theme-blue { --bg: #FFFFFF; --bg-alt: #F3F7FC; --surface: #FFFFFF; --surface-2: #F5F8FC; --text: #14202E; --text-2: #57657A; --text-3: #8894A6; --heading: #0A1E38; --border: #DFE7F1; --border-strong: #C6D4E6; --brand: #0C3D77; --brand-soft: rgba(12, 61, 119, .07); --on-brand: #FFFFFF; --accent: #1F6FE0; --accent-hover: #1A5CBC; --on-accent: #FFFFFF; --hero-bg: #0A2E5C; --hero-bg-2: #0C3D77; --hero-text: #FFFFFF; --hero-muted: rgba(255, 255, 255, .72); --hero-border: rgba(255, 255, 255, .16); --hero-surface: rgba(255, 255, 255, .06); --header-bg: rgba(255, 255, 255, .92); --focus: #1F6FE0; --shadow-sm: 0 1px 2px rgba(10, 40, 80, .05); --shadow-md: 0 12px 32px rgba(10, 40, 80, .09); --shadow-lg: 0 24px 64px rgba(10, 40, 80, .18); --overlay: rgba(8, 26, 48, .62); } /* ============================================================================= 主题 03 —— Black + Ivory + Gold 黑 + 象牙白 + 金，偏高端/奢侈品供应商气质 ============================================================================= */ .theme-luxury { --bg: #FAF7F1; --bg-alt: #F2EDE3; --surface: #FFFDF9; --surface-2: #F5F1E8; --text: #1C1A17; --text-2: #6B655C; --text-3: #948C80; --heading: #121110; --border: #E3DBCC; --border-strong: #CFC4AF; --brand: #121110; --brand-soft: rgba(18, 17, 16, .06); --on-brand: #F7F3EA; --accent: #B08B34; --accent-hover: #96742A; --on-accent: #14120F; --hero-bg: #0E0D0C; --hero-bg-2: #17150F; --hero-text: #F7F3EA; --hero-muted: rgba(247, 243, 234, .68); --hero-border: rgba(247, 243, 234, .16); --hero-surface: rgba(247, 243, 234, .05); --header-bg: rgba(250, 247, 241, .93); --focus: #B08B34; --shadow-sm: 0 1px 2px rgba(30, 24, 12, .06); --shadow-md: 0 12px 32px rgba(30, 24, 12, .10); --shadow-lg: 0 24px 64px rgba(30, 24, 12, .20); --overlay: rgba(14, 13, 12, .66); } /* ============================================================================= 主题 04 —— Dark Green + Beige 深墨绿 + 米色，适合家具/家居/包装/农产类制造 ============================================================================= */ .theme-green { --bg: #F7F2E8; --bg-alt: #EFE8DA; --surface: #FFFCF6; --surface-2: #F3EDE1; --text: #17251E; --text-2: #5E6B60; --text-3: #8A9689; --heading: #102019; --border: #E0D8C7; --border-strong: #C9BFA9; --brand: #16372A; --brand-soft: rgba(22, 55, 42, .07); --on-brand: #F6F1E5; --accent: #C08A3E; --accent-hover: #A2712D; --on-accent: #17130A; --hero-bg: #102A20; --hero-bg-2: #16372A; --hero-text: #F6F1E5; --hero-muted: rgba(246, 241, 229, .70); --hero-border: rgba(246, 241, 229, .16); --hero-surface: rgba(246, 241, 229, .06); --header-bg: rgba(247, 242, 232, .93); --focus: #C08A3E; --shadow-sm: 0 1px 2px rgba(16, 40, 30, .06); --shadow-md: 0 12px 32px rgba(16, 40, 30, .09); --shadow-lg: 0 24px 64px rgba(16, 40, 30, .18); --overlay: rgba(10, 26, 19, .64); } /* ============================================================================= 主题 05 —— Minimal Black & White 极简黑白，黑即强调色 ============================================================================= */ .theme-minimal { --bg: #FFFFFF; --bg-alt: #F4F4F4; --surface: #FFFFFF; --surface-2: #F6F6F6; --text: #101010; --text-2: #5C5C5C; --text-3: #8C8C8C; --heading: #000000; --border: #E5E5E5; --border-strong: #CCCCCC; --brand: #111111; --brand-soft: rgba(17, 17, 17, .06); --on-brand: #FFFFFF; --accent: #111111; --accent-hover: #000000; --on-accent: #FFFFFF; --hero-bg: #0C0C0C; --hero-bg-2: #181818; --hero-text: #FFFFFF; --hero-muted: rgba(255, 255, 255, .66); --hero-border: rgba(255, 255, 255, .16); --hero-surface: rgba(255, 255, 255, .05); --header-bg: rgba(255, 255, 255, .94); --focus: #111111; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05); --shadow-md: 0 12px 32px rgba(0, 0, 0, .07); --shadow-lg: 0 24px 64px rgba(0, 0, 0, .14); --overlay: rgba(0, 0, 0, .62); } /* ============================================================================= 基础全局样式（与主题相关的部分） ============================================================================= */ html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } /* 选中文字 */ ::selection { background: var(--accent); color: var(--on-accent); } /* 键盘焦点环（无障碍：只对键盘用户可见） */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } /* 滚动条（现代浏览器） */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-alt); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 0; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* 尊重系统「减少动态效果」设置 */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }