/* * overrides.css — ajustes da Avalon X sobre o vanilla-cookieconsent v3. * * Carregado DEPOIS de cookieconsent.css no , de propósito: a lib fixa o * empilhamento dos botões com !important, então virar a linha dos dois botões * primários exige !important pontual aqui. O resto vence por especificidade. * * Problema que isto resolve (medido no Pixel 7, banner aberto): a barra de * consentimento no mobile tinha 353px e cobria o CTA principal do hero — o * primeiro toque do usuário caía no texto do banner, não no botão. Duas frentes: * 1) compactar a barra no mobile (353px -> ~276px); * 2) enquanto a barra está visível, o hero reserva um rodapé para o CTA subir * acima dela (classe body.cc-consent-open, ligada pelo consent-config.js). * O smoke tem o teste de hit-target que trava a regressão. */ @media (max-width: 640px) { /* ── Barra de consentimento compacta ─────────────────────────────── */ #cc-main .cm--bar .cm__body { padding: 12px 16px 14px; row-gap: 8px; } #cc-main .cm--bar .cm__title { font-size: 15px; margin-bottom: 3px; } #cc-main .cm--bar .cm__desc { font-size: 12.5px; line-height: 1.35; } #cc-main .cm--bar .cm__btns { gap: 8px; } /* Os dois botões primários (aceitar tudo / apenas essenciais) lado a lado. A lib empilha com !important; por isso o counter-!important aqui. */ #cc-main .cm--bar div.cm__btn-group:first-child { flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; } #cc-main .cm--bar div.cm__btn-group:first-child .cm__btn { flex: 1 1 0 !important; white-space: nowrap; } /* Alvo de toque >= 44px mantido (WCAG 2.5.5). */ #cc-main .cm--bar div.cm__btns .cm__btn { padding: 11px 8px; font-size: 13px; min-height: 44px; } /* ── Rodapé de folga no hero enquanto o banner está visível ──────── */ /* Só com a barra aberta: a classe some no aceite, sem deixar vão. Em telas muito baixas (~640px) a barra ainda é grande demais para o hero atual — a folga definitiva vem do hero mais curto (Fase 2). Aqui garante o CTA clicável nas telas modernas (>=375 de largura), que é o grosso do tráfego. */ body.cc-consent-open .hero { padding-bottom: 200px; } }