/* ============================================================ AMOSTRA PREMIUM · folha sobreposta à main.css Só vale em .pv. Nada aqui toca o site publicado. A auditoria mediu o que faltava: 89% das seções sem nenhum elemento visual, 78% com o mesmo respiro, o acento em 0,85% dos elementos de texto, dois moldes de seção no site inteiro e 42% da janela vazia à direita do hero em dezesseis páginas. O vocabulário é fio e chave: traço de 2px que separa, agrupa ou conduz, sempre em navy, com o laranja reservado ao que marca começo de assunto e ao que aponta resultado. A primeira versão desta folha dizia que o sistema vinha do símbolo da marca, "três triângulos que estreitam". Os triângulos do arquivo são azuis (#4AA0CF, #4AA4CF, #2A95C6) e a forma que estreita não sobreviveu a nenhum dos blocos: o bloco da leitura virou camada, não funil. A frase ficou de pé sozinha por duas rodadas. Corrigida. ============================================================ */ .pv{ /* ---- escala tipográfica ---- A do site tem cinco tamanhos dentro de 3px (14, 15, 15,5, 16 e 17), degraus de 1,03 a 1,12 que o olho não distingue, e cobrem 47% do texto. Aqui são sete tamanhos, nenhum degrau abaixo de 1,15, medido nas quatro larguras: 14, 17, 21, 33, 52, 68 e 84 em 1440px. Não é razão única. São dois trilhos, o de texto (14, 17, 21) e o de display (33, 52, 84), com o número em 68 entre eles. A primeira versão desta folha dizia razão 1,25 constante e a medição desmentiu: ficou registrado porque o erro foi meu. */ --t1:clamp(40px,6.4vw,84px); /* frase da marca, degrau próprio */ --t2:clamp(30px,3.9vw,52px); /* abertura de seção */ --t3:clamp(25px,2.6vw,33px); /* título de bloco */ --t4:21px; /* subtítulo e citação curta */ --t6:17px; /* corpo */ --t7:14px; /* rótulo, nota e botão: um degrau só */ /* O número da faixa "A casa" não é um degrau próprio, e não pode ser. Ele valia clamp(40px,5.2vw,68px), que tem o mesmo piso do --t1 e um coeficiente menor: entre 620 e 720px de janela o h1 subia e o número ficava parado no piso, e os dois chegavam a 1,025 de razão. Oito larguras da home e da amostra reprovavam por causa disso. Não há conserto por ajuste de piso. O --t1 começa em 40 e o --t2 em 30: são 1,33 entre eles, e um terceiro valor no meio precisaria ficar entre 34,5 e 34,8 para guardar 1,15 dos dois lados. A janela é de três décimos de pixel, ou seja, não existe. Um número de display aqui só pode ser um dos degraus que já existem, e o --t2 é o que tem o porte certo: 52px no desktop em vez de 68, o que também tira do número a disputa de presença com o h1 da abertura. */ --num:var(--t2); --f-ui:14px; /* botão e link de apoio, no mesmo degrau */ /* ---- ritmo em três níveis ---- No site são dois pares para 78% das seções. Abertura de assunto, desenvolvimento e nota não podem respirar igual. */ --r-abre:clamp(72px,9vw,136px); --r-meio:clamp(56px,6.5vw,96px); --r-nota:clamp(40px,4vw,56px); --pv-linha:#7E90A0; --pv-fundo:#F7F9FA; } /* ---------- régua de progresso ---------- Numa página de seis mil pixels, nada no site responde à rolagem além de um fade repetido. Esta régua é CSS puro, ancorada na rolagem do documento, e some para quem pediu menos movimento. */ .pv-regua{display:none;position:fixed;inset:0 auto auto 0;z-index:61;height:3px;width:100%; pointer-events:none;transform-origin:0 50%;transform:scaleX(0); background:linear-gradient(90deg,var(--navy),var(--terra))} @supports (animation-timeline: scroll()){ @media (prefers-reduced-motion: no-preference){ .pv-regua{display:block;animation:pv-avanca linear both;animation-timeline:scroll(root)} } } @keyframes pv-avanca{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* ---------- marcador de seção ---------- Um sinal de 10px abre cada assunto. É o acento por estrutura, e não por enfeite: são oito ocorrências numa página, e com elas a contagem de elementos com a cor quente passou de 12 na home para 23 aqui. Medido, não estimado. */ .pv .olho{display:flex;align-items:center;gap:10px; font:600 var(--t7)/1 var(--ui);letter-spacing:.12em;text-transform:uppercase; color:var(--terra)} .pv .olho::before{content:"";width:0;height:0;flex:none; border:5px solid transparent;border-top:9px solid var(--terra);margin-top:-4px} .pv section{padding:var(--r-meio) 0} .pv section.abre{padding:var(--r-abre) 0} .pv section.nota{padding:var(--r-nota) 0} .pv h2{font-size:var(--t2);letter-spacing:-.02em;line-height:1.08;max-width:18ch} .pv h3{font-size:var(--t3);line-height:1.18} /* Os títulos da coluna de canais da página de contato são rótulos de 12px, e são h2 porque nomeiam blocos independentes. O .pv h2 tem especificidade maior que o .canal-t e os levaria a 52px, desmontando a coluna. Aqui eles ficam com o corpo de rótulo da folha nova, sem deixar de ser título. */ .pv .canal-t{font-size:var(--t7);letter-spacing:.14em;color:var(--mute); max-width:none;line-height:1.3} /* ---- os blocos da folha antiga dentro de uma página nova ---- A página de contato é a única que mistura as duas folhas: o formulário e a coluna de canais continuam sendo da folha principal, e o resto é novo. As duas escalas convivem, e os degraus de uma se metem entre os da outra: o nome do sócio na lista de WhatsApp usava o --f4 da folha antiga, que a 900px resolve para 23, e a legenda da folha nova está em 21. Um degrau de 1,095, contra a meta de 1,15, em quarenta larguras. O --t6 é o mesmo corpo que o .pv-seguir usa para o nome de um destino, que é exatamente o papel dele aqui. */ .pv .socios-wa b{font-size:var(--t6)} /* O teto de medida da folha principal é escrito para "main > section", e numa página nova as seções são netas do main, dentro do div.pv. Os blocos da folha nova têm teto próprio e não sentem falta; a coluna de canais, não, e o parágrafo dela ia a 136 caracteres por linha entre 660 e 980, quando a grade do contato vira uma coluna só. */ .pv .canal p{max-width:var(--medida)} /* O título de cada artigo na lista é h2 e é título de item, não de seção. O .pv h2 o levaria a 52px. O --t3 é o corpo que a folha nova usa para título de bloco, que é o papel dele. */ .pv .lista-art h2{font-size:var(--t3);max-width:30ch;line-height:1.18} .pv .cap{margin-top:var(--s3);font-size:var(--t4);max-width:62ch;color:var(--body)} /* ============================================================ 1 · ABERTURA O hero atual termina em x=593 e o parágrafo em x=839, o mesmo número em dezesseis páginas, deixando 42% da janela em branco à direita. Aqui a frase da marca ocupa a largura toda e a coluna da direita recebe as quatro camadas da leitura. Sobra à direita medida nesta página: zero, nas nove seções. ============================================================ */ .pv section.pv-abertura{padding:var(--s5) 0 var(--r-meio)} .pv-abertura{position:relative;overflow:hidden} .pv-abertura h1{font-size:var(--t1);line-height:1.02;letter-spacing:-.028em; max-width:none;font-weight:500} .pv-abertura h1 em{font-style:normal;color:var(--terra)} .pv-duo{margin-top:var(--s7);display:grid;gap:var(--s7) var(--s9); grid-template-columns:minmax(0,1fr) minmax(0,420px);align-items:center} /* A linha de apoio do cabeçalho vale para as duas formas de abertura: a da home, que tem coluna à direita, e a das competências, que não tem. Presa ao .pv-duo, ela ficava de fora nas cinco competências e herdava 16px da folha principal, que reintroduzia dois degraus abaixo de 1,15 na escala, e corria a largura inteira: 130 caracteres por linha em Liderança. */ /* 620, e não 680: a 21px o teto antigo dava 72 caracteres por linha nas aberturas sem duo, que são as das páginas de serviço. Nas que têm duo a coluna já era mais estreita que isso e o teto nunca encostava, e foi por isso que a medição das cinco páginas de competência não acusou nada. */ .pv-abertura .sup{font-size:var(--t4);line-height:1.5;color:var(--ink);max-width:620px} .pv-duo .sup{max-width:40ch} .pv-duo .acts{margin-top:var(--s5);display:flex;gap:var(--s2);flex-wrap:wrap} /* ---------- a leitura, em camadas ---------- Duas versões erradas antes desta, e vale registrar as duas. A primeira era um cartão: borda nos quatro lados, quatro linhas de fundo cinza com barra de acento à esquerda, altura de 40px e padding de item. Isso é o desenho canônico de linha selecionável, e tirar o hover removeu a confirmação sem remover a promessa. A segunda pôs o rótulo à esquerda e um fio à direita, na mesma linha. Isso é leader de sumário, e abaixo de 520px, com o fio sob o rótulo, é a underline de campo de texto. Trocou uma falsa promessa por outra. Os fios ainda ficavam a 2,11:1 contra branco, abaixo do mínimo de 3:1 para elemento não textual. E as duas contradiziam a própria frase do site. A Analítica lê as pessoas, a gestão, a estrutura e o risco trabalhista "ao mesmo tempo". Isso não é funil, é camada. A chave que abraça as quatro diz simultaneidade, é anotação de desenho e não controle de interface, e como não depende de proporção nenhuma, não muda de sentido entre 320 e 1440. */ .pv-leitura{border-top:2px solid var(--navy);padding-top:var(--s3)} .pv-leitura .tit{font:600 var(--t7)/1.3 var(--ui);letter-spacing:.12em; text-transform:uppercase;color:var(--mute)} .pv-chave{position:relative;margin-top:var(--s3);padding-left:var(--s4)} .pv-chave::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:var(--navy)} .pv-entra{list-style:none;position:relative} .pv-entra::before,.pv-entra::after{content:"";position:absolute;left:calc(-1 * var(--s4)); width:var(--s2);height:2px;background:var(--navy)} .pv-entra::before{top:0} .pv-entra::after{bottom:0} .pv-entra li{font:400 var(--t6)/1.4 var(--txt);color:var(--ink);padding:6px 0} .pv-entra li:first-child{padding-top:0} .pv-entra li:last-child{padding-bottom:0} .pv-saida{position:relative;margin-top:0;padding:var(--s3) 0 0 var(--s4); font:600 var(--t6)/1.4 var(--txt);color:var(--navy);max-width:22rem} .pv-saida::before{content:"";position:absolute;left:0;top:0;width:2px;height:var(--s3); background:var(--terra)} .pv-saida::after{content:"";position:absolute;left:0;top:var(--s3);width:var(--s2); height:2px;background:var(--terra)} /* ============================================================ 2 · O MÉTODO, DESENHADO O texto de hoje diz lê, separa, decide e executa dentro de um parágrafo corrido. É a coisa mais importante da página e não tem forma nenhuma. Aqui vira desenho, e o traço se constrói enquanto a pessoa rola. ============================================================ */ .pv-metodo{background:var(--navy);color:#DCE8F0} .pv-metodo h2{color:#fff} .pv-metodo .olho{color:var(--terra-cl)} .pv-metodo .olho::before{border-top-color:var(--terra-cl)} .pv-metodo .cap{color:#A9C4D6} .pv-trilha{margin-top:var(--r-nota);display:grid;gap:var(--s5);list-style:none; counter-reset:passo;grid-template-columns:repeat(4,minmax(0,1fr));position:relative} .pv-passo{position:relative;padding-top:var(--s6)} .pv-passo{counter-increment:passo} .pv-passo .n{position:absolute;top:22px;left:0;font:600 var(--t7)/1 var(--ui); letter-spacing:.14em;color:var(--terra)} .pv-metodo .pv-passo .n{color:var(--terra-cl)} .pv-passo .n:empty::before{content:"0" counter(passo)} /* ---- a trilha em fundo claro e em fundo escuro ---- As cores da trilha estavam escritas para a faixa escura, porque foi lá que ela nasceu: h3 branco e parágrafo azul-claro, direto no .pv-passo. Ao levar a trilha para uma seção clara, na página de carreiras, o h3 branco caiu em fundo branco: contraste 1,00, texto invisível, nas quatro etapas e em todas as larguras. O certo é o contrário do que estava: a cor de fundo claro é o padrão, e a faixa escura é que sobrescreve. Assim um bloco levado para onde ainda não esteve não chega invisível. Vale também para o filete que separa as etapas e para o número. */ .pv-passo h3{color:var(--ink);font-size:var(--t3);margin-bottom:10px} .pv-passo p{font-size:var(--t6);line-height:1.5;color:var(--body)} .pv-metodo .pv-passo h3{color:#fff} .pv-metodo .pv-passo p{color:#A9C4D6} .pv-fio{position:absolute;top:0;left:0;width:100%;height:2px;overflow:visible} /* ---- a trilha na vertical ---- A trilha horizontal tem quatro colunas, e A Analítica descreve cinco etapas. Em cinco colunas cada passo ficaria com 180px, onde o texto quebra a cada três palavras; em quatro colunas o quinto passo cairia sozinho numa segunda fileira, com três células vazias ao lado. Na vertical o número fica numa calha à esquerda, o texto ocupa a medida de leitura, e um filete contínuo liga um passo ao outro, que é o que a forma precisa dizer: isto vem depois daquilo. Serve para qualquer trilha de cinco ou mais etapas. */ .pv-trilha.vertical{grid-template-columns:1fr;gap:0;position:relative} .pv-trilha.vertical .pv-fio{display:none} /* O filete é desenhado por passo, de um número ao seguinte, e o último passo não desenha nenhum. Antes era um filete só, do topo ao pé da trilha, e como o último parágrafo é mais alto que o seu número sobrava filete depois do fim: 119px na Analítica, 144 no Plantão e 335 na NR-1, que é um terço da altura do bloco. Por passo, ele termina onde o último número está. */ .pv-trilha.vertical .pv-passo:not(:last-child)::after{content:"";position:absolute; left:19px;width:2px;top:calc(var(--s4) + 26px);bottom:calc(-1 * var(--s4)); background:var(--grid)} .pv-metodo .pv-trilha.vertical .pv-passo:not(:last-child)::after{background:rgba(169,196,214,.32)} /* O traço curto na horizontal é a marca do topo de cada passo. Na vertical o número já faz esse papel, e o traço ficava solto 19px à esquerda do filete e dos números, apontando para nada. */ .pv-trilha.vertical .pv-passo::before{display:none} .pv-trilha.vertical .pv-passo{padding:var(--s4) 0 var(--s4) var(--s7);border:0} .pv-trilha.vertical .pv-passo+.pv-passo{border-top:1px solid var(--pv-linha)} .pv-metodo .pv-trilha.vertical .pv-passo+.pv-passo{border-top-color:rgba(169,196,214,.22)} .pv-trilha.vertical .pv-passo .n{top:calc(var(--s4) + 3px);left:0;width:40px; text-align:center;background:#fff;padding:3px 0} .pv-metodo .pv-trilha.vertical .pv-passo .n{background:var(--navy)} .pv-alt .pv-trilha.vertical .pv-passo .n{background:var(--pv-fundo)} .pv-trilha.vertical .pv-passo h3{margin-bottom:6px} /* ---- a trilha vertical em duas colunas ---- Na primeira versão o título e a descrição ficavam empilhados à esquerda, e o texto, limitado à medida de leitura, ocupava menos de metade da coluna. As réguas entre as etapas, essas, atravessavam a largura inteira: a linha prometia um bloco cheio e o conteúdo parava na metade, deixando 460 por 572px de faixa vazia à direita na Analítica. Com o título numa coluna e a descrição na outra, o bloco ocupa o que a régua desenha. A coluna da descrição fica no teto de medida e a do título absorve o resto, que é a mesma repartição do comparativo. */ @media(min-width:861px){ .pv-trilha.vertical .pv-passo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,480px);column-gap:var(--s6)} .pv-trilha.vertical .pv-passo h3{grid-column:1;margin-bottom:0} .pv-trilha.vertical .pv-passo p{grid-column:2;max-width:none;margin-top:3px} .pv-trilha.vertical .pv-passo .pv-mais{grid-column:2;margin-top:var(--s3)} } .pv-trilha.vertical .pv-passo p{max-width:var(--medida-pv)} @media(max-width:540px){ /* Abaixo de 540 a calha do número sai, e com ela precisa sair o posicionamento absoluto: o número continuava ancorado em left:0 e era impresso por cima do título, o zero em cima da haste do L de "Leitura". Acontecia nos cinco passos da Analítica, nos quatro do Plantão e nos três da NR-1, em todas as larguras de 320 a 520. Em fluxo ele vira uma linha própria acima do título, que é como a trilha horizontal já faz. */ .pv-trilha.vertical .pv-passo{padding-left:0;padding-top:var(--s5)} .pv-trilha.vertical .pv-passo:not(:last-child)::after{display:none} .pv-trilha.vertical .pv-passo .n{position:static;display:block;width:auto; text-align:left;background:none;padding:0;margin-bottom:6px} } /* A caixa existe só para o fio ter a quem se ancorar quando a trilha é um
    : ali dentro o seria HTML inválido. O espaçamento do topo passa para a caixa, senão o fio, ancorado no topo dela, ficaria acima da trilha. */ .pv-trilha-caixa{position:relative;margin-top:var(--r-nota)} .pv-trilha-caixa .pv-trilha{margin-top:0} .pv-passo::before{content:"";position:absolute;top:0;left:0;width:2px;height:13px; background:var(--terra-cl)} .pv-fio .base{stroke:rgba(169,196,214,.65)} .pv-fio .viva{stroke:var(--terra-cl);stroke-dasharray:1000;stroke-dashoffset:0} @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .pv-fio .viva{stroke-dashoffset:1000;animation:pv-traca linear both; animation-timeline:view();animation-range:cover 12% cover 62%} } } @keyframes pv-traca{to{stroke-dashoffset:0}} /* ============================================================ 3 · O NOME QUE CHEGA E A LEITURA Comparativo lado a lado. Molde de bloco que não existe em nenhuma das 102 seções do site. ============================================================ */ .pv-nomes{display:grid;gap:0;margin-top:var(--r-nota);border-top:1px solid var(--pv-linha)} /* O align-items era center, e com descrição curta isso lia bem. Com descrição longa, não: no Plantão o nome "Limites" ficava 157px abaixo da primeira linha do parágrafo que ele nomeia, e o traço apontava para o meio do texto. Alinhado pelo topo, com o deslocamento que põe o nome e o traço na altura ótica da primeira linha, funciona nos dois casos. */ .pv-par{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1.25fr); align-items:start;gap:var(--s3);padding:var(--s4) 0; border-bottom:1px solid var(--pv-linha)} .pv-par .chega{font:400 var(--t4)/1.35 var(--tit);color:var(--ink)} /* No lugar do triângulo, um fio. Ele diz "vira" sem parecer botão, e tira quatro triângulos laranja de uma página que já tem o marcador de seção em nove lugares. */ /* O traço era um no HTML. Dentro de um
    ele ficava irmão do
    e do
    , e o modelo de conteúdo do
    só admite o par dt/dd dentro do
    . Os navegadores aceitavam, mas eram 58 elementos inválidos no site, e o traço é decoração pura. Desenhado aqui, some do HTML e a lista de definição volta a ser válida. As colunas ficam explícitas porque o pseudo-elemento entra na grade como primeiro filho, e sem elas o nome e a descrição andariam uma casa. */ .pv-par::before{content:"";grid-column:2;justify-self:stretch;align-self:start; margin-top:15px;height:1px;width:100%;background:var(--mute)} .pv-par > .chega{grid-column:1} /* A folha principal põe todo svg em display:block, o que é certo para imagem e errado para uma seta no meio de uma frase: no hub das competências ela caía sozinha na linha seguinte, encostada na margem esquerda da coluna, longe do nome que ela acompanha. Inline, ela volta a ser pontuação do texto. */ .pv-par .chega .ar{display:inline;vertical-align:-2px;margin-left:8px; transition:transform .2s ease} .pv-par .chega a{color:var(--navy)} .pv-par .chega a:hover,.pv-par .chega a:focus-visible{color:var(--terra)} .pv-par .chega a:hover .ar{transform:translateX(3px)} .pv-par > .le{grid-column:3} .pv-par .le{font-size:var(--t6);line-height:1.55;color:var(--body);max-width:52ch} .pv-par .le b{color:var(--navy);font-weight:700} .pv-rodape-nomes{margin-top:var(--s4);font-size:var(--t7);color:var(--mute);max-width:70ch} /* ============================================================ 4 · NÚMEROS COM PESO Fatos que já estavam no site, em corpo de texto. Em escala, com a régua crescendo ao rolar. ============================================================ */ .pv-numeros{background:var(--pv-fundo)} .pv-grade-num{margin-top:var(--r-nota);display:grid;gap:var(--s6) var(--s5);grid-auto-rows:1fr; grid-template-columns:repeat(4,minmax(0,1fr))} .pv-num{border-top:2px solid #9FB0BE;padding-top:var(--s3);position:relative} .pv-num::before{content:"";position:absolute;top:-2px;left:0;height:2px;width:100%; background:var(--terra);transform-origin:0 50%;transform:scaleX(1)} @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .pv-num::before{transform:scaleX(0);animation:pv-cresce linear both; animation-timeline:view();animation-range:cover 18% cover 58%} } } @keyframes pv-cresce{to{transform:scaleX(1)}} .pv-num .v{display:block;font:200 var(--num)/.92 var(--tit);color:var(--navy); letter-spacing:-.03em;font-variant-numeric:tabular-nums} .pv-num .r{display:block;margin-top:var(--s2);font-size:var(--t6);line-height:1.4; color:var(--body);max-width:22ch} /* ============================================================ 5 · COMPETÊNCIAS Os cinco cartões de hoje viram, no celular, cinco retângulos brancos idênticos empilhados. Aqui ganham número, hierarquia e um estado de hover que faz mais do que trocar a cor. ============================================================ */ .pv-comp{margin-top:var(--r-nota);display:grid;gap:1px;grid-auto-rows:1fr;background:var(--pv-linha); border:1px solid var(--pv-linha);grid-template-columns:repeat(3,minmax(0,1fr))} .pv-cart{background:#fff;padding:var(--s5) var(--s4) var(--s4);position:relative; display:flex;flex-direction:column;min-height:236px; transition:background .2s ease,transform .2s ease} .pv-cart .n{font:600 var(--t7)/1 var(--ui);letter-spacing:.14em;color:var(--mute); transition:color .2s ease} .pv-cart h3{margin-top:var(--s3);font-size:var(--t3);color:var(--ink); /* "Liderança & Desenvolvimento" vazava 14px para fora da caixa do cartão acima de 1220px. A primeira correção foi hyphens:auto com overflow-wrap de rede de segurança, e o comentário dizia que o hyphens quebraria com hífen. Não quebra: este Chromium não tem dicionário de português, então o hyphens:auto nunca dispara e o que sempre agia era a rede, partindo a palavra sem hífen e deixando um "o" sozinho na terceira linha, em todas as vinte larguras de 1220 a 1600. Agora a quebra é declarada no texto, com hífen suave no competencias.js, e o hyphens:manual é o que honra esse hífen. Sem rede de segurança: se algum dia um nome não couber, ele vaza e aparece na medição, em vez de se partir no meio em silêncio. */ hyphens:manual} .pv-cart p{margin-top:10px;font-size:var(--t6);line-height:1.5;color:var(--body)} .pv-cart .pe{margin-top:auto;padding-top:var(--s4);display:flex;align-items:center; gap:8px;font:600 var(--t7)/1 var(--ui);color:var(--navy)} .pv-cart .ar{transition:transform .2s ease} .pv-cart::after{content:"";position:absolute;inset:auto 0 0 0;height:3px; background:var(--terra);transform-origin:0 50%;transform:scaleX(0); transition:transform .24s ease} .pv-cart:hover{background:var(--pv-fundo)} .pv-cart:hover::after,.pv-cart:focus-visible::after{transform:scaleX(1)} .pv-cart:hover .n{color:var(--terra)} .pv-cart:hover .ar{transform:translateX(5px)} .pv-cart.todas{background:var(--night);color:#D3E2EC} .pv-cart.todas h3{color:#fff} .pv-cart.todas .n,.pv-cart.todas .pe{color:var(--terra-cl)} .pv-cart.todas:hover{background:var(--preto)} /* ============================================================ 6 · QUEM CONDUZ Na home de hoje o retrato mede 320×400 em 1440px, 0,9% da área útil, e é menor no desktop do que no tablet. Aqui ele tem o tamanho de quem assina o trabalho. ============================================================ */ .pv-socios{margin-top:var(--r-nota);display:grid;gap:var(--s9); grid-template-columns:repeat(2,minmax(0,1fr))} .pv-socio figure{position:relative} .pv-socio img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover; filter:grayscale(.15) contrast(1.02)} .pv-socio figure::after{content:"";position:absolute;left:0;bottom:0; width:var(--s9);height:4px;background:var(--terra)} .pv-socio h3{margin-top:var(--s4);font-size:var(--t3);color:var(--ink)} .pv-socio .fn{margin-top:8px;font:600 var(--t7)/1.45 var(--ui);color:var(--terra); letter-spacing:.01em} .pv-socio .bio{margin-top:var(--s3);font-size:var(--t6);line-height:1.6;max-width:44ch} .pv-socio .cred{margin-top:var(--s3);list-style:none;display:grid;gap:8px; border-top:1px solid var(--pv-linha);padding-top:var(--s3)} .pv-socio .cred li{font-size:var(--t7);line-height:1.5;color:var(--mute); padding-left:var(--s2);position:relative} .pv-socio .cred li::before{content:"";position:absolute;left:0;top:.55em; width:6px;height:6px;background:var(--grid)} /* ============================================================ 7 · PROVA Depoimento em corpo de leitura, com a marca de quem assina ao lado. Amarra o depoimento à faixa de clientes, que hoje vivem em seções separadas sem relação visual. ============================================================ */ .pv-prova{background:var(--navy);color:#DCE8F0} .pv-prova h2{color:#fff} .pv-prova .olho{color:var(--terra-cl)} .pv-prova .olho::before{border-top-color:var(--terra-cl)} .pv-vozes{margin-top:var(--r-nota);display:grid;gap:var(--s9); grid-template-columns:repeat(2,minmax(0,1fr))} .pv-voz blockquote{font:300 var(--t3)/1.36 var(--tit);color:#fff; letter-spacing:-.01em;position:relative;padding-top:var(--s5)} .pv-voz blockquote::before{content:"";position:absolute;top:0;left:0; width:40px;height:3px;background:var(--terra-cl)} .pv-voz figcaption{margin-top:var(--s4);padding-top:var(--s3); border-top:1px solid rgba(169,196,214,.3); display:flex;align-items:center;gap:var(--s3); font-size:var(--t7);color:#A9C4D6} .pv-voz figcaption b{display:block;color:#fff;font-size:var(--t6)} .pv-voz figcaption img{height:34px;width:auto;max-width:112px; filter:brightness(0) invert(1);opacity:.7} /* ============================================================ 8 · FECHO ============================================================ */ .pv-fim{position:relative;background:var(--pv-fundo);overflow:hidden} .pv-fim h2{max-width:20ch} .pv-fim .cap{max-width:58ch} .pv-fim .acts{margin-top:var(--s6);display:flex;gap:var(--s2);flex-wrap:wrap} .pv-fim .glifo{position:absolute;right:var(--s4);bottom:var(--s5);width:160px; height:auto;opacity:.10;pointer-events:none;z-index:0} .pv-fim .wrap{position:relative;z-index:1} /* ============================================================ RESPOSTA A TELAS MENORES A auditoria mediu que, em 390px, 78% das seções ficam com o mesmo respiro e toda grade vira uma coluna de retângulos iguais. Aqui o ritmo continua em três níveis, o funil e a trilha mudam de eixo em vez de empilhar iguais, e o desenho do método continua existindo. ============================================================ */ @media(max-width:1000px){ .pv-duo{grid-template-columns:1fr} /* A chave acompanha o ponto em que o duo empilha, e não um ponto próprio. Com o duo empilhado a chave fica com a largura inteira: em coluna única isso dava um bloco alto com um vazio grande à direita na home, e na página da Analítica levava o item mais longo a 75 caracteres por linha. A cinta continua certa em duas colunas, porque o filete acompanha a altura do .pv-chave e os cotovelos ficam no topo e no pé da lista. A regra viveu vinte pixels no @media de 980 e deixou a faixa de 981 a 1000 sem tratamento. Ponto de quebra de bloco que depende de outro se escreve no mesmo lugar que o outro. */ .pv-entra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s5)} .pv-entra li:nth-child(2){padding-top:0} .pv-entra li:nth-last-child(2){padding-bottom:0} .pv-trilha{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s5)} /* A vertical não vira duas colunas: ela é vertical em qualquer largura. */ .pv-trilha.vertical{grid-template-columns:1fr;gap:0} .pv-fio{display:none} .pv-passo{border-top:2px solid var(--pv-linha);padding-top:var(--s5)} .pv-metodo .pv-passo{border-top-color:rgba(169,196,214,.65)} .pv-passo::before{height:11px} .pv-grade-num{grid-template-columns:repeat(2,minmax(0,1fr))} .pv-comp{grid-template-columns:repeat(2,minmax(0,1fr))} .pv-socios{gap:var(--s7)} } @media(max-width:760px){ .pv-abertura h1{max-width:none} /* As tres linhas do .pv-par que ficavam aqui estao mortas desde que a "reposicao das quebras", no fim do arquivo, passou a refazer o mesmo comportamento com regra mais forte ou mais tarde. Foram removidas para nao haver dois lugares dizendo a mesma coisa, um deles sem efeito. */ .pv-comp{grid-template-columns:1fr} /* Em coluna unica o grid-auto-rows:1fr ainda igualava todos os cartoes pela altura do mais alto, e sobravam de 100 a 120px de vazio entre o paragrafo e o "Ver a competencia" em tres dos seis. Empilhado, cada cartao tem a altura do que ele contem. */ .pv-comp{grid-auto-rows:auto} .pv-cart{min-height:0} .pv-cart:nth-child(odd){background:var(--pv-fundo)} .pv-cart.todas{background:var(--night)} .pv-socios{grid-template-columns:1fr} .pv-vozes{grid-template-columns:1fr;gap:var(--s7)} .pv-trilha{grid-template-columns:1fr;gap:var(--s5)} .pv-trilha.vertical{gap:0} .pv-fim .glifo{width:110px;right:var(--s2);bottom:var(--s3)} } @media(max-width:520px){ .pv-grade-num{grid-template-columns:1fr;gap:var(--s5)} .pv-num .r{max-width:none} } /* ---------- faixa de marcas ---------- A esteira ficou dentro da seção navy de prova e os logotipos viraram silhuetas brancas a 4,64:1: Teclub borrava, Natubelly sumia, Orbis engolia o próprio nome. Numa faixa cujo trabalho é reconhecimento de marca, isso é o contrário do que ela serve para fazer. Agora tem banda própria, clara, logo abaixo da prova, com a tinta original. */ .pv-marcas{background:#fff;border-top:1px solid var(--pv-linha)} .pv-marcas .esteira{margin-top:var(--s5)} /* ---------- o texto nunca depende de rolagem para existir ---------- A entrada ao rolar da folha principal usa animation-timeline:view() em main section .wrap > *. Numa captura de página inteira, numa pré-visualização de link compartilhado ou em qualquer leitura que não role, a animação nunca entra no intervalo e o conteúdo fica em opacidade zero: a auditoria mediu cerca de 1.200px em branco na home por causa disso, e aqui isso apagava uma seção inteira. Nesta amostra o texto está sempre visível, e o movimento fica por conta dos traços, das réguas e dos estados de hover. */ .pv section .wrap > *:not(#jamais), .pv .pv-comp > *:not(#jamais), .pv .pv-socios > *:not(#jamais), .pv .pv-vozes > *:not(#jamais), .pv .pv-grade-num > *:not(#jamais), .pv .pv-trilha > *:not(#jamais){animation:none;opacity:1;transform:none} /* ---------- cabeçalho de seção em duas colunas ---------- O hero do site termina em x=839 de 1440 e deixa 42% da janela em branco à direita, o mesmo número em dezesseis páginas. Onde a seção tem título e linha de apoio, os dois dividem a largura em vez de empilhar à esquerda. */ /* Uma única regra decide a quebra do cabeçalho, e ela mora aqui. Já esteve em três lugares com valores diferentes, e a última versão, escrita para a página de serviço, ganhava por especificidade e derrubava a da home: entre 761 e 860px o h2 de 30px rodava numa coluna de 195px, cinco linhas, com o marcador de seção quebrado em duas. O ponto de quebra sai de uma conta, e não de gosto: a coluna da direita é fixa em 430px, então a da esquerda só passa de 400px quando a janela passa de 980. Abaixo disso o cabeçalho empilha. */ /* Alinhado pelo topo, e não pela base. Com a linha de apoio curta, como na home, os dois alinhamentos dão quase no mesmo. Com ela longa, como na leitura das competências, que tem 477 caracteres e nove linhas, o align-items:end empurrava o título para o pé da faixa e abria um vazio grande no alto à esquerda. */ .pv-cabeca{display:grid;gap:var(--s4) var(--s9);align-items:start; grid-template-columns:minmax(0,1.05fr) minmax(0,430px)} .pv-cabeca .cap{margin-top:0} /* Entre 761 e 980 o cabeçalho empilhava, e empilhado ele abria um buraco. A conta acima vale para a coluna de 430px fixos: abaixo de 980 a esquerda fica curta demais para um h2 de 30px. Só que empilhar não resolvia, porque o que empilha continua com teto: o h2 para em 510px e a linha de apoio para na medida, 493. Numa faixa de 916px de conteúdo, que é a de 980, sobravam 396px de fundo marinho vazio ao lado de um bloco de 560px de altura. São 222 mil pixels quadrados de nada, nas cinco páginas de competência, no contato e na privacidade, e a captura mostra buraco, não margem. Nesta faixa as duas colunas voltam, com larguras iguais e vão menor: a 900 dão 394 de cada lado, largura de sobra para a linha de apoio a 17px e para o h2 em quatro linhas. Abaixo de 761 o empilhamento é o certo, e lá ele não abre buraco: a 760 sobram 186px, dentro do teto de 200. */ @media(min-width:761px) and (max-width:980px){ .pv-cabeca{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4) var(--s6); align-items:start} .pv-cabeca .cap{margin-top:0;max-width:none} } @media(max-width:760px){ .pv-cabeca{grid-template-columns:1fr;align-items:start;gap:var(--s3)} .pv-cabeca .cap{margin-top:0} } @media(max-width:520px){ .pv-entra{grid-template-columns:1fr} .pv-entra li:nth-child(2){padding-top:6px} .pv-entra li:nth-last-child(2){padding-bottom:6px} } /* o par do comparativo encontra a seta no meio, em vez de deixar um vão */ .pv-par{grid-template-columns:minmax(0,1fr) 28px minmax(0,1.3fr)} .pv-par .chega{text-align:right} @media(max-width:760px){ .pv-par .chega{text-align:left} } /* As duas citações têm comprimentos diferentes, e a assinatura desce até a base para as duas ficarem na mesma linha. O flex-direction sozinho não faz isso: a auditoria mediu 134px de diferença entre as duas assinaturas em 1440, com o comentário aqui afirmando que elas estavam alinhadas. Quem empurra é o margin-top:auto da figcaption. */ .pv-voz{display:flex;flex-direction:column} .pv-voz figcaption{margin-top:auto} /* o fecho é claro, e o botão de WhatsApp da folha principal é desenhado para fundo escuro: em branco sobre branco ele desaparece */ .pv-fim .btn-w{border:1.5px solid var(--navy);color:var(--navy)} .pv-fim .btn-w:hover{background:rgba(15,60,92,.06);border-color:var(--navy)} /* ---------- reposição das quebras ---------- As regras acima foram acrescentadas depois dos @media e passaram a vencer por ordem de cascata: o comparativo continuava em três colunas no celular. Estas repõem o comportamento estreito, e ficam por último de propósito. */ @media(max-width:760px){ .pv-par{grid-template-columns:1fr;gap:6px;padding:var(--s3) 0} .pv-par .chega{text-align:left} /* Nada de rotate aqui. O fio tem width:100% e height:1px: girado, ele virava uma linha vertical da altura da coluna inteira, quatro delas empilhadas atravessando dez blocos de texto e cortando palavras ao meio, com 130px vazando para a seção seguinte em 760px. Empilhado, um traço curto já diz "vira". */ .pv-par::before{justify-self:start;width:28px;margin:2px 0} .pv-par > .chega,.pv-par > .le{grid-column:1} } /* ---------- medida de linha nos corpos pequenos ---------- Medido: a nota do comparativo corria 487px de largura a 12px, dando 96 caracteres por linha, e a credencial do sócio 82. Em corpo pequeno a linha longa cansa mais, não menos. 360px devolve os dois para a faixa dos 70. */ .pv .pv-rodape-nomes{max-width:360px} .pv .pv-socio .cred li{max-width:360px} /* ============================================================ CORREÇÕES DA AUDITORIA Medidas antes de a amostra ser mostrada. Cada uma tem o número que a motivou. ============================================================ */ /* O parágrafo do cartão escuro saía em --body sobre #08283F: 2,37:1, ilegível. A regra .pv-cart p vinha antes e tinha a mesma força, então a herança do cartão nunca chegava nele. */ .pv .pv-cart.todas p{color:#BFD3E0} /* Medida de linha: em 760px a grade vira uma coluna e estes dois ficavam sem teto, dando 94 e 85 caracteres por linha. O ch mede o zero, que na Lato é mais largo que a média, e 62ch entregava 81 caracteres reais. Em pixel o número é o que se vê. */ .pv .pv-passo p{max-width:420px} /* 480, e não os 520 do .cap: o teto aqui está em pixel, e em pixel o mesmo número vale contagens diferentes conforme o corpo do texto. O .cap corre a 21px e cabe 62 caracteres em 520; este parágrafo corre a 17px e cabia 74 no mesmo espaço. Cada teto em pixel precisa ser conferido no corpo em que ele é usado. */ .pv .pv-trilha.vertical .pv-passo p{max-width:480px} .pv .pv-cart p{max-width:430px} .pv .cap{max-width:520px} .pv .pv-par .le{max-width:460px} /* Paridade de estado: quem navega por teclado recebia menos que quem usa mouse, porque só o ::after tinha :focus-visible. */ .pv .pv-cart:focus-visible{background:var(--pv-fundo);outline:2px solid var(--terra); outline-offset:-2px} .pv .pv-cart:focus-visible .n{color:var(--terra)} .pv .pv-cart:focus-visible .ar{transform:translateX(5px)} /* O glifo do fecho renderizava 220×300 contra a proporção 1,133 do arquivo, 35% de erro, porque o atributo height continuava valendo. */ .pv-fim .glifo{height:auto} /* As duas biografias têm cargos de uma e de duas linhas, e os filetes de credencial saíam desencontrados em 7px. */ .pv-socio .fn{min-height:2.9em} @media(max-width:760px){ .pv-socio .fn{min-height:0} } /* A linha de função voltou a trazer "Sócia-fundadora" e "Sócio-fundador", e com eles passou de 76 caracteres. Entre 640 e 760px os retratos empilham, a linha ganha a largura inteira e ia a 92 caracteres numa só linha. É rótulo, e não prosa, mas 92 caracteres de uma ponta a outra da tela se leem mal do mesmo jeito: o teto obriga a quebrar em duas. */ .pv-socio .fn{max-width:34em} /* ============================================================ SEGUNDA RODADA · o que o Leo apontou olhando a página ============================================================ */ /* O triângulo laranja ficou só onde não tem como confundir com botão: no marcador que abre cada seção e na saída do funil. O comparativo e a citação passaram a usar fio. De dezesseis triângulos a página foi para dez, e nenhum deles muda de estado com o mouse em cima. */ /* Espaços medidos e corrigidos: abertura fechava com 127px embaixo contra 40 em cima, 87px de diferença; competências com 163 contra 130; o fecho tinha vão negativo de 80px porque o glifo furava a base. Os três vinham de margem somada a padding, sem ninguém ter decidido o total. */ .pv-abertura .pv-duo{margin-top:var(--s6)} .pv section.pv-abertura{padding-bottom:var(--r-nota)} .pv .pv-comp{margin-bottom:0} .pv section.abre:has(.pv-comp){padding-bottom:var(--r-abre)} /* Os saltos entre irmãos dentro do wrap eram 32, 40, 48 e 56. Quatro valores para a mesma função. Ficam dois, 32 e 48, que é a grade de 8. */ /* A linha .pv .cap{margin-top} que estava aqui tinha a mesma força que .pv-cabeca .cap{margin-top:0} e vinha depois: ressuscitava os 24px que aquela regra existe para zerar, e o vão do cabeçalho empilhado ia a 56px com row-gap declarado em 32. Saiu. */ /* Em coluna única o nivelamento por linha não tem função: sobrava 23,8px de branco no pé de três dos quatro números. */ @media(max-width:520px){ .pv-grade-num{grid-auto-rows:auto} } /* No celular os botões ocupam a largura toda até a base, e o glifo passava por trás deles. Numa tela de 390px ele não acrescenta nada que pague isso. */ @media(max-width:520px){ .pv-fim .glifo{display:none} } /* ============================================================ TESTE DE SISTEMA · página de serviço Departamento Pessoal tinha doze títulos em seis seções, e era isso que fazia a página ler como pilha de caixas rotuladas. A regra que saiu deste teste, e que vale para o site inteiro: o marcador de seção só aparece quando o h2 é editorial e precisa que alguém diga a categoria. Quando o h2 já é o rótulo ("Dois modelos, a mesma conferência"), o marcador repetiria a informação, e some. ============================================================ */ /* Os quatro passos da leitura, aqui, são perguntas em ordem, e não movimentos com nome. O número carrega a sequência e o microtítulo deixa de existir. */ .pv-metodo .pv-passo p:only-of-type{margin-top:var(--s1)} /* ---------- a declaração ---------- O que muda para a direção era um h3 com parágrafo dentro de uma grade de duas colunas. É a frase que a página inteira existe para dizer, e estava do mesmo tamanho de tudo. */ .pv-entrega{background:var(--pv-fundo)} .pv-declara{margin-top:var(--r-nota);padding-left:var(--s5);position:relative; font:300 var(--t3)/1.35 var(--tit);color:var(--ink);max-width:34rem; letter-spacing:-.01em} .pv-declara::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:3px; background:var(--terra)} /* ---------- quem conduz e para onde seguir ---------- Eram duas seções com um rótulo cada. Viraram duas colunas sob um título só. */ .pv-conduz{margin-top:var(--r-nota);display:grid;gap:var(--s7) var(--s9); grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:start} .pv-quem img{width:120px;height:120px;border-radius:0;object-fit:cover} .pv-quem p{margin-top:var(--s3);font-size:var(--t6);line-height:1.55;color:var(--body)} .pv-quem .lnk-int{color:var(--navy);font-weight:700;white-space:nowrap} .pv-seguir{list-style:none;display:grid;gap:0;border-top:1px solid var(--pv-linha)} .pv-seguir li{border-bottom:1px solid var(--pv-linha)} .pv-seguir a{display:block;padding:var(--s3) 0;transition:padding-left .18s ease} .pv-seguir a:hover,.pv-seguir a:focus-visible{padding-left:var(--s2)} .pv-seguir b{display:flex;align-items:center;gap:10px;font:600 var(--t6)/1.3 var(--txt); color:var(--navy)} .pv-seguir a:hover b,.pv-seguir a:focus-visible b{color:var(--terra)} .pv-seguir span{display:block;margin-top:5px;font-size:var(--t7);color:var(--mute); max-width:var(--medida)} .pv-seguir .ar{transition:transform .18s ease} .pv-seguir a:hover .ar,.pv-seguir a:focus-visible .ar{transform:translateX(4px)} /* o link de volta no topo da página de serviço */ .pv-abertura .volta{display:inline-block;margin-bottom:var(--s3); font:600 var(--t7)/1 var(--ui);letter-spacing:.06em;color:var(--mute)} .pv-abertura .volta:hover,.pv-abertura .volta:focus-visible{color:var(--terra)} @media(max-width:760px){ .pv-conduz{grid-template-columns:1fr;gap:var(--s6)} .pv-quem img{width:88px;height:88px} .pv-declara{padding-left:var(--s4)} } /* O retrato de quem conduz mede 120px na tela e estava em lazy. Numa captura de página inteira ele não chega a carregar, e é a mesma classe de defeito que deixou onze marcas fora da esteira: carregamento sob demanda para uma imagem de 18KB que a página inteira espera ver. */ .pv-quem picture{display:block;width:120px} @media(max-width:760px){ .pv-quem picture{width:88px} } /* Três medições da página de serviço, corrigidas: O .lnk-int herdava 16px da folha principal e reintroduzia um degrau de 1,06 na escala, que é o defeito que esta folha existe para não repetir. O parágrafo de quem conduz corria 696px em 760px de tela, 73 caracteres por linha, porque a coluna vira largura cheia e ele não tinha teto. E no fecho havia 401px de vazio à direita em 1000px. A primeira tentativa foi tirar o teto de leitura da linha de apoio quando ela empilha, e isso levou o parágrafo a 97 caracteres por linha: troquei um número por outro. A causa era o cabeçalho empilhar cedo demais. Em 1000px cabem duas colunas de 430px, então ele só empilha abaixo de 760. */ .pv .lnk-int{font-size:var(--t7)} .pv .pv-quem p{max-width:420px} /* ---------- vazios medidos na varredura da página renderizada ---------- Procurei retângulos de cor chapada na imagem, e não no DOM, que é como o olho vê. Os três maiores da página de serviço, fora as goteiras de 208px que a grade de 1060 cria de propósito: 704×416px na entrega, à direita da declaração 864×256px em Dois modelos, à direita do h2 solto 912×240px em Quem conduz, entre o retrato e a lista Os dois primeiros eram h2 sem linha de apoio ao lado, e um parágrafo de 34rem numa coluna de 1060. O terceiro era um retrato de 120px dentro de uma coluna de 340. */ .pv-dupla{margin-top:var(--r-nota);display:grid;gap:var(--s5) var(--s9); grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start} /* O max-width era none, e a 25px numa coluna de 796px a declaração batia exatamente 70,00 caracteres por linha: passava na meta por zero. O teto de 640 a põe na casa dos 56 e tira a página da beira. */ .pv-dupla .pv-declara{margin-top:0;max-width:640px} .pv-dupla .cap{max-width:520px;padding-top:var(--s1)} /* O max-width era none. Na coluna estreita do .pv-dupla o teto de 520 quase nunca encosta, mas entre 780 e 860px de janela a coluna abre o suficiente para o parágrafo chegar a 73 caracteres por linha, acima dos 70 da meta. Só nessas cinco larguras, e só nesta página; o 520 é o mesmo teto que todo .cap da folha já usa. */ /* Esta regra fica dentro de um min-width de propósito. Escrita solta no fim do arquivo, ela vencia por ordem de cascata o .pv-conduz{1fr} do @media de 760px, e o celular passou a ter 240px de coluna fixa dentro de 390px de tela: 43px de rolagem horizontal em 390 e 105px em 320. Foi a terceira vez nesta folha que uma regra acrescentada depois dos @media vazou para larguras onde ela não devia existir. */ @media(min-width:761px){ .pv-conduz{grid-template-columns:minmax(0,240px) minmax(0,1fr)} } @media(max-width:860px){ .pv-dupla{grid-template-columns:1fr;gap:var(--s4)} } /* Um h2 que tem linha de apoio ao lado é uma coluna, e 18ch é a medida certa para ele. Um h2 sozinho não é coluna de nada: preso em 18ch, ele quebra em duas linhas e abre um retângulo de 864×288px à direita, que foi o segundo maior vazio da página de serviço. Solto, cabe em uma linha. */ .pv .wrap > h2{max-width:none} /* ---------- o acento por estrutura, e não por acúmulo ---------- Varri a página tela a tela, rolando, e contei os pixels efetivamente pintados de #A85A28 e #E8A472. Na home a primeira tela tinha 12.906px e as telas 3 e 8 tinham cerca de 1.480: oito vezes menos. Quase toda a cor estava no "decisões de negócio" do título. A regra que resolve não é espalhar cor, é dar cor ao elemento que carrega a conclusão de cada bloco. No comparativo é a parte em negrito, que é o que a leitura entrega. No cartão é o número, que ordena as cinco competências. Na grade de números é o filete, que já era terra e só existia depois de rolar. */ .pv .pv-par .le b{color:var(--terra)} .pv .pv-cart .n{color:var(--terra)} /* O cartão escuro tem fundo #08283F, onde o terra dá 3,00:1 e reprova para texto de 14px. A regra acima passou por cima da cor clara que ele já tinha. Quarta vez nesta folha que uma regra acrescentada no fim atropela uma anterior: a cor do acento depende do fundo, e o fundo escuro pede a variante clara. */ .pv .pv-cart.todas .n{color:var(--terra-cl)} .pv .pv-num{border-top-color:var(--terra-cl)} /* Cheguei a levar os botões do fecho para a coluna da direita, para fechar um vazio de 464×368px. Ao recortar a imagem, o vazio estava no rodapé do site, na quarta coluna que só tem um link, e não nesta seção. Revertido: mover os botões só criava um desequilíbrio novo, com 784×256px abaixo do título. O vazio do rodapé é da main.css e vale para as 22 páginas. */ /* Faixa alternada para o segundo grupo de uma competência, que evita duas seções brancas coladas com a mesma estrutura. */ .pv-alt{background:var(--pv-fundo)} .pv-cap-2{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--pv-linha)} /* A declaração fora da entrega precisa do seu próprio respiro acima. */ .pv section > .wrap > .pv-declara{margin-top:var(--r-nota)} /* ---------- correções da auditoria das cinco competências ---------- */ /* O h1 de Liderança media 322px numa tela de 288 e era cortado pelo overflow:hidden da abertura: lia-se "Liderança & Desenvolviment". O teste de rolagem horizontal não pegava, porque o corte não vira rolagem. */ .pv-abertura h1{hyphens:manual} /* Rótulo de campo, no lugar dos h3 que a conversão tirou. Ele nomeia o parágrafo sem entrar na contagem de títulos nem na navegação por heading. */ .pv-rotulo{font:600 var(--t7)/1.3 var(--ui);letter-spacing:.12em; text-transform:uppercase;color:var(--mute);margin-bottom:var(--s2)} .pv-rotulo-2{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--pv-linha)} .pv-dupla .pv-declara{margin-top:0} /* Texto de grupo longo, em corpo de leitura. */ .pv-corpo{margin-top:var(--s4);font-size:var(--t6);line-height:1.65;color:var(--body); /* Era 580px, que no corpo de 17px dá 79 caracteres por linha. O 520 é o mesmo teto do .cap e fica na casa dos 70. */ max-width:520px} /* ---- as duas classes claras dentro da faixa escura ---- O .pv-rotulo e o .pv-corpo foram desenhados para fundo branco: um usa o cinza de rótulo e o outro o azul de corpo. Postos sobre o navy da faixa escura, deram 2,30 e 1,80 de contraste, quando o mínimo é 4,5. Foi a página do Plantão que os levou para lá, ao trazer o bloco de sigilo para a faixa escura, e a medição pegou nas seis larguras de uma vez. As cores aqui são as mesmas que a faixa escura já usa no h3 e no parágrafo da trilha, então não há tom novo no sistema. */ .pv-metodo .pv-rotulo{color:var(--terra-cl)} .pv-metodo .pv-corpo{color:#DCE8F0} .pv-metodo .pv-declara{color:#fff} /* Sem o .pv-dupla no seletor de propósito: uma declaração solta numa faixa escura ficaria com a cor de texto de fundo claro e repetiria o contraste de 1,8 que esta seção existe para ter corrigido. */ /* A lista de definição mantém o desenho do comparativo. */ .pv-nomes dt,.pv-nomes dd{margin:0} /* Paridade de estado no link interno, que ficou de fora quando o resto ganhou. */ .pv .lnk-int:focus-visible{color:var(--terra)} .pv .lnk-int:focus-visible .ar{transform:translateX(5px)} /* O link de volta estava em cinza, caixa alta e sem seta, idêntico ao marcador de seção 60px abaixo. É a única rota de volta ao índice e se disfarçava de categoria. */ .pv-abertura .volta{color:var(--azul);text-transform:none;letter-spacing:0; font:600 var(--t7)/1 var(--txt);text-decoration:underline;text-underline-offset:3px} .pv-abertura .volta:hover,.pv-abertura .volta:focus-visible{color:var(--terra)} /* ============================================================ Peças que a home pediu e a amostra não tinha ============================================================ A amostra de julgamento não era a home: faltavam nela o Plantão, a NR-1, as três formas de atuar e a etiqueta de tecnologia aplicada. Ao trazer tudo de volta, três peças novas ficaram necessárias. */ /* A etiqueta do cartão. Duas das cinco competências têm "Tecnologia aplicada", e uma delas nomeia a Lid Tech. Fica no pé, acima do "Ver a competência", porque é qualificação e não chamada. A primeira versão era uma caixa com borda. "Tecnologia aplicada · Lid Tech" não cabe numa linha na largura do cartão, e a caixa ficava com duas linhas de comprimento desigual e um vão à direita. Sem caixa o texto pode quebrar sem que a quebra vire defeito, e o filete curto acima marca a separação que a borda marcava. */ .pv-cart .pv-tag{margin-top:var(--s3);padding-top:10px;position:relative; font:600 var(--t7)/1.35 var(--ui);letter-spacing:.1em;text-transform:uppercase; color:var(--terra)} /* O text-wrap:balance que estava aqui piorou o caso que devia resolver: em 1440 a etiqueta de três palavras passou de duas linhas para três, e a de duas palavras, que cabia numa, passou a ocupar duas. A quebra se resolve no texto, e não na renderização: "Lid Tech" leva espaço rígido no src/_data/competencias.js, então a única quebra possível é depois do ponto médio, que é onde ela lê bem. */ .pv-cart .pv-tag::before{content:"";position:absolute;top:0;left:0; width:var(--s4);height:1px;background:var(--terra-cl)} .pv-cart .pv-tag+.pe{padding-top:var(--s3)} /* A fileira de dois cartões, para o Plantão e a NR-1. O .pv-comp é de três colunas; com dois cartões sobrava uma célula vazia com a hairline atravessando o nada. */ @media(min-width:761px){ .pv-comp.duas{grid-template-columns:repeat(2,minmax(0,1fr))} } /* O min-width é a trava, não o gosto. Escrita solta, esta linha vinha depois do @media de 760px que põe o .pv-comp em coluna única e vencia por ordem de cascata: no celular de 320px os dois cartões ficavam com 143px cada, e "Psicológico" não cabe em 79px de caixa de texto. Deu 9px de rolagem horizontal na home. É a quinta vez, somando as duas folhas, que uma regra acrescentada depois dos @media vaza para todas as larguras. */ /* O rótulo solto, que substitui um h2. O Plantão e a NR-1 estavam numa faixa escura com título próprio, o que os punha no mesmo nível hierárquico das cinco competências. Eles são destinos de dentro de uma delas: o rótulo diz isso e não entra na contagem de títulos nem na navegação por cabeçalho. */ /* Depois de um comparativo o rótulo não desenha filete próprio: a última linha do comparativo já fecha com um, e os dois juntos deixavam uma faixa vazia de 40 a 56px entre duas réguas paralelas. */ .pv-nomes+.pv-rotulo-solto{border-top:0;padding-top:0;margin-top:var(--s7)} .pv-rotulo-solto{margin-top:var(--r-nota);padding-top:var(--s3); border-top:1px solid var(--pv-linha);color:var(--mute)} .pv-rotulo-solto+.pv-comp{margin-top:var(--s4)} /* O link de continuação no pé de uma seção. Existia como .lnk na folha antiga e não tinha equivalente aqui, e sem ele sumiam "Como trabalhamos, em detalhe" e a rota para a divisão dos sócios. */ .pv-mais{margin-top:var(--s5)} .pv-metodo .pv-mais .lnk-int{color:var(--azul-cl)} /* ---------- o título que fica sozinho em cima de um parágrafo estreito ---------- Duas seções das competências punham um h2 de largura cheia e, logo abaixo, um parágrafo com teto de leitura: o corpo longo de "Conduta e denúncias", em Relações de Trabalho, e a declaração solta de "Dentro dos dois modelos", no Departamento Pessoal. Numa faixa de 1.060px o parágrafo parava em 520 ou 544, e ao lado dele sobrava um retângulo branco de 480 por 350 e de 450 por 700. As capturas mostram buraco: não há nada do outro lado que justifique a parada. A diferença para os vazios que esta página aceita está em ter ou não ter alguma coisa do outro lado. Onde o h2 está numa coluna e o texto na outra, como no .pv-cabeca, o branco abaixo do título é a forma da coluna e o olho lê como coluna. Onde o h2 corre por cima e o texto para no meio, o branco não é coluna de nada. Aqui o h2 desce para a coluna da esquerda e o parágrafo sobe para a direita, que é o arranjo que as outras seções da mesma página já usam. O que vier depois, como o comparativo, continua ocupando a faixa inteira. Abaixo de 981 a coluna da esquerda fica curta demais para um h2 de 33px, e aí vale o empilhamento, que nessa largura já não abre buraco. A largura da coluna da direita sai do corpo em que cada um dos dois corre, e não de um número só para os dois. A primeira versão deste bloco deu 600px para ambos: no .pv-declara, que corre em serifada de 25 a 33px, 600px são cinquenta e poucos caracteres; no .pv-corpo, que corre a 17px, deram 79, e a varredura reprovou a página de Relações de Trabalho a 1000px. É a mesma armadilha do teto em pixel calibrado num tamanho e herdado por outro. */ @media(min-width:981px){ .pv section > .wrap:has(> .pv-corpo), .pv section > .wrap:has(> .pv-declara){ display:grid;column-gap:var(--s7);align-items:start} .pv section > .wrap:has(> .pv-corpo) > *, .pv section > .wrap:has(> .pv-declara) > *{grid-column:1 / -1} .pv section > .wrap:has(> .pv-corpo) > h2, .pv section > .wrap:has(> .pv-declara) > h2{grid-column:1;grid-row:1} .pv section > .wrap:has(> .pv-corpo) > .pv-corpo, .pv section > .wrap:has(> .pv-declara) > .pv-declara{grid-column:2;grid-row:1; margin-top:0} /* 520, que é o teto que o próprio .pv-corpo já carrega para os 17px. */ .pv section > .wrap:has(> .pv-corpo){grid-template-columns:minmax(0,1fr) minmax(0,520px)} /* 600, e o teto de 34rem sai do caminho: a 25px isso dá 55 caracteres. */ .pv section > .wrap:has(> .pv-declara){grid-template-columns:minmax(0,1fr) minmax(0,600px)} .pv section > .wrap:has(> .pv-declara) > .pv-declara{max-width:none} }