/* ============================================================ Soho Live - Box Office (Music what's-on) Ported from the Claude Design "Soho Live - Music Site.dc". Dark-first. Uses soho-ds.css tokens + soho-site.css chrome. ============================================================ */ @keyframes bx-drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-2%,3%) scale(1.08); } } @keyframes bx-fadeOnly { from { opacity: 0; } to { opacity: 1; } } .bx { position: relative; z-index: 1; } .bx-fade { animation: bx-fadeOnly 460ms var(--ease); } /* Drift glow behind the top of the page */ .bx-glow { position: absolute; top: 0; left: 0; right: 0; height: 82vh; z-index: 0; pointer-events: none; overflow: hidden; } /* Animatable glow tint colours (registered so the gradient stops can transition) */ @property --bx-glow-1 { syntax: ''; inherits: true; initial-value: rgba(105,29,177,0.34); } @property --bx-glow-2 { syntax: ''; inherits: true; initial-value: rgba(66,19,111,0.24); } .bx-glow-a { position: absolute; inset: 0; --bx-glow-1: rgba(105,29,177,0.34); --bx-glow-2: rgba(66,19,111,0.24); background: radial-gradient(ellipse 62% 48% at 26% 26%, var(--bx-glow-1), transparent 72%), radial-gradient(ellipse 60% 46% at 78% 56%, var(--bx-glow-2), transparent 76%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(252,56,161,0.08), transparent 72%), #000; animation: bx-drift 26s ease-in-out infinite alternate; transition: --bx-glow-1 600ms var(--ease), --bx-glow-2 600ms var(--ease); } /* Venue-tinted glow — driven by data-venue on , set from the active filter pill. Jack = green, Piano = gold, Alfie's = red; "all" falls through to the default purple. */ body[data-venue="jack"] .bx-glow-a { --bx-glow-1: rgba(95,122,82,0.40); --bx-glow-2: rgba(95,122,82,0.24); } body[data-venue="piano"] .bx-glow-a { --bx-glow-1: rgba(185,154,91,0.38); --bx-glow-2: rgba(185,154,91,0.22); } body[data-venue="alfies"] .bx-glow-a { --bx-glow-1: rgba(176,66,78,0.40); --bx-glow-2: rgba(176,66,78,0.24); } .bx-glow-b { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 58%,#000 100%); } /* ── HERO CAROUSEL ─────────────────────────────────────── */ .bx-hero { position: relative; height: min(72vh,660px); overflow: hidden; background: #000; } .bx-hero.is-empty { display: none; } .bx-hero-layer { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1100ms cubic-bezier(0.42,0,0.22,1); } .bx-hero-layer.is-active { opacity: 1; pointer-events: auto; } .bx-hero-layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .bx-hero-scrim-a { position: absolute; inset: 0; background: linear-gradient(to top,#000 0%,rgba(0,0,0,0.48) 34%,rgba(0,0,0,0.1) 68%,transparent 100%); } .bx-hero-scrim-b { position: absolute; inset: 0; background: linear-gradient(to right,rgba(0,0,0,0.74) 0%,rgba(0,0,0,0.18) 46%,transparent 72%); } .bx-hero-content { position: absolute; left: clamp(20px,4vw,56px); bottom: clamp(40px,8vh,84px); max-width: 680px; } .bx-hero-tag { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border: 1px solid; border-radius: 4px; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 22px; } .bx-hero-tag span { width: 7px; height: 7px; border-radius: 2px; } .bx-hero-series { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--s250); margin-bottom: 12px; } .bx-hero-title { font-family: var(--display); font-weight: 800; font-size: clamp(50px,8vw,100px); line-height: 0.9; letter-spacing: -0.04em; text-transform: uppercase; color: #fff; margin-bottom: 20px; } .bx-hero-dateline { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s200); margin-bottom: 26px; } .bx-hero-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.28); background: rgba(0,0,0,0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5; } .bx-hero-prev { left: clamp(14px,2vw,28px); } .bx-hero-next { right: clamp(14px,2vw,28px); } .bx-hero-dots { position: absolute; right: clamp(20px,4vw,56px); bottom: clamp(40px,8vh,84px); display: flex; gap: 8px; z-index: 5; } .bx-hero-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.35); border: none; padding: 0; cursor: pointer; transition: width 300ms, background 300ms; } .bx-hero-dot.is-active { width: 22px; background: #fff; } /* ── FILTER BAR ────────────────────────────────────────── */ .bx-filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: clamp(20px,3vh,30px) clamp(20px,4vw,56px); position: relative; z-index: 1; } .bx-filter-pills { display: flex; gap: 9px; flex-wrap: wrap; } .bx-pill { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 11px 20px; border-radius: 999px; cursor: pointer; color: var(--s150); background: transparent; border: 1px solid var(--s500); transition: color 200ms, background 200ms, border-color 200ms; } .bx-pill.is-active { color: var(--accent,#A78CC9); background: color-mix(in srgb, var(--accent,#A78CC9) 15%, transparent); border-color: var(--accent,#A78CC9); } .bx-filter-divider { width: 1px; height: 26px; background: var(--s500); } .bx-cal-btn { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 11px 20px; border-radius: 999px; cursor: pointer; color: #A78CC9; background: transparent; border: 1px solid rgba(167,140,201,0.6); transition: color 200ms, background 200ms, border-color 200ms; } .bx-cal-btn.is-open { color: #C9B8E0; background: rgba(167,140,201,0.16); border-color: #A78CC9; } .bx-search { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 10px; padding: 11px 18px; } .bx-search svg { width: 16px; height: 16px; stroke: var(--s300); stroke-width: 1.6; fill: none; stroke-linecap: round; flex-shrink: 0; } .bx-search input { flex: 1; background: transparent; border: none; outline: none; font-family: var(--sans); font-size: 15px; color: #fff; } .bx-search input::placeholder { color: var(--s300); } /* ── CALENDAR ──────────────────────────────────────────── */ .bx-cal { padding: 8px clamp(20px,4vw,56px) 20px; position: relative; z-index: 1; } .bx-cal[hidden] { display: none; } .bx-cal-inner { max-width: 620px; margin: 0 auto; padding: 14px 0 34px; } .bx-cal-head { display: flex; align-items: center; justify-content: center; gap: 26px; margin-bottom: 26px; } .bx-cal-title { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; } .bx-cal-arrow { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--s500); background: transparent; color: var(--s200); cursor: default; } .bx-cal-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; margin-bottom: 8px; } .bx-cal-dow div { text-align: center; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; color: var(--s300); } .bx-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; } .bx-cal-cell { aspect-ratio: 1/1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; position: relative; } .bx-cal-day { width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 15px; background: transparent; color: var(--s350); } .bx-cal-day.is-today { background: #fff; color: #000; } .bx-cal-day.has-shows { color: #fff; } .bx-cal-cell-dots { display: flex; gap: 3px; height: 6px; } .bx-cal-cell-dots span { width: 5px; height: 5px; border-radius: 999px; } /* ── DAY-GROUPED CARDS ─────────────────────────────────── */ .bx-body { padding: 6px clamp(20px,4vw,56px) 40px; position: relative; z-index: 1; } .bx-overline { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--s300); margin-bottom: 8px; } .bx-group { margin-top: 38px; } .bx-group-head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--s600); padding-bottom: 16px; margin-bottom: 26px; } .bx-group-date { display: flex; align-items: baseline; gap: 14px; } .bx-group-dow, .bx-group-mon { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; color: var(--s300); text-transform: uppercase; } .bx-group-day { font-family: var(--display); font-weight: 800; font-size: clamp(40px,5vw,58px); line-height: 0.9; color: #fff; letter-spacing: -0.02em; } .bx-group-count { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; color: var(--s300); text-transform: uppercase; } .bx-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: 22px; } .bx-card { background: #0B0B0B; border: 1px solid var(--s600); border-radius: 6px; overflow: hidden; cursor: default; } .bx-card-media { position: relative; aspect-ratio: 16/11; overflow: hidden; } .bx-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .bx-card-media-scrim { position: absolute; inset: 0; background: linear-gradient(to top,rgba(12,12,14,0.55),transparent 55%); } .bx-card-body { padding: 20px 22px 22px; } .bx-card-stage { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; } .bx-card-stage span:first-child { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .bx-card-stage span:last-child { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .bx-card-series { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s300); margin-bottom: 8px; } .bx-card-title { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; margin-bottom: 18px; } .bx-card-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--s600); padding-top: 16px; } .bx-card-foot-venue { font-family: var(--sans); font-size: 14px; color: var(--s200); } .bx-card-foot-view { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; } /* ── PAGER ─────────────────────────────────────────────── */ .bx-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--s600); } .bx-pager[hidden] { display: none; } .bx-pager-info { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s300); } .bx-pager-ctrls { display: flex; align-items: center; gap: 8px; } .bx-pager-step { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 18px; border-radius: 999px; cursor: pointer; background: transparent; border: 1px solid var(--s500); color: var(--s150); } .bx-pager-step:disabled { color: var(--s500); cursor: default; } .bx-pager-num { font-family: var(--display); font-weight: 800; font-size: 12px; width: 40px; height: 40px; border-radius: 999px; cursor: pointer; color: var(--s150); background: transparent; border: 1px solid var(--s500); } .bx-pager-num.is-active { color: #000; background: #fff; border-color: #fff; } /* ── LOADING / FALLBACK ────────────────────────────────── */ .bx-loading { padding: clamp(40px,10vh,120px) clamp(20px,4vw,56px); text-align: center; } .bx-loading-txt { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--s300); } @media (max-width: 760px) { .bx-hero { height: min(64vh,520px); } .bx-search { order: 3; width: 100%; flex-basis: 100%; } } /* Show cards link to their Show Listing Page. Private buy-outs stay static. */ .bx-card-link { cursor: pointer; transition: border-color 160ms ease, transform 160ms ease; } .bx-card-link:hover { border-color: var(--s400); transform: translateY(-2px); } .bx-card.is-private { cursor: default; } .bx-card-foot-view.is-private { color: var(--s300); font-weight: 700; font-family: var(--display); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; } .bx-card-foot-actions { display: inline-flex; align-items: center; gap: 16px; } .bx-card-foot-view { text-decoration: none; } .bx-card-foot-book { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent, #A78CC9); text-decoration: none; } .bx-card-foot-book:hover { text-decoration: underline; } /* Hero: whole active slide links to the show listing page; day-of-week pill */ .bx-hero-layer { text-decoration: none; color: inherit; } .bx-hero-layer.is-active { cursor: pointer; } .bx-hero-daypill { display: inline-block; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #F5F5F3; background: transparent; border: 1px solid rgba(255,255,255,0.35); padding: 6px 14px; border-radius: 999px; margin-top: 18px; } /* Calendar: dates with shows are clickable and jump to that day */ .bx-cal-cell.is-clickable { cursor: pointer; border-radius: 10px; transition: background 160ms; } .bx-cal-cell.is-clickable:hover { background: rgba(255,255,255,0.06); } .bx-cal-cell.is-clickable:hover .bx-cal-day { color: #fff; }