/* * 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. */ /* ── Tema dark luxury (redesign 04/08/2026) ────────────────────────── * A lib expõe tudo via CSS custom properties em `:root` (cookieconsent.css); * redeclarar aqui vence por ordem de carga, sem precisar de classe * `.cc--darkmode` nem tocar em layout/padding (isso continua intocado abaixo). * Botão primário segue a regra de marca: fundo gold, texto SEMPRE navy, nunca * branco. Ver design-spec-redesign-dark-2026-08-04.md para os tokens-fonte. */ :root { --cc-bg: var(--ax-elev, #12203a); --cc-primary-color: var(--ax-texto, rgba(255, 255, 255, 0.92)); --cc-secondary-color: var(--ax-texto-suave, rgba(255, 255, 255, 0.75)); --cc-separator-border-color: rgba(255, 255, 255, 0.12); --cc-btn-primary-bg: var(--ax-gold, #c9a84c); --cc-btn-primary-color: var(--ax-navy, #1a2e4a); --cc-btn-primary-border-color: var(--ax-gold, #c9a84c); --cc-btn-primary-hover-bg: var(--ax-gold-dark, #b8963d); --cc-btn-primary-hover-color: var(--ax-navy, #1a2e4a); --cc-btn-primary-hover-border-color: var(--ax-gold-dark, #b8963d); --cc-btn-secondary-bg: transparent; --cc-btn-secondary-color: var(--ax-texto-suave, rgba(255, 255, 255, 0.75)); --cc-btn-secondary-border-color: rgba(255, 255, 255, 0.2); --cc-btn-secondary-hover-bg: rgba(255, 255, 255, 0.08); --cc-btn-secondary-hover-color: #ffffff; --cc-btn-secondary-hover-border-color: rgba(255, 255, 255, 0.32); --cc-cookie-category-block-bg: var(--ax-ink, #0a1220); --cc-cookie-category-block-border: rgba(255, 255, 255, 0.12); --cc-cookie-category-expanded-block-bg: var(--ax-ink, #0a1220); --cc-section-category-border: rgba(255, 255, 255, 0.12); --cc-footer-bg: var(--ax-elev, #12203a); --cc-footer-border-color: rgba(255, 255, 255, 0.12); --cc-footer-color: var(--ax-texto-suave, rgba(255, 255, 255, 0.75)); --cc-overlay-bg: rgba(10, 18, 32, 0.72); } @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; } }