Overview

An evening-toned HTML template for a restaurant group with several venues under one brand: a dining room, a sushi counter, a pizzeria, a cocktail bar, a café & pâtisserie and a grill. Mesara ships three home pages, a dark and a light theme, right-to-left support, and group logic that is worked out rather than typed in: which room is open now, the free tables in each room for your day and party, the price of a private evening, gift cards valid in every room with a balance check, events across the group with seats left, careers, and a shop with collection at a room.

What’s included

• 3 home pages, each with its own scroll moment: The Group (a round table turns and is laid for each room in turn), Tonight (aperitivo, dinner and nightcap cards stack as you scroll) and Gifts & Gatherings (the gift card turns round in 3D)
• The Facade Lights preloader: a street of six facades lights its windows room by room
• Dark (the house teal) and light mode on one switch in every header, remembered between visits and applied before the page paints
• Right-to-left stylesheets and a flag language picker in every header
• WebGL layers — terrazzo chips under the night bands and the double arch in stained glass in the footer — tinted by the theme colours
• Open now for every room, live, in the header, the finder, the cards and the footer
• The venue finder: kitchen, neighbourhood, price, open now and a search over dishes, with a map that follows the room
• One booking flow for all six rooms: each room’s own days, party limit and time slots; bookings listed in My Bookings
• Private dining: rooms that fit your party and an estimate from the minimum spend, the menu and service
• Gift cards: four designs, any amount from $25 to $1,000, email or a posted card, a live card preview and a balance check
• Events across the group with repeat rules, filters and seats; careers with filters and an application form
• The shop: cakes, sushi boxes, kits and experiences with collection at a room, a bag, coupon, tax, checkout and wishlist
• Fully responsive, written to W3C standards

Getting Started

Thank you for choosing Mesara. Follow the steps below to get your site live.

1. Open locally

Unzip the downloaded package and open mesara/index.html in any modern browser. No build tools or server are required — the finder, booking, estimator, gift cards, events and shop all work straight from the files.

2. Deploy to a server

Upload the contents of the mesara/ folder to your hosting provider (FTP or your control panel) and open your domain.

3. Customise

All custom styling lives in assets/css/style.css (numbered Table of CSS) and assets/css/responsive.css. Colours and fonts are CSS variables — see Colors & Fonts. Rooms, hours, menus, private rooms, events, roles, gift cards and products live in one place — see The Group’s Logic.

File Structure

Folder Structure

The package unzips to Documentation/ (this guide) and mesara/, the template:

mesara/
├── *.html                              the 32 pages, all in the root
├── sendmail.php                        the AJAX mail handler
└── assets/
    ├── css/                            style + responsive (each with an .rtl twin), plugins/
    ├── js/                             main.js (39 blocks), plugins/
    ├── fonts/theme-icons/              the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per room or use
        ├── banner/                      24 files
        ├── bar/                         14 files
        ├── blog/                        6 files
        ├── cafe/                        13 files
        ├── dining/                      16 files
        ├── events/                      6 files
        ├── flags/                       6 files
        ├── gift/                        4 files
        ├── grill/                       3 files
        ├── logo/                        8 files
        ├── menu/                        3 files
        ├── people/                      10 files
        ├── pizza/                       8 files
        ├── rooms/                       8 files
        ├── shop/                        15 files
        ├── sushi/                       12 files
        ├── table/                       19 files
        └── team/                        11 files

Colors & Fonts

The design is driven by CSS variables at the top of style.css. Colours used with transparency have an -rgb twin (for example --ms-copper-rgb) — change both together.

The house teal is the ground of the default theme, deep teal the bands and the footer, copper the buttons, rules, diamonds and small accents (copper buttons carry teal text). Every room has its own colour, set by a .tone-<room> class on its cards, panels and booking summary:

Fonts

Two Google Fonts: Jost (the light spaced capitals of the titles, body, navigation, buttons) and Gilda Display (the large faint words behind the titles, the room names, prices and figures). Swap them in the Google Fonts link and the --ms-ff-body / --ms-ff-display variables.

Logo

The logo is a double arch — two doorways sharing one pillar, a half sunburst rising in each — over MESARA in spaced capitals. It ships as PNG files in assets/img/logo/: logo-light.png (light lettering, the default theme), logo.png (teal lettering, light grounds), logo-row-light.png / logo-row.png (the arch beside the name, the mobile menu and the gift card), mark.png, ring.png (the rotating ring on page titles) and favicon.png.

Dark & Light Mode

The house teal is the default theme. Every header has a switch to the light theme (stone grounds, white surfaces, teal ink); the choice is saved under mesara-theme and applied by a one-line script in the <head> before the page paints. The light values sit in [data-theme="light"] { … } right after :root. Blocks with the class is-night (the reserve band, the figures band, a room’s menu, the private dining estimate, the gift card, the balance check, the sidebar call-outs and the footer) stay teal in both themes. To open the site light for first-time visitors, add data-theme="light" to the <html> tag of each page.

The Group’s Logic

Every figure comes from one data block, JS block 09 Group Data near the top of main.js (var GROUP). Edit it once and the cards, hours, slots, prices and totals follow.

Opening hours and slots

A room is open now when the time falls inside one of today’s spans, or inside last night’s span that runs past midnight. Its slots run from each opening every interval up to the last seating; on today’s date times within the next half hour drop out. Some tables show as taken so the demo looks lived-in: a stable value from the room, the date and the minute, busier at the weekend, at prime time and for parties of five or more — replace slotsFor() (block 10 Group Clock) with your reservations system’s answer.

The booking flow

Room → date (that room’s closed days greyed) → guests (up to the room’s limit; at the limit the page points to private dining) → time (that room’s free slots for the day and party) → details. Continue never blocks; only Confirm checks the details. A “Book” button on any room’s card carries the room to the flow (the home’s form carries the room, date and guests too) through the browser’s storage, so links stay plain pages. Confirmed bookings are kept in the browser and listed on my-account.html, where they can be cancelled.

Private dining estimate

Gift cards

The bag, the wishlist, the coupon and the bookings are kept in the browser (localStorage). The first visit starts with a small demo bag, wishlist and booking; to start empty, set the demo lists in doShop() and doMyAccount() to []. Checkout, booking, seats, enquiries and applications confirm on screen with a reference — connect them to your own systems.

WebGL Layers

Two small fragment shaders draw the moving layers, each in one canvas: terrazzo — angular stone chips in copper, stone and teal drifting slowly under the night bands — and glass — the double arch drawn in leaded stained glass in the footer, the rooms’ colours in its panes and a warm light moving behind it.

<canvas class="ms-gl" data-gl="terrazzo" aria-hidden="true"></canvas>

• Colours — each layer reads --gl-1, --gl-2, --gl-3 and --gl-alpha from CSS.
• Performance — a layer runs only while on screen; reduced motion gets one still frame; without WebGL the section’s own background (and the footer’s faint arch image) shows.
• Remove one — delete the canvas; nothing else depends on it.

RTL (Right To Left)

Right to left comes from the stylesheets, not from separate pages. The language picker beside the theme switch lists the languages that read left to right and right to left; choosing Arabic or Hebrew stores the direction (mesara-dir) and reloads, and the head script sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute. Nothing is translated. To make a page right to left for good, add dir="rtl" to its <html> tag and swap:

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 39 numbered blocks; each is a self-contained doSomething() that skips pages without its section:

• 01 — Preloader
• 02 — Sticky Header
• 03 — Offcanvas Menu
• 04 — Scroll Reveals
• 05 — Back To Top
• 06 — Anchor Scroll
• 07 — Light & Dark Mode, Direction
• 08 — WebGL Layers
• 09 — Group Data
• 10 — Group Clock
• 11 — Custom Select
• 12 — Counters & Rings
• 13 — Hero Sliders
• 14 — Card Sliders
• 15 — Accordion
• 16 — Filter Tabs
• 17 — Grid Search
• 18 — Newsletter
• 19 — Choice Cards
• 20 — Doorway Light
• 21 — Table Turn
• 22 — Evening Stack
• 23 — Gift Turn
• 24 — Venue Finder
• 25 — Quick Booking
• 26 — Table Booking
• 27 — Private Dining
• 28 — Gift Cards
• 29 — Events
• 30 — Careers
• 31 — Contact Form
• 32 — Shop
• 33 — Account Forms
• 34 — My Bookings
• 35 — Article Tools
• 36 — Demo Forms
• 37 — Launch Countdown
• 38 — Tabs
• 39 — FAQ Search

Images

The download ships with neutral placeholder images at the correct sizes. Replace them with your own photos using the same file names. Images are grouped inside assets/img/:

The logo files, the gift card designs, the terrazzo table top and the flags are included. All demo photography on the live preview is for preview purposes only and is not included in the download.

Contact Form

The contact form posts to sendmail.php, a lightweight AJAX mail handler; the message appears under the button without reloading. The newsletter, booking, enquiry, gift card, seats, application, comment, checkout and account forms confirm on screen and are ready to connect to your own systems. To activate the mail handler:

1. Set your email address

$email = 'example@example.com';

2. Upload to a PHP host

The form needs PHP mail() support. Locally or on a static host it shows an “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

• Create v3 keys for your domain in the Google reCAPTCHA admin console
• In sendmail.php, replace YOUR_RECAPTCHA_V3_SECRET_KEY with your secret key
• In contact.html, add a hidden token field inside the form and load the reCAPTCHA script with your site key before </body>:

<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
  grecaptcha.ready(function () {
    grecaptcha.execute('YOUR_SITE_KEY', { action: 'contact' }).then(function (token) {
      document.getElementById('g-recaptcha-response').value = token;
    });
  });
</script>

Credits

• Bootstrap 5.3.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: Jost, Gilda Display

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embeds and the video popup.

Support

If you have any questions or need help with the template, please reach out through the marketplace where you purchased the template: open the item there and send us your question from its support page. We aim to respond within 24–48 hours.