/* ============================================================================
HUMESS DESIGN SYSTEM — tokens.css (Core v1.1)
----------------------------------------------------------------------------
Drop-in stylesheet: `` into any new
page and the stable core of the Humess portrait design language is available.
Every value here is EXTRACTED from the approved prototype
(prototypes/portrait-proto.html) — do not tweak values here without changing
them there. New components added by the design system (not yet in the LP)
are marked [NEW].
Requires the two brand font families (same embed as the prototype):
========================================================================== */
/* ============ 1. Tokens ============ */
:root {
/* -- color: canvas + ink. Canvas is warm grey, NEVER pure white.
Headings are deep navy, NEVER black. -- */
--canvas: #F7F7F7; /* page background */
--ink-body: #4A4A4A; /* body text */
--ink-soft: #7A7E85; /* secondary text, captions */
--ink-head: #08304C; /* headings + emphasis — deep navy */
/* -- color: the ONE Humess accent hue (green). Everything else is tint. -- */
--accent: #1FA968; /* primary green */
--accent-deep: #157A4C; /* pressed/deep green, small text on tints */
/* -- type families -- */
--serif: 'Playfair Display', Georgia, serif; /* italic accent words ONLY */
--sans: 'Onest', -apple-system, sans-serif; /* everything else */
/* -- surface -- */
--card-border: rgba(8, 48, 76, 0.07); /* the hairline on white cards */
--r-card: 28px; /* card radius */
/* -- the 4 pastel section washes (radial, fade top→down into the canvas) -- */
--wash-mint: radial-gradient(120% 90% at 50% 0%, #E2F4E9 0%, rgba(231,244,236,0.45) 55%, rgba(247,247,247,0) 100%);
--wash-peach: radial-gradient(120% 90% at 50% 0%, #FBEDE2 0%, rgba(251,237,226,0.45) 55%, rgba(247,247,247,0) 100%);
--wash-sky: radial-gradient(120% 90% at 50% 0%, #E3EFF8 0%, rgba(227,239,248,0.45) 55%, rgba(247,247,247,0) 100%);
--wash-lav: radial-gradient(120% 90% at 50% 0%, #ECE9F8 0%, rgba(236,233,248,0.45) 55%, rgba(247,247,247,0) 100%);
/* -- brand gradients (multi-hue: the "iridescent" family) -- */
/* text gradient — the signature serif-italic accent word (humess.com hero hues) */
--grad-iri: linear-gradient(100deg, #2E9BD6 0%, #2BA877 32%, #7FC44B 56%, #ECB83E 80%, #F0934D 100%);
/* ring gradient — the primary-CTA border (loops back to green so it can animate) */
--grad-ring: linear-gradient(105deg, #1FA968 0%, #2D9BD8 32%, #8E7CD8 55%, #E8A33D 80%, #1FA968 100%);
/* wordmark / progress-bar gradient */
--grad-brand: linear-gradient(95deg, #1FA968 0%, #2D9BD8 34%, #8E7CD8 60%, #E8A33D 100%);
/* -- duotone icon fill (line icons: currentColor stroke + var(--duo) fill) -- */
--duo: #CFE9DA;
}
/* ============ 2. Base type ============ */
body {
font-family: var(--sans);
background: var(--canvas);
color: var(--ink-body);
font-size: 17px;
line-height: 1.55;
font-weight: 400;
}
h1, h2, h3 { color: var(--ink-head); font-weight: 500; letter-spacing: -0.045em; }
h1 { font-size: 39px; line-height: 1.07; } /* 56px at ≥640px */
h2 { font-size: 34px; line-height: 1.08; } /* 40px at ≥640px */
@media (min-width: 640px) {
h1 { font-size: 56px; }
h2 { font-size: 40px; }
}
/* THE signature move: ONE serif-italic accent word inside a sans headline */
.serif-accent {
font-family: var(--serif);
font-style: italic;
font-weight: 600;
letter-spacing: -0.02em;
}
.serif-accent--green { color: var(--accent); }
/* iridescent variant — gradient-clipped text (use on the hero + big promises) */
.serif-accent--iri {
background: var(--grad-iri);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* section intro text (under an h2) */
.sec-head { margin-bottom: 14px; }
.sec-body { color: var(--ink-soft); font-size: 17px; margin-bottom: 26px; max-width: 360px; }
/* ============ 3. Layout primitives ============ */
.container { max-width: 560px; margin: 0 auto; padding: 0 24px; }
section { position: relative; }
.section-pad { padding: 116px 0 124px; } /* generous air — sections breathe */
/* pastel washes: absolutely-positioned layer behind a section's content */
.wash { position: absolute; inset: 0 0 auto 0; height: 100%; pointer-events: none; z-index: 0; }
.wash--mint { background: var(--wash-mint); }
.wash--peach { background: var(--wash-peach); }
.wash--sky { background: var(--wash-sky); }
.wash--lav { background: var(--wash-lav); }
section > .container { position: relative; z-index: 1; }
/* ============ 4. Buttons (pills only, radius 999) ============ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border-radius: 999px;
font-family: var(--sans);
font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
padding: 15px 28px;
text-decoration: none;
border: none; cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:active { transform: scale(0.97); }
/* PRIMARY — the gradient-ring pill. RESERVED for the primary order CTA only
(never two ring buttons on one screen). */
.btn--ring {
position: relative; color: var(--ink-head);
border: 4.5px solid transparent;
background:
linear-gradient(#fff, #fff) padding-box,
var(--grad-ring) border-box;
box-shadow: 0 14px 30px -14px rgba(8,48,76,0.30), inset 0 1px 0 rgba(255,255,255,0.9);
will-change: transform;
}
.btn--ring:hover {
box-shadow: 0 18px 38px -14px rgba(31,169,104,0.5), inset 0 1px 0 rgba(255,255,255,0.9);
transform: translateY(-1px);
}
/* hero variant of the ring: frosted-GLASS fill + slow flowing ring + soft pulse.
Add class .btn--ring-glass on the hero CTA (extracted from .hero__cta-row .btn--ring). */
@keyframes ringFlow { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 280% 0; } }
@keyframes ctaInvite {
0%, 100% { box-shadow: 0 14px 30px -14px rgba(8,48,76,0.30), inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 0 rgba(31,169,104,0); }
55% { box-shadow: 0 14px 30px -14px rgba(8,48,76,0.30), inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 6px rgba(31,169,104,0.11); }
}
.btn--ring-glass {
background:
linear-gradient(158deg, rgba(255,255,255,0.82), rgba(255,255,255,0.64)) padding-box,
var(--grad-ring) border-box;
background-size: 100% 100%, 280% 100%;
-webkit-backdrop-filter: blur(14px) saturate(0.4);
backdrop-filter: blur(14px) saturate(0.4);
animation: ringFlow 4s linear infinite, ctaInvite 3.4s ease-in-out infinite;
}
.btn--ring-glass:hover { animation-duration: 1.6s, 1.3s; transform: translateY(-1px); }
/* SECONDARY — soft mint pill, for quieter "view more"-type actions */
.btn--soft {
background: rgba(31,169,104,0.11); color: var(--accent-deep);
box-shadow: inset 0 0 0 1px rgba(31,169,104,0.16);
}
.btn--soft:hover {
background: rgba(31,169,104,0.17);
box-shadow: inset 0 0 0 1px rgba(31,169,104,0.28);
}
/* quiet alternates (exist in the LP; use sparingly) */
.btn--black { background: #161B20; color: #fff; }
.btn--black:hover { background: #08304C; }
.btn--green { background: var(--accent); color: #fff; }
.btn--green:hover { background: var(--accent-deep); }
/* size variant */
.btn--lg { font-size: 17px; padding: 18px 38px; }
/* ============ 5. Chips (eyebrow badges) ============ */
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px 5px 5px;
border-radius: 20px;
font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
margin-bottom: 24px;
background: #fff;
border: 1px solid rgba(8,48,76,0.10);
box-shadow: 0 2px 8px -4px rgba(8,48,76,0.12);
color: var(--ink-head);
}
.chip__ico {
width: 22px; height: 22px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px;
}
/* tint modifiers color ONLY the icon disc; text stays navy */
.chip--mint .chip__ico { background: rgba(42,168,114,0.14); }
.chip--peach .chip__ico { background: rgba(247,148,29,0.14); }
.chip--lav .chip__ico { background: rgba(141,124,216,0.16); }
/* social-proof variant: avatar stack + count */
.chip--social { padding: 4px 14px 4px 7px; gap: 9px; }
.chip-avatars { display: inline-flex; }
.chip-avatars img { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.chip-avatars img + img { margin-left: -9px; }
.chip--social b { color: var(--ink-head); font-weight: 700; }
/* value pills (results vocabulary: ok / attention / info) */
.pill-val { padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill-val--ok { background: #E2F4E9; color: #157A4C; }
.pill-val--warn { background: #FBEDDC; color: #A65B22; }
.pill-val--info { background: #E0EDF8; color: #2D6CA2; }
/* ============ 6. Proof badges [NEW] ============
CEO directive: place under EVERY lead-capture form / order CTA.
Content is fixed: точність 99,9% · ISO 17025 · GDPR.
Built from the LP trust-strip vocabulary (.get__proof white pills). */
.proof-badges {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 7px; margin-top: 14px;
}
.proof-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px 6px 9px; border-radius: 999px;
background: #fff; border: 1px solid var(--card-border);
font-size: 12px; font-weight: 650; color: var(--ink-head); letter-spacing: -0.01em;
box-shadow: 0 8px 18px -14px rgba(8,48,76,0.30);
white-space: nowrap;
}
.proof-badge svg, .proof-badge .ic { width: 14px; height: 14px; flex: none; color: var(--accent-deep); }
/* ============ 7. Cards ============ */
/* White card — floats on shadow, hairline border, big radius.
(Extracted from the LP review card .tst-card.) */
.card {
background: #fff;
border: 1px solid var(--card-border);
border-radius: var(--r-card);
padding: 24px 24px 20px;
box-shadow: 0 24px 50px -28px rgba(8,48,76,0.22);
}
/* Tinted mat — a soft pastel gradient card for image-led content.
(Extracted from the §2 deck cards .lpd; --mat-k = the kicker/label color.) */
.mat {
border-radius: 26px;
padding: 16px 18px 18px;
box-shadow: 0 22px 48px -34px rgba(8,48,76,0.52);
}
.mat--peach { background: linear-gradient(168deg, #FBEEE2 0%, #FCF6F0 100%); --mat-k: #C06A2E; }
.mat--sky { background: linear-gradient(168deg, #E6F0FA 0%, #F2F8FD 100%); --mat-k: #2D6CA2; }
.mat--lav { background: linear-gradient(168deg, #EDEAF8 0%, #F5F3FB 100%); --mat-k: #5D4DB3; }
.mat__kicker {
display: block;
font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
color: var(--mat-k, #2D6CA2);
}
.mat__title {
font-size: 19px; font-weight: 650; color: var(--ink-head);
letter-spacing: -.02em; line-height: 1.14; margin: 5px 0 6px;
}
.mat__sub { font-size: 13.5px; color: var(--ink-body); line-height: 1.42; }
/* card people row (avatar + name + meta) */
.profile-row { display: flex; align-items: center; gap: 13px; }
.avatar {
width: 46px; height: 46px; border-radius: 50%; flex: none;
background: linear-gradient(135deg, #FFD9B8, #F7B98D);
display: flex; align-items: center; justify-content: center;
font-weight: 600; color: #8C5326; font-size: 16px;
object-fit: cover;
}
.profile-row__name { font-weight: 600; color: var(--ink-head); font-size: 16.5px; letter-spacing: -0.02em; }
.profile-row__meta { font-size: 13.5px; color: var(--ink-soft); }
/* ============ 8. Floating imagery ============
Product/people photos are transparent cutouts that FLOAT on the wash —
never photos locked in bordered boxes.
Pipeline: bin/cutout.sh ![]()
(background removal) → place → one of these. */
.img-float { filter: drop-shadow(0 16px 24px rgba(8,48,76,0.18)); } /* product cutout */
.img-fade { /* dissolve the bottom edge */
-webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}
.img-person { /* people: calm the color, melt the crop */
filter: saturate(0.72) brightness(1.02);
-webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}
/* ============ 9. Alive-motion: reveal on scroll ============
Add class="reveal" (+ data-d="1|2|3" to stagger). JS adds .in on intersection:
const io = new IntersectionObserver((entries) => {
for (const e of entries) {
if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
}
}, { threshold: 0.12 });
document.querySelectorAll('.reveal').forEach(el => io.observe(el));
*/
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
/* ============ 10. Data presentation [NEW v1.1] ============
Antidote to the chip-dump: data is DESIGNED, not dumped. Patterns mined from
portrait.so (see research/portrait-so/INVENTORY.md), translated to our brand. */
/* -- ledger: receipt-style key→value rows (price math, «у ціні», report rows).
Left = label, right = value; rows separated by dashed hairlines. -- */
.ledger__row {
display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
padding: 10px 0; border-top: 1px dashed rgba(8,48,76,0.13);
font-size: 15px;
}
.ledger__row:first-child { border-top: none; }
.ledger__label { color: var(--ink-body); }
.ledger__label small { display: block; font-size: 12.5px; color: var(--ink-soft); }
.ledger__val { color: var(--ink-head); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the total line: stronger rule, bigger value */
.ledger__row--total { border-top: 1px solid rgba(8,48,76,0.18); margin-top: 4px; padding-top: 13px; }
.ledger__row--total .ledger__label { color: var(--ink-head); font-weight: 600; }
.ledger__row--total .ledger__val { font-size: 20px; }
/* old price, crossed out (place BEFORE the new price, never after) */
.price-was {
color: var(--ink-soft); font-weight: 500;
text-decoration: line-through; text-decoration-color: rgba(192,106,46,0.55); text-decoration-thickness: 1.5px;
}
/* -- unboxed stats: big number + muted label, pure typography, NO boxes.
(The elegant escape from the generic boxed stat-strip.) -- */
.stat-row { display: flex; flex-wrap: wrap; gap: 22px 38px; }
.stat__num {
font-size: 31px; font-weight: 650; color: var(--ink-head);
letter-spacing: -0.035em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stat__num small { font-size: 17px; font-weight: 600; color: var(--ink-soft); letter-spacing: -0.01em; }
.stat__label { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
/* the lead stat is a size step bigger — one number earns the eye, no dead symmetry */
.stat--lead .stat__num { font-size: 40px; }
/* delta/trend pill (value change vocabulary; pairs with .pill-val) */
.pill-delta {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 999px;
font-size: 12.5px; font-weight: 650;
background: #E2F4E9; color: #157A4C;
}
.pill-delta--warn { background: #FBEDDC; color: #A65B22; }
/* -- seg-bar: proportional composition bar («з чого складається»).
Segment widths inline: style="flex:234" = the actual count. -- */
.seg-bar {
display: flex; gap: 2px; height: 10px;
border-radius: 999px; overflow: hidden;
}
.seg-bar i { display: block; height: 100%; min-width: 6px; }
.seg--green { background: var(--accent); }
.seg--sky { background: #2D6CA2; }
.seg--peach { background: #C2702E; }
.seg--lav { background: #5D4DB3; }
.seg--mute { background: rgba(8,48,76,0.12); }
.seg-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; list-style: none; padding: 0; }
.seg-legend li { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-body); }
.seg-legend .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.seg-legend b { color: var(--ink-head); font-weight: 650; }
/* -- spec-rows: a LONG list (систем, показників) as calm 2-column rows with
dashed dividers — never a chip-wall. Optional trailing meta per row. -- */
.spec-rows { columns: 1; column-gap: 48px; }
@media (min-width: 640px) { .spec-rows { columns: 2; } }
.spec-row {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
padding: 8px 2px; border-bottom: 1px dashed rgba(8,48,76,0.13);
break-inside: avoid;
font-size: 15px; font-weight: 500; color: var(--ink-head); letter-spacing: -0.01em;
}
.spec-row__meta { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
/* -- price as a designed moment: the signature serif-italic on the number -- */
.price-serif {
font-family: var(--serif); font-style: italic; font-weight: 600;
font-size: 36px; color: var(--ink-head); letter-spacing: -0.02em; line-height: 1;
}
.price-serif small {
font-family: var(--sans); font-style: normal; display: inline-block;
font-size: 14px; font-weight: 500; color: var(--ink-soft); margin-left: 7px; letter-spacing: 0;
}
/* ============ 11. Comparison & structure [NEW v1.1] ============ */
/* -- vs-split: known-vs-new comparison, two halves on a dashed divider.
Tint each half's face-disc + serif accent to its side. -- */
.vs-split { display: grid; }
.vs-half { padding: 24px 10px; text-align: center; }
.vs-half + .vs-half { border-top: 1px dashed rgba(8,48,76,0.16); }
@media (min-width: 640px) {
.vs-split { grid-template-columns: 1fr 1fr; }
.vs-half + .vs-half { border-top: none; border-left: 1px dashed rgba(8,48,76,0.16); }
}
.vs-half__face {
width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 13px;
display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.vs-half--warm .vs-half__face { background: #FBEDDC; }
.vs-half--warm .serif-accent { color: #C2702E; }
.vs-half--brand .vs-half__face { background: #E2F4E9; }
.vs-half--brand .serif-accent { color: var(--accent); }
.vs-half__face--img { background: none; }
.vs-half__t { font-size: 19px; font-weight: 600; color: var(--ink-head); letter-spacing: -0.03em; line-height: 1.3; max-width: 260px; margin: 0 auto; }
.vs-half__s { font-size: 14px; color: var(--ink-soft); line-height: 1.45; margin: 7px auto 0; max-width: 250px; }
/* at phone width each half becomes an asymmetric ROW (face | text) — never
a centered icon-card stack */
@media (max-width: 639px) {
.vs-half { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; text-align: left; }
.vs-half__face { grid-column: 1; grid-row: 1 / span 2; margin: 2px 0 0; }
.vs-half__t { grid-column: 2; max-width: none; margin: 0; }
.vs-half__s { grid-column: 2; max-width: none; margin: 4px 0 0; }
}
/* -- check-list: benefit/spec rows [tinted check disc + ONE line]. Compact,
scannable; the escape from icon-title-sub cards for short lists. -- */
.check-list { list-style: none; display: grid; gap: 11px; padding: 0; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.45; color: var(--ink-body); }
.check-list li b { color: var(--ink-head); font-weight: 650; }
.check-list .ck {
width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 2px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(31,169,104,0.13); color: var(--accent-deep);
}
.check-list .ck::before { content: '✓'; font-size: 11.5px; font-weight: 800; line-height: 1; }
.check-list--peach .ck { background: rgba(194,112,46,0.13); color: #A65B22; }
.check-list--sky .ck { background: rgba(45,108,162,0.12); color: #2D6CA2; }
.check-list--lav .ck { background: rgba(93,77,179,0.12); color: #5D4DB3; }
/* -- feat-grid: a plan's inventory as a dashed-divided 2-col grid (NO boxes).
ONLY inside a composed plan panel (with price + CTA) — never a standalone
icon-card row (that's the #1 generic smell). -- */
.feat-grid { display: grid; grid-template-columns: 1fr; }
.feat { padding: 15px 4px; border-top: 1px dashed rgba(8,48,76,0.13); }
.feat:first-child { border-top: none; }
@media (min-width: 640px) {
.feat-grid { grid-template-columns: 1fr 1fr; column-gap: 44px; }
.feat:nth-child(2) { border-top: none; }
}
.feat__ico, .feat__num {
width: 34px; height: 34px; border-radius: 11px; margin-bottom: 9px;
display: flex; align-items: center; justify-content: center; font-size: 17px;
background: rgba(31,169,104,0.12);
}
/* stage numeral instead of an icon — use when the feats ARE numbered stages */
.feat__num { font-size: 15px; font-weight: 800; color: var(--accent-deep); }
.feat__t { font-size: 15.5px; font-weight: 650; color: var(--ink-head); letter-spacing: -0.02em; }
.feat__s { font-size: 13.5px; color: var(--ink-body); line-height: 1.45; margin-top: 3px; }
/* at phone width each feat becomes a compact ROW (marker | text) — the panel
stays short, no stacked icon-card column */
@media (max-width: 639px) {
.feat { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; }
.feat__ico, .feat__num { grid-column: 1; grid-row: 1 / span 2; margin: 2px 0 0; }
.feat__t { grid-column: 2; }
.feat__s { grid-column: 2; margin-top: 2px; }
}
/* -- stepper: stages/steps on a rail; active step is lit, others calm.
.stepper--open shows every step's body (static pages: program stages). -- */
.stepper { list-style: none; padding: 0; margin: 0; }
.step { padding: 2px 0 20px 22px; border-left: 2px dashed rgba(8,48,76,0.16); margin-left: 6px; position: relative; }
.step:last-child { padding-bottom: 2px; }
.step::before {
content: ''; position: absolute; left: -6px; top: 6px;
width: 10px; height: 10px; border-radius: 50%;
background: var(--canvas); border: 2px solid rgba(8,48,76,0.25);
}
.step__k { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.step__t { font-size: 16.5px; font-weight: 650; color: var(--ink-soft); letter-spacing: -0.02em; margin-top: 2px; }
.step__d { display: none; font-size: 14px; line-height: 1.5; color: var(--ink-body); margin-top: 5px; max-width: 430px; }
.step.is-on { border-left-color: var(--accent); border-left-style: solid; }
.step.is-on::before { border-color: var(--accent); background: var(--accent); }
.step.is-on .step__k { color: var(--accent-deep); }
.step.is-on .step__t { color: var(--ink-head); }
.step.is-on .step__d { display: block; }
.stepper--open .step__d { display: block; }
.stepper--open .step__t { color: var(--ink-head); }
/* ============ 12. Alive garnishes [NEW v1.1] ============ */
/* -- rule-stat: a live counter chip sitting mid-dashed-rule (section divider) -- */
.rule-stat { display: flex; align-items: center; gap: 18px; }
.rule-stat::before, .rule-stat::after { content: ''; flex: 1; border-top: 1px dashed rgba(8,48,76,0.16); }
.rule-stat__chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 15px; border-radius: 999px;
background: #fff; border: 1px solid var(--card-border);
box-shadow: 0 8px 18px -14px rgba(8,48,76,0.30);
font-size: 13px; font-weight: 650; color: var(--ink-head); white-space: nowrap;
}
@keyframes dotPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(31,169,104,0.35); }
55% { box-shadow: 0 0 0 6px rgba(31,169,104,0); }
}
.dot-live { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--accent); animation: dotPulse 2.4s ease-in-out infinite; }
/* -- powered-by: quiet partner attribution (Eurofins, Illumina…) -- */
.powered-by { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-soft); }
.powered-by img { height: 17px; width: auto; filter: grayscale(1) opacity(0.72); }
/* -- chip status suffix: «(скоро)» inside an eyebrow chip -- */
.chip__meta { color: var(--ink-soft); font-weight: 500; }
/* -- panel-tint: section-scale pastel seat for a composed object
(a mock-UI/report card, a plan). The big sibling of .mat. -- */
.panel-tint { border-radius: 34px; padding: 28px 20px; }
@media (min-width: 640px) { .panel-tint { padding: 42px 40px; } }
.panel-tint--mint { background: linear-gradient(170deg, #E7F5EC 0%, #F4FAF6 100%); }
.panel-tint--peach { background: linear-gradient(170deg, #FBEEE2 0%, #FDF7F1 100%); }
.panel-tint--sky { background: linear-gradient(170deg, #E6F0FA 0%, #F4F9FD 100%); }
.panel-tint--lav { background: linear-gradient(170deg, #EDEAF8 0%, #F7F5FC 100%); }
/* -- qa: FAQ accordion rows on dashed dividers; 2 columns on desktop -- */
.qa-cols { columns: 1; column-gap: 56px; }
@media (min-width: 800px) { .qa-cols { columns: 2; } }
.qa { break-inside: avoid; border-bottom: 1px dashed rgba(8,48,76,0.14); }
.qa summary {
list-style: none; cursor: pointer;
display: flex; justify-content: space-between; align-items: center; gap: 14px;
padding: 15px 2px; font-size: 16px; font-weight: 600; color: var(--ink-head); letter-spacing: -0.02em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
content: ''; width: 8px; height: 8px; flex: none; margin-right: 5px;
border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
transform: rotate(45deg); transition: transform .25s ease;
}
.qa[open] summary::after { transform: rotate(225deg); }
.qa__a { padding: 0 2px 16px; font-size: 14.5px; line-height: 1.5; color: var(--ink-body); max-width: 520px; }
/* ============ 13. Review displays [NEW v1.1] ============
Real voices, rebuilt in brand. NEVER paste a raw messenger/Google screenshot —
carry the real TEXT over into brand bubbles/cards: truth stays, noise goes. */
/* -- dm-card: a consultation dialogue (Telegram/Viber), rebuilt in brand.
Put the bubbles inside a .card; client's words = mint, on the right. -- */
.dm-card { display: grid; gap: 8px; }
.dm-bubble {
max-width: 88%; padding: 10px 14px;
font-size: 14.5px; line-height: 1.45; color: var(--ink-head);
border-radius: 16px;
}
.dm-bubble--brand { background: #EEF1F4; border-bottom-left-radius: 6px; justify-self: start; }
.dm-bubble--client { background: #E2F4E9; border-bottom-right-radius: 6px; justify-self: end; }
.dm-meta { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12.5px; color: var(--ink-soft); }
/* -- ugc-card: client story/video still (9:16) in a rounded frame -- */
.ugc-card {
position: relative; overflow: hidden; border-radius: 22px;
aspect-ratio: 9 / 16; background: #DDE3E8;
box-shadow: 0 24px 50px -28px rgba(8,48,76,0.35);
}
.ugc-card img, .ugc-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ugc-card::after {
content: ''; position: absolute; inset: auto 0 0 0; height: 42%;
background: linear-gradient(180deg, rgba(8,24,36,0) 0%, rgba(8,24,36,0.55) 100%);
}
.ugc-card__handle {
position: absolute; top: 10px; left: 10px; z-index: 1;
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
font-size: 12px; font-weight: 650; color: var(--ink-head);
background: rgba(255,255,255,0.85);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ugc-card__caption {
position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1;
color: #fff; font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
text-shadow: 0 1px 8px rgba(8,24,36,0.4);
}
.ugc-card__play {
position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 46px; height: 46px; border-radius: 50%;
background: rgba(255,255,255,0.88);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 24px -8px rgba(8,48,76,0.5);
}
.ugc-card__play::before {
content: ''; margin-left: 3px;
border-left: 13px solid var(--ink-head);
border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
/* -- story result line: «що змінилось» under a client story (pairs with .pill-delta) -- */
.story-result {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(8,48,76,0.13);
}
.story-result__label { font-size: 12.5px; color: var(--ink-soft); }
/* every animation must die gracefully */
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.btn--ring-glass { animation: none; }
.dot-live { animation: none; }
}