in actions wraps the (possibly hidden) live-indicator .
`display: contents` is supposed to dissolve it, but iOS Safari has a long-
standing bug where with `display: contents` still contributes a
compositing slot. Force-hide it explicitly when it ONLY contains the
live-indicator anchor (which is hidden when off-air). */
.bdn-site-header__actions > p {
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important; /* collapse any whitespace text nodes */
line-height: 0 !important;
display: contents;
}
.bdn-site-header__actions > p:has(> a.bdn-live-indicator[hidden]) { display: none !important; }
.bdn-site-header__actions > p:empty { display: none !important; }
a { color: var(--wp--preset--color--accent-blue); text-decoration: none; }
a:hover { color: var(--wp--preset--color--white); }
img { max-width: 100%; height: auto; display: block; }
/* Hide scrollbars the JSX way — optional, comment out if you prefer native scrollbars */
.bdn-hide-scrollbar::-webkit-scrollbar { display: none; }
.bdn-hide-scrollbar { scrollbar-width: none; }
/* === Layout container === */
.bdn-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}
/* === Header === */
/* SS 7/9/10 hairline-strip fix (round 3): the visible strip below the header
on mobile across iOS Safari + iOS Chrome was caused by a combination of:
- GPU-compositing-layer edge on the sticky parent
- .is-compact box-shadow rendering as a "darker zone" below the header
- Backdrop-filter aliasing that we disabled on mobile but may still leak
through cached CSS or other elements
Belt-and-suspenders: outer wrapper gets bg + will-change so its compositor
layer matches the inner's, AND the .is-compact shadow is removed on mobile. */
.wp-site-blocks > header.wp-block-template-part,
header.wp-block-template-part:has(.bdn-site-header) {
position: sticky;
top: 0;
z-index: 100;
background: var(--wp--preset--color--background);
will-change: transform;
/* iOS WebKit compositor seam fix: a sticky element's GPU layer can show a
1px aliasing edge at its bottom boundary when neighboring content has
varying tonality. clip-path extends the layer 1px below its rendered
content, hiding the seam. Confirmed via the DevTools snapshot Brandon
captured — DOM is clean, only the visual seam was bleeding through. */
clip-path: inset(0 0 -1px 0);
}
.bdn-site-header {
background: rgba(10, 14, 20, 0.95);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
/* SS 4 fix (May 8): the 1px border-bottom rendered as a visible faint
hairline strip below the logo bar on mobile. Brandon flagged it as a
real visual bug — modern news sites typically don't show a header
separator. Box-shadow on .is-compact (line ~84 below) handles
scrolled-state visual separation when needed. */
transition: box-shadow 0.2s ease;
}
/* Mobile: fully opaque header so article cards cannot bleed through as they scroll up */
@media (max-width: 767px) {
header.wp-block-template-part:has(.bdn-site-header),
.bdn-site-header {
background: var(--wp--preset--color--background) !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
.bdn-site-header.is-compact {
/* Box-shadow on mobile rendered as a visible "faint gray strip" below the
header when scrolled past 100px (SS 10). Desktop keeps it for depth.
Mobile rule overrides below at @media (max-width: 767px). */
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
@media (max-width: 767px) {
.bdn-site-header.is-compact { box-shadow: none; }
}
.bdn-notify-btn {
width: 44px; /* WCAG AA touch target — was 36px, too tight for thumb taps on iPhone */
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--wp--preset--color--border);
color: var(--wp--preset--color--white);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.2s ease-out;
}
.bdn-notify-btn.active { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--accent-blue); }
.bdn-notify-btn:hover { background: var(--wp--preset--color--navy); }
/* Keyboard focus for the header notify bell. Hover was the only state defined,
so tab-focused users had no visible indicator on the only header CTA besides
menu/account. Same accent-blue pattern as the .bdn-btn family (iter 3) and
.bdn-tabnav__item (iter 4). */
.bdn-notify-btn:focus-visible {
outline: 2px solid var(--wp--preset--color--accent-blue);
outline-offset: 2px;
}
/* === Header block-gap kill ===
WP block themes apply a default `margin-block-start` between flow-layout
children. Inside .bdn-site-header that means a dark gap appears between
the breaking banner and the logo bar (visible as a thin black stripe
between two red regions when scrolling on mobile). Zero it out. */
.bdn-site-header,
.bdn-site-header > * {
--wp--style--block-gap: 0 !important;
}
.bdn-site-header > * {
margin-block-start: 0 !important;
margin-top: 0 !important;
}
/* === Live indicator === */
.bdn-live-indicator {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 20px;
background: rgba(255, 49, 49, 0.1);
border: 1px solid rgba(255, 49, 49, 0.3);
color: var(--wp--preset--color--accent-red);
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}
.bdn-live-indicator[hidden] { display: none; }
.bdn-live-indicator::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--wp--preset--color--accent-red);
animation: bdn-pulse 2s ease-in-out infinite;
}
@keyframes bdn-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.7; }
}
/* Upcoming (scheduled, not yet live): calm blue, no pulsing red dot. */
.bdn-live-indicator--upcoming {
background: rgba(56, 182, 255, 0.1);
border-color: rgba(56, 182, 255, 0.35);
color: var(--wp--preset--color--accent-blue, #38B6FF);
}
.bdn-live-indicator--upcoming::before {
background: var(--wp--preset--color--accent-blue, #38B6FF);
animation: none;
}
/* === Badge (BREAKING, ANALYSIS, etc.) === */
.bdn-badge {
display: inline-block;
padding: 2px 6px;
border-radius: 3px;
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
color: var(--wp--preset--color--white);
background: rgba(255, 255, 255, 0.1);
text-transform: uppercase;
}
.bdn-badge--breaking, .bdn-badge--breaking-news { background: var(--wp--preset--color--breaking); }
.bdn-badge--bdn-exclusive, .bdn-badge--exclusive { background: var(--wp--preset--color--accent-blue); }
.bdn-badge--bdn-fact-check, .bdn-badge--fact-check { background: var(--wp--preset--color--exclusive-amber); }
.bdn-badge--politics { background: var(--wp--preset--color--navy); }
.bdn-badge--world { background: #1F6B3A; }
.bdn-badge--media { background: #6B3FA0; }
.bdn-badge--analysis { background: rgba(56, 182, 255, 0.25); color: var(--wp--preset--color--accent-blue); }
/* === Hero card === */
.bdn-hero {
background: linear-gradient(180deg, var(--wp--preset--color--navy) 0%, var(--wp--preset--color--navy-deep) 100%);
padding: 24px 16px 22px;
display: block;
color: var(--wp--preset--color--white);
text-decoration: none;
transition: 0.2s ease-out;
}
.bdn-hero:hover { filter: brightness(1.1); }
.bdn-hero__title {
font-family: var(--wp--preset--font-family--headline);
font-size: clamp(22px, 3.2vw, 40px);
font-weight: 700;
line-height: 1.22;
margin: 10px 0 8px;
color: var(--wp--preset--color--white);
}
.bdn-hero__excerpt {
color: var(--wp--preset--color--text-secondary);
font-size: 14px;
line-height: 1.45;
margin: 0 0 8px;
}
.bdn-hero__meta { color: var(--wp--preset--color--text-muted); font-size: 11px; }
@media (min-width: 1024px) {
.bdn-hero {
padding: 48px 40px;
min-height: 420px;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
border-radius: 0;
}
.bdn-hero__title { font-size: 40px; }
.bdn-hero__excerpt { font-size: 16px; max-width: 680px; }
}
/* === Eyebrow label (LATEST, ALL EPISODES) === */
.bdn-eyebrow {
display: block;
font-size: 11px;
font-weight: 700;
color: var(--wp--preset--color--text-muted);
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 18px 16px 6px;
}
/* === Homepage (redesigned) === */
/* Opt out of WordPress's is-layout-constrained contentSize=680px clamp on the
home main wrapper. Each homepage shortcode section manages its own max-width,
so the layout should follow those, not the global content size. Without this
override WP's `:where(.is-layout-constrained) > * { max-width: 680px }` shrinks
every section to a centered 680px column on desktop, leaving big black
gutters on either side. (Rule moved to @layer bdn-components.) */
/* Reusable card fallback image wrapper (dark gradient + faint square logo). */
.bdn-card-img-fallback {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #0F1621 0%, #0A0E14 100%);
}
.bdn-card-img-fallback img {
width: 40%;
max-width: 120px;
height: auto;
opacity: 0.22;
object-fit: contain;
}
/* === Article card (list item) === */
.bdn-article-card {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 16px;
border-bottom: 1px solid var(--wp--preset--color--border);
color: var(--wp--preset--color--white);
text-decoration: none;
transition: background 0.2s ease-out;
}
.bdn-article-card:hover { background: rgba(255, 255, 255, 0.02); }
.bdn-article-card__image {
flex: 0 0 112px;
width: 112px;
aspect-ratio: 16 / 10;
border-radius: 6px;
overflow: hidden;
display: block;
background: rgba(255, 255, 255, 0.04);
}
.bdn-article-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease-out;
}
.bdn-article-card:hover .bdn-article-card__image img { transform: scale(1.04); }
.bdn-article-card__image--fallback {
background: linear-gradient(135deg, #0F1621 0%, #0A0E14 100%);
display: flex;
align-items: center;
justify-content: center;
}
.bdn-article-card__image--fallback img {
width: 52%;
height: auto;
object-fit: contain;
opacity: 0.25;
transform: none !important;
}
.bdn-article-card__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
@media (min-width: 768px) {
.bdn-article-card__image { flex-basis: 160px; width: 160px; }
}
.bdn-article-card__title,
.bdn-article-card .wp-block-post-title,
.bdn-article-card .wp-block-post-title a {
font-family: var(--wp--preset--font-family--headline);
font-size: 15px;
font-weight: 600;
line-height: 1.3;
margin: 6px 0 4px;
color: var(--wp--preset--color--white);
text-decoration: none;
}
.bdn-article-card .wp-block-post-title a:hover {
color: var(--wp--preset--color--accent-blue);
}
.bdn-article-card__excerpt,
.bdn-article-card .wp-block-post-excerpt,
.bdn-article-card .wp-block-post-excerpt p {
color: var(--wp--preset--color--text-secondary);
font-size: 13px;
line-height: 1.45;
margin: 0 0 6px;
font-family: var(--wp--preset--font-family--body);
}
.bdn-article-card .wp-block-post-date {
color: var(--wp--preset--color--text-muted);
font-size: 11px;
}
.bdn-article-card .wp-block-post-date time {
color: var(--wp--preset--color--text-muted);
}
.bdn-article-card .bdn-badge,
.bdn-article-card > .wp-block-shortcode:first-of-type .bdn-badge {
display: inline-block;
margin-bottom: 4px;
}
.bdn-article-card > * + * {
margin-top: 4px;
}
.bdn-article-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
color: var(--wp--preset--color--text-muted);
font-size: 11px;
}
.bdn-article-card__bookmark {
background: transparent;
border: 0;
padding: 4px;
cursor: pointer;
color: var(--wp--preset--color--text-muted);
transition: color 0.2s ease-out;
}
.bdn-article-card__bookmark.is-saved,
.bdn-article-card__bookmark[aria-pressed="true"] { color: var(--wp--preset--color--accent-blue); }
/* Keyboard focus for the article card's interactive children. Cards are the
dominant surface on the homepage and archive grids; without a focus ring,
keyboard / switch-control users stepping through the list had no indicator
of position. The title link covers both renderings (the templates' wp:post-title
link and the article-card.php pattern's wrapping ); the image link is
intentionally tabindex="-1" so it's out of tab order. Same accent-blue/2px/2px
pattern as the .bdn-btn family (iter 3), .bdn-tabnav__item (iter 4), and
.bdn-notify-btn (iter 7). */
.bdn-article-card .wp-block-post-title a:focus-visible,
.bdn-article-card > a:focus-visible,
.bdn-article-card__bookmark:focus-visible {
outline: 2px solid var(--wp--preset--color--accent-blue);
outline-offset: 2px;
}
/* === Thank-you page (post-Stripe redirect target) === */
.bdn-thank-you {
padding: 64px 16px 96px;
min-height: calc(100vh - 220px);
display: flex;
align-items: center;
justify-content: center;
}
.bdn-thank-you__inner {
width: 100%;
text-align: center;
}
.bdn-thank-you__kicker {
font-size: 12px;
letter-spacing: 2px;
font-weight: 700;
color: var(--wp--preset--color--accent-blue);
margin: 0 0 12px;
}
.bdn-thank-you__title {
font-family: var(--wp--preset--font-family--headline);
font-size: clamp(40px, 7vw, 72px);
font-weight: 700;
line-height: 1.05;
color: var(--wp--preset--color--white);
margin: 0 0 20px;
letter-spacing: -0.02em;
}
.bdn-thank-you__lede {
font-size: 18px;
line-height: 1.55;
color: var(--wp--preset--color--text-secondary);
margin: 0 auto 16px;
max-width: 540px;
}
.bdn-thank-you__body {
font-size: 14px;
line-height: 1.55;
color: var(--wp--preset--color--text-muted);
margin: 0 auto 32px;
max-width: 480px;
}
.bdn-thank-you__ctas {
display: flex !important;
flex-wrap: wrap;
gap: 12px !important;
justify-content: center;
margin: 0 0 32px;
}
.bdn-thank-you__cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
border-radius: 999px;
font-weight: 600;
font-size: 15px;
text-decoration: none;
transition: filter 0.15s ease, transform 0.1s ease;
min-height: 44px;
}
.bdn-thank-you__cta:not(.bdn-btn--ghost) {
background: var(--wp--preset--color--accent-blue);
color: var(--wp--preset--color--white);
}
.bdn-thank-you__cta:hover:not(.bdn-btn--ghost) { filter: brightness(1.08); color: var(--wp--preset--color--white); }
.bdn-thank-you__cta.bdn-btn--ghost {
background: transparent;
color: var(--wp--preset--color--text-secondary);
border: 1px solid var(--wp--preset--color--border);
}
.bdn-thank-you__cta.bdn-btn--ghost:hover { color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--accent-blue); }
.bdn-thank-you__signoff {
font-family: var(--wp--preset--font-family--headline);
font-style: italic;
color: var(--wp--preset--color--text-muted);
font-size: 16px;
margin: 0;
}
/* === Reader tip jar === */
/* Card variant — used after articles + mid-homepage. Same brand treatment.
Mid-homepage placement gets max-width matching the home grid container so
it doesn't go full-bleed past the rest of the home content. */
.bdn-tip-jar--card {
display: block;
margin: 32px auto;
padding: 24px 28px;
max-width: 760px;
background: linear-gradient(135deg, var(--wp--preset--color--navy) 0%, var(--wp--preset--color--navy-deep) 100%);
border-radius: 12px;
border-left: 4px solid var(--wp--preset--color--accent-blue);
}
.bdn-tip-jar__title {
font-family: var(--wp--preset--font-family--headline);
font-size: 20px;
font-weight: 700;
color: var(--wp--preset--color--white);
margin: 0 0 6px;
}
.bdn-tip-jar__copy {
color: var(--wp--preset--color--text-secondary);
font-size: 15px;
line-height: 1.5;
margin: 0 0 16px;
}
.bdn-tip-jar--card .bdn-tip-jar__btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
background: var(--wp--preset--color--accent-blue);
color: var(--wp--preset--color--white);
text-decoration: none;
font-weight: 600;
font-size: 15px;
border-radius: 999px;
transition: filter 0.15s ease, transform 0.1s ease;
min-height: 44px;
}
.bdn-tip-jar--card .bdn-tip-jar__btn:hover { filter: brightness(1.08); color: var(--wp--preset--color--white); }
.bdn-tip-jar--card .bdn-tip-jar__btn:active { transform: scale(0.98); }
/* Compact variant — small inline button suitable for footer/sidebar */
.bdn-tip-jar--compact {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: rgba(255, 255, 255, 0.05);
color: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--border);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.2px;
transition: 0.2s ease-out;
min-height: 36px;
}
.bdn-tip-jar--compact:hover {
background: var(--wp--preset--color--navy);
border-color: var(--wp--preset--color--accent-blue);
color: var(--wp--preset--color--white);
}
.bdn-tip-jar__icon { font-size: 14px; line-height: 1; }
/* Minimal variant — quiet inline link suitable for the footer copyright row.
Reads as a P.S. rather than a CTA. Distinct from newsletter signup form. */
.bdn-tip-jar--minimal {
display: inline;
color: var(--wp--preset--color--text-muted);
font-size: 13px;
}
.bdn-tip-jar--minimal .bdn-tip-jar__icon { font-size: 12px; }
.bdn-tip-jar__minimal-link {
color: var(--wp--preset--color--accent-blue);
text-decoration: none;
font-weight: 600;
}
.bdn-tip-jar__minimal-link:hover { color: var(--wp--preset--color--white); text-decoration: underline; }
.bdn-footer-bottom__sep {
display: inline-block;
margin: 0 6px;
color: var(--wp--preset--color--text-muted);
opacity: 0.5;
}
@media (max-width: 600px) {
/* Stack copyright + tip-link on phones so the line doesn't wrap awkwardly. */
.bdn-footer-bottom__sep { display: block; height: 0; margin: 4px 0; opacity: 0; }
}
/* Search empty state — friendlier than the default "No results" stub */
.bdn-search-empty {
text-align: center;
padding: 32px 16px 48px;
max-width: 640px;
margin: 0 auto;
}
.bdn-search-empty__title {
font-family: var(--wp--preset--font-family--headline);
font-size: 22px;
font-weight: 600;
color: var(--wp--preset--color--white);
margin: 0 0 12px;
}
.bdn-search-empty__body {
color: var(--wp--preset--color--text-secondary);
font-size: 15px;
margin: 0 0 12px;
}
.bdn-search-empty__sections {
color: var(--wp--preset--color--text-muted);
font-size: 14px;
line-height: 1.7;
}
.bdn-search-empty__sections a {
color: var(--wp--preset--color--accent-blue);
text-decoration: none;
}
.bdn-search-empty__sections a:hover { text-decoration: underline; }
/* Article grid container — strip default list padding so cards go edge-to-edge */
.bdn-article-grid {
list-style: none;
padding: 0;
margin: 0;
}
.bdn-article-grid .bdn-article-card { list-style: none; }
/* Desktop: grid layout for latest articles */
@media (min-width: 768px) {
.bdn-article-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
}
.bdn-article-grid .bdn-article-card { border-right: 1px solid var(--wp--preset--color--border); }
.bdn-article-grid .bdn-article-card:nth-child(2n) { border-right: 0; }
}
@media (min-width: 1024px) {
.bdn-article-grid { grid-template-columns: repeat(3, 1fr); }
.bdn-article-grid .bdn-article-card { border-right: 1px solid var(--wp--preset--color--border); }
.bdn-article-grid .bdn-article-card:nth-child(3n) { border-right: 0; }
}
/* === Buttons / CTAs === */
.bdn-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
/* WCAG 2.5.5 minimum target size is 24×24 CSS px (Level AA, 2.2). Apple HIG
recommends 44×44pt. With padding 13/20 and font 14/1, computed height is
about 44px — meets both. Was 11/18 with 13px font ≈ 40px — too tight. */
padding: 13px 20px;
border-radius: 10px;
font-family: var(--wp--preset--font-family--body);
font-size: 14px;
font-weight: 600;
color: var(--wp--preset--color--white);
background: var(--wp--preset--color--navy);
border: 1px solid var(--wp--preset--color--navy);
cursor: pointer;
text-decoration: none;
transition: 0.2s ease-out;
}
.bdn-btn:hover { background: #083d68; color: var(--wp--preset--color--white); }
.bdn-btn--pill { border-radius: 20px; padding: 9px 18px; background: rgba(255, 255, 255, 0.06); border-color: var(--wp--preset--color--border); color: var(--wp--preset--color--accent-blue); font-size: 12px; }
.bdn-btn--spotify { background: #1DB954; border-color: #1DB954; padding: 11px 18px; border-radius: 20px; font-weight: 700; width: 100%; }
.bdn-btn--spotify:hover { background: #1ed760; }
.bdn-btn--youtube { background: rgba(255, 0, 0, 0.1); border-color: rgba(255, 0, 0, 0.3); padding: 11px 18px; border-radius: 20px; width: 100%; }
.bdn-btn--youtube:hover { background: rgba(255, 0, 0, 0.2); }
.bdn-btn--breaking { background: var(--wp--preset--color--breaking); border-color: var(--wp--preset--color--breaking); }
/* Override Gutenberg core button wrappers that double-decorate .bdn-btn variants */
.wp-block-button.bdn-btn { background: transparent; border: 0; padding: 0; }
.wp-block-button.bdn-btn .wp-block-button__link,
.wp-block-button.bdn-btn .wp-element-button {
background: var(--wp--preset--color--navy);
color: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--navy);
border-radius: 10px;
padding: 11px 18px;
font-family: var(--wp--preset--font-family--body);
font-size: 13px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
width: auto;
text-decoration: none;
transition: 0.2s ease-out;
}
.wp-block-button.bdn-btn .wp-block-button__link:hover { background: #083d68; color: var(--wp--preset--color--white); }
.wp-block-button.bdn-btn--pill .wp-block-button__link,
.wp-block-button.bdn-btn--pill .wp-element-button {
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--wp--preset--color--border);
color: var(--wp--preset--color--accent-blue);
border-radius: 20px;
padding: 9px 18px;
font-size: 12px;
}
.wp-block-button.bdn-btn--spotify .wp-block-button__link,
.wp-block-button.bdn-btn--spotify .wp-element-button {
background: #1DB954;
border-color: #1DB954;
color: var(--wp--preset--color--white);
border-radius: 20px;
padding: 11px 24px;
font-weight: 700;
font-size: 13px;
display: inline-flex;
}
.wp-block-button.bdn-btn--spotify .wp-block-button__link:hover { background: #1ed760; border-color: #1ed760; }
.wp-block-button.bdn-btn--youtube .wp-block-button__link,
.wp-block-button.bdn-btn--youtube .wp-element-button {
background: rgba(255, 0, 0, 0.1);
border: 1px solid rgba(255, 0, 0, 0.3);
color: var(--wp--preset--color--white);
border-radius: 20px;
padding: 11px 24px;
}
.wp-block-button.bdn-btn--youtube .wp-block-button__link:hover { background: rgba(255, 0, 0, 0.2); }
/* Keyboard focus for the .bdn-btn family. Hover was the only state defined,
so tab-focused users had no visible indicator on primary CTAs (404 back,
thank-you, podcast Spotify/YouTube, tip jar, newsletter). Reuses the
accent-blue token already established for input focus borders. */
.bdn-btn:focus-visible,
.wp-block-button.bdn-btn .wp-block-button__link:focus-visible,
.wp-block-button.bdn-btn .wp-element-button:focus-visible {
outline: 2px solid var(--wp--preset--color--accent-blue);
outline-offset: 2px;
}
/* === Single article === */
.bdn-single {
padding: 24px 16px 56px;
max-width: 680px;
margin: 0 auto;
}
.bdn-single__meta {
display: flex;
align-items: center;
gap: 10px;
margin: 18px 0;
color: var(--wp--preset--color--text-muted);
font-size: 12px;
}
.bdn-single__author-name { color: var(--wp--preset--color--white); font-weight: 600; font-size: 13px; }
.bdn-single__meta .wp-block-avatar img,
.bdn-single__meta img.avatar {
border-radius: 50%;
background: var(--wp--preset--color--navy);
border: 1px solid var(--wp--preset--color--border);
object-fit: cover;
}
.bdn-read-time {
color: var(--wp--preset--color--text-muted);
font-size: 11px;
}
/* Skip-to-content link — only visible when focused (a11y) */
.bdn-skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--wp--preset--color--accent-blue);
color: #fff;
padding: 10px 16px;
border-radius: 0 0 8px 0;
z-index: 10000;
font-weight: 600;
text-decoration: none;
}
.bdn-skip-link:focus {
left: 0;
outline: 2px solid #fff;
outline-offset: 2px;
}
.bdn-single__title {
font-family: var(--wp--preset--font-family--headline);
font-size: clamp(24px, 3vw, 40px);
font-weight: 700;
line-height: 1.22;
margin: 12px 0 18px;
color: var(--wp--preset--color--white);
}
.bdn-single__body {
font-family: var(--wp--preset--font-family--headline);
color: var(--wp--preset--color--text-secondary);
font-size: 17px;
line-height: 1.6;
}
@media (min-width: 700px) {
.bdn-single__body { font-size: 18px; }
}
.bdn-single__body p { margin: 0 0 1.2em; }
.bdn-single__body h2 { margin: 36px 0 14px; font-size: 22px; color: var(--wp--preset--color--white); }
.bdn-single__body h3 { margin: 28px 0 10px; font-size: 19px; color: var(--wp--preset--color--white); }
.bdn-single__body blockquote {
border-left: 3px solid var(--wp--preset--color--accent-blue);
padding: 0 0 0 20px;
margin: 24px 0;
color: var(--wp--preset--color--text-secondary);
font-style: italic;
}
.bdn-single__body a { color: var(--wp--preset--color--accent-blue); text-decoration: underline; text-underline-offset: 2px; }
.bdn-single__body a:focus-visible {
outline: 2px solid var(--wp--preset--color--accent-blue);
outline-offset: 2px;
}
/* Featured image — injected after the lede via the_content filter */
.bdn-single__featured {
margin: 22px -8px 26px;
padding: 0;
}
.bdn-single__featured img {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
.bdn-single__featured figcaption {
margin-top: 8px;
font-family: var(--wp--preset--font-family--body);
font-size: 12px;
color: var(--wp--preset--color--text-muted);
line-height: 1.4;
}
.bdn-single__featured figcaption a { color: var(--wp--preset--color--text-secondary); }
.bdn-single__featured figcaption .bdn-image-license { font-size: 11px; opacity: 0.8; }
/* Inline figures spliced by ai-publish.php — same look as featured */
.bdn-single__body .bdn-ai-figure {
margin: 26px -8px;
}
.bdn-single__body .bdn-ai-figure img {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
.bdn-single__body .bdn-ai-figure figcaption {
margin-top: 8px;
font-family: var(--wp--preset--font-family--body);
font-size: 12px;
color: var(--wp--preset--color--text-muted);
line-height: 1.4;
}
/* Multi-image galleries spliced when 2+ images anchor to the same paragraph
(Task 9). Bare tags in a CSS-grid wrapper + one shared figcaption.
Per-size column counts mirror the editor preview: 2-up for 2 images,
"1 large + 2 small" for 3, 2x2 for 4, 3-col for 5+. */
.bdn-single__body .bdn-ai-gallery {
margin: 26px -8px;
}
.bdn-single__body .bdn-ai-gallery__grid {
display: grid;
gap: 6px;
}
.bdn-single__body .bdn-ai-gallery--2 .bdn-ai-gallery__grid { grid-template-columns: 1fr 1fr; }
.bdn-single__body .bdn-ai-gallery--3 .bdn-ai-gallery__grid {
grid-template-columns: 1fr 1fr;
grid-template-areas: "a a" "b c";
}
.bdn-single__body .bdn-ai-gallery--3 .bdn-ai-gallery__grid img:nth-child(1) { grid-area: a; }
.bdn-single__body .bdn-ai-gallery--3 .bdn-ai-gallery__grid img:nth-child(2) { grid-area: b; }
.bdn-single__body .bdn-ai-gallery--3 .bdn-ai-gallery__grid img:nth-child(3) { grid-area: c; }
.bdn-single__body .bdn-ai-gallery--4 .bdn-ai-gallery__grid { grid-template-columns: 1fr 1fr; }
.bdn-single__body .bdn-ai-gallery--5 .bdn-ai-gallery__grid,
.bdn-single__body .bdn-ai-gallery--6 .bdn-ai-gallery__grid,
.bdn-single__body .bdn-ai-gallery--7 .bdn-ai-gallery__grid,
.bdn-single__body .bdn-ai-gallery--8 .bdn-ai-gallery__grid,
.bdn-single__body .bdn-ai-gallery--9 .bdn-ai-gallery__grid { grid-template-columns: repeat(3, 1fr); }
.bdn-single__body .bdn-ai-gallery__grid img {
width: 100%;
height: 100%;
min-height: 0;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 6px;
display: block;
}
.bdn-single__body .bdn-ai-gallery figcaption {
margin-top: 8px;
font-family: var(--wp--preset--font-family--body);
font-size: 12px;
color: var(--wp--preset--color--text-muted);
line-height: 1.4;
}
@media (max-width: 600px) {
.bdn-single__body .bdn-ai-gallery--3 .bdn-ai-gallery__grid,
.bdn-single__body .bdn-ai-gallery--5 .bdn-ai-gallery__grid,
.bdn-single__body .bdn-ai-gallery--6 .bdn-ai-gallery__grid,
.bdn-single__body .bdn-ai-gallery--7 .bdn-ai-gallery__grid,
.bdn-single__body .bdn-ai-gallery--8 .bdn-ai-gallery__grid,
.bdn-single__body .bdn-ai-gallery--9 .bdn-ai-gallery__grid {
grid-template-columns: 1fr 1fr;
grid-template-areas: none;
}
.bdn-single__body .bdn-ai-gallery--3 .bdn-ai-gallery__grid img:nth-child(n) { grid-area: auto; }
}
.bdn-single__share {
display: flex;
gap: 8px;
padding: 20px 0;
border-top: 1px solid var(--wp--preset--color--border);
border-bottom: 1px solid var(--wp--preset--color--border);
margin: 40px 0 30px;
}
/* === Live tab === */
.bdn-live {
max-width: 1024px;
margin: 0 auto;
padding: 0;
}
.bdn-live__player {
width: 100%;
aspect-ratio: 16/9;
background: #000;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.bdn-live__placeholder { text-align: center; color: var(--wp--preset--color--text-muted); }
.bdn-live__placeholder img { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 8px; }
.bdn-live__placeholder p { margin: 0; }
.bdn-live__placeholder .subtitle { color: rgba(255, 255, 255, 0.3); font-size: 12px; margin-top: 2px; }
.bdn-live__frame { width: 100%; height: 100%; border: 0; }
.bdn-live__info { padding: 20px 16px; }
.bdn-live__title {
font-family: var(--wp--preset--font-family--headline);
font-size: 18px;
font-weight: 700;
margin: 0 0 6px;
color: var(--wp--preset--color--white);
}
.bdn-live__desc { color: var(--wp--preset--color--text-muted); font-size: 13px; margin: 0 0 18px; }
.bdn-live__platforms {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 8px;
}
.bdn-live-platform { display: block; }
.bdn-live-platform__link {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--wp--preset--color--border);
border-radius: 10px;
color: var(--wp--preset--color--white);
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
}
.bdn-live-platform__link:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
color: var(--wp--preset--color--white);
text-decoration: none;
}
.bdn-live-platform__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
font-size: 16px;
line-height: 1;
background: rgba(255, 255, 255, 0.06);
}
.bdn-live-platform__link--youtube .bdn-live-platform__icon { background: rgba(255, 0, 0, 0.18); color: #ff6b6b; }
.bdn-live-platform__link--x .bdn-live-platform__icon { background: rgba(255, 255, 255, 0.12); color: #fff; }
.bdn-live-platform__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.bdn-live-platform__label {
font-size: 14px;
font-weight: 600;
color: var(--wp--preset--color--white);
}
.bdn-live-platform__meta {
font-size: 12px;
color: var(--wp--preset--color--text-muted);
}
/* === Podcast === */
.bdn-podcast-header {
display: flex;
align-items: center;
gap: 12px;
padding: 22px 16px 12px;
}
.bdn-podcast-header img { width: 64px; height: 64px; border-radius: 8px; }
.bdn-podcast-header h2 {
font-family: var(--wp--preset--font-family--headline);
font-size: 16px;
font-weight: 700;
margin: 0;
color: var(--wp--preset--color--white);
}
.bdn-podcast-header p {
font-size: 12px;
color: var(--wp--preset--color--text-muted);
margin: 3px 0 0;
}
.bdn-podcast-desc {
color: var(--wp--preset--color--text-secondary);
font-size: 13px;
line-height: 1.55;
padding: 0 16px 14px;
margin: 0;
}
.bdn-podcast-episodes { padding: 0 16px 40px; }
.bdn-alerts-empty {
margin: 24px 16px 32px;
padding: 32px 20px;
background: rgba(255, 255, 255, 0.02);
border: 1px dashed var(--wp--preset--color--border);
border-radius: 12px;
text-align: center;
}
.bdn-alerts-empty__icon {
color: var(--wp--preset--color--accent-blue);
margin: 0 auto 12px;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(56, 182, 255, 0.12);
}
.bdn-alerts-empty__title {
font-family: var(--wp--preset--font-family--headline);
font-size: 18px;
font-weight: 700;
margin: 0 0 6px;
color: var(--wp--preset--color--white);
}
.bdn-alerts-empty__text {
color: var(--wp--preset--color--text-secondary);
font-size: 14px;
line-height: 1.5;
margin: 0 0 16px;
}
.bdn-alerts-empty__btn { display: inline-block; }
.bdn-alerts-signup-card {
margin: 24px 16px 40px;
padding: 24px 20px;
background: linear-gradient(135deg, var(--wp--preset--color--navy) 0%, var(--wp--preset--color--navy-deep) 100%);
border: 1px solid var(--wp--preset--color--border);
border-radius: 12px;
text-align: center;
max-width: 720px;
}
.bdn-alerts-signup-card__title {
font-family: var(--wp--preset--font-family--headline);
font-size: 18px;
font-weight: 700;
color: var(--wp--preset--color--white);
margin: 0 0 8px;
}
.bdn-alerts-signup-card__body {
color: var(--wp--preset--color--text-secondary);
font-size: 14px;
line-height: 1.55;
margin: 0 0 16px;
}
@media (min-width: 720px) {
.bdn-alerts-signup-card { margin: 24px auto 40px; }
}
/* Registration form opt-in checkboxes */
.bdn-signup-opt {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 10px 0;
padding: 10px 0;
}
.bdn-signup-opt label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: var(--wp--preset--color--text-secondary);
cursor: pointer;
line-height: 1.4;
}
.bdn-signup-opt input[type="checkbox"] {
margin-top: 2px;
accent-color: var(--wp--preset--color--accent-blue);
flex-shrink: 0;
}
/* Inline signup card (shortcode: bdn_signup_card) */
.bdn-signup-card {
margin: 20px 16px;
padding: 22px 20px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--wp--preset--color--border);
border-radius: 10px;
max-width: 720px;
}
.bdn-signup-card__title {
font-family: var(--wp--preset--font-family--headline);
font-size: 16px;
font-weight: 700;
color: var(--wp--preset--color--white);
margin: 0 0 6px;
}
.bdn-signup-card__body {
color: var(--wp--preset--color--text-secondary);
font-size: 13px;
line-height: 1.5;
margin: 0 0 14px;
}
.bdn-podcast-divider {
border: 0;
border-top: 1px solid var(--wp--preset--color--border);
margin: 24px 16px;
max-width: 1200px;
}
.bdn-podcast-empty {
border: 1px dashed var(--wp--preset--color--border);
border-radius: 12px;
padding: 20px;
background: rgba(255, 255, 255, 0.02);
text-align: left;
}
.bdn-podcast-empty__label {
font-size: 11px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--wp--preset--color--accent-blue);
margin: 0 0 8px;
font-weight: 700;
}
.bdn-podcast-empty__text {
color: var(--wp--preset--color--text-secondary);
font-size: 13px;
line-height: 1.55;
margin: 0 0 14px;
}
.bdn-podcast-season-heading {
display: block !important;
font-family: var(--wp--preset--font-family--headline);
font-size: 14px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--wp--preset--color--text-secondary);
margin: 28px 0 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--wp--preset--color--border);
font-weight: 700;
}
.bdn-podcast-season-heading:first-of-type,
.bdn-podcast-season-heading:first-child { margin-top: 4px; }
/* Force-visible on mobile too; guard against any ancestor display-none */
@media (max-width: 767px) {
.bdn-podcast-season-heading {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 13px;
}
}
.bdn-podcast-episode-wrap {
border-bottom: 1px solid var(--wp--preset--color--border);
}
.bdn-podcast-episode-wrap:last-child { border-bottom: 0; }
.bdn-podcast-episode {
display: flex;
gap: 12px;
padding: 12px 0;
background: transparent;
border: 0;
width: 100%;
text-align: left;
color: var(--wp--preset--color--white);
align-items: center;
cursor: default;
font-family: inherit;
}
.bdn-podcast-episode.is-expandable { cursor: pointer; }
.bdn-podcast-episode.is-expandable:hover { background: rgba(255, 255, 255, 0.02); }
.bdn-podcast-episode__play {
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--wp--preset--color--border);
display: flex; align-items: center; justify-content: center;
color: var(--wp--preset--color--white);
transition: background 0.15s ease;
}
.bdn-podcast-episode.is-open .bdn-podcast-episode__play {
background: var(--wp--preset--color--accent-blue);
border-color: var(--wp--preset--color--accent-blue);
}
.bdn-podcast-episode__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.bdn-podcast-episode__title {
font-family: var(--wp--preset--font-family--headline);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
color: var(--wp--preset--color--white);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bdn-podcast-episode__meta { color: var(--wp--preset--color--text-muted); font-size: 11px; }
.bdn-podcast-episode__drawer { padding: 0 0 16px; }
.bdn-podcast-episode__player iframe {
border-radius: 12px;
display: block;
width: 100%;
border: 0;
}
.bdn-podcast-episode__player audio {
width: 100%;
display: block;
margin-top: 4px;
}
.bdn-podcast-episode__player--external { margin-top: 4px; }
/* === Custom dark audio player === */
.bdn-player {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--wp--preset--color--border);
border-radius: 12px;
padding: 14px 16px;
margin-top: 4px;
display: flex;
flex-direction: column;
gap: 10px;
font-family: var(--wp--preset--font-family--body);
}
.bdn-player audio { display: none; }
.bdn-player__row {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.bdn-player__btn {
background: transparent;
border: 0;
padding: 6px;
cursor: pointer;
color: var(--wp--preset--color--text-secondary);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2px;
transition: color 0.15s ease, background 0.15s ease;
font-size: 11px;
font-weight: 600;
}
.bdn-player__btn:hover { color: var(--wp--preset--color--white); background: rgba(255, 255, 255, 0.05); }
.bdn-player__btn--skip-back,
.bdn-player__btn--skip-fwd { position: relative; padding: 8px; }
.bdn-player__btn--skip-back span,
.bdn-player__btn--skip-fwd span {
position: absolute;
font-size: 9px;
font-weight: 700;
color: currentColor;
letter-spacing: 0;
}
.bdn-player__btn--play {
background: var(--wp--preset--color--navy);
color: var(--wp--preset--color--white);
width: 52px;
height: 52px;
flex-shrink: 0;
border: 0;
box-shadow: 0 2px 8px rgba(7, 69, 118, 0.5);
}
.bdn-player__btn--play:hover { background: #0a6fb3; color: var(--wp--preset--color--white); }
.bdn-player__btn--play .bdn-player__icon-pause { display: none; }
.bdn-player.is-playing .bdn-player__icon-play { display: none; }
.bdn-player.is-playing .bdn-player__icon-pause { display: block; }
.bdn-player__scrub {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--wp--preset--color--text-muted);
font-variant-numeric: tabular-nums;
}
.bdn-player__time { flex: 0 0 auto; min-width: 40px; }
.bdn-player__time--rem { text-align: right; }
.bdn-player__seek {
flex: 1;
-webkit-appearance: none;
appearance: none;
background: transparent;
height: 18px;
cursor: pointer;
margin: 0;
}
.bdn-player__seek::-webkit-slider-runnable-track {
height: 3px;
background: linear-gradient(to right,
var(--wp--preset--color--accent-blue) 0%,
var(--wp--preset--color--accent-blue) var(--bdn-seek, 0%),
rgba(255, 255, 255, 0.1) var(--bdn-seek, 0%),
rgba(255, 255, 255, 0.1) 100%);
border-radius: 2px;
}
.bdn-player__seek::-moz-range-track {
height: 3px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
}
.bdn-player__seek::-moz-range-progress {
background: var(--wp--preset--color--accent-blue);
height: 3px;
border-radius: 2px;
}
.bdn-player__seek::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--wp--preset--color--white);
border: 0;
margin-top: -4.5px;
cursor: pointer;
}
.bdn-player__seek::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--wp--preset--color--white);
border: 0;
cursor: pointer;
}
.bdn-player__controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 2px;
}
.bdn-player__volume {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
max-width: 160px;
}
.bdn-player__vol {
-webkit-appearance: none;
appearance: none;
flex: 1;
height: 14px;
background: transparent;
cursor: pointer;
margin: 0;
}
.bdn-player__vol::-webkit-slider-runnable-track {
height: 3px;
background: rgba(255, 255, 255, 0.15);
border-radius: 2px;
}
.bdn-player__vol::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--wp--preset--color--white);
margin-top: -3.5px;
}
.bdn-player__vol::-moz-range-track {
height: 3px;
background: rgba(255, 255, 255, 0.15);
border-radius: 2px;
}
.bdn-player__vol::-moz-range-thumb {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--wp--preset--color--white);
border: 0;
}
.bdn-player__speed-wrap {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--wp--preset--color--text-muted);
}
.bdn-player__speed {
background: rgba(255, 255, 255, 0.04);
color: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--border);
border-radius: 6px;
padding: 4px 8px;
font-family: inherit;
font-size: 12px;
cursor: pointer;
}
.bdn-player__speed:focus { outline: 1px solid var(--wp--preset--color--accent-blue); outline-offset: 1px; }
.bdn-player.is-muted .bdn-player__btn--mute { color: var(--wp--preset--color--breaking); }
.bdn-btn--spotify {
display: inline-block;
background: #1DB954;
color: #fff !important;
padding: 10px 20px;
border-radius: 999px;
font-weight: 600;
text-decoration: none !important;
font-size: 14px;
border: 0;
transition: filter 0.15s ease;
}
.bdn-btn--spotify:hover { filter: brightness(1.08); color: #fff !important; }
/* === Alerts (public page) === */
.bdn-alerts { padding: 0 16px 40px; }
.bdn-alert-card {
padding: 14px 13px;
margin-bottom: 10px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--wp--preset--color--border);
position: relative;
}
.bdn-alert-card.is-breaking {
background: rgba(181, 6, 6, 0.08);
border-color: rgba(181, 6, 6, 0.25);
}
.bdn-alert-card.is-breaking::after {
content: '';
position: absolute;
top: 14px;
right: 14px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--wp--preset--color--accent-red);
animation: bdn-pulse 2s ease-in-out infinite;
}
.bdn-alert-card__label {
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
color: var(--wp--preset--color--text-muted);
text-transform: uppercase;
margin-right: 6px;
}
.bdn-alert-card.is-breaking .bdn-alert-card__label { color: var(--wp--preset--color--accent-red); }
.bdn-alert-card__time { color: var(--wp--preset--color--text-muted); font-size: 10px; }
.bdn-alert-card__text { color: var(--wp--preset--color--white); font-size: 14px; line-height: 1.5; margin: 6px 0 0; }
.bdn-alert-card__link {
margin-top: 8px; padding: 10px 12px; border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--wp--preset--color--border);
display: block;
text-decoration: none;
}
.bdn-alert-card__link-label {
font-size: 9px; font-weight: 700; letter-spacing: 0.8px; color: var(--wp--preset--color--text-muted);
text-transform: uppercase;
}
.bdn-alert-card__link-title {
color: var(--wp--preset--color--accent-blue);
font-size: 13px; font-weight: 600; margin: 3px 0 0;
}
/* === Newsletter signup === */
.bdn-newsletter {
padding: 24px 16px;
border-radius: 10px;
background: linear-gradient(135deg, var(--wp--preset--color--navy) 0%, var(--wp--preset--color--navy-deep) 100%);
border: 1px solid rgba(56, 182, 255, 0.12);
text-align: center;
margin: 24px 0;
}
.bdn-newsletter h3 {
color: var(--wp--preset--color--white);
font-family: var(--wp--preset--font-family--headline);
font-size: 18px;
font-weight: 700;
margin: 0 0 4px;
}
.bdn-newsletter p {
color: var(--wp--preset--color--text-secondary);
font-size: 13px;
margin: 0 0 14px;
}
.bdn-newsletter-form {
display: flex;
gap: 8px;
max-width: 560px;
margin: 0 auto;
}
.bdn-newsletter-form input[type="email"],
.bdn-newsletter-form input[type="text"] {
flex: 1;
min-width: 0;
padding: 11px 14px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--wp--preset--color--border);
color: var(--wp--preset--color--white);
font-size: 14px;
outline: none;
-webkit-appearance: none;
}
.bdn-newsletter-form input[type="email"]:focus,
.bdn-newsletter-form input[type="text"]:focus { border-color: var(--wp--preset--color--accent-blue); background: rgba(255, 255, 255, 0.1); }
.bdn-newsletter-form input[type="email"]:focus-visible,
.bdn-newsletter-form input[type="text"]:focus-visible {
outline: 2px solid var(--wp--preset--color--accent-blue);
outline-offset: 2px;
}
.bdn-newsletter-form input[type="text"][name="first_name"] { flex: 0 1 140px; }
.bdn-newsletter-form input::placeholder { color: var(--wp--preset--color--text-muted); }
/* Phones: first-name + email + Subscribe in one non-wrapping flex row crushed the
email field to ~34px (unusable). Stack all three full-width below 560px. */
@media (max-width: 560px) {
.bdn-newsletter-form { flex-wrap: wrap; }
.bdn-newsletter-form input[type="text"][name="first_name"],
.bdn-newsletter-form input[type="email"],
.bdn-newsletter-form .bdn-btn { flex: 1 1 100%; }
}
/* === My Account / User profile === */
.bdn-account { padding: 32px 16px; max-width: 680px; margin: 0 auto; }
.bdn-account h1 { font-family: var(--wp--preset--font-family--headline); font-size: 28px; margin: 0 0 24px; }
.bdn-account__tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--wp--preset--color--border); }
.bdn-account__tabs button {
background: transparent; border: 0; padding: 10px 16px;
color: var(--wp--preset--color--text-muted); font-size: 13px; font-weight: 600; cursor: pointer;
border-bottom: 2px solid transparent;
}
.bdn-account__tabs button.is-active {
color: var(--wp--preset--color--white);
border-bottom-color: var(--wp--preset--color--accent-blue);
}
.bdn-form-field { margin-bottom: 14px; }
.bdn-form-field label {
display: block;
font-size: 11px;
font-weight: 700;
color: var(--wp--preset--color--text-muted);
letter-spacing: 0.6px;
text-transform: uppercase;
margin-bottom: 6px;
}
.bdn-form-field input {
width: 100%;
padding: 11px 14px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--wp--preset--color--border);
color: var(--wp--preset--color--white);
font-size: 14px;
outline: none;
font-family: var(--wp--preset--font-family--body);
}
.bdn-form-field input:focus { border-color: var(--wp--preset--color--accent-blue); }
.bdn-form-field input:focus-visible {
outline: 2px solid var(--wp--preset--color--accent-blue);
outline-offset: 2px;
}
.bdn-form-error {
padding: 10px 14px;
border-radius: 8px;
background: rgba(181, 6, 6, 0.1);
border: 1px solid rgba(181, 6, 6, 0.3);
color: #ffb3b3;
font-size: 13px;
margin-bottom: 14px;
}
.bdn-form-success {
padding: 10px 14px;
border-radius: 8px;
background: rgba(56, 182, 255, 0.1);
border: 1px solid rgba(56, 182, 255, 0.3);
color: var(--wp--preset--color--accent-blue);
font-size: 13px;
margin-bottom: 14px;
}
/* === Footer === */
.bdn-site-footer {
margin-top: 60px;
padding: 40px 16px 24px;
border-top: 1px solid var(--wp--preset--color--border);
background: rgba(255, 255, 255, 0.01);
}
.bdn-footer-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
@media (min-width: 768px) {
.bdn-footer-inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
.bdn-footer h4 {
font-family: var(--wp--preset--font-family--headline);
font-size: 13px;
color: var(--wp--preset--color--white);
margin: 0 0 12px;
}
.bdn-footer ul { list-style: none; padding: 0; margin: 0; }
.bdn-footer li { margin-bottom: 8px; }
.bdn-footer a { color: var(--wp--preset--color--text-secondary); font-size: 13px; }
.bdn-footer a:hover { color: var(--wp--preset--color--white); }
.bdn-footer-bottom {
max-width: 1200px;
margin: 32px auto 0;
padding-top: 20px;
border-top: 1px solid var(--wp--preset--color--border);
color: var(--wp--preset--color--text-muted);
font-size: 12px;
text-align: center;
}
.bdn-social { display: flex; gap: 12px; }
.bdn-social a {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--wp--preset--color--border);
display: inline-flex; align-items: center; justify-content: center;
color: var(--wp--preset--color--white);
}
.bdn-social a:hover { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); }
/* === Search page === */
.bdn-search-form {
display: flex;
gap: 8px;
padding: 32px 16px;
max-width: 680px;
margin: 0 auto;
}
.bdn-search-form input {
flex: 1;
padding: 13px 16px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--wp--preset--color--border);
color: var(--wp--preset--color--white);
font-size: 15px;
outline: none;
}
.bdn-search-form input:focus { border-color: var(--wp--preset--color--accent-blue); }
.bdn-search-form input:focus-visible {
outline: 2px solid var(--wp--preset--color--accent-blue);
outline-offset: 2px;
}
/* === Comments === */
.bdn-comments { padding: 40px 16px; max-width: 720px; margin: 0 auto; }
.bdn-comments h2 {
font-family: var(--wp--preset--font-family--headline);
font-size: 20px;
margin: 0 0 20px;
}
.bdn-comments ol, .bdn-comments .comment-list { list-style: none; padding: 0; }
.bdn-comment {
padding: 14px 0;
border-bottom: 1px solid var(--wp--preset--color--border);
}
.bdn-comment__author {
font-weight: 600;
font-size: 13px;
color: var(--wp--preset--color--white);
}
.bdn-comment__date {
font-size: 11px;
color: var(--wp--preset--color--text-muted);
margin-left: 8px;
}
.bdn-comment__body {
color: var(--wp--preset--color--text-secondary);
font-size: 14px;
line-height: 1.55;
margin: 8px 0 0;
}
/* WP native comment form, themed for dark UI.
Selectors are over-specific (and use !important on inputs) because WP core's
wp-block-post-comments-form block injects opinionated white-background styles
via theme.json that beat single-class rules. */
body.bdn #respond,
body.bdn .comment-respond,
body.bdn .wp-block-post-comments-form {
margin-top: 28px;
padding: 20px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--wp--preset--color--border);
border-radius: 10px;
}
body.bdn #respond h3,
body.bdn .comment-respond .comment-reply-title,
body.bdn .wp-block-post-comments-form .comment-reply-title {
font-family: var(--wp--preset--font-family--headline);
font-size: 18px;
font-weight: 700;
color: var(--wp--preset--color--white);
margin: 0 0 14px;
}
body.bdn .comment-form p,
body.bdn .comment-form-comment,
body.bdn .comment-form-author,
body.bdn .comment-form-email,
body.bdn .comment-form-url,
body.bdn .comment-form-cookies-consent { margin: 0 0 12px; }
body.bdn .comment-form label {
display: block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.4px;
color: var(--wp--preset--color--text-secondary);
margin-bottom: 6px;
}
body.bdn .comment-form input[type="text"],
body.bdn .comment-form input[type="email"],
body.bdn .comment-form input[type="url"],
body.bdn .comment-form textarea,
body.bdn .wp-block-post-comments-form input[type="text"],
body.bdn .wp-block-post-comments-form input[type="email"],
body.bdn .wp-block-post-comments-form input[type="url"],
body.bdn .wp-block-post-comments-form textarea {
width: 100% !important;
padding: 12px 14px !important;
background: #0F1621 !important;
color: var(--wp--preset--color--white) !important;
border: 1px solid var(--wp--preset--color--border) !important;
border-radius: 6px !important;
font-family: var(--wp--preset--font-family--body) !important;
/* font-size MUST be ≥16px or iOS auto-zooms on focus, scrolls the page,
and looks broken. Was 14px — confirmed iOS zoom-in repro. */
font-size: 16px !important;
line-height: 1.45 !important;
box-sizing: border-box !important;
transition: border-color 0.15s ease, background 0.15s ease;
-webkit-appearance: none;
appearance: none;
box-shadow: none !important;
}
body.bdn .comment-form input:focus,
body.bdn .comment-form textarea:focus,
body.bdn .wp-block-post-comments-form input:focus,
body.bdn .wp-block-post-comments-form textarea:focus {
outline: none !important;
border-color: var(--wp--preset--color--accent-blue) !important;
background: #131A26 !important;
}
body.bdn .comment-form input:focus-visible,
body.bdn .comment-form textarea:focus-visible,
body.bdn .wp-block-post-comments-form input:focus-visible,
body.bdn .wp-block-post-comments-form textarea:focus-visible {
outline: 2px solid var(--wp--preset--color--accent-blue) !important;
outline-offset: 2px !important;
}
body.bdn .comment-form textarea,
body.bdn .wp-block-post-comments-form textarea { min-height: 120px !important; resize: vertical; }
body.bdn .comment-form input::placeholder,
body.bdn .comment-form textarea::placeholder,
body.bdn .wp-block-post-comments-form input::placeholder,
body.bdn .wp-block-post-comments-form textarea::placeholder { color: rgba(255, 255, 255, 0.3); }
/* Autofill (Chrome paints inputs yellow on autofill — kill that). */
body.bdn .comment-form input:-webkit-autofill,
body.bdn .wp-block-post-comments-form input:-webkit-autofill {
-webkit-text-fill-color: var(--wp--preset--color--white);
-webkit-box-shadow: 0 0 0 1000px #0F1621 inset !important;
caret-color: var(--wp--preset--color--white);
}
.comment-form-cookies-consent label {
display: inline;
font-weight: 400;
color: var(--wp--preset--color--text-secondary);
font-size: 12px;
margin-left: 6px;
}
.comment-form .form-submit { margin-top: 8px; }
.comment-form input[type="submit"],
.comment-form .submit {
background: var(--wp--preset--color--accent-blue);
color: var(--wp--preset--color--white);
border: 0;
padding: 10px 18px;
border-radius: 999px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: filter 0.15s ease;
}
.comment-form input[type="submit"]:hover { filter: brightness(1.1); }
.comment-notes,
.logged-in-as {
font-size: 12px;
color: var(--wp--preset--color--text-muted);
margin: 0 0 14px;
}
.logged-in-as a { color: var(--wp--preset--color--accent-blue); }
.must-log-in a { color: var(--wp--preset--color--accent-blue); }
/* === Utility === */
.bdn-sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.bdn-text-muted { color: var(--wp--preset--color--text-muted); }
.bdn-text-secondary { color: var(--wp--preset--color--text-secondary); }
/* === Animations === */
@keyframes bdn-slide-in {
from { opacity: 0; transform: translateX(16px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes bdn-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.bdn-animate-in { animation: bdn-slide-in 0.2s ease-out; }
/* ===================== R2.1 additions ===================== */
/* -- CookieYes widget: keep bottom-left on desktop, move to top-right on mobile.
Must not overlap header (which is 56–64px tall on mobile), bell icon, or hamburger.
Sits BELOW the sticky header (top: 72px) and in the right margin (right: 8px) at
all tested widths 320/375/390/414/428. Width of the bubble is ~48px so it fits
comfortably at right:8px with 40px of breathing room before the viewport edge. */
@media (max-width: 900px) {
/* CookieYes's revisit button root (exact class varies by plugin version). */
.cky-btn-revisit-wrapper,
.cky-revisit-bottom-left,
.cky-revisit-bottom-right,
.cky-btn-revisit {
position: fixed !important;
top: 72px !important;
right: 8px !important;
bottom: auto !important;
left: auto !important;
z-index: 85 !important;
}
/* Consent bar (the big banner on first visit) — leave at bottom on mobile, but
add a little bottom offset so it doesn't overlap our bottom tab bar. */
.cky-consent-container:not(.cky-hide) {
bottom: calc(88px + env(safe-area-inset-bottom, 0)) !important;
}
}
/* -- Sticky header: belt-and-suspenders higher z-index on mobile so no article
card can visually bleed through. Header at 120 guarantees stacking order. */
@media (max-width: 767px) {
.wp-site-blocks > header.wp-block-template-part,
header.wp-block-template-part:has(.bdn-site-header),
.bdn-site-header {
z-index: 120 !important;
box-shadow: 0 1px 0 0 var(--wp--preset--color--border);
}
/* Ensure no opacity/backdrop-filter weirdness leaves the header semi-transparent. */
.bdn-site-header { opacity: 1 !important; }
}
/* wpautop sometimes injects
inside live-indicator; suppress. */
@media (max-width: 900px) {
.bdn-live-indicator br { display: none; }
}
/* ===== end R2.1 additions ===== */
/* ===================== R2.3 additions ===================== */
/* Password strength meter on signup */
.bdn-pw-hint { display: block; font-size: 12px; color: var(--wp--preset--color--text-muted); margin-top: 4px; }
.bdn-pw-meter { display: block; font-size: 12px; margin-top: 4px; color: var(--wp--preset--color--text-muted); }
.bdn-pw-meter[data-score="1"] { color: var(--wp--preset--color--breaking); }
.bdn-pw-meter[data-score="2"] { color: #d97706; }
.bdn-pw-meter[data-score="3"] { color: #ca8a04; }
.bdn-pw-meter[data-score="4"] { color: #65a30d; }
.bdn-pw-meter[data-score="5"] { color: #16a34a; }
/* Bell-icon dropdown (R2.3 Fix 5) */
.bdn-bell-dropdown {
position: absolute;
top: 100%;
right: 0;
margin-top: 8px;
width: 360px;
max-width: calc(100vw - 16px);
background: var(--wp--preset--color--background);
border: 1px solid var(--wp--preset--color--border);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.4);
z-index: 130;
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.bdn-bell-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.bdn-bell-dropdown__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px 10px;
border-bottom: 1px solid var(--wp--preset--color--border);
margin-bottom: 4px;
}
.bdn-bell-dropdown__header h3 {
font-family: var(--wp--preset--font-family--headline);
font-size: 14px;
margin: 0;
color: var(--wp--preset--color--white);
}
.bdn-bell-dropdown__list { list-style: none; margin: 0; padding: 0; }
.bdn-bell-dropdown__list li a {
display: block;
padding: 10px;
border-radius: 8px;
color: var(--wp--preset--color--white);
text-decoration: none;
transition: background 0.15s ease;
}
.bdn-bell-dropdown__list li a:hover { background: rgba(255,255,255,0.04); }
.bdn-bell-dropdown__pill {
display: inline-block;
padding: 2px 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
background: var(--wp--preset--color--breaking);
color: var(--wp--preset--color--white);
border-radius: 3px;
margin-right: 6px;
vertical-align: baseline;
}
.bdn-bell-dropdown__title { font-size: 14px; line-height: 1.35; color: var(--wp--preset--color--white); }
.bdn-bell-dropdown__time { display: block; font-size: 11px; color: var(--wp--preset--color--text-muted); margin-top: 2px; }
.bdn-bell-dropdown__empty { padding: 20px 10px; text-align: center; color: var(--wp--preset--color--text-muted); font-size: 13px; }
.bdn-bell-dropdown__footer {
padding: 8px 10px;
border-top: 1px solid var(--wp--preset--color--border);
margin-top: 4px;
text-align: center;
}
.bdn-bell-dropdown__footer a { font-size: 13px; color: var(--wp--preset--color--accent-blue); text-decoration: none; }
/* position relative on the bell button so absolute-positioned dropdown anchors to it */
.bdn-site-header__actions { position: relative; }
/* Notifications tab redesigned (R2.3 Fix 6) */
.bdn-prefs { display: flex; flex-direction: column; gap: 24px; }
.bdn-prefs__section {
background: rgba(255,255,255,0.02);
border: 1px solid var(--wp--preset--color--border);
border-radius: 10px;
padding: 16px 18px;
}
.bdn-prefs__section h3 {
font-family: var(--wp--preset--font-family--headline);
font-size: 15px;
font-weight: 600;
margin: 0 0 6px;
color: var(--wp--preset--color--white);
}
.bdn-prefs__help { font-size: 12px; color: var(--wp--preset--color--text-muted); margin: 0 0 14px; }
.bdn-prefs-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 0;
}
.bdn-prefs-row + .bdn-prefs-row { border-top: 1px solid rgba(255,255,255,0.05); }
.bdn-prefs-row__label { color: var(--wp--preset--color--white); font-size: 14px; font-weight: 500; }
.bdn-prefs-row__desc { color: var(--wp--preset--color--text-muted); font-size: 12px; margin-top: 2px; }
.bdn-prefs-row__sub { padding-left: 20px; }
.bdn-toggle {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.bdn-toggle input { opacity: 0; width: 0; height: 0; }
.bdn-toggle__slider {
position: absolute; inset: 0;
background: rgba(255,255,255,0.15);
border-radius: 999px;
transition: background 0.2s ease;
cursor: pointer;
}
.bdn-toggle__slider::before {
content: '';
position: absolute;
width: 18px; height: 18px;
left: 3px; top: 3px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s ease;
}
.bdn-toggle input:checked + .bdn-toggle__slider { background: var(--wp--preset--color--accent-blue); }
.bdn-toggle input:checked + .bdn-toggle__slider::before { transform: translateX(20px); }
.bdn-toggle input:disabled + .bdn-toggle__slider { opacity: 0.5; cursor: not-allowed; }
.bdn-prefs-row--sub { padding-left: 12px; }
/* Saved articles tab card layout (R2.3 Fix 7) */
.bdn-saved-list { display: flex; flex-direction: column; gap: 16px; }
.bdn-saved-card {
display: grid;
grid-template-columns: 80px 1fr;
gap: 12px;
padding: 14px;
border: 1px solid var(--wp--preset--color--border);
border-radius: 10px;
background: rgba(255,255,255,0.02);
transition: background 0.15s ease, transform 0.15s ease;
position: relative;
}
.bdn-saved-card:hover { background: rgba(255,255,255,0.04); transform: translateY(-1px); }
.bdn-saved-card__img {
display: block;
width: 80px; height: 60px;
overflow: hidden;
border-radius: 6px;
background: #0A0E14;
}
.bdn-saved-card__img img { width: 100%; height: 100%; object-fit: cover; }
.bdn-saved-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bdn-saved-card__title {
font-family: var(--wp--preset--font-family--headline);
font-size: 16px;
line-height: 1.3;
margin: 0;
}
.bdn-saved-card__title a { color: var(--wp--preset--color--white); text-decoration: none; }
.bdn-saved-card__title a:hover { color: var(--wp--preset--color--accent-blue); }
.bdn-saved-card__excerpt {
color: var(--wp--preset--color--text-secondary);
font-size: 13px;
line-height: 1.45;
margin: 0;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.bdn-saved-card__meta { color: var(--wp--preset--color--text-muted); font-size: 11px; margin-top: 2px; }
.bdn-saved-card__remove {
position: absolute;
top: 8px; right: 8px;
background: transparent;
border: 0;
color: var(--wp--preset--color--text-muted);
cursor: pointer;
padding: 4px;
font-size: 16px;
line-height: 1;
}
.bdn-saved-card__remove:hover { color: var(--wp--preset--color--breaking); }
@media (min-width: 768px) {
.bdn-saved-card { grid-template-columns: 120px 1fr; }
.bdn-saved-card__img { width: 120px; height: 80px; }
.bdn-saved-card__title { font-size: 18px; }
}
/* Toast for auto-save notifications (R2.3 Fix 6 helper) */
.bdn-toast-saved {
position: fixed;
bottom: 20px;
right: 20px;
background: var(--wp--preset--color--accent-blue);
color: #fff;
padding: 10px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
z-index: 9999;
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
opacity: 0;
transform: translateY(12px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.bdn-toast-saved.is-show { opacity: 1; transform: translateY(0); }
/* === Reduced motion ===
Quality bar #1: respect prefers-reduced-motion across all animations and
transitions. Universal selector + !important is the canonical pattern
(GOV.UK Frontend, Bootstrap) — beats the ~40 inline transition decls and
the bdn-pulse / bdn-slide-in / bdn-fade-in keyframes scattered across this
file. End states still apply (toast still shows, cards still gain hover
styles); only the time-based motion is neutralized. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* === Hantavirus Hub (.bdn-hh) ===========================================
Standalone hub aesthetic — NOT the BDN article layout. Distinct accent
(warm amber), sticky pulse bar, multiple interactive modules. Designed
to feel new/fresh: nothing else on BDN uses this typography or palette.
======================================================================= */
.bdn-main--hanta > * { max-width: none; }
.bdn-main--hanta { background: #0c1118; }
.bdn-hh {
--hh-accent: #d4a24a;
--hh-accent-dim: rgba(212, 162, 74, 0.18);
--hh-bg: #0c1118;
--hh-surface: #131a23;
--hh-surface-2: #1a232e;
--hh-border: rgba(255,255,255,0.08);
--hh-text: #e7eaee;
--hh-text-dim: #9aa3ad;
--hh-text-faint: #5e6770;
max-width: 840px;
margin: 0 auto;
padding: 0 0 80px;
color: var(--hh-text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
line-height: 1.55;
}
.bdn-hh__preview {
margin: 16px 20px 0;
background: rgba(251, 191, 36, 0.10);
border: 1px solid rgba(251, 191, 36, 0.35);
color: #fde68a;
border-radius: 6px;
padding: 10px 14px;
font-size: 13px;
}
.bdn-hh__preview strong { color: #fbbf24; }
.bdn-hh__preview em { color: #fff; font-style: normal; font-weight: 600; }
.bdn-hh__preview code { background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 3px; }
/* Sticky pulse bar — always-visible case count + refresh control. */
.bdn-hh__pulse {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 20px;
background: rgba(12, 17, 24, 0.92);
backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--hh-border);
margin: 0 -20px 28px;
}
.bdn-hh__pulse-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bdn-hh__pulse-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--hh-accent);
box-shadow: 0 0 0 0 var(--hh-accent);
animation: bdn-hh-pulse 2.4s ease-in-out infinite;
}
@keyframes bdn-hh-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(212, 162, 74, 0.5); }
50% { box-shadow: 0 0 0 8px rgba(212, 162, 74, 0); }
}
.bdn-hh__pulse-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
color: var(--hh-text-dim);
}
.bdn-hh__pulse-count {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 18px;
font-weight: 700;
color: var(--hh-text);
font-variant-numeric: tabular-nums;
transition: color 0.4s ease;
}
.bdn-hh__pulse-count.is-flash { color: var(--hh-accent); }
.bdn-hh__pulse-right { display: flex; align-items: center; gap: 12px; }
.bdn-hh__pulse-updated { font-size: 11px; color: var(--hh-text-faint); letter-spacing: 0.3px; }
.bdn-hh__pulse-refresh {
appearance: none; border: 1px solid var(--hh-border); background: transparent;
color: var(--hh-text-dim); width: 30px; height: 30px; border-radius: 6px;
font-size: 14px; cursor: pointer;
transition: color 0.15s, border-color 0.15s, transform 0.4s ease;
}
.bdn-hh__pulse-refresh:hover { color: var(--hh-accent); border-color: var(--hh-accent); }
.bdn-hh__pulse-refresh.is-spin { transform: rotate(360deg); }
/* Hero. */
.bdn-hh__hero { padding: 4px 20px 22px; }
.bdn-hh__brand {
margin: 0 0 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--hh-accent);
}
.bdn-hh__brand-mark { color: var(--hh-text-faint); }
.bdn-hh__title {
font-family: "Charter", "Georgia", "Times New Roman", serif;
font-size: clamp(30px, 5.4vw, 54px);
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.025em;
color: #fff;
margin: 0 0 8px;
}
.bdn-hh__tagline {
margin: 0 0 22px;
font-size: 15px;
line-height: 1.45;
color: var(--hh-text-dim);
max-width: 560px;
}
.bdn-hh__bignum {
display: grid;
grid-template-columns: auto 1fr;
gap: 18px;
align-items: end;
padding: 18px 0 0;
border-top: 1px solid var(--hh-border);
}
.bdn-hh__bignum-value {
font-family: "Charter", "Georgia", serif;
font-size: clamp(80px, 15vw, 150px);
font-weight: 700;
line-height: 0.85;
color: var(--hh-accent);
letter-spacing: -0.05em;
font-variant-numeric: tabular-nums;
}
.bdn-hh__bignum-side { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; }
.bdn-hh__bignum-cap { font-size: 17px; color: var(--hh-text); font-weight: 500; }
.bdn-hh__bignum-delta {
display: inline-block;
align-self: flex-start;
margin-top: 6px;
padding: 3px 10px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
border-radius: 4px;
}
.bdn-hh__bignum-delta.is-up { background: rgba(212, 162, 74, 0.16); color: var(--hh-accent); }
.bdn-hh__bignum-delta.is-down { background: rgba(110, 200, 130, 0.12); color: #86efac; }
.bdn-hh__bignum-sub { font-size: 13px; color: var(--hh-text-dim); margin-top: 4px; }
.bdn-hh__bignum-sub--context {
margin-top: 10px;
padding-top: 8px;
border-top: 1px dashed var(--hh-border);
font-size: 12px;
color: var(--hh-text-faint);
line-height: 1.4;
}
.bdn-hh__bignum-attr { font-size: 11px; letter-spacing: 1px; color: var(--hh-text-faint); text-transform: uppercase; margin-top: 6px; }
/* Outbreak context — optional 1-sentence explainer below the big
number, for readers who don't recognize the outbreak label (e.g.
"MV Hondius cruise ship cluster" → "Passengers and crew exposed
during an Antarctica expedition…"). Set via WP-Admin → BDN →
Hantavirus Hub → Outbreak context. */
.bdn-hh__bignum-context {
display: block;
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--hh-border);
font-size: 13px;
line-height: 1.5;
color: var(--hh-text-dim);
font-style: italic;
}
/* Section nav (segmented control). Horizontal scroll on narrow viewports. */
.bdn-hh__sectnav {
display: flex;
gap: 6px;
padding: 12px 20px;
margin: 0;
border-top: 1px solid var(--hh-border);
border-bottom: 1px solid var(--hh-border);
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.bdn-hh__sectnav::-webkit-scrollbar { display: none; }
.bdn-hh__sectnav-link {
display: inline-block;
padding: 7px 14px;
font-size: 13px;
font-weight: 500;
color: var(--hh-text-dim);
text-decoration: none;
border-radius: 999px;
background: var(--hh-surface);
border: 1px solid var(--hh-border);
transition: color 0.15s, background 0.15s, border-color 0.15s;
white-space: nowrap;
}
.bdn-hh__sectnav-link:hover { color: var(--hh-accent); border-color: var(--hh-accent); }
/* Sections. */
.bdn-hh__sect { padding: 24px 20px 0; }
.bdn-hh__h {
font-family: "Charter", "Georgia", serif;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
color: #fff;
margin: 0 0 10px;
position: relative;
padding-left: 12px;
}
.bdn-hh__h::before {
content: '';
position: absolute;
left: 0; top: 6px; bottom: 6px;
width: 3px;
background: var(--hh-accent);
border-radius: 2px;
}
.bdn-hh__sect-lede { margin: 0 0 14px; font-size: 14px; color: var(--hh-text-dim); }
.bdn-hh__empty { color: var(--hh-text-faint); font-style: italic; font-size: 14px; }
.bdn-hh__empty code { font-style: normal; background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 3px; color: var(--hh-text); }
/* Right now feed. */
.bdn-hh__feed { list-style: none; margin: 0; padding: 0; }
.bdn-hh__feed-item {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid var(--hh-border);
}
.bdn-hh__feed-item:last-child { border-bottom: 0; }
.bdn-hh__chip {
font-size: 10px; font-weight: 700; letter-spacing: 1px;
padding: 3px 9px; border-radius: 3px;
background: rgba(255,255,255,0.06);
color: var(--hh-text-dim);
white-space: nowrap;
}
.bdn-hh__chip--bdn { background: rgba(212, 162, 74, 0.18); color: var(--hh-accent); }
.bdn-hh__chip--cdc { background: rgba(160, 130, 220, 0.16); color: #c4b1f0; }
.bdn-hh__chip--who { background: rgba(110, 180, 220, 0.16); color: #93c5fd; }
.bdn-hh__feed-title {
color: var(--hh-text); text-decoration: none; font-size: 15px; line-height: 1.4; font-weight: 500;
min-width: 0;
}
.bdn-hh__feed-title:hover { color: var(--hh-accent); }
.bdn-hh__feed-date { font-size: 12px; color: var(--hh-text-faint); white-space: nowrap; }
/* US state tile cartogram. Approximate geographic layout (not a real map),
reads as data viz. Cells are amber-tinted by case count via per-bucket
intensity (data-bucket="1..4"). */
.bdn-hh__map {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(8, auto);
gap: 4px;
max-width: 580px;
margin: 0 0 14px;
position: relative; /* tooltip anchor */
}
.bdn-hh__map-cell {
appearance: none;
cursor: pointer;
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2px;
border: 1px solid var(--hh-border);
background: rgba(255,255,255,0.025);
border-radius: 4px;
color: var(--hh-text-faint);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
transition: transform 0.12s ease, background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
min-height: 34px;
line-height: 1;
}
.bdn-hh__map-cell:hover { border-color: var(--hh-accent); color: var(--hh-accent); transform: translateY(-1px); z-index: 2; }
/* Choropleth: 4 amber intensities by quartile. Bucket 0 = no cases (above
default), 1 = lowest non-zero, 4 = highest. */
.bdn-hh__map-cell[data-bucket="1"] { background: rgba(212, 162, 74, 0.16); color: var(--hh-accent); border-color: rgba(212, 162, 74, 0.35); }
.bdn-hh__map-cell[data-bucket="2"] { background: rgba(212, 162, 74, 0.32); color: #f0d9a6; border-color: rgba(212, 162, 74, 0.55); }
.bdn-hh__map-cell[data-bucket="3"] { background: rgba(212, 162, 74, 0.58); color: #1a1410; border-color: rgba(212, 162, 74, 0.85); }
.bdn-hh__map-cell[data-bucket="4"] { background: var(--hh-accent); color: #1a1410; border-color: var(--hh-accent); }
.bdn-hh__map-cell.has-cases:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.bdn-hh__map-cell.is-selected {
outline: 2px solid var(--hh-accent);
outline-offset: 2px;
z-index: 2;
}
.bdn-hh__map-abbr { font-size: 11px; letter-spacing: 0.3px; line-height: 1; }
.bdn-hh__map-cell[data-bucket="3"] .bdn-hh__map-abbr,
.bdn-hh__map-cell[data-bucket="4"] .bdn-hh__map-abbr { font-weight: 700; }
.bdn-hh__map-count {
margin-top: 2px;
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* Choropleth legend — colored swatches with min/max labels. */
.bdn-hh__map-legend {
display: flex;
align-items: center;
gap: 8px;
margin: 6px 0 18px;
font-size: 11px;
color: var(--hh-text-faint);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
letter-spacing: 0.5px;
}
.bdn-hh__map-legend-label { text-transform: uppercase; font-weight: 600; }
.bdn-hh__map-legend-bar { display: flex; gap: 0; }
.bdn-hh__map-legend-swatch {
display: inline-block;
width: 28px;
height: 12px;
border: 1px solid var(--hh-border);
border-right-width: 0;
}
.bdn-hh__map-legend-swatch:last-child { border-right-width: 1px; }
.bdn-hh__map-legend-swatch[data-bucket="1"] { background: rgba(212, 162, 74, 0.16); border-color: rgba(212, 162, 74, 0.35); }
.bdn-hh__map-legend-swatch[data-bucket="2"] { background: rgba(212, 162, 74, 0.32); border-color: rgba(212, 162, 74, 0.55); }
.bdn-hh__map-legend-swatch[data-bucket="3"] { background: rgba(212, 162, 74, 0.58); border-color: rgba(212, 162, 74, 0.85); }
.bdn-hh__map-legend-swatch[data-bucket="4"] { background: var(--hh-accent); border-color: var(--hh-accent); }
.bdn-hh__map-legend-min,
.bdn-hh__map-legend-max { color: var(--hh-text-dim); font-variant-numeric: tabular-nums; }
/* ===== Task 2: world tile cartogram ============================= */
/* Region-grouped country tiles. Same quartile palette as the US-state
cartogram for visual consistency. Mobile-first: 3-col at narrow
viewports, 6-col on desktop. Tiles wrap inside their region group. */
.bdn-hh__world {
display: flex;
flex-direction: column;
gap: 16px;
margin: 0 0 14px;
}
.bdn-hh__world-region-h {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--hh-text-faint);
margin: 0 0 6px;
}
.bdn-hh__world-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
@media (min-width: 600px) {
.bdn-hh__world-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
.bdn-hh__world-grid { grid-template-columns: repeat(6, 1fr); }
}
.bdn-hh__world-cell {
appearance: none;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
padding: 8px 10px;
border: 1px solid var(--hh-border);
background: rgba(255,255,255,0.025);
border-radius: 6px;
color: var(--hh-text-faint);
font-family: var(--wp--preset--font-family--body);
font-size: 12px;
text-align: left;
min-height: 64px;
gap: 4px;
transition: transform 0.12s ease, background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.bdn-hh__world-cell:hover {
border-color: var(--hh-accent);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.bdn-hh__world-cell:focus-visible {
outline: 2px solid var(--hh-accent);
outline-offset: 2px;
}
.bdn-hh__world-cell[data-bucket="1"] { background: rgba(212, 162, 74, 0.16); color: var(--hh-accent); border-color: rgba(212, 162, 74, 0.35); }
.bdn-hh__world-cell[data-bucket="2"] { background: rgba(212, 162, 74, 0.32); color: #f0d9a6; border-color: rgba(212, 162, 74, 0.55); }
.bdn-hh__world-cell[data-bucket="3"] { background: rgba(212, 162, 74, 0.58); color: #1a1410; border-color: rgba(212, 162, 74, 0.85); }
.bdn-hh__world-cell[data-bucket="4"] { background: var(--hh-accent); color: #1a1410; border-color: var(--hh-accent); }
.bdn-hh__world-cell.is-selected {
outline: 2px solid var(--hh-accent);
outline-offset: 2px;
}
.bdn-hh__world-flag {
font-size: 20px;
line-height: 1;
}
.bdn-hh__world-name {
font-weight: 600;
font-size: 12px;
line-height: 1.2;
word-break: break-word;
}
.bdn-hh__world-count {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 16px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* World legend — mirrors the US-map legend block, same swatches. */
.bdn-hh__world-legend {
display: flex;
align-items: center;
gap: 8px;
margin: 6px 0 24px;
font-size: 11px;
color: var(--hh-text-faint);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
letter-spacing: 0.5px;
}
.bdn-hh__world-legend-label { text-transform: uppercase; font-weight: 600; }
.bdn-hh__world-legend-bar { display: flex; gap: 0; }
.bdn-hh__world-legend-swatch {
display: inline-block;
width: 28px;
height: 12px;
border: 1px solid var(--hh-border);
border-right-width: 0;
}
.bdn-hh__world-legend-swatch:last-child { border-right-width: 1px; }
.bdn-hh__world-legend-swatch[data-bucket="1"] { background: rgba(212, 162, 74, 0.16); border-color: rgba(212, 162, 74, 0.35); }
.bdn-hh__world-legend-swatch[data-bucket="2"] { background: rgba(212, 162, 74, 0.32); border-color: rgba(212, 162, 74, 0.55); }
.bdn-hh__world-legend-swatch[data-bucket="3"] { background: rgba(212, 162, 74, 0.58); border-color: rgba(212, 162, 74, 0.85); }
.bdn-hh__world-legend-swatch[data-bucket="4"] { background: var(--hh-accent); border-color: var(--hh-accent); }
.bdn-hh__world-legend-min,
.bdn-hh__world-legend-max { color: var(--hh-text-dim); font-variant-numeric: tabular-nums; }
/* Floating tooltip — positioned by JS on hover/focus. */
.bdn-hh__map-tooltip {
position: absolute;
pointer-events: none;
z-index: 30;
background: #1a232e;
color: var(--hh-text);
border: 1px solid var(--hh-accent);
border-radius: 4px;
padding: 6px 10px;
font-size: 12px;
line-height: 1.3;
box-shadow: 0 6px 18px rgba(0,0,0,0.5);
white-space: nowrap;
font-family: -apple-system, system-ui, sans-serif;
}
.bdn-hh__map-tooltip::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 8px;
height: 8px;
background: #1a232e;
border-right: 1px solid var(--hh-accent);
border-bottom: 1px solid var(--hh-accent);
}
.bdn-hh__map-tooltip-name {
display: block;
color: #fff;
font-weight: 600;
font-size: 13px;
}
.bdn-hh__map-tooltip-count {
display: block;
color: var(--hh-accent);
font-variant-numeric: tabular-nums;
margin-top: 1px;
font-size: 11px;
letter-spacing: 0.3px;
}
.bdn-hh__map-info {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 2px 0 0;
padding: 6px 12px;
background: var(--hh-surface);
border: 1px solid var(--hh-accent);
border-radius: 999px;
font-size: 12px;
color: var(--hh-text);
}
.bdn-hh__map-clear {
appearance: none; cursor: pointer;
background: none; border: 0;
color: var(--hh-accent);
font-size: 12px;
font-weight: 600;
padding: 0;
}
.bdn-hh__map-clear:hover { color: #fff; }
@media (max-width: 600px) {
.bdn-hh__map { gap: 3px; }
.bdn-hh__map-cell { font-size: 10px; min-height: 28px; padding: 1px; border-radius: 3px; }
.bdn-hh__map-count { font-size: 11px; }
.bdn-hh__map-legend { font-size: 10px; gap: 6px; }
.bdn-hh__map-legend-swatch { width: 22px; height: 10px; }
}
/* Story so far — running timeline. */
.bdn-hh__story { list-style: none; margin: 0; padding: 0; }
.bdn-hh__story-item {
display: grid;
grid-template-columns: 56px 1fr;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--hh-border);
}
.bdn-hh__story-item:last-child { border-bottom: 0; }
.bdn-hh__story-date {
font-family: ui-monospace, "SF Mono", monospace;
font-size: 12px;
letter-spacing: 0.5px;
color: var(--hh-accent);
text-transform: uppercase;
font-weight: 600;
padding-top: 4px;
}
.bdn-hh__story-body {
font-family: "Charter", "Georgia", serif;
font-size: 17px;
line-height: 1.55;
color: var(--hh-text);
}
.bdn-hh__story-body p { margin: 0 0 8px; }
.bdn-hh__story-body p:last-child { margin-bottom: 0; }
/* Donate interrupt — visually loud, deliberately positioned mid-hub. */
.bdn-hh__donate {
position: relative;
margin: 28px 20px 8px;
padding: 22px 22px 20px;
background: linear-gradient(135deg, #1e2a1c 0%, #2a3a26 100%);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.bdn-hh__donate-stripe {
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--hh-accent) 0%, #f4cd6f 100%);
}
.bdn-hh__donate-eyebrow {
margin: 0 0 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--hh-accent);
}
.bdn-hh__donate-headline {
font-family: "Charter", "Georgia", serif;
font-size: clamp(22px, 3.6vw, 28px);
font-weight: 700;
line-height: 1.1;
color: #fff;
margin: 0 0 8px;
letter-spacing: -0.015em;
}
.bdn-hh__donate-copy { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: #d9e0d3; max-width: 540px; }
.bdn-hh__donate .bdn-tip-jar--compact {
background: var(--hh-accent);
color: #1a1410;
border-radius: 999px;
padding: 12px 22px;
font-weight: 700;
font-size: 15px;
text-decoration: none;
transition: filter 0.15s, transform 0.1s;
}
.bdn-hh__donate .bdn-tip-jar--compact:hover { filter: brightness(1.08); color: #1a1410; }
.bdn-hh__donate .bdn-tip-jar--compact:active { transform: scale(0.98); }
/* FAQ. */
.bdn-hh__faq { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--hh-border); }
.bdn-hh__qa { border-bottom: 1px solid var(--hh-border); }
.bdn-hh__qa-q {
cursor: pointer;
list-style: none;
padding: 16px 0 16px 28px;
font-family: "Charter", "Georgia", serif;
font-size: 17px;
font-weight: 700;
color: var(--hh-text);
position: relative;
transition: color 0.15s;
}
.bdn-hh__qa-q::-webkit-details-marker { display: none; }
.bdn-hh__qa-q::before {
content: '+';
position: absolute;
left: 0; top: 14px;
width: 18px; height: 18px;
font-size: 18px; line-height: 18px;
font-weight: 400;
color: var(--hh-accent);
text-align: center;
transition: transform 0.2s;
}
.bdn-hh__qa[open] .bdn-hh__qa-q::before { content: '–'; }
.bdn-hh__qa-q:hover { color: var(--hh-accent); }
.bdn-hh__qa-a { padding: 0 0 18px 28px; font-size: 15px; line-height: 1.6; color: var(--hh-text-dim); }
.bdn-hh__qa-a p { margin: 0 0 10px; }
.bdn-hh__qa-a p:last-child { margin-bottom: 0; }
/* Symptoms + ER line. */
.bdn-hh__sym {
list-style: none;
margin: 0 0 18px;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--hh-border);
border-radius: 8px;
overflow: hidden;
}
.bdn-hh__sym li {
background: var(--hh-surface);
padding: 12px 16px;
font-size: 15px;
color: var(--hh-text);
position: relative;
padding-left: 36px;
}
.bdn-hh__sym li::before {
content: '';
position: absolute;
left: 16px; top: 50%;
width: 6px; height: 6px;
margin-top: -3px;
border-radius: 50%;
background: var(--hh-accent);
}
.bdn-hh__er {
margin: 0;
padding: 16px 18px;
font-size: 15px;
line-height: 1.5;
background: rgba(220, 38, 38, 0.12);
border-left: 3px solid #ef4444;
border-radius: 0 8px 8px 0;
color: #fee2e2;
font-weight: 500;
}
/* Coverage feed. */
.bdn-hh__cov { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hh-border); }
.bdn-hh__cov-item { border-bottom: 1px solid var(--hh-border); }
.bdn-hh__cov-link {
display: grid;
grid-template-columns: 70px 1fr;
gap: 16px;
align-items: baseline;
padding: 14px 4px;
color: var(--hh-text);
text-decoration: none;
}
.bdn-hh__cov-link:hover { color: var(--hh-accent); }
.bdn-hh__cov-date {
font-family: ui-monospace, "SF Mono", monospace;
font-size: 11px; letter-spacing: 0.5px;
color: var(--hh-text-faint);
text-transform: uppercase;
font-weight: 600;
}
.bdn-hh__cov-title { font-size: 15px; line-height: 1.4; font-weight: 500; }
.bdn-hh__cov-empty { color: var(--hh-text-faint); font-style: italic; padding: 16px 0; }
/* Ask section. */
.bdn-hh__sect--ask { padding-top: 36px; }
.bdn-hh__ask-line { font-size: 15px; line-height: 1.55; color: var(--hh-text); }
.bdn-hh__ask-line a { color: var(--hh-accent); }
/* Sources footer. */
.bdn-hh__sources {
margin: 32px 20px 0;
padding-top: 16px;
border-top: 1px solid var(--hh-border);
}
.bdn-hh__sources p {
margin: 0;
font-size: 12px;
line-height: 1.7;
color: var(--hh-text-faint);
}
.bdn-hh__sources a { color: var(--hh-accent); text-decoration: none; }
.bdn-hh__sources a:hover { color: #fff; }
/* Mobile-first tweaks — viewers expected to be primarily on phones. */
@media (max-width: 600px) {
.bdn-hh { font-size: 15px; padding-bottom: 56px; }
.bdn-hh__hero { padding: 4px 16px 18px; }
.bdn-hh__sect { padding: 22px 16px 0; }
.bdn-hh__pulse { padding: 8px 16px; margin: 0 -16px 18px; gap: 10px; }
.bdn-hh__pulse-label { display: none; } /* save space; the dot + number is enough */
.bdn-hh__pulse-updated { font-size: 10px; }
.bdn-hh__sectnav { padding: 10px 16px; gap: 5px; }
.bdn-hh__sectnav-link { padding: 6px 12px; font-size: 12px; }
.bdn-hh__title { font-size: 32px; }
.bdn-hh__bignum { grid-template-columns: 1fr; gap: 6px; padding-top: 14px; }
.bdn-hh__bignum-value { font-size: 84px; }
.bdn-hh__bignum-side { padding-bottom: 0; }
.bdn-hh__story-item { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
.bdn-hh__story-date { padding-top: 0; }
.bdn-hh__story-body { font-size: 16px; }
.bdn-hh__feed-item { grid-template-columns: auto 1fr; gap: 10px; padding: 10px 0; }
.bdn-hh__feed-date { grid-column: 1 / -1; padding-left: 0; font-size: 11px; }
.bdn-hh__donate { margin-left: 16px; margin-right: 16px; padding: 18px 18px 16px; }
.bdn-hh__qa-q { font-size: 16px; padding: 14px 0 14px 26px; }
.bdn-hh__qa-a { padding: 0 0 14px 26px; font-size: 14px; }
.bdn-hh__cov-link { grid-template-columns: 56px 1fr; gap: 12px; padding: 12px 4px; }
.bdn-hh__sym li { padding: 10px 14px 10px 32px; font-size: 14px; }
.bdn-hh__sym li::before { left: 14px; }
.bdn-hh__er { padding: 12px 14px; font-size: 14px; }
.bdn-hh__sources { margin: 24px 16px 0; }
.bdn-hh__sources p { font-size: 11px; }
}
/* Tap-target minimum — important for iOS app webviews + mobile Safari. */
@media (max-width: 900px) {
.bdn-hh__sectnav-link,
.bdn-hh__qa-q,
.bdn-hh__feed-title,
.bdn-hh__cov-link,
.bdn-hh__map-cell { min-height: 36px; }
}
.bdn-hanta {
max-width: 720px;
margin: 0 auto;
padding: 40px 22px 72px;
color: var(--wp--preset--color--text-secondary);
font-size: 17px;
line-height: 1.62;
}
.bdn-hanta__preview {
background: rgba(251, 191, 36, 0.10);
border: 1px solid rgba(251, 191, 36, 0.35);
color: #fde68a;
border-radius: 6px;
padding: 10px 14px;
margin-bottom: 28px;
font-size: 13px;
line-height: 1.5;
}
.bdn-hanta__preview strong { color: #fbbf24; }
.bdn-hanta__preview em { color: #fff; font-style: normal; font-weight: 600; }
.bdn-hanta__preview code { background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 3px; }
.bdn-hanta__lede { margin-bottom: 28px; }
.bdn-hanta__kicker {
margin: 0 0 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--wp--preset--color--text-muted);
}
.bdn-hanta__headline {
font-family: var(--wp--preset--font-family--headline);
font-size: clamp(30px, 5vw, 52px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--wp--preset--color--white);
margin: 0;
}
/* The big number — the single dominant element on the page. */
.bdn-hanta__count {
margin: 36px 0 32px;
padding: 28px 0 24px;
border-top: 1px solid var(--wp--preset--color--border);
border-bottom: 1px solid var(--wp--preset--color--border);
display: grid;
grid-template-columns: auto 1fr;
column-gap: 26px;
row-gap: 6px;
align-items: baseline;
}
.bdn-hanta__count-number {
font-family: var(--wp--preset--font-family--headline);
font-size: clamp(72px, 13vw, 132px);
font-weight: 700;
line-height: 0.9;
color: var(--wp--preset--color--white);
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
grid-row: 1 / span 2;
}
.bdn-hanta__count-number--pending { color: var(--wp--preset--color--text-muted); }
.bdn-hanta__count-caption {
font-size: 17px;
line-height: 1.4;
color: var(--wp--preset--color--white);
font-weight: 400;
align-self: end;
}
.bdn-hanta__count-sub {
font-size: 14px;
color: var(--wp--preset--color--text-secondary);
grid-column: 2;
}
.bdn-hanta__count-attribution {
font-size: 12px;
letter-spacing: 0.4px;
color: var(--wp--preset--color--text-muted);
grid-column: 2;
margin-top: 4px;
}
/* Brandon's note — looks like a journal entry, not a press release. */
.bdn-hanta__note {
margin: 0 0 40px;
padding: 0 0 0 18px;
border-left: 2px solid var(--wp--preset--color--accent-blue);
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
line-height: 1.65;
color: var(--wp--preset--color--white);
}
.bdn-hanta__note p { margin: 0 0 14px; }
.bdn-hanta__note p:last-child { margin-bottom: 0; color: var(--wp--preset--color--text-secondary); font-size: 15px; font-style: italic; }
.bdn-hanta__h2 {
font-family: var(--wp--preset--font-family--headline);
font-size: 22px;
font-weight: 700;
color: var(--wp--preset--color--white);
margin: 0 0 14px;
letter-spacing: -0.005em;
}
.bdn-hanta__feed,
.bdn-hanta__explain,
.bdn-hanta__symptoms,
.bdn-hanta__advisories { margin-bottom: 40px; }
/* Coverage feed — clean list, dates on the left, no thumbnail clutter. */
.bdn-hanta__feed-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--wp--preset--color--border);
}
.bdn-hanta__feed-list li { border-bottom: 1px solid var(--wp--preset--color--border); }
.bdn-hanta__feed-link {
display: grid;
grid-template-columns: 60px 1fr;
align-items: baseline;
gap: 16px;
padding: 14px 4px;
color: var(--wp--preset--color--white);
text-decoration: none;
}
.bdn-hanta__feed-link:hover { color: var(--wp--preset--color--accent-blue); }
.bdn-hanta__feed-date {
font-size: 12px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--wp--preset--color--text-muted);
font-weight: 600;
}
.bdn-hanta__feed-title {
font-size: 16px;
line-height: 1.35;
font-weight: 600;
}
.bdn-hanta__feed-all {
display: inline-block;
margin-top: 14px;
font-size: 13px;
color: var(--wp--preset--color--accent-blue);
text-decoration: none;
}
.bdn-hanta__feed-all:hover { color: var(--wp--preset--color--white); }
.bdn-hanta__feed--empty p { color: var(--wp--preset--color--text-muted); font-style: italic; }
.bdn-hanta__feed--empty code { background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 4px; font-style: normal; color: var(--wp--preset--color--white); }
/* Plain explainer prose. */
.bdn-hanta__prose p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; }
.bdn-hanta__prose p:last-child { margin-bottom: 0; }
/* Symptoms — readable bulleted list, no checkboxes / no severity colors. */
.bdn-hanta__symptom-list {
list-style: disc;
margin: 0;
padding: 0 0 0 22px;
}
.bdn-hanta__symptom-list li {
font-size: 17px;
line-height: 1.55;
margin-bottom: 6px;
color: var(--wp--preset--color--text-secondary);
}
/* Guidance — quiet pull-quote, not an alarm box. */
.bdn-hanta__guidance {
margin: 0 0 40px;
padding: 18px 22px;
background: rgba(255, 255, 255, 0.03);
border-left: 3px solid var(--wp--preset--color--white);
border-radius: 0 8px 8px 0;
font-size: 17px;
line-height: 1.6;
color: var(--wp--preset--color--white);
}
.bdn-hanta__guidance p { margin: 0 0 10px; }
.bdn-hanta__guidance p:last-child { margin-bottom: 0; }
/* Advisories list (CDC HAN + WHO DON RSS hits). */
.bdn-hanta__adv-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--wp--preset--color--border);
}
.bdn-hanta__adv-list li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px;
padding: 12px 4px;
border-bottom: 1px solid var(--wp--preset--color--border);
}
.bdn-hanta__adv-source {
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
color: var(--wp--preset--color--text-muted);
background: rgba(255,255,255,0.05);
padding: 2px 8px;
border-radius: 3px;
}
.bdn-hanta__adv-link {
color: var(--wp--preset--color--white);
text-decoration: none;
font-size: 15px;
font-weight: 500;
flex: 1;
min-width: 0;
}
.bdn-hanta__adv-link:hover { color: var(--wp--preset--color--accent-blue); }
.bdn-hanta__adv-date { font-size: 12px; color: var(--wp--preset--color--text-muted); }
.bdn-hanta__states-line {
margin: 0 0 32px;
font-size: 15px;
color: var(--wp--preset--color--text-secondary);
}
.bdn-hanta__states-line strong { color: var(--wp--preset--color--white); font-weight: 600; }
.bdn-hanta__sources {
margin: 48px 0 0;
padding: 20px 0 0;
border-top: 1px solid var(--wp--preset--color--border);
}
.bdn-hanta__sources p {
margin: 0;
font-size: 13px;
line-height: 1.65;
color: var(--wp--preset--color--text-muted);
}
.bdn-hanta__sources a { color: var(--wp--preset--color--accent-blue); text-decoration: none; }
.bdn-hanta__sources a:hover { color: var(--wp--preset--color--white); }
.bdn-hanta__sources strong { color: var(--wp--preset--color--white); }
@media (max-width: 600px) {
.bdn-hanta { padding: 28px 16px 56px; }
.bdn-hanta__count {
grid-template-columns: 1fr;
row-gap: 4px;
}
.bdn-hanta__count-number { grid-row: auto; grid-column: 1; }
.bdn-hanta__count-caption,
.bdn-hanta__count-sub,
.bdn-hanta__count-attribution { grid-column: 1; }
}
} /* end @layer bdn-legacy */
/* Compact card — headline + meta only, no image (category headline lists) */
.bdn-card--compact { position: relative; padding: 11px 0; border-bottom: 1px solid var(--bdn-border); }
.bdn-card--compact .bdn-card__title { font-family: var(--bdn-font-headline); font-size: var(--bdn-fs-card); line-height: var(--bdn-lh-snug); margin: 0 0 4px; }
.bdn-card--compact .bdn-card__title a { color: var(--bdn-text); text-decoration: none; }
.bdn-card--compact .bdn-card__title a::after { content: ""; position: absolute; inset: 0; }
.bdn-card--compact .bdn-meta { font-size: var(--bdn-fs-meta); }
/* Headlines never render as link-blue — they inherit the card's text color */
.bdn-card__title a, .bdn-card--hero .bdn-card__title a { color: inherit; text-decoration: none; }
.bdn-card--hero .bdn-card__title a { color: var(--bdn-text); }
/* CTA / utility links set their label color inside @layer bdn-legacy, but they are
elements — WordPress's UNLAYERED global link color (accent-blue) outranks any
layered `color` regardless of specificity. That made the tip-jar card button render
blue-on-blue (label invisible), and would do the same to the skip link on focus.
Restate the colors unlayered so the labels stay legible. Same fix as the headline
links above. */
.bdn-tip-jar--card .bdn-tip-jar__btn,
.bdn-tip-jar--card .bdn-tip-jar__btn:hover { color: #04263d; } /* dark ink on the bright pill — matches .bdn-btn--listen, ~6:1 contrast */
.bdn-tip-jar--compact,
.bdn-tip-jar--compact:hover { color: var(--wp--preset--color--white); } /* white label on the faint dark pill */
.bdn-skip-link,
.bdn-skip-link:focus { color: var(--wp--preset--color--white); } /* keyboard skip link: white on the accent-blue bar */
/* Hero dominance: bigger headline + taller image than anything below */
.bdn-card--hero .bdn-card__title { font-size: clamp(26px, 7vw, 34px); line-height: var(--bdn-lh-tight); }
.bdn-card--hero .bdn-img { aspect-ratio: 16 / 9; }
/* Top Stories lead image is shorter than the hero so the hero stays dominant */
.bdn-section--top .bdn-card--lead .bdn-img { aspect-ratio: 21 / 9; }
/* Logo sizing must beat WordPress core's UNLAYERED .wp-block-site-logo img
rules, which outrank our @layer chrome. Unlayered + higher specificity. */
.bdn-site-header__inner .bdn-site-header__brand img,
.bdn-site-header__inner .bdn-site-header__brand .custom-logo {
height: 34px; width: auto; max-width: 150px; object-fit: contain;
}
@media (min-width: 901px) {
.bdn-site-header__inner .bdn-site-header__brand img,
.bdn-site-header__inner .bdn-site-header__brand .custom-logo { height: 40px; max-width: 180px; }
}