Overview

A calm, ceremonial HTML template for tea houses, tea rooms and loose-leaf tea merchants. Chanoya ships three home pages, a light and a dark theme, right-to-left support, and tea house logic that is worked out rather than typed in: ceremonies with sessions and the seats left in each, loose leaf priced by the tin, a brewing guide with an infusion counter for every tea, a tea finder that ranks teas by flavour notes, the tea house’s live open status and a shop with a bag, coupon, shipping and tax.

What’s included

• 3 home pages, each with its own scroll moment: Hanging Scroll (a kakejiku painting unrolls downward with the section), Terrace Mist (banks of mist part over the tea terraces) and Flavour Wheel (the wheel turns to each tea’s leading note as its card passes)
• 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 — Terrace Mist drifting over faint terrace lines in the night bands and page titles, and a tea bowl cut from paper layers turning in the footer — tinted by the theme colours
• Ceremonies and tastings: 4 ceremonies, sessions per day with the seats left in each, today’s sessions live, and a four-step booking wizard
• Loose leaf by weight: every tea in 25, 50 and 100 g tins with its own price and price per 100 g, on the cards, the product page and in the bag
• Brewing guide for every tea: water in °C or °F, grams scaled to your vessel, the steep of each infusion, and an infusion counter that times them
• Tea finder: eight flavour notes on a flavour wheel; every tea ranked by how closely it matches, with type and caffeine filters
• The shop: type, price, sort and search, product page, bag, coupon, free-shipping meter, tax, checkout with an order number, wishlist
• Tea masters, story, gallery with filters, menu, origins, journal with search, FAQ with search, account pages, coming soon, 404
• Bowl Turn preloader, Leaf Settle reveals with brush rules, a red seal pressed into cards on hover, Swiper sliders and Fancybox popups
• Fully responsive, light and dark, zero console errors

Getting Started

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

1. Open locally

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

2. Deploy to a server

Upload the contents of the chanoya/ 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, teas, weights, brewing guides, flavour profiles, ceremonies, the menu and the masters live in one place — see Tea House 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 chanoya/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

chanoya/
├── *.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 (32 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/                      13 files
        ├── blog/                        8 files
        ├── decor/                       10 files
        ├── faces/                       8 files
        ├── flags/                       6 files
        ├── gallery/                     12 files
        ├── home/                        9 files
        ├── icons/                       42 files
        ├── logo/                        6 files
        ├── menu/                        3 files
        ├── products/                    24 files
        ├── team/                        5 files
        └── textures/                    1 files

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

Sage fills the buttons, the weight switches and the footer, with olive ink type on it; olive ink is the heading colour and the night bands; the blush panels and leaf tiles come from the photographs; the red of the tea-house seal marks the hover accent, the seats-left alerts and the focus ring. --ch-bg, --ch-surface, --ch-blush, --ch-heading and --ch-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: Cormorant Garamond (headings, prices and figures) and Spectral (body, navigation, buttons and labels). Swap them by editing the Google Fonts link and the --ch-ff-head / --ch-ff-body variables.

Logo

The logo is CHANOYA in light condensed capitals with “tea house” written across its foot. A tea bowl (chawan) mark and a red tea-house seal go with it. They ship as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the headers and the footer
• logo-light.png — for dark grounds and dark mode
• bowl-body.png, bowl-leaf.png — the preloader’s bowl and the leaf that travels round it
• seal.png — the tea-house seal pressed into cards on hover and set on photographs
• 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 chanoya-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 hanging scroll band, the today board band, the finder band, the booking summary) are olive night in both themes. A light card placed inside one takes ch-on-light to keep its own ink. The sage footer (ch-sage-band) turns deep sage in dark mode.
• Illustrated icons and paper branches — each ships in a light-ground and a dark-ground version; 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 House Logic

The figures on every page come from one data block, JS block 09 Tea House Data near the top of main.js (var TEA). Edit it once and the cards, prices, guides, sessions and totals follow. Prices are in US dollars; times are minutes after midnight (600 = 10:00 am); temperatures are °C.

Loose leaf by weight

A bag line is a tea and a tin size, so the same tea can sit in the bag twice. The weight switch on a card and the tin choice on the product page repaint the price, the price per 100 g and the saving against the smallest tin.

Ceremony sessions and seats

Each ceremony runs on its weekdays at its sessions. The seats already taken come from a steady ledger keyed on the ceremony, the date and the session, so a session shows the same seats left on every card, the week list, the today board and in the wizard — replace seatsTaken() (block 23 Ceremony Schedule) with your own bookings. Sold-out and started sessions cannot be booked; guests cannot exceed the seats left. Continue never blocks; Confirm checks the details and gives a reference made from the date.

The brewing guide and infusion counter

The leaf is weighed for the vessel you set (grams per 100 ml times the millilitres), the water reads in °C or °F, and every infusion’s steep is the first steep plus the added seconds for each one before it. The counter times the steep of the infusion you are on, then steps on until the leaf is spent.

The tea finder

The notes you choose make a vector of ones on the wheel’s eight notes; every tea’s profile is compared with it by cosine similarity, shown as a match per cent, and the teas are ranked by it.

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. 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 Tea Shop) to []. Checkout and the ceremony booking confirm on screen with a reference — connect them to your own systems to take real orders.

WebGL Layers

Two small WebGL shaders draw the moving layers: the mist — faint contour lines of tea terraces following the hills, with banks of mist drifting across them at their own heights and speeds, in the night bands, the page titles, coming soon and the 404 — and the bowl — the footer’s brand object, a tea bowl cut from paper layers (a pale moon behind, the clay body, two glazes with dripping edges, the lip and the tea), each layer casting a soft shadow on the one below and shifting with depth as the bowl turns slowly. Each is one canvas:

<canvas class="ch-gl" data-gl="mist" 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)

Chanoya 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 chanoya-lang and chanoya-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. Clock-like figures (the infusion counter, session times) keep reading left to right.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 32 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 Bowl Turn preloader, the header, the Leaf Settle reveals and brush rules, the theme and direction switch and the WebGL layers.
• 09–10 — Tea House Data, Tea House Clock. Tea House Data holds every figure; the clock works out the tea house’s open status.
• 11–19 — Custom Select, Counters & Rings, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, counters, sliders, accordions, filters, search, newsletter, choice cards.
• 20–22 — Hanging Scroll, Terrace Mist, Flavour Wheel. The three home pages’ scroll moments; the flavour wheel also draws the tea finder’s wheel.
• 23–32 — Ceremony Schedule, Brewing Guide & Infusion Counter, Tea Finder, Contact Form, Tea Shop, Account Forms, Article Tools, Launch Countdown, Ceremony Booking, FAQ Search. The feature pages: ceremony sessions and seats left, the brewing guide and its infusion counter, the tea finder, contact, the shop by weight, accounts, the article tools, the countdown, ceremony booking 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 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 and seal, the illustrated icons, the paper tea branches, the brush rule, the mist banks, the rice-paper texture 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, ceremony booking, quick book, 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: Cormorant Garamond, Spectral

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.