/* ================================================================ news-reading H5 · Design Tokens · 唯一真源 来源: design/H5视觉规范_v2.html (2026-08-23 定稿) 主题: [data-theme="paper"] 白天报纸 / [data-theme="night"] 夜间台灯 用法: 整站变量切换, 切换过渡 --t-theme ================================================================ */ /* ---------- 字体: 实装自托管 woff2 (h5/fonts/), 加载失败自动回落系统栈 ---------- */ /* @font-face 按需在此追加; 名字先行, 文件后补 */ :root { --font-display: "Lora", ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, "Noto Serif SC", "Songti SC", serif; --font-ui: "Manrope", ui-sans-serif, -apple-system, "SF Pro Text", "PingFang SC", "MiSans", "Helvetica Neue", "Microsoft YaHei", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* ---------- 动效: 全站仅两条曲线 ---------- */ :root { --ease: cubic-bezier(.22, .9, .3, 1); /* 界面过渡: 快进慢出 */ --spring: cubic-bezier(.34, 1.56, .64, 1); /* 弹性反馈: overshoot ≤6% */ --t-fast: 120ms; /* 按压回弹 */ --t-mid: 220ms; /* 组件进出 */ --t-card: 260ms; /* 查词卡 spring */ --t-page: 280ms; /* hero 转场 */ --t-theme: 350ms; /* 主题 crossfade */ } /* ---------- 圆角 / 间距 ---------- */ :root { --r-xs: 4px; /* 报刊徽章/小标签 */ --r-sm: 8px; --r-md: 10px; /* 纸卡 */ --r-lg: 14px; /* 玻璃卡/格子 */ --r-xl: 18px; /* 大区块 */ --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; } /* ================================================================ 主题 B · PAPER 纸感报刊 (默认) ================================================================ */ [data-theme="paper"] { --bg: #FBF4E8; --surface: #FFFCF4; /* 卡片面 */ --surface-2: #FAF6EF; /* 次级面/表头 */ --ink: #2E2318; /* 正文 */ --ink-strong: #241B10; /* 标题 */ --ink-2: #8B7662; /* 次要文字 */ --ink-3: #A08A6C; /* 元信息/日期 */ --line: #E7DCC6; /* 分隔线 */ --line-strong: #C7B394; /* 描边/双线 */ --accent: #B45F2E; /* 陶土 */ --accent-deep: #8A4A1E; --accent-soft: rgba(180, 95, 46, .09); --on-accent: #FBF4E8; --shadow-card: 0 14px 28px -16px rgba(88, 66, 38, .35); --shadow-card-hover: 0 14px 28px -16px rgba(88, 66, 38, .35); --texture: /* 纸纹理(三层渐变, 零图片) */ radial-gradient(120% 50% at 50% 0%, rgba(255,252,244,.7), transparent 60%), repeating-linear-gradient(0deg, rgba(120,95,60,.022) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(120,95,60,.015) 0 1px, transparent 1px 4px); --blur: none; } /* ================================================================ 主题 C · NIGHT 暗夜阅读 ================================================================ */ [data-theme="night"] { --bg: #131820; --surface: rgba(30, 37, 49, .62); /* 玻璃面(配 backdrop-filter) */ --surface-2: rgba(35, 43, 56, .85); --ink: #D9D3C3; /* 正文: 暖白 */ --ink-strong: #F0E9DA; /* 标题 */ --ink-2: #8A94A6; --ink-3: #6E7889; --line: rgba(255, 255, 255, .07); --line-strong: rgba(255, 255, 255, .14); --accent: #E8B04B; /* 琥珀 */ --accent-deep: #F0BC5C; --accent-soft: rgba(232, 176, 75, .1); --on-accent: #171C24; --shadow-card: 0 16px 34px -18px rgba(0, 0, 0, .6); --shadow-card-hover: 0 16px 34px -18px rgba(0, 0, 0, .6); --shadow-glow: 0 0 26px -8px rgba(232, 176, 75, .2); --texture: none; --blur: blur(14px); } /* ================================================================ 12 档等级色带 · 双主题 (绿=A系 琥珀=B系 紫=C系, 同系明度递进) paper: 哑光实底 (徽章底色, 文字 --on-lv-x) night: 微光描边色 (徽章描边+文字, 底半透明) ================================================================ */ [data-theme="paper"] { --lv-pre-a1: #AFC69B; --on-lv-pre-a1: #FFFCF4; --lv-a1: #9DBD8D; --on-lv-a1: #FFFCF4; --lv-a1a2: #82A96F; --on-lv-a1a2: #FFFCF4; --lv-a2: #64875A; --on-lv-a2: #FFFCF4; --lv-a2b1: #D8AE7E; --on-lv-a2b1: #FFFCF4; --lv-b1: #C96F3D; --on-lv-b1: #FFFCF4; --lv-b1b2: #B25E31; --on-lv-b1b2: #FFFCF4; --lv-b2: #96491F; --on-lv-b2: #FFFCF4; --lv-b2c1: #BCA9D0; --on-lv-b2c1: #FFFCF4; --lv-c1: #9F87BC; --on-lv-c1: #FFFCF4; --lv-c1c2: #8B7BA8; --on-lv-c1c2: #FFFCF4; --lv-c2: #6E5E8C; --on-lv-c2: #FFFCF4; } [data-theme="night"] { --lv-pre-a1: #5BC8AF; --lv-a1: #63D6BB; --lv-a1a2: #6FE3C8; --lv-a2: #7FF0D6; --lv-a2b1: #E8B04B; --lv-b1: #F0BC5C; --lv-b1b2: #F5C874; --lv-b2: #FBD58F; --lv-b2c1: #A78BFA; --lv-c1: #B79CFF; --lv-c1c2: #C6AEFF; --lv-c2: #D5C3FF; } /* ================================================================ 糖果激励层 Candy-3D (不随主题变, 固定亮色糖果底座) 用法: 元素上传 --c1(亮) --c2(暗) --dk(厚度) --dk2(投影色) ================================================================ */ :root { /* 糖果四色族参考值(点亮/暗/厚度/投影), 组件直接内联注入: A系 #9FE086/#79CD5D/#4F9E3C · B系 #FFC94D/#F5A623/#C77F12 · C系 #C48FEB/#A964DD/#7841A8 */ --shadow-candy: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 5px rgba(0, 0, 0, .1), 0 4px 0 var(--dk, rgba(0, 0, 0, .2)), 0 9px 18px -6px var(--dk2, rgba(0, 0, 0, .3)); --shadow-candy-hover: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 5px rgba(0, 0, 0, .12), 0 6px 0 var(--dk, rgba(0, 0, 0, .2)), 0 15px 24px -8px var(--dk2, rgba(0, 0, 0, .35)); --shadow-candy-press: inset 0 2px 0 rgba(255, 255, 255, .4), 0 2px 0 var(--dk, rgba(0, 0, 0, .2)), 0 5px 10px -4px var(--dk2, rgba(0, 0, 0, .3)); } /* ---------- 减弱动态 ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---------- Night: 糖果本体不变色, 阴影加深 + 环境微光 ---------- */ [data-theme="night"] { --shadow-candy: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 5px rgba(0, 0, 0, .1), 0 4px 0 var(--dk, rgba(0, 0, 0, .2)), 0 10px 20px -6px rgba(0, 0, 0, .65), 0 0 18px var(--dk2, rgba(0, 0, 0, .3)); --shadow-candy-hover: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 5px rgba(0, 0, 0, .12), 0 6px 0 var(--dk, rgba(0, 0, 0, .2)), 0 16px 26px -8px rgba(0, 0, 0, .7), 0 0 22px var(--dk2, rgba(0, 0, 0, .35)); }