/* ============================================================================ JP-716 — product pages: PREISE contact sub-card shows the OLD design + wrong text colour. Bring `.product-support-section .product-subcard-widget` to the approved Figma "Update" design: SKY-BLUE #89d2ff card with DARK #0b1b45 text. Pages (DE + EN): Einkauf/Procurement, PIM, Finanzbuchhaltung/Financial. ============================================================================ WHAT THE DESIGN WANTS (Figma "Update" frame, JP-716 attachment image-1) ----------------------------------------------------------------------- The PREISE block is two cards: • LEFT `.basic-card-widget` — NAVY #0b1b45, WHITE text (already correct; NOT touched here). • RIGHT `.product-subcard-widget` (the "Mehr Funktionen…/Test-Version…/ E-Commerce-Steuerberater…" contact card) — SKY-BLUE #89d2ff, DARK #0b1b45 text. THE BUG (JP-716 attachments image-2 procurement, screenshot-2 finanz) --------------------------------------------------------------------- The right sub-card renders wrong in two different ways depending on the page's current (stale) state — both fixed by pinning it to the design: • einkauf 232980 / procurement 262844 / pim 232971 / pim-EN 262850: the card still has the OLD navy background (theme default `.product-support-section.orange .product-subcard-widget{background:#0b1b45}`) AND jp-704 rule (1) paints its text dark → dark-on-navy = INVISIBLE. • finanz 232998 / financial 262889: the card is already sky-blue, but on the QA snapshot the global jp-704 rule (1b) whitened its text → white-on-sky-blue = low contrast. Both resolve by forcing the card sky-blue with dark text, matching the design. NOT part of JP-716's CSS: /de/umsatzsteuer-software (199375) + /en/sales-tax-software (262865) have NO .product-subcard-widget; their "old design" symptom is the stale b376u019-a staging snapshot — fixed by redeploying main, not here. SPECIFICITY / DETERMINISM ------------------------- `body.page-id-NNN #content .product-support-section .product-subcard-widget` carries an id (#content) + page-id class, so it out-ranks both the theme's navy default and jp-704 rules (1)/(1b) regardless of PR #439's merge state. `-webkit-text-fill-color` is pinned next to `color` because the theme paints glyphs with it and it wins over `color`. Buttons keep their own styling (span/`.is-…` excluded) so the "Steuerberater finden" outline pill stays put. ============================================================================ */ /* ---- Sub-card background → sky-blue (Figma Update) --------------------- */ body.page-id-232980 #content .product-support-section .product-subcard-widget, body.page-id-262844 #content .product-support-section .product-subcard-widget, body.page-id-232971 #content .product-support-section .product-subcard-widget, body.page-id-262850 #content .product-support-section .product-subcard-widget, body.page-id-232998 #content .product-support-section .product-subcard-widget, body.page-id-262889 #content .product-support-section .product-subcard-widget { background-color: #89d2ff !important; /* JTL sky-blue */ } /* ---- Sub-card text → dark navy (readable on sky-blue) ------------------ */ body.page-id-232980 #content .product-support-section .product-subcard-widget p, body.page-id-232980 #content .product-support-section .product-subcard-widget h1, body.page-id-232980 #content .product-support-section .product-subcard-widget h2, body.page-id-232980 #content .product-support-section .product-subcard-widget h3, body.page-id-232980 #content .product-support-section .product-subcard-widget h4, body.page-id-232980 #content .product-support-section .product-subcard-widget h5, body.page-id-232980 #content .product-support-section .product-subcard-widget li, body.page-id-232980 #content .product-support-section .product-subcard-widget strong, body.page-id-232980 #content .product-support-section .product-subcard-widget span:not([class*="button"]), body.page-id-232980 #content .product-support-section .product-subcard-widget .product-subcard-widget__title, body.page-id-262844 #content .product-support-section .product-subcard-widget p, body.page-id-262844 #content .product-support-section .product-subcard-widget h1, body.page-id-262844 #content .product-support-section .product-subcard-widget h2, body.page-id-262844 #content .product-support-section .product-subcard-widget h3, body.page-id-262844 #content .product-support-section .product-subcard-widget h4, body.page-id-262844 #content .product-support-section .product-subcard-widget h5, body.page-id-262844 #content .product-support-section .product-subcard-widget li, body.page-id-262844 #content .product-support-section .product-subcard-widget strong, body.page-id-262844 #content .product-support-section .product-subcard-widget span:not([class*="button"]), body.page-id-262844 #content .product-support-section .product-subcard-widget .product-subcard-widget__title, body.page-id-232971 #content .product-support-section .product-subcard-widget p, body.page-id-232971 #content .product-support-section .product-subcard-widget h1, body.page-id-232971 #content .product-support-section .product-subcard-widget h2, body.page-id-232971 #content .product-support-section .product-subcard-widget h3, body.page-id-232971 #content .product-support-section .product-subcard-widget h4, body.page-id-232971 #content .product-support-section .product-subcard-widget h5, body.page-id-232971 #content .product-support-section .product-subcard-widget li, body.page-id-232971 #content .product-support-section .product-subcard-widget strong, body.page-id-232971 #content .product-support-section .product-subcard-widget span:not([class*="button"]), body.page-id-232971 #content .product-support-section .product-subcard-widget .product-subcard-widget__title, body.page-id-262850 #content .product-support-section .product-subcard-widget p, body.page-id-262850 #content .product-support-section .product-subcard-widget h1, body.page-id-262850 #content .product-support-section .product-subcard-widget h2, body.page-id-262850 #content .product-support-section .product-subcard-widget h3, body.page-id-262850 #content .product-support-section .product-subcard-widget h4, body.page-id-262850 #content .product-support-section .product-subcard-widget h5, body.page-id-262850 #content .product-support-section .product-subcard-widget li, body.page-id-262850 #content .product-support-section .product-subcard-widget strong, body.page-id-262850 #content .product-support-section .product-subcard-widget span:not([class*="button"]), body.page-id-262850 #content .product-support-section .product-subcard-widget .product-subcard-widget__title, body.page-id-232998 #content .product-support-section .product-subcard-widget p, body.page-id-232998 #content .product-support-section .product-subcard-widget h1, body.page-id-232998 #content .product-support-section .product-subcard-widget h2, body.page-id-232998 #content .product-support-section .product-subcard-widget h3, body.page-id-232998 #content .product-support-section .product-subcard-widget h4, body.page-id-232998 #content .product-support-section .product-subcard-widget h5, body.page-id-232998 #content .product-support-section .product-subcard-widget li, body.page-id-232998 #content .product-support-section .product-subcard-widget strong, body.page-id-232998 #content .product-support-section .product-subcard-widget span:not([class*="button"]), body.page-id-232998 #content .product-support-section .product-subcard-widget .product-subcard-widget__title, body.page-id-262889 #content .product-support-section .product-subcard-widget p, body.page-id-262889 #content .product-support-section .product-subcard-widget h1, body.page-id-262889 #content .product-support-section .product-subcard-widget h2, body.page-id-262889 #content .product-support-section .product-subcard-widget h3, body.page-id-262889 #content .product-support-section .product-subcard-widget h4, body.page-id-262889 #content .product-support-section .product-subcard-widget h5, body.page-id-262889 #content .product-support-section .product-subcard-widget li, body.page-id-262889 #content .product-support-section .product-subcard-widget strong, body.page-id-262889 #content .product-support-section .product-subcard-widget span:not([class*="button"]), body.page-id-262889 #content .product-support-section .product-subcard-widget .product-subcard-widget__title { color: #0b1b45 !important; -webkit-text-fill-color: #0b1b45 !important; } /* ---- Finanzbuchhaltung / Financial sub-card: vertical centring --------- */ /* The heading permalink anchor is removed at the SOURCE, not here — the HeadlineStandard widget's own `remove_anchor` attribute is flipped to "true" in scripts/db/jp716-finanz-remove-heading-anchor.php, so the widget never emits the . (CSS-hiding it would leave the anchor in the markup.) Vertically centre the sub-card content: the card is stretched to match the tall navy PREISE card, so its shorter content (.row) was pinned to the top with a large empty gap below. Flex-column + centre balances it. */ body.page-id-232998 #content .product-support-section .product-subcard-widget, body.page-id-262889 #content .product-support-section .product-subcard-widget { display: flex !important; flex-direction: column !important; justify-content: center !important; }