/* =================================================================== RADIO SUPREME — Design System Palette sampled directly from the station logo: maroon #7A0A18 (dominant logo fill) gold #FFE000 (lightning bolts) red #D81E1E (DJ Redz mark — reserved for ON AIR only) =================================================================== */ :root{ /* ---- colour ---- */ --ink: #0A0507; /* page ground, near-black with a maroon cast */ --ink-2: #120A0D; /* raised surface */ --ink-3: #1B1013; /* card surface */ --line: #2C1A1F; /* hairline */ --line-soft: #211418; --maroon: #7A0A18; --maroon-lit: #9E1226; --maroon-deep:#4A0610; --gold: #FFE000; --gold-deep: #C9A600; --red: #D81E1E; /* ON AIR ONLY — do not reuse */ --text: #F6EFEC; --text-mid: #C4B2AC; --text-dim: #8C7A75; --focus: #FFE000; /* ---- type ---- */ --font-display: 'Archivo', 'Arial Black', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.9375rem; --fs-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --fs-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); --fs-xl: clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem); --fs-2xl: clamp(2.2rem, 1.6rem + 3vw, 4rem); --fs-3xl: clamp(2.8rem, 1.8rem + 5vw, 6rem); /* ---- spacing (4px base) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.75rem; --sp-8: 3.5rem; --sp-9: 5rem; --sp-10: 7rem; --shell: 1280px; --gutter: clamp(1.25rem, 4vw, 3rem); --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; --ease: cubic-bezier(.22,.61,.36,1); --ease-out-back: cubic-bezier(.34,1.3,.64,1); --header-h: 74px; } /* =================================================================== RESET =================================================================== */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); } body{ margin:0; background:var(--ink); color:var(--text); font-family:var(--font-body); font-size:var(--fs-base); line-height:1.65; -webkit-font-smoothing:antialiased; /* `clip` not `hidden`: hidden turns into a scroll container, which breaks programmatic scrolling and scrollIntoView. */ overflow-x:clip; } img{ max-width:100%; height:auto; display:block; } svg{ display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } h1,h2,h3{ margin:0; font-family:var(--font-display); line-height:1.02; letter-spacing:-0.02em; } p{ margin:0; } ul{ margin:0; padding:0; list-style:none; } :focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--r-sm); } .skip-link{ position:fixed; top:-100px; left:var(--sp-4); z-index:2000; background:var(--gold); color:#000; font-weight:700; padding:var(--sp-3) var(--sp-5); border-radius:var(--r-pill); transition:top .2s var(--ease); } .skip-link:focus{ top:var(--sp-4); } .shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); } /* =================================================================== BUTTONS =================================================================== */ .btn{ --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:var(--line); display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-5); background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd); border-radius:var(--r-pill); font-weight:600; font-size:var(--fs-sm); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; transition:transform .18s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0); } .btn-primary{ --btn-bg:var(--gold); --btn-fg:#160E00; --btn-bd:var(--gold); box-shadow:0 6px 26px -8px rgba(255,224,0,.6); } .btn-primary:hover{ --btn-bg:#FFEB4D; box-shadow:0 12px 34px -8px rgba(255,224,0,.75); } .btn-ghost{ --btn-bd:#3A2429; --btn-fg:var(--text); backdrop-filter:blur(6px); } .btn-ghost:hover{ --btn-bd:var(--gold); --btn-fg:var(--gold); } .btn-live{ --btn-bg:var(--maroon); --btn-bd:var(--maroon-lit); --btn-fg:#fff; padding-inline:var(--sp-4); } .btn-live:hover{ --btn-bg:var(--maroon-lit); } .btn-lg{ padding:var(--sp-4) var(--sp-7); font-size:var(--fs-base); } .btn-sm{ padding:var(--sp-2) var(--sp-4); font-size:var(--fs-xs); } .ico{ width:18px; height:18px; fill:currentColor; flex:none; } .ico-sm{ width:15px; height:15px; } /* live dot */ .live-dot{ width:8px; height:8px; border-radius:50%; background:var(--red); flex:none; box-shadow:0 0 0 0 rgba(216,30,30,.7); animation:pulse 2s infinite; } @keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(216,30,30,0); } 100%{ box-shadow:0 0 0 0 rgba(216,30,30,0); } } /* =================================================================== HEADER =================================================================== */ .site-header{ position:fixed; inset:0 0 auto 0; z-index:900; height:var(--header-h); display:flex; align-items:center; transition:background-color .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s; border-bottom:1px solid transparent; } .site-header.is-stuck{ background:rgba(10,5,7,.82); backdrop-filter:blur(18px) saturate(140%); border-bottom-color:var(--line-soft); } .header-inner{ display:flex; align-items:center; gap:var(--sp-5); } /* Logo only — no wordmark. The mark already reads "Radio Supreme", so setting it in type beside itself just said the name twice. */ .brand{ display:flex; align-items:center; margin-right:auto; } .brand img{ width:68px; height:auto; } .nav-desktop{ display:flex; gap:var(--sp-6); } .nav-desktop a{ position:relative; font-size:var(--fs-sm); font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mid); padding-block:var(--sp-2); transition:color .2s var(--ease); } .nav-desktop a::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .3s var(--ease); } .nav-desktop a:hover,.nav-desktop a.is-current{ color:var(--text); } .nav-desktop a:hover::after,.nav-desktop a.is-current::after{ transform:scaleX(1); transform-origin:left; } .header-actions{ display:flex; align-items:center; gap:var(--sp-3); } .hamburger{ display:none; width:44px; height:44px; flex-direction:column; justify-content:center; align-items:center; gap:5px; } .hamburger span{ display:block; width:24px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s var(--ease), opacity .2s var(--ease); } .hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* =================================================================== MOBILE MENU =================================================================== */ .mobile-menu{ position:fixed; inset:0; z-index:880; background:linear-gradient(165deg,var(--maroon-deep) 0%, var(--ink) 55%); display:flex; flex-direction:column; justify-content:center; padding:var(--header-h) var(--gutter) var(--sp-8); opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s; } .mobile-menu[hidden]{ display:flex; } /* we animate instead of display:none */ .mobile-menu.is-open{ opacity:1; visibility:visible; } .mobile-menu nav{ display:flex; flex-direction:column; gap:var(--sp-2); } .mobile-menu nav a{ display:flex; align-items:baseline; gap:var(--sp-4); font-family:var(--font-display); font-weight:800; font-stretch:105%; font-size:clamp(2rem,10vw,3.25rem); text-transform:uppercase; letter-spacing:-.02em; padding-block:var(--sp-2); border-bottom:1px solid rgba(255,255,255,.07); opacity:0; transform:translateY(24px); transition:color .2s var(--ease); } .mobile-menu.is-open nav a{ animation:mmIn .5s var(--ease) forwards; } .mobile-menu.is-open nav a[data-i="1"]{ animation-delay:.06s; } .mobile-menu.is-open nav a[data-i="2"]{ animation-delay:.12s; } .mobile-menu.is-open nav a[data-i="3"]{ animation-delay:.18s; } .mobile-menu.is-open nav a[data-i="4"]{ animation-delay:.24s; } @keyframes mmIn{ to{ opacity:1; transform:none; } } .mobile-menu nav a:active{ color:var(--gold); } .mm-num{ font-family:var(--font-body); font-size:var(--fs-xs); font-weight:600; color:var(--gold); letter-spacing:.12em; } .mm-foot{ display:flex; gap:var(--sp-5); margin-top:var(--sp-8); font-size:var(--fs-sm); letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); } /* =================================================================== HERO =================================================================== */ .hero{ position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; padding:calc(var(--header-h) + var(--sp-6)) 0 var(--sp-7); overflow:hidden; text-align:center; } .hero-bg{ position:absolute; inset:0; z-index:0; } .hero-glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; } .hero-glow-a{ width:min(90vw,900px); aspect-ratio:1; top:-22%; left:50%; translate:-50% 0; background:radial-gradient(circle,var(--maroon) 0%, transparent 68%); animation:drift 22s ease-in-out infinite alternate; } .hero-glow-b{ width:min(70vw,620px); aspect-ratio:1; bottom:-18%; right:-8%; background:radial-gradient(circle,#5A0712 0%, transparent 70%); animation:drift 28s ease-in-out infinite alternate-reverse; } @keyframes drift{ to{ transform:translate3d(4%,5%,0) scale(1.12); } } .hero-grain{ position:absolute; inset:0; opacity:.32; mix-blend-mode:overlay; pointer-events:none; 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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } .hero::after{ content:''; position:absolute; inset:auto 0 0 0; height:32%; z-index:1; background:linear-gradient(to top,var(--ink),transparent); pointer-events:none; } .hero-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; } .onair{ display:inline-flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3); border:1px solid rgba(216,30,30,.45); border-radius:var(--r-pill); background:rgba(216,30,30,.09); font-size:var(--fs-xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:var(--sp-6); } .onair-pulse{ width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(216,30,30,.7); animation:pulse 2s infinite; } /* Capped on BOTH axes so a wide logo can't blow out the vertical rhythm on short/landscape viewports. */ .hero-logo{ width:min(90vw,720px); margin:0 0 var(--sp-5); } .hero-logo img{ width:auto; height:auto; max-width:100%; max-height:44svh; margin-inline:auto; filter:drop-shadow(0 18px 50px rgba(0,0,0,.75)) drop-shadow(0 0 34px rgba(255,224,0,.14)); } .hero-sub{ max-width:44ch; font-size:var(--fs-md); color:var(--text-mid); margin-bottom:var(--sp-6); } .hero-sub strong{ color:var(--text); font-weight:600; } .hero-cta{ display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:center; } .eq{ display:flex; align-items:flex-end; gap:4px; height:34px; margin-top:var(--sp-6); } .eq i{ width:3px; background:linear-gradient(to top,var(--maroon-lit),var(--gold)); border-radius:2px; animation:eq 1.1s ease-in-out infinite; } .eq i:nth-child(3n){ animation-duration:.8s; } .eq i:nth-child(3n+1){ animation-duration:1.4s; } .eq i:nth-child(4n){ animation-delay:-.4s; } .eq i:nth-child(5n){ animation-delay:-.8s; } @keyframes eq{ 0%,100%{ height:15%; } 50%{ height:100%; } } .scroll-hint{ position:absolute; bottom:var(--sp-5); left:50%; translate:-50% 0; z-index:3; width:26px; height:42px; border:1px solid #4A3238; border-radius:var(--r-pill); display:grid; place-items:start center; padding-top:8px; } .scroll-hint span{ width:3px; height:8px; border-radius:2px; background:var(--gold); animation:scrolly 1.8s ease-in-out infinite; } @keyframes scrolly{ 0%,100%{ transform:translateY(0); opacity:1; } 60%{ transform:translateY(14px); opacity:0; } } /* =================================================================== SECTION FURNITURE =================================================================== */ .section{ padding-block:var(--sp-10); position:relative; } .sec-head{ max-width:60ch; margin-bottom:var(--sp-8); } .eyebrow{ display:flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-xs); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--sp-4); } .eyebrow-rule{ width:38px; height:1px; background:var(--gold); opacity:.6; } .sec-title{ font-size:var(--fs-2xl); font-weight:900; font-stretch:112%; text-transform:uppercase; } .sec-lede{ margin-top:var(--sp-4); font-size:var(--fs-md); color:var(--text-mid); max-width:52ch; } /* reveal on scroll */ [data-reveal]{ opacity:0; transform:translateY(26px); } [data-reveal].is-in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); } /* =================================================================== LISTEN LIVE =================================================================== */ .section-listen{ background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(122,10,24,.30), transparent 70%), var(--ink); border-block:1px solid var(--line-soft); } .platforms{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-5); } .platform{ display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-4); border:1px solid var(--line); border-radius:var(--r-pill); background:var(--ink-2); font-size:var(--fs-sm); font-weight:600; letter-spacing:.03em; transition:border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); } .platform svg{ fill:currentColor; } .platform.is-active{ border-color:var(--gold); background:rgba(255,224,0,.08); color:var(--gold); } .platform:not(.is-soon):hover{ border-color:var(--gold); } .platform.is-soon{ opacity:.4; cursor:not-allowed; } .platform-state{ font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:2px 6px; border-radius:var(--r-sm); background:rgba(255,255,255,.08); color:var(--text-mid); } .platform.is-active .platform-state{ background:var(--red); color:#fff; } .stage{ display:grid; grid-template-columns:1fr 360px; gap:var(--sp-5); align-items:start; } .dock{ position:relative; aspect-ratio:16/9; width:100%; border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(150deg,var(--ink-3),#0D0609); border:1px solid var(--line); box-shadow:0 40px 90px -40px rgba(0,0,0,.9); } .dock-poster,.dock-away{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-4); text-align:center; padding:var(--sp-5); } .dock-poster::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(122,10,24,.35), transparent 65%); } /* flex:none throughout — these are column flex items and would otherwise be shrunk vertically when the dock is short. */ .dock-poster > *{ position:relative; flex:none; } .dock-poster img{ width:min(38%,190px); opacity:.92; flex:none; } .dock-caption{ font-size:var(--fs-sm); color:var(--text-mid); letter-spacing:.04em; } .dock-caption strong{ color:var(--gold); font-weight:600; } .play-big{ width:76px; height:76px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--gold); color:#160E00; box-shadow:0 0 0 0 rgba(255,224,0,.45); transition:transform .25s var(--ease-out-back), box-shadow .3s var(--ease); animation:ring 2.6s ease-out infinite; } .play-big svg{ width:30px; height:30px; fill:currentColor; margin-left:4px; } .play-big:hover{ transform:scale(1.09); } @keyframes ring{ 0%{ box-shadow:0 0 0 0 rgba(255,224,0,.4); } 70%{ box-shadow:0 0 0 26px rgba(255,224,0,0); } 100%{ box-shadow:0 0 0 0 rgba(255,224,0,0); } } .dock-away p{ font-size:var(--fs-md); color:var(--text-mid); } /* chat */ .chat{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; height:min(64vh,560px); } .chat-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line); } .chat-head h3{ font-size:var(--fs-sm); font-weight:800; font-stretch:110%; letter-spacing:.14em; text-transform:uppercase; } .chat-toggle{ display:none; } .chat-body{ flex:1; position:relative; min-height:0; } .chat-body iframe{ width:100%; height:100%; border:0; display:block; } .chat-idle{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-4); text-align:center; padding:var(--sp-5); color:var(--text-dim); font-size:var(--fs-sm); } /* =================================================================== DJ FEATURE =================================================================== */ .section-djs{ background:var(--ink); } .dj-feature{ display:grid; grid-template-columns:1.05fr 1fr; gap:var(--sp-8); align-items:center; } /* width:100% is load-bearing — with `margin-inline:auto` below, an auto-width box collapses to the (zero-width, lazy) image and then snaps open when it loads. */ .dj-portrait{ position:relative; width:100%; } .dj-halo{ position:absolute; inset:6% 8% 12%; border-radius:50%; background:radial-gradient(circle,var(--maroon) 0%, transparent 68%); filter:blur(60px); opacity:.75; } .dj-portrait img{ position:relative; width:100%; filter:drop-shadow(0 30px 60px rgba(0,0,0,.8)); } .dj-role{ font-size:var(--fs-xs); font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--sp-2); } .dj-name{ font-size:var(--fs-xl); font-weight:900; font-stretch:112%; text-transform:uppercase; margin-bottom:var(--sp-5); } .todo-note{ position:relative; padding:var(--sp-5); margin-bottom:var(--sp-6); border:1px dashed #4A2E34; border-radius:var(--r-md); background:rgba(255,224,0,.03); color:var(--text-mid); font-size:var(--fs-base); } .todo-tag{ display:inline-block; margin-bottom:var(--sp-2); font-size:9px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(255,224,0,.35); padding:2px 8px; border-radius:var(--r-sm); } .dj-facts{ display:grid; gap:var(--sp-1); margin-bottom:var(--sp-6); } .dj-facts li{ display:flex; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-3) 0; border-bottom:1px solid var(--line-soft); } .dj-facts span{ font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); } .dj-facts strong{ font-weight:600; font-size:var(--fs-base); } .dj-cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); } /* ---- roster grid ---- */ /* auto-fill with a CAPPED track, not auto-fit with 1fr: with a single DJ on the roster, 1fr would stretch one card the full 1184px and turn its light logo tile into a slab across the whole dark section. */ .roster{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fill,minmax(280px,360px)); justify-content:start; margin-top:var(--sp-8); } .dj-card{ display:flex; flex-direction:column; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:transform .25s var(--ease), border-color .25s var(--ease); } .dj-card:hover{ transform:translateY(-4px); border-color:#4A2E34; } /* Light tile for logos whose lockup needs a light ground. The colour is the artwork's own background (#F7F7F7), so no seam shows around the PNG. */ .dj-card-logo{ background:#F7F7F7; display:grid; place-items:center; padding:var(--sp-5); aspect-ratio:16/9; } .dj-card-logo img{ max-width:100%; max-height:100%; width:auto; height:auto; } .dj-card-body{ padding:var(--sp-5); flex:1; } .dj-card-role{ font-size:var(--fs-xs); font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--sp-1); } .dj-card-name{ margin:0 0 var(--sp-4); font-family:var(--font-display); font-size:var(--fs-lg); font-weight:900; font-stretch:110%; text-transform:uppercase; line-height:1.05; letter-spacing:-.01em; } .todo-note-sm{ margin-bottom:0; padding:var(--sp-4); font-size:var(--fs-sm); } .roster-note{ margin-top:var(--sp-8); padding-top:var(--sp-6); border-top:1px solid var(--line-soft); color:var(--text-dim); font-size:var(--fs-base); text-align:center; } .roster-note a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; } /* =================================================================== SCHEDULE (honest empty state) =================================================================== */ .section-schedule{ background:linear-gradient(180deg,var(--ink) 0%, #0D0609 100%); border-top:1px solid var(--line-soft); } .sched-empty{ position:relative; overflow:hidden; max-width:720px; margin-inline:auto; text-align:center; padding:var(--sp-9) var(--sp-6); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ink-2); } .sched-empty::before{ content:''; position:absolute; inset:-40% 30% auto; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(122,10,24,.55),transparent 70%); filter:blur(70px); pointer-events:none; } .sched-empty > *{ position:relative; } .sched-empty-mark{ width:52px; margin:0 auto var(--sp-5); color:var(--gold); opacity:.75; } .sched-empty-mark svg{ width:100%; height:auto; } .sched-empty h3{ font-size:var(--fs-xl); font-weight:900; font-stretch:110%; text-transform:uppercase; margin-bottom:var(--sp-4); } .sched-empty p{ color:var(--text-mid); max-width:48ch; margin-inline:auto; font-size:var(--fs-md); } .sched-cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center; margin-top:var(--sp-6); } /* =================================================================== CONTACT =================================================================== */ .section-contact{ background:#0D0609; border-top:1px solid var(--line-soft); } .contact-grid{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); } .ccard{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:var(--sp-1); padding:var(--sp-6) var(--sp-5); background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-md); transition:transform .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease); } .ccard::after{ content:''; position:absolute; inset:auto 0 0 0; height:2px; background:linear-gradient(90deg,var(--maroon-lit),var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); } .ccard:hover{ transform:translateY(-4px); border-color:#4A2E34; background:var(--ink-3); } .ccard:hover::after{ transform:scaleX(1); } .ccard-ico{ width:26px; height:26px; color:var(--gold); margin-bottom:var(--sp-3); } .ccard-ico svg{ width:100%; height:100%; fill:currentColor; } .ccard-ico svg [fill="none"]{ fill:none; } .ccard-label{ font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); } .ccard-value{ font-size:var(--fs-md); font-weight:600; word-break:break-word; } /* =================================================================== FOOTER =================================================================== */ .site-footer{ padding-block:var(--sp-8) calc(var(--sp-8) + env(safe-area-inset-bottom)); border-top:1px solid var(--line-soft); background:var(--ink); } .footer-inner{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-5); text-align:center; } .footer-brand img{ width:190px; opacity:.9; } .footer-nav{ display:flex; flex-wrap:wrap; gap:var(--sp-5); justify-content:center; } .footer-nav a{ font-size:var(--fs-sm); letter-spacing:.08em; text-transform:uppercase; color:var(--text-mid); transition:color .2s var(--ease); } .footer-nav a:hover{ color:var(--gold); } .footer-social{ display:flex; gap:var(--sp-3); } .footer-social a{ width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--text-mid); transition:color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); } .footer-social a:hover{ color:var(--gold); border-color:var(--gold); transform:translateY(-3px); } .footer-social svg{ width:19px; height:19px; fill:currentColor; } .footer-social svg [fill="none"]{ fill:none; } .copyright{ font-size:var(--fs-xs); color:var(--text-dim); letter-spacing:.05em; } /* =================================================================== TRAVELLING PLAYER The iframe never moves in the DOM — only its geometry changes — so the Twitch stream survives navigation between sections. =================================================================== */ .player-shell{ position:fixed; z-index:800; border-radius:var(--r-lg); overflow:hidden; background:#000; opacity:0; pointer-events:none; transition:top .5s var(--ease), left .5s var(--ease), width .5s var(--ease), height .5s var(--ease), opacity .3s var(--ease), box-shadow .4s var(--ease); } .player-shell[data-state="docked"], .player-shell[data-state="mini"]{ opacity:1; pointer-events:auto; } .player-shell[data-state="docked"]{ border:1px solid var(--line); box-shadow:0 40px 90px -40px rgba(0,0,0,.9); } .player-shell[data-state="mini"]{ border:1px solid #4A2E34; box-shadow:0 24px 60px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,224,0,.12); } .player-frame{ position:absolute; inset:0; } .player-frame iframe{ width:100%; height:100%; border:0; display:block; } .player-chrome{ position:absolute; inset:auto 0 0 0; display:none; align-items:center; justify-content:space-between; gap:var(--sp-2); padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); background:linear-gradient(to top,rgba(10,5,7,.96),rgba(10,5,7,0)); } .player-shell[data-state="mini"] .player-chrome{ display:flex; } .player-chrome-title{ display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .player-chrome-btns{ display:flex; gap:2px; flex:none; } .player-chrome-btns button{ width:34px; height:34px; display:grid; place-items:center; border-radius:var(--r-sm); color:var(--text-mid); transition:color .2s var(--ease), background-color .2s var(--ease); } .player-chrome-btns button:hover{ color:var(--gold); background:rgba(255,255,255,.08); } .player-chrome-btns svg{ width:15px; height:15px; } body.player-mini{ scroll-padding-bottom:200px; } /* =================================================================== RESPONSIVE =================================================================== */ @media (max-width:1080px){ .stage{ grid-template-columns:1fr 320px; } .dj-feature{ gap:var(--sp-6); } } @media (max-width:900px){ :root{ --header-h:66px; } .nav-desktop{ display:none; } .hamburger{ display:flex; } .btn-live{ display:none; } .stage{ grid-template-columns:1fr; } .chat{ height:auto; } .chat-toggle{ display:inline-flex; } .chat-body{ height:0; overflow:hidden; transition:height .4s var(--ease); } .chat-body.is-open{ height:min(60vh,460px); } .dj-feature{ grid-template-columns:1fr; gap:var(--sp-6); } .dj-portrait{ max-width:460px; margin-inline:auto; } .section{ padding-block:var(--sp-9); } } @media (max-width:600px){ :root{ --sp-9:4rem; --sp-10:5rem; } .brand img{ width:56px; } .hero{ min-height:100svh; } .hero-logo{ width:min(92vw,460px); } .hero-cta{ width:100%; flex-direction:column; } .hero-cta .btn{ width:100%; } .eq{ height:26px; } .scroll-hint{ display:none; } .sched-empty{ padding:var(--sp-8) var(--sp-5); } .sched-cta{ flex-direction:column; } .sched-cta .btn{ width:100%; } .dj-cta{ flex-direction:column; align-items:stretch; } .play-big{ width:62px; height:62px; } .play-big svg{ width:24px; height:24px; } } /* =================================================================== MOTION / CONTRAST PREFERENCES =================================================================== */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } [data-reveal]{ opacity:1; transform:none; } .mobile-menu.is-open nav a{ opacity:1; transform:none; } .eq i{ height:50%; } }