/* ========================================================================== qa-fixes-integrations.css — /integrations/ page parity overrides -------------------------------------------------------------------------- Created 2026-05-02 from compare-page.mjs results (11 mismatches in baseline). Each rule scoped to `.rp-integrations` or `body.page-template-page-integrations`. Pre-flight items resolved by markup edits in integrations-body.html: - Removed duplicate `home-testimonials` + `home-try-rp` includes (RECURRING-ISSUES #1) PHP edits (inc/hero-content-bindings.php): - Added 'integrations' to $no_gradient_slugs so hero shortcode emits ONLY the 3 base classes (no _bg_extra_layer / rounded-bottom / bg-light-blue / adjust-padding) matching live's bare-wrapper hero. Same pattern as remotepass-background-check. -------------------------------------------------------------------------- Cosmetic-only floor (compare 2026-05-02, post §A–§D): trajectory 11 → 3. Cleanest floor yet — below contractors/spend/apis. Residual: 1. whiteBgMaskHidden TRAP per RECURRING-ISSUES §2. 2. pageHeight 5797 vs 5901 — informational; local 104px taller. 3. Hero imgLoading=eager (local) vs lazy (live) — eager is correct above-fold UX per RECURRING-ISSUES §6 (set in PHP shortcode at inc/hero-content-bindings.php:267). No heading / row / section structural mismatches. -------------------------------------------------------------------------- ========================================================================== */ /* ============ §A. WHITE-BG-MASK — hide on integrations =================== RECURRING-ISSUES.md §2. Hardcoded `top: 1087px` mask in home-footer lands on visible content. TRAP: don't undo if the diff flags `whiteBgMaskHidden: live=false / local=true` after the fix. ========================================================================== */ .page-template-page-integrations .white-bg-mask, .page-template-page-integrations .new-footer-white-bg-mask, .rp-integrations ~ * .white-bg-mask, .rp-integrations ~ * .new-footer-white-bg-mask { display: none !important; } /* ============ §B. HERO GRADIENT — bare-wrapper variant w/ 20% stop ======= Live's hero on /integrations/ renders with ONLY the 3 base classes (`.hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg`) — same as remotepass-background-check. The PHP shortcode now emits 'no-gradient' for this slug, stripping all modifier classes. But live still has a linear-gradient bg-image with a 20% stop. Provide it here. Same pattern as qa-fixes-background-check.css §B. ========================================================================== */ .rp-integrations .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. SECTION HEADINGS — match live's 39px / 46.8px ========== "All your favorite tools are here." and "Made for every workflow." render at 32px/41.6px on local (default `.rp-h2` rule) but live ships 39px/46.8px. Page-scoped class-chain override. ========================================================================== */ .rp-integrations .rp-h2, .rp-integrations h2.rp-h2.text-capitalize, .rp-integrations h2.rp-h2.white-txt { font-size: 39px; line-height: 46.8px; } /* ============ §D. HERO IMAGE — match live's 602px render ================ compare report: row "Keep all your data and dots connected." imgRenderedW=626 (local) vs 602 (live). Same pattern as qa-fixes-relocation.css §E — live caps the hero image at 602px. ========================================================================== */ .rp-integrations .main-hero-section-img { width: 602px; height: auto; object-fit: cover; } /* ============ §E. RP-CONTAINER — restore 8.33em horizontal padding ======= Phase 2-integrations (2026-05-02): the "All your favorite tools are here" tab section was rendering its 6 product cards at 466×272 (wider, content clipped to single line) instead of live's 384×336 (taller, full description visible). DOM was identical between live and local (same .fav-tool-wrap → .tool-content → f20semi/int-type/p.f16 structure), so the divergence was purely a layout-width issue. Tracing up the parent chain: `.fav-tools-grid` parent rendered at 948px on local vs 785px on live, both inside a `.rp-container.py16` that was correctly 1300px wide on both sides. The difference: live's `.rp-container.py16` has L/R padding of `108.29px` (= 8.33em at 13px font size). Local's was rendering 24px. Source: `qa-fixes-global.css` lines 783-786 added a global override `.rp-container { padding-left: 24px; padding-right: 24px; }` (loaded after migration.css which has the canonical 8.33em rule). That global override is needed for some pages but breaks integrations where the tab section relies on 108px wings to wrap text inside the cards. Fix: page-scoped override at specificity 0,2,0 to win on the cascade. Mobile (<991px) keeps the global 16px rule for safe edge-to-edge. ========================================================================== */ .rp-integrations .rp-container { padding-left: 8.33em; padding-right: 8.33em; } @media screen and (max-width: 991px) { .rp-integrations .rp-container { padding-left: 16px; padding-right: 16px; } } @media screen and (max-width: 767px) { .rp-integrations .rp-container { padding-left: 16px; padding-right: 16px; } } /* ============ §F. DT-BR — desktop line break inside H2s ================= Phase 2-integrations (2026-05-02): the H2s "All your favorite tools are here." and "Made for every workflow." each contain a `` between two halves of the heading. Live renders this as a desktop line break (display: block) so each H2 wraps to 2 lines. Local renders it as `display: inline` (per migration.css line 13887, which is INVERTED — it sets inline on desktop instead of block). Result: local headings render as 1 line at 47px tall vs live's 2 lines at 94px, and the dark-blue "Made for every workflow." section is ~600px shorter on local. Fix: set `display: block` on desktop, restore `display: inline` on mobile to collapse to a single line of body-sized text. Same convention used on Webflow's `dt-br` utility (desktop break, mobile inline). ========================================================================== */ .rp-integrations .dt-br { display: block !important; } @media screen and (max-width: 767px) { .rp-integrations .dt-br { display: inline !important; } } /* ============ §G. TAB BUTTONS — neutralize