@import url("../tokens/fonts.css"); /* ========================================================================== Headliner — raw live-music energy with gig-poster craft. Screen-printed plates (ink, riot red, fluoro flare), stomp-box controls, ticket stubs, fabric wristbands, setlists taped to the floor, light beams. Colours, spacing, radii, shadows, durations and easings come from tokens.css. Rules: movement is transform/opacity only; entrances fill BACKWARDS; colour/shadow only change on one element's own state. ========================================================================== */ :root { --hl-fg: var(--ink); --hl-fg-soft: var(--ink-soft); --hl-page-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .93 0 0 0 0 .85 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cg fill='none' stroke='%23fff'%3E%3Cpath d='M0 .5H280M0 70.5H280M0 140.5H280M0 210.5H280' stroke-opacity='.035'/%3E%3Cpath d='M96.5 0V70M210.5 70V140M40.5 140V210M160.5 210V280' stroke-opacity='.03'/%3E%3C/g%3E%3Cg transform='rotate(-14 70 100)' fill='%23ff4632' fill-opacity='.17'%3E%3Crect x='56' y='97' width='28' height='6'/%3E%3Crect x='67' y='103' width='6' height='16'/%3E%3C/g%3E%3Cg transform='rotate(9 210 230)' fill='%23e6ff3b' fill-opacity='.11'%3E%3Crect x='196' y='227' width='28' height='6'/%3E%3Crect x='196' y='213' width='6' height='20'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(120% 70% at 50% -12%, #ffe7a81c, #ffe7a800 62%); --hl-page-size: 200px 200px, 280px 280px, 100% 1100px; --hl-page-repeat: repeat, repeat, no-repeat; --hl-beam: #fff1c9; --hl-wave-bed: var(--ink-soft); color-scheme: dark; } [data-theme="poster"] { --hl-page-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke-width='1.2'%3E%3Cg stroke='%23ff4632' stroke-opacity='.28' transform='translate(2.4 1.6)'%3E%3Ccircle cx='60' cy='60' r='7'/%3E%3Cpath d='M60 46V74M46 60H74'/%3E%3C/g%3E%3Cg stroke='%23161213' stroke-opacity='.16'%3E%3Ccircle cx='60' cy='60' r='7'/%3E%3Cpath d='M60 46V74M46 60H74'/%3E%3C/g%3E%3Cg stroke='%23161213' stroke-opacity='.1'%3E%3Cpath d='M172 176h14M179 169v14'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), radial-gradient(120% 70% at 50% -12%, #ffffff66, #ffffff00 60%); --hl-page-size: 200px 200px, 240px 240px, 100% 1100px; --hl-beam: #ff4632; color-scheme: light; } body { margin: 0; background-color: var(--stage); background-image: var(--hl-page-img); background-size: var(--hl-page-size); background-repeat: var(--hl-page-repeat); color: var(--hl-fg); font-family: var(--font-body); font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } *, *::before, *::after { box-sizing: border-box; } /* ---------- surfaces set the text colour for their children ---------- */ .hl-on-paper { --hl-fg: var(--ink-fixed); --hl-fg-soft: var(--ink-fixed-soft); color: var(--ink-fixed); } .hl-on-plate { --hl-fg: var(--ink-fixed); --hl-fg-soft: var(--ink-fixed); color: var(--ink-fixed); } /* ---------- layout + type helpers ---------- */ .hl-stage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-6); color: var(--hl-fg); } .hl-stage--top { align-items: flex-start; } .hl-stage--col { flex-direction: column; align-items: stretch; } .hl-col { display: flex; flex-direction: column; gap: var(--space-3); } .hl-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .hl-spacer { flex: 1; } .hl-label { font: 700 12px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--hl-fg-soft); } .hl-poster { margin: 0; font: 400 120px/104px var(--font-display); letter-spacing: .005em; text-transform: uppercase; color: var(--hl-fg); } .hl-headline { margin: 0; font: 400 64px/60px var(--font-display); letter-spacing: .01em; text-transform: uppercase; color: var(--hl-fg); } .hl-title { margin: 0; font: 400 36px/38px var(--font-display); letter-spacing: .015em; text-transform: uppercase; color: var(--hl-fg); } .hl-heading { margin: 0; font: 400 22px/26px var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: var(--hl-fg); } .hl-lead { margin: 0; font-size: 19px; line-height: 28px; font-weight: 300; color: var(--hl-fg); } .hl-p { margin: 0; font-size: 16px; line-height: 24px; color: var(--hl-fg); } .hl-sm { margin: 0; font-size: 14px; line-height: 20px; color: var(--hl-fg-soft); } .hl-num { font-variant-numeric: tabular-nums; } .hl-link { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--riot); transition: color var(--dur-hover) ease; } .hl-link:hover { color: var(--riot-text); } @media (max-width: 640px) { .hl-poster { font-size: 64px; line-height: 58px; } .hl-headline { font-size: 44px; line-height: 42px; } .hl-title { font-size: 28px; line-height: 30px; } } /* misregistration: a static second plate, never animated */ .hl-misreg { text-shadow: .045em .035em 0 var(--riot); } .hl-misreg--flare { text-shadow: .045em .035em 0 var(--flare); } [data-theme="poster"] .hl-misreg--flare { text-shadow: .045em .035em 0 var(--riot); } .hl-plate { box-shadow: var(--shadow-plate); } /* halftone: a static dot screen that fades by a mask */ .hl-halftone { position: relative; isolation: isolate; } .hl-halftone::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, var(--_dot, var(--riot)) 1.6px, transparent 2px); background-size: 8px 8px; -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 75%); mask-image: linear-gradient(160deg, #000 0%, transparent 75%); opacity: .55; } .hl-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: miter; display: block; } .hl-icon--fill { fill: currentColor; stroke: none; } .hl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :where(.hl-btn, .hl-iconbtn, .hl-tab, .hl-seg__opt, .hl-card--link, .hl-tag__x, .hl-check input, .hl-toggle input, .hl-field__input, .hl-select__btn, .hl-slider input, .hl-acc__btn, .hl-nav__link, .hl-burger, .hl-date, .hl-lineup__name, .hl-set, .hl-setlist__song, .hl-wave, .hl-chip input, .hl-step__btn, .hl-ticket__tear, a):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } /* ---------- entrances: roll in like a scrolling poster (one direction: from the right) ---------- */ @keyframes hl-roll-in { from { opacity: 0; transform: translateX(48px); } } @keyframes hl-rise-in { from { opacity: 0; transform: translateY(18px); } } @keyframes hl-fade-in { from { opacity: 0; } } .hl-reveal.is-armed:not(.is-in) { opacity: 0; } .hl-reveal.is-in { animation: hl-roll-in var(--dur-roll) var(--ease-roll) backwards; animation-delay: calc(min(var(--_i, 0), 8) * 55ms); } .hl-reveal--rise.is-in { animation-name: hl-rise-in; } .hl-enter { animation: hl-rise-in var(--dur-roll) var(--ease-roll) backwards; animation-delay: calc(min(var(--_i, 0), 8) * 60ms); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } .hl-reveal.is-armed:not(.is-in) { opacity: 1; } } .hl-icon .hl-fill { fill: currentColor; stroke: none; } .hl-mark { display: block; width: 100%; height: 100%; overflow: visible; } /* =========================================================== Button: the stomp box The face sits 6px up on a chassis edge. Hover lifts 2px, press drops the face into the chassis (fast, no bounce), release springs back with overshoot. Primary + flare carry a pedal LED that lights when you stomp. */ .hl-btn { --_face: var(--stage-raised); --_fg: var(--ink); --_rim: var(--ink-soft); --_edge: var(--drop); --_travel: 6px; --_h: 48px; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--_h); padding: 0 22px; margin: 0 0 var(--_travel); border: 2px solid var(--_rim); border-radius: var(--radius-sm); font: 400 19px/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; text-decoration: none; color: var(--_fg); background: var(--_face) linear-gradient(#ffffff1a, #ffffff00 45%); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; box-shadow: 0 var(--_travel) 0 var(--_edge); transition: transform var(--dur-release) var(--ease-release), box-shadow var(--dur-release) var(--ease-release), background-color var(--dur-hover) ease, border-color var(--dur-hover) ease; } .hl-btn::after { content: ""; position: absolute; z-index: -1; inset: -3px -6px calc(-1 * var(--_travel) - 6px) -3px; } .hl-btn:hover { transform: translateY(-2px); box-shadow: 0 calc(var(--_travel) + 2px) 0 var(--_edge); } .hl-btn:active, .hl-btn.is-pressed { transform: translateY(calc(var(--_travel) - 1px)); box-shadow: 0 1px 0 var(--_edge); transition-duration: var(--dur-stomp); transition-timing-function: var(--ease-stomp); } .hl-btn--primary { --_face: var(--riot); --_fg: var(--ink-fixed); --_rim: var(--ink-fixed); --_edge: var(--riot-edge); } .hl-btn--flare { --_face: var(--flare); --_fg: var(--ink-fixed); --_rim: var(--ink-fixed); --_edge: var(--drop); } .hl-btn--secondary:hover { --_rim: var(--ink); } .hl-btn--ghost { --_face: transparent; --_rim: transparent; --_travel: 0px; background-image: none; box-shadow: none; padding: 0 12px; } .hl-btn--ghost .hl-btn__label { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; text-decoration-color: var(--riot); } .hl-btn--ghost:hover { transform: none; box-shadow: none; color: var(--riot-text); } .hl-btn--ghost:active { transform: translateY(1px); box-shadow: none; } .hl-btn--sm { --_h: 36px; --_travel: 4px; padding: 0 14px; font-size: 16px; gap: 8px; } .hl-btn--lg { --_h: 60px; --_travel: 7px; padding: 0 30px; font-size: 24px; gap: 12px; } .hl-btn--block { display: flex; width: 100%; } .hl-btn .hl-icon { width: 18px; height: 18px; stroke-width: 2.6; } .hl-btn--lg .hl-icon { width: 22px; height: 22px; } .hl-btn__label { position: relative; top: .5px; } .hl-btn__led { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; background: #00000059; box-shadow: inset 0 1px 1px #0000008c; transition: background-color 90ms ease, box-shadow 90ms ease; } .hl-btn:active .hl-btn__led, .hl-btn.is-pressed .hl-btn__led, .hl-btn.is-lit .hl-btn__led { background: var(--flare); box-shadow: 0 0 0 2px var(--ink-fixed), 0 0 0 4px #e6ff3b66; } .hl-btn--flare:active .hl-btn__led, .hl-btn--flare.is-lit .hl-btn__led, .hl-btn--flare.is-pressed .hl-btn__led { background: var(--riot); box-shadow: 0 0 0 2px var(--ink-fixed), 0 0 0 4px #ff463266; } .hl-btn:disabled, .hl-btn[aria-disabled="true"] { --_face: var(--stage-sunk); --_fg: var(--ink-soft); --_rim: var(--rule); --_edge: var(--rule); cursor: not-allowed; transform: translateY(calc(var(--_travel) - 2px)); box-shadow: 0 2px 0 var(--_edge); background-image: none; } .hl-btn:disabled .hl-btn__led { background: var(--rule); box-shadow: none; } /* loading: a three-bar level meter (transform only) */ .hl-btn.is-loading { cursor: progress; } .hl-btn.is-loading > :not(.hl-btn__meter) { opacity: 0; } .hl-btn__meter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; } .hl-btn__meter i { width: 5px; height: 18px; background: currentColor; transform-origin: 50% 100%; animation: hl-meter 640ms var(--ease-roll) infinite alternate; } .hl-btn__meter i:nth-child(2) { animation-delay: -220ms; } .hl-btn__meter i:nth-child(3) { animation-delay: -430ms; } @keyframes hl-meter { from { transform: scaleY(.25); } to { transform: scaleY(1); } } /* ================================================================ IconButton */ .hl-iconbtn { --_face: var(--stage-raised); --_fg: var(--ink); --_rim: var(--ink-soft); --_edge: var(--drop); --_travel: 4px; --_s: 44px; position: relative; isolation: isolate; display: inline-grid; place-items: center; width: var(--_s); height: var(--_s); margin: 0 0 var(--_travel); padding: 0; border: 2px solid var(--_rim); border-radius: var(--radius-sm); color: var(--_fg); background: var(--_face) linear-gradient(#ffffff17, #ffffff00 50%); box-shadow: 0 var(--_travel) 0 var(--_edge); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-release) var(--ease-release), box-shadow var(--dur-release) var(--ease-release), background-color var(--dur-hover) ease, border-color var(--dur-hover) ease; } .hl-iconbtn::after { content: ""; position: absolute; z-index: -1; inset: -3px -6px -10px -3px; } .hl-iconbtn:hover { transform: translateY(-2px); box-shadow: 0 calc(var(--_travel) + 2px) 0 var(--_edge); --_rim: var(--ink); } .hl-iconbtn:active, .hl-iconbtn.is-pressed { transform: translateY(calc(var(--_travel) - 1px)); box-shadow: 0 1px 0 var(--_edge); transition-duration: var(--dur-stomp); transition-timing-function: var(--ease-stomp); } .hl-iconbtn[aria-pressed="true"] { --_face: var(--flare); --_fg: var(--ink-fixed); --_rim: var(--ink-fixed); } .hl-iconbtn--primary { --_face: var(--riot); --_fg: var(--ink-fixed); --_rim: var(--ink-fixed); --_edge: var(--riot-edge); } .hl-iconbtn--ghost { --_face: transparent; --_rim: transparent; --_travel: 0px; background-image: none; box-shadow: none; } .hl-iconbtn--ghost:hover { transform: none; box-shadow: none; --_rim: var(--rule); } .hl-iconbtn--ghost:active { transform: translateY(1px); box-shadow: none; } .hl-iconbtn--sm { --_s: 34px; --_travel: 3px; } .hl-iconbtn--sm .hl-icon { width: 16px; height: 16px; } .hl-iconbtn--round { border-radius: var(--radius-pill); } .hl-iconbtn--lg { --_s: 60px; --_travel: 6px; } .hl-iconbtn--lg .hl-icon { width: 26px; height: 26px; } .hl-iconbtn:disabled { opacity: .45; cursor: not-allowed; transform: none; } .hl-iconbtn__count { position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: var(--radius-pill); border: 2px solid var(--ink-fixed); background: var(--flare); color: var(--ink-fixed); font: 400 13px/18px var(--font-display); letter-spacing: .02em; text-align: center; font-variant-numeric: tabular-nums; } .hl-iconbtn__count.is-bump { animation: hl-bump var(--dur-snap) var(--ease-snap); } @keyframes hl-bump { from { transform: scale(1.5); } } /* ============================================================ Toggle: a channel switch */ .hl-toggle { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; color: var(--hl-fg); font-size: 15px; line-height: 20px; position: relative; } .hl-toggle input { position: absolute; opacity: 0; width: 64px; height: 34px; margin: 0; cursor: pointer; } .hl-toggle__track { position: relative; width: 64px; height: 34px; flex: none; border-radius: var(--radius-sm); background: var(--stage-sunk); border: 2px solid var(--ink-soft); box-shadow: var(--shadow-inset, inset 0 2px 0 #00000066); display: flex; align-items: center; justify-content: space-between; padding: 0 7px; font: 700 9px/1 var(--font-body); letter-spacing: .1em; color: var(--ink-soft); } .hl-toggle__knob { position: absolute; top: 2px; left: 2px; width: 28px; height: 26px; border-radius: 4px; background: var(--stage-raised) linear-gradient(90deg, #ffffff00 0 6px, #ffffff24 6px 7px, #ffffff00 7px 11px, #ffffff24 11px 12px, #ffffff00 12px 16px, #ffffff24 16px 17px, #ffffff00 17px); border: 2px solid var(--ink-soft); box-shadow: 0 3px 0 var(--drop); display: grid; place-items: center; transition: transform var(--dur-release) var(--ease-release), background-color var(--dur-hover) ease, border-color var(--dur-hover) ease; } [data-theme="poster"] .hl-toggle__knob { background-color: var(--paper); background-image: linear-gradient(90deg, #00000000 0 6px, #00000021 6px 7px, #00000000 7px 11px, #00000021 11px 12px, #00000000 12px 16px, #00000021 16px 17px, #00000000 17px); } .hl-toggle__led { position: absolute; top: -9px; right: -5px; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--rule); border: 2px solid var(--stage); transition: background-color 120ms ease; } .hl-toggle input:checked ~ .hl-toggle__track { border-color: var(--ink); } .hl-toggle input:checked ~ .hl-toggle__track .hl-toggle__knob { transform: translateX(30px); background-color: var(--flare); border-color: var(--ink-fixed); } .hl-toggle input:checked ~ .hl-toggle__track .hl-toggle__led { background: var(--go); } .hl-toggle input:active ~ .hl-toggle__track .hl-toggle__knob { transition-duration: var(--dur-stomp); } .hl-toggle input:focus-visible ~ .hl-toggle__track { outline: 3px solid var(--focus); outline-offset: 3px; } .hl-toggle input:disabled ~ * { opacity: .45; cursor: not-allowed; } .hl-toggle__text b { display: block; font-weight: 600; } .hl-toggle__text span { display: block; font-size: 13px; color: var(--hl-fg-soft); } /* ===================================================== Checkbox + Radio */ .hl-check { display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; color: var(--hl-fg); font-size: 15px; line-height: 22px; position: relative; } .hl-check input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; cursor: pointer; } .hl-check__box { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border: 2px solid var(--ink-soft); border-radius: var(--radius-xs); background: var(--stage-sunk); transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease; } .hl-check:hover .hl-check__box { border-color: var(--ink); } .hl-check__mark { width: 22px; height: 22px; fill: none; stroke: var(--ink-fixed); stroke-width: 3.6; stroke-linecap: square; transform: scale(.2) rotate(-8deg); opacity: 0; transition: transform var(--dur-strike) var(--ease-snap), opacity 120ms ease; } .hl-check input:checked ~ .hl-check__box { background: var(--riot); border-color: var(--ink-fixed); } .hl-check input:checked ~ .hl-check__box .hl-check__mark { transform: scale(1) rotate(-8deg); opacity: 1; } .hl-check input:focus-visible ~ .hl-check__box { outline: 3px solid var(--focus); outline-offset: 3px; } .hl-check input:disabled ~ * { opacity: .45; cursor: not-allowed; } .hl-check--radio .hl-check__box { border-radius: var(--radius-pill); } .hl-check__dot { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--ink-fixed); transform: scale(0); transition: transform var(--dur-strike) var(--ease-snap); } .hl-check--radio input:checked ~ .hl-check__box .hl-check__dot { transform: scale(1); } .hl-check__hint { display: block; font-size: 13px; line-height: 18px; color: var(--hl-fg-soft); } .hl-check.is-invalid .hl-check__box { border-color: var(--riot-text); } .hl-choices { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .hl-choices legend { padding: 0; margin-bottom: var(--space-3); font: 700 12px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--hl-fg-soft); } /* ================================================================ TextField */ .hl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .hl-field__label { font: 700 12px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--hl-fg-soft); } .hl-field__wrap { position: relative; display: flex; align-items: center; } .hl-field__input { width: 100%; min-width: 0; height: 48px; padding: 0 14px; border: 2px solid var(--ink-soft); border-radius: var(--radius-sm); background: var(--stage-sunk); color: var(--ink); font: 400 16px/22px var(--font-body); transition: border-color var(--dur-hover) ease; } textarea.hl-field__input { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; } .hl-field__input::placeholder { color: var(--ink-soft); opacity: .85; } .hl-field__input:hover { border-color: var(--ink); } .hl-field__input:focus { outline: none; border-color: var(--ink); } .hl-field__input:focus-visible { outline: none; } .hl-field__bar { position: absolute; left: 2px; right: 2px; bottom: 2px; height: 4px; background: var(--riot); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-release) var(--ease-roll); pointer-events: none; border-radius: 0 0 4px 4px; } .hl-field__input:focus ~ .hl-field__bar { transform: scaleX(1); } .hl-field--icon .hl-field__input { padding-left: 42px; } .hl-field__icon { position: absolute; left: 13px; color: var(--ink-soft); pointer-events: none; } .hl-field__help { font-size: 13px; line-height: 18px; color: var(--hl-fg-soft); min-height: 18px; display: flex; gap: 6px; align-items: flex-start; } .hl-field.is-invalid .hl-field__input { border-color: var(--riot-text); } .hl-field.is-invalid .hl-field__bar { transform: scaleX(1); } .hl-field.is-invalid .hl-field__help { color: var(--riot-text); font-weight: 600; } .hl-field.is-invalid .hl-field__help .hl-icon { width: 16px; height: 16px; margin-top: 1px; } .hl-field input:disabled { opacity: .5; cursor: not-allowed; } /* ==================================================================== Select */ .hl-select { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .hl-select__btn { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; height: 48px; padding: 0 12px 0 14px; border: 2px solid var(--ink-soft); border-radius: var(--radius-sm); background: var(--stage-sunk); color: var(--ink); font: 400 16px/22px var(--font-body); text-align: left; cursor: pointer; transition: border-color var(--dur-hover) ease; } .hl-select__btn:hover, .hl-select__btn[aria-expanded="true"] { border-color: var(--ink); } .hl-select__btn .hl-icon { transition: transform var(--dur-release) var(--ease-release); } .hl-select__btn[aria-expanded="true"] .hl-icon { transform: rotate(180deg); } .hl-select__value.is-placeholder { color: var(--ink-soft); } .hl-menu { position: fixed; z-index: 60; min-width: 180px; max-height: 300px; overflow: auto; margin: 0; padding: 6px; list-style: none; background: var(--stage-raised); border: 2px solid var(--ink); border-radius: var(--radius-sm); box-shadow: var(--shadow-float); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 140ms ease, transform var(--dur-release) var(--ease-roll); } .hl-menu[data-side="top"] { transform: translateY(8px); } .hl-menu.is-open { opacity: 1; transform: none; pointer-events: auto; } .hl-menu__opt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 12px; border-radius: 4px; color: var(--ink); font-size: 15px; line-height: 20px; cursor: pointer; } .hl-menu__opt small { color: var(--ink-soft); font-size: 13px; } .hl-menu__opt.is-active { background: var(--stage-sunk); box-shadow: inset 3px 0 0 var(--riot); } .hl-menu__opt[aria-selected="true"] { font-weight: 700; } .hl-menu__opt .hl-icon { width: 16px; height: 16px; opacity: 0; } .hl-menu__opt[aria-selected="true"] .hl-icon { opacity: 1; color: var(--riot-text); } .hl-menu__opt[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } /* ==================================================== Slider: a guitar-pick thumb */ .hl-slider { display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--hl-fg); } .hl-slider__head { display: flex; justify-content: space-between; align-items: baseline; } .hl-slider__out { font: 400 22px/24px var(--font-display); letter-spacing: .03em; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; } .hl-slider__body { position: relative; height: 40px; } .hl-slider__track { position: absolute; left: 0; right: 0; top: 17px; height: 8px; border-radius: 2px; background: var(--stage-sunk); border: 2px solid var(--ink-soft); overflow: hidden; } .hl-slider__fill { position: absolute; inset: 0; background: var(--riot); transform-origin: 0 50%; transform: scaleX(var(--_p, 0)); } .hl-slider__ticks { position: absolute; left: 0; right: 0; top: 30px; height: 6px; background-image: linear-gradient(90deg, var(--ink-soft) 2px, transparent 2px); background-size: calc((100% - 2px) / 10) 6px; opacity: .6; } .hl-slider__pick { position: absolute; top: 0; left: -14px; width: 28px; height: 32px; transform: translateX(var(--_x, 0px)); pointer-events: none; transition: transform 60ms linear; } .hl-slider__pick svg { width: 28px; height: 32px; display: block; overflow: visible; } .hl-slider__pick path { fill: var(--flare); stroke: var(--ink-fixed); stroke-width: 2.4; stroke-linejoin: round; } .hl-slider__pick .hl-slider__shine { fill: none; stroke: #ffffff; stroke-opacity: .55; stroke-width: 2; stroke-linecap: round; } .hl-slider input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: grab; } .hl-slider input:active { cursor: grabbing; } .hl-slider input:active + .hl-slider__pick, .hl-slider.is-drag .hl-slider__pick { transition: none; } .hl-slider input:focus-visible ~ .hl-slider__track { outline: 3px solid var(--focus); outline-offset: 4px; } .hl-slider__scale { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--hl-fg-soft); } /* ==================================================================== Stepper */ .hl-stepper { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--stage-sunk); border: 2px solid var(--ink-soft); } .hl-step__btn { position: relative; width: 34px; height: 34px; border-radius: var(--radius-pill); border: 2px solid var(--ink-fixed); background: var(--riot); color: var(--ink-fixed); display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 3px 0 var(--riot-edge); margin-bottom: 3px; transition: transform var(--dur-release) var(--ease-release), box-shadow var(--dur-release) var(--ease-release); } .hl-step__btn--minus { background: var(--stage-raised); color: var(--ink); border-color: var(--ink-soft); box-shadow: 0 3px 0 var(--drop); } .hl-step__btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--drop); transition-duration: var(--dur-stomp); transition-timing-function: var(--ease-stomp); } .hl-step__btn:disabled { opacity: .35; cursor: not-allowed; transform: translateY(2px); box-shadow: 0 1px 0 var(--drop); } .hl-step__btn .hl-icon { width: 16px; height: 16px; stroke-width: 3; } .hl-stepper__val { width: 3ch; text-align: center; font: 400 22px/24px var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); } .hl-stepper__val.is-bump { animation: hl-bump var(--dur-snap) var(--ease-snap); } /* ===================================================================== Tabs */ .hl-tabs { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } .hl-tabs__list { position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 2px solid var(--rule); padding: 0 2px; } .hl-tabs__list::-webkit-scrollbar { display: none; } .hl-tab { position: relative; z-index: 1; flex: none; padding: 12px 16px 10px; border: 0; background: none; color: var(--ink-soft); font: 400 20px/24px var(--font-display); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: color var(--dur-hover) ease; } .hl-tab:hover { color: var(--ink); } .hl-tab[aria-selected="true"] { color: var(--ink-fixed); } .hl-tab__count { margin-left: 6px; font: 600 12px/1 var(--font-body); opacity: .8; } /* the selected tab gets a strip of fluoro spike tape with torn ends */ .hl-tabs__tape { position: absolute; z-index: 0; left: 0; top: 6px; height: calc(100% - 10px); width: 100px; background: var(--flare); transform-origin: 0 50%; transform: translateX(var(--_x, 0px)) scaleX(var(--_s, 0)); transition: transform var(--dur-release) var(--ease-release); clip-path: polygon(0 4%, 3% 0, 97% 6%, 100% 0, 99% 30%, 100% 62%, 98% 100%, 60% 96%, 4% 100%, 1% 70%, 2% 36%); pointer-events: none; } .hl-tabs__panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; } .hl-tabs__panel[hidden] { display: none; } .hl-tabs__panel.is-shown { animation: hl-fade-in 220ms ease backwards; } /* ========================================================= SegmentedControl */ .hl-seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: var(--radius-sm); background: var(--stage-sunk); border: 2px solid var(--ink-soft); max-width: 100%; } .hl-seg--block { display: grid; width: 100%; } .hl-seg__thumb { position: absolute; top: 4px; bottom: 7px; left: 4px; width: calc((100% - 8px) / var(--_n, 2)); border-radius: 4px; background: var(--riot); border: 2px solid var(--ink-fixed); box-shadow: 0 3px 0 var(--riot-edge); transform: translateX(calc(var(--_i, 0) * 100%)); transition: transform var(--dur-release) var(--ease-release); pointer-events: none; } .hl-seg__opt { position: relative; z-index: 1; min-width: 0; padding: 9px 14px 12px; border: 0; background: none; color: var(--ink-soft); font: 400 17px/20px var(--font-display); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--dur-hover) ease; } .hl-seg__opt:hover { color: var(--ink); } .hl-seg__opt[aria-checked="true"] { color: var(--ink-fixed); } .hl-seg--sm .hl-seg__opt { padding: 6px 10px 9px; font-size: 15px; } /* ====================================================================== Card: a pasted poster */ .hl-card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-6); border-radius: var(--radius-xs); background: var(--stage-raised); color: var(--ink); box-shadow: var(--shadow-paste); border: 1px solid var(--rule); } .hl-card--paper { --hl-fg: var(--ink-fixed); --hl-fg-soft: var(--ink-fixed-soft); background: var(--paper); color: var(--ink-fixed); border-color: transparent; } .hl-card--riot { --hl-fg: var(--ink-fixed); --hl-fg-soft: var(--ink-fixed); background: var(--riot); color: var(--ink-fixed); border-color: var(--ink-fixed); } .hl-card--flare { --hl-fg: var(--ink-fixed); --hl-fg-soft: var(--ink-fixed-soft); background: var(--flare); color: var(--ink-fixed); border-color: var(--ink-fixed); } .hl-card--plate { box-shadow: var(--shadow-plate), var(--shadow-paste); } .hl-card--tight { padding: var(--space-4); } .hl-card__media { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-2); border-bottom: 2px solid var(--ink-fixed); overflow: hidden; aspect-ratio: 16 / 9; background: var(--stage-sunk); } .hl-card--tight .hl-card__media { margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-2); } .hl-card__media svg { width: 100%; height: 100%; display: block; } .hl-card__kicker { font: 700 12px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--hl-fg-soft); } .hl-card__title { margin: 0; font: 400 28px/30px var(--font-display); letter-spacing: .02em; text-transform: uppercase; color: var(--hl-fg); } .hl-card__body { margin: 0; font-size: 15px; line-height: 22px; color: var(--hl-fg-soft); } .hl-card__foot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: auto; padding-top: var(--space-2); } .hl-card--link { cursor: pointer; text-decoration: none; transition: transform var(--dur-hover) var(--ease-roll), box-shadow var(--dur-hover) ease; } .hl-card--link::after { content: ""; position: absolute; z-index: -1; inset: 0 -6px -10px 0; } .hl-card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .hl-card--plate.hl-card--link:hover { box-shadow: var(--shadow-plate), var(--shadow-lift); } .hl-card--link:active { transform: translateY(-1px); transition-duration: var(--dur-stomp); } /* two strips of spike tape holding the corners down */ .hl-tape { position: absolute; z-index: 2; width: 64px; height: 20px; background: var(--flare); opacity: .92; clip-path: polygon(0 8%, 6% 0, 94% 10%, 100% 0, 97% 50%, 100% 100%, 8% 92%, 0 100%, 3% 50%); pointer-events: none; } .hl-tape--tl { top: -8px; left: -12px; transform: rotate(-32deg); } .hl-tape--tr { top: -8px; right: -12px; transform: rotate(30deg); } .hl-tape--riot { background: var(--riot); } .hl-tape--paper { background: var(--paper); opacity: .8; } /* ==================================================================== Badge / flag / stamp */ .hl-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--radius-xs); font: 700 11.5px/1 var(--font-body); letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; background: var(--stage-sunk); color: var(--ink); border: 2px solid var(--ink-soft); } .hl-badge .hl-icon { width: 13px; height: 13px; stroke-width: 2.8; } .hl-badge--onsale { background: var(--go); color: var(--ink-fixed); border-color: var(--ink-fixed); } .hl-badge--few { background: var(--flare); color: var(--ink-fixed); border-color: var(--ink-fixed); } .hl-badge--hot { background: var(--riot); color: var(--ink-fixed); border-color: var(--ink-fixed); } .hl-badge--info { background: var(--wash); color: var(--ink-fixed); border-color: var(--ink-fixed); } .hl-badge--paper { background: var(--paper); color: var(--ink-fixed); border-color: var(--ink-fixed); } .hl-badge__dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: currentColor; } /* a rubber stamp: double ruled, tilted, never filled */ .hl-stamp { display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px 2px; border: 3px double var(--riot-text); color: var(--riot-text); font: 400 18px/22px var(--font-display); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-6deg); white-space: nowrap; border-radius: var(--radius-xs); } .hl-stamp--go { border-color: var(--go); color: var(--go); } [data-theme="poster"] .hl-stamp--go { border-color: #12773f; color: #12773f; } .hl-stamp--big { font-size: 34px; line-height: 38px; padding: 6px 18px 4px; border-width: 5px; } .hl-stamp.is-landing { animation: hl-stamp var(--dur-snap) var(--ease-snap) backwards; } @keyframes hl-stamp { from { opacity: 0; transform: rotate(-6deg) scale(1.8); } } .hl-tag { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border-radius: var(--radius-xs); background: var(--stage-raised); border: 2px solid var(--ink-soft); color: var(--ink); font: 400 15px/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; } .hl-tag__swatch { width: 10px; height: 18px; border-radius: 2px; border: 1.5px solid var(--ink-fixed); background: repeating-linear-gradient(90deg, var(--_c, var(--riot)) 0 2px, #00000033 2px 3px); } .hl-tag__x { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 2px; background: none; color: var(--ink-soft); cursor: pointer; } .hl-tag__x:hover { color: var(--ink); background: var(--stage-sunk); } .hl-tag__x .hl-icon { width: 14px; height: 14px; stroke-width: 2.8; } .hl-tag.is-leaving { animation: hl-tag-out 200ms var(--ease-exit) forwards; } @keyframes hl-tag-out { to { opacity: 0; transform: translateX(10px); } } /* ===================================================================== Avatar */ .hl-avatar { --_s: 44px; position: relative; flex: none; width: var(--_s); height: var(--_s); border-radius: var(--radius-pill); display: grid; place-items: center; overflow: hidden; background: var(--_bg, var(--wash)); border: 2px solid var(--ink-fixed); color: var(--ink-fixed); font: 400 calc(var(--_s) * .4)/1 var(--font-display); letter-spacing: .02em; } .hl-avatar::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, #16121355 1.3px, transparent 1.7px); background-size: 6px 6px; -webkit-mask-image: linear-gradient(200deg, transparent 30%, #000 100%); mask-image: linear-gradient(200deg, transparent 30%, #000 100%); } .hl-avatar span { position: relative; } .hl-avatar--sm { --_s: 32px; border-width: 1.5px; } .hl-avatar--lg { --_s: 64px; } .hl-avatar--xl { --_s: 96px; border-width: 3px; } .hl-avatar--headliner { box-shadow: 0 0 0 3px var(--stage), 0 0 0 6px var(--riot); } .hl-avatar--live::after { content: ""; position: absolute; right: 6%; bottom: 6%; width: 22%; height: 22%; border-radius: var(--radius-pill); background: var(--go); border: 2px solid var(--ink-fixed); } .hl-avatars { display: inline-flex; } .hl-avatars > * + * { margin-left: -10px; } .hl-avatars .hl-avatar { box-shadow: 0 0 0 2px var(--stage); } .hl-avatars__more { background: var(--stage-raised); color: var(--ink); border-color: var(--ink-soft); font-family: var(--font-display); } /* ============================================================= Tooltip: a strip of tape */ .hl-tip { display: inline-flex; } .hl-float { position: fixed; z-index: 80; left: 0; top: 0; max-width: min(260px, calc(100vw - 16px)); padding: 9px 14px 10px; background: var(--paper); color: var(--ink-fixed); font: 500 14px/19px var(--font-body); box-shadow: var(--shadow-float); pointer-events: none; opacity: 0; transform: translateY(var(--_from, 6px)); transition: opacity 120ms ease, transform var(--dur-release) var(--ease-roll); clip-path: polygon(0 3px, 3px 0, 30% 2px, 60% 0, calc(100% - 3px) 2px, 100% 0, calc(100% - 2px) 30%, 100% 55%, calc(100% - 3px) 80%, 100% 100%, 70% calc(100% - 2px), 35% 100%, 2px calc(100% - 1px), 0 100%, 3px 70%, 0 45%, 2px 20%); } .hl-float b { display: block; font: 400 15px/18px var(--font-display); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px; } .hl-float[data-side="bottom"] { --_from: -6px; } .hl-float[data-side="left"] { --_from: 0; transform: translateX(6px); } .hl-float[data-side="right"] { --_from: 0; transform: translateX(-6px); } .hl-float.is-open { opacity: 1; transform: none; } .hl-float--flare { background: var(--flare); } /* the pointer: a little cut notch of the same tape, outside the clip so it is a sibling */ .hl-float__arrow { position: fixed; z-index: 81; width: 12px; height: 8px; left: 0; top: 0; background: var(--paper); clip-path: polygon(0 0, 100% 0, 50% 100%); opacity: 0; pointer-events: none; transition: opacity 120ms ease; } .hl-float__arrow[data-side="bottom"] { clip-path: polygon(50% 0, 100% 100%, 0 100%); } .hl-float__arrow[data-side="left"] { width: 8px; height: 12px; clip-path: polygon(0 0, 100% 50%, 0 100%); } .hl-float__arrow[data-side="right"] { width: 8px; height: 12px; clip-path: polygon(100% 0, 0 50%, 100% 100%); } .hl-float__arrow.is-open { opacity: 1; } .hl-float__arrow--flare { background: var(--flare); } /* ====================================================================== Toast: a ticket stub */ .hl-toasts { position: fixed; z-index: 90; right: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; } .hl-toasts--inline { position: static; width: 100%; max-width: 380px; } .hl-toast { pointer-events: auto; position: relative; display: flex; width: 100%; min-height: 64px; background: var(--paper); color: var(--ink-fixed); border-radius: var(--radius-sm); box-shadow: var(--shadow-float); animation: hl-toast-in var(--dur-snap) var(--ease-roll) backwards; -webkit-mask: radial-gradient(circle 7px at 52px 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 7px at 52px 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 7px at 52px 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 7px at 52px 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; } @keyframes hl-toast-in { from { opacity: 0; transform: translateX(60px); } } .hl-toast.is-leaving { animation: hl-toast-out 220ms var(--ease-exit) forwards; } @keyframes hl-toast-out { to { opacity: 0; transform: translateX(60px); } } .hl-toast__stub { flex: none; width: 52px; display: grid; place-items: center; background: var(--_t, var(--flare)); border-right: 2px dashed var(--ink-fixed); border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .hl-toast__stub .hl-icon { width: 22px; height: 22px; stroke-width: 2.6; color: var(--ink-fixed); } .hl-toast__body { flex: 1; min-width: 0; padding: 11px 6px 11px 14px; } .hl-toast__title { display: block; font: 400 18px/22px var(--font-display); letter-spacing: .04em; text-transform: uppercase; } .hl-toast__msg { display: block; font-size: 14px; line-height: 19px; color: var(--ink-fixed-soft); } .hl-toast__x { align-self: flex-start; margin: 10px 10px 0 0; width: 30px; height: 30px; flex: none; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink-fixed-soft); cursor: pointer; border-radius: 4px; } .hl-toast__x:hover { color: var(--ink-fixed); background: #16121314; } .hl-toast__x:focus-visible { outline: 3px solid var(--ink-fixed); outline-offset: 0; } .hl-toast__x .hl-icon { width: 16px; height: 16px; stroke-width: 2.6; } .hl-toast__more { pointer-events: auto; font: 700 11px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--stage-raised); border: 2px solid var(--ink-soft); border-radius: var(--radius-xs); padding: 3px 8px; } @media (max-width: 520px) { .hl-toasts { left: 16px; right: 16px; width: auto; align-items: stretch; } } /* ===================================================================== Modal + sheet */ .hl-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--space-4); } .hl-modal[hidden] { display: none; } .hl-modal__scrim { position: absolute; inset: 0; background: var(--scrim); animation: hl-fade-in 200ms ease backwards; } .hl-modal__panel { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: var(--space-8); background: var(--stage-raised); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius-xs); box-shadow: var(--shadow-plate), var(--shadow-float); animation: hl-drop-in var(--dur-snap) var(--ease-snap) backwards; } .hl-modal__panel:focus { outline: none; } @keyframes hl-drop-in { from { opacity: 0; transform: translateY(-28px); } } .hl-modal__kicker { display: block; margin-bottom: var(--space-2); } .hl-modal__title { margin: 0 40px var(--space-3) 0; font: 400 40px/42px var(--font-display); letter-spacing: .015em; text-transform: uppercase; } .hl-modal__body { color: var(--ink-soft); } .hl-modal__body > * + * { margin-top: var(--space-3); } .hl-modal__actions { display: flex; gap: var(--space-3); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--space-6); } .hl-modal__x { position: absolute; top: 16px; right: 16px; } .hl-modal.is-leaving .hl-modal__scrim { animation: hl-fade-out 180ms ease forwards; } .hl-modal.is-leaving .hl-modal__panel { animation: hl-drop-out 180ms var(--ease-exit) forwards; } @keyframes hl-fade-out { to { opacity: 0; } } @keyframes hl-drop-out { to { opacity: 0; transform: translateY(18px); } } .hl-modal--sheet { align-items: end; padding: 0; } .hl-modal--sheet .hl-modal__panel { width: min(640px, 100%); border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-bottom: 0; animation: hl-sheet-in var(--dur-snap) var(--ease-roll) backwards; box-shadow: var(--shadow-float); } .hl-modal--sheet .hl-modal__panel::before { content: ""; display: block; width: 48px; height: 5px; margin: calc(-1 * var(--space-4)) auto var(--space-4); border-radius: var(--radius-pill); background: var(--rule); } .hl-modal--sheet.is-leaving .hl-modal__panel { animation: hl-sheet-out 200ms var(--ease-exit) forwards; } @keyframes hl-sheet-in { from { transform: translateY(100%); } } @keyframes hl-sheet-out { to { transform: translateY(100%); } } @media (max-width: 560px) { .hl-modal { align-items: end; padding: 0; } .hl-modal__panel { width: 100%; padding: var(--space-6) var(--space-4) var(--space-8); border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-bottom: 0; animation: hl-sheet-in var(--dur-snap) var(--ease-roll) backwards; box-shadow: var(--shadow-float); } .hl-modal.is-leaving .hl-modal__panel { animation: hl-sheet-out 200ms var(--ease-exit) forwards; } .hl-modal__title { font-size: 32px; line-height: 34px; } .hl-modal__actions > * { flex: 1; } } /* ===================================================================== Progress + steps */ .hl-progress { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--hl-fg); } .hl-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); } .hl-progress__label { font: 700 12px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--hl-fg-soft); } .hl-progress__value { font: 400 20px/22px var(--font-display); letter-spacing: .03em; font-variant-numeric: tabular-nums; } .hl-progress__track { position: relative; height: 14px; border-radius: 2px; background: var(--stage-sunk); border: 2px solid var(--ink-soft); overflow: hidden; } .hl-progress--sm .hl-progress__track { height: 8px; } .hl-progress__fill { position: absolute; inset: 0; background: var(--_pf, var(--riot)); transform-origin: 0 50%; transform: scaleX(calc(var(--_v, 0) / 100)); transition: transform 700ms var(--ease-roll); } .hl-progress--ticks .hl-progress__track::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, transparent calc(100% - 2px), var(--stage-sunk) calc(100% - 2px)); background-size: 10% 100%; pointer-events: none; } .hl-progress--indeterminate .hl-progress__fill { width: 34%; transform: translateX(-100%); animation: hl-indet 1300ms var(--ease-sweep) infinite; } @keyframes hl-indet { to { transform: translateX(300%); } } .hl-steps { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; counter-reset: s; } .hl-steps__item { position: relative; flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; } .hl-steps__item:last-child { flex: none; } .hl-steps__num { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-pill); border: 2px solid var(--ink-soft); background: var(--stage-sunk); color: var(--ink-soft); font: 400 17px/1 var(--font-display); transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease; } .hl-steps__num .hl-icon { width: 16px; height: 16px; stroke-width: 3.2; } .hl-steps__name { font: 400 16px/20px var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; } .hl-steps__line { flex: 1; height: 4px; margin: 0 12px; background: var(--stage-sunk); border-radius: 2px; position: relative; overflow: hidden; min-width: 12px; } .hl-steps__line::after { content: ""; position: absolute; inset: 0; background: var(--riot); transform: scaleX(0); transform-origin: 0 50%; transition: transform 500ms var(--ease-roll); } .hl-steps__item.is-done .hl-steps__line::after { transform: scaleX(1); } .hl-steps__item.is-done .hl-steps__num { background: var(--riot); border-color: var(--ink-fixed); color: var(--ink-fixed); } .hl-steps__item.is-current .hl-steps__num { background: var(--flare); border-color: var(--ink-fixed); color: var(--ink-fixed); } .hl-steps__item.is-current .hl-steps__name, .hl-steps__item.is-done .hl-steps__name { color: var(--ink); } @media (max-width: 560px) { .hl-steps__item:not(.is-current) .hl-steps__name { display: none; } .hl-steps__line { margin: 0 8px; } } /* ==================================================================== Accordion / FAQ */ .hl-acc { display: flex; flex-direction: column; border-top: 2px solid var(--rule); } .hl-acc__item { border-bottom: 2px solid var(--rule); } .hl-acc__h { margin: 0; } .hl-acc__btn { width: 100%; display: flex; align-items: center; gap: var(--space-4); padding: 18px 4px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: 400 22px/26px var(--font-display); letter-spacing: .03em; text-transform: uppercase; } .hl-acc__btn:hover { color: var(--riot-text); } .hl-acc__num { font: 700 12px/16px var(--font-body); letter-spacing: .14em; color: var(--ink-soft); width: 26px; flex: none; } .hl-acc__q { flex: 1; min-width: 0; } .hl-acc__plus { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-pill); border: 2px solid var(--ink-soft); color: var(--ink); transition: transform var(--dur-release) var(--ease-release), background-color var(--dur-hover) ease, border-color var(--dur-hover) ease; } .hl-acc__plus .hl-icon { width: 16px; height: 16px; stroke-width: 3; } .hl-acc__btn[aria-expanded="true"] .hl-acc__plus { transform: rotate(135deg); background: var(--riot); border-color: var(--ink-fixed); color: var(--ink-fixed); } .hl-acc__panel { padding: 0 4px 22px 46px; color: var(--ink-soft); font-size: 15px; line-height: 23px; } .hl-acc__panel[hidden] { display: none; } .hl-acc__panel.is-shown { animation: hl-acc-in 300ms var(--ease-roll) backwards; } @keyframes hl-acc-in { from { opacity: 0; transform: translateY(-8px); } } @media (max-width: 560px) { .hl-acc__panel { padding-left: 4px; } .hl-acc__num { display: none; } .hl-acc__btn { font-size: 19px; line-height: 23px; } } /* ====================================================================== Header / Nav */ .hl-header { container-type: inline-size; position: sticky; top: 0; z-index: 50; background: var(--stage); border-bottom: 2px solid var(--rule); color: var(--ink); } .hl-header__bar { display: flex; align-items: center; gap: var(--space-6); max-width: 1280px; margin: 0 auto; height: 72px; padding: 0 var(--space-8); } .hl-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex: none; } .hl-brand__mark { width: 40px; height: 40px; flex: none; display: block; } .hl-brand__name { font: 400 28px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; } .hl-brand__sub { display: block; font: 700 10px/12px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-top: 3px; } .hl-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; } .hl-nav__link { position: relative; padding: 8px 12px; color: var(--ink); text-decoration: none; font: 400 18px/22px var(--font-display); letter-spacing: .06em; text-transform: uppercase; border-radius: 2px; } .hl-nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 4px; background: var(--riot); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-release) var(--ease-roll); } .hl-nav__link:hover::after, .hl-nav__link[aria-current="page"]::after { transform: scaleX(1); } .hl-nav__link[aria-current="page"]::after { background: var(--flare); } .hl-header__actions { display: flex; align-items: center; gap: var(--space-3); flex: none; } .hl-header__actions .hl-btn, .hl-header__actions .hl-iconbtn { margin-bottom: 4px; } .hl-burger { display: none; position: relative; width: 44px; height: 44px; padding: 0; border: 2px solid var(--ink-soft); border-radius: var(--radius-sm); background: var(--stage-raised); color: var(--ink); cursor: pointer; } .hl-burger i { position: absolute; left: 10px; right: 10px; height: 3px; background: currentColor; transition: transform var(--dur-release) var(--ease-release), opacity 120ms ease; } .hl-burger i:nth-child(1) { top: 12px; } .hl-burger i:nth-child(2) { top: 19px; } .hl-burger i:nth-child(3) { top: 26px; } .hl-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hl-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; } .hl-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .hl-mnav { position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - 72px); overflow: auto; background: var(--stage); border-bottom: 2px solid var(--rule); padding: var(--space-6) var(--space-4) var(--space-12); display: flex; flex-direction: column; gap: 4px; } .hl-mnav[hidden] { display: none; } .hl-mnav.is-open { animation: hl-mnav-in 360ms var(--ease-roll) backwards; } @keyframes hl-mnav-in { from { opacity: 0; transform: translateY(-14px); } } .hl-mnav__link { display: flex; align-items: baseline; gap: var(--space-3); padding: 10px 0; color: var(--ink); text-decoration: none; font: 400 46px/48px var(--font-display); letter-spacing: .01em; text-transform: uppercase; border-bottom: 2px solid var(--rule); } .hl-mnav__link small { font: 700 12px/16px var(--font-body); letter-spacing: .14em; color: var(--ink-soft); } .hl-mnav__link[aria-current="page"] { color: var(--riot-text); } .hl-mnav.is-open .hl-mnav__link { animation: hl-roll-in 480ms var(--ease-roll) backwards; animation-delay: calc(min(var(--_i, 0), 8) * 45ms + 60ms); } .hl-mnav__foot { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); } @container (max-width: 860px) { .hl-header__bar { height: 64px; padding: 0 var(--space-4); gap: var(--space-3); } .hl-mnav { height: calc(100vh - 64px); } .hl-nav, .hl-header__actions .hl-btn { display: none; } .hl-header__actions { margin-left: auto; } .hl-burger { display: block; } .hl-brand__name { font-size: 24px; } .hl-brand__mark { width: 34px; height: 34px; } } /* ====================================================================== Footer */ .hl-footer { container-type: inline-size; position: relative; overflow: hidden; background: var(--stage-sunk); color: var(--ink); border-top: 2px solid var(--rule); } .hl-footer__in { max-width: 1280px; margin: 0 auto; padding: var(--space-16) var(--space-8) var(--space-8); } .hl-footer__top { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: var(--space-8); } .hl-footer__word { margin: 0 0 var(--space-3); font: 400 64px/58px var(--font-display); letter-spacing: .01em; text-transform: uppercase; } .hl-footer__blurb { margin: 0 0 var(--space-4); color: var(--ink-soft); font-size: 15px; line-height: 22px; max-width: 340px; } .hl-footer__social { display: flex; gap: var(--space-2); flex-wrap: wrap; } .hl-footer__col h3 { margin: 6px 0 var(--space-3); font: 700 12px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .hl-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .hl-footer__col a { color: var(--ink); font-size: 15px; line-height: 22px; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color var(--dur-hover) ease; } .hl-footer__col a:hover { text-decoration-color: var(--riot); } .hl-footer__print { margin-top: var(--space-12); padding-top: var(--space-4); border-top: 2px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); font-size: 13px; line-height: 18px; color: var(--ink-soft); } .hl-footer__plates { display: inline-flex; align-items: center; gap: 6px; } .hl-footer__plates i { width: 14px; height: 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--ink-soft); } .hl-footer__legal { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-left: auto; } .hl-footer__legal a { color: var(--ink-soft); } .hl-footer__legal a:hover { color: var(--ink); } @container (max-width: 860px) { .hl-footer__in { padding: var(--space-12) var(--space-4) var(--space-6); } .hl-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-6); } .hl-footer__brand { grid-column: 1 / -1; } .hl-footer__word { font-size: 48px; line-height: 46px; } .hl-footer__legal { margin-left: 0; } } /* ============================================================ TourDates + TourDateRow */ .hl-dates { container-type: inline-size; list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rule); } .hl-date { position: relative; isolation: isolate; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto 168px; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: 2px solid var(--rule); color: var(--ink); } .hl-date::before { content: ""; position: absolute; z-index: -1; inset: -2px 0 -2px 0; background: var(--stage-raised); transform: scaleX(0); transform-origin: 0 50%; transition: transform 300ms var(--ease-roll); } .hl-date::after { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 5px; background: var(--riot); transform: scaleY(0); transition: transform 240ms var(--ease-roll); } .hl-date:hover::before, .hl-date:focus-within::before { transform: scaleX(1); } .hl-date:hover::after, .hl-date:focus-within::after { transform: scaleY(1); } .hl-date__when { display: grid; grid-template-columns: auto; justify-items: center; padding-left: var(--space-3); text-align: center; } .hl-date__mon { font: 700 12px/14px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--riot-text); } .hl-date__day { font: 400 50px/50px var(--font-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; } .hl-date__dow { font: 700 11px/14px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); } .hl-date__where { min-width: 0; } .hl-date__city { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font: 400 36px/38px var(--font-display); letter-spacing: .015em; text-transform: uppercase; } .hl-date__country { font: 700 12px/16px var(--font-body); letter-spacing: .14em; color: var(--ink-soft); } .hl-date__venue { margin: 2px 0 0; font-size: 15px; line-height: 21px; color: var(--ink-soft); overflow-wrap: anywhere; } .hl-date__venue b { color: var(--ink); font-weight: 600; } .hl-date__status { justify-self: end; } .hl-date__act { display: flex; justify-content: flex-end; } .hl-date__act .hl-btn { width: 100%; margin-bottom: 4px; } .hl-date.is-soldout .hl-date__city, .hl-date.is-soldout .hl-date__day { color: var(--ink-soft); } .hl-date.is-soldout .hl-date__city span:first-child { text-decoration: line-through; text-decoration-thickness: 4px; text-decoration-color: var(--riot); } @container (max-width: 640px) { .hl-date { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "when where" "when status" "act act"; gap: 6px var(--space-4); padding: var(--space-4) 0; } .hl-date__when { grid-area: when; align-self: start; padding-left: 4px; } .hl-date__day { font-size: 40px; line-height: 42px; } .hl-date__where { grid-area: where; } .hl-date__city { font-size: 28px; line-height: 30px; } .hl-date__status { grid-area: status; justify-self: start; } .hl-date__act { grid-area: act; padding-left: 0; } .hl-date__act .hl-btn { width: 100%; } } /* ================================================================= EventHero */ .hl-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--stage-sunk); color: var(--ink); border-bottom: 2px solid var(--rule); } [data-theme="poster"] .hl-hero { background: var(--paper); } .hl-hero::before { content: ""; position: absolute; inset: 40% 0 0; z-index: -2; background-image: radial-gradient(circle, var(--riot) 1.7px, transparent 2.1px); background-size: 9px 9px; -webkit-mask-image: linear-gradient(to top, #000a, transparent); mask-image: linear-gradient(to top, #000a, transparent); opacity: .5; } .hl-hero__beams { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hl-hero__beams i { position: absolute; top: -6%; left: var(--_x); width: 30%; height: 125%; margin-left: -15%; transform-origin: 50% 0; transform: rotate(var(--_rest)); background: linear-gradient(180deg, var(--hl-beam) 0%, transparent 82%); clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%); opacity: var(--_o, .1); animation: hl-sweep var(--dur-sweep) var(--ease-sweep) backwards; animation-delay: var(--_d, 0ms); } [data-theme="poster"] .hl-hero__beams i { opacity: calc(var(--_o, .1) * .55); } @keyframes hl-sweep { from { transform: rotate(var(--_from)); opacity: .34; } } .hl-hero__art { position: absolute; z-index: -1; right: -4%; top: 50%; width: min(760px, 62%); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; } .hl-hero__art svg { width: 100%; height: 100%; display: block; overflow: visible; } .hl-hero--breakwater .hl-hero__art { top: 64%; width: min(620px, 50%); right: -2%; } .hl-hero__in { max-width: 1280px; margin: 0 auto; padding: 88px var(--space-8) 120px; } .hl-hero__copy { max-width: 760px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); } .hl-hero__kicker { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font: 700 12px/16px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); } .hl-hero__title { margin: 0; font: 400 clamp(64px, 11.5vw, 160px)/.86 var(--font-display); letter-spacing: .005em; text-transform: uppercase; color: var(--ink); text-shadow: .035em .028em 0 var(--riot); } .hl-hero__title span { display: block; } .hl-hero__title .is-alt { color: var(--flare); } [data-theme="poster"] .hl-hero__title .is-alt { color: var(--ink); -webkit-text-stroke: 0; text-shadow: .035em .028em 0 var(--flare), .07em .056em 0 var(--riot); } .hl-hero__sub { margin: 0; max-width: 560px; font-size: 19px; line-height: 28px; font-weight: 300; color: var(--ink); } .hl-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; } .hl-hero__meta li { display: inline-flex; align-items: center; gap: 8px; font: 400 20px/24px var(--font-display); letter-spacing: .05em; text-transform: uppercase; } .hl-hero__meta .hl-icon { color: var(--riot-text); } .hl-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); } .hl-hero__strip { position: absolute; left: -2%; right: -2%; bottom: 26px; height: 48px; background: var(--riot); color: var(--ink-fixed); border-block: 2px solid var(--ink-fixed); transform: rotate(-1.6deg); display: flex; align-items: center; overflow: hidden; white-space: nowrap; font: 400 24px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; } .hl-hero__strip span { padding-left: 24px; } .hl-hero__strip b { color: var(--ink-fixed); font-weight: 400; opacity: .55; padding-left: 24px; } .hl-hero .hl-enter { animation-name: hl-rise-in; } @media (max-width: 760px) { .hl-hero__in { padding: 48px var(--space-4) 112px; } .hl-hero__art, .hl-hero--breakwater .hl-hero__art { width: 120%; right: -50%; top: 24%; opacity: .3; } .hl-hero__beams i { width: 60%; margin-left: -30%; } .hl-hero__sub { font-size: 17px; line-height: 25px; } .hl-hero__meta li { font-size: 17px; } .hl-hero__strip { font-size: 19px; height: 40px; bottom: 22px; } } /* the poster art (isobars, a halftone sun) */ .hl-art-ink { stroke: var(--ink); fill: none; } .hl-art-soft { stroke: var(--ink-soft); fill: none; } .hl-art-riot { fill: var(--riot); } .hl-art-flare { fill: var(--flare); } .hl-art-wash { fill: var(--wash); } .hl-art-stroke-riot { stroke: var(--riot); fill: none; } .hl-art-stroke-flare { stroke: var(--flare); fill: none; } .hl-art-text { fill: var(--ink); font-family: var(--font-display); letter-spacing: .04em; } .hl-art-fixed { fill: var(--ink-fixed); } .hl-art-paper { fill: var(--paper); } .hl-art-stroke-paper { stroke: var(--paper); fill: none; } .hl-art-stage { fill: var(--stage-sunk); } /* =================================================================== LineUp */ .hl-lineup { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; color: var(--ink); } .hl-lineup__day { font: 700 12px/16px var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: var(--space-3); } .hl-lineup__day::before, .hl-lineup__day::after { content: ""; width: 40px; height: 2px; background: var(--rule); } .hl-lineup__tier { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 0; row-gap: 2px; max-width: 100%; } .hl-lineup__tier li { display: inline-flex; align-items: baseline; } .hl-lineup__tier li + li::before { content: "/"; color: var(--riot-text); padding: 0 .32em; font-family: var(--font-display); } .hl-lineup__tier--sub li + li::before { content: "★"; font-size: .55em; transform: translateY(-.35em); display: inline-block; } .hl-lineup__name { position: relative; isolation: isolate; display: inline-flex; align-items: baseline; gap: .2em; padding: 0 .1em; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-align: inherit; } .hl-lineup__name::before { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.04em; top: 14%; bottom: 8%; background: var(--flare); transform: scaleX(0) skewX(-6deg); transform-origin: 0 50%; transition: transform var(--dur-strike) var(--ease-roll); } .hl-lineup__name:hover { color: var(--riot-text); } .hl-lineup__name[aria-pressed="true"] { color: var(--ink-fixed); } .hl-lineup__name[aria-pressed="true"]::before { transform: scaleX(1) skewX(-6deg); } .hl-lineup__name .hl-icon { width: .42em; height: .42em; stroke-width: 3; opacity: 0; transition: opacity 120ms ease; align-self: center; } .hl-lineup__name[aria-pressed="true"] .hl-icon { opacity: 1; } .hl-lineup__tier--headliner { font: 400 104px/96px var(--font-display); letter-spacing: .005em; text-transform: uppercase; } .hl-lineup__tier--headliner .hl-lineup__name { text-shadow: .04em .03em 0 var(--riot); } .hl-lineup__tier--headliner .hl-lineup__name[aria-pressed="true"] { text-shadow: none; } .hl-lineup__tier--sub { font: 400 48px/54px var(--font-display); letter-spacing: .01em; text-transform: uppercase; } .hl-lineup__tier--support { font: 400 28px/36px var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); } .hl-lineup__tier--local { font: 600 15px/26px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } .hl-lineup__tier--local li + li::before { content: "·"; color: var(--ink-soft); font-family: var(--font-body); } .hl-lineup__more { font: 700 12px/16px var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); } @media (max-width: 640px) { .hl-lineup__tier--headliner { font-size: 56px; line-height: 56px; } .hl-lineup__tier--sub { font-size: 30px; line-height: 36px; } .hl-lineup__tier--support { font-size: 20px; line-height: 28px; } .hl-lineup__tier--local { font-size: 13px; line-height: 22px; } } /* ======================================================== TicketTierSelector */ .hl-tiers { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-4); color: var(--ink); } .hl-tier { --_tone: var(--riot); --_n: 12px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 210px; } .hl-tier--standing { --_tone: var(--wash); } .hl-tier--seated { --_tone: var(--go); } .hl-tier--vip { --_tone: var(--flare); } .hl-tier__main { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: var(--space-6); background: var(--stage-raised); border: 2px solid var(--rule); border-right: 0; border-radius: var(--radius-ticket) 0 0 var(--radius-ticket); -webkit-mask: radial-gradient(circle var(--_n) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--_n) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle var(--_n) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--_n) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; transition: border-color var(--dur-hover) ease; } .hl-tier__stub { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: var(--space-4) var(--space-6); background: var(--_tone); color: var(--ink-fixed); border-radius: 0 var(--radius-ticket) var(--radius-ticket) 0; -webkit-mask: radial-gradient(circle var(--_n) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--_n) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle var(--_n) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--_n) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; } .hl-tier__stub::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; border-left: 3px dotted var(--ink-fixed); opacity: .6; } .hl-tier:hover .hl-tier__main { border-color: var(--ink-soft); } .hl-tier.is-selected .hl-tier__main { border-color: var(--ink); } .hl-tier__top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .hl-tier__kind { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-right: auto; } .hl-tier__kind i { width: 10px; height: 10px; border-radius: 2px; background: var(--_tone); border: 1.5px solid var(--ink-fixed); } .hl-tier__name { margin: 0; font: 400 30px/32px var(--font-display); letter-spacing: .02em; text-transform: uppercase; } .hl-tier__desc { margin: 0; font-size: 15px; line-height: 21px; color: var(--ink-soft); } .hl-tier__perks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; line-height: 20px; } .hl-tier__perks li { display: inline-flex; align-items: center; gap: 6px; } .hl-tier__perks .hl-icon { width: 14px; height: 14px; stroke-width: 3; color: var(--riot-text); } .hl-tier__fast { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); padding-top: var(--space-3); border-top: 2px dashed var(--rule); font-size: 14px; line-height: 20px; color: var(--ink-soft); } .hl-tier__clock { display: inline-flex; align-items: center; gap: 6px; } .hl-tier__clock .hl-icon { width: 16px; height: 16px; color: var(--riot-text); } .hl-tier__clock b { display: inline-block; min-width: 8.5ch; font: 400 19px/20px var(--font-display); letter-spacing: .04em; color: var(--ink); font-variant-numeric: tabular-nums; } .hl-tier__sold { flex: 1; min-width: 130px; } .hl-tier__price { font: 400 40px/40px var(--font-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; } .hl-tier__price small { font-size: 22px; vertical-align: top; line-height: 26px; } .hl-tier__was { font-size: 13px; line-height: 16px; text-decoration: line-through; opacity: .85; } .hl-tier__fee { font-size: 13px; line-height: 18px; font-weight: 600; } .hl-tier__stub .hl-stepper { margin-top: 6px; background: #ffffff59; border-color: var(--ink-fixed); } .hl-tier__stub .hl-stepper__val { color: var(--ink-fixed); } .hl-tier__stub .hl-step__btn--minus { background: var(--paper); color: var(--ink-fixed); border-color: var(--ink-fixed); } .hl-tier--vip .hl-tier__stub .hl-step__btn:not(.hl-step__btn--minus), .hl-tier--standing .hl-tier__stub .hl-step__btn:not(.hl-step__btn--minus), .hl-tier--seated .hl-tier__stub .hl-step__btn:not(.hl-step__btn--minus) { background: var(--ink-fixed); color: var(--paper); box-shadow: 0 3px 0 #00000080; } .hl-tier.is-soldout .hl-tier__main > *:not(.hl-tier__stamp), .hl-tier.is-soldout .hl-tier__stub > * { opacity: .5; } .hl-tier.is-soldout .hl-tier__stub { background: var(--stage-sunk); color: var(--ink-soft); } .hl-tier__stamp { position: absolute; right: 24px; top: 50%; transform: translateY(-50%) rotate(-8deg); } .hl-tier__stamp .hl-stamp { transform: none; } .hl-tiers__sum { display: flex; flex-direction: column; gap: 6px; padding: var(--space-6); background: var(--stage-raised); border: 2px solid var(--rule); border-radius: var(--radius-xs); } .hl-tiers__line { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 15px; line-height: 22px; color: var(--ink-soft); } .hl-tiers__line span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; } .hl-tiers__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-top: 6px; padding-top: var(--space-3); border-top: 2px solid var(--rule); } .hl-tiers__total b { font: 400 40px/42px var(--font-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; } .hl-tiers__empty { font-size: 15px; color: var(--ink-soft); } .hl-tiers__note { font-size: 13px; line-height: 18px; color: var(--ink-soft); min-height: 18px; } .hl-tiers__note.is-warn { color: var(--riot-text); font-weight: 600; } @container (max-width: 560px) { .hl-tier { grid-template-columns: 1fr; } .hl-tier__main { padding: var(--space-4); border-right: 2px solid var(--rule); border-bottom: 0; border-radius: var(--radius-ticket) var(--radius-ticket) 0 0; -webkit-mask: radial-gradient(circle var(--_n) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--_n) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle var(--_n) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--_n) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat; } .hl-tier.is-selected .hl-tier__main { border-color: var(--ink); } .hl-tier__stub { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: var(--space-4); border-radius: 0 0 var(--radius-ticket) var(--radius-ticket); -webkit-mask: radial-gradient(circle var(--_n) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--_n) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle var(--_n) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--_n) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat; } .hl-tier__stub::before { left: 16px; right: 16px; top: 0; bottom: auto; border-left: 0; border-top: 3px dotted var(--ink-fixed); } .hl-tier__stub .hl-stepper { margin-top: 0; } .hl-tier__name { font-size: 26px; line-height: 28px; } .hl-tier__price { font-size: 34px; line-height: 36px; } .hl-tier__stamp { top: 40%; right: 12px; } .hl-tiers__sum { padding: var(--space-4); } .hl-tiers__total b { font-size: 34px; line-height: 36px; } } /* ================================================================= Wristband */ .hl-band { --_tone: var(--flare); position: relative; display: flex; flex-direction: column; gap: var(--space-4); color: var(--ink); min-width: 0; } .hl-band--riot { --_tone: var(--riot); } .hl-band--wash { --_tone: var(--wash); } .hl-band--go { --_tone: var(--go); } .hl-band__wrist { position: relative; height: 96px; transform: rotate(-3deg); } .hl-band__strap { position: absolute; left: 0; right: 28px; top: 18px; height: 60px; overflow: hidden; border-radius: 6px 3px 3px 6px; background-color: var(--_tone); background-image: repeating-linear-gradient(0deg, #0000 0 2px, #0000001c 2px 3px), repeating-linear-gradient(90deg, #ffffff1f 0 1px, #0000 1px 4px); box-shadow: inset 0 5px 0 #00000026, inset 0 -5px 0 #00000026, 0 10px 18px -10px #000000b3; color: var(--ink-fixed); } .hl-band__strap::before, .hl-band__strap::after { content: ""; position: absolute; left: 0; right: 0; border-top: 1.5px dashed #16121380; } .hl-band__strap::before { top: 8px; } .hl-band__strap::after { bottom: 8px; } .hl-band__weave { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; white-space: nowrap; font: 400 24px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; opacity: .9; } .hl-band__weave span { padding-right: .7em; } .hl-band__weave b { font-weight: 400; color: var(--paper); -webkit-text-stroke: 1px var(--ink-fixed); padding-right: .7em; } .hl-band__tail { position: absolute; right: 0; top: 24px; width: 60px; height: 48px; background-color: var(--_tone); background-image: repeating-linear-gradient(0deg, #0000 0 2px, #0000002e 2px 3px); clip-path: polygon(0 0, 88% 4%, 100% 18%, 92% 34%, 100% 50%, 93% 66%, 100% 82%, 86% 100%, 0 100%); filter: none; opacity: .92; } .hl-band__clasp { position: absolute; left: 66%; top: 6px; width: 78px; height: 84px; border-radius: 10px; background-color: var(--ink-fixed); background-image: repeating-linear-gradient(90deg, #ffffff17 0 2px, #0000 2px 6px); border: 2px solid #000; box-shadow: inset 0 3px 0 #ffffff26, inset 0 -4px 0 #00000080, 0 8px 14px -6px #000000cc; display: grid; place-items: center; } .hl-band__id { padding: 3px 6px; border-radius: 3px; background: var(--paper); color: var(--ink-fixed); font: 700 10px/12px var(--font-body); letter-spacing: .1em; font-variant-numeric: tabular-nums; } .hl-band__chip { position: absolute; left: 16%; top: 12px; width: 72px; height: 72px; border-radius: var(--radius-pill); background: var(--paper); border: 3px solid var(--ink-fixed); display: grid; place-items: center; color: var(--ink-fixed); box-shadow: 0 8px 14px -8px #000000cc; } .hl-band__chip .hl-icon { width: 28px; height: 28px; stroke-width: 2.2; } .hl-band__chip small { position: absolute; bottom: 9px; font: 700 8px/1 var(--font-body); letter-spacing: .14em; } .hl-band__click { position: absolute; left: calc(66% + 39px); top: 48px; width: 0; height: 0; pointer-events: none; } .hl-band__click i { position: absolute; left: 0; top: 0; width: 0; height: 0; } .hl-band__click i::before { content: ""; position: absolute; left: -2px; top: -62px; width: 4px; height: 14px; background: var(--flare); border: 1px solid var(--ink-fixed); opacity: 0; } .hl-band__click i:nth-child(2) { transform: rotate(-40deg); } .hl-band__click i:nth-child(3) { transform: rotate(40deg); } .hl-band__click i:nth-child(4) { transform: rotate(140deg); } .hl-band__click i:nth-child(5) { transform: rotate(220deg); } .hl-band__meta { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .hl-band__who { display: flex; flex-direction: column; } .hl-band__name { font: 400 28px/30px var(--font-display); letter-spacing: .02em; text-transform: uppercase; } .hl-band__sub { font-size: 14px; line-height: 20px; color: var(--ink-soft); } /* the snap: the strap rolls on from the left, then the clasp clicks shut */ .hl-band.is-snapping .hl-band__strap, .hl-band.is-snapping .hl-band__tail { animation: hl-band-in var(--dur-roll) var(--ease-roll) backwards; } .hl-band.is-snapping .hl-band__chip { animation: hl-band-in var(--dur-roll) var(--ease-roll) 60ms backwards; } .hl-band.is-snapping .hl-band__clasp { animation: hl-clasp var(--dur-snap) var(--ease-snap) 460ms backwards; } .hl-band.is-snapping .hl-band__click i::before { animation: hl-click 460ms var(--ease-roll) 640ms backwards; } @keyframes hl-band-in { from { opacity: 0; transform: translateX(-38%); } } @keyframes hl-clasp { from { opacity: 0; transform: scale(1.45); } } @keyframes hl-click { 0% { opacity: 0; transform: translateY(14px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } } @media (max-width: 520px) { .hl-band__wrist { height: 84px; } .hl-band__strap { height: 50px; top: 16px; } .hl-band__tail { top: 20px; height: 42px; } .hl-band__weave { font-size: 19px; } .hl-band__clasp { width: 60px; height: 72px; top: 5px; left: 62%; } .hl-band__chip { width: 58px; height: 58px; top: 12px; left: 10%; } .hl-band__chip .hl-icon { width: 22px; height: 22px; } .hl-band__chip small { display: none; } .hl-band__click { left: calc(62% + 30px); top: 41px; } } /* ============================================================ Ticket (e-ticket) */ .hl-ticketwrap { container-type: inline-size; } .hl-ticket { --_tone: var(--riot); --_n: 13px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px; color: var(--ink-fixed); filter: none; } .hl-ticket--flare { --_tone: var(--flare); } .hl-ticket--wash { --_tone: var(--wash); } .hl-ticket--go { --_tone: var(--go); } .hl-ticket__main { position: relative; min-width: 0; padding: var(--space-6); background: var(--paper); border-radius: var(--radius-ticket) 0 0 var(--radius-ticket); display: flex; flex-direction: column; gap: var(--space-3); -webkit-mask: radial-gradient(circle var(--_n) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--_n) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle var(--_n) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--_n) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; } .hl-ticket__main::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, #ff463233 1.4px, transparent 1.8px); background-size: 7px 7px; -webkit-mask-image: linear-gradient(120deg, transparent 50%, #000); mask-image: linear-gradient(120deg, transparent 50%, #000); pointer-events: none; } .hl-ticket__head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .hl-ticket__head .hl-label { color: var(--ink-fixed-soft); } .hl-ticket__event { position: relative; margin: 0; font: 400 44px/42px var(--font-display); letter-spacing: .01em; text-transform: uppercase; color: var(--ink-fixed); text-shadow: .04em .03em 0 var(--riot); } .hl-ticket__grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: var(--space-3) var(--space-6); margin: 0; } .hl-ticket__grid div { min-width: 0; } .hl-ticket__grid dt { font: 700 10.5px/14px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-fixed-soft); } .hl-ticket__grid dd { margin: 0; font: 400 19px/22px var(--font-display); letter-spacing: .04em; text-transform: uppercase; } .hl-ticket__holder { position: relative; display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-3); border-top: 2px dashed #16121333; font-size: 14px; line-height: 20px; color: var(--ink-fixed-soft); } .hl-ticket__holder b { color: var(--ink-fixed); font-weight: 700; } .hl-ticket__admitted { position: absolute; right: 22px; bottom: 22px; opacity: 0; transform: rotate(-9deg); pointer-events: none; } .hl-ticket__admitted .hl-stamp { border-color: #12773f; color: #12773f; font-size: 22px; line-height: 26px; transform: none; } .hl-ticket__stub { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-3); background: var(--_tone); border-radius: 0 var(--radius-ticket) var(--radius-ticket) 0; transform-origin: 0 0; transition: transform var(--dur-tear) var(--ease-roll); touch-action: pan-y; cursor: grab; -webkit-mask: radial-gradient(circle var(--_n) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--_n) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle var(--_n) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--_n) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; } .hl-ticket__stub::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; border-left: 3px dotted var(--ink-fixed); opacity: .7; } .hl-ticket__admit { font: 400 22px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); } .hl-ticket__code { display: block; width: 100%; height: 54px; } .hl-ticket__code rect { fill: var(--ink-fixed); } .hl-ticket__num { font: 700 10px/12px var(--font-body); letter-spacing: .12em; font-variant-numeric: tabular-nums; } .hl-ticket__tear { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border: 2px solid var(--ink-fixed); border-radius: var(--radius-xs); background: var(--paper); color: var(--ink-fixed); font: 400 14px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 3px 0 var(--ink-fixed); transition: transform var(--dur-release) var(--ease-release), box-shadow var(--dur-release) var(--ease-release); } .hl-ticket__tear:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink-fixed); transition-duration: var(--dur-stomp); } .hl-ticket__tear .hl-icon { width: 14px; height: 14px; stroke-width: 2.8; } .hl-ticket.is-dragging .hl-ticket__stub { transition: none; cursor: grabbing; } .hl-ticket.is-torn .hl-ticket__stub { transform: translate(30px, 14px) rotate(8deg); cursor: default; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12'%3E%3Cpath d='M0 0H8V12H0L5 9 0 6 5 3Z'/%3E%3C/svg%3E") 0 0 / 8px 12px repeat-y, linear-gradient(#000 0 0) 7px 0 / calc(100% - 7px) 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12'%3E%3Cpath d='M0 0H8V12H0L5 9 0 6 5 3Z'/%3E%3C/svg%3E") 0 0 / 8px 12px repeat-y, linear-gradient(#000 0 0) 7px 0 / calc(100% - 7px) 100% no-repeat; } .hl-ticket.is-torn .hl-ticket__stub::before, .hl-ticket.is-torn .hl-ticket__tear { opacity: 0; pointer-events: none; } .hl-ticket.is-torn .hl-ticket__main { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12'%3E%3Cpath d='M8 0H0V12H8L3 9 8 6 3 3Z'/%3E%3C/svg%3E") 100% 0 / 8px 12px repeat-y, linear-gradient(#000 0 0) 0 0 / calc(100% - 7px) 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12'%3E%3Cpath d='M8 0H0V12H8L3 9 8 6 3 3Z'/%3E%3C/svg%3E") 100% 0 / 8px 12px repeat-y, linear-gradient(#000 0 0) 0 0 / calc(100% - 7px) 100% no-repeat; } .hl-ticket.is-torn .hl-ticket__admitted { opacity: 1; animation: hl-stamp var(--dur-snap) var(--ease-snap) 200ms backwards; } .hl-ticket.is-torn .hl-ticket__admitted .hl-stamp { animation: none; } @container (max-width: 520px) { .hl-ticket { grid-template-columns: 1fr; } .hl-ticket__main { padding: var(--space-4); border-radius: var(--radius-ticket) var(--radius-ticket) 0 0; -webkit-mask: radial-gradient(circle var(--_n) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--_n) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle var(--_n) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--_n) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat; } .hl-ticket__event { font-size: 34px; line-height: 34px; } .hl-ticket__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hl-ticket__stub { flex-direction: row; padding: var(--space-4); border-radius: 0 0 var(--radius-ticket) var(--radius-ticket); touch-action: pan-x; -webkit-mask: radial-gradient(circle var(--_n) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--_n) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle var(--_n) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--_n) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat; } .hl-ticket__stub::before { left: 18px; right: 18px; top: 0; bottom: auto; border-left: 0; border-top: 3px dotted var(--ink-fixed); } .hl-ticket__admit { writing-mode: horizontal-tb; transform: none; font-size: 18px; } .hl-ticket__code { width: 96px; height: 40px; } .hl-ticket.is-torn .hl-ticket__stub { transform: translate(8px, 26px) rotate(-3deg); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0L3 5 6 0 9 5 12 0V8H0Z'/%3E%3C/svg%3E") 0 0 / 12px 8px repeat-x, linear-gradient(#000 0 0) 0 7px / 100% calc(100% - 7px) no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0L3 5 6 0 9 5 12 0V8H0Z'/%3E%3C/svg%3E") 0 0 / 12px 8px repeat-x, linear-gradient(#000 0 0) 0 7px / 100% calc(100% - 7px) no-repeat; } .hl-ticket.is-torn .hl-ticket__main { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 8L3 3 6 8 9 3 12 8V0H0Z'/%3E%3C/svg%3E") 0 100% / 12px 8px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 7px) no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 8L3 3 6 8 9 3 12 8V0H0Z'/%3E%3C/svg%3E") 0 100% / 12px 8px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 7px) no-repeat; } .hl-ticket__admitted { right: 14px; bottom: 14px; } } /* ============================================================== TrackPlayer */ .hl-player { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--stage-raised); border: 1px solid var(--rule); border-radius: var(--radius-xs); box-shadow: var(--shadow-paste); color: var(--ink); min-width: 0; } .hl-player__top { display: flex; align-items: center; gap: var(--space-4); min-width: 0; } .hl-player__top .hl-iconbtn { margin-bottom: 6px; } .hl-player__play .hl-icon--pause { display: none; } .hl-player.is-playing .hl-player__play .hl-icon--pause { display: block; } .hl-player.is-playing .hl-player__play .hl-icon--play { display: none; } .hl-player__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; } .hl-player__title { font: 400 28px/30px var(--font-display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hl-player__artist { font-size: 14px; line-height: 20px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hl-player__eq { display: flex; align-items: flex-end; gap: 3px; height: 22px; flex: none; } .hl-player__eq i { width: 4px; height: 22px; background: var(--riot); transform-origin: 50% 100%; transform: scaleY(.18); animation: hl-meter 520ms ease-in-out infinite alternate; animation-play-state: paused; } .hl-player__eq i:nth-child(2) { animation-delay: -180ms; animation-duration: 430ms; } .hl-player__eq i:nth-child(3) { animation-delay: -320ms; animation-duration: 610ms; } .hl-player__eq i:nth-child(4) { animation-delay: -90ms; animation-duration: 470ms; } .hl-player.is-playing .hl-player__eq i { animation-play-state: running; } .hl-player__time { flex: none; font: 400 18px/20px var(--font-display); letter-spacing: .05em; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .hl-player__time b { font-weight: 400; color: var(--ink); display: inline-block; min-width: 3.4ch; text-align: right; } .hl-wave { --_p: 0; position: relative; height: 84px; overflow: hidden; cursor: pointer; touch-action: none; border-radius: 2px; background: var(--stage-sunk); } .hl-wave__bars { position: absolute; inset: 8px 0; display: flex; align-items: center; gap: 2px; padding: 0 6px; } .hl-wave__bars i { flex: 1; min-width: 1px; height: var(--_h); background: var(--hl-wave-bed); opacity: .5; border-radius: 1px; } .hl-wave__played { position: absolute; inset: 0; overflow: hidden; transform: translateX(calc((var(--_p) - 1) * 100%)); } .hl-wave__inner { position: absolute; inset: 0; transform: translateX(calc((1 - var(--_p)) * 100%)); } .hl-wave__played .hl-wave__bars i { background: var(--riot); opacity: 1; } .hl-wave__head { position: absolute; inset: 0; transform: translateX(calc(var(--_p) * 100%)); pointer-events: none; } .hl-wave__head::before { content: ""; position: absolute; left: -1.5px; top: 0; bottom: 0; width: 3px; background: var(--ink); } .hl-wave__flag { position: absolute; left: 1.5px; top: 0; padding: 2px 6px; background: var(--ink); color: var(--stage); font: 400 13px/16px var(--font-display); letter-spacing: .05em; font-variant-numeric: tabular-nums; } .hl-wave.is-late .hl-wave__flag { left: auto; right: calc(100% + 1.5px); } .hl-wave.is-late .hl-wave__head::before { left: -1.5px; } .hl-wave__hover { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--ink-soft); opacity: 0; pointer-events: none; transform: translateX(var(--_hx, 0px)); } .hl-wave:hover .hl-wave__hover { opacity: .7; } .hl-wave:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .hl-player__marks { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-top: -8px; } .hl-player--compact { padding: var(--space-4); gap: var(--space-3); } .hl-player--compact .hl-wave { height: 56px; } .hl-player--compact .hl-player__title { font-size: 22px; line-height: 24px; } @media (max-width: 520px) { .hl-player { padding: var(--space-4); } .hl-player__title { font-size: 22px; line-height: 24px; } .hl-player__eq { display: none; } .hl-wave { height: 64px; } } /* ================================================================== Setlist */ .hl-setlist { position: relative; margin-inline: 8px; color: var(--ink-fixed); background-color: var(--paper); background-image: linear-gradient(180deg, transparent calc(50% - 1px), #16121312 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(90deg, #00000008, transparent 20%, transparent 80%, #00000008); padding: var(--space-8) var(--space-6) var(--space-6); border-radius: 1px; transform: rotate(-1.1deg); box-shadow: var(--shadow-paste); } .hl-setlist .hl-tape { width: 84px; height: 24px; } .hl-setlist .hl-tape--tl { left: -10px; top: -8px; } .hl-setlist .hl-tape--tr { right: -10px; top: -8px; } .hl-setlist__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding-bottom: var(--space-4); margin-bottom: var(--space-3); border-bottom: 3px solid var(--ink-fixed); } .hl-setlist__band { font: 400 40px/40px var(--font-display); letter-spacing: .03em; text-transform: uppercase; } .hl-setlist__where { font: 700 11px/16px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-fixed-soft); } .hl-setlist__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .hl-setlist__song { position: relative; width: 100%; display: grid; grid-template-columns: 30px 38px minmax(0, 1fr) auto; align-items: center; gap: 0 6px; padding: 5px 4px; border: 0; background: none; color: var(--ink-fixed); text-align: left; cursor: pointer; border-radius: 2px; } .hl-setlist__song:hover { background: #16121309; } .hl-setlist__song:focus-visible { outline: 3px solid var(--ink-fixed); outline-offset: 0; } .hl-setlist__now { width: 22px; height: 22px; color: var(--riot); opacity: 0; transform: translateX(-6px); transition: opacity 160ms ease, transform var(--dur-release) var(--ease-release); } .hl-setlist__now .hl-icon { width: 20px; height: 20px; } .hl-setlist__song.is-next .hl-setlist__now { opacity: 1; transform: none; } .hl-setlist__n { position: relative; display: grid; place-items: center; width: 32px; height: 32px; font: 400 20px/1 var(--font-display); font-variant-numeric: tabular-nums; } .hl-setlist__ring { position: absolute; inset: -3px; width: 38px; height: 38px; fill: none; stroke: var(--riot); stroke-width: 3; stroke-linecap: round; transform: scale(.4) rotate(-30deg); opacity: 0; transition: transform var(--dur-strike) var(--ease-snap), opacity 120ms ease; } .hl-setlist__t { position: relative; justify-self: start; max-width: 100%; font: 400 27px/32px var(--font-display); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: visible; text-overflow: ellipsis; } .hl-setlist__strike { position: absolute; left: -6px; right: -6px; top: 50%; height: 14px; margin-top: -6px; width: calc(100% + 12px); overflow: visible; fill: none; stroke: var(--riot); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-strike) var(--ease-roll); } .hl-setlist__note { font: 600 12px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-fixed-soft); white-space: nowrap; } .hl-setlist__song[aria-pressed="true"] .hl-setlist__strike { transform: scaleX(1); } .hl-setlist__song[aria-pressed="true"] .hl-setlist__ring { transform: scale(1) rotate(-30deg); opacity: 1; } .hl-setlist__song[aria-pressed="true"] .hl-setlist__t { color: var(--ink-fixed-soft); } .hl-setlist__encore { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0 var(--space-2); font: 400 18px/22px var(--font-display); letter-spacing: .2em; text-transform: uppercase; } .hl-setlist__encore::before, .hl-setlist__encore::after { content: ""; flex: 1; height: 3px; background: var(--ink-fixed); } .hl-setlist__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 2px dashed #16121340; font: 700 11px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-fixed-soft); } .hl-setlist__count { font: 400 20px/1 var(--font-display); letter-spacing: .05em; color: var(--ink-fixed); font-variant-numeric: tabular-nums; } @media (max-width: 520px) { .hl-setlist { padding: var(--space-6) var(--space-4) var(--space-4); } .hl-setlist__song { grid-template-columns: 22px 34px minmax(0, 1fr); } .hl-setlist__note { grid-column: 3; } .hl-setlist__t { font-size: 22px; line-height: 28px; white-space: normal; } } /* ================================================================ VenueInfo */ .hl-venue { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8); background: var(--stage-raised); border: 1px solid var(--rule); border-radius: var(--radius-xs); box-shadow: var(--shadow-paste); color: var(--ink); min-width: 0; container-type: inline-size; } .hl-venue__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6); } .hl-venue__name { margin: 4px 0 4px; font: 400 40px/42px var(--font-display); letter-spacing: .015em; text-transform: uppercase; } .hl-venue__addr { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 15px; line-height: 22px; color: var(--ink-soft); } .hl-venue__addr .hl-icon { width: 16px; height: 16px; color: var(--riot-text); } .hl-venue__age { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; max-width: 150px; } .hl-venue__age small { font-size: 12px; line-height: 16px; color: var(--ink-soft); } .hl-daysheet { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 3px solid var(--ink); } .hl-daysheet li { position: relative; padding: 18px 8px 0 0; display: flex; flex-direction: column; gap: 2px; } .hl-daysheet li::before { content: ""; position: absolute; top: -9px; left: 0; width: 15px; height: 15px; border-radius: var(--radius-pill); background: var(--stage-raised); border: 3px solid var(--ink); } .hl-daysheet li.is-key::before { background: var(--riot); border-color: var(--ink); } .hl-daysheet__time { font: 400 30px/32px var(--font-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; } .hl-daysheet__what { font: 700 11px/15px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .hl-daysheet li.is-key .hl-daysheet__what { color: var(--riot-text); } .hl-venue__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } .hl-venue__cols h4 { margin: 0 0 var(--space-3); } .hl-venue__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .hl-venue__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--ink); } .hl-venue__list .hl-icon { width: 18px; height: 18px; margin-top: 1px; color: var(--riot-text); } .hl-venue__list small { display: block; color: var(--ink-soft); font-size: 13px; } .hl-venue__foot { display: flex; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-4); border-top: 2px solid var(--rule); } @container (max-width: 640px) { .hl-venue__cols { grid-template-columns: 1fr; gap: var(--space-4); } .hl-daysheet { grid-auto-flow: row; border-top: 0; border-left: 3px solid var(--ink); padding-left: 0; gap: 12px; } .hl-daysheet li { flex-direction: row; align-items: baseline; gap: 12px; padding: 0 0 0 22px; } .hl-daysheet li::before { top: 6px; left: -9px; } .hl-daysheet__time { font-size: 26px; line-height: 28px; min-width: 3.2em; } .hl-venue__name { font-size: 32px; line-height: 34px; } } @media (max-width: 520px) { .hl-venue { padding: var(--space-4); } .hl-venue__head { flex-direction: column; gap: var(--space-3); } .hl-venue__age { flex-direction: row; max-width: none; text-align: left; } } /* ================================================================ MerchCard */ .hl-merch { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; background: var(--stage-raised); border: 1px solid var(--rule); border-radius: var(--radius-xs); box-shadow: var(--shadow-paste); color: var(--ink); transition: transform var(--dur-hover) var(--ease-roll), box-shadow var(--dur-hover) ease; } .hl-merch::after { content: ""; position: absolute; z-index: -1; inset: 0 -6px -10px 0; } .hl-merch:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .hl-merch__art { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--stage-sunk); border-bottom: 2px solid var(--rule); } .hl-merch__art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hl-merch__disc { transition: transform 520ms var(--ease-roll); } .hl-merch:hover .hl-merch__disc { transform: translateX(16%); } .hl-merch__badge { position: absolute; z-index: 1; top: 12px; left: 12px; } .hl-merch__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); flex: 1; } .hl-merch__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); } .hl-merch__name { margin: 0; font: 400 22px/25px var(--font-display); letter-spacing: .03em; text-transform: uppercase; } .hl-merch__price { font: 400 24px/26px var(--font-display); letter-spacing: .03em; color: var(--riot-text); font-variant-numeric: tabular-nums; } .hl-merch__desc { margin: -6px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-soft); } .hl-merch__sizes { display: flex; gap: 6px; flex-wrap: wrap; border: 0; padding: 0; margin: 0; } .hl-merch__sizes legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .hl-merch__foot { margin-top: auto; } .hl-merch.is-soldout .hl-merch__art svg { opacity: .45; } .hl-chip { position: relative; display: inline-grid; } .hl-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .hl-chip span { min-width: 38px; height: 32px; padding: 0 8px; display: grid; place-items: center; border: 2px solid var(--ink-soft); border-radius: var(--radius-xs); font: 400 15px/1 var(--font-display); letter-spacing: .05em; color: var(--ink); background: var(--stage-sunk); transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, transform var(--dur-release) var(--ease-release); } .hl-chip:hover span { border-color: var(--ink); } .hl-chip input:checked + span { background: var(--flare); border-color: var(--ink-fixed); color: var(--ink-fixed); } .hl-chip input:active + span { transform: translateY(2px); transition-duration: var(--dur-stomp); } .hl-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; } .hl-chip input:disabled + span { opacity: .4; text-decoration: line-through; cursor: not-allowed; } /* ================================================================ Timetable */ .hl-tt { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; color: var(--ink); } .hl-tt__bar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .hl-tt__bar .hl-seg { flex: none; } .hl-tt__clash { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--ink-soft); min-height: 24px; } .hl-tt__clash.is-on { color: var(--riot-text); font-weight: 600; } .hl-tt__clash .hl-icon { width: 18px; height: 18px; } .hl-tt__scroll { position: relative; overflow-x: auto; overflow-y: hidden; border: 2px solid var(--rule); border-radius: var(--radius-xs); background: var(--stage-sunk); scrollbar-color: var(--ink-soft) var(--stage-sunk); overscroll-behavior-x: contain; } .hl-tt__scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .hl-tt__grid { position: relative; width: calc(var(--_w) + 132px); } .hl-tt__ruler { position: relative; height: 34px; margin-left: 132px; border-bottom: 2px solid var(--rule); } .hl-tt__ruler span { position: absolute; top: 8px; transform: translateX(-50%); font: 400 14px/16px var(--font-display); letter-spacing: .05em; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .hl-tt__ruler span:first-child { transform: none; padding-left: 4px; } .hl-tt__row { position: relative; display: flex; height: 76px; border-bottom: 1px solid var(--rule); } .hl-tt__row:last-of-type { border-bottom: 0; } .hl-tt__stage { position: sticky; left: 0; z-index: 3; flex: none; width: 132px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 12px; background: var(--stage-raised); border-right: 2px solid var(--rule); font: 400 17px/19px var(--font-display); letter-spacing: .04em; text-transform: uppercase; } .hl-tt__stage i { width: 22px; height: 5px; background: var(--_c, var(--riot)); border-radius: 1px; } .hl-tt__lane { position: relative; flex: none; width: var(--_w); background-image: linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: var(--_hour) 100%; background-position: 0 0; } .hl-set { position: absolute; top: 8px; bottom: 8px; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 10px; min-width: 0; overflow: hidden; border: 2px solid var(--ink-soft); border-radius: var(--radius-xs); background: var(--stage-raised); color: var(--ink); text-align: left; cursor: pointer; transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, transform var(--dur-release) var(--ease-release); } .hl-set:hover { border-color: var(--ink); z-index: 2; } .hl-set:active { transform: translateY(2px); transition-duration: var(--dur-stomp); } .hl-set__a { display: flex; align-items: center; gap: 4px; font: 400 15px/18px var(--font-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hl-set__a .hl-icon { width: 13px; height: 13px; flex: none; display: none; stroke-width: 2.6; } .hl-set__t { font-size: 12px; line-height: 15px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } .hl-set--head { border-color: var(--ink); } .hl-set--head .hl-set__a { font-size: 17px; } .hl-set[aria-pressed="true"] { background: var(--flare); border-color: var(--ink-fixed); color: var(--ink-fixed); } .hl-set[aria-pressed="true"] .hl-set__t { color: var(--ink-fixed-soft); } .hl-set[aria-pressed="true"] .hl-set__a .hl-icon { display: block; } .hl-set.is-clash { background: repeating-linear-gradient(-45deg, var(--riot) 0 8px, #ff6b5a 8px 16px); border-color: var(--ink-fixed); color: var(--ink-fixed); } .hl-set.is-clash .hl-set__t { color: var(--ink-fixed); font-weight: 700; } .hl-tt.is-mine .hl-set:not([aria-pressed="true"]) { opacity: .28; } .hl-tt__now { position: absolute; top: 0; bottom: 0; width: 0; z-index: 2; border-left: 2px solid var(--riot); pointer-events: none; } .hl-tt__now span { position: absolute; top: 6px; left: 0; padding: 2px 6px; background: var(--riot); color: var(--ink-fixed); font: 400 12px/14px var(--font-display); letter-spacing: .08em; white-space: nowrap; } .hl-tt__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: 13px; line-height: 18px; color: var(--ink-soft); } .hl-tt__legend span { display: inline-flex; align-items: center; gap: 6px; } .hl-tt__legend i { width: 16px; height: 12px; border-radius: 2px; border: 2px solid var(--ink-fixed); } /* ================================================================== Widgets */ .hl-cd { display: flex; flex-direction: column; gap: var(--space-4); } .hl-cd__units { display: flex; gap: var(--space-2); } .hl-cd__unit { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px 10px; background: var(--stage-sunk); border: 2px solid var(--ink-soft); border-radius: var(--radius-xs); overflow: hidden; } .hl-cd__n { display: block; font: 400 56px/56px var(--font-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--ink); height: 56px; } .hl-cd__n.is-tick { animation: hl-tick 380ms var(--ease-roll) backwards; } @keyframes hl-tick { from { opacity: 0; transform: translateY(-45%); } } .hl-cd__u { font: 700 10.5px/14px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); } .hl-cd__unit--s { background: var(--riot); border-color: var(--ink-fixed); } .hl-cd__unit--s .hl-cd__n, .hl-cd__unit--s .hl-cd__u { color: var(--ink-fixed); } @media (max-width: 420px) { .hl-cd__n { font-size: 40px; line-height: 44px; height: 44px; } } .hl-presale__ok { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); } .hl-code { display: inline-flex; align-items: center; gap: var(--space-3); padding: 10px 12px 10px 18px; background: var(--flare); color: var(--ink-fixed); font: 400 28px/30px var(--font-display); letter-spacing: .14em; clip-path: polygon(0 6%, 3% 0, 97% 5%, 100% 0, 99% 50%, 100% 100%, 4% 95%, 0 100%, 2% 50%); } .hl-code .hl-iconbtn { margin: 0; --_face: var(--paper); --_fg: var(--ink-fixed); --_rim: var(--ink-fixed); --_travel: 0px; box-shadow: none; } .hl-live { display: flex; flex-direction: column; gap: var(--space-4); } .hl-live__now { display: flex; align-items: center; gap: var(--space-4); } .hl-live__dot { display: inline-flex; align-items: center; gap: 8px; } .hl-live__dot i { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--go); border: 2px solid var(--ink-fixed); } .hl-live__act { font: 400 40px/40px var(--font-display); letter-spacing: .01em; text-transform: uppercase; } .hl-live__next { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rule); } .hl-live__next li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--rule); } .hl-live__time { font: 400 20px/22px var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink-soft); } .hl-live__name { font: 400 20px/22px var(--font-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hl-live__in { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 9ch; text-align: right; }