html {
scroll-behavior: smooth;
}
body {
background: var(--colour-page);
overflow-x: hidden;
}
body.modal-open {
overflow: hidden;
touch-action: none;
}
body.modal-open .modal-panel {
touch-action: pan-y;
}
button,
a,
input,
select {
touch-action: manipulation;
}
button,
a {
transition: transform 160ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease, opacity 180ms ease;
}
button:active,
a:active {
transform: scale(0.97);
}
.font-display {
font-weight: 800;
}
.mock-shadow {
box-shadow: 0 26px 60px rgba(16, 16, 16, 0.24);
}
.listing-card {
cursor: pointer;
isolation: isolate;
max-width: 100%;
position: relative;
transform: rotate(var(--ticket-rotate, 0deg)) scale(var(--ticket-scale, 1));
transition: transform 220ms ease;
will-change: transform;
}
.place-card {
cursor: pointer;
max-width: 100%;
overflow: visible;
width: 100%;
}
.listing-card:hover {
transform: rotate(var(--ticket-rotate, 0deg)) scale(calc(var(--ticket-scale, 1) + 0.005));
}
.place-card:hover {
transform: rotate(var(--ticket-rotate, 0deg)) scale(calc(var(--ticket-scale, 1) + 0.005));
}
@property --premium-badge-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
.premium-badge {
--premium-badge-angle: 0deg;
color: var(--colour-primary-text);
border: 2px solid transparent;
background:
linear-gradient(180deg, var(--colour-primary), var(--colour-primary)) padding-box,
conic-gradient(from var(--premium-badge-angle),
var(--colour-featured-metal-1) 0deg,
var(--colour-featured-metal-2) 26deg,
var(--colour-featured-metal-3) 68deg,
var(--colour-featured-metal-4) 108deg,
var(--colour-featured-metal-5) 136deg,
var(--colour-featured-metal-6) 174deg,
var(--colour-featured-metal-7) 218deg,
var(--colour-featured-metal-8) 250deg,
var(--colour-featured-metal-3) 292deg,
var(--colour-featured-metal-9) 330deg,
var(--colour-featured-metal-1) 360deg) border-box;
animation: premium-badge-shimmer 10s linear infinite;
z-index: 3;
}
.premium-badge svg {
color: currentColor;
filter: none;
}
.today-badge {
color: var(--colour-today-text);
background: var(--colour-today-bg);
z-index: 3;
}
.today-badge svg {
animation: today-bell-ring 3.5s ease-in-out infinite;
transform-origin: 50% 12%;
}
@keyframes today-bell-ring {
0%,
78%,
100% {
transform: rotate(0deg);
}
82% {
transform: rotate(-13deg);
}
86% {
transform: rotate(11deg);
}
90% {
transform: rotate(-8deg);
}
94% {
transform: rotate(5deg);
}
97% {
transform: rotate(-2deg);
}
}
@media (prefers-reduced-motion: reduce) {
.today-badge svg {
animation: none;
}
}
.momentum-badge {
z-index: 3;
box-shadow: none;
white-space: nowrap;
}
.ticket-available-badge {
color: var(--colour-ticket-badge-text);
background: var(--colour-ticket-badge-bg);
}
.trending-badge {
color: var(--colour-trending-badge-text);
background: var(--colour-trending-badge-bg);
}
.popular-badge {
color: var(--colour-popular-badge-text);
background: var(--colour-popular-badge-bg);
}
@keyframes premium-badge-shimmer {
to {
--premium-badge-angle: 360deg;
}
}
.card-share-btn {
backdrop-filter: blur(10px);
z-index: 2;
}
.card-share-btn:hover,
.card-share-btn:active {
transform: none !important;
}
.mobile-filter-rail {
display: flex;
gap: 0.5rem;
margin: -0.5rem;
max-width: calc(100% + 1rem);
min-width: 0;
overflow-x: auto;
overscroll-behavior-x: contain;
padding: 0.5rem 0.5rem 0.7rem;
scrollbar-width: none;
width: calc(100% + 1rem);
}
.mobile-filter-rail.hidden,
.event-filter-set.hidden,
.place-filter-set.hidden {
display: none !important;
}
.mobile-filter-rail .filter-btn:not(.is-active-filter) {
background: var(--colour-filter-pill-bg);
color: var(--colour-filter-pill-text);
}
.mobile-filter-rail::-webkit-scrollbar {
display: none;
}
.mobile-view-card {
margin-bottom: 1rem;
border-radius: 1.5rem;
background: var(--colour-filter-panel-bg);
color: var(--colour-filter-panel-text);
padding: 1rem;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--colour-filter-panel-text) 10%, transparent);
}
.view-toggle-btn {
background: var(--colour-filter-pill-bg);
color: var(--colour-filter-pill-text);
transition: transform 160ms ease, background-color 180ms ease, color 180ms ease;
}
.view-toggle-btn:hover {
transform: translateY(-2px);
}
.view-toggle-btn.is-active-view {
background: var(--colour-filter-active-bg);
color: var(--colour-filter-active-text);
}
.mobile-controls-panel {
overflow: hidden;
transition: max-height 260ms ease, opacity 220ms ease;
}
.controls-arrow {
transition: transform 220ms ease;
}
.controls-toggle[aria-expanded="true"] .controls-arrow {
transform: rotate(180deg);
}
.listing-image {
--placeholder-a: #ff6b3d;
--placeholder-b: #f5b5d8;
--placeholder-c: #f3efe9;
--grainy-placeholder-bg: var(--placeholder-a);
background-image: var(--grainy-placeholder-bg);
background-size: cover;
transform: scale(1);
}
.grainy-placeholder::after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
background-size: 220px 220px;
content: "";
inset: 0;
mix-blend-mode: overlay;
opacity: 0.28;
pointer-events: none;
position: absolute;
z-index: 0;
}
.ticket-card {
display: grid;
grid-template-columns: minmax(190px, 32%) minmax(0, 1fr);
min-height: 230px;
overflow: visible;
}
.ticket-panel {
background: var(--colour-page);
}
.ticket-image-panel {
aspect-ratio: 2 / 1;
min-height: 0;
position: relative;
}
.ticket-image-panel .listing-image {
inset: 0;
position: absolute;
}
.buy-tickets-btn {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 46%),
#111111;
border: 1px solid rgba(255, 255, 255, 0.62);
color: #fff8e6;
min-height: 2.5rem;
outline: 1px solid rgba(17, 17, 17, 0.28);
outline-offset: 2px;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
transition:
background-color 180ms ease,
color 180ms ease,
outline-color 180ms ease,
transform 180ms ease;
will-change: transform;
}
.buy-tickets-btn:hover {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 48%),
#030303;
outline-color: rgba(255, 248, 230, 0.68);
transform: translateY(-2px);
}
.buy-tickets-btn:active {
transform: translateY(0) scale(0.97);
}
.buy-tickets-icon {
animation: ticket-nudge-idle 5s ease-in-out infinite;
transform-origin: center;
transition: transform 180ms ease;
}
.buy-tickets-btn:hover .buy-tickets-icon {
animation: ticket-nudge 620ms ease both;
}
@keyframes ticket-nudge {
0%,
100% {
transform: rotate(0deg) translateY(0);
}
28% {
transform: rotate(-7deg) translateY(-1px);
}
58% {
transform: rotate(6deg) translateY(0);
}
}
@keyframes ticket-nudge-idle {
0%,
86%,
100% {
transform: rotate(0deg) translateY(0);
}
89% {
transform: rotate(-7deg) translateY(-1px);
}
92% {
transform: rotate(6deg) translateY(0);
}
95% {
transform: rotate(-3deg) translateY(0);
}
}
.ticket-image-panel::before,
.ticket-image-panel::after {
background: var(--colour-page);
border-radius: 999px;
content: "";
height: 26px;
position: absolute;
right: -13px;
width: 26px;
z-index: 3;
}
.ticket-image-panel::before {
top: -13px;
}
.ticket-image-panel::after {
bottom: -13px;
}
.ticket-main {
background-position: 0 50%;
background-size: 140% 140%;
position: relative;
transition: background-position 220ms ease;
}
.listing-card:hover .ticket-main {
background-position: 100% 50%;
}
.ticket-main::before,
.ticket-main::after {
background: var(--colour-page);
border-radius: 999px;
content: "";
height: 26px;
left: -15px;
position: absolute;
width: 26px;
z-index: 3;
}
.ticket-main::before {
top: -13px;
}
.ticket-main::after {
bottom: -13px;
}
.ticket-seam {
border-left: 2px dashed var(--colour-ticket-seam);
bottom: 16px;
left: -1px;
position: absolute;
top: 16px;
z-index: 2;
}
.parea-pick-badge {
background: var(--selected-pill, var(--colour-parea-pick-bg));
color: var(--selected-pill-text, var(--colour-parea-pick-text));
letter-spacing: 0;
overflow: hidden;
position: relative;
isolation: isolate;
}
.parea-pick-badge > * {
position: relative;
z-index: 1;
}
@media (min-width: 768px) {
.ticket-card {
align-items: stretch;
grid-template-columns: minmax(240px, 35%) minmax(0, 1fr);
min-height: 265px;
}
.ticket-image-panel {
aspect-ratio: auto;
height: 100%;
}
.ticket-title {
font-size: clamp(1.9rem, 2.4vw, 2.35rem);
line-height: 0.98;
}
.ticket-actions {
margin-top: auto;
padding-top: 1.75rem;
}
}
.ticket-tone-0 .ticket-main {
--ticket-text: var(--ticket-01-text);
--selected-pill: var(--ticket-01-text);
--selected-pill-text: var(--ticket-01-bg);
background: var(--ticket-01-bg);
}
.ticket-tone-1 .ticket-main {
--ticket-text: var(--ticket-02-text);
--selected-pill: var(--ticket-02-text);
--selected-pill-text: var(--ticket-02-bg);
background: var(--ticket-02-bg);
}
.ticket-tone-2 .ticket-main {
--ticket-text: var(--ticket-03-text);
--selected-pill: var(--ticket-03-text);
--selected-pill-text: var(--ticket-03-bg);
background: var(--ticket-03-bg);
}
.ticket-tone-3 .ticket-main {
--ticket-text: var(--ticket-04-text);
--selected-pill: var(--ticket-04-text);
--selected-pill-text: var(--ticket-04-bg);
background: var(--ticket-04-bg);
}
.ticket-tone-4 .ticket-main {
--ticket-text: var(--ticket-05-text);
--selected-pill: var(--ticket-05-text);
--selected-pill-text: var(--ticket-05-bg);
background: var(--ticket-05-bg);
}
.ticket-tone-5 .ticket-main {
--ticket-text: var(--ticket-06-text);
--selected-pill: var(--ticket-06-text);
--selected-pill-text: var(--ticket-06-bg);
background: var(--ticket-06-bg);
}
.ticket-tone-6 .ticket-main {
--ticket-text: var(--ticket-07-text);
--selected-pill: var(--ticket-07-text);
--selected-pill-text: var(--ticket-07-bg);
background: var(--ticket-07-bg);
}
.ticket-tone-7 .ticket-main {
--ticket-text: var(--ticket-08-text);
--selected-pill: var(--ticket-08-text);
--selected-pill-text: var(--ticket-08-bg);
background: var(--ticket-08-bg);
}
.ticket-tone-8 .ticket-main {
--ticket-text: var(--ticket-09-text);
--selected-pill: var(--ticket-09-text);
--selected-pill-text: var(--ticket-09-bg);
background: var(--ticket-09-bg);
}
.ticket-tone-9 .ticket-main {
--ticket-text: var(--ticket-10-text);
--selected-pill: var(--ticket-10-text);
--selected-pill-text: var(--ticket-10-bg);
background: var(--ticket-10-bg);
}
.ticket-tone-10 .ticket-main {
--ticket-text: var(--ticket-11-text);
--selected-pill: var(--ticket-11-text);
--selected-pill-text: var(--ticket-11-bg);
background: var(--ticket-11-bg);
}
.ticket-tone-11 .ticket-main {
--ticket-text: var(--ticket-12-text);
--selected-pill: var(--ticket-12-text);
--selected-pill-text: var(--ticket-12-bg);
background: var(--ticket-12-bg);
}
.ticket-tone-12 .ticket-main {
--ticket-text: var(--ticket-13-text);
--selected-pill: var(--ticket-13-text);
--selected-pill-text: var(--ticket-13-bg);
background: var(--ticket-13-bg);
}
.ticket-tone-13 .ticket-main {
--ticket-text: var(--ticket-14-text);
--selected-pill: var(--ticket-14-text);
--selected-pill-text: var(--ticket-14-bg);
background: var(--ticket-14-bg);
}
.ticket-tone-14 .ticket-main {
--ticket-text: var(--ticket-15-text);
--selected-pill: var(--ticket-15-text);
--selected-pill-text: var(--ticket-15-bg);
background: var(--ticket-15-bg);
}
.ticket-tone-15 .ticket-main {
--ticket-text: var(--ticket-16-text);
--selected-pill: var(--ticket-16-text);
--selected-pill-text: var(--ticket-16-bg);
background: var(--ticket-16-bg);
}
.reaction-selected {
background: var(--colour-primary, #1b59d1);
color: var(--colour-primary-text, #ffffff);
}
.shared-listing-card {
box-shadow: none;
}
.shared-related-rail {
position: relative;
}
.shared-related-rail::after {
background: linear-gradient(90deg, rgb(247 241 234 / 0), var(--colour-page) 72%);
bottom: 0.5rem;
content: "";
pointer-events: none;
position: absolute;
right: -1px;
top: 0;
width: 3.5rem;
z-index: 5;
}
.shared-related-scroll {
padding-left: 0.15rem;
padding-right: 2.6rem;
scrollbar-width: none;
}
.shared-related-scroll::-webkit-scrollbar {
display: none;
}
.shared-related-ticket {
color: var(--ticket-text, #111111);
display: block;
flex: 0 0 min(72vw, 16rem);
max-width: 16rem;
text-decoration: none;
}
.shared-related-ticket-main {
aspect-ratio: 1 / 0.94;
border-radius: 26px;
color: var(--ticket-text, #111111);
display: flex;
flex-direction: column;
min-height: 13.75rem;
overflow: hidden;
padding: 1rem;
position: relative;
}
.shared-related-ticket-main::before,
.shared-related-ticket-main::after {
background: var(--colour-page);
border-radius: 999px;
content: "";
height: 24px;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 24px;
z-index: 2;
}
.shared-related-ticket-main::before {
left: -12px;
}
.shared-related-ticket-main::after {
right: -12px;
}
.shared-related-kicker {
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0;
line-height: 1;
text-transform: uppercase;
}
.shared-related-title {
display: -webkit-box;
font-family: var(--font-display);
font-size: clamp(1.28rem, 7vw, 1.7rem);
font-weight: 900;
line-height: 0.96;
margin-top: 0.55rem;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.shared-related-meta {
display: -webkit-box;
font-size: 0.78rem;
font-weight: 900;
line-height: 1.25;
margin-top: 0.55rem;
opacity: 0.86;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.shared-related-description {
display: -webkit-box;
font-size: 0.86rem;
font-weight: 750;
line-height: 1.32;
margin-top: 0.65rem;
opacity: 0.78;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.shared-related-ticket .ticket-logo-mark {
color: currentColor;
bottom: 1rem;
position: absolute;
right: 1rem;
}
.shared-related-stats {
align-items: center;
bottom: 1rem;
display: flex;
gap: 0.55rem;
left: 1rem;
position: absolute;
}
.shared-related-stats span {
align-items: center;
display: inline-flex;
font-size: 0.78rem;
font-weight: 900;
gap: 0.28rem;
line-height: 1;
}
@media (min-width: 768px) {
.shared-related-rail::after {
display: none;
}
.shared-related-scroll {
padding-left: 0;
padding-right: 0;
gap: 1.25rem;
}
.shared-related-ticket {
flex-basis: auto;
max-width: none;
}
.shared-related-ticket-main {
aspect-ratio: 1 / 0.92;
min-height: 13.25rem;
padding: 1.05rem;
}
.shared-related-title {
font-size: clamp(1.2rem, 1.85vw, 1.55rem);
}
.shared-related-description {
font-size: 0.82rem;
-webkit-line-clamp: 2;
}
}
.shared-listing-hero {
box-shadow: none;
}
.shared-page-back {
box-shadow: none;
}
.shared-hero-card {
isolation: isolate;
}
.shared-ticket-image {
aspect-ratio: 2 / 1;
box-shadow: none;
background: var(--colour-page);
min-height: 0;
}
.shared-hero-media {
min-height: clamp(24rem, 47vw, 34rem);
}
.shared-ticket-image.is-placeholder {
min-height: 0;
}
.shared-ticket-gradient {
--grainy-placeholder-bg: var(--placeholder-a, #ff6b3d);
background-image: var(--grainy-placeholder-bg);
background-size: cover;
z-index: 0;
}
.shared-ticket-photo {
object-fit: cover;
object-position: center;
}
.shared-hero-shade {
background:
linear-gradient(90deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.42) 42%, rgba(0, 0, 0, 0.08) 100%),
linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.78) 100%);
inset: 0;
pointer-events: none;
position: absolute;
z-index: 2;
}
.shared-ticket-image.is-placeholder .shared-hero-shade {
background:
linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 58%, rgba(0, 0, 0, 0.02) 100%),
linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.34) 100%);
}
.shared-hero-content {
backdrop-filter: blur(12px);
background: rgba(10, 10, 14, 0.76);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 1.5rem;
bottom: 1.5rem !important;
left: 1.5rem !important;
max-width: min(44rem, calc(100% - 2rem));
padding: clamp(1.2rem, 2.2vw, 1.85rem) !important;
right: auto !important;
text-shadow: 0 1px 18px rgba(0, 0, 0, 0.24);
}
.shared-hero-kicker {
color: color-mix(in srgb, currentColor 92%, var(--colour-primary));
}
.shared-hero-place,
.shared-hero-date {
color: rgba(255, 255, 255, 0.9);
}
.shared-hero-title {
font-size: clamp(2.35rem, 4.8vw, 4.25rem);
letter-spacing: 0;
line-height: 0.94;
margin-top: 0.85rem;
max-width: 13ch;
text-wrap: balance;
}
.shared-hero-description {
display: -webkit-box;
font-size: clamp(1rem, 1.5vw, 1.2rem);
font-weight: 800;
line-height: 1.45;
margin-top: 0.75rem;
max-width: 32rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.shared-hero-actions .buy-tickets-btn {
background: #f9be35;
border: 1px solid rgba(255, 255, 255, 0.64);
color: #111;
min-height: 3rem;
padding-inline: 1.15rem;
}
.shared-hero-reaction {
align-items: center;
background: #08096d !important;
border-radius: 999px;
color: #fff !important;
display: inline-flex;
font-weight: 950;
gap: 0.55rem;
justify-content: center;
min-height: 3rem;
padding: 0.7rem 1.2rem;
}
.shared-hero-reaction.reaction-selected {
background: color-mix(in srgb, var(--colour-primary) 88%, #08096d) !important;
color: var(--colour-primary-contrast, #fff) !important;
}
.shared-mobile-summary {
display: none;
}
.shared-mobile-ticket-row {
display: none;
}
.shared-mobile-title {
color: var(--ticket-text, var(--colour-ink));
font-size: clamp(1.8rem, 9vw, 2.45rem);
letter-spacing: 0;
line-height: 0.96;
margin-top: 0.55rem;
overflow-wrap: anywhere;
}
.shared-mobile-meta {
color: var(--ticket-text, var(--colour-primary));
column-gap: 0.7rem;
display: flex;
flex-wrap: wrap;
font-size: 0.82rem;
font-weight: 850;
line-height: 1.2;
margin-top: 0.75rem;
row-gap: 0.35rem;
}
.shared-mobile-meta span {
align-items: center;
display: inline-flex;
gap: 0.32rem;
min-width: 0;
}
.shared-mobile-description {
color: color-mix(in srgb, var(--ticket-text, var(--colour-ink)) 78%, var(--colour-muted-text));
font-size: 0.95rem;
font-weight: 650;
line-height: 1.42;
margin-top: 0.7rem;
}
.shared-mobile-actions {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: 1rem;
}
.shared-mobile-actions .buy-tickets-btn {
flex-basis: 100%;
justify-content: center;
}
.shared-ticket-image::before,
.shared-ticket-image::after {
background: var(--colour-page);
border-radius: 999px;
content: "";
height: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
z-index: 8;
}
.shared-ticket-image::before {
left: -15px;
}
.shared-ticket-image::after {
right: -15px;
}
.shared-listing-detail {
box-shadow: none;
color: var(--ticket-text, currentColor);
min-height: 0;
}
.shared-detail-grid {
align-items: start;
gap: clamp(1rem, 2vw, 1.35rem);
}
.shared-info-card {
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: none;
}
.shared-about-card {
min-height: clamp(11rem, 18vw, 15rem);
}
@media (min-width: 1024px) {
.shared-about-card {
position: sticky;
top: 1rem;
}
}
.shared-facts-card {
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.shared-facts-card {
position: sticky;
top: 1rem;
}
}
.shared-description-full {
color: var(--colour-page-text);
font-size: clamp(1rem, 1.5vw, 1.12rem);
font-weight: 650;
line-height: 1.62;
margin-top: 0.9rem;
opacity: 0.78;
white-space: pre-line;
}
.shared-change-note {
box-shadow: none;
line-height: 1.35;
}
.shared-fact-row {
align-items: flex-start;
color: var(--colour-page-text);
display: grid;
font-size: 0.95rem;
font-weight: 850;
gap: 0.7rem;
grid-template-columns: 1.1rem minmax(0, 1fr);
line-height: 1.35;
}
.shared-fact-icon {
color: var(--colour-primary);
height: 1.1rem;
margin-top: 0.05rem;
width: 1.1rem;
}
.shared-side-link {
align-items: center;
background: color-mix(in srgb, var(--colour-primary) 14%, white);
border-radius: 999px;
color: var(--colour-primary);
display: inline-flex;
font-size: 0.9rem;
font-weight: 950;
justify-content: center;
min-height: 2.75rem;
padding: 0.75rem 1rem;
text-decoration: none;
}
.shared-side-stats div {
align-items: center;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.shared-side-stats strong {
color: var(--colour-page-text);
font-size: 1.25rem;
font-weight: 950;
line-height: 1;
}
.shared-side-stats span {
color: var(--colour-muted-text);
font-size: 0.74rem;
font-weight: 850;
}
.shared-side-cta {
align-items: center;
background: var(--colour-primary);
border: 0;
border-radius: 999px;
color: var(--colour-primary-contrast);
display: inline-flex;
font-weight: 950;
justify-content: center;
min-height: 3rem;
padding: 0.8rem 1.1rem;
text-decoration: none;
width: 100%;
}
.shared-ticket-cta {
background: #08096d;
color: #fff;
gap: 0.55rem;
}
.shared-ticket-cta:hover,
.shared-ticket-cta:focus-visible {
background: #1114a0;
color: #fff;
}
.shared-side-cta-secondary {
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.14);
color: var(--colour-primary);
}
.shared-good-to-know {
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 0.95rem;
}
.shared-good-row {
align-items: flex-start;
display: grid;
gap: 0.75rem;
grid-template-columns: 2rem minmax(0, 1fr);
padding: 0.48rem 0;
}
.shared-good-icon {
align-items: center;
background: color-mix(in srgb, var(--colour-primary) 12%, white);
border-radius: 999px;
color: var(--colour-primary);
display: inline-flex;
font-size: 0.9rem;
font-weight: 950;
height: 2rem;
justify-content: center;
width: 2rem;
}
.shared-good-row p {
color: var(--colour-muted-text);
font-size: 0.86rem;
font-weight: 760;
line-height: 1.4;
margin: 0;
}
.shared-meta-row {
align-items: center;
display: flex;
flex-wrap: wrap;
column-gap: 0.8rem;
row-gap: 0.35rem;
}
.shared-info-pill {
align-items: center;
background: transparent;
border-radius: 0;
color: color-mix(in srgb, currentColor 76%, transparent);
display: inline-flex;
font-size: 0.8125rem;
font-weight: 700;
gap: 0.32rem;
line-height: 1;
padding: 0;
white-space: nowrap;
}
.shared-info-pill svg {
color: var(--colour-primary, currentColor);
flex: 0 0 auto;
height: 1rem;
width: 1rem;
}
.shared-note {
margin-bottom: 0;
margin-top: 0.2rem;
}
.shared-listing-title {
font-size: clamp(2rem, 5.8vw, 3.7rem);
hyphens: auto;
line-height: 0.95;
margin-top: 1.35rem;
overflow-wrap: break-word;
text-wrap: balance;
}
.shared-listing-detail .shared-reaction-btn {
align-items: center;
background: rgba(255, 255, 255, 0.45) !important;
border-radius: 999px;
color: currentColor !important;
display: inline-flex;
font-weight: 900;
gap: 0.5rem;
justify-content: center;
min-height: 3rem;
padding: 0.75rem 1.25rem;
}
.shared-listing-detail .shared-reaction-btn.reaction-selected {
background: var(--colour-primary, #0b0b0b) !important;
color: var(--colour-primary-contrast, #ffffff) !important;
}
.shared-description {
color: currentColor;
margin-top: 1.45rem;
font-size: 1rem;
font-weight: 500;
line-height: 1.65;
opacity: 0.72;
}
@media (max-width: 767px) {
.shared-listing-page {
padding-left: 0.8rem;
padding-right: 0.8rem;
}
.shared-page-back {
font-size: 0.82rem;
padding: 0.55rem 0.85rem;
}
.shared-hero-media {
aspect-ratio: 2 / 1;
min-height: 0;
}
.shared-hero-shade {
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.2) 100%),
linear-gradient(90deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.02));
}
.shared-hero-badge {
left: 0.9rem;
top: 0.9rem;
}
.shared-hero-content {
display: none;
}
.shared-hero-place {
margin-top: 4.4rem;
}
.shared-hero-title {
font-size: clamp(2rem, 11vw, 3rem);
max-width: 10ch;
}
.shared-hero-description {
font-size: 0.95rem;
line-height: 1.5;
max-width: 19rem;
}
.shared-hero-actions {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
}
.shared-hero-actions .buy-tickets-btn {
grid-column: 1 / -1;
justify-content: center;
width: 100%;
}
.shared-hero-reaction {
font-size: 0.86rem;
min-height: 2.75rem;
padding: 0.62rem 0.75rem;
}
.shared-mobile-summary {
border: 1px solid rgba(0, 0, 0, 0.06);
display: block;
margin-top: -0.55rem;
}
.shared-mobile-ticket-row {
display: block;
margin-bottom: -0.55rem;
margin-top: -0.55rem;
padding-inline: 0.25rem;
position: relative;
z-index: 12;
}
.shared-mobile-ticket-cta {
background: #111;
border: 2px solid rgba(255, 255, 255, 0.92);
box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.85);
color: #fff;
min-height: 2.9rem;
width: 100%;
}
.shared-mobile-ticket-cta:hover,
.shared-mobile-ticket-cta:focus-visible {
background: #202020;
color: #fff;
}
.shared-mobile-reaction {
flex: 1 1 auto;
font-size: 0.88rem;
min-height: 2.75rem;
padding: 0.64rem 0.78rem;
}
.shared-listing-detail {
padding: 1.1rem;
}
.shared-detail-grid {
gap: 0.85rem;
}
.shared-info-card {
border-radius: 1.35rem;
padding: 1.05rem !important;
}
.shared-about-card {
min-height: 0;
}
.shared-facts-card {
display: block;
}
.shared-meta-row {
column-gap: 0.75rem;
row-gap: 0.28rem;
}
.shared-info-pill {
font-size: 0.8125rem;
gap: 0.22rem;
}
.shared-info-pill svg {
height: 0.82rem;
width: 0.82rem;
}
.shared-listing-title {
font-size: clamp(1.42rem, 7.3vw, 2rem) !important;
line-height: 1;
margin-top: 0.75rem;
}
.shared-listing-detail .shared-reaction-btn {
font-size: 0.9rem;
min-height: 2.75rem;
padding: 0.68rem 1rem;
}
.shared-description {
margin-top: 1.15rem;
font-size: 0.95rem;
line-height: 1.58;
}
}
.shared-listing-image {
min-height: clamp(16rem, 42vh, 26rem);
}
.shared-listing-body {
color: var(--ticket-text, currentColor);
padding: clamp(1.25rem, 5vw, 2rem);
}
.shared-listing-body .ticket-description {
-webkit-line-clamp: unset;
display: block;
overflow: visible;
}
.shared-listing-body .detail-ticket-seam {
border-left: 0;
border-top: 2px dashed var(--colour-ticket-seam);
bottom: auto;
left: 18px;
right: 18px;
top: -1px;
}
.shared-listing-body::before,
.shared-listing-body::after {
background: var(--colour-page);
border-radius: 999px;
content: "";
height: 26px;
position: absolute;
top: -13px;
width: 26px;
z-index: 3;
}
.shared-listing-body::before {
left: -13px;
}
.shared-listing-body::after {
right: -13px;
}
.detail-ticket-card {
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: none;
}
.detail-ticket-grid {
isolation: isolate;
}
.detail-ticket-image {
position: relative;
}
.detail-ticket-image::before,
.detail-ticket-image::after {
background: var(--colour-page);
border-radius: 999px;
content: "";
height: 28px;
position: absolute;
right: -14px;
width: 28px;
z-index: 4;
}
.detail-ticket-image::before {
top: -14px;
}
.detail-ticket-image::after {
bottom: -14px;
}
.detail-ticket-main {
background-position: 0 50%;
background-size: 140% 140%;
position: relative;
}
.detail-ticket-main::before,
.detail-ticket-main::after {
background: var(--colour-page);
border-radius: 999px;
content: "";
height: 28px;
left: -14px;
position: absolute;
width: 28px;
z-index: 4;
}
.detail-ticket-main::before {
top: -14px;
}
.detail-ticket-main::after {
bottom: -14px;
}
#closeModalMobile {
transform: translateZ(0);
}
#modalTime {
max-width: 100%;
}
#modalTime svg {
flex: 0 0 auto;
}
#modalInstagram:empty {
display: none;
}
.modal-venue-link {
align-items: center;
background: var(--colour-primary);
border-radius: 999px;
color: var(--colour-primary-text);
display: inline-flex;
font-size: .88rem;
font-weight: 850;
gap: .45rem;
min-height: 2.65rem;
padding: .72rem 1rem;
}
.modal-venue-link:hover {
background: var(--colour-page-text);
color: var(--colour-page);
}
.detail-ticket-seam {
border-left: 2px dashed var(--colour-ticket-seam);
bottom: 18px;
left: -1px;
position: absolute;
top: 18px;
z-index: 3;
}
@media (max-width: 767px) {
.detail-ticket-card {
max-height: calc(100vh - 2rem);
width: min(100%, calc(100vw - 2.5rem));
}
#closeModalMobile {
right: 1rem;
top: 1rem;
}
.detail-ticket-image::before,
.detail-ticket-image::after {
display: none;
}
.detail-ticket-main::before {
display: block;
left: -14px;
top: -14px;
}
.detail-ticket-main::after {
display: block;
left: auto;
right: -14px;
top: -14px;
}
#closeModalMobile {
transform: translateZ(0);
}
#modalTime {
max-width: 100%;
}
#modalTime svg {
flex: 0 0 auto;
}
#modalInstagram:empty {
display: none;
}
.detail-ticket-seam {
border-left: 0;
border-top: 2px dashed var(--colour-ticket-seam);
bottom: auto;
left: 18px;
right: 18px;
top: -1px;
}
}
.detail-tone-0 .detail-main {
--selected-pill: var(--ticket-03-text);
--selected-pill-text: var(--ticket-03-bg);
--ticket-text: var(--ticket-03-text);
background: var(--ticket-03-bg);
color: var(--ticket-03-text);
}
.detail-tone-1 .detail-main {
--selected-pill: var(--ticket-05-text);
--selected-pill-text: var(--ticket-05-bg);
--ticket-text: var(--ticket-05-text);
background: var(--ticket-05-bg);
color: var(--ticket-05-text);
}
.detail-tone-2 .detail-main {
--selected-pill: var(--ticket-11-text);
--selected-pill-text: var(--ticket-11-bg);
--ticket-text: var(--ticket-11-text);
background: var(--ticket-11-bg);
color: var(--ticket-11-text);
}
.detail-tone-3 .detail-main {
--selected-pill: var(--ticket-16-text);
--selected-pill-text: var(--ticket-16-bg);
--ticket-text: var(--ticket-16-text);
background: var(--ticket-16-bg);
color: var(--ticket-16-text);
}
.detail-main {
background-position: 0 50%;
background-size: 140% 140%;
}
.ticket-description {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.place-card .ticket-description {
-webkit-line-clamp: 2;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.place-card .ticket-meta {
min-width: 0;
overflow: hidden;
}
.place-card .ticket-main,
.place-card .ticket-image-panel {
min-width: 0;
max-width: 100%;
}
.place-location-link {
max-width: 100%;
overflow: hidden;
color: inherit;
text-decoration: none;
white-space: nowrap;
}
.place-location-link span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.place-open-status {
display: inline-flex;
min-width: 0;
align-items: center;
gap: 0.38rem;
border: 1px solid rgba(17, 17, 17, 0.14);
border-radius: 999px;
background: #ffffff;
padding: 0.35rem 0.55rem;
color: #111111;
font-size: 0.78rem;
font-weight: 800;
line-height: 1;
}
.place-open-status[hidden] {
display: none;
}
.place-open-status-dot {
display: block;
width: 0.5rem;
min-width: 0.5rem;
max-width: 0.5rem;
height: 0.5rem;
min-height: 0.5rem;
max-height: 0.5rem;
flex: 0 0 0.5rem;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: #747474;
}
.place-open-status.is-open {
color: #111111;
}
.place-open-status.is-open .place-open-status-dot {
background: #0a8a47;
animation: place-open-status-pulse 1.8s ease-out infinite;
}
.place-open-status.is-closed {
color: #111111;
}
.place-open-status.is-closed .place-open-status-dot {
background: #c12b2b;
}
.place-open-status.is-detail-status {
width: fit-content;
padding: 0.65rem 0.8rem;
}
.shared-hero-place-status {
width: fit-content;
}
@keyframes place-open-status-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.42;
}
}
@media (prefers-reduced-motion: reduce) {
.place-open-status.is-open .place-open-status-dot {
animation: none;
}
}
.ticket-fine-print {
color: rgba(16, 16, 16, 0.42);
font-family: "Doto", "Rubik", ui-sans-serif, system-ui, sans-serif;
font-size: 0.5rem;
font-weight: 650;
letter-spacing: 0.14em;
line-height: 1;
pointer-events: none;
text-transform: uppercase;
}
.qr-open-btn {
appearance: none;
background: transparent;
border: 0;
border-radius: 0;
display: inline-flex;
padding: 0;
touch-action: manipulation;
}
.qr-open-btn:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
.qr-large {
display: block;
image-rendering: pixelated;
mix-blend-mode: normal;
object-fit: contain;
}
.ticket-qr {
display: block;
mix-blend-mode: normal;
object-fit: contain;
}
.ticket-logo-mark {
background: currentColor;
display: block;
height: 1.15rem;
opacity: 0.96;
pointer-events: none;
width: 4.25rem;
-webkit-mask: url("../../img/logo.svg") center / contain no-repeat;
mask: url("../../img/logo.svg") center / contain no-repeat;
}
@media (max-width: 767px) {
.ticket-card {
display: block;
width: 100%;
min-height: 0;
}
.ticket-image-panel {
aspect-ratio: 2 / 1;
display: block;
height: auto;
min-height: 0;
overflow: hidden;
width: 100%;
}
.ticket-image-panel::before,
.ticket-image-panel::after {
display: none;
}
.ticket-image-panel,
.ticket-image-panel .listing-image {
border-radius: 28px 28px 0 0;
}
.ticket-image-panel .listing-image {
min-height: 0;
}
.ticket-main {
border-left: 0;
border-radius: 0 0 28px 28px;
padding: 1.05rem;
}
.ticket-main::before {
display: block;
left: -13px;
top: -13px;
transform: none;
}
.ticket-main::after {
display: block;
left: auto;
right: -13px;
top: -13px;
}
.ticket-seam {
border-left: 0;
border-top: 2px dashed var(--colour-ticket-seam);
bottom: auto;
display: block;
left: 16px;
right: 16px;
top: -1px;
}
.ticket-date {
font-size: 0.78rem;
}
.ticket-qr {
height: 1.9rem;
width: 1.9rem;
}
.ticket-logo-mark {
height: 0.95rem;
width: 3.55rem;
}
.card-share-btn {
height: 2.25rem;
width: 2.25rem;
}
.mobile-controls-panel {
max-height: 0;
opacity: 0;
}
.mobile-controls-panel.is-open {
max-height: 520px;
opacity: 1;
}
.ticket-title {
font-size: 1.45rem;
line-height: 1;
}
.ticket-meta {
font-size: 0.78rem;
}
.ticket-description {
font-size: 0.9rem;
line-height: 1.55;
}
.ticket-actions {
padding-right: 2.5rem;
}
.interest-btn,
.going-btn {
font-size: 0.82rem;
padding: 0.62rem 0.8rem;
}
}
.listing-card.is-new {
animation: card-pop 360ms ease both;
}
@keyframes card-pop {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.float-card {
animation: float-card 5s ease-in-out infinite;
}
.float-card:nth-child(2) {
animation-delay: -1.6s;
}
.float-card:nth-child(3) {
animation-delay: -3.1s;
}
@keyframes float-card {
0%,
100% {
transform: translateY(0) rotate(var(--tw-rotate));
}
50% {
transform: translateY(-12px) rotate(var(--tw-rotate));
}
}
.interest-btn,
.going-btn,
#modalInterested,
#modalGoing {
touch-action: manipulation;
user-select: none;
}
.interest-btn,
.going-btn,
.share-btn,
.detail-btn,
.filter-btn {
transition: transform 160ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
}
.interest-btn:hover,
.going-btn:hover,
.share-btn:hover,
.detail-btn:hover,
.filter-btn:hover {
transform: translateY(-2px);
}
.button-pop {
animation: button-pop 260ms ease both;
}
@keyframes button-pop {
0% {
transform: scale(1);
}
45% {
transform: scale(1.08);
}
100% {
transform: scale(1);
}
}
.modal-panel {
animation: modal-in 220ms ease both;
}
.share-panel {
background: var(--colour-page);
box-shadow: none;
}
.share-panel-inner {
background: var(--colour-surface);
border: 1px solid rgba(8, 9, 109, 0.12);
}
.share-kicker {
color: var(--colour-focus);
letter-spacing: 0.02em;
}
.share-link-box {
background: var(--colour-surface-strong);
border: 1px dashed rgba(8, 9, 109, 0.18);
}
.share-action-primary {
background: var(--colour-share-primary-bg);
color: var(--colour-share-primary-text);
}
.share-action-secondary {
background: var(--colour-primary);
color: var(--colour-primary-text);
}
.share-action-ghost {
background: transparent;
border: 2px solid var(--colour-border-soft);
color: var(--colour-primary);
}
.share-canvas-frame {
box-shadow: none;
}
@keyframes modal-in {
0% {
opacity: 0;
transform: translateY(16px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.faq-panel {
max-height: 0;
overflow: hidden;
transition: max-height 260ms ease, opacity 220ms ease;
opacity: 0;
}
.faq-item.is-open .faq-panel {
opacity: 1;
}
.faq-icon {
transition: transform 220ms ease;
line-height: 1;
}
.faq-item.is-open .faq-icon {
transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.001ms !important;
}
.listing-card:hover,
.interest-btn:hover,
.going-btn:hover,
.share-btn:hover,
.detail-btn:hover,
.filter-btn:hover {
transform: none;
}
.buy-tickets-icon {
animation: none;
}
}
@media (max-width: 767px) {
#shareModal {
align-items: flex-start;
overflow-y: auto;
padding-top: max(1rem, env(safe-area-inset-top));
padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
#shareModal .modal-panel {
max-height: calc(100dvh - 2rem);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.is-ios-chrome #shareModal {
padding-top: max(5.5rem, calc(env(safe-area-inset-top) + 4rem));
padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
scroll-padding-top: max(5.5rem, calc(env(safe-area-inset-top) + 4rem));
}
.is-ios-chrome #shareModal .modal-panel {
max-height: calc(100dvh - 7rem);
}
}
@media (max-width: 1023px) {
.mobile-controls-panel {
max-height: 0;
opacity: 0;
}
.mobile-controls-panel.is-open {
max-height: 520px;
opacity: 1;
}
}
@media (max-width: 430px) {
.ticket-actions {
margin-top: auto;
}
}
.ticket-main,
.detail-main {
color: var(--ticket-text, inherit);
}
.ticket-main .ticket-description,
.ticket-main .ticket-meta,
.detail-main .ticket-description,
.detail-main .ticket-meta {
color: currentColor;
}
.listing-card,
.ticket-card,
.ticket-panel,
.card-share-btn,
.share-canvas-frame {
box-shadow: none;
}
.ticket-qr {
filter: var(--ticket-qr-filter, none);
mix-blend-mode: normal;
}
.ticket-main .interest-btn:not(.reaction-selected),
.ticket-main .going-btn:not(.reaction-selected) {
background: var(--colour-reaction-idle-bg);
color: currentColor;
}
.place-tag {
background: color-mix(in srgb, var(--ticket-text, currentColor) 13%, transparent);
color: var(--ticket-text, currentColor);
}
.ticket-actions {
align-items: center;
margin-top: auto;
padding-right: 5.25rem;
padding-top: 1.25rem;
}
@media (max-width: 767px) {
.ticket-actions {
padding-right: 4.5rem;
}
}
@media (max-width: 767px) {
.ticket-image-panel {
aspect-ratio: 2 / 1;
max-height: 15rem;
}
.ticket-image-panel .listing-image {
object-fit: cover;
object-position: center;
}
.ticket-main {
display: flex;
flex-direction: column;
gap: 0;
min-height: 12.25rem;
padding: 1.05rem 1.25rem 1.05rem;
}
.ticket-title {
font-size: clamp(1.5rem, 7.2vw, 1.85rem);
line-height: 0.94;
margin: 0;
}
.ticket-meta {
border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
column-gap: 0.55rem;
font-size: 0.92rem;
font-weight: 850;
margin: 0.5rem 0 0;
padding-bottom: 0.46rem;
row-gap: 0.38rem;
}
.ticket-main .ticket-meta.mt-4 {
margin-top: 0.5rem !important;
}
.ticket-meta > span::after {
display: none;
}
.ticket-description {
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
display: block;
display: -webkit-box;
font-size: 0.98rem;
font-weight: 500;
line-height: 1.38;
margin: 0.46rem 0 0;
overflow: hidden;
}
.ticket-main .ticket-description.mt-4 {
margin-top: 0.46rem !important;
}
.ticket-actions {
margin-top: auto;
padding-right: 0;
padding-top: 0.95rem;
}
.interest-btn,
.going-btn {
font-size: 0.9rem;
min-height: 2.45rem;
padding: 0.62rem 0.88rem;
}
.ticket-logo-mark {
display: none;
}
}
/* Public colour token bindings. Edit assets/css/colours.css to reskin these. */
body,
header,
#events,
#answers,
#submit,
footer {
background-color: var(--colour-page) !important;
color: var(--colour-page-text);
}
header nav {
background-color: transparent !important;
border-color: transparent;
color: var(--colour-page-text);
}
header nav a[href*="instagram"],
header nav a[data-contact-prompt] {
background-color: var(--colour-primary) !important;
color: var(--colour-primary-text) !important;
}
header nav a[href*="instagram"]:hover,
header nav a[data-contact-prompt]:hover {
background-color: var(--colour-primary-hover) !important;
color: var(--colour-primary-hover-text) !important;
}
#contactPromptModal {
background: rgba(36, 34, 35, 0.66) !important;
backdrop-filter: blur(2px);
}
body.contact-prompt-open {
overflow: hidden;
}
#events aside {
background-color: var(--colour-filter-panel-bg) !important;
color: var(--colour-filter-panel-text) !important;
}
#events aside input,
#events aside select {
background-color: var(--colour-filter-input-bg) !important;
color: var(--colour-filter-panel-text) !important;
}
#events aside input::placeholder {
color: color-mix(in srgb, var(--colour-filter-panel-text) 48%, transparent);
}
#events .controls-toggle,
#events a[data-contact-prompt],
.filter-btn.is-active-filter {
background-color: var(--colour-filter-active-bg) !important;
color: var(--colour-filter-active-text) !important;
}
.filter-btn:not(.is-active-filter) {
background-color: var(--colour-filter-pill-bg) !important;
color: var(--colour-filter-pill-text) !important;
}
.count-card-events {
background-color: var(--colour-count-events-bg) !important;
color: var(--colour-count-events-text) !important;
}
.count-card-offers {
background-color: var(--colour-count-offers-bg) !important;
color: var(--colour-count-offers-text) !important;
}
.count-card-venues {
background-color: var(--colour-count-venues-bg) !important;
color: var(--colour-count-venues-text) !important;
}
#answers > div {
background-color: var(--colour-faq-bg) !important;
color: var(--colour-faq-text) !important;
}
#answers .faq-item {
background-color: var(--colour-faq-item-bg) !important;
color: var(--colour-faq-item-text) !important;
}
#answers .faq-icon {
background-color: var(--colour-faq-item-text) !important;
color: var(--colour-faq-item-bg) !important;
}
footer > div:first-child {
background-color: var(--colour-footer-bg) !important;
color: var(--colour-footer-text) !important;
}
footer > div:first-child a:hover {
color: var(--colour-footer-hover) !important;
}
footer a[href*="instagram"]:hover,
footer a[data-contact-prompt]:hover {
background-color: var(--colour-footer-text) !important;
color: var(--colour-footer-bg) !important;
}
/* Shared-link detail popup tightening */
#detailModal .detail-ticket-main {
min-height: 100%;
}
#detailModal .detail-main {
gap: 0;
}
#detailModal .detail-main > .mb-5 {
margin-bottom: 1rem;
}
#detailModal #modalTitle {
margin-top: 0;
}
#detailModal #modalVenue {
margin-top: 1.15rem;
}
#detailModal #modalDescription {
margin-top: 1.1rem;
}
#detailModal #modalReactionPanel {
align-items: flex-end;
}
#detailModal #modalShare {
padding: 0;
}
#detailModal #modalQrButton,
#detailModal #modalFinePrint {
display: none !important;
}
.share-panel {
background: var(--colour-share-panel-bg);
}
.share-panel-inner {
background:
linear-gradient(135deg, color-mix(in srgb, var(--colour-share-card-bg) 88%, white 12%), var(--colour-surface));
border-color: color-mix(in srgb, var(--colour-primary) 14%, transparent);
}
.share-action,
.share-action-icon {
align-items: center;
display: inline-flex;
justify-content: center;
gap: 0.6rem;
min-height: 3.15rem;
touch-action: manipulation;
transition:
background-color 180ms ease,
color 180ms ease,
opacity 180ms ease,
transform 180ms ease;
user-select: none;
}
.share-action:hover,
.share-action-icon:hover {
transform: translateY(-1px);
}
.share-action:active,
.share-action-icon:active {
transform: translateY(0) scale(0.985);
}
.share-action svg,
.share-action-icon svg {
flex: 0 0 auto;
}
.share-action-icon {
aspect-ratio: 1;
padding: 0;
}
.share-action-primary.is-copied {
background: var(--colour-primary);
color: var(--colour-primary-text);
}
.share-action-secondary.is-copied {
background: var(--colour-share-primary-bg);
color: var(--colour-share-primary-text);
}
.share-action [data-copy-label],
.share-action [data-share-label] {
animation: share-label-in 180ms ease both;
}
.share-action-icon.is-working svg {
animation: share-spin 700ms ease both;
}
@keyframes share-label-in {
0% {
opacity: 0;
transform: translateY(0.25rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes share-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
/* Final share modal treatment */
#shareModal {
background-color: rgba(17, 17, 17, 0.95);
backdrop-filter: blur(2px);
}
#shareModal .share-panel {
background: var(--colour-ticket-cutout, var(--colour-page));
border: 0;
box-shadow: none;
}
#shareModal .share-panel-inner {
background:
radial-gradient(circle at 0 52%, var(--colour-ticket-cutout, var(--colour-page)) 0 14px, transparent 15px),
radial-gradient(circle at 100% 52%, var(--colour-ticket-cutout, var(--colour-page)) 0 14px, transparent 15px),
var(--colour-share-card-bg);
border: 0;
border-radius: 26px;
color: var(--colour-page-text);
overflow: hidden;
position: relative;
}
#shareModal .share-panel-inner::before {
background-image: linear-gradient(to right, rgba(17, 17, 17, 0.2) 45%, transparent 45%);
background-size: 14px 1px;
content: "";
height: 1px;
left: 0;
opacity: 0.8;
position: absolute;
right: 0;
top: 52%;
}
#shareModal .share-link-box {
background: color-mix(in srgb, var(--colour-page) 78%, white 22%);
border: 1px solid color-mix(in srgb, var(--colour-page-text) 10%, transparent);
}
#shareModal #shareLink {
color: var(--colour-page-text);
}
#shareModal .share-copy-icon {
align-items: center;
aspect-ratio: 1;
background: var(--colour-primary);
color: var(--colour-primary-text);
display: inline-flex;
flex: 0 0 2.75rem;
justify-content: center;
touch-action: manipulation;
transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
#shareModal .share-copy-icon:hover,
#shareModal .share-action:hover,
#shareModal .share-action-icon:hover {
transform: translateY(-1px);
}
#shareModal .share-copy-icon:active,
#shareModal .share-action:active,
#shareModal .share-action-icon:active {
transform: scale(0.97);
}
#shareModal .share-copy-icon.is-copied {
background: var(--colour-share-primary-bg);
color: var(--colour-share-primary-text);
}
#shareModal .share-action-secondary {
background: var(--colour-primary);
color: var(--colour-primary-text);
}
#shareModal .share-action-ghost {
background: color-mix(in srgb, var(--colour-page) 65%, white 35%);
border: 0;
color: var(--colour-primary);
}
#shareModal .share-action-icon.is-working svg {
animation: share-spin-half 360ms ease both;
}
#shareModal .share-colour-options-wrap {
border-radius: 12px;
max-width: 100%;
min-width: 0;
overflow: hidden;
position: relative;
width: 100%;
}
#shareModal .share-colour-options-wrap::after {
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.98));
border-radius: 0 12px 12px 0;
bottom: 1px;
content: "";
opacity: 0;
pointer-events: none;
position: absolute;
right: 1px;
top: 1px;
transition: opacity 160ms ease;
width: 3rem;
}
#shareModal .share-colour-options-wrap.has-more::after {
opacity: 1;
}
#shareModal .share-colour-options {
background: rgba(255, 255, 255, 0.78);
border: 1px solid color-mix(in srgb, var(--colour-primary) 12%, transparent);
border-radius: 12px;
display: flex;
gap: 0.65rem;
max-width: 100%;
min-width: 0;
overflow-x: auto;
overscroll-behavior-x: contain;
padding: 0.55rem 0;
scrollbar-color: color-mix(in srgb, var(--colour-primary) 34%, transparent) transparent;
scrollbar-width: thin;
touch-action: pan-x;
-webkit-overflow-scrolling: touch;
width: 100%;
}
#shareModal .share-panel,
#shareModal .share-panel-inner,
#shareModal .share-panel-inner > div {
min-width: 0;
}
#shareModal .share-colour-options.is-dragging {
cursor: grabbing;
user-select: none;
}
#shareModal .share-colour-options::-webkit-scrollbar {
height: 5px;
}
#shareModal .share-colour-options::-webkit-scrollbar-track {
background: transparent;
}
#shareModal .share-colour-options::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--colour-primary) 34%, transparent);
border-radius: 9999px;
}
#shareModal .share-colour-option {
align-items: center;
background: var(--share-swatch-outer);
border: 2px solid rgba(255, 255, 255, 0.9);
border-radius: 9999px;
display: inline-flex;
flex: 0 0 2.5rem;
height: 2.5rem;
justify-content: center;
padding: 0;
transition: box-shadow 160ms ease, transform 160ms ease;
}
#shareModal .share-colour-option:first-child {
margin-left: 0.9rem;
}
#shareModal .share-colour-option:last-child {
margin-right: 0.9rem;
}
#shareModal .share-colour-option span {
background: var(--share-swatch-inner);
border-radius: 9999px;
height: 1rem;
width: 1rem;
}
#shareModal .share-colour-option:hover {
transform: translateY(-1px);
}
#shareModal .share-colour-option.is-selected {
box-shadow:
inset 0 0 0 3px var(--colour-primary),
0 0 0 1px var(--colour-primary);
}
#shareModal .share-colour-option:focus-visible {
box-shadow:
inset 0 0 0 3px var(--colour-focus),
0 0 0 1px var(--colour-focus);
outline: none;
}
@keyframes share-spin-half {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
/* Match share modal to the clicked ticket */
#shareModal .share-panel-inner {
background:
radial-gradient(circle at 0 52%, var(--colour-ticket-cutout, var(--colour-page)) 0 14px, transparent 15px),
radial-gradient(circle at 100% 52%, var(--colour-ticket-cutout, var(--colour-page)) 0 14px, transparent 15px),
var(--share-ticket-bg, var(--colour-share-card-bg));
color: var(--share-ticket-text, var(--colour-page-text));
}
#shareModal .share-panel-inner::before {
display: none;
}
#shareModal .share-kicker,
#shareModal #shareTitle,
#shareModal #shareText,
#shareModal #shareLink {
color: var(--share-ticket-text, var(--colour-page-text));
}
#shareModal .share-close,
#shareModal .share-copy-icon,
#shareModal .share-action-secondary {
background: var(--share-ticket-text, var(--colour-primary));
color: var(--share-ticket-bg, var(--colour-primary-text));
}
#shareModal .share-link-box,
#shareModal .share-action-ghost {
background: color-mix(in srgb, var(--share-ticket-text, var(--colour-page-text)) 10%, var(--share-ticket-bg, var(--colour-share-card-bg)) 90%);
color: var(--share-ticket-text, var(--colour-page-text));
}
#shareModal .share-copy-icon.is-copied,
#shareModal .share-action-secondary.is-copied {
background: color-mix(in srgb, var(--share-ticket-text, var(--colour-primary)) 78%, white 22%);
color: var(--share-ticket-bg, var(--colour-primary-text));
}
#shareModal .share-close-icon {
display: none;
}
@media (max-width: 767px) {
#shareModal {
padding-inline: 0.75rem;
}
#shareModal .share-panel {
border-radius: 28px;
max-width: min(100%, 25rem);
padding: 0.65rem;
}
#shareModal .share-panel-inner {
background:
radial-gradient(circle at 0 66%, var(--colour-ticket-cutout, var(--colour-page)) 0 13px, transparent 14px),
radial-gradient(circle at 100% 66%, var(--colour-ticket-cutout, var(--colour-page)) 0 13px, transparent 14px),
var(--share-ticket-bg, var(--colour-share-card-bg));
border-radius: 24px;
gap: 1rem;
padding: 1.35rem 1.75rem 1.5rem;
}
#shareModal .share-panel-inner > div:first-child {
min-width: 0;
}
#shareModal .share-kicker {
font-size: 0.72rem;
}
#shareModal #shareTitle {
font-size: clamp(2rem, 10vw, 2.75rem);
}
#shareModal #shareText {
margin-top: 0.65rem;
}
#shareModal .share-close {
align-items: center;
aspect-ratio: 1;
display: inline-flex;
flex: 0 0 2.65rem;
justify-content: center;
padding: 0;
}
#shareModal .share-close-text {
display: none;
}
#shareModal .share-close-icon {
display: block;
}
#shareModal .share-link-box {
gap: 0.35rem;
margin-top: 0.85rem;
padding: 0.35rem;
}
#shareModal #shareLink {
font-size: 0.78rem;
padding: 0.65rem 0.75rem;
}
#shareModal .share-copy-icon {
flex-basis: 2.35rem;
}
#shareModal .share-action,
#shareModal .share-action-icon {
min-height: 2.7rem;
}
#shareModal .share-action-secondary {
padding: 0.7rem 1rem;
}
#shareModal .share-canvas-frame {
max-width: min(12.25rem, 64vw);
padding: 0.4rem;
}
}
@media (max-width: 767px) {
#shareModal .share-panel-inner > div:first-child > .flex:first-child {
align-items: flex-start;
display: grid;
gap: 0.75rem;
grid-template-columns: minmax(0, 1fr) 2.65rem;
}
#shareModal .share-panel-inner > div:first-child > .flex:first-child > div:first-child {
min-width: 0;
}
#shareModal #shareTitle {
max-width: 100%;
overflow-wrap: anywhere;
word-break: normal;
}
#shareModal #shareText {
overflow-wrap: anywhere;
}
#shareModal .share-close {
position: sticky;
top: 0;
z-index: 3;
}
#shareModal #shareLink {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#shareModal .share-canvas-frame {
max-width: min(14rem, 72vw);
}
}
@media (max-width: 767px) {
#shareModal .share-close {
flex-basis: 2.35rem;
height: 2.35rem;
min-height: 2.35rem;
width: 2.35rem;
}
#shareModal .share-close-icon {
height: 1.15rem;
width: 1.15rem;
}
#shareModal .share-panel-inner > div:first-child > .flex:first-child {
grid-template-columns: minmax(0, 1fr) 2.35rem;
}
}
@media (max-width: 767px) {
#shareModal #shareTitle {
font-size: clamp(1.65rem, 8.2vw, 2.25rem);
line-height: 0.98;
}
}
/* Share popup header and mobile scale refinements */
#shareModal {
background-color: rgba(17, 17, 17, 0.78);
backdrop-filter: blur(2px);
}
#shareModal .share-kicker {
background: color-mix(in srgb, var(--share-ticket-text, var(--colour-page-text)) 10%, var(--share-ticket-bg, var(--colour-share-card-bg)) 90%);
min-height: 2.5rem;
}
#shareModal .share-close {
min-height: 2.5rem;
}
@media (max-width: 767px) {
#shareModal {
background-color: rgba(17, 17, 17, 0.78);
}
#shareModal .share-header {
display: flex;
}
#shareModal .share-kicker {
font-size: 0.66rem;
min-height: 2.15rem;
padding: 0.45rem 0.8rem;
}
#shareModal .share-close {
flex: 0 0 2.1rem;
height: 2.1rem;
min-height: 2.1rem;
padding: 0;
position: static;
width: 2.1rem;
}
#shareModal .share-close-icon {
height: 1rem;
width: 1rem;
}
#shareModal #shareTitle {
font-size: clamp(1.45rem, 7.4vw, 2rem);
line-height: 0.98;
margin-top: 0.75rem;
}
#shareModal .share-link-box {
padding: 0.25rem;
}
#shareModal #shareLink {
padding-block: 0.55rem;
}
#shareModal .share-copy-icon {
flex-basis: 2.1rem;
}
#shareModal .share-action,
#shareModal .share-action-icon {
min-height: 2.4rem;
}
#shareModal .share-action-secondary {
padding: 0.55rem 0.85rem;
}
#shareModal .share-canvas-frame {
max-width: min(15rem, 78vw);
}
}
#shareModal .share-copy-icon .copy-icon,
#shareModal .share-copy-icon .copy-success-icon {
transition: opacity 160ms ease, transform 160ms ease;
}
#shareModal .share-copy-icon.is-copied .copy-icon {
display: none;
}
#shareModal .share-copy-icon.is-copied .copy-success-icon {
animation: copy-success-pop 220ms ease both;
display: block;
}
@keyframes copy-success-pop {
0% {
opacity: 0;
transform: scale(0.7) rotate(-8deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
#shareModal .share-kicker {
flex: 0 0 auto;
justify-self: start;
width: max-content;
}
#shareModal .share-canvas-frame {
transition: opacity 220ms ease, transform 220ms ease;
}
#shareModal .share-canvas-frame.is-changing {
opacity: 0.42;
transform: scale(0.985);
}
#shareModal .share-canvas-frame {
position: relative;
}
#shareModal .share-canvas-frame.is-changing {
opacity: 1;
transform: none;
}
#shareModal .share-preview-fade-layer {
border-radius: inherit;
display: block;
inset: 0.4rem;
opacity: 1;
pointer-events: none;
position: absolute;
transition: opacity 240ms ease;
width: calc(100% - 0.8rem);
z-index: 2;
}
#shareModal .share-preview-fade-layer.is-hiding {
opacity: 0;
}
@media (min-width: 768px) {
#shareModal .share-panel-inner {
background:
radial-gradient(circle at calc(100% - 280px - 1.25rem) 0, var(--colour-ticket-cutout, var(--colour-page)) 0 14px, transparent 15px),
radial-gradient(circle at calc(100% - 280px - 1.25rem) 100%, var(--colour-ticket-cutout, var(--colour-page)) 0 14px, transparent 15px),
var(--share-ticket-bg, var(--colour-share-card-bg));
}
}
@media (max-width: 767px) {
#shareModal .share-panel-inner {
background:
radial-gradient(circle at 0 66%, var(--colour-ticket-cutout, var(--colour-page)) 0 13px, transparent 14px),
radial-gradient(circle at 100% 66%, var(--colour-ticket-cutout, var(--colour-page)) 0 13px, transparent 14px),
var(--share-ticket-bg, var(--colour-share-card-bg));
}
}
#shareModal .share-canvas-frame,
#shareModal .share-canvas-frame.is-changing,
#shareModal .share-canvas-frame:hover,
#shareModal .share-canvas-frame:active {
transform: none !important;
}
#shareModal .share-canvas-frame {
transition: opacity 220ms ease !important;
}
@media (min-width: 768px) {
#shareModal .share-panel-inner {
--share-preview-col: 280px;
--share-grid-gap: 1.25rem;
--share-cutout-x: calc((100% - var(--share-preview-col) - var(--share-grid-gap)) / 2 + var(--share-grid-gap) / 2);
background:
radial-gradient(circle at var(--share-cutout-x) 0, var(--colour-ticket-cutout, var(--colour-page)) 0 14px, transparent 15px),
radial-gradient(circle at var(--share-cutout-x) 100%, var(--colour-ticket-cutout, var(--colour-page)) 0 14px, transparent 15px),
var(--share-ticket-bg, var(--colour-share-card-bg));
}
}
#shareModal .share-canvas-frame,
#shareModal .share-canvas-frame *,
#shareModal .share-canvas-frame.is-changing,
#shareModal .share-canvas-frame.is-changing * {
transform: none !important;
}
#shareModal .share-canvas-frame,
#shareModal .share-canvas-frame canvas {
animation: none !important;
}
#shareModal .share-preview-fade-layer,
#shareModal .share-preview-fade-layer.is-hiding {
transform: none !important;
}
#shareModal .share-link-box {
overflow: hidden;
position: relative;
}
#shareModal .share-link-box::after {
background: linear-gradient(to right, transparent, color-mix(in srgb, var(--share-ticket-text, var(--colour-page-text)) 10%, var(--share-ticket-bg, var(--colour-share-card-bg)) 90%) 72%);
bottom: 0.35rem;
content: "";
pointer-events: none;
position: absolute;
right: 3rem;
top: 0.35rem;
width: 2.25rem;
z-index: 1;
}
#shareModal .share-copy-icon {
position: relative;
z-index: 2;
}
#shareModal #shareLink {
text-overflow: clip;
}
.shared-related-ticket .shared-related-ticket-main {
aspect-ratio: 1.14 / 1;
border-radius: 26px !important;
min-height: 12.25rem;
padding: 1rem;
}
.shared-related-ticket .shared-related-ticket-main::before,
.shared-related-ticket .shared-related-ticket-main::after {
background: var(--colour-page) !important;
border-radius: 999px;
display: block !important;
height: 24px;
top: 50% !important;
transform: translateY(-50%) !important;
width: 24px;
}
.shared-related-ticket .shared-related-ticket-main::before {
bottom: auto !important;
left: -12px !important;
right: auto !important;
}
.shared-related-ticket .shared-related-ticket-main::after {
bottom: auto !important;
left: auto !important;
right: -12px !important;
}
.shared-related-ticket .ticket-seam {
display: none;
}
.shared-related-title {
font-size: clamp(1.22rem, 6.4vw, 1.55rem);
-webkit-line-clamp: 2;
}
.shared-related-description {
font-size: 0.82rem;
-webkit-line-clamp: 2;
}
@media (min-width: 768px) {
.shared-related-scroll {
gap: 1.65rem;
}
.shared-related-ticket .shared-related-ticket-main {
aspect-ratio: 1.08 / 1;
min-height: 11.75rem;
}
.shared-related-title {
font-size: clamp(1.12rem, 1.55vw, 1.35rem);
}
}
/* Shared listing hero: keep busy artwork readable without covering the whole image. */
@media (min-width: 768px) {
.shared-listing-page .shared-hero-shade {
background:
linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.18) 48%, rgba(0, 0, 0, 0.02) 74%),
linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18));
}
.shared-listing-page .shared-hero-content {
backdrop-filter: blur(16px) saturate(0.9);
background: rgba(8, 8, 10, 0.82);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 22px;
bottom: 1.25rem !important;
display: block;
left: 1.25rem !important;
max-width: min(36rem, calc(100% - 2.5rem));
min-width: 0;
overflow: hidden;
padding: 1.15rem 1.25rem !important;
right: auto !important;
}
.shared-listing-page .shared-hero-kicker {
font-size: 0.68rem;
opacity: 0.78;
}
.shared-listing-page .shared-hero-place {
margin-top: 0.65rem !important;
}
.shared-listing-page .shared-hero-date {
display: inline-block;
margin-left: 0.7rem;
margin-top: 0.65rem !important;
}
.shared-listing-page .shared-hero-title {
font-size: clamp(2rem, 3.45vw, 3.15rem);
hyphens: auto;
line-height: 0.96;
margin-top: 0.72rem;
max-width: 100%;
overflow-wrap: anywhere;
text-wrap: balance;
word-break: normal;
}
.shared-listing-page .shared-hero-description {
font-size: 0.96rem;
line-height: 1.4;
margin-top: 0.65rem;
}
.shared-listing-page .shared-hero-actions {
gap: 0.55rem;
margin-top: 0.9rem !important;
}
.shared-listing-page .shared-hero-actions .buy-tickets-btn,
.shared-listing-page .shared-hero-reaction {
min-height: 2.55rem;
padding: 0.52rem 0.9rem;
}
}
@media (max-width: 767px) {
.shared-listing-page .shared-ticket-image > .absolute.right-4.top-4 {
gap: 0.42rem;
right: 0.75rem;
top: 0.75rem;
}
.shared-listing-page .shared-ticket-image .card-share-btn {
height: 2.35rem;
width: 2.35rem;
}
.shared-listing-page .shared-hero-badge {
left: 0.75rem;
padding: 0.52rem 0.72rem;
top: 0.75rem;
}
.shared-listing-page .shared-mobile-ticket-row {
display: block !important;
margin: 0.1rem 0 0 !important;
padding: 0 0.55rem;
position: relative;
z-index: 12;
}
.shared-listing-page .shared-mobile-ticket-cta {
background: #111 !important;
border: 1px solid rgba(255, 255, 255, 0.72);
box-shadow: 0 0 0 2px #111;
color: #fff !important;
min-height: 2.85rem;
width: 100%;
}
.shared-listing-page .shared-mobile-summary {
margin-top: 0 !important;
padding-top: 1.2rem !important;
}
.shared-listing-page .shared-mobile-actions {
margin-top: 0.85rem;
}
}
.shared-listing-page .shared-detail-reaction {
align-items: center;
background: color-mix(in srgb, var(--colour-primary) 8%, white) !important;
border: 0;
border-radius: 16px;
color: var(--colour-primary) !important;
display: flex;
gap: 0.6rem;
justify-content: center;
min-height: 3.65rem;
padding: 0.65rem 0.7rem;
width: 100%;
}
.shared-listing-page .shared-detail-reaction > span {
align-items: flex-start;
display: flex;
flex-direction: column;
line-height: 1;
}
.shared-listing-page .shared-detail-reaction strong {
font-size: 1rem;
font-weight: 950;
}
.shared-listing-page .shared-detail-reaction small {
font-size: 0.67rem;
font-weight: 800;
margin-top: 0.24rem;
opacity: 0.7;
}
.shared-listing-page .shared-detail-reaction.reaction-selected {
background: var(--colour-primary) !important;
color: var(--colour-primary-contrast, #fff) !important;
}
.shared-listing-page .shared-about-header {
align-items: center;
display: flex;
gap: 1rem;
justify-content: space-between;
}
.shared-listing-page .shared-about-like-wrap {
flex: 0 0 auto;
}
.shared-listing-page .shared-about-like {
border-radius: 999px;
gap: 0.45rem;
min-height: 2.35rem;
padding: 0.45rem 0.8rem;
width: auto;
}
.shared-listing-page .shared-about-like > span {
align-items: center;
flex-direction: row;
}
.shared-listing-page .shared-hero-meta {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 0.45rem 0.9rem;
margin-top: 0.7rem;
}
.shared-listing-page .shared-hero-meta .shared-hero-place,
.shared-listing-page .shared-hero-meta .shared-hero-date {
margin: 0 !important;
}
.shared-listing-page .shared-page-back {
transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.shared-listing-page .shared-page-back svg {
transition: transform 180ms ease;
}
.shared-listing-page .shared-page-back:hover,
.shared-listing-page .shared-page-back:focus-visible {
background: color-mix(in srgb, var(--colour-primary) 10%, var(--colour-surface));
transform: translateX(-3px);
}
.shared-listing-page .shared-page-back:hover svg,
.shared-listing-page .shared-page-back:focus-visible svg {
transform: translateX(-2px);
}
.shared-listing-page .shared-detail-reactions .interest-btn {
flex: 0 0 auto;
padding-inline: 1rem;
width: auto;
}
.shared-listing-page .shared-detail-reactions .going-btn {
flex: 1 1 auto;
min-width: 0;
width: auto;
}
@media (min-width: 768px) {
.shared-listing-page .shared-hero-content {
backdrop-filter: blur(18px) saturate(0.92);
background: rgba(8, 8, 10, 0.64);
}
}
@keyframes cookie-accept-attention {
0%,
100% {
box-shadow: 0 0 0 0 rgba(215, 255, 23, 0);
filter: brightness(1);
transform: scale(1);
}
15%,
45%,
75% {
box-shadow: 0 0 0 7px rgba(215, 255, 23, 0.3);
filter: brightness(1.16);
transform: scale(1.07);
}
30%,
60%,
90% {
box-shadow: 0 0 0 2px rgba(215, 255, 23, 0.08);
filter: brightness(1);
transform: scale(1);
}
}
#acceptCookies.cookie-accept-attention {
animation: cookie-accept-attention 1.25s ease-in-out;
transform-origin: center;
}
.filter-sheet-trigger,
.mobile-sort-trigger {
align-items: center;
background: var(--colour-filter-panel-bg);
border: 1px solid color-mix(in srgb, var(--colour-filter-panel-text) 16%, transparent);
border-radius: 999px;
color: var(--colour-filter-panel-text);
display: inline-flex;
font-size: 0.875rem;
font-weight: 800;
gap: 0.35rem;
justify-content: center;
min-height: 2.65rem;
padding: 0.65rem 1rem;
}
.mobile-list-controls {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.mobile-sort-trigger {
cursor: pointer;
position: relative;
}
.mobile-sort-input {
appearance: none;
cursor: pointer;
inset: 0;
opacity: 0;
position: absolute;
width: 100%;
}
.filter-sheet-trigger svg,
.mobile-sort-trigger svg {
height: 1.1rem;
transition: transform 180ms ease;
width: 1.1rem;
}
.filter-sheet-trigger[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.filter-sheet {
inset: 0;
pointer-events: none;
position: fixed;
transition: visibility 0s linear 460ms;
visibility: hidden;
z-index: 90;
}
.filter-sheet-backdrop {
background: rgba(17, 17, 17, 0.34);
border: 0;
inset: 0;
opacity: 0;
position: absolute;
transition: opacity 420ms ease;
width: 100%;
}
.filter-sheet-panel {
background: var(--colour-surface, #fff);
border-radius: 2rem 2rem 0 0;
bottom: 0;
box-shadow: 0 -18px 50px rgba(17, 17, 17, 0.18);
color: var(--colour-page-text, #111);
display: flex;
flex-direction: column;
height: auto;
left: 0;
max-height: calc(100dvh - max(0.75rem, env(safe-area-inset-top)));
max-width: 100%;
min-height: 0;
min-width: 0;
overflow: hidden;
position: absolute;
right: 0;
transform: translateY(105%);
transition: transform 460ms cubic-bezier(0.22, 0.82, 0.28, 1);
}
.filter-sheet.is-open {
pointer-events: auto;
transition-delay: 0s;
visibility: visible;
}
.filter-sheet.is-open .filter-sheet-backdrop {
opacity: 1;
}
.filter-sheet.is-open .filter-sheet-panel {
transform: translateY(0);
}
body.filter-sheet-open {
overflow: hidden;
}
.filter-sheet-header {
display: block;
flex: 0 0 auto;
min-width: 0;
padding: 1rem 3.5rem 0.2rem 1.35rem;
position: relative;
}
.filter-sheet-header > div {
max-width: 100%;
min-width: 0;
}
.filter-sheet-header h2 {
font-family: var(--font-display, inherit);
font-size: clamp(1.65rem, 8vw, 2.25rem);
line-height: 1;
margin: 0;
max-width: 100%;
overflow-wrap: anywhere;
}
.filter-sheet-close {
align-items: center;
appearance: none;
background: transparent;
border: 0;
border-radius: 0;
color: var(--colour-page-text, #111);
cursor: pointer;
display: inline-flex;
flex: 0 0 auto;
height: 1.5rem;
justify-content: center;
line-height: 0;
padding: 0;
position: absolute;
right: 1rem;
top: 1rem;
width: 1.5rem;
}
.filter-sheet-close svg {
height: 1.5rem;
width: 1.5rem;
}
.filter-sheet-scroll {
flex: 0 1 auto;
max-width: 100%;
min-height: 0;
min-width: 0;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
padding: 0.55rem 1.35rem 1.25rem;
scrollbar-gutter: stable;
-webkit-overflow-scrolling: touch;
}
.filter-sheet-options {
align-content: flex-start;
display: flex;
flex-wrap: wrap;
gap: 0.7rem 0.55rem;
max-width: 100%;
min-width: 0;
width: 100%;
}
.filter-sheet-options.hidden {
display: none !important;
}
.filter-sheet-options .filter-btn {
background: var(--colour-surface) !important;
border: 1.5px solid var(--colour-primary) !important;
border-radius: 999px;
color: var(--colour-primary) !important;
flex: 0 0 auto;
font-size: 0.9rem;
font-weight: 750;
line-height: 1.1;
min-height: 2.65rem;
max-width: 100%;
min-width: 0;
overflow-wrap: anywhere;
padding: 0.7rem 1rem;
white-space: normal;
word-break: break-word;
}
.filter-sheet-options .filter-btn.is-active-filter {
background: var(--colour-primary) !important;
border-color: var(--colour-primary) !important;
color: var(--colour-primary-text) !important;
}
.filter-sheet-footer {
align-items: center;
border-top: 1px solid color-mix(in srgb, var(--colour-page-text, #111) 11%, transparent);
display: flex;
flex: 0 0 auto;
gap: 1rem;
justify-content: space-between;
max-width: 100%;
min-width: 0;
padding: 1rem max(1.35rem, env(safe-area-inset-right))
calc(1rem + env(safe-area-inset-bottom))
max(1.35rem, env(safe-area-inset-left));
}
.filter-sheet-logo {
background: currentColor;
color: var(--colour-primary);
height: 1.35rem;
opacity: 0.72;
width: 4.6rem;
-webkit-mask: url("../../img/logo.svg") left center / contain no-repeat;
mask: url("../../img/logo.svg") left center / contain no-repeat;
}
.filter-sheet-results {
background: var(--colour-filter-active-bg);
border-radius: 0.85rem;
color: var(--colour-filter-active-text);
font-size: 0.9rem;
font-weight: 900;
min-height: 3rem;
max-width: 100%;
padding: 0.8rem 1.15rem;
}
@media (max-width: 320px) {
.filter-sheet-panel {
border-radius: 1.5rem 1.5rem 0 0;
}
.filter-sheet-header {
padding: 1rem 3.25rem 0.2rem 1rem;
}
.filter-sheet-scroll {
padding-inline: 1rem;
}
.filter-sheet-options {
align-items: flex-start;
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: start;
}
.filter-sheet-options .filter-btn {
width: fit-content;
}
.filter-sheet-footer {
align-items: stretch;
flex-direction: column;
padding-inline: 1rem;
}
.filter-sheet-results {
order: 1;
width: 100%;
}
.filter-sheet-logo {
align-self: center;
background-position: center;
order: 2;
-webkit-mask-position: center;
mask-position: center;
}
}
@media (min-width: 1024px) {
.filter-sheet,
.filter-sheet-trigger,
.mobile-sort-trigger {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.filter-sheet-backdrop,
.filter-sheet-panel,
.filter-sheet-trigger svg {
transition-duration: 1ms;
}
#acceptCookies.cookie-accept-attention {
animation-duration: 1ms;
outline: 4px solid rgba(215, 255, 23, 0.55);
outline-offset: 3px;
}
}
/* Shared event/place pages: stronger ticket-led hierarchy. */
.shared-listing-page {
--shared-accent-bg: var(--ticket-03-bg);
--shared-accent-text: var(--ticket-03-text);
--shared-accent-pill: var(--shared-accent-text);
--shared-accent-surface: var(--shared-accent-bg);
--shared-accent-soft: var(--shared-accent-surface);
--shared-accent-mid: color-mix(in srgb, var(--shared-accent-pill) 22%, var(--shared-accent-surface));
--shared-accent-strong: var(--shared-accent-text);
--shared-accent-on-strong: #fff;
}
.shared-listing-page > div {
gap: clamp(0.9rem, 2vw, 1.3rem);
}
.shared-listing-page .shared-section-kicker,
.shared-listing-page .shared-mobile-title,
.shared-listing-page .shared-mobile-meta {
color: var(--shared-accent-text);
}
.shared-listing-page .shared-card-eyebrow {
color: var(--shared-accent-strong);
display: block;
font-size: 0.68rem;
font-weight: 950;
letter-spacing: 0;
line-height: 1;
margin-bottom: 0.4rem;
text-transform: uppercase;
}
.shared-listing-page .shared-card-title {
color: var(--shared-accent-strong);
font-size: clamp(1.05rem, 2vw, 1.25rem);
line-height: 1.05;
margin: 0;
}
.shared-listing-page .shared-about-card {
background: var(--shared-accent-soft);
border-color: color-mix(in srgb, var(--shared-accent-strong) 18%, transparent);
border-top-width: 1px;
}
.shared-listing-page .shared-facts-card {
background: var(--shared-accent-soft);
border-color: color-mix(in srgb, var(--shared-accent-strong) 18%, transparent);
}
.shared-listing-page .shared-facts-heading {
margin-bottom: 1rem;
}
.shared-listing-page .shared-facts-heading .shared-card-title {
margin-bottom: 0 !important;
}
.shared-listing-page .shared-fact-row {
border-bottom: 1px solid color-mix(in srgb, var(--shared-accent-strong) 20%, transparent);
color: var(--shared-accent-strong);
padding-bottom: 0.72rem;
}
.shared-listing-page .shared-fact-row:last-of-type {
border-bottom: 0;
padding-bottom: 0;
}
.shared-listing-page .shared-fact-icon {
color: var(--shared-accent-strong);
}
.shared-listing-page .shared-side-link {
background: var(--shared-accent-strong);
color: var(--shared-accent-on-strong);
}
.shared-listing-page .shared-change-note {
background: color-mix(in srgb, var(--shared-accent-pill) 22%, white);
border-color: color-mix(in srgb, var(--shared-accent-strong) 20%, transparent);
color: var(--shared-accent-strong);
}
.shared-listing-page .shared-good-to-know {
border-color: color-mix(in srgb, var(--shared-accent-strong) 20%, transparent);
color: var(--shared-accent-strong);
}
.shared-listing-page .shared-good-to-know > p,
.shared-listing-page .shared-facts-heading .shared-card-title,
.shared-listing-page .shared-about-header .shared-card-title {
color: var(--shared-accent-strong) !important;
}
.shared-listing-page .shared-good-icon {
background: var(--shared-accent-strong);
color: var(--shared-accent-on-strong);
}
.shared-listing-page .place-tag {
background: color-mix(in srgb, var(--shared-accent-pill) 24%, white);
color: var(--shared-accent-strong);
}
.shared-listing-page .shared-side-cta,
.shared-listing-page .shared-ticket-cta,
.shared-listing-page .shared-mobile-ticket-cta,
.shared-listing-page .shared-about-like {
background: var(--shared-accent-strong) !important;
color: var(--shared-accent-on-strong) !important;
}
.shared-listing-page .shared-side-cta:hover,
.shared-listing-page .shared-side-cta:focus-visible,
.shared-listing-page .shared-ticket-cta:hover,
.shared-listing-page .shared-ticket-cta:focus-visible,
.shared-listing-page .shared-mobile-ticket-cta:hover,
.shared-listing-page .shared-mobile-ticket-cta:focus-visible {
background: color-mix(in srgb, var(--shared-accent-strong) 86%, #000) !important;
color: var(--shared-accent-on-strong) !important;
}
.shared-listing-page .shared-side-cta-secondary {
background: transparent !important;
border-color: color-mix(in srgb, var(--shared-accent-strong) 42%, transparent);
color: var(--shared-accent-strong) !important;
}
.shared-listing-page .shared-side-cta-secondary:hover,
.shared-listing-page .shared-side-cta-secondary:focus-visible {
background: color-mix(in srgb, var(--shared-accent-pill) 18%, white) !important;
color: var(--shared-accent-strong) !important;
}
.shared-listing-page .shared-good-row p,
.shared-listing-page .shared-description-full {
color: color-mix(in srgb, var(--shared-accent-strong) 82%, #222);
}
.shared-listing-page .shared-page-back {
background: var(--shared-accent-soft);
color: var(--shared-accent-strong);
}
.shared-listing-page .shared-page-back:hover,
.shared-listing-page .shared-page-back:focus-visible {
background: var(--shared-accent-strong);
color: var(--shared-accent-on-strong);
}
@media (min-width: 768px) {
.shared-listing-page .shared-hero-content {
background: rgb(10 10 10 / 0.78);
border-color: rgb(255 255 255 / 0.2);
box-shadow: 0 18px 48px rgb(0 0 0 / 0.16);
}
.shared-listing-page .shared-hero-kicker {
color: white;
}
.shared-listing-page .shared-about-card,
.shared-listing-page .shared-facts-card {
border-radius: 24px;
}
}
@media (max-width: 767px) {
.shared-listing-page {
padding-top: 0.75rem;
}
.shared-listing-page > div {
gap: 0.78rem;
}
.shared-listing-page .shared-page-back {
background: transparent;
padding-left: 0.85rem;
padding-right: 0.85rem;
}
.shared-listing-page .shared-hero-card,
.shared-listing-page .shared-hero-media {
border-radius: 24px;
}
.shared-listing-page .shared-ticket-image::before,
.shared-listing-page .shared-ticket-image::after {
height: 24px;
width: 24px;
}
.shared-listing-page .shared-ticket-image::before {
left: -12px;
}
.shared-listing-page .shared-ticket-image::after {
right: -12px;
}
.shared-listing-page .shared-mobile-ticket-row {
margin: -0.15rem 0 -0.05rem !important;
padding-inline: 0.55rem;
}
.shared-listing-page .shared-mobile-ticket-cta {
background: var(--shared-accent-strong) !important;
border: 0;
box-shadow: none;
color: var(--shared-accent-on-strong) !important;
min-height: 3rem;
}
.shared-listing-page .shared-mobile-summary {
background: var(--shared-accent-bg);
border: 0;
border-radius: 24px;
color: var(--shared-accent-text);
overflow: hidden;
padding: 1.2rem 1.15rem 1.25rem !important;
position: relative;
}
.shared-listing-page .shared-mobile-summary::after {
content: none;
}
.shared-listing-page .shared-section-kicker {
background: color-mix(in srgb, var(--shared-accent-text) 12%, transparent);
border-radius: 999px;
display: inline-flex;
padding: 0.4rem 0.62rem;
}
.shared-listing-page .shared-mobile-title {
font-size: clamp(1.8rem, 9vw, 2.35rem);
line-height: 0.96;
margin-top: 0.65rem;
max-width: 14ch;
text-wrap: balance;
}
.shared-listing-page .shared-mobile-meta {
border-top: 1px solid color-mix(in srgb, var(--shared-accent-text) 20%, transparent);
column-gap: 0.7rem;
margin-top: 0.85rem;
padding-top: 0.75rem;
}
.shared-listing-page .shared-detail-grid {
gap: 0.78rem;
}
.shared-listing-page .shared-info-card {
border-radius: 24px;
padding: 1.2rem !important;
}
.shared-listing-page .shared-about-card {
border-left: 0;
border-top-width: 1px;
}
.shared-listing-page .shared-about-header {
align-items: flex-start;
}
.shared-listing-page .shared-description-full {
font-size: 0.95rem;
line-height: 1.58;
margin-top: 1rem;
}
.shared-listing-page .shared-change-note {
font-size: 0.78rem;
margin-top: 1rem;
padding: 0.85rem 0.9rem;
}
.shared-listing-page .shared-facts-list {
display: grid;
gap: 0.7rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.shared-listing-page .shared-fact-row {
align-content: center;
align-items: center;
background: color-mix(in srgb, var(--shared-accent-pill) 18%, white);
border: 1px solid color-mix(in srgb, var(--shared-accent-strong) 12%, transparent);
border-radius: 16px;
gap: 0.55rem;
grid-template-columns: 1rem minmax(0, 1fr);
line-height: 1.2;
min-height: 3.65rem;
padding: 0.8rem 0.85rem;
}
.shared-listing-page .shared-fact-icon {
margin-top: 0;
}
.shared-listing-page .shared-fact-row:nth-child(3) {
grid-column: 1 / -1;
}
.shared-listing-page .shared-side-link {
grid-column: 1 / -1;
min-height: 2.8rem;
}
.shared-listing-page .shared-facts-card > .mt-5.flex {
margin-top: 0.85rem;
}
.shared-listing-page .shared-side-cta {
min-height: 2.9rem;
}
.shared-listing-page .shared-good-to-know {
margin-top: 1rem;
}
.shared-listing-page .shared-good-row {
gap: 0.6rem;
grid-template-columns: 1.75rem minmax(0, 1fr);
}
.shared-listing-page .shared-good-icon {
height: 1.75rem;
width: 1.75rem;
}
.shared-listing-page .shared-about-like {
background: var(--shared-accent-strong) !important;
color: var(--shared-accent-on-strong) !important;
}
.shared-listing-page .shared-about-like.reaction-selected {
background: var(--shared-accent-strong) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--shared-accent-strong) 22%, transparent);
color: var(--shared-accent-on-strong) !important;
}
.shared-place-page .shared-facts-list {
grid-template-columns: 1fr;
}
.shared-place-page .shared-fact-row:nth-child(3) {
grid-column: auto;
}
}
/* Fixed shared page palette families: Ocean, Candy, Sunshine, Garden. */
.shared-listing-page .shared-about-card,
.shared-listing-page .shared-facts-card {
background: var(--shared-accent-surface);
color: var(--shared-accent-strong);
}
.shared-listing-page .shared-description-full,
.shared-listing-page .shared-good-row p {
color: color-mix(in srgb, var(--shared-accent-strong) 88%, #111);
}
.shared-listing-page .shared-fact-row {
color: var(--shared-accent-strong);
}
.shared-listing-page .shared-fact-row,
.shared-listing-page .shared-change-note,
.shared-listing-page .place-tag {
background: color-mix(in srgb, var(--shared-accent-pill) 18%, white);
}
.shared-listing-page .shared-good-icon,
.shared-listing-page .shared-side-link,
.shared-listing-page .shared-side-cta,
.shared-listing-page .shared-ticket-cta,
.shared-listing-page .shared-mobile-ticket-cta,
.shared-listing-page .shared-about-like {
background: var(--shared-accent-strong) !important;
color: var(--shared-accent-on-strong) !important;
}
.shared-listing-page .shared-side-cta-secondary {
background: transparent !important;
border-color: var(--shared-accent-pill);
color: var(--shared-accent-strong) !important;
}
.shared-listing-page .shared-side-cta-secondary:hover,
.shared-listing-page .shared-side-cta-secondary:focus-visible {
background: color-mix(in srgb, var(--shared-accent-pill) 22%, white) !important;
color: var(--shared-accent-strong) !important;
}
/* Stable shared detail spacing and facts layout polish. */
.shared-listing-page .shared-about-card {
min-height: 0;
}
.shared-listing-page .shared-about-header {
align-items: flex-start;
}
.shared-listing-page .shared-about-header > div {
min-width: 0;
}
.shared-listing-page .shared-about-like-wrap {
align-self: flex-start;
margin-top: 0;
}
.shared-listing-page .shared-about-like {
align-items: center;
line-height: 1;
margin-top: 0;
}
.shared-listing-page .shared-description-full {
margin: 0.72rem 0 0 !important;
}
.shared-listing-page .shared-facts-heading {
margin-bottom: 0.78rem;
}
.shared-listing-page .shared-facts-list {
display: grid !important;
gap: 0.72rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.shared-listing-page .shared-fact-row {
align-items: center !important;
background: color-mix(in srgb, var(--shared-accent-pill) 28%, white) !important;
border: 1px solid color-mix(in srgb, var(--shared-accent-strong) 16%, transparent) !important;
border-radius: 16px;
display: flex !important;
gap: 0.5rem !important;
line-height: 1.15;
min-height: 3.05rem;
padding: 0.68rem 0.82rem !important;
}
.shared-listing-page .shared-fact-row:nth-child(3),
.shared-place-page .shared-fact-row {
grid-column: 1 / -1;
}
.shared-listing-page .shared-fact-icon {
flex: 0 0 auto;
height: 1.05rem;
margin-top: 0 !important;
width: 1.05rem;
}
@media (max-width: 767px) {
.shared-listing-page .shared-about-header {
gap: 0.72rem;
}
.shared-listing-page .shared-about-like {
min-height: 2.25rem;
padding: 0.45rem 0.78rem;
}
.shared-listing-page .shared-description-full {
margin-top: 0.58rem !important;
}
.shared-listing-page .shared-facts-heading {
margin-bottom: 0.65rem;
}
.shared-listing-page .shared-facts-list {
gap: 0.62rem;
}
.shared-listing-page .shared-fact-row {
min-height: 2.95rem;
padding: 0.62rem 0.72rem !important;
}
}
/* Shared page CTA width and compact about-card reaction control. */
.shared-listing-page .shared-facts-list .shared-side-link {
grid-column: 1 / -1;
width: 100%;
}
.shared-listing-page .shared-about-like-wrap.shared-listing-detail {
align-self: flex-start;
display: inline-flex;
flex: 0 0 auto;
margin: 0;
min-height: 0;
padding: 0 !important;
}
.shared-listing-page .shared-about-like-wrap.shared-listing-detail .shared-about-like {
flex: 0 0 auto;
min-height: 2.35rem;
padding: 0.45rem 0.82rem;
width: auto;
}
@media (max-width: 767px) {
.shared-listing-page .shared-about-like-wrap.shared-listing-detail {
padding: 0 !important;
}
.shared-listing-page .shared-about-like-wrap.shared-listing-detail .shared-about-like {
min-height: 2.18rem;
padding: 0.4rem 0.72rem;
}
}
/* Public brand direction: restrained, neutral first, ticket accents second. */
:root {
--public-brand-radius: 24px;
}
#events > .mx-auto,
.shared-listing-page > div,
.shared-related-section > div {
max-width: 1180px !important;
}
#events {
background: var(--colour-page) !important;
padding-top: 1.35rem !important;
}
#events .mobile-view-card,
#events aside,
.filter-sheet-panel {
background: var(--colour-surface) !important;
border: 1px solid var(--colour-border-soft);
border-radius: var(--public-brand-radius) !important;
box-shadow: none;
color: var(--colour-filter-panel-text) !important;
}
#events aside {
top: 1rem !important;
}
#events aside input,
#events aside select,
.filter-sheet-trigger,
.mobile-sort-trigger {
background: color-mix(in srgb, var(--ticket-03-bg) 28%, white) !important;
border: 1px solid color-mix(in srgb, var(--colour-primary) 12%, transparent) !important;
color: var(--colour-filter-panel-text) !important;
}
.view-toggle-btn,
.filter-btn,
.filter-sheet-results,
#events a[data-contact-prompt] {
border-radius: 999px !important;
}
.view-toggle-btn {
align-items: center !important;
display: inline-flex !important;
gap: 0.5rem !important;
justify-content: center !important;
min-height: 2.75rem;
}
.view-toggle-btn svg {
height: 1.15rem;
stroke-width: 2;
width: 1.15rem;
}
.view-toggle-btn span {
line-height: 1;
}
#events .controls-toggle,
#events a[data-contact-prompt],
.filter-btn.is-active-filter,
.view-toggle-btn.is-active-view,
.filter-sheet-results {
background: var(--colour-primary) !important;
border-color: var(--colour-primary) !important;
color: var(--colour-primary-text) !important;
}
.filter-btn:not(.is-active-filter),
.view-toggle-btn:not(.is-active-view) {
background: var(--colour-surface) !important;
border: 1.5px solid var(--colour-primary) !important;
color: var(--colour-primary) !important;
}
#events .interest-btn.reaction-selected,
#events .going-btn.reaction-selected,
.shared-listing-page .reaction-selected,
.shared-listing-page .shared-about-like.reaction-selected,
.shared-listing-page .shared-detail-reaction.reaction-selected,
.shared-listing-page .shared-reaction-btn.reaction-selected {
background: var(--colour-primary) !important;
border-color: var(--colour-primary) !important;
color: var(--colour-primary-text) !important;
}
#events .ticket-logo-mark,
.shared-related-section .ticket-logo-mark {
background: var(--colour-primary) !important;
height: 0.9rem !important;
width: 3.35rem !important;
}
#listingHeading {
color: color-mix(in srgb, var(--colour-page-text) 88%, var(--colour-primary));
font-size: clamp(2.1rem, 4.5vw, 4.25rem) !important;
letter-spacing: 0;
line-height: 0.92 !important;
margin-top: 0.45rem !important;
max-width: 17ch;
text-decoration: none;
}
#events aside p.text-xs,
#events aside .count-card p:last-child,
#events .mb-6 p.text-sm.uppercase,
.ticket-fine-print,
.shared-listing-page .shared-card-eyebrow,
.shared-listing-page .shared-section-kicker,
.shared-listing-page .shared-hero-kicker,
.shared-related-section p.text-sm.uppercase,
.shared-related-kicker {
font-family: "Doto", "Rubik", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 800 !important;
letter-spacing: 0.04em !important;
}
.shared-related-kicker {
color: var(--colour-primary) !important;
}
#events .mobile-view-card > p:first-child,
#events aside p.mb-2.text-sm.font-extrabold {
color: var(--colour-primary) !important;
font-family: "Doto", "Rubik", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 850 !important;
letter-spacing: 0.02em !important;
}
#events .mobile-view-card > p:nth-child(2) {
margin-top: 0.3rem !important;
}
.ticket-meta,
.shared-listing-page .shared-mobile-meta,
.shared-listing-page .shared-fact-row,
.shared-related-meta {
font-family: "Rubik", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 550 !important;
letter-spacing: 0 !important;
}
.ticket-meta > span,
.ticket-meta a,
.shared-listing-page .shared-mobile-meta span,
.shared-related-meta {
font-weight: 550 !important;
}
#eventGrid {
gap: 1rem !important;
}
.listing-card.ticket-card {
border: 1px solid var(--colour-border-soft) !important;
border-radius: var(--public-brand-radius) !important;
box-shadow: 0 8px 24px rgba(8, 9, 109, 0.035) !important;
overflow: visible;
transform: none !important;
}
.listing-card.ticket-card:hover {
transform: translateY(-1px) !important;
}
.ticket-card {
grid-template-columns: minmax(170px, 28%) minmax(0, 1fr) !important;
min-height: 210px !important;
}
.ticket-tone-0 { --ticket-bg: var(--ticket-01-bg); }
.ticket-tone-1 { --ticket-bg: var(--ticket-02-bg); }
.ticket-tone-2 { --ticket-bg: var(--ticket-03-bg); }
.ticket-tone-3 { --ticket-bg: var(--ticket-04-bg); }
.ticket-tone-4 { --ticket-bg: var(--ticket-05-bg); }
.ticket-tone-5 { --ticket-bg: var(--ticket-06-bg); }
.ticket-tone-6 { --ticket-bg: var(--ticket-07-bg); }
.ticket-tone-7 { --ticket-bg: var(--ticket-08-bg); }
.ticket-tone-8 { --ticket-bg: var(--ticket-09-bg); }
.ticket-tone-9 { --ticket-bg: var(--ticket-10-bg); }
.ticket-tone-10 { --ticket-bg: var(--ticket-11-bg); }
.ticket-tone-11 { --ticket-bg: var(--ticket-12-bg); }
.ticket-tone-12 { --ticket-bg: var(--ticket-13-bg); }
.ticket-tone-13 { --ticket-bg: var(--ticket-14-bg); }
.ticket-tone-14 { --ticket-bg: var(--ticket-15-bg); }
.ticket-tone-15 { --ticket-bg: var(--ticket-16-bg); }
.ticket-image-panel,
.ticket-image-panel .listing-image {
border-radius: var(--public-brand-radius) 0 0 var(--public-brand-radius) !important;
}
.ticket-image-panel {
background: color-mix(in srgb, var(--ticket-bg, var(--ticket-03-bg)) 18%, var(--colour-surface)) !important;
}
.ticket-image-panel .grainy-placeholder::after,
.shared-listing-page .grainy-placeholder::after {
display: none !important;
}
.ticket-image-panel .listing-image {
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
filter: saturate(0.92) contrast(0.98);
height: 100%;
width: 100%;
}
.ticket-image-panel .listing-photo {
display: block;
height: 100%;
inset: 0;
object-fit: cover;
object-position: center;
position: absolute;
width: 100%;
z-index: 1;
}
.ticket-image-panel::before {
background: linear-gradient(
175deg,
color-mix(in srgb, var(--colour-primary) 22%, transparent) 0%,
color-mix(in srgb, var(--colour-primary) 11%, transparent) 48%,
color-mix(in srgb, var(--colour-primary) 4%, transparent) 70%,
transparent 84%
) !important;
border: 0 !important;
border-radius: inherit !important;
content: "" !important;
display: block !important;
height: 100% !important;
inset: 0 !important;
pointer-events: none;
position: absolute !important;
width: 100% !important;
z-index: 2 !important;
}
.ticket-main {
background: var(--colour-surface) !important;
border-radius: 0 var(--public-brand-radius) var(--public-brand-radius) 0 !important;
color: var(--colour-page-text) !important;
}
.ticket-main::before {
background: var(--colour-page) !important;
}
.ticket-main::after {
background: var(--colour-page) !important;
}
.ticket-title {
color: var(--colour-page-text) !important;
letter-spacing: 0;
text-decoration: none;
}
.ticket-main .ticket-description,
.ticket-main .ticket-meta,
.detail-main .ticket-description,
.detail-main .ticket-meta {
color: var(--colour-muted-text) !important;
}
.ticket-seam {
display: block !important;
border-color: var(--colour-ticket-seam) !important;
}
.ticket-image-panel::after,
.ticket-main::before,
.ticket-main::after {
display: none !important;
}
.parea-pick-badge {
background: var(--colour-primary) !important;
color: var(--colour-primary-text) !important;
}
.parea-pick-badge svg {
color: currentColor !important;
}
.parea-pick-tag {
--premium-badge-angle: 0deg;
background:
linear-gradient(180deg, var(--colour-primary), var(--colour-primary)) padding-box,
conic-gradient(from var(--premium-badge-angle),
var(--colour-featured-metal-1) 0deg,
var(--colour-featured-metal-2) 28deg,
var(--colour-featured-metal-8) 74deg,
var(--colour-featured-metal-3) 126deg,
var(--colour-featured-metal-7) 176deg,
var(--colour-featured-metal-5) 224deg,
var(--colour-featured-metal-2) 286deg,
var(--colour-featured-metal-1) 360deg) border-box !important;
border: 2px solid transparent;
color: var(--colour-primary-text);
animation: premium-badge-shimmer 10s linear infinite;
}
.parea-pick-tag svg {
color: currentColor !important;
height: 0.8rem;
width: 0.8rem;
}
@media (prefers-reduced-motion: reduce) {
.parea-pick-tag {
animation: none;
}
}
.place-tag {
align-items: center !important;
background: var(--colour-surface) !important;
border: 1.5px solid var(--colour-primary) !important;
color: var(--colour-primary) !important;
display: inline-flex !important;
justify-content: center !important;
line-height: 1 !important;
min-height: 2rem;
}
.place-tag svg {
display: block;
color: currentColor !important;
flex: 0 0 auto;
}
.place-tag.parea-pick-tag {
background:
linear-gradient(180deg, var(--colour-primary), var(--colour-primary)) padding-box,
conic-gradient(from var(--premium-badge-angle),
var(--colour-featured-metal-1) 0deg,
var(--colour-featured-metal-2) 28deg,
var(--colour-featured-metal-8) 74deg,
var(--colour-featured-metal-3) 126deg,
var(--colour-featured-metal-7) 176deg,
var(--colour-featured-metal-5) 224deg,
var(--colour-featured-metal-2) 286deg,
var(--colour-featured-metal-1) 360deg) border-box !important;
border: 2px solid transparent !important;
color: var(--colour-primary-text) !important;
animation: premium-badge-shimmer 10s linear infinite;
}
#events .interest-btn:not(.reaction-selected),
#events .going-btn:not(.reaction-selected),
.shared-listing-page .shared-about-like:not(.reaction-selected),
.shared-listing-page .shared-detail-reaction:not(.reaction-selected),
.shared-listing-page .shared-reaction-btn:not(.reaction-selected) {
background: var(--colour-surface) !important;
border: 1.5px solid var(--colour-primary) !important;
color: var(--colour-primary) !important;
}
#events .interest-btn svg,
#events .going-btn svg,
.shared-listing-page .shared-about-like svg,
.shared-listing-page .shared-detail-reaction svg,
.shared-listing-page .shared-reaction-btn svg {
color: currentColor !important;
}
#events .interest-btn > span,
.shared-listing-page .interest-btn > span,
.shared-related-stats span {
font-family: "Doto", "Rubik", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 850 !important;
}
.shared-related-stats svg {
color: var(--colour-primary) !important;
}
#events .ticket-meta svg,
#events .card-share-btn,
#events .qr-open-btn {
color: var(--colour-primary) !important;
}
#events .card-share-btn svg,
#events .qr-open-btn svg {
color: currentColor !important;
}
.buy-tickets-btn {
background: var(--colour-primary) !important;
border: 0 !important;
color: var(--colour-primary-text) !important;
outline: none !important;
text-shadow: none !important;
}
.buy-tickets-btn svg {
color: currentColor !important;
}
.buy-tickets-btn:hover {
background: var(--colour-primary-hover) !important;
color: var(--colour-primary-hover-text) !important;
}
.place-open-status {
background: var(--colour-filter-pill-bg) !important;
border: 1.5px solid var(--colour-primary) !important;
color: var(--colour-primary) !important;
font-family: "Doto", "Rubik", ui-sans-serif, system-ui, sans-serif !important;
font-size: 0.72rem !important;
font-weight: 850 !important;
letter-spacing: 0.02em !important;
padding: 0.42rem 0.65rem !important;
text-transform: uppercase;
}
.place-open-status.is-open,
.place-open-status.is-closed,
.place-open-status.is-unknown {
color: var(--colour-primary) !important;
}
.place-open-status.is-open {
background: #e8f6ee !important;
border-color: #168a4a !important;
color: #168a4a !important;
}
.place-open-status .place-open-status-dot {
animation: none !important;
background: var(--colour-primary) !important;
border: 1.5px solid var(--colour-primary) !important;
}
.place-open-status.is-open .place-open-status-dot {
animation: parea-status-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
background: #168a4a !important;
border-color: #168a4a !important;
}
.place-open-status.is-closed .place-open-status-dot,
.place-open-status.is-unknown .place-open-status-dot {
background: transparent !important;
}
@keyframes parea-status-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.card-share-btn {
border: 0 !important;
box-shadow: none !important;
}
.count-card-events,
.count-card-venues,
.count-card-offers {
background: color-mix(in srgb, var(--ticket-08-bg) 28%, white) !important;
border: 1px solid color-mix(in srgb, var(--colour-primary) 10%, transparent);
color: var(--colour-primary) !important;
}
.shared-listing-page,
.shared-related-section {
background: var(--colour-page) !important;
}
.shared-listing-page {
--shared-accent-bg: var(--ticket-03-bg) !important;
--shared-accent-text: var(--ticket-03-text) !important;
--shared-accent-pill: var(--ticket-08-bg) !important;
--shared-accent-surface: var(--ticket-03-bg) !important;
--shared-accent-soft: var(--colour-surface-strong) !important;
--shared-accent-mid: color-mix(in srgb, var(--ticket-03-bg) 46%, white) !important;
--shared-accent-strong: var(--colour-primary) !important;
--shared-accent-on-strong: var(--colour-primary-text) !important;
}
.shared-listing-page *,
#events *,
.shared-related-section * {
text-shadow: none !important;
}
.shared-listing-page .shared-page-back {
background: var(--colour-surface) !important;
border: 1px solid color-mix(in srgb, var(--colour-primary) 10%, transparent);
color: var(--colour-primary) !important;
}
.shared-listing-page .shared-hero-card,
.shared-listing-page .shared-hero-media,
.shared-listing-page .shared-hero-content,
.shared-listing-page .shared-info-card,
.shared-listing-page .shared-mobile-summary,
.shared-related-ticket-main {
border-radius: var(--public-brand-radius) !important;
}
.shared-listing-page .shared-hero-card {
background: var(--colour-surface) !important;
border: 0 !important;
box-shadow: none !important;
}
.shared-listing-page .shared-hero-media,
.shared-listing-page .shared-ticket-image,
.shared-listing-page .shared-ticket-gradient,
.shared-listing-page .shared-ticket-photo {
border: 0 !important;
}
.shared-listing-page .shared-hero-content {
display: none !important;
}
.shared-listing-page .shared-hero-shade {
background: transparent !important;
}
.shared-listing-page .shared-ticket-image.is-placeholder,
.shared-listing-page .shared-ticket-gradient {
background-image: none !important;
background: var(--ticket-03-bg) !important;
}
.premium-badge {
--premium-badge-angle: 0deg;
animation: premium-badge-shimmer 10s linear infinite !important;
background:
linear-gradient(180deg, var(--colour-primary), var(--colour-primary)) padding-box,
conic-gradient(from var(--premium-badge-angle),
var(--colour-featured-metal-1) 0deg,
var(--colour-featured-metal-2) 28deg,
var(--colour-featured-metal-8) 74deg,
var(--colour-featured-metal-3) 126deg,
var(--colour-featured-metal-7) 176deg,
var(--colour-featured-metal-5) 224deg,
var(--colour-featured-metal-2) 286deg,
var(--colour-featured-metal-1) 360deg) border-box !important;
border: 2px solid transparent !important;
color: var(--colour-primary-text) !important;
}
.premium-badge svg {
color: currentColor !important;
filter: none !important;
}
.momentum-badge {
font-size: 0.64rem !important;
gap: 0.35rem !important;
letter-spacing: 0.01em !important;
padding: 0.25rem 0.625rem !important;
}
.momentum-badge svg,
.premium-badge svg,
.ticket-available-badge svg,
.trending-badge svg,
.popular-badge svg {
color: currentColor !important;
height: 0.85rem !important;
width: 0.85rem !important;
}
#why-parea,
#submit,
#answers,
footer {
background: var(--colour-page) !important;
color: var(--colour-page-text) !important;
}
#why-parea > div,
#submit article,
#answers > div,
footer > div:first-child {
border: 1px solid var(--colour-border-soft) !important;
border-radius: var(--public-brand-radius) !important;
box-shadow: none !important;
}
#why-parea > div {
background: var(--colour-surface) !important;
}
#why-parea p,
#why-parea h2 {
color: var(--colour-page-text) !important;
}
#why-parea p.uppercase,
#why-parea > div > div:first-child p {
color: var(--colour-primary) !important;
}
#why-parea .grid.sm\:grid-cols-2 > div {
background: var(--colour-filter-pill-bg) !important;
border: 1px solid color-mix(in srgb, var(--colour-primary) 12%, transparent) !important;
color: var(--colour-page-text) !important;
}
#why-parea .grid.sm\:grid-cols-2 > div p:first-child {
color: var(--colour-primary) !important;
}
#why-parea .grid.sm\:grid-cols-2 > div p:last-child {
color: var(--colour-page-text) !important;
opacity: 0.72;
}
#submit article {
background: var(--colour-surface) !important;
color: var(--colour-page-text) !important;
}
#submit article:nth-child(even) {
background: var(--colour-filter-pill-bg) !important;
}
#submit article > div:first-child {
background: var(--colour-primary) !important;
color: var(--colour-primary-text) !important;
}
#submit article h3 {
color: var(--colour-page-text) !important;
}
#submit article p {
color: var(--colour-muted-text) !important;
}
#answers > div {
background: var(--colour-primary) !important;
color: var(--colour-primary-text) !important;
}
#answers h2,
#answers p,
#answers .faq-trigger {
color: var(--colour-primary-text) !important;
}
#answers .faq-item {
background: var(--colour-surface) !important;
border: 1px solid color-mix(in srgb, var(--colour-primary) 14%, transparent) !important;
color: var(--colour-page-text) !important;
}
#answers .faq-item .faq-trigger,
#answers .faq-item p {
color: var(--colour-page-text) !important;
}
#answers .faq-icon {
background: var(--colour-primary) !important;
color: var(--colour-primary-text) !important;
}
footer > div:first-child {
background: var(--colour-primary) !important;
color: var(--colour-primary-text) !important;
}
footer > div:first-child p,
footer > div:first-child a {
color: var(--colour-primary-text) !important;
}
footer > div:first-child > div:last-child a {
background: var(--colour-surface) !important;
color: var(--colour-primary) !important;
}
footer > div:first-child > div:last-child a[href*="instagram"] {
flex: 0 0 auto !important;
height: 2.75rem !important;
padding: 0 !important;
width: 2.75rem !important;
}
footer > div:first-child > div:last-child a[data-contact-prompt] {
align-items: center !important;
display: inline-flex !important;
flex: 0 0 auto !important;
justify-content: center !important;
min-height: 2.75rem !important;
padding: 0.75rem 1.25rem !important;
width: auto !important;
}
footer > div:first-child nav a[data-contact-prompt] {
background: transparent !important;
color: var(--colour-primary-text) !important;
padding: 0 !important;
width: auto !important;
}
footer > div:first-child > div:last-child a:hover {
background: var(--colour-filter-pill-bg) !important;
color: var(--colour-primary) !important;
}
footer > div:last-child {
color: var(--colour-muted-text) !important;
}
.shared-listing-page .shared-hero-kicker,
.shared-listing-page .shared-hero-place,
.shared-listing-page .shared-hero-date {
color: var(--colour-muted-text) !important;
}
.shared-listing-page .shared-hero-title {
color: var(--colour-page-text) !important;
}
.shared-listing-page .shared-about-card,
.shared-listing-page .shared-facts-card,
.shared-listing-page .shared-mobile-summary {
background: var(--colour-surface) !important;
border: 1px solid var(--colour-border-soft) !important;
color: var(--colour-page-text) !important;
}
.shared-listing-page .shared-mobile-summary {
display: block !important;
margin-top: 0 !important;
background: transparent !important;
border: 0 !important;
overflow: visible !important;
padding: clamp(0.4rem, 1.4vw, 0.8rem) 0 !important;
}
.shared-listing-page .shared-card-eyebrow,
.shared-listing-page .shared-section-kicker,
.shared-listing-page .shared-mobile-meta,
.shared-listing-page .shared-fact-row,
.shared-listing-page .shared-description-full,
.shared-listing-page .shared-good-row p {
color: var(--colour-page-text) !important;
}
.shared-listing-page .shared-card-title,
.shared-listing-page .shared-mobile-title {
color: var(--colour-page-text) !important;
}
.shared-listing-page .shared-mobile-title {
text-decoration: none;
}
.shared-listing-page .shared-card-eyebrow,
.shared-listing-page .shared-section-kicker {
background: transparent !important;
border-radius: 0 !important;
color: var(--shared-accent-strong) !important;
display: inline !important;
line-height: 1.35 !important;
padding: 0 !important;
}
.shared-listing-page .shared-fact-row,
.shared-listing-page .shared-change-note,
.shared-listing-page .place-tag {
background: color-mix(in srgb, var(--ticket-08-bg) 62%, white) !important;
border-color: transparent !important;
}
.shared-listing-page .shared-change-note {
color: var(--ticket-08-text) !important;
}
.shared-listing-page .shared-side-link,
.shared-listing-page .shared-side-cta,
.shared-listing-page .shared-ticket-cta,
.shared-listing-page .shared-mobile-ticket-cta,
.shared-listing-page .shared-about-like {
background: var(--colour-primary) !important;
color: var(--colour-primary-text) !important;
}
.shared-listing-page .shared-side-cta-secondary {
background: var(--colour-surface) !important;
border-color: var(--colour-primary) !important;
color: var(--colour-primary) !important;
}
.shared-listing-page .shared-mobile-ticket-cta {
box-shadow: none !important;
}
.shared-related-section .shared-related-ticket-main {
background: var(--colour-surface) !important;
border: 1px solid var(--colour-border-soft) !important;
color: var(--colour-page-text) !important;
}
.shared-related-section .shared-related-title {
color: var(--colour-page-text) !important;
}
.shared-related-section p.text-sm.uppercase {
color: var(--colour-primary) !important;
}
.shared-related-section a[href="/#events"] {
align-items: center !important;
background: var(--colour-surface) !important;
border: 1.5px solid var(--colour-primary) !important;
color: var(--colour-primary) !important;
display: inline-flex !important;
justify-content: center !important;
min-height: 2.4rem !important;
padding: 0.55rem 1.05rem !important;
white-space: nowrap !important;
}
.shared-related-section a[href="/#events"]:hover {
background: var(--colour-primary) !important;
color: var(--colour-primary-text) !important;
}
.shared-related-section .mb-4.flex > div:first-child {
min-width: 0 !important;
max-width: calc(100% - 6.5rem) !important;
}
.shared-related-section .mb-4.flex h2 {
max-width: 11.5ch !important;
}
.shared-related-section .mb-4.flex > a[href="/#events"] {
flex: 0 0 auto !important;
}
@media (min-width: 640px) {
.shared-related-section .mb-4.flex > div:first-child {
max-width: none !important;
}
.shared-related-section .mb-4.flex h2 {
max-width: none !important;
}
}
@media (max-width: 767px) {
#eventGrid {
gap: 1.5rem !important;
}
#eventGrid > .listing-card + .listing-card {
position: relative;
}
#eventGrid > .listing-card + .listing-card::before {
background: color-mix(in srgb, var(--colour-primary) 8%, transparent);
content: "";
height: 1px;
left: 0.75rem;
position: absolute;
right: 0.75rem;
top: -0.75rem;
}
.ticket-seam {
left: 0 !important;
right: 0 !important;
width: 100% !important;
}
#events {
padding-top: 0.8rem !important;
}
#listingHeading {
max-width: 15ch;
}
.ticket-card {
display: block !important;
min-height: 0 !important;
}
.ticket-image-panel,
.ticket-image-panel .listing-image {
border-radius: var(--public-brand-radius) var(--public-brand-radius) 0 0 !important;
}
.ticket-main {
border-radius: 0 0 var(--public-brand-radius) var(--public-brand-radius) !important;
min-height: 0 !important;
height: auto !important;
}
.shared-listing-page .shared-hero-content {
display: none;
}
}
cursor: grab;