/* * Single-article redesign. Scoped entirely to markup rendered by * inc/single-article.php / template-parts/single-*.php - none of this * touches the homepage (its own CSS files are untouched). * * Accent color is the brand red requested for this redesign, #E11B22 - * intentionally not reusing the site's existing #dd0000/#ea1717 reds used * elsewhere, since this redesign specifies that exact value. * * Existing blocks left in place (breadcrumbs, comments, next/prev) are * restyled here too, scoped under .ah-article-wrap-page (a class added to * is not used - instead each is targeted by its own stable TDC * class, e.g. .tdb-breadcrumbs, .tdb_single_comments) so this file is the * single source of single-article visual design. */ :root { --ah-accent: #E11B22; --ah-accent-dark: #b3141a; --ah-ink: #111111; --ah-body-text: #333333; --ah-muted: #6b6b6b; --ah-border: #ececec; --ah-radius: 0; --ah-radius-sm: 0; --ah-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); --ah-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.14); } /* ================= Breadcrumbs ================= */ .tdb-breadcrumbs { font-size: 13px !important; color: var(--ah-muted) !important; } .tdb-breadcrumbs a { color: var(--ah-muted) !important; } .tdb-breadcrumbs a:hover { color: var(--ah-accent) !important; } /* ================= Hero ================= */ .ah-hero { max-width: 760px; margin: 0 auto; } .ah-hero-media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--ah-radius); background-color: #111111; } .ah-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .ah-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 32%, rgba(0, 0, 0, 0.05) 65%, rgba(0, 0, 0, 0) 100%); } .ah-hero-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 44px; display: flex; flex-direction: column; align-items: flex-start; } .ah-hero-badge { display: inline-block; background-color: var(--ah-accent); color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; text-decoration: none; padding: 7px 14px; border-radius: 100px; margin-bottom: 16px; } .ah-hero-badge:hover { background-color: var(--ah-accent-dark); } .ah-hero-title { margin: 0 0 18px; color: #ffffff; font-size: 44px; line-height: 1.15; font-weight: 700; max-width: 900px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } .ah-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: rgba(255, 255, 255, 0.9); font-size: 14px; } .ah-hero-meta-sep { opacity: 0.6; } .ah-hero-date, .ah-hero-readtime { color: rgba(255, 255, 255, 0.85); } @media (max-width: 767px) { .ah-hero-media { aspect-ratio: 4 / 5; border-radius: var(--ah-radius-sm); } .ah-hero-content { padding: 24px 20px; } .ah-hero-title { font-size: 26px; } .ah-hero-meta { font-size: 12px; } } /* ================= Share bar ================= */ .ah-share-bar { display: flex; align-items: center; gap: 10px; max-width: 760px; margin: 22px auto 8px; padding: 16px 20px; background-color: #fafafa; border: 1px solid var(--ah-border); border-radius: var(--ah-radius-sm); box-sizing: border-box; } .ah-share-bar-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ah-ink); margin-right: 6px; } .ah-share-btn { display: inline-flex; align-items: center; gap: 8px; width: 38px; height: 38px; justify-content: center; border-radius: 50%; background-color: #ffffff; border: 1px solid var(--ah-border); color: var(--ah-ink); text-decoration: none; cursor: pointer; transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; font-family: inherit; font-size: 13px; } .ah-share-btn:hover { transform: translateY(-2px); background-color: var(--ah-accent); border-color: var(--ah-accent); color: #ffffff; box-shadow: var(--ah-shadow); } .ah-share-copy { width: auto; padding: 0 16px; border-radius: 100px; font-weight: 600; } .ah-share-copy-label { white-space: nowrap; } .ah-share-copy.ah-share-copy-done { background-color: #1a8a4a; border-color: #1a8a4a; color: #ffffff; } .ah-share-copy.ah-share-copy-done .ah-share-copy-label:after { content: ' \2713'; } @media (max-width: 479px) { .ah-share-bar { flex-wrap: wrap; } } /* ================= Article main column ================= */ /* Full width now - the sidebar widgets that used to split this into a 70/30 layout render beside the hero instead (see .ah-single-sidebar below), not beside the article body. .ah-article-body's own max-width still caps the actual reading width. */ .ah-article-main { margin-top: 36px; } /* ================= Article typography ================= */ .ah-article-body { max-width: 760px; margin: 0 auto; font-size: 18px; line-height: 1.8; color: var(--ah-body-text); font-family: Barlow, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .ah-article-body > p { margin: 0 0 26px; } .ah-article-body h2, .ah-article-body h3, .ah-article-body h4 { color: var(--ah-ink); font-weight: 700; line-height: 1.3; margin: 46px 0 18px; scroll-margin-top: 100px; } .ah-article-body h2 { font-size: 30px; padding-bottom: 12px; border-bottom: 2px solid var(--ah-border); } .ah-article-body h3 { font-size: 24px; } .ah-article-body h4 { font-size: 19px; } .ah-article-body h2:first-child, .ah-article-body h3:first-child { margin-top: 0; } .ah-article-body ul, .ah-article-body ol { margin: 0 0 26px; padding-left: 24px; } .ah-article-body li { margin-bottom: 10px; } .ah-article-body a { color: var(--ah-accent); text-decoration: underline; text-decoration-color: rgba(225, 27, 34, 0.35); text-underline-offset: 2px; } .ah-article-body a:hover { color: var(--ah-accent-dark); } /* Pull quotes */ .ah-article-body blockquote { margin: 40px 0; padding: 6px 0 6px 28px; border-left: 4px solid var(--ah-accent); font-family: Barlow, sans-serif; } .ah-article-body blockquote p { font-size: 26px !important; line-height: 1.35 !important; font-weight: 600 !important; text-transform: none !important; color: var(--ah-ink) !important; margin: 0 !important; } /* Inline images + captions */ .ah-article-body img { max-width: 100%; height: auto; border-radius: var(--ah-radius-sm); display: block; margin: 0 auto; } .ah-article-body figure, .ah-article-body .wp-caption { margin: 36px 0; max-width: 100% !important; } .ah-article-body figcaption, .ah-article-body .wp-caption-text { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ah-muted); text-align: center; font-style: italic; } /* Embedded media (oEmbed) */ .ah-article-body .wp-block-embed, .ah-article-body iframe { max-width: 100%; margin: 36px 0; border-radius: var(--ah-radius-sm); } .ah-article-body .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; } @media (max-width: 767px) { .ah-article-body { font-size: 16px; line-height: 1.75; } .ah-article-body h2 { font-size: 24px; } .ah-article-body h3 { font-size: 20px; } .ah-article-body blockquote p { font-size: 21px !important; } } /* ================= Table of Contents ================= */ .ah-toc { margin: 0 0 40px; padding: 22px 26px; background-color: #fafafa; border: 1px solid var(--ah-border); border-radius: var(--ah-radius); position: sticky; top: 90px; z-index: 2; } .ah-toc-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--ah-ink); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--ah-accent); } .ah-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: ah-toc-counter; } .ah-toc-list li { counter-increment: ah-toc-counter; margin-bottom: 10px; } .ah-toc-list li:last-child { margin-bottom: 0; } .ah-toc-list a { display: flex; gap: 10px; color: var(--ah-body-text); font-size: 15px; text-decoration: none; line-height: 1.4; } .ah-toc-list a:before { content: counter(ah-toc-counter); flex: 0 0 auto; color: var(--ah-accent); font-weight: 700; } .ah-toc-list a:hover { color: var(--ah-accent); } /* ================= Sidebar ================= */ /* Not sticky - lives in the (also non-sticky, per request) column beside the hero, and scrolls with the page like everything else. */ .ah-single-sidebar { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; } .ah-sidebar-widget { background-color: #ffffff; border: 1px solid var(--ah-border); border-radius: var(--ah-radius); padding: 24px; box-shadow: var(--ah-shadow); } .ah-sidebar-widget-title { margin: 0 0 16px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ah-ink); padding-bottom: 12px; border-bottom: 2px solid var(--ah-accent); } @media (max-width: 1018px) { .ah-single-sidebar { flex-direction: row; flex-wrap: wrap; } .ah-sidebar-widget { flex: 1 1 320px; } } @media (max-width: 600px) { .ah-single-sidebar { flex-direction: column; } } /* Author card (sidebar + box variants) */ .ah-author-card { display: flex; gap: 16px; align-items: flex-start; } .ah-author-card-avatar img { display: block; border-radius: 50%; } .ah-author-card-eyebrow { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ah-muted); margin-bottom: 4px; } .ah-author-card-name { display: block; font-size: 16px; font-weight: 700; color: var(--ah-ink); text-decoration: none; margin-bottom: 8px; } .ah-author-card-name:hover { color: var(--ah-accent); } .ah-author-card-bio { font-size: 13.5px; line-height: 1.6; color: var(--ah-muted); margin: 0 0 12px; } .ah-author-card-socials { display: flex; gap: 8px; } .ah-author-card-social { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background-color: #f3f3f3; color: var(--ah-ink); text-decoration: none; font-size: 12px; transition: background-color 0.18s ease, color 0.18s ease; } .ah-author-card-social:hover { background-color: var(--ah-accent); color: #ffffff; } .ah-author-card-box { align-items: center; } .ah-author-card-box .ah-author-card-bio { font-size: 15px; } /* Categories widget */ .ah-categories-widget-list { list-style: none; margin: 0; padding: 0; } .ah-categories-widget-list li { border-bottom: 1px solid var(--ah-border); } .ah-categories-widget-list li:last-child { border-bottom: none; } .ah-categories-widget-list a { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; color: var(--ah-body-text); text-decoration: none; font-size: 14.5px; } .ah-categories-widget-list a:hover { color: var(--ah-accent); } .ah-categories-widget-count { color: var(--ah-muted); font-size: 12.5px; } /* Follow widget */ .ah-follow-icons { display: flex; gap: 10px; } .ah-follow-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: #f3f3f3; color: var(--ah-ink); text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease; } .ah-follow-icon:hover { background-color: var(--ah-accent); color: #ffffff; transform: translateY(-2px); } /* Trending widget - reuses .ah-trending-week (sidebar-panel.css); this just resets the width assumptions that CSS made for the homepage sidebar context so it fits cleanly in the article sidebar widget box. */ .ah-trending-widget .ah-trending-week-title { margin-top: 0; } /* Newsletter widget - reuses .ah-newsletter-card (sidebar-panel.css) as-is. */ /* ================= Article end ================= */ .ah-article-end { max-width: 760px; margin: 56px auto 0; padding-top: 40px; border-top: 1px solid var(--ah-border); } .ah-article-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; } .ah-article-tag { display: inline-block; padding: 8px 16px; background-color: #f5f5f5; border-radius: 100px; color: var(--ah-body-text); font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease; } .ah-article-tag:hover { background-color: var(--ah-accent); color: #ffffff; } .ah-article-end > .ah-share-bar { margin-bottom: 32px; } .ah-article-end > .ah-author-card { padding: 24px; background-color: #fafafa; border: 1px solid var(--ah-border); border-radius: var(--ah-radius); margin-bottom: 40px; } /* Related articles */ .ah-related-articles-title { font-size: 20px; font-weight: 700; color: var(--ah-ink); margin: 0 0 20px; padding-bottom: 12px; border-bottom: 2px solid var(--ah-accent); } .ah-related-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .ah-related-card { display: flex; flex-direction: column; background-color: #ffffff; border: 1px solid var(--ah-border); border-radius: var(--ah-radius); overflow: hidden; box-shadow: var(--ah-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; } .ah-related-card:hover { transform: translateY(-4px); box-shadow: var(--ah-shadow-hover); } .ah-related-card-image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background-color: #f2f2f2; } .ah-related-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .ah-related-card:hover .ah-related-card-image img { transform: scale(1.05); } .ah-related-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px; } .ah-related-card-badge { align-self: flex-start; margin: 0 0 8px; padding: 4px 10px; background-color: var(--ah-accent); color: #ffffff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; text-decoration: none; border-radius: 100px; } .ah-related-card-title { margin: 0 0 8px; font-size: 15.5px; line-height: 1.35; font-weight: 600; } .ah-related-card-title a { color: var(--ah-ink); text-decoration: none; } .ah-related-card-title a:hover { color: var(--ah-accent); } .ah-related-card-meta { margin-top: auto; font-size: 11.5px; color: var(--ah-muted); } .ah-related-card-sep { margin: 0 4px; } @media (max-width: 767px) { .ah-related-cards { grid-template-columns: 1fr; } } /* ================= Comments + next/prev (existing blocks, restyled) ================= */ .tdb_single_comments { max-width: 760px; margin: 0 auto !important; padding-top: 40px; } .tdb_single_next_prev { max-width: 760px; margin: 32px auto 0 !important; } .tdb_single_next_prev .tdb-next-post, .tdb_single_next_prev .tdb-prev-post { border-radius: var(--ah-radius-sm) !important; overflow: hidden; } /* ================= Ad slot (beside the featured image) ================= */ .ah-ad-placeholder { display: flex; align-items: center; justify-content: center; min-height: 250px; background-color: #f5f5f5; border: 1px dashed #c9c9c9; } .ah-ad-placeholder span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ah-muted); } .ah-ad-widget { margin-bottom: 24px; } .ah-ad-widget:last-child { margin-bottom: 0; } .ah-ad-widget-title { margin: 0 0 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ah-muted); text-align: center; }