/* ============================================================ dumodal · 共享设计 Tokens · 唯一真值来源 (Single Source of Truth) ------------------------------------------------------------ 三个站点 (cover / wuxing-board / wuxing-test) 的颜色、字体、 间距只能引用这里的变量，禁止在各项目里写裸值或新增未定义色。 改样式 = 改这一个文件。 接入方式见 ../_shared/DESIGN.md「接入说明」。 版本 2.0 · 2026-06-21 · 合并 cover + wuxing-board ============================================================ */ /* ── 字体托管 · 自托管 woff2 在 /shared/fonts/ ── */ /* 手写体（cover / 品牌纸条）·「声」 */ @font-face { font-family: "Creamy Garden"; src: url("/shared/fonts/CreamyGarden.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "YueLiangHai"; src: url("/shared/fonts/YueLiangHai-v3.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; } /* HarmonyOS Sans SC · 子页正文（/wuxing、/wuxing/board、/wuxing/test）·「器」 工具语境用，比 cover 的手写体更克制、更可信，但仍带温度（不像 Helvetica 冷） */ @font-face { font-family: "HarmonyOS Sans SC"; src: url("/shared/fonts/HarmonyOS_Sans_SC_Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "HarmonyOS Sans SC"; src: url("/shared/fonts/HarmonyOS_Sans_SC_Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "HarmonyOS Sans SC"; src: url("/shared/fonts/HarmonyOS_Sans_SC_Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ── 五行 · 深色（文字着色 / 标题强调 / 点） ── */ --wood-fg: #05922A; /* 正绿 */ --fire-fg: #C6272B; /* 朱红 */ --earth-fg: #6F511D; /* 焦褐 */ --metal-fg: #A47C18; /* 深金 · WCAG 临界，正文必须 font-weight: 700 */ --water-fg: #157DB0; /* 靛 */ /* ── 五行 · 浅色（卡片背景 / 色块 / 纸张 / 面） ── */ --wood-bg: #D3D9CB; /* 鼠尾草绿 */ --fire-bg: #F5D8DC; /* 樱花粉 */ --earth-bg: #C99A90; /* 赤陶红 */ --metal-bg: #F1ECC4; /* 奶油黄 */ --water-bg: #BCD7E0; /* 雾霾蓝 */ /* ── 中性色 · canonical 命名（cover 风格） ── */ --paper: #F4F2F0; /* 略偏冷的米白 · 站群统一纸面 */ --paper-warm: #F4F2F0; /* 同 paper, 留作语义 */ --ink: #1A1A1A; /* 墨 · 主文字与边框 */ --ink-soft: #4A4A4A; /* 次要文字 */ --ink-mid: #888888; /* 辅助文字 */ --ink-light: #B8B8B0; /* 章号 / 占位 */ --line: #1A1A1A; /* 边框线 · 与 ink 同 */ /* ── 中性色 · 别名（wuxing-board 用的命名，指向同一真值） ── */ --bg: var(--paper); --bg-elev: var(--paper); --bg-elev-2: #EAE7E3; --text: var(--ink); --muted: var(--ink-soft); --dim: var(--ink-mid); --line-strong: var(--ink); --sheng: var(--ink); --ke: var(--ink); /* 旧 accent 占位 · 单色阶段全部退到 ink */ --rust: var(--ink); --accent: var(--ink); /* ── 字体栈 ── 声 (display)：手写体，慢读 · wordmark / hero / 项目名 器 (ui)：系统无衬线，快速扫读 · 按钮 / 表单 / 列表 serif：手写体打底的正文（中文）+ Noto Serif SC（西文兜底） */ --serif: "YueLiangHai", "Noto Serif SC", "Source Han Serif SC", "STSong", Georgia, serif; --display: "Creamy Garden", "YueLiangHai", "Noto Serif SC", Georgia, serif; --ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, monospace; /* 子页正文（/wuxing、/wuxing/board、/wuxing/test）· cover 不用 */ --harmony: "HarmonyOS Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; /* ── 间距阶梯（4px 基准） ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; --space-10: 64px; /* ── 圆角 ── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; /* ── 行高 ── */ --leading-tight: 1.3; --leading-normal: 1.6; --leading-loose: 1.8; /* 手写体正文需要更大 leading 让笔触不撞 */ } /* ── 五行单字着色类（白底正文，仅着五行字本身，前后保持墨色） ── */ .wuxing { font-weight: inherit; } .wuxing--wood { color: var(--wood-fg); } .wuxing--fire { color: var(--fire-fg); } .wuxing--earth { color: var(--earth-fg); } .wuxing--metal { color: var(--metal-fg); font-weight: 700; } /* 金对比度最低，默认加粗满足 WCAG AA Large */ .wuxing--water { color: var(--water-fg); } /* ── 全站共用 · 右上角 dumodal 纸条 ── 每个页面 body 顶部放
， 再用 /shared/brand-mount.js fetch /shared/brand-bookmark.html 注入。 */ .brand-bookmark { position: fixed; top: 32px; left: 32px; z-index: 200; /* 永远在最上, 拖动的纸压不住 */ font-family: var(--display); font-size: 22px; font-weight: 400; line-height: 1.1; /* 锁死, 跨页等高 */ color: var(--ink); text-decoration: none; background: var(--paper); border: 1px solid var(--ink); padding: 10px 18px; letter-spacing: 0.04em; transform: rotate(-1.5deg); /* 从左侧锚定时反方向旋转, 视觉上仍是"向上翘" */ transform-origin: left center; transition: opacity .15s ease, transform .15s ease; } .brand-bookmark:hover { opacity: 0.7; transform: rotate(-1.5deg) translateY(-1px); } @media (max-width: 520px) { .brand-bookmark { top: 20px; left: 20px; font-size: 18px; padding: 6px 12px; } } /* ── 子页页标 · 跟 dumodal 并排夹在左上的小纸条 ── 每个子页 HTML/JSX 里加一个 页名 跟 dumodal 形成 V 形折页（dumodal -1.5° / page-tab +1.5°） */ .page-tab { position: fixed; top: 32px; left: 168px; /* 32 (dumodal left) + ~120 (dumodal width) + 16 gap */ z-index: 200; font-family: var(--display); font-size: 22px; font-weight: 400; line-height: 1.1; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); padding: 10px 18px; letter-spacing: 0.04em; transform: rotate(1.5deg); transform-origin: left center; pointer-events: none; } @media (max-width: 520px) { .page-tab { top: 20px; left: 124px; font-size: 18px; padding: 6px 12px; } } /* ── washi tape · 把 dumodal 和 page-tab 两张纸条粘在一起 ── 每个子页 HTML/JSX 里加一个
奶黄色（沿用 cover 的 --metal-bg）+ 微透明 + 斜贴 */ .tab-tape { position: fixed; top: 22px; left: 110px; width: 100px; height: 18px; background: linear-gradient( 90deg, rgba(241, 236, 196, 0.4) 0%, rgba(241, 236, 196, 0.78) 12%, rgba(241, 236, 196, 0.78) 88%, rgba(241, 236, 196, 0.4) 100% ); box-shadow: inset 0 0 0 0.5px rgba(180, 160, 80, 0.18), 0 1px 1.5px rgba(40, 38, 32, 0.08); transform: rotate(-8deg); transform-origin: center; z-index: 201; pointer-events: none; } @media (max-width: 520px) { .tab-tape { top: 14px; left: 78px; width: 72px; height: 14px; } }