/* Formulários /form — identidade minimalista preto/branco/roxo. Família única (Outfit), hierarquia por peso; sem gradientes, glow ou sombra colorida. */ :root { --bg: #FFFFFF; --ink: #111114; --ink-soft: #55555E; --violet: #6D28D9; /* texto/borda/acento */ --violet-ink: #4C1D95; /* hover de fundos sólidos */ --violet-soft: #F1EAFD; --violet-acao: #6D28D9; /* fundos sólidos com texto branco (botões) */ --line: #E8E8EC; --erro: #B3261E; --placeholder: #B9B9C2; } /* Modo escuro. Padrão segue o sistema (auto); o botão de tema grava a escolha em data-tema no ("claro"/"escuro"), que tem prioridade sobre o auto. Violeta clareia para manter contraste; fundos sólidos usam --violet-acao. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --bg: #111114; --ink: #F4F4F6; --ink-soft: #A0A0AA; --violet: #A78BFA; --violet-ink: #8B5CF6; --violet-soft: #2A2140; --violet-acao: #7C3AED; --line: #2C2C33; --erro: #F2B8B5; --placeholder: #6E6E78; } } :root[data-tema="escuro"] { --bg: #111114; --ink: #F4F4F6; --ink-soft: #A0A0AA; --violet: #A78BFA; --violet-ink: #8B5CF6; --violet-soft: #2A2140; --violet-acao: #7C3AED; --line: #2C2C33; --erro: #F2B8B5; --placeholder: #6E6E78; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--ink); font-family: 'Outfit', system-ui, -apple-system, sans-serif; min-height: 100dvh; } /* Barra de progresso — assinatura visual junto com o contador roxo. Trilho cinza sempre visível para o progresso existir mesmo em 0% */ .progresso-trilho { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--line); z-index: 10; } .progresso { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--violet); transition: width .28s cubic-bezier(.16, 1, .3, 1); z-index: 11; } /* Coluna central: conteúdo alinhado à esquerda dentro dela, verticalmente centrado */ .tela { max-width: 640px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 24px 24px 96px; } .entra { animation: entra .28s cubic-bezier(.16, 1, .3, 1); } @keyframes entra { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .contador { color: var(--violet); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 500; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .pergunta { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; } .descricao { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); } .area-resposta { margin-top: 32px; } /* Inputs de texto: só linha inferior — minimalismo Typeform */ .campo-texto { width: 100%; font: inherit; font-size: 22px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 8px 0 10px; transition: border-color .12s; } .campo-texto:focus { outline: none; border-bottom: 2px solid var(--violet); } .campo-texto::placeholder { color: var(--placeholder); } textarea.campo-texto { resize: vertical; min-height: 96px; line-height: 1.5; } /* Opções de escolha (única/múltipla) */ .opcoes { display: flex; flex-direction: column; gap: 10px; } .opcao { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px 16px; font: inherit; font-size: 18px; text-align: left; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: background .12s, border-color .12s; } .opcao:hover { border-color: var(--violet); } .opcao.selecionada { background: var(--violet-soft); border-color: var(--violet); } .opcao .tecla { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--violet); border: 1px solid var(--violet); border-radius: 4px; } .opcao.selecionada .tecla { background: var(--violet-acao); border-color: var(--violet-acao); color: #fff; } /* Escala: botões quadrados em linha */ .escala { display: flex; gap: 8px; flex-wrap: wrap; } .escala .opcao-escala { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font: inherit; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: background .12s, border-color .12s; } .escala .opcao-escala:hover { border-color: var(--violet); } .escala .opcao-escala.selecionada { background: var(--violet-acao); border-color: var(--violet-acao); color: #fff; } .escala-labels { display: flex; justify-content: space-between; margin-top: 10px; font-size: 14px; color: var(--ink-soft); } /* Avaliação por estrelas (1-5): caractere ★ com color — sem emoji/imagem */ .estrelas { display: flex; gap: 8px; } .estrela { font-size: 34px; min-width: 48px; min-height: 48px; background: none; border: 0; cursor: pointer; color: var(--line); transition: color .12s; padding: 0; } .estrela.cheia { color: var(--violet); } /* Ações (OK + hint Enter) */ .acoes { margin-top: 28px; display: flex; align-items: center; gap: 14px; } .btn-ok { font: inherit; font-size: 18px; font-weight: 500; color: #fff; background: var(--violet-acao); border: 0; border-radius: 8px; padding: 12px 32px; min-height: 48px; cursor: pointer; transition: background .12s; display: inline-flex; align-items: center; gap: 10px; } .btn-ok:hover { background: var(--violet-ink); } .btn-ok:disabled { opacity: .6; cursor: default; } .hint-enter { font-size: 14px; color: var(--ink-soft); } @media (hover: none) { .hint-enter { display: none; } } .msg-erro { margin-top: 14px; font-size: 15px; color: var(--erro); min-height: 20px; } /* Spinner do botão durante o POST */ .spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: gira .7s linear infinite; } @keyframes gira { to { transform: rotate(360deg); } } /* Rodapé fixo: voltar | progresso | marca. safe-area evita a UI do Safari iOS */ .rodape { position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 24px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--line); font-size: 14px; z-index: 9; } .btn-voltar { font: inherit; font-size: 15px; font-weight: 500; color: var(--violet); background: var(--bg); border: 1px solid var(--line); padding: 10px 16px; min-height: 44px; border-radius: 8px; cursor: pointer; visibility: hidden; } .btn-voltar.visivel { visibility: visible; } .btn-voltar:hover { border-color: var(--violet); background: var(--violet-soft); } .contagem { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; } .marca-rodape { color: var(--ink-soft); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; } @media (max-width: 480px) { .marca-rodape { display: none; } } .rodape-direita { display: flex; align-items: center; gap: 12px; } /* Botão de tema (☾/☀): mesmo desenho do voltar, sempre visível no rodapé */ .btn-tema { font: inherit; font-size: 17px; line-height: 1; color: var(--violet); background: var(--bg); border: 1px solid var(--line); width: 44px; min-height: 44px; border-radius: 8px; cursor: pointer; } .btn-tema:hover { border-color: var(--violet); background: var(--violet-soft); } /* Telas de intro/final */ .titulo-form { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; } .check-final { width: 56px; height: 56px; border-radius: 50%; background: var(--violet-soft); color: var(--violet); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 24px; } .link-secundario { margin-top: 18px; font-size: 15px; color: var(--violet); background: none; border: 0; cursor: pointer; padding: 8px 0; font-family: inherit; text-decoration: underline; } /* Banner de preview (rascunho no builder) — tokens acompanham o modo escuro */ .banner-preview { position: fixed; top: 3px; left: 0; right: 0; z-index: 12; background: var(--violet-soft); color: var(--violet); font-size: 13px; font-weight: 500; text-align: center; padding: 6px 12px; } /* Pergunta do tipo arquivo: seletor, nome do escolhido e barra de progresso do envio */ .campo-arquivo { display: block; width: 100%; max-width: 520px; font-size: 16px; color: inherit; cursor: pointer; padding: 14px; border: 1px dashed var(--violet); border-radius: 10px; background: transparent; } .campo-arquivo:disabled { opacity: .5; cursor: not-allowed; } .arquivo-rotulo { margin-top: 10px; font-size: 14px; opacity: .75; word-break: break-all; } .arquivo-aviso { margin-top: 8px; font-size: 13px; color: var(--violet); } .arquivo-progresso { margin-top: 12px; max-width: 520px; height: 6px; background: var(--violet-soft); border-radius: 3px; overflow: hidden; } .arquivo-progresso-fill { width: 0; height: 100%; background: var(--violet); transition: width .2s ease; } /* Termo (regulamento): caixa rolável com o texto e, abaixo, os botões de concordância. max-height limita a altura para o texto longo não empurrar os botões para fora da tela. */ .termo-texto { max-width: 640px; max-height: 46vh; overflow-y: auto; padding: 16px 18px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: 15px; line-height: 1.6; color: var(--ink-soft); } .termo-texto h2, .termo-texto h3, .termo-texto h4 { color: var(--ink); margin: 16px 0 8px; line-height: 1.3; } .termo-texto h2 { font-size: 20px; } .termo-texto h3 { font-size: 17px; } .termo-texto h4 { font-size: 15px; } .termo-texto h2:first-child, .termo-texto h3:first-child, .termo-texto h4:first-child { margin-top: 0; } .termo-texto p { margin: 0 0 12px; } .termo-texto ul, .termo-texto ol { margin: 0 0 12px; padding-left: 22px; } .termo-texto li { margin-bottom: 4px; } .termo-texto strong { color: var(--ink); } .termo-texto hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; } /* Termo compacto: o texto fica recolhido atrás de um link discreto e só o aceite ocupa espaço. O
nativo carrega o estado aberto/fechado e o teclado sem JS — trocar por div + click perderia as duas coisas. */ .termo-compacto { margin-bottom: 20px; } .termo-compacto > summary { display: inline-block; cursor: pointer; font-size: 15px; color: var(--violet); text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; list-style: none; } .termo-compacto > summary::-webkit-details-marker { display: none; } .termo-compacto > summary::after { content: ' ↓'; text-decoration: none; } .termo-compacto[open] > summary::after { content: ' ↑'; } .termo-compacto > summary:hover { color: var(--violet-ink); } .termo-compacto > summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 4px; } .termo-compacto > .termo-texto { margin-top: 12px; } /* Acessibilidade */ :focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; } @media (min-width: 768px) { .pergunta { font-size: 32px; } .titulo-form { font-size: 40px; } } @media (prefers-reduced-motion: reduce) { .entra { animation: none; } .progresso { transition: none; } .spinner { animation-duration: 1.5s; } }