/** * Universal liquid-glass header surface. * * Covers the native BuddyBoss desktop/mobile header and top-level headers built * with Elementor or Beaver Builder. The surface inherits each site's existing * typography, link colours and dimensions. */ :root { --abbey-header-glass-surface: rgba(255, 255, 255, 0.68); --abbey-header-glass-highlight: rgba(255, 255, 255, 0.92); --abbey-header-glass-border: rgba(255, 255, 255, 0.72); --abbey-header-glass-shadow: rgba(27, 39, 63, 0.12); --abbey-header-glass-depth: rgba(27, 39, 63, 0.05); --abbey-header-glass-sheen-start: rgba(255, 255, 255, 0.34); --abbey-header-glass-sheen-middle: rgba(255, 255, 255, 0.08); --abbey-header-glass-sheen-end: rgba(255, 255, 255, 0.24); --abbey-header-glass-blur: 24px; } /* * Keep the selector list deliberately limited to actual top bars. In * particular, nested Elementor templates such as the full-screen mobile menu * must remain normal content surfaces. */ #masthead.site-header, #page > .elementor-location-header > .elementor-section:first-child, .elementor-location-header .site-header--elementor, .fl-builder-content[data-type="header"] .site-header--beaver-builder { background-color: var(--abbey-header-glass-surface) !important; background-image: linear-gradient(115deg, var(--abbey-header-glass-sheen-start) 0%, var(--abbey-header-glass-sheen-middle) 42%, var(--abbey-header-glass-sheen-end) 100%) !important; border-bottom: 1px solid var(--abbey-header-glass-border) !important; box-shadow: inset 0 1px 0 var(--abbey-header-glass-highlight), inset 0 -1px 0 rgba(255, 255, 255, 0.2), 0 10px 32px -18px var(--abbey-header-glass-shadow), 0 2px 10px -7px var(--abbey-header-glass-depth) !important; -webkit-backdrop-filter: blur(var(--abbey-header-glass-blur)) saturate(180%) contrast(104%); backdrop-filter: blur(var(--abbey-header-glass-blur)) saturate(180%) contrast(104%); } /* Let the shared glass surface remain visible through BuddyBoss mobile layers. */ #masthead.site-header .bb-mobile-header-wrapper, #masthead.site-header .bb-mobile-header, #masthead.site-header .site-header-container { background: transparent !important; } /* * backdrop-filter creates a containing block for fixed descendants. BuddyBoss * keeps its off-canvas mobile panel inside #masthead, so filtering the masthead * itself would make the panel's 100% height resolve against the 76px header. * On mobile, move the glass sheet to the visible bar (a sibling of the panel). */ @media (max-width: 799px) { #masthead.site-header { background: transparent !important; border-bottom: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; } #masthead.site-header .bb-mobile-header-wrapper { width: calc(100% + 20px); margin-right: -10px; margin-left: -10px; padding-right: 10px; padding-left: 10px; background-color: var(--abbey-header-glass-surface) !important; background-image: linear-gradient(115deg, var(--abbey-header-glass-sheen-start) 0%, var(--abbey-header-glass-sheen-middle) 42%, var(--abbey-header-glass-sheen-end) 100%) !important; border-bottom: 1px solid var(--abbey-header-glass-border) !important; box-shadow: inset 0 1px 0 var(--abbey-header-glass-highlight), inset 0 -1px 0 rgba(255, 255, 255, 0.2), 0 10px 32px -18px var(--abbey-header-glass-shadow), 0 2px 10px -7px var(--abbey-header-glass-depth) !important; -webkit-backdrop-filter: blur(var(--abbey-header-glass-blur)) saturate(180%) contrast(104%); backdrop-filter: blur(var(--abbey-header-glass-blur)) saturate(180%) contrast(104%); } } /* The expanded header search is part of the same glass sheet. */ #masthead.site-header .header-search-wrap { background-color: rgba(255, 255, 255, 0.5) !important; background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)) !important; box-shadow: none !important; -webkit-backdrop-filter: blur(var(--abbey-header-glass-blur)) saturate(180%); backdrop-filter: blur(var(--abbey-header-glass-blur)) saturate(180%); } /* * The always-visible BuddyBoss search is a child of the glass header, not a * replacement sheet. Painting it again creates an opaque rectangular block. */ #masthead.site-header .header-search-wrap.header-search-primary { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; } #masthead.site-header .header-search-primary input.search-field, #masthead.site-header .header-search-primary .search-field-top { background-color: rgba(231, 237, 246, 0.52) !important; border: 1px solid rgba(255, 255, 255, 0.58) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important; } #masthead.site-header .header-search-primary input.search-field:focus, #masthead.site-header .header-search-primary .search-field-top:focus { border-color: var(--bb-input-focus-border-color, var(--bb-primary-color)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), var(--bb-input-focus-shadow, 0 0 0 2px rgba(var(--bb-primary-color-rgb), 0.12)) !important; } /* Give the compact landing-page menu control the same refractive edge. */ @media (max-width: 960px) { .abbey-menu-toggle .elementor-button { background-color: rgba(255, 255, 255, 0.42) !important; border-color: rgba(255, 255, 255, 0.8) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 5px 18px -12px var(--abbey-header-glass-shadow) !important; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); } body.abbey-menu-open .abbey-menu-toggle .elementor-button { background-color: rgba(32, 32, 32, 0.82) !important; border-color: rgba(255, 255, 255, 0.22) !important; } } /* Preserve legibility when BuddyBoss is switched to its dark appearance. */ body.bb-dark-theme { --abbey-header-glass-surface: rgba(18, 21, 29, 0.72); --abbey-header-glass-highlight: rgba(255, 255, 255, 0.16); --abbey-header-glass-border: rgba(255, 255, 255, 0.13); --abbey-header-glass-shadow: rgba(0, 0, 0, 0.38); --abbey-header-glass-depth: rgba(0, 0, 0, 0.2); --abbey-header-glass-sheen-start: rgba(255, 255, 255, 0.11); --abbey-header-glass-sheen-middle: rgba(255, 255, 255, 0.02); --abbey-header-glass-sheen-end: rgba(255, 255, 255, 0.07); } body.bb-dark-theme #masthead.site-header .header-search-wrap { background-color: rgba(18, 21, 29, 0.58) !important; background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)) !important; } body.bb-dark-theme #masthead.site-header .header-search-wrap.header-search-primary { background: transparent !important; } body.bb-dark-theme #masthead.site-header .header-search-primary input.search-field, body.bb-dark-theme #masthead.site-header .header-search-primary .search-field-top { background-color: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.12) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } /* A solid fallback keeps contrast intact when backdrop filtering is unavailable. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { #masthead.site-header, #page > .elementor-location-header > .elementor-section:first-child, .elementor-location-header .site-header--elementor, .fl-builder-content[data-type="header"] .site-header--beaver-builder { background-color: rgba(255, 255, 255, 0.94) !important; } body.bb-dark-theme #masthead.site-header, body.bb-dark-theme #page > .elementor-location-header > .elementor-section:first-child, body.bb-dark-theme .elementor-location-header .site-header--elementor, body.bb-dark-theme .fl-builder-content[data-type="header"] .site-header--beaver-builder { background-color: rgba(18, 21, 29, 0.95) !important; } } @media (prefers-reduced-transparency: reduce) { #masthead.site-header, #page > .elementor-location-header > .elementor-section:first-child, .elementor-location-header .site-header--elementor, .fl-builder-content[data-type="header"] .site-header--beaver-builder { background-color: rgba(255, 255, 255, 0.92) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } body.bb-dark-theme #masthead.site-header, body.bb-dark-theme #page > .elementor-location-header > .elementor-section:first-child, body.bb-dark-theme .elementor-location-header .site-header--elementor, body.bb-dark-theme .fl-builder-content[data-type="header"] .site-header--beaver-builder { background-color: rgba(18, 21, 29, 0.94) !important; } }