/* =================================================================
Zealous Website — shared styles
Source of truth: Figma "Smart Justice / Homepage - 1720px"
Colors and key sizes below are pulled directly from the Figma
design variables so every page stays consistent.
================================================================= */
/* ---------- Web fonts (all licensed) ----------
Founders Grotesk (self-hosted woff2): Medium 500 + Semibold 600. No Bold (700)
face — nothing renders Founders bold (the nav/footer wordmarks are now SVG).
PP Editorial New 400 (self-hosted woff2).
Neue Haas Grotesk: Adobe Fonts (Typekit kit dnq5kwg), loaded via the
in index.html's ; see --font-body. */
@font-face {
font-family: 'Founders Grotesk';
src: url('../fonts/FoundersGrotesk-Medium.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Founders Grotesk';
src: url('../fonts/FoundersGrotesk-Semibold.woff2') format('woff2');
font-weight: 600; font-style: normal; font-display: swap;
}
/* Neue Haas Grotesk is now served by Adobe Fonts (Typekit kit dnq5kwg) — the
is in index.html's . Its family is "neue-haas-grotesk-text"
(see --font-body below). No self-hosted @font-face / woff2 needed. */
@font-face {
font-family: 'PP Editorial New';
src: url('../fonts/PPEditorialNew-Regular.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
/* ---------- Design tokens (from Figma variables) ---------- */
:root {
/* Colors — exact values from the Figma file */
--white: #ffffff;
--coral: #fc9b6e;
--light-coral: #ffdece;
--black: #1a1a1a;
--green: #a2ecbc;
--yellow: #eee881;
--light-blue: #daf5ff;
--light-green: #f3fef7;
--highlight-blue: #94e1ff;
--light-yellow: #fffdd8;
--blue: #2966c3;
--background-blue: #c3e1ef;
/* Fonts — the real licensed typefaces from the Figma file.
Founders Grotesk -> big display headlines (self-hosted woff2)
Neue Haas Grotesk -> body text (Adobe Fonts/Typekit: "neue-haas-grotesk-text")
PP Editorial New -> serif accents (self-hosted woff2) */
--font-display: 'Founders Grotesk', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'neue-haas-grotesk-text', 'Helvetica Neue', Arial, sans-serif;
--font-serif: 'PP Editorial New', Georgia, 'Times New Roman', serif;
/* Layout — Figma frame is 1720px wide with 75px side padding
and 125px top/bottom padding. We keep those as the maximum and
scale them down fluidly on smaller screens. */
--max-width: 1720px;
--pad-x: clamp(20px, calc(11.96vw - 24.85px), 75px); /* 20 @375 · 75 @835+ (Figma mobile gutter) */
--pad-y: clamp(40px, calc(7.98vw + 10px), 125px); /* 40 @375 · 75 @835 · 125 @1440 */
/* Fluid type scale — single formulas that hit the Figma size at every
breakpoint (375 / 835 / 1440) and interpolate smoothly between. */
--fs-quote: clamp(50px, calc(8.26vw + 6px), 125px); /* 50 @375 · 75 @835 · 125 @1440 */
--fs-display: clamp(50px, calc(5.43vw + 29.6px), 100px); /* 50 @375 · 75 @835 · 100 @1440 */
--fs-display-lg: clamp(50px, calc(10.87vw + 9.2px), 100px); /* 50 @375 · 100 @835+ (California, Join Us) */
--fs-card: clamp(45px, calc(6.52vw + 20.55px), 75px); /* 45 @375 · 75 @835 (Figma card title) */
--fs-myth: clamp(28px, calc(1.5vw + 22.4px), 32px); /* 28 @375 · 32 @835 */
--fs-serif-l: clamp(20px, calc(0.87vw + 16.7px), 24px); /* 20 @375 · 24 @835 */
--fs-serif-m: 20px; /* 20px everywhere */
--fs-body: 18px; /* 18px everywhere */
--fs-small: 16px;
/* Motion — ease-in-out curve matching Figma's "Ease In And Out"
(same as the CSS ease-in-out keyword). Used for hover/transitions. */
--ease-io: cubic-bezier(0.42, 0, 0.58, 1);
/* Softer ease-in-out (easeInOutCubic) — gentler start/settle for the
more "liquid" card-hover motion. */
--ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
}
/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
overflow-x: hidden;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.4;
color: var(--black);
background: var(--light-yellow);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, blockquote, dl, dd, dt, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
/* ---------- Reusable display heading ---------- */
.display {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 0.9;
}
.section__title {
font-size: var(--fs-display);
}
/* Per-section headline line-heights, matching the Figma values */
.moment .section__title,
.california .section__title { line-height: 0.8; }
.facts .section__title { line-height: 0.85; }
/* California and Join Us keep their 100px headline at tablet (others drop to 75) */
.california .section__title { font-size: var(--fs-display-lg); }
/* ---------- Body copy ---------- */
.body-copy { font-size: var(--fs-body); line-height: 1.4; }
.body-copy p + p { margin-top: 1em; }
/* Serif accent line that sits under body copy (underlined statement) */
.lead-accent {
width: fit-content; /* highlight hugs the text, not the whole column */
max-width: 100%;
padding: 0.1em 0.22em;
font-family: var(--font-serif);
font-size: var(--fs-serif-m);
line-height: 1.15;
letter-spacing: -0.02em;
}
.lead-accent--green { --hl: var(--green); } /* #a2ecbc */
.lead-accent--blue { --hl: var(--highlight-blue); } /* #94e1ff */
/* Block line that holds an inline highlight span. The marker sits on the
INLINE span (not this block), so box-decoration-break:clone hugs each
wrapped line instead of forming one full-width box when it wraps on mobile. */
.lead-accent-line { width: 100%; }
/* Small serif eyebrow label (e.g. "The Moment") */
.eyebrow-serif {
font-family: var(--font-serif);
font-size: var(--fs-serif-l);
letter-spacing: -0.02em;
}
/* ---------- Pills (highlighted text chips) ---------- */
.pill {
display: inline-block;
padding: 8px 10px;
font-family: var(--font-serif);
font-size: var(--fs-serif-l);
line-height: 1.1;
letter-spacing: -0.02em;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.pill--coral { background: var(--coral); color: var(--white); }
.pill--light-blue { background: var(--light-blue); color: var(--black); }
/* ---------- Buttons ---------- */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 150px;
padding: 12px;
border-radius: 100px;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.25;
text-decoration: none;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
transition: transform 0.15s var(--ease-io); /* press feedback only */
}
/* Hover (mouse) / keyboard focus → Hover variant: the arrow slides right.
Driven by transform (GPU-accelerated, no reflow), the full 300ms on an
ease-in-out curve matching Figma's smart-animate. */
.btn__arrow {
width: 13px;
height: 10px;
flex: none;
transition: transform 0.3s var(--ease-io);
}
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow,
.btn.is-hover .btn__arrow { transform: translateX(12px); }
/* "Back to Top" reuses the shared arrow, rotated -90deg to point UP. On hover it
slides up (translateX along its now-rotated axis). The extra .btn class keeps
these more specific than the generic .btn:hover .btn__arrow rule above. */
.nav__back-top .btn__arrow { transform: rotate(-90deg); }
.btn.nav__back-top:hover .btn__arrow,
.btn.nav__back-top:focus-visible .btn__arrow,
.btn.nav__back-top.is-hover .btn__arrow { transform: rotate(-90deg) translateX(12px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.btn,
.btn::after { transition: none; }
}
.btn--coral { background: var(--coral); color: var(--white); }
.btn--black { background: var(--black); color: var(--white); }
.btn--light-blue { background: var(--light-blue); color: var(--black); }
.btn--highlight-blue { background: var(--highlight-blue); color: var(--black); }
.btn--blue { background: var(--blue); color: var(--light-blue); }
/* ---------- Generic section wrapper ---------- */
/* Full-bleed sections: the background runs edge-to-edge at ANY width, while
content stays centred and exactly as wide as before (the 1720 frame minus its
gutters). Below 1720 the padding is just --pad-x (unchanged); past 1720 it
grows by (viewport - 1720)/2 so the extra width becomes margin, not content. */
.section {
width: 100%;
padding: var(--pad-y) max(var(--pad-x), calc((100% - var(--max-width)) / 2 + var(--pad-x)));
}
/* =================================================================
NAVIGATION
================================================================= */
/* =================================================================
COMPONENT — Navigation
Desktop (>835): full bar (links · wordmark · Get Involved), transparent
over the hero. Fixed; after scrolling past the hero it collapses to a
light-blue hamburger (top-right) that opens a dropdown menu.
Mobile (≤835): wordmark left + hamburger right at all times.
================================================================= */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 50;
transition: background-color 0.35s var(--ease-soft); /* dark bar fades in on scroll */
}
.nav {
position: relative;
max-width: var(--max-width);
margin-inline: auto;
padding: 25px var(--pad-x);
/* Three equal-weight columns so the wordmark is truly CENTERED regardless of
the links/CTA widths: links (left) · wordmark (centre) · Get Involved
(right). */
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
}
.nav__links {
justify-self: start;
display: flex;
gap: clamp(20px, 3vw, 50px);
font-size: var(--fs-small);
color: var(--light-blue);
}
.nav__cta { justify-self: end; color: #030303; } /* Figma nav CTA text #030303 */
.nav__links a { text-decoration: none; }
.nav__brand {
justify-self: center;
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-small);
line-height: 1; /* Figma leading-none (2-line mobile logo) */
text-transform: uppercase;
text-decoration: none;
color: var(--light-blue);
text-align: center;
white-space: nowrap; /* one line on desktop/iPad (wraps on mobile) */
}
.nav__brand .amp { text-transform: uppercase; }
/* SVG wordmark logo (replaces the text). 1-line lockup sized to the same ~199px
width the text logo occupied; vertically centred in the nav row. */
.nav__brand-logo { display: block; width: 199px; height: auto; }
/* Hamburger toggle — light-blue CIRCLE (Figma scrolled/mobile nav), pinned top-right */
.nav__toggle {
display: none;
position: absolute;
top: 22px;
right: var(--pad-x);
width: 45px;
height: 45px;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 50%; /* circle, per the new Figma nav */
background: var(--light-blue); /* #daf5ff */
color: var(--black);
cursor: pointer;
z-index: 2;
}
/* Both icons stacked (centred, overlapping) so the hamburger ⇄ × swap can DRAW
back and forth via stroke-dasharray / stroke-dashoffset (pathLength=1) — like the
line-draws elsewhere on the site. Centred with margins (not transform) so it
doesn't fight the rotate/flip, which targets only the hamburger (--open) icon —
that keeps the × a TRUE × (never rotated into a +). */
.nav__toggle-icon {
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
margin: -12px 0 0 -12px;
transform-origin: center;
}
.nav__toggle-icon path { stroke-dasharray: 1; transition: stroke-dashoffset 0.4s var(--ease-soft); }
.nav__toggle-icon--open path { stroke-dashoffset: 0; } /* hamburger drawn at rest */
.nav__toggle-icon--close path { stroke-dashoffset: 1; } /* × retracted at rest */
/* On open: the hamburger draws OUT and the × draws IN (reversed on close). */
.nav__toggle[aria-expanded="true"] .nav__toggle-icon--open path { stroke-dashoffset: 1; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon--close path { stroke-dashoffset: 0; }
.nav__toggle:focus-visible { outline: 2px solid var(--light-blue); outline-offset: 2px; }
/* Reduced motion: instant swap between hamburger and × — no draw. */
@media (prefers-reduced-motion: reduce) {
.nav__toggle-icon path { transition: none; }
}
/* Dropdown menu panel */
.nav__menu {
position: absolute;
top: calc(100% + 10px);
right: var(--pad-x);
width: 200px;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
padding: 24px 50px;
border-radius: 10px;
background: var(--background-blue);
}
.nav__menu[hidden] { display: none; }
.nav__menu a:not(.btn) {
font-size: var(--fs-small);
color: var(--black);
text-decoration: none;
}
/* ----- Nav link hover/focus highlight -----
No underline. On hover OR keyboard focus a Highlight-Blue (#94E1FF) marker
wipes in left-to-right BEHIND the text (the text colour is untouched).
Implemented with a ::before that scaleX(0→1) — GPU-friendly (transform), so
it adds no layout shift and stays on the global liquid ease. Covers both the
desktop bar (.nav__links) and the hamburger menu (.nav__menu), every
breakpoint. */
.nav__links a,
.nav__menu a:not(.btn) {
position: relative;
isolation: isolate; /* keep the negative-z marker scoped to the link */
}
.nav__links a::before,
.nav__menu a:not(.btn)::before {
content: "";
position: absolute;
inset: -0.12em -0.3em; /* marker sits slightly proud of the text */
z-index: -1; /* behind the link text */
background: var(--highlight-blue); /* #94E1FF */
transform: scaleX(0);
transform-origin: left center; /* wipe grows from the left */
transition: transform 0.55s var(--ease-soft);
}
/* Full desktop menu only: hover highlight is BLUE (#2966C3). The hamburger
menu (.nav__menu) keeps #94E1FF — .nav__links is hidden once collapsed. */
.nav__links a::before { background: var(--blue); }
.nav__links a:hover::before,
.nav__links a:focus-visible::before,
.nav__menu a:not(.btn):hover::before,
.nav__menu a:not(.btn):focus-visible::before {
transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
/* highlight still appears on hover/focus, just with no wipe animation */
.nav__links a::before,
.nav__menu a:not(.btn)::before { transition: none; }
}
/* Desktop & iPad (≥835): full bar at top, collapses to the hamburger on scroll.
SCROLLED STATE: background stays TRANSPARENT (no bar) — just the circular
hamburger floats top-right. The top (unscrolled) state is unchanged. */
@media (min-width: 835px) {
.site-header.is-scrolled { background: transparent; }
/* flex + in-flow hamburger so the collapsed nav keeps its full height (py-25 + 45) */
.site-header.is-scrolled .nav { display: flex; justify-content: flex-end; align-items: center; }
.site-header.is-scrolled .nav__links,
.site-header.is-scrolled .nav__brand,
.site-header.is-scrolled .nav__cta { display: none; }
.site-header.is-scrolled .nav__toggle {
display: inline-flex;
position: relative; /* positioning context for the stacked icons */
}
.site-header.is-scrolled .nav__toggle .nav__toggle-icon--open {
transition: transform 0.6s var(--ease-soft); /* smooth, eased flip */
}
/* Timed flip: 0.5s after the bar fully collapses to the hamburger, nav.js adds
.is-flipped — the HAMBURGER icon ROTATES from horizontal (start, node 10454-1279)
to the diagonal scrolled state (end, node 10473-1661 — a 45° turn) and HOLDS
there. On the hamburger icon only, so the × (close) is never rotated. Reverts
when the bar re-expands. */
.site-header.is-scrolled .nav__toggle.is-flipped .nav__toggle-icon--open {
transform: rotate(45deg);
}
}
/* Reduced motion: no flip animation — show the static END state (diagonal) as soon
as it's collapsed (nav.js skips the timer here; this shows the end state). */
@media (prefers-reduced-motion: reduce) and (min-width: 835px) {
.site-header.is-scrolled .nav__toggle .nav__toggle-icon--open { transition: none; transform: rotate(45deg); }
}
/* Mobile (≤834): a TRANSPARENT bar — wordmark (logo) left, circular hamburger
right. The LOGO scrolls away normally with the page (the header is absolute, not
pinned, so it leaves the top with the content). The HAMBURGER is STICKY
(position:fixed, pinned to the top-right corner) and, on scroll, ROTATES IN PLACE
to the Figma slant angle — it does NOT travel down the page. */
@media (max-width: 834px) {
.site-header { position: absolute; } /* logo scrolls away with the page */
.nav {
max-width: none;
margin: 0;
width: 100%;
padding: 25px 40px; /* Figma mobile nav px-40 py-25 */
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__links, .nav__cta { display: none; }
/* The LOGO — scrolls away normally with the page (it's in the absolute header,
no transform, not pinned), like normal content. */
.nav__brand {
width: 120px; /* Figma mobile wordmark = 120px (2 tight lines) */
font-size: 18px; /* Figma mobile wordmark = 18px */
text-align: left;
white-space: normal;
}
/* The 1-line SVG wordmark doesn't wrap like the old text; let the cell size to it
and keep it compact on mobile. */
.nav__brand { width: auto; }
.nav__brand-logo { width: 160px; }
.nav__toggle {
display: inline-flex;
position: fixed; /* STICKY — pinned to the top-right corner, stays visible */
top: 25px; right: 40px; /* same spot as in the bar → no jump at the top */
width: 40px; height: 40px; /* Figma mobile menu = 40px */
}
.nav__toggle .nav__toggle-icon--open {
transition: transform 0.45s var(--ease-soft); /* smooth in-place rotation */
}
.nav__menu { position: fixed; top: 79px; right: 40px; }
/* ON SCROLL: the HAMBURGER icon ROTATES IN PLACE to the Figma mobile-scrolled slant
(rotate(-135deg) scaleY(-1), node 10454-1296). On the hamburger icon only, so the
× (close) stays a true ×; no button transform means no reset-on-open is needed. */
.site-header.is-scrolled .nav__toggle .nav__toggle-icon--open {
transform: rotate(-135deg) scaleY(-1);
}
}
/* Reduced motion: no slant — hamburger icon stays upright in its normal spot. */
@media (max-width: 834px) and (prefers-reduced-motion: reduce) {
.nav__toggle .nav__toggle-icon--open { transition: none; transform: none; }
}
/* =================================================================
HERO
================================================================= */
.hero {
position: relative;
min-height: 800px;
display: flex;
align-items: center;
justify-content: center;
padding: calc(var(--pad-y) + 40px) var(--pad-x) var(--pad-y);
/* Art-directed photo: phone crop by default, swapped at each breakpoint.
Anchored LEFT (not center) so the person stays flush to the block's left
edge like Figma — when the photo is wider than the block (e.g. the 1720px
image at the 1440 breakpoint), cover then crops only the empty light-blue
on the right instead of slicing into the subject on the left. */
background: var(--light-blue) url('../images/hero-375.jpg') left center / cover no-repeat;
}
.hero__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
text-align: center;
max-width: 1060px; /* matches the Figma headline width */
}
.hero__eyebrow {
text-align: center;
white-space: normal;
}
/* Hero eyebrow uses the SAME marker-highlight wipe as the rest of the page
(.hl: coral gradient grows 0%→100%, box-decoration-break:clone so each
wrapped line wipes L→R in parallel, ease-in-out). It's above the fold, so
it is triggered on load (data-fx-onload in fx.js) rather than on scroll.
Kept inline so box-decoration-break gives a per-line marker box. */
/* Scoped under .hero__eyebrow so the white text wins over `.hl { color:
inherit }`, which is defined later in the file with equal specificity. */
.hero__eyebrow .hero__eyebrow-mark {
--hl: var(--coral);
display: inline;
padding: 0.18em 0.34em;
font-family: var(--font-serif);
font-size: var(--fs-serif-m); /* 20px — Figma hero eyebrow */
line-height: 1.35; /* room so stacked per-line markers don't collide */
letter-spacing: -0.02em;
color: var(--white);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.hero__title {
font-size: var(--fs-display);
line-height: 0.8;
color: var(--light-coral);
}
.hero__buttons {
display: flex;
gap: 25px;
flex-wrap: wrap;
justify-content: center;
}
/* =================================================================
MENTAL HEALTH DIVERSION
================================================================= */
.diversion {
position: relative; /* containing block for the bg pattern */
background: var(--light-green);
display: flex;
flex-direction: column;
gap: 75px;
overflow: hidden; /* clip the pattern's bleed (like .facts) */
}
/* Background zig-zag pattern — the green chevron from Figma "Pattern 1". The art
is the ACTUAL Figma pattern asset (41 visible lines from 38 paths), not the
reused Facts chevron. Figma uses a DIFFERENT per-width composition, so we ship
two: the wide one (viewBox 1440×1884, full block) for ≥641px, and the mobile
one (viewBox 375×716, a top band) for ≤640px — each pre-proportioned for its
width so neither is distorted. Both FILL their box (preserveAspectRatio="none")
and scrub-draw via the shared [data-fx-scrub] system (fx.js drives --draw from
the wrapper; both SVGs' .fx-line read it). Behind everything (z-index 0,
pointer-events none) so cards/text stay on top. */
.diversion__pattern {
position: absolute;
inset: 0; /* full block (wide composition) */
pointer-events: none;
z-index: 0;
}
.diversion__pattern .fx-draw { display: block; width: 100%; height: 100%; }
.diversion__pattern .dpat--sm { display: none; } /* mobile variant hidden by default */
/* Mobile (≤640): swap to the 375×716 composition, placed as a TOP BAND (Figma
shows the pattern only across the top of the tall stacked-content block). */
@media (max-width: 640px) {
.diversion__pattern {
inset: auto;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 375 / 716; /* top band, matches the Figma 375 pattern box */
}
.diversion__pattern .dpat--lg { display: none; }
.diversion__pattern .dpat--sm { display: block; }
}
/* Lift all real content above the background pattern. */
.diversion__header,
.diversion__row,
.diversion .steps { position: relative; z-index: 1; }
/* "Content Header" group (Figma): the new section tag sits directly above the
heading, grouped so the tag→heading spacing is tight (18px) while the group as
a whole keeps the section's 75px rhythm to the row below — so nothing else in
the About block moves except being pushed down by the tag. The tag reuses the
site's section-tag treatment (.eyebrow-serif: serif, --fs-serif-l, -0.02em). */
.diversion__header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px; /* tag → heading (1720 / 1440 frames) */
width: 100%;
}
.diversion__tag { line-height: 2; } /* Figma tag leading: 2 */
@media (max-width: 1024px) { .diversion__header { gap: 8px; } } /* 835 frame */
@media (max-width: 600px) { .diversion__header { gap: 0; } } /* 375 frame */
.diversion__row {
display: flex;
gap: clamp(40px, 8vw, 123px);
align-items: flex-start;
}
.diversion__content {
flex: 0 1 644px; /* Figma content column = 644px */
display: flex;
flex-direction: column;
gap: 50px;
align-items: flex-start;
}
.diversion__media {
flex: 1 1 0;
min-width: 0;
display: block;
}
.diversion__media img {
width: 100%;
height: 489px; /* Figma keeps this slot 489px tall, cropping width */
display: block;
object-fit: cover;
border-radius: 10px;
}
/* ----- Steps cards -----
CSS Grid (not flex) so the row's track height sizes to the TALLEST card's
content and every card stretches to match it — equal height that GROWS as
content reveals/wraps, with no clipping. (A stretched flex item holding the
reveal's `grid 1fr` doesn't reliably grow its track, which clipped the
revealed text and pushed the title off the top around 1024–1280px.) */
.steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
align-items: stretch;
}
/* =================================================================
COMPONENT — Card ("Card System" / Steps)
Variants: --green · --yellow · --blue (default background colour).
State: on hover/focus the card turns coral, a diamond pattern fades
in, and the description expands. Title is always visible.
Sizes (desktop row / tablet · mobile stacked) are handled by the
.steps container + the responsive blocks below.
================================================================= */
.card {
position: relative;
flex: 1 1 0;
min-width: 0;
/* No hardcoded height: fx.js measures the tallest card's full (title + body)
content at the current width and sets --card-reserve, so all cards match
responsively and the resting title can move up as the body reveals. */
min-height: var(--card-reserve, 0px);
display: flex;
flex-direction: column;
justify-content: flex-end;
/* ≥50px top & bottom always (breathing room so the revealed title/body never
crowd or clip the edges); sides per Figma (32). */
padding: 50px 32px;
border: 1px solid var(--black);
border-radius: 10px;
overflow: hidden;
background: var(--card-bg, var(--green));
transition: background-color 0.55s var(--ease-soft);
}
.card--green { --card-bg: var(--green); }
.card--yellow { --card-bg: var(--yellow); }
.card--blue { --card-bg: var(--background-blue); }
/* Each card now carries its OWN decorative pattern, revealed on hover (desktop/
iPad) and tap/active (mobile). All three reuse the shared .fx-line draw-on
system, so they sketch on at the SAME duration/easing/stagger — only the path
shape and sweep DIRECTION differ per pattern. Stretched to a per-card box
(preserveAspectRatio="none"); the card's overflow:hidden clips the bleed.
• green (Actual Care) — Arch: fan of curved arcs, top-RIGHT
• yellow (Public Safety) — Diamond: sunburst, full-width, focal near top
• blue (Follow-Through)— Fan: bent lines, full-width, mirrored */
.card__pattern {
position: absolute;
pointer-events: none;
z-index: 0;
}
.card__pattern .fx-draw { display: block; width: 100%; height: 100%; }
/* Actual Care — Arch, anchored top-right; arcs draw bottom→top, swept L→R. */
.card--green .card__pattern { top: 0; right: 0; width: 82%; aspect-ratio: 416 / 327; }
/* Public Safety — Diamond sunburst, full width, focal near the top. Its paths
run edge→centre, so a -1 starting dashoffset reveals from the CENTRE end first
→ the rays draw OUTWARD from the focal point (timing-neutral; same transition). */
.card--yellow .card__pattern { top: 0; left: 0; width: 100%; aspect-ratio: 504.661 / 305; }
.card--yellow .fx-line { stroke-dashoffset: -1; }
/* Cohesion: normalise the per-card stagger by (n−1) so all three patterns —
despite different path counts (33 / 58 / 14) — span the EXACT same window and
finish together. Duration (0.275s) and easing stay from the shared .fx-line,
so the three draw on at identical speed; only shape & direction differ. */
.card .fx-line { transition-delay: calc(var(--i) / (var(--n) - 1) * 0.2s); }
/* INTRO (hover / focus / tap-active) sweeps on its OWN order, --j, while the
OUTRO (return to rest, above) keeps --i — a CSS transition alone can't differ
per direction, so the end-state rule supplies the intro stagger. Duration and
easing are unchanged, so all three still draw at one identical speed.
• Actual Care (green): --j = reverse of --i → intro is the exact reverse of
its outro (so hover draws it in the way un-hover draws it out).
• Public Safety (yellow): --j = --i → unchanged.
• Follow-Through (blue): --j orders the lines right→left on intro; the outro
(--i) is left exactly as it was. */
.card:hover .fx-line,
.card:focus-within .fx-line,
.card.is-active .fx-line { transition-delay: calc(var(--j) / (var(--n) - 1) * 0.2s); }
/* Follow-Through — Fan of bent lines, full width, mirrored to match Figma; lines
draw along their length, swept top→bottom. */
.card--blue .card__pattern { top: 0; left: 0; width: 100%; aspect-ratio: 505 / 428; transform: scaleX(-1); transform-origin: center; }
/* Patterns re-sized to the stacked card box per the mobile (375) frame. */
@media (max-width: 600px) {
.card--green .card__pattern { width: 85.4%; aspect-ratio: 416 / 327; }
.card--yellow .card__pattern { aspect-ratio: 333 / 299; }
.card--blue .card__pattern { aspect-ratio: 333 / 358; }
}
/* prefers-reduced-motion: the pattern is shown in its final (fully-drawn) state
on hover/active with NO sketching animation. (At rest it stays hidden, as the
pattern is a hover/active decoration.) */
@media (prefers-reduced-motion: reduce) {
.card .fx-line { transition: none !important; }
}
/* Title + body share one group pinned to the card's bottom (the card is a
flex column with justify-content:flex-end). The body is COLLAPSED at rest
so the group is exactly as tall as the title and the title sits on Figma's
resting baseline — nothing is reserved. On hover the body opens; because
the group is bottom-anchored, that extra height grows UPWARD, lifting the
title to reveal the body below it.
Two implementations:
• Base (below) collapses the body with max-height — animates in EVERY
browser, including pre-2022 ones. max-height can only ease toward a fixed
ceiling, so the timing is a touch less exact, but the motion is smooth.
• @supports block further down upgrades modern browsers to an exact grid
0fr→1fr reveal that eases to the body's real height (the liquid default). */
.card__content {
position: relative;
z-index: 1;
}
.card__title {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-card);
line-height: 0.9;
letter-spacing: -0.02em;
color: var(--black);
/* Safety net: never let a long title overflow its (now column-capped) card —
break it rather than clip. The clean per-title break is authored in the
markup (e.g. "Follow-Through"); this only catches anything narrower. */
overflow-wrap: break-word;
}
/* The title is pinned at its 75px maximum from 835px up, but in the 3-up band
(≥1025px) the three columns keep narrowing toward the 1024px stack point. The
longest title wraps to two lines ("Follow-" / "Through") by design, but its
longest WORD ("Through" ≈ 263px @75px) stops fitting the column below ~1200px
and would break mid-word. So scale the title down across the 3-up band just
enough that every word fits cleanly, ramping back to the full 75px by ~1230px
where the cards are wide enough — matching the Figma 1440 cards. Stacked
widths (≤1024) keep the normal --fs-card (the full-width card fits 75px). */
@media (min-width: 1025px) {
.card__title { font-size: clamp(56px, calc(9.27vw - 39px), 75px); }
}
.card__body {
max-height: 0; /* collapsed at rest — fallback reveal mechanism */
overflow: hidden; /* clip the body (and its top gap) while collapsed */
padding-top: 48px; /* gap above the body — clipped at rest (border-box) */
opacity: 0;
transform: translateY(14px);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.4;
color: var(--black);
max-width: 427px;
/* soft fade/slide + max-height open, same 0.55s curve */
transition: max-height 0.55s var(--ease-soft), opacity 0.55s var(--ease-soft), transform 0.55s var(--ease-soft);
}
/* Hover / keyboard-focus / .is-active (showcase) reveal the coral state.
Everything (background, pattern draw, body) animates over 0.55s on the
same soft ease-in-out curve, so it reads as one fluid motion. */
.card:hover,
.card:focus-within,
.card.is-active { background: var(--coral); }
.card:hover .card__body,
.card:focus-within .card__body,
.card.is-active .card__body {
max-height: 24em; /* generous ceiling — exceeds the longest body */
opacity: 1;
transform: translateY(0);
}
/* Modern upgrade (post-2022 browsers). subgrid support implies the browser
can also animate grid track sizes, so we swap the body's max-height reveal
for an exact grid 0fr→1fr open that eases to its true height. This is the
default, liquid version; the max-height rules above are the fallback. */
@supports (grid-template-rows: subgrid) {
.card__content {
display: grid;
grid-template-rows: auto 0fr;
/* One column, capped at the card's width (minmax floor 0, not the title's
max-content). Without this the implicit grid column is `auto` and sizes to
the widest title's MAX-CONTENT — so "Follow-Through" stayed one 263px line
and overflowed (clipped) when the 3-up track got narrow (~1025–1180px).
Capping the column lets the title wrap to the card, like the block fallback. */
grid-template-columns: minmax(0, 1fr);
transition: grid-template-rows 0.55s var(--ease-soft);
}
.card__body {
max-height: none; /* the grid row governs height now, not max-height */
min-height: 0; /* let the row collapse fully at rest */
transition: opacity 0.55s var(--ease-soft), transform 0.55s var(--ease-soft);
}
.card:hover .card__content,
.card:focus-within .card__content,
.card.is-active .card__content { grid-template-rows: auto 1fr; }
}
/* (card pattern lines now inherit the shared liquid .fx-line timing below) */
/* Desktop AND iPad (≥835): (a) cards 50px TALLER than their content-sized height —
added to --card-reserve, no hardcoded px, equal heights preserved. (b) Body stays
BELOW the title — ORIGINAL hover layout (headline above, text below). The resting
title sits flush at the bottom 50px. We collapse the body with max-height here
rather than the grid 0fr reveal: grid 0fr could NOT shrink the body past its 48px
top-gap, so the resting title got pushed ~48px up; max-height:0 clips that gap
fully (resting title at 50px) while the body's scrollHeight STILL counts it — so
fx.js's --card-reserve (and therefore the card size) is unchanged. Scoped ≥835
(desktop + iPad); mobile (≤834) untouched. */
@media (min-width: 835px) {
.card { min-height: calc(var(--card-reserve, 0px) + 50px); }
@supports (grid-template-rows: subgrid) {
.card__content { display: block; } /* block + max-height reveal, not grid 0fr */
.card__body {
max-height: 0;
min-height: 0;
padding-top: 0; /* gap moves to ::before so the body can collapse fully (padding is a hard floor max-height can't clip) */
transition: max-height 0.55s var(--ease-soft), opacity 0.55s var(--ease-soft), transform 0.55s var(--ease-soft);
}
/* The 48px title↔text gap as CLIPPABLE content: counted in scrollHeight (so
fx.js keeps --card-reserve correct → size unchanged) but clipped by
overflow+max-height at rest (so the resting title lands at the 50px padding). */
.card__body::before { content: ''; display: block; height: 48px; }
.card:hover .card__body,
.card:focus-within .card__body,
.card.is-active .card__body { max-height: 24em; }
}
}
/* Touch cards use a real