/* * Gutenmorgen Events * * Every rule is scoped to .gme-events (the shortcode wrapper) or .gme-lightbox * (appended to ), so nothing leaks into the theme and nothing relies on * global element selectors. Design tokens are declared on both roots rather * than :root for the same reason. */ .gme-events, .gme-lightbox { --gme-bg: #faf8f4; --gme-surface: #ffffff; --gme-surface-alt: #f5f1e8; --gme-placeholder: #efeae0; --gme-border: #e8e3d9; --gme-border-strong: #d4ccbb; --gme-text: #2b2620; --gme-text-soft: #6b6357; --gme-accent: #8b6f47; --gme-accent-hover: #6b5537; --gme-radius-md: 8px; --gme-radius-lg: 12px; --gme-overlay: rgba(20, 17, 13, 0.85); --gme-z-lightbox: 100000; } .gme-events *, .gme-events *::before, .gme-events *::after, .gme-lightbox *, .gme-lightbox *::before, .gme-lightbox *::after { box-sizing: border-box; } .gme-events { color: var(--gme-text); width: 100%; } /* * These need to out-specify the component rules below, which set an explicit * `display` on the same elements. */ .gme-events .gme-card[hidden], .gme-events .gme-empty[hidden], .gme-events [hidden], .gme-lightbox[hidden] { display: none; } /* Neutralise theme button styling before the component styles land. */ .gme-events button, .gme-lightbox button { -webkit-appearance: none; appearance: none; margin: 0; width: auto; min-height: 0; font-family: inherit; letter-spacing: normal; text-transform: none; text-decoration: none; text-shadow: none; box-shadow: none; } .gme-events p { margin: 0; } /* ---------------------------------------------------------------- Filter */ .gme-events .gme-filter { display: flex; gap: 8px; margin: 0 0 2.5rem; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; } .gme-events .gme-filter::-webkit-scrollbar { height: 5px; } .gme-events .gme-filter::-webkit-scrollbar-track { background: var(--gme-border); border-radius: 3px; } .gme-events .gme-filter::-webkit-scrollbar-thumb { background: var(--gme-border-strong); border-radius: 3px; } .gme-events .gme-filter__btn { flex-shrink: 0; padding: 9px 18px; border: 1px solid var(--gme-border); border-radius: 999px; background: var(--gme-surface); color: var(--gme-text); font-size: 14px; font-weight: 500; line-height: 1.4; cursor: pointer; white-space: nowrap; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; } .gme-events .gme-filter__btn:hover { border-color: var(--gme-border-strong); background: var(--gme-surface-alt); } .gme-events .gme-filter__btn.is-active { background: var(--gme-accent); border-color: var(--gme-accent); color: #fff; } .gme-events .gme-filter__count { opacity: 0.65; font-weight: 400; margin-left: 3px; } /* ------------------------------------------------------------------ Grid */ .gme-events .gme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 24px; } .gme-events .gme-card { display: flex; flex-direction: column; background: var(--gme-surface); border: 1px solid var(--gme-border); border-radius: var(--gme-radius-lg); overflow: hidden; transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease; } .gme-events .gme-card:hover { box-shadow: 0 8px 24px rgba(43, 38, 32, 0.08); transform: translateY(-3px); border-color: var(--gme-border-strong); } .gme-events .gme-card__media { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--gme-placeholder); overflow: hidden; } .gme-events .gme-card__media.is-zoomable { cursor: zoom-in; } .gme-events .gme-card__media img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; margin: 0; border-radius: 0; transition: transform 400ms ease; } .gme-events .gme-card:hover .gme-card__media img { transform: scale(1.05); } .gme-events .gme-card__zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(43, 38, 32, 0); transition: background 200ms ease; } .gme-events .gme-card__zoom::after { content: ""; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232B2620' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") center / 20px no-repeat; opacity: 0; transform: scale(0.8); transition: opacity 200ms ease, transform 200ms ease; } .gme-events .gme-card:hover .gme-card__media.is-zoomable .gme-card__zoom { background: rgba(43, 38, 32, 0.25); } .gme-events .gme-card:hover .gme-card__media.is-zoomable .gme-card__zoom::after { opacity: 1; transform: scale(1); } .gme-events .gme-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px; } .gme-events .gme-card__date { font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--gme-text-soft); text-transform: uppercase; letter-spacing: 0.04em; } .gme-events .gme-card__date time { color: inherit; } .gme-events .gme-card__title { flex: 1; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--gme-text); } .gme-events .gme-card__cta { margin-top: 4px; padding: 11px 16px; border: none; border-radius: var(--gme-radius-md); background: var(--gme-accent); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; cursor: pointer; transition: background 150ms ease, transform 150ms ease; } .gme-events .gme-card__cta:hover { background: var(--gme-accent-hover); color: #fff; } .gme-events .gme-card__cta:active { transform: scale(0.98); } .gme-events .gme-empty { padding: 4rem 1rem; text-align: center; font-size: 15px; color: var(--gme-text-soft); } /* -------------------------------------------------------------- Lightbox */ .gme-lightbox { position: fixed; inset: 0; z-index: var(--gme-z-lightbox); display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--gme-overlay); animation: gme-fade-in 180ms ease-out; } @keyframes gme-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes gme-slide-up { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .gme-lightbox .gme-lightbox__content { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: 90vh; overflow: hidden; background: var(--gme-surface); border-radius: var(--gme-radius-lg); animation: gme-slide-up 240ms ease-out; } .gme-lightbox .gme-lightbox__image { display: flex; align-items: center; justify-content: center; width: 100%; max-height: 60vh; overflow: hidden; background: var(--gme-placeholder); } .gme-lightbox .gme-lightbox__image img { display: block; width: 100%; height: auto; max-width: 100%; max-height: 60vh; margin: 0; object-fit: contain; } .gme-lightbox .gme-lightbox__close { position: absolute; top: 14px; right: 14px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: rgba(20, 17, 13, 0.55); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; transition: background 150ms ease; } .gme-lightbox .gme-lightbox__close:hover { background: rgba(20, 17, 13, 0.8); color: #fff; } .gme-lightbox .gme-lightbox__info { padding: 22px 26px 26px; overflow-y: auto; } .gme-lightbox .gme-lightbox__date { margin-bottom: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--gme-text-soft); text-transform: uppercase; letter-spacing: 0.04em; } .gme-lightbox .gme-lightbox__title { margin: 0 0 18px; padding: 0; font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--gme-text); } .gme-lightbox .gme-lightbox__cta { width: 100%; padding: 13px 24px; border: none; border-radius: var(--gme-radius-md); background: var(--gme-accent); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.4; cursor: pointer; transition: background 150ms ease; } .gme-lightbox .gme-lightbox__cta:hover { background: var(--gme-accent-hover); color: #fff; } /* Locks background scrolling while the lightbox is open. */ .gme-lightbox-open { overflow: hidden; } /* ----------------------------------------------------------------- Focus */ .gme-events .gme-filter__btn:focus-visible, .gme-events .gme-card__cta:focus-visible, .gme-events .gme-card__media:focus-visible, .gme-lightbox .gme-lightbox__cta:focus-visible, .gme-lightbox .gme-lightbox__close:focus-visible { outline: 2px solid var(--gme-accent); outline-offset: 2px; } .gme-lightbox .gme-lightbox__close:focus-visible { outline-color: #fff; } /* ------------------------------------------------------------ Responsive */ @media (max-width: 768px) { .gme-events .gme-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .gme-events .gme-card__body { padding: 13px; gap: 8px; } .gme-events .gme-card__title { font-size: 15px; } .gme-events .gme-card__cta { padding: 10px 14px; font-size: 13.5px; } .gme-lightbox .gme-lightbox__content { max-width: 94vw; } .gme-lightbox .gme-lightbox__info { padding: 18px; } .gme-lightbox .gme-lightbox__title { font-size: 19px; } } @media (max-width: 480px) { .gme-events .gme-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .gme-events .gme-filter { gap: 6px; } .gme-events .gme-filter__btn { padding: 7px 13px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .gme-events .gme-card, .gme-events .gme-card__media img, .gme-events .gme-card__cta, .gme-events .gme-card__zoom, .gme-events .gme-card__zoom::after, .gme-lightbox .gme-lightbox__content, .gme-lightbox { transition-duration: 1ms; animation-duration: 1ms; } .gme-events .gme-card:hover { transform: none; } .gme-events .gme-card:hover .gme-card__media img { transform: none; } }