/* ========================================================================== 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: 0 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: 0 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; } /* Mohamed 2026-07-10: CoR hero video facade — show the custom poster in full, no crop. The facade helper sizes the object-fit:cover in a 16:9 box (crops the 1.40-ratio hero poster). Drop the cover crop + the black bg / fixed aspect for the CoR facade. */ .rp-cor .rp-yt-facade { aspect-ratio: 2504 / 1791 !important; /* match the poster's ratio → no crop, no collapse */ background: none !important; } .rp-cor .rp-yt-facade img { object-fit: contain !important; } /* The new CoR poster has a play button baked in — hide the facade's own overlay icon so there aren't two. The button stays (transparent, inset:0) so the card is still clickable and opens the video modal. */ .rp-cor .rp-yt-facade-btn svg { display: none !important; } /* ── 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; } /* tablet (Mohamed 2026-07-08) */ @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. */ /* ── R1 comments (2026-07-01) ─────────────────────────────────────────────── */ /* #12 — section-title hover REMOVED (Mohamed 2026-07-08). */ /* #9 — centre the "Custom workflows…" feature heading (the block markup adds .rp-fs-h-center to that h2). Beats the feature-split __txt left-align (0,2,0). */ body.page-template-page-cor .rp-feature-split__txt .rp-feature-split__h.rp-fs-h-center, body.page-template-page-cor .rp-fs-h-center { text-align: center !important; } /* #5 — "One Platform. One Invoice." (feature-trio col 2): text ABOVE image (Figma 16303:96799). Siblings keep image-first; only col 2 (marked --textfirst on the block) inverts by ordering its image to the bottom. */ body.page-template-page-cor .rp-feature-trio__col--textfirst { display: flex; flex-direction: column; } body.page-template-page-cor .rp-feature-trio__col--textfirst .rp-feature-trio__img { order: 2; margin-top: 24px; } /* 2026-07-30: below 991px the trio grid collapses to a single column (feature-trio.css), so the desktop text-above zigzag turns into TWO images adjacent — this col's image sits at its bottom, directly against the next col's top image, with all text pushed away (external QA screen recording). Restore image-first on mobile so every stacked column reads image -> heading -> text, matching its siblings. Mirrors the equivalent ≤991 reset feature-trio.css already applies to the .is-rev __txt variant. EN + /ar/cor share the component + body class, so this one rule covers both; desktop (>991) zigzag untouched. */ @media (max-width: 991px) { body.page-template-page-cor .rp-feature-trio__col--textfirst .rp-feature-trio__img { order: 0; margin-top: 0; } } /* Mohamed 2026-07-08: hero stack gap 8px ≤991; hero extra-layer rounded bottom 56px. */ @media screen and (max-width: 991px) { body.page-template-page-cor .double-section-hero-container { flex-direction: column !important; gap: 8px !important; } } body.page-template-page-cor .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer:not(.rounded-bottom):not(.bg-light-blue):not(.adjust-padding) { border-bottom-left-radius: 56px !important; border-bottom-right-radius: 56px !important; } /* Mohamed 2026-07-08: feature-trio image responsive sizing. */ @media (min-width: 768px) and (max-width: 991px) { body.page-template-page-cor .rp-feature-trio__img { width: 65% !important; margin-left: auto !important; margin-right: auto !important; display: block !important; } } @media (max-width: 767px) { body.page-template-page-cor .rp-feature-trio__img { width: 100% !important; } } /* Mohamed 2026-07-08: centre the "How our contractor of record solution works" heading. NOTE: markup class is misspelled `header-max-wiidth` — target .rp-hiw__heading instead. */ body.page-template-page-cor .rp-hiw__heading { margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* Mohamed 2026-07-08: remove the "Companies that made the switch" social-proof section on CoR. */ body.page-template-page-cor .rp-socialproof { display: none !important; } /* Mohamed 2026-07-08: feature-split media image responsive. */ @media (min-width: 768px) and (max-width: 991px) { body.page-template-page-cor .rp-feature-split__media-img { width: 65% !important; margin-left: auto !important; margin-right: auto !important; display: block !important; } } @media (max-width: 767px) { body.page-template-page-cor .rp-feature-split__media-img { width: 100% !important; } } /* Mohamed 2026-07-08: "Custom workflows…" — pull the heading out of the text column to a centered full-width section header above the image/bullets split. (Heading lives in synced block __txt; lift it via positioning on desktop/tablet.) */ @media (min-width: 768px) { body.page-template-page-cor .rp-feature-split--blue .rp-feature-split__inner { position: relative; } body.page-template-page-cor .rp-feature-split--blue .rp-feature-split__split { padding-top: 150px; } body.page-template-page-cor .rp-feature-split--blue .rp-feature-split__h { position: absolute; top: 0; left: 0; right: 0; margin: 0 !important; text-align: center !important; } }