Overview

An elegant, animated HTML template for chocolatiers, cake boutiques, patisseries and chocolate cafes. Truffella ships three home pages, a light and a dark theme, right-to-left support, and atelier logic that is worked out rather than typed in: a cake builder that prices every layer, a truffle box you fill piece by piece, each boutique’s opening hours in its own city’s time, the dispatch cut-off, seats left at every tasting, and a shop with a bag, coupon, chilled shipping and tax.

What’s included

• 3 home pages, each with its own scroll moment: Chocolatier (truffle and cake cut-outs float on three depths and lean with the pointer), Cake Atelier (a layer cake builds layer by layer with the scroll) and Chocolaterie & Cafe (the ground shifts from milk to dark through a five-chocolate tasting flight)
• 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 — the Ganache Swirl and a glossy truffle heart turning in light in the footer — tinted by the theme colours
• Cake Builder: size or tiers, sponge, filling, finish, toppings and a plaque, with the cake drawn as you build it and the first date it can be baked
• Build A Box: 12 truffles drawn in CSS, four box sizes, dietary filters, ribbons and a gift note
• Four boutiques open in their own time zones, a dispatch cut-off countdown in the top bar, the cafe menu with dietary filters
• Tastings and workshops with their next dates and seats left, and a four-step booking wizard; Book A Table on Home 03
• The Chocolate Club with a term switch and gift months; corporate gift quotes with price breaks and lead times
• The shop: 24 products, categories, cocoa, dietary marks, price, sort and search, product page, bag, coupon, chilled shipping, checkout with the dispatch date, wishlist
• Team and chocolatier profile, history timeline, metro gallery, journal in six post formats, FAQ with search, accounts, coming soon, 404
• Chocolate Pour preloader, Word Rise titles, photos settling from a slow zoom, ribbons that draw on, a melt underline on card titles
• Fully responsive, W3C-valid markup, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open truffella/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the builders, booking, menu, club, quotes and shop all work straight from the files.

2. Deploy to a server

Upload the contents of the truffella/ 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. Products, truffles, cake options, boutiques, the menu, workshops and the club live in one place — see Atelier 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 truffella/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

truffella/
├── *.html                              the 31 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the contact form
└── assets/
    ├── css/
    │   ├── style.css                   all custom styles, numbered Table of CSS (17 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.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 (37 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
        ├── about/                       12 files
        ├── banner/                      14 files
        ├── blog/                        12 files
        ├── cakes/                       15 files
        ├── cutouts/                     9 files
        ├── faces/                       8 files
        ├── flags/                       6 files
        ├── gallery/                     21 files
        ├── hero/                        7 files
        ├── home/                        23 files
        ├── icons/                       21 files
        ├── logo/                        6 files
        ├── menu/                        3 files
        ├── mosaic/                      18 files
        ├── shop/                        35 files
        └── team/                        6 files

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

Caramel draws the ribbons under the titles, the line-art illustrations, the seal and the buttons on dark grounds; its darker partner, Caramel Text, is used for small caramel text on light grounds. Amber sets the big display words of the chocolaterie, champagne the titles of the cake atelier. Cocoa is the night band and the whole of Home 03; warm black is Home 02; maroon is the thin top bar. White, cream and beige are the light grounds. --tf-bg, --tf-surface, --tf-heading and --tf-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: Marcellus (the uppercase headings, prices and display words) and Lato (body, navigation, buttons and labels). Swap them by editing the Google Fonts link and the --tf-ff-head / --tf-ff-body variables.

Logo

The logo is a caramel T whose crossbar drips like melted chocolate, beside TRUFFELLA in spaced capitals over a hairline. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the header on inner pages, the offcanvas menu
• logo-light.png — for dark grounds and photos: the home headers, dark mode
• logo-footer.png / logo-footer-light.png — the stacked footer lockup with its script tagline
• seal.png — the round TRUFFELLA CHOCOLATIER stamp that turns slowly on the banners
• favicon.png — the browser tab icon

The logo’s lettering appears only inside the images — the pages do not load its script font. 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 truffella-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 dark — sections with the class is-night (cocoa) or is-black (warm black) are dark in both themes. A light card placed inside one takes tf-on-light to keep its own ink.
• Product photos — the shop shots keep their cream ground in both themes, the way a boutique’s own photography does.
• 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.

Atelier Logic

The figures on every page come from one data block, JS block 09 Truffella Data near the top of main.js (var TRUFFELLA). Edit it once and the cards, prices, menus, timetables and totals follow. Prices are in US dollars; times are minutes after midnight (600 = 10:00 am); weekday 0 is Sunday.

The Cake Builder

Build A Box

The Chocolate Club and corporate quotes

Booking a seat

The wizard lists the next days with a sitting that has room for the party, drops today’s sittings within the hour, and counts seats already taken from the date, so a sitting always shows the same figure — replace seatsTaken() with your booking system’s numbers. A table in the salon counts tables of four. Continue never blocks; Confirm checks the details and gives a reference made from the date (block 25 Booking Wizard).

How the shop totals

The bag, the wishlist and the applied coupon are kept in the browser (localStorage), so they follow the visitor from page to page; built cakes, boxes and club subscriptions go into the same bag with their own price. The first visit starts with a small demo bag and wishlist; to start empty, set the two demo lists in doShop() (block 31 Chocolate Shop) to []. Checkout, bookings, quotes and club sign-ups confirm on screen — connect them to your own systems to take real orders.

Opening hours and the dispatch cut-off

Block 10 Atelier Clock reads each boutique’s hours in its own time zone (the browser’s Intl time zones), so “Open now” is right in Paris and New York at once, and counts down to the dispatch cut-off in the top bar. It refreshes every 30 seconds.

WebGL Layers

Two small WebGL shaders draw the moving layers: the swirl — slow molten swirls of cocoa folded with thin caramel ribbons (Home 03’s hero, the quotes band, the workshop panel, the club and booking panels, coming soon, 404) — and the heart — a glossy chocolate truffle heart turning in a warm light in the Chocolate Club band at the foot of every page. Each is one canvas:

<canvas class="tf-gl" data-gl="swirl" 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)

Truffella is RTL-ready: the layout with its paddings and margins, the photo washes, 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) in the top bar lists the languages that read left to right and right to left. Choosing Arabic stores the language and the direction (keys truffella-lang and truffella-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. The preloader’s wordmark and the drawn cake stay as they are.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 37 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 Chocolate Pour preloader, the header, the Word Rise reveals, the theme and direction switch and the WebGL layers.
• 09–10 — Truffella Data, Atelier Clock. The data block holds every figure; the Atelier Clock works out each boutique’s opening hours in its own city’s time and the dispatch cut-off.
• 11–19 — Custom Select, Meters, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Site Search. Shared components: selects, meters, sliders, accordions, filters, search, the club sign-up.
• 20–22 — Floating Cut-Outs, Layer Cake, Milk To Dark. The three home pages’ scroll moments.
• 23–37 — Book A Table, Workshops, Booking Wizard, Cake Builder, Box Builder, Chocolate Club, Corporate Gifts, Contact Form, Chocolate Shop, Account Forms, Menu Filters, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: tables, workshops and bookings, the cake and box builders, the club, corporate quotes, the shop, accounts, the menu filters, 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 at their end.

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 line-art illustrations and the language flags are included and ready to use. The truffles in Build A Box are drawn in CSS and need no images. 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 posts to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. The club sign-up, the question form, the quote request, comments, bookings, checkout, 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: Marcellus, Lato
• Logo tagline lettering: Mrs Saint Delafield

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embeds, the audio post’s player 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.