Overview

Nocturna is a moody, animated HTML5 template for cocktail bars, lounges and speakeasies. Libre Caslon headlines and Outfit text give it the low light of a bar after ten. Underneath, it runs real bar logic. The bar clock knows when happy hour starts and when last call comes. Every drink's strength is worked out from its own recipe, and an age gate opens once for each visitor. It ships with night and day mode, right-to-left support and WebGL layers - a neon haze in teal and rose and a neon sign that hums in the footer.

What’s included

• 30 HTML pages, 3 unique home page designs
• Night and day mode on one switch, remembered between visits, with no flash on load
• Right-to-left stylesheets and a language picker that turns any page around
• WebGL layers tinted by the theme colours: a neon haze and a neon sign
• Real bar logic from one data block: bar clock, happy-hour prices, drink strength and standard drinks
• An age gate that opens once and points under-age visitors to the zero-proof list
• A blend-mode cursor that inverts the big serif words
• Three scroll moments that never pin the page
• prefers-reduced-motion support for accessibility
• Working PHP form handler with optional invisible reCAPTCHA v3
• Fully responsive, zero console errors
• Well-commented code with a numbered JS index
• Documentation included

Getting Started

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

1. Open locally

Unzip the package and open nocturna/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — every engine on the site works straight from the files.

2. Deploy to a server

Upload the contents of the nocturna/ folder to your hosting with an FTP client (such as FileZilla) or your hosting control panel. Open your domain and the template loads at once.

3. Customise

Custom styles live in assets/css/style.css and assets/css/responsive.css. Colours and fonts are CSS variables — see Colors & Fonts. Prices, hours and items live in one data block in assets/js/main.js (module 09, Bar Data) — see JavaScript Guide.

File Structure

Folder Structure

nocturna/
├── *.html  (the pages)
├── sendmail.php
├── documentation/
└── assets/
    ├── css/  fontawesome-all.css, plugins, responsive.css, responsive.rtl.css, style.css, style.rtl.css
    ├── fonts/  theme-icons
    ├── img/  bar, blog, cocktails, events, flags, gallery, gifts, hero, logo, menu, partners, people, shaped, shop
    ├── js/  main.js, plugins
    └── webfonts/  fa-brands-400.ttf, fa-brands-400.woff2, fa-regular-400.ttf, fa-regular-400.woff2, fa-solid-900.ttf, fa-solid-9

Colors & Fonts

The design is driven by CSS variables declared at the top of style.css. Change a token once and every section, button and card updates.

Fonts

Libre Caslon Text and Outfit are loaded from Google Fonts in the <head> of every page. To change a font, replace the Google Fonts link and the font variables in style.css.

Light & Dark Mode

Every header (and the mobile menu) has a theme switch. The choice is saved in the browser under the key nocturna-theme and applied by a one-line script in the <head> before the page paints, so a visitor never sees a flash. The switch sets data-theme on the <html> tag. The night theme is the default; Home 02 opens in the day theme (data-theme="light").

• Tokens — the other theme’s colours sit in their own [data-theme] block right after :root in style.css. Change a colour there.
• WebGL layers — the layers read their colours from CSS custom properties (--gl-1 to --gl-3, --gl-alpha), so a theme change repaints them.
• Start in the other theme — add data-theme="light" to a page’s <html> tag; the switch still works and is still remembered.

RTL (Right To Left)

Nocturna is RTL-ready: the layout, the sliders and the animations mirror. The language picker beside the theme switch lists left-to-right and right-to-left languages. Choosing a right-to-left one stores the language and the direction (keys nocturna-lang and nocturna-dir) and reloads; the script in <head> then sets dir="rtl" and swaps three stylesheets for the files in their data-rtl attribute. Nothing is translated — you bring your own 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, split into numbered modules listed in the index at the top of the file. Plugins are in assets/js/plugins/ and load before it. Module 09 (Bar Data) is the one data block the pages and engines read: change a price, an hour or an item there and every page that shows it follows.

Images

The package ships with placeholder images at their real dimensions. Replace them with your own photos using the same file names, or update the src attributes. Images are grouped inside assets/img/:

Contact Form

The contact form posts to sendmail.php, a lightweight AJAX mail handler; the success or error message appears under the button without a reload. The other forms on the site are demo forms: they confirm on screen and are ready to connect to your own systems.

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 own computer.

3. Optional: enable Google reCAPTCHA v3

Invisible reCAPTCHA v3 is built into the handler and stays dormant until the form sends a token. Create v3 keys in the reCAPTCHA admin console, replace YOUR_RECAPTCHA_V3_SECRET_KEY in sendmail.php, and load the reCAPTCHA script with your site key on the contact page.

Credits

This template is built with 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: Libre Caslon Text, Outfit

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, map embeds and video popups.

Support

Questions or help with the template? Contact us at metropolitanhost.com. We answer the same business day, 9am–6pm ET.