/* Theme tokens (light defaults). Dark mode overrides via: - prefers-color-scheme when no explicit choice - [data-theme="dark"] when user toggles */ :root { --page-text-color: #333; --page-card-bg: #fff; --page-card-border: #ececec; /* Secondary text (page-description, form hints, footer links, etc). Previous #cdd0d6 was ~1.43:1 against the card background — too faint to read on a glance. #6c757d lands at ~5.4:1, clearing WCAG AA for body copy without becoming heavy enough to compete with the primary text colour. */ --page-muted: #6c757d; --page-input-bg: #fff; --page-input-border: #ddd; --progress-track: #e9ecef; --page-error-color: #dc3545; --page-warning-color: #f59e0b; --page-tooltip-bg: #1f1f1f; --page-tooltip-fg: #fff; /* Face capture surface — always darker than the page background so the live camera frame and the masked moldura have enough contrast to read like a video viewport (iOS Camera / FaceTime treat the chrome the same way regardless of system theme). The two tokens below let dark-mode pull the surface down a notch so it integrates with --page-card-bg instead of looking like a brighter island. */ --face-surface-bg: #1f2024; /* solid (recognition view + loading bg) */ --face-surface-dim: rgba(31, 32, 36, 0.85); /* semi-transparent overlay around moldura */ } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page-bg-color: #121212; --page-text-color: #e8e8e8; --page-card-bg: #1e1e1e; --page-card-border: #2a2a2a; --page-muted: #9aa0a6; --page-input-bg: #262626; --page-input-border: #333; --progress-track: #2a2a2a; --face-surface-bg: #181818; /* deepens to merge with #1e1e1e card */ --face-surface-dim: rgba(24, 24, 24, 0.85); } } [data-theme="dark"] { --page-bg-color: #121212; --page-text-color: #e8e8e8; --page-card-bg: #1e1e1e; --page-card-border: #2a2a2a; --page-muted: #9aa0a6; --page-input-bg: #262626; --page-input-border: #333; --progress-track: #2a2a2a; --face-surface-bg: #181818; --face-surface-dim: rgba(24, 24, 24, 0.85); } /* Main Styles from index.html */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; color: var(--page-text-color, #333); margin: 0; padding: 0; background-color: var(--page-bg-color, #ffffff); background-image: var(--page-bg-image, none); background-size: cover; background-position: center; background-repeat: no-repeat; text-align: var(--page-align, center); } /* Single wrapper that controls the column width for header, progress bar, main and footer. Width responds to device size. Children inherit width; they no longer carry their own max-width. */ .page-wrapper { max-width: 460px; margin: 0 auto; padding: 16px; box-sizing: border-box; } @media (min-width: 768px) { .page-wrapper { max-width: 460px; padding: 24px 16px; } } @media (max-width: 480px) { .page-wrapper { padding: 12px; } } /* Embedded mode (activated client-side via `?embed=true` → sessionStorage, see the bootstrap script in partials/index.html). Strip every piece of chrome so the signup blends into whatever iframe the host site puts it in — no border, no rounded corners, no card background, no external padding. The host owns the layout; we own only the form. Header (brand logo + progress bar) and the legal/theme/build options in the footer are hidden as well — those affordances belong to the host. The "Protegido por zarv" badge in the footer stays as the single piece of attribution. `html.embed-pending` is set inline in before paint to bridge the gap until DOMContentLoaded moves the class onto — avoids a one-frame flash of the card chrome in embed mode. */ html.embed-pending body, body.embed { max-width: none; margin: 0; padding: 0; background: transparent; } html.embed-pending .card, body.embed .card { border: 0; box-shadow: none; border-radius: 0; background: transparent; } html.embed-pending header, body.embed header { display: none; } html.embed-pending .progress-container, body.embed .progress-container { display: none; } body.embed footer .footer-options { display: none; } /* In embed mode the SDK centers the iframe and the page reports its content height for auto-resize, so the standalone full-viewport centering aid would only inflate the reported height and stop the modal fitting the screen. */ body.embed .centered-container { min-height: 0; } /* Single-screen SDK embed (?single=): one isolated screen, not the full funnel. Hide the chrome that only belongs in the standalone flow — the page title/subtitle and the "continue on another device" handoff trigger. Scoped to single-screen (NOT all of body.embed) so whole-flow embeds keep their UI. */ html.single-screen-pending .page-title, html.single-screen-pending .page-description, body.single-screen .page-title, body.single-screen .page-description, body.single-screen [data-handoff-open] { display: none; } /* Theme color on text links */ a { color: var(--page-brand-color, #5d2a7c); } /* Inlined SVGs use class="svg-customer" on paths that should pick up the campaign's brand color. */ .svg-customer { fill: var(--page-brand-color, #5d2a7c); } .subtitle { text-align: center; color: #bbb; font-size: 1.1em; margin-top: -10px; margin-bottom: 20px; } header { text-align: center; margin: 0 0 20px; padding: 0; } /* Brand mark in the page header — anchor with a background-image, following the id-signup pattern (see frontend/src/components/AppHeader.vue + main.scss #brand). Why a background instead of an ? - background-size: contain caps both dimensions to this fixed slot, so logos with very different aspect ratios all fit without overflowing or pushing the layout around; - empty / missing image paints nothing instead of a broken-image glyph; - the anchor stays a real link (clickable, focusable, has a title / aria-label) — text-indent shoves the   placeholder offscreen so screen readers see the accessible name, not the whitespace. The fixed dimensions match the upstream pattern (160×50). */ header .header-brand { display: block; width: 160px; height: 50px; margin: 0 auto; background-repeat: no-repeat; background-position: center center; background-size: contain; text-indent: -9999px; overflow: hidden; } /* The --zarv modifier marks the Zarv fallback (used by header.html when the campaign has no .custom.Logo: unknown-hostname 404, inactive campaign, or unconfigured campaign). The asset is a dark-on-transparent PNG, so invert it in dark mode for legibility. We must NEVER invert a partner's brand asset — hence the modifier class, scoped to the fallback only. */ [data-theme="dark"] header .header-brand--zarv { filter: invert(1) hue-rotate(180deg); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) header .header-brand--zarv { filter: invert(1) hue-rotate(180deg); } } footer { text-align: center; /* Visibly narrower than main: extra horizontal padding insets the content within the wrapper's column. */ margin: 16px 0; padding: 0 20px; color: var(--page-muted); font-size: 14px; } footer .footer-text a, footer .footer-text a:visited { color: inherit; } footer .footer-options { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; } footer .footer-links { display: flex; gap: 12px; flex-wrap: wrap; } footer .footer-links a, footer .locale-label { color: var(--page-muted); font-size: 14px; font-weight: 400; line-height: 1.4; text-decoration: none; } footer .footer-links a:hover { color: var(--page-brand-color); text-decoration: underline; } footer .footer-controls { display: flex; align-items: center; gap: 8px; } footer .footer-protected { display: inline-flex; align-items: center; justify-content: center; margin: 28px auto 24px; } footer .footer-logo { max-width: 160px; height: auto; opacity: 0.7; } /* Embed-mode footer: keeps only the "Protegido por zarv" badge — every other affordance (legal links, theme toggle) is dropped because the host iframe owns those. The badge sits flush with the content above (no 28px margin row) but keeps the same visual size as standalone so the attribution is equally legible inside the iframe. */ footer.footer-embed { margin: 12px 0 8px; padding: 0; } footer.footer-embed .footer-protected { margin: 0 auto; } .theme-toggle { background: transparent; border: none; color: var(--page-muted); cursor: pointer; width: 28px; height: 28px; line-height: 0; padding: 4px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } .theme-toggle:hover { color: var(--page-brand-color); } .theme-toggle svg { width: 100%; height: 100%; fill: currentColor; display: block; } .theme-toggle .theme-icon-light, .theme-toggle .theme-icon-dark { display: inline-flex; width: 100%; height: 100%; } /* Show moon (icons/dark.svg) in light mode, sun (icons/light.svg) in dark mode */ .theme-toggle .theme-icon-dark { display: none; } [data-theme="dark"] .theme-toggle .theme-icon-light { display: none; } [data-theme="dark"] .theme-toggle .theme-icon-dark { display: inline-flex; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .theme-icon-light { display: none; } :root:not([data-theme="light"]) .theme-toggle .theme-icon-dark { display: inline-flex; } } /* Protected by Zarv: swap image variant based on theme */ .protected-by-dark { display: none; } [data-theme="dark"] .protected-by-light { display: none; } [data-theme="dark"] .protected-by-dark { display: inline-block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .protected-by-light { display: none; } :root:not([data-theme="light"]) .protected-by-dark { display: inline-block; } } .card { background: transparent; padding: 24px; border-radius: 16px; box-shadow: none; border: 1px solid var(--page-card-border, #eee); width: 100%; text-align: center; margin: 0 auto; box-sizing: border-box; } /* Page section blocks (consistent across all views): .hero — title + description + illustration, INSET via padding .content — page-specific content (forms, lists), edge-to-edge (no padding) .actions — button(s) wrapper, INSET (matches .hero) */ .hero { padding: 0 40px; margin-bottom: 32px; } /* === 404 hero — Apple-style dramatic numerals ========================== */ .hero-404 { padding: 8px 16px 16px; margin-bottom: 24px; } /* === Inactive-campaign hero — softer than 404 ========================== */ /* Same structural padding as .hero-404 so the surrounding chrome (header, footer) doesn't shift between rendering paths, but without the dramatic numeric mark. Owner is KNOWN — visual tone is "back soon", not "page is gone". */ .hero-inactive { padding: 8px 16px 16px; margin-bottom: 24px; text-align: center; } .inactive-icon { display: flex; justify-content: center; margin: 8px auto 18px; } .inactive-icon svg { width: 96px; height: 96px; } .error-code { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 12px auto 28px; line-height: 1; user-select: none; } .error-code-digit { font-size: clamp(96px, 22vw, 160px); font-weight: 800; letter-spacing: -0.06em; color: var(--page-text-color); background: linear-gradient(180deg, var(--page-text-color) 0%, color-mix(in srgb, var(--page-text-color) 70%, transparent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 12px 30px color-mix(in srgb, var(--page-text-color) 18%, transparent); animation: error-float 5.5s ease-in-out infinite; } .error-code-digit--4 { animation-delay: 0s; } .error-code-digit--0 { animation-delay: -1.8s; } .error-code-digit--4-r { animation-delay: -3.6s; } .error-code-digit--0 { /* The center zero is rendered as an SVG ring so we can paint it with a branded gradient — punches color into an otherwise monochrome 4-0-4. */ width: clamp(96px, 22vw, 160px); height: clamp(96px, 22vw, 160px); background: none; -webkit-text-fill-color: initial; text-shadow: none; filter: drop-shadow(0 14px 28px color-mix(in srgb, var(--page-brand-color) 35%, transparent)); } .error-code-digit--0 svg { width: 100%; height: 100%; display: block; } @keyframes error-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .error-code-digit { animation: none; } } /* Big circular status icon (error/success/warning) used at the top of the hero in feedback views (error, success, sorry, not_found). */ .status-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; margin: 8px auto 24px; color: var(--page-text-color); } .status-icon svg { display: block; } .status-icon-error { color: var(--page-error-color); } .status-icon-success { color: var(--page-brand-color); } .content { padding: 0 16px; margin-bottom: 32px; display: flex; flex-direction: column; gap: 20px; text-align: left; } /* Modifier for single-input or sparse content blocks that benefit from extra vertical breathing room (e.g., email entry page). Top padding removed — the page hero above already provides the headroom, and the extra spacing pushed the content too far from the title in flows where they need to read as a single visual unit. */ .content-airy { padding-bottom: 24px; } .actions { padding: 0 40px; } /* Vertical spacing between stacked CTAs (e.g. primary + secondary "Voltar"). Block-level .btn-wide buttons would otherwise touch. */ .actions > * + * { margin-top: 12px; } /* Page-level content elements rendered inside the card. Title + description form a single visual pairing — tight 8px gap between them (Apple style), with the full 24px breathing room kept below the description before the form/content starts. */ .page-title { font-size: 1.5rem; font-weight: 400; color: var(--page-text-color, #333); margin: 0 0 8px; line-height: 1.25; } .page-description { color: var(--page-muted, #9aa0a6); font-size: 0.95rem; line-height: 1.5; margin: 0 auto 24px; } .page-illustration { display: block; width: 70%; max-width: 240px; height: auto; margin: 40px auto; /* Inlined SVGs use `fill="currentColor"` on paths that should pick up the campaign's brand colour. Setting `color` here propagates into every child SVG via inheritance — works even when class-based rules (.svg-customer) lose specificity to a presentation attribute like `fill="..."` on the SVG root. */ color: var(--page-brand-color, #5d2a7c); } .page-illustration svg { width: 100%; height: auto; } /* Body copy on the status page — sits between the illustration and the action button, slightly more present than .page-description (it's the actual message, not subtitle chrome). Centered to match the hero above. */ .status-body { text-align: center; color: var(--page-text-color, #333); font-size: 0.95rem; line-height: 1.5; margin: 0 auto 24px; max-width: 360px; } /* "Redirecionando..." line shown when Integrations.SuccessUrl / RejectionUrl is configured. The auto-redirect is the primary path; the inline "clique aqui" link is a fallback for users whose browser blocks programmatic navigation (popup blockers, sandboxed iframes, etc). */ .status-redirect { text-align: center; color: var(--page-muted, #6c757d); font-size: 0.95rem; line-height: 1.5; margin: 0 auto; max-width: 360px; } .status-redirect strong { color: var(--page-text-color, #333); font-variant-numeric: tabular-nums; /* keep the countdown width stable as the digit drops */ } .status-redirect a { color: var(--page-brand-color, #5d2a7c); text-decoration: underline; } .btn.btn-wide, a.btn.btn-wide { display: block; width: 100%; padding: 14px 20px; /* Corner radius is driven by --btn-shape-radius (set in partials/index.html from .custom.ButtonShape). Falls back to 12px so older campaigns and any consumer that hasn't migrated to the variable keep their existing look. */ border-radius: var(--btn-shape-radius, 12px); font-weight: 600; font-size: 1rem; box-sizing: border-box; text-align: center; } .card-images { max-width: 35%; height: auto; display: block; margin: 20px auto; } .progress-container { width: auto; margin: 0 16px 10px; background-color: var(--progress-track); height: 5px; border-radius: 5px; overflow: hidden; } .progress-fill { background-color: #22c55e; height: 100%; width: 0; transition: width 0.3s ease; } .icon { font-size: 64px; line-height: 1; margin-bottom: 20px; } /* === Button component ===================================================== Reusable across all views. Markup: Text Full width States: :hover (slight brighten), :active (press), :disabled, :focus-visible. Color follows the campaign's --page-brand-color automatically. */ .btn { display: inline-block; background-color: var(--page-brand-color); color: #fff; padding: 10px 20px; text-decoration: none; border-radius: 8px; border: 1px solid transparent; font-weight: 500; font-size: 16px; line-height: 1.4; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: filter 0.15s ease, transform 0.05s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn:hover:not(:disabled):not([disabled]) { filter: brightness(1.08); } .btn:active:not(:disabled):not([disabled]) { filter: brightness(0.92); transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--page-brand-color); outline-offset: 2px; } .btn:disabled, .btn[disabled], .btn.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* Variants */ .btn.btn-secondary { background-color: transparent; color: var(--page-brand-color); border-color: var(--page-brand-color); } .btn.btn-secondary:hover:not(:disabled):not([disabled]) { background-color: var(--page-brand-color); color: #fff; filter: none; } .centered-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80vh; } h1 { color: #333; margin-top: 10px; margin-bottom: 20px; font-size: 1.5rem; /* Reduced global size */ } h2 { color: #333; margin-top: 0px; margin-bottom: 10px; font-size: 1.2rem; /* Smaller than h1 */ } /* Common Form Styles */ .form-container { max-width: 500px; /* Standard card width for single column */ margin: 0 auto; } /* Table Styles */ table { width: 100%; border-collapse: collapse; margin-top: 20px; text-align: left; } th, td { padding: 12px; border-bottom: 1px solid #eee; font-size: 14px; } th { background-color: #f8f9fa; font-weight: 600; } .section-header { background-color: #e9ecef; font-weight: bold; text-align: center; font-size: 15px; } /* `.form-grid` was the legacy wrapper on custom_data_form when it didn't follow the hero/content/actions convention. The page now uses the same structure as every other form (`.content` already provides the flex column + 20px gap), so nothing references this class — kept commented here only for the next ripgrep that wonders where it went. .form-grid { display: flex; flex-direction: column; gap: 20px; text-align: left; } */ .form-group { display: flex; flex-direction: column; min-width: 0; position: relative; } /* Stripe-style horizontal grouping for related fields (Number+Complement, City+State, etc). Collapses to single column on mobile. */ .form-row { display: flex; gap: 12px; } .form-row .form-group { margin: 0; } .form-group-narrow { flex: 0 0 110px; } .form-group-uf { flex: 0 0 90px; } .form-group-grow { flex: 1 1 auto; min-width: 0; } /* === Custom-data stepper (paginated form, 3 fields per step) ============ The stepper is wired entirely in JS (App.Forms.initCustomDataStepper). It chunks the .form-group(s) inside .content into
wrappers, toggling them via `hidden`. These rules just polish the transitions and place the step indicator. */ .cd-step { display: flex; flex-direction: column; gap: 20px; /* Tiny entrance animation per step swap — feels coordinated with the smooth scroll-to-top the JS does on advance/back. */ animation: cd-step-in 240ms cubic-bezier(0.4, 0, 0.2, 1) both; } .cd-step[hidden] { display: none; } @keyframes cd-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Pill above the fields: "Etapa 1 de 3". Muted on purpose — the focus should stay on the field labels, not on the meta chrome. */ .cd-step-indicator { align-self: flex-start; color: var(--page-muted, #9aa0a6); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; } /* "Voltar" sits above "Próximo/Avançar" because .actions stacks via the `.actions > * + *` margin rule. Hidden on the first step via JS. */ .cd-step-back[hidden] { display: none; } @media (max-width: 480px) { .form-row { flex-direction: column; gap: 20px; } .form-group-narrow, .form-group-uf { flex: 1 1 auto; } } /* Error state: red border on the input/select and a (!) button next to it that reveals the error in a tooltip on hover/focus. */ .form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea { border-color: var(--page-error-color); } /* Hide the legacy inline error text — tooltip now carries the message. */ .form-group.has-error .error-message { display: none !important; } .field-error-button { position: absolute; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--page-error-color); color: #fff; border: none; cursor: help; font-size: 13px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; transform: translateY(-50%); transition: transform 0.1s ease; } .field-error-button:hover, .field-error-button:focus-visible { transform: translateY(-50%) scale(1.06); outline: none; } .field-error-button:hover::after, .field-error-button:focus-visible::after, .field-error-button:hover::before, .field-error-button:focus-visible::before { pointer-events: none; z-index: 100; } .field-error-button:hover::after, .field-error-button:focus-visible::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); right: -6px; width: max-content; min-width: 200px; max-width: 260px; background: var(--page-tooltip-bg); color: var(--page-tooltip-fg); padding: 8px 12px; border-radius: 8px; font-size: 0.78rem; font-weight: 500; line-height: 1.4; white-space: normal; text-align: left; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } .field-error-button:hover::before, .field-error-button:focus-visible::before { content: ""; position: absolute; bottom: calc(100% + 2px); right: 4px; border: 6px solid transparent; border-top-color: var(--page-tooltip-bg); } /* === Warning state (soft, non-blocking) =============================== */ .form-group.has-warning input, .form-group.has-warning select, .form-group.has-warning textarea { border-color: var(--page-warning-color); } .field-warning-button { position: absolute; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--page-warning-color); color: #fff; border: none; cursor: help; font-size: 13px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; transform: translateY(-50%); transition: transform 0.1s ease; } .field-warning-button:hover, .field-warning-button:focus-visible { transform: translateY(-50%) scale(1.06); outline: none; } .field-warning-button:hover::after, .field-warning-button:focus-visible::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); right: -6px; width: max-content; min-width: 200px; max-width: 260px; background: var(--page-tooltip-bg); color: var(--page-tooltip-fg); padding: 8px 12px; border-radius: 8px; font-size: 0.78rem; font-weight: 500; line-height: 1.4; white-space: normal; text-align: left; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); pointer-events: none; z-index: 100; } .field-warning-button:hover::before, .field-warning-button:focus-visible::before { content: ""; position: absolute; bottom: calc(100% + 2px); right: 4px; border: 6px solid transparent; border-top-color: var(--page-tooltip-bg); pointer-events: none; z-index: 100; } .form-group-checkbox { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; } .form-group-checkbox label { margin-bottom: 0; font-weight: 500; font-size: 0.9rem; color: var(--page-text-color); line-height: 1.45; cursor: pointer; } .form-group-checkbox input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 20px; margin: 1px 0 0; accent-color: var(--page-brand-color); cursor: pointer; } /* Choice fields (single_choice = radios, multiple_choice = checkboxes). Reuses the .form-group flex column so it slots into the existing stepper layout without bespoke spacing rules. The takes the place of a regular field label — fieldset is the semantically correct wrapper when one form control spans many inputs (radio group / multi checkboxes). Defaults are reset (no native fieldset border, legend not floated) so it reads as a flat block matching the other rows. */ .form-group-options { border: 0; padding: 0; margin: 0; } .form-group-options legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; color: var(--page-text-color); } .form-group-options .form-option { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--page-input-border); border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 0.9rem; color: var(--page-text-color); transition: border-color 120ms ease, background-color 120ms ease; } .form-group-options .form-option + .form-option { margin-top: 8px; } .form-group-options .form-option:hover { border-color: var(--page-brand-color); } .form-group-options .form-option input[type="radio"], .form-group-options .form-option input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: var(--page-brand-color); cursor: pointer; } .form-group-options .form-option:has(input:checked) { border-color: var(--page-brand-color); background-color: color-mix(in srgb, var(--page-brand-color) 6%, transparent); } label { font-weight: 600; color: var(--page-text-color); font-size: 0.85rem; margin-bottom: 4px; display: block; } /* Required marker (red asterisk) inside labels */ .required { color: #e64949; margin-left: 2px; font-weight: 700; } /* Helper text under inputs */ .form-help { display: block; color: var(--page-muted); font-size: 0.8rem; line-height: 1.4; margin-top: 8px; } /* Inline icon next to button label (e.g., "Usar minha localização") */ .btn .geo-icon, .btn .btn-icon { display: inline-flex; align-items: center; margin-right: 6px; vertical-align: -3px; } /* === Address search — iOS-style search field + ghost geo link ========= */ .address-search-group { position: relative; margin-bottom: 6px; } .address-search-field { position: relative; display: flex; align-items: center; background: var(--page-search-bg, #f0f0f3); border-radius: 12px; padding: 0 14px; height: 48px; transition: background 0.15s ease, box-shadow 0.15s ease; } [data-theme="dark"] .address-search-field { --page-search-bg: #2a2a2e; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .address-search-field { --page-search-bg: #2a2a2e; } } .address-search-field:focus-within { background: var(--page-card-bg); box-shadow: 0 0 0 2px var(--page-brand-color); } .address-search-icon { color: var(--page-muted); margin-right: 10px; display: inline-flex; align-items: center; flex-shrink: 0; pointer-events: none; } .address-search-icon svg { display: block; } /* Reset global input chrome inside the search shell — the parent renders the visual frame, the input becomes a transparent text layer that grows to fill. */ .address-search-field input, .address-search-field input[type="text"] { flex: 1; width: 100%; height: 100%; border: none; background: transparent; padding: 0; margin: 0; font-size: 1rem; line-height: 1; color: var(--page-text-color); outline: none; box-shadow: none; border-radius: 0; appearance: none; -webkit-appearance: none; } .address-search-field input:focus, .address-search-field input[type="text"]:focus { border: none; outline: none; box-shadow: none; } .address-search-field input::placeholder { color: var(--page-muted); } /* Ghost text-link button under the search — small, brand-colored, no border. */ .address-nearby-link { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--page-brand-color); font-size: 0.9rem; font-weight: 500; cursor: pointer; padding: 8px 4px; align-self: flex-start; text-decoration: none; transition: opacity 0.12s ease; } /* Pull the link snug under the search field — the .content flex gap (20px) would otherwise push them apart. */ .address-search-group + .address-nearby-link { margin-top: -12px; } .address-nearby-link:hover { opacity: 0.75; } .address-nearby-link:disabled { opacity: 0.5; cursor: default; } .address-nearby-link .geo-icon { display: inline-flex; vertical-align: -2px; } .place-suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px 0; list-style: none; background: var(--page-card-bg); border: 1px solid var(--page-card-border); border-radius: 10px; max-height: 260px; overflow-y: auto; z-index: 50; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10); opacity: 1; transition: opacity 0.18s ease, transform 0.18s ease; transform: translateY(0); } .place-suggestions[hidden] { display: block !important; opacity: 0; transform: translateY(-4px); pointer-events: none; visibility: hidden; } .place-suggestion { padding: 10px 14px; cursor: pointer; text-align: left; font-size: 0.9rem; color: var(--page-text-color); border-bottom: 1px solid var(--page-card-border); } .place-suggestion:last-child { border-bottom: none; } .place-suggestion strong { display: block; font-weight: 600; margin-bottom: 2px; } .place-suggestion small { display: block; color: var(--page-muted); font-size: 0.78rem; } .place-suggestion[aria-selected="true"], .place-suggestion:hover { background: rgba(0, 0, 0, 0.04); } [data-theme="dark"] .place-suggestion[aria-selected="true"], [data-theme="dark"] .place-suggestion:hover { background: rgba(255, 255, 255, 0.05); } /* Fade-in/slide reveal for the rest of the address fields. */ .address-fields { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; opacity: 0; max-height: 0; overflow: hidden; transform: translateY(-6px); transition: opacity 0.28s ease, transform 0.28s ease, max-height 0.4s ease, margin-top 0.28s ease; margin-top: 0; } .address-fields.is-visible { opacity: 1; max-height: 1200px; transform: translateY(0); margin-top: 4px; overflow: visible; } /* === Nearby addresses modal (map + list side-by-side) =================== */ .nearby-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; animation: handoffFade 0.18s ease; } .nearby-modal[hidden] { display: none; } .nearby-backdrop { position: absolute; inset: 0; background: rgba(20, 20, 22, 0.45); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); cursor: pointer; } .nearby-content { position: relative; background: var(--page-card-bg); border-radius: 16px; width: 100%; max-width: 720px; /* Up to 5 items (each can wrap to 2 lines for long bairro/cidade) plus header. ~500px holds the worst case without showing a scrollbar. */ height: min(86vh, 500px); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 22px 70px -10px rgba(0, 0, 0, 0.45); animation: handoffPop 0.28s cubic-bezier(0.2, 0.85, 0.3, 1.05); } .nearby-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--page-card-border); gap: 12px; } .nearby-header h2 { font-size: 1rem; font-weight: 600; margin: 0; color: var(--page-text-color); line-height: 1.3; /* Long titles ("Endereços próximos a você em São Paulo, SP") wrap to two lines instead of overflowing on narrow screens. */ overflow-wrap: anywhere; } .nearby-close-btn { background: transparent; border: none; width: 30px; height: 30px; border-radius: 50%; color: var(--page-muted); cursor: pointer; font-size: 1.4rem; line-height: 0.8; padding: 0; transition: background-color 0.12s ease, color 0.12s ease; } .nearby-close-btn:hover { background-color: rgba(0, 0, 0, 0.05); color: var(--page-text-color); } [data-theme="dark"] .nearby-close-btn:hover { background-color: rgba(255, 255, 255, 0.08); } .nearby-body { flex: 1; display: flex; overflow: hidden; min-height: 0; } .nearby-map { flex: 1.4; min-height: 0; background: #ececec; } /* Shrink Google Maps' bundled zoom buttons (default 40×40 — too big for our compact modal). Scale from the bottom-right anchor so they stay tucked into the corner without overflowing the map area. */ .nearby-map .gm-bundled-control, .nearby-map .gm-bundled-control-on-bottom { transform: scale(0.72); transform-origin: bottom right; } /* Right-side column on desktop / bottom column on mobile. Holds the list (which scrolls) plus the "Vou buscar pelo nome" footer (which doesn't), so the action button always sits flush below the list — never under the map column. */ .nearby-list-column { flex: 1; min-width: 220px; display: flex; flex-direction: column; border-left: 1px solid var(--page-card-border); min-height: 0; } .nearby-list { flex: 1; list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; } .nearby-list-item { padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--page-card-border); text-align: left; transition: background-color 0.12s ease; min-height: 48px; /* WCAG-friendly tap target */ display: flex; flex-direction: column; justify-content: center; } .nearby-list-item:hover, .nearby-list-item.is-active { background-color: rgba(0, 0, 0, 0.04); } [data-theme="dark"] .nearby-list-item:hover, [data-theme="dark"] .nearby-list-item.is-active { background-color: rgba(255, 255, 255, 0.06); } .nearby-list-item strong { display: block; font-size: 0.9rem; font-weight: 600; color: var(--page-text-color); margin-bottom: 2px; line-height: 1.3; } .nearby-list-item small { display: block; color: var(--page-muted); font-size: 0.78rem; line-height: 1.35; } .nearby-list-empty { padding: 20px 16px; color: var(--page-muted); font-size: 0.85rem; text-align: center; } /* Footer sits OUTSIDE the .nearby-body scroll area so the button stays visible while the list scrolls. No divider — the button itself is the visual separator. */ .nearby-footer { flex: 0 0 auto; padding: 12px 16px; text-align: center; background: var(--page-card-bg); } /* Smaller secondary-action button: brand-color outline, compact padding, fills with brand on hover. Sits below the list as a "fall back to manual search" affordance. */ .nearby-search-link { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--page-brand-color); color: var(--page-brand-color); font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 7px 16px; border-radius: 999px; line-height: 1.2; transition: background-color 0.15s ease, color 0.15s ease; -webkit-tap-highlight-color: transparent; } .nearby-search-link:hover { background-color: var(--page-brand-color); color: #fff; } .nearby-search-link:active { transform: translateY(1px); } @media (max-width: 640px) { .nearby-modal { padding: 0; } .nearby-content { max-width: none; /* Fill the viewport; 100dvh handles iOS Safari's bottom URL bar. */ height: 100vh; height: 100dvh; border-radius: 0; } .nearby-header { padding: 12px 14px; } .nearby-header h2 { font-size: 0.95rem; } /* Larger close button for thumb reach (≥44×44 per Apple HIG). */ .nearby-close-btn { width: 44px; height: 44px; font-size: 1.6rem; } .nearby-body { flex-direction: column; } .nearby-map { /* Fixed-height map so the list stays predictable below it. */ flex: 0 0 220px; min-height: 220px; } .nearby-list-column { flex: 1; border-left: none; border-top: 1px solid var(--page-card-border); } .nearby-list-item { padding: 14px 16px; min-height: 56px; /* taller tap target on small screens */ } } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="file"], select { width: 100%; padding: 14px 16px; border: 1px solid var(--page-input-border, #ddd); background: var(--page-input-bg, #fff); color: var(--page-text-color, #333); border-radius: 10px; box-sizing: border-box; font-size: 1rem; font-family: inherit; transition: border-color 0.15s ease; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="file"]:focus, select:focus { outline: none; border-color: var(--page-brand-color); } input::placeholder { color: var(--page-muted); } /* Native input[type=submit] is no longer used in views — they all render as