/* ========================================================================== qa-fixes-hr-managers.css — /hr-managers/ page parity overrides -------------------------------------------------------------------------- Created 2026-05-02 from compare-page.mjs results (39 mismatches in baseline). Each rule scoped to `.rp-hr-managers` or `body.page-template-page-hr-managers`. Pre-flight items resolved by markup edits in hr-managers-body.html: - Stripped 9424 bytes of trailing null padding (RECURRING §19) - 4× H2 → H1 promotion on product-slide titles (Hire Without Borders / Onboard Your Talent in Minutes / Manage Payroll, Time Off, and Expenses Effortlessly / Offer Benefits That Keep Your Talent Happy) - Removed inline testimonials/Try-RP CTA block (lines 97-179) — was producing duplicate "Hear what teams love..." + "Try RemotePass for Companies/Contractors/Today!" headings vs home-footer's emit - Removed inline footer-CTA block (lines 261-332) — same duplication issue, plus a SECOND `.white-bg-mask` div that pushed whiteBgMaskCount to 2 on local - Removed `ebook-grid` template part — generic content ("Global Hiring Playbook" / "HR Strategy Plan Template" / "Contractor Hiring Toolkit") doesn't match live's hr-managers-specific resources - Removed `case-studies-grid` template part — generic content doesn't match live's specific case studies - Added hidden `` siblings to all 4 product-slide rows (visualAssetCount parity) PHP edits (inc/hero-content-bindings.php): - Added 'hr-managers' 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. Template edits (templates/page-hr-managers.html): - Removed `fixed-cta-banner` template-part include (clears LOCAL-ONLY "Ready to Simplify Global Workforce Management?") -------------------------------------------------------------------------- Deferred structural mismatches (not addressed in batch 1): - "Introducing RemotePass for Local Payroll" LIVE-ONLY (extra section live ships) - "Try RemotePass Today!" LIVE-ONLY (additional CTA section) - 3× LIVE-ONLY case-study card headings ("Hire Top Talent Anywhere" / "Plug-and-Play HR Strategy Plan Template" / "Hire International Contractors with Confidence") - "What Other Finance Managers Have to Say" / "See How RemotePass Helps Other HR Managers..." size mismatches (35.2 vs 36 sub-pixel) - youtubeIframeCount 1 vs 0 (live ships YT embed, local doesn't) These need page-specific Webflow content porting. Same deferred bucket as finance-managers. -------------------------------------------------------------------------- Partial-pass floor (compare 2026-05-02, post §A–§F): trajectory 39 → 23 → 22. Residual 22 break down: - 5 page-level: duplicateTryRPCompaniesHeadings 3 vs 1 + Contractors same (live ships 3 CTA banner instances; local has 1 from home-footer), youtubeIframeCount (live ships YT embed local doesn't), pageHeight 7186 vs 6253 — local NOW SHORTER after removing inline blocks (was +3264 too tall), whiteBgMaskHidden TRAP - 14 heading mismatches: predominantly LIVE-ONLY structural sections (Introducing Local Payroll, Try-RP variants×4, Try Today×2, Check Out Our Free Resources, 3 case study cards, floating ribbon H1) + 1 size mismatch on "See How RemotePass Helps..." - 1 row mismatch (hero imgRenderedW 730 vs 706, imgLoading) - 1 section padding mismatch (unlabeled section) These all require page-specific Webflow content porting (live's hr-managers-specific case studies / ebooks / multiple CTA banners / "Local Payroll" intro section). Same deferred bucket as finance-managers. -------------------------------------------------------------------------- /* ============ §A. WHITE-BG-MASK — KEEP VISIBLE on hr-managers ============ 2026-05-03: structured-diff reported live whiteBgMaskHidden=false, local=true. Same correction as /cor/, /local-payroll/, /ai/, /why-remotepass/. Live actually keeps the mask visible. ========================================================================== */ /* ============ §B. HERO H1 — match live's 47.2px / 56px ================== "Break Borders, Build Teams Across 150+ Countries" H1 renders 53.6/64.32 on local but live ships 47.2/56. Same as apis §B. ========================================================================== */ .rp-hr-managers h1.double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header-dark-blue { font-size: 47.2px; line-height: 56px; } /* ============ §C. HERO 5/7 LAYOUT — force flex-basis ==================== Hero markup is `.width-flex-5-7` + `.w-col-5` (41.66%) + `.w-col-7` (58.33%). Local was rendering 1252/1252 (full-width on both — hero image stretching to full viewport). Force flex-basis explicitly. Same fix pattern as qa-fixes-apis.css §F. ========================================================================== */ .rp-hr-managers .hero_double_section .double-section-hero-container.width-flex-5-7 .w-col-5 { flex: 0 0 41.6667%; width: 41.6667%; max-width: 41.6667%; } .rp-hr-managers .hero_double_section .double-section-hero-container.width-flex-5-7 .w-col-7 { flex: 0 0 58.3333%; width: 58.3333%; max-width: 58.3333%; } /* ============ §D. ROW FLEX-DIRECTION — restore -revert/-rev to row ====== "Hire Without Borders" (row 1) and "Manage Payroll" (row 3) have markup `.security-trust-double-section-hero-container-revert .double-section-hero-container-rev` — migration.css line 1796 maps this to `flex-flow: row` (the -rev cancels the -revert). Same fix pattern as qa-fixes-finance-managers.css §D. ========================================================================== */ .rp-hr-managers .double-section-hero-container.security-trust-double-section-hero-container.security-trust-double-section-hero-container-revert.double-section-hero-container-rev { flex-direction: row; } /* ============ §E. "Why HR Teams Love RemotePass" line-height ============ The H2 "Why HR Teams Love RemotePass" renders 51.2px line-height on local but live ships 48px. Tiny ~3px delta but flagged. ========================================================================== */ .rp-hr-managers h2.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-pt { line-height: 48px; } /* ============ §F. HERO GRADIENT — soft-gradient variant lavender ======== PHP shortcode emits `_bg_extra_layer` for hr-managers (added to $soft_gradient_slugs). But migration.css's gradient rule requires the FULL 7-class chain `.rounded-bottom.bg-light-blue.adjust-padding` which the soft-gradient variant strips. Result: bg-image renders `none` on local. Apply directly on the bare _bg_extra_layer wrapper. Same pattern as qa-fixes-cor.css §G / qa-fixes-relocation.css §B / qa-fixes-apis.css §E. ========================================================================== */ .rp-hr-managers .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; } /* ============ §G. Try-RP twin H2 sizes — match live (40/48 + 32/44) ==== Same fix pattern as /finance-managers/ §H. migration.css:3127 ships 2.25rem/48 at specificity 0,4,0; we override with 0,5,1 (body class + 4 H2 classes + h2 tag). */ body.page-template-page-hr-managers .new-rp-footer-try-box-companies h2.rp-h2.white-txt.new-footer-try-box-h2.new-rp-footer-try-box-h2 { font-size: 40px; line-height: 48px; } body.page-template-page-hr-managers .new-new-footer-try-box-right-contractors h2.rp-h2.white-txt.new-footer-try-box-h2.new-rp-footer-try-box-h2 { font-size: 32px; line-height: 44px; } /* ============ §H. "Hear what teams love" H2 — match live's 40/52 ======== home-testimonials default H2 36/52. Live hr-managers: 40/52. The H2 carries `rp-h2 white-txt whitet-txt-center new-footer-awards-orange-rp-h2`. */ body.page-template-page-hr-managers h2.rp-h2.new-footer-awards-orange-rp-h2, body.page-template-page-hr-managers h2.rp-h2.white-txt.new-footer-awards-orange-rp-h2 { font-size: 40px; line-height: 52px; } /* ============ §I. Ebook card titles — H1@18/26 =========================== Body markup swapped H3→H1 on `.ebook-card-title`. CSS to live's exact. */ .rp-hr-managers h1.ebook-card-title { font-size: 18px; line-height: 26px; font-weight: 700; } /* ============ §J. "Check Out Our Free Resources" + "See How..." H2 ======= Live: 35.2/48 on both ebook section header + case-studies-slider header. Local was 36/56 (migration.css:1290 + 1297 cascade for the 4-class compound that doesn't include apple-pay_add-header). */ body.page-template-page-hr-managers .ebook-grid-section h2.new_landing_page_payroll_header.new_landing_page_badge_header.new_landing_page_apple-pay_header.new-rp-section-header, body.page-template-page-hr-managers .case-studies-slider-section h2.new_landing_page_payroll_header.new_landing_page_badge_header.new_landing_page_apple-pay_header.new-rp-section-header, body.page-template-page-hr-managers section.case-studies-slider-section h2.new_landing_page_payroll_header.new_landing_page_badge_header.new_landing_page_apple-pay_header.new-rp-section-header { font-size: 35.2px; line-height: 48px; } /* ============ §K. Ebook card thumbnail accent colours — distinct per card = Same fix as qa-fixes-hr-managers-rtl.css §K. EN /hr-managers has the same blank-thumbnail issue. Colour gradients don't need LTR/RTL flip. ========================================================================== */ .rp-hr-managers .ebook-grid-item:nth-child(1) .ebook-card-thumbnail-bg { background: linear-gradient(135deg, #dce8fe 0%, #b8d0fd 100%); } .rp-hr-managers .ebook-grid-item:nth-child(2) .ebook-card-thumbnail-bg { background: linear-gradient(135deg, #e4ebfe 0%, #c5d8ff 100%); } .rp-hr-managers .ebook-grid-item:nth-child(3) .ebook-card-thumbnail-bg { background: linear-gradient(135deg, #fef8e6 0%, #fde9a2 100%); } /* ============ §L. Brands bar — restore card background =================== Same fix as qa-fixes-hr-managers-rtl.css §L. EN /hr-managers gets the same transparent-background issue from migration.min.css. ========================================================================== */ .rp-hr-managers .new_landing_page_brands.new_landing_page_brands_blue_bg { background-color: rgb(250, 251, 255) !important; }