/* ============================================================ THE FOUNDRY PLAYHOUSE theme for the OnTheStage widget. Remaps the --onstage-* tokens to the site palette: warm cream / white surfaces, brick-red actions, Cormorant Garamond / Archivo. Doubled :root:root (specificity 0,2,0) outranks the CDN default sheet's :root (0,1,0), so these win regardless of load order and reach full-screen / checkout surfaces too. ============================================================ */ :root:root { /* ---- brand / accents ---- */ --onstage-primary-1-main: #8a2f22; /* primary buttons, selected states, header nav */ --onstage-primary-2-main: #8a2f22; /* badges */ --onstage-primary-3-main: #8a2f22; /* tertiary */ --onstage-font-color-primary: #8a2f22; /* links */ /* ---- typography ---- */ --onstage-font-family: 'Archivo', system-ui, sans-serif; --onstage-font-family-secondary: 'Archivo', system-ui, sans-serif; --onstage-font-family-medium: 'Archivo', system-ui, sans-serif; --onstage-font-family-bold: 'Cormorant Garamond', Georgia, serif; --onstage-font-family-header: 'Cormorant Garamond', Georgia, serif; --onstage-text-color: #211d18; --onstage-text-secondary-color: #5f5a54; --onstage-icon-color: #211d18; --onstage-text-disabled-color: #b0a89e; /* ---- surfaces ---- */ --onstage-background-color: #faf7f1; --onstage-widget-container-background: transparent; /* let the page bg show through */ --onstage-border-color: rgba(33, 29, 24, .16); --onstage-active-border-color: #211d18; /* ---- buttons ---- */ --onstage-button-bg-white: #ffffff; --onstage-button-bg-primary: #8a2f22; --onstage-button-bg-primary-hover: #73271c; --onstage-button-hover-opacity: 1; /* using a solid hover color */ --onstage-button-font-primary: #faf7f1; --onstage-button-border-primary: 1px solid #8a2f22; --onstage-button-bg-secondary: #ffffff; --onstage-button-bg-gray: #ffffff; --onstage-button-font-secondary: #211d18; --onstage-button-border-secondary: rgba(33, 29, 24, .30); --onstage-button-font-gray: #211d18; --onstage-button-border-gray: rgba(33, 29, 24, .30); --onstage-button-bg-disabled: #e7e0d3; --onstage-button-font-disabled: #b0a89e; --onstage-button-border-radius: 2px; /* match the site's square-ish buttons */ /* ---- widget home header actions (My Cart / Log In) ---- */ --onstage-widget-home-login-btn-color: #211d18; --onstage-widget-home-my-cart-btn-color: #211d18; /* ---- calendar view ---- */ --onstage-calendar-selected-day-bg-color: #8a2f22; --onstage-calendar-dropdown-background-color: #ffffff; --onstage-calendar-dropdown-text-color: #211d18; --onstage-calendar-dropdown-hover-background-color: #faf7f1; --onstage-calendar-dropdown-active-background-color: #efe9df; --onstage-calendar-dropdown-checkbox-border-color: #211d18; --onstage-calendar-today-circle-background-color: #8a2f22; --onstage-calendar-today-datetext-color: #faf7f1; --onstage-calendar-disabled-background-color: #f2efe9; --onstage-calendar-disabled-datetext-color: #b0a89e; --onstage-calendar-datetext-color: #211d18; --onstage-calendar-border-color: rgba(33, 29, 24, .16); --onstage-calendar-day-label-bg-color: #faf7f1; --onstage-calendar-day-label-text-color: #5f5a54; /* ---- list view ---- */ --onstage-list-datetext-color: #211d18; --onstage-list-disabled-datetext-color: #b0a89e; /* ---- production carousel ---- */ --onstage-production-carousel-arrow-buttons-bg-color: #ffffff; --onstage-production-carousel-arrow-buttons-color: #8a2f22; --onstage-production-carousel-background-color: #faf7f1; --onstage-production-carousel-text-color: #211d18; --onstage-production-carousel-link-color: #8a2f22; /* ---- full-screen steps (Select A Time, Tickets, Add Ons, Cart, Checkout) ---- */ --onstage-widget-bg-color: #faf7f1; --onstage-modal-content-bg-color: #ffffff; --onstage-dialog-bg-color: #ffffff; --onstage-production-bg-color: #211d18; /* dark banner behind production name */ --onstage-high-level-details-address-text-color: #5f5a54; /* ---- header nav (top bar) ---- */ --onstage-header-nav-bg-color: #8a2f22; --onstage-header-nav-text-color: #faf7f1; --onstage-header-nav-icon-color: #faf7f1; /* ---- Select A Time ---- */ --onstage-select-a-time-selected-date-bg-color: #8a2f22; --onstage-select-a-time-selected-date-text-color: #faf7f1; --onstage-select-a-time-bg-color: #ffffff; --onstage-select-a-time-availability-legend-bg-color: #ffffff; --onstage-select-a-time-unavailable-day-bg-color: #f2efe9; --onstage-select-a-time-unavailable-day-text-color: #b0a89e; /* ---- Select Tickets ---- */ --onstage-select-ticket-name-font-color: #211d18; --onstage-select-ticket-description-font-color: #5f5a54; --onstage-select-ticket-presale-btn-bg-color: #faf7f1; --onstage-counter-bg-color: #ffffff; --onstage-counter-font-color: #211d18; --onstage-counter-soldout-font-color: #b0a89e; --onstage-counter-border-color: rgba(33, 29, 24, .25); --onstage-counter-disabled-color: #b0a89e; --onstage-trash-icon-color: #5f5a54; --onstage-logo-bg-color: transparent; /* light page bg; dark logos read fine */ /* ---- marketing / ToS / review copy ---- */ --onstage-allow-marketing-text-color: #5f5a54; --onstage-tos-copy-text-color: #5f5a54; --onstage-tos-links-color: #8a2f22; --onstage-checkout-review-text-color: #5f5a54; /* ---- footer ---- */ --onstage-footer-link-color: #8a2f22; --onstage-footer-text-color: #5f5a54; --onstage-footer-legal-text-color: #5f5a54; /* ---- badges ---- */ --onstage-badge-color: #8a2f22; --onstage-cart-badge-bg-color: #8a2f22; /* ---- tile widget ---- */ --onstage-tile-bg: #ffffff; --onstage-tile-border: 1px solid rgba(33, 29, 24, .16); --onstage-tile-border-color-active: #8a2f22; --onstage-tile-footer-bg: #faf7f1; --onstage-tile-footer-border: 0.948px solid rgba(33, 29, 24, .16); --onstage-tile-month-font-family: 'Cormorant Garamond', Georgia, serif; --onstage-tile-month-color: #8a2f22; --onstage-tile-day-color: #211d18; --onstage-tile-production-name-color: #211d18; --onstage-tile-time-color: #5f5a54; --onstage-tile-more-details-color: #8a2f22; --onstage-tile-disabled-text-color: #b0a89e; /* ---- seat-map enhancement (assets/js/seat-map-enhance.js) ---- */ --seatmap-container-bg: #ffffff; --seatmap-stage-fill: #211d18; /* ink, matches the patrons band */ --seatmap-stage-stroke: rgba(216, 162, 122, .45); /* tan, the site's dark-surface accent */ --seatmap-stage-text: rgba(216, 162, 122, .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. Border + flat radius match .offer-card rather than reusing Vespertine's heavier dark-theme shadow treatment. */ .seat-map-container { border-radius: 2px; overflow: hidden; background: var(--seatmap-container-bg); border: 1px solid rgba(33, 29, 24, .28); box-shadow: 0 1px 2px rgba(33, 29, 24, .10), 0 8px 24px rgba(33, 29, 24, .18), 0 24px 48px rgba(33, 29, 24, .16); } /* The chart svg itself carries a hardcoded #F7F9FC background baked into the widget's compiled CSS (not exposed through any --onstage-* variable). Force it transparent so the container's own background shows through instead. !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 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: var(--seatmap-container-bg) !important; }