/* ===================================================================== BANNER FIXO (home) — barra full-bleed ancorada no rodapé da viewport, por cima do conteúdo. Camadas do tema: nav-fixo / wa-float = 900 · menu mobile = 1000 · modal do mapa = 1100. A barra fica em 950: acima do conteúdo e do botão de WhatsApp, abaixo do menu e do modal. COMO A ARTE É CORTADA A barra ocupa 100% da largura e tem altura fixa (--bh-h). A arte entra com object-fit: cover, então ela é escalada pela ALTURA e o excedente é cortado nas laterais, simetricamente (--bh-focus = center por padrão). Consequência prática, e é o contrato com o design: os --bh-safe (1300px) centrais da arte aparecem inteiros em qualquer viewport >= 1300px — é a safe area, mesmo grid das outras seções. Tudo que estiver fora dela é sangria: só sobrevive em telas largas. Para que o corte seja sempre horizontal (nunca no topo/base), a arte precisa ser mais "esticada" que a tela mais larga que se pretende cobrir — proporção 16:1 cobre até 2560px de viewport. Daí a arte recomendada de 5120 × 320px (@2x de 2560 × 160). Como a arte é @2x, a safe area de 1300px da tela equivale aos 2600px centrais do arquivo: é lá que o conteúdo tem que caber. NO MOBILE A MECÂNICA É A MESMA: 160px de altura, arte escalada pela altura, corte nas laterais. O que muda é o tamanho da janela — num celular de 390px você vê 390px da arte, e não 1300px. Por isso o celular pede ARTE PRÓPRIA: uma arte de 780 × 320px (@2x de 390 × 160), com o conteúdo desenhado pra caber nessa largura. Sem arte mobile, o celular usa a de desktop e o corte é inevitável: 780px de conteúdo (é o que a arte do IP Brasil ocupa) não cabem em 390px de tela sem encolher, e encolher derrubaria a barra pra ~80px. Altura de 160px e conteúdo inteiro só coexistem com uma arte feita na proporção do celular. ===================================================================== */ .bh { --bh-h: 160px; --bh-safe: 1300px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; transform: translateY(100%); opacity: 0; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; pointer-events: none; } .bh.is-in { transform: translateY(0); opacity: 1; pointer-events: auto; } .bh__stage { position: relative; width: 100%; } .bh__link { display: block; height: var(--bh-h); overflow: hidden; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18); } .bh__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--bh-focus, center center); } /* Fechar — canto superior direito da safe area, para não cair na sangria (que pode estar fora da tela) nem sobre a borda da viewport. */ .bh__close { position: absolute; top: 12px; right: max(16px, calc((100% - var(--bh-safe)) / 2)); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--c-blue, #1100ff); color: var(--c-white, #fff); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); cursor: pointer; transition: transform 0.2s ease; } .bh__close:hover { transform: scale(1.08); } .bh__close:focus-visible { outline: 3px solid var(--c-white, #fff); outline-offset: 2px; } /* Sobe o botão de WhatsApp pra não ficar embaixo da barra. O --bh-h daqui é o que o JS mede e escreve no — o de dentro de .bh é local e não chega até aqui. */ body.has-bh .wa-float { bottom: calc(var(--bh-h, 160px) + 24px); } /* Toggle "mostrar no desktop" (>= 1071px, faixa de desktop do tema). */ @media (min-width: 1071px) { .bh--hide-d { display: none; } } /* Mobile/tablet — mesmo breakpoint das outras seções (mobile.css). */ @media (max-width: 1070px) { .bh--hide-m { display: none; } .bh__close { top: 8px; right: 8px; width: 32px; height: 32px; } } @media (prefers-reduced-motion: reduce) { .bh { transition: none; } .bh__close:hover { transform: none; } } /* ===================================================================== CTA fixo mobile na home ("Tenho interesse") — estilo das páginas de produto (.prod-cta-bottom): barra full-width no rodapé, revelada ao rolar (body.has-home-cta). Fica ACIMA do banner IP Brasil quando ele está aberto (body.has-bh), e empurra o botão do WhatsApp pra cima. ===================================================================== */ .home-cta-bottom { display: none; } @media (max-width: 1070px) { .home-cta-bottom { display: inline-flex; justify-content: center; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 940; padding: 18px; font-size: 16px; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(calc(100% + 24px)); transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .35s ease, visibility .35s, bottom .35s cubic-bezier(.4, 0, .2, 1); } body.has-home-cta .home-cta-bottom { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); } /* Acima do banner IP Brasil quando ele está aberto. */ body.has-bh .home-cta-bottom { bottom: calc(var(--bh-h, 160px) + 12px); } /* WhatsApp sobe pra ficar acima do CTA. */ body.has-home-cta .wa-float { bottom: 88px; } body.has-home-cta.has-bh .wa-float { bottom: calc(var(--bh-h, 160px) + 84px); } }