/* web/static/css/marketing-event-type.css — BEM styles for the /evenimente/{type} detail pages * (Phase 4). Geometry reproduced from Elementor post-222.css + this page's rules previously in * marketing-overrides.css, re-namespaced to .mkt-event-type__*. * * Coexistence specificity: keeps class="elementor-kit-10"; the kit styles bare h1..h4/p/a at * (0,1,1) and text-transform:capitalize on h1/h2/h4. Every rule below targeting a bare heading/p/a is * ancestor-prefixed to (0,2,0), and every heading sets text-transform:none. * * TWO REDS (do not conflate): fills/buttons/borders use var(--color-brand-red) (#f00202); the hero * headline highlight text uses var(--color-primary) (#D40000, WCAG-darkened) — intentional, faithful. */ .mkt-event-type { display: block; } /* ── Hero ───────────────────────────────────────────────────────── */ .mkt-event-type__hero { background: linear-gradient(180deg, #ffe8e8 62%, transparent 100%); padding: 10rem var(--space-6) var(--space-8); overflow: hidden; } .mkt-event-type__hero-inner { max-width: 87.5rem; margin: 0 auto; display: flex; align-items: center; gap: var(--space-10); } .mkt-event-type__hero-text { flex: 0 1 38%; } .mkt-event-type__hero .mkt-event-type__hero-title { text-transform: none; font-family: var(--font-brand); font-size: 3.125rem; /* 50px */ font-weight: var(--font-weight-semibold); line-height: 3.875rem; /* 62px */ color: #1b1b1b; margin: 0 0 var(--space-4); } /* Hero keyword highlight — WCAG-darkened brand red text + static underline (the Elementor animated-headline JS never runs; this reproduces its static rendering). */ .mkt-event-type__hero .mkt-event-type__hero-highlight { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; } .mkt-event-type__hero .mkt-event-type__hero-desc p { font-size: var(--font-size-base); line-height: 1.625rem; color: #2a2a2a; margin: 0 0 var(--space-4); } .mkt-event-type__hero .mkt-event-type__hero-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--space-2); 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: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease; white-space: nowrap; } /* Hover keeps the resting brand red (#f00202) — lift + shadow only, matching the sitewide marketing CTA idiom (Phases 1–3). Do NOT shift into the --color-primary family (#D40000), which is reserved for the hero-highlight text. */ .mkt-event-type__hero .mkt-event-type__hero-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); opacity: 0.92; } .mkt-event-type__hero-media { flex: 0 1 62%; display: flex; justify-content: center; } /* Natural aspect + hover-only float — matches prod's .elementor-animation-float (translateY(-8px), 0.3s ease-out); no continuous rise/lower. */ .mkt-event-type__hero-img, .mkt-event-type__hero-video { width: 100%; height: auto; border-radius: 1.25rem; /* 20px */ transition: transform 0.3s ease-out; } .mkt-event-type__hero-img:hover, .mkt-event-type__hero-img:focus, .mkt-event-type__hero-video:hover, .mkt-event-type__hero-video:focus { transform: translateY(-8px); } /* ── Benefits ───────────────────────────────────────────────────── */ .mkt-event-type__benefits { background: var(--color-white); padding: var(--space-12) var(--space-6); } .mkt-event-type__benefits-inner { max-width: 75rem; margin: 0 auto; } .mkt-event-type__benefits .mkt-event-type__benefits-title { text-transform: none; font-family: var(--font-brand); font-size: 2.5rem; /* 40px */ font-weight: var(--font-weight-semibold); line-height: 3.125rem; /* 50px */ text-align: center; color: #1b1b1b; /* Constrain to a narrow editorial column so long titles wrap like prod (~40rem) instead of stretching to the full 75rem section width. */ max-width: 40rem; margin: 0 auto var(--space-3); } .mkt-event-type__benefits .mkt-event-type__benefits-lead { text-align: center; color: #2a2a2a; line-height: 1.625rem; max-width: 52rem; margin: 0 auto var(--space-10); } .mkt-event-type__benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); align-items: stretch; } .mkt-event-type__benefit { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--color-brand-red); border: 1px solid var(--color-brand-red); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4); transition: transform 0.3s ease; } .mkt-event-type__benefit:hover { transform: scale(1.05); } /* Source SVGs are single-colour #ed1c24 → render white on the red card. */ .mkt-event-type__benefit-icon { max-width: 88px; height: auto; display: block; margin: 0 auto var(--space-3); filter: brightness(0) invert(1); } .mkt-event-type__benefit .mkt-event-type__benefit-title { text-transform: none; font-family: var(--font-brand); font-size: 1.125rem; /* 18px */ font-weight: var(--font-weight-semibold); line-height: 1.75rem; color: var(--color-white); margin: 0 0 var(--space-3); } .mkt-event-type__benefit .mkt-event-type__benefit-desc { font-size: 0.875rem; /* 14px */ line-height: 1.625rem; color: var(--color-white); margin: 0; } /* ── How it works (steps) ───────────────────────────────────────── */ .mkt-event-type__steps { background: var(--color-white); padding: var(--space-12) var(--space-6); } .mkt-event-type__steps-inner { max-width: 75rem; margin: 0 auto; } .mkt-event-type__steps .mkt-event-type__steps-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-event-type__steps .mkt-event-type__steps-lead { text-align: center; color: #2a2a2a; line-height: 1.625rem; max-width: 52rem; margin: 0 auto var(--space-10); } .mkt-event-type__steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: stretch; } .mkt-event-type__step { 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-5) var(--space-4); transition: transform 0.3s ease; } .mkt-event-type__step:hover { transform: scale(1.05); } .mkt-event-type__step .mkt-event-type__step-label { text-transform: none; font-family: var(--font-brand); font-size: 1.25rem; /* 20px */ font-weight: var(--font-weight-semibold); line-height: 1.25rem; color: var(--color-brand-red); margin: 0 0 var(--space-3); } .mkt-event-type__step-icon { max-width: 96px; height: auto; display: block; margin: 0 auto var(--space-3); } .mkt-event-type__step .mkt-event-type__step-title { text-transform: none; font-family: var(--font-brand); font-size: 1.125rem; /* 18px */ font-weight: var(--font-weight-semibold); line-height: 1.75rem; color: #1b1b1b; margin: 0 0 var(--space-3); } .mkt-event-type__step .mkt-event-type__step-desc { font-size: 0.875rem; line-height: 1.625rem; color: #2a2a2a; margin: 0; } /* ── Slideshow ──────────────────────────────────────────────────── */ .mkt-event-type__slideshow { background: var(--color-white); padding: var(--space-12) var(--space-6); } .mkt-event-type__slideshow-inner { max-width: 87.5rem; margin: 0 auto; display: flex; align-items: center; gap: var(--space-10); } .mkt-event-type__slideshow-text { flex: 0 1 41%; } .mkt-event-type__slideshow .mkt-event-type__slideshow-title { text-transform: none; font-family: var(--font-brand); font-size: 2rem; /* 32px */ font-weight: var(--font-weight-semibold); line-height: 2.5rem; /* 40px */ color: #1b1b1b; margin: 0 0 var(--space-3); } .mkt-event-type__slideshow .mkt-event-type__slideshow-desc p { font-size: var(--font-size-base); line-height: 1.625rem; color: #2a2a2a; margin: 0 0 var(--space-4); } .mkt-event-type__slideshow .mkt-event-type__slideshow-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: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease; white-space: nowrap; } /* Hover keeps the resting brand red — lift + shadow only (see hero-cta note above). */ .mkt-event-type__slideshow .mkt-event-type__slideshow-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); opacity: 0.92; } .mkt-event-type__slideshow-media { flex: 0 1 59%; display: flex; justify-content: center; } .mkt-event-type__slideshow-img { 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-event-type__slideshow-img:hover, .mkt-event-type__slideshow-img:focus { transform: translateY(-8px); } /* ── Final CTA ──────────────────────────────────────────────────── */ .mkt-event-type__cta { background: var(--color-white); padding: var(--space-12) var(--space-6); } .mkt-event-type__cta-band { max-width: 75rem; margin: 0 auto; background: var(--color-brand-red); border: 1px solid var(--color-brand-red); border-radius: var(--radius-lg); padding: var(--space-10) var(--space-6); text-align: center; } .mkt-event-type__cta-band .mkt-event-type__cta-title { text-transform: none; font-family: var(--font-brand); font-size: 1.5rem; /* 24px */ font-weight: var(--font-weight-semibold); line-height: 1.875rem; /* 30px */ color: var(--color-white); margin: 0 0 var(--space-3); } .mkt-event-type__cta-band .mkt-event-type__cta-desc { font-size: var(--font-size-base); line-height: 1.625rem; color: var(--color-white); max-width: 40rem; margin: 0 auto var(--space-6); } .mkt-event-type__cta-band .mkt-event-type__cta-btn { 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-body); 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.2s ease; white-space: nowrap; } .mkt-event-type__cta-band .mkt-event-type__cta-btn:hover { opacity: 0.9; transform: translateY(-2px); } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 64rem) { .mkt-event-type__hero { padding-top: 6rem; } .mkt-event-type__hero-inner, .mkt-event-type__slideshow-inner { flex-direction: column-reverse; } .mkt-event-type__hero-text, .mkt-event-type__hero-media, .mkt-event-type__slideshow-text, .mkt-event-type__slideshow-media { flex: 1 1 auto; width: 100%; } .mkt-event-type__hero .mkt-event-type__hero-title { font-size: 2.5rem; line-height: 3.25rem; } .mkt-event-type__steps-row { grid-template-columns: repeat(2, 1fr); } /* Stacked layout: centre the CTAs under the copy. */ .mkt-event-type__hero .mkt-event-type__hero-cta, .mkt-event-type__slideshow .mkt-event-type__slideshow-cta { display: flex; width: fit-content; margin-left: auto; margin-right: auto; } } @media (max-width: 36rem) { .mkt-event-type__hero { padding-top: 5rem; } .mkt-event-type__hero .mkt-event-type__hero-title { font-size: 1.875rem; line-height: 2.5rem; text-align: center; } .mkt-event-type__hero-text { text-align: center; } .mkt-event-type__benefits-grid, .mkt-event-type__steps-row { grid-template-columns: 1fr; } .mkt-event-type__slideshow .mkt-event-type__slideshow-title { font-size: 1.375rem; line-height: 1.75rem; text-align: center; } } /* ── City internal-link strip (Task 6, per-city landing pages) ────── */ .mkt-event-type__cities { max-width: 60rem; margin: 2rem auto; text-align: center; } .mkt-event-type__cities-title { text-transform: none; font-family: var(--font-brand); font-weight: 700; font-size: 1.25rem; margin: 0 0 1rem; } .mkt-event-type__cities-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; padding: 0; } .mkt-event-type__cities-list a { color: var(--color-brand-red); text-decoration: none; font-weight: 600; }