/* ============================================================================= TSF — Off-Season / Holiday events Migrated OUT of Elementor custom CSS (it lived only in the database and was therefore never version-controlled). This file now holds ONLY what more than one surface needs: PART 1 .event-pill + .holiday-pill.slug-* — the pill and the per-holiday colours, shared by the single Listing's event cards, the holiday archive card, and the holiday filter strip. PART 2 .tsf-event / .tsf-events — single Listing, ALL future events, in the section vocabulary (listing-sections.php). The holiday ARCHIVE card no longer lives here. It used to be .holiday-event-snippet, a bordered centred panel nested inside another bordered card; it is now .ha-card-event, a section of the Haunt Advisor card the whole site's grids share — see css/holiday-archive.css. Enqueued by tsf_enqueue_holiday_events_css() (global-setup.php), called from listing-sections.php and holiday-archive.php. ========================================================================== */ /* ============================================================================= PART 1 — the shared holiday vocabulary What survives here is exactly what BOTH consumers need: the pill geometry and the per-holiday colours. Everything that was archive-card-only — .holiday-event-snippet and its .event-dates / .date-col / .event-description children, .event-pill.view-all-events, and the see-more toggles — moved to css/holiday-archive.css along with the card itself, which is now a Haunt Advisor card rather than a bordered panel of its own. Nothing emits those classes any more. ========================================================================== */ .event-pill { display: inline-block; padding: 4px 10px; border-radius: 15px; font-size: 0.8em; font-weight: bold; text-decoration: none; background-color: #910000; color: #fff; margin-bottom: 10px; } /* Per-holiday colours. Deliberately literal, not tokenised: these carry per-holiday semantics (Christmas green, pumpkin orange, ominous slate), not brand colour, and folding them into --tsf-* would destroy the only distinction they exist to make. They ARE declared as custom properties, though, because there are now three consumers rather than two — the single Listing's event cards, the archive card's pill, and the dot on each holiday pill in the filter strip (css/holiday-archive.css). One hex per holiday, in one place; a fourth consumer references the variable instead of copying the value. */ :root { --tsf-hol-valentines-day-haunts: #910000; --tsf-hol-valentines-day-haunts-ink: #ffffff; --tsf-hol-christmas-haunts: #1E8449; --tsf-hol-christmas-haunts-ink: #ffffff; --tsf-hol-st-patricks-day-haunts: #2ECC71; --tsf-hol-st-patricks-day-haunts-ink: #000000; --tsf-hol-easter-haunts: #AED6F1; --tsf-hol-easter-haunts-ink: #000000; --tsf-hol-spring-break-haunts: #F1C40F; --tsf-hol-spring-break-haunts-ink: #000000; --tsf-hol-summer-haunts: #3498DB; --tsf-hol-summer-haunts-ink: #ffffff; --tsf-hol-halfway-to-halloween-haunt-events: #F39C12; --tsf-hol-halfway-to-halloween-haunt-events-ink: #000000; --tsf-hol-friday-the-13th-haunts: #34495E; --tsf-hol-friday-the-13th-haunts-ink: #ffffff; --tsf-hol-year-round: #5D3FD3; --tsf-hol-year-round-ink: #ffffff; --tsf-hol-thanksgiving: #874E1F; --tsf-hol-thanksgiving-ink: #ffffff; --tsf-hol-new-years: #BDC3C7; --tsf-hol-new-years-ink: #000000; } .holiday-pill.slug-valentines-day-haunts { background-color: var(--tsf-hol-valentines-day-haunts); color: var(--tsf-hol-valentines-day-haunts-ink); } .holiday-pill.slug-christmas-haunts { background-color: var(--tsf-hol-christmas-haunts); color: var(--tsf-hol-christmas-haunts-ink); } .holiday-pill.slug-st-patricks-day-haunts { background-color: var(--tsf-hol-st-patricks-day-haunts); color: var(--tsf-hol-st-patricks-day-haunts-ink); } .holiday-pill.slug-easter-haunts { background-color: var(--tsf-hol-easter-haunts); color: var(--tsf-hol-easter-haunts-ink); } .holiday-pill.slug-spring-break-haunts { background-color: var(--tsf-hol-spring-break-haunts); color: var(--tsf-hol-spring-break-haunts-ink); } .holiday-pill.slug-summer-haunts { background-color: var(--tsf-hol-summer-haunts); color: var(--tsf-hol-summer-haunts-ink); } .holiday-pill.slug-halfway-to-halloween-haunt-events { background-color: var(--tsf-hol-halfway-to-halloween-haunt-events); color: var(--tsf-hol-halfway-to-halloween-haunt-events-ink); } .holiday-pill.slug-friday-the-13th-haunts { background-color: var(--tsf-hol-friday-the-13th-haunts); color: var(--tsf-hol-friday-the-13th-haunts-ink); } .holiday-pill.slug-year-round { background-color: var(--tsf-hol-year-round); color: var(--tsf-hol-year-round-ink); } .holiday-pill.slug-thanksgiving { background-color: var(--tsf-hol-thanksgiving); color: var(--tsf-hol-thanksgiving-ink); } .holiday-pill.slug-new-years { background-color: var(--tsf-hol-new-years); color: var(--tsf-hol-new-years-ink); } /* ============================================================================= PART 2 — single Listing, section vocabulary Panel surface + soft hairline + 13px radius, matching .tsf-panel. Content is LEFT aligned like every other section; the old block centred everything, which is most of why it read as foreign. ========================================================================== */ .tsf-events { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .tsf-event { border: 1px solid var(--tsf-line-soft, #2A2A2A); border-radius: var(--tsf-radius-lg, 13px); background: var(--tsf-surface, #0F0F0F); padding: 18px 20px; } /* Geometry ONLY. The background colour still comes from .holiday-pill.slug-* in Part 1, so the two consumers can never drift apart on holiday colour — that is why this element carries both classes. */ .tsf-event-tag { display: inline-block; padding: 5px 12px; border-radius: 15px; font-size: var(--tsf-size-2xs, 0.75rem); font-weight: var(--tsf-weight-bold, 700); letter-spacing: .04em; margin-bottom: 12px; background-color: #910000; color: var(--tsf-text-bright, #fff); } .tsf-event-body { color: var(--tsf-text, #CBCBCB); font-size: var(--tsf-size-sm, 0.9rem); line-height: var(--tsf-leading-body, 1.6); } .tsf-event-body p { margin: 0 0 .85em; } .tsf-event-body p:last-child { margin-bottom: 0; } .tsf-event-dates { display: flex; margin-top: 14px; background: var(--tsf-surface-sunken, #0C0C0C); border: 1px solid var(--tsf-line-soft, #2A2A2A); border-radius: var(--tsf-radius-md, 10px); overflow: hidden; } .tsf-event-date { flex: 1 1 50%; padding: 9px 12px; min-width: 0; } .tsf-event-date + .tsf-event-date { border-left: 1px solid var(--tsf-line-soft, #2A2A2A); } /* Same k/v idiom as .tsf-row in listing-hero.css — muted small-caps key over a strong value — so these dates read as part of the same page. */ .tsf-event-date .k { display: block; color: var(--tsf-text-muted, #8A8A8A); font-size: .63rem; text-transform: uppercase; letter-spacing: var(--tsf-tracking-caps, .13em); font-weight: var(--tsf-weight-bold, 700); } .tsf-event-date .v { display: block; margin-top: 2px; white-space: pre-line; color: var(--tsf-text-strong, #F2F2F2); font-weight: var(--tsf-weight-bold, 700); font-size: var(--tsf-size-sm, 0.9rem); line-height: 1.3; } /* CONTAINER queries, not viewport: this renders inside .tsf-sections, which is the container-query context (listing-hero.css). 720px matches the number used there — do not swap either one for a media query. */ @container (max-width: 720px) { .tsf-events { grid-template-columns: 1fr; gap: 14px; } } @supports not (container-type: inline-size) { @media (max-width: 767px) { .tsf-events { grid-template-columns: 1fr; gap: 14px; } } }