riso-product

riso-product — riso 印刷质感页面

把 risograph 油印机的"两到三色叠印 + 半调点 + 奶油纸"翻译成网页。骨架来自 NOIRLAB 声学家居品牌的设计原型（见 reference.html），但这份 skill 给的是气质和积木，不是模板。

怎么用这份 skill

1. 看气质：先 Read reference.html，理解颜色叠加方式、阴影方向、字体层级、半调点疏密。这一步只是为了"知道对的样子长什么样"。
2. 挑配色：从下面 7 套预设里选一套（或按用户描述自由调），不要默认用 reference 的粉+蓝。
3. 挑骨架：从下面 4 个版式原型里选一个（或混搭）；禁止整页 clone reference 的 home + 4 详情页 + 故事页结构。
4. 抄积木：CSS 片段（halftone、paper、neobrutalism shadow、riso shade、错位标题阴影）可以直接拿用。
5. 过红线：写完对照"必须 / 禁止"清单自检。

视觉 DNA — 这些不能丢

少了任意一条，就不再是 riso：

1. 奶油纸底：背景不能是纯白也不能是冷灰，必须带温暖的米黄/燕麦/亚麻色（明度 88–94，饱和度 8–18）
2. 半调点叠印：全局 body::after 用 radial-gradient(circle at 1px 1px, ...) 5–8px 网格、mix-blend-mode: multiply、opacity 30–55%。色块大区域上再叠一层不同色的更大颗粒（8–12px）
3. 两到三色叠印 hero：hero / 大色块用 2-3 个 radial-gradient ellipse 不同位置不同色（粉 + 蓝 + 黄 是经典三色组合，但可以全替），mix-blend-mode: multiply，让色彩在交叠处自然产生第三色
4. 隷書/毛笔体大标题 + 错位色阴影：text-shadow: 4px 4px 0 var(--accent-a), 8px 8px 0 var(--accent-b)，模拟丝网印刷套印错位的物理瑕疵
5. Neobrutalism 硬阴影：按钮/卡片用 box-shadow: Npx Npx 0 var(--ink)（N=4–8），hover 偏移到 0，元素位移 translate(Npx, Npx)，2px solid 实色边框

必须 / 禁止（写完自检）

必须：

• 至少 1 处文字带错位色阴影
• 全局有可见但不糊的半调点纸纹
• 至少 1 个 hero / 大色块用了 2 色以上 radial gradient multiply 叠加
• 按钮/卡片至少有 1 套是硬阴影 + hover 偏移
• 标题字体是隷書/毛笔体或楷书（参考 --hanli 字体栈），不是 PingFang / Source Han Sans
• 颜色饱和但不刺，paper 底色降低任何强色的塑料感

禁止：

• 不要把 reference.html 的 <section> 结构整段抄（公告条 → header → hero → USP 四列 → feature → cat-grid → material → process → gallery → counters → testi → faq → news → footer + 4 个详情页 + 1 个故事页）
• 不要默认粉 #FF3F8E + 蓝 #2240FF — 那就是 NOIRLAB 的指纹
• 不要黑金 / 玻璃拟态 / 深空渐变 / emoji / 3D 塑料贴纸
• 不要给图片上一层重的灰色 overlay（半调点要轻、油墨要透）
• 半调点不要做成同色同尺寸，会显得是 CSS noise；至少两层不同颗粒不同色
• 不要照抄 NOIRLAB 品牌名 / 林见安 / 同济 / 28dB 这些 NOIRLAB 专属文案

七套配色预设（任选一套，禁止默认）

每套都满足"低饱和奶油底 + 两强色 + 一辅色（可选)"的结构。复制到 :root。

/* 1. 热粉 + 联邦蓝（NOIRLAB 原作 — 慎用，会撞脸）*/
--paper:#F1EBDA; --ink:#1B1A18;  --a:#FF3F8E; --b:#2240FF; --c:#FFD23A;

/* 2. 薄荷 + 珊瑚 — 清新、女性向、护肤/茶饮/订阅盒 */
--paper:#EFEEE5; --ink:#1F2A28;  --a:#FF6B5A; --b:#2BB7A1; --c:#FFC857;

/* 3. 柠檬 + 紫电 — 高冲击、潮流、运动鞋/电子/年轻品牌 */
--paper:#F4EFE4; --ink:#16151A;  --a:#F4E04D; --b:#6A2EE8; --c:#FF4D8D;

/* 4. 橄榄 + 玫瑰 — 沉稳、内敛、茶/酒/家居/独立刊物 */
--paper:#EFE9D8; --ink:#1E1C18;  --a:#C24A6C; --b:#5C6E2C; --c:#D9A24A;

/* 5. 暗夜 + 荧光 — 深色底 riso，反向操作 */
--paper:#1B1A18; --ink:#F1EBDA;  --a:#FF3F8E; --b:#4DE0C7; --c:#FFD23A;
/* 注意：深底时半调点要用浅色、screen 混合 */

/* 6. 天蓝 + 芥末 — 户外、咖啡、慢生活、文具 */
--paper:#EDE8D8; --ink:#1B1B1B;  --a:#3D89C7; --b:#D6A92E; --c:#E0625E;

/* 7. 赤陶 + 鸭蓝 — 工艺/手作/陶艺/民艺 */
--paper:#F0E7D5; --ink:#1F1A16;  --a:#C25538; --b:#2F6B7D; --c:#E4B83B;