Overview

A light, airy HTML template for a seafood restaurant and oyster bar by the water: today’s catch from the day boats, oysters by the six and the dozen, a terrace and a dining room to book, classes and tastings, private events and a small table shop. Mareva ships three home pages, a light and a dark theme, right-to-left support, and logic that is worked out rather than typed in: open now, Oyster Hour, the catch board by weekday with its portions running down to Sold Out, the table slots from the kitchen’s hours and the areas that can seat the party, a platter priced as it is built, a box for home, a private-event estimate and a shop with a bag, coupon, shipping and tax.

What’s included

• 3 home pages, each with its own scroll moment: the tide comes in over the sand along the gallery’s lower edge and goes back out, an oyster platter sets itself on ice shell by shell, and a fishing boat crosses the horizon
• 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: a right-to-left language turns any page around
• WebGL layers — Sand Ripples, wind-blown ripples drifting over the sand bands, and the footer’s mother-of-pearl shell printed in two tones through an ordered dither — tinted by the theme colours
• Today’s catch from the weekday: market prices, the boat and the time it landed, portions falling through the service to Sold Out, a week strip
• The oyster bar: 6 varieties by the six and the dozen, Oyster Hour from the clock, a platter builder with a mixed dozen and sides
• Four-step table booking from the kitchen’s hours with the dining room, the terrace (in season) and the oyster bar counter
• Oysters At Home: a two- or four-dozen box filled a six at a time, 10% off the oysters when full, extras and a delivery day
• Classes and tastings from repeat rules with month tabs and seats left; a four-step private-event estimate by room, menu and guests
• The table shop: categories, price filter, sort and search, product page, bag, coupon, free-shipping meter, tax, checkout with an order number, wishlist
• Menu with course tabs and dietary marks, our boats, team and chef profile, gallery, journal, FAQ with search, account pages, coming soon, 404
• Oyster Open preloader, Tide Wash reveals, the fishing-net hover, Swiper sliders and Fancybox video popups
• Fully responsive, W3C-valid, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open mareva/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the catch board, the booking, the platter, the box, the classes, the estimate and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the mareva/ 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. Hours, the catch, the boats, the oysters, the menu, the boxes, classes, rooms and the shop rules live in one place — see Sea 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 mareva/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

mareva/
├── *.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 (33 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
        ├── blog/                        8 files
        ├── dishes/                      2 files
        ├── faces/                       8 files
        ├── flags/                       6 files
        ├── gallery/                     16 files
        ├── home/                        25 files
        ├── icons/                       28 files
        ├── logo/                        6 files
        ├── menu/                        3 files
        ├── scenes/                      11 files
        ├── shop/                        16 files
        ├── team/                        8 files
        └── textures/                    1 files

To publish the site, upload the contents of mareva/ 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 --mr-tide-rgb) — change both together.

White is the ground almost everywhere, with sea ink for the headings and the block buttons and sea mist for the quiet panels. Tide blue carries the links, the eyebrows, Oyster Hour and the sea band (one deep-blue band per page, with foam for its small text). Sand is the ground of one band per page, wet sand its edge. Coral is kept for Sold Out, “only a few left” and Sale. --mr-bg, --mr-surface, --mr-mist, --mr-sand, --mr-heading and --mr-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: Roboto Condensed (every heading in light capitals, prices and figures) and Work Sans (body, navigation, buttons, eyebrows and labels in tracked capitals). Swap them by editing the Google Fonts link and the --mr-ff-display / --mr-ff-body variables.

Logo

The logo is the name MAREVA in light condensed capitals whose A’s have no crossbar, with a single pearl set in the first one. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the header, the mobile menu and the footer
• logo-light.png — for dark grounds: dark mode
• word.png / word-light.png — the wordmark without its pearl, for the preloader (the pearl flies out of the oyster into it)
• mark.png — the letter and its pearl alone (the coming-soon, 404 and login pages)
• 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.

Light & Dark Mode

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

• Tokens — the dark values sit in one block, [data-theme="dark"] { … }, right after :root in style.css. Change a dark colour there.
• Panels that stay sea — blocks with the class is-sea (the sea band, the figures and offer bands, the booking and estimate summaries, the Oyster Hour card, the side of the account pages, the foot of the mobile menu) are deep sea blue in both themes.
• Packshots — the table shop’s product tiles keep their light ground (--mr-product) in both themes, as the photographs do.
• Drawn icons — each icon ships in a sea-ink and a light ink; the right one shows by theme on its own.
• Start dark — to open the site dark for first-time visitors, add data-theme="dark" to the <html> tag of each page; the switch still works and is still remembered.

Sea Logic

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

Today’s catch

The board follows the visitor’s weekday (the house is closed on Monday, when it shows the next day’s landing). Each line’s portions run down from the start of lunch to its out minute: 4 or fewer reads “Only N Left” in coral, none reads Sold Out and the line is struck through.

How a platter is priced

Oysters go on by the six: every full twelve of one variety is charged at its dozen price, the rest at its six price. During Oyster Hour the Mareva Flats are 50% off. A mixed dozen is $40; sides are added as they are.

Oysters At Home

A box costs its own price, plus each six at its at-home price, less 10% of the oysters when every place is filled, plus the extras. Delivery runs Thursday to Saturday, ordered by 6:00 pm the day before.

Table booking

The slots run every 30 minutes through lunch and dinner, the last 75 minutes before close. Only the areas that can seat the party are offered: Dining Room up to 10, all year; The Terrace up to 6, May to October; Oyster Bar Counter up to 4, all year.

Private events

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 the extras; a quarter of it holds the date.

Classes and seats

Every class repeats on its weekday of the month (the Oyster Shucking Class: the first Saturday), so its next dates are always ahead of the visitor. Seats booked on the class page are kept in the browser and count against the class on every card and in the account; 4 or fewer reads “Only N Seats Left”.

How the shop totals

The bag (table pieces and home boxes), the wishlist, the applied coupon and the booked 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 27 Table Shop) to []. Checkout, table booking, seats, boxes and the event enquiry confirm on screen with a reference — connect them to your own systems to take real orders and bookings.

WebGL Layers

Two small WebGL layers draw the moving grounds: Sand Ripples — wind ripples with a gentle and a steep side, bent by slow noise and drifting, lit low with a fine grain (the sand bands) — and the Shell — a scallop built as a mesh in the footer, turning slowly round its hinge, its ribbed outside and its mother-of-pearl inside printed in two tones through a 4×4 ordered dither. Each is one canvas:

<canvas class="mr-gl" data-gl="sand" 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)

Mareva 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 light / dark switch lists the languages that read left to right and right to left. Choosing Arabic stores the language and the direction (keys mareva-lang and mareva-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, the tide’s edge, the boat and every move that must mirror follow it on their own. Prices and times 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 33 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 Oyster Open preloader, the header, the Tide Wash reveals, the theme and direction switch and the WebGL layers.
• 09–10 — Sea Data, Sea Clock. Sea Data holds every figure; Sea Clock works out open now, Oyster Hour, today’s catch board, the boats due in and the next date of every class.
• 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 — Tide Edge, Platter Ring, Boat Horizon. The three home pages’ scroll moments.
• 22–33 — Oyster Platter, Table Booking, Classes & Tastings, Private Events, Contact Form, Table Shop, Account Forms, Oysters At Home, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: the oyster platter, table booking, classes, private events, contact, the table shop, accounts, Oysters At Home, 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 drawn icons and scenes, the language flags and the net texture 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 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, class seats, event 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: Roboto Condensed, Work Sans

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.