/*
* LIEG — blog (Notícias) styles
*
* Loaded on the blog index (is_home()) and on singular posts
* (is_singular('post')) so the listing and the single share the
* same visual vocabulary: chronological feed, no card chrome,
* hairline dividers between entries, brand-soft accent for meta.
*
* The single-post page adds a right-hand rail with recent posts,
* archives and categories. On narrow viewports the rail stacks
* below the article body.
*
* The blog header uses a distinct treatment from the CPT archive
* header: a deep gradient ribbon evokes the institutional / editorial
* register of a newsroom feed, while the CPT archives stay on the
* softer `bg-alt` wash that frames their card catalogue.
*/
/* ── Blog header (restrained editorial treatment) ───────
*
* The blog header must look distinct from the CPT archive
* headers (which sit on a soft lavender wash) but stay in the
* same restrained register as the rest of the site — no heavy
* gradients, no high-contrast text fill. We achieve distinction
* through two light touches:
*
* 1. A soft lavender wash + a thin vertical accent rail on the
* left edge (mirrors the institutional ribbon but as a
* hairline), plus a thin bottom border gradient.
* 2. A small "live" eyebrow chip with a pulsing dot — like a
* newsroom "publicação" indicator — that says "this is an
* editorial feed" without shouting it.
*
* Title and lede stay on light surfaces and use the same
* brand-deep / muted-text palette as every other page.
*/
.blog-header {
background: var(--color-bg);
color: var(--color-text);
padding-block: var(--space-7) var(--space-6);
margin-bottom: var(--space-6);
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Subtle deep-purple veil on the upper-left corner — gives the
* banner a hint of brand presence without darkening the page.
* The veil sits behind the inner via z-index and is clipped to
* the header. Tinted from color-brand-deep (the institutional
* violet) at low opacity so it reads as "deep purple", not
* lavender. */
.blog-header::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 0% 0%,
rgba(58, 27, 90, 0.08) 0%,
rgba(58, 27, 90, 0.04) 25%,
transparent 60%);
pointer-events: none;
z-index: -1;
}
/* Left-edge accent rail — realised as an inset box-shadow so
* we don't need a child element. 4px wide, deep purple, full-
* height. Restrained by a low opacity so it reads as a hairline
* accent, not a bar. */
.blog-header {
box-shadow: inset 4px 0 0 rgba(58, 27, 90, 0.55);
}
.blog-header__divider {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--color-brand-deep) 50%,
transparent 100%);
opacity: 0.25;
pointer-events: none;
}
.blog-header__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
position: relative;
z-index: 1;
}
.blog-header__title {
margin: 0;
color: var(--color-brand-deep);
font-family: var(--font-display);
font-size: clamp(2.25rem, 4vw + 0.5rem, 3.5rem);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
}
.blog-header__lede {
margin: 0;
max-width: 64ch;
color: var(--color-text-muted);
font-size: var(--font-size-md);
line-height: var(--line-height-normal);
}
.blog-header__lede p {
margin: 0;
}
.blog-header__toggle {
margin-top: var(--space-3);
padding: 6px 14px;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-brand-primary);
background: transparent;
border: 1px solid rgba(146, 56, 138, 0.25);
border-radius: var(--radius-pill);
cursor: pointer;
transition:
background var(--duration-fast) var(--ease-standard),
color var(--duration-fast) var(--ease-standard);
}
.blog-header__toggle:hover,
.blog-header__toggle:focus-visible {
background: var(--color-brand-primary);
color: var(--color-text-inverse);
border-color: var(--color-brand-primary);
}
.blog-header__toggle-less {
display: none;
}
.blog-header__lede[data-collapsed="false"] .blog-header__toggle-more {
display: none;
}
.blog-header__lede[data-collapsed="false"] .blog-header__toggle-less {
display: inline;
}
.blog-header__lede[data-collapsed="true"] .blog-header__lede-inner {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: 6em;
}
/* Decorative timeline rail on the right of the header — a thin
* dotted vertical line in deep purple that signals "chronological
* feed below". Lives in the header so it scrolls away with the
* rest of the banner. Hidden on narrow viewports. */
.blog-header__rail {
position: absolute;
right: var(--space-6);
top: var(--space-5);
bottom: var(--space-5);
width: 1px;
background-image: linear-gradient(
to bottom,
rgba(58, 27, 90, 0.45) 0,
rgba(58, 27, 90, 0.45) 6px,
transparent 6px,
transparent 12px
);
background-size: 1px 12px;
background-repeat: repeat-y;
display: none;
}
@media (min-width: 1024px) {
.blog-header__rail {
display: block;
}
}
.blog-header__rail::after {
content: '';
position: absolute;
top: 0;
left: -4px;
width: 9px;
height: 9px;
background: var(--color-brand-deep);
border-radius: var(--radius-pill);
box-shadow: 0 0 0 4px rgba(58, 27, 90, 0.18);
}
/* ── Blog filter bar (search-only) ──────────────────────
*
* The blog reuses `.archive-filters` for its visual chrome but
* has fewer inputs (no taxonomy select). Reinforce the layout
* here so the form lays out correctly even if archive.css fails
* to load for any reason.
*/
.blog-filters {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-bottom: var(--space-6);
padding: var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.blog-filters__row {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
align-items: center;
}
@media ( min-width: 768px ) {
.blog-filters__row {
grid-template-columns: minmax(0, 1fr) auto auto;
}
}
.blog-filters__field {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
min-height: 48px;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text-muted);
transition:
border-color var(--duration-fast) var(--ease-standard),
background var(--duration-fast) var(--ease-standard);
}
.blog-filters__field:focus-within {
border-color: var(--color-brand-primary);
background: var(--color-bg);
}
.blog-filters__field svg {
flex-shrink: 0;
color: var(--color-text-muted);
}
.blog-filters__input {
border: 0;
background: transparent;
font-size: var(--font-size-base);
color: var(--color-text);
width: 100%;
min-width: 0;
padding: 0;
margin: 0;
line-height: 1.5;
}
.blog-filters__input:focus {
outline: 0;
}
.blog-filters__submit {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-2) var(--space-5);
background: var(--color-brand-primary);
color: var(--color-text-inverse);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
letter-spacing: 0.04em;
transition: background var(--duration-fast) var(--ease-standard);
}
.blog-filters__submit:hover,
.blog-filters__submit:focus-visible {
background: var(--color-brand-primary-dark);
}
.blog-filters__clear {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-2) var(--space-4);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
text-decoration: none;
border-radius: var(--radius-md);
border: 1px solid transparent;
transition:
color var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard);
}
.blog-filters__clear:hover,
.blog-filters__clear:focus-visible {
color: var(--color-brand-primary);
border-color: var(--color-border-strong);
}
.blog-filters__counter {
margin: 0;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.blog-filters__counter strong {
color: var(--color-brand-deep);
font-weight: var(--font-weight-bold);
}
/* ── Blog list (no cards) ─────────────────────────────── */
.blog-list {
list-style: none;
margin: 0 0 var(--space-7);
padding: 0;
display: flex;
flex-direction: column;
}
.blog-list__item + .blog-list__item {
margin-top: 0;
}
/* ── Blog entry: horizontal row (image left, body right) ─
*
* The chronological blog intentionally avoids the CPT archive's
* card chrome. Instead, each entry is a clean two-column row:
* the featured image (or a brand-tinted placeholder) sits on
* the left at a fixed visual weight, and the title / meta /
* excerpt / CTA stack on the right. On mobile they collapse
* into a single column with the image on top.
*
* We use flex (not grid) because the image column needs to
* shrink-to-fit the media's intrinsic ratio while the body
* column takes the remaining space — same pattern as the
* CPT archive card's media + body, but without the card.
*/
.blog-entry {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding-block: var(--space-5);
border-top: 1px solid var(--color-border);
transition: background var(--duration-fast) var(--ease-standard);
}
@media (min-width: 768px) {
.blog-entry {
flex-direction: row;
gap: var(--space-6);
align-items: stretch;
}
}
.blog-list__item:first-child .blog-entry {
border-top: 0;
padding-top: 0;
}
.blog-list__item:last-child .blog-entry {
padding-bottom: 0;
}
.blog-entry:hover {
background: var(--color-bg-alt);
}
/* The media link wraps the image so the whole thumb becomes a
* single clickable surface (a11y — duplicating the link under
* the title would create ambiguous focus targets). tabindex="-1"
* on the link and aria-hidden on the image keep screen readers
* focused on the canonical title link. */
.blog-entry__media-link {
display: flex;
text-decoration: none;
color: inherit;
flex-shrink: 0;
overflow: hidden;
border-radius: var(--radius-md);
transition: transform var(--duration-base) var(--ease-standard);
}
@media (max-width: 767px) {
.blog-entry__media-link {
width: 100%;
}
}
.blog-entry:hover .blog-entry__media-link,
.blog-entry:focus-within .blog-entry__media-link {
transform: translateY(-1px);
}
.blog-entry__media {
background:
linear-gradient(135deg,
var(--color-brand-violet) 0%,
var(--color-brand-primary) 55%,
var(--color-brand-accent) 100%);
color: var(--color-text-inverse);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 16 / 10;
}
.blog-entry__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--duration-slow) var(--ease-emphasized);
}
.blog-entry:hover .blog-entry__media img {
transform: scale(1.03);
}
@media (min-width: 768px) {
.blog-entry__media-link {
width: 260px;
}
.blog-entry__media {
aspect-ratio: 4 / 3;
height: 100%;
}
}
@media (min-width: 1024px) {
.blog-entry__media-link {
width: 320px;
}
}
/* Placeholder (posts without a featured image): drops back to
* the brand palette with a soft image icon, so the grid
* rhythm stays consistent. */
.blog-entry__media--placeholder {
color: rgba(255, 255, 255, 0.85);
}
/* Body column. min-width: 0 lets the flex item shrink below
* its intrinsic content size, which matters for long titles
* that would otherwise overflow. */
.blog-entry__body {
display: flex;
flex-direction: column;
gap: var(--space-2);
flex: 1;
min-width: 0;
padding-block: var(--space-2);
}
@media (max-width: 767px) {
.blog-entry__body {
padding-block: 0;
}
}
.blog-entry__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
letter-spacing: 0.01em;
}
.blog-entry__date {
font-variant-numeric: tabular-nums;
}
.blog-entry__sep {
color: var(--color-border-strong);
}
.blog-entry__cat {
color: var(--color-brand-primary);
text-decoration: none;
font-weight: var(--font-weight-medium);
border-bottom: 1px solid transparent;
transition: border-color var(--duration-fast) var(--ease-standard),
color var(--duration-fast) var(--ease-standard);
}
.blog-entry__cat:hover,
.blog-entry__cat:focus-visible {
color: var(--color-brand-primary-dark);
border-color: var(--color-brand-primary);
}
.blog-entry__title {
margin: 0 0 var(--space-2);
font-size: clamp(1.375rem, 1.5vw + 0.85rem, 1.75rem);
line-height: var(--line-height-snug);
font-weight: var(--font-weight-bold);
color: var(--color-brand-deep);
letter-spacing: var(--letter-spacing-tight);
}
.blog-entry__title a {
color: inherit;
text-decoration: none;
background-image: linear-gradient(var(--color-brand-primary), var(--color-brand-primary));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0 2px;
transition: background-size var(--duration-base) var(--ease-standard),
color var(--duration-fast) var(--ease-standard);
}
.blog-entry__title a:hover,
.blog-entry__title a:focus-visible {
color: var(--color-brand-primary);
background-size: 100% 2px;
}
.blog-entry__excerpt {
margin: 0 0 var(--space-3);
color: var(--color-text-muted);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
max-width: 64ch;
}
.blog-entry__more {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
color: var(--color-brand-primary);
text-decoration: none;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: color var(--duration-fast) var(--ease-standard),
gap var(--duration-fast) var(--ease-standard);
}
.blog-entry__more:hover,
.blog-entry__more:focus-visible {
color: var(--color-brand-primary-dark);
gap: var(--space-3);
}
.blog-entry__more svg {
transition: transform var(--duration-fast) var(--ease-standard);
}
.blog-entry__more:hover svg,
.blog-entry__more:focus-visible svg {
transform: translateX(2px);
}
/* The blog uses its own .blog-filters chrome (defined above).
* No further archive-filters overrides are needed. */
/* ── Single post layout (article body + right rail) ──────
*
* The post single splits the layout so the .single-header sits
* edge-to-edge above this grid, full width. The grid below holds
* just the article body/footer (left column) and the rail (right
* column) — both share the page width.
*/
.single-with-rail {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-7);
margin-top: var(--space-7);
margin-bottom: var(--space-9);
}
@media (min-width: 1024px) {
.single-with-rail {
grid-template-columns: minmax(0, 1fr) 300px;
gap: var(--space-7);
align-items: start;
}
}
@media (min-width: 1280px) {
.single-with-rail {
grid-template-columns: minmax(0, 1fr) 340px;
gap: var(--space-8);
}
}
/* The slim body-only article wrapper inside the grid: just
* holds .single-content + .single-footer. min-width:0 lets the
* grid item shrink below its intrinsic content size, which
* matters for long titles / paragraphs that would otherwise
* overflow. */
.single-with-rail > .single-layout--body-only {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-6);
}
/* Reading-column constraint for the article body. Keeps the
* prose at the design-system measure (var(--measure-prose))
* so line length stays comfortable. */
.single-with-rail .single-content {
max-width: var(--measure-prose);
}
.single-with-rail .single-footer {
max-width: var(--measure-prose);
}
/* The right rail: pinned visually as a column on desktop, and
* stacked under the article on mobile. The rail is a sibling of
* the .single-layout article; both live inside .single-with-rail. */
.blog-rail {
display: flex;
flex-direction: column;
gap: var(--space-5);
min-width: 0;
}
@media (min-width: 1024px) {
.blog-rail {
position: sticky;
top: calc(var(--space-7) + 16px);
align-self: start;
max-height: calc(100vh - var(--space-8));
overflow-y: auto;
padding-right: var(--space-2);
/* Hide scrollbar visually while still allowing scroll
* for long rails. */
scrollbar-width: thin;
scrollbar-color: var(--color-border-strong) transparent;
}
.blog-rail::-webkit-scrollbar {
width: 6px;
}
.blog-rail::-webkit-scrollbar-thumb {
background: var(--color-border-strong);
border-radius: var(--radius-pill);
}
.blog-rail::-webkit-scrollbar-track {
background: transparent;
}
}
/* Each rail block is a self-contained panel. */
.blog-rail__block {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.blog-rail__title {
margin: 0;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--color-brand-primary);
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.blog-rail__title::before {
content: '';
display: inline-block;
width: 18px;
height: 1px;
background: var(--color-brand-primary);
}
/* Recent-posts list: dense, time + title + tiny eyebrow, no cards. */
.blog-rail__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.blog-rail__list li + li {
padding-top: var(--space-4);
border-top: 1px dashed var(--color-border);
}
.blog-rail__item-date {
display: block;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
letter-spacing: 0.04em;
margin-bottom: 4px;
font-variant-numeric: tabular-nums;
}
.blog-rail__item-title {
margin: 0;
font-size: var(--font-size-sm);
line-height: var(--line-height-snug);
font-weight: var(--font-weight-medium);
}
.blog-rail__item-title a {
color: var(--color-brand-deep);
text-decoration: none;
background-image: linear-gradient(var(--color-brand-primary), var(--color-brand-primary));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0 1px;
transition: background-size var(--duration-base) var(--ease-standard),
color var(--duration-fast) var(--ease-standard);
}
.blog-rail__item-title a:hover,
.blog-rail__item-title a:focus-visible {
color: var(--color-brand-primary);
background-size: 100% 1px;
}
.blog-rail__item--current .blog-rail__item-title a {
color: var(--color-brand-primary);
font-weight: var(--font-weight-bold);
}
.blog-rail__item--current .blog-rail__item-title a::after {
content: ' (atual)';
font-size: 0.8em;
color: var(--color-text-muted);
font-weight: var(--font-weight-regular);
}
/* The "Publicações recentes" block is the only rail block now.
* When other blocks are added later (archive, categories, …)
* they should opt into the panel treatment via the shared
* .blog-rail__block selector above. */
.blog-rail__empty {
margin: 0;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.blog-rail__more {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-brand-primary);
text-decoration: none;
margin-top: var(--space-1);
}
.blog-rail__more:hover,
.blog-rail__more:focus-visible {
color: var(--color-brand-primary-dark);
}
/* ── Search results page ────────────────────────────────
*
* The search results page uses the same .blog-header treatment
* (so it visually belongs to the editorial feed) but the title
* shows the query term in a soft pill and the lede reports the
* total result count instead of a custom description.
*
* Search-term pill: the pill sits INLINE inside the , on
* the same line as the "Resultados para:" label, at the
* heading's own font-size (no shrink). This is what users
* expect when they see a quoted query in a result page — it
* reads as part of the title, not as a sub-label below it.
*
* Visual overflow is handled at the data layer: search.php
* truncates any term > 40 characters at render time and
* appends an ellipsis, so even a 500-character URL-encoded
* search string fits on one line at the heading's full size.
* The original full term stays in the DOM as a screen-reader-
* only span so assistive tech still sees the uncut query, and
* the search