/* ==========================================================================
ABTB 2026 — news list and news article.
Hand-written, like abtb-2026-gallery.css — not generated from the prototypes.
Loaded on top of the skin stylesheet, and reads that file's tokens (--ink,
--accent, --line, …) so it follows the theme without redefining anything.
--glow and --surface-raised exist only in Trendy, so they are always read
with a neutral fallback.
Two rules this file exists to enforce, both learned from the live site:
1. A card shows PLAIN TEXT. The excerpt comes out of a wysiwyg field, and
the first version wrote it into the card as real HTML. An inside the
card's own makes the parser close the outer anchor early, so one card
became four sibling anchors and the grid collapsed. The template now
strips the markup; this file styles the result as a single clamped
paragraph.
2. An article is a reading page, not a card. Its text sits on a measured
column with a rail beside it, rather than a narrow ragged column pinned
to the left of an empty 1185px container.
========================================================================== */
.news-section { padding-bottom: clamp(48px, 8vw, 90px); }
/* Reveal-on-scroll, identical timing to .project-card in the prototypes, so a
news page scrolls with the same rhythm as the project grids.
Gated behind .js-reveal, which abtb-2026-news.js sets on before it
does anything else. The failure mode matters more than the animation: hiding
by default meant that any page carrying news cards WITHOUT that script
rendered the whole section blank, which is exactly what happened on the home
page. Opt in to hiding, never out of it. */
.js-reveal .news-hero, .js-reveal .news-card {
opacity: 0;
transform: translateY(22px);
transition: opacity .6s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.js-reveal .news-hero.in-view, .js-reveal .news-card.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.news-hero, .news-card { opacity: 1; transform: none; transition: none; }
}
.news-date {
display: block;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .03em;
color: var(--ink-faint);
font-variant-numeric: tabular-nums;
}
.news-meta { display: flex; align-items: center; gap: 12px; }
.news-kicker {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--accent);
padding: 3px 9px;
border-radius: 100px;
background: var(--accent-soft);
}
.news-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.news-tags span {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--accent);
background: var(--accent-soft);
padding: 3px 9px;
border-radius: 100px;
}
/* the "+7" chip is a count, not a tag: quieter, so it never competes */
.news-tags span.more { color: var(--ink-faint); background: transparent; border: 1px solid var(--line); }
.news-empty { color: var(--ink-soft); padding: 40px 0; }
.news-more {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 4px;
font-size: 13.5px;
font-weight: 700;
letter-spacing: .02em;
color: var(--accent);
}
.news-more svg { width: 16px; height: 16px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.news-hero:hover .news-more svg { transform: translateX(4px); }
/* ------------------------------------------------------------------- hero */
.news-hero {
display: grid;
grid-template-columns: 1fr;
border-radius: 20px;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--card-shadow);
margin-bottom: clamp(28px, 4vw, 44px);
transition: box-shadow .25s ease, border-color .25s ease;
}
.news-hero:hover { box-shadow: 0 24px 48px -20px var(--glow, rgba(10,17,40,.28)); border-color: var(--accent); }
.news-hero:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (min-width: 860px) { .news-hero { grid-template-columns: 1.15fr 1fr; align-items: stretch; } }
.news-hero-media { position: relative; aspect-ratio: 16/9; background: var(--paper); }
@media (min-width: 860px) { .news-hero-media { aspect-ratio: auto; height: 100%; min-height: 320px; } }
.news-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-hero-body {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 12px;
padding: clamp(22px, 3.4vw, 40px);
}
.news-hero-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 600;
font-size: clamp(24px, 2.6vw, 34px);
line-height: 1.2;
margin: 0;
color: var(--ink);
text-wrap: balance;
}
.news-hero-excerpt {
margin: 0;
color: var(--ink-soft);
font-size: 16px;
line-height: 1.6;
max-width: 56ch;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-hero:hover .news-hero-title { color: var(--accent); }
.news-hero-title, .news-hero-excerpt { transition: color .2s ease; }
/* A text-only lead item is not a broken card, it is a different card: one
column, larger type, and a rule down the side instead of a photo. */
.news-hero.no-image { grid-template-columns: 1fr; border-left: 4px solid var(--accent); }
.news-hero.no-image .news-hero-body { padding-block: clamp(28px, 4vw, 46px); }
.news-hero.no-image .news-hero-title { font-size: clamp(27px, 3.2vw, 40px); max-width: 22ch; }
.news-hero.no-image .news-hero-excerpt { font-size: 17px; max-width: 68ch; -webkit-line-clamp: 3; }
/* ------------------------------------------------------------------- grid */
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: clamp(18px, 2.4vw, 28px);
}
.news-card {
display: flex;
flex-direction: column;
border-radius: 18px;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--card-shadow);
transition: box-shadow .25s ease, border-color .25s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}
.news-card:hover {
border-color: var(--accent);
box-shadow: 0 20px 40px -18px var(--glow, rgba(10,17,40,.24));
transform: translateY(-2px);
}
.news-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.news-card-media { position: relative; aspect-ratio: 16/10; background: var(--paper); overflow: hidden; }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.news-card:hover .news-card-media img { transform: scale(1.04); }
.news-card-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1 1 auto; }
.news-card-title {
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1.3;
margin: 2px 0 0;
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color .2s ease;
}
.news-card:hover .news-card-title { color: var(--accent); }
.news-card-excerpt {
margin: 0;
color: var(--ink-soft);
font-size: 14px;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* the tag row is the card's baseline: pushed to the bottom so every card in a
row ends on the same line however long its title ran */
.news-card .news-tags { margin-top: auto; padding-top: 12px; }
/* a card with no image (nothing uploaded, nothing pasted into the text) gets a
quiet accent rule and more room for the words instead of empty space */
.news-card.no-image .news-card-body { padding-top: 22px; border-top: 3px solid var(--accent-soft); }
.news-card.no-image .news-card-title { font-size: 20px; -webkit-line-clamp: 4; }
/* --------------------------------------------------------------- pagination */
.news-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: clamp(36px, 6vw, 64px);
}
.news-pager-numbers { display: flex; align-items: center; gap: 4px; }
.news-pager a, .news-pager span.current {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 6px;
border-radius: 100px;
font-size: 14px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--ink-soft);
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.news-pager-numbers a:hover { background: var(--accent-soft); color: var(--accent); }
.news-pager span.current { background: var(--accent); color: var(--on-accent); }
.news-pager-nav {
width: 40px; height: 40px;
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink);
}
.news-pager-nav svg { width: 17px; height: 17px; }
.news-pager-nav:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.news-pager-nav:focus-visible, .news-pager-numbers a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ==========================================================================
SINGLE ARTICLE
========================================================================== */
.article-page { padding-bottom: clamp(56px, 9vw, 110px); }
.article-page > .container > .breadcrumb { margin-bottom: clamp(20px, 3vw, 34px); }
/* The head, the picture, the columns and the previous/next pair all share one
max-width, so the title starts on exactly the same vertical line as the first
word of the article. Measuring the first version showed the title indented
110px from the body text, which reads as a mistake rather than as a style. */
.article-head { max-width: 1120px; }
.article-title, .article-meta { max-width: 900px; }
.article-kicker {
display: inline-block;
margin-bottom: 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent);
padding: 5px 12px;
border-radius: 100px;
background: var(--accent-soft);
transition: background .18s ease, color .18s ease;
}
.article-kicker:hover { background: var(--accent); color: var(--on-accent); }
.article-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 600;
font-size: clamp(30px, 4.4vw, 52px);
line-height: 1.12;
letter-spacing: -.01em;
margin: 0;
color: var(--ink);
text-wrap: balance;
}
.article-standfirst {
margin: clamp(16px, 2vw, 22px) 0 0;
max-width: 62ch;
font-size: clamp(17px, 1.5vw, 20px);
line-height: 1.55;
color: var(--ink-soft);
}
.article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
margin-top: clamp(18px, 2.4vw, 26px);
padding-top: 16px;
border-top: 1px solid var(--line);
}
.article-date {
font-size: 13px;
font-weight: 600;
letter-spacing: .03em;
color: var(--ink-faint);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.article-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.article-tags span {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-soft);
border: 1px solid var(--line);
padding: 3px 9px;
border-radius: 100px;
}
/* Wider than the text, narrower than the page: the picture leads, the column
below it stays readable. max-height stops a portrait photo from filling the
whole viewport before a single word is visible. */
.article-figure {
max-width: 1120px;
margin-top: clamp(26px, 4vw, 44px);
margin-bottom: clamp(30px, 4.5vw, 52px);
}
.article-figure img {
width: 100%;
height: auto;
max-height: min(70vh, 640px);
object-fit: cover;
border-radius: 16px;
background: var(--paper);
}
.article-layout { max-width: 1120px; }
@media (min-width: 1040px) {
.article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 220px;
gap: clamp(40px, 5vw, 76px);
align-items: start;
}
}
/* --------------------------------------------------------------- side rail */
.article-rail { margin-top: clamp(32px, 4vw, 44px); }
.article-rail-inner { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
@media (min-width: 1040px) {
.article-rail { margin-top: 4px; }
/* clears the sticky site header */
.article-rail-inner { position: sticky; top: 104px; }
}
@media (max-width: 1039px) {
.article-rail { padding-top: 26px; border-top: 1px solid var(--line); }
.article-rail-inner { align-items: stretch; }
.article-share { flex-direction: row; flex-wrap: wrap; }
}
.rail-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-faint);
}
.article-share { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.share-btn {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
padding: 9px 14px;
border: 1px solid var(--line);
border-radius: 100px;
background: var(--surface);
color: var(--ink-soft);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: left;
transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.share-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.share-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.share-btn.copied { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.rail-back {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 8px;
font-size: 13px;
font-weight: 600;
color: var(--ink-soft);
transition: color .18s ease;
}
.rail-back svg { width: 16px; height: 16px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.rail-back:hover { color: var(--accent); }
.rail-back:hover svg { transform: translateX(-4px); }
/* --------------------------------------------------- previous / next article */
.article-nav {
max-width: 1120px;
display: grid;
gap: 14px;
margin-top: clamp(44px, 6vw, 76px);
padding-top: clamp(28px, 4vw, 40px);
border-top: 1px solid var(--line);
}
@media (min-width: 720px) { .article-nav { grid-template-columns: 1fr 1fr; } }
.article-nav-gap { display: none; }
@media (min-width: 720px) { .article-nav-gap { display: block; } }
.article-nav-link {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px 22px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--surface);
transition: border-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}
.article-nav-link:hover {
border-color: var(--accent);
box-shadow: 0 18px 34px -20px var(--glow, rgba(10,17,40,.22));
transform: translateY(-2px);
}
.article-nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.article-nav-link.next { text-align: right; }
.article-nav-label {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-faint);
}
.article-nav-link.next .article-nav-label { justify-content: flex-end; }
.article-nav-label svg { width: 15px; height: 15px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.article-nav-link.prev:hover .article-nav-label svg { transform: translateX(-4px); }
.article-nav-link.next:hover .article-nav-label svg { transform: translateX(4px); }
.article-nav-title {
font-size: 16px;
font-weight: 700;
line-height: 1.35;
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color .2s ease;
}
.article-nav-link:hover .article-nav-title { color: var(--accent); }
.news-article-source {
max-width: 70ch;
margin: clamp(24px, 3vw, 36px) 0 0;
padding-top: 18px;
border-top: 1px solid var(--line);
font-size: 13.5px;
color: var(--ink-faint);
}
.news-article-source a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.news-article-source a:hover { color: var(--accent); }
/* ==========================================================================
ARTICLE BODY — prose reset for the wysiwyg `content` field.
Unpredictable editor-authored markup: headings, links, lists, quotes, pasted
hotlinked images, , and whole video wrappers. Every common element
gets a sensible default rather than inheriting the page's own reset.
========================================================================== */
.news-article-body {
max-width: 68ch;
color: var(--ink);
font-size: 17.5px;
line-height: 1.75;
overflow-wrap: break-word;
}
.news-article-body > *:first-child { margin-top: 0; }
.news-article-body > *:last-child { margin-bottom: 0; }
.news-article-body p { margin: 0 0 22px; }
.news-article-body a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
/* a pasted bare URL is one very long unbreakable word */
overflow-wrap: anywhere;
}
.news-article-body a:hover { text-decoration-thickness: 2px; }
.news-article-body strong, .news-article-body b { font-weight: 700; }
.news-article-body em, .news-article-body i { font-style: italic; }
.news-article-body h2, .news-article-body h3, .news-article-body h4 {
color: var(--ink);
line-height: 1.3;
margin: 38px 0 14px;
text-wrap: balance;
}
.news-article-body h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 27px; }
.news-article-body h3 { font-weight: 700; font-size: 20px; }
.news-article-body h4 { font-weight: 700; font-size: 17px; }
/* editors sometimes paste an into the body; it is not the page title */
.news-article-body h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 27px; line-height: 1.3; margin: 38px 0 14px; }
.news-article-body ul, .news-article-body ol { margin: 0 0 22px; padding-left: 22px; }
.news-article-body ul { list-style: disc; }
.news-article-body ol { list-style: decimal; }
.news-article-body li { margin-bottom: 8px; }
.news-article-body li:last-child { margin-bottom: 0; }
.news-article-body blockquote {
margin: 30px 0;
padding: 4px 0 4px 22px;
border-left: 3px solid var(--accent);
color: var(--ink-soft);
font-style: italic;
font-size: 18.5px;
}
.news-article-body hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }
/* `width` here beats the editor's own width="100%" presentation attribute, so a
pasted 3000px photo fills the measure and a small one keeps its real size
instead of being blown up. A picture served from another site gets a paper
backdrop while it crawls in; abtb-2026-news.js retires it if it never does. */
.news-article-body img {
display: block;
width: auto;
max-width: 100%;
height: auto;
border-radius: 10px;
margin: 30px auto;
background: var(--paper);
}
.news-article-body figure { margin: 30px 0; }
.news-article-body figure img { margin: 0; }
.news-article-body figcaption {
margin-top: 8px;
font-size: 13.5px;
color: var(--ink-faint);
font-style: italic;
}
/* video, both the editor's own .videoWrapper and the facade this page builds
from a pasted bare YouTube link */
.news-article-body .videoWrapper,
.news-article-body .video-embed {
position: relative;
aspect-ratio: 16 / 9;
margin: 30px 0;
border-radius: 12px;
overflow: hidden;
background: #0b0d12;
}
.news-article-body .videoWrapper iframe,
.news-article-body .video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.news-article-body iframe { max-width: 100%; }
/* Click-to-play facade: one thumbnail instead of the ~1.5MB the real player
pulls in, and nothing is requested from the video host until it is clicked. */
.video-embed .video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.video-embed .video-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border: 0;
background: linear-gradient(180deg, rgba(6,8,14,.15), rgba(6,8,14,.45));
cursor: pointer;
transition: background .2s ease;
}
.video-embed .video-play:hover { background: linear-gradient(180deg, rgba(6,8,14,.05), rgba(6,8,14,.35)); }
.video-embed .video-play:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.video-embed .video-play svg { width: 64px; height: 64px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
.video-embed .video-play:hover svg { transform: scale(1.06); }
.video-embed .video-play svg { transition: transform .2s cubic-bezier(.2,.8,.2,1); }
/* a picture whose remote host never answered: removed rather than left as a
grey slab in the middle of the text */
.news-article-body img.img-failed,
.article-figure.figure-failed { display: none; }
.news-article-body table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 15px; }
.news-article-body th, .news-article-body td { padding: 8px 12px; border: 1px solid var(--line); text-align: left; }
.news-article-body th { background: var(--paper); font-weight: 700; }
/* a wide pasted table scrolls inside itself rather than breaking the page */
.news-article-body table { display: block; overflow-x: auto; }