关于这个模板
Cordex 收录于 1920x1416，保留的是一份规格书，而不是一张画廊图片。它以“We protect transport safer across all industries”开场，给这句话整个版心，而不是把它缩进一张卡片里。配色控制在黑色 #0A0A0B 打底、#F7F7F8 给文字、红色 #E23B32 承担强调色之内，字体用 Inter。交付形式是一个自包含的 HTML 文件，收录于 1920x1416，所以画幅在任何一行代码写下去之前就已经定好。动作被收进0.7s 的过渡、一段循环视频打底里。当你要做面向工业企业的落地页、想要一个成品构图而不是一个起点时，就拿它当参照。收录的提示词记录于 1920x1416，所以这一页引用的每个数值都能追回到它。
适合谁
- 如果构建从一个自包含的 HTML 文件起步，先拾起字号从 12px 到 21px、100vh 高的板块，栅格定下来之前别碰配色。
- 这个页面服务的是正用一个自包含的 HTML 文件重建工业企业落地页、想找外观背后那组数字的前端开发者。
- 正在复刻竞品工业落地页的团队，想在有人选定框架之前先把一个自包含的 HTML 文件点明。
包含哪些内容
- 导航收在一行. 链接在同一行、同一个字号上排开，#E23B32 操作收在行尾右侧，视线正好在导航结束的地方停下。标签短到能在 480px 下一行放下，当前项用字重标出，而不是加一个胶囊底。你自己的页面板块更多时，把它们归组，而不是把导航条拉宽。
- 通栏视频垫在文字后面. 视频落在 1920x1416 构图的最底层，文字排在它之上，两者之间什么都没有。循环短到 6.8s，眼睛会把它读成肌理，而不是一条时间轴。
- 面板分量相同. 栅格就是结构：面板同样大小，用 Inter 排，排得让视线横向移动，而不是向下。面板顺序就是阅读顺序，不依赖任何位置暗示。
- 每种宽度都有明确行为. 字阶顶部是流体的（12px 到 21px 的 clamp），其余档位固定，视口收窄时画幅依然保持成构图。控件保持足够大的点击面积，文案在任何宽度下都维持同一个阅读顺序。
动效与交互
环境动效交给循环
环境动感是一段 1920x1416 下的 6.8s 片段，在文案后面安静循环，不响应指针。循环按 cover 裁切，构图因此不依赖某个固定的画面尺寸。
全部动画预算
规格里每一次状态变化都带着时长：0.7s没有一处留给浏览器默认值，所以页面读起来是被设计过的，而不是被加了动画。缓动和时长写在一起（0.7s），复刻时没法悄悄换成另一种手感。
Cordex 怎么安排第一次阅读的顺序
把你自己的文案放进这个落地页，顺序依然成立，因为这些元素不能互换：导航、标题、公告徽标、数据行、卡片栅格各自只负责一件事。工业读者先看到主张，再看到选项。这份参考在 1920x1416 下收录。
这个落地页背后的数字
两个人在同时复刻时，靠眼睛是定不住构图的。需求简报消掉了这场争论：字号从 12px 到 21px、100vh 高的板块、14px 间距、0.7s 的过渡、480px 断点，只说一次。这个落地页里没有任何一处依赖默认值。
这个落地页怎么重排
和把板块藏起来的移动端版式比，这一版把板块留住、只改它们的形状：字号在 12px 到 21px 之间弹性缩放、版式在 480px 处切换、板块高度锁在 100vh。窄屏版式是一个决定，而不是把宽屏挤小，层级在窄屏上依然成立。
常见问题
能用别的技术栈重建 Cordex 的落地页吗？
Cordex 是用一个自包含的 HTML 文件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
这条 Cordex 条目是怎么组织的？
页面上引用的内容全部出自收录的 29,696 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
Cordex 背后那份需求简报里到底有什么？
它是构建简报，不是感觉描述：写明 1920x1416 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
