/* * Tickera seat-chart overlay restyle. * * Re-skins the full-screen seat-map overlay rendered by the Tickera * "seating-charts" addon (reference/plugins/seating-charts) so it matches the * dark red/gold "Barlow" look of the custom IFE Elementor widgets and is far * more usable on mobile. * * IMPORTANT: the overlay renders at wp_footer, OUTSIDE the .sc-ticket-widget * scope, so the shared design tokens (sc-ticket-shared.css) don't cascade to * it. We re-declare them here on the overlay roots. This file is enqueued with * a dependency on Tickera's own 'tc-seat-charts-front' handle, so it always * cascades after style-front.css; !important is used only where overriding * Tickera's specificity or JS-set inline styles. * * Companion behaviour (extended zoom, pinch / double-tap, mobile auto-fit) * lives in assets/js/sc-seating-chart.js. */ /* --------------------------------------------------------------------------- * Design tokens (mirrors sc-ticket-shared.css) — declared on every overlay * root, including the detached jQuery UI dialog that renders at level. * ------------------------------------------------------------------------- */ .tc_seating_map, .tc-wrapper, .tc-bottom-controls, .tc-seating-legend-wrap, .tc-modal-wrap, .ui-dialog { --bg: #0d0d0d; --bg-alt: #111111; --card: #141414; --border: #2a2a2a; --text: #f0ece4; --muted: #b0a898; --primary: #b52121; --primary-hv: #d43030; --accent: #c8a84b; --accent-warm: #f5d88e; } /* --------------------------------------------------------------------------- * Overlay surface * ------------------------------------------------------------------------- */ .tc-wrapper { /* The seat map itself (STAGE box, VIP table strips, price text) is authored * for a light backdrop, so keep the canvas light; the dark toolbar, zoom * buttons, legend and modal float over it. */ background-color: #fbfbfb !important; /* Let our pinch handler own multi-touch gestures (see sc-seating-chart.js). */ touch-action: none; } /* --------------------------------------------------------------------------- * Seats — keep Tickera's semantic fill colours (set inline by JS), add a * contrast ring so seats read clearly across the chart. The visible dot is the * ::before pseudo-element (16px) inside the 24px chair box. * ------------------------------------------------------------------------- */ /* Dual ring (light inner halo + dark outer) so seats stay defined across the * chart's varied sections — white canvas, red dance floor, blue GA, black * table strips. */ .tc-table-chair.tc_set_seat::before, .tc_seat_unit.tc_set_seat::before { box-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.7 ), 0 0 0 2px rgba( 0, 0, 0, 0.35 ); } .tc-table-chair.tc_set_seat:hover::before, .tc_seat_unit.tc_set_seat:hover::before { box-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.85 ), 0 0 0 3px var(--accent); } /* Selected seat — bold gold ring with a dark halo for definition on light. */ .tc-table-chair.ui-selected::before, .tc_seat_unit.ui-selected::before, .tc-object-selectable.ui-selected::before { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba( 0, 0, 0, 0.5 ) !important; } /* In-cart / reserved / unavailable / blocked keep distinct, muted rings. */ .tc-table-chair.tc_seat_in_cart::before { box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.55 ), 0 0 0 2px rgba( 65, 135, 201, 0.6 ); } .tc-table-chair.tc_seat_reserved::before, .tc-table-chair.tc_seat_unavailable::before, .tc-table-chair.tc_blocked_seat::before { box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.4 ); } /* --------------------------------------------------------------------------- * Availability emphasis — give free seats a crisp gold ring so they "pop". * Taken seats keep their full Tickera fill colour (red) — no graying/dimming, * which the client found confusing (looked broken rather than "taken"). * ------------------------------------------------------------------------- */ .tc-table-chair.tc_set_seat:not( .tc_seat_reserved ):not( .tc_seat_unavailable ):not( .tc_blocked_seat ):not( .tc_seat_in_cart )::before, .tc_seat_unit.tc_set_seat:not( .tc_seat_reserved ):not( .tc_seat_unavailable ):not( .tc_blocked_seat ):not( .tc_seat_in_cart )::before { opacity: 1; box-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.85 ), 0 0 0 3px var(--accent); } /* --------------------------------------------------------------------------- * General-admission / standing block — make the label text clickable. * * On the live chart the "CLICK HERE TO PURCHASE GENERAL ADMISSION" label is a * standalone TEXT caption (.tc-group-text > .tc-caption-group.tc-group-background * > .tc-caption > span) drawn over the GA zone — NOT part of the selectable. So * taps land on the caption and do nothing. Make every text caption / its * coloured background transparent to pointer events so a tap falls through to * the selectable standing area (.tc-object-selectable) positioned beneath it. * * NOTE: this only makes the label clickable if the chart actually has a * standing selectable positioned under the label. If tapping still does * nothing, the GA selectable is authored elsewhere and must be moved under the * label in the Tickera chart builder. * ------------------------------------------------------------------------- */ .tc-group-text, .tc-group-text *, .tc-caption-group, .tc-caption, .tc-caption span, .tc-object span, .tc-object span p { pointer-events: none; } /* Where the selectable IS inside the standing object, let it fill the block so * the whole area (including under any label) is the tap target. */ .tc-standing-group-wrap .tc-object, .tc-element-group .tc-object { position: relative; } .tc-object .tc-object-selectable { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1000; } /* --------------------------------------------------------------------------- * Close (X) button — circular themed control, top-right. * ------------------------------------------------------------------------- */ .tc-full-screen { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 16px 16px 0 0; font-size: 20px; color: var(--text); background: rgba( 20, 20, 20, 0.85 ); border: 1px solid var(--border); border-radius: 50%; backdrop-filter: blur( 6px ); -webkit-backdrop-filter: blur( 6px ); transition: background-color 0.2s, color 0.2s, transform 0.2s; } .tc-full-screen:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: scale( 1.05 ); } /* --------------------------------------------------------------------------- * Bottom controls toolbar * ------------------------------------------------------------------------- */ .tc-bottom-controls-inside { display: flex; align-items: center; gap: 16px; min-height: 70px; padding: 8px 20px; background-color: rgba( 13, 13, 13, 0.92 ) !important; border-top: 1px solid var(--border); box-shadow: 0 -6px 24px rgba( 0, 0, 0, 0.45 ) !important; backdrop-filter: blur( 8px ); -webkit-backdrop-filter: blur( 8px ); } /* Drop Tickera's float/absolute layout so the flexbox can place children. */ .tc-bottom-controls-inside .tc-zoom-wrap, .tc-bottom-controls-inside .tc-seatchart-cart-info { float: none; position: static; margin: 0; } .tc-bottom-controls-inside .tc-seatchart-cart-info { margin-left: auto; } /* Helper text — muted, centered. Hidden on mobile (touch hint is inaccurate). */ .tc-seating-tooltips { width: auto; margin: 0; flex: 1 1 auto; } .tc-seating-tooltips p { color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 13px; } /* --------------------------------------------------------------------------- * Zoom controls — large circular themed buttons. * ------------------------------------------------------------------------- */ .tc-zoom-wrap { display: flex; align-items: center; gap: 10px; height: auto; padding: 0; background: none !important; border-radius: 0; } .tc-plus-wrap, .tc-minus-wrap { position: relative; float: none; width: 46px; height: 46px; margin: 0; padding: 0; border-radius: 50%; background: var(--card); border: 1px solid var(--border); transition: background-color 0.2s, border-color 0.2s; } .tc-plus-wrap:hover, .tc-minus-wrap:hover { background: var(--bg-alt); border-color: var(--accent); } /* Re-center the +/- bars inside the circular buttons. */ .tc-plus-horizontal, .tc-plus-vertical, .tc-minus { position: absolute; top: 50%; left: 50%; width: 18px; height: 3px; margin: 0; border-radius: 2px; background-color: var(--text); transform: translate( -50%, -50% ); } .tc-plus-vertical { transform: translate( -50%, -50% ) rotate( 90deg ); } .tc-plus-wrap:hover > .tc-plus-horizontal, .tc-plus-wrap:hover > .tc-plus-vertical, .tc-minus-wrap:hover > .tc-minus { background-color: var(--accent-warm); } /* Zoom slider — themed track/handle (desktop only; hidden on mobile below). */ .tc-wrapper .tc-zoom-slider.ui-slider { background-color: var(--border) !important; } .tc-zoom-wrap:hover > .tc-zoom-slider.ui-slider { height: 4px; } .tc-wrapper .tc-zoom-slider .ui-slider-handle { background-color: var(--accent) !important; } .tc-wrapper .tc-zoom-slider:hover > .ui-slider-handle { background-color: var(--accent-warm) !important; } /* --------------------------------------------------------------------------- * Subtotal + GO TO CART — red CTA matching the house convention. * ------------------------------------------------------------------------- */ .tc-checkout-bar { font-family: 'Barlow', sans-serif; gap: 16px; } .tc-checkout-bar p, .tc-seatchart-subtotal { color: var(--text); font-size: 15px; } .tc-checkout-bar strong, .tc-seatchart-subtotal strong, .tc-seatchart-subtotal .woocommerce-Price-amount { color: var(--accent) !important; font-weight: 700; } .tc-seatchart-cart-info .tc-checkout-button, .tc-seatchart-cart-info .tc-checkout-button:visited { background-color: var(--primary) !important; color: #fff !important; font-family: 'Barlow Condensed', sans-serif !important; font-weight: 800 !important; font-size: 18px !important; letter-spacing: 2px; text-transform: uppercase; height: auto !important; line-height: 1 !important; padding: 16px 32px !important; margin: 0 !important; border-radius: 4px; box-shadow: 0 4px 20px rgba( 181, 33, 33, 0.35 ) !important; transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s !important; } .tc-seatchart-cart-info .tc-checkout-button:hover { background-color: var(--primary-hv) !important; padding: 16px 32px !important; box-shadow: 0 6px 28px rgba( 212, 48, 48, 0.45 ) !important; transform: translateY( -1px ); } /* --------------------------------------------------------------------------- * Legend — desktop themed panel. * ------------------------------------------------------------------------- */ .tc-seating-legend { background: rgba( 13, 13, 13, 0.92 ); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 30px rgba( 0, 0, 0, 0.5 ); backdrop-filter: blur( 8px ); -webkit-backdrop-filter: blur( 8px ); padding: 8px 4px; } .tc-seating-legend ul { margin: 0; } .tc-seating-legend ul li { color: var(--text) !important; font-family: 'Barlow', sans-serif; font-size: 14px; } .tc-legend-arrow { color: var(--text); background: var(--card); border: 1px solid var(--border); } /* --------------------------------------------------------------------------- * Seat selection modal (jQuery UI dialog) — dark card. * ------------------------------------------------------------------------- */ .ui-widget-overlay { background: rgba( 0, 0, 0, 0.72 ) !important; opacity: 1 !important; } /* The jQuery UI dialog nests .ui-dialog > .ui-dialog-content(.tc-modal-wrap) > * .tc-modal. Only the innermost card is visible; the wrappers are made * transparent so no second box peeks out. */ .ui-dialog:has( .tc-modal-wrap ), .tc-modal-wrap { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } /* True centering. Tickera's initModal shifts the dialog up by the controls-bar * height and Tickera's stylesheet gives .ui-dialog a 490px width, which * over-constrains the inline left/right:0 and anchors the box at the left edge * (the off-center modal). Pin the fixed dialog to the full viewport instead and * let its inline flex centering (justify/align center) do the rest. `display` * is deliberately left alone so jQuery UI can still show/hide the dialog. */ .ui-dialog:has( .tc-modal-wrap ) { inset: 0 !important; width: auto !important; height: auto !important; max-height: none !important; } /* The wrap owns the card width; the cards just fill it. */ .tc-modal-wrap { width: min( 440px, calc( 100vw - 24px ) ) !important; min-height: 0 !important; margin: 0 !important; } .tc-modal, .tc-modal-woobridge, .tc-added-to-cart { width: 100% !important; margin: 0 !important; background-color: var(--card) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; box-shadow: 0 18px 50px rgba( 0, 0, 0, 0.6 ) !important; color: var(--text); box-sizing: border-box; } .tc-modal h5, .tc-modal-woobridge h5, .tc-modal p, .tc-modal-woobridge tr td, .tc-modal-wrap .woocommerce-variation-price { color: var(--text) !important; font-family: 'Barlow', sans-serif !important; } .tc_regular_modal_price, .tc-modal-wrap .woocommerce-variation-price .amount { color: var(--accent) !important; } /* Add / Update cart — red CTA. Width/padding/line-height are forced because * jQuery UI's .ui-button classes on this button otherwise collapse it to a * ~34px-tall strip. */ .tc-modal button.tc_cart_button, .tc-modal-woobridge button.tc_cart_button { background-color: var(--primary) !important; color: #fff !important; font-family: 'Barlow Condensed', sans-serif !important; font-weight: 800 !important; font-size: 16px !important; letter-spacing: 1px; text-transform: uppercase !important; width: 100% !important; height: auto !important; padding: 16px 0 !important; line-height: 1.2 !important; margin: 0 !important; border-radius: 4px !important; box-shadow: 0 4px 20px rgba( 181, 33, 33, 0.35 ) !important; } .tc-modal button.tc_cart_button:hover, .tc-modal button.tc_cart_button:active, .tc-modal-woobridge button.tc_cart_button:hover, .tc-modal-woobridge button.tc_cart_button:active { background-color: var(--primary-hv) !important; color: #fff !important; } /* Remove from cart — secondary outline (same sizing guard as the red CTA). */ .tc-modal button.tc_remove_from_cart_button { background-color: transparent !important; color: var(--text) !important; border: 1px solid var(--border) !important; font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px; width: 100% !important; height: auto !important; padding: 16px 0 !important; line-height: 1.2 !important; margin: 0 !important; border-radius: 4px !important; } .tc-modal button.tc_remove_from_cart_button:hover { border-color: var(--primary) !important; color: #fff !important; background-color: rgba( 181, 33, 33, 0.2 ) !important; } .tc-modal p a { color: var(--accent) !important; } .tc-modal p a:hover { color: var(--accent-warm) !important; } .tc-modal-woobridge .variations, .tc-modal-woobridge tr td { border-color: var(--border) !important; } /* --------------------------------------------------------------------------- * Availability badge — themed pill injected by JS onto .tc-wrapper (kept OUT * of the bottom bar, whose backdrop-filter would otherwise become the badge's * containing block and drop it onto the zoom controls). Fixed at top-center so * it never overlaps the zoom buttons, GO TO CART, close button or legend. * ------------------------------------------------------------------------- */ .ife-seat-availability { position: fixed; top: calc( 12px + env( safe-area-inset-top ) ); left: 50%; transform: translateX( -50% ); z-index: 10033; display: inline-flex; align-items: center; gap: 6px; max-width: calc( 100vw - 120px ); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--text); background: rgba( 20, 20, 20, 0.85 ); border: 1px solid var(--accent); border-radius: 999px; padding: 8px 16px; white-space: nowrap; box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.5 ); backdrop-filter: blur( 6px ); -webkit-backdrop-filter: blur( 6px ); } /* =========================================================================== * MOBILE (<= 780px) * ========================================================================= */ @media ( max-width: 780px ) { /* Hide the (inaccurate) drag/pan helper text. */ .tc-seating-tooltips { display: none; } /* Smaller availability pill on mobile (still fixed top-center via the base * rule, so it stays clear of the bottom bar's zoom controls). */ .ife-seat-availability { font-size: 12px; padding: 7px 12px; max-width: calc( 100vw - 80px ); } /* One clean row: zoom buttons (left) ............ GO TO CART (right). * The subtotal is hidden to give both controls room to breathe — the cart * page shows the running total anyway. */ .tc-bottom-controls { min-height: 0; } .tc-bottom-controls-inside { justify-content: space-between; padding: 10px 14px calc( 10px + env( safe-area-inset-bottom ) ); gap: 12px; } /* Hide the subtotal text on mobile to declutter the bar. */ .tc-seatchart-subtotal { display: none !important; } .tc-bottom-controls-inside .tc-seatchart-cart-info { flex: 0 0 auto; margin-left: auto; } .tc-checkout-bar { width: auto; } .tc-seatchart-cart-info .tc-checkout-button, .tc-seatchart-cart-info .tc-checkout-button:visited { flex: 0 0 auto; padding: 15px 26px !important; line-height: 1.1 !important; height: auto !important; border-radius: 4px; } /* Zoom buttons sit inline at the left of the bar (no longer floating over * the chart), horizontal, with comfortable touch targets. */ .tc-zoom-wrap { flex-direction: row; gap: 12px; } .tc-plus-wrap, .tc-minus-wrap { width: 48px; height: 48px; background: var(--card); } /* Pinch + buttons replace the slider on touch. */ .tc-wrapper .tc-zoom-slider.ui-slider, .tc-zoom-wrap:hover > .tc-zoom-slider.ui-slider { display: none !important; } /* ---- Legend as a collapsible bottom-sheet ---- * Anchored bottom-left, just above the controls bar. The "Legend" chip stays * pinned at the bottom; the list expands upward from it (column-reverse) so * it reads like a bottom sheet and never overlaps the controls. Pinned with * !important so Tickera's JS left-animation can't drag it off-screen. */ .tc_seating_map.active .tc-seating-legend-wrap:not( [style*="display:none"] ) { display: flex !important; flex-direction: column-reverse; align-items: flex-start; top: auto !important; right: auto !important; left: 14px !important; bottom: calc( 82px + env( safe-area-inset-bottom ) ) !important; width: auto !important; z-index: 10032; } .tc-legend-arrow { display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; height: auto !important; padding: 10px 16px; border-radius: 999px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; background: rgba( 20, 20, 20, 0.9 ); box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.5 ); backdrop-filter: blur( 6px ); -webkit-backdrop-filter: blur( 6px ); } .tc-legend-arrow::after { content: 'Legend'; } .tc-legend-arrow .fa { transition: transform 0.2s; } /* Collapsed by default; reveal the list (above the chip) only when the * arrow is in the "close" state (Tickera toggles tc-legend-close = visible). */ .tc-seating-legend { display: none; margin: 0 0 8px; min-width: 180px; } .tc-seating-legend-wrap:has( .tc-legend-arrow.tc-legend-close ) .tc-seating-legend { display: block; } .tc-seating-legend-wrap:has( .tc-legend-arrow.tc-legend-close ) .tc-legend-arrow .fa { transform: rotate( 90deg ); } /* ---- Bigger, easier-to-tap seats ---- * jQuery UI .selectable() decides which seat a tap hits from the seat * element's own measured box (not pseudo-element overflow), so to give big * fingers a more forgiving target we grow the chair box itself from 24px to * 34px and pull it back by half the growth (margin: -5px) so it stays * centered on Tickera's original anchor point. The seats are spaced well * apart (tables ~56px between chairs), so the larger boxes don't overlap. * The chair becomes a flex centering box so the visible dot stays centered. */ .tc-table-chair.tc_set_seat { width: 34px !important; height: 34px !important; margin: -5px !important; display: flex; align-items: center; justify-content: center; } /* Slightly larger, centered visible dot (Tickera's is 16px, top-left). */ .tc-table-chair.tc_set_seat::before, .tc_seat_unit.tc_set_seat::before { width: 22px; height: 22px; margin: 0; } }