Overview

A precise, animated HTML template for seasonal restaurants with an open kitchen, in ink on ivory with night bands and a glaze-rust accent. Saisona ships three home pages, a light and a dark theme, right-to-left support, and restaurant logic that is worked out rather than typed in: an à la carte that changes by the week number and the season, a fourteen-allergen matrix with filters, booking by seating area with live seats per time slot, the kitchen’s day live, and careers that set every open role beside the person it works with.

What’s included

• 3 home pages, each with its own scroll moment: plates sliding along the pass from the kitchen to the dining room, the brigade lining up portrait by portrait, one ingredient staying put while the dishes made from it pass by
• The weekly à la carte: 67 dishes, each on for its own weeks of the year, with new-this-week and last-week marks; a week switcher, course, diet and free-from filters, search, and an order pad that totals the table
• The fourteen-allergen matrix for every dish of the week, with free-from filters
• Booking by seating area — chef’s counter, dining room, bar — in four steps with the seats left per slot; My Bookings with cancel
• The year in weeks: pick any week for its season, dates, produce at its peak and its menu
• Careers: open roles beside the brigade, filters and a four-step application
• Gift cards in four seasonal designs with a live card, a code and an expiry date
• Light and dark 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 Ceramic Glaze under the night bands and a plated dish in 2.5D in the footer, tilting in a moving light
• Tweezer Plating preloader, Counter Slide reveals, the ingredient line on hover, Swiper sliders, Fancybox
• Growers, the bar, the open kitchen, seating areas with a floor plan, gallery, journal with five post formats, FAQ with search, accounts, coming soon, 404
• Fully responsive, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open saisona/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the menu, the allergen matrix, booking, gift cards and the footer’s 2.5D dish all work straight from the files.

2. Deploy to a server

Upload the contents of the saisona/ 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. Dishes, allergens, seating areas, hours, the brigade and the open roles live in one place — see Restaurant 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 saisona/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

saisona/
├── *.html                              the 30 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 (15 sections)
    │   ├── 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 LTR + RTL, Swiper, Fancybox)
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (36 blocks)
    │   └── plugins/                    jQuery, Bootstrap, GSAP, ScrollTrigger, Swiper, Fancybox
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── banner/                      2 files
        ├── blog/                        6 files
        ├── dishes/                      31 files
        ├── faces/                       10 files
        ├── flags/                       6 files
        ├── hero/                        9 files
        ├── icons/                       60 files
        ├── kitchen/                     10 files
        ├── logo/                        5 files
        ├── menu/                        3 files
        ├── plates/                      15 files
        ├── rig/                         4 files
        ├── room/                        7 files
        ├── season/                      4 files
        ├── tall/                        6 files
        └── team/                        10 files

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 --sa-rust-rgb) — change both together.

Ivory is the ground and ink the type, the frames and the buttons. Night is the dark bands (the pass, Home 2). Stone is the tonal fields, chips and filters. Glaze rust is the small signal: the button corners, new-this-week flags, the current week and season, the focus ring; rust text is its partner for small text on ivory, rust on night for dark grounds. --sa-bg, --sa-surface, --sa-heading and --sa-text are the semantic names the components use — the dark theme swaps those (see Light & Dark Mode).

Fonts

Two Google Fonts are loaded in the head of each page: Fjalla One (condensed capitals for the titles, navigation, dish names and buttons) and Crimson Pro (the body, leads, and the big outlined “ghost” words set behind the titles). Swap them by editing the Google Fonts link and the --sa-ff-head / --sa-ff-body variables.

Logo

The logo is the week sign — four crossed strokes with a rust garnish dot in the middle — beside SAISONA in spaced capitals. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the docked header, the offcanvas, the footer
• logo-light.png — over photographs and on night grounds, and in dark mode
• mark.png / mark-light.png — the mark alone (the preloader plate, the two-column menu)
• favicon.png — the browser tab icon

Light & Dark Mode

Every header (and the mobile menu) has a theme switch. The choice is saved in the browser under the key saisona-theme and applied by a one-line script in the <head> before the page paints. The switch sets data-theme="dark" on the <html> tag.

• Tokens — the dark values sit in one block, [data-theme="dark"] { … }, right after :root.
• Bands that stay dark — sections with the class is-night (the pass, Home 2, the bar list) are night in both themes. A light card inside one takes sa-on-light.
• Icons — every illustrated icon ships in a day ink and a night ink; the right one shows by itself.
• Start dark — add data-theme="dark" to the <html> tag of each page; the switch still works.

Restaurant Logic

The figures on every page come from one data block, JS block 04 Saisona Data near the top of main.js (var SA). Edit it once and the menus, matrices, cards, slots and totals follow. Prices are in US dollars; times are minutes after midnight (1080 = 6:00 pm); weekdays run 0 = Sunday to 6 = Saturday; weeks are ISO week numbers (weeks start on Monday).

The weekly à la carte

The menu of a week is every dish whose window holds the week number, in course order; a dish is marked New This Week in its first week and Last Week in its last. Across the year a week holds between 12 and 21 dishes (week 43: 19). The pages are drawn for the week they were built in; block 05 Week Engine redraws every week-dependent block for the visitor’s own week with the same renderers, so a dish appears and leaves on its weeks.

The order pad

Booking by seating area

Seats left in a slot = the slot’s covers minus the evening’s other bookings (a steady figure worked out from the date, fuller on Friday and Saturday, so the demo looks lived-in) minus the tables booked from this browser. Replace seatsLeft() in block 30 Table Booking with your own reservations. Continue never blocks; Confirm checks everything and gives a reference, and the booking appears in My Bookings.

The kitchen’s day

Block 22 shows the step the brigade is on, what is open now, and each area’s next bookable service; a service step on a day without that service becomes prep time; Mondays are closed.

Careers

Gift cards

Set values $50, $75, $100, $150, $200, or your own amount from $25 to $500; four seasonal designs; by email (free) or printed by post ($4.50); valid 24 months from the day it is sent. Example: your own $60 by post = $64.50 (block 32).

Motion & WebGL

• Tweezer Plating (preloader) — tweezers set a pea shoot, a viola and a beetroot gel dot on a plate bearing the mark, then the plate slides away.
• Counter Slide (reveals) — add sa-slide to a photo frame: the frame opens from one side while the photo slides in from the other. sa-rise on text gives a soft rise.
• The pass (block 20), the line-up (block 24) and the ingredient (CSS position: sticky) are moved by their own section’s travel; nothing pins the page.
• The ingredient line — a card with data-ing="…" types those words into its .ing-line on hover.
• Ceramic Glaze (block 10) — a slow speckled stoneware glaze under the night bands: <canvas class="sa-gl" data-gl="glaze" aria-hidden="true">; it reads --gl-1, --gl-2, --gl-3 and --gl-alpha.
• The plated dish in 2.5D (block 23) — the footer’s plate cut-out is moved cell by cell by its depth map (the data-depth digits on the canvas) and shaded by a light that circles it; it follows the pointer. It runs in Canvas 2D, so it also works from the files.
• Every animation respects prefers-reduced-motion: content appears in its final state and the canvases show one still frame.

RTL (Right To Left)

Right to left comes from the stylesheets, not from separate pages: the language picker lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the direction (key saisona-dir) and reloads; the script in <head> then sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute. Nothing is translated — you bring your own copy. To make a page right to left for good:

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

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 36 numbered blocks. Each block is a self-contained doSomething() function that skips pages where its section is not present:

• 01 — Preloader
• 02 — Sticky Header
• 03 — Offcanvas Menu
• 04 — Saisona Data
• 05 — Week Engine
• 06 — Scroll Reveals
• 07 — Back To Top
• 08 — Anchor Scroll
• 09 — Light & Dark Mode, Direction
• 10 — WebGL Textures
• 11 — Custom Select
• 12 — Hero Sliders
• 13 — Card Sliders
• 14 — Accordion
• 15 — Filter Tabs
• 16 — Grid Search
• 17 — Newsletter
• 18 — Choice Cards
• 19 — Ingredient Line
• 20 — The Pass
• 21 — Quick Booking
• 22 — Open Now & The Kitchen's Day
• 23 — Plated Dish In 2.5D
• 24 — The Brigade Lines Up
• 25 — Menu Page & Order Pad
• 26 — Allergen Matrix
• 27 — The Year In Weeks
• 28 — Step Forms
• 29 — Contact Form
• 30 — Table Booking
• 31 — Account Forms
• 32 — Gift Cards, Dish Status & Applications
• 33 — Article Tools
• 34 — Demo Forms
• 35 — Launch Countdown
• 36 — FAQ Search

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. Images are grouped inside assets/img/:

The logo files, the illustrated icons, the preloader’s tweezers and garnishes and the language flags are included and ready to use. All demo photography shown on the live preview is for preview purposes only and is not included in the download.

Contact Form

The contact forms and the comment form post to sendmail.php, a lightweight AJAX mail handler. The newsletter, booking, gift card, application 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 a server with PHP mail() support. Opened from your computer, 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
• 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: Fjalla One, Crimson Pro

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.