.u-blog__cab {
background: linear-gradient(180deg, var(--nevoa) 0%, var(--branco) 100%);
padding: 66px 0 44px;
border-bottom: 1px solid var(--linha);
margin-bottom: 52px;
}
.u-blog__cab h1 {
font-size: clamp(32px, 5vw, 50px);
margin-top: 14px;
}
.u-blog__desc {
font-size: clamp(16.5px, 2vw, 19px);
line-height: 1.55;
color: var(--corpo);
margin-top: 18px;
max-width: 58ch;
} .u-filtro {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 28px;
}
.u-filtro__item {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.06em;
padding: 9px 15px;
border: 1px solid var(--linha);
border-radius: 100px;
background: var(--branco);
color: var(--corpo);
transition: border-color 0.15s ease, color 0.15s ease;
}
.u-filtro__item:hover {
border-color: var(--azul);
color: var(--azul);
}
.u-filtro__item.esta-ativo {
background: var(--noite);
border-color: var(--noite);
color: var(--branco);
} .u-destaque {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 0;
border: 1px solid var(--linha);
border-radius: var(--r-g);
overflow: hidden;
background: var(--branco);
margin-bottom: 44px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.u-destaque:hover {
transform: translateY(-3px);
box-shadow: var(--sombra);
}
.u-destaque__img {
aspect-ratio: 16 / 10;
background: var(--nevoa);
overflow: hidden;
}
.u-destaque__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.u-destaque__txt {
padding: 40px 38px;
display: flex;
flex-direction: column;
justify-content: center;
}
.u-destaque__txt h2 {
font-size: clamp(25px, 3.2vw, 34px);
margin-top: 12px;
line-height: 1.1;
}
.u-destaque__resumo {
font-size: 16.5px;
line-height: 1.6;
color: var(--corpo-2);
margin-top: 14px;
}
.u-destaque__seta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 24px;
font-family: var(--display);
font-weight: 800;
font-size: 15px;
color: var(--azul);
} .u-post h2 a:hover,
.u-post h3 a:hover {
color: var(--azul);
}
.u-post h3 {
font-size: 18px;
margin-top: 10px;
line-height: 1.2;
}
.u-vazio {
text-align: center;
padding: 40px 0 70px;
max-width: 56ch;
margin-inline: auto;
}
.u-vazio h2 {
font-size: 28px;
}
.u-vazio p {
margin-top: 14px;
font-size: 17px;
line-height: 1.6;
} .u-artigo__cab {
padding: 46px 0 30px;
}
.u-artigo__cab h1 {
font-size: clamp(31px, 4.6vw, 50px);
max-width: 20ch;
margin-top: 18px;
}
.u-migalhas {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 9px;
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: 0.06em;
color: var(--apagado);
}
.u-migalhas a:hover {
color: var(--azul);
}
.u-artigo__meta {
display: flex;
flex-wrap: wrap;
gap: 9px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.05em;
color: var(--apagado);
margin-top: 22px;
}
.u-artigo__capa {
margin: 0 0 44px;
}
.u-artigo__capa img {
width: 100%;
max-height: 460px;
object-fit: cover;
border-radius: var(--r-g);
} .u-artigo__corpo {
max-width: 700px;
margin-inline: auto;
padding-bottom: 20px;
}
.u-conteudo--artigo {
font-size: 18.5px;
line-height: 1.75;
}
.u-conteudo--artigo h2 {
font-size: clamp(25px, 3.2vw, 32px);
margin-top: 2em;
scroll-margin-top: 100px;
}
.u-conteudo--artigo h3 {
font-size: 22px;
margin-top: 1.7em;
}
.u-conteudo--artigo blockquote {
border-left: 3px solid var(--azul);
padding: 4px 0 4px 24px;
margin: 1.6em 0;
font-size: 20px;
line-height: 1.55;
color: var(--tinta);
font-weight: 500;
}
.u-conteudo--artigo img,
.u-conteudo--artigo figure img {
border-radius: var(--r);
}
.u-conteudo--artigo figcaption {
font-size: 13.5px;
color: var(--apagado);
margin-top: 8px;
text-align: center;
} .u-indice {
background: var(--nevoa);
border-radius: var(--r);
padding: 22px 26px;
margin-bottom: 40px;
}
.u-indice__rot {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--apagado);
margin-bottom: 12px;
}
.u-indice ol {
counter-reset: idx;
display: flex;
flex-direction: column;
gap: 8px;
}
.u-indice li {
counter-increment: idx;
display: flex;
gap: 11px;
font-size: 15.5px;
line-height: 1.45;
}
.u-indice li::before {
content: counter(idx, decimal-leading-zero);
font-family: var(--mono);
font-size: 11.5px;
color: var(--azul);
padding-top: 3px;
flex: none;
}
.u-indice a {
color: var(--corpo);
}
.u-indice a:hover {
color: var(--azul);
text-decoration: underline;
} .u-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 44px;
padding-top: 26px;
border-top: 1px solid var(--linha);
}
.u-tags a {
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: 0.05em;
padding: 7px 13px;
border: 1px solid var(--linha);
border-radius: 100px;
color: var(--corpo-2);
}
.u-tags a:hover {
border-color: var(--azul);
color: var(--azul);
} .u-artigo__cta {
margin-top: 48px;
background: linear-gradient(135deg, var(--noite) 0%, var(--noite-3) 100%);
border-radius: var(--r-g);
padding: 40px 38px;
color: var(--sobre-noite);
position: relative;
overflow: hidden;
}
.u-artigo__cta::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.06) 1px, transparent 0);
background-size: 26px 26px;
pointer-events: none;
}
.u-artigo__cta > * {
position: relative;
}
.u-artigo__cta h2 {
color: var(--branco);
font-size: clamp(23px, 3vw, 30px);
margin-top: 12px;
}
.u-artigo__cta p {
font-size: 16.5px;
line-height: 1.55;
margin-top: 12px;
max-width: 52ch;
}
.u-artigo__cta-acoes {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
} .u-artigo__cta--vertical {
border-left: 4px solid var(--merito);
} .u-relacionados {
margin-top: 70px;
}
.u-relacionados .u-lista {
margin-top: 24px;
} @media (max-width: 900px) {
.u-destaque {
grid-template-columns: minmax(0, 1fr);
}
.u-destaque__txt {
padding: 30px 26px 34px;
}
}
@media (max-width: 720px) {
.u-blog__cab {
padding: 44px 0 34px;
margin-bottom: 36px;
}
.u-conteudo--artigo {
font-size: 17px;
}
.u-artigo__capa img {
max-height: 260px;
}
.u-artigo__cta {
padding: 28px 22px;
}
.u-artigo__cta-acoes .u-btn {
width: 100%;
}
.u-indice {
padding: 18px 20px;
}
}