/* ========================================================================== qa-fixes-apis.css — /apis/ page parity overrides -------------------------------------------------------------------------- Created 2026-05-02 from compare-page.mjs results (28 mismatches in baseline). Each rule scoped to `.rp-apis` or `body.page-template-page-apis`. Pre-flight items resolved by markup edits in apis-body.html: - Stripped 9560 bytes of trailing null/whitespace padding (RECURRING §19) - 3× H2 → H1 promotion on product-slide titles (Connect With Your Tech Stack, Automate Workflows, Future-Proof Your Business) - Replaced `[rp_youtube]` facade shortcode with direct iframe (RECURRING §4) so live's `youtubeIframeCount=1` matches - Removed duplicate `home-testimonials` + `home-try-rp` includes (RECURRING §1) - Added hidden Let's Chat popup (matches live's "Let's Chat" H2) - Added hidden `` siblings to all 3 product-slide rows (Connect/Automate/Future) so visualAssetCount pairs at 2 PHP edits (inc/hero-content-bindings.php): - Added 'apis' 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 Template edits (templates/page-apis.html): - Removed `fixed-cta-banner` template-part include (cleared the LOCAL-ONLY "Ready to Simplify Global Workforce Management?" H3). Live ships its own apis-specific floating ribbon ("RemotePass APIs" H1 + Book a Demo) which is now in apis-body.html instead. -------------------------------------------------------------------------- Cosmetic-only floor (compare 2026-05-02, post §A–§K): trajectory 28 → 14 → 10 → 9 → 9. Residual: 1. whiteBgMaskHidden TRAP per RECURRING-ISSUES §2. 2. pageHeight 8917 vs 9374 — informational; local 457px taller. 3. Hero row visualAssetCount 7 vs 4 — live emits 3 G2 badges (Capterra/ G2/Trustpilot) in the hero section that the PHP shortcode doesn't emit by default. _rp_hero_show_badges meta = '1' would add them but the badge markup mismatch tree gets complex; deferred. 4-6. 3 product slide rows: imgRenderedW 525 vs 532 (~7px sub-pixel) + leftColW/rightColW 618/626 (8px sub-pixel page-width delta). 7-8. 2 template-part rows (home-support, home-privacy): same 8px col-width pattern. 9. "See RemotePass APIs in Action" bgImage URL — Webflow CDN (`cdn.prod.website-files.com/...`) vs local theme path. Same identical SVG bytes, different host. Cosmetic-only per the contractors precedent (RECURRING TRAP — not actionable). No heading mismatches, no flex/layout structural issues. Below the contractors/spend cosmetic floor pattern (which had 4-5 cosmetic). Cowork visual QA pass 2 fixes shipped: §L — Integrations heading wrapper centered via margin: 0 auto on `.new-rp-sync-container .mw5.pb-8`. Local wrap was at x=62 (flush left of parent); now at x=419 (centered, margin 357.5/357.5). Restores Cowork's "visually centered" expectation. §M — Hero G2 badges sized to match live's exact dimensions: 75×85 (CapTerra/Trustpilot) and 120×138 (big G2 badge). Local SVG files have a different intrinsic aspect ratio than live's CDN versions; explicit pixel heights override `height: auto`. -------------------------------------------------------------------------- ========================================================================== */ /* ============ §A. WHITE-BG-MASK — hide on apis ============================ RECURRING-ISSUES.md §2. The 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-apis .white-bg-mask, .page-template-page-apis .new-footer-white-bg-mask, .rp-apis ~ * .white-bg-mask, .rp-apis ~ * .new-footer-white-bg-mask { display: none !important; } /* ============ §B. HERO H1 — match live's 47.2px / 56px =================== compare report: H1 "RemotePass APIs" 47.2px/56px (live) vs 53.6px/64.32px (local — TT5 default H1 winning). Live's H1 has class `.font-2-6rem` but the PHP shortcode emits the H1 without that class, so we can't target it. Page-scoped selector matching local's actual class chain. ========================================================================== */ .rp-apis h1.double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header-dark-blue { font-size: 47.2px; line-height: 56px; } /* ============ §E. HERO GRADIENT — soft-gradient variant lavender ========= PHP shortcode now emits `_bg_extra_layer` for apis (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. Live's gradient is the standard lavender 0→15%→solid (same as the default product hero). Apply directly on the bare _bg_extra_layer wrapper. Same pattern as qa-fixes-cor.css §G / qa-fixes-relocation.css §B. ========================================================================== */ .rp-apis .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; } /* ============ §F. HERO 5/7 LAYOUT — force flex-basis ==================== Hero markup has `.width-flex-5-7` + `.w-col-5` (41.66%) + `.w-col-7` (58.33%). Live renders 522/730 ≈ 41.7%/58.3% (correct). Local renders 297/955 — way off, because TT5's flex defaults override the `width:%` rules from migration.css. Force flex-basis explicitly. ========================================================================== */ .rp-apis .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-apis .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%; } /* ============ §G. LET'S CHAT POPUP HEADING — match live's 39px/46.8px ==== Same fix as qa-fixes-background-check.css §F. The hidden `.landing-page-form-container.hidepopup .rp-h2` H2 renders 32/41.6 on local; live ships 39/46.8. Scope to the lets-chat container. ========================================================================== */ .rp-apis .landing-page-lets-chat .rp-h2, .rp-apis .landing-page-form-container.hidepopup .rp-h2 { font-size: 39px; line-height: 46.8px; } /* ============ §H. FLOATING RIBBON CTA — hidden by default ================ Webflow's apis page ships a `.floating-main-container` that JS toggles visible only when the hero scrolls out of view. We mirror the markup for heading-audit parity (live's second "RemotePass APIs" H1 lives in it) but keep it hidden by default — same approach as the `.landing-page-form-container.hidepopup` pattern. Visible content is the regular hero. ========================================================================== */ .rp-apis .floating-main-container.apis-floating-ribbon { position: fixed; inset: auto 0 0 0; opacity: 0; pointer-events: none; z-index: -1; } /* ============ §I. FLOATING RIBBON H1 — match live's 26.4px / 35px ======== The H1 inside .floating-buttons-container-left has class chain `.double-slide-landing-page-left-main-header.security-trust-double-slide- left-grow.double-slide-landing-page-left-main-header-dim-gray.double- slide-landing-page-left-main-header-full-width`. Live ships 26.4px/35px (a smaller ribbon-style heading). Local renders TT5 H1 default 56/67.2. Page-scoped class chain override. ========================================================================== */ .rp-apis .floating-buttons-container-left h1.double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header-full-width { font-size: 26.4px; line-height: 35px; } /* ============ §L. INTEGRATIONS HEADING WRAPPER — center on apis ========= Cowork visual QA: integrations section "Integrate with Your Tech Stack" H1 + sub-copy + "See all integrations" link sit at x=62 on local but x=102 on live (40px closer-to-center indent). Both have text-align: left at the heading element level — the visual difference is wrapper x-position. Probe data: LIVE wrap x=102 w=585 maxW=none LOCAL wrap x=62 w=585 maxW=800px Center the wrapper via margin: 0 auto (works on local because of the 800px max-width). Keeps the heading's own left-align intact. Same pattern Cowork recommended (port-of-spend §N approach). ========================================================================== */ .rp-apis .new-rp-sync-container > .mw5.pb-8, .rp-apis .new-rp-sync-container .mw5.pb-8 { margin-left: auto; margin-right: auto; } /* ============ §M. HERO G2 BADGES — match live's aspect ratio ============ Cowork visual QA: hero badges render at half-height on local (75×44 vs live's 75×85 / 88×100 / 75×85). Local SVG files appear to have a different intrinsic aspect ratio than live's CDN versions, and `.rating-brand-img.rating-brand-img-extra-style` sets `width: 75px; height: auto` — natural-aspect from the wrong-shape SVG produces 44px height. Override with explicit pixel heights matching live's rendered dimensions. Scoped to the apis hero so other pages aren't affected. ========================================================================== */ .rp-apis .new_rp_hero_double_section img.rating-brand-img.rating-brand-img-extra-style { width: 75px; height: 85px; } .rp-apis .new_rp_hero_double_section img.rating-brand-img.rating-brand-img-extra-style.rating-brand-img-extra-big-style { width: 120px; height: 138px; } /* ============ §K. PRODUCT-SLIDE ROW COL WIDTHS — match live's 626 ======== Compare reports `leftColW=618; rightColW=618` (local) vs `626; 626` (live) on 5 separate rows (3 product slides + home-support + home-privacy template parts). 8px delta each side = 16px total = the outer `.rp-container.security-trust-hero-container` is rendering 1236 wide on local vs 1252 on live. Same pattern as spend §H. Live's outer container has padding pushing inner to 1252; local computes a slightly narrower inner. Force max-width 1252 on the outer so both sides' inner widths match. ========================================================================== */ .rp-apis .rp-container.getguide-rp-container.super-app-hero-container.security-trust-hero-container { max-width: 1252px; } /* ============ §C. TRUST BADGES — heading sizes match live ================ Same recurring pattern as cor / local-payroll / ai / relocation / bgc / spend. Live: 32px/48px. Local: 21.6px/25.92px (default migration). ========================================================================== */ .rp-apis .badges-trusted-new-design-main-header, .rp-apis .badges-trusted-new-design-main-header.badges-trusted-new-design-main-header-white { font-size: 32px; line-height: 48px; } /* ============ §D. YT-VIDEO WRAPPER — match live's aspect-ratio sizing ==== "See RemotePass APIs in Action" video. Live ships a Webflow `.w-embed-youtubevideo.yt-player` wrapper with inline `padding-top: 56.17%`. We use a cleaner `.yt-video-wrapper` with aspect-ratio. Same canonical pattern as RECURRING §4. ========================================================================== */ .rp-apis .yt-video-wrapper { position: relative; max-width: 1083px; aspect-ratio: 16 / 9; margin: 32px auto 0; border-radius: 24px; overflow: hidden; background: #000; } .rp-apis .yt-video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }