关于这个模板
把 Mostar Guide 当作落地页规格书来读：这些数值在页面动手之前就先写下来了。它以“A cinematic three-screen scroll story for Mostar city”开场，给这句话整个版心，而不是把它缩进一张卡片里。颜色只用了 #111411 打底、浅调 #FDF1E1 给文字、蓝色 #7FB4D4 承担强调色，正文排的是 Inter。实现用的是 vanilla JS；里面的每个尺寸都写了下来，这正是它可复用的原因。需求简报把动效预算花在640ms 的过渡、cubic-bezier(0.22, 1, 0.36, 1)、一段循环视频打底上。当你要做面向旅行品牌的落地页、想要一个成品构图而不是一个起点时，就拿它当参照。下面引用的每一项都是那份简报里的数值，从 798x584 的画幅一直到最小的间距档。
适合谁
- 正在做旅行品牌落地页、需要在报价发出去之前把 560px 断点落到纸面上的团队。
- 产品市场的人需要落地页在背后有7.4s 的循环视频时依然好读。
- 给正在做旅行品牌落地页、背后还没有设计系统的独立创始人用。
包含哪些内容
- 导航条上不留多余. 字标、链接和 #7FB4D4 操作共用一条基线，细导航条才不会被看成随手排的。560px 以下链接直接收起，而不是折到第二行。加第六条链接之前，先把收起状态设计好。
- 通栏视频，不做面板. 一个 7.4s 的素材撑起整个首屏，页面上没有第二个素材元素要对齐。按 798x584 或更宽的尺寸导出，cover 裁切就继续成立。
- 用带序号的文字行承担. 功能用 Inter 排成清单，而不是一堵卡片墙。只要文案放得下，每一行就保持一行。
- 尺寸钉在需求简报里. 尺寸是对着 798x584 的渲染量出来的：字号从 12px 到 24px、19vh 高的板块、2 栏栅格、24px 圆角。每个值都能对着收录的提示词核一遍，重建因此是可验证的，而不是大约像。看着没道理的那些值，照留。
动效与交互
时长写进了需求简报
一个时长覆盖所有交互（640ms缓动是 cubic-bezier(0.22, 1, 0.36, 1)），悬停和按下才读成同一套系统。聚焦态和悬停态用同一个时长，键盘和指针的反馈因此一致。
反馈只出现在控件上
交互层是刻意做小的：内容在下方移动时保持原位的吸顶元素、按需翻页浏览内容的滑块组件。按下态和悬停态一样写明，轻点一下和点击得到的确认是一样的。这份参考在 798x584 下收录。
在 Mostar Guide 里先改什么
先改承诺，别先改装饰。把“A cinematic three-screen scroll story for Mostar city”重写成一句能说清你做什么的话，再用 Inter 按需求简报里的主标题字号排。把蓝色 #7FB4D4换成你自己的强调色，并在动别的东西之前先对着#111411检查一遍。替换比重新构图便宜，这正是重点。
这个落地页怎么重排
如果你的断点是为了让东西塞得下而选的，不是为了改变版式，那这一条值得读。字号在 12px 到 24px 之间弹性缩放、版式在 560px 处切换、板块高度锁在 19vh，而不是一串被隐藏的元素。直接挤小更省事，但撑不住。
这个落地页背后的顺序
这份需求简报有 27,876 个字符，把阅读顺序明写出来：导航、公告徽标、数据行、卡片栅格、功能列表，中间用字号从 12px 到 24px、19vh 高的板块隔开。旅行读者先看到主张，再看到选项。
常见问题
为什么 Mostar Guide 的提示词没有直接印在这里？
页面上引用的内容全部出自收录的 27,876 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
Mostar Guide 背后的提示词到底有多长？
它是构建简报，不是感觉描述：写明 798x584 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
能用别的技术栈重建 Mostar Guide 的落地页吗？
Mostar Guide 是用 vanilla JS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
