/* ============================================================ RANK EDGE, home page — header treatment and CTA sheen Two things the home page was missing that the six inner pages have: a header that changes with the band underneath it, and the sweeping highlight on the "Let's Talk" button. THIS FILE ADDS NO JAVASCRIPT, AND DOES NOT NEED ANY. rankedge-home-init.js has been computing the answer since the home page was built. It puts two classes on : at-top scrollY < 30 dark-nav the band under the header is dark, which for the hero means the scrub has passed --hero-t 0.55 and the footage is in space They were written for the design's own fixed nav. The WordPress build replaced that nav with the Elementor header and nothing has consumed the classes since. All that was missing is the stylesheet that reads them. --------------------------------------------------------- WHY THE INNER-PAGE HEADER CSS CANNOT SIMPLY BE REUSED HERE rankedge-inner-header.css forces the menu white over the hero and turns it black past 40px. That is correct for an inner page, which opens on a near-black hero, and WRONG here. The home hero starts LIGHT and darkens as you scroll into it. Measured from the scrub config in rankedge-home-init.js: bgFrom [247,247,251] -> bgTo [10,12,24] interpolated between 4% and 34% of the hero's scroll So at the top of this page the header sits on #F7F7FB. A forced-white menu there would be invisible: exactly the bug the inner-page file exists to fix, only inverted. Hence three states rather than two. at-top, not dark-nav light hero, header untouched. The theme's own dark menu is already correct, so there is no rule for this state at all. dark-nav dark band or dark hero: transparent header, white menu, logo inverted. neither light band below the hero: solid white bar, black menu, logo as-is. The menu half of those states is desktop only. At 1024px and below the menu is an off-canvas panel with its own background, so it is not on the band at all and must not follow it. Section 1 has the measurement and the reasoning. --------------------------------------------------------- WHY !important, WHICH IS NOT A HABIT Same reason as on the inner pages. The declaration being overridden is Elementor's generated per-page stylesheet: .elementor-12193 .elementor-element.elementor-element-6187f77d .elementskit-navbar-nav > li > a { color:#16213e } Four classes and two elements, (0,4,2). Beating that without !important means hard-coding elementor-12193 and elementor-element-6187f77d, a post id and a widget id that both change the next time somebody rebuilds the header in Elementor. The override would break silently. One !important on a body-class-gated selector is the more durable choice. Everything here is gated on body.re-home, which the home template already adds, so no other page on the site is touched. ============================================================ */ /* ========================================================================== 1. OVER A DARK BAND (body.dark-nav) The child combinator is load-bearing. `.elementskit-navbar-nav > li > a` reaches only the top row; dropdown items live another level down in .elementskit-submenu-panel, which sits on a WHITE background. Whitening those too would trade one invisible menu for another. --------------------------------------------------------- WHY THE MENU COLOURS ARE GATED AT 1025px AND THE BAR IS NOT At 1024px and below the ElementsKit widget stops being a row over the page. Its