/* ===================================================================== jp-953-odoo-alternative-cta-hover.css JP-953 — /de/vergleiche/odoo-alternative (page-id 295010) --------------------------------------------------------------------- The hero button group (`.hero-product-section__content--buttons`) holds two `.product-button-group__button--with-icon` CTAs: • "Jetzt ERP-Beratung starten" (has-wawi-gradient → solid orange) • "Mehr Infos zum Wechsel" (ghost, transparent) Their hover was inconsistent: the orange one darkened to #e34813 (the global standard in zz-primary-cta-hover.css), the ghost one filled white (zz-secondary-cta-hover.css). FIX (requested): on hover BOTH hero CTAs fill JTL Dark-Blue (#0b1b45) with white text + a Dark-Blue border. Their DEFAULT (non-hover) state is untouched: "Jetzt ERP-Beratung starten" stays orange until hovered, "Mehr Infos zum Wechsel" stays a transparent outline. SCOPE: the DE odoo-alternative page ONLY. The other comparison pages / the site-wide CTA-hover standards are deliberately NOT touched. Prod page-id == dev page-id (295010) — verified. WHY the `html[lang="de-DE"]` gate (NOT page-id alone): under WPML the EN twin (/en/vergleiche/odoo-alternative, page-id 310672) also carries the DE original's `page-id-295010` on its (body classes there are `page-id-310672 page-id-295010`). So a bare `body.page-id-295010` scope ALSO matches the EN twin and would restyle its hero CTAs too. The DE page is ``, the EN twin ``, so the language gate is the only reliable DE/EN separator here. (Leak-check caught this.) WHY the tripled marker classes + extra scope: the two hover looks are owned by overrides/zz-primary-cta-hover.css (0,6,1) and zz-secondary-cta-hover.css (0,7,1), both enqueued LAST and using a repeated-class specificity hack. We mirror each selector and PREPEND the lang+page+section scope, pushing these rules strictly above (0,7,1) so they win for this one page regardless of load order. ===================================================================== */ /* Secondary/outline CTA ("Mehr Infos zum Wechsel") — no gradient. Mirror zz-secondary-cta-hover.css (0,7,1) + page/section scope → ~(0,9,1). */ html[lang="de-DE"] body.page-id-295010 .hero-product-section__content--buttons a.product-button-group__button--with-icon.product-button-group__button--with-icon.product-button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white):hover, html[lang="de-DE"] body.page-id-295010 .hero-product-section__content--buttons a.product-button-group__button--with-icon.product-button-group__button--with-icon.product-button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white):focus, html[lang="de-DE"] body.page-id-295010 .hero-product-section__content--buttons button.product-button-group__button--with-icon.product-button-group__button--with-icon.product-button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white):hover { background: #0b1b45 !important; background-color: #0b1b45 !important; background-image: none !important; border: 1px solid #0b1b45 !important; color: #ffffff !important; box-shadow: none !important; filter: none !important; } /* Primary orange CTA ("Jetzt ERP-Beratung starten") — mirror zz-primary-cta-hover.css (0,6,1) + page/section scope → ~(0,8,2). */ html[lang="de-DE"] body.page-id-295010 .hero-product-section__content--buttons button.product-button-group__button--with-icon.has-wawi-gradient.has-wawi-gradient.has-wawi-gradient:not(.is-inverted):hover, html[lang="de-DE"] body.page-id-295010 .hero-product-section__content--buttons button.product-button-group__button--with-icon.has-wawi-gradient.has-wawi-gradient.has-wawi-gradient:not(.is-inverted):focus { background: #0b1b45 !important; background-color: #0b1b45 !important; background-image: none !important; border: 1px solid #0b1b45 !important; color: #ffffff !important; filter: none !important; } /* Turn the inner label/icon WHITE on hover. zz-secondary-cta-hover.css forces the label Dark-Blue via a tripled-class child rule (~0,7,2), so mirror that selector + page/section scope (→ ~0,9,2) or the label stays navy-on-navy (invisible). The orange CTA's label is handled by the plain rule since zz-primary lists only `a.` label selectors (FIX-1 is a button). */ html[lang="de-DE"] body.page-id-295010 .hero-product-section__content--buttons a.product-button-group__button--with-icon.product-button-group__button--with-icon.product-button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white):hover .product-button-group__button--with-icon__text, html[lang="de-DE"] body.page-id-295010 .hero-product-section__content--buttons a.product-button-group__button--with-icon.product-button-group__button--with-icon.product-button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white):hover span, html[lang="de-DE"] body.page-id-295010 .hero-product-section__content--buttons a.product-button-group__button--with-icon.product-button-group__button--with-icon.product-button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white):hover i, html[lang="de-DE"] body.page-id-295010 .hero-product-section__content--buttons .product-button-group__button--with-icon:hover .product-button-group__button--with-icon__text, html[lang="de-DE"] body.page-id-295010 .hero-product-section__content--buttons .product-button-group__button--with-icon:hover span, html[lang="de-DE"] body.page-id-295010 .hero-product-section__content--buttons .product-button-group__button--with-icon:hover i { color: #ffffff !important; } /* Flatten the wawi-gradient pseudo overlay on hover so no orange bleeds over the navy fill. */ html[lang="de-DE"] body.page-id-295010 .hero-product-section__content--buttons .product-button-group__button--with-icon.has-wawi-gradient:hover::before, html[lang="de-DE"] body.page-id-295010 .hero-product-section__content--buttons .product-button-group__button--with-icon.has-wawi-gradient:hover::after { background: transparent !important; background-image: none !important; opacity: 0 !important; }