/* ========================================================================== qa-fixes-local-payroll.css — /local-payroll/ parity overrides -------------------------------------------------------------------------- Created 2026-05-01 from compare-page.mjs results on local-payroll (44 mismatches in baseline). Each rule is scoped to `.rp-local-payroll` or `body.page-template-page-local-payroll`. Reference structure: qa-fixes-cor.css. Pre-flight items resolved by markup edits: - 11× H2 → H1 promotion on product slide headings - 4× H3 → H1 promotion on pricing tier names (Contractors / CoR / Local Payroll / Employer Of Record) - Dash escape: MENA - no emails → MENA-no emails (bypasses WP wptexturize converting ` - ` to ` – `) - Removed duplicate home-testimonials + home-try-rp includes (RECURRING-ISSUES.md #1) - Stripped 5316 null bytes from body file (RECURRING-ISSUES.md #19) This file handles the CSS-fixable residuals. ========================================================================== */ /* ============ §A. WHITE-BG-MASK — KEEP VISIBLE on local-payroll ========== 2026-05-03: structured-diff reported live whiteBgMaskHidden=false, local=true (we were hiding it). Same correction as /cor/ §A and the contractors batch 6 fix. Live keeps the mask visible. ========================================================================== */ /* ============ §B. HERO SOFT GRADIENT — match live's lavender top-fade ===== Live's local-payroll hero has the soft top-fading lavender bg `linear-gradient(rgba(228,235,254,0), rgb(228,235,254) 15%, rgb(228,235,254))` without the rounded-bottom or adjust-padding wrapper effects. The body markup already has `_bg_extra_layer` (line 6) but the gradient CSS only fires when paired with rounded-bottom + bg-light-blue + adjust- padding. Same fix as qa-fixes-cor.css §G. ========================================================================== */ .rp-local-payroll .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 SIZE — match live's 47.2 px ==================== Live: H1 47.2px / 56px on "Automated Payroll & HRIS for MENA." Local was rendering 41.6px / 49.92px (the `.font-2-6rem` class). Bump to live's value. The H1 carries `.font-2-6rem` so override that. ========================================================================== */ .rp-local-payroll .double-slide-landing-page-left-main-header.font-2-6rem { font-size: 47.2px; line-height: 56px; } /* ============ §D. TRUST BADGES — heading sizes match live =============== Same pattern as home/contractors/cor. ========================================================================== */ .rp-local-payroll .badges-trusted-new-design-main-header, .rp-local-payroll .badges-trusted-new-design-main-header.badges-trusted-new-design-main-header-white { font-size: 32px; line-height: 48px; } /* ============ §E. FAQs HEADING — match live's 36 px ====================== Live: H2 36px / 38px. Local: 28px / 36.4px. Same as cor §D. ========================================================================== */ .rp-local-payroll .guide_hiring_faq_h, .rp-local-payroll .guide_hiring_faq_h.guide_hiring_faq_h_gray { font-size: 36px; line-height: 38px; } /* ============ §F. TRANSPARENT PRICING — line-height match ================ Live: H2 35.2px / 48px. Local: 35.2px / 51.2px (1.45 vs 1.36 ratio). v2 (2026-05-01): scoped to the Transparent Pricing H2 specifically via its `.no-pt.no-mt.no-padding` modifier — generic `h2.new-rp-section-header` would have hit other section headers too. ========================================================================== */ .rp-local-payroll h2.new-rp-section-header.no-pt.no-mt.no-padding { line-height: 48px; } /* ============ §G. PRICING TIER NAMES — line-height match ================= Live: H1 19.5px / 25.35px. Local: H1 19.5px / 27.3px (after markup H3→H1 promotion). The H1 still carries `.rp-h3.text-capitalized.text- smaller` which was the source of the lineHeight delta. ========================================================================== */ .rp-local-payroll h1.rp-h3.text-capitalized.text-smaller { line-height: 25.35px; } /* ============ §H. PRICING PRICE LABELS — line-height match =============== Live: H2 24px / 28.8px. Local: 24px / 31.2px. The price labels ("only $39/mo", "Starting AT $299/mo", etc.) sit inside the pricing card as `

`. v2 (2026-05-01): targeting actual class chain, not the parent `.new_pricing_style_h` (which is on a different DIV). ========================================================================== */ .rp-local-payroll h2.rp-h2.price-value.new_pricing_style_rp_h2 { line-height: 28.8px; } /* ============ §I. PRODUCT SLIDE LEFT-COL WIDTH — match live's 626 px ===== Live's text container columns render 626 px wide (in a 626 + 626 split). Local was rendering 506 px. The 5 affected rows: Single Payment / Expense reimbursement / Slack Integration / HR Letters / End of Service Benefits — all in `.hero_double_section.hero_double_section_ revert.hero_double_section_sticky` wrappers. v3 (2026-05-01): scoping to the `_revert _sticky` combo on the parent. The HERO has `_bg_extra_layer` instead, so the v2 rule that just used `.hero_double_section` overcorrected the hero (which should stay at its 5/7 split = 522 px left col). ========================================================================== */ .rp-local-payroll .hero_double_section.hero_double_section_revert.hero_double_section_sticky .double-section-hero-container.security-trust-double-section-hero-container .double-section-hero-container-left { width: 50%; flex: 0 0 50%; } /* ============ §J. HR LETTERS L/R — match live's row direction ============ Live: HR Letters & Documents row renders with `flex-direction: row` (image on right). Local was rendering `row-reverse` because the row has both `-revert` AND `-rev` classes; the migration.css combo rule should produce row but a `.rp-local-payroll .double-section-hero- container-rev` rule was overriding to row-reverse first. Fix: target the unique class added in markup (`.lp-row-hr-letters`) with !important to win cascade. v2 (2026-05-01): the v1 selectors didn't match (wrong parent wrapper, wrong nth-of-type count). Now uses the unique marker class. ========================================================================== */ .rp-local-payroll .double-section-hero-container.lp-row-hr-letters { flex-direction: row !important; } /* ============ §L. ALL-IN-ONE CAROUSEL — 12-column grid =================== Phase 2-local-payroll v3 (2026-05-01): user-reported visible regression ("Integrated HRIS & Payroll Platform — there are cards in a carousel, leaving a space in the middle of the screen rather than taking up one full row"). Diagnosis: the 12-card carousel wrapper has classes `integ-ration-grid mt4 swiper-wrapper swiper-wrapper-no-gap swiper-wrapper-11 swiper- wrapper_12`. migration.css line 2697 sets `.integ-ration-grid.mt4.swiper-wrapper { grid-template-columns: 1fr ×8 }`. With 12 cards in 8 columns = 2 rows (8 + 4) — the 4-card second row leaves visible empty space mid-page. Live's CSS for `.swiper-wrapper_12` sets 12 columns; that variant rule was never ported to migration.css. Fix: scope the 12-column override to .rp-local-payroll's all-in-one slider so other pages using `.swiper-wrapper_12` (if any) aren't touched without explicit verification. ========================================================================== */ .rp-local-payroll .swiper-allinone-slider .integ-ration-grid.mt4.swiper-wrapper.swiper-wrapper_12 { grid-template-columns: repeat(12, 1fr); } /* ============ §M. BOTTOM SECTION-HEADER H2 — drop 56px padding =========== migration.css:1316 ships `padding-top: 56px` on the long compound `.new_landing_page_payroll_header...new-rp-section-header`. Live keeps the 56 on the TOP-OF-PAGE main-section-holder headings ("Integrated HRIS & Payroll Platform" + "Run compliant local payroll...") but overrides to 0 on the BOTTOM headings ("Transparent Pricing" + "RemotePass automates payroll..."). The bottom 2 are inside `.new-rp-section.new-rp-section-vertical-border-slider-section` (the Pricing + carousel sections), so scope here. ========================================================================== */ .rp-local-payroll .new-rp-section.new-rp-section-vertical-border-slider-section > .new_landing_page_payroll_header.new_landing_page_badge_header.new_landing_page_apple-pay_header.new_landing_page_apple-pay_add-header.new-rp-section-header, .rp-local-payroll .new-rp-section-vertical-border-slider-section-linear > .new_landing_page_payroll_header.new_landing_page_badge_header.new_landing_page_apple-pay_header.new_landing_page_apple-pay_add-header.new-rp-section-header, /* Transparent Pricing H2 carries .no-pt.no-mt.no-padding modifiers but migration.css doesn't define those utilities, so the 56px from the compound selector still wins. Drop padding-top here too. */ .rp-local-payroll .new_landing_page_payroll_header.new_landing_page_badge_header.new_landing_page_apple-pay_header.new_landing_page_apple-pay_add-header.new-rp-section-header.no-padding { padding-top: 0; } /* ============ §K. "RemotePass automates payroll" SECTION wrapper ========= Live: bg=rgb(255,255,255), padding=0px 32px 56px. Local: bg=rgba(0,0,0,0), padding=60px 24px. v2 (2026-05-01): the section wrapper is `.new-rp-section.new-rp- section-vertical-border-slider-section.new-rp-section-vertical-border- slider-section-linear.new-rp-section-vertical-border-slider-section- no-bg.light-blue-new.no-bg`, NOT `.hero_double_section_2_no-padding` as I'd guessed. Targeting the unique `.light-blue-new.no-bg` combo on the section. ========================================================================== */ .rp-local-payroll .new-rp-section.new-rp-section-vertical-border-slider-section-linear.light-blue-new.no-bg { background-color: #ffffff; padding: 0 32px 56px; } /* #8 (2026-07-05): LP hero — solid lavender fill, no white top band. The shared product-hero default fades a transparent→#e4ebfe gradient over a white background-color, leaving a white band at the top (behind the G2/Capterra badges) — most visible on /ar/. Flatten to a solid lavender fill so the whole hero is one colour, EN + AR. */ body.page-template-page-local-payroll .hero_double_section.new_rp_hero_double_section { background-color: #e4ebfe !important; background-image: none !important; } /* #10 (2026-07-05): §pain (.rp-lp-pain) AR vertical-padding parity. On /ar/, migration-rtl's `.rp-local-payroll .rp-container { padding: 0 24px }` (specificity 0,2,0, enqueued AFTER intro.css) ties and beats `.rp-intro.rp-section { padding: 80px 24px }` by source order, collapsing the AR pain section to 0/0 top+bottom — EN keeps 80/80. Restore AR to the EN values with a higher-specificity (0,4,0) rule (no !important needed). Applies EN too, where it's a no-op (already 80/80). Desktop 80, ≤991px 56 — matches intro.css. */ .rp-local-payroll .rp-intro.rp-lp-pain.rp-section { padding-top: 80px; padding-bottom: 80px; } @media (max-width: 991px) { .rp-local-payroll .rp-intro.rp-lp-pain.rp-section { padding-top: 56px; padding-bottom: 56px; } }