/* * register.css — Psara In Motion Pass: registration form, thanks page, * scanner page, and friendly fallback page. Loaded only via * _includes/layouts/register.njk; doesn't affect any event page. */ :root { --register-bg: #f4f6f8; --register-card: #ffffff; --register-text: #1c2833; --register-muted: #5a6c7e; --register-border: #e2e8f0; --register-primary: #356083; --register-primary-hover: #1f3e57; --register-success: #1d8348; --register-error: #c0392b; --register-radius: 12px; } /* scrollbar-gutter must live on the SCROLL CONTAINER — which is by default, NOT . Setting it on body had no effect. Reserving the scrollbar gutter at the document root means the centring math for .register-main, .register-footer, and the cards inside all see the same "available width" whether or not content overflows, so they align. */ html { scrollbar-gutter: stable; } /* Fallback for Safari < 18.2 + older browsers that don't yet understand scrollbar-gutter: force a scrollbar permanently so width is consistent. */ @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } } body.register-page { margin: 0; background: var(--register-bg); color: var(--register-text); font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; min-height: 100vh; display: flex; flex-direction: column; } .register-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background: #000820; } .register-back { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; } .register-back:hover { color: #ffffff; } .register-brand img { height: 36px; width: auto; display: block; } .register-main { flex: 1; display: flex; justify-content: center; padding: 32px 16px; } .register-card { background: var(--register-card); border-radius: var(--register-radius); box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06); width: 100%; /* Unified card column across register + pass pages so the footer aligns consistently regardless of which page the user is on. Was 540 on the plain register card, 640 on .pim-form-wrapper, 720 on .pass-view. */ max-width: 720px; padding: 32px; box-sizing: border-box; } .register-card h1 { margin: 0 0 8px; font-size: 24px; font-weight: 700; color: var(--register-primary); font-family: "Raleway", "Roboto", sans-serif; } .register-card .register-event { margin: 0 0 24px; font-size: 16px; color: var(--register-muted); line-height: 1.5; } .register-card .register-event strong { display: block; color: var(--register-text); } .register-event-dates { display: block; font-size: 14px; } .register-field { margin-bottom: 20px; } .register-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .register-field input[type="text"], .register-field input[type="email"], .register-field input[type="tel"] { width: 100%; padding: 10px 12px; border: 1px solid var(--register-border); border-radius: 8px; font-size: 16px; font-family: inherit; box-sizing: border-box; background: #fff; color: var(--register-text); } .register-field input:focus { outline: none; border-color: var(--register-primary); box-shadow: 0 0 0 3px rgba(13, 59, 102, 0.12); } .register-consent { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 24px; font-size: 14px; line-height: 1.45; } .register-consent input { margin-top: 3px; flex: 0 0 auto; } .register-consent a { color: var(--register-primary); } .register-turnstile { margin-bottom: 20px; } .register-turnstile .cf-turnstile, .register-turnstile .cf-turnstile > * { width: 100%; } .register-actions { display: flex; flex-direction: column; gap: 10px; } .register-submit { width: 100%; padding: 14px 16px; background: var(--register-primary); color: #fff; border: 0; border-radius: 8px; font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s ease; } .register-submit:hover:not(:disabled) { background: var(--register-primary-hover); } .register-submit:disabled { opacity: 0.6; cursor: not-allowed; } .register-reset { width: 100%; padding: 10px 16px; background: transparent; color: var(--register-muted); border: 1px solid var(--register-border); border-radius: 8px; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .register-reset:hover:not(:disabled) { color: var(--register-text); border-color: var(--register-muted); background: var(--register-bg); } .register-reset:disabled { opacity: 0.5; cursor: not-allowed; } .register-status { margin-top: 16px; padding: 12px 14px; border-radius: 8px; font-size: 14px; line-height: 1.45; display: none; } .register-status.is-shown { display: block; } .register-status.is-error { background: #fdecea; color: var(--register-error); border: 1px solid #f5c6c2; } .register-status.is-info { background: #eaf2fb; color: var(--register-primary); border: 1px solid #cfdcef; } /* Thanks page */ .register-thanks { text-align: center; } .register-thanks-icon { font-size: 56px; color: var(--register-success); display: block; margin-bottom: 8px; } .register-thanks h1 { margin-bottom: 16px; } .register-thanks p { font-size: 16px; color: var(--register-muted); line-height: 1.55; } .register-thanks p + p { margin-top: 8px; } /* Footer uses the same flex centering as .register-main so the copyright text and the content card both sit on the same horizontal centre line. The inner

is the flex item, sized to its content, centred by the parent. No max-width — the text itself constrains the visible column. */ .register-footer { display: flex; justify-content: center; align-items: center; padding: 16px; font-size: 12px; color: var(--register-muted); } .register-footer .register-copyright { margin: 0; text-align: center; } .register-copyright span { color: var(--register-primary); } /* Pass display page (/pass/verify) */ .pass-view { width: 100%; max-width: 720px; } .pass-view > .pass-loading, .pass-view > .register-card { margin-left: auto; margin-right: auto; } .pass-loading { text-align: center; padding: 48px 16px; color: var(--register-muted); } .pass-spinner { width: 36px; height: 36px; margin: 0 auto 16px; border-radius: 50%; border: 3px solid var(--register-border); border-top-color: var(--register-primary); animation: pass-spin 0.8s linear infinite; } @keyframes pass-spin { to { transform: rotate(360deg); } } .pass-error { text-align: center; } .pass-error-icon { font-size: 48px; color: var(--register-error); display: block; margin-bottom: 8px; } .pass-error-title { font-size: 22px; color: var(--register-error); margin: 0 0 12px; } .pass-error-message { font-size: 15px; color: var(--register-muted); margin: 0 0 16px; } .pass-header { margin-bottom: 24px; } .pass-header-card { background: var(--register-card); color: var(--register-text); border-radius: var(--register-radius); padding: 28px 24px; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06); text-align: center; } .pass-event-logo { display: flex; justify-content: center; margin: 0 0 16px; } .pass-event-logo a { display: block; } .pass-event-logo img { max-height: 96px; max-width: 200px; width: auto; height: auto; object-fit: contain; display: block; } /* Hide the wrapper until JS sets the logo's src + removes the `is-pending` * class. Deterministic; avoids browser quirks around img:not([src]) * re-evaluation after a programmatic .src assignment. */ .pass-event-logo.is-pending { display: none; } .pass-eyebrow { margin: 0 0 6px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--register-muted); } .pass-holder { margin: 0 0 8px; font-size: 26px; font-weight: 700; font-family: "Raleway", "Roboto", sans-serif; line-height: 1.2; color: var(--register-primary); } .pass-event-line { margin: 0 0 12px; font-size: 16px; color: var(--register-muted); line-height: 1.5; } .pass-event-line [data-pass-event-name] { display: block; font-weight: 600; color: var(--register-text); } /* Logo and event name link to the event page (href set by pass-display.js). * Keep the resting look unchanged; reveal the link on hover/focus. */ .pass-event-line a { color: inherit; text-decoration: none; } .pass-event-line a:hover [data-pass-event-name], .pass-event-line a:focus-visible [data-pass-event-name] { color: var(--register-primary); text-decoration: underline; } .pass-event-line [data-pass-event-dates] { display: block; font-size: 14px; } .pass-dot { display: none; } .pass-status-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--register-bg); color: var(--register-muted); } .pass-status-badge.is-active { background: var(--register-success); color: #fff; } .pass-status-badge.is-upcoming { background: rgba(53, 96, 131, 0.12); color: var(--register-primary); } .pass-status-badge.is-ended { background: var(--register-bg); color: var(--register-muted); } .pass-businesses { background: var(--register-card); border-radius: var(--register-radius); padding: 24px; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06); margin-bottom: 16px; } .pass-businesses-title { margin: 0 0 4px; font-size: 20px; font-family: "Raleway", "Roboto", sans-serif; color: var(--register-primary); } .pass-businesses-intro { margin: 0 0 20px; font-size: 14px; color: var(--register-muted); } .pass-category { margin-bottom: 20px; } .pass-category:last-child { margin-bottom: 0; } .pass-category-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--register-muted); margin: 0 0 12px; } .pass-business-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .pass-business { display: grid; grid-template-columns: 110px 1fr; /* Row 1 hugs the name (auto); row 2 absorbs any remaining height (1fr), so the name stays pinned to the top regardless of how tall the card grows. min-height keeps all cards visually uniform; cards with more perks grow beyond it naturally. */ grid-template-rows: auto 1fr; gap: 0 20px; padding: 18px 20px; background: var(--register-card); border: 2px solid var(--register-border); border-radius: 12px; transition: border-color 0.15s, box-shadow 0.15s; text-align: left; align-items: start; min-height: 180px; } .pass-business:hover { border-color: var(--register-primary); box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06); } .pass-business-logo { grid-column: 1; grid-row: 1 / span 2; align-self: center; justify-self: center; max-width: 120px; max-height: 120px; width: auto; height: auto; object-fit: contain; background: transparent; border: 0; border-radius: 0; margin: 0; } .pass-business-logo.logo-circular { width: 120px; height: 120px; max-width: 120px; max-height: 120px; border-radius: 50%; object-fit: cover; object-position: center; background: #fff; } /* Category-icon pill: shaped like the perk-tag default — soft brand-blue * tint, primary-blue icon, rounded so it reads as "discreet badge". */ .pass-business-name { grid-column: 2; grid-row: 1; margin: 0 0 8px; font-size: 18px; font-weight: 700; text-align: center; align-self: center; } .pass-business-perk { margin: 0; font-size: 14px; color: var(--register-muted); line-height: 1.4; } .pass-business-perks { grid-column: 2; grid-row: 2; width: 100%; display: flex; flex-direction: column; font-size: 14px; color: var(--register-text); line-height: 1.5; } .pass-business-perk { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; text-align: left; border-top: 1px solid var(--register-border); } .perk-description { color: var(--register-text); } .perk-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .perk-numeric { font-weight: 700; color: var(--register-primary); font-size: 16px; } .perk-tag { display: inline-block; padding: 2px 10px; /* background: rgba(53, 96, 131, 0.10); color: var(--register-primary); */ border-radius: 999px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } /* Tag-type presets — applied as `.perk-tag.is-{tagType}` by pass-display.js * when perk.tagType matches. Add a new preset by dropping a new rule below; * no JS or worker change needed. */ .perk-tag.is-discount { background: #fdecea; color: #c0392b; } .perk-tag.is-offer { background: #e74c3c; color: #fff; } .perk-tag.is-combo { background: #fef3d9; color: #b9770e; } .perk-tag.is-freebie { background: #e3f4ea; color: #1e8449; } .perk-tag.is-vip { background: #efe2f4; color: #6c3483; } .pass-business-perk:first-child { border-top: 0; padding-top: 4px; } /* Contact icon row — same circular-icon treatment as the SF partner modal * (.sf-partner-modal-social in sf-partners.css), keyed to the register * palette. Rendered from each business's `links` data by pass-display.js; * replaces the old plain name/logo URL links. Spans both grid columns so * the row hugs the bottom of the card, centered. */ .pass-business-social { grid-column: 1 / -1; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .pass-business-social a { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(53, 96, 131, 0.10); color: var(--register-primary); font-size: 16px; transition: background 0.15s, color 0.15s, transform 0.15s; } .pass-business-social a:hover, .pass-business-social a:focus-visible { background: var(--register-primary); color: #fff; transform: translateY(-2px); outline: none; } .pass-business-social a i { line-height: 0; } .pass-empty { text-align: center; color: var(--register-muted); font-size: 14px; } .pass-footer-note { text-align: center; font-size: 13px; color: var(--register-muted); } .pass-footer-note a { color: var(--register-primary); } @media (max-width: 479px) { .pass-business { grid-template-columns: 72px 1fr; gap: 0 14px; padding: 14px 16px; } .pass-business-logo { max-width: 72px; max-height: 64px; } /* Circular logos hard-set 120px; without this same-specificity override they'd overflow the 72px column on small screens. Shrink the circle to fit. */ .pass-business-logo.logo-circular { width: 64px; height: 64px; max-width: 64px; max-height: 64px; } .pass-business-name { font-size: 16px; } } /* ============================================================ * Shared multi-card registration layout (Psara In Motion). * Reusable across events via .pim-* classes; pair with the base * .register-* primitives. Used by sports-festival/register/ and * lazareta-open/register/. Event-specific pieces use .sf-* / .lo-*. * ========================================================== */ .pim-form-wrapper { width: 100%; /* Matches .register-card and .pass-view (720px). Single canonical column width across the register + pass system. */ max-width: 720px; display: flex; flex-direction: column; gap: 24px; } .pim-form-wrapper .register-card { padding: 24px; } .pim-form-wrapper > form { display: flex; flex-direction: column; gap: 24px; } .pim-intro-card { text-align: center; } .pim-event-logo { display: flex; justify-content: center; margin: 0 0 16px; } .pim-event-logo img { max-height: 96px; max-width: 200px; width: auto; height: auto; object-fit: contain; } .pim-section-title { margin: 0 0 16px; font-size: 18px; color: var(--register-primary); font-family: "Raleway", "Roboto", sans-serif; } .pim-field-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } .pim-field-grid .register-field { margin-bottom: 0; } @media (min-width: 480px) { .pim-field-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .pim-field-grid .pim-field-full { grid-column: 1 / -1; } } .pim-radio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pim-radio-grid.pim-radio-grid-inline { grid-template-columns: 1fr; } .pim-radio-grid.pim-radio-grid-compact { grid-template-columns: repeat(4, 1fr); } /* Two equal columns at every width (binary choices, e.g. gender). The extra class outranks the ≥480px repeat(3, 1fr) rule below, so it stays 2-up. */ .pim-radio-grid.pim-radio-grid-2 { grid-template-columns: 1fr 1fr; } @media (min-width: 480px) { .pim-radio-grid { grid-template-columns: repeat(3, 1fr); } } .pim-radio-grid.pim-radio-grid-compact .pim-radio-card { justify-content: center; padding: 10px 6px; } .pim-radio-card { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--register-border); border-radius: 8px; background: var(--register-bg); cursor: pointer; font-size: 14px; font-weight: 500; transition: border-color 0.15s, background 0.15s; } .pim-radio-card input { margin: 0; flex: 0 0 auto; accent-color: var(--register-primary); } .pim-radio-card:hover { border-color: var(--register-primary); } .pim-radio-card:has(input:checked) { border-color: var(--register-primary); background: rgba(13, 59, 102, 0.06); } .pim-radio-card-sm { padding: 10px; font-size: 13px; } .pim-declarations .register-consent { font-size: 13px; } .pim-declarations .register-consent + .register-consent { margin-top: 12px; } .pim-consent-long span { font-size: 12px; line-height: 1.5; color: var(--register-muted); } .pim-consent-long span strong { display: block; color: var(--register-text); font-size: 13px; margin-bottom: 2px; } /* Info callout — e.g. registration priority / partner notes. Self-contained box so it can sit as a direct form child or inside a section card. */ .pim-note { margin: 0; padding: 12px 14px; border: 1px solid var(--register-border); border-left: 3px solid var(--register-primary); border-radius: 8px; background: rgba(13, 59, 102, 0.04); font-size: 13px; line-height: 1.5; color: var(--register-muted); } .pim-note strong { color: var(--register-text); } .pim-note + .pim-note { margin-top: 12px; } .pim-submit-card { display: flex; flex-direction: column; gap: 12px; } .pim-submit-card .register-turnstile, .pim-submit-card .register-submit, .pim-submit-card .register-status { margin: 0; } /* ============================================================ * Sports Festival-specific registration pieces (activities list, * activity follow-ups, age-group hints). Used only by * sports-festival/register/index.njk. * ========================================================== */ .sf-activity[hidden] { display: none; } .sf-activities { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .sf-activity { border: 1px solid var(--register-border); border-radius: 8px; background: var(--register-bg); overflow: hidden; } .sf-activity:has(input:checked) { border-color: var(--register-primary); background: rgba(13, 59, 102, 0.05); } .sf-activity-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px; cursor: pointer; } .sf-activity-row input { margin-top: 2px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--register-primary); cursor: pointer; } .sf-activity-info { display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .sf-activity-info strong { font-weight: 600; color: var(--register-text); } .sf-activity-info small { color: var(--register-muted); font-size: 12px; line-height: 1.4; } .sf-activity-follow { padding: 0 14px 14px 44px; border-top: 1px dashed var(--register-border); margin-top: 0; padding-top: 12px; background: var(--register-card); } .sf-activity-follow .register-field { margin-bottom: 0; } .sf-activity-follow .register-field input { font-size: 14px; padding: 8px 10px; } .sf-follow-label { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--register-text); } .sf-declarations-hint, .sf-activities-hint { margin: 0; font-size: 13px; color: var(--register-muted); font-style: italic; } /* Language toggle (GR | EN) — pushed right, before the brand logo. Base .language-toggle styles come from main.css (loaded via head.njk). */ .register-header .language-toggle { margin-left: auto; margin-right: 16px; }