/* Palette pulled from the backdrop painting: ochre walls, aged cream signboard, the salon's teal doorframe, and the vermilion of the hand-painted lettering. */ :root{ --bg:#120d0a; --bg2:#231710; --amber:#ffb347; --amber-deep:#ff8a2b; --gold:#f0cf8e; --cream:#f4e8d0; --red:#c8392b; --teal:#4e8f89; /* the doorframe / shutters */ --ink:#0c0906; --panel:#1c1510; --line:rgba(240,207,142,.12); } *{box-sizing:border-box;margin:0;padding:0} /* Background lives on : body has overflow-x:hidden, which would stop background propagation to the canvas and leave the page below the fold white. */ html{ min-height:100%; background: radial-gradient(120% 90% at 50% -10%, #3a2415 0%, var(--bg2) 34%, var(--bg) 78%) var(--bg) no-repeat fixed; overflow-x:hidden; } body{ background:transparent; color:var(--cream); font-family:"Anek Telugu","Baloo Tammudu 2",system-ui,sans-serif; min-height:100vh; overflow-x:hidden; text-align:center; -webkit-font-smoothing:antialiased; } /* ---------- Backdrop layers ---------- */ .bg-grid,.bg-glow,.grain,.vignette,.backdrop,.bg-scrim{position:fixed;inset:0;pointer-events:none;z-index:0} /* Drop your image at assets/img/backdrop.jpg — app.js probes for it and sets the src, so a missing file costs nothing and logs no 404. No blend mode and no sepia: the artwork is already warm, and luminosity blending would strip the colour straight out of a painting. */ .backdrop{ background-size:cover;background-position:center; opacity:0;filter:saturate(.96) contrast(1.02); transition:opacity 1.4s ease; } .backdrop.ready{opacity:.82} /* Darkens hardest right behind the deck so the boombox keeps its contrast, while the corners of the artwork stay legible. Only present with a backdrop. */ .bg-scrim{ opacity:0;transition:opacity 1.4s ease; background: radial-gradient(56% 50% at 50% 41%, rgba(12,8,5,.80) 0%, rgba(12,8,5,.50) 52%, rgba(12,8,5,.12) 100%), linear-gradient(180deg, rgba(12,8,5,.40) 0%, rgba(12,8,5,.04) 26%, rgba(12,8,5,.44) 100%); } /* the base vignette would double up on the scrim and crush the art */ body.has-backdrop .vignette{opacity:.45} body.has-backdrop .bg-glow{opacity:.6} body.has-backdrop .bg-scrim{opacity:1} /* the decorative grid competes with real artwork — pull it back */ body.has-backdrop .bg-grid{opacity:.12} body.has-backdrop .grain{opacity:.016} .bg-grid{ background-image: linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(120% 80% at 50% 20%,#000 30%,transparent 90%); opacity:.28; } .bg-glow{ background: radial-gradient(50% 40% at 50% 44%, rgba(255,138,43,.18), transparent 70%), radial-gradient(40% 30% at 18% 80%, rgba(224,57,43,.10), transparent 70%), radial-gradient(40% 30% at 82% 78%, rgba(255,179,71,.10), transparent 70%); mix-blend-mode:screen; } /* Film grain: deliberate, but kept near the threshold of noticing. */ .grain{ opacity:.025;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 8s steps(5) infinite; } @media (prefers-reduced-motion:reduce){.grain{animation:none}} @keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-2%)}60%{transform:translate(-2%,4%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}} .vignette{box-shadow:inset 0 0 240px 60px rgba(0,0,0,.7);background:radial-gradient(120% 120% at 50% 40%,transparent 55%,rgba(0,0,0,.55))} /* ---------- Masthead ---------- */ .masthead{ position:relative;z-index:3; display:flex;align-items:center;justify-content:center;gap:22px; padding:30px 16px 0;flex-wrap:wrap; } .title{ font-family:"Baloo Tammudu 2",cursive; font-weight:800; font-size:clamp(40px,7vw,92px); line-height:1.2; letter-spacing:.5px; padding-bottom:.08em; color:var(--amber); /* Gradient-filled text: no text-shadow here on purpose. With a transparent fill the shadow shows *through* the glyphs and muddies the gradient from the inside — depth and glow have to come from filter: drop-shadow, which applies to the already-filled result. */ background:linear-gradient(178deg,#fff4dc 4%,#ffd07a 42%,#ffa63f 74%,#f2762a 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; filter: drop-shadow(0 2px 1px rgba(58,24,6,.55)) /* crisp edge off the artwork */ drop-shadow(0 8px 20px rgba(0,0,0,.55)) /* lifts it off the roofline */ drop-shadow(0 0 34px rgba(255,158,68,.42)); /* warm lamp glow */ } .subhead{position:relative;z-index:3;margin-top:10px;display:flex;flex-direction:column;gap:4px;align-items:center} /* text sits over artwork now — shadows keep it readable on any patch of it */ .live{font-size:15px;color:var(--cream);opacity:.95;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.85)} .live b{color:var(--gold)} .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:pulse 1.4s infinite} @keyframes pulse{50%{opacity:.35;transform:scale(.8)}} .ticker{font-size:13px;opacity:.65;font-style:italic;min-height:18px;text-shadow:0 2px 8px rgba(0,0,0,.8)} /* ---------- 3D stage ---------- */ #stage{position:relative;z-index:2;width:100%;height:min(56vh,560px);margin-top:6px} #scene{width:100%;height:100%;display:block;cursor:grab} #scene:active{cursor:grabbing} .load-hint{ position:absolute;left:50%;bottom:6px;transform:translateX(-50%); font-family:"Space Mono",monospace;font-size:12px;letter-spacing:1px; color:var(--gold);opacity:.7;pointer-events:none; animation:blink 2.4s infinite; } @keyframes blink{50%{opacity:.25}} /* ---------- Now playing ---------- */ .now{ position:relative;z-index:3;max-width:520px;margin:2px auto 0;padding:14px 18px; display:flex;flex-direction:column;gap:12px;align-items:center; } .now[hidden]{display:none} .np-meta{display:flex;flex-direction:column;gap:8px} .np-side{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:3px;color:var(--teal);opacity:.95} .np-title{font-family:"Baloo Tammudu 2";font-weight:700;font-size:clamp(22px,4vw,30px);color:var(--gold);line-height:1.5;padding-bottom:.1em} .np-sub{font-size:13px;opacity:.6} .transport{display:flex;align-items:center;gap:18px} .tbtn{ width:46px;height:46px;border-radius:50%;border:1px solid var(--line); background:radial-gradient(120% 120% at 30% 25%,#2c211a,#140e0a); color:var(--cream);font-size:16px;cursor:pointer; display:grid;place-items:center;transition:transform .12s,box-shadow .2s,color .2s; box-shadow:0 6px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08); } .tbtn:hover{transform:translateY(-2px);color:var(--amber)} .tbtn:active{transform:translateY(0) scale(.94)} .tbtn.play{ width:62px;height:62px;font-size:22px;color:var(--ink); background:radial-gradient(120% 120% at 30% 25%,#ffd488,#ff8a2b); box-shadow:0 8px 22px rgba(255,138,43,.45),inset 0 2px 0 rgba(255,255,255,.4); } .tbtn.play:hover{color:var(--ink)} /* hold-to-rewind sits with the transport, where it belongs */ .tbtn.rw{font-size:12px;letter-spacing:-1px} .tbtn.rw.active{ transform:scale(.93);color:var(--red); border-color:rgba(224,57,43,.55); box-shadow:0 0 16px rgba(224,57,43,.4),inset 0 2px 8px rgba(0,0,0,.6); animation:rwblink .24s steps(2) infinite; } @keyframes rwblink{50%{opacity:.45}} .scrub{display:flex;align-items:center;gap:10px;width:100%;max-width:420px} .scrub .t{font-family:"Space Mono",monospace;font-size:11px;opacity:.7;min-width:34px} .bar{flex:1;height:6px;border-radius:6px;background:rgba(255,255,255,.1);cursor:pointer;overflow:hidden;position:relative} .fill{position:absolute;inset:0;width:0%;background:linear-gradient(90deg,var(--amber),var(--red));box-shadow:0 0 10px var(--amber)} /* ---------- Cassette rack ---------- */ .rack{ position:relative;z-index:3; display:flex;gap:18px;flex-wrap:wrap;justify-content:center; padding:22px 18px 8px;max-width:1080px;margin:0 auto; } .cass{ width:196px;cursor:pointer;user-select:none; transition:transform .22s cubic-bezier(.2,.9,.3,1.3),filter .22s; display:flex;flex-direction:column;align-items:center;gap:9px; } .cass:hover{transform:translateY(-8px) rotate(-1deg)} .cass.active .shell{box-shadow:0 0 0 2px var(--amber),0 16px 30px rgba(255,138,43,.35)} .shell{ width:100%;aspect-ratio:1.58/1;border-radius:9px;position:relative;overflow:hidden; background:linear-gradient(160deg,var(--c1,#c9642f),var(--c2,#7a3714)); box-shadow:0 10px 22px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.18),inset 0 -6px 12px rgba(0,0,0,.35); padding:12px 12px 10px;display:flex;flex-direction:column;justify-content:space-between; border:1px solid rgba(0,0,0,.35); } .shell::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.14) 48%,transparent 56%);pointer-events:none} .shell-top{display:flex;justify-content:space-between;align-items:center} .shell-brand{font-family:"Space Mono",monospace;font-size:8px;letter-spacing:1px;color:rgba(0,0,0,.55);font-weight:700} .shell-side{font-family:"Space Mono",monospace;font-size:8px;color:rgba(0,0,0,.5)} .window{ background:linear-gradient(180deg,#161213,#000);border-radius:5px;height:44px;margin:2px 0; display:flex;align-items:center;justify-content:center;gap:22px; box-shadow:inset 0 2px 6px rgba(0,0,0,.8);border:1px solid rgba(0,0,0,.6);position:relative; } .window::before{content:"";position:absolute;inset:0;border-radius:5px;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 40%)} .reel{width:24px;height:24px;border-radius:50%;background: repeating-conic-gradient(#5a5a5a 0 12deg,#2f2f2f 12deg 24deg); border:3px solid #cfcfcf;position:relative;box-shadow:0 0 0 2px #111} .reel::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#111} .cass.active .reel{animation:spin 1.6s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .shell-label{ background:var(--cream);color:#2a1a0e;border-radius:3px;padding:3px 6px; font-family:"Baloo Tammudu 2";font-weight:700;font-size:12px;line-height:1.5; box-shadow:inset 0 -2px 3px rgba(0,0,0,.15);text-align:center; } .cass-name{ background:var(--gold);color:#3a2408;font-family:"Baloo Tammudu 2";font-weight:700; font-size:13px;line-height:1.6;padding:2px 12px 4px;border-radius:4px;box-shadow:0 4px 8px rgba(0,0,0,.4); } .foot{position:relative;z-index:3;padding:14px 0 30px;font-size:12px;opacity:.5} .foot .heart{color:var(--red)} .mono{font-family:"Space Mono",monospace} @media (max-width:640px){ .cass{width:150px} #stage{height:38vh} /* Title on its own line, badges tucked underneath so nothing overlaps */ .masthead{gap:10px;padding:18px 12px 0} .title{order:-1;flex-basis:100%;font-size:clamp(38px,13vw,60px)} .transport{gap:14px} }