/* ============================================================ RANK EDGE, inner pages — header override THE ONE FILE HERE THAT IS DELIBERATELY NOT SCOPED. rankedge-inner-page.css is sealed inside .rankedge-seo and can never reach the header. That is exactly what we want almost all of the time, and exactly the problem here: these pages open on a near-black hero, the site header is absolutely positioned over the top of it, and its menu is #16213e. Dark navy on dark navy. On the live page the entire header, logo included, was invisible. So this file reaches out on purpose, and only for pages that ask for it. The template adds a `rankedge-inner` class to ; nothing here matches without it, so every other page on the site is untouched. Add the same body class to any future inner page and it inherits this treatment. That is the answer to "how do we change the nav colours only for the inner pages". --------------------------------------------------------- WHY !important, WHICH IS NOT A HABIT 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 } That is four classes and two elements, (0,4,2). Beating it without !important means writing something heavier, and the only way to get there is to hard-code `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 and nobody would know why. One !important on a body-class-gated selector is the more durable choice. ============================================================ */ /* ---------- top level menu items ---------- The child combinator is load-bearing. `.elementskit-navbar-nav > li > a` reaches only the top row; the 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 REST IS NOT The child combinator handles the DESKTOP dropdown. It does nothing about the mobile one, because on mobile there is no second level to step past: at 1024px and below, ElementsKit re-homes this very

, so the top-level rules were reaching it and painting it white on white. They are now behind the 1025px gate, which is what keeps this true. */ /* ========================================================================== THE STICKY STATE Everything above dresses the header for sitting over a near-black hero. Once the page scrolls, the header is over light content instead, and white text on #F7F7FB is no better than dark text on #0A0C18 was. So past 40px the whole treatment reverses: solid white bar, black menu, logo returned to its own colours. GATED ON `re-scrolled`, WHICH WE SET OURSELVES Elementor Pro's own elementor-sticky--active / --effects would normally be the hook. They are unusable here. The header container is position:absolute at the very top of the page, so Elementor counts it as stuck immediately: measured live at scrollY 0 on a clean load, both classes were already on and the element was already position:fixed. Styling them would apply this white state over the hero, which is the opposite of what it is for. `re-scrolled` is added to by rankedge-inner-page.js. It is also still gated on `rankedge-inner`, so no other page on the site is touched. ========================================================================== */ /* The bar itself. Targeted through .elementor-sticky rather than the element id: Elementor puts that class on whatever is set to stick, so this keeps working when somebody rebuilds the header and the id changes. */ body.rankedge-inner .ekit-template-content-header .elementor-sticky{ transition:background-color .28s ease, box-shadow .28s ease; } body.rankedge-inner.re-scrolled .ekit-template-content-header .elementor-sticky{ background-color:#fff !important; box-shadow:0 6px 24px -14px rgba(10,12,24,.35); } /* Menu items back to black. Same child combinator as above, so the dropdown panel is left alone: it is white with dark text in both states. Gated at 1025px alongside its opposite number. Below that these selectors are the off-canvas panel, and this rule is the reason the mobile menu appeared to "fix itself" on scroll: it was repainting the panel #000, which happened to be right, from a state that was wrong. With the white gated away there is nothing left to correct, and the panel should not be taking its colour from the scroll position in the first place. */ @media (min-width:1025px){ body.rankedge-inner.re-scrolled .ekit-template-content-header .elementskit-navbar-nav > li > a, body.rankedge-inner.re-scrolled .ekit-template-content-header .elementskit-navbar-nav > li > a *, body.rankedge-inner.re-scrolled .ekit-template-content-header .elementskit-navbar-nav > li > .elementskit-submenu-indicator{ color:#000 !important; } /* Hover is the brand purple, not the cyan used over the hero. Cyan on white is about 1.9:1 and unreadable; the purple is the ramp the design system already uses on light bands. */ body.rankedge-inner.re-scrolled .ekit-template-content-header .elementskit-navbar-nav > li > a:hover, body.rankedge-inner.re-scrolled .ekit-template-content-header .elementskit-navbar-nav > li > a:hover *, body.rankedge-inner.re-scrolled .ekit-template-content-header .elementskit-navbar-nav > li > a:focus-visible, body.rankedge-inner.re-scrolled .ekit-template-content-header .elementskit-navbar-nav > li.current-menu-item > a, body.rankedge-inner.re-scrolled .ekit-template-content-header .elementskit-navbar-nav > li.current-menu-ancestor > a{ color:#5B38A8 !important; } } /* The logo goes back to being itself. brightness(0) invert(1) was only ever there because the artwork has no light pixels; on white it needs nothing, and the filter would have flattened the magenta in the mark for no reason. */ body.rankedge-inner .ekit-template-content-header img{ transition:filter .28s ease; } body.rankedge-inner.re-scrolled .ekit-template-content-header img{ filter:none !important; } /* Hamburger follows the menu. */ body.rankedge-inner.re-scrolled .ekit-template-content-header .elementskit-menu-hamburger, body.rankedge-inner.re-scrolled .ekit-template-content-header .elementskit-menu-hamburger svg, body.rankedge-inner.re-scrolled .ekit-template-content-header .elementskit-menu-hamburger svg *{ color:#000 !important; } @media (prefers-reduced-motion: reduce){ body.rankedge-inner .ekit-template-content-header .elementor-sticky, body.rankedge-inner .ekit-template-content-header img{ transition:none; } }