Overview

A convivial, papery HTML template for a wine and spirits members’ club: three membership tiers with a case every month, members’ prices in the cellar and tastings included, members’ tastings with seats, wine trips with places, and the members’ cellar shop. Decanta 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 in the club room, the next tasting with seats, every tasting’s and trip’s dates from repeat rules, every price repainted for the visitor’s tier, an estimator that sets each tier against buying as a guest, seat booking, trip requests with a deposit, a four-step application and gift memberships.

What’s included

• 3 home pages, each with its own scroll moment: postcards from the trip regions turn over one by one, bottles slide out of the cellar rack’s slots, and a tasting flight of five glasses lines up with their names
• 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 — Wine Stain Rings blooming on the paper bands, and the footer’s members’ invitation card that bends like paper as it turns — tinted by the theme colours
• Membership tiers with monthly or yearly billing, a comparison table and a savings estimator; a four-step application with an age check; gift memberships
• Members’ tastings from repeat rules with filters and search; seat booking that includes your seat while your tier’s tastings last and counts guest passes
• Wine trips with a finder; a trip request with the members’ price, single rooms and the deposit
• The members’ cellar: a tier switch that repaints every price, categories, price filter, sort and search, product page, bag, coupon, free-shipping meter, tax, checkout with an order number, wishlist
• The club room’s hours with open now, wines by the glass at members’ prices, an age gate remembered per browser
• Sommeliers and a profile, gallery, journal, FAQ with search, account pages, coming soon, 404
• Invitation preloader, Postcard Stack reveals with word-by-word titles, the glass-ring hover, Swiper sliders and Fancybox video popups
• Fully responsive, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open decanta/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the tiers, the estimator, the application, the tastings, the trips and the cellar shop all work straight from the files.

2. Deploy to a server

Upload the contents of the decanta/ 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, tiers, tastings, trips, the cellar and the shop rules live in one place — see Club 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 decanta/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

decanta/
├── *.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
    │   ├── 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 (35 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/                      10 files
        ├── blog/                        11 files
        ├── decor/                       19 files
        ├── faces/                       11 files
        ├── flags/                       6 files
        ├── home/                        15 files
        ├── icons/                       26 files
        ├── logo/                        5 files
        ├── menu/                        3 files
        ├── team/                        7 files
        ├── textures/                    3 files
        └── wines/                       24 files

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

White, cream paper and ice-blue paper carry the pages; copper draws the rules, rings, the seal, the icons and the buttons (the deeper copper button face carries white text), and copper ink is the colour of the italic lines under titles, prices and links. Night (claret-black) is the ground of the club-room home and one band per page; claret tints the wine-stain rings. --dc-bg, --dc-surface, --dc-cream, --dc-heading and --dc-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: Spectral SC (every heading, the navigation, buttons and labels in tracked small capitals) and Libre Caslon Text (body, the copper italic lines under titles, prices). Swap them by editing the Google Fonts link and the --dc-ff-display / --dc-ff-body variables.

Logo

The logo is a round copper seal — DECANTA · WINE & SPIRITS · MEMBERS’ CLUB round a line-drawn decanter — beside the DECANTA wordmark. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the white headers and the boxed header
• logo-light.png — for photos and night: the header over the hero, the club-room home, dark mode
• seal.png / seal-light.png — the seal alone (the preloader’s invitation, the story stamp, the letter card, the bottle labels)
• 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 decanta-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.
• Bands that stay night — sections with the class is-night (the club-room home, by the glass, the tasting flight, the reserve form) are claret-black in both themes. A light card placed inside one takes dc-on-light to keep its own ink.
• Bottles — the cellar’s bottle tiles keep their cream ground in both themes, as the photographs do.
• Illustrated icons — each icon ships in a copper and a light ink; the right one shows by theme and ground 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.

Club Logic

The figures on every page come from one data block, JS block 10 Club Data near the top of main.js (var DECANTA). Edit it once and the cards, tiers, dates, seats, places and totals follow. Prices are in US dollars; times are minutes after midnight (1110 = 6:30 pm); weekdays run 0 = Sunday to 6 = Saturday.

Members’ prices

The tier switch (on the cellar, the product, the bag and the home pages) keeps the visitor’s tier in the browser (decanta-tier) and repaints every price: a guest sees the list price, a member the list price less the tier’s share, to the whole dollar. The demo opens as a Reserve member.

The estimator

For a number of bottles a month, other cellar spending and tastings a year, each tier’s year is set against buying the same as a guest: the case covers its bottles, more bottles and the rest of the cellar come at the tier’s price, the tier’s tastings are included and further ones are at the members’ price.

Tastings and seats

Every tasting repeats on its weekday of the month (Old World Reds: the first Thursday), so its next dates are always ahead of the visitor. On the tasting page your own seat is included while your tier’s tastings last, guest passes bring a guest in at the members’ price and anyone else pays the guest price; booked seats are kept in the browser and count against the table.

Trips

Gift memberships

How the shop totals

The bag, the wishlist, the coupon, the tier, the booked seats and the requested places 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; to start empty, set the two demo lists in doShop() (block 30 Members’ Cellar Shop) to []. Checkout, joining, gifts, seats and trip requests 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: Wine Stain Rings — soft wine-glass rings that bloom, overlap and fade on the cream and ice paper bands and the night bands — and the Invitation Card — the members’ card in the footer, a grid mesh whose vertex shader bends it like paper as it turns. Each is one canvas:

<canvas class="dc-gl" data-gl="rings" 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)

Decanta 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 decanta-lang and decanta-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 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 35 numbered blocks (see the JS INDEX comment at the top of the file):

• 01–09 — Preloader, Sticky Header, Offcanvas Menu, Chosen Tasting & Trip, Scroll Reveals, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Layers. The core every page shares: the Invitation preloader, the header, the chosen tasting / trip hand-over, the Postcard Stack and word reveals, the theme and direction switch and the WebGL layers.
• 10–13 — Club Data, Club Clock, Custom Select, Age Gate. Club Data holds every figure; Club Clock works out open now, the next tasting, every tasting’s and trip’s dates and the seats and places left; the age gate.
• 14–20 — Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: sliders, accordions, filters, search, forms, choice cards.
• 21–23 — Postcards From The Trips, The Cellar Rack, The Tasting Flight. The three home pages’ scroll moments.
• 24–35 — Membership & Members' Prices, Join The Club, Gift A Membership, Members' Tastings, Wine Trips, Contact Form, Members' Cellar Shop, Account Forms, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: tiers and members’ prices, the estimator, joining, gifts, tastings and seats, trips and requests, the cellar shop, accounts, 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 bottles, the glasses, the language flags and the paper textures 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, application, gift, seat booking, trip request, 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: Spectral SC, Libre Caslon Text

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.