/* ───────────────────────────────────────────────────────────────────────── * cascade-preise-module-chrome.css — SITEWIDE for product-landing pages * * The PREISE module (.product-support-section + .basic-card-widget) ships * across multiple product-landing pages — each with the SAME legacy chrome: * a dark-teal #142830 card with white text. Figma 1970:11984 defines the * new chrome: TRANSPARENT on the Light Sand band, Tech Blue eyebrow, Dark * Blue title + body, Orange filled CTA on the .is-inverted variant. * * Pages observed with this widget: * /de/marktplatzanbindung/ page-id-8688 KOSTEN & VERFÜGBARKEIT * /de/pos-system/ page-id-96380 PREISE & VERFÜGBARKEIT * /de/erp-schnittstelle/ page-id-1546 PREISE * /de/retourenmanagement-software/ page-id-226255 PREISE (JP-442 — has * RIGHT info-card too; JP-442 keeps * ownership of that .product-subcard-widget) * * REPLACES per-page work: * - PR #150 jp-marktplatz-kosten-chrome.css (page-id-8688 LEFT column) * becomes fully redundant; close PR + remove file once this lands. * - jp-442-retourenmanagement-preise.css LEFT-column rules become * redundant; the file can be slimmed to keep only its RIGHT * .product-subcard-widget rules. Visual is unchanged — cascade * wins on higher specificity and applies identical colour values. * * Cascade win path — `custom-clone.css` JP-205/JP-213/JP-451/JP-453/JP-454 * series paint the title Light Sand so it stays readable on the dark teal * card: * * Marktplatz (page-id-8688): * body.page-id-8688 .product-support-section .basic-card-widget * .product-support-section__title { color:#eeeee7 !important } * → specificity (0,4,1) * * ERP-Schnittstelle (page-id-1546) and POS (page-id-96380): * body.page-id-XXXX .product-support-section .basic-card-widget * .product-support-section__title.text-tertiary { color:#eeeee7 !important } * → specificity (0,5,1) * * To beat the (0,5,1) variant our cascade selector runs at (0,6,1) by * chaining two body classes (`wp-theme-jtl` + `page-template-product-landing`) * and matching the `.text-tertiary` modifier on the title: * * body.wp-theme-jtl.page-template-product-landing * .product-support-section .basic-card-widget * .product-support-section__title.text-tertiary * → specificity (0,6,1) * * For Marktplatz where the title lacks `.text-tertiary`, the bare-title * variant runs at (0,5,1) — equal in specificity to the page rule — but * loaded AFTER custom-clone.css, so cascade order tie-breaks for us. * * NOTE: targets ONLY the `.is-inverted` CTA variant (the white ghost the * legacy theme renders on dark cards). The orange `.has-wawi-gradient` * primary and bare `.no-icon` secondary CTAs in the same module on ERP / * POS are left untouched. * * REGRESSION GUARD (2026-06-01): * The KONTAKT-and-BERATUNG widget on /de/ki/ (page-id-302458) uses the * SAME `.product-support-section .basic-card-widget` DOM pattern but is a * DIFFERENT widget — it's a contact CTA, not a PREISE pricing module. Its * eyebrow class is `.product-management-section__subtitle` (not * `.product-support-section__subtitle` like the PREISE pages use). * * The initial cascade (PR #153) was too broad and transparent-ed the * KONTAKT widget too, killing its per-instance light-peach `#FFF5E9` bg * (set by the WPBakery `.utils-XXX` inline style). Discriminator added: * * .basic-card-widget:not(:has(.product-management-section__subtitle)) * * That excludes any .basic-card-widget that carries a * `.product-management-section__subtitle` anywhere inside it (i.e. the * KONTAKT/CONTACT pattern). All PREISE pages use the * `.product-support-section__subtitle` eyebrow class, so they're not * affected by the exclusion — they still get the cascade. * ───────────────────────────────────────────────────────────────────────── */ /* ════════════════════════════════════════════════════════════════════════ * TWO-CARD VARIANT — Figma 248:6706 (e.g. /de/finanzbuchhaltung-software/) * * Stakeholder feedback (2026-06-01): PREISE sections that contain a * `.product-subcard-widget` SIBLING follow a DIFFERENT design from the * flat single-card layout above. They render as: * * ┌────────────────────────────────────┐ ┌─────────────────────┐ * │ Dark Blue rounded card │ │ Light Blue rounded │ * │ (main: eyebrow + title + body + │ │ subcard (secondary │ * │ Orange CTA — JTL Light Sand text)│ │ info, dark text) │ * └────────────────────────────────────┘ └─────────────────────┘ * * The half-circle Light Blue SVG `.basic-card-widget::before` the legacy * theme paints is reserved for contact-form widgets — design team confirmed * it does NOT belong on PREISE modules. Suppress it here. * * Discriminator: page-id. POS/ERP/Marktplatz also ship a `.product-subcard- * widget` in the DOM (with "Hardware-Store" / similar supplementary CTA), * so the `:has(.product-subcard-widget)` discriminator I tried first * over-matched and broke the flat variant. Falling back to explicit page-id * scoping for the two-card variant; the flat cascade then excludes those * page-ids via `:not(.page-id-XXXX)` on the body anchor. * * Pages currently observed with this two-card pattern: * /de/finanzbuchhaltung-software/ page-id-232998 (this regression fix) * * To onboard another page to this variant: add a second body selector to * each block below using the page-id; mirror the exclusion list in the * flat-variant block to keep the two from double-applying. * ════════════════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────────────────── * GROUP A — Main card chrome (Dark Blue + Light Sand text, no half-curve). * * SITEWIDE DEFAULT — applies to every `.page-template-product-landing` * EXCEPT the three "flat" pages whose Figma frame (1970:11984) explicitly * specifies a transparent card on the Light Sand band: * * /de/marktplatzanbindung/ page-id-8688 KOSTEN & VERFÜGBARKEIT * /de/pos-system/ page-id-96380 PREISE & VERFÜGBARKEIT * /de/erp-schnittstelle/ page-id-1546 PREISE * /de/dms-software/ page-id-233028 PREISE & VERFÜGBARKEIT * (JP-522 — flat card already lives in the * JP-452 block in custom-clone.css; this page * was getting the Dark Blue cascade on top of * it, painting JP-452's dark text invisible.) * * Onboard a new page that needs the flat variant: add its page-id to the * exclusion list on this selector AND mirror onto the flat-variant block * below. * * Onboard a new page to the Dark Blue cascade: nothing to do — it cascades * automatically. * ────────────────────────────────────────────────────────────────────────*/ /* Main card → Dark Blue, no half-curve, rounded. */ body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841) .product-support-section .basic-card-widget:not(:has(.product-management-section__subtitle)) { background-color: #0b1b45 !important; /* JTL Dark Blue */ border: 0 !important; box-shadow: none !important; border-radius: 46px !important; overflow: hidden !important; } /* Kill the half-circle Light Blue SVG decoration on ::before. */ body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841) .product-support-section .basic-card-widget::before { content: none !important; display: none !important; background-image: none !important; } /* Eyebrow → Light Blue. */ body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841) .product-support-section .basic-card-widget .product-support-section__subtitle { color: #89d2ff !important; /* JTL Light Blue */ background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: #89d2ff !important; } /* Title → Light Sand. */ body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841) .product-support-section .basic-card-widget .product-support-section__title, body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841) .product-support-section .basic-card-widget .product-support-section__title span, body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841) .product-support-section .basic-card-widget .product-support-section__title .font-weight-bold, body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841) .product-support-section .basic-card-widget .product-support-section__title.text-tertiary, body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841) .product-support-section .basic-card-widget .product-support-section__title.text-tertiary .font-weight-bold { color: #eeeee7 !important; /* JTL Light Sand */ } /* Body copy → Light Sand. */ body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841) .product-support-section .basic-card-widget p, body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841) .product-support-section .basic-card-widget li, body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841) .product-support-section .basic-card-widget strong { color: #eeeee7 !important; /* JTL Light Sand */ } /* ──────────────────────────────────────────────────────────────────────── * GROUP B — Subcard reveal + side-by-side grid layout. * Applies ONLY to page-id-232998 (finanzbuchhaltung-software). PIM * (232971) also has a `[product_sub_card]` shortcode in the DOM, but the * stakeholder review (2026-06-01) says PIM should render as a single Dark * Blue card with no companion subcard — so we leave the theme's default * `display:none` on PIM's subcard in place. * ────────────────────────────────────────────────────────────────────────*/ /* Reveal the subcard (theme sets display:none) and style as Light Blue card. Neutralise legacy inline style + clear any transform offset that the theme JS applies (it bumps the subcard by translateX(21px) for the half-curve layout — we don't have one). */ body.page-id-232998.page-template-product-landing .product-support-section .product-subcard-widget { display: block !important; background-color: #89d2ff !important; /* JTL Light Blue */ border-radius: 24px !important; padding: 32px !important; margin: 0 !important; /* neutralise legacy `margin-top:-32px` */ max-width: none !important; /* neutralise legacy `max-width:800px` */ width: auto !important; color: #0b1b45 !important; transform: none !important; /* clear theme's 21px X translate */ } body.page-id-232998.page-template-product-landing .product-support-section .product-subcard-widget h3, body.page-id-232998.page-template-product-landing .product-support-section .product-subcard-widget h4, body.page-id-232998.page-template-product-landing .product-support-section .product-subcard-widget p, body.page-id-232998.page-template-product-landing .product-support-section .product-subcard-widget li { color: #0b1b45 !important; } /* Side-by-side layout at ≥992px (Bootstrap lg) — Figma 248:6706 places the Dark Blue main card next to the Light Blue subcard. Collapse the .row.no-gutters to a CSS grid: 1fr (main) + 360px (subcard), 24px gap. Below lg, the children fall back to the natural col-lg-12 stacked flow. */ @media (min-width: 992px) { body.page-id-232998.page-template-product-landing .product-support-section .container > .row.no-gutters:has(.product-subcard-widget) { display: grid !important; grid-template-columns: 1fr 360px !important; gap: 24px !important; align-items: stretch !important; } body.page-id-232998.page-template-product-landing .product-support-section .container > .row.no-gutters:has(.product-subcard-widget) > .col-lg-12 { flex: initial !important; max-width: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; } /* Match the subcard's height to the main card so they line up. */ body.page-id-232998.page-template-product-landing .product-support-section .product-subcard-widget { height: 100% !important; } } /* Mobile-only stacking gap. */ @media (max-width: 991.98px) { body.page-id-232998.page-template-product-landing .product-support-section .product-subcard-widget { margin-top: 24px !important; } } /* ════════════════════════════════════════════════════════════════════════ * FLAT SINGLE-CARD VARIANT — Figma 1970:11984 * Pages: /de/marktplatzanbindung/ (8688), /de/pos-system/ (96380), * /de/erp-schnittstelle/ (1546). * These pages opted into the flat design (transparent card on Light Sand * band) per PR #153. Every other product-landing page with this widget * gets the Dark Blue cascade above. * ════════════════════════════════════════════════════════════════════════ */ /* ── Card chrome: transparent, let the Light Sand band show through ── */ body.page-id-8688.page-template-product-landing .product-support-section .basic-card-widget:not(:has(.product-management-section__subtitle)), body.page-id-96380.page-template-product-landing .product-support-section .basic-card-widget:not(:has(.product-management-section__subtitle)), body.page-id-1546.page-template-product-landing .product-support-section .basic-card-widget:not(:has(.product-management-section__subtitle)) { background-color: transparent !important; border: 0 !important; box-shadow: none !important; } /* ── Eyebrow: Tech Blue, clear any gradient text-fill ──────────────────── */ body.page-id-8688.page-template-product-landing .product-support-section .basic-card-widget .product-support-section__subtitle, body.page-id-96380.page-template-product-landing .product-support-section .basic-card-widget .product-support-section__subtitle, body.page-id-1546.page-template-product-landing .product-support-section .basic-card-widget .product-support-section__subtitle { color: #2722f8 !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: #2722f8 !important; } /* ── Title → Dark Blue (with + without .text-tertiary modifier). ──────── */ body.page-id-8688.page-template-product-landing .product-support-section .basic-card-widget .product-support-section__title, body.page-id-8688.page-template-product-landing .product-support-section .basic-card-widget .product-support-section__title span, body.page-id-8688.page-template-product-landing .product-support-section .basic-card-widget .product-support-section__title .font-weight-bold, body.page-id-8688.page-template-product-landing .product-support-section .basic-card-widget .product-support-section__title.text-tertiary, body.page-id-8688.page-template-product-landing .product-support-section .basic-card-widget .product-support-section__title.text-tertiary .font-weight-bold, body.page-id-96380.page-template-product-landing .product-support-section .basic-card-widget .product-support-section__title, body.page-id-96380.page-template-product-landing .product-support-section .basic-card-widget .product-support-section__title span, body.page-id-96380.page-template-product-landing .product-support-section .basic-card-widget .product-support-section__title .font-weight-bold, body.page-id-96380.page-template-product-landing .product-support-section .basic-card-widget .product-support-section__title.text-tertiary, body.page-id-96380.page-template-product-landing .product-support-section .basic-card-widget .product-support-section__title.text-tertiary .font-weight-bold, body.page-id-1546.page-template-product-landing .product-support-section .basic-card-widget .product-support-section__title, body.page-id-1546.page-template-product-landing .product-support-section .basic-card-widget .product-support-section__title span, body.page-id-1546.page-template-product-landing .product-support-section .basic-card-widget .product-support-section__title .font-weight-bold, body.page-id-1546.page-template-product-landing .product-support-section .basic-card-widget .product-support-section__title.text-tertiary, body.page-id-1546.page-template-product-landing .product-support-section .basic-card-widget .product-support-section__title.text-tertiary .font-weight-bold { color: #0b1b45 !important; } /* ── Body copy + lists + bold → Dark Blue ──────────────────────────────── */ body.page-id-8688.page-template-product-landing .product-support-section .basic-card-widget p, body.page-id-8688.page-template-product-landing .product-support-section .basic-card-widget li, body.page-id-8688.page-template-product-landing .product-support-section .basic-card-widget strong, body.page-id-96380.page-template-product-landing .product-support-section .basic-card-widget p, body.page-id-96380.page-template-product-landing .product-support-section .basic-card-widget li, body.page-id-96380.page-template-product-landing .product-support-section .basic-card-widget strong, body.page-id-1546.page-template-product-landing .product-support-section .basic-card-widget p, body.page-id-1546.page-template-product-landing .product-support-section .basic-card-widget li, body.page-id-1546.page-template-product-landing .product-support-section .basic-card-widget strong { color: #0b1b45 !important; } /* ── Inverted ghost CTA → Orange filled pill (Figma 1970:11984 * "BERATUNG VEREINBAREN"). */ body.page-id-8688.page-template-product-landing .product-support-section .basic-card-widget .product-button-group__button--with-icon.is-inverted, body.page-id-96380.page-template-product-landing .product-support-section .basic-card-widget .product-button-group__button--with-icon.is-inverted, body.page-id-1546.page-template-product-landing .product-support-section .basic-card-widget .product-button-group__button--with-icon.is-inverted { background-color: #fb581f !important; border: 0 !important; box-shadow: none !important; color: #ffffff !important; text-transform: uppercase !important; } body.page-id-8688.page-template-product-landing .product-support-section .basic-card-widget .product-button-group__button--with-icon.is-inverted .product-button-group__button--with-icon__text, body.page-id-8688.page-template-product-landing .product-support-section .basic-card-widget .product-button-group__button--with-icon.is-inverted span, body.page-id-8688.page-template-product-landing .product-support-section .basic-card-widget .product-button-group__button--with-icon.is-inverted strong, body.page-id-96380.page-template-product-landing .product-support-section .basic-card-widget .product-button-group__button--with-icon.is-inverted .product-button-group__button--with-icon__text, body.page-id-96380.page-template-product-landing .product-support-section .basic-card-widget .product-button-group__button--with-icon.is-inverted span, body.page-id-96380.page-template-product-landing .product-support-section .basic-card-widget .product-button-group__button--with-icon.is-inverted strong, body.page-id-1546.page-template-product-landing .product-support-section .basic-card-widget .product-button-group__button--with-icon.is-inverted .product-button-group__button--with-icon__text, body.page-id-1546.page-template-product-landing .product-support-section .basic-card-widget .product-button-group__button--with-icon.is-inverted span, body.page-id-1546.page-template-product-landing .product-support-section .basic-card-widget .product-button-group__button--with-icon.is-inverted strong { color: #ffffff !important; text-transform: uppercase !important; }