| name | fakao-cheatsheet-style |
|---|---|
| description | 法考速记卷宗网站的设计系统——案卷/书桌风背景、牛皮纸卡片、配色token、三种字体角色，以及印章、高亮、对比表、思维导图、流程图等组件代码与版式选用规则。新建或修改本项目任何页面、设计新知识点卡片、或被要求"保持现有视觉风格一致"时必须使用。Design system for this legal-exam cheat-sheet card site. |
一句话：把法考讲义拆成"案卷卡片"，摆在深色书桌背景上，用红色印章和高亮笔标出重点，让人一眼能找到"这张卡讲什么、哪里是坑"。
三个不可违背的原则：
- 一页一知识主题。 每个 HTML 文件只讲一个考点，用网格 / 思维导图 / 流程图 / 对比表 / 口诀其中一种版式承载——不要在同一页混搭多种版式。
- 结构本身要传递信息，不是装饰。 颜色、印章、分栏都得"有意义"：红 = 刑法或警示结论，蓝 = 民法，绿 = 正确/可以/通过，黄棕 = 注意/有争议/过当，brass金棕 = 站点功能页（非知识内容）。没有语义就不要上强调色。
- 每页只留一个"签名动作"。 叠纸卷首卡、印章、地铁线动画、三栏对比……每页选一个最显眼的记忆点，其余元素退后，不要每个区块都抢镜。
| 内容特征 | 用这个版式 | 参考文件 |
|---|---|---|
| 知识点零散、数量多，互相不强依赖 | 网格卡片总览 | susong-shixiao.html |
| 有明确从属/分支关系的体系概念 | 思维导图（纯CSS堆叠树状结构） | gongtong-fanzui.html |
| 需要逐条判断、有"如果…那么…"链条逻辑 | 流程图/判断链（地铁线式） | zhengdang-fangwei.html |
| 容易混淆的 2-3 个平行概念 | 多列对比表卡 | xiaoli-santai.html |
| 需要精确记忆构成要件，适合编口诀 | 口诀印章 + 关键词卡 | shanyi-qude.html |
新知识点先判断"这是哪一类"，再复制对应模板改内容；不要从零设计新版式——除非五种都明显不合适，这时才考虑新版式，并把新版式也补进这份文档的表格里。
深色"书桌"背景（不是纯黑，是带轻微暖色的深棕），上面摆着牛皮纸色的"案卷卡片"。正文内容必须在卡片里，背景只负责露出书桌氛围，不放正文文字。
:root{
--desk: #1d1712; /* 页面背景：深色书桌 */
--folder: #efe4c8; /* 卡片底色：牛皮纸 */
--folder-2:#e2d2a8; /* 卡片次底色，用于"叠纸"效果 */
--ink: #2a2420; /* 卡片内正文文字 */
--ink-soft:#6b5e4d; /* 卡片内次要/说明文字 */
--brass: #b8893b; /* 高亮笔色、装饰线；站点功能页(留言板/404/首页CTA)的专属强调色 */
--seal: #a52422; /* 刑法主题色 + 通用"警示/否定"结论色 */
--indigo: #2b4960; /* 民法主题色 */
--jade: #3f6b4f; /* "正确/可以/通过"结论色 */
--warn: #9a6a1e; /* "注意/有争议/过当"结论色 */
--line: rgba(42,36,32,.16);
--shadow: 0 14px 30px rgba(0,0,0,.38);
}科目色映射规则：每个科目（或科目族）一个专属 --accent，不要复用别科的色。现有十族：刑法 --seal 朱红、民法 --indigo 墨蓝、刑事诉讼法 #7a3b55 绛紫、行政法 #5d6b2f 橄榄绿、理论法 #46506b 黛青灰、民事诉讼法 #2f6168 黛青、商法 #684a7a 紫、经济法 #9a5a38 赭石、知识产权法 #2c6e84 青、国际法 #8f5066 绛红紫。其中理论法（法治理论·法理学·宪法·法制史·职业道德）与国际法/三国法（国际公法·国际私法·国际经济法）各把几门法考科目并入同一族、共用一个 accent。站点功能页（留言板、404、首页CTA横幅）统一用 --brass。结论/状态色固定语义不随科目变化：--jade 好结果、--seal/科目色 坏结果、--warn 中间态。
- 标题 / 卡片标题：
Noto Serif SC700/900 —— 唯一负责"标题感" - 正文：
Noto Sans SC400/500/700 —— 唯一负责"可读性" - 签名手写体：
Ma Shan Zheng—— 只用在印章文字、口诀大字上；绝不用于正文或大段标题，否则会显得廉价 - 法条引用 / 案号：
SF Mono, Consolas, monospace—— 只用于"§188"这类引用标签，制造"法律条文编号"的真实感
引入方式（放在 <head>，一次性覆盖三种角色）：
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700;900&family=Noto+Sans+SC:wght@400;500;700&family=Ma+Shan+Zheng&display=swap" rel="stylesheet">完整可复制代码见 references/components.md；可直接 <link> 的基础样式见 references/tokens.css。这里只列清单和使用场景：
| 组件 | 用途 | 出现在 |
|---|---|---|
.topbar |
页顶面包屑 + 上一页/下一页导航 | 所有页 |
.hero + .tab |
叠纸卷首卡 + 左上角凸出的"卷号"标签 | 所有页 |
.cite-chip |
法条引用小标签，等宽字体 | hero、卡片内 |
mark |
高亮笔关键词，模拟荧光笔扫过 | 正文任意位置 |
.seal / .stamp-sq |
圆形/方形双线印章，标"重点/易错/口诀" | 提示性内容 |
.card |
网格版式的最小卡片单元 | 01 |
.cond-list .dot |
带圆圈编号的条件列表 | 01/02/05 |
.compare 表格 / .cmp 标签列网格 |
两种对比表实现 | 01（小表）/ 04（多行多列大对比） |
.tree-stage + .bus-line |
思维导图：纯CSS堆叠连接线，不用JS算坐标 | 02 |
.flow-track + .marker + .exit-link |
流程图：动画流动虚线主轴 + 岔路结论卡 | 03 |
.privacy / .fallback-banner |
提示横幅（说明性/警示性文字条） | 06 |
.term + 释义浮层 |
行内可点术语 → 毛玻璃浮层，术语飞到左栏、右栏展开详解/延伸 | 任意知识页（需引 terms.js） |
.fab-feedback |
悬浮留言入口，固定右下角 | 所有页 |
.sb-tab + 卷宗目录抽屉 |
左缘固定把手 → 滑出全站分科目卷宗清单，当前页高亮、一键跳转 | 除首页外所有页（需引 sidebar.js） |
.dots + .footnav |
页面间"翻卷"导航条 | 所有页 |
把正文里的术语/法条做成可点链接，点开后背景毛玻璃模糊、术语飞到左栏、右栏展开详解与延伸知识。这是一套"行内 .term 按钮 + 同名 <template> + 共享 terms.js"的三段式，样式全部在 tokens.css、逻辑全部在 terms.js，颜色走 var(--accent) 自动跟随每页主题色——新增词条只写两小段 HTML，不必碰 CSS/JS。
<!-- 1) <head> 里引脚本（每个用到词条的页面一次即可） -->
<script src="terms.js" defer></script>
<!-- 2) 正文里把术语写成按钮（data-cite 选填，显示在左栏法条小标签） -->
义务人即取得<button class="term" type="button" data-term="抗辩权"
data-cite="民法典 §192">抗辩权</button>的制度。
<!-- 3) 页面任意处放同名模板，里面是作者自己写的可信 HTML -->
<template class="term-detail" data-term="抗辩权">
<p>……正文解释，<b>加粗</b>、<mark>高亮</mark>随意……</p>
<h4>延伸 · 易考点</h4>
<ul><li>……</li></ul>
<p class="term-more">……金棕色补充框，放对比/口诀/提醒……</p>
</template>规则：data-term 在同一页内唯一；同一个术语可在正文出现多次（多个按钮共用一个模板）。模板内容是作者写的，用 cloneNode 注入——这与"用户输入必须 textContent"的 XSS 规则不冲突（那条只针对要展示给其他访客的用户输入）。prefers-reduced-motion 下自动跳过飞入动画、直接展示。
页面左缘固定一个黄铜"卷宗目录"把手（站点功能件，与 .fab-feedback 同一 --brass 语义），点开后从左侧滑出牛皮纸抽屉：按科目族分组列出全站知识点卷，分组色标用各科目族专属 accent，当前页所在科目自动展开、条目高亮"当前"。读者在任何一页都能直接跳去其他考点，不必先退回首页。
<!-- 每页 <head> 一行即可（首页除外——首页本身就是目录）；把手和抽屉由脚本注入，页面零 HTML -->
<script src="sidebar.js" defer></script>样式全部在 tokens.css（.sb-* 一节），全站清单在 sidebar.js 顶部的 SITE_MAP（严格 JSON）。新增知识点页时，把新卷追加进 SITE_MAP 对应科目族——测试会把它与 index.html 目录（科目/卷宗/标题/顺序/配色）和各页 data-subject 逐条比对，漏改任何一处 npm test 都会失败。ESC / 点遮罩关闭；prefers-reduced-motion 下不播滑入动画。
- 背景必须是
--desk深色，卡片必须是--folder牛皮纸色——不能反过来做成"浅色背景 + 深色卡片"。 - 每个页面必须
<link rel="stylesheet" href="tokens.css">引用共享样式表；页面自己的<style>只保留本页主题色:root{--accent:…}（及少量页面级覆盖）与该页专属组件。公共 token / 组件只改tokens.css一处即全站生效（页面间通过浏览器缓存共享，加载更快）。不要再把整套基础样式内联进页面。 tokens.css已统一提供@media (prefers-reduced-motion: reduce)（关闭所有动画/过渡）和 760/480 基础断点；新页面只需为自己专属的组件补断点（网格/分栏收缩成单列，或允许横向滚动并给出滑动提示）。- 印章类元素（
.seal/.stamp-sq/.stamp-reject）必须配mix-blend-mode: multiply，否则盖在牛皮纸上会显得是"贴纸"而不是"印章"。 - 不引入大型 JS 框架或构建步骤；纯 HTML + CSS，必要时配少量原生 JS（如留言板对
fetch('/api/messages')的探测调用，见下方"留言板的持久化策略"）。 - 涉及用户输入并要展示给其他访客的内容（如留言板），渲染时用
textContent/DOM API 拼装而不是字符串拼接进innerHTML，避免 XSS。
- 卡片用纯白背景、超大圆角、大量留白的"通用 SaaS 风"——这是默认 AI 审美，必须避免。
- 一页堆超过一种版式（比如网格卡片里又塞一个完整流程图）。
- 强调色（brass/seal/jade/warn）只是为了"好看"而上色，不对应任何结论性质。
- 用外部图标库/图片替代本系统的印章、卡片、
mark高亮——会破坏统一感。 - 流程图里的箭头/连接线只是装饰，没有真实反映"如果…就…"的判断逻辑。
- 文件名格式：按主题取拼音 slug（如
zhengdang-fangwei.html），不带版式名或序号；首页固定index.html，404固定404.html，留言板固定feedback.html。 - 每页
<body>标注所属科目：<body data-subject="刑事诉讼法">。 - 每页顶部
.topbar必须有：科目面包屑 + 上一页/下一页（或返回首页）链接。 - 每页底部
.pagefoot必须有：.footnav文字链接 +.dots进度指示（圆点数 = 本科目系列页数，当前页拉长高亮；上一/下一在本科目内循环，首页/末页指向index.html）。 - 新增知识点页时记得：
<link>引用tokens.css（页面<style>只放--accent+ 专属样式，别再内联公共基础层）、引<script src="sidebar.js" defer></script>并在sidebar.js的SITE_MAP对应科目族里追加一行{ "href": …, "title": … }、插入.dots序列、更新前后页.footnav链接、在index.html的.catalog里加一张目录卡（首页搜索会自动收录该卡；卡片上加data-keywords="别名 法条 拼音"可提升搜索命中率）、在本文件最上面的"何时用哪种版式"表格里补一行（如果是全新版式）。
留言板前端会自动探测后端是否可用，不需要手改代码就能在不同环境下工作：
fetch('/api/messages')—— 正式部署到 Cloudflare Pages 后使用，由functions/api/messages.js+ 一个 KV namespace 提供，所有访客共享同一份留言。- 纯内存兜底 —— 接口不可达时（直接开
file://、本地python -m http.server、或 KV 未绑定）自动降级，仅本次浏览有效、刷新即丢失，并显示警示横幅。这是预期行为，不是 bug。
站点结构（站点在 src/，functions/ 在仓库根、部署时一并带上）：
src/
├── index.html ← 目录首页（按科目分组 + 搜索 + 访问量/点赞）
├── <topic>.html … ← 各知识点页（主题拼音 slug，按 data-subject 归科目）
├── 404.html / feedback.html
└── tokens.css / terms.js / sidebar.js
functions/
└── api/
├── messages.js ← /api/messages（留言板）
└── stats.js ← /api/stats（访问量 + 点赞，复用同一 KV）
messages.js 需要在 Cloudflare 控制台绑定一个变量名为 FEEDBACK_KV 的 KV namespace（完整部署步骤见 CLOUDFLARE-SETUP.md）。新增其他"需要后端"的功能（比如投票、打卡）时，复用同一套思路：functions/api/xxx.js + KV/D1 绑定 + 前端 fetch，不要引入额外的第三方服务或独立后端项目。
- 需要某个组件的完整、可直接粘贴的 CSS/HTML 代码 → 读
references/components.md。 - 想要一份可以
<link rel="stylesheet">直接引用的设计变量 + 基础组件样式文件 → 用references/tokens.css（也可以把内容内联进<style>以保持单文件可移植的规则）。