/*
* MagsBC component styles. colors_and_type.css holds tokens; this file
* consumes them. Bump MAGSBC_STYLE_VER in functions.php on every change.
*/
body {
margin: 0;
font-family: var(--font-body);
color: var(--fg);
background: var(--bg);
font-size: var(--type-body);
font-weight: var(--weight-body);
line-height: 1.5; /* measured live: 24px/16px on the "We advocate..." card paragraph */
}
/* Skip-to-content link (accessibility audit, Sept 10, 2026): off-screen
until keyboard-focused, then drops into view above everything else. */
.skip-link {
position: absolute;
top: -100%;
left: 8px;
z-index: 1000;
background: var(--magsbc-olive);
color: var(--magsbc-white);
padding: 12px 20px;
border-radius: 0 0 4px 4px;
text-decoration: none;
font-weight: 700;
}
.skip-link:focus {
top: 0;
}
/* Respect the OS-level reduced-motion preference for every hover/focus
transition site-wide, rather than opting each one in individually. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Found Sept 10, 2026 while removing the highlight background from two
page titles: there was no generic h1 rule anywhere in the theme at
all. Every plain
site-wide (About, Resources, Members, News,
Jobs, People, Programs/Podcasts/Videos, single posts, the page.php
fallback — anywhere that isn't one of the few pages with their own
scoped h1 rule) had been rendering at the browser default (32px/700,
Chrome's UA-stylesheet 2em/bold) instead of the real --type-h1/
--weight-h1 tokens (48px/900) this whole time. Not visible before now
because the pages that DID have a real 48px/900 title got it from a
scoped rule or the highlight wrapper, not a shared base style. */
h1 {
font-size: var(--type-h1);
font-weight: var(--weight-h1);
margin: 0 0 16px;
}
/* Sept 10, 2026: every plain text link on the site (Read More, Learn More,
inline content links) had been wired to --cta (bright coral, meant for
solid-fill buttons) instead of the kit's own dedicated, darker "Links"
colour, which existed in the token file but was never actually used
anywhere. This is the real default now; components that are solid-fill
buttons override it explicitly with --cta as a *background*, not a text
colour. */
/* Underline + rollover added per direction. Every "whole card is a link"
component (news-grid__item-link, board-grid__item, resource-card,
magazine-grid__item, program-card__link, etc.) and every button/pill
already sets its own text-decoration:none directly on the anchor, so
this only actually reaches plain inline/text links, as intended. */
a {
color: var(--link);
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.15s ease;
}
/* :not([class]) is deliberate, not decorative: a pseudo-class like :hover
counts in the SAME specificity column as a plain class, so a bare
"a:hover" (element + pseudo-class) actually OUTRANKS a class selector's
own un-pseudo'd color rule (e.g. .site-header__cta { color: white })
the moment a class-based component doesn't also declare its own
:hover color. That's exactly what broke live: the header's "Become a
Member!" button's white text flipped to coral on hover — the same
coral as its own background — making the label invisible. Every
styled component in this file has a class, so excluding classed
anchors here scopes this rule to plain inline content links only,
which was the actual intent all along. */
a:not([class]):hover,
a:not([class]):focus {
color: var(--cta);
}
/*
* Site-wide container standard. Sept 10, 2026: found three different
* container systems in use (header max-width:1400px, hero with no
* centering at all — just flat padding, so its content sat closer to the
* true edge than everything else on a wide viewport — and footer/home-*
* sections at 1200px). 1200px was already the dominant value used
* everywhere on the homepage, so that's the standard everything else now
* matches, not a new invented number.
*/
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Shared social icon glyphs (header + footer). Rewritten Sept 10, 2026 —
were plain colored circles with no glyph at all; magsbc_social_icons()
now prints a real inline SVG per platform, this just sizes/colors it. */
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--cta);
color: var(--magsbc-white);
flex: 0 0 auto;
}
.social-icon svg {
width: 16px;
height: 16px;
}
/* Main header bar: logo left, nav center, CTA right. Rewritten Sept 10,
2026 — submenus used to render as a permanently-expanded inline list,
which inflated the nav's rendered width and pushed the CTA button off
the right edge of the viewport. Fixed by positioning submenus
absolutely (see .sub-menu below) so they no longer take up horizontal
space in the closed state, plus min-width:0 on the flex children so the
nav is actually allowed to shrink instead of forcing an overflow. */
.site-header {
background: var(--magsbc-yellow);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 16px 24px;
max-width: 1200px; /* was 1400px — now matches the site-wide 1200px standard */
margin: 0 auto;
}
.site-header__logo,
.site-header__nav {
min-width: 0;
}
.site-header__logo img {
display: block;
max-height: 60px;
width: auto;
}
.site-header__menu {
display: flex;
flex-wrap: wrap;
gap: 24px;
list-style: none;
margin: 0;
padding: 0;
}
.site-header__menu li {
position: relative;
}
.site-header__menu > li > a {
color: var(--fg);
text-decoration: none;
font-weight: var(--weight-small);
text-transform: none;
font-size: var(--type-small);
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
transition: color 0.15s ease;
}
.site-header__menu > li > a:hover,
.site-header__menu > li > a:focus {
color: var(--cta);
}
/* Chevron on items with a submenu, matching the live site */
.site-header__menu li.menu-item-has-children > a::after {
content: "";
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
margin-top: -3px;
}
/*
* Sept 10, 2026: the dropdown had a real "dead zone" bug — margin-top:8px
* left an 8px unhoverable gap between the nav link and the dropdown box.
* Since :hover is tied to the
's own box, moving the mouse down into
* that gap (which happens on almost any non-perfectly-vertical mouse path)
* closed the menu before a submenu item could be clicked. Fixed by
* removing the margin (the dropdown now sits flush against the parent,
* so the hoverable area is continuous) and adding the visual gap back as
* padding-top on the dropdown itself instead, which stays inside the
* hoverable box.
*/
.site-header__menu .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
list-style: none;
margin: 0;
padding: 8px 0;
z-index: 100;
}
.site-header__menu li:hover > .sub-menu,
.site-header__menu li:focus-within > .sub-menu {
display: block;
}
.site-header__menu .sub-menu a {
display: block;
padding: 8px 16px;
color: var(--fg);
text-decoration: none;
text-transform: none;
font-weight: 400;
font-size: 14px;
white-space: normal;
transition: background-color 0.15s ease, color 0.15s ease;
}
.site-header__menu .sub-menu a:hover,
.site-header__menu .sub-menu a:focus {
background: var(--border);
color: var(--cta);
}
.site-header__cta {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--cta);
color: var(--magsbc-white);
padding: 10px 24px;
border-radius: 4px;
text-decoration: none;
font-weight: var(--weight-small);
font-size: var(--type-small);
text-transform: none;
white-space: nowrap;
flex: 0 0 auto;
transition: filter 0.15s ease;
}
.site-header__cta:hover,
.site-header__cta:focus {
filter: brightness(0.92);
}
/* Footer — funders section rebuilt Sept 10, 2026 as its own light-background
section, separate from the dark footer proper. Confirmed by measuring
element position on the live site: the funders row sits ~470px above
where the dark background actually starts. Divider between them is the
live site's own measured value: 10px solid var(--magsbc-teal). */
.site-footer__funders-section {
background: var(--magsbc-white);
border-bottom: 10px solid var(--magsbc-teal);
padding: 64px 24px;
}
.site-footer__funders {
display: flex;
flex-wrap: wrap;
gap: 48px 64px;
align-items: center;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
}
.site-footer__funders img {
max-height: 56px;
width: auto;
}
.site-footer {
background: var(--magsbc-dark-tone);
color: var(--magsbc-white);
padding: 56px 24px 32px;
}
/* Restyled Sept 10, 2026 against a direct reference: left-aligned
brandmark and acknowledgement (were centred), copyright + social icons
sharing one row at the very bottom.
Simplified/corrected several more times, same day: the standalone
contact column and the newsletter's fake email input are gone, the
newsletter block folded into this single bottom section (paired with
the brand column), and finally the contact address/phone/email folded
into the copyright line itself rather than its own separate line —
see the file docblock for the full history. */
.site-footer__bottom-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.site-footer__newsletter {
max-width: 380px;
flex: 0 0 auto;
}
.site-footer__newsletter h2 {
font-size: var(--type-h2);
font-weight: var(--weight-h2);
margin: 0 0 12px;
}
.site-footer__newsletter p {
max-width: 320px;
margin: 0 0 16px;
font-size: var(--type-small); /* was inheriting body's 16px — matched to the rest of the footer's small text (acknowledgement, copyright, contact line), all 13px, per direction */
line-height: 1.7;
color: var(--fg-on-dark-muted);
}
/* Text link + arrow, not a solid pill button, per direct reference. */
.site-footer__newsletter-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--magsbc-white);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.15s ease;
}
.site-footer__newsletter-link svg {
width: 18px;
height: 18px;
transition: transform 0.15s ease;
}
.site-footer__newsletter-link:hover,
.site-footer__newsletter-link:focus {
color: var(--magsbc-coral);
}
.site-footer__newsletter-link:hover svg,
.site-footer__newsletter-link:focus svg {
transform: translateX(3px);
}
/* Outlined, not solid — matches the reference (a thin ring, not a
filled coral circle like the header/footer icons used elsewhere). */
.site-footer__social {
display: flex;
gap: 12px;
}
.site-footer__social .social-icon {
width: 32px;
height: 32px;
background: none;
border: 1px solid var(--border-on-dark, rgba(255, 255, 255, 0.3));
color: var(--magsbc-white);
transition: border-color 0.15s ease, color 0.15s ease;
}
.site-footer__social .social-icon:hover,
.site-footer__social .social-icon:focus {
border-color: var(--magsbc-coral);
color: var(--magsbc-coral);
}
.site-footer__social .social-icon svg {
width: 14px;
height: 14px;
}
/* No longer has its own top border/padding — that was separating it
from .site-footer__top, which is gone; .site-footer__funders-section's
teal divider is now the only rule above this section. */
.site-footer__bottom {
max-width: 1200px;
margin: 0 auto;
}
.site-footer__brandmark {
margin: 0 0 20px;
}
/* The logo file itself (assets-logo/HORIZONTAL/REVERSE/MAGSBC_H-R.png)
has a transparent margin baked into its canvas — measured via its real
pixel bounding box: 360x216 canvas, glyph content starting at x=30, so
an 8.3% left inset before the mountain mark itself starts. At this
height that's 13px, which left the "M" visibly indented versus the
acknowledgement text below it — pulled back with a matching negative
margin so the mark's own left edge lines up with the text. */
.site-footer__brandmark img {
max-height: 96px; /* was 48px, then 72px — enlarged further per direction */
width: auto;
display: block;
margin-left: -13px;
}
.site-footer__acknowledgement {
max-width: 640px;
margin: 0 0 28px;
font-size: var(--type-small);
line-height: 1.7;
color: var(--fg-on-dark-muted);
text-align: left;
}
.site-footer__meta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 24px;
border-top: 1px solid var(--border-on-dark, rgba(255, 255, 255, 0.14));
}
.site-footer__copyright {
margin: 0;
font-size: var(--type-small);
color: var(--fg-on-dark-muted);
}
.site-footer__copyright a {
color: var(--fg-on-dark-muted);
text-decoration: underline;
text-underline-offset: 3px;
}
.site-footer__copyright a:hover { color: var(--magsbc-white); }
/* Homepage hero — yellow band + illustration, both section-level settings
on the live site, not part of post_content. See front-page.php for the
known fragility around where "hero" ends and "rest" begins. */
.home-hero {
background-color: var(--magsbc-yellow);
background-repeat: no-repeat;
background-position: right center;
background-size: contain;
padding: 112px 24px; /* was 64px — more height per direction */
}
/* Was max-width:640px with no centering — sat flush at the section's flat
24px padding, closer to the true edge than every other section on a
wide viewport. Now uses the site-wide 1200px container; the 640px
figure moves to the heading/subhead themselves so the text still
doesn't stretch full-width. */
.home-hero__inner {
max-width: 1200px;
margin: 0 auto;
}
.home-hero__inner h2:first-child {
max-width: 640px;
font-size: var(--type-display); /* was the same clamp() hand-copied instead of using the token */
font-weight: var(--weight-display);
line-height: 1.2;
margin: 0 0 16px;
}
.home-hero__inner h2:nth-child(2) {
max-width: 640px;
font-weight: var(--weight-lead);
font-size: var(--type-lead);
margin: 0 0 24px;
}
.home-hero__inner a {
display: inline-block;
background: var(--cta);
color: var(--magsbc-white);
padding: 12px 28px;
border-radius: 4px;
text-decoration: none;
font-weight: 700;
}
.home-content {
max-width: 1200px; /* was 1000px — this is the page.php-canvas container used by Programs/Podcasts/Videos/Non-Traditional Newsstands, so it needs to match the site-wide 1200px standard, not its own value */
margin: 0 auto;
padding: 48px 24px;
}
.home-content img {
max-width: 100%;
height: auto;
}
/* Homepage sections, rebuilt Sept 10, 2026 to match the real live layout.
Every section below reuses --type-* tokens rather than ad hoc sizes. */
.home-intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
max-width: 1200px;
margin: 0 auto;
padding: 80px 24px 48px;
align-items: start;
}
.home-intro h2 {
font-size: var(--type-h2);
font-weight: var(--weight-h2);
line-height: 1.2;
margin: 0;
}
.home-intro p {
/* Was --type-body — measured live against the real "MagsBC is
dedicated..." paragraph: 25.6px/300/38.4px line-height, i.e.
--type-lead, not body copy. */
font-size: var(--type-lead);
font-weight: var(--weight-lead);
line-height: 1.5;
margin: 0;
}
.home-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
max-width: 1200px;
margin: 0 auto;
padding: 24px 24px 80px;
}
/* Filled-background icon badge, one per intro card — added Sept 10, 2026
per direction to give these four cards a little personality. Each
variant just swaps the fill colour; kept off var(--cta) so it doesn't
compete with real buttons on the page. */
.home-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
color: var(--magsbc-white);
margin-bottom: 16px;
}
.home-card__icon svg {
width: 24px;
height: 24px;
}
.home-card__icon--teal-light {
background: var(--magsbc-teal-light);
color: var(--magsbc-olive);
}
.home-card__icon--coral {
background: var(--magsbc-coral);
}
/* Gold from the brand swatch (#ECBA3D) — deliberately distinct from
--magsbc-yellow (#F9D777, used for CTAs/highlights elsewhere) so these
four badges read as four genuinely different colours, not two near-
duplicates of yellow. Scoped here rather than promoted to a token
since it's only used for this one badge so far. */
.home-card__icon--gold {
background: #ECBA3D;
color: var(--magsbc-olive);
}
.home-card__icon--soft-green {
background: var(--magsbc-soft-green);
}
.home-card h3 {
font-size: var(--type-h3);
font-weight: var(--weight-h3);
margin: 0 0 12px;
}
.home-card p {
font-size: var(--type-body);
margin: 0 0 12px;
}
/* Sized to match every other card's "Read More"/"Learn More" link
(.news-grid__read-more) — was body-sized (16px), the only "more" link
on the site not on the shared small/uppercase/bold scale. */
.home-card__link {
color: var(--link);
font-size: var(--type-small);
font-weight: var(--weight-small);
text-transform: none;
text-decoration: none;
}
.home-matter {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
max-width: 1200px;
margin: 0 auto;
padding: 64px 24px;
align-items: start; /* was center — reference shows content top-anchored per column, not vertically centred */
}
/* Corrected Sept 10, 2026: this section's post_content is one flat blob
(heading, copy, a paragraph mixing both CTA buttons with the magazine
image, then a caption) — laid directly against the 2-column grid above,
the buttons+image and caption landed in whichever cell auto-flow put
them rather than under the heading/copy. front-page.php now splits it
into two explicit column wrappers instead. */
.home-matter__buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}
.home-matter h1 {
font-size: var(--type-h1);
font-weight: var(--weight-h1);
margin: 0 0 16px;
}
/* Sept 10, 2026 correction: only the FIRST paragraph ("From culture and
politics...") is lead-sized on the reference — the second paragraph
("Become part of a network...") and the "Check out TURNING A PAGE"
caption are regular body copy. The original pass wrongly sized every
paragraph in this section as lead. */
.home-matter__text p:first-of-type {
font-size: var(--type-lead);
font-weight: var(--weight-lead);
line-height: 1.5;
margin: 0 0 20px;
}
.home-matter p a {
color: var(--link);
font-weight: 700;
text-decoration: none; /* was inheriting the browser default underline */
}
.home-matter img {
width: 100%;
height: auto;
border-radius: 4px;
}
/* The "Check out TURNING A PAGE..." caption under the magazine spread —
was inheriting oversized text with no rule of its own; pinned to body
size like every other caption/plain paragraph on the site. */
.home-matter__image p {
font-size: var(--type-body);
font-weight: var(--weight-body);
margin: 12px 0 0;
}
.home-matter a[href*="become-a-member"] {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--cta);
color: var(--magsbc-white);
font-size: var(--type-small);
font-weight: var(--weight-small);
text-transform: none;
padding: 16px 32px;
border-radius: 4px;
text-decoration: none;
margin-right: 12px;
transition: filter 0.15s ease;
}
.home-matter a[href*="become-a-member"]:hover,
.home-matter a[href*="become-a-member"]:focus {
filter: brightness(0.92);
}
.home-matter a[href$="/about/"] {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
color: var(--fg);
font-size: var(--type-small);
font-weight: var(--weight-small);
text-transform: none;
padding: 16px 32px;
border: 1px solid var(--border);
border-radius: 4px;
text-decoration: none;
transition: background-color 0.15s ease;
}
.home-matter a[href$="/about/"]:hover,
.home-matter a[href$="/about/"]:focus {
background: var(--border);
}
.home-news {
max-width: 1200px;
margin: 0 auto;
padding: 24px 24px 64px;
}
.home-news h2 {
font-size: var(--type-h3);
font-weight: var(--weight-h3);
margin: 0 0 20px;
}
/* Generalized Sept 10, 2026 (was .home-news-scoped only) so the same
native get_search_form() markup used on the News page and search
results looks the same as the homepage's own search preview. */
.search-form {
display: flex;
gap: 0;
margin: 24px 0 32px;
max-width: 600px;
}
.search-field {
flex: 1 1 auto;
padding: 12px 16px;
border: 1px solid var(--border);
border-radius: 0;
font-size: var(--type-body);
}
.search-submit {
background: var(--magsbc-olive);
color: var(--magsbc-white);
border: none;
padding: 12px 24px;
font-size: var(--type-small);
font-weight: var(--weight-small);
text-transform: none;
cursor: pointer;
transition: filter 0.15s ease;
}
.search-submit:hover,
.search-submit:focus {
filter: brightness(0.85);
}
.home-news .news-grid {
padding: 0;
margin: 0 0 32px;
}
/* Sept 10, 2026: made universal (was .home-news .news-grid__item only) —
every other card type on the site (board-grid, resource-card,
magazine-grid) is bordered/padded; the plain News/Jobs/Professional
Development pages' cards were the one card type left unboxed. Padding
normalized to 24px everywhere too — board-grid/magazine-grid had
drifted to 20px while resource-card/sidebar-card used 24px. */
.news-grid__item {
border: 1px solid var(--border);
border-radius: 4px;
padding: 24px;
}
.home-news__more {
text-align: right;
}
.home-news__more-link {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--fg);
color: var(--fg);
font-size: var(--type-small);
font-weight: var(--weight-small);
text-transform: none;
padding: 14px 28px;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.15s ease, color 0.15s ease;
}
.home-news__more-link:hover,
.home-news__more-link:focus {
background: var(--fg);
color: var(--magsbc-white);
}
/* Magazine category bands — full-bleed colour, real cover grids pulled by
category via WP_Query, not hardcoded images. */
.home-band {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
padding: 64px 24px;
}
.home-band--arts-culture { background: var(--magsbc-yellow); }
.home-band--writing-visual-arts { background: var(--magsbc-coral); }
.home-band--business-community { background: var(--magsbc-teal-light); }
.home-band--lifestyle-leisure { background: var(--magsbc-soft-green); }
.home-band__text {
max-width: 480px;
margin: 0 auto;
}
.home-band__text h2 {
font-size: var(--type-h2);
font-weight: var(--weight-h2);
margin: 0 0 16px;
}
.home-band__text p {
font-size: var(--type-body);
margin: 0 0 20px;
}
.home-band__link {
font-weight: 700;
color: var(--magsbc-olive);
text-decoration: none;
}
.home-band__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
/* Sept 10, 2026: real magazine covers vary in aspect ratio (some near-
square, some tall), so without a fixed crop the grid cells came out
uneven heights row to row. Fixed 3:4 (standard magazine cover ratio)
with object-fit:cover, same fix applied to .magazine-grid below.
Corrected same day, second pass, per direct reference: a floating
drop-shadow read as "lifted card" and didn't match the flatter,
bordered-card language used everywhere else on the site (resource-
card, board-grid, magazine-grid) — swapped for the same thin border +
small radius instead. */
.home-band__grid a {
display: block;
aspect-ratio: 3 / 4;
overflow: hidden;
border: 1px solid rgba(20, 24, 10, 0.15);
border-radius: 4px;
background: var(--magsbc-white);
}
.home-band__grid img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.2s ease;
}
.home-band__grid a:hover img,
.home-band__grid a:focus img {
transform: scale(1.05);
}
/* Testimonial carousel */
.home-testimonials {
max-width: 800px;
margin: 0 auto;
padding: 80px 24px;
text-align: center;
}
.home-testimonials h2 {
font-size: var(--type-h1);
font-weight: var(--weight-h1);
margin: 0 0 40px;
}
.testimonial-slide blockquote {
font-size: var(--type-lead);
font-style: italic;
font-weight: var(--weight-lead);
margin: 0 0 24px;
}
.testimonial-slide__name {
font-weight: 700;
margin: 0;
}
.testimonial-slide__role {
font-size: var(--type-small);
text-transform: none;
font-weight: var(--weight-small);
opacity: 0.7;
margin: 4px 0 0;
}
.testimonial-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 32px;
}
.testimonial-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--border);
border: none;
padding: 0;
cursor: pointer;
}
.testimonial-dot.is-active {
background: var(--fg);
}
/* Non-Traditional Newsstands' carousel additionally has prev/next arrow
buttons either side of the slide (the homepage's own carousel uses
dots only) — reuses the page's own two arrow