Vibe Code a Coffee Shop Website

Build a one-page specialty coffee shop website as a single self-contained
HTML file (inline CSS and JS, no external dependencies except Google Fonts
and Unsplash images via their CDN).

═══════════════════════════════════════════════════════════════
BUSINESS DETAILS
═══════════════════════════════════════════════════════════════
- Cafe name: [CAFE NAME]
- Concept: third-wave specialty coffee with [OWN ROASTERY / PARTNER ROASTERS]
- Address: [FULL ADDRESS]
- Phone: [PHONE]
- Email: [EMAIL]
- Social: Instagram + (optional) TikTok (open in new tab, rel="noopener")
- Hours: [WEEKDAY / WEEKEND / SUNDAY], call out when they typically sell out
- Founded year: [YEAR]
- Online ordering: link to external platform if available
- Bean retail: yes/no (sells bags to take home?)

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: cream background (#f5efe4), espresso brown (#3a2418), sage
 accent (#7a8b6e), single warm-rust accent (#c66a3d) for CTAs. Override if
 user provides hex values; derive darker variants for body text contrast.

═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Editorial, hand-crafted, slow-paced. NOT corporate-chain. NOT cutesy.
- Type pairing: high-contrast serif for headings (Recoleta, Cormorant
 Garamond, or PP Editorial New alternative) + monospace for prices/details
 (JetBrains Mono, IBM Plex Mono) + Inter for body. NO script fonts.
- Eyebrow labels: uppercase, tracked .20em, sage color, prefixed by a 28px
 CSS ::before line in espresso brown.
- Headlines: short, sensory, with ONE italic accent ("Roasted *the slow way*").
 Italic word uses warm-rust gradient text fill.
- Generous whitespace, full-bleed photography of pour-over moments, hands
 cupping mugs, latte art close-ups. Asymmetric two-column grids.
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
 stroke-width 1.6, round caps. Cover at minimum: bean, mug, leaf, drip,
 scale, thermometer, calendar, clock, pin, phone, mail, star, instagram-mark.
- Icon containers: 44x44 rounded squares, cream-tinted bg with espresso
 border (1px), flip to filled espresso with cream icon on hover.
- Motion: scroll fade-ins, Ken Burns zoom on hero photo, subtle parallax on
 decorative SVG bean / leaf elements. No bouncing.

═══════════════════════════════════════════════════════════════
SECTIONS (in this exact order)
═══════════════════════════════════════════════════════════════

1. FIXED NAV (glass effect cream translucent bg + backdrop blur)
 - Wordmark left | nav links center | "Find us" rust pill CTA right
 - Below: ultra-thin info bar with today's hours ("Open today: 7am - 4pm")

2. HERO
 - Full-bleed split: left text, right photo (Unsplash search: "espresso pour"
 or "latte art top view") rounded 28px with espresso gradient overlay
 bottom-left
 - Left: eyebrow with line marker ("EST [YEAR]"), large headline with
 italic accent ("Coffee that *deserves a pause*"), 2-line subhead,
 primary "See today's menu" CTA + secondary "Order online"
 - Floating pill on photo bottom-left: today's featured origin with pulsing
 sage dot
 - Ken Burns slow zoom on hero photo

3. TODAY'S MENU
 - Eyebrow + headline ("On the bar *right now*")
 - 2-column on desktop (collapse to 1 on mobile): Espresso column left,
 Filter column right, both with espresso-bordered cream cards
 - Each item: name (serif) on left + price in monospace on right + 1-line
 origin/tasting note in muted text below
 - 8-12 items total spread across both columns
 - Below: small note in italic serif "Menu rotates with seasons + farms"

4. OUR STORY
 - Two-column: text left, photo composition right
 - Left: eyebrow, headline ("Built on *relationships, not contracts*"), 3
 short paragraphs about sourcing trips, partner farms, roastery details,
 the sourdough-equivalent (a 10-year-old culture, named starter, etc.)
 - Right: layered photo composition, large barista-portrait photo
 (rounded 20px) + overlapping smaller interior shot (rounded 20px,
 cream border frame)
 - "EST [YEAR]" tag floating top-left, sage-green badge with leaf icon
 bottom-right ("Direct-trade partner")

5. THE BEANS
 - Eyebrow + headline ("This month's *single origins*")
 - 3-column grid of origin cards (stack on mobile)
 - Each: country flag pin in line-icon style + country/region/farm name
 (serif) + 3 tasting notes as small chips (sage outline, e.g., "stone
 fruit", "milk chocolate", "honey") + process + roast date in monospace
 + small "Bag at home" rust link

6. CUPPING + EVENTS
 - Two-column: text left, list right
 - Left: eyebrow, headline ("Come learn *with us*"), 2-line subhead about
 monthly cuppings and brewing classes
 - Right: 2-3 upcoming events as horizontal cards
 - Each card: date block left (large day + 3-letter month in serif), event
 name + 1-line description right, "RSVP →" link in rust
 - Below: "Subscribe to event list" inline form (no real backend)

7. FIND US
 - Two-column: hours + transit info left, embedded Google Map right
 (rounded 24px, shadow)
 - Left: large hours table with day + time columns + a small "We often sell
 out by noon" italic line
 - Map iframe via Google Maps embed URL (no API key)
 - Floating overlay top-left of map: cafe name, address, "Get directions →"

8. NEWSLETTER
 - Centered card on cream section, sage radial blob accents
 - Eyebrow "GET THE WEEKLY BREW", headline ("New coffees, *every Friday*"),
 1-line description, inline email input + rust submit button
 - Inline JS success message (preventDefault, no real backend)

9. SOCIAL STRIP
 - Thin section, "FOLLOW THE BAR" label left + 6-image Instagram grid right
 (Unsplash search: "latte art", "coffee bag", "barista hand")
 - Each image rounded 12px, hover desaturates slightly
 - Below grid: real social icons (only platforms user provides)

10. FOOTER (deep espresso)
 - Centered wordmark in cream
 - Italic serif tagline below (NOT handwritten, e.g., "Slow coffee,
 every day")
 - Social row: glass-circle icons (only platforms user provides)
 - Bottom row: address + hours + "Made in [CITY]" + copyright

═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step
- JSON-LD `CafeOrCoffeeShop` schema in <head> with name, address, telephone,
 openingHours, servesCuisine, priceRange
- CSS custom properties for palette/gradients at top
- Smooth scroll with scroll-padding-top
- Real Unsplash images via CDN with ?w=900&q=80&auto=format&fit=crop
- Hero loading="eager", everything else "lazy"
- Use <picture> with WebP source + JPG fallback on hero
- tel:/mailto: links; mailto with prefilled subject
- Responsive at 900px and 500px breakpoints; no horizontal scroll
- Semantic HTML5; aria-labels on icon-only links
- All open hours in local timezone, mention timezone in schema
- Favicon: inline SVG data URI (coffee bean or mug mark)

═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
Editorial, sensory, specific. Treats coffee like wine. Writes for someone who
cares about origin, process, and craft. Avoid generic "passion for coffee".
Use sensory specifics: "Nine-month fermentation, dried on raised beds", not
"high quality beans". Mention real-feeling details: a starter named [NAME],
a roastery on [STREET], a partner farm in [COUNTRY]. Body copy short, warm,
deliberate.

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis (including the coffee cup emoji) anywhere
- No "Java", "Joe", "Cuppa Joe", too colloquial for editorial tone
- No script fonts or chalkboard-style typography
- No fake stock photos of overly stylized baristas in suspenders
- No Starbucks-style green/white palettes
- No animated steam GIFs from mugs
- No "We pour love into every cup" filler
- No bouncing add-to-cart popups
- No real coffee certification logos (Fairtrade, Rainforest Alliance), use
 typeset names if user wants to mention them


═══════════════════════════════════════════════════════════════
SEO & DISCOVERABILITY
═══════════════════════════════════════════════════════════════
Implement all of the following so the page ships production-ready for search
engines and social sharing. This is not optional; treat it as part of the
build, not an afterthought.

DO NOT INVENT DATA: never fabricate business names, addresses, phone or email, license or certification numbers, coordinates, prices, reviews or ratings, team members, photos, press mentions, or results and stats. If a detail is not provided, leave a clearly labeled {{TODO: ...}} placeholder — never a plausible-looking fake. Any form must POST to a real endpoint (Formspree, Web3Forms, Basin, or similar) or fall back to a mailto:/tel: link — never show a fake "success" message with no backend. Wrap every motion effect in @media (prefers-reduced-motion: reduce), and make sure any accent color used for text, links, or prices meets WCAG 2.2 AA contrast against its background.

1. TITLE TAG & META DESCRIPTION
   - <title> tag: "[Business Name] - [Primary Service] in [City]" (under 60 chars)
   - <meta name="description"> 150-160 chars, include the city/area, primary
     service, and a call to action (e.g., "Book online" / "Call now")
   - <meta name="robots" content="index, follow">

2. OPEN GRAPH & TWITTER CARDS
   - og:title, og:description, og:image (hero image), og:url, og:type=website
   - twitter:card=summary_large_image, twitter:title, twitter:description,
     twitter:image
   - Place all OG/Twitter meta in <head>

3. STRUCTURED DATA (JSON-LD)
   - Insert a <script type="application/ld+json"> block in <head> with
     @type: "CafeOrCoffeeShop" schema
   - Include: name, description, url, telephone, email, address
     (streetAddress, addressLocality, addressRegion, postalCode,
     addressCountry), image. Add geo, openingHoursSpecification, and priceRange ONLY when the user supplied real values — never invent them; and do NOT output aggregateRating or Review markup unless the user provides real, verifiable reviews (fabricated ratings violate Google's structured-data spam policy)
   - Add BreadcrumbList schema: Home > [Category] > [Business Name]
   - If the page has a FAQ section, add FAQPage schema with every Q&A pair

4. HEADING HIERARCHY FOR SEO
   - Exactly ONE <h1> per page — use the real, human headline the design calls for; put keywords in the <title> and meta, not the visible H1
   - Logical H2 > H3 nesting for every section; never skip a level
   - Section headings should include secondary keywords naturally
     (keep the section's real, human label; put keywords in the title and meta, not stuffed into headings)

5. IMAGE SEO
   - Every <img> must have a descriptive alt attribute that includes
     relevant keywords (NOT just "image1.jpg")
   - Format: alt="[what the image shows] - [Business Name] in [City]"
   - Use the client's own images, or neutral solid/gradient placeholders with a visible "replace with your photo" note — never hardcode Unsplash photo IDs (they often resolve to the wrong or trademarked image). Always set width + height (or aspect-ratio) to prevent layout shift

6. LOCAL SEO SIGNALS
   - Include full NAP (Name, Address, Phone) in the footer, matching the
     schema data exactly
   - Add a link to Google Maps with the business address
   - Use location-specific keywords in at least 3 section headings
   - If the page has testimonials, include the reviewer's city/area

7. TECHNICAL SEO
   - Canonical tag: <link rel="canonical" href="[PAGE URL]">
   - Language: <html lang="en">
   - Charset: <meta charset="UTF-8"> + viewport meta (already required)
   - All internal anchor links use descriptive text (not "click here")
   - Loading performance: critical CSS inline, fonts via display=swap,
     hero image eager, everything else lazy
   - Keep the CSS and JS readable and editable — do NOT minify (this file is meant to be customized by the owner)

8. CONTENT SEO SIGNALS
   - Write real, useful body copy (not just headings and bullet points).
     Each major section should have at least one paragraph of 2-3 sentences
     that describes the offering in natural language a search engine can parse.
   - Use the primary keyword once or twice where it reads naturally; keep the rest in the title tag and meta description, never stuffed into copy.
   - Include a clear call-to-action with anchor text that includes the
     service keyword (e.g., "Book your appointment" not "Click here").

═══════════════════════════════════════════════════════════════
DELIVERABLE
═══════════════════════════════════════════════════════════════
One polished HTML file (~65-75KB), production-ready, that I can open in a
browser and immediately deploy. Include JSON-LD schema. Show the file as a
single code block and briefly summarize the design decisions made.