(some legacy content uses ). Force
bold weight explicitly -- a global reset elsewhere was flattening it,
so emphasis typed in the admin editor didn't show on the public page. */
.tx-detail-description strong,
.tx-detail-description b {
font-weight: 700 !important;
}
.tx-detail-description em,
.tx-detail-description i {
font-style: italic !important;
}
/* Override BOM inline backgrounds and colors so dark theme works.
BOM tables don't have explicit width so they shrink to content. We
force 100% width on them so the text cell expands naturally next to
the image. The image cell stays sized to the image (default
behavior with an ![]() child), so we don't need to fight it. */
.tx-detail-description *,
.tx-detail-description div,
.tx-detail-description span,
.tx-detail-description p,
.tx-detail-description td,
.tx-detail-description table {
background: transparent !important;
background-color: transparent !important;
color: inherit !important;
}
.tx-detail-description table {
width: 100% !important;
}
.tx-detail-description td {
vertical-align: top;
padding: 0 16px 16px 0;
}
.tx-detail-description td:last-child {
padding-right: 0;
}
/* Paragraph + heading spacing. Tiptap emits blocks with no inline
styling; without explicit margins the public site renders them flush,
making the description look like one wall of text. We give paragraphs
a comfortable bottom margin and a slightly larger gap above headings
so structure is visible. */
.tx-detail-description p {
margin: 0 0 18px;
}
/* Empty blocks are how Tiptap encodes intentional blank lines
the user added by pressing Enter twice. Without a min-height the
paragraph collapses to zero, so multiple blank lines look like one.
The min-height matches a normal line of body text. */
.tx-detail-description p:empty {
min-height: 1em;
}
.tx-detail-description h1,
.tx-detail-description h2,
.tx-detail-description h3 {
margin: 24px 0 10px;
line-height: 1.25;
}
.tx-detail-description h1:first-child,
.tx-detail-description h2:first-child,
.tx-detail-description h3:first-child,
.tx-detail-description p:first-child {
margin-top: 0;
}
.tx-detail-description ul,
.tx-detail-description ol {
margin: 0 0 14px;
padding-left: 24px;
}
.tx-detail-description li {
margin-bottom: 6px;
}
/* New rich-text editor outputs
with optional inline width:N% and an optional . The editor
uses CSS Grid in admin for selection chrome -- public side just needs the
block-level positioning + caption styling. */
.tx-detail-description figure {
margin: 16px 0;
display: block;
}
.tx-detail-description figure img {
display: block;
max-width: 100%;
height: auto;
}
/* Full = block-level image at its natural size (no stretching beyond
the image's intrinsic width). max-width: 100% keeps oversized images
contained within the column; width: auto + display: block lets the
figure shrink to the image's natural width when smaller than the
column. Left-aligned (no auto margins) to match the editor preview. */
.tx-detail-description figure.img-full {
display: block;
width: auto;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.tx-detail-description figure.img-full img {
display: block;
max-width: 100%;
height: auto;
}
/* Center = block image centered, no text wrap. Default width 55%
mirrors the editor preview. Inline style="width:NN%" (from the
Size buttons) overrides via specificity since it's on the element. */
.tx-detail-description figure.img-center {
display: block;
width: 55%;
margin: 16px auto;
text-align: center;
}
.tx-detail-description figure.img-center img {
display: block;
margin: 0 auto;
}
/* Left / Right float so paragraphs wrap around. Default width 38%
mirrors the editor preview; inline width:NN% from the Size buttons
overrides. The max-width: 360px cap prevents wide customer columns
from rendering the image much larger than what was previewed in the
editor (the editor content area is narrower, so 38% there is ~280px;
on a 900px+ public column 38% becomes 340px+ and visually dominates).
The cap keeps the float closer to the editor's appearance. */
.tx-detail-description figure.img-left {
float: left;
width: 38%;
max-width: 360px;
margin: 4px 18px 12px 0;
}
.tx-detail-description figure.img-right {
float: right;
width: 38%;
max-width: 360px;
margin: 4px 0 12px 18px;
}
/* Clear floats at the description block boundary so subsequent siblings
(notices, schedule, etc.) don't get pulled up next to a floated image. */
.tx-detail-description::after {
content: "";
display: block;
clear: both;
}
/* Optional caption styling - editor adds when "+ Caption" is on.
!important needed to beat the wildcard color:inherit reset earlier in
this section. */
.tx-detail-description figure figcaption,
.tx-detail-description figcaption {
font-size: 13px;
color: var(--tx-muted) !important;
text-align: center;
margin-top: 6px;
font-style: italic;
}
/* On narrow viewports floated images get crammed; drop the float so the
image takes its own line and the wrapping text reads cleanly. */
@media (max-width: 640px) {
.tx-detail-description figure.img-left,
.tx-detail-description figure.img-right {
float: none;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
}
/* YouTube embed: responsive video with native aspect ratio. Same
wrapper as images, with the .video-embed class. The
aspect-ratio is set inline on each embed by the editor (16/9 for
normal videos, 9/16 for Shorts, etc.); this rule supplies the
fallback for legacy embeds without an inline aspect-ratio. */
.tx-detail-description figure.video-embed {
position: relative;
width: 100%;
margin: 16px auto;
aspect-ratio: 16/9;
overflow: hidden;
background: #000;
border-radius: 6px;
float: none;
max-width: 100%;
}
.tx-detail-description figure.video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* --- Notices: accessibility + refund --- */
.tx-detail-notice {
display: flex;
flex-direction: column;
gap: 10px;
}
.tx-detail-notice p { margin: 0; }
.tx-detail-notice__access {
font-size: 13px;
line-height: 1.5;
color: var(--tx-muted);
}
.tx-detail-notice__access a {
color: var(--tx-coral);
text-decoration: none;
font-weight: 500;
}
.tx-detail-notice__access a:hover { text-decoration: underline; }
.tx-detail-notice__icon {
width: 16px;
height: 16px;
vertical-align: middle;
}
.tx-detail-notice__refund {
font-size: 13px;
font-weight: 600;
color: var(--tx-avail-out);
letter-spacing: 0.02em;
}
/* --- Modal alert (used via colorbox for promo-required prompt) --- */
.tx-modal-alert {
padding: 24px;
text-align: center;
}
.tx-modal-alert h3 {
font-size: 18px;
font-weight: 600;
color: var(--tx-text);
margin: 0 0 12px;
}
.tx-modal-alert p {
font-size: 14px;
color: var(--tx-muted);
margin: 0;
}
/* --- Mobile --- */
@media (max-width: 700px) {
.tx-detail-card {
padding: 18px 16px;
/* Email-template descriptions (#iDesignTemplate) have a 640px-wide
table giving this card a 640px intrinsic minimum. As a flex item
in .tx-detail-page's column the card then refuses to shrink and
overflows, collapsing the sibling notice text to one-word-per-line.
min-width:0 lets it shrink; overflow clips residual table spill. */
min-width: 0;
overflow-x: hidden;
}
.tx-detail-description,
.tx-detail-description #iDesignTemplate {
min-width: 0 !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
.tx-detail-hero {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.tx-detail-hero__action {
align-self: flex-start;
}
.tx-detail-hero__title {
font-size: 22px !important;
}
.tx-detail-meta {
gap: 12px;
}
.tx-detail-meta__directions {
margin-left: 0;
width: 100%;
}
.tx-perf-picker {
width: 100% !important;
min-width: 0;
}
/* Stack BOM / email-template table cells vertically. These legacy
descriptions use nested tables with fixed pixel WIDTH ATTRIBUTES
and rely on email-client mobile CSS that doesn't exist here, so on
a phone the fixed widths crush the text cell to one-word-per-line.
Force every table part to linearize and drop fixed/min widths. */
.tx-detail-description table,
.tx-detail-description tbody,
.tx-detail-description tr,
.tx-detail-description td,
.tx-detail-description #iDesignTemplate table,
.tx-detail-description #iDesignTemplate tbody,
.tx-detail-description #iDesignTemplate tr,
.tx-detail-description #iDesignTemplate td {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.tx-detail-description td {
padding: 0 0 14px 0;
}
.tx-detail-description td:last-child {
padding-bottom: 0;
}
.tx-detail-description img {
max-width: 100% !important;
width: auto !important;
height: auto !important;
}
}
/* ----------------------------------------------------------
HERO EVENT -- full-width featured banner above the grid/list
Renders on Gallery + Schedule views only.
Layout: image left, info right (desktop); stacked (mobile).
---------------------------------------------------------- */
/* Wrapper shares the same 1340px max-width and centering as
.event-container below, so the hero's left edge aligns with the
first column of cards. */
.tx-hero-wrap {
max-width: 1340px;
margin: 0 auto;
width: 100%;
padding: 12px 0 0;
box-sizing: border-box;
}
.tx-hero {
display: grid;
grid-template-columns: 320px 1fr;
gap: 0;
background: var(--tx-card-bg);
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-card);
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
/* Full-width hero: image cell fixed 320px, info fills the rest.
The wrapper (.tx-hero-wrap) caps the overall width at 1340px so the
hero still aligns with the grid/list below. */
width: 100%;
margin: 0 0 24px 0;
max-height: 280px;
box-sizing: border-box;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tx-hero:hover {
transform: translateY(-2px);
box-shadow: var(--tx-card-hover-shadow);
}
.tx-hero.is-hidden { display: none; }
/* Dark theme: bump border so card edge is visible against dark page */
.tx-hero {
border-color: rgba(255, 255, 255, 0.08);
}
body.theme-classic .tx-hero,
body.theme-cool .tx-hero,
body.theme-plum .tx-hero {
border-color: var(--tx-border);
}
.tx-hero__img-link {
display: block;
overflow: hidden;
line-height: 0;
text-decoration: none;
background: var(--tx-divider);
position: relative;
}
.tx-hero__badge {
position: absolute;
top: 12px;
left: 12px;
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: var(--tx-coral);
color: #fff;
font-family: var(--tx-font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 999px;
line-height: 1.2;
z-index: 1;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.tx-hero__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.tx-hero:hover .tx-hero__image { transform: scale(1.02); }
.tx-hero__body {
display: flex;
flex-direction: column;
padding: 22px 26px;
gap: 10px;
min-width: 0;
}
.tx-hero__title {
font-family: var(--tx-font-heading) !important;
font-size: 28px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: -0.015em !important;
text-transform: none !important;
color: var(--tx-text) !important;
margin: 0 !important;
}
.tx-hero__title a {
color: inherit !important;
text-decoration: none !important;
}
.tx-hero__title a:hover { text-decoration: underline !important; }
.tx-hero__date-row {
display: flex;
flex-direction: column;
gap: 4px;
}
.tx-hero__date {
font-size: 15px;
font-weight: 600;
color: var(--tx-text);
}
.tx-hero__next {
font-size: 13px;
color: var(--tx-muted);
}
.tx-hero__more {
font-size: 12px;
color: var(--tx-hint);
margin-left: 4px;
}
.tx-hero__venue {
font-size: 13px;
color: var(--tx-muted);
line-height: 1.4;
}
.tx-hero__venue .fptype::before {
content: '\B7';
opacity: 0.5
}
/* HTML description from BOM -- neutralize inline styles like we do on
the event detail page so dark theme works. */
.tx-hero__desc {
font-size: 13px;
line-height: 1.5;
color: var(--tx-muted);
max-height: 6em; /* roughly 4 lines, prevents runaway descriptions */
overflow: hidden;
position: relative;
}
.tx-hero__desc *,
.tx-hero__desc div,
.tx-hero__desc span,
.tx-hero__desc p,
.tx-hero__desc td,
.tx-hero__desc table {
background: transparent !important;
background-color: transparent !important;
color: inherit !important;
}
.tx-hero__desc img {
max-width: 100%;
height: auto;
}
.tx-hero__desc a { color: var(--tx-coral); }
.tx-hero__cta-row {
display: flex;
margin-top: auto;
padding-top: 8px;
}
.tx-hero__cta {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 11px 28px !important;
font-size: 14px !important;
font-weight: 600 !important;
background: var(--tx-cta-bg) !important;
color: var(--tx-cta-text) !important;
border-radius: var(--tx-radius-btn) !important;
border: none !important;
text-decoration: none !important;
white-space: nowrap;
transition: background 0.15s;
margin: 0 !important;
}
.tx-hero__cta:hover {
background: var(--tx-cta-bg-hover) !important;
text-decoration: none !important;
}
/* Mobile: stack image on top, body below; full container width */
@media (max-width: 768px) {
.tx-hero {
grid-template-columns: 1fr;
width: 100%;
max-height: none;
margin-bottom: 16px;
}
.tx-hero__img-link { aspect-ratio: 16/10; }
.tx-hero__body { padding: 22px 18px; gap: 10px; }
.tx-hero__title { font-size: 22px !important; }
.tx-hero__desc { max-height: 6em; }
}
/* ----------------------------------------------------------
WAITING LIST MODAL -- used on Schedule, Calendar, b_otix
Trigger: any [data-waitlist] element with data-perf-id, data-event-title,
data-perf-label attributes. Modal markup lives in waitlist_modal.asp.
---------------------------------------------------------- */
.tx-wl-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity 0.2s ease;
}
.tx-wl-modal.is-open { opacity: 1; }
.tx-wl-modal[hidden] { display: none; }
.tx-wl-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
cursor: pointer;
}
body.tx-wl-open { overflow: hidden; }
.tx-wl-modal__panel {
position: relative;
background: var(--tx-card-bg);
color: var(--tx-text);
border-radius: var(--tx-radius-card);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
width: 100%;
max-width: 520px;
max-height: 90vh;
overflow-y: auto;
padding: 32px 28px 24px;
box-sizing: border-box;
transform: translateY(8px);
transition: transform 0.2s ease;
}
.tx-wl-modal.is-open .tx-wl-modal__panel { transform: translateY(0); }
.tx-wl-modal__close {
position: absolute;
top: 12px;
right: 14px;
width: 32px;
height: 32px;
border: none;
background: transparent;
font-size: 24px;
line-height: 1;
color: var(--tx-muted);
cursor: pointer;
border-radius: 50%;
transition: background 0.15s;
}
.tx-wl-modal__close:hover { background: var(--tx-divider); color: var(--tx-text); }
.tx-wl-modal__title {
font-family: var(--tx-font-heading) !important;
font-size: 22px !important;
font-weight: 600 !important;
color: var(--tx-text) !important;
margin: 0 0 6px !important;
text-transform: none !important;
letter-spacing: -0.01em !important;
}
.tx-wl-modal__subtitle {
font-size: 14px;
line-height: 1.45;
color: var(--tx-muted);
margin: 0 0 14px;
}
.tx-wl-modal__subtitle .tx-wl-modal__event-title {
color: var(--tx-text);
font-weight: 600;
}
.tx-wl-modal__intro {
font-size: 13px;
line-height: 1.5;
color: var(--tx-muted);
margin: 0 0 18px;
padding: 10px 12px;
background: var(--tx-dropdown-hover);
border-radius: 8px;
}
.tx-wl-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.tx-wl-form__row {
display: flex;
flex-direction: column;
gap: 5px;
}
.tx-wl-form__row--split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.tx-wl-form__row--split > div {
display: flex;
flex-direction: column;
gap: 5px;
}
.tx-wl-form__label {
font-size: 12px;
font-weight: 600;
color: var(--tx-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.tx-wl-form__input {
font-family: inherit;
font-size: 14px;
padding: 9px 12px;
border: 1px solid var(--tx-border-mid);
border-radius: var(--tx-radius-sm);
/* !important on bg and color defends against main.css's
`input[type='text'] { color: #333; }` rule which otherwise wins on
specificity and produces a light-on-dark mismatch in dark mode. */
background: var(--tx-card-bg) !important;
color: var(--tx-text) !important;
transition: border-color 0.15s;
box-sizing: border-box;
width: 100%;
height: auto !important; /* main.css sets input[type=text] height: 34px */
}
.tx-wl-form__input:focus {
border-color: var(--tx-text);
outline: none;
}
.tx-wl-form__textarea {
resize: vertical;
min-height: 56px;
}
.tx-wl-form__error {
font-size: 13px;
color: var(--tx-avail-out);
background: rgba(231, 111, 81, 0.08);
padding: 8px 12px;
border-radius: 6px;
}
.tx-wl-form__actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 8px;
}
.tx-wl-form__actions--center {
justify-content: center;
}
.tx-wl-form__cancel,
.tx-wl-form__submit {
font-family: inherit;
font-size: 14px;
font-weight: 600;
padding: 10px 22px;
border-radius: var(--tx-radius-btn);
border: none;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.tx-wl-form__cancel {
background: transparent;
color: var(--tx-muted);
}
.tx-wl-form__cancel:hover { color: var(--tx-text); background: var(--tx-divider); }
.tx-wl-form__submit {
background: var(--tx-cta-bg);
color: var(--tx-cta-text);
}
.tx-wl-form__submit:hover { background: var(--tx-cta-bg-hover); }
.tx-wl-form__submit:disabled { opacity: 0.6; cursor: not-allowed; }
/* Success view */
.tx-wl-modal__view--success { text-align: center; padding: 8px 4px; }
.tx-wl-modal__success-icon {
width: 56px;
height: 56px;
margin: 8px auto 16px;
background: rgba(0, 168, 132, 0.12);
color: #1F9D78;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.tx-wl-modal__success-msg {
font-size: 14px;
line-height: 1.5;
color: var(--tx-muted);
margin: 0 0 20px;
}
.tx-wl-modal__success-msg .tx-wl-modal__event-title {
color: var(--tx-text);
font-weight: 600;
}
/* Mobile */
@media (max-width: 540px) {
.tx-wl-modal { padding: 0; align-items: flex-end; }
.tx-wl-modal__panel {
max-width: none;
max-height: 92vh;
border-radius: 16px 16px 0 0;
padding: 28px 20px 20px;
}
.tx-wl-form__row--split {
grid-template-columns: 1fr;
gap: 14px;
}
}
/* Waiting List trigger button -- appears next to a sold-out CTA */
.tx-wl-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: inherit;
font-size: 12px;
font-weight: 600;
padding: 7px 14px;
border-radius: var(--tx-radius-btn);
border: 1px solid var(--tx-border-mid);
background: transparent;
color: var(--tx-text);
cursor: pointer;
text-decoration: none !important;
transition: background 0.15s, border-color 0.15s;
white-space: nowrap;
}
.tx-wl-trigger:hover {
background: var(--tx-divider);
border-color: var(--tx-text);
}
/* ----------------------------------------------------------
Floorplan page (Seat_Based_floorplan.asp) -- themed components
Page-specific classes prefixed .tx-fp- to avoid colliding with the
floorplan's own legacy classes (.perf-info, .selected-seats, etc.).
---------------------------------------------------------- */
/* Add to Cart button -- same coral filled CTA pattern as Buy tickets */
.tx-fp-cta,
a.tx-fp-cta,
a.tx-fp-cta:link,
a.tx-fp-cta:visited,
a.tx-fp-cta:focus,
a.tx-fp-cta:active {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 9px 22px !important;
font-family: var(--tx-font-heading) !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
background: var(--tx-cta-bg) !important;
color: var(--tx-cta-text) !important;
border-radius: var(--tx-radius-btn) !important;
border: none !important;
text-decoration: none !important;
white-space: nowrap;
transition: background 0.15s;
cursor: pointer;
margin: 0 !important;
text-indent: 0 !important;
text-shadow: none !important;
}
.tx-fp-cta:hover,
a.tx-fp-cta:hover {
background: var(--tx-cta-bg-hover) !important;
color: var(--tx-cta-text) !important;
text-decoration: none !important;
box-shadow: none !important;
}
/* Selected Seats counter -- readonly input as themed pill */
.tx-fp-count {
background: var(--tx-dropdown-hover) !important;
color: var(--tx-text) !important;
border: 1px solid var(--tx-border) !important;
border-radius: 8px !important;
height: auto !important;
cursor: default;
}
.tx-fp-count:focus {
outline: none;
border-color: var(--tx-border-mid) !important;
}
/* Floorplan venue image -- the BOM-uploaded layout drawing is typically
a near-white background with dark stage and section labels. In dark
mode, partial inversion (0.86) flips the white to a tone matching
the page bg, while keeping enough contrast on the dark stage/labels
for them to remain visible. The SVG seat circles overlaid on top are
unaffected -- they're sibling elements, not children of #imgFloorplan. */
/* Floorplan art ships light-on-white; invert it for the dark default.
Light themes show it as-authored. */
#imgFloorplan {
filter: invert(0.86) hue-rotate(180deg);
}
body.theme-classic #imgFloorplan,
body.theme-cool #imgFloorplan,
body.theme-plum #imgFloorplan {
filter: none;
}
/* ----------------------------------------------------------
Themed Colorbox modal -- applied via className: 'tx-cbox' on the
colorbox call (Seat_Based_floorplan launching the price code popup).
Other Colorbox usages elsewhere on the site keep their default look
until those flows are redone.
---------------------------------------------------------- */
/* Modal frame surfaces */
#colorbox.tx-cbox,
#colorbox.tx-cbox #cboxWrapper,
#colorbox.tx-cbox #cboxContent,
#colorbox.tx-cbox #cboxLoadedContent {
background: var(--tx-card-bg) !important;
color: var(--tx-text);
}
/* The 1px borders Colorbox draws around the wrapper */
#colorbox.tx-cbox #cboxTopLeft,
#colorbox.tx-cbox #cboxTopCenter,
#colorbox.tx-cbox #cboxTopRight,
#colorbox.tx-cbox #cboxBottomLeft,
#colorbox.tx-cbox #cboxBottomCenter,
#colorbox.tx-cbox #cboxBottomRight,
#colorbox.tx-cbox #cboxMiddleLeft,
#colorbox.tx-cbox #cboxMiddleRight {
background: var(--tx-card-bg) !important;
}
/* Loaded content scroll fix -- let the iframe fill */
#colorbox.tx-cbox #cboxLoadedContent iframe {
background: var(--tx-card-bg);
}
/* Title bar -- themed */
#colorbox.tx-cbox #cboxTitle {
color: var(--tx-text) !important;
font-family: var(--tx-font-heading);
}
/* Close button -- themed circle */
#colorbox.tx-cbox #cboxClose {
color: var(--tx-text) !important;
background: var(--tx-card-bg);
text-indent: 0;
font-size: 0;
width: 36px;
height: 36px;
right: 8px;
top: 8px;
border-radius: 50%;
border: 1px solid var(--tx-border);
transition: background 0.15s, border-color 0.15s;
}
#colorbox.tx-cbox #cboxClose::before {
content: "x";
font-size: 22px;
line-height: 1;
color: var(--tx-text);
display: block;
text-align: center;
padding-top: 4px;
}
#colorbox.tx-cbox #cboxClose:hover {
background: var(--tx-dropdown-hover);
border-color: var(--tx-border-mid);
}
Applied via customClass keys on the Swal.fire call so only OUR popup
picks up these styles -- other Swal popups elsewhere on the site
(cart/checkout) keep their default look until we redo those pages.
---------------------------------------------------------- */
/* Backdrop -- needs to be darker than the page so the panel reads as
"lifted above" rather than "merged into" the page. SweetAlert's container
is .swal2-container, which is the dimmed overlay element. */
.swal2-container.swal2-backdrop-show:has(.tx-swal-popup),
.swal2-container:has(.tx-swal-popup) {
background-color: rgba(0, 0, 0, 0.78) !important;
}
.swal2-popup.tx-swal-popup {
/* Use the brightest themed surface (dropdown/raised) for the panel
so it stands clearly above the page bg AND against the backdrop. */
background: var(--tx-dropdown-bg) !important;
color: var(--tx-text) !important;
border: 1px solid var(--tx-border-mid) !important;
border-radius: var(--tx-radius-card);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
padding: 36px 32px 28px;
font-family: var(--tx-font-body);
}
.swal2-popup.tx-swal-popup .swal2-html-container,
.swal2-popup.tx-swal-popup .tx-swal-html {
font-size: 16px !important;
line-height: 1.55 !important;
color: var(--tx-text) !important;
text-align: left;
opacity: 1 !important;
}
.swal2-popup.tx-swal-popup .swal2-html-container *,
.swal2-popup.tx-swal-popup .tx-swal-html * {
color: var(--tx-text) !important;
opacity: 1 !important;
}
/* Close button (top-right) */
.swal2-close.tx-swal-close {
color: var(--tx-text) !important;
font-size: 28px !important;
width: 36px;
height: 36px;
line-height: 1;
border-radius: 50%;
transition: background 0.15s, color 0.15s;
}
.swal2-close.tx-swal-close:hover {
color: var(--tx-text) !important;
background: var(--tx-divider) !important;
}
.swal2-close.tx-swal-close:focus {
box-shadow: none !important;
outline: none;
}
/* OK / confirm button -- themed CTA */
.swal2-confirm.tx-swal-confirm {
background: var(--tx-cta-bg) !important;
color: var(--tx-cta-text) !important;
border: none !important;
border-radius: var(--tx-radius-btn) !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 600 !important;
padding: 10px 28px !important;
box-shadow: none !important;
transition: background 0.15s;
}
.swal2-confirm.tx-swal-confirm:hover {
background: var(--tx-cta-bg-hover) !important;
}
.swal2-confirm.tx-swal-confirm:focus {
box-shadow: none !important;
outline: none;
}
/* Trigger warning / content advisory -- opt-in disclosure with spoilers
hidden by default. Native / for accessibility (keyboard
+ screen reader work for free). Sits between hero and info card on
b_otix; styled like a card so it visually belongs in the same column. */
.tx-trigger-warning {
background: var(--tx-card-bg);
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-card);
margin: 0 0 24px;
overflow: hidden;
}
.tx-trigger-warning__summary {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
cursor: pointer;
list-style: none;
user-select: none;
transition: background 0.15s;
}
.tx-trigger-warning__summary::-webkit-details-marker { display: none; }
.tx-trigger-warning__summary::marker { content: ''; }
.tx-trigger-warning__summary:hover {
background: var(--tx-dropdown-hover);
}
.tx-trigger-warning__icon {
flex-shrink: 0;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(231, 111, 81, 0.14);
color: var(--tx-coral);
border-radius: 50%;
font-size: 14px;
}
.tx-trigger-warning__label {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.tx-trigger-warning__title {
font-family: var(--tx-font-heading);
font-size: 14px;
font-weight: 600;
color: var(--tx-text);
line-height: 1.3;
}
.tx-trigger-warning__hint {
font-size: 12px;
color: var(--tx-muted);
line-height: 1.3;
}
.tx-trigger-warning__chevron {
flex-shrink: 0;
color: var(--tx-muted);
font-size: 12px;
transition: transform 0.2s ease;
}
.tx-trigger-warning[open] .tx-trigger-warning__chevron {
transform: rotate(180deg);
}
.tx-trigger-warning__body {
padding: 4px 18px 18px;
font-size: 14px;
line-height: 1.55;
color: var(--tx-text);
border-top: 1px solid var(--tx-border);
margin-top: -1px; /* visual continuity with summary's bottom edge on open */
}
.tx-trigger-warning[open] .tx-trigger-warning__body {
padding-top: 16px;
}
/* Info-only events (intGalleryListing = 1): shown in listings for promotion
but not yet on sale. The pill replaces the Buy tickets CTA and carries
the message text from vcGalleryListing (e.g. "Tickets on sale May 10th").
Translucent coral background + coral text -- visually distinct from the
filled coral CTAs (which use solid bg + white text). Reads as a status
badge, not a button you can click. Matches the SOLD OUT pill treatment
on b_otix. */
.tx-info-pill {
display: inline-flex;
align-items: center;
font-family: var(--tx-font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 8px 10px;
background: rgba(231, 111, 81, 0.14);
color: var(--tx-coral) !important;
border-radius: 999px;
line-height: 1.3;
/* Allow wrap when constrained (e.g. long "Coming soon - Mon, May 18 - 12:00 AM"
inside a narrow gallery card footer). The pill stretches to a multi-line
rounded rect rather than overflowing. */
white-space: normal;
text-align: center;
max-width: 100%;
min-width: 0;
}
/* Larger variant for hero / detail-page contexts where the pill is the
sole prominent thing in the action area. */
.tx-info-pill--lg {
font-size: 13px;
padding: 11px 22px;
}
/* When the WL trigger IS the row's primary CTA (sold-out perf), it inherits
the filled .btn-primary look from the existing CTA classes. This modifier
just neutralises the bordered-pill defaults from .tx-wl-trigger above so
the filled background and white text from .btn-primary win.
!important and explicit color values defend against the parent 's
visited/hover/inherit color cascade -- the row-link in schedule view sits
above this element in the DOM and its color rules can otherwise tint the
button text. */
.tx-wl-trigger--cta {
border: none !important;
background: var(--tx-cta-bg) !important;
color: var(--tx-cta-text) !important;
opacity: 1 !important;
}
.tx-wl-trigger--cta:hover,
.tx-wl-trigger--cta:visited,
.tx-wl-trigger--cta:focus,
a.tx-wl-trigger--cta,
a.tx-wl-trigger--cta:hover,
a.tx-wl-trigger--cta:visited {
background: var(--tx-cta-bg-hover) !important;
color: var(--tx-cta-text) !important;
border-color: transparent;
opacity: 1 !important;
}
/* ----------------------------------------------------------
Event Card
---------------------------------------------------------- */
.event-card {
background: var(--tx-card-bg);
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-card);
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
box-shadow: 0 1px 3px rgba(45, 32, 20, 0.06), 0 6px 16px rgba(45, 32, 20, 0.10);
min-height: 0;
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
}
/* Dark theme keeps the resting shadow subtle -- depth comes from the
card bg sitting above the page bg, not from a shadow on near-black. */
.event-card {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
/* Warm paper themes keep the softer, layered lift. */
body.theme-classic .event-card,
body.theme-plum .event-card {
box-shadow: 0 1px 3px rgba(45, 32, 20, 0.06), 0 6px 16px rgba(45, 32, 20, 0.10);
}
/* Cool theme: same depth, but a cool blue-gray shadow tint so it
doesn't read warm against the gray page. */
body.theme-cool .event-card {
box-shadow: 0 1px 3px rgba(20, 24, 40, 0.06), 0 6px 16px rgba(20, 24, 40, 0.10);
}
.event-card:hover {
transform: translateY(-4px);
box-shadow: var(--tx-card-hover-shadow);
}
.event-card__img-link {
display: block;
overflow: hidden;
line-height: 0;
text-decoration: none;
}
/* New: image wrapper that hosts the date badge overlay */
.event-card__img-wrap {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
}
.event-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
max-width: 100%;
background: var(--tx-divider);
transition: transform 0.3s ease;
}
.event-card:hover .event-card__image {
transform: scale(1.03);
}
.event-card__body {
padding: 16px 18px 16px;
display: flex;
flex-direction: column;
flex: 1;
text-align: left;
/* Soft top edge -- visible against white images (Wedding Singer poster),
invisible against dark ones (concert photo). Reads as a subtle seam,
not a "default UI" divider. */
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
}
/* In dark mode, a dark inset shadow disappears. Use a faint light
edge instead -- visible against bright images, invisible against
dark ones (where the card bg is similar lightness). */
.event-card__body {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.theme-classic .event-card__body,
body.theme-cool .event-card__body,
body.theme-plum .event-card__body {
box-shadow: none;
}
/* Date block -- context, supporting info.
Lighter than the title so it doesn't compete. */
.event-card__date-row {
display: flex;
flex-direction: column;
gap: 3px;
margin-bottom: 16px;
}
.event-card__date {
font-size: 14px;
font-weight: 500;
color: var(--tx-text);
letter-spacing: 0;
line-height: 1.3;
}
.event-card__next {
font-size: 13px;
font-weight: 400;
color: var(--tx-muted);
letter-spacing: 0;
line-height: 1.35;
}
.event-card__more {
display: inline-block;
font-size: 12px;
font-weight: 400;
color: var(--tx-hint);
margin-left: 4px;
letter-spacing: 0;
}
/* Title -- top of card body, the dominant element. */
.event-card__title {
font-size: 24px !important;
font-weight: 600;
font-family: var(--tx-font-heading);
color: var(--tx-text);
margin: 0 0 6px;
line-height: 1.2;
letter-spacing: -0.015em;
white-space: normal;
overflow: visible;
text-overflow: initial;
}
/* Availability dot -- small status indicator, sits inline next to the date.
Subtle by design; the title is the headline, this is supporting status. */
.event-card__avail-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
background: var(--tx-hint);
box-shadow: 0 0 0 2px var(--tx-divider);
cursor: help;
position: relative;
margin-right: 6px;
/* Visually align with the cap-height of the 14px date text */
vertical-align: 1px;
}
.event-card__avail-dot.avail-good { background: var(--tx-avail-good); }
.event-card__avail-dot.avail-limited { background: var(--tx-avail-low); }
.event-card__avail-dot.avail-soldout { background: var(--tx-avail-out); }
/* Tooltip via data-tip attribute */
.event-card__avail-dot::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--tx-text);
color: var(--tx-page-bg);
border: 1px solid var(--tx-border-mid);
font-size: 11px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
padding: 5px 9px;
border-radius: 6px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
z-index: 10;
}
.event-card__avail-dot::before {
content: '';
position: absolute;
bottom: calc(100% + 3px);
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: var(--tx-text);
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
z-index: 10;
}
.event-card__avail-dot:hover::after,
.event-card__avail-dot:hover::before,
.event-card__avail-dot:focus::after,
.event-card__avail-dot:focus::before {
opacity: 1;
}
/* Pulse animation for limited state -- subtle urgency cue */
@keyframes tx-avail-pulse {
0%, 100% { box-shadow: 0 0 0 2px var(--tx-divider); }
50% { box-shadow: 0 0 0 4px rgba(229, 180, 84, 0.30); }
}
.event-card__avail-dot.avail-limited {
animation: tx-avail-pulse 1.8s ease-in-out infinite;
}
.event-card__venue {
font-size: 13px;
color: var(--tx-muted);
margin-bottom: 8px;
line-height: 1.4;
font-weight: 400;
}
/* fptype lives inside the venue line -- uses the line's lighter
styling, with just a separator before it. */
.event-card__venue .fptype {
padding-left: 0;
margin-left: 0;
font-weight: 400;
}
.event-card__venue .fptype::before {
content: '\B7';
position: static;
display: inline;
width: auto;
height: auto;
border-radius: 0;
background: none;
transform: none;
opacity: 0.5
}
/* Availability dot+label on gallery card -- driven by SP__GetEventAvailabilityAggregate
(event-level rollup of online-channel availability across all future perfs).
Pattern mirrors the schedule row's availability indicator for consistency. */
.event-card__avail {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--tx-font-body);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
}
.event-card__avail-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
background: var(--tx-muted);
}
.event-card__avail.avail-good { color: var(--tx-avail-good); }
.event-card__avail.avail-good .event-card__avail-dot { background: var(--tx-avail-good); }
.event-card__avail.avail-limited { color: var(--tx-avail-low); }
.event-card__avail.avail-limited .event-card__avail-dot { background: var(--tx-avail-low); }
/* Sold out is more prominent -- same treatment as the schedule row's
sold-out label (bolder, uppercase) since it's the *reason* the CTA
is disabled. */
.event-card__avail.avail-soldout {
color: var(--tx-avail-out) !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.event-card__avail.avail-soldout .event-card__avail-dot {
background: var(--tx-avail-out);
width: 8px;
height: 8px;
}
/* Bottom-pinned meta block -- venue, availability, footer all sit here.
Pushed to the bottom of the card via margin-top: auto so the position
of these elements doesn't shift based on title height. The title
absorbs the variable space at the top of the card. */
.event-card__meta {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.event-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 12px;
gap: 16px;
}
.event-card__price {
display: flex;
flex-direction: column;
line-height: 1.25;
gap: 2px;
}
.event-card__price-label {
font-size: 11px;
font-weight: 400;
color: var(--tx-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.event-card__price-value {
font-size: 17px;
font-weight: 600;
color: var(--tx-text);
letter-spacing: -0.01em;
}
/* ----------------------------------------------------------
Buttons -- override main.css a[class^='btn-'] / button[class^='btn-']
---------------------------------------------------------- */
.btn-primary,
.btn-ghost {
display: inline-block;
font-family: inherit;
font-size: 13px;
padding: 9px 18px;
border-radius: var(--tx-radius-btn) !important;
cursor: pointer;
text-decoration: none;
text-align: center;
white-space: nowrap;
border: 1px solid transparent;
line-height: 1.4;
margin: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
transition: background 0.15s, border-color 0.15s;
font-weight: 600;
}
.btn-primary {
background-color: var(--tx-cta-bg) !important;
color: var(--tx-cta-text) !important;
border-color: var(--tx-cta-bg) !important;
font-weight: 600;
}
.btn-primary:hover {
background-color: var(--tx-cta-bg-hover) !important;
border-color: var(--tx-cta-bg-hover) !important;
color: var(--tx-cta-text) !important;
text-decoration: none;
box-shadow: none !important;
}
/* Disabled / sold-out CTA */
.btn-primary.is-disabled,
.btn-primary.is-disabled:hover {
background-color: transparent !important;
border-color: var(--tx-border-mid) !important;
color: var(--tx-muted) !important;
cursor: not-allowed;
pointer-events: none;
font-weight: 500;
}
.btn-ghost {
background-color: transparent !important;
color: var(--tx-text) !important;
border-color: var(--tx-border-mid) !important;
}
.btn-ghost:hover {
background-color: var(--tx-page-bg) !important;
border-color: var(--tx-navy) !important;
color: var(--tx-navy) !important;
text-decoration: none;
box-shadow: none !important;
}
/* ----------------------------------------------------------
Streaming icon
---------------------------------------------------------- */
.stream-icon {
display: inline-block;
font-size: 12px;
color: var(--tx-hint);
margin-right: 4px;
vertical-align: middle;
}
/* ----------------------------------------------------------
Utility
---------------------------------------------------------- */
.hidden { display: none !important; }
/* ----------------------------------------------------------
Responsive
---------------------------------------------------------- */
@media (max-width: 900px) {
#divlistStyle.content { padding: 12px 8px 24px; }
.tx-filter-bar { padding: 10px 14px; }
.tx-chips { padding: 8px 14px; }
.event-container { padding: 8px 4px 20px; }
}
@media (max-width: 768px) {
.tx-filter-divider { display: none; }
.tx-search-wrap { flex-basis: 100%; min-width: 100%; }
.tx-filter-bar select { flex: 1 1 0; min-width: 140px; max-width: none; width: auto; }
.tx-view-toggle { margin-left: 0; }
}
@media (max-width: 480px) {
/* Reduced padding on the event grid container */
.event-container { padding: 8px 4px 20px; }
/* Card fills the full column on mobile -- the 320px cap is for desktop
grid aesthetics; on narrow viewports it just creates wasted right-side
gutter. */
.event-item {
max-width: none !important;
width: 100% !important;
}
/* Chips wrap to multiple rows on mobile (more discoverable than
horizontal scroll) and shrink to a smaller size. */
.tx-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 14px 14px;
}
.tx-chip {
font-size: 11px;
padding: 4px 10px;
flex-shrink: 0;
}
/* Card body should size to content on mobile single-column,
not stretch to fill the row */
.event-card {
height: auto;
}
.event-card__body {
flex: 0 0 auto;
}
}
/* ----------------------------------------------------------
b_otix.asp -- Event detail page
---------------------------------------------------------- */
/* Replace old card-item shadow/border with new aesthetic */
.card-item {
background: var(--tx-card-bg);
border-radius: var(--tx-radius-card);
border: 1px solid var(--tx-border);
box-shadow: none;
padding: 20px 24px;
margin: 16px 0;
}
/* Event title on detail page */
.card-item h1 {
font-family: var(--tx-font-heading);
font-size: 22px;
font-weight: 600;
color: var(--tx-navy);
float: none !important;
margin: 0 0 8px;
}
/* Fix colour gap below footer -- body bg must extend fully */
html, body {
background-color: var(--tx-page-bg);
min-height: 100%;
}
.wrap, .aside-bg, .col-nav-body {
background-color: var(--tx-page-bg) !important;
}
/* ----------------------------------------------------------
Page layout -- full height so footer sits at bottom
---------------------------------------------------------- */
html { height: 100%; }
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.wrap {
flex: 1;
display: flex;
flex-direction: column;
}
.grid.aside-bg {
flex: 1;
display: flex;
flex-direction: column;
background-color: var(--tx-page-bg) !important;
}
.col-nav-body {
flex: 1;
display: flex;
flex-direction: column;
}
section.col-body {
flex: 1;
}
/* Kill the dark bleed-through colour from .aside-bg */
.aside-bg {
background-color: var(--tx-page-bg) !important;
}
/* ----------------------------------------------------------
b_otix -- event detail page
---------------------------------------------------------- */
.content h1,
.card-item h1 {
font-family: var(--tx-font-heading);
font-size: 22px;
font-weight: 600;
color: var(--tx-navy);
margin: 0 0 8px;
float: none !important;
}
/* Layout: title left, button right inside first card */
.card-item table {
border-collapse: collapse;
}
/* Tone down the orange accessible seating text */
.card-item font[face="verdana"] {
color: var(--tx-muted) !important;
font-size: 13px !important;
}
/* Multiple dates label */
.card-item span[style*='color:red'] {
color: var(--tx-coral) !important;
font-size: 12px !important;
}
/* ==========================================================
THEME OVERRIDES -- main.css legacy rules
These ensure non-listing surfaces (nav rail, wrappers) follow
the active theme too.
========================================================== */
/* Anything still relying on main.css colors gets pulled into the theme */
.col-nav,
.col-nav-body,
.logo-wrap {
background-color: var(--tx-page-bg) !important;
}
/* main.css link color (#a6093d) should follow theme accent */
/* Accent links, every theme -- --tx-coral is redefined per theme. */
a:not(.btn-primary):not(.btn-ghost):not(.event-card__title a):not(.tx-chip):not(.dropdown-content a):not(.navbar-menu a):not(.icon-btn):not(.login-btn):not(.logo):not(.footer-links a) {
color: var(--tx-coral);
}
/* Ensure section.col-body actually shows the theme bg even if main.css's
#fff rule loads later in some include sequence */
section.col-body {
background-color: var(--tx-page-bg) !important;
}
/* (Card titles and prices now use --tx-text directly; theme-specific
overrides removed for simplicity. Old logic preserved in git history.) */
/* Detail-page card */
.card-item h1 {
color: var(--tx-text);
}
/* Heading colors -- --tx-text is per-theme, so this holds for all four. */
h1, h2, h3 {
color: var(--tx-text);
}
/* ----------------------------------------------------------
COOL THEME -- slate-blue header + footer
The navbar/footer bg lives in external CSS (navbar.css/main.css)
as a near-black shared by all themes. Override here for Cool only,
with id/!important so it wins regardless of external load order.
---------------------------------------------------------- */
body.theme-cool .navbar {
background-color: #2E4860 !important;
}
body.theme-cool .navbar.is-scrolled {
background-color: rgba(46, 72, 96, 0.92) !important;
}
body.theme-cool footer {
background-color: #2E4860 !important;
}
/* Keep footer text/links legible on the slate bar */
body.theme-cool footer,
body.theme-cool footer .footer-copyright,
body.theme-cool footer .footer-links a {
color: rgba(255, 255, 255, 0.85) !important;
}
body.theme-cool footer .footer-links a:hover {
color: #FFFFFF !important;
}
/* ----------------------------------------------------------
PLUM THEME -- plum header + footer (gold link accents)
---------------------------------------------------------- */
body.theme-plum .navbar {
background-color: #5B2333 !important;
}
body.theme-plum .navbar.is-scrolled {
background-color: rgba(91, 35, 51, 0.92) !important;
}
body.theme-plum footer {
background-color: #5B2333 !important;
}
body.theme-plum footer,
body.theme-plum footer .footer-copyright,
body.theme-plum footer .footer-links a {
color: rgba(255, 255, 255, 0.82) !important;
}
body.theme-plum footer .footer-links a:hover {
color: #C9A227 !important;
}
/* ==========================================================
Shared |