. The
drawer has `transform: translateX(...)` (for its slide animation), which
creates a new containing block for position:fixed descendants. That
traps the backdrop's `inset: 0` inside the 300px drawer rect instead of
the full viewport — the backdrop then sits ON TOP of the menu panel and
intercepts every click via document.elementFromPoint().
Fix: neutralize the broken in-drawer backdrop (pointer-events: none +
transparent) and render the darkening overlay via body::before, which
lives outside any transformed containing block and correctly covers the
viewport. Close interactions still work via the hamburger re-tap, the
in-drawer close button, and the Escape keyboard shortcut.
======================================================================== */
.tp-drawer .tp-drawer__backdrop,
.tp-drawer .tp-drawer__backdrop.tp-drawer__backdrop--visible {
pointer-events: none !important;
background: transparent !important;
/* keep the element in the DOM — just make it inert visually and
non-interactive. JS still reads classList for legacy open/close state. */
}
/* Real dimming overlay — lives outside any transform containing block. */
body::before {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: calc(var(--tp-z-drawer) - 1);
opacity: 0;
visibility: hidden;
transition: opacity var(--tp-ease), visibility var(--tp-ease);
pointer-events: none;
}
body.tp-nav-open::before {
opacity: 1;
visibility: visible;
}
/* --- Fix 2: collapse empty ad zones and un-stick the mobile anchor --------- */
/* Any ad zone with no injected content collapses to zero height.
Covers BOTH the theme's .ad-zone class AND the rsoc-ad-zones mu-plugin's
.rsoc-ad-zone / .shared-ad-zone classes. The mu-plugin sets inline
style="min-height:90px" on every container, so !important is required
to override the inline declaration. Specific IDs listed explicitly for
belt-and-suspenders against future class-naming drift. */
.ad-zone:empty,
.rsoc-ad-zone:empty,
.shared-ad-zone:empty,
.shared-ad-zone-wrap:empty,
#rsoc-header-leaderboard:empty,
#rsoc-below-title:empty,
#rsoc-in-feed-1:empty,
#rsoc-in-feed-2:empty,
#rsoc-below-article:empty,
#rsoc-sidebar-widget:empty,
#rsoc-sidebar-sticky:empty,
#rsoc-mobile-anchor:empty {
display: none !important;
min-height: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
overflow: hidden !important;
}
/* The mobile anchor lives after ; float it so it never occupies
document flow space, and only render it on mobile where it's intended. */
#rsoc-mobile-anchor {
display: none;
}
@media (max-width: 768px) {
#rsoc-mobile-anchor {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
min-height: 0;
z-index: var(--tp-z-header);
padding-bottom: env(safe-area-inset-bottom, 0);
background: transparent;
pointer-events: none;
}
#rsoc-mobile-anchor:not(:empty) {
pointer-events: auto;
background: #fff;
box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.08);
}
/* Reserve space at bottom of main so fixed anchor doesn't cover content. */
#rsoc-mobile-anchor:not(:empty) ~ * {
/* noop, but placeholder for future siblings */
}
}
/* Footer should sit flush against the mobile anchor without extra bottom gap. */
.tp-footer {
margin-bottom: 0;
}
/* ========================================================================
v4.9.5 Hotfix — Duplicate chrome + mobile consent overlay
------------------------------------------------------------------------
Problem 1: The fleet-wide rsoc-dark-mode.php mu-plugin renders a floating
dark-mode toggle (#rsoc-dark-mode-toggle) on every site. TrailPost has its
OWN .tp-dark-toggle already mounted inside the header actions, so the
fleet plugin's toggle becomes a visible duplicate pinned to the top-right
corner. Hide the fleet plugin's button whenever TrailPost is active —
the theme's toggle wins because it lives inside the header chrome where
users expect it.
Problem 2: The fleet-wide #rsoc-cookie-consent bar has z-index 99999 and
spans the full viewport width; the mobile drawer lives at z-index 1000.
When the drawer opens the consent bar still paints on top, covering
menu items and the CATEGORIES block. Hide the consent bar (visually +
non-interactively) while the drawer is open; restore it when drawer
closes via the existing body.tp-nav-open class toggle in main.js.
======================================================================== */
/* Hide fleet-wide dark-mode toggle — TrailPost has one in the header */
.wp-theme-TrailPost #rsoc-dark-mode-toggle,
body.wp-theme-TrailPost .rsoc-dm-toggle {
display: none !important;
}
/* Hide cookie consent while the mobile drawer is open */
body.tp-nav-open #rsoc-cookie-consent,
body.tp-nav-open .rsoc-cookie-consent,
body.tp-nav-open .rsoc-consent,
body.tp-nav-open .shared-consent-bar {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
/* ========================================================================
v4.9.6 — Dual logo variants (light + dark mode)
------------------------------------------------------------------------
The TrailPost header is white in light mode and slate-900 in dark mode,
so a single wordmark can't read on both. tp_render_site_logo() renders
up to two ![]()
nodes — `tp-logo__img--light` and `tp-logo__img--dark`
— and we toggle visibility purely in CSS. When a site only provides
the light variant we keep the old brightness-invert fallback so we
don't regress existing sites that haven't generated a dark logo yet.
======================================================================== */
/* Default (light theme): show light variant only. */
.tp-logo__img--light,
.tp-footer__logo-img--native-dark,
.tp-footer__logo-img--inverted {
display: block;
}
.tp-logo__img--dark {
display: none;
}
/* Dark theme: swap header logo; footer already uses dark variant natively. */
[data-theme="dark"] .tp-logo__img--light {
display: none;
}
[data-theme="dark"] .tp-logo__img--dark {
display: block;
}
/* Footer: when only the light logo is available, keep the legacy invert filter
(white silhouette on dark footer). When the dark variant is present we show
it as-is (native white-text logo, no filter needed). */
.tp-footer__logo-img--inverted {
filter: brightness(0) invert(1);
}
.tp-footer__logo-img--native-dark {
filter: none;
}
/* Fallback: when no dark-variant logo is uploaded, invert the light one on the
fly so dark-mode users still see the wordmark. */
[data-theme="dark"] .custom-logo-link:not(:has(.tp-logo__img--dark)) .tp-logo__img--light {
display: block;
filter: brightness(0) invert(1);
}
/* ========================================================================
v4.9.6b — Dark-mode header chrome
------------------------------------------------------------------------
The fleet-wide rsoc-dark-mode.php flips and
repaints body/cards via generic --tp-* token overrides, but the theme's
own .tp-site-header / .tp-header rules pin `background: #fff` with
specificity 0,1,0 — no data-theme selector ever beats them. That left
the header bright white in dark mode, which made the dark-variant
wordmark (white text on transparent) paint white-on-white.
Target the header chrome explicitly so it swaps to the dark surface
color, and flip nav text to the dark-mode muted token at the same
specificity tier.
======================================================================== */
[data-theme="dark"] .tp-site-header,
[data-theme="dark"] .tp-header {
background: var(--tp-secondary, #0f172a);
border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .tp-nav__list a,
[data-theme="dark"] .tp-nav a,
[data-theme="dark"] .tp-logo__link {
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .tp-nav__list a:hover,
[data-theme="dark"] .tp-nav a:hover {
color: var(--tp-primary);
}
/* Icon buttons (search, dark toggle, hamburger) need a bright stroke too */
[data-theme="dark"] .tp-search-toggle,
[data-theme="dark"] .tp-dark-toggle,
[data-theme="dark"] .tp-hamburger__line {
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .tp-hamburger__line {
background: rgba(255, 255, 255, 0.9);
}
/* Subscribe button keeps its primary fill but with a slightly lighter outline
so it doesn't look sunken against the dark header. */
[data-theme="dark"] .tp-subscribe-btn {
border-color: var(--tp-primary);
}