/** * UV Event Registration — front-end styles. * Full-page banner-image background (fills the whole body) with clean WHITE form * cards on top. Single-column top-to-bottom layout, purple accents. */ /* Match the page behind the form to the background (added to by public.js). */ body.uver-dark-page { background: #1a1030 !important; } .uver-wrap { --uver-purple: #6d28d9; --uver-purple-dark: #5b21b6; --uver-purple-light: #ede9fe; --uver-ink: #1f2937; --uver-muted: #6b7280; --uver-border: #e5e7eb; --uver-radius: 16px; --uver-radius-sm: 10px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--uver-ink); line-height: 1.6; box-sizing: border-box; position: relative; min-height: 100vh; background-color: #1a1030; /* fallback / letterbox colour */ /* The banner image is ALSO set inline on this element (see template) as a fallback background for devices where the fixed .uver-bg-layer misbehaves (some mobile browsers). Where the fixed layer renders, it simply paints on top of this, so desktop is unaffected. */ background-size: cover; background-position: center top; background-repeat: no-repeat; background-attachment: fixed; } @supports (-webkit-touch-callout: none) { /* iOS ignores background-attachment: fixed — use scroll there. */ .uver-wrap { background-attachment: scroll; } } .uver-wrap *, .uver-wrap *::before, .uver-wrap *::after { box-sizing: border-box; } /* Full-page fixed background image — a dedicated fixed layer (reliable, unlike background-attachment:fixed). Fills 100% of the screen and stays put on scroll. */ .uver-bg-layer { position: fixed; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; pointer-events: none; } /* Very light scrim above the image so white cards keep enough contrast. */ .uver-wrap--has-bg::before { content: ""; position: fixed; inset: 0; background: rgba(10, 6, 25, 0.18); z-index: 1; pointer-events: none; } /* All real content sits above the background image + scrim. */ .uver-banner, .uver-container { position: relative; z-index: 2; } /* ---------- Side images: logo (left middle) and photo (right middle) ---------- */ .uver-side-img { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: none; text-align: center; } .uver-side-img--logo { left: 40px; } .uver-side-img--photo { right: 40px; } .uver-side-img img { display: block; max-width: 220px; max-height: 340px; width: auto; height: auto; border-radius: 14px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4); } .uver-side-img--logo img { box-shadow: none; /* logos are usually transparent PNGs */ border-radius: 0; } /* Hide the side images when the screen is too narrow for them + the 720px form. */ @media (max-width: 1280px) { .uver-side-img { display: none; } } .uver-container { max-width: 720px; margin: 0 auto; padding: 0 16px 56px; } /* ---------- Banner (hero title area over the background image) ---------- */ .uver-banner { position: relative; min-height: 300px; background-size: cover; background-position: center; display: flex; align-items: flex-end; } .uver-banner--placeholder { background: linear-gradient(135deg, #6d28d9, #9333ea); } /* Transparent hero (desktop): the page's fixed full-page image shows through; the inline image + the mobile are suppressed. On mobile (see the media block at the end of this file) the banner becomes a stacked layout instead: image block first, heading below it. */ .uver-banner--transparent { background-color: transparent; min-height: 260px; } .uver-banner__img { display: none; /* desktop: hidden; mobile turns it on */ } @media (min-width: 783px) { .uver-banner--transparent { background-image: none !important; /* seamless: full-page fixed layer shows */ } } .uver-banner__overlay { width: 100%; padding: 70px; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); text-align: center; color: #fff; border-radius: 30px; } .uver-banner__title { margin: 0; font-size: clamp(1.7rem, 4.5vw, 2.8rem); font-weight: 800; letter-spacing: 0.5px; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); } .uver-banner__date { margin: 10px 0 0; font-size: 1.1rem; font-weight: 600; opacity: 0.95; } /* ---------- White cards (80% opacity so the background shows through) ---------- */ .uver-card { background: rgba(255, 255, 255, 0.8); border: 1px solid var(--uver-border); border-radius: var(--uver-radius); padding: 26px; margin-top: 22px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .uver-about { margin-top: -44px; position: relative; z-index: 2; } .uver-about__desc p { margin: 0 0 12px; } .uver-about__meta { margin-top: 16px; border-top: 1px solid var(--uver-border); padding-top: 16px; display: grid; gap: 14px; } .uver-meta-block { display: flex; flex-direction: column; } .uver-meta-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--uver-muted); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; } .uver-meta-value { font-weight: 600; margin-top: 3px; } .uver-icon { width: 16px; height: 16px; fill: var(--uver-purple); flex: 0 0 auto; } .uver-contact { margin-top: 18px; background: var(--uver-purple-light); border-radius: var(--uver-radius-sm); padding: 18px; text-align: center; } .uver-contact__title { margin: 0 0 8px; font-size: 1rem; color: var(--uver-purple-dark); } .uver-contact__phone { display: inline-flex; align-items: center; gap: 8px; font-size: 1.25rem; font-weight: 800; color: var(--uver-purple-dark); text-decoration: none; } .uver-contact__name { margin: 6px 0 0; font-weight: 700; } .uver-contact__role { margin: 2px 0 0; color: var(--uver-muted); font-size: 0.9rem; } /* ---------- Form ---------- */ .uver-section-title { margin: 0 0 8px; font-size: 1.5rem; font-weight: 800; color: var(--uver-purple-dark); } .uver-subheading { margin: 26px 0 12px; font-size: 1.05rem; font-weight: 700; } .uver-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .uver-field { display: flex; flex-direction: column; } /* `display:flex` above would otherwise beat the UA [hidden] rule and leave hidden fields (e.g. the package-driven T-shirt block) visible. */ .uver-field[hidden] { display: none !important; } .uver-field label { font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: #374151; } .uver-req { color: #dc2626; } .uver-optional { color: var(--uver-muted); font-weight: 400; font-size: 0.8rem; } .uver-input { width: 100%; padding: 12px 14px; border: 1px solid var(--uver-border); border-radius: var(--uver-radius-sm); font-size: 0.95rem; background: #fff; transition: border-color 0.15s, box-shadow 0.15s; color: var(--uver-ink); } .uver-input:focus { outline: none; border-color: var(--uver-purple); box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.15); } .uver-input.uver-invalid, .uver-input-group.uver-invalid { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); } .uver-gender.uver-invalid .uver-gender__btn { border-color: #dc2626; } .uver-gender.uver-invalid { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); border-radius: var(--uver-radius-sm); } .uver-input-group { display: flex; align-items: stretch; border: 1px solid var(--uver-border); border-radius: var(--uver-radius-sm); overflow: hidden; background: #fff; } .uver-input-group:focus-within { border-color: var(--uver-purple); box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.15); } .uver-input-group .uver-input { border: 0; box-shadow: none; } .uver-input-prefix, .uver-input-icon { display: flex; align-items: center; padding: 0 12px; background: #f3f4f6; color: var(--uver-muted); font-weight: 600; font-size: 0.9rem; } .uver-input-icon { background: #fff; padding-right: 0; } /* ---------- Gender buttons ---------- */ .uver-gender { display: flex; gap: 8px; } .uver-gender__btn { flex: 1; padding: 11px 8px; border: 1px solid var(--uver-border); border-radius: var(--uver-radius-sm); background: #fff; cursor: pointer; font-weight: 600; font-size: 0.9rem; color: #374151; transition: all 0.15s; } .uver-gender__btn:hover { border-color: var(--uver-purple); } .uver-gender__btn.is-active { background: var(--uver-purple); border-color: var(--uver-purple); color: #fff; } /* ---------- T-shirt block (sits after the package cards) ---------- */ .uver-tshirt-block[hidden] { display: none !important; } .uver-tshirt-block { display: block; } /* ---------- T-shirt size buttons ---------- */ .uver-field--full { grid-column: 1 / -1; } .uver-sizes { display: flex; flex-wrap: wrap; gap: 8px; } .uver-size__btn { min-width: 62px; padding: 11px 14px; border: 1px solid var(--uver-border); border-radius: var(--uver-radius-sm); background: #fff; cursor: pointer; font-weight: 700; font-size: 0.9rem; color: #374151; transition: all 0.15s; } .uver-size__btn:hover { border-color: var(--uver-purple); } .uver-size__btn.is-active { background: var(--uver-purple); border-color: var(--uver-purple); color: #fff; } .uver-sizes.uver-invalid { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); border-radius: var(--uver-radius-sm); } .uver-sizes.uver-invalid .uver-size__btn { border-color: #dc2626; } /* Helper note under the T-shirt picker. */ .uver-note { margin: 10px 0 0; padding: 9px 12px; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: var(--uver-radius-sm); color: #5b21b6; font-size: 0.87rem; } /* "Incl. T-shirt & Kit" badge on package cards. */ .uver-package__badge { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: var(--uver-purple); color: #fff; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } /* ---------- Packages ---------- */ .uver-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .uver-package { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 12px; border: 2px solid var(--uver-border); border-radius: var(--uver-radius); cursor: pointer; text-align: center; transition: all 0.15s; background: #fff; } .uver-package input { position: absolute; opacity: 0; pointer-events: none; } .uver-package:hover { border-color: var(--uver-purple); } .uver-package.is-selected { border-color: var(--uver-purple); background: var(--uver-purple-light); box-shadow: 0 4px 16px rgba(109, 40, 217, 0.2); } .uver-package__name { font-weight: 700; font-size: 1rem; } .uver-package__price { font-weight: 800; font-size: 1.2rem; color: var(--uver-purple-dark); } .uver-package__desc { font-size: 0.8rem; color: var(--uver-muted); } /* ---------- Donation ---------- */ .uver-donation__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .uver-chip { padding: 9px 16px; border: 1px solid var(--uver-border); border-radius: 999px; background: #fff; cursor: pointer; font-weight: 600; font-size: 0.9rem; transition: all 0.15s; } .uver-chip:hover { border-color: var(--uver-purple); } .uver-chip.is-active { background: var(--uver-purple); border-color: var(--uver-purple); color: #fff; } /* ---------- Summary ---------- */ .uver-summary { background: #faf9ff; border: 1px solid var(--uver-border); border-radius: var(--uver-radius); padding: 18px 20px; } .uver-summary__row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.95rem; } .uver-summary__row[hidden] { display: none !important; } .uver-summary__row--total { border-top: 2px dashed var(--uver-border); margin-top: 6px; padding-top: 14px; font-size: 1.2rem; font-weight: 800; color: var(--uver-purple-dark); } /* ---------- Terms ---------- */ .uver-terms { margin: 0 0 14px; padding-left: 20px; color: #374151; font-size: 0.9rem; } .uver-terms li { margin-bottom: 6px; } .uver-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; font-weight: 600; cursor: pointer; } .uver-checkbox a { color: var(--uver-purple-dark); text-decoration: underline; } .uver-checkbox input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--uver-purple); } /* ---------- Register button ---------- */ .uver-btn-register { width: 100%; margin-top: 26px; padding: 18px; border: 0; border-radius: var(--uver-radius); background: linear-gradient(135deg, var(--uver-purple), #7c3aed); color: #fff; font-size: 1.15rem; font-weight: 800; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s; box-shadow: 0 10px 28px rgba(109, 40, 217, 0.4); } .uver-btn-register:hover { transform: translateY(-1px); } .uver-btn-register:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .uver-btn-amount { font-size: 0.9rem; font-weight: 600; opacity: 0.95; } /* ---------- Messages / notices ---------- */ .uver-messages { margin-top: 16px; } .uver-messages:empty { display: none; } .uver-messages .uver-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; padding: 12px 14px; border-radius: var(--uver-radius-sm); font-size: 0.9rem; } .uver-messages .uver-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; padding: 14px 16px; border-radius: var(--uver-radius-sm); font-size: 0.95rem; } .uver-notice { background: #fff; border: 1px solid var(--uver-border); border-radius: var(--uver-radius-sm); padding: 16px; text-align: center; color: var(--uver-muted); } .uver-notice--closed { background: #fff7ed; border-color: #fed7aa; color: #9a3412; font-weight: 600; margin-top: 24px; } /* ---------- Overlay ---------- */ .uver-overlay { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.75); display: none; /* hidden by default; shown only when JS adds .is-active */ flex-direction: column; align-items: center; justify-content: center; gap: 16px; z-index: 99999; color: #fff; font-weight: 600; } .uver-overlay.is-active { display: flex; } .uver-spinner { width: 48px; height: 48px; border: 4px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; border-radius: 50%; animation: uver-spin 0.8s linear infinite; } @keyframes uver-spin { to { transform: rotate(360deg); } } /* ---------- Responsive ---------- */ @media (max-width: 600px) { .uver-grid { grid-template-columns: 1fr; } .uver-packages { grid-template-columns: 1fr; } .uver-card { padding: 18px; } } /* ---------- Mobile layout (stacked banner + no page background image) ---------- */ @media (max-width: 782px) { /* 1. Remove the full-page background image on mobile — plain dark page instead. */ .uver-bg-layer { display: none; } .uver-wrap.uver-wrap--has-bg { background-image: none !important; } .uver-wrap--has-bg::before { display: none; /* scrim not needed without the image */ } /* 2. Banner becomes a stacked block: image first, heading separately below it. */ .uver-banner--transparent { display: block; min-height: 0; background-image: none !important; } .uver-banner--transparent .uver-banner__img { display: block; width: 100%; height: auto; } .uver-banner--transparent .uver-banner__overlay { background: none; padding: 20px 16px 6px; } /* 3. Content no longer overlaps the hero — heading/date stay fully visible. */ .uver-about { margin-top: 12px; } }