Maison Ember

Quick start

1. Extract maison-ember.zip and open maison-ember/index.html in a browser.
2. Replace the sample brand, menu, hours, contact details and story with your approved business information.
3. Set your real recipient in assets/js/main.js and update all visible email addresses in index.html.
4. Review the photographs, both footer policies and dietary wording.
5. Test a draft on desktop and mobile. Send it yourself from an email application and verify receipt before launching.

“Send Inquiry” prepares a reviewable email draft. The page does not send messages, confirm reservations, accept orders or process payments.

1. Overview & features

Maison Ember is a Bootstrap 5 fine-dining landing page with an editorial chef story, seasonal menu, private-dining introduction and reservation inquiry journey. Warm ivory, charcoal and muted brass pair with system serif typography and local WebP photographs.

Includes category controls, pinned navigation, mobile menu, FAQs and accessible Privacy and Terms of Use dialogs. No backend, live availability, analytics, tracking cookies or embedded map is included.

2. Package files

No build process, CDN, API key or external font download is required. Georgia and Arial use fonts installed on the visitor’s system; appearance may vary slightly between platforms.

3. Business details & content

Edit all repeated content in index.html, including metadata, header, hero, visit section, footer, FAQs and policy dialogs.

• Brand: Maison Ember; cuisine: contemporary California dining.
• General area: Napa, California. Address: “Exact location announced soon.”
• Default phone: 999-999-9999, deliberately nonfunctional and displayed as a placeholder.
• Email: reservations@maisonember.example, a reserved example address that cannot receive requests.

Replace placeholder contacts before launch and keep the HTML, JavaScript and policies consistent. Only add a telephone link after supplying a real approved number. Sample photographs, menu prices, story and hours do not verify an operating restaurant. Do not add unsupported sourcing claims, awards or customer reviews.

4. Brand, typography & spacing

The logo is plain HTML text, so a buyer can rename it without image-editing software. Edit the two .brand links in the header and footer, their tagline spans and their accessible home labels. Update the SVG favicon separately.

<a class="brand" href="#home" aria-label="Maison Ember home">
  MAISON EMBER<span>CONTEMPORARY DINING</span>
</a>

Change these tokens in assets/css/style.css:

--ivory: #f3eee4;
--ink: #201e1a;
--brass: #c6ab78;
--muted: #6c665d;
--line: #d8d0c1;

Headings and wordmark use Georgia; body text uses Arial. Edit h1, h2, .section and .container for sizing and spacing. Longer brand names may require a smaller mobile logo. Preserve contrast and visible keyboard focus.

5. Full-width hero

The hero uses dining-room.webp, a dark CSS overlay and real HTML text. Update the headline, description and actions in #home. The image is prioritized for loading.

Use a wide photograph with darker space on the left and the subject toward the right. Check .hero-image object positioning at all screen sizes. The hero is the only photograph with overlaid text; all other captions stay outside images.

6. Menu & category controls

Edit dishes and prices inside #menu. Four category buttons use data-filter values first, main, sweet and wine. Each corresponds to a .menu-group with a matching data-category.

The selected button updates aria-pressed and a live region. Buttons support Tab, Enter and Space. The initial category is “To begin”; other groups have hidden. Keep initial states consistent when changing the default. Update the selection-count announcement in JavaScript if a category no longer has three items.

Prices are sample USD amounts. Maintain ingredient descriptions and dietary guidance together. No downloadable menu or allergen certification is included.

7. Chef story & private dining

The story lives in #story. Replace the philosophy with an accurate account of your restaurant and chef; avoid implying credentials or history not supplied. The private-dining section is #private.

The private-gathering link uses data-inquiry="Private dining", matching an option in the form. It changes only the occasion field and invalidates an old draft, preserving unrelated visitor inputs. Update both values together if renaming an occasion.

8. Hours, location & general-area link

Sample dinner hours: Tuesday–Saturday 5–10 PM, Sunday 5–9 PM, Monday closed, Pacific time. Update the visit section with confirmed operating hours.

The template uses the fictional address placeholder “Exact location announced soon.” The Google Maps link searches only Napa CA and is accurately labeled “View general area.” It does not target a property, restaurant listing or exact-location pin. No iframe is used.

For demonstration versions, retain fictional addresses and a general-area map link. Buyers should publish only approved actual business details and ensure every link label accurately describes its destination.

9. Photographs & icon

Images are illustrative. Replace them with authorized images appropriate to the business. Preserve filenames or update all references, descriptive alt text and width/height attributes. Lower-page images load lazily. Check cover crops on desktop, tablet and phone. Do not add text overlays outside the hero.

10. Reservation form & preferences

The form ID is reservationForm. Name, email, preferred date, preferred time and guest count are required. Phone and message are optional. Party size is an integer from 1 to 20, an inquiry range rather than a capacity promise. Larger groups can state the total in the message.

Set TIME_ZONE in assets/js/main.js; the default is America/Los_Angeles. Past dates are rejected using the business’s current calendar date. Name rejects whitespace-only input. Required fields, email and guest count use browser validation.

Time choices are preferences from 5:00 PM to 8:30 PM. Closed weekdays and elapsed same-day times are not blocked; no live availability is checked. The restaurant must confirm requests. If you add stricter rules, update the form wording, JavaScript and this guide together.

Changing a field hides and clears any existing draft. Reset clears entries and draft. The page does not persist guest entries.

11. Email draft, recipient & backend

Set RECIPIENT to a real monitored email address in assets/js/main.js. Update contact links and both policies in HTML as well. The example address cannot receive mail.

Send Inquiry validates the form and reveals a readable draft. “Open email app” uses a mailto link; the visitor still must press Send in that app. “Copy draft” requests clipboard access only when clicked. If unavailable, a status message explains manual copying. The visible email address is a fallback.

A mail application must be configured for mailto links. Very long drafts may exceed some applications’ URL limits; copying is the alternative. Test your recipient and guest flow before launch. To enable automatic delivery, add a secure server-side service, validation, abuse protection and accurate policy wording. No backend is supplied.

12. Navigation, FAQs & policies

Header #siteHeader stays pinned at all breakpoints. JavaScript maintains --header-height; CSS scroll padding adds clearance. Mobile navigation collapses below 992 px and scrolls when the screen is short. Keep Bootstrap’s collapse attributes and unique target IDs aligned.

FAQs use the Bootstrap accordion. Footer links labeled exactly Privacy and Terms of Use open Bootstrap dialogs with Escape, focus trapping, scrolling and focus return. Their layers sit above the header. Keep dialog IDs, headings and aria labels paired.

Edit both guest-facing policies in index.html to match your actual data handling, email recipient and external services. The included wording is a starting point requiring review before launch, not a complete legal compliance solution. Keep buyer instructions out of the dialogs.

13. Metadata, responsiveness & versions

Edit the title, description, theme color, favicon and accessible brand labels in index.html. Add real canonical/social URLs only after a public domain is known.

Custom references use assets/css/style.css?v=1.1 and assets/js/main.js?v=1.0. Change the affected token whenever editing an asset, and replace the matching HTML and asset files together. Query strings do not guarantee that cached HTML or hosting caches refresh.

Check 320 px phones, larger phones, tablets and desktop after every major content change. Keep menu targets, anchor offsets, full-width images and focus styles intact. Reduced-motion preferences disable smooth scrolling and transitions.

Bootstrap 5.3.8 and bundled Popper are local MIT-licensed dependencies; notices are in LICENSES.txt. System fonts require no bundled font files.

14. Launch checklist

• Replace brand, example email, 999-999-9999 and fictional address; verify all repeated details.
• Approve menu prices, hours, chef story, dietary wording and imagery.
• Review policy dialogs against actual services.
• Test all menu categories, mobile navigation, anchors, FAQs and both dialogs.
• Test required fields, past dates, party-size limits, draft review, copying, editing and Reset.
• Send a test email from the guest’s mail app and confirm delivery.
• Check desktop, tablet and small phones, including short screens.
• Update asset tokens after changes; include every local asset.
• Replace or remove the demonstration footer notice only after the content is ready for a real business.

15. Troubleshooting