/* ============================================================ 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; /* ---- 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; } /* 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: #0d0d14; 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 itself carries a hardcoded #F7F9FC background baked into the widget's compiled CSS (not exposed through any --onstage-* variable), which paints over the container's dark background above. Force it transparent so the container's own background shows through. !important because the widget's own stylesheet loads after ours and some of its utility classes are already !important-flagged. */ .seat-map-container svg { background: transparent !important; } /* The perspective tilt rotates .seat-map-container itself, so its own dark background rotates along with it, leaving the corners the rotation "peels back" showing whatever is stacked behind rather than more of its own surface. The element behind it is another hardcoded-white utility div a couple of ancestors up. Scoped with :has() so only the instance wrapping our seat map is touched, not every use of that utility class elsewhere in the widget. */ .bg-\[\#F7F9FC\]:has(.seat-map-container) { background: #0d0d14 !important; }