/* Theme Name: Smashology (WP Bootstrap 4 Pro Child) Theme URI: https://smashologymedia.com/ Description: Child theme for Smashology Media. News-density layout, Smashology token system, and the sourcing/verification UI layer. Author: Smashology Media Template: wp-bootstrap-4-pro Version: 1.13.0 Text Domain: smashology */ /* ========================================================================== VERIFICATION PASS — session 1, 06 Sep 2026 Every [VERIFY] marker from v1.0.0 has been checked against the live DOM and the parent theme source. Markers are now one of: [CONFIRMED] checked against the real markup, selector is correct [CORRECTED] the guess was wrong; what it actually is, is noted inline [OPEN] still unverifiable until the new templates exist Template: wp-bootstrap-4-pro is CONFIRMED correct — assets serve from /wp-content/themes/wp-bootstrap-4-pro/. The single most important finding is not in this file but in functions.php: the parent style handle guessed in v1.0.0 does not exist, and a dependency on a non-existent handle makes WordPress silently drop this stylesheet entirely. Fixed there. ========================================================================== */ /* ========================================================================== 1. TOKENS ========================================================================== */ :root { /* Colour */ --sm-ink: #14161A; --sm-paper: #FFFFFF; --sm-newsprint: #F2F3F5; /* * [DECIDED] Signal red is #E7000B — the theme's existing --primary/--accent. * * The spec's instruction was to pull the primary out of smashology-logo.png. * The logo owns no colour: sampled at full resolution (543x133, 72,219 * opaque pixels), maximum chroma is 8/255 and not one pixel exceeds 15. It * is pure greyscale. * * The theme's red is already on every link and button on the site, so this * is now the single red in the system. There is deliberately no second red * defined anywhere in this file. */ --sm-signal: #E7000B; /* urgency only */ --sm-signal-dark:#C10007; /* hover states — theme's --accent-hover */ /* * Sourcing green. Was #0F8A6A, which measured 4.32:1 on white — under AA's * 4.5:1, and the source chip is 12px text. #0C7659 measures 5.60:1 on white * and 5.04:1 on the newsprint sidebar well, so it passes on both surfaces * the chip actually appears on. */ --sm-verified: #0C7659; /* sourcing only */ --sm-mute: #6A7078; --sm-rule: #DFE2E6; /* Category chips */ --sm-cat-viral: #7C3AED; --sm-cat-news: #14161A; --sm-cat-tech: #0B63CE; --sm-cat-crime: #A31621; --sm-cat-sports: #9E5108; /* see §25 — was #C2620A, failed AA */ /* Type */ --sm-display: "Roboto Condensed", "Arial Narrow", Arial, sans-serif; --sm-slab: "Roboto Condensed", "Arial Narrow", Arial, sans-serif; --sm-ui: "Roboto Condensed", "Arial Narrow", Arial, sans-serif; --sm-body: "Source Serif 4", Georgia, "Times New Roman", serif; --sm-size-lead: 2.75rem; /* 44px */ --sm-size-secondary: 1.625rem; /* 26px */ --sm-size-river: 1.1875rem; /* 19px */ --sm-size-side: 1rem; /* 16px */ --sm-size-body: 1.125rem; /* 18px */ --sm-size-meta: 0.75rem; /* 12px */ /* Layout */ --sm-max: 1240px; --sm-gutter: 24px; --sm-band: 40px; } @media (max-width: 767.98px) { :root { --sm-size-lead: 1.875rem; /* 30px */ --sm-size-secondary: 1.3125rem; /* 21px */ --sm-size-river: 1.0625rem; /* 17px */ --sm-size-body: 1.0625rem; --sm-gutter: 16px; --sm-band: 28px; } } /* ========================================================================== 1b. PARENT THEME VARIABLE OVERRIDES [NEW — CONFIRMED] Not in the original draft, and it turns out to be the cheapest win in the whole file. WP Bootstrap 4 Pro already exposes its own design tokens as CSS custom properties on :root (verified live). Overriding those propagates through every existing theme component at once — cards, buttons, headings, the footer — instead of us writing a defensive selector for each one and losing specificity fights with theme-bundle.min.css. In particular the spec's "zero border-radius on cards — news, not SaaS" is unreachable by the .sm- classes alone, because the roundness comes from --card-border-radius: 0.5rem on the theme's own cards. One line fixes it everywhere. Verified current parent values are noted so the diff is legible. ========================================================================== */ :root { --primary: #E7000B; /* was #E7000B — unchanged, documented */ --primary-hover: #C10007; /* was #C10007 */ --accent: var(--sm-signal); --accent-hover: var(--sm-signal-dark); /* --secondary / --secondary-hover intentionally not overridden — see below */ --dark: var(--sm-ink); /* was #0A0A0A */ --body-color: var(--sm-ink); /* was #4A5565 — too light for news body copy */ --heading-color: var(--sm-ink); /* was #0A0A0A */ --blog-entry-tilte: var(--sm-ink); /* [sic] theme's own spelling */ --heading-font-family: var(--sm-display); /* was `inherit` */ --heading-font-weight: 700; /* was 700 */ --heading-line-height: 1.15; /* was 1.2 */ --card-border-radius: 0; /* was 0.5rem — the SaaS tell */ --card-border-width: 0; /* was 1px */ --card-box-shadow: none; /* was 0 .5rem 1rem rgba(0,0,0,.1) */ --card-background-color: var(--sm-paper); --card-border-color: var(--sm-rule); --button-border-radius: 0; /* was 100px — pill buttons */ --button-font-family: var(--sm-display); --button-text-transform: uppercase; --footer-bg-color: var(--sm-ink); /* was #101828 */ } /* * Belt and braces for the two that matter most. * * The overrides above only take effect where the PARENT's stylesheet actually * writes var(--card-border-radius) etc. Bootstrap 4 itself is Sass-compiled * and ships literals — `.card { border-radius: .25rem }` — so redefining a * custom property does nothing to bootstrap.min.css. Since "zero radius — * news, not SaaS" is a stated requirement rather than a nice-to-have, it is * asserted directly here too. Harmless if the variables were already doing * the job; the difference is visible on staging in one glance. */ .card, .btn, .sm-hero img, .sm-river__item img, .sm-catblock img { border-radius: 0; } /* * NOTE: --secondary is deliberately left at the parent's own value rather * than aliased to the signal red. Pointing it at the same red would make * every secondary button identical to a primary one and flatten the button * hierarchy across the whole site. */ /* ========================================================================== 2. TYPOGRAPHY Fonts are enqueued in functions.php. Do not @import here — it blocks render. PERFORMANCE NOTE: the site currently loads a THIRD font family that is neither of ours and not the theme's — Google Sans Text + Google Sans Display, pulled in by the Google Site Kit plugin under the handle `googlesitekit-fonts`. Spec section 6 budgets two families. Site Kit's fonts are only needed for its admin bar widget, so they can be dequeued on the front end. Left out of this file deliberately: it is a plugin change, not a theme one, and belongs in the Phase 1 discussion. ========================================================================== */ body { font-family: var(--sm-body); font-size: var(--sm-size-body); line-height: 1.65; color: var(--sm-ink); background: var(--sm-paper); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .sm-headline { font-family: var(--sm-display); font-weight: 700; letter-spacing: -0.005em; color: var(--sm-ink); } /* * margin-top: 0 belongs on cards, not on every heading everywhere. * * Applied globally it removes the space above every

in an article body, * including the "Sources" heading, leaving only the previous paragraph's * bottom margin to separate a new section. Article headings need the space; * card headings, which sit directly under an image, do not. */ .sm-hero h2, .sm-hero h3, .sm-river__item h2, .sm-river__item h3, .sm-catblock h2, .sm-catblock h3, .sm-mostread h2, .sm-newsletter h2, .sm-section-head { margin-top: 0; } .entry-content h2, .sm-article-body h2 { margin-top: 1.6em; } .entry-content h3, .sm-article-body h3 { margin-top: 1.3em; } h1 { font-size: var(--sm-size-lead); line-height: 1.05; } h2 { font-size: var(--sm-size-secondary); line-height: 1.15; } h3 { font-size: var(--sm-size-river); line-height: 1.25; } /* * Article measure. * * Applied to the text children, NOT to .entry-content itself. Capping the * container squeezes everything inside it to ~610px: Bootstrap .row/.col * layouts inside post content, wide and full-width blocks, and — the one that * matters here — the in-article ad slot injected by the content filter, which * has to hold a 728x90. Capping the paragraphs instead gives the same reading * measure without breaking the ad layer this file exists to prepare for. */ .sm-article-body > p, .sm-article-body > ul, .sm-article-body > ol, .sm-article-body > blockquote, .entry-content > p, .entry-content > ul, .entry-content > ol, .entry-content > blockquote, .entry-content > h2, .entry-content > h3 { max-width: 68ch; } .sm-article-body p + p { margin-top: 1.15em; } /* * Link resets are scoped to this theme's own components. * * A bare `a { color: inherit; text-decoration: none }` here would tie * Bootstrap's `a { color: #007bff }` on specificity and win on source order, * because this stylesheet loads after the parent bundle. That strips the * colour and underline from every link on the site the child theme does not * own — nav, footer, widgets, comments, pagination, breadcrumbs — leaving * in-prose links visually identical to body text. That is a WCAG 1.4.1 * failure across templates this theme never touches. */ .sm-hero a, .sm-river a, .sm-catblocks a, .sm-mostread a, .sm-breaking a, .sm-verify a, .sm-chip, .sm-utility a { text-decoration: none; } .sm-article-body a, .entry-content a { color: var(--sm-ink); text-decoration: underline; text-decoration-color: var(--sm-signal); text-underline-offset: 2px; } /* Keyboard focus must stay visible everywhere */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--sm-signal); outline-offset: 2px; } /* ========================================================================== 3. META, CHIPS, VERIFICATION LAYER ========================================================================== */ .sm-meta { font-family: var(--sm-display); font-size: var(--sm-size-meta); font-weight: 600; color: var(--sm-mute); line-height: 1; } /* Category chip. Uppercase is a genuine news convention here, not decoration. */ .sm-chip { display: inline-block; font-family: var(--sm-display); font-size: var(--sm-size-meta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; padding: 5px 7px 4px; color: var(--sm-paper); background: var(--sm-cat-news); margin-bottom: 8px; } .sm-chip--viral { background: var(--sm-cat-viral); } .sm-chip--news { background: var(--sm-cat-news); } .sm-chip--tech { background: var(--sm-cat-tech); } .sm-chip--crime { background: var(--sm-cat-crime); } .sm-chip--sports { background: var(--sm-cat-sports); } /* --- The verification layer. The only green on the page. --- */ .sm-sources { font-family: var(--sm-display); font-size: var(--sm-size-meta); font-weight: 700; color: var(--sm-verified); letter-spacing: 0.02em; } .sm-sources::before { content: ""; display: inline-block; width: 14px; height: 2px; background: var(--sm-verified); vertical-align: middle; margin-right: 6px; } /* Applied by functions.php to cards with 3+ sources */ .sm-card--sourced { border-bottom: 2px solid var(--sm-verified); padding-bottom: 12px; } .sm-updated { font-family: var(--sm-display); font-size: var(--sm-size-meta); font-weight: 700; color: var(--sm-verified); } /* * [CORRECTED] Public view counters. * * v1.0.0 guessed four selectors. Three of them do not exist anywhere in the * theme: .post-views, .entry-views and [class*="view-count"] (note the * singular "view") match nothing. Removed. * * The real markup is emitted by wp_bootstrap_4_post_meta() in * inc/template-tags.php. All three meta skins output the same first class: * * … (line 268) * … (line 307) * … (line 135) * * so `.views-count` alone is correct and complete. * * The spec asked for this to be a theme setting rather than CSS. There is no * such setting. show_views is a hardcoded default of true in the function's * $args (line 23) and no get_theme_mod() feeds it. CSS is not a fallback here, * it is the only non-invasive option — the alternative is redeclaring the * whole 330-line pluggable function in the child. */ .views-count { display: none !important; } /* ========================================================================== 4. AD SLOTS — reserved heights prevent layout shift ========================================================================== */ .sm-ad { display: block; margin: var(--sm-band) auto; text-align: center; background: var(--sm-newsprint); overflow: hidden; } .sm-ad::before { content: "Advertisement"; display: block; font-family: var(--sm-display); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sm-mute); padding: 4px 0; } .sm-ad--a, .sm-ad--e { min-height: 90px; } .sm-ad--b { min-height: 100px; } .sm-ad--c { min-height: 600px; margin-top: 0; } .sm-ad--d { min-height: 280px; } /* Full-width shells keep leaderboards aligned with the editorial grid. */ .sm-ad-band { width: 100%; max-width: var(--sm-max); margin: 0 auto; padding: 0 var(--sm-gutter); } .sm-ad-band .sm-ad { width: 100%; } /* * Placement map for signed-in administrators. These nodes are rendered only * when ?sm_ads_preview=1 is present, so readers never see an empty ad box. */ .sm-ad--preview { display: grid; place-content: center; gap: 5px; border: 1px solid #d6dade; border-radius: 3px; background: linear-gradient(135deg, rgba(20, 22, 26, 0.025) 25%, transparent 25%) 0 0 / 16px 16px, linear-gradient(315deg, rgba(20, 22, 26, 0.025) 25%, transparent 25%) 0 0 / 16px 16px, #f7f8f9; color: var(--sm-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8); } .sm-ad--preview::before { content: "Advertisement placement"; padding: 0; color: var(--sm-mute); } .sm-ad__preview-name, .sm-ad__preview-size { display: block; font-family: var(--sm-display); line-height: 1.25; } .sm-ad__preview-name { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.01em; } .sm-ad__preview-size { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.045em; text-transform: uppercase; color: var(--sm-mute); } /* Useful first-party inventory while network ads are not yet configured. */ .sm-ad--house { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 96px; align-items: center; gap: clamp(12px, 2vw, 26px); padding: 18px clamp(18px, 3vw, 34px); border: 1px solid #292e36; background: radial-gradient(circle at 15% 50%, rgba(24, 169, 116, 0.2), transparent 32%), linear-gradient(120deg, #11141a, #20252d); color: var(--sm-paper); text-align: left; } .sm-ad--house::before { content: none; } .sm-ad__house-label { padding: 5px 7px; border: 1px solid rgba(255,255,255,0.35); border-radius: 2px; font-family: var(--sm-display); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .sm-ad__house-title { font-family: var(--sm-display); font-size: clamp(1rem, 1.7vw, 1.35rem); line-height: 1.1; } .sm-ad__house-link { padding: 10px 13px; border-radius: 3px; background: var(--sm-signal); color: var(--sm-paper) !important; font-family: var(--sm-display); font-size: 0.8125rem; font-weight: 800; text-decoration: none !important; white-space: nowrap; } .sm-ad__house-link:hover { background: var(--sm-signal-dark); } .sm-ad--house.sm-ad--c { grid-template-columns: 1fr; min-height: 320px; align-content: center; justify-items: start; text-align: left; } .sm-ad--house.sm-ad--c .sm-ad__house-title { font-size: clamp(1.5rem, 2.5vw, 2.15rem); } .sm-river > .sm-ad { width: 100%; margin: 24px 0; } .sm-sidebar .sm-ad--c { width: min(100%, 300px); margin-right: auto; margin-left: auto; } .sm-sidebar .sm-ad--c + .sm-mostread { margin-top: var(--sm-space-5); } #wpadminbar #wp-admin-bar-smashology-ad-preview.is-active > .ab-item { background: var(--sm-signal); color: #fff; } @media (max-width: 767.98px) { .sm-ad--a { display: none; } .sm-ad--b { min-height: 100px; } .sm-ad--d { min-height: 250px; } .sm-ad--e { min-height: 50px; } .sm-ad--house { grid-template-columns: 1fr; justify-items: start; } } /* ========================================================================== 5. UTILITY BAR + BREAKING TICKER [OPEN] Replaces the static mission-statement strip. These are all .sm- classes on markup that does not exist yet, so there is nothing to verify against until the templates are built in Phase 1. They are inert until then — no selector here can collide with the parent. ========================================================================== */ .sm-utility { background: var(--sm-ink); color: var(--sm-paper); font-family: var(--sm-display); font-size: var(--sm-size-meta); font-weight: 600; padding: 7px 0; } .sm-utility a { color: var(--sm-paper); opacity: 0.85; } .sm-utility a:hover { opacity: 1; } .sm-breaking { background: var(--sm-signal); color: var(--sm-paper); padding: 9px 0; overflow: hidden; } .sm-breaking__label { font-family: var(--sm-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--sm-size-meta); padding-right: 14px; border-right: 1px solid rgba(255,255,255,0.35); margin-right: 14px; white-space: nowrap; } .sm-breaking__item { font-family: var(--sm-display); font-weight: 600; font-size: 0.9375rem; color: var(--sm-paper); } /* * Ticker rotation mechanics live in section 10, next to the rest of the * front-page.php components, including the prefers-reduced-motion rule. * Deliberately not duplicated here. */ /* ========================================================================== 6. FEATURED SLIDESHOW [v1.11.0] Data source confirmed available: the existing slider is driven by the native sticky-post flag via template-parts/sticky-post-slider.php and template-parts/front-page/home-post-slider.php, so the spec's "keep the sticky posts, change only the presentation" holds. The grid markup itself does not exist yet. ========================================================================== */ .sm-hero { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--sm-gutter); padding: var(--sm-band) 0; border-bottom: 1px solid var(--sm-rule); } .sm-hero__lead { grid-column: span 3; } .sm-hero__secondary { grid-column: span 1; display: flex; flex-direction: column; gap: var(--sm-gutter); } .sm-hero__tertiary { grid-column: span 1; } .sm-hero__lead h2 { font-size: var(--sm-size-lead); line-height: 1.05; font-weight: 800; margin: 10px 0 6px; } .sm-hero__lead .sm-dek { font-family: var(--sm-body); font-size: 1.0625rem; color: var(--sm-mute); margin-bottom: 10px; } .sm-hero img { width: 100%; height: auto; display: block; } .sm-featured { display: grid; grid-template-columns: minmax(0, 2.25fr) minmax(250px, 0.75fr); align-items: start; gap: clamp(18px, 2.25vw, 32px); padding: clamp(20px, 3vw, 40px) 0; border-bottom: 1px solid var(--sm-rule); } .sm-carousel { min-width: 0; background: var(--sm-ink); color: var(--sm-paper); } .sm-carousel__viewport { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0d10; } .sm-carousel__slide { position: relative; width: 100%; height: 100%; margin: 0; animation: sm-carousel-in 360ms var(--sm-motion-ease) both; } .sm-carousel__slide[hidden] { display: none !important; } .sm-carousel__slide .sm-card__media { width: 100%; height: 100%; } .sm-carousel__slide img { width: 100%; height: 100%; object-fit: cover; } .sm-carousel__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 28%, rgba(7, 9, 12, 0.22) 52%, rgba(7, 9, 12, 0.96) 100%); pointer-events: none; } .sm-carousel__copy { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: clamp(20px, 4vw, 44px); } .sm-carousel__copy h2 { max-width: 850px; margin: 10px 0; color: var(--sm-paper); font-size: clamp(1.75rem, 4.2vw, 3.75rem) !important; line-height: 0.98; text-wrap: balance; } .sm-carousel__copy h2 a { color: inherit; } .sm-carousel__copy .sm-meta { color: rgba(255,255,255,0.78); } .sm-carousel__controls { display: flex; min-height: 54px; align-items: center; gap: 12px; padding: 7px 10px; border-top: 1px solid rgba(255,255,255,0.14); } .sm-carousel__arrow, .sm-carousel__pause, .sm-carousel__dots button { appearance: none; border: 0; color: var(--sm-paper); background: transparent; cursor: pointer; } .sm-carousel__arrow, .sm-carousel__pause { display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,0.28); border-radius: 50%; font-weight: 800; } .sm-carousel__arrow:hover, .sm-carousel__pause:hover { border-color: var(--sm-paper); background: rgba(255,255,255,0.1); } .sm-carousel__dots { display: flex; flex: 1; align-items: center; gap: 7px; } .sm-carousel__dots button { width: 24px; height: 24px; padding: 0; position: relative; } .sm-carousel__dots button::after { content: ""; position: absolute; top: 9px; right: 3px; left: 3px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.38); } .sm-carousel__dots button[aria-current="true"]::after { background: var(--sm-signal); } .sm-carousel__count { min-width: 44px; font-family: var(--sm-display); font-size: 0.75rem; text-align: center; } .sm-featured__rail { display: flex; flex-direction: column; gap: 18px; } .sm-featured__rail > h2 { margin: 0; padding: 0 0 9px; border-bottom: 4px solid var(--sm-ink); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; } .sm-featured__rail article + article { padding-top: 18px; border-top: 1px solid var(--sm-rule); } .sm-featured__rail img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .sm-featured__rail h3 { margin: 8px 0 5px; font-size: 1.125rem; line-height: 1.12; } .sm-featured__rail h3 a { color: var(--sm-ink); } @keyframes sm-carousel-in { from { opacity: 0; transform: scale(1.012); } to { opacity: 1; transform: scale(1); } } @media (max-width: 991.98px) { .sm-featured { grid-template-columns: 1fr; } .sm-featured__rail { display: grid; grid-template-columns: 1fr 1fr; } .sm-featured__rail > h2 { grid-column: 1 / -1; } .sm-featured__rail article + article { padding-top: 0; padding-left: 18px; border-top: 0; border-left: 1px solid var(--sm-rule); } .sm-hero { grid-template-columns: 1fr 1fr; } .sm-hero__lead { grid-column: span 2; } .sm-hero__secondary { grid-column: span 2; flex-direction: row; } .sm-hero__secondary > * { flex: 1; } } @media (max-width: 575.98px) { .sm-carousel__viewport { aspect-ratio: 4 / 5; } .sm-carousel__copy { padding: 18px; } .sm-carousel__copy h2 { font-size: clamp(1.65rem, 8vw, 2.35rem) !important; } .sm-carousel__dots { gap: 2px; } .sm-carousel__count { display: none; } .sm-featured__rail { grid-template-columns: 1fr; } .sm-featured__rail article + article { padding-top: 18px; padding-left: 0; border-top: 1px solid var(--sm-rule); border-left: 0; } .sm-hero { grid-template-columns: 1fr; } .sm-hero__lead, .sm-hero__secondary { grid-column: span 1; } .sm-hero__secondary { flex-direction: column; } } /* ========================================================================== 7. RIVER + SIDEBAR [OPEN] ANSWER TO SPEC OPEN QUESTION 2 — the Page Layout Builder CANNOT do this. The builder is an ACF Flexible Content field ("Layout Blocks") on page 9. Its complete layout set is: content_with_image, content_only, posts, video, cards, lists, accordions, tabs, timeline, slider, modal, testimonials There is no row, column, grid-split or sidebar layout. Every block renders full-width and stacks vertically, and the posts block's own sub-fields (checked in template-parts/blocks/block-posts.php) contain no sidebar or unequal-split option either — its only Bootstrap columns are col-12 and col-lg-5. So the sidebar is a TEMPLATE OVERRIDE, not a builder change. The front page is a static page rendered through front-page.php, so the child theme needs its own front-page.php. That is Phase 2 work and is not in this file. ========================================================================== */ .sm-main { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; max-width: var(--sm-max); margin: 0 auto; padding: var(--sm-band) var(--sm-gutter); } .sm-river__item { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--sm-rule); } .sm-river__item img { width: 100%; height: auto; display: block; } .sm-river__item h2, .sm-river__item h3 { font-size: var(--sm-size-river); line-height: 1.25; margin: 6px 0; } .sm-sidebar { position: relative; } /* * Most Read heading copy: use "Most Read" with no time claim. * The underlying data window is 3 days, not 7 (the theme prunes its hits * table at 3 days), so any "this week" wording in the markup would be false. * See smashology_most_read() in functions.php. */ .sm-mostread { background: var(--sm-newsprint); padding: 20px; } .sm-mostread h2 { font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 10px; border-bottom: 2px solid var(--sm-ink); margin-bottom: 4px; } /* Numbering is legitimate here — this list genuinely is a ranking */ .sm-mostread ol { list-style: none; counter-reset: mr; padding: 0; margin: 0; } .sm-mostread li { counter-increment: mr; display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--sm-rule); } .sm-mostread li:last-child { border-bottom: 0; } .sm-mostread li::before { content: counter(mr); font-family: var(--sm-display); font-size: 1.75rem; font-weight: 800; line-height: 0.9; color: var(--sm-signal); } .sm-mostread li a { font-family: var(--sm-display); font-size: var(--sm-size-side); font-weight: 600; line-height: 1.3; } /* * Only the ad sticks, not the whole column. * * The column holds Most Read (~400px) + a 600px ad well + the newsletter * (~260px) — over 1250px. A sticky element taller than the viewport pins its * top edge and then just scrolls with the page, so `position: sticky` on the * wrapper looked like it worked and did nothing. Sticking slot C alone is what * the spec actually asks for and is the standard news-sidebar behaviour. */ .sm-sticky { position: relative; } .sm-main .sm-ad--c { position: sticky; top: 88px; } @media (max-width: 991.98px) { .sm-main { grid-template-columns: 1fr; gap: var(--sm-band); } .sm-main .sm-ad--c { position: static; } } /* * River cards for the posts with no featured image. Without this the 140px * image track stays reserved and empty, so the card renders with a blank * gutter and the headline shoved right. Three posts are in this state today. */ .sm-river__item--noimage { grid-template-columns: 1fr; } @media (max-width: 575.98px) { .sm-river__item { grid-template-columns: 104px 1fr; gap: 12px; } .sm-river__item--noimage { grid-template-columns: 1fr; } } /* ========================================================================== 8. CATEGORY BLOCKS — replaces "Browse Other Categories" [CORRECTED] The draft said this module "renders raw URLs because featured images are missing". Close, but not quite what is happening, and the distinction changes the fix. The module renders four .category-banner cards, each containing an EMPTY anchor: The anchor is where a category image should go. All four categories (Crime 15, News 26, Tech 9, Viral 17) have no ACF fields and no term meta at all, so the theme has nothing to put inside the link and emits an empty, zero-height clickable box with the heading floating beneath it. So this is not a broken-image problem and no CSS fixes it — the cards need either category images assigned, or replacing with the .sm-catblock markup below, which uses headlines instead of images and therefore cannot break this way. The spec already chose the second, which is the right call. Parent classes worth knowing when the replacement is built: .blog-cat-label-wrapper wrapper .category-banner each card .as_banner-content the heading .as_banner-count the "15 stories" line ========================================================================== */ .sm-catblocks { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: var(--sm-max); margin: 0 auto; padding: var(--sm-band) var(--sm-gutter); border-top: 1px solid var(--sm-rule); } .sm-catblock h2 { font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 10px; border-bottom: 2px solid var(--sm-ink); margin-bottom: 16px; } .sm-catblock__links { list-style: none; padding: 0; margin: 14px 0 0; } .sm-catblock__links li { padding: 11px 0; border-top: 1px solid var(--sm-rule); } .sm-catblock__links a { font-family: var(--sm-display); font-size: var(--sm-size-side); font-weight: 600; line-height: 1.3; } @media (max-width: 767.98px) { .sm-catblocks { grid-template-columns: 1fr; gap: var(--sm-band); } } /* ========================================================================== 9. NEWSLETTER + FOOTER [PROVIDER-AGNOSTIC] Provider undecided (MailerLite or Kit). By instruction this block styles a plain email input plus submit button and nothing else: - no provider embed script - no provider stylesheet - no provider-specific class names or wrapper markup - no hidden fields The expected markup is therefore just: Wiring it to a provider later means changing the form's action and adding whatever hidden fields that provider needs. Neither touches these rules, so this section does not need revisiting when the decision is made. ========================================================================== */ .sm-newsletter { background: var(--sm-ink); color: var(--sm-paper); padding: 24px; margin-top: var(--sm-band); } .sm-newsletter h2 { color: var(--sm-paper); font-size: 1.25rem; margin-bottom: 6px; } .sm-newsletter p { font-size: 0.9375rem; color: rgba(255,255,255,0.75); margin-bottom: 14px; } .sm-newsletter input[type="email"] { width: 100%; padding: 11px 12px; border: 0; font-family: var(--sm-body); font-size: 1rem; margin-bottom: 10px; } .sm-newsletter button { width: 100%; padding: 11px; border: 0; background: var(--sm-signal); color: var(--sm-paper); font-family: var(--sm-display); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; } .sm-newsletter button:hover { background: var(--sm-signal-dark); } /* The About block moves here from position 2 on the homepage */ .sm-footer-about { max-width: 60ch; font-size: 0.9375rem; color: var(--sm-mute); } /* ========================================================================== 10. COMPONENTS USED BY front-page.php Added after the template was written, for classes it actually emits. Everything here is a .sm- class on markup this child theme controls, so none of it can collide with the parent. ========================================================================== */ /* --- card meta line: timestamp + source chip --- */ .sm-cardmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; } /* --- section heads: LATEST, and the category block heads --- */ .sm-section-head { font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 10px; border-bottom: 2px solid var(--sm-ink); margin-bottom: 4px; } /* --- buttons --- */ .sm-btn { display: inline-block; font-family: var(--sm-display); font-size: var(--sm-size-side); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 12px 22px; background: var(--sm-ink); color: var(--sm-paper); border: 0; } .sm-btn:hover { background: var(--sm-signal); color: var(--sm-paper); } .sm-btn--ghost { background: transparent; color: var(--sm-paper); border: 2px solid rgba(255,255,255,0.6); } .sm-btn--ghost:hover { background: var(--sm-paper); color: var(--sm-ink); } .sm-loadmore { margin: 28px 0 0; } /* --- headline links inherit ink, underline only on hover --- */ .sm-hero h2 a, .sm-hero h3 a, .sm-river__item h2 a, .sm-river__item h3 a, .sm-catblock h3 a, .sm-mostread li a, .sm-catblock__links a { color: inherit; } .sm-hero h2 a:hover, .sm-hero h3 a:hover, .sm-river__item h2 a:hover, .sm-river__item h3 a:hover, .sm-catblock h3 a:hover, .sm-mostread li a:hover, .sm-catblock__links a:hover { text-decoration: underline; text-decoration-color: var(--sm-signal); text-underline-offset: 2px; } /* --- category block lead card --- */ .sm-catblock article img { width: 100%; height: auto; display: block; margin-bottom: 8px; } .sm-catblock article h3 { font-size: var(--sm-size-river); line-height: 1.25; margin: 6px 0; } .sm-catblock h2 a { color: inherit; } /* --- hero tertiary cards --- */ .sm-hero__tertiary h3, .sm-hero__secondary h3 { font-size: var(--sm-size-secondary); line-height: 1.15; margin: 8px 0 4px; } .sm-hero__secondary img, .sm-hero__tertiary img { margin-bottom: 6px; } /* --- breaking ticker rotation --- */ .sm-breaking__track { position: relative; flex: 1; height: 1.4em; overflow: hidden; } .sm-breaking__item { position: absolute; inset: 0; display: block; opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: sm-tick 20s linear infinite; } .sm-breaking__item:nth-child(1) { animation-delay: 0s; } .sm-breaking__item:nth-child(2) { animation-delay: 4s; } .sm-breaking__item:nth-child(3) { animation-delay: 8s; } .sm-breaking__item:nth-child(4) { animation-delay: 12s; } .sm-breaking__item:nth-child(5) { animation-delay: 16s; } /* * 4s visible out of 20s for five items. The short fade at each end stops the * swap reading as a flicker. */ @keyframes sm-tick { 0% { opacity: 0; } 1% { opacity: 1; } 19% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } } /* --- article verification strip (prepended to single-post content) --- */ .sm-verify-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 0 12px; margin: 0 0 22px; border-top: 2px solid var(--sm-verified); border-bottom: 1px solid var(--sm-rule); max-width: 68ch; } .sm-verify-sep { color: var(--sm-rule); font-family: var(--sm-display); } .sm-verify-link { font-family: var(--sm-display); font-size: var(--sm-size-meta); font-weight: 600; color: var(--sm-mute); text-decoration: underline; text-decoration-color: var(--sm-rule); text-underline-offset: 3px; } .sm-verify-link:hover { color: var(--sm-ink); text-decoration-color: var(--sm-verified); } /* --- how we verify band --- */ .sm-verify { background: var(--sm-signal); color: var(--sm-paper); } .sm-verify h2 { color: var(--sm-paper); font-size: 1.5rem; margin-bottom: 8px; } /* * Solid white, not rgba(255,255,255,0.9). The translucent version measured * about 4.0:1 against the signal red — under AA. Solid white on #E7000B is * 4.77:1 and passes. */ .sm-verify p { color: var(--sm-paper); max-width: 60ch; margin-bottom: 16px; } /* --- reduced motion: the ticker becomes a static first headline --- */ @media (prefers-reduced-motion: reduce) { .sm-breaking__item { animation: none !important; opacity: 0; } .sm-breaking__item:first-child { opacity: 1; } } /* ========================================================================== 12. LIVE-RENDER FIXES — first activation on production, 06 Sep 2026 These three were found by looking at the real page, not by reading source. ========================================================================== */ /* * 12a. The masthead overlapped the ticker and the hero. * * The parent puts `trans-header` on for the front page and positions * #masthead absolute at top:32px with z-index 20 — a transparent header meant * to float over a full-bleed slider. Page 9's builder opened with exactly such * a hero, so it read as deliberate. This template opens with the ticker, so * the header landed on top of it. * * Returning the header to normal flow on the front page only. Interior pages * keep the overlay behaviour, which still works there. */ body.home #masthead { position: static !important; top: auto !important; } /* * 12b. Most Read numbered every item "0." * * The parent styles `ol li::before` with `content: counter(counter) ". "` in * its own blue. The counter named `counter` is never incremented on this list, * so every row rendered 0. The parent rule outranked the child's, so the * override needs both the extra element in the selector and !important. */ .sm-mostread ol li::before { content: counter(mr) !important; color: var(--sm-signal) !important; font-family: var(--sm-display) !important; font-size: 1.75rem !important; font-weight: 800 !important; line-height: 0.9 !important; } /* * 12c. The dangling bullet after the hidden view counter. * * This lived in Additional CSS while the parent theme was active. Customizer * CSS is stored per stylesheet, so activation left it behind. It belongs in * the theme anyway — `.views-count` is already hidden in section 3 above. * * !important is required: the separator span carries Bootstrap's * .d-inline-block utility, which is itself !important. */ .meta-sticky-separator:has(+ .views-count) { display: none !important; } /* * 12d. Archive headers: white text on white, over 224px of dead space. * * The parent hardcodes `text-white` on the post-count line and pads the * header 144px/80px, both written for a full-bleed category photo behind it. * This template never sets one, so "9 stories and counting" was white on * white and the band was empty. The class is now `sm-archive-count` * (archive.php), styled here as what it actually is — a meta line — and the * header is tightened to something proportionate to two lines of type. * * If category header images are added later, revisit the padding; the colour * is independent of that and stays correct either way. */ .sm-archive-count { color: var(--sm-mute); font-family: var(--sm-display); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; } .blog-full-page-header-archive .page-header-overlay, .blog-full-page-header .page-header-overlay { padding-top: 40px; padding-bottom: 28px; } .blog-full-page-header-archive .blog-page-title, .blog-full-page-header .blog-page-title { margin-bottom: 6px; } /* * 12e. Article hero: dark headline on a dark photo. * * On single posts and any page with a header image, the parent sets a * background photo on .full-page-header but leaves .page-header-overlay * fully transparent, so the headline renders in ink (#14161A) directly over * the picture. On the Google antitrust piece — a night shot of a courthouse — * the headline was effectively invisible. * * The attribute selector is the discriminator: the parent writes an inline * background-image only when a photo exists. Archive headers have no style * attribute, so they keep the dark-on-white treatment from 12d and are * untouched by this. */ .full-page-header[style*="background-image"] .page-header-overlay { background: linear-gradient( 180deg, rgba(10, 11, 13, 0.45) 0%, rgba(10, 11, 13, 0.80) 100% ); } .full-page-header[style*="background-image"] .page-header-overlay, .full-page-header[style*="background-image"] .page-header-overlay h1, .full-page-header[style*="background-image"] .page-header-overlay h2, .full-page-header[style*="background-image"] .page-header-overlay p, .full-page-header[style*="background-image"] .page-header-overlay span, .full-page-header[style*="background-image"] .page-header-overlay time, .full-page-header[style*="background-image"] .page-header-overlay a { color: var(--sm-paper); } .full-page-header[style*="background-image"] .page-header-overlay a { text-decoration: underline; text-underline-offset: 2px; } .full-page-header[style*="background-image"] .page-header-overlay a:hover, .full-page-header[style*="background-image"] .page-header-overlay a:focus { color: var(--sm-paper); text-decoration-thickness: 2px; } /* * 12f. Nav over the article hero. * * 12e scrimmed the hero, which fixed the headline but not the header sitting * on top of it: the parent leaves nav links at #333, the site description at * ink, and the brand at its blue — all unreadable against a dark photo. * * :has() is the right tool here (supported in every browser this theme * targets, and verified live). The masthead is a sibling of the hero section, * so no descendant selector can reach it; this keys off whether the page has * a hero photo at all. Archives and the front page have none, so they keep * the dark-on-white header untouched. * * The current section stays distinguishable by an underline rather than a * colour, since every link is now white. */ body:has(.full-page-header[style*="background-image"]) #masthead .nav-link, body:has(.full-page-header[style*="background-image"]) #masthead .navbar-brand, body:has(.full-page-header[style*="background-image"]) #masthead .site-description, body:has(.full-page-header[style*="background-image"]) #masthead .navbar-toggler, body:has(.full-page-header[style*="background-image"]) #masthead .search-toggle { color: var(--sm-paper) !important; } body:has(.full-page-header[style*="background-image"]) #masthead .nav-link:hover, body:has(.full-page-header[style*="background-image"]) #masthead .nav-link:focus { color: var(--sm-paper) !important; text-decoration: underline; text-underline-offset: 6px; } body:has(.full-page-header[style*="background-image"]) #masthead .current-menu-item > .nav-link, body:has(.full-page-header[style*="background-image"]) #masthead .current-menu-ancestor > .nav-link, body:has(.full-page-header[style*="background-image"]) #masthead .current-menu-parent > .nav-link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } /* The site description is secondary; hold it just off pure white. */ body:has(.full-page-header[style*="background-image"]) #masthead .site-description { color: rgba(255, 255, 255, 0.82) !important; } /* ========================================================================== 13. MOBILE PASS — 375px and 768px, 6 Sep 2026 Everything before this was verified at desktop width only. ========================================================================== */ /* * 13a. The mobile menu button was invisible on every light-header page. * * burger.svg is drawn with stroke:#fff — a white icon for a dark header. The * parent then applies filter: invert(1) TWICE, once on .navbar-toggler and * again on .navbar-toggler-icon inside it. Two inversions cancel, so the icon * rendered white on the white masthead: present, clickable, and completely * unseeable. It only showed up on article pages, where it happens to sit over * a dark hero photo. * * This is a parent-theme bug, not something the redesign introduced — it was * just as invisible before. But it means nobody on a phone could reach Viral, * News, Tech or Crime, which is worth fixing on its own terms and not only * for the AdSense review. * * Cancel the outer inversion and keep the inner one, so white becomes black * on light headers; over a hero photo, drop the inner one too and let it stay * white, matching the nav treatment in 12f. */ #masthead .navbar-toggler { filter: none !important; } #masthead .navbar-toggler-icon { filter: invert(1) !important; } body:has(.full-page-header[style*="background-image"]) #masthead .navbar-toggler-icon { filter: none !important; } /* * While we're here: the button was a 30px square. That is under every mobile * tap-target guideline going. The icon stays 30px; the hit area grows. * * Scoped to the breakpoint where the toggler is actually meant to appear. * Unscoped, the #masthead id beat Bootstrap's `.navbar-expand-lg * .navbar-toggler { display: none }` and the burger showed up on desktop too, * shoving the nav onto two lines. Caught on the first desktop reload after * shipping 1.0.6. */ @media (max-width: 991.98px) { #masthead .navbar-toggler { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 7px; } } /* * 13b. Ad slot C stayed a 600px skyscraper on phones. * * Slot C is the sidebar rail, sized for a 300x600. Below 992px the sidebar * stops being a rail and stacks under the river — and the mobile ad block * below sets heights for slots A, B, D and E but never C. So on a 375px * phone the reserved space became a full-width 600px void: an entire blank * screen with nothing in it, which is exactly the kind of thing a policy * reviewer screenshots. * * 250px matches slot D and still reserves enough that dropping a real unit * in later shifts nothing. */ @media (max-width: 991.98px) { .sm-ad--c { min-height: 250px; } } /* * 13c. Archive headers on phones. * * 12d tightened the header band itself, but the container below it still * carries the parent's 96px desktop gutter, which reads as a dead screen * between the category name and the first story. */ @media (max-width: 767.98px) { .blog-full-page-header-archive + .container.section-gutter, .blog-full-page-header + .container.section-gutter { padding-top: 28px; } } /* ========================================================================== 14. HEADER LAYER + ARTICLE FOOTER — 7 Sep 2026 Section 5's utility bar finally has markup, and the masthead joins the token system. See functions.php for why no template needed copying. ========================================================================== */ /* --- 14a. Utility bar ---------------------------------------------------- */ .sm-utility__inner { max-width: var(--sm-max); margin: 0 auto; padding: 0 var(--sm-gutter); display: flex; align-items: center; gap: 20px; } .sm-utility__date { text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; white-space: nowrap; } .sm-utility__links { display: flex; gap: 16px; } .sm-utility a { color: var(--sm-paper); text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; } .sm-utility a:hover, .sm-utility a:focus { color: var(--sm-paper); text-decoration: underline; text-underline-offset: 3px; } .sm-utility__verify { margin-left: auto; white-space: nowrap; } .sm-utility__verify::before { content: ""; display: inline-block; width: 14px; height: 2px; background: var(--sm-verified); vertical-align: middle; margin-right: 8px; } /* * Phones: the date and the verify line are the first things to go. Section * links are the only part of this bar with a job to do at 375px. */ @media (max-width: 767.98px) { .sm-utility__date, .sm-utility__verify { display: none; } .sm-utility__inner { justify-content: center; } .sm-utility__links { gap: 14px; } } /* * The parent's mission strip is what this bar replaces. Hiding rather than * removing: it is printed by the header template-part, which is inherited * and deliberately not overridden. */ #masthead .site-description { display: none; } /* --- 14b. Masthead into the token system --------------------------------- */ /* * The spec's "one red only" rule was broken on every page by the header. The * parent renders the site title in its own blue (#0099DB), nav links at #333, * and the current section in #004CFF — three colours from outside the system, * two of them blue, sitting next to a black wordmark. * * Ink for everything, signal red reserved for the section you are actually in. * The hero-photo pages keep the white treatment from §12f, which loads later * and carries !important. */ #masthead .navbar-brand { color: var(--sm-ink); } #masthead .nav-link { color: var(--sm-ink); font-family: var(--sm-display); font-weight: 600; letter-spacing: 0.01em; } #masthead .nav-link:hover, #masthead .nav-link:focus { color: var(--sm-signal); } #masthead .current-menu-item > .nav-link, #masthead .current-menu-ancestor > .nav-link, #masthead .current-menu-parent > .nav-link { color: var(--sm-signal); } /* --- 14c. Author box ----------------------------------------------------- */ .sm-authorbox { margin: var(--sm-band) 0 0; padding: 22px 24px; background: var(--sm-newsprint); border-left: 3px solid var(--sm-ink); } .sm-authorbox__label { display: block; font-family: var(--sm-display); font-size: var(--sm-size-meta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sm-mute); margin-bottom: 4px; } .sm-authorbox__name { font-family: var(--sm-display); font-size: 1.375rem; font-weight: 700; margin: 0 0 8px; } .sm-authorbox__bio { font-family: var(--sm-body); font-size: 1rem; line-height: 1.55; max-width: 60ch; margin: 0 0 12px; } .sm-authorbox__more { font-family: var(--sm-display); font-size: var(--sm-size-meta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sm-ink); text-decoration: underline; text-underline-offset: 3px; } .sm-authorbox__more:hover, .sm-authorbox__more:focus { color: var(--sm-signal); } /* --- 14d. Related articles ----------------------------------------------- */ .sm-related { margin: var(--sm-band) 0 0; } .sm-related__title { font-family: var(--sm-display); font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 3px solid var(--sm-ink); } .sm-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 18px; } .sm-related__item .sm-card__media { display: block; margin-bottom: 10px; } .sm-related__headline { font-family: var(--sm-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.28; margin: 6px 0 4px; } .sm-related__headline a { color: var(--sm-ink); text-decoration: none; } .sm-related__headline a:hover, .sm-related__headline a:focus { color: var(--sm-signal); text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 767.98px) { .sm-related__grid { grid-template-columns: 1fr; gap: 20px; } .sm-related__item { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: start; } .sm-related__item .sm-card__media { margin-bottom: 0; } } /* * 14e. The utility bar and the floating masthead collided. * * On any page with a hero photo the parent positions #masthead absolutely * (§12a covers why). The new utility bar is the first element in normal flow, * so both started at the same y and the masthead painted straight over it — * the same class of bug as the original ticker overlap, reintroduced by adding * a second strip above the fold. * * Fixing with margin-top rather than top: the parent's `top` is 32px with the * admin bar and 0 without, and margin composes with either. Scoped by the same * hero-photo discriminator used in §12e and §12f, so the front page (masthead * already static) and archives (never absolute) are untouched. */ .sm-utility { position: relative; z-index: 30; } #masthead { top: calc(var(--wp-admin--admin-bar--height, 0px) + 34px); } /* * 14f. Why this is unscoped, and why `top` rather than the margin-top of 14e. * * First attempt keyed the offset off the hero-photo selector from 12e, on the * assumption that the masthead only floats where there is a photo behind it. * Wrong: it is absolute on every trans-header page, so category archives — * which have no hero image — put the masthead straight back on top of the new * bar. The front page was the only exception, and only because 12a had already * forced it static. * * So the rule is unscoped. `top` has no effect on a statically positioned * element, which means this is inert exactly where the masthead is in normal * flow and correct everywhere it is not — no page-type list to keep in sync. * * The parent hardcodes `top: 32px` on the absolute masthead — the desktop * admin-bar height. WordPress's mobile admin bar is 46px, so the masthead has * always sat 14px too high for a logged-in editor on a phone; the utility bar * simply made it visible by putting something underneath to collide with. * Logged-out visitors were never affected, since the bar is 0 there. * * WordPress sets --wp-admin--admin-bar--height on :root and keeps it correct * at 46px, 32px or absent, so deriving from it fixes the parent's bug and the * new one together, in every login state, without hardcoding a breakpoint. */ /* ========================================================================== 15. STICKY NAV + EDITORIAL LABELS — 7 Sep 2026 From the Daily Mail teardown: the two patterns that transfer at 64 posts. ========================================================================== */ /* * 15a. The utility bar becomes the sticky nav. * * Daily Mail keeps a 48px bar pinned on scroll so a reader seven screens down * can still change section. The obvious build is a second, compact header that * appears on scroll — which needs JavaScript, a scroll listener, and a duplicate * set of nav links to keep in sync. * * None of that is necessary. The utility bar already sits above the masthead * and already contains the section links, so making it sticky gives the same * behaviour with no new markup, no duplicate nav, and no script: it scrolls * with the page, the masthead scrolls away underneath it, and the bar stays. * * z-index 30 was already set in 14e to clear the absolute masthead's 20. */ .sm-utility { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); } /* --- 15b. Editorial labels ----------------------------------------------- */ /* * These sit immediately before the category chip. The category tells a reader * where they are; the label tells them what kind of thing they are looking at. * Deliberately louder than the category chip, because it is rarer — used on a * handful of posts rather than all of them. */ .sm-label { display: inline-block; vertical-align: middle; margin-right: 6px; padding: 3px 7px; font-family: var(--sm-display); font-size: var(--sm-size-meta); font-weight: 800; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sm-paper); background: var(--sm-ink); } .sm-label--exclusive { background: var(--sm-signal); } .sm-label--fact-check { background: var(--sm-verified); } .sm-label--explainer { background: var(--sm-ink); } /* * "Updated" is the quiet one: it is a fact about the post's history rather than * a claim about the reporting, so it reads as an outline rather than a solid. */ .sm-label--updated { background: transparent; color: var(--sm-mute); box-shadow: inset 0 0 0 1px var(--sm-rule); } /* --- 15c. Newsletter note ------------------------------------------------ */ /* * The double opt-in line. Small, quiet, and directly under the button, because * the honest answer to "what happens when I put my address in here" belongs * next to the thing that takes the address. */ .sm-newsletter__note { margin: 10px 0 0; font-family: var(--sm-display); font-size: var(--sm-size-meta); line-height: 1.45; color: rgba(255, 255, 255, 0.72); } /* ========================================================================== 16. SYSTEM TOKENS — 7 Sep 2026 [v1.2.0] The audit that opened this session found the token layer was half-built. §1 defines colour and type well. It defines almost nothing else, and the file had grown to 1,588 lines around that gap: - 83 arbitrary px values across 19 distinct numbers, with no scale - zero transition declarations — every hover state snapped instantly - one z-index (30), for a page with a sticky utility bar, a sticky nav and an absolutely positioned masthead stacked on top of each other - no elevation vocabulary - a focus ring that disappears on the two surfaces it most needs to work on: the red button and the dark newsletter panel None of that is visible as a bug. All of it is visible as "this was assembled" rather than "this was designed", which is the actual gap between the site now and the professional feel Leon asked for. NOTE ON RETROFIT: the 83 existing px values are deliberately NOT rewritten onto the new scale. Most already sit on it, the rest are within 2px of a step, and a global find-replace across 1,588 lines of production CSS buys no visual change while risking every layout on the site. The scale is defined here and used by everything from this section on. ========================================================================== */ :root { /* ---- Spacing. 4px base. -------------------------------------------- */ --sm-space-1: 4px; --sm-space-2: 8px; --sm-space-3: 12px; --sm-space-4: 16px; --sm-space-5: 24px; --sm-space-6: 32px; --sm-space-7: 48px; --sm-space-8: 64px; /* ---- Radius. ------------------------------------------------------- * Zero is a decision, not an oversight, and it is now written down so * nobody "fixes" it later. News surfaces are rectangular; rounded cards * are the single strongest visual tell of a SaaS marketing page, and this * site's credibility depends on not reading as one. The only exception is * the chip, where 2px stops the corners looking chipped at 12px type. */ --sm-radius: 0; --sm-radius-chip: 2px; /* ---- Motion. ------------------------------------------------------- * The parent theme transitions links at 0.5s, which is why the site feels * slightly underwater. 500ms is roughly 4x the duration at which a hover * still reads as a direct response to the cursor. Ours are 120/200ms. */ --sm-motion-fast: 120ms; --sm-motion-base: 200ms; --sm-motion-ease: cubic-bezier(0.2, 0, 0.2, 1); /* ---- Elevation. ---------------------------------------------------- * Hairline-first. A newspaper separates things with rules, not shadows, * so "lift" here means the rule darkens and a 1px edge appears — not that * the card floats. --sm-lift-2 is reserved for genuinely overlaid things * (the mobile nav panel), where a real shadow is doing real work. */ --sm-lift-0: none; --sm-lift-1: 0 1px 0 0 var(--sm-ink); --sm-lift-2: 0 8px 24px -8px rgba(20, 22, 26, 0.28); /* ---- Layering. ----------------------------------------------------- * Written down because three sticky/absolute layers already collide, and * every collision this session cost a round of production debugging. The * gaps of 10 leave room to slot something in without renumbering. */ --sm-z-base: 1; --sm-z-sticky: 30; /* utility bar, sticky nav */ --sm-z-masthead: 40; --sm-z-overlay: 60; /* mobile nav panel */ } /* ========================================================================== 17. INTERACTION LAYER — 7 Sep 2026 [v1.2.0] Everything below is state: hover, focus, active. The site had almost none of it. A reader could not tell a clickable headline from a static one until the cursor was already on it and the browser changed the pointer. [CORRECTED] The first cut of this section targeted .sm-headline, .sm-river__headline, .sm-catblock__headline, .sm-related__headline, .sm-card, .sm-river__media and .sm-hero__media. NONE of those classes exist. I inferred them from the BEM naming of the classes that do exist rather than reading the rendered DOM, shipped it, and it did nothing. What the markup actually is, dumped from the live homepage: .sm-hero__lead -> a.sm-card__media > img | a.sm-chip | h2 > a | p.sm-dek .sm-river__item -> a.sm-card__media > img | a.sm-chip | h3 > a .sm-catblock -> h2 > a (section head) | article > a.sm-card__media, h3 > a Headlines are bare h2/h3 wrapping an unclassed . The image wrapper is a.sm-card__media and IS the link — there is no separate .sm-card. All selectors below are rewritten against that. .sm-catblock article h3 a is scoped through `article` on purpose so it does not also hit the section head at .sm-catblock > h2 > a. ========================================================================== */ /* ---- Focus. --------------------------------------------------------- * REPLACES the §3 rule, which was `outline: 3px solid var(--sm-signal)`. * That ring is invisible on .sm-btn (a red button) and low-contrast on the * dark newsletter and utility surfaces — i.e. it failed on exactly the * three interactive surfaces that are not plain white. * * Two-tone box-shadow instead: a 2px paper ring separates the control from * whatever is behind it, then a 3px signal ring reads against that. Works on * white, on ink, and on red. The transparent outline is not decorative — in * Windows High Contrast Mode box-shadows are dropped and transparent * outlines are repainted in the system highlight colour, so it is the only * thing keeping focus visible there. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--sm-paper), 0 0 0 5px var(--sm-signal); border-radius: var(--sm-radius-chip); } /* ---- Transitions. --------------------------------------------------- */ .sm-hero h2 a, .sm-hero h3 a, .sm-river__item h2 a, .sm-river__item h3 a, .sm-catblock article h3 a, .sm-related h3 a, .sm-mostread a, .sm-catblock__links a, .sm-chip, .sm-label, .sm-btn, .sm-utility a, .sm-authorbox__more, #masthead .nav-link { transition: color var(--sm-motion-fast) var(--sm-motion-ease), background-color var(--sm-motion-fast) var(--sm-motion-ease), border-color var(--sm-motion-fast) var(--sm-motion-ease), opacity var(--sm-motion-fast) var(--sm-motion-ease); } /* Undo the parent's 0.5s on anything inside our components. */ .sm-main a, .sm-utility a, .sm-footer-about a { transition-duration: var(--sm-motion-fast); } /* ---- Headline affordance. ------------------------------------------- * The single highest-value change in this section. Every headline on the * site is a link; none of them looked like one. Underline-on-hover is the * oldest and least ambiguous signal there is, and it costs no layout — * text-underline-offset keeps it off the descenders. */ .sm-hero h2 a:hover, .sm-hero h3 a:hover, .sm-river__item h2 a:hover, .sm-river__item h3 a:hover, .sm-catblock article h3 a:hover, .sm-related h3 a:hover, .sm-mostread a:hover, .sm-hero h2 a:focus-visible, .sm-hero h3 a:focus-visible, .sm-river__item h2 a:focus-visible, .sm-river__item h3 a:focus-visible, .sm-catblock article h3 a:focus-visible, .sm-related h3 a:focus-visible, .sm-mostread a:focus-visible { color: var(--sm-signal); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } /* ---- Card lift. ----------------------------------------------------- * Hairline, not shadow. See --sm-lift-1. */ .sm-hero__lead, .sm-hero__secondary, .sm-hero__tertiary, .sm-river__item, .sm-catblock article { transition: box-shadow var(--sm-motion-base) var(--sm-motion-ease); } .sm-hero__lead:hover, .sm-hero__secondary:hover, .sm-hero__tertiary:hover, .sm-river__item:hover, .sm-catblock article:hover { box-shadow: var(--sm-lift-1); } /* ---- Image response. ------------------------------------------------- * 1.03 is deliberately small. Anything larger reads as a product card on a * storefront. The wrapper needs the overflow clip or the scale bleeds. */ .sm-card__media { overflow: hidden; display: block; } .sm-card__media img { transition: transform var(--sm-motion-base) var(--sm-motion-ease); will-change: transform; } .sm-card__media:hover img, .sm-hero__lead:hover .sm-card__media img, .sm-hero__secondary:hover .sm-card__media img, .sm-hero__tertiary:hover .sm-card__media img, .sm-river__item:hover .sm-card__media img, .sm-catblock article:hover .sm-card__media img { transform: scale(1.03); } /* ---- Buttons. -------------------------------------------------------- */ .sm-btn { cursor: pointer; } .sm-btn:hover { background: var(--sm-signal-dark); } .sm-btn:active { transform: translateY(1px); } .sm-btn[disabled], .sm-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* ---- Chips. ---------------------------------------------------------- */ .sm-chip, .sm-label { border-radius: var(--sm-radius-chip); } a.sm-chip:hover { opacity: 0.82; } /* ---- Tap targets. --------------------------------------------------- * WCAG 2.2 AA (2.5.8) sets a 24px minimum; 44px is the Apple/Material * figure and the one that actually stops mis-taps. The utility bar and * Most Read list were both under it at 375px. */ @media (max-width: 767.98px) { .sm-utility a, .sm-mostread a, .sm-footer-about a, #masthead .nav-link { min-height: 44px; display: inline-flex; align-items: center; } } /* ---- Reduced motion. ------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sm-card__media img { transition: none; } .sm-card__media:hover img, .sm-hero__lead:hover .sm-card__media img, .sm-hero__secondary:hover .sm-card__media img, .sm-hero__tertiary:hover .sm-card__media img, .sm-river__item:hover .sm-card__media img, .sm-catblock article:hover .sm-card__media img { transform: none; } .sm-btn:active { transform: none; } } /* ========================================================================== 18. AD SLOTS, REVISITED — 7 Sep 2026 [v1.2.0] MEASURED ON PRODUCTION, not assumed. The homepage today renders three .sm-ad divs with zero children: slot b 763 x 100 slot c 381 x 600 <- full sidebar column slot e 1192 x 90 790px of empty #F2F3F5, each block captioned "Advertisement", on a 6,859px page. A reader sees three broken boxes. A reviewer assessing a site that has already been rejected twice sees a page built around ad inventory that does not exist yet. The fix is a flag in functions.php, not CSS: while ads are off, the slot prints nothing at all. The CSS below only has to stop styling a slot that has no ad in it, so the reserved height comes back the moment real ad markup lands — which is what keeps CLS at 0 on the day it does. MEASURED DENSITY once all five slots are filled: 11.5% of page height. The Coalition for Better Ads threshold is 30% on mobile and 50% on desktop, so there is real headroom, but it should not be spent. Slot A stays off; §13b keeps slot C at 250px on mobile rather than 600px. ========================================================================== */ .sm-ad:empty { display: none; min-height: 0; margin: 0; } /* The "Advertisement" caption is required by AdSense policy when an ad is * present. It must not appear when one is not. */ .sm-ad:empty::before { content: none; } /* ========================================================================== 19. 404 — 7 Sep 2026 [v1.2.0] The parent's 404 was an 8rem numeral, one apologetic sentence and a single button to the homepage. Restyled to match the rest of the site and, more importantly, given somewhere to go: search plus the five latest stories. ========================================================================== */ .sm-404 { max-width: 560px; margin: 0 auto; text-align: left; } .sm-404__code { font-family: var(--sm-display); font-size: 5rem; font-weight: 800; line-height: 1; letter-spacing: 0.02em; color: var(--sm-rule); margin: 0 0 var(--sm-space-2); } .sm-404__title { font-family: var(--sm-display); font-size: var(--sm-size-secondary); font-weight: 700; color: var(--sm-ink); margin: 0 0 var(--sm-space-3); } .sm-404__lead { font-family: var(--sm-body); font-size: var(--sm-size-body); color: var(--sm-mute); margin: 0 0 var(--sm-space-5); } .sm-404__search { display: flex; gap: var(--sm-space-2); margin-bottom: var(--sm-space-6); } .sm-404__search input[type="search"] { flex: 1 1 auto; min-width: 0; padding: var(--sm-space-3); border: 1px solid var(--sm-rule); border-radius: var(--sm-radius); font-family: var(--sm-body); font-size: var(--sm-size-side); } .sm-404__search button[type="submit"] { padding: var(--sm-space-3) var(--sm-space-4); border: 0; border-radius: var(--sm-radius); background: var(--sm-ink); color: var(--sm-paper); font-family: var(--sm-display); font-size: var(--sm-size-meta); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background-color var(--sm-motion-fast) var(--sm-motion-ease); } .sm-404__search button[type="submit"]:hover { background: var(--sm-signal); } /* [CORRECTED] Traced rather than guessed. The dead space above the numeral is not on .error-404 at all — computed styles up the ancestor chain put it on two parent-theme wrappers: .jumbotron padding-top 64px .section-gutter padding-top 144px ----- 208px My first attempt zeroed .error-404.not-found, which had 0 padding to begin with and therefore did nothing. Scoped to body.error404 so no other template loses its gutter. */ body.error404 .jumbotron { padding-top: var(--sm-space-6) !important; } body.error404 .section-gutter { padding-top: var(--sm-space-6) !important; } body.error404 .error-404 .page-header { margin-bottom: var(--sm-space-2) !important; } .sm-404__head { margin-bottom: var(--sm-space-3); } .sm-404__list { list-style: none; margin: 0 0 var(--sm-space-6); padding: 0; } .sm-404__list li { border-top: 1px solid var(--sm-rule); } .sm-404__list li:last-child { border-bottom: 1px solid var(--sm-rule); } .sm-404__list a { display: block; padding: var(--sm-space-3) 0; font-family: var(--sm-display); font-size: var(--sm-size-river); font-weight: 600; line-height: 1.25; color: var(--sm-ink); text-decoration: none; transition: color var(--sm-motion-fast) var(--sm-motion-ease); } .sm-404__list a:hover, .sm-404__list a:focus-visible { color: var(--sm-signal); text-decoration: underline; text-underline-offset: 3px; } .sm-404__home { display: inline-block; } /* The parent centres the whole 404 section with a flex column. Left-aligned text in a centred column reads better than centred body copy at this width, so only the block itself stays centred. */ .error-404.not-found { align-items: stretch !important; } /* ========================================================================== 20. SEARCH RESULTS — 7 Sep 2026 [v1.3.0] Audited on production at /?s=nasa BEFORE writing this. The page carried five sm- elements and all five were the utility bar and masthead: below the header it was untouched parent theme — a centred page header over the hero treatment, a two-column card grid instead of the river, headlines truncated mid-word, and the default WordPress block sidebar showing a second Search widget and a Recent Posts widget in unstyled serif. It only became urgent in v1.2.3, when the rewritten 404 started routing readers here as its primary recovery path. Sending someone from a broken link to a page that looks like a different site is worse than the dead end it replaced. search.php reuses the homepage river markup verbatim, so the .sm-river and .sm-sidebar rules in §7 already do almost all the work. What follows is only what is specific to this template. ========================================================================== */ /* Same 208px of parent gutter the 404 had — see §19. */ body.search .jumbotron { padding-top: var(--sm-space-6) !important; } body.search .section-gutter { padding-top: var(--sm-space-6) !important; } /* The parent puts search results under a full-page hero header with an overlay. There is no image behind it here, so it renders as a tall empty band above the results. */ body.search .full-page-header { display: none; } /* [CORRECTED — verified on production] Hiding that band was not enough. The parent also sets `trans-header` on for search and positions #masthead absolute, so with the band gone the results slid up UNDER the logo and nav: the "Results for nasa" heading rendered behind the wordmark. This is the third time this session that removing something above the fold has dropped content under the absolute masthead — the same shape as the ticker overlap in §12a and the utility bar collision in §14f. Fixed the same way §12a fixes the front page: with no photo to float over, the masthead belongs in normal flow. */ body.search #masthead { position: static !important; top: auto !important; } .sm-search__head { margin-bottom: var(--sm-space-1); } .sm-search__term { color: var(--sm-signal); } .sm-search__count { font-family: var(--sm-display); font-size: var(--sm-size-meta); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sm-mute); margin: 0 0 var(--sm-space-4); } .sm-search__form { display: flex; gap: var(--sm-space-2); margin-bottom: var(--sm-space-6); } .sm-search__form input[type="search"] { flex: 1 1 auto; min-width: 0; padding: var(--sm-space-3); border: 1px solid var(--sm-rule); border-radius: var(--sm-radius); font-family: var(--sm-body); font-size: var(--sm-size-side); } .sm-search__form button[type="submit"] { padding: var(--sm-space-3) var(--sm-space-4); border: 0; border-radius: var(--sm-radius); background: var(--sm-ink); color: var(--sm-paper); font-family: var(--sm-display); font-size: var(--sm-size-meta); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background-color var(--sm-motion-fast) var(--sm-motion-ease); } .sm-search__form button[type="submit"]:hover { background: var(--sm-signal); } /* ---- Empty state. ---------------------------------------------------- */ .sm-search__empty { border-top: 3px solid var(--sm-ink); border-bottom: 1px solid var(--sm-rule); padding: var(--sm-space-5) 0; margin-bottom: var(--sm-space-6); } .sm-search__empty h2 { font-family: var(--sm-display); font-size: var(--sm-size-secondary); font-weight: 700; color: var(--sm-ink); margin: 0 0 var(--sm-space-2); } .sm-search__empty p { font-family: var(--sm-body); font-size: var(--sm-size-body); color: var(--sm-mute); margin: 0; max-width: 52ch; } /* ---- Pagination. ----------------------------------------------------- */ .sm-search__pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sm-space-2); margin: var(--sm-space-6) 0 0; padding: 0; } .sm-search__pagination a, .sm-search__pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--sm-space-3); border: 1px solid var(--sm-rule); border-radius: var(--sm-radius); font-family: var(--sm-display); font-size: var(--sm-size-meta); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sm-ink); text-decoration: none; transition: background-color var(--sm-motion-fast) var(--sm-motion-ease), border-color var(--sm-motion-fast) var(--sm-motion-ease), color var(--sm-motion-fast) var(--sm-motion-ease); } .sm-search__pagination a:hover { background: var(--sm-ink); border-color: var(--sm-ink); color: var(--sm-paper); } .sm-search__pagination .current { background: var(--sm-signal); border-color: var(--sm-signal); color: var(--sm-paper); } /* ========================================================================== 21. ARCHIVES — 7 Sep 2026 [v1.4.0] Measured on production before rewriting archive.php: /viral/ 6 sm- elements, 7 WordPress block widgets in the sidebar /author/edin/ 5 sm- elements, 7 WordPress block widgets homepage ~200 sm- elements Every one of the five nav items — All, Viral, News, Tech, Crime — lands on an archive. So the site was one designed page and five destinations that looked like a different product, each with the default WordPress Search and Recent Posts widgets in unstyled serif down the right-hand side. archive.php now renders the river, so §7 does most of the work. What follows is the archive header and the parent overrides. ========================================================================== */ /* Same trans-header masthead trap as §12a / §14f / §20 — with the parent's hero band gone there is nothing for the absolute masthead to float over, so it lands on the content. Fourth occurrence this session. */ body.archive .full-page-header, body.author .full-page-header, body.category .full-page-header, body.tag .full-page-header, body.date .full-page-header { display: none; } body.archive #masthead, body.author #masthead, body.category #masthead, body.tag #masthead, body.date #masthead { position: static !important; top: auto !important; } body.archive .jumbotron, body.author .jumbotron { padding-top: var(--sm-space-6) !important; } body.archive .section-gutter, body.author .section-gutter { padding-top: var(--sm-space-6) !important; } .sm-archive__head { margin-bottom: var(--sm-space-5); } .sm-archive__head .sm-section-head { margin-bottom: var(--sm-space-1); } .sm-archive__desc { margin-top: var(--sm-space-3); max-width: 62ch; } .sm-archive__desc p { font-family: var(--sm-body); font-size: var(--sm-size-body); line-height: 1.55; color: var(--sm-mute); margin: 0 0 var(--sm-space-2); } .sm-archive__desc p:last-child { margin-bottom: 0; } /* ========================================================================== 22. HEADING LEVELS — 7 Sep 2026 [v1.4.0] Audited the rendered heading outline on three templates. The homepage was clean. Archives jumped h1 -> h3. Cause: archive.php and search.php put the page title in an

and then went straight to the river, whose items are

because on the HOMEPAGE they sit under an

section head ("Latest"). Reusing the river markup verbatim — which is otherwise the point — carried the h3 into a context with no h2 above it. Rule now applied: a river item is an

when it follows the page

directly, and an

when a .sm-section-head

introduces the list. Both forms are styled identically here, so the level is chosen for the document outline and never for the look of it. ========================================================================== */ .sm-river__item h2 { font-weight: 700; } /* ========================================================================== 23. FOOTER LINK CONTRAST — 7 Sep 2026 [v1.4.2] Caught by looking at the rendered page rather than the markup. The footer's two link columns — Categories and Quick Links, i.e. every secondary navigation route on the site — render as dark grey on the near-black footer. Viral / News / Tech / Crime / About us / Contact us / Privacy Policy / Editorial Policy / Terms of Use are all close to invisible. Two separate faults in the same block: 1. The parent's footer link colour is far too dark for its own footer background. Measured by eye against a zoomed capture it is nowhere near WCAG AA's 4.5:1; body text at this size needs it. 2. "All" — and only "All" — renders in default browser link blue, because it is the one item the parent's footer link rule does not match. So the single readable link in the column is also the one that looks like a styling bug. This matters beyond accessibility: Privacy Policy, Editorial Policy, Terms of Use and Contact us are exactly the pages an AdSense reviewer checks for, and they were effectively hidden. --sm-footer-ink is ~11:1 on the footer ground, so it passes AA and AAA for body text, and full paper on hover keeps the affordance obvious. ========================================================================== */ :root { --sm-footer-ink: #C9CDD3; --sm-footer-ink-hover: var(--sm-paper); } /* Deliberately broad and !important. The parent sets these colours from several rules (widget, nav-menu and a colour-scheme rule that between them miss the "All" item), and matching each one individually is how this drifts back. One declaration, all footer links, no exceptions. */ .site-footer a, .footer-widget a, .footer-widget .menu a, .footer-widget ul li a, #colophon a { color: var(--sm-footer-ink) !important; text-decoration: none; transition: color var(--sm-motion-fast) var(--sm-motion-ease); } .site-footer a:hover, .site-footer a:focus-visible, .footer-widget a:hover, .footer-widget a:focus-visible, #colophon a:hover, #colophon a:focus-visible { color: var(--sm-footer-ink-hover) !important; text-decoration: underline; text-underline-offset: 3px; } /* Column headings were also sitting low against the ground. */ .footer-widget .widget-title, .footer-widget h2, .footer-widget h3 { color: var(--sm-paper); } /* The footer sets body serif on nav links while the headings use display. Links that behave like navigation get the display face, same as the masthead nav and every other nav in the system. */ .footer-widget .menu a, .footer-widget ul li a { font-family: var(--sm-display); font-size: var(--sm-size-side); font-weight: 600; letter-spacing: 0.01em; } /* ========================================================================== 24. TYPE SCALE REASSERTED OVER THE PARENT — 7 Sep 2026 [v1.7.0] The most important finding of the branding pass, and it is not a taste question — the type scale in §1 was being silently overruled on every

on the site. bootstrap.min.css ships this: h2:not(.heading):not([class^="display-"]):not(.entry-title):not(.card-…) { font-size: var(--h2-font-size, 2rem); } Four :not() pseudo-classes put that at specificity (0,5,1). Every heading rule in this file sits at (0,1,0) or (0,2,0), so the parent wins every time. Measured on production before writing this: .sm-section-head declares 1.25rem rendered 32px .sm-newsletter h2 declares 1.25rem rendered 32px .sm-verify h2 declares 1.5rem rendered 32px .sm-mostread h2 declares 1.125rem rendered 32px .sm-river__item h2 declares river rendered 32px The same class rendered at two different sizes depending on its tag: .sm-section-head is 20px as an

on archives (the parent rule targets h2 only) and 32px as an

on the homepage. One class, two sizes — the exact opposite of a design system. [REGRESSION — MINE] The last line above is worse than the others, and I introduced it in v1.4.1. Changing archive and search river items from

to

for the heading outline handed them to the parent's rule: story headlines in the list rendered at 32px while the page's own

sat at 20px. Headlines shouting louder than the page title. §22 says "Both forms are styled identically here, so the level is chosen for the document outline and never for the look of it." That was false in production. I verified the selectors matched elements and never checked that the rules won. Matching is not winning. WHY !important. The parent's specificity cannot be beaten by any sane selector — matching (0,5,1) means chaining five classes onto every heading rule. The alternative is the parent's own escape hatch, adding class "heading" to every heading, which couples this theme to a parent internal that could change in any update. !important on a deliberate, documented design-system layer is the same pattern already used in §12b for Most Read and §23 for footer links: our tokens beat parent defaults, on purpose. ========================================================================== */ /* ---- Page titles. -------------------------------------------------- * Archive and search titles are the largest thing on their page, above the * river headlines beneath them and below the homepage hero lead. They were * rendering SMALLER than the stories they introduce. */ .sm-archive__head h1.sm-section-head, h1.sm-search__head { font-size: var(--sm-size-secondary) !important; text-transform: none !important; letter-spacing: -0.005em !important; } /* ---- Section labels. ----------------------------------------------- * "Latest", "Most Read", "Top Stories in X" — the small uppercase rule-under * label, not a heading in the visual hierarchy. */ .sm-section-head, .sm-catblock > h2 { font-size: 1.25rem !important; } .sm-mostread h2 { font-size: 1.125rem !important; } /* ---- Panel headings. ------------------------------------------------ */ .sm-newsletter h2 { font-size: 1.25rem !important; } .sm-verify h2 { font-size: 1.5rem !important; } .sm-related__title { font-size: 1.25rem !important; } .sm-authorbox__name { font-size: 1.25rem !important; } /* ---- River headlines, both tags. ------------------------------------ * The v1.4.1 regression. h2 on archives and search, h3 on the homepage and * in fallback lists — identical size, as §22 always claimed. */ .sm-river__item h2, .sm-river__item h3 { font-size: var(--sm-size-river) !important; text-transform: none !important; letter-spacing: -0.005em !important; } .sm-hero h2 { font-size: var(--sm-size-lead) !important; } .sm-hero__secondary h3, .sm-hero__tertiary h3 { font-size: var(--sm-size-secondary) !important; } .sm-catblock article h3 { font-size: var(--sm-size-side) !important; } /* ---- Two sizes that were off the scale entirely. -------------------- */ :root { --sm-size-note: 0.9375rem; /* 15px — newsletter note, fine print */ } .sm-newsletter p, .sm-newsletter__note { font-size: var(--sm-size-note); } /* ---- The meta wrapper carried an inert 18px. ------------------------ * .sm-cardmeta computed to Source Serif 18px because it inherits body copy. * Its children (.sm-updated, .sm-sources, .sm-meta) each set 12px display, * so nothing was visibly wrong — but any future child added to the wrapper * would have inherited body serif at reading size. Closing the hole. */ .sm-cardmeta { font-family: var(--sm-display); font-size: var(--sm-size-meta); } /* ========================================================================== 25. SPORTS — 7 Sep 2026 [v1.7.1] The category is live at /sports/ with a description and zero posts. It is deliberately NOT in the main nav: an empty section is one of the specific things a reviewer reads as thin content, and this site has been rejected twice for exactly that. Leon's call — build it, hold the link. TO PUT IT IN THE NAV once Edin has filed two or three Sports stories: Appearance > Menus > add the Sports category to the primary menu. Nothing in this theme needs to change; the chip, the archive template and the colour are already wired. [CORRECTED] --sm-cat-sports was #C2620A, chosen in session 1 alongside the other category colours and never verified, because no Sports category existed to render it. Measured now, against the white text every chip actually uses: viral #7C3AED 5.70:1 pass news #14161A 18.11:1 pass tech #0B63CE 5.69:1 pass crime #A31621 7.80:1 pass sports #C2620A 4.16:1 FAIL — chip text is 12px, so AA wants 4.5:1 #9E5108 measures 5.78:1, which puts it in the middle of the family next to tech and viral rather than merely scraping over the line. Same failure and the same fix as --sm-verified in session 1, which was #0F8A6A at 4.32:1 and became #0C7659 at 5.60:1. ========================================================================== */ /* ========================================================================== 26. §24 SPECIFICITY COLLISION — 7 Sep 2026 [v1.7.2] Caught by probing every template at a real 390px viewport, which is something I should have done six versions ago rather than at the end. §24 set page titles to --sm-size-secondary and section labels to 1.25rem. search.php's title carries BOTH classes:

.sm-search__head and .sm-section-head are both (0,1,0), both !important, and the section-label rule comes later in the file — so it won. The search page title rendered at 20px while the archive title, which is the same kind of thing on the same kind of page, rendered at 26px. Exactly the defect §24 exists to eliminate, reintroduced inside §24 itself by a collision between my own two rules rather than with the parent's. Fixed by qualifying the page-title selector with its tag — h1.sm-search__head is (0,1,1) and beats (0,1,0) — rather than by reordering, because order dependence between two !important rules is what caused this. ========================================================================== */ /* ========================================================================== 27. THE PARENT'S AUTHOR CARD — 7 Sep 2026 [v1.8.0] [MY BUG] Found by auditing all 64 posts rather than the one I kept reopening. 62 of 64 showed an h2 -> h4 heading jump. I had already dismissed that once as "in the post body, not the theme". 62 out of 64 is not an authoring habit, it is a template. What is actually there, immediately after the Sources block on every single post: div.single-user-card.card div.user-description a.user-link h4.h5.w-100 "Edin Pula" The parent theme renders its own author card. In §14 I added smashology_author_box() at the_content priority 25 without checking whether one already existed, so every article has carried both since. And the parent's is worse than a duplicate. Its avatar area renders empty here, so what a reader sees between the sources and the real author box is a bare underlined "Edin Pula" followed by roughly 180px of blank page — which reads as something broken rather than as a byline. Hiding the parent's card rather than dropping mine: mine carries the label, the full bio and the "More from this reporter" link, and the whole point of an author box on a site whose pitch is sourced reporting is that a reader can see who stands behind the story. Hiding it also closes the heading jump, since the stray h4 goes with it. ========================================================================== */ .single-user-card { display: none !important; } /* ========================================================================== 28. ARTICLE SIDEBAR — 7 Sep 2026 [v1.9.0] MEASURED. Single posts rendered sidebar-1 with five stock WordPress block widgets — Search, Recent Posts, Recent Comments, Archives, Categories — and zero Smashology components. 380px of default WordPress furniture on the highest-traffic template on the site. "Recent Comments" and a date-based "Archives" list are two of the clearest signals of an install nobody has configured, which is not what a reviewer should find on a site already rejected twice. The homepage, archives and search were all brought onto the system earlier today; this was the last template still showing parent defaults. The container is the parent's own aside#secondary, so it already has the column width and the card padding. What is needed here is only to undo the card chrome and let .sm-sidebar behave the way it does everywhere else. ========================================================================== */ #secondary:has(.sm-sidebar--article) { background: none; border: 0; padding: 0; box-shadow: none; } .sm-sidebar--article { padding: 0; } .sm-sidebar--article .sm-mostread { margin-bottom: var(--sm-space-5); } .sm-sidebar--article .sm-newsletter { margin-top: var(--sm-space-5); } @media (max-width: 991.98px) { /* Below the article rather than beside it, and unstuck — a sticky panel in a single-column flow just pins itself to the viewport as you scroll past the story. */ .sm-sidebar--article .sm-sticky { position: static; } .sm-sidebar--article { margin-top: var(--sm-space-7); } } /* ---- The sticky ad, on articles. ----------------------------------- * [CORRECTED — my gap, introduced with this sidebar in v1.9.0] * * §7 sticks slot C and only slot C, for the reason documented there: the * column is taller than the viewport, so sticking the whole wrapper pins its * top edge once and then just scrolls. But that rule is written * `.sm-main .sm-ad--c`, and this sidebar lives in the PARENT's #secondary, * not inside .sm-main. So on articles the slot computed `static` — it would * have scrolled away on exactly the pages where a sticky rail earns its * keep, since articles here run 10,000px+. * * Two things had to change, both measured rather than assumed: * * 1. The selector, so the rule reaches this sidebar at all. * 2. #secondary itself. It carries overflow:hidden AND sat at 869px while * its column was 10,831px, so even once sticky applied the travel was * clipped to a fraction of the article. min-height:100% lets it fill * the column — tested against height:100% and a flex restructure, all * three reached 10,831px, and min-height is the least invasive. * * NOTE the overflow:hidden here is NOT the same situation as the one on * main.site-content, which also has it and which the homepage's sticky slot * survives quite happily. An ancestor with overflow:hidden only breaks * sticky when it is also height-constrained; .site-content is not, and * #secondary was. * * Desktop only. Below 992px the column stacks and min-height:100% would * stretch an empty box down the page. */ @media (min-width: 992px) { #secondary:has(.sm-sidebar--article) { overflow: visible; min-height: 100%; } .sm-sidebar--article .sm-ad--c { position: sticky; top: 88px; } } /* ========================================================================== 29. PRODUCT FOUNDATION + CONTROLLED INVENTORY — 8 Sep 2026 [v1.10.0] ========================================================================== */ /* Five utility links fit inside the narrowest audited viewport without clipping either edge. The 44px vertical target from §19 remains intact. */ @media (max-width: 767.98px) { .sm-utility__inner { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; padding-inline: 8px; } .sm-utility__links { width: 100%; min-width: 0; justify-content: space-between; gap: 8px; } .sm-utility__links a { min-width: 0; font-size: 0.6875rem; letter-spacing: 0.04em; } } /* Links already use --sm-footer-ink. These declarations raise the prose and copyright from #777 (4.04:1) to #AEB3BA on the #14161A footer. */ #colophon .sm-footer-about, #colophon .sm-footer-about p, #colophon .textwidget, #colophon .textwidget p, #footer-bottom, #footer-bottom p { color: #AEB3BA; } /* Reader control for the five-item headline rotation. */ .sm-breaking__toggle { flex: 0 0 auto; min-width: 44px; min-height: 44px; margin: -9px 0 -9px 12px; padding: 0 10px; border: 0; border-left: 1px solid rgba(255,255,255,.35); background: transparent; color: var(--sm-paper); font-family: var(--sm-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } .sm-breaking__toggle:hover, .sm-breaking__toggle:focus-visible { background: rgba(0,0,0,.12); } .sm-breaking.is-paused .sm-breaking__item { animation: none !important; opacity: 0; } .sm-breaking.is-paused .sm-breaking__item:first-child { opacity: 1; } @media (max-width: 575.98px) { .sm-breaking__label { padding-right: 8px; margin-right: 8px; } .sm-breaking__toggle { width: 44px; margin-left: 6px; padding: 0; font-size: 0; } .sm-breaking__toggle::before { content: "Ⅱ"; font-size: 0.875rem; letter-spacing: 0; } .sm-breaking.is-paused .sm-breaking__toggle::before { content: "▶"; } } /* Context-specific inventory behavior. Nodes do not exist while disabled. */ .sm-ad--desktop-only { display: block; } .sm-catblocks > .sm-ad--home-e { grid-column: 1 / -1; width: 100%; } @media (max-width: 991.98px) { .sm-ad--desktop-only { display: none; } } @media (max-width: 767.98px) { .sm-ad--home-e { min-height: 100px; } } /* ========================================================================== 24. READER DISCUSSION [v1.11.0] ========================================================================== */ .sm-comments, #comments.comments-area { margin: clamp(34px, 6vw, 70px) 0 0; padding: clamp(24px, 4vw, 42px); border-top: 6px solid var(--sm-ink); background: #f7f8f9; } #comments.comments-area.card { border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; } #comments .wb-comment-form { width: 100%; padding: 0; } .sm-comments__head { max-width: 720px; margin-bottom: 28px; } .sm-comments__eyebrow { margin: 0 0 5px; color: var(--sm-signal); font-family: var(--sm-display); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .sm-comments__head h2, .sm-comments__form h3 { margin: 0 0 8px; color: var(--sm-ink); } .sm-comments__head p:last-child, .sm-comment-note { color: var(--sm-mute); } .sm-comments__list, #comments .comment-list { padding: 0; margin: 0 0 32px; list-style: none; } .sm-comments__list .comment, #comments .comment-list .comment { padding: 20px 0; border-bottom: 1px solid var(--sm-rule); list-style: none; } .sm-comments__list .children, #comments .children { margin: 18px 0 0 clamp(16px, 4vw, 42px); padding-left: 18px; border-left: 3px solid var(--sm-rule); } .sm-comments__list .comment-meta, #comments .comment-meta { font-size: 0.8125rem; color: var(--sm-mute); } .sm-comments__list .comment-author, #comments .comment-author { display: flex; align-items: center; gap: 10px; font-family: var(--sm-display); font-weight: 800; } .sm-comments__list .avatar, #comments .avatar { width: 48px; height: 48px; border-radius: 50%; } .sm-comments__list .comment-content, #comments .comment-content { margin-top: 12px; font-size: 1rem; line-height: 1.65; } .sm-comments__list .reply a, #comments .reply a { font-family: var(--sm-display); font-size: 0.8125rem; font-weight: 800; color: var(--sm-signal); } .sm-comment-form, #comments .comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } #comments .comment-respond { width: 100%; max-width: 720px; } #comments .comment-form { width: 100%; margin-right: 0; margin-left: 0; } .sm-comment-form > *, #comments .comment-form > * { margin: 0; } .sm-comment-form .comment-reply-title, .sm-comment-form .sm-comment-note, .sm-comment-form .comment-form-comment, .sm-comment-form .comment-form-cookies-consent, .sm-comment-form .form-submit, .sm-comment-form .logged-in-as, #comments .comment-form-comment, #comments .comment-form-textarea, #comments .comment-form-cookies-consent, #comments .form-submit, #comments .logged-in-as, #comments .sm-comment-guidance { grid-column: 1 / -1; } .sm-comment-form label, #comments label { display: block; margin-bottom: 7px; font-family: var(--sm-display); font-size: 0.875rem; font-weight: 800; } .sm-comment-form input[type="text"], .sm-comment-form input[type="email"], .sm-comment-form textarea, #comments input[type="text"], #comments input[type="email"], #comments textarea { width: 100%; padding: 12px 13px; border: 1px solid #c8ccd1; border-radius: 3px; background: #fff; color: var(--sm-ink); font: inherit; } .sm-comment-form textarea, #comments textarea { min-height: 170px; resize: vertical; } .sm-comment-submit { padding: 12px 18px; border: 0; border-radius: 3px; background: var(--sm-signal); color: #fff; font-family: var(--sm-display); font-weight: 800; cursor: pointer; } .sm-comment-submit:hover { background: var(--sm-signal-dark); } #comments .comment-submit-btn { border: 0; border-radius: 3px; background: var(--sm-signal); font-family: var(--sm-display); font-weight: 800; } #comments .comment-form-url { display: none; } #comments .sm-comment-guidance { padding: 10px 12px; border-left: 4px solid var(--sm-signal); background: #fff; color: var(--sm-mute); } @media (max-width: 575.98px) { .sm-comments, #comments.comments-area { padding: 22px 18px; } .sm-comment-form, #comments .comment-form { grid-template-columns: 1fr; } .sm-comment-form > *, #comments .comment-form > * { grid-column: 1 !important; } } /* ========================================================================== 25. EDITORIAL TYPE, DISCUSSION + CONSENT [v1.12.0] ========================================================================== */ /* * Archivo gives the story layer the broad, heavy tabloid proportion in the * selected reference without imitating another publisher's masthead. The * slab is reserved for named franchises and community modules, keeping the * hierarchy intentional instead of turning the entire site into display type. */ .single-post .page-header-content { max-width: 1060px; margin-inline: auto; text-align: left !important; } .single-post .page-header-content > h1 { max-width: 20ch; margin: 12px 0 18px; font-family: var(--sm-display) !important; font-size: clamp(2.65rem, 5.2vw, 4.75rem) !important; font-weight: 900 !important; line-height: 0.98 !important; letter-spacing: -0.052em !important; text-wrap: balance; } .single-post .page-header-content .entry-meta { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; width: 100%; color: var(--sm-mute); font-family: var(--sm-display); font-weight: 600; } .sm-comment-jump { display: inline-flex; align-items: center; min-height: 40px; margin-left: auto; padding: 8px 16px; border: 2px solid var(--sm-signal); border-radius: 999px; color: var(--sm-signal) !important; font-family: var(--sm-display); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.025em; text-decoration: none !important; } .sm-comment-jump::before { content: ""; width: 12px; height: 9px; margin-right: 8px; border: 2px solid currentColor; border-radius: 2px; } .sm-comment-jump:hover, .sm-comment-jump:focus-visible { background: var(--sm-signal); color: #fff !important; } .sm-comment-count { display: inline-flex; align-items: center; gap: 6px; color: var(--sm-signal) !important; font-family: var(--sm-display); font-weight: 800; text-decoration: none !important; } .sm-comment-count::before { content: ""; width: 10px; height: 8px; border: 2px solid currentColor; border-radius: 2px; } .sm-featured__rail > h2, .sm-catblock > h2 { font-family: var(--sm-slab) !important; font-size: clamp(1.45rem, 2.4vw, 1.9rem) !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: -0.045em !important; text-transform: none !important; } .sm-discussed { margin-top: 24px; padding: 20px; border: 1px solid var(--sm-rule); border-top: 6px solid var(--sm-signal); background: var(--sm-paper); } .sm-discussed__head { margin-bottom: 2px; } .sm-discussed__head p { margin: 0 0 7px; color: var(--sm-signal); font-family: var(--sm-display); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } .sm-discussed__head h2 { margin: 0 0 10px; font-family: var(--sm-slab) !important; font-size: clamp(1.75rem, 3vw, 2.3rem) !important; font-weight: 900 !important; line-height: 0.98 !important; letter-spacing: -0.05em !important; text-transform: none !important; } .sm-discussed ol { margin: 0; padding: 0; list-style: none; } .sm-discussed li::before { display: none !important; content: none !important; } .sm-discussed li { padding: 15px 0; border-top: 1px solid var(--sm-rule); } .sm-discussed__story { display: block; color: var(--sm-ink) !important; font-family: var(--sm-display); font-size: 1rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; text-decoration: none !important; } .sm-discussed__story:hover, .sm-discussed__story:focus-visible { color: var(--sm-signal) !important; } .sm-discussed__count { display: inline-block; margin-top: 7px; color: var(--sm-signal) !important; font-family: var(--sm-display); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.035em; text-decoration: none !important; text-transform: uppercase; } /* Complianz: newspaper styling, clear equal-access choices and 44px targets. */ .cmplz-cookiebanner { border: 1px solid var(--sm-rule) !important; border-top: 6px solid var(--sm-signal) !important; border-radius: 0 !important; background: #fff !important; box-shadow: 0 -8px 34px rgba(20, 22, 26, 0.16) !important; color: var(--sm-ink) !important; font-family: var(--sm-body) !important; } .cmplz-cookiebanner .cmplz-title { color: var(--sm-ink) !important; font-family: var(--sm-display) !important; font-size: 1.3rem !important; font-weight: 900 !important; letter-spacing: -0.025em !important; } .cmplz-cookiebanner .cmplz-btn { min-height: 44px !important; border: 2px solid var(--sm-ink) !important; border-radius: 0 !important; font-family: var(--sm-display) !important; font-weight: 800 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } .cmplz-cookiebanner .cmplz-btn.cmplz-accept { border-color: var(--sm-signal) !important; background: var(--sm-signal) !important; color: #fff !important; } .cmplz-cookiebanner .cmplz-btn.cmplz-deny { border-color: var(--sm-ink) !important; background: var(--sm-ink) !important; color: #fff !important; } .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences { background: #fff !important; color: var(--sm-ink) !important; } .cmplz-cookiebanner .cmplz-link { color: var(--sm-signal) !important; } @media (max-width: 767.98px) { .sm-utility__date, .sm-utility__verify { display: none !important; } #masthead .site-branding-text { display: none !important; } #masthead .site-branding-content { width: 100%; max-width: 100%; } #masthead .custom-logo { width: auto; max-height: 44px; } .single-post .page-header-content > h1 { font-size: clamp(2.25rem, 10.5vw, 3.2rem) !important; line-height: 1 !important; } .single-post .page-header-content .entry-meta { align-items: flex-start; } .sm-comment-jump { width: 100%; margin: 7px 0 0; justify-content: center; } .sm-discussed { padding: 18px; } } @media (prefers-reduced-motion: reduce) { .sm-carousel__slide { animation: none; } } /* ========================================================================== 26. RED-TOP EDITORIAL SYSTEM [v1.13.0] The reference audit showed that its authority comes from hierarchy rather than from a single font: one unmistakable masthead, one category rail, condensed headline rhythm, uppercase kickers and strong horizontal rules. These rules translate that system into Smashology's existing red, wordmark and sourcing language without reproducing another publisher's identity. ========================================================================== */ /* Interface text is compact sans; serif is reserved for article reading. */ body { font-family: var(--sm-ui); font-size: 1rem; line-height: 1.5; } .single-post .entry-content, .single-post .entry-content p, .single-post .entry-content li, .page .entry-content, .page .entry-content p, .page .entry-content li { font-family: var(--sm-body); } .single-post .entry-content h2, .single-post .entry-content h3, .single-post .entry-content h4, .page .entry-content h2, .page .entry-content h3, .page .entry-content h4 { font-family: var(--sm-display); font-weight: 900; line-height: 1.02; letter-spacing: -0.025em; } /* The slim black trust bar no longer repeats the full desktop navigation. */ @media (min-width: 992px) { .sm-utility__links { display: none; } .sm-utility__inner { min-height: 31px; } } /* One strong, unmistakable publication masthead. */ #masthead, body.home #masthead, body.search #masthead, body.archive #masthead, body.author #masthead, body.category #masthead, body.tag #masthead, body.date #masthead, body:has(.full-page-header[style*="background-image"]) #masthead { position: relative !important; top: auto !important; z-index: var(--sm-z-masthead, 40); border: 0 !important; border-bottom: 4px solid var(--sm-signal-dark) !important; background: var(--sm-signal) !important; box-shadow: none !important; } #masthead #site-navigation { min-height: 88px; padding-block: 10px !important; } #masthead #site-navigation > .container-fluid { width: 100%; max-width: var(--sm-max); margin-inline: auto; padding-inline: var(--sm-gutter) !important; } #masthead .site-branding-content { padding-right: clamp(22px, 4vw, 58px) !important; } #masthead .site-branding-text { display: none !important; } #masthead .custom-logo-link { display: block; line-height: 0; } #masthead .custom-logo { width: auto; height: auto; max-width: min(270px, 32vw); max-height: 66px; } #masthead .primary-menu-wrapper { align-items: center; } #masthead .navbar-nav { align-items: stretch; gap: clamp(4px, 1vw, 16px); } #masthead .nav-item { display: flex; align-items: stretch; } #masthead .nav-link, body:has(.full-page-header[style*="background-image"]) #masthead .nav-link { position: relative; display: flex; min-height: 48px; align-items: center; padding: 8px 10px !important; color: #fff !important; font-family: var(--sm-display); font-size: 1.0625rem; font-weight: 800; line-height: 1; letter-spacing: -0.01em; text-transform: none; text-decoration: none; } #masthead .nav-link::after { content: ""; position: absolute; right: 10px; bottom: 2px; left: 10px; height: 4px; background: transparent; } #masthead .nav-link:hover, #masthead .nav-link:focus-visible, #masthead .current-menu-item > .nav-link, #masthead .current-menu-ancestor > .nav-link, #masthead .current-menu-parent > .nav-link, body:has(.full-page-header[style*="background-image"]) #masthead .nav-link:hover, body:has(.full-page-header[style*="background-image"]) #masthead .nav-link:focus { color: #fff !important; background: var(--sm-signal-dark); } #masthead .nav-link:hover::after, #masthead .nav-link:focus-visible::after, #masthead .current-menu-item > .nav-link::after, #masthead .current-menu-ancestor > .nav-link::after, #masthead .current-menu-parent > .nav-link::after { background: #fff; } #masthead .btn-search { min-width: 44px; min-height: 44px; border: 0; background: transparent; } #masthead .btn-search img { filter: brightness(0) invert(1) !important; } #masthead .navbar-toggler { min-width: 46px; min-height: 46px; border: 2px solid rgba(255,255,255,0.75) !important; background: transparent !important; } #masthead .navbar-toggler-icon { filter: invert(1) !important; } /* A black latest rail separates the masthead from the news canvas. */ .sm-breaking { padding: 10px 0; background: var(--sm-ink); } .sm-breaking__label { color: #fff; border-right-color: var(--sm-signal); } .sm-breaking__label::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--sm-signal); } .sm-breaking__item { font-size: 1rem; font-weight: 700; } /* Headlines use the reference's compressed, high-contrast rhythm. */ .sm-carousel__copy h2, .single-post .page-header-content > h1 { font-family: var(--sm-display) !important; font-weight: 900 !important; line-height: 0.93 !important; letter-spacing: -0.04em !important; } .sm-carousel__copy h2 { max-width: 16ch; font-size: clamp(2.35rem, 4.8vw, 4.65rem) !important; } .sm-featured__rail > h2, .sm-section-head, .sm-catblock > h2, .sm-mostread h2, .sm-discussed__head h2 { font-family: var(--sm-display) !important; font-weight: 900 !important; line-height: 0.95 !important; letter-spacing: -0.025em !important; } .sm-featured__rail > h2, .sm-section-head, .sm-catblock > h2 { display: flex; align-items: center; gap: 12px; padding-bottom: 9px; border-bottom: 0; font-size: clamp(1.65rem, 2.5vw, 2.2rem) !important; text-transform: uppercase !important; } .sm-featured__rail > h2::after, .sm-section-head::after, .sm-catblock > h2::after { content: ""; flex: 1; min-width: 30px; height: 4px; background: var(--sm-ink); } .sm-featured__rail h3, .sm-river__item h2, .sm-river__item h3, .sm-catblock article h3, .sm-mostread li a, .sm-discussed__story { font-family: var(--sm-display) !important; font-weight: 800 !important; line-height: 1.02 !important; letter-spacing: -0.022em !important; } .sm-featured__rail h3 { font-size: 1.45rem !important; } .sm-river__item h2, .sm-river__item h3 { font-size: 1.45rem !important; } .sm-chip, .sm-label, .sm-meta, .sm-cardmeta, .sm-comment-count, .sm-sources, .sm-updated { font-family: var(--sm-display) !important; font-weight: 800; } .sm-chip, .sm-label { font-size: 0.78rem; letter-spacing: 0.055em; } .sm-river__item { padding-block: 22px; border-bottom: 2px solid var(--sm-rule); } .sm-featured { border-bottom-width: 3px; } @media (max-width: 991.98px) { #masthead #site-navigation { min-height: 72px; } #masthead .custom-logo { max-width: min(250px, 55vw); max-height: 54px; } #masthead .primary-menu-wrapper { width: 100%; } #masthead #primary-menu-wrapper { width: 100%; margin-top: 10px; border-top: 1px solid rgba(255,255,255,0.35); } #masthead .navbar-nav { align-items: stretch; gap: 0; } #masthead .nav-item { display: block; } #masthead .nav-link { min-height: 46px; padding-inline: 12px !important; } } @media (max-width: 767.98px) { .sm-utility { overflow-x: auto; scrollbar-width: none; } .sm-utility::-webkit-scrollbar { display: none; } .sm-utility__inner { min-width: max-content; justify-content: flex-start; } .sm-utility__links { gap: 4px; } .sm-utility__links a { padding: 7px 9px; font-size: 0.8125rem; } #masthead #site-navigation > .container-fluid { padding-inline: 14px !important; } #masthead .site-branding-content { padding-right: 0 !important; } #masthead .custom-logo { max-width: min(230px, 62vw); max-height: 48px; } .sm-carousel__copy h2 { font-size: clamp(2rem, 10vw, 3.05rem) !important; } .sm-featured__rail > h2, .sm-section-head, .sm-catblock > h2 { font-size: 1.7rem !important; } .sm-river__item h2, .sm-river__item h3 { font-size: 1.18rem !important; } }