/* ========================================================================= PAGE — /galeria Só o que existe na página e não existe na home: a barra de filtros, o botão "ver mais" e o colapso do excedente. O mosaico, a foto e o visor vêm de `galeria.css`, que as duas superfícies compartilham. ====================================================================== */ .galeria-acervo { position: relative; padding-block: var(--space-section); background-color: var(--color-bg); } /* ------------------------------------------------------------------------- Filtros Reusa `.filter-bar` e `.filter-chip` de `components.css` — os mesmos chips do catálogo de cursos e das apostilas. Um segundo desenho de filtro no mesmo site seria um segundo componente para manter e uma segunda coisa para o visitante aprender. No celular a barra rola na horizontal em vez de quebrar em três linhas: com quatro categorias e o chip "Todas", a quebra empurraria o mural para baixo da dobra logo na chegada. ---------------------------------------------------------------------- */ .galeria-acervo__filtros { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; -ms-overflow-style: none; } .galeria-acervo__filtros::-webkit-scrollbar { display: none; } .galeria-acervo__filtros .filter-bar { flex-wrap: nowrap; /* `justify-content: center` é o padrão do componente e está certo onde ele nasceu — uma barra que cabe inteira, centralizada sob o título. Aqui ela transborda, e conteúdo centralizado num contêiner de rolagem transborda IGUALMENTE PARA OS DOIS LADOS: a barra abre já cortada no primeiro chip, e a parte escondida à esquerda não é alcançável pela rolagem em vários navegadores. O sintoma é a barra parecer que "começa no meio". `flex-start` é o que faz a rolagem começar no começo. */ justify-content: flex-start; /* Espaço para a sombra do chip ativo não ser cortada pelo contexto de rolagem. */ padding-block: var(--space-1); /* O último chip não pode encostar na borda da tela. O padding direito do CONTÊINER de rolagem é ignorado no fim da rolagem (comportamento antigo do WebKit), então a folga vem daqui — mas só funciona se a barra CRESCER com os chips: como bloco, ela mede a largura do contêiner, os chips transbordam para fora dela e o padding fica atrás deles, sem efeito. O sintoma era o último chip colado no limite da tela, parecendo cortado. */ min-width: max-content; padding-inline-end: var(--gutter); } .galeria-acervo .galeria__mosaico { margin-top: var(--space-6); } /* Reentrada escalonada a cada troca de filtro e a cada "ver mais" — a mesma `card-in` do catálogo de cursos, com o atraso vindo do índice que o JavaScript recalcula entre as células VISÍVEIS. O teto de doze passos existe porque num recorte de oitenta fotos um atraso proporcional faria a última entrar três segundos depois da primeira. */ .galeria__mosaico.is-filtering .galeria__celula { animation: card-in var(--dur-base) var(--ease-out) backwards; animation-delay: calc(min(var(--i, 0), 12) * 30ms); } @media (prefers-reduced-motion: reduce) { .galeria__mosaico.is-filtering .galeria__celula { animation: none; } } /* ------------------------------------------------------------------------- O excedente O HTML traz o acervo inteiro; o que passa do primeiro lote é escondido por CSS. A regra depende da classe `js` que `layout/open.php` escreve no `` antes de qualquer conteúdo — então o colapso vale já na PRIMEIRA pintura, e não há o lampejo de duzentas fotos aparecendo e sumindo. Sem JavaScript a classe não existe, o seletor não casa e a página mostra tudo — que é o comportamento certo, porque o botão também não funcionaria. ---------------------------------------------------------------------- */ .js .galeria__mosaico[data-colapsado] .galeria__celula--extra { display: none; } .galeria-acervo__mais { display: flex; justify-content: center; margin-top: var(--space-8); } /* Sem JS o botão não faz nada, e por isso não existe. */ .galeria-acervo__mais { display: none; } .js .galeria-acervo__mais { display: flex; } .js .galeria-acervo__mais[hidden] { display: none; } /* O número de fotos que ainda faltam, dentro do botão. Ele transforma "ver mais" (quantas? vale o clique?) em uma promessa concreta. */ .galeria-acervo__resto { display: inline-grid; place-items: center; min-width: 2.25em; margin-inline-start: var(--space-2); padding-inline: 0.5em; font-size: var(--fs-xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--color-accent); background-color: var(--brand-50); border-radius: var(--radius-pill); } /* ------------------------------------------------------------------------- Vazio ---------------------------------------------------------------------- */ .galeria-acervo__vazio { max-width: var(--content-max); margin-inline: auto; padding-block: var(--space-12); font-size: var(--fs-md); color: var(--color-text-muted); text-align: center; }