/* ============================================================ VESPERTINE theme for the OnTheStage ticketing widget. The widget reads a set of --onstage-* custom properties (see the default sheet it ships). We remap them to the site palette: near-black surfaces, gold actions, cream text, Marcellus / Jost. The doubled :root:root selector (specificity 0,2,0) outranks the CDN default sheet's :root (0,1,0), so these win no matter which stylesheet the browser loads last. Declaring them globally also means any full-screen / checkout surface the widget portals to inherits the theme too. ============================================================ */ :root:root { /* ---- brand / accents ---- */ --onstage-primary-1-main: #c9a45c; /* primary buttons, selected states, header nav */ --onstage-primary-2-main: #c9a45c; /* badges */ --onstage-primary-3-main: #c9a45c; /* tertiary */ --onstage-font-color-primary: #c9a45c; /* links */ /* ---- typography ---- */ --onstage-font-family: 'Jost', system-ui, sans-serif; --onstage-font-family-secondary: 'Jost', system-ui, sans-serif; --onstage-font-family-medium: 'Jost', system-ui, sans-serif; --onstage-font-family-bold: 'Marcellus', Georgia, serif; --onstage-font-family-header: 'Marcellus', Georgia, serif; --onstage-text-color: #efe8dc; --onstage-text-secondary-color: #b9ad98; --onstage-icon-color: #c9a45c; --onstage-text-disabled-color: #6b6355; /* ---- surfaces ---- */ --onstage-background-color: #12100d; --onstage-widget-container-background: transparent; /* let the page bg show through */ --onstage-border-color: rgba(201, 164, 92, .30); --onstage-active-border-color: #c9a45c; /* ---- buttons ---- */ --onstage-button-bg-white: #1a150f; --onstage-button-bg-primary: #c9a45c; --onstage-button-bg-primary-hover: #d8b876; --onstage-button-hover-opacity: 1; /* using a solid hover color */ --onstage-button-font-primary: #12100d; /* dark text on gold */ --onstage-button-border-primary: 1px solid #c9a45c; --onstage-button-bg-secondary: transparent; --onstage-button-bg-gray: transparent; --onstage-button-font-secondary: #c9a45c; --onstage-button-border-secondary: #c9a45c; --onstage-button-font-gray: #efe8dc; --onstage-button-border-gray: rgba(201, 164, 92, .45); --onstage-button-bg-disabled: #2a251e; --onstage-button-font-disabled: #6b6355; /* ---- widget home header actions (My Cart / Log In) ---- */ --onstage-widget-home-login-btn-color: #efe8dc; --onstage-widget-home-my-cart-btn-color: #efe8dc; /* ---- calendar view ---- */ --onstage-calendar-selected-day-bg-color: #c9a45c; --onstage-calendar-dropdown-background-color: #1a150f; --onstage-calendar-dropdown-text-color: #efe8dc; --onstage-calendar-dropdown-hover-background-color: #211a12; --onstage-calendar-dropdown-active-background-color: #2a251e; --onstage-calendar-dropdown-checkbox-border-color: #c9a45c; --onstage-calendar-today-circle-background-color: #c9a45c; --onstage-calendar-today-datetext-color: #12100d; --onstage-calendar-disabled-background-color: rgba(255, 255, 255, .03); --onstage-calendar-disabled-datetext-color: #6b6355; --onstage-calendar-datetext-color: #efe8dc; --onstage-calendar-border-color: rgba(201, 164, 92, .30); --onstage-calendar-day-label-bg-color: #12100d; --onstage-calendar-day-label-text-color: #b9ad98; /* ---- list view ---- */ --onstage-list-datetext-color: #efe8dc; --onstage-list-disabled-datetext-color: #6b6355; --onstage-calendar-list-item-bg-color: #1a150f; /* list-view date block, white by default */ /* ---- production carousel ---- */ --onstage-production-carousel-arrow-buttons-bg-color: #1a150f; --onstage-production-carousel-arrow-buttons-color: #c9a45c; --onstage-production-carousel-background-color: #12100d; --onstage-production-carousel-text-color: #efe8dc; --onstage-production-carousel-link-color: #c9a45c; /* ---- full-screen steps (Select A Time, Tickets, Add Ons, Cart, Checkout) ---- */ --onstage-widget-bg-color: #12100d; --onstage-modal-content-bg-color: #14110d; --onstage-dialog-bg-color: #1a150f; /* solid so overlay panels are opaque */ --onstage-production-bg-color: #0c0a08; --onstage-high-level-details-address-text-color: #b9ad98; /* ---- header nav (top bar) ---- */ --onstage-header-nav-bg-color: #0c0a08; --onstage-header-nav-text-color: #c9a45c; --onstage-header-nav-icon-color: #c9a45c; /* ---- Select A Time ---- */ --onstage-select-a-time-selected-date-bg-color: #c9a45c; --onstage-select-a-time-selected-date-text-color: #12100d; --onstage-select-a-time-bg-color: #14110d; --onstage-select-a-time-availability-legend-bg-color: #14110d; --onstage-select-a-time-unavailable-day-bg-color: rgba(255, 255, 255, .03); --onstage-select-a-time-unavailable-day-text-color: #6b6355; /* ---- Select Tickets ---- */ --onstage-select-ticket-name-font-color: #efe8dc; --onstage-select-ticket-description-font-color: #b9ad98; --onstage-select-ticket-presale-btn-bg-color: #1a150f; --onstage-counter-bg-color: #1a150f; --onstage-counter-font-color: #efe8dc; --onstage-counter-soldout-font-color: #6b6355; --onstage-counter-border-color: rgba(201, 164, 92, .45); --onstage-counter-disabled-color: #6b6355; --onstage-trash-icon-color: #b9ad98; --onstage-logo-bg-color: #efe8dc; /* light pad so a dark org logo stays readable */ /* ---- marketing / ToS / review copy ---- */ --onstage-allow-marketing-text-color: #b9ad98; --onstage-tos-copy-text-color: #b9ad98; --onstage-tos-links-color: #c9a45c; --onstage-checkout-review-text-color: #b9ad98; /* ---- footer ---- */ --onstage-footer-link-color: #c9a45c; --onstage-footer-text-color: #b9ad98; --onstage-footer-legal-text-color: #b9ad98; /* ---- badges ---- */ --onstage-badge-color: #c9a45c; --onstage-cart-badge-bg-color: #c9a45c; /* ---- tile widget ---- */ --onstage-tile-bg: #1a150f; --onstage-tile-border: 1px solid rgba(201, 164, 92, .30); --onstage-tile-border-color-active: #c9a45c; --onstage-tile-footer-bg: #14110d; --onstage-tile-footer-border: 0.948px solid rgba(201, 164, 92, .30); --onstage-tile-month-font-family: 'Marcellus', Georgia, serif; --onstage-tile-month-color: #c9a45c; --onstage-tile-day-color: #efe8dc; --onstage-tile-production-name-color: #efe8dc; --onstage-tile-time-color: #b9ad98; --onstage-tile-more-details-color: #c9a45c; --onstage-tile-disabled-text-color: #6b6355; /* ---- seat-map enhancement (assets/js/seat-map-enhance.js) ---- */ --seatmap-container-bg: #0d0d14; --seatmap-stage-fill: #0f1923; --seatmap-stage-stroke: rgba(255, 195, 75, .45); --seatmap-stage-text: rgba(255, 195, 75, .9); } /* Reserve height while the widget bootstraps, so the page does not jump. */ .ots-mount { width: 100%; min-height: 760px; } .ots-mount onthestage-widget { display: block; width: 100%; } /* Seat-map frame. The widget does not set this class itself, despite the original spec's assumption. assets/js/seat-map-enhance.js adds it to the svg's parent once the chart mounts. */ .seat-map-container { border-radius: 12px; overflow: hidden; background: var(--seatmap-container-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 10px rgba(0, 0, 0, .12), 0 16px 40px rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .08); } /* The chart svg paints var(--onstage-widget-bg-color) (widget change, fall 2026; it was a hardcoded #F7F9FC before). That color differs from --seatmap-container-bg here, so keep the svg transparent and let the frame's own background show. The ancestor behind the tilt also reads --onstage-widget-bg-color now, so the old :has() patch is gone. */ .seat-map-container svg { background: transparent !important; } /* Widget bug (Nov 2026): the mobile payment-step divider carries !border-t-[var(--onstage-border-color,#e0e0e0)], but the bundle ships no CSS for that class, so it falls back to Tailwind gray-200. Every other checkout border reads --onstage-border-color now; delete this when the class gets generated. body prefix lifts specificity over the widget. */ body [class*="sc-onthestage-"][class*="border-t-[var(--onstage-border-color"] { border-top-color: var(--onstage-border-color) !important; }