// * (not styled bare by the kit) stay single-class. */ /* ── .mkt-home__hero ────────────────────────────────────────────── */ .mkt-home__hero { background: linear-gradient(180deg, #ffe8e8 62%, transparent 100%); padding: var(--space-16) var(--space-6) 0; overflow: hidden; } .mkt-home__hero__inner { max-width: 90rem; margin: 0 auto; display: flex; align-items: center; gap: var(--space-10); } /* Cap the text column near the baseline width (~512px) so the h1 wraps to 3 words/line and the paragraph wraps ~5-6 lines like the original, instead of running wide. */ .mkt-home__hero__text { flex: 0 1 32rem; } .mkt-home__hero .mkt-home__hero__heading { font-family: var(--font-brand); font-size: 2.625rem; /* 42px — matches prod's home-hero h1 (a widget override, not the kit 50px) */ font-weight: 700; /* prod is 700 */ line-height: 3.25rem; /* 52px */ color: #1b1b1b; margin: 0 0 var(--space-4); } .mkt-home__hero .mkt-home__hero__highlight { position: relative; display: inline-block; color: var(--color-brand-red); } .mkt-home__hero__underline-svg { position: absolute; bottom: -0.32em; left: 0; width: 100%; height: 0.55em; overflow: visible; pointer-events: none; } /* preserveAspectRatio:none squashes the 150-unit viewBox into ~0.55em, so the stroke-width is scaled way down vertically — needs a large value to read as the bold hand-drawn brushstroke prod shows under the highlighted word. */ .mkt-home__hero__underline-svg path { fill: none; stroke: var(--color-brand-red); stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; } .mkt-home__hero .mkt-home__hero__desc { font-size: 1rem; /* 16px — matches prod (was 14px, made the copy too short) */ line-height: 1.625rem; color: #2a2a2a; margin: 0 0 var(--space-6); } /* Bare-anchor override: see file header. */ .mkt-home__hero .mkt-home__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.15s ease; white-space: nowrap; } .mkt-home__hero .mkt-home__hero__cta:hover { opacity: 0.88; transform: translateY(-1px); } .mkt-home__hero__image { /* Take the remaining width beside the capped text column. */ flex: 1; display: flex; justify-content: center; } /* Natural aspect, capped to prod's rendered hero height (~704px @1440) so the composite doesn't balloon and shove the steps row down. width:auto keeps it uncropped; it centres in its column. */ .mkt-home__hero__img { width: auto; height: auto; max-width: 100%; max-height: 44rem; /* 704px — matches prod */ border-radius: var(--radius-lg); } /* ── .mkt-home__steps ───────────────────────────────────────────── */ .mkt-home__steps { position: relative; z-index: 10; margin-top: -4%; padding: 0 var(--space-6); } .mkt-home__steps__inner { max-width: 75rem; margin: 0 auto; display: flex; gap: var(--space-5); border: 1px solid var(--color-brand-red); border-radius: var(--radius-lg); box-shadow: 0 0 20px 5px rgba(255, 202, 202, 0.5); padding: var(--space-2); } .mkt-home__steps__card { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-2); background: var(--color-brand-red); color: var(--color-white); border: 1px solid var(--color-brand-red); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4); transition: transform 0.3s; } .mkt-home__steps__card:hover { transform: translateY(-5px); } .mkt-home__steps .mkt-home__steps__number { font-family: var(--font-brand); font-size: 1rem; font-weight: var(--font-weight-semibold); line-height: 1.875rem; color: var(--color-white); margin: 0; } .mkt-home__steps .mkt-home__steps__title { text-transform: none; font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; color: var(--color-white); margin: 0; } /* ── .mkt-home__feature ─────────────────────────────────────────── */ .mkt-home__feature { background: var(--color-surface); padding: 5% 3%; } .mkt-home__feature__inner { max-width: 90rem; margin: 0 auto; display: flex; align-items: center; gap: var(--space-10); } .mkt-home__feature__text { flex: 1; } .mkt-home__feature .mkt-home__feature__brand { display: block; font-family: var(--font-brand); font-size: 3.125rem; font-weight: var(--font-weight-semibold); line-height: 3.875rem; color: #1b1b1b; margin: 0 0 var(--space-4); } .mkt-home__feature .mkt-home__feature__heading { text-transform: none; font-family: var(--font-brand); font-size: 2rem; font-weight: var(--font-weight-semibold); line-height: 2.5rem; color: #1b1b1b; margin: 0 0 var(--space-4); } .mkt-home__feature .mkt-home__feature__text p { font-size: var(--font-size-base); line-height: 1.625rem; color: #2a2a2a; margin: 0 0 var(--space-6); } /* Bare-anchor override: see file header. */ .mkt-home__feature .mkt-home__feature__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.15s ease; white-space: nowrap; } .mkt-home__feature .mkt-home__feature__cta:hover { opacity: 0.88; transform: translateY(-1px); } .mkt-home__feature__image { flex: 1; display: flex; justify-content: center; } /* Natural aspect (no crop) + hover-only float — matches prod's .elementor-animation-float. */ .mkt-home__feature__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-home__feature__img:hover, .mkt-home__feature__img:focus { transform: translateY(-8px); } /* ── .mkt-home__boxes ───────────────────────────────────────────── */ .mkt-home__boxes { background: var(--color-surface); padding: 3%; } .mkt-home__boxes__inner { max-width: 75rem; margin: 0 auto; } .mkt-home__boxes .mkt-home__boxes__heading { 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; padding-bottom: 1.125rem; margin: 0 0 var(--space-3); } .mkt-home__boxes .mkt-home__boxes__sub { text-align: center; color: #2a2a2a; margin: 0 0 var(--space-10); } .mkt-home__boxes__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } .mkt-home__box { border: 1px solid var(--color-brand-red); border-radius: var(--radius-lg); padding: var(--space-4); transition: transform 0.3s; } .mkt-home__box:hover { transform: scale(1.05); } .mkt-home__box__icon { display: block; width: 4.5rem; height: 4.5rem; margin: 0 auto var(--space-3); object-fit: contain; } .mkt-home__box .mkt-home__box__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); text-align: center; } .mkt-home__box .mkt-home__box__desc { font-size: 0.875rem; line-height: 1.625rem; color: #2a2a2a; text-align: center; margin: 0; } /* ── .mkt-home__how-header ──────────────────────────────────────── */ .mkt-home__how-header { padding: var(--space-12) var(--space-6); text-align: center; } .mkt-home__how-header .mkt-home__how-header__heading { font-family: var(--font-brand); font-size: 2rem; font-weight: var(--font-weight-semibold); color: #1b1b1b; margin: 0 0 var(--space-3); } .mkt-home__how-header .mkt-home__how-header__sub { color: #2a2a2a; margin: 0; } /* ── .mkt-home__spacer ──────────────────────────────────────────── */ .mkt-home__spacer { height: var(--space-16); } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 64rem) { .mkt-home__hero__inner, .mkt-home__feature__inner { flex-direction: column; } .mkt-home__steps__inner { flex-direction: column; } .mkt-home__boxes__grid { grid-template-columns: repeat(2, 1fr); } .mkt-home__feature .mkt-home__feature__brand { font-size: 2.5rem; } /* Stacked layout: the feature section centres fully (brand, heading, copy, CTA) to match prod's mobile layout. */ .mkt-home__feature { text-align: center; } /* Centre the CTAs under the copy. */ .mkt-home__hero .mkt-home__hero__cta, .mkt-home__feature .mkt-home__feature__cta { display: flex; width: fit-content; margin-left: auto; margin-right: auto; } } @media (max-width: 36rem) { .mkt-home__hero .mkt-home__hero__heading { font-size: 2rem; line-height: 2.5rem; } .mkt-home__boxes__grid { grid-template-columns: 1fr; } }