Overview

A bright, botanical HTML template for herbal tea boutiques, wellness blend shops, tea subscriptions and tasting bars. Infusia ships three home pages, a light and a dark theme, right-to-left support, and tea logic that is worked out rather than typed in: a blend builder that prices the tin as you choose, a caffeine meter, a wellness finder that ranks the blends, a steep timer that counts each infusion, a monthly tin subscription with skip and pause, a wholesale estimator, the boutique’s live open status and a shop with tin sizes, a bag, coupon, delivery and tax.

What’s included

• 3 home pages, each with its own scroll moment: botanical line drawings that draw their stems, leaves and flowers in with the scroll; the wellness wheel, four moods round a ring that turns mood by mood with the matching blend in the centre; and botanical cut-outs (hibiscus petals, mint, lemon) floating on three depths
• 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 — Watercolour Bloom, petal-shaped pigment blooms spreading and fading at the band edges, and a hibiscus opening and closing in light in the footer — tinted by the theme colours
• Blend builder: a base, up to three of 15 botanicals, a 50 g or 100 g tin and your own name on the label, with the price, the caffeine meter, the steep and the moods it serves, live
• Wellness finder: sleep, focus, digestion or immunity, the time of day and the caffeine you want, ranking the 12 house blends with a match and the reasons
• Steep guide: a steep timer with infusions a minute longer each, and a steep chart in °C or °F for any number of cups
• The Tea Club: three plans at a flat rate per tin, a four-step sign-up that never blocks until the last step, and the next six tins with skip and pause, shared with My Account
• Wholesale estimator by the kilogram with three volume tiers, and a tasting-box enquiry
• The shop: moods, base, price, sort and search, a product page with tin sizes, bag, coupon, free-delivery meter, tax, checkout with an order number, wishlist
• The steep tag: hover a blend and a tea-bag tag swings out printed with its steep time and water temperature
• Petal Spiral preloader, Stir In reveals with a leaf rule under every title, Swiper sliders and Fancybox popups
• Fully responsive, written to validate, with no console errors

Getting Started

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

1. Open locally

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

2. Deploy to a server

Upload the contents of the infusia/ 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, bases, botanicals, blends, the club and the shop rules live in one place — see Tea 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 infusia/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

infusia/
├── *.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 (39 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
        ├── avatars/                     2 files
        ├── banner/                      5 files
        ├── blog/                        8 files
        ├── cutouts/                     6 files
        ├── flags/                       6 files
        ├── gallery/                     21 files
        ├── hero/                        4 files
        ├── home/                        13 files
        ├── icons/                       66 files
        ├── leaf/                        12 files
        ├── logo/                        10 files
        ├── menu/                        3 files
        ├── shop/                        12 files
        ├── team/                        4 files
        └── textures/                    3 files

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

Sage fills the buttons, the split panels, the plan heads and the leaf rule under every title; the sage panels set their type in deep ink for contrast, and small sage text uses the darker Sage Text. Hibiscus is the small accent: the badges, the steep tag’s rule, the wellness marker and the footer flower. Mist is the band ground under Infusia’s own vine pattern; Night is the one dark band of each home and the night footer. --nf-bg, --nf-surface, --nf-mist, --nf-heading and --nf-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 (light, uppercase, widely tracked headings, navigation and prices) and Roboto (body, buttons and labels). Swap them by editing the Google Fonts link and the --nf-ff-head / --nf-ff-body variables.

Logo

The logo is a fan of five leaf-petals rising from one point — four sage leaves and a hibiscus petal in the centre — over INFUSIA in tracked Roboto Condensed capitals and a HERBAL TEA BLENDS line. It ships as ready-made PNG files in assets/img/logo/:

• logo.png / logo-light.png — the stacked logo, for light and dark grounds (the centred headers, the footer)
• logo-row.png / logo-row-light.png — the row logo, for the sticky bar, small screens and the mobile menu
• petal-1.png … petal-5.png — the fan’s five petals, which the Petal Spiral preloader assembles
• 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 infusia-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 (the moods, the wellness wheel, the steep timer, the night footer) are dark in both themes. A light card placed inside one takes nf-on-light to keep its own ink.
• Photographs — the white tea-table photographs of the heroes and page titles sit under a night wash in the dark theme, so their copy stays readable.
• Illustrated icons — each icon ships in a deep-sage and a mist 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.

Tea Logic

The figures on every page come from one data block, JS block 09 Tea Data near the top of main.js (var TEA), with the engine that prices, steeps and doses caffeine right under it. Edit it once and the cards, menus, prices, timers and totals follow. Prices are in US dollars; times are minutes after midnight (540 = 9:00 am).

How a tin is priced

A tin is its base’s price per 50 g plus each botanical’s share; a 100 g tin is 1.8 times the 50 g tin. Each botanical takes 15% of the spoon from the base, so the caffeine falls as botanicals are added; roots and bark add a minute to the steep. The house blends and the builder use the same three functions: tinPrice(), caffeineOf() and steepOf().

The wellness finder

Each blend scores 6 when the chosen mood is its first, 4 when it serves it; one more for each of its botanicals that serves the mood; then the caffeine answer and the time of day reward or rule out the leaf (no caffeine after dark). The best three show with their match out of 14 and the reasons.

The Tea Club

A month’s price is the tins in the plan times the club’s flat rate; delivery is free. The schedule lists the next six first Tuesdays with that month’s blend. Skip and pause are kept in the browser (infusia-club-v1) and shared by the Tea Club page and My Account; connect block 32 Tea Club to your own subscription system to take real members.

How the shop totals

The bag, the wishlist, the applied coupon, the blends built in the builder and the saved blends 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 30 Tea Shop) to []. Checkout and the club confirm on screen — connect them to your own systems to take real orders.

WebGL Layers

Two small WebGL shaders draw the moving layers: the bloom — Watercolour Bloom, petal-shaped pigment blooms that spread, dry darker at their rim and fade at the left and right edges of the night bands, the page titles, coming soon and 404 — and the hibiscus — the footer’s brand object, five veined petals opening and closing slowly round a staminal column, in light. Each is one canvas:

<canvas class="nf-gl" data-gl="bloom" 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)

Infusia 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) in every header lists the languages that read left to right and right to left. Choosing Arabic stores the language and the direction (keys infusia-lang and infusia-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: the sliders and the Stir In reveal (cards swing from the other corner) follow it on their own. Slide counters, the steep timer and the caffeine scale still read left to right.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 39 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 Textures. The core every page shares: the Petal Spiral preloader, the header, the Stir In reveals, the theme and direction switch and the WebGL layers.
• 09–10 — Tea Data, Tea Drawings. Tea Data holds every figure and the pricing, caffeine and steeping engine; Tea Drawings holds the botanical line drawings Home 1 draws in.
• 11–18 — Custom Select, Counters & Rings, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter. Shared components: selects, counters, sliders, accordions, filters, search, newsletter.
• 19–25 — Tea Clock, Botanical Drawings, Wellness Wheel, Steep Card, Botanical Cut-outs, Mini Builder, Steep Timer. The boutique’s clock and the home pages’ moments: the drawings, the wellness wheel, the steep card, the cut-outs, the mini builder and the steep timer.
• 26–39 — Blend Builder, Wellness Finder, Steep Chart, Contact Form, Tea Shop, Account Forms, Tea Club, Article Tools, Demo Forms, Launch Countdown, Tea Menu, Wholesale Estimator, My Account, FAQ Search. The feature pages: the blend builder, the wellness finder, the steep chart, contact, the shop, accounts, the Tea Club, the article tools, demo forms, the countdown, the tea menu, wholesale, My Account and FAQ search.

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, the drawings appear drawn and the cut-outs 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 vine tiles, the botanical cut-outs 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 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, the club sign-up, the wholesale enquiry, 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: Roboto Condensed, Roboto

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

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.