/* ========================================================================== tokens.css —— 设计令牌层（纯七工作室 · 企业商务站） 作用：把「变量」和「布局」彻底分开。换品牌/换浅色主题 = 只改这一层。 命名：--{类别}-{用途}-{变体} 与 vb-resume（简历样本）共用同一套令牌名，组件可以互相搬。 ========================================================================== */ :root { /* ---------- 色板：暗色基底，与简历样本保持视觉一致 ---------- 客户从商务站点进样本页时不该有割裂感，所以底色、强调色完全沿用。 */ --c-bg: #08080A; --c-bg-raise: #0E0E12; --c-bg-sunken: #050506; --c-surface: rgba(255, 255, 255, 0.028); --c-surface-2: rgba(255, 255, 255, 0.055); /* ---------- 描边：整套高级感的骨架，全靠极细的 1px ---------- */ --c-line: rgba(255, 255, 255, 0.085); --c-line-soft: rgba(255, 255, 255, 0.045); --c-line-strong: rgba(255, 255, 255, 0.20); /* ---------- 文字：三级灰阶按 WCAG 正文 4.5:1 反推 ---------- */ /* #F3F3F1≈17.6:1 / #9B9BA2≈7.2:1 / #7A7A83≈4.7:1 */ --c-text: #F3F3F1; --c-text-2: #9B9BA2; --c-text-3: #7A7A83; --c-text-invert: #08080A; /* ---------- 强调色：只给约 5% 面积用 ---------- */ --c-accent: #B9A6FF; --c-accent-2: #FF9FD6; --c-accent-ink: #08080A; /* ---------- 语义色：商务站特有，用于「承诺/保障」这类信任信号 ---------- */ --c-ok: #57E08A; /* 已包含 / 已达成 */ --c-warn: #E8C88A; /* 加购项 / 需注意 */ --c-hot: #FF7A59; /* 主推档位标记 */ /* ---------- 字体 ---------- */ --f-display: "Archivo", "Inter Tight", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif; --f-body: "Inter", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif; --f-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; --fs-display: clamp(2.8rem, 7.6vw, 7.6rem); /* 首屏巨型标题 */ --fs-section: clamp(2.2rem, 5.4vw, 5.6rem); /* 模块英文大标题 */ --fs-h2: clamp(1.4rem, 2vw, 2.1rem); --fs-h3: clamp(1.05rem, 1.25vw, 1.35rem); --fs-body: clamp(0.95rem, 0.95vw, 1.0625rem); --fs-sm: clamp(0.8rem, 0.82vw, 0.875rem); --fs-xs: 0.75rem; --lh-tight: 0.9; --lh-snug: 1.28; --lh-body: 1.72; --ls-display: -0.04em; --ls-tight: -0.02em; --ls-wide: 0.12em; --ls-wider: 0.22em; /* ---------- 版心 ---------- */ --w-page: 1400px; /* 商务站信息密度比作品集高，版心收窄到 1400 更好读 */ --w-text: 680px; --pad-x: clamp(20px, 3.2vw, 56px); --pad-y: clamp(72px, 9vh, 150px); --nav-h: 76px; --gap-xs: 8px; --gap-sm: 14px; --gap-md: 26px; --gap-lg: 44px; --gap-xl: clamp(44px, 5.5vw, 92px); --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; /* ---------- 抬起阴影 ---------- 卡片的 hover 「抬起」用它来表现，不用 translateY。 位移会让同一排里被指到的那张瞬间高出一截（PC 端鼠标停在谁身上谁就错位）， 阴影不参与布局，永远带偏不了同排。 暗底上纯黑投影几乎看不见，所以配一层 1px 顶部内高光「顶光」—— 暗色界面里的浮起感靠的是边缘变亮，不是底下变暗。 */ --shadow-lift: 0 16px 36px -16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.07); /* ---------- 缓动：丝滑不弹跳 ---------- */ --e-out: cubic-bezier(0.16, 1, 0.3, 1); --e-inout: cubic-bezier(0.76, 0, 0.24, 1); --t-fast: 0.26s; --t-base: 0.5s; --t-slow: 0.8s; /* ---------- 层级 ---------- */ --z-grain: 8000; --z-nav: 7000; --z-drawer: 7500; } :root { --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"); } /* ========================================================================== 浅色主题（可选）：给 即可整体切换。 商务站上线前如果觉得暗色不够「正规」，切这一层就够，组件不用动。 ========================================================================== */ html[data-theme="light"] { --c-bg: #FAFAF8; --c-bg-raise: #FFFFFF; --c-bg-sunken: #F1F0EC; --c-surface: rgba(8, 8, 10, 0.028); --c-surface-2: rgba(8, 8, 10, 0.055); --c-line: rgba(8, 8, 10, 0.11); --c-line-soft: rgba(8, 8, 10, 0.06); --c-line-strong: rgba(8, 8, 10, 0.26); --c-text: #121215; --c-text-2: #55555C; --c-text-3: #6E6E76; --c-text-invert: #FAFAF8; --c-accent: #5B45C9; --c-accent-2: #B23A7A; --c-accent-ink: #FFFFFF; --c-ok: #16794A; --c-warn: #8A6212; --c-hot: #C2451F; }