/* ========================================================================== theme.css —— NOVA 暗色霓虹主题（唯一改色入口） -------------------------------------------------------------------------- 与 motion-kit / pxid-site 的差别： · 底色由「白」翻为「近黑」，整站默认深色 · 品牌色由「蓝 + 薄荷绿」换为「电光紫 + 冰青 + 品红」三色霓虹 · 引入 --glow-* 辉光变量，配合 app.css 的发光描边改色只需动下面 6 个变量（--brand / --brand-2 / --brand-3 / --bg / --bg-2 / --bg-3） ========================================================================== */ :root { /* ---------- 品牌霓虹三色 ---------- */ --brand: #a855ff; /* 主色：电光紫 */ --brand-2: #22e0ff; /* 辅色：冰青（渐变第二端 / 数字强调） */ --brand-3: #ff3d81; /* 点缀：品红（少量，用于第三层次） */ /* ---------- 深色底层 ---------- */ --bg: #05050b; /* 页面主底 */ --bg-2: #0b0b16; /* 区块次底 */ --bg-3: #12121f; /* 卡片底 */ --bg-4: #1a1a2b; /* 卡片 hover / 高亮底 */ /* 少量浅色反转区（用于制造节奏对比） */ --paper: #f2f2f7; --paper-2: #e6e6ef; --on-paper: #0a0a12; --on-paper-2: #55556a; /* ---------- 文字 ---------- */ --ink: #ffffff; --ink-2: rgba(255, 255, 255, 0.88); --ink-3: rgba(255, 255, 255, 0.74); --ink-4: rgba(255, 255, 255, 0.50); /* ---------- 描边 ---------- */ --line: rgba(255, 255, 255, 0.10); --line-2: rgba(255, 255, 255, 0.18); --line-glow: color-mix(in srgb, var(--brand) 55%, transparent); /* ---------- 字体（全部系统字体，零外部请求） ---------- */ --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, "Courier New", monospace; /* ---------- 字号 ---------- */ --fs-mega: clamp(3.4rem, 12vw, 13rem); /* 首屏巨型字，比前两站更大 */ --fs-hero: clamp(2.6rem, 6.6vw, 6.4rem); --fs-h1: clamp(2rem, 4.4vw, 4rem); --fs-h2: clamp(1.5rem, 2.8vw, 2.4rem); --fs-h3: clamp(1.1rem, 1.7vw, 1.4rem); --fs-lead: clamp(1rem, 1.3vw, 1.18rem); --fs-body: 1rem; --fs-sm: 0.9rem; --fs-xs: 0.75rem; --fs-tag: 0.688rem; --fs-num: clamp(2.4rem, 5vw, 4.6rem); /* ---------- 间距 ---------- */ --gap: clamp(14px, 1.6vw, 24px); --pad-x: clamp(18px, 4.4vw, 76px); --sec-y: clamp(76px, 11vh, 170px); --maxw: 1600px; --rail: 84px; /* 左侧竖排导航宽度（本站独有） */ /* ---------- 形状 ---------- */ --r-sm: 6px; --r: 14px; --r-lg: 24px; --r-pill: 999px; /* ---------- 动效节奏 ---------- */ --dur-fast: 0.32s; --dur: 0.66s; --dur-slow: 1.1s; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-io: cubic-bezier(0.76, 0, 0.24, 1); /* ---------- 辉光（暗色风格的灵魂） ---------- */ --glow: 0 0 0 1px var(--line-glow), 0 0 32px -6px color-mix(in srgb, var(--brand) 60%, transparent); --glow-2: 0 0 26px -4px color-mix(in srgb, var(--brand-2) 70%, transparent); --glow-txt: 0 0 18px color-mix(in srgb, var(--brand-2) 55%, transparent); --sh-card: 0 24px 60px -24px rgba(0, 0, 0, 0.9); /* ---------- 渐变 ---------- */ --grad-brand: linear-gradient(112deg, var(--brand) 0%, var(--brand-2) 100%); --grad-tri: linear-gradient(120deg, var(--brand-3) 0%, var(--brand) 46%, var(--brand-2) 100%); --grad-fade: linear-gradient(180deg, transparent 0%, var(--bg) 92%); --grad-card: linear-gradient(158deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.012) 100%); --nav-h: 68px; } /* ========================================================================== 备用皮肤：给加 class 即整站换色（做第 4、5 个站可直接照抄） ========================================================================== */ body.skin-lime { --brand: #b6ff3c; --brand-2: #00ffc8; --brand-3: #ffe14d; } body.skin-sunset { --brand: #ff6a2c; --brand-2: #ffc93c; --brand-3: #ff2e6a; } body.skin-ice { --brand: #4d8dff; --brand-2: #7ef9ff; --brand-3: #b06bff; }