Event Venue Template

Quick Start

1. Upload index.html and the assets/ folder to any static host.
2. Replace the four production photographs in assets/img/ as described in Photography.
3. Edit venue and season copy in index.html; edit the four production data rows in assets/script.js so the interactive stage matches.
4. Keep the GSAP, ScrollTrigger and Lenis CDN tags at the end of index.html, or self-host the same versions.

The production selector

The four PRODUCTIONS rows in initProductionSelector provide the stage title, dates, price, synopsis and image information. Their order matches the four [data-production-button] buttons and four [data-production-image] images in index.html.

A selection closes both [data-curtain] panels. The script writes content only after the close tween has covered the stage, then opens the curtains and settles [data-house-glow]. Rapid selections are safe: a running transition finishes and then serves only the latest requested index.

Buttons work with click, tap and ordinary Tab navigation. Arrow Left/Right moves and selects, while Home/End selects the first or last production.

Sections and customization

Every script setup guards its own markup, so sections can be removed independently:

• Fixed navigation: update or remove links when their target sections change.
• Hero ([data-hero]): an ivory printed poster beside an abstract deep-stage panel.
• Current production (#now): the selector, stage, four image slots and booking link.
• Season (#season): a chronological <ol> playbill, not a card grid. Add or remove <li> rows freely.
• Our house (#house): the venue story and three practical commitments.
• Visit (#visit): auditorium, access and travel rows.
• Support (#support): membership proposition and action.
• Footer.

Add data-reveal to an element to include it in the scroll reveal. Keep [data-intro] for the two hero columns if you retain the intro.

Photography

This theatre vertical needs real production photography. The markup includes four local image slots:

• assets/img/production-01.webp
• assets/img/production-02.webp
• assets/img/production-03.webp
• assets/img/production-04.webp

Each <img> has a 1600 × 1067 intrinsic size and useful alt text. The stage has a deep-red fallback pattern, and the production copy sits on a solid --stage panel, so unusually bright images cannot make the text unreadable.

The included files are bundled, optimised WebP derivatives with a shared desaturated theatre grade baked into the pixels. To swap a photograph, overwrite the matching file in assets/img/ and preserve its filename and 3:2 proportions, or update the matching <img src>, width and height values.

The source project also keeps the ungraded originals in assets/img-src/ and the build recipe in assets/img-manifest.json. To regenerate all four derivatives after changing a manifest source, run:

Code snippet omitted: it ships with the download.

The photographs were generated for this fictional theatre and require no stock-photo attribution. Review the usage terms of any replacement images you add.

Palette

Edit each solid and matching RGB triple together at the top of assets/style.css:

Code snippet omitted: it ships with the download.

All translucent colours derive from those triples. The buyer-facing comment above :root records every contrast pair as used, including ticket ivory composited at .72 and .62 opacity.

Electric blue is safe as text on oxblood and deep stage (7.03:1 and 8.79:1), but fails on ticket ivory (1.70:1). Do not use it as text in ivory sections; the stylesheet limits it there to non-text focus and decorative treatments.

Accessibility

• The production controls are real buttons with aria-pressed, visible focus and one shared interaction path for keyboard, click and tap.
• Arrow Left/Right and Home/End navigation changes the selected production and moves focus.
• The selected title and dates are announced through a polite live region after the stage content changes.
• Every photograph has useful alternative text; inactive production images are hidden from assistive technology.
• Reading colours exceed WCAG AA at their actual opacity and surface combinations.
• Access, travel, ticket and membership information remains ordinary semantic HTML.

No JavaScript

With JavaScript disabled, the first production is complete and visible, including its photograph slot, title, dates, synopsis and price. All four shows remain readable in the season ledger. Reveal hiding only applies beneath the synchronous .has-js gate; if GSAP or ScrollTrigger is blocked, script.js removes that class and exposes the plain document.

Reduced motion

prefers-reduced-motion: reduce keeps every reveal target visible and changes production content immediately without curtain movement. The CSS fallback also removes transitions and forces the curtain panels open, so the page is complete from first paint.

Dependencies

• GSAP 3.15.0 core
• ScrollTrigger 3.15.0
• Lenis 1.3.17, optional and synchronised with ScrollTrigger
• Google Fonts: Bona Nova for display and Geologica for all reading and data

To remove Lenis, delete its CDN tag in index.html and the optional Lenis block near the top of assets/script.js.