Hearth & Co. Docs
Everything you need to set up, edit, and launch the Hearth & Co. theme — theme settings, page templates, every module, and the design guidelines.
Getting Started
Introduction
What Hearth & Co. is
Hearth & Co. is a HubSpot CMS theme for restaurants — independent dining rooms, neighbourhood bistros, chef-led seasonal kitchens, and small groups. It pairs a Cormorant Garamond display serif with an Inter body face over a warm, light palette, with one orange accent used for buttons, links, badges, and active states.
Everything you see on the demo site is built from drag-and-drop modules. There is no hardcoded content in the templates — copy, photos, menus, hours, and reservation settings are all edited in HubSpot’s page editor and theme settings.
Who it is for
- A single restaurant that needs a Home, Menu, About, and Reservations flow.
- A venue that also takes private-dining and event enquiries through a form.
- Restaurants that want a real, structured online menu — not a PDF — with search-engine-readable markup.
- Anyone who wants to run a small blog or journal alongside the main site.
What is in the theme
- 26 modules — heroes, navigation, footer, two menu modules, chef bio, story rows, galleries, reviews, hours, location map, two reservation modules, an enquiry form, FAQ, team grid, and the blog modules.
- 6 page templates — Home, Menu, About, Private Dining, Reservations, and Contact, plus this documentation page.
- Two layouts —
base.html(with global header and footer) andbase_lp.html(landing pages, no chrome). - One theme-settings panel — colours, fonts and type scale, spacing, radius, elevation, buttons, borders, and global brand fields.
Design principles
Three ideas run through the theme: a warm light background instead of stark white, a serif display face for menus and headings that reads like a printed card, and restraint with the accent colour so the orange always means something (an action, a link, or the current item). Motion is limited to gentle scroll reveals that fire once.
Upload & Install
Upload with the HubSpot CLI
From the project root, upload the theme folder to your portal:
hs upload studionope-for-restaurants studionope-for-restaurants --portal=<your-portal>Once the upload finishes the theme appears under Settings > Content > Themes as “Hearth & Co.”.
Live editing while you work
To sync changes automatically as you edit files locally:
hs watch studionope-for-restaurants studionope-for-restaurants --portal=<your-portal>First-run checklist
- Open Edit theme settings and confirm the colours, fonts, and logo (see the Theme Settings section).
- Upload your logo and favicon under the Global group.
- Set a default social-share (OG) image.
- Create your first page from one of the templates (see Create Your First Page).
A note on images
The demo ships with Unsplash placeholder photography. Replace those with your own dishes, room, and team before launch — see Best Practices > Replacing Placeholder Images.
Page Templates
Available templates
When you create a page you choose one of the Hearth templates. Each one is a starting arrangement of modules with sample copy you can keep, edit, or remove.
| Template | Purpose |
|---|---|
| Home | The landing page: full hero, ethos points, a taste of the menu, chef bio, gallery, reviews, hours, location, and a reservation band. |
| Menu | The full structured menu using the Menu Display module, with a dietary legend. |
| About | The story of the restaurant — story rows, chef bio, ethos points, team, press, and gallery. |
| Private Dining | Events and group bookings — story rows, detail points, an enquiry form, and FAQ. |
| Reservations | The booking page — the Reservation Widget, hours, and the location map. |
| Contact | Enquiry form plus the location map and contact details. |
| Documentation | This page — a simple rich-text page built from the Page Hero and Rich Text modules. |
Layouts behind the templates
Every template above extends base.html, which renders the global header and footer. The two landing-page layouts extend base_lp.html, which drops the header and footer for focused, single-goal pages.
Create Your First Page
Steps
- Go to Marketing > Website > Website Pages and click Create.
- Pick a Hearth & Co. template (start with Home).
- Give the page an internal name and set its URL slug — match the demo scheme if you like, e.g.
/menu,/about,/reservations. - Click each section to edit it. The module’s fields open in the right-hand sidebar.
- Set the page title and meta description under Settings for SEO and social sharing.
- Publish.
Editing modules in place
Click any section on the page to select its module. Content lives in the Content tab of the sidebar; visual options (surfaces, columns, alignment, accent colour, fonts, padding) live in the Style tab.
Adding sections
Drag a new module from the left-hand panel into any drop zone. Every module in the Modules Reference is available to drop onto any page.
Header & Footer Content
Global partials
The header and footer are global — edit them once and the change applies to every page. The header renders the Navigation module; the footer renders the Footer module.
Editing the header
The Navigation module holds your nav links, the Reserve button, an optional phone link, and an optional open/closed status pill. On the Home page it can sit transparent over the hero and switch to a solid bar once you scroll.
Editing the footer
The Footer module is where your name, address, phone, email (NAP), opening hours, quick links, social links, optional newsletter form, and legal links live. It is also where the Restaurant / LocalBusiness structured data is emitted — see SEO & Schema.
Logo and favicon
Your logo, logo height, favicon, and default social-share image are set once in Theme settings > Global and reused across the header and footer.
Theme Settings
Colors
How colours work
Each colour in theme settings maps to a --h-* CSS variable that the whole theme reads. Hex values are converted to rgba where opacity matters (borders, the hero overlay), so set both the colour and its opacity for those fields.
| Setting | Controls |
|---|---|
| Page background | The base page surface (--h-bg), default warm white. |
| Card / panel surface | Cards, form panels, the reservation panel. |
| Soft section background | Alternating “soft” sections used to separate bands. |
| Input fill / hover row | Input fills and hover-row backgrounds. |
| Primary / Secondary / Muted text | The three-step text hierarchy used everywhere. |
| Hairline / Stronger / Input border | The three border weights (colour + opacity). |
| Accent (orange) | The single accent: buttons, links, active nav, badges. |
| Accent hover / Accent soft | Darker hover orange and the faint accent tint for chips and active backgrounds. |
| Dark surface / on-dark text + muted | The footer and any dark band, plus their text colours. |
| Hero image overlay | The scrim over hero photos (colour + opacity). |
| Form success / error | Validation states. |
Dark surfaces
Sections marked dark (the footer, the dark reservation band) remap the tokens automatically, so your accent and text stay legible without setting separate values.
Typography & Type Scale
Fonts
Two font fields drive the theme: Heading font (Cormorant Garamond by default) for display type, headings, menus, and dish names, and Body font (Inter) for everything else. Both are loaded from Google Fonts by the base layout.
Size and rhythm
| Setting | Effect |
|---|---|
| Base body font size | Root body size in px (14–20, default 16). |
| Base line height | Body line height (1.3–1.9, default 1.6). |
| Uppercase label tracking | Letter-spacing for eyebrows and small uppercase labels. |
| Link underline style | Body links: no underline (orange on hover) or underlined. |
The fluid type scale
Headings use a fluid clamp() scale that grows with the viewport, so you do not set heading sizes per page. The steps are display, h1, h2, h3, h4, a lead size for intros, the body size, plus dedicated sizes for small text, eyebrows, and dish names.
Spacing & Layout
Settings
| Setting | Effect |
|---|---|
| Base spacing unit | The smallest spacing step (2–8px) the scale is built on. |
| Grid gutter / card padding | Space between grid items and inside cards. |
| Section vertical padding (max) | The upper bound of the fluid section padding — sections breathe more on large screens. |
| Container max width | The standard content column width (default 1200px). |
| Wide container width | A roomier width for wide sections (default 1320px). |
| Container side padding (max) | The upper bound of the fluid side gutter. |
| Header height | The fixed header height, used to offset content under the sticky bar. |
Fluid by default
Section padding and side gutters use clamp(), so your “max” values apply on large screens and scale down gracefully on phones. There is no separate mobile setting to maintain.
Radius & Elevation
Radius
| Setting | Effect |
|---|---|
| Base radius | Cards, panels, images, inputs (default 10px). |
| Small radius | Tags, chips, badges, kbd hints (default 6px). |
| Pill radius | Fully rounded elements (status pills, scrollbar thumbs). |
Elevation
Three shadow steps, each a preset choice (Subtle / Soft / None):
- Small — cards at rest.
- Medium — hover and raised cards.
- Large — the mobile nav drawer, lightbox, and sticky header.
Choosing None for all three gives a flat, paper-like look that suits a minimal menu-card aesthetic.
Buttons
Settings
| Setting | Effect |
|---|---|
| Primary button style | Solid orange fill, Outline, or Ghost. |
| Button radius | Corner radius for all buttons (0 = square, high = pill). |
| Button font | Font family and weight for button labels. |
| Uppercase button text | Force uppercase labels with wider tracking. |
Button variants in modules
Modules use .h-btn--primary (the accent fill), .h-btn--secondary (outline), and .h-btn--ghost. On dark surfaces the secondary and ghost variants invert automatically so they stay readable in the footer and dark bands.
Borders & Global
Borders
| Setting | Effect |
|---|---|
| Hairline border width | The width of the theme’s thin dividers (1–3px). |
| Divider style | Solid, dashed, or dotted hairlines. |
Global
| Setting | Effect |
|---|---|
| Logo + logo height | Brand logo used in the header and footer. |
| Favicon | Browser-tab icon. |
| Default social share (OG) image | Fallback image for pages without a featured image. |
| Price range | The $–$$$$ value used in Restaurant JSON-LD. |
Business Hours & Open Status
One schedule, everywhere
The weekly schedule lives in a single place: Theme settings → Business hours. Each day has a Closed toggle and an Opens / Closes time. That one schedule feeds three things at once — the live open/closed pill in the header (and mobile drawer and hero), the weekly hours list in the footer, and the Hours section module — so they can never drift out of sync. You never type hours into a module; you set them once here.
The live open/closed pill
A small pill shows whether you are open right now (for example “Open until 10 PM”), or when you next open (“Closed · Opens tomorrow 5 PM”). It recomputes in the visitor’s browser from the schedule, including kitchens that close after midnight, and the same status appears in the header, the mobile menu, and the hero.
Turning the status pill on or off
Use the single master switch Show open/closed status in the Business hours group. When it is off, the pill is removed everywhere and the status script does nothing. The weekly hours list in the footer and the Hours section are not affected — only the live pill. Each header and hero instance also has its own Show status toggle as a secondary control.
Time format
The Time format setting (also in the Business hours group) has three options:
| Option | Result |
|---|---|
| Auto (from language) | Each language gets its natural clock — an English page shows am/pm, a Chinese page shows a 24-hour clock. |
| 12-hour (am/pm) | Forces a 12-hour clock in every language. |
| 24-hour | Forces a 24-hour clock in every language. |
Day names and times follow the site language automatically
Day names and the clock format are not stored as text — they are produced at render time from the page’s language (<html lang>) using the browser’s built-in Intl formatter. So if your site is in Chinese, every day name shows in Chinese and times use the Chinese 24-hour format — in the pill, the footer, and the Hours section — with nothing to translate by hand. Today’s row in the weekly list is highlighted with a small accent “Today” badge.
Translating the connector words
The wording around the times — “Open until”, “Closed”, “Opens”, the word for “tomorrow”, and the “Today” badge — are editable so a non-English site reads correctly. Because theme settings cannot hold free text, these live on the global Footer module, under Open/closed status labels:
| Field | Default | Notes |
|---|---|---|
| Open now | Open until {time} | {time} is replaced with the localized closing time. |
| Closed | Closed | Shown when there is no upcoming opening. |
| Closed, opens later | Closed · Opens {day} {time} | {day} = localized day name (or the word below); {time} = opening time. |
| Word for “tomorrow” | tomorrow | Used for {day} when the next open day is tomorrow. |
| “Today” badge | Today | The badge on today’s row in the weekly list. |
Edit those once on the footer (it is global), translate them into your language, and the pill, footer, and Hours section all use them. Day names and times stay automatic; only these few words are yours to translate.
Modules Reference
Menu Display (flagship)
Purpose
The Menu Display module is the centrepiece of the Menu page. It renders a complete, structured menu as a sticky “Maison Clara” sidebar of categories on the left and a multi-column grid of dishes on the right. As you scroll, the sidebar highlights the category you are reading (scroll-spy); clicking a category smooth-scrolls to it.
When to use it
Use it as the main content of your Menu page. Each category (Starters, Mains, Desserts, Wine, etc.) becomes a sidebar entry; each dish carries a name, price, description, optional photo, an optional badge, and dietary tags.
Key fields
| Field | What it does |
|---|---|
| Sidebar wordmark | The label at the top of the sticky sidebar. |
| Show item counts | Shows the number of dishes next to each category. |
| Categories > Category name / note | Each category section; the note renders in italic under the heading. |
| Categories > Dishes | Up to 40 dishes per category: name, price (free text — “$24”, “$18–$26”, “$14 / glass”), description, thumbnail, badge (Chef’s Special / Popular / New / Signature), and dietary (V / VG / GF). |
| Sidebar extras | An optional note and button in the sidebar (e.g. “Download PDF”). |
Style options
- Sidebar width, dish columns (2–4), and thumbnail size, shape (round / rounded / square), and visibility.
- Toggle badges and dietary chips.
- Scroll-spy and smooth-scroll toggles.
- Accent colour and separate fonts for dish names and descriptions.
SEO
Turn on Emit Menu structured data to output Menu / MenuItem JSON-LD with the menu name and currency you set — see SEO & Schema.
Reservation Widget (flagship)
Purpose
The Reservation Widget is the booking centrepiece of the Reservations page. It presents a heading, intro, and an optional reassurance line above a booking panel that you wire to one of three sources.
Booking modes
| Mode | Use when |
|---|---|
| Embed | You use OpenTable, Resy, SevenRooms, Tock, etc. Paste their embed/iframe code into the Embed code field. A fallback message shows if the code is empty. |
| Form | You take requests via a HubSpot form. Pick the form and it renders inside the panel, styled to match the theme. |
| Link | You send guests to an external booking page. Set the button label, URL, and an optional note under the button. |
Key fields
- Content — eyebrow, heading, intro line, and an optional reassurance line (e.g. “No card required”).
- Booking — mode plus the embed code, form, or link/label/note for the chosen mode.
- Style — accent colour, heading font, and top/bottom padding.
Tips
If your provider’s embed needs a fixed height, set it in their embed code. The fallback message is what guests see if the embed fails to load, so make it useful (“Call us on …”).
Heroes — Hero & Page Hero
Hero
The full-bleed Home hero. It carries an eyebrow, H1 headline, subhead, two buttons, a meta line, and an optional open/closed status pill, over an image or background video (with poster). Style options: overlay colour and opacity, height (full / tall / regular), and text alignment.
Page Hero
A lighter header for inner pages (Menu, About, Private Dining, Contact). It shows an eyebrow, H1, an optional subhead and meta line, over either no background or an image with an overlay. Use it where a full video hero would be too heavy.
When to use which
- Hero — the Home page, where you want a large, atmospheric first impression.
- Page Hero — every other top-of-page header.
Navigation & Footer
Navigation
The header bar. Fields: logo (image or text fallback) and link, up to 8 nav links, a Reserve button, an optional phone link, and an optional open/closed status pill. Style: transparent-over-hero, sticky-on-scroll, and accent colour. Used in the global header partial.
Footer
The site footer and your single source of truth for restaurant information.
- Brand & NAP — logo, name, one-line blurb, full address, phone (display + tel:), email, and a directions URL.
- Hours — a per-day rows repeater with an option to highlight today.
- Quick links and Social & newsletter — link columns, social icons (Lucide name or custom image), and an optional HubSpot newsletter form.
- Bottom bar — copyright (the year is added automatically) and up to 4 legal links.
- SEO / Schema — emit Restaurant / LocalBusiness JSON-LD with cuisine and price range. See SEO & Schema.
Menu Taste
Purpose
A compact “taste of the menu” section for the Home page — 3 to 6 highlighted dishes with photos, prices, descriptions, badges, and dietary tags, plus a link to the full menu. It is not the full menu; it is a teaser.
Key fields
- Content — eyebrow, heading, intro line, and a link label + URL (point it at
/hearth-preview/menu). - Dishes (3–6) — name, price, description, photo, optional badge text + style (accent / neutral), and V / VG / GF toggles.
- Style — surface, columns (2–4), thumbnail shape and size, show thumbnails / badges, accent colour, and dish-name font.
Chef Bio & Story Row
Chef Bio
A portrait beside a story, built for introducing the chef or owner. Fields: eyebrow, heading, rich-text story, an optional signature line, an optional accolades list (repeater), and an optional button. Style: portrait side and aspect ratio, accent colour, and padding.
Story Row
A general image-and-text row for telling the restaurant’s story across the About and Private Dining pages. Fields: eyebrow, heading, rich-text body, an optional meta line, and an optional button, beside an image. Style: image side (left / right), surface (white / soft), and image aspect ratio. Alternate the image side between stacked Story Rows for rhythm.
Icon Points & Rich Text
Icon Points
A set of short value propositions, each with an icon, title, and one line of text — good for an ethos band (“Sourced locally”, “Open kitchen”, “Walk-ins welcome”). Layout: row (2–4 columns) or list. Icons come from a fixed set (leaf, sprout, wheat-off, flame, utensils, star, clock, calendar, map-pin, phone, mail, check). Style includes accent colour and a point-title font.
Rich Text
A plain prose block for anything the structured modules do not cover — policies, longer notes, a press quote. Optional eyebrow and heading (h2/h3/h4), a rich-text body, surface (white / soft), alignment, and compact or regular spacing.
Gallery
Purpose
A photo grid for the room, the food, and the team. Up to 24 images, each with an optional caption.
Key options
- Layout — grid or bento.
- Grid controls — columns (2–4) and image aspect ratio (square / landscape / portrait / wide).
- Captions and a click-to-open lightbox.
- Style — section surface and top/bottom padding.
Reviews & Review Platforms
Reviews
Guest quotes in a 2- or 3-column layout. Each review has a quote, author, optional source/role, and an optional star rating. Turn on Emit AggregateRating structured data (with your business name) to mark up the ratings for search engines. Style: surface, heading alignment, accent (star) colour, and quote font.
Review Platforms
A row of platform ratings — Google, TripAdvisor, Yelp, Facebook, OpenTable, or a custom platform — each with a rating, review count, link, and an optional official logo. Use it as a trust bar near the top or bottom of a page.
Press Logos & Team Grid
Press Logos
A logo strip for press mentions or awards — up to 12 logos, each with alt text and an optional link. Options: an intro label, greyscale logos (colour on hover), top/bottom hairline dividers, and a max logo height.
Team Grid
The people behind the restaurant — up to 16 members, each with a photo, name, role, and a short optional bio. Style: columns (2–4), photo shape (round / square), card text alignment, role accent colour, and a name font.
Hours Block & Location Map
Hours Block
Opening hours as a per-day rows repeater (1–7 rows), with a “closed” toggle per day and an option to highlight today’s row. It can show a second companion column (an eyebrow, heading, text, a link, and a phone number) for things like holiday notes or a kitchen-closing time. Style: surface, today highlight, accent colour, and padding.
Location Map
Your address and a map side by side. Contact details (address lines, phone display + tel:, email) sit beside an embedded Google Maps iframe (paste the embed URL). Optional transit and parking notes, a directions link, map side (left / right), section surface, and a minimum map height.
Reservation CTA & Inquiry Form
Reservation CTA
A full-width band that nudges guests to book — headline, supporting line, a Reserve button, and an optional phone link. Surface can be accent (orange) or dark. Drop it near the bottom of most pages.
Inquiry Form
A two-column enquiry section for private dining, events, and general contact. The left column holds an eyebrow, heading, intro, and optional detail points (icon + title + text — e.g. capacity, lead time); the right column holds a HubSpot form with its own title and subtitle. Style: section surface, form position (left / right), an optional card around the form, accent colour, and a point-title font.
FAQ & Dietary Legend
FAQ
An accordion of questions and rich-text answers (up to 30), with a split or centered layout and an option to open the first item. Turn on Emit FAQPage structured data to mark up the questions for search engines. Style: surface, accent colour, and a question font.
Dietary Legend
A small key explaining the dietary abbreviations used on the menu (V, VG, GF, and so on). Each item has an icon, an abbreviation, and its meaning. Pair it with the Menu Display page so guests know what the chips mean. Options: optional heading, surface, and alignment.
Blog Modules & Search
Blog Listing Hero
The header for the blog listing page — eyebrow, H1, and a rich-text intro, with an option to only show on the main listing page (so topic/author pages keep their dynamic headers). Alignment: centered or left.
Blog Post Header
The top of an individual post — toggles for topic tag, author, publish date, read time (with a words-per-minute setting), and the featured image, plus text alignment. It reads the post’s data from HubSpot directly. Emits BlogPosting context for the post.
Related Articles
A grid of 2–4 related posts at the foot of an article, with optional excerpt and meta.
Search Field
A native HubSpot search box (it posts to the standard search-results page). Optional heading, placeholder, surface, and alignment.
Page Recipes
Home
Module flow
- Hero — full-bleed image/video, headline, two buttons, status pill.
- Icon Points — the ethos band (3–4 value props).
- Menu Taste — a few signature dishes linking to
/hearth-preview/menu. - Chef Bio — portrait + story.
- Gallery — room and food photos.
- Review Platforms + Reviews — a trust bar and guest quotes.
- Press Logos — press mentions.
- Hours Block + Location Map — when and where.
- Reservation CTA — the closing booking band.
Keep the hero, the menu teaser, and the closing reservation band; reorder or remove the middle sections to taste.
Menu
Module flow
- Page Hero — the menu page title.
- Menu Display — the full structured menu (the heart of the page).
- Dietary Legend — the key for the V / VG / GF chips.
- Rich Text — optional notes (allergens, service charge, seasonal disclaimer).
- Reservation CTA — book a table.
Enter your categories and dishes in Menu Display, then mirror the abbreviations you used in the Dietary Legend so they match. Turn on the Menu JSON-LD in Menu Display before launch.
About
Module flow
- Hero or Page Hero — the page header.
- Story Row ×2 — the origin story; alternate the image side.
- Chef Bio — the kitchen leadership.
- Icon Points — what the restaurant stands for.
- Team Grid — the people.
- Press Logos + Gallery — credibility and atmosphere.
- Reservation CTA — the close.
Private Dining
Module flow
- Page Hero — the private-dining header.
- Story Row ×3 — the spaces, the menus, the service.
- Icon Points — capacity, minimum spend, lead time, AV, etc.
- Inquiry Form — the enquiry, with detail points in the left column and a HubSpot form on the right.
- FAQ — common questions (turn on FAQPage JSON-LD).
- Reservation CTA — or a direct prompt to enquire.
Reservations
Module flow
- Page Hero — the reservations header.
- Reservation Widget — the booking panel (embed, form, or link).
- Rich Text — your booking policy (party size, cancellations, deposits).
- Hours Block — when you take bookings.
- Location Map — where to find you.
Choose the Reservation Widget mode that matches your booking provider and fill in the matching fields only.
Contact & Blog
Contact
- Page Hero — the contact header.
- Inquiry Form — general enquiries with contact detail points beside a HubSpot form.
- Location Map — address, phone, email, map.
- Reservation CTA — book instead of writing.
Blog
The blog uses HubSpot’s blog system with theme modules: the Blog Listing Hero on the listing page, the Blog Post Header and Related Articles on each post, and a Search Field wherever you want native search. Posts emit BlogPosting structured data.
SEO & Schema
Structured Data (JSON-LD)
What the theme emits
| Type | Where | Toggle |
|---|---|---|
| Restaurant / LocalBusiness | Footer module | “Emit Restaurant / LocalBusiness JSON-LD” (with cuisine + price range). |
| Menu / MenuItem | Menu Display module | “Emit Menu structured data” (with menu name + currency). |
| FAQPage | FAQ module | “Emit FAQPage structured data”. |
| AggregateRating | Reviews module | “Emit AggregateRating structured data” (with business name). |
| BlogPosting | Blog post header / post template | Emitted for blog posts. |
Avoid double emission
The Restaurant/LocalBusiness block belongs in the footer only, so it appears once per page. Do not also enable a competing business block elsewhere. Emit the Menu JSON-LD on the Menu page only — not on Home where Menu Taste is just a teaser. Each schema toggle is off-by-safe-default where duplication would be a risk; turn each on intentionally on the one page that owns it.
Meta, Titles & Open Graph
Per-page metadata
The base layout outputs the page title, meta description, and a canonical URL from each page’s Settings tab. Fill those in for every page.
Open Graph & Twitter
The layout also emits Open Graph and Twitter Card tags. The share image is the page’s featured image if set, otherwise the Default social share (OG) image from Theme settings > Global. Set a strong default so any page shared without its own image still looks intentional.
Favicon
Set the favicon under Theme settings > Global; the layout links it in the document head.
Best Practices
Replacing Placeholder Images
The demo uses placeholders
The starter content ships with Unsplash placeholder photography. Before launch, replace every image with your own — the room, the dishes, the team, the hero.
How
- Click the section, open its image field, and choose Replace.
- Upload to the HubSpot File Manager or pick an existing file.
- Always set descriptive alt text (it helps SEO and accessibility).
Sizes
- Hero / full-bleed backgrounds: ~2400px wide, web-optimised JPG.
- Dish thumbnails and cards: ~800–1200px square or 4:3.
- Background video (Hero): a web-optimised ~1080p MP4 with a poster image always set.
Responsive & Accessibility
Responsive behaviour
- Grids collapse from 4/3 columns to 2 on tablets and 1 on phones.
- The Menu Display sidebar becomes a horizontal/stacked nav on small screens; tables and code blocks scroll horizontally rather than overflow.
- Type, section padding, and gutters scale fluidly with the viewport — there is no separate mobile size to maintain.
Accessibility
- Always write alt text for images and accessible labels for icon-only buttons and social links.
- Map embeds carry an iframe title — set a meaningful one in Location Map.
- The accent orange on warm white meets contrast on text and buttons; if you change the accent, recheck contrast against your background.
- Set the map / directions and phone links so keyboard and screen-reader users reach them.
FAQ
Can I change the fonts?
Yes — set Heading font and Body font in Theme settings > Typography. The defaults are Cormorant Garamond and Inter.
Where do opening hours live?
In two places: the Footer module (global, shown site-wide) and the Hours Block module (on the Reservations and Home pages). Keep them consistent.
How do I take bookings?
Use the Reservation Widget on the Reservations page in Embed, Form, or Link mode depending on your provider. See Modules Reference > Reservation Widget.
Why is my menu not showing rich results?
Turn on “Emit Menu structured data” in Menu Display, set the menu name and currency, and make sure the Menu page is the only place that emits it. Validate with a structured-data testing tool after publishing.
The accent colour is everywhere — is that intended?
The theme uses one accent on purpose. If it feels heavy, most modules let you set a per-section accent colour, or you can soften the global accent in Theme settings > Colors.