/* ============================================================ BRIEFING JAP, estilo próprio deste projeto ------------------------------------------------------------ NENHUM hex, família de fonte ou raio bruto aqui. Tudo por var(--token) do tokens.css, que é cópia intocada do grupojap. Ordem de leitura do arquivo: base → casca → etapa → pergunta → tipos de campo → anexo → navegação → desktop. Mobile-first de verdade: as regras sem media query são as do iPhone. O bloco de 900px acrescenta a coluna de contexto, não reescreve o que já funciona. ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--creme);color:var(--tinta); font-family:var(--fonte);font-size:var(--t-corpo); font-weight:var(--peso-normal);line-height:var(--altura-corpo); /* o iPhone dá zoom no campo focado quando a fonte é menor que 16px; a escala de corpo já começa em 1rem por isso */ } img{max-width:100%;height:auto;display:block} button,input,textarea{font:inherit;color:inherit} /* O atributo `hidden` PERDE de qualquer regra de display neste arquivo: `hidden` é um `display:none` na folha do navegador, e `.enviando{display:grid}` ganha por especificidade. Custou um bug visível, a página de abertura mostrava o rodapé "Enviando suas respostas…" com o disco girando, e a barra de navegação aparecia antes de existir pergunta na tela. Esta linha resolve para todos os blocos alternados por JS de uma vez. */ /* biome-ignore lint/complexity/noImportantStyles: é o único jeito de o atributo hidden vencer uma regra de classe, que tem especificidade igual ou maior. Sem o !important, qualquer `display` acrescentado depois volta a mostrar bloco escondido, o defeito acima. */ [hidden]{display:none !important} .pular{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--verde);color:var(--branco); padding:var(--e0) var(--e1);border-radius:var(--raio-pilula); text-decoration:none;font-weight:var(--peso-bold); } .pular:focus{left:var(--e0);top:var(--e0)} .oculto-visual{ position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap; } /* ── BARRA DE PROGRESSO ──────────────────────────────────── Fixa no topo, mesmo degradê da barra do site. É a única resposta à pergunta "quanto ainda falta" enquanto ele rola. */ .progresso{ position:fixed;inset:0 0 auto;height:5px;z-index:40; background:color-mix(in srgb, var(--tinta) 8%, transparent); } .progresso-fita{ height:100%;width:0; background:linear-gradient(90deg,var(--verde),var(--verde-claro),var(--amarelo),var(--laranja)); transition:width var(--dur-rapida) var(--curva); } /* ── CASCA ─────────────────────────────────────────────── */ .topo{ position:sticky;top:0;z-index:30; background:color-mix(in srgb, var(--creme) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid color-mix(in srgb, var(--tinta) 10%, transparent); } .topo-int{ max-width:var(--largura);margin:0 auto; padding:var(--e0) var(--e1); display:flex;align-items:center;gap:var(--e0); } .marca{display:flex;align-items:center;gap:var(--e0);text-decoration:none;color:var(--verde-txt)} .marca span{font-weight:var(--peso-extra);letter-spacing:var(--tracking-titulo)} .passo-conta{ margin-left:auto;font-size:var(--t-peq);font-weight:var(--peso-semi); color:var(--tinta-fraca);font-variant-numeric:tabular-nums; } .folha{max-width:var(--largura);margin:0 auto;padding:var(--e2) var(--e1) 8rem} /* ── ABERTURA ──────────────────────────────────────────── */ .abre-selo{ display:inline-block;font-size:var(--t-etiq);font-weight:var(--peso-bold); letter-spacing:var(--tracking-etiq);text-transform:uppercase; color:var(--verde-peq); background:color-mix(in srgb, var(--verde-claro) 30%, var(--branco)); padding:.45rem 1rem;border-radius:var(--raio-pilula); } .abre h1{ font-size:var(--t-titulo);line-height:var(--altura-titulo); letter-spacing:var(--tracking-titulo);font-weight:var(--peso-extra); color:var(--verde-txt);margin:var(--e1) 0 var(--e0); } .abre h1 em{font-style:normal;color:var(--laranja-txt)} .abre p{max-width:var(--largura-texto);color:var(--tinta-suave)} .abre-lista{ list-style:none;padding:0;margin:var(--e2) 0; display:grid;gap:var(--e0);max-width:var(--largura-texto); } .abre-lista li{ display:flex;gap:var(--e1);align-items:flex-start; background:var(--branco);border-radius:var(--raio-bloco); padding:var(--e1);font-size:var(--t-peq); } .abre-lista b{color:var(--verde-peq)} .abre-lead{margin-bottom:var(--e1)} /* Ícone desenhado, não emoji: emoji muda de desenho a cada sistema, não aceita a cor da marca e dá ao documento cara de conversa de aplicativo. O traço aqui herda a cor do bloco. */ .abre-icone{ flex:0 0 auto;display:grid;place-items:center; width:44px;height:44px;border-radius:var(--raio-circulo); background:color-mix(in srgb, var(--verde-claro) 28%, var(--branco)); color:var(--verde-peq); } .abre-icone svg{width:22px;height:22px} /* ── ENTRADA EM ESCADA ───────────────────────────────────── Transição, não @keyframes: se o visitante tocar num botão antes de a entrada terminar, transição retoma do ponto atual e keyframe reiniciaria do zero. O estado escondido só existe sob `html.js`. Sem JS, tudo aparece normal, conteúdo nunca depende de script pra ser visto. O

ficou DE FORA de propósito: é o elemento de maior pintura da página, e animar ele empurra o LCP (medido no grupojap: 2,9s no celular quando o texto da capa começava transparente). */ html.js .abre .sobe{ opacity:var(--op-in);transform:translateY(var(--desloca)); transition:opacity var(--dur-media) var(--curva) calc(var(--i, 0) * var(--escada)), transform var(--dur-media) var(--curva) calc(var(--i, 0) * var(--escada)); } html.js .abre.entrou .sobe{opacity:1;transform:none} /* ── ESCOLHA DA VERSÃO ─────────────────────────────────── */ .escolha{display:grid;gap:.75rem;margin-top:var(--e2)} /* Centralizado de propósito: `.btn` vem depois neste arquivo e vence qualquer alinhamento declarado aqui. Já que o resultado ficou bom, a regra diz o que a tela faz, em vez de fingir que alinha à esquerda. */ .escolha-botao{ flex-direction:column;gap:.15rem; min-height:64px;padding:1rem 1.5rem; } .escolha-nome{font-weight:var(--peso-extra);font-size:var(--t-corpo)} .escolha-sub{font-weight:var(--peso-medio);font-size:var(--t-peq);opacity:.9} .escolha-nota{margin-top:var(--e0);max-width:var(--largura-texto)} @media (min-width:640px){ .escolha{grid-template-columns:1fr 1fr;max-width:36rem} } /* ── ÁUDIO ───────────────────────────────────────────────── O botão fica em TODA pergunta. Discreto em repouso, para não competir com o campo; inconfundível gravando, para ninguém deixar o microfone aberto sem perceber. */ .audio{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:var(--e1)} .audio-botao{ display:inline-flex;align-items:center;gap:.6rem; min-height:44px;padding:.55rem 1.1rem;cursor:pointer; background:transparent;color:var(--verde-txt); border:2px solid color-mix(in srgb, var(--verde) 40%, transparent); border-radius:var(--raio-pilula); font-size:var(--t-peq);font-weight:var(--peso-bold); } .audio-botao:hover{ background:color-mix(in srgb, var(--verde-claro) 20%, transparent); border-color:var(--verde); } .audio-botao:focus-visible{outline:3px solid var(--verde);outline-offset:2px} .audio-ponto{ width:11px;height:11px;border-radius:var(--raio-circulo); background:var(--verde);flex:0 0 auto; } .audio-botao.gravando{ background:var(--vermelho);color:var(--branco);border-color:var(--vermelho); } .audio-botao.gravando .audio-ponto{background:var(--branco);animation:pulsa 1.1s ease-in-out infinite} @keyframes pulsa{50%{opacity:.25;transform:scale(.8)}} .audio-estado{font-size:var(--t-peq);color:var(--tinta-fraca)} .audio-estado:empty{display:none} /* ── ETAPA ─────────────────────────────────────────────── */ /* 240ms, não os 760ms do reveal da abertura: trocar de etapa acontece 12 vezes por briefing, e acima de 300ms uma ação repetida passa a parecer travada. Sem fill-mode: se a animação não rodar (aba em segundo plano), o repouso é o estado normal e nada some. */ .etapa{display:none} .etapa.ativa{display:block;animation:entra 240ms var(--curva)} @keyframes entra{ from{opacity:var(--op-in);transform:translateY(var(--desloca))} to{opacity:1;transform:none} } .etapa-etiq{ font-size:var(--t-etiq);font-weight:var(--peso-bold); letter-spacing:var(--tracking-etiq);text-transform:uppercase; color:var(--laranja-txt); } .etapa h2{ font-size:var(--t-sub);line-height:var(--altura-titulo); letter-spacing:var(--tracking-titulo);font-weight:var(--peso-extra); color:var(--verde-txt);margin:var(--e0) 0; } .etapa-sub{color:var(--tinta-suave);font-size:var(--t-peq);max-width:var(--largura-texto);margin:0} .fio{ height:4px;width:3.5rem;border-radius:var(--raio-pilula); background:var(--amarelo);margin:var(--e1) 0 var(--e2); } /* ── PERGUNTA ──────────────────────────────────────────── */ .pergunta{ background:var(--branco);border-radius:var(--raio-bloco); padding:var(--e2) var(--e1);margin-bottom:var(--e1); } /* o cartão respira igual em cima e embaixo, seja pergunta de texto (div) ou de opção (fieldset) */ .pergunta > :first-child{margin-top:0} .pergunta > :last-child{margin-bottom:0} .pergunta > legend,.rotulo{ display:block;font-weight:var(--peso-bold); font-size:calc(var(--t-corpo) * 1.05); letter-spacing:-0.01em; color:var(--tinta);line-height:1.3;padding:0; } .obrig{color:var(--laranja-txt);font-weight:var(--peso-extra)} .ajuda{ margin:.45rem 0 0;font-size:var(--t-peq); color:var(--tinta-fraca);max-width:var(--largura-texto); line-height:1.5; } /* O NÃO obedece ao padding do fieldset: o navegador desenha ele no vão da borda, por fora da caixa. Resultado visível, em toda pergunta de opção o título ficava POR CIMA do cartão, solto no fundo creme, enquanto a ajuda e as opções ficavam dentro do branco. Perguntas de texto não usam fieldset e por isso pareciam alinhadas, o que deixava a página desencontrada de cartão para cartão. `float` tira o legend desse posicionamento especial e o faz se comportar como bloco comum; o ::after limpa o float para as opções não subirem. */ /* min-width:0 não é enfeite: fieldset nasce com largura mínima implícita de min-content, então uma opção de texto longo empurra o cartão para fora da tela e o celular passa a rolar de lado. O teste pegou. */ fieldset.pergunta{border:0;margin-inline:0;padding:var(--e2) var(--e1);min-width:0} fieldset.pergunta > legend{float:left;width:100%;margin:0 0 .45rem} /* TODO filho depois da legenda limpa o float, não só o texto de ajuda. Sem isso o grid de opções era posicionado AO LADO do título flutuado, nascia com largura zero e as opções vazavam pela direita, o celular passava a rolar de lado. O teste de rolagem horizontal pegou. */ fieldset.pergunta > :not(legend){clear:both} fieldset.pergunta > .ajuda{margin-top:0} fieldset.pergunta::after{content:"";display:table;clear:both} /* ── CAMPO DE TEXTO ────────────────────────────────────── */ .campo{ display:block;width:100%;margin-top:var(--e1); min-height:52px;padding:.85rem 1rem; background:var(--creme);color:var(--tinta); border:2px solid color-mix(in srgb, var(--tinta) 14%, transparent); border-radius:1rem; } textarea.campo{min-height:7.5rem;resize:vertical;line-height:var(--altura-corpo)} .campo::placeholder{color:var(--tinta-fraca);opacity:1} .campo:focus-visible{ outline:3px solid var(--verde);outline-offset:2px; border-color:var(--verde);background:var(--branco); } .campo[aria-invalid="true"]{border-color:var(--vermelho)} .erro{ margin:var(--e0) 0 0;font-size:var(--t-peq);font-weight:var(--peso-semi); color:var(--vermelho); } .erro:empty{display:none} /* ── CAMPO LIVRE DAS PERGUNTAS DE OPÇÃO ────────────────── */ .outro{margin-top:var(--e1)} .outro-rotulo{ display:block;font-size:var(--t-peq);font-weight:var(--peso-semi); color:var(--tinta-fraca);margin-bottom:.35rem; } .outro .campo{margin-top:0} /* ── OPÇÕES (única e múltipla) ───────────────────────────── O input real fica invisível mas continua no fluxo de foco e é ele quem carrega o estado, nada de div com role inventado. Alvo de 44px garantido pelo min-height do rótulo. */ .opcoes{display:grid;gap:.6rem;margin-top:var(--e1)} .opcao{ position:relative;display:flex;align-items:center;gap:.8rem; min-height:52px;padding:.7rem 1rem;cursor:pointer; background:var(--creme);border-radius:1rem; border:2px solid color-mix(in srgb, var(--tinta) 12%, transparent); font-size:var(--t-peq);line-height:1.3; transition:border-color var(--dur-rapida) var(--curva), background var(--dur-rapida) var(--curva); } /* O input real cobre TODO o rótulo, invisível. Não é enfeite: com ele reduzido a 1px no canto, o alvo de clique do próprio campo ficava atrás do círculo desenhado, o dedo funcionava (o navegador repassa o toque do