/* welcome.css -- the teaser page's look (welcome.html). Colours come from tokens.css by name.
The sections called "stage" (the hero, the real room, the join box) are lit by the logo's violet,
blue and cyan. They follow Day and Night like the rest of the page (JR, 2026-10-15): dark with
coloured lights at night, warm paper with soft washes of the same colours by day. The stage's
colours for each look are in tokens.css, under "THE TEASER PAGE" and "THE DAY STAGE". Movement: welcome.js; all of it stops for anyone
whose computer asks for reduced motion (the block at the bottom). */
/* ---------------- the frame ---------------- */
html { scroll-behavior: smooth; }
body.welcome { overflow-x: hidden; background: var(--bg); }
.welcome .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.welcome .wrap.narrow { max-width: 820px; }
.welcome h1, .welcome h2, .welcome h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .01em; font-weight: 700; margin: 0; }
.welcome h2 { font-size: clamp(34px, 5vw, 64px); line-height: 1.02; margin: 12px 0 32px; }
.welcome .eyebrow { font: 600 var(--t-small)/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0; }
.welcome .lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; max-width: 60ch; }
.welcome .grad { background: var(--logo-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.welcome .soft { color: var(--ink-soft); }
@media (max-width: 600px) { .welcome .wrap { padding: 0 16px; } }
/* the thin bar across the very top that fills as you scroll */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--logo-grad); z-index: 60; }
/* ---------------- the closed beta strip (ui/beta.js) ---------------- */
/* A thin dark band fixed across the very top, above the bar (JR, 2026-10-15, after brightlights.live):
a small spaced-out "CLOSED BETA" label, one line, an email box with an arrow, Privacy, and an X.
It is --beta-h tall (tokens.css); the bar sits that far down, and the top of each page leaves that
much more room. Closed, it is hidden and --beta-h is 0, so everything moves back up. On a phone only
the label and the link show. */
.beta { position: fixed; top: 0; left: 0; right: 0; height: var(--beta-h); z-index: 51; background: var(--beta-bg); color: var(--beta-ink);
border-bottom: 1px solid var(--beta-line); font-size: var(--t-small); overflow: hidden; }
:root[data-beta="closed"] .beta { display: none; }
.beta-in { display: flex; align-items: center; gap: 16px; height: 100%; }
.beta-tag { flex: none; font: 500 var(--t-micro)/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--beta-soft); }
.beta-msg { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beta-msg a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--logo-cyan) 70%, transparent); }
.beta-msg a:hover { text-decoration-color: var(--logo-cyan); }
.beta-form { margin-left: auto; display: flex; flex: none; }
.beta-form input { width: 200px; height: 26px; padding: 0 10px; border: 1px solid var(--beta-line); border-right: 0; border-radius: 6px 0 0 6px; background: rgba(255,255,255,.06);
color: var(--beta-ink); font: 400 var(--t-small)/1 var(--font); }
.beta-form input::placeholder { color: var(--beta-soft); }
.beta-form input:focus { outline: none; border-color: var(--logo-cyan); }
.beta-form button { width: 30px; height: 26px; border: 0; border-radius: 0 6px 6px 0; background: var(--logo-grad); color: #fff; font: 600 14px/1 var(--font); cursor: pointer; }
.beta-priv { flex: none; color: var(--beta-soft); font-size: var(--t-micro); text-decoration: underline; text-underline-offset: 3px; }
.beta-priv:hover { color: var(--beta-ink); }
.beta-x { flex: none; width: 28px; height: 28px; margin-right: -6px; border: 0; border-radius: 6px; background: none; color: var(--beta-soft); font: 400 20px/1 var(--font); cursor: pointer; }
.beta-x:hover { color: var(--beta-ink); background: rgba(255,255,255,.08); }
.beta-x:focus-visible, .beta-form button:focus-visible { outline: 2px solid var(--logo-cyan); outline-offset: 2px; }
@media (max-width: 900px) { .beta-form, .beta-priv { display: none; } .beta-x { margin-left: auto; } }
@media (max-width: 600px) { .beta-long { display: none; } .beta-in { gap: 12px; } }
/* THE CLOSED BETA LINE under the opening screen's buttons: small, spaced, in the typewriter face */
.beta-line { margin: 0 0 10px; font: 400 var(--t-small)/1.5 var(--mono); letter-spacing: .04em; color: var(--stage-soft); }
/* ---------------- the bar ---------------- */
.bar { position: fixed; top: var(--beta-h); left: 0; right: 0; z-index: 50; transition: background var(--dur-move), box-shadow var(--dur-move), border-color var(--dur-move); border-bottom: 1px solid transparent; }
.bar-in { display: flex; align-items: center; gap: 24px; height: 68px; }
.bar.solid { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .mark { width: 34px; height: 34px; filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--logo-violet) 45%, transparent)); }
.brand .word { text-decoration: none; font: 500 22px/1 var(--font); letter-spacing: -.02em; color: var(--stage-ink); }
.brand .word b { font-weight: 800; }
.bar.solid .brand .word { color: var(--ink); }
.bar-links { display: flex; gap: 24px; margin-left: 16px; }
.bar-links a { color: var(--stage-soft); text-decoration: none; font-size: var(--t-small); font-weight: 500; transition: color var(--dur-fast); }
.bar-links a:hover { color: var(--stage-ink); }
.bar.solid .bar-links a { color: var(--ink-soft); }
.bar.solid .bar-links a:hover { color: var(--ink); }
.bar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.bar .btn-quiet { color: var(--stage-soft); }
.bar.solid .btn-quiet { color: var(--ink-soft); }
@media (max-width: 900px) { .bar-links { display: none; } }
@media (max-width: 560px) { .bar .theme-btn { display: none; } .brand .word { font-size: 19px; } }
/* a phone: the bar's words stay on one line; "Get early access" shortens to "Get access" */
.bar-right .btn { white-space: nowrap; }
@media (max-width: 420px) { .bar-in { gap: 10px; } .bar-right { gap: 2px; } .bar .cta .long { display: none; } .bar .btn-quiet { padding: 0 10px; } }
/* the logo mark is the music switch: a plain button around it, a small lift on hover, and a soft
ring while the music plays */
.music-btn { display: inline-grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; transition: transform var(--dur-fast); }
.music-btn:hover { transform: scale(1.08); }
.music-btn:focus-visible { outline: 2px solid var(--logo-cyan); outline-offset: 3px; }
.music-btn[aria-pressed="true"] .mark { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--logo-cyan) 70%, transparent)); }
/* the logo's bars stand still while the music is off; with it on, welcome.js moves them to the
music itself (JR, 2026-09-23: "Can the bars on the logo only move while the music is playing?") */
/* ---------------- the sign-in ticket under "Get early access" ---------------- */
/* (JR, 2026-09-27: when you click "Sign In" the ticket sign in box fades in under the "get early
access"; and then: "make that ticket sign in ticket way cooler ... Looks plain and boring".)
WHERE IT SITS. The frame is fixed to the window, as wide as the window, and cannot be clicked.
How far down it hangs is worked out by welcome.js as the ticket opens ("fit the gap"): half way
between the "Get early access" button and the Box office card (JR, 2026-09-27: "Bring it down so
its half way between the get early access button and the box office Card"). Where there is no
card to measure to, it hangs just under the bar, 76 down (the bar is 68 tall, and 8 of air).
The "wrap" inside the frame is the bar's own frame, and the ticket is pushed to its right end,
so the ticket's right edge is the button's. Closed,
it is fully see-through and also "hidden", so the Tab key cannot land in its boxes.
HOW IT ARRIVES. It fades in over a third of a second, and as it fades it swings down from the
button and settles (it starts tipped back 16 degrees, hinged at its top right corner). Then one
band of light crosses it, the way a ticket's shiny strip catches a lamp.
The glow under it is the logo's violet. */
.signin-drop { position: fixed; top: var(--drop-top, 76px); left: 0; right: 0; z-index: 49; pointer-events: none; opacity: 0; visibility: hidden;
transition: opacity .35s ease-in, visibility 0s linear .35s; }
.signin-drop.open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; }
.signin-drop .wrap { display: flex; justify-content: flex-end;
filter: drop-shadow(0 24px 50px rgba(0,0,0,.55)) drop-shadow(0 0 36px color-mix(in srgb, var(--logo-violet) 38%, transparent)); }
.signin-drop.open .ticket { pointer-events: auto; }
/* THE TICKET ITSELF: a printed box office ticket (JR, 2026-09-27: "find a ticket design you can
graft on for a more accurate look"). The arrangement is that of real concert tickets (it is set
out in welcome.html, above the ticket). Here is how each part is drawn:
the stock cream paper, with "MUNISTAGE" printed faintly all over it on a slant, the way a
ticket seller's name is printed into the paper so a copy can be told from the
real thing
the printing the typewriter face (Roboto Mono), capitals, dark ink; the lines and the tiny
captions in the blue of a printed form
the wash a pale blue printed across the stub
the stripes two thin stripes of the logo's gradient, where a real ticket has a colour band
It is never taller than the window: on a small screen it scrolls inside itself.
THE SAME TICKET IS SHOWN IN TWO PLACES (welcome.js carries it from one to the other): under the
bar, and in place of the invitation card at the foot of the page. So the rules for how it LOOKS
are written for the ticket itself ("stock", the paper a ticket is printed on), and only the rules
for where it sits and how it arrives are written for each place. */
.ticket.stock { color: var(--paper-ink); border-radius: 8px; box-shadow: none; overflow: hidden auto; max-height: calc(100vh - 92px);
font-family: var(--mono); text-transform: uppercase;
background:
url("data:image/svg+xml;utf8,"),
var(--paper);
/* THE NOTCHES. On the sign-in page the two notches are dots painted the colour of the page behind.
Here the ticket floats over whatever the visitor has scrolled to, so there is no one colour to
paint them: the two half circles are cut out of the ticket instead (a mask), and whatever is
behind shows through. 112 is the width of the stub. */
-webkit-mask: radial-gradient(circle at calc(100% - 112px) 0, transparent 9px, #000 9.5px), radial-gradient(circle at calc(100% - 112px) 100%, transparent 9px, #000 9.5px);
mask: radial-gradient(circle at calc(100% - 112px) 0, transparent 9px, #000 9.5px), radial-gradient(circle at calc(100% - 112px) 100%, transparent 9px, #000 9.5px);
-webkit-mask-composite: source-in; mask-composite: intersect; }
/* under the bar it starts tipped back and a touch small, and settles as it fades in */
.signin-drop .ticket { transform-origin: 100% 0; transform: perspective(900px) rotateX(-16deg) translateY(-10px) scale(.98);
transition: transform .45s var(--ease); }
/* settled: its full size, or a little smaller where welcome.js has measured that the space between
the bar and the Box office card is less than the ticket is tall (--fit, "fit the gap") */
.signin-drop.open .ticket { transform: scale(var(--fit, 1)); }
/* (the shared ticket uses this layer for a painted notch; this ticket's notches are cut, so it is off) */
.ticket.stock::before { display: none; }
/* the band of light that crosses the ticket once, each time it opens */
.ticket.stock::after { content: ""; display: block; position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; pointer-events: none;
background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); }
.signin-drop.open .ticket::after, .join-swap.signing .ticket::after { animation: foil 1.1s var(--ease) .2s 1 both; }
@keyframes foil { to { transform: translateX(120%); } }
/* THE SIZE (JR, 2026-09-27: "Make it smaller. fit between sign in and box office card"). The ticket
is short and wide, as a real ticket is: about 220 tall on a computer, which is less than the
space between the "Get early access" button and the Box office card, so it covers neither.
Every part below is sized to keep it that short. */
/* the body of the ticket: its parts stacked, no space round them. The row of holes between the body
and the stub is the dashed line on the right. */
.stock .ticket-main { padding: 0; gap: 0; border-right: 2px dashed color-mix(in srgb, var(--ticket-rule) 45%, transparent); min-width: 0; }
/* a box of print: the word or code on top, its tiny caption underneath in blue */
.stock-boxes { list-style: none; margin: 0; padding: 0; }
.stock-boxes b { display: block; font: 600 12px/1.2 var(--mono); letter-spacing: .04em; color: var(--paper-ink); white-space: nowrap; }
.stock-boxes span { display: block; margin-top: 1px; font: 500 8px/1.2 var(--font); letter-spacing: .1em; color: var(--ticket-rule); white-space: nowrap; }
/* the seller's name in its band across the top, with a blue line under it */
.stock-band { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 4px 0 4px; border-bottom: 1px solid color-mix(in srgb, var(--ticket-rule) 55%, transparent);
font: 500 14px/1 var(--font); letter-spacing: -.01em; text-transform: none; color: var(--logo-blue); }
.stock-band b { font-weight: 800; margin-left: -7px; }
.band-mark { width: 16px; height: 16px; }
/* the row of boxes, and under it the first stripe of colour */
.stock-boxes { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr 1fr .8fr; border-bottom: 4px solid transparent; border-image: var(--logo-grad) 1; }
.stock-boxes li { padding: 4px 8px 4px 12px; border-right: 1px solid color-mix(in srgb, var(--ticket-rule) 35%, transparent); overflow: hidden; }
.stock-boxes li:last-child { border-right: 0; }
/* the event, printed: centred capitals, the main line the biggest, as the act's name is on a ticket */
.stock-print { padding: 6px 12px 0; text-align: center; }
.stock-print p { margin: 0; font: 500 10px/1.4 var(--mono); letter-spacing: .1em; color: var(--paper-ink); }
.welcome .ticket-main h2 { margin: 0; font: 700 20px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-ink);
background: none; -webkit-text-fill-color: currentColor; }
/* the two boxes to fill in, side by side, drawn as boxes on a printed form: caption above in blue,
a blue outline */
.stock-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 2px 16px 0; }
.stock .field { gap: 3px; min-width: 0; }
.welcome .stock .ticket-main .field label { font: 600 9px/1.2 var(--font); letter-spacing: .12em; color: var(--ticket-rule); }
.welcome .stock .ticket-main .field input { width: 100%; height: 32px; padding: 0 10px; border-radius: 4px; font: 500 14px/1 var(--mono); text-transform: none; letter-spacing: 0;
background: color-mix(in srgb, var(--paper) 35%, white); color: var(--paper-ink); border-color: color-mix(in srgb, var(--ticket-rule) 60%, transparent); }
.welcome .stock .ticket-main .field input:focus { border-color: var(--ticket-rule); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ticket-rule) 22%, transparent); }
/* a browser that fills the boxes in from its saved passwords paints them its own colour; keep them paper */
.welcome .stock .ticket-main .field input:-webkit-autofill { -webkit-text-fill-color: var(--paper-ink); caret-color: var(--paper-ink); box-shadow: 0 0 0 1000px color-mix(in srgb, var(--paper) 35%, white) inset; }
/* the buttons, with any error said between them on the same line: "Sign in" is the page's own
gradient button, squared off to suit a ticket */
.stock .ticket-row { margin: 0; padding: 6px 16px 6px; gap: 10px; justify-content: flex-start; }
.stock .field-error { flex: 1; min-width: 0; min-height: 0; color: var(--paper-bad); font: 500 11px/1.25 var(--font); text-transform: none; letter-spacing: 0; }
.welcome .stock .cta { flex: none; height: 32px; padding: 0 18px; border-radius: 6px; font: 700 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 6px 16px color-mix(in srgb, var(--logo-violet) 35%, transparent); }
.welcome .stock .ticket-main .btn-quiet { flex: none; height: 32px; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-soft); padding: 0 8px; }
.welcome .stock .ticket-main .btn-quiet:hover { color: var(--paper-ink); }
/* the small print along the bottom, over the second stripe of colour */
.stock-foot { margin: auto 0 0; padding: 3px 12px; text-align: center; font: 500 8px/1.2 var(--mono); letter-spacing: .12em; color: var(--ticket-rule);
border-top: 1px solid color-mix(in srgb, var(--ticket-rule) 35%, transparent); border-bottom: 4px solid transparent; border-image: var(--logo-grad) 1; }
/* the stub: washed pale blue; the logo on top; under it, side by side, the seat printed sideways (as
on a real stub, so it can be read when the stub is torn off and turned) and a barcode */
.stock .ticket-stub { display: grid; grid-template-columns: auto auto; grid-template-rows: auto 1fr; justify-content: center; justify-items: center; align-items: center; gap: 8px 10px; padding: 12px 8px; background: var(--ticket-wash); }
.stock .ticket-stub .mark { grid-column: 1 / -1; width: 28px; height: 28px; }
.stub-print { display: flex; flex-direction: column; gap: 2px; writing-mode: vertical-rl; transform: rotate(180deg); }
.stub-print b { font: 700 14px/1.1 var(--mono); letter-spacing: .12em; color: var(--paper-ink); }
.stub-print span { font: 500 8px/1.2 var(--mono); letter-spacing: .1em; color: var(--paper-ink); }
/* the barcode is only stripes of different widths, drawn, repeating every 17 */
.barcode { display: block; width: 34px; height: 100%; min-height: 96px; opacity: .9;
background: repeating-linear-gradient(180deg, var(--paper-ink) 0 2px, transparent 2px 4px, var(--paper-ink) 4px 5px, transparent 5px 9px, var(--paper-ink) 9px 12px, transparent 12px 14px, var(--paper-ink) 14px 15px, transparent 15px 17px); }
/* the stub's logo lights and changes colour with the music, like the page's other logos */
.ticket-stub .mark.music-on .eqbeam { animation: eqbeam 6s linear infinite; }
.ticket-stub .mark.music-on .eqsrc { animation: eqsrc 3s ease-in-out infinite; }
/* on a phone the row of boxes keeps four, the two boxes to fill in go one above the other with
bigger lettering (a phone zooms in on small lettering in a box, which throws the page about),
the stub is under the body, 64 tall, its contents in a row, and the notches are at the two sides */
@media (max-width: 600px) {
.ticket.stock {
-webkit-mask: radial-gradient(circle at 0 calc(100% - 64px), transparent 9px, #000 9.5px), radial-gradient(circle at 100% calc(100% - 64px), transparent 9px, #000 9.5px);
mask: radial-gradient(circle at 0 calc(100% - 64px), transparent 9px, #000 9.5px), radial-gradient(circle at 100% calc(100% - 64px), transparent 9px, #000 9.5px);
-webkit-mask-composite: source-in; mask-composite: intersect; }
.stock .ticket-main { border-right: 0; border-bottom: 2px dashed color-mix(in srgb, var(--ticket-rule) 45%, transparent); }
.stock-boxes { grid-template-columns: 1.5fr 1fr 1fr .8fr; }
.stock-boxes li:first-child { display: none; }
.stock-fields { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.welcome .stock .ticket-main .field input { height: 40px; font-size: 16px; }
.stock .ticket-stub { display: flex; flex-direction: row; height: 64px; gap: 12px; padding: 0 16px; flex: none; justify-content: space-between; }
.stub-print { writing-mode: horizontal-tb; transform: none; gap: 0; }
.stub-print b { font-size: 13px; }
.stub-print span { display: inline; }
.barcode { width: 84px; height: 34px; min-height: 0;
background: repeating-linear-gradient(90deg, var(--paper-ink) 0 2px, transparent 2px 4px, var(--paper-ink) 4px 5px, transparent 5px 9px, var(--paper-ink) 9px 12px, transparent 12px 14px, var(--paper-ink) 14px 15px, transparent 15px 17px); }
}
/* ---------------- the sign-in ticket in place of the invitation card ---------------- */
/* (JR, 2026-09-27: "make the bottom sign in replace the request my invitation card with the sign in
ticket. Make the sign in ticket the same size as that whole card. Make the invitation card fade
out and the sign in ticket fades in".)
HOW IT IS DONE. The invitation card sits in a frame of its own size ("join-swap"). The ticket's
place ("signin-inline") is laid over that frame edge to edge, so whatever size the card is, on a
computer or a phone, the ticket is exactly that size. The card is never taken away while the
ticket shows: it is only made see-through, so it goes on holding the frame open and nothing on
the page moves. The card fades out over a third of a second; the ticket starts fading in a
fifth of a second behind it. Back, Escape or a click elsewhere runs it the other way. */
.join-swap { position: relative; max-width: 640px; margin: 34px auto 0; }
.join-swap[hidden] { display: none; }
.join-swap .join-form { margin: 0; max-width: none; transition: opacity .35s var(--ease) .2s, visibility 0s linear .2s, transform .8s var(--ease); }
.join-swap.signing .join-form { opacity: 0; visibility: hidden; transition: opacity .35s ease-in, visibility 0s linear .35s; }
.signin-inline { position: absolute; inset: 0; text-align: left; opacity: 0; visibility: hidden; transition: opacity .35s ease-in, visibility 0s linear .35s;
filter: drop-shadow(0 30px 60px rgba(0,0,0,.5)) drop-shadow(0 0 36px color-mix(in srgb, var(--logo-violet) 38%, transparent)); }
.join-swap.signing .signin-inline { opacity: 1; visibility: visible; transition: opacity .35s var(--ease) .2s, visibility 0s linear .2s; }
/* THE TICKET AT THE CARD'S SIZE. It fills its place, and because the card is bigger than the ticket
under the bar, everything printed on it is bigger too, and its parts are spread down its height. */
.signin-inline .ticket.stock { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 12px; }
.signin-inline .stock .ticket-main { justify-content: space-between; }
.signin-inline .stock-band { gap: 9px; padding: 10px 0 9px; font-size: 19px; }
.signin-inline .stock-band b { margin-left: -9px; }
.signin-inline .band-mark { width: 22px; height: 22px; }
.signin-inline .stock-boxes li { padding: 9px 10px 8px 16px; }
.signin-inline .stock-boxes b { font-size: 15px; }
.signin-inline .stock-boxes span { font-size: 9px; }
.signin-inline .stock-print { padding: 10px 16px 0; }
.signin-inline .stock-print p { font-size: 12px; }
.welcome .signin-inline .ticket-main h2 { font-size: 30px; }
.signin-inline .stock-fields { gap: 14px; padding: 4px 24px 0; }
.welcome .signin-inline .stock .ticket-main .field label { font-size: 10px; }
.welcome .signin-inline .stock .ticket-main .field input { height: 48px; padding: 0 14px; font-size: 16px; }
.signin-inline .stock .ticket-row { padding: 10px 24px; gap: 14px; }
.signin-inline .stock .field-error { font-size: 13px; }
.welcome .signin-inline .stock .cta { height: 48px; padding: 0 28px; font-size: 14px; }
.welcome .signin-inline .stock .ticket-main .btn-quiet { height: 48px; font-size: 12px; }
.signin-inline .stock-foot { padding: 7px 12px; font-size: 9px; }
.signin-inline .stock .ticket-stub { gap: 12px 8px; padding: 20px 8px; }
.signin-inline .stock .ticket-stub .mark { width: 40px; height: 40px; }
.signin-inline .stub-print b { font-size: 17px; }
.signin-inline .stub-print span { font-size: 9px; }
.signin-inline .barcode { width: 30px; }
@media (max-width: 600px) {
/* on a phone the stub is a strip 64 tall along the bottom; the body takes all the height above it */
.signin-inline .ticket.stock { grid-template-rows: minmax(0, 1fr) 64px; }
.signin-inline .stock .ticket-stub { padding: 0 20px; }
.signin-inline .stub-print b { font-size: 14px; }
.signin-inline .stub-print span { font-size: 9px; }
.signin-inline .barcode { width: 84px; }
.welcome .signin-inline .ticket-main h2 { font-size: 22px; }
.signin-inline .stock-band { font-size: 17px; }
}
/* ---------------- buttons ---------------- */
.welcome a.btn { text-decoration: none; }
.welcome .cta { position: relative; background: var(--logo-grad); color: #fff; border: 0; height: 52px; padding: 0 26px; border-radius: 999px; font: 700 16px/1 var(--font);
text-decoration: none; box-shadow: 0 10px 30px color-mix(in srgb, var(--logo-violet) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.25); overflow: hidden;
transition: transform var(--dur-move) var(--ease), box-shadow var(--dur-move); }
.welcome .cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.welcome .cta:hover::after { transform: translateX(120%); }
.welcome .cta:hover { box-shadow: 0 16px 44px color-mix(in srgb, var(--logo-violet) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.25); }
.welcome .cta-small { height: 38px; padding: 0 18px; font-size: 14px; }
.welcome .cta.big { height: 58px; padding: 0 34px; font-size: 17px; }
.welcome .cta .arrow { display: inline-block; transition: transform var(--dur-move) var(--ease); }
.welcome .cta:hover .arrow { transform: translateX(4px); }
.welcome .ghost { height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--stage-line); color: var(--stage-ink); background: var(--stage-glass); text-decoration: none; font: 600 16px/1 var(--font);
backdrop-filter: blur(8px); transition: border-color var(--dur-fast), background var(--dur-fast); }
.welcome .ghost:hover { border-color: color-mix(in srgb, var(--logo-cyan) 60%, transparent); background: color-mix(in srgb, var(--logo-cyan) 10%, transparent); }
.welcome .ghost.small { height: 38px; padding: 0 16px; font-size: 14px; }
/* ---------------- the stage sections: lit by the logo's colours, day or night ---------------- */
.stage { position: relative; background: var(--stage-bg); color: var(--stage-ink); overflow: hidden; isolation: isolate; }
.stage .eyebrow { color: var(--stage-cyan); }
.stage .soft, .stage .lede { color: var(--stage-soft); }
.stage .lede b { color: var(--stage-ink); }
/* three soft coloured lights drifting slowly behind everything */
.aurora { position: absolute; inset: -20%; z-index: -2; filter: blur(70px); opacity: var(--stage-lights); }
.aurora span { position: absolute; border-radius: 50%; mix-blend-mode: var(--stage-blend); animation: drift 22s ease-in-out infinite alternate; }
.aurora .a1 { width: 52vw; height: 52vw; left: 50%; top: -5%; background: radial-gradient(circle, var(--logo-violet), transparent 65%); }
.aurora .a2 { width: 46vw; height: 46vw; left: -8%; top: 25%; background: radial-gradient(circle, var(--logo-cyan), transparent 65%); opacity: .55; animation-duration: 28s; }
.aurora .a3 { width: 40vw; height: 40vw; left: 30%; top: 55%; background: radial-gradient(circle, var(--logo-blue), transparent 65%); opacity: .6; animation-duration: 34s; }
.aurora.soft { opacity: calc(var(--stage-lights) * .6); }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, 4vh) scale(1.12); } 100% { transform: translate(-5vw, -3vh) scale(.95); } }
/* a spotlight that follows the mouse across the hero (welcome.js sets --mx and --my) */
.spot { position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(600px circle at var(--mx, 70%) var(--my, 30%), color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 60%); }
/* fine film grain over the lights, drawn as an SVG noise tile */
.grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,"); }
/* ---------------- 1. the hero ---------------- */
.hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(120px + var(--beta-h)) 0 90px; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(40px, 6.2vw, 86px); line-height: .98; margin: 22px 0 24px; }
.hero h1 .line { display: block; }
/* the two small lines in the headline ("City/Govt gigs" above "Find the", and "Theatre and PAC
rental" below "that pay bands"): the headline's own lettering at four tenths of its size, so
they shrink and grow with the headline on every screen, with a little air under each. The
second one also has air above it, twice as much, so it reads as the name of the lines under it
and not as the end of the lines over it. Their colour is the site's brass gold (tokens.css,
--stage-brass): warm against the stage's cool colours (JR, 2026-09-27: "a contrasting color
that's pleasant but brings attention"). The colour is named twice on purpose: the Night look
paints every headline with its own white-to-blue wash (theme.css, "Headings"), which hides a
plain colour, so the second naming (-webkit-text-fill-color) tells it to fill these two lines
with the brass instead. */
.hero h1 .topic { font-size: .4em; line-height: 1.1; letter-spacing: .04em; margin-bottom: 8px; color: var(--stage-brass); -webkit-text-fill-color: var(--stage-brass); }
.hero h1 .line + .topic { margin-top: 16px; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--stage-line); background: var(--stage-glass);
color: var(--stage-ink); font: 600 var(--t-small)/1 var(--font); letter-spacing: .02em; backdrop-filter: blur(8px); margin: 0; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
/* the word that changes: bandshells, festivals, fairs ... */
/* the changing word has a line of its own, so the headline never jumps as the word changes length */
.rotator { display: block; position: relative; color: var(--stage-cyan); height: 1em; white-space: nowrap; }
.rot-word { display: inline-block; transition: transform .45s var(--ease), opacity .45s var(--ease), filter .45s; }
.rot-word.out { transform: translateY(-60%); opacity: 0; filter: blur(6px); }
.rot-word.in { transform: translateY(60%); opacity: 0; filter: blur(6px); transition: none; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 32px 0 20px; }
.trust { color: var(--stage-soft); font-size: var(--t-small); margin: 0; }
/* the logo, very large and faint, behind the hero's words (JR, 2026-09-27: "behind live now in
florida..., to No guesses...., blended into to existing background at 20%, make the logo very
large so it looks faint onto background"; and the same day: "Make it bigger center of a
computer screen"; and: "Make logo bigger going under the 3 boxes too"; and: "make the logo bars
move with the music like the clickable small logo"). The logo is the drawing marked "hero-logo"
in welcome.html, in the middle of the whole opening screen. It was a square 1280 wide, a little
wider than the words and the three boxes together. It has been made 8% smaller twice (JR,
2026-09-28: "Reduce size of the large faint logo by 8.0%", then "reduce 8.0% more"), the second
8% taken off the size the first had left: 1280, then about 1178, now about 1083 wide. That is
written below as "times .8464", which is .92 times .92. At that size it runs under the words
and the left parts of the three boxes; the right-hand ends of the boxes reach past its edge. It is centred left to right and top to bottom
in the browser window (top 50vh is half way down it), at 20% strength so the stage lights show
through it. Being wider than a computer screen is tall, its top and bottom edges run off the
opening screen; its spotlight and four bars stay in view. On a screen narrower than 1280 it is
sized from the width of the screen, made smaller by the same amount, so the logo is never cut
off at the sides. It sits behind the words and the three boxes
(z-index -1) and cannot be clicked, so every button and link works as before. Its four bars
are moved by welcome.js while the music plays.
THE STRENGTHS. The 20% is set on the logo's two "faint" layers (the gradient square; the
spotlight and bars), not on the whole drawing, so that the beam of light between them can be
set apart: 8% (JR, 2026-09-27: "make the colors on the big faint one be at 50%", then halved
three times to 6.25%: "It needs to be fainter but visible", then "put at 8%"). */
.hero-logo { position: absolute; top: 50vh; left: 50%; width: calc(min(1280px, 100vw - 32px) * .8464); height: auto; aspect-ratio: 1; transform: translate(-50%, -50%);
z-index: -1; pointer-events: none; }
.hero-logo .faint { opacity: .2; }
/* BY DAY the big logo is drawn the way the real logo looks: its colour square, faint, with the
spotlight and the four bars in white on top, so they read as the logo's own white shapes
and not as grey smudges (JR, 2026-10-15: "The large background logo looks wierd"). The colour
square is fainter than at night (the logo's colours are far stronger on light ground than on
dark), and so is the beam. */
:root[data-theme="light"] .hero-logo .faint:first-child { opacity: .12; } /* the colour square */
:root[data-theme="light"] .hero-logo .faint:last-child { opacity: .7; } /* the spotlight and bars, white, a little held back */
:root[data-theme="light"] .hero-logo .eqbeam { opacity: .05; }
.hero-logo .eqbeam { opacity: .08; }
/* THE LOGO'S LIGHT CHANGES COLOUR WHILE THE MUSIC PLAYS (JR, 2026-09-27: "the logos lights used to
change colors"). This is the sign-in page's logo light (home.css, carried from the desktop app),
brought to the first page: while the music is on, the beam under the spotlight runs through
violet, cyan, pink, gold and green every 6 seconds, and the spotlight itself dims and brightens
every 3. It happens on all three logos here: the two small ones that switch the music
(aria-pressed="true" is how the page marks the music as on) and the big faint one behind the
opening screen (welcome.js marks it "music-on"). With the music off the light is still. The
colours are the same ones written in home.css, part of the logo's own artwork. */
.music-btn[aria-pressed="true"] .eqbeam, .hero-logo.music-on .eqbeam { animation: eqbeam 6s linear infinite; }
.music-btn[aria-pressed="true"] .eqsrc, .hero-logo.music-on .eqsrc { animation: eqsrc 3s ease-in-out infinite; }
@keyframes eqbeam { 0% { fill: #7c3aed; } 20% { fill: #22d3ee; } 40% { fill: #ec4899; } 60% { fill: #fbbf24; } 80% { fill: #34d399; } 100% { fill: #7c3aed; } }
@keyframes eqsrc { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
/* the product glimpse: three glass cards, stacked and tilting with the mouse */
.glimpse { position: relative; height: 460px; perspective: 1200px; }
.gcard { position: absolute; border-radius: 20px; padding: 20px 22px; background: color-mix(in srgb, var(--stage-raised) 72%, transparent); border: 1px solid var(--stage-line);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--stage-shadow); transform-style: preserve-3d;
transition: transform .25s ease-out; will-change: transform; }
.gcard p { margin: 0; }
.g1 { width: 330px; top: 10px; right: 20px; z-index: 3; }
.g2 { width: 300px; top: 190px; left: 0; z-index: 2; }
.g3 { width: 250px; bottom: 0; right: 0; z-index: 1; }
.g-kicker { font: 600 11px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--stage-cyan); }
.g-title { font: 700 20px/1.2 var(--font-display); text-transform: uppercase; margin-top: 10px !important; color: var(--stage-ink); }
.g-sub { color: var(--stage-soft); font-size: var(--t-small); margin-top: 6px !important; }
.g-meter { height: 8px; border-radius: 99px; background: var(--stage-line); overflow: hidden; margin-top: 16px; }
.g-meter span { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--logo-grad); transition: width 1.6s var(--ease); }
.g-nums { margin-top: 12px !important; color: var(--stage-soft); font-size: var(--t-small); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.g-nums b { font: 700 22px/1 var(--font-display); color: var(--stage-ink); }
.g-pill { margin-left: auto; padding: 3px 10px; border-radius: 99px; font: 700 10px/1.4 var(--font); letter-spacing: .06em; text-transform: uppercase; background: var(--sell-strong); color: var(--sell-strong-ink); }
.g-pill.steady { background: var(--sell-steady); color: var(--sell-steady-ink); }
.g-pill[hidden] { display: none; }
.g-lock { display: flex; align-items: center; gap: 8px; margin-top: 10px !important; font-size: var(--t-small); color: var(--stage-soft); }
.blur { filter: blur(5px); user-select: none; }
.lock { width: 12px; height: 14px; flex: none; position: relative; display: inline-block; border-radius: 3px; background: var(--brass-glow); border: 1.5px solid var(--accent-2); }
.lock::before { content: ""; position: absolute; left: 1px; top: -7px; width: 6px; height: 7px; border: 1.5px solid var(--accent-2); border-bottom: 0; border-radius: 5px 5px 0 0; }
/* the block of seats on the third card: 39 across and 7 down, small enough that the nine letters of
MUNISTAGE fit across the card (welcome.js lights them, and the 39 here must match its count). The
glow round a lit seat is kept tight, 4 wide, so neighbouring letters do not smear together. */
.mini-seats { display: grid; grid-template-columns: repeat(39, 1fr); gap: 2px; }
.mini-seats i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--stage-line); transition: background .35s, box-shadow .35s; }
.mini-seats i.on { background: var(--logo-cyan); box-shadow: 0 0 4px color-mix(in srgb, var(--logo-cyan) 70%, transparent); }
.mini-seats i.on.v { background: var(--logo-violet); box-shadow: 0 0 4px color-mix(in srgb, var(--logo-violet) 70%, transparent); }
.scroll-cue { position: absolute; left: 50%; bottom: 24px; width: 26px; height: 42px; border-radius: 99px; border: 2px solid var(--stage-line); transform: translateX(-50%); }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; border-radius: 4px; background: var(--stage-ink); transform: translateX(-50%); animation: cue 1.8s infinite; }
@keyframes cue { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 14px); } }
@media (max-width: 980px) { .hero-in { grid-template-columns: 1fr; } .glimpse { height: 420px; max-width: 520px; } }
@media (max-width: 560px) { .glimpse { display: none; } .hero { min-height: auto; padding-top: calc(110px + var(--beta-h)); } }
/* ---------------- the running strip ---------------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--bg-raised); padding: 18px 0; }
.marquee .track { display: inline-flex; gap: 44px; white-space: nowrap; animation: slide 45s linear infinite; }
.marquee span { font: 600 22px/1 var(--font-display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 44px; }
.marquee span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--logo-grad); }
@keyframes slide { to { transform: translateX(-50%); } }
/* ---------------- 2. live numbers ---------------- */
.numbers { padding: 96px 0 72px; }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 28px; }
.stat { padding: 24px 22px; border-radius: 18px; background: var(--bg-raised); border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--logo-grad); }
.stat b { display: block; font: 700 clamp(30px, 3.3vw, 46px)/1 var(--font-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 10px; color: var(--ink-soft); font-size: var(--t-small); line-height: 1.35; }
.numbers-note { margin: 20px 0 0; color: var(--ink-soft); font-size: var(--t-small); }
@media (max-width: 1000px) { .stats { grid-template-columns: repeat(2, 1fr); } .stats .stat:first-child { grid-column: span 2; } }
:root[data-theme="dark"] .stat b { background: var(--n-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* ---------------- 3. what you get: the grid of cards ---------------- */
.get { padding: 72px 0 110px; }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.card { grid-column: span 2; position: relative; border-radius: 22px; padding: 28px; background: var(--bg-raised); border: 1px solid var(--line); overflow: hidden; }
.card.big { grid-column: span 3; }
.card.wide { grid-column: span 4; }
/* the "More to come" card: a dashed outline in the logo's colours, and the coming features as chips */
.card.soon { border-style: dashed; border-color: color-mix(in srgb, var(--logo-violet) 45%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--logo-violet) 7%, var(--bg-raised)), color-mix(in srgb, var(--logo-cyan) 7%, var(--bg-raised))); }
.soon-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.soon-list li { padding: 8px 14px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); font: 600 15px/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.soon-list li:last-child { border-style: dashed; color: var(--ink-soft); }
.card h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.05; margin: 14px 0 12px; }
.card p { line-height: 1.55; margin: 0; }
.card p + p { margin-top: 12px; }
/* a glow that follows the mouse around each card's edge (welcome.js sets --x and --y) */
.card.glow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity var(--dur-move);
background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), var(--logo-cyan), var(--logo-violet) 40%, transparent 70%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.card.glow::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur-move);
background: radial-gradient(360px circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, var(--logo-violet) 10%, transparent), transparent 70%); }
.card.glow:hover::before, .card.glow:hover::after { opacity: 1; }
.c-kicker { display: flex; align-items: center; gap: 10px; font: 700 var(--t-micro)/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.c-icon { width: 30px; height: 30px; border-radius: 9px; background: var(--logo-grad); position: relative; flex: none; box-shadow: 0 6px 16px color-mix(in srgb, var(--logo-violet) 35%, transparent); }
.c-icon::after { content: ""; position: absolute; inset: 8px; border: 2px solid #fff; border-radius: 3px; }
.ic-city::after { border-radius: 2px 2px 0 0; border-bottom-width: 3px; }
.ic-ticket::after { border-radius: 3px; border-style: dashed; }
.ic-star::after { border-radius: 50%; }
.ic-seat::after { inset: 9px 7px; border-radius: 6px 6px 2px 2px; }
.ic-save::after { inset: 7px 9px; border-radius: 2px; border-bottom-width: 5px; }
.ic-plus::after { inset: 14px 8px; border: 0; border-radius: 1px; background: #fff; box-shadow: none; }
.ic-plus::before { content: ""; position: absolute; inset: 8px 14px; border-radius: 1px; background: #fff; }
.ic-live::after { border-radius: 50%; border-color: #fff transparent #fff transparent; }
.ticks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--sell-steady); }
.ticks li::after { content: ""; position: absolute; left: 5px; top: 7px; width: 5px; height: 8px; border: solid var(--sell-strong); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px !important; }
.spill { padding: 4px 12px; border-radius: 99px; font: 700 var(--t-micro)/1.6 var(--font); letter-spacing: .05em; text-transform: uppercase; }
.s-strong { background: var(--sell-strong); color: var(--sell-strong-ink); } .s-steady { background: var(--sell-steady); color: var(--sell-steady-ink); } .s-uneven { background: var(--sell-uneven); color: var(--sell-uneven-ink); }
.c-foot { margin-top: 16px !important; color: var(--ink-soft); font-size: var(--t-small); }
.c-foot b { color: var(--ink); }
/* the locked contact card inside Public gigs */
.locked { position: relative; margin-top: 20px; padding: 16px 18px; border-radius: 16px; border: 1px dashed var(--line); background: var(--bg); overflow: hidden; }
.locked p { margin: 0; }
.l-city { margin-bottom: 10px !important; }
.l-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--t-small); }
.l-row > span:first-child { color: var(--ink-soft); }
.l-cover { position: absolute; right: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px;
background: var(--bg-raised); border: 1px solid var(--line); box-shadow: var(--shadow); font: 600 var(--t-small)/1 var(--font); }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr; } .card, .card.big, .card.wide { grid-column: auto; } }
/* ---------------- 4. a real room ---------------- */
.room { padding: 120px 0; }
.room-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.room-facts { margin-top: 28px; padding: 22px; border-radius: 18px; background: var(--stage-glass); border: 1px solid var(--stage-line); backdrop-filter: blur(10px); }
.room-facts p { margin: 0; }
.rf-venue { font: 700 22px/1.15 var(--font-display); text-transform: uppercase; }
.rf-show { color: var(--stage-soft); margin-top: 6px !important; }
.rf-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0; }
.rf-nums b { display: block; font: 700 clamp(26px, 3vw, 38px)/1 var(--font-display); font-variant-numeric: tabular-nums; background: var(--stage-num); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rf-nums span { display: block; margin-top: 6px; color: var(--stage-soft); font-size: var(--t-small); }
/* the seat map box: the drawing and its colours come from the Box Office app (lib/seatmaps.js); the app's own
names for a few colours are pointed at the stage's colours here */
.room-map { border-radius: 24px; padding: 20px; background: color-mix(in srgb, var(--stage-raised) 80%, transparent); border: 1px solid var(--stage-line); box-shadow: var(--stage-shadow);
--surface: var(--stage-raised); --surface-2: var(--stage-bg); --paper: var(--stage-raised); --ink: var(--stage-ink); --ink-3: var(--stage-soft); --line: var(--stage-line); --sans: var(--font); }
.room-map svg { width: 100%; height: auto; max-height: 70vh; display: block; }
/* fill only: a glow on every one of a big room's seats (1,600+) made the browser crawl */
.room-map .seat { transition: fill .3s ease; }
/* the same meaning as the app's seat maps: a coloured seat is still for sale, a grey seat is sold */
.room-map .seat.open { fill: var(--logo-cyan) !important; }
.room-map .seat.gone { fill: var(--stage-sold) !important; }
.rf-key { display: flex; gap: 18px; margin: 0 0 16px !important; color: var(--stage-soft); font-size: var(--t-small); }
.rf-key span { display: inline-flex; align-items: center; gap: 7px; }
.rf-key i { width: 11px; height: 11px; border-radius: 50%; }
.rf-key .k-open { background: var(--logo-cyan); box-shadow: 0 0 6px var(--logo-cyan); }
.rf-key .k-sold { background: var(--stage-sold); }
.map-wait { color: var(--stage-soft); padding: 80px 20px; text-align: center; }
@media (max-width: 980px) { .room-in { grid-template-columns: 1fr; } }
/* ---------------- 5. how it works ---------------- */
.how { padding: 110px 0; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; }
.step { position: relative; padding: 28px; border-radius: 22px; background: var(--bg-raised); border: 1px solid var(--line); }
.step .n { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--logo-grad); color: #fff; font: 700 26px/1 var(--font-display);
box-shadow: 0 10px 26px color-mix(in srgb, var(--logo-violet) 40%, transparent); }
.step h3 { font-size: 24px; margin: 18px 0 8px; }
.step p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
/* ---------------- 6. who, questions ---------------- */
.who { padding: 0 0 90px; }
/* all on ONE row (JR, 2026-09-23): the words shrink a little on narrower screens to fit, and on a
phone, where seven will not fit, the row slides sideways under a finger instead of wrapping */
.who-list { display: flex; flex-wrap: nowrap; gap: clamp(6px, .8vw, 10px); margin: 18px 0 0; overflow-x: auto; scrollbar-width: none; padding: 4px 0 6px; }
.who-list::-webkit-scrollbar { display: none; }
/* centred (JR, 2026-09-23: "center that row"). The first and last labels take the spare room either
side, which centres the row when it fits and still lets it slide from the first label on a phone
(plain centring would hide the start of the row off the left edge there). The "Built for" above
it is centred to match. */
.who-list span:first-child { margin-left: auto; }
.who-list span:last-child { margin-right: auto; }
.who .eyebrow { text-align: center; }
.who-list span { flex: none; white-space: nowrap; padding: clamp(9px, 1vw, 12px) clamp(12px, 1.5vw, 20px); font-size: clamp(14px, 1.45vw, 18px) !important; border-radius: 99px; border: 1px solid var(--line); background: var(--bg-raised); font: 600 18px/1 var(--font-display); text-transform: uppercase; letter-spacing: .03em;
transition: transform var(--dur-move) var(--ease), border-color var(--dur-fast); }
.who-list span:hover { transform: translateY(-3px); border-color: var(--accent); }
.faq { padding: 30px 0 110px; }
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font: 600 19px/1.3 var(--font); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 400 28px/1 var(--font); color: var(--accent); transition: transform var(--dur-move) var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p a { color: var(--accent); font-weight: 600; }
.faq details p b { color: var(--ink); }
.faq details p { margin: 0 0 18px; color: var(--ink-soft); line-height: 1.6; max-width: 65ch; }
/* ---------------- the join box ---------------- */
.join { padding: 120px 0; text-align: center; }
.join h2 { margin-bottom: 18px; }
.join .lede { margin: 0 auto; }
.join-form { margin: 34px auto 0; text-align: left; max-width: 640px; padding: 28px; border-radius: 24px; background: color-mix(in srgb, var(--stage-raised) 70%, transparent);
border: 1px solid var(--stage-line); backdrop-filter: blur(14px); box-shadow: var(--stage-shadow); }
.jf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.join-form label { display: grid; gap: 6px; font: 600 var(--t-small)/1.2 var(--font); color: var(--stage-ink); }
.join-form input { height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--stage-line); background: var(--stage-bg); color: var(--stage-ink); font: 400 16px/1 var(--font);
transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.join-form input::placeholder { color: var(--stage-soft); }
.join-form input:focus { outline: none; border-color: var(--logo-cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--logo-cyan) 25%, transparent); }
.join-form .cta { width: 100%; margin-top: 6px; justify-content: center; }
.join-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jf-note { min-height: 20px; margin: 12px 0 0; color: var(--bad); font-size: var(--t-small); }
.jf-small { margin: 4px 0 0; color: var(--stage-soft); font-size: var(--t-micro); }
.jf-small a, .joined a { color: var(--stage-cyan); }
.joined { margin: 34px auto 0; max-width: 560px; padding: 34px; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--logo-cyan) 45%, transparent); background: var(--stage-glass);
animation: pop .5s var(--ease); }
.joined[hidden] { display: none; }
.j-big { font: 700 34px/1 var(--font-display); text-transform: uppercase; margin: 0 0 10px; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }
@media (max-width: 640px) { .jf-row { grid-template-columns: 1fr; } }
/* ---------------- the footer ---------------- */
/* Laid out as brightlights.live lays out theirs (JR, 2026-10-15): the about column on the left, three
columns of links under small spaced-out headings in the typewriter face, a thin rule, then the
copyright and a typewriter line along the bottom. On a tablet the about column takes the full width
above the three link columns; on a phone everything stacks. */
.foot { padding: 64px 0 28px; border-top: 1px solid var(--line); }
.foot p { margin: 0; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot .brand .word { color: var(--ink); }
.foot-desc { margin-top: 18px !important; max-width: 40ch; color: var(--ink-soft); font-size: var(--t-body); line-height: 1.6; }
.foot-tag, .foot-h, .foot-sign { font: 500 var(--t-micro)/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.foot-tag { margin-top: 22px !important; }
.foot-social { display: flex; gap: 10px; margin-top: 22px !important; }
.foot-social .social { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-soft);
transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); }
.foot-social .social:hover { color: #fff; background: var(--logo-grad); border-color: transparent; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.foot-h { margin-bottom: 6px !important; }
.foot-col a { color: var(--ink-soft); text-decoration: none; font-size: var(--t-body); transition: color var(--dur-fast); }
.foot-col a:hover { color: var(--ink); }
/* a link that leaves munistage.com: a small arrow pointing up and out after it, drawn in the link's own colour */
.foot-col a.out::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; vertical-align: 2px; background: currentColor; opacity: .7;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.foot-copy { color: var(--ink-soft); font-size: var(--t-small); }
.foot-sign { letter-spacing: .08em; text-transform: none; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-about { grid-column: 1 / -1; } }
@media (max-width: 600px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; } }
/* ---------------- things rise into place as they scroll into view ---------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* ---------------- anyone who asked for less movement gets none ---------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
.aurora span, .marquee .track, .live-dot, .scroll-cue span { animation: none; }
.music-btn[aria-pressed="true"] .eqbeam, .hero-logo.music-on .eqbeam, .music-btn[aria-pressed="true"] .eqsrc, .hero-logo.music-on .eqsrc { animation: none; }
.signin-drop, .signin-drop.open, .signin-drop .ticket { transition: none; }
.join-swap .join-form, .join-swap.signing .join-form, .signin-inline, .join-swap.signing .signin-inline { transition: none; }
.join-swap.signing .ticket::after { animation: none; }
.signin-drop .ticket { transform: scale(var(--fit, 1)); }
.signin-drop.open .ticket::after { animation: none; }
.ticket-stub .mark.music-on .eqbeam, .ticket-stub .mark.music-on .eqsrc { animation: none; }
.gcard, .cta::after, .rot-word { transition: none; }
}