/* Hallmark · genre: modern-minimal · macrostructure: Workbench · theme: LanZ (project-locked) * enrichment: E5 custom-illustration (Tier A CSS + Tier B SVG) · nav: N1b · footer: Ft1 * paper-band: light · display-style: system-grotesk · accent-hue: cool-violet 288° * pre-emit critique: P5 H5 E5 S5 R4 V4 * ------------------------------------------------------------------ * LanZ 设计系统 · 可移植 token * * 色值来源:项目原有 hex 调色板,精确转 OKLCH,12 色全部零漂移往返 * (最大单通道偏差 0/255)。品牌紫的推导逻辑保持不变—— * --color-accent 仍是 --color-ink 同色相拉亮的结果,只是换了色彩空间表达。 * * 不加载任何外部字体:国内服务器 + 首屏速度 > 自托管中文 web font 的代价。 * ------------------------------------------------------------------ */ :root{ /* ── 色彩 ──────────────────────────────────────────────── paper 三层:bg(底) → surface(面) → surface-alt(凹) */ --color-paper: oklch(97.5% 0.005 258.3); /* #F5F7FA */ --color-surface: oklch(100% 0 89.9); /* #FFFFFF */ --color-surface-alt: oklch(98.2% 0.003 264.5); /* #F8F9FB */ /* ink 三级。--color-ink-3 是全站文字对比度下限: 5.3:1 on surface、5.0:1 on paper。按最浅背景校准,勿再调浅。 */ --color-ink: oklch(17.9% 0.083 291.5); /* #140532 */ --color-ink-2: oklch(40.0% 0.051 296.3); /* #4A4260 · 9.4:1 on white */ --color-ink-3: oklch(53.1% 0.044 298.0); /* #6F6783 */ --color-ink-invert: oklch(100% 0 89.9); --color-rule: oklch(92.5% 0.010 267.4); /* #E3E6ED */ --color-rule-strong: oklch(84.9% 0.017 271.2); /* #C9CDD9 */ --color-accent: oklch(40.5% 0.195 287.8); /* #4B23A9 · 由 ink 同色相推导 */ --color-accent-deep: oklch(30.8% 0.140 290.8); /* #34176F */ --color-accent-soft: oklch(95.8% 0.016 297.5); /* #F2EFFB */ /* warn 分两个:填充用亮的,文字用深的。 #A8780A 作非文字图形够用(3.9:1 ≥ 3),但作小字只有 3.9:1(需 4.5)。 warn-ink 是同色相 79.9° 上最浅的合格取值:白面 4.82:1、凹面 4.58:1。 */ --color-warn: oklch(60.5% 0.123 79.9); /* #A8780A · 仅用于填充/描边 */ --color-warn-ink: oklch(55.5% 0.113 79.9); /* #956A07 · 文字专用 */ --color-focus: oklch(40.5% 0.195 287.8); /* ── 深色表面 ──────────────────────────────────────── 取自 buyer 真实界面的底色。产品是深藏青 + 金,官网是紫—— 两套色。深色卡用产品自己的底色,真截图嵌进去才不打架; 紫色退到卡外的结构线与 CTA 上。 */ --color-slate: oklch(25.8% 0.049 256.3); /* #13243B · buyer 顶栏实测值 */ --color-slate-2: oklch(30.9% 0.064 258.6); /* #1B3050 · 卡内凹面 */ --color-on-slate: oklch(84% 0.018 258); /* 深卡上的描述文字 · 9.9:1 */ /* 品牌紫在深藏青上只有 1.57:1,等于隐形。 这个是「仅限深色表面」的紫,4.70:1;浅底上依然用 --color-accent。 两个 token 各管各的表面,不要互换。 */ --color-accent-on-dark: oklch(66% 0.190 290); /* #9477FC */ /* 渐变 CTA 的终点。同色相提亮 +11.5% L、色相仅偏 +4°, 仍在靛紫带内 —— 不是那种紫→蓝的渐变。 */ --color-accent-lift: oklch(51.9% 0.190 292.0); /* #6F49CA */ /* 卡片抬升用的阴影。层级本该靠重量与尺度,不靠投影, 所以只有这一条、而且是「耳语」级:大模糊、大负扩散、低透明。 */ --color-shadow: oklch(17.9% 0.083 291.5 / 0.22); /* ── 深色舞台 ──────────────────────────────────────── 版面规则一句话:**深色 = 数据正在动的地方**。 全站只有两处用它 —— hero(匹配正在发生)与「工作方式」(数据在流), 其余读字的版块一律浅底。深色不是主题,是状态标记。 和 --color-slate 的分工:slate(#13243B)是 buyer 产品自己的界面底色, 用在产品家族卡上,让真截图嵌进去不打架;void 是官网自己的舞台底色, 更暗、更偏紫,专门用来托发光。两者不要互换,也不要互相替代。 全部数值由 OKLCH 直接落到 sRGB,零裁切(逐个二分验过 gamut 边界)。 */ --color-void: oklch(16% 0.045 274); /* #080B20 · 舞台底 */ --color-void-2: oklch(20% 0.055 272); /* #0E132F · 舞台上的面 */ --color-void-3: oklch(26% 0.062 270); /* #182142 · 舞台上的线 */ /* 舞台上的光。品牌紫 #4B23A9 在 void 上只有 1.9:1,和在 slate 上一样是隐形的 —— 深色表面永远换发光版。三个值对 void 的实测对比度写在后面。 */ --color-glow: oklch(70% 0.165 292); /* #A288FB · 6.91:1 on void */ --color-glow-hi: oklch(86% 0.075 300); /* #D8C6FC · 12.48:1 · 高光与渐变字末端 */ /* 金 = 风险/次级信号,沿用浅底 --color-warn 的语义,只是提亮到深底可读。 */ --color-glow-gold: oklch(80% 0.130 82); /* #E7B551 · 10.32:1 on void */ /* 辉光。舞台上唯一允许的「大面积柔光」,一律走 box-shadow / radial-gradient, 不用 filter:blur() 去糊真实元素 —— 那会把文字也一起糊掉。 */ --glow-soft: 0 0 60px -12px color-mix(in oklch, var(--color-glow) 55%, transparent); --glow-panel: 0 32px 120px -40px color-mix(in oklch, var(--color-glow) 70%, transparent); /* 半透明衍生:顶栏毛玻璃与深底上的次级文字。 用 color-mix 从上面的 token 派生,不写裸 rgba()。 */ --color-paper-veil: color-mix(in oklch, var(--color-paper) 88%, transparent); --color-surface-veil: color-mix(in oklch, var(--color-surface) 92%, transparent); --color-on-dark-2: color-mix(in oklch, var(--color-ink-invert) 70%, transparent); --color-on-dark-3: color-mix(in oklch, var(--color-ink-invert) 46%, transparent); /* ── 字体 ──────────────────────────────────────────────── 拉丁与中文用 unicode-range 分工(见 style.css 的 @font-face): 西文可负字距、可等宽数字;中文字距归零,方块字加负字距会字挤字。 */ --font-cn: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif; --font-body: 'LanzLatin', -apple-system, BlinkMacSystemFont, var(--font-cn); --font-display: var(--font-body); /* 单字族纪律:modern-minimal 的 canonical */ --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace; /* mono 是 outlier,只承担一个角色:机器读的元数据 ——字段标签、单位、状态、序号、图注。永不用于正文与标题。 */ /* ── 字号 ──────────────────────────────────────────────── 中文适配:同字号视觉重量远大于拉丁字母,display 上限压到 5rem (原 VTS 参数是 85px,直接套会把首屏压垮;但 4.25rem 又撑不住版心, 标题右侧会空一大块——5rem 是两头之间的取值)。 */ --text-xs: 0.75rem; /* 12px · 标签 */ --text-sm: 0.8125rem; /* 13px · 图注、字段值 */ --text-base: 0.9375rem; /* 15px · 卡片正文 */ --text-body: 1.0625rem; /* 17px · 正文 */ --text-lede: clamp(1.0625rem, 1.4vw, 1.1875rem); --text-md: 1.25rem; /* 20px · 小标题 */ --text-lg: 1.375rem; /* 22px */ --text-xl: clamp(1.5rem, 2.3vw, 2rem); /* section 标题。上限从 2.75rem 收到 2.55rem 是被中文行长逼的: .head 左栏在 1200px 版心下约 569px,最长的一条标题 「从地块到买家,从名单到判断」是 13 个全角字 = 13em, 2.75rem(44px)要 572px —— 差 3px,于是每一屏的标题都掉下来一两个字, 「…能互相印 / 证」这种孤字尾。40.8px 时 13em = 530px,全部一行收得住。 */ --text-2xl: clamp(1.9rem, 3.2vw, 2.55rem); /* section 标题 */ /* hero 上了深色舞台之后可以再放一档:深底上同字号的视觉重量比浅底轻, 4.5rem 在 void 上显得收着。 上限仍由 H1 最长一行反推,而且这个反推必须真的算一遍: 「同一份产业数据,」是 8 个全角字符 = 8em,左栏在 1200px 版心下是 (1120-40)×1.55/2.55 ≈ 656px,所以上限 656/8 ≈ 82px。取 4.75rem(76px) 留一档余量 —— 5rem 会让这一行断成两截,首屏直接塌成三行。 */ --text-display: clamp(2.35rem, 5.4vw, 4.75rem); --text-figure: clamp(1.5rem, 2.6vw, 2.125rem); /* 承重数字 */ /* ── 间距 · 4pt 命名尺度 ─────────────────────────────── */ --space-3xs: 0.125rem; /* 2px */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2.5rem; /* 40px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ /* section 垂直留白分三档,按内容密度分配—— 不是每个 section 都值同样的留白,等值留白就是节奏平掉。 */ --pad-y-tight: clamp(2.5rem, 5vw, 4rem); /* 40 → 64px */ --pad-y: clamp(3rem, 6vw, 5rem); /* 48 → 80px */ --pad-y-loose: clamp(3.75rem, 7vw, 5.5rem); /* 60 → 88px */ /* 悬浮导航胶囊的高度。hero 靠它算顶部让位,别写死。 */ --nav-h: 3.5rem; /* 56px */ /* ── 版心 ────────────────────────────────────────────── */ --wrap: 75rem; /* 1200px */ --pad-x: clamp(1.25rem, 4vw, 2.5rem); /* 行长:中文用 em 而不是 ch。 ch = 西文「0」的字宽 ≈ 0.5em,中文字是 1em 满宽, 所以 40ch 实际只装得下约 20 个汉字——这是原版右侧大片空白的主因。 */ --measure-lede: 24em; --measure-intro: 28em; --measure-prose: 30em; /* ── 纸张颗粒 ──────────────────────────────────────── SVG feTurbulence 生成,零外部请求。叠加时再压一次不透明度, 最终强度远低于 0.1 —— 是「几乎看不见的纸感」,不是装饰。 */ --grain: url("data:image/svg+xml;utf8,"); /* ── 线 ──────────────────────────────────────────────── */ --rule-hair: 1px; --rule-strong: 2px; /* ── 圆角 ────────────────────────────────────────────── */ --radius-none: 0; /* 卡片、字段、图框一律直角 */ --radius-pill: 100px; /* 全站唯一圆角:按钮与状态标签 */ /* ── 动效 ────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* 进入 */ --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* 离开 */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* 状态切换 */ --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; /* 循环动效。刻意放慢——快的循环会持续抢注意力。 舞台上的极光比其它循环还要慢一个量级:它是环境,不是事件, 快到能被「看见在动」就说明太快了。 */ --dur-breath: 4.4s; /* 引擎方块呼吸 */ --dur-pulse: 2.6s; /* 已上线状态点 */ --dur-aurora: 26s; /* 舞台极光漂移 */ --dur-flow: 3.2s; /* 信号链上的流动虚线 */ /* ── 层级 ────────────────────────────────────────────── */ --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; }