/* ========================================================================== DIAGNÓSTICO DE PERFIL — prefixo perf- Cinco perguntas, uma por vez, em corpo de manifesto. O enunciado é a peça gráfica; as respostas são linhas grandes com número, texto e um filete que acende. Sem cartão, sem caixa, sem imagem. Tokens usados: --accent filete aceso, resposta marcada, número da marcada --display face do enunciado (via .display-xl) e dos valores --sans face das respostas e do texto de apoio --ease --dur curva e tempo do projeto --fg --fg-2 tinta do enunciado e das respostas --fg-muted números, contador, ressalva --rule --rule-2 filete em repouso e divisória do resultado --sec-gap respiro derivado, nunca clamp solto --radius-pill só via .btn do core A REGRA QUE ORGANIZA O ARQUIVO: nada aqui esconde passo nenhum. Quem esconde é o script, com [hidden]. Sem JavaScript o CSS entrega as cinco perguntas empilhadas, e é isso que se quer. ========================================================================== */ .perf{ /* Corpo do enunciado. Como no manifesto, o que se persegue é a FRAÇÃO da coluna que a pergunta ocupa (~3 linhas de 15ch), não o número: trocar a --display do tema por uma condensada pede corpo maior. */ --perf-perg:clamp(30px,4.4vw,58px); --display-xl:var(--perf-perg); /* .95 é o padrão da primitiva, para título de uma ou duas palavras. Aqui são frases de três linhas com descendente ("q" de "quanto", "g" de "algo"): abaixo de 1.02 elas encostam na linha seguinte. */ --display-xl-lh:1.02; /* Corpo da resposta. Grande de propósito — a lista é o desenho, não um formulário. Fica em --sans (peso leve) contra a display peso 700 do enunciado: é esse contraste que separa pergunta de resposta sem precisar de caixa, régua ou cartão. */ --perf-op-fs:clamp(17px,1.9vw,25px); /* Coluna do número da resposta. Em em para acompanhar o corpo. */ --perf-op-num-col:3.2em; /* Altura mínima do palco. As perguntas têm 3 ou 4 respostas e enunciados de 1 a 4 linhas: sem piso, a dobra encolhe e cresce a cada troca e a página inteira dança sob quem está lendo. Medido a 1440x900 no tema liberta-wealth: o passo mais baixo dá 330px e o mais alto 479px — 149px de solavanco a cada avanço. Quem preenche --perf-palco-medido é o SCRIPT, que mede os cinco passos e escreve o maior. Um clamp fixo aqui erraria em metade das larguras: a altura do passo depende de quantas linhas a pergunta quebra, e isso muda com o corpo da letra, com a face do tema e com a tradução do texto. O clamp abaixo é só o piso de partida, válido no quadro entre a carga e a primeira medida. */ --perf-palco-medido:clamp(300px,46vh,470px); --perf-palco-min:var(--perf-palco-medido); /* Saída do passo que sai. O script lê o MESMO número (SAIDA em script.js): mudar aqui pede mudar lá, senão o passo some antes ou depois da hora. */ --perf-saida:.26s; /* Atraso entre palavras do enunciado que entra. 42ms x ~9 palavras = ~.38s de escalonamento, que é quanto dura a leitura da primeira palavra. */ --perf-w-passo:42ms; /* Respiro entre a barra de passos e o enunciado. Mora no PASSO, e não no palco, porque é a altura do passo que o script mede para calcular o piso — padding no palco ficaria de fora da conta e o piso sairia curto pela exata medida deste respiro. */ --perf-topo:clamp(28px,4vh,52px); /* Largura de leitura do parágrafo do resultado. */ --perf-leitura-max:56ch; } /* ========================================================================== CABEÇALHO ========================================================================== */ .perf-convite{margin-top:16px} .perf-apoio{max-width:52ch} /* O painel inteiro é um bloco de reveal do core. O respiro que o separa do cabeçalho sai de --sec-gap, como o resto do ritmo vertical. */ .perf-painel{margin-top:calc(var(--sec-gap) * .34)} /* ========================================================================== BARRA DE PASSOS Decorativa: [aria-hidden] no contador e a informação de verdade na região aria-live. Nasce [hidden] no markup e é o script que a mostra. ========================================================================== */ /* [hidden] vem da folha do navegador com especificidade (0,1,0). Toda regra de display por classe abaixo o venceria e mostraria o que devia sumir — a mesma pegadinha que o .hgal-nav[hidden] da galeria em scroll horizontal documenta. Uma regra só, no topo, cobre o componente inteiro. */ .perf [hidden]{display:none} .perf-barra{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding-bottom:18px; border-bottom:1px solid var(--rule); } .perf-contador{ font-family:var(--sans);font-size:11.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--fg-muted); } /* O número corrente acende; o total fica apagado. É o único lugar da peça com progresso, e ele é texto — barra que enche viraria gamificação, que é o registro errado para uma assessoria. */ .perf-atual{color:var(--accent)} /* "Voltar" nunca é disabled: no primeiro passo ele simplesmente não existe. Botão apagado que não faz nada é pior que botão ausente. */ .perf-voltar{ font-family:var(--sans);font-size:11.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--fg-muted); background:none;border:0;padding:0; transition:color .3s var(--ease); } .perf-voltar:hover{color:var(--accent)} /* A região aria-live (.perf-anuncio) não tem regra própria: ela leva a primitiva .visually-hidden do core, que existe exatamente para isto — texto que o leitor de tela recebe e o olho não vê, com clip-path em vez de display:none, porque display:none e visibility:hidden tiram o elemento da árvore de acessibilidade e o anúncio nunca sairia. Recopiar as seis linhas aqui seria a cópia que o §6 do contrato manda promover. */ /* ========================================================================== PALCO ========================================================================== */ .perf-palco{ position:relative; min-height:var(--perf-palco-min); } /* fieldset traz border, padding e margin da folha do navegador, e um min-inline-size:min-content que estoura a coluna em tela estreita quando uma resposta longa não quebra. Os quatro zeros são obrigatórios. */ .perf-passo{border:0;margin:0;padding:var(--perf-topo) 0 0;min-inline-size:0} /* legend é o enunciado, e recebe o foco na troca de passo (tabindex="-1" no markup). Sem display:block ela é tratada como caixa especial da borda do fieldset e se recusa a virar bloco de largura cheia. width:fit-content não é capricho: é o que faz o anel de foco do core abraçar a PERGUNTA. Em largura cheia o anel saía com os 1096px da coluna em volta de um texto de 660px — quem chega de teclado via um retângulo solto, não o enunciado marcado. */ .perf-legenda{display:block;float:none;width:fit-content;max-width:100%;padding:0;margin:0} /* A medida da pergunta em em, e não em ch nem px: presa ao corpo da letra, ela desenha SEMPRE as mesmas ~3 linhas, com qualquer display do tema e em qualquer largura de tela. Em ch a conta sairia errada — ch lê o corpo do elemento, e a medida que importa é a da mancha. */ .perf-pergunta{display:block;max-width:11.5em} /* -------------------------------------------------------------- respostas */ /* font-size aqui, e não só nas respostas: é ele que faz o max-width em em valer o corpo da RESPOSTA. Sem isso a medida sairia calculada no corpo do texto herdado (17px) e a lista ficaria com pouco mais da metade da largura pretendida — medido: 385px onde se queria 625px. */ .perf-ops{ margin-top:clamp(26px,4vh,46px); font-size:var(--perf-op-fs); max-width:25em; } /* A resposta inteira é o