on the nav
============================================================ */
/* ---- Nav: glassmorphism white capsule ----------------------
Replaces the canonical light theme's solid bone fill with a
frosted white capsule so the nav picks up the warm tones of
the page behind it (hero photography, beige cards). */
.mkt-nav-wrap[data-nav-theme="light"] .mkt-nav,
.mkt-nav-wrap[data-nav-theme="light"][data-nav-stuck] .mkt-nav {
background: rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: blur(22px) saturate(180%);
backdrop-filter: blur(22px) saturate(180%);
border-color: rgba(255, 255, 255, 0.65);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 10px 32px -16px rgba(14, 15, 12, 0.10),
0 2px 8px -4px rgba(14, 15, 12, 0.06);
}
/* ---- Benefit cards: light beige body, no border, no fade ---
Replaces the canonical platinum-gray with a warm ivory tone
that aligns with the light hero palette. The 2px white border
reads as a stroke on light pages so it's stripped. The dark
gradient overlay at the bottom of the card photo (used to
anchor logos on busy photographs) is also removed since the
new card images are lighter and don't need it. */
/* How-it-works step cards keep the light beige */
.mkt-how__step {
background: #f3f2eb;
border: none;
}
/* Benefit cards: white fill with soft elevation, sitting on the
page's light-beige bg. Shorter photo area so the card reads as
a landscape banner rather than a portrait block. */
.mkt-benefit-card {
background: #ffffff;
border: none;
box-shadow:
0 1px 2px rgba(14, 15, 12, 0.04),
0 12px 32px -12px rgba(14, 15, 12, 0.12);
transition: box-shadow 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mkt-benefit-card__visual {
height: 240px;
}
/* Inner photo scales on card hover; container clips so only the
image grows, not the whole card. */
.mkt-benefit-card__bg {
transition: transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
.mkt-benefit-card:hover {
box-shadow:
0 2px 6px rgba(14, 15, 12, 0.06),
0 28px 56px -16px rgba(14, 15, 12, 0.22);
}
.mkt-benefit-card:hover .mkt-benefit-card__bg {
transform: scale(1.05);
}
}
@media (prefers-reduced-motion: reduce) {
.mkt-benefit-card,
.mkt-benefit-card__bg { transition: none; }
.mkt-benefit-card:hover .mkt-benefit-card__bg { transform: none; }
}
/* Footer: horizontal layout — "At no cost" inline with "for Veteran
Strong members" instead of stacked. Restyled to match the wireframe
(mixed case, larger weight, no uppercase tracking). */
.mkt-benefit-card__price {
flex-direction: row;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
/* ============================================================
Graphic benefit card (.mkt-benefit-card__visual--graphic)
Rob (email, 2026-08-03): "can we try to go with a graphic treatment,
we will have gen jones video and the commercials will convey plenty of
people and veterans... by the time they get to the site, they should be
ready to become a member." So the photography leaves the benefit cards
and the panel becomes brand-forward: partner mark + icon on an olive
field, with the detail on roll-over instead of always-on.
============================================================ */
.mkt-benefit-card__visual--graphic {
height: 318px;
display: grid;
place-items: center;
gap: 20px;
background: var(--vs-olive, #4a5d3a);
/* Faint radial sunburst — the same device as the protection medals, so
the panel reads as crafted rather than a flat colour block. */
background-image:
repeating-conic-gradient(from 0deg at 50% 46%,
rgba(255, 255, 255, 0.016) 0deg 4deg, transparent 4deg 16deg),
radial-gradient(120% 90% at 50% 10%, rgba(255, 255, 255, 0.085), transparent 66%);
isolation: isolate;
}
/* The photo + its scrim have no job in the graphic variant. */
.mkt-benefit-card__visual--graphic .mkt-benefit-card__bg,
.mkt-benefit-card__visual--graphic::after { display: none; }
/* Lockup — icon over the partner mark, centred. Both shift up and fade as
the roll-over panel comes in. */
.mkt-benefit-card__lockup {
display: grid;
justify-items: center;
gap: 20px;
padding: 0 28px;
transition:
transform 420ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
opacity 260ms ease;
}
.mkt-benefit-card__mark {
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
.mkt-benefit-card__mark svg { width: 30px; height: 30px; }
/* The partner mark sits in normal flow here (the photo variant absolutely
positions it bottom-left), so the positioning + halo are reset. */
.mkt-benefit-card__visual--graphic .mkt-benefit-card__logo-img {
position: static;
bottom: auto;
left: auto;
max-width: 100%;
object-position: center;
filter: none;
}
/* Roll-over — "what you get", sliding up over the panel. Additive detail:
the card's summary line stays in the body, so nothing essential is
hover-only. */
.mkt-benefit-card__reveal {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: 32px;
background: linear-gradient(180deg, rgba(29, 35, 22, 0.94) 0%, rgba(22, 26, 16, 0.98) 100%);
transform: translateY(101%);
transition: transform 420ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
z-index: 3;
}
.mkt-benefit-card__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 16px;
width: 100%;
}
.mkt-benefit-card__list li {
display: grid;
grid-template-columns: 22px 1fr;
gap: 14px;
align-items: start;
font-family: var(--vs-font-body);
font-size: var(--vs-mkt-small, 18px);
line-height: 1.4;
color: #ffffff;
}
.mkt-benefit-card__list svg { width: 22px; height: 22px; color: var(--vs-mkt-platinum, #d8d3c5); margin-top: 1px; }
@media (hover: hover) and (pointer: fine) {
.mkt-benefit-card:hover .mkt-benefit-card__reveal { transform: translateY(0); }
.mkt-benefit-card:hover .mkt-benefit-card__lockup {
transform: translateY(-16px);
opacity: 0;
}
}
/* No hover to roll over: show the detail in place, below the lockup. */
@media (hover: none), (pointer: coarse) {
.mkt-benefit-card__visual--graphic { height: auto; padding: 32px 0; }
.mkt-benefit-card__reveal {
position: static;
inset: auto;
transform: none;
background: none;
padding: 4px 28px 0;
}
.mkt-benefit-card__list li { color: rgba(255, 255, 255, 0.92); }
}
@media (prefers-reduced-motion: reduce) {
.mkt-benefit-card__reveal,
.mkt-benefit-card__lockup { transition: none; }
}
/* Value box — full-width card footer that reads as a structural part
of the card (like the photo at the top), not a floating box. Solid
olive band, large white FREE pill on the left, value statement to
its right. Inherits the card's bottom-rounded corners. */
.mkt-benefit-card__valuebox {
margin-top: auto;
padding: 22px 28px;
background: var(--vs-olive, #4a5d3a);
color: #ffffff;
display: flex;
align-items: center;
/* Pastel #53/#56 — the band is just the word FREE, centered; the
supporting line (and its divider) were retired. */
justify-content: center;
gap: 16px;
}
/* Pastel #33 — FREE is the band's headline (big display type, no pill). */
.mkt-benefit-card__tier {
flex-shrink: 0;
display: inline-flex;
align-items: center;
/* Graphik medium — tier labels are no longer Stratum anywhere (round 3). */
font-family: var(--vs-font-body, sans-serif);
font-size: var(--vs-mkt-h4, 40px);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
color: #ffffff;
}
/* .mkt-benefit-card__valuetext retired (Pastel #53/#56) — the band shows
only the centered FREE. */
.mkt-benefit-card__price-main {
font-size: 17px;
font-weight: 700;
text-transform: none;
letter-spacing: normal;
color: var(--vs-ink);
}
.mkt-benefit-card__price-sub {
margin: 0;
font-size: 15px;
color: var(--vs-ink-muted);
}
/* "How it works" — clean white bg. */
.mkt-how {
background: #ffffff;
}
/* "Your no-cost benefits" — bottom-up gradient of the same warm
tint that used to live on the How-it-works section, fading from
tinted at the bottom to transparent at the top. */
.mkt-benefits--section {
background: linear-gradient(0deg, rgba(243, 238, 224, 0.85) 0%, rgba(243, 238, 224, 0) 100%);
}
/* Bottom gradient overlay on the benefit-card photo — darker than
canonical so partner logos read crisply against busy photos. */
.mkt-benefit-card__visual::after {
background: linear-gradient(to top,
rgba(14, 15, 12, 0.85) 0%,
rgba(14, 15, 12, 0.55) 35%,
rgba(14, 15, 12, 0.20) 65%,
rgba(14, 15, 12, 0) 100%);
}
/* ---- "How it works" step numerals: editorial Stratum --------
Replaces the heavy black filled pill with a refined display
numeral in deep olive, anchored by a thin hairline accent. */
.mkt-how__num {
width: auto;
height: auto;
background: none;
border-radius: 0;
color: var(--vs-olive-deep);
font-family: var(--vs-font-display);
font-weight: 500;
font-size: 56px;
line-height: 1;
letter-spacing: -0.02em;
margin-bottom: 24px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(63, 74, 42, 0.22);
display: inline-block;
place-items: unset;
align-self: flex-start;
min-width: 44px;
}
/* ---- Our Mission banner -------------------------------------
Wide rounded panel anchoring the brand story. Portrait sits on
the right column (sourced as
![]()
so it can be art-directed
with object-position). Dark veil gradient fades from left to
right, giving the text on the left a near-solid dark surface
for full readability and letting the photo fade in to the right. */
.mkt-mission {
padding: 64px 16px 96px;
background: transparent;
}
.mkt-mission__panel {
position: relative;
width: 100%;
max-width: 1520px;
margin: 0 auto;
min-height: clamp(480px, 60vh, 620px);
border-radius: 20px;
overflow: hidden;
isolation: isolate;
background: #1a2618;
color: #ffffff;
}
/* Footer bg — align with the benefit-card light beige so the
page closes on the same warm tone as the cards above. Keep the
canonical gradient fade so the footer eases into the page from
transparent rather than having a hard top edge. */
.mkt-footer {
background: linear-gradient(180deg, #f3f2eb 0%, rgba(243, 242, 235, 0) 100%);
}
/* FAQ section — match the mission panel's 1520px outer width
and drop the canonical 100px horizontal inner padding so the
visible content (title + accordion) spans the full 1520px. */
.mkt-have-q__inner {
max-width: 1520px;
padding: 80px 0;
}
/* --framed (home-2): align the FAQ to the Exclusive Partnership section
instead of the full-bleed mission width — same 1720px cap + matching
horizontal gutters (100 / 40 / 16 by breakpoint, mirroring .mkt-vs-fox). */
.mkt-have-q__inner--framed {
max-width: 1720px;
padding-left: 100px;
padding-right: 100px;
}
@media (max-width: 1280px) {
.mkt-have-q__inner--framed { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 768px) {
.mkt-have-q__inner--framed { padding-left: 16px; padding-right: 16px; }
}
.mkt-mission__bg {
position: absolute;
inset: 0;
background-image: url('../img/home/our-mission-chairman3.jpg');
background-size: cover;
background-position: center;
z-index: 0;
}
/* Admiral variant (Slav, Pastel #341 + 26 Aug). On /home-newday this panel
is not the mission statement — it is the invitation from Rear Admiral Tom
Lynch, and it sits directly below the hero. Same component, same veil, one
photograph swapped: admiral_bg.jpg is already composed for it, subject
centre-right with the left third fallen dark. */
.mkt-mission__bg--admiral {
background-image: url('../img/home/admiral-bg.jpg');
/* `cover` on a 1890x761 photograph in a ~1520x430 panel overflows by ~180px
vertically, and centred that takes 90px off the top — straight through
the Admiral's head, which sits 8% down the frame. Anchor to the top and
the whole overflow comes off the grass at his feet instead. */
background-position: center top;
}
/* Admiral panel proportions (Slav, 26 Aug: "way too tall").
The mission panel is sized for a standalone statement mid-page. This one
sits directly under the hero and is read on the way past, so it loses
roughly a third of its height: the copy runs to a wider measure instead
of a narrow ribbon, and the generous vertical padding comes in with it.
The veil's stops move right to match — copy that now reaches 55% of the
panel would otherwise end its last words on bare photograph. */
.mkt-mission--admiral .mkt-mission__panel {
min-height: clamp(340px, 38vh, 430px);
}
.mkt-mission--admiral .mkt-mission__copy {
/* max-width contains the padding, so the inline padding has to come in
with it or the measure gains nothing. 830 − 176 leaves ~654px of text:
wider than the canonical 580 without running the sentences flat across
the panel (Slav, 26 Aug: "you spread the text too much"). */
padding: clamp(48px, 4.4vw, 64px) clamp(32px, 5.5vw, 88px);
max-width: 830px;
gap: 20px;
}
.mkt-mission--admiral .mkt-mission__body { max-width: 654px; }
.mkt-mission--admiral .mkt-mission__pullquote { max-width: 654px; margin-top: 4px; }
.mkt-mission--admiral .mkt-mission__attr { margin-top: 20px; }
.mkt-mission--admiral .mkt-mission__veil {
background: linear-gradient(
90deg,
rgba(14, 20, 16, 0.86) 0%,
rgba(14, 20, 16, 0.74) 34%,
rgba(14, 20, 16, 0.42) 54%,
rgba(14, 20, 16, 0.10) 68%,
rgba(14, 20, 16, 0) 80%
);
}
.mkt-mission__veil {
position: absolute;
inset: 0;
/* Darken only the left third where the text reads; leave the
subject + grounds on the right fully visible. */
background: linear-gradient(
90deg,
rgba(14, 20, 16, 0.85) 0%,
rgba(14, 20, 16, 0.70) 25%,
rgba(14, 20, 16, 0.35) 45%,
rgba(14, 20, 16, 0.08) 60%,
rgba(14, 20, 16, 0) 75%
);
pointer-events: none;
z-index: 1;
}
.mkt-mission__copy {
position: relative;
z-index: 3;
padding: clamp(72px, 8vw, 112px) clamp(32px, 7vw, 120px);
max-width: 720px;
display: flex;
flex-direction: column;
gap: 28px;
}
.mkt-mission__eyebrow {
line-height: var(--vs-mkt-overline-lh);
font-family: var(--vs-font-body);
font-weight: var(--vs-mkt-overline-weight);
/* Pastel #238/#246 — was 12px, "still too small". */
font-size: var(--vs-mkt-overline);
letter-spacing: var(--vs-mkt-overline-ls);
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
.mkt-mission__body {
font-family: var(--vs-font-body);
font-weight: 400;
font-size: clamp(20px, 1.6vw, 28px);
line-height: 1.45;
color: rgba(255, 255, 255, 0.94);
margin: 0;
max-width: 580px;
}
.mkt-mission__pullquote {
font-family: var(--vs-font-body);
font-weight: 700;
font-size: clamp(22px, 1.8vw, 30px);
line-height: 1.3;
color: #ffffff;
margin: 16px 0 0;
max-width: 520px;
}
/* Pastel #239/#247 — two lines (name + branch/rank, then title) so the
attribution can carry real size instead of one cramped 14px line. */
.mkt-mission__attr {
display: grid;
gap: 4px;
font-family: var(--vs-font-body);
font-size: var(--vs-mkt-small);
line-height: 1.35;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.82);
margin: 24px 0 0;
}
.mkt-mission__attr-name { font-weight: 600; }
.mkt-mission__attr-role { color: rgba(255, 255, 255, 0.7); }
.mkt-mission__attr-rule {
display: block;
width: 32px;
height: 1px;
margin-bottom: 12px;
background: rgba(255, 255, 255, 0.5);
}
@media (max-width: 880px) {
.mkt-mission__photo {
width: 100%;
height: 50%;
top: auto;
bottom: 0;
object-position: 50% 12%;
}
.mkt-mission__veil {
background: linear-gradient(
180deg,
rgba(26, 38, 24, 0.96) 0%,
rgba(26, 38, 24, 0.78) 40%,
rgba(26, 38, 24, 0.2) 100%
);
}
.mkt-mission__panel { min-height: 720px; }
}
/* ---- Partner logo marquee -----------------------------------
Continuous horizontal scroll of partner logos. Uniform soft-gray
silhouette across all logos (brightness(0) → black, then opacity
reduces to gray) so every brand reads as the same visual family.
Track holds the logo set duplicated; animation moves -50%,
producing a seamless infinite loop. */
.mkt-logo-strip {
padding: 56px 0;
background: transparent;
overflow: hidden;
}
/* Pastel #313 — the ticker now carries only brands that haven't gone live
yet, so it needs to say so. Static label above the moving track; Li is
fine with "Coming soon" repeating lower on the page where the categories
are described in full. */
.mkt-logo-strip__label {
margin: 0 0 32px;
text-align: center;
color: var(--vs-mkt-army-green, #4a5b2d);
}
.mkt-logo-strip__viewport {
/* Mask the edges so logos fade in / out smoothly. */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
overflow: hidden;
}
.mkt-logo-strip__track {
display: flex;
align-items: center;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
width: max-content;
animation: mkt-logo-strip-scroll 48s linear infinite;
}
@keyframes mkt-logo-strip-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.mkt-logo-strip__track { animation: none; }
}
.mkt-logo-strip__item {
flex: 0 0 auto;
padding: 0 56px;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
.mkt-logo-strip__item img {
display: block;
height: 34px;
width: auto;
max-width: 220px;
object-fit: contain;
/* Uniform near-black silhouette across every brand (Pastel #32 —
darker shade approved over the earlier warm beige). brightness(0)
flattens each mark to black (alpha preserved); the opacity softens
it just off pure black so it doesn't outweigh the ink headlines.
Every brand ends up the EXACT same shade so visual weight only
varies with shape. */
filter: brightness(0);
opacity: 0.82;
transition: opacity 240ms ease;
}
/* Per-brand height calibration. Default is 34px (set above). Wide
wordmarks render shorter so they don't dominate horizontally;
stacked / badge marks render taller so they balance the visual
mass of a wordmark. Matched by src so both the original and
aria-hidden duplicate set pick up the same calibration. */
.mkt-logo-strip__item img[src*="card-fox"] { height: 40px; }
.mkt-logo-strip__item img[src*="card-afba"] { height: 40px; }
.mkt-logo-strip__item img[src*="coursera-wordmark"] { height: 24px; }
.mkt-logo-strip__item img[src*="auto-nation"] { height: 28px; }
.mkt-logo-strip__item img[src*="housing-adt"] { height: 30px; }
/* ---- Coming soon carousel (.mkt-soon) ------------------------
Full-width marquee of grayed-out, brand-free benefit-category
cards under the FREE benefits row on /home. Same duplicate-track
technique as .mkt-logo-strip (the second set is cloned by the
inline script in home.html); slow linear scroll, pauses on
hover, and degrades to a manual swipe strip when the visitor
prefers reduced motion. */
.mkt-soon {
padding: 96px 0 104px;
overflow: hidden;
}
.mkt-soon .mkt-benefits__head {
margin-bottom: 56px;
}
.mkt-soon__viewport {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
overflow: hidden;
}
.mkt-soon__track {
display: flex;
align-items: stretch;
gap: 24px;
margin: 0;
padding: 4px 0;
list-style: none;
width: max-content;
animation: mkt-soon-scroll 80s linear infinite;
}
.mkt-soon__viewport:hover .mkt-soon__track {
animation-play-state: paused;
}
@keyframes mkt-soon-scroll {
from { transform: translateX(0); }
to { transform: translateX(calc(-50% - 12px)); }
}
@media (prefers-reduced-motion: reduce) {
.mkt-soon__track { animation: none; width: auto; }
.mkt-soon__viewport {
overflow-x: auto;
-webkit-mask-image: none;
mask-image: none;
}
/* No animation → no need for the cloned second set. */
.mkt-soon__track > [aria-hidden="true"] { display: none; }
}
.mkt-soon-card {
flex: 0 0 360px;
display: flex;
flex-direction: column;
background: #faf9f5;
border: 1px solid var(--vs-line, #e4e0d6);
border-radius: var(--radius-card, 16px);
overflow: hidden;
}
.mkt-soon-card__visual {
position: relative;
height: 200px;
overflow: hidden;
}
.mkt-soon-card__visual img {
width: 100%;
height: 100%;
object-fit: cover;
/* The gray-out: these benefits aren't live yet. */
filter: grayscale(1) brightness(1.04);
opacity: 0.85;
}
.mkt-soon-card__chip {
position: absolute;
top: 16px;
left: 16px;
padding: 6px 14px;
border-radius: var(--radius-pill, 999px);
background: rgba(20, 22, 16, 0.78);
color: #f5f3ee;
font-size: var(--vs-mkt-tiny, 14px);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.mkt-soon-card__body {
padding: 24px 24px 28px;
display: flex;
flex-direction: column;
gap: 8px;
}
.mkt-soon-card__title {
margin: 0;
font-size: var(--vs-mkt-h7, 22px);
font-weight: 500;
letter-spacing: -0.3px;
line-height: 1.2;
color: var(--vs-ink-muted, #5c5e58);
}
.mkt-soon-card__text {
margin: 0;
font-size: var(--vs-mkt-small, 16px);
line-height: 1.5;
color: var(--vs-ink-muted, #5c5e58);
opacity: 0.85;
}
@media (max-width: 640px) {
.mkt-soon { padding: 64px 0 72px; }
.mkt-soon-card { flex-basis: 300px; }
.mkt-soon-card__visual { height: 168px; }
}
/* ---- Meaningful card (services grid) ------------------------
Card body picks up the home-2 light beige instead of pure white.
Border stripped to match the no-stroke aesthetic of home-2. The
__visual photo area has its own background, so swapping the
card-level bg only affects the body section underneath. */
.mkt-meaningful-card {
background: #f3f2eb;
border: none;
}
/* ---- Services side-by-side panel bg -------------------------
Canonical .mkt-more__split uses var(--vs-bg) = #ede8da, which
reads as a warm tan that clashes with the home-2 beige. Align
it to the same #f3f2eb used elsewhere on the light pages. */
.mkt-more__split {
background: #f3f2eb;
}
/* ---- Concierge panel photo crop -----------------------------
Canonical object-position: center right crops the face off the
top. Anchor to upper-right so the head stays visible. */
.mkt-concierge__photo {
object-position: 70% 18%;
}
/* ---- mkt-more brand logos -----------------------------------
Canonical sizes them to max-height: 48px and tints them pure
white via brightness(0) invert(1). On the bright photo
backgrounds (especially Education's library shot with its
overexposed windows), pure-white logos disappear into the
highlights. Three fixes:
1. Larger cap so they read at a glance (48 → 64px).
2. Wider max-width so wide wordmarks aren't cramped.
3. Heavier drop-shadow halo so they survive bright sections.
Per-brand calibration is left to canonical aspect-ratio rules. */
.mkt-more__brand {
min-height: 140px;
padding: 28px 12px;
}
.mkt-more__brand img {
max-height: 72px;
max-width: 100%;
filter:
brightness(0) saturate(100%) invert(100%)
drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75))
drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
opacity: 1;
}
/* Stronger scrim under the brand row — applied as a pseudo-element
on the photo container so the canonical category photo URLs stay
intact. Anchored to the bottom band where the logos sit. */
.mkt-more__visual { position: relative; }
.mkt-more__visual::before {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 180px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
pointer-events: none;
z-index: 1;
}
.mkt-more__visual > .mkt-more__brands,
.mkt-more__visual > .mkt-more__tabs { position: relative; z-index: 2; }
/* ---- "Built around you" fox-card: image instead of solid black
Restores the standard image-card behaviour on the canonical
--note modifier (which deliberately blacks the card). Pages
using this card must supply the image at the canonical asset
path below. */
.mkt-vs-fox-card--note {
background: #1d2017;
}
.mkt-vs-fox-card--note .mkt-vs-fox-card__media {
background-image: url('../img/home/vs-fox-built-around-you.png');
background-size: cover;
background-position: center;
}
.mkt-vs-fox-card--note::after {
display: block;
}
.mkt-vs-fox-card--note .mkt-vs-fox-card__overlay {
inset: auto 0 0 0;
justify-content: flex-end;
}
/* ============================================================
Concierge feature (home-2 light) — replaces the old two-card
"Built around you" + "Your Account Concierge" row. One section:
concierge photo on the left, copy + CTA on the right. Width
matches the sibling FAQ section (1520px / 100px gutters).
============================================================ */
.mkt-concierge-feature__wrap {
max-width: 1520px;
margin: 96px auto 0;
background: #f3f2eb;
border-radius: 20px;
padding: 40px;
}
.mkt-concierge-feature {
display: grid;
grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
gap: 48px;
align-items: center;
}
.mkt-concierge-feature__visual {
position: relative;
overflow: hidden;
border-radius: 16px;
aspect-ratio: 3 / 2;
background: #1d2017;
}
.mkt-concierge-feature__media {
position: absolute;
inset: 0;
background-image: url('../img/home/vs-fox-concierge.png');
background-size: cover;
background-position: center;
transition: transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
.mkt-concierge-feature__visual:hover .mkt-concierge-feature__media {
transform: scale(1.04);
}
}
@media (prefers-reduced-motion: reduce) {
.mkt-concierge-feature__media { transition: none; }
.mkt-concierge-feature__visual:hover .mkt-concierge-feature__media { transform: none; }
}
.mkt-concierge-feature__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 540px;
}
.mkt-concierge-feature__title {
margin: 16px 0 20px;
font-size: 36px;
line-height: 1.15;
letter-spacing: -0.6px;
font-weight: 600;
color: var(--vs-ink, #1d2017);
}
.mkt-concierge-feature__body {
margin: 0 0 32px;
/* Pastel #345 (Slav, 25 Aug): bigger, and off the hard-coded value. */
font-size: var(--vs-mkt-body);
line-height: 1.55;
color: var(--vs-ink-muted, #4a4d44);
max-width: 48ch;
}
@media (max-width: 1280px) {
.mkt-concierge-feature__wrap { margin-top: 64px; padding: 48px; }
.mkt-concierge-feature { gap: 48px; }
}
@media (max-width: 960px) {
.mkt-concierge-feature__wrap { margin-top: 48px; padding: 32px; border-radius: 16px; }
.mkt-concierge-feature {
grid-template-columns: 1fr;
gap: 24px;
}
.mkt-concierge-feature__copy { max-width: 100%; }
.mkt-concierge-feature__title { font-size: 28px; }
.mkt-concierge-feature__visual { aspect-ratio: 16 / 10; }
}
/* ============================================================
Footer — light variant overrides. Newsletter swapped to the
right (cols now first child on the left). Legal links row
gains CA Privacy + "Your Privacy Choices" toggle.
============================================================ */
.mkt-footer__cols {
justify-content: flex-start;
}
.mkt-footer__privacy-choices {
display: inline-flex;
align-items: center;
gap: 8px;
}
.mkt-footer__privacy-icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.mkt-footer__privacy-icon svg {
display: block;
}
/* ============================================================
Light graphic card (.mkt-benefit-card__visual--light)
Pastel (26 Aug): white panel, partner marks in colour, icons
gone. A modifier on --graphic rather than a change to it:
home.html runs two of the same cards on the olive field and
was not asked for, so the canonical stays as it is.
The icons went because the panel now carries the partner's
own mark in the partner's own colour, and an outline glyph
above a brand lockup competes with the thing it introduces.
The card's eyebrow says what the benefit protects, which is
what the icon was there to signal.
============================================================ */
.mkt-benefit-card__visual--light {
/* 318px was sized for a 64px icon disc stacked over a 48px mark. The icon
is gone and the mark is 79px, so ~120px above and below had become dead
space. 196px leaves the mark room to breathe without the panel reading as
an empty box. The roll-over still fits: its list is 3 rows of 16px copy in
a 32px-padded flex box, which needs about 150px. */
height: 196px;
background: #ffffff;
/* No sunburst. It was there to keep a flat olive block from reading as
unfinished; on white it would read as a printing fault. */
background-image: none;
border-bottom: 1px solid var(--vs-line);
}
/* +65%, then +30%, then back a step (27 Aug). Reduced by returning to the
79px tier the row already ran at rather than inventing a new number, so this
is exactly the +30% undone. If it wants to come down further, these three
heights and the three mobile ones below are the whole change. */
.mkt-benefit-card__visual--light .mkt-benefit-card__logo-img { height: 79px; }
/*
* The roadside lockup is a 4:3 stack, not a wordmark: chevron, then VETERAN
* STRONG on two lines, then ROADSIDE ASSISTANCE reversed out of a dark band.
* So it is sized to the panel rather than to the 79px row the other two share.
* Measured off the source PNG: the reversed band is 15.1% of the image height
* and the words inside it are 7.57%, so band text = rendered height x 0.0757.
* 132px -> 10.0px 158px -> 12.0px 196px -> 14.8px
* 158px is the 132px above plus the 20% asked for on 29 Aug. It leaves 19px
* of panel above and below, and the band text is still under the 16px floor
* the rest of the page keeps: those words are texture, not reading. The card
* title carries the benefit in full, so nothing is lost by that. Making them
* legible needs the whole 196px panel, or the lockup split into image plus
* live text.
*/
.mkt-benefit-card__visual--light .mkt-benefit-card__logo-img[alt="Veteran Strong Roadside Assistance"] {
height: 158px;
max-width: 84%;
}
/* NewDay USA replaced ADT in this row on 30 Aug (Rob, via Li). It is a 6.7:1
* wordmark, so height is the wrong control: at the row's 79px it would render
* 527px wide and blow straight through a 380px panel.
*
* Matching its rendered WIDTH to Experian's was the wrong correction — at
* 34px it read half the size of everything beside it. A wordmark's presence
* is its cap height, not its bounding box, and this mark's caps are 68% of
* its image height against roughly 45% for Experian. So: Experian at 79px
* carries a ~36px cap, and 50 x 0.68 = 34px matches it. That renders 337px
* wide, which a long wordmark simply is; the max-width is a backstop against
* a narrower panel, not the sizing mechanism.
*/
.mkt-benefit-card__visual--light .mkt-benefit-card__logo-img[alt="NewDay USA"] {
height: 50px;
max-width: 90%;
}
/* Experian ships in its own colours now (Slav, 27 Aug) —
* `card-experian-color.png`, navy wordmark and the purple/magenta/blue
* squares, replacing the white knockout that had to be flattened with
* `brightness(0)` because it was invisible on a white panel.
* The PNG carries a baked white background rather than transparency. That
* is exact against this panel's `#ffffff`, so it is invisible today — but
* it is the reason this mark must not be moved onto a cream or tinted
* surface without knocking the white out first.
*/
/* The eyebrow: what this card protects, above the mark that provides it. */
.mkt-benefit-card__eyebrow {
font-family: var(--vs-font-body);
/*
* 700, not 800. Graphik ships Regular, Medium, Semibold and Bold — 400, 500,
* 600, 700 — and nothing above it. Asking for 800 makes the browser
* synthesise a fake bold off the 700 file, which on a 22px uppercase label
* tracked at 0.111em smears rather than thickens. 700 is the heaviest weight
* this typeface actually has here; a genuinely heavier one needs Graphik
* Black adding to assets/fonts.
*
* +20% on the size. 18 x 1.2 is 21.6px, which is not a step on the scale, so
* it is a multiple of the token it grows from rather than a new token or a
* hard-coded number.
*/
font-weight: 700;
font-size: calc(var(--vs-mkt-overline) * 1.2);
letter-spacing: var(--vs-mkt-overline-ls);
line-height: var(--vs-mkt-overline-lh);
text-transform: uppercase;
color: var(--vs-olive);
margin: 0;
padding: 20px 24px 16px;
text-align: center;
background: #ffffff;
/* A rule between what the card protects and who provides it. Full-bleed
rather than inset, matching the line under the panel below, so the card
reads as three stacked bands rather than a label floating over a mark. */
border-bottom: 1px solid var(--vs-line);
}
/* Card copy, one tier up (26 Aug). The base rule is a hard-coded 17px — one of
the pre-existing violations the audit tips flag — so this variant reads a
token instead of inheriting a number. 20px sits under the 24px title without
crowding it. The base is left alone deliberately: it renders on /home too,
and that page was not asked for. */
.mkt-benefit-card--light .mkt-benefit-card__body-text {
font-size: var(--vs-mkt-body);
line-height: 1.5;
}
/* ============================================================
Already active (.mkt-benefit-card--have)
This page now writes to members who already switched on their
Experian credit protection, so offering it to them as though
it were new is the one thing the card must not do. The band
states it instead of selling it, and the mark carries a small
confirmation so the state is legible before the band is read.
============================================================ */
/* The band keeps the canonical olive FREE (27 Aug). It was briefly cream with
"On your membership", which said the right thing and cost too much: one cream
band between two olive ones reads as that card being demoted, and the benefit
is still free whether or not it is already switched on. The pill below says
the state on its own. */
/* A quiet marker on the panel, top-right, so the state is visible without
reading to the bottom of the card. */
.mkt-benefit-card--have .mkt-benefit-card__visual--light { position: relative; }
.mkt-benefit-card__have-flag {
position: absolute;
top: 12px;
right: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 999px;
background: var(--vs-cream, #ede8da);
color: var(--vs-olive-deep, #3f4a2a);
font-family: var(--vs-font-body);
font-size: var(--vs-mkt-tiny);
font-weight: 600;
letter-spacing: 0.04em;
}
.mkt-benefit-card__have-flag svg { width: 14px; height: 14px; flex: none; }