/* ========================================================================== FASE 03.3 V3 — AJUSTES DE APLICAÇÃO DO PATCH -------------------------------------------------------------------------- `refino.css` é o `PATCH_REFINO_CENTRALIZACAO.css` do pacote, byte a byte (sha256 5a71bd0b…). NADA ali foi editado. Este arquivo existe para o que o patch não podia prever sem medir a página: cada bloco abaixo diz o que mediu, por que mexeu, e qual item do briefing manda mexer. Regra desta folha: ela só toca em GEOMETRIA. Nenhuma cor, nenhuma imagem, nenhuma arquitetura, nenhum texto. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · CABEÇALHO ENTRE 900 E 1023px — COLISÃO MEDIDA O item 7 do briefing exige, com todas as letras: "logo não colide com menu ou WhatsApp". Medido nesta faixa, com a marca a 108px: 900px → o botão de WhatsApp termina 50px FORA da tela 940px → 10px fora 980px → cabe E medido na V2, com a marca a 88px: em 900px já sobravam 30px para fora. Ou seja, **o transbordo não nasceu no refino — ele já existia na V2** e nunca apareceu porque a bateria testa 768 e 1024, e a navegação de desktop só existe a partir de 900. O refino apenas o alargou. Nesta faixa, então: a marca fica na altura da V2 e as calhas do cabeçalho apertam. De 1024px em diante vale o patch integralmente — lá a medição mostra 40px de folga já com os 108px. -------------------------------------------------------------------------- */ /* A altura do cabeçalho passa a ser uma variável: a marca maior é o que faz a faixa crescer, e é a MESMA medida que o hero precisa recuar para a fotografia continuar colada ao topo (D-080). Com dois números soltos, um deles fica para trás a cada ajuste — foi o que aconteceu na primeira tentativa, e a fotografia apareceu 8px abaixo do topo. */ :root{ --hd-h:72px; } @media (min-width:900px){ :root{ --hd-h:96px; } } @media (min-width:1024px){ :root{ --hd-h:116px; } } .hd__in{ min-height:var(--hd-h); } html{ scroll-padding-top:calc(var(--hd-h) + 12px); } @media (min-width:900px) and (max-width:1023px){ .hd__marca img{ height:88px; margin-top:-3px; } .hd__in{ gap:12px; } .hd__nav{ gap:18px; } .hd__cta{ margin-left:12px; padding:0 16px; } } /* -------------------------------------------------------------------------- 2 · O HERO RECUA EXATAMENTE A ALTURA DO CABEÇALHO D-080 mantém a fotografia colada no topo da tela: o hero sobe a altura da faixa e devolve o mesmo valor em padding. Com a marca maior, essa altura mudou — e agora ela vem da mesma variável, não de um número repetido. -------------------------------------------------------------------------- */ @media (min-width:1000px){ .hero{ margin-top:calc(-1 * var(--hd-h)); padding-top:var(--hd-h); } .hero::before{ height:calc(var(--hd-h) + 28px); } } @media (min-width:1100px){ .srv__h{ top:calc(var(--hd-h) + 22px); } } /* -------------------------------------------------------------------------- 3 · CENTRALIZAÇÃO — O QUE O PATCH CENTRALIZA E A GRADE AINDA EMPURRAVA O patch manda centralizar; alguns blocos são grades de duas ou três colunas, e `text-align` sozinho centraliza o texto DENTRO de uma coluna que continua encostada à esquerda. Aqui as próprias colunas se centram. -------------------------------------------------------------------------- */ /* cabeçalhos de seção: o filete vertical à esquerda é a única coisa que sobrava fora do eixo. Ele passa a ser um traço horizontal sob o bloco, centrado — mesmo dourado, mesma espessura, mesma função de assinatura. */ .sec__h--filete{ padding-left:0; padding-bottom:20px; } .sec__h--filete::before{ left:50%; right:auto; top:auto; bottom:0; width:104px; height:2px; transform:translateX(-50%); } .sec__h--filete::after{ left:50%; right:auto; top:auto; bottom:0; width:34px; height:2px; transform:translateX(-50%); } .sec__h{ max-width:62ch; margin-inline:auto; } /* Serviços mantém a grade canônica — texto à esquerda, três cards à direita (D-073). O patch pede TEXTO centrado, não coluna única, e "não reabrir arquitetura" é item 6 do briefing. O que se centra é o conteúdo dentro de cada coluna. */ /* o medalhão do ícone sai do canto e vai para o eixo do card */ .srv__ico{ left:50%; transform:translateX(-50%); } .srv__b{ padding-top:36px; } @media (min-width:1100px){ .srv__b{ padding-top:38px; } } /* benefícios: ícone acima do texto, os três no mesmo eixo */ .ben__l li{ flex-direction:column; gap:9px; } /* responsabilidade: as duas colunas continuam; o conteúdo de cada uma se centra */ @media (min-width:960px){ .cnf h2, .cnf__lead{ margin-inline:auto; } } .cnf__pt p{ margin-inline:auto; } .cnf__cred-l li{ padding-left:0; padding-right:0; } .cnf__cred-l li::before{ left:50%; transform:translateX(-50%); top:6px; } .cnf__cred-l li{ padding-top:20px; } /* as seis situações continuam sendo LINHAS varríveis — índice, ícone, título e seta. O patch centra o texto; a linha não vira cartão empilhado, porque isso seria arquitetura. O único ajuste é a seta, que passa a ficar colada à direita para o título centrar de verdade dentro da própria célula. */ .item{ grid-template-columns:auto auto 1fr auto; } .item__b{ text-align:center; } /* como funciona: o trilho deixa de correr à esquerda e passa por baixo do nó, que agora está no eixo de cada etapa */ .etapa{ padding:22px 0 22px 0; } .etapa::before{ left:50%; transform:translateX(-50%); } .etapa::after{ left:50%; transform:translateX(-50%); } .etapa__ico{ margin-inline:auto; } @media (min-width:980px){ .etapa::before{ left:0; right:-34px; transform:none; } .etapa::after{ left:50%; transform:translateX(-50%); top:-5px; } .etapa{ padding-top:26px; } } /* HERO — o patch centraliza `.hero__acoes`. Com a headline à esquerda, o botão dourado ficava fora do eixo dela e o conjunto lia como desalinho, não como decisão. O eixo passa a ser UM SÓ dentro da coluna navy: eyebrow, headline, apoio, CTA e diferenciais. A composição canônica não muda — o texto continua na metade esquerda e a fotografia na direita (D-073). Se o RT preferir a headline à esquerda, basta remover este bloco. */ .hero__txt{ text-align:center; } .hero .eyebrow{ justify-content:center; } .hero h1, .hero__apoio{ margin-inline:auto; } /* os três diferenciais acompanham o eixo do hero: ícone acima, texto abaixo, centrados — como a faixa de benefícios já ficou. Os TEXTOS e a ordem são os congelados por D-074; muda o alinhamento, não o conteúdo. */ .difs li{ flex-direction:column; align-items:center; text-align:center; gap:8px; } .difs__t{ text-align:center; } /* CTA final: o bloco já vem centrado do patch */ .fim h2, .fim .lead{ margin-inline:auto; } /* -------------------------------------------------------------------------- 4 · PÁGINA DE AVALIAÇÃO O patch nomeia `.pg-hero__txt` e `.recebe__h`: as duas classes foram dadas ao HTML, em vez de reescrever o patch. O que falta é a grade. -------------------------------------------------------------------------- */ .pg-hero__txt .eyebrow{ justify-content:center; } .pg-hero__txt .hero__apoio{ margin-inline:auto; } .hero--pg .hero__acoes{ justify-content:center; } .sit__c{ align-items:center; } @media (min-width:1000px){ .an__h, .faq__h{ margin-inline:auto; } } /* o número do card de entrega vai para o eixo, junto com o filete */ .rec__c{ text-align:center; } .rec__n::before{ left:50%; transform:translateX(-50%); } .rec__n{ padding-bottom:12px; } /* -------------------------------------------------------------------------- 5 · LEGIBILIDADE — A EXCEÇÃO QUE O PRÓPRIO BRIEFING ESCREVEU "NÃO centralizar parágrafos longos de FAQ/análise técnica linha por linha." O patch já alinha `.an__i`, `.faq__r` e `.faq__i` à esquerda. Falta garantir que o BLOCO continue centrado e com medida de leitura confortável, e que a resposta do FAQ não herde o centro da pergunta. -------------------------------------------------------------------------- */ .faq__r p, .an__i p{ max-width:68ch; text-align:left; } .faq__r{ text-align:left; } .faq__i{ text-align:left; } .faq__p{ text-align:center; } .ori__resD, .ori__resN, .ori__hint{ margin-inline:auto; } .ori__resBox li{ text-align:left; } .aval__d{ margin-inline:auto; } .passos__t{ text-align:center; } /* -------------------------------------------------------------------------- 6 · BOTÕES O patch zera `letter-spacing` e `word-spacing` e dá 294px mínimos ao CTA do hero. Os rótulos novos são mais longos que os antigos ("Falar sobre perícia" no lugar de "Saiba mais"): o link do card precisa caber em uma linha, com o filete dourado do sistema ao lado. -------------------------------------------------------------------------- */ .srv__l{ margin-top:auto; padding-top:14px; text-align:center; } .tlink{ gap:9px; } @media (max-width:359px){ .srv__l{ font-size:14px; } } /* -------------------------------------------------------------------------- 7 · O BLOCO DA MARCA — O TOM INTERINO, AGORA MEDIDO DIREITO A marca cresceu de 88 para 108px. O retângulo opaco do PNG cresceu junto, e o que era imperceptível num bloco pequeno passou a se enxergar num bloco de 192 × 116px. Medido no arquivo oficial, o fundo dele é UNIFORME em `rgb(0,15,35)` — `#000F23` —, com ruído de ±1 nível. O token interino estava em `#011125`, que renderiza `rgb(1,17,37)`: três níveis de diferença. Numa área pequena isso some; numa área grande, vira caixa. D-063 define esse token como "o fundo próprio do arquivo oficial". Não é cor nova nem cor de sistema: é o mesmo token, agora com o valor que a medição do arquivo mostra. Δ cai de 3 para 1 nível. Continua interino, e cai no dia em que existir exportação com canal alfa. -------------------------------------------------------------------------- */ :root{ --navy-marca:#000F23; } /* -------------------------------------------------------------------------- 8 · O TRACINHO DA EYEBROW `.eyebrow::before` é um filete de 26px à ESQUERDA do texto. Centrado, o par filete+texto fica com o texto deslocado do eixo. Onde o bloco virou centrado, o filete sai — como `.sec__h--filete` já fazia desde a 02.7. -------------------------------------------------------------------------- */ .cnf .eyebrow::before, .hero .eyebrow::before, .fim .eyebrow::before, .painel .eyebrow::before, .ori .eyebrow::before, .pg-hero__txt .eyebrow::before{ display:none; } /* -------------------------------------------------------------------------- 9 · DOIS DEFEITOS QUE A MEDIÇÃO DO REFINO ENCONTROU 9.1 · NAVEGAÇÃO DO CABEÇALHO — 3,88:1 A faixa passou de 90 para 116px de altura para receber a marca maior. Com isso, mais fotografia entrou atrás do menu, e o véu do topo do hero, que é um gradiente, ficou mais diluído justo na altura dos links. Medido no pixel, "Contato" caiu para 3,88:1 sobre um ponto claro do céu — abaixo da AA. A tinta do menu sobe de 72% para 92% de branco. Nada na composição muda: a fotografia continua chegando ao topo, o gradiente continua o mesmo. 9.2 · RÓTULOS DOS CARDS EM DUAS E TRÊS LINHAS Os rótulos novos são mais longos que "Saiba mais": no cartão de 214px, "Falar sobre inspeção" mais o filete dourado ao lado não cabiam em uma linha. O filete passa a ficar ABAIXO do rótulo, centrado — o link ganha a largura inteira do cartão e os três voltam a alinhar. -------------------------------------------------------------------------- */ .hd__nav a{ color:var(--on-navy); } .srv__l{ flex-direction:column; gap:9px; min-height:auto; padding-top:16px; } .srv__l::after{ width:34px; } .srv__l:hover::after{ width:52px; }