Ember & Oat Coffee Roasters — Café & Coffee Roaster Website (6 Pages)

6 pages, each a complete, self-contained HTML page — a warm, tactile café-and-roastery design: espresso-dark hero with a circular cup photo, a slowly rotating "small batch · roasted weekly" badge and rising steam, DM Serif Display headlines (italic accents) over Work Sans, a kraft brown / cream / espresso / terracotta / oat palette, stitched kraft cards, notched ticket shapes, torn-paper section edges, kraft speckle and coffee-ring stains. 1. Home (index.html) — hero, this week's ticket cards, chalkboard favorites, three roast cards with meters, subscription band, bakery, neighbor notes, photo strip, hours with an illustrated map. 2. Menu (menu.html) — tabbed chalkboard menu (Espresso Bar, Brew Bar, Tea & Other, Bakery, Breakfast) with prices, milks and syrups, breakfast feature, allergen FAQ. 3. Our Coffee (coffee.html) — four roast cards with origin, tasting notes and roast/body/acidity meters, roast day, a brew-guide accordion, a grind and ratio table. 4. Subscriptions & Shop (shop.html) — a working subscription builder, how it works, eight shop products, a flip-over gift card, subscription FAQ (FAQPage markup). 5. Our Story (story.html) — founders, a garage-to-café timeline, a farm-to-cup line drawing, count-up numbers, values. 6. Visit Us (visit.html) — hours (today's row highlights itself), address and illustrated map, visitor notes (parking, Wi-Fi, dogs, accessibility), wholesale and catering inquiry form. ANIMATION. Steam rises off the hero cup, the circular badge turns slowly, the announcement bar scrolls, roast meters fill, the story timeline fills as you scroll, the farm-to-cup line draws itself, numbers count up (they read the number you type), stamps zoom in and sections slide in as you scroll. Everything is visible without JavaScript, and visitors who ask for reduced motion see a still page. MENU BOARD. The tabs switch boards in the browser; edit item names, descriptions and prices like any other text. Without JavaScript every board shows, one after another. SUBSCRIPTION BUILDER. It works in the browser: each bag size's price is in its radio's data-price attribute, the single-origin and decaf surcharges in data-add (per 12 oz, scaled by data-bags), each frequency's discount in data-off and deliveries per month in data-per-month; the free-shipping threshold and flat shipping fee are data-free-ship and data-ship on the form. The builder takes no orders — point its button at your store or subscription app (Shopify, Square, etc.) before publishing. The shop's "Order for pickup" buttons link to the Visit page; point them at your online store. ROAST METERS. Each meter's fill is the --v percentage in its style attribute (e.g. style="--v:45%"); the word beside it is ordinary text. GIFT CARD. The card turns over on hover or tap. Without motion both faces show, stacked. MAP. The map is a drawn illustration, not a live map — street labels and the pin are editable text. Add a "Get directions" link to your real map listing. FONTS. DM Serif Display and Work Sans load from Google Fonts via @font-face in each page's style block, with serif and sans-serif fallbacks. SEO. Each page opens with a labeled block (title, meta description, canonical link, Open Graph tags and JSON-LD — CafeOrCoffeeShop with servesCuisine, hasMenu and openingHoursSpecification; Menu with every menu item and price; an ItemList of coffees; FAQPage; AboutPage; ContactPage). Copy it into your real <head> when you deploy, and update the domain, address, hours, menu and rating. FORMS. The subscription builder and the wholesale & catering inquiry form post nowhere — connect them to your store and to your email or form service before publishing. EDITING. Change colors and fonts site-wide in the editor's Theme panel; edit the header or footer once and use "Apply to all pages"; sections can be moved, duplicated, hidden or deleted; use the Tablet and Mobile views for device-specific tweaks. CLAIMS & SAMPLE CONTENT. The café name, owners, address, phone, email, hours, menu and prices, coffees and tasting notes, subscription prices and discounts, shop products, wholesale and cart rates, timeline, statistics, rating and neighbor reviews are fictional samples. Replace them with your own real details. Allergen notes are examples — check them against your own recipes and kitchen. IMAGES. All photography is real Unsplash stock, self-hosted under /content-images — cups, beans, brewing, pastries, breakfast and a window table. No photo shows a recognisable face (one shows only a barista's hands), and none shows another business's name. Replace them with photos of your own café and coffee whenever you can.