/* web/static/css/marketing-how-it-works.css — BEM styles for the /cum-functioneaza rewrite * (Phase 2, Tasks 4+5). * * Only `.mkt-hiw__hero` and `.mkt-hiw__spacer` are styled here — the 4 step rows reuse * `.mkt-step-detail*` from marketing-step-detail.css verbatim (not touched here). * * Hero geometry: the legacy Elementor page reused the homepage's hero container (same element * ID / shared post-208.css root), which was tuned for a two-column hero with image + heading + * paragraph + button (min-height: 90dvh, padding-top: 18rem). This page's hero is a single * centered column with only a heading + one paragraph, so a `.howitworks-hero-height` override * in marketing-overrides.css reset it to padding-top: 10rem / padding-bottom: 4rem (8rem/2rem on * mobile) with min-height: auto. Both post-208.css and that override are dropped by this rewrite * (the override was scoped to the now-removed `.elementor-208` markup) — the same resolved * padding is reproduced directly below. * * Coexistence specificity: the marketing keeps class="elementor-kit-10", which styles * bare h1/p elements at specificity (0,1,1). A single-class rule sitting directly ON the h1/p * is only (0,1,0) and loses that fight. So the heading/paragraph rules below are prefixed with * their `.mkt-hiw__hero` block ancestor to reach (0,2,0), including inside `@media` overrides. */ /* ── .mkt-hiw__hero ─────────────────────────────────────────────── */ .mkt-hiw__hero { text-align: center; padding: 10rem var(--space-6) 4rem; background: linear-gradient(180deg, #ffe8e8 62%, transparent 100%); } .mkt-hiw__hero__inner { max-width: 48rem; margin: 0 auto; } .mkt-hiw__hero .mkt-hiw__hero__heading { font-family: var(--font-brand); font-size: 2.625rem; font-weight: var(--font-weight-semibold); line-height: 3.25rem; color: #1b1b1b; margin: 0 0 var(--space-4); } .mkt-hiw__hero .mkt-hiw__hero__desc { font-size: var(--font-size-base); line-height: 1.625rem; color: #2a2a2a; margin: 0; } /* ── .mkt-hiw__spacer ───────────────────────────────────────────── */ .mkt-hiw__spacer { height: var(--space-16); } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 64rem) { .mkt-hiw__hero { padding-top: 8rem; padding-bottom: 2rem; } } @media (max-width: 36rem) { .mkt-hiw__hero .mkt-hiw__hero__heading { font-size: 2rem; line-height: 2.5rem; } }