/* ========================================================================== Right Path Builders — brand layer over the Pooluxe theme. Load order: bootstrap → plugins → swiper → style → coloring → scheme-rp → THIS. The template's own layout, components and rhythm are kept as they ship. This file only changes what makes it a pool company: the navy ground becomes charcoal, the type colour goes from navy-black to near-black, and a few components are added that the theme has no equivalent for (hero video, TikTok cards, the review letter-badges). THE TRAP: style.css declares its custom properties in a universal `* { }` block (style.css:25), not `:root`. A `:root` override is inherited and then shadowed on every element, so it silently does nothing. Anything declared there has to be overridden with `*` too. (`--primary-color` is the exception: it lives only in css/colors/*.css, which is why the scheme file works.) ========================================================================== */ * { /* navy → charcoal. Same three-step ladder the theme uses for stacked cards. White text on these reads 16.9:1 / 15.0:1 / 12.7:1. */ --bg-dark-1: #1A1D21; --bg-dark-1-rgb: 26, 29, 33; --bg-dark-2: #23272C; --bg-dark-3: #2E333A; --heading-font-color: #16181C; --body-font-color: rgba(22, 24, 28, .76); --bg-light: #F5F5F1; --btn-color: #ffffff; /* white label on the accent button */ --btn-hover-bg: #16181C; --btn-hover-color: #ffffff; } /* -------------------------------------------------------------------------- style.css:180 sets `html { overflow-x: hidden }` and style.css:186 sets `body { overflow: hidden }`. The body one is the SHORTHAND, so it clips both axes; overriding only overflow-x leaves overflow-y hidden, body turns into a clipping container, and the page collapses (footer paints over the hero). Both axes have to be named. `clip` rather than `hidden` also keeps `position: sticky` working. -------------------------------------------------------------------------- */ html { overflow-x: clip; overflow-y: visible; } body { overflow-x: clip; overflow-y: visible; } /* -------------------------------------------------------------------------- Sticky header: always visible, both directions The theme ships an auto-hiding header. `designesia.js:9` sets `headerAutoshow = "on"`, and the scroll handler then toggles two classes whose effect is inverted from the usual pattern: scrolling DOWN adds `.scroll-down`, which is `margin-top: -90px` (style.css:320) and lifts the bar off screen, while scrolling UP adds `.nav-up` and brings it back. So the menu disappears exactly when someone is reading down the page. The flag in designesia.js is flipped to "off" as well, which stops the class churn on every scroll event, but these rules are the authoritative fix: they survive designesia.js being re-copied from pooluxe/ during a theme update. -------------------------------------------------------------------------- */ header.scroll-down, header.nav-up, header.header-center.scroll-down { margin-top: 0 !important; } /* -------------------------------------------------------------------------- Header and logo scale The theme's header is 80px, sized entirely by the menu link (`padding: 25px 0` + `line-height: 30px`). Both go up ~20% at Jonathan's request: 96px bar, 64px logo, which still leaves 16px of air above and below the mark. Desktop only — the mobile header uses a different layout. -------------------------------------------------------------------------- */ @media only screen and (min-width: 993px) { #mainmenu > li > a.menu-item { padding-top: 33px; padding-bottom: 33px; } } /* -------------------------------------------------------------------------- Hero video The theme's hero is a Swiper of background images. Right Path supplied a brand film, so the swiper is replaced by a