/* =========================================================
BOLI CARE · HOME · v4
Patient-first, warmer, more vivid, more photos.
========================================================= */
/* ═══════════ HERO ═══════════ */
.hero {
padding-top: clamp(120px, 14vh, 160px);
padding-bottom: var(--sp-section);
position: relative;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 96px);
align-items: center;
justify-items: center;
}
.hero-text {
width: 100%;
max-width: 560px;
justify-self: end;
}
/* ─── Text column ─── */
.hero-text > * + * { margin-top: var(--sp-5); }
.hero-title {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(2.8rem, 6vw, 5.4rem);
line-height: 1.02;
letter-spacing: -.028em;
color: var(--ink);
margin-top: var(--sp-4);
}
.hero-title em {
font-style: italic;
font-weight: 400;
color: var(--brand-green);
}
.hero-title .accent-underline {
position: relative;
display: inline-block;
}
.hero-title .accent-underline::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -.08em;
height: .18em;
background: color-mix(in srgb, var(--green) 18%, transparent);
border-radius: 4px;
z-index: -1;
}
.hero-lede {
font-size: var(--fs-lede);
line-height: 1.6;
color: var(--ink-soft);
max-width: 44ch;
}
.hero-push {
font-size: 1.1rem;
line-height: 1.5;
color: var(--ink);
max-width: 42ch;
padding-left: 18px;
border-left: 3px solid var(--brand-green);
}
.hero-push strong { font-weight: 600; }
.hero-cta-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
padding-top: var(--sp-3);
}
.hero-trust {
display: flex;
flex-wrap: wrap;
gap: 20px 24px;
padding-top: var(--sp-6);
margin-top: var(--sp-6);
border-top: 1px solid var(--rule-soft);
}
.hero-trust .trust-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-weight: 500;
letter-spacing: .02em;
color: var(--ink-muted);
white-space: nowrap;
}
.hero-trust .trust-item svg {
width: 16px;
height: 16px;
stroke: var(--green);
stroke-width: 1.6;
fill: none;
}
/* ─── Visual column ─── */
.hero-visual {
position: relative;
aspect-ratio: 4 / 5;
max-width: 560px;
justify-self: center;
width: 100%;
will-change: transform;
isolation: isolate;
}
.hero-carousel {
margin-bottom: 32px;
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity .7s var(--ease), visibility .7s var(--ease);
}
.hero-slide.is-active {
opacity: 1;
visibility: visible;
}
.hero-photo {
position: absolute;
inset: 0;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
background-color: var(--paper-2);
background-image: var(--hero-img);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
}
.hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
transform: none;
}
/* Subtle warm gradient wash on top of photo to marry it to the page */
.hero-photo::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(251,250,246,.02) 0%, rgba(11,52,38,.18) 100%),
radial-gradient(circle at 30% 20%, rgba(251,250,246,.1), transparent 55%);
pointer-events: none;
}
/* ─── Floating cards ─── */
.hero-card {
position: absolute;
background: color-mix(in srgb, var(--paper) 94%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.6);
border-radius: var(--radius);
padding: 16px 18px;
box-shadow: 0 18px 50px -22px rgba(13,26,20,.3);
will-change: transform;
z-index: 3;
pointer-events: none;
}
.hero-card-notif {
top: -4%;
left: -9%;
width: 290px;
animation: floatY 7s ease-in-out infinite;
}
.hero-card-quote {
bottom: -3%;
right: -9%;
width: 300px;
animation: floatY 8s ease-in-out infinite;
animation-delay: -3s;
}
.hero-card-checkin {
top: -5%;
right: -7%;
width: 250px;
animation: floatY 7.4s ease-in-out infinite;
}
.hero-card-coach {
left: -8%;
bottom: -3%;
width: 285px;
animation: floatY 8.2s ease-in-out infinite;
animation-delay: -2.5s;
}
.hero-card-plan {
top: -5%;
left: -8%;
width: 268px;
animation: floatY 7.8s ease-in-out infinite;
}
.hero-slide--kitchen .hero-card-quote {
right: -7%;
bottom: -2%;
}
.hero-card-steps {
left: -8%;
bottom: -3%;
width: 240px;
animation: floatY 8s ease-in-out infinite;
animation-delay: -1.8s;
}
.hero-card-reminder {
top: -5%;
right: -8%;
width: 270px;
animation: floatY 7.2s ease-in-out infinite;
}
@keyframes floatY {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* Notification card internals */
.notif-head {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--fs-small);
color: var(--ink);
margin-bottom: 6px;
}
.notif-head strong { font-weight: 600; }
.notif-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent);
animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); }
70% { box-shadow: 0 0 0 10px rgba(13,91,63,0); }
100% { box-shadow: 0 0 0 0 rgba(13,91,63,0); }
}
.notif-body {
font-size: 13.5px;
line-height: 1.45;
color: var(--ink-soft);
margin-bottom: 10px;
}
.notif-meta {
font-size: 10.5px;
font-weight: 600;
letter-spacing: .15em;
color: var(--ink-muted);
text-transform: uppercase;
}
.hc-label {
display: block;
margin-bottom: 8px;
color: var(--gold);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.hero-card-checkin strong,
.hero-card-plan strong,
.hero-card-steps strong {
display: block;
font-family: var(--font-head);
font-size: 1.35rem;
line-height: 1.1;
font-weight: 500;
color: var(--green);
margin-bottom: 7px;
}
.hero-card-checkin span:last-child,
.hero-card-plan span:last-child,
.hero-card-steps span:last-child {
display: block;
color: var(--ink-soft);
font-size: 13px;
line-height: 1.42;
}
/* Quote card internals */
.hero-card-quote p {
font-family: var(--font-head);
font-style: italic;
font-size: 1.02rem;
line-height: 1.4;
color: var(--ink);
letter-spacing: -.01em;
}
.hero-carousel-dots {
position: absolute;
left: 50%;
bottom: -34px;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 9px;
z-index: 5;
}
.hero-carousel-dots button {
width: 8px;
height: 8px;
border: 0;
border-radius: 999px;
padding: 0;
background: color-mix(in srgb, var(--green) 26%, var(--rule));
cursor: pointer;
transition: width .25s var(--ease), background .25s var(--ease);
}
.hero-carousel-dots button.is-active {
width: 28px;
background: var(--green);
}
.hero-carousel-dots button:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 4px;
}
/* ═══════════ MANIFEST / PROBLEM ═══════════ */
.manifest {
background:
radial-gradient(1200px 600px at 50% 0%, rgba(192,138,46,.06), transparent 60%),
linear-gradient(180deg, transparent 0%, rgba(236,229,212,.3) 50%, transparent 100%);
padding: clamp(140px, 16vw, 220px) 0;
text-align: center;
position: relative;
}
/* Vertical editorial line (draws itself on reveal) */
.manifest::before {
content: '';
position: absolute;
left: 50%;
top: 64px;
width: 1px;
height: 40px;
background: var(--ink-muted);
transform-origin: top;
transform: scaleY(0);
transition: transform 1.2s var(--ease-out);
}
.manifest.in::before { transform: scaleY(1); }
.manifest-title {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(2.4rem, 5.5vw, 4.4rem);
line-height: 1.08;
letter-spacing: -.025em;
color: var(--ink);
max-width: 22ch;
margin: var(--sp-5) auto var(--sp-7);
}
.manifest-title em {
font-style: italic;
font-weight: 400;
color: var(--green);
}
/* ─── Strike-through editorial effect on "willpower" ─── */
.strike-word {
position: relative;
display: inline-block;
padding: 0 .08em;
white-space: nowrap;
}
.strike-word::after {
content: '';
position: absolute;
left: 0; right: 0;
top: 56%;
height: 4px;
background: var(--coral);
border-radius: 2px;
transform-origin: left center;
transform: scaleX(0);
transition: transform 1.1s var(--ease-out) .4s;
}
.manifest.in .strike-word::after { transform: scaleX(1); }
.strike-word > span {
display: inline-block;
transition: color 1s var(--ease) 1s, opacity 1s var(--ease) 1s;
}
.manifest.in .strike-word > span {
color: var(--ink-muted);
opacity: .65;
}
.manifest-body {
max-width: 56ch;
margin: 0 auto;
font-size: clamp(1.08rem, 1.4vw, 1.28rem);
line-height: 1.55;
color: var(--ink-soft);
}
.manifest-body > p + p { margin-top: var(--sp-5); }
.manifest-body strong {
color: var(--ink);
font-weight: 600;
}
.manifest-body .highlight {
background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--green) 20%, transparent) 55%);
padding: 0 .15em;
}
/* ═══════════ WHERE BOLI BEGINS ═══════════ */
.begins {
padding: var(--sp-section) 0;
position: relative;
}
.begins-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(48px, 6vw, 96px);
align-items: center;
}
.begins-text > * + * { margin-top: var(--sp-5); }
.begins-text h2 {
font-family: var(--font-head);
font-size: clamp(2.2rem, 4.8vw, 3.8rem);
line-height: 1.08;
letter-spacing: -.022em;
color: var(--ink);
font-weight: 500;
max-width: 14ch;
}
.begins-text h2 em {
font-style: italic;
font-weight: 400;
color: var(--green);
}
.begins-text p {
font-size: var(--fs-lede);
line-height: 1.6;
color: var(--ink-soft);
max-width: 46ch;
}
.begins-claim {
font-family: var(--font-head);
font-size: clamp(1.15rem, 1.8vw, 1.4rem);
font-style: italic;
color: var(--ink);
padding: 20px 0 20px 20px;
border-left: 2px solid var(--coral);
max-width: 40ch;
}
.begins-claim strong { font-style: normal; font-weight: 600; }
/* Visual side */
.begins-visual {
position: relative;
aspect-ratio: 4 / 5;
width: 100%;
max-width: 520px;
justify-self: center;
}
.begins-photo {
position: absolute;
inset: 0;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
background: var(--paper-2);
}
.begins-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Small screenshot tile floating at bottom-right */
.begins-tile {
position: absolute;
bottom: -6%;
right: -8%;
width: 180px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 10px;
box-shadow: var(--shadow);
animation: floatY 9s ease-in-out infinite;
animation-delay: -2s;
}
.begins-tile img {
width: 100%;
border-radius: 6px;
display: block;
}
.begins .btn { margin-top: var(--sp-4); }
/* ═══════════ FEATURES · 4 PILLARS ═══════════ */
.features {
padding: var(--sp-section) 0;
position: relative;
}
.features .section-head {
text-align: center;
max-width: 720px;
margin: 0 auto clamp(64px, 7vw, 96px);
}
.features .section-head h2 {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(2.2rem, 4.6vw, 3.6rem);
line-height: 1.1;
letter-spacing: -.022em;
margin: var(--sp-5) 0 var(--sp-5);
color: var(--ink);
}
.features .section-head h2 em {
font-style: italic;
font-weight: 400;
color: var(--green);
}
.features .section-head p {
font-size: var(--fs-lede);
color: var(--ink-soft);
max-width: 52ch;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(20px, 2vw, 28px);
}
.feature-card {
position: relative;
background: var(--paper);
border: 1px solid var(--rule-soft);
border-radius: var(--radius-lg);
padding: clamp(28px, 3vw, 40px);
transition: transform var(--dur-base) var(--ease),
box-shadow var(--dur-base) var(--ease),
border-color var(--dur-base) var(--ease);
will-change: transform;
}
.feature-card:hover {
box-shadow: var(--shadow);
border-color: var(--rule);
}
.feature-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(420px 180px at 20% 0%, rgba(13,91,63,.05), transparent 60%);
pointer-events: none;
opacity: 0;
transition: opacity var(--dur-base) var(--ease);
}
.feature-card:hover::before { opacity: 1; }
.feature-icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: var(--green-50);
color: var(--green);
margin-bottom: 22px;
transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.feature-card:hover .feature-icon {
background: var(--green-50);
}
.feature-icon svg {
width: 22px;
height: 22px;
stroke-width: 1.6;
fill: none;
stroke: currentColor;
}
.feature-card h3 {
font-family: var(--font-head);
font-size: 1.32rem;
font-weight: 500;
line-height: 1.25;
color: var(--ink);
margin-bottom: 12px;
letter-spacing: -.012em;
}
.feature-card p {
color: var(--ink-soft);
font-size: 15.5px;
line-height: 1.55;
}
/* ═══════════ RESPONSIVE (blocks 2/3/4) ═══════════ */
@media (max-width: 900px) {
.begins-grid { grid-template-columns: 1fr; gap: 64px; }
.begins-visual { max-width: 440px; }
.features-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 680px) {
.manifest { padding: 100px 0; }
.manifest-title { font-size: clamp(2rem, 9vw, 2.8rem); }
.manifest-body { font-size: 1.02rem; }
.begins-text h2 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
.begins-tile { width: 140px; right: -4%; bottom: -8%; }
.begins-visual { max-width: 100%; }
.begins-claim { font-size: 1.08rem; }
.features .section-head h2 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
.feature-card { padding: 26px 22px; }
.feature-card h3 { font-size: 1.16rem; }
}
/* =========================================================
░░ BLOC 5 · SCIENCE / PHÉNOTYPE ░░
Fond vert encre, radar animé 12 axes + morph entre profils
========================================================= */
.science {
position: relative;
color: var(--paper);
background:
radial-gradient(1200px 900px at 15% 0%, rgba(192,138,46,.08), transparent 55%),
radial-gradient(1000px 800px at 95% 100%, rgba(13,91,63,.35), transparent 55%),
linear-gradient(180deg, var(--green-ink) 0%, var(--green-ink-2) 55%, var(--green-ink) 100%);
padding: clamp(140px, 16vw, 220px) 0;
overflow: hidden;
isolation: isolate;
}
/* Fine paper grain on dark bg (slightly more visible than on paper) */
.science::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: .07;
mix-blend-mode: overlay;
background-image:
url("data:image/svg+xml;utf8,");
}
/* Slow ambient light drift at top */
.science::after {
content: '';
position: absolute;
top: -20%;
left: 10%;
width: 60%;
height: 60%;
background: radial-gradient(closest-side, rgba(192,138,46,.14), transparent 70%);
filter: blur(40px);
pointer-events: none;
animation: driftSlow 28s var(--ease-in-out) infinite;
}
@keyframes driftSlow {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(8%, 4%, 0); }
}
.science-grid {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: clamp(48px, 7vw, 112px);
align-items: center;
}
/* ─── Left column · editorial ─── */
.science-text > * + * { margin-top: var(--sp-5); }
.science .eyebrow {
color: var(--gold-soft);
}
.science .eyebrow::before {
background: var(--gold-soft);
opacity: .7;
}
.science-title {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(2.2rem, 4.6vw, 3.8rem);
line-height: 1.08;
letter-spacing: -.022em;
color: var(--paper);
max-width: 18ch;
}
.science-title em {
font-style: italic;
font-weight: 400;
color: var(--gold-soft);
}
.science-lede {
font-size: clamp(1.05rem, 1.2vw, 1.22rem);
line-height: 1.6;
color: color-mix(in srgb, var(--paper) 85%, transparent);
max-width: 48ch;
}
.science-body {
font-size: 1.02rem;
line-height: 1.65;
color: color-mix(in srgb, var(--paper) 70%, transparent);
max-width: 48ch;
}
.science-body .highlight {
color: var(--paper);
font-weight: 600;
position: relative;
padding: 0 .08em;
}
.science-body .highlight::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -.06em;
height: 1px;
background: color-mix(in srgb, var(--gold-soft) 70%, transparent);
}
/* Stats meta-bar */
.science-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 2vw, 28px);
padding-top: var(--sp-6);
margin-top: var(--sp-6);
border-top: 1px solid color-mix(in srgb, var(--gold-soft) 28%, transparent);
}
.science-stat {
display: flex;
flex-direction: column;
gap: 6px;
}
.science-stat .stat-value {
font-family: var(--font-head);
font-size: clamp(1.6rem, 2.4vw, 2.1rem);
font-weight: 500;
color: var(--paper);
letter-spacing: -.018em;
font-variant-numeric: tabular-nums;
}
.science-stat .stat-label {
font-size: 12px;
font-weight: 500;
letter-spacing: .08em;
color: color-mix(in srgb, var(--paper) 60%, transparent);
text-transform: uppercase;
line-height: 1.4;
}
/* ─── Right column · radar stage ─── */
.science-stage {
position: relative;
aspect-ratio: 1 / 1;
max-width: 560px;
justify-self: center;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Soft halo behind radar */
.science-stage::before {
content: '';
position: absolute;
inset: 8%;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(192,138,46,.14), transparent 70%);
filter: blur(30px);
z-index: 0;
animation: breathe 7s var(--ease-in-out) infinite;
}
@keyframes breathe {
0%, 100% { transform: scale(1); opacity: .9; }
50% { transform: scale(1.06); opacity: 1; }
}
.radar-svg {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
overflow: visible;
}
/* Radar grid (concentric polygons + spokes) */
.radar-grid-line {
fill: none;
stroke: color-mix(in srgb, var(--paper) 14%, transparent);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.radar-spoke {
stroke: color-mix(in srgb, var(--paper) 10%, transparent);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
/* The phenotype shape (filled polygon that morphs) */
.radar-shape {
fill: color-mix(in srgb, var(--gold-soft) 22%, transparent);
stroke: var(--gold-soft);
stroke-width: 1.6;
stroke-linejoin: round;
filter: drop-shadow(0 0 12px rgba(216,167,77,.35));
transition: d 2.4s var(--ease-in-out),
points 2.4s var(--ease-in-out);
}
/* Points at each axis */
.radar-point {
fill: var(--paper);
transition: cx 2.4s var(--ease-in-out), cy 2.4s var(--ease-in-out);
}
/* Axis labels */
.radar-label {
font-family: var(--font-body);
font-size: 10.5px;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
fill: color-mix(in srgb, var(--paper) 70%, transparent);
text-anchor: middle;
dominant-baseline: middle;
}
/* Center profile label */
.radar-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
pointer-events: none;
}
.radar-center .profile-tag {
font-size: 10px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold-soft);
margin-bottom: 6px;
opacity: .85;
}
.radar-center .profile-name {
font-family: var(--font-head);
font-style: italic;
font-weight: 400;
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--paper);
letter-spacing: -.01em;
min-height: 1.4em;
max-width: 14ch;
line-height: 1.25;
transition: opacity .6s var(--ease);
}
/* Pulse dot at center */
.radar-center::before {
content: '';
position: absolute;
left: 50%;
top: -18px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold-soft);
transform: translateX(-50%);
box-shadow: 0 0 0 0 rgba(216,167,77,.7);
animation: pulseGold 2.6s var(--ease-out) infinite;
}
@keyframes pulseGold {
0% { box-shadow: 0 0 0 0 rgba(216,167,77,.6); }
70% { box-shadow: 0 0 0 14px rgba(216,167,77,0); }
100% { box-shadow: 0 0 0 0 rgba(216,167,77,0); }
}
/* Reduced motion: no morph, no pulse */
@media (prefers-reduced-motion: reduce) {
.radar-shape,
.radar-point { transition: none; }
.radar-center::before,
.science-stage::before,
.science::after { animation: none; }
}
/* =========================================================
░░ BLOC 6 · COMMUNAUTÉ ░░
Chiffres animés + témoignages patients
========================================================= */
.community {
padding: var(--sp-section) 0;
position: relative;
}
.community-lead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(48px, 6vw, 96px);
align-items: end;
margin-bottom: clamp(64px, 7vw, 96px);
}
.community-lead h2 {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(2.2rem, 4.8vw, 3.8rem);
line-height: 1.08;
letter-spacing: -.022em;
color: var(--ink);
max-width: 16ch;
}
.community-lead h2 em {
font-style: italic;
font-weight: 400;
color: var(--coral);
}
.community-counter {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
padding-left: clamp(0px, 2vw, 24px);
border-left: 2px solid var(--coral);
}
.community-counter .count-value {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(3rem, 6vw, 4.4rem);
line-height: 1;
letter-spacing: -.03em;
color: var(--ink);
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.community-counter .count-value .prefix {
font-size: .5em;
color: var(--coral);
font-weight: 600;
letter-spacing: 0;
font-style: italic;
margin-right: 2px;
align-self: center;
font-family: var(--font-body);
}
.community-counter .count-label {
font-size: var(--fs-lede);
color: var(--ink-soft);
max-width: 32ch;
line-height: 1.55;
}
/* Testimonials grid */
.testimonials {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.4vw, 32px);
}
.testimonial {
position: relative;
background: var(--paper);
border: 1px solid var(--rule-soft);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform var(--dur-base) var(--ease),
box-shadow var(--dur-base) var(--ease);
}
.testimonial:hover {
box-shadow: var(--shadow);
}
.testimonial-photo {
aspect-ratio: 5 / 4;
background: var(--paper-2);
position: relative;
overflow: hidden;
}
.testimonial-photo img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.02);
transition: transform 1.2s var(--ease-out);
}
.testimonial:hover .testimonial-photo img { /* no zoom */ }
/* Warm wash on photos to unify palette */
.testimonial-photo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(200,84,58,.06) 0%, transparent 40%, rgba(13,26,20,.04) 100%);
pointer-events: none;
}
.testimonial-body {
padding: clamp(22px, 2.4vw, 30px);
}
.testimonial-body blockquote {
font-family: var(--font-head);
font-style: italic;
font-weight: 400;
font-size: clamp(1.05rem, 1.3vw, 1.22rem);
line-height: 1.45;
color: var(--ink);
letter-spacing: -.008em;
}
.testimonial-body blockquote::before {
content: '“';
font-family: var(--font-head);
font-size: 2.2em;
line-height: 0;
color: var(--coral);
margin-right: 4px;
vertical-align: -.36em;
opacity: .7;
}
.testimonial-meta {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--rule-soft);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.testimonial-meta .meta-name {
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
}
.testimonial-meta .meta-context {
font-size: 12px;
color: var(--ink-muted);
letter-spacing: .04em;
}
/* =========================================================
░░ BLOC 7 · ACCÈS MÉDECINS ░░
Transition chaude → clinique · split photo + bénéfices
========================================================= */
.physicians {
padding: var(--sp-section) 0;
position: relative;
background:
radial-gradient(900px 500px at 0% 0%, rgba(13,91,63,.05), transparent 60%),
linear-gradient(180deg, transparent 0%, rgba(231,239,233,.45) 50%, transparent 100%);
}
.physicians-grid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: clamp(48px, 6vw, 96px);
align-items: center;
}
/* Left · photo column with ECG-like sparkline */
.physicians-visual {
position: relative;
aspect-ratio: 5 / 6;
max-width: 520px;
width: 100%;
justify-self: center;
}
.physicians-photo {
position: absolute;
inset: 0;
border-radius: var(--radius-lg);
overflow: hidden;
background: linear-gradient(135deg, #1a2b23, #0d5b3f 60%, #0a4731);
box-shadow: var(--shadow-lg);
}
/* Striped placeholder (user to replace w/ MainSoignant.png from asset pool) */
.physicians-photo::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(135deg,
rgba(255,255,255,.04) 0 14px,
rgba(255,255,255,.00) 14px 28px);
pointer-events: none;
}
.physicians-photo img {
width: 100%; height: 100%;
object-fit: cover;
}
/* Clinician card overlay */
.clinician-card {
position: absolute;
left: -8%;
bottom: 12%;
width: 260px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 16px 18px;
box-shadow: var(--shadow);
animation: floatY 8s ease-in-out infinite;
}
.clinician-card .cc-head {
display: flex;
align-items: center;
gap: 8px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--green);
margin-bottom: 10px;
}
.clinician-card .cc-head .cc-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent);
}
.clinician-card .cc-line {
font-size: 13.5px;
line-height: 1.45;
color: var(--ink-soft);
margin-bottom: 8px;
}
.clinician-card .cc-line strong { color: var(--ink); font-weight: 600; }
.clinician-card .cc-sparkline {
margin-top: 10px;
height: 34px;
}
.clinician-card .cc-sparkline svg {
width: 100%;
height: 100%;
overflow: visible;
}
.clinician-card .cc-sparkline path.spark-line {
fill: none;
stroke: var(--green);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: sparkDraw 2.2s var(--ease-out) .4s forwards;
}
@keyframes sparkDraw {
to { stroke-dashoffset: 0; }
}
/* Right · text column */
.physicians-text > * + * { margin-top: var(--sp-5); }
.physicians-text h2 {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(2.2rem, 4.6vw, 3.6rem);
line-height: 1.08;
letter-spacing: -.022em;
color: var(--ink);
max-width: 16ch;
}
.physicians-text h2 em {
font-style: italic;
font-weight: 400;
color: var(--green);
}
.physicians-text .sub {
font-size: var(--fs-lede);
line-height: 1.6;
color: var(--ink-soft);
max-width: 46ch;
}
.physicians-benefits {
display: grid;
gap: 12px;
margin-top: var(--sp-6);
}
.physicians-benefit {
position: relative;
padding: 22px 24px 22px 68px;
border-radius: var(--radius);
background: color-mix(in srgb, var(--paper) 75%, transparent);
border: 1px solid var(--rule-soft);
transition: transform var(--dur-base) var(--ease),
border-color var(--dur-base) var(--ease),
background var(--dur-base) var(--ease);
}
.physicians-benefit:hover {
border-color: color-mix(in srgb, var(--green) 30%, var(--rule));
background: var(--paper);
}
.physicians-benefit::before {
content: '';
position: absolute;
left: 24px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--green-50);
border: 1px solid color-mix(in srgb, var(--green) 20%, transparent);
}
.physicians-benefit::after {
content: '';
position: absolute;
left: 32px;
top: 50%;
width: 10px;
height: 6px;
border-left: 1.6px solid var(--green);
border-bottom: 1.6px solid var(--green);
transform: translateY(-70%) rotate(-45deg);
}
.physicians-benefit h4 {
font-family: var(--font-head);
font-weight: 500;
font-size: 1.18rem;
line-height: 1.25;
color: var(--ink);
margin-bottom: 4px;
letter-spacing: -.012em;
}
.physicians-benefit p {
font-size: 15px;
line-height: 1.5;
color: var(--ink-soft);
}
.physicians-text .cta-row {
padding-top: var(--sp-4);
}
/* =========================================================
░░ BLOC 8 · TRUST BAR (simple, slightly larger) ░░
========================================================= */
/* =========================================================
░░ TRUST BAR ░░ - sober, compact, harmonized across pages
========================================================= */
.trust-bar {
padding: clamp(48px, 5vw, 72px) 0;
background: transparent;
border-top: 1px solid var(--rule-soft);
border-bottom: 1px solid var(--rule-soft);
}
.trust-bar .eyebrow-center {
text-align: center;
display: block;
margin: 0 auto 28px;
font-size: 11px;
letter-spacing: .22em;
color: var(--ink-muted);
}
.trust-bar .eyebrow-center::before { display: none; }
/* New compact horizontal row of trust chips */
.trust-row {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 10px 14px;
}
.trust-chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 100px;
transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.trust-chip:hover {
border-color: color-mix(in srgb, var(--green) 35%, var(--rule));
}
.trust-chip svg {
flex: 0 0 auto;
width: 16px;
height: 16px;
color: var(--green);
}
.trust-chip .t-label {
font-family: var(--font-head);
font-weight: 500;
font-size: 14px;
color: var(--ink);
letter-spacing: -.005em;
line-height: 1;
}
.trust-chip .t-status {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-muted);
font-style: normal;
}
.trust-chip .t-status::before {
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
background: currentColor;
opacity: .55;
}
/* Legacy fallback (kept until all pages migrate) */
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(14px, 2vw, 28px);
align-items: stretch;
}
.trust-cell {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 26px 16px;
border-right: 1px solid var(--rule-soft);
transition: transform var(--dur-base) var(--ease);
}
.trust-cell:last-child { border-right: none; }
.trust-cell:hover { background: color-mix(in srgb, var(--green-50) 40%, transparent); }
.trust-icon {
width: 56px;
height: 56px;
color: var(--green);
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.trust-icon img { width: 100%; height: 100%; }
.trust-cell .t-label {
font-family: var(--font-head);
font-weight: 500;
font-size: 1.15rem;
color: var(--ink);
letter-spacing: -.01em;
margin-bottom: 6px;
line-height: 1.25;
}
.trust-cell .t-status {
font-size: 12px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-muted);
}
/* =========================================================
░░ BLOC 9 · CTA FINAL ░░
Fond vert encre, gradient radial qui suit curseur
========================================================= */
.final-cta {
position: relative;
isolation: isolate;
color: var(--paper);
padding: clamp(80px, 9.5vw, 130px) 0;
overflow: hidden;
background:
radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(192,138,46,.14) 0%, transparent 45%),
radial-gradient(1200px 800px at 80% 100%, rgba(13,91,63,.4), transparent 50%),
linear-gradient(180deg, var(--green-ink) 0%, var(--green-ink-2) 100%);
transition: background var(--dur-slow) var(--ease);
}
.final-cta::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: .06;
mix-blend-mode: overlay;
background-image:
url("data:image/svg+xml;utf8,");
}
/* Soft light beam top */
.final-cta::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 2px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold-soft) 55%, transparent), transparent);
opacity: .55;
}
.final-cta .container {
text-align: center;
max-width: 900px;
}
.final-cta .eyebrow {
color: var(--gold-soft);
justify-content: center;
display: inline-flex;
}
.final-cta .eyebrow::before {
background: var(--gold-soft);
opacity: .6;
}
.final-cta h2 {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(2.6rem, 6vw, 4.8rem);
line-height: 1.06;
letter-spacing: -.028em;
color: var(--paper);
margin: var(--sp-5) auto var(--sp-5);
max-width: 18ch;
}
.final-cta h2 em {
font-style: italic;
font-weight: 400;
color: var(--gold-soft);
}
.final-cta p {
font-size: clamp(1.05rem, 1.25vw, 1.22rem);
line-height: 1.6;
color: color-mix(in srgb, var(--paper) 82%, transparent);
max-width: 52ch;
margin: 0 auto var(--sp-7);
}
.final-cta .btn-light {
background: var(--paper);
color: var(--ink);
border: none;
padding: 18px 32px;
font-size: 16px;
font-weight: 600;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 12px;
box-shadow: 0 20px 50px -20px rgba(0,0,0,.5),
0 0 0 0 rgba(216,167,77,.4);
transition: transform var(--dur-base) var(--ease),
box-shadow var(--dur-base) var(--ease);
}
.final-cta .btn-light:hover {
box-shadow: 0 28px 60px -20px rgba(0,0,0,.55),
0 0 0 8px rgba(216,167,77,.15);
}
.final-cta .btn-light .arrow {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2;
transition: transform var(--dur-base) var(--ease);
}
.final-cta .btn-light:hover .arrow {
transform: translateX(4px);
}
.final-cta-supporting {
margin-top: var(--sp-7);
font-size: 13px;
letter-spacing: .06em;
color: color-mix(in srgb, var(--paper) 50%, transparent);
}
/* ─── SEO FAQ · visible, discreet search-intent support ─── */
.seo-faq {
position: relative;
background:
radial-gradient(1100px 620px at 8% -5%, color-mix(in srgb, var(--brand-green) 12%, transparent) 0%, transparent 55%),
radial-gradient(900px 520px at 96% 100%, color-mix(in srgb, var(--coral) 8%, transparent) 0%, transparent 58%),
linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
border-top: 1px solid var(--rule-soft);
overflow: hidden;
}
.seo-faq::before {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--brand-green) 4%, transparent) 0, transparent 1px);
background-size: 22px 22px;
opacity: .35;
pointer-events: none;
}
.seo-faq > .container { position: relative; z-index: 1; }
.seo-faq-head {
max-width: 780px;
margin: 0 auto clamp(40px, 5vw, 64px);
text-align: center;
}
.seo-faq-head > * + * { margin-top: var(--sp-4); }
.seo-faq-head h2 {
font-size: clamp(2.1rem, 4.4vw, 3.6rem);
letter-spacing: -.02em;
}
.seo-faq-head p {
font-size: 1.1rem;
line-height: 1.62;
color: var(--ink-soft);
}
.seo-faq-divider {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: var(--sp-5);
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-muted);
}
.seo-faq-divider::before,
.seo-faq-divider::after {
content: "";
width: 36px; height: 1px;
background: var(--rule);
}
.seo-faq-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(18px, 2vw, 28px);
}
/* Topic card */
.seo-faq-card {
position: relative;
padding: clamp(26px, 2.4vw, 32px);
border: 1px solid var(--rule-soft);
border-radius: 22px;
background: color-mix(in srgb, var(--paper) 92%, transparent);
backdrop-filter: blur(6px);
box-shadow:
0 1px 0 rgba(255,255,255,.6) inset,
0 28px 50px -36px rgba(13, 26, 20, .22);
display: flex;
flex-direction: column;
gap: 14px;
transition: transform var(--dur-base) var(--ease),
box-shadow var(--dur-base) var(--ease),
border-color var(--dur-base) var(--ease);
}
.seo-faq-card::before {
content: "";
position: absolute;
top: 0; left: 22px; right: 22px; height: 3px;
background: var(--accent, var(--brand-green));
border-radius: 0 0 3px 3px;
opacity: .85;
transition: left var(--dur-base) var(--ease), right var(--dur-base) var(--ease);
}
.seo-faq-card:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--accent, var(--brand-green)) 28%, var(--rule-soft));
box-shadow:
0 1px 0 rgba(255,255,255,.6) inset,
0 36px 64px -32px color-mix(in srgb, var(--accent, var(--brand-green)) 32%, rgba(13, 26, 20, .28));
}
.seo-faq-card:hover::before { left: 0; right: 0; }
.sfc-head {
display: flex; align-items: center; gap: 12px;
margin-bottom: 4px;
}
.sfc-icon {
width: 38px; height: 38px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--accent, var(--brand-green)) 14%, transparent);
color: var(--accent, var(--brand-green));
flex-shrink: 0;
}
.sfc-icon svg {
width: 20px; height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.sfc-num {
font-family: var(--font-head);
font-size: 13px;
font-weight: 600;
letter-spacing: .12em;
color: var(--ink-muted);
font-style: italic;
}
.seo-faq-card h3 {
font-family: var(--font-head);
font-size: 1.18rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: -.005em;
color: var(--ink);
}
.seo-faq-card p {
font-size: .96rem;
line-height: 1.62;
color: var(--ink-soft);
}
/* Topic accent colors */
.seo-faq-card[data-topic="overview"] { --accent: var(--brand-green); }
.seo-faq-card[data-topic="treatment"] { --accent: var(--coral); }
.seo-faq-card[data-topic="medical"] { --accent: var(--sky); }
.seo-faq-card[data-topic="data"] { --accent: var(--gold); }
.seo-faq-note {
max-width: 860px;
margin: clamp(34px, 4vw, 48px) auto 0;
padding: 18px 24px;
border-left: 2px solid color-mix(in srgb, var(--brand-green) 35%, transparent);
background: color-mix(in srgb, var(--paper) 60%, transparent);
border-radius: 0 12px 12px 0;
text-align: left;
font-size: .94rem;
line-height: 1.62;
color: var(--ink-muted);
font-style: italic;
}
/* =========================================================
░░ RESPONSIVE · BLOCS 5-9 ░░
========================================================= */
@media (max-width: 1024px) {
.science-grid { grid-template-columns: 1fr; gap: 64px; }
.science-stage { max-width: 460px; }
.community-lead { grid-template-columns: 1fr; gap: 32px; align-items: start; }
.physicians-grid { grid-template-columns: 1fr; gap: 64px; }
.physicians-visual { max-width: 440px; }
.testimonials { grid-template-columns: repeat(2, 1fr); }
.trust-grid { grid-template-columns: repeat(3, 1fr); }
.trust-cell:nth-child(3) { border-right: none; }
.seo-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.science { padding: 100px 0; }
.science-title { font-size: clamp(2rem, 9vw, 2.6rem); }
.science-stats { grid-template-columns: 1fr; gap: 18px; padding-top: var(--sp-5); margin-top: var(--sp-5); }
.science-stat { flex-direction: row; align-items: baseline; gap: 14px; border-bottom: 1px solid color-mix(in srgb, var(--gold-soft) 14%, transparent); padding-bottom: 14px; }
.science-stat:last-child { border-bottom: none; }
.science-stat .stat-value { font-size: 1.8rem; }
.science-stage { max-width: 360px; }
.radar-label { font-size: 9px; }
.community-lead h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
.community-counter .count-value { font-size: 2.8rem; }
.testimonials { grid-template-columns: 1fr; gap: 16px; }
.physicians-text h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
.clinician-card { width: 220px; left: -4%; bottom: 8%; }
.clinician-card .cc-line { font-size: 12.5px; }
.physicians-benefit { padding: 18px 20px 18px 60px; }
.physicians-benefit::before { left: 18px; width: 24px; height: 24px; }
.physicians-benefit::after { left: 25px; }
.physicians-benefit h4 { font-size: 1.05rem; }
.trust-bar { padding: 64px 0; }
.trust-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.trust-cell { border-right: none !important; border-bottom: 1px solid var(--rule-soft); padding: 22px 12px; }
.trust-cell:nth-last-child(-n+2) { border-bottom: none; }
.trust-icon { width: 44px; height: 44px; margin-bottom: 12px; }
.trust-cell .t-label { font-size: 1.02rem; }
.final-cta { padding: 100px 0; }
.final-cta h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
.final-cta .btn-light { padding: 15px 24px; font-size: 15px; width: 100%; justify-content: center; }
.seo-faq-grid { grid-template-columns: 1fr; }
.seo-faq-head { text-align: left; }
.seo-faq-note { text-align: left; }
}
/* ═══════════ HERO · RESPONSIVE ═══════════ */
@media (max-width: 1180px) {
.hero-grid { grid-template-columns: 1fr; gap: 64px; }
.hero-visual { max-width: 520px; aspect-ratio: 4/5; }
.hero-card-notif { left: -7%; }
.hero-card-quote { right: -7%; }
.hero-card-checkin,
.hero-card-reminder { right: -6%; }
.hero-card-coach,
.hero-card-plan,
.hero-card-steps { left: -6%; }
}
@media (max-width: 680px) {
.hero { padding-top: 120px; }
.hero-title { font-size: clamp(2.2rem, 10vw, 3.2rem); }
.hero-push { font-size: 1rem; padding-left: 14px; }
.hero-visual { max-width: 420px; }
.hero-card { padding: 13px 15px; }
.hero-card-notif { width: 240px; top: -7%; left: -4%; }
.hero-card-quote { width: 240px; bottom: -5%; right: -4%; }
.hero-card-checkin,
.hero-card-plan,
.hero-card-steps { width: 220px; }
.hero-card-coach,
.hero-card-reminder { width: 235px; }
.hero-card-checkin { top: -7%; right: -3%; }
.hero-card-coach { left: -4%; bottom: -5%; }
.hero-card-plan { top: -7%; left: -4%; }
.hero-slide--kitchen .hero-card-quote { right: -3%; bottom: -4%; }
.hero-card-steps { left: -4%; bottom: -5%; }
.hero-card-reminder { top: -7%; right: -4%; }
.hero-card-checkin strong,
.hero-card-plan strong,
.hero-card-steps strong { font-size: 1.1rem; }
.notif-body { font-size: 12.5px; }
.hero-card-quote p { font-size: .94rem; }
.hero-trust { gap: 14px 18px; }
}
@media (max-width: 520px) {
.hero-text {
max-width: calc(100vw - 44px);
min-width: 0;
}
.hero-title {
font-size: clamp(1.85rem, 8.4vw, 2.25rem);
}
.hero-cta-group {
gap: 12px;
}
.hero-cta-group .btn-primary,
.hero-cta-group .btn-soft {
min-height: 48px;
padding-inline: 18px;
}
.hero-cta-group .cta-meta {
flex-basis: 100%;
margin-left: 8px;
}
.hero-trust {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.hero-trust .trust-item {
min-width: 0;
}
}
/* ═══════════ ALTERNATING BG ═══════════ */
/* ALTERNATING BG */
.manifest {
background: linear-gradient(180deg, transparent 0%, var(--paper-2) 30%, var(--paper-2) 100%);
padding-top: clamp(80px, 10vw, 140px);
padding-bottom: clamp(80px, 10vw, 140px);
margin-bottom: 0;
}
.begins {
background: var(--paper);
padding-top: clamp(80px, 10vw, 140px);
padding-bottom: clamp(80px, 10vw, 140px);
}
.features {
background:
radial-gradient(900px 500px at 50% 0%, color-mix(in srgb, var(--coral) 8%, transparent) 0%, transparent 55%),
var(--paper-2);
padding-top: clamp(80px, 10vw, 140px);
padding-bottom: clamp(80px, 10vw, 140px);
}
.community {
background:
radial-gradient(1000px 600px at 85% 20%, color-mix(in srgb, var(--coral) 10%, transparent) 0%, transparent 55%),
radial-gradient(800px 500px at 10% 90%, color-mix(in srgb, var(--gold-soft) 10%, transparent) 0%, transparent 55%),
var(--paper);
padding-top: clamp(80px, 10vw, 140px);
padding-bottom: clamp(80px, 10vw, 140px);
}
.trust-bar { margin-top: 0; margin-bottom: 0; }
.site-footer { margin-top: 0; }
/* ═══════════════════════════════════════════════════════════
v4 ADDITIONS - patient-warm, photo-led, vibrant
═══════════════════════════════════════════════════════════ */
/* ─── Double CTA group (Hero) ─── */
.hero-cta-group {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.hero-cta-group .btn-primary,
.hero-cta-group .btn-soft {
min-height: 52px;
}
.hero-cta-group .cta-meta {
font-size: .82rem;
color: var(--ink-soft);
margin-left: 4px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.hero-cta-group .cta-meta::before {
content: '';
display: inline-block;
width: 8px; height: 8px;
background: var(--brand-green);
border-radius: 50%;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-green) 22%, transparent);
}
/* ─── HERO MEDIA · warmer collage frame ─── */
.hero-media-v4 {
position: relative;
width: 100%;
max-width: 540px;
aspect-ratio: 4/5;
border-radius: 32px;
overflow: hidden;
background: var(--coral-50);
box-shadow: 0 40px 80px -30px rgba(20, 30, 25, .25);
}
.hero-media-v4 img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.hero-media-v4::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--coral-50) 50%, transparent) 100%);
pointer-events: none;
}
.hero-media-tag {
position: absolute;
bottom: 24px; left: 24px;
background: rgba(255,253,248,.94);
backdrop-filter: blur(8px);
padding: 12px 18px;
border-radius: 999px;
font-family: var(--font-body);
font-size: .85rem;
font-weight: 600;
color: var(--ink);
display: inline-flex; align-items: center; gap: 10px;
box-shadow: 0 8px 24px -8px rgba(0,0,0,.12);
z-index: 2;
}
.hero-media-tag::before {
content: '';
width: 8px; height: 8px;
background: var(--coral);
border-radius: 50%;
animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.6); opacity: .35; }
}
/* ─── BEGINS · dynamic 3-screen app mosaic ─── */
.begins-v4 {
background:
radial-gradient(900px 500px at 80% 10%, color-mix(in srgb, var(--brand-green) 12%, transparent) 0%, transparent 55%),
radial-gradient(700px 500px at 10% 90%, color-mix(in srgb, var(--green) 8%, transparent) 0%, transparent 55%),
var(--paper-2);
padding-top: clamp(100px, 12vw, 160px);
padding-bottom: clamp(100px, 12vw, 160px);
overflow: hidden;
}
.begins-grid {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: clamp(48px, 7vw, 100px);
align-items: center;
}
.begins-text > * + * { margin-top: var(--sp-5); }
.begins-text h2 {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(2.2rem, 4.2vw, 3.6rem);
line-height: 1.08;
letter-spacing: -.022em;
color: var(--ink);
}
.begins-text h2 em {
font-style: italic; font-weight: 400; color: var(--brand-green);
}
.begins-text p {
font-size: 1.12rem;
line-height: 1.6;
color: var(--ink-soft);
max-width: 46ch;
}
.begins-cta {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-body);
font-size: .95rem;
font-weight: 600;
color: var(--brand-green);
text-decoration: none;
padding-bottom: 4px;
border-bottom: 2px solid color-mix(in srgb, var(--brand-green) 35%, transparent);
transition: gap .25s var(--ease-out), border-color .25s var(--ease-out);
}
.begins-cta:hover { gap: 14px; border-color: var(--brand-green); }
/* App-pair · two phone screens side by side (sober, no parallax) */
.app-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(14px, 1.6vw, 22px);
align-items: stretch;
width: 100%;
max-width: 540px;
justify-self: center;
}
.app-screen {
aspect-ratio: 9/19;
border-radius: 26px;
overflow: hidden;
background: #fff;
border: 7px solid #1a1a1a;
box-shadow: 0 24px 50px -25px rgba(20, 30, 25, .25);
}
.app-screen img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* Placeholder variant for app screens - inherits from global .is-placeholder
(defined in v20 polish block), but tightened for the phone frame. */
.app-screen.is-placeholder {
border: 7px solid #1a1a1a;
}
.app-screen.is-placeholder .ph-label {
font-size: clamp(1.1rem, 1.6vw, 1.5rem);
}
@media (max-width: 880px) {
.begins-grid { grid-template-columns: 1fr; }
.app-pair { max-width: 420px; }
}
@media (max-width: 480px) {
.app-pair { gap: 12px; }
}
/* ─── FEATURES · alternated photo + card ─── */
.features-v4 {
background:
radial-gradient(1000px 500px at 50% 0%, color-mix(in srgb, var(--brand-green) 10%, transparent) 0%, transparent 55%),
var(--paper);
padding-top: clamp(100px, 12vw, 160px);
padding-bottom: clamp(100px, 12vw, 160px);
}
.features-v4 .section-head {
text-align: center;
margin: 0 auto clamp(64px, 7vw, 96px);
max-width: 720px;
}
.features-v4 .section-head h2 {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(2rem, 3.6vw, 3.2rem);
line-height: 1.08;
letter-spacing: -.02em;
color: var(--ink);
margin-top: 14px;
}
.features-v4 .section-head h2 em {
font-style: italic; color: var(--brand-green); font-weight: 400;
}
.features-v4 .section-head p {
font-size: 1.1rem;
color: var(--ink-soft);
margin-top: 18px;
line-height: 1.55;
}
.feature-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 88px);
align-items: center;
margin-top: clamp(72px, 9vw, 120px);
}
.feature-row:first-of-type { margin-top: 0; }
.feature-row.reverse .feature-text { order: 2; }
.feature-text > * + * { margin-top: var(--sp-3); }
.feature-text .feature-num {
font-family: var(--font-head);
font-style: italic;
font-size: 2.2rem;
color: var(--brand-green);
font-weight: 400;
line-height: 1;
}
.feature-text h3 {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
line-height: 1.15;
color: var(--ink);
letter-spacing: -.015em;
}
.feature-text p {
font-size: 1.05rem;
line-height: 1.6;
color: var(--ink-soft);
max-width: 44ch;
}
.feature-text ul {
list-style: none;
padding: 0;
margin-top: 18px;
}
.feature-text ul li {
font-size: .98rem;
color: var(--ink);
padding: 10px 0 10px 26px;
position: relative;
border-bottom: 1px dashed color-mix(in srgb, var(--ink) 12%, transparent);
}
.feature-text ul li:last-child { border-bottom: none; }
.feature-text ul li::before {
content: '';
position: absolute;
left: 0; top: 18px;
width: 14px; height: 14px;
background: var(--brand-green);
border-radius: 50%;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-green) 18%, transparent);
}
.feature-photo {
position: relative;
border-radius: 28px;
overflow: hidden;
aspect-ratio: 5/4;
box-shadow: 0 30px 60px -25px rgba(20, 30, 25, .25);
background: var(--paper-2);
}
.feature-photo img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .9s var(--ease-out);
}
.feature-photo:hover img { transform: scale(1.04); }
.feature-photo .photo-tag {
position: absolute;
bottom: 18px; left: 18px;
background: rgba(255,253,248,.95);
backdrop-filter: blur(8px);
padding: 8px 14px;
border-radius: 999px;
font-size: .78rem;
font-weight: 600;
color: var(--ink);
letter-spacing: .04em;
text-transform: uppercase;
}
@media (max-width: 880px) {
.feature-row { grid-template-columns: 1fr; }
.feature-row.reverse .feature-text { order: 0; }
}
/* ─── OUTCOMES · "Support changes outcomes" (replaces science on home) ─── */
.outcomes {
background:
radial-gradient(900px 500px at 20% 10%, color-mix(in srgb, var(--brand-green) 12%, transparent) 0%, transparent 55%),
radial-gradient(800px 500px at 90% 90%, color-mix(in srgb, var(--green) 8%, transparent) 0%, transparent 55%),
var(--paper-2);
padding-top: clamp(100px, 12vw, 160px);
padding-bottom: clamp(100px, 12vw, 160px);
}
.outcomes .section-head {
text-align: center;
margin: 0 auto clamp(56px, 7vw, 88px);
max-width: 760px;
}
.outcomes .section-head h2 {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(2.2rem, 4vw, 3.4rem);
line-height: 1.08;
letter-spacing: -.022em;
margin-top: 14px;
color: var(--ink);
}
.outcomes .section-head h2 em { color: var(--brand-green); font-style: italic; font-weight: 400; }
.outcomes .section-head p {
font-size: 1.1rem;
color: var(--ink-soft);
margin-top: 16px;
line-height: 1.55;
}
.outcomes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.4vw, 32px);
}
.outcome-card {
background: var(--paper);
border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
border-radius: 24px;
padding: clamp(28px, 3vw, 40px);
text-align: left;
transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.outcome-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 50px -25px rgba(20, 30, 25, .2);
}
.outcome-stat {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(2.8rem, 5vw, 4rem);
line-height: 1;
letter-spacing: -.025em;
color: var(--brand-green);
margin-bottom: 16px;
}
.outcome-stat .unit {
font-size: .5em;
color: var(--ink-muted);
font-style: italic;
margin-left: 4px;
}
.outcome-card h3 {
font-family: var(--font-head);
font-weight: 500;
font-size: 1.2rem;
line-height: 1.25;
color: var(--ink);
margin-bottom: 10px;
}
.outcome-card p {
font-size: .96rem;
color: var(--ink-soft);
line-height: 1.55;
}
.outcome-card cite {
display: block;
margin-top: 14px;
font-size: .8rem;
color: var(--ink-muted);
font-style: italic;
}
.outcomes-foot {
text-align: center;
margin-top: clamp(40px, 5vw, 56px);
font-size: .92rem;
color: var(--ink-muted);
font-style: italic;
}
@media (max-width: 880px) {
.outcomes-grid { grid-template-columns: 1fr; }
}
/* ─── COMMUNITY · vibrant 100k+ ─── */
.community-v4 {
background:
radial-gradient(1100px 600px at 80% 20%, color-mix(in srgb, var(--brand-green) 14%, transparent) 0%, transparent 55%),
radial-gradient(900px 600px at 10% 90%, color-mix(in srgb, var(--green) 10%, transparent) 0%, transparent 55%),
var(--paper);
padding-top: clamp(100px, 12vw, 160px);
padding-bottom: clamp(100px, 12vw, 160px);
overflow: hidden;
}
.community-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(48px, 6vw, 88px);
align-items: center;
}
.community-text > * + * { margin-top: var(--sp-5); }
.community-text h2 {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(2.4rem, 4.6vw, 4rem);
line-height: 1.04;
letter-spacing: -.025em;
color: var(--ink);
}
.community-text h2 em { color: var(--brand-green); font-style: italic; font-weight: 400; }
.community-text p {
font-size: 1.12rem;
color: var(--ink-soft);
line-height: 1.6;
max-width: 46ch;
}
.community-bignum {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(4.5rem, 9vw, 7.5rem);
line-height: .95;
letter-spacing: -.04em;
color: var(--brand-green);
display: inline-block;
}
.community-bignum .plus {
font-size: .55em;
color: var(--coral);
vertical-align: top;
margin-left: 4px;
}
.community-sub {
display: block;
font-family: var(--font-body);
font-size: 1.05rem;
color: var(--ink-muted);
margin-top: 8px;
font-style: italic;
}
.community-channels {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.community-channels .chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: var(--paper);
border: 1.5px solid color-mix(in srgb, var(--brand-green) 28%, transparent);
border-radius: 999px;
font-size: .92rem;
font-weight: 600;
color: var(--ink);
}
.community-channels .chip strong { color: var(--brand-green); }
.community-mosaic {
position: relative;
height: clamp(420px, 56vw, 580px);
}
.community-mosaic .photo {
position: absolute;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 30px 60px -25px rgba(20, 30, 25, .3);
}
.community-mosaic .photo img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.community-mosaic .photo-1 {
width: 58%; aspect-ratio: 4/5;
top: 0; right: 0; z-index: 1;
}
.community-mosaic .photo-2 {
width: 48%; aspect-ratio: 1/1;
bottom: 0; left: 0; z-index: 3;
}
.community-mosaic .photo-3 {
width: 36%; aspect-ratio: 1/1;
bottom: 18%; right: 4%; z-index: 4;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 12px 30px -10px rgba(20,30,25,.25);
}
.community-mosaic .badge-bubble {
position: absolute;
bottom: 10%;
right: 38%;
background: var(--brand-green);
color: #fff;
padding: 12px 16px;
border-radius: 16px;
font-family: var(--font-body);
font-size: .82rem;
font-weight: 600;
letter-spacing: .02em;
z-index: 5;
box-shadow: 0 14px 30px -10px rgba(0, 150, 70, .5);
}
.community-mosaic .badge-bubble::after {
content: '';
position: absolute;
bottom: -6px; left: 22px;
width: 12px; height: 12px;
background: var(--brand-green);
transform: rotate(45deg);
}
@media (max-width: 880px) {
.community-grid { grid-template-columns: 1fr; }
.community-mosaic { max-width: 460px; margin: 0 auto; }
}
/* ─── TEAM STRIP · stronger as a team ─── */
.team-strip {
background: var(--green-ink);
color: #f7efd9;
padding-top: clamp(120px, 14vw, 180px);
padding-bottom: clamp(120px, 14vw, 180px);
position: relative;
overflow: hidden;
}
.team-strip::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(900px 500px at 70% 30%, color-mix(in srgb, var(--gold) 30%, transparent) 0%, transparent 55%),
radial-gradient(700px 500px at 20% 80%, color-mix(in srgb, var(--coral) 22%, transparent) 0%, transparent 55%);
opacity: .4;
pointer-events: none;
}
.team-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(48px, 6vw, 96px);
align-items: center;
position: relative;
}
.team-photo {
position: relative;
border-radius: 28px;
overflow: hidden;
aspect-ratio: 4/5;
box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
}
.team-photo img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.team-text > * + * { margin-top: var(--sp-5); }
.team-text .eyebrow { color: var(--gold-soft); }
.team-text h2 {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(2.2rem, 4.2vw, 3.6rem);
line-height: 1.06;
letter-spacing: -.022em;
color: #f7efd9;
}
.team-text h2 em { color: var(--gold-soft); font-style: italic; font-weight: 400; }
.team-text p {
font-size: 1.1rem;
line-height: 1.65;
color: color-mix(in srgb, #f7efd9 88%, transparent);
max-width: 46ch;
}
.team-text .team-quote {
font-family: var(--font-head);
font-style: italic;
font-size: 1.25rem;
line-height: 1.45;
color: #f7efd9;
border-left: 3px solid var(--gold);
padding-left: 18px;
max-width: 44ch;
}
.team-cta {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-body);
font-size: .95rem;
font-weight: 600;
color: var(--gold-soft);
text-decoration: none;
padding-bottom: 4px;
border-bottom: 2px solid color-mix(in srgb, var(--gold-soft) 40%, transparent);
transition: gap .25s var(--ease-out);
}
.team-cta:hover { gap: 14px; }
@media (max-width: 880px) {
.team-grid { grid-template-columns: 1fr; }
}
/* ─── Compact final CTA (replaces oversized) ─── */
.cta-compact {
background:
radial-gradient(900px 500px at 50% 50%, color-mix(in srgb, var(--coral) 16%, transparent) 0%, transparent 60%),
var(--paper-2);
padding-top: clamp(80px, 9vw, 120px);
padding-bottom: clamp(80px, 9vw, 120px);
text-align: center;
}
.cta-compact h2 {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(1.8rem, 3.2vw, 2.6rem);
line-height: 1.15;
color: var(--ink);
letter-spacing: -.018em;
max-width: 22ch;
margin: 0 auto 12px;
}
.cta-compact h2 em { color: var(--coral); font-style: italic; font-weight: 400; }
.cta-compact p {
font-size: 1.05rem;
color: var(--ink-soft);
max-width: 50ch;
margin: 0 auto 28px;
}
.cta-compact .cta-row {
display: inline-flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
/* =========================================================
░░ v20 · Home polish · 2026-04-21
- Hero: push text down/in, breathe more
- Section spacing: tighter
- Trust bar: smaller
- NEW: voices band (separator)
- NEW: outcomes-dark (mission editorial w/ stats card)
- NEW: facebook community cards
- NEW: image placeholders (numbered, with size hint)
- Features rewamped (overlays + collage + accents)
========================================================= */
/* ─── Hero · breathe more ─── */
.hero { padding-top: clamp(150px, 17vh, 200px); }
.hero-text { padding-top: clamp(8px, 2vw, 28px); padding-left: clamp(0px, 1.4vw, 18px); }
/* Hero CTA · tighter row */
.hero-cta-group { padding-top: var(--sp-2); }
/* ─── Tighter global section rhythm ─── */
.manifest { padding-top: clamp(80px, 9vw, 120px); padding-bottom: clamp(80px, 9vw, 120px); }
.begins-v4 { padding-top: clamp(72px, 9vw, 110px); padding-bottom: clamp(72px, 9vw, 110px); }
.features-v4 { padding-top: clamp(80px, 10vw, 130px); padding-bottom: clamp(80px, 10vw, 130px); }
.outcomes-dark { padding-top: clamp(84px, 10vw, 130px); padding-bottom: clamp(84px, 10vw, 130px); }
.community-v4 { padding-top: clamp(80px, 10vw, 130px); padding-bottom: clamp(80px, 10vw, 130px); }
.team-strip { padding-top: clamp(96px, 11vw, 140px); padding-bottom: clamp(96px, 11vw, 140px); }
.final-cta { padding-top: clamp(80px, 9vw, 120px); padding-bottom: clamp(80px, 9vw, 120px); }
/* Tighten margin between feature rows */
.features-v4 .feature-row { margin-top: clamp(56px, 7vw, 96px); }
/* =========================================================
░░ PLACEHOLDER (image scaffold, numbered + sized) ░░
========================================================= */
.is-placeholder {
position: relative;
background:
repeating-linear-gradient(45deg,
color-mix(in srgb, var(--brand-green) 5%, var(--paper-2)) 0 14px,
color-mix(in srgb, var(--brand-green) 9%, var(--paper-2)) 14px 28px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 10px;
color: var(--ink-soft);
border: 1.5px dashed color-mix(in srgb, var(--brand-green) 40%, transparent);
overflow: hidden;
}
.is-placeholder::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--brand-green) 12%, transparent) 0%, transparent 55%),
radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--coral) 8%, transparent) 0%, transparent 55%);
pointer-events: none;
}
.is-placeholder .ph-label,
.is-placeholder .ph-num {
position: relative;
z-index: 1;
font-family: var(--font-head);
font-style: italic;
font-weight: 500;
font-size: clamp(1.3rem, 2.4vw, 1.9rem);
color: var(--brand-green);
letter-spacing: -.01em;
background: color-mix(in srgb, var(--paper) 90%, transparent);
padding: 4px 14px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--brand-green) 25%, transparent);
}
.is-placeholder .ph-hint,
.is-placeholder .ph-meta {
position: relative;
z-index: 1;
font-family: var(--font-body);
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-muted);
line-height: 1.45;
font-weight: 600;
}
/* =========================================================
░░ VOICES BAND (separator between manifest and begins) ░░
========================================================= */
.voices-band {
background:
linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
padding: clamp(60px, 8vw, 110px) 0;
border-top: 1px solid var(--rule-soft);
border-bottom: 1px solid var(--rule-soft);
overflow: hidden;
}
.voices-band .container {
min-height: clamp(220px, 20vw, 300px);
}
.voices-constellation {
position: absolute;
inset: -24px 0;
pointer-events: none;
z-index: 0;
}
.const-avatar {
position: absolute;
width: var(--size, 54px);
height: var(--size, 54px);
border-radius: 50%;
overflow: hidden;
display: block;
border: 2px solid color-mix(in srgb, var(--paper) 88%, transparent);
background-color: var(--paper-2);
background-image: var(--avatar-img);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
box-shadow: 0 18px 42px -26px rgba(13, 26, 20, .5);
opacity: var(--alpha, .94);
transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
}
.const-avatar::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background:
radial-gradient(circle at 35% 18%, rgba(255,255,255,.22), transparent 42%),
linear-gradient(180deg, transparent 55%, rgba(13,26,20,.08));
}
.const-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
}
.const-avatar.ca-1 { --size: 72px; left: 7%; top: 45%; --tilt: -5deg; }
.const-avatar.ca-2 { --size: 58px; left: 17%; top: 72%; --tilt: 4deg; --alpha: .92; }
.const-avatar.ca-3 { --size: 62px; left: 28%; top: 34%; --tilt: 2deg; }
.const-avatar.ca-4 { --size: 54px; left: 29%; top: 82%; --tilt: -4deg; --alpha: .92; }
.const-avatar.ca-5 { --size: 60px; left: 72%; top: 34%; --tilt: 5deg; --alpha: .92; }
.const-avatar.ca-6 { --size: 66px; left: 72%; top: 82%; --tilt: -3deg; }
.const-avatar.ca-7 { --size: 58px; left: 83%; top: 72%; --tilt: 3deg; --alpha: .92; }
.const-avatar.ca-8 { --size: 72px; left: 94%; top: 45%; --tilt: -5deg; }
.voices-row {
display: grid;
grid-template-columns: auto auto 1fr auto auto;
gap: clamp(20px, 3vw, 48px);
align-items: center;
justify-items: center;
position: relative;
z-index: 1;
}
.voice-portrait {
margin: 0;
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: var(--paper-2);
border: 2px solid color-mix(in srgb, var(--paper) 82%, transparent);
color: var(--ink-soft);
gap: 4px;
position: relative;
isolation: isolate;
box-shadow: 0 14px 34px -22px rgba(13,26,20,.38);
}
.voice-portrait::before {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
background:
radial-gradient(circle at 38% 18%, rgba(255,255,255,.18), transparent 42%),
linear-gradient(180deg, transparent 55%, rgba(13,26,20,.08));
z-index: 1;
pointer-events: none;
}
.voice-portrait img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.voice-portrait .ph-num {
font-family: var(--font-head);
font-style: italic;
font-weight: 500;
font-size: 1rem;
color: var(--brand-green);
}
.voice-portrait .ph-meta {
font-family: var(--font-body);
font-size: 9.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-muted);
line-height: 1.4;
font-weight: 600;
padding: 0 14px;
}
.voice-portrait.v-1 { width: 120px; transform: rotate(-3deg); }
.voice-portrait.v-2 { width: 96px; transform: rotate(2deg); }
.voice-portrait.v-3 { width: 96px; transform: rotate(-2deg); }
.voice-portrait.v-4 { width: 120px; transform: rotate(3deg); }
.voices-center {
text-align: center;
max-width: 460px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.voices-center .eyebrow-center {
display: inline-flex;
margin: 0 auto 4px;
}
.voices-quote {
position: relative;
font-family: var(--font-head);
font-style: italic;
font-weight: 400;
font-size: clamp(1.05rem, 1.5vw, 1.32rem);
line-height: 1.45;
color: var(--ink);
margin: 0;
letter-spacing: -.01em;
padding: 0 8px;
}
.vq-mark {
font-family: var(--font-head);
font-style: italic;
font-size: 2em;
color: var(--coral);
line-height: 0;
vertical-align: -.32em;
margin-right: 4px;
opacity: .75;
}
.voices-mini-avatars {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px 4px 4px;
margin-top: -2px;
border-radius: 999px;
background: color-mix(in srgb, var(--paper) 78%, transparent);
border: 1px solid color-mix(in srgb, var(--brand-green) 12%, transparent);
box-shadow: 0 14px 36px -28px rgba(13, 26, 20, .42);
}
.mini-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
overflow: hidden;
display: inline-grid;
place-items: center;
margin-left: -8px;
border: 2px solid var(--paper);
background: var(--paper-2);
color: var(--brand-green);
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: -.02em;
box-shadow: 0 8px 18px -12px rgba(13, 26, 20, .45);
}
.mini-avatar:first-child {
margin-left: 0;
}
.mini-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mini-avatar-more {
width: auto;
min-width: 48px;
padding: 0 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--brand-green) 10%, var(--paper));
}
.voices-attrib {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink-muted);
}
.voices-cta {
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-size: .92rem;
font-weight: 600;
color: var(--brand-green);
text-decoration: none;
padding: 10px 22px;
border-radius: 999px;
border: 1.5px solid color-mix(in srgb, var(--brand-green) 35%, transparent);
transition: gap .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.voices-cta:hover { gap: 14px; background: color-mix(in srgb, var(--brand-green) 6%, transparent); border-color: var(--brand-green); }
.voices-cta .arrow { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; }
@media (max-width: 880px) {
.voices-constellation {
display: none;
}
.voices-row { grid-template-columns: auto 1fr auto; }
.voice-portrait.v-2,
.voice-portrait.v-3 { display: none; }
.voice-portrait.v-1 { width: 88px; }
.voice-portrait.v-4 { width: 88px; }
}
@media (max-width: 560px) {
.voices-row { grid-template-columns: 1fr; gap: 18px; }
.voice-portrait.v-1, .voice-portrait.v-4 { display: none; }
.voices-mini-avatars {
padding-right: 8px;
}
.mini-avatar {
width: 32px;
height: 32px;
margin-left: -7px;
}
.mini-avatar-more {
min-width: 44px;
font-size: 9px;
}
}
/* =========================================================
░░ FEATURES · accents & overlays (sexy patient cards) ░░
========================================================= */
/* Per-row accent palette via data-accent */
.features-v4 .feature-row[data-accent="green"] { --acc: var(--brand-green); --acc-soft: color-mix(in srgb, var(--brand-green) 14%, var(--paper)); }
.features-v4 .feature-row[data-accent="coral"] { --acc: var(--coral); --acc-soft: color-mix(in srgb, var(--coral) 14%, var(--paper)); }
.features-v4 .feature-row[data-accent="gold"] { --acc: var(--gold); --acc-soft: color-mix(in srgb, var(--gold) 14%, var(--paper)); }
.features-v4 .feature-row[data-accent="sky"] { --acc: #6ba3b3; --acc-soft: color-mix(in srgb, #6ba3b3 14%, var(--paper)); }
.features-v4 .feature-text .feature-num {
display: inline-block;
font-family: var(--font-head);
font-style: italic;
font-size: 2.4rem;
color: var(--acc, var(--brand-green));
font-weight: 400;
line-height: 1;
position: relative;
padding-bottom: 6px;
}
.features-v4 .feature-text .feature-num::after {
content: '';
position: absolute;
left: 0; right: -8px; bottom: 0;
height: 2px;
background: var(--acc, var(--brand-green));
opacity: .35;
}
.features-v4 .feature-text ul li::before {
background: var(--acc, var(--brand-green));
box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc, var(--brand-green)) 18%, transparent);
}
/* Stage = positioning context for photo + overlays */
.feature-stage {
position: relative;
width: 100%;
}
/* Main photo (placeholder or real) */
.features-v4 .feature-photo {
position: relative;
border-radius: 28px;
overflow: hidden;
aspect-ratio: 5/4;
box-shadow: 0 30px 60px -25px rgba(20, 30, 25, .25);
background: var(--paper-2);
transform: rotate(-1.2deg);
transition: transform .8s var(--ease-out);
}
.features-v4 .feature-row.reverse .feature-photo { transform: rotate(1.2deg); }
.features-v4 .feature-stage:hover .feature-photo { transform: rotate(0); }
.features-v4 .feature-photo.is-portrait { aspect-ratio: 4/5; max-width: 360px; margin: 0 auto; }
/* Photo tag (chip in corner) */
.features-v4 .feature-stage .photo-tag {
position: absolute;
top: 16px; right: 16px;
background: color-mix(in srgb, var(--paper) 92%, transparent);
backdrop-filter: blur(8px);
padding: 8px 14px;
border-radius: 999px;
font-size: .72rem;
font-weight: 600;
color: var(--ink);
letter-spacing: .12em;
text-transform: uppercase;
z-index: 4;
box-shadow: 0 8px 20px -8px rgba(0,0,0,.15);
}
/* Overlay base */
.feature-overlay {
position: absolute;
background: color-mix(in srgb, var(--paper) 96%, transparent);
backdrop-filter: blur(10px);
border: 1px solid color-mix(in srgb, var(--acc, var(--brand-green)) 18%, var(--rule));
border-radius: 18px;
padding: 16px 18px;
box-shadow: 0 24px 50px -20px rgba(20, 30, 25, .25);
z-index: 3;
font-family: var(--font-body);
}
/* ── Overlay variants ── */
/* Treatment notification card (Row 01) */
.overlay-card { left: -6%; bottom: 12%; width: min(280px, 80%); }
.overlay-card .oc-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: var(--acc, var(--brand-green));
}
.overlay-card .oc-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--acc, var(--brand-green));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc, var(--brand-green)) 22%, transparent);
}
.overlay-card .oc-line { font-size: 14px; line-height: 1.45; color: var(--ink-soft); margin: 8px 0 6px; }
.overlay-card .oc-line strong { color: var(--ink); font-weight: 600; }
.overlay-card .oc-meta { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
/* Meal nutrient bars (Row 02) */
.overlay-meal { right: -8%; bottom: 8%; width: min(300px, 86%); }
.overlay-meal .om-row {
display: grid;
grid-template-columns: 24px 60px 1fr 36px;
align-items: center;
gap: 8px;
padding: 6px 0;
font-size: 12.5px;
}
.overlay-meal .om-row + .om-row { border-top: 1px solid var(--rule-soft); }
.overlay-meal .om-icon {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--acc-soft);
color: var(--acc);
display: grid; place-items: center;
font-family: var(--font-body);
font-size: 11px; font-weight: 700;
letter-spacing: 0;
}
.overlay-meal .om-name { color: var(--ink); font-weight: 600; }
.overlay-meal .om-bar {
height: 5px; border-radius: 3px;
background: color-mix(in srgb, var(--ink) 8%, transparent);
overflow: hidden;
}
.overlay-meal .om-fill {
display: block; height: 100%;
background: var(--acc);
border-radius: 3px;
}
.overlay-meal .om-value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); text-align: right; font-size: 12px; }
/* Live activity pill (Row 03) */
.overlay-pill {
top: 10%; right: -2%;
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 18px;
border-radius: 999px;
font-size: 13px; color: var(--ink);
}
.overlay-pill strong { color: var(--acc); font-weight: 700; }
.overlay-pill .op-dot {
width: 9px; height: 9px; border-radius: 50%;
background: var(--acc);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 60%, transparent);
animation: pulse 2.4s var(--ease-out) infinite;
}
/* Consultation brief - zoomed clinician dashboard widget (Row 04) */
.clinical-zoom {
left: -10%;
bottom: 8%;
width: min(340px, 86%);
padding: 14px 16px 12px;
font-feature-settings: "tnum" 1, "lnum" 1;
color: var(--acc, var(--brand-green));
}
.clinical-zoom .cz-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--rule-soft);
margin-bottom: 12px;
}
.clinical-zoom .cz-tag {
display: inline-flex; align-items: center; gap: 7px;
font-size: 10.5px; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase;
color: var(--acc, var(--brand-green));
}
.clinical-zoom .cz-tag-dot {
width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
animation: pulse 2.4s var(--ease-out) infinite;
}
.clinical-zoom .cz-id {
font-size: 10.5px; font-weight: 500;
letter-spacing: .04em;
color: var(--ink-muted);
font-variant-numeric: tabular-nums;
}
.clinical-zoom .cz-row { margin-bottom: 12px; }
.clinical-zoom .cz-row-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 6px;
}
.clinical-zoom .cz-label {
font-size: 11px; font-weight: 500;
color: var(--ink-muted);
letter-spacing: .01em;
}
.clinical-zoom .cz-value {
font-family: var(--font-head);
font-size: 18px;
font-weight: 500;
color: var(--ink);
letter-spacing: -.015em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.clinical-zoom .cz-value .cz-unit { font-size: 11px; color: var(--ink-muted); margin-left: 1px; font-weight: 400; }
/* Sparkline (adherence trend) */
.clinical-zoom .cz-spark {
display: block;
width: 100%; height: 28px;
color: var(--acc, var(--brand-green));
}
.clinical-zoom .cz-spark-line {
fill: none;
stroke: currentColor;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
/* Side-effect timeline */
.clinical-zoom .cz-pill {
display: inline-flex; align-items: center;
font-family: var(--font-body);
font-size: 10.5px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
padding: 3px 9px;
border-radius: 999px;
line-height: 1;
}
.clinical-zoom .cz-pill-mild {
color: var(--acc, var(--brand-green));
background: color-mix(in srgb, var(--acc, var(--brand-green)) 12%, transparent);
}
.clinical-zoom .cz-track {
display: grid;
grid-template-columns: repeat(14, 1fr);
gap: 3px;
margin-bottom: 8px;
}
.clinical-zoom .cz-cell {
height: 14px;
border-radius: 3px;
background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.clinical-zoom .cz-cell.sev-1 { background: color-mix(in srgb, var(--acc, var(--brand-green)) 50%, var(--paper)); }
.clinical-zoom .cz-cell.sev-2 { background: color-mix(in srgb, var(--coral, #d97757) 65%, var(--paper)); }
.clinical-zoom .cz-legend {
display: flex; gap: 12px;
font-size: 10px;
color: var(--ink-muted);
letter-spacing: .04em;
}
.clinical-zoom .cz-legend span { display: inline-flex; align-items: center; gap: 5px; }
.clinical-zoom .cz-legend .lg {
width: 8px; height: 8px; border-radius: 2px;
background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.clinical-zoom .cz-legend .lg.sev-1 { background: color-mix(in srgb, var(--acc, var(--brand-green)) 50%, var(--paper)); }
.clinical-zoom .cz-legend .lg.sev-2 { background: color-mix(in srgb, var(--coral, #d97757) 65%, var(--paper)); }
/* Footer status row */
.clinical-zoom .cz-foot {
display: flex; align-items: center; justify-content: space-between;
padding-top: 10px;
border-top: 1px solid var(--rule-soft);
margin-top: 4px;
}
.clinical-zoom .cz-status {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-body);
font-size: 11.5px; font-weight: 600;
letter-spacing: .04em;
color: var(--acc, var(--brand-green));
}
.clinical-zoom .cz-status-dot {
width: 7px; height: 7px; border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}
.clinical-zoom .cz-meta {
font-size: 10.5px; color: var(--ink-muted);
letter-spacing: .02em;
}
/* Collage variant for community row (Row 03) */
.feature-collage {
position: relative;
aspect-ratio: 5/4;
width: 100%;
}
.feature-collage .fc-photo {
position: absolute;
border-radius: 22px;
box-shadow: 0 24px 50px -20px rgba(20, 30, 25, .28);
}
.feature-collage .fc-1 { width: 56%; aspect-ratio: 3/4; top: 0; left: 0; z-index: 1; transform: rotate(-3deg); }
.feature-collage .fc-2 { width: 50%; aspect-ratio: 1/1; top: 18%; right: 0; z-index: 2; transform: rotate(2deg); }
.feature-collage .fc-3 { width: 42%; aspect-ratio: 1/1; bottom: 0; left: 22%; z-index: 3; transform: rotate(-1deg); border-radius: 50%; overflow: hidden; }
.feature-collage .fc-3.is-placeholder { border-radius: 50%; }
@media (max-width: 880px) {
.features-v4 .feature-photo { transform: none !important; }
.overlay-card, .clinical-zoom { left: 4%; bottom: 4%; width: 80%; }
.overlay-meal { right: 4%; bottom: 4%; width: 70%; }
.overlay-pill { top: 4%; right: 4%; }
}
/* =========================================================
░░ OUTCOMES · DARK GREEN MISSION ░░
========================================================= */
.outcomes-dark {
position: relative;
isolation: isolate;
color: #f7efd9;
background:
radial-gradient(1100px 600px at 0% 0%, rgba(192,138,46,.18), transparent 55%),
radial-gradient(900px 700px at 100% 100%, rgba(13,91,63,.55), transparent 55%),
linear-gradient(180deg, var(--green-ink) 0%, var(--green-ink-2) 60%, var(--green-ink) 100%);
overflow: hidden;
}
.outcomes-dark::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: .07;
mix-blend-mode: overlay;
background-image:
url("data:image/svg+xml;utf8,");
}
.outcomes-grid-2col {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 88px);
align-items: center;
}
.outcomes-text { display: flex; flex-direction: column; gap: 22px; }
.outcomes-text .eyebrow-gold {
color: var(--gold-soft);
display: inline-flex;
}
.outcomes-text .eyebrow-gold::before { background: var(--gold-soft); opacity: .7; }
.outcomes-text h2 {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(2.6rem, 5vw, 4.2rem);
line-height: 1.04;
letter-spacing: -.025em;
color: #f7efd9;
margin: 0;
max-width: 14ch;
}
.outcomes-text h2 em {
font-style: italic;
font-weight: 400;
color: var(--gold-soft);
}
.outcomes-lede {
font-family: var(--font-head);
font-style: italic;
font-size: 1.05rem;
line-height: 1.55;
color: color-mix(in srgb, #f7efd9 80%, transparent);
max-width: 44ch;
margin: 0;
}
.outcomes-cta-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}
.outcomes-cta-row .btn-light {
background: #f7efd9;
color: var(--ink);
border-radius: 999px;
padding: 13px 26px;
font-weight: 600;
font-size: .95rem;
border: 0;
transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.outcomes-cta-row .btn-light:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(0,0,0,.4); }
.btn-ghost-on-dark {
display: inline-flex; align-items: center;
padding: 13px 26px;
border-radius: 999px;
border: 1.5px solid color-mix(in srgb, #f7efd9 45%, transparent);
color: #f7efd9;
font-weight: 600;
font-size: .95rem;
text-decoration: none;
transition: background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.btn-ghost-on-dark:hover { background: color-mix(in srgb, #f7efd9 8%, transparent); border-color: #f7efd9; }
/* Stats card (right) */
.outcomes-card {
position: relative;
background:
linear-gradient(180deg, rgba(255,253,245,.04) 0%, rgba(255,253,245,.02) 100%);
border: 1px solid color-mix(in srgb, var(--gold-soft) 32%, transparent);
border-radius: 22px;
padding: clamp(28px, 3vw, 40px);
backdrop-filter: blur(6px);
box-shadow: 0 30px 60px -25px rgba(0,0,0,.4);
}
.outcomes-card .oc-quote-mark {
position: absolute;
top: 14px; left: 22px;
font-family: var(--font-head);
font-style: italic;
font-size: 4.6rem;
line-height: 1;
color: var(--gold-soft);
opacity: .55;
}
.outcomes-card .oc-quote {
font-family: var(--font-head);
font-style: italic;
font-weight: 400;
font-size: clamp(1.2rem, 1.7vw, 1.45rem);
line-height: 1.4;
color: #f7efd9;
letter-spacing: -.012em;
margin: 28px 0 28px;
padding-left: 14px;
border-left: 2px solid color-mix(in srgb, var(--gold-soft) 60%, transparent);
}
.outcomes-card .oc-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 2vw, 24px);
padding-top: 22px;
border-top: 1px solid color-mix(in srgb, var(--gold-soft) 28%, transparent);
}
.outcomes-card .oc-stat { display: flex; flex-direction: column; gap: 6px; }
.outcomes-card .oc-value {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(1.6rem, 2.4vw, 2rem);
line-height: 1;
letter-spacing: -.018em;
color: var(--gold-soft);
font-variant-numeric: tabular-nums;
}
.outcomes-card .oc-plus {
font-size: .55em;
margin-left: 2px;
color: color-mix(in srgb, var(--gold-soft) 80%, transparent);
}
.outcomes-card .oc-prefix {
font-size: .8em;
color: color-mix(in srgb, var(--gold-soft) 70%, transparent);
margin-right: 1px;
}
.outcomes-card .oc-label {
font-size: 11px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: color-mix(in srgb, #f7efd9 60%, transparent);
line-height: 1.45;
}
@media (max-width: 880px) {
.outcomes-grid-2col { grid-template-columns: 1fr; }
}
/* =========================================================
░░ COMMUNITY · Facebook language pastilles (sober) ░░
========================================================= */
.fb-groups {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 22px 0 0;
padding: 0;
}
.fb-group {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px 8px 12px;
background: transparent;
border: 1px solid var(--rule);
border-radius: 999px;
text-decoration: none;
color: var(--ink-soft);
transition: border-color .2s var(--ease-out), color .2s var(--ease-out), background .2s var(--ease-out);
}
.fb-group:hover {
border-color: var(--ink);
color: var(--ink);
background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.fb-icon {
width: 16px;
height: 16px;
color: var(--ink-muted);
flex-shrink: 0;
transition: color .2s var(--ease-out);
}
.fb-group:hover .fb-icon { color: var(--ink); }
.fb-lang {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: -.005em;
line-height: 1;
}
.fb-handle {
font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
letter-spacing: 0;
line-height: 1;
}
@media (max-width: 520px) {
.fb-groups { flex-direction: column; align-items: stretch; }
.fb-group { justify-content: flex-start; }
}
/* Community mosaic placeholders preserve their special shapes */
.community-mosaic .photo-3.is-placeholder { border-radius: 50%; }
/* ═══════════════════════════════════════════════════════════════
FEATURE-COLLAGE · 3 photos, slight rotations, soft tilt-flatten on hover
These rules ensure imgs inside the rotated fc-photo wrappers are clipped
by the same border-radius as the wrapper (overflow:hidden) and fully cover
the wrapper area, so cropping looks deliberate.
=================================================================== */
.feature-collage .fc-photo {
overflow: hidden;
background: var(--paper-2);
transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.feature-collage .fc-photo img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.feature-collage:hover .fc-1 { transform: rotate(-1.5deg); }
.feature-collage:hover .fc-2 { transform: rotate(0.8deg); }
.feature-collage:hover .fc-3 { transform: rotate(0); }
/* ═══════════════════════════════════════════════════════════════
REACH MAP · stylised world map (data sourced from Facebook pages)
═══════════════════════════════════════════════════════════════ */
.reach-map {
padding-top: clamp(40px, 5vw, 64px);
padding-bottom: clamp(40px, 5vw, 64px);
position: relative;
}
.reach-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(28px, 3vw, 44px);
}
.reach-head {
text-align: center;
max-width: 720px;
}
.reach-head .eyebrow { display: inline-block; margin-bottom: 14px; }
.reach-head h2 {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 1.06;
letter-spacing: -.025em;
color: var(--ink);
margin-bottom: 14px;
}
.reach-head h2 em {
font-style: italic;
font-weight: 400;
color: var(--brand-green);
}
.reach-lede {
font-family: var(--font-body);
font-size: clamp(1rem, 1.05vw, 1.1rem);
line-height: 1.6;
color: var(--ink-soft);
max-width: 640px;
margin: 0 auto;
}
.reach-figure {
width: 100%;
max-width: 980px;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.reach-svg {
width: 100%;
height: auto;
display: block;
background:
radial-gradient(ellipse at 50% 50%,
color-mix(in srgb, var(--brand-green) 4%, var(--paper-2)) 0%,
var(--paper-2) 70%);
border-radius: 18px;
border: 1px solid var(--rule-soft);
padding: 8px;
box-sizing: border-box;
}
/* Subtle equator + tropics - barely visible guide lines */
.reach-grid line {
stroke: color-mix(in srgb, var(--ink) 8%, transparent);
stroke-width: .5;
stroke-dasharray: 2 6;
}
/* Stylised land mass - ~1580 micro-dots compacted into one path.
Each "M x y h.01" segment is rendered as a round dot via stroke-linecap. */
.reach-land {
fill: none;
stroke: color-mix(in srgb, var(--ink) 28%, transparent);
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
/* Country dots */
.reach-dots .dot {
fill: var(--brand-green);
fill-opacity: .85;
stroke: var(--paper);
stroke-width: 1;
cursor: pointer;
transition: fill-opacity .2s var(--ease-out), transform .25s var(--ease-out);
transform-origin: center;
transform-box: fill-box;
transform: scale(1.2);
}
.reach-dots .dot:hover,
.reach-dots .dot:focus {
fill-opacity: 1;
transform: scale(1.5);
outline: none;
}
/* Soft glow on the largest dots - pure CSS via filter */
.reach-dots .dot-xl,
.reach-dots .dot-lg {
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--brand-green) 50%, transparent));
}
/* Gentle pulse on the absolute biggest, max 1 (Mexico) */
@keyframes reachPulse {
0%, 100% { fill-opacity: .85; }
50% { fill-opacity: 1; }
}
.reach-dots .dot-xl { animation: reachPulse 3.2s var(--ease-in-out) infinite; }
/* Tooltip group */
.reach-tip {
pointer-events: none;
transition: opacity .15s ease;
}
.reach-tip .tip-bg {
fill: var(--ink);
fill-opacity: .96;
}
.reach-tip .tip-text {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
fill: var(--paper);
letter-spacing: .02em;
}
.reach-tip .tip-num {
font-family: var(--font-body);
font-size: 10px;
fill: color-mix(in srgb, var(--paper) 75%, transparent);
letter-spacing: .04em;
}
.reach-caption {
font-family: var(--font-body);
font-size: .82rem;
color: var(--ink-muted);
text-align: center;
letter-spacing: .01em;
line-height: 1.5;
}
.reach-caption strong {
color: var(--ink-soft);
font-weight: 600;
}
/* Top countries inline list */
.reach-top {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
list-style: none;
padding: 0;
margin: 4px 0 0 0;
max-width: 860px;
}
.reach-top li {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: var(--paper);
border: 1px solid var(--rule-soft);
border-radius: 999px;
font-family: var(--font-body);
font-size: .9rem;
color: var(--ink);
}
.reach-top .rt-flag { font-size: 1rem; line-height: 1; }
.reach-top .rt-name { font-weight: 500; }
.reach-top .rt-num {
color: var(--brand-green);
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -.005em;
}
@media (max-width: 640px) {
.reach-svg { padding: 4px; border-radius: 14px; }
.reach-top li { font-size: .82rem; padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) {
.reach-dots .dot-xl { animation: none; }
}