/* ============================================================================= TAKA DESIGN — BANNER DE CONSENTIMENTO (LGPD / Consent Mode v2) ----------------------------------------------------------------------------- Carregue depois de whatsapp-fab.css: este arquivo também reposiciona o botão flutuante enquanto o banner está visível. Nenhum token novo — tudo vem do Design System PRISMA: · --ds-surface / --ds-spectrum / --ds-r-md / --ds-ease · .btn + .btn-glass → os DOIS botões usam a MESMA variante: "Aceitar" e "Recusar" têm exatamente o mesmo peso visual (nada de neon num lado e fantasma no outro) · .t-label / .t-body-sm NÃO É MODAL. O banner é uma região (role="region" + aria-label, definidos em consent.js) fixa no canto inferior. A página continua rolável e clicável; não há backdrop nem armadilha de foco. COMO ELE CONVIVE COM O BOTÃO DO WHATSAPP ----------------------------------------- O botão flutuante fica embaixo à direita (whatsapp-fab.css). · >= 680px : o banner fica embaixo à ESQUERDA, com largura máxima de 34rem. Lado a lado os dois nunca se tocam (conferido em 680px: o banner termina em ~557px, o botão começa em ~607px). · <= 679px : o banner ocupa a largura toda e passaria por cima do botão. Em vez de cobri-lo, o botão SOBE: consent.js mede a altura real do banner em --consent-banner-h e a regra abaixo posiciona o botão logo acima dele. ============================================================================= */ .consent-banner { --consent-gap: clamp(.75rem, 2vw, 1.5rem); position: fixed; left: var(--consent-gap); bottom: var(--consent-gap); /* 520 > 500 do .whatsapp-fab e > 60 do cabeçalho: nunca fica por baixo de nada. Como os dois não se sobrepõem (ver nota acima), subir acima do botão não esconde conversão nenhuma. */ z-index: 520; width: min(34rem, calc(100vw - 2 * var(--consent-gap))); /* Rede de segurança: com fonte ampliada ou tela minúscula, rola por dentro em vez de vazar para fora do viewport. */ max-height: calc(100vh - 2 * var(--consent-gap)); max-height: calc(100dvh - 2 * var(--consent-gap)); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: .625rem; padding: 1.125rem 1.25rem 1.25rem; color: rgba(255, 255, 255, .72); background: var(--ds-surface); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--ds-r-md); box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 20px 60px -10px rgba(0, 0, 0, .6); animation: consent-rise .55s var(--ds-ease) both; } /* `hidden` precisa vencer o `display: grid` acima. */ .consent-banner[hidden] { display: none; } /* Foco programático (reabrir pelo rodapé) cai no contêiner, que não é um controle: o anel fica nos botões e no link, que são o que se opera. */ .consent-banner:focus { outline: none; } /* Fio espectral no topo — mesmo recurso do .spectrum-rule, só que contido pelo raio do cartão. */ .consent-banner::before { content: ''; position: absolute; top: 0; left: var(--ds-r-md); right: var(--ds-r-md); height: 1px; background: var(--ds-spectrum); opacity: .85; pointer-events: none; } .consent-banner__title { margin: 0; color: rgba(255, 255, 255, .56); } .consent-banner__text { margin: 0; color: rgba(255, 255, 255, .78); } .consent-banner__link { color: #fff; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(255, 255, 255, .45); transition: text-decoration-color .35s var(--ds-ease); } .consent-banner__link:hover, .consent-banner__link:focus-visible { text-decoration-color: #fff; } .consent-banner__actions { display: flex; gap: .625rem; margin-top: .25rem; } /* Mesmo tamanho, mesma variante: nenhum dos dois é "o recomendado". 44px de altura mínima = alvo de toque confortável. */ .consent-banner__btn { flex: 1 1 0; min-height: 2.75rem; } /* --- Telas estreitas: largura toda, e o botão do WhatsApp sobe ------------ */ @media (max-width: 679px) { .consent-banner { right: var(--consent-gap); width: auto; } /* Banner + folga de .625rem entre ele e o botão. O `transition` repete a lista original do .whatsapp-fab (transform e box-shadow) e acrescenta `bottom`, para a subida não ser um salto. Sem --consent-banner-h (banner fechado) a regra nem casa: a classe só existe com o banner visível. */ html.has-consent-banner .whatsapp-fab { bottom: calc(var(--consent-banner-h, 0px) + var(--consent-gap, .75rem) + .625rem); transition: transform .35s var(--ds-ease-spring), box-shadow .35s var(--ds-ease), bottom .35s var(--ds-ease); } } /* --- Paisagem baixa (celular deitado) ------------------------------------ Altura útil de ~320–400px: um banner empilhado comeria metade da tela. Texto à esquerda, botões em coluna à direita, título some (o texto já diz do que se trata) — a faixa fica com ~100px. */ @media (max-height: 480px) and (orientation: landscape) { .consent-banner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; row-gap: 0; padding: .75rem 1rem; } .consent-banner__title { display: none; } .consent-banner__text { grid-column: 1; } .consent-banner__actions { grid-column: 2; grid-row: 1; flex-direction: column; margin-top: 0; width: 7.5rem; } .consent-banner__btn { flex: none; } } /* --- Item "Preferências de cookies" no rodapé ---------------------------- É um