/* web/static/css/marketing-events-landing.css — BEM styles for the /evenimente landing page * (Phase 3). Geometry reproduced from the Elementor post-216.css (hero gradient, card grid, * red CTA panel, feature grid) and re-namespaced to .mkt-events__*. * * Coexistence specificity: the marketing keeps class="elementor-kit-10"; the kit styles * bare h1..h4/p/a at (0,1,1) — and text-transform:capitalize on h1..h3. A single-class rule ON a * heading/paragraph/anchor is only (0,1,0) and loses. So every rule below that targets a bare * heading/p/a is prefixed with its block ancestor to reach (0,2,0), and every heading sets * text-transform:none (post-216 set none on all 14 headings; the kit default is capitalize). */ /* ── .mkt-events__hero ──────────────────────────────────────────── */ .mkt-events__hero { background: linear-gradient(180deg, #ffe8e8 62%, transparent 100%); padding: var(--space-16) var(--space-6) var(--space-8); overflow: hidden; } .mkt-events__hero-inner { max-width: 87.5rem; margin: 0 auto; display: flex; align-items: center; gap: var(--space-10); } .mkt-events__hero-text { flex: 0 1 38%; } .mkt-events__hero .mkt-events__hero-title { text-transform: none; font-family: var(--font-brand); font-size: 2.5rem; font-weight: var(--font-weight-semibold); line-height: 3.875rem; color: #1b1b1b; margin: 0 0 var(--space-4); } .mkt-events__hero .mkt-events__hero-desc { font-size: var(--font-size-base); line-height: 1.625rem; color: #1b1b1b; margin: 0 0 var(--space-6); } .mkt-events__hero .mkt-events__hero-cta { 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.4s ease; white-space: nowrap; } .mkt-events__hero .mkt-events__hero-cta:hover { transform: scale(1.05); opacity: 0.92; } .mkt-events__hero-image { flex: 0 1 62%; display: flex; justify-content: center; } .mkt-events__hero-img { width: 90%; height: auto; border-radius: var(--radius-lg); transition: transform 0.4s ease; } .mkt-events__hero-img:hover { transform: scale(1.03); } /* ── .mkt-events__types (intro + card grid + red CTA panel) ─────── */ .mkt-events__types { padding: var(--space-12) var(--space-6); } .mkt-events__types-inner { max-width: 75rem; margin: 0 auto; } .mkt-events__types .mkt-events__types-title { text-transform: none; font-family: var(--font-brand); font-size: 2.5rem; font-weight: var(--font-weight-semibold); line-height: 3.125rem; text-align: center; color: #1b1b1b; margin: 0 0 var(--space-3); } .mkt-events__types .mkt-events__types-lead { text-align: center; color: #2a2a2a; line-height: 1.625rem; max-width: 48rem; margin: 0 auto var(--space-10); } .mkt-events__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); align-items: stretch; } .mkt-events__card { display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid var(--color-brand-red); border-radius: var(--radius-lg); padding: var(--space-4); transition: transform 0.4s ease; } .mkt-events__card:hover { transform: scale(1.05); } .mkt-events__card-icon { margin-bottom: var(--space-3); } .mkt-events__card-icon svg { width: 65px; height: 65px; /* fill-based icons inherit the token via `fill`; stroke/`currentColor`-based icons resolve through `color` — both point at the single brand-red token. */ color: var(--color-brand-red); fill: var(--color-brand-red); } .mkt-events__card .mkt-events__card-title { text-transform: none; font-family: var(--font-brand); font-size: 1.125rem; font-weight: var(--font-weight-semibold); line-height: 1.75rem; color: #1b1b1b; margin: 0 0 var(--space-3); } .mkt-events__card .mkt-events__card-desc { font-size: 0.875rem; line-height: 1.625rem; color: #2a2a2a; margin: 0 0 var(--space-4); } .mkt-events__card .mkt-events__card-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: auto; padding: 5px 20px; 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.4s ease; white-space: nowrap; } .mkt-events__card .mkt-events__card-cta:hover { transform: scale(1.05); opacity: 0.92; } .mkt-events__other { max-width: 75rem; margin: var(--space-6) auto 0; background: var(--color-brand-red); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); text-align: center; } .mkt-events__other .mkt-events__other-title { text-transform: none; font-family: var(--font-brand); font-size: 1.5rem; font-weight: var(--font-weight-semibold); line-height: 3.125rem; color: var(--color-white); margin: 0 0 var(--space-3); } .mkt-events__other .mkt-events__other-desc { color: var(--color-white); line-height: 1.625rem; max-width: 52rem; margin: 0 auto var(--space-6); } .mkt-events__other .mkt-events__other-cta { display: inline-flex; align-items: center; justify-content: center; padding: 10px 30px; border-radius: var(--radius-lg); background: var(--color-white); color: var(--color-brand-red); 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-white); transition: opacity 0.15s ease, transform 0.4s ease; white-space: nowrap; } .mkt-events__other .mkt-events__other-cta:hover { transform: scale(1.05); opacity: 0.92; } /* ── .mkt-events__features (intro + GIF feature grid) ───────────── */ .mkt-events__features { background: var(--color-surface); padding: var(--space-12) var(--space-6); } .mkt-events__features-inner { max-width: 75rem; margin: 0 auto; } .mkt-events__features .mkt-events__features-title { text-transform: none; font-family: var(--font-brand); font-size: 2.5rem; font-weight: var(--font-weight-semibold); line-height: 3.125rem; text-align: center; color: #1b1b1b; margin: 0 0 var(--space-3); } .mkt-events__features .mkt-events__features-lead { text-align: center; color: #2a2a2a; line-height: 1.625rem; max-width: 48rem; margin: 0 auto var(--space-10); } .mkt-events__features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); align-items: stretch; } .mkt-events__feature { border: 1px solid var(--color-brand-red); border-radius: var(--radius-lg); padding: var(--space-4); text-align: center; transition: transform 0.4s ease; } .mkt-events__feature:hover { transform: scale(1.05); } .mkt-events__feature-icon { margin-bottom: var(--space-3); } .mkt-events__feature .mkt-events__feature-title { text-transform: none; font-family: var(--font-brand); font-size: 1.125rem; font-weight: var(--font-weight-semibold); line-height: 1.75rem; color: #1b1b1b; margin: 0 0 var(--space-3); } .mkt-events__feature .mkt-events__feature-desc { font-size: 0.875rem; line-height: 1.625rem; color: #2a2a2a; margin: 0; } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 64rem) { .mkt-events__hero-inner { flex-direction: column-reverse; } .mkt-events__hero-text, .mkt-events__hero-image { flex: 1 1 auto; width: 100%; } .mkt-events__hero .mkt-events__hero-title { line-height: 3.25rem; } .mkt-events__hero-img { width: 80%; } .mkt-events__grid, .mkt-events__features-grid { grid-template-columns: repeat(2, 1fr); } .mkt-events__other .mkt-events__other-title { font-size: 1.875rem; line-height: 3.25rem; } /* Stacked layout: centre the CTA under the copy. */ .mkt-events__hero .mkt-events__hero-cta { display: flex; width: fit-content; margin-left: auto; margin-right: auto; } } @media (max-width: 36rem) { .mkt-events__hero .mkt-events__hero-title { font-size: 1.5rem; line-height: 1.875rem; } .mkt-events__hero-img { width: 100%; } .mkt-events__grid, .mkt-events__features-grid { grid-template-columns: 1fr; } .mkt-events__other .mkt-events__other-title { font-size: 1.5625rem; line-height: 1.875rem; } .mkt-events__other .mkt-events__other-desc { font-size: 0.875rem; } }