/* ========================================================================== Services page — "Comprehensive Paid Media Solutions" section, rebranded. Loaded ONLY on /services/ (see Support\SiteStyles). SCOPING IS LOAD-BEARING. The classes this file restyles — .uagb-heading-text, .uagb-ifb-title, .uagb-ifb-desc — are Ultimate-Addons block classes reused ELSEWHERE on this same page: "Our Services", "Clients We Worked With", "Have a Project on mind?" and the closing headline all use them. Every rule below is therefore scoped under .uagb-block-7479c618, the root container that paints this section, so nothing outside it can be affected. The section is built of TWO nested Ultimate-Addons containers that BOTH paint the background: the outer root (.uagb-block-7479c618) and a nested "alignfull" container (.uagb-block-43eb9d9b) holding the three columns. Recolouring only the outer one would leave a red band behind the cards. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Background: red (#980000) -> solid black -------------------------------------------------------------------------- */ .wp-block-uagb-container.uagb-block-7479c618, .uagb-block-7479c618 .wp-block-uagb-container.uagb-block-43eb9d9b { background-color: #000 !important; background-image: none !important; } /* -------------------------------------------------------------------------- 2. Text: PeakPoint pink, the same #fe2c55 as the logo and active nav. Contrast on black measures 5.73:1 — passes WCAG AA for normal text (>=4.5:1) at every size used here, so the smaller description copy is still compliant. The CTA links were rgb(51,51,51): near-black, effectively invisible on a black background. They are included here deliberately, not incidentally. -------------------------------------------------------------------------- */ .uagb-block-7479c618 .uagb-heading-text, .uagb-block-7479c618 .uagb-ifb-title, .uagb-block-7479c618 .uagb-ifb-title a, .uagb-block-7479c618 .uagb-ifb-desc, .uagb-block-7479c618 .uagb-ifb-content, .uagb-block-7479c618 .uagb-infobox-cta-link, .uagb-block-7479c618 .uagb-ifb-cta-link, .uagb-block-7479c618 .uagb-infobox-cta-link .uagb-forward-arrow, .uagb-block-7479c618 p, .uagb-block-7479c618 h2, .uagb-block-7479c618 h3, .uagb-block-7479c618 h4 { color: #fe2c55 !important; } /* Keep the CTA readable as an affordance without shouting. */ .uagb-block-7479c618 .uagb-infobox-cta-link { font-weight: 600; text-decoration-color: rgba(254, 44, 85, .45); text-underline-offset: 4px; transition: color .15s ease, opacity .15s ease; } .uagb-block-7479c618 .uagb-infobox-cta-link:hover, .uagb-block-7479c618 .uagb-infobox-cta-link:focus-visible { color: #ff5c7d !important; text-decoration-color: #ff5c7d; } /* -------------------------------------------------------------------------- 3. Typography. Was: heading 20px/600, titles 17px/600, body 14px with a 1.8 line-height. Small for a full-bleed section on a 1920 canvas. Scaled with clamp() so the floor protects mobile and the ceiling stops it ballooning on ultrawide — the min values are at or above the old fixed sizes, so nothing shrinks at any breakpoint. -------------------------------------------------------------------------- */ .uagb-block-7479c618 .uagb-heading-text { font-size: clamp(28px, 2.6vw, 46px) !important; line-height: 1.18 !important; font-weight: 700 !important; letter-spacing: -.015em; } .uagb-block-7479c618 .uagb-ifb-title { font-size: clamp(21px, 1.6vw, 30px) !important; line-height: 1.25 !important; font-weight: 700 !important; letter-spacing: -.01em; margin-bottom: .6em !important; } .uagb-block-7479c618 .uagb-ifb-desc { font-size: clamp(16px, 1.05vw, 19px) !important; line-height: 1.75 !important; } .uagb-block-7479c618 .uagb-infobox-cta-link { font-size: clamp(15px, .95vw, 17px) !important; } /* -------------------------------------------------------------------------- 4. Layout: reclaim the side gutters. The inner wrapper was capped at `min(100%, 1140px)`, leaving 390px of dead space each side on a 1920 viewport. Raised to 1560px with a fluid inline padding so the section breathes without touching the viewport edge, and without ever exceeding 100% (so tablet/mobile are unaffected: below 1560px the `min()` keeps resolving to 100%, exactly as before). The padding uses a CHILD combinator on purpose. `.uagb-container-inner-blocks-wrap` is repeated at three nesting levels here (section > column row > each column), so a descendant selector applies the gutter three times over and squeezes the cards — the exact opposite of the goal. Only the outermost wrapper gets it. -------------------------------------------------------------------------- */ .uagb-block-7479c618 > .uagb-container-inner-blocks-wrap { padding-inline: clamp(20px, 3vw, 56px) !important; } .uagb-block-7479c618 > .uagb-container-inner-blocks-wrap, .uagb-block-7479c618 .uagb-block-43eb9d9b > .uagb-container-inner-blocks-wrap { max-width: min(100%, 1560px) !important; box-sizing: border-box; } /* Cards sat ~269px wide inside 370px columns, wasting ~100px per column. Let the info box fill the column it lives in. */ .uagb-block-7479c618 .wp-block-uagb-info-box, .uagb-block-7479c618 .uagb-ifb-content { width: 100% !important; max-width: 100% !important; } /* The three columns were vertically CENTRED, so unequal text lengths staggered their tops by up to 38px (705 / 692 / 730). Align them to a common top edge and let the columns share the row height evenly. */ .uagb-block-7479c618 .uagb-container-inner-blocks-wrap { align-items: stretch !important; } .uagb-block-7479c618 .wp-block-uagb-container.uagb-block-922a985c, .uagb-block-7479c618 .wp-block-uagb-container.uagb-block-5912b95d, .uagb-block-7479c618 .wp-block-uagb-container.uagb-block-30807eb1 { align-items: flex-start !important; justify-content: flex-start !important; max-width: 33.333% !important; flex: 1 1 0 !important; /* Each column carried 71.4px left / 57.1px right of its own padding — 128.5px per column of dead horizontal space, and asymmetric, so the three cards did not sit on a consistent rhythm. Trimmed and equalised; the VERTICAL padding is deliberately left untouched so the section's existing vertical spacing is preserved. */ padding-left: clamp(24px, 2vw, 44px) !important; padding-right: clamp(24px, 2vw, 44px) !important; } /* Breathing room now that the type is bigger. */ .wp-block-uagb-container.uagb-block-7479c618 { padding-bottom: clamp(64px, 6vw, 104px) !important; } /* -------------------------------------------------------------------------- 5. Responsive. NOTE — this page has a PRE-EXISTING horizontal overflow at tablet/mobile that is NOT caused by this file and is NOT fully fixed by it. Every "alignfull" Ultimate-Addons container on the page resolves to the same too-wide value (852px inside a 768px viewport), including several sections this file does not touch. Verified pre-existing by loading the page with this plugin's CSS blocked: byte-identical overflow. What the rule below DOES do is stop this section's nested container being worse than that page-wide baseline (946px -> 895px at 768). Properly fixing the rest is a page-wide change to alignfull, deliberately out of scope for a section restyle. Measured: page scrollWidth 857 -> 832 at 768px, 435 -> 413 at 390px. -------------------------------------------------------------------------- */ .uagb-block-7479c618 .wp-block-uagb-container.uagb-block-43eb9d9b { max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* Stack the columns below the Ultimate-Addons tablet breakpoint. `flex-wrap: nowrap` on the wrapper is the other half of the overflow bug: three columns that each want full width cannot wrap, so they stay on one row and push the page sideways. Allowing the row to wrap is what actually lets them stack, and is why the widths below take effect at all. */ @media (max-width: 976px) { .uagb-block-7479c618 .uagb-container-inner-blocks-wrap { flex-wrap: wrap !important; } .uagb-block-7479c618 .wp-block-uagb-container.uagb-block-922a985c, .uagb-block-7479c618 .wp-block-uagb-container.uagb-block-5912b95d, .uagb-block-7479c618 .wp-block-uagb-container.uagb-block-30807eb1 { max-width: 100% !important; flex: 1 1 100% !important; } }