/* Paleta e fontes vêm de variáveis definidas no (templates/header.php), configuráveis em Admin > Configurações — assim o mesmo sistema veste a identidade visual de qualquer cliente. */ :root { --verde-claro: color-mix(in srgb, var(--brand) 18%, white); --offwhite: #FAFAFB; --branco: #FFFFFF; --texto: #4D4D4D; --texto-claro: #767676; --borda: #E7E5EF; --raio: 10px; --sombra: 0 10px 30px rgba(36, 36, 36, .08); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--fonte-texto); color: var(--texto); line-height: 1.65; font-size: 17px; background: var(--branco); } img { max-width: 100%; height: auto; display: block; } a { color: var(--brand-dark); text-decoration: none; } a:hover { color: var(--brand); } h1, h2, h3, h4 { font-family: var(--fonte-titulo); color: var(--escuro); font-weight: 800; line-height: 1.25; margin: 0 0 14px; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .eyebrow { display:inline-block; text-transform:uppercase; letter-spacing:.12em; color: var(--brand); font-weight:800; font-size:.76rem; margin-bottom:8px; } .btn { display:inline-flex; align-items:center; gap:8px; background: var(--brand); color:#fff !important; font-weight:700; padding:12px 24px; border-radius:50px; font-size:.94rem; box-shadow:0 4px 14px rgba(0,0,0,.1); } .btn:hover { background: var(--brand-dark); } .cat-tag { display:inline-block; background: var(--verde-claro); color: var(--brand-dark); font-weight:700; font-size:.72rem; padding:4px 12px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em; } /* Barra de contato + cabeçalho */ .topbar { background: var(--escuro); color: #bbb; font-size: .82rem; } .topbar-inner { display:flex; justify-content:space-between; align-items:center; padding:7px 0; flex-wrap:wrap; gap:6px; } .topbar a { color:#e4e4e4; } .topbar a:hover { color: var(--brand); } .topbar-links { display:flex; gap:16px; } .site-header { background:rgba(255,255,255,.97); border-bottom: 1px solid var(--borda); position:sticky; top:0; z-index:20; backdrop-filter: blur(6px); } .nav-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 14px 24px; } .site-logo { font-family: var(--fonte-titulo); font-weight: 800; font-size: 22px; color: var(--escuro); text-decoration: none; display: flex; align-items: center; } .site-logo img { max-height: 44px; max-width: 220px; display: block; } .site-nav { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; align-items:center; } .site-nav a { color: var(--escuro); font-weight: 700; text-decoration: none; } .site-nav a:hover, .site-nav a.active { color: var(--brand); } .nav-cta { flex-shrink: 0; } .main-content { padding-top: 40px; padding-bottom: 60px; } /* Seções da home */ .section { padding: 56px 0; } .section-alt { background: var(--offwhite); } .section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:12px; } .section-head h2 { margin-bottom: 0; } .ver-todos { font-weight:700; font-size:.88rem; white-space:nowrap; } .ph { position:relative; background: linear-gradient(135deg, var(--verde-claro), var(--offwhite)); display:flex; align-items:center; justify-content:center; overflow:hidden; } .ph svg { opacity:.55; } /* Último artigo (destaque grande) */ .featured { display:grid; grid-template-columns:1.1fr 1fr; gap:44px; align-items:center; } .featured .ph { border-radius: var(--raio); height:340px; } .featured .ph img { width:100%; height:100%; object-fit:cover; } .featured h2 { font-size:1.9rem; margin:10px 0 14px; } .featured .excerpt { color: var(--texto-claro); font-size:1.02rem; margin-bottom:20px; } .featured .meta { color: var(--texto-claro); font-size:.85rem; margin-bottom:18px; } /* Grade de cards */ .card-grid, .cat-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; } .home-card { background:#fff; border-radius: var(--raio); overflow:hidden; box-shadow: var(--sombra); border:1px solid var(--borda); } .home-card .ph { height:170px; } .home-card .ph img { width:100%; height:100%; object-fit:cover; } .home-card-body { padding:18px 20px 22px; } .home-card-body .cat-tag { margin-bottom:10px; } .home-card-body h3 { font-size:1.02rem; margin:0 0 8px; line-height:1.35; } .home-card-body h3 a { color: var(--escuro); } .home-card-body p { color: var(--texto-claro); font-size:.88rem; margin:0; } /* Listagem (categoria) */ .article-card { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--borda); } .article-card img { width: 160px; height: 110px; object-fit: cover; border-radius: 10px; flex-shrink: 0; } .article-card-body h2 { font-size: 19px; margin: 0 0 6px; } .article-card-body h2 a { color: var(--escuro); text-decoration: none; } .article-card-meta { font-size: 13px; color: var(--texto-claro); margin-bottom: 6px; } .article-card-excerpt { font-size: 15px; color: var(--texto); margin: 0; } .pagination { display: flex; gap: 10px; justify-content: center; margin-top: 30px; font-size: 14px; } .pagination a, .pagination span { padding: 6px 12px; border: 1px solid var(--borda); border-radius: 6px; text-decoration: none; } .pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); } /* Artigo individual */ .article-header { margin-bottom: 24px; } .article-category { display: inline-block; font-size: 13px; font-weight: 700; color: var(--brand-dark); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; text-decoration: none; } .article-title { font-size: 32px; line-height: 1.25; margin: 0 0 14px; font-family: var(--fonte-titulo); color: var(--escuro); } .article-meta { font-size: 14px; color: var(--texto-claro); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .article-featured-image { width: 100%; border-radius: 12px; margin: 20px 0; max-height: 420px; object-fit: cover; } .article-body { max-width: 700px; margin: 0 auto 40px; } /* Espaçamento uniforme de títulos/parágrafos: cada elemento controla só a margem de cima (o navegador nunca soma duas margens vizinhas, sempre usa a maior — "margin collapsing"), e o primeiro elemento do artigo nunca tem espaço extra acima, para não ficar descolado do título/imagem destaque. */ .article-content { font-size: 18px; line-height: 1.7; } .article-content > *:first-child { margin-top: 0; } .article-content h1, .article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6 { font-family: var(--fonte-titulo); color: var(--escuro); line-height: 1.3; margin: 1.8em 0 0.6em; } .article-content h1 { font-size: 28px; } .article-content h2 { font-size: 24px; } .article-content h3 { font-size: 20px; } .article-content h4, .article-content h5, .article-content h6 { font-size: 18px; } .article-content p { margin: 0 0 1.1em; } /* Título logo seguido de parágrafo (sem nada em branco entre os dois): evita um espaço duplo, já que o title já trouxe respiro por cima. */ .article-content h1 + p, .article-content h2 + p, .article-content h3 + p, .article-content h4 + p, .article-content h5 + p, .article-content h6 + p { margin-top: 0; } .article-content img { border-radius: 10px; margin: 0.4em 0 1.4em; display: block; } .article-content blockquote { border-left: 3px solid var(--brand); margin: 0 0 1.4em; padding: 4px 0 4px 18px; color: var(--texto); font-style: italic; } .article-content ul, .article-content ol { padding-left: 1.4em; margin: 0 0 1.1em; } .article-content li { margin: 0.3em 0; } .article-content a { text-decoration: underline; } .article-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 15px; } .article-content table td, .article-content table th { border: 1px solid var(--borda); padding: 8px 10px; } .toc { background: var(--offwhite); border-radius: 10px; padding: 16px 20px; margin: 24px 0; font-size: 14px; } .toc-title { font-weight: 700; margin-bottom: 8px; } .toc ul { margin: 0; padding-left: 18px; } .author-box { display: flex; gap: 14px; align-items: flex-start; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); padding: 20px 0; margin: 36px 0; } .author-box img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } .author-box h3 { margin: 0 0 4px; font-size: 16px; } .author-box p { margin: 0; font-size: 14px; color: var(--texto-claro); } .related-articles { margin-top: 40px; } .related-articles h2 { font-size: 20px; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .related-grid .card { border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; } .related-grid img { height: 100px; object-fit: cover; } .related-grid .card-body { padding: 10px 12px; } .related-grid .card-body a { color: var(--escuro); text-decoration: none; font-size: 14px; font-weight: 600; } /* Rodapé */ .site-footer { background: var(--escuro); color: #c6c6c6; padding: 52px 0 0; margin-top: 40px; } .footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1); } .footer-grid h4 { color:#fff; font-size:1rem; margin:0 0 16px; font-family: var(--fonte-titulo); } .footer-grid p { font-size:.9rem; color:#b8b8b8; } .site-footer ul { list-style:none; margin:0; padding:0; } .site-footer li { margin-bottom:9px; font-size:.9rem; } .site-footer a { color:#c6c6c6; } .site-footer a:hover { color: var(--brand); } .footer-logo { font-family: var(--fonte-titulo); font-weight:800; font-size:1.2rem; color:#fff; margin-bottom:14px; } .footer-bottom { padding: 20px 24px; text-align:center; font-size:.85rem; color:#8f8f8f; } @media (max-width: 900px) { .featured { grid-template-columns: 1fr; } .card-grid, .cat-row { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { body { font-size: 16px; } .article-title { font-size: 26px; } .article-card { flex-direction: column; } .article-card img { width: 100%; height: 180px; } .related-grid { grid-template-columns: 1fr; } .card-grid, .cat-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .nav-wrap { flex-direction: column; align-items: flex-start; } }