/* SRD B2B Events List — Frontend Styles */ /* ── Wrapper ─────────────────────────────────────────────────────────────── */ .srdbs-events { max-width: 1100px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; color: #1a202c; line-height: 1.5; } /* Themes style h1–h6 and form controls with direct element rules, which beat font inheritance from .srdbs-events — re-assert the app font on them. */ .srdbs-events h1, .srdbs-events h2, .srdbs-events h3, .srdbs-events h4, .srdbs-events h5, .srdbs-events h6, .srdbs-events button, .srdbs-events input, .srdbs-events select, .srdbs-events textarea { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* ── Page title (replaces suppressed theme title) ─────────────────────────── */ .srdbs-events__page-title { font-size: 1.75rem; font-weight: 700; color: #1a202c; margin: 0 0 20px; } /* ── Login modal ──────────────────────────────────────────────────────────── */ /* The modal is teleported to (out of any theme stacking context), so the overlay carries its own base styles instead of inheriting from .srdbs-events. */ .srdbs-events__modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; z-index: 99999; padding: 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; color: #1a202c; line-height: 1.5; } .srdbs-events__modal-overlay h1, .srdbs-events__modal-overlay h2, .srdbs-events__modal-overlay h3, .srdbs-events__modal-overlay h4, .srdbs-events__modal-overlay h5, .srdbs-events__modal-overlay h6, .srdbs-events__modal-overlay button, .srdbs-events__modal-overlay input, .srdbs-events__modal-overlay select, .srdbs-events__modal-overlay textarea { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .srdbs-events__modal { background: #ffffff; border-radius: 12px; width: 100%; max-width: 420px; padding: 28px 32px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); position: relative; } .srdbs-events__modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .srdbs-events__modal-title { font-size: 1.125rem; font-weight: 700; margin: 0; color: #1a202c; } .srdbs-events__modal-close { background: none; border: none; font-size: 1.5rem; line-height: 1; color: #a0aec0; cursor: pointer; padding: 0 4px; transition: color 0.15s; } .srdbs-events__modal-close:hover { color: #1a202c; } /* ── Notice ───────────────────────────────────────────────────────────────── */ .srdbs-events__notice { padding: 10px 14px; border-radius: 6px; font-size: 0.875rem; margin-bottom: 16px; } .srdbs-events__notice--error { background: #fff5f5; border: 1px solid #fed7d7; color: #c53030; } .srdbs-events__notice--success { background: #f0fff4; border: 1px solid #9ae6b4; color: #276749; } /* ── Login form fields ────────────────────────────────────────────────────── */ .srdbs-events__login-form { display: flex; flex-direction: column; gap: 14px; } .srdbs-events__reg-section { font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: #718096; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; margin: 6px 0 0; } .srdbs-events__reg-section:first-child { margin-top: 0; } .srdbs-events__field { display: flex; flex-direction: column; gap: 5px; } .srdbs-events__label { font-size: 0.875rem; font-weight: 600; color: #2d3748; } .srdbs-events__modal-overlay .srdbs-events__input { padding: 9px 12px; border: 1px solid #cbd5e0; border-radius: 6px; font-size: 0.9375rem; color: #1a202c; background-color: #fff; width: 100%; height: auto; min-height: 0; line-height: 1.5; margin: 0; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; } .srdbs-events__modal-overlay .srdbs-events__input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .srdbs-events__login-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.875rem; } .srdbs-events__remember { display: flex; align-items: center; gap: 6px; color: #4a5568; cursor: pointer; } .srdbs-events__forgot { color: #2563eb; text-decoration: none; font-size: 0.8125rem; } .srdbs-events__forgot:hover { text-decoration: underline; } .srdbs-events__login-btn { padding: 10px 16px; background: #2563eb; color: #ffffff; border: none; border-radius: 6px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background 0.15s; } .srdbs-events__login-btn:hover:not(:disabled) { background: #1d4ed8; } .srdbs-events__login-btn:disabled { opacity: 0.65; cursor: not-allowed; } .srdbs-events__switch { margin-top: 18px; font-size: 0.875rem; color: #718096; text-align: center; } .srdbs-events__link { color: #2563eb; text-decoration: none; } .srdbs-events__link:hover { text-decoration: underline; } .srdbs-events__required { color: #e53e3e; } .srdbs-events__hint { font-size: 0.8125rem; color: #718096; } /* ── States ───────────────────────────────────────────────────────────────── */ .srdbs-events__loading, .srdbs-events__empty, .srdbs-events__error { text-align: center; padding: 48px 24px; color: #718096; font-size: 0.9375rem; } .srdbs-events__error { color: #c53030; } .srdbs-events__spinner { display: inline-block; width: 28px; height: 28px; border: 3px solid #e2e8f0; border-top-color: #2563eb; border-radius: 50%; animation: srdbs-spin 0.7s linear infinite; margin-bottom: 12px; } @keyframes srdbs-spin { to { transform: rotate(360deg); } } /* ── Grid ─────────────────────────────────────────────────────────────────── */ .srdbs-events__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; } /* ── Card ─────────────────────────────────────────────────────────────────── */ .srdbs-events__card { position: relative; /* anchor for the "Ended" badge */ display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s, transform 0.2s; } /* "Ended" badge — shown during the post-event grace period before the event drops off the listing (hide_ended_events_days setting) */ .srdbs-events__ended-badge { position: absolute; top: 12px; right: 12px; z-index: 1; background: rgba(15, 23, 42, 0.72); color: #ffffff; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; padding: 6px 12px; border-radius: 999px; } .srdbs-events__card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } /* ── Banner image (full-width background, replaces logo-wrap when set) ────── */ .srdbs-events__banner { width: 100%; height: 180px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #e2e8f0; /* fallback while image loads */ border-bottom: 1px solid #e2e8f0; flex-shrink: 0; } /* ── Logo banner ──────────────────────────────────────────────────────────── */ .srdbs-events__logo-wrap { background: #f7fafc; display: flex; align-items: center; justify-content: center; height: 130px; border-bottom: 1px solid #e2e8f0; overflow: hidden; } .srdbs-events__logo { max-height: 90px; max-width: 100%; object-fit: contain; } .srdbs-events__logo-placeholder { width: 56px; height: 56px; border-radius: 50%; background: #e2e8f0; display: flex; align-items: center; justify-content: center; color: #a0aec0; font-size: 1.5rem; font-weight: 700; } /* ── Card body ────────────────────────────────────────────────────────────── */ .srdbs-events__body { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 8px; } .srdbs-events__card-title { font-size: 1.0625rem; font-weight: 700; margin: 0; color: #1a202c; line-height: 1.35; } .srdbs-events__meta { display: flex; flex-direction: column; gap: 4px; } .srdbs-events__meta-item { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: #718096; } .srdbs-events__meta-icon { flex-shrink: 0; width: 14px; text-align: center; opacity: 0.7; } .srdbs-events__description { font-size: 0.875rem; color: #4a5568; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── Card footer ──────────────────────────────────────────────────────────── */ .srdbs-events__footer { padding: 14px 20px; border-top: 1px solid #e2e8f0; background: #f7fafc; } .srdbs-events__btn { display: block; width: 100%; padding: 10px 16px; background: #2563eb; color: #ffffff; border: none; border-radius: 6px; font-size: 0.9375rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: background 0.15s; box-sizing: border-box; } .srdbs-events__btn:hover { background: #1d4ed8; color: #ffffff; text-decoration: none; } /* "Sign In to Book" — same shape, muted colour */ .srdbs-events__btn--muted { background: #94a3b8; } .srdbs-events__btn--muted:hover { background: #64748b; } /* No booking_page configured */ .srdbs-events__btn--disabled { background: #cbd5e0; cursor: not-allowed; pointer-events: none; }