/* ========================================================================== theme.css —— 唯一改色入口做第 2、3 个站时，原则上只改这个文件即可完成换肤。 ========================================================================== */ :root { /* ---------- 品牌色 ---------- */ --brand: #0a5cff; /* 主色：按客户 VI 改这一个，全站跟着变 */ --brand-2: #00d4a0; /* 辅色：用于渐变第二端、强调数字 */ --brand-deep: #052a73; /* 深色调：暗底大区块 */ /* ---------- 中性色 ---------- */ --ink: #0b0e14; /* 正文主色 / 暗底背景 */ --ink-2: #384150; /* 次级文字 */ --ink-3: #566173; /* 弱化文字（原 #7a8598 浅灰在白底仅 ~3.9:1，提到 ~5.8:1，过 WCAG AA 小字 4.5:1） */ --line: rgba(11, 14, 20, 0.10); --paper: #ffffff; --paper-2: #f5f7fa; /* 浅灰区块底 */ --paper-3: #eceff4; /* 暗色区块内的反色 */ --on-dark: #ffffff; --on-dark-2: rgba(255, 255, 255, 0.66); --on-dark-3: rgba(255, 255, 255, 0.52); --line-dark: rgba(255, 255, 255, 0.14); /* ---------- 字体 ---------- */ --font-sans: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: "Poppins", "Montserrat", "PingFang SC", "Microsoft YaHei", sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; /* ---------- 字号（clamp 自适应，无需媒体查询） ---------- */ --fs-hero: clamp(2.8rem, 7.4vw, 7.5rem); --fs-h1: clamp(2.1rem, 4.6vw, 4.2rem); --fs-h2: clamp(1.6rem, 3.0vw, 2.6rem); --fs-h3: clamp(1.15rem, 1.8vw, 1.5rem); --fs-lead: clamp(1rem, 1.35vw, 1.2rem); --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; --fs-num: clamp(2.6rem, 5.5vw, 5rem); /* ---------- 间距 ---------- */ --gap: clamp(16px, 2vw, 28px); --pad-x: clamp(20px, 5vw, 88px); /* 页面左右安全边 */ --sec-y: clamp(72px, 11vh, 168px); /* 区块上下留白 */ --maxw: 1560px; /* ---------- 形状 ---------- */ --r-sm: 8px; --r: 16px; --r-lg: 28px; --r-pill: 999px; /* ---------- 动效节奏（调这里可整体加快/放慢全站动画） ---------- */ --dur-fast: 0.35s; --dur: 0.7s; --dur-slow: 1.15s; --ease: cubic-bezier(0.22, 1, 0.36, 1); /* expo.out 手感 */ --ease-io: cubic-bezier(0.76, 0, 0.24, 1); /* 进出对称 */ /* ---------- 阴影 ---------- */ --sh-1: 0 2px 8px rgba(11, 14, 20, 0.05); --sh-2: 0 18px 48px -14px rgba(11, 14, 20, 0.18); --sh-brand: 0 18px 46px -12px color-mix(in srgb, var(--brand) 46%, transparent); /* ---------- 组合渐变 ---------- */ --grad-brand: linear-gradient(115deg, var(--brand) 0%, var(--brand-2) 100%); --grad-dark: linear-gradient(160deg, #0b0e14 0%, #111a2e 55%, #08111f 100%); --nav-h: 78px; } /* 备用皮肤示例：给加 class="skin-amber" 即整站换色，做第 2 个站时可直接照抄 ------------------------------------------------------------------------- */ body.skin-amber { --brand: #ff8a00; --brand-2: #ffc94d; --brand-deep: #6b3300; } body.skin-emerald { --brand: #00a37a; --brand-2: #8ce68c; --brand-deep: #04402f; }