/* ===================================================================== jp-833-agentic-commerce-en.css JP-833 — EN /en/ai/agentic-commerce: make the "Your roadmap" section match the approved design (the DE page /de/ki/agentic-commerce). --------------------------------------------------------------------- The EN page (post 310540) was built from an OLDER template than its DE twin (post 302206). The DE page renders the Figma correctly; EN drifted. The rendered DOM is IDENTICAL on both (section#what-jtl-delivers -> .row.no-gutters.mt-5 -> two .col-lg-6 -> right .basic-br card); only the styling VALUES baked into EN's WPBakery attributes differ. So this is a page-scoped CSS correction, NOT a post_content rewrite — DE is untouched, and there is no risky content edit. Measured EN-vs-DE deltas this file corrects (all confirmed on the tunnel + staging DE b376u019-a): row numbers 01-05 ....... EN inline #814FF0 (purple) -> DE #2722F8 (tech blue) right-column body text .. EN #333 (gray) -> DE #0b1b45 (dark blue) [the ticket's "gray"] "..takes off your plate" EN #814FF0 (purple) header -> #0b1b45 (dark blue) card layout ............. EN two SEPARATED cards, 1px -> DE one JOINED card: purple border, 46px radius 2px tech-blue border on the ROW, 24px radius, right half white SCOPE: body.page-id-310540 is the EN page only. WPML also stamps the DE original id (302206) onto the EN twin's , so 310540 — the EN page's own id — is the one class that is unique to EN. The DE page never carries 310540, so the DE design (already correct) is never touched. The section anchor #what-jtl-delivers pins the roadmap section specifically (the page has four .product-management-section.purple blocks). WHY the white sits on the COLUMN, not the card: the EN right card is `h-100` but only stretches to its own content height, so on rows where the left (problem) column is taller, a white card left a sand gap below it. The .col-lg-6 fills the flex row height, so the white goes there; the card is made transparent/borderless and the row's border+overflow:hidden gives the single joined 24px-radius outline (right corners rounded, matching DE). All rules use !important only to out-rank the inline colours (#814FF0 on the number ) and the widget's own utils-* classes — see CLAUDE.md rule 10. */ /* number 01-05: purple -> tech blue (overrides the inline style="color:#814FF0") */ body.page-id-310540 #what-jtl-delivers .numbered-list-widget__item--number span { color: #2722F8 !important; } /* headings: the two column headers + the per-row titles -> JTL Dark Blue (the "What JTL takes off your plate" header was off-brand purple) */ body.page-id-310540 #what-jtl-delivers .h5 { color: #0b1b45 !important; } /* ...except the RIGHT column header ("What JTL takes off your plate"), which is the JTL-benefit column and reads as an accent: JTL Tech Blue, the same accent the section already uses for the row numbers and the card outline. Selected structurally, not by the per-instance utils-* hash (which changes on every WPBakery re-save): the two column headers sit in a PLAIN `.row`, while the five roadmap item rows are `.row.no-gutters.mt-5` — so `.row:not(.no-gutters) > .col-lg-6:last-child` is the right-hand header cell and nothing else. Verified: matches exactly 1 element; the left header and all five card titles stay Dark Blue. */ body.page-id-310540 #what-jtl-delivers .row:not(.no-gutters) > .col-lg-6:last-child .h5 { color: #2722F8 !important; } /* body copy in BOTH columns -> JTL Dark Blue (the right/solution column was gray #333) */ body.page-id-310540 #what-jtl-delivers .card-body p, body.page-id-310540 #what-jtl-delivers .numbered-list-widget p { color: #0b1b45 !important; } /* one joined card per row: the 2px tech-blue outline lives on the ROW, 24px radius, clip the inner white to it */ body.page-id-310540 #what-jtl-delivers .row.no-gutters.mt-5 { border: 2px solid #2722F8 !important; border-radius: 24px !important; overflow: hidden !important; } /* right (solution) half = white, full row height */ body.page-id-310540 #what-jtl-delivers .row.no-gutters.mt-5 > .col-lg-6:last-child { background: #ffffff !important; } /* drop the per-card purple border / radius so only the row's outline shows */ body.page-id-310540 #what-jtl-delivers .row.no-gutters.mt-5 .basic-br { border: 0 !important; border-radius: 0 !important; background: transparent !important; }