新拟态俱乐部金融科技
一个会员专属金融网站，由两种柔软材质雕刻而成：深色页面及其上嵌入的浅色岛屿（卡片、面板、硬币、手机、FAQ栏目）。每种材质内部，按钮和凹槽要么凸出表面，要么被压入其中；一个跟随光标的光源让浮雕效果变得真实。浅色主题下两者互换：浅色页面，深色岛屿。整体基调安静而专属：硕大的小写衬线标题，少量正文，大量留白。
参考构建文件为 example/index.html（Atlasio Reserve，一个虚构的卡俱乐部，中英文/土耳其语，深色和浅色浮雕）。详细代码见 references/components.md；screenshots/ 展示了桌面端、移动端、两种主题以及土耳其语版本的所有章节。
如果用户指定了参考站点，仅采纳其结构和氛围。切勿复制其渲染图、产品名称、文案或标志。
1. 设计前准备
- 收集真实卖点：一句话承诺、适用人群、3-5个产品特性、奖励、安全声明、评价或会员数量（仅当客户能提供证明时）、常见问题、应用链接。其他内容标记为示例。
- 切勿虚构安全认证、利率、费用、审批规则或信用分影响。金融文案受监管；请留出占位符说明必须填写的内容。
- 选择唯一一个激活状态使用青柠LED（截止日期、已收款、卡片激活）。强调色不得出现在除主按钮文本和焦点环之外的其他位置。
2. 视觉基因
| 元素 | 规则 |
|---|---|
| 材质 | 两种。页面：深色 #272a31（高光 #2e3139，阴影 #212329）。岛屿（.alt）：浅色 #e6e9ee（高光 #f1f3f6，阴影 #d7dbe1）。浅色主题下两者互换。同一种材质内部的所有表面颜色相同。绝不使用纯黑或纯白：阴影需要在两侧都有空间。 |
| 岛屿 | 卡片、故事面板、加入面板、手机、轨道瓷砖、硬币、拨盘、评分瓷砖、FAQ栏目、页脚推广、应用徽章。页眉、英雄文案、统计凹槽、标题和页脚保留在页面材质上。目标是在每个屏幕上大致保持一半浅色、一半深色。 |
| 浮雕 | 凸起 = X Y 24px 深色, -X -Y 24px 浅色；凹陷 = 同样的组合 inset。深色材质 rgba(0,0,0,.55) / rgba(255,255,255,.06)；浅色材质 rgba(146,156,172,.75) / rgba(255,255,255,.95)。小变体使用一半偏移量。凸起的旋钮和芯片添加 linear-gradient(145deg, 高光, 阴影)。岛屿自身的外阴影投射在页面上，因此它使用页面对 (--island)，绝不使用自己的白色高光（否则会在深色背景上产生光晕）。 |
| 光源 | 偏移量来自 --lx/--ly（单位向量）。默认左上角光源 (.7071, .7071)；JS 将其转向光标。 |
| 文本 | 每种材质都有自己的墨水颜色：深色上为 #f4f5f7 / #c9cdd5 / #959aa4，浅色上为 #191c22 / #3c414c / #5f6571。文本绝不能使用低对比度：浮雕效果用于表面，而非需要阅读的文字。 |
| 强调色 | 青柠LED：深色材质上为 #b9f26b，浅色材质上为 #3e8a1d，附带轻微发光。功能凹槽可各容纳一个饱和发光（粉色、紫色、绿色、蓝色），透明度约为38%。 |
| 展示字体 | Fraunces 700，opsz 144，letter-spacing:-.035em，小写，行高 .92（Denton 是付费的原始外观）。 |
| 正文/UI | Urbanist 400–700（Gilroy 效果）。眉毛文字 13px 700 大写 letter-spacing:.32em。按钮 13px 700 大写 .18em。 |
| 形状 | 按钮和切换开关使用药丸形；面板圆角 20–44px；图标凹槽、硬币和拨盘使用圆形。无边框，无线条。 |
| 镌刻 | 与表面颜色相同 + text-shadow: 1px 1px 1px 浅色, -1px -1px 1px 深色。仅用于装饰（卡号、未读词语）。 |
3. 章节模式
- 页眉 – 凸起的圆形字母组合 + 衬线字标；凹陷的药丸带LED（"new · …"）；凹陷的语言轨道，激活段凸起；圆形凸起的主题按钮。粘性；滚动后获得柔和的投影。
- 英雄区 – 左：眉毛文字，两行小写衬线标题，简短导语，一个主要（青柠文本）和一个普通药丸按钮，两个凹陷的统计凹槽标记为"示例"。右：同心浮雕环（凸起、凹陷、凸起），上面放着一张浮雕卡片（凸起芯片、镌刻号码、LED），倾斜 -8° 并跟随鼠标。
- 故事 – 一个大凸起面板；眉毛文字（"MEMBERSHIP IS EARNED."）；一个衬线段落，其词语最初是镌刻的，随着读者滚动逐个点亮。
- 应用 – 一个凸起的手机，带有凹陷屏幕，从凹陷槽中升起；内部有一张凸起的账单卡（LED截止日期、金额、支付按钮）和两个列表行。下方是居中的衬线标题和导语。
- 卡片 – 分割布局：左侧文案；五张凸起的卡片板在章节滚动进入时从一个共同枢轴点扇形展开；前板携带LED状态。
- 支付轨道 – 眉毛文字 + 标题；凸起的圆形上一个/下一个按钮；水平滚动吸附轨道，由凸起瓷砖组成：凹陷图标凹槽 + 大写标签，两行标题，小药丸按钮，一个凹陷的"展示"凹槽，带有彩色发光和一个浮雕对象（虚线手机、芯片网格、非接触式环、分割条）。
- 奖励 – 居中标题；3×2 网格的凸起硬币，缓慢浮动；按压一枚硬币使其下沉并显示一个示例奖励。
- 安全 – 分割布局：凸起拨盘，带有60个刻度，随滚动旋转，围绕一个带有青柠锁的凸起旋钮；眉毛文字和一个大型无衬线段落，由移动聚光灯照亮（跟随指针，否则自行漂移）。
- 证明 – 标题 + 两个凸起评分瓷砖：衬线数字，
/5，一个凹陷轨道，带有青柠填充。除非真实，否则标记为示例。 - 加入 – 凸起面板：标题（"THE DOOR OPENS FOR SOME."），导语，一个凹陷的滑动加入轨道，带有凸起旋钮；右侧是一个凹陷凹槽，内含凸起的二维码瓷砖。
- FAQ – 宽间距居中标签；凸起的
<details>栏，打开时变为凹陷。 - 页脚 – 一个凹陷面板，包含标志、两列链接和一个凸起推广卡片；下方是一行小字。
- 浮动徽章 – 右下角凸起的"获取应用"，带有小二维码；在加入章节可见且窗口宽度低于900px时隐藏。
4. 标志性交互
- 光标光源 – 在
pointermove事件上，将阴影向量设置为normalize(中心 − 光标)并在requestAnimationFrame中使--lx/--ly平滑过渡。每个阴影都基于这些变量构建，因此整个页面同时重新照明。仅适用于(pointer:fine)；减少动效时固定为左上角光源。 - 镌刻 → 点亮词语 – 将段落拆分为
<span class="w">；点亮前progress × count个词语。语言切换后重新拆分。减少动效：全部点亮。 - 卡片倾斜 – 根据指针在舞台上的位置，
rotateX/rotateY最多 ±11°；离开时恢复平坦。 - 手机升起 / 卡片扇形 / 拨盘 – 各自读取一个滚动进度值 (0→1) 并写入一个CSS变量 (
--p,--fan,--rot)。减少动效：最终状态。 - 按压状态 – 每个可点击的浮雕元素在
:active或aria-pressed="true"时，将其外阴影切换为内阴影对，并缩放至 .985。 - 聚光灯文本 – 一个重复的
aria-hidden全白段落，通过--mx/--my位置的径向渐变遮罩。 - 滑动加入 – 指针捕获的旋钮；释放时超过90%完成，否则弹回；方向键和回车键有效；旋钮具有
role="slider"和aria-valuenow。除非客户连接，否则绝不提交任何内容。 - 主题切换 – 翻转
<html>上的data-theme；仅 token 发生变化。
5. 构建规则
- 独立HTML，包含 doctype/charset/viewport；仅使用 Google Fonts；无需图片（所有浮雕效果由CSS实现，二维码是装饰性 Canvas 图案，标记为示例）。
- 将两种材质定义为 token 集。页面集位于
:root上；相反集位于.alt上（在[data-theme="light"]下互换）。在:root, .alt上重新构建--raise --raise-sm --inset --inset-sm，以便每个岛屿使用自己的配对；仅在:root上声明--island/--island-sm，以便岛屿从页面继承其外部阴影。组件不得手动编写阴影。 - 任何在JS中读取颜色的内容（二维码Canvas）必须从其自身的元素中读取，而不是从
:root中读取。 - 每个投射阴影的元素都位于
background: var(--bg)上。溢出的容器（轨道）需要约30px的内边距，以免阴影被裁剪。 - 无障碍性：文本对比度 ≥ 4.5:1，无论浮雕效果如何；可见的青柠焦点环；按压状态也通过
aria-pressed暴露；装饰性浮雕标记为aria-hidden。 prefers-reduced-motion：无光源跟随、无倾斜、无浮动、所有滚动片段处于最终状态、关闭聚光灯。- 移动端 (< 900px)：网格堆叠，徽章隐藏；(< 640px) 页眉药丸隐藏，硬币变为2列。
6. 撰写文案
- 小写标题，简短且陈述性强，最多两行："built for people who pay on time"。
- 眉毛文字为带句号的大写完整句子："MEMBERSHIP IS EARNED."
- 正文平实具体。无夸大之词，无虚构数字；示例内容标注清楚。
- 翻译所有字符串，包括JS编写的部分（硬币、滑块结果、主题标签）。
7. 完成清单
- 两种材质，每个屏幕大致平衡；无边框；每个阴影均来自 token。
- 深色页面上浅色岛屿周围无白色光晕（外阴影使用
--island）。 - 移动鼠标会改变页面上的所有阴影；触摸和减少动效获得固定光源。
- 所有可读文本在两种主题下均通过对比度测试；镌刻仅用于装饰。
- 轨道阴影未被裁剪；在390px宽度下无水平滚动。
- 评分、会员数、利率和安全声明为真实或已标注；无第三方标志或渲染图。
- 语言切换后无源语言文本残留。
- 截图尺寸为1440×900和390×844（
node scripts/screenshots.mjs example/index.html screenshots；脚本会移动虚拟鼠标以显示光源方向，并捕获两种主题）。