/* =================================================================
PULSE OF GAIA — STYLE.CSS
Source-of-truth: docs/superpowers/specs/2026-05-13-pulse-of-gaia-design.md
§1 TOKENS — palette, type, spacing, motion variables
§2 BASE — reset, html/body, scrollbar
§3 TYPOGRAPHY — font stacks, eyebrow/headline/lede classes
§4 CHROME — nav, footer, menu overlay, telemetry HUD
§5 HERO — video layers, globe, headline, meta row
§6 COMPONENTS — buttons, badges, accordion, bento, etc.
§7 MOTION — pulse/bloom/scan/reveal/magnetic/split utilities
§8 PAGE-SPECIFIC — overrides per template family
§9 UTILITIES — spacing helpers, visibility, sr-only
§10 MOBILE — @media breakpoints
================================================================= */
/* ─── §1 TOKENS ─────────────────────────────────────────────────── */
:root {
/* Palette — primary (intransigent: design doc §1.1) */
--pg-green: #4E794B;
--pg-blue: #547177;
--pg-black: #000000;
/* Palette — foreground */
--paper: #e8e6e1;
--paper-dim: #a8a499;
/* Palette — tints */
--green-12: rgba(78,121,75,.12);
--green-20: rgba(78,121,75,.20);
--green-40: rgba(78,121,75,.40);
--green-55: rgba(78,121,75,.55);
--green-60: rgba(78,121,75,.60);
--blue-12: rgba(84,113,119,.12);
--blue-20: rgba(84,113,119,.20);
--blue-40: rgba(84,113,119,.40);
--blue-55: rgba(84,113,119,.55);
--blue-60: rgba(84,113,119,.60);
--ink-04: rgba(255,255,255,.04);
--ink-08: rgba(255,255,255,.08);
--ink-12: rgba(255,255,255,.12);
--ink-16: rgba(255,255,255,.16);
--ink-24: rgba(255,255,255,.24);
/* Typography — stand-ins until Nebula + Futura are delivered */
--f-display: 'Sora', system-ui, sans-serif;
--f-body: 'Jost', system-ui, sans-serif;
--f-mono: 'JetBrains Mono', ui-monospace, monospace;
/* Spacing — 8px base */
--s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px;
--s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px; --s-9: 160px;
/* Layout */
--container-max: 1440px;
--pad-x: clamp(20px, 4vw, 48px);
/* Motion */
--motion-pulse-duration: 3.5s;
--motion-bloom-duration: 3.5s;
--motion-scan-duration: 6s;
--motion-reveal-duration: 600ms;
--motion-easing: cubic-bezier(.22, .61, .36, 1);
--motion-stagger-char: 18ms;
/* Legacy aliases — used by the artist-page block ported from original */
--bg: var(--pg-black);
--bg-2: #0a0a0a;
--bg-3: #141414;
--ink-dark: #0a0a0a;
--ink-2: var(--paper); /* legacy "dark text" → now light-on-dark */
--mute: var(--paper-dim);
--line: var(--ink-08);
--f-italic: var(--f-display);
--f-display-2: var(--f-display);
--radius: 0;
--radius-lg: 0;
--ease-out: var(--motion-easing);
--ease-power: cubic-bezier(.4, 0, .2, 1);
--t-fast: .18s;
--t-med: .32s;
/* Spacing aliases (legacy --space-N) */
--space-1: var(--s-1); --space-2: var(--s-2); --space-3: var(--s-3);
--space-4: var(--s-4); --space-5: var(--s-5); --space-6: var(--s-6);
}
/* ─── §2 BASE ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body {
background: var(--pg-black);
color: var(--paper);
font-family: var(--f-body);
font-weight: 300;
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
html { scroll-behavior: smooth; }
::selection { background: var(--green-40); color: var(--paper); }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; }
input, textarea, select { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 8px; height: 8px; background: #000; }
::-webkit-scrollbar-thumb { background: var(--ink-16); }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
/* ─── §3 TYPOGRAPHY ────────────────────────────────────────────── */
.eyebrow {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .32em;
text-transform: uppercase;
color: var(--paper-dim);
display: inline-flex;
align-items: center;
gap: 10px;
}
.eyebrow::before {
content: "";
width: 24px;
height: 1px;
background: var(--pg-green);
display: inline-block;
}
.headline {
font-family: var(--f-display);
font-weight: 200;
font-size: clamp(36px, 6vw, 84px);
line-height: .95;
letter-spacing: -.02em;
color: var(--paper);
}
.headline strong { font-weight: 800; display: block; }
.headline em { font-style: italic; font-weight: 200; color: var(--paper-dim); }
.headline-xl {
font-family: var(--f-display);
font-weight: 200;
font-size: clamp(46px, 8vw, 128px);
line-height: .95;
letter-spacing: -.02em;
color: var(--paper);
}
.headline-xl strong { font-weight: 800; display: block; }
.headline-xl em { font-style: italic; font-weight: 200; color: var(--paper-dim); }
.lede {
font-family: var(--f-body);
font-weight: 300;
font-size: 16.5px;
line-height: 1.55;
color: var(--paper-dim);
max-width: 62ch;
}
.lede em { font-style: italic; color: var(--paper); }
.label-mono {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--paper-dim);
}
.label-mono strong { color: var(--paper); font-weight: 500; }
.num-display {
font-family: var(--f-display);
font-weight: 300;
font-size: clamp(40px, 5vw, 64px);
letter-spacing: -.02em;
line-height: 1;
color: var(--paper);
}
.num-display strong { font-weight: 700; }
/* ─── §4 CHROME ────────────────────────────────────────────────── */
/* Nav */
.nav {
position: sticky; top: 0; z-index: 50;
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
gap: 18px; padding: 22px var(--pad-x) 14px;
background: linear-gradient(to bottom, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 100%);
}
.nav__logo { justify-self: start; }
.nav__links { justify-self: center; }
.nav__right { justify-self: end; display: inline-flex; align-items: center; gap: 14px; }
.nav__logo { display: inline-flex; align-items: center; gap: 14px; }
.nav__logo img { height: 24px; width: auto; filter: drop-shadow(0 0 12px rgba(0,0,0,.7)); }
.nav__logo .at {
font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
color: var(--paper-dim); padding-left: 14px; border-left: 1px solid var(--ink-16);
}
.nav__logo .at strong { color: var(--paper); font-weight: 500; }
.nav__links { display: flex; gap: 26px; align-items: center; }
.nav__links a {
font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
color: var(--paper-dim); transition: color .2s;
}
.nav__links a:hover { color: var(--paper); }
.nav__cta {
padding: 9px 14px; border: 1px solid var(--ink-16); color: var(--paper);
font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
background: rgba(0,0,0,.3); backdrop-filter: blur(6px);
transition: border-color .2s, background .2s, color .2s;
}
.nav__cta:hover { border-color: var(--paper); background: var(--paper); color: #000; }
.nav__menu {
display: none; width: 40px; height: 40px;
flex-direction: column; align-items: center; justify-content: center; gap: 6px;
border: 1px solid var(--ink-16); background: transparent; cursor: pointer; padding: 0;
}
.nav__menu span { display: block; width: 18px; height: 1px; background: var(--paper); transition: transform .25s var(--motion-easing), opacity .25s; }
.nav__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__menu[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.nav__menu:hover { border-color: var(--paper); }
/* Footer */
.footer { padding: var(--s-7) var(--pad-x) var(--s-4); border-top: 1px solid var(--ink-08); }
.footer__marquee {
overflow: hidden; padding: var(--s-3) 0; border-bottom: 1px solid var(--ink-08);
font-family: var(--f-display); font-weight: 200; font-size: clamp(36px, 6vw, 92px);
letter-spacing: -.02em; color: var(--paper-dim);
mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.footer__grid {
display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: var(--s-5);
padding: var(--s-6) 0 var(--s-5);
}
.footer__col p { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-dim); margin-bottom: var(--s-2); }
.footer__col ul { list-style: none; }
.footer__col ul li { margin-bottom: 8px; }
.footer__col ul a { color: var(--paper-dim); transition: color .2s; }
.footer__col ul a:hover { color: var(--paper); }
.footer__brand p { font-family: var(--f-body); color: var(--paper-dim); margin-top: var(--s-2); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--ink-08); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-dim); }
.footer__bottom ul { list-style: none; display: flex; gap: var(--s-3); }
.footer__bottom a:hover { color: var(--paper); }
.footer__marquee-track { display: flex; gap: var(--s-3); animation: pg-ticker 40s linear infinite; white-space: nowrap; }
/* Menu overlay */
.menu {
position: fixed; inset: 0; z-index: 60; background: var(--pg-black);
transform: translateY(-100%); transition: transform .5s var(--motion-easing);
display: flex; align-items: center; padding: var(--s-6) var(--pad-x);
overflow-y: auto; visibility: hidden;
}
.menu.is-open { transform: translateY(0); visibility: visible; }
.menu__inner { width: 100%; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-6); }
.menu__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--ink-08); }
.menu__meta > div p:first-child { margin-bottom: var(--s-1); }
.menu__meta > div p:last-child { font-family: var(--f-body); font-size: 13px; line-height: 1.6; color: var(--paper-dim); }
.menu__meta > div p:last-child a { color: var(--paper); }
.menu__meta > div p:last-child a:hover { color: var(--pg-green); }
.menu__close {
position: absolute; top: var(--s-3); right: var(--pad-x); z-index: 1;
width: 40px; height: 40px; display: inline-grid; place-items: center;
border: 1px solid var(--ink-16); background: rgba(0,0,0,.3); color: var(--paper);
font-family: var(--f-mono); font-size: 22px; line-height: 1; cursor: pointer;
transition: border-color .2s var(--motion-easing), color .2s var(--motion-easing), transform .2s var(--motion-easing);
}
.menu__close:hover { border-color: var(--paper); color: var(--pg-green); transform: rotate(90deg); }
.menu__list { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.menu__list > li { display: flex; flex-direction: column; gap: var(--s-2); }
.menu__list a {
font-family: var(--f-display); font-weight: 200; font-size: clamp(36px, 7vw, 84px);
letter-spacing: -.02em; color: var(--paper); display: inline-flex; align-items: baseline; gap: var(--s-2);
}
.menu__list a span { font-family: var(--f-mono); font-size: 13px; color: var(--paper-dim); letter-spacing: .22em; }
.menu__sublinks { display: flex; gap: var(--s-2); padding-top: var(--s-2); padding-left: 60px; }
.menu__sublinks a { font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-dim); }
.menu__sublinks a:hover { color: var(--paper); }
/* Telemetry HUD */
.hud {
display: inline-flex; gap: 14px; align-items: center;
font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
color: var(--paper-dim); background: rgba(0,0,0,.4); padding: 9px 14px; border: 1px solid var(--ink-08);
}
.hud__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pg-green); box-shadow: 0 0 10px var(--pg-green); animation: pg-breath 1.4s ease-in-out infinite; }
.hud .v { color: var(--paper); }
/* ─── §5 HERO ──────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 0; overflow: hidden; isolation: isolate; }
/* VIDEO BACKGROUND + COLOR-GRADING LAYERS */
.hero__video-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; }
/* Audio-reactive WebGL shader sits behind the video */
.hero__shader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
.hero__video-bg video {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1) brightness(.55) contrast(1.15);
transform: scale(1.03);
z-index: 1;
opacity: .45;
mix-blend-mode: lighten;
}
/* Layer 1 — global mute */
.hero__layer-mute { position: absolute; inset: 0; background: rgba(0,0,0,.45); z-index: 1; }
/* Layer 2 — green highlight al centro (screen) */
.hero__layer-tint-green { position: absolute; inset: 0; z-index: 2; mix-blend-mode: screen;
background: radial-gradient(ellipse at 50% 55%, rgba(78,121,75,.55) 0%, rgba(78,121,75,0) 55%); }
/* Layer 3 — blue accent alto-dx (screen) */
.hero__layer-tint-blue { position: absolute; inset: 0; z-index: 3; mix-blend-mode: screen;
background: radial-gradient(ellipse at 78% 22%, rgba(84,113,119,.45) 0%, rgba(84,113,119,0) 50%); }
/* Layer 4 — vignette */
.hero__layer-vignette { position: absolute; inset: 0; z-index: 4; background:
radial-gradient(ellipse at 50% 55%, transparent 18%, rgba(0,0,0,.55) 65%, #000 100%); }
/* Layer 5 — orbital grid */
.hero__layer-grid { position: absolute; inset: 0; z-index: 5; pointer-events: none;
background:
repeating-linear-gradient(0deg, transparent 0 32px, rgba(84,113,119,.10) 32px 33px),
repeating-linear-gradient(90deg, transparent 0 32px, rgba(84,113,119,.10) 32px 33px);
mask-image: radial-gradient(ellipse at 50% 55%, #000 0%, transparent 80%); }
/* Layer 6 — scan line */
.hero__layer-scan { position: absolute; left: 0; right: 0; height: 1px; z-index: 6; background: linear-gradient(90deg, transparent, rgba(84,113,119,.6) 50%, transparent); top: 50%; animation: pg-scan 6s ease-in-out infinite alternate; opacity: .6; }
/* Layer 7 — grain */
.hero__layer-grain { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: .06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); }
/* Telemetry (hero variant) */
.hero__telemetry { position: absolute; top: 64px; left: 28px; right: 28px; z-index: 10; display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-dim); pointer-events: none; }
.hero__telemetry [data-weather] { pointer-events: auto; }
.hero__telemetry .lhs, .hero__telemetry .rhs { display: flex; gap: 18px; align-items: center; background: rgba(0,0,0,.35); backdrop-filter: blur(4px); padding: 8px 12px; border: 1px solid var(--ink-08); }
.hero__telemetry .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pg-green); box-shadow: 0 0 10px var(--pg-green); animation: pg-breath 1.4s ease-in-out infinite; }
.hero__telemetry .v { color: var(--paper); }
.hero__telemetry .countdown { align-items: baseline; }
.hero__telemetry .countdown b { font-weight: 500; color: var(--paper); letter-spacing: .06em; }
/* CENTRE STAGE (globe + headline) */
.hero__stage { position: relative; z-index: 8; flex: 1; display: grid; grid-template-columns: 1fr; align-items: center; justify-items: center; padding: 18px 28px 28px; text-align: center; }
.hero__globe-wrap { position: relative; width: min(480px,68vw); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; }
.hero__ring { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; animation: pg-rot 60s linear infinite; }
.hero__ring.r2 { animation-duration: 90s; animation-direction: reverse; opacity: .45; }
.hero__ring.r3 { animation-duration: 120s; opacity: .3; }
.hero__ring svg { width: 100%; height: 100%; }
.hero__globe { position: relative; width: 60%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; animation: pg-pulse 4s ease-in-out infinite; }
.hero__globe svg { width: 100%; height: 100%; filter: drop-shadow(0 0 18px rgba(0,0,0,.7)); }
.hero__globe::after { content: ""; position: absolute; inset: -25%; border-radius: 50%; background: radial-gradient(circle, rgba(78,121,75,.22) 0%, transparent 55%); z-index: -1; animation: pg-bloom 4s ease-in-out infinite; }
/* BOTTOM META ROW */
.hero__meta-row { position: relative; z-index: 10; display: grid; grid-template-columns: repeat(4,1fr); gap: 0; padding: 24px 28px 28px; border-top: 1px solid var(--ink-08); background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 100%); backdrop-filter: blur(6px); }
.hero__meta { padding: 0 18px; border-left: 1px solid var(--ink-08); }
.hero__meta:first-child { border-left: none; padding-left: 0; }
.hero__meta .lbl { font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-dim); margin-bottom: 8px; }
.hero__meta .val { font-family: var(--f-display); font-weight: 300; font-size: 17px; letter-spacing: -.005em; line-height: 1.3; color: var(--paper); }
.hero__meta .val strong { font-weight: 600; }
.hero__meta.cta { border-left-color: var(--ink-16); padding-left: 24px; display: flex; align-items: center; justify-content: flex-end; }
/* RIGHT RAIL — act markers */
.hero__acts { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; gap: 14px; font-family: var(--f-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-dim); }
.hero__acts .a { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.25); backdrop-filter: blur(4px); padding: 4px 8px; }
.hero__acts .a span { width: 18px; height: 1px; background: var(--ink-16); }
.hero__acts .a.cur { color: var(--paper); }
.hero__acts .a.cur span { background: var(--pg-green); width: 32px; height: 2px; }
/* SCROLL CUE */
.hero__scroll-cue { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--paper); }
.hero__scroll-cue .ln { width: 1px; height: 30px; background: linear-gradient(to bottom, var(--paper), transparent); animation: pg-bob 2s ease-in-out infinite; }
/* ─── §6 COMPONENTS ────────────────────────────────────────────── */
/* §6.1 Buttons */
.btn-gate {
display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px;
background: var(--paper); color: #000;
font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
transition: transform .2s;
}
.btn-gate:hover { transform: translateY(-1px); }
.btn-gate svg { width: 14px; height: 14px; }
.btn-ghost {
display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px;
background: transparent; color: var(--paper); border: 1px solid var(--ink-24);
font-family: var(--f-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
transition: border-color .2s, background .2s;
}
.btn-ghost:hover { border-color: var(--paper); background: var(--ink-04); }
.btn-pill {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
border: 1px solid var(--ink-16); color: var(--paper-dim); background: transparent;
}
.btn-pill:hover, .btn-pill.is-active { border-color: var(--paper); color: var(--paper); }
/* §6.2 Pulsation badges */
.pb {
display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px;
border: 1px solid currentColor; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; line-height: 1;
}
.pb svg { width: 18px; height: 18px; display: block; }
.pb.rhythm { color: #7fa07b; border-color: rgba(127,160,123,.5); background: rgba(78,121,75,.08); }
.pb.digital { color: #86a3a8; border-color: rgba(134,163,168,.5); background: rgba(84,113,119,.08); }
.pb.gaia { color: #a8c1a4; border-color: rgba(168,193,164,.45); background: linear-gradient(90deg, rgba(78,121,75,.07), rgba(84,113,119,.07)); }
/* §6.3 Section head */
.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 760px; padding: 0 var(--pad-x); }
.section-head .num { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-dim); display: flex; align-items: center; gap: 10px; }
.section-head .num::before { content: ""; width: 24px; height: 1px; background: var(--pg-green); display: inline-block; }
.section-head .headline { margin-top: var(--s-1); }
.section-head .lede { margin-top: var(--s-2); }
/* §6.4 Stats counter */
.stats { padding: var(--s-7) var(--pad-x); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); border-top: 1px solid var(--ink-08); border-bottom: 1px solid var(--ink-08); }
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat .num { font-family: var(--f-display); font-weight: 300; font-size: clamp(44px, 5vw, 64px); letter-spacing: -.02em; line-height: 1; color: var(--paper); }
.stat .num strong { font-weight: 700; }
.stat .lbl { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-dim); line-height: 1.4; }
/* §6.5 Gate accordion */
.gates { padding: var(--s-6) var(--pad-x); }
.gate-row {
display: grid; grid-template-columns: 50px 100px 1fr 1.4fr 32px; gap: var(--s-3); align-items: center;
padding: var(--s-3) 0; border-top: 1px solid var(--ink-12); width: 100%; text-align: left;
}
.gate-row:last-of-type { border-bottom: 1px solid var(--ink-12); }
.gate-row .roman { font-family: var(--f-display); font-weight: 300; font-size: 22px; color: var(--paper-dim); }
.gate-row .date { font-family: var(--f-display); font-weight: 200; line-height: 1; color: var(--paper); }
.gate-row .date .num { font-size: 44px; font-weight: 700; letter-spacing: -.03em; display: block; }
.gate-row .date .mo { font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-dim); display: block; margin-top: 2px; }
.gate-row .name { font-family: var(--f-display); font-weight: 300; font-size: clamp(17px, 1.7vw, 22px); letter-spacing: -.005em; }
.gate-row .name .tag { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-dim); }
.gate-row .lineup { font-family: var(--f-body); font-weight: 400; font-size: 14px; color: var(--paper-dim); line-height: 1.5; }
.gate-row .lineup strong { color: var(--paper); font-weight: 500; }
.gate-row .icn { justify-self: end; width: 32px; height: 32px; border: 1px solid var(--ink-16); display: flex; align-items: center; justify-content: center; color: var(--paper-dim); transition: border-color .2s, color .2s; }
.gate-row:hover .icn { border-color: var(--paper); color: var(--paper); }
.gate-row[aria-expanded="true"] .icn { background: var(--paper); color: #000; }
.gate-panel { display: none; padding: var(--s-3) 0 var(--s-4); border-top: 1px solid var(--ink-08); }
.gate-row[aria-expanded="true"] + .gate-panel { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-3); }
@media (max-width: 720px) {
.gate-row { grid-template-columns: 80px 1fr 28px; gap: var(--s-2); }
.gate-row .roman { display: none; }
.gate-row .lineup { display: none; }
.gate-row .date .num { font-size: 32px; }
.gate-row[aria-expanded="true"] + .gate-panel { grid-template-columns: 1fr; }
}
.gate-panel .col p:first-child { font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-dim); margin-bottom: 6px; }
.gate-panel .col p { font-family: var(--f-body); font-size: 14px; line-height: 1.5; color: var(--paper); }
/* §6.6 Bento card */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-2); padding: 0 var(--pad-x); }
.bento-card { position: relative; grid-column: span 3; aspect-ratio: 1/1; overflow: hidden; border: 1px solid var(--ink-08); background: #0a0a0a; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .3s var(--motion-easing); }
.bento-card:hover { transform: translateY(-2px); }
.bento-card.is-xl { grid-column: span 6; grid-row: span 2; }
.bento-card.is-lg { grid-column: span 4; }
.bento-card .poster { position: absolute; inset: 0; filter: grayscale(1) contrast(1.1); }
.bento-card .poster img { width: 100%; height: 100%; object-fit: cover; }
.bento-card .poster::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.92) 100%);
}
.bento-card[data-pulse="rhythm"] .poster::after { background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.85) 100%), radial-gradient(circle at 30% 30%, rgba(78,121,75,.35) 0%, transparent 60%); }
.bento-card[data-pulse="digital"] .poster::after { background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.85) 100%), radial-gradient(circle at 70% 70%, rgba(84,113,119,.35) 0%, transparent 60%); }
.bento-card[data-pulse="gaia"] .poster::after { background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.85) 100%), radial-gradient(circle at 30% 30%, rgba(78,121,75,.22) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(84,113,119,.22) 0%, transparent 50%); }
.bento-card .meta { position: relative; padding: var(--s-2); z-index: 2; }
.bento-card .meta .eb { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-dim); margin-bottom: 6px; display: flex; justify-content: space-between; }
.bento-card .meta h3 { font-family: var(--f-display); font-weight: 300; font-size: clamp(18px, 1.8vw, 26px); letter-spacing: -.005em; color: var(--paper); }
.bento-card:hover .poster, .bento-card:focus-visible .poster { filter: none; }
.bento-card .poster { transition: filter .35s var(--motion-easing); }
/* §6.6b — Partner card (used in index Movement 10 + partners.html grid) */
.partner {
display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
gap: var(--s-2); padding: var(--s-3);
border: 1px solid var(--ink-08); background: rgba(255,255,255,.015);
text-decoration: none; color: var(--paper);
min-height: 140px;
transition: border-color .25s var(--motion-easing), background .25s var(--motion-easing), transform .25s var(--motion-easing);
}
.partner:hover { border-color: var(--paper); background: var(--ink-04); transform: translateY(-2px); }
.partner img { height: 28px; width: auto; max-width: 70%; opacity: .85; filter: brightness(0) invert(1); display: block; }
.partner span {
display: block;
font-family: var(--f-display); font-weight: 500; font-size: clamp(16px, 1.4vw, 20px);
letter-spacing: -.005em; color: var(--paper);
}
.partner em {
display: block; font-style: normal;
font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em;
text-transform: uppercase; color: var(--paper-dim); margin-top: 4px;
}
/* §6.10 — Lineup sticky filter bar (used by lineup.html + gallery.html) */
.lineup-filters {
position: sticky; top: 0; z-index: 5;
display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4);
padding: var(--s-2) var(--pad-x);
background: rgba(0,0,0,.85); backdrop-filter: blur(8px);
border-top: 1px solid var(--ink-08); border-bottom: 1px solid var(--ink-08);
overflow-x: auto;
}
.lineup-filters__group {
display: inline-flex; align-items: center; gap: 6px;
flex-wrap: nowrap; white-space: nowrap;
}
.lineup-filters__group::before {
content: attr(data-label);
font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em;
text-transform: uppercase; color: var(--paper-dim);
margin-right: 6px;
}
.bento-card[hidden] { display: none !important; }
.page-head { padding: var(--s-7) var(--pad-x) var(--s-4); }
.page-head .lede { margin-top: var(--s-2); }
/* §6.11 — Countdown widget (gates open · gallery placeholder · etc.) */
.countdown { display: inline-flex; gap: var(--s-3); align-items: flex-end; font-family: var(--f-display); color: var(--paper); margin-top: var(--s-3); flex-wrap: wrap; max-width: 100%; }
.countdown__num { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 80px; }
.countdown__num strong { font-weight: 700; font-size: clamp(40px, 6vw, 84px); letter-spacing: -.03em; line-height: 1; }
.countdown__num em { font-style: normal; font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-dim); }
.countdown__sep { font-family: var(--f-display); font-weight: 200; font-size: clamp(28px, 4vw, 48px); color: var(--paper-dim); padding-bottom: 18px; }
@media (max-width: 540px) {
.countdown { gap: var(--s-2); }
.countdown__num { min-width: 60px; }
.countdown__num strong { font-size: 32px; }
.countdown__sep { font-size: 20px; padding-bottom: 8px; }
}
/* §6.7 Wave-form ticker */
.ticker { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--ink-08); border-bottom: 1px solid var(--ink-08); font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-dim); overflow: hidden; mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%); }
.ticker__track { display: inline-flex; gap: var(--s-3); animation: pg-ticker 60s linear infinite; }
.ticker__item { flex-shrink: 0; white-space: nowrap; }
.ticker__sep { color: var(--ink-24); }
.ticker__wave { flex-shrink: 0; width: 28px; height: 14px; color: var(--pg-green); }
@keyframes pg-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* §6.8 Newsletter form */
.newsletter { padding: var(--s-7) var(--pad-x); border-top: 1px solid var(--ink-08); }
.newsletter__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: center; }
.newsletter__title { font-family: var(--f-display); font-weight: 200; font-size: clamp(28px, 3vw, 44px); letter-spacing: -.02em; line-height: 1.1; color: var(--paper); }
.newsletter__form { display: flex; gap: 0; }
.newsletter__form input { flex: 1; background: transparent; border: 1px solid var(--ink-16); border-right: none; color: var(--paper); padding: 13px 16px; outline: none; font-family: var(--f-body); font-size: 14px; }
.newsletter__form input::placeholder { color: var(--paper-dim); }
.newsletter__form input:focus { border-color: var(--paper); }
.newsletter__form button { padding: 13px 18px; background: var(--paper); color: #000; border: 1px solid var(--paper); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; font-weight: 500; }
.newsletter__note { font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-dim); margin-top: var(--s-1); }
/* §6.9 Cursor + Preloader */
.cursor { position: fixed; inset: 0; pointer-events: none; z-index: 9999; mix-blend-mode: difference; }
.cursor__dot { position: absolute; top: -3px; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--paper); animation: pg-breath 2.2s ease-in-out infinite; }
.cursor__ring { position: absolute; top: -14px; left: -14px; width: 28px; height: 28px; border: 1px solid var(--paper); border-radius: 50%; opacity: .6; animation: pg-ring 2.2s ease-in-out infinite; }
/* Hide the custom cursor on touch / coarse-pointer devices — there's no
pointer to follow, so the cursor would stall at last position. */
@media (hover: none), (pointer: coarse) { .cursor { display: none !important; } }
/* opacity-only — animating transform here would fight the JS-driven translate */
@keyframes pg-ring { 0%, 100% { opacity: .6; } 50% { opacity: .25; } }
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button { cursor: none; }
.preloader { position: fixed; inset: 0; z-index: 9998; background: var(--pg-black); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); transition: opacity .32s var(--motion-easing); }
.preloader.is-done { opacity: 0; pointer-events: none; }
.preloader__glyph { width: 64px; height: 64px; animation: pg-pulse var(--motion-pulse-duration) ease-in-out infinite; color: var(--pg-green); }
.preloader__glyph svg { width: 100%; height: 100%; }
.preloader__label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--paper-dim); }
.preloader__bar { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--ink-08); }
.preloader__bar > span { display: block; height: 100%; background: var(--pg-green); transform: scaleX(0); transform-origin: 0 50%; transition: transform .15s linear; }
/* ─── §7 MOTION ────────────────────────────────────────────────── */
/* Keyframes (all prefixed pg- to avoid collision) */
@keyframes pg-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes pg-bloom { 0%, 100% { opacity: .4; transform: scale(1); } 50% { opacity: .85; transform: scale(1.1); } }
@keyframes pg-scan { from { top: 22%; } to { top: 78%; } }
@keyframes pg-breath { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes pg-bob { 0%, 100% { transform: scaleY(.6); opacity: .3; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes pg-rot { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* Reveal utility */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--motion-reveal-duration) var(--motion-easing), transform var(--motion-reveal-duration) var(--motion-easing); }
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
/* Pulse / Bloom helpers (can be added as classes) */
.is-pulsing { animation: pg-pulse var(--motion-pulse-duration) ease-in-out infinite; }
.is-blooming::after { content: ""; position: absolute; inset: -20%; border-radius: 50%; background: radial-gradient(circle, var(--green-40) 0%, transparent 60%); z-index: -1; animation: pg-bloom var(--motion-bloom-duration) ease-in-out infinite; }
/* Reduce-motion overrides */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.hero__layer-scan, .hero__ring, .preloader__glyph, .hud__dot, .cursor__ring, .cursor__dot { animation: none !important; }
video { display: none !important; }
[data-reveal] { opacity: 1; transform: none; }
}
/* ─── §8 PAGE-SPECIFIC ─────────────────────────────────────────── */
/* (Phase 3, added per-page as needed) */
/* tickets.html — tier grid base rule */
.tier-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); }
/* partners.html — maker grid */
.partners-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); max-width: 1400px; margin: 0 auto; padding: var(--s-5) var(--pad-x); }
.partner-card:hover { border-color: var(--paper) !important; transform: translateY(-2px); }
/* gallery.html — masonry column-count layout */
.gallery-grid { column-count: 4; column-gap: var(--s-2); }
/* news.html — Signals index grid */
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-3); padding:var(--s-5) var(--pad-x); max-width:1400px; margin:0 auto; }
.news-card:hover { border-color:var(--paper); transform:translateY(-2px); }
.news-card:hover .btn-ghost { border-color:var(--paper); background:var(--ink-04); }
/* §8a — Weather popover (click on hero temperature -> 7-day forecast) */
.weather-pop {
position: fixed; z-index: 70; width: 360px; max-width: calc(100vw - 24px);
background: rgba(0,0,0,.92); backdrop-filter: blur(12px);
border: 1px solid var(--ink-16); padding: var(--s-3);
opacity: 0; transform: translateY(-6px); pointer-events: none;
transition: opacity .25s var(--motion-easing), transform .25s var(--motion-easing);
}
.weather-pop.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.weather-pop__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.weather-pop__close { background: transparent; border: 1px solid var(--ink-16); color: var(--paper); width: 24px; height: 24px; font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.weather-pop__close:hover { border-color: var(--paper); }
.weather-pop__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.weather-pop__now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 8px 0 10px; margin-bottom: 6px; border-bottom: 1px solid var(--ink-08); font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; color: var(--paper); }
.weather-pop__now strong { color: var(--paper); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: 10.5px; }
.weather-pop__now em { font-style: normal; color: var(--paper-dim); margin-left: 4px; }
.weather-pop__dot { color: var(--paper-dim); opacity: .7; margin: 0 2px; }
.weather-day { display: grid; grid-template-columns: 58px 22px auto 1fr; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ink-08); font-family: var(--f-mono); font-size: 11px; color: var(--paper-dim); }
.weather-day:last-child { border-bottom: none; }
.weather-day.is-today { color: var(--paper); }
.weather-day__when strong { display: block; font-weight: 500; color: var(--paper); font-family: var(--f-mono); letter-spacing: .12em; text-transform: uppercase; font-size: 10.5px; }
.weather-day__when em { font-style: normal; color: var(--paper-dim); font-size: 9.5px; letter-spacing: .12em; }
.weather-day__icon { text-align: center; font-size: 16px; }
.weather-day__temps { white-space: nowrap; }
.weather-day__temps strong { color: var(--paper); font-weight: 500; }
.weather-day__temps em { font-style: normal; color: var(--paper-dim); margin-left: 4px; }
.weather-day__meta { display: flex; gap: 4px; justify-content: flex-end; align-items: center; flex-wrap: nowrap; font-size: 10px; letter-spacing: .03em; color: var(--paper-dim); }
.weather-day__rain { color: var(--pg-blue); }
.weather-day__uv { color: var(--pg-green); }
.weather-day__wind { color: var(--paper-dim); }
.weather-day__dot { color: var(--paper-dim); opacity: .5; }
.weather-pop__src { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-dim); margin-top: var(--s-2); }
.weather-pop__src a { color: var(--paper); }
/* §8b — Scroll-cue: move above meta-row so it doesn't overlap dates row */
.hero__scroll-cue { bottom: calc(var(--s-7) + 72px) !important; }
@media (max-width:780px) { .hero__scroll-cue { display: none; } }
/* §8d — Act-markers rail: sticky scroll-spy along right edge */
.hero__acts--fixed {
position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
z-index: 40; display: flex; flex-direction: column; gap: 10px;
pointer-events: auto; padding: 8px;
background: rgba(0,0,0,.45); backdrop-filter: blur(8px);
border: 1px solid var(--ink-08);
}
.hero__acts--fixed .a {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .22em;
text-transform: uppercase; color: var(--paper-dim);
padding: 4px 8px; text-decoration: none;
transition: color .25s var(--motion-easing), background .25s var(--motion-easing);
white-space: nowrap;
}
.hero__acts--fixed .a span {
display: inline-block; width: 18px; height: 1px; background: var(--ink-24);
transition: width .25s var(--motion-easing), background .25s var(--motion-easing);
}
.hero__acts--fixed .a:hover { color: var(--paper); background: var(--ink-04); }
.hero__acts--fixed .a:hover span { background: var(--paper); }
.hero__acts--fixed .a.is-current { color: var(--paper); }
.hero__acts--fixed .a.is-current span { width: 28px; background: var(--pg-green); }
@media (max-width: 980px) { .hero__acts--fixed { display: none; } }
/* §8c — Native form fields restyled for the dark theme
(access.html / volunteer.html / press.html / hotel-widget / travel-calc) */
select, input, textarea {
color-scheme: dark;
}
select option {
background: #0a0a0a;
color: var(--paper);
}
/* Native form fields on dark surfaces — only when no inline style covers them */
input[type="text"]:not([style*="background"]),
input[type="email"]:not([style*="background"]),
input[type="tel"]:not([style*="background"]),
input[type="date"]:not([style*="background"]),
input[type="number"]:not([style*="background"]),
textarea:not([style*="background"]),
select:not([style*="background"]) {
background: transparent;
border: 1px solid var(--ink-16);
color: var(--paper);
padding: 12px 14px;
font: inherit;
font-family: var(--f-body);
width: 100%;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--paper); }
input::placeholder, textarea::placeholder { color: var(--paper-dim); }
form label { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-dim); display: block; margin-bottom: 6px; }
/* ─── §9 UTILITIES ─────────────────────────────────────────────── */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.no-select { user-select: none; }
.italic { font-style: italic; }
.dim { color: var(--paper-dim); }
.center { text-align: center; }
/* ─── §10 MOBILE ───────────────────────────────────────────────── */
@media (max-width: 980px) {
.footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.bento-card { grid-column: span 6; }
.bento-card.is-xl { grid-column: span 12; grid-row: span 1; }
.bento-card.is-lg { grid-column: span 12; }
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.stat .num { font-size: 36px; }
.stat { min-width: 0; overflow: hidden; }
.tier-grid { grid-template-columns: repeat(2, 1fr); }
.partners-grid { grid-template-columns: repeat(2, 1fr); }
.gallery-grid { column-count: 3; }
.news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
/* Mobile nav: 2-col grid (logo left, search+burger right). Without this
override the desktop 1fr-auto-1fr grid auto-places nav__right into
the (now empty) middle column when nav__links is display:none,
leaving the buttons floating in the center instead of flush right. */
.nav { grid-template-columns: 1fr auto !important; }
.nav__links { display: none; }
.nav__menu { display: inline-flex; }
.nav__cta { display: none; }
.nav__logo .at { display: none; }
/* Logo wordmark: switch to width-based scaling on mobile so the
global `max-width:100%` rule can't squish the 9:1 wordmark by
constraining width while CSS forces height:24px. */
.nav__logo img { width: 120px; height: auto; max-width: 120px; }
/* Nav right: search + burger inline (horizontal), equal-size 38x38 boxes. */
.nav__right { flex-direction: row !important; gap: 8px !important; align-items: center !important; }
.nav__search { width: 38px !important; height: 38px !important; font-size: 14px !important; }
.nav__menu { width: 38px !important; height: 38px !important; }
.hero__telemetry { display: none; }
.hero__acts { display: none; }
/* Hero video on mobile: shader+video stack feels muddy under heavy filters,
bump the video opacity so the actual footage reads clearly. */
[data-hero-video] { opacity: .8 !important; }
.hero__meta-row { grid-template-columns: 1fr 1fr; gap: var(--s-2); padding: var(--s-3) var(--pad-x); }
.hero__meta.cta { grid-column: 1 / -1; justify-content: flex-start; border-left: none; padding-left: 0; }
/* Footer: 2 columns on mobile so it stays compact instead of one tall stack */
.footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); }
.footer__brand { grid-column: 1 / -1; }
.footer__bottom { flex-direction: column; align-items: flex-start; }
.footer__bottom ul { flex-wrap: wrap; gap: var(--s-2); }
/* Menu overlay: align to top so the long list scrolls from item 1 instead
of being vertically centered and clipped. Pad-top leaves room for the
close × in the corner. */
.menu { align-items: flex-start; padding-top: calc(var(--s-3) + 56px); padding-bottom: var(--s-6); }
/* Menu meta (venue/connect/support) stacks vertically on mobile with a
visible separator + breathing room from the main list */
.menu__inner { gap: var(--s-5); }
.menu__meta { grid-template-columns: 1fr; gap: var(--s-3); padding-top: var(--s-4); margin-top: var(--s-3); }
.menu__sublinks {
padding-left: 40px;
/* Stack pillar sublinks vertically with breathing room from main item */
flex-direction: column;
flex-wrap: nowrap;
gap: var(--s-1);
padding-top: var(--s-2);
}
.menu__list { gap: var(--s-3); }
.menu__list a { font-size: clamp(28px, 8vw, 56px); }
/* Sublinks must override the .menu__list a font-size cascade above — same
specificity but the mobile rule was winning by source order, blowing
the 12px sublinks up to 30px and wrapping "Rhythm ↗" onto 2 lines. */
.menu__sublinks a { font-size: 13px; }
/* Newsletter: stack title + form on mobile, stack input+button so the
input gets the full row width instead of being squished inline. */
.newsletter__inner { grid-template-columns: 1fr; gap: var(--s-3); }
.newsletter__form { flex-direction: column; gap: var(--s-2); }
.newsletter__form input { border-right: 1px solid var(--ink-16); width: 100%; }
.newsletter__form button { width: 100%; padding: 14px; }
.tier-grid { grid-template-columns: 1fr; }
.partners-grid { grid-template-columns: 1fr; }
.gallery-grid { column-count: 2; }
.news-grid { grid-template-columns: 1fr; }
/* Inline 3-/4-/5-col grids in HTML collapse to single column on small screens */
[style*="repeat(3,1fr)"],
[style*="repeat(3, 1fr)"],
[style*="repeat(4,1fr)"],
[style*="repeat(4, 1fr)"],
[style*="repeat(5,1fr)"],
[style*="repeat(5, 1fr)"] {
grid-template-columns: 1fr !important;
}
[style*="repeat(2,1fr)"],
[style*="repeat(2, 1fr)"] {
grid-template-columns: 1fr !important;
}
/* Sidebar grids (news articles, info pages) collapse to single col */
[style*="grid-template-columns:1fr 300px"],
[style*="grid-template-columns: 1fr 300px"],
[style*="grid-template-columns:1fr 320px"],
[style*="grid-template-columns: 1fr 320px"],
[style*="grid-template-columns:300px 1fr"],
[style*="grid-template-columns: 300px 1fr"] {
grid-template-columns: 1fr !important;
}
}
@media (min-width: 781px) and (max-width: 980px) {
/* Tablet: 3-/4-/5-col grids collapse to 2 columns */
[style*="repeat(3,1fr)"],
[style*="repeat(3, 1fr)"],
[style*="repeat(4,1fr)"],
[style*="repeat(4, 1fr)"],
[style*="repeat(5,1fr)"],
[style*="repeat(5, 1fr)"] {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 480px) {
.gallery-grid { column-count: 1; }
}
/* =================================================================
§12 ARTIST PAGE — full layout for the dynamic artist.html template.
Original rules from style.css.bak (lines 1894-2257) with hex
and var() mappings retargeted to the Pulse palette.
================================================================= */
.artist-page {
--tone-1: var(--pg-green);
--tone-2: var(--pg-blue);
}
.artist-page[data-tone="heat"] { --tone-1: #4E794B; --tone-2: #547177; }
.artist-page[data-tone="lime"] { --tone-1: #4E794B; --tone-2: #547177; }
.artist-page[data-tone="sky"] { --tone-1: #547177; --tone-2: #547177; }
.artist-page[data-tone="ink"] { --tone-1: #0a0a0a; --tone-2: #4E794B; }
.artist-page[data-tone="pink"] { --tone-1: #547177; --tone-2: #4E794B; }
.artist-hero {
position: relative;
isolation: isolate;
min-height: 100svh;
padding: clamp(7rem, 14vh, 11rem) var(--pad-x) clamp(3rem, 8vh, 6rem);
display: flex;
align-items: flex-end;
overflow: hidden;
border-bottom: 1px solid var(--ink-08);
}
.artist-hero__bg {
position: absolute; inset: 0;
z-index: -2;
background:
radial-gradient(circle at 30% 20%, var(--tone-1) 0%, transparent 60%),
radial-gradient(circle at 80% 80%, var(--tone-2) 0%, transparent 55%),
linear-gradient(135deg, var(--bg-2), var(--bg-3));
filter: saturate(1.2);
background-size: cover, cover, cover;
background-position: center;
background-repeat: no-repeat;
}
.artist-hero__bg.has-photo {
background-blend-mode: luminosity;
filter: saturate(1.25) brightness(.9);
}
.artist-hero__gradient {
position: absolute; inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(11,11,12,.35) 0%, transparent 30%, rgba(11,11,12,.65) 100%),
linear-gradient(90deg, rgba(11,11,12,.55) 0%, transparent 50%);
}
.artist-hero__inner {
max-width: 1400px;
width: 100%;
}
.artist-hero__name {
font-family: var(--f-display);
font-size: clamp(4rem, 16vw, 18rem);
line-height: .82;
letter-spacing: -.04em;
text-transform: uppercase;
margin: var(--space-2) 0;
color: var(--paper);
text-wrap: balance;
}
.artist-hero__tag {
font-family: var(--f-italic);
font-style: italic;
font-size: clamp(1.2rem, 2vw, 1.8rem);
line-height: 1.3;
max-width: 50ch;
color: var(--paper);
margin: 0;
opacity: .92;
}
.artist-body {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: var(--space-5);
padding: var(--space-6) var(--pad-x);
border-bottom: 1px solid var(--ink-08);
}
.artist-bio {
font-size: 1.15rem;
line-height: 1.7;
color: var(--ink-2);
max-width: 62ch;
}
.artist-bio p { margin: 0 0 var(--space-3); }
.artist-bio p:first-of-type {
font-family: var(--f-display-2);
font-weight: 900;
font-size: clamp(1.4rem, 2.4vw, 2rem);
line-height: 1.25;
letter-spacing: -.01em;
color: var(--paper);
margin-bottom: var(--space-4);
text-wrap: balance;
}
.artist-bio em { color: var(--paper); font-style: italic; }
.artist-bio strong { color: var(--paper); font-weight: 600; }
.artist-main { display: grid; gap: var(--space-4); max-width: 62ch; }
.artist-spotify {
margin-top: var(--space-3);
padding: var(--space-3);
border: 1px solid var(--ink-08);
border-radius: var(--radius-lg);
background: var(--bg-2);
display: grid;
gap: var(--space-2);
position: relative;
isolation: isolate;
}
.artist-spotify::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(50% 80% at 0% 0%, rgba(30, 215, 96, .14) 0%, transparent 65%);
opacity: .9;
z-index: -1;
}
.artist-spotify .eyebrow {
display: flex;
align-items: center;
gap: .5em;
margin: 0;
font-family: var(--f-mono);
font-size: .68rem;
letter-spacing: .18em;
text-transform: uppercase;
color: #1ed760;
}
.artist-spotify .eyebrow .dot { width: 8px; height: 8px; background: #1ed760; border-radius: 50%; }
.artist-spotify__lede {
margin: 0;
font-size: .98rem;
line-height: 1.5;
color: var(--ink-2);
}
.artist-spotify__embed { line-height: 0; }
.artist-spotify__embed iframe { border: 0; display: block; }
/* Likely setlist panel */
.artist-setlist {
margin-top: var(--space-3);
padding: var(--space-3);
border: 1px solid var(--ink-08);
border-radius: var(--radius-lg);
background: var(--bg-2);
display: grid;
gap: var(--space-2);
position: relative;
isolation: isolate;
}
.artist-setlist::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(70% 60% at 100% 0%, var(--pg-green) 0%, transparent 65%);
opacity: .08;
border-radius: inherit;
z-index: -1;
}
.artist-setlist .eyebrow {
display: flex;
align-items: center;
gap: .5em;
margin: 0;
font-family: var(--f-mono);
font-size: .68rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--pg-green);
}
.artist-setlist .eyebrow .dot { width: 8px; height: 8px; background: var(--pg-green); border-radius: 50%; }
.artist-setlist__lede {
margin: 0;
font-size: .98rem;
line-height: 1.55;
color: var(--ink-2);
}
.artist-setlist__list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: .35rem;
counter-reset: setlist;
}
.artist-setlist__list li {
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
gap: .9rem;
padding: .5rem .7rem;
background: var(--bg);
border-radius: 8px;
border: 1px solid var(--ink-08);
transition: border-color var(--t-fast), background var(--t-fast);
}
.artist-setlist__list li:hover { border-color: var(--ink-2); background: var(--bg-3); }
.artist-setlist__num {
font-family: var(--f-mono);
font-size: .7rem;
letter-spacing: .12em;
color: var(--ink-2);
font-weight: 600;
}
.artist-setlist__title {
font-family: var(--f-display);
font-size: clamp(1rem, 1.4vw, 1.2rem);
letter-spacing: -.005em;
text-transform: uppercase;
color: var(--paper);
font-weight: 400;
}
.artist-setlist__src {
margin: 0;
font-family: var(--f-mono);
font-size: .62rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mute);
text-align: center;
}
/* Artist share poster panel */
.artist-share {
margin-top: var(--space-3);
padding: var(--space-3);
border: 1px solid var(--ink-08);
border-radius: var(--radius-lg);
background: var(--bg-2);
display: grid;
gap: var(--space-2);
position: relative;
isolation: isolate;
}
.artist-share::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(70% 60% at 0% 100%, var(--pg-green) 0%, transparent 65%);
opacity: .08;
border-radius: inherit;
z-index: -1;
}
.artist-share .eyebrow {
display: flex; align-items: center; gap: .5em;
margin: 0;
font-family: var(--f-mono);
font-size: .68rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--pg-green);
}
.artist-share .eyebrow .dot { width: 8px; height: 8px; background: var(--pg-green); border-radius: 50%; }
.artist-share__lede {
margin: 0;
font-size: .98rem;
line-height: 1.55;
color: var(--ink-2);
}
.artist-share__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
[data-artist-share-canvas] { display: none; }
.artist-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
align-content: start;
align-self: start;
position: sticky;
top: clamp(80px, 10vh, 120px);
}
.artist-meta__block {
border-top: 1px solid var(--ink-08);
padding-top: var(--space-2);
}
.artist-meta__block p:not(.eyebrow) {
font-family: var(--f-display);
font-size: clamp(1rem, 1.4vw, 1.2rem);
line-height: 1.15;
letter-spacing: -.01em;
text-transform: uppercase;
margin: .4em 0 0;
font-weight: 400;
}
.artist-meta__block .link { font-family: var(--f-mono); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.artist-related {
padding: var(--space-6) var(--pad-x);
border-bottom: 1px solid var(--ink-08);
}
.artist-related .section-title {
font-size: clamp(2rem, 4vw, 3.4rem);
margin: var(--space-2) 0 var(--space-4);
}
.artist-related__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--space-2);
}
.artist-related__item {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: .3em var(--space-2);
padding: var(--space-3);
border: 1px solid var(--ink-08);
border-radius: var(--radius);
background: var(--bg-2);
transition: transform var(--t-med) var(--ease-power), border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
position: relative;
isolation: isolate;
}
.artist-related__item::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(circle at 30% 30%, var(--tone-rel-1, var(--pg-green)), transparent 70%);
opacity: 0;
z-index: -1;
transition: opacity var(--t-fast) var(--ease-out);
border-radius: inherit;
}
.artist-related__item[data-tone="heat"] { --tone-rel-1: #4E794B; }
.artist-related__item[data-tone="lime"] { --tone-rel-1: #4E794B; }
.artist-related__item[data-tone="sky"] { --tone-rel-1: #547177; }
.artist-related__item[data-tone="ink"] { --tone-rel-1: #0a0a0a; }
.artist-related__item[data-tone="pink"] { --tone-rel-1: #547177; }
.artist-related__item:hover {
transform: translateY(-3px);
border-color: var(--ink-2);
}
.artist-related__item:hover::before { opacity: .15; }
.artist-related__item .eyebrow { grid-column: 1; grid-row: 1; }
.artist-related__item strong {
grid-column: 1; grid-row: 2;
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(1.2rem, 1.6vw, 1.5rem);
line-height: 1;
letter-spacing: -.01em;
text-transform: uppercase;
}
.artist-related__item .arrow {
grid-column: 2; grid-row: 1 / span 2;
align-self: center;
font-size: 1.4rem;
transition: transform var(--t-med) var(--ease-power);
}
.artist-related__item:hover .arrow { transform: translateX(6px); }
@media (max-width: 900px) {
.artist-body { grid-template-columns: 1fr; }
.artist-meta { position: relative; top: 0; grid-template-columns: 1fr 1fr; }
}
/* Light theme variant for inverted sections in subpages */
[data-theme="light"] {
--bg: var(--paper);
--bg-2: var(--paper-2);
--bg-3: #e8e6e1;
--ink: var(--ink-dark);
--ink-2: var(--mute);
--line: rgba(11,11,12,.14);
--line-strong: rgba(11,11,12,.3);
}
/* ========== TIMETABLE ========== */
/* =================================================================
§13 TRAVEL / HOTEL WIDGETS (info.html — Trip planner + Where to stay)
Restored from style.css.bak with Pulse palette remap.
================================================================= */
.travel-calc {
margin-top: var(--s-4);
padding: var(--s-4);
border: 1px solid var(--line-strong);
border-radius: var(--radius-lg);
background: var(--ink-04);
position: relative;
isolation: isolate;
}
.travel-calc::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(70% 60% at 100% 0%, var(--pg-green) 0%, transparent 60%);
opacity: .08;
border-radius: inherit;
z-index: -1;
}
.travel-calc__head {
margin-bottom: var(--s-3);
}
.travel-calc__head .eyebrow {
display: inline-flex; align-items: center; gap: .5em;
font-family: var(--f-mono);
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pg-green);
margin: 0 0 .5em;
}
.travel-calc__head .eyebrow .dot { width: 8px; height: 8px; background: var(--pg-green); border-radius: 50%; }
.travel-calc__head h3 {
font-family: var(--f-display);
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1;
letter-spacing: -.01em;
text-transform: uppercase;
margin: 0 0 .35em;
font-weight: 400;
}
.travel-calc__head p {
font-size: 1rem;
color: var(--paper);
margin: 0;
max-width: 60ch;
}
.travel-calc__from {
width: 100%;
padding: .85em 1em;
background: var(--ink-04);
border: 1px solid var(--ink-08);
border-radius: 8px;
color: var(--paper);
font-family: var(--f-body);
font-size: 1rem;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
margin-bottom: var(--s-2);
}
.travel-calc__from:focus {
outline: none;
border-color: var(--pg-green);
}
.travel-calc__hint {
font-family: var(--f-mono);
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--paper-dim);
text-align: center;
padding: var(--s-3) 0;
margin: 0;
}
.travel-calc__lede {
font-size: 1.05rem;
color: var(--paper);
margin: 0 0 var(--s-2);
}
.travel-calc__lede strong { color: var(--paper); font-weight: 600; }
.travel-calc__lede em {
font-style: normal;
font-family: var(--f-mono);
font-size: .8rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--paper);
margin-left: .5em;
}
.travel-options {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: .5rem;
}
/* Bump specificity (.travel-options .travel-row, 0,2,0) so the parent
rule `.info-section ul li` (0,1,2) doesn't win the cascade. That parent
rule applies `1fr auto` + `padding .6em 0` + bottom border to all info-
section bullet rows — but our travel rows need their own definition.
Also explicitly resets the inherited border-bottom and background. */
.travel-options .travel-row {
display: grid;
grid-template-columns: 44px 1fr;
grid-template-areas:
"icon main"
"icon meta";
column-gap: 1.1rem;
row-gap: .35rem;
align-items: center;
padding: 1rem 1.2rem;
border: 1px solid var(--ink-08);
border-bottom: 1px solid var(--ink-08);
border-radius: var(--radius);
background: var(--pg-black);
position: relative;
transition: border-color var(--t-fast), background var(--t-fast);
}
.travel-row:hover { border-color: var(--paper); background: var(--ink-04); }
.travel-row--best {
border-color: var(--pg-green);
background: rgba(78, 121, 75, .06);
}
.travel-row--best:hover { background: rgba(78, 121, 75, .12); }
.travel-row__icon {
grid-area: icon;
align-self: center;
font-size: 1.6rem;
width: 44px;
height: 44px;
display: grid;
place-items: center;
background: var(--ink-04);
border-radius: 50%;
}
.travel-row--best .travel-row__icon { background: rgba(78, 121, 75, .12); }
.travel-row__main {
grid-area: main;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: .25em .8em;
min-width: 0;
}
.travel-row__main strong {
font-family: var(--f-display);
font-size: 1.15rem;
letter-spacing: -.005em;
text-transform: uppercase;
color: var(--paper);
font-weight: 400;
flex-shrink: 0;
}
.travel-row__main em {
font-style: normal;
font-family: var(--f-mono);
font-size: .7rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--paper);
/* Allow wrap & ellipsize gracefully */
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.travel-row__meta {
grid-area: meta;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .15em .55em;
font-family: var(--f-mono);
font-size: .76rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--paper);
}
.travel-row__sep { color: var(--paper-dim); }
.travel-row__time { color: var(--paper); }
.travel-row__price { color: var(--paper); font-weight: 600; }
.travel-row__co2 { color: var(--pg-green); }
.travel-row--best .travel-row__co2 { font-weight: 600; }
.travel-row__tag {
position: absolute;
top: -8px;
right: 1rem;
background: var(--pg-green);
color: var(--ink-dark);
font-family: var(--f-mono);
font-size: .62rem;
letter-spacing: .14em;
text-transform: uppercase;
padding: .25em .7em;
border-radius: 999px;
font-weight: 600;
}
.travel-calc__note {
margin: var(--s-2) 0 0;
padding: .9em 1em;
background: rgba(78, 121, 75, .08);
border-left: 2px solid var(--pg-green);
border-radius: 4px;
font-size: .92rem;
line-height: 1.5;
color: var(--paper);
}
@media (max-width: 540px) {
.travel-options .travel-row {
grid-template-columns: 36px 1fr;
padding: .85rem 1rem;
column-gap: .8rem;
}
.travel-row__icon { width: 36px; height: 36px; font-size: 1.3rem; }
.travel-row__main strong { font-size: 1rem; }
.travel-row__meta { font-size: .7rem; }
}
/* ============================================
FESTIVAL MODE — global toggle (auto on show dates)
============================================ */
.hotel-widget {
margin-top: var(--s-3);
display: grid;
gap: var(--s-3);
}
.hotel-widget__form {
display: grid;
/* minmax(0, 1fr) prevents date input min-content from pushing cols wider than parent */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
gap: var(--s-2);
padding: var(--s-3);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--ink-04);
align-items: end;
}
.hotel-widget__field {
display: grid;
gap: .35em;
}
.hotel-widget__field label {
font-family: var(--f-mono);
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--paper);
}
.hotel-widget__field input,
.hotel-widget__field select {
padding: .8em 1em;
background: var(--ink-04);
border: 1px solid var(--ink-08);
border-radius: 8px;
color: var(--paper);
font-family: var(--f-body);
font-size: 1rem;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition: border-color var(--t-fast);
}
.hotel-widget__field input:focus,
.hotel-widget__field select:focus {
outline: none;
border-color: var(--pg-green);
}
.hotel-widget__field input::-webkit-calendar-picker-indicator {
filter: invert(.8);
cursor: pointer;
}
.hotel-widget__form .btn {
white-space: nowrap;
height: 100%;
align-self: stretch;
}
.hotel-widget__results {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-2);
}
.hotel-card {
position: relative;
padding: var(--s-3);
border: 1px solid var(--ink-08);
border-radius: var(--radius);
background: var(--ink-04);
display: grid;
gap: .55em;
transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
isolation: isolate;
}
.hotel-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(60% 70% at 100% 0%, var(--pg-green) 0%, transparent 65%);
opacity: .06;
border-radius: inherit;
z-index: -1;
transition: opacity var(--t-fast);
}
.hotel-card:hover { border-color: var(--paper); transform: translateY(-2px); }
.hotel-card:hover::before { opacity: .14; }
.hotel-card--alt::before { background: radial-gradient(60% 70% at 100% 0%, var(--pg-green) 0%, transparent 65%); }
.hotel-card__type {
font-family: var(--f-mono);
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--paper);
margin: 0;
}
.hotel-card__name {
font-family: var(--f-display);
font-size: clamp(1.3rem, 2vw, 1.7rem);
line-height: 1;
letter-spacing: -.01em;
text-transform: uppercase;
margin: 0;
font-weight: 400;
}
.hotel-card__meta {
display: flex;
flex-wrap: wrap;
gap: .8em;
margin: .25em 0 .5em;
font-family: var(--f-mono);
font-size: .7rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--paper);
}
.hotel-card__meta span { padding-right: .8em; border-right: 1px solid var(--ink-08); }
.hotel-card__meta span:last-child { border-right: 0; padding-right: 0; }
.hotel-card__price {
font-size: .9rem;
color: var(--paper);
margin: 0;
}
.hotel-card__price strong {
font-family: var(--f-display);
font-size: clamp(1.6rem, 2.4vw, 2.2rem);
letter-spacing: -.01em;
color: var(--paper);
font-weight: 400;
margin-right: .15em;
}
.hotel-card__lede {
font-size: .92rem;
line-height: 1.5;
color: var(--paper);
margin: 0;
}
.hotel-card__lede code {
font-family: var(--f-mono);
font-size: .82rem;
background: var(--ink-04);
padding: .15em .4em;
border-radius: 4px;
color: var(--pg-green);
}
.hotel-card .btn {
justify-self: start;
margin-top: .25em;
}
.hotel-widget__note {
font-family: var(--f-mono);
font-size: .7rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--paper-dim);
line-height: 1.6;
text-align: center;
margin: 0;
}
@media (max-width: 900px) {
.hotel-widget__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hotel-widget__form .btn { grid-column: span 2; }
.hotel-widget__results { grid-template-columns: minmax(0, 1fr); }
}
/* ============================================
PRESS RELEASE ARCHIVE
Specificity bumped to .press-releases .press-release (0,2,0)
so it beats `.info-section ul li` (0,1,2) which would otherwise
apply 1fr-auto grid and 9px×0 padding to every in info sections.
============================================ */
/* =================================================================
§14 FAQ + INFO-SECTION (info.html — Frequently asked + restored
long-form sections). Palette remapped to Pulse tokens.
================================================================= */
.info-nav {
position: sticky;
top: clamp(80px, 10vh, 120px);
align-self: start;
display: grid;
gap: .4em;
font-family: var(--f-mono);
font-size: .82rem;
letter-spacing: .12em;
text-transform: uppercase;
}
.info-nav a { padding: .8em 0; border-bottom: 1px solid var(--ink-08); transition: padding var(--t-med) var(--ease-power), color var(--t-fast) var(--ease-out); }
.info-nav a:hover { padding-left: .6em; color: var(--pg-green); }
.info-section { margin-bottom: 0; }
.info-section h2 {
font-family: var(--f-display);
font-size: clamp(1.5rem, 2.6vw, 2.2rem);
line-height: 1.05;
letter-spacing: -.02em;
margin: var(--s-1) 0 var(--s-3);
font-weight: 300;
color: var(--paper);
}
/* Press handling grid — centered, 2-col desktop, single mobile */
.press-handling__head { max-width: 1180px; margin: 0 auto var(--s-5); }
.press-handling__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-4) var(--s-5);
max-width: 1180px;
margin: 0 auto;
}
.press-handling__grid > .info-section { margin-bottom: 0; }
@media (max-width: 880px) {
.press-handling__grid { grid-template-columns: 1fr; gap: var(--s-4); }
}
.info-section p.eyebrow { color: var(--paper-dim); margin-bottom: var(--s-1); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-family: var(--f-mono); }
.info-section .eyebrow .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pg-green); margin-right: 8px; vertical-align: middle; }
.info-section p {
font-size: 1.02rem;
line-height: 1.6;
max-width: 65ch;
color: var(--paper);
margin: 0 0 var(--s-2);
}
.info-section p strong { color: var(--paper); font-weight: 600; }
.info-section ul { display: grid; gap: .5em; margin-top: var(--s-2); max-width: 65ch; }
.info-section ul li {
padding: .6em 0;
border-bottom: 1px solid var(--ink-08);
display: grid;
/* Label is auto (sizes to its short content), value takes remaining 1fr
and wraps naturally when long. minmax(0, 1fr) prevents the value column
from being inflated by min-content of long unbroken text. */
grid-template-columns: auto minmax(0, 1fr);
gap: var(--s-2);
color: var(--paper);
}
.info-section ul li strong { color: var(--paper); font-weight: 500; }
.info-section ul li span { text-align: right; }
/* On mobile, the auto+1fr layout still squeezes labels too tight — see media query at end */
.faq { border-bottom: 1px solid var(--ink-08); }
.faq summary {
list-style: none;
cursor: pointer;
padding: 1.2em 0;
border-bottom: 1px solid var(--ink-08);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--s-2);
font-family: var(--f-display);
font-size: clamp(1.2rem, 1.8vw, 1.6rem);
text-transform: uppercase;
letter-spacing: -.01em;
transition: color var(--t-fast) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-display); font-size: 1.2em; transition: transform var(--t-med) var(--ease-power); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--pg-green); }
.faq[open] summary { color: var(--pg-green); }
.faq__body {
padding: var(--s-2) 0 var(--s-3);
color: var(--paper);
max-width: 65ch;
line-height: 1.6;
}
@media (max-width: 900px) { .info-grid { grid-template-columns: minmax(0, 1fr); } .info-nav { position: relative; top: 0; display: flex; flex-wrap: wrap; gap: .4em; } .info-nav a { padding: .5em .8em; border: 1px solid var(--ink-08); border-radius: 999px; } }
/* NEWS */
.news-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-2);
}
/* ═══ RESTORED §C — SITE SEARCH + PWA + TICKET INVENTORY ═══ */
/* ─── §C-1 NAV SEARCH BUTTON ─────────────────────────────── */
.nav__search {
width: 38px;
height: 38px;
display: inline-grid;
place-items: center;
border: 1px solid var(--ink-16);
background: rgba(0, 0, 0, .3);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--paper);
font-family: var(--f-mono);
font-size: 16px;
line-height: 1;
cursor: pointer;
transition: border-color .2s var(--motion-easing),
color .2s var(--motion-easing),
transform .2s var(--motion-easing);
}
.nav__search:hover {
border-color: var(--paper);
color: var(--pg-green);
transform: rotate(-6deg);
}
.nav__search:focus-visible {
outline: 2px solid var(--pg-green);
outline-offset: 3px;
}
@media (max-width: 720px) {
/* Match .nav__menu sizing so search + burger stack flush on mobile */
.nav__search { width: 38px; height: 38px; font-size: 14px; }
}
/* ─── §C-1 SITE SEARCH OVERLAY ───────────────────────────── */
.site-search {
position: fixed;
inset: 0;
z-index: 10050;
display: grid;
place-items: start center;
padding: clamp(60px, 12vh, 140px) 1rem 2rem;
background: rgba(0, 0, 0, .82);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
opacity: 0;
pointer-events: none;
transition: opacity .32s var(--motion-easing);
}
.site-search.is-open {
opacity: 1;
pointer-events: auto;
}
.site-search__panel {
width: min(680px, 100%);
background: #0a0a0a;
border: 1px solid var(--ink-16);
padding: var(--s-3);
box-shadow: 0 50px 120px rgba(0, 0, 0, .6),
0 0 0 1px rgba(78, 121, 75, .12) inset;
transform: translateY(-14px);
transition: transform .32s var(--motion-easing);
}
.site-search.is-open .site-search__panel { transform: translateY(0); }
.site-search__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--s-2);
}
.site-search__eyebrow {
display: inline-flex;
align-items: center;
gap: .55em;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--paper-dim);
}
.site-search__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--pg-green);
box-shadow: 0 0 0 0 rgba(78, 121, 75, .55);
animation: site-search-pulse 1.8s var(--motion-easing) infinite;
}
@keyframes site-search-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(78, 121, 75, .55); }
50% { box-shadow: 0 0 0 6px rgba(78, 121, 75, 0); }
}
.site-search__close {
width: 32px;
height: 32px;
display: grid;
place-items: center;
background: transparent;
border: 0;
font-size: 1.4rem;
line-height: 1;
color: var(--paper-dim);
cursor: pointer;
transition: color .18s var(--motion-easing), background .18s var(--motion-easing);
}
.site-search__close:hover {
color: var(--paper);
background: var(--ink-08);
}
.site-search__inputwrap {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: .8rem;
padding: .4em 0;
border-bottom: 1px solid var(--ink-16);
}
.site-search__icon { color: var(--paper-dim); }
.site-search__input {
width: 100%;
padding: .6em 0;
background: transparent;
border: 0;
font-family: var(--f-display);
font-size: clamp(1.4rem, 2.6vw, 1.9rem);
font-weight: 300;
letter-spacing: -.01em;
color: var(--paper);
outline: none;
}
.site-search__input::placeholder {
color: var(--paper-dim);
font-family: var(--f-body);
font-size: 1rem;
letter-spacing: 0;
}
.site-search__inputwrap:focus-within { border-bottom-color: var(--pg-green); }
.site-search__inputwrap:focus-within .site-search__icon { color: var(--pg-green); }
.site-search__results {
max-height: 52vh;
overflow-y: auto;
margin: var(--s-2) 0 0;
padding: 0;
list-style: none;
scrollbar-width: thin;
scrollbar-color: var(--ink-16) transparent;
}
.site-search__results::-webkit-scrollbar { width: 6px; }
.site-search__results::-webkit-scrollbar-thumb {
background: var(--ink-16);
border-radius: 3px;
}
.site-search__item { margin: 0; }
.site-search__item a {
display: grid;
grid-template-columns: 78px 1fr auto auto;
align-items: center;
gap: .9rem;
padding: .7em .8em;
color: var(--paper-dim);
text-decoration: none;
border: 1px solid transparent;
transition: background .18s var(--motion-easing),
color .18s var(--motion-easing),
border-color .18s var(--motion-easing);
}
.site-search__item.is-active a,
.site-search__item a:hover,
.site-search__item a:focus-visible {
background: var(--green-12);
border-color: var(--green-40);
color: var(--paper);
outline: none;
}
.site-search__item-kind {
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: .18em;
text-transform: uppercase;
padding: 3px 7px;
border: 1px solid var(--ink-16);
color: var(--paper-dim);
text-align: center;
}
.site-search__item-kind--artist {
color: var(--pg-green);
border-color: var(--green-40);
}
.site-search__item-kind--gate {
color: var(--pg-blue);
border-color: var(--blue-40);
}
.site-search__item-title {
font-family: var(--f-display);
font-size: 1rem;
letter-spacing: -.005em;
color: var(--paper);
}
.site-search__item-title mark {
background: rgba(78, 121, 75, .35);
color: var(--paper);
padding: 0 .15em;
}
.site-search__item-hint {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--paper-dim);
}
.site-search__item-arrow {
font-family: var(--f-mono);
color: var(--paper-dim);
transition: transform .18s var(--motion-easing), color .18s var(--motion-easing);
}
.site-search__item.is-active a .site-search__item-arrow,
.site-search__item a:hover .site-search__item-arrow {
color: var(--pg-green);
transform: translate(2px, -2px);
}
.site-search__empty {
display: grid;
gap: .35rem;
padding: 1.2rem .8rem;
color: var(--paper-dim);
list-style: none;
}
.site-search__empty-tag {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--pg-green);
}
.site-search__empty-text {
font-family: var(--f-body);
font-size: .9rem;
color: var(--paper-dim);
}
.site-search__hint {
margin: var(--s-2) 0 0;
padding-top: var(--s-2);
border-top: 1px solid var(--ink-08);
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--paper-dim);
}
.site-search__hint kbd {
display: inline-block;
padding: 2px 6px;
margin: 0 2px;
background: var(--ink-08);
border: 1px solid var(--ink-16);
font-family: var(--f-mono);
font-size: 10px;
color: var(--paper);
}
@media (max-width: 540px) {
.site-search__item a { grid-template-columns: 68px 1fr auto; }
.site-search__item-hint { display: none; }
}
/* ─── §C-2 PWA INSTALL PROMPT ────────────────────────────── */
.pwa-prompt {
position: fixed;
bottom: clamp(14px, 2.5vw, 24px);
right: clamp(14px, 2.5vw, 24px);
z-index: 9300;
width: min(380px, calc(100vw - 28px));
background: #0a0a0a;
border: 1px solid var(--ink-16);
padding: var(--s-3);
box-shadow: 0 30px 70px rgba(0, 0, 0, .55),
0 6px 14px rgba(78, 121, 75, .14);
opacity: 0;
pointer-events: none;
transform: translateY(120%);
transition: opacity .32s var(--motion-easing),
transform .42s var(--motion-easing);
isolation: isolate;
overflow: hidden;
}
.pwa-prompt::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(70% 80% at 100% 0%, var(--pg-blue) 0%, transparent 60%),
radial-gradient(50% 60% at 0% 100%, var(--pg-green) 0%, transparent 60%);
opacity: .14;
z-index: -1;
pointer-events: none;
}
.pwa-prompt.is-on {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.pwa-prompt__close {
position: absolute;
top: .35em;
right: .55em;
width: 28px;
height: 28px;
display: grid;
place-items: center;
background: transparent;
border: 0;
font-size: 1.3rem;
line-height: 1;
color: var(--paper-dim);
cursor: pointer;
transition: color .18s var(--motion-easing), background .18s var(--motion-easing);
}
.pwa-prompt__close:hover { color: var(--paper); background: var(--ink-08); }
.pwa-prompt__head {
display: flex;
align-items: center;
gap: var(--s-2);
margin-bottom: var(--s-2);
padding-right: 24px;
}
.pwa-prompt__mark {
width: 46px;
height: 46px;
display: grid;
place-items: center;
background: var(--green-20);
border: 1px solid var(--green-40);
flex-shrink: 0;
position: relative;
isolation: isolate;
}
.pwa-prompt__mark img {
width: 28px;
height: 28px;
display: block;
filter: invert(96%) sepia(7%) saturate(140%) hue-rotate(30deg) brightness(98%) contrast(96%);
}
.pwa-prompt__mark::after {
content: "";
position: absolute;
inset: -4px;
background: var(--pg-green);
opacity: .22;
z-index: -1;
animation: pwa-mark-pulse 2.6s ease-in-out infinite;
}
@keyframes pwa-mark-pulse {
0%, 100% { transform: scale(1); opacity: .22; }
50% { transform: scale(1.14); opacity: 0; }
}
.pwa-prompt__brand { display: grid; gap: 2px; }
.pwa-prompt__eyebrow {
display: inline-flex;
align-items: center;
gap: .5em;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--pg-green);
}
.pwa-prompt__pulse {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--pg-green);
animation: site-search-pulse 1.8s var(--motion-easing) infinite;
}
.pwa-prompt__name {
margin: 0;
font-family: var(--f-display);
font-size: 1.05rem;
letter-spacing: -.005em;
color: var(--paper);
}
.pwa-prompt__lede {
margin: 0 0 .35em;
font-family: var(--f-display);
font-size: clamp(1.15rem, 4vw, 1.35rem);
line-height: 1.15;
letter-spacing: -.015em;
color: var(--paper);
}
.pwa-prompt__body {
margin: 0 0 var(--s-2);
font-family: var(--f-body);
font-size: .9rem;
line-height: 1.5;
color: var(--paper-dim);
}
.pwa-prompt__steps {
list-style: none;
display: grid;
gap: .4rem;
margin: 0 0 var(--s-2);
padding: .7rem .85rem;
background: rgba(0, 0, 0, .4);
border: 1px solid var(--ink-08);
}
.pwa-prompt__steps li {
display: flex;
align-items: center;
gap: .55em;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .04em;
color: var(--paper);
}
.pwa-prompt__step-num {
font-family: var(--f-display);
font-size: 13px;
color: var(--pg-green);
font-weight: 500;
min-width: 14px;
}
.pwa-prompt__steps em {
font-style: normal;
color: var(--paper-dim);
}
.pwa-prompt__steps svg { color: var(--paper); margin: 0 .15em; vertical-align: middle; }
.pwa-prompt__actions {
display: flex;
gap: .55rem;
align-items: center;
}
.pwa-prompt__btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5em;
padding: .75em 1em;
background: transparent;
border: 1px solid var(--ink-16);
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--paper);
cursor: pointer;
transition: background .18s var(--motion-easing),
border-color .18s var(--motion-easing),
color .18s var(--motion-easing);
}
.pwa-prompt__btn:hover { border-color: var(--paper); }
.pwa-prompt__btn--cta {
background: var(--pg-green);
border-color: var(--pg-green);
color: #fff;
position: relative;
}
.pwa-prompt__btn--cta::after {
content: "";
position: absolute;
inset: 0;
box-shadow: 0 0 0 0 rgba(78, 121, 75, .55);
animation: pwa-cta-pulse 2.4s ease-in-out infinite;
pointer-events: none;
}
.pwa-prompt__btn--cta:hover {
background: #406040;
border-color: #406040;
color: #fff;
}
@keyframes pwa-cta-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(78, 121, 75, .55); }
60% { box-shadow: 0 0 0 14px rgba(78, 121, 75, 0); }
}
.pwa-prompt__btn--ghost { color: var(--paper-dim); }
.pwa-prompt__btn--ghost:hover { color: var(--paper); }
@media (max-width: 540px) {
.pwa-prompt {
right: 12px;
left: 12px;
bottom: 12px;
width: auto;
padding: var(--s-2) var(--s-3);
}
.pwa-prompt__lede { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
.pwa-prompt__mark::after,
.pwa-prompt__btn--cta::after,
.pwa-prompt__pulse,
.site-search__dot { animation: none; }
}
/* ─── §C-3 TICKET INVENTORY BARS ─────────────────────────── */
.inv-bar {
display: grid;
gap: 6px;
margin-top: var(--s-2);
padding-top: var(--s-2);
border-top: 1px solid var(--ink-08);
}
.inv-bar__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-1);
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--paper-dim);
}
.inv-bar__pct strong {
color: var(--paper);
font-weight: 500;
margin-right: 4px;
}
.inv-bar__badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px;
border: 1px solid var(--green-40);
background: var(--green-12);
color: var(--pg-green);
font-size: 9.5px;
letter-spacing: .18em;
}
.inv-bar__badge::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
animation: site-search-pulse 1.5s var(--motion-easing) infinite;
}
.inv-bar__track {
position: relative;
height: 5px;
background: var(--ink-08);
overflow: hidden;
}
.inv-bar__fill {
position: absolute;
inset: 0 auto 0 0;
width: 0%;
background: linear-gradient(
90deg,
var(--pg-green) 0%,
var(--pg-green) 55%,
var(--pg-blue) 78%,
#c7a23a 100%
);
transition: width 1.2s cubic-bezier(.4, 0, .2, 1);
}
/* Hot state (>75% sold) — amber/red push + pulse animation */
.inv-bar.is-hot .inv-bar__badge {
border-color: rgba(199, 162, 58, .55);
background: rgba(199, 162, 58, .14);
color: #d8b245;
}
.inv-bar.is-hot .inv-bar__fill {
background: linear-gradient(
90deg,
var(--pg-green) 0%,
var(--pg-blue) 35%,
#c7a23a 70%,
#c44a2a 100%
);
animation: inv-bar-pulse 2s ease-in-out infinite alternate;
}
@keyframes inv-bar-pulse {
from { box-shadow: 0 0 0 rgba(196, 74, 42, 0) inset; }
to { box-shadow: 0 0 12px rgba(196, 74, 42, .55) inset; }
}
@media (prefers-reduced-motion: reduce) {
.inv-bar__fill { transition: none; }
.inv-bar.is-hot .inv-bar__fill { animation: none; }
.inv-bar__badge::before { animation: none; }
}
/* ═══════════════════════════════════════════════════════════════════
RESTORED §A — FAVORITES + LINEUP FILTERS + CALENDAR
Source: css/style.css.bak (RCF Arena), remapped to Pulse tokens.
Original hex codes converted:
#0a0a0a / #fff / #FF3B14 → var(--paper) · var(--pg-green) · var(--ink-*)
═══════════════════════════════════════════════════════════════════ */
/* §A.1 Favorite star — corner button on .bento-card, .artist-hero, etc. */
.fav {
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .55);
border: 1px solid var(--ink-16);
color: var(--paper-dim);
z-index: 4;
cursor: pointer;
transition: color .2s var(--motion-easing),
border-color .2s var(--motion-easing),
background .2s var(--motion-easing),
transform .2s var(--motion-easing);
-webkit-tap-highlight-color: transparent;
}
.fav:hover,
.fav:focus-visible {
border-color: var(--paper);
color: var(--paper);
background: rgba(0, 0, 0, .75);
}
.fav.is-on {
color: var(--pg-green);
border-color: var(--pg-green);
background: rgba(78, 121, 75, .14);
}
.fav.is-on:hover {
color: var(--paper);
border-color: var(--pg-green);
background: rgba(78, 121, 75, .26);
}
.fav svg {
width: 16px;
height: 16px;
display: block;
pointer-events: none;
}
.fav--lg {
width: 44px;
height: 44px;
top: var(--s-3);
right: var(--pad-x);
}
.fav--lg svg { width: 22px; height: 22px; }
/* Toggle pop micro-animation */
@keyframes pog-fav-pop {
0% { transform: scale(1); }
35% { transform: scale(1.28); }
70% { transform: scale(.92); }
100% { transform: scale(1); }
}
.fav-pop { animation: pog-fav-pop .42s var(--motion-easing); }
@media (prefers-reduced-motion: reduce) {
.fav-pop { animation: none; }
}
/* Inside a bento-card the star needs to sit above the gradient overlay */
.bento-card { /* re-declared so the .fav stays absolutely positioned */ }
.bento-card .fav { mix-blend-mode: normal; }
/* §A.2 Lineup filter pills — extend existing .btn-pill for night filter */
/* (The .btn-pill base class lives at line ~367. We only add an "active green"
accent for the night group so users see which night they're filtering by.) */
.lineup-filters [data-filter-night].is-active {
background: var(--green-12);
border-color: var(--pg-green);
color: var(--paper);
}
.lineup-filters [data-filter-pulse="rhythm"].is-active { border-color: #7fa07b; color: var(--paper); }
.lineup-filters [data-filter-pulse="digital"].is-active { border-color: #86a3a8; color: var(--paper); }
.lineup-filters [data-filter-pulse="gaia"].is-active { border-color: #a8c1a4; color: var(--paper); }
/* §A.3 "My Festival" filter on timetable */
.tt-myfest-wrap {
display: flex;
align-items: center;
gap: var(--s-2);
padding: var(--s-3) var(--pad-x) 0;
flex-wrap: wrap;
}
.tt-myfest {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid var(--ink-16);
color: var(--paper-dim);
background: transparent;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .22em;
text-transform: uppercase;
cursor: pointer;
transition: border-color .2s, color .2s, background .2s;
}
.tt-myfest:hover { border-color: var(--paper); color: var(--paper); }
.tt-myfest.is-on {
border-color: var(--pg-green);
color: var(--paper);
background: rgba(78, 121, 75, .14);
}
.tt-myfest svg { color: currentColor; }
.tt-myfest.is-on svg { color: var(--pg-green); }
.tt-myfest__count {
font-style: normal;
color: var(--paper-dim);
margin-left: 2px;
letter-spacing: .12em;
}
.tt-myfest.is-on .tt-myfest__count { color: var(--paper); }
.tt-myfest__hint {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--paper-dim);
}
/* When My-Festival mode is ON, hide gate rows with no favourite artists */
.gates.is-myfest .gate-row[data-fav-count="0"],
.gates.is-myfest .gate-row[data-fav-count="0"] + .gate-panel {
display: none;
}
/* Favourited artist names get a subtle green dot prefix inside gate panels */
.tt-name { position: relative; padding-left: 0; transition: color .2s; }
.tt-name.is-fav {
color: var(--pg-green);
font-weight: 500;
}
.tt-name.is-fav::before {
content: "★";
display: inline-block;
color: var(--pg-green);
margin-right: 6px;
font-size: .9em;
line-height: 1;
}
/* §A.4 Add-to-calendar button (timetable + tickets) */
.cal-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
background: transparent;
border: 1px solid var(--ink-16);
color: var(--paper-dim);
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: .22em;
text-transform: uppercase;
cursor: pointer;
transition: border-color .2s var(--motion-easing),
color .2s var(--motion-easing),
background .2s var(--motion-easing);
}
.cal-btn:hover,
.cal-btn:focus-visible {
border-color: var(--pg-green);
color: var(--paper);
background: rgba(78, 121, 75, .12);
}
.cal-btn svg { display: block; color: currentColor; }
.cal-btn--inline {
margin-left: auto;
/* used inline in ticket-night header — sits on the right of the row */
}
/* §A.5 Mobile tweaks */
@media (max-width: 720px) {
.fav { width: 28px; height: 28px; top: 8px; right: 8px; }
.fav svg { width: 14px; height: 14px; }
.fav--lg { width: 36px; height: 36px; top: var(--s-2); right: var(--pad-x); }
.fav--lg svg { width: 18px; height: 18px; }
.tt-myfest__hint { display: none; }
.cal-btn { padding: 6px 10px; font-size: 9px; }
.cal-btn--inline { margin-left: 0; }
}
/* ═══ RESTORED §B — NOW PLAYING + FESTIVAL MODE + COUNTERS ═══ */
/* Pulse of Gaia palette + typography.
Scoped to the new selectors so legacy components keep their tokens. */
/* NOTE: a previous restoration block redefined the entire --s-1..--s-9
spacing scale with clamp() values that were roughly HALF the canonical
8/16/24/32/48/64/96/128/160 tokens declared in §1. That cascaded across
every component on every page, squeezing menu sublinks (3.75px gap
instead of 8px), footer padding, hero spacing, etc. The redefinition
has been removed so the canonical scale wins everywhere. The §B
components below were retuned against the canonical scale. */
:root {
/* Local font aliases consistent with Pulse brand (canonical --f-display
etc. are in §1; these are kept as additional aliases) */
--pg-f-display: var(--f-display);
--pg-f-body: var(--f-body);
--pg-f-mono: var(--f-mono);
}
/* ── §B.1 Now Playing widget ───────────────────────────────── */
.pg-now-playing {
position: fixed;
left: clamp(12px, 2vw, 24px);
bottom: clamp(12px, 2.4vw, 28px);
z-index: 9500;
width: min(340px, calc(100vw - 24px));
padding: var(--s-4) var(--s-4) var(--s-3);
background: rgba(0, 0, 0, .82);
color: var(--paper);
border: 1px solid rgba(232, 230, 225, .14);
border-left: 2px solid var(--pg-green);
border-radius: 4px;
font-family: var(--pg-f-body);
-webkit-backdrop-filter: blur(12px) saturate(140%);
backdrop-filter: blur(12px) saturate(140%);
box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
transform: translateY(8px);
opacity: 0;
animation: pg-now-in .42s cubic-bezier(.2,.8,.2,1) .25s forwards;
isolation: isolate;
}
.pg-now-playing.is-dismissed { animation: pg-now-out .28s ease-in forwards; }
.pg-now-playing.is-idle { display: none; }
@keyframes pg-now-in { to { transform: translateY(0); opacity: 1; } }
@keyframes pg-now-out { to { transform: translateY(12px); opacity: 0; } }
.pg-now-playing__eyebrow {
display: flex; align-items: center; gap: .55em;
margin: 0 0 var(--s-2);
font-family: var(--pg-f-mono);
font-size: .68rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--pg-green);
}
.pg-now-playing__dot {
width: 8px; height: 8px;
background: var(--pg-green);
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(78, 121, 75, .55);
animation: pg-pulse 1.8s cubic-bezier(.2,.8,.2,1) infinite;
}
@keyframes pg-pulse {
0% { box-shadow: 0 0 0 0 rgba(78, 121, 75, .55); }
100% { box-shadow: 0 0 0 14px rgba(78, 121, 75, 0); }
}
.pg-now-playing__main {
margin: 0;
font-family: var(--pg-f-display);
font-size: clamp(1.25rem, 1.6vw + .6rem, 1.6rem);
font-weight: 600;
line-height: 1.1;
letter-spacing: -.005em;
color: var(--paper);
}
.pg-now-playing__main strong { font-weight: 600; }
.pg-now-playing__meta {
margin: var(--s-1) 0 var(--s-3);
font-family: var(--pg-f-mono);
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--paper-dim);
}
.pg-now-playing__next {
margin: 0;
padding-top: var(--s-3);
border-top: 1px solid rgba(232, 230, 225, .12);
}
.pg-now-playing__next-label {
margin: 0 0 var(--s-1);
font-family: var(--pg-f-mono);
font-size: .62rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--paper-dim);
}
.pg-now-playing__next-name {
margin: 0;
font-family: var(--pg-f-body);
font-size: .92rem;
color: var(--paper);
display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
}
.pg-now-playing__countdown {
font-family: var(--pg-f-mono);
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--paper-dim);
}
.pg-now-playing__close {
position: absolute;
top: 6px; right: 6px;
width: 28px; height: 28px;
display: grid; place-items: center;
background: transparent;
border: none;
color: var(--paper-dim);
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
border-radius: 50%;
transition: color .2s ease, background .2s ease;
}
.pg-now-playing__close:hover,
.pg-now-playing__close:focus-visible {
color: var(--paper);
background: rgba(232, 230, 225, .08);
outline: none;
}
@media (max-width: 480px) {
.pg-now-playing { left: 12px; right: 12px; width: auto; bottom: 12px; padding: var(--s-3); }
}
/* ── §B.2 Festival mode (body class) ───────────────────────── */
/* Subtle global state — does NOT override the legacy html.festival-mode rules. */
body.festival-mode .marquee__row {
animation-name: pg-marquee-fast;
animation-duration: 18s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pg-marquee-fast {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
body.festival-mode .nav__cta,
body.festival-mode [data-cursor="buy"],
body.festival-mode .btn-primary,
body.festival-mode .ticket-card__cta {
animation: pg-glow 2.6s cubic-bezier(.2,.8,.2,1) infinite alternate;
}
@keyframes pg-glow {
from { box-shadow: 0 0 0 0 rgba(78, 121, 75, 0); }
to { box-shadow: 0 0 0 6px rgba(78, 121, 75, .28); }
}
/* LIVE pip badge injected into nav during festival window */
.pg-live-pip {
display: inline-flex; align-items: center; gap: .45em;
margin-right: var(--s-3);
padding: .3em .65em;
background: var(--pg-black);
border: 1px solid var(--pg-green);
border-radius: 999px;
font-family: var(--pg-f-mono);
font-size: .62rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--pg-green);
vertical-align: middle;
}
.pg-live-pip[hidden] { display: none; }
.pg-live-pip__dot {
width: 6px; height: 6px;
background: var(--pg-green);
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(78, 121, 75, .6);
animation: pg-pulse 1.6s cubic-bezier(.2,.8,.2,1) infinite;
}
.pg-live-pip__txt { line-height: 1; }
@media (max-width: 720px) {
.pg-live-pip { font-size: .56rem; padding: .25em .55em; margin-right: var(--s-2); }
}
/* ── §B.3 Stat counters — accent + tabular figures ─────────── */
.stats .num[data-count],
.pg-stats .num[data-count] {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.pg-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--s-4) var(--s-5);
padding: var(--s-6) 0;
border-top: 1px solid rgba(232, 230, 225, .12);
border-bottom: 1px solid rgba(232, 230, 225, .12);
}
.pg-stats__item {
display: flex; flex-direction: column; gap: var(--s-2);
}
.pg-stats__num {
font-family: var(--pg-f-display);
font-size: clamp(2.2rem, 5vw, 3.6rem);
font-weight: 600;
line-height: .95;
letter-spacing: -.01em;
color: var(--paper);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.pg-stats__num::after {
content: "";
display: block;
width: 28px; height: 2px;
margin-top: var(--s-2);
background: var(--pg-green);
}
.pg-stats__lbl {
font-family: var(--pg-f-mono);
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--paper-dim);
}
/* ═══ RESTORED §D — AUDIO ANALYSER + CURSOR PHOTO + SECTION VARIANCE ═══ */
/* --- Cursor section variance ---
The cursor element reads --cursor-ring-color (set by initCursorVariance
via inline style). Default falls back to the paper tint. Sections tagged
with [data-cursor-tone="green|blue|paper"] cascade the variable to
descendants so the cursor picks up the right hue while hovering inside
that zone, in addition to the IntersectionObserver-driven swap. */
.cursor { --cursor-ring-color: var(--paper); }
.cursor__ring {
border-color: var(--cursor-ring-color);
transition: border-color .35s var(--motion-easing);
}
[data-cursor-tone="green"] { --cursor-ring-color: var(--pg-green); }
[data-cursor-tone="blue"] { --cursor-ring-color: var(--pg-blue); }
[data-cursor-tone="paper"] { --cursor-ring-color: var(--paper); }
/* --- Cursor photo preview ---
A separate fixed layer follows the mouse; transformed by JS each frame.
Grayscale + green tint via background-blend keeps it tonally Pulse,
never colour-true. Scaled up so it reads as a thumbnail, not a cursor. */
.cursor__photo {
position: fixed;
top: 0; left: 0;
width: 168px;
height: 168px;
pointer-events: none;
z-index: 9998;
background-color: var(--pg-green);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-blend-mode: luminosity;
filter: grayscale(1) contrast(1.08) saturate(.6);
opacity: 0;
transform: translate3d(0, 0, 0) translate(-50%, -50%) scale(.6);
transition: opacity .35s var(--motion-easing),
filter .35s var(--motion-easing);
will-change: transform, opacity;
border: 1px solid var(--paper);
outline: 1px solid rgba(0, 0, 0, .35);
mix-blend-mode: normal;
}
.cursor__photo.is-on {
opacity: .92;
}
/* When photo preview is active, fade the default dot/ring back so the
thumbnail reads as the primary cursor visual. */
.cursor.is-photo-preview .cursor__dot,
.cursor.is-photo-preview .cursor__ring {
opacity: .15;
transition: opacity .25s var(--motion-easing);
}
@media (prefers-reduced-motion: reduce) {
.cursor__photo { display: none; }
.cursor__ring { transition: none; }
}
@media (hover: none) {
.cursor__photo { display: none; }
}
/* ═══ RESTORED §E — PAGE CHROME (wrapped + find-your-pulse + manifesto + genre) ═══ */
/* ============================================
E.1 · PERSONAL WRAPPED POSTER (wrapped.html)
--------------------------------------------
Personal poster generator. Up to 5 artist
picks fold into a "Pulse of Gaia · Earth's
heartbeat" SVG. Picker is tactile; the
poster mount frames the 3:4 SVG; CTAs
match Pulse house style.
============================================ */
[data-wrapped-root] {
position: relative;
isolation: isolate;
}
[data-wrapped-root]::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(60% 60% at 85% 0%, var(--pg-green) 0%, transparent 60%),
radial-gradient(50% 50% at 0% 100%, var(--pg-blue) 0%, transparent 65%);
opacity: .08;
z-index: -1;
pointer-events: none;
}
/* Artist picker grid — tactile cards, dark base */
[data-wrapped-pick] {
list-style: none;
margin: 0;
}
[data-wrapped-pick] .wrapped-card {
position: relative;
border: 1px solid var(--ink-08);
background: rgba(0,0,0,.32);
transition:
border-color .35s var(--motion-easing),
transform .35s var(--motion-easing),
background .35s var(--motion-easing);
will-change: transform, border-color;
}
[data-wrapped-pick] .wrapped-card:hover {
border-color: var(--paper-dim);
transform: translateY(-2px);
}
/* The shared selected-state ruleset. wrapped.html ships inline
overrides for .is-selected — we extend with a pulse-green tint
so the selection ritual reads as a confirmed pick. */
[data-wrapped-pick] [data-artist].is-selected,
[data-wrapped-pick] .wrapped-card.is-selected {
border-color: var(--pg-green);
background: rgba(78,121,75,.10);
box-shadow:
inset 0 0 0 1px rgba(78,121,75,.25),
0 0 0 1px rgba(78,121,75,.15);
}
[data-wrapped-pick] [data-artist].is-selected::after {
content: "";
position: absolute;
inset: auto var(--s-1) var(--s-1) auto;
width: 8px; height: 8px;
background: var(--pg-green);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(78,121,75,.20);
pointer-events: none;
}
.wrapped-check {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--paper-dim);
transition: color .25s var(--motion-easing);
}
/* Poster preview mount — 3:4 portrait frame for the generated SVG */
[data-wrapped-preview] {
position: relative;
border: 1px solid var(--ink-08);
background:
linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.85)),
radial-gradient(50% 60% at 50% 0%, rgba(78,121,75,.18) 0%, transparent 70%);
box-shadow: 0 32px 80px rgba(0,0,0,.55);
}
[data-wrapped-preview] svg,
[data-wrapped-preview] canvas {
width: 100%;
height: auto;
max-width: 540px;
aspect-ratio: 3 / 4;
display: block;
margin: 0 auto;
}
/* CTAs — generate button gets the heavy treatment, download is ghost */
[data-wrapped-generate] {
font-family: var(--f-mono);
letter-spacing: .14em;
text-transform: uppercase;
border: 1px solid var(--pg-green);
color: var(--paper);
background: rgba(78,121,75,.18);
transition:
background .25s var(--motion-easing),
border-color .25s var(--motion-easing),
transform .25s var(--motion-easing);
}
[data-wrapped-generate]:hover {
background: var(--pg-green);
color: var(--paper);
transform: translateY(-1px);
}
[data-wrapped-download] {
font-family: var(--f-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--paper-dim);
border: 1px dashed var(--ink-24);
transition: color .25s var(--motion-easing), border-color .25s var(--motion-easing);
}
[data-wrapped-download]:hover {
color: var(--paper);
border-color: var(--paper);
}
@media (max-width: 540px) {
[data-wrapped-pick] { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ============================================
E.2 · FIND YOUR PULSE QUIZ (find-your-pulse.html)
--------------------------------------------
Four-question ritual. Each [data-quiz-q]
slides up + fades on reveal. The result
block stages a dramatic entrance. Answer
buttons get a magnetic-pulse hover.
============================================ */
[data-quiz-root] {
position: relative;
isolation: isolate;
}
[data-quiz-root]::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(60% 60% at 100% 0%, var(--pg-green) 0%, transparent 60%),
radial-gradient(50% 50% at 0% 100%, var(--pg-blue) 0%, transparent 60%);
opacity: .08;
z-index: -1;
pointer-events: none;
}
/* Each question fades + lifts on reveal. The data-quiz-q attribute
is the only thing JS toggles (via `hidden`), so we drive animation
off the not-hidden state. */
[data-quiz-q] {
animation: pog-quizOptIn .65s var(--motion-easing) both;
}
[data-quiz-q][hidden] { animation: none; }
@keyframes pog-quizOptIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* Stagger each answer button inside the question. nth-of-type targets
the columns of the grid (already declared inline as 2-col). */
[data-quiz-q] .quiz-answer {
opacity: 0;
animation: pog-quizOptIn .55s var(--motion-easing) forwards;
transition:
border-color .25s var(--motion-easing),
background .25s var(--motion-easing),
transform .25s var(--motion-easing),
color .25s var(--motion-easing);
}
[data-quiz-q] .quiz-answer:nth-of-type(1) { animation-delay: .10s; }
[data-quiz-q] .quiz-answer:nth-of-type(2) { animation-delay: .18s; }
[data-quiz-q] .quiz-answer:nth-of-type(3) { animation-delay: .26s; }
[data-quiz-q] .quiz-answer:nth-of-type(4) { animation-delay: .34s; }
/* Magnetic-pulse hover for answer buttons */
.quiz-answer:hover {
border-color: var(--pg-green) !important;
background: rgba(78,121,75,.12) !important;
transform: translateY(-2px);
color: var(--paper);
}
.quiz-answer:active { transform: translateY(0); }
.quiz-answer:focus-visible {
outline: 2px solid var(--pg-green);
outline-offset: 3px;
}
/* Progress dots — current dot pulses subtly */
.quiz-dot {
transition:
background .35s var(--motion-easing),
border-color .35s var(--motion-easing),
transform .35s var(--motion-easing);
}
.quiz-dot[data-quiz-progress].is-current,
.quiz-dot[data-quiz-progress][data-current] {
animation: pog-quizDotPulse 1.6s var(--motion-easing) infinite;
}
@keyframes pog-quizDotPulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232,230,225,.45); }
50% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(232,230,225,0); }
}
/* Result reveal — dramatic, split-headline-style staggered fade */
[data-quiz-result] {
position: relative;
isolation: isolate;
}
[data-quiz-result]:not([hidden]) {
animation: pog-quizResultIn .9s var(--motion-easing) both;
}
[data-quiz-result]:not([hidden])::before {
content: "";
position: absolute; inset: -1px;
background:
radial-gradient(70% 60% at 100% 0%, var(--pg-green) 0%, transparent 60%),
radial-gradient(50% 50% at 0% 100%, var(--pg-blue) 0%, transparent 60%);
opacity: .12;
z-index: -1;
pointer-events: none;
}
@keyframes pog-quizResultIn {
from { opacity: 0; transform: translateY(24px) scale(.97); filter: blur(6px); }
to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
/* Splitting.js compatibility — if char spans exist, stagger them.
Falls back gracefully to the block animation above. */
[data-quiz-result] .char {
display: inline-block;
opacity: 0;
animation: pog-quizResultChar .6s var(--motion-easing) forwards;
animation-delay: calc(.4s + (var(--char-index, 0) * .03s));
}
@keyframes pog-quizResultChar {
from { opacity: 0; transform: translateY(.6em); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
[data-quiz-q],
[data-quiz-q] .quiz-answer,
[data-quiz-result]:not([hidden]),
[data-quiz-result] .char,
.quiz-dot[data-quiz-progress][data-current] {
animation: none;
opacity: 1;
transform: none;
filter: none;
}
}
/* ============================================
E.3 · MANIFESTO PAGE (manifesto.html)
--------------------------------------------
Long-form editorial. Numbered clauses with
large display numerals on the left, body on
the right. Generous vertical rhythm. Closing
block in italic paper-dim signature.
============================================ */
.manifesto-clause {
display: grid;
grid-template-columns: minmax(140px, 220px) 1fr;
gap: var(--s-5);
padding: var(--s-7) var(--pad-x);
border-bottom: 1px solid var(--ink-08);
align-items: start;
position: relative;
isolation: isolate;
max-width: var(--container-max);
margin: 0 auto;
}
.manifesto-clause + .manifesto-clause { border-top: 0; }
.manifesto-clause__num {
font-family: var(--f-display);
font-weight: 200;
font-size: clamp(5rem, 12vw, 12rem);
line-height: .8;
letter-spacing: -.04em;
color: var(--paper);
margin: 0;
position: sticky;
top: clamp(80px, 12vh, 140px);
/* Stroked numeral — keeps it monumental without overpowering body */
-webkit-text-stroke: 1px var(--paper-dim);
text-stroke: 1px var(--paper-dim);
color: transparent;
}
.manifesto-clause__body {
max-width: 65ch;
display: grid;
gap: var(--s-3);
}
.manifesto-clause__body .eyebrow {
color: var(--pg-green);
}
.manifesto-clause__body h2 {
font-family: var(--f-display);
font-weight: 300;
font-size: clamp(2rem, 5vw, 4.5rem);
line-height: .92;
letter-spacing: -.03em;
margin: 0;
color: var(--paper);
text-wrap: balance;
}
.manifesto-clause__body h2 em {
font-style: italic;
font-weight: 200;
color: var(--paper-dim);
}
.manifesto-clause__body .lede {
font-family: var(--f-display);
font-style: italic;
font-weight: 200;
font-size: clamp(1.3rem, 2.2vw, 1.7rem);
line-height: 1.4;
color: var(--paper);
margin: 0;
text-wrap: balance;
}
.manifesto-clause__body p {
font-family: var(--f-body);
font-weight: 300;
font-size: 17px;
line-height: 1.7;
color: var(--paper-dim);
margin: 0;
}
.manifesto-clause__body p strong { color: var(--paper); font-weight: 500; }
.manifesto-signature {
padding: var(--s-7) var(--pad-x);
text-align: center;
display: grid;
gap: var(--s-3);
justify-items: center;
max-width: 720px;
margin: 0 auto;
font-family: var(--f-display);
font-style: italic;
font-weight: 200;
font-size: clamp(1.1rem, 1.6vw, 1.4rem);
line-height: 1.5;
color: var(--paper-dim);
}
.manifesto-signature strong {
color: var(--paper);
font-weight: 300;
font-style: normal;
}
.manifesto-signature::before {
content: "";
display: block;
width: 48px; height: 1px;
background: var(--pg-green);
margin: 0 auto var(--s-2);
}
@media (max-width: 900px) {
.manifesto-clause { grid-template-columns: 1fr; gap: var(--s-3); }
.manifesto-clause__num {
position: relative;
top: 0;
font-size: clamp(4rem, 18vw, 7rem);
}
}
/* ============================================
E.4 · GENRE LANDING PAGES
(rhythm.html · digital.html · gaia.html)
--------------------------------------------
Each per-pulse page reads its accent via the
data-pulse attribute. The accent threads
through hero, grid, and pill chrome.
============================================ */
.genre-page {
--genre-accent: var(--pg-green);
--genre-accent-soft: rgba(78,121,75,.14);
position: relative;
}
.genre-page[data-pulse="rhythm"] { --genre-accent: var(--pg-green); --genre-accent-soft: rgba(78,121,75,.14); }
.genre-page[data-pulse="digital"] { --genre-accent: var(--pg-blue); --genre-accent-soft: rgba(84,113,119,.16); }
.genre-page[data-pulse="gaia"] { --genre-accent: var(--paper-dim); --genre-accent-soft: rgba(168,164,153,.12); }
/* Hero — distinct treatment per pulse, accent driven */
.genre-hero {
position: relative;
isolation: isolate;
padding: clamp(120px, 18vh, 200px) var(--pad-x) var(--s-6);
border-bottom: 1px solid var(--ink-08);
overflow: hidden;
}
.genre-hero::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(50% 60% at 90% 10%, var(--genre-accent) 0%, transparent 60%),
radial-gradient(60% 50% at 0% 90%, var(--genre-accent) 0%, transparent 65%);
opacity: .10;
z-index: -1;
}
/* Rhythm hero — low-frequency wave SVG accent (etched, pg-green).
Renders the wave as a generated background using SVG data-URI so no
markup change is needed. The wave sits behind the headline. */
.genre-page[data-pulse="rhythm"] .genre-hero::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 8%;
height: 120px;
pointer-events: none;
z-index: -1;
opacity: .35;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200% 100%;
background-repeat: repeat-x;
background-position: 0 50%;
animation: pog-genreWave 18s linear infinite;
}
@keyframes pog-genreWave {
from { background-position: 0 50%; }
to { background-position: 200% 50%; }
}
/* Digital hero — scanline overlay in pg-blue */
.genre-page[data-pulse="digital"] .genre-hero::after {
content: "";
position: absolute; inset: 0;
pointer-events: none;
z-index: -1;
opacity: .14;
background:
repeating-linear-gradient(
to bottom,
transparent 0,
transparent 3px,
rgba(84,113,119,.55) 3px,
rgba(84,113,119,.55) 4px
);
mix-blend-mode: screen;
animation: pog-genreGlitch 6s steps(20) infinite;
}
@keyframes pog-genreGlitch {
0%, 96%, 100% { transform: translate3d(0,0,0); }
97% { transform: translate3d(-2px, 1px, 0); }
98% { transform: translate3d(3px, -1px, 0); }
99% { transform: translate3d(-1px, 2px, 0); }
}
/* Gaia hero — soft organic blob particles, paper-dim with green tint */
.genre-page[data-pulse="gaia"] .genre-hero::after {
content: "";
position: absolute; inset: 0;
pointer-events: none;
z-index: -1;
opacity: .55;
background:
radial-gradient(2px 2px at 12% 22%, rgba(168,164,153,.55) 0, transparent 60%),
radial-gradient(2px 2px at 78% 18%, rgba(168,164,153,.45) 0, transparent 60%),
radial-gradient(3px 3px at 38% 64%, rgba(78,121,75,.40) 0, transparent 60%),
radial-gradient(2px 2px at 88% 72%, rgba(168,164,153,.50) 0, transparent 60%),
radial-gradient(3px 3px at 22% 84%, rgba(78,121,75,.30) 0, transparent 60%),
radial-gradient(180px 200px at 60% 40%, rgba(78,121,75,.12) 0, transparent 70%),
radial-gradient(220px 240px at 18% 70%, rgba(168,164,153,.10) 0, transparent 70%);
filter: blur(.4px);
animation: pog-genreParticles 24s ease-in-out infinite alternate;
}
@keyframes pog-genreParticles {
from { transform: translate3d(0, 0, 0) scale(1); }
to { transform: translate3d(-12px, -8px, 0) scale(1.04); }
}
/* Pulse pill — accent tag indicating which pulse this is */
.genre-pulse-pill {
display: inline-flex;
align-items: center;
gap: .55em;
padding: 6px 12px;
border: 1px solid var(--genre-accent);
background: var(--genre-accent-soft);
border-radius: 999px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--paper);
}
.genre-pulse-pill::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--genre-accent);
box-shadow: 0 0 0 3px var(--genre-accent-soft);
}
/* Bento-style grid for the genre body */
.genre-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-2);
padding: var(--s-6) var(--pad-x);
max-width: var(--container-max);
margin: 0 auto;
}
@media (min-width: 720px) {
.genre-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
.genre-grid { grid-template-columns: repeat(3, 1fr); }
}
.genre-grid > * {
border: 1px solid var(--ink-08);
background: rgba(0,0,0,.32);
padding: var(--s-3);
transition:
border-color .35s var(--motion-easing),
transform .35s var(--motion-easing),
background .35s var(--motion-easing);
}
.genre-grid > a:hover,
.genre-grid > button:hover {
border-color: var(--genre-accent);
background: var(--genre-accent-soft);
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
.genre-page[data-pulse="rhythm"] .genre-hero::after,
.genre-page[data-pulse="digital"] .genre-hero::after,
.genre-page[data-pulse="gaia"] .genre-hero::after { animation: none; }
}
/* ═══ RESTORED §F — HOME ADDITIONS ═══ */
/* Three-Worlds navigator · Listen-first Spotify · Experience grid · Arena figures */
/* ───── Three-Worlds navigator ───── */
.three-worlds {
padding: var(--s-7) 0;
border-top: 1px solid var(--ink-08);
border-bottom: 1px solid var(--ink-08);
background:
radial-gradient(circle at 12% 18%, rgba(78,121,75,.06), transparent 55%),
radial-gradient(circle at 88% 80%, rgba(84,113,119,.06), transparent 55%),
rgba(0,0,0,.18);
}
.world-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-3);
padding: 0 var(--pad-x);
}
.world-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--s-2);
padding: var(--s-5) var(--s-4) var(--s-4);
border: 1px solid var(--ink-08);
background: rgba(0,0,0,.4);
color: var(--paper);
text-decoration: none;
overflow: hidden;
isolation: isolate;
transition:
border-color .45s var(--motion-easing),
transform .45s var(--motion-easing),
background .45s var(--motion-easing);
}
.world-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: .0;
transition: opacity .45s var(--motion-easing);
pointer-events: none;
}
.world-card[data-pulse="rhythm"]::before { background: radial-gradient(circle at 20% 18%, rgba(78,121,75,.28), transparent 60%); }
.world-card[data-pulse="digital"]::before { background: radial-gradient(circle at 80% 20%, rgba(84,113,119,.28), transparent 60%); }
.world-card[data-pulse="gaia"]::before { background: radial-gradient(circle at 50% 80%, rgba(168,164,153,.22), transparent 60%); }
.world-card:hover,
.world-card:focus-visible {
transform: translateY(-3px);
outline: none;
}
.world-card[data-pulse="rhythm"]:hover,
.world-card[data-pulse="rhythm"]:focus-visible { border-color: var(--pg-green); }
.world-card[data-pulse="digital"]:hover,
.world-card[data-pulse="digital"]:focus-visible { border-color: var(--pg-blue); }
.world-card[data-pulse="gaia"]:hover,
.world-card[data-pulse="gaia"]:focus-visible { border-color: var(--paper-dim); }
.world-card:hover::before,
.world-card:focus-visible::before { opacity: 1; }
.world-card__glyph {
width: 56px;
height: 56px;
display: inline-flex;
margin-bottom: var(--s-2);
opacity: .85;
}
.world-card[data-pulse="rhythm"] .world-card__glyph { color: var(--pg-green); }
.world-card[data-pulse="digital"] .world-card__glyph { color: var(--pg-blue); }
.world-card[data-pulse="gaia"] .world-card__glyph { color: #b6c6a6; }
.world-card__eyebrow {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--paper-dim);
}
.world-card__title {
font-family: var(--f-display);
font-weight: 300;
font-size: clamp(26px, 2.8vw, 36px);
letter-spacing: -.012em;
line-height: 1.05;
color: var(--paper);
}
.world-card__title em {
font-style: italic;
font-weight: 200;
color: var(--paper-dim);
}
.world-card__lede {
font-family: var(--f-body);
font-weight: 300;
font-size: 14.5px;
line-height: 1.55;
color: var(--paper);
opacity: .82;
}
.world-card__gates {
list-style: none;
margin-top: auto;
padding-top: var(--s-3);
border-top: 1px dashed var(--ink-08);
display: flex;
flex-direction: column;
gap: 6px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--paper-dim);
}
.world-card__cta {
margin-top: var(--s-3);
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--paper);
display: inline-flex;
align-items: center;
gap: 8px;
}
.world-card__cta span {
transition: transform .35s var(--motion-easing);
display: inline-block;
}
.world-card:hover .world-card__cta span,
.world-card:focus-visible .world-card__cta span { transform: translateX(4px); }
@media (max-width: 980px) {
.world-grid { grid-template-columns: 1fr; }
}
/* ───── Listen-first · Spotify ───── */
.listen-first {
padding: var(--s-7) var(--pad-x);
border-top: 1px solid var(--ink-08);
}
.spotify-frame {
max-width: 980px;
margin: 0 auto;
position: relative;
border: 1px solid var(--pg-green);
background:
linear-gradient(180deg, rgba(78,121,75,.06), rgba(0,0,0,.4));
padding: 14px;
transition:
border-color .35s var(--motion-easing),
box-shadow .35s var(--motion-easing),
transform .35s var(--motion-easing);
}
.spotify-frame::before {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(78,121,75,.18);
margin: 6px;
pointer-events: none;
}
.spotify-frame:hover {
border-color: #6f9669;
box-shadow: 0 18px 60px -28px rgba(78,121,75,.55);
transform: translateY(-2px);
}
.spotify-frame iframe {
display: block;
width: 100%;
border: 0;
background: #000;
border-radius: 0;
}
/* ───── Experience grid · More than gates ───── */
.experience {
padding: var(--s-7) 0;
border-top: 1px solid var(--ink-08);
}
.experience-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-3);
padding: 0 var(--pad-x);
}
.experience-card {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
padding: var(--s-4);
border: 1px solid var(--ink-08);
background: rgba(0,0,0,.32);
color: var(--paper);
text-decoration: none;
transition:
border-color .35s var(--motion-easing),
transform .35s var(--motion-easing),
background .35s var(--motion-easing);
}
.experience-card:hover,
.experience-card:focus-visible {
border-color: var(--pg-green);
background: rgba(78,121,75,.06);
transform: translateY(-2px);
outline: none;
}
.experience-card__icon {
width: 28px;
height: 28px;
display: inline-flex;
color: var(--paper-dim);
margin-bottom: var(--s-1);
transition: color .35s var(--motion-easing);
}
.experience-card:hover .experience-card__icon,
.experience-card:focus-visible .experience-card__icon { color: var(--pg-green); }
.experience-card__eyebrow {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--paper-dim);
}
.experience-card__title {
font-family: var(--f-display);
font-weight: 300;
font-size: clamp(20px, 2vw, 26px);
letter-spacing: -.005em;
color: var(--paper);
}
.experience-card__body {
font-family: var(--f-body);
font-weight: 300;
font-size: 14px;
line-height: 1.55;
color: var(--paper);
opacity: .8;
flex: 1;
}
.experience-card__cta {
margin-top: var(--s-2);
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--paper);
display: inline-flex;
align-items: center;
gap: 8px;
}
.experience-card__cta span {
transition: transform .35s var(--motion-easing);
display: inline-block;
}
.experience-card:hover .experience-card__cta span,
.experience-card:focus-visible .experience-card__cta span { transform: translateX(4px); }
@media (max-width: 980px) {
.experience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.experience-grid { grid-template-columns: 1fr; }
}
/* ───── Arena figures · placeholder photography ───── */
.arena-figure {
position: relative;
margin: 0;
width: 100%;
overflow: hidden;
background: #050505;
border-top: 1px solid var(--ink-08);
border-bottom: 1px solid var(--ink-08);
}
.arena-figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(.85) contrast(1.05) brightness(.78) sepia(.12) hue-rotate(60deg);
transition: filter .8s var(--motion-easing), transform .8s var(--motion-easing);
}
.arena-figure::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 35%, transparent 60%, rgba(0,0,0,.7) 100%),
radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,.35) 100%),
linear-gradient(0deg, rgba(78,121,75,.08), rgba(78,121,75,.08));
pointer-events: none;
}
.arena-figure:hover img {
filter: grayscale(.5) contrast(1.05) brightness(.85) sepia(.08) hue-rotate(60deg);
transform: scale(1.01);
}
.arena-figure figcaption {
position: absolute;
left: var(--pad-x);
bottom: var(--s-3);
z-index: 2;
display: flex;
flex-direction: column;
gap: 4px;
max-width: 520px;
color: var(--paper);
}
.arena-figure figcaption .lbl {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--paper-dim);
}
.arena-figure figcaption .cap {
font-family: var(--f-display);
font-weight: 300;
font-size: clamp(14px, 1.4vw, 18px);
letter-spacing: -.005em;
color: var(--paper);
opacity: .92;
}
.arena-figure--hero {
aspect-ratio: 16 / 7;
max-height: 72vh;
}
.arena-figure--breaker {
aspect-ratio: 16 / 6;
max-height: 60vh;
}
.arena-figure--epilogue {
aspect-ratio: 16 / 5.2;
max-height: 48vh;
border-bottom: 0;
}
@media (max-width: 720px) {
.arena-figure--hero { aspect-ratio: 4 / 5; max-height: 80vh; }
.arena-figure--breaker { aspect-ratio: 4 / 4; }
.arena-figure--epilogue { aspect-ratio: 16 / 7; }
.arena-figure figcaption { left: var(--pad-x); right: var(--pad-x); bottom: var(--s-2); }
}
@media (prefers-reduced-motion: reduce) {
.arena-figure img,
.world-card,
.experience-card,
.spotify-frame { transition: none; }
.arena-figure:hover img { transform: none; }
}
/* ═══ RESTORED §G — GALLERY LIGHTBOX + PRESS EXCERPTS + SCROLLTRIGGER ═══ */
/* ─── §G.1 Gallery lightbox overlay ─── */
.lightbox {
position: fixed;
inset: 0;
z-index: 90;
background: rgba(0, 0, 0, 0.96);
display: flex;
align-items: center;
justify-content: center;
padding: var(--s-4) var(--s-5);
opacity: 0;
transition: opacity 0.22s ease;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.lightbox.is-open {
opacity: 1;
}
.lightbox[hidden] {
display: none;
}
.lightbox__stage {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-2);
max-width: 90vw;
max-height: 90vh;
}
.lightbox__img {
max-width: 90vw;
max-height: 78vh;
object-fit: contain;
display: block;
filter: grayscale(1) contrast(1.08);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.lightbox__caption {
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: 0.06em;
color: var(--paper);
text-align: center;
max-width: 64ch;
line-height: 1.5;
}
.lightbox__count {
position: absolute;
top: var(--s-3);
left: var(--s-3);
margin: 0;
font-size: 11px;
letter-spacing: 0.18em;
color: var(--paper-dim);
}
.lightbox__close,
.lightbox__nav-prev,
.lightbox__nav-next {
position: absolute;
background: transparent;
border: 1px solid rgba(232, 230, 225, 0.24);
color: var(--paper);
width: 44px;
height: 44px;
cursor: pointer;
font-family: var(--f-mono);
font-size: 20px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.lightbox__close:hover,
.lightbox__nav-prev:hover,
.lightbox__nav-next:hover {
border-color: var(--pg-green);
background: rgba(78, 121, 75, 0.12);
}
.lightbox__close {
top: var(--s-3);
right: var(--s-3);
}
.lightbox__nav-prev {
left: var(--s-3);
top: 50%;
transform: translateY(-50%);
}
.lightbox__nav-next {
right: var(--s-3);
top: 50%;
transform: translateY(-50%);
}
.lightbox__nav-prev:hover,
.lightbox__nav-next:hover {
transform: translateY(-50%) scale(1.06);
}
@media (max-width: 640px) {
.lightbox {
padding: var(--s-3) var(--s-2);
}
.lightbox__img {
max-height: 70vh;
}
.lightbox__close,
.lightbox__nav-prev,
.lightbox__nav-next {
width: 38px;
height: 38px;
font-size: 17px;
}
}
/* ─── §G.2 Press excerpts (expandable) ─── */
.press-excerpt__full {
margin-top: var(--s-3);
padding: var(--s-3);
border-left: 2px solid var(--pg-green);
background: rgba(78, 121, 75, 0.05);
color: var(--paper);
font-family: var(--f-body);
font-size: 14.5px;
line-height: 1.65;
}
.press-excerpt__full p {
margin: 0 0 var(--s-2);
}
.press-excerpt__full p:last-child {
margin-bottom: 0;
}
.press-excerpt__full strong {
color: var(--paper);
font-weight: 500;
}
.press-excerpt__meta {
margin-top: var(--s-3);
padding-top: var(--s-2);
border-top: 1px solid rgba(232, 230, 225, 0.12);
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--paper-dim);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--s-2);
}
.press-excerpt__meta dt {
color: var(--paper-dim);
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.12em;
margin-bottom: 2px;
}
.press-excerpt__meta dd {
margin: 0;
color: var(--paper);
}
/* ─── §G.3 ScrollTrigger-driven adjustments ─── */
/* Pin-friendly base for hero video so parallax translation does not crop badly */
.hero__video-bg [data-hero-video] {
will-change: transform;
}
[data-reveal] > .eyebrow,
[data-reveal] > .headline,
[data-reveal] > .headline-xl,
[data-reveal] > .lede {
will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
.hero__video-bg [data-hero-video],
[data-reveal] > .eyebrow,
[data-reveal] > .headline,
[data-reveal] > .headline-xl,
[data-reveal] > .lede {
will-change: auto;
transform: none !important;
opacity: 1 !important;
}
}