).
Without this exclusion, the !important rule below forces the absolute
overlay header into normal flow, taking up its full height and pushing
the hero section down by ~80px (visible as a white band above the navbar). */
header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
.site-header:not([class*='sticky']):not([class*='fixed']):not(
[class*='absolute']
),
nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
#wpconvert-mobile-nav
),
[role='banner']:not([class*='sticky']):not([class*='fixed']):not(
[class*='absolute']
),
[role='navigation']:not([class*='sticky']):not([class*='fixed']):not(
[class*='absolute']
):not(#wpconvert-mobile-nav) {
position: relative !important;
z-index: 1000 !important;
}
/* Preserve sticky/fixed positioning for navs that have it */
/* CRITICAL: Ensure sticky/fixed actually works - add explicit CSS for common patterns */
nav[class*='sticky'],
nav[class*='fixed'],
header nav[class*='sticky'],
header nav[class*='fixed'],
header[class*='sticky'],
header[class*='fixed'],
.site-header[class*='sticky'],
.site-header[class*='fixed'] {
z-index: 1000 !important; /* Keep z-index for visibility */
}
/* Explicit sticky positioning support - ensures it works even without Tailwind CSS loaded */
/* Only apply if sticky class is present and no explicit position override */
nav.sticky,
nav[class*='sticky']:not([style*='position']),
header nav.sticky,
header nav[class*='sticky']:not([style*='position']),
header.sticky,
header[class*='sticky']:not([style*='position']) {
position: sticky !important;
}
/* Explicit fixed positioning support - ensures it works even without Tailwind CSS loaded */
nav.fixed,
nav[class*='fixed']:not([style*='position']),
header nav.fixed,
header nav[class*='fixed']:not([style*='position']),
header.fixed,
header[class*='fixed']:not([style*='position']) {
position: fixed !important;
}
/* Common Tailwind patterns: sticky top-0, fixed top-0 */
nav[class*='sticky'][class*='top-0'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='sticky'][class*='top-0'],
header nav[class*='fixed'][class*='top-0'],
header[class*='sticky'][class*='top-0'],
header[class*='fixed'][class*='top-0'] {
top: 0 !important;
}
/* Fixed navs typically need full width */
nav[class*='fixed'][class*='w-full'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='fixed'][class*='w-full'],
header nav[class*='fixed'][class*='top-0'],
header[class*='fixed'][class*='w-full'],
header[class*='fixed'][class*='top-0'] {
width: 100% !important;
left: 0 !important;
right: 0 !important;
}
/* Ensure hero and main content respect header z-index */
section[class*='hero'],
.hero,
main,
.site-main {
position: relative;
z-index: 1;
}
/* Theme-specific overrides */
/* Only apply relative if not sticky/fixed */
.site-header:not([class*='sticky']):not([class*='fixed']) {
position: relative;
}
.site-main {
margin-top: 0;
padding-top: 0;
min-height: 60vh;
}
/* Remove gap between fixed navbar and first content (white band under header).
* Use :first-of-type (not :first-child): WP templates often have a whitespace text node
* between and , so section is never :first-child and rules
* would silently fail (EC-NAV-086 follow-up). */
.site-main > section:first-of-type,
.site-main > div:first-of-type > section:first-of-type {
margin-top: 0;
}
/* EC-NAV-086: Fixed nav + full-viewport hero (Tailwind min-h-screen) — React/Vite SPAs
* stack the hero at document top with fixed nav overlaid; body/main background shows through
* any empty band under the bar. Pull the first min-h-screen hero up by the header bar height
* (--wpconvert-header-bar-height from header.php EC-NAV-100; fallback 4rem) so background layers
* align with the original SPA.
* Only on front-page template (body.front-page); skip sections with explicit pt-* / mt-* utilities.
* :first-of-type required: newline/whitespace between #primary and hero breaks :first-child. */
body.front-page
.site-main
#primary
> section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']),
body.front-page
.site-main
> div:first-of-type
> section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']) {
/* Logged out: --wp-admin--admin-bar--height is unset → 0px. Logged in: WP sets 32px / 46px (782px). */
margin-top: calc(
-1 * var(--wpconvert-header-bar-height, 4rem) -
var(--wp-admin--admin-bar--height, 0px)
);
}
/* EC-NAV-089: Admin bar is fixed at top:0; in-flow content gets html { margin-top } but fixed nav does not,
* so the site navbar sits under #wpadminbar. Offset primary fixed nav; exclude full-screen mobile drawer. */
body.admin-bar nav.fixed.top-0:not(#wpconvert-mobile-nav),
body.admin-bar nav.fixed[class*='top-0']:not(#wpconvert-mobile-nav) {
top: var(--wp-admin--admin-bar--height, 32px) !important;
}
/* EC-NAV-087: Merged / blog / legacy CSS often sets body { padding-top: 5rem+ } as “clearance”
* for fixed headers. With a fixed overlay nav, that padding does NOT move the bar — it only
* pushes down while body background shows through → white/cream band (~nav height) under
* the bar. Stay Boost ships this in bundled style.css; EC-NAV-086 margin alone cannot cancel it. */
body.front-page {
padding-top: 0 !important;
}
.site-footer {
margin-top: auto;
}
/* EC-TW4-001: WordPress default style overrides */
body {
line-height: 1.6;
}
body.wp-admin {
font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
Cantarell, sans-serif;
}
/* EC-BTN-104: :where() = 0 specificity so Tailwind text-* utilities always win over these resets.
Plain "a:hover { color: inherit }" can outrank .text-white on links (0,2,0 vs 0,1,0) and wash out hero CTAs. */
:where(a) {
color: inherit;
text-decoration: none;
}
:where(a:hover) {
color: inherit;
}
/* EC-CSS-001: Long-hand padding-left/right (NOT shorthand 'padding: 0 20px') so
* compound selectors like .container.hero-grid (which sets padding-top: 74px)
* keep their vertical padding. The shorthand resets ALL four sides at the same
* specificity, which on Dabster Labs caused the hero badge to slide under the
* fixed 74px nav. Horizontal gutter (20px each side) unchanged; vertical
* defaults to the browser's 0 — same effective behavior for sites that do not
* set padding-top via another selector. */
.container {
max-width: 1200px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
line-height: 1.2;
margin: 0;
}
:where(button, .btn) {
cursor: pointer;
border: none;
transition: all 0.3s;
}
input,
textarea,
select {
font-family: inherit;
}
ul,
ol {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
/* Grid Layout & Sidebar Preservation - Ensures Bootstrap and other grid systems work properly */
.grid-layout-container {
width: 100%;
max-width: 100%;
}
/* Preserve Bootstrap row structure */
.grid-layout-container .row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
/* Ensure Bootstrap columns work */
.grid-layout-container [class*='col-'] {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
/* Bootstrap column widths - responsive */
@media (min-width: 768px) {
.grid-layout-container .col-md-3 {
flex: 0 0 25%;
max-width: 25%;
}
.grid-layout-container .col-md-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.grid-layout-container .col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}
.grid-layout-container .col-md-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.grid-layout-container .col-md-9 {
flex: 0 0 75%;
max-width: 75%;
}
.grid-layout-container .col-md-12 {
flex: 0 0 100%;
max-width: 100%;
}
}
/* Mobile stacking for sidebars */
@media (max-width: 767px) {
.grid-layout-container [class*='col-'] {
flex: 0 0 100%;
max-width: 100%;
}
}
/* Sidebar styling */
.grid-layout-container aside,
.grid-layout-container [class*='sidebar'] {
padding: 20px;
}
/* CRITICAL: Disable popups marked by WPConvert - Universal for ALL popup libraries */
/* This targets ONLY popups we've marked, regardless of the library used */
/* Users can re-enable by overriding this CSS in Customizer → Additional CSS */
[data-wpconvert-popup-disabled='true'] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
z-index: -9999 !important;
position: absolute !important;
left: -99999px !important;
transform: scale(0) !important;
}
/* Also hide child elements of disabled popups (for nested structures) */
[data-wpconvert-popup-disabled='true'] * {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Disable popup overlay backgrounds (universal) */
[data-wpconvert-popup-disabled='true'].overlay,
[data-wpconvert-popup-disabled='true'][class*='overlay'],
[data-wpconvert-popup-disabled='true'][class*='backdrop'],
[data-wpconvert-popup-disabled='true'][class*='bg'] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* CRITICAL: Tailwind Font Override - ensure custom fonts take precedence over Tailwind CDN */
/* Tailwind CDN generates CSS dynamically that can override static CSS, so we use !important */
/* No custom font classes detected */
/* ── Blog Templates ─────────────────────────────────────── */
/* Prose typography for single post content */
.prose {
line-height: 1.8;
color: hsl(var(--foreground, 0 0% 100%));
}
.prose p {
margin-bottom: 1.25em;
}
.prose h2 {
font-size: 1.5em;
font-weight: 700;
margin-top: 2em;
margin-bottom: 0.75em;
}
.prose h3 {
font-size: 1.25em;
font-weight: 600;
margin-top: 1.5em;
margin-bottom: 0.5em;
}
.prose a {
color: hsl(var(--primary, 221 83% 53%));
text-decoration: underline;
}
.prose a:hover {
opacity: 0.8;
}
.prose blockquote {
border-left: 3px solid hsl(var(--accent, 221 83% 53%));
padding-left: 1em;
margin: 1.5em 0;
font-style: italic;
opacity: 0.9;
}
.prose ul,
.prose ol {
padding-left: 1.5em;
margin-bottom: 1.25em;
}
.prose li {
margin-bottom: 0.5em;
}
.prose img {
border-radius: 0.5rem;
margin: 1.5em 0;
}
.prose code {
background: hsl(var(--muted, 0 0% 15%));
padding: 0.2em 0.4em;
border-radius: 0.25rem;
font-size: 0.875em;
}
.prose pre {
background: hsl(var(--muted, 0 0% 15%));
padding: 1em;
border-radius: 0.5rem;
overflow-x: auto;
margin: 1.5em 0;
}
.prose pre code {
background: none;
padding: 0;
}
/* Pagination */
.wpconvert-pagination {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid hsl(var(--border, 0 0% 20%));
}
.wpconvert-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 0.75rem;
border-radius: 0.5rem;
font-size: 0.875rem;
transition: all 0.2s;
border: 1px solid hsl(var(--border, 0 0% 20%));
}
.wpconvert-pagination .page-numbers.current {
background: hsl(var(--primary, 221 83% 53%));
color: white;
border-color: transparent;
}
.wpconvert-pagination .page-numbers:hover:not(.current) {
background: hsl(var(--muted, 0 0% 15%));
}
/* Card hover image zoom (matches Tailwind group-hover:scale-105) */
.group:hover .group-hover\:scale-105 {
transform: scale(1.05);
}
/* Post navigation links on single.php */
article .flex.items-center.justify-between a {
color: hsl(var(--primary, 221 83% 53%));
text-decoration: none;
font-weight: 500;
}
article .flex.items-center.justify-between a:hover {
text-decoration: underline;
}
/* Responsive: stack grid on mobile */
@media (max-width: 768px) {
[class*='md\:grid-cols-'] {
grid-template-columns: 1fr !important;
}
}
/* EC-ANIM-008b / EC-ANIM-009: carousel-only override — scroll-reveal elements animate via IO in functions.php */
.scroll-fade-up:has([aria-roledescription='carousel']),
.scroll-fade-up:has([data-wpconvert-blog-filter-bar]),
.scroll-fade-left:has([aria-roledescription='carousel']),
.scroll-fade-right:has([aria-roledescription='carousel']),
.scroll-scale-in:has([aria-roledescription='carousel']) {
opacity: 1 !important;
transform: none !important;
}