/* Theme Name: Gearhead Daily Child Theme URI: https://gearheaddaily.com/ Description: Performance-, SEO-, and UX-optimized child theme for Newspaper (tagDiv). Custom schema, deferred JS, image hardening, typography polish, and AdSense placement helpers for an automotive news publication. Author: Gearhead Daily / Jared Balfour Author URI: https://gearheaddaily.com/ Template: Newspaper Version: 0.3.2 License: Proprietary Text Domain: gearhead-child Tags: news, automotive, newspaper-child, performance, seo */ /* --------------------------------------------------------------------------- * Design tokens * --------------------------------------------------------------------------- * Single source of truth for spacing, type scale, and color so the rest of * the CSS reads as semantic intent rather than magic numbers. Override the * tokens here and the dependent styles update everywhere. */ /* Scope the design tokens to the front-end so they don't bleed * into the WP admin / block editor color systems. The block editor uses * --wp--preset--color--* tokens that share root namespace; we don't want * any of our ghd-* tokens to interact with WP's editor presets. */ body { /* Type scale (perfect fourth: 1.333) */ --ghd-text-xs: 0.75rem; /* 12px — captions, meta */ --ghd-text-sm: 0.875rem; /* 14px — secondary UI */ --ghd-text-base: 1.0625rem; /* 17px — body copy, slightly larger than WP default for readability */ --ghd-text-md: 1.25rem; /* 20px — lede */ --ghd-text-lg: 1.5rem; /* 24px — H3 */ --ghd-text-xl: 2rem; /* 32px — H2 */ --ghd-text-2xl: 2.625rem; /* 42px — H1 desktop */ /* Line heights — generous for long-form reading */ --ghd-lh-tight: 1.2; --ghd-lh-snug: 1.35; --ghd-lh-base: 1.65; --ghd-lh-loose: 1.8; /* Spacing rhythm (0.5rem base = 8px grid) */ --ghd-space-1: 0.25rem; --ghd-space-2: 0.5rem; --ghd-space-3: 0.75rem; --ghd-space-4: 1rem; --ghd-space-6: 1.5rem; --ghd-space-8: 2rem; --ghd-space-12: 3rem; --ghd-space-16: 4rem; /* Color — restrained palette. Brand accents live in Newspaper's own vars, * which we don't touch so theme updates don't surprise us. */ --ghd-ink: #1a1a1a; /* body text */ --ghd-ink-muted: #525252; /* meta */ --ghd-paper: #ffffff; --ghd-rule: #e5e5e5; /* hairlines */ --ghd-link: #b91c1c; /* automotive red, lower-saturation than default */ --ghd-link-hover: #7f1d1d; /* Reading column max-width — research consensus: 60-75 chars per line. * 38rem at 17px ≈ 65 chars. Wider feels like a wall of text. */ --ghd-prose-max: 38rem; } /* --------------------------------------------------------------------------- * Body copy — readability tuning * --------------------------------------------------------------------------- * Newspaper ships 14px Open Sans by default. Bumping to 17px with looser * line-height materially improves comprehension scores on long-form, per * Nielsen Norman. Counts as a UX improvement on every article page. */ .td-post-content, .tdb-block-inner.td-fix-index { font-size: var(--ghd-text-base); line-height: var(--ghd-lh-base); color: var(--ghd-ink); } .td-post-content p { margin-bottom: var(--ghd-space-6); } /* Article body paragraphs sit on a comfortable reading measure. We DON'T * narrow the gallery or featured image — those want full container width. */ .td-post-content > p, .td-post-content > h2, .td-post-content > h3, .td-post-content > ul, .td-post-content > ol, .td-post-content > blockquote { max-width: var(--ghd-prose-max); margin-left: auto; margin-right: auto; } /* --------------------------------------------------------------------------- * Headings — heavier weight, tighter tracking, semantic hierarchy * --------------------------------------------------------------------------- */ .td-post-content h1, .td-post-content h2, .td-post-content h3 { line-height: var(--ghd-lh-snug); letter-spacing: -0.01em; color: var(--ghd-ink); margin-top: var(--ghd-space-12); margin-bottom: var(--ghd-space-4); } .td-post-content h2 { font-size: var(--ghd-text-xl); font-weight: 700; /* Visual separator from the prose above; signals new section. */ border-bottom: 1px solid var(--ghd-rule); padding-bottom: var(--ghd-space-2); } .td-post-content h3 { font-size: var(--ghd-text-lg); font-weight: 600; } /* Post-page H1 (the article headline). Larger on desktop. */ .tdb-title-text, .td-post-title .entry-title { font-size: var(--ghd-text-xl); font-weight: 700; line-height: var(--ghd-lh-tight); letter-spacing: -0.015em; } @media (min-width: 768px) { .tdb-title-text, .td-post-title .entry-title { font-size: var(--ghd-text-2xl); } } /* --------------------------------------------------------------------------- * Links — automotive-press style: red, underlined only on hover * --------------------------------------------------------------------------- */ .td-post-content a, .td-post-content a:visited { color: var(--ghd-link); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 120ms ease, color 120ms ease; } .td-post-content a:hover, .td-post-content a:focus-visible { color: var(--ghd-link-hover); border-bottom-color: currentColor; } /* --------------------------------------------------------------------------- * Images inside post content * --------------------------------------------------------------------------- * Newspaper's stock image styling is fine but we want: subtle radius, no * blue-link border on linked galleries, and consistent figure spacing. */ .td-post-content figure, .td-post-content .wp-block-image { margin: var(--ghd-space-8) 0; } .td-post-content figure img, .td-post-content .wp-block-image img { border-radius: 4px; /* Prevent CLS — actual width/height are set as attrs by the generator, * this just makes sure they're respected in the layout. */ height: auto; } .td-post-content figcaption { font-size: var(--ghd-text-sm); color: var(--ghd-ink-muted); margin-top: var(--ghd-space-2); text-align: center; font-style: italic; } /* Featured image: full-width, slight letterboxing visible if it doesn't match * the 16:9 we crop to in src/images.py. */ .tdb-block-inner > .td-image-wrap img, .td-post-featured-image img { width: 100%; height: auto; border-radius: 4px; } /* --------------------------------------------------------------------------- * Photo Gallery section * --------------------------------------------------------------------------- * The Python pipeline appends an H2 + Jetpack slideshow (or native gallery * fallback) at the bottom of model_reveal / feature_launch articles. Style * the heading so it reads as a section break, not yet-another-H2 lost in * the article flow. */ .td-post-content > h2:last-of-type { /* Visual cue for the photo-gallery heading at the end of the post. */ margin-top: var(--ghd-space-16); } /* Jetpack slideshow polish — slightly more padding around controls, * round corners to match the rest of the article. */ .wp-block-jetpack-slideshow { margin: var(--ghd-space-8) 0; border-radius: 8px; overflow: hidden; } /* Native gallery fallback (when Jetpack isn't installed) — 3 column grid * with consistent gaps. */ .wp-block-gallery { gap: var(--ghd-space-3) !important; margin: var(--ghd-space-8) 0; } .wp-block-gallery .wp-block-image { margin: 0; } /* --------------------------------------------------------------------------- * Article source attribution footer * --------------------------------------------------------------------------- * The Python publisher always appends: *

Source: .... Images courtesy of ...

* Style it as a quiet credit line, not body copy. */ .td-post-content .article-source { font-size: var(--ghd-text-sm); color: var(--ghd-ink-muted); margin-top: var(--ghd-space-12); padding-top: var(--ghd-space-4); border-top: 1px solid var(--ghd-rule); font-style: italic; } .td-post-content .article-source a { color: var(--ghd-ink-muted); border-bottom: 1px solid var(--ghd-rule); } /* --------------------------------------------------------------------------- * AdSense slots * --------------------------------------------------------------------------- * Newspaper inserts AdSense at multiple positions per article. Reserve * vertical space ahead of the JS-driven render so the ad load doesn't push * content around (CLS killer). The placeholder height is the most common * AdSense responsive serving height (≥250px). */ .adsbygoogle, .td-a-rec, .tdc-ad-place { min-height: 250px; display: block; margin: var(--ghd-space-8) auto; } /* Reduce ad density on small screens where they crowd out content. */ @media (max-width: 600px) { .td-post-content .adsbygoogle:nth-of-type(n+3) { display: none; } } /* --------------------------------------------------------------------------- * Header & navigation cleanup * --------------------------------------------------------------------------- * Newspaper's stock header is busy. Tighten spacing, fix the inevitable * top-bar height creep on mobile. */ .td-header-wrap .td-header-menu-wrap-full { border-bottom: 1px solid var(--ghd-rule); } /* --------------------------------------------------------------------------- * Focus styles — accessibility * --------------------------------------------------------------------------- * Visible focus ring on keyboard nav. Newspaper hides this by default. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ghd-link); outline-offset: 2px; } /* =========================================================================== * BRAND GRID — homepage shortcode [ghd_brand_grid] * =========================================================================== * Responsive grid of brand "cards". Each card carries a hero photo, the * brand name as a clickable heading, and a short list of recent articles. * Columns scale: 4-up desktop → 3-up tablet → 2-up phone → 1-up tiny. */ .ghd-brand-grid { display: grid; /* --ghd-grid-columns is set inline by the shortcode handler */ grid-template-columns: repeat(var(--ghd-grid-columns, 3), 1fr); gap: var(--ghd-space-6); margin: var(--ghd-space-8) 0; } @media (max-width: 1100px) { .ghd-brand-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .ghd-brand-grid { grid-template-columns: 1fr; } } .ghd-brand-card { background: var(--ghd-paper); border: 1px solid var(--ghd-rule); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 120ms ease, transform 120ms ease; } .ghd-brand-card:hover { border-color: var(--ghd-link); } .ghd-brand-card__head { display: flex; align-items: baseline; justify-content: space-between; padding: var(--ghd-space-3) var(--ghd-space-4); border-bottom: 1px solid var(--ghd-rule); gap: var(--ghd-space-2); } .ghd-brand-card__title { margin: 0; font-size: var(--ghd-text-lg); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; } .ghd-brand-card__title a { color: var(--ghd-ink); text-decoration: none; } .ghd-brand-card__title a:hover { color: var(--ghd-link); } .ghd-brand-card__count { font-size: var(--ghd-text-xs); color: var(--ghd-ink-muted); text-decoration: none; white-space: nowrap; } .ghd-brand-card__count:hover { color: var(--ghd-link); } .ghd-brand-card__hero { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ghd-rule); } .ghd-brand-card__hero img { width: 100%; height: 100%; object-fit: cover; transition: transform 240ms ease; } .ghd-brand-card__hero:hover img { transform: scale(1.03); } .ghd-brand-card__list { list-style: none; margin: 0; padding: var(--ghd-space-3) var(--ghd-space-4); flex: 1; } .ghd-brand-card__item { padding: var(--ghd-space-2) 0; border-bottom: 1px solid var(--ghd-rule); font-size: var(--ghd-text-sm); line-height: var(--ghd-lh-snug); } .ghd-brand-card__item:last-child { border-bottom: none; } .ghd-brand-card__item--hero .ghd-brand-card__link { font-weight: 600; font-size: var(--ghd-text-base); } .ghd-brand-card__link { color: var(--ghd-ink); text-decoration: none; display: block; } .ghd-brand-card__link:hover { color: var(--ghd-link); } .ghd-brand-card__time { display: block; font-size: var(--ghd-text-xs); color: var(--ghd-ink-muted); margin-top: var(--ghd-space-1); } /* =========================================================================== * RELATED-BY-BRAND box — single-post bottom widget * =========================================================================== */ .ghd-related-brand { margin: var(--ghd-space-16) 0 var(--ghd-space-8); padding: var(--ghd-space-6) 0; border-top: 2px solid var(--ghd-ink); border-bottom: 1px solid var(--ghd-rule); } .ghd-related-brand__heading { font-size: var(--ghd-text-xl); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 var(--ghd-space-6); color: var(--ghd-ink); } .ghd-related-brand__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ghd-space-4); } @media (max-width: 900px) { .ghd-related-brand__list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .ghd-related-brand__list { grid-template-columns: 1fr; } } .ghd-related-brand__item { display: flex; flex-direction: column; } .ghd-related-brand__link { color: var(--ghd-ink); text-decoration: none; display: block; } .ghd-related-brand__link:hover .ghd-related-brand__title { color: var(--ghd-link); } .ghd-related-brand__thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; margin-bottom: var(--ghd-space-2); background: var(--ghd-rule); } .ghd-related-brand__title { font-size: var(--ghd-text-sm); line-height: var(--ghd-lh-snug); font-weight: 600; display: block; } .ghd-related-brand__time { margin-top: var(--ghd-space-1); font-size: var(--ghd-text-xs); color: var(--ghd-ink-muted); } /* =========================================================================== * INTERNAL LINK styling — first-mention brand autolinks * =========================================================================== * Differentiate autolinks visually from outbound source links: dotted * underline + ink color (instead of accent red). Keeps the prose calm. */ .td-post-content a.ghd-internal-link { color: var(--ghd-ink); border-bottom: 1px dotted var(--ghd-ink-muted); } .td-post-content a.ghd-internal-link:hover, .td-post-content a.ghd-internal-link:focus-visible { color: var(--ghd-link); border-bottom-color: var(--ghd-link); } /* =========================================================================== * AD SLOT placeholders ([ghd_ad] before slot IDs are configured) * =========================================================================== */ .ghd-ad, .ghd-ad-placeholder { margin: var(--ghd-space-8) auto; min-height: 250px; display: flex; align-items: center; justify-content: center; text-align: center; } .ghd-ad-placeholder { border: 2px dashed var(--ghd-rule); background: #fafafa; color: var(--ghd-ink-muted); font-size: var(--ghd-text-sm); font-style: italic; /* Only show the placeholder when explicitly debugging — comment out * the line below to surface it on every page during dev. */ display: none; } /* When the operator wants to inspect ad placements during layout * tuning, add the class on via wp_body_open or just toggle the * stylesheet rule: */ body.ghd-debug-ads .ghd-ad-placeholder { display: flex; } /* =========================================================================== * Editor iframe overrides (TinyMCE Classic + Gutenberg block editor) * =========================================================================== * The Newspaper parent theme calls add_editor_style('style.css'), which * WordPress resolves against the CHILD theme when one is active. That * pulls THIS stylesheet into the TinyMCE iframe (Classic Editor) and the * Gutenberg block-list wrapper, where our front-end color and layout * rules collide with the editor's own cascade — most visibly, text was * rendering white in v0.3 because of how the editor's internal CSS * variables resolved against our :root tokens. * * Force the editor body + child text elements back to readable defaults * when any of WP's editor body classes is present. Uses !important * because we're competing with editor-internal styles that load after us. */ body.mce-content-body, body.editor-styles-wrapper, .mce-content-body, .editor-styles-wrapper { background-color: #ffffff !important; color: #1a1a1a !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } .mce-content-body p, .mce-content-body h1, .mce-content-body h2, .mce-content-body h3, .mce-content-body h4, .mce-content-body h5, .mce-content-body h6, .mce-content-body li, .mce-content-body blockquote, .mce-content-body td, .mce-content-body th, .mce-content-body span, .editor-styles-wrapper p, .editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3, .editor-styles-wrapper h4, .editor-styles-wrapper h5, .editor-styles-wrapper h6, .editor-styles-wrapper li, .editor-styles-wrapper blockquote { color: #1a1a1a !important; } .mce-content-body a, .editor-styles-wrapper a { color: #b91c1c !important; } /* --------------------------------------------------------------------------- * Print styles — produces a clean PDF when readers print/save articles * --------------------------------------------------------------------------- */ @media print { .td-header-wrap, .td-footer-wrapper, .td-sub-footer-container, .adsbygoogle, .td-a-rec, .wp-block-jetpack-slideshow, .wp-block-gallery, .ghd-related-brand, .ghd-brand-grid, .ghd-ad, .ghd-ad-placeholder, .related-posts { display: none !important; } .td-post-content { max-width: 100%; font-size: 11pt; line-height: 1.5; color: #000; } .td-post-content a { color: #000; text-decoration: underline; } /* Show outbound URLs in print so the reader can follow up. */ .td-post-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } }