Slide Master Senior · 中老年大字号母版(封面 + 时间线)

# slide-master-senior · 使用说明

1920×1080 分页母版(封面页 + 时间线页),面向中老年/低视力读者的大字号排版,可翻页演示,也可打印成 PDF 一页一卡。

## 什么时候用

- 做**演示母版 / 讲义 / 可打印 PDF**:每页就是一张 1920×1080(16:9)页卡,`@page` 已按此尺寸设好。
- 读者**年龄偏大或字号敏感**:正文不缩到 18.5px 以下,内页标题 44–48px,行高 1.65–1.75。
- 页面要**一页一观点**:封面靠"右侧通高图 + 左双轨",行程靠时间轴,不用表格、不挤行。
- 需要**键盘/滚轮翻页**且没有浮动控件(打印时不会有按钮残留)。

## 怎么接入(可复制片段)

```html
<link rel="stylesheet" href="src/deck.css">
<!-- 每页一个 .page;.inner 是 1760×1000 的内容区(1000 法则) -->
<section class="page">
  <div class="inner">
    <div class="topbar"><span class="brand">演示标题</span><span class="pageno" data-deck-pageno>01 / 03</span></div>
    <h2 class="sec-title">内页标题 44–48px</h2>
    <!-- 正文区块 -->
    <div class="ribbon">页脚条 · 补充口径</div>
  </div>
</section>
<script src="src/deck.js" defer></script>
```

时间线页(禁表格,行程走时间轴):

```html
<ol class="timeline">
  <li><span class="t-day">第一日</span><span class="t-what">事项 ≤40 字</span><span class="t-note">时间注脚</span></li>
</ol>
```

- 页内不留时间线 `<table>`:日期/事项/注脚三栏用 flex 对齐,行随内容自适应。
- 页码槽位写 `data-deck-pageno`(或 `class="pageno"`),deck.js 会按实际页数同步成 `NN / TT`;不写 JS 时静态文案也正确。
- 想自己控制装配时机:`<html data-deck-autorun="off">` 后调 `window.initDeck({...})`。
- 打印:浏览器直接"打印 → 另存为 PDF",`@page` 已是 1920×1080、页边 0。

## 参数与文件表

| 文件 | 作用 |
|---|---|
| `src/deck.css` | 令牌 + 页卡 + 封面/时间线零件 + `@page` 打印规则;换色只改 `:root` |
| `src/deck.js` | 翻页(键盘/滚轮)、页码同步、窄视口等比缩放;无依赖,普通 `<script defer>` 即可 |
| `preview/index.html` | 两页母版活预览(双击即开、不依赖本地服务器) |
| `docs/usage.md` | 本文件:接入、口径、反模式 |

CSS 变量(`:root`,改这一个块就能换皮肤):

| 变量 | 默认 | 含义 |
|---|---|---|
| `--paper` | `#f6f1e7` | 页底(暖纸) |
| `--surface` | `#fffdf6` | 卡面 / 图位底 |
| `--ink` | `#071529` | 正文墨色 |
| `--ink-2` | `#334155` | **唯一的灰档**:次要文字、注脚、标签 |
| `--accent` | `#b34a32` | 强调色(眉标、日期、主按钮) |
| `--gold` | `#c9a45c` | 顶栏分隔线 |
| `--line` | `#e3d7bd` | 卡面描边 |
| `--page-w` / `--page-h` | `1920px` / `1080px` | 页卡尺寸(与 `@page` 一致) |
| `--budget-h` | `1000px` | 内容预算高(1000 法则) |
| `--deck-fit` | 由 deck.js 写 | 窄视口等比缩放比例(1 = 原尺寸) |

deck.js 选项(传给 `window.initDeck(options)`,或改 `DEFAULTS`):

| 选项 | 默认 | 含义 |
|---|---|---|
| `pages` | `".page"` | 页卡选择器 |
| `pageno` | `"[data-deck-pageno], .pageno"` | 页码槽位选择器 |
| `fit` | `true` | 按视口宽把 1920 缩到 ≤1(1440 视口下页卡仍是 16:9,无横向滚动) |
| `wheelStep` | `24` | 触发翻页的最小滚动量(`deltaY` 绝对值 ≥ 24) |
| `wheelLock` | `600` | 滚轮翻页锁(ms),防惯性连翻 |

键盘:`←` / `→` 翻页;另兼容 `↑` `↓` `PgUp` `PgDn` `空格`(Shift+空格 上一页)`Home` `End`。滚轮向下 = 下一页。`prefers-reduced-motion: reduce` 时不做平滑滚动,直接跳页。

## 排版硬结论(已实测,别随手改)

| 结论 | 取值 | 落地位置 |
|---|---|---|
| 正文字号 | **18.5–21px**(本包正文 21px,标签/注脚 19px) | `--fs-body` / `--fs-label` |
| 内页标题 | **44–48px**(本包 48px;封面主标 96px 属封面专属) | `--fs-h2` / `--fs-h1` |
| 行高 | **1.65–1.75**(本包 1.7;标题 1.2–1.25 不套此档) | `--lh-text` / `--lh-h2` |
| 每页高度预算 | **1000 法则**:内容区 1000px,上下各 40px 归 1080 | `--budget-h` / `.inner` |
| 时间线 | **禁表格**,行程走时间轴(`<ol class="timeline">` 三栏 flex) | §5 |
| 每栏字数 | **≤40 字**,全页 ≤7 行,超了拆页而不是缩字号 | — |
| 灰阶 | **只许 `#334155` 级**(即 `--ink-2`),不新增第二档灰 | `--ink-2` |
| 打印 | `@page { size: 1920px 1080px; margin: 0 }`,打印时 `.page` 走 `page-break-after: always`(同时 `break-inside: avoid`) | §6 |

强调色只用在小面积:眉标、日期、主按钮,合计面积 <10%;大面积铺色会冲掉"一页一观点"的层级。

## 换色

颜色全部集中在 `src/deck.css` 的 `:root`,三种换法任选:

1. **改默认值**:直接改 `:root` 里的 `--paper` / `--ink` / `--accent` / `--line` 等。
2. **项目级覆盖**(不动包文件,推荐):

```css
:root {
  --paper: #ffffff;
  --surface: #f7f8fa;
  --ink: #0d1b2a;
  --ink-2: #334155;   /* 灰档保持这一级:正文小字要 AA */
  --accent: #1f5f9e;  /* 换强调色:建议亮度接近原色(中等偏深) */
  --gold: #c8d2dc;
  --line: #e2e6ea;
}
```

3. **一块页卡单独换色**:`.page.theme-cool { --accent: #1f5f9e; }`(变量就近生效,无需重排版)。

换色只需要保证两条:正文与灰档对比度 ≥4.5:1(浅底上别把 `--ink-2` 调到浅灰),强调色面积仍 <10%。`--stage` 只是屏幕预览的舞台底,打印时会被清掉。

## 反模式

- **缩字号换行**:页面塞不下就拆页;不要把正文压到 18.5px 以下或行高压到 1.65 以下。
- **时间线用表格**:`<table>` 会在打印/窄视口下错行,行程一律用 `<ol class="timeline">`。
- **一页多个观点**:每页一个主张;时间线一页 ≤7 行,每栏 ≤40 字。
- **引入第二档灰**:只留 `--ink-2`(`#334155` 级);用 `opacity` 造灰会让文字掉到 AA 以下,也会被打印淡化。
- **依赖本地服务器**:`preview/index.html` 用相对路径,必须双击即开、不经任何 http 服务;不要写 `fetch()` 或绝对路径。
- **自己写翻页控件**:翻页交给 `src/deck.js`(键盘 + 滚轮 + 页码同步),页面上不放浮动按钮/悬浮面板,否则打印会带上。
- **在组件里写死颜色或字号**:一律走 §1 令牌,方便整本换皮。
- **给中文标题加斜体/伪下划线**:CJK 语义不支持,层级用字号与留白。

## 来源与许可

- 版权与归属见包根 `pack.json.attribution`;本包为自产整理,许可 **MIT**。
- 原始母版来自内部设计演示,已移除演示文案与内部标记,品牌位改为中性占位(`Deck Master · 母版演示`),占位图需替换为自有素材。
- 预览页中的行程文案为中性示例数据,不指向任何真实项目或客户。

---
name: slide-master-senior
description: Build 1920×1080 slide masters (cover page + timeline page) for senior / low-vision audiences. Use when a task needs a presentation deck, lecture handout, or print-to-PDF page set with 18.5–21px body type, 44–48px page titles, 1.65–1.75 line-height, a 1000px content height budget, keyboard/wheel paging with page-number sync, and no table-based timelines.
---

# slide-master-senior · 中老年大字号 Slide 母版

一页 = 一张 1920×1080 页卡。排版配方是"大字号 + 1000 高度预算 + 一页一观点",翻页交给 `src/deck.js`,打印成 PDF 由 `src/deck.css` 的 `@page` 兜住。

## When to use

- 做**演示母版 / 讲义 / 可打印 PDF**:每页 1920×1080(16:9),`@page` 与 `.page` 同尺寸,打印时一页一卡。
- 读者**年龄偏大 / 字号敏感**:正文 18.5–21px,内页标题 44–48px,行高 1.65–1.75,页面不塞满。
- 需要**封面页**(右侧通高图位 + 左双轨)或**行程类时间线页**(禁表格,三栏时间轴)。
- 要**键盘翻页 + 页码同步**且页面上不放任何浮动控件(打印不残留)。

## When not to use

- 密集数据页 / 图表墙(一页塞 5 个观点、需要小字表格)——用数据向主题包。
- 需要转场动画、视频、WebGL 的营销 Demo——用动效类包。
- 手机竖屏长页 / 响应式营销页:本包是固定 1920×1080 页卡的等比缩放,不是流式布局。

## Default

| 项 | 值 |
|---|---|
| 页卡 | 1920×1080(16:9),`.inner` = 1760×1000 |
| 正文 / 标签 | 21px / 19px |
| 内页标题 / 封面主标 | 48px / 96px |
| 行高 | 1.7(标题 1.2–1.25) |
| 页底 / 墨色 / 灰档 / 强调 | `#f6f1e7` / `#071529` / `#334155` / `#b34a32` |
| 翻页 | ← / →(兼容 ↑↓ PgUp PgDn 空格 Home/End)+ 滚轮 |
| 打印 | `@page { size: 1920px 1080px; margin: 0 }`,`.page` 走 `page-break-after: always` |

## Files

| path | use |
|---|---|
| `src/deck.css` | 令牌(:root)+ 页卡 + 顶栏/眉标/按钮/页脚条 + 封面页 + 时间线页 + `@page` 打印规则 |
| `src/deck.js` | 翻页(键盘/滚轮)、页码同步(`NN / TT`)、窄视口等比缩放(`--deck-fit`)、reduced-motion 直接跳页;无依赖 |
| `preview/index.html` | 两页母版活预览(封面 + 时间线),双击即开、不经任何 http 服务 |
| `docs/usage.md` | 接入片段、变量/选项表、排版硬结论、换色、反模式 |
| `scripts/assert_tokens.py` | 断言:pack.json / 引用可达 / src 非空 / 文档口径 / 禁用词 |

## Agent apply steps

1. 拷 `src/deck.css` 与 `src/deck.js` 进项目(或整包复制),页面按 `preview/index.html` 的结构搭。
2. 每页写 `<section class="page"><div class="inner">…</div></section>`;内容区**只用 1000px 预算**,塞不下就拆页。
3. 顶栏两件套:左侧 `brand` 文案,右侧页码槽位 `<span class="pageno" data-deck-pageno>01 / 03</span>`(deck.js 会同步成实际页数)。
4. 封面页用 `.cover-grid`(左 `.cover-left` 双轨 + 右 `.cover-right` 通高图位);行程页用 `<ol class="timeline">`,每条 `li` 三栏:`.t-day` / `.t-what` / `.t-note`。
5. 引 `<script src="src/deck.js" defer></script>` 即自动装配;要自己控时机就 `<html data-deck-autorun="off">` + `window.initDeck()`。
6. 换色只改 `:root` 的令牌(见 `docs/usage.md` §换色),不要改组件里的写死值。
7. 自检:`python scripts/assert_tokens.py`;浏览器里按 ← / → 与滚轮确认翻页与页码同步。

## Hard rules

- 正文 **18.5–21px** 下限;标题 **44–48px**;行高 **1.65–1.75**。塞不下拆页,不缩字号。
- **1000 法则**:`.inner` 固定 1000px 高,上下各 40px 归 1080;超出即溢出裁切。
- 时间线**禁表格**;每栏 **≤40 字**,一页 ≤7 行。
- 灰**只许 `#334155` 级**(`--ink-2`)一档;不新增灰、不用 opacity 造灰。
- 强调色面积 **<10%**(眉标/日期/主按钮);`--accent` 同时满足 6 位 hex 与中等偏深亮度。
- 颜色与字号全走 `:root` 令牌,组件里不写死 hex。
- 页面上**不放浮动控件/悬浮面板**;打印规则保持 `@page 1920x1080` + `.page { page-break-after: always }`。
- 预览必须双击即开、不经任何 http 服务:相对路径引用,禁 `fetch()`、禁绝对路径、禁外部 CDN。
- `prefers-reduced-motion: reduce` 下翻页用 `instant`(不做平滑滚动)。
- 消费后必须在项目 `design-lock.json` 记 `assets[]`(`pack`/`version`/`sha`)。