Open Tickets — Elegant theme kit

A premium refresh of opentickets.co.za for the existing Laravel + Livewire + Alpine "bookishow" theme: four pages (Home, Event, FAQs, Search), one fixed top menu, Bootstrap 5.3, vanilla JS, and every colour, font, size, radius and shadow in one file (assets/css/variables.css).

It is a static kit: open index.html in a browser and everything works (filtering, hero, modal, FAQ search). Files under assets/js/demo/ stand in for things the live site already provides and must not be deployed.

Contents

1. Folder overview
2. Retheme from one file
3. Porting into the bookishow Blade views
4. Bootstrap 4 → 5 migration table
5. Isotope / Alpine: proof it is untouched
6. Notes for developers (jQuery order, Isotope licence, Slick, hero fade)
7. Recommended Slick options
8. Demo-only files
9. Navigation decision
10. Suggested additions
11. Seating-map slot
12. Test results
13. Image mapping

---

1. Folder overview

index.html            Home: hero, featured strip, #events-grid (Isotope), footer, chat button
event.html            Event detail (Appel in PE) + "Select a Section" modal + seating-map slot
faqs.html             FAQ: hero, category cards, live search, accordions, "Still need help?"
search.html           Search results + designed empty state
README.md
assets/
  css/
    variables.css     ALL tokens (colours, fonts, sizes, spacing, radius, shadows) + alternative palette
    base.css          @font-face, Bootstrap 5 token mapping, element defaults, focus styles
    components.css    every component, commented section by section (otr- prefix + BEM)
    pages.css         page-level layout (home heading, event page spacing, hero fade)
  js/
    main.js           nav shrink (one passive scroll listener + rAF), mobile search toggle, menu guard
    faq.js            FAQ live search + category cards (vanilla)
    search.js         clear (x) button in the search page box
    demo/             DEMO ONLY (see section 8)
  vendor/             bootstrap 5.3.3, font-awesome 5.15.4 (local, no CDN)
  fonts/              Playfair Display + Inter, self-hosted woff2 (latin + latin-ext)
  images/
    logo/             logo-icon.png (white original), logo-gold.png (gold, used everywhere)
    banners/          1210x450 hero slides + FAQ hero
    events/           event posters (cards, featured strip, event page)

Naming: every new class uses the otr- prefix with BEM (.otr-card, .otr-card__date, .otr-nav--shrunk). The live site already uses ot- (e.g. ot-chatbot__launcher), so we never use ot-. Original theme classes are kept next to ours (.osahan-slider, .osahan-slider-item, .e-card, .m-card-cover, .grid-item, ot-chatbot…).

---

2. Retheme from one file

All colours live in assets/css/variables.css and nowhere else. Check it yourself:

grep -nE "#[0-9a-fA-F]{3,8}\b|rgba?\([0-9]" assets/css/base.css assets/css/components.css assets/css/pages.css *.html

returns nothing (rgba() is only ever used with a token channel, e.g. rgba(var(--otr-navy-rgb), .5)).

Want to change	Edit this token
Nav and footer colour	--otr-navy-900 (and --otr-navy-rgb)
Page background	--otr-ivory
Gold (CTA buttons, labels, underline, dots, logo)	--otr-gold, --otr-gold-hover, --otr-gold-deep (+ --otr-gold-rgb, --otr-gold-deep-rgb)
Crimson (dates, links, small accents)	--otr-crimson, --otr-crimson-dark, --otr-crimson-tint (+ --otr-crimson-rgb)
Body text / muted text	--otr-ink, --otr-slate
Fonts	--otr-font-display, --otr-font-body (and the @font-face in base.css)
Radius, shadows, spacing, type scale	--otr-radius-*, --otr-shadow-*, --otr-space-*, --otr-fs-*

Alternative palette (proof). The bottom of variables.css holds a commented "Forest & Copper" palette. Paste its values over section 1 and reload: nav, footer, buttons, dates and backgrounds all change, with no other file touched (all pairs stay WCAG AA; navy-on-gold CTA text is 7.7:1). A screenshot of the result is in our presentation pack.

The gold logo follows the gold token. assets/images/logo/logo-gold.png is the existing white logo (logo-icon.png, kept) recoloured to --otr-gold with the identical shape and transparency. After changing the gold token, rebuild it with the dev script tools/make-gold-logo.js (in our source repository; it reads --otr-gold from variables.css and rewrites the PNG; needs npm i pngjs). Without the script: open logo-icon.png in any image editor, fill all non-transparent pixels with the new gold hex, and save as logo-gold.png.

Contrast reference: navy on gold 7.7:1 (hover 6.2:1) · crimson on white 7.7:1 · deep gold on ivory 4.1:1 (focus rings, edges) · muted text on ivory 5.9:1.

---

3. Porting into the bookishow Blade views

Step 1 — assets. Copy assets/css/*, assets/fonts, assets/images, assets/js/main.js|faq.js|search.js into the theme. Load order in the layout <head>: bootstrap.min.css (5.3) → Font Awesome 5 → variables.css → base.css → components.css → pages.css. The theme is Bootstrap 4 / SB Admin 2 today: upgrade to Bootstrap 5.3 (required by the brief) and remove the old sidebar/topbar CSS and the sidebarToggleTop script. Load bootstrap.bundle.min.js and main.js with defer. Do not copy assets/js/demo/*.

Step 2 — component by component.

This is the beginning of the README. Read the rest at the original. Read the full README ↗