ref_restaurant.html

<!--
  BuildAI Reference: RESTAURANT / FOOD
  Upload to HuggingFace as: ref_restaurant.html
-->

<!-- == PATTERN 1: LUXURY FINE DINING (NOBU STYLE) == -->
<style id="r1">
/* LUXURY DARK RESTAURANT */
/* bg:#1a0e05 font:Cormorant Garamond serif */
/* gold accent: #d4a853 */
/* hero: min-height:100vh position:relative overflow:hidden */
/* hero bg: url(loremflickr food restaurant luxury) center/cover filter:brightness(0.25) */
/* hero overlay: linear-gradient to bottom transparent 30% rgba(26,14,5,0.9) */
/* h1: clamp(48px,8vw,100px) weight:400 letter-spacing:8px uppercase */
/* tagline: color:#d4a853 letter-spacing:5px uppercase italic */
/* divider: width:60px height:1px bg:#d4a853 margin:20px auto */
/* CTA: border:1px solid #d4a853 color:#d4a853 letter-spacing:4px uppercase hover:bg:#d4a853 color:#1a0e05 */
/* menu tabs: border-bottom:1px solid rgba(212,168,83,0.2) */
/* menu tab: color:#666 border-bottom:2px solid transparent active:color:#d4a853 border-color:#d4a853 */
/* menu item: flex justify-between border-bottom:1px solid rgba(255,255,255,0.05) padding:20px 0 */
/* menu price: color:#d4a853 */
</style>

<!-- == PATTERN 2: BOLD CASUAL (CHIPOTLE STYLE) == -->
<style id="r2">
/* BOLD CASUAL RESTAURANT */
/* bg:#f5f0e8 font:Inter */
/* hero: bg:#3b2314 grid 1fr 1fr gap:60px align:center */
/* h1: clamp(40px,6vw,80px) weight:900 tracking:-3px leading:1.0 color:#f5f0e8 uppercase */
/* accent: color:#e8a020 */
/* menu card: border-radius:20px overflow:hidden bg:#fff box-shadow:0 4px 20px rgba(0,0,0,0.08) */
/* menu card hover: translateY(-6px) */
/* menu img: width:100% height:200px object-fit:cover */
/* card tag: 10px weight:700 uppercase tracking:2px color:#e8a020 */
/* price: 20px weight:800 color:#1a1a1a */
/* order btn: bg:#3b2314 color:#fff border-radius:999px weight:700 hover:bg:#e8a020 */
</style>

<!-- == PATTERN 3: FARM-TO-TABLE ORGANIC == -->
<style id="r3">
/* ORGANIC EARTHY RESTAURANT */
/* bg:#fafaf7 font:Plus Jakarta Sans */
/* hero: grid 1fr 1fr min-height:90vh */
/* hero text: bg:#2d3a1e flex flex-col justify:center padding:80px 60px */
/* eyebrow: 11px tracking:4px uppercase color:#8fbe5a */
/* h1: clamp(36px,4vw,60px) weight:800 tracking:-2px color:#f5f0e8 */
/* hero p: 16px color:#8a9a78 line-height:1.8 */
/* btn: bg:#8fbe5a color:#1a1a1a border-radius:999px weight:700 */
/* values grid: 3 cols gap:24px */
/* value icon: 36px margin-bottom:12px */
/* value title: 16px weight:700 color:#2d3a1e */
</style>

<!-- == PATTERN 4: EUROPEAN FINE DINING == -->
<style id="r4">
/* EUROPEAN MINIMAL ELEGANT */
/* bg:#fff font:Cormorant Garamond */
/* hero: height:100vh overflow:hidden position:relative */
/* hero img: width:100% height:100% object-fit:cover */
/* overlay: linear-gradient to bottom transparent 40% rgba(0,0,0,0.8) */
/* overlay content: position:absolute bottom padding:80px */
/* preheader: 13px tracking:6px uppercase color:rgba(255,255,255,0.6) */
/* h1: clamp(42px,6vw,80px) weight:300 tracking:-1px */
/* reservation strip: bg:#fff padding:32px flex gap:24px align:center box-shadow:0 -10px 40px rgba(0,0,0,0.1) */
/* field: flex flex-col border-bottom:1px solid #e5e7eb */
/* reserve btn: bg:#1a1a1a color:#fff font:Inter 13px tracking:2px uppercase hover:#333 */
</style>

<!-- == PATTERN 5: PIZZA/ITALIAN VIBRANT == -->
<style id="r5">
/* VIBRANT ITALIAN RESTAURANT */
/* bg:#fff font:Inter */
/* hero: bg:linear-gradient(135deg,#c41e3a,#8b0000) min-height:85vh */
/* overlay: radial-gradient circle at 30% 50% rgba(255,200,0,0.15) */
/* h1: clamp(44px,7vw,90px) weight:900 tracking:-3px color:#fff */
/* accent: color:#ffd700 */
/* menu section bg: #fdf6e3 */
/* menu tabs: display flex justify:center border-bottom:2px solid #e5e7eb */
/* tab: padding:14px 28px color:#888 border-bottom:3px solid transparent active:color:#c41e3a border-color:#c41e3a */
/* dish card: bg:#fff border-radius:16px overflow:hidden shadow:0 4px 24px rgba(0,0,0,0.08) */
/* dish img: height:180px object-fit:cover */
/* dish price: color:#c41e3a weight:800 18px */
/* reservation form: bg:#c41e3a padding:60px inputs:bg rgba(255,255,255,0.1) border:1px solid rgba(255,255,255,0.2) color:#fff */
</style>

<!-- == SHARED RESTAURANT PATTERNS == -->
<style id="rshared">
/* GALLERY GRID */
/* masonry-style: columns:3 gap:12px */
/* gallery img: border-radius:12px width:100% mb:12px break-inside:avoid */
/* @media max-width:600px -> columns:2 */

/* REVIEW CARD */
/* bg:#fff border-radius:16px padding:24px shadow:0 2px 20px rgba(0,0,0,0.06) */
/* stars: color:#f59e0b */
/* reviewer: font-weight:600 */

/* OPENING HOURS */
/* grid 2 cols max-width:400px */
/* day: color:#666 13px */
/* hours: color:#1a1a1a weight:600 text-align:right */
</style>