/* ========================================================================== tokens.css —— 设计令牌层 作用：把「变量」和「布局」彻底分开。换行业 / 换品牌 = 只改这一层 + data.js， 布局引擎（site.css）完全不用动。 命名：--{类别}-{用途}-{变体} ========================================================================== */ :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; /* 状态点（在线/可接单）。暗底高亮绿，浅底见 paper 组 */ /* ---------- 字体 ---------- */ --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; /* 衬线：只给 paper 版式用（正式文书气质）。中文回落顺序按「思源宋体 -> 宋体」， 全部拿不到时退到 Georgia/serif，版面不会塌。 */ --f-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", Georgia, "Times New Roman", serif; /* 字号：全部用 clamp，PC 为主但缩到平板手机不会炸 */ --fs-display: clamp(3.6rem, 11.5vw, 12.5rem); /* Hero 巨型标题 */ --fs-section: clamp(2.6rem, 7vw, 7.5rem); /* 模块英文大标题 */ --fs-h2: clamp(1.5rem, 2.2vw, 2.4rem); --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.88; /* 巨型英文标题用，压得很紧才够「机构感」 */ --lh-snug: 1.25; --lh-body: 1.7; /* 字距：大标题负字距是高级感的开关 */ --ls-display: -0.045em; --ls-tight: -0.02em; --ls-wide: 0.12em; --ls-wider: 0.22em; /* ---------- 版心 ---------- */ --w-page: 1700px; /* 需求指定：版心 1700px */ --w-text: 760px; /* 正文最大行宽，保证可读性 */ --pad-x: clamp(20px, 3.4vw, 64px); /* 视口内侧边距 */ --pad-y: clamp(88px, 11vh, 190px); /* 模块上下留白 */ --nav-h: 78px; --gap-xs: 8px; --gap-sm: 14px; --gap-md: 26px; --gap-lg: 48px; --gap-xl: clamp(48px, 6vw, 110px); --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; /* ---------- 缓动：丝滑不弹跳，全部走 expo / quint 系 ---------- */ --e-out: cubic-bezier(0.16, 1, 0.3, 1); /* 主力出场 */ --e-inout: cubic-bezier(0.76, 0, 0.24, 1); /* 遮罩、位移 */ --e-soft: cubic-bezier(0.33, 1, 0.68, 1); --t-fast: 0.28s; --t-base: 0.55s; --t-slow: 0.9s; /* ---------- 层级 ---------- */ --z-cursor: 9999; --z-preload: 9000; --z-grain: 8000; --z-nav: 7000; /* ---------- 氛围：Hero 背景视频 / 视频缺失时的兜底光 ---------- */ --hero-veil: linear-gradient(180deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,.35) 45%, rgba(8,8,10,.96) 100%); } /* 行业预设可覆盖的令牌：data.js 里 theme 字段会写到 上， 所以这里只放「默认值 + 语义别名」，实际覆盖走行内自定义属性。 */ /* 纸感噪点（SVG 内联，零请求） */ :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-layout] 切换（app.js 写入，见 app.js 的 applyTheme） -------------------------------------------------------------------------- 这里只放「令牌级」的差异。结构级差异（栅格、字号配方、模块排布）在 site.css。 仍然遵守同一条铁律：颜色只在本文件出现字面值，site.css 一律走变量。 ========================================================================== */ /* ---------- paper：浅色正式文书 ---------- 为财务 / 教育 / 医疗 / 法务这类「招聘方先看资质与经历」的方向准备。 对比度已按 WCAG 正文 4.5:1 反推： 正文 16.3:1 / 次级 6.98:1 / 三级 4.94:1。 */ html[data-layout="paper"] { --c-bg: #F5F3EE; /* 暖白纸张，不用纯白，避免屏幕刺眼 */ --c-bg-raise: #FFFFFF; --c-bg-sunken: #EDEAE3; --c-surface: rgba(25, 23, 19, 0.028); --c-surface-2: rgba(25, 23, 19, 0.055); --c-line: rgba(25, 23, 19, 0.16); --c-line-soft: rgba(25, 23, 19, 0.09); --c-line-strong: rgba(25, 23, 19, 0.34); --c-text: #191713; --c-text-2: #57524A; --c-text-3: #6E685D; --c-text-invert: #FBFAF7; --c-accent: #2C5A6E; /* 默认沉青。各预设可在 data.js 覆盖 */ --c-accent-2: #A8703C; --c-accent-ink: #F7F5F1; --c-ok: #2E7D4F; /* 浅底上的状态绿：亮绿在纸上等于看不见 */ --hero-veil: none; /* 浅色页不需要压暗遮罩 */ /* 正式文书排版：正文行高放宽，字距回正，衬线承标题 */ --lh-body: 1.82; --ls-display: -0.015em; --ls-tight: -0.008em; --w-page: 1520px; /* 纸张版面收窄一点更像文档 */ /* 圆角收掉大半：方正的版式才像一份文档，而不是一组 App 卡片 */ --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; /* 展示级字号降一档：纸面排版追求「可读的正式」，不要海报感 */ --fs-display: clamp(2.8rem, 7.6vw, 8rem); --fs-section: clamp(2.2rem, 5.4vw, 5.4rem); } /* ---------- console：深色终端 / 数据密集 ---------- 为研发、数据、运维方向准备。去掉圆角与氛围光，改用更硬的网格线。 */ html[data-layout="console"] { --c-bg: #07080A; --c-bg-raise: #0C0E11; --c-bg-sunken: #040506; --c-line: rgba(255, 255, 255, 0.11); --c-line-soft: rgba(255, 255, 255, 0.06); --c-line-strong: rgba(255, 255, 255, 0.26); --c-ok: #57E08A; /* 终端没有圆角 —— 这一条就换掉了大半「卡片味」 */ --r-xs: 0px; --r-sm: 0px; --r-md: 2px; --r-lg: 2px; --lh-tight: 0.92; --ls-display: -0.03em; /* 终端版式字号也压一档：满屏数据比巨型标语更符合这个版式的人设 */ --fs-display: clamp(2.4rem, 7.2vw, 7.8rem); --fs-section: clamp(2rem, 4.8vw, 4.8rem); }