/* card_form.css — one-question-per-card form layout (prefix: .rcf-) * * The "card form" pattern: a long form answered one question at a time, with a * progress bar, a clickable index of the answers so far, and a review step * before submitting. First used by the user registration form (register.php). * * TYPE is copied verbatim from onboarding_wizard.css (.ow-eyebrow/.ow-title/ * .ow-sub/.ow-btn) so sign-up and the post-verification wizard read as one * journey. SPACING is not: every gap here is a --ct-space-* token. The wizard * predates the token scale and carries 6/14/22px one-offs; copying those would * have spread them. * * The module OWNS the vertical rhythm inside .rcf-body (label spacing, field * spacing) instead of borrowing it from the host page. Values are identical to * .auth-card label / .auth-card .form-group in global.css, so on register.php * nothing shifts — but the pattern also survives on a host that has no * .auth-card, which is the whole point of it being a module. * * DELIBERATE, DO NOT "IMPROVE": * 1. Cards fade with OPACITY ONLY — never transform/filter. A transform (even * translate(0)) makes the card a containing block for fixed descendants and * a permanent stacking context; the host .auth-card already does that with * backdrop-filter, and stacking two of them breaks any overlay inside. * 2. .rcf-foot is a SIBLING of .rcf-card, never a child: the card is the thing * that fades between questions, and the actions must not fade with it. * 3. The mobile action bar is STICKY, not fixed: .auth-card's backdrop-filter * traps position:fixed children. * 4. .rcf-sheet (mobile index) is fixed, so it MUST be a direct child of , * outside the host card. Same reason as 3. */ /* design.html: este ecra e de um modulo so, fora do catalogo — a documentacao antiga esta no arquivo _internal/_ARCHIVE/DOCS/2026-09_design_html/design.html#cardform */ /* ═══════════════════════════════════════════════════════════ SHELL — index rail beside the question from 1024px up ═══════════════════════════════════════════════════════════ */ .rcf-shell { display: block; } @media (min-width: 1024px) { .rcf-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--ct-space-2xl); align-items: start; } } /* ═══════════════════════════════════════════════════════════ PROGRESS — thin bar + "4 of 11" + mobile index trigger ═══════════════════════════════════════════════════════════ */ .rcf-progress { display: flex; align-items: center; gap: var(--ct-space-md); margin-bottom: var(--ct-space-xl); } .rcf-progress-track { flex: 1 1 auto; height: 4px; border-radius: 2px; background: var(--ct-glass-bg-active); overflow: hidden; } .rcf-progress-fill { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--ct-cyan-dark), var(--ct-cyan)); transition: width var(--ct-transition-slow); } .rcf-progress-count { flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--ct-text-secondary); white-space: nowrap; } /* Mobile/tablet: opens the answers sheet. Hidden once the rail is visible. */ .rcf-answers-btn { display: inline-flex; align-items: center; gap: var(--ct-space-sm); min-height: 44px; padding: 0 var(--ct-space-lg); border: 1px solid var(--ct-border-medium); border-radius: var(--ct-radius-btn); background: var(--ct-glass-bg); color: var(--ct-text-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background var(--ct-transition-fast), border-color var(--ct-transition-fast); } .rcf-answers-btn:hover { background: var(--ct-glass-bg-hover); border-color: var(--ct-border-strong); } .rcf-answers-btn:active { background: var(--ct-glass-bg-active); } .rcf-answers-btn:focus-visible { outline: 2px solid var(--ct-cyan); outline-offset: 2px; } .rcf-answers-btn i { color: var(--ct-cyan); font-size: 12px; } @media (min-width: 1024px) { .rcf-answers-btn { display: none; } } /* ═══════════════════════════════════════════════════════════ INDEX — the list of questions + the answer given so far Same markup serves the desktop rail and the mobile sheet. ═══════════════════════════════════════════════════════════ */ .rcf-index { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ct-space-2xs); } .rcf-index-btn { display: flex; align-items: flex-start; gap: var(--ct-space-md); width: 100%; min-height: 44px; padding: var(--ct-space-sm) var(--ct-space-md); border: 1px solid transparent; border-radius: var(--ct-radius-md); background: transparent; color: var(--ct-text-primary); font-family: inherit; text-align: left; cursor: pointer; transition: background var(--ct-transition-fast), border-color var(--ct-transition-fast); } .rcf-index-btn:hover:not(:disabled) { background: var(--ct-glass-bg-hover); } .rcf-index-btn:active:not(:disabled) { background: var(--ct-glass-bg-active); } .rcf-index-btn:focus-visible { outline: 2px solid var(--ct-cyan); outline-offset: -2px; } /* DISABLED = a question further ahead than the person has reached. It is not "broken", it is "not yet" — so it dims but keeps its number and label. */ .rcf-index-btn:disabled { opacity: 0.5; cursor: default; } .rcf-index-dot { flex: 0 0 auto; width: 18px; height: 18px; margin-top: var(--ct-space-2xs); border-radius: var(--ct-radius-circle); border: 1px solid var(--ct-border-strong); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: transparent; transition: background var(--ct-transition-fast), border-color var(--ct-transition-fast), color var(--ct-transition-fast); } .rcf-index-text { min-width: 0; flex: 1 1 auto; } .rcf-index-label { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; } /* The answer itself. One line, ellipsis — the card is where you read it in full. */ .rcf-index-value { display: block; margin-top: var(--ct-space-2xs); font-size: 12px; line-height: 1.35; color: var(--ct-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* EMPTY — reached, answered with nothing (the optional questions) */ .rcf-index-value.is-empty { color: var(--ct-text-secondary); font-style: italic; } /* STATE: answered */ .rcf-index-item.is-done .rcf-index-dot { background: var(--ct-cyan); border-color: var(--ct-cyan); color: var(--ct-lt-on-fill, #011215); } /* STATE: where the person is now */ .rcf-index-item.is-current .rcf-index-btn { background: var(--ct-cyan-bg); border-color: var(--ct-cyan-border); } .rcf-index-item.is-current .rcf-index-dot { border-color: var(--ct-cyan); box-shadow: 0 0 0 3px rgba(var(--ct-accent-rgb), calc(0.15 * var(--ct-glow-k))); } /* STATE: error — the answer was rejected by the server after submitting */ .rcf-index-item.is-error .rcf-index-btn { background: var(--ct-danger-bg); border-color: var(--ct-danger-border); } .rcf-index-item.is-error .rcf-index-dot { background: var(--ct-danger); border-color: var(--ct-danger); color: #fff; } .rcf-index-item.is-error .rcf-index-value { color: var(--ct-danger-text); font-style: normal; } /* ── Desktop rail ─────────────────────────────────────────── */ .rcf-rail { display: none; } @media (min-width: 1024px) { .rcf-rail { display: block; position: sticky; top: var(--ct-space-sm); padding-right: var(--ct-space-md); border-right: 1px solid var(--ct-border-light); } } /* Same padding AND same transparent border as .rcf-index-btn, so the title's first letter lands on the exact vertical line as the dots below it. Margin alone leaves it 1px off — the border on the button counts. */ .rcf-rail-title { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ct-text-secondary); margin: 0 0 var(--ct-space-sm); padding: 0 var(--ct-space-md); border: 1px solid transparent; border-top: 0; border-bottom: 0; } /* ── Mobile sheet — MUST be a direct child of (see header note) ── */ .rcf-sheet-overlay { position: fixed; inset: 0; z-index: var(--ct-z-modal-backdrop); background: var(--ct-glass-overlay); opacity: 0; visibility: hidden; transition: opacity var(--ct-transition-fast), visibility var(--ct-transition-fast); } .rcf-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ct-z-modal); max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--ct-space-xl) var(--ct-space-xl) calc(var(--ct-space-xl) + env(safe-area-inset-bottom, 0px)); background: var(--ct-glass-modal); border: 1px solid var(--ct-glass-card-border); border-bottom: 0; border-radius: var(--ct-radius-xl) var(--ct-radius-xl) 0 0; box-shadow: var(--ct-shadow-xl); transform: translateY(101%); transition: transform var(--ct-transition-slow); } .rcf-sheet-overlay.is-open { opacity: 1; visibility: visible; } .rcf-sheet.is-open { transform: translateY(0); } .rcf-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ct-space-md); margin-bottom: var(--ct-space-lg); } .rcf-sheet-title { font-size: 15px; font-weight: 800; margin: 0; } .rcf-sheet-close { width: 44px; height: 44px; margin: calc(var(--ct-space-sm) * -1) calc(var(--ct-space-sm) * -1) calc(var(--ct-space-sm) * -1) 0; border: 0; background: transparent; color: var(--ct-text-secondary); font-size: 18px; cursor: pointer; border-radius: var(--ct-radius-md); } .rcf-sheet-close:hover { color: var(--ct-text-primary); background: var(--ct-glass-bg-hover); } .rcf-sheet-close:focus-visible { outline: 2px solid var(--ct-cyan); outline-offset: -2px; } @media (min-width: 1024px) { .rcf-sheet, .rcf-sheet-overlay { display: none; } } /* ═══════════════════════════════════════════════════════════ CARD — one question. Opacity only: never transform (see header). ═══════════════════════════════════════════════════════════ */ .rcf-card { opacity: 1; transition: opacity var(--ct-transition-fast); } .rcf-card[hidden] { display: none; } .rcf-card.is-fading { opacity: 0; } @media (prefers-reduced-motion: reduce) { .rcf-card, .rcf-progress-fill, .rcf-sheet { transition: none; } } /* Type copied verbatim from .ow-eyebrow / .ow-title / .ow-sub; gaps on tokens. */ .rcf-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ct-cyan); margin-bottom: var(--ct-space-sm); } .rcf-q { font-size: 21px; font-weight: 800; margin: 0 0 var(--ct-space-xs); line-height: 1.25; } .rcf-help { font-size: 13px; color: var(--ct-text-secondary); margin: 0 0 var(--ct-space-xl); line-height: 1.5; } /* ── Body rhythm — owned by the module (see header note) ──── Label to control lands on 13px, NOT 8px, and that is correct: global.css makes .form-group a flex column with gap:var(--elite-field-gap) = 5px, and the 8px below adds to it. 13px is the rhythm of every form in the product, so the card form matches its neighbours. Do not "fix" it to 8 here — that would make this one screen tighter than the rest of the platform. If the double mechanism is ever collapsed, it gets collapsed in global.css, once. */ .rcf-body .form-group { margin-bottom: var(--ct-space-xl); } .rcf-body label { display: block; margin-bottom: var(--ct-space-sm); font-size: 13px; font-weight: 600; color: var(--ct-lt-text-1, rgba(255, 255, 255, 0.9)); text-shadow: 1px 1px 3px rgba(var(--ct-shade-rgb), var(--ct-tshadow-k)), 0 0 8px rgba(var(--ct-shade-rgb), calc(0.6 * var(--ct-tshadow-k))); } /* A label that IS the control (radio / checkbox / selection card) keeps its own inline layout — the rule above is for the label that names a field. */ .rcf-body .radio-item, .rcf-body .selection-card, .rcf-body label.rcf-inline { display: inline-flex; margin-bottom: 0; } /* The gap to the actions is .rcf-foot's margin, not a trailing field margin. */ .rcf-body> :last-child { margin-bottom: 0; } /* LOADING — a card whose content is still arriving (async options) */ .rcf-card.is-loading .rcf-body { opacity: 0.5; pointer-events: none; } /* ═══════════════════════════════════════════════════════════ ACTIONS — sibling of the card. Sticky on mobile, static from 1024px up. ═══════════════════════════════════════════════════════════ */ .rcf-foot { display: flex; gap: var(--ct-space-md); margin-top: var(--ct-space-2xl); } .rcf-btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--ct-space-sm); min-height: 44px; padding: var(--ct-space-md); border: none; border-radius: var(--ct-radius-btn); background: var(--ct-cyan); color: var(--ct-lt-on-fill, #011215); font-family: inherit; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; box-sizing: border-box; transition: background var(--ct-transition-fast), opacity var(--ct-transition-fast); } .rcf-btn:hover:not(:disabled) { background: var(--ct-cyan-hover); } .rcf-btn:active:not(:disabled) { background: var(--ct-cyan-dark); } .rcf-btn:focus-visible { outline: 2px solid var(--ct-cyan); outline-offset: 2px; } .rcf-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* A class that sets `display` OUTRANKS the browser's own [hidden] rule, which is a bare `[hidden]{display:none}`. Without this the hidden Back / Create account buttons keep their slot in the action row and squeeze Continue to a stub. Measured 2026-08-13 at 375px: Continue came out 65px wide, wrapping its label. Same reason .rcf-card[hidden] is declared explicitly above. */ .rcf-btn[hidden], .rcf-answers-btn[hidden] { display: none; } .rcf-btn--ghost { flex: 0 0 auto; min-width: 112px; background: transparent; border: 1px solid var(--ct-border-strong); color: var(--ct-text-primary); } .rcf-btn--ghost:hover:not(:disabled) { background: var(--ct-glass-bg-hover); } .rcf-btn--ghost:active:not(:disabled) { background: var(--ct-glass-bg-active); } /* Below the rail breakpoint the actions ride the bottom of the viewport. STICKY, never fixed — the host .auth-card has backdrop-filter. The negative inline margin matches .auth-card's 20px mobile padding, so the fade runs edge to edge instead of leaving two lit strips at the sides. */ @media (max-width: 1023px) { .rcf-foot { position: sticky; bottom: 0; margin-inline: calc(var(--ct-space-xl) * -1); padding: var(--ct-space-lg) var(--ct-space-xl) calc(var(--ct-space-lg) + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, var(--ct-lt-surface, rgba(1, 42, 50, 0)) 0%, var(--ct-lt-surface, rgba(1, 42, 50, 0.92)) 38%, var(--ct-lt-surface, rgba(1, 42, 50, 0.97)) 100%); } } @media (max-width: 480px) { .rcf-btn--ghost { min-width: 88px; padding-inline: var(--ct-space-md); } } /* ═══════════════════════════════════════════════════════════ REVIEW — read everything back before submitting ═══════════════════════════════════════════════════════════ */ .rcf-review-list { display: flex; flex-direction: column; margin: 0 0 var(--ct-space-xs); border-top: 1px solid var(--ct-border-light); } .rcf-review-row { display: flex; align-items: baseline; gap: var(--ct-space-md); padding: var(--ct-space-md) 0; border-bottom: 1px solid var(--ct-border-light); } .rcf-review-label { flex: 0 0 34%; font-size: 12.5px; color: var(--ct-text-secondary); line-height: 1.4; } .rcf-review-value { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; } .rcf-review-value.is-empty { font-weight: 400; font-style: italic; color: var(--ct-text-secondary); } .rcf-review-edit { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--ct-space-md); border: 1px solid var(--ct-border-medium); border-radius: var(--ct-radius-btn); background: transparent; color: var(--ct-cyan); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background var(--ct-transition-fast), border-color var(--ct-transition-fast); } .rcf-review-edit:hover { background: var(--ct-cyan-bg); border-color: var(--ct-cyan-border); } .rcf-review-edit:focus-visible { outline: 2px solid var(--ct-cyan); outline-offset: 2px; } @media (max-width: 1023px) { .rcf-review-edit { min-height: 44px; padding: 0 var(--ct-space-lg); } } /* Under 480px the label sits on its own line so the value keeps full width */ @media (max-width: 480px) { .rcf-review-row { flex-wrap: wrap; gap: var(--ct-space-xs) var(--ct-space-md); } .rcf-review-label { flex: 1 1 100%; } .rcf-review-value { flex: 1 1 auto; } } /* ═══════════════════════════════════════════════════════════ RETURN BANNER — shown when the person jumped here from Review ═══════════════════════════════════════════════════════════ */ .rcf-return-hint { display: flex; align-items: center; gap: var(--ct-space-sm); margin: 0 0 var(--ct-space-lg); padding: var(--ct-space-md); border: 1px solid var(--ct-cyan-border); border-radius: var(--ct-radius-lg); background: var(--ct-cyan-bg); font-size: 12.5px; color: var(--ct-text-primary); line-height: 1.45; } .rcf-return-hint i { color: var(--ct-cyan); }