/* Portal cativo: leve, mobile-first e sem recursos externos (o aparelho ainda não tem internet). Cores, fonte, cantos, fundo e cabeçalho vêm de Configurações › Aparência do portal (classes no ). */ :root { --brand: #0f766e; --on-brand: #ffffff; --font: "Inter", "Segoe UI Variable Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } body { color-scheme: light; --page-bg: var(--custom-bg, #f4f6f8); /* no escuro, o fundo claro escolhido não vale */ --surface: #ffffff; --surface-2: #f5f7f9; --input-bg: #ffffff; --text: #101828; --text-2: #5d6778; --border: #e3e7ed; --brand-text: color-mix(in srgb, var(--brand) 88%, #000); --brand-soft: color-mix(in srgb, var(--brand) 11%, var(--surface)); --danger: #b42318; --danger-bg: #fdeceb; --success: #12733a; --success-bg: #e3f5ea; --info: #1d4f91; --info-bg: #e9f1fc; --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 34px -14px rgba(16, 24, 40, 0.16); --r-card: 22px; --r-ctl: 14px; --r-check: 8px; --r-pill: 999px; } /* Tema escuro (fixo ou seguindo o celular) */ body.theme-escuro { color-scheme: dark; --surface: #151a21; --surface-2: #1c222b; --input-bg: #10151b; --text: #edf1f6; --text-2: #a3adbb; --border: #29313d; --brand-text: color-mix(in srgb, var(--brand) 55%, #fff); --brand-soft: color-mix(in srgb, var(--brand) 22%, var(--surface)); --danger: #ff9a8f; --danger-bg: #3a1d1a; --success: #74d69a; --success-bg: #16301f; --info: #9cc3f5; --info-bg: #172a42; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -14px rgba(0, 0, 0, 0.6); --page-bg: #0b0f14; } @media (prefers-color-scheme: dark) { body.theme-auto { color-scheme: dark; --surface: #151a21; --surface-2: #1c222b; --input-bg: #10151b; --text: #edf1f6; --text-2: #a3adbb; --border: #29313d; --brand-text: color-mix(in srgb, var(--brand) 55%, #fff); --brand-soft: color-mix(in srgb, var(--brand) 22%, var(--surface)); --danger: #ff9a8f; --danger-bg: #3a1d1a; --success: #74d69a; --success-bg: #16301f; --info: #9cc3f5; --info-bg: #172a42; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -14px rgba(0, 0, 0, 0.6); --page-bg: #0b0f14; } } /* Cantos */ body.corners-suaves { --r-card: 12px; --r-ctl: 9px; --r-check: 5px; } body.corners-retos { --r-card: 3px; --r-ctl: 3px; --r-check: 2px; --r-pill: 4px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--page-bg); color: var(--text); font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; } a { color: var(--brand-text); } img, svg { max-width: 100%; } [hidden] { display: none !important; } /* Fundo */ body.bg-suave { background: radial-gradient(900px 480px at 85% -120px, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%), radial-gradient(700px 420px at -10% 10%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, var(--page-bg)), var(--page-bg) 520px); background-attachment: fixed; } body.bg-imagem { background: linear-gradient(rgba(8, 12, 18, 0.45), rgba(8, 12, 18, 0.55)), var(--bg-image) center / cover fixed, #111; } /* Cabeçalho */ .hero { position: relative; padding: calc(14px + env(safe-area-inset-top)) 16px 18px; } .hero-inner { position: relative; max-width: 480px; margin: 0 auto; } .portal-header { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 6px 0 4px; text-align: center; } .portal-logo-wrap { display: inline-flex; align-items: center; justify-content: center; } .portal-logo { display: block; max-width: 240px; max-height: 64px; object-fit: contain; } body.logo-p .portal-logo { max-height: 44px; max-width: 170px; } body.logo-g .portal-logo { max-height: 96px; max-width: 280px; } .portal-brand { font-size: 15px; font-weight: 650; letter-spacing: 0.01em; color: var(--brand-text); } .portal-brand-only { font-size: 21px; font-weight: 750; letter-spacing: -0.01em; } .intro { margin: 14px 0 2px; text-align: center; } .portal-title { margin: 4px 0 6px; font-size: 24px; font-weight: 750; line-height: 1.2; letter-spacing: -0.02em; } .portal-sub { margin: 0 0 8px; color: var(--text-2); font-size: 15px; } /* Faixa colorida: o conteúdo sobe por cima da faixa */ body.header-faixa .hero { padding-bottom: 72px; color: var(--on-brand); background: radial-gradient(420px 220px at 90% 0%, rgba(255, 255, 255, 0.18), transparent 70%), linear-gradient(140deg, var(--brand), color-mix(in srgb, var(--brand) 62%, #000)); border-radius: 0 0 calc(var(--r-card) + 10px) calc(var(--r-card) + 10px); } body.corners-retos.header-faixa .hero { border-radius: 0; } body.header-faixa .hero .portal-title, body.header-faixa .hero .portal-brand { color: var(--on-brand); } body.header-faixa .hero .portal-sub { color: var(--on-brand); opacity: 0.88; } body.header-faixa .portal-logo-wrap, body.header-cartao .portal-logo-wrap { padding: 10px 16px; background: #fff; border-radius: var(--r-ctl); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.35); } body.header-faixa .portal { margin-top: -56px; } /* Cartão: logo e boas-vindas num cartão próprio */ body.header-cartao .hero-inner { padding: 18px 18px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow); } body.header-cartao .portal-logo-wrap { box-shadow: none; padding: 0; } /* Fundo com imagem: textos fora dos cartões ficam claros */ body.bg-imagem:not(.header-faixa):not(.header-cartao) .hero, body.bg-imagem .footer { color: #fff; } body.bg-imagem:not(.header-faixa):not(.header-cartao) .portal-sub, body.bg-imagem:not(.header-faixa):not(.header-cartao) .portal-brand, body.bg-imagem .footer .footer-support, body.bg-imagem > .portal > .muted { color: rgba(255, 255, 255, 0.88); } /* Idiomas */ .lang-switch { display: flex; justify-content: flex-end; gap: 2px; margin: 0 0 4px; } .lang-switch a { padding: 4px 10px; border-radius: var(--r-pill); color: var(--text-2); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; } .lang-switch a[aria-current] { background: var(--surface); color: var(--brand-text); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); } body.header-cartao .lang-switch a[aria-current] { background: var(--brand-soft); box-shadow: none; } body.bg-imagem.header-simples .lang-switch a { color: rgba(255, 255, 255, 0.85); } body.bg-imagem.header-simples .lang-switch a[aria-current] { color: var(--brand-text); } body.header-faixa .lang-switch a { color: var(--on-brand); opacity: 0.8; } body.header-faixa .lang-switch a[aria-current] { background: rgba(255, 255, 255, 0.2); color: var(--on-brand); opacity: 1; box-shadow: none; } /* Conteúdo */ .portal { position: relative; max-width: 480px; margin: 0 auto; padding: 4px 16px calc(28px + env(safe-area-inset-bottom)); } .card { margin: 0 0 14px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow); } .card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; } .card-icon { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: calc(var(--r-ctl) - 2px); background: var(--brand-soft); color: var(--brand-text); } .card-icon svg { width: 20px; height: 20px; } .card-free { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 7%, var(--surface)), var(--surface) 70%); } .lead { margin: 0 0 16px; color: var(--text-2); font-size: 14.5px; } /* Banners e promoções: um embaixo do outro, ou em carrossel de arrastar quando há mais de um */ .banners { display: grid; gap: 12px; margin: 0 0 14px; } .banners-rail { grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .banners-rail .banner { scroll-snap-align: start; } .banner { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow); } .banner-img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; } .banner-body { display: flex; flex: 1; flex-direction: column; padding: 14px 16px 16px; } .banner-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; } .banner-text { margin: 0 0 12px; color: var(--text-2); font-size: 14px; } .banner-btn { width: 100%; margin-top: auto; } /* Código do voucher */ .code-input { display: block; width: 100%; margin: 0 0 12px; padding: 12px; font: 700 28px/1.2 var(--mono); letter-spacing: 0.2em; text-align: center; text-transform: uppercase; color: var(--text); background: var(--input-bg); border: 1.5px solid var(--border); border-radius: var(--r-ctl); } .code-input::placeholder { color: var(--text-2); opacity: 0.5; letter-spacing: 0.1em; font-weight: 600; } /* Com JavaScript, o código vira um quadradinho por caractere. */ .code-entry.has-boxes .code-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .code-boxes { display: flex; justify-content: center; gap: 8px; margin: 2px 0 14px; } .code-box { flex: 1 1 0; min-width: 0; max-width: 54px; height: 60px; padding: 0; font: 700 26px/1 var(--mono); text-align: center; text-transform: uppercase; color: var(--text); background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--r-ctl); transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .code-box:focus { outline: none; background: var(--input-bg); border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); } .btn-scan { display: flex; align-items: center; justify-content: center; gap: 8px; } .btn-scan svg { width: 20px; height: 20px; flex: none; } .scan-status { margin: 8px 0 0; font-size: 13px; color: var(--text-2); text-align: center; } /* Leitor ao vivo (só em HTTPS): câmera em tela cheia com moldura no centro */ body.scanning { overflow: hidden; } .scan-overlay { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background: #000; } .scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .scan-frame { position: absolute; top: 50%; left: 50%; width: min(72vw, 72vh, 320px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 22px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45); } .scan-hint { position: relative; margin: 0 16px 14px; padding: 8px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 15px; text-align: center; } .scan-actions { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 420px; padding: 0 16px calc(20px + env(safe-area-inset-bottom)); } .scan-actions .btn { width: 100%; } .scan-actions .scan-photo { background: #fff; color: #111; } .field-error { margin: -4px 0 12px; font-size: 14px; color: var(--danger); text-align: center; } @media (max-width: 380px) { .code-boxes { gap: 6px; } .code-box { height: 52px; font-size: 22px; } } /* Campos */ .input { display: block; width: 100%; min-height: 48px; padding: 11px 14px; font: inherit; color: var(--text); background: var(--input-bg); border: 1.5px solid var(--border); border-radius: var(--r-ctl); transition: border-color 0.15s, box-shadow 0.15s; } select.input { appearance: auto; } .code-input:focus, .input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); } .field { margin-bottom: 14px; } .field-help { margin: 4px 0 0; font-size: 13px; } .field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; } /* Botões */ .btn { display: block; width: 100%; min-height: 52px; padding: 14px 18px; margin: 0; border: 1.5px solid transparent; border-radius: var(--r-ctl); font: inherit; font-weight: 700; letter-spacing: 0.005em; text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.08s ease, filter 0.15s, background 0.15s, box-shadow 0.15s; } .btn:active { transform: scale(0.985); } .btn + .btn { margin-top: 10px; } .btn:disabled { opacity: 0.6; cursor: default; transform: none; } .btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 88%, #fff), var(--brand)); color: var(--on-brand); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand) 80%, #000), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .btn-primary:hover { filter: brightness(1.04); } .btn-outline { background: var(--surface); color: var(--brand-text); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); } .btn-outline:hover { background: var(--brand-soft); } .btn-sm { display: inline-block; width: auto; min-height: 0; padding: 8px 16px; font-size: 14px; border-radius: var(--r-pill); } .btn-link { background: none; color: var(--text-2); font-weight: 600; min-height: 0; padding: 10px 16px; } /* Pesquisa de satisfação: escala de 0 a 10 e estrelas de 1 a 5, sem JavaScript */ .survey fieldset { margin: 0 0 16px; padding: 0; border: 0; } .survey legend { margin-bottom: 8px; font-weight: 600; font-size: 15px; } .survey .nps legend { font-weight: 400; color: var(--text); } .nps-scale { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; } .nps-option input { position: absolute; opacity: 0; pointer-events: none; } .nps-option span { display: flex; align-items: center; justify-content: center; height: 42px; border: 1.5px solid var(--border); border-radius: calc(var(--r-ctl) - 4px); background: var(--input-bg); font-weight: 700; font-size: 15px; cursor: pointer; } .nps-option input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .nps-option input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; } .nps-legend { display: flex; justify-content: space-between; margin-top: 6px; color: var(--text-2); font-size: 12px; } .stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; } .stars input { position: absolute; opacity: 0; pointer-events: none; } .stars label { color: var(--border); font-size: 36px; line-height: 1; cursor: pointer; } .stars input:checked ~ label { color: #f5a524; } .stars input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } @media (max-width: 360px) { .nps-option span { height: 36px; font-size: 13px; } } .back-link { display: inline-block; margin: 0 0 10px; text-decoration: none; font-weight: 600; } /* Caixas de marcar: desenhadas pelo CSS para seguir os cantos escolhidos nas configurações */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; display: grid; place-content: center; flex: none; width: 24px; height: 24px; margin: 0; padding: 0; background: var(--input-bg); border: 1.5px solid var(--border); border-radius: var(--r-check); cursor: pointer; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; } input[type="checkbox"]::before { content: ""; width: 13px; height: 13px; background: var(--on-brand); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transition: transform 0.12s ease-out; } input[type="checkbox"]:checked { background: var(--brand); border-color: var(--brand); } input[type="checkbox"]:checked::before { transform: scale(1); } input[type="checkbox"]:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); } /* Aceite dos termos e perguntas de sim/não */ .terms { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 18px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); cursor: pointer; } /* Centraliza a caixa com a PRIMEIRA linha do texto (e não com o bloco todo, que pode ter 2 linhas). */ .terms input { margin-top: calc((1.45em - 24px) / 2); } .terms + .btn, .terms + .terms { margin-top: 2px; } .terms-text { padding: 14px 18px; font-size: 14px; } .terms-text summary { cursor: pointer; font-weight: 650; color: var(--brand-text); } .terms-body { margin-top: 12px; white-space: pre-line; font-size: 13px; color: var(--text-2); } .alert { margin: 0 0 14px; padding: 13px 16px; border-radius: var(--r-ctl); font-size: 14px; font-weight: 500; } .alert-error { background: var(--danger-bg); color: var(--danger); } .alert-success { background: var(--success-bg); color: var(--success); } .alert-info { background: var(--info-bg); color: var(--info); } /* Planos */ .plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-ctl); } .plan-name { font-weight: 700; } .plan-meta { font-size: 13px; color: var(--text-2); } .plan-buy { display: flex; align-items: center; gap: 10px; flex: none; } .plan-price { font-weight: 800; font-size: 17px; white-space: nowrap; color: var(--brand-text); } .plan-unavailable { font-size: 12px; color: var(--text-2); } .plan-facts { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 6px; } .plan-facts li { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px 12px; font-size: 13px; } .tag { display: inline-block; padding: 3px 11px; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-text); font-size: 12px; font-weight: 700; } .big-code { font: 800 34px/1.2 var(--mono); letter-spacing: 0.18em; margin: 4px 0 12px; overflow-wrap: anywhere; } .qr svg { display: block; width: 200px; height: 200px; margin: 14px auto 6px; padding: 10px; background: #fff; border-radius: var(--r-ctl); } .pix-qr { display: block; width: 230px; height: 230px; max-width: 100%; margin: 12px auto; padding: 8px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-ctl); image-rendering: pixelated; } .pix-code { width: 100%; font: 12px/1.4 var(--mono); color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-ctl); padding: 10px 12px; margin: 8px 0 10px; resize: none; } .linklike { padding: 0; border: 0; background: none; color: var(--brand-text); font: inherit; text-decoration: underline; cursor: pointer; } .success-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 4px auto 10px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--success) 20%, var(--surface)), var(--success-bg)); color: var(--success); font-size: 36px; font-weight: 800; box-shadow: 0 0 0 8px color-mix(in srgb, var(--success-bg) 50%, transparent); } .steps { margin: 6px 0 10px; padding-left: 20px; } .steps li { margin-bottom: 6px; } .muted { color: var(--text-2); font-size: 13px; } .center { text-align: center; } .mono { font-family: var(--mono); } /* Rodapé */ .footer { margin-top: 22px; text-align: center; color: var(--text-2); font-size: 13px; } .footer p { margin: 0 0 6px; } .powered-by { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; } .powered-by strong { letter-spacing: 0.1em; font-weight: 800; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .btn, .code-box, .input { transition: none; } .btn:active { transform: none; } }