Overview

A dark, dramatic HTML template for steakhouses, grill restaurants and butcher counters, in bronze and ember on charcoal. Brasara ships three home pages, a charcoal and a light theme, right-to-left support, and steakhouse logic that is worked out rather than typed in: a steak builder priced per 100 g, a dry-ageing guide with the ageing room’s days, a table booking with the occasion and what it adds, a butcher counter selling cuts by weight with pickup slots, and the house’s open-now status, the fire and last orders.

What’s included

• 3 home pages, each with its own scroll moment: a steak slice cooking from blue to well done with its core temperature, flames rising along a section’s bottom edge, and the butcher’s diagram lighting each cut as its card passes
• Steak builder: the cut, the weight on the cut’s own scale, the days of ageing (with their premium), the doneness, a sauce and sides — a live ticket with the total, resting time and servings
• Dry-ageing guide: a day slider from 0 to 90 with flavour notes, tenderness, the moisture lost and the premium; the ageing room’s hooks, day by day
• Table booking in five steps: party and date, a time with the tables left, the occasion and its add-ons, details, confirm — with a card deposit for large parties
• Butcher counter: cuts sold by weight, pantry, bag, wishlist, coupon, pickup slots or chilled delivery, tax and an order number
• Charcoal and light 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
• WebGL Damascus steel under the dark bands and a cleaver drawn as a 2D signed-distance field with a moving rim light in the footer
• Grill Sear preloader, Burn Away reveals (an ember edge burning off a charcoal cover), word-by-word title rises, sear-mark hover, Swiper sliders, Fancybox
• Menu with course tabs, dietary filters and search; wine and cocktails; private dining; gift cards with a live preview
• Chefs and profiles, our story, gallery, journal with six post formats, FAQ with search, accounts, coming soon, 404
• Fully responsive, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open brasara/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the steak builder, the ageing guide, the booking, gift cards and the butcher counter all work straight from the files.

2. Deploy to a server

Upload the contents of the brasara/ 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, cuts, prices, ageing, occasions and products live in one place — see Steakhouse 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 brasara/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

brasara/
├── *.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 (20 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 LTR + RTL, Swiper, Fancybox)
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (35 blocks)
    │   └── plugins/                    jQuery, Bootstrap, GSAP, ScrollTrigger, Swiper, Fancybox
    ├── 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
        ├── bar/                         8 files
        ├── blog/                        9 files
        ├── decor/                       5 files
        ├── doneness/                    6 files
        ├── flags/                       6 files
        ├── gallery/                     8 files
        ├── home/                        15 files
        ├── icons/                       26 files
        ├── logo/                        4 files
        ├── menu/                        3 files
        ├── preloader/                   1 files
        ├── shop/                        15 files
        └── team/                        8 files

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 --br-bronze-rgb) — change both together.

Bronze draws the rules, the ornaments, the deco lattice, the icons and the sear marks; light bronze colours the titles and the italic eyebrows. Ember is the one action colour: the booking buttons (charcoal text on ember), the live states and the fire. Charcoal, the panel and the night are the grounds. --br-bg, --br-surface, --br-heading and --br-text are the semantic names the components use — the light theme swaps those (see Dark & Light Mode).

Fonts

Two Google Fonts are loaded in the head of each page: Josefin Sans (the spaced caps titles, navigation, buttons and body) and Bodoni Moda (the italic eyebrows and the big figures: prices, temperatures, days). Swap them by editing the Google Fonts link and the --br-ff-body / --br-ff-serif variables.

Logo

The logo is a deco flame of three parallel hairlines on two grill bars, beside BRASARA in spaced capitals. It ships as ready-made PNG files in assets/img/logo/:

• logo-light.png — for charcoal grounds: the headers in the default theme, the offcanvas, coming soon
• logo.png — for light grounds: the headers in the light theme
• logo-footer.png — the footer lockup with the line “steakhouse & fire kitchen”
• favicon.png — the browser tab icon

To use your own logo, replace these files; the header sizes the logo by its height.

Dark & Light Mode

The charcoal room is the default. Every header (and the mobile menu) has a theme switch that turns the lights on; the choice is saved in the browser under the key brasara-theme and applied by a one-line script in the <head> before the page paints. The switch sets data-theme="light" on the <html> tag.

• Tokens — the light values sit in one block, [data-theme="light"] { … }, right after :root.
• Bands that stay dark — sections with the class is-night (the ageing room, the bar, the footer) stay charcoal over the Damascus layer in both themes, and so do the photo bands and page titles.
• Start light — add data-theme="light" to the <html> tag of each page; the switch still works.

Steakhouse Logic

The figures on every page come from one data block, JS block 09 Brasara Data near the top of main.js (var BRASARA). Edit it once and the cards, slots, prices and totals follow. Prices are in US dollars; weights in grams; times are minutes after midnight (1020 = 5:00 pm); weekdays run 0 = Sunday to 6 = Saturday.

The dining room’s week

The steak builder

Price = weight ÷ 100 × (the cut’s price per 100 g + the premium for its days of ageing) + the sauce + the sides. A new cut moves the weight onto its own scale and offers its own ageing; a doneness past the grill’s suggestion for the cut brings a note (block 23).

The dry-ageing guide

The stage, its flavour notes and the premium come from the last step the days have reached; tenderness and the moisture lost are read between the steps, so every day has its own figures (block 24). The ageing room counts each hook’s days from the date, back to day 0 once a cut reaches its target — replace roomState() in block 10 House Clock with your own cellar log.

Table booking

Tables left per slot are a stand-in worked out from the date so the demo looks lived-in (Friday and Saturday nights fill first) — replace slotsOn() in block 10 with your own reservations. The wizard (block 25) never blocks on Continue; Confirm checks the details and gives a reference. Parties of eight or more hold $20 a guest on a card; thirteen or more are sent to Private Dining.

How the counter totals

The bag, the wishlist and the applied coupon are kept in the browser (localStorage). The first visit starts with a small demo bag and wishlist; to start empty, set the two demo lists in doShop() (block 29) to []. Checkout, booking, gift cards and the private-dining enquiry confirm on screen with a reference — connect them to your own systems to take real orders.

WebGL Layers

Block 08 draws two layers. Damascus — layered steel bands bent by slow folds, an etched hairline at every layer and bronze where the folds crest — sits under the dark bands and the footer as one canvas:

<canvas class="br-gl" data-gl="damascus" aria-hidden="true"></canvas>

The cleaver in the footer is a 2D signed-distance field (the blade with its hanging hole, the bolster, the handle and its rivets) drawn in silhouette, with a rim light travelling round its edge: <canvas class="footer-cleaver" data-cleaver>.

• Colours — Damascus reads --gl-1 (ground), --gl-2 (steel), --gl-3 (bronze) and --gl-alpha from the canvas.
• Performance — a layer runs only while it is on screen and the tab is visible; reduced motion gets one still frame.
• Remove one — delete the canvas; nothing else depends on it.

RTL (Right To Left)

Right to left comes from the stylesheets, not from separate pages: the language picker in the top bar and the mobile menu lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the direction (key brasara-dir) and reloads; the script in <head> then sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute. Nothing is translated — you bring your own copy. To make a page right to left for good:

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

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 35 numbered blocks. Each block is a self-contained doSomething() function that skips pages where its section is not present:

• 01 — Preloader
• 02 — Sticky Header
• 03 — Offcanvas Menu
• 04 — Scroll Reveals
• 05 — Back To Top
• 06 — Anchor Scroll
• 07 — Light & Dark Mode, Direction
• 08 — WebGL Damascus & Cleaver
• 09 — Brasara Data
• 10 — House Clock
• 11 — Custom Select
• 12 — Meters
• 13 — Hero Sliders
• 14 — Card Sliders
• 15 — Accordion
• 16 — Filter Tabs
• 17 — Grid Search
• 18 — Newsletter
• 19 — Choice Cards
• 20 — Doneness Scroll
• 21 — Flames Along The Edge
• 22 — Butcher's Diagram
• 23 — Steak Builder
• 24 — Dry-Ageing Guide
• 25 — Table Booking
• 26 — Gift Cards
• 27 — Menu Filters
• 28 — Contact Form
• 29 — The Butcher Counter
• 30 — Account Forms
• 31 — History Timeline
• 32 — Article Tools
• 33 — Demo Forms
• 34 — Launch Countdown
• 35 — FAQ Search

Every animation respects prefers-reduced-motion: content appears in its final state.

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. Images are grouped inside assets/img/:

The logo files, the line icons, the deco lattice, the doneness slices, the bronze medallion, the charcoal texture, the drawn pantry packs 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 forms and the comment form post to sendmail.php, a lightweight AJAX mail handler. The newsletter, job, enquiry, booking, gift card, checkout and account forms are demo forms: they confirm on screen and are ready to connect to your own systems. To activate the mail handler:

1. Set your email address

$email = 'example@example.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support. Opened from your computer, it shows an “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

• Create v3 keys for your domain in the Google reCAPTCHA admin console
• In sendmail.php, replace YOUR_RECAPTCHA_V3_SECRET_KEY with your secret key
• Add a hidden token field inside the form and load the reCAPTCHA script with your site key before </body>:

<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

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

Credits

• Bootstrap 5.3.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: Josefin Sans, Bodoni Moda

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.