/* ============================================================================ JP-704 — ERP-integration pages: "text colour matches background colour". Pages: /…/erp-integration/{shopware,woocommerce,shopify} (EN + DE). ============================================================================ */ /* ---------------------------------------------------------------------------- 1) THE REPORTED BUG — invisible text in the contact sub-card. ---------------------------------------------------------------------------- The dark product-support-section carries a light contact card (`.product-subcard-widget`, cream #eeeee7 background). Its body copy ("If you have any questions about Shopware… / Fragen zur Shopware ERP-Integration…") was given a near-white colour by a per-instance editor util class (`.utils-… { color:#FFFFFF !important }`, hash differs per page + per language), so the text renders ~#eeeee7 on the ~#eeeee7 card = invisible. Only the "Please contact our sales team" link (its own #333) stays readable. Real root cause: cascade-preise-module-chrome.css paints the support-section card text cream (#eeeee7) on EVERY product-landing page except a hardcoded `:not(.page-id-…)` allow-list (8688/96380/1546/199375/262865/233028/125841 — the pages whose card is light). The 3 erp-integration pages are NOT on that list, so they get cream text on the cream sub-card = invisible. That rule carries 7 `:not()` clauses → specificity ≈ (0,11,2), so a plain structural override loses to it. Fix language- and env-agnostically: the sub-card is cream by design on every instance, so its text must be dark. We add `#content` (id tier) so the selector outranks the (0,11,2) cascade rule regardless of its `:not()` count, and target the sub-card structurally (works on EN and DE, every env, every page using the widget). Links keep their own colour (we don't target ). */ #content .product-support-section .product-subcard-widget p, #content .product-support-section .product-subcard-widget h1, #content .product-support-section .product-subcard-widget h2, #content .product-support-section .product-subcard-widget h3, #content .product-support-section .product-subcard-widget h4, #content .product-support-section .product-subcard-widget h5, #content .product-support-section .product-subcard-widget li, #content .product-support-section .product-subcard-widget strong, #content .product-support-section .product-subcard-widget span:not([class*="button"]) { color: #0b1b45 !important; -webkit-text-fill-color: #0b1b45 !important; } /* ---------------------------------------------------------------------------- 1b) JP-713 white-on-navy fix — PAGE-SCOPED so it can't break light cards (JP-717). ---------------------------------------------------------------------------- Rule (1) forces every product-support-section sub-card's text dark (#0b1b45), assuming it's the cream (#eeeee7) contact card. That's WRONG on the pages whose sub-card keeps the theme default NAVY background (`.product-support-section.orange .product-subcard-widget` = #0b1b45 in style.css): there rule (1) painted navy-on-navy = invisible (JP-713): - /de/warenwirtschaftssystem-software (page-id-89453) - /en/erp-software (page-id-262835, body also carries 89453) IMPORTANT — do NOT key this on `.orange` alone. The SAME `.orange` sub-card is overridden to a light/cream background on other pages (e.g. DMS page-id-233028 + EN 262856 set `background:transparent`, so it sits on the cream section). There the text MUST stay dark — the earlier global `.orange` white rule (shipped in #428) turned the DMS price "ab 84 € / Monat" white-on-cream = invisible (JP-717). So this is page-scoped to the two genuine navy-card pages only; every other `.orange` page keeps rule (1)'s dark text. `#content` (id tier) out-ranks rule (1)'s own `#content …` selector. Buttons are excluded (their span carries a *button* class), so the navy-on-orange CTA is untouched. */ body.page-id-89453 #content .product-support-section .product-subcard-widget p, body.page-id-89453 #content .product-support-section .product-subcard-widget h1, body.page-id-89453 #content .product-support-section .product-subcard-widget h2, body.page-id-89453 #content .product-support-section .product-subcard-widget h3, body.page-id-89453 #content .product-support-section .product-subcard-widget h4, body.page-id-89453 #content .product-support-section .product-subcard-widget h5, body.page-id-89453 #content .product-support-section .product-subcard-widget li, body.page-id-89453 #content .product-support-section .product-subcard-widget strong, body.page-id-89453 #content .product-support-section .product-subcard-widget span:not([class*="button"]), body.page-id-89453 #content .product-support-section .product-subcard-widget .product-subcard-widget__title, body.page-id-262835 #content .product-support-section .product-subcard-widget p, body.page-id-262835 #content .product-support-section .product-subcard-widget h1, body.page-id-262835 #content .product-support-section .product-subcard-widget h2, body.page-id-262835 #content .product-support-section .product-subcard-widget h3, body.page-id-262835 #content .product-support-section .product-subcard-widget h4, body.page-id-262835 #content .product-support-section .product-subcard-widget h5, body.page-id-262835 #content .product-support-section .product-subcard-widget li, body.page-id-262835 #content .product-support-section .product-subcard-widget strong, body.page-id-262835 #content .product-support-section .product-subcard-widget span:not([class*="button"]), body.page-id-262835 #content .product-support-section .product-subcard-widget .product-subcard-widget__title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ---------------------------------------------------------------------------- 2) Secondary CTA pill readability (EN + DE). ---------------------------------------------------------------------------- In the dark navy pricing card (.product-support-section.purple .basic-card- widget = #0b1b45) the secondary CTA `.is-inverted` ("Editions & order packages" / "Editionen & Auftragspakete") should be a white pill with dark-blue text. zz-support-card-cta-states.css renders it as a navy OUTLINE (transparent + 2px navy inset ring + navy text) — which is invisible on the dark navy card (navy-on-navy), so the button looks missing. Restore the white pill, matching that rule's structural depth + a page-id class so this wins deterministically. Light-card (.orange, e.g. DMS) sections don't use .is-inverted, so they're untouched. The zz :hover (navy fill + white label) still applies on hover, consistent across both languages. EN page-ids: 294161 shopware, 294824 woocommerce, 294173 shopify. DE page-ids: 1558 shopware, 1678 woocommerce, 1630 shopify. */ html body.page-id-294161 .product-support-section .basic-card-widget .product-buttons-group .product-button-group__button--with-icon.is-inverted.is-inverted, html body.page-id-294824 .product-support-section .basic-card-widget .product-buttons-group .product-button-group__button--with-icon.is-inverted.is-inverted, html body.page-id-294173 .product-support-section .basic-card-widget .product-buttons-group .product-button-group__button--with-icon.is-inverted.is-inverted, html body.page-id-1558 .product-support-section .basic-card-widget .product-buttons-group .product-button-group__button--with-icon.is-inverted.is-inverted, html body.page-id-1678 .product-support-section .basic-card-widget .product-buttons-group .product-button-group__button--with-icon.is-inverted.is-inverted, html body.page-id-1630 .product-support-section .basic-card-widget .product-buttons-group .product-button-group__button--with-icon.is-inverted.is-inverted { background-color: #ffffff !important; color: #0b1b45 !important; }