/** * WP-side style tweaks for embedded Astro v2 pages ("V2 Page (Astro)" * template). Loaded LAST on those pages only, so rules here win over both * the theme CSS and the synced v2 CSS. * * Keep ALL WordPress-specific adjustments to v2 pages in this file — * never edit files under /v2/ (they are overwritten by bin/sync-v2.sh). * * Scope selectors with .v2-embed-page (on ) or .nl-v2 (the content * wrapper) so nothing leaks to regular theme pages. */ /* Breathing room between the last v2 section and the theme footer card — on regular pages the gap comes from the content blocks' own margins. */ .v2-embed-page .nl-v2 { margin-bottom: 64px; } /* ── Theme class-name collisions ────────────────────────────────────────── * The theme's own dist/styles/main.css defines several bare, unscoped * classes that happen to share names with v2/Tailwind classes. .nl-v2's * own rules already out-specify the theme for properties BOTH sides set * (2 classes beats 1), but any property the theme sets that v2's own rule * doesn't touch leaks straight through uncontested. Reset those here. * * Found via: .price-card's `overflow:hidden` from the theme's native * pricing block clipped the "Most popular" ribbon (which pokes up above * the card via `top:-13px`), and the theme's `max-width`/`margin-right` * cramped the card width — reported on /ai-sales-agent/. */ .nl-v2 .price-card { overflow: visible; margin: 0; max-width: none; box-shadow: none; } .nl-v2 .container { margin: 0; padding: 0; } .nl-v2 .btn { position: static; } /* v2's own blog article markup deliberately mirrors the theme's native * .post-block__* structure (same class names) and resets the outer * `.post-block` to `display:block`, but never touches the nested * `.post-block__main-content` — so the theme's `.single .post-block__main- * content` rule (_blog.scss: flex/grid two-column layout for the WP native * article+sidebar split) applies unopposed on v2-embed blog posts, breaking * the single-column layout. Reported on /15-best-ai-virtual-receptionists- * ranked/ (WU-38/WU-39 blog posts). */ .nl-v2 .post-block__main-content { display: block; } /* Theme's TOC widget (_blog.scss) is completely unscoped — bare `.toc-list`, * `.toc-list li`, `.toc-list li:before`, no `.single`/`.page` ancestor * requirement at all — so it leaks into v2's differently-designed article * TOC (a plain, un-numbered link list): injects a counter() "1. " prefix * via `li:before`, clamps each item to 2 lines, forces a fixed-height * scrollbox (`overflow-y:auto` + `max-height`), and (via `!important`) * overrides v2's own `padding:0` with 24-30px. Reset it all back to v2's * intent; padding-left needs `!important` to beat the theme's own. */ .nl-v2 .toc-list { counter-reset: none; overflow-y: visible; max-height: none; padding-left: 0 !important; } .nl-v2 .toc-list li { display: block; -webkit-line-clamp: unset; line-clamp: unset; max-width: none; padding-left: 0; padding-right: 0; cursor: auto; } .nl-v2 .toc-list li::before { content: none; } /* Theme's `.pricing-table .table-container` rule (_pricing.scss or similar: * boxed 1px border, 12px radius, 50px top/bottom margin, 1000px min-width) * targets the WP-native pricing table markup and leaks into v2's own * pricing tables, which use a different border scheme entirely * (border-collapse + a single border-bottom per cell). Reported on * /ai-sales-agent-for-real-estate/ and other agent pages with pricing * tables — the leaked rules doubled up borders and forced a 1000px * minimum width that breaks on mobile. */ .nl-v2 .pricing-table .table-container, .nl-v2 .pricing-table .table-container td, .nl-v2 .pricing-table .table-container th { border: none; } .nl-v2 .pricing-table .table-container { border-radius: 0; margin: 0; min-width: 0; } /* The theme's global `body { overflow: hidden }` (main.css) makes * register as the nearest scroll container for any descendant's * `position: sticky`, even though the page actually scrolls via * (html has its own non-visible overflow-x, so the overflow-propagation * quirk hands real viewport scrolling to it, not body). Sticky elements * end up pinned relative to a box that never itself scrolls, so they never * visually stick — e.g. the salon page's sticky-scroll feature carousel * just scrolls past like a static block. * * :not(.is-burger-active) preserves the theme's own scroll-lock behavior * while the mobile menu is open. */ body.v2-embed-page:not(.is-burger-active) { overflow: visible; }