/** * 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 { font-family: "Maison Neue", system-ui, 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 — matches site-wide page heading styling */ .ecf-calendar__title { margin: 32px 0 16px; color: rgb(49 80 53 / var(--tw-text-opacity, 1)); font-size: 2.67rem; font-weight: 700; text-align: center; line-height: 1.2; } .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 */ .ecf-calendar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 1199px) { .ecf-calendar__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .ecf-calendar__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 479px) { .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; } /* Card */ .ecf-card { background: var(--ecf-cream); border: 1px solid var(--ecf-border); border-radius: 8px; overflow: hidden; cursor: pointer; transition: box-shadow 0.2s ease; display: flex; flex-direction: column; } .ecf-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .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: 16px; flex: 1; display: flex; flex-direction: column; } .ecf-card__type { color: var(--ecf-lime); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 8px; } .ecf-card__title { font-size: 18px; font-weight: 700; margin: 0 0 12px; color: var(--ecf-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ecf-card__time { color: var(--ecf-text-muted); font-size: 13px; margin: 0 0 16px; 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; padding: 12px 16px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; width: 100%; text-align: center; text-decoration: none; display: block; margin-top: auto; 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; } .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; } .ecf-modal__close { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, 0.9); border: 0; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 20px; line-height: 1; z-index: 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; font-family: "Maison Neue", system-ui, sans-serif; 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; }