/**
* Events — Bespoke TEC listing and single event styles.
*
* All TEC default styles are dequeued.
* This file provides complete custom styling for:
* - Events listing page header
* - Sticky filter bar (audience pills, search, sort, view toggle)
* - Event grid and list views
* - Event row (list view card)
* - Calendar placeholder
* - Load more button
* - Results count
* - Savings callout
* - Empty state
* - Single event page (Phase 7 — placeholder)
*
* @package WEO
*/
/* ═══════════════════════════════════════════
Events Page Header
═══════════════════════════════════════════ */
.events-page-layout {
background: var(--surface);
}
.events-header {
position: relative;
overflow: hidden;
background: var(--dark);
padding-top: var(--nav-height);
}
/* Theatre-curtain backdrop (real ![]()
, first in DOM so it sits below the
atmosphere glows / grain; content is z-index 2 above all). */
.events-header__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.events-header__bg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.events-header__atmosphere {
position: absolute;
inset: 0;
pointer-events: none;
}
.events-header__glow {
position: absolute;
filter: blur(80px);
}
.events-header__glow--pink {
top: -30%;
left: 10%;
width: 50%;
height: 80%;
background: radial-gradient(ellipse, rgba(224, 64, 160, 0.06), transparent 70%);
}
.events-header__glow--violet {
bottom: -20%;
right: 10%;
width: 40%;
height: 70%;
background: radial-gradient(ellipse, rgba(160, 112, 240, 0.04), transparent 70%);
}
.events-header__grain {
position: absolute;
inset: 0;
opacity: 0.3;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
background-size: 200px;
}
.events-header__content {
position: relative;
z-index: 2;
text-align: center;
padding-top: 56px;
padding-bottom: 48px;
}
.events-header__title {
line-height: 1.1;
letter-spacing: -0.03em;
color: var(--white);
margin-bottom: 12px;
}
.events-header__desc {
font-family: var(--font-body);
font-size: var(--text-m);
line-height: 1.5;
color: var(--subtle);
max-width: 480px;
margin: 0 auto;
}
.events-header__desc p {
color: var(--subtle);
margin-bottom: 0;
}
.events-header__accent {
color: var(--accent);
font-weight: 600;
}
.events-header__border {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: rgba(168, 156, 200, 0.06);
}
/* ═══════════════════════════════════════════
Page Layout — Sidebar + Main column
Full-bleed: the layout escapes the centered .container constraint that
the header above uses. Sidebar sits flush against the left viewport
edge with a white background; main column fills the rest of the screen.
═══════════════════════════════════════════ */
/* Two-column layout from 960px up. Sidebar fixed width, main fluid.
* The audience pill row sits in row 1 of column 2 (above main), so the
* sidebar spans both rows on the left. */
@media (min-width: 960px) {
.events-page-layout {
display: grid;
grid-template-columns: 280px 1fr;
grid-template-rows: auto 1fr;
align-items: start;
}
.events-sidebar {
grid-row: 1 / span 2;
}
.events-audience-bar {
grid-column: 2;
grid-row: 1;
}
.events-main {
grid-column: 2;
grid-row: 2;
}
}
/* ═══════════════════════════════════════════
Sidebar
═══════════════════════════════════════════ */
/* Mobile-first: drawer that slides in from the left. Body scroll is locked
* by the Alpine $watch handler when sidebarOpen flips to true. Transitions
* are suppressed during window resize via the .weo-resizing class on
* (set by scroll-animations.js, killed by animations.css). */
.events-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: min(320px, 88vw);
/* Above the site nav (--z-nav: 100) so the close button is reachable
* and the logo doesn't bleed through. Drawer is modal-like (traps body
* scroll, has backdrop) so --z-modal is the right tier. */
background: var(--white);
overflow-y: auto;
padding: 20px 22px 32px;
transform: translateX(-100%);
transition: transform 0.28s ease;
box-shadow: 4px 0 24px rgba(14, 10, 24, 0.08);
}
.events-sidebar.is-open {
transform: translateX(0);
}
/* Mobile drawer backdrop — sits just under the drawer panel but above the
* nav, so the dim covers the whole viewport including the nav band. */
.events-sidebar-backdrop {
position: fixed;
inset: 0;
z-index: calc(var(--z-modal) - 1);
background: rgba(14, 10, 24, 0.4);
}
/* Sidebar header (close button on mobile, heading on desktop) */
.events-sidebar__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.events-sidebar__title {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 600;
color: var(--text-strong);
margin: 0;
}
.events-sidebar__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(106, 96, 128, 0.08);
color: var(--text-mid);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.events-sidebar__close:hover {
background: rgba(106, 96, 128, 0.15);
color: var(--text-strong);
}
.events-sidebar__close:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (max-width: 959px) {
.events-sidebar {
z-index: var(--z-modal);
}
}
/* Desktop: sidebar sits flush against the left viewport edge, white panel,
* sticky as the user scrolls. The drawer transform is reset and fixed
* positioning released so it occupies its grid cell. */
@media (min-width: 960px) {
.events-sidebar {
position: sticky;
top: var(--nav-height);
left: auto;
bottom: auto;
width: auto;
height: calc(100vh - var(--nav-height));
max-height: calc(100vh - var(--nav-height));
transform: none;
background: var(--white);
box-shadow: none;
border-right: 1px solid rgba(106, 96, 128, 0.1);
padding: 28px 28px 32px;
}
.events-sidebar-backdrop {
display: none;
}
/* Hide the close button — it only exists for the mobile drawer. */
.events-sidebar__close {
display: none;
}
.events-sidebar__title {
display: none; /* Heading is implicit on desktop — section labels carry the meaning */
}
.events-sidebar__header {
display: none;
}
}
/* Field wrapper (search, sort) */
.events-sidebar__group {
margin-bottom: 22px;
}
.events-sidebar__label {
display: block;
font-family: var(--font-body);
font-size: var(--text-s);
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text-mid);
margin-bottom: 8px;
}
/* Sidebar search — full-width input with leading icon and trailing × clear. */
.events-sidebar__search {
position: relative;
}
.events-sidebar__search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text-mid);
pointer-events: none;
}
.events-sidebar__search-input {
width: 100%;
padding-left: 36px !important;
padding-right: 30px !important;
font-size: var(--text-small) !important;
background: var(--surface) !important;
border-color: rgba(106, 96, 128, 0.12) !important;
}
.events-sidebar__search-input:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px var(--accent-light) !important;
}
.events-sidebar__search-input::-webkit-search-cancel-button,
.events-sidebar__search-input::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
.events-sidebar__search-clear {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(106, 96, 128, 0.12);
color: var(--text-mid);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.events-sidebar__search-clear:hover {
background: var(--accent-light);
color: var(--accent);
}
/* Sidebar sort select */
.events-sidebar__select {
width: 100%;
font-size: var(--text-s) !important;
font-weight: 500;
padding: 9px 36px 9px 14px !important;
background-color: var(--white) !important;
border-color: rgba(106, 96, 128, 0.12) !important;
color: var(--text-mid);
}
/* Waitlist toggle — sits in .events-main__topbar next to the view-mode toggle.
* Checked = show sold-out / waitlist events, unchecked = hide them. */
.events-main__waitlist {
display: flex;
align-items: center;
gap: 10px;
padding: 5.3px 12px;
border: 1.5px solid rgba(106, 96, 128, 0.15);
border-radius: var(--radius-md);
background: var(--white);
font-family: var(--font-body);
font-size: var(--text-small);
font-weight: 500;
color: var(--text-mid);
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.events-main__waitlist:hover {
border-color: rgba(106, 96, 128, 0.3);
background: rgba(106, 96, 128, 0.04);
}
.events-main__waitlist input[type="checkbox"] {
margin: 0;
accent-color: var(--accent);
cursor: pointer;
}
.events-main__waitlist:has(input[type="checkbox"]:checked) {
border-color: var(--accent);
background: var(--accent-light);
color: var(--accent);
}
/* Section heading (Category, Audience) */
.events-sidebar__heading {
font-family: var(--font-body);
font-size: var(--text-s);
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text-mid);
margin: 0 0 8px;
}
/* Filter list */
.events-sidebar__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
/* Individual filter row (replaces the old horizontal pill) */
.events-sidebar__filter {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 12px;
border: 1.5px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
font-family: var(--font-body);
font-size: var(--text-s);
font-weight: 500;
color: var(--text-mid);
cursor: pointer;
text-align: left;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.events-sidebar__filter:hover {
background: rgba(106, 96, 128, 0.05);
color: var(--text-strong);
}
.events-sidebar__filter.is-active {
font-weight: 600;
border-color: var(--pill-color, var(--accent));
background: var(--pill-bg, var(--accent-light));
color: var(--pill-color, var(--accent));
}
.events-sidebar__filter:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.events-sidebar__filter-label {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.events-sidebar__filter-count {
flex-shrink: 0;
font-size: var(--text-s);
font-weight: 500;
color: var(--text-mid);
font-variant-numeric: tabular-nums;
}
.events-sidebar__filter.is-active .events-sidebar__filter-count {
color: inherit;
opacity: 0.75;
}
/* Audience colour dot — preserves brand identity even when filter is inactive. */
.events-sidebar__filter-dot {
flex-shrink: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--pill-color, var(--text-mid));
}
/* ═══════════════════════════════════════════
Main column (top bar, results count)
═══════════════════════════════════════════ */
.events-main {
min-width: 0; /* Prevents grid blowout when long card titles try to expand the column. */
padding: 10px var(--space-md) 0;
}
@media (min-width: 960px) {
.events-main {
padding: 24px 36px 0 36px;
}
}
@media (min-width: 1400px) {
.events-main {
padding-right: 56px;
padding-left: 48px;
}
}
.events-main__topbar {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 12px;
}
/* Mobile filter button — hidden on desktop where the sidebar is always visible. */
.events-main__filter-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5.3px 12px;
border: 1.5px solid rgba(106, 96, 128, 0.15);
border-radius: var(--radius-md);
background: var(--white);
font-family: var(--font-body);
font-size: var(--text-s);
font-weight: 500;
color: var(--text-mid);
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease;
flex-shrink: 0;
}
.events-main__filter-btn:hover {
border-color: var(--accent);
background: var(--accent-light);
color: var(--accent);
}
.events-main__filter-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (min-width: 960px) {
.events-main__filter-btn {
display: none;
}
}
/* Audience pill row — sits OUTSIDE .events-main (sibling of sidebar + main)
* so the rightmost pill can scroll right to the viewport edge unconstrained
* by main's right padding. Left padding mirrors main's left padding so the
* first pill aligns with main's content; no right padding so the last pill
* can extend off-screen for swipe affordance. */
.events-audience-bar {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 16px 16px 6px var(--space-md);
}
.events-audience-bar::-webkit-scrollbar {
display: none;
}
@media (min-width: 960px) {
.events-audience-bar {
padding: 24px 0 6px 36px;
}
}
@media (min-width: 1400px) {
.events-audience-bar {
padding-left: 48px;
}
}
.events-audience-pill {
flex-shrink: 0;
padding: 7px 18px;
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: var(--text-s);
font-weight: 500;
color: var(--text-mid);
background: transparent;
border: 1.5px solid rgba(106, 96, 128, 0.1);
cursor: pointer;
white-space: nowrap;
}
.events-audience-pill:hover {
border-color: rgba(106, 96, 128, 0.2);
background: rgba(106, 96, 128, 0.04);
}
.events-audience-pill.is-active {
font-weight: 600;
border-width: 2px;
border-color: var(--pill-color, var(--accent));
background: var(--pill-bg, var(--accent-light));
color: var(--pill-color, var(--accent));
}
.events-audience-pill:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* View-mode toggle (grid / list / calendar) — moved out of the old filter bar
* to sit above the results. */
.events-main__views {
display: flex;
background: var(--surface);
border-radius: var(--radius-md);
border: 1.5px solid rgba(106, 96, 128, 0.08);
overflow: hidden;
flex-shrink: 0;
margin-left: auto; /* Pushes the toggle to the right edge when the search hits its max-width cap. */
}
.events-main__view-btn {
padding: 8px 12px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-mid);
transition: all 0.2s ease;
}
.events-main__view-btn.is-active {
background: var(--white);
box-shadow: 0 1px 4px rgba(14, 10, 24, 0.08);
color: var(--accent);
}
.events-main__view-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.events-main__view-btn svg {
display: block;
}
.events-main__view-btn.is-active svg {
stroke: var(--accent);
}
/* ═══════════════════════════════════════════
Results Count
═══════════════════════════════════════════ */
.events-results {
padding-top: 4px;
padding-bottom: 12px;
}
.events-results__count {
font-family: var(--font-body);
font-size: var(--text-small);
color: var(--text-mid);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.events-results__active-filter {
display: inline-block;
padding: 3px 10px;
border-radius: var(--radius-sm);
background: var(--slate-light);
color: var(--slate);
font-size: var(--text-xs);
font-weight: 600;
}
/* Audience chip adopts the selected audience's colour — set inline via
--chip-color / --chip-bg from the active pill (see filterEvents()),
falling back to the accent if the colour can't be resolved. */
.events-results__active-filter--audience {
background: var(--chip-bg, var(--accent-light));
color: var(--chip-color, var(--accent));
}
/* ═══════════════════════════════════════════
Events Listing Container
═══════════════════════════════════════════ */
.events-listing {
padding-top: 12px;
padding-bottom: 48px;
}
/* ═══════════════════════════════════════════
Event Grid (3-column)
═══════════════════════════════════════════ */
.events-grid {
gap: 12px;
}
/* Hide items via Alpine x-show — transition helpers */
.fade-enter {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.fade-enter-start {
opacity: 0;
transform: translateY(12px);
}
.fade-enter-end {
opacity: 1;
transform: translateY(0);
}
/* Sold-out card state */
.event-card--sold-out:hover {
transform: none;
box-shadow: 0 2px 12px rgba(14, 10, 24, 0.05);
border-color: rgba(106, 96, 128, 0.1);
}
/* ═══════════════════════════════════════════
Sold Out Overlay (on event card image)
═══════════════════════════════════════════ */
.event-card__sold-out-overlay {
position: absolute;
inset: 0;
background: rgba(14, 10, 24, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.event-card__sold-out-badge {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--text-s);
color: var(--white);
letter-spacing: 0.06em;
text-transform: uppercase;
background: rgba(232, 80, 64, 1);
padding: 8px 16px;
border-radius: 8px;
}
.event-card__waitlist-badge {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--text-s);
color: var(--white);
letter-spacing: 0.06em;
text-transform: uppercase;
background: rgba(0,0,0,0.3);
padding: 8px 16px;
border-radius: 8px;
}
/* ═══════════════════════════════════════════
Event Row (List View)
═══════════════════════════════════════════ */
.events-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.event-row {
display: flex;
align-items: center;
gap: 20px;
background: var(--white);
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(106, 96, 128, 0.08);
box-shadow: 0 1px 4px rgba(14, 10, 24, 0.03);
transition: all 0.3s var(--ease-out-expo);
padding: 14px 20px 14px 14px;
text-decoration: none;
color: inherit;
}
.event-row:hover {
border-color: rgba(224, 64, 160, 0.2);
box-shadow: 0 8px 28px rgba(14, 10, 24, 0.07);
}
.event-row:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.event-row--sold-out {
opacity: 0.6;
cursor: default;
}
.event-row--sold-out:hover {
border-color: rgba(106, 96, 128, 0.08);
box-shadow: 0 1px 4px rgba(14, 10, 24, 0.03);
}
/* Mini image */
.event-row__image {
width: 96px;
height: 72px;
border-radius: var(--radius-md);
flex-shrink: 0;
background: linear-gradient(135deg, var(--dark), var(--charcoal));
position: relative;
overflow: hidden;
}
.event-row__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Info column */
.event-row__info {
flex: 1;
min-width: 0;
}
.event-row__title-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.event-row__title {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-body);
color: var(--text-dark);
letter-spacing: -0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.event-row__audience-badge {
flex-shrink: 0;
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 600;
padding: 3px 8px;
border-radius: 5px;
letter-spacing: 0.02em;
}
.event-row__meta {
font-family: var(--font-body);
font-size: var(--text-s);
color: var(--text-mid);
}
/* Pricing column */
.event-row__pricing {
text-align: right;
flex-shrink: 0;
}
.event-row__price-row {
display: flex;
align-items: baseline;
gap: 8px;
flex-direction: row-reverse;
}
.event-row__price {
display: inline-block;
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-h3);
color: var(--text-dark);
letter-spacing: -0.02em;
vertical-align: baseline;
}
.event-row__rrp {
display: inline-block;
font-family: var(--font-body);
font-size: var(--text-s);
color: var(--text-mid);
text-decoration: line-through;
vertical-align: baseline;
}
.event-row__save-badge {
display: block;
width: fit-content;
margin: 4px 0 0 auto;
padding: 3px 8px;
background: rgba(48, 184, 112, 0.9);
color: var(--white);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 700;
border-radius: var(--radius-sm);
}
/* Seats status */
.event-row__seats {
font-family: var(--font-body);
font-size: var(--text-s);
font-weight: 600;
color: var(--success);
flex-shrink: 0;
width: 70px;
text-align: right;
}
.event-row__seats--sold-out {
color: var(--error);
}
.event-row__seats--waitlist {
color: var(--accent);
}
.event-row__seats--low {
color: var(--accent);
}
/* ═══════════════════════════════════════════
Calendar Placeholder
═══════════════════════════════════════════ */
.events-calendar-placeholder {
text-align: center;
padding: 64px 32px;
background: var(--surface);
border-radius: var(--radius-lg);
border: 2px dashed rgba(106, 96, 128, 0.12);
}
.events-calendar-placeholder__icon {
font-size: var(--text-hero);
margin-bottom: var(--space-md);
}
.events-calendar-placeholder__title {
color: var(--text-dark);
margin-bottom: 8px;
}
.events-calendar-placeholder__text {
font-family: var(--font-body);
font-size: var(--text-small);
color: var(--text-mid);
max-width: 360px;
margin: 0 auto;
}
/* ═══════════════════════════════════════════
Empty State
═══════════════════════════════════════════ */
.events-empty {
text-align: center;
padding: 80px 32px;
}
.events-empty__icon {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto 24px;
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-hero);
}
.events-empty__title {
color: var(--text-dark);
margin-bottom: 10px;
}
.events-empty__text {
font-family: var(--font-body);
font-size: var(--text-body);
color: var(--text-mid);
line-height: 1.5;
max-width: 380px;
margin: 0 auto 28px;
}
/* ═══════════════════════════════════════════
Infinite-scroll sentinel
Tiny invisible target watched by IntersectionObserver. The 1px height is
deliberate — large enough to be observable, small enough that it doesn't
add visible page space when there are no more events to reveal.
═══════════════════════════════════════════ */
.events-load-more-sentinel {
height: 1px;
margin-top: 24px;
}
/* ═══════════════════════════════════════════
Mobile Responsive
═══════════════════════════════════════════ */
/* Filter bar: stack on mobile */
@media (max-width: 639px) {
.events-filter-bar__row {
flex-wrap: wrap;
}
.events-filter-bar__search {
flex: 1 1 100%;
max-width: none;
}
.events-filter-bar__spacer {
display: none;
}
.events-filter-bar__category,
.events-filter-bar__sort {
flex: 1;
min-width: 0;
}
.events-filter-bar__sort-select {
width: 100%;
}
/* Event row: stack on mobile */
.event-row {
flex-wrap: wrap;
gap: 12px;
padding: 14px 16px;
}
.event-row__image {
width: 56px;
height: 56px;
}
.event-row__info {
flex: 1 1 calc(100% - 80px);
}
.event-row__pricing {
text-align: left;
}
.event-row__seats {
width: auto;
text-align: left;
}
}
/* ═══════════════════════════════════════════
x-cloak: hide Alpine.js elements until init
═══════════════════════════════════════════ */
[x-cloak] {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════
SINGLE EVENT — Phase 7
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════
TEC Wrapper Resets
═══════════════════════════════════════════ */
/* Hide TEC's AJAX spinner — it creates a gap above the hero */
.tribe-events-ajax-loading {
display: none !important;
}
/* Reset any TEC wrapper padding/margin on single events */
#tribe-events-pg-template,
.tribe-events-pg-template {
padding: 0;
margin: 0;
}
/* ═══════════════════════════════════════════
Blurred Hero
═══════════════════════════════════════════ */
.event-hero {
position: relative;
overflow: hidden;
background: var(--dark);
padding-top: var(--nav-height, 76px);
}
/* Blurred background — the signature effect */
.event-hero__blur {
position: absolute;
inset: -10%;
background-image: var(--hero-bg);
background-size: cover;
background-position: center;
filter: blur(40px) brightness(0.3);
transform: scale(1.15);
z-index: 0;
}
/* Colour wash radials */
.event-hero__wash {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 40%, var(--accent-light), transparent 60%),
radial-gradient(ellipse at 70% 60%, rgba(240, 200, 64, 0.08), transparent 50%);
z-index: 1;
}
/* Grain texture */
.event-hero__grain {
position: absolute;
inset: 0;
z-index: 2;
opacity: 0.4;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
background-size: 200px;
pointer-events: none;
}
/* Bottom fade to surface */
.event-hero__fade {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 320px;
background: linear-gradient(
to top,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.985) 8%,
rgba(255, 255, 255, 0.94) 18%,
rgba(255, 255, 255, 0.85) 30%,
rgba(255, 255, 255, 0.68) 43%,
rgba(255, 255, 255, 0.46) 57%,
rgba(255, 255, 255, 0.25) 72%,
rgba(255, 255, 255, 0.1) 86%,
rgba(255, 255, 255, 0) 100%
);
z-index: 3;
pointer-events: none;
}
.event-hero__content {
position: relative;
z-index: 4;
padding-top: 48px;
padding-bottom: 64px;
}
/* ─── Breadcrumb ─── */
.event-hero__breadcrumb {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 32px;
margin-left: calc(var(--space-md) * -1);
margin-right: calc(var(--space-md) * -1);
padding-left: var(--space-md);
padding-right: var(--space-md);
font-family: var(--font-body);
font-size: var(--text-s);
font-weight: 500;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
@media (min-width: 768px) {
.event-hero__breadcrumb {
margin-left: calc(var(--space-xl) * -1);
margin-right: calc(var(--space-xl) * -1);
padding-left: var(--space-xl);
padding-right: var(--space-xl);
}
}
.event-hero__breadcrumb::-webkit-scrollbar {
display: none;
}
.event-hero__breadcrumb > * {
flex-shrink: 0;
white-space: nowrap;
}
.event-hero__breadcrumb a {
color: var(--subtle);
text-decoration: none;
transition: color 0.2s;
}
.event-hero__breadcrumb a:hover {
color: var(--white);
}
.event-hero__breadcrumb-sep {
color: rgba(168, 156, 200, 0.3);
}
.event-hero__breadcrumb-current {
color: var(--muted);
}
/* ─── Hero Two-Column ─── */
.event-hero__columns {
display: flex;
gap: 48px;
align-items: flex-start;
}
@media (max-width: 959px) {
.event-hero__columns {
flex-direction: column;
gap: 32px;
}
}
/* ─── Gallery Column ─── */
.event-hero__gallery {
flex-shrink: 0;
width: 380px;
}
@media (max-width: 959px) {
.event-hero__gallery {
width: 100%;
max-width: 420px;
}
}
/* Main poster image — 4:3 landscape by default */
.event-hero__gallery-main {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 14px;
overflow: hidden;
position: relative;
box-shadow: 0 24px 37px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3);
background: linear-gradient(135deg, var(--charcoal) 0%, var(--dark) 100%);
cursor: pointer;
padding: 0;
transition: padding 0.2s ease-in-out;
}
/* Poster-only mode (no gallery items) — 3:4 portrait */
.event-hero__gallery--poster-only .event-hero__gallery-main {
aspect-ratio: 4 / 3;
}
.event-hero__gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.2s ease-in-out;
}
.event-hero__gallery-main:hover .event-hero__gallery-img {
filter: brightness(0.4);
}
.event-hero__gallery-accent {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0.6;
z-index: 2;
}
/* Play button overlay (trailer) */
.event-hero__play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background: none;
border: none;
cursor: pointer;
z-index: 5;
opacity: 0.8;
}
.event-hero__play-icon {
display: block;
filter: drop-shadow(0 8px 32px rgba(224, 64, 160, 0.45));
animation: weo-play-pulse 2.5s ease-in-out infinite;
}
@keyframes weo-play-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
.event-hero__play-icon { animation: none; }
}
/* ─── Thumbnails (ACF gallery images, max 4) ─── */
.event-hero__thumbs {
display: flex;
gap: 8px;
margin-top: 10px;
}
.event-hero__thumb {
flex: 0 0 calc((100% - 24px) / 4);
aspect-ratio: 4 / 3;
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
outline: 2px solid transparent;
outline-offset: 1px;
opacity: 1;
padding: 0;
transition: padding 0.2s ease-in-out;
}
.event-hero__thumb:hover {
padding: 1px 2px;
}
.event-hero__thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
position: relative;
overflow: hidden;
filter: brightness(1);
transition: 0.2s ease-in-out;
}
.event-hero__thumb:hover .event-hero__thumb-img {
filter: brightness(0.4);
}
/* "View all" overlay on last thumbnail */
.event-hero__thumb-viewall {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
background: rgba(14, 10, 24, 0.7);
color: var(--white);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.03em;
backdrop-filter: blur(2px);
border-radius: 8px;
}
.event-hero__thumb-viewall svg {
opacity: 0.9;
}
/* ─── Show Info Column ─── */
.event-hero__info {
flex: 1;
padding-top: 8px;
width: 100%;
}
/* Badges row */
.event-hero__badges {
display: flex;
gap: 8px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.event-hero__badge {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 600;
padding: 5px 12px;
border-radius: 7px;
letter-spacing: 0.02em;
}
.event-hero__badge--save {
background: var(--success);
color: var(--white);
font-weight: 700;
}
.event-hero__badge--nonmember {
background: var(--gold);
color: var(--text-dark);
font-weight: 700;
}
.event-hero__badge--seats {
background: #e05050;
color: var(--white);
}
.event-hero__badge--sold-out {
background: var(--error);
color: var(--white);
font-weight: 700;
}
/* Title */
.event-hero__title {
color: var(--white);
margin-bottom: 16px;
}
/* Meta rows */
.event-hero__meta {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 28px;
}
.event-hero__meta-row {
display: flex;
align-items: center;
gap: 10px;
color: var(--muted);
font-family: var(--font-body);
}
.event-hero__meta-icon {
color: var(--accent);
display: flex;
flex-shrink: 0;
}
/* Hero CTA row */
.event-hero__cta-row {
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 24px;
}
.event-hero__book-btn svg {
margin-right: 4px;
}
.event-hero__action-btns {
display: flex;
gap: 8px;
}
.event-hero__action-btn {
width: 44px;
height: 44px;
border-radius: var(--radius-md);
border: 1.5px solid rgba(168, 156, 200, 0.2);
background: rgba(168, 156, 200, 0.06);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--subtle);
transition: all 0.2s;
}
.event-hero__action-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.event-hero__action-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Social proof avatars (hero) */
.event-hero__social-proof {
display: flex;
align-items: center;
gap: 12px;
}
.event-hero__avatars {
display: flex;
}
.event-hero__avatar {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 700;
color: var(--white);
}
.event-hero__avatar + .event-hero__avatar {
margin-left: -8px;
}
.event-hero__avatar--image {
overflow: hidden;
background: var(--surface);
border: 2px solid var(--white);
padding: 0;
}
.event-hero__avatar--image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.event-hero__social-text {
font-family: var(--font-body);
font-size: var(--text-s);
color: var(--text-mid);
font-weight: 600;
}
.event-hero__social-text strong {
font-weight: 600;
}
/* ═══════════════════════════════════════════
Two-Column Content Area
═══════════════════════════════════════════ */
.event-content {
padding-top: 16px;
padding-bottom: 80px;
}
/* ─── Main Column Sections ─── */
.event-main {
display: flex;
flex-direction: column;
gap: 40px;
}
.event-section {
/* Individual content section */
}
.event-section__title {
color: var(--text-dark);
margin-bottom: 16px;
}
.event-section__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
margin-bottom: 20px;
gap: 8px 16px;
position: relative;
z-index: 10;
}
.event-section__header .event-section__title {
margin-bottom: 0;
}
.event-section__view-all {
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 600;
color: var(--accent);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 0.15s ease, transform 0.15s ease;
}
.event-section__view-all:hover {
color: var(--text-dark);
transform: translateX(2px);
}
/* ─── Related-events carousel ───
Horizontal scroll-snap track at all viewports.
Mobile: 280px fixed-width cards. 960–1199px: 3 across. 1200–1499px:
4 across. ≥1500px: 5 across (mirrors the events-archive grid breakpoints
from template-events.php so the carousel cards never appear larger than
the archive cards on the same viewport).
Alpine.data('eventCarousel') manages active-dot state + arrow nav. */
.event-carousel {
position: relative;
}
.event-carousel__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 24px) / 3);
gap: 12px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
/* `overflow-x: auto` forces `overflow-y` to compute as `auto` per the
CSS spec, which clips card box-shadows on every side. Give shadows
room inside the track's clipped box via vertical AND horizontal
padding, and compensate with matching negative margins so visual
spacing to neighbouring elements is unchanged.
Vertical: hover shadow is `0 12px 40px` (visible ~52px below);
60px clears it. Margin-block collapses with the controls'
`margin-top: 24px` to preserve the original 24px gap.
Horizontal: hover shadow extends ~40px past each side. 40px clears
it. Safe to bleed -40px on either side of the main column —
right goes into the 48px `.layout-sidebar` column gap (8px to
spare before the sidebar); left goes 8px past the container's
32px padding on narrow viewports but is clipped by the
`body { overflow-x: hidden }` rule in base.css.
`scroll-padding-inline: 40px` keeps scroll-snap aligning cards to
the visual content edge (not the bled box edge), so card #1 sits
at the same on-screen position as before — the 40px to its left
is now the in-track padding region where its left shadow lives. */
padding-block: 60px;
margin-block: -60px;
padding-inline: 40px;
margin-inline: -40px;
scroll-padding-inline: 40px;
}
.event-carousel__track::-webkit-scrollbar {
display: none;
}
.event-carousel__track > .event-card,
.event-carousel__track > article {
scroll-snap-align: start;
}
/* Suppress the fade-in-up's initial 32px downward translate on cards
inside the carousel. With overflow-x: auto promoting overflow-y to
auto, that 32px offset on pre-`.is-visible` cards creates a vertical
scroll zone that competes with horizontal swipe on touch devices.
The opacity fade still works — cards entering the horizontal viewport
still receive `.is-visible` and fade in via the IntersectionObserver
in js/scroll-animations.js. The :not(.is-visible) gate means the
normal hover translateY(-4px) lift continues to work once cards have
animated in. */
.event-carousel__track .fade-in-up:not(.is-visible) {
transform: translateY(0);
}
@media (max-width: 959px) {
.event-carousel__track {
grid-auto-columns: 280px;
/* Bleed past the container's padding so cards can scroll all the
way to the viewport edge. `.container` is 16px each side under
768px, 32px each side from 768–959px. The negative margin pulls
the track out of the padding; the matching positive padding
keeps cards inset in the resting position; scroll-padding-inline
makes scroll-snap target the padded edge (without it, snap with
`mandatory` ignores padding and slams the active card flush). */
margin-inline: calc(-1 * var(--space-md));
padding-inline: var(--space-md);
scroll-padding-inline: var(--space-md);
}
}
@media (min-width: 768px) and (max-width: 959px) {
.event-carousel__track {
margin-inline: calc(-1 * var(--space-xl));
padding-inline: var(--space-xl);
scroll-padding-inline: var(--space-xl);
}
}
/* Single-event "You might also like" carousel — it lives in the narrow main
column of the main + sidebar layout. The 3-across base rule squeezes cards
down to ~145px between 960–1085px; drop to 2 across in that band so cards
never fall below ~190px before the visible count changes. (3-across resumes
at ≥1086px, where each card is ≥190px again.) Scoped to
body.single-tribe_events so the homepage showcase + account carousels —
both full-width — keep their own sizing. */
@media (min-width: 960px) and (max-width: 1085px) {
body.single-tribe_events .event-carousel__track {
grid-auto-columns: calc((100% - 12px) / 2);
}
}
/* Wider viewports — show 4 / 5 cards. Card width = (100% − total gaps) / N,
where total gaps = (N − 1) × gap (12px). Scoped to the account section
(`body.woocommerce-account`) ONLY — the single-event "You might also
like" carousel sits in a narrower column (main + sidebar layout); it tops
out at 3 across (see the 960–1085px override above), so the 4 / 5
breakpoints below never apply to it. */
@media (min-width: 1200px) {
.woocommerce-account .event-carousel__track {
grid-auto-columns: calc((100% - 36px) / 4);
}
}
@media (min-width: 1500px) {
.woocommerce-account .event-carousel__track {
grid-auto-columns: calc((100% - 48px) / 5);
}
}
.event-carousel__controls {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 24px;
}
.event-carousel__arrow {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
border: 1px solid var(--muted);
background: var(--white);
color: var(--text-mid);
font-size: 22px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
opacity: 0;
}
.event-carousel__arrow:hover:not(:disabled) {
background: var(--accent);
color: var(--white);
border-color: var(--accent);
}
.event-carousel__arrow:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.event-carousel__arrow:disabled {
opacity: 0;
}
.event-carousel__dots {
display: flex;
align-items: center;
gap: 8px;
}
.event-carousel__dot {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
border: none;
background: var(--muted);
padding: 0;
cursor: pointer;
transition: background 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
}
.event-carousel__dot:hover {
background: var(--subtle);
}
.event-carousel__dot:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.event-carousel__dot--active {
background: var(--accent);
width: 24px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
.event-carousel__track {
scroll-behavior: auto;
}
.event-carousel__arrow,
.event-carousel__dot {
transition: none;
}
}
/* ─── Showcase modifier — full-bleed homepage carousel ───
* Breaks out of the parent .container so the carousel spans the full
* viewport edge-to-edge. First card has a small left inset so it doesn't
* butt against the screen edge; the track itself runs to the right edge
* so the last visible card teases the "more to come" feel. */
.event-carousel--showcase {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.event-carousel--showcase .event-carousel__track {
/* Replace the default 40px / -40px padding/margin trick — for the
* full-bleed showcase we want cards visible right to the viewport
* edges. A small left inset gives the first card breathing room. */
padding-inline: var(--space-md);
margin-inline: 0;
scroll-padding-inline-start: var(--space-md);
}
/* Card density at desktop breakpoints — sized so the visible card count
* comes out to a non-integer (e.g. 5.4, 6.4) so the next/previous card
* is naturally PARTIALLY visible on the leading/trailing edge. This is
* the "peek mode" / Slick "centerMode"-style affordance that tells the
* user there's more content to swipe to.
*
* Card-count = (visible-cards + 1) × 0.4 fractional → ~40% peek of the
* neighbour-card visible at any non-edge scroll position. */
@media (min-width: 960px) {
.event-carousel--showcase .event-carousel__track {
/* ~3 full + peek (3.4 cards across the viewport) */
grid-auto-columns: calc((100% - 2.4 * 12px) / 3.4);
}
}
@media (min-width: 1280px) {
.event-carousel--showcase .event-carousel__track {
/* ~4 full + peek (4.4 cards) */
grid-auto-columns: calc((100% - 3.4 * 12px) / 4.4);
}
}
@media (min-width: 1600px) {
.event-carousel--showcase .event-carousel__track {
/* ~5 full + peek (5.4 cards) — the user's target density */
grid-auto-columns: calc((100% - 4.4 * 12px) / 5.4);
}
}
/* Prose (description WYSIWYG) */
.event-section__body.prose {
font-family: var(--font-body);
color: var(--text-mid);
line-height: 1.75;
}
.event-section__body.prose :is(p, ul, ol) {
margin-bottom: 14px;
}
.event-section__body.prose p:last-child {
margin-bottom: 0;
}
.event-section__body.prose strong {
color: var(--text-dark);
font-weight: 600;
}
/* ─── What's Included ─── */
.event-inclusions {
display: flex;
gap: 16px;
align-items: flex-start;
}
.event-inclusions__title {
color: var(--text-dark);
margin-bottom: 16px;
}
.event-inclusions__pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.event-inclusions__pill {
font-family: var(--font-body);
font-size: var(--text-s);
font-weight: 600;
color: var(--accent);
background: rgba(224, 64, 160, 0.08);
padding: 5px 12px;
border-radius: var(--radius-full);
border: 1px solid rgba(224, 64, 160, 0.1);
}
/* ─── Event Details Grid ─── */
.event-details-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 639px) {
.event-details-grid {
grid-template-columns: 1fr;
}
}
.event-detail {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--surface);
border-radius: var(--radius-md);
border: 1px solid rgba(106, 96, 128, 0.05);
}
.event-detail__icon {
color: var(--accent);
display: flex;
flex-shrink: 0;
}
.event-detail__label {
font-family: var(--font-body);
font-size: var(--text-s);
color: var(--text-mid);
font-weight: 500;
}
.event-detail__value {
font-family: var(--font-body);
color: var(--text-dark);
font-weight: 600;
}
/* ─── Social Timeline ─── */
.event-timeline__inner {
background: linear-gradient(135deg, var(--dark) 0%, #1E1230 100%);
border-radius: 20px;
padding: 40px 36px;
position: relative;
overflow: hidden;
}
@media (max-width: 639px) {
.event-timeline__inner {
padding: 28px 20px;
}
}
.event-timeline__glow {
position: absolute;
top: -20%;
right: -10%;
width: 50%;
height: 80%;
background: radial-gradient(ellipse, rgba(224, 64, 160, 0.08), transparent 70%);
filter: blur(60px);
pointer-events: none;
}
.event-timeline__content {
position: relative;
z-index: 2;
}
.event-timeline__overline {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 600;
color: var(--accent);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 10px;
}
.event-timeline__title {
color: var(--white);
margin-bottom: 32px;
}
.event-timeline__accent {
color: var(--accent);
}
/* Steps */
.event-timeline__steps {
display: flex;
flex-direction: column;
position: relative;
}
.event-timeline__line {
position: absolute;
left: 22px;
top: 22px;
bottom: 22px;
width: 2px;
background: linear-gradient(
to bottom,
rgba(224, 64, 160, 0.25),
rgba(160, 112, 240, 0.25),
rgba(240, 200, 64, 0.25),
rgba(64, 184, 224, 0)
);
}
.event-timeline__step {
display: flex;
gap: 20px;
padding: 16px 0;
position: relative;
}
.event-timeline__dot {
width: 44px;
height: 44px;
border-radius: 12px;
flex-shrink: 0;
border: 2px solid;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-m);
position: relative;
z-index: 2;
background-color: var(--dark);
}
.event-timeline__step-content {
flex: 1;
}
.event-timeline__step-time {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-s);
margin-bottom: 4px;
}
.event-timeline__step-title {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-body);
color: var(--white);
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.event-timeline__step-desc {
font-family: var(--font-body);
color: var(--subtle);
line-height: 1.6;
}
.event-timeline__step-venue {
font-family: var(--font-body);
color: var(--accent);
margin-top: 4px;
}
.event-timeline__step-venue-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--accent);
text-decoration: none;
font-weight: 500;
transition: color 0.15s ease, transform 0.15s ease;
}
.event-timeline__step-venue-link:hover,
.event-timeline__step-venue-link:focus {
color: var(--white);
transform: translateX(2px);
}
/* ─── Seating Plan ─── */
.event-seating {
background: var(--surface);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid rgba(106, 96, 128, 0.08);
}
.event-seating__plan {
text-align: center;
background: var(--white);
}
.event-seating__plan-img {
max-width: 100%;
height: auto;
}
.event-seating__info {
padding: 20px 24px;
}
.event-seating__indicator {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(224, 64, 160, 0.06);
border: 1px solid rgba(224, 64, 160, 0.12);
border-radius: var(--radius-full);
padding: 5px 14px;
}
.event-seating__swatch {
width: 10px;
height: 10px;
border-radius: 3px;
background: rgba(224, 64, 160, 0.3);
border: 1px solid rgba(224, 64, 160, 0.35);
}
.event-seating__label {
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 600;
color: var(--accent);
}
.event-seating__note {
font-family: var(--font-body);
font-size: var(--text-s);
color: var(--text-mid);
line-height: 1.5;
}
/* FAQ Accordion lives in components.css — it renders site-wide via the
faq_accordion FC block (page.php loop), and events.css is conditional. */
/* ─── Social Proof Block ─── */
.event-social-proof {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: var(--surface);
border-radius: 12px;
border: 1px solid rgba(106, 96, 128, 0.06);
}
.event-social-proof__avatars {
display: flex;
}
.event-social-proof__avatar {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 700;
color: var(--white);
position: relative;
}
.event-social-proof__avatar + .event-social-proof__avatar {
margin-left: -8px;
}
.event-social-proof__avatar--image {
overflow: hidden;
background: var(--surface);
border: 2px solid var(--white);
padding: 0;
}
.event-social-proof__avatar--image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.event-social-proof__text {
font-family: var(--font-body);
font-size: var(--text-s);
color: var(--text-mid);
line-height: 1.5;
}
.event-social-proof__text strong {
color: var(--text-dark);
}
.event-social-proof__warning {
color: var(--warning);
}
/* ═══════════════════════════════════════════
Sidebar Components
═══════════════════════════════════════════ */
.event-sidebar {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Hide the inline `` rendered by
* `wc_print_notices()` inside `.event-sidebar__notices` — the Phase 45
* wc-notice-toast.js scanner converts each notice to a toast on
* DOMContentLoaded; this rule prevents the inline block from flashing
* before JS runs. Same pattern as Phase 38's `.weo-checkout-page` hide. */
.event-sidebar__notices {
display: none;
}
/* ─── Booking Card ─── */
.booking-card {
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid rgba(106, 96, 128, 0.1);
box-shadow: 0 8px 40px rgba(14, 10, 24, 0.08), 0 2px 12px rgba(14, 10, 24, 0.04);
}
.booking-card__header {
padding: 20px 24px 16px;
border-bottom: 1px solid rgba(106, 96, 128, 0.07);
}
.booking-card__heading {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-m);
color: var(--text-dark);
margin-bottom: 2px;
}
.booking-card__sub {
font-family: var(--font-body);
font-size: var(--text-s);
color: var(--text-mid);
}
/* Pricing */
.booking-card__pricing {
padding: 20px 24px 0;
}
.booking-card__price-box {
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 12px;
position: relative;
border: 1.5px solid rgba(106, 96, 128, 0.08);
}
.booking-card__price-box--member {
background: rgba(48, 184, 112, 0.04);
border: 1.5px solid rgba(48, 184, 112, 0.15);
}
.booking-card__price-box--nonmember {
background: var(--surface);
border: 1.5px solid rgba(106, 96, 128, 0.08);
}
.booking-card__price-label {
position: absolute;
top: -9px;
left: 14px;
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 700;
padding: 2px 10px;
border-radius: var(--radius-full);
letter-spacing: 0.04em;
text-transform: uppercase;
background: var(--text-mid);
color: var(--white);
}
.booking-card__price-label--member {
background: var(--success);
color: var(--white);
}
.booking-card__price-label--nonmember {
background: var(--text-mid);
color: var(--white);
}
.booking-card__price-row {
display: flex;
align-items: flex-end;
gap: 10px;
margin-top: 4px;
}
.booking-card__price {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--text-h2);
color: var(--text-dark);
letter-spacing: -0.02em;
}
.booking-card__from {
font-family: var(--font-body);
font-size: var(--text-s);
font-weight: 500;
color: var(--text-mid);
letter-spacing: 0;
display: block;
line-height: 1;
}
.booking-card__rrp {
font-family: var(--font-body);
font-size: var(--text-body);
color: var(--text-mid);
text-decoration: line-through;
margin-bottom: 8px;
}
.booking-card__price-note {
font-family: var(--font-body);
font-size: var(--text-s);
color: var(--text-mid);
}
.booking-card__save-text {
font-family: var(--font-body);
font-size: var(--text-s);
font-weight: 600;
color: var(--success);
margin-top: 4px;
}
.booking-card__upsell-text {
font-family: var(--font-body);
font-size: var(--text-s);
font-weight: 600;
margin-top: 4px;
}
.booking-card__upsell-link {
color: var(--accent);
font-weight: 600;
text-decoration: underline;
}
/* Ticket selector */
.booking-card__selector {
padding: 0 24px 20px;
}
.booking-card__selector-row {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: center;
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--muted);
}
.booking-card__selector-row:last-of-type {
border-bottom: none;
}
.booking-card__selector-row--sold-out {
opacity: 0.5;
}
.booking-card__section-name {
font-family: var(--font-body);
font-size: var(--text-s);
font-weight: 600;
color: var(--text-dark);
}
.booking-card__section-price-inline {
display: flex;
align-items: baseline;
gap: var(--space-xs);
margin-top: 2px;
}
.booking-card__section-price {
text-align: right;
font-size: var(--text-small);
}
.booking-card__section-price-member {
font-weight: 700;
color: var(--success);
}
.booking-card__section-price-basic {
color: var(--text-mid);
font-size: var(--text-xs);
}
.booking-card__remaining--sold-out {
color: var(--error);
font-weight: 600;
}
.booking-card__cap-info {
font-size: var(--text-s);
color: var(--text-mid);
margin-top: 4px;
font-style: italic;
}
.booking-card__remaining {
font-family: var(--font-body);
font-size: var(--text-s);
color: #e05050;
font-weight: 600;
}
/* Qty spinner */
.booking-card__qty {
display: flex;
align-items: center;
width: 123px;
flex-shrink: 0;
border: 1.5px solid rgba(106, 96, 128, 0.12);
border-radius: var(--radius-md);
overflow: hidden;
}
.booking-card__qty-btn {
width: 40px;
height: 40px;
border: none;
cursor: pointer;
background: transparent;
font-size: var(--text-body);
font-weight: 600;
color: var(--text-mid);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
transition: color 0.15s;
}
.booking-card__qty-btn:disabled {
color: rgba(106, 96, 128, 0.2);
cursor: default;
}
.booking-card__qty-btn:hover:not(:disabled) {
color: var(--text-dark);
}
.booking-card__qty-value {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-body);
color: var(--text-dark);
border-left: 1.5px solid rgba(106, 96, 128, 0.08);
border-right: 1.5px solid rgba(106, 96, 128, 0.08);
}
/* Total */
.booking-card__total {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 16px;
padding: 12px 0;
border-top: 1px solid rgba(106, 96, 128, 0.06);
}
.booking-card__total-label {
font-family: var(--font-body);
font-size: var(--text-s);
color: var(--text-mid);
}
.booking-card__total-amount {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--text-h3);
color: var(--text-dark);
letter-spacing: -0.02em;
}
/* Upgrade upsell notice */
.booking-card__upgrade-notice {
display: flex;
gap: 8px;
align-items: flex-start;
padding: 12px 14px;
margin-bottom: 16px;
background: linear-gradient(135deg, var(--accent-light), rgba(160, 112, 240, 0.06));
border: 1px solid rgba(224, 64, 160, 0.12);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: var(--text-s);
line-height: 1.5;
color: var(--text-dark);
}
.booking-card__upgrade-icon {
flex-shrink: 0;
font-size: var(--text-body);
line-height: 1.3;
}
.booking-card__upgrade-notice p {
margin: 0;
}
.booking-card__upgrade-link {
font-weight: 600;
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.booking-card__upgrade-link:hover {
color: var(--accent-hover);
}
.booking-card__submit {
width: 100%;
justify-content: center;
padding: 16px 32px;
font-size: var(--text-body);
border-radius: 12px;
text-align: center;
}
.booking-card__hint {
text-align: center;
margin-top: 10px;
font-family: var(--font-body);
font-size: var(--text-xs);
color: var(--text-mid);
}
/* Trust signals */
.booking-card__trust {
padding: 14px 24px;
border-top: 1px solid rgba(106, 96, 128, 0.06);
}
.booking-card__trust-item {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
font-family: var(--font-body);
font-size: var(--text-s);
color: var(--text-mid);
font-weight: 500;
margin: 8px 0;
}
.booking-card__trust-item svg {
color: var(--success);
}
.weo-order-summary__cards {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.weo-order-summary__cards .weo-payment-icon {
height: 20px;
width: auto;
display: block;
}
/* Sold out booking card */
.booking-card--sold-out .booking-card__header {
border-bottom: none;
}
.booking-card__sold-out-body {
padding: 0 24px 24px;
text-align: center;
}
.booking-card__sold-out-text {
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 600;
color: var(--text-dark);
margin-bottom: 8px;
}
.booking-card__sold-out-sub {
font-family: var(--font-body);
font-size: var(--text-body);
color: var(--text-mid);
margin-bottom: 16px;
}
.booking-card__sold-out-link {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 16px;
font-family: var(--font-body);
font-size: var(--text-s);
font-weight: 600;
color: var(--text-mid);
text-decoration: none;
transition: color 0.15s ease, transform 0.15s ease;
}
.booking-card__sold-out-link:hover,
.booking-card__sold-out-link:focus {
color: var(--accent);
transform: translateX(2px);
}
/* Waitlist signup form (inside sold-out booking card) */
.waitlist-form {
padding: 16px;
background: var(--surface);
border: 1px solid var(--muted);
border-radius: var(--radius-md);
text-align: left;
}
.waitlist-form__header {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 14px;
}
.waitlist-form__icon {
flex-shrink: 0;
margin-top: 2px;
}
.waitlist-form__heading {
font-family: var(--font-display);
font-size: var(--text-body);
font-weight: 600;
color: var(--text-dark);
line-height: 1.2;
}
.waitlist-form__sub {
margin: 4px 0 0;
font-family: var(--font-body);
font-size: var(--text-body);
color: var(--text-mid);
line-height: 1.4;
}
.waitlist-form__form {
display: flex;
flex-direction: column;
gap: 10px;
}
.waitlist-form__identity {
margin: 0 0 4px;
font-family: var(--font-body);
font-size: var(--text-s);
color: var(--text-mid);
line-height: 1.4;
}
.waitlist-form__identity strong {
color: var(--text-dark);
font-weight: 600;
}
.waitlist-form__label {
display: flex;
flex-direction: column;
gap: 4px;
}
.waitlist-form__label-text {
font-family: var(--font-body);
font-size: var(--text-s);
font-weight: 600;
color: var(--text-dark);
}
.waitlist-form__input {
width: 100%;
padding: 12px;
font-family: var(--font-body);
font-size: var(--text-body);
color: var(--text-dark);
background-color: var(--white);
border: 1px solid #e6e6e6;
border-radius: 8px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 3px 6px rgba(0, 0, 0, 0.02);
transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.waitlist-form__input:focus {
outline: 0;
border-color: var(--text-dark);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 3px 6px rgba(0, 0, 0, 0.02), 0 0 0 3px hsla(265, 43%, 11%, 0.25), 0 1px 1px 0 rgba(0, 0, 0, 0.08);
}
.waitlist-form__input:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.waitlist-form__submit {
width: 100%;
margin-top: 4px;
}
.waitlist-form__submit:disabled {
opacity: 0.7;
cursor: wait;
}
.waitlist-form__error {
margin: 0;
padding: 8px 12px;
font-family: var(--font-body);
font-size: var(--text-s);
color: var(--error);
background: rgba(232, 80, 64, 0.08);
border-radius: var(--radius-sm);
}
.waitlist-form__success {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 8px 0;
text-align: center;
color: var(--success);
}
.waitlist-form__success-icon {
color: var(--success);
}
.waitlist-form__success-text {
margin: 0;
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 500;
color: var(--text-dark);
}
/* Tier-restricted booking card */
.booking-card--tier-restricted .booking-card__pricing {
border-bottom: 1px solid var(--border);
}
.booking-card__tier-notice {
padding: 20px 24px 24px;
text-align: center;
}
.booking-card__tier-notice-icon {
display: block;
margin: 0 auto 10px;
}
.booking-card__tier-notice-text {
font-family: var(--font-body);
font-size: var(--text-body);
color: var(--text-mid);
margin: 0 0 16px;
line-height: 1.5;
}
.booking-card__upgrade-btn {
width: 100%;
}
/* Join-to-Book card (non-member, access OFF) */
.booking-card--join-required .booking-card__pricing {
border-bottom: 1px solid var(--border);
}
.booking-card__join-notice {
padding: 20px 24px 24px;
text-align: center;
}
.booking-card__join-notice-icon {
display: block;
margin: 0 auto 10px;
}
.booking-card__join-notice-text {
font-family: var(--font-body);
font-size: var(--text-s);
color: var(--text-mid);
margin: 0 0 16px;
line-height: 1.5;
}
.booking-card__join-btn {
width: 100%;
}
/* Non-member trial notice */
.booking-card__trial-notice {
display: flex;
align-items: flex-start;
gap: 10px;
background: rgba(64, 184, 224, 0.06);
border: 1px solid var(--cyan-light);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 14px;
}
.booking-card__trial-notice svg {
flex-shrink: 0;
margin-top: 1px;
color: var(--cyan);
}
.booking-card__trial-notice p {
font-size: var(--text-s);
color: var(--text-mid);
line-height: 1.5;
margin: 0;
}
/* Plain-text "Already a member? Log in" link below the primary CTA in
* each signed-out booking-card branch (active / tier-restricted /
* join-required). Muted by design so it doesn't compete with the CTA
* directly above; underline carries the affordance. */
.booking-card__login-link {
display: block;
margin-top: 14px;
color: var(--text-mid);
font-size: var(--text-s);
text-align: center;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s ease;
}
.booking-card__login-link:hover {
color: var(--accent);
}
/* ─── Pre-show Social Card ─── */
.social-card {
background: linear-gradient(135deg, var(--dark) 0%, #1E1230 100%);
border-radius: var(--radius-lg);
padding: 22px 22px 20px;
overflow: hidden;
position: relative;
border: 1px solid var(--accent-light);
box-shadow: 0 4px 24px rgba(224, 64, 160, 0.08);
}
.social-card__glow {
position: absolute;
top: -30%;
right: -20%;
width: 60%;
height: 80%;
background: radial-gradient(ellipse, rgba(224, 64, 160, 0.12), transparent 70%);
filter: blur(40px);
pointer-events: none;
}
.social-card__content {
position: relative;
z-index: 2;
}
.social-card__badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--accent-light);
border: 1px solid rgba(224, 64, 160, 0.25);
border-radius: var(--radius-full);
padding: 4px 12px;
margin-bottom: 12px;
font-size: var(--text-xs);
font-weight: 700;
color: var(--accent);
font-family: var(--font-body);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.social-card__heading {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-h4);
color: var(--white);
margin-bottom: 10px;
line-height: 1.3;
}
.social-card__venue {
color: var(--accent);
}
.social-card__desc {
font-family: var(--font-body);
color: var(--subtle);
line-height: 1.6;
margin-bottom: 14px;
}
.social-card__meta {
display: flex;
gap: 12px;
align-items: center;
}
.social-card__meta-item {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-size: var(--text-s);
font-weight: 600;
color: var(--muted);
}
.social-card__directions-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-size: var(--text-s);
font-weight: 600;
color: var(--accent);
text-decoration: none;
transition: color 0.15s ease, transform 0.15s ease;
}
.social-card__directions-link:hover,
.social-card__directions-link:focus {
color: var(--white);
transform: translateX(2px);
}
/* ─── Membership Upsell ─── */
.membership-upsell {
background: linear-gradient(135deg, rgba(224, 64, 160, 0.06), rgba(160, 112, 240, 0.04));
border: 1px solid rgba(224, 64, 160, 0.12);
border-radius: 14px;
padding: 18px 20px;
}
.membership-upsell__heading {
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 600;
color: var(--accent);
margin-bottom: 6px;
}
.membership-upsell__text {
font-family: var(--font-body);
font-size: var(--text-body);
color: var(--text-mid);
line-height: 1.6;
margin-bottom: 12px;
}
.membership-upsell__btn {
font-size: var(--text-s);
padding: 8px 16px;
}
/* ─── Venue Map Card ─── */
.venue-map-card {
border: 1px solid rgba(106, 96, 128, 0.1);
border-radius: 14px;
overflow: hidden;
}
.venue-map-card__map {
background: linear-gradient(135deg, var(--charcoal) 0%, var(--dark) 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--subtle);
font-family: var(--font-body);
font-size: var(--text-s);
}
.venue-map-card__info {
padding: 14px 18px;
background: var(--white);
}
.venue-map-card__name {
font-family: var(--font-body);
font-size: var(--text-h4);
font-weight: 600;
color: var(--text-dark);
}
.venue-map-card__address {
font-family: var(--font-body);
color: var(--text-mid);
margin-top: 2px;
}
.venue-map-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-size: var(--text-body);
color: var(--accent);
text-decoration: none;
font-weight: 600;
margin-top: 6px;
transition: color 0.15s ease, transform 0.15s ease;
}
.venue-map-card__link:hover,
.venue-map-card__link:focus {
color: var(--text-dark);
transform: translateX(2px);
}
/* ─── Bottom CTA ─── */
.event-bottom-cta {
position: relative;
overflow: hidden;
padding: 96px 5%;
}
.event-bottom-cta__glow {
position: absolute;
top: -30%;
left: 20%;
width: 40%;
height: 100%;
background: radial-gradient(ellipse, rgba(224, 64, 160, 0.08), transparent 70%);
filter: blur(60px);
pointer-events: none;
}
.event-bottom-cta .cta-section__ctas {
margin-top: 48px;
}
@media (max-width: 639px) {
.event-bottom-cta .cta-section__ctas {
margin-top: 24px;
}
}
/* Theatre-curtain background (real lazy ![]()
, dedicated classes so the
hero-tuned .section__bg-media mobile rules don't clip coverage). */
.event-bottom-cta__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.event-bottom-cta__bg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0.6;
}
/* Per-audience tagline below the heading.
Scoped under .event-bottom-cta (0,2,0) to beat `.section--dark p` (0,1,1). */
.event-bottom-cta .event-bottom-cta__tagline {
font-family: var(--font-body);
font-size: var(--text-m);
line-height: 1.6;
color: #d4c6ef;
max-width: 560px;
margin: 0 auto var(--space-md);
}
/* Functional-message eyebrow — sits ABOVE the headline in every bottom-CTA
state (waitlist / on-sale / low-stock). Small, bold, accent, display font.
Scoped under .event-bottom-cta (0,2,0) to beat `.section--dark p` (0,1,1).
Colour is var(--accent) (pink by default; follows the event's audience accent). */
.event-bottom-cta .event-bottom-cta__eyebrow {
font-family: var(--font-display);
font-size: var(--text-m);
font-weight: 700;
color: var(--accent);
line-height: 1.4;
max-width: 560px;
margin: 0 auto var(--space-lg);
}
/* Hook line — override the global `.hero__hook { color:#fff!important }`. */
.event-bottom-cta .hero__hook {
color: var(--subtle) !important;
}
/* ═══════════════════════════════════════════
Mobile Responsive — Event Single
═══════════════════════════════════════════ */
@media (max-width: 959px) {
.event-hero__gallery {
order: -1;
}
/* On mobile, sidebar unsticks and sits below content */
.event-sidebar {
position: static !important;
}
}
@media (max-width: 639px) {
.event-hero__content {
padding-top: 24px;
padding-bottom: 0;
}
.event-inclusions {
flex-direction: column;
}
.event-timeline__inner {
padding: 24px 16px;
}
.booking-card__price {
font-size: var(--text-h3);
}
.event-hero__cta-row {
flex-direction: column;
align-items: stretch;
}
.event-hero__action-btns {
justify-content: center;
}
}
/* Sticky mobile-only hero CTA — driven by Alpine stickyHeroCta in alpine-init.js. */
.event-hero__sticky-cta-mount {
display: contents;
}
.event-hero__sticky-cta {
display: none;
}
@media (max-width: 639px) {
.event-hero__sticky-cta {
display: block;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 96;
padding: var(--space-md);
padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
background: var(--white);
border-top: 1px solid var(--muted);
box-shadow: 0 -4px 20px rgba(14, 10, 24, 0.08);
}
.event-hero__sticky-cta__btn {
width: 100%;
justify-content: center;
}
}
/* ─── Booking-card cap toast ─────────────────────────────────────────
* Fires when the qty + button is tapped while the user is at the trial
* or per-event anti-tout cap. Replaces the persistent inline notices
* that previously sat above the Add-to-Cart CTA. Teleported to
* so it escapes the .booking-card stacking context (otherwise hidden
* behind the fixed nav). Reuses the weoToastIn / weoToastOut /
* weoToastProgress keyframes from css/animations.css that the
* account-page + AR-page toasts also share. */
.booking-toast {
position: fixed;
top: calc(var(--nav-height) + 16px);
right: 24px;
z-index: 9999;
max-width: 380px;
background: var(--dark);
color: var(--white);
border: none;
border-radius: 14px;
padding: 14px 18px 16px 46px;
margin: 0;
font-size: var(--text-s);
font-weight: 500;
line-height: 1.45;
overflow: hidden;
box-shadow: 0 10px 40px rgba(14, 10, 24, 0.25);
animation: weoToastIn 0.35s var(--ease-out-expo) backwards;
}
.booking-toast p {
margin: 0;
}
.booking-toast__link {
color: var(--white);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 600;
margin-left: 4px;
}
.booking-toast__link:hover {
text-decoration: none;
}
/* Alert-circle icon, inline SVG via data URI — keeps the toast as a
* single self-contained selector with no extra DOM. White stroke for
* the dark toast background. */
.booking-toast::before {
content: "";
position: absolute;
top: 16px;
left: 18px;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
}
/* Countdown bar — synced to the JS auto-dismiss (5s). Rendered as a
* real element (not ::after) so the markup-side
* keyed on `toast.tick` can remount the node on each re-trigger,
* restarting the CSS animation cleanly. A pseudo-element wouldn't
* restart on class/style mutations alone; only a destroyed + recreated
* element gets a fresh animation cycle. */
.booking-toast__bar {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: var(--accent);
transform-origin: left center;
animation: weoToastProgress 5s linear forwards;
pointer-events: none;
}
@media (max-width: 639px) {
.booking-toast {
top: calc(var(--nav-height) + 12px);
left: 16px;
right: 16px;
max-width: none;
}
}
@media (prefers-reduced-motion: reduce) {
.booking-toast {
animation: none;
}
.booking-toast__bar {
animation: none;
}
}
/* ═══════════════════════════════════════════
"Next year" event notice
Top-of-hero banner flagging events that fall
in a later calendar year. Mirrors the checkout
login-prompt card (css/components.css) and
reuses its global entrance + pulse keyframes.
Renders only on single-tribe_events.php, which
always enqueues this stylesheet.
═══════════════════════════════════════════ */
.weo-event-notice {
position: relative;
display: flex;
align-items: center;
gap: 12px;
background: var(--white);
border: 3px solid var(--accent);
border-radius: 14px;
padding: 14px 20px;
margin-bottom: var(--space-lg);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
box-sizing: border-box;
/* Entrance: slide-in-from-top + fade (keyframe in components.css). */
animation: weoLoginPromptIn 0.55s var(--ease-out-expo) 0.15s backwards;
}
/* Pink ripple halo — two pulses then quiet, matching the login prompt.
A ::before pseudo keeps the card's own resting shadow untouched and
pointer-events: none stops the halo blocking clicks. */
.weo-event-notice::before {
content: "";
position: absolute;
inset: 0;
border-radius: 14px;
box-shadow: 0 0 0 0 rgba(224, 64, 160, 0);
animation: weoLoginPromptPulse 1.8s var(--ease-out-expo) 0.8s 2 backwards;
pointer-events: none;
}
.weo-event-notice__icon {
display: inline-flex;
flex-shrink: 0;
color: var(--accent);
}
.weo-event-notice__copy {
margin: 0;
color: var(--text-dark);
font-size: var(--text-s);
line-height: 1.4;
font-weight: 600;
}
.weo-event-notice__copy strong {
color: var(--accent);
font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
.weo-event-notice,
.weo-event-notice::before {
animation: none;
}
}
@media (max-width: 639px) {
.weo-event-notice {
align-items: flex-start;
padding: 12px 16px;
}
}