/* ============================================================ Intensity Hoops — Event Booking: Event Detail Page Covers com_eventbooking/event/default.php and its sub-templates (event_properties.php, default_group_rates.php, tickettypes.php, default_location.php, event_message.php, default_social_buttons.php) — all unmodified originals, styled exclusively via CSS. ============================================================ */ /* ── Strip the component's light "boxed panel" chrome ──────── EventBooking's own bundled stylesheet (media/com_eventbooking/assets/ css/style.css) hardcodes a light theme on these two selectors — .eb-box-heading gets background:#f2f2f2, and #eb-event-page .eb-description (the id="eb-event-details" wrapper around everything below the heading) gets background:#fff — a boxed white/grey panel with rounded corners, a pattern this site doesn't use anywhere else. Overridden to transparent so event content sits directly on the page background like every other page. This file loads after style.min.css (confirmed via page order), so plain rules here already win — no !important needed. */ .eb-box-heading { background: transparent; border: none; border-radius: 0; padding: 0; margin: 0 0 1.5rem; } #eb-event-page .eb-description { background: transparent; border: none; border-radius: 0; margin: 0; padding: 0; } .eb-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font-heading, "Oswald", sans-serif); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; color: var(--text, #ffffff); text-shadow: 1px 1px 1px var(--black, #000000); margin: 0; } #pop-print { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--surface-2, #262626); border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08)); transition: background 0.2s ease, border-color 0.2s ease; } #pop-print a { display: flex; color: var(--text-muted, #a0a0a0); } #pop-print:hover { background: var(--surface-3, #333333); border-color: var(--border, rgba(18, 114, 186, 0.25)); } #pop-print:hover a { color: var(--text, #ffffff); } /* ── Two-column layout ──────────────────────────────────────── Wraps .eb-description-details (content) + #eb-event-info (properties/group-rates sidebar) — added in the override, they're direct siblings in the original markup. Everything else (register taskbar, location, tickets, notices, share icons) stays full-width above/below this, unchanged. */ .eb-detail-columns { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2.5rem; } .eb-detail-columns .eb-description-details { flex: 2 1 420px; min-width: 0; } .eb-detail-columns #eb-event-info { flex: 1 1 280px; min-width: 0; margin: 0; } @media (max-width: 767px) { .eb-detail-columns { gap: 1.5rem; } } /* ── Description + image ─────────────────────────────────── */ .eb-description-details { color: var(--text-body, #e0e0e0); line-height: 1.75; margin-bottom: 2rem; } .eb-description-details h2, .eb-description-details h3, .eb-description-details h4 { font-family: var(--font-heading, "Oswald", sans-serif); color: var(--text, #ffffff); text-shadow: 1px 1px 1px var(--black, #000000); margin: 1.5rem 0 0.75rem; } .eb-description-details p { margin: 0 0 1rem; } .eb-description-details a { color: var(--link, #2e8fd4); } .eb-description-details a:hover, .eb-description-details a:focus { color: var(--link-hover, #4da6e8); } .eb-description-details ul, .eb-description-details ol { margin: 0 0 1rem; padding-left: 1.5rem; } .eb-description-details img { max-width: 100%; height: auto; border-radius: 8px; } .eb-event-large-image { display: block; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08)); margin-bottom: 1.5rem; } /* .eb-thumb-left (small thumb + colorbox link variant) already styled in eventbooking.css — reused here, not redeclared. */ /* ── Properties / group rates / ticket tables ──────────────── event_properties.php, default_group_rates.php, and tickettypes.php all output bare Bootstrap table.table-bordered.table-striped elements (no wrapper class), unlike events_table_layout.php's .eb-events-table — so these are targeted directly by id/class rather than through a wrapper. */ #eb-event-properties-heading, #eb-event-group-rates-heading, .eb-event-tickets-heading { font-family: var(--font-heading, "Oswald", sans-serif); font-size: 1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text, #ffffff); margin: 0 0 1rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--brand-primary, #1272ba); } #eb-event-info-left, #eb-event-info-right { margin-bottom: 2rem; } /* Register CTA relocated into the sidebar, right below the properties table, instead of a separate full-width bar above/below the page — .eb-taskbar itself (button styling) is already covered by eventbooking.css; this just adds the separator/spacing for its new position here. */ .eb-sidebar-register { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08)); } .eb-sidebar-register ul { flex-wrap: wrap; } #eb-event-info-left table, #eb-event-info-right table, .eb-ticket-information { width: 100%; border-collapse: collapse; background: var(--surface, #1c1c1c); border: 1px solid var(--border, rgba(18, 114, 186, 0.25)); border-radius: 12px; overflow: hidden; } /* Kill Bootstrap's striped alternating row backgrounds */ #eb-event-info-left .table-striped > tbody > tr > *, #eb-event-info-right .table-striped > tbody > tr > *, .eb-ticket-information.table-striped > tbody > tr > * { background-color: transparent !important; --bs-table-bg-type: transparent !important; --bs-table-accent-bg: transparent !important; } #eb-event-info-left td, #eb-event-info-left th, #eb-event-info-right td, #eb-event-info-right th, .eb-ticket-information td, .eb-ticket-information th { padding: 0.75rem 1rem; border-color: var(--border-subtle, rgba(255, 255, 255, 0.08)) !important; background-color: transparent !important; color: var(--text-body, #e0e0e0); vertical-align: top; } /* Scoped to #eb-event-info-left specifically — .eb-event-property-label/ -value are also used (differently scoped, under .eb-event-properties-table) on the events list page in eventbooking.css. Unscoped rules here would leak into and conflict with that page. */ #eb-event-info-left .eb-event-property-label, .eb_number_registrant_column { color: var(--text-muted, #a0a0a0) !important; font-weight: 500; white-space: nowrap; width: 35%; } #eb-event-info-left .eb-event-property-value, .eb_rate_column { color: var(--text-body, #e0e0e0) !important; } #eb-event-info-left .eb-event-property-value a { color: var(--link, #2e8fd4); } #eb-event-info-left .eb-event-property-value a:hover, #eb-event-info-left .eb-event-property-value a:focus { color: var(--link-hover, #4da6e8); } .eb_free { color: var(--brand-primary-light, #2e8fd4); font-weight: 600; } .eb-ticket-information thead th { font-family: var(--font-heading, "Oswald", sans-serif); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted, #a0a0a0); border-bottom: 2px solid var(--border, rgba(18, 114, 186, 0.25)) !important; } .eb-ticket-type-title { font-weight: 600; color: var(--text, #ffffff); } .eb-ticket-type-description { color: var(--text-muted, #a0a0a0); font-size: 0.85rem; margin: 0.25rem 0 0; } .eb-text-right { text-align: right; } /* ── Location ─────────────────────────────────────────────── */ .eb-venue-image { max-width: 100%; border-radius: 12px; border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08)); margin-bottom: 1rem; } .eb-location-description { color: var(--text-body, #e0e0e0); line-height: 1.75; } /* ── Notice / status messages (event full, already registered, etc.) ── */ .eb-notice-message { background: var(--surface-2, #262626); border: 1px solid var(--border, rgba(18, 114, 186, 0.25)); border-left: 3px solid var(--brand-primary, #1272ba); border-radius: 8px; padding: 1rem 1.25rem; color: var(--text-body, #e0e0e0); margin: 0 0 1.5rem; } /* ── Social share icons ────────────────────────────────────── Excludes the Facebook/Twitter embed widgets in default_share.php — those are third-party iframes/scripts, not ours to restyle. EventBooking's own style.min.css sets conflicting rules at equal specificity on the exact same selector (.eb-social-sharing-buttons .btn): padding: 10px 30px (a rectangular pill, fights our fixed 38px circle), per-network background-color/border-color/box-shadow on .btn.eb-btn-* (Facebook blue, Twitter blue, etc. — pre-2023 brand colors), and a 24px icon size. Relying on load order alone to win a same-specificity fight is fragile, so every property that clashes is reset explicitly with !important below rather than assumed. */ .eb-social-sharing-buttons { display: flex; gap: 0.5rem; margin-top: 1.5rem; } .eb-social-sharing-buttons .btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 38px; height: 38px; padding: 0 !important; margin: 0 !important; border-radius: 50%; background-color: var(--surface-2, #262626) !important; background-image: none !important; border: 1px solid var(--border, rgba(18, 114, 186, 0.25)) !important; box-shadow: none !important; color: var(--text-muted, #a0a0a0); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .eb-social-sharing-buttons .btn i { font-size: 15px !important; } .eb-social-sharing-buttons .btn:hover, .eb-social-sharing-buttons .btn:focus { background-color: var(--brand-primary, #1272ba) !important; border-color: var(--brand-primary, #1272ba) !important; color: var(--white, #ffffff); } /* ── Twitter share widget (default_share.php) ──────────────── The widget itself renders inside a cross-origin iframe (injected client-side by platform.twitter.com/widgets.js) — its internal content is not reachable by our CSS at all, browser same-origin policy. This targets the iframe element's own box from the outside, which is ours. */ #rsep_twitter iframe { border-radius: 9999px; border: 1px solid grey !important; } /* ── Reduced motion ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { #pop-print, .eb-social-sharing-buttons .btn { transition: none; } } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 767px) { .eb-event-large-image, .eb-venue-image { border-radius: 8px; } #eb-event-info-left td, #eb-event-info-right td, .eb-ticket-information td { padding: 0.6rem 0.75rem; } }