/**
* Nosso Impacto e Como Ajudar.
*
* Herda tudo o que já existe: os tokens de `site.css`, os botões, o selo, o
* título com pincelada, a revelação ao rolar. O que entra aqui é o que essas
* duas páginas têm e as outras não — grade de números por bloco temático,
* cartões de história, cartão do PIX e o formulário.
*
* Todo seletor começa em `body.bca-impacto-ativa` ou `body.bca-ajudar-ativa`.
* O CSS deste plugin já vive no mesmo `` do formulário de contato, do
* painel de cookies e do wp-admin: escopo aqui não é preciosismo, é o que
* impede uma regra de largura de vazar para o formulário de outra pessoa.
*/
/* ── Base comum às duas páginas ──────────────────────────────────────────── */
body.bca-impacto-ativa .bca-pagina,
body.bca-ajudar-ativa .bca-pagina,
body.bca-legal-ativa .bca-pagina {
--bca-recuo: max( 24px, calc( ( 100% - 1240px ) / 2 ) );
font-family: var( --bca-texto-fonte );
font-size: 1.0625rem;
line-height: 1.6;
color: var( --bca-tinta );
background: var( --bca-fundo );
}
body.bca-impacto-ativa .bca-pagina > section,
body.bca-ajudar-ativa .bca-pagina > section,
body.bca-legal-ativa .bca-pagina > section {
/* Mesma regra da home: o tema limita a largura dos filhos de
`.entry-content` com quatro classes de especificidade, e faixa que precisa
sangrar tem de vencer isso. */
max-width: none !important;
width: 100%;
margin-left: 0;
margin-right: 0;
padding: clamp( 56px, 7vw, 96px ) var( --bca-recuo );
}
body.bca-impacto-ativa .bca-pagina .bca-faixa,
body.bca-ajudar-ativa .bca-pagina .bca-faixa,
body.bca-legal-ativa .bca-pagina .bca-faixa {
background: var( --bca-superficie );
}
body.bca-impacto-ativa .bca-pagina .bca-faixa--creme,
body.bca-ajudar-ativa .bca-pagina .bca-faixa--creme,
body.bca-legal-ativa .bca-pagina .bca-faixa--creme {
background: var( --bca-fundo );
}
.bca-pagina__interno {
max-width: 1240px;
margin: 0 auto;
}
.bca-pagina .bca-cabeca {
max-width: 62ch;
margin-bottom: clamp( 28px, 3.4vw, 44px );
}
.bca-pagina .bca-cabeca--centro {
margin-inline: auto;
text-align: center;
}
.bca-pagina .bca-cabeca .bca-paragrafo {
margin: 0;
font-size: clamp( 1rem, 1.7vw, 1.1875rem );
color: var( --bca-tinta-suave );
}
/* O tema zera a margem de todo `
` com `.entry-content p` (0,1,1). Daí o
corpo + bloco + elemento aqui: sem isso, nada nestas páginas tem respiro. */
body.bca-impacto-ativa .bca-pagina .bca-selo,
body.bca-ajudar-ativa .bca-pagina .bca-selo,
body.bca-legal-ativa .bca-pagina .bca-selo {
margin-bottom: clamp( 12px, 1.4vw, 16px );
}
body.bca-impacto-ativa .bca-pagina p,
body.bca-ajudar-ativa .bca-pagina p,
body.bca-legal-ativa .bca-pagina p {
margin: 0 0 clamp( 12px, 1.4vw, 18px );
}
body.bca-impacto-ativa .bca-pagina p:last-child,
body.bca-ajudar-ativa .bca-pagina p:last-child,
body.bca-legal-ativa .bca-pagina p:last-child {
margin-bottom: 0;
}
/* ── Herói das duas páginas ──────────────────────────────────────────────── */
.bca-pagina__heroi {
position: relative;
isolation: isolate;
overflow: hidden;
color: #ffffff;
background: var( --bca-tinta );
}
.bca-pagina__heroi-fundo {
position: absolute;
inset: 0;
z-index: -2;
}
.bca-pagina__heroi-fundo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 45%;
}
.bca-pagina__heroi::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient( 100deg, rgba( 16, 19, 11, 0.92 ) 0%, rgba( 16, 19, 11, 0.74 ) 46%, rgba( 16, 19, 11, 0.34 ) 100% ),
linear-gradient( 180deg, rgba( 16, 19, 11, 0.5 ) 0%, rgba( 16, 19, 11, 0 ) 30% );
}
.bca-pagina__heroi .bca-titulo,
.bca-pagina__heroi .bca-paragrafo {
color: #ffffff;
}
.bca-pagina__heroi .bca-titulo {
font-size: clamp( 34px, 5.4vw, 62px );
line-height: 1.05;
}
.bca-pagina__heroi .bca-cabeca {
max-width: 56ch;
}
/* ── Migalhas ────────────────────────────────────────────────────────────── */
.bca-migalhas {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 18px;
padding: 0;
font-size: 0.875rem;
list-style: none;
color: rgba( 255, 255, 255, 0.78 );
}
.bca-migalhas a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.bca-migalhas a:hover,
.bca-migalhas a:focus-visible {
color: var( --bca-realce );
}
.bca-migalhas li::after {
content: '›';
margin-left: 6px;
opacity: 0.6;
}
.bca-migalhas li:last-child::after {
content: none;
}
/* ── Barra de progresso de leitura ───────────────────────────────────────── */
/*
* Só no Impacto, que é a página comprida. Ela responde a uma pergunta que
* relatório sempre provoca — "falta muito?" — sem ocupar espaço nenhum.
*/
.bca-progresso {
position: fixed;
top: 0;
left: 0;
z-index: 95;
width: 100%;
height: 3px;
background: transparent;
pointer-events: none;
}
.bca-progresso__barra {
height: 100%;
width: var( --bca-lido, 0% );
background: linear-gradient( 90deg, var( --bca-realce ), var( --bca-acento ) );
transition: width 120ms linear;
}
/* ── Blocos de número ────────────────────────────────────────────────────── */
.bca-numeros {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( min( 220px, 100% ), 1fr ) );
gap: clamp( 14px, 1.6vw, 22px );
margin: 0;
padding: 0;
list-style: none;
}
.bca-numero {
display: flex;
flex-direction: column;
gap: 6px;
padding: clamp( 20px, 2.2vw, 28px );
background: var( --bca-superficie );
border: 1px solid var( --bca-borda );
border-radius: 22px;
box-shadow: var( --bca-clay );
/* A entrada é uma escala curta com leve passada do ponto — o preset de
grade da base de UX. Em cartão de dado ela para no 1.0, sem balanço. */
transition: transform 220ms var( --bca-mola, cubic-bezier( 0.16, 1, 0.3, 1 ) ), box-shadow 220ms ease;
}
.bca-numero:hover {
transform: translateY( -3px );
box-shadow: var( --bca-clay-alta, var( --bca-sombra-alta ) );
}
.bca-numero__valor {
font-family: var( --bca-display );
font-size: clamp( 32px, 4vw, 46px );
font-weight: 700;
line-height: 1;
color: var( --bca-azul );
white-space: nowrap;
}
.bca-numero__rotulo {
font-weight: 700;
font-size: 1rem;
}
.bca-numero__contexto {
font-size: 0.875rem;
line-height: 1.5;
color: var( --bca-tinta-suave );
}
/* O número-chave de cada bloco ganha o marca-texto que preenche ao aparecer. */
.bca-numero--forte {
background: linear-gradient( 180deg, #fffdf3, #fff7d6 );
border-color: rgba( 138, 111, 0, 0.28 );
}
/*
* `align-self: flex-start` é o que faz o marca-texto medir o número, e não o
* cartão inteiro. O `.bca-numero` é uma coluna de flex, e item de flex estica
* por padrão: o `display: inline-block` aqui era blocado e esticado junto, o
* `::after` seguia a caixa e o "7" ganhava um traço amarelo de 341px para 24px
* de algarismo.
*/
.bca-numero--forte .bca-numero__valor {
position: relative;
display: inline-block;
align-self: flex-start;
max-width: 100%;
}
.bca-numero--forte .bca-numero__valor::after {
content: '';
position: absolute;
left: -4px;
right: -4px;
bottom: 2px;
z-index: -1;
height: 38%;
background: var( --bca-realce );
border-radius: 4px;
transform-origin: left center;
transition: scale 520ms cubic-bezier( 0.16, 1, 0.3, 1 ) 160ms;
}
.bca-numero--forte.bca-revela:not( .esta-dentro ) .bca-numero__valor::after {
scale: 0 1;
}
/* ── PIX ─────────────────────────────────────────────────────────────────── */
.bca-doar {
display: grid;
grid-template-columns: minmax( 0, 1fr );
gap: clamp( 18px, 2.4vw, 32px );
}
@media ( min-width: 900px ) {
.bca-doar {
grid-template-columns: minmax( 0, 1.1fr ) minmax( 0, 0.9fr );
align-items: start;
}
}
.bca-pix-cartao {
display: flex;
flex-direction: column;
gap: 16px;
padding: clamp( 22px, 2.6vw, 32px );
background: var( --bca-superficie );
border: 1px solid var( --bca-borda );
border-radius: 26px;
box-shadow: var( --bca-clay );
}
.bca-pix-cartao__topo {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: space-between;
}
.bca-pix-cartao__chave {
display: block;
padding: 12px 16px;
font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Code', monospace;
font-size: 1rem;
word-break: break-all;
background: var( --bca-azul-fundo );
border: 1px solid var( --bca-azul-borda );
border-radius: 14px;
}
.bca-pix-cartao__copiacola {
max-height: 92px;
overflow-y: auto;
padding: 10px 14px;
font-family: ui-monospace, monospace;
font-size: 12px;
line-height: 1.5;
color: var( --bca-tinta-suave );
word-break: break-all;
background: var( --bca-fundo );
border: 1px solid var( --bca-borda );
border-radius: 12px;
}
.bca-pix-qr {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: clamp( 18px, 2.2vw, 26px );
text-align: center;
background: var( --bca-superficie );
border: 1px solid var( --bca-borda );
border-radius: 26px;
box-shadow: var( --bca-sombra );
}
.bca-pix-qr img,
.bca-pix-qr svg {
width: min( 240px, 100% );
height: auto;
background: #ffffff;
border-radius: 12px;
}
.bca-pix-qr__aviso {
font-size: 0.875rem;
color: var( --bca-tinta-suave );
}
.bca-valores {
display: grid;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.bca-valor {
display: flex;
gap: 12px;
align-items: baseline;
padding: 14px 18px;
background: var( --bca-superficie );
border: 1px solid var( --bca-borda );
border-radius: 16px;
}
.bca-valor__quanto {
font-family: var( --bca-display );
font-size: 22px;
font-weight: 700;
color: var( --bca-acento-txt );
white-space: nowrap;
}
/* ── Listas de sim e não (doação de livros) ──────────────────────────────── */
.bca-duas-colunas {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( min( 280px, 100% ), 1fr ) );
gap: clamp( 16px, 2vw, 28px );
}
.bca-lista-marcada {
margin: 0;
padding: 0;
list-style: none;
}
.bca-lista-marcada li {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 8px 0;
border-bottom: 1px solid var( --bca-borda );
}
.bca-lista-marcada li:last-child {
border-bottom: 0;
}
.bca-lista-marcada svg {
flex: none;
margin-top: 3px;
}
.bca-lista--sim svg {
color: #2f7a3f;
}
.bca-lista--nao svg {
color: #a33a2a;
}
/* ── Formulário ──────────────────────────────────────────────────────────── */
.bca-form {
display: flex;
flex-direction: column;
gap: 18px;
max-width: 640px;
padding: clamp( 22px, 2.6vw, 34px );
background: var( --bca-superficie );
border: 1px solid var( --bca-borda );
border-radius: 26px;
box-shadow: var( --bca-clay );
}
.bca-campo {
display: flex;
flex-direction: column;
gap: 6px;
}
.bca-campo__rotulo {
font-weight: 700;
font-size: 0.9375rem;
}
.bca-campo__opcional {
font-weight: 400;
color: var( --bca-tinta-suave );
}
.bca-campo input[type="text"],
.bca-campo input[type="email"],
.bca-campo input[type="tel"],
.bca-campo select,
.bca-campo textarea {
width: 100%;
min-height: 48px;
padding: 12px 14px;
/* 16px porque abaixo disso o iPhone dá zoom sozinho ao focar o campo, e a
página inteira sai do lugar no meio do preenchimento. */
font-family: var( --bca-texto-fonte );
font-size: 1rem;
color: var( --bca-tinta );
background: var( --bca-fundo );
border: 1px solid var( --bca-borda-forte );
border-radius: 14px;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.bca-campo textarea {
min-height: 120px;
line-height: 1.55;
resize: vertical;
}
.bca-campo input:focus,
.bca-campo select:focus,
.bca-campo textarea:focus {
outline: none;
border-color: var( --bca-azul );
box-shadow: 0 0 0 3px var( --bca-azul-fundo );
}
.bca-campo--erro input,
.bca-campo--erro select,
.bca-campo--erro textarea {
border-color: #a33a2a;
box-shadow: 0 0 0 3px rgba( 163, 58, 42, 0.12 );
}
.bca-campo__erro {
font-size: 0.875rem;
font-weight: 600;
color: #8f2f21;
}
.bca-campo__erro:empty {
display: none;
}
/* Um tremor curto, uma vez só: o suficiente para o olho voltar ao campo, longe
do exagero que faz a página parecer quebrada. */
@keyframes bca-tremer {
0%, 100% { transform: translateX( 0 ); }
25% { transform: translateX( -4px ); }
75% { transform: translateX( 4px ); }
}
.bca-campo--tremeu {
animation: bca-tremer 240ms ease;
}
.bca-escolhas {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.bca-escolha {
display: inline-flex;
gap: 8px;
align-items: center;
min-height: 44px;
padding: 8px 14px;
font-size: 0.9375rem;
cursor: pointer;
background: var( --bca-fundo );
border: 1px solid var( --bca-borda-forte );
border-radius: 999px;
transition: background 160ms ease, border-color 160ms ease;
}
.bca-escolha:hover {
border-color: var( --bca-acento );
}
.bca-escolha input {
width: 18px;
height: 18px;
margin: 0;
accent-color: var( --bca-azul );
}
.bca-escolha:has( input:checked ) {
background: var( --bca-azul-fundo );
border-color: var( --bca-azul );
}
.bca-consentimento {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 0.875rem;
line-height: 1.5;
color: var( --bca-tinta-suave );
}
.bca-consentimento input {
flex: none;
width: 20px;
height: 20px;
margin-top: 2px;
accent-color: var( --bca-azul );
}
.bca-consentimento a {
color: var( --bca-azul );
}
/* O campo-isca: fora da tela, fora do tab, invisível para leitor de tela. */
.bca-isca {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect( 0 0 0 0 );
white-space: nowrap;
border: 0;
}
.bca-form__acoes {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.bca-form__estado {
font-size: 0.9375rem;
font-weight: 600;
}
.bca-form__estado--erro {
color: #8f2f21;
}
.bca-form__enviando {
opacity: 0.75;
pointer-events: none;
}
.bca-form__sucesso {
display: flex;
flex-direction: column;
gap: 12px;
padding: clamp( 22px, 2.6vw, 34px );
background: linear-gradient( 180deg, #f2fbf3, #e6f6e9 );
border: 1px solid rgba( 47, 122, 63, 0.3 );
border-radius: 26px;
}
.bca-form__sucesso h3 {
margin: 0;
font-family: var( --bca-display );
font-size: 24px;
}
/* Sem JavaScript o formulário não envia. Em vez de deixar um botão morto, a
página mostra o caminho humano — e o formulário some. */
/* O caminho humano: WhatsApp e e-mail, sempre na tela, com JavaScript ou sem. */
.bca-humano {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: clamp( 18px, 2vw, 26px );
padding: clamp( 18px, 2.2vw, 26px );
background: var( --bca-superficie );
border: 1px solid var( --bca-borda );
border-radius: 22px;
}
.bca-humano p {
margin: 0;
}
.bca-humano p:last-child {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* Este é o aviso de verdade para quem está sem JavaScript. */
.bca-sem-js {
padding: 14px 18px;
font-size: 0.9375rem;
color: var( --bca-acento-txt );
background: #fffaea;
border: 1px dashed rgba( 138, 111, 0, 0.42 );
border-radius: 14px;
}
.bca-tem-js .bca-sem-js {
display: none;
}
body:not( .bca-tem-js ) .bca-form {
display: none;
}
/* ── Âncoras: o cabeçalho fixo não pode cobrir o destino ─────────────────── */
body.bca-impacto-ativa [id],
body.bca-ajudar-ativa [id],
body.bca-legal-ativa [id] {
scroll-margin-top: 120px;
}
/* No Impacto são duas barras em cima do destino, não uma: o cabeçalho fixo e a
fileira do índice que gruda embaixo dele. */
body.bca-impacto-ativa .bca-bloco-tema,
body.bca-impacto-ativa #como-medimos {
scroll-margin-top: 190px;
}
/* ── Celular ─────────────────────────────────────────────────────────────── */
@media ( max-width: 599px ) {
body.bca-impacto-ativa .bca-pagina,
body.bca-ajudar-ativa .bca-pagina,
body.bca-legal-ativa .bca-pagina {
--bca-recuo: 20px;
font-size: 1rem;
}
.bca-numero__valor {
font-size: 30px;
}
.bca-form {
padding: 20px 16px;
border-radius: 20px;
}
.bca-form__acoes .bca-btn {
flex: 1 1 100%;
}
.bca-pix-cartao__topo {
flex-direction: column;
align-items: stretch;
}
}
/* ── Quem pediu menos movimento ──────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
body.bca-impacto-ativa *,
body.bca-ajudar-ativa *,
body.bca-legal-ativa * {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.bca-progresso {
display: none;
}
}
/* ── Impressão ───────────────────────────────────────────────────────────── */
@media print {
.bca-progresso,
.bca-indice,
.bca-form {
display: none;
}
.bca-pagina__heroi {
color: #000000;
background: none;
}
.bca-pagina__heroi::before,
.bca-pagina__heroi-fundo {
display: none;
}
.bca-pagina__heroi .bca-titulo,
.bca-pagina__heroi .bca-paragrafo {
color: #000000;
}
}
/* ── As peças que faltavam ───────────────────────────────────────────────── */
/*
* Este bloco existe porque a primeira varredura encontrou vinte classes usadas
* no PHP e sem regra nenhuma — atalhos do herói, cartões, lista de unidades,
* bloco de imprensa. Sem CSS elas herdam o link azul do tema sobre fundo claro
* (1,3:1 medido) e alvo de 19px de altura. Nada disso é estilo: é legibilidade e
* alvo de toque.
*/
.bca-impacto-pagina .bca-blocos {
display: flex;
flex-direction: column;
gap: clamp( 48px, 6vw, 80px );
}
.bca-bloco-tema {
scroll-margin-top: 120px;
}
/* A linha de prova social, logo abaixo do herói */
.bca-prova {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-top: clamp( 18px, 2vw, 26px );
font-size: 0.9375rem;
color: rgba( 255, 255, 255, 0.92 );
}
.bca-prova a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 6px 2px;
color: var( --bca-realce );
text-decoration: underline;
text-underline-offset: 4px;
}
/* Cartões genéricos (transparência, outras formas de ajudar) */
.bca-cartoes {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( min( 250px, 100% ), 1fr ) );
gap: clamp( 14px, 1.6vw, 22px );
margin: 0;
padding: 0;
list-style: none;
}
.bca-cartao {
padding: clamp( 20px, 2.2vw, 28px );
background: var( --bca-superficie );
border: 1px solid var( --bca-borda );
border-radius: 22px;
box-shadow: var( --bca-sombra );
transition: transform 200ms ease, box-shadow 200ms ease;
}
.bca-cartao:hover {
transform: translateY( -3px );
box-shadow: var( --bca-sombra-alta );
}
.bca-cartao h3 {
margin: 0 0 8px;
font-family: var( --bca-display );
font-size: 21px;
}
/* Ação única no fim de uma seção */
/*
* Com os dois prefixos de `body`, e não sem eles: a regra que zera a margem de
* todo `
` destas páginas (`body.bca-*-ativa .bca-pagina p`) tem três classes
* e vencia esta. O botão de ação encostava na grade de cartões acima — e o link
* "Como chegar" do último cartão passou a dividir três pixels de tela com o
* botão do WhatsApp, um alvo em cima do outro.
*/
body.bca-impacto-ativa .bca-pagina .bca-acao-unica,
body.bca-ajudar-ativa .bca-pagina .bca-acao-unica,
body.bca-legal-ativa .bca-pagina .bca-acao-unica {
margin-top: clamp( 22px, 2.6vw, 32px );
}
/* Lista simples das sete unidades (onde entregar livro) */
.bca-onde-entregar {
margin: clamp( 32px, 3.6vw, 48px ) 0 8px;
font-family: var( --bca-display );
font-size: 24px;
}
.bca-onde-aviso {
max-width: 68ch;
}
.bca-unidades-simples {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( min( 260px, 100% ), 1fr ) );
gap: 12px;
margin: 18px 0 0;
padding: 0;
list-style: none;
}
.bca-unidades-simples li {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 18px;
background: var( --bca-superficie );
border: 1px solid var( --bca-borda );
border-radius: 18px;
}
.bca-unidades-simples span {
font-size: 0.9375rem;
color: var( --bca-tinta-suave );
}
.bca-unidades-simples a,
.bca-numero__link {
display: inline-flex;
align-items: center;
min-height: 44px;
font-weight: 700;
font-size: 0.9375rem;
color: var( --bca-azul );
text-decoration: underline;
text-underline-offset: 4px;
}
.bca-unidades-simples a:hover,
.bca-numero__link:hover {
color: var( --bca-tinta );
}
/* Bloco de imprensa */
.bca-imprensa {
max-width: 78ch;
padding: clamp( 22px, 2.6vw, 34px );
background: var( --bca-superficie );
border: 1px solid var( --bca-borda );
border-radius: 26px;
box-shadow: var( --bca-clay );
}
.bca-imprensa__frase {
margin: 0 0 14px;
padding-left: 18px;
font-size: clamp( 1.0625rem, 1.9vw, 1.25rem );
line-height: 1.55;
border-left: 4px solid var( --bca-realce );
}
.bca-imprensa__linha {
font-size: 0.9375rem;
color: var( --bca-tinta-suave );
}
/* Formulário ao lado do texto, quando há espaço */
@media ( min-width: 900px ) {
.bca-com-formulario {
display: grid;
grid-template-columns: minmax( 0, 0.9fr ) minmax( 0, 1.1fr );
gap: clamp( 28px, 3.4vw, 56px );
align-items: start;
}
.bca-com-formulario .bca-cabeca {
margin-bottom: 0;
}
}
.bca-pix-lado {
display: flex;
flex-direction: column;
gap: clamp( 16px, 2vw, 24px );
}
.bca-impacto-final {
text-align: center;
}
/* ── Correções de contraste e de alvo encontradas na varredura ───────────── */
/* O parágrafo do herói herdava o cinza de leitura (2,52:1 sobre a foto
escurecida). Sobre foto, texto é branco — e a regra precisa vencer a do
`.bca-cabeca .bca-paragrafo`, que tem três classes. */
body.bca-impacto-ativa .bca-pagina__heroi .bca-cabeca .bca-paragrafo,
body.bca-ajudar-ativa .bca-pagina__heroi .bca-cabeca .bca-paragrafo,
body.bca-legal-ativa .bca-pagina__heroi .bca-cabeca .bca-paragrafo {
color: rgba( 255, 255, 255, 0.94 );
}
/* As migalhas eram um alvo de 19px de altura. */
.bca-migalhas a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 2px;
}
/* Caixa de marcar: o alvo de verdade é o rótulo inteiro (44px), mas quem mira
direto no quadradinho merece um quadradinho que dê para acertar. */
.bca-escolha input,
.bca-consentimento input {
width: 24px;
height: 24px;
}
/*
* O título que o tema imprime por cima do herói.
*
* A página Nosso Impacto usa o gabarito padrão do Astra, que escreve um
* `
Nosso Impacto
` antes do conteúdo — em cima do
* nosso herói, que já traz o `h1` de verdade. Resultado medido: dois títulos
* visíveis e três `h1` na mesma página, o que para leitor de tela é pior do que
* nenhum.
*
* Some por CSS, e não só pela opção do tema, porque opção de tema mora no banco
* e não viaja no pacote de deploy.
*/
body.bca-impacto-ativa .site-main > article > .entry-header,
body.bca-ajudar-ativa .site-main > article > .entry-header,
body.bca-legal-ativa .site-main > article > .entry-header,
body.bca-impacto-ativa .ast-single-post .entry-title,
body.bca-ajudar-ativa .ast-single-post .entry-title,
body.bca-legal-ativa .ast-single-post .entry-title {
display: none;
}
/* ── Sobras da segunda varredura ─────────────────────────────────────────── */
/*
* "Ver as sete unidades" empurrava a página 23px para fora a 360px: o botão
* nasce `inline-flex` e não encolhe, e o rótulo é longo. Em tela estreita ele
* passa a ocupar a linha inteira, como já fazem os botões do herói da home.
*/
@media ( max-width: 599px ) {
.bca-acao-unica .bca-btn {
display: flex;
width: 100%;
}
}
/*
* A caixa de marcar estava sendo espremida na horizontal (medido 17×24 dentro
* de um rótulo flex). Quadrado é quadrado: `flex: none` impede o encolhimento.
*/
.bca-escolha input,
.bca-consentimento input {
flex: none;
min-width: 24px;
}
/*
* Numa tela de 320px sobram 280px depois do recuo — exatamente o mínimo que as
* grades pediam. Faltava um pixel e a página inteira ganhava rolagem lateral.
* `min( Xpx, 100% )` deixa a coluna encolher quando não há espaço, que é o
* comportamento que se espera de uma grade responsiva.
*/
/* O e-mail é uma palavra de 31 caracteres: numa fileira de botões ele
simplesmente não cabe em tela estreita. */
.bca-form__acoes .bca-btn {
max-width: 100%;
word-break: break-word;
}
@media ( max-width: 599px ) {
.bca-form__acoes .bca-btn {
flex: 1 1 100%;
}
}
/* O link da política saía no meio da frase, com 19px de altura — alvo pequeno
demais para o polegar. Vira uma linha própria, com altura de alvo. */
.bca-consentimento__politica {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-top: 4px;
font-weight: 700;
color: var( --bca-azul );
text-decoration: underline;
text-underline-offset: 4px;
}
/* ── Sobras da varredura de celular ──────────────────────────────────────── */
/*
* "+150 mil" quebrando em três linhas.
*
* O selo do herói tem `+`, número e unidade em pedaços separados (o número
* precisa estar sozinho para o contador reescrever só ele). Sem `nowrap`, uma
* tela de 320px quebra nos três. É a mesma regra que a home já tem — mora aqui
* também porque a folha da home não carrega nesta página.
*/
.bca-selo-num__valor,
.bca-numero__valor {
white-space: nowrap;
}
/* A migalha "Início" tinha 36px de largura: alvo de toque é área, não só
altura. */
.bca-migalhas a {
justify-content: center;
min-width: 44px;
}
/* O campo-isca some de verdade: a caixa de fora já é 1×1 com `clip`, mas o
input dentro dela continuava com tamanho de campo — e um campo invisível de
tamanho normal é exatamente o que um leitor de tela antigo pode anunciar. */
.bca-isca input {
width: 1px;
height: 1px;
padding: 0;
border: 0;
opacity: 0;
}
/* ── De borda a borda ────────────────────────────────────────────────────── */
/*
* As duas páginas sangram até a lateral da tela, como a Biblioteca Virtual.
*
* Medido antes: o conteúdo nascia com 987px dentro de uma janela de 1440 — o
* tema encaixa o bloco em `.ast-container` (1240px), `#primary`, `article` e
* `.entry-content`, cada um com o seu recuo. Faixa que muda de cor a cada
* seção fica ridícula assim: cor cheia no meio e creme do tema nas beiradas.
*
* A técnica é a mesma que resolveu o acervo: `margin-inline: calc(50% - 50vw)`
* puxa o bloco para fora do pai sem quebrar o fluxo do documento (zerar as
* margens do pai deixaria a página MAIS estreita, porque o Spectra e o Astra
* usam margem negativa própria). O recuo lateral do conteúdo passa a ser nosso,
* pelo `--bca-recuo`, que já centraliza em 1240px.
*/
body.bca-impacto-ativa .bca-pagina,
body.bca-ajudar-ativa .bca-pagina,
body.bca-legal-ativa .bca-pagina {
max-width: none !important;
width: auto;
margin-left: calc( 50% - 50vw );
margin-right: calc( 50% - 50vw );
}
/* O `article` e o `#primary` do tema trazem recuo próprio no topo — 85px e
64px, que viravam uma tarja creme entre o cabeçalho e o herói. */
body.bca-impacto-ativa .site-main > article,
body.bca-ajudar-ativa .site-main > article,
body.bca-legal-ativa .site-main > article {
padding-top: 0;
padding-bottom: 0;
}
body.bca-impacto-ativa #primary,
body.bca-ajudar-ativa #primary,
body.bca-legal-ativa #primary {
margin-top: 0;
padding-top: 0;
}
body.bca-impacto-ativa .site-content > .ast-container,
body.bca-ajudar-ativa .site-content > .ast-container,
body.bca-legal-ativa .site-content > .ast-container {
padding-top: 0;
}
/* ── O herói destas páginas alinha à esquerda ────────────────────────────── */
/*
* `.bca-cabeca` nasce centralizada porque na home ela é cabeçalho de seção, no
* meio da página. No herói destas duas, o texto começa na margem — é o mesmo
* alinhamento do herói da home e o que faz o título grande respirar sobre a
* foto.
*/
body.bca-impacto-ativa .bca-pagina__heroi .bca-cabeca,
body.bca-ajudar-ativa .bca-pagina__heroi .bca-cabeca,
body.bca-legal-ativa .bca-pagina__heroi .bca-cabeca {
margin-left: 0;
margin-right: 0;
text-align: left;
}
/*
* A palavra em destaque, sobre foto, é amarela.
*
* `.bca-realce` pinta de azul — que é o certo sobre creme, e ilegível sobre a
* foto escurecida do herói (medido 2,2:1). Aqui ela vira o amarelo da casa, com
* a pincelada mais discreta por baixo, para o texto não competir com o traço.
*/
body.bca-impacto-ativa .bca-pagina__heroi .bca-realce,
body.bca-ajudar-ativa .bca-pagina__heroi .bca-realce,
body.bca-legal-ativa .bca-pagina__heroi .bca-realce {
color: var( --bca-realce );
}
body.bca-impacto-ativa .bca-pagina__heroi .bca-realce::after,
body.bca-ajudar-ativa .bca-pagina__heroi .bca-realce::after,
body.bca-legal-ativa .bca-pagina__heroi .bca-realce::after {
opacity: 0.28;
}
/*
* A palavra em destaque pode quebrar em tela estreita.
*
* `.bca-realce` é `nowrap` porque na home as expressões são curtas e quebrar no
* meio de "A Casa Amarela" ficaria feio. Aqui há frases de cinco palavras
* ("ficar do nosso lado"), e a 360px elas empurravam a página 9px para fora.
* Quebrar é melhor do que rolar de lado; a pincelada acompanha a última linha,
* que é onde o olho termina a leitura.
*/
@media ( max-width: 599px ) {
body.bca-impacto-ativa .bca-realce,
body.bca-ajudar-ativa .bca-realce,
body.bca-legal-ativa .bca-realce {
white-space: normal;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
* A leva de cor, ícone e movimento
*
* O diagnóstico que motivou tudo o que vem daqui para baixo: postas lado a lado
* com a home e com a Biblioteca Virtual, estas duas páginas estavam **apagadas**.
* Tinham o vocabulário certo — selo, título com pincelada, cartão clay — e quase
* nada de cor: branco sobre creme do começo ao fim, nenhuma faixa cheia, nenhum
* ícone com personalidade, nenhum movimento além da revelação e dos contadores.
* A home tem três faixas cheias e seis tipos de movimento; o acervo tem brilho
* de cursor, faíscas e capas que surgem.
*
* A regra que organiza este bloco: **reaproveitar antes de inventar**. Faixa
* cheia, pincelada, selo, clay, contador e revelação já existem — o que faltava
* era usá-los aqui. Peça nova, só duas: o conjunto de ícones de duas cores
* (`src/Front/Icones.php`) e as animações de entrada deles.
*
* E o que não pode cair junto, porque já estava medido: contraste 4,5:1 no
* texto e 3:1 no ícone, alvo de 44px, nada de rolagem lateral de 280 a 1920px,
* e tudo parado para quem pediu menos movimento.
* ═══════════════════════════════════════════════════════════════════════════ */
/*
* Três variáveis da casa moram em `biblioteca.css`, que não carrega aqui. Em vez
* de espalhar `var( x, fallback )` por cem regras, elas são declaradas uma vez
* no escopo destas páginas.
*/
body.bca-impacto-ativa .bca-pagina,
body.bca-ajudar-ativa .bca-pagina,
body.bca-legal-ativa .bca-pagina {
--bca-mola: cubic-bezier( 0.34, 1.56, 0.64, 1 );
--bca-magia: linear-gradient( 120deg, #ffd936 0%, #ffb43a 45%, #1e3780 100% );
--bca-magia-quente: linear-gradient( 120deg, #ffd936 0%, #ff8f3a 100% );
/* A tinta que sobrevive ao amarelo: o cinza de leitura mede 4,3:1 sobre
`#ffd936` e reprova; este mede 9,4:1. */
--bca-tinta-no-sol: #2c3323;
--bca-noite: var( --bca-rodape-fundo );
}
/* ── As faixas de cor ────────────────────────────────────────────────────── */
/*
* Quatro fundos, e a página alterna entre eles: branco, creme, **sol** (amarelo
* cheio) e **noite** (azul escuro). O amarelo e o azul são os mesmos da home —
* `.bca-impacto` e `.bca-biblio-faixa` de lá — e é de propósito: quem vem da
* home reconhece a casa antes de ler uma linha.
*
* A mancha radial por cima de cada faixa não é enfeite gratuito: cor cheia e
* chapada em bloco de 600px de altura fica com cara de erro de impressão. A
* mancha dá profundidade sem custar contraste (ela clareia o claro e escurece o
* escuro, nunca o contrário).
*/
body.bca-impacto-ativa .bca-pagina .bca-faixa--sol,
body.bca-ajudar-ativa .bca-pagina .bca-faixa--sol,
body.bca-legal-ativa .bca-pagina .bca-faixa--sol {
position: relative;
color: var( --bca-tinta );
background:
radial-gradient( 70% 90% at 12% 0%, rgba( 255, 255, 255, 0.55 ), rgba( 255, 255, 255, 0 ) 60% ),
radial-gradient( 60% 80% at 100% 100%, rgba( 255, 143, 58, 0.35 ), rgba( 255, 143, 58, 0 ) 65% ),
var( --bca-realce );
}
body.bca-impacto-ativa .bca-pagina .bca-faixa--noite,
body.bca-ajudar-ativa .bca-pagina .bca-faixa--noite,
body.bca-legal-ativa .bca-pagina .bca-faixa--noite {
position: relative;
color: #ffffff;
background:
radial-gradient( 60% 80% at 0% 0%, rgba( 30, 55, 128, 0.75 ), rgba( 30, 55, 128, 0 ) 60% ),
radial-gradient( 55% 70% at 100% 90%, rgba( 255, 217, 54, 0.18 ), rgba( 255, 217, 54, 0 ) 60% ),
var( --bca-noite );
}
/* A faixa com foto ao fundo — a mesma receita da chamada final da home: a foto
embaixo, um véu escuro por cima, e só então o texto. Sem o véu o texto
branco cai para 2:1 em cima de qualquer céu claro. */
body.bca-impacto-ativa .bca-pagina .bca-faixa--foto,
body.bca-ajudar-ativa .bca-pagina .bca-faixa--foto,
body.bca-legal-ativa .bca-pagina .bca-faixa--foto {
position: relative;
z-index: 0;
color: #ffffff;
background: var( --bca-noite );
}
.bca-faixa__fundo {
position: absolute;
inset: 0;
z-index: -2;
overflow: hidden;
}
.bca-faixa__fundo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.bca-faixa--foto::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
/*
* Medido: com o véu a 0,74 no meio, o parágrafo branco caía para 2,8:1 em
* cima das partes claras da foto — a primeira captura mostrou o texto quase
* sumido. Estes valores mantêm a foto legível como foto e o texto acima de
* 4,5:1 no ponto mais claro dela.
*/
background:
linear-gradient( 100deg, rgba( 16, 26, 61, 0.95 ) 0%, rgba( 16, 26, 61, 0.88 ) 45%, rgba( 16, 26, 61, 0.74 ) 100% ),
linear-gradient( 180deg, rgba( 16, 26, 61, 0.55 ), rgba( 16, 26, 61, 0.2 ) 45% );
}
/* O texto dentro das faixas fortes.
Nas duas, o parágrafo não pode herdar o cinza de leitura. */
body.bca-impacto-ativa .bca-pagina .bca-faixa--sol .bca-paragrafo,
body.bca-ajudar-ativa .bca-pagina .bca-faixa--sol .bca-paragrafo,
body.bca-legal-ativa .bca-pagina .bca-faixa--sol .bca-paragrafo,
.bca-faixa--sol .bca-numero__contexto {
color: var( --bca-tinta-no-sol );
}
.bca-faixa--noite .bca-titulo,
.bca-faixa--foto .bca-titulo,
.bca-faixa--noite > .bca-pagina__interno > h3,
.bca-faixa--foto > .bca-pagina__interno > h3 {
color: #ffffff;
}
/*
* O clarear do texto vale para o que está **em cima** da faixa, não para o que
* está dentro de uma caixa branca em cima dela. Formulário, cartão, caixa do
* caminho humano e cartão de unidade continuam claros por dentro — e branco
* sobre branco é o erro mais fácil de cometer aqui.
*/
.bca-faixa--noite .bca-form,
.bca-faixa--foto .bca-form,
.bca-faixa--noite .bca-humano,
.bca-faixa--foto .bca-humano,
.bca-faixa--noite .bca-cartao,
.bca-faixa--foto .bca-cartao,
.bca-faixa--noite .bca-unidades-simples li,
.bca-faixa--foto .bca-unidades-simples li,
.bca-faixa--noite .bca-imprensa,
.bca-faixa--foto .bca-imprensa {
color: var( --bca-tinta );
}
body.bca-ajudar-ativa .bca-pagina .bca-faixa--noite .bca-form .bca-paragrafo,
body.bca-legal-ativa .bca-pagina .bca-faixa--noite .bca-form .bca-paragrafo,
body.bca-ajudar-ativa .bca-pagina .bca-faixa--foto .bca-form .bca-paragrafo,
body.bca-legal-ativa .bca-pagina .bca-faixa--foto .bca-form .bca-paragrafo,
body.bca-impacto-ativa .bca-pagina .bca-faixa--noite .bca-form .bca-paragrafo,
body.bca-impacto-ativa .bca-pagina .bca-faixa--foto .bca-form .bca-paragrafo,
.bca-faixa--noite .bca-humano p,
.bca-faixa--foto .bca-humano p,
.bca-faixa--noite .bca-cartao p,
.bca-faixa--foto .bca-cartao p,
.bca-faixa--noite .bca-unidades-simples span,
.bca-faixa--foto .bca-unidades-simples span {
color: var( --bca-tinta-suave );
}
.bca-faixa--noite .bca-cartao h3,
.bca-faixa--foto .bca-cartao h3 {
color: var( --bca-tinta );
}
/*
* Os dois prefixos de `body` não são enfeite: `body.bca-impacto-ativa
* .bca-pagina .bca-cabeca .bca-paragrafo` pinta o cinza de leitura com quatro
* classes de especificidade. Sem empatar com isso, o parágrafo continuava
* cinza-esverdeado em cima do azul escuro — 2,7:1, medido.
*/
body.bca-impacto-ativa .bca-pagina .bca-faixa--noite .bca-paragrafo,
body.bca-impacto-ativa .bca-pagina .bca-faixa--foto .bca-paragrafo,
body.bca-ajudar-ativa .bca-pagina .bca-faixa--noite .bca-paragrafo,
body.bca-legal-ativa .bca-pagina .bca-faixa--noite .bca-paragrafo,
body.bca-ajudar-ativa .bca-pagina .bca-faixa--foto .bca-paragrafo,
body.bca-legal-ativa .bca-pagina .bca-faixa--foto .bca-paragrafo {
color: rgba( 255, 255, 255, 0.9 );
}
/* O selo muda de cor conforme a faixa, sempre mantendo par legível:
no amarelo vira azul com texto branco; no azul vira amarelo com tinta. */
.bca-faixa--sol .bca-selo--claro {
color: #ffffff;
background: var( --bca-azul );
}
.bca-faixa--noite .bca-selo--claro,
.bca-faixa--foto .bca-selo--claro {
color: var( --bca-tinta );
background: var( --bca-realce );
}
/* A pincelada da palavra realçada é amarela. Em cima do amarelo ela some, e no
azul escuro a letra azul some junto — os dois casos precisam inverter. */
.bca-faixa--sol .bca-realce {
color: var( --bca-azul );
}
.bca-faixa--sol .bca-realce::after {
background: linear-gradient( 90deg, rgba( 30, 55, 128, 0.85 ) 0%, rgba( 30, 55, 128, 0.5 ) 70%, rgba( 30, 55, 128, 0.18 ) 100% );
opacity: 1;
}
.bca-faixa--noite .bca-realce,
.bca-faixa--foto .bca-realce {
color: var( --bca-realce );
}
.bca-faixa--noite .bca-realce::after,
.bca-faixa--foto .bca-realce::after {
opacity: 0.9;
}
/* Link solto dentro de faixa escura — de novo, só o que está sobre a faixa. */
.bca-faixa--noite a:not( .bca-btn ),
.bca-faixa--foto a:not( .bca-btn ) {
color: var( --bca-realce );
}
.bca-faixa--noite .bca-form a:not( .bca-btn ),
.bca-faixa--foto .bca-form a:not( .bca-btn ),
.bca-faixa--noite .bca-humano a:not( .bca-btn ),
.bca-faixa--foto .bca-humano a:not( .bca-btn ),
.bca-faixa--noite .bca-cartao a:not( .bca-btn ),
.bca-faixa--foto .bca-cartao a:not( .bca-btn ),
.bca-faixa--noite .bca-unidades-simples a,
.bca-faixa--foto .bca-unidades-simples a,
.bca-faixa--noite .bca-imprensa a:not( .bca-btn ),
.bca-faixa--foto .bca-imprensa a:not( .bca-btn ) {
color: var( --bca-azul );
}
/* ── A pastilha de ícone ─────────────────────────────────────────────────── */
/*
* O ícone de duas cores vive dentro de uma pastilha — e a pastilha é o que o
* olho enxerga de longe, rolando rápido: é ela que diferencia um bloco do
* seguinte antes de qualquer texto ser lido.
*
* O anel em degradê é o truque de duas camadas de `background` que o acervo já
* usa em `.bca-porque__icone`: uma camada no `padding-box` pinta o miolo, outra
* no `border-box` pinta a borda com o degradê. Sem isso, borda em degradê
* exigiria um pseudo-elemento a mais.
*/
.bca-pastilha {
position: relative;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
background:
linear-gradient( 160deg, #fffdf3, #fff6d2 ) padding-box,
var( --bca-magia-quente ) border-box;
border: 2px solid transparent;
border-radius: 16px;
box-shadow: var( --bca-clay, var( --bca-sombra ) );
transition: transform 260ms var( --bca-mola ), box-shadow 260ms ease;
}
/* O brilho que acende ao passar o mouse — mesma ideia do acervo. */
.bca-pastilha::before {
content: '';
position: absolute;
inset: -8px;
background: radial-gradient( circle, rgba( 255, 217, 54, 0.55 ), rgba( 255, 217, 54, 0 ) 70% );
border-radius: 50%;
opacity: 0;
pointer-events: none;
transition: opacity 260ms ease;
}
.bca-icone {
position: relative;
display: block;
}
/* As variantes: cada tema tem a sua, e cada uma mantém o par traço/massa
legível (o traço nunca fica mais claro que 3:1 contra a massa). */
.bca-pastilha--ceu {
background:
linear-gradient( 160deg, #f2f5ff, #e4eaff ) padding-box,
var( --bca-magia ) border-box;
}
.bca-pastilha--ceu .bca-icone {
--bca-icone-massa: #9fb4e8;
--bca-icone-traco: #16295e;
}
.bca-pastilha--mata {
background:
linear-gradient( 160deg, #f2fbf3, #dff2e3 ) padding-box,
linear-gradient( 120deg, #8fd39b 0%, #2f7a3f 100% ) border-box;
}
.bca-pastilha--mata .bca-icone {
--bca-icone-massa: #9bdca9;
--bca-icone-traco: #1d5228;
}
.bca-pastilha--brasa {
background:
linear-gradient( 160deg, #fff4ef, #ffe3d6 ) padding-box,
linear-gradient( 120deg, #ffb07a 0%, #a33a2a 100% ) border-box;
}
.bca-pastilha--brasa .bca-icone {
--bca-icone-massa: #ffb98f;
--bca-icone-traco: #7c2a1d;
}
/* Dentro das faixas fortes a pastilha inverte: vira clara e sólida, para não
competir com o fundo nem sumir nele. */
.bca-faixa--sol .bca-pastilha {
background:
linear-gradient( 160deg, #ffffff, #fff8dd ) padding-box,
linear-gradient( 120deg, #1e3780 0%, #2f4ea8 100% ) border-box;
}
.bca-faixa--noite .bca-pastilha,
.bca-faixa--foto .bca-pastilha {
background:
linear-gradient( 160deg, rgba( 255, 255, 255, 0.16 ), rgba( 255, 255, 255, 0.06 ) ) padding-box,
var( --bca-magia-quente ) border-box;
}
.bca-faixa--noite .bca-pastilha .bca-icone,
.bca-faixa--foto .bca-pastilha .bca-icone {
--bca-icone-massa: #ffd936;
--bca-icone-traco: #ffffff;
}
/*
* A entrada do ícone: mola e um giro curto, como no acervo.
*
* **O que mudou, e por quê.** A primeira versão começava em `opacity: 0` e
* contava com a animação (`backwards`) para trazer o ícone de volta. Isso torna
* a animação *responsável pela visibilidade do conteúdo* — e num quadro em que
* ela não avança, o `backwards` segura o estado inicial para sempre. Foi o que
* aconteceu numa captura a 1000px: o cabeçalho "Livros e leitura" apareceu sem
* ícone nenhum, dez segundos depois de a página carregar.
*
* Agora a pastilha **já está visível** e a animação só mexe em `scale` e
* `rotate`. Se ela não correr — navegador antigo, aba em segundo plano, aparelho
* economizando energia, captura sem quadros — o pior caso é o ícone aparecer sem
* graça, e não sumir. Nenhuma rede de salvamento é necessária, porque não há de
* que salvar.
*
* `scale`/`rotate` como propriedades próprias, e não dentro de `transform`, pelo
* mesmo motivo do botão flutuante: assim a animação não apaga o
* `transform: scale( 1.08 ) rotate( -4deg )` do hover — as duas coisas se somam.
*/
@keyframes bca-pop-icone {
0% {
scale: 0.6;
rotate: -12deg;
}
60% {
scale: 1.12;
rotate: 4deg;
}
100% {
scale: 1;
rotate: 0deg;
}
}
.bca-revela.esta-dentro .bca-pastilha,
.bca-revela.esta-dentro.bca-pastilha {
animation: bca-pop-icone 320ms var( --bca-mola ) 120ms;
}
@media ( hover: hover ) and ( pointer: fine ) {
.bca-cabeca--icone:hover .bca-pastilha,
.bca-cartao:hover .bca-pastilha,
.bca-atalho:hover .bca-pastilha,
.bca-valor:hover .bca-pastilha,
a:hover > .bca-pastilha {
transform: scale( 1.08 ) rotate( -4deg );
box-shadow: var( --bca-clay-alta, var( --bca-sombra-alta ) );
}
.bca-cabeca--icone:hover .bca-pastilha::before,
.bca-cartao:hover .bca-pastilha::before,
.bca-atalho:hover .bca-pastilha::before,
.bca-valor:hover .bca-pastilha::before {
opacity: 1;
}
}
/* ── Cabeçalho de seção com ícone ────────────────────────────────────────── */
/*
* O cabeçalho com ícone alinha à esquerda — e isto é decisão de ritmo, não
* gosto: `.bca-cabeca` do `site.css` centraliza tudo, e ícone encostado na
* margem esquerda com título centralizado no meio da tela lê como erro de
* montagem. A home faz o mesmo alternar: chamada centralizada, seção alinhada.
*/
.bca-cabeca--icone {
display: grid;
grid-template-columns: auto minmax( 0, 1fr );
gap: 4px 18px;
align-items: start;
margin-inline: 0;
max-width: none;
text-align: left;
}
/*
* O selo é uma pastilha `inline-flex`, mas dentro de uma grade ele vira item de
* grade e estica de ponta a ponta — o que o transformava numa barra azul de
* 1000px atravessando a tela. Encolhe de volta ao tamanho do texto.
*/
.bca-cabeca--icone > .bca-selo {
justify-self: start;
}
.bca-cabeca--icone .bca-titulo,
.bca-cabeca--icone .bca-paragrafo {
max-width: 62ch;
margin-inline: 0;
}
.bca-cabeca--icone > .bca-pastilha {
grid-row: span 3;
}
/*
* Tudo o que não é a pastilha vai para a segunda coluna — inclusive o que vier
* depois do trio selo/título/parágrafo.
*
* Sem esta regra, o quarto filho em diante cai na **primeira** coluna, que é
* `auto`: no bloco do voluntário isso jogou a caixa do WhatsApp lá dentro, a
* coluna inchou para o tamanho dela e a segunda — a do texto — encolheu para
* uma letra por linha. O título ficou escrito na vertical.
*/
.bca-cabeca--icone > *:not( .bca-pastilha ) {
grid-column: 2;
}
/* No celular o ícone sobe para cima do texto: em 320px, 52px de pastilha mais
um selo de 140px não cabem na mesma linha. */
@media ( max-width: 599px ) {
.bca-cabeca--icone {
grid-template-columns: minmax( 0, 1fr );
gap: 12px;
}
.bca-cabeca--icone > .bca-pastilha {
grid-row: auto;
}
.bca-cabeca--icone > *:not( .bca-pastilha ) {
grid-column: auto;
}
}
/* As faíscas do cabeçalho de seção — dois pontinhos que acendem em sequência
quando a seção entra na tela. Some abaixo de 768px: em tela estreita eles
caem em cima do texto. */
.bca-cabeca--faisca {
position: relative;
}
/*
* As faíscas nascem acesas e a revelação só as faz *entrar*: quem não recebe a
* classe `.esta-dentro` — porque o script não correu, porque a varredura não
* chegou ali — vê os dois pontinhos parados, que é o estado final. O contrário
* (nascer apagado e depender da classe) já custou o ícone da seção.
*/
.bca-cabeca--faisca::before,
.bca-cabeca--faisca::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background: var( --bca-realce );
border-radius: 50%;
opacity: 0.9;
transition: opacity 320ms ease, scale 320ms var( --bca-mola );
}
.bca-cabeca--faisca.bca-revela:not( .esta-dentro )::before,
.bca-cabeca--faisca.bca-revela:not( .esta-dentro )::after {
opacity: 0;
scale: 0.4;
}
/*
* As faíscas saem do ícone, e não da borda direita do cabeçalho: com o título
* alinhado à esquerda, dois pontinhos soltos no meio da tela parecem sujeira de
* renderização em vez de enfeite.
*/
.bca-cabeca--faisca::before {
top: -7px;
left: 44px;
}
.bca-cabeca--faisca::after {
top: 42px;
left: -7px;
width: 6px;
height: 6px;
transition-delay: 90ms;
}
.bca-cabeca--faisca.esta-dentro::before,
.bca-cabeca--faisca.esta-dentro::after {
opacity: 0.9;
scale: 1;
}
.bca-faixa--sol .bca-cabeca--faisca::before,
.bca-faixa--sol .bca-cabeca--faisca::after {
background: var( --bca-azul );
}
@media ( max-width: 599px ) {
.bca-cabeca--faisca::before,
.bca-cabeca--faisca::after {
display: none;
}
}
/* ── Cartão de número: barra de cor no topo e pulso no fim da contagem ───── */
.bca-numero {
position: relative;
overflow: hidden;
}
/*
* A barra nasce inteira e **encolhe** enquanto o cartão espera a revelação, em
* vez de nascer encolhida e depender dela para crescer. A diferença aparece no
* único caso que importa: quando a revelação não acontece, o cartão fica com a
* barra pintada em vez de ficar com um risco invisível no topo.
*/
.bca-numero::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 5px;
background: var( --bca-magia-quente );
transform-origin: left center;
transition: scale 520ms var( --bca-suave ) 120ms;
}
.bca-numero.bca-revela:not( .esta-dentro )::before {
scale: 0 1;
}
/* Cada bloco temático pinta a sua barra — é o fio que liga o cartão ao ícone
da seção. */
.bca-bloco--ceu .bca-numero::before {
background: var( --bca-magia );
}
.bca-bloco--mata .bca-numero::before {
background: linear-gradient( 120deg, #8fd39b 0%, #2f7a3f 100% );
}
.bca-bloco--brasa .bca-numero::before {
background: linear-gradient( 120deg, #ffb07a 0%, #a33a2a 100% );
}
/* O pulso de quando o número termina de contar: uma vez, curto. O `site.js`
marca `.esta-completo` no `` do valor ao fim da contagem. */
@keyframes bca-pulso-numero {
50% {
transform: scale( 1.1 );
}
}
.bca-numero__valor .esta-completo,
.bca-selo-num__valor .esta-completo {
display: inline-block;
animation: bca-pulso-numero 320ms var( --bca-mola );
}
@media ( hover: hover ) and ( pointer: fine ) {
.bca-numero:hover {
transform: translateY( -4px ) rotate( -0.6deg );
}
}
/* Dentro das faixas fortes o cartão continua branco — é o contraste dele com o
fundo que faz o número saltar. */
.bca-faixa--sol .bca-numero,
.bca-faixa--noite .bca-numero,
.bca-faixa--foto .bca-numero {
background: var( --bca-superficie );
border-color: transparent;
color: var( --bca-tinta );
}
.bca-faixa--noite .bca-numero .bca-numero__contexto,
.bca-faixa--foto .bca-numero .bca-numero__contexto,
.bca-faixa--noite .bca-numero .bca-numero__rotulo,
.bca-faixa--foto .bca-numero .bca-numero__rotulo {
color: var( --bca-tinta-suave );
}
.bca-faixa--noite .bca-numero a,
.bca-faixa--foto .bca-numero a,
.bca-faixa--sol .bca-numero a {
color: var( --bca-azul );
}
/* ── Barra de leitura com o degradê da casa ──────────────────────────────── */
.bca-progresso__barra {
background: linear-gradient( 90deg, var( --bca-azul ) 0%, var( --bca-acento ) 55%, var( --bca-realce ) 100% );
box-shadow: 0 0 10px rgba( 255, 217, 54, 0.8 );
}
/* ── O índice: de coluna morta a barra que gruda no topo ─────────────────── */
/*
* O índice era uma coluna de 220px à esquerda, visível só acima de 1100px. Duas
* coisas erradas nisso: abaixo de 1100px a página comprida ficava sem índice
* nenhum, e acima dele os 220px comiam a largura justo onde as faixas de cor
* precisavam correr de borda a borda.
*
* Agora é uma fileira de pastilhas que gruda embaixo do cabeçalho, em qualquer
* largura, rolando na horizontal quando não cabe. O ponto embaixo do item ativo
* desliza de um para o outro em vez de piscar.
*/
.bca-indice-caixa {
position: sticky;
top: var( --bca-topo-fixo, 64px );
z-index: 60;
/*
* Sem margem negativa: esta barra é filha direta de `.bca-pagina`, que já vai
* de borda a borda. Com `margin: 0 calc( -1 * var( --bca-recuo ) )` ela
* ficava `2 × recuo` mais larga que a tela — 340px de sobra a 1920px — e
* punha rolagem lateral na página inteira, em toda largura medida.
*/
margin: 0;
padding: 0 var( --bca-recuo );
background: rgba( 250, 248, 242, 0.94 );
border-bottom: 1px solid var( --bca-borda );
-webkit-backdrop-filter: blur( 8px );
backdrop-filter: blur( 8px );
}
.bca-indice {
display: flex;
/* 8px entre alvos de toque, não 4: dois links de 44px encostados a 4px de
distância erram o dedo um pelo outro. */
gap: 8px;
max-width: 1240px;
margin: 0 auto;
padding: 0;
overflow-x: auto;
list-style: none;
scrollbar-width: none;
}
.bca-indice::-webkit-scrollbar {
display: none;
}
.bca-indice a {
position: relative;
display: flex;
align-items: center;
min-height: 44px;
padding: 10px 14px;
font-size: 0.9375rem;
font-weight: 600;
white-space: nowrap;
color: var( --bca-tinta-suave );
text-decoration: none;
border: 0;
transition: color 180ms ease;
}
.bca-indice a::after {
content: '';
position: absolute;
right: 10px;
bottom: 6px;
left: 10px;
height: 3px;
background: var( --bca-magia-quente );
border-radius: 999px;
transform: scaleX( 0 );
transition: transform 260ms var( --bca-mola );
}
.bca-indice a:hover,
.bca-indice a:focus-visible {
color: var( --bca-tinta );
}
.bca-indice a.esta-aqui {
color: var( --bca-azul );
}
.bca-indice a.esta-aqui::after {
transform: scaleX( 1 );
}
/* ── A luz que segue o cursor, no herói das duas páginas ─────────────────── */
/*
* Copiada do herói do acervo, com a mesma regra: só em quem tem mouse de
* verdade (`hover: hover` e `pointer: fine`). Em tela de toque ela não teria o
* que seguir e viraria uma mancha parada no canto.
*
* O JavaScript escreve `--bca-x` e `--bca-y`; sem ele o elemento fica onde
* nasceu, que é um lugar razoável.
*/
.bca-pagina__brilho {
display: none;
}
@media ( hover: hover ) and ( pointer: fine ) {
.bca-pagina__brilho {
position: absolute;
top: 0;
left: 0;
z-index: 0;
display: block;
width: 420px;
height: 420px;
margin: -210px 0 0 -210px;
background: radial-gradient( circle, rgba( 255, 217, 54, 0.3 ), rgba( 255, 217, 54, 0 ) 65% );
border-radius: 50%;
opacity: 0;
pointer-events: none;
transform: translate3d( 50%, 50%, 0 );
transition: opacity 420ms ease;
}
.bca-pagina__heroi.tem-luz .bca-pagina__brilho {
opacity: 1;
}
}
/* O conteúdo do herói tem de ficar acima da luz. */
.bca-pagina__heroi > .bca-pagina__interno {
position: relative;
z-index: 1;
}
/* ── Como Ajudar: os atalhos viram cartão ────────────────────────────────── */
/*
* Eram quatro botões-fantasma iguais, um do lado do outro: nada dizia qual
* levava a dinheiro, qual a livro, qual a tempo. Viram cartão com ícone e cor
* própria — e continuam sendo um link só, com o alvo inteiro clicável.
*/
.bca-atalhos {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( min( 200px, 100% ), 1fr ) );
gap: 12px;
margin: clamp( 22px, 2.6vw, 32px ) 0 0;
padding: 0;
list-style: none;
}
.bca-atalho {
display: flex;
gap: 14px;
align-items: center;
height: 100%;
padding: 14px 16px;
font-weight: 700;
color: var( --bca-tinta );
text-decoration: none;
background: rgba( 255, 255, 255, 0.94 );
border: 2px solid transparent;
border-radius: 18px;
box-shadow: var( --bca-clay, var( --bca-sombra ) );
transition: transform 240ms var( --bca-mola ), box-shadow 240ms ease, border-color 240ms ease;
}
.bca-atalho__texto {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.bca-atalho__linha {
font-size: 13px;
font-weight: 600;
color: var( --bca-tinta-suave );
}
.bca-atalho .bca-pastilha {
width: 46px;
height: 46px;
}
@media ( hover: hover ) and ( pointer: fine ) {
.bca-atalho:hover {
transform: translateY( -5px );
border-color: var( --bca-acento );
box-shadow: var( --bca-clay-alta, var( --bca-sombra-alta ) );
}
}
.bca-atalho:focus-visible {
outline: 3px solid var( --bca-azul );
outline-offset: 3px;
}
/* ── A prova social do herói: três selos de número ───────────────────────── */
.bca-prova-selos {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: clamp( 20px, 2.4vw, 28px ) 0 0;
padding: 0;
list-style: none;
}
.bca-prova-selos .bca-selo-num {
min-width: 132px;
padding: 12px 18px;
}
.bca-prova-selos .bca-selo-num__valor {
font-size: 28px;
}
/* ── PIX: moldura amarela e confirmação de cópia ─────────────────────────── */
.bca-pix-cartao {
position: relative;
border: 3px solid var( --bca-realce );
}
.bca-pix-cartao::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 6px;
background: var( --bca-magia-quente );
border-radius: 999px 999px 0 0;
}
.bca-pix-cartao__cabeca {
display: flex;
gap: 14px;
align-items: center;
margin-bottom: 18px;
}
.bca-pix-cartao__cabeca strong {
font-family: var( --bca-display );
font-size: 20px;
}
/* O aviso de "copiado!" — o `site.js` já troca o texto do botão; aqui ele
ganha a cor de confirmação para que a mudança seja vista, e não só lida. */
.bca-btn.bca-copiado {
color: #14361d;
background: #9bdca9;
border-color: #2f7a3f;
}
/* ── Os três valores de doação viram cartão ──────────────────────────────── */
.bca-valores {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( min( 200px, 100% ), 1fr ) );
gap: 12px;
}
.bca-valor {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
padding: 18px;
background: var( --bca-superficie );
border: 1px solid var( --bca-borda );
border-radius: 18px;
box-shadow: var( --bca-clay, var( --bca-sombra ) );
transition: transform 240ms var( --bca-mola ), box-shadow 240ms ease;
}
.bca-valor__quanto {
font-family: var( --bca-display );
font-size: 30px;
font-weight: 700;
line-height: 1;
color: var( --bca-azul );
}
@media ( hover: hover ) and ( pointer: fine ) {
.bca-valor:hover {
transform: translateY( -4px );
box-shadow: var( --bca-clay-alta, var( --bca-sombra-alta ) );
}
}
/* ── As listas de sim e não com pastilha ─────────────────────────────────── */
.bca-lista-marcada li {
align-items: center;
}
.bca-lista-marcada .bca-pastilha {
width: 34px;
height: 34px;
border-radius: 12px;
box-shadow: none;
}
.bca-lista-marcada .bca-icone {
width: 20px;
height: 20px;
}
/* ── As sete unidades com o mapa ao fundo ────────────────────────────────── */
.bca-unidades-simples {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( min( 260px, 100% ), 1fr ) );
gap: 14px;
}
.bca-unidades-simples li {
position: relative;
overflow: hidden;
isolation: isolate;
}
.bca-unidade-mapa {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
opacity: 0.16;
transition: opacity 320ms ease, transform 420ms var( --bca-suave );
}
.bca-unidade-mapa img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media ( hover: hover ) and ( pointer: fine ) {
.bca-unidades-simples li:hover .bca-unidade-mapa {
opacity: 0.3;
transform: scale( 1.06 );
}
}
/* ── Cartões genéricos: ícone e borda de cor por cartão ──────────────────── */
.bca-cartao {
position: relative;
overflow: hidden;
transition: transform 260ms var( --bca-mola ), box-shadow 260ms ease;
}
.bca-cartao::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 5px;
background: var( --bca-magia-quente );
transform-origin: left center;
transition: scale 520ms var( --bca-suave ) 120ms;
}
.bca-cartao.bca-revela:not( .esta-dentro )::before {
scale: 0 1;
}
.bca-cartao:nth-child( 2 )::before {
background: var( --bca-magia );
}
.bca-cartao:nth-child( 3 )::before {
background: linear-gradient( 120deg, #8fd39b 0%, #2f7a3f 100% );
}
.bca-cartao .bca-pastilha {
margin-bottom: 12px;
}
@media ( hover: hover ) and ( pointer: fine ) {
.bca-cartao:hover {
transform: translateY( -5px );
box-shadow: var( --bca-clay-alta, var( --bca-sombra-alta ) );
}
}
/* ── O bloco de imprensa dentro da faixa azul ────────────────────────────── */
.bca-faixa--noite .bca-imprensa {
color: var( --bca-tinta );
background: var( --bca-superficie );
}
.bca-faixa--noite .bca-imprensa .bca-imprensa__linha {
color: var( --bca-tinta-suave );
}
/* ── O botão que varre ───────────────────────────────────────────────────── */
/*
* O brilho que atravessa o botão no hover — `bca-varre` do acervo. Não entra em
* `:focus`: quem navega por teclado veria o brilho disparar a cada Tab.
*/
@keyframes bca-varre-botao {
from {
opacity: 0.7;
transform: translateX( 0 ) skewX( -18deg );
}
to {
opacity: 0;
transform: translateX( 340% ) skewX( -18deg );
}
}
@media ( hover: hover ) and ( pointer: fine ) {
.bca-pagina .bca-btn {
position: relative;
overflow: hidden;
}
.bca-pagina .bca-btn::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -40%;
width: 32%;
background: linear-gradient( 90deg, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 0.6 ), rgba( 255, 255, 255, 0 ) );
opacity: 0;
pointer-events: none;
}
.bca-pagina .bca-btn:hover::before {
animation: bca-varre-botao 620ms ease-out;
}
}
/* ── O confete do formulário enviado ─────────────────────────────────────── */
/*
* Um punhado de papelotes caindo por trás da caixa de sucesso, uma vez só, por
* 1,6 segundo. É o mesmo gesto da retirada de livro no acervo: o envio de um
* formulário de voluntário é o momento mais alto da página, e ele terminava
* numa caixa verde silenciosa.
*
* `pointer-events: none` e `aria-hidden` no JavaScript: o confete não pode
* ficar entre o dedo e o texto do sucesso, nem ser lido em voz alta.
*/
.bca-confete {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.bca-confete span {
position: absolute;
top: -14px;
width: 9px;
height: 14px;
background: var( --bca-realce );
border-radius: 2px;
opacity: 0;
animation: bca-confete-cai 1.6s var( --bca-suave ) forwards;
}
.bca-confete span:nth-child( 3n ) {
background: var( --bca-azul );
}
.bca-confete span:nth-child( 4n ) {
background: #2f7a3f;
width: 7px;
height: 7px;
border-radius: 50%;
}
@keyframes bca-confete-cai {
0% {
opacity: 0;
transform: translateY( -10px ) rotate( 0deg );
}
12% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY( 260px ) rotate( 420deg );
}
}
.bca-form__sucesso {
position: relative;
overflow: hidden;
}
/* O botão enquanto envia: uma rodinha, não só o texto trocado. */
@keyframes bca-gira {
to {
transform: rotate( 360deg );
}
}
.bca-btn[ aria-busy="true" ]::after {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-left: 10px;
vertical-align: -2px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: bca-gira 700ms linear infinite;
}
/* ── Quem pediu menos movimento (a leva nova) ────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
/*
* Todos estes já são visíveis por padrão — o que o bloco faz aqui é impedir
* que a versão *encolhida* (a que espera a revelação) fique parada na tela
* quando a transição está desligada.
*/
.bca-revela.esta-dentro .bca-pastilha,
.bca-revela.esta-dentro.bca-pastilha {
animation: none;
}
.bca-numero.bca-revela:not( .esta-dentro )::before,
.bca-cartao.bca-revela:not( .esta-dentro )::before,
.bca-numero--forte.bca-revela:not( .esta-dentro ) .bca-numero__valor::after {
scale: 1 1;
}
.bca-cabeca--faisca.bca-revela:not( .esta-dentro )::before,
.bca-cabeca--faisca.bca-revela:not( .esta-dentro )::after {
opacity: 0.9;
scale: 1;
}
.bca-pagina__brilho,
.bca-confete {
display: none;
}
.bca-btn[ aria-busy="true" ]::after {
animation: none;
}
}
/* ── Celular: o que a cor nova pede de ajuste ────────────────────────────── */
@media ( max-width: 599px ) {
.bca-pastilha {
width: 46px;
height: 46px;
border-radius: 14px;
}
.bca-indice a {
padding: 10px 12px;
font-size: 0.875rem;
}
.bca-atalho {
padding: 12px 14px;
}
}
/* ── A chamada final: texto no meio, véu parelho ─────────────────────────── */
/*
* As outras faixas com foto têm o texto à esquerda, e o véu escurece daquele
* lado. Esta é centralizada, e com o mesmo véu o texto do meio ficava em cima
* da parte mais clara da foto.
*/
.bca-impacto-final.bca-faixa--foto::before {
background:
linear-gradient( 180deg, rgba( 16, 26, 61, 0.86 ), rgba( 16, 26, 61, 0.9 ) ),
radial-gradient( 60% 70% at 50% 50%, rgba( 16, 26, 61, 0.5 ), rgba( 16, 26, 61, 0 ) 70% );
}
/*
* A inversão das pastilhas em faixa escura vale para as neutras. As duas que
* carregam significado — o "recebe" verde e o "não dá para aproveitar"
* vermelho — mantêm a cor delas em qualquer fundo: se as duas virassem amarelas
* na faixa azul, a lista perderia a única diferença visual que tem.
*/
.bca-faixa--noite .bca-pastilha--mata,
.bca-faixa--foto .bca-pastilha--mata {
background:
linear-gradient( 160deg, #f2fbf3, #dff2e3 ) padding-box,
linear-gradient( 120deg, #8fd39b 0%, #2f7a3f 100% ) border-box;
}
.bca-faixa--noite .bca-pastilha--mata .bca-icone,
.bca-faixa--foto .bca-pastilha--mata .bca-icone {
--bca-icone-massa: #9bdca9;
--bca-icone-traco: #1d5228;
}
.bca-faixa--noite .bca-pastilha--brasa,
.bca-faixa--foto .bca-pastilha--brasa {
background:
linear-gradient( 160deg, #fff4ef, #ffe3d6 ) padding-box,
linear-gradient( 120deg, #ffb07a 0%, #a33a2a 100% ) border-box;
}
.bca-faixa--noite .bca-pastilha--brasa .bca-icone,
.bca-faixa--foto .bca-pastilha--brasa .bca-icone {
--bca-icone-massa: #ffb98f;
--bca-icone-traco: #7c2a1d;
}
/* ── As migalhas: alinhamento e acabamento ───────────────────────────────── */
/*
* O defeito era de alinhamento, e nascia de uma correção anterior: para virar
* alvo de toque, o link ganhou `min-height: 44px` e `display: inline-flex`, que
* centraliza o texto dele na caixa. O resto da trilha — o `›` e o nome da página
* atual — continuou sendo texto solto, encostado no **topo** dos mesmos 44px,
* porque item de flex estica por padrão. Resultado: "Início" no meio da linha,
* "› Como Ajudar" acima dele.
*
* Agora as três peças são itens de flex centralizados, e a trilha inteira mora
* numa pastilha de vidro — as migalhas ficam sempre em cima da foto do herói, e
* texto claro sobre foto é o lugar onde este projeto mais errou contraste.
*/
body.bca-impacto-ativa .bca-pagina .bca-migalhas,
body.bca-ajudar-ativa .bca-pagina .bca-migalhas,
body.bca-legal-ativa .bca-pagina .bca-migalhas {
display: inline-flex;
align-items: center;
gap: 2px;
margin: 0 0 20px;
padding: 2px 14px 2px 10px;
font-size: 0.875rem;
color: rgba( 255, 255, 255, 0.92 );
background: rgba( 255, 255, 255, 0.14 );
border: 1px solid rgba( 255, 255, 255, 0.24 );
border-radius: 999px;
-webkit-backdrop-filter: blur( 6px );
backdrop-filter: blur( 6px );
}
.bca-migalhas li {
display: inline-flex;
align-items: center;
gap: 2px;
min-width: 0;
}
/* O separador vira item alinhado ao centro, e não um `::after` pendurado na
linha de base de um texto que não existe mais. */
.bca-migalhas li::after {
display: inline-flex;
align-items: center;
margin: 0 2px 0 4px;
font-size: 15px;
line-height: 1;
opacity: 0.55;
}
/* A página atual é o fim da trilha: sem sublinhado, um pouco mais firme que o
caminho que levou até ela. */
.bca-migalhas li[ aria-current="page" ] {
padding: 0 2px;
font-weight: 600;
color: #ffffff;
}
body.bca-impacto-ativa .bca-pagina .bca-migalhas a,
body.bca-ajudar-ativa .bca-pagina .bca-migalhas a,
body.bca-legal-ativa .bca-pagina .bca-migalhas a {
display: inline-flex;
gap: 6px;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 0 6px;
color: inherit;
text-decoration-color: rgba( 255, 255, 255, 0.45 );
text-underline-offset: 4px;
border-radius: 999px;
transition: color 180ms ease, background-color 180ms ease;
}
/*
* A casinha do "Início", como máscara e não como imagem: assim ela herda a cor
* do link e muda junto no hover. Vai em `data:` porque o CSP dos Artifacts e o
* bom senso de deploy dizem a mesma coisa — nada de arquivo externo para 400
* bytes de desenho.
*/
.bca-migalhas li:first-child a::before {
content: '';
flex: 0 0 auto;
width: 15px;
height: 15px;
background-color: currentColor;
-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.6V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.6'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/svg%3E" ) center / contain no-repeat;
mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.6V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.6'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/svg%3E" ) center / contain no-repeat;
}
.bca-migalhas a:hover,
.bca-migalhas a:focus-visible {
color: var( --bca-realce );
background: rgba( 255, 255, 255, 0.16 );
}
/* Em tela estreita a pastilha some e fica só a trilha: 44px de altura mais a
moldura empurram o título do herói para baixo justo onde a tela é curta. */
@media ( max-width: 599px ) {
body.bca-impacto-ativa .bca-pagina .bca-migalhas,
body.bca-ajudar-ativa .bca-pagina .bca-migalhas,
body.bca-legal-ativa .bca-pagina .bca-migalhas {
padding: 0;
background: none;
border-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
@media print {
.bca-migalhas li:first-child a::before {
display: none;
}
}
/* ── Grades com número de colunas, e não com `auto-fit` ──────────────────── */
/*
* `auto-fit` com `minmax()` é cômodo para escrever e ruim de prever: o número de
* colunas é uma conta entre a largura da tela, o recuo e o vão, e o resultado
* depende de quantos itens a lista tem naquele bloco. O sintoma concreto é o
* **cartão órfão**: a grade de quatro números virava 3 + 1 por volta de 900px, e
* o quarto cartão esticava por 850px de tela para dizer "650 livros emprestados".
* A de três cartões fazia 2 + 1 perto de 768px.
*
* Aqui o número de colunas é escrito, degrau por degrau, e cada grade diz quantos
* itens tem — a contagem vem do PHP, numa classe, e não de `:has()`, para que o
* resultado seja o mesmo em qualquer navegador.
*
* Um item sozinho na última linha continua acontecendo onde é inevitável (sete
* unidades nunca fecham uma grade), mas ali ele tem a largura de um cartão, e
* não a da linha inteira.
*/
.bca-numeros,
.bca-cartoes,
.bca-atalhos,
.bca-valores {
grid-template-columns: minmax( 0, 1fr );
}
@media ( min-width: 600px ) {
.bca-numeros,
.bca-cartoes,
.bca-atalhos,
.bca-valores {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
/* Três itens em duas colunas deixam um órfão; melhor as três lado a lado,
que a esta largura ainda cabem. */
.bca-numeros--3,
.bca-cartoes,
.bca-valores {
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}
}
@media ( min-width: 1200px ) {
.bca-numeros--4,
.bca-atalhos {
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}
.bca-numeros--3 {
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}
.bca-numeros--2 {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
/*
* Os valores de doação moram numa coluna estreita a partir de 900px (o cartão do
* PIX fica ao lado), e três colunas ali dariam 150px cada. Voltam a ser um
* embaixo do outro, que é como uma lista de preço se lê.
*/
@media ( min-width: 900px ) {
.bca-valores {
grid-template-columns: minmax( 0, 1fr );
}
}
/*
* As sete unidades são o caso em que contagem não ajuda: nenhum número de
* colunas fecha sete. Seguem com largura mínima, e a sobra da última linha é um
* cartão do tamanho dos outros.
*/
.bca-unidades-simples {
grid-template-columns: repeat( auto-fill, minmax( min( 260px, 100% ), 1fr ) );
}
/* ── Texto que respeita a fonte do navegador ─────────────────────────────── */
/*
* O texto que se lê passou de `px` para `rem`: parágrafo, rótulo, contexto,
* campo de formulário, aviso, migalha e índice. Quem aumentou a fonte padrão do
* navegador — coisa comum em quem enxerga pouco — agora vê diferença nestas
* páginas.
*
* O que **não** virou `rem`, de propósito: título e número, que já crescem com a
* tela por `clamp()` e ficariam com duas escalas brigando; as duas etiquetas em
* caixa alta, que são forma e não leitura; e o `copia e cola` do PIX, que é
* código dentro de uma caixa de tamanho fixo.
*
* A raiz deste site mede 16px, então a conta é direta: 17px = 1,0625rem,
* 15px = 0,9375rem, 14px = 0,875rem.
*/
/*
* O piso de 16px no campo de formulário é regra do iOS, não gosto: campo com
* fonte menor que isso faz o Safari dar zoom sozinho ao receber o toque, e a
* página inteira sai do lugar. Com `rem` o piso sobe junto com a fonte da
* pessoa, nunca desce.
*/
.bca-campo input[type="text"],
.bca-campo input[type="email"],
.bca-campo input[type="tel"],
.bca-campo select,
.bca-campo textarea {
font-size: max( 1rem, 16px );
}
/* ── Tela deitada e tela baixa ───────────────────────────────────────────── */
/*
* O celular deitado é a tela que este projeto nunca tinha olhado. A 740×360 o
* cabeçalho sozinho come 96px — 27% da altura — e, no Impacto, a fileira do
* índice cola mais 45px embaixo dele: um terço da tela ocupado por barra antes
* de qualquer conteúdo. O recuo de 96px acima e abaixo de cada seção, que é
* generoso num monitor, aqui é uma tela inteira de nada.
*
* Não é um caso raro: é o que acontece quando alguém vira o aparelho para ver
* uma foto, e é a proporção de quase todo tablet pequeno em pé numa mão.
*
* `max-height` em vez de `max-width` porque o que falta aqui é altura. A
* Biblioteca Virtual já trata a dela assim (`biblioteca.css`, 520px); estas
* páginas usam 560px porque têm uma barra a mais no topo.
*/
@media ( orientation: landscape ) and ( max-height: 560px ) {
body.bca-impacto-ativa .bca-pagina > section,
body.bca-ajudar-ativa .bca-pagina > section,
body.bca-legal-ativa .bca-pagina > section {
padding-top: clamp( 32px, 9vh, 56px );
padding-bottom: clamp( 32px, 9vh, 56px );
}
body.bca-impacto-ativa .bca-pagina__heroi .bca-titulo,
body.bca-ajudar-ativa .bca-pagina__heroi .bca-titulo,
body.bca-legal-ativa .bca-pagina__heroi .bca-titulo {
font-size: clamp( 30px, 7vh, 44px );
}
body.bca-impacto-ativa .bca-pagina .bca-cabeca,
body.bca-ajudar-ativa .bca-pagina .bca-cabeca,
body.bca-legal-ativa .bca-pagina .bca-cabeca {
margin-bottom: clamp( 18px, 4vh, 28px );
}
/*
* A fileira do índice para de grudar: duas barras fixas numa tela de 360px de
* altura deixariam 250px para o texto. Ela continua ali, no lugar dela, e
* rola com a página.
*/
.bca-indice-caixa {
position: static;
}
body.bca-impacto-ativa .bca-bloco-tema,
body.bca-impacto-ativa #como-medimos,
body.bca-impacto-ativa [id],
body.bca-ajudar-ativa [id],
body.bca-legal-ativa [id] {
scroll-margin-top: 80px;
}
/* O vão entre os selos de número do herói, que a esta altura viram três
linhas se ficarem no tamanho de monitor. */
.bca-selos,
.bca-prova-selos {
gap: 10px;
}
}
/* ── Tela grande ─────────────────────────────────────────────────────────── */
/*
* Acima de 1600px sobravam ~660px vazios de cada lado a 2560px, com o conteúdo
* preso em 1240. A partir daqui a caixa cresce até 1440 — o que ganha largura é
* a grade de cartões e a foto, **não** a linha de texto: o parágrafo continua
* limitado a 62 caracteres, que é a medida em que se lê sem perder a linha de
* vista.
*/
@media ( min-width: 1600px ) {
body.bca-impacto-ativa .bca-pagina,
body.bca-ajudar-ativa .bca-pagina,
body.bca-legal-ativa .bca-pagina {
--bca-recuo: max( 24px, calc( ( 100% - 1440px ) / 2 ) );
}
.bca-pagina__interno {
max-width: 1440px;
}
}
/*
* O rótulo do consentimento é o alvo de toque da caixa de marcar, e só vale
* como alvo se tiver 44px. Em tela de 414px para cima a frase cabe em duas
* linhas e o rótulo media 38px — o caçador de celular pegou na verificação do
* quarto deploy. Altura mínima em vez de confiar em quantas linhas a frase dá.
*/
.bca-consentimento {
min-height: 44px;
padding-block: 3px;
}
/* ═══════════════════════════════════════════════════════════════════════════
* Documentos de proteção de dados e Contato
*
* Privacidade, Cookies, Termos de Uso, Seus dados e Contato herdam tudo o que a
* Como Ajudar tem — herói, faixas, cartões, índice, pastilhas — pela classe
* `bca-legal-ativa`. Este bloco só acrescenta o que texto jurídico pede e página
* de captação não pedia: coluna de leitura, tabela que vira cartão no celular,
* quadro de destaque, glossário, e uma folha de impressão.
* ═══════════════════════════════════════════════════════════════════════════ */
/* ── Campo pendente: impossível passar despercebido ──────────────────────── */
.bca-pendente {
padding: 0 4px;
color: #5c1a00;
background: #ffe7a8;
border: 1px dashed #b54708;
border-radius: 4px;
}
/* ── Versão e vigência, no herói e no fim ────────────────────────────────── */
.bca-legal__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: clamp( 18px, 2vw, 24px ) 0 0;
padding: 0;
font-size: 0.875rem;
}
.bca-legal__meta > span {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 4px 12px;
color: #ffffff;
background: rgba( 255, 255, 255, 0.14 );
border: 1px solid rgba( 255, 255, 255, 0.24 );
border-radius: 999px;
}
.bca-legal__meta--escuro > span {
color: var( --bca-tinta );
background: var( --bca-superficie );
border-color: var( --bca-borda );
}
/* ── Grades de 4 e de 3 cartões ──────────────────────────────────────────── */
@media ( min-width: 600px ) {
.bca-cartoes--4,
.bca-atalhos--3 {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.bca-atalhos--3 {
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}
}
@media ( min-width: 1200px ) {
.bca-cartoes--4 {
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}
}
/* ── O documento ─────────────────────────────────────────────────────────── */
/*
* Coluna de leitura de ~70 caracteres. A faixa continua indo de borda a borda;
* o que fica estreito é o texto, que é o que precisa de medida para não perder a
* linha de vista.
*/
/*
* A caixa acompanha a largura das outras faixas (1240px), e o que fica estreito é
* cada seção: assim o documento começa na mesma linha vertical do "Em resumo" e
* do herói, em vez de flutuar no meio da tela.
*/
.bca-legal__interno {
max-width: 1240px;
}
.bca-legal__secao {
max-width: 860px;
padding-block: clamp( 28px, 3.4vw, 44px );
border-top: 1px solid var( --bca-borda );
scroll-margin-top: 190px;
}
.bca-legal__secao:first-child {
padding-top: 0;
border-top: 0;
}
body.bca-legal-ativa #em-resumo {
scroll-margin-top: 190px;
}
.bca-legal__cabeca {
display: flex;
flex-wrap: wrap;
gap: 12px 16px;
align-items: center;
margin-bottom: 18px;
}
.bca-legal__cabeca .bca-pastilha {
width: 44px;
height: 44px;
border-radius: 14px;
}
.bca-legal__titulo {
flex: 1 1 260px;
margin: 0;
font-family: var( --bca-display );
font-size: clamp( 1.375rem, 2.4vw, 1.75rem );
font-weight: 600;
line-height: 1.2;
letter-spacing: normal;
color: var( --bca-tinta );
}
.bca-legal__numero {
margin-right: 6px;
color: var( --bca-acento-txt );
}
.bca-legal__ancora {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 6px 14px;
font: inherit;
font-size: 0.875rem;
font-weight: 600;
color: var( --bca-azul );
background: transparent;
border: 1px solid var( --bca-azul-borda );
border-radius: 999px;
cursor: pointer;
transition: background-color 160ms ease, border-color 160ms ease;
}
.bca-legal__ancora:hover,
.bca-legal__ancora:focus-visible {
background: var( --bca-azul-fundo );
border-color: var( --bca-azul );
}
.bca-legal__ancora:focus-visible {
outline: 3px solid var( --bca-azul );
outline-offset: 2px;
}
body.bca-legal-ativa .bca-legal__texto {
max-width: 70ch;
font-size: 1.0625rem;
line-height: 1.7;
color: var( --bca-tinta );
}
body.bca-legal-ativa .bca-legal__texto p {
margin: 0 0 1em;
}
body.bca-legal-ativa .bca-legal__texto a:not( .bca-btn ) {
color: var( --bca-azul );
text-decoration: underline;
text-underline-offset: 3px;
overflow-wrap: anywhere;
}
body.bca-legal-ativa .bca-legal__texto code {
padding: 1px 6px;
font-size: 0.9em;
background: var( --bca-azul-fundo );
border-radius: 6px;
overflow-wrap: anywhere;
}
.bca-legal__sub {
margin: 1.6em 0 0.6em;
font-family: var( --bca-display );
font-size: 1.1875rem;
font-weight: 600;
letter-spacing: normal;
color: var( --bca-azul );
}
.bca-legal__sub:first-child {
margin-top: 0;
}
body.bca-legal-ativa .bca-legal__lista {
margin: 0 0 1em;
padding: 0;
list-style: none;
}
body.bca-legal-ativa .bca-legal__lista li {
position: relative;
margin: 0 0 0.55em;
padding-left: 1.5em;
}
body.bca-legal-ativa .bca-legal__lista li::before {
content: '';
position: absolute;
top: 0.62em;
left: 0.3em;
width: 8px;
height: 8px;
background: var( --bca-realce );
border: 2px solid var( --bca-acento-txt );
border-radius: 50%;
}
/* ── Quadro de destaque ──────────────────────────────────────────────────── */
body.bca-legal-ativa .bca-destaque {
display: flex;
gap: 14px;
align-items: flex-start;
margin: 1.2em 0;
padding: 16px 18px;
background: #fffaea;
border: 1px solid rgba( 138, 111, 0, 0.28 );
border-left: 6px solid var( --bca-realce );
border-radius: 16px;
}
body.bca-legal-ativa .bca-destaque .bca-pastilha {
width: 40px;
height: 40px;
border-radius: 12px;
}
body.bca-legal-ativa .bca-destaque p {
margin: 0;
}
body.bca-legal-ativa .bca-destaque .bca-destaque__titulo {
margin-bottom: 4px;
font-weight: 700;
}
/* ── Glossário ───────────────────────────────────────────────────────────── */
.bca-defs {
display: grid;
gap: 12px;
margin: 0;
}
@media ( min-width: 600px ) {
.bca-defs {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
.bca-defs__item {
padding: 14px 16px;
background: var( --bca-fundo );
border: 1px solid var( --bca-borda );
border-radius: 14px;
}
.bca-defs dt {
font-weight: 700;
color: var( --bca-azul );
}
.bca-defs dd {
margin: 4px 0 0;
}
/* ── Tabela que vira cartão no celular ───────────────────────────────────── */
.bca-tabela {
margin: 0.4em 0 1.2em;
}
.bca-tabela table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.9375rem;
line-height: 1.55;
background: var( --bca-superficie );
border: 1px solid var( --bca-borda );
border-radius: 16px;
overflow: hidden;
}
.bca-tabela th,
.bca-tabela td {
padding: 12px 14px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var( --bca-borda );
}
.bca-tabela tbody tr:last-child th,
.bca-tabela tbody tr:last-child td {
border-bottom: 0;
}
.bca-tabela thead th {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var( --bca-azul );
background: var( --bca-azul-fundo );
}
.bca-tabela tbody th {
font-weight: 700;
color: var( --bca-tinta );
background: #fffdf3;
}
/* Nome de cookie não se parte no meio ("bca_c / ookie / s"): a coluna cresce. */
.bca-tabela code {
white-space: nowrap;
}
/* O cabeçalho em caixa-alta não pode ser cortado pela borda arredondada. */
.bca-tabela thead th {
letter-spacing: 0.02em;
overflow-wrap: anywhere;
}
/*
* Abaixo de 600px: cada linha vira um cartão. O cabeçalho sai da tela (mas não
* do leitor de tela, que continua lendo a tabela como tabela) e cada célula
* mostra o nome da coluna antes do valor, vindo de `data-rotulo`.
*/
@media ( max-width: 599px ) {
.bca-tabela table,
.bca-tabela tbody,
.bca-tabela tr,
.bca-tabela th,
.bca-tabela td {
display: block;
width: 100%;
}
.bca-tabela table {
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
.bca-tabela thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect( 0 0 0 0 );
white-space: nowrap;
}
.bca-tabela tbody tr {
margin-bottom: 12px;
background: var( --bca-superficie );
border: 1px solid var( --bca-borda );
border-radius: 16px;
overflow: hidden;
}
.bca-tabela th,
.bca-tabela td {
padding: 10px 14px;
}
.bca-tabela tbody tr th,
.bca-tabela tbody tr td {
border-bottom: 1px solid var( --bca-borda );
}
.bca-tabela tbody tr > :last-child {
border-bottom: 0;
}
.bca-tabela td::before {
content: attr( data-rotulo );
display: block;
margin-bottom: 2px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var( --bca-azul );
}
}
/* ── Botões dentro do texto ──────────────────────────────────────────────── */
body.bca-legal-ativa .bca-legal__botoes {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 1em 0;
}
.bca-legal__botoes--centro {
justify-content: center;
}
.bca-legal__botoes .bca-btn {
display: inline-flex;
gap: 8px;
align-items: center;
}
.bca-legal__botoes .bca-btn .bca-icone {
width: 22px;
height: 22px;
}
@media ( max-width: 599px ) {
.bca-legal__botoes .bca-btn {
flex: 1 1 100%;
justify-content: center;
}
}
/* ── Fim do documento ────────────────────────────────────────────────────── */
.bca-legal__mudou {
max-width: 860px;
margin-bottom: clamp( 28px, 3.4vw, 44px );
padding: clamp( 20px, 2.4vw, 30px );
background: var( --bca-superficie );
border: 1px solid var( --bca-borda );
border-radius: 22px;
box-shadow: var( --bca-clay, var( --bca-sombra ) );
}
.bca-legal__outros .bca-atalho {
background: var( --bca-superficie );
}
/* ── Contato: os dois canais no herói ────────────────────────────────────── */
.bca-canais {
display: grid;
grid-template-columns: minmax( 0, 1fr );
gap: 14px;
max-width: 860px;
margin: clamp( 22px, 2.6vw, 32px ) 0 0;
padding: 0;
list-style: none;
}
@media ( min-width: 600px ) {
.bca-canais {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
.bca-canal {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
padding: clamp( 18px, 2.2vw, 26px );
color: var( --bca-tinta );
background: rgba( 255, 255, 255, 0.95 );
border-radius: 22px;
box-shadow: var( --bca-clay, var( --bca-sombra ) );
}
body.bca-legal-ativa .bca-canal p {
margin: 0;
color: var( --bca-tinta-suave );
}
.bca-canal__titulo {
margin: 4px 0 0;
font-family: var( --bca-display );
font-size: 1.375rem;
letter-spacing: normal;
color: var( --bca-tinta );
}
.bca-canal .bca-btn {
margin-top: 6px;
}
body.bca-legal-ativa .bca-canal .bca-canal__detalhe {
font-size: 0.875rem;
overflow-wrap: anywhere;
}
/* ── Menos movimento ─────────────────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
.bca-legal__ancora {
transition: none;
}
}
/* ── Impressão ───────────────────────────────────────────────────────────── */
/*
* Quem imprime uma política quer o texto, não a página: sai o cabeçalho, o
* rodapé, a foto, o índice, os botões e o aviso de cookies; o texto fica em preto
* sobre branco, com o endereço de cada link escrito depois dele.
*/
@media print {
body.bca-legal-ativa #masthead,
body.bca-legal-ativa .site-footer,
body.bca-legal-ativa .bca-rodape,
body.bca-legal-ativa .bca-zap,
body.bca-legal-ativa .bca-cookies,
body.bca-legal-ativa .bca-indice-caixa,
body.bca-legal-ativa .bca-progresso,
body.bca-legal-ativa .bca-pagina__heroi-fundo,
body.bca-legal-ativa .bca-pagina__brilho,
body.bca-legal-ativa .bca-legal__ancora,
body.bca-legal-ativa .bca-legal__botoes,
body.bca-legal-ativa .bca-legal__outros,
body.bca-legal-ativa .bca-pastilha,
body.bca-legal-ativa .bca-migalhas {
display: none !important;
}
body.bca-legal-ativa .bca-pagina,
body.bca-legal-ativa .bca-pagina > section {
padding: 0 0 12pt !important;
color: #000000 !important;
background: none !important;
box-shadow: none !important;
}
body.bca-legal-ativa .bca-pagina__heroi::before {
display: none !important;
}
body.bca-legal-ativa .bca-titulo,
body.bca-legal-ativa .bca-paragrafo,
body.bca-legal-ativa .bca-realce,
body.bca-legal-ativa .bca-legal__meta > span {
color: #000000 !important;
background: none !important;
border-color: #999999 !important;
}
body.bca-legal-ativa .bca-revela {
opacity: 1 !important;
transform: none !important;
}
body.bca-legal-ativa .bca-legal__texto a[href^="http"]::after {
content: " (" attr( href ) ")";
font-size: 0.85em;
}
body.bca-legal-ativa .bca-legal__secao {
break-inside: avoid-page;
}
body.bca-legal-ativa .bca-tabela tbody tr {
break-inside: avoid;
}
}
/* ── Correções do teste do ciclo 1 ───────────────────────────────────────── */
/*
* Cartões dentro do texto (os direitos, em Seus dados) moram numa coluna de 70
* caracteres: quatro colunas ali davam cartões de 150px e palavras partidas no
* meio ("anonimiza-r"). Dentro do texto, no máximo duas.
*/
@media ( min-width: 600px ) {
.bca-legal__texto .bca-cartoes {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
.bca-legal__texto .bca-cartao h3 {
overflow-wrap: normal;
hyphens: manual;
}
/*
* Link solto em parágrafo fora do documento (no Contato, "use a página Seus
* dados"). A cor de link do tema é o amarelo da casa: sobre o creme ele media
* perto de 1,3:1. Fora do herói escuro, link de parágrafo é azul e sublinhado.
*/
body.bca-legal-ativa .bca-pagina .bca-secao .bca-paragrafo a {
color: var( --bca-azul );
text-decoration: underline;
text-underline-offset: 3px;
}
/* ── Links em linha própria ──────────────────────────────────────────────── */
/*
* O teste do ciclo 1 mostrou os links no meio das frases com 21px de altura e,
* quando ganharam respiro, com as áreas de toque de linhas vizinhas encavaladas.
* Nos documentos, todo link sai da frase e vira uma pílula de 44px, com ícone.
*/
body.bca-legal-ativa .bca-legal__links {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0.2em 0 1.2em;
padding: 0;
list-style: none;
}
body.bca-legal-ativa .bca-legal__links li {
margin: 0;
padding: 0;
}
body.bca-legal-ativa .bca-legal__links li::before {
content: none;
}
.bca-legal__link {
display: inline-flex;
gap: 8px;
align-items: center;
min-height: 44px;
max-width: 100%;
padding: 8px 16px;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.3;
color: var( --bca-azul ) !important;
text-decoration: none !important;
overflow-wrap: anywhere;
background: var( --bca-azul-fundo );
border: 1px solid var( --bca-azul-borda );
border-radius: 999px;
transition: background-color 160ms ease, border-color 160ms ease, transform 200ms var( --bca-mola );
}
.bca-legal__link .bca-icone {
flex: 0 0 auto;
width: 20px;
height: 20px;
}
.bca-legal__link:hover,
.bca-legal__link:focus-visible {
background: #ffffff;
border-color: var( --bca-azul );
}
.bca-legal__link:focus-visible {
outline: 3px solid var( --bca-azul );
outline-offset: 2px;
}
@media ( hover: hover ) and ( pointer: fine ) {
.bca-legal__link:hover {
transform: translateY( -2px );
}
}
@media ( prefers-reduced-motion: reduce ) {
.bca-legal__link {
transition: none;
}
}
@media print {
body.bca-legal-ativa .bca-legal__links {
display: block !important;
}
body.bca-legal-ativa .bca-legal__link {
min-height: 0;
padding: 0;
background: none;
border: 0;
}
body.bca-legal-ativa .bca-legal__link[href^="http"]::after,
body.bca-legal-ativa .bca-legal__link[href^="mailto"]::after {
content: " (" attr( href ) ")";
font-size: 0.85em;
}
}
/* ── Aviso curto nos formulários de voluntário e empresa (consentimento v2) ── */
.bca-consentimento__aviso {
margin: 0 0 4px;
font-size: 0.9375rem;
line-height: 1.55;
}
.bca-consentimento__links {
display: flex;
flex-wrap: wrap;
gap: 4px 20px;
margin: 0 0 8px;
}
/* ── Foto do herói espelhada (pedido de 15/09/2026) ─────────────────────────
* Só a imagem da faixa de doação, e só no herói: o véu, o texto e o brilho não
* mudam. `scale` é propriedade própria — não briga com nenhum `transform` que a
* imagem venha a ter.
*/
.bca-pagina__heroi-fundo img[src*="faixa-doacao"] {
scale: -1 1;
}
/* ═══════════════════════════════════════════════════════════════════════════
* Diálogo de motivos da página Contato
*
* Mesma linguagem do diálogo de cookies — raio, sombra clay, fundo escurecido —
* com cartões de opção no lugar dos grupos. A animação é própria e não a do
* aviso de cookies: as duas são iguais hoje, mas são coisas diferentes, e
* compartilhar o `@keyframes` faria quem ajustasse uma mexer na outra sem saber.
* ═══════════════════════════════════════════════════════════════════════════ */
.bca-motivo {
width: min( 680px, calc( 100vw - 24px ) );
max-height: calc( 100dvh - 24px );
/*
* Rolagem por dentro, sempre — e não só em tela deitada.
*
* A 320×720 as seis opções passam da altura do diálogo. Sem isto, a última
* ("Outros assuntos") simplesmente não existe para quem está naquele aparelho:
* fica recortada, sem barra de rolagem e sem jeito de alcançar. `contain`
* impede que a rolagem de dentro vire rolagem da página atrás.
*/
overflow-y: auto;
overscroll-behavior: contain;
padding: 0;
color: var( --bca-tinta );
background: var( --bca-fundo );
border: 0;
border-radius: 24px;
box-shadow: var( --bca-clay-alta, var( --bca-sombra-alta ) );
}
.bca-motivo[open] {
animation: bca-motivo-abre 260ms var( --bca-suave ) both;
}
@keyframes bca-motivo-abre {
from {
opacity: 0;
transform: translateY( 12px ) scale( 0.98 );
}
to {
opacity: 1;
transform: none;
}
}
.bca-motivo::backdrop {
background: rgba( 16, 26, 61, 0.55 );
}
.bca-motivo__caixa {
display: grid;
gap: 14px;
padding: 22px 22px 20px;
font-family: var( --bca-texto-fonte );
font-size: 0.9375rem;
line-height: 1.55;
}
.bca-motivo__cabeca {
display: flex;
gap: 12px;
align-items: flex-start;
justify-content: space-between;
}
.bca-motivo__titulo {
margin: 0;
font-family: var( --bca-display );
/* O tema herda `letter-spacing: -2px` nos títulos, que a esta altura esmaga
as letras. Já aconteceu com o diálogo de cookies. */
font-size: 1.375rem;
letter-spacing: 0;
}
.bca-motivo__titulo:focus {
outline: none;
}
.bca-motivo__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