/* * consentimento.css — banner de consentimento de cookies (LGPD) * * Carregado nas 13 páginas, SEMPRE POR ÚLTIMO no — depois do CSS * próprio de cada página de vendas. O banner não pode ser sobrescrito por * regra genérica de página (`button {}`, `a {}`), e ser o último arquivo * resolve isso sem precisar de `!important` em cada propriedade. * * O HTML do banner é criado pelo assets/js/main.js, não existe nos arquivos * .html — ver seção 6.3 do CLAUDE.md. Quem já decidiu nunca vê este componente. * * Usa só tokens de tokens.css. Nenhuma cor literal aqui. */ .fs-consent { position: fixed; z-index: 9999; /* Ancorado ao rodapé da janela, não ao fim do documento: precisa aparecer sem rolagem. Como é `fixed`, não empurra conteúdo e não gera CLS. */ left: 0; right: 0; bottom: 0; padding: 20px var(--container-padding) calc(20px + env(safe-area-inset-bottom)); background: var(--color-background); border-top: 1px solid rgba(1, 22, 30, 0.10); box-shadow: var(--shadow-lg); font-family: var(--font-body); color: var(--color-text-primary); } .fs-consent[hidden] { display: none; } .fs-consent-inner { max-width: var(--container-width); margin: 0 auto; display: flex; align-items: center; gap: 24px; } .fs-consent-texto { flex: 1 1 auto; min-width: 0; } /* Sem titulo no banner: o texto e uma frase so, e um cabecalho em cima dela dobraria a altura da barra para repetir o que a frase ja diz. Quem usa leitor de tela chega pelo aria-label da regiao. */ .fs-consent-descricao { margin: 0; font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-text-secondary); } .fs-consent-descricao a { color: var(--color-brand-primary); text-decoration: underline; } .fs-consent-descricao a:hover { color: var(--color-brand-light-deep); } .fs-consent-acoes { flex: 0 0 auto; display: flex; gap: 12px; } /* Os dois botões têm o MESMO peso visual de propósito: mesma altura, mesmo padding, mesma tipografia. Recusar precisa ser tão fácil quanto aceitar — é o ponto em que a maioria dos banners falha diante do guia da ANPD. A diferença é só de preenchimento (sólido x contorno), para dar hierarquia de leitura sem esconder a recusa. */ .fs-consent-botao { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: var(--radius-pill); border: 2px solid var(--color-brand-primary); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .fs-consent-botao:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); } .fs-consent-aceitar { background: var(--color-brand-primary); color: var(--color-background); } .fs-consent-aceitar:hover { background: var(--color-brand-primary-dark); border-color: var(--color-brand-primary-dark); } .fs-consent-recusar { background: transparent; color: var(--color-brand-primary); } .fs-consent-recusar:hover { background: var(--color-brand-light-80); } @media (max-width: 768px) { .fs-consent-inner { flex-direction: column; align-items: stretch; gap: 16px; } /* No celular os botões dividem a linha em partes iguais — de novo, para que recusar não fique menor nem abaixo da dobra do banner. */ .fs-consent-acoes { gap: 8px; } .fs-consent-botao { flex: 1 1 0; padding: 12px 12px; } } @media (prefers-reduced-motion: reduce) { .fs-consent-botao { transition: none; } }