/* AUTO-GENERATED from qa-fixes-cor.css via rtlcss. Do not edit by hand. Loaded only on AR pages by inc/i18n-setup.php. */ /* ========================================================================== qa-fixes-cor.css — /cor/ Contractor of Record page parity overrides -------------------------------------------------------------------------- Created 2026-05-01 from compare-page.mjs results on cor (extensive pre-flight, 27 mismatches in baseline). Each rule is scoped to `.rp-cor` (the body wrapper) or `body.page-template-page-cor` to ensure no leakage. Reference structure: qa-fixes-contractors.css. Pre-flight items resolved by markup edits in cor-body.html: - [rp_youtube] facade → direct iframe (RECURRING-ISSUES.md #4) - 5× H2 → H1 promotion on product slide headings - Removed duplicate home-testimonials + home-try-rp includes (RECURRING-ISSUES.md #1) - Hero modifier classes: handled in inc/hero-content-bindings.php by adding 'cor' to the no-gradient slug list. This file handles the CSS-fixable residuals. ========================================================================== */ /* ============ §A. WHITE-BG-MASK — KEEP VISIBLE on cor =================== 2026-05-03: structured-diff Run 2 reported live whiteBgMaskHidden=false, local=true (we were hiding it). Same correction Cowork made on contractors batch 6 ("§K Re-enables .white-bg-mask display"). Live keeps the mask visible for the bottom-of-page layered fade — hiding it produced the inverse mismatch. Removed the hide rules; default migration.css visibility now applies. ========================================================================== */ /* ============ §B. L/R ALTERNATION — port -revert to .rp-cor ============== `.security-trust-double-section-hero-container-revert` triggers `flex-direction: row-reverse` for product slides. The rule exists in migration.css but is scoped to `.rp-eor`, `.rp-contractors`, `.rp-global-payroll`, etc. — never extended to `.rp-cor`. Without it, features 1, 3, 5 on cor (which have the modifier in markup) render in the default `row` direction, which is the opposite of live's intended alternation. Port the rule. ========================================================================== */ .rp-cor .security-trust-double-section-hero-container-revert { flex-direction: row-reverse; } /* ============ §C. TRUST BADGES — heading sizes match live =============== Same pattern as home/contractors. Live: H2 32px / 48px on "Trusted by Customers," and H3 32px / 48px on "Recognized by Experts". Local was 21.6px / 25.92px. Headings carry `.badges-trusted-new-design-main-header`. ========================================================================== */ .rp-cor .badges-trusted-new-design-main-header, .rp-cor .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 36 px ====================== Live's FAQ section heading is H2 36px / 38px. Local was rendering at 28px / 36.4px (likely the migration's default H2 size). The heading is inside `.faq-sub-container` and uses class `.guide_hiring_faq_h`. ========================================================================== */ /* .rp-cor faq heading rule migrated to components/faq.css (.rp-faq) 2026-06-27 */ /* ============ §E. "SEE REMOTEPASS COR IN ACTION" — section bg-image ====== Live's #yt-video-style section has a CDN bg-image (light gradient pattern from website-files.com). Local was rendering bgImage=none. Restore the gradient using the locally-mirrored asset. ========================================================================== */ .rp-cor .new-rp-section.new-rp-section-vertical-border-slider-section-linear { background-image: url("/wp-content/themes/rp/assets/images/bg-pattern.svg"); background-position: 100% 0; background-repeat: repeat; background-size: auto; } /* ============ §G. HERO SOFT GRADIENT — match live's lavender top-fade ==== Live cor's hero has a 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 shortcode emits the new `soft-gradient` variant for cor (which adds `_bg_extra_layer` only, no rounded-bottom/bg-light-blue/adjust-padding). This rule provides the gradient without any of the lavender-only chrome. ========================================================================== */ .rp-cor .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: 100% 0; background-repeat: repeat; background-size: auto; background-attachment: scroll; padding-top: 40px; padding-bottom: 24px; } /* ============ §F. YT VIDEO WRAPPER — 16:9 responsive iframe ============= Same wrapper used on contractors. Constrains iframe to the same 1083 × 609 max-width that live uses, with rounded corners. ========================================================================== */ .rp-cor .yt-video-wrapper { position: relative; max-width: 1083px; aspect-ratio: 16 / 9; margin: 32px auto 0; border-radius: 24px; overflow: hidden; background: #000; } .rp-cor .yt-video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ============ §H. HERO IMAGE — cap to live's 706px ===================== Run 2 reported imgRenderedW 706 (live) vs 730 (local) on the hero row. 24 px wider on local because the right column was sized 6/12 of the container, not the live 5.85/12 ratio. Capping the image width matches live's rendering without restructuring the column flex-basis (live's exact 5.85 ratio isn't reachable from the 6/6 hero variant we use). */ .rp-cor .main-hero-section-img { max-width: 706px; width: 100%; height: auto; } /* ── Hero H1 — CoR Figma 15316:85684: size 56/64, two-tone navy #021143 + blue "150+ countries." (2026-06-27). `#rp-typo` opt-out beats migration.css's frozen 54px cap (the .double-slide-…-dark-blue class rule). Scoped to the CoR template to keep the size change to this page (not a `.rp-cor` restyle of the shared hero); promote to a product-hero component sheet if all product heroes adopt 56/64. */ body.page-template-page-cor #rp-typo.double-slide-landing-page-left-main-header { font-size: 2.95rem !important; line-height: 56px !important; letter-spacing: 0 !important; color: #021143 !important; } body.page-template-page-cor .double-slide-landing-page-left-main-header .highlight-it-blue { color: #114EF7 !important; } @media (min-width: 768px) and (max-width: 991px) { body.page-template-page-cor #rp-typo.double-slide-landing-page-left-main-header { font-size: 2.25rem !important; line-height: 53px !important; } } @media (max-width: 767px) { body.page-template-page-cor #rp-typo.double-slide-landing-page-left-main-header { font-size: 32px !important; line-height: 40px !important; } } body.page-template-page-cor .rp-hero-yt-play { margin-left: auto !important; margin-right: auto !important; } /* CTA size override reverted 2026-06-27 per leadership: keep the shared .btn size (16.25px). The Figma-14 vs live-16.25 button-text question is logged for a global decision, not forced on CoR. */