/* ========================================================================== qa-fixes-partner-program.css — /partner-program/ page parity overrides -------------------------------------------------------------------------- Created 2026-05-02 from compare-page.mjs results (7 mismatches in baseline). Each rule scoped to `.rp-partner-program` or `body.page-template-page-partner-program`. Pre-flight items resolved by markup edits in partner-program-body.html: - Added 3 hidden Webflow-source badges + pricing paragraph (behind .hide class) inside the "Partner with RemotePass?" form section. Pairs visualAssetCount with live (was 5, now 8). PHP edits (inc/hero-content-bindings.php): - Added 'partner-program' to $soft_gradient_slugs so hero shortcode emits `_bg_extra_layer` only (no rounded-bottom/bg-light-blue/ adjust-padding) matching live's bare-extra-layer hero. Same pattern as cor/ai/relocation/apis/finance-managers/hr-managers. ========================================================================== */ /* ============ §A. WHITE-BG-MASK — hide on partner-program =============== RECURRING-ISSUES.md §2. The home-footer's white-bg-mask lands at y=772 over visible content on this page. ========================================================================== */ .page-template-page-partner-program .white-bg-mask, .page-template-page-partner-program .new-footer-white-bg-mask, .rp-partner-program ~ * .white-bg-mask, .rp-partner-program ~ * .new-footer-white-bg-mask { display: none !important; } /* ============ §B. HERO GRADIENT — soft-gradient variant lavender ======== PHP shortcode emits `_bg_extra_layer` for partner-program. Provide the lavender gradient on the bare wrapper (migration.css:756 only matches the full 7-class chain). Same pattern as cor/relocation/ apis/hr-managers §F. ========================================================================== */ .rp-partner-program .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer { background-color: #fff; background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 15%, rgb(228, 235, 254)); background-position: 0 0; background-repeat: repeat; background-size: auto; background-attachment: scroll; padding-top: 40px; padding-bottom: 24px; } /* ============ §C. HERO H1 — match live's 47.2px / 56px ================== "Grow together. Partner with the experts in global payroll." H1 renders 53.6/64 on local but live ships 47.2/56. Same as apis §B. ========================================================================== */ .rp-partner-program h1.double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header-dark-blue { font-size: 47.2px; line-height: 56px; } /* ============ §D. HERO IMAGE — match live's 602px render ================ Hero row reports imgRenderedW=626 (local) vs 602 (live). Same fix pattern as qa-fixes-relocation.css §E / qa-fixes-integrations.css §D. ========================================================================== */ .rp-partner-program .main-hero-section-img { width: 602px; height: auto; object-fit: cover; } /* ============ §E. WHY PARTNER CARDS — strip qa-fixes-pages padding ====== Phase 2-partner-program-visual (2026-05-02): "Why Partner with RemotePass?" 3-card section renders cards at 373×621 with images at 325×325 on local, vs live's 389×592 with images at 388×388. Two stacked issues: 1. `qa-fixes-pages.min.css` adds `padding: 1.5rem` (= 24px) to `.rp-partner-program .grid-step-card`. Live has padding: 0. The 24px L+R padding shrinks the inner image by 48px (388 → 325). Override at same specificity (0,2,0); qa-fixes-partner-program loads after qa-fixes-pages.min so source order wins. 2. `migration.css:14080-14081` sets `margin-left: 24px; margin-right: 24px;` on `.rp-partner-program .grid-3-steps`. Live overrides this to margin: 0 (verified via Chrome MCP probe — live's grid-3-steps width = 1200, parent rp-container-1200 width = 1200, so grid fills parent). The 48px L+R margin makes local's grid render 1152 wide instead of 1200, which compounds with the card padding to give 16px-narrower-per-card cards. Combined fix: padding 0 on cards + margin 0 horizontal on the grid. Card grid-row-gap stays per the canonical migration.css rule. ========================================================================== */ /* `qa-fixes-pages.min.css` is enqueued AFTER all the page-specific qa-fixes files (functions.php:447 vs :437), so equal-specificity rules in pages.min.css win on source order. Bump our card-padding selector to (0,3,0) via the `.grid-step-card-extra-style` chain to beat the `.rp-partner-program .grid-step-card` (0,2,0) rule in qa-fixes-pages.min.css. */ .rp-partner-program .grid-step-card.grid-step-card-extra-style, .rp-partner-program .grid-step-card.grid-step-card-with-img { padding: 0; } .rp-partner-program .grid-3-steps { margin-left: 0; margin-right: 0; } /* ============ §F. PARTNER-TYPES SECTION — center the 3 cards on desktop ===== 2026-05-05: Greg flagged that the 3 image cards in the "We partner with leaders…" section sit left-aligned on the desktop layout. Root cause: `migration.css:14196-14199` sets a fixed 24px left/right margin on `.rp-partner-program .rp-container-1200.centred.swiper .swiper-steps-with-img.with-mx`. That overrides the parent `.rp-container-1200.centred { margin: 0 auto }` rule, so the entire container is left-aligned with a 24px margin instead of centering on the page. The cards inside then look bunched to the left even though they themselves flex normally inside the container. Fix: at desktop sizes (>= 768px) restore the container's auto-margin so it centers on the page. We match migration.css's selector exactly (specificity 0,6,0) so our rule wins on source order — qa-fixes- partner-program.css is enqueued AFTER migration.css. Also keep `justify-content: center` on the inner flex wrapper as a belt- and-braces in case the cards' total width is less than the 1200px max. The mobile carousel (Swiper, init <=767px) is untouched. ========================================================================== */ @media (min-width: 768px) { .rp-partner-program .rp-container-1200.centred.swiper.swiper-steps-with-img.with-mx { margin-left: auto; margin-right: auto; } .rp-partner-program .swiper-steps-with-img .grid-3-steps.swiper-wrapper { justify-content: center; } } /* -------------------------------------------------------------------------- Cosmetic-only floor (compare 2026-05-02, post §A–§E): trajectory 7 → 3. Tied with /integrations/ as cleanest run. Residual: 1. whiteBgMaskHidden TRAP per RECURRING-ISSUES §2. 2. pageHeight 5728 vs 5851 — informational; local 123px taller. 3. Hero imgLoading=eager (local) vs lazy (live) + visualAssetCount 2 vs 1 — eager is intentional UX per RECURRING §6 (above-fold); the 1-asset gap is the hidden lottie sibling that the PHP hero shortcode doesn't emit (deferred — same pattern as all hero rows across product pages). No heading / row-content / section structural mismatches. -------------------------------------------------------------------------- */