/** * Transparent Header — mixedskills theme * * Activated when

has class "transparent-header" or * "transparent-scroll-header" (set by the Header Builder's * General Settings → Position dropdown). * * These classes are generated by pt-novo-shortcodes/frontend.php: * $header_css[] = $position . '-header'; * * Also supports the old body-class approach (ms-header-transparent) * added via the Customizer / per-page meta box. * * @package mixedskills */ /* ══════════════════════════════════════════════════════════════ SHARED: collapse header-space so content starts at very top ══════════════════════════════════════════════════════════════ */ /* When header is transparent the placeholder div must be hidden so the hero / video banner fills the full viewport from y=0 */ .site-header.transparent-header ~ .header-space, .site-header.transparent-scroll-header ~ .header-space, .ms-no-header-space .header-space, .ms-no-header-space .header-space.hide { display: none !important; height: 0 !important; } /* ══════════════════════════════════════════════════════════════ CONTENT OFFSET — prevent headings overlapping the fixed header ══════════════════════════════════════════════════════════════ The JS (scroll-animations.js) measures the real header height and sets --ms-header-h on . We apply that as padding-top to the first section ONLY on non-hero pages. Hero detection: first elementor-section gets class ms-has-hero when it contains a video banner or is 100vh tall. On those pages we skip the padding so the hero stays full-bleed. ══════════════════════════════════════════════════════════════ */ /* Default: add header-height padding to the main content wrapper so fixed header never overlaps page text. */ .site-header.fixed-header ~ * .elementor-section:first-of-type:not(.ms-has-hero), .site-header.transparent-scroll-header ~ * .elementor-section:first-of-type:not(.ms-has-hero) { scroll-margin-top: var(--ms-header-h, 80px); } /* Main content area gets top padding equal to header height */ .site-header.fixed-header ~ main.main-row, .site-header.transparent-scroll-header ~ main.main-row, .site-header.fixed-header ~ #page-content, .site-header.transparent-scroll-header ~ #page-content { padding-top: var(--ms-header-h, 80px); } /* But NOT on pages that have a full-bleed hero / video banner (JS adds ms-has-fullbleed-hero to on those pages) */ body.ms-has-fullbleed-hero .site-header.fixed-header ~ main.main-row, body.ms-has-fullbleed-hero .site-header.transparent-scroll-header ~ main.main-row { padding-top: 0 !important; } /* ══════════════════════════════════════════════════════════════ 1. BASE transparent state Applies to: transparent-header + transparent-scroll-header ══════════════════════════════════════════════════════════════ */ .site-header.transparent-header, .site-header.transparent-scroll-header { position: fixed !important; /* float over page content */ top: 0; left: 0; right: 0; z-index: 1000; background-color: transparent !important; background-image: none !important; box-shadow: none !important; transition: background-color 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease; } /* Admin bar offset */ .admin-bar .site-header.transparent-header, .admin-bar .site-header.transparent-scroll-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .site-header.transparent-header, .admin-bar .site-header.transparent-scroll-header { top: 46px; } } /* Logo & nav links → white on transparent background */ .site-header.transparent-header:not(.ms-header-scrolled) .logo a, .site-header.transparent-header:not(.ms-header-scrolled) .navigation > ul > li > a, .site-header.transparent-header:not(.ms-header-scrolled) .navigation > ul > li > a span, .site-header.transparent-scroll-header:not(.ms-header-scrolled) .logo a, .site-header.transparent-scroll-header:not(.ms-header-scrolled) .navigation > ul > li > a, .site-header.transparent-scroll-header:not(.ms-header-scrolled) .navigation > ul > li > a span { color: #ffffff !important; transition: color 0.25s ease; } /* Burger / nav-button lines → white */ .site-header.transparent-header:not(.ms-header-scrolled) .butter-button > div, .site-header.transparent-header:not(.ms-header-scrolled) .butter-button > div::before, .site-header.transparent-header:not(.ms-header-scrolled) .butter-button > div::after, .site-header.transparent-scroll-header:not(.ms-header-scrolled) .butter-button > div, .site-header.transparent-scroll-header:not(.ms-header-scrolled) .butter-button > div::before, .site-header.transparent-scroll-header:not(.ms-header-scrolled) .butter-button > div::after { background-color: #ffffff !important; transition: background-color 0.25s ease; } /* Search / cart icons → white */ .site-header.transparent-header:not(.ms-header-scrolled) .search-button i, .site-header.transparent-header:not(.ms-header-scrolled) .hm-count i, .site-header.transparent-scroll-header:not(.ms-header-scrolled) .search-button i, .site-header.transparent-scroll-header:not(.ms-header-scrolled) .hm-count i { color: #ffffff !important; transition: color 0.25s ease; } /* ══════════════════════════════════════════════════════════════ 2. SCROLLED state — frosted dark glass Added by JS (ms-header-scrolled) on both scroll variants ══════════════════════════════════════════════════════════════ */ .site-header.transparent-header.ms-header-scrolled, .site-header.transparent-scroll-header.ms-header-scrolled { background-color: rgba(10, 10, 10, 0.96) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35) !important; } /* ══════════════════════════════════════════════════════════════ 3. "transparent-header" (always transparent) ignores scroll → override: never become solid, even after js adds the class ══════════════════════════════════════════════════════════════ */ .site-header.transparent-header.ms-header-scrolled { background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } /* ══════════════════════════════════════════════════════════════ 4. MOBILE — keep solid (no video/hero visible behind header) ══════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { .site-header.transparent-header, .site-header.transparent-scroll-header { background-color: rgba(10, 10, 10, 0.92) !important; } } /* ══════════════════════════════════════════════════════════════ 5. OLD body-class approach (Customizer / per-page meta box) Kept for backward compatibility ══════════════════════════════════════════════════════════════ */ .ms-header-transparent .site-header { background-color: transparent !important; background-image: none !important; box-shadow: none !important; position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000; transition: background-color 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease; } .ms-header-transparent .site-header.ms-header-scrolled { background-color: rgba(10, 10, 10, 0.96) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35) !important; }