/* ============================================================================= Community Header - Transparent Overlay Loaded by views/layouts/main.php only when a community turned on the builder's "Transparent overlay header" (Header tab > Overlay & effects) and the current page is the section-built landing (fullWidthContent). Unlike the org website (its own strip-based header, own layout, own website-header-overlay.css), a community's public site renders the PLATFORM navbar (widgets/HeaderWidget.php) on views/layouts/main.php. So this file rides the platform header's existing .header-transparent-top / .at-top scroll machinery (web/js/header.js initTransparentTop(), web/css/ header.css:274-293) instead of reinventing it - it only adds what that machinery doesn't already do: collapsing main's top offset so the hero shows through, and a readable light/dark nav text color while transparent. ============================================================================= */ /* ---------- Collapse main's header offset -------------------------------- */ /* Desktop/tablet only (matches the >=1200px breakpoint at which the header actually renders transparent - header.css:1889 forces it solid below that). Below 1200px main keeps its normal offset, matching the force-solid header. */ @media (min-width: 1200px) { body.has-overlay-header.has-sticky-header.has-full-width-content main { padding-top: 0; } /* First section clearance: the community landing marks its first section with .website-section--overlay-first (views/website/_section.php, shared with the org renderer), so push its inner content clear of the floating header while the section's own background stays full-bleed behind it. --dynamic-header-offset is header.js's live-measured navbar height (web/js/header.js:890) - same role as the org's --website-header-height. */ body.has-overlay-header .website-section--overlay-first { padding-top: calc(var(--website-section-padding-top, var(--website-section-padding-y)) + var(--dynamic-header-offset, 64px)); /* Per-section Margin (top) must not slide the hero out from under the floating header - same guard as the org overlay CSS. */ margin-top: 0 !important; } /* Layout banner strip. main > .container holds the breadcrumb row plus the alert / toast / community-membership / donation / moderator banners, and it sits BEFORE the sections in flow. With main's header offset removed it would start at y=0 and collide with the floating navbar (the donation banner shows to every guest, so this is the common case, not an edge). Lift it out of flow and pin it just under the header: the hero keeps the full viewport behind the transparent header AND no banner is lost - they float over the top of the hero instead of pushing it down. Empty container (the usual state once banners are dismissed) is invisible. pointer-events is re-enabled on the children so the strip's own transparent gutters never swallow clicks meant for the hero. */ body.has-overlay-header main { position: relative; } body.has-overlay-header main > .container { position: absolute; top: var(--dynamic-header-offset, 64px); left: 0; right: 0; z-index: 1029; pointer-events: none; } body.has-overlay-header main > .container > * { pointer-events: auto; } /* ---------- Force the transparent state to actually be transparent ---- */ /* header.css's own `.header-transparent-top .navbar.at-top` clears background-color, box-shadow and border-bottom-color - but NOT backdrop-filter, which `.header-glassmorphism .navbar` (header.css:239-247) sets to blur(10px). header.css only drops that blur inside its <1200px block (header.css:1893), so on desktop a glassmorphism header stays a frosted band over the hero and the overlay reads as "not working". Since the platform header ships with glassmorphism on by default, clear the whole glass treatment explicitly for the at-top state. This file is registered after header.css, so it wins. */ body.has-overlay-header .navbar.at-top { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom-color: transparent !important; box-shadow: none !important; } /* ---------- Overlay text color while transparent --------------------- */ /* .at-top is what header.js toggles (removed past a 50px scroll), so the override drops out the instant the header goes solid - no separate "solid" rule needed, unlike the org version, since header.css already restores the themed background and default text handling once .at-top is gone. !important is required: theme.css declares `.navbar-brand, .nav-link { color: var(--text-primary) !important }`, which otherwise wins on every link. */ body.has-overlay-header-text-light .navbar.at-top .nav-link, body.has-overlay-header-text-light .navbar.at-top .navbar-brand, body.has-overlay-header-text-light .navbar.at-top .navbar-brand-text, body.has-overlay-header-text-light .navbar.at-top .navbar-brand-tagline { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } body.has-overlay-header-text-light .navbar.at-top .nav-link:hover { color: rgba(255, 255, 255, 0.75) !important; } /* Logo over a dark hero. `color` can't recolor a raster , so the brand logo needs its own handling: prefer the dark-variant mark (the brand-logo-light/--dark pair brandLogoImg() emits, normally keyed only on [data-theme] in site.css), else white-silhouette the single logo - mirroring website-header-overlay.css on org sites. !important on the display swap is required to beat site.css's own !important toggles. Drops out with .at-top past the 50px scroll, like the text rules. */ body.has-overlay-header-text-light .navbar.at-top .brand-logo-light { display: none !important; } body.has-overlay-header-text-light .navbar.at-top .brand-logo-dark { display: inline-block !important; } body.has-overlay-header-text-light .navbar.at-top .navbar-brand-logo:not(.brand-logo-light):not(.brand-logo-dark) { filter: brightness(0) invert(1); } body.has-overlay-header-text-dark .navbar.at-top .nav-link, body.has-overlay-header-text-dark .navbar.at-top .navbar-brand, body.has-overlay-header-text-dark .navbar.at-top .navbar-brand-text, body.has-overlay-header-text-dark .navbar.at-top .navbar-brand-tagline { color: #1a1a1a !important; } body.has-overlay-header-text-dark .navbar.at-top .nav-link:hover { color: rgba(0, 0, 0, 0.6) !important; } }