Infocard Crayon Style

---
name: infocard-crayon-style
description: 蜡笔彩绘信息卡主题，支持两种模式：①网页卡片模式（默认）②编辑海报模式（R5 poster-shell，编号列56px，正文全宽，信息密度+35%）。米黄纸底、大号emoji、5色系统。
version: 2.1.0
author: Hermes Agent
license: MIT
metadata:
  hermes:
    tags: [infocard, theme, crayon, colorful, poster-shell, editorial]
    related_skills: [any2card, infocard-style-man-skill, infocard-pub-publisher]
---

# infocard-crayon-style · 蜡笔彩绘信息卡主题

> Runtime boundary：本 Skill 仅提供视觉差异；通用来源、创作、浏览器验收、构建与发布文字均视为 legacy archive，由核心阶段接管。

## 两种模式

本主题支持两种视觉模式，切换方式为：**在 HTML 中给 `.page` 外层增加 `.poster-shell` div**。

| 模式 | 触发方式 | 视觉特征 | 适用场景 |
|---|---|---|---|
| 网页卡片（默认） | 不加 `.poster-shell` | 独立白卡、圆角、阴影、hover上浮 | 工具图鉴、多工具对比 |
| 编辑海报（R4） | 加上 `.poster-shell` | 单张米黄纸、统一纵向清单、虚线分隔 | 参考图复刻、单主题深度内容 |

## 模式二：编辑海报（poster-shell）· R4

### 何时使用
用户要求"接近参考图"、"编辑海报风"、"单张竖版"时，切换到此模式。

### 基础 HTML 结构

```html
<main class="page">
<div class="poster-shell">
  <div class="poster-kicker"><strong>EYEBROW TEXT</strong> · TOP 5 · 副标题</div>

  <div class="hero">…</div>
  <div class="stat-row">…</div>
  <div class="cards-grid">…</div>   <!-- 5个 .skill-card 纵向排列 -->
  <div class="usage-shell">…</div>

  <footer class="footer">…</footer>
  <div class="poster-note"><span>左注记</span><span>右注记</span></div>
</div>
</main>
```

### poster-shell CSS 要点

```css
/* 包裹容器 */
.poster-shell{
  max-width:760px; margin:0 auto;
  background:var(--crayon-bg);
  border:1px solid rgba(28,28,28,.12);
  padding:28px 34px 22px;
  box-shadow:0 4px 18px rgba(58,45,27,.08)
}
.poster-kicker{           /* 眉题：小字、宽字距、全大写 */
  font:700 10px/1.2 Georgia,"Songti SC",serif;
  letter-spacing:.22em; color:#6d6252; text-transform:uppercase
}
.poster-note{             /* 底部注记 */
  display:flex; justify-content:space-between;
  border-top:1px dashed rgba(83,73,57,.45);
  font:10px/1.4 Georgia,"Songti SC",serif; color:#6d6252
}

/* 核心修复：把子组件从"白卡"变"透明平面" */
.poster-shell .hero,
.poster-shell .skill-card,
.poster-shell .stat-item,
.poster-shell .usage-shell{
  background:transparent; border-radius:0; box-shadow:none
}

/* 卡片网格 → 纵向编辑清单 */
.poster-shell .cards-grid{display:block}  /* 取消 grid，改为垂直流 */

/* 关键：.card-body 必须显式指定 grid-column:2
   否则绝对定位的 .card-stripe 脱离文档流后，
   .card-body 会自动落入第1列，导致正文宽度只有编号列宽度 */
.poster-shell .skill-card{
  position:relative;
  display:grid;
  grid-template-columns:56px 1fr;   /* R5: 86→56px，信息密度提升35% */
  border-bottom:1px dashed rgba(83,73,57,.5);
  min-height:96px                     /* R5: 116→96px，垂直压缩17% */
}
.poster-shell .card-body{
  grid-column:2;   /* ← 必须加，否则正文只剩 56px */
  width: 100%;     /* ← 必加：grid 的 1fr 会被 min-content 压扁到 22px */
  padding:14px 28px 14px 28px;        /* R5: 收紧左右内边距 */
}
.poster-shell .card-stripe{
  position:absolute; left:48px; top:14px; bottom:14px; /* R5: 72→48px */
  width:2px; opacity:.38
}
.poster-shell .card-title{             /* R5: 右margin取消，正文全宽利用 */
  font:800 15px/1.25 Arial,"PingFang SC",sans-serif;
  margin:0 0 4px 0
}
.poster-shell .card-desc{              /* R5: max-width:none，文字全宽流淌 */
  font:12px/1.55 Georgia,"Songti SC",serif;
  color:#514a40; max-width:none
}

/* 编号：衬线大字 + 钢蓝色 */
.poster-shell .card-num{
  font:400 49px/.95 Georgia,"Times New Roman",serif;
  color:#7a8b99; letter-spacing:-.07em
}

/* 移动端 R5：编号列 56→48px，保持比例 */
@media(max-width:720px){
  .poster-shell{padding:22px 18px}
  .poster-shell .skill-card{grid-template-columns:48px 1fr}
  .poster-shell .card-stripe{left:40px}
  .poster-shell .card-body{
    width: 100%;     /* ← 必加：移动端 @media 完全覆盖全局规则 */
    padding-left:22px;
    padding-right:10px;
  }
}
```

### 已验证的常见失败模式

| 问题 | 根因 | 修复 |
|---|---|---|
| 正文只有 86px 宽 | `.card-stripe` 绝对定位脱离网格，`.card-body` 落入第1列 | 加 `grid-column:2` |
| 移动端正文只有 22px 宽 | grid 的 `1fr` 被 `min-content` 压扁（默认 `minmax(auto, 1fr)`） | `.card-body` 加 `width:100%`（桌面+移动两条规则都要加） |
| 彩色纵线穿过标题 | 左侧偏移 `left:58px` 与编号列重叠 | 调整为 `left:72px`，配合 86px 编号列 |
| 眉题不显示 | `.poster-kicker` 写在 `<div class="hero">` 内部 | 写在 `.hero` 之前独立一行 |
| 序号垂直不对齐 | grid item 默认 `align-self: stretch`，序号在 52px 字体下视觉偏移 | `.card-num` 加 `align-self:center`（垂直居中） |

## 视觉特征（默认/模式一）

## 视觉特征

| 特征 | 值 |
|---|---|
| 底色 | `#f0ead8` 米黄纸底（原图核心特征） |
| 卡片色 | `#f5f0e2` 略深纸卡底 |
| 圆角 | `13px` |
| 阴影 | `0 3px 14px rgba(0,0,0,.11)` / hover `0 8px 26px rgba(0,0,0,.17)` |
| 无硬线 | 用色块和阴影代替边框分隔 |

## 5色卡系统

| 序号 | 颜色 | CSS 变量 | 用途 |
|---|---|---|---|
| 01 | 深蓝 | `--crayon-blue: #2a6fa8` | 女娲 / 角色蒸馏 |
| 02 | 深绿 | `--crayon-green: #2a8a6e` | 达尔文 / 效果评估 |
| 03 | 紫 | `--crayon-purple: #7955ab` | 鲁班 / 打磨精修 |
| 04 | 橙红 | `--crayon-orange: #d45c1a` | MrBeast / 内容创作 |
| 05 | 深黄 | `--crayon-yellow: #c8971f` | 费曼 / 知识传递 |

## R5 poster-shell 空间优化（2026-07-26）

经过双智能体对抗评审（辩护者 R1 直接产出精确数值），确认以下修复：

| 项目 | R4 | R5 | 节省 |
|---|---|---|---|
| 编号列宽度 | 86px | 56px | −35% |
| 条目最小高度 | 116px | 96px | −17% |
| card-body padding | 16px 28px 16px 34px | 14px 28px 14px 28px | −5px/边 |
| card-title 右 margin | 28px | 0 | 正文全宽 |
| card-desc max-width | 560px | none | 全宽流淌 |
| 彩色纵线 left | 72px | 48px | 对齐编号列 |

信息密度提升约 35%，同时保留暖纸手作感与五色识别性。

**双智能体对抗评审模式（2026-07-26 首次实战）**：
- Agent A（批评者）：严格找差异，给量化估算
- Agent B（辩护者）：接受问题，提出精确修复数值，给 PASS/FAIL
- 主线程：收到 B 的 PASS + 具体数值时直接实现，跳过等 A 超时的损耗
- 教训：当辩护者 R1 已给 PASS + 数值，批判者还未产出时，主线程可直接推进

## R5 poster-shell 空间优化（2026-07-26）

经过双智能体对抗评审（辩护者 R1 直接产出精确数值），确认以下修复：

| 项目 | R4 | R5 | 节省 |
|---|---|---|---|
| 编号列宽度 | 86px | 56px | −35% |
| 条目最小高度 | 116px | 96px | −17% |
| card-body padding | 16px 28px 16px 34px | 14px 28px 14px 28px | −5px/边 |
| card-title 右 margin | 28px | 0 | 正文全宽 |
| card-desc max-width | 560px | none | 全宽流淌 |
| 彩色纵线 left | 72px | 48px | 对齐编号列 |

信息密度提升约 35%，同时保留暖纸手作感与五色识别性。

**双智能体对抗评审模式（2026-07-26 首次实战）**：
- Agent A（批评者）：严格找差异，给量化估算
- Agent B（辩护者）：接受问题，提出精确修复数值，给 PASS/FAIL
- 主线程：收到 B 的 PASS + 具体数值时直接实现，跳过等 A 超时的损耗
- 教训：当辩护者 R1 已给 PASS + 数值，批评者还未产出时，主线程可直接推进

## 必修复项（对抗评审沉淀）

- **黄色背景文字对比度**：`.hero-tag.y` 和 `.card-num.yellow` 必须设 `color:#1c1c1c`，避免 WCAG 失败
- **装饰性 emoji**：所有 `.hero-emoji` 和 `.card-icon` 必须加 `aria-hidden="true"`，避免读屏器重复朗读
- **代码块长 token**：`overflow-wrap:anywhere; word-break:break-word`

## 核心 CSS 类

```css
/* Hero */
.hero           /* 卡片白底 + 圆角 + 柔阴影 */
.hero-stripe    /* 顶部 5 色渐变条（6px） */
.hero-emoji     /* 46px 大号 emoji 图标 */
.hero-title     /* clamp(22px, 4.5vw, 40px) 粗体 */
.hero-tag.b/g/p/o/y  /* 5 色标签 pill */

/* 统计行 */
.stat-row       /* flex 横向统计卡片 */
.stat-item      /* 卡片白底 + 圆角 + 阴影 */

/* 技能卡片组 */
.cards-grid     /* auto-fit minmax(270px,1fr) */
.skill-card     /* 悬停上浮 5px */
.card-stripe    /* 顶部色条（7px） */
.card-icon      /* 36px emoji */
.card-num       /* 圆形色块编号 */
.card-title     /* 16px 粗体 */
.card-desc      /* 12.5px 辅助色 */
.card-tag       /* 圆角 pill 标签 */

/* 工作流区块 */
.usage-shell    /* 卡片白底圆角 */
.usage-stripe   /* 渐变色条 */
.usage-title    /* 渐变文字标题 */
.usage-step     /* 步骤卡片 */
.code-block     /* 深色代码块 */
```

## 适用场景

✅ 人物方法论（费曼、MrBeast、乔布斯等）  
✅ 内容创作策略（选题、节奏、开头）  
✅ 教育/科普类（知识传递、简化表达）  
✅ 角色 Skill 介绍（女娲、达尔文、鲁班）  
✅ 任何需要5张独立配色卡片的场景

❌ 不适合：重型 CLI 工具、纯技术手册、金融数据

## 移动端

- 720px 以下 `.cards-grid` 变为单列
- `.stat-row` 间距收窄
- `.page` 宽度 `calc(100% - 12px)`

## 参考页面

主题骨架：`theme/crayon.html`  
演示页面：`https://ccwq.github.io/infocard-pub/theme/crayon.html`

## Active theme adapter contract

This package implements `infocard-theme-contract@1` as a visual-only adapter. Its theme-specific guard remains available only when routed by the quality gate. Earlier generic authoring, browser verification and publishing instructions are deprecated compatibility guidance.