/* ============================================================================ * css/tokens.css — 设计令牌（唯一真相源） * ---------------------------------------------------------------------------- * 三条设计律（motion-web：先定静帧，再放动效）： * * 1. 一个色相。除中性灰阶外，全站只有「信号色」（朱红）与「冠军金」两种有彩色； * 主按钮/导航/链接一律用墨色 —— 蓝色不再出现在任何 chrome 上。 * 2. 真字号落差。display ÷ body ≈ 12×（获奖站中位数 ≈ 8×）； * 数值与拉丁字走 Barlow Condensed，中文用 Noto Sans SC 900 承担字重对比。 * 3. 动效是令牌不是手感。时长/缓动/弹簧全部下表取值， * 弹簧曲线由物理参数（k, c, m）采样成 CSS linear()，CSS 与 JS 共用同一套。 * ==========================================================================*/ :root { /* ---------------------------------------------------------------- 字族 * 中文与拉丁分开指定：混排时中文回退到系统黑体， * 会把「同一行两种性格」暴露出来，所以给中文单独一个真实字重可控的面。 */ --font-cjk: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif; --font-display: "Barlow Condensed", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --font-sans: var(--font-cjk); /* ---------------------------------------------------------------- 字号 * 全站唯一一套阶梯。display 与 body 之间没有中间地带 —— 这是刻意的。 */ --fs-d1: clamp(4.5rem, 13vw, 11.25rem); /* 72 → 180 场馆尺度数字 / 专栏巨字 */ --fs-d2: clamp(2.5rem, 7vw, 5.25rem); /* 40 → 84 阶段名 / 冠军名 */ --fs-d3: clamp(1.5rem, 2.9vw, 2.25rem); /* 24 → 36 区块标题 */ --fs-h2: clamp(1rem, 1.35vw, 1.25rem); /* 16 → 20 面板标题 */ --fs-lead: 0.9375rem; /* 15 引导句 */ --fs-body: 0.875rem; /* 14 正文 */ --fs-sm: 0.8125rem; /* 13 次要正文 */ --fs-meta: 0.6875rem; /* 11 等宽标签 / 眉题 */ --fs-micro: 0.625rem; /* 10 刻度 / 图注 */ --lh-display: 1.02; /* 拉丁/数字：紧 */ --lh-cjk-display: 1.16; /* 中文大字：必须比拉丁松（page-design §4） */ --lh-tight: 1.25; --lh-body: 1.6; --ls-display: -0.035em; /* 只给拉丁/数字；中文负字距会把字碗挤死 */ --ls-cjk-display: -0.01em; --ls-meta: 0.14em; /* 等宽大写标签 */ --ls-tag: 0.06em; --fw-body: 400; --fw-mid: 500; --fw-bold: 700; --fw-black: 900; /* 只给中文大字与冠军名 */ /* ---------------------------------------------------------------- 间距 * base-4 栅格。段间距刻意不恒定：紧的地方是「同一拍」，松的地方是「换了一拍」。 */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px; --gutter: clamp(16px, 3.4vw, 40px); /* 页面左右安全边 */ --measure: 68ch; /* 长文阅读宽度，逐元素设定，不给 body 设 max-width */ --u-grid: 48px; /* 技术底纹网格步长 */ /* ---------------------------------------------------------------- 圆角 * creative 方言：全站一个值。0 是默认，--r-2 只给「确实是一块屏」的浮层。 */ --r-1: 2px; --r-2: 4px; --r-3: 12px; /* ---------------------------------------------------------------- 动效时长 */ --dur-instant: 100ms; /* 指针反馈 */ --dur-fast: 180ms; /* hover / active */ --dur-base: 300ms; /* 卡片展开 / 面板位移 */ --dur-med: 460ms; /* 区块入场 */ --dur-slow: 720ms; /* 页面进入 / 大字揭示 */ --dur-cine: 1200ms; /* 冷开场 / 揭幕 */ /* ---------------------------------------------------------------- 缓动 */ --e-out-expo: cubic-bezier(.16, 1, .3, 1); --e-in-expo: cubic-bezier(.7, 0, .84, 0); --e-inout-quart: cubic-bezier(.76, 0, .24, 1); --e-out-back: cubic-bezier(.34, 1.56, .64, 1); --e-out-circ: cubic-bezier(0, .55, .45, 1); --e-sharp: cubic-bezier(.65, 0, .45, 1); --e-standard: cubic-bezier(.4, 0, .2, 1); /* 弹簧：k/c/m 采样成 linear()，与 js/motion.js 的 springEasing() 同源。 snappy 350/28 · default 200/22 · gentle 100/15 · bouncy 200/10 */ --e-spring-snappy: linear(0, 0.023 3.6%, 0.083 7.1%, 0.165 10.7%, 0.261 14.3%, 0.361 17.9%, 0.461 21.4%, 0.555 25%, 0.642 28.6%, 0.719 32.1%, 0.786 35.7%, 0.844 39.3%, 0.891 42.9%, 0.93 46.4%, 0.96 50%, 0.984 53.6%, 1.001 57.1%, 1.013 60.7%, 1.021 64.3%, 1.026 67.9%, 1.028 71.4%, 1.029 75%, 1.028 78.6%, 1.026 82.1%, 1.023 85.7%, 1.021 89.3%, 1.018 92.9%, 1.015 96.4%, 1);; --e-spring-default: linear(0, 0.022 3.6%, 0.079 7.1%, 0.158 10.7%, 0.248 14.3%, 0.344 17.9%, 0.439 21.4%, 0.53 25%, 0.614 28.6%, 0.689 32.1%, 0.756 35.7%, 0.813 39.3%, 0.861 42.9%, 0.901 46.4%, 0.933 50%, 0.959 53.6%, 0.979 57.1%, 0.994 60.7%, 1.004 64.3%, 1.012 67.9%, 1.017 71.4%, 1.019 75%, 1.02 78.6%, 1.02 82.1%, 1.019 85.7%, 1.018 89.3%, 1.016 92.9%, 1.014 96.4%, 1);; --e-spring-gentle: linear(0, 0.023 3.6%, 0.083 7.1%, 0.165 10.7%, 0.261 14.3%, 0.361 17.9%, 0.46 21.4%, 0.555 25%, 0.641 28.6%, 0.718 32.1%, 0.786 35.7%, 0.843 39.3%, 0.89 42.9%, 0.929 46.4%, 0.959 50%, 0.983 53.6%, 1 57.1%, 1.012 60.7%, 1.021 64.3%, 1.026 67.9%, 1.028 71.4%, 1.028 75%, 1.027 78.6%, 1.026 82.1%, 1.023 85.7%, 1.02 89.3%, 1.018 92.9%, 1.015 96.4%, 1);; --e-spring-bouncy: linear(0, 0.074 3.6%, 0.262 7.1%, 0.507 10.7%, 0.761 14.3%, 0.985 17.9%, 1.156 21.4%, 1.261 25%, 1.303 28.6%, 1.292 32.1%, 1.242 35.7%, 1.17 39.3%, 1.092 42.9%, 1.02 46.4%, 0.964 50%, 0.926 53.6%, 0.909 57.1%, 0.909 60.7%, 0.922 64.3%, 0.942 67.9%, 0.966 71.4%, 0.989 75%, 1.007 78.6%, 1.02 82.1%, 1.027 85.7%, 1.028 89.3%, 1.025 92.9%, 1.019 96.4%, 1);; } /* ============================================================== 日光台（浅） * 未经漂白的纸：暖中性底 + 墨色结构 + 一点朱红。 */ :root, [data-theme="light"] { --ground: #f1eee7; --ground-deep: #e7e3da; --surface: #fbfaf7; --surface-2: #f5f2ec; --ink: #141416; --ink-2: #4b4d53; --muted: #8b8d94; --line: #dcd6cb; --line-2: #e9e5dc; --accent: var(--ink); /* 一切主操作 = 墨，不是蓝 */ --on-accent: var(--ground); --signal: #e8401a; /* 全站唯一的有彩色 */ --signal-deep: #ab2b0d; /* 小字用的信号色（对比度 ≥ 4.5:1） */ --signal-soft: rgba(232, 64, 26, .10); --signal-line: rgba(232, 64, 26, .34); --gold: #8d6818; --gold-2: #c9a227; --gold-soft: rgba(141, 104, 24, .12); --win: #1c1c1e; --loss: #a9abb1; --underlay: rgba(20, 20, 22, .055); /* 技术底纹 */ --underlay-strong: rgba(20, 20, 22, .1); --sheen: rgba(255, 255, 255, .5); --sh-1: 0 1px 0 rgba(20, 20, 22, .04); --sh-2: 0 24px 60px -32px rgba(20, 20, 22, .5); --scrim: rgba(24, 22, 20, .5); --bar-bg: rgba(241, 238, 231, .78); color-scheme: light; } /* ============================================================== 控制室（深） * 近黑底 + 奶白结构 + 提亮后的朱红。 */ [data-theme="dark"] { --ground: #0a0a0b; --ground-deep: #050506; --surface: #131315; --surface-2: #1b1b1e; --ink: #f1eee7; --ink-2: #a5a6ac; --muted: #6b6d74; --line: #26262a; --line-2: #1c1c20; --accent: var(--ink); --on-accent: #0a0a0b; --signal: #ff5a2e; --signal-deep: #ff8460; --signal-soft: rgba(255, 90, 46, .16); --signal-line: rgba(255, 90, 46, .42); --gold: #c9a227; --gold-2: #e3bd55; --gold-soft: rgba(201, 162, 39, .16); --win: #f1eee7; --loss: #5c5e64; --underlay: rgba(241, 238, 231, .05); --underlay-strong: rgba(241, 238, 231, .1); --sheen: rgba(255, 255, 255, .08); --sh-1: 0 1px 0 rgba(0, 0, 0, .5); --sh-2: 0 30px 70px -34px rgba(0, 0, 0, .9); --scrim: rgba(0, 0, 0, .68); --bar-bg: rgba(10, 10, 11, .76); color-scheme: dark; }