/**
* Connecting Directors — Front-end brand layer
*
* Loaded after the JNews parent stylesheet (see inc/enqueue.php) so these
* overrides win. Brand tokens are mirrored from theme.json as CSS custom
* properties for use in classic (non-block) JNews templates.
*
* @package PL_CD_Theme
* @since 0.1.0
*/
/* ==========================================================================
Brand fonts — self-hosted (assets/fonts/, SIL OFL). Same files, weights and
subsets Google Fonts served until 0.7.1: Poppins 400/700 (weights between
resolve to these, as before) and Oswald 400–500 (one variable file), each
split latin / latin-ext so a page downloads only the subset it uses. The
two Poppins latin files are preloaded (pl_cd_preload_fonts() in
functions.php) so they're in place for the first paint — loading them late
from Google reflowed every article (see inc/enqueue.php).
========================================================================== */
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/poppins-regular-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/poppins-regular.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/poppins-bold-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/poppins-bold.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Oswald";
font-style: normal;
font-weight: 400 500;
font-display: swap;
src: url("../fonts/oswald-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Oswald";
font-style: normal;
font-weight: 400 500;
font-display: swap;
src: url("../fonts/oswald.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* Brand palette — 2026 rebrand (Brand Guidelines, 20 Aug 2026).
Token NAMES are unchanged on purpose: --cd-cream etc. are referenced
throughout this file and in the homepage block markup, so re-pointing
the values reskins the site without touching a single call site.
--cd-cream is now an off-white rather than a cream; renaming it would
have meant editing every rule for no visual gain. */
--cd-cream: #f8fafc; /* was #f2f1ed */
--cd-red: #ff1e56; /* was #fa3239 */
--cd-blue: #007aff; /* was #1115cd */
--cd-navy: #0a1128; /* was #0c0e38 */
--cd-white: #ffffff;
--cd-muted: #707070; /* Brand Guidelines: subheader grey */
/* Accessible text variants. Both brand primaries FAIL WCAG AA as body
text on the new off-white: #ff1e56 is 3.60:1 and #007aff is 3.84:1
against #f8fafc, where AA needs 4.5:1. The brand hexes stay for fills,
pills, gradients and large display type (which only needs 3:1); inline
links and small text use these darkened, on-hue variants at 4.5:1+.
Both brand hexes are fine on navy (4.96 and 4.65), so reverse contexts
keep the pure colours. */
--cd-red-ink: #e01a4c; /* 4.54:1 on --cd-cream */
--cd-blue-ink: #006fe8; /* 4.52:1 on --cd-cream */
--cd-gradient-red-blue: linear-gradient(135deg, #ff1e56 0%, #007aff 100%);
/* Typography — Brand Guidelines: Poppins is the PRIMARY face and now runs
headlines as well as body; Oswald is secondary, for taglines, subheaders
and post meta. Montserrat (the July stand-in for All Round Gothic) is
retired. */
--cd-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--cd-font-heading: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--cd-font-subheading: "Oswald", "Arial Narrow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/*
* Brand rules are applied progressively during M1 branding.
* Kept intentionally minimal at scaffold stage so nothing shifts the
* live site before the brand kit (logo vectors + font licence) lands.
*/
/* Example — enable during M1 branding:
body {
font-family: var(--cd-font-body);
color: var(--cd-navy);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--cd-font-heading);
}
*/
/* Custom block style: CD Gradient button (registered in functions.php) */
.wp-block-button.is-style-cd-gradient .wp-block-button__link {
background: var(--cd-gradient-red-blue);
border: 0;
color: var(--cd-white);
}
/* -------------------------------------------------------------------------
* Hero category badge — gradient pill
* Applied via .cd-hero-badge on the homepage hero's core/post-terms block.
* Self-contained so the block markup only needs the class (no inline colour,
* transform, spacing or font). Each category term renders as its own pill,
* matching the JNews category-label look with the CD red→blue brand gradient.
* ---------------------------------------------------------------------- */
.cd-hero-badge {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.cd-hero-badge a {
display: inline-block;
padding: 4px 10px; /* 0.8.2: 4px makes the tap target ≥24px tall (was ~23px) */
background: var(--cd-gradient-red-blue);
border-radius: 3px;
color: var(--cd-white);
font-family: var(--cd-font-heading);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 1px;
line-height: 1.5;
text-transform: uppercase;
text-decoration: none;
}
/* Drop the default comma/space separator — the flex gap handles spacing. */
.cd-hero-badge .wp-block-post-terms__separator {
display: none;
}
/* -------------------------------------------------------------------------
* Custom separator style: CD Gradient Bar
* A short, left-aligned red→blue gradient underline used beneath section
* headings (Featured News / Latest News / Editor Picks), matching the live
* homepage. Registered as a core/separator block style in functions.php.
* ---------------------------------------------------------------------- */
.wp-block-separator.is-style-cd-gradient-bar:not(.is-style-wide):not(.is-style-dots) {
/* The
box spans the normal content width (so it aligns to the content
column in a constrained group, and fills the column inside a column) —
but only the LEFT 60px is painted. That gives a left-aligned bar under
every heading without fighting the layout's centering margins. */
width: 100%;
height: 3px;
border: 0;
margin-top: 0.5rem;
margin-bottom: 1.25rem;
background: var(--cd-gradient-red-blue) left center / 60px 100% no-repeat;
opacity: 1;
}
/* -------------------------------------------------------------------------
* Post card (image-left list row) — built for Latest News, intended to be
* reused across the other homepage sections once the design is approved.
* ---------------------------------------------------------------------- */
.cd-post-card {
margin-bottom: 2rem;
}
/* Thumbnail: the featured image at full brightness with the category pill
(.cd-hero-badge) absolutely positioned over the top-left corner. */
.cd-card-thumb {
position: relative;
border-radius: 4px;
overflow: hidden;
line-height: 0;
}
.cd-card-thumb .wp-block-post-featured-image,
.cd-card-thumb .wp-block-post-featured-image img {
margin: 0;
width: 100%;
}
.cd-card-thumb .cd-hero-badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
line-height: 1.5;
}
/* Title sits tight above the meta line. */
.cd-post-card .wp-block-post-title {
margin: 0 0 0.5rem;
}
/* Meta line: By AUTHOR · DATE */
.cd-card-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.15rem 0.55rem;
margin: 0 0 0.85rem;
font-family: var(--cd-font-heading);
font-size: 0.72rem;
letter-spacing: 0.3px;
}
/* Zero the is-layout-flow margin-block-start that otherwise shoves the date
down inside the flex row (the misalignment). */
.cd-card-meta > * {
margin: 0;
}
.cd-card-meta .cd-meta-author,
.cd-card-meta .cd-meta-author a {
color: var(--cd-red-ink); /* small bold text: the brand red is 3.8:1 on white, AA needs 4.5 */
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
}
.cd-card-meta .cd-meta-author::before {
content: "By ";
color: var(--cd-muted);
font-weight: 400;
}
.cd-card-meta .cd-meta-date {
color: var(--cd-muted);
text-transform: uppercase;
}
.cd-card-meta .cd-meta-date::before {
content: "\00b7";
margin-right: 0.75rem;
color: #c3c3ca;
}
/* Read More — outlined button rendered from the excerpt's "more" link. */
.cd-read-more .wp-block-post-excerpt__excerpt {
color: #55555f;
}
.cd-read-more .wp-block-post-excerpt__more-link {
display: inline-block;
margin-top: 0.9rem;
padding: 8px 20px;
border: 1px solid #dcdce3;
color: var(--cd-navy);
font-family: var(--cd-font-heading);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cd-read-more .wp-block-post-excerpt__more-link:hover {
background: var(--cd-gradient-red-blue);
border-color: transparent;
color: var(--cd-white);
}
/* Compact card (Editor Picks): small square thumbnail + title/date, no
category/excerpt. Tighter column gap since it lives in a narrow sidebar. */
.wp-block-columns.cd-mini-card {
gap: 0.9rem;
margin-bottom: 1.35rem;
}
.cd-mini-card .wp-block-post-featured-image {
margin: 0;
border-radius: 4px;
overflow: hidden;
line-height: 0;
}
.cd-mini-card .wp-block-post-title {
margin: 0 0 0.3rem;
}
/* ==========================================================================
M2 — Video (click-to-load YouTube facade). Rendered by inc/class-video.php,
swapped to a real player by assets/js/cd-video.js on click.
========================================================================== */
.cd-video {
position: relative;
width: 100%;
margin: 0 0 1.6rem;
aspect-ratio: 16 / 9;
background: #000;
border-radius: 6px;
overflow: hidden;
}
/* Fallback for browsers without aspect-ratio. */
@supports not (aspect-ratio: 16 / 9) {
.cd-video {
height: 0;
padding-bottom: 56.25%;
}
}
.cd-video__trigger,
.cd-video__iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.cd-video__trigger {
padding: 0;
margin: 0;
background: none;
cursor: pointer;
display: block;
}
.cd-video__thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease, filter 0.3s ease;
}
.cd-video__trigger:hover .cd-video__thumb,
.cd-video__trigger:focus-visible .cd-video__thumb {
transform: scale(1.03);
filter: brightness(0.9);
}
.cd-video__trigger:focus-visible {
outline: 3px solid var(--cd-red);
outline-offset: -3px;
}
/* Play button — brand gradient rounded-rect (YouTube-ish), CSS triangle. */
.cd-video__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 78px;
height: 54px;
border-radius: 14px;
background: var(--cd-gradient-red-blue);
box-shadow: 0 4px 18px rgba(12, 14, 56, 0.35);
transition: transform 0.2s ease, box-shadow 0.2s ease;
pointer-events: none;
}
.cd-video__play::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-42%, -50%);
border-style: solid;
border-width: 11px 0 11px 18px;
border-color: transparent transparent transparent var(--cd-white);
}
.cd-video__trigger:hover .cd-video__play,
.cd-video__trigger:focus-visible .cd-video__play {
transform: translate(-50%, -50%) scale(1.08);
box-shadow: 0 6px 22px rgba(250, 50, 57, 0.45);
}
/* ==========================================================================
M2 — Sponsored pill. Rendered by inc/class-sponsored.php (post body + cards).
========================================================================== */
.cd-sponsored {
display: inline-block;
padding: 3px 10px;
border-radius: 3px;
background: var(--cd-gradient-red-blue);
color: var(--cd-white);
font-family: var(--cd-font-heading);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
line-height: 1.4;
vertical-align: middle;
}
.cd-sponsored-line {
margin: 0 0 1.1rem;
}
/* On a card, sit the pill just under the title. */
.wp-block-post-title + .cd-sponsored {
margin-top: 0.4rem;
}
/* ==========================================================================
M2 — Related articles. Rendered by inc/class-related.php (after post body).
========================================================================== */
.cd-related {
margin: 2.5rem 0 1rem;
padding-top: 1.75rem;
border-top: 2px solid #e2e1db;
}
.cd-related__heading {
font-family: var(--cd-font-heading);
font-size: 1.15rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 1.25rem;
color: var(--cd-navy);
}
.cd-related__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
@media (max-width: 700px) {
.cd-related__grid {
grid-template-columns: 1fr;
gap: 1.75rem;
}
}
.cd-related-card {
display: block;
text-decoration: none;
color: inherit;
}
.cd-related-card__thumb {
position: relative;
display: block;
aspect-ratio: 16 / 10;
border-radius: 5px;
overflow: hidden;
background: var(--cd-cream);
line-height: 0;
}
/* Whole image, letterboxed (0.9.0, client request): most featured images are
1200x630 graphics with text to the edges, which cover-cropping cut off. */
.cd-related-card__img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.3s ease;
}
.cd-related-card:hover .cd-related-card__img {
transform: scale(1.04);
}
.cd-related-card__cat {
position: absolute;
top: 8px;
left: 8px;
padding: 3px 9px;
border-radius: 3px;
background: var(--cd-gradient-red-blue);
color: var(--cd-white);
font-family: var(--cd-font-heading);
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1.4;
}
.cd-related-card__title {
display: block;
margin: 0.7rem 0 0.35rem;
font-family: var(--cd-font-heading);
font-size: 0.95rem;
font-weight: 600;
line-height: 1.3;
color: var(--cd-navy);
}
.cd-related-card:hover .cd-related-card__title {
color: var(--cd-red);
}
.cd-related-card__date {
display: block;
font-size: 0.72rem;
color: var(--cd-muted);
}
/* ==========================================================================
M2 — Archive & single polish (items 5 & 6).
The archive list + single post already inherit the CD brand from the M1
layer: accent colour → red author/category, heading font → Montserrat
titles, gradient override → category pills. So this is ONLY the additive
delta on top of that: rounded archive thumbnails + branded single-post tag
pills. Scoped to the list content wrappers + single; the category hero and
the homepage .cd-* blocks are untouched.
========================================================================== */
/* -- Rounded thumbnails, with a real aspect ratio --
JNews ships .thumbnail-container as height:0 and relies on its JS to compute
a padding-bottom ratio per image. With no thumbnail-ratio Customizer setting
stored, list thumbnails ended up sized off the source image, so wide logos
and tall portraits rendered at different heights and looked distorted next
to each other. Pinning a 16:9 box and letting the inner background-image
div cover it gives every card the same shape and crops instead of
distorting. Scoped to the list wrappers only — the homepage .cd-* cards and
the category hero keep their own sizing. */
.jnews_category_content_wrapper .jeg_thumb,
.jnews_archive_content_wrapper .jeg_thumb,
.jnews_author_content_wrapper .jeg_thumb,
.jnews_search_content_wrapper .jeg_thumb,
.jnews_category_content_wrapper .jeg_thumb .thumbnail-container,
.jnews_archive_content_wrapper .jeg_thumb .thumbnail-container,
.jnews_author_content_wrapper .jeg_thumb .thumbnail-container,
.jnews_search_content_wrapper .jeg_thumb .thumbnail-container {
border-radius: 6px;
overflow: hidden;
}
.jnews_category_content_wrapper .jeg_thumb .thumbnail-container,
.jnews_archive_content_wrapper .jeg_thumb .thumbnail-container,
.jnews_author_content_wrapper .jeg_thumb .thumbnail-container,
.jnews_search_content_wrapper .jeg_thumb .thumbnail-container {
height: auto;
padding-bottom: 0;
aspect-ratio: 16 / 9;
}
.jnews_category_content_wrapper .jeg_thumb .thumbnail-container > div,
.jnews_archive_content_wrapper .jeg_thumb .thumbnail-container > div,
.jnews_author_content_wrapper .jeg_thumb .thumbnail-container > div,
.jnews_search_content_wrapper .jeg_thumb .thumbnail-container > div {
position: absolute;
inset: 0;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
/* -- Single post: brand the tag pills at the foot of the article -- */
.jeg_singlepage .jeg_post_tags a {
display: inline-block;
margin: 0 4px 6px 0;
padding: 4px 12px;
border: 1px solid #dcdce3;
border-radius: 3px;
color: var(--cd-navy);
font-family: var(--cd-font-heading);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.jeg_singlepage .jeg_post_tags a:hover {
background: var(--cd-gradient-red-blue);
border-color: transparent;
color: var(--cd-white);
}
/* ==========================================================================
M2 — Podcast player (item 9).
Spotify renders its own chrome, so this is only the wrapper spacing. The
YouTube variant reuses the .cd-video facade styles above.
========================================================================== */
.cd-podcast {
margin: 0 0 1.6rem;
}
.cd-podcast__iframe {
display: block;
width: 100%;
border: 0;
border-radius: 12px;
}
/* Hide the download affordance on self-hosted audio in podcast posts.
controlsList="nodownload" (class-podcast.php) covers Chromium and Edge;
Firefox and Safari ignore it, so this catches any player that renders its
own download link. Not a security control — the media URL is still public. */
.cd-podcast a[download],
.single-post .cd-podcast ~ figure.wp-block-audio a[download] {
display: none !important;
}
/* ==========================================================================
M2 — Author profile (item 11).
The card under a single post. The author ARCHIVE header stays JNews's own
(it already has photo, name, bio and the posts list); we only append the
social links to it, so .cd-author__social is styled for both places.
========================================================================== */
.cd-author {
display: flex;
gap: 1.1rem;
align-items: flex-start;
margin: 2rem 0 0;
padding: 1.3rem;
border: 1px solid #e3e2dd;
border-radius: 10px;
background: var(--cd-white);
}
.cd-author__avatar {
flex: 0 0 auto;
}
.cd-author__photo {
display: block;
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
}
.cd-author__body {
min-width: 0;
}
.cd-author__name {
display: block;
margin: 0 0 0.35rem;
font-family: var(--cd-font-heading);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.25;
color: var(--cd-navy);
text-decoration: none;
}
a.cd-author__name:hover {
color: var(--cd-red);
}
.cd-author__bio {
margin: 0 0 0.6rem;
font-size: 0.88rem;
line-height: 1.6;
color: #4a4a55;
}
.cd-author__socials {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 0.5rem;
}
.cd-author__social {
padding: 3px 10px;
border: 1px solid #dcdce3;
border-radius: 3px;
font-family: var(--cd-font-heading);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
text-decoration: none;
color: var(--cd-navy);
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cd-author__social:hover {
background: var(--cd-gradient-red-blue);
border-color: transparent;
color: var(--cd-white);
}
.cd-author__more {
font-family: var(--cd-font-heading);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
text-decoration: none;
color: var(--cd-red);
}
.cd-author__more:hover {
text-decoration: underline;
}
@media (max-width: 600px) {
.cd-author {
flex-direction: column;
gap: 0.9rem;
}
}
/* ==========================================================================
M2 — Search matches (item 10).
Authors / categories / tags that match the term, above the post results.
========================================================================== */
.cd-search-matches {
margin: 0 0 1.8rem;
/* Sits inside JNews's .container (see class-search.php), so it needs no
width of its own — but keep it from touching the viewport edge on the
narrow widths where .container drops its own gutter. */
max-width: 100%;
padding: 1.2rem 1.3rem 0.6rem;
border: 1px solid #e3e2dd;
border-radius: 10px;
background: var(--cd-white);
}
.cd-search-group {
margin-bottom: 0.9rem;
}
.cd-search-group__heading {
margin: 0 0 0.55rem;
font-family: var(--cd-font-heading);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--cd-muted);
}
.cd-search-group__items {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cd-search-match {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 12px;
border: 1px solid #dcdce3;
border-radius: 999px;
font-size: 0.82rem;
text-decoration: none;
color: var(--cd-navy);
transition: border-color 0.15s ease, color 0.15s ease;
}
.cd-search-match:hover {
border-color: var(--cd-red);
color: var(--cd-red);
}
.cd-search-match__avatar {
width: 22px;
height: 22px;
border-radius: 50%;
object-fit: cover;
}
.cd-search-match__count {
font-size: 0.7rem;
color: var(--cd-muted);
}
/* ==========================================================================
Homepage mobile gutters — moved here from page 70741's block padding.
Was set as spacing.padding on the section groups in the page CONTENT, which
meant it lived in the database: invisible to review, lost on any rebuild or
restore of the page, and applied to the homepage only. Same result, but
version-controlled. Not theme.json root padding: that needs the
has-global-padding wrapper, which JNews (a classic theme) never emits.
========================================================================== */
@media (max-width: 781px) {
.home .wp-block-group.alignfull > .wp-block-heading,
.home .wp-block-group.alignfull > .wp-block-query,
.home .wp-block-group.alignfull > .wp-block-separator {
padding-right: clamp(16px, 4vw, 32px);
padding-left: clamp(16px, 4vw, 32px);
}
}
/* ==========================================================================
2026 rebrand — Oswald subheaders + AA-safe link colour.
Brand Guidelines (20 Aug 2026): Poppins is primary and now runs headlines
as well as body; Oswald is secondary, for taglines, subheaders and the post
meta line, in the #707070 subheader grey shown in the guideline example.
========================================================================== */
/* Post meta furniture — the "August 12, 2026 | Funeral Industry News" line. */
.jeg_post_meta,
.jeg_post_meta a,
.jeg_meta_date,
.jeg_meta_author,
.cd-card-meta,
.cd-related-card__date,
.cd-search-match__count {
font-family: var(--cd-font-subheading);
font-weight: 400;
letter-spacing: 0.2px;
color: var(--cd-muted);
}
/* Section headings and category pills keep the condensed secondary face. */
.cd-search-group__heading,
.cd-related-card__cat,
.cd-hero-badge {
font-family: var(--cd-font-subheading);
}
/* Inline links use the AA-safe ink red (4.54:1) rather than the pure brand
#ff1e56 (3.60:1), which fails WCAG AA for body copy on the off-white. */
.entry-content a:not(.wp-block-button__link):not([class*="cd-"]),
.jeg_post_excerpt a,
.cd-author__more {
color: var(--cd-red-ink);
}
/* On navy, the pure brand colours clear AA (4.96 and 4.65), so reverse
contexts keep them rather than the darkened variants. */
.jeg_footer a:hover,
.cd-author--on-dark a {
color: var(--cd-red);
}
/* ==========================================================================
M3 — Broadstreet ad containers (inc/class-broadstreet.php).
The plugin loads Broadstreet and fills each ; these rules
only decide the SPACE an ad takes. Two jobs, both measured on live fills on
staging (2026-09-25) rather than assumed:
- Reserve the slot before the ad arrives, so the page doesn't jump when it
fills. Single posts scored CLS 0.27 on desktop ("poor"), mostly the
above-article ad popping in and pushing the article down.
- Never clip. The homepage's inline wrappers were a fixed 90px-high
overflow:hidden box: a 970x250 in 56686's rotation was cut to a strip,
and the 300x80 mobile creative sat in dead space.
Sizes: leaderboard 970x90 on desktop, scaling with the column (a 750px
article column shows it at 750x70), and 300x80 on mobile; sidebar 250x320.
58294 serves no mobile creative. assets/js/cd-ads.js gives the space back
(.cd-ad--empty) for any zone that serves nothing.
========================================================================== */
.cd-ad {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 1.5rem auto;
}
.cd-ad broadstreet-zone {
display: block;
max-width: 100%;
}
.cd-ad img {
max-width: 100%;
height: auto;
}
/* Broadstreet wraps each creative in an inline-block rotation div, which sits
on the text baseline and leaves a descender gap under an image. Top-aligning
it (and any inline image) removes the gap without touching line-height,
which would collapse a Broadstreet text ad. */
.cd-ad broadstreet-zone > *,
.cd-ad img {
vertical-align: top;
}
.cd-ad iframe {
max-width: 100%; /* iframes keep their own height attribute */
}
/* Leaderboard: the 970x90 slot at the column's width. */
.cd-ad--leaderboard {
max-width: 970px;
aspect-ratio: 970 / 90;
}
/* Inside a constrained Group (the homepage's 1200px sections), WordPress's
inline layout CSS gives every direct child max-width: 1200px and prints after
this file, so it wins at equal specificity and stretches the slot: a 970x90
ad in a 1200x111 box. One more class keeps the slot at 970. */
.is-layout-constrained > .cd-ad--leaderboard {
max-width: 970px;
}
/* Sidebar: 250x320. */
.cd-ad--sidebar {
min-height: 320px;
}
.cd-ad--in-sidebar {
margin: 0 0 30px;
}
/* End of the single-post article gets a little more air than a mid-flow slot. */
.cd-ad--single-end {
margin: 2rem auto;
}
/* Carousel slide: the ad sat flush against the bottom of the 520px hero
(measured 0px gap). Applies once the homepage wrappers carry .cd-ad. */
.pl-carousel-card > .cd-ad {
margin: 1rem auto 0;
}
/* Zones placed by the plugin or its widget can't take a class, so the same
reservation goes on the element itself — only where the zone sits in view on
load AND fills reliably: 56686 above the single-post article, and Sidebar 1
(56691) wherever it renders. 56687 and 56688 are below the fold and serve
nothing today, so reserving them would only leave blank boxes in articles. */
.content-inner broadstreet-zone[zone-id="56686"] {
display: block;
width: 100%;
max-width: 970px;
margin: 0 auto;
aspect-ratio: 970 / 90;
}
broadstreet-zone[zone-id="56691"] {
display: block;
min-height: 320px;
}
/* The plugin's sidebar widget has no .cd-ad wrapper, so its creative sat at the
left of the column while the theme's sidebar slots centre theirs. */
.widget.bs_zones broadstreet-zone {
text-align: center;
}
/* Death Care Jobs board between the single-post sidebar ads. */
.cd-jobs {
margin: 0 0 30px;
}
.cd-jobs__frame {
display: block;
width: 100%;
min-height: 500px;
border: 1px solid #cbcedf;
border-radius: 10px;
background: transparent;
}
@media (max-width: 767px) {
.cd-ad--leaderboard,
.content-inner broadstreet-zone[zone-id="56686"] {
aspect-ratio: auto;
min-height: 80px;
}
.cd-ad--desktop-only {
min-height: 0;
margin: 0 auto;
}
}
/* Nothing served: give the space back. */
.cd-ad.cd-ad--empty {
min-height: 0;
aspect-ratio: auto;
margin: 0 auto;
}
/* ==========================================================================
M3 performance — sticky sidebar without layout shifts
(inc/class-sticky-sidebar.php, assets/js/cd-sticky-sidebar.js).
JNews's theiaStickySidebar script is switched off: it moved the sidebar
every time the JNews sticky header slid in or out, and each move was a
layout shift. position: sticky does the same job and the browser moves it
without one. The sidebar sits beside the content from 768px on archives,
search and 404 (.col-sm-4) and from 992px on single posts (.col-md-4);
narrower, it's below the content and stays in the flow.
top is the smaller of:
- just below the JNews sticky header plus the 20px theia used — the header
is the 60px mobile nav below 1024px and the 51px bar from 1024px, plus the
WordPress admin bar for logged-in users;
- the screen height minus the sidebar's height (--cd-sidebar-h, from the
script) minus 20px. That is negative for a sidebar taller than the
screen, so it scrolls until its last widget is in view, then holds.
========================================================================== */
.jeg_sidebar {
--cd-sticky-top: 80px;
}
.admin-bar .jeg_sidebar {
--cd-admin-bar: 46px;
}
@media (min-width: 768px) {
:is(body.archive, body.search, body.error404, body.blog) .jeg_sidebar.col-sm-4 {
position: sticky;
top: min(calc(var(--cd-sticky-top) + var(--cd-admin-bar, 0px)), calc(100vh - var(--cd-sidebar-h, 0px) - 20px));
}
}
@media (min-width: 783px) {
.admin-bar .jeg_sidebar {
--cd-admin-bar: 32px;
}
}
@media (min-width: 992px) {
body.single-post .jeg_sidebar.col-md-4 {
position: sticky;
top: min(calc(var(--cd-sticky-top) + var(--cd-admin-bar, 0px)), calc(100vh - var(--cd-sidebar-h, 0px) - 20px));
}
}
@media (min-width: 1024px) {
.jeg_sidebar {
--cd-sticky-top: 71px;
}
}
/* ==========================================================================
Accessibility (0.8.2): WCAG 2.1 AA fixes from a Lighthouse pass on home,
single, category and search (2026-10-02).
- Small grey text: the theme's old #8a8a94 (3.4:1) and JNews's #a0a0a0
(2.6:1) become the brand guideline grey --cd-muted #707070, 4.95:1 on
white. The theme's own rules use the token directly (above); JNews's
breadcrumbs, captions and tag pills are recoloured in
jnews-overrides.css, because this file loads before JNews's stylesheet
and would lose to it at equal specificity.
- Tap targets of at least 24px (WCAG 2.5.8): carousel dots keep their 12px
look with a bigger invisible hit area; category pills get more padding.
- Search pagination: JNews hides the "Next"/"Prev" text with
display:none, which also hides it from screen readers; it stays
visually hidden but readable.
Not changed: links inside article text are told apart from body text
only by colour (2.66:1, AA wants 3:1 or an underline). Underlining is a
visible design change, raised with the client first.
========================================================================== */
/* Editor Picks dates carry an inline #8a8a94 from the homepage block
settings; !important is the only way past an inline style. */
.cd-mini-card .wp-block-post-date {
color: var(--cd-muted) !important;
}
/* Carousel dots: the button itself is the 24px target (accessibility
checkers measure the element, not a pseudo-element hit area) and the
12px dot is drawn inside it. The gap goes to 0, so the dots sit 24px
apart instead of 20px: visually almost the same. Selectors carry the
plugin's .wp-block-pl-carousel prefix to match its specificity. */
.wp-block-pl-carousel .pl-carousel-dots {
gap: 0;
}
.wp-block-pl-carousel .pl-carousel-dots button {
position: relative;
width: 24px;
height: 24px;
background: transparent;
}
.wp-block-pl-carousel .pl-carousel-dots button::after {
content: "";
position: absolute;
top: 6px;
left: 6px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #c9c9cf;
transition: background-color 0.2s ease;
}
.wp-block-pl-carousel .pl-carousel-dots button.active,
.wp-block-pl-carousel .pl-carousel-dots button:hover {
background: transparent;
}
.wp-block-pl-carousel .pl-carousel-dots button.active::after {
background: #4a4a57;
}
.jeg_thumb .jeg_post_category a,
.jeg_post_category a {
min-height: 24px;
padding-top: 5px;
padding-bottom: 5px;
line-height: 14px;
box-sizing: border-box;
}
.no_navtext .page_nav .navtext {
display: inline;
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}