.
========================================================= */
/* Break out of .section's max-width + side padding so the slider
spans the full viewport width instead of being boxed in like
the rest of the section — .section-header stays constrained
below via its own side padding. */
.section--timeline {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.section--timeline .section-header {
padding-left: 32px;
padding-right: 32px;
}
@media (max-width: 767px) {
.section--timeline .section-header {
padding-left: 16px;
padding-right: 16px;
}
}
.section--timeline .section-subtitle {
max-width: 420px;
}
/* SLIDER — track scrolls edge-to-edge; arrows overlaid on top of
it (not taking up layout space) in the same left/right spots
they held before. */
.timeline-slider {
position: relative;
}
/* z-index:2, above .timeline-node's z-index:1 — with no stacking
context in between, equal values fell back to DOM order, and the
node (later in the DOM) painted over the arrows. */
.timeline-slider-arrows {
position: absolute;
top: 49px;
left: 0;
right: 0;
z-index: 2;
display: flex;
justify-content: space-between;
padding: 0 16px;
pointer-events: none;
}
.timeline-slider-arrow {
pointer-events: auto;
flex-shrink: 0;
background: var(--color-black);
color: var(--color-white);
}
.timeline-slider-arrow--prev svg {
transform: rotate(180deg);
}
.timeline-track {
position: relative;
display: flex;
gap: 0;
overflow-x: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0px 8px 8px;
}
.timeline-track::-webkit-scrollbar {
display: none;
}
/* ENTRY */
.timeline-entry {
position: relative;
flex: 0 0 220px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: opacity 0.2s ease;
}
/* No hover effect on the card itself — only .timeline-link (below)
gets one. transform:none still cancels the global .card:hover
lift (see the shared BASE CARD OVERRIDES rule). */
.timeline-entry:hover {
transform: none;
}
/* Entry has no external link, but its body's first card is an image/
video/gallery/file — main.js's initTimelineMediaLightbox makes the
whole entry clickable to open it. */
.timeline-entry.js-timeline-media-clickable {
cursor: pointer;
}
/* Minimal modal for a video/embed opened from the timeline (or
anywhere else that reuses openMediaModal) — PhotoSwipe (used for
images/galleries) has no video support. */
.media-modal-overlay {
position: fixed;
inset: 0;
z-index: 300;
display: flex;
align-items: center;
justify-content: center;
background: rgb(0 0 0 / 0.85);
padding: 40px;
cursor: zoom-out;
}
.media-modal-inner {
max-width: 100%;
max-height: 100%;
}
.media-modal-inner video,
.media-modal-inner iframe {
display: block;
max-width: 90vw;
max-height: 85vh;
width: 800px;
aspect-ratio: 16 / 9;
border: 0;
cursor: auto;
}
.timeline-date {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 16px;
margin-bottom: 0px;
}
/* Stacked: year small on top, MÊS.DIA large below, same style —
see the HTML card format documented in timeline.hbs. */
.timeline-date-year {
font-family: "Anton", sans-serif;
font-size: 1.4rem;
line-height: 1;
letter-spacing: -0.02em;
color: var(--color-dark-red, #a00);
}
/* min-height keeps the card's height stable when a post has no
{{custom_excerpt}} to fill this. */
.timeline-date-day {
font-family: "Anton", sans-serif;
font-size: 2.4rem;
font-weight: 400;
line-height: 1;
letter-spacing: -0.02em;
color: var(--color-dark-red, #a00);
margin-top: 4px;
min-height: 1.6em;
}
/* The line lives inside the entry, centered on the node — so it's
always exactly aligned with it, instead of a separate absolute
line on .timeline-track guessing the node's vertical offset
(which broke once the date became two lines instead of one). */
.timeline-node-wrap {
position: relative;
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.timeline-node-wrap::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: var(--color-black);
transform: translateY(-50%);
}
.timeline-node {
position: relative;
z-index: 1;
width: 20px;
height: 20px;
flex-shrink: 0;
border-radius: 50%;
background: var(--color-white);
border: 3px solid var(--color-black);
}
.timeline-title {
margin: 0 0 8px;
padding: 0 16px;
font-family: "Anton", serif;
font-weight: 400;
font-size: 2rem;
line-height: 1.25;
text-wrap: balance;
}
.timeline-text {
margin: 0;
padding: 0 16px;
font-family: "Roboto Serif", serif;
font-size: 1.3rem;
line-height: 1.5;
color: var(--color-secondary-text, #555);
}
/* white-space:nowrap keeps the arrow icon from wrapping onto its own
line below "SABER MAIS". */
.timeline-link {
display: inline-flex;
align-items: center;
margin-top: 12px;
padding: 0 16px;
font-family: "Bebas Neue", sans-serif;
font-size: 1.4rem;
letter-spacing: 0.02em;
color: inherit;
text-decoration: none;
white-space: nowrap;
}
.timeline-link:hover {
opacity: 0.65;
}
/* Forces the [hidden] attribute to win over display:inline-block
above, so the link stays hidden until main.js reveals it. */
.timeline-link[hidden] {
display: none;
}
/* Centered via the parent's align-items:center — flex-shrink:0 just
keeps the icon from being squeezed by the text. */
.timeline-link svg {
width: 14px;
height: 14px;
margin-left: 2px;
flex-shrink: 0;
position: relative;
top: -1px;
}
/* =========================================================
ARTIGO
========================================================= */
.artigo-title {
font-family: "Anton", sans-serif;
font-weight: 400;
text-wrap: balance;
}
/* =========================================================
Banner Maio
========================================================= */
/* Desktop */
.banner-maio {
display: flex;
align-items: center;
padding: 12px 0px 10px 0px;
align-items: center;
gap: 32px;
max-width: 800px;
}
.gh-content > .banner-maio {
margin-top: 48px;
margin-bottom: 32px;
}
.banner-maio-title {
font-family: "Anton", sans-serif !important;
font-size: 44px !important;
font-style: normal;
font-weight: 400 !important;
line-height: 1;
color: var(--color-dark-yellow) !important;
text-transform: uppercase;
text-wrap: balance;
}
.banner-maio-text {
font-family: "Roboto Condensed", sans-serif !important;
font-size: 16px;
font-weight: 500;
line-height: 1.1;
color: inherit;
text-transform: uppercase;
text-wrap: balance;
flex: 1;
}
.banner-maio__button {
font-family: "Roboto Condensed", sans-serif !important;
font-weight: 700;
text-transform: uppercase;
background: var(--color-yellow);
color: var(--color-black) !important;
text-decoration: none !important;
padding: 10px 24px;
border-radius: 0;
text-decoration: none;
flex-shrink: 0;
}
/* Medium screens */
@media (max-width: 800px) {
.banner-maio-text {
font-size: 16px;
}
}
/* Small screens */
@media (max-width: 700px) {
.banner-maio {
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
}
.banner-maio__button {
text-align: center;
}
}
/* =========================================================
Banner Redes — "Segue-nos" + social icon links, a home
section (see layout-router.hbs, #layout-banner-redes).
========================================================= */
/* Centered flex row layout, shared with .banner-luta and
.banner-apoia-nos (see their own sections below) — each banner's
own content differs, but they lay out the same way. */
.banner-redes,
.banner-luta,
.banner-apoia-nos {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
}
.banner-redes-title {
font-family: "Roboto Condensed", sans-serif;
font-size: 22px;
font-weight: 700;
}
.banner-redes-links {
display: flex;
align-items: center;
gap: 12px;
}
.banner-redes-link {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--color-category);
}
/* color, not fill — covers both how facebook.hbs's svg and how
instagram.hbs/youtube.hbs's svgs resolve currentColor. */
.banner-redes-link svg {
width: 22px;
height: 22px;
color: var(--color-white);
}
.banner-redes-link:hover {
opacity: 0.8;
}
@media (max-width: 600px) {
.banner-redes {
flex-direction: column;
gap: 16px;
}
}
/* =========================================================
Banner Luta — "Põe a tua luta no maio!" call for editors to
submit a struggle/action, a home section (see layout-router.hbs,
#layout-banner-luta). Base layout shared with .banner-redes —
see Banner Redes section above.
========================================================= */
.banner-luta-title {
font-family: "Roboto Condensed", sans-serif;
font-size: 22px;
font-weight: 700;
flex-shrink: 0;
}
.banner-luta-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 64px;
height: 64px;
background: var(--color-category);
}
.banner-luta-icon svg {
width: 28px;
height: 28px;
stroke: var(--color-white);
}
.banner-luta-text {
font-family: "Roboto Condensed", sans-serif;
font-size: 16px;
line-height: 1.5;
}
/* balance needs to apply per sentence (each its own , see
banner-luta.hbs) — on the parent div as a whole, balance tried to
even out line widths across all 3 sentences at once instead of
each one independently, so a sentence that actually wraps onto 2
lines wasn't reliably balanced. */
.banner-luta-text p {
margin: 0;
text-wrap: balance;
}
.banner-luta-text a {
color: var(--color-category);
font-weight: 700;
text-decoration: none;
}
.banner-luta-text a:hover {
text-decoration: underline;
}
@media (max-width: 820px) {
.banner-luta {
flex-direction: column;
text-align: center;
gap: 16px;
}
}
/* =========================================================
Banner Apoia-nos — "Nunca os trabalhadores..." + APOIA-NOS
button, a home section (see layout-router.hbs,
#layout-banner-apoia-nos). Base layout shared with
.banner-redes — see Banner Redes section above.
========================================================= */
.banner-apoia-nos-text {
font-family: "Roboto Condensed", sans-serif;
font-size: 20px;
font-weight: 700;
text-wrap: balance;
}
@media (max-width: 700px) {
.banner-apoia-nos-text {
flex: none;
width: fit-content;
max-width: 230px;
font-size: 16px;
line-height: 1.2;
text-align: right;
}
}
.banner-apoia-nos-button {
flex-shrink: 0;
padding: 12px 20px;
background: var(--color-yellow);
color: var(--color-black);
font-family: "Roboto Condensed", sans-serif;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
border-radius: 0;
text-decoration: none;
white-space: nowrap;
}
.banner-apoia-nos-button:hover {
opacity: 0.8;
}
@media (max-width: 400px) {
.banner-apoia-nos {
flex-direction: column;
gap: 16px;
}
.banner-apoia-nos-text {
text-align: center;
}
}
/* No divider before a banner section (its own top line) or
after it (the top line belongs to whichever section comes
next, so hide that one specifically — not every section's). */
.section--banner-apoia-nos::before,
.section--banner-redes::before,
.section--banner-luta::before,
.section--banner-apoia-nos + .section::before,
.section--banner-redes + .section::before,
.section--banner-luta + .section::before {
display: none;
}
/* Less vertical breathing room than a normal section (120px/
24px) — banners are a single thin row, not a card grid. */
.section--banner-apoia-nos,
.section--banner-redes,
.section--banner-luta {
padding-top: 56px;
padding-bottom: 56px;
}
@media (max-width: 767px) {
.section--banner-apoia-nos,
.section--banner-redes,
.section--banner-luta {
padding-top: 20px;
padding-bottom: 20px;
}
}
/* Apoia-nos text often wraps to 2 lines on narrow screens — more
room than the other banners get at this size. */
@media (max-width: 700px) {
.section--banner-apoia-nos {
padding-top: 32px;
padding-bottom: 32px;
}
}
/* =========================================================
POST TAGS
========================================================= */
.post-tag {
font-family: "Roboto Serif", serif;
font-style: normal;
margin-bottom: 12px;
font-size: 14px;
font-weight: 500;
letter-spacing: normal;
color: var(--color-category) !important;
text-decoration: none !important;
}
.post-tag:hover {
text-decoration: none !important;
}
/* Hidden until JS resolves which tags to keep (see default.hbs) —
revealed via inline style (display:block) once non-categoria-/
edicao- tags remain, otherwise the section is removed. Avoids
flashing every tag (and the section itself) before it's filtered
down.
Now a direct child of .gh-content (post.hbs and the two custom
post templates) instead of a sibling — below 1200px this sits in
normal flow (.gh-canvas's plain grid-column:main default for every
child), same as it always did.
At 1200px+, main.js's own DOMContentLoaded block near the bottom
of the file takes over positioning entirely (position:absolute,
right edge, and a scroll listener that sets top by hand) —
position:sticky spanning every row of the body was needed to give
it room to travel, but that height was also counted when the grid
sized the body's own early rows, pushing a gap in above the first
real paragraph. .gh-content needs position:relative for the
absolute positioning below to be relative to it, not the page. */
.post-tags {
display: none;
grid-column: main;
margin-top: 48px;
}
@media (min-width: 1200px) {
.gh-content {
position: relative;
}
/* left:100% + margin-left (not right:0) — right:0 sat INSIDE
.gh-content's own right edge, overlapping the body text; this
starts the box only once .gh-content's own width is already
behind it, clear of the text regardless of exactly how much
margin the page actually has out there. */
.post-tags {
position: absolute;
top: 0;
left: 100%;
width: 240px;
margin-top: 0;
margin-left: 32px;
background-color: rgb(255 255 255 / 0.9);
padding: 8px 8px 12px;
border-radius: 4px;
}
}
.post-tags-title {
font-family: "Roboto Slab", serif;
margin-bottom: 4px;
font-size: 17px;
font-weight: 800;
text-wrap: balance;
}
.post-tags-list {
padding-left: 12px !important;
margin: 0;
list-style: none;
}
.post-tags-item + .post-tags-item {
margin-top: 0.25rem;
}
/* =========================================================
MOBILE NAV — always-visible APOIA-NOS button, collapsed bar
(navigation.hbs's .gh-navigation-members--collapsed) — the
original button (.gh-navigation-actions .gh-navigation-members)
only shows inside the full-screen menu overlay on mobile (see
screen.css), hidden until the burger opens it; this copy stays
visible in the 64px collapsed bar at all times instead.
========================================================= */
.gh-navigation-members--collapsed {
display: none;
}
@media (max-width: 767px) {
#gh-navigation .gh-navigation-brand {
grid-template-columns: 1fr auto auto auto;
margin-right: 0;
}
#gh-navigation .gh-navigation-logo {
padding-right: 12px;
}
.gh-navigation-members--collapsed {
display: block;
margin-left: 16px;
}
/* The original button (inside .gh-navigation-actions, only
otherwise visible once the menu opens) is redundant now that
the collapsed-bar copy above is always visible — including
inside the open panel itself. */
.gh-navigation-actions .gh-navigation-members {
display: none;
}
/* #gh-navigation prefix needed for specificity: screen.css's own
#gh-navigation :is(.gh-button, ...) { opacity: 0 } (part of the
open-menu fade-in transition) matches this button too since
it's not scoped to .gh-navigation-actions, and its selector's
ID beats a same-rule without one — override it back to always
visible here. */
/* Same size as desktop's .gh-button (screen.css) — overrides
this mobile breakpoint's own generic #gh-navigation .gh-button
rule (width:100%, font-size:1.75rem, text-transform:none). */
#gh-navigation .gh-navigation-members--collapsed .gh-button {
width: auto;
padding: 0.7em 1em;
font-size: 1.3rem;
text-transform: uppercase;
opacity: 1;
transform: none;
}
/* Slightly smaller than screen.css's own 28px default. */
#gh-navigation .gh-navigation-brand .gh-search svg {
width: 22px;
height: 22px;
}
}
/* =========================================================
HOME NAVIGATION OVERLAY — on the homepage only, the nav floats
transparently over capa (the first section) instead of pushing
it down, so capa's image runs from the very top of the page.
A dark gradient behind the nav (taller than the nav itself,
fading out) keeps the logo/menu legible over whatever photo is
there. Every other template keeps the normal solid nav — all
of this is scoped to .home-template.
Heads up: if @site.logo is a dark/black mark, it may not read
well against this overlay — a light/yellow variant would be
safer here, same idea as the .gh-button staying yellow so it's
visible regardless of what's behind it.
========================================================= */
/* screen.css's plain .gh-footer margin-top (12vw) was designed for
post/page views ending right at the content — home's own last
section already has its own bottom padding, so that on top reads
as a much bigger gap than anywhere else on the site. Same
treatment as .page-template's own override just above. */
.home-template .gh-footer {
margin-top: 40px;
}
.home-template #gh-navigation {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
height: 100px;
background: transparent;
color: var(--color-white);
}
/* Full 60px from 1140px up; below that it shrinks fluidly down to
a 48px floor (a bit bigger than the theme's original 40px
default) at narrow widths. */
.home-template #gh-navigation .gh-navigation-logo img {
max-height: clamp(48px, 3.03vw + 25.45px, 60px);
}
/* z-index:-1 keeps this positioned gradient behind the nav's own
(static-positioned) content instead of painting over it. */
.home-template #gh-navigation::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 200px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
z-index: -1;
}
/* Only the top-level bar items — .nav > li > a, not the
descendant selector .nav a. When there are too many nav items,
dropdown.js moves the overflow into a .gh-dropdown popup nested
inside .nav (nav > button.gh-more-toggle > .gh-dropdown > li >
a), and that popup has its own white card background with dark
text (screen.css) — a descendant selector would also catch
those, turning them white-on-white and invisible. */
.home-template #gh-navigation .nav > li > a {
color: var(--color-white) !important;
}
.home-template #gh-navigation .nav > li > a:hover {
opacity: 0.6;
}
/* .gh-navigation-actions (search icon + APOIA-NOS wrapper) has its
own opaque background-color: var(--background-color) in
screen.css — that's the white/grey box behind the buttons. */
.home-template #gh-navigation .gh-navigation-actions {
background-color: transparent;
}
/* Mobile menu, open: needs to be solid again — it covers the
whole screen with the menu list, transparent would show capa
through it and make the links unreadable. Also needs position/
height/z-index back to screen.css's own fixed/full-screen values:
the base .home-template #gh-navigation rule above (position:
absolute; height:100px; z-index:10) ties that rule's specificity,
and since custom.css loads after screen.css, it was winning even
while open — squashing the menu list into the 100px collapsed bar
instead of covering the screen, and (z-index specifically) only
showing up visibly once .home-menu-bar got a z-index of its own
(sticky header) that was actually higher than 10 — before that,
nothing else on the page had a z-index competing with it, so nothing
this z-index bug affected was ever visible above it. */
.home-template .is-open#gh-navigation {
position: fixed;
inset: 0;
z-index: 3999999;
height: 100%;
background-color: var(--color-black, #000);
}
.home-template .is-open#gh-navigation::before {
display: none;
}
/* =========================================================
HOME MENU BAR (EXPERIMENTAL) — the menu moves out of
#gh-navigation entirely on the home page, into its own bar right
below Capa instead (see home/menu-bar.hbs, included from
layout-router.hbs's #layout-capa branch), at every width:
- Desktop: the full link list.
- Mobile: just a burger button in this same centered spot,
replacing the one that otherwise sits in the top-right corner
of #gh-navigation — opens the exact same overlay (main.js).
#gh-navigation's own burger + menu stay display:none on home
unconditionally now (not just desktop), since this bar covers
both jobs at every width. */
/* :not(.is-open) on the menu — while closed, .home-menu-bar's own
list replaces it (see above); while open, it doubles as the
mobile full-screen overlay's actual content (screen.css), so it
can't be hidden unconditionally. The original top-right burger
has no job left at all on home in either state: opening is
.home-menu-bar-burger's job, closing is
.gh-navigation-close-bottom's (below) — so it stays hidden
unconditionally, not just while closed. */
.home-template #gh-navigation:not(.is-open) .gh-navigation-menu {
display: none;
}
.home-template #gh-navigation .gh-burger:not(.gh-navigation-close-bottom) {
display: none;
}
/* This dedicated close ("X") button (navigation.hbs, home-only) is a
separate element from the original corner burger on purpose: it's
the LAST child of .gh-navigation-inner's grid (after
.gh-navigation-actions), display:none and out of grid flow unless
open, so it never affects the normal collapsed navbar anywhere.
What actually fixes "the X overlaps menu items at short viewport
heights" is NOT this button's own positioning — it's that only the
link list itself scrolls now (.gh-navigation-menu, right below),
instead of the whole open panel scrolling as one unit. A
viewport-anchored (fixed) OR even flow-anchored-at-the-end
(sticky) button can still sit on top of list items that haven't
been scrolled past yet whenever the panel's own scroll starts at
the top — the only bulletproof fix is for the button to live
entirely outside the scrolling area, in the grid's own non-
scrolling last row, so it can never share screen space with list
items regardless of scroll position or viewport height. */
.gh-navigation-close-bottom {
display: none;
}
@media (max-width: 767px) {
.home-template .is-open#gh-navigation .gh-navigation-close-bottom {
display: flex;
grid-column: 1 / -1;
justify-self: center;
width: 56px;
height: 56px;
margin-bottom: 24px;
}
/* Redundant on home: the search icon here just duplicates the one
already always visible in the collapsed top bar, and the
APOIA-NOS link inside it is separately hidden already (see the
"MOBILE NAV" section above). Removing it entirely — not just
its now-empty content — also removes its grid row and the gap
around it, so .gh-navigation-menu's row gets that space back
instead of leaving it as dead air above the close button. */
.home-template .is-open#gh-navigation .gh-navigation-actions {
display: none;
}
.home-template .is-open#gh-navigation .gh-navigation-close-bottom svg {
width: 40px;
height: 40px;
}
/* The link list is the ONLY part of the open panel that scrolls
now (instead of #gh-navigation itself, see below). Two levels
of align-items:center (screen.css) silently defeat that
otherwise: .gh-navigation-inner's own align-items:center sizes
.gh-navigation-menu to its natural content height inside its
1fr grid row instead of stretching it (align-self:stretch
fixes that level), and .gh-navigation-menu is ALSO a flex
container with its own align-items:center, which just as
silently centers .nav (the actual list) instead of stretching
it to fill .gh-navigation-menu's now-bounded height — without
overriding that too, .nav renders at full content height,
overflowing equally above and below, uncontained by the
parent's overflow/scroll entirely. A grid/flex item also won't
shrink below its content's natural height without min-height:0. */
.home-template .is-open#gh-navigation .gh-navigation-menu {
overflow-y: auto;
min-height: 0;
align-self: stretch;
align-items: stretch;
}
/* No longer the scrolling element itself (see above) — the brand
row and the close button's own row must stay outside that
scroll area, always visible, while only the middle (menu) row
scrolls internally. */
.home-template .is-open#gh-navigation {
overflow-y: hidden;
}
/* has-fade-top/has-fade-bottom (main.js, via scroll + resize) only
get added on the edge that actually still has content hidden
past it — not just whenever the list overflows at all, which
faded both edges permanently even at the very top or bottom,
where there's nothing hidden left to hint at. Masking (not an
overlay gradient) so it always matches whatever's behind it
without hardcoding the panel's background-color here. */
.home-template .is-open#gh-navigation .gh-navigation-menu.has-fade-top {
-webkit-mask-image: linear-gradient(to bottom, transparent, black 28px);
mask-image: linear-gradient(to bottom, transparent, black 28px);
}
.home-template .is-open#gh-navigation .gh-navigation-menu.has-fade-bottom {
-webkit-mask-image: linear-gradient(to top, transparent, black 28px);
mask-image: linear-gradient(to top, transparent, black 28px);
}
.home-template .is-open#gh-navigation .gh-navigation-menu.has-fade-top.has-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, transparent, black 28px, black calc(100% - 28px), transparent);
mask-image: linear-gradient(to bottom, transparent, black 28px, black calc(100% - 28px), transparent);
}
}
.home-menu-bar-burger {
display: none;
}
@media (max-width: 767px) {
.home-menu-bar-burger {
display: flex;
width: 56px;
height: 56px;
}
.home-menu-bar-burger svg {
width: 40px;
height: 40px;
}
}
/* Overflow items collapse into a "..." popup (dropdown.js, same
mechanism as #gh-navigation's own menu — see the comment there)
instead of wrapping onto a second line. Hidden until that JS runs
(same as screen.css's own .gh-navigation:not(.is-dropdown-loaded)
rule) so the full unrelated list doesn't flash before it collapses. */
@media (min-width: 768px) {
.home-menu-bar:not(.is-dropdown-loaded) .nav > li {
opacity: 0;
}
}
/* No flex-wrap: dropdown.js measures .nav's unwrapped width to
decide when to collapse overflow items into "..." (see comment
above) — wrapping here would "solve" the overflow visually before
that measurement ever sees it as a problem, silently disabling
the collapse entirely. white-space:nowrap matches the same
no-wrap intent on the
itself, same as #gh-navigation's own
.nav (screen.css). */
.home-menu-bar .nav {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px 28px;
padding: 0;
margin: 0;
list-style: none;
white-space: nowrap;
}
/* After the base rule above on purpose: same-specificity declarations
resolve by source order, and this needs to win on mobile
regardless of where the base rule sits. */
@media (max-width: 767px) {
.home-menu-bar .nav {
display: none;
}
}
/* Sticky, not fixed: it only needs to pin once its own scroll position
would otherwise carry it off the top, which is exactly what sticky
does natively — #gh-navigation itself doesn't need any adjustment
for this, since on home it's position:absolute over Capa only
(see HOME NAVIGATION OVERLAY above) and simply scrolls away like
the rest of Capa, leaving this bar as the only nav visible once
scrolled. z-index above any home section content (highest other
use on this page is 300) so nothing scrolls over it. */
.home-menu-bar {
display: flex;
align-items: center;
justify-content: center;
padding: 20px var(--container-gap, 16px);
background: var(--background-color);
position: sticky;
top: 0;
z-index: 500;
}
/* Shorter on mobile, where the bar only ever holds the burger button
(see .home-menu-bar-burger below) — the desktop padding was sized
for the full link list, not a single icon, and reads as too tall
once sticky keeps it pinned on screen at every scroll position. */
@media (max-width: 767px) {
.home-menu-bar {
padding: 2px var(--container-gap, 16px);
}
}
.home-menu-bar a {
display: block;
font-family: "Roboto Condensed", sans-serif;
font-size: 15px;
font-weight: 500;
color: var(--color-darker-gray);
text-decoration: none;
}
.home-menu-bar a:hover {
opacity: 0.7;
}
/* Icon swap for .home-menu-bar-burger specifically — it sits
outside #gh-navigation, so it can't rely on screen.css's own
.is-open .gh-burger svg:first-child (that needs the burger to be
a descendant of the is-open element; main.js gives this burger
its own is-open class instead, exactly for this). */
.home-menu-bar-burger.is-open svg:first-child {
display: none;
}
.home-menu-bar-burger.is-open svg:last-child {
display: block;
}
/* Same treatment as screen.css's own .gh-navigation .gh-more-toggle
(scoped there to .gh-navigation specifically, so it needs
repeating here) — position:relative anchors .gh-dropdown's
position:absolute against the toggle button itself. */
.home-menu-bar .gh-more-toggle {
position: relative;
margin: 0 -6px;
font-size: inherit;
text-transform: inherit;
}
.home-menu-bar .gh-more-toggle svg {
width: 24px;
height: 24px;
}
/* =========================================================
CAPA
========================================================= */
.section--capa {
max-width: none;
margin: 0 auto;
padding: 0;
}
.section--capa::before {
display: none;
}
/* GRID */
.capa-grid {
display: block;
}
/* CARD */
.card--capa {
position: relative;
overflow: hidden;
min-height: clamp(560px, 90dvh, 1000px);
}
/* IMAGE */
.card--capa .card-media.capa-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.card--capa .card-media.capa-media picture {
display: block;
width: 100%;
height: 100%;
}
.card--capa .card-media.capa-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* VIDEO (desktop only) */
.capa-video {
display: none;
}
@media (min-width: 768px) {
.capa-video.has-video {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.capa-video.has-video iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border: 0;
pointer-events: none;
/* YouTube's title bar (logo, share) and end-screen "more
videos" grid are baked into the iframe itself — no URL
param removes them. Scaling up and letting .card--capa's
own overflow:hidden clip the edges pushes that chrome
outside the visible box. */
transform: translate(-50%, -50%) scale(1.5);
}
.capa-video.has-video video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.card--capa .card-media.capa-media:has(.capa-video.has-video) picture,
.card--capa .card-media.capa-media:has(.capa-video.has-video) > img {
display: none;
}
}
/* MOBILE VIDEO (snippet-driven override — Feature Image is the fallback) */
.capa-mobile-video {
display: none;
}
@media (max-width: 767px) {
.capa-mobile-video.has-video {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.capa-mobile-video.has-video iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border: 0;
pointer-events: none;
/* YouTube's title bar (logo, share) and end-screen "more
videos" grid are baked into the iframe itself — no URL
param removes them. Scaling up and letting .card--capa's
own overflow:hidden clip the edges pushes that chrome
outside the visible box. */
transform: translate(-50%, -50%) scale(1.5);
}
.card--capa .card-media.capa-media:has(.capa-mobile-video.has-video) picture,
.card--capa .card-media.capa-media:has(.capa-mobile-video.has-video) > img {
display: none;
}
}
/* DARK OVERLAY */
.card--capa::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(0,0,0,.55) 0%,
rgba(0,0,0,.28) 45%,
rgba(0,0,0,.1) 100%
);
z-index: 1;
pointer-events: none;
}
.card--capa .card-link {
display: block;
position: relative;
width: 100%;
height: 100%;
min-height: inherit;
}
/* CONTENT */
.card--capa .card-content {
position: absolute;
left: 40px;
right: 40px;
bottom: 40px;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 1280px;
margin: 0 auto;
padding: clamp(0px, 2vw, 60px) 0;
}
.card--capa .card-content:hover {
/*transform: translateY(-2px);*/
transition: transform 0.2s, opacity 0.2s;
opacity: 0.8;
}
a.card-link:hover {
opacity: 1 !important;
}
/* TITLE */
.capa-pretitle {
margin-bottom: 8px;
color: var(--color-yellow);
font-family: "Anton", sans-serif;
font-weight: 400;
font-size: clamp(18px, 0.6vw + 15px, 24px);
line-height: 1.15;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
max-width: clamp(320px, 74vw, 900px);
text-wrap: balance;
}
/* font-size clamp is mostly a fixed base with a small vw component,
so it stays stable across window widths instead of scaling fast. */
.capa-title {
margin: 0 0 0px;
color: var(--color-yellow);
font-family: "Anton", sans-serif;
font-weight: 400;
font-size: clamp(64px, 1.8vw + 52px, 80px);
line-height: 1.05;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
max-width: clamp(320px, 74vw, 900px);
text-align: left;
text-wrap: balance;
}
@media (max-width: 767px) {
.capa-title {
font-size: clamp(40px, 10vw, 56px);
}
}
.capa-subtitle {
margin-top: 8px;
color: var(--color-yellow);
font-family: "Anton", sans-serif;
font-weight: 400;
font-size: clamp(18px, 0.6vw + 15px, 24px);
line-height: 1.15;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
max-width: clamp(320px, 74vw, 900px);
text-wrap: balance;
}
/* AUTHOR */
.capa-author {
margin-top: 16px;
font-family: "PT Serif", serif;
font-size: 22px;
font-style: italic;
color: rgba(255,255,255,.9);
font-size: 18px;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
/* MOBILE */
@media (max-width: 767px) {
.capa-grid {
grid-template-columns: 1fr;
}
}
/* =========================================================
INTRO
========================================================= */
.section--intro {
padding-top: 60px;
padding-bottom: 60px;
}
.section--intro::before {
display: none;
}
.intro-grid {
display: grid;
grid-template-columns: 1.2fr 1px 1.8fr 1px minmax(220px, 0.7fr);
column-gap: 30px;
align-items: stretch;
}
/* No hash-home-edicao page published — intro.hbs doesn't render
.intro-column--edicao (or its divider) at all then, so drop its
track too instead of leaving an empty reserved column. Scoped to
this breakpoint only (min-width:1101px, same lower bound as the
tablet query starting at 3113 ends): unscoped, its higher
specificity (:not(:has()) beats a plain .intro-grid) was also
overriding the tablet/mobile breakpoints' own, differently-shaped
grid-template-columns below, breaking their layout entirely. */
@media (min-width: 1101px) {
.intro-grid:not(:has(.intro-column--edicao)) {
grid-template-columns: 1.2fr 1px 1.8fr;
}
}
.intro-column {
min-width: 0;
}
/* =========================================================
DICIONÁRIO
========================================================= */
.intro-column--dicionario {
position: relative;
padding: 4rem 0;
}
.intro-column--dicionario::before,
.intro-column--dicionario::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 20px;
background: var(--color-category);
}
.intro-column--dicionario::before {
top: 0;
}
.intro-column--dicionario::after {
bottom: 0;
}
.card--dicionario {
display: flex;
flex-direction: column;
text-align: left;
height: 100%;
max-width: 560px;
}
/* Same size as Duo's card title (.home-card-title, unmarked/medium
tier). */
.home-dictionario-title {
display: block;
font-family: "Roboto Slab", serif;
font-size: calc(clamp(3rem, 1.22vw + 1.94rem, 4rem) * var(--factor, 1));
font-weight: 800;
font-style: none;
line-height: 1.1;
color: var(--color-primary-text);
padding-bottom: 16px;
text-wrap: balance;
}
.intro-column--dicionario .home-dicionario-body {
padding-bottom: 12px;
}
.intro-column--dicionario .home-dicionario-body p {
font-family: "Roboto Condensed", sans-serif;
font-size: 14px;
font-weight: 400;
font-style: normal;
color: var(--color-primary-text);
padding-top: 12px;
}
/* =========================================================
EDITORIAL
========================================================= */
.intro-column--editorial {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
}
.intro-column--editorial .card-vertical {
height: auto;
align-self: center;
}
/* =========================================================
EDIÇÃO
========================================================= */
.intro-column--edicao {
min-width: 0;
}
/* =========================================================
EDIÇÃO — BLOCO
========================================================= */
.home-edicao {
width: 100%;
border-top: 12px solid var(--color-black);
border-bottom: 12px solid var(--color-black);
padding: 20px 0;
}
/* =========================================================
EDIÇÃO — CONTEÚDO (não é um link — só o texto de impressão
abaixo pode ficar clicável, ver .home-edicao-print-link)
========================================================= */
.home-edicao-content {
display: block;
}
/* Plain stacked blocks by default — only split into a two-column
layout on mobile (see the 767px query), where .home-edicao-top
(logo/number/date) sits beside .home-edicao-bottom (note/print
link) instead of one long vertical stack. */
.home-edicao-top,
.home-edicao-bottom {
display: block;
}
/* Flex-child sizing for the two-column layout — inert on desktop
(.home-edicao-content is display:block there), so declared once
here instead of repeated identically in both the tablet and
mobile two-column media queries below. min-width:0 lets it keep
shrinking past its content's own min-content width (the number)
instead of forcing .home-edicao-bottom's text into a sliver on
very narrow screens. max-width isn't flex-specific like the
other two though — it constrains a block box just as much as a
flex item, so it's NOT declared here (would also cap the logo/
number's width on desktop, where .home-edicao-top is meant to use
the full column). Declared instead in each two-column media query
below, where it's actually meant to apply. */
.home-edicao-top {
min-width: 0;
}
.home-edicao-bottom {
flex: 1;
min-width: 0;
align-self: center;
}
/* =========================================================
EDIÇÃO — LOGO
========================================================= */
.home-edicao-logo {
display: flex;
justify-content: flex-end;
margin-bottom: 0;
}
.home-edicao-logo img {
display: block;
/* Fluid, same ~0.86 ratio to .home-edicao-number-value's own
clamp as before (was 120px vs 140px desktop, 88px vs 104px
mobile) — shrinks in step with it on narrow screens instead
of staying fixed and eating into .home-edicao-top's own
(also shrunk) width. */
width: clamp(34px, 7.14vw + 38.57px, 120px);
height: auto;
}
/* =========================================================
EDIÇÃO — NÚMERO
========================================================= */
.home-edicao-number {
display: flex;
align-items: flex-start;
justify-content: flex-end;
gap: 8px;
}
.home-edicao-number-label {
font-family: "Roboto Slab", serif;
/* Fluid, ~0.4 ratio to .home-edicao-number-value's own size
(matches its clamp formula scaled down) — needs to shrink in
step with it, or on very narrow screens the combined label+
value overflows past .home-edicao-top's own (also shrunk)
left edge, off the page. */
font-size: clamp(12px, 4.284vw + 7.14px, 56px);
font-weight: 800;
line-height: 1;
}
.home-edicao-number-n {
text-decoration: underline;
text-underline-offset: 3px;
}
.home-edicao-number-grau {
position: relative;
top: -2px;
font-size: 0.9em;
}
.home-edicao-number-value {
position: relative;
top: -10px;
font-family: "Roboto Slab", serif;
/* Fluid instead of the old 3 fixed breakpoint jumps (140/130/
104px) — scales continuously with viewport width, same 140px
ceiling (the original desktop size) as before, but shrinking
steeply enough that it (plus the label) actually fits inside
.home-edicao-top's own shrunk width on narrow phones, instead
of overflowing past its left edge. */
font-size: clamp(30px, 10.71vw + 17.86px, 140px);
font-weight: 900;
line-height: 0.9;
text-align: right;
}
/* =========================================================
EDIÇÃO — DATA (do excerpt do post)
========================================================= */
.home-edicao-date {
margin-top: 0px;
font-family: "Roboto Slab", serif;
/* Fluid, same ~0.17 ratio to .home-edicao-number-value's own
clamp as before (was 24px desktop/tablet, 18px mobile) —
shrinks a bit further still on very narrow screens instead of
stopping at 18px. */
font-size: clamp(14px, 1.428vw + 7.71px, 24px);
font-weight: 400;
font-style: normal;
line-height: 1.1;
text-align: right;
text-transform: uppercase;
text-wrap: balance;
}
/* =========================================================
EDIÇÃO — TEXTO FIXO (pequeno)
========================================================= */
.home-edicao-note {
margin-top: 24px;
margin-bottom: 0;
font-family: "Roboto Serif", serif;
font-size: 14px;
font-weight: 400;
font-style: normal;
line-height: 1.3;
text-align: left;
text-wrap: balance;
}
/* =========================================================
EDIÇÃO — TEXTO DE IMPRESSÃO (vermelho das tags, bold)
Só é clicável quando o post tem o snippet "Link externo" —
ver .js-home-link em main.js. Sem link, fica inerte (sem
href, sem cursor de link) mas continua sempre visível.
========================================================= */
.home-edicao-print-link {
display: block;
margin-top: 12px;
font-family: "Roboto Slab", serif;
font-size: 18px;
font-weight: 800;
line-height: 1.2;
color: var(--color-category);
text-align: left;
text-decoration: underline;
text-underline-offset: 3px;
text-wrap: balance;
}
/* Two images, swapped by breakpoint (see the 1100px and 767px
queries) — the desktop one is wide/horizontal, the mobile one is
redrawn to fit a narrower column. */
.home-edicao-print-instructions {
display: block;
margin-top: 32px;
width: 100%;
height: auto;
cursor: zoom-in;
}
.home-edicao-print-instructions--mobile {
display: none;
max-width: 460px;
}
/* =========================================================
TABLET / MEDIUM
768px — 1100px
EDIÇÃO
EDITORIAL | DICIONÁRIO
========================================================= */
@media (min-width: 768px) and (max-width: 1100px) {
.home-edicao {
padding: 20px 0;
}
/* Same two-column layout as mobile (see the 767px query). Grid
(not flex) so .home-edicao-print-instructions — a sibling of
-top/-bottom now, not nested inside -bottom, see intro.hbs —
can be placed under -bottom's own column here, then span the
full width instead below 450px (see that query). fit-content
caps -top's track the same way max-width:45% did on the old
flex layout, while still shrinking to fit its own content. */
.home-edicao-content {
display: grid;
grid-template-columns: fit-content(45%) 1fr;
align-items: start;
column-gap: 40px;
row-gap: 24px;
}
.home-edicao-top {
grid-column: 1;
grid-row: 1;
}
.home-edicao-bottom {
grid-column: 2;
grid-row: 1;
}
.home-edicao-print-instructions {
grid-column: 2;
grid-row: 2;
margin-top: 0;
}
.home-edicao-date {
margin-top: -8px;
}
.home-edicao-note {
margin-top: 0;
font-size: 16px;
}
.home-edicao-print-link {
margin-top: 16px;
font-size: 19px;
}
.home-edicao-print-instructions:not(.home-edicao-print-instructions--mobile) {
display: none;
}
.home-edicao-print-instructions--mobile {
display: block;
}
/* -----------------------------------------------------
GRID
----------------------------------------------------- */
.intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
column-gap: 30px;
row-gap: 40px;
}
/* -----------------------------------------------------
EDIÇÃO — LINHA INFERIOR
----------------------------------------------------- */
.intro-column--edicao {
grid-column: 1 / -1;
grid-row: 2;
}
/* -----------------------------------------------------
DICIONÁRIO — ESQUERDA
----------------------------------------------------- */
.intro-column--dicionario {
grid-column: 1;
grid-row: 1;
}
/* -----------------------------------------------------
EDITORIAL — DIREITA
----------------------------------------------------- */
.intro-column--editorial {
grid-column: 2;
grid-row: 1;
border-left: 1px solid var(--color-divider);
padding-left: 30px;
}
/* Os dividers verticais do HTML não são usados
neste breakpoint */
.divider--vertical {
display: none;
}
}
/* =========================================================
MOBILE
≤ 767px
EDIÇÃO
EDITORIAL
DICIONÁRIO
========================================================= */
@media (max-width: 767px) {
/* -----------------------------------------------------
INTRO GRID
----------------------------------------------------- */
.section--intro {
padding-top: 40px;
padding-bottom: 40px;
}
.intro-grid {
display: flex;
flex-direction: column;
gap: 40px;
}
/* -----------------------------------------------------
ORDEM
----------------------------------------------------- */
.intro-column--edicao {
order: 1;
}
.intro-column--editorial {
order: 2;
}
.intro-column--dicionario {
order: 3;
}
/* -----------------------------------------------------
DIVIDERS
----------------------------------------------------- */
.divider--vertical {
display: none;
}
/* -----------------------------------------------------
EDIÇÃO
----------------------------------------------------- */
.home-edicao {
padding: 25px 0;
}
/* Two columns side by side instead of one long vertical stack:
logo/number/date on the left, note/print-link on the right.
Grid (not flex) so .home-edicao-print-instructions — a
sibling of -top/-bottom now, not nested inside -bottom, see
intro.hbs — can be placed under -bottom's own column here,
then span the full width instead below 450px (see that
query). fit-content caps -top's track the same way
max-width:45% did on the old flex layout, while still
shrinking to fit its own content. */
.home-edicao-content {
display: grid;
grid-template-columns: fit-content(45%) 1fr;
align-items: start;
column-gap: 32px;
row-gap: 20px;
}
.home-edicao-top {
grid-column: 1;
grid-row: 1;
}
.home-edicao-bottom {
grid-column: 2;
grid-row: 1;
}
.home-edicao-print-instructions {
grid-column: 2;
grid-row: 2;
margin-top: 0;
}
/* LOGO */
.home-edicao-logo {
margin-bottom: 12px;
}
/* NÚMERO */
.home-edicao-number-value {
top: -16px;
}
/* DATA */
.home-edicao-date {
margin-top: -8px;
}
/* TEXTO FIXO */
.home-edicao-note {
margin-top: 0;
font-size: 15px;
}
/* TEXTO DE IMPRESSÃO */
.home-edicao-print-link {
margin-top: 14px;
font-size: 17px;
}
.home-edicao-print-instructions:not(.home-edicao-print-instructions--mobile) {
display: none;
}
.home-edicao-print-instructions--mobile {
display: block;
}
}
/* A bit smaller again below 500px — the 767px query's own sizes
(15px note, 17px print-link) still read a little large once
.home-edicao-bottom itself has shrunk down to ~45% of a narrow
phone's width. */
@media (max-width: 500px) {
.home-edicao-content {
gap: 20px;
}
.home-edicao-note {
font-size: 13px;
}
.home-edicao-print-link {
font-size: 13px;
}
}
/* Below 450px, the print-instructions diagram leaves the narrow
.home-edicao-bottom column (where it was already looking cramped)
and spans the full row width instead, on its own row after both
columns. Made possible by intro.hbs: it's a sibling of -top/
-bottom, not nested inside -bottom, specifically for this. */
@media (max-width: 450px) {
.home-edicao-content {
grid-template-columns: fit-content(45%) 1fr;
grid-template-rows: auto auto;
}
.home-edicao-print-instructions {
grid-column: 1 / -1;
grid-row: 2;
}
}
/* =========================================================
HOME CARD CONTENT (shared across card-vertical / card-horizontal)
title, intro, author/date — category uses .home-category,
shared by every card site-wide (see HOME font styles below)
NOTE: namespaced "home-card-*" on purpose — bare names like
card-title / card-meta are already used as generic hooks by
cronica.hbs (paired with its own modifier classes), so reusing
them here would silently override that section. agenda.hbs uses
these classes too (at the .card--xs tier), with its own
agenda-* classes layered on for the parts that aren't shared
(tag, media, body, centering) — see the AGENDA section above.
========================================================= */
.home-card-pretitle:empty,
.home-card-subtitle:empty {
display: none;
}
/* =========================================================
CARD EMPHASIS TIERS — card--lg / card--md / card--sm / card--xs
Independent of layout (card-vertical / card-horizontal). Only
title/pretitle/subtitle scale by tier; category and excerpt
stay identical everywhere. "Medium" is the unmarked default
(duo); uno and editorial get .card--lg; carousel gets .card--sm;
agenda gets .card--xs.
========================================================= */
.home-card-pretitle {
font-family: "Anton", sans-serif;
font-size: calc(1.8rem * var(--factor, 1));
font-weight: 400;
line-height: 1.2;
margin-bottom: 8px;
text-wrap: balance;
}
.card--lg .home-card-pretitle {
font-size: calc(2.2rem * var(--factor, 1));
}
.card--sm .home-card-pretitle {
font-size: calc(2rem * var(--factor, 1));
}
.card--xs .home-card-pretitle {
font-size: calc(1.5rem * var(--factor, 1));
}
.home-card-subtitle {
font-family: "Anton", sans-serif;
font-size: calc(1.8rem * var(--factor, 1));
font-weight: 400;
line-height: 1.2;
margin-top: 8px;
text-wrap: balance;
}
.card--lg .home-card-subtitle {
font-size: calc(2.2rem * var(--factor, 1));
}
.card--sm .home-card-subtitle {
font-size: calc(2rem * var(--factor, 1));
}
.card--xs .home-card-subtitle {
font-size: calc(1.6rem * var(--factor, 1));
}
.home-card-title {
font-family: "Anton", sans-serif;
font-size: calc(clamp(2.4rem, 1.22vw + 1.94rem, 3.5rem) * var(--factor, 1));
font-weight: 400;
line-height: 1.2;
margin: 0;
text-wrap: balance;
}
.card--lg .home-card-title {
font-size: calc(clamp(2.6rem, 1.77vw + 1.94rem, 4.2rem) * var(--factor, 1));
}
.card--sm .home-card-title {
font-size: calc(clamp(2.2rem, 0.77vw + 1.91rem, 2.9rem) * var(--factor, 1));
}
.card--xs .home-card-title {
font-size: calc(clamp(1.8rem, 0.44vw + 1.63rem, 2.2rem) * var(--factor, 1));
}
.home-card-intro,
.home-card-intro * {
font-size: 1.6rem !important;
font-family: "Roboto Serif", serif !important;
}
.home-card-intro {
display: -webkit-box;
margin-top: 24px;
line-height: 1.4;
-webkit-box-orient: vertical;
font-weight: 400;
max-width: 520px;
}
.home-card-meta {
align-items: center;
padding-bottom: 1px;
font-size: 1.25rem;
font-weight: 500;
line-height: 1.4;
letter-spacing: -0.004em;
color: var(--color-secondary-text);
}
.home-card-meta svg {
position: relative;
top: 1px;
display: inline-block;
width: 12px;
height: 12px;
margin-right: 2px;
}
.home-card-meta:not(:empty) {
margin-top: 8px;
}
.home-card-author {
display: inline-block;
margin-top: 20px;
margin-bottom: 20px;
font-family: "Roboto Serif", serif;
font-size: 16px;
font-weight: 500;
font-style: italic;
color: var(--color-black);
}
.home-card-author + .home-card-date::before {
content: "—";
margin-right: 4px;
}
/* =========================================================
HOME CARD CONTENT (shared by card-vertical / card-horizontal)
category, title, intro, meta — identical for both layouts.
Only the outer -link/-image handling differs per layout below.
========================================================= */
.home-card-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.home-card-content .home-card-title {
margin: 0 auto;
}
.card-vertical-link:hover .home-card-title,
.card-horizontal-link:hover .home-card-title {
opacity: 0.8;
}
/* =========================================================
CARD LARGE (vertical, image on top)
========================================================= */
.card-vertical {
display: flex;
flex-direction: column;
height: 100%;
}
.card-vertical-link {
display: flex;
flex-direction: column;
gap: 32px;
}
.card-vertical-link:hover {
opacity: 1;
}
.card-vertical-image {
position: relative;
flex-shrink: 0;
aspect-ratio: 1 / 1;
}
/* Fills its (aspect-ratio-boxed) parent — shared with
.card-horizontal-image img, see CARD HORIZONTAL section. */
.card-vertical-image img,
.card-horizontal-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.card-vertical .home-card-content {
margin: auto;
padding: 0 16px;
}
@media (max-width: 767px) {
.card-vertical-image {
width: calc(100% + 32px);
margin-left: -16px;
margin-right: -16px;
}
}
/* =========================================================
CARD HORIZONTAL (image on the side, top on mobile)
========================================================= */
.card-horizontal {
height: 100%;
}
.card-horizontal-link {
display: flex;
flex-direction: row;
align-items: center;
gap: 40px;
}
.card-horizontal-link:hover {
opacity: 1;
}
/* Alternating image side per uno instance (see layout-router.hbs,
imageSide param) — desktop only, mobile always stacks the same way
regardless of side. */
@media (min-width: 768px) {
.section--uno-right .card-horizontal-link {
flex-direction: row-reverse;
}
}
.card-horizontal-image {
position: relative;
flex: 0 0 45%;
aspect-ratio: 1 / 1;
}
/* Fill rule shared with .card-vertical-image img — see CARD
VERTICAL section above. */
/* Fixed logo image — keep the flex-based width (45%), but let the
height follow the image's own aspect ratio instead of forcing it
into the shared square box. */
.card--cozinheiro-vermelho .card-horizontal-image {
aspect-ratio: auto;
}
.card--cozinheiro-vermelho .card-horizontal-image img {
position: static;
height: auto;
object-fit: contain;
}
.card-horizontal .home-card-content {
flex: 1;
min-width: 0;
}
@media (max-width: 767px) {
.card-horizontal-link {
flex-direction: column;
align-items: stretch;
gap: 20px;
}
.card-horizontal-image {
flex: none;
width: calc(100% + 32px);
margin-left: -16px;
margin-right: -16px;
}
}
/* =========================================================
DUO
========================================================= */
.duo-slider {
position: relative;
}
/* Layout + divider shared with .cronica-grid — see CRONICA section. */
/* SHARED — visual style reused by .duo-slider-arrow and
.carousel-slider-arrow; each still controls its own
position/visibility separately below. */
.slider-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: none;
border-radius: 0;
background: rgb(0 0 0 / 0.8);
color: var(--color-white);
cursor: pointer;
}
.slider-arrow svg {
width: 18px;
height: 18px;
}
/* =========================================================
MEDIA SLIDESHOW — built client-side by buildSlideshowElement in
main.js, whenever a gallery (post-body or a .js-home-media target's
post content) has 2+ images. Shared by every card that uses
fillMediaFromPostContent (Do Nosso Lado, Aventuras, BD, the
media-archive-grid tag pages) and by in-article galleries, instead
of Ghost's own gallery grid.
========================================================= */
.media-slideshow {
position: relative;
}
/* Clips the track to one slide's width — .media-slideshow-track
holds every slide side by side and is what actually moves (see
below), an animated slide motion instead of an instant swap. */
.media-slideshow-viewport {
overflow: hidden;
}
.media-slideshow-track {
display: flex;
transition: transform 0.35s ease;
}
/* display:flex + centered on both axes — .media-slideshow-track's
own row height is set by its tallest slide (a portrait image), so
a shorter/wider one needs its own centering or it sits at the top
of that extra height instead of in the middle of it. */
.media-slideshow-slide {
flex: 0 0 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* width/height:auto + max-width/max-height (not width:100%) — a
portrait source photo at full article width was rendering very
tall; this caps it at 800px without stretching or cropping,
letting it shrink to fit both constraints instead. */
.media-slideshow-slide img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 800px;
}
.media-slideshow-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
.media-slideshow-arrow--prev {
left: 8px;
}
.media-slideshow-arrow--next {
right: 8px;
}
.media-slideshow-arrow--prev svg {
transform: rotate(180deg);
}
.duo-slider-arrow {
display: none;
}
/* MOBILE — side-by-side slideshow with peek + arrows */
@media (max-width: 767px) {
.duo-grid {
display: flex;
grid-template-columns: unset;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: 16px;
gap: 16px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.duo-grid::-webkit-scrollbar {
display: none;
}
.duo-grid::before {
display: none;
}
.duo-grid .card-vertical {
flex: 0 0 85%;
scroll-snap-align: start;
}
.duo-grid .card-vertical-image {
width: 100%;
margin-left: 0;
margin-right: 0;
}
/* left-aligned, carousel-sized text */
.duo-grid .home-card-content {
align-items: flex-start;
text-align: left;
}
.duo-grid .home-card-title {
text-align: left;
max-width: none;
margin: 0;
font-size: calc(2.2rem * var(--factor, 1));
}
/* top is a fallback only — main.js's alignArrowsToImage sets the
real value to the card image's vertical center. */
.duo-slider-arrow {
display: flex;
position: absolute;
top: 200px;
transform: translateY(-50%);
z-index: 2;
}
.duo-slider-arrow--prev {
left: 4px;
transform: translateY(-50%) rotate(180deg);
}
.duo-slider-arrow--next {
right: 4px;
}
}
/* =========================================================
ARTIGO Subtitle and Intro
========================================================= */
.article-pretitle {
margin: 0 0 0.5rem;
}
.article-pretitle [data-post-pretitle] {
font-size: clamp(22px, 2vw, 28px);
font-family: "Anton", sans-serif;
line-height: 1.2;
text-wrap: balance;
margin-top: 8px;
}
.article-subtitle {
margin: 1rem 0 0;
}
.article-subtitle [data-post-subtitle] {
font-size: clamp(22px, 2vw, 28px);
font-family: "Anton", sans-serif;
line-height: 1.2;
text-wrap: balance;
}
/* =========================================================
HOME font styles
========================================================= */
.home-category {
display: block;
font-family: "Roboto Serif", serif;
font-size: 16px;
font-weight: 500;
font-style: none;
color: var(--color-category);
padding-bottom: 16px;
}
/* =========================================================
DIVIDERS
========================================================= */
.divider {
flex-shrink: 0;
background-color: var(--color-divider);
}
.divider--vertical {
width: 1px;
height: auto;
align-self: stretch;
}
.divider--horizontal {
width: 100%;
height: 1px;
}
/* page.hbs only — between the excerpt/feature-image header and the
body, matching .gh-content hr's own light-gray content dividers
(screen.css) rather than the theme's own (slightly darker)
--color-divider used elsewhere on this page. max-width matches the
"main" column both siblings lay their own text in (--content-width,
from screen.css's .gh-canvas grid) — plain width:100% would instead
span the wider .gh-article it sits in as a sibling, not a grid
child of either .gh-canvas itself. */
.gh-page-divider {
max-width: var(--content-width, 720px);
height: 1px;
margin: 40px auto;
border: 0;
background-color: var(--color-border);
}
/* =========================================================
FOOTER — full custom redesign: black bar, site logo, the
secondary nav menu (editors manage the 2 links from Ghost
Admin, same as before), Facebook/Instagram, and the same
"APOIA-NOS" button as the header (.gh-button, already
yellow/black — see partials/components/navigation.hbs).
Sticking to the bottom on short pages is already handled by
Ghost's own .gh-viewport (flex column, min-height:100vh) +
.gh-main (flex-grow:1) in screen.css — nothing needed here.
========================================================= */
.footer-maio {
background-color: var(--color-black);
color: var(--color-white);
}
.footer-maio-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 24px 32px;
padding: 64px 0 100px 0;
}
.footer-maio-logo {
display: block;
flex-shrink: 0;
}
.footer-maio-logo img {
display: block;
height: 40px;
width: auto;
}
.footer-maio-menu {
flex-grow: 1;
}
.footer-maio-menu .nav {
justify-content: flex-start;
font-family: "Roboto Serif", serif;
font-size: 1.6rem;
}
.footer-maio-menu .nav a {
color: var(--color-white) !important;
}
.footer-maio-social {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
/* .footer-maio prefix (not just .footer-maio-social) matches
screen.css's own .gh-footer a:not(.gh-button){color:inherit} on
specificity — without it, that rule would win and override the
white set here. */
.footer-maio .footer-maio-social a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 0;
background: transparent;
color: var(--color-white);
}
.footer-maio-social svg {
width: 28px;
height: 28px;
}
.footer-maio-cta {
flex-shrink: 0;
}
/* Groups redes + apoia-nos so they can share one row on mobile —
display:contents keeps it invisible to the desktop layout (its
two children just sit inline with everything else in the row). */
.footer-maio-bottom {
display: contents;
}
@media (max-width: 767px) {
.footer-maio-bar {
flex-direction: column;
align-items: center;
text-align: center;
padding: 32px 0;
}
.footer-maio-menu {
flex-grow: 0;
margin-top: 16px;
margin-bottom: 16px;
}
.footer-maio-menu .nav {
flex-direction: column;
align-items: center;
gap: 12px;
}
.footer-maio-bottom {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
}
/* =========================================================
EDIÇÕES — custom-edicoes.hbs, the archive-of-editions page.
Simple divided list, one row per edition, same date formatting
as the edition tag header (.js-edition-title).
========================================================= */
/* .gh-content .edicoes-list, not just .edicoes-list alone: needs to
outrank screen.css's own .gh-content :is(ul, ol) { padding-left:
28px }, which otherwise wins on specificity now that this list
lives inside .gh-content. */
.gh-content .edicoes-list {
margin: 0;
padding: 0;
list-style: none;
}
/* margin-top:0 overrides screen.css's .gh-content :is(li + li, ...)
{ margin-top: 8px }, which otherwise applies now that this list
lives inside .gh-content. */
.edicoes-list-item + .edicoes-list-item {
margin-top: 0;
border-top: 1px solid var(--color-divider);
}
/* Darkens the divider line right above a hovered item, and (via the
adjacent-sibling selector) the one right below it too — that one
is actually the NEXT item's own border-top, since only border-top
is used between items (no separate border-bottom anywhere). */
.edicoes-list-item:hover {
border-top-color: var(--color-black);
}
.edicoes-list-item:hover + .edicoes-list-item {
border-top-color: var(--color-black);
}
/* .gh-content .edicoes-list-link (2 classes), not just
.edicoes-list-link alone: needs to outrank screen.css's own
.gh-content a { color: var(--color-link) } (1 class + 1 element),
which otherwise wins on specificity and turns these blue. */
.gh-content .edicoes-list-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 0;
font-family: "Roboto Slab", serif;
font-size: 24px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--color-black);
text-decoration: none;
}
.edicoes-list-chevron {
flex-shrink: 0;
display: flex;
}
.edicoes-list-link:hover {
opacity: 0.7;
}
.edicoes-list-more {
display: block;
margin: 24px auto 0;
padding: 12px 28px;
border: 1px solid var(--color-black);
background: none;
font-family: "Roboto Condensed", sans-serif;
font-size: 1.3rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-black);
cursor: pointer;
}
.edicoes-list-more:hover {
opacity: 0.7;
}
/* =========================================================
CRONICA POST TEMPLATE — custom-post-cronica.hbs. Only real
difference from post.hbs: the feature image sits above the
category tag and title instead of not showing at all.
========================================================= */
/* Overrides the base .gh-article-image rule's "wide" grid track to
"main" (lining up with the tag/title/meta below), and shrinks to
hug the image instead of stretching to fill that column. */
.gh-article-image--cronica {
grid-column: main !important;
width: fit-content !important;
max-width: 100%;
margin-top: 0;
margin-bottom: 40px;
}
/* object-fit:contain keeps the image's own ratio regardless of the
box's resolved width/height. */
.gh-article-image--cronica img {
display: block;
width: auto;
max-width: 100%;
height: 400px;
object-fit: contain;
object-position: left top;
margin: 0;
}
/* =========================================================
RELÓGIO MILITAR EUROPEU — home section (see #layout-relogio-
militar in layout-router.hbs, partials/home/relogio-militar.hbs,
assets/js/relogio-militar.js). Entirely self-contained: no post
content feeds it, every number comes from the JS config.
Only .relogio-compact is actually shown — everything under
.relogio-hidden (progress bar, stats grid, the other 3
equivalents, methodology...) stays in the DOM and keeps being
updated by relogio-militar.js, just not displayed; see the
comment in the partial.
========================================================= */
/* No max-width of its own — spans the same width as .section
(1344px) like every other home section except Capa, instead of
the narrower column this was designed at. */
.relogio-inner {
margin: 0 auto;
}
/* No top divider line, unlike every other .section. */
.section--relogio-militar::before {
display: none;
}
/* Half the usual .section top/bottom padding (120px, or 80px on
mobile — see the base .section rule) — this section is much
shorter than a normal home section, the full padding looked like
too much dead space around it. */
.section--relogio-militar {
padding-top: 60px;
padding-bottom: 20px;
}
@media (max-width: 767px) {
.section--relogio-militar {
padding-top: 40px;
padding-bottom: 10px;
}
}
.relogio-compact {
display: flex;
flex-direction: column;
gap: 0px;
}
/* Grid, not flex — fixed track widths keep the ever-updating counter
(Anton has no tabular-nums, so its rendered width fluctuates) from
pushing the equiv column sideways. align-items:stretch matches the
counter's box height to .relogio-compact-equiv's instead of
centering it against it. */
.relogio-compact-row {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
gap: 24px 64px;
}
.relogio-compact-title {
margin: 0 0 8px;
font-family: "Anton", sans-serif;
font-size: clamp(1.8rem, 1.3vw + 1.4rem, 2.8rem);
font-weight: 400;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--color-black);
text-wrap: balance;
}
/* flex + align-items:center keeps the number vertically centered now
that align-items:stretch above can make its box taller than the
text itself. */
.relogio-compact-row .relogio-counter-value {
font-size: clamp(4.8rem, 4vw + 1.6rem, 7rem);
min-width: 0;
display: flex;
align-items: center;
}
/* Simple version — the grid column shrinks to its content and
justify-self:end (below) pins that shrunk box to the column's
right edge; flex-start inside keeps the label and the number
lined up on the left with each other. */
.relogio-compact-equiv {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
gap: 0px 16px;
justify-self: end;
min-width: 0;
}
.relogio-compact-equiv-value {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.relogio-compact-equiv-label {
font-family: "Roboto Slab", serif;
font-size: clamp(1.4rem, 0.7vw + 1.2rem, 1.9rem);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--color-black);
padding-bottom: 2px;
}
/* line-height:1 overrides the inherited body line-height:1.6
(screen.css reset), which at this font size made the value look
too tall whenever the label wraps above it. */
.relogio-compact-equiv .relogio-equiv-num {
font-size: clamp(2.5rem, 2.3vw + 1.8rem, 4rem);
line-height: 1;
}
.relogio-compact-equiv-desc {
font-family: "Roboto Condensed", sans-serif;
font-size: clamp(1.5rem, 0.4vw + 1.1rem, 1.5rem);
font-weight: 600;
line-height: 1.15;
color: var(--color-black);
transition: opacity 0.25s ease;
}
/* Fades out/in on rotation (see relogio-militar.js) instead of
snapping straight to the next equivalent's label. */
.relogio-compact-equiv-desc.is-fading {
opacity: 0;
}
@media (max-width: 767px) {
.relogio-compact {
text-align: center;
}
.relogio-compact-row {
grid-template-columns: 1fr;
justify-items: center;
}
.relogio-compact-equiv {
flex-direction: column;
align-items: center;
justify-content: flex-start;
justify-self: center;
gap: 2px;
}
}
.relogio-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-family: "Roboto Condensed", sans-serif;
font-size: 1.3rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-category);
}
.relogio-kicker-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-category);
flex: none;
}
@media (prefers-reduced-motion: no-preference) {
.relogio-kicker-dot {
animation: relogio-pulse 2.2s ease-in-out infinite;
}
}
@keyframes relogio-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.relogio-dek {
margin-top: 12px;
font-family: "Roboto Serif", serif;
font-size: 1.6rem;
line-height: 1.5;
text-align: center;
color: var(--color-secondary-text);
}
.relogio-counter-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
padding: 40px 32px;
background: var(--color-black);
color: var(--color-white);
}
.relogio-counter-label {
font-family: "Roboto Condensed", sans-serif;
font-size: 1.3rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-mid-gray);
}
.relogio-counter-value {
font-family: "Anton", sans-serif;
font-size: clamp(2.8rem, 3vw + 2rem, 5.2rem);
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--color-black);
text-wrap: balance;
}
.relogio-progress-row {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
max-width: 440px;
margin-top: 8px;
}
.relogio-progress-track {
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.18);
overflow: hidden;
}
.relogio-progress-fill {
height: 100%;
background: var(--color-category);
border-radius: 3px;
}
.relogio-progress-caption {
display: flex;
justify-content: space-between;
font-family: "Roboto Condensed", sans-serif;
font-size: 1.2rem;
color: var(--color-mid-gray);
}
.relogio-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
margin-top: 1px;
background: var(--color-border);
border: 1px solid var(--color-border);
}
.relogio-stat {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 14px;
background: var(--background-color);
}
.relogio-stat-label {
font-family: "Roboto Condensed", sans-serif;
font-size: 1.15rem;
color: var(--color-secondary-text);
}
.relogio-stat-value {
font-family: "Anton", sans-serif;
font-size: 1.8rem;
font-variant-numeric: tabular-nums;
color: var(--color-black);
}
.relogio-stat-value.is-accent {
color: var(--color-category);
}
.relogio-equiv-card {
margin-top: 40px;
border: 1px solid var(--color-border);
}
.relogio-equiv-head {
padding: 20px 22px;
background: var(--color-light-gray, #e6e6e6);
border-bottom: 1px solid var(--color-border);
font-family: "Roboto Serif", serif;
font-size: 1.55rem;
line-height: 1.4;
}
.relogio-equiv-head strong {
font-family: "Anton", sans-serif;
font-weight: 400;
color: var(--color-category);
font-variant-numeric: tabular-nums;
}
.relogio-equiv-list {
display: flex;
flex-direction: column;
}
.relogio-equiv-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 16px 22px;
border-top: 1px dashed var(--color-border);
}
.relogio-equiv-row:first-child {
border-top: none;
}
.relogio-equiv-num {
flex: none;
font-family: "Anton", sans-serif;
font-size: clamp(1.8rem, 1vw + 1.6rem, 2.4rem);
font-variant-numeric: tabular-nums;
}
.relogio-equiv-desc {
text-align: right;
font-family: "Roboto Serif", serif;
font-size: 1.45rem;
}
.relogio-equiv-note {
display: block;
margin-top: 2px;
font-size: 1.2rem;
color: var(--color-secondary-text);
}
.relogio-basis {
margin-top: 24px;
padding: 16px 20px;
background: var(--color-light-gray, #e6e6e6);
border-left: 4px solid var(--color-category);
font-family: "Roboto Serif", serif;
font-size: 1.35rem;
line-height: 1.5;
color: var(--color-secondary-text);
}
.relogio-basis strong {
color: var(--color-black);
font-weight: 700;
}
.relogio-methodology {
margin-top: 16px;
border: 1px solid var(--color-border);
}
.relogio-methodology summary {
cursor: pointer;
padding: 14px 20px;
font-family: "Roboto Condensed", sans-serif;
font-size: 1.3rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
list-style: none;
}
.relogio-methodology summary::-webkit-details-marker {
display: none;
}
.relogio-methodology[open] summary {
border-bottom: 1px solid var(--color-border);
}
.relogio-methodology-body {
padding: 4px 20px 20px;
font-family: "Roboto Serif", serif;
font-size: 1.35rem;
line-height: 1.55;
color: var(--color-secondary-text);
}
.relogio-methodology-body p {
margin: 12px 0;
}
.relogio-methodology-body ol {
margin: 8px 0 12px;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.relogio-methodology-body strong {
color: var(--color-black);
}
.relogio-methodology-body a {
color: var(--color-category);
}
.relogio-footer {
margin-top: 20px;
text-align: center;
font-family: "Roboto Condensed", sans-serif;
font-size: 1.15rem;
color: var(--color-secondary-text);
}
@media (max-width: 767px) {
.relogio-counter-block {
padding: 32px 20px;
}
.relogio-stats {
grid-template-columns: repeat(2, 1fr);
}
.relogio-equiv-row {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.relogio-equiv-desc {
text-align: left;
}
}
/* Bigger than screen.css's own clamp for post article titles. The
:not(.section-title) excludes tag page titles (also
.gh-article-title) — without it, this and .section-title's own
!important font-size tie on specificity, and source order (this
rule comes later in the file) would let this one win instead.
The !important here is needed because a plain override wasn't
winning despite correct cascade. */
.gh-article-title:not(.section-title) {
font-size: calc(clamp(4.5rem, 1.6vw + 3.4rem, 6.5rem) * var(--factor, 1)) !important;
}
/* Author archive page (author.hbs) header — same visual treatment as
Opinião's author row (.gh-article-author-row in custom.css, OPINIAO
section below): photo size, name weight/style/size, bio color —
just without that row's top/bottom divider lines. Font-size here
also needs !important: it would otherwise lose to the rule above
(both !important, and this selector's 2 classes beat that rule's
1 class + :not(1 class)). */
.author-template .gh-article-image {
width: clamp(114px, 2.3vw + 105px, 138px);
height: clamp(130px, 2.7vw + 120px, 158px);
}
.author-template .gh-article-title {
font-style: normal;
font-weight: 600;
text-wrap: balance;
font-size: clamp(2.4rem, 0.6vw + 2.25rem, 2.8rem) !important;
}
.author-template .gh-article-excerpt {
max-width: 600px;
font-size: 16px;
line-height: 1.35;
letter-spacing: normal;
color: var(--color-dark-gray);
}
/* =========================================================
CUSTOM-POST-OPINIAO — single large author in the meta-share,
instead of the normal multi-author row layout (see screen.css's
.gh-article-author-image/-name/-bio for the sizes overridden here).
No right-edge divider either: with one author there's nothing to
its right to separate.
========================================================= */
/* Author row on top, date/share below it — .gh-meta-share-actions'
own width:100% + justify-content:space-between (below) spreads
date/time to the left edge and the share button to the right,
instead of both bunched together with empty space alongside. */
/* Photo/name scale gradually with viewport width instead of jumping
at the 700px breakpoint — defined once here, reused below so the
row/wrapper min-heights always stay in sync with the photo. */
.gh-article--opiniao {
--opiniao-photo-width: clamp(114px, 2.3vw + 105px, 138px);
--opiniao-photo-height: clamp(130px, 2.7vw + 120px, 158px);
--opiniao-name-size: clamp(2.4rem, 0.6vw + 2.25rem, 2.8rem);
}
.gh-article--opiniao .gh-meta-share {
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-top: 24px;
}
.gh-article--opiniao .gh-meta-share-actions {
width: 100%;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 20px;
}
/* Date + reading time on one line, dot-separated — same treatment
screen.css already gives this pair at its own narrow breakpoint,
just unconditional here since this template stacks always. */
.gh-article--opiniao .gh-article-meta-content {
flex-direction: row;
align-items: center;
gap: 6px;
}
.gh-article--opiniao .gh-article-meta-length::before {
content: "·";
margin-right: 6px;
}
.gh-article--opiniao .gh-article-author-row {
flex: 0 0 auto;
max-width: 100%;
min-height: var(--opiniao-photo-height);
gap: 20px;
border-right: none;
padding-right: 12px;
padding-left: 8px;
border-top: 2px solid var(--color-black);
border-bottom: 2px solid var(--color-black);
padding-top: 12px;
padding-bottom: 12px;
}
.gh-article--opiniao .gh-article-author-image a {
width: var(--opiniao-photo-width);
height: var(--opiniao-photo-height);
border: none;
}
.gh-article--opiniao .gh-article-meta-wrapper {
min-height: var(--opiniao-photo-height);
gap: 6px;
}
.gh-article--opiniao .gh-article-author-name {
font-size: var(--opiniao-name-size);
font-style: normal;
font-weight: 600;
max-width: 320px;
text-wrap: balance;
}
.gh-article--opiniao .gh-article-author-bio {
font-size: 16px;
line-height: 1.35;
letter-spacing: normal;
color: var(--color-dark-gray);
}
/* .gh-meta-share is column-stacked unconditionally above (author row,
then date/share below it) — this narrower breakpoint additionally
spans the row/actions full-width and centers the share button,
since a left-aligned natural-width button looks stranded on a
narrow screen. */
@media (max-width: 700px) {
.gh-article--opiniao .gh-article-author-row {
flex: 1 1 auto;
width: 100%;
}
.gh-article--opiniao .gh-meta-share {
gap: 24px;
}
.gh-article--opiniao .gh-meta-share-actions {
width: 100%;
flex-direction: column;
align-items: center;
gap: 8px;
}
.gh-article--opiniao .gh-button-share {
order: -1;
width: 100%;
justify-content: center;
}
.gh-article--opiniao .gh-article-meta-content {
flex-direction: row;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
}
.gh-article--opiniao .gh-article-meta-length::before {
content: "·";
margin-right: 6px;
}
}
/* Hides an element visually while keeping it in the accessibility
tree — e.g. a category tag's real name, kept for the link's
accessible name while a logo stands in for it visually. */
/* =========================================================
CUSTOM-POST-COZINHEIRO-VERMELHO — the section's own logo above
the title, linking to its tag archive, instead of a rendered
category tag (see custom-post-cozinheiro-vermelho.hbs).
========================================================= */
.cozinheiro-vermelho-tag-link {
display: inline-block;
margin-bottom: 8px;
}
.cozinheiro-vermelho-tag-logo {
display: block;
height: 220px;
width: auto;
}
@media (max-width: 600px) {
.cozinheiro-vermelho-tag-logo {
height: 140px;
}
}
/* =========================================================
CUSTOM-POST-POEMA — quotes centered instead of left-aligned
(see custom-post-poema.hbs; no drop-cap is handled entirely in
the template, by simply not adding the class).
========================================================= */
/* Author photo/name/bio hidden — date and share stay visible,
still siblings inside the same .gh-meta-share row. */
.gh-article--poema .gh-article-meta {
display: none;
}
.gh-article--poema .gh-meta-share-actions {
flex-direction: row-reverse;
}
/* !important needed: screen.css's own blockquote.kg-blockquote-alt
sets text-align:left with !important. padding-left:0 overrides
both that rule's own indent and its 768px+ wider indent (7rem) —
this comes later in the cascade so it wins either way.
width:fit-content shrinks the box itself to the widest line
instead of spanning the full body width, so the box sits at the
body's left edge (margin-right:auto) while its own lines stay
centered relative to each other. */
.gh-article--poema blockquote {
width: fit-content;
max-width: 100%;
margin-left: 0;
margin-right: auto;
padding-left: 0;
text-align: center !important;
text-wrap: wrap;
}
/* =========================================================
AUTHORS LIST — custom-authors-list.hbs. Same visual treatment as
Opinião's byline (rectangular, non-circular photo; bold, non-
italic name; plain dark-gray bio), just as a standalone vertical
card instead of a horizontal row.
========================================================= */
.author-list-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-top: 4rem;
}
.author-profile-card {
text-align: center;
}
/* .gh-content .author-profile-card-link (2 classes), not just
.author-profile-card-link alone: needs to outrank screen.css's own
.gh-content a { color: var(--color-link); text-decoration:
underline }, which otherwise wins on specificity and turns these
blue and underlined. */
.gh-content .author-profile-card-link {
color: inherit;
text-decoration: none;
}
.author-profile-card-image {
position: relative;
width: 138px;
height: 158px;
margin: 0 auto;
background-color: var(--color-light-gray);
overflow: hidden;
}
.author-profile-card-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.author-profile-card-initial {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-family: "Roboto Serif", serif;
font-size: 3rem;
color: var(--color-secondary-text);
}
.author-profile-card-name {
margin: 15px 0 5px;
font-family: "Roboto Serif", serif;
font-size: 1.8rem;
font-style: normal;
font-weight: 600;
text-wrap: balance;
}
.author-profile-card-bio {
margin: 0;
font-size: 16px;
line-height: 1.35;
letter-spacing: normal;
color: var(--color-dark-gray);
}
.author-profile-card-count {
display: block;
margin-top: 8px;
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-secondary-text);
}
/* =========================================================
ERROR PAGE (error.hbs) — 404 and other Ghost-generated errors.
========================================================= */
.gh-error-header {
display: flex;
flex-direction: column;
align-items: center;
padding: 12vw 0;
text-align: center;
}
/* !important: needed to beat .gh-article-title:not(.section-title)'s
own !important font-size (same specificity tie-break issue as that
rule's own comment describes for .section-title). */
.gh-error-header .gh-article-title {
margin-top: 16px;
font-size: clamp(2.8rem, 1.4vw + 1.8rem, 4rem) !important;
}
.gh-error-header .gh-article-excerpt {
max-width: 480px;
text-wrap: balance;
}
.gh-error-back {
margin-top: 32px;
}