/* ========================================================================= tokens.css —— 设计变量 ------------------------------------------------------------------------- 颜色、间距、字号、图片框高度、整屏高度全在这里。 换主题只改 :root 里的变量，不要在别的文件里写死具体数值。 ⚠️ --page / --section-min 决定「一屏一个区块」，改了要连带看 base.css 的 .section ========================================================================= */ /* ==================== 设计变量 ==================== */ :root { /* 主强调色 —— 换成游戏主色即可（红 #ff3b5c / 青 #00e5d0 / 紫 #a855f7） */ --accent: #7c5cff; --accent-2: #00d4ff; /* 渐变用的第二色 */ --accent-glow: rgba(124, 92, 255, .55); /* 深色底：不用纯黑，用带一点蓝的深灰更耐看 */ --bg: #08090f; --bg-1: #0d0f18; /* 次级区块 */ --bg-2: #12141f; /* 卡片底 */ /* 文字层级 */ --text: #f2f3f7; --text-2: #a9aec2; --text-3: #6b7189; /* 玻璃拟态 */ --glass: rgba(255, 255, 255, .045); --glass-strong: rgba(255, 255, 255, .075); --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .16); /* 留白 用 clamp() 让间距随屏幕高度自适应： 小屏收紧、大屏放宽，避免高分屏上显得局促、低分屏上显得空旷。 */ --gap-section: clamp(88px, 10vh, 160px); --gap-lg: clamp(32px, 4vh, 64px); --gap-md: clamp(16px, 1.8vh, 28px); --gap-sm: clamp(8px, 1vh, 16px); /* 顶栏高度同样自适应：高分屏上不会显得过矮 */ --topbar-h: clamp(64px, 6vh, 84px); /* --------------------------------------------------------------- 一屏一个区块（整屏自适应） --------------------------------------------------------------- 改动原因：区块高度原来是「内容高度 + 固定内边距」，与屏幕大小 无关。笔记本（视口高约 700-800）上刚好一屏一个区块，但换到 大屏（视口高 1100 以上）同一个区块只占半屏，一屏能看到两个 区块，「一页一屏」的节奏就散了。 现在每个区块有一个「一屏」的最小高度，内容在区块内垂直居中： · 屏幕越高，区块越高 —— 任何分辨率都是一个区块一屏 · 用 min-height 而不是 height：内容超过一屏时区块自然长高， 不会把内容裁掉 · 减去顶栏高度：区块从顶栏下方开始，它的高度正好是 访客在屏幕上能看到的那一块 --page 优先用 svh（小视口高度），手机上地址栏收放时不会跳； 不支持 svh 的浏览器由下面的 @supports 之前的 100vh 兜底。 */ --page: 100vh; --section-min: calc(var(--page) - var(--topbar-h)); /* --------------------------------------------------------------- 流式字号系统 --------------------------------------------------------------- 让正文与标题一起随视口缩放，避免「大标题变大、周围全不变」 造成的比例失衡。 每一档都用 clamp(下限, vw基准, 上限)： · 下限 —— 手机等窄屏下不至于小到看不清 · vw —— 跟随视口宽度线性缩放，这是流式排版的核心 · 上限 —— 超宽屏下不至于大到失调 改字号统一改这里，不要在各自的选择器里写死。 --------------------------------------------------------------- */ --fs-base: clamp(15px, 0.95vw + 6px, 23px); /* 正文 */ --fs-sm: clamp(13px, 0.65vw + 6px, 19px); /* 辅助文字 / 标签 */ --fs-xs: clamp(11px, 0.45vw + 6px, 16px); /* 极小字 / eyebrow */ --fs-card: clamp(18px, 0.9vw + 8px, 30px); /* 卡片标题 */ --fs-h3: clamp(19px, 1.1vw + 8px, 32px); /* 小节标题 */ --fs-btn: clamp(14px, 0.65vw + 7px, 21px); /* 按钮文字 */ /* 流式图标 / 序号方块尺寸 */ --size-num: clamp(40px, 3.2vw, 68px); --size-dot: clamp(10px, 1vw, 16px); /* 卡片内边距 */ --pad-card: clamp(22px, 2.4vw, 48px); /* 图片框高度：随视口缩放，避免大屏上图片显得偏小 */ --h-char: clamp(240px, 30vh, 560px); --h-media: clamp(260px, 34vh, 600px); /* 内容最大宽度：也改为流式。 原来固定 1140px，导致在 2560 等宽屏上内容只占中间一小条， 这是「看起来太小」的主因之一。 现在按视口宽度缩放，宽屏上可利用更多横向空间。 */ --maxw: clamp(1140px, 78vw, 1680px); --radius: 16px; --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif; --mono: "SF Mono", "Cascadia Code", Consolas, monospace; /* 自托管「高亮字体栈」：给三个被渐变高亮的关键词用 （见 components.css 的 .font-pixel / .font-kai 等）。 字体随站点分发，不依赖访客电脑装过什么；万一没加载出来， 自动退回正文那套无衬线字体，不会变成豆腐块。 */ --font-pixel: "Wufarna Pixel", var(--font); /* 像素 —— Minecraft AE 像素体 ✅启用 */ --font-soft: "Wufarna Soft", var(--font); /* 由你决定 —— 沐瑶软笔手写体 ✅启用（免费商用） */ --font-fangyuan: "Wufarna FangYuan", var(--font); /* 各不相同 —— 阿里妈妈方圆体 VF ✅启用（免费商用） */ --font-kai: "Wufarna Kai", var(--font); /* 备选：骆国城毛笔小行（授权来源不明） */ --font-kai2: "Wufarna Kai 2", var(--font); /* 备选：马善政毛笔楷书 */ --font-casual: "Wufarna Casual", var(--font); /* 备选：志莽行书 */ --font-black: "Wufarna Black", var(--font); /* 备选：Noto Sans SC 900 */ --font-serif: "Wufarna Serif", var(--font); /* 备选：Noto Serif SC 900 */ } /* ========================================================================= 自托管字体（全部子集化，启用的两个合计约 2 KB） ------------------------------------------------------------------------- 正文一律走系统无衬线字体；只有三个「高亮关键词」用自托管字体。 全字库动辄十几兆，为几个字拖十几兆不值当，所以全部用 tools/subset-font.py 做成子集： 关键词 状态 字体 全字库 子集 像素 ✅启用 Minecraft AE（支持中文） 15.8 MB 0.6 KB 由你决定 ✅启用 骆国城毛笔小行简体 3.1 MB 1.3 KB 各不相同 ⬜备选 Noto Serif SC 900 ~20 MB 1.2 KB — ⬜备选 马善政毛笔楷书 / 志莽行书 / Noto Sans SC 900 为什么「由你决定」是毛笔行书：群主要手写感但「要尽量工整」。 注意 Segoe Script 那类拉丁手写体不含汉字（由/你/决/定 全无字形， 浏览器只会回退到中文字体），必须用含汉字的手写体。 候选对比图见 docs/字体对比-手写体候选.png 与 docs/字体对比-高亮关键词.png。 授权：Noto 系列 / 马善政 / 志莽行书均为 OFL，允许网页嵌入与再分发。 ⚠️ 像素那套（Minecraft AE）与骆国城毛笔小行**授权状况不明**， 见 fonts-src/README.md，上线前需向群主确认。 ⚠️ 换字 / 加字：改 tools/subset-font.py 顶部的 FONTS 表，重跑那个脚本。 ⚠️ 字体路径以本文件（assets/css/）为基准，所以是 ../fonts/。 ========================================================================= */ @font-face { font-family: "Wufarna Pixel"; src: url('../fonts/wufarna-pixel.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Wufarna Soft"; src: url('../fonts/wufarna-soft.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* 方圆体是可变字体，子集里已经是 wght=700 的静态实例， 所以这里声明 700，让 CSS 请求与字体实际字重对上，避免触发合成加粗 */ @font-face { font-family: "Wufarna FangYuan"; src: url('../fonts/wufarna-fangyuan.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Wufarna Kai"; src: url('../fonts/wufarna-kai.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Wufarna Kai 2"; src: url('../fonts/wufarna-kai2.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Wufarna Casual"; src: url('../fonts/wufarna-casual.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Wufarna Black"; src: url('../fonts/wufarna-black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Wufarna Serif"; src: url('../fonts/wufarna-serif.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } /* svh = 小视口高度：手机上地址栏收放时数值不变， 区块高度不会跟着跳（dvh 会跳，所以不用） */ @supports (height: 100svh) { :root { --page: 100svh; } }