/* AUTO-GENERATED from qa-fixes-spend.css via rtlcss. Do not edit by hand. Loaded only on AR pages by inc/i18n-setup.php. */ /* ========================================================================== qa-fixes-spend.css — /spend/ page parity overrides -------------------------------------------------------------------------- Created 2026-05-02 from compare-page.mjs results (13 mismatches in baseline). Each rule scoped to `.rp-spend` or `body.page-template-page-spend`. Pre-flight items resolved by markup edits in spend-body.html: - Removed duplicate `home-testimonials` + `home-try-rp` template-part includes (they're already in home-footer.html — RECURRING-ISSUES #1) - Added hidden `` siblings to the "How it works" and "Give your finance team" rows so visualAssetCount pairs with live (Webflow source ships a `.lottie-embeder.hide` wrapper alongside the visible `` — the lottie is intentionally hidden but counted) -------------------------------------------------------------------------- Cosmetic-only floor (compare 2026-05-02, post §A–§N): trajectory 13 → 6 → 5 → 5 → 5. Structural diff stays at 5 cosmetic; §J–§N fixed visual regressions Cowork's screenshot pass surfaced (the diff probes col-widths / flex / heading sizes but not card bg-colors, text colors, or text-align — those went undetected until visual review). Cowork visual QA pass 4 fix shipped: §Q — Transaction Cards inner wrapper `.hero_double_section_2.hero_double_section_revert.bg-blue` rgb(255,255,255) → rgb(2,17,67) navy. migration.css:2441 declares `.hero_double_section_2.hero_double_section_revert { background-color: #fff }` at specificity 0,2,0; Webflow's `.bg-blue` (0,1,0) loses. Page-scoped 3-class chain wins. Also tightened §M's light-border alpha 0.15 → 0.1 to match live. Cowork's "one big white block" was a real visual bug — when the card translucent-white bg (5% alpha) sat over white instead of navy, the cards visually merged into the background. Now they read as distinct cards over navy. Cowork visual QA pass 3 fixes shipped: §O — CTA "Book a free 15-minute demo..." sub-copy color rgb(105,105,105) → rgb(255,255,255) (`.gray-txt` was winning over `.text-white` on local) §P — "Speak to an expert" button text-transform: capitalize → none (live ships sentence-case "Speak to an expert"; local was rendering "Speak To An Expert") Cowork visual QA pass 2 fixes shipped: §J — hero sub-copy color rgba(255,255,255,0.85) → rgb(84,84,84) (was unreadable white-on-lavender) §K — Control Cards bg-blue/bg-light-blue/bg-soft-blue → restored card colors (cards 1+2 were rendering as empty white boxes because text was white-on-white) §L — Control Cards sub-copy text-align center (was rendering left-edge despite `.text-center` class) §M — Transaction Cards `light-blue-bg` translucent rgba(255,255,255, 0.05) bg over navy section + `light-border` + image full-width (cards were stark white, images undersized) §N — Effortless integration H2 text-align center (TT5 H2 default left-align was winning over `.text-center` class) Residual 5 (col-width / lazy-state cosmetics, unchanged from before): 1. whiteBgMaskHidden TRAP per RECURRING-ISSUES §2. 2. pageHeight 6908 vs 8163 — informational; local 1255px taller. 3. "How it works" row col widths 570 vs 602 — 32px Webflow runtime gap/margin pattern not in our cascade. 4. "Avoid adding" row: leftColW/rightColW 554/626 (live asymmetric) vs 590/590 (local equal). imgRenderedW lazy state. 5. "Give your finance team" CTA row: imgRenderedW 440 vs 512; col widths 586 vs 602; imgComplete lazy. -------------------------------------------------------------------------- ========================================================================== */ /* ============ §A. WHITE-BG-MASK — hide on spend =========================== 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 is applied — that's the correct state. ========================================================================== */ .page-template-page-spend .white-bg-mask, .page-template-page-spend .new-footer-white-bg-mask, .rp-spend ~ * .white-bg-mask, .rp-spend ~ * .new-footer-white-bg-mask { display: none !important; } /* ============ §B. HERO GRADIENT — match live's 3-stop with 5%/21% ======== Live's hero uses a different gradient than the standard 2-stop fade: 0% rgba(228, 235, 254, 0) — fully transparent 5% (still transparent, late-fade-in) 21% rgb(227, 235, 253) — note: 227/235/253 not 228/235/254 100% rgb(228, 235, 254) — solid lavender Local was rendering the standard `_bg_extra_layer` 2-stop gradient from migration.css (0→15% solid). The body file has the `with-gradient` modifier class on the hero wrapper — override the linear-gradient using that class as the specificity hook. Captured via DOM probe 2026-05-02. ========================================================================== */ /* migration.css:756 has a 7-class chain (specificity 0,7,0) setting the 2-stop gradient: `.hero_double_section.new_rp_hero_double_section. new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer. rounded-bottom.bg-light-blue.adjust-padding`. To override, our selector must match the same 7 classes (or more). RECURRING-ISSUES §26 pattern. */ .rp-spend .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer.rounded-bottom.bg-light-blue.adjust-padding.with-gradient { background-image: linear-gradient(rgba(228, 235, 254, 0) 5%, rgb(227, 235, 253) 21%, rgb(228, 235, 254)); } /* ============ §C. HERO H1 — fix font-size cascade ======================== `.font-2-75rem` modifier exists in migration.css and sets 2.75rem (44px), but TT5's default H1 rule (3.35rem / 53.6px) wins because of selector specificity. Same fix pattern as RECURRING-ISSUES §26 (5-class chain specificity wars) — match live's exact 44/56 with a high-specificity selector scoped to .rp-spend. ========================================================================== */ .rp-spend h1.double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header-dark-blue.font-2-75rem.full-width { font-size: 44px; line-height: 56px; } /* ============ §D. CTA H2 — "Give your finance team" 32/42 ================ The h2 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.cs-double-slide-landing-page-left-main-header-dim-gray.text-white` which renders at 56/67.2 on local (TT5 H2 default + .text-white). Live ships 32/42. Override with a selector matching the same chain. ========================================================================== */ .rp-spend h2.double-slide-landing-page-left-main-header.cs-double-slide-landing-page-left-main-header-dim-gray { font-size: 32px; line-height: 42px; } /* ============ §E. ROW FLEX-DIRECTION — restore -revert / -unverte ======= migration.css scopes the row-reverse rules to `.main-section-holder` (line 1793-1801). The "Avoid adding yet another platform" row and the "Give your finance team" CTA row sit OUTSIDE main-section-holder, so the cascade doesn't apply to them. Live somehow renders both as row-reverse — likely via Webflow's runtime CSS. Port equivalent page-scoped rules. `-revert` chain on "Avoid adding..." row (verified flex=row-reverse on live) `-unverte` is a Webflow typo for "unrevert" — Webflow source uses it on the CTA row and live computes flex=row-reverse there too. ========================================================================== */ .rp-spend .double-section-hero-container.security-trust-double-section-hero-container.security-trust-double-section-hero-container-revert { flex-direction: row-reverse; } .rp-spend .double-section-hero-container.security-trust-double-section-hero-container.double-section-hero-container-unverte { flex-direction: row-reverse; } /* ============ §F. ADJUST-RADIUS-PADDING — match live's 16px 56px ======== migration.css:12068 sets `.rp-spend .bg-blue.adjust-radius-padding { padding: 48px 40px }` on the inner blue container of the "How it works" row + the CTA row. Live actually uses `padding: 16px 56px`. Override. The smaller padding gives the rows ~80px more horizontal room and pulls col widths from 610 → 570 (matching live). ========================================================================== */ .rp-spend .bg-blue.adjust-radius-padding { padding: 16px 56px; } /* ============ §G. CTA ROW IMAGE — match live's 85% max-width ============= "Give your finance team..." row image renders at 610px on local (full col width) but 498px on live (~85% of 586px col, with maxWidth: 85% set as inline-style on live). Mirror via CSS scoped to the -unverte CTA row. ========================================================================== */ .rp-spend .double-section-hero-container.double-section-hero-container-unverte .double-section-hero-container-right img { max-width: 85%; margin-right: auto; margin-left: auto; display: block; } /* ============ §H. OUTER CONTAINER PADDING — match live's 1252 inner ====== Live's `.rp-container.security-trust-hero-container` outer container computes `padding: 0 24px` on this page; local computes `padding: 0`. Result: live's inner content area is 1252px (1300 - 48), local's is the full 1300px. The 48px delta cascades down the row tree — "How it works" cols 594 (local) vs 570 (live) delta 24px each "Avoid adding" rowW 1300 vs 1252 delta 48px "Give your finance team" cols 594 vs 586 delta 8px (+gap) Adding the 24px horizontal padding here fixes all three at once. ========================================================================== */ .rp-spend .rp-container.getguide-rp-container.super-app-hero-container.security-trust-hero-container { padding-right: 24px; padding-left: 24px; } /* ============ §I. WITH-GAP — restore Webflow's 24px row gap ============== `.with-gap` class on the "Avoid adding" row triggers Webflow's runtime CSS that sets `gap: 24px` on the flex row + redistributes col widths asymmetrically (live: 554 / 24 / 626 inside a 1252 row + 48px residual margin). The runtime CSS isn't bundled in our theme. Apply equivalent. ========================================================================== */ .rp-spend .double-section-hero-container.with-gap { gap: 24px; } /* ============================================================================ Cowork visual QA pass 2026-05-02 — surfaced 5 visual regressions the structural diff missed. Fixes §J–§N below address each. ============================================================================ */ /* ============ §J. HERO SUB-COPY COLOR — fix white-on-lavender ============= Cowork: hero sub-copy "Built for distributed and remote teams. No out-of- pocket expenses or delays." renders as `rgba(255, 255, 255, 0.85)` on local (TT5 white-on-dark assumption) but live ships `rgb(84, 84, 84)` (dark gray) — readable on the lavender hero gradient. Some local CSS rule (likely a TT5 default) is forcing white. Override page-scoped. ========================================================================== */ .rp-spend .new_rp_hero_double_section .double-slide-landing-page-left-label, .rp-spend .new_rp_hero_double_section .double-slide-landing-page-left-label.double-slide-landing-page-left-label-dim-gray.double-slide-landing-page-left-label-dim-gray-extra-padding { color: rgb(84, 84, 84); } /* ============ §K. CONTROL CARDS BG COLORS — restore bg-blue etc. ========= Cowork: "Get complete control over your team's spending" 3-up grid shows cards 1+2 as EMPTY OUTLINED BOXES on local — white text on white bg = invisible content. Live values via probe: `.bg-blue` → rgb(5, 34, 135) deep navy `.bg-light-blue` → rgb(17, 78, 247) RP brand blue `.bg-soft-blue` → rgb(250, 251, 255) very light wash migration.css has `.rp-spend .bg-blue.adjust-radius-padding` rules (line 12065+) but they only fire when combined with `-adjust-radius-padding`. The Control Cards use bare `.bg-blue` etc. on `.int-item.int-item-card` — those need their own page-scoped rules. The Transaction Cards section also shares `.bg-blue` on a wrapper higher up but that's already styled by migration's row rule, so we scope to `.int-item.int-item-card` to avoid leaking. ========================================================================== */ .rp-spend .int-item.int-item-card.bg-blue { background-color: #052287; } .rp-spend .int-item.int-item-card.bg-light-blue { background-color: #114EF7; } .rp-spend .int-item.int-item-card.bg-soft-blue { background-color: #FAFBFF; } /* ============ §L. CONTROL CARDS SUB-COPY — center align ================== Cowork: "Issue cards where your team lives, not just where you're based" sub-copy renders left-aligned at page edge on local (textAlign=start) but live centers it (textAlign=center). The element has both `.text-center` and `.centred` classes in the body markup but neither wins because TT5/migration.css sets a more-specific text-align. Force the override via the same long class chain. ========================================================================== */ .rp-spend .double-slide-landing-page-left-label.text-center, .rp-spend .double-slide-landing-page-left-label.centred, .rp-spend p.double-slide-landing-page-left-label.text-center.centred { text-align: center; } /* ============ §M. TRANSACTION CARDS — translucent bg over navy =========== "See every transaction in real-time" navy section. The 3 cards share `.int-item.int-item-card.light-border.light-blue-bg` class chain. Live values: bg rgba(255, 255, 255, 0.05) — translucent white wash that lets the navy parent show through with a hint of light overlay border 1px translucent white (light-border) rectH 483 (vs local 262) — cards taller because images stretch full-width Without the translucent bg, local renders pure white cards on a navy section — stark and wrong. Apply the translucent bg + light border page-scoped. ========================================================================== */ .rp-spend .int-item.int-item-card.light-blue-bg { background-color: rgba(255, 255, 255, 0.05); } .rp-spend .int-item.int-item-card.light-border { /* Live ships a slightly more translucent border (0.1 alpha) — matches the muted navy/white tone Cowork called out as the correct look. */ border: 1px solid rgba(255, 255, 255, 0.1); } /* Image inside transaction cards should fill the card width to match live's taller card heights. */ .rp-spend .int-item.int-item-card.light-blue-bg .int-item-img.int-item-img-max-width { width: 100%; max-width: 100%; height: auto; display: block; } /* ============ §N. EFFORTLESS INTEGRATION HEADING — center align ========== "Effortless integration with your favorite accounting tools" H2 + sub + "See all integrations" link should center-align (live's H2 textAlign=center). On local the H2 renders left-aligned despite the `.text-center` class — TT5 H2 default text-align: start wins. The wrapper `.mw5.pb-8.align-center` has textAlign=center on local but that doesn't propagate to the H2 because TT5 sets explicit text-align on h2 elements. Same fix as §L — page-scoped class-chain override forces text-center. ========================================================================== */ .rp-spend h2.double-slide-landing-page-left-main-header.text-center, .rp-spend h2.double-slide-landing-page-left-main-header.full-width.text-center, .rp-spend .new-rp-sync-container h2.text-center { text-align: center; } /* ============ §O. CTA SUB-COPY COLOR — white on blue CTA bg ============== Cowork pass 3: "Book a free 15-minute demo and see how Spend Cards work for your team." sub-copy renders rgb(105, 105, 105) (medium gray) on local but live shows rgb(255, 255, 255) (full white). The element has class chain `.double-slide-landing-page-left-label.double-slide-landing- page-left-label-dim-gray ... .gray-txt.no-mb.text-white`. The `.text-white` class should win but `.gray-txt` (or the `-dim-gray` modifier) is overriding on local. Scope to the CTA section's `.bg-light-blue` container (the dark-blue container) so we don't leak into other sub-copies (e.g. §J set the hero sub-copy to dark gray — we want white only inside this CTA). ========================================================================== */ .rp-spend .bg-blue.bg-light-blue .double-slide-landing-page-left-label, .rp-spend .bg-blue.bg-light-blue .double-slide-landing-page-left-label.text-white, .rp-spend .bg-blue.bg-light-blue p.double-slide-landing-page-left-label.gray-txt.text-white { color: rgb(255, 255, 255); } /* ============ §P. SPEAK TO AN EXPERT — fix text-transform ================ Cowork pass 3: button text renders "Speak To An Expert" (title case) on local but live shows "Speak to an expert" (sentence case). Live's button has `text-transform: none`; local computes `capitalize`. The `.btn-2.btn-gray.outline-btn.w-button` class chain inherits a capitalize rule somewhere. Page-scoped override. ========================================================================== */ .rp-spend .btn-2.btn-gray.outline-btn.w-button, .rp-spend .btn-2.btn-gray.outline-btn.w-button span { text-transform: none; } /* ============ §Q. TRANSACTION CARDS SECTION BG — restore navy ============ Cowork pass 4: the inner Transaction Cards wrapper `.hero_double_section_2.hero_double_section_revert.bg-blue` renders `rgb(255, 255, 255)` (white) on local but live ships `rgb(2, 17, 67)` (navy). DOM probe confirmed. Root cause: migration.css line 2441 declares `.hero_double_section_2.hero_double_section_revert { background-color: #fff }` at specificity 0,2,0. Webflow's `.bg-blue` class (specificity 0,1,0) loses the cascade. Without this fix, the cards' translucent-white bg sits over white instead of navy, and the section reads as one-big-white-block (which Cowork also screenshotted). The OUTER `.main-section-holder.bg-blue` is fine (navy via a different cascade). This inner wrapper is the gap. Page-scoped 3-class chain (specificity 0,3,0) wins. ========================================================================== */ .rp-spend .hero_double_section_2.hero_double_section_revert.bg-blue { background-color: rgb(2, 17, 67); } /* ============ §R. HOW IT WORKS — vertical step-linker bg color =========== Cowork pass 5 (2026-05-02): the `.vertical-links-with-image-linker` element on the "How It Works" steps column is a 2px wide × 328px tall absolutely-positioned div that visually connects the 5 step icons. Live renders it bg `rgb(255, 255, 255)` (white) — invisible/very subtle against the navy section bg. Local renders it bg `rgb(17, 78, 247)` (bright blue) — visible as a prominent line. Greg flagged this directly: "blue vertical line here that doesn't exist on live, please fix." ========================================================================== */ .rp-spend .vertical-links-with-image-linker { /* Greg flagged this as "white line on local that doesn't exist on live" — even though live's computed bg is also rgb(255,255,255), the user's visual interpretation of parity is that the connector should be invisible. Setting to transparent removes it entirely. The 5 step icons stay positioned correctly; the visual connector is purely decorative. `qa-fixes-pages.min.css` loads after this file at same specificity (0,2,0) and sets the bg back to bright blue rgb(17, 78, 247). `!important` lifts this rule above that minified-bundle override without bumping selector specificity. */ background-color: transparent !important; }