Overview

A warm, crafted HTML template for specialty coffee shops, cafés and small roasteries. Kafelo ships three home pages, a light and a dark theme, right-to-left support, and café logic that is worked out rather than typed in: which café is open now and until when, the menu with dietary filters and sizes, a drink builder that prices, weighs and doses each cup, real pickup and table slots, a brew calculator with a step timer, a bean subscription, events from repeat rules with seats left, a loyalty card and a shop with a bag, coupons, shipping and tax.

What’s included

• 3 home pages, each with its own scroll moment: the hero zooms out as you leave it (Café & Kitchen), Bean To Cup glides nine stages sideways (Roastery & Bar) and Know Your Cup pours espresso, milk and foam in each drink’s real proportion (Beans & To Go)
• 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: a right-to-left language turns any page around
• WebGL layers — slow curls of steam over the night bands and the cup’s steam written in light in the footer — tinted by the theme colours
• The menu with categories, dietary filters that know which milk makes a drink vegan, search, sizes and breakfast hours
• Order ahead: a drink builder (size, milk, extras) with price, energy and caffeine, real pickup times, an order number and loyalty stamps
• Book a table: party, day, real slots with the tables free, the area, details — Continue never blocks; only Book checks
• Brew guide: dose, water, ratio, grind and temperature for six methods, and a timer that walks the steps
• Bean subscription: coffee, grind, bag and frequency priced per delivery and per month, with the next delivery dates
• Three cafés with live opening hours everywhere, events with a month calendar and seat booking
• The Kafelo shop: filters, sort and search, product page, bag, coupons, free-shipping meter, tax, checkout, wishlist, account with the loyalty card
• Steam Bloom preloader, Steam Clear reveals, drawn cups and line-art icons in two inks, Swiper sliders and Fancybox popups
• Fully responsive, W3C-valid, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open kafelo/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the menu, ordering, bookings, brew guide, subscription and shop all work straight from the files.

2. Deploy to a server

Upload the contents of the kafelo/ 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. Opening hours, the menu, prices, origins, tables, events and products live in one place — see Café 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 kafelo/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

kafelo/
├── *.html                              the 32 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
        ├── banner/                      10 files
        ├── blog/                        8 files
        ├── drinks/                      30 files
        ├── flags/                       6 files
        ├── hero/                        7 files
        ├── home/                        35 files
        ├── icons/                       38 files
        ├── logo/                        6 files
        ├── menu/                        3 files
        ├── partners/                    5 files
        ├── process/                     4 files
        ├── promo/                       2 files
        ├── shop/                        13 files
        ├── team/                        8 files
        ├── textures/                    4 files
        └── video/                       2 files

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

Crema fills the buttons, the rule under every title, the numerals, the date tags and the New tags; buttons carry espresso text on crema for contrast. Roast is crema’s partner for small text on light grounds (eyebrows, prices, menu descriptions). Kraft is the paper of the textured panels. Sand and oat are the section grounds between the white ones; night is the footer and the dark bands. --kf-bg, --kf-surface, --kf-heading and --kf-text are the semantic names the components use — the dark theme swaps those.

Fonts

Two Google Fonts are loaded in the head of each page: Oswald (headings in capitals, navigation, buttons, prices and figures) and Merriweather (body text, and the italic voice of the eyebrows, leads, numerals and quotes). Swap them by editing the Google Fonts link and the --kf-ff-head / --kf-ff-body variables.

Logo

The logo is the name KAFELO in capitals with the O drawn as a coffee bean. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds
• logo-light.png — for dark grounds: the headers over photographs, the night bar, dark mode
• crest.png / crest-light.png — the cup between two coffee branches on the heroes and panels
• cup-mark.png — the cup the preloader’s steam rises from
• 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 kafelo-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 flavours, the seats, the cafés, the footer) are dark in both themes. A light card placed inside one takes kf-on-light.
• Drawn cups and icons — each ships in two inks; 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.

Café Logic

The figures on every page come from one data block, JS block 09 Café Data near the top of main.js (var KAFE). Edit it once and the cards, prices, hours, slots, calendars and totals follow. Prices are in US dollars; times are minutes after midnight (420 = 7:00 am).

Building a drink

Pickup times run every 10 minutes from opening to closing at the chosen café, and no sooner than 10 minutes from now; when a café has closed for the day the next open day is offered. A placed order is kept in the browser and adds its drinks to the loyalty card on the account page.

Tables

Slots start every 30 minutes from opening to the last sitting; each area shows how many tables can still seat the party (a party bigger than a table takes more than one). The demo marks part of each slot as already booked (busier at lunch and on weekend evenings) so the page looks lived-in — change booked() in block 21 Seating & Table Bar to read your own bookings.

Brewing and subscriptions

How the shop totals

The bag, the wishlist, the coupon and the orders 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 32 Shop Engine) to []. Checkout, orders, bookings and seats confirm on screen with a reference — connect them to your own systems to take real ones.

WebGL Layers

Two small WebGL shaders draw the moving layers: steam — slow curls rising and thinning over the night bands and the page-title photographs, kept to the sides — and the cup — the footer’s cup drawn in crema light while its steam is written upward in light. Each is one canvas:

<canvas class="kf-gl" data-gl="steam" 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.
• 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)

Kafelo is RTL-ready: the layout, the sliders, the Bean To Cup track and the animations all mirror. Right to left comes from the stylesheets, not from separate pages: the language picker (a flag and a code) lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the language and the direction (keys kafelo-lang and kafelo-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

<html lang="en" class="no-js" dir="rtl">

2. Swap Three Stylesheets

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 Steam. The core every page shares: the Steam Bloom preloader, the header, the Steam Clear reveals, the theme and direction switch and the WebGL layers.
• 09–10 — Café Data, Café Clock. Café Data holds every figure; Café Clock works out open now, today’s hours, breakfast, the origin of the week and the next date of each event.
• 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, forms.
• 20–23 — Hero Zoom-Out, Seating & Table Bar, Bean To Cup Track, Know Your Cup & Friday Offer. The home pages: the hero zoom-out, the table bar, Bean To Cup and Know Your Cup.
• 24–39 — Menu Engine, Order Ahead & Loyalty, Table Reservation, Map Tabs, Brew Guide, Contact Form, Bean Subscription, Loyalty Card & Orders, Shop Engine, Account Forms, Article Tools, Demo Forms, Launch Countdown, Events Month, Event Seats, FAQ Search. The feature pages: menu, order ahead and the loyalty card, reservations, maps, the brew guide, subscriptions, the shop, accounts, events and 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: 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 cups, the line-art icons, the partner marks, the kraft textures 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, order ahead, reservation, subscription, checkout, seat booking, 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

$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. 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: Oswald, Merriweather

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.