/* My Dee Jay Radio — styles shared by every page (moved out of index.html as is). */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --red:#E8001D;--red2:#FF4D4D;--black:#0A0A0A;--surface:#141414;--surface2:#1C1C1C; --white:#FFFFFF;--gray:#888;--gray2:#555;--border:#2A2A2A; } html{scroll-behavior:smooth} body{background:var(--black);color:var(--white);font-family:'Inter',sans-serif;font-size:15px;line-height:1.6;overflow-x:hidden} a{color:inherit;text-decoration:none} button{font-family:'Inter',sans-serif;cursor:pointer;border:none;background:none} input{font-family:'Inter',sans-serif} .top-player{position:sticky;top:0;z-index:1000;background:rgba(10,10,10,0.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:10px 24px;display:flex;align-items:center;gap:16px} .tp-logo{display:flex;align-items:center;gap:10px;flex-shrink:0} .tp-brand{font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:1px;color:var(--white)} .tp-brand span{color:var(--red)} .tp-track{flex:1;min-width:0} .tp-now{font-size:9px;letter-spacing:2px;color:var(--red);font-weight:600;margin-bottom:1px} .tp-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tp-artist{font-size:11px;color:var(--gray);font-family:'JetBrains Mono',monospace} .tp-mid{display:flex;align-items:center;gap:14px;flex-shrink:0} .tp-play{width:40px;height:40px;background:var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .15s,background .15s;border:none;cursor:pointer} .tp-play:hover{background:var(--red2);transform:scale(1.07)} .tp-play svg{width:16px;height:16px;fill:white;margin-left:2px} .tp-vol{display:flex;align-items:center;gap:8px} .tp-vol svg{width:13px;height:13px;fill:var(--gray2);flex-shrink:0} .vol-r{-webkit-appearance:none;width:72px;height:3px;background:var(--border);border-radius:2px;outline:none} .vol-r::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--white);border-radius:50%;cursor:pointer} .tp-live{display:flex;align-items:center;gap:6px;background:#1a0004;border:1px solid #E8001D33;border-radius:20px;padding:4px 10px;flex-shrink:0} .ld{width:6px;height:6px;background:var(--red);border-radius:50%;animation:blink 1.4s infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.2}} .lt{font-size:9px;font-weight:700;color:var(--red);letter-spacing:1.5px} .tp-count{font-size:11px;color:var(--gray2);font-family:'JetBrains Mono',monospace;flex-shrink:0} .tp-count b{color:var(--red)} .tp-add{font-size:11px;font-weight:600;padding:5px 10px;border-radius:6px;background:transparent;color:var(--red);border:1px solid var(--red);transition:all .15s;flex-shrink:0;display:none;cursor:pointer} .tp-add:hover{background:var(--red);color:white} .tp-add.show{display:block} .hero{padding:70px 48px 56px;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 300px;gap:60px;align-items:center} .hero-eye{font-size:10px;letter-spacing:3px;color:var(--red);font-weight:600;margin-bottom:14px;text-transform:uppercase} .hero-h{font-family:'Bebas Neue',sans-serif;font-size:clamp(54px,7vw,94px);line-height:.93;letter-spacing:1px;margin-bottom:18px} .hero-h .r{color:var(--red)} .hero-sub{font-size:14px;color:var(--gray);line-height:1.75;max-width:460px;margin-bottom:28px} .hero-ctas{display:flex;gap:12px;flex-wrap:wrap} .btn-p{padding:12px 26px;background:var(--red);color:white;border-radius:8px;font-size:13px;font-weight:600;letter-spacing:.5px;transition:background .15s,transform .1s;border:none;cursor:pointer;display:inline-block} .btn-p:hover{background:var(--red2);transform:translateY(-1px)} .btn-g{padding:11px 26px;border:1px solid var(--border);color:var(--gray);border-radius:8px;font-size:13px;font-weight:500;transition:all .15s;display:inline-block} .btn-g:hover{border-color:var(--gray);color:var(--white)} .vinyl-wrap{display:flex;justify-content:center;align-items:center} #mainVinyl{transform-origin:130px 130px;animation:spin 5s linear infinite;animation-play-state:paused} #tpVinyl{transform-origin:17px 17px;animation:spin 4s linear infinite;animation-play-state:paused} @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .sep{border:none;border-top:1px solid var(--border);margin:0 48px} .sec{padding:44px 48px;max-width:1200px;margin:0 auto} .sec-eye{font-size:9px;letter-spacing:3px;color:var(--red);font-weight:700;margin-bottom:5px;text-transform:uppercase} .sec-title{font-family:'Bebas Neue',sans-serif;font-size:30px;font-weight:400;letter-spacing:.5px;margin-bottom:22px} .track-list{display:flex;flex-direction:column;gap:1px} .tr{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:8px;transition:background .15s} .tr:hover{background:var(--surface)} .tr.now{background:var(--surface)} .tn{font-size:11px;color:var(--gray2);width:16px;text-align:center;font-family:'JetBrains Mono',monospace} .teq{display:none;align-items:flex-end;gap:2px;width:16px;height:14px} .tr.now .tn{display:none} .tr.now .teq{display:flex} .eb{width:3px;background:var(--red);border-radius:2px;animation:eq .7s infinite alternate} .eb:nth-child(2){animation-duration:.5s} .eb:nth-child(3){animation-duration:.9s} @keyframes eq{from{height:3px}to{height:12px}} .ti{flex:1} .tname{font-size:13px;font-weight:500;color:#e8e8e8} .tr.now .tname{color:var(--red)} .tart{font-size:11px;color:var(--gray);margin-top:1px;font-family:'JetBrains Mono',monospace} .ttime{font-size:11px;color:var(--gray2);font-family:'JetBrains Mono',monospace} .now-tag{font-size:9px;background:#1a0004;border:1px solid #E8001D33;color:var(--red);padding:2px 7px;border-radius:4px;font-weight:700;letter-spacing:1px} .sched-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px} .sc{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;transition:border-color .2s} .sc:hover{border-color:var(--gray2)} .sc.live{border-color:#FFD70044;background:#0f0d00} .sc-day{font-size:9px;letter-spacing:2px;color:var(--red);font-weight:700;margin-bottom:8px;text-transform:uppercase} .sc.live .sc-day{color:#FFD700} .sc-show{font-size:13px;font-weight:600;margin-bottom:2px} .sc-genre{font-size:11px;color:var(--gray);margin-bottom:8px} .sc-time{font-size:11px;color:var(--gray2);font-family:'JetBrains Mono',monospace} .ig{display:grid;grid-template-columns:1fr 1fr;gap:20px} #requestSong{scroll-margin-top:84px} .chat-box,.req-box{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden} .bh{padding:13px 16px;border-bottom:1px solid var(--border);font-size:9px;letter-spacing:2px;color:var(--gray);font-weight:700;text-transform:uppercase;display:flex;align-items:center;gap:8px} .chat-msgs{padding:12px 16px;display:flex;flex-direction:column;gap:9px;height:260px;overflow-y:auto;overscroll-behavior:contain} .chat-msgs::-webkit-scrollbar{width:3px} .chat-msgs::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px} .msg-head{display:flex;align-items:center;gap:6px;margin-bottom:2px} .mu{font-size:10px;font-weight:700} .mu.bot{color:var(--gray)} .mu.real{color:#4FC3F7} .mu.sys{color:#FFD700} .mbadge{font-size:8px;padding:1px 5px;border-radius:3px;font-weight:700;letter-spacing:.5px} .mbadge.b{background:#1a1a1a;color:#555;border:1px solid #333} .mbadge.r{background:#001a2a;color:#4FC3F7;border:1px solid #004466} .mbadge.s{background:#1a1600;color:#FFD700;border:1px solid #443300} .mbadge.l{background:#0d1a10;color:#4caf50;border:1px solid #1a4a1a} .mt{font-size:13px;color:#ccc;line-height:1.5} .nick-wrap{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:center} .nick-in{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:7px 10px;font-size:12px;color:var(--white);outline:none} .nick-in::placeholder{color:var(--gray2)} .nick-in:focus{border-color:#E8001D44} .nick-set{background:var(--red);border:none;border-radius:6px;padding:7px 12px;color:white;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap} .cf{display:flex;border-top:1px solid var(--border)} .ci-msg{flex:1;background:transparent;border:none;padding:11px 16px;font-size:13px;color:var(--white);outline:none;font-family:'Inter',sans-serif} .ci-msg::placeholder{color:var(--gray2)} .cs{background:var(--red);border:none;padding:0 16px;color:white;font-size:11px;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:background .15s} .cs:hover{background:var(--red2)} .rb{padding:16px;display:flex;flex-direction:column;gap:10px} .rf{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:9px 13px;font-size:13px;color:var(--white);outline:none;width:100%;transition:border-color .2s} .rf:focus{border-color:#E8001D44} .rf::placeholder{color:var(--gray2)} select.rf{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center} select.rf:invalid{color:var(--gray2)} select.rf option{color:var(--white);background:var(--surface2)} .rf[readonly]{color:var(--gray);cursor:default} .rsugg{display:none;flex-direction:column;margin-top:-6px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;overflow:hidden;max-height:300px;overflow-y:auto} .rsugg.on{display:flex} .rsg{display:flex;flex-direction:column;gap:2px;text-align:left;background:none;border:none;border-bottom:1px solid var(--border);padding:9px 13px;color:var(--white);cursor:pointer;font-family:inherit} .rsg:last-child{border-bottom:none} .rsg:hover,.rsg:focus{background:#E8001D14;outline:none} .rsg-t{font-size:13px;font-weight:600} .rsg-a{font-size:11px;color:var(--gray)} .rsg[disabled]{cursor:not-allowed;opacity:.45} .rsg-n{font-size:10px;color:#ffb74d;font-weight:600;letter-spacing:.3px} .rsg-x{font-size:11px;color:var(--gray);padding:10px 13px;line-height:1.5} .rsub{width:100%;padding:11px;background:var(--red);border:none;border-radius:8px;color:white;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s} .rsub:hover{background:var(--red2)} .rconf{display:none;padding:10px 13px;background:#0a1f0a;border:1px solid #1a4a1a;border-radius:8px;font-size:12px;color:#4caf50;text-align:center} .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .aq{font-family:'Bebas Neue',sans-serif;font-size:34px;line-height:1.1;color:var(--red);margin-bottom:18px} .at{font-size:14px;color:var(--gray);line-height:1.8;margin-bottom:14px} .lo-intro{max-width:760px;margin-bottom:22px} .faq{display:grid;gap:10px;max-width:860px} .faq details{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:0 18px} .faq summary{cursor:pointer;list-style:none;padding:15px 24px 15px 0;font-size:14px;font-weight:600;position:relative} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';position:absolute;right:0;top:12px;font-size:18px;color:var(--red)} .faq details[open] summary::after{content:'–'} .faq details p{font-size:13px;color:var(--gray);line-height:1.8;padding-bottom:16px} .faq a{color:var(--white)} .af{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:24px;border-top:1px solid var(--border)} .af-name{font-size:14px;font-weight:600} .af-role{font-size:11px;color:var(--red);margin-top:1px;letter-spacing:.5px} .dj-cards{display:flex;flex-direction:column;gap:14px} .djc{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;display:flex;align-items:flex-start;gap:16px;transition:border-color .2s} .djc:hover{border-color:var(--gray2)} .dja{width:64px;height:64px;flex-shrink:0;border-radius:50%;overflow:hidden;background:#111} .dja img{width:100%;height:100%;object-fit:cover;border-radius:50%} .djc-name{font-size:15px;font-weight:600;margin-bottom:1px} .djc-tag{font-size:10px;color:var(--red);margin-bottom:8px;letter-spacing:.5px;font-weight:600;text-transform:uppercase} .djc-genres{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px} .gp{font-size:10px;padding:3px 8px;border-radius:4px;background:var(--surface2);border:1px solid var(--border);color:var(--gray);font-family:'JetBrains Mono',monospace} .gp.main{background:#1a0004;border-color:#E8001D33;color:var(--red)} .djc-follow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--gray);border:1px solid var(--border);border-radius:6px;padding:6px 12px;transition:all .15s} .djc-follow:hover{border-color:var(--red);color:var(--red)} .djc-follow svg{width:14px;height:14px;fill:currentColor} .sp-banner{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:48px;text-align:center;position:relative;overflow:hidden} .sp-banner::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--red)} .sp-eye{font-size:9px;letter-spacing:3px;color:var(--red);font-weight:700;margin-bottom:12px;text-transform:uppercase} .sp-h{font-family:'Bebas Neue',sans-serif;font-size:46px;font-weight:400;letter-spacing:1px;margin-bottom:14px} .sp-sub{font-size:14px;color:var(--gray);max-width:540px;margin:0 auto 32px;line-height:1.75} .sp-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:36px;text-align:left} .sp-tier{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:20px} .sp-tn{font-size:9px;letter-spacing:2px;font-weight:700;margin-bottom:8px;text-transform:uppercase} .sp-tier.br .sp-tn{color:#9A9A9A} .sp-tier.si .sp-tn{color:#FFFFFF} .sp-tier.go .sp-tn{color:#E8001D} .sp-tp{font-size:12px;color:var(--gray);line-height:1.9} .sp-ctas{display:flex;justify-content:center;gap:12px;flex-wrap:wrap} .btn-wa{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;background:#25D366;color:white;border-radius:8px;font-size:13px;font-weight:600;transition:background .15s,transform .1s} .btn-wa:hover{background:#1fb956;transform:translateY(-1px)} .btn-wa svg{width:18px;height:18px;fill:white} .btn-mail{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border:1px solid var(--border);color:var(--gray);border-radius:8px;font-size:13px;font-weight:500;transition:all .15s} .btn-mail:hover{border-color:var(--red);color:var(--red)} .btn-mail svg{width:16px;height:16px;fill:currentColor} .cg{display:grid;grid-template-columns:1fr 1fr;gap:56px} .ci-row{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px} .ci-ico{width:36px;height:36px;background:var(--surface);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .ci-ico svg{width:16px;height:16px;fill:var(--red)} .ci-label{font-size:9px;letter-spacing:1.5px;color:var(--gray);font-weight:700;margin-bottom:3px;text-transform:uppercase} .ci-val{font-size:13px;color:var(--white)} .ci-val a{color:var(--red);transition:color .15s} .ci-val a:hover{color:var(--red2)} .soc-row{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap} .soc-btn{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:12px;font-weight:500;transition:all .15s} .soc-btn:hover{border-color:var(--red);color:var(--red)} .soc-btn svg{width:15px;height:15px;fill:currentColor} footer{border-top:1px solid var(--border);padding:28px 48px;display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto} .fb{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:.5px} .fb span{color:var(--red)} .fc{font-size:11px;color:var(--gray)} .fl{font-size:11px;color:var(--gray2)} .f-admin{color:var(--gray2);text-decoration:underline;transition:color .15s} .f-admin:hover{color:var(--red)} .ib{display:none;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 20px;align-items:center;gap:14px;z-index:900;box-shadow:0 8px 32px rgba(0,0,0,.7);max-width:400px;width:calc(100% - 32px)} .ib.show{display:flex} .ib-text{flex:1;font-size:12px;color:var(--gray)} .ib-text b{color:var(--white);display:block;margin-bottom:2px;font-size:13px} .ib-btn{background:var(--red);color:white;border:none;padding:8px 16px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0} .ib-x{font-size:16px;color:var(--gray2);cursor:pointer;padding:4px;flex-shrink:0} @media(max-width:768px){ .hero{grid-template-columns:1fr;padding:36px 20px;gap:28px} .vinyl-wrap{order:-1} .sec{padding:28px 20px} .sep{margin:0 20px} .ig,.about-grid,.cg{grid-template-columns:1fr} .sp-tiers{grid-template-columns:1fr} .top-player{flex-wrap:wrap;padding:8px 14px;gap:10px} footer{flex-direction:column;gap:10px;text-align:center;padding:20px} .sched-grid{grid-template-columns:1fr 1fr} /* Mobile keyboard fix — chat box adapts when keyboard opens */ .chat-box{display:flex;flex-direction:column} .chat-msgs{flex:1;height:160px;min-height:120px} .ig{gap:16px} /* Prevent layout jump on keyboard open */ .sec#request{padding-bottom:env(keyboard-inset-height,20px)} } /* PWA install prompt — mobile optimized */ @media(max-width:480px){ .ib{bottom:10px;border-radius:10px;padding:12px 16px} .top-player .tp-count{display:none} /* Wordmark on two lines (MY DEE JAY / RADIO) so the track info keeps its room */ .tp-brand{font-size:16px;line-height:1} .tp-brand span::after{content:"\A";white-space:pre} /* Track info gets its own row; phones use their volume buttons */ .tp-vol{display:none} .tp-mid{margin-left:auto} .tp-track{order:5;flex-basis:100%} } /* ── SCHEDULE SECTION ── */ .schedule-wrap{padding:0} .sch-tabs{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:1.5rem;background:#1a1a1a;border-radius:10px;padding:4px} .sch-tab{font-size:12px;padding:7px 16px;border-radius:7px;cursor:pointer;background:transparent;color:var(--gray);border:none;transition:all .15s;font-weight:500;letter-spacing:.3px} .sch-tab.on{background:#252525;color:var(--white);box-shadow:0 0 0 0.5px var(--border)} .sch-tab:hover:not(.on){color:var(--white)} /* Icons: inline SVG at the current font size */ .ico{display:inline-flex;vertical-align:-.15em} .ico svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .sch-tab i{margin-right:5px;font-size:13px;vertical-align:-2px} .sch-sec-label{font-size:9px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.12em;margin:0 0 1.25rem;display:flex;align-items:center;gap:10px} .sch-sec-label::after{content:'';flex:1;height:0.5px;background:var(--border)} .sch-block{border-radius:12px;border:0.5px solid var(--border);padding:1rem 1.2rem;margin-bottom:10px;background:#111;border-left:3px solid transparent;transition:border-color .2s} .sch-block:hover{border-color:var(--gray2)} .sch-block.sch-open{border:1.5px dashed #1baf7a55;border-left:3px solid #1baf7a;background:#0d1410} .sch-bhead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px;flex-wrap:wrap} .sch-time{font-size:15px;font-weight:600;color:var(--white);line-height:1.1;font-family:'JetBrains Mono',monospace} .sch-sub{font-size:10px;color:var(--gray);margin-top:3px;letter-spacing:.3px} .sch-title{font-size:13px;font-weight:600;color:var(--white);margin-bottom:4px} .sch-desc{font-size:12px;color:var(--gray);line-height:1.65} .sch-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px} .sch-tag{font-size:10px;font-weight:600;padding:2px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:4px;letter-spacing:.2px} .st-live{background:#1a0004;color:#ff6b6b;border:0.5px solid #E8001D33} .st-rb{background:#001a0d;color:#4caf50;border:0.5px solid #1baf7a33} .st-guest{background:#1a1430;color:#a48aff;border:0.5px solid #7f77dd33} .st-club{background:#0d0d1f;color:#818cf8;border:0.5px solid #26215c44} .st-auto{background:#1a1a1a;color:var(--gray);border:0.5px solid var(--border)} .st-amber{background:#1a1000;color:#ffb74d;border:0.5px solid #eda10033} .st-pink{background:#1a0a12;color:#f48fb1;border:0.5px solid #d4537e33} .st-blue{background:#001428;color:#64b5f6;border:0.5px solid #2a78d633} .st-green{background:#0d1a00;color:#81c784;border:0.5px solid #27500a44} .st-open{background:#001a0d;color:#4caf50;border:0.5px dashed #1baf7a55} .sch-open-card{margin-top:12px;border:0.5px solid #1baf7a33;border-radius:10px;overflow:hidden} .sch-open-header{background:#0d1a10;padding:.65rem 1rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;border-bottom:0.5px solid #1baf7a22} .sch-open-title{font-size:12px;font-weight:600;color:#4caf50} .sch-open-sub{font-size:10px;color:#2e7d32;margin-top:2px} .sch-perks{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:.75rem 1rem;background:#0a0f0a} .sch-perk{display:flex;align-items:flex-start;gap:7px;font-size:11px;color:var(--gray)} .sch-perk i{color:#4caf50;flex-shrink:0;margin-top:1px;font-size:13px} .sch-open-footer{padding:.65rem 1rem;background:#080d08;border-top:0.5px solid #1baf7a22;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px} .sch-email{font-size:11px;color:var(--gray2)} .sch-email b{color:var(--gray)} .sch-submit-btn{font-size:11px;font-weight:700;padding:7px 18px;background:#1baf7a;color:#fff;border:none;border-radius:7px;cursor:pointer;transition:background .15s;letter-spacing:.3px} .sch-submit-btn:hover{background:#0f6e56} .sch-grid-wrap{overflow-x:auto;padding-bottom:4px;margin-top:4px} .sch-grid{display:grid;grid-template-columns:54px repeat(7,1fr);gap:3px;min-width:520px} .sch-gh{font-size:10px;font-weight:700;color:var(--gray2);text-align:center;padding:5px 2px;letter-spacing:.08em} .sch-gt{font-size:9px;color:var(--gray2);text-align:right;padding:3px 6px 3px 0;align-self:center;font-weight:500;white-space:nowrap;line-height:1.3;font-family:'JetBrains Mono',monospace} .sch-gc{height:32px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;overflow:hidden;padding:0 3px;white-space:nowrap;text-align:center;letter-spacing:.2px} .sch-gc.sch-av{border:1px dashed #1baf7a55} .sch-legend{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .sch-leg{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--gray)} .sch-leg-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0;border:0.5px solid transparent} @media(max-width:768px){ .sch-perks{grid-template-columns:1fr} .sch-bhead{gap:6px} .sch-time{font-size:13px} } @media(max-width:480px){ .sch-tabs{gap:2px;padding:3px} .sch-tab{font-size:11px;padding:5px 10px} .sch-tab i{display:none} } /* ── TOP NZ CITIES ── */ .top-cities{margin-top:18px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px} .tc-head{font-size:10px;letter-spacing:2px;color:var(--gray);font-weight:700;text-transform:uppercase;margin-bottom:12px} .tc-list{list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin:0;padding:0} .tc-list li{display:flex;align-items:center;gap:10px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 14px;font-size:14px;font-weight:600} .tc-rank{font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--red);line-height:1} /* ── SOUND MOTIFS: spectrum, sound rings, waveform dividers, VU strip ── Quiet when the radio is off, alive when it plays (body.on-air, set in setPlayIcon). */ body{background:radial-gradient(1200px 600px at 85% -10%,#E8001D14,transparent 60%),radial-gradient(900px 500px at -10% 40%,#E8001D0a,transparent 60%),var(--black);background-attachment:fixed} .hero{position:relative;isolation:isolate} .hero-copy{position:relative} .hero{padding-bottom:120px} .hero-eq{position:absolute;left:48px;right:48px;bottom:0;height:96px;display:flex;align-items:flex-end;gap:5px;z-index:-1;opacity:.16;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent);mask-image:linear-gradient(to top,#000 10%,transparent);transition:opacity .6s} .hero-eq i,.vu-strip i{flex:1;height:var(--h);background:linear-gradient(to top,var(--red),var(--red2));border-radius:3px 3px 0 0;transform-origin:bottom;transform:scaleY(.35);animation:bar var(--d) ease-in-out var(--dl) infinite alternate;animation-play-state:paused} @keyframes bar{from{transform:scaleY(.18)}to{transform:scaleY(1)}} body.on-air .hero-eq{opacity:.28} body.on-air .hero-eq i,body.on-air .vu-strip i{animation-play-state:running} .vinyl-wrap{position:relative} .vinyl-wrap::before{content:'';position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,#E8001D2e,transparent 65%);z-index:-1} .ring{position:absolute;width:280px;height:280px;border-radius:50%;border:1px solid #E8001D55;opacity:0;pointer-events:none} body.on-air .ring{animation:ring 3.2s cubic-bezier(.2,.6,.3,1) infinite} body.on-air .ring:nth-child(2){animation-delay:1.07s} body.on-air .ring:nth-child(3){animation-delay:2.14s} @keyframes ring{0%{transform:scale(.92);opacity:.7}100%{transform:scale(1.45);opacity:0}} .sep{border:0;height:24px;margin:0 48px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 12.0 L4 12.0 L8 12.0 L12 11.9 L16 12.0 L20 12.1 L24 12.2 L28 12.2 L32 12.0 L36 11.7 L40 11.5 L44 11.5 L48 11.9 L52 12.4 L56 12.8 L60 12.7 L64 12.2 L68 11.5 L72 11.1 L76 11.1 L80 11.7 L84 12.4 L88 13.0 L92 12.9 L96 12.4 L100 11.6 L104 11.1 L108 11.1 L112 11.6 L116 12.3 L120 12.9 L124 13.0 L128 12.6 L132 11.7 L136 11.0 L140 10.8 L144 11.3 L148 12.2 L152 13.2 L156 13.5 L160 13.0 L164 11.8 L168 10.5 L172 9.9 L176 10.6 L180 12.1 L184 13.8 L188 14.5 L192 13.8 L196 12.0 L200 10.1 L204 9.2 L208 10.0 L212 11.8 L216 13.7 L220 14.5 L224 13.9 L228 12.3 L232 10.8 L236 9.7 L240 9.9 L244 11.4 L248 13.7 L252 15.4 L256 15.3 L260 13.1 L264 9.8 L268 7.5 L272 7.5 L276 10.3 L280 14.3 L284 17.2 L288 17.2 L292 14.2 L296 9.9 L300 6.7 L304 6.6 L308 9.5 L312 13.7 L316 16.7 L320 16.9 L324 14.4 L328 10.9 L332 8.4 L336 8.1 L340 9.9 L344 12.6 L348 14.5 L352 15.3 L356 14.2 L360 11.5 L364 8.8 L368 7.6 L372 9.0 L376 12.2 L380 15.5 L384 16.9 L388 15.4 L392 12.1 L396 8.7 L400 7.3 L404 8.6 L408 11.7 L412 14.7 L416 16.1 L420 15.1 L424 12.5 L428 9.9 L432 8.3 L436 8.8 L440 11.2 L444 14.2 L448 16.0 L452 15.5 L456 13.1 L460 10.1 L464 8.4 L468 8.5 L472 10.6 L476 13.9 L480 16.5 L484 16.7 L488 14.2 L492 9.9 L496 6.3 L500 5.8 L504 8.9 L508 14.2 L512 18.6 L516 19.5 L520 16.0 L524 10.1 L528 5.0 L532 3.9 L536 7.4 L540 13.4 L544 18.4 L548 19.6 L552 16.5 L556 11.2 L560 6.9 L564 5.8 L568 8.2 L572 12.2 L576 15.4 L580 16.2 L584 15.1 L588 12.1 L592 8.3 L596 6.1 L600 7.2 L604 11.4 L608 16.5 L612 19.3 L616 18.0 L620 13.2 L624 7.4 L628 4.3 L632 5.5 L636 10.3 L640 16.0 L644 19.2 L648 18.2 L652 13.9 L656 8.9 L660 6.0 L664 6.6 L668 10.1 L672 14.2 L676 16.7 L680 16.4 L684 13.8 L688 10.5 L692 8.3 L696 8.3 L700 10.2 L704 13.2 L708 15.5 L712 15.8 L716 14.0 L720 11.1 L724 8.5 L728 7.8 L732 9.5 L736 12.8 L740 15.9 L744 17.0 L748 15.3 L752 11.4 L756 7.7 L760 6.3 L764 8.1 L768 12.2 L772 16.3 L776 17.9 L780 16.1 L784 12.2 L788 8.3 L792 6.8 L796 8.3 L800 11.6 L804 14.7 L808 15.9 L812 14.8 L816 12.6 L820 9.8 L824 7.8 L828 8.1 L832 10.9 L836 14.8 L840 17.4 L844 17.1 L848 13.7 L852 9.1 L856 5.9 L860 6.2 L864 9.8 L868 14.6 L872 17.9 L876 17.8 L880 14.5 L884 10.0 L888 6.9 L892 6.9 L896 9.6 L900 13.4 L904 15.9 L908 16.0 L912 14.0 L916 11.2 L920 9.4 L924 9.2 L928 10.5 L932 12.4 L936 14.1 L940 14.8 L944 13.8 L948 11.7 L952 9.7 L956 9.0 L960 10.0 L964 12.1 L968 14.0 L972 14.7 L976 13.9 L980 12.1 L984 10.4 L988 9.8 L992 10.4 L996 11.8 L1000 13.1 L1004 13.8 L1008 13.5 L1012 12.3 L1016 10.9 L1020 10.2 L1024 10.5 L1028 11.6 L1032 12.9 L1036 13.5 L1040 13.3 L1044 12.4 L1048 11.4 L1052 10.7 L1056 10.7 L1060 11.5 L1064 12.6 L1068 13.5 L1072 13.5 L1076 12.7 L1080 11.4 L1084 10.4 L1088 10.3 L1092 11.2 L1096 12.5 L1100 13.4 L1104 13.6 L1108 12.8 L1112 11.7 L1116 10.9 L1120 10.7 L1124 11.3 L1128 12.2 L1132 12.8 L1136 12.8 L1140 12.5 L1144 11.9 L1148 11.6 L1152 11.6 L1156 11.8 L1160 12.0 L1164 12.2 L1168 12.2 L1172 12.2 L1176 12.0 L1180 11.9 L1184 11.9 L1188 11.9 L1192 12.0 L1196 12.0 L1200 12.0' fill='none' stroke='%23E8001D' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)} .sec-eye,.sp-eye{display:flex;align-items:center;gap:8px} .sp-eye{justify-content:center} .sec-eye::before,.sp-eye::before{content:'';width:13px;height:10px;flex-shrink:0;background:linear-gradient(var(--red),var(--red)) 0 100%/3px 60% no-repeat,linear-gradient(var(--red),var(--red)) 5px 100%/3px 100% no-repeat,linear-gradient(var(--red),var(--red)) 10px 100%/3px 40% no-repeat} body.on-air .sec-eye::before,body.on-air .sp-eye::before{animation:eyeq .9s steps(3) infinite} @keyframes eyeq{0%{background-size:3px 60%,3px 100%,3px 40%}33%{background-size:3px 100%,3px 45%,3px 80%}66%{background-size:3px 35%,3px 75%,3px 100%}} /* Softer surfaces: a little depth instead of flat boxes */ .sch-block,.chat-box,.req-box,.djc,.faq details,.top-cities,.sp-tier{background:linear-gradient(180deg,#161616,#0f0f0f);border-color:#262626;transition:border-color .25s,box-shadow .25s,transform .25s} .sch-block:hover,.djc:hover,.faq details:hover,.sp-tier:hover{border-color:#E8001D55;box-shadow:0 10px 30px -18px #E8001D} .tr.now{background:linear-gradient(90deg,#E8001D1f,transparent 70%)} .sp-banner{background:radial-gradient(600px 220px at 50% 120%,#E8001D26,transparent 70%),linear-gradient(180deg,#161616,#0f0f0f)} .sp-banner::after{content:'';position:absolute;left:0;right:0;bottom:0;height:60px;opacity:.2;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 12.0 L4 12.0 L8 12.0 L12 11.9 L16 12.0 L20 12.1 L24 12.2 L28 12.2 L32 12.0 L36 11.7 L40 11.5 L44 11.5 L48 11.9 L52 12.4 L56 12.8 L60 12.7 L64 12.2 L68 11.5 L72 11.1 L76 11.1 L80 11.7 L84 12.4 L88 13.0 L92 12.9 L96 12.4 L100 11.6 L104 11.1 L108 11.1 L112 11.6 L116 12.3 L120 12.9 L124 13.0 L128 12.6 L132 11.7 L136 11.0 L140 10.8 L144 11.3 L148 12.2 L152 13.2 L156 13.5 L160 13.0 L164 11.8 L168 10.5 L172 9.9 L176 10.6 L180 12.1 L184 13.8 L188 14.5 L192 13.8 L196 12.0 L200 10.1 L204 9.2 L208 10.0 L212 11.8 L216 13.7 L220 14.5 L224 13.9 L228 12.3 L232 10.8 L236 9.7 L240 9.9 L244 11.4 L248 13.7 L252 15.4 L256 15.3 L260 13.1 L264 9.8 L268 7.5 L272 7.5 L276 10.3 L280 14.3 L284 17.2 L288 17.2 L292 14.2 L296 9.9 L300 6.7 L304 6.6 L308 9.5 L312 13.7 L316 16.7 L320 16.9 L324 14.4 L328 10.9 L332 8.4 L336 8.1 L340 9.9 L344 12.6 L348 14.5 L352 15.3 L356 14.2 L360 11.5 L364 8.8 L368 7.6 L372 9.0 L376 12.2 L380 15.5 L384 16.9 L388 15.4 L392 12.1 L396 8.7 L400 7.3 L404 8.6 L408 11.7 L412 14.7 L416 16.1 L420 15.1 L424 12.5 L428 9.9 L432 8.3 L436 8.8 L440 11.2 L444 14.2 L448 16.0 L452 15.5 L456 13.1 L460 10.1 L464 8.4 L468 8.5 L472 10.6 L476 13.9 L480 16.5 L484 16.7 L488 14.2 L492 9.9 L496 6.3 L500 5.8 L504 8.9 L508 14.2 L512 18.6 L516 19.5 L520 16.0 L524 10.1 L528 5.0 L532 3.9 L536 7.4 L540 13.4 L544 18.4 L548 19.6 L552 16.5 L556 11.2 L560 6.9 L564 5.8 L568 8.2 L572 12.2 L576 15.4 L580 16.2 L584 15.1 L588 12.1 L592 8.3 L596 6.1 L600 7.2 L604 11.4 L608 16.5 L612 19.3 L616 18.0 L620 13.2 L624 7.4 L628 4.3 L632 5.5 L636 10.3 L640 16.0 L644 19.2 L648 18.2 L652 13.9 L656 8.9 L660 6.0 L664 6.6 L668 10.1 L672 14.2 L676 16.7 L680 16.4 L684 13.8 L688 10.5 L692 8.3 L696 8.3 L700 10.2 L704 13.2 L708 15.5 L712 15.8 L716 14.0 L720 11.1 L724 8.5 L728 7.8 L732 9.5 L736 12.8 L740 15.9 L744 17.0 L748 15.3 L752 11.4 L756 7.7 L760 6.3 L764 8.1 L768 12.2 L772 16.3 L776 17.9 L780 16.1 L784 12.2 L788 8.3 L792 6.8 L796 8.3 L800 11.6 L804 14.7 L808 15.9 L812 14.8 L816 12.6 L820 9.8 L824 7.8 L828 8.1 L832 10.9 L836 14.8 L840 17.4 L844 17.1 L848 13.7 L852 9.1 L856 5.9 L860 6.2 L864 9.8 L868 14.6 L872 17.9 L876 17.8 L880 14.5 L884 10.0 L888 6.9 L892 6.9 L896 9.6 L900 13.4 L904 15.9 L908 16.0 L912 14.0 L916 11.2 L920 9.4 L924 9.2 L928 10.5 L932 12.4 L936 14.1 L940 14.8 L944 13.8 L948 11.7 L952 9.7 L956 9.0 L960 10.0 L964 12.1 L968 14.0 L972 14.7 L976 13.9 L980 12.1 L984 10.4 L988 9.8 L992 10.4 L996 11.8 L1000 13.1 L1004 13.8 L1008 13.5 L1012 12.3 L1016 10.9 L1020 10.2 L1024 10.5 L1028 11.6 L1032 12.9 L1036 13.5 L1040 13.3 L1044 12.4 L1048 11.4 L1052 10.7 L1056 10.7 L1060 11.5 L1064 12.6 L1068 13.5 L1072 13.5 L1076 12.7 L1080 11.4 L1084 10.4 L1088 10.3 L1092 11.2 L1096 12.5 L1100 13.4 L1104 13.6 L1108 12.8 L1112 11.7 L1116 10.9 L1120 10.7 L1124 11.3 L1128 12.2 L1132 12.8 L1136 12.8 L1140 12.5 L1144 11.9 L1148 11.6 L1152 11.6 L1156 11.8 L1160 12.0 L1164 12.2 L1168 12.2 L1172 12.2 L1176 12.0 L1180 11.9 L1184 11.9 L1188 11.9 L1192 12.0 L1196 12.0 L1200 12.0' fill='none' stroke='%23E8001D' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none} .btn-p{box-shadow:0 8px 24px -10px var(--red)} .vu-strip{max-width:1200px;margin:24px auto 0;padding:0 48px;height:34px;display:flex;align-items:flex-end;gap:3px;opacity:.5;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)} .vu-strip i{border-radius:2px 2px 0 0} @media(max-width:768px){ .hero{padding-bottom:96px} .hero-eq{left:20px;right:20px;height:72px;gap:3px} .sep{margin:0 20px} .vinyl-wrap::before{width:300px;height:300px} .vu-strip{padding:0 20px} } @media(prefers-reduced-motion:reduce){ .hero-eq i,.vu-strip i,.ring,.sec-eye::before,.sp-eye::before{animation:none!important} } /* ══════════════════════════════════════════════════════════════════════ EDITORIAL REDESIGN (Nov 2026) — design layer only. Everything above stays as it was; this layer restyles the page and the new sections. Mobile first: base rules are for phones, then wider. ══════════════════════════════════════════════════════════════════════ */ :root{ --ink:#0a0a0a;--ink-2:#131313;--line:#262626;--paper:#efebe4;--paper-line:#d6d0c6; --fg:#f2efe9;--muted:#8e8a84;--red:#ff1a1a; --display:'Anton',Impact,sans-serif;--sans:'Inter Tight','Inter',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace; --pad:16px;--max:1400px;--player-h:72px; } @media(min-width:700px){:root{--pad:clamp(20px,3.5vw,48px)}} body{background:var(--ink);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.55;padding-bottom:calc(var(--player-h) + env(safe-area-inset-bottom))} [hidden]{display:none!important} .x-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)} .x-lbl{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase} .x-acc{color:var(--red)} .sep,.vu-strip,.hero,.hero-eq{display:none} .i-pause{display:none} body.on-air .i-pause{display:block} body.on-air .i-play{display:none} /* ── top bar + masthead + menu ── */ .x-top{border-bottom:1px solid var(--line);color:var(--muted)} .x-top .x-wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:38px;padding-top:6px;padding-bottom:6px} .x-top h1{font:500 10px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg);margin:0;display:flex;align-items:center;gap:8px} .x-dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;animation:blink 1.4s infinite} .x-top .x-hide-m{display:none} @media(min-width:900px){.x-top .x-hide-m{display:block;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}} .x-mast .x-wrap{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding-top:16px;padding-bottom:14px} .x-iso{display:none} .x-word{font:400 12vw/.85 var(--display);text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;color:var(--fg)} .x-word i{font-style:normal;color:var(--red)} .x-listen{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;height:44px;padding:0 6px;border-radius:999px;font:600 13px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase} .x-listen .x-pb{width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center} .x-listen svg{width:12px;height:12px;fill:var(--red)} .x-listen .x-lt{display:none} @media(min-width:560px){.x-listen{padding:0 18px 0 6px}.x-listen .x-lt{display:inline}} @media(min-width:800px){ .x-mast .x-wrap{grid-template-columns:1fr auto 1fr;gap:20px;padding-top:22px;padding-bottom:18px} .x-iso{display:block;height:calc(clamp(40px,7.5vw,112px) * .952);width:auto;transform:translateY(calc(clamp(40px,7.5vw,112px) * -0.056))} .x-word{font-size:clamp(40px,7.5vw,112px);text-align:center} .x-mast .x-r{display:flex;justify-content:flex-end} } .x-menu{border-top:1px solid var(--line);border-bottom:3px solid var(--fg);position:sticky;top:0;z-index:900;background:rgba(10,10,10,.96);backdrop-filter:blur(12px)} .x-menu .x-wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .x-menu .x-wrap::-webkit-scrollbar{display:none} .x-menu a{font:600 13px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;padding:15px 12px;white-space:nowrap;color:#cfcbc5;border-bottom:3px solid transparent;margin-bottom:-3px} .x-menu a:hover{color:#fff;border-color:var(--red)} @media(min-width:700px){.x-menu a{font-size:14px;padding:16px 16px}} /* menu: phones show the first sections plus a "More" dropdown, desktop shows them all */ .x-menu{max-width:100vw} .x-menu .x-wrap{overflow:visible!important;flex-wrap:nowrap;align-items:stretch;min-width:0} .x-menu .x-wrap>a{flex:none} .x-more{flex:none} .x-menu .x-m-sec{display:none} .x-menu .x-m-ev{display:none} .x-more{position:relative;margin-left:auto} .x-more-btn{background:none;border:0;color:#fff;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer;font:600 13px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;padding:15px 0 15px 12px;color:#fff;display:flex;align-items:center;gap:6px;white-space:nowrap} .x-more-btn::after{content:"";width:7px;height:7px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:translateY(-3px) rotate(45deg);transition:transform .2s} .x-more.open .x-more-btn::after{transform:translateY(2px) rotate(-135deg)} .x-more-list{display:none!important;position:absolute;right:0;top:100%;min-width:220px;background:#111;border:1px solid #262626;border-top:3px solid var(--red);box-shadow:0 20px 40px -10px rgba(0,0,0,.7);display:flex;flex-direction:column;z-index:950} .x-more.open .x-more-list{display:flex!important} .x-more-list a{border:0!important;margin:0!important;padding:14px 18px!important;border-bottom:1px solid #1e1e1e!important} .x-more-list a:hover{background:#1a1a1a;color:#fff} .x-more-list .x-m-ev{display:block} @media(max-width:429px){.x-menu .x-wrap>a{font-size:12px;padding:15px 8px;letter-spacing:.04em}.x-menu .x-wrap>a:first-child{padding-left:0}.x-more-btn{font-size:12px;padding-left:8px}} @media(max-width:359px){.x-menu .x-wrap>a{font-size:11px;padding:15px 5px;letter-spacing:.02em}.x-more-btn{font-size:11px;padding-left:5px}} @media(min-width:400px){.x-menu .x-m-ev{display:block}.x-more-list .x-m-ev{display:none}} @media(min-width:400px) and (max-width:599px){.x-menu .x-wrap>a{font-size:12px;padding:15px 6px;letter-spacing:.03em}.x-menu .x-wrap>a:first-child{padding-left:0}.x-more-btn{font-size:12px;padding-left:6px}} @media(min-width:1100px){.x-menu .x-m-sec{display:block}.x-more{display:none}} /* ── section header ── */ .x-sh{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 20px;padding:20px 0 24px;border-top:3px solid currentColor;flex-wrap:wrap} .x-sh h2{font:400 clamp(44px,11vw,104px)/.95 var(--display);text-transform:uppercase;letter-spacing:-.005em;margin:0} .x-sh .x-lbl{color:var(--muted)} .x-sec{padding:48px 0} @media(min-width:900px){.x-sec{padding:64px 0}} .x-paper{background:var(--paper);color:var(--ink);--muted:#6d675f;--line:#d6d0c6} .x-paper .x-sh{border-color:var(--ink)} /* dark boxes inside light sections */ .x-paper .x-dark{--fg:#f2efe9;--muted:#8e8a84;--line:#262626;background:var(--ink);color:var(--fg)} /* ── front: on-air card + cover story ── */ .x-front{display:grid;gap:32px;padding-top:20px;padding-bottom:48px} .x-onair{order:-1} @media(min-width:1100px){.x-front{grid-template-columns:1.5fr 1fr;gap:0;padding-top:28px;padding-bottom:56px}.x-onair{order:0;padding-left:24px;border-left:1px solid var(--line)}.x-cover{padding-right:24px}} .x-card{background:var(--red);color:#fff;border-radius:4px;padding:24px;position:relative;overflow:hidden} @media(min-width:700px){.x-card{padding:30px}} .x-card .x-vin{position:absolute;top:-70px;right:-70px;width:190px;height:190px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.45))} @media(min-width:700px){.x-card .x-vin{width:250px;height:250px;top:-90px;right:-90px}} .x-card .x-lbl{color:rgba(255,255,255,.9);padding-right:110px;display:block} @media(min-width:700px){.x-card .x-lbl{padding-right:170px}} .x-card .x-slogan{font:400 13px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-top:6px;padding-right:110px} .x-card h2{font:400 clamp(40px,4.4vw,64px)/.95 var(--display);text-transform:uppercase;margin:64px 0 8px;word-break:break-word;position:relative;z-index:1} @media(min-width:700px){.x-card h2{margin-top:96px}} .x-card .x-art{font:500 20px/1.25 var(--sans);position:relative;z-index:1} @media(min-width:700px){.x-card .x-art{font-size:24px}} .x-card .x-ctl{display:flex;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap} .x-big{width:72px;height:72px;border-radius:50%;background:#000;display:grid;place-items:center;flex:none;transition:transform .15s} .x-big:hover{transform:scale(1.05)} .x-big svg{width:24px;height:24px;fill:#fff} .x-card .x-req{color:#fff;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:3px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase} .x-eq{display:flex;gap:3px;align-items:flex-end;height:22px;margin-left:auto} .x-eq i{width:4px;background:#fff;height:30%;animation:x-eq .9s ease-in-out infinite alternate;animation-play-state:paused} body.on-air .x-eq i{animation-play-state:running} .x-eq i:nth-child(2){animation-delay:-.3s}.x-eq i:nth-child(3){animation-delay:-.6s}.x-eq i:nth-child(4){animation-delay:-.15s} @keyframes x-eq{to{height:100%}} .x-just{margin-top:22px} .x-just h3{margin:0 0 8px;color:var(--muted)} .x-just ol{list-style:none;margin:0;padding:0} .x-just li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 0;border-top:1px solid var(--line)} .x-just b{font-weight:600;font-size:16px} .x-just span{color:var(--muted);font-size:14px;grid-column:1} .x-just em{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-style:normal;grid-column:2;grid-row:1} .x-onair .top-cities{margin-top:18px;border-top:1px solid var(--line);padding-top:14px} .x-onair .tc-head{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .x-onair .tc-list{list-style:none;padding:0;margin:0;display:flex;gap:18px;flex-wrap:wrap} .x-onair .tc-list li{font:400 22px/1 var(--display);text-transform:uppercase;display:flex;align-items:center;gap:8px} .x-onair .tc-rank{color:var(--red)} .x-cover .x-img{display:block;aspect-ratio:4/3;border-radius:4px;position:relative;overflow:hidden;background:#222;margin:0} .x-cover .x-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .x-cover .x-img .x-lbl{position:absolute;left:14px;top:14px;z-index:2;background:#000;color:var(--red);padding:8px 10px} .x-cover h2{font:400 clamp(40px,5.4vw,84px)/.95 var(--display);text-transform:uppercase;margin:20px 0 12px;letter-spacing:-.005em} .x-cover p{color:#bdb8b1;font-size:17px;max-width:620px} .x-by{margin-top:14px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;align-items:center} .x-by a{color:var(--fg);border-bottom:1px solid var(--red);padding-bottom:2px} /* photo credits: tiny, always present */ .x-cr{position:absolute;right:0;bottom:0;z-index:3;color:rgba(255,255,255,.55);font:400 7px/1.2 var(--mono);letter-spacing:.02em;padding:3px 5px;text-shadow:0 0 3px rgba(0,0,0,.9)} /* ── news ── */ .x-news{display:grid;gap:28px} @media(min-width:700px){.x-news{grid-template-columns:1fr 1fr}} @media(min-width:1000px){.x-news{grid-template-columns:repeat(3,1fr);gap:40px 0}.x-news>a{padding:0 20px;border-left:1px solid var(--paper-line)}.x-news>a:nth-child(3n+1){padding-left:0;border-left:0}.x-news>a:nth-child(3n){padding-right:0}} .x-news>a{display:block;color:inherit} .x-news figure{position:relative;overflow:hidden;background:#222;margin:0 0 14px;aspect-ratio:4/3;border-radius:2px} .x-news figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .x-news>a:hover figure img{transform:scale(1.04)} .x-news .x-lbl{color:var(--red);display:block;margin-bottom:8px} .x-news h3{font:600 22px/1.15 var(--sans);letter-spacing:-.01em;margin:0} .x-news p{color:#4a453f;font-size:15px;margin-top:8px} .x-src{display:block;margin-top:10px;font:500 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#6d675f} .x-row{display:grid;gap:22px;border-top:1px solid var(--paper-line);margin-top:28px;padding-top:22px} @media(min-width:700px){.x-row{grid-template-columns:repeat(3,1fr);gap:0}.x-row>a{padding:0 20px;border-left:1px solid var(--paper-line)}.x-row>a:first-child{padding-left:0;border-left:0}.x-row>a:last-child{padding-right:0}} .x-row>a{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:start;color:inherit} @media(min-width:700px){.x-row>a{display:block}} .x-row figure{position:relative;overflow:hidden;background:#222;margin:0;aspect-ratio:1/1;border-radius:2px} @media(min-width:700px){.x-row figure{aspect-ratio:16/10;margin-bottom:12px}} .x-row figure img{width:100%;height:100%;object-fit:cover} @media(max-width:699px){.x-row .x-cr{display:none}} .x-row .x-lbl{color:#6d675f;display:block;margin-bottom:6px} .x-row b{font-weight:600;line-height:1.3;display:block} .x-note{margin-top:22px;color:#6d675f;font:400 9px/1.5 var(--mono);letter-spacing:.06em} /* ── events ── */ .x-events{display:grid;gap:40px} @media(min-width:900px){.x-events{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}} .x-events>div,.x-ev>div{min-width:0} .x-events h3{font:400 30px/1 var(--display);text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:3px solid var(--fg);margin:0} .x-events h3 .x-lbl{color:var(--muted)} .x-ev{display:grid;grid-template-columns:62px 1fr;gap:12px 14px;padding:18px 0;border-bottom:1px solid var(--line);align-items:center;color:inherit} .x-ev .th{grid-column:1/-1;order:-1;position:relative;overflow:hidden;background:var(--bg,#111);aspect-ratio:16/9;margin:0} .x-ev .th img{width:100%;height:100%;object-fit:var(--fit,cover);object-position:center 25%;transition:transform .6s} .x-ev .th[style*="contain"] img{padding:10px} .x-ev:hover .th img{transform:scale(1.05)} .x-ev .d{font:400 40px/.85 var(--display);text-align:center} .x-ev .d small{display:block;font:500 11px/1.4 var(--mono);color:var(--red);letter-spacing:.1em} .x-ev .d em{display:block;font:500 9px/1.3 var(--mono);color:var(--muted);font-style:normal;letter-spacing:.06em;text-transform:uppercase;margin-top:4px} .x-ev b{font:600 18px/1.2 var(--sans);display:block} .x-ev .w{color:var(--muted);font-size:14px;display:block} .x-ev i{display:block;font:500 11px/1.4 var(--mono);letter-spacing:.04em;color:#cfcbc5;margin-top:4px;font-style:normal} .x-ev .go{grid-column:2;justify-self:start;font:500 11px/1 var(--mono);letter-spacing:.12em;border:1px solid var(--line);padding:10px 12px;text-transform:uppercase} .x-ev:hover .go{background:var(--red);border-color:var(--red);color:#fff} .x-ev.sold .go{color:var(--muted);border-style:dashed} .x-ev .go small{display:block;font:inherit;font-size:9px;letter-spacing:.1em;margin-top:3px;opacity:.8} .x-ev.sold:hover .go{background:transparent;border-color:var(--muted);color:var(--muted)} @media(min-width:600px){ .x-ev{grid-template-columns:72px 150px 1fr auto;gap:18px} .x-ev .th{grid-column:auto;order:0;width:150px;aspect-ratio:3/2} .x-ev .go{grid-column:auto;justify-self:auto;width:96px;padding:10px 8px;text-align:center;line-height:1.3} } /* ── artists ── */ .x-feature{display:grid;border:1px solid var(--line)} @media(min-width:900px){.x-feature{grid-template-columns:1fr 1fr}} .x-portrait{position:relative;aspect-ratio:4/5;background:#111;overflow:hidden} @media(min-width:900px){.x-portrait{aspect-ratio:auto;min-height:620px}} .x-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%} .x-portrait .x-lbl{position:absolute;top:16px;left:16px;background:var(--red);color:#fff;padding:8px 10px;z-index:2} .x-ftxt{padding:24px;display:flex;flex-direction:column} @media(min-width:900px){.x-ftxt{padding:clamp(24px,4vw,56px)}} .x-ftxt h3{font:400 clamp(52px,6vw,96px)/.95 var(--display);text-transform:uppercase;margin:10px 0 0} .x-ftxt blockquote cite{display:block;margin-top:10px;font:500 11px/1.4 var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase;font-style:normal} .x-ftxt blockquote cite a{color:var(--fg);border-bottom:1px solid var(--red)} .x-av img[src*="dj-d-latino"]{object-position:45% 25%} .x-ftxt blockquote{font:400 clamp(26px,2.6vw,40px)/1.05 var(--display);text-transform:uppercase;margin:24px 0;padding-left:18px;border-left:3px solid var(--red)} .x-ftxt p{color:#bdb8b1;margin:0 0 12px} .x-chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 18px} .x-chips span{font:500 11px/1 var(--mono);border:1px solid #3a3a3a;padding:7px 9px;letter-spacing:.06em} .x-follow{align-self:flex-start;font:600 13px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--red);padding-bottom:4px} .x-facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:auto;padding-top:24px;border-top:1px solid var(--line);gap:12px} .x-facts b{display:block;font:400 34px/1 var(--display)} .x-facts span{color:var(--muted)} .x-roster{display:grid;border:1px solid var(--line);border-top:0} @media(min-width:700px){.x-roster{grid-template-columns:repeat(3,1fr)}} .x-roster>*{padding:20px;display:flex;gap:14px;align-items:center;color:inherit} .x-roster>*+*{border-top:1px solid var(--line)} @media(min-width:700px){.x-roster>*+*{border-top:0;border-left:1px solid var(--line)}} .x-av{width:64px;height:64px;border-radius:50%;flex:none;overflow:hidden;background:#222;display:grid;place-items:center;font:400 24px/1 var(--display)} .x-av img{width:100%;height:100%;object-fit:cover} .x-roster b{display:block;font:400 26px/1 var(--display);text-transform:uppercase} .x-roster small{color:var(--muted);font-size:13px;display:block;margin-top:4px} .x-roster a.x-ig{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg);border-bottom:1px solid var(--red);padding-bottom:3px;display:inline-block;margin-top:8px} /* ── schedule (generated by the existing script) ── */ #schedule.sec{max-width:none;padding:48px 0;margin:0} #schedule .schedule-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)} #schedule .sch-tab{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:11px;border-radius:0} #schedule .sch-tab.on{background:var(--fg);color:#000;box-shadow:none} #schedule .sch-title{font-family:var(--display);text-transform:uppercase;letter-spacing:0} #schedule .sch-block{border-radius:0} #schedule .sch-submit-btn{background:var(--red);border-radius:0;text-transform:uppercase;letter-spacing:.06em} /* ── chat + requests (existing markup, new look) ── */ #request.sec{max-width:none;padding:48px 0;margin:0} #request .x-wrap>.ig{margin-top:0} #request .ig{display:grid;gap:0;border:1px solid #262626} @media(min-width:900px){#request .ig{grid-template-columns:1.4fr 1fr}} #request .chat-box,#request .req-box{background:var(--ink);color:var(--fg);border:0;border-radius:0;padding:20px} @media(min-width:700px){#request .chat-box,#request .req-box{padding:28px}} #request .req-box{background:var(--ink-2);border-top:1px solid #262626} @media(min-width:900px){#request .req-box{border-top:0;border-left:1px solid #262626}} #request .bh{font:400 30px/1 var(--display);text-transform:uppercase;letter-spacing:0;color:var(--fg);display:flex;align-items:center;gap:10px;padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid #262626;background:none} #request .nick-in,#request .ci-msg,#request .rf{background:transparent;border:1px solid #333;border-radius:0;color:var(--fg);font-family:var(--sans);font-size:16px} #request .rf{border-width:0 0 1px;padding:12px 0} #request .rf option{background:#111;color:#fff} #request .nick-set,#request .cs{background:var(--fg);color:#000;border-radius:0;font-weight:600;text-transform:uppercase;letter-spacing:.06em} #request .rsub{background:var(--red);color:#fff;border-radius:0;min-height:52px;text-transform:uppercase;letter-spacing:.06em;font-weight:600} #request .chat-msgs{background:transparent;border-radius:0} #request .msg-head .mu{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:12px} #request .mt{font-size:15px} /* ── FAQ / contact (existing content) ── */ #listen.sec,#contact.sec{max-width:none;padding:48px 0;margin:0} #listen .x-wrap>.at,#listen .lo-intro{color:#bdb8b1;max-width:760px;font-size:17px;margin-bottom:20px} #listen .faq details{border-color:var(--line);border-radius:0} #listen .faq summary{font-family:var(--sans);font-weight:600;font-size:17px} #listen .faq a,#contact a{color:var(--fg);border-bottom:1px solid var(--red)} #contact .cg{gap:24px} #contact .cg{grid-template-columns:1fr} @media(min-width:900px){#contact .cg>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 32px}#contact .soc-row{grid-column:1/-1;margin-top:8px}} #contact .ci-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em} #contact .soc-btn{border-radius:0} /* ── partners ── */ .x-partner{display:grid} @media(min-width:900px){.x-partner{grid-template-columns:1.2fr 1fr}} .x-partner .l{padding:28px;background:var(--red);color:#fff} @media(min-width:900px){.x-partner .l{padding:clamp(24px,4vw,56px)}} .x-partner .l .x-lbl{color:rgba(255,255,255,.85)} .x-partner .l h2{font:400 clamp(48px,6.5vw,100px)/.95 var(--display);text-transform:uppercase;margin:16px 0 14px} .x-partner .l .sub{font:600 clamp(15px,1.5vw,20px)/1.3 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:#000;margin:0} .x-partner .l .desc{font-size:17px;line-height:1.5;max-width:460px;margin-top:16px} .x-partner .r{display:flex;flex-direction:column} .x-partner .tier{padding:20px 22px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid #262626} @media(min-width:560px){.x-partner .tier{flex-direction:row;justify-content:space-between;align-items:center;gap:24px;padding:24px 28px;flex:1}} .x-partner .tier b{font:400 30px/1 var(--display);text-transform:uppercase;white-space:nowrap} .x-partner .tier span{color:var(--muted);font-size:14px;line-height:1.45;max-width:280px} @media(min-width:560px){.x-partner .tier span{text-align:right}} .x-talk{background:var(--red);color:#fff;margin:20px 16px 22px;padding:20px 24px;display:flex;justify-content:center;align-items:center;gap:12px;font:600 17px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 14px 36px -10px rgba(255,26,26,.7);transition:transform .2s,background .2s} @media(min-width:560px){.x-talk{margin:4px 28px 28px;padding:22px 28px}} .x-talk::before{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);animation:x-shine 3.2s ease-in-out infinite} .x-talk .arr{display:inline-block;animation:x-nudge 1.6s ease-in-out infinite} .x-talk:hover{background:#ff3b3b;transform:translateY(-2px)} @keyframes x-shine{0%,55%{left:-60%}100%{left:130%}} @keyframes x-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}} /* ── footer ── */ footer.x-foot{border-top:3px solid var(--fg);padding:36px 0 28px;text-align:left;background:var(--ink)} .x-foot .big{font:400 calc((min(100vw,var(--max)) - 2*var(--pad)) / 7.9)/.9 var(--display);text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;padding:.04em 0} .x-foot .big i{font-style:normal;color:var(--red)} .x-fcols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px;padding-top:22px;border-top:1px solid var(--line)} @media(min-width:700px){.x-fcols{grid-template-columns:repeat(4,1fr)}} .x-fcols h5{margin:0 0 12px;color:var(--muted);font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase} .x-fcols ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#cfcbc5} /* footer links light up red on hover (and on tap) */ .x-fcols a{display:inline-block;transition:color .15s,transform .15s} .x-fcols a:hover,.x-fcols a:focus-visible,.x-fcols a:active{color:var(--red);transform:translateX(3px)} /* company details + legal links, in two tidy groups */ .x-legal{display:flex;flex-direction:column;gap:18px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font:500 11px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase} .x-legal ul{list-style:none;margin:0;padding:0} .x-lg-info{display:grid;gap:4px} .x-lg-info li:first-child{color:var(--fg)} .x-lg-links{display:flex;flex-wrap:wrap;gap:10px 22px} .x-lg-links li{white-space:nowrap} .x-legal a{color:#cfcbc5;border-bottom:1px solid #3a3a3a;padding-bottom:2px;transition:color .15s,border-color .15s} .x-legal a:hover,.x-legal a:focus-visible,.x-legal a:active{color:var(--red);border-color:var(--red)} @media(min-width:900px){ .x-legal{gap:14px} .x-lg-links{gap:10px 28px} .x-lg-info{display:flex;flex-wrap:wrap;gap:0} .x-lg-info li{white-space:nowrap} .x-lg-info li+li::before{content:"·";margin:0 10px;color:#4a4a4a} } .x-credits{margin-top:20px;padding-top:12px;border-top:1px solid #1a1a1a;color:#4a4a4a;font:400 8px/1.6 var(--mono);letter-spacing:.02em} .x-credits a{color:inherit} /* ── the existing top player becomes the fixed bottom player ── */ .top-player{position:fixed;top:auto;bottom:0;left:0;right:0;z-index:1000;border-bottom:0;border-top:1px solid var(--line);padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));gap:12px;min-height:var(--player-h);background:rgba(10,10,10,.97)} .top-player .tp-brand{display:none} .top-player .tp-now{font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--red)} .top-player .tp-title{font:400 20px/1.05 var(--display);text-transform:uppercase;letter-spacing:0;margin-top:4px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .top-player .tp-artist{font:500 13px/1.2 var(--sans);color:#cfcbc5} .top-player .tp-play{width:48px;height:48px;border-radius:0;order:-1} .top-player{flex-wrap:nowrap!important} .top-player .tp-mid{gap:10px;order:0;margin-left:0!important} .top-player .tp-track{order:1!important;flex:1 1 auto!important;min-width:0} .top-player .tp-logo{order:2} .top-player .tp-add{order:3} .top-player .tp-vol,.top-player .tp-count{display:none} @media(min-width:800px){.top-player .tp-vol,.top-player .tp-count{display:flex}.top-player .tp-title{font-size:22px}} .top-player::before{content:"";position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--red);opacity:0} body.on-air .top-player::before{opacity:1} .ib{bottom:calc(var(--player-h) + 14px + env(safe-area-inset-bottom))} /* ── our DJs (residents showcase) ── */ .x-djs{display:grid;gap:12px} @media(min-width:700px){.x-djs{grid-template-columns:repeat(2,1fr)}} @media(min-width:1100px){.x-djs{grid-template-columns:repeat(3,1fr)}} .x-dj{border:1px solid var(--line);background:var(--ink-2);display:flex;flex-direction:column;color:inherit} .x-dj figure{margin:0;aspect-ratio:1/1;overflow:hidden;background:#1a1a1a;display:grid;place-items:center} .x-dj figure img{width:100%;height:100%;object-fit:cover;object-position:45% 25%} .x-dj-open figure{background:repeating-linear-gradient(-45deg,transparent 0 12px,#1a1a1a 12px 13px);border-bottom:1px dashed #3a3a3a} .x-dj-open figure span{font:400 96px/1 var(--display);color:var(--red)} .x-djb{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1} .x-djb h3{font:400 40px/.95 var(--display);text-transform:uppercase;margin:0} .x-djb p{color:#bdb8b1;font-size:15px;margin:0} .x-djb .x-show{color:var(--fg);font-size:14px;border-left:3px solid var(--red);padding-left:10px} .x-djb .x-show em{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:#ffcf3d;margin-left:6px} .x-djb .x-chips{margin:4px 0 6px} .x-djb .x-ig{margin-top:auto;align-self:flex-start;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg);border-bottom:1px solid var(--red);padding-bottom:3px;display:inline-flex;gap:6px;align-items:center} .x-dj-open:hover{border-color:var(--red)} /* artist of the week badge (shown while one of their tracks is on air) */ .x-aotw{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:#000;color:#ffcf3d;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:8px 10px;position:relative;z-index:1} .x-aotw-mini{display:inline-block;margin-top:4px;color:#ffcf3d;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase} .x-aotw[hidden],.x-aotw-mini[hidden]{display:none!important} body.aotw-on .x-card{box-shadow:0 0 0 3px #ffcf3d} /* artist of the week in the top slot */ .x-top-aotw{display:grid;gap:18px} .x-top-aotw .x-img{aspect-ratio:4/5} .x-top-aotw .x-img img{object-position:center 18%} .x-top-aotw .x-img .x-lbl{background:var(--red);color:#fff} .x-aw-txt h2{font:400 clamp(52px,6vw,96px)/.95 var(--display);text-transform:uppercase;margin:10px 0 0} .x-aw-txt blockquote{font:400 clamp(24px,2.2vw,34px)/1.05 var(--display);text-transform:uppercase;margin:18px 0;padding-left:16px;border-left:3px solid var(--red)} .x-aw-txt blockquote cite{display:block;margin-top:10px;font:500 11px/1.4 var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase;font-style:normal} .x-aw-txt blockquote cite a{color:var(--fg);border-bottom:1px solid var(--red)} .x-aw-txt p{color:#bdb8b1;margin:0 0 12px;font-size:16px} .x-aw-txt .x-aw-note{color:#ffcf3d;font:500 11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase} .x-aw-more p{color:#bdb8b1;margin:0 0 14px;font-size:16px;max-width:760px} @media(min-width:700px){ .x-top-aotw{grid-template-columns:1fr 1.1fr;grid-template-rows:1fr auto;gap:22px 28px} .x-top-aotw .x-img{grid-row:1;grid-column:1} .x-aw-txt{grid-row:1;grid-column:2;align-self:center} .x-aw-more{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px} } @media(min-width:1100px){ .x-top-aotw{height:100%} .x-top-aotw .x-img{aspect-ratio:auto;height:100%;min-height:420px} } #contact.x-paper .ci-val{color:var(--ink)} #contact.x-paper .ci-label{color:#6d675f} #contact.x-paper .ci-val a{color:var(--ink);border-bottom:1px solid var(--red)} #contact.x-paper .soc-btn{color:#f2efe9;border-bottom:1px solid var(--line)} /* programme schedule hidden until the shows are defined (see docs/pendientes-web.md) */ .x-sched{display:none!important} /* posters and artwork with text: always shown whole, never cropped */ .is-poster{position:relative;overflow:hidden;background:#111} .is-poster::after{content:"";position:absolute;inset:-24px;background:var(--src) center/cover no-repeat;filter:blur(22px) brightness(.5) saturate(1.1);z-index:0} .x-cover .x-img.is-poster img,.x-news .is-poster img,.x-ev .th.is-poster img{position:relative;z-index:1;object-fit:contain!important;object-position:center!important;padding:0} .x-cover .x-img.is-poster img{position:absolute} .x-ev:hover .th.is-poster img,.x-news>a:hover .is-poster img{transform:none} .is-poster .x-cr{z-index:3} /* scroll reveal */ .x-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease} .x-reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.x-reveal{opacity:1;transform:none;transition:none}.x-talk::before,.x-talk .arr,.x-eq i,.x-dot{animation:none!important}} /* ══════════════════════════════════════════════════════════════════════ INNER PAGES (Our DJs, Partners, FAQ) + "More from the station" on the home ══════════════════════════════════════════════════════════════════════ */ .x-top .x-tb{font:500 10px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg);margin:0;display:flex;align-items:center;gap:8px} .x-menu .x-wrap>a.x-cur{color:#fff;border-color:var(--red)} .x-more-list a.x-cur{color:var(--red)} .x-phead{padding:36px 0 40px;border-bottom:1px solid var(--line)} @media(min-width:900px){.x-phead{padding:56px 0 64px}} .x-phead .x-crumb{color:var(--muted)} .x-phead .x-crumb a{color:var(--fg);border-bottom:1px solid var(--red)} .x-phead h1{font:400 clamp(64px,17vw,200px)/1 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin:16px 0 18px} .x-phead p{font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:#bdb8b1;max-width:640px;margin:0} .x-inner .x-sec.x-first{padding-top:32px} .x-pnote{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px} .x-pnote h2{color:inherit;font:400 clamp(36px,6vw,64px)/.95 var(--display);text-transform:uppercase;margin:0} .x-pnote p{font:400 17px/1.55 var(--sans);letter-spacing:0;color:inherit;max-width:560px;margin:0} .x-pnote a{color:inherit;border-bottom:2px solid var(--red)} /* home: links to the inner pages */ .x-xgrid{display:grid;gap:12px} @media(min-width:900px){.x-xgrid{grid-template-columns:repeat(3,1fr)}} .x-xcard{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--line);background:var(--ink-2);color:var(--fg);position:relative;transition:border-color .2s,transform .2s} .x-xcard b{font:400 clamp(44px,6vw,64px)/.95 var(--display);text-transform:uppercase;font-weight:400} .x-xcard span:not(.x-lbl){color:#bdb8b1;font-size:15px;max-width:340px} .x-xcard i{font-style:normal;position:absolute;right:22px;top:20px;font:400 32px/1 var(--display);color:var(--red);transition:transform .2s} .x-xcard:hover{border-color:var(--red);transform:translateY(-2px)} .x-xcard:hover i{transform:translateX(6px)} /* ── Contact page ── */ .x-cgrid{display:grid;gap:12px} @media(min-width:700px){.x-cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1100px){.x-cgrid{grid-template-columns:repeat(4,minmax(0,1fr))}} .x-ccard{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--line);background:var(--ink-2);color:var(--fg);transition:border-color .2s,transform .2s;min-width:0} .x-ccard b{font:600 clamp(16px,1.4vw,18px)/1.3 var(--sans);overflow-wrap:break-word} .x-ccard span:not(.x-lbl){color:#bdb8b1;font-size:14px;line-height:1.45} .x-ccard:hover{border-color:var(--red);transform:translateY(-2px)} .x-ccard:hover b{color:var(--red)} .x-csoc{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .x-csoc a{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border:1px solid var(--line);color:var(--fg);font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;transition:color .15s,border-color .15s} .x-csoc a:hover{color:var(--red);border-color:var(--red)} .x-cform-wrap{display:grid;gap:28px} @media(min-width:900px){.x-cform-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:56px;align-items:start}} .x-cform-intro h2{font:400 clamp(40px,6vw,72px)/1 var(--display);text-transform:uppercase;margin:0 0 16px} .x-cform-intro p{font-size:17px;line-height:1.55;margin:0;max-width:460px} .x-cform{padding:24px;display:grid;gap:16px} @media(min-width:560px){.x-cform{padding:32px}} .x-cform label{display:grid;gap:8px;font:500 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .x-cform input,.x-cform select,.x-cform textarea{width:100%;background:#161616;border:1px solid #333;color:var(--fg);padding:14px;font:400 16px/1.4 var(--sans);letter-spacing:0;text-transform:none;border-radius:0;-webkit-appearance:none;appearance:none} .x-cform select{background-image:linear-gradient(45deg,transparent 50%,var(--red) 50%),linear-gradient(135deg,var(--red) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px} .x-cform textarea{resize:vertical;min-height:140px} .x-cform input:focus,.x-cform select:focus,.x-cform textarea:focus{outline:none;border-color:var(--red)} .x-cform-hint{margin:-4px 0 0;font:400 14px/1.5 var(--sans);color:#ffcf3d} .x-cform-hint a,.x-cform-err a{color:inherit;border-bottom:1px solid currentColor} .x-cform-err{margin:0;font:500 14px/1.4 var(--sans);color:#ff6b6b} .x-cform-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px} .x-cform .x-talk{margin:0;flex:1 1 220px;border:0;cursor:pointer} .x-cform-wa{flex:1 1 200px;display:inline-flex;justify-content:center;align-items:center;gap:10px;padding:20px 24px;background:transparent;border:1px solid #3a3a3a;color:var(--fg);font:600 15px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .15s,color .15s} .x-cform-wa:hover{border-color:#25d366;color:#25d366} /* ── depth on the dark areas: soft gradient, faint red stage light and fine grain ── */ :root{ --grain:url("data:image/svg+xml;utf8,"); } body{ background-color:#0a0a0a; background-image:var(--grain), radial-gradient(60% 560px at 100% 0,rgba(255,26,26,.13),transparent 70%), radial-gradient(55% 520px at 0 420px,rgba(255,26,26,.07),transparent 70%), linear-gradient(180deg,#141414 0,#0a0a0a 1000px); background-repeat:repeat,no-repeat,no-repeat,no-repeat; } .x-sec:not(.x-paper),#listen.sec,.x-phead{ background-color:transparent; background-image:var(--grain), radial-gradient(50% 420px at 100% 0,rgba(255,26,26,.09),transparent 70%), radial-gradient(45% 380px at 0 100%,rgba(255,26,26,.05),transparent 70%), linear-gradient(180deg,rgba(17,17,17,.6) 0,rgba(10,10,10,.6) 70%); background-repeat:repeat,no-repeat,no-repeat,no-repeat; } .x-phead{background-image:var(--grain),radial-gradient(60% 480px at 100% 0,rgba(255,26,26,.14),transparent 70%),linear-gradient(180deg,rgba(20,20,20,.6) 0,rgba(10,10,10,.6) 100%)} footer.x-foot{ background-color:transparent; background-image:var(--grain), radial-gradient(70% 380px at 50% 100%,rgba(255,26,26,.16),transparent 70%), linear-gradient(180deg,rgba(10,10,10,.6) 0,rgba(18,7,7,.75) 100%); background-repeat:repeat,no-repeat,no-repeat; } /* the boxes keep a touch of depth too */ .x-ccard,.x-xcard,.x-dj{background-image:linear-gradient(180deg,#171717,#0f0f0f)} /* ── menu bar: floating text on a see-through bar, with a glowing red line ── */ .x-menu{background:linear-gradient(180deg,rgba(10,10,10,.86),rgba(10,10,10,.74));-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-top:0;border-bottom:0} .x-menu::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,26,26,.9) 30%,rgba(255,26,26,.9) 70%,transparent);pointer-events:none} .x-menu::before{content:"";position:absolute;left:15%;right:15%;bottom:-14px;height:14px;background:radial-gradient(50% 100% at 50% 0,rgba(255,26,26,.35),transparent);pointer-events:none} .x-menu .x-wrap>a{border:0;margin:0;color:#cfcbc5;position:relative;transition:color .2s,text-shadow .2s} .x-menu .x-wrap>a::after{content:"";position:absolute;left:50%;bottom:6px;width:0;height:2px;background:var(--red);box-shadow:0 0 10px var(--red);transition:width .25s,left .25s} .x-menu .x-wrap>a:hover,.x-menu .x-wrap>a.x-cur{color:#fff;border-color:transparent;text-shadow:0 0 18px rgba(255,26,26,.6)} .x-menu .x-wrap>a:hover::after,.x-menu .x-wrap>a.x-cur::after{left:25%;width:50%} .x-more-btn:hover{text-shadow:0 0 18px rgba(255,26,26,.6)} /* top line on phones: always one line */ @media(max-width:599px){ .x-top h1,.x-top .x-tb{font-size:9px;letter-spacing:.06em;white-space:nowrap;min-width:0} .x-top h1,.x-top .x-tb{overflow:hidden;text-overflow:ellipsis} } @media(max-width:389px){.x-top h1,.x-top .x-tb{font-size:8px;letter-spacing:.03em}} @media(max-width:339px){.x-top h1,.x-top .x-tb{letter-spacing:0}} /* menu bar as glass: very see-through where it sits, a little darker once it sticks while scrolling */ .x-menu{ background-color:rgba(18,18,18,.3); background-image:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015)); -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%); box-shadow:inset 0 1px 0 rgba(255,255,255,.09); transition:background-color .35s ease; } .x-menu.x-stuck{background-color:rgba(12,12,12,.7)} .x-menu .x-wrap>a,.x-more-btn{text-shadow:0 1px 10px rgba(0,0,0,.5)} .x-menu .x-wrap>a:hover,.x-menu .x-wrap>a.x-cur{text-shadow:0 0 18px rgba(255,26,26,.6),0 1px 10px rgba(0,0,0,.5)} /* footer details on phones and tablets: © on its own line, then two columns lined up with the footer columns above (company details | links) */ @media(max-width:1149px){ .x-legal{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px;align-items:start;letter-spacing:.06em} .x-lg-info{display:contents} .x-lg-info li:first-child{grid-column:1/-1;margin-bottom:8px} .x-lg-info li:not(:first-child){grid-column:1} .x-lg-links{grid-column:2;grid-row:2/span 3;flex-direction:column;align-items:flex-start;gap:12px} .x-lg-links li{white-space:normal} } /* phones: details and links side by side, © centred underneath to close the page */ @media(max-width:1149px){ .x-lg-info li:nth-child(2){grid-row:1} .x-lg-info li:nth-child(3){grid-row:2} .x-lg-info li:nth-child(4){grid-row:3} .x-lg-links{grid-row:1/span 3} .x-lg-info li:first-child{grid-row:4;grid-column:1/-1;justify-self:stretch;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin:18px 0 0;padding-top:24px;border-top:1px solid #1e1e1e} .x-lg-logo{display:block;width:64px;height:auto} } /* desktop: details left, links right on one line, then the closing block with the logo */ .x-lg-logo{display:block;width:64px;height:auto} @media(min-width:1150px){ .x-legal{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:0;row-gap:14px} .x-lg-info{display:contents} .x-lg-info li:not(:first-child){order:1;white-space:nowrap} .x-lg-info li:nth-child(2)::before{content:none} .x-legal .x-lg-links{order:2;margin-left:auto;padding-left:32px;flex-shrink:0} .x-lg-info li:first-child{order:3;flex-basis:100%;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--fg);margin-top:18px;padding-top:24px;border-top:1px solid #1e1e1e} } @media(min-width:900px) and (max-width:1149px){.x-lg-info li::before{content:none!important}} /* ══ Movement (js/motion.js) ══ */ /* 1. Opening: the R▶ draws itself, lights up and leaves; then the page comes in, the red On air card first. Once per visit; never with reduced motion. */ .x-intro-c{display:none} html.x-intro .x-intro-c{display:grid;place-items:center;position:fixed;inset:0;z-index:99999;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(232,0,29,.28),transparent 55%),#070707;animation:x-cur-out .55s 1.35s ease forwards} .x-intro-c svg{width:min(46vw,260px);overflow:visible} .x-intro-c path{fill:transparent;stroke:var(--red);stroke-width:14;stroke-dasharray:1;stroke-dashoffset:1;animation:x-draw .9s cubic-bezier(.6,0,.3,1) forwards,x-fill .35s .75s forwards} html.x-intro .x-intro-c svg{animation:x-logo-out .45s 1.25s cubic-bezier(.7,0,.3,1) forwards} @keyframes x-draw{to{stroke-dashoffset:0}} @keyframes x-fill{to{fill:var(--red);stroke-width:0;filter:drop-shadow(0 0 22px rgba(232,0,29,.8))}} @keyframes x-logo-out{to{transform:scale(.25) translateY(-120%);opacity:0}} @keyframes x-cur-out{to{opacity:0;visibility:hidden}} html.x-intro .x-top,html.x-intro .x-mast{animation:x-down .6s 1.4s cubic-bezier(.2,.8,.2,1) both} html.x-intro .x-mast{animation-delay:1.47s} html.x-intro .x-menu{animation:x-down .6s 1.54s cubic-bezier(.2,.8,.2,1) both} html.x-intro .top-player{animation:x-up-bar .7s 1.6s cubic-bezier(.2,.8,.2,1) both} html.x-intro .x-onair .x-card{animation:x-card-in .9s 1.62s cubic-bezier(.2,.8,.2,1) both} html.x-intro .x-onair .x-just{animation:x-rise .7s 2s cubic-bezier(.2,.8,.2,1) both} html.x-intro .x-cover .x-img{animation:x-wipe 1s 1.9s cubic-bezier(.7,0,.2,1) both} html.x-intro .x-cover .x-aw-txt{animation:x-rise .7s 2.15s cubic-bezier(.2,.8,.2,1) both} html.x-intro .x-cover .x-aw-more{animation:x-rise .7s 2.3s cubic-bezier(.2,.8,.2,1) both} html.x-intro .x-phead h1,html.x-intro .x-phead .x-crumb{animation:x-rise .7s 1.65s cubic-bezier(.2,.8,.2,1) both} html.x-intro .x-phead p{animation:x-rise .7s 1.8s cubic-bezier(.2,.8,.2,1) both} html.x-intro main>section:first-of-type{animation:x-rise .8s 1.95s cubic-bezier(.2,.8,.2,1) both} @keyframes x-down{from{opacity:0;transform:translateY(-14px)}} @keyframes x-up-bar{from{transform:translateY(100%)}} @keyframes x-rise{from{opacity:0;transform:translateY(22px)}} @keyframes x-card-in{0%{opacity:0;transform:translateY(30px) scale(.95);box-shadow:0 0 0 0 rgba(255,26,26,0)}60%{opacity:1;box-shadow:0 0 70px 6px rgba(255,26,26,.55)}100%{opacity:1;transform:none;box-shadow:0 0 0 0 rgba(255,26,26,0)}} @keyframes x-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} /* 3. On air card, still red: breathing light, live dot, ring on the button, an invitation to press play, and the new song rising in. */ .x-card{isolation:isolate} .x-card::before{content:"";position:absolute;z-index:-1;right:-140px;top:-140px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 62%);opacity:.3;pointer-events:none} body.on-air .x-card::before{animation:x-breathe 3.4s ease-in-out infinite} @keyframes x-breathe{0%,100%{opacity:.3;transform:scale(.9)}50%{opacity:.8;transform:scale(1.08)}} .x-onp{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:8px;vertical-align:1px;position:relative} .x-onp::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #fff;opacity:0} body.on-air .x-onp::after{animation:x-ping 1.6s ease-out infinite} @keyframes x-ping{from{transform:scale(.4);opacity:1}to{transform:scale(1.5);opacity:0}} .x-big{position:relative} .x-big::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(0,0,0,.55);opacity:0;pointer-events:none} body.on-air .x-big::after{animation:x-ring 2s ease-out infinite} @keyframes x-ring{from{transform:scale(.92);opacity:1}to{transform:scale(1.4);opacity:0}} body:not(.on-air) .x-card .x-big{animation:x-invite 2.4s ease-in-out infinite} @keyframes x-invite{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}60%{box-shadow:0 0 0 16px rgba(255,255,255,0)}} .x-card h2.x-swap,.x-card .x-art.x-swap{animation:x-swap .65s cubic-bezier(.2,.8,.2,1) both} .x-card .x-art.x-swap{animation-delay:.08s} @keyframes x-swap{from{opacity:0;transform:translateY(24px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}} /* 7. Background: the red stage light drifts slowly; on computers a soft light follows the mouse. Light sections stay as they are. */ body::before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;background:radial-gradient(28% 28% at 30% 28%,rgba(255,26,26,.14),transparent 70%),radial-gradient(24% 24% at 72% 70%,rgba(170,0,20,.13),transparent 70%);animation:x-drift 28s ease-in-out infinite alternate;will-change:transform} @keyframes x-drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(9%,7%) scale(1.12)}100%{transform:translate(-7%,11%) scale(.94)}} .x-mglow{position:fixed;left:0;top:0;width:600px;height:600px;border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(255,26,26,.11),transparent 62%);opacity:0;transition:opacity .5s;will-change:transform} .x-mglow.on{opacity:1} /* 8. Cards that react: they pop in, and on hover they tilt (motion.js), the photo comes closer and the border lights up red. */ .x-dj,.x-xcard{transition:transform .25s ease,border-color .25s,box-shadow .25s;will-change:transform} .x-dj:hover,.x-xcard:hover{border-color:var(--red);box-shadow:0 18px 44px -18px rgba(255,26,26,.65)} .x-dj figure img{transition:transform .6s ease} .x-dj:hover figure img{transform:scale(1.06)} .x-dj:active,.x-xcard:active{border-color:var(--red)} .x-djs .x-dj{animation:x-pop .75s cubic-bezier(.2,.8,.2,1.15) backwards} .x-djs .x-dj:nth-child(2){animation-delay:.12s}.x-djs .x-dj:nth-child(3){animation-delay:.24s}.x-djs .x-dj:nth-child(4){animation-delay:.36s} html.x-intro .x-djs .x-dj{animation-delay:1.9s}html.x-intro .x-djs .x-dj:nth-child(2){animation-delay:2.02s}html.x-intro .x-djs .x-dj:nth-child(3){animation-delay:2.14s} @keyframes x-pop{from{opacity:0;transform:translateY(34px) perspective(900px) rotateX(14deg)}} .x-partner .tier{transition:background-color .25s,box-shadow .25s} .x-partner .tier b{transition:color .25s,transform .25s} .x-partner .tier:hover{background-color:rgba(255,26,26,.07);box-shadow:inset 3px 0 0 var(--red)} .x-partner .tier:hover b{color:var(--red);transform:translateX(6px)} @media(prefers-reduced-motion:reduce){ .x-intro-c{display:none!important} body::before,.x-card::before,.x-onp::after,.x-big::after,.x-card .x-big,.x-djs .x-dj,.x-swap{animation:none!important} .x-mglow{display:none} .x-dj,.x-xcard,.x-dj figure img{transition:none} }