/* ==========================================================================
Ultrapack - Blog
--------------------------------------------------------------------------
Sistema B (canonico) do DESIGN-SYSTEM.md. Duas regras de la mandam aqui:
- "Escopo obrigatorio em plugin": TUDO vive sob `.up-blog*` ou sob uma
classe de body do blog. Nada vaza pro Avada nem pro WooCommerce.
- "Cor, raio, espacamento e sombra vem de token": este arquivo consome
`var(--*)` do `tokens.css`, enfileirado site-wide pelo child theme
desde 27/08 (passo 1 da convergencia, secao 5.1).
TODO `var()` TEM FALLBACK, e isso e proposital: o `tokens.css` e injetado
a mao no `wp_head` porque a fila normal do tema nao chega na pagina. Se um
dia ele nao chegar, o blog degrada para os mesmos valores em vez de perder
a cor inteira.
A PAGINA E DE LEITURA, e o conteudo e de solucao de problema: quem chega
veio do Google com UM sintoma. Dai as tres decisoes de layout -- cabecalho
na faixa (identidade sem custar densidade), sumario fixo na lateral
(atalho pro caso certo) e rotulo em destaque no corpo (varrer com o olho
em vez de ler).
========================================================================== */
/* --------------------------------------------------------------------------
1. Topo: faixa reta no lugar da cunha diagonal
O `` do site inteiro carrega `bgtop16b.jpg` (3840x446) em
`50% 37px`, e o recorte diagonal daquela arte e o que desenha a cunha
atras do cabecalho. Aqui ela vira uma faixa reta, no mesmo lugar, com as
cores AMOSTRADAS da propria imagem (#676f83 no topo, #6a6275 na base) --
elas sao do sistema A, a loja legada, e por isso nao viram token novo: o
objetivo e continuidade com o resto do site, nao introduzir paleta.
COMO A BORDA FICA RETA SEM UM SO BREAKPOINT
A faixa e pintada com folga e quem a corta e o `.up-blog-layout`, que
recebe o fundo da pagina em full-bleed. Como ele comeca exatamente onde o
corpo do texto comeca, a borda cai sempre no lugar certo.
Isso NAO foi escolha de estilo, foi medicao: a barra de titulo do Avada
nao tem altura constante (168px no desktop, 110px abaixo de ~1000px, e a
regra de altura mais abaixo so vence acima desse ponto). Faixa de altura
fixa deixava emenda de 10px em tela media e 19px no celular.
ESCOPADO POR CLASSE DE BODY, nunca global: `bgtop16b.jpg` e a identidade
do catalogo e das ~23 mil paginas de item.
-------------------------------------------------------------------------- */
body.single-up_blog,
body.post-type-archive-up_blog,
body.tax-up_blog_cat {
background-image: linear-gradient(180deg, #676f83 0%, #6a6275 100%);
background-repeat: no-repeat;
background-position: 0 37px;
background-size: 100% 600px;
background-color: var(--bg, #fbfbfe);
}
/*
* O CELULAR PRECISA DE `!important`, E SO ELE.
*
* O `site-custom.css` repete o fundo numa segunda regra,
* `body { background: url(bgtop16b.jpg) ... !important }`, dentro de
* `@media (max-width: 640px)`. Contra `!important`, especificidade nao
* resolve: sem repetir a marca aqui, a cunha diagonal volta no celular e so
* no celular -- o tipo de defeito que passa batido em revisao feita no
* desktop.
*/
@media (max-width: 640px) {
body.single-up_blog,
body.post-type-archive-up_blog,
body.tax-up_blog_cat {
background: linear-gradient(180deg, #676f83 0%, #6a6275 100%) 0 37px / 100% 600px no-repeat var(--bg, #fbfbfe) !important;
}
}
/*
* A barra de titulo do Avada SOME do blog.
*
* Ela carregava UMA coisa: o campo de busca do CATALOGO, que procura itens e
* nao artigos -- resultado irrelevante pra quem esta lendo, ocupando 56px no
* topo de uma barra de 168px (os outros 112 eram vazio). Nao ha breadcrumb
* aqui (conferido no DOM), entao nao sobra nada que valha manter, e o
* cabecalho do artigo passa a ocupar esse espaco.
*
* `display:none` e nao altura zero: escondendo so a busca, a barra ainda
* media 101px no celular por causa do `` vazio que o Avada deixa dentro
* dela. Disputar altura com o tema ali seria perseguir um numero que muda
* por breakpoint.
*/
body.single-up_blog .fusion-page-title-bar,
body.post-type-archive-up_blog .fusion-page-title-bar,
body.tax-up_blog_cat .fusion-page-title-bar {
display: none;
}
/* O `#main` fica TRANSPARENTE: quem corta a faixa agora e o `.up-blog-layout`. */
body.single-up_blog #main,
body.post-type-archive-up_blog #main,
body.tax-up_blog_cat #main {
background: transparent;
padding-top: 0;
}
/*
* O respiro do topo e do `.up-blog-hero`, e de mais ninguem.
*
* O `site-custom.css` empilha padding no `#main` e no `#main .fusion-row` por
* breakpoint -- 100px e 80px no desktop, 115px e 80px ate 1000px, mais 48px
* no `.single` ate 800px, varios com `!important`. Somados, deixavam ~206px
* de faixa vazia acima do cabecalho no celular.
*
* Zerar os dois aqui e o que torna o espacamento previsivel: quem controla a
* distancia entre o menu e o titulo passa a ser uma regra so. O `!important`
* existe porque o lado de la tem `!important`; sem ele, especificidade nao
* resolve.
*/
body.single-up_blog #main,
body.post-type-archive-up_blog #main,
body.tax-up_blog_cat #main,
body.single-up_blog #main .fusion-row,
body.post-type-archive-up_blog #main .fusion-row,
body.tax-up_blog_cat #main .fusion-row {
padding-top: 0 !important;
}
/*
* E a margem NEGATIVA tambem, pelo mesmo motivo.
*
* `#main .fusion-row` tem `margin-top: -75px` no desktop e
* `.single #main .fusion-row { margin-top: -58px !important }` ate 800px --
* e `.single` casa com `single-up_blog`, entao o artigo herdava um puxao pra
* cima escrito pro layout do catalogo. Com o padding zerado acima, esse
* puxao passou a enfiar o cabecalho POR BAIXO do menu no celular (medido:
* cabecalho em 87px, header ocupando ate 145px).
*/
body.single-up_blog #main .fusion-row,
body.post-type-archive-up_blog #main .fusion-row,
body.tax-up_blog_cat #main .fusion-row {
margin-top: 0 !important;
}
/*
* E o CARTAO CLARO do `.fusion-row` tambem tem de sair.
*
* `#main .fusion-row` recebe `background:#f9f9f9` + `border-radius:30px` no
* `site-custom.css`. Como ele envolve o cabecalho, esse cartao pintava POR
* CIMA da faixa escura -- e o titulo, que e branco, ficava branco sobre
* quase-branco.
*
* So a LISTAGEM sofria: existe `.single #main .fusion-row { background:
* transparent }`, e `.single` casa com `single-up_blog`. Ou seja o artigo
* saia certo e o arquivo saia lavado, o que faz o defeito parecer aleatorio
* quando se olha uma tela so.
*
* O fundo claro do blog e responsabilidade do `.up-blog-layout`, que o pinta
* a partir do ponto certo e de ponta a ponta.
*/
body.single-up_blog #main .fusion-row,
body.post-type-archive-up_blog #main .fusion-row,
body.tax-up_blog_cat #main .fusion-row {
background: transparent;
border-radius: 0;
}
/* --------------------------------------------------------------------------
2. Escopo e tipografia
-------------------------------------------------------------------------- */
.up-blog {
--up-blog-lateral: 232px;
--up-blog-medida: 68ch;
color: var(--body, #565d70);
font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
line-height: 1.75;
}
/*
* O `!important` nos titulos NAO e preguica: `site-custom.css:7491` tem
* `body, h1..h6 { font-family:'Poppins'!important }` valendo no site inteiro,
* e sem igualar a especificidade os titulos sairiam fora do sistema B. O
* escopo e o menor possivel -- so headings dentro de `.up-blog`.
*/
.up-blog h1,
.up-blog h2,
.up-blog h3 {
font-family: var(--font-display, 'Montserrat', system-ui, sans-serif) !important;
letter-spacing: -.02em;
line-height: 1.15;
text-wrap: balance;
margin: 0;
}
/* --------------------------------------------------------------------------
3. Cabecalho na faixa
Texto claro sobre a faixa escura. As cores de "sobre escuro" vem dos
tokens proprios pra isso (`--on-dark`, `--on-dark-muted`), e nao de um
branco solto: a faixa e ardosia, e branco puro em corpo sobre ela vibra.
-------------------------------------------------------------------------- */
.up-blog-hero {
max-width: 780px;
padding: 56px 0 48px;
}
.up-blog-hero__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-3, 12px);
margin-bottom: var(--sp-5, 24px);
}
.up-blog-hero h1 {
font-size: var(--fs-h1, clamp(2rem, 1.4rem + 2.2vw, 3rem));
font-weight: 800;
color: var(--ink-invert, #fff);
margin-bottom: var(--sp-4, 16px);
}
.up-blog-hero__lead {
font-size: var(--fs-lead, 1.175rem);
line-height: 1.6;
color: var(--on-dark, #eceefb);
opacity: .92;
margin: 0;
max-width: 62ch;
}
.up-blog-data,
.up-blog-voltar {
font-size: var(--fs-sm, .9rem);
color: var(--on-dark-muted, #a4a9c6);
}
.up-blog-voltar {
font-family: var(--font-display, 'Montserrat', sans-serif);
font-weight: 600;
text-decoration: none;
}
.up-blog-voltar::before {
content: '\2190';
margin-right: .4em;
}
.up-blog-voltar:hover {
color: var(--ink-invert, #fff);
}
/* Chip de categoria — a variante `.up-badge` do sistema B, sobre escuro. */
.up-blog-chip {
display: inline-flex;
align-items: center;
font-family: var(--font-display, 'Montserrat', sans-serif);
font-size: var(--fs-xs, .78rem);
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: var(--r-pill, 999px);
background: rgba(255, 255, 255, .14);
color: var(--ink-invert, #fff);
text-decoration: none;
transition: background .18s ease;
}
.up-blog-chip:hover {
background: rgba(255, 255, 255, .26);
color: var(--ink-invert, #fff);
}
/* Sobre fundo claro (dentro do card da listagem). */
.up-blog-chip--claro {
background: var(--coral-tint, #fff1ef);
color: var(--brand-wine, #8a4f66);
align-self: flex-start;
}
.up-blog-chip--claro:hover {
background: var(--coral, #f2726a);
color: #fff;
}
/* --------------------------------------------------------------------------
4. Corpo em duas colunas, e o corte da faixa
O fundo claro precisa ir de ponta a ponta pra borda da faixa ficar reta,
mas o elemento vive dentro do `.fusion-row` (max-width 1400px). O
full-bleed sai de `box-shadow` com spread + `clip-path`, e NAO de
`100vw`: `vw` inclui a barra de rolagem e reintroduziria o scroll
horizontal que ja custou um mu-plugin neste site
(`up-fix-horizontal-overflow.php`). Sombra nao ocupa espaco de layout,
entao nao ha o que transbordar.
-------------------------------------------------------------------------- */
.up-blog-layout {
display: grid;
grid-template-columns: var(--up-blog-lateral) minmax(0, 1fr);
gap: var(--sp-8, 64px);
align-items: start;
padding: var(--sp-7, 48px) 0 var(--sp-9, 96px);
background: var(--bg, #fbfbfe);
box-shadow: 0 0 0 100vmax var(--bg, #fbfbfe);
clip-path: inset(0 -100vmax);
}
.up-blog-layout--solo {
grid-template-columns: minmax(0, 1fr);
}
.up-blog-layout--solo .up-blog-corpo {
max-width: var(--up-blog-medida);
}
/* --------------------------------------------------------------------------
5. Lateral: sumario do artigo / categorias da listagem
-------------------------------------------------------------------------- */
.up-blog-lateral {
position: sticky;
top: 100px; /* livra o cabecalho sticky do Avada */
}
.up-blog-sumario__rotulo {
display: block;
font-family: var(--font-display, 'Montserrat', sans-serif);
font-size: var(--fs-xs, .78rem);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted, #8990a3);
margin-bottom: var(--sp-3, 12px);
}
.up-blog-sumario ol,
.up-blog-sumario ul {
list-style: none;
margin: 0;
padding: 0;
border-left: 2px solid var(--line, #e7e9f1);
}
.up-blog-sumario li {
margin: 0;
}
.up-blog-sumario a {
display: flex;
justify-content: space-between;
gap: var(--sp-2, 8px);
padding: 7px 0 7px 16px;
margin-left: -2px;
border-left: 2px solid transparent;
font-size: var(--fs-sm, .9rem);
line-height: 1.45;
color: var(--body, #565d70);
text-decoration: none;
transition: color .16s ease, border-color .16s ease;
}
.up-blog-sumario a:hover,
.up-blog-sumario li.is-atual > a {
color: var(--brand-wine, #8a4f66);
border-left-color: var(--brand-wine, #8a4f66);
}
.up-blog-sumario li.is-atual > a {
font-weight: 500;
}
.up-blog-sumario__n {
font-size: var(--fs-xs, .78rem);
color: var(--muted, #8990a3);
font-variant-numeric: tabular-nums;
}
/* --------------------------------------------------------------------------
6. Corpo do texto
-------------------------------------------------------------------------- */
.up-blog-corpo {
max-width: var(--up-blog-medida);
font-size: 1.0625rem; /* 17px: a 16px o texto some ao lado do H1 */
}
.up-blog-corpo > h2 {
font-size: var(--fs-h2, clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem));
font-weight: 700;
color: var(--ink, #1c2030);
margin: var(--sp-8, 64px) 0 var(--sp-4, 16px);
padding-top: var(--sp-2, 8px);
scroll-margin-top: 100px; /* o link do sumario nao para sob o header sticky */
}
.up-blog-corpo > h2:first-child {
margin-top: 0;
}
.up-blog-corpo > h3 {
font-size: var(--fs-h3, 1.375rem);
font-weight: 700;
color: var(--ink, #1c2030);
margin: var(--sp-6, 32px) 0 var(--sp-3, 12px);
scroll-margin-top: 100px;
}
.up-blog-corpo p,
.up-blog-corpo ul,
.up-blog-corpo ol {
margin: 0 0 var(--sp-5, 24px);
}
.up-blog-corpo ul,
.up-blog-corpo ol {
padding-left: var(--sp-5, 24px);
}
.up-blog-corpo li {
margin-bottom: var(--sp-2, 8px);
}
.up-blog-corpo strong {
color: var(--ink-2, #3a4054);
font-weight: 500;
}
.up-blog-corpo a {
color: var(--brand-slate, #4f5a75);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color .16s ease;
}
.up-blog-corpo a:hover {
color: var(--brand-wine, #8a4f66);
}
.up-blog-corpo img {
max-width: 100%;
height: auto;
border-radius: var(--r-md, 14px);
}
.up-blog-corpo blockquote {
margin: var(--sp-6, 32px) 0;
padding: var(--sp-1, 4px) 0 var(--sp-1, 4px) var(--sp-5, 24px);
border-left: 3px solid var(--coral, #f2726a);
color: var(--ink, #1c2030);
font-style: normal;
}
/*
* Bloco de codigo. Conteudo utilitario vive de trecho de wp-config e de
* caminho de arquivo, entao isto e componente principal aqui, nao enfeite.
* `overflow-x` pra linha longa nao empurrar a pagina inteira.
*/
.up-blog-corpo pre {
margin: 0 0 var(--sp-5, 24px);
padding: var(--sp-4, 16px) var(--sp-5, 24px);
border: 1px solid var(--line, #e7e9f1);
border-radius: var(--r-sm, 8px);
background: var(--surface-2, #f6f7fb);
overflow-x: auto;
font-size: var(--fs-sm, .9rem);
line-height: 1.6;
}
.up-blog-corpo code {
padding: 2px 6px;
border-radius: 5px;
background: var(--surface-3, #eef0f7);
color: var(--ink-2, #3a4054);
font-size: .9em;
}
.up-blog-corpo pre code {
padding: 0;
background: none;
}
.up-blog-corpo table {
width: 100%;
margin: 0 0 var(--sp-5, 24px);
border-collapse: collapse;
font-size: var(--fs-sm, .9rem);
}
.up-blog-corpo th,
.up-blog-corpo td {
padding: 10px 12px;
border-bottom: 1px solid var(--line, #e7e9f1);
text-align: left;
}
.up-blog-corpo th {
font-family: var(--font-display, 'Montserrat', sans-serif);
font-weight: 700;
color: var(--ink, #1c2030);
}
/* --------------------------------------------------------------------------
7. Nota rotulada
Vem do `UP_Blog_Conteudo`, que converte `
Rotulo: ...
`
automaticamente. A convencao e de REDACAO, nao de marcacao: o redator
escreve como ja escreveria e o bloco aparece, entao o segundo artigo nao
esquece de usar.
-------------------------------------------------------------------------- */
.up-blog-nota {
margin: 0 0 var(--sp-5, 24px);
padding: var(--sp-4, 16px) var(--sp-5, 24px);
border-radius: var(--r-md, 14px);
background: var(--surface-2, #f6f7fb);
border-left: 3px solid var(--brand-slate, #4f5a75);
}
.up-blog-nota__rotulo {
display: block;
font-family: var(--font-display, 'Montserrat', sans-serif);
font-size: var(--fs-xs, .78rem);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--brand-slate, #4f5a75);
margin-bottom: var(--sp-1, 4px);
}
.up-blog-nota p {
margin: 0;
}
/* "O que nao fazer" com o mesmo desenho de "o que fazer" e pior que sem
desenho nenhum. */
.up-blog-nota--evitar {
background: var(--warn-bg, #fdf2df);
border-left-color: var(--warn, #d98a1f);
}
.up-blog-nota--evitar .up-blog-nota__rotulo {
color: var(--warn, #d98a1f);
}
/* --------------------------------------------------------------------------
8. Listagem
-------------------------------------------------------------------------- */
.up-blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--sp-5, 24px);
}
.up-blog-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-3, 12px);
padding: var(--sp-6, 32px);
border: 1px solid var(--line, #e7e9f1);
border-radius: var(--r-lg, 20px);
background: var(--surface, #fff);
box-shadow: var(--sh-sm, 0 1px 2px rgba(28, 32, 48, .06), 0 2px 8px rgba(28, 32, 48, .05));
transition: transform .2s ease, box-shadow .2s ease;
}
.up-blog-card:hover {
transform: translateY(-4px);
box-shadow: var(--sh-md, 0 6px 20px -8px rgba(28, 32, 48, .15));
}
.up-blog-card h2 {
font-size: 1.15rem;
font-weight: 700;
line-height: 1.35;
margin: 0;
}
.up-blog-card h2 a {
color: var(--ink, #1c2030);
text-decoration: none;
}
.up-blog-card:hover h2 a {
color: var(--brand-wine, #8a4f66);
}
.up-blog-card__resumo {
flex: 1;
font-size: var(--fs-sm, .9rem);
margin: 0;
}
.up-blog-card__data {
font-size: var(--fs-xs, .78rem);
color: var(--muted, #8990a3);
}
.up-blog-vazio {
padding: var(--sp-7, 48px) var(--sp-5, 24px);
border: 1px dashed var(--line, #e7e9f1);
border-radius: var(--r-md, 14px);
text-align: center;
color: var(--muted, #8990a3);
}
/* --------------------------------------------------------------------------
9. Paginacao
-------------------------------------------------------------------------- */
.up-blog-pag {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2, 8px);
justify-content: center;
margin-top: var(--sp-7, 48px);
}
.up-blog-pag .page-numbers {
display: inline-block;
min-width: 40px;
padding: 8px 12px;
border: 1px solid var(--line, #e7e9f1);
border-radius: var(--r-sm, 8px);
background: var(--surface, #fff);
color: var(--body, #565d70);
text-align: center;
text-decoration: none;
font-size: var(--fs-sm, .9rem);
}
.up-blog-pag .page-numbers:hover {
border-color: var(--brand-wine, #8a4f66);
color: var(--brand-wine, #8a4f66);
}
.up-blog-pag .page-numbers.current {
border-color: var(--brand-wine, #8a4f66);
background: var(--brand-wine, #8a4f66);
color: #fff;
font-weight: 600;
}
/* --------------------------------------------------------------------------
10. Responsivo
O DESIGN-SYSTEM manda medir a 320px antes de fechar. Abaixo de 980px a
lateral deixa de ser coluna e vira um bloco acima do texto: sumario preso
na lateral de uma tela estreita rouba a largura que o texto precisa.
-------------------------------------------------------------------------- */
@media (max-width: 980px) {
.up-blog-layout {
grid-template-columns: minmax(0, 1fr);
gap: var(--sp-6, 32px);
}
.up-blog-lateral {
position: static;
padding: var(--sp-4, 16px) var(--sp-5, 24px);
border: 1px solid var(--line, #e7e9f1);
border-radius: var(--r-md, 14px);
background: var(--surface, #fff);
}
.up-blog-corpo {
max-width: none;
}
}
@media (max-width: 720px) {
.up-blog-hero {
padding: 36px 0 32px;
}
.up-blog-layout {
padding: var(--sp-6, 32px) 0 var(--sp-8, 64px);
}
.up-blog-corpo {
font-size: 1rem;
}
.up-blog-corpo > h2 {
margin-top: var(--sp-7, 48px);
}
.up-blog-card {
padding: var(--sp-5, 24px);
}
.up-blog-corpo pre {
padding: var(--sp-3, 12px) var(--sp-4, 16px);
font-size: .85rem;
}
}
@media (prefers-reduced-motion: reduce) {
.up-blog-card,
.up-blog-chip,
.up-blog-sumario a,
.up-blog-corpo a {
transition: none;
}
.up-blog-card:hover {
transform: none;
}
}