/* Theme Name: Bricks Child Theme Theme URI: https://bricksbuilder.io/ Description: Use this child theme to extend Bricks. Author: Bricks Author URI: https://bricksbuilder.io/ Template: bricks Version: 1.1 Text Domain: bricks */ /* -------------------------------------------------------------------------- * Footer menu: hide dropdown sub-menus (SEO/PPC, sectors, etc.). * The "Main Menu" is shared with the header; hiding is scoped to the footer * nav (#brxe-vytbfn) so the header keeps its dropdowns. The absolutely- * positioned sub-menus were extending the page below the footer (blank space). * ------------------------------------------------------------------------- */ #brxe-vytbfn .sub-menu { display: none !important; } #brxe-vytbfn .brx-submenu-toggle > button { display: none !important; } /* -------------------------------------------------------------------------- * FAQ accordion (Bricks accordion element) — dividers + +/- toggle marker. * ------------------------------------------------------------------------- */ .brxe-accordion .accordion-item { border-bottom: 1px solid #e0e0e0; } .brxe-accordion .accordion-item:first-child { border-top: 1px solid #e0e0e0; } .brxe-accordion .accordion-title-wrapper { position: relative; cursor: pointer; padding-right: 44px; } .brxe-accordion .accordion-title-wrapper::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--ue-blue); font-size: 28px; line-height: 1; font-weight: 300; transition: transform .2s ease; } .brxe-accordion .accordion-title-wrapper[aria-expanded="true"]::after { content: "\2212"; } /* -------------------------------------------------------------------------- * CTA buttons & arrows (QA 16/07/26). * Default = stroke outline; hover = fills to the full colour state. The hover * colours are set per element in Bricks (each arrow fills with its own brand * colour); this only animates the transition so it doesn't snap. * ------------------------------------------------------------------------- */ .brxe-button.bricks-button, .brxe-button.bricks-button i { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* -------------------------------------------------------------------------- * Numbered sections ("01 / 02 / 03…") — dotted vertical column separators, * per the supplied design. Applied to EVERY numbered grid site-wide, not just * Web Design. They all share the same responsive setup (3-or-2 cols desktop, * 2 cols <=767, 1 col <=478), so the "first card in row" reset follows suit. * ------------------------------------------------------------------------- */ #brxe-p8km1t > *, #brxe-rdjvvn > *, #brxe-fixdx1 > *, #brxe-mto71m > *, #brxe-2ccpca > *, #brxe-r6d7cr > *, #brxe-fnaojk > *, #brxe-zntqfk > *, #brxe-wdbvw5 > *, #brxe-7ye02s > *, #brxe-tckkga > *, #brxe-y8djr6 > * { border-left: 2px dotted var(--ue-dark-blue); padding-left: var(--space-l); } /* first card in each row carries no separator */ #brxe-p8km1t > *:nth-child(3n + 1), #brxe-rdjvvn > *:nth-child(3n + 1), #brxe-fixdx1 > *:nth-child(3n + 1), #brxe-mto71m > *:nth-child(3n + 1), #brxe-2ccpca > *:nth-child(3n + 1), #brxe-r6d7cr > *:nth-child(3n + 1), #brxe-fnaojk > *:nth-child(3n + 1), #brxe-zntqfk > *:nth-child(3n + 1), #brxe-wdbvw5 > *:nth-child(3n + 1), #brxe-7ye02s > *:nth-child(2n + 1), #brxe-tckkga > *:nth-child(2n + 1), #brxe-y8djr6 > *:nth-child(2n + 1) { border-left: 0; padding-left: 0; } /* 479-767px: the 3-column grids drop to 2 columns. Lower bound matters. These selectors carry a pseudo-class (#id > *:nth- child(3n+1)) so they outrank the plain "#id > *" reset in the <=478 block below, even though that block comes later — the every-third-item border survived into the single-column phone layout and showed as one indented item with a stray vertical line. Scoping to the range where two columns actually exist removes the conflict rather than fighting it. */ @media (min-width: 479px) and (max-width: 767px) { #brxe-p8km1t > *:nth-child(3n + 1), #brxe-rdjvvn > *:nth-child(3n + 1), #brxe-fixdx1 > *:nth-child(3n + 1), #brxe-mto71m > *:nth-child(3n + 1), #brxe-2ccpca > *:nth-child(3n + 1), #brxe-r6d7cr > *:nth-child(3n + 1), #brxe-fnaojk > *:nth-child(3n + 1), #brxe-zntqfk > *:nth-child(3n + 1), #brxe-wdbvw5 > *:nth-child(3n + 1) { border-left: 2px dotted var(--ue-dark-blue); padding-left: var(--space-l); } #brxe-p8km1t > *:nth-child(2n + 1), #brxe-rdjvvn > *:nth-child(2n + 1), #brxe-fixdx1 > *:nth-child(2n + 1), #brxe-mto71m > *:nth-child(2n + 1), #brxe-2ccpca > *:nth-child(2n + 1), #brxe-r6d7cr > *:nth-child(2n + 1), #brxe-fnaojk > *:nth-child(2n + 1), #brxe-zntqfk > *:nth-child(2n + 1), #brxe-wdbvw5 > *:nth-child(2n + 1) { border-left: 0; padding-left: 0; } } /* <=478px: single column — no separators anywhere */ @media (max-width: 478px) { #brxe-p8km1t > *, #brxe-rdjvvn > *, #brxe-fixdx1 > *, #brxe-mto71m > *, #brxe-2ccpca > *, #brxe-r6d7cr > *, #brxe-fnaojk > *, #brxe-zntqfk > *, #brxe-wdbvw5 > *, #brxe-7ye02s > *, #brxe-tckkga > *, #brxe-y8djr6 > * { border-left: 0; padding-left: 0; } } /* -------------------------------------------------------------------------- * GSAP reveal animations — prevent the flash (FOUC). * Elements are hidden before JS runs, so they never paint visible and then * get snapped to opacity:0 by GSAP. Once the tweens exist the script adds * html.gsap-init, restoring the baseline to visible: GSAP's *inline* opacity * then drives the reveal (inline beats these rules), and content stays visible * after clearProps. The class is also added as a failsafe if GSAP never loads, * so content can never be permanently hidden. * ------------------------------------------------------------------------- */ .reveal-up, .reveal-left, .reveal-right { opacity: 0; } html.gsap-init .reveal-up, html.gsap-init .reveal-left, html.gsap-init .reveal-right { opacity: 1; } /* -------------------------------------------------------------------------- * Header stacking vs the homepage rocket. * * The header's blue bar (#brxe-nuniwo) IS the blue at the top of the page — * the hero section starts *below* it (behind the header is just white body), * and the rocket is pulled up with a negative margin so it deliberately * overlaps that bar. So the bar must stay opaque (making it transparent puts * a white logo on white, e.g. /insights) AND must stay *below* the artwork, * or it slices the nose off the rocket. * * The only thing that must sit above the artwork is the menu toggle, or it * isn't clickable. Lift just that button: it's a leaf, so it can't trap * anything. Do NOT put z-index on #brx-header or an inner header container — * the mobile menu overlay lives inside them, and a new stacking context caps * its z-index:999 at the ancestor's level so it stops covering the page. * (The logo sits at x170-427, clear of the rocket at x775, so needs nothing.) * ------------------------------------------------------------------------- */ /* Must clear BOTH the hero artwork and the OPEN menu overlay (z-index:999): * this button *is* the close X once the menu is open, so at a lower z-index * the overlay paints over it and the X is washed out and unclickable. */ #brx-header .bricks-mobile-menu-toggle { z-index: 1000; } /* already position:relative */ /* -------------------------------------------------------------------------- * Pull-quotes. A
inherits the browser/theme default of * georgia / "Times New Roman" / serif, which nothing here overrides — so the * GEO pull-quote rendered as a serif in an otherwise all-Poppins site. * Keep the semantic tag, take the site font. * ------------------------------------------------------------------------- */ blockquote, blockquote * { font-family: inherit; } /* -------------------------------------------------------------------------- * UE brand flare — paint-edged dark bands. * * The hero divider is a blue paint splat that drips down into the white below; * everywhere else the solid navy bands were hard rectangles. Reuse that exact * splat as a CSS mask so each navy band tears out of the page like brushed * paint instead of a printed block. Same asset, tinted navy via mask. * * ::before = ragged spray edge along the TOP (mask flipped, drips point up) * ::after = paint drip edge along the BOTTOM (mask upright, drips point down * — identical direction to the hero divider) * * TOP edge goes on every navy band (the section above is always light). * BOTTOM drip goes ONLY on the four mid-content callouts — the testimonials * component (.brxe-qtiyjq) can sit flush against the light-blue footer, so a * bottom drip there would fall on the footer heading. * * All bands are the same navy (#004269). Mask URL is root-relative so it * survives the staging -> live domain move. * ------------------------------------------------------------------------- */ .brxe-qtiyjq, #brxe-cbwt4o, #brxe-4cptw9, #brxe-n80r4c, #brxe-alteod { position: relative; } #brxe-cbwt4o::before, #brxe-4cptw9::before, #brxe-n80r4c::before, #brxe-alteod::before, #brxe-cbwt4o::after, #brxe-4cptw9::after, #brxe-n80r4c::after, #brxe-alteod::after { content: ""; position: absolute; left: 0; right: 0; height: 68px; background: #004269; -webkit-mask-image: url("/wp-content/uploads/2026/04/Main-Homepage-Background-cropped-scaled.png"); mask-image: url("/wp-content/uploads/2026/04/Main-Homepage-Background-cropped-scaled.png"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; pointer-events: none; } /* TOP spray edge — sits above the band, mask flipped so the drips point up */ #brxe-cbwt4o::before, #brxe-4cptw9::before, #brxe-n80r4c::before, #brxe-alteod::before { bottom: 100%; transform: scaleY(-1); } /* BOTTOM drip edge — sits below the band, mask upright (hero direction) */ #brxe-cbwt4o::after, #brxe-4cptw9::after, #brxe-n80r4c::after, #brxe-alteod::after { top: 100%; } /* -------------------------------------------------------------------------- * Paint-edged bands, part 2 (outer spacing). * * The painted spray/drip edges sit OUTSIDE each band (~68px tall). With the * sections butting flush together they overlapped the neighbours — the image * above and the success stories below. Add outer margin so the splash lands * in clear space, not on top of the next section. Callouts drip top+bottom; * the testimonials band only sprays at the top, so margin its top only. * ------------------------------------------------------------------------- */ #brxe-cbwt4o, #brxe-4cptw9, #brxe-n80r4c, #brxe-alteod { margin-top: 90px !important; margin-bottom: 90px !important; } /* the edge is 1/6.115 of the width (its aspect), so reserve space in the same unit — a fixed px margin only clears it at one viewport size */ .brxe-qtiyjq { margin-top: 19% !important; } /* -------------------------------------------------------------------------- * Blockquote pull-quotes carried Bricks' default 4px grey left rule + 30px * indent — an inherited framework default (the element sets no border of its * own), not a design choice, same story as the serif font. Drop it so the * quote aligns with the overline and body copy. * ------------------------------------------------------------------------- */ blockquote { border-left: 0 !important; padding-left: 0 !important; } /* -------------------------------------------------------------------------- * Mobile menu overlay — stop the horizontal jump when a submenu expands. * * At >=480px the overlay wrapper centres the menu list (align-items:center), * and the list is sized to its widest line. Collapsed, that's "Web Design & * Development" (~343px); expanding Social Media reveals "Organic Social Media * Management" (~372px), so the centred block grows ~29px wider and re-centres, * shifting every top-level item ~15px left. * * Reserve the widest state up front so the list width never changes on expand * — the centre point stays put. (Only applies where the list floats centred; * below 480px it's left-aligned and unaffected.) * ------------------------------------------------------------------------- */ @media (min-width: 480px) { .bricks-mobile-menu { min-width: 380px; } } /* -------------------------------------------------------------------------- * Staggered item reveals (GSAP). * * A .reveal-stagger container fades its child items up one after another * (heading, text, button, icon) instead of the whole block moving as one. * Same anti-FOUC contract as .reveal-up: pre-hide the items in CSS, then the * GSAP init adds html.gsap-init to restore the visible baseline (a completed * tween's clearProps drops the inline opacity, so this baseline holds them * visible; the 3s failsafe +