/* ============================================================
custom.css — Redesign do post (single). Carregado APÓS o app_atual.min.css.
Escopo: só o corpo do post (.postsHome--single .conteudo). Não vaza pro resto do site.
Estratégia:
- Correções universais (listas, citação, links) → todas as telas.
- Ajustes de tamanho/espaçamento (vw explode no desktop) → só >=993px;
o mobile já está ajustado, não tocamos.
Reversível: é só remover este arquivo + o que é só "wrapper" de uma sublista não leva marcador (senão sobra um bullet solto) */
.postsHome.postsHome--single .conteudo li:has(> ul),
.postsHome.postsHome--single .conteudo li:has(> ol) { list-style-type: none !important; }
/* Listas de UI dentro do .conteudo NÃO são listas de texto → sem bullet/indent.
Ex.: os ícones do "COMPARTILHE" (.social ul li). (corrige regressão do fix de listas) */
.postsHome.postsHome--single .conteudo .social ul,
.postsHome.postsHome--single .conteudo .social li {
list-style: none !important;
padding-left: 0;
margin-left: 0;
}
/* ==========================================================
#10 — CITAÇÃO (blockquote): tira a faixa rosa (#ee6e73) e vira
uma citação elegante (borda coral + itálico + fundo suave).
Precisa vencer o `color:white !important` do tema → especificidade alta.
========================================================== */
.postsHome.postsHome--single .conteudo blockquote {
background: #f6f1e7;
color: #333 !important;
border-left: 4px solid #de5c59;
padding: 1em 1.25em;
margin: 1.5em 0;
font-style: italic;
border-radius: 2px;
}
.postsHome.postsHome--single .conteudo blockquote p,
.postsHome.postsHome--single .conteudo blockquote span,
.postsHome.postsHome--single .conteudo blockquote strong,
.postsHome.postsHome--single .conteudo blockquote b {
color: #333 !important;
}
.postsHome.postsHome--single .conteudo blockquote p { margin: 0 0 .5em; }
.postsHome.postsHome--single .conteudo blockquote p:last-child { margin-bottom: 0; }
/* ==========================================================
Links do conteúdo: mantém o coral da marca + sublinhado (afford./a11y).
========================================================== */
.postsHome.postsHome--single .conteudo a {
text-decoration: underline;
text-underline-offset: 2px;
}
/* BUG (2026-07-15): link com dentro saía PRETO em vez de rosa.
Paste do Google Docs traz `texto ` até fica rosa, mas o tema pinta TODO span de preto COM !important:
.conteudo b, .conteudo p, .conteudo span, .conteudo strong { color:#000 !important }
e a regra rosa do link NÃO tem !important:
.conteudo a, .conteudo span { color:#de5c59 }
→ mesma especificidade, o !important preto ganha; o texto visível é o do span.
(O tema já tinha um remendo pontual `a strong span span{color:#de5c59!important}`
— sinal de que já bateram nesse bug e remendaram só um aninhamento.)
Fix: qualquer tag dentro de um link HERDA a cor do link. Usar `inherit` (e não
cravar o coral) faz os CTAs continuarem brancos sozinhos e sobrevive a troca de
paleta. Especificidade (0,3,2) vence a (0,3,1) do preto, mesmo os dois !important.
Provado via CDP no post dos 10 anos: span 3× rgb(0,0,0) → rgb(238,110,115);
os links que já estavam certos não mudaram. */
.postsHome.postsHome--single .conteudo a span,
.postsHome.postsHome--single .conteudo a strong,
.postsHome.postsHome--single .conteudo a b,
.postsHome.postsHome--single .conteudo a em {
color: inherit !important;
}
/* ==========================================================
#2 — MARGEM DOS TÍTULOS (todas as telas): o tema força margem gigante com
!important — `margin:4vw 0 5vw` no desktop (~76/96px) e `margin:12vw 0` no
mobile (~51px). Ambas eram os "gapzões". Vencemos com !important + rem enxuto.
========================================================== */
.postsHome.postsHome--single .conteudo h1,
.postsHome.postsHome--single .conteudo h2,
.postsHome.postsHome--single .conteudo h3,
.postsHome.postsHome--single .conteudo h4,
.postsHome.postsHome--single .conteudo h5,
.postsHome.postsHome--single .conteudo h6 {
margin: 1.7rem 0 .6rem !important;
}
/* ==========================================================
#3/#5 — EMBEDS no corpo do post. O tema força `.conteudo iframe{width:100%!important;
height:500px!important}`, o que estraga a proporção. Tratamento por tipo (global):
========================================================== */
/* YouTube: 16:9 responsivo de verdade — mata o corte/letterbox do height:500px fixo. */
.postsHome.postsHome--single .conteudo iframe[src*="youtube"],
.postsHome.postsHome--single .conteudo iframe[src*="youtu.be"] {
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9;
margin: 1.6rem 0;
}
/* Instagram: cap na largura NATURAL do embed (540px, padrão do IG) e centraliza.
`width:100%` faz caber no mobile; `max-width:540px` impede o embed de FOTO (não-reel)
de esticar pra coluna toda (era o bug do "estourou"). Reels mantêm o comportamento deles.
Obs.: tarjas pretas internas dos reels são do player do próprio Instagram (dentro do iframe).
RECORTE (padroniza os embeds, esconde o box de curtidas/comentário vazio):
o IG injeta `min-height:1000px` no iframe → sobrava uma faixa branca embaixo (conteúdo real ~700px).
Aqui só MATAMOS o min-height; a altura de cada reel é ajustada por JS (wp_footer em
functions-post.php), que lê a altura natural do IG (atributo) e corta a barra de baixo —
necessário porque cada reel tem altura própria (formato de vídeo diferente), o que o CSS não lê. */
.postsHome.postsHome--single .conteudo iframe[src*="instagram.com"] {
width: 100% !important;
max-width: 540px !important;
margin: 1.6rem auto !important;
display: block !important;
min-height: 0 !important;
max-height: none !important;
}
/* Galeria de reels lado a lado — shortcode [reels]. 2 colunas no desktop, empilha no mobile. */
.postsHome.postsHome--single .conteudo .reels-galeria {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
align-items: flex-start;
margin: 1.6rem 0;
}
.postsHome.postsHome--single .conteudo .reels-galeria iframe[src*="instagram.com"] {
flex: 1 1 calc(50% - 0.5rem);
width: auto !important;
max-width: calc(50% - 0.5rem) !important;
min-width: 0;
margin: 0 !important;
}
@media (max-width: 600px) {
.postsHome.postsHome--single .conteudo .reels-galeria iframe[src*="instagram.com"] {
flex-basis: 100%;
max-width: 100% !important;
}
}
/* ==========================================================
#6 — RODAPÉ do post.
========================================================== */
/* "COMPARTILHE" + ícones juntos (o tema usava col s6 + s6 → vão gigante). */
.postsHome.postsHome--single .conteudo .social {
display: flex !important;
align-items: center;
gap: 1.2rem;
margin-top: 3rem !important;
}
.postsHome.postsHome--single .conteudo .social > .col {
width: auto !important;
flex: 0 0 auto;
padding: 0 !important;
margin: 0 !important;
}
.postsHome.postsHome--single .conteudo .social .right-align { text-align: left !important; }
/* Form de comentário: alinha ao TEXTO do conteúdo (que tem o padding 0.75rem da coluna
do materialize). Estava centralizado ~242px fora; agora bate com o COMPARTILHE/parágrafos.
!important vence o `margin:0 auto` inline do comments.php. */
#comentarios .navas-coments { margin-left: 0.75rem !important; margin-right: 0 !important; }
/* ==========================================================
#9 — Faixa branca após o footer (aparece em posts CURTOS, quando a página não
enche a tela → o fundo branco padrão do html aparece abaixo do footer).
Fundo bege no html = qualquer área descoberta fica bege, não branca.
========================================================== */
html { background-color: #f0eee2; }
/* ==========================================================
BIO DO AUTOR no fim do post (só renderiza se o autor preencheu a bio no perfil).
Reusa a foto do autor (campo foto_autor) + a foto padrão do tema como fallback.
========================================================== */
.postsHome.postsHome--single .conteudo .autor-bio {
display: flex;
align-items: center;
gap: 1.3rem;
margin: 2.5rem 0 1rem;
padding: 1.4rem 1.6rem;
background: #faf6ee;
border-radius: 10px;
}
/* !important vence o `.conteudo div{width:100%!important}` do tema (senão a foto vira elipse). */
.postsHome.postsHome--single .conteudo .autor-bio__foto {
flex: 0 0 auto;
width: 76px !important;
height: 76px;
border-radius: 50%;
border: 2px solid rgba(222, 92, 89, .18);
}
.postsHome.postsHome--single .conteudo .autor-bio__texto {
flex: 1 1 auto;
width: auto !important;
min-width: 0;
}
.postsHome.postsHome--single .conteudo .autor-bio__label {
font-size: .78rem;
color: #de5c59;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
}
.postsHome.postsHome--single .conteudo .autor-bio__nome {
margin: .15rem 0 .35rem !important;
font-size: 1.3rem !important;
line-height: 1.2 !important;
}
.postsHome.postsHome--single .conteudo .autor-bio__desc {
margin: 0;
font-size: 1rem;
line-height: 1.6;
color: #444;
}
@media (max-width: 600px) {
.postsHome.postsHome--single .conteudo .autor-bio { flex-direction: column; text-align: center; }
}
/* ==========================================================
DESKTOP (>=993px) — normaliza tamanho/ritmo (mobile fica como está).
993px = breakpoint "l" do Materialize.
========================================================== */
@media (min-width: 993px) {
/* --- #2 TÍTULOS (desktop): tamanho em rem (não escala com a tela). A MARGEM
é global (regra abaixo, fora do @media) pra valer no mobile também. --- */
.postsHome.postsHome--single .conteudo h1 { font-size: 2.2rem !important; line-height: 1.2; }
.postsHome.postsHome--single .conteudo h2 { font-size: 1.8rem !important; line-height: 1.25; }
.postsHome.postsHome--single .conteudo h3 { font-size: 1.45rem !important; line-height: 1.3; }
.postsHome.postsHome--single .conteudo h4 { font-size: 1.2rem !important; line-height: 1.35; }
.postsHome.postsHome--single .conteudo h5 { font-size: 1.05rem !important; line-height: 1.4; }
/* --- Corpo do texto: conforto de leitura (~18px). Parágrafo + itens de lista. --- */
.postsHome.postsHome--single .conteudo p,
.postsHome.postsHome--single .conteudo li {
font-size: 1.2rem;
line-height: 1.7;
}
.postsHome.postsHome--single .conteudo p { margin: 0 0 1.1em; }
/* --- Embeds/imagens: corta o exagero de margem (era 5vw ~ 96px cada lado) --- */
.postsHome.postsHome--single .conteudo iframe { margin: 1.6rem 0; }
.postsHome.postsHome--single .conteudo img { margin: 1.2rem 0; }
/* --- Topo do conteúdo: o tema põe padding-top:15vw (~288px!) no .postsHome →
um vazio inútil no início. Reduz p/ o conteúdo subir (fica intencional, não colado). --- */
.postsHome.postsHome--single { padding-top: 3vw !important; }
/* --- Coluna lateral (perfil do autor + banner): o tema põe padding-top:8vw (~128px),
que a deixava desalinhada do conteúdo. Alinha ao topo do conteúdo. --- */
.postsHome.postsHome--single .lateral { padding-top: 0 !important; }
}
/* Barra laranja decorativa no topo do conteúdo: REMOVIDA (design, 2026-07-10) —
libera ~128px e deixa o topo mais limpo/editorial. Reversível: é só apagar esta regra. */
.postsHome.postsHome--single .conteudo .bar { display: none; }
/* D2 "coluna de leitura" TESTADO E REMOVIDO (2026-07-10): com o layout push/pull
(conteudo l9 + sidebar l3), limitar a largura do texto deixou um vao vazio enorme
entre o texto e a sidebar. Rob prefere o texto largo. Mantido largo. */
/* ==========================================================
#1 — FAIXA BRANCA entre o hero e o conteúdo (~49px no desktop).
Causa REAL (medida via CDP: banner=806px vs hero=757px → sobra 49px):
a .scrollboxicon (ícone "role a página") está com position:STATIC — o tema
esqueceu o position:absolute (ela tem bottom:10vw e left:50%, que só valem
posicionada). Static → ela ocupa height:3.4vw (~49px no desktop) EM FLUXO
abaixo do hero, sem fundo = a faixa branca. O hero/slider está correto (100vh).
Fix: posicioná-la absoluta sobre o hero (como o bottom/left já pedem) → sai do
fluxo e o banner passa a ter exatamente a altura do hero.
========================================================== */
.banner { position: relative; }
.banner .scrollboxicon { position: absolute; }
/* ==========================================================
#4 — CTA (botão) e Dica da Dani (callout).
========================================================== */
/* CTA: o tema estilizava em vw (gap gigante + tamanho quebrado no mobile). Reescreve em rem.
Cobre tanto o [cta] shortcode quanto os já colados.
Base (azul/vermelho compartilham forma/tamanho); a cor muda por classe. */
.postsHome.postsHome--single .conteudo a.conteudoCTA,
.postsHome.postsHome--single .conteudo a.conteudoCTA--vermelho {
display: table;
position: relative;
left: auto !important;
transform: none !important;
margin: 2rem auto !important;
padding: 0.85rem 3.4rem 0.85rem 1.6rem !important;
font-size: 0.95rem !important;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: center;
line-height: 1.3;
border-radius: 40px !important;
color: #fff !important;
text-decoration: none;
transition: filter 0.25s;
}
.postsHome.postsHome--single .conteudo a.conteudoCTA { background: #54598f !important; }
.postsHome.postsHome--single .conteudo a.conteudoCTA--vermelho { background: #de5c59 !important; }
.postsHome.postsHome--single .conteudo a.conteudoCTA:hover,
.postsHome.postsHome--single .conteudo a.conteudoCTA--vermelho:hover { filter: brightness(1.08); }
/* seta em círculo branco à direita (data URI — sem arquivo novo). Cor da seta = cor do botão. */
.postsHome.postsHome--single .conteudo a.conteudoCTA::after,
.postsHome.postsHome--single .conteudo a.conteudoCTA--vermelho::after {
content: '';
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: #fff;
background-repeat: no-repeat;
background-position: center;
background-size: 52%;
}
.postsHome.postsHome--single .conteudo a.conteudoCTA::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354598f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.postsHome.postsHome--single .conteudo a.conteudoCTA--vermelho::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23de5c59' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
@media (max-width: 600px) {
.postsHome.postsHome--single .conteudo a.conteudoCTA,
.postsHome.postsHome--single .conteudo a.conteudoCTA--vermelho {
font-size: 0.9rem !important;
padding: 0.8rem 3rem 0.8rem 1.3rem !important;
max-width: 92%;
}
}
/* Dica da Dani — callout. Bloco protegido do wpautop (marcador em functions-post.php). */
.postsHome.postsHome--single .conteudo .ohd-dica {
display: flex;
gap: 0.9rem;
align-items: flex-start;
background: #faf3ee;
border-left: 5px solid #de5c59;
border-radius: 0 8px 8px 0;
padding: 1rem 1.2rem;
margin: 1.8rem 0;
}
.postsHome.postsHome--single .conteudo .ohd-dica__icone {
flex: 0 0 auto;
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
background-color: #de5c59;
background-repeat: no-repeat;
background-position: center;
background-size: 1.3rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5.76.76 1.23 1.52 1.41 2.5'/%3E%3C/svg%3E");
}
.postsHome.postsHome--single .conteudo .ohd-dica__corpo { flex: 1 1 auto; min-width: 0; }
.postsHome.postsHome--single .conteudo .ohd-dica__label {
margin: 0 0 0.25rem !important;
font-weight: 700;
color: #c04a47;
font-size: 1rem !important;
}
.postsHome.postsHome--single .conteudo .ohd-dica__corpo p {
margin: 0 0 0.5rem !important;
font-size: 1.1rem;
line-height: 1.6;
}
.postsHome.postsHome--single .conteudo .ohd-dica__corpo p:last-child { margin-bottom: 0 !important; }
/* ==========================================================
Utilitário de acessibilidade — visualmente escondido, visível
pra leitores de tela + SEO (ex.: o h1 único da home). GLOBAL (não escopado).
========================================================== */
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
/* ==========================================================
REGRESSÃO do fix de h1 (Fase 1): título do banner da HOME.
O tema dava largura/posição ao título via seletor POR ELEMENTO
(.banner__sliderMain .item h1 { width:50%; left:10vw; position:relative }).
Ao trocar o título de h1→h2 (hierarquia de h1 p/ SEO), essa regra parou de
aplicar e o título passou a vazar full-width. Reaplica a MESMA largura/posição
no h2 (medido via CDP: desktop left 0→160px/10vw, width 1600→800px/50%).
========================================================== */
.banner .banner__sliderMain .item h2.title--extraLarge {
width: 50%;
left: 10vw;
position: relative;
}
@media only screen and (max-width: 768px) {
.banner .banner__sliderMain .item h2.title--extraLarge {
width: 90%;
left: 5%;
}
}
/* ==========================================================
BUG (mobile, PRÉ-EXISTENTE — não é da Fase 1): a barra de share do
post estoura a viewport e faz o Safari mobile dar zoom-out na página
INTEIRA (banner encolhido, faixa vazia à direita, texto cortado à esquerda).
Causa: o tema dimensiona os ícones SÓ por height
(.social ul li .icone{height:4vw}) e ainda força .share>img{width:unset}.
O lazyload do WP Rocket troca o src real por um placeholder
(aspect-ratio indefinido) → com height fixo e
width auto, o browser cai no DEFAULT de 300px de elemento substituído.
4–5 ícones de 300px estouram a largura no 1º paint → a viewport trava
em ~524px e não volta nem depois que o SVG real (pequeno) carrega.
Cap de largura: só morde o placeholder quebrado; o ícone real (~4vw)
fica abaixo do cap em qualquer viewport, então nada muda no visual.
Medido via CDP: img 300px→31px, overflow horizontal 134px→0. GLOBAL.
========================================================== */
.share > img.icone { max-width: 8vw !important; }
/* ==========================================================
BUG (mobile+desktop, PRÉ-EXISTENTE): botão de PLAY dos vídeos do
YouTube colapsado → vídeo parece "indisponível para dar play".
Os embeds usam o facade do WP Rocket (.rll-youtube-player: thumbnail
+ botão; o iframe real só carrega no clique). O CSS do Rocket dá ao
container `padding-bottom:56.23%; height:0` (truque de aspect-ratio) e
ao botão `.play{height:100%;width:100%}`. Como o wrapper interno fica
com altura AUTO=0, o `height:100%` resolve pra ZERO → o botão vira um
filete de 2px (invisível) e o toque no vídeo erra o alvo. O handler de
play FUNCIONA (btn.click() carrega o iframe) — o problema é só a área.
O script de "recorte" do wp_footer é só do Instagram; nunca tocou o YT.
Fix: ancorar o botão no container externo (wrapper → static) e fazer o
botão preencher o facade (inset:0) → vídeo todo clicável + ícone (64×45,
tamanho natural do youtube.png do Rocket) centralizado.
Provado em navegador real (mobile): botão 2px→332×186, tap no centro
carrega youtube.com/embed/…?autoplay=1. GLOBAL.
========================================================== */
/* --- Recorte do vídeo (thumbnail + iframe). Dois problemas distintos:
(a) THUMBNAIL: o Rocket usa a `hqdefault.jpg` do YouTube, que é 480×360 (4:3),
dentro de um facade 16:9. Com `width:100%` ela vira 346×259 num box de 194
→ encostada no topo (`top:4`) + `overflow:hidden` = faixa PRETA em cima e
~61px de conteúdo CORTADO embaixo. `object-fit:cover` + `height:100%` faz
ela preencher exato e recortar as barras pretas simetricamente (as barras
de 45px viram 32px na escala, e o cover corta exatamente 32,5px de cada
lado) → sai o 16:9 limpo, sem faixa e sem cortar conteúdo.
(b) IFRAME (vídeo tocando): o tema dá uma margem vertical (~22px) ao iframe.
Em elemento POSICIONADO ABSOLUTO a margem DESLOCA a partir do `top:0`
→ o player descia 22px e os 22px de baixo (logo do YouTube / sugestões)
eram cortados pelo `overflow:hidden`. `margin:0` recoloca em `top:0`.
Medido na prod: thumb 259→194px (sobra 65→0); iframe top 22→0 (exactFill). --- */
.rll-youtube-player img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
margin: 0 !important;
}
.rll-youtube-player iframe { margin: 0 !important; }
.rll-youtube-player > div { position: static !important; }
.rll-youtube-player .play.play {
position: absolute !important;
top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
width: auto !important; height: auto !important;
margin: 0 !important; padding: 0 !important;
transform: none !important;
background-color: transparent !important;
background-size: 64px 45px !important; /* tamanho natural do ícone (evita distorção) */
background-position: center !important;
background-repeat: no-repeat !important;
cursor: pointer !important;
}