/* web/static/css/marketing-step-detail.css — shared .mkt-step-detail BEM block. * * Renders one alternating image/text "step" row. Used 4x on both the homepage and the * "Cum funcționează" page (identical geometry, different copy/image per call site). * * Geometry lifted from the dead `.hp-step-detail*` rules + `@keyframes hp-float` in home.css * (gaps, max-widths, image radius, clamp() type sizes, float animation), re-namespaced to * `.mkt-*` and re-checked against the coexistence-specificity rule below. * * Coexistence specificity: the marketing keeps class="elementor-kit-10", and the * Elementor kit styles bare elements (`.elementor-kit-10 a`, `button`, `h1..h4`, `p`) at * specificity (0,1,1). A single-class rule sitting directly ON a heading/paragraph element is * only (0,1,0) and LOSES that fight, so every rule whose class targets a bare h1-h4/p (here: * `__heading` on

, `body` on
) is prefixed with the `.mkt-step-detail` block ancestor to * reach (0,2,0) — same treatment as the anchor CTA below. The `eyebrow`/`bullet-text` classes * sit on , which the kit doesn't style bare, so those stay single-class. / .mkt-step-detail { padding: 3%; } .mkt-step-detail:nth-of-type(even) { background: #fffafa; } .mkt-step-detailinner { max-width: 90rem; margin: 0 auto; display: flex; align-items: center; gap: var(--space-10); } .mkt-step-detail--alt .mkt-step-detailinner { flex-direction: row-reverse; } .mkt-step-detailmedia { flex: 1; } / Natural aspect ratio (no crop) — matches prod, which sets no height cap / object-fit. Float is hover-only, reproducing Elementor's .elementor-animation-float (translateY(-8px), 0.3s ease-out) rather than the previous continuous rise/lower. / .mkt-step-detailimg { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: 0 0 32px -7px rgba(255, 60, 60, 0.5); transition: transform 0.3s ease-out; } .mkt-step-detailimg:hover, .mkt-step-detailimg:focus { transform: translateY(-8px); } .mkt-step-detailtext { flex: 1; } .mkt-step-detaileyebrow { display: inline-block; font-family: var(--font-brand); font-size: 1rem; font-weight: var(--font-weight-semibold); line-height: 1.875rem; color: var(--color-brand-red); margin-bottom: var(--space-2); } .mkt-step-detail .mkt-step-detailheading { text-transform: none; / old page set these headings to none; kit default is capitalize / font-family: var(--font-brand); font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); font-weight: var(--font-weight-semibold); line-height: 1.25; color: #1b1b1b; margin: 0 0 var(--space-4); } .mkt-step-detail .mkt-step-detailbody { color: #2a2a2a; line-height: 1.625rem; margin: 0 0 var(--space-6); } / Optional icon-list (Step 2 only, on both source pages). Bare ul/li/svg selectors are safe here because each is scoped by its own `.mkt-step-detail` class — `.elementor-kit-10 ul/li` never gets a chance to win since these rules don't rely on the bare tag alone. / .mkt-step-detailbullets { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); } .mkt-step-detailbullet { display: flex; align-items: flex-start; gap: var(--space-3); } .mkt-step-detailbullet-icon svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; margin-top: 0.3em; fill: var(--color-brand-red); } .mkt-step-detailbullet-text { color: #2a2a2a; line-height: 1.5rem; } /* Bare-anchor override: `.elementor-kit-10 a` styles every at specificity (0,1,1), so a single-class `.mkt-step-detailcta` rule alone would lose (0,1,0). Prefixing with the block ancestor raises this to (0,2,0). / .mkt-step-detail .mkt-step-detailcta { display: inline-flex; align-items: center; justify-content: center; padding: 10px 30px; border-radius: var(--radius-lg); background: var(--color-brand-red); color: var(--color-white); font-family: var(--font-brand); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); text-decoration: none; border: 2px solid var(--color-brand-red); transition: opacity 0.15s ease, transform 0.15s ease; white-space: nowrap; } .mkt-step-detail .mkt-step-detailcta:hover { opacity: 0.88; transform: translateY(-1px); } @media (max-width: 64rem) { .mkt-step-detailinner, .mkt-step-detail--alt .mkt-step-detailinner { flex-direction: column; } / Stacked layout: centre the CTA under the copy (copy stays left-aligned). */ .mkt-step-detail .mkt-step-detailcta { display: flex; width: fit-content; margin-left: auto; margin-right: auto; } }