/* ======================================================================= SHWING :: shwing.css Aurora's #1 basement band, broadcast on public-access cable, circa 1989. A third room in the Frost Milano network and the loudest one: where the Frost page is ice/chrome and the Neck page is shellac/amber, this room is pure late-'80s retrowave — a neon sunset over a Tron grid, VHS tracking lines, Memphis-Group confetti, and a big cable-access TV you channel-surf. The joke in the name is the Wayne's World one ("SHWING!"). The band's bit is that they'll cover ANYTHING — hair metal to polka — so the site is built like a TV you flip channels on, never one clip at a time. All colours live in :root below. Nothing loads from outside the site except the four Google fonts in the . ======================================================================= */ :root{ /* THE TAPE — the dark it all sits on: a purple-black VHS night. */ --vhs-1: #0b0718; /* the far dark / deepest black-purple */ --vhs-2: #150a2e; /* the night sky */ --vhs-3: #23124f; /* panel bodies, lit a touch */ --vhs-4: #341a6b; /* raised panel / grid glow */ /* THE NEON — the three tubes everything is lit by. Hot magenta and electric cyan are the pair; violet bridges them. Used loud, on black. */ --magenta: #ff2e97; --magenta-lit: #ff77c2; --magenta-deep:#b3155f; --cyan: #1fe3ff; --cyan-lit: #8af6ff; --cyan-deep: #0f8fa8; --violet: #a24bff; --violet-lit: #c78bff; /* THE SUNSET — the classic slatted retrowave sun behind the grid. */ --sun-1: #ff5e8a; --sun-2: #ff9d4d; --sun-3: #ffe83d; /* Accents that read as "broadcast": a caution yellow and a signal green. */ --yellow: #ffe83d; --lime: #5bff8f; --alert: #ff3b3b; /* Ink — never pure white; a warm CRT phosphor white that browns toward lilac. */ --ink: #f4ecff; --ink-soft: #cbb9ff; --ink-faint:#8f7ec9; --grid-line: rgba(255,46,151,.55); /* magenta grid on the floor */ --grid-line2:rgba(31,227,255,.35); /* a cyan cross-glow */ /* Type — an all-'80s stack, none of it shared with the other two rooms. */ --neon: "Monoton", "Impact", sans-serif; /* the tube logo */ --chunk: "Bungee", "Arial Black", sans-serif; /* fat headings/buttons */ --osd: "Share Tech Mono", "Courier New", monospace; /* broadcast on-screen text */ --body: "Oxanium", "Trebuchet MS", system-ui, sans-serif;/* readable body */ } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:var(--body); color:var(--ink); line-height:1.65; background-color:var(--vhs-1); /* The retrowave sky: deep violet-black at the very top, warming down to a magenta/orange horizon glow around 64%, then the dark floor the grid sits on. Built entirely from gradients — no image file. The receding neon grid itself is body::before (below), drawn in perspective. */ background-image: radial-gradient(120% 70% at 50% 64%, rgba(255,94,138,.28) 0%, rgba(255,94,138,0) 46%), radial-gradient(60% 42% at 50% 66%, rgba(255,157,77,.22) 0%, rgba(255,157,77,0) 60%), linear-gradient(180deg, var(--vhs-1) 0%, var(--vhs-2) 34%, #3a1560 58%, #6a1e6e 64%, #2a0f45 70%, var(--vhs-1) 100%); background-attachment:fixed; overflow-x:hidden; } /* THE GRID FLOOR — the retrowave staple: a neon grid receding to the horizon. A fixed layer pinned to the lower half, tilted back in perspective, with the grid lines drawn as repeating gradients and scrolled toward the viewer. It's purely decorative and sits behind the whole page column (z-index below .deck). Animation is stilled under reduced motion at the very bottom of this file. */ body::before{ content:""; position:fixed; z-index:0; pointer-events:none; left:-50%; right:-50%; bottom:-10%; height:70vh; background-image: repeating-linear-gradient(90deg, transparent 0, transparent 78px, var(--grid-line) 78px, var(--grid-line) 82px), repeating-linear-gradient(0deg, transparent 0, transparent 78px, var(--grid-line2) 78px, var(--grid-line2) 82px); background-size:82px 82px, 82px 82px; transform:perspective(340px) rotateX(74deg); transform-origin:50% 100%; animation:grid-run 2.6s linear infinite; mask-image:linear-gradient(180deg, transparent 0%, #000 42%, #000 100%); -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 42%, #000 100%); opacity:.9; } @keyframes grid-run{ from{ background-position:0 0, 0 0; } to{ background-position:0 82px, 0 82px; } } /* THE SUN — the slatted disc sitting on the horizon behind everything. Fixed, behind the grid. The horizontal slats are a repeating-linear-gradient mask, the whole retrowave-sunset trick in one element. */ body::after{ content:""; position:fixed; z-index:0; pointer-events:none; left:50%; bottom:26vh; width:min(560px,86vw); height:min(560px,86vw); transform:translateX(-50%); border-radius:50%; background:linear-gradient(180deg, var(--sun-3) 0%, var(--sun-2) 40%, var(--sun-1) 72%, var(--magenta) 100%); -webkit-mask-image: linear-gradient(180deg, #000 0 54%, transparent 54%), repeating-linear-gradient(180deg, #000 0 8px, transparent 8px 15px); -webkit-mask-composite:source-in; mask-image: linear-gradient(180deg, #000 0 54%, transparent 54%), repeating-linear-gradient(180deg, #000 0 8px, transparent 8px 15px); mask-composite:intersect; filter:drop-shadow(0 0 60px rgba(255,94,138,.55)); opacity:.85; } /* ================= CONFETTI (drifting Memphis-Group shapes) ============= The room's decorative motion layer — the counterpart to Frost's snow and Neck's rising embers. Neon triangles, zigzags, dots and squiggles drift across, populated by js/shwing.js. Fixed, behind the page. JS skips it entirely under reduced motion. */ #confetti{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; } .bit{ position:absolute; top:-40px; will-change:transform; animation:bit-fall linear forwards; opacity:.85; } @keyframes bit-fall{ 0%{ transform:translateY(-10vh) translateX(0) rotate(0deg); } 100%{ transform:translateY(115vh) translateX(var(--drift,40px)) rotate(var(--spin,360deg)); } } /* the shapes, all drawn in CSS so there's no image file */ .bit--tri{ width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:16px solid var(--magenta); filter:drop-shadow(0 0 6px var(--magenta)); } .bit--dot{ width:11px; height:11px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); } .bit--sq{ width:12px; height:12px; background:var(--yellow); box-shadow:0 0 8px var(--yellow); transform:rotate(45deg); } .bit--zig{ width:16px; height:16px; border:3px solid var(--violet); border-top:none; border-right:none; filter:drop-shadow(0 0 6px var(--violet)); } .bit--plus{ width:14px; height:14px; background: linear-gradient(var(--lime),var(--lime)) center/100% 4px no-repeat, linear-gradient(var(--lime),var(--lime)) center/4px 100% no-repeat; filter:drop-shadow(0 0 6px var(--lime)); } /* ================= THE BROADCAST CRAWL (top ticker) ================= */ .crawl{ position:relative; z-index:5; background:linear-gradient(90deg, var(--magenta-deep), var(--violet), var(--cyan-deep)); border-bottom:3px solid var(--cyan); box-shadow:0 0 22px rgba(31,227,255,.5); overflow:hidden; white-space:nowrap; } .crawl__track{ display:inline-block; padding:8px 0; font-family:var(--osd); font-size:.98rem; letter-spacing:2px; color:#fff; text-shadow:0 0 8px rgba(255,255,255,.55); animation:crawl 26s linear infinite; } @keyframes crawl{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* ================= PAGE SHELL ================= */ .deck{ position:relative; z-index:4; max-width:1040px; margin:0 auto; padding:0 16px 60px; } /* ---------- HERO ---------- */ .marquee-hero{ position:relative; text-align:center; margin:26px 0 20px; padding:34px 20px 30px; border:3px solid var(--magenta); border-radius:16px; background: radial-gradient(120% 90% at 50% -10%, rgba(162,75,255,.35), transparent 60%), linear-gradient(180deg, rgba(21,10,46,.86), rgba(11,7,24,.92)); box-shadow: 0 0 0 3px rgba(31,227,255,.25), 0 0 34px rgba(255,46,151,.45), inset 0 0 50px rgba(162,75,255,.22); } /* the ON AIR tally light */ .onair{ display:inline-flex; align-items:center; gap:9px; font-family:var(--osd); font-size:.92rem; letter-spacing:3px; color:var(--ink); padding:5px 14px; margin-bottom:14px; border:2px solid var(--alert); border-radius:6px; background:rgba(255,59,59,.12); text-shadow:0 0 8px rgba(255,59,59,.6); } .onair__dot{ width:11px; height:11px; border-radius:50%; background:var(--alert); box-shadow:0 0 12px var(--alert); animation:blink 1.3s steps(2,start) infinite; } @keyframes blink{ 50%{ opacity:.15; } } .logo{ margin:0; line-height:.9; font-family:var(--neon); font-weight:400; font-size:clamp(3.4rem, 15vw, 8rem); letter-spacing:2px; color:var(--cyan-lit); /* stacked neon-tube glow */ text-shadow: 0 0 6px #fff, 0 0 16px var(--cyan), 0 0 34px var(--cyan), 0 0 60px var(--magenta), 0 0 90px var(--magenta); animation:neon-hum 3.6s ease-in-out infinite; } @keyframes neon-hum{ 0%,100%{ opacity:1; } 47%{ opacity:1; } 48%{ opacity:.72; } /* the tube flickers once in a while */ 49%{ opacity:1; } 92%{ opacity:1; } 93%{ opacity:.6; } 94%{ opacity:1; } } .logo__sub{ margin:12px 0 0; font-family:var(--chunk); font-size:clamp(.85rem,3.4vw,1.25rem); letter-spacing:2px; color:var(--yellow); text-shadow:0 0 10px rgba(255,232,61,.55); } .hero__blurb{ max-width:640px; margin:16px auto 0; color:var(--ink-soft); font-size:1.02rem; } .hero__blurb b{ color:var(--magenta-lit); } .hero__btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:22px; } /* the chunky arcade button, in three tube colours */ .btn{ display:inline-block; cursor:pointer; text-decoration:none; font-family:var(--chunk); font-size:1rem; letter-spacing:1px; color:#0b0718; padding:12px 20px; border-radius:10px; background:var(--cyan); border:none; box-shadow:0 5px 0 var(--cyan-deep), 0 8px 20px rgba(31,227,255,.4); transition:transform .08s ease, box-shadow .08s ease, filter .12s ease; } .btn:hover{ filter:brightness(1.08); } .btn:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--cyan-deep), 0 3px 10px rgba(31,227,255,.4); } .btn:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; } .btn--pink{ background:var(--magenta); box-shadow:0 5px 0 var(--magenta-deep), 0 8px 20px rgba(255,46,151,.4); } .btn--yellow{ background:var(--yellow); box-shadow:0 5px 0 #b39a00, 0 8px 20px rgba(255,232,61,.4); } .btn--sm{ font-size:.82rem; padding:8px 13px; box-shadow:0 4px 0 var(--cyan-deep); } .btn--pink.btn--sm{ box-shadow:0 4px 0 var(--magenta-deep); } .btn--ghost{ background:transparent; color:var(--cyan-lit); border:2px solid var(--cyan); box-shadow:0 0 14px rgba(31,227,255,.35); } .btn--ghost:hover{ background:rgba(31,227,255,.12); } .hero__rules{ margin:22px auto 0; max-width:720px; font-family:var(--osd); font-size:.82rem; letter-spacing:1.5px; color:var(--ink-faint); line-height:1.9; } /* ---------- NAV (channel buttons) ---------- */ .channels{ position:sticky; top:0; z-index:6; display:flex; flex-wrap:wrap; justify-content:center; gap:7px; padding:11px; margin:0 0 26px; background:rgba(11,7,24,.82); backdrop-filter:blur(6px); border:2px solid var(--violet); border-radius:12px; box-shadow:0 0 22px rgba(162,75,255,.35); } .channels__btn{ font-family:var(--osd); font-size:.82rem; letter-spacing:1px; text-decoration:none; color:var(--ink); padding:6px 11px; border-radius:7px; background:rgba(162,75,255,.16); border:1px solid rgba(199,139,255,.5); transition:background .12s ease, color .12s ease, box-shadow .12s ease; } .channels__btn:hover{ background:var(--magenta); color:#0b0718; box-shadow:0 0 14px var(--magenta); } .channels__btn:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; } /* ================= SECTIONS ================= */ .bay{ margin:0 0 30px; padding:26px 22px; background:linear-gradient(180deg, rgba(35,18,79,.7), rgba(21,10,46,.78)); border:2px solid var(--cyan); border-radius:16px; box-shadow:0 0 26px rgba(31,227,255,.22), inset 0 0 40px rgba(162,75,255,.14); } .bay--pink{ border-color:var(--magenta); box-shadow:0 0 26px rgba(255,46,151,.24), inset 0 0 40px rgba(255,46,151,.12); } .bay--dark{ border-color:var(--violet); background:linear-gradient(180deg, rgba(11,7,24,.92), rgba(6,3,15,.95)); box-shadow:0 0 26px rgba(162,75,255,.3), inset 0 0 60px rgba(0,0,0,.5); } .head{ margin:0 0 4px; text-align:center; font-family:var(--chunk); font-size:clamp(1.5rem,5vw,2.3rem); letter-spacing:1px; color:var(--ink); text-shadow:0 0 10px var(--magenta), 0 0 24px rgba(255,46,151,.5); } .head span::before{ content:"◄ "; color:var(--cyan); } .head span::after{ content:" ►"; color:var(--cyan); } .head--cyan{ text-shadow:0 0 10px var(--cyan), 0 0 24px rgba(31,227,255,.5); } .dek{ margin:0 auto 22px; max-width:680px; text-align:center; color:var(--ink-soft); font-size:1rem; } .dek b{ color:var(--yellow); } /* ================= SHWING-TV :: the broadcast console ================== The room's headline feature and its answer to the Frost Video Vault. Frost hangs a WALL of small CRTs; SHWING is one big cable-access console you channel-surf. Only the tuned-in channel plays; the dial below swaps the picture and kicks a tracking glitch. Each channel is one self-hosted .mp4 with the same NO SIGNAL fallback the Frost vault uses. */ .broadcast{ display:grid; grid-template-columns:1fr; gap:18px; align-items:start; } @media (min-width:760px){ .broadcast{ grid-template-columns:1fr 190px; } } .console{ background: linear-gradient(180deg, #2b2438 0%, #1a1526 60%, #0e0b16 100%); border:3px solid #4a4460; border-radius:18px; padding:16px 16px 12px; box-shadow: inset 0 2px 0 rgba(255,255,255,.14), inset 0 -6px 14px rgba(0,0,0,.6), 0 8px 0 #08060f, 0 16px 34px rgba(0,0,0,.6); } .console__screen{ position:relative; overflow:hidden; aspect-ratio:4/3; background:#02040a; border:5px inset #575070; border-radius:14px / 20px; /* the CRT bulge */ box-shadow:inset 0 0 60px rgba(0,0,0,.95), inset 0 0 120px rgba(162,75,255,.12); } .console__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; } .console__video.is-live{ display:block; } /* analog static — self-contained SVG noise, same trick as the Frost vault */ .static{ position:absolute; inset:-40%; z-index:2; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); opacity:.5; pointer-events:none; animation:tvstatic .4s steps(4) infinite; } @keyframes tvstatic{ 0%{ transform:translate(0,0); } 25%{ transform:translate(-6%,3%); } 50%{ transform:translate(4%,-5%); } 75%{ transform:translate(-3%,-2%); } 100%{ transform:translate(5%,4%); } } .console.is-live .static{ opacity:.07; } /* a little grain stays over the picture */ .nosignal{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:16px; font-family:var(--osd); color:var(--cyan-lit); text-shadow:0 0 12px rgba(31,227,255,.7); } .nosignal b{ font-size:1.4rem; letter-spacing:3px; color:#fff; animation:blink 1.4s steps(2,start) infinite; } .nosignal span{ font-size:.95rem; color:var(--ink-soft); line-height:1.5; } .nosignal code{ color:var(--yellow); font-family:var(--osd); } .console.is-live .nosignal{ display:none; } /* scanlines + a soft screen glare, always on top of the picture */ .scan{ position:absolute; inset:0; z-index:4; pointer-events:none; background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.30) 0px, rgba(0,0,0,.30) 1px, transparent 1px, transparent 3px), linear-gradient(115deg, rgba(255,255,255,.12) 0%, transparent 40%); } /* the VCR on-screen display: PLAY ►, timecode, channel — top-left, in that unmistakable chunky broadcast font. */ .osd{ position:absolute; top:10px; left:12px; z-index:5; display:flex; flex-direction:column; gap:3px; font-family:var(--osd); letter-spacing:2px; color:#fff; text-shadow:0 0 6px rgba(0,0,0,.95), 0 0 10px rgba(31,227,255,.5); pointer-events:none; } .osd__play{ font-size:1.1rem; color:var(--lime); text-shadow:0 0 8px rgba(91,255,143,.8); } .osd__tc{ font-size:.92rem; } .osd__ch{ font-size:.86rem; color:var(--cyan-lit); } /* the channel badge, top-right, like a broadcast bug */ .bug{ position:absolute; top:10px; right:12px; z-index:5; font-family:var(--chunk); font-size:1.1rem; letter-spacing:1px; color:var(--magenta-lit); text-shadow:0 0 10px var(--magenta); pointer-events:none; } /* the tracking-distortion band that rolls up the screen on a channel change */ .tracking{ position:absolute; left:0; right:0; height:26px; z-index:6; background:linear-gradient(180deg, transparent, rgba(255,255,255,.6), transparent); mix-blend-mode:overlay; opacity:0; pointer-events:none; } .console.is-tracking .tracking{ animation:track-roll .5s linear 1; } @keyframes track-roll{ 0%{ opacity:.9; top:100%; } 100%{ opacity:0; top:-30px; } } /* a quick full-screen jolt on the same change */ .console.is-tracking .console__screen{ animation:jolt .18s steps(2) 1; } @keyframes jolt{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } 100%{ transform:translateY(0); } } .console__sound{ position:absolute; left:10px; bottom:10px; z-index:7; font-family:var(--osd); font-size:.86rem; letter-spacing:1px; cursor:pointer; color:#fff; padding:5px 11px; border-radius:6px; background:rgba(11,7,24,.8); border:2px solid var(--cyan); transition:filter .12s ease; } .console__sound:hover{ filter:brightness(1.4); } .console__sound:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; } .console__sound[aria-pressed="true"]{ background:rgba(91,255,143,.2); border-color:var(--lime); color:var(--lime); } .console__video[controls] ~ .console__sound{ display:none; } /* the fascia below the glass: brand plate + prev/next rockers */ .console__panel{ display:flex; align-items:center; gap:12px; padding:12px 6px 4px; } .console__brand{ font-family:var(--neon); font-size:1.15rem; letter-spacing:1px; color:var(--magenta-lit); text-shadow:0 0 10px var(--magenta); flex:0 0 auto; } .console__brand small{ display:block; font-family:var(--osd); font-size:.6rem; letter-spacing:2px; color:var(--ink-faint); } .console__now{ flex:1 1 auto; min-width:0; font-family:var(--osd); font-size:.9rem; color:var(--cyan-lit); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .console__rock{ flex:0 0 auto; display:flex; gap:6px; } .rocker{ cursor:pointer; font-family:var(--chunk); font-size:1rem; line-height:1; color:#0b0718; width:38px; height:34px; border:none; border-radius:8px; background:var(--violet-lit); box-shadow:0 3px 0 #5a2a8a; transition:transform .07s ease; } .rocker:active{ transform:translateY(3px); box-shadow:0 0 0 #5a2a8a; } .rocker:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; } /* THE DIAL — the channel pad down the side (or below on phones). Each button tunes a channel; the tuned one lights up. Built by js/shwing.js from the channels in the markup so adding a
adds a button. */ .dial{ display:grid; gap:8px; grid-template-columns:repeat(auto-fill, minmax(84px,1fr)); align-content:start; } @media (min-width:760px){ .dial{ grid-template-columns:1fr; } } .dial__head{ grid-column:1/-1; font-family:var(--osd); font-size:.78rem; letter-spacing:2px; color:var(--ink-faint); text-align:center; border-bottom:1px dashed rgba(199,139,255,.4); padding-bottom:6px; margin-bottom:2px; } .dial__btn{ cursor:pointer; text-align:left; font-family:var(--osd); letter-spacing:1px; color:var(--ink); padding:8px 10px; border-radius:9px; background:rgba(35,18,79,.85); border:2px solid rgba(199,139,255,.4); transition:transform .08s ease, border-color .12s ease, box-shadow .12s ease; } .dial__btn:hover{ border-color:var(--cyan); } .dial__btn:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; } .dial__btn.is-on{ border-color:var(--magenta); background:rgba(255,46,151,.18); box-shadow:0 0 16px rgba(255,46,151,.4); } .dial__num{ display:block; font-family:var(--chunk); font-size:1.05rem; color:var(--cyan-lit); } .dial__name{ display:block; font-size:.82rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dial__genre{ display:block; font-size:.72rem; color:var(--yellow); letter-spacing:.5px; } .tv__post{ margin-top:14px; text-align:center; } .tv__post .btn--sm[href="#REPLACE"]{ display:none; } /* hide until a real post link is set */ /* ================= THE BAND :: cast cards ================= */ .band{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); } .member{ position:relative; background:linear-gradient(180deg, rgba(52,26,107,.9), rgba(21,10,46,.95)); border:2px solid var(--cyan); border-radius:14px; padding:16px 15px 15px; box-shadow:0 0 18px rgba(31,227,255,.22); transition:transform .12s ease, box-shadow .18s ease; } .member:nth-child(2n){ border-color:var(--magenta); box-shadow:0 0 18px rgba(255,46,151,.22); } .member:nth-child(3n){ border-color:var(--yellow); box-shadow:0 0 18px rgba(255,232,61,.2); } .member:hover{ transform:translateY(-4px); box-shadow:0 0 26px rgba(199,139,255,.5); } .member__badge{ display:inline-block; font-family:var(--osd); font-size:.72rem; letter-spacing:2px; color:#0b0718; background:var(--cyan); padding:3px 9px; border-radius:5px; margin-bottom:10px; } .member:nth-child(2n) .member__badge{ background:var(--magenta); } .member:nth-child(3n) .member__badge{ background:var(--yellow); } /* the avatar: a big instrument glyph on a neon disc */ .member__face{ width:74px; height:74px; margin:0 0 10px; display:flex; align-items:center; justify-content:center; font-size:2.4rem; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), rgba(162,75,255,.25) 55%, rgba(11,7,24,.6)); border:2px solid rgba(199,139,255,.6); box-shadow:inset 0 0 18px rgba(0,0,0,.5); } .member__name{ margin:0; font-family:var(--chunk); font-size:1.15rem; letter-spacing:.5px; color:var(--ink); text-shadow:0 0 10px rgba(31,227,255,.5); } .member__role{ margin:2px 0 8px; font-family:var(--osd); font-size:.82rem; letter-spacing:1px; color:var(--yellow); } .member__bio{ margin:0 0 10px; font-size:.9rem; color:var(--ink-soft); } .member__quote{ margin:0; font-family:var(--osd); font-size:.86rem; font-style:italic; color:var(--magenta-lit); border-top:1px dashed rgba(199,139,255,.35); padding-top:8px; } /* ================= WE PLAY EVERYTHING :: genres + set list ============= */ .genres{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:22px; } .genre{ font-family:var(--chunk); font-size:.9rem; letter-spacing:.5px; padding:8px 14px; border-radius:30px; color:#0b0718; background:var(--cyan); box-shadow:0 0 12px rgba(31,227,255,.4); } .genre:nth-child(4n+2){ background:var(--magenta); box-shadow:0 0 12px rgba(255,46,151,.4); } .genre:nth-child(4n+3){ background:var(--yellow); box-shadow:0 0 12px rgba(255,232,61,.4); } .genre:nth-child(4n+4){ background:var(--violet-lit); box-shadow:0 0 12px rgba(162,75,255,.4); } .setlist{ max-width:560px; margin:0 auto; border:2px dashed rgba(199,139,255,.45); border-radius:12px; padding:16px 18px; background:rgba(11,7,24,.5); } .setlist__head{ font-family:var(--osd); letter-spacing:2px; color:var(--cyan-lit); text-align:center; margin:0 0 10px; font-size:.9rem; } .setlist ol{ margin:0; padding:0 0 0 1.4em; } .setlist li{ margin:5px 0; color:var(--ink); } .setlist li small{ color:var(--ink-faint); font-family:var(--osd); } .setlist__note{ margin:12px 0 0; text-align:center; font-family:var(--osd); font-size:.82rem; color:var(--yellow); } /* ================= AIR GUITAR :: the synth gag ================= */ .airg{ text-align:center; max-width:640px; margin:0 auto; } .airg__body{ color:var(--ink-soft); margin:0 0 20px; } .strike{ cursor:pointer; font-family:var(--chunk); font-size:1.3rem; letter-spacing:1px; color:#0b0718; padding:18px 30px; border-radius:14px; background:linear-gradient(180deg, var(--magenta-lit), var(--magenta)); border:none; box-shadow:0 6px 0 var(--magenta-deep), 0 0 34px rgba(255,46,151,.5); transition:transform .07s ease, box-shadow .07s ease, filter .1s ease; } .strike:hover{ filter:brightness(1.08); } .strike:active{ transform:translateY(5px); box-shadow:0 1px 0 var(--magenta-deep), 0 0 20px rgba(255,46,151,.5); } .strike:focus-visible{ outline:3px solid var(--yellow); outline-offset:4px; } .strike[aria-pressed="true"]{ background:linear-gradient(180deg, var(--cyan-lit), var(--cyan)); box-shadow:0 6px 0 var(--cyan-deep), 0 0 40px rgba(31,227,255,.7); } .airg__note{ margin:16px auto 0; max-width:520px; font-family:var(--osd); font-size:.86rem; color:var(--ink-faint); line-height:1.7; } .airg__lights{ display:flex; justify-content:center; gap:10px; margin:22px 0 0; } .airg__led{ width:16px; height:16px; border-radius:50%; background:rgba(199,139,255,.2); border:1px solid rgba(199,139,255,.5); transition:background .08s ease, box-shadow .08s ease; } .airg__led.lit{ background:var(--lime); box-shadow:0 0 14px var(--lime); border-color:var(--lime); } /* ================= THE GIGS :: dates table ================= */ .gigs-wrap{ overflow-x:auto; } .gigs{ width:100%; border-collapse:collapse; } .gigs th{ font-family:var(--osd); letter-spacing:2px; font-size:.8rem; color:var(--cyan-lit); text-align:left; padding:8px 12px; border-bottom:2px solid var(--cyan); } .gigs td{ padding:12px; border-bottom:1px solid rgba(199,139,255,.2); color:var(--ink); vertical-align:top; } .gigs__with{ color:var(--yellow); font-family:var(--osd); font-size:.82rem; } .gigs__empty td{ text-align:center; color:var(--ink-faint); font-family:var(--osd); letter-spacing:1px; } /* ================= BOOKING ================= */ .booking{ display:grid; gap:26px; grid-template-columns:1fr; } @media (min-width:680px){ .booking{ grid-template-columns:1fr 1fr; } } .minihead{ font-family:var(--chunk); font-size:1.05rem; letter-spacing:.5px; color:var(--yellow); margin:0 0 8px; text-shadow:0 0 10px rgba(255,232,61,.4); } .booking p{ margin:0 0 12px; color:var(--ink-soft); } .maillink{ font-family:var(--osd); color:var(--cyan-lit); word-break:break-all; text-shadow:0 0 8px rgba(31,227,255,.4); } .maillink:hover{ color:#fff; } .links{ display:flex; flex-wrap:wrap; gap:9px; margin:4px 0 8px; } .chip{ font-family:var(--osd); font-size:.82rem; letter-spacing:1px; text-decoration:none; color:var(--ink); padding:7px 12px; border-radius:8px; background:rgba(162,75,255,.18); border:1px solid rgba(199,139,255,.5); transition:background .12s ease, color .12s ease; } .chip:hover{ background:var(--cyan); color:#0b0718; } .chip--dead{ display:none; } /* a chip still pointing at #REPLACE removes itself */ /* the mailing-list form */ .subscribe{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; } .subscribe input[type="email"]{ flex:1 1 200px; min-width:0; font-family:var(--osd); font-size:.95rem; color:var(--ink); padding:11px 13px; border-radius:9px; background:rgba(11,7,24,.7); border:2px solid var(--violet); } .subscribe input[type="email"]::placeholder{ color:var(--ink-faint); } .subscribe input[type="email"]:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 14px rgba(31,227,255,.4); } .form-msg{ flex:1 1 100%; margin:6px 0 0; min-height:1.2em; font-family:var(--osd); font-size:.86rem; color:var(--lime); } /* the honeypot: off-screen, invisible to people, catnip to bots */ .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ================= FOOTER ================= */ .foot{ text-align:center; margin-top:34px; padding-top:22px; border-top:2px solid var(--violet); } .marks{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:18px; } .mark{ font-family:var(--osd); font-size:.72rem; letter-spacing:1px; line-height:1.4; color:var(--ink-faint); text-align:center; border:1px solid rgba(199,139,255,.35); border-radius:7px; padding:7px 11px; background:rgba(11,7,24,.5); } .mark b{ color:var(--cyan-lit); } .foot__line{ margin:6px 0; color:var(--ink-soft); } .foot__small{ font-size:.86rem; color:var(--ink-faint); } .foot__small a{ color:var(--magenta-lit); text-decoration:none; } .foot__small a:hover{ color:#fff; text-decoration:underline; } .counter{ font-family:var(--osd); letter-spacing:2px; color:var(--cyan-lit); margin-bottom:12px; font-size:.95rem; } .counter__digits{ display:inline-block; font-family:var(--chunk); font-size:1.3rem; color:var(--yellow); letter-spacing:3px; padding:2px 8px; margin-left:6px; background:rgba(11,7,24,.8); border:1px solid var(--yellow); border-radius:6px; text-shadow:0 0 10px rgba(255,232,61,.5); } /* ================= REDUCED MOTION ================= * Kill everything that moves for visitors who ask for it: the grid scroll, the neon flicker, the crawl, the static, the tally blink. JS also skips the confetti entirely, so nothing here needs to hide #confetti children. */ @media (prefers-reduced-motion: reduce){ *{ animation:none !important; scroll-behavior:auto !important; } body::before{ animation:none; } .crawl__track{ transform:translateX(0); } .static{ opacity:.12; } }