/* events-widget.css — colours the MassiveTix embeds to jwvest. Linked at the end of on purpose: the vendor injects its own stylesheet from their CDN after the page's styles, so anything declared earlier loses at equal specificity. Last in document order wins. */ #ts-events-listing-container, #ts-calendar { background: #0a0a0a !important; border: 1px solid #9e2222 !important; border-radius: 8px; font-family: 'Inter', system-ui, sans-serif !important; width: 92% !important; max-width: 1050px !important; margin: 0 auto !important; } #ts-events-listing-container *, #ts-calendar * { background-color: transparent !important; font-family: 'Inter', system-ui, sans-serif !important; color: #d4d4d4 !important; } /* headings and dates */ #ts-events-listing-container .eventName, #ts-events-listing-container .eventName *, #ts-events-listing-container a, #ts-calendar .fc-toolbar-title, #ts-calendar .fc-col-header-cell-cushion, #ts-calendar .fc-daygrid-day-number { color: #f5f5f5 !important; } #ts-events-listing-container .dateTimeSummary, #ts-events-listing-container .dateTimeSummary * { color: #c42a2a !important; font-weight: 700 !important; } #ts-events-listing-container .locationSummary, #ts-events-listing-container .locationSummary *, #ts-calendar .fc-day-other .fc-daygrid-day-number { color: #888 !important; } /* red lines */ #ts-calendar table, #ts-calendar td, #ts-calendar th, #ts-calendar .fc-scrollgrid, #ts-calendar .fc-scrollgrid-section > *, #ts-calendar .fc-theme-standard td, #ts-calendar .fc-theme-standard th { border-color: #c42a2a !important; } #ts-events-listing-container .event-details-container { border-bottom: 1px solid #c42a2a !important; padding: 20px 22px !important; } #ts-calendar .fc-col-header-cell { background-color: #111 !important; } #ts-calendar .fc-day-today { background-color: rgba(196, 42, 42, .15) !important; } /* buttons keep the vendor's shape; only colour changes */ #ts-calendar .fc-button, #ts-calendar .fc-button-primary { background-color: #c42a2a !important; border-color: #9e2222 !important; color: #fff !important; } #ts-calendar .fc-button span, #ts-calendar .fc-button-primary span, #ts-calendar .fc-icon { color: #fff !important; } #ts-calendar .fc-button-primary:disabled, #ts-calendar .fc-button-primary:disabled span, #ts-calendar .fc-button-primary:disabled .fc-icon { background-color: #111 !important; color: #888 !important; opacity: 1 !important; } #ts-calendar .fc-button-primary:not(:disabled):hover, #ts-calendar .fc-button-active { background-color: #9e2222 !important; } #ts-events-listing-container .getTicketsButton, #ts-events-listing-container .btn { background-color: #c42a2a !important; border: 1px solid #000 !important; } #ts-events-listing-container .getTicketsButton, #ts-events-listing-container .getTicketsButton *, #ts-events-listing-container .btn, #ts-events-listing-container .btn * { color: #fff !important; } /* event chips */ #ts-calendar .fc-event, #ts-calendar .fc-daygrid-event, #ts-calendar .fc-event-main, #ts-calendar a.fc-event { background-color: #c42a2a !important; border: 1px solid #000 !important; color: #fff !important; white-space: normal !important; } #ts-calendar .fc-event * { color: #fff !important; } /* compact rows so an empty month is not a wall of grey */ #ts-calendar .fc-daygrid-day-frame { min-height: 48px !important; } #ts-calendar .fc-daygrid-day-events { min-height: 0 !important; margin-bottom: 0 !important; } /* ---- FullCalendar variables ---------------------------------------------- The library themes itself through these. Overriding its rules directly loses, because .fc .fc-button-primary is two classes and beats a single id on the properties the variables drive. */ #ts-calendar, #ts-calendar.fc { --fc-border-color: #c42a2a; --fc-page-bg-color: #0a0a0a; --fc-neutral-bg-color: #111; --fc-today-bg-color: rgba(196, 42, 42, .15); --fc-button-text-color: #fff; --fc-button-bg-color: #c42a2a; --fc-button-border-color: #9e2222; --fc-button-hover-bg-color: #9e2222; --fc-button-hover-border-color: #9e2222; --fc-button-active-bg-color: #9e2222; --fc-button-active-border-color: #9e2222; --fc-event-bg-color: #c42a2a; --fc-event-border-color: #000; --fc-event-text-color: #fff; } /* ---- draw the grid ------------------------------------------------------- The cells came through with border-style:none and width:0, so setting a colour did nothing: there was no border to colour. The variable was applied correctly the whole time. Drawing them explicitly instead. */ #ts-calendar table, #ts-calendar thead, #ts-calendar tbody, #ts-calendar tr, #ts-calendar td, #ts-calendar th { border-style: solid !important; border-width: 1px !important; border-color: #c42a2a !important; } #ts-calendar table { border-collapse: collapse !important; } #ts-calendar .fc-scrollgrid { border: 1px solid #c42a2a !important; } /* the button labels sit in a span the library colours separately */ #ts-calendar .fc .fc-button-primary, #ts-calendar .fc .fc-button-primary span, .fc .fc-button-primary, .fc .fc-button-primary span, .fc .fc-button-primary .fc-icon { color: #fff !important; background-color: #c42a2a !important; border-color: #9e2222 !important; } .fc .fc-button-primary:disabled, .fc .fc-button-primary:disabled span { background-color: #111 !important; color: #888 !important; opacity: 1 !important; } /* ---- jw-glyph-fix -------------------------------------------------------- The prev/next arrows are a webfont the library ships. Forcing Inter on every descendant replaced it and the glyphs became boxes, so the icon class keeps its own font. */ #ts-calendar .fc-icon, #ts-calendar .fc-icon::before, #ts-calendar [class^="fc-icon-"], #ts-calendar [class*=" fc-icon-"] { font-family: 'fcicons' !important; color: #fff !important; } /* The chip's title is coloured by its own class, so setting the chip alone left red text on the red fill. */ #ts-calendar .fc-event-title, #ts-calendar .fc-event-title-container, #ts-calendar .fc-event-time, #ts-calendar .fc-sticky, #ts-calendar .fc-event .fc-event-main-frame, #ts-calendar .fc-event-main * { color: #fff !important; } /* ---- jw-chip-dark -------------------------------------------------------- The chip title kept rendering red even with an inline white !important on the element. Rather than keep chasing it, the chip is black with a red border: red text on black is legible, so the outcome is right whichever colour the widget wins with. */ #ts-calendar .fc-event, #ts-calendar .fc-daygrid-event, #ts-calendar a.fc-event, #ts-calendar .fc-event-main { background-color: #0a0a0a !important; border: 1px solid #c42a2a !important; } #ts-calendar .fc-event-title, #ts-calendar .fc-event-time, #ts-calendar .fc-event-title-container { background-color: transparent !important; } /* ---- mobile --------------------------------------------------------------- The calendar measured 259px on a 390px screen: the container adds 25px of padding each side and 92% then applied to what was left. On a phone it takes the full width, and the padding comes off. */ @media (max-width: 640px) { #ts-calendar, #ts-calendar.fc { width: 100% !important; max-width: none !important; } #ts-events-listing-container { padding-left: 8px !important; padding-right: 8px !important; } #ts-calendar .fc-toolbar { flex-wrap: wrap !important; gap: 8px !important; } #ts-calendar .fc-toolbar-title { font-size: 1.05rem !important; } #ts-calendar .fc-daygrid-day-frame { min-height: 38px !important; } #ts-calendar .fc-col-header-cell-cushion { font-size: 11px !important; padding: 4px 1px !important; } #ts-calendar .fc-daygrid-day-number { font-size: 12px !important; } /* nothing readable below 12px */ #ts-events-listing-container *, #ts-calendar .fc-event * { font-size: max(12px, 1em) !important; } } /* ---- grid layout ---------------------------------------------------------- booking.html uses the grid layout, which renders markup the list rules never matched, so it kept the vendor's white card. */ #ts-events-listing-container.grid, #ts-events-listing-container.grid *, #ts-events-listing-container .event-grid, #ts-events-listing-container .event-grid * { background-color: transparent !important; color: #d4d4d4 !important; } #ts-events-listing-container.grid { background: #0a0a0a !important; } #ts-events-listing-container.grid .eventName, #ts-events-listing-container.grid .eventName * { color: #f5f5f5 !important; } #ts-events-listing-container.grid .dateTimeSummary, #ts-events-listing-container.grid .dateTimeSummary * { color: #c42a2a !important; } #ts-events-listing-container.grid .getTicketsButton, #ts-events-listing-container.grid .getTicketsButton * { background-color: #c42a2a !important; color: #fff !important; border: 1px solid #000 !important; } /* Nav links measured 11.52px on mobile, under the 12px floor. */ @media (max-width: 640px) { nav a, .nav a, header a { font-size: max(12px, 0.78rem) !important; } }