/* ══════════════════════════════════════════════════════════════════════════ campaigns.css — só o que é exclusivo da listagem de campanhas. Depende de tokens.css + base.css + components.css. Reaproveita sem redeclarar: .container .section .sec-head .eyebrow .btn .input .select .chip .cgrid .ccard .progress .skel .empty .sheet .sr-only Nenhum valor de cor literal. Nenhum raio, sombra, duração ou easing fora dos tokens. Prefixo .cp- em tudo que nasce aqui. ══════════════════════════════════════════════════════════════════════════ */ /* Altura do header (estado rolado), altura da barra de filtros e largura da coluna lateral — usadas pelo sticky da barra, pelo sticky da coluna e pelo alinhamento do bloco "load more". --cp-bar é um FALLBACK medido (barra numa linha). O script da página remede a altura real no boot e a cada resize e sobrescreve o valor no ; se o JS falhar, este número continua valendo. */ :root { --cp-head: 66px; --cp-bar: 86px; --cp-side: 236px; } @media (max-width: 960px) { :root { --cp-head: 60px; } } /* ══ 01 · PAGE HEADER ═════════════════════════════════════════════════════ Compacto sobre --wash. Sem hero: a página é uma ferramenta, não um manifesto. O único destaque é a linha de números. */ .cp-head { background: var(--wash); padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4.5vw, 3.25rem); } .cp-head-in { display: flex; flex-direction: column; gap: var(--sp-3); } .cp-head-in h1 { max-width: 18ch; } .cp-head-sub { color: var(--ink-3); font-size: var(--fs-lg); max-width: var(--measure); } .cp-head-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--muted); font-weight: 600; } .cp-head-stat[hidden] { display: none; } .cp-head-stat > span { display: inline-flex; align-items: baseline; gap: var(--sp-2); } .cp-head-stat > span + span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lime-500); align-self: center; margin-right: var(--sp-1); flex: 0 0 auto; } .cp-head-stat b { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-h3); letter-spacing: var(--tr-head); color: var(--ink); font-variant-numeric: tabular-nums; } /* ══ 02 · FILTER BAR ══════════════════════════════════════════════════════ Sticky logo abaixo do header. Sólida — sob um header translúcido, uma segunda camada translúcida vira sopa. */ .cp-bar { position: sticky; top: var(--cp-head); z-index: var(--z-sticky); background: var(--white); border-bottom: 1px solid var(--line); } /* No mobile o header é fixo e some ao descer. Enquanto ele está lá, a barra encosta logo abaixo dele; quando ele some, a barra sobe para o topo e não deixa uma faixa de card passando por cima. .is-hidden é posto por ui.js no header, que é irmão anterior de
— só leitura, nada é alterado lá. A sombra faz a barra ler como toolbar flutuante nos dois estados. */ @media (max-width: 960px) { .cp-bar { box-shadow: var(--sh-sm); transition: top var(--d) var(--ease); } .site-header.is-hidden ~ #main .cp-bar { top: 0; } } .cp-bar-in { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); padding-block: var(--sp-4); } .cp-search { position: relative; flex: 1 1 240px; min-width: 0; max-width: 380px; } .cp-search > svg { position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%); color: var(--subtle); pointer-events: none; } .cp-search .input { padding-left: 2.75rem; border-radius: var(--r-pill); } .cp-sort { margin-left: auto; min-width: 0; } .cp-sort .select { width: auto; min-width: 200px; border-radius: var(--r-pill); font-weight: 600; } /* .btn é display:inline-flex (autor) e ganha do [hidden] da folha do navegador — o estado escondido precisa de uma regra de autor. */ .cp-filters-btn { position: relative; } .cp-filters-btn[hidden] { display: none; } .cp-fbadge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding-inline: var(--sp-1); border-radius: var(--r-pill); background: var(--green-800); color: var(--white); font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; } .cp-fbadge[hidden] { display: none; } /* Acima de 1024 a coluna lateral assume e o botão some. */ @media (min-width: 1024px) { .cp-filters-btn { display: none; } } /* Abaixo de 640 a busca ocupa a primeira linha e "Filters" + ordenação dividem a segunda. O botão fica no tamanho do texto e a sobra vai toda para o