关于这个模板
Heritage Grove 是一个只靠一份书面简报搭出来的电商页脚，这一页记录的就是那份简报。页面自己的标题是“Heritage Grove — Footer”，整个构图就是围绕这串字搭的。整套配色是奶油色 #EAE3DE 打底、青绿色 #0F454F 给文字、深调 #2A707C 承担强调色，页面字体是 Poppins。交付形式是一个自包含的 HTML 文件，收录于 1920x1424，所以画幅在任何一行代码写下去之前就已经定好。动效归结起来就是2s 的过渡、cubic-bezier(.22,1.36,1)、一段循环视频打底。如果你要给别人提一版电商页脚的需求，就从这个构图起步，把题材换掉。下面引用的每一项都是那份简报里的数值，从 1920x1424 的画幅一直到最小的间距档。
适合谁
- 在用 AI 建站工具的人，希望简报里已经写好了 cubic-bezier(.22,1.36,1) 缓动曲线，而不是交给模型自己发挥。
- 接手这版页脚的外包团队，需要在第一次提交之前把一个自包含的 HTML 文件钉进仓库里。
- 如果构建从一个自包含的 HTML 文件起步，先拾起固定 16px 的标题字号、100vh 高的板块，栅格定下来之前别碰配色。
包含哪些内容
- 链接只在一个断点收起. 导航条是整套构图里最安静的部分：字标、一短行链接和一个 #2A707C 操作，全部压在需求简报最小的字阶上。359px 以下链接直接收起，而不是折到第二行。这条导航只有几个元素，不用组件库也能重建。
- 视频压在最底层. 素材干的是氛围的活，不是叙事：一段 1920x1424 下的 9.6s 循环，垫在所有东西后面。自动播放不可用时，1920x1424 的封面帧撑住构图，版式不会塌。
- 每种宽度都有明确行为. 宽度变化由字体自己消化：240px 到 52px 的 clamp 让标题从手机一路撑到桌面，不需要另做一套移动端构图。控件保持足够大的点击面积，文案在任何宽度下都维持同一个阅读顺序。窄屏版式要设计，不要硬挤。
- 对着视口量出来的. 版式里没有一样交给感觉：需求简报写明了固定 16px 的标题字号、100vh 高的板块、52px 间距、2s 的过渡，构建必须落回这些值。字体和版式共用同一套档位，换掉其中一样时不会有东西漂移。
动效与交互
环境动效交给循环
整个环境层就是一段 9.6s 的片段：它在文案后面播放，循环看不出接缝，也从不响应指针。自动播放被拦截时有首帧封面顶上，所以动效是加分项，而不是必需品。
动效可以关掉
动效层带一个开关。在 prefers-reduced-motion 下入场动画和循环视频会被去掉，其他一切留在原位。这段分支是需求简报的一部分，不是事后补的。没有动画，布局也得站得住。这份参考在 1920x1424 下收录。
这个页脚背后的顺序
这里没有任何东西跟第一个决定抢位置。页面直接把这句话说出来了：“Heritage Grove — Footer”。支撑素材等在折叠线以下，页面顶部只由导航、数据行、功能列表、表单、背景片段承担。电商读者先看到主张，再看到选项。
这个页脚怎么重排
需求简报写明了每个宽度下变什么（字阶是流体的，而不是阶梯式的、版式在 359px 处切换、板块高度锁在 100vh），也就是说移动端是一个决定，而不是把桌面端挤小。对比度靠素材之上的 #2A707C 强调色守住，视频静音且行内播放。窄屏下没有丢掉任何重要的东西。
这个页脚做对了什么
和模板化的首屏相比，差别在于少了什么：没有卡片栅格、没有轮播、也没有第二个行动号召，只有导航、数据行、功能列表、表单、背景片段，按固定 16px 的标题字号、100vh 高的板块定尺寸。 Heritage Grove 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
常见问题
Heritage Grove 有多少地方依赖一个自包含的 HTML 文件？
Heritage Grove 是用一个自包含的 HTML 文件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
这条 Heritage Grove 条目是怎么组织的？
页面上引用的内容全部出自收录的 12,893 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
复制 Heritage Grove 的需求简报，我能拿到什么？
它是构建简报，不是感觉描述：写明 1920x1424 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
