Pages Hard
Ticketing — Festival Landing
An immersive multi-day festival landing page wrapped in a warm sunset gradient with a film-grain overlay and a funky display headline. A poster-style hero stacks the dates, a live countdown to gates, and a stacked-headliner lineup. Day-by-day tabs swap the schedule, three pass tiers carry sold-out and low-stock badges, and a stylized site map, experiences grid, and accordion FAQ round it out. Scroll reveals, a mobile menu, and toasts run on vanilla JavaScript only.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
/* Festival palette — sunset orange → pink → purple */
--brand: #ff6b35;
--brand-d: #e0451d;
--accent: #ff3d81;
--grape: #7c3aed;
--grape-d: #5b21b6;
--gold: #ffb347;
--ink: #1a0e1f;
--ink-2: #3a2a40;
--muted: #7a6a80;
--bg: #fff7f2;
--surface: #ffffff;
--line: rgba(26, 14, 31, 0.1);
--ok: #16a34a;
--warn: #d97706;
--danger: #dc2626;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 28px;
--sh-sm: 0 4px 14px rgba(91, 33, 182, 0.12);
--sh-md: 0 12px 30px rgba(124, 58, 237, 0.18);
--sh-lg: 0 24px 60px rgba(124, 58, 237, 0.28);
--sunset: linear-gradient(135deg, #ff6b35 0%, #ff3d81 48%, #7c3aed 100%);
--sunset-soft: linear-gradient(160deg, #ffb347 0%, #ff6b35 35%, #ff3d81 70%, #7c3aed 100%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.5;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { margin: 0; line-height: 1.05; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
.skip-link {
position: absolute; left: -999px; top: 0; z-index: 200;
background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }
/* ---------- buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px; font-weight: 700; font-size: 0.95rem;
padding: 11px 20px; border-radius: 999px; border: 0;
cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
white-space: nowrap; font-family: inherit;
}
.btn:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }
.btn--solid { background: var(--sunset); color: #fff; box-shadow: var(--sh-sm); }
.btn--solid:hover { transform: translateY(-2px); box-shadow: var(--sh-md); filter: saturate(1.1); }
.btn--solid:active { transform: translateY(0); }
.btn--ghost { background: rgba(255,255,255,0.1); color: inherit; border: 1.5px solid var(--line); }
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--brand); }
.btn--lg { padding: 15px 30px; font-size: 1.05rem; }
/* ---------- nav ---------- */
.nav {
position: sticky; top: 0; z-index: 100;
background: rgba(255, 247, 242, 0.82);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
}
.nav__inner {
max-width: 1180px; margin: 0 auto; padding: 12px 22px;
display: flex; align-items: center; gap: 22px;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; }
.brand__mark {
font-size: 1.5rem; background: var(--sunset);
-webkit-background-clip: text; background-clip: text; color: transparent;
line-height: 1;
}
.brand__name { font-family: "Righteous", "Inter", sans-serif; letter-spacing: .04em; font-size: 1.2rem; }
.nav__links { display: flex; gap: 22px; margin-left: 8px; font-weight: 600; font-size: .95rem; }
.nav__links a { color: var(--ink-2); transition: color .15s; }
.nav__links a:hover { color: var(--brand); }
.nav__actions { display: flex; gap: 10px; margin-left: auto; align-items: center; }
.nav__actions .btn--ghost { font-size: .82rem; padding: 9px 14px; font-weight: 600; }
.nav__burger {
display: none; margin-left: auto; flex-direction: column; gap: 5px;
background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav__burger span { width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: .25s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.mobile-nav {
display: flex; flex-direction: column; gap: 4px; padding: 12px 22px 18px;
border-top: 1px solid var(--line); background: var(--surface);
}
.mobile-nav a { padding: 11px 6px; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.mobile-nav .btn { margin-top: 8px; }
/* ---------- grain overlay ---------- */
.hero__grain, .cta__grain {
position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}
/* ---------- hero ---------- */
.hero {
position: relative; overflow: hidden; color: #fff;
background: var(--sunset-soft);
text-align: center;
}
.hero::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 90px;
background: linear-gradient(to top, var(--bg), transparent);
}
.hero__inner {
position: relative; z-index: 2; max-width: 980px;
margin: 0 auto; padding: 76px 22px 96px;
}
.hero__eyebrow {
display: inline-block; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
font-size: .78rem; padding: 7px 16px; border-radius: 999px;
background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.32);
}
.hero__title {
font-family: "Righteous", "Inter", sans-serif;
font-size: clamp(3.4rem, 13vw, 8.5rem);
letter-spacing: .01em; margin: 16px 0 6px;
text-shadow: 0 8px 40px rgba(91, 33, 182, 0.45);
}
.hero__yr { color: var(--gold); }
.hero__dates { font-size: clamp(1rem, 3vw, 1.4rem); font-weight: 600; opacity: .96; }
.countdown { display: flex; justify-content: center; gap: 12px; margin: 30px 0 8px; flex-wrap: wrap; }
.cd {
min-width: 76px; padding: 14px 10px; border-radius: var(--r-md);
background: rgba(26, 14, 31, 0.28); border: 1px solid rgba(255,255,255,0.25);
backdrop-filter: blur(6px); display: flex; flex-direction: column; gap: 4px;
}
.cd__num { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.cd__lbl { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.hero__cta { display: flex; gap: 14px; justify-content: center; margin: 28px 0 40px; flex-wrap: wrap; }
.hero__cta .btn--solid { background: #fff; color: var(--brand-d); }
.hero__cta .btn--solid:hover { filter: none; }
.hero__cta .btn--ghost { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.45); }
.hero__poster {
display: flex; flex-direction: column; gap: 8px; align-items: center;
padding: 26px; border-radius: var(--r-lg);
border: 1.5px dashed rgba(255,255,255,0.4);
background: rgba(26, 14, 31, 0.18);
}
.hl { font-family: "Righteous", "Inter", sans-serif; letter-spacing: .03em; line-height: 1.1; }
.hl { font-size: clamp(1.5rem, 5vw, 2.6rem); }
.hl--mid { font-size: clamp(1.3rem, 4.4vw, 2.2rem); color: var(--gold); }
.hl--sm { font-family: "Inter", sans-serif; font-weight: 600; font-size: .95rem; opacity: .9; letter-spacing: .02em; }
/* ---------- sections ---------- */
.section { max-width: 1180px; margin: 0 auto; padding: 76px 22px; }
.section--alt { max-width: none; background: var(--surface); border-block: 1px solid var(--line); }
.section--alt > * { max-width: 1180px; margin-inline: auto; }
.section__head { text-align: center; margin-bottom: 36px; }
.section__title { font-family: "Righteous", "Inter", sans-serif; font-size: clamp(2rem, 5vw, 3.1rem); }
.section__sub { color: var(--muted); margin-top: 10px; font-size: 1.05rem; }
/* ---------- tabs / lineup ---------- */
.tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.tab {
font-family: inherit; font-weight: 700; font-size: .95rem; cursor: pointer;
padding: 11px 22px; border-radius: 999px; border: 1.5px solid var(--line);
background: var(--surface); color: var(--ink-2); transition: .18s;
}
.tab:hover { border-color: var(--brand); transform: translateY(-1px); }
.tab--on { background: var(--sunset); color: #fff; border-color: transparent; box-shadow: var(--sh-sm); }
.tab:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }
.panel { animation: fadeUp .4s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.acts { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }
.act {
display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center;
padding: 16px 22px; border-radius: var(--r-md);
background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm);
transition: transform .15s, box-shadow .2s;
}
.section--alt .act { border-color: var(--line); }
.act:hover { transform: translateX(4px); box-shadow: var(--sh-md); }
.act__name { font-weight: 700; }
.act--head { background: var(--sunset); color: #fff; border-color: transparent; }
.act--head .act__name { font-family: "Righteous", "Inter", sans-serif; font-size: 1.35rem; letter-spacing: .02em; }
.act__stage { font-size: .85rem; color: var(--muted); font-weight: 600; }
.act--head .act__stage { color: rgba(255,255,255,0.85); }
.act__time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand-d); }
.act--head .act__time { color: var(--gold); }
/* ---------- passes ---------- */
.passes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.pass {
position: relative; display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 26px 24px; box-shadow: var(--sh-sm); transition: transform .2s, box-shadow .25s;
}
.pass:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.pass--feature {
border: 2px solid transparent;
background:
linear-gradient(var(--surface), var(--surface)) padding-box,
var(--sunset) border-box;
transform: scale(1.03);
}
.pass--feature:hover { transform: scale(1.03) translateY(-6px); }
.pass__ribbon {
position: absolute; top: 16px; right: -6px;
background: var(--accent); color: #fff; font-weight: 700; font-size: .72rem;
letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px;
border-radius: var(--r-sm) 0 0 var(--r-sm); box-shadow: var(--sh-sm);
}
.pass__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.pass__tier { font-weight: 700; font-size: 1.05rem; }
.pass__price { font-family: "Righteous", "Inter", sans-serif; font-size: 3rem; line-height: 1; margin: 6px 0; }
.pass__cur { font-size: 1.4rem; vertical-align: super; color: var(--brand); }
.pass__note { color: var(--muted); font-size: .9rem; }
.pass__feat { display: grid; gap: 9px; margin: 20px 0 24px; }
.pass__feat li { position: relative; padding-left: 26px; font-size: .94rem; color: var(--ink-2); }
.pass__feat li::before {
content: "✦"; position: absolute; left: 0; top: 0; color: var(--accent); font-size: .9rem;
}
.pass__btn { margin-top: auto; width: 100%; }
.badge {
font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.badge--ok { background: rgba(22,163,74,.14); color: var(--ok); }
.badge--warn { background: rgba(217,119,6,.16); color: var(--warn); }
.badge--danger { background: rgba(220,38,38,.14); color: var(--danger); }
.passes__legend {
display: flex; gap: 22px; justify-content: center; flex-wrap: wrap;
margin-top: 26px; color: var(--muted); font-size: .88rem; align-items: center;
}
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot--ok { background: var(--ok); } .dot--warn { background: var(--warn); } .dot--danger { background: var(--danger); }
/* ---------- experiences ---------- */
.exp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.exp__card {
position: relative; overflow: hidden; min-height: 230px; border-radius: var(--r-lg);
padding: 22px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end;
box-shadow: var(--sh-md); transition: transform .2s;
}
.exp__card:hover { transform: translateY(-6px) scale(1.01); }
.exp__card h3 { font-family: "Righteous", "Inter", sans-serif; font-size: 1.35rem; margin-bottom: 8px; }
.exp__card p { font-size: .9rem; opacity: .94; }
.exp__card::before {
content: ""; position: absolute; inset: 0; opacity: .9;
}
.exp__card > * { position: relative; z-index: 1; }
.exp--a::before { background: linear-gradient(160deg, #ff6b35, #ff3d81); }
.exp--b::before { background: linear-gradient(160deg, #ffb347, #ff6b35); }
.exp--c::before { background: linear-gradient(160deg, #ff3d81, #7c3aed); }
.exp--d::before { background: linear-gradient(160deg, #7c3aed, #5b21b6); }
/* ---------- map ---------- */
.map { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; align-items: stretch; }
.map__canvas {
position: relative; min-height: 320px; border-radius: var(--r-lg); overflow: hidden;
background:
radial-gradient(circle at 30% 20%, rgba(255,179,71,.35), transparent 45%),
radial-gradient(circle at 80% 80%, rgba(124,58,237,.3), transparent 45%),
repeating-linear-gradient(45deg, #fde8d8 0 18px, #fbdcc6 18px 36px);
border: 1px solid var(--line); box-shadow: var(--sh-sm);
}
.pin {
position: absolute; transform: translate(-50%, -50%);
font-size: .78rem; font-weight: 700; color: #fff; padding: 6px 12px 6px 24px;
border-radius: 999px; box-shadow: var(--sh-sm); white-space: nowrap;
}
.pin::before {
content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
.pin--sol { background: #ff6b35; } .pin--luna { background: #7c3aed; }
.pin--dune { background: #16a34a; } .pin--mir { background: #ff3d81; }
.pin--camp { background: #d97706; }
.map__legend {
display: grid; gap: 14px; align-content: center; padding: 24px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.map__legend li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: .95rem; }
.ml { width: 16px; height: 16px; border-radius: 5px; flex: none; }
.ml--sol { background: #ff6b35; } .ml--luna { background: #7c3aed; }
.ml--dune { background: #16a34a; } .ml--mir { background: #ff3d81; }
.ml--camp { background: #d97706; }
/* ---------- faq ---------- */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.faq__item {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 4px 22px; box-shadow: var(--sh-sm); transition: box-shadow .2s;
}
.faq__item[open] { box-shadow: var(--sh-md); }
.faq__item summary {
cursor: pointer; font-weight: 700; padding: 16px 0; list-style: none;
display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+"; font-size: 1.5rem; color: var(--brand); transition: transform .2s; line-height: 1;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding: 0 0 18px; color: var(--ink-2); }
/* ---------- final cta ---------- */
.cta { position: relative; overflow: hidden; color: #fff; text-align: center; background: var(--sunset); }
.cta__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 80px 22px; }
.cta__title { font-family: "Righteous", "Inter", sans-serif; font-size: clamp(2rem, 6vw, 3.4rem); }
.cta__sub { margin: 14px 0 28px; font-size: 1.1rem; opacity: .95; }
.cta__inner .btn--solid { background: #fff; color: var(--brand-d); }
/* ---------- footer ---------- */
.footer { background: var(--ink); color: #e9e2ec; padding: 56px 22px 28px; }
.footer__inner {
max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 2fr; gap: 40px;
}
.footer__brand .brand__name { display: inline; }
.footer__brand p { margin-top: 12px; color: #b6abbb; font-size: .92rem; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.footer__cols h3 { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: #c7b9cc; margin-bottom: 14px; }
.footer__cols a { display: block; padding: 5px 0; color: #d9cfde; font-size: .92rem; transition: color .15s; }
.footer__cols a:hover { color: var(--gold); }
.footer__sub { display: flex; gap: 8px; }
.footer__sub input {
flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid #3d2e44;
background: #2a1c30; color: #fff; font-family: inherit; font-size: .9rem;
}
.footer__sub input::placeholder { color: #9a8aa0; }
.footer__sub input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.footer__sub .btn { padding: 10px 18px; }
.footer__fine { max-width: 1180px; margin: 32px auto 0; padding-top: 22px; border-top: 1px solid #2e2034; color: #978a9c; font-size: .82rem; text-align: center; }
/* ---------- toast ---------- */
.toast {
position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 30px);
background: var(--ink); color: #fff; padding: 13px 22px; border-radius: 999px;
font-weight: 600; font-size: .92rem; box-shadow: var(--sh-lg);
opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 300; max-width: 90vw;
}
.toast--show { opacity: 1; transform: translate(-50%, 0); }
/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}
/* ---------- responsive ---------- */
@media (max-width: 900px) {
.passes { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
.pass--feature { transform: none; }
.pass--feature:hover { transform: translateY(-6px); }
.exp { grid-template-columns: repeat(2, 1fr); }
.map { grid-template-columns: 1fr; }
.footer__inner { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 760px) {
.nav__links, .nav__actions { display: none; }
.nav__burger { display: flex; }
}
@media (max-width: 520px) {
.section { padding: 56px 18px; }
.hero__inner { padding: 56px 18px 80px; }
.cd { min-width: 64px; padding: 11px 8px; }
.cd__num { font-size: 1.6rem; }
.exp { grid-template-columns: 1fr; }
.act { grid-template-columns: 1fr auto; }
.act__stage { display: none; }
.footer__cols { grid-template-columns: 1fr; }
}(function () {
"use strict";
/* ---------- toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("toast--show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("toast--show");
}, 2600);
}
/* ---------- mobile nav ---------- */
var burger = document.getElementById("burger");
var mobileNav = document.getElementById("mobileNav");
if (burger && mobileNav) {
burger.addEventListener("click", function () {
var open = burger.getAttribute("aria-expanded") === "true";
burger.setAttribute("aria-expanded", String(!open));
mobileNav.hidden = open;
});
mobileNav.querySelectorAll("a").forEach(function (a) {
a.addEventListener("click", function () {
burger.setAttribute("aria-expanded", "false");
mobileNav.hidden = true;
});
});
}
/* ---------- countdown ---------- */
var target = new Date("2026-08-14T16:00:00").getTime();
var cdNodes = {
days: document.querySelector('[data-cd="days"]'),
hours: document.querySelector('[data-cd="hours"]'),
mins: document.querySelector('[data-cd="mins"]'),
secs: document.querySelector('[data-cd="secs"]')
};
function pad(n) { return n < 10 ? "0" + n : "" + n; }
function tick() {
var diff = target - Date.now();
if (diff < 0) diff = 0;
var d = Math.floor(diff / 86400000);
var h = Math.floor((diff % 86400000) / 3600000);
var m = Math.floor((diff % 3600000) / 60000);
var s = Math.floor((diff % 60000) / 1000);
if (cdNodes.days) cdNodes.days.textContent = pad(d);
if (cdNodes.hours) cdNodes.hours.textContent = pad(h);
if (cdNodes.mins) cdNodes.mins.textContent = pad(m);
if (cdNodes.secs) cdNodes.secs.textContent = pad(s);
}
tick();
setInterval(tick, 1000);
/* ---------- lineup tabs ---------- */
var tabs = Array.prototype.slice.call(document.querySelectorAll(".tab"));
var panels = {
fri: document.getElementById("panel-fri"),
sat: document.getElementById("panel-sat"),
sun: document.getElementById("panel-sun")
};
function activate(day) {
tabs.forEach(function (t) {
var on = t.dataset.day === day;
t.classList.toggle("tab--on", on);
t.setAttribute("aria-selected", String(on));
});
Object.keys(panels).forEach(function (k) {
if (!panels[k]) return;
var on = k === day;
panels[k].hidden = !on;
panels[k].classList.toggle("panel--on", on);
});
}
tabs.forEach(function (t, i) {
t.addEventListener("click", function () { activate(t.dataset.day); });
t.addEventListener("keydown", function (e) {
if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
e.preventDefault();
var dir = e.key === "ArrowRight" ? 1 : -1;
var next = tabs[(i + dir + tabs.length) % tabs.length];
next.focus();
activate(next.dataset.day);
});
});
/* ---------- pass buttons ---------- */
document.querySelectorAll(".pass__btn").forEach(function (btn) {
btn.addEventListener("click", function () {
toast("Added " + btn.dataset.pass + " to your cart");
});
});
/* ---------- newsletter ---------- */
var subForm = document.getElementById("subForm");
if (subForm) {
subForm.addEventListener("submit", function (e) {
e.preventDefault();
var input = subForm.querySelector("input");
toast("You're on the list — see you in the desert!");
if (input) input.value = "";
});
}
/* ---------- scroll reveal ---------- */
var revealEls = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add("is-in");
io.unobserve(entry.target);
}
});
}, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
revealEls.forEach(function (el) { io.observe(el); });
} else {
revealEls.forEach(function (el) { el.classList.add("is-in"); });
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SOLSTICE — Three Days in the Sun</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Righteous&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="nav" id="top">
<div class="nav__inner">
<a class="brand" href="#top" aria-label="SOLSTICE festival home">
<span class="brand__mark" aria-hidden="true">◎</span>
<span class="brand__name">SOLSTICE</span>
</a>
<nav class="nav__links" aria-label="Primary">
<a href="#lineup">Lineup</a>
<a href="#passes">Passes</a>
<a href="#experiences">Experiences</a>
<a href="#map">Map</a>
<a href="#faq">FAQ</a>
</nav>
<div class="nav__actions">
<a class="btn btn--ghost" href="#map">Aug 14–16 · Mesa Verde</a>
<a class="btn btn--solid" href="#passes">Get Passes</a>
</div>
<button class="nav__burger" id="burger" aria-label="Open menu" aria-expanded="false" aria-controls="mobileNav">
<span></span><span></span><span></span>
</button>
</div>
<div class="mobile-nav" id="mobileNav" hidden>
<a href="#lineup">Lineup</a>
<a href="#passes">Passes</a>
<a href="#experiences">Experiences</a>
<a href="#map">Map</a>
<a href="#faq">FAQ</a>
<a class="btn btn--solid" href="#passes">Get Passes</a>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero" aria-labelledby="hero-title">
<div class="hero__grain" aria-hidden="true"></div>
<div class="hero__inner">
<p class="hero__eyebrow reveal">3 days · 5 stages · 60+ artists</p>
<h1 class="hero__title reveal" id="hero-title">SOLSTICE<span class="hero__yr">’26</span></h1>
<p class="hero__dates reveal">August 14–16 · Mesa Verde Desert, Arizona</p>
<div class="countdown reveal" id="countdown" aria-label="Time until gates open" role="timer">
<div class="cd"><span class="cd__num" data-cd="days">00</span><span class="cd__lbl">Days</span></div>
<div class="cd"><span class="cd__num" data-cd="hours">00</span><span class="cd__lbl">Hrs</span></div>
<div class="cd"><span class="cd__num" data-cd="mins">00</span><span class="cd__lbl">Min</span></div>
<div class="cd"><span class="cd__num" data-cd="secs">00</span><span class="cd__lbl">Sec</span></div>
</div>
<div class="hero__cta reveal">
<a class="btn btn--solid btn--lg" href="#passes">Grab a Pass</a>
<a class="btn btn--ghost btn--lg" href="#lineup">See the Lineup</a>
</div>
<ul class="hero__poster reveal" aria-label="Headliners">
<li class="hl">AURELIA SKY</li>
<li class="hl hl--mid">THE VELVET TIDE</li>
<li class="hl">KOSMO NOIR</li>
<li class="hl hl--sm">Mira Solene · Dust & Echo · Paper Lanterns · Río Cobre · Saint Marlow · Glasshouse Choir</li>
</ul>
</div>
</section>
<!-- LINEUP -->
<section class="section" id="lineup" aria-labelledby="lineup-title">
<div class="section__head reveal">
<h2 class="section__title" id="lineup-title">The Lineup</h2>
<p class="section__sub">Three nights, rolling sunset to sunrise. Tap a day.</p>
</div>
<div class="tabs reveal" role="tablist" aria-label="Festival days">
<button class="tab tab--on" role="tab" aria-selected="true" id="tab-fri" aria-controls="panel-fri" data-day="fri">Fri · Aug 14</button>
<button class="tab" role="tab" aria-selected="false" id="tab-sat" aria-controls="panel-sat" data-day="sat">Sat · Aug 15</button>
<button class="tab" role="tab" aria-selected="false" id="tab-sun" aria-controls="panel-sun" data-day="sun">Sun · Aug 16</button>
</div>
<div class="lineup-panels reveal">
<div class="panel panel--on" role="tabpanel" id="panel-fri" aria-labelledby="tab-fri">
<ul class="acts">
<li class="act act--head"><span class="act__name">AURELIA SKY</span><span class="act__stage">Sol Stage</span><span class="act__time">10:30 PM</span></li>
<li class="act"><span class="act__name">Dust & Echo</span><span class="act__stage">Sol Stage</span><span class="act__time">9:00 PM</span></li>
<li class="act"><span class="act__name">Saint Marlow</span><span class="act__stage">Luna Tent</span><span class="act__time">8:15 PM</span></li>
<li class="act"><span class="act__name">Paper Lanterns</span><span class="act__stage">Dune Garden</span><span class="act__time">6:45 PM</span></li>
<li class="act"><span class="act__name">Velveteen</span><span class="act__stage">Mirage Club</span><span class="act__time">5:30 PM</span></li>
</ul>
</div>
<div class="panel" role="tabpanel" id="panel-sat" aria-labelledby="tab-sat" hidden>
<ul class="acts">
<li class="act act--head"><span class="act__name">THE VELVET TIDE</span><span class="act__stage">Sol Stage</span><span class="act__time">11:00 PM</span></li>
<li class="act"><span class="act__name">Río Cobre</span><span class="act__stage">Sol Stage</span><span class="act__time">9:30 PM</span></li>
<li class="act"><span class="act__name">Glasshouse Choir</span><span class="act__stage">Luna Tent</span><span class="act__time">8:00 PM</span></li>
<li class="act"><span class="act__name">Mira Solene</span><span class="act__stage">Dune Garden</span><span class="act__time">7:00 PM</span></li>
<li class="act"><span class="act__name">Hollow Coast</span><span class="act__stage">Mirage Club</span><span class="act__time">5:45 PM</span></li>
</ul>
</div>
<div class="panel" role="tabpanel" id="panel-sun" aria-labelledby="tab-sun" hidden>
<ul class="acts">
<li class="act act--head"><span class="act__name">KOSMO NOIR</span><span class="act__stage">Sol Stage</span><span class="act__time">10:45 PM</span></li>
<li class="act"><span class="act__name">Marigold Static</span><span class="act__stage">Sol Stage</span><span class="act__time">9:15 PM</span></li>
<li class="act"><span class="act__name">North Atlas</span><span class="act__stage">Luna Tent</span><span class="act__time">8:30 PM</span></li>
<li class="act"><span class="act__name">Sundial Kids</span><span class="act__stage">Dune Garden</span><span class="act__time">6:30 PM</span></li>
<li class="act"><span class="act__name">Coral Bloom</span><span class="act__stage">Mirage Club</span><span class="act__time">5:00 PM</span></li>
</ul>
</div>
</div>
</section>
<!-- PASSES -->
<section class="section section--alt" id="passes" aria-labelledby="passes-title">
<div class="section__head reveal">
<h2 class="section__title" id="passes-title">Pick Your Pass</h2>
<p class="section__sub">Prices rise at each tier. Camping add-ons available at checkout.</p>
</div>
<div class="passes reveal">
<article class="pass">
<header class="pass__top">
<span class="pass__tier">General Admission</span>
<span class="badge badge--ok">On Sale</span>
</header>
<p class="pass__price"><span class="pass__cur">$</span>289</p>
<p class="pass__note">3-day weekend entry</p>
<ul class="pass__feat">
<li>All 5 stages, all 3 days</li>
<li>Access to food & art villages</li>
<li>Free refill water stations</li>
</ul>
<button class="btn btn--solid pass__btn" data-pass="GA · $289">Add GA Pass</button>
</article>
<article class="pass pass--feature">
<span class="pass__ribbon">Most Popular</span>
<header class="pass__top">
<span class="pass__tier">VIP Sunset</span>
<span class="badge badge--warn">Low Stock</span>
</header>
<p class="pass__price"><span class="pass__cur">$</span>649</p>
<p class="pass__note">3-day premium entry</p>
<ul class="pass__feat">
<li>Front-of-stage viewing decks</li>
<li>Shaded VIP lounge + open bar</li>
<li>Express lane & premium restrooms</li>
<li>Exclusive afterparty access</li>
</ul>
<button class="btn btn--solid pass__btn" data-pass="VIP Sunset · $649">Add VIP Pass</button>
</article>
<article class="pass">
<header class="pass__top">
<span class="pass__tier">Camping + GA</span>
<span class="badge badge--danger">Few Left</span>
</header>
<p class="pass__price"><span class="pass__cur">$</span>419</p>
<p class="pass__note">GA + on-site tent plot</p>
<ul class="pass__feat">
<li>Everything in General Admission</li>
<li>10×10 ft pitch in Dune Camp</li>
<li>Showers, lockers & quiet zone</li>
</ul>
<button class="btn btn--solid pass__btn" data-pass="Camping + GA · $419">Add Camping Pass</button>
</article>
</div>
<p class="passes__legend reveal">
<span class="dot dot--ok"></span> On sale
<span class="dot dot--warn"></span> Low stock
<span class="dot dot--danger"></span> Almost gone
</p>
</section>
<!-- EXPERIENCES -->
<section class="section" id="experiences" aria-labelledby="exp-title">
<div class="section__head reveal">
<h2 class="section__title" id="exp-title">Beyond the Music</h2>
<p class="section__sub">Festival grounds are a playground from noon to dawn.</p>
</div>
<div class="exp reveal">
<article class="exp__card exp--a">
<h3>Desert Art Walk</h3>
<p>Twelve large-scale light sculptures glowing after dusk along the canyon ridge.</p>
</article>
<article class="exp__card exp--b">
<h3>Sunrise Yoga</h3>
<p>Daily 6 AM flow on the Dune Garden deck as the sun crests the mesa.</p>
</article>
<article class="exp__card exp--c">
<h3>Taste Village</h3>
<p>30 regional food trucks, a natural-wine bar, and a late-night taco crawl.</p>
</article>
<article class="exp__card exp--d">
<h3>Silent Disco</h3>
<p>Three-channel headphone dancefloor that runs long after the main stages close.</p>
</article>
</div>
</section>
<!-- MAP -->
<section class="section section--alt" id="map" aria-labelledby="map-title">
<div class="section__head reveal">
<h2 class="section__title" id="map-title">The Grounds</h2>
<p class="section__sub">Mesa Verde Desert · Gates open 4 PM daily</p>
</div>
<div class="map reveal">
<div class="map__canvas" role="img" aria-label="Stylized festival site map">
<span class="pin pin--sol" style="left:30%;top:38%">Sol Stage</span>
<span class="pin pin--luna" style="left:66%;top:26%">Luna Tent</span>
<span class="pin pin--dune" style="left:50%;top:64%">Dune Garden</span>
<span class="pin pin--mir" style="left:22%;top:72%">Mirage Club</span>
<span class="pin pin--camp" style="left:78%;top:70%">Dune Camp</span>
</div>
<ul class="map__legend">
<li><span class="ml ml--sol"></span> Sol Stage — main</li>
<li><span class="ml ml--luna"></span> Luna Tent — electronic</li>
<li><span class="ml ml--dune"></span> Dune Garden — acoustic</li>
<li><span class="ml ml--mir"></span> Mirage Club — late night</li>
<li><span class="ml ml--camp"></span> Dune Camp — campsite</li>
</ul>
</div>
</section>
<!-- FAQ -->
<section class="section" id="faq" aria-labelledby="faq-title">
<div class="section__head reveal">
<h2 class="section__title" id="faq-title">Good to Know</h2>
<p class="section__sub">The essentials before you head to the desert.</p>
</div>
<div class="faq reveal">
<details class="faq__item">
<summary>Is there an age limit?</summary>
<p>SOLSTICE is all-ages. Under-16s enter free with a ticketed adult. The Mirage Club afterparties are 18+.</p>
</details>
<details class="faq__item">
<summary>Can I upgrade my pass later?</summary>
<p>Yes — log into your wallet anytime before Aug 1 and pay the difference to move from GA to VIP, subject to availability.</p>
</details>
<details class="faq__item">
<summary>What can I bring into the grounds?</summary>
<p>Empty refillable bottles, sunscreen, a small bag, and a printed or wallet ticket. No glass, drones, or pro cameras.</p>
</details>
<details class="faq__item">
<summary>How does camping work?</summary>
<p>Camping passes include a numbered 10×10 ft pitch. Bring your own tent, or rent a pre-pitched bell tent as a checkout add-on.</p>
</details>
<details class="faq__item">
<summary>What's the refund policy?</summary>
<p>All passes are non-refundable but fully transferable. Add ticket protection at checkout for a flexible cancellation window.</p>
</details>
</div>
</section>
<!-- FINAL CTA -->
<section class="cta" aria-labelledby="cta-title">
<div class="cta__grain" aria-hidden="true"></div>
<div class="cta__inner reveal">
<h2 class="cta__title" id="cta-title">Three days. One horizon.</h2>
<p class="cta__sub">Passes are moving fast — VIP Sunset is already low stock.</p>
<a class="btn btn--solid btn--lg" href="#passes">Get Your Pass</a>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__inner">
<div class="footer__brand">
<span class="brand__mark" aria-hidden="true">◎</span>
<span class="brand__name">SOLSTICE ’26</span>
<p>August 14–16 · Mesa Verde Desert, Arizona</p>
</div>
<nav class="footer__cols" aria-label="Footer">
<div>
<h3>Festival</h3>
<a href="#lineup">Lineup</a>
<a href="#passes">Passes</a>
<a href="#map">Map</a>
</div>
<div>
<h3>Plan</h3>
<a href="#experiences">Experiences</a>
<a href="#faq">FAQ</a>
<a href="#map">Getting there</a>
</div>
<div>
<h3>Stay in touch</h3>
<form class="footer__sub" id="subForm">
<input type="email" required placeholder="you@email.com" aria-label="Email address" />
<button class="btn btn--solid" type="submit">Join</button>
</form>
</div>
</nav>
</div>
<p class="footer__fine">© 2026 SOLSTICE Festival. A fictional event for demonstration only.</p>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Festival Landing
A full landing page for the fictional SOLSTICE ’26 desert festival. The immersive hero runs a sunset orange-to-pink-to-purple gradient under a film-grain overlay, with a funky display headline, the August 14–16 dates, a live countdown to gates, and a poster block that stacks the headliners above the rest of the bill. Sticky navigation collapses into an animated hamburger menu on small screens.
The lineup section uses keyboard-accessible day tabs — Fri, Sat, Sun — that swap a schedule of acts with their stage and set time, the headliner highlighted in a gradient row. Three pass tiers (GA, VIP Sunset, and Camping + GA) sit side by side with color-coded on-sale, low-stock, and almost-gone badges, a featured ribbon, and add-to-cart buttons that fire a toast. A stylized grounds map with labelled stage pins and a color legend, a four-card experiences grid, and an accordion FAQ complete the page before a final call-to-action and a footer with a working newsletter sign-up.
Every section fades and lifts into view on scroll via an IntersectionObserver, the countdown ticks every second, and all interactions — tabs, menu, cart, and subscribe — are plain vanilla JavaScript with no frameworks or build step. The layout reflows cleanly from desktop down to roughly 360px wide.
Illustrative UI only — fictional events, not a real ticketing service.