/** * FieldPie Header Manager — Front-end stylesheet * * All rules are scoped under the .fp-light-header body class that the plugin * conditionally applies only on the pages chosen in the settings panel. * On every other page this file is completely inert. * * Desktop only: every rule lives inside a min-width: 1025px media query. * Mobile and tablet viewports are intentionally untouched. * * Color values are consumed from CSS custom properties injected by the plugin * in wp_head (fp_hm_inject_head). Fallback values mirror the field defaults. * * Author: Resul Özyurt * Version: 1.0.0 */ /* ========================================================================= DESKTOP ONLY — nothing below this point affects mobile or tablet ========================================================================= */ @media ( min-width: 1025px ) { /* ----------------------------------------------------------------------- LOGO The Bricks logo element renders as: #brxe-nhqxvw (.brxe-block wrapper) #brxe-pvrpmm (.brxe-logo anchor) img.bricks-site-logo.css-filter Two scenarios are handled: (A) A dark/colored logo was uploaded in the settings panel. The plugin's inline script swaps img.src on DOMContentLoaded. We only need to make sure any CSS filter that was making the logo white is removed so the new image renders in its natural colors. (B) No alternative logo was uploaded. We fall back to a CSS filter that turns the white SVG logo dark. brightness(0) collapses all channels to black; adjust as needed. ----------------------------------------------------------------------- */ /* Scenario A — reset any Bricks-applied filter so the swapped logo renders in its natural colors. The [data-orig-src] attribute is written by the swap script, so this selector only activates after the swap has taken place. */ .fp-light-header #brxe-pvrpmm img.bricks-site-logo[data-orig-src] { filter: none !important; } /* Scenario B — no uploaded logo: invert white to black via filter. The :not([data-orig-src]) guard ensures this rule steps aside once the JS swap has run and written the attribute. */ .fp-light-header #brxe-pvrpmm img.bricks-site-logo:not([data-orig-src]) { filter: brightness(0) !important; } /* ----------------------------------------------------------------------- NAV — TOP-LEVEL ITEMS Covers four structural patterns found in the HTML: 1. Dropdown parent with a plain label (Solutions, Industries, Resources) — the text lives in .brx-submenu-toggle > span 2. Dropdown parent with a link label (Features, AI Studio) — the text lives in .brx-submenu-toggle > a 3. Direct link item with no dropdown (Pricing) — .menu-item > a 4. The dropdown chevron SVG arrows — stroke must match the text Only top-level items are targeted. Dropdown panel contents keep their own colors because the panels render on a dark/colored background. ----------------------------------------------------------------------- */ /* Pattern 1 — plain span labels (Solutions, Industries, Resources) */ .fp-light-header #brxe-ljrwqd .brx-submenu-toggle > span { color: var( --fp-lh-link, #1a1a2e ) !important; } /* Pattern 2 — anchor labels (Features, AI Studio) */ .fp-light-header #brxe-ljrwqd > ul > li.brxe-dropdown > .brx-submenu-toggle > a { color: var( --fp-lh-link, #1a1a2e ) !important; } /* Pattern 3 — direct link items (Pricing) */ .fp-light-header #brxe-ljrwqd > ul > li.menu-item:not(.brxe-dropdown) > a.brxe-text-link { color: var( --fp-lh-link, #1a1a2e ) !important; } /* Pattern 4 — chevron arrow SVGs inside the toggle buttons */ .fp-light-header #brxe-ljrwqd > ul > li.brxe-dropdown > .brx-submenu-toggle > button svg path { stroke: var( --fp-lh-link, #1a1a2e ) !important; } /* ----------------------------------------------------------------------- NAV — HOVER STATES (top-level only) ----------------------------------------------------------------------- */ .fp-light-header #brxe-ljrwqd .brx-submenu-toggle > span:hover, .fp-light-header #brxe-ljrwqd > ul > li.brxe-dropdown > .brx-submenu-toggle > a:hover, .fp-light-header #brxe-ljrwqd > ul > li.menu-item:not(.brxe-dropdown) > a.brxe-text-link:hover { color: var( --fp-lh-hover, #FF6B35 ) !important; } /* Chevron color follows the parent link on hover */ .fp-light-header #brxe-ljrwqd > ul > li.brxe-dropdown:hover > .brx-submenu-toggle > button svg path { stroke: var( --fp-lh-hover, #FF6B35 ) !important; } /* ----------------------------------------------------------------------- NAV — MOBILE HAMBURGER TOGGLE The hamburger button (.brxe-toggle with an icon) appears at the right end of the nav at narrower breakpoints. On desktop it is typically hidden by Bricks, but if your theme shows it at the 1025 px boundary this rule keeps it readable. ----------------------------------------------------------------------- */ .fp-light-header #brxe-ljrwqd > button.brxe-toggle i { color: var( --fp-lh-link, #1a1a2e ) !important; } /* ----------------------------------------------------------------------- DROPDOWN PANELS — intentionally untouched The rules above stop at the top-level items. All .brx-dropdown-content panels inherit their own background and text colors from the Bricks template, so they remain readable regardless of which page we are on. If you ever need to override dropdown internals, add rules here. ----------------------------------------------------------------------- */ } /* end @media ( min-width: 1025px ) */ /* ========================================================================= HIDE "BOOK A DEMO" HEADER BUTTONS Triggered by the .fp-hide-demo body class, which is applied only when the "Hide Demo Buttons" toggle is enabled in Settings → Header Manager. Targeting strategy: we use the data-content="Book a Demo" attribute that is present on every Book a Demo ripple button regardless of its Bricks element ID. This means new demo buttons added to the header in the future are automatically covered without touching this file, as long as they follow the same ripple button pattern. The known Book a Demo button ID (#brxe-fsngso) is included as an extra safety net in case the data-content attribute is ever removed. The "Start Free Trial" button (#brxe-agqtjy) is intentionally excluded. Applied on ALL viewports — hiding demo CTAs is a content decision, not a layout one, so mobile is included here unlike the color overrides above. ========================================================================= */ .fp-hide-demo #brxe-fsngso, .fp-hide-demo .brxe-ripplebutton[data-content="Book a Demo"], .fp-hide-demo .bc-ripple-button__pseudo[data-content="Book a Demo"] { display: none !important; } /* ========================================================================= MOBILE / TABLET — explicit no-op comment for clarity No rules are applied below 1025 px. The mobile nav (hamburger + offcanvas) keeps its original Bricks styling on every page. ========================================================================= */