Overview

A dark, moody HTML template for a chef’s bistro run as a guest-chef residency: a new chef and a new menu of global small plates every month, twelve seats at the counter, evenings with the chef and a shop of the chefs’ cookbooks. Cuisora ships three home pages, a dark and a light theme, right-to-left support, and logic that is worked out rather than typed in: the chef in residence and the next ones from the visitor’s date, the nights left in the residency, the plates by heat and diet, a plate planner for the table, counter seats stool by stool, table booking from the bistro’s hours, the next date of every event, a private-dining estimate, gift sets priced as they fill and a shop with a bag, coupon, shipping and tax.

What’s included

• 3 home pages, each with its own scroll moment: Portrait Carousel (the year’s twelve chefs turn round a ring month by month and land on the chef in residence), Chef’s Notebook (the notebook’s pages turn over its spine, a plate on each) and Wok Toss (the ingredients arc up out of the wok and land back in it)
• A dark slate theme by default and a light theme 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: a right-to-left language turns any page around
• WebGL layers — Sketchbook, pencil plates, bowls and sprigs drawing themselves in and fading, and the footer’s plate with the month’s chef’s name orbiting it — tinted by the theme colours
• The residency from the date: the chef now and next on every page, the nights left, a month grid of service nights, the year’s chefs
• Small plates with a heat filter from No Heat to Fierce, diet marks, course tabs, a month picker for any chef of the year and a plate planner for the table
• Counter seats: twelve stools drawn seat by seat for two sittings, a wine pairing and a deposit a seat
• The cookbook shop: categories, price filter, sort and search, signed copies, the book page, bag, coupon, free-shipping meter, tax, checkout with an order number, wishlist
• Gift sets: a box of three, a box of five or the year box filled with the chefs’ books, 10% off when full, a wrap and a card
• Four-step table booking, events from repeat rules with seats left, and a four-step private-dining estimate
• Team with the chefs’ signatures, chef profile, gallery, journal, FAQ with search, account pages, coming soon, 404
• Ticket Rail preloader, Plate Up reveals, word-rise titles, the chef’s signature writing in on hover, Swiper sliders and Fancybox video popups
• Fully responsive, W3C-valid, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open cuisora/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the residency clock, the menu filters, the counter, the booking, the estimate, the gift sets and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the cuisora/ folder to your hosting provider using an FTP client (such as FileZilla) or your hosting control panel. Once uploaded, navigate to your domain and the template will load immediately.

3. Customise

All custom styling lives in assets/css/style.css (with a numbered Table of CSS at the top) and assets/css/responsive.css. Colours and fonts are controlled by CSS variables — see Colors & Fonts. The guest chefs, their plates, the hours, the counter, the events, the rooms, the books and the shop rules live in one place — see Residency Logic.

File Structure

Below is an overview of the key files and folders included in this template.

Folder Structure

The package unzips to two folders: Documentation/ (this guide) and cuisora/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

cuisora/
├── *.html                              the 31 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the forms
└── assets/
    ├── css/
    │   ├── style.css                   all custom styles, numbered Table of CSS
    │   ├── style.rtl.css               the right-to-left twin of style.css
    │   ├── responsive.css              breakpoints 1399 / 1199 / 991 / 767 / 575
    │   ├── responsive.rtl.css          the right-to-left twin of responsive.css
    │   ├── fontawesome-all.css         Font Awesome Free, loaded locally
    │   └── plugins/                    vendor stylesheets
    │       ├── bootstrap.min.css
    │       ├── bootstrap.rtl.min.css   Bootstrap for right-to-left pages
    │       ├── jquery.fancybox.min.css
    │       └── swiper-bundle.min.css
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (34 blocks)
    │   └── plugins/                    vendor scripts
    │       ├── bootstrap.bundle.min.js
    │       ├── gsap.min.js
    │       ├── jquery-3.7.1.min.js
    │       ├── jquery.fancybox.min.js
    │       ├── ScrollTrigger.min.js
    │       └── swiper-bundle.min.js
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── banner/                      13 files
        ├── blog/                        9 files
        ├── dishes/                      55 files
        ├── faces/                       5 files
        ├── flags/                       6 files
        ├── icons/                       16 files
        ├── logo/                        6 files
        ├── menu/                        3 files
        ├── shop/                        15 files
        ├── sign/                        15 files
        ├── tall/                        2 files
        ├── team/                        15 files
        ├── textures/                    2 files
        └── wok/                         8 files

To publish the site, upload the contents of cuisora/ to your web root. Photos keep their folder, file name and size when you replace them, so no page needs editing.

Colors & Fonts

The whole design is driven by CSS variables declared at the top of style.css. Change a token once and every section, button and card updates. Colours used with transparency have an -rgb twin (for example --cu-gold-rgb) — change both together.

Slate is the room: the ground of every page, the header and the footer, with the deeper slate for the night bands and the panel for cards on them. Gold draws the rules, the prices, the stars, the pass edge of every reveal and the buttons (gold buttons carry slate text). Menu paper is the printed sheet the month’s menu and the counter tickets are set on. Chilli is kept for the heat marks, Sale and “few seats left”. --cu-bg, --cu-surface, --cu-cream, --cu-heading and --cu-text are the semantic names the components use — the light theme swaps those (see Dark & Light Mode).

Fonts

Two Google Fonts are loaded in the head of each page: Raleway (headings in spaced capitals, body, navigation and buttons) and DM Mono (eyebrows, labels, prices, dates and figures). Swap them by editing the Google Fonts link and the --cu-ff-display / --cu-ff-body / --cu-ff-mono variables. The chefs’ signatures are images in img/sign/, so no script font is loaded.

Logo

The logo is a plate seen from above with a tasting spoon resting across its rim, beside CUISORA in spaced Raleway capitals. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the light theme’s header and the paper header of Home 3
• logo-light.png — for slate grounds: the header, the footer and the preloader in the dark theme
• logo-word.png — the word alone (the preloader’s last ticket)
• mark.png / mark-ink.png — the plate alone in gold and in slate ink (the tickets, the book covers)
• favicon.png — the browser tab icon

The logo’s lettering appears only inside the images. To use your own logo, replace these files; the header sizes the logo by its height, so a wider or narrower file needs no CSS change.

Dark & Light Mode

Cuisora opens dark: the slate room is the default and needs no attribute. Every header (and the mobile menu) has a theme switch that turns the lights on. The choice is saved in the browser under the key cuisora-theme and applied by a one-line script in the <head> before the page paints, so a light visitor never sees a dark flash. The switch sets data-theme="light" on the <html> tag.

• Tokens — the light values sit in one block, [data-theme="light"] { … }, right after :root in style.css. Change a light colour there.
• Bands that stay slate — sections with the class is-night (the portrait carousel, the menu sheet band, the voices, the counter tonight, the booking and estimate panels, the page titles, the footer) are slate in both themes.
• Printed sheets — the menu sheets and the counter tickets take cu-on-paper and keep their paper and ink in both themes.
• Signatures and icons — the chefs’ signatures are light strokes that turn dark on a light ground on their own; each illustrated icon ships in a slate and a light ink and the right one shows by theme and ground.
• Start light — to open the site light for first-time visitors, add data-theme="light" to the <html> tag of each page; the switch still works and is still remembered.

Residency Logic

The figures on every page come from one data block, JS block 09 Cuisora Data near the top of main.js (var CUISORA). Edit it once and the chefs, plates, prices, dates, seats and totals follow. Prices are in US dollars; times are minutes after midnight (1080 = 6:00 pm); weekdays run 0 = Sunday to 6 = Saturday.

The month’s chef

Any element with data-chef="now" (or next, prev, +2, or a month such as m3) is painted with that chef: its data-c fields take the name, city, cuisine, portrait, signature and book, and its data-plate items take the plates. The pages are written with one month’s chef and repaint from the visitor’s date, so the residency is always current.

Counter seats

A booking takes up to 4 free stools for one sitting. The price is the month’s counter menu a seat, plus the pairing a seat if chosen; the deposit a seat is paid now and the rest on the night.

Events

Every event repeats on its weekday of the month, so its next dates are always ahead of the visitor:

Private dining

Only the rooms that can seat the party are offered. The estimate is the room hire, plus the menu by the head for every guest, plus the extras, plus 12% service on the food and extras; a quarter of it holds the date.

How a gift set is priced

A gift set costs its box, plus each book at its shop price (a signed copy $8 more), less 10% of the books when every place is filled, plus the card if one is written.

How the shop totals

The bag (books and gift sets), the wishlist, the applied coupon and the booked counter seats are kept in the browser (localStorage), so they follow the visitor from page to page. The first visit starts with a small demo bag and wishlist so every shop page has something to show; to start empty, set the two demo lists in doShop() (block 28 Cookbook Shop) to []. Checkout, table booking, counter seats, events and the private-dining enquiry confirm on screen with a reference — connect them to your own systems to take real orders and bookings.

WebGL Layers

Two small WebGL shaders draw the moving layers: Sketchbook — pencil sketches of plates, bowls, cups and sprigs that draw themselves in and fade on the page titles and the slate bands — and the Orbit — a glazed plate in the footer with the month’s chef’s name turning round it, taken from the date. Each is one canvas:

<canvas class="cu-gl" data-gl="sketch" aria-hidden="true"></canvas>

• Colours — each layer reads three colours and an opacity from CSS variables on its canvas or section: --gl-1, --gl-2, --gl-3 and --gl-alpha. The theme switch repaints them.
• Performance — a layer only runs while its section is on screen and the tab is visible. Visitors who prefer reduced motion get one still frame. Without WebGL, the section’s own background shows.
• Remove one — delete the canvas; nothing else depends on it.

RTL (Right To Left)

Cuisora is RTL-ready: the layout with its paddings and margins, the sliders and the animations all mirror. Right to left comes from the stylesheets, not from separate pages: the language picker (a flag and a code) beside the dark / light switch lists the languages that read left to right and right to left. Choosing Arabic stores the language and the direction (keys cuisora-lang and cuisora-dir) and reloads; the one-line script in <head> then sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute before the page paints. Nothing is translated — you bring your own right-to-left copy. To make a page right to left for good:

1. Set The Direction

Add dir="rtl" to the page’s <html> tag (and set lang to your language):

<html lang="en" class="no-js" dir="rtl">

2. Swap Three Stylesheets

The scripts read the direction from the dir attribute: sliders and every move that must mirror follow it on their own. Prices, dates and the open notebook keep reading left to right inside their rows.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 34 numbered blocks (see the JS INDEX comment at the top of the file):

• 01–08 — Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Layers. The core every page shares: the Ticket Rail preloader, the header, the Plate Up reveals, the theme and direction switch and the WebGL layers.
• 09–10 — Cuisora Data, Residency Clock. Cuisora Data holds every figure; Residency Clock works out the chef in residence from the date, the next chefs, the nights left, open now and the next date of every event.
• 11–18 — Custom Select, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, sliders, accordions, filters, search, forms.
• 19–21 — Portrait Carousel, Chef's Notebook, Wok Toss. The three home pages’ scroll moments.
• 22–34 — Counter Seats, Table Booking, Events, Private Dining, Menu Filters & Plate Planner, Contact Form, Cookbook Shop, Account Forms, Gift Set Builder, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: counter seats, table booking, events, private dining, the menu filters and plate planner, contact, the cookbook shop, accounts, gift sets, the journal, FAQ.

Each block is a self-contained doSomething() function that safely skips pages where its section is not present — you can delete any block you do not need. Every animation respects prefers-reduced-motion automatically: content appears in its final state and the scrubbed scenes rest in place.

Images

The download package ships with neutral placeholder images so you can see every layout at the correct dimensions. Replace them with your own photos using the same file names, or update the src attributes. Images are grouped inside assets/img/:

The logo files, the illustrated icons, the chefs’ signatures, the wok, the language flags and the textures are included and ready to use. All demo photography shown on the live preview, the book covers among it, is for preview purposes only and is not included in the download.

Contact Form

The contact form and the comment form post to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. The newsletter, table booking, counter seats, event booking, private-dining enquiry, checkout, account, login, register and forgot-password forms are demo forms: they confirm on screen and are ready to connect to your own systems. To activate the mail handler on your server:

1. Set your email address

Open sendmail.php and replace the placeholder recipient at the top of the file with your own address:

$email = 'example@example.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support (virtually every shared host). It will not send from your local computer or from a static-only host — there the form shows a friendly “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

Invisible reCAPTCHA v3 spam protection is already built into the handler. It stays dormant until the form submits a token — that is why no badge or checkbox appears out of the box. To switch it on:

• Create v3 keys (a site key and a secret key) 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 just before </body>:

<!-- inside the form -->
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

<!-- before the closing </body> tag -->
<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>

Once the token field is present, sendmail.php verifies every submission with Google and rejects low-score (bot) requests.

Credits

This template is built using the following open-source libraries and resources.

• Bootstrap 5.3.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: Raleway, DM Mono

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 popups.

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.