/* ===================================================================== PFR Engenharia e Consultoria — LP Projeto Hidrossanitário Consome os tokens de /css/tokens.css (etapa 3). Camada rica de animação (etapa 7) ligada nos GANCHOS do markup (data-reveal, data-parallax, .hero-media, data-underline, data-count) — ver bloco "ANIMAÇÃO — camada rica" abaixo e /js/animations.js. ===================================================================== */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { /* NUNCA overflow-x:hidden no body (quebra position:sticky dos filhos) */ overflow-x: clip; scroll-behavior: smooth; /* scroll NATIVO, sem momentum/inércia */ /* Tem de ser >= altura do header fixo, senão a âncora leva o título para debaixo dele. Header = logo (72) + padding vertical (2x16) = 104. */ scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ===================================================================== ANIMAÇÃO — camada rica (etapa 7) Regra de segurança: o estado por padrão de todo gancho é o ESTADO FINAL, visível. Só quando /js/animations.js roda E não há prefers-reduced-motion é que o recebe a classe .motion-on — e SÓ ENTÃO o CSS abaixo passa a escondê-lo antes do IntersectionObserver revelar (classe .in). Sem JS, ou com reduced-motion, nada se aplica: o conteúdo nasce visível. Isso é a 1ª trava contra o clássico "conteúdo que some para sempre se o JS falhar". A 2ª trava é a rede de tempo em animations.js (força .in em tudo depois de 2.5s). Só transform/opacity (nunca top/height/width) — exceção única e deliberada: o accordion do FAQ, que é um gesto do usuário, não um reveal de scroll, então não corre o risco de "conteúdo preso". ===================================================================== */ .motion-on [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease-out, transform .5s cubic-bezier(.16, 1, .3, 1); will-change: opacity, transform; } .motion-on [data-reveal].in { opacity: 1; transform: none; } .motion-on [data-reveal][data-delay="1"] { transition-delay: .08s; } .motion-on [data-reveal][data-delay="2"] { transition-delay: .16s; } .motion-on [data-reveal][data-delay="3"] { transition-delay: .24s; } /* CTAs nunca deslizam, só esmaecem: um botão é alvo de clique e (no hero) fica perto do banner de cookies — zero risco de invadir a área dele enquanto aguarda o IntersectionObserver revelar. */ .motion-on .hero__actions[data-reveal] { transform: none; } /* Hero — zoom invertido no modelo BIM (elemento assinatura da página) */ .motion-on .hero-media { transform: scale(1.08); transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); will-change: transform; } .motion-on .hero-media.in { transform: scale(1); } /* Sequência do hero: a imagem abre o movimento e os elementos entram DEPOIS, um a um. Sem estes atrasos, o IntersectionObserver revela o texto no mesmo instante em que o zoom começa e as duas coisas se atropelam — era o que fazia o hero parecer quebrado. Os atrasos vencem os genéricos por especificidade (2 classes + 2 atributos). */ .motion-on .hero__col [data-reveal] { transition-delay: .45s; } .motion-on .hero__col [data-reveal][data-delay="1"] { transition-delay: .62s; } .motion-on .hero__col [data-reveal][data-delay="2"] { transition-delay: .79s; } .motion-on .hero__col [data-reveal][data-delay="3"] { transition-delay: .96s; } /* o sublinhado do "BIM" fecha a sequência, depois do H1 já ter entrado */ .motion-on .hero__col [data-underline] { transition: background-size .6s ease-out 1.15s; } /* Título — sublinhado que desenha. Estado por padrão já é o traço completo (sem JS, o "BIM" já nasce sublinhado, só sem o desenho). */ [data-underline] { background-image: linear-gradient(var(--color-accent), var(--color-accent)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 3px; } .motion-on [data-underline] { background-size: 0 3px; transition: background-size .6s ease-out .15s; } .motion-on [data-underline].in { background-size: 100% 3px; } /* Comparativo — cascata nos itens + realce no ícone ao entrar */ .motion-on .vs__list li { opacity: 0; transform: translateY(10px); transition: opacity .4s ease-out, transform .4s cubic-bezier(.16, 1, .3, 1); } .motion-on .vs__list li .vs__mark { transform: scale(.6); transition: transform .35s cubic-bezier(.16, 1, .3, 1); } .motion-on .vs__card.in .vs__list li { opacity: 1; transform: none; } .motion-on .vs__card.in .vs__list li .vs__mark { transform: scale(1); } .motion-on .vs__card.in .vs__list li:nth-child(1), .motion-on .vs__card.in .vs__list li:nth-child(1) .vs__mark { transition-delay: .05s; } .motion-on .vs__card.in .vs__list li:nth-child(2), .motion-on .vs__card.in .vs__list li:nth-child(2) .vs__mark { transition-delay: .14s; } .motion-on .vs__card.in .vs__list li:nth-child(3), .motion-on .vs__card.in .vs__list li:nth-child(3) .vs__mark { transition-delay: .23s; } body { margin: 0; background: var(--color-bg-page); color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: var(--font-weight-display-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); text-wrap: balance; /* evita palavra órfã sem
forçado */ } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } /* `height:auto` é obrigatório: os atributos width/height do HTML entram como presentational hint e vencem o aspect-ratio do CSS sem isso. */ img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } :focus-visible { outline: none; box-shadow: var(--shadow-focus); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- Container único (mesma largura em TODAS as seções) ---------- */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding-mobile); } @media (min-width: 768px) { .container { padding: 0 var(--container-padding-tablet); } } @media (min-width: 1200px) { .container { padding: 0 var(--container-padding-desktop); } } /* ---------- Ritmo de seção ---------- */ .section { padding: var(--space-section-y-mobile) 0; } @media (min-width: 900px) { .section { padding: var(--space-section-y-desktop) 0; } } .section--dark { background: var(--pfr-navy-950); } .section--navy { background: var(--color-bg-inverse); } /* Fundos de arte nas duas faixas escuras. A cor sólida continua embaixo: se a imagem não carregar, o texto claro segue sobre navy, não sobre branco. O véu por cima é o que garante o contraste medido — sem ele o contraste passaria a depender do trecho da imagem que calhar atrás do texto. */ #numeros, #orcamento { position: relative; isolation: isolate; } #numeros::before, #orcamento::before { content: ""; position: absolute; inset: 0; z-index: -1; background-repeat: no-repeat; background-size: cover; background-position: center; } #numeros::before { background-image: linear-gradient(rgba(11, 33, 50, 0.55), rgba(11, 33, 50, 0.55)), url("/imagens/textura-numeros.webp"); } #orcamento::before { background-image: linear-gradient(90deg, rgba(8, 24, 38, 0.94) 0%, rgba(8, 24, 38, 0.86) 42%, rgba(8, 24, 38, 0.62) 100%), url("/imagens/fundo-cta-final.webp"); } .section--subtle { background: var(--color-bg-subtle); } .section--dark h2, .section--navy h2, .section--dark h3, .section--navy h3 { color: var(--color-text-on-dark); } .section--dark p, .section--navy p { color: var(--color-text-on-dark-muted); } /* ---------- Blocos de texto padrão ---------- */ .eyebrow { margin: 0 0 var(--space-4); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--font-weight-body-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent-text-on-light); } .eyebrow--on-dark { color: var(--color-accent-text-on-dark); } .eyebrow::before { content: ""; display: inline-block; width: 28px; height: 2px; margin-right: var(--space-3); vertical-align: 0.25em; background: var(--color-accent); } .section__head { max-width: 44rem; margin-bottom: var(--space-12); } .section__title { font-size: clamp(1.75rem, 1.1rem + 2.6vw, var(--text-4xl)); } .section__intro { margin-top: var(--space-5); font-size: var(--text-lg); line-height: var(--leading-relaxed); } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-8); min-height: 52px; border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--font-weight-body-semibold); letter-spacing: 0.01em; text-align: left; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base); } .btn svg { flex: none; } /* CTA primário: fundo âmbar + texto navy-950. Texto BRANCO sobre âmbar reprova AA (2.37) — nunca inverter. */ .btn--primary { background: var(--color-button-primary-bg); color: var(--color-button-primary-text); } .btn--primary:hover { background: var(--color-button-primary-bg-hover); } .btn--primary:active { background: var(--color-button-primary-bg-active); } .btn--ghost-dark { border: 1.5px solid rgba(255, 255, 255, 0.5); color: var(--color-text-on-dark); } .btn--ghost-dark:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; } .btn--sm { min-height: 44px; padding: var(--space-3) var(--space-5); font-size: var(--text-sm); } /* O botão flutuante do Merlin não existe neste projeto: os CTAs vão direto para o WhatsApp. A regra que pintava .merlin-button saiu junto. */ /* ===================================================================== HEADER ===================================================================== */ .header { position: fixed; inset: 0 0 auto 0; z-index: 60; padding: var(--space-4) 0; /* Header TRANSPARENTE no topo, a pedido do usuário — mas a transparência é o estado ADICIONADO por JS (.is-top), não o padrão. O padrão é sólido. Motivo, medido: com transparente por padrão o menu branco dava 1.07:1 sobre as seções claras. E o estado é alcançável de verdade: ao recarregar a página já rolada, o navegador restaura o scroll e o header fica transparente sobre seção clara até o app.js rodar. Invertido, o pior caso é seguro. */ background: rgba(14, 42, 63, 0.96); /* Sem transição aqui de propósito. A transição vive só no .is-top, abaixo: assim ENTRAR em transparente é suave, e VOLTAR a sólido é instantâneo. Se fosse simétrico, uma rolagem rápida deixaria o menu branco desbotando por ~200ms sobre a seção clara — transiente real, medido pelo harness. */ } .header.is-solid { background: rgba(14, 42, 63, 0.96); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* Só aqui o header fica transparente: no topo, onde o hero navy garante o contraste do menu. Classe posta pelo app.js. */ .header.is-top { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background var(--transition-base), box-shadow var(--transition-base); } .header__inner { display: flex; align-items: center; gap: var(--space-6); } .header__logo { display: block; margin-right: auto; } /* 72px de altura (era 50). A proporção 677x653 do arquivo é mantida para a marca não distorcer. Crescer a logo cresce o header, e o scroll-padding-top do :root acompanha — senão o alvo de cada âncora para embaixo do header. */ /* altura fixa + largura automática = proporção do arquivo preservada exatamente (fixar os dois em inteiros dava 0.47% de distorção na marca) */ .header__logo img { height: 72px; width: auto; } @media (max-width: 599px) { .header__logo img { height: 58px; } } .nav { display: none; } @media (min-width: 900px) { .nav { display: flex; align-items: center; gap: var(--space-8); } } .nav__link { font-size: var(--text-sm); font-weight: var(--font-weight-body-medium); letter-spacing: 0.01em; text-decoration: none; color: var(--color-text-on-dark); padding: var(--space-2) 0; border-bottom: 2px solid transparent; transition: border-color var(--transition-fast), color var(--transition-fast); } .nav__link:hover { border-bottom-color: var(--color-accent); } .header__cta { display: none; } @media (min-width: 1024px) { .header__cta { display: inline-flex; } } .burger { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-left: auto; border-radius: var(--radius-md); color: var(--color-text-on-dark); } @media (min-width: 900px) { .burger { display: none; } } .burger span { display: block; width: 22px; height: 2px; background: currentColor; position: relative; } .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; } .burger span::before { top: -7px; } .burger span::after { top: 7px; } /* Menu off-canvas */ .drawer { position: fixed; inset: 0 0 0 auto; z-index: 70; width: min(88vw, 360px); padding: calc(var(--space-20) + var(--space-4)) var(--space-6) var(--space-8); background: var(--pfr-navy-950); transform: translateX(100%); transition: transform var(--transition-slow); overflow-y: auto; } .drawer.is-open { transform: translateX(0); } .drawer__list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-8); } .drawer__link { display: block; padding: var(--space-4) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: var(--color-text-on-dark); text-decoration: none; font-size: var(--text-lg); } .drawer__close { position: absolute; top: var(--space-4); right: var(--space-4); width: 48px; height: 48px; color: var(--color-text-on-dark); font-size: 24px; line-height: 1; } .drawer .btn { width: 100%; justify-content: center; text-align: center; } .scrim { position: fixed; inset: 0; z-index: 65; background: rgba(8, 28, 43, 0.6); opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); } .scrim.is-open { opacity: 1; visibility: visible; } /* ===================================================================== HERO — full-bleed fullscreen, fundo em CSS (gradiente navy + malha) + recorte BIM real à direita, teto de 1000px CSS de largura. ===================================================================== */ .hero { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100dvh; overflow: hidden; background-color: var(--pfr-navy-900); background-image: linear-gradient(180deg, rgba(8, 28, 43, 0) 52%, rgba(8, 28, 43, 0.55) 82%, rgba(8, 28, 43, 0.92) 100%), radial-gradient(76% 68% at 74% 38%, rgba(32, 74, 104, 0.98) 0%, rgba(24, 60, 87, 0.55) 42%, rgba(14, 42, 63, 0) 74%); } /* Malha técnica em CSS. Desligada desde que a arte gerada passou a trazer a própria malha: duas grades sobrepostas embolam o fundo. Fica como reserva caso a imagem do hero saia. */ .hero__grid { display: none; } .hero__grid--css { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 60px), repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 60px); -webkit-mask-image: radial-gradient(120% 100% at 60% 40%, #000 30%, rgba(0, 0, 0, 0.25) 100%); mask-image: radial-gradient(120% 100% at 60% 40%, #000 30%, rgba(0, 0, 0, 0.25) 100%); } /* Arte do hero agora é FULL-BLEED: a imagem gerada já traz o fundo navy e a malha técnica, então ela cobre a seção inteira em vez de ser um recorte posicionado à direita. O gradiente do .hero continua embaixo como reserva caso a imagem não carregue. O overscan vertical existe para o parallax deslocar sem descobrir a borda. */ .hero__media { position: absolute; z-index: 1; inset: -3% 0; transform: translateY(var(--parallax-y, 0px)); pointer-events: none; } .hero__media img { width: 100%; height: 100%; object-fit: cover; /* Ancorada à ESQUERDA de propósito. Medido: com 78% o recorte do cover comia 545px do lado esquerdo e a headline caía sobre a faixa 0.33–0.62 da arte, a parte mais densa. Com 12% ela cai sobre a faixa ~0.10–0.39, que é o espaço negativo que a imagem foi gerada para ter. */ object-position: 12% center; } /* Véu escuro da esquerda para o centro: garante o contraste do texto */ .hero__veil { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(8, 28, 43, 0.94) 0%, rgba(8, 28, 43, 0.88) 26%, rgba(8, 28, 43, 0.58) 46%, rgba(8, 28, 43, 0.16) 66%, rgba(8, 28, 43, 0) 82%); } .hero__inner { position: relative; z-index: 4; padding-top: var(--space-20); padding-bottom: var(--space-16); } .hero__col { max-width: 40rem; } .hero__title { font-size: clamp(2.125rem, 1.15rem + 4.1vw, var(--text-7xl)); font-weight: var(--font-weight-display-black); color: var(--color-text-on-dark); } .hero__title .u { color: var(--color-accent-text-on-dark); } /* Segunda linha da promessa, em corpo menor e destacada em âmbar. Era a segunda metade do H1; virou linha própria a pedido do usuário, para o H1 carregar só o nome do serviço. Fica entre o H1 e o subhead na hierarquia: menor que o título, maior e mais forte que o texto de apoio. */ .hero__claim { margin-top: var(--space-4); font-family: var(--font-display); font-weight: var(--font-weight-display-bold); font-size: clamp(1.25rem, 0.85rem + 1.5vw, 2rem); line-height: var(--leading-snug); color: var(--color-accent-text-on-dark); } .hero__sub { max-width: 34rem; margin-top: var(--space-6); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-on-dark-muted); } .hero__actions { margin-top: var(--space-10); } @media (max-width: 899px) { .hero { justify-content: flex-start; } .hero__inner { order: 1; padding-top: calc(var(--space-24) + var(--space-4)); padding-bottom: 0; } /* No mobile a arte continua full-bleed, mas o véu vira vertical e mais fechado: com a coluna estreita o texto passa por cima da parte densa da imagem, e o contraste é medido, não estimado. */ .hero__media img { object-position: 30% center; } .hero__veil { background: linear-gradient(180deg, rgba(8, 28, 43, 0.92) 0%, rgba(8, 28, 43, 0.86) 46%, rgba(8, 28, 43, 0.72) 72%, rgba(8, 28, 43, 0.62) 100%); } .hero__sub { font-size: var(--text-base); } } /* ===================================================================== DIFERENCIAIS — lista editorial numerada (NÃO grade 2x2 de cards) ===================================================================== */ .diff__layout { display: grid; gap: var(--space-12); } @media (min-width: 1024px) { .diff__layout { grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: start; } .diff__head { position: sticky; top: 140px; margin-bottom: 0; } } .edlist { border-top: 1px solid var(--color-border-subtle); } .edlist__item { position: relative; display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--space-5); padding: var(--space-8) 0; border-bottom: 1px solid var(--color-border-subtle); transition: background var(--transition-base); } /* O sangramento do hover nunca pode passar do padding do container, senão vira overflow horizontal nas larguras pequenas. */ .edlist__item::before { content: ""; position: absolute; left: -16px; right: -16px; top: 0; bottom: 0; z-index: -1; background: var(--color-bg-subtle); opacity: 0; transition: opacity var(--transition-base); } .edlist__item:hover::before { opacity: 1; } @media (min-width: 768px) { .edlist__item::before { left: -24px; right: -24px; } } .edlist__idx { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--font-weight-display-black); line-height: 1.2; color: var(--color-accent); font-variant-numeric: tabular-nums; } .edlist__title { font-size: var(--text-xl); margin-bottom: var(--space-3); } .edlist__body p { color: var(--color-text-secondary); } @media (max-width: 480px) { .edlist__item { grid-template-columns: 1fr; gap: var(--space-2); } } /* ===================================================================== METODOLOGIA — split imagem + texto sobre superfície escura ===================================================================== */ .split { display: grid; gap: var(--space-12); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-16); } } .split__text > p + p { margin-top: var(--space-5); } .split__text .section__title { margin-bottom: var(--space-6); } .split__text p { font-size: var(--text-lg); line-height: var(--leading-relaxed); } .split__media { margin: 0; position: relative; } .split__media .media { display: block; /* wrapper de mídia SEMPRE display:block */ position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(255, 255, 255, 0.14); } .split__media .media img { width: 100%; height: 100%; object-fit: cover; } .split__media::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 96px; height: 3px; background: var(--color-accent); } /* ===================================================================== PORTFÓLIO — grid par de 6, 3 col / 2 col (<=900) / 1 col (<=560) ===================================================================== */ .folio { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } /* 540px (não 561px): no fim da faixa de 1 coluna, a coluna única (largura do container) passa de 1.15x a resolução nativa do card portfolio-5 (440px) — medido em @560px: 518/440 = 1.177x. Encurtar a faixa de 1 coluna evita o upscale sem tocar no arquivo de imagem. */ @media (min-width: 540px) { .folio { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 901px) { .folio { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } } .folio__card { position: relative; } .folio__media { display: block; /* obrigatório: overflow em caixa inline não se aplica */ position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); background: var(--color-bg-muted); border: 1px solid var(--color-border-subtle); } .folio__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .folio__card:hover .folio__media img { transform: scale(1.04); } .folio__title { margin-top: var(--space-4); font-size: var(--text-base); font-weight: var(--font-weight-display-bold); line-height: var(--leading-snug); } /* Botão de rótulo curto esticado sobre o card via ::after (nunca