/** * Base visual do site inteiro: tokens, cabeçalho, rodapé e botão de WhatsApp. * * Este arquivo vale para TODAS as páginas. O `biblioteca.css` depende dele * (`wp_register_style` com dependência), então os tokens ficam aqui, num lugar * só, e não há duas verdades sobre a cor da casa. * * Disciplina de escopo, porque isto pinta o site inteiro: * * 1. Todo seletor começa em `body.bca-site` ou numa classe `bca-`. * 2. Nenhum seletor de elemento solto (`h2 {}`, `a {}`, `button {}`). * 3. Nada que altere `input`, `form` ou tabela fora do que é nosso — o * formulário de contato é do wpforms e não pode ser afetado. */ /* ── Fontes ─────────────────────────────────────────────────────────────── */ /* As mesmas duas famílias auto-hospedadas que a Biblioteca Virtual já usa: subconjunto latino, variáveis, 67 KB nos dois arquivos. */ @font-face { font-family: 'BCA Fredoka'; src: url( '../fontes/fredoka-var.woff2' ) format( 'woff2-variations' ), url( '../fontes/fredoka-var.woff2' ) format( 'woff2' ); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: 'BCA Nunito'; src: url( '../fontes/nunito-var.woff2' ) format( 'woff2-variations' ), url( '../fontes/nunito-var.woff2' ) format( 'woff2' ); font-weight: 300 800; font-style: normal; font-display: swap; } /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { --bca-fundo: #faf8f2; --bca-superficie: #ffffff; --bca-tinta: #1f2417; --bca-tinta-suave: #5a6350; --bca-realce: var( --ast-global-color-0, #ffd936 ); --bca-acento: #dab200; /* #dab200 mede 2,03:1 sobre branco e reprova como texto. Como texto vale este tom mais escuro, que mede 4,83:1; o #dab200 fica para preenchimento, borda e brilho, onde contraste de texto não se aplica. */ --bca-acento-txt: #8a6f00; --bca-estrutura: #536942; --bca-borda: rgba( 83, 105, 66, 0.18 ); --bca-borda-forte: rgba( 83, 105, 66, 0.34 ); --bca-sombra: 0 1px 2px rgba( 31, 36, 23, 0.04 ), 0 8px 24px rgba( 31, 36, 23, 0.06 ); --bca-sombra-alta: 0 2px 4px rgba( 31, 36, 23, 0.06 ), 0 18px 40px rgba( 31, 36, 23, 0.12 ); --bca-display: 'BCA Fredoka', 'Trebuchet MS', system-ui, sans-serif; --bca-texto-fonte: 'BCA Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; /* O azul da placa da Casa Amarela, medido na foto. */ --bca-azul: #1e3780; --bca-azul-fundo: #eef1f9; --bca-azul-borda: rgba( 30, 55, 128, 0.22 ); /* Sombra dupla do claymorphism: uma externa que apoia, uma interna que infla. Sem linha dura em canto nenhum. */ --bca-clay: 0 10px 24px rgba( 31, 36, 23, 0.10 ), inset 0 -3px 0 rgba( 31, 36, 23, 0.06 ); --bca-clay-alta: 0 18px 38px rgba( 31, 36, 23, 0.16 ), inset 0 -3px 0 rgba( 31, 36, 23, 0.06 ); /* Balanço com leve ultrapassagem — é o que faz parecer objeto, não caixa. */ --bca-balanco: cubic-bezier( 0.34, 1.56, 0.64, 1 ); --bca-suave: cubic-bezier( 0.16, 1, 0.3, 1 ); /* Decoração — nunca cor de texto. */ --bca-magia: linear-gradient( 120deg, #ffd936 0%, #ffb43a 45%, #1e3780 100% ); --bca-magia-quente: linear-gradient( 120deg, #ffd936 0%, #ff8f3a 100% ); /* * Rodapé em azul escuro, e não no verde do tema. * * O verde vinha do Astra e nunca foi cor da Casa Amarela; o azul é o da * placa, o mesmo `--bca-azul` (#1e3780) puxado para o escuro. Branco sobre * ele mede 15,2:1, e o amarelo da casa, 10,4:1 — os dois com folga. */ --bca-rodape-fundo: #101a3d; --bca-rodape-linha: rgba( 255, 255, 255, 0.18 ); --bca-largura: 1180px; --bca-topo: 84px; /* altura do cabeçalho solto */ --bca-topo-fixo: 64px; /* altura depois de encolher */ } /* ── Base do site ───────────────────────────────────────────────────────── */ body.bca-site { font-family: var( --bca-texto-fonte ); } /* * Âncora que não para debaixo do cabeçalho fixo. * * `scroll-margin-top` no alvo é o jeito certo: mexer no `padding` do destino * mudaria o desenho da seção só para compensar a barra. */ html:has( body.bca-site ) { scroll-behavior: smooth; } body.bca-site [id] { scroll-margin-top: calc( var( --bca-topo-fixo ) + 16px ); } @media ( prefers-reduced-motion: reduce ) { html:has( body.bca-site ) { scroll-behavior: auto; } } /* ── Revelação ao rolar (compartilhada) ─────────────────────────────────── */ /* * Mesma ideia da Biblioteca Virtual: quem revela é uma varredura por quadro no * `site.js`, e não `IntersectionObserver` — o observador só avisa quando o * estado MUDA entre dois quadros, e numa rolagem rápida o elemento pula de * "abaixo da tela" para "acima da tela" sem nunca ter intersectado. */ .bca-revela { opacity: 0; transform: translateY( 20px ); transition: opacity 380ms ease var( --bca-atraso, 0ms ), transform 460ms var( --bca-balanco ) var( --bca-atraso, 0ms ); /* Rede de segurança: se o JavaScript não correr, tudo aparece em 3s. */ animation: bca-resgate-site 1ms linear 3s forwards; } .bca-revela.esta-dentro { opacity: 1; transform: none; animation: none; } @keyframes bca-resgate-site { to { opacity: 1; transform: none; } } /* Na impressão nada foi rolado, então nada teria sido revelado. */ @media print { .bca-revela { opacity: 1 !important; transform: none !important; animation: none !important; } } /* ── Botões da casa ─────────────────────────────────────────────────────── */ .bca-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; font-family: var( --bca-texto-fonte ); font-size: 16px; font-weight: 700; line-height: 1.2; color: var( --bca-tinta ); text-decoration: none; background: var( --bca-realce ); border: 2px solid var( --bca-acento ); border-radius: 999px; box-shadow: var( --bca-clay ); cursor: pointer; transition: transform 200ms var( --bca-balanco ), box-shadow 200ms ease, background-color 200ms ease; } .bca-btn:hover, .bca-btn:focus-visible { color: var( --bca-tinta ); transform: translateY( -3px ); box-shadow: var( --bca-clay-alta ); } /* Retorno tátil: em toque não há hover, e afundar é o único sinal de acerto. */ .bca-btn:active { transform: translateY( 0 ) scale( 0.97 ); } .bca-btn--fantasma { color: var( --bca-tinta ); background: rgba( 255, 255, 255, 0.92 ); border-color: var( --bca-borda-forte ); } .bca-btn--azul { color: #ffffff; background: var( --bca-azul ); border-color: var( --bca-azul ); } .bca-btn--azul:hover, .bca-btn--azul:focus-visible { color: #ffffff; } body.bca-site :focus-visible { outline: 3px solid var( --bca-azul ); outline-offset: 2px; } /* ── Cabeçalho ──────────────────────────────────────────────────────────── */ /* * Dois estados, e o segundo é onde estava o defeito. * * Na home o cabeçalho nasce transparente sobre a foto — é assim que o Astra * entrega, e o texto dele é branco por isso. Ao rolar, o fundo vira creme * sólido... e o texto continuava branco. Branco sobre creme: **invisível**. * Medido antes da correção: `rgb(255,255,255)` sobre `rgba(250,248,242,0.96)`, * 1,07:1. * * A correção precisa de especificidade: as regras do cabeçalho transparente do * Astra vêm de `.ast-theme-transparent-header ... .menu-link`, com três classes. * Por isso cada seletor aqui carrega `body.bca-site.bca-preso`. */ body.bca-site #masthead { transition: background-color 240ms ease, box-shadow 240ms ease, backdrop-filter 240ms ease; } body.bca-site.bca-preso #masthead { position: sticky; top: 0; z-index: 90; background: rgba( 250, 248, 242, 0.97 ); box-shadow: 0 2px 20px rgba( 31, 36, 23, 0.12 ); -webkit-backdrop-filter: saturate( 150% ) blur( 10px ); backdrop-filter: saturate( 150% ) blur( 10px ); } /* Fileira mais baixa quando gruda: o cabeçalho encolhe e devolve tela. */ body.bca-site.bca-preso .ast-primary-header-bar, body.bca-site.bca-preso .site-primary-header-wrap { min-height: var( --bca-topo-fixo ); padding-top: 4px; padding-bottom: 4px; transition: min-height 240ms ease, padding 240ms ease; } /* ── O texto e os ícones no estado sólido ───────────────────────────────── */ body.bca-site.bca-preso #ast-desktop-header .main-header-menu .menu-link, body.bca-site.bca-preso #ast-desktop-header .main-header-menu > .menu-item > .menu-link, body.bca-site.bca-preso #ast-desktop-header .ast-builder-menu .menu-item > .menu-link, body.bca-site.bca-preso #ast-mobile-header .menu-link, body.bca-site.bca-preso .site-title a, body.bca-site.bca-preso .site-description { color: var( --bca-tinta ); } body.bca-site.bca-preso #ast-desktop-header .main-header-menu .current-menu-item > .menu-link, body.bca-site.bca-preso #ast-desktop-header .main-header-menu .current_page_item > .menu-link, body.bca-site.bca-preso #ast-desktop-header .main-header-menu .menu-link:hover { color: var( --bca-azul ); } /* O botão do menu de celular e as redes também herdavam branco. */ body.bca-site.bca-preso .menu-toggle, body.bca-site.bca-preso .menu-toggle svg, body.bca-site.bca-preso .ast-mobile-svg { color: var( --bca-tinta ); fill: currentColor; } /* ── Logo ───────────────────────────────────────────────────────────────── */ /* O link é `inline` e ficava com 20px de altura embrulhando uma imagem de 50px: a área clicável não acompanhava o que se vê. */ body.bca-site .custom-logo-link, body.bca-site .site-logo-img { display: inline-flex; align-items: center; } /* * O logo não pode ter LARGURA e ALTURA fixadas ao mesmo tempo. * * O Astra grava a largura no Customizer — 60px no desktop, **50px no celular** — * e eu fixava a altura em 60px. Resultado medido a 360px: 50×60 num arquivo que * é 1079×1075, ou seja **17% de esmagamento**. A régua aqui é simples: manda a * altura, a largura acompanha, e `object-fit: contain` é a rede de segurança * para o dia em que alguém fixar as duas de novo. * * `!important` na largura porque a regra do tema é inline (`header * .custom-logo-link img`) e vem depois de tudo. */ body.bca-site .custom-logo-link img, body.bca-site .custom-logo { /* `flex: none` porque numa fileira flex que aperta, a imagem é a primeira a ser espremida — e imagem espremida é imagem distorcida. */ flex: none; width: auto !important; max-width: none !important; /* 64px: a marca era o menor elemento da barra — o botão do menu mede 46px de caixa e os dois ícones sociais 46px cada, e o logo ficava em 56px parecendo miúdo entre eles. Agora ele é o maior, que é o que se espera de uma marca. */ height: 64px; object-fit: contain; transition: height 240ms ease; } body.bca-site.bca-preso .custom-logo-link img, body.bca-site.bca-preso .custom-logo { height: 52px; } @media ( max-width: 767px ) { body.bca-site .custom-logo-link img, body.bca-site .custom-logo { /* No celular a referência é o hambúrguer (46px de caixa): 56px deixa a marca visivelmente maior do que ele sem empurrar a barra para baixo — o recuo do `.site-branding` encolhe junto, logo abaixo. */ height: 56px; } body.bca-site.bca-preso .custom-logo-link img, body.bca-site.bca-preso .custom-logo { height: 48px; } /* * O Astra dá 14.6px de recuo em cima e embaixo da marca. Com o logo em 48px * a barra fechava em 77px; com 56px fecharia em 85px e o cabeçalho de celular * ficaria mais alto do que o conteúdo que ele cobre. Recuo menor mantém a * altura de antes com uma marca maior dentro. */ body.bca-site .ast-mobile-header-wrap .site-branding { padding-top: 10px; padding-bottom: 10px; } } /* ── Item do menu e o sublinhado que cresce ─────────────────────────────── */ body.bca-site #ast-desktop-header .main-header-menu > .menu-item > .menu-link { position: relative; font-weight: 600; transition: color 180ms ease; } body.bca-site #ast-desktop-header .main-header-menu > .menu-item > .menu-link::after { content: ''; position: absolute; right: 12px; bottom: 26px; left: 12px; height: 3px; background: var( --bca-realce ); border-radius: 3px; transform: scaleX( 0 ); transform-origin: left center; transition: transform 240ms var( --bca-balanco ); } body.bca-site.bca-preso #ast-desktop-header .main-header-menu > .menu-item > .menu-link::after { bottom: 14px; } body.bca-site #ast-desktop-header .main-header-menu > .menu-item:hover > .menu-link::after, body.bca-site #ast-desktop-header .main-header-menu > .menu-item:focus-within > .menu-link::after, body.bca-site #ast-desktop-header .main-header-menu > .current-menu-item > .menu-link::after, body.bca-site #ast-desktop-header .main-header-menu > .current_page_item > .menu-link::after { transform: scaleX( 1 ); } /* ── O botão "Doar" ─────────────────────────────────────────────────────── */ /* * Antes ele herdava a altura da fileira inteira — 79x94px, uma bolha amarela * gigante ao lado de itens de texto. Agora é uma pílula com altura própria, * centrada verticalmente no meio da fileira. */ body.bca-site .bca-menu-doar { display: flex; align-items: center; } body.bca-site .bca-menu-doar > .menu-link { display: inline-flex; align-items: center; justify-content: center; height: 44px; margin-left: 10px; padding: 0 22px !important; font-size: 15px; font-weight: 700; line-height: 1; color: var( --bca-tinta ) !important; background: var( --bca-realce ); border: 2px solid var( --bca-acento ); border-radius: 999px; box-shadow: 0 6px 16px rgba( 218, 178, 0, 0.35 ); transition: transform 200ms var( --bca-balanco ), box-shadow 200ms ease, height 240ms ease; } body.bca-site.bca-preso .bca-menu-doar > .menu-link { height: 38px; font-size: 14.5px; } body.bca-site .bca-menu-doar > .menu-link:hover, body.bca-site .bca-menu-doar > .menu-link:focus-visible { transform: translateY( -2px ); box-shadow: 0 10px 22px rgba( 218, 178, 0, 0.45 ); } body.bca-site .bca-menu-doar > .menu-link:active { transform: translateY( 0 ) scale( 0.97 ); } body.bca-site .bca-menu-doar > .menu-link::after { content: none !important; } /* ── Rodapé ─────────────────────────────────────────────────────────────── */ /* * O rodapé do tema é escondido, e não removido: a fileira dele é montada pelo * construtor do Astra, que guarda a configuração no BANCO — e configuração de * banco não viaja no nosso pacote de deploy. Esconder por CSS e desenhar o * nosso é o único caminho que chega igual em produção. */ body.bca-site .site-primary-footer-wrap, body.bca-site .site-above-footer-wrap, body.bca-site .site-below-footer-wrap { display: none !important; } .bca-rodape { color: rgba( 255, 255, 255, 0.9 ); background: radial-gradient( 70% 120% at 0% 0%, rgba( 30, 55, 128, 0.55 ) 0%, rgba( 30, 55, 128, 0 ) 60% ), var( --bca-rodape-fundo ); border-top: 6px solid var( --bca-realce ); } .bca-rodape__interno { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; max-width: var( --bca-largura ); margin: 0 auto; padding: 56px 24px 32px; } .bca-rodape__titulo { margin: 0 0 14px; font-family: var( --bca-display ); font-size: 17px; font-weight: 600; /* O Astra aplica `letter-spacing: -2px` nos títulos do tema, e numa fonte arredondada isso cola as letras umas nas outras. Já foi corrigido nos títulos da Biblioteca Virtual pelo mesmo motivo. */ letter-spacing: normal; color: var( --bca-realce ); } .bca-rodape__lista { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.55; } .bca-rodape__lista li + li { margin-top: 10px; } .bca-rodape__unidade strong { display: block; color: #ffffff; font-weight: 700; } .bca-rodape__endereco { color: rgba( 255, 255, 255, 0.78 ); } /* * O link do rodapé precisa deste seletor todo porque o Astra usa * `#astra-footer-menu .menu-item > a` — um ID, que vence qualquer classe. Já * custou um bug de contraste (preto sobre verde, 1,9:1) nesta base. */ .bca-rodape a, body.bca-site .bca-rodape a, body.bca-site .bca-rodape .menu-item > a { color: #ffffff; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 160ms ease, color 160ms ease; } .bca-rodape a:hover, .bca-rodape a:focus-visible { color: var( --bca-realce ); border-bottom-color: var( --bca-realce ); } .bca-rodape__marca { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .bca-rodape__marca img { width: 54px; height: 54px; border-radius: 50%; background: #ffffff; } .bca-rodape__frase { max-width: 34ch; font-size: 15px; line-height: 1.6; color: rgba( 255, 255, 255, 0.82 ); } .bca-rodape__redes { display: flex; gap: 10px; margin-top: 16px; } .bca-rodape__rede { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var( --bca-tinta ); background: var( --bca-realce ); border-radius: 14px; transition: transform 200ms var( --bca-balanco ); } .bca-rodape__rede:hover, .bca-rodape__rede:focus-visible { color: var( --bca-tinta ); transform: scale( 1.08 ); } .bca-rodape__pix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px; font-size: 14px; background: rgba( 255, 255, 255, 0.08 ); border: 1px solid var( --bca-rodape-linha ); border-radius: 12px; } .bca-rodape__copiar { min-height: 36px; padding: 6px 14px; font: inherit; font-weight: 700; color: var( --bca-tinta ); background: var( --bca-realce ); border: 0; border-radius: 999px; cursor: pointer; transition: transform 180ms var( --bca-balanco ); } .bca-rodape__copiar:active { transform: scale( 0.94 ); } .bca-rodape__base { max-width: var( --bca-largura ); margin: 0 auto; padding: 18px 24px 28px; font-size: 13.5px; color: rgba( 255, 255, 255, 0.72 ); border-top: 1px solid var( --bca-rodape-linha ); } @media ( max-width: 900px ) { .bca-rodape__interno { grid-template-columns: 1fr 1fr; gap: 32px; } } @media ( max-width: 600px ) { .bca-rodape__interno { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px 24px; } } /* ── Botão de WhatsApp ──────────────────────────────────────────────────── */ /* * Fixo em todas as páginas. `z-index` 80: acima do conteúdo, ABAIXO do modal de * retirada da Biblioteca Virtual (que usa 1000) — senão o botão flutuaria por * cima do formulário de cadastro. */ .bca-zap { position: fixed; right: 18px; bottom: calc( 18px + env( safe-area-inset-bottom, 0px ) ); z-index: 80; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; color: #ffffff; /* * Verde mais escuro que o #25d366 da marca, e por medida: branco sobre * #25d366 dá 1,98:1 — reprova até no mínimo de 3:1 que vale para elemento * gráfico, quanto mais nos 4,5:1 de texto. Este mede 5,4:1 e continua sendo * reconhecível como "o verde do WhatsApp". */ background: #147a3e; border-radius: 50%; box-shadow: 0 10px 26px rgba( 31, 36, 23, 0.28 ); transition: transform 220ms var( --bca-balanco ), box-shadow 220ms ease; } .bca-zap:hover, .bca-zap:focus-visible { color: #ffffff; transform: scale( 1.08 ); box-shadow: 0 16px 34px rgba( 31, 36, 23, 0.34 ); } .bca-zap:active { transform: scale( 0.94 ); } .bca-zap svg { width: 34px; height: 34px; } /* * Duas animações, e elas não brigam porque mexem em propriedades diferentes. * * 1. `bca-zap-entra` usa `transform` — um pulso só, na chegada. * 2. `bca-zap-flutua` usa `translate`, que é propriedade própria desde os * navegadores de 2021 e **não** é a mesma coisa que `transform`. * * A separação existe por um motivo prático: animação em laço ganha de qualquer * declaração comum, então uma flutuação escrita em `transform` apagaria o * `scale( 1.08 )` do hover e o `scale( 0.94 )` do clique — o botão pararia de * responder ao dedo. Com `translate`, os dois convivem: ele sobe e desce sempre, * e ainda cresce quando o ponteiro chega. * * 3,6s por ciclo e 10px de curso: é lento o bastante para ler como respiração e * não como aviso piscando. Quem pediu menos movimento não vê nada disso — o * bloco de `prefers-reduced-motion` mais abaixo desliga as duas. */ .bca-zap { animation: bca-zap-entra 520ms var( --bca-balanco ) 900ms backwards, bca-zap-flutua 3.6s ease-in-out 1.6s infinite; } @keyframes bca-zap-flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } @keyframes bca-zap-entra { from { opacity: 0; transform: scale( 0.4 ) translateY( 12px ); } to { opacity: 1; transform: none; } } /* O rótulo aparece no desktop ao passar o mouse: ícone sozinho não diz o que é para quem nunca viu, e no celular ele ocuparia metade da tela. */ .bca-zap__rotulo { position: absolute; right: 76px; padding: 8px 14px; font-size: 14px; font-weight: 700; white-space: nowrap; color: var( --bca-tinta ); background: #ffffff; border-radius: 999px; box-shadow: var( --bca-sombra ); opacity: 0; transform: translateX( 8px ); transition: opacity 200ms ease, transform 200ms var( --bca-balanco ); pointer-events: none; } @media ( hover: hover ) and ( pointer: fine ) { .bca-zap:hover .bca-zap__rotulo, .bca-zap:focus-visible .bca-zap__rotulo { opacity: 1; transform: none; } } @media ( max-width: 600px ) { .bca-zap { right: 14px; bottom: calc( 14px + env( safe-area-inset-bottom, 0px ) ); } .bca-zap__rotulo { display: none; } } @media print { .bca-zap { display: none !important; } } @media ( prefers-reduced-motion: reduce ) { .bca-zap, .bca-btn, .bca-rodape__rede, body.bca-site #masthead { animation: none !important; transition: none !important; } .bca-zap { translate: none !important; } .bca-zap:hover, .bca-btn:hover, .bca-rodape__rede:hover { transform: none; } } /* ── Aviso de "copiado" ─────────────────────────────────────────────────── */ .bca-copiado { position: fixed; bottom: 24px; left: 50%; z-index: 95; padding: 10px 18px; font-size: 15px; font-weight: 700; color: var( --bca-tinta ); background: var( --bca-realce ); border-radius: 999px; box-shadow: var( --bca-clay-alta ); transform: translateX( -50% ); } /* ── Gaveta abaixo de 1024px ────────────────────────────────────────────── */ /* * Sete itens de menu mais o botão "Doar" não cabem entre 768 e 1024px: as * palavras começam a se colar e o alvo de toque encolhe. O ponto de virada do * tema é 921px; aqui ele sobe para 1024px. */ @media ( max-width: 1024px ) { body.bca-site #ast-desktop-header { display: none; } body.bca-site #ast-mobile-header { display: block; } } /* ── O menu não pode transbordar ────────────────────────────────────────── */ /* * Medido a 1280px: com sete itens, o botão "Doar" e os dois ícones sociais, a * fileira do cabeçalho estoura e o "Doar" sai cortado pela borda da tela. O * Astra monta essa fileira com colunas de largura automática e `nowrap`, então * quem tem de ceder é o espaçamento — não o conteúdo. */ @media ( max-width: 1400px ) { body.bca-site #ast-desktop-header .main-header-menu > .menu-item > .menu-link { padding-left: 12px; padding-right: 12px; font-size: 15px; } body.bca-site #ast-desktop-header .ast-builder-grid-row { gap: 8px; } body.bca-site #ast-desktop-header .site-header-primary-section-right { min-width: 0; } } @media ( max-width: 1200px ) { body.bca-site #ast-desktop-header .main-header-menu > .menu-item > .menu-link { padding-left: 9px; padding-right: 9px; font-size: 14.5px; } body.bca-site .bca-menu-doar > .menu-link { margin-left: 4px; padding: 9px 14px !important; } } /* ── Instagram e Facebook no cabeçalho ──────────────────────────────────── */ /* * Três defeitos foram corrigidos aqui de uma vez: * * 1. **Ícone branco em fundo branco.** A cor vinha do cabeçalho transparente * (`rgb(246,248,245)`) e continuava a mesma quando o fundo virava creme — * os dois botões simplesmente sumiam. Agora cada rede tem fundo próprio nos * DOIS estados. * 2. **Distorção.** O SVG estava numa fileira flex sem `flex: none`: quando o * espaço apertava, ele era espremido e o desenho esticava. * 3. **Tamanho e respiro.** Caixa de 40px com 8px entre elas. */ @media ( min-width: 1200px ) { body.bca-site .bca-social { display: flex; align-items: center; } body.bca-site .bca-social > .bca-social__link { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; min-width: 40px; height: 40px; margin-left: 8px; padding: 0 !important; border-radius: 13px; transition: transform 200ms var( --bca-balanco ), box-shadow 200ms ease, background-color 200ms ease; } body.bca-site .bca-social__icone { flex: none; box-sizing: border-box; width: 20px; height: 20px; padding: 0; border: 0; } /* O nome fica só para leitor de tela: no topo, o ícone basta. */ body.bca-site .bca-social__nome { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect( 0 0 0 0 ); white-space: nowrap; border: 0; } /* * ORDEM IMPORTA AQUI, e a leva passada errou nela. * * O padrão é o cabeçalho SÓLIDO — é o que a Biblioteca Virtual, a ficha do * livro e todas as páginas internas usam desde o primeiro pixel. O vidro * branco com ícone branco só faz sentido sobre a foto do herói, e quem tem * herói é a home. * * Antes, o vidro era o padrão e o sólido só entrava com `.bca-preso`, a * classe que o JavaScript põe depois de 80px de rolagem. Na Biblioteca * Virtual, que nunca é transparente, isso deixava dois ícones brancos sobre * uma pastilha clara: medido, o traço saía `rgb(255,255,255)` sobre * `#eef1f9` — 1,05:1, invisível de fato. * * A régua NÃO pode ser `ast-theme-transparent-header`: medido, o Astra põe * essa classe em TODAS as páginas deste site — inclusive "Quem Somos", que * tem fundo claro atrás do cabeçalho. A régua certa é `bca-home-ativa`, que o * plugin põe só onde o bloco da home está, que é o único lugar com foto * atrás do menu. * * A cor precisa ser dita TAMBÉM no ``: o desenho usa * `stroke="currentColor"`. */ body.bca-site .bca-social:nth-last-child( 2 ) > .bca-social__link, body.bca-site .bca-social:nth-last-child( 2 ) > .bca-social__link .bca-social__icone { color: #4a2c00; } body.bca-site .bca-social:nth-last-child( 2 ) > .bca-social__link { background: linear-gradient( 130deg, #ffeaa8, #ffd07a ); box-shadow: inset 0 0 0 1px rgba( 138, 111, 0, 0.28 ); } body.bca-site .bca-social:last-child > .bca-social__link, body.bca-site .bca-social:last-child > .bca-social__link .bca-social__icone { color: var( --bca-azul ); } body.bca-site .bca-social:last-child > .bca-social__link { background: var( --bca-azul-fundo ); box-shadow: inset 0 0 0 1px var( --bca-azul-borda ); } body.bca-site .bca-social__icone { transition: color 240ms ease; } /* Estado transparente (só a home, e só antes de rolar): vidro claro sobre a foto, ícone branco. */ body.bca-site.bca-home-ativa:not( .bca-preso ) .bca-social > .bca-social__link, body.bca-site.bca-home-ativa:not( .bca-preso ) .bca-social > .bca-social__link .bca-social__icone { color: #ffffff; } body.bca-site.bca-home-ativa:not( .bca-preso ) .bca-social > .bca-social__link { background: rgba( 255, 255, 255, 0.18 ); box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.35 ); } body.bca-site .bca-social > .bca-social__link:hover, body.bca-site .bca-social > .bca-social__link:focus-visible { transform: translateY( -2px ) scale( 1.06 ); } body.bca-site .bca-social > .menu-link::after { content: none !important; } } @media ( max-width: 1199px ) { /* Abaixo disso o menu do topo já está apertado: as redes ficam no rodapé, com nome e alvo grande, e na barra do celular. */ body.bca-site #ast-desktop-header .bca-social { display: none; } } /* A barra de ícones ao lado do hambúrguer, no celular. Quem monta é o `site.js`; aqui é só a aparência. */ body.bca-site .bca-social-barra { display: flex; align-items: center; gap: 6px; margin-right: 8px; } body.bca-site .bca-social-barra .bca-social__link { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 14px; transition: transform 200ms var( --bca-balanco ); } body.bca-site .bca-social-barra .bca-social__nome { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect( 0 0 0 0 ); white-space: nowrap; border: 0; } body.bca-site .bca-social-barra .bca-social__icone { flex: none; box-sizing: border-box; width: 34px; height: 34px; padding: 8px; border: 1px solid transparent; border-radius: 12px; } body.bca-site .bca-social-barra .bca-social__link:first-child .bca-social__icone { color: #4a2c00; background: linear-gradient( 130deg, #ffeaa8, #ffd07a ); border-color: rgba( 138, 111, 0, 0.28 ); } body.bca-site .bca-social-barra .bca-social__link:last-child .bca-social__icone { color: var( --bca-azul ); background: var( --bca-azul-fundo ); border-color: var( --bca-azul-borda ); } body.bca-site .bca-social-barra .bca-social__link:active { transform: scale( 0.94 ); } /* * Alvo de toque nos links de texto do rodapé. * * Medido: 21px de altura — abaixo dos 24px que valem como mínimo para alvo de * ponteiro. Como são links dentro de lista, a correção é aumentar a área * clicável sem mexer no desenho: um pouco de respiro em cima e embaixo. */ .bca-rodape__lista a, .bca-rodape__lista .menu-item > a { display: inline-block; min-height: 24px; padding: 3px 0; } /* ── Legibilidade herdada do conteúdo antigo ────────────────────────────── */ /* * Achados pela varredura de contraste nas páginas que não foram refeitas. Não * são defeitos do redesenho — são de antes —, mas letra que ninguém lê é letra * que não existe, e a correção cabe em três regras. * * A regra de ouro continua valendo: amarelo é cor de fundo, não de texto. O * #ffd936 mede 1,6:1 sobre branco; o mesmo amarelo escurecido (#8a6f00) mede * 4,8:1 e continua sendo a cor da casa. */ /* * Amarelo #f9c508 sobre branco: 1,61:1. Aparece em dois lugares, os dois * pintados por CSS que o Spectra gera POR BLOCO — seletores como * `.uagb-block-gvbhpodc .uagb-ifb-title-wrap .uagb-ifb-title-prefix`, com três * classes. Por isso a correção precisa nomear o bloco: um seletor genérico * perde a disputa de especificidade e não muda nada (tentei; não mudou). * * `.uagb-block-gvbhpodc` — numerais "01/02/03" em "Quem Somos". * `.uagb-block-rv2524am` — "Cada contribuição faz diferença." em "Como Ajudar". * * Se um dia esses blocos forem recriados no editor, a classe muda e a regra * deixa de valer — mas aí a cor também terá sido escolhida de novo. */ body.bca-site .uagb-block-gvbhpodc .uagb-ifb-title-wrap .uagb-ifb-title-prefix, body.bca-site .uagb-ifb-title-wrap .uagb-ifb-title-prefix, body.bca-site .uagb-block-rv2524am .uagb-ifb-title, body.bca-site .uagb-block-rv2524am .uagb-ifb-title strong { color: var( --bca-acento-txt ); } /* Formulário de contato (wpforms): o asterisco de campo obrigatório media 4:1 e o botão de enviar, 4,39:1 — os dois passam raspando por baixo do mínimo. */ body.bca-site .wpforms-required-label { color: #c40000; } body.bca-site .wpforms-submit { color: var( --bca-tinta ); font-weight: 700; } /* ── Presença do cabeçalho ──────────────────────────────────────────────── */ /* * Três gestos curtos, e nenhum em laço: * * 1. o cabeçalho desce ao carregar (420ms), em vez de simplesmente estar lá; * 2. o "Doar" dá um pulso único quando o cabeçalho gruda — é o momento em que * ele muda de tamanho, e o pulso explica a mudança em vez de escondê-la; * 3. o logo e o menu acompanham a mudança de altura com a mesma curva. */ body.bca-site #masthead { animation: bca-topo-desce 420ms var( --bca-balanco ) backwards; } @keyframes bca-topo-desce { from { opacity: 0; transform: translateY( -14px ); } to { opacity: 1; transform: none; } } body.bca-site.bca-preso .bca-menu-doar > .menu-link { animation: bca-doar-pulso 420ms var( --bca-balanco ); } @keyframes bca-doar-pulso { 0% { transform: scale( 1 ); } 45% { transform: scale( 1.07 ); } 100% { transform: scale( 1 ); } } /* A barra do celular acompanha: ícones e hambúrguer no mesmo eixo, com o mesmo encolhimento do cabeçalho. */ body.bca-site.bca-preso #ast-mobile-header .site-header-primary-section-right { transition: transform 240ms var( --bca-balanco ); } @media ( prefers-reduced-motion: reduce ) { body.bca-site #masthead, body.bca-site.bca-preso .bca-menu-doar > .menu-link { animation: none !important; } } /* ══ Passada de celular ═════════════════════════════════════════════════════ * * Medidas feitas a 360px, não estimadas. */ /* ── Ícones do cabeçalho: maiores e longe da borda ──────────────────────── */ /* * Medido: hambúrguer de 38×38 (abaixo dos 44 de alvo de toque) com o símbolo de * 16px dentro, encostado a 20px da borda; as duas redes a 6px uma da outra. * Tudo pequeno demais e espremido no canto. * * O símbolo de 16px vem do Customizer do tema, por um seletor com atributo * (`[data-section="section-header-mobile-trigger"] …`) — daí a mira comprida * aqui embaixo: seletor curto não vence. */ body.bca-site .ast-button-wrap .menu-toggle, body.bca-site .menu-toggle { width: 46px; min-width: 46px; height: 46px; min-height: 46px; border-radius: 15px; } body.bca-site [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle .mobile-menu-toggle-icon .ast-mobile-svg, body.bca-site .ast-button-wrap .menu-toggle svg, body.bca-site .menu-toggle svg { width: 22px; height: 22px; } body.bca-site .ast-button-wrap .menu-toggle .mobile-menu-toggle-icon { width: 22px; height: 22px; } /* Respiro entre os três alvos e até a borda da tela. */ body.bca-site .bca-social-barra { gap: 10px; margin-right: 10px; } body.bca-site .bca-social-barra .bca-social__link { width: 46px; height: 46px; } body.bca-site .bca-social-barra .bca-social__icone { width: 38px; height: 38px; padding: 9px; } body.bca-site .ast-button-wrap .menu-toggle { margin: 0 16px 0 0; } body.bca-site #ast-mobile-header .site-header-primary-section-right { padding-right: 4px; } /* No desktop o mesmo problema, em escala: ícones de 40px colados na borda. */ @media ( min-width: 1200px ) { body.bca-site .bca-social > .bca-social__link { width: 44px; min-width: 44px; height: 44px; margin-left: 10px; } body.bca-site .bca-social__icone { width: 22px; height: 22px; } body.bca-site #ast-desktop-header .ast-primary-header-bar { padding-right: 34px; } } /* ── Rodapé: alvo e respiro de toque ────────────────────────────────────── */ @media ( max-width: 900px ) { /* * Os links do rodapé mediam 30px de altura com 5px entre eles: no polegar, * isso é errar de linha. Aqui viram 40px com 12px de folga — a régua de 44 * seria um rodapé de três telas. */ .bca-rodape__lista a, .bca-rodape__lista .menu-item > a { min-height: 40px; padding: 8px 0; } .bca-rodape__lista li + li { margin-top: 12px; } /* O menu do rodapé vem do WordPress com `li.menu-item`, e não pegava a regra de cima: os links ficavam a 4px um do outro — no polegar, isso é errar de linha. */ .bca-rodape__lista .menu-item + .menu-item { margin-top: 12px; } } /* O e-mail é uma palavra só de 31 caracteres: sem isto ele estoura a coluna. */ .bca-rodape__pix, .bca-rodape__lista { overflow-wrap: anywhere; } .bca-rodape__copiar { min-height: 44px; padding: 8px 18px; } /* ── Realce de toque ────────────────────────────────────────────────────── */ /* * O realce cinza padrão do navegador aparece por cima de tudo e some depois de * 300ms; um tom da casa, quase transparente, diz "peguei" sem sujar a tela. */ body.bca-site a, body.bca-site button, body.bca-site [role="button"] { -webkit-tap-highlight-color: rgba( 30, 55, 128, 0.12 ); } /* Em toque não existe hover: o afundar é o único retorno possível. */ @media ( hover: none ) { .bca-projeto:active, .bca-unidade:active, .bca-galeria__item:active, .bca-impacto__item:active { transform: scale( 0.985 ); transition: transform 120ms ease; } } /* ── Formulário de contato no celular ───────────────────────────────────── */ /* * Campo com fonte menor que 16px faz o iOS dar zoom sozinho ao focar — a página * pula, o cabeçalho sai de lugar e a pessoa perde o contexto. Medido no * formulário de contato: 14,59px. * * E campo de 40px é alvo apertado para o polegar: 48px é o confortável. */ @media ( max-width: 900px ) { body.bca-site .wpforms-field input, body.bca-site .wpforms-field select, body.bca-site .wpforms-field textarea { font-size: 16px; min-height: 48px; padding: 10px 12px; } body.bca-site .wpforms-field textarea { min-height: 120px; } body.bca-site .wpforms-submit { min-height: 48px; padding: 12px 24px; } /* Os ícones sociais do bloco do WordPress (na página de contato) vinham com 36px — abaixo do alvo de toque. */ body.bca-site .wp-block-social-link-anchor { width: 44px; height: 44px; } body.bca-site .wp-block-social-links .wp-social-link { margin-right: 10px; } } /* ── A gaveta do menu no celular ────────────────────────────────────────── */ /* * Medido: cada link da gaveta com 28px de altura. Aberta, ela é a navegação * inteira do site na mão de quem está de pé no ônibus — 48px por linha, com * separador discreto para o olho não escorregar. */ @media ( max-width: 1024px ) { body.bca-site .ast-mobile-popup-drawer .menu-link, body.bca-site #ast-mobile-header .main-header-menu .menu-link, body.bca-site #ast-mobile-header .ast-builder-menu-mobile .menu-link { display: flex; align-items: center; min-height: 48px; padding-top: 6px; padding-bottom: 6px; font-size: 17px; } body.bca-site #ast-mobile-header .main-header-menu .menu-item + .menu-item > .menu-link { border-top: 1px solid var( --bca-borda ); } /* O "Doar" na gaveta é botão, não item de lista. */ body.bca-site #ast-mobile-header .bca-menu-doar > .menu-link { justify-content: center; margin: 12px 0 4px; border-top: 0; } } /* ── O CSS que mora no banco ─────────────────────────────────────────────── */ /* * O Customizer deste site tem "CSS adicional" escrito à mão numa reforma * anterior, e ele usa `!important`. As três regras que importam aqui: * * .home.ast-header-transparent .main-header-menu a { color:#fff !important } * body:not(.home) #masthead { background:#fff !important; box-shadow:… !important } * body:not(.home) .main-header-menu a { color:#111 !important; opacity:1 !important } * #masthead { position:sticky; top:0; z-index:99999 } * * A primeira é letra morta — pede a classe `ast-header-transparent`, e o Astra 4 * escreve `ast-theme-transparent-header`. As outras estão vivas, e o efeito * medido é este: toda página interna recebe cabeçalho BRANCO PURO, enquanto a * home rolada fica no creme da casa. Duas cores de barra no mesmo site. * * Não dá para corrigir isso apagando a regra: aquele CSS mora numa `option` do * banco, e option de banco não viaja no pacote de deploy — em produção ele * continuaria lá. Então a correção é pelo código, com o mesmo `!important` e * especificidade maior, que é o que o navegador entende. * * O topo da home continua de fora: lá o cabeçalho nasce transparente sobre a * foto, e só vira sólido com `.bca-preso`. */ body.bca-site:not( .bca-home-ativa ) #masthead, body.bca-site.bca-preso #masthead { background: rgba( 250, 248, 242, 0.97 ) !important; box-shadow: 0 2px 20px rgba( 31, 36, 23, 0.12 ) !important; } /* ── Vocabulário visual comum às páginas montadas por bloco ─────────────── */ /* * Isto morava no `home.css`, e foi um erro: selo, título com pincelada, * parágrafo de apoio, cabeça de seção e cartão de número são o alfabeto de * TODA página desenhada por um bloco nosso — home, Nosso Impacto, Como Ajudar. * * O sintoma de deixá-los lá: a página de impacto renderizou os selos do herói * como lista com marcador e o título sem a pincelada amarela, porque a folha da * home não carrega nela. Vocabulário compartilhado mora na folha compartilhada. */ .bca-secao { max-width: var( --bca-largura ); margin: 0 auto; padding: 88px 24px; } .bca-secao--cheia { position: relative; padding: 0; } .bca-cabeca { max-width: 62ch; margin: 0 auto 44px; text-align: center; } .bca-titulo { margin: 0 0 14px; font-family: var( --bca-display ); font-size: clamp( 30px, 4.4vw, 46px ); font-weight: 600; line-height: 1.1; /* O Astra aplica letter-spacing negativo nos h2 do tema, o que cola as palavras numa fonte arredondada. */ letter-spacing: normal; color: var( --bca-tinta ); } .bca-titulo--claro { color: #ffffff; } /* A palavra realçada ganha a pincelada da casa — abaixo das letras, nunca cruzando: traço cruzando texto já rendeu queixa nesta base. */ .bca-realce { position: relative; display: inline-block; padding-bottom: 8px; color: var( --bca-azul ); white-space: nowrap; } .bca-realce::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 10px; background: linear-gradient( 90deg, #ffd936 0%, #ffb43a 70%, rgba( 255, 180, 58, 0.4 ) 100% ); border-radius: 999px; opacity: 0.75; transform: scaleX( 0 ); transform-origin: left center; transition: transform 520ms var( --bca-balanco ) 160ms; } .bca-revela.esta-dentro .bca-realce::after, .esta-dentro .bca-realce::after, .bca-heroi-home .bca-realce::after { transform: scaleX( 1 ); } .bca-realce--azul { color: var( --bca-realce ); } .bca-paragrafo { margin: 0 0 18px; max-width: 62ch; font-size: 17px; line-height: 1.65; color: var( --bca-tinta-suave ); } .bca-cabeca .bca-paragrafo { margin-left: auto; margin-right: auto; } .bca-selo { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 7px 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #ffffff; background: var( --bca-azul ); border-radius: 999px; } .bca-selo--claro { color: var( --bca-azul ); background: var( --bca-azul-fundo ); } .bca-selo--escuro { color: var( --bca-tinta ); background: var( --bca-realce ); } .bca-selo__ponto { width: 8px; height: 8px; background: var( --bca-realce ); border-radius: 50%; } /* Os selos de número do herói — usados na home e na página de impacto. */ .bca-selos { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; } .bca-selo-num { min-width: 150px; padding: 16px 22px; background: rgba( 255, 255, 255, 0.12 ); border: 1px solid rgba( 255, 255, 255, 0.22 ); border-radius: 18px; -webkit-backdrop-filter: blur( 6px ); backdrop-filter: blur( 6px ); } .bca-selo-num__valor { display: block; font-family: var( --bca-display ); font-size: 34px; font-weight: 700; line-height: 1; color: var( --bca-realce ); } .bca-selo-num__rotulo { display: block; margin-top: 4px; font-size: 14px; color: rgba( 255, 255, 255, 0.86 ); } /* ── Telas muito estreitas (abaixo de 340px) ─────────────────────────────── */ /* * Medido a 280px: o cabeçalho vazava 29px e a página inteira ganhava rolagem * lateral. A conta é simples — marca de 56px, dois ícones sociais de 46, o * hambúrguer de 46 e os vãos entre eles não cabem em 280. * * 280px não é telefone nenhum de hoje (o menor é 320), mas é exatamente o que * acontece quando alguém aumenta a fonte do sistema ou usa o navegador com zoom: * a largura efetiva encolhe. Nessa faixa, o que importa é entrar no menu — os * ícones sociais estão no rodapé e dentro da gaveta, então saem da barra. */ @media ( max-width: 340px ) { /* Três classes de propósito: a folha do acervo declara a mesma barra com duas classes e vem depois na ordem de carregamento — empate de especificidade, ali, é derrota. */ body.bca-site .bca-social-barra, body.bca-site.bca-com-biblioteca .bca-social-barra { display: none; } body.bca-site .custom-logo-link img, body.bca-site .custom-logo { height: 44px; } body.bca-site .ast-mobile-header-wrap .site-branding { padding-top: 8px; padding-bottom: 8px; } } /* ── A barra do cabeçalho vai até a borda ────────────────────────────────── */ /* * O cabeçalho quebrava em duas linhas nas páginas internas. * * Medido a 1440px: na home a fileira do menu termina em x=1404, numa linha só; * na Nosso Impacto ela termina em x=1260 e os **dois ícones sociais caem para * uma segunda linha**. O menu é o mesmo — o que muda é o contêiner: o tema * limita `.ast-container` a 1240px (`@media (min-width:922px)`), e na home o * cabeçalho escapa disso porque flutua sobre a foto do herói. * * Com oito itens, o botão Doar e os dois ícones, 1240px menos o logo não dá. * Em vez de espremer letra, a barra passa a usar a tela inteira — que é o que a * home já fazia e o que combina com páginas que sangram de borda a borda. */ body.bca-site #masthead .ast-container, body.bca-site .ast-primary-header-bar > .ast-container { max-width: none; padding-left: clamp( 20px, 2.4vw, 40px ); padding-right: clamp( 20px, 2.4vw, 40px ); } /* ═══════════════════════════════════════════════════════════════════════════ * Aviso de cookies — faixa, diálogo e botão do rodapé * * Regras que o desenho segue (Guia de Cookies da ANPD e padrões enganosos): * - "Aceitar" e "Recusar" com o MESMO tamanho, cor e peso. Nenhum dos dois * parece a resposta certa. * - Sem "X" na faixa: fechar sem escolher não é escolha. * - A faixa não bloqueia a página nem escurece o fundo; fica no pé da tela e * empurra o botão de WhatsApp para cima, sem cobri-lo. * - Nada pré-marcado no diálogo. * ═══════════════════════════════════════════════════════════════════════════ */ .bca-cookies { position: fixed; right: 0; bottom: 0; left: 0; z-index: 90; /* acima do WhatsApp (80), abaixo do modal da retirada (1000) */ padding: 0 12px calc( 12px + env( safe-area-inset-bottom, 0px ) ); pointer-events: none; animation: bca-cookies-sobe 420ms var( --bca-suave ) both; } .bca-cookies[hidden] { display: none; } @keyframes bca-cookies-sobe { from { opacity: 0; transform: translateY( 24px ); } to { opacity: 1; transform: none; } } .bca-cookies__caixa { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; max-width: var( --bca-largura ); max-height: calc( 100dvh - 24px ); margin: 0 auto; padding: 18px 22px; overflow-y: auto; color: var( --bca-tinta ); background: var( --bca-superficie ); border: 2px solid var( --bca-realce ); border-radius: 22px; box-shadow: var( --bca-clay-alta ); pointer-events: auto; } .bca-cookies__texto { flex: 1 1 420px; min-width: 0; font-family: var( --bca-texto-fonte ); font-size: 0.9375rem; line-height: 1.55; } .bca-cookies__texto p { margin: 0; } .bca-cookies__titulo, .bca-cookies-dialogo__titulo { margin: 0 0 4px; /* Os títulos da casa usam -2px, pensado para 40px+; a 18px as letras colam. */ letter-spacing: 0; font-family: var( --bca-display ); font-size: 1.125rem; font-weight: 600; line-height: 1.25; color: var( --bca-azul ); } .bca-cookies__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var( --bca-azul ); text-decoration: underline; text-underline-offset: 4px; } .bca-cookies__acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; flex: 0 1 320px; } .bca-cookies__btn { min-height: 48px; padding: 10px 18px; font-family: var( --bca-texto-fonte ); font-size: 1rem; font-weight: 700; line-height: 1.2; color: var( --bca-superficie ); background: var( --bca-azul ); border: 2px solid var( --bca-azul ); border-radius: 999px; cursor: pointer; transition: transform 180ms var( --bca-balanco ), background-color 180ms ease; } .bca-cookies__btn:hover { background: #162a63; border-color: #162a63; } .bca-cookies__btn:active { transform: scale( 0.96 ); } .bca-cookies__btn:focus-visible, .bca-cookies__personalizar:focus-visible, .bca-cookies-dialogo__fechar:focus-visible, .bca-cookies__link:focus-visible { outline: 3px solid var( --bca-acento ); outline-offset: 3px; } .bca-cookies__personalizar { grid-column: 1 / -1; min-height: 44px; padding: 6px 12px; font-family: var( --bca-texto-fonte ); font-size: 0.9375rem; font-weight: 700; color: var( --bca-azul ); text-decoration: underline; text-underline-offset: 4px; background: transparent; border: 0; border-radius: 12px; cursor: pointer; } /* O WhatsApp sobe junto com a faixa aberta, e só enquanto ela está aberta. */ html.bca-cookies-aberto .bca-zap { bottom: calc( var( --bca-cookies-altura, 0px ) + 10px ); } @media ( max-width: 599px ) { .bca-cookies { padding: 0 8px calc( 8px + env( safe-area-inset-bottom, 0px ) ); } .bca-cookies__caixa { gap: 10px; padding: 14px 16px; border-radius: 18px; } .bca-cookies__texto { flex-basis: 100%; font-size: 0.875rem; } .bca-cookies__acoes { flex: 1 1 100%; } /* A faixa já ocupa o pé da tela no celular; o WhatsApp sai do caminho enquanto ela está aberta e volta assim que a pessoa escolhe. */ html.bca-cookies-aberto .bca-zap { visibility: hidden; } } @media ( max-width: 319px ) { .bca-cookies__acoes { grid-template-columns: 1fr; } } /* Celular deitado: pouca altura, a faixa vira uma linha só e rola por dentro. */ @media ( max-height: 480px ) and ( orientation: landscape ) { .bca-cookies__caixa { flex-wrap: nowrap; max-height: 60dvh; } .bca-cookies__texto { flex-basis: auto; } .bca-cookies__acoes { flex: 0 0 280px; } } /* ── Diálogo de preferências ────────────────────────────────────────────── */ .bca-cookies-dialogo { width: min( 560px, calc( 100vw - 24px ) ); max-height: calc( 100dvh - 24px ); padding: 0; color: var( --bca-tinta ); background: var( --bca-fundo ); border: 0; border-radius: 24px; box-shadow: var( --bca-clay-alta ); } .bca-cookies-dialogo[open] { animation: bca-cookies-abre 260ms var( --bca-suave ) both; } @keyframes bca-cookies-abre { from { opacity: 0; transform: translateY( 12px ) scale( 0.98 ); } to { opacity: 1; transform: none; } } .bca-cookies-dialogo::backdrop { background: rgba( 16, 26, 61, 0.55 ); } .bca-cookies-dialogo__form { display: grid; gap: 14px; padding: 22px 22px 18px; font-family: var( --bca-texto-fonte ); font-size: 0.9375rem; line-height: 1.55; } .bca-cookies-dialogo__cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .bca-cookies-dialogo__titulo { font-size: 1.375rem; } .bca-cookies-dialogo__fechar { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -8px -8px 0 0; /* O Astra dá 15px 28px a todo