/* ============================================================ Hallmark · design tokens — 段子图库 theme: custom (newspaper) · genre: editorial · macrostructure: Catalogue Every colour and every font-family in style.css MUST reference a token declared here. No inline oklch() / hex / rgb() outside this file. Light values live in :root; html[data-theme='dark'] overrides them. ============================================================ */ :root { /* ---------- 纸面 / 墨色 ---------- paper 与 paper-2 刻意分层：页面是 paper，图片哑光底是 paper-2， 这样照片总是落在比页面略深的一层上，边线看得见。 */ --color-paper: oklch(97.6% 0.008 78); --color-paper-2: oklch(94.2% 0.011 78); --color-paper-3: oklch(91.4% 0.013 78); --color-ink: oklch(21% 0.012 62); --color-ink-2: oklch(36% 0.014 62); --color-ink-3: oklch(47% 0.012 62); --color-rule: oklch(80.5% 0.012 78); --color-rule-strong: oklch(62% 0.014 72); /* ---------- 强调色：印刷朱红 ---------- accent 只做填充；accent-ink 是中性底上的文字/图标/链接； focus 是键盘焦点环。三档都按「最不利底色」实算过（见 .shots/contrast.mjs）。 */ --color-accent: oklch(52% 0.19 30); --color-accent-soft: oklch(52% 0.19 30 / 0.1); --color-accent-ink: oklch(46% 0.17 30); --color-focus: oklch(46% 0.17 30); --color-on-accent: oklch(97.6% 0.008 78); /* ---------- 语义色 ---------- danger 与 accent 色相不同（紫红 18 vs 朱红 30）以免混淆，两者不作对比基准。 */ --color-danger: oklch(47% 0.19 18); --color-danger-soft: oklch(47% 0.19 18 / 0.1); --color-on-danger: oklch(98% 0.006 78); --color-success: oklch(45% 0.09 158); --color-success-soft: oklch(45% 0.09 158 / 0.12); /* ---------- 舞台 / 蒙层 / 骨架 ---------- */ --color-stage: oklch(17% 0.008 62); --color-on-media: oklch(98% 0.004 78); --color-scrim: oklch(15% 0.01 62 / 0.62); --color-backdrop: oklch(17% 0.01 62 / 0.62); --color-skeleton: oklch(93.5% 0.01 78); /* ---------- 阴影（编辑风格里几乎不用；仅弹层用一发） ---------- */ --shadow-overlay: 0 18px 48px oklch(20% 0.02 62 / 0.22); /* ---------- 字体：2 族 + 等宽数字 ---------- 拉丁用 Lora（衬线展示）+ 系统无衬线正文；中文交给系统衬线/无衬线。 选 Lora 的理由：它就是站主参考的那套 Google Fonts 搭配（Lora & Roboto）里的 标题字 —— 衬线、笔画对比适中、有手写气质的收笔，与「逐字手写」的入场方式合拍； Newsreader 偏报纸正文体，气质更硬。 只从 Google Fonts 取 Lora 一个拉丁子集（CJK 仍交给系统字体，避免几 MB 的中文字库）。 */ --font-display: 'Lora', 'Source Han Serif SC', 'Noto Serif CJK SC', 'Songti SC', SimSun, Georgia, serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif; /* ---------- 字号（1.25 比例） ---------- 五档封顶：再多就该用字重和颜色拉开层级，而不是继续加字号。 要更大的展示字时用 --text-display 的 clamp，而不是新加一档。 */ --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.3125rem; --text-xl: 1.625rem; --text-display: clamp(1.875rem, 3.4vw, 2.75rem); /* ---------- 行高 ---------- */ --lh-display: 1.12; --lh-title: 1.35; --lh-body: 1.62; /* ---------- 间距（4pt 命名刻度） ---------- 只保留实际用到的档位：每一档都要至少有一个真实消费者， 没人用的档位会被当成「可选值」而被滥用，刻度就失去约束力。 */ --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-2xl: 3.5rem; --space-3xl: 5.5rem; /* ---------- 版面 ---------- */ --page-max: 1680px; --page-pad: clamp(1rem, 3vw, 2.25rem); --measure: 62ch; --plate-min: 15rem; --plate-gap: 1px; --hit: 2.75rem; /* 44px 触控下限 */ /* ---------- 光标拖尾（glow-cursor.js 专用） ---------- 这是本项目唯一一处装饰性光效，与 editorial 的克制基调相悖，属于站主 明确要求的破例。取值集中在这里，方便一次改掉或整体关掉。 ⚠️ 浅色主题下这些值必须比原组件默认值更"重"：原组件的默认值是按 深色背景（#050610）设计的，而 screen 混合在接近白的纸面上几乎不产生 色差。实测口径：不改的话轨迹与纸底的差只有约 6/255，肉眼不可见。 */ --glow-cursor-primary: #0891b2; --glow-cursor-secondary: #7c3aed; --glow-cursor-trail-length: 48; --glow-cursor-trail-width: 11; --glow-cursor-trail-taper: 0.8; --glow-cursor-follow-speed: 0.22; --glow-cursor-glow-intensity: 1.6; --glow-cursor-glow-spread: 1.6; --glow-cursor-hotspot: 0.85; --glow-cursor-brightness: 1.4; --glow-cursor-opacity: 1.8; --glow-cursor-pulse-speed: 1.1; --glow-cursor-noise-strength: 0.05; --glow-cursor-idle-timeout: 700; --glow-cursor-fade-duration: 900; --glow-cursor-blend-mode: multiply; /* ---------- 逐字手写标题（StrokeText 专用） ---------- 站主参考的那套搭配（Lora & Roboto）配色逻辑是**极度克制**的： 标题与正文同一个近黑色，颜色只来自暖白纸面与一个低饱和的小色块。 所以这里不再用那个孤立的朱红描边色（它全站别处都不出现，红边 + 墨字很割裂）， 改成同一族暖中性的墨色阶： 描边 = --color-ink-2（中灰墨），像铅笔起稿 填充 = --color-ink（实墨），wipe 扫过去变成实心 一动一静之间形成节奏，而整句始终是同一种墨。 */ --stroke-text-stroke: var(--color-ink-2); --stroke-text-fill: var(--color-ink); /* 首页背景图的来源。放在令牌里（而不是写死在 CSS 或内联 style 里）， 这样换图只改这一处；由 server.js 的 /images/ 路由送出。 文件由站主提供（原 2944×1648，扩展名写的是 .png 但**真实格式是 JPEG**， 用 Pillow 按内容识别的），已转成 1920 宽的 WebP：140 KB。 注意：tokens.css 由 server.js 原样送出、**不经 Vite 处理**，所以这个 根相对路径在运行时就是原样（已实测服务送出的 URL 未被改写）。 但 Vite 构建时不认 publicDir，会把 /images/... 当成一个真实资源再复制一份到 public/assets/ —— 那个副本没有任何代码引用，属于多余产物。 */ --bg-image: url('/images/site-background.webp'); /* ---------- 首页背景图（images/site-background.webp） ---------- 图铺在 .page 上，刊头与页脚各自有纸色底，所以只露在"中间那段"。 承托层（scrim）是必需的，不是装饰：照片最亮处灰度约 161， 而正文墨色压上去只有 4.14:1 —— 低于 4.5 门槛。 叠加公式（.shots/contrast.mjs 会按它验算）： 结果亮度 = 照片亮度 * (1 - a) + 纸色亮度 * a 左侧文字区用较浓的承托，右侧留出照片。三个值都是"照片最亮处"下的不透明度。 */ --bg-scrim-strong: 0.82; /* 文字所在侧 */ --bg-scrim-soft: 0.5; /* 渐隐到照片区之前 */ --bg-scrim-min: 0.12; /* 最右侧，照片基本原样 */ /* 照片最亮处的灰度（0~255）。换背景图时要用取色工具重新量一次， 否则 contrast.mjs 那条背景承托检查就失去意义。 */ --bg-photo-max-luma: 161; /* 墨色阶：标题永远只用这两个值，不要在调用处再传别的颜色， 否则又会回到「红边 + 黑字」那种互不搭配的状态。 */ /* ---------- 层级修正 ---------- cursor 层（--z-cursor: 350）要在刊头之上才看得见光效， 所以给刊头一个高于它、又低于弹层的抬升层。 */ --z-header: 360; /* ---------- 刊头导航（Dock） ---------- 只服务刊头这一处，但按校验器要求统一声明在这里（它要求所有令牌有单一出处）。 · panel-height 必须**大于**图标的最大放大尺寸（App.jsx 的 magnification）， 否则图标会从面板上下溢出、看起来像撑破了框。它与 App.jsx 的 panelHeight 是一对。 · 圆角是站主明确要求的例外：站内其余地方都是编辑风格的直角（没有 --radius-* 体系）。 · border-width 3px 会占掉项宽高的两倍（40px 的项有效内容区约 34px）， 而放大到 52px 时描边仍是 3px、占比变小，悬停时会显得线变细。改粗细只动这一处。 */ --dock-panel-height: 3.75rem; --dock-radius: 14px; --dock-radius-item: 10px; --dock-border-width: 3px; /* ---------- 动效 ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; /* ---------- 层级 ---------- 只声明这个页面真正用到的层：吸顶工具行、普通抬升、光标画布、刊头、弹层、提示。 取值的相对顺序是有意的：工具行 200 < 光标画布 350 < 刊头 360 < 弹层 400 < 提示 500。 刊头高于光标层，是为了让站名上的光效能画过它、同时站名链接仍然可点。 */ --z-raised: 10; --z-sticky: 200; --z-cursor: 350; --z-header: 360; --z-modal: 400; --z-toast: 500; } html[data-theme='dark'] { --color-paper: oklch(17.5% 0.008 68); --color-paper-2: oklch(13.5% 0.007 68); --color-paper-3: oklch(23% 0.009 68); --color-ink: oklch(93.5% 0.006 78); --color-ink-2: oklch(80% 0.008 78); --color-ink-3: oklch(66% 0.009 78); --color-rule: oklch(31% 0.01 68); --color-rule-strong: oklch(48% 0.012 68); --color-accent: oklch(62% 0.17 32); --color-accent-soft: oklch(62% 0.17 32 / 0.18); --color-accent-ink: oklch(74% 0.14 32); --color-focus: oklch(74% 0.14 32); --color-on-accent: oklch(18% 0.01 62); --color-danger: oklch(66% 0.16 18); --color-danger-soft: oklch(66% 0.16 18 / 0.18); --color-on-danger: oklch(19% 0.01 62); --color-success: oklch(74% 0.12 158); --color-success-soft: oklch(74% 0.12 158 / 0.16); --color-stage: oklch(11% 0.006 62); --color-on-media: oklch(96% 0.005 78); --color-scrim: oklch(10% 0.008 62 / 0.66); --color-backdrop: oklch(8% 0.008 62 / 0.7); --color-skeleton: oklch(22% 0.009 68); --shadow-overlay: 0 18px 48px oklch(0% 0 0 / 0.55); /* 光标拖尾：暗底改用 screen（发光的正确做法），颜色提亮到能在近黑底上发光。 浅色主题那边用的是 multiply——同一个效果在两套底色上必须换混合模式， 否则一边看不见、另一边干脆变黑。 */ --glow-cursor-primary: #67e8f9; --glow-cursor-secondary: #a78bfa; --glow-cursor-glow-intensity: 1.2; --glow-cursor-glow-spread: 1.3; --glow-cursor-opacity: 1.2; --glow-cursor-blend-mode: screen; /* 手写标题：暗底上描边要用浅墨才看得见。 与浅色主题同一套逻辑 —— 描边取 --color-ink-2（暗底上是中浅灰）， 填充取 --color-ink（暗底上是近白），全程同一种墨，不用彩色。 */ --stroke-text-stroke: var(--color-ink-2); }