/* ========================================================================== El Registro - Sunday intake form Depends on styles/main.css for tokens, buttons, header and footer. ========================================================================== */ :root { --path-miembro: #A6E1FA; --path-visitante: #E6C47A; --path-nuevo-miembro: #8FE3C4; --path-convertido: #F0A98C; } /* Each path carries its colour from the moment the page loads, so the four options read as four different things before anyone taps one. Choosing deepens the same colour rather than introducing a new one. */ .registro-path[data-path="miembro"] { --accent: var(--path-miembro); --accent-rest: rgba(166, 225, 250, 0.07); --accent-edge: rgba(166, 225, 250, 0.30); --accent-on: rgba(166, 225, 250, 0.16); } .registro-path[data-path="visitante"] { --accent: var(--path-visitante); --accent-rest: rgba(230, 196, 122, 0.07); --accent-edge: rgba(230, 196, 122, 0.30); --accent-on: rgba(230, 196, 122, 0.16); } .registro-path[data-path="nuevo_miembro"] { --accent: var(--path-nuevo-miembro); --accent-rest: rgba(143, 227, 196, 0.07); --accent-edge: rgba(143, 227, 196, 0.30); --accent-on: rgba(143, 227, 196, 0.16); } .registro-path[data-path="nuevo_convertido"] { --accent: var(--path-convertido); --accent-rest: rgba(240, 169, 140, 0.07); --accent-edge: rgba(240, 169, 140, 0.30); --accent-on: rgba(240, 169, 140, 0.16); } .registro-page { background: radial-gradient(circle at 12% 8%, rgba(166, 225, 250, 0.10) 0%, transparent 40%), radial-gradient(circle at 88% 0%, rgba(230, 196, 122, 0.12) 0%, transparent 38%), var(--bg-darkest); min-height: 100vh; } .registro-header.scrolled { background: rgba(0, 5, 16, 0.9); } /* -------------------------------------------------------------------------- Bilingual visibility - driven by , so no flash on load -------------------------------------------------------------------------- */ html[lang="es"] [data-lang="en"]:not(.lang-btn), html[lang="en"] [data-lang="es"]:not(.lang-btn) { display: none; } /* This page sets display on almost every block, which would otherwise beat the browser default for [hidden]. The branch panels depend on it. */ .registro-page [hidden] { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ .registro-shell { padding: calc(var(--header-height) + var(--space-3xl)) 0 var(--space-4xl); } .registro-container { display: grid; gap: var(--space-2xl); align-items: start; } @media (min-width: 1024px) { .registro-container { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-4xl); max-width: 1200px; } .registro-intro { position: sticky; top: calc(var(--header-height) + var(--space-xl)); } } /* -------------------------------------------------------------------------- Intro column -------------------------------------------------------------------------- */ .registro-intro h1 { font-family: var(--font-heading); font-size: var(--text-4xl); line-height: 1.15; margin: var(--space-lg) 0 var(--space-md); } .registro-intro > p { color: var(--text-secondary); font-size: var(--text-lg); line-height: 1.8; } /* -------------------------------------------------------------------------- Form shell -------------------------------------------------------------------------- */ /* One solid surface for all the questions: the site's own body colour, so the card reads as a calm panel against the page glow — no glass, no gradient. */ .registro-form, .registro-form:hover, .registro-gracias, .registro-gracias:hover { background: var(--bg-darkest); backdrop-filter: none; border-color: rgba(255, 255, 255, 0.10); } .registro-form { padding: var(--space-xl); display: grid; gap: var(--space-xl); border-top: 3px solid transparent; transition: border-color var(--duration-base) var(--ease-out-expo); } /* .glass-card lifts on hover, which a long form should not do. */ .registro-form:hover { transform: none; box-shadow: none; } .registro-form:hover { border-top-color: transparent; } .registro-form[data-tipo="miembro"]:hover { border-top-color: var(--path-miembro); } .registro-form[data-tipo="visitante"]:hover { border-top-color: var(--path-visitante); } .registro-form[data-tipo="nuevo_miembro"]:hover { border-top-color: var(--path-nuevo-miembro); } .registro-form[data-tipo="nuevo_convertido"]:hover { border-top-color: var(--path-convertido); } @media (min-width: 768px) { .registro-form { padding: var(--space-2xl); } } /* The chosen path tints the whole card. */ .registro-form[data-tipo="miembro"] { border-top-color: var(--path-miembro); } .registro-form[data-tipo="visitante"] { border-top-color: var(--path-visitante); } .registro-form[data-tipo="nuevo_miembro"] { border-top-color: var(--path-nuevo-miembro); } .registro-form[data-tipo="nuevo_convertido"] { border-top-color: var(--path-convertido); } .registro-step { border: 0; display: grid; gap: var(--space-md); } .registro-step + .registro-step { border-top: 1px solid rgba(255, 255, 255, 0.10); padding-top: var(--space-xl); } .registro-step legend { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary); margin-bottom: var(--space-sm); padding: 0; } .registro-step-num { font-family: var(--font-display); display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--gold-glow); color: var(--gold-light); font-size: var(--text-xs); letter-spacing: 0.1em; } /* -------------------------------------------------------------------------- Fields -------------------------------------------------------------------------- */ .registro-field { display: grid; gap: 0.4rem; } .registro-field-row { display: grid; gap: var(--space-md); } @media (min-width: 640px) { .registro-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .registro-field label, .registro-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 600; } .registro-required { color: var(--gold); } .registro-optional { color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; text-transform: lowercase; } .registro-form input[type="text"], .registro-form input[type="tel"], .registro-form input[type="email"], .registro-form input[type="date"], .registro-form select, .registro-form textarea { width: 100%; font-family: var(--font-body); font-size: var(--text-base); color: var(--text-primary); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; padding: 0.85rem 1rem; outline: none; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); /* 16px keeps iOS Safari from zooming the page on focus. */ min-height: 3rem; } .registro-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6E1FA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem; padding-right: 2.75rem; } .registro-form select option { background: var(--bg-dark); color: var(--text-primary); } .registro-form input::placeholder, .registro-form textarea::placeholder { color: var(--text-muted); } .registro-form input:focus, .registro-form select:focus, .registro-form textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); } .registro-form textarea { min-height: 96px; resize: vertical; } .registro-form [aria-invalid="true"] { border-color: #F0A98C; } .registro-hint { color: var(--text-muted); font-size: var(--text-xs); line-height: 1.6; } .registro-error { color: #F0A98C; font-size: var(--text-xs); min-height: 0; } .registro-error:empty { display: none; } /* -------------------------------------------------------------------------- Path picker (the question that decides everything) -------------------------------------------------------------------------- */ .registro-paths { display: grid; gap: var(--space-sm); } @media (min-width: 640px) { .registro-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .registro-path { position: relative; display: block; padding: var(--space-lg); border: 1px solid var(--accent-edge); border-radius: 18px; background: var(--accent-rest); color: var(--accent); cursor: pointer; transition: all var(--duration-fast) var(--ease-out-quart); } .registro-path:hover { background: var(--accent-on); } .registro-path input { position: absolute; opacity: 0; width: 1px; height: 1px; } .registro-path-body { display: grid; gap: 0.35rem; /* Room for the radio marker in the top-right corner. */ padding-right: 2rem; } /* The deck sets these four labels in bold sans capitals, not the display serif — they are choices to scan, not headings to admire. */ .registro-path-title { font-weight: 700; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-primary); } .registro-path-desc { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; } .registro-path::after { content: ''; position: absolute; right: var(--space-lg); top: var(--space-lg); width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid var(--accent-edge); transition: all var(--duration-fast); } .registro-path.is-selected::after { border-color: currentColor; background: currentColor; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06); } /* Choosing deepens the card's own colour: same hue, more of it, plus a solid edge. The per-path variables above make the four cases one rule. */ .registro-path.is-selected { background: var(--accent-on); border-color: var(--accent); } .registro-path input:focus-visible + .registro-path-body { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 8px; } /* -------------------------------------------------------------------------- Chips, checkboxes, branch panels -------------------------------------------------------------------------- */ .registro-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .registro-chip { position: relative; display: inline-flex; align-items: center; padding: 0.6rem 1rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); font-size: var(--text-sm); cursor: pointer; transition: all var(--duration-fast); } .registro-chip:hover { border-color: var(--glass-border-hover); color: var(--text-primary); } .registro-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; } .registro-chip:has(input:checked) { border-color: var(--gold); background: var(--gold-glow); color: var(--text-primary); } .registro-chip:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; } .registro-check { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; cursor: pointer; } .registro-check input[type="checkbox"] { flex-shrink: 0; width: 1.35rem; height: 1.35rem; margin-top: 0.1rem; accent-color: var(--gold); cursor: pointer; } .registro-branch { animation: registro-fade var(--duration-base) var(--ease-out-quart); } .registro-branch-note { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.7; } @keyframes registro-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .registro-branch { animation: none; } } .registro-consent-note { color: var(--text-muted); font-size: var(--text-xs); line-height: 1.7; } .registro-consent-note a { color: var(--gold-light); } .registro-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* -------------------------------------------------------------------------- Submit + status -------------------------------------------------------------------------- */ .registro-actions { display: grid; gap: var(--space-sm); justify-items: start; } .registro-submit { width: 100%; padding: var(--space-lg) var(--space-xl); font-size: var(--text-base); } @media (min-width: 640px) { .registro-submit { width: auto; min-width: 16rem; } } .registro-submit[disabled] { opacity: 0.6; pointer-events: none; } .registro-status { min-height: 1.6em; font-size: var(--text-sm); color: var(--gold-light); line-height: 1.6; } .registro-status.is-error { color: #F0A98C; } /* -------------------------------------------------------------------------- Thank-you panel -------------------------------------------------------------------------- */ .registro-gracias { padding: var(--space-3xl) var(--space-xl); text-align: center; display: grid; justify-items: center; gap: var(--space-md); } .registro-gracias:hover { transform: none; box-shadow: none; } .registro-gracias-icon { width: 4rem; height: 4rem; color: var(--gold); } .registro-gracias h2 { font-family: var(--font-heading); font-size: var(--text-3xl); line-height: 1.2; } .registro-gracias p { color: var(--text-secondary); max-width: 34rem; line-height: 1.8; } .registro-gracias-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; margin-top: var(--space-md); } /* -------------------------------------------------------------------------- Usher / kiosk mode (?modo=ujier) - one iPad, many people -------------------------------------------------------------------------- */ .registro-page.is-kiosk .registro-intro, .registro-page.is-kiosk .registro-footer, .registro-page.is-kiosk .header-cta { display: none; } .registro-page.is-kiosk .registro-container { grid-template-columns: minmax(0, 1fr); max-width: 820px; } .registro-kiosk-flag { display: none; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px dashed var(--glass-border-hover); border-radius: 999px; color: var(--text-muted); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; } .registro-page.is-kiosk .registro-kiosk-flag { display: inline-flex; } .registro-footer .footer-bottom { justify-content: center; } .registro-footer .footer-bottom a { color: var(--text-secondary); transition: color var(--duration-fast); } .registro-footer .footer-bottom a:hover { color: var(--gold); } /* -------------------------------------------------------------------------- Phone-first pass Most people meet this form by scanning a QR code from their seat, on their own phone, with no help. Everything below exists for that person. -------------------------------------------------------------------------- */ /* The shared header is glass, which is right over the home page hero and wrong over a dense form: field labels scroll under it and stay half-legible, which reads as a rendering fault. Here it is an opaque bar at every scroll position. */ .registro-header, .registro-header.scrolled { background: var(--bg-darkest); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* How far through the form you are. Pinned under the header so it is answering "how much is left?" the whole way down - the question you cannot help asking on a phone, where only one step is ever on screen. */ .registro-progress { position: fixed; top: var(--header-height); left: 0; right: 0; height: 3px; z-index: 999; background: rgba(255, 255, 255, 0.07); opacity: 0; transition: opacity var(--duration-base); pointer-events: none; } .registro-progress.is-visible { opacity: 1; } .registro-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-light), var(--gold)); transform-origin: left center; transition: width 120ms linear; } @media (prefers-reduced-motion: reduce) { .registro-progress, .registro-progress-bar { transition: none; } } /* A wrapped step title used to drag the number badge down with it and strand the required asterisk at the far right. Both now sit against the first line. */ .registro-step legend { align-items: flex-start; } .registro-step legend .registro-step-num, .registro-step legend .registro-required { margin-top: 0.1rem; } /* Touch targets. A finger is not a mouse pointer: 44px is the smallest thing most people can hit first time, and first time is all we get on a Sunday. */ @media (pointer: coarse) { .registro-check { padding: 0.35rem 0; } .registro-check input[type="checkbox"], .registro-check input[type="radio"] { min-width: 26px; min-height: 26px; } } /* -------------------------------------------------------------------------- Phone sizing -------------------------------------------------------------------------- */ @media (max-width: 767px) { /* Give the fields the width of the screen. Two nested gutters - the page container and the card's own padding - were costing 56px a side and squeezing the inputs to 278px on a 390px phone. */ .registro-page .container { padding: 0 var(--space-sm); } /* The card wants the extra width; running text does not, so the intro keeps a margin of its own rather than starting at the bezel. */ .registro-intro, .registro-page .footer-bottom { padding-inline: var(--space-md); } .registro-form, .registro-gracias { padding: var(--space-lg) var(--space-md); } .registro-path { padding: var(--space-md); } /* The display headline is sized for a desktop column. At full size it ran to three lines and took the whole first screen on a phone, which pushed the first field out of sight for the person who just scanned the QR code. */ .registro-intro h1 { font-size: var(--text-3xl); line-height: 1.1; margin: var(--space-md) 0 var(--space-sm); } .registro-intro > p { font-size: var(--text-base); line-height: 1.6; } .registro-shell { padding-top: calc(var(--header-height) + var(--space-xl)); } }