makes it easy to layer additional
gradients (e.g. a top-left highlight) later without CSS
stacking-context headaches. Sits BEHIND the content via z-index. */
.mkt-cta__glow {
position: absolute;
inset: 0;
z-index: -1;
/* Two-layer radial gradient:
1. Wider, softer red pool for the outer haze.
2. Tighter, more saturated red core at the very bottom-centre.
Both anchored at 50% x / 100% y (bottom-centre) and both fade
to transparent so the black base bg shows through beyond ~60%
of the section's width/height. */
background:
radial-gradient(
ellipse 60% 80% at 50% 100%,
rgba(230, 57, 70, 0.22) 0%,
rgba(230, 57, 70, 0.08) 45%,
transparent 75%
),
radial-gradient(
ellipse 30% 40% at 50% 105%,
rgba(230, 57, 70, 0.35) 0%,
transparent 70%
);
pointer-events: none;
}
/* ─── Content ─── */
.mkt-cta__inner {
max-width: 720px;
margin: 0 auto;
position: relative;
}
.mkt-cta__heading {
font-size: clamp(28px, 3.4vw, 44px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.2;
letter-spacing: -0.01em;
margin: 0 0 18px;
color: #ffffff;
}
.mkt-cta__body {
font-size: 17px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.7);
margin: 0 auto 36px;
max-width: 560px;
}
/* ─── Actions ─── */
.mkt-cta__actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
}
.mkt-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
padding: 16px 32px;
font-size: 13px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
border-radius: 6px;
border: 1.5px solid transparent;
transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
cursor: pointer;
}
.mkt-cta__btn:active { transform: translateY(1px); }
.mkt-cta__btn--primary {
background: #e63946;
color: #ffffff;
border-color: #e63946;
}
.mkt-cta__btn--primary:hover,
.mkt-cta__btn--primary:focus-visible {
background: #c92e3a;
border-color: #c92e3a;
color: #ffffff;
}
.mkt-cta__btn--secondary {
background: transparent;
color: #ffffff;
border-color: rgba(255, 255, 255, 0.35);
}
.mkt-cta__btn--secondary:hover,
.mkt-cta__btn--secondary:focus-visible {
background: rgba(255, 255, 255, 0.06);
border-color: #ffffff;
color: #ffffff;
}
/* ─── Transparent (ghost) modifier ───
Applied when the button's `transparent` switch is on: white text,
transparent fill, 1px white border. */
.mkt-cta__btn--transparent {
background: #ffffff00;
color: #ffffff;
border: 1px solid #ffffff;
}
.mkt-cta__btn--transparent:hover,
.mkt-cta__btn--transparent:focus-visible {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
/* ─── Tablet ─── */
@media (max-width: 900px) {
.mkt-cta { padding: 80px 24px 88px; }
}
/* ─── Mobile ─── */
@media (max-width: 575px) {
.mkt-cta { padding: 64px 20px 72px; }
.mkt-cta__body { font-size: 15.5px; margin-bottom: 28px; }
/* Stack buttons full width for easier tapping. */
.mkt-cta__actions { flex-direction: column; align-items: stretch; }
.mkt-cta__btn { width: 100%; min-width: 0; padding: 16px 20px; }
}
/* ═══════════════════════════════════════════════════════════════════
Design 2 — "Rates on application" light CTA banner
═══════════════════════════════════════════════════════════════════ */
.mkt-cta-banner-section {
background: #ffffff;
padding: 40px 0;
font-family: 'Gilroy-Regular', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.mkt-cta-banner__inner { max-width: 1400px; margin: 0 auto; padding: 0 48px; }
.mkt-cta-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
background: #F4F4F5;
border-radius: 16px;
padding: 36px 44px;
}
.mkt-cta-banner__copy { max-width: 760px; }
.mkt-cta-banner__title {
font-size: clamp(20px, 2vw, 24px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
color: #111827;
letter-spacing: -0.01em;
margin: 0 0 10px;
}
.mkt-cta-banner__body {
font-size: 16px;
line-height: 1.6;
color: #6b7280;
margin: 0;
}
.mkt-cta-banner__btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 32px;
background: #e63946;
color: #ffffff;
border-radius: 8px;
font-size: 13px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background-color .18s ease;
}
.mkt-cta-banner__btn:hover,
.mkt-cta-banner__btn:focus-visible { background: #c92e3a; color: #ffffff; }
@media (max-width: 767px) {
.mkt-cta-banner { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 24px; }
.mkt-cta-banner__inner { padding: 0 20px; }
.mkt-cta-banner__btn { width: 100%; }
}
/* ============================================================ fullTable ============================================================ */
/* ─── Shell ─── */
.mkt-full-table {
background: #F4F4F5;
color: #111827;
padding: 88px 0 96px;
font-family: 'Gilroy-Regular', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.mkt-full-table__inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 48px;
}
/* ─── Section header (matches tableCards / cardsServices) ─── */
.mkt-full-table__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 48px;
margin-bottom: 25px;
}
.mkt-full-table__header-copy { max-width: 720px; }
.mkt-full-table__eyebrow {
font-size: clamp(20px, 2.6vw, 31px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.12em;
color: #e63946;
margin: 0 0 10px;
text-transform: uppercase;
}
.mkt-full-table__heading {
font-size: clamp(20px, 2vw, 26px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.2;
color: #111827;
margin: 0 0 8px;
}
.mkt-full-table__body {
font-size: 16px;
line-height: 1.6;
color: #6B7280;
margin: 0;
}
.mkt-full-table__explore {
display: inline-block;
flex-shrink: 0;
font-size: 13px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
color: #111827;
text-decoration: none;
padding-bottom: 6px;
border-bottom: 2px solid #e63946;
transition: color .15s ease, border-color .15s ease;
}
.mkt-full-table__explore:hover,
.mkt-full-table__explore:focus-visible {
color: #e63946;
border-color: #111827;
}
/* ─── Table ─── */
.mkt-full-table__wrap {
border: 1px solid #E5E7EB;
border-radius: 12px;
overflow: hidden;
background: #ffffff;
}
.mkt-full-table__table {
width: 100%;
border-collapse: collapse;
table-layout: auto;
}
.mkt-full-table__table thead th {
font-size: 12px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
text-align: left;
color: #6B7280;
background: #F4F4F5;
padding: 20px 28px;
border-bottom: 1px solid #E5E7EB;
}
.mkt-full-table__table tbody th,
.mkt-full-table__table tbody td {
text-align: left;
font-size: 15px;
line-height: 1.5;
padding: 22px 28px;
color: #111827;
border-bottom: 1px solid #F3F4F6;
vertical-align: top;
}
.mkt-full-table__row-label {
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.mkt-full-table__table tbody td {
color: #4B5563;
font-weight: 500;
}
.mkt-full-table__table tbody tr:last-child th,
.mkt-full-table__table tbody tr:last-child td {
border-bottom: 0;
}
/* ─── Footnote ─── */
.mkt-full-table__footnote {
margin: 20px 0 0;
font-size: 14.5px;
line-height: 1.6;
color: #6B7280;
max-width: 900px;
}
/* ─── Tablet ─── */
@media (max-width: 1024px) {
.mkt-full-table { padding: 72px 0 80px; }
.mkt-full-table__inner { padding: 0 32px; }
.mkt-full-table__header {
flex-direction: column;
align-items: flex-start;
gap: 20px;
margin-bottom: 24px;
}
.mkt-full-table__header-copy { max-width: none; }
.mkt-full-table__table thead th,
.mkt-full-table__table tbody th,
.mkt-full-table__table tbody td {
padding: 18px 22px;
}
}
/* ─── Mobile ───
The table itself doesn't try to reflow to cards — instead the
wrapper scrolls horizontally so the data stays intact. Adds a
subtle inner shadow on the right to hint that there's more. */
@media (max-width: 640px) {
.mkt-full-table { padding: 56px 0 64px; }
.mkt-full-table__inner { padding: 0 20px; }
.mkt-full-table__heading { font-size: 20px; }
.mkt-full-table__body { font-size: 15px; }
.mkt-full-table__wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mkt-full-table__table {
min-width: 560px;
}
.mkt-full-table__table thead th,
.mkt-full-table__table tbody th,
.mkt-full-table__table tbody td {
padding: 16px 18px;
font-size: 14.5px;
}
}
/* ─── Dark mode override ───
Triggered when the `lightswitch1` (backgroundLight) field is
off. 8-digit hex encodes alpha in the last two digits (e.g.
#FFFFFFA6 = ~65% white). Eyebrow stays red so the brand accent
survives the swap. */
.mkt-full-table--dark { color: #FFFFFFA6 !important; }
.mkt-full-table--dark .mkt-full-table__heading { color: #FFFFFF !important; }
.mkt-full-table--dark .mkt-full-table__body { color: #FFFFFFA6 !important; }
.mkt-full-table--dark .mkt-full-table__footnote{ color: #FFFFFFA6; }
.mkt-full-table--dark .mkt-full-table__explore { color: #FFFFFFA6 !important; }
.mkt-full-table--dark .mkt-full-table__explore:hover,
.mkt-full-table--dark .mkt-full-table__explore:focus-visible {
color: #E63946 !important;
border-color: #FFFFFFA6;
}
.mkt-full-table--dark .mkt-full-table__wrap {
background: #0F1013;
border-color: #FFFFFF14;
}
.mkt-full-table--dark .mkt-full-table__table thead th {
background: #FFFFFF0A;
color: #FFFFFFA6;
border-bottom-color: #FFFFFF14;
}
.mkt-full-table--dark .mkt-full-table__table tbody th { color: #FFFFFF !important; }
.mkt-full-table--dark .mkt-full-table__table tbody td { color: #FFFFFFA6 !important; }
.mkt-full-table--dark .mkt-full-table__table tbody th,
.mkt-full-table--dark .mkt-full-table__table tbody td {
border-bottom-color: #FFFFFF0F;
}
/* ============================================================ pricePackage ============================================================ */
/* ─── Shell ─── */
.mkt-price {
color: #111827;
padding: 72px 0 80px;
font-family: 'Gilroy-Regular', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.mkt-price__inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 48px;
}
/* ─── Section header (optional) ─── */
.mkt-price__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 48px;
margin-bottom: 40px;
}
.mkt-price__header-copy { max-width: 720px; }
.mkt-price__eyebrow {
font-size: clamp(20px, 2.6vw, 31px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.12em;
color: #e63946;
margin: 0 0 18px;
text-transform: uppercase;
}
.mkt-price__heading {
font-size: clamp(22px, 2.35vw, 27px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.2;
letter-spacing: -0.01em;
color: #111827;
margin: 0 0 18px;
}
.mkt-price__body { font-size: 16px; line-height: 1.6; color: #6b7280; margin: 0; }
.mkt-price__explore {
display: inline-block;
flex-shrink: 0;
font-size: 13px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
color: #111827;
text-decoration: none;
padding-bottom: 6px;
border-bottom: 2px solid #e63946;
}
/* ─── Card grid ─── */
.mkt-price__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
}
/* ─── Card ─── */
.mkt-price__card {
position: relative;
display: flex;
flex-direction: column;
background: #FAFAFB;
border: 1px solid #E5E7EB;
border-radius: 20px;
padding: 40px 40px 40px;
}
/* Highlighted card — black outline, lifted, subtle shadow. */
.mkt-price__card--popular {
background: #FFFFFF;
border: 2px solid #111827;
box-shadow: 0 24px 60px rgba(15, 16, 19, 0.12);
margin-top: -20px;
padding-top: 52px;
}
/* "MOST POPULAR" banner on the top edge. */
.mkt-price__badge {
position: absolute;
top: 0;
left: 40px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: #e63946;
color: #ffffff;
font-size: 12px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: 6px;
}
.mkt-price__title {
font-size: 18px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
color: #111827;
letter-spacing: -0.01em;
margin: 0 0 12px;
}
.mkt-price__desc {
font-size: 14.5;
line-height: 1.55;
color: #000;
margin: 0 0 24px;
}
.mkt-price__rule {
border: 0;
border-top: 1px solid #E5E7EB;
margin: 8px 0 28px;
}
/* ─── Feature list ─── */
.mkt-price__list {
list-style: none;
margin: 0 0 32px;
padding: 0;
/* Grow so the CTA pins to the bottom across equal-height cards. */
flex: 1;
}
.mkt-price__item {
font-size: 14.5px;
line-height: 1.5;
color: #374151;
padding: 3px 0;
}
/* ─── CTA ─── */
.mkt-price__btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: auto;
padding: 16px 24px;
font-size: 13px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
color: #111827;
background: transparent;
border: 1.5px solid #111827;
border-radius: 8px;
transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.mkt-price__btn:hover,
.mkt-price__btn:focus-visible { background: #111827; color: #ffffff; }
/* Popular card CTA — red filled. */
.mkt-price__btn--primary {
background: #e63946;
border-color: #e63946;
color: #ffffff;
}
.mkt-price__btn--primary:hover,
.mkt-price__btn--primary:focus-visible { background: #c92e3a; border-color: #c92e3a; color: #ffffff; }
/* ─── Footer note ─── */
.mkt-price__note {
font-size: 16px;
line-height: 1.6;
color: #6B7280;
margin: 28px 0 0;
}
.mkt-price__note a {
color: #e63946;
text-decoration: underline;
text-underline-offset: 3px;
}
.mkt-price__note a:hover,
.mkt-price__note a:focus-visible { color: #c92e3a; }
/* ─── Tablet ─── */
@media (max-width: 1024px) {
.mkt-price { padding: 56px 0 64px; }
.mkt-price__inner { padding: 0 32px; }
.mkt-price__grid { gap: 20px; }
.mkt-price__card { padding: 32px 28px; }
.mkt-price__card--popular { padding-top: 44px; }
.mkt-price__header { flex-direction: column; align-items: flex-start; gap: 24px; }
.mkt-price__header-copy { max-width: none; }
}
/* ─── Mobile — stack cards ─── */
@media (max-width: 720px) {
.mkt-price { padding: 44px 0 52px; }
.mkt-price__inner { padding: 0 20px; }
.mkt-price__grid { grid-template-columns: 1fr; gap: 32px; }
/* Reset the desktop lift so the badge doesn't collide when stacked. */
.mkt-price__card--popular { margin-top: 0; }
.mkt-price__title { font-size: 24px; }
}
/* ============================================================ campaignGallery ============================================================ */
.mkt-campaign {
color: #111827;
padding: 72px 0 80px;
font-family: 'Gilroy-Regular', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.mkt-campaign__inner { max-width: 1400px; margin: 0 auto; padding: 0 48px; }
/* ─── Header ─── */
.mkt-campaign__header { margin-bottom: 32px; }
.mkt-campaign__eyebrow {
font-size: clamp(20px, 2.6vw, 31px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.12em;
color: #e63946;
margin: 0 0 12px;
text-transform: uppercase;
}
.mkt-campaign__heading {
font-size: clamp(22px, 2.35vw, 27px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.2;
letter-spacing: -0.01em;
color: #111827;
margin: 0 0 14px;
}
.mkt-campaign__body { font-size: 16px; line-height: 1.6; color: #6b7280; margin: 0; max-width: 760px; }
/* ─── Card shell ─── */
.mkt-campaign__card {
background: #ffffff;
border: 1px solid #E5E7EB;
border-radius: 20px;
overflow: hidden;
}
/* ─── Hero (dark tile + meta) ─── */
.mkt-campaign__hero {
display: grid;
grid-template-columns: 1fr 1fr;
}
.mkt-campaign__hero-media {
background: #0F1013;
display: grid;
place-items: center;
padding: 48px;
min-height: 300px;
}
.mkt-campaign__hero-media img {
max-width: 100%;
max-height: 260px;
width: auto;
height: auto;
object-fit: contain;
}
.mkt-campaign__hero-meta {
display: flex;
flex-direction: column;
justify-content: center;
padding: 48px 56px;
}
.mkt-campaign__hero-eyebrow {
font-size: 13px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #e63946;
margin: 0 0 16px;
}
.mkt-campaign__hero-title {
font-size: 20px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.15;
letter-spacing: -0.01em;
color: #111827;
margin: 0 0 12px;
}
.mkt-campaign__hero-sub { font-size: 13px; line-height: 1.6; color: #6B7280; margin: 0; }
/* ─── Thumbnails row ─── */
.mkt-campaign__thumbs {
display: grid;
grid-template-columns: repeat(var(--cols, 4), 1fr);
border-top: 1px solid #E5E7EB;
}
.mkt-campaign__thumb {
aspect-ratio: 4 / 3;
overflow: hidden;
background: #E5E7EB;
border-left: 1px solid #E5E7EB;
}
.mkt-campaign__thumb:first-child { border-left: 0; }
.mkt-campaign__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ─── Steps row ─── */
.mkt-campaign__steps {
display: grid;
grid-template-columns: repeat(var(--cols, 4), 1fr);
}
.mkt-campaign__step {
padding: 26px 28px 32px;
border-left: 1px solid #E5E7EB;
}
.mkt-campaign__step:first-child { border-left: 0; }
.mkt-campaign__step-num {
font-size: 12px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.08em;
color: #e63946;
margin: 0 0 12px;
}
.mkt-campaign__step-title {
font-size: 18px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
color: #111827;
line-height: 1.25;
margin: 0 0 10px;
}
.mkt-campaign__step-desc { font-size: 13px; line-height: 1.6; color: #6B7280; margin: 0; }
/* ─── Footer message (grey caption under the card) ─── */
.mkt-campaign__footer {
font-size: 15px;
line-height: 1.6;
color: #9CA3AF;
margin: 24px 0 0;
}
.mkt-campaign__footer a {
color: #e63946;
text-decoration: underline;
text-underline-offset: 3px;
}
.mkt-campaign__footer a:hover,
.mkt-campaign__footer a:focus-visible { color: #C92E3A; }
/* ─── Dark section → light header text ─── */
.mkt-campaign--dark { color: #ffffff; }
.mkt-campaign--dark .mkt-campaign__heading { color: #ffffff; }
.mkt-campaign--dark .mkt-campaign__body { color: rgba(255, 255, 255, 0.7); }
.mkt-campaign--dark .mkt-campaign__footer { color: rgba(255, 255, 255, 0.55); }
/* ─── Tablet ─── */
@media (max-width: 1024px) {
.mkt-campaign { padding: 56px 0 64px; }
.mkt-campaign__inner { padding: 0 32px; }
.mkt-campaign__thumbs,
.mkt-campaign__steps { grid-template-columns: repeat(2, 1fr); }
/* Reset first-child border resets for the 2-col layout. */
.mkt-campaign__thumb:nth-child(odd),
.mkt-campaign__step:nth-child(odd) { border-left: 0; }
.mkt-campaign__thumb:nth-child(n+3) { border-top: 1px solid #E5E7EB; }
.mkt-campaign__step:nth-child(n+3) { border-top: 1px solid #E5E7EB; }
}
/* ─── Mobile — everything stacks (thumbs, then steps) ─── */
@media (max-width: 640px) {
.mkt-campaign { padding: 44px 0 52px; }
.mkt-campaign__inner { padding: 0 20px; }
.mkt-campaign__hero { grid-template-columns: 1fr; }
.mkt-campaign__hero-media { min-height: 200px; padding: 32px; }
.mkt-campaign__hero-meta { padding: 28px 24px; }
.mkt-campaign__thumbs,
.mkt-campaign__steps { grid-template-columns: 1fr; }
.mkt-campaign__thumb { aspect-ratio: 16 / 10; border-left: 0; border-top: 1px solid #E5E7EB; }
.mkt-campaign__thumb:first-child { border-top: 0; }
.mkt-campaign__step { border-left: 0; border-top: 1px solid #E5E7EB; }
.mkt-campaign__step:first-child { border-top: 0; }
}
/* ============================================================ featureShowcase ============================================================ */
/* ─── Shell ─── */
.mkt-feature-showcase {
background: #000000;
color: #ffffff;
padding: 88px 0 96px;
font-family: 'Gilroy-Regular', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.mkt-feature-showcase__inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 48px;
display: grid;
/* Row 1: full-width header spans both cols.
Row 2: featured card (left) + list (right). */
grid-template-columns: 1.05fr 1fr;
grid-auto-rows: auto;
column-gap: 48px;
row-gap: 48px;
/* `start` lets each column keep its natural height — the list can
run longer than the featured card, and that extra height is
what the sticky card scrolls against. */
align-items: start;
}
/* ─── LEFT column layout ───
The featured card sticks while the (taller) list scrolls past it.
`align-self: start` keeps it pinned to the top of its cell. */
.mkt-feature-showcase__left {
display: flex;
flex-direction: column;
gap: 40px;
position: sticky;
top: 24px;
align-self: start;
}
/* ─── --reverse modifier ───
Swaps the Big Card / List columns without touching DOM order.
Header still spans full width (grid-column: 1 / -1) so it is
unaffected. Mobile breakpoint collapses to a single column, so
the reverse rule is scoped to the desktop grid only. */
@media (min-width: 641px) {
.mkt-feature-showcase--reverse .mkt-feature-showcase__left { grid-column: 2; }
.mkt-feature-showcase--reverse .mkt-feature-showcase__right { grid-column: 1; }
}
/* Header block — spans the full width of the grid.
Internally laid out as a two-column flex: eyebrow/heading/body
on the left, explore link vertically-centred on the right,
matching the mock. Wraps to a stacked block on narrow screens. */
.mkt-feature-showcase__header {
grid-column: 1 / -1;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 48px;
position: relative;
}
/* Copy sub-cluster — keep the readable measure so the paragraph
doesn't sprawl to 1400px wide. */
.mkt-feature-showcase__header > :not(.mkt-feature-showcase__explore) {
max-width: 620px;
}
.mkt-feature-showcase__eyebrow {
font-size: clamp(20px,2.6vw,31px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
color: #e63946;
margin: 0 0 18px;
text-transform: uppercase;
}
.mkt-feature-showcase__heading {
font-size: clamp(22px,2.35vw,27px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.2;
letter-spacing: -0.01em;
margin: 0 0 20px;
color: #ffffff;
}
.mkt-feature-showcase__body {
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.65);
margin: 0 0 32px;
}
/* Explore link — white uppercase with red underline. */
.mkt-feature-showcase__explore {
display: inline-block;
font-size: 13px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
color: #ffffff;
text-decoration: none;
padding-bottom: 6px;
border-bottom: 2px solid #e63946;
transition: color .15s ease, border-color .15s ease;
}
.mkt-feature-showcase__explore:hover,
.mkt-feature-showcase__explore:focus-visible {
color: #e63946;
border-color: #ffffff;
}
/* ─── Featured card ─── */
.mkt-feature-showcase__featured {
background: #0f1013;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.mkt-feature-showcase__featured-media {
aspect-ratio: 16 / 10;
overflow: hidden;
background: #1a1b1e;
}
.mkt-feature-showcase__featured-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mkt-feature-showcase__featured-body {
padding: 28px 28px 32px;
}
/* No title + no description → drop the body padding so there's no
empty gap under the image. */
.mkt-feature-showcase__featured-body--flush { padding: 0; }
/* ── design2: browser-window chrome above the image ──
Traffic-light dots + a faux URL bar, matching the brand-showcase
"What's on The Page" mockup. */
.mkt-feature-showcase__browser-chrome {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
min-height: 44px;
background: #ccd2de;
border-bottom: 1px solid rgba(15, 16, 19, 0.08);
}
.mkt-feature-showcase__browser-dots {
display: inline-flex;
gap: 6px;
flex-shrink: 0;
}
.mkt-feature-showcase__browser-dots span {
width: 12px;
height: 12px;
border-radius: 50%;
background: #D1D5DB;
}
.mkt-feature-showcase__browser-dots span:nth-child(1) { background: #FF605C; }
.mkt-feature-showcase__browser-dots span:nth-child(2) { background: #FFBD44; }
.mkt-feature-showcase__browser-dots span:nth-child(3) { background: #00CA4E; }
.mkt-feature-showcase__browser-url {
font-size: 14px;
color: #6B7280;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Give the browser variant a light frame so the grey chrome reads as
a window regardless of the section's dark/light mode. */
.mkt-feature-showcase__featured--browser {
background: #ffffff;
border-color: rgba(15, 16, 19, 0.12);
}
.mkt-feature-showcase__featured-title {
font-size: 22px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
color: #ffffff;
margin: 0 0 12px;
line-height: 1.25;
}
.mkt-feature-showcase__featured-desc {
font-size: 15px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.6;
margin: 0 0 22px;
}
/* Tag pills (used inside the featured card). */
.mkt-feature-showcase__tags {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mkt-feature-showcase__tag {
display: inline-flex;
align-items: center;
padding: 7px 12px;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.85);
font-size: 11.5px;
font-weight: 700;
font-family: 'Gilroy-Medium', 'Gilroy-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.08em;
border-radius: 6px;
}
/* ─── RIGHT column — stacked feature list ───
The list now defines its own (natural) height and is free to run
longer than the featured card — the card sticks against it. Each
item is sized by its content (no forced equal-height split). */
.mkt-feature-showcase__right {
background: #0f1013;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
overflow: hidden;
}
.mkt-feature-showcase__list {
list-style: none;
margin: 0;
padding: 0;
}
.mkt-feature-showcase__item {
padding: 32px 32px 32px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mkt-feature-showcase__item:last-child { border-bottom: 0; }
.mkt-feature-showcase__item-title {
font-size: 20px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
color: #ffffff;
margin: 0 0 12px;
line-height: 1.3;
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.mkt-feature-showcase__item-desc {
font-size: 15px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.6;
margin: 0;
}
/* Optional "SOON" (or similar) badge next to the title. */
.mkt-feature-showcase__item-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.85);
font-size: 11px;
font-weight: 700;
font-family: 'Gilroy-Medium', 'Gilroy-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.1em;
border-radius: 4px;
position: relative;
top: -1px;
}
/* ─── Tablet ─── */
@media (max-width: 1024px) {
.mkt-feature-showcase { padding: 72px 0 80px; }
.mkt-feature-showcase__inner {
grid-template-columns: 1fr;
column-gap: 0;
row-gap: 32px;
padding: 0 32px;
}
/* Single column when stacked — drop the sticky so the card
scrolls normally above the list. */
.mkt-feature-showcase__left { position: static; top: auto; }
/* Header stops behaving as a horizontal flex — stack the
explore link BELOW the copy on narrower screens. */
.mkt-feature-showcase__header {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.mkt-feature-showcase__header > :not(.mkt-feature-showcase__explore) {
max-width: none;
}
}
/* ─── Mobile ───
Header first, featured card, then each item as its own card
(so the right-column list visually reads as 3 more cards
rather than merged rows — matches image 2 & 3). */
@media (max-width: 640px) {
.mkt-feature-showcase { padding: 56px 0 64px; }
.mkt-feature-showcase__inner { padding: 0 20px; gap: 24px; }
.mkt-feature-showcase__left { gap: 32px; }
.mkt-feature-showcase__eyebrow { font-size: 13px; letter-spacing: 0.12em; }
.mkt-feature-showcase__body { font-size: 15.5px; margin-bottom: 24px; }
.mkt-feature-showcase__explore { font-size: 12px; }
/* Featured card */
.mkt-feature-showcase__featured-media { aspect-ratio: 16 / 11; }
.mkt-feature-showcase__featured-body { padding: 22px 22px 24px; }
.mkt-feature-showcase__featured-title { font-size: 20px; }
.mkt-feature-showcase__featured-desc { font-size: 14.5px; }
/* Right list items each become their own bordered card
so mobile matches the "stack of cards" look in the mock. */
.mkt-feature-showcase__right {
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
.mkt-feature-showcase__list {
display: flex;
flex-direction: column;
gap: 16px;
}
.mkt-feature-showcase__item {
padding: 22px 22px 24px;
border-bottom: 0;
background: #0f1013;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
}
.mkt-feature-showcase__item-title { font-size: 18px; }
.mkt-feature-showcase__item-desc { font-size: 14.5px; }
}
/* ─── Light mode override ───
NOTE: Unlike the other blocks, the BASE design here is dark, so
the modifier fires when the switch says "light background" (true)
— flipping every text/card colour to a light-on-dark scheme's
inverse. Eyebrow stays red so the brand accent survives.
8-digit hex encodes alpha in the last two digits:
• #111827A6 → dark slate at ~65% opacity (body/desc text)
• #1118270D → dark slate at ~5% opacity (hairline borders)
• #1118270F → dark slate at ~6% opacity (tag/badge chip bg) */
.mkt-feature-showcase--light .mkt-feature-showcase__heading { color: #111827; }
.mkt-feature-showcase--light .mkt-feature-showcase__body { color: #111827A6; }
.mkt-feature-showcase--light .mkt-feature-showcase__explore { color: #111827; }
.mkt-feature-showcase--light .mkt-feature-showcase__explore:hover,
.mkt-feature-showcase--light .mkt-feature-showcase__explore:focus-visible {
color: #E63946;
border-color: #111827;
}
/* Featured card */
.mkt-feature-showcase--light .mkt-feature-showcase__featured {
background: #FFFFFF;
border-color: #1118270D;
}
.mkt-feature-showcase--light .mkt-feature-showcase__featured-media { background: #F4F4F5; }
.mkt-feature-showcase--light .mkt-feature-showcase__featured-title { color: #111827; }
.mkt-feature-showcase--light .mkt-feature-showcase__featured-desc { color: #111827A6; }
/* Tag pills (featured card) */
.mkt-feature-showcase--light .mkt-feature-showcase__tag {
background: #1118270F;
color: #111827D9; /* ~85% */
}
/* Right column list */
.mkt-feature-showcase--light .mkt-feature-showcase__right {
background: #FFFFFF;
border-color: #1118270D;
}
.mkt-feature-showcase--light .mkt-feature-showcase__item { border-bottom-color: #1118270D; }
.mkt-feature-showcase--light .mkt-feature-showcase__item-title { color: #111827; }
.mkt-feature-showcase--light .mkt-feature-showcase__item-desc { color: #111827A6; }
.mkt-feature-showcase--light .mkt-feature-showcase__item-badge {
background: #1118270F;
color: #111827D9;
}
/* Mobile — items become their own cards; keep white bg + light border. */
@media (max-width: 640px) {
.mkt-feature-showcase--light .mkt-feature-showcase__item {
background: #FFFFFF;
border-color: #1118270D;
}
}
/* ============================================================ tableCards ============================================================ */
/* ─── Shell ─── */
.mkt-table-cards {
background: #f4f4f5;
color: #111827;
padding: 88px 0 96px;
font-family: 'Gilroy-Regular', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.mkt-table-cards__inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 48px;
}
/* ─── Header ───
Two-column flex: copy left, explore link bottom-right. Wraps to
a stacked block on narrower screens (see media queries below). */
.mkt-table-cards__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 48px;
margin-bottom: 25px;
}
.mkt-table-cards__header-copy { max-width: 620px; }
.mkt-table-cards__eyebrow {
font-size: clamp(20px,2.6vw,31px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
color: #e63946;
margin: 0 0 16px;
text-transform: uppercase;
}
.mkt-table-cards__heading {
font-size: clamp(22px,2.35vw,27px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.2;
letter-spacing: -0.01em;
color: #111827;
margin: 0 0 18px;
}
.mkt-table-cards__body {
font-size: 16px;
line-height: 1.6;
color: #6b7280;
margin: 0;
}
.mkt-table-cards__explore {
display: inline-block;
flex-shrink: 0;
font-size: 13px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
color: #111827;
text-decoration: none;
padding-bottom: 6px;
border-bottom: 2px solid #e63946;
transition: color .15s ease, border-color .15s ease;
}
.mkt-table-cards__explore:hover,
.mkt-table-cards__explore:focus-visible {
color: #e63946;
border-color: #111827;
}
/* ─── Grid ───
No outer border — cells own the visible borders via top + left,
and the wrapper hides the outermost edges by clipping via
negative offset (see `.mkt-table-cards__cell:nth-child` rules).
Simpler approach used here: white bg on the whole grid, then
gap: 1px + a background colour showing through the 1px seam
between cells → gives "table lines" without per-cell math. */
.mkt-table-cards__grid {
display: grid;
grid-template-columns: repeat(var(--mkt-table-cards-cols, 3), 1fr);
gap: 1px;
background: rgba(17, 24, 39, 0.12); /* line colour bleeds through the 1px gaps */
border: 1px solid rgba(17, 24, 39, 0.12);
/* Rounded on the whole table only (not individual cells).
`overflow: hidden` clips each corner cell to the outer
radius so nothing pokes past the rounded edge. Matches
the 16px radius used across other card blocks. */
border-radius: 16px;
overflow: hidden;
}
/* ─── Cell ─── */
.mkt-table-cards__cell {
background: #ffffff;
padding: 36px 32px 36px;
display: flex;
flex-direction: column;
min-height: 200px;
}
/* Small red step number above the title (e.g. "01"). */
.mkt-table-cards__cell-number {
display: block;
font-size: 15px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.02em;
color: #e63946;
margin: 0 0 12px;
line-height: 1;
}
.mkt-table-cards__cell-title {
font-size: 19px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
color: #111827;
margin: 0 0 14px;
line-height: 1.3;
}
/* Centre a cell's contents vertically when there's no title AND no
description — otherwise the lone CTA (and optional logo) would
cling to the top of the padded box. The link normally uses
`margin-top: auto` to pin to the bottom; reset that inside the
modifier so the flex container's `justify-content: center` takes
over cleanly. */
.mkt-table-cards__cell--center {
justify-content: center;
}
.mkt-table-cards__cell--center .mkt-table-cards__cell-link {
margin-top: 0;
}
/* Optional per-cell logo, e.g. brand mark above the description.
Bounded height keeps varied logo aspect ratios sitting on a
consistent baseline. `object-fit: contain` preserves aspect
ratio without cropping. */
.mkt-table-cards__cell-logo {
margin: 0 0 16px;
}
.mkt-table-cards__cell-logo img {
display: block;
height: 26px;
width: auto;
max-width: 100%;
object-fit: contain;
object-position: left center;
}
/* Tag pills inside a cell — same visual language as
.mkt-grid-view-card__tag, sized for the table context. */
.mkt-table-cards__cell-tags {
list-style: none;
margin: 0 0 20px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mkt-table-cards__cell-tag {
display: inline-flex;
align-items: center;
padding: 6px 10px;
background: #E5E7EB;
color: #4B5563;
font-size: 11.5px;
font-weight: 700;
font-family: 'Gilroy-Medium', 'Gilroy-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.08em;
border-radius: 6px;
}
.mkt-table-cards__cell-desc {
font-size: 15px;
color: #6b7280;
line-height: 1.6;
margin: 0 0 24px;
}
.mkt-table-cards__cell-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto; /* pin to bottom of cell */
font-size: 13px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.12em;
color: #e63946;
text-decoration: none;
transition: color .15s ease, transform .18s ease;
align-self: flex-start;
}
.mkt-table-cards__cell-arrow {
transition: transform .18s ease;
}
.mkt-table-cards__cell-link:hover .mkt-table-cards__cell-arrow,
.mkt-table-cards__cell-link:focus-visible .mkt-table-cards__cell-arrow {
transform: translateX(4px);
}
.mkt-table-cards__cell-link:hover {
color: #c92e3a;
}
/* ─── Tablet ─── */
@media (max-width: 1024px) {
.mkt-table-cards { padding: 72px 0 80px; }
.mkt-table-cards__inner { padding: 0 32px; }
/* Force 2 columns on tablet regardless of desktop count. */
.mkt-table-cards__grid { grid-template-columns: repeat(2, 1fr); }
.mkt-table-cards__cell { padding: 30px 26px; min-height: 220px; }
}
/* ─── Mobile ─── */
@media (max-width: 640px) {
.mkt-table-cards { padding: 56px 0 64px; }
.mkt-table-cards__inner { padding: 0 20px; }
/* Header stacks — copy first, link below. */
.mkt-table-cards__header {
flex-direction: column;
align-items: flex-start;
gap: 20px;
margin-bottom: 32px;
}
.mkt-table-cards__header-copy { max-width: none; }
.mkt-table-cards__eyebrow { font-size: 13px; }
.mkt-table-cards__body { font-size: 15px; }
.mkt-table-cards__explore { font-size: 12px; }
/* Single column — each cell full width. */
.mkt-table-cards__grid { grid-template-columns: 1fr; }
.mkt-table-cards__cell { padding: 26px 22px; min-height: 0; }
.mkt-table-cards__cell-title { font-size: 18px; }
.mkt-table-cards__cell-desc { font-size: 14.5px; margin-bottom: 20px; }
}
/* ─── Dark mode override ───
Triggered by the lightswitch (backgroundLight = false). Colours
use 8-digit hex — the last two hex digits are the alpha channel:
• #FFFFFFA6 → white at ~65% opacity (A6 = 166 / 255).
This lets the semi-transparent text still blend against whatever
dark background colour the editor picks. Eyebrow + cell-link
stay red so the brand accent survives the swap. */
.mkt-table-cards--dark .mkt-table-cards__heading { color: #FFFFFF; }
.mkt-table-cards--dark .mkt-table-cards__body { color: #FFFFFFA6; }
.mkt-table-cards--dark .mkt-table-cards__explore { color: #FFFFFFA6; }
.mkt-table-cards--dark .mkt-table-cards__explore:hover,
.mkt-table-cards--dark .mkt-table-cards__explore:focus-visible {
color: #E63946;
border-color: #FFFFFFA6;
}
/* Grid seam + outer border need to switch to a light-on-dark line
so the "table lines" stay visible. */
.mkt-table-cards--dark .mkt-table-cards__grid {
background: #FFFFFF1F; /* 12% white seam colour */
border-color: #FFFFFF1F;
}
.mkt-table-cards--dark .mkt-table-cards__cell { background: #0F1013; }
.mkt-table-cards--dark .mkt-table-cards__cell-title { color: #FFFFFF; }
.mkt-table-cards--dark .mkt-table-cards__cell-desc { color: #FFFFFFA6; }
/* Tag chip — light-on-dark in dark mode. */
.mkt-table-cards--dark .mkt-table-cards__cell-tag {
background: #FFFFFF29;
color: #FFFFFFD9;
}
/* ═══════════════════════════════════════════════════════════════════
List design (cardDesign == 'list')
Bordered rounded card, one row per card: left column = numbering
kicker + bold title, right column = subTitle kicker + description.
Hairline between rows.
═══════════════════════════════════════════════════════════════════ */
.mkt-table-cards__list {
border: 1px solid #E5E7EB;
border-radius: 16px;
overflow: hidden;
}
.mkt-table-cards__list-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
gap: 48px;
align-items: start;
padding: 32px 40px;
border-bottom: 1px solid #E5E7EB;
}
.mkt-table-cards__list-row:last-child { border-bottom: 0; }
.mkt-table-cards__list-col { min-width: 0; }
/* Small grey uppercase kicker (numbering / "WHAT IT CARRIES"). */
.mkt-table-cards__list-kicker {
display: block;
font-size: 13px;
font-weight: 700;
font-family: 'Gilroy-Medium', 'Gilroy-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.12em;
color: #9CA3AF;
text-transform: uppercase;
margin: 0 0 10px;
}
.mkt-table-cards__list-title {
font-size: clamp(20px, 1.8vw, 24px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
color: #111827;
line-height: 1.2;
margin: 0;
}
.mkt-table-cards__list-desc {
font-size: 17px;
line-height: 1.6;
color: #6B7280;
margin: 0;
}
/* CTA message under the card — grey copy; the |raw link inside turns red. */
.mkt-table-cards__cta-message {
font-size: 16px;
line-height: 1.6;
color: #6B7280;
margin: 20px 0 0;
}
.mkt-table-cards__cta-message a {
color: #e63946;
text-decoration: underline;
text-underline-offset: 3px;
}
.mkt-table-cards__cta-message a:hover,
.mkt-table-cards__cta-message a:focus-visible { color: #c92e3a; }
/* List design — dark mode. */
.mkt-table-cards--dark .mkt-table-cards__list { border-color: #FFFFFF14; }
.mkt-table-cards--dark .mkt-table-cards__list-row { border-bottom-color: #FFFFFF14; }
.mkt-table-cards--dark .mkt-table-cards__list-kicker{ color: #FFFFFF80; }
.mkt-table-cards--dark .mkt-table-cards__list-title { color: #FFFFFF; }
.mkt-table-cards--dark .mkt-table-cards__list-desc,
.mkt-table-cards--dark .mkt-table-cards__cta-message { color: #FFFFFFA6; }
/* List design — mobile: stack the two columns. */
@media (max-width: 640px) {
.mkt-table-cards__list-row {
grid-template-columns: 1fr;
gap: 16px;
padding: 24px 22px;
}
.mkt-table-cards__list-desc { font-size: 15.5px; }
}
/* ============================================================ cardsServices ============================================================ */
/* ─── Shell ─── */
.mkt-grid-view-card {
background: #ffffff;
color: #111827;
padding: 88px 0 96px;
font-family: 'Gilroy-Regular', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.mkt-grid-view-card__inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 48px;
}
/* ─── Section header ───
Two-column flex: copy left (eyebrow + heading + body), explore
link bottom-right. Wraps to a stacked block on narrower screens
via the tablet media query below. Mirrors the pattern used in
tableCards + featureShowcase for visual consistency. */
.mkt-grid-view-card__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 48px;
margin-bottom: 25px;
}
.mkt-grid-view-card__header-copy { max-width: 720px; }
/* Explore link — dark uppercase with red underline, matches the
treatment used in tableCards. Colour inverts under --dark. */
.mkt-grid-view-card__explore {
display: inline-block;
flex-shrink: 0;
font-size: 13px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
color: #111827;
text-decoration: none;
padding-bottom: 6px;
border-bottom: 2px solid #e63946;
transition: color .15s ease, border-color .15s ease;
}
.mkt-grid-view-card__explore:hover,
.mkt-grid-view-card__explore:focus-visible {
color: #e63946;
border-color: #111827;
}
/* Section header — child text elements keep their existing colours,
just remove the redundant bottom margin on `__body` (the wrapping
__header now owns the 48px gap to the grid). */
.mkt-grid-view-card__header .mkt-grid-view-card__body { margin-bottom: 0; }
/* ─── Section header (individual text elements) ─── */
.mkt-grid-view-card__eyebrow {
font-size: clamp(20px,2.6vw,31px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.12em;
color: #e63946;
margin: 0 0 18px;
text-transform: uppercase;
}
.mkt-grid-view-card__heading {
font-size: clamp(22px,2.35vw,27px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.15;
letter-spacing: -0.01em;
color: #111827;
margin: 0 0 20px;
max-width: 720px;
}
.mkt-grid-view-card__body {
font-size: 17px;
line-height: 1.6;
color: #6b7280;
max-width: 720px;
margin: 0 0 48px;
}
/* ─── Card grid ─── */
.mkt-grid-view-card__grid {
display: grid;
/* Column count driven by the `columnNumber` field (--mkt-grid-cols),
defaulting to 3. Tablet/mobile media queries below override it. */
grid-template-columns: repeat(var(--mkt-grid-cols, 3), 1fr);
gap: 24px;
}
/* ─── List design ───
One card per row, image left + copy right. Uses the same soft
gray hairline card as the grid variant so it visually reads as
part of the same block family. Mobile stacks image over copy. */
.mkt-grid-view-card__list {
display: flex;
flex-direction: column;
gap: 24px;
}
.mkt-grid-view-card__list-item {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 40px;
align-items: center;
background: #FAFAFB;
border: 1px solid #E5E7EB;
border-radius: 16px;
overflow: hidden;
transition: border-color .22s ease, box-shadow .22s ease;
}
.mkt-grid-view-card__list-item:hover {
border-color: #111827;
box-shadow: 0 18px 40px rgba(15, 16, 19, 0.06);
}
/* Media — full image (contain) centred over a blurred backdrop of
the same picture, so mixed portrait/landscape uploads keep a
consistent size instead of cropping. Backdrop URL comes from the
inline `--card-bg` custom property in the markup. */
.mkt-grid-view-card__list-media {
position: relative;
overflow: hidden;
min-height: 260px;
background: #E5E7EB;
}
.mkt-grid-view-card__list-media::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--card-bg);
background-size: cover;
background-position: center;
transform: scale(1.15);
filter: blur(20px) brightness(0.95);
z-index: 0;
}
.mkt-grid-view-card__list-media img {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: clamp(240px, 34vw, 340px);
object-fit: contain; /* show the FULL image, no crop */
object-position: center center;
}
/* Body — right column padding + vertical rhythm. */
.mkt-grid-view-card__list-body {
padding: 32px 36px 36px 0;
display: flex;
flex-direction: column;
}
/* FORMAT NN kicker — small muted uppercase. */
.mkt-grid-view-card__list-kicker {
font-size: 12px;
font-weight: 700;
font-family: 'Gilroy-Medium', 'Gilroy-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
color: #6B7280;
text-transform: uppercase;
margin: 0 0 14px;
}
/* Title — large dark bold. */
.mkt-grid-view-card__list-title {
font-size: clamp(17px,1.45vw,19px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.2;
color: #111827;
margin: 0 0 10px;
}
/* Subtitle — red kicker beneath the title. */
.mkt-grid-view-card__list-subtitle {
font-size: 15px;
font-weight: 700;
font-family: 'Gilroy-Medium', 'Gilroy-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
color: #e63946;
margin: 0 0 18px;
}
/* Description paragraph. */
.mkt-grid-view-card__list-desc {
font-size: 15px;
line-height: 1.65;
color: #4B5563;
margin: 0 0 22px;
}
/* ═══════════════════════════════════════════════════════════════════
Large design (cardDesign == 'large')
Scales the list card up + adds the category badge, stat row and
"who lists" line from the reference mock. Scoped to
`.mkt-grid-view-card__list--large` so the plain list design is
untouched.
═══════════════════════════════════════════════════════════════════ */
.mkt-grid-view-card__list--large .mkt-grid-view-card__list-item {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 56px;
background: #FFFFFF;
border-radius: 24px;
}
.mkt-grid-view-card__list--large .mkt-grid-view-card__list-media img {
height: clamp(240px, 45vw, 406px);
}
.mkt-grid-view-card__list--large .mkt-grid-view-card__list-body {
padding: 48px 56px 48px 0;
}
.mkt-grid-view-card__list--large .mkt-grid-view-card__list-title {
font-size: clamp(17px,1.45vw,19px);
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0 0 18px;
}
.mkt-grid-view-card__list--large .mkt-grid-view-card__list-desc {
font-size: 14.5px;
margin: 0 0 15px;
line-height: 1.2;
}
/* Red category badge (e.g. "VENUES"). */
.mkt-grid-view-card__list-badge {
display: inline-flex;
align-items: center;
align-self: flex-start;
padding: 7px 14px;
margin: 0 0 20px;
background: #e63946;
color: #ffffff;
font-size: 12px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.12em;
border-radius: 6px;
text-transform: uppercase;
}
/* Hairline divider above & below the stat row. */
.mkt-grid-view-card__list-divider {
height: 1px;
background: #E5E7EB;
margin: 4px 0 14px;
}
.mkt-grid-view-card__list-divider + .mkt-grid-view-card__list-wholists { margin-top: 4px; }
/* Stat row — flex row of stat columns (stat1/2/3), each stacking a
bold value over a grey label. */
.mkt-grid-view-card__list-stats {
display: flex;
flex-wrap: wrap;
gap: 40px;
margin: 0 0 5px;
}
.mkt-grid-view-card__list-stat { display: flex; flex-direction: column; }
.mkt-grid-view-card__list-stat-value {
font-size: 18px
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.1;
color: #111827;
letter-spacing: -0.01em;
margin-bottom: 6px;
}
.mkt-grid-view-card__list-stat-label {
font-size: 12.5px;
font-weight: 500;
color: #9CA3AF;
line-height: 1.4;
}
/* "Who lists:" line — regular body copy; editor bolds the label via
the rich field (rendered with |raw). */
.mkt-grid-view-card__list-wholists {
font-size: 15.5px;
line-height: 1.2;
color: #4B5563;
margin: 0 0 24px;
}
.mkt-grid-view-card__list-wholists strong,
.mkt-grid-view-card__list-wholists b { color: #111827; font-weight: 800; }
/* Red CTA variant for the large card ("SEE PLANS & DETAILS →"). */
.mkt-grid-view-card__list-cta--red { color: #e63946; }
.mkt-grid-view-card__list-cta--red:hover,
.mkt-grid-view-card__list-cta--red:focus-visible { color: #c92e3a; }
/* Large design — dark-mode text tweaks for the new elements. */
.mkt-grid-view-card--dark .mkt-grid-view-card__list-stat-value { color: #FFFFFF; }
.mkt-grid-view-card--dark .mkt-grid-view-card__list-stat-label { color: #FFFFFF80; }
.mkt-grid-view-card--dark .mkt-grid-view-card__list-wholists { color: #FFFFFFA6; }
.mkt-grid-view-card--dark .mkt-grid-view-card__list-wholists strong,
.mkt-grid-view-card--dark .mkt-grid-view-card__list-wholists b { color: #FFFFFF; }
.mkt-grid-view-card--dark .mkt-grid-view-card__list-divider { background: #FFFFFF1F; }
/* Tag pills — button-style chips (bigger + bolder than the grid
variant's chip so they read like format-picker buttons). */
.mkt-grid-view-card__list-tags {
list-style: none;
margin: 0 0 22px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.mkt-grid-view-card__list-tag {
display: inline-flex;
align-items: center;
padding: 6px 10px;
background: #E5E7EB;
color: #374151;
font-size: 12px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.1em;
border-radius: 4px;
}
/* Specs link — same red-underlined uppercase treatment as the
block's `__explore` header link. */
.mkt-grid-view-card__list-cta {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
font-size: 12.5px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
color: #111827;
text-decoration: none;
transition: color .15s ease, border-color .15s ease;
}
.mkt-grid-view-card__list-cta:hover,
.mkt-grid-view-card__list-cta:focus-visible {
color: #e63946;
border-color: #111827;
}
.mkt-grid-view-card__list-cta-arrow {
transition: transform .18s ease;
}
.mkt-grid-view-card__list-cta:hover .mkt-grid-view-card__list-cta-arrow {
transform: translateX(4px);
}
/* Dark-mode overrides for the list design. */
.mkt-grid-view-card--dark .mkt-grid-view-card__list-item {
background: #0F1013;
border-color: #FFFFFF14;
}
.mkt-grid-view-card--dark .mkt-grid-view-card__list-item:hover { border-color: #FFFFFF; }
.mkt-grid-view-card--dark .mkt-grid-view-card__list-kicker { color: #FFFFFFA6; }
.mkt-grid-view-card--dark .mkt-grid-view-card__list-title { color: #FFFFFF !important; }
.mkt-grid-view-card--dark .mkt-grid-view-card__list-desc { color: #FFFFFFA6 !important; }
.mkt-grid-view-card--dark .mkt-grid-view-card__list-tag {
background: #FFFFFF29;
color: #FFFFFFD9;
}
.mkt-grid-view-card--dark .mkt-grid-view-card__list-cta { color: #FFFFFFA6 !important; }
.mkt-grid-view-card--dark .mkt-grid-view-card__list-cta:hover {
color: #E63946 !important;
border-color: #FFFFFFA6;
}
/* Tablet — reduce media minimum and padding. */
@media (max-width: 1024px) {
.mkt-grid-view-card__list-item { gap: 28px; }
.mkt-grid-view-card__list-body { padding: 26px 28px 28px 0; }
.mkt-grid-view-card__list-media { min-height: 220px; }
}
/* Mobile — stack image over copy. */
@media (max-width: 640px) {
.mkt-grid-view-card__list-item {
grid-template-columns: 1fr;
gap: 0;
}
.mkt-grid-view-card__list-media { min-height: 200px; aspect-ratio: 16 / 10; }
.mkt-grid-view-card__list-body { padding: 22px 22px 26px; }
.mkt-grid-view-card__list-title { font-size: 20px; }
.mkt-grid-view-card__list-desc { font-size: 14.5px; }
/* Large design — stack image over copy on mobile.
This selector (0,2,0) is needed to beat the non-media
two-column rule of the same specificity. */
.mkt-grid-view-card__list--large .mkt-grid-view-card__list-item {
grid-template-columns: 1fr;
gap: 0;
}
.mkt-grid-view-card__list--large .mkt-grid-view-card__list-media img { height: 100%; }
/* Symmetric padding when stacked (desktop uses left:0 for the
side-by-side layout, which flushes the copy to the edge here). */
.mkt-grid-view-card__list--large .mkt-grid-view-card__list-body { padding: 32px 36px 36px; }
.mkt-grid-view-card__list--large .mkt-grid-view-card__list-title { font-size: 24px; }
.mkt-grid-view-card__list--large .mkt-grid-view-card__list-desc { font-size: 15.5px; }
.mkt-grid-view-card__list-stats { gap: 24px; }
}
/* Large design — tablet: reduce column gap + body padding. */
@media (max-width: 1024px) {
.mkt-grid-view-card__list--large .mkt-grid-view-card__list-item { gap: 32px; }
.mkt-grid-view-card__list--large .mkt-grid-view-card__list-body { padding: 32px 32px 32px 0; }
}
/* ─── Card ───
Base (light mode) card colour is #FAFAFB — a very pale off-white
chip that sits softly against the section's white/coloured bg.
Overridden by the inline `style="background: {{ backgroundColor }}"`
when a colour-picker value is set, and by the --dark modifier
below when the lightswitch is off. */
.mkt-grid-view-card__card {
background: #FAFAFB;
border: 1px solid #E5E7EB; /* neutral-200 gray hairline */
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
/* Fill the grid cell (or the wrapping card-link) so every card in
a row is the same height regardless of content length. Grid
cells stretch by default; this makes the article fill that
height even when it sits inside an `__card-link` anchor. */
height: 100%;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* When a card is wrapped in a link, that anchor is the grid item —
make it stretch and fill the row height too. */
.mkt-grid-view-card__grid > .mkt-grid-view-card__card-link { height: 100%; }
.mkt-grid-view-card__card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(15, 16, 19, 0.08);
border-color: #111827; /* dark slate → reads as black */
}
/* Media — fixed 3:2 wrapper regardless of the uploaded image's
orientation. The same picture fills the wrapper as a blurred
backdrop (::before), and the real image sits on top fully visible
(object-fit: contain), centred. So portrait/landscape/odd sizes
all render at a consistent card size. The blurred URL comes from
the inline `--card-bg` custom property set in the markup. */
.mkt-grid-view-card__media {
position: relative;
aspect-ratio: 3 / 2;
overflow: hidden;
background: #e5e7eb;
}
.mkt-grid-view-card__media::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--card-bg);
background-size: cover;
background-position: center;
/* Scale up so the blur doesn't reveal soft transparent edges. */
transform: scale(1.15);
filter: blur(20px) brightness(0.95);
z-index: 0;
}
.mkt-grid-view-card__media img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain; /* show the FULL image, no crop */
object-position: center center;
display: block;
}
/* Content — pads out the rest of the card, flex-col so tags sit
at the bottom regardless of description length. */
.mkt-grid-view-card__content {
padding: 28px 28px 32px;
display: flex;
flex-direction: column;
flex: 1;
}
/* Optional per-card subtitle / eyebrow — small red uppercase kicker
above the title (e.g. "VENUES · JUNE 10, 2026"). Matches the
treatment of the section-level `__eyebrow`, scaled down. */
.mkt-grid-view-card__subtitle {
font-size: 11.5px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
color: #e63946;
text-transform: uppercase;
margin: 0 0 8px;
}
.mkt-grid-view-card__title {
font-size: 17px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
color: #111827;
margin: 0 0 8px;
line-height: 1.25;
}
/* Title-only card (no subtitle, no description) — smaller title,
no padding, no margin. */
.mkt-grid-view-card__title--only {
font-size: 15px;
padding: 0;
margin: 0;
}
.mkt-grid-view-card__desc {
font-size: 15px;
color: #6b7280;
line-height: 1.6;
margin: 0 0 24px;
}
/* ── Card CTA (e.g. "TALK TO THE TEAM") ──
Red uppercase link-styled span at the bottom of the card content.
The whole card is the link, so this is a
, not an . */
.mkt-grid-view-card__cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font-size: 13px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #e63946;
}
.mkt-grid-view-card__cta-arrow { transition: transform .18s ease; }
.mkt-grid-view-card__card-link:hover .mkt-grid-view-card__cta-arrow { transform: translateX(4px); }
/* ── Dark card → light text ──
Applied when the card's background luminance is dark (Twig decides
via `.luma`). Title/subtitle go white, description a soft grey. */
.mkt-grid-view-card__card--on-dark .mkt-grid-view-card__title { color: #ffffff; }
.mkt-grid-view-card__card--on-dark .mkt-grid-view-card__subtitle { color: #ffffff; }
.mkt-grid-view-card__card--on-dark .mkt-grid-view-card__desc { color: #A9A9B4; }
/* Tag pills — small, uppercase, on a slightly darker chip. */
.mkt-grid-view-card__tags {
list-style: none;
margin: auto 0 0; /* pin to bottom of card */
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mkt-grid-view-card__tag {
display: inline-flex;
align-items: center;
padding: 7px 12px;
background: #e5e7eb;
color: #4b5563;
font-size: 11.5px;
font-weight: 700;
font-family: 'Gilroy-Medium', 'Gilroy-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.08em;
border-radius: 6px;
}
/* ─── Tablet ─── */
@media (max-width: 1024px) {
.mkt-grid-view-card { padding: 72px 0 80px; }
.mkt-grid-view-card__inner { padding: 0 32px; }
.mkt-grid-view-card__grid { grid-template-columns: repeat(2, 1fr); }
.mkt-grid-view-card__body { margin-bottom: 40px; }
/* Header: stack the explore link BELOW the copy on narrower
screens rather than pushing it far to the right. */
.mkt-grid-view-card__header {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.mkt-grid-view-card__header-copy { max-width: none; }
}
/* ─── Mobile ─── */
@media (max-width: 640px) {
.mkt-grid-view-card { padding: 56px 0 64px; }
.mkt-grid-view-card__inner { padding: 0 20px; }
.mkt-grid-view-card__eyebrow { font-size: 13px; }
.mkt-grid-view-card__body { font-size: 15.5px; margin-bottom: 32px; }
.mkt-grid-view-card__grid { grid-template-columns: 1fr; gap: 20px; }
.mkt-grid-view-card__content { padding: 24px 22px 26px; }
.mkt-grid-view-card__title { font-size: 20px; }
.mkt-grid-view-card__desc { font-size: 14.5px; margin-bottom: 20px; }
}
/* ─── Dark mode override ───
Triggered by the lightswitch (backgroundLight = false). 8-digit
hex encodes alpha in the last two digits:
• #FFFFFFA6 → white at ~65% opacity (A6 = 166 / 255)
• #FFFFFFD9 → white at ~85% opacity (tag text)
• #FFFFFF29 → white at ~16% opacity (tag chip bg)
• #FFFFFF14 → white at ~8% opacity (card hairline)
Eyebrow keeps the red brand accent so it survives the swap.
!important is used on text colours so they can't be shadowed
by the shell's inherited `color: #111827` or a base rule set
later in the cascade. */
.mkt-grid-view-card--dark { color: #FFFFFFA6 !important; }
.mkt-grid-view-card--dark .mkt-grid-view-card__heading { color: #FFFFFF !important; }
.mkt-grid-view-card--dark .mkt-grid-view-card__body { color: #FFFFFFA6 !important; }
/* Explore link in dark mode — swap dark slate for white, keep red
underline for brand accent. */
.mkt-grid-view-card--dark .mkt-grid-view-card__explore { color: #FFFFFFA6 !important; }
.mkt-grid-view-card--dark .mkt-grid-view-card__explore:hover,
.mkt-grid-view-card--dark .mkt-grid-view-card__explore:focus-visible {
color: #E63946 !important;
border-color: #FFFFFFA6;
}
/* Cards keep their inline `background: {{ backgroundColor }}`
when set — the hairline still shows the card edge over dark
section colours. */
.mkt-grid-view-card--dark .mkt-grid-view-card__card {
background: #0F1013;
border: 1px solid #FFFFFF14;
}
.mkt-grid-view-card--dark .mkt-grid-view-card__title { color: #FFFFFF !important; }
.mkt-grid-view-card--dark .mkt-grid-view-card__desc { color: #FFFFFFA6 !important; }
/* Tag chip — light-on-dark instead of dark-on-light. */
.mkt-grid-view-card--dark .mkt-grid-view-card__tag {
background: #FFFFFF29;
color: #FFFFFFD9 !important;
}
/* ─── Carousel (Slick) ───
Slick clones + injects `.slick-track` / `.slick-slide` wrappers
at init time; the CSS below targets those generated nodes so
cards stretch to equal height across a row and slides have the
right horizontal breathing room.
`visibility: hidden` before init hides the un-slicked stack so
we don't get a flash of stacked cards on first paint — Slick
flips it visible via `.slick-initialized`. */
.mkt-grid-view-card__carousel:not(.slick-initialized) {
display: flex;
gap: 24px;
overflow: hidden; /* clip the un-slicked stack */
visibility: hidden; /* prevent flicker */
}
.mkt-grid-view-card__carousel:not(.slick-initialized) > .mkt-grid-view-card__slide {
flex: 0 0 33.333%;
}
.mkt-grid-view-card__carousel .slick-track {
display: flex !important; /* equal-height cards across the row */
}
.mkt-grid-view-card__carousel .slick-slide {
height: auto;
padding: 0 12px; /* half the visual gap on each side */
}
.mkt-grid-view-card__carousel .slick-slide > div,
.mkt-grid-view-card__carousel .mkt-grid-view-card__slide,
.mkt-grid-view-card__carousel .mkt-grid-view-card__card {
height: 100%;
}
/* ── Peek next slide ──
`padding-right` on `.slick-list` shrinks the width Slick uses to
compute each slide (jQuery `.width()` returns content width, so
padding is subtracted). With `slidesToShow: 3` and a 15% right
padding, the 4 slides render at ~28.3% each and 3 fit inside
the ~85% content area — the 4th slide's left edge sits inside
the padding area, which is still visible (overflow:hidden clips
at the padding edge, not the content edge). Result: ~15% of the
next slide peeks in from the right, signalling more content.
`margin-left: -12px` counters the first slide's own 12px padding
so the leftmost card still lines up with the header's left edge. */
.mkt-grid-view-card__carousel .slick-list {
margin: 0 0 0 -12px;
padding-right: 15%;
}
/* ─── Carousel arrows (top-right of header) ───
Slick's default arrow styles rely on absolute positioning
against the track. We're appending our arrows into
`.mkt-grid-view-card__nav` inside the header instead, so we
need to strip Slick's absolute rules and lay them out as
simple inline buttons. */
.mkt-grid-view-card__nav {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.mkt-grid-view-card__arrow {
position: static; /* override Slick's absolute default */
transform: none;
width: 48px;
height: 48px;
padding: 0;
border-radius: 50%;
border: 1px solid #E5E7EB;
background: #FFFFFF;
color: #111827;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.mkt-grid-view-card__arrow:before,
.mkt-grid-view-card__arrow:after { content: none; } /* kill Slick's ‹ › glyphs */
.mkt-grid-view-card__arrow svg {
width: 20px;
height: 20px;
display: block;
}
.mkt-grid-view-card__arrow:hover,
.mkt-grid-view-card__arrow:focus-visible {
border-color: #111827;
color: #111827;
}
.mkt-grid-view-card__arrow.slick-disabled {
opacity: 0.35;
cursor: default;
}
/* Dark-mode arrow chip — invert border/bg/icon for legibility. */
.mkt-grid-view-card--dark .mkt-grid-view-card__arrow {
background: transparent;
border-color: #FFFFFF29;
color: #FFFFFF;
}
.mkt-grid-view-card--dark .mkt-grid-view-card__arrow:hover,
.mkt-grid-view-card--dark .mkt-grid-view-card__arrow:focus-visible {
border-color: #FFFFFF;
}
/* ─── Footer CTA ───
Small red-underlined link that sits under the grid/carousel.
Same visual language as `__explore` in the header. */
.mkt-grid-view-card__footer-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 40px;
font-size: 13px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
color: #111827;
text-decoration: none;
padding-bottom: 6px;
border-bottom: 2px solid #e63946;
transition: color .15s ease, border-color .15s ease;
}
.mkt-grid-view-card__footer-cta:hover,
.mkt-grid-view-card__footer-cta:focus-visible {
color: #e63946;
border-color: #111827;
}
.mkt-grid-view-card__footer-cta-arrow {
transition: transform .18s ease;
}
.mkt-grid-view-card__footer-cta:hover .mkt-grid-view-card__footer-cta-arrow {
transform: translateX(4px);
}
/* Footer CTA in dark mode. */
.mkt-grid-view-card--dark .mkt-grid-view-card__footer-cta { color: #FFFFFFA6; }
.mkt-grid-view-card--dark .mkt-grid-view-card__footer-cta:hover,
.mkt-grid-view-card--dark .mkt-grid-view-card__footer-cta:focus-visible {
color: #E63946;
border-color: #FFFFFFA6;
}
/* Responsive peek amounts — the peek should stay noticeable but
not dominate at narrower widths.
Tablet (2 slides): reveal ~20% of the 3rd slide.
Mobile (1 slide): reveal ~15% of the 2nd — small swipe hint. */
@media (max-width: 1024px) {
.mkt-grid-view-card__carousel .slick-list { padding-right: 20%; }
}
@media (max-width: 640px) {
.mkt-grid-view-card__carousel .slick-list { padding-right: 15%; }
/* Hide the header nav slot (Slick config also disables arrows
here — free the header row from an unused container). */
.mkt-grid-view-card__nav { display: none; }
}
/* ============================================================ listingLeftRight ============================================================ */
/* ─── Shell ─── */
.mkt-listing-lr {
color: #111827;
padding: 72px 0 80px;
font-family: 'Gilroy-Regular', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.mkt-listing-lr__inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 48px;
}
/* ─── Section header ───
Copy-left / explore-link-right (same shape as tableCards &
cardsServices). Wraps to a stacked block on narrower screens
via the tablet media query. */
.mkt-listing-lr__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 48px;
margin-bottom: 25px;
}
.mkt-listing-lr__header-copy { max-width: 720px; }
.mkt-listing-lr__eyebrow {
font-size: clamp(20px, 2.6vw, 31px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.12em;
color: #e63946;
margin: 0 0 18px;
text-transform: uppercase;
}
.mkt-listing-lr__heading {
font-size: clamp(22px, 2.35vw, 27px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.2;
letter-spacing: -0.01em;
color: #111827;
margin: 0 0 18px;
}
.mkt-listing-lr__body {
font-size: 16px;
line-height: 1.6;
color: #6b7280;
margin: 0;
}
.mkt-listing-lr__explore {
display: inline-block;
flex-shrink: 0;
font-size: 13px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
color: #111827;
text-decoration: none;
padding-bottom: 6px;
border-bottom: 2px solid #e63946;
transition: color .15s ease, border-color .15s ease;
}
.mkt-listing-lr__explore:hover,
.mkt-listing-lr__explore:focus-visible {
color: #e63946;
border-color: #111827;
}
/* ─── Two-column list grid ─── */
.mkt-listing-lr__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
}
/* ─── Column ─── */
.mkt-listing-lr__col {
min-width: 0;
}
/* Bordered card variant — the per-column `border` lightswitch. Wraps the
whole column (title + list) in a soft rounded outline, per the design. */
.mkt-listing-lr__col--border {
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 40px 44px;
}
@media (max-width: 640px) {
.mkt-listing-lr__col--border { padding: 28px 24px; }
}
/* ─── Column logo/picture (top of card) ─── */
.mkt-listing-lr__col-logo {
text-align: center;
margin: 0 0 28px;
}
.mkt-listing-lr__col-logo img {
display: inline-block;
width: auto;
max-width: 100%;
max-height: 140px;
object-fit: contain;
}
/* ─── Title ─── */
.mkt-listing-lr__title {
font-size: clamp(20px,2.6vw,31px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.01em;
color: #e63946;
margin: 0 0 28px;
text-transform: uppercase;
}
/* Bordered-column title — the black, non-uppercased "Do" from the design.
Keeps the Gilroy-Bold stack; just recolours + drops the uppercasing. */
.mkt-listing-lr__title--plain {
color: #111827;
text-transform: none;
letter-spacing: -0.01em;
font-size: clamp(24px, 2.4vw, 30px);
}
/* ─── Column sub-title ───
Black, mixed-case bold line under the red title ("The Challenge").
Sits tight under the title, above the description/list. */
.mkt-listing-lr__subtitle {
font-size: clamp(22px,2.35vw,27px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.2;
letter-spacing: -0.01em;
color: #111827;
margin: 0 0 26px;
}
/* Pull it up under the title (which carries a 28px bottom margin). */
.mkt-listing-lr__title + .mkt-listing-lr__subtitle { margin-top: -16px; }
/* ─── Column description + divider ───
Optional intro paragraph under the title, with a hairline rule
separating it from the list (shown only when a description is set). */
.mkt-listing-lr__desc {
font-size: 17px;
line-height: 1.6;
color: #6B7280;
margin: 0 0 24px;
}
.mkt-listing-lr__rule {
border: 0;
border-top: 1px solid #E5E7EB;
margin: 0 0 20px;
}
/* ─── List (plain / dashed) ───
Default look = the "BEST FOR" column: no card, each item is
preceded by a small red dash. Uses a CSS custom bullet via
`::before` so we don't have to hand-inject SVG. */
.mkt-listing-lr__list {
list-style: none;
margin: 0;
padding: 0;
}
/* Optional free-text block under the list (bottomLeft / bottomRight).
Kept tight to the list — small top gap only; first/last child margins
are zeroed so a rich-text doesn't add a big space. */
.mkt-listing-lr__bottom {
margin-top: 12px;
font-size: 15px;
line-height: 1.6;
color: #6B7280;
font-family: 'Gilroy-Regular', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.mkt-listing-lr__bottom > *:first-child { margin-top: 0; }
.mkt-listing-lr__bottom > *:last-child { margin-bottom: 0; }
.mkt-listing-lr__list .mkt-listing-lr__item {
position: relative;
padding: 8px 0; /* no left indent by default (icon = none) */
font-size: 16px;
line-height: 1.55;
color: #111827;
}
/* Linked row — text is an anchor and turns red. */
.mkt-listing-lr__item--link { color: #e63946; }
.mkt-listing-lr__item-link {
color: #e63946;
text-decoration: none;
transition: color .15s ease;
}
.mkt-listing-lr__item-link:hover,
.mkt-listing-lr__item-link:focus-visible {
color: #c92e3a;
text-decoration: underline;
text-underline-offset: 3px;
}
/* ── Per-row icon marker (the Table's `icon` column) ──
none (default) → no marker. dash → red bar, check → red ✓,
cross → grey ✗. Each variant adds its own left indent + ::before;
SVG colours are baked in. Applied per
so rows can mix markers. */
.mkt-listing-lr__list .mkt-listing-lr__item--icon-dash,
.mkt-listing-lr__list .mkt-listing-lr__item--icon-check,
.mkt-listing-lr__list .mkt-listing-lr__item--icon-cross {
padding-left: 30px;
}
.mkt-listing-lr__item--icon-dash::before {
content: "";
position: absolute;
left: 0;
top: 20px;
width: 16px;
height: 2px;
background: #e63946;
}
.mkt-listing-lr__item--icon-check::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 18px;
height: 18px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
}
.mkt-listing-lr__item--icon-cross::before {
content: "";
position: absolute;
left: 0;
top: 12px;
width: 14px;
height: 14px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* ─── List (bordered) ───
Matches the "WHAT'S INCLUDED" column: outer border + rounded
corners, each row separated by a hairline, no bullet marker. */
.mkt-listing-lr__list--bordered {
border: 1px solid #E5E7EB;
border-radius: 12px;
overflow: hidden;
background: #ffffff;
}
.mkt-listing-lr__list--bordered .mkt-listing-lr__item {
padding: 20px 24px;
font-size: 16px;
line-height: 1.5;
color: #111827;
border-bottom: 1px solid #E5E7EB;
}
.mkt-listing-lr__list--bordered .mkt-listing-lr__item::before {
content: none; /* no dash in bordered mode */
}
.mkt-listing-lr__list--bordered .mkt-listing-lr__item:last-child {
border-bottom: 0;
}
/* Titled row (design2 with a subTitle): bold heading + grey sub line,
stacked — matches the media-kit checklist. Slightly more vertical
padding so the two-line rows breathe. */
.mkt-listing-lr__list--bordered .mkt-listing-lr__item--titled {
display: flex;
flex-direction: column;
gap: 8px;
padding: 24px 28px;
}
.mkt-listing-lr__item-title {
font-size: 19px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.25;
letter-spacing: -0.01em;
color: #111827;
}
.mkt-listing-lr__item-title .mkt-listing-lr__item-link { color: #111827; }
.mkt-listing-lr__item-title .mkt-listing-lr__item-link:hover,
.mkt-listing-lr__item-title .mkt-listing-lr__item-link:focus-visible { color: #e63946; }
.mkt-listing-lr__item-sub {
font-size: 16px;
line-height: 1.5;
color: #6B7280;
}
/* design1 items with a description: bold black title (lead) flowing
inline into a grey description — matches the venue-profiles list. */
.mkt-listing-lr__item-lead {
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
color: #111827;
}
.mkt-listing-lr__item-lead .mkt-listing-lr__item-link { color: #111827; }
.mkt-listing-lr__item-lead .mkt-listing-lr__item-link:hover,
.mkt-listing-lr__item-lead .mkt-listing-lr__item-link:focus-visible { color: #e63946; }
.mkt-listing-lr__item-desc { color: #6B7280; }
.mkt-listing-lr__item-desc::before { content: " "; }
/* ─── Tablet ─── */
@media (max-width: 1024px) {
.mkt-listing-lr { padding: 56px 0 64px; }
.mkt-listing-lr__inner { padding: 0 32px; }
.mkt-listing-lr__grid { gap: 40px; }
.mkt-listing-lr__title { margin-bottom: 20px; }
/* Header stops behaving as horizontal flex — stack explore link
below the copy on narrower screens. */
.mkt-listing-lr__header {
flex-direction: column;
align-items: flex-start;
gap: 24px;
margin-bottom: 36px;
}
.mkt-listing-lr__header-copy { max-width: none; }
}
/* ─── Mobile ─── */
@media (max-width: 640px) {
.mkt-listing-lr { padding: 44px 0 52px; }
.mkt-listing-lr__inner { padding: 0 20px; }
.mkt-listing-lr__grid {
grid-template-columns: 1fr;
gap: 36px;
}
.mkt-listing-lr__title { font-size: 24px; }
.mkt-listing-lr__list .mkt-listing-lr__item { font-size: 15px; }
.mkt-listing-lr__list--bordered .mkt-listing-lr__item {
padding: 16px 18px;
font-size: 15px;
}
}
/* ═══════════════════════════════════════════════════════════════════
Compare design (both columns == 'design3')
"A quick way to decide" — bordered rounded table, one row per
scenario: grey copy left, bold recommendation right, hairline
between rows. Last pick can be a red underlined link.
═══════════════════════════════════════════════════════════════════ */
.mkt-listing-lr__compare {
border: 1px solid #E5E7EB;
border-radius: 16px;
overflow: hidden;
}
.mkt-listing-lr__compare-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
/* padding: 22px 36px; */
padding: 13px 24px;
border-bottom: 1px solid #E5E7EB;
}
.mkt-listing-lr__compare-row:last-child { border-bottom: 0; }
.mkt-listing-lr__compare-left {
font-size: 17px;
line-height: 1.5;
color: #6B7280;
}
.mkt-listing-lr__compare-right {
font-size: 17px;
line-height: 1.5;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
color: #111827;
}
.mkt-listing-lr__compare-link,
.mkt-listing-lr__compare-right a {
color: #e63946;
text-decoration: underline;
text-underline-offset: 3px;
transition: color .15s ease;
}
.mkt-listing-lr__compare-link:hover,
.mkt-listing-lr__compare-right a:hover,
.mkt-listing-lr__compare-link:focus-visible { color: #c92e3a; }
/* Compare — mobile: stack left over right, tighten padding. */
@media (max-width: 640px) {
.mkt-listing-lr__compare-row {
grid-template-columns: 1fr;
gap: 6px;
padding: 18px 20px;
}
.mkt-listing-lr__compare-left,
.mkt-listing-lr__compare-right { font-size: 15.5px; }
}
/* ═══════════════════════════════════════════════════════════════════
FAQ design (both columns == 'design4')
Bordered rounded table, one row per question: bold question left
(narrower), grey answer right (wider), hairline between rows.
═══════════════════════════════════════════════════════════════════ */
.mkt-listing-lr__faq {
border: 1px solid #E5E7EB;
border-radius: 16px;
overflow: hidden;
}
.mkt-listing-lr__faq-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr);
gap: 48px;
align-items: start;
padding: 26px 40px;
border-bottom: 1px solid #E5E7EB;
}
.mkt-listing-lr__faq-row:last-child { border-bottom: 0; }
.mkt-listing-lr__faq-q {
font-size: 17px;
line-height: 1.5;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
color: #111827;
}
.mkt-listing-lr__faq-a {
font-size: 17px;
line-height: 1.6;
color: #6B7280;
}
/* FAQ — mobile: stack question over answer, tighten padding. */
@media (max-width: 640px) {
.mkt-listing-lr__faq-row {
grid-template-columns: 1fr;
gap: 8px;
padding: 20px;
}
.mkt-listing-lr__faq-q,
.mkt-listing-lr__faq-a { font-size: 15.5px; }
}
/* ═══════════════════════════════════════════════════════════════════
"At a glance" design (both columns == 'design5')
Bordered rounded table, one row per spec: grey uppercase label
left, value right (bold text, or pill chips when comma-separated).
═══════════════════════════════════════════════════════════════════ */
.mkt-listing-lr__glance {
border: 1px solid #E5E7EB;
border-radius: 16px;
overflow: hidden;
}
.mkt-listing-lr__glance-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr);
gap: 48px;
align-items: center;
padding: 16px 34px;
border-bottom: 1px solid #E5E7EB;
}
.mkt-listing-lr__glance-row:last-child { border-bottom: 0; }
.mkt-listing-lr__glance-label {
font-size: 12px;
font-weight: 700;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6B7280;
}
.mkt-listing-lr__glance-value {
font-size: 16px;
line-height: 1.5;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
color: #111827;
}
/* Pill chips (comma-separated values, e.g. "SERVICES USED"). */
.mkt-listing-lr__glance-pills {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.mkt-listing-lr__glance-pill {
display: inline-flex;
align-items: center;
padding: 10px 18px;
border: 1px solid #E5E7EB;
border-radius: 999px;
font-size: 15px;
font-weight: 800;
color: #111827;
}
/* At a glance — mobile: stack label over value, tighten padding. */
@media (max-width: 640px) {
.mkt-listing-lr__glance-row {
grid-template-columns: 1fr;
gap: 10px;
padding: 20px;
}
.mkt-listing-lr__glance-value { font-size: 15.5px; }
}
/* ═══════════════════════════════════════════════════════════════════
Stat design (this column's dropdown == 'design6')
One row per stat: big black number + red uppercase label on one
line, grey description below, hairline between rows.
═══════════════════════════════════════════════════════════════════ */
.mkt-listing-lr__stats {
display: flex;
flex-direction: column;
}
.mkt-listing-lr__stat {
padding: 28px 0;
border-bottom: 1px solid #E5E7EB;
}
.mkt-listing-lr__stat:first-child { padding-top: 0; }
.mkt-listing-lr__stat:last-child { border-bottom: 0; }
.mkt-listing-lr__stat-head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px 16px;
margin: 0 0 10px;
}
.mkt-listing-lr__stat-value {
font-size: clamp(30px, 3.6vw, 44px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1;
letter-spacing: -0.02em;
color: #111827;
}
.mkt-listing-lr__stat-label {
font-size: clamp(15px, 1.4vw, 19px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #e63946;
}
/* No-number row → the subtitle is a bigger black headline instead of
the small red uppercase label. */
.mkt-listing-lr__stat-label--headline {
font-size: clamp(20px, 2.3vw, 26px);
letter-spacing: -0.01em;
text-transform: none;
color: #111827;
}
.mkt-listing-lr__stat-desc {
font-size: 17px;
line-height: 1.6;
color: #6B7280;
margin: 0;
}
/* Stat — mobile: shrink the number a touch. */
@media (max-width: 640px) {
.mkt-listing-lr__stat { padding: 22px 0; }
.mkt-listing-lr__stat-value { font-size: 40px; }
.mkt-listing-lr__stat-desc { font-size: 15.5px; }
}
/* ═══════════════════════════════════════════════════════════════════
Promo card design (this column's dropdown == 'design7')
Bordered rounded card: grey uppercase eyebrow, black heading, a
plain grey list, and a red underlined CTA for any linked row.
═══════════════════════════════════════════════════════════════════ */
.mkt-listing-lr__promo {
border-radius: 16px;
background: #FAFAFB;
padding: 40px 44px;
}
/* Border only when the column's `border` switch is on. */
.mkt-listing-lr__promo--border { border: 1px solid #E5E7EB; }
.mkt-listing-lr__promo-eyebrow {
font-size: 11.5px;
font-weight: 700;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #9CA3AF;
margin: 0 0 12px;
}
.mkt-listing-lr__promo-heading {
font-size: clamp(17px,1.5vw,19px);
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.2;
letter-spacing: -0.01em;
color: #111827;
margin: 0 0 24px;
}
.mkt-listing-lr__promo-list {
list-style: none;
margin: 0;
padding: 0;
}
.mkt-listing-lr__promo-item {
font-size: 15px;
line-height: 1.55;
color: #4B5563;
padding: 4px 0;
}
/* Red underlined CTA row ("SEE ADVERTISING FORMATS →"). */
.mkt-listing-lr__promo-cta-item { padding: 18px 0 0; }
.mkt-listing-lr__promo-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #111827;
text-decoration: none;
padding-bottom: 6px;
border-bottom: 2px solid #e63946;
transition: color .15s ease, border-color .15s ease;
}
.mkt-listing-lr__promo-cta:hover,
.mkt-listing-lr__promo-cta:focus-visible { color: #e63946; border-color: #111827; }
.mkt-listing-lr__promo-cta-arrow { transition: transform .18s ease; }
.mkt-listing-lr__promo-cta:hover .mkt-listing-lr__promo-cta-arrow { transform: translateX(4px); }
/* Promo — mobile: tighten padding + type. */
@media (max-width: 640px) {
.mkt-listing-lr__promo { padding: 28px 24px; }
.mkt-listing-lr__promo-item { font-size: 15.5px; }
}
/* ── Side image design (design10) ──
Shows the block's `sideImage`, centred both axes within the column. */
.mkt-listing-lr__side-image {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.mkt-listing-lr__side-image img {
display: block;
max-width: 100%;
height: auto;
object-fit: contain;
object-position: center center;
border-radius: 25px;
}
/* ── Form design (design9) ──
Dark card with the Formie form restyled to match. Copied from the
media-kit static page's `.static-mk__form`, re-prefixed to this
block. The card owns its dark background (the column border/bg is
skipped for design9 in the markup). */
.mkt-listing-lr__form {
background: #0F1013;
color: #ffffff;
border-radius: 16px;
padding: 32px 34px 34px;
height: 100%;
display: flex;
flex-direction: column;
}
.mkt-listing-lr__form-title {
font-size: 20px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.2;
letter-spacing: -0.01em;
margin: 0 0 10px;
}
.mkt-listing-lr__form-body {
margin: 0 0 20px;
font-size: 14px;
line-height: 1.55;
color: rgba(255,255,255,0.6);
}
.mkt-listing-lr__form-note {
margin: 10px 0 0;
font-size: 12px;
color: rgba(255,255,255,0.5);
}
/* Formie form restyled to the dark card look. Scoped to the aside so it
only affects THIS form; the container prefix raises specificity above
Formie's own base .fui-* rules. */
.mkt-listing-lr__form .fui-form { display: flex; flex-direction: column; gap: 12px; }
.mkt-listing-lr__form .fui-page-container,
.mkt-listing-lr__form .fui-pages,
.mkt-listing-lr__form .fui-page { margin: 0; }
.mkt-listing-lr__form .fui-row { margin: 0; gap: 12px; }
.mkt-listing-lr__form .fui-field { margin: 0; }
.mkt-listing-lr__form .fui-label { font-size: 12px; color: rgba(255,255,255,0.6); margin: 0 0 5px; }
.mkt-listing-lr__form .fui-input,
.mkt-listing-lr__form .fui-select,
.mkt-listing-lr__form textarea.fui-input {
width: 100%;
padding: 12px 14px;
background: #1c1c1e;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 8px;
color: #ffffff;
font-family: inherit;
font-size: 14px;
}
.mkt-listing-lr__form .fui-input::placeholder,
.mkt-listing-lr__form textarea.fui-input::placeholder { color: rgba(255,255,255,0.4); }
.mkt-listing-lr__form .fui-input:focus,
.mkt-listing-lr__form .fui-select:focus,
.mkt-listing-lr__form textarea.fui-input:focus {
outline: none;
border-color: #e63946;
box-shadow: 0 0 0 3px rgba(230,57,70,0.18);
}
.mkt-listing-lr__form .fui-checkbox label,
.mkt-listing-lr__form .fui-radio label,
.mkt-listing-lr__form .fui-legend { color: rgba(255,255,255,0.6); font-size: 12px; }
.mkt-listing-lr__form .fui-btn,
.mkt-listing-lr__form .fui-submit {
width: 100%;
margin-top: 4px;
padding: 15px;
background: #e63946;
border: 0;
color: #ffffff;
font-size: 13px;
font-weight: 800;
font-family: 'Gilroy-Bold', 'Gilroy-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 8px;
cursor: pointer;
}
.mkt-listing-lr__form .fui-btn:hover,
.mkt-listing-lr__form .fui-submit:hover { background: #C92E3A; }
.mkt-listing-lr__form .fui-error-message { color: #F87171; font-size: 12px; }
.mkt-listing-lr__form .fui-alert-error { color: #F87171; }
.mkt-listing-lr__form .fui-alert-success { color: #A7F3D0; }
/* Form — mobile: tighten padding. */
@media (max-width: 640px) {
.mkt-listing-lr__form { padding: 28px 24px; }
}
/* ============================================================ footer ============================================================ */
/* ─────── Footer shell ─────── */
.tb-footer {
background: #0d0d0d;
color: #fff;
border-top: 3px solid #ff0000;
font-family: 'GilroyMedium', 'GilroyReg', Arial, Helvetica, sans-serif;
}
/* ─────── Newsletter band ─────── */
.tb-footer__newsletter {
background: #1c1c1c;
padding: 44px 0;
}
.tb-footer__newsletter-title {
font-family: 'GilroyExtraBold', 'GilroyBold', Arial, Helvetica, sans-serif;
font-size: 36px;
font-style: italic;
line-height: 1.15;
color: #fff;
margin: 0 0 10px;
letter-spacing: -0.01em;
}
.tb-footer__newsletter-sub {
font-family: 'GilroyReg', Arial, Helvetica, sans-serif;
font-size: 14.5px;
color: #b8b8b8;
max-width: 520px;
}
/* Override Bootstrap .form-control on this input only — dark theme,
larger padding, red-focus glow. Class selectors are compounded
(.tb-footer__newsletter-input.form-control) so specificity
trumps Bootstrap's default .form-control without needing
!important. */
.tb-footer__newsletter-input.form-control {
background: transparent;
border: 1px solid #4a4a4a;
border-radius: 8px;
padding: 13px 18px;
color: #fff;
font-family: 'GilroyReg', Arial, Helvetica, sans-serif;
font-size: 14.5px;
min-width: 260px;
max-width: 100%;
height: auto;
line-height: 1.4;
transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.tb-footer__newsletter-input.form-control::placeholder { color: #8a8a8a; }
.tb-footer__newsletter-input.form-control:focus {
background: rgba(255, 0, 0, 0.05);
border-color: #ff0000;
box-shadow: 0 0 0 0.15rem rgba(255, 0, 0, 0.2);
color: #fff;
}
/* Override Bootstrap .btn.btn-primary — same red palette V3 uses
(see global.css .btn-primary at #ff0000) but with 8px radius and
heavier weight for the footer treatment. */
.tb-footer__newsletter-btn.btn.btn-primary {
background-color: #ff0000;
border-color: #ff0000;
color: #fff;
border-radius: 8px;
padding: 13px 28px;
font-family: 'GilroyBold', Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.4;
transition: background-color 0.15s, border-color 0.15s, transform 0.05s;
}
.tb-footer__newsletter-btn.btn.btn-primary:hover,
.tb-footer__newsletter-btn.btn.btn-primary:focus {
background-color: #d80000;
border-color: #d80000;
color: #fff;
box-shadow: 0 0 0 0.15rem rgba(255, 0, 0, 0.25);
}
.tb-footer__newsletter-btn.btn.btn-primary:active {
transform: translateY(1px);
}
/* ─────── Main footer ─────── */
.tb-footer__main { padding: 52px 0 26px; }
/* Container rails — same 1400 / 48 / 32 / 20 pattern used by the
header and the marketing block templates so the footer copy
lines up vertically against every section above it. */
.tb-footer__container {
max-width: 1400px;
margin: 0 auto;
padding: 0 48px;
}
@media (max-width: 1024px) { .tb-footer__container { padding: 0 32px; } }
@media (max-width: 640px) { .tb-footer__container { padding: 0 20px; } }
/* 5-column grid — brand column takes 2fr, the four nav columns
take 1fr each. Native CSS grid, no framework needed. */
.tb-footer__grid {
display: grid;
grid-template-columns: 2fr repeat(4, 1fr);
gap: 32px;
}
/* Tablet — brand full-width above a 4-column row of nav columns. */
@media (max-width: 1024px) {
.tb-footer__grid {
grid-template-columns: repeat(4, 1fr);
gap: 32px 24px;
}
.tb-footer__col--brand {
grid-column: 1 / -1;
}
}
/* Mobile — everything stacks. Nav columns become a 2-up grid so the
footer doesn't get too tall. */
@media (max-width: 640px) {
.tb-footer__grid {
grid-template-columns: repeat(2, 1fr);
gap: 28px 20px;
}
.tb-footer__col--brand { grid-column: 1 / -1; }
}
/* ─────── Brand column ─────── */
.tb-footer__logo {
display: inline-flex;
align-items: flex-end;
gap: 4px;
text-decoration: none;
margin-bottom: 22px;
line-height: 1;
}
.tb-footer__logo:hover { text-decoration: none; }
.tb-footer__logo-the {
font-family: 'GilroyReg', Arial, Helvetica, sans-serif;
font-size: 22px;
font-style: italic;
color: #fff;
margin-right: 4px;
transform: translateY(-4px);
}
.tb-footer__logo-beat {
font-family: 'GilroyExtraBold', 'GilroyBold', Arial, Helvetica, sans-serif;
font-size: 42px;
color: #fff;
font-style: italic;
letter-spacing: -0.02em;
}
.tb-footer__logo-heart {
display: inline-flex;
margin-left: 2px;
transform: translateY(-8px);
}
.tb-footer__logo-heart svg { width: 18px; height: 18px; }
.tb-footer__logo-asia {
font-family: 'GilroyReg', Arial, Helvetica, sans-serif;
font-size: 12px;
color: #fff;
letter-spacing: 0.35em;
margin-left: 6px;
transform: translateY(-6px);
}
.tb-footer__tagline {
font-family: 'GilroyBold', Arial, Helvetica, sans-serif;
font-size: 22px;
line-height: 1.35;
color: #fff;
margin: 0 0 24px;
max-width: 260px;
}
/* Logo image size — was set inline (`style="width: 190px;"`) with
Bootstrap classes; now handled in CSS. */
.tb-footer__logo img {
display: block;
width: 190px;
height: auto;
}
/* Socials — flex row with gap now that Bootstrap isn't around. */
.tb-footer__socials {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 18px;
flex-wrap: wrap;
}
.tb-footer__socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: #d0d0d0;
text-decoration: none;
transition: color 0.15s, transform 0.15s;
}
.tb-footer__socials a:hover {
color: #ff0000;
text-decoration: none;
transform: translateY(-2px);
}
.tb-footer__socials svg { width: 24px; height: 24px; }
/* ─────── Link columns ─────── */
.tb-footer__col-title {
font-family: 'GilroyBold', Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7a7a7a;
text-transform: uppercase;
letter-spacing: 0.14em;
margin: 0 0 10px;
font-weight: 700;
font-family: 'Gilroy-Medium', 'Gilroy-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.tb-footer__links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.tb-footer__links a {
color: #ffffff;
text-decoration: none;
font-family: 'GilroyMedium', 'GilroyReg', Arial, Helvetica, sans-serif;
font-size: 15px;
transition: color 0.15s;
}
.tb-footer__links a:hover {
color: #ff0000;
text-decoration: none;
}
/* ─────── Copyright ─────── */
.tb-footer__copyright {
font-family: 'GilroyReg', Arial, Helvetica, sans-serif;
font-size: 13px;
color: #7a7a7a;
margin: 40px 0 0;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* ─────── Responsive ─────── */
@media (max-width: 640px) {
.tb-footer__main { padding: 40px 0 24px; }
.tb-footer__copyright { margin-top: 32px; }
/* Newsletter band (currently commented out — kept mobile styles
for whenever it's re-enabled). */
.tb-footer__newsletter { padding: 32px 0; }
.tb-footer__newsletter-title { font-size: 28px; }
}