/* ========================================================================== qa-fixes-background-check.css — /remotepass-background-check/ overrides -------------------------------------------------------------------------- Created 2026-05-02 from compare-page.mjs results (28 mismatches in baseline). Each rule scoped to `.rp-background-check` or `body.page-template-page-background-check`. Pre-flight items resolved by markup edits in background-check-body.html: - 4× H2 → H1 promotion on product-slide titles (Uncover Red Flags, Reduce Time to Hire, Minimize Hiring Risks, Peace of Mind with Compliance) so heading-audit tag mismatch clears - Removed entire "Our Screening Services" section (page-specific enhancement that doesn't exist in Webflow source — flagged 7 LOCAL-ONLY headings) - Removed duplicate `home-testimonials` + `home-try-rp` template-part includes (they're already in home-footer.html — RECURRING-ISSUES #1) - Added hidden `.landing-page-form-container.hidepopup` "Let's Chat" form block so heading audit pairs with live's H2 PHP edits (inc/hero-content-bindings.php): - Added 'remotepass-background-check' to a new $no_gradient_slugs list so the hero shortcode emits ONLY the 3 base classes (no _bg_extra_layer, no rounded-bottom/bg-light-blue/adjust-padding). Gradient is provided below via §B. Slug-vs-template note: post_name is 'remotepass-background-check' (URL), but the template/body files are named 'background-check'. That's why wrapper class is `.rp-background-check` and body class is `.page-template-page-background-check`. -------------------------------------------------------------------------- Cosmetic-only floor (compare 2026-05-02, post §A–§G + Lottie ports + PHP `$lottie_hero_slugs` map): trajectory 28 → 4 → 2 → 4. Residual: 1. whiteBgMaskHidden live=false / local=true — TRAP per RECURRING-ISSUES §2; local hide is correct. 2. pageHeight 8353 vs 8910 — informational; local is now 557px TALLER than live after Lottie content was added. Spread delta. 3. home-support row img imgRenderedW=0/false (live, lazy not yet triggered) vs 32/true (local, eager). Template-part icon — intentional eager per RECURRING-ISSUES §6 (above-fold UX). 4. home-privacy row img — same pattern as #3. No heading / section mismatches remain. Cowork visual QA 2026-05-02 caught what the structural diff missed: hero + 4 product slides had ZERO rendered visuals because Webflow's legacy `
` requires webflow.js to convert into a player at runtime, and we don't bundle webflow.js. Fixed by: - Body file: 4× legacy `
` → `` for the Red-Flags / Time-to-hire / Minimize-Risk / Privacy_SOC slides - PHP: rp_hero_image_shortcode now emits `` when (a) post slug appears in $lottie_hero_slugs map (bgc → Header_1) or (b) the post-meta image URL ends in .lottie - Copied Header_1.lottie + Time-to-hire.lottie from Webflow source - §G: ported grid-3-cols stats layout from .rp-local-payroll (live values: 54px main / 20px sub / repeat(3,1fr) grid / 1px black dividers between cards) compare-page.mjs got a new `visualAssetCount` row-level audit (counts + legacy lottie divs + ) so future pages with missing assets fail the structural diff instead of passing it. -------------------------------------------------------------------------- ========================================================================== */ /* ============ §A. WHITE-BG-MASK — hide on background-check =============== RECURRING-ISSUES.md #2. The hardcoded `top: 1087px` mask in home-footer lands on visible content. TRAP: don't undo this if the diff flags `whiteBgMaskHidden: live=false / local=true` after the fix is applied — that's the correct state. ========================================================================== */ .page-template-page-background-check .white-bg-mask, .page-template-page-background-check .new-footer-white-bg-mask, .rp-background-check ~ * .white-bg-mask, .rp-background-check ~ * .new-footer-white-bg-mask { display: none !important; } /* ============ §B. HERO GRADIENT — bare-wrapper variant =================== Live's hero on this page renders with ONLY the 3 base classes (`hero_double_section new_rp_hero_double_section new_rp_hero_double_section_bg`) — no `_bg_extra_layer`, no `rounded-bottom`, no `bg-light-blue`, no `adjust-padding`. The PHP shortcode now emits 'no-gradient' for this slug, which strips all those modifier classes. But live STILL has a linear-gradient bg-image (lavender top fade at 20% stop). That gradient has no canonical CSS rule on the bare wrapper, so we provide it here. Stop is 20% (vs the standard 15% used by other pages with _bg_extra_layer) — confirmed via DOM probe of live. ========================================================================== */ .rp-background-check .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg { background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 20%, rgb(228, 235, 254)); background-position: 0 0; background-repeat: repeat; background-size: auto; background-attachment: scroll; } /* ============ §C. TRUST BADGES — heading sizes match live ================ Same recurring pattern as cor / local-payroll / ai / relocation. Live: 32px / 48px. Local: 21.6px / 25.92px (default migration size). The "Trusted by Customers" tag mismatch (live H2/local H2 here, same) reads cosmetic — not the H3 issue seen on relocation. ========================================================================== */ .rp-background-check .badges-trusted-new-design-main-header, .rp-background-check .badges-trusted-new-design-main-header.badges-trusted-new-design-main-header-white { font-size: 32px; line-height: 48px; } /* ============ §D. FAQS HEADING — match live's 36px / 38px ================ Heading audit reports `FAQs` at 28px/36.4px on local vs 36px/38px on live. The selector chain in migration.css for `.guide_hiring_faq_h.guide_hiring_faq_h_gray` ships at 28px; bump page-scoped to 36px to match. ========================================================================== */ .rp-background-check .guide_hiring_faq_h, .rp-background-check .guide_hiring_faq_h.guide_hiring_faq_h_gray { font-size: 36px; line-height: 38px; } /* ============ §E. CTA STATS SECTION — white bg + 3-stop lavender fade ==== Section "Conduct secure background checks directly within the RemotePass platform" reports bg=#f5f7fa (gray) on local but #fff with linear-gradient bg-image on live. The local section has classes `new-rp-section new-rp-section-gray-bg ... new-rp-section-vertical-border-slider-section-no-bg` — the `gray-bg` rule is winning over the `no-bg` modifier. Override. Live's gradient has 3 stops (verified via DOM probe): 0% rgba(228, 235, 254, 0.5) — soft lavender top 80% rgba(228, 235, 254, 0) — fades fully to transparent 100% rgb(255, 255, 255) — opaque white The 2-stop flat-wash version (initial fix) didn't match live. Fixed 2026-05-02 after the §E follow-up probe. ========================================================================== */ .rp-background-check .new-rp-section.new-rp-section-gray-bg.new-rp-section-vertical-border-slider-section-no-bg { background-color: #ffffff !important; background-image: linear-gradient(rgba(228, 235, 254, 0.5), rgba(228, 235, 254, 0) 80%, rgb(255, 255, 255)); } /* ============ §F. LET'S CHAT POPUP HEADING — match live's 39px / 46.8px == The hidden `.landing-page-form-container.hidepopup .rp-h2` "Let's Chat" heading renders at 39px / 46.8px on live but the default `rp-h2` rule gives it 32px / 41.6px on local. Scope to the lets-chat container so we don't leak into other pages' rp-h2 instances. ========================================================================== */ .rp-background-check .landing-page-lets-chat .rp-h2, .rp-background-check .landing-page-form-container.hidepopup .rp-h2 { font-size: 39px; line-height: 46.8px; } /* ============ §G. CTA STATS GRID — port from .rp-local-payroll ========= Cowork visual QA 2026-05-02: stats wrapper renders as a vertical text stack instead of a 3-column grid because migration.css scopes the grid rules ONLY to `.rp-local-payroll`, `.rp-org-charts`, and `.rp-direct-employee` (lines 12792–12820 etc.). The bgc page uses identical markup (`.grid-2-cols.grid-2-cols-no-gap.grid-3-cols`) but gets nothing from the cascade. Live values via DOM probe (2026-05-02): wrap display: grid · grid-template-columns: repeat(3, 1fr) · gap: 16px 0 · max-width: 1300px item border-right: 1px solid #000 · padding: 0 16px main hdr 54px / 700-weight / #021143 sub hdr 20px / 400-weight / #021143 Card 2 has `grid-3-cols-item-card-no-border` (no border) and card 3 has `grid-2-cols-item-card-no-border` + `grid-2-cols-item-card-left-border` so the dividers fall between cards correctly (1|2|3 with two visible dividers). Same recurring pattern as RECURRING-ISSUES.md §24 — page-scoped migration.css rules need porting when a new page uses the markup. ========================================================================== */ .rp-background-check .grid-2-cols.grid-2-cols-no-gap.grid-3-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 0; max-width: 1300px; margin: 0 auto; padding: 0; } .rp-background-check .grid-2-cols-item-card { border-right: 1px solid #000; border-radius: 1px; padding: 0 16px; text-align: start; } .rp-background-check .grid-2-cols-item-card.grid-2-cols-item-card-no-border, .rp-background-check .grid-3-cols-item-card.grid-3-cols-item-card-no-border { border-right: 0; } .rp-background-check .grid-2-cols-item-card.grid-2-cols-item-card-left-border { border-left: 1px solid #000; } .rp-background-check .grid-3-cols-item-card-main-header { color: #021143; font-size: 54px; font-weight: 700; line-height: 1.1; margin-bottom: 4px; } .rp-background-check .grid-3-cols-item-card-sub-header { color: #021143; font-size: 20px; font-weight: 400; line-height: 1.4; } @media screen and (max-width: 991px) { .rp-background-check .grid-3-cols-item-card-main-header { font-size: 40px; } } @media screen and (max-width: 479px) { .rp-background-check .grid-2-cols.grid-2-cols-no-gap.grid-3-cols { grid-template-columns: 1fr; gap: 24px 0; } .rp-background-check .grid-2-cols-item-card, .rp-background-check .grid-2-cols-item-card.grid-2-cols-item-card-left-border { border-right: 0; border-left: 0; border-bottom: 1px solid #00000020; padding-bottom: 16px; } }