Create ref_restaurant.html

ref_restaurant.html

@@ -0,0 +1,102 @@
+<!--
+  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>