关于这个模板
TrueEarth 是面向教育或社区品牌的落地页参考，它背后的需求简报是一份完整的构建规格书，而不是情绪板。配色是 #FFFFFF 打底、#111417 给文字、深蓝色 #0B2A3A 承担强调色，字体用 Plus Jakarta Sans。交付形式是一个自包含的 HTML 文件，收录于 1920x1422，所以画幅在任何一行代码写下去之前就已经定好。动作被收进72ms 的过渡、cubic-bezier(.16,1.3,1)、一段循环视频打底里。如果你要给别人提一版教育落地页的需求，就从这个构图起步，把题材换掉。
适合谁
- 这个落地页面向的是已经熟悉一个自包含的 HTML 文件、只差把 cubic-bezier(.16,1.3,1) 缓动曲线写下来的团队。
- 正在做教育或社区品牌落地页、需要在报价发出去之前把一个自包含的 HTML 文件落到纸面上的团队。
- 在交接说明里写上 360px 断点，下一次构建就不必再从页面里倒推。
包含哪些内容
- 一行到底，不做抽屉. 导航条是整套构图里最安静的部分：字标、一短行链接和一个 #0B2A3A 操作，全部压在需求简报最小的字阶上。标签短到能在 360px 下一行放下，当前项用字重标出，而不是加一个胶囊底。
- 素材垫在文字后面. 素材是一段 6.9s 的片段，按 cover 裁进 1920x1422 的画幅，任何宽度下都不会出现黑边。循环短到 6.9s，眼睛会把它读成肌理，而不是一条时间轴。
- 尺寸写在需求简报里，不在一套比例里. 版式走的是绝对值，不是比例：字号从 12px 到 16px、100vh 高的板块、2 栏栅格、2px 圆角。因为数值是固定的，替换只改样子，不改节奏。
- 结构交给卡片. 构图最终落成 2 面板，每块只承载一个主张，而不是一段话。整个栅格共用同一种圆角处理（2px），面板才不会被读成一个个独立组件。
动效与交互
交互只落在控件上
每个可交互元素只做一件事（悬停态只给按钮和链接，而不是每张卡片），状态才因此可预期。状态用的是页面自己的配色，而不是组件库的默认值。这份参考在 1920x1422 下收录。
附了一条更安静的分支
动效层带一个开关。在 prefers-reduced-motion 下入场动画和循环视频会被去掉，其他一切留在原位。关掉动效后布局完全一样，所以没有东西依赖动画。这份参考在 1920x1422 下收录。
把 TrueEarth 当规格书读
截图告诉你页面长什么样，需求简报告诉你为什么。字号从 12px 到 16px、100vh 高的板块、2 栏栅格、2px 圆角、22px 间距把这两者之间的差补上。这个落地页里没有任何一处依赖默认值。
这个落地页背后的时序
这里的每一次过渡都挂着一个数字。所以72ms 的过渡、6.9s 的循环视频、遮罩式逐行揭示可以按值逐个移植，而不用靠手感重调。这个落地页里没有为动而动的动画。
这个落地页背后的顺序
一屏、一个行动，中间是导航、标题、公告徽标、数据行、卡片栅格。需求简报把这个顺序钉死，而不是把首屏交给一摞板块自己决定。教育读者先看到主张，再看到选项。这份参考在 1920x1422 下收录。
常见问题
TrueEarth 背后的提示词到底有多长？
简报是从页面上收录下来的，共 23,498 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
TrueEarth 有多少地方依赖一个自包含的 HTML 文件？
TrueEarth 是用一个自包含的 HTML 文件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
为什么 TrueEarth 的提示词没有直接印在这里？
页面上引用的内容全部出自收录的 23,498 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
