/*
zprime blog index, below the fold. Loaded on the posts page and every category archive,
deferred by zprime_async_style(). The title band and the category bar are above this and
live in css/critical-nea.css.
Depends on zprime-style, so --zp-arrow and --zp-motion are both in scope.
Named .arthra-* rather than .nea-*: the front page's news section already owns .nea__*
in css/home.css, and the two cards are close enough that one prefix would be read as one
component. They are not — this card's read-more follows the excerpt where the front
page's is pushed to a shared baseline, and the grid gutters differ.
*/
/*--------------------------------------------------------------
# Lead article
--------------------------------------------------------------*/
/* The newest article, wide, on the same grey as the band above it — so the two read as
one block and the plate below is what breaks the page. Page two and beyond has no lead:
the treatment means "newest", which is only true on the first page. */
.arthra-lead {
padding-inline: var(--zp-pad);
padding-bottom: max(2.5rem, 5.5556vw); /* 96px at 1728 */
background-color: var(--wp--preset--color--border);
}
/* One link around the whole thing, and the words at the foot are a span rather than a
second anchor. The design nests an inside an here, which is invalid HTML and a
guaranteed validator error; the cards already show the right shape, so the lead borrows
it. Tracks are the design's 8fr : 4fr. */
.arthra-lead__link {
display: grid;
grid-template-columns: 8fr 4fr;
gap: max(1.5rem, 3.7037vw); /* 64px at 1728 */
align-items: center;
color: var(--wp--preset--color--muted);
text-decoration: none;
}
/* Without this a long headline pushes the grid wider than the page instead of wrapping
— min-width on a grid item defaults to auto, not zero. */
.arthra-lead__link > * {
min-width: 0;
}
.arthra-lead__image {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* Where a post has no featured image the design draws a flat plate rather than hiding
the column, which would collapse the grid to one track and change the headline's
measure. Same ratio, so the row is the height it would have been. */
.arthra-lead__image--empty {
background-color: var(--wp--preset--color--surface-alt);
}
/* #a1a1a1 in the design. On this grey that is 1.9:1, so it takes the nearest passing
slug — the same substitution the whole page makes. */
.arthra-lead__meta {
margin: 0;
color: var(--wp--preset--color--muted);
font-family: var(--wp--preset--font-family--condensed);
font-size: max(0.75rem, 0.65rem + 0.2083vw, 0.8102vw); /* 14px at 1728, 12px at 768 */
font-weight: 700;
font-stretch: 75%;
line-height: 1;
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* Condensed here, unlike the h1 above it — the design switches face between the two.
Margin is zeroed against the user agent's 0.83em. */
.arthra-lead__title {
margin: max(0.75rem, 1.2153vw) 0 0; /* 21px at 1728 */
color: var(--wp--preset--color--muted);
font-size: max(1.625rem, 0.925rem + 1.4583vw, 2.3148vw); /* 40px at 1728, 26px at 768 */
font-stretch: 75%;
line-height: 1.18;
letter-spacing: 0.02em;
}
.arthra-lead__excerpt {
margin: max(0.75rem, 1.2153vw) 0 0; /* 21px at 1728 */
font-family: var(--wp--preset--font-family--condensed);
font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
font-weight: 700;
font-stretch: 75%;
line-height: 1.75;
letter-spacing: 0.05em;
}
/*--------------------------------------------------------------
# The two arrow links
--------------------------------------------------------------*/
/* The design draws two different ones and they are not interchangeable: the lead and the
closing link are Open Sans at a 40px gap with a 50px arrow, the card's is condensed at a
21px gap with a 43px one. Everything they share is here, keyed on two variables, rather
than written out three times.
The arrow is masked from --zp-arrow so it takes its colour from the words beside it. */
.arthra-lead__more,
.arthra-card__more,
.arthra-more__link,
.arthro-cta__link {
display: flex;
align-items: center;
gap: var(--arthra-arrow-gap);
font-weight: 700;
line-height: 1;
text-transform: uppercase;
text-decoration: none;
}
.arthra-lead__more::after,
.arthra-card__more::after,
.arthra-more__link::after,
.arthro-cta__link::after {
content: "";
flex: none;
width: var(--arthra-arrow-w);
aspect-ratio: 75 / 42;
background-color: currentcolor;
mask-image: var(--zp-arrow);
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
transition: transform var(--zp-motion);
}
/* The 6px nudge the design system specifies for call-to-action arrows. Driven from the
link the reader is actually over, which for the card and the lead is the whole plate. */
.arthra-card:hover .arthra-card__more::after,
.arthra-card:focus-visible .arthra-card__more::after,
.arthra-lead__link:hover .arthra-lead__more::after,
.arthra-lead__link:focus-visible .arthra-lead__more::after,
.arthra-more__link:hover::after,
.arthra-more__link:focus-visible::after,
.arthro-cta__link:hover::after,
.arthro-cta__link:focus-visible::after {
transform: translateX(max(6px, 0.3472vw));
}
.arthra-lead__more,
.arthra-more__link {
--arthra-arrow-gap: max(1rem, 2.3148vw); /* 40px at 1728 */
--arthra-arrow-w: max(1.75rem, 2.8935vw); /* 50px at 1728 */
font-family: var(--wp--preset--font-family--sans);
font-size: max(1rem, 1.0417vw); /* 18px at 1728 */
}
.arthra-lead__more {
margin-top: max(1.25rem, 1.9676vw); /* 34px at 1728 */
color: var(--wp--preset--color--muted);
}
/*--------------------------------------------------------------
# Card grid
--------------------------------------------------------------*/
/* The one section that leaves the grey, onto the lighter plate the cards sit on. */
.arthra-list {
padding-inline: var(--zp-pad);
padding-block: max(2.5rem, 5.5556vw); /* 96px at 1728 */
background-color: var(--wp--preset--color--surface-alt);
}
.arthra-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: max(1.5rem, 3.7037vw); /* 64px at 1728 */
}
/* Deliberately not centred and not stretched to fill: a last row of one or two sits left
under the columns above it, as drawn. */
.arthra-card {
display: block;
background-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--muted);
text-decoration: none;
}
/* The design fixes this at 293px, which is only correct at the reference width. Declared
as the ratio it has there — 466 is the column at 1728, once the page inset and two 64px
gutters are taken off 1728 — so the card keeps its drawn proportion at every width
instead of letterboxing on a wide screen. */
.arthra-card__image {
display: block;
width: 100%;
aspect-ratio: 466 / 293;
object-fit: cover;
}
.arthra-card__image--empty {
background-color: var(--wp--preset--color--border);
}
.arthra-card__body {
padding: max(1rem, 1.5625vw) max(1rem, 1.5625vw) max(1.25rem, 1.8519vw); /* 27px 27px 32px at 1728 */
}
/* faint, not muted: this one is on white, where 4.95:1 passes comfortably. The identical
line on the lead article is on the grey plate and has to be muted instead. */
.arthra-card__meta {
margin: 0;
color: var(--wp--preset--color--faint);
font-family: var(--wp--preset--font-family--condensed);
font-size: max(0.75rem, 0.65rem + 0.2083vw, 0.8102vw); /* 14px at 1728, 12px at 768 */
font-weight: 700;
font-stretch: 75%;
line-height: 1;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.arthra-card__title {
margin: max(0.5rem, 0.6944vw) 0 0; /* 12px at 1728 */
color: var(--wp--preset--color--muted);
font-size: max(1rem, 0.8rem + 0.4167vw, 1.1574vw); /* 20px at 1728, 16px at 768 */
font-stretch: 75%;
line-height: 1.25;
letter-spacing: 0.05em;
}
/* text-wrap: pretty is the design's own, and it is the right call here — it stops a
two-word orphan on the last line of a three-line excerpt. Ignored where unsupported. */
.arthra-card__excerpt {
margin: max(0.75rem, 0.9259vw) 0 0; /* 16px at 1728 */
font-family: var(--wp--preset--font-family--condensed);
font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
font-weight: 700;
font-stretch: 75%;
line-height: 1.75;
letter-spacing: 0.05em;
text-wrap: pretty;
}
/* No flex:1 above it, so this sits directly under the excerpt and a short card leaves
its space at the foot. That is what the design draws — the front page's card is the one
that pushes its link to a shared baseline, and the two are not the same component. */
.arthra-card__more {
--arthra-arrow-gap: max(0.75rem, 1.2153vw); /* 21px at 1728 */
--arthra-arrow-w: max(1.5rem, 2.4884vw); /* 43px at 1728 */
margin-top: max(1rem, 1.5625vw); /* 27px at 1728 */
font-family: var(--wp--preset--font-family--condensed);
font-size: max(1rem, 1.0417vw); /* 18px at 1728 */
font-stretch: 75%;
letter-spacing: 0.05em;
}
.arthra-card:hover .arthra-card__title,
.arthra-card:focus-visible .arthra-card__title {
color: var(--wp--preset--color--ink);
}
/* Shown when a category holds only the lead article, so the grid under it is empty. */
.arthra-empty {
margin: 0;
font-family: var(--wp--preset--font-family--condensed);
font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw);
font-weight: 700;
font-stretch: 75%;
line-height: 1.75;
letter-spacing: 0.05em;
}
/*--------------------------------------------------------------
# More articles
--------------------------------------------------------------*/
/* Centred under the grid, as drawn. The design gives one forward link and no way back,
so a second link appears from page two on — which is also the only navigation a reader
without JavaScript has. */
.arthra-more {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: max(1.5rem, 3.7037vw); /* 64px at 1728 */
margin-top: max(2rem, 3.7037vw); /* 64px at 1728 */
}
.arthra-more__link {
color: var(--wp--preset--color--muted);
}
.arthra-more__link:hover,
.arthra-more__link:focus-visible {
color: var(--wp--preset--color--ink);
}
/* The previous-page link points backwards, so its arrow is flipped rather than drawn a
second time. */
.arthra-more__link--prev::after {
transform: scaleX(-1);
order: -1;
}
.arthra-more__link--prev:hover::after,
.arthra-more__link--prev:focus-visible::after {
transform: scaleX(-1) translateX(max(6px, 0.3472vw));
}
/* While a page is being fetched. The link keeps its space so nothing below it moves. */
.arthra-more__link[aria-busy="true"] {
opacity: 0.5;
pointer-events: none;
}
/*--------------------------------------------------------------
# Narrow
--------------------------------------------------------------*/
/* Same breakpoints as the rest of the theme, widest first so the narrower query has the
last word. */
@media (max-width: 998px) {
/* Side by side, the headline column is a ribbon long before the picture stops being
worth its width. Stacked, the lead is simply the first card at full width. */
.arthra-lead__link {
grid-template-columns: 1fr;
gap: max(1rem, 3vw);
align-items: start;
}
.arthra-grid {
grid-template-columns: repeat(2, 1fr);
gap: max(1.25rem, 3vw);
}
}
@media (max-width: 767px) {
.arthra-grid {
grid-template-columns: 1fr;
}
/* Below the design's proportional range the lead's headline stops needing its own
scale — at this width 26px is already the floor and the two are the same thing. */
.arthra-lead__image,
.arthra-card__image {
aspect-ratio: 3 / 2;
}
}
/* The two links stack rather than sitting either side of a 64px gap that no longer
fits, and the row stays centred. */
@media (max-width: 479px) {
.arthra-more {
gap: 1.25rem;
}
}