/* ========================================================================== Zinho Toda Hora — banner de consentimento, rodapé legal e Política. POR QUE ESTE ARQUIVO EXISTE, e é a parte que ninguém pode apagar: O CTA fixo é `position: fixed; z-index: 100` e ocupa 88px na faixa inferior no mobile (token --cta-h, em tokens.css). O banner de consentimento mora na MESMA faixa inferior. Em 360px de largura os dois disputam o mesmo espaço, e se o botão "Recusar" ficar sob o CTA ele EXISTE e NÃO É TOCÁVEL. Isso não é detalhe de layout: o parecer do cyber-chief classifica esse caso como bloqueio de go-live nº 2, com consequência jurídica IDÊNTICA à de o botão não existir. PRIV-02 quebra por CSS antes de quebrar por código. A solução é RESERVA DE FAIXA DECLARADA, não medição em JavaScript. Sem JS não há como medir a altura real do banner — então a altura é um TETO declarado (--consent-h) e o banner é obrigado a caber dentro dele por `max-height` + rolagem interna. É isso que torna a solução determinística. NENHUM HEX PODE APARECER NESTE ARQUIVO. Toda cor sai de var(--token), e os tokens vivem só em tokens.css. Mesma regra de lp.css e cta.css. ESTE ARQUIVO NÃO EDITA assets/css/cta.css. O cta.css tem dono declarado desde a Fase 2; aqui ele é apenas LIDO, e o deslocamento do CTA sai de uma regra mais específica escrita deste lado. NOTA DE ARQUITETURA PARA QUEM VIER DEPOIS: a reserva depende da classe `tem-banner-consent` no , emitida por index.php quando — e somente quando — o cookie de consentimento é inválido ou ausente. Se essa classe sumir, o CTA volta a cobrir o banner EM SILÊNCIO. Por isso a régua do plano 04-05 mede a sobreposição por `elementFromPoint`, e não pela existência da classe: a classe é o mecanismo, não a prova. ========================================================================== */ /* --------------------------------------------------- 1. A reserva de faixa */ /* Valor de repouso: sem banner na tela, reserva zero e nada muda no CTA. */ :root { --consent-h: 0px; } /* Os dois números abaixo são TETOS medidos no navegador (360x640 e 1440x900), não estimativas. Quem mexer na cópia do banner precisa remedir: texto mais longo estoura o teto, o banner passa a rolar internamente e o "Recusar" pode sair da área visível — que é exatamente a falha que este arquivo existe para impedir. O procedimento está no SUMMARY do plano 04-04. */ body.tem-banner-consent { --consent-h: 192px; } @media (max-width: 767px) { body.tem-banner-consent { --consent-h: 288px; } } /* O CTA sobe enquanto o banner estiver na tela. `inset-block-end` e não `bottom`: é a propriedade que cta.css usa, e misturar as duas faz a cascata depender da ordem dos em vez da especificidade. Aqui a especificidade (0,2,1) vence a regra base do cta.css (0,1,0) e também a da media query de 1024px, independentemente da ordem de carregamento. */ body.tem-banner-consent .cta-fixo { inset-block-end: var(--consent-h); } @media (min-width: 1024px) { /* Acima de 1024px o CTA é card ancorado com respiro de --sp-32 (cta.css §4). Somar em vez de substituir preserva esse respiro; sem a soma o card encosta na borda do banner. */ body.tem-banner-consent .cta-fixo { inset-block-end: calc(var(--consent-h) + var(--sp-32)); } } /* Sem esta linha, o fim do rodapé — onde vivem o link da Política e o de revogação (PRIV-04) — fica coberto pelo banner somado ao CTA, e o visitante não alcança nenhum dos dois por rolagem. Não há salto de layout: a presença do banner é decidida no servidor, antes do primeiro paint. CUIDADO HERDADO: só padding entra aqui. Nenhum ancestral do CTA fixo pode receber transform, filter, perspective, `contain` de paint/layout nem a propriedade que pula a renderização fora de tela — qualquer uma delas cria containing block e rebaixa o CTA de fixo para absoluto, EM SILÊNCIO. O aviso completo está em lp.css e em cta.css. */ body.tem-banner-consent main { padding-block-end: calc(var(--cta-h) + var(--consent-h) + var(--sp-24)); } /* ------------------------------------------------------------ 2. O banner */ /* z-index 200 contra os 100 do CTA: o banner fica POR CIMA. A reserva da seção 1 é o que garante que "por cima" não signifique "escondendo o Recusar". `overflow-x: hidden` explícito ao lado do `overflow-y: auto`: quando um dos eixos deixa de ser `visible`, o outro passa a computar `auto` sozinho — e um `auto` no eixo horizontal produziria rolagem lateral em 360px, que LP-11 proíbe na LP inteira. NÃO introduzir transição de entrada. Ela atrasaria a primeira interação com um elemento cuja função é justamente ser decidido rápido, e obrigaria um bloco de `prefers-reduced-motion` que hoje não é necessário: o banner não anima. */ .consent { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 200; max-height: var(--consent-h); overflow-x: hidden; overflow-y: auto; background: var(--creme); border-block-start: 2px solid var(--marrom); /* 5,16:1 contra o creme */ color: var(--marrom); font-family: var(--ff-texto); font-weight: 600; } .consent__caixa { display: flex; flex-direction: column; gap: var(--sp-8); max-width: 1100px; margin-inline: auto; /* env(): no iPhone a faixa do indicador de home comeria a base do banner. O fallback 0px mantém a conta idêntica em todo o resto. */ padding: var(--sp-16) var(--sp-16) calc(var(--sp-16) + env(safe-area-inset-bottom, 0px)); } /* --fs-legal e não --fs-corpo: o corpo maior empurra o texto para 5 linhas em 360px, o banner estoura o teto de --consent-h e os botões saem da área visível. O piso de 13px é o mesmo da declaração de alergênico da LP. Contraste medido: --marrom sobre --creme = 5,16:1 (AA exige 4,5:1). */ .consent__texto { margin: 0; font-size: var(--fs-legal); line-height: var(--lh-legal); letter-spacing: var(--ls-legal); max-width: 78ch; } .consent__link { margin: 0; } /* Alvo de 44px também no link da Política: ele é um dos itens que a régua do 04-05 mede, e é por ele que se chega ao texto que a LGPD art. 9º exige. */ .consent__link a { display: inline-flex; align-items: center; min-height: var(--alvo-toque); padding-inline: var(--sp-4); color: var(--marrom); font-size: var(--fs-legal); text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------- 3. Primeira camada: simetria */ /* PRIV-02, e é a razão de o banner existir do jeito que existe. Não há NENHUMA regra neste arquivo que selecione o valor de um dos dois botões. A simetria não é "cuidado ao editar": ela é estruturalmente impossível de quebrar sem escrever um seletor novo de propósito. Os dois são `.consent__botao`, e o que vale para um vale para o outro por construção. `flex: 1 1 0` com `min-width` de 44px: os dois ocupam exatamente a mesma largura em qualquer viewport, inclusive quando os rótulos têm contagens de letras diferentes. */ .consent__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-8); } .consent__acoes .consent__botao { flex: 1 1 0; } /* Contraste medido: rótulo --creme sobre fundo --marrom = 5,16:1 (texto, AA exige 4,5:1). Fundo do botão contra o fundo do banner = 5,16:1 (WCAG 1.4.11 exige 3:1 para o limite do componente). */ .consent__botao { display: inline-flex; align-items: center; justify-content: center; /* O valor literal ANTES do token é rede de segurança, não redundância: se tokens.css não carregar (404, ordem de trocada, cache-buster apontando para arquivo que não existe), `var(--alvo-toque)` fica inválido e o alvo de toque de 44px simplesmente some — que é o modo de falha nº 2 do parecer, com o "Recusar" existindo e não sendo tocável. O piso do 03-UI-SPEC §5.2 é o único número deste arquivo que não pode depender de outro arquivo. */ min-height: 44px; min-height: var(--alvo-toque); min-width: 44px; min-width: var(--alvo-toque); padding: var(--sp-8) var(--sp-16); background: var(--marrom); border: 2px solid var(--marrom); border-radius: 999px; color: var(--creme); font-family: var(--ff-texto); font-weight: 600; font-size: var(--fs-corpo); line-height: var(--lh-corpo); letter-spacing: var(--ls-corpo); text-align: center; cursor: pointer; touch-action: manipulation; /* elimina o atraso de 300ms do duplo-toque */ } /* O botão da SEGUNDA camada. Ele pode ser diferente dos dois de cima porque não compete com eles: ele confirma uma escolha granular já feita nos campos ao lado. Contraste: --marrom sobre --creme = 5,16:1, e a borda repete o par. */ .consent__botao--secundario { background: transparent; color: var(--marrom); font-size: var(--fs-legal); } /* Anel DUPLO. O banner existe sobre o creme e sobre o vermelho do CTA, e nenhuma cor única passa 3:1 nos dois fundos: a sombra clara resolve o vermelho (5,73:1) e o contorno escuro resolve o creme (11,96:1). O contorno padrão do navegador é REAPROVEITADO como anel externo — nunca desligado. Desligá-lo sem substituto reprova o UI-SPEC §5.5, e a régua da fase procura exatamente por essa supressão neste arquivo. */ .consent__botao:focus-visible, .consent__resumo:focus-visible, .consent__link a:focus-visible, .links-legais__link:focus-visible { box-shadow: 0 0 0 3px var(--foco-interno); outline: 3px solid var(--foco-externo); outline-offset: 3px; } /* -------------------------------------------- 4. Segunda camada:
*/ .consent__detalhes { margin: 0; } /* `display` NÃO é alterado aqui de propósito: o nasce como item de lista e é o marcador dele que informa "isto abre". Trocar por flex apaga o marcador em parte dos navegadores, e o controle passa a parecer texto. */ .consent__resumo { min-height: 44px; /* mesma rede de segurança do .consent__botao */ min-height: var(--alvo-toque); min-width: var(--alvo-toque); padding: 11px var(--sp-8); color: var(--marrom); font-size: var(--fs-legal); line-height: var(--lh-corpo); cursor: pointer; } .consent__categorias { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-8) 0 0; } /* O