/* =========================================================================
Eblog — ajustes nossos por cima do template.
Carregado depois de style.css, so no contexto de blog.
Cobre o que o WordPress gera (the_content, paginacao, comentarios) e os
blocos que adicionamos (breadcrumb, author box, post nav, busca).
========================================================================= */
/* Apontam para os tokens canônicos (--ds-*) de design-tokens.css.
NÃO edite valores aqui — ajuste o cliente em design-tokens.css. */
:root {
--eblog-accent: var(--ds-accent, #0a0a0a);
--eblog-ink: var(--ds-ink, #0a0a0a);
--eblog-muted: var(--ds-muted, #6a6a6a);
--eblog-line: var(--ds-line, #e6e6e6);
}
/* ---------------------------------------------------------------------------
Anti-vazamento de cor para o header/rodape HERDADOS do site (Elementor).
O style.css base faz `body { color: var(--color-body) }`, o que pintava os
textos do header/rodape (fora da .eblog-wrap) com a cor de corpo do blog
(ex.: texto escuro sobre um rodape escuro do site). Aqui devolvemos ao body a
cor global do proprio Elementor (--e-global-color-text) e aplicamos a cor de
corpo do blog SOMENTE dentro de .eblog-wrap. Fallback p/ sites sem Elementor.
--------------------------------------------------------------------------- */
body { color: var(--e-global-color-text, var(--ds-ink)); }
.eblog-wrap { color: var(--ds-body); }
/* ---------------------------------------------------------------------------
SIDEBAR / BOXES — tokenizados para acompanhar o tema (claro ou DARK).
O fundo GERAL da pagina de blog e responsabilidade da config do site
(Elementor) — NAO pintamos html/body aqui para nao brigar com ela. Aqui so
garantimos que os boxes do template (que vinham com cinza-claro hardcoded)
sigam os tokens, senao viram caixas brancas berrantes num tema escuro.
--------------------------------------------------------------------------- */
.eblog-wrap, .eblog-right-sidebar { color: var(--ds-body); }
/* Titulo de cada box da sidebar — o base usa `background:#f6f6f6` hardcoded
(mesma especificidade abaixo p/ vencer). Texto ja segue --color-heading-1. */
.eblog-right-sidebar .eblog-right-side-post p.title {
background: var(--ds-bg-soft, #f6f6f6);
color: var(--ds-ink);
}
/* Container do box e itens internos. */
.eblog-right-side-post { border-color: var(--ds-line, #e6e6e6); }
.eblog-right-side-post a { color: var(--ds-body); background: transparent; }
.eblog-right-side-post a:hover { color: var(--ds-accent); }
/* Itens de lista (categorias, posts populares) que vinham com fundo claro. */
.eblog-right-sidebar .eblog-right-side-post li,
.eblog-right-sidebar .eblog-right-side-post .category-wrapper a { background: transparent; }
/* ---------------------------------------------------------------------------
BADGE DE CATEGORIA (.sub-title) nos cards — o template original define cores
por "tema de revista" (.salads/.football...) hardcoded, que num tema escuro
destoam ou viram branco. Padronizamos no accent da marca + texto contrastante.
--------------------------------------------------------------------------- */
.eblog-wrap p.sub-title, .eblog-wrap .sub-title,
.eblog-banner-area p.sub-title, .eblog-banner-area .sub-title,
.eblog-trending-news-area p.sub-title, .eblog-trending-news-area .sub-title,
.eblog-featured-post-area p.sub-title, .eblog-featured-post-area .sub-title,
/* vencedor real do base (3 classes, #EEEEEE) — igualamos a especificidade: */
.eblog-post-list-style .blog-content .sub-title,
.eblog-wrap .blog-content .sub-title {
background: var(--ds-accent);
color: var(--ds-accent-contrast, #fff);
}
/* PILLS de tag/categoria (links curtos com fundo claro do base) — fundo suave
tokenizado; texto na tinta do tema; hover no accent. Cobre as variantes do
template (tagcloud/post-tags) E as tags dentro dos cards (.blog-content .tag a). */
.eblog-wrap .tagcloud a,
.eblog-wrap .post-tags a,
.eblog-wrap .blog-tags a,
.eblog-wrap .blog-content .tag,
.eblog-wrap .blog-content .tag a,
.eblog-trending-news-area .tag,
.eblog-trending-news-area .tag a,
.tags-widget .button-tag a,
.eblog-right-sidebar .tags-widget .button-tag a {
background: var(--ds-bg-soft, #f4f4f4);
color: var(--ds-body);
border: 1px solid var(--ds-line, #e6e6e6);
}
.eblog-wrap .tagcloud a:hover,
.eblog-wrap .post-tags a:hover,
.eblog-wrap .blog-tags a:hover,
.eblog-wrap .blog-content .tag a:hover,
.eblog-trending-news-area .tag a:hover,
.tags-widget .button-tag a:hover,
.eblog-right-sidebar .tags-widget .button-tag a:hover {
background: var(--ds-accent);
color: var(--ds-accent-contrast, #fff);
border-color: var(--ds-accent);
}
/* O base mira p/li/a DIRETAMENTE (`p{color:var(--color-body)}`, `ul li a{...}`),
e regra direta vence cor herdada — por isso os /
do rodapé (cujos widgets
o Elementor pinta de branco) saíam cinza. Dentro do header/rodapé do Elementor,
devolvemos esses elementos a `inherit` (herdam a cor do widget Elementor).
`:where()` mantém a especificidade baixa: vence as regras genéricas do base,
mas perde para as regras específicas do Elementor (que seguem no controle). */
.elementor-location-header :where(p, li, a, span, strong, em, blockquote, h1, h2, h3, h4, h5, h6),
.elementor-location-footer :where(p, li, a, span, strong, em, blockquote, h1, h2, h3, h4, h5, h6) {
color: inherit;
}
/* Respiro do bloco do blog dentro do site */
.eblog-wrap { padding-top: 50px; padding-bottom: 70px; }
.eblog-wrap .tp-section-gap { padding: 0; }
/* ---------------------------------------------------------------------------
TIPOGRAFIA — hardening contra o kit do Elementor + usabilidade.
O kit do site (post-1520.css) define h1..h6 GLOBAIS com tamanho em rem; com o
reset `:root{font-size:62.5%}` do tema do cliente, os títulos do blog encolhem
(mesma especificidade dos nossos h1{} base, mas o kit carrega depois → vence).
Aqui reafirmamos a escala em PX (imune ao reset) e com especificidade
`.eblog-wrap` (vence o kit). Cards com regra própria do template seguem mandando.
--------------------------------------------------------------------------- */
.eblog-wrap h1 { font-size: 40px; line-height: 1.18; }
.eblog-wrap h2 { font-size: 32px; line-height: 1.22; }
.eblog-wrap h3 { font-size: 26px; line-height: 1.3; }
.eblog-wrap h4 { font-size: 21px; line-height: 1.35; }
.eblog-wrap h5 { font-size: 19px; line-height: 1.4; }
.eblog-wrap h6 { font-size: 17px; line-height: 1.45; }
/* Título do post (hero do single) — destaque principal da página */
.eblog-wrap .eblog-hero-banner > .heading-title { font-size: 44px; line-height: 1.15; margin: 20px 0 24px; }
/* Hero do banner da home magazine + "Em Alta" — ATENÇÃO: estes blocos são
renderizados FORA da .eblog-wrap (home.php), então mira-se a classe direta
(existe só em telas de blog → seguro). Sem isso o título cai no h2 do kit. */
.eblog-banner-area .banner-content .heading-title,
.eblog-banner-area .banner-content .heading-title a { font-size: 46px !important; line-height: 1.16; }
.eblog-trending-news-area .section-title { font-size: 32px; line-height: 1.2; }
.eblog-trending-news-area .title { font-size: 20px; line-height: 1.35; }
/* Título de seção (listagem/arquivos/"Em Alta") */
.eblog-wrap .eblog-section-title .title { font-size: 32px; }
/* Conteúdo do post: hierarquia legível e confortável */
.eblog-wrap .eblog-post-content { font-size: 18px; line-height: 1.85; }
.eblog-wrap .eblog-post-content h2 { font-size: 30px; }
.eblog-wrap .eblog-post-content h3 { font-size: 24px; }
/* Responsivo — reduz os grandes em telas menores sem ficar minúsculo */
@media (max-width: 991px) {
.eblog-banner-area .banner-content .heading-title,
.eblog-banner-area .banner-content .heading-title a { font-size: 32px !important; }
.eblog-wrap .eblog-hero-banner > .heading-title { font-size: 30px; }
.eblog-wrap h1 { font-size: 30px; }
.eblog-wrap h2 { font-size: 26px; }
.eblog-wrap .eblog-post-content { font-size: 17px; }
}
/* Titulo de secao (listagem/arquivos) */
.eblog-section-title .title { font-size: 34px; line-height: 1.2; margin-bottom: 10px; }
.eblog-section-title .desc { color: var(--eblog-muted); }
/* -------- Conteudo do post (saida do editor WordPress) -------- */
.eblog-post-content { font-size: 17px; line-height: 1.8; color: var(--eblog-ink); }
.eblog-post-content > * { margin-bottom: 22px; }
.eblog-post-content p { margin-bottom: 22px; }
.eblog-post-content h2 { font-size: 30px; margin: 38px 0 16px; line-height: 1.25; }
.eblog-post-content h3 { font-size: 24px; margin: 32px 0 14px; line-height: 1.3; }
.eblog-post-content h4 { font-size: 20px; margin: 26px 0 12px; }
.eblog-post-content a { color: var(--eblog-accent); text-decoration: underline; }
.eblog-post-content img,
.eblog-post-content .wp-block-image img { max-width: 100%; height: auto; border-radius: 10px; }
.eblog-post-content figure { margin: 28px 0; }
.eblog-post-content figcaption { font-size: 14px; color: var(--eblog-muted); text-align: center; margin-top: 8px; }
.eblog-post-content ul,
.eblog-post-content ol { padding-left: 22px; margin-bottom: 22px; }
.eblog-post-content li { margin-bottom: 8px; }
.eblog-post-content blockquote {
border-left: 4px solid var(--eblog-accent);
background: var(--ds-bg-soft, #f8f8f8); padding: 20px 26px; margin: 28px 0;
font-size: 19px; font-style: italic;
}
.eblog-post-content blockquote p:last-child { margin-bottom: 0; }
.eblog-post-content pre {
background: #1e1e1e; color: #f4f4f4; padding: 18px 20px;
border-radius: 10px; overflow: auto; font-size: 14px;
}
.eblog-post-content table { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.eblog-post-content th,
.eblog-post-content td { border: 1px solid var(--eblog-line); padding: 10px 14px; }
/* -------- Breadcrumb -------- */
.eblog-breadcrumb-area { padding: 24px 0; }
.eblog-breadcrumb-area .meta { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; color: var(--eblog-muted); font-size: 14px; }
.eblog-breadcrumb-area .meta a { color: var(--eblog-muted); }
.eblog-breadcrumb-area .meta a:hover { color: var(--eblog-accent); }
.eblog-breadcrumb-area .meta .sep { opacity: .5; }
.eblog-breadcrumb-area .meta .last { color: var(--eblog-ink); font-weight: 600; }
/* -------- Paginacao -------- */
.eblog-wrap .navigation.pagination { margin-top: 50px; }
.eblog-wrap .nav-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.eblog-wrap .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; height: 44px; padding: 0 12px;
border: 1px solid var(--eblog-line); border-radius: 8px;
color: var(--eblog-ink); font-weight: 600; transition: .2s;
}
.eblog-wrap .page-numbers.current,
.eblog-wrap .page-numbers:hover { background: var(--eblog-accent); border-color: var(--eblog-accent); color: #fff; }
/* -------- Caixa do autor -------- */
.eblog-author-box {
display: flex; gap: 20px; align-items: center;
background: var(--ds-bg-soft, #f8f8f8); border-radius: 12px; padding: 26px; margin: 40px 0;
}
.eblog-author-box img { border-radius: 50%; width: 80px; height: 80px; }
.eblog-author-box h5 { margin: 0 0 6px; }
.eblog-author-box p { margin: 0; color: var(--eblog-muted); font-size: 15px; }
/* -------- Navegacao entre posts -------- */
.eblog-post-nav { display: flex; justify-content: space-between; gap: 16px; margin: 30px 0; flex-wrap: wrap; }
.eblog-post-nav a { color: var(--eblog-ink); font-weight: 600; }
.eblog-post-nav a:hover { color: var(--eblog-accent); }
/* -------- Tags do post -------- */
.tag-area .button-tag ul { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.tag-area .button-tag a {
display: inline-block; padding: 6px 14px;
background: var(--ds-bg-soft, #f4f4f4);
border: 1px solid var(--ds-line, #e6e6e6);
border-radius: 30px; font-size: 13px; color: var(--ds-ink);
}
.tag-area .button-tag a:hover { border-color: var(--ds-accent); color: var(--ds-ink); }
/* O base define a cor da tag com 6 classes (.eblog-hero-banner .bottom-area
.blog-actions .tag-area .button-tag ul li a => --color-primary-2, azul). Igualamos a
especificidade p/ deixar o texto BRANCO (estado normal) e manter no hover. */
.eblog-hero-banner .bottom-area .blog-actions .tag-area .button-tag ul li a,
.eblog-hero-banner .bottom-area .blog-actions .tag-area .button-tag ul li a:hover {
color: var(--ds-ink);
}
/* Tag do post (single) — mesmo nivel de especificidade que o vencedor, texto branco. */
.eblog-wrap .tag-area .button-tag ul li a,
.eblog-post-content .tag-area .button-tag ul li a { color: var(--ds-ink); }
/* -------- Share -------- */
.eblog-social .social-wrapper,
.bottom-area .social-wrapper { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.eblog-social .social-wrapper a,
.bottom-area .social-wrapper a {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; padding: 0; border: 1px solid var(--eblog-line);
border-radius: 50%; font-size: 14px; color: var(--eblog-ink); transition: .2s;
}
.eblog-social .social-wrapper a:hover,
.bottom-area .social-wrapper a:hover { background: var(--eblog-accent); border-color: var(--eblog-accent); color: #fff; }
/* Meta + share na mesma linha (single, como o original) */
.eblog-hero-banner .blog-content-area { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin: 26px 0; }
.eblog-hero-banner .blog-content-area .blog-meta { margin: 0; }
.eblog-social { display: flex; align-items: center; gap: 12px; }
.eblog-social .tag { margin: 0; white-space: nowrap; }
/* Rodape do post: tags + share (mesmo visual do topo, lado a lado) */
.eblog-hero-banner .bottom-area { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--eblog-line); }
.eblog-hero-banner .bottom-area .blog-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
.eblog-hero-banner .bottom-area .tag-area { display: flex; align-items: center; gap: 12px; }
.eblog-hero-banner .bottom-area .tag-area > p { margin: 0; font-weight: 600; white-space: nowrap; }
/* -------- Recomendados (final do post) -------- */
.eblog-related { margin-top: 50px; padding-top: 38px; border-top: 1px solid var(--eblog-line); }
.eblog-related-title { font-size: 24px; font-weight: 700; margin-bottom: 26px; }
/* -------- Sidebar: busca, categorias, tags -------- */
.eblog-right-side-post { margin-bottom: 46px; }
.eblog-right-side-post .title { font-size: 17px; font-weight: 600; letter-spacing: .2px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--eblog-line); }
.eblog-category-list li { padding: 11px 0; }
.eblog-category-list li a { font-size: 14px; }
.eblog-search-form { display: flex; flex-direction: column; gap: 10px; }
.eblog-search-form input { width: 100%; padding: 12px 16px; border: 1px solid var(--eblog-line); border-radius: 8px; background: var(--ds-bg-soft, #fff); color: var(--ds-ink); }
.eblog-search-form input::placeholder { color: var(--ds-muted); opacity: 1; }
.eblog-search-form .tp-btn { cursor: pointer; border: none; background: var(--eblog-accent); color: #fff; padding: 12px 18px; border-radius: 8px; font-weight: 600; }
.eblog-category-list { list-style: none; padding: 0; margin: 0; }
.eblog-category-list li { padding: 9px 0; border-bottom: 1px solid var(--eblog-line); }
.eblog-category-list li a { color: var(--eblog-ink); }
.eblog-category-list li a:hover { color: var(--eblog-accent); }
.tags-widget .button-tag ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.tags-widget .button-tag a { display: inline-block; padding: 6px 12px; background: var(--ds-bg-soft, #f4f4f4); border-radius: 30px; font-size: 13px; color: var(--ds-body); }
.tags-widget .button-tag a:hover { background: var(--eblog-accent); color: #fff; }
.eblog-right-side-post.popular .small-post { display: flex; flex-direction: column; gap: 24px; }
.eblog-right-side-post.popular .eblog-post-list-style { display: flex; gap: 16px; margin: 0; align-items: flex-start; }
.eblog-right-side-post.popular .image-area { flex: 0 0 74px; }
.eblog-right-side-post.popular .image-area img { width: 74px; height: 74px; object-fit: cover; border-radius: 10px; }
.eblog-right-side-post.popular .blog-content { flex: 1; }
.eblog-right-side-post.popular .heading-title { font-size: 14px; line-height: 1.5; font-weight: 600; margin: 0 0 7px; }
.eblog-right-side-post.popular .heading-title a { color: var(--ds-ink); }
.eblog-right-side-post.popular .blog-meta { font-size: 12px; color: var(--ds-muted); margin: 0; }
.eblog-right-side-post.popular .blog-meta li { gap: 5px; }
/* -------- Comentarios -------- */
.eblog-comments { margin-top: 50px; }
.eblog-comments .comment-list { list-style: none; padding: 0; }
.eblog-comments .comment-respond input[type=text],
.eblog-comments .comment-respond input[type=email],
.eblog-comments .comment-respond input[type=url],
.eblog-comments .comment-respond textarea {
width: 100%; padding: 12px 16px; border: 1px solid var(--eblog-line); border-radius: 8px; margin-bottom: 14px;
}
.eblog-comments .comment-respond .submit { background: var(--eblog-accent); color: #fff; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-weight: 600; }
/* =========================================================================
MAGAZINE — banner hero. Texto sempre branco (fica sobre imagem + overlay
escuro), independente do reskin P&B.
========================================================================= */
.eblog-banner-area .banner-content .sub-title {
display: inline-block; color: #fff; background: var(--ds-accent);
padding: 4px 14px; border-radius: 4px; font-size: 13px; font-weight: 600;
text-transform: uppercase; letter-spacing: .5px; margin-bottom: 16px;
}
.eblog-banner-area .banner-content .heading-title,
.eblog-banner-area .banner-content .heading-title a { color: #fff; }
.eblog-banner-area .banner-content .heading-title { font-size: 44px; line-height: 1.15; max-width: 760px; }
.eblog-banner-area .banner-content .blog-meta,
.eblog-banner-area .banner-content .blog-meta li,
.eblog-banner-area .banner-content .blog-meta .author span { color: #fff; }
.eblog-banner-area .banner-content .blog-meta { display: flex; gap: 22px; margin-top: 18px; list-style: none; padding: 0; opacity: .95; }
.eblog-banner-area .banner-content .blog-meta li { display: flex; align-items: center; gap: 7px; }
/* -------- Magazine: cards grid (style-sm) — imagem sempre preenche -------- */
/* translateZ(0) força a máscara do border-radius durante o scale do hover (não fica quadrado). */
.eblog-featured-news.style-sm .image-area { position: relative; height: 380px; border-radius: 10px; overflow: hidden; transform: translateZ(0); }
.eblog-featured-news.style-sm .image-area > a { display: block; height: 100%; }
.eblog-featured-news.style-sm .image-area img { width: 100%; height: 100%; object-fit: cover; }
.featured-post .big-post .eblog-featured-news .image-area img { width: 100%; height: 440px; object-fit: cover; border-radius: 10px; }
.section-title-area .section-title a { color: var(--ds-ink); }
/* -------- FIX 1: linha do titulo de secao nao deve cruzar o texto --------
O base usa `.section-title::after { width: 75%; right: 0 }` (linha absoluta de
75% ancorada a direita) que invade titulos curtos. Trocamos para flex: o titulo
ocupa o necessario e a linha cresce no espaco que sobra, comecando APOS o texto. */
.eblog-featured-post-area .featured-post .section-title-area { display: flex; align-items: center; gap: 20px; }
.eblog-featured-post-area .featured-post .section-title-area .section-title { position: static; flex: 0 0 auto; }
.eblog-featured-post-area .featured-post .section-title-area .section-title::after { display: none !important; }
.eblog-featured-post-area .featured-post .section-title-area::after {
content: ""; flex: 1 1 auto; height: 1px; background: var(--ds-line, #EEEEEE);
}
/* -------- FIX 2: tag/badge do card grande (feature) — azul da marca --------
O base usa `background: rgba(255,255,255,0.1)` (branco translucido = parece
transparente). Padronizamos no accent, igual aos demais badges de categoria. */
.eblog-featured-news .image-area .tag,
.eblog-featured-news .image-area .tag a {
background: var(--ds-accent); color: var(--ds-accent-contrast, #fff);
border-radius: 6px;
}
/* -------- FIX 3: degrade interno dos cards em PRETO (a pedido) --------
O base usa #1E1E1E (cinza). Volta ao preto puro para o degrade sobre a imagem. */
.eblog-featured-news .image-area::after {
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%);
}
/* -------- Trending: imagens com altura absoluta (não quebram) -------- */
.trending-news-wrapper .image-area { border-radius: 10px; overflow: hidden; }
.trending-news-wrapper .image-area img { width: 100%; height: 240px; object-fit: cover; display: block; }
/* -------- Card da listagem (archive/busca/blog) — tudo à esquerda, imagem fixa -------- */
.eblog-featured-news.style-two.big .image-area { height: 430px; width: 100%; max-width: 100% !important; border-radius: 12px; overflow: hidden; position: relative; transform: translateZ(0); }
.eblog-featured-news.style-two.big .image-area > a { display: block; height: 100%; }
.eblog-featured-news.style-two.big .image-area img { width: 100%; height: 100%; object-fit: cover; }
.eblog-featured-news.style-two.big .blog-content { text-align: left; padding-top: 24px; }
.eblog-featured-news.style-two.big .blog-meta { justify-content: flex-start; }
.eblog-featured-news.style-two.big .heading-title { text-align: left !important; margin-left: 0 !important; }
.eblog-featured-news.style-two.big .heading-title a { text-align: left !important; display: inline; margin-left: 0; }
.eblog-featured-news.style-two.big .text-btn { display: inline-block; text-align: left; }
/* =========================================================================
POST INTERNO — gap 30px entre colunas + Sumário automático (TOC)
========================================================================= */
body.single .eblog-featured-post-area .row.sticky-coloum-wrap { --bs-gutter-x: 30px; }
/* O sticky do sumário é controlado por JS (magazine.js) — robusto. */
.eblog-toc-mobile { display: none; }
/* garante o sticky: nenhum ancestral do single pode recortar com overflow */
body.single .eblog-wrap,
body.single .eblog-featured-post-area,
body.single .eblog-featured-post-area .container,
body.single .section-inner { overflow: visible; }
.eblog-toc { border: 1px solid var(--ds-line); border-radius: 12px; padding: 22px 24px; background: var(--ds-bg-soft, #fff); }
.eblog-toc-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ds-muted); margin: 0 0 14px; }
.eblog-toc-nav ul { list-style: none; margin: 0; padding: 0; }
.eblog-toc-nav li { margin: 0; }
.eblog-toc-nav li a { display: block; padding: 8px 0 8px 16px; border-left: 2px solid var(--ds-line); color: var(--ds-muted); font-size: 14px; line-height: 1.5; transition: .2s; }
/* TOC lista apenas H2 (ver eblog_toc_process no functions.php), entao nao ha
mais nivel h3 para indentar. Sticky nunca ultrapassa a viewport. */
@media (min-width: 1200px) {
.eblog-toc-nav { max-height: calc(100vh - 190px); overflow-y: auto; }
}
.eblog-toc-nav li a:hover { color: var(--ds-ink); border-left-color: var(--ds-ink); }
.eblog-toc-nav li a.active { color: var(--ds-accent); border-left-color: var(--ds-accent); font-weight: 600; }
/* Mobile/tablet: TOC vai para o topo do post, sem sticky */
@media (max-width: 1199px) {
body.single .eblog-featured-post-area .row.sticky-coloum-wrap { --bs-gutter-x: 0; }
body.single .sticky-coloum-wrap .col-xl-3 { display: none; } /* esconde a coluna do sumário desktop */
.eblog-toc-mobile { display: block; margin: 22px 0 30px; } /* sumário inline, após o título */
}
/* -------- Botão "Ver todos os artigos" -------- */
.eblog-view-all { margin-top: 50px; }
.eblog-view-all .tp-btn {
display: inline-block; background: var(--ds-accent); color: #fff;
padding: 14px 34px; border-radius: 8px; font-weight: 600; transition: .2s;
}
.eblog-view-all .tp-btn:hover { background: var(--ds-accent-hover); color: #fff; }
/* -------- Titulo dos cards "Em Alta" (trending) --------
O base nao garante cor clara no titulo do card de trending; num tema escuro
ficava escuro sobre escuro (sumia). Forcamos a tinta do tema. */
.eblog-trending-news-area .trending-news-wrapper .title,
.eblog-trending-news-area .trending-news-wrapper .title a,
.eblog-trending-news-area .content-area .title a { color: var(--ds-ink); }
.eblog-trending-news-area .trending-news-wrapper .title a:hover { color: var(--ds-accent); }
/* -------- "Continuar lendo" (.text-btn) — em branco/tinta do tema --------
O base aplica `.color-two { color: var(--color-primary-2) !important }`, entao
precisamos de !important para vencer (azul -> branco). */
.eblog-wrap .text-btn,
.eblog-wrap a.text-btn,
.eblog-wrap .text-btn.color-two { color: var(--ds-ink) !important; }
.eblog-wrap .text-btn:hover,
.eblog-wrap a.text-btn:hover,
.eblog-wrap .text-btn.color-two:hover { color: var(--ds-accent) !important; }
/* -------- Responsivo -------- */
@media (max-width: 991px) {
.eblog-wrap .col-xl-3 { margin-top: 40px; }
.eblog-post-content { font-size: 16px; }
.eblog-section-title .title { font-size: 26px; }
.eblog-banner-area .banner-content .heading-title { font-size: 30px; }
.eblog-featured-news.style-sm .image-area { height: 300px; }
}
/* ---------------------------------------------------------------------------
FIX — bloco escuro atrás dos títulos (ilegível).
O `.title-animation` do template base cria o "underline animado" com um
linear-gradient DE BACKGROUND:
background-image: linear-gradient(to right, #000 50%, transparent 50%);
background-size: 201% 1px; <- só vira sublinhado por causa do 1px
Quando esse `background-size` não vale (cascata/override em algum contexto),
o gradiente preenche o elemento inteiro e vira um BLOCO PRETO atrás do texto
(visto nos títulos da sidebar "Posts em destaque": navy sobre preto).
Matamos o truque de vez (à prova de especificidade) e usamos um sublinhado
real no hover — mesmo efeito visual, sem risco de bloco.
--------------------------------------------------------------------------- */
.title-animation,
.eblog-wrap .title-animation,
.eblog-right-side-post .title-animation,
.eblog-banner-area .title-animation,
.eblog-trending-news-area .title-animation {
background-image: none !important;
background-color: transparent !important;
}
.title-animation:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
/* ===========================================================================
LAYOUT DO CONTEÚDO DO POST — só diagramação (a copy nunca é alterada).
Corrige os vícios de marcação mais comuns de quem escreve no editor/Elementor:
h1 no corpo (virou h2 no filtro), amarelo berrante, tabela de 1 célula
usada como caixa de destaque, texto legal em , figuras sem respiro, e os
font-family/size inline que o Elementor injeta e brigam com a tipografia.
=========================================================================== */
/* --- Ritmo e hierarquia --- */
.eblog-post-content > *:first-child { margin-top: 0; }
.eblog-post-content h2 { margin: 44px 0 16px; }
.eblog-post-content h3 { margin: 34px 0 14px; }
.eblog-post-content p { margin: 0 0 22px; }
/* --- : era amarelo padrão do browser. Vira destaque da marca --- */
.eblog-post-content mark {
background: color-mix(in srgb, var(--ds-accent) 12%, transparent);
color: inherit;
padding: 0 .12em;
border-radius: 3px;
}
/* Em título, o mark não deve pintar caixa — só o texto continua o título. */
.eblog-post-content h2 mark,
.eblog-post-content h3 mark { background: transparent; padding: 0; }
/* --- Figuras / imagens --- */
.eblog-post-content figure { margin: 32px 0; }
.eblog-post-content img { max-width: 100%; height: auto; border-radius: var(--ds-radius, 10px); display: block; }
.eblog-post-content figcaption {
margin-top: 10px; font-size: 14px; color: var(--ds-muted); text-align: center;
}
/* --- Tabelas: wrapper com scroll (mobile) + estilo --- */
.eblog-table-wrap { overflow-x: auto; margin: 28px 0; -webkit-overflow-scrolling: touch; }
.eblog-post-content table {
width: 100%; border-collapse: collapse; font-size: 16px;
}
.eblog-post-content table td,
.eblog-post-content table th {
border: 1px solid var(--ds-line); padding: 12px 14px; text-align: left; vertical-align: top;
}
.eblog-post-content table th { background: var(--ds-bg-soft); color: var(--ds-ink); font-weight: 600; }
/* --- Tabela de UMA célula = caixa de destaque (callout), não tabela --- */
.eblog-table-wrap:has(table tbody tr:only-child td:only-child) { overflow: visible; }
.eblog-post-content table:has(tbody tr:only-child td:only-child) { border-collapse: separate; }
.eblog-post-content table tbody tr:only-child td:only-child {
border: 0;
border-left: 4px solid var(--ds-accent);
background: var(--ds-bg-soft);
border-radius: 0 var(--ds-radius, 10px) var(--ds-radius, 10px) 0;
padding: 20px 24px;
font-size: 18px;
line-height: 1.6;
color: var(--ds-ink);
text-align: left;
}
.eblog-post-content table tbody tr:only-child td:only-child em { font-style: italic; }
/* --- Citação --- */
.eblog-post-content blockquote {
margin: 32px 0; padding: 20px 26px;
border-left: 4px solid var(--ds-accent);
background: var(--ds-bg-soft);
border-radius: 0 var(--ds-radius, 10px) var(--ds-radius, 10px) 0;
font-size: 19px; line-height: 1.6; color: var(--ds-ink);
}
.eblog-post-content blockquote p:last-child { margin-bottom: 0; }
/* --- Texto legal escrito em (rodapé de marcas registradas):
o browser deixa minúsculo e sobrescrito. Vira letra miúda legível. --- */
.eblog-post-content sub {
display: block;
vertical-align: baseline;
font-size: 13px;
line-height: 1.6;
color: var(--ds-muted);
margin-top: 8px;
}
/* --- Listas --- */
.eblog-post-content ul,
.eblog-post-content ol { margin: 0 0 22px; padding-left: 22px; }
.eblog-post-content li { margin-bottom: 8px; }
/* --- Posts feitos no ELEMENTOR: neutraliza font-family/size inline que brigam
com a tipografia do blog. Cor e negrito do autor são preservados. --- */
.eblog-post-content [data-elementor-type] { --e-con-gap: 0; }
.eblog-post-content .elementor-widget-text-editor,
.eblog-post-content .elementor-widget-text-editor span[style],
.eblog-post-content .elementor-widget-text-editor p[style],
.eblog-post-content span[style] {
font-family: var(--body-font) !important;
font-size: inherit !important;
line-height: inherit !important;
}
.eblog-post-content .elementor-element,
.eblog-post-content .e-con-inner { padding-left: 0 !important; padding-right: 0 !important; }
.eblog-post-content b { font-weight: 700; }
/* ===========================================================================
EXPLORAR POR CATEGORIA (template-parts/magazine-erp.php)
Grid compacto para categorias de pouco volume (linhas de produto etc.).
Só tokens --ds-*: herda a marca do cliente pelo design-tokens.css do overlay.
========================================================================= */
/* Título centralizado e no mesmo peso/tamanho do "Em Alta" (32px), para os
dois títulos de seção da home ficarem consistentes. */
.eblog-explore-area .section-title-area { margin-bottom: 40px; text-align: center; }
.eblog-explore-area .section-title {
font-size: 32px;
line-height: 1.2;
font-weight: 700;
color: var(--ds-ink);
}
.eblog-explore-area .section-title::after { display: none; }
/* auto-fit + minmax: os cards se distribuem sozinhos conforme a quantidade de
categorias com post (4 hoje cabem em uma linha; com 5+ quebra sem deixar
órfão sozinho numa linha vazia). */
.eblog-explore-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 30px;
}
.eblog-explore-card {
display: flex;
flex-direction: column;
background: var(--ds-bg);
border: 1px solid var(--ds-line);
border-radius: var(--ds-radius);
overflow: hidden;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.eblog-explore-card:hover {
transform: translateY(-4px);
border-color: var(--ds-accent);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.eblog-explore-card .explore-cover {
display: block;
aspect-ratio: 16 / 9;
background-color: var(--ds-bg-soft);
background-size: cover;
background-position: center;
}
.eblog-explore-card .explore-body {
display: block;
padding: 20px;
}
.eblog-explore-card .explore-name {
display: block;
font-family: var(--ds-font-title);
font-size: 18px;
font-weight: 700;
line-height: 1.3;
color: var(--ds-ink);
}
.eblog-explore-card .explore-count {
display: block;
margin-top: 6px;
font-family: var(--ds-font-body);
font-size: 13px;
color: var(--ds-accent);
}
.eblog-explore-card .explore-lead {
display: block;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--ds-line);
font-family: var(--ds-font-body);
font-size: 14px;
line-height: 1.5;
color: var(--ds-muted);
}
/* "Explorar" vem logo antes do "Em Alta" e ambos têm padding vertical:
sem isso o espaço entre as duas seções fica dobrado. */
.eblog-explore-area + .eblog-trending-news-area { padding-top: 0; }
@media (max-width: 991px) {
.eblog-explore-grid { gap: 20px; }
}
@media (max-width: 575px) {
/* abaixo de 575px o minmax de 240px ainda caberia em 2 colunas apertadas;
força 1 por linha para o nome da linha de ERP não espremer. */
.eblog-explore-grid { grid-template-columns: 1fr; gap: 20px; }
.eblog-explore-area .section-title { font-size: 26px; }
}