/* Página de listagem do blog (/blog/, identificada pela classe "blog" que o WordPress adiciona no ) - sem título antes do grid, mas ainda precisa desse espaço reservado pra navbar fixa não cobrir os cards. */ body.blog main { padding-top: 120px; } /* Abaixo de 640px a navbar quebra pra 2 linhas (os ícones sociais não cabem ao lado da logo + hambúrguer) e fica com 141px de altura real, não 120px - confirmado com Chrome real (getBoundingClientRect) em 375px de largura. */ @media screen and (max-width: 639px) { body.blog main { padding-top: 141px; } } /* Filtros de categoria (usado no Blog e no Jobs) */ .category-filters { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto 8px; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 10px; } .filter-btn { padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; color: white; font-family: system-ui, sans-serif; font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s; } .filter-btn:hover { border-color: rgba(255, 255, 255, 0.5); } .filter-btn.active { background: linear-gradient(135deg, #ec008c, #f9b026); border-color: transparent; } .article-card.hidden { display: none; } /* Grid masonry de artigos (usado na home e em futuras listagens de posts) */ .articles { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 20px 24px 40px; column-count: 1; column-gap: 20px; } @media (min-width: 640px) { .articles { column-count: 2; } } @media (min-width: 980px) { .articles { column-count: 3; } } .article-card { break-inside: avoid; margin-bottom: 20px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; overflow: hidden; color: white; font-family: system-ui, sans-serif; backdrop-filter: blur(6px); } .article-card .thumb { display: block; width: 100%; line-height: 0; } .article-card .thumb img, .article-card .thumb video { display: block; width: 100%; height: auto; } .article-card .body { padding: 16px 18px 20px; } .article-card .tag { display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #f9b026; margin-bottom: 8px; } .article-card h3 { font-size: 1.05rem; line-height: 1.35; margin-bottom: 8px; } .article-card h3 a { color: inherit; text-decoration: none; } .article-card p { font-size: .85rem; line-height: 1.55; color: rgba(255, 255, 255, 0.7); } /* Paginação da listagem de posts */ .pagination { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 24px 100px; } .pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; color: white; font-family: system-ui, sans-serif; font-size: .85rem; font-weight: 600; text-decoration: none; transition: background .2s, border-color .2s; } .pagination .page-numbers:hover { border-color: rgba(255, 255, 255, 0.5); } .pagination .page-numbers.current { background: linear-gradient(135deg, #ec008c, #f9b026); border-color: transparent; } .pagination .page-numbers.dots { border-color: transparent; background: transparent; }