咖啡主题网站

咖啡主题网站 (纯前端) 极简提示词

核心目标与技术栈
生成目标： 纯前端、响应式、温暖精致风格的咖啡主题网站（例如：精品咖啡店或咖啡豆品牌）。
技术栈： 使用 HTML5, Tailwind CSS, 原生 JavaScript。

内容与结构（语义化与组件化）

生成以下 5 个核心组件/页面结构，确保代码语义化：
Header (<header>): 粘性导航栏 (Sticky Nav)。包含 Logo（占位文本）、主导航链接（Home, Menu, Locations, Shop, Blog）、以及一个优雅的 "Order Now" CTA 按钮。
Hero Section: 专注于氛围感，背景使用咖啡制作/店内环境占位图。包含一个精致的 H1 标题、品牌口号、以及主要的 CTA 按钮。
Featured Products/Menu Grid (<section>): 使用 Grid 布局展示 4 款精选咖啡或咖啡豆。每张卡片（<article>）包含占位图、产品名称、价格，和简短的特色描述。
Story/Philosophy Section (<section>): 采用左右布局（左图右文或反之），展示品牌故事或咖啡哲学，强调品质与工艺。
Footer (<footer>): 包含营业时间、分店地址、社交媒体图标和版权声明。

设计与样式（精致与现代）

设计语言： 精致、高级、温暖，使用清晰的排版和柔和的光影效果。
配色方案： 深棕色、奶油白/米色为主色调（模拟咖啡和牛奶的颜色），金色或柔和的橙色为强调色。
字体： 使用 serif 字体（用于标题）和 sans-serif 字体（用于正文）的优雅组合，突出精品感。
图标： 采用简约的线条图标（例如 Heroicons 或 Font Awesome 占位符）。
响应式： 必须完全遵循 Mobile-First 原则，在所有断点上完美显示。

最佳实践（代码质量）

代码质量： 代码必须结构清晰、整洁、易读。
样式实现： 严格使用 Tailwind CSS 类实现所有样式和响应式布局，避免使用自定义 CSS 文件。
交互实现： 仅使用原生 JavaScript，实现导航栏滚动时的透明度/背景切换效果和菜单卡片悬停时的精致放大效果。

最终指令：
基于上述要求，请使用 HTML5, Tailwind CSS, 和原生 JavaScript，生成一个完整的、结构语义化、设计温暖精致的纯前端咖啡主题网站代码，并将代码组织在 index.html 和 script.js 文件中。