/* Single Event (The Events Calendar Pro) — no Figma design yet. Temporary stopgap only: removes Kadence's global "Content Background" color so the page renders on a plain background until real styling is added. Keep separate from events-calendar.css, which is fully mapped to Figma nodes for List View and Month View only. */ /* Kadence's own #kadence-global-inline-css prints ".content-bg, body.content-style-unboxed .site { background: var(--global-palette2); }" sitewide (specificity 0,1,0) from its Content Background Customizer setting. Normal pages/posts get a more specific rule elsewhere that repaints .content-bg back to white, but TEC's single-event template wrapper never receives that override, so Kadence's raw global-palette2 (#1c5482, dark navy) shows through unmasked. .tribe-events-single.content-bg (0,2,0) is a compound selector built from two classes already present on this exact element (confirmed live via getComputedStyle:
), which outranks Kadence's bare .content-bg rule without !important and without touching that selector's other site-wide uses. */ .tribe-events-single.content-bg { background: none; } /* ========================================================================== Match List View typography — no Figma node for the single-event template yet, so the four rules below reuse the equivalent already-styled elements from events-calendar.css's List View section (/events/) as the visual reference per direction, rather than a Figma node. ========================================================================== */ /* "Event Series: ..." marker (only rendered on events that belong to a recurring series). Matched to List View's .tribe-events-calendar-list__event-datetime-wrapper (font-size 14px, line-height 21px, color #757575, padding 0) — confirmed live via getComputedStyle both currently rendered 16px/24px, #041F3D (navy), and 4px 0 padding instead. Font-family (Lato) and font-weight (400) already matched, so they're not repeated here. TEC's own custom-tables-v1/single.css ships ".tribe-events-series-relationship-marker, .tribe-events-series- relationship-single-marker" (specificity 0,1,0) setting these properties via --tec-color-text-primary. The element's own two real classes (.tribe-events-series-relationship-single-marker.tribe-common) give (0,2,0), outranking that rule without !important. */ .tribe-events-series-relationship-single-marker.tribe-common { font-size: 14px; line-height: 21px; color: #757575; padding: 0; } /* Subscribe-to-Calendar control. Confirmed live: no rule sets width — it's a plain block-level div, so it defaults to filling its container's full width (738px in the current layout). Per direction, shrink it to only as wide as its content (the button) needs, rather than matching any specific reference element. Scoped to .tribe-events-single (a real class already on the template's #tribe-events-content wrapper, confirmed live as an ancestor of this element) so List View's own .tribe-events-c-subscribe-dropdown in its sidebar column is untouched. */ .tribe-events-single .tribe-events-c-subscribe-dropdown { width: fit-content; } /* "Virtual Event" marker/icon. Matched to List View's bold virtual-event label (.tribe-common-b2--bold.tribe-events-virtual-virtual-event: font-weight 700, font-size 14px, line-height 21px) — confirmed live via getComputedStyle this currently rendered regular weight at 16px/24px instead. Color (#000000), text-transform, letter-spacing, and text-decoration already matched, so they're not repeated here. No competing rule sets these three properties (TEC's own skeleton CSS for this class only touches display/float/alignment), so no specificity fight — scoped to .tribe-events-single anyway for consistency with the rule above and to avoid bleeding into any other context that might reuse this exact marker class. */ .tribe-events-single .tribe-events-virtual-single-marker { font-weight: 700; font-size: 14px; line-height: 21px; } /* Previous/Next Event footer nav bar. Matched to List View's bottom pagination bar (#primary .tribe-events-calendar-list-nav: nav has padding: 24px 0 0; its ul has list-style: none, confirmed live) — the first pass above only re-colored the link text and left the bar itself unstyled: .tribe-events-nav-pagination (TEC's own skeleton rule, specificity 0,1,0) still had padding: 0, and .tribe-events-sub-nav's disc bullet is an unstyled browser list default with no competing rule at all, so it rendered as a plain bulleted list with no top separation instead of a proper nav bar. Scoping .tribe-events-sub-nav to .tribe-events-single (0,2,0) keeps any other TEC view reusing that same generic class name untouched. */ .tribe-events-nav-pagination { padding: 24px 0 0; } .tribe-events-single .tribe-events-sub-nav { list-style: none; } /* The "»" chevron was never actually invisible-by-styling — it's unconditionally hidden by TEC's own tribe-events-single-skeleton.css rule ".tribe-events-single .tribe-events-sub-nav a span { display: none; }" (0,2,2), confirmed live (getComputedStyle showed display: none on the span). No amount of color/hover work on the itself could have surfaced it. Adding .tribe-events-nav-pagination as an extra real ancestor class (confirmed live as the