/** * Tap N Roll — Site-wide dark theme for every non-homepage page. * * page-landing.php forces its own dark theme inline (`html, body { * background: #0b0b0e !important; color: #e6e7ea !important; }`), but * that override only ever applied to the homepage, since page-landing.php * is a fully standalone template. Every other page (News archive, Cards, * Williamsburg/Newport News/Conventions category archives, single posts) * kept rendering with Astra's default light theme, so once the shared * dark header was dropped on top of them the header looked right but the * page body underneath still looked like a different, unstyled site. * * This file extends the same color system (defined in site-header.css) * to Astra's own content markup so every page matches the homepage. * * IMPORTANT — why so many `!important`s below: Astra prints its own * inline critical CSS in using selectors like * `.ast-separate-container .ast-archive-description` and * `.ast-separate-container .ast-article-inner` (two classes chained), * which either tie or beat this file's selectors on specificity, and * can also print AFTER this stylesheet depending on hook order. The * first version of this file (without !important) got its text-color * overrides applied but NOT its background-color overrides, producing * unreadable light text on Astra's default white boxes. Every * background/color override that targets an Astra-owned element uses * !important here so it wins regardless of specificity or load order — * the exact same technique page-landing.php already relies on above. * * @package TapNRollSite */ /* ── Base page background/text — matches page-landing.php's override ── */ html, body { background: var(--ink) !important; color: var(--text) !important; } body { font-family: "DM Sans", sans-serif; } h1, h2, h3, h4, h5, h6, .entry-content :where(h1, h2, h3, h4, h5, h6) { color: var(--text) !important; font-family: "Oswald", sans-serif; } a { color: var(--text); } a:hover, a:focus { color: var(--gold); } /* Astra's own content wrappers should stay transparent so the dark html/body background shows through everywhere. */ .site-content, .ast-container, .site-main, .content-area, #primary, #main { background: transparent !important; } /* ── Category / archive title box (e.g. "Newport News") ── Astra ships `.ast-separate-container .ast-archive-description { background-color: var(--ast-global-color-4) }` (white) — must beat it with !important or the box stays white under our light text. */ .ast-archive-description { background: var(--ink2) !important; border: 1px solid var(--line2) !important; border-radius: 14px; margin-bottom: 1.5rem; } .page-title.ast-archive-title, .ast-archive-description * { color: var(--text) !important; } .ast-archive-description .taxonomy-description { color: var(--muted) !important; } /* ── Blog / archive post cards ── Astra ships `.ast-separate-container .ast-article-inner { background-color: var(--ast-global-color-4) }` (white) — same fix. */ .ast-article-post { background: transparent !important; } .ast-article-post .ast-post-format-, .ast-article-post .ast-article-inner { background: var(--ink2) !important; border: 1px solid var(--line2); border-radius: 14px; padding: 1rem 1.1rem 1.2rem; margin-bottom: 1.5rem; overflow: hidden; } .ast-article-post .post-thumb-img-content { margin: -1rem -1.1rem 1rem; border-radius: 14px 14px 0 0; overflow: hidden; } .ast-article-post .ast-blog-featured-section.remove-featured-img-padding { margin: -1rem -1.1rem 1rem; } .entry-title.ast-blog-single-element, .entry-title { font-family: "Oswald", sans-serif; } .entry-title, .entry-title a { color: var(--text) !important; } .entry-title a:hover { color: var(--gold) !important; } .ast-taxonomy-container.cat-links a { color: var(--gold) !important; font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; } .entry-meta, .entry-meta *, .posted-on, .posted-by, .posted-by * { color: var(--muted) !important; } .entry-meta a:hover { color: var(--gold) !important; } .entry-content, .entry-content p, .entry-content li { color: var(--text) !important; } .ast-separate-container .ast-article-post { box-shadow: none; } /* ── Pagination ── Astra ships `.ast-pagination .page-numbers.current { background-color: var(--ast-global-color-0) }` — beat it with !important too. */ .navigation.pagination, .page-numbers { color: var(--text) !important; } .page-numbers { background: var(--ink2) !important; border: 1px solid var(--line2); border-radius: 6px; } .page-numbers.current, .page-numbers:hover { background: var(--gold-dim) !important; border-color: var(--gold); color: var(--gold) !important; } /* ── Single post / page content ── */ .single .entry-header, .page .entry-header { color: var(--text) !important; } .single .ast-article-single, .page .ast-article-single { background: transparent !important; } .single .ast-separate-container .ast-article-single:not(.ast-related-post) { background: var(--ink2) !important; border: 1px solid var(--line2) !important; } /* ── Footer ── Astra's own footer background rule is on `.site-footer` directly (single class) so this one was already winning, but keep !important for consistency and future-proofing against theme updates. */ .site-footer, .site-below-footer-wrap { background: var(--ink2) !important; border-top: 1px solid var(--line2); } .site-footer, .site-footer a, .ast-footer-copyright, .ast-footer-copyright p { color: var(--muted) !important; } .site-footer a:hover { color: var(--gold) !important; } /* ── Widgets / sidebar (in case any page ever enables one) ── Astra ships `.ast-separate-container.ast-two-container #secondary .widget { background-color: var(--ast-global-color-4) }`. */ .widget-area .widget { background: var(--ink2) !important; border: 1px solid var(--line2); border-radius: 14px; color: var(--text) !important; } .widget-title { color: var(--text) !important; font-family: "Oswald", sans-serif; }