/** * ECF Events Calendar — front-end styles (spec Section 7). * CSS custom properties allow theme overrides. * * Variables live on :root so they're available to the modal too — the modal is * appended to and is NOT a descendant of .ecf-calendar, so variables * scoped to .ecf-calendar wouldn't cascade to it. */ :root { --ecf-green-dark: #2D4A2D; --ecf-green-mid: #3E6B3E; --ecf-lime: #7DC033; --ecf-cream: #F5F0E8; --ecf-text: #111111; --ecf-text-muted: #6B7280; --ecf-border: #E5E7EB; --ecf-modal-overlay: rgba(0, 0, 0, 0.6); } .ecf-calendar { /* System sans-serif stack — keeps cards consistent across themes. The H1 has its own theme classes (heading h2 mt-6) which override this. */ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; color: var(--ecf-text); width: 100%; box-sizing: border-box; max-width: 100%; } .ecf-calendar * { box-sizing: border-box; } /* Header */ .ecf-calendar__header { display: block; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--ecf-border); } /* H1 — the public site's theme provides .heading / .h2 / .mt-6 which override most of these via the natural CSS cascade (plugin CSS loads before theme CSS, so theme rules at the same specificity win). On the private site those classes are not defined, so the hardcoded values below apply as a fallback. */ .ecf-calendar__title { margin: 32px 0 16px; color: rgb(49 80 53 / var(--tw-text-opacity, 1)); font-size: 2.67rem; font-weight: 700; line-height: 1.2; text-align: center; } .ecf-calendar__controls { display: flex; gap: 16px; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .ecf-calendar__filter { padding: 8px 12px; border: 1px solid var(--ecf-border); border-radius: 4px; background: #fff; font-family: inherit; font-size: 14px; } .ecf-calendar__view-toggle { display: inline-flex; border: 1px solid var(--ecf-border); border-radius: 4px; overflow: hidden; } .ecf-calendar__view-toggle button { background: #fff; border: 0; padding: 8px 12px; cursor: pointer; color: var(--ecf-text-muted); font-size: 16px; line-height: 1; min-width: 36px; } .ecf-calendar__view-toggle button.is-active { background: var(--ecf-green-dark); color: #fff; } /* Count */ .ecf-calendar__count { color: var(--ecf-text-muted); font-size: 14px; margin-bottom: 16px; } /* Grid — 3 cols desktop, 2 cols tablet, 1 col mobile */ .ecf-calendar__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 991px) { .ecf-calendar__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .ecf-calendar__grid { grid-template-columns: 1fr; } } /* List view */ .ecf-calendar__list .ecf-card { display: flex; align-items: stretch; gap: 16px; padding: 12px; } .ecf-calendar__list .ecf-card__image { width: 120px; height: 90px; flex-shrink: 0; } .ecf-calendar__list .ecf-card__body { flex: 1; display: flex; flex-direction: column; justify-content: center; } .ecf-calendar__list .ecf-card__cta { width: auto; padding: 10px 18px; align-self: center; margin: 0; } /* Card — square corners, white body, lifts slightly on hover */ .ecf-card { background: #fff; border: 1px solid var(--ecf-border); border-radius: 0; overflow: hidden; cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease; display: flex; flex-direction: column; } .ecf-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .ecf-card__image { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--ecf-green-dark); overflow: hidden; } .ecf-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .ecf-card__date-badge { position: absolute; top: 12px; left: 12px; background: var(--ecf-green-dark); color: #fff; padding: 8px 10px; border-radius: 4px; text-align: center; line-height: 1; } .ecf-card__date-badge-month { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; } .ecf-card__date-badge-day { font-size: 22px; font-weight: 700; } /* New two-line badge: weekday (small) + month/day (current size) */ .ecf-card__date-badge-weekday { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; opacity: 0.85; } .ecf-card__date-badge-monthday { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .ecf-card__body { padding: 20px 20px 0; flex: 1; display: flex; flex-direction: column; } .ecf-card__type { color: var(--ecf-lime); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 10px; } .ecf-card__title { font-size: 20px; font-weight: 700; margin: 0 0 14px; color: var(--ecf-text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ecf-card__time { color: var(--ecf-text-muted); font-size: 14px; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; } .ecf-card__time::before { content: "🕐"; font-size: 14px; } .ecf-card__cta { background: var(--ecf-lime); color: #fff; border: 0; border-radius: 0; padding: 16px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; text-align: center; text-decoration: none; display: block; /* Extend edge-to-edge of the card, escaping the body's 20px horizontal padding */ margin: auto -20px 0; font-family: inherit; } .ecf-card__cta:hover { filter: brightness(0.95); } /* Load More */ .ecf-calendar__load-more { display: block; margin: 32px auto 0; padding: 12px 32px; background: var(--ecf-green-dark); color: #fff; border: 0; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; } .ecf-calendar__load-more:hover { background: var(--ecf-green-mid); } .ecf-calendar__load-more[hidden] { display: none; } /* Modal */ .ecf-modal { position: fixed; inset: 0; background: var(--ecf-modal-overlay); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 24px; /* Modal is appended to , outside the calendar wrapper — set the same sans-serif stack here so it doesn't inherit a serif font from the theme. */ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; } .ecf-modal[hidden] { display: none; } .ecf-modal__inner { background: #fff; border-radius: 8px; max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; } /* Higher specificity (.ecf-modal .ecf-modal__close) to win over generic theme `button { ... }` styles that can flatten or restyle the close button. */ .ecf-modal .ecf-modal__close { position: absolute; top: 12px; right: 12px; background: rgba(45, 74, 45, 0.85); border: 0; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: #fff; font-size: 22px; line-height: 1; z-index: 1; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } .ecf-modal .ecf-modal__close:hover { background: rgba(45, 74, 45, 1); } .ecf-modal__hero { width: 100%; max-height: 600px; object-fit: cover; display: block; } .ecf-modal__body { padding: 24px; } .ecf-modal__type { color: var(--ecf-lime); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 8px; } .ecf-modal__title { font-size: 28px; font-weight: 700; margin: 0 0 12px; color: var(--ecf-text); } .ecf-modal__when { color: var(--ecf-text-muted); margin-bottom: 16px; } .ecf-modal__date { margin: 0 0 4px; font-size: 16px; color: var(--ecf-text); font-weight: 600; } .ecf-modal__time { margin: 0 0 20px; color: var(--ecf-text-muted); font-size: 14px; } .ecf-modal__description { margin-bottom: 24px; line-height: 1.6; } .ecf-modal__actions { display: flex; flex-wrap: wrap; gap: 12px; } .ecf-modal__action { display: inline-block; padding: 10px 18px; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; } .ecf-modal__action--primary { background: var(--ecf-lime); color: #fff; } .ecf-modal__action--secondary { background: var(--ecf-green-dark); color: #fff; } .ecf-modal__action--outline { background: #fff; color: var(--ecf-green-dark); border: 1px solid var(--ecf-green-dark); } /* Single event template (the /calendar/event-slug/ page) */ .ecf-single-event { max-width: 800px; margin: 32px auto; padding: 0 16px; color: #111; } .ecf-event-detail__hero img { width: 100%; border-radius: 8px; display: block; } .ecf-event-detail__hero--placeholder { background: #2D4A2D; aspect-ratio: 16 / 9; border-radius: 8px; } .ecf-event-detail__type { color: #7DC033; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 16px 0 4px; } .ecf-event-detail__title { font-size: 32px; font-weight: 700; margin: 0 0 12px; } .ecf-event-detail__when { color: #6B7280; margin-bottom: 24px; } .ecf-event-detail__description { line-height: 1.6; margin-bottom: 24px; } .ecf-event-detail__actions { display: flex; flex-wrap: wrap; gap: 12px; } .ecf-event-detail__btn { display: inline-block; padding: 10px 18px; background: #7DC033; color: #fff; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; } .ecf-event-detail__btn--zoom, .ecf-event-detail__btn--discourse { background: #2D4A2D; } .ecf-event-detail__btn--typeform { background: #fff; color: #2D4A2D; border: 1px solid #2D4A2D; }