/* ============================================================
ecomvision.team — styles
Tokens + base + header + sections. Mobile-first-ish.
Font stack: Geist (Sans) + IBM Plex Mono (tech accents).
============================================================ */
:root {
/* colors */
--ink: #0A0A0A;
--ink-soft: #373737;
--muted: #6B6B6B;
--mute-2: #9A9A9A;
--line: #EDEDED;
--line-soft: #F4F4F2;
--bg: #FFFFFF;
--bg-alt: #FAFAF7;
--card: #F6F6F3;
/* accents */
--amber: #FFBD17;
--amber-soft: rgba(255,189,23,0.12);
--royal: #005BFF; /* Ozon blue */
--royal-deep: #0046CC;
--royal-soft: rgba(0,91,255,0.08);
/* theme accents per-card (services) */
--theme-market: #005BFF;
--theme-creative:#FFBD17;
--theme-infra: #10B981;
/* radii */
--r-sm: 10px;
--r-md: 18px;
--r-lg: 28px;
--r-xl: 44px;
--r-pill: 999px;
/* type */
--font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
/* easings — single source of truth for all transitions */
--ease: cubic-bezier(0.25, 0.8, 0.25, 1); /* standard smooth */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-expo — smooth enter */
--ease-hover: cubic-bezier(0.32, 0.72, 0, 1); /* hover micro-interactions */
--ease-spring: cubic-bezier(0.34, 1.25, 0.5, 1); /* gentle spring, low overshoot */
--ease-spring-soft: cubic-bezier(0.34, 1.15, 0.5, 1); /* barely-there spring for img/logos */
--ease-slide: cubic-bezier(0.33, 0.1, 0.2, 1); /* hero colored-slide flip, no overshoot */
/* durations */
--dur-fast: 180ms;
--dur-med: 280ms;
--dur-slow: 520ms;
/* container */
--container: 1280px;
--pad-x: 28px;
--header-h: 72px;
}
/* reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
font-weight: 400;
color: var(--ink);
background: var(--bg);
line-height: 1.45;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
/* Accessibility — visible focus ring only on keyboard nav */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--royal);
outline-offset: 3px;
border-radius: 6px;
}
a:focus-visible, button:focus-visible {
outline-color: var(--royal);
}
.discuss:focus-visible {
outline-offset: 4px;
}
input:focus-visible, textarea:focus-visible {
outline: none;
}
.ibm, .mono { font-family: var(--font-mono); }
/* ============================================================
HEADER
============================================================ */
.header {
position: sticky; top: 0; z-index: 50;
background: rgba(255,255,255,0.85);
backdrop-filter: saturate(1.6) blur(14px);
-webkit-backdrop-filter: saturate(1.6) blur(14px);
border-bottom: 1px solid transparent;
transition: border-color 240ms var(--ease), background 240ms var(--ease);
}
.header[data-scrolled] {
border-bottom-color: var(--line);
background: rgba(255,255,255,0.92);
}
.header__inner {
max-width: var(--container);
margin: 0 auto;
height: var(--header-h);
padding: 0 var(--pad-x);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }
.logo__mark {
width: 40px;
height: 40px;
display: inline-flex;
flex: none;
}
.logo__mark img {
width: 100%;
height: 100%;
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
}
.logo__text { font-weight: 500; font-size: 18px; }
.logo--footer { align-items: center; }
.logo--footer .logo__mark { width: 36px; height: 36px; }
.nav {
display: flex; gap: 4px; justify-self: center;
align-items: center;
}
.nav__item {
font-family: var(--font-mono);
font-size: 13px;
color: var(--ink);
padding: 8px 14px;
border-radius: var(--r-pill);
display: inline-flex; align-items: center; gap: 6px;
transition: background 200ms var(--ease), color 200ms var(--ease);
}
.nav__item:hover { background: var(--line-soft); }
.nav__item--trigger svg { transition: transform 240ms var(--ease); }
.header[data-mega-open] .nav__item--trigger svg { transform: rotate(180deg); }
.header__right {
display: flex; align-items: center; gap: 18px;
}
.header__mail {
font-family: var(--font-mono);
font-size: 13px;
color: var(--ink);
border-bottom: 1px dashed var(--mute-2);
padding-bottom: 1px;
transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.header__mail:hover { color: var(--royal); border-color: var(--royal); }
/* Discuss button — black frosted glass */
.discuss {
position: relative;
display: inline-flex; align-items: center; gap: 12px;
padding: 10px 16px 10px 20px;
border-radius: var(--r-pill);
background:
linear-gradient(135deg, rgba(8,10,18,0.86) 0%, rgba(0,0,0,0.92) 100%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255,255,255,0.10);
color: #fff;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1;
isolation: isolate;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.18),
inset 0 -1px 0 rgba(0,0,0,0.4),
0 10px 28px -10px rgba(0,0,0,0.5),
0 2px 6px -2px rgba(0,0,0,0.3);
transition:
transform 220ms var(--ease),
background 260ms var(--ease),
border-color 260ms var(--ease),
box-shadow 280ms var(--ease);
}
/* Specular highlight — top-down gloss + corner shine */
.discuss::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.02) 50%, transparent 80%),
radial-gradient(120% 70% at 25% -20%, rgba(255,255,255,0.16) 0%, transparent 55%);
opacity: 0.95;
pointer-events: none;
z-index: -1;
mix-blend-mode: screen;
}
.discuss:hover {
transform: translateY(-1px);
background:
linear-gradient(135deg, rgba(0,91,255,0.92) 0%, rgba(0,60,180,0.96) 100%);
border-color: rgba(255,255,255,0.18);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.24),
inset 0 -1px 0 rgba(0,0,0,0.28),
0 16px 36px -10px rgba(0,91,255,0.55),
0 4px 12px -4px rgba(0,91,255,0.32);
}
.discuss:active { transform: translateY(0); }
.discuss svg { color: #fff; position: relative; z-index: 1; }
.discuss__text { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.discuss__rotator {
position: relative;
display: inline-flex;
align-items: center;
min-width: 9ch;
height: 1em;
overflow: hidden;
line-height: 1;
}
.discuss__word {
position: absolute;
left: 0; top: 50%;
line-height: 1;
opacity: 0;
transform: translate(0, 100%);
transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.discuss__word.is-current {
opacity: 1;
transform: translate(0, -50%);
}
.discuss__word.is-leave {
opacity: 0;
transform: translate(0, -150%);
}
/* Burger (mobile) — 44×44 tap target */
.burger { display: none; width: 44px; height: 44px; position: relative; border-radius: var(--r-sm); }
.burger span {
position: absolute; left: 12px; right: 12px; height: 1.6px;
background: var(--ink); border-radius: 2px; transition: transform 240ms var(--ease), opacity 200ms var(--ease);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger span:nth-child(3) { bottom: 16px; }
.header[data-mobile-open] .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.header[data-mobile-open] .burger span:nth-child(2) { opacity: 0; }
.header[data-mobile-open] .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Mobile dropdown — clean 3-row grid (logo+burger · nav · email+CTA) */
@media (max-width: 780px) {
.header[data-mobile-open] {
background: rgba(255,255,255,0.98);
border-bottom-color: var(--line);
}
.header[data-mobile-open] .header__inner {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: var(--header-h) auto auto;
align-items: center;
height: auto;
padding-bottom: 14px;
gap: 0;
}
.header[data-mobile-open] .logo { grid-column: 1; grid-row: 1; }
.header[data-mobile-open] .burger { grid-column: 2; grid-row: 1; }
/* Row 2 — nav links stacked, full bleed */
.header[data-mobile-open] .nav {
display: flex !important;
grid-column: 1 / -1;
grid-row: 2;
flex-direction: column;
align-items: stretch;
justify-self: stretch;
width: 100%;
gap: 0;
padding: 0;
margin: 6px calc(-1 * var(--pad-x)) 0;
border-top: 1px solid var(--line);
animation: mobileMenuIn 220ms ease both;
}
.header[data-mobile-open] .nav__item--trigger svg { display: none; }
.header[data-mobile-open] .nav__item {
padding: 15px var(--pad-x);
font-size: 15px;
color: var(--ink);
width: 100%;
justify-content: flex-start;
border-radius: 0;
border-bottom: 1px solid var(--line);
}
.header[data-mobile-open] .nav__item:last-child { border-bottom: 0; }
/* Row 3 — email + CTA */
.header[data-mobile-open] .header__right {
display: flex !important;
grid-column: 1 / -1;
grid-row: 3;
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 14px 0 4px;
animation: mobileMenuIn 280ms ease 40ms both;
}
.header[data-mobile-open] .header__mail {
font-size: 13px;
color: var(--muted);
text-align: left;
padding-bottom: 2px;
}
.header[data-mobile-open] .discuss {
width: 100%;
justify-content: space-between;
padding: 14px 18px;
font-size: 14px;
}
}
@keyframes mobileMenuIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mega menu */
.mega {
position: absolute; left: 0; right: 0; top: 100%;
background: var(--bg);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.mega[data-open] {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.mega[hidden] { display: block; } /* we control via opacity */
.mega__inner {
max-width: var(--container);
margin: 0 auto;
padding: 40px var(--pad-x) 48px;
display: grid;
grid-template-columns: repeat(3, 1fr) 320px;
gap: 48px;
}
.mega__col { display: flex; flex-direction: column; gap: 6px; }
.mega__label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
.mega__link {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 10px; margin-left: -10px;
font-size: 16px;
letter-spacing: -0.01em;
border-radius: var(--r-sm);
transition: background 200ms var(--ease), color 200ms var(--ease);
}
.mega__link:hover { background: var(--line-soft); }
.mega__dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--mute-2);
transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.mega__link:hover .mega__dot { background: var(--royal); transform: scale(1.6); }
.mega__preview {
background: var(--card);
border-radius: var(--r-md);
padding: 22px;
display: flex; flex-direction: column; gap: 10px;
align-self: start;
}
.mega__preview-badge {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.04em;
}
.mega__preview-title {
font-size: 28px;
letter-spacing: -0.02em;
line-height: 1.1;
}
.mega__preview-meta {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
}
/* ============================================================
LAYOUT helpers
============================================================ */
.section { padding: 100px 0; }
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--pad-x);
}
/* ============================================================
PROMO (hero)
============================================================ */
.promo {
max-width: var(--container);
margin: 0 auto;
padding: 36px var(--pad-x) 28px;
min-height: calc(100vh - var(--header-h));
display: flex; flex-direction: column;
justify-content: center;
}
.promo__status {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px 6px 10px;
border: 1px solid var(--line);
border-radius: var(--r-pill);
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
margin-bottom: -4px;
background: var(--bg);
align-self: flex-start;
letter-spacing: 0.01em;
opacity: 0;
transform: translate3d(0, 12px, 0) scale(0.98);
animation: promoStatusIn 560ms cubic-bezier(0.22, 1, 0.36, 1) 90ms both;
}
@keyframes promoStatusIn {
from {
opacity: 0;
transform: translate3d(0, 12px, 0) scale(0.98);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
/* Triple-sparkle SVG — clean brand-blue strokes with soft pulse */
.promo__star {
width: 18px;
height: 18px;
flex: none;
display: block;
color: var(--royal);
filter: drop-shadow(0 0 2px rgba(0, 91, 255, 0.22));
animation: promoStarPulse 3.4s ease-in-out 1.25s infinite;
transform-origin: 50% 50%;
overflow: visible;
}
.promo__star path { stroke: currentColor; }
/* Subtle "breathing" — scale + opacity + glow all in sync, one slow cycle */
@keyframes promoStarPulse {
0%, 100% {
transform: scale(1);
opacity: 0.85;
filter: drop-shadow(0 0 2px rgba(0, 91, 255, 0.22));
}
50% {
transform: scale(1.06);
opacity: 1;
filter: drop-shadow(0 0 7px rgba(0, 91, 255, 0.42));
}
}
/* Keep the old .promo__dot rule around in case anything else uses it */
.promo__dot { display: none; }
.promo__main {
position: relative;
margin-top: 0;
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(380px, 0.72fr);
gap: 48px;
align-items: end;
}
.promo__col--text { min-width: 0; }
.promo__title {
position: relative;
}
.promo__bottom {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.72fr);
gap: 48px;
align-items: start;
margin-top: 16px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.promo__lead {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 680px;
font-size: 16px;
color: var(--ink-soft);
line-height: 1.55;
}
.promo__lead-body { margin: 0; }
.promo__lead strong {
color: var(--ink);
font-weight: 500;
}
/* Supporting caption — mono line with services + tagline */
.promo__lead-caption {
margin: 0;
padding-top: 10px;
border-top: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.5;
letter-spacing: 0.005em;
color: var(--muted);
}
.promo__sub {
font-family: var(--font-mono);
font-size: 13px;
color: var(--muted);
margin-bottom: 28px;
letter-spacing: -0.005em;
}
.promo__title {
font-size: clamp(34px, 3.6vw, 56px);
line-height: 1.06;
letter-spacing: -0.032em;
font-weight: 500;
max-width: 820px;
}
.promo__title em {
font-style: normal;
background: linear-gradient(95deg, var(--royal) 0%, var(--royal-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.promo__meta {
display: flex; flex-direction: column; gap: 16px;
align-items: flex-start;
}
.promo__link {
position: relative;
z-index: 10;
display: inline-flex; align-items: center; gap: 8px;
font-size: 15px;
border-bottom: 1px solid var(--ink);
padding-bottom: 2px;
transition: gap 200ms var(--ease), color 200ms var(--ease);
}
.promo__meta, .promo__bottom { position: relative; z-index: 5; }
.promo__link:hover { color: var(--royal); border-bottom-color: var(--royal); gap: 14px; }
.promo__link--ghost {
border-bottom-color: var(--mute-2);
color: var(--muted);
}
.promo__link--ghost:hover { color: var(--ink); border-bottom-color: var(--ink); }
.promo__divider { width: 3px; height: 3px; border-radius: 50%; background: var(--mute-2); }
.promo__note {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.4;
color: var(--muted);
max-width: 360px;
}
.promo__note-avatar {
position: relative;
width: 32px;
height: 32px;
flex: none;
display: block;
}
.promo__note-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
border: 2px solid #fff;
box-shadow:
0 6px 14px -6px rgba(10, 10, 10, 0.22),
0 2px 4px -2px rgba(10, 10, 10, 0.08);
}
.promo__note-dot {
position: absolute;
right: -1px;
bottom: -1px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #23c552;
border: 2px solid #fff;
box-shadow: 0 0 0 2px rgba(35, 197, 82, 0.18);
}
.promo__note-text { min-width: 0; }
.promo__lead-body,
.promo__lead-caption,
.promo__meta .promo__link,
.promo__note {
opacity: 0;
transform: translate3d(0, 14px, 0);
animation: promoSupportIn 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.promo__lead-body { animation-delay: 1480ms; }
.promo__lead-caption { animation-delay: 1580ms; }
.promo__meta .promo__link:nth-child(1) { animation-delay: 1680ms; }
.promo__meta .promo__link:nth-child(2) { animation-delay: 1760ms; }
.promo__note { animation-delay: 1840ms; }
@keyframes promoSupportIn {
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
/* ============================================================
AVATAR (inline with first title line) + LOGO ROW
============================================================ */
.promo__title-row {
display: inline-flex;
align-items: center;
gap: 28px;
flex-wrap: nowrap;
}
.promo__title-mask {
display: block;
overflow: clip;
padding: 0.035em 0 0.085em;
margin: -0.035em 0 -0.085em;
}
.promo__title-line {
display: inline-block;
opacity: 0;
transform: translate3d(0, 112%, 0) rotate(0.35deg);
transform-origin: left bottom;
animation: promoTitleLineIn 880ms cubic-bezier(0.16, 1, 0.3, 1) both;
will-change: transform, opacity;
}
.promo__title-line--one { animation-delay: 220ms; }
.promo__title-line--accent { animation-delay: 390ms; }
.promo__title-line--last { animation-delay: 560ms; }
@keyframes promoTitleLineIn {
0% {
opacity: 0;
transform: translate3d(0, 112%, 0) rotate(0.35deg);
}
64% {
opacity: 1;
transform: translate3d(0, -4%, 0) rotate(0deg);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(0deg);
}
}
.promo__avatar {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
flex: none;
border: 2px solid #fff;
/* Simple, reliable circular shadow — no clip-path tricks, no double layers */
box-shadow: 0 8px 20px -4px rgba(10, 10, 10, 0.18);
opacity: 0;
animation: promoAvatarFade 640ms cubic-bezier(0.22, 1, 0.36, 1) 540ms forwards;
}
@keyframes promoAvatarFade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.promo__logos {
display: flex;
gap: 0;
align-items: center;
margin-top: 28px;
perspective: 900px;
opacity: 0;
filter: blur(8px);
transform: translate3d(0, 10px, 0);
animation: promoLogoRailIn 560ms cubic-bezier(0.22, 1, 0.36, 1) 980ms both;
will-change: transform, opacity, filter;
}
@keyframes promoLogoRailIn {
to {
opacity: 1;
filter: blur(0);
transform: translate3d(0, 0, 0);
}
}
/* Overlap each subsequent logo by 6px — tighter group */
.promo__logo + .promo__logo { margin-left: -6px; }
.promo__logo {
position: relative;
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
opacity: 0;
/* drop-shadow on the circular logo — doesn't get clipped by the overlapping
sibling like a box-shadow would. Softer, perfectly round shadow. */
filter: drop-shadow(0 4px 10px rgba(10,10,10,0.14));
transform: translate3d(var(--intro-x, 0), var(--intro-y, 18px), 0) rotate(var(--start-r, var(--r, 0deg))) scale(0.72);
animation: marketplaceLogoIn 780ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms) both;
transition:
transform 380ms var(--ease-spring-soft),
filter 380ms var(--ease-out),
margin 380ms var(--ease-spring-soft);
will-change: transform;
transform-style: preserve-3d;
}
.promo__logo:hover { filter: drop-shadow(0 8px 16px rgba(10,10,10,0.22)); }
/* Diagonal sheen — sweeps across on hover, clipped by logo circle */
.promo__logo::after {
content: "";
position: absolute;
inset: -2px;
border-radius: 50%;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.48) 0%,
rgba(255, 255, 255, 0.06) 30%,
transparent 52%,
transparent 68%,
rgba(255, 255, 255, 0.14) 100%);
opacity: 0;
mix-blend-mode: overlay;
transform: translateX(-12%);
transition:
opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
z-index: 2;
}
.promo__logo:hover::after {
opacity: 1;
transform: translateX(0);
}
/* Per-platform brand halo tint for the hover glow */
.promo__logo[data-platform="ozon"] { --logo-halo: rgba(0, 91, 255, 0.55); }
.promo__logo[data-platform="wb"] { --logo-halo: rgba(205, 28, 151, 0.50); }
.promo__logo[data-platform="ym"] { --logo-halo: rgba(253, 197, 30, 0.60); }
.promo__logo[data-platform="zy"] { --logo-halo: rgba(16, 185, 129, 0.50); }
.promo__logo[data-platform="lm"] { --logo-halo: rgba(236, 72, 153, 0.55); }
.promo__logo[data-platform="direct"] { --logo-halo: rgba(255, 77, 77, 0.50); }
.promo__logo[data-platform="ymaps"] { --logo-halo: rgba(255, 77, 77, 0.45); }
.promo__logo {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
/* Logo image fills the round chip; GPU-layer pinning prevents blur
during the entrance scale/rotate animation and the hover transform. */
.promo__logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: inherit;
transform: translateZ(0);
backface-visibility: hidden;
image-rendering: -webkit-optimize-contrast;
pointer-events: none;
}
.promo__logo[data-platform="direct"] { background: transparent; color: #fff; }
.promo__logo[data-platform="ymaps"] { background: #fff; color: #fc3f1d; }
.promo__logo[data-platform="ozon"] { background: #005bff; color: #fff; }
.promo__logo[data-platform="wb"] { background: linear-gradient(135deg, #cb11ab, #ff6a00); color: #fff; }
.promo__logo[data-platform="ym"] { background: #ffd426; color: #111827; }
.promo__logo[data-platform="zy"] { background: #102d22; color: #f6e6a8; }
.promo__logo[data-platform="lm"] { background: #f43f8f; color: #fff; }
.promo__logo-text {
display: block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
pointer-events: none;
}
.promo__logo:nth-child(1) { --r: 0deg; --d: 1080ms; --intro-x: 24px; --intro-y: 28px; --start-r: -14deg; }
.promo__logo:nth-child(2) { --r: 0deg; --d: 1140ms; --intro-x: 15px; --intro-y: -18px; --start-r: 10deg; }
.promo__logo:nth-child(3) { --r: 0deg; --d: 1200ms; --intro-x: 7px; --intro-y: 24px; --start-r: -8deg; }
.promo__logo:nth-child(4) { --r: 0deg; --d: 1260ms; --intro-x: -7px; --intro-y: 18px; --start-r: 8deg; }
.promo__logo:nth-child(5) { --r: 0deg; --d: 1320ms; --intro-x: -16px; --intro-y: -16px; --start-r: -10deg; }
.promo__logo:nth-child(6) { --r: 0deg; --d: 1380ms; --intro-x: -24px; --intro-y: 24px; --start-r: 12deg; }
/* Lamoda tilts left and overlaps Золотое Яблоко slightly */
.promo__logo:nth-child(7) {
--r: -10deg;
--d: 1440ms;
--intro-x: -34px;
--intro-y: 8px;
--start-r: -24deg;
margin-left: -10px;
z-index: 2;
}
/* Я.Директ — keep the compact text badge aligned with the other platform chips. */
.promo__logo[data-platform="direct"] {
border-radius: 50%;
}
@keyframes marketplaceLogoIn {
0% {
opacity: 0;
transform: translate3d(var(--intro-x, 0), var(--intro-y, 18px), 0) rotate(var(--start-r, var(--r, 0deg))) scale(0.72);
}
68% {
opacity: 1;
transform: translate3d(0, -3px, 0) rotate(var(--r, 0deg)) scale(1.08);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)) scale(1);
}
}
/* ── Hover — lift, straighten, scale, brand-tinted glow ── */
.promo__logo:hover {
transform: translateY(-9px) rotate(0deg) scale(1.22);
z-index: 10;
box-shadow:
0 24px 40px -10px rgba(10, 10, 10, 0.32),
0 8px 16px -4px rgba(10, 10, 10, 0.16),
0 0 44px -6px var(--logo-halo, rgba(0, 91, 255, 0.5)),
inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
/* ── Neighbor push — lateral parting so focused logo breathes ── */
.promo__logo:hover + .promo__logo:not(:hover) {
transform: translateX(6px) rotate(var(--r, 0deg));
}
/* Previous sibling can't be matched in pure CSS; we lean on the :has() ↓
supported in evergreen browsers. Falls back gracefully. */
@supports selector(:has(*)) {
.promo__logos:has(.promo__logo:nth-child(n + 2):hover) .promo__logo:nth-child(1):not(:hover) { transform: translateX(-6px) rotate(var(--r, 0deg)); }
.promo__logos:has(.promo__logo:nth-child(n + 3):hover) .promo__logo:nth-child(2):not(:hover) { transform: translateX(-6px) rotate(var(--r, 0deg)); }
.promo__logos:has(.promo__logo:nth-child(n + 4):hover) .promo__logo:nth-child(3):not(:hover) { transform: translateX(-6px) rotate(var(--r, 0deg)); }
.promo__logos:has(.promo__logo:nth-child(n + 5):hover) .promo__logo:nth-child(4):not(:hover) { transform: translateX(-6px) rotate(var(--r, 0deg)); }
.promo__logos:has(.promo__logo:nth-child(n + 6):hover) .promo__logo:nth-child(5):not(:hover) { transform: translateX(-6px) rotate(var(--r, 0deg)); }
.promo__logos:has(.promo__logo:nth-child(n + 7):hover) .promo__logo:nth-child(6):not(:hover) { transform: translateX(-6px) rotate(var(--r, 0deg)); }
}
/* ── Overlap pair: ЗЯ (6) + Lamoda (7) ── */
/* Hovering ЗЯ: it rises up; Lamoda slides right & tilts more away */
.promo__logo:nth-child(6):hover ~ .promo__logo:nth-child(7) {
transform: translate(22px, -3px) rotate(-20deg);
z-index: 1;
}
/* Hovering Lamoda directly: straighten, lift above ЗЯ, small right shift
so it no longer covers the apple. More specific — overrides generic. */
.promo__logo:nth-child(7):hover {
transform: translate(8px, -9px) rotate(0deg) scale(1.22);
z-index: 11;
}
.promo__logo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
pointer-events: none;
/* Gentle zoom crops the white baked-in outline without shifting the icon
off-center noticeably. */
transform: scale(1.16);
transition: transform 340ms var(--ease-spring-soft);
}
.promo__logo:hover img { transform: scale(1.22); }
/* Per-platform fine-tuning — some SVGs aren't perfectly centred inside
their viewbox; small transform-origin nudges re-centre the visible crop. */
/* WB, YM, Lamoda — already round icons, no crop needed */
.promo__logo[data-platform="wb"] img { transform: none; }
.promo__logo[data-platform="ym"] img { transform: none; }
.promo__logo[data-platform="lm"] img { transform: none; }
.promo__logo[data-platform="ozon"] img { transform: scale(1.14); }
.promo__logo[data-platform="zy"] img { transform: scale(1.14); }
.promo__logo[data-platform="wb"]:hover img { transform: scale(1.06); }
.promo__logo[data-platform="ym"]:hover img { transform: scale(1.06); }
.promo__logo[data-platform="lm"]:hover img { transform: scale(1.06); }
.promo__logo[data-platform="ozon"]:hover img { transform: scale(1.20); }
.promo__logo[data-platform="zy"]:hover img { transform: scale(1.20); }
/* Direct icon is clean on transparent bg — no scaling needed */
.promo__logo[data-platform="direct"] img {
transform: none;
object-fit: contain;
}
.promo__logo[data-platform="direct"]:hover img { transform: scale(1.06); }
/* ============================================================
EV SHOWCASE — Chrome-ad inspired hero companion
Pastel page bg + saturated brand panel + split-word + portrait +
photo/logo thumbs + icon badges. Self-contained under `.evsh*` prefix.
============================================================ */
.evsh {
--evsh-duration: 5200ms;
--evsh-stage-h: 400px;
--evsh-panel-w: 220px;
--evsh-panel-h: 320px;
--evsh-portrait: 132px;
position: relative;
width: 100%;
max-width: 460px;
justify-self: center;
display: block;
opacity: 1;
transform: none;
/* Stage can receive hover; the promo__link underneath stays safe via z-index:10 */
}
.evsh__stage {
position: relative;
width: 100%;
height: var(--evsh-stage-h);
isolation: isolate;
perspective: 1400px;
perspective-origin: center 42%;
transform-style: preserve-3d;
transform-origin: 60% 48%;
opacity: 0;
transform: translate3d(48px, 18px, 0) rotateY(-14deg) scale(0.96);
animation: evshHeroStageIn 1050ms cubic-bezier(0.16, 1, 0.3, 1) 620ms both;
will-change: transform, opacity;
}
@keyframes evshHeroStageIn {
0% {
opacity: 0;
transform: translate3d(48px, 18px, 0) rotateY(-14deg) scale(0.96);
}
68% {
opacity: 1;
transform: translate3d(-4px, -2px, 0) rotateY(2deg) scale(1.012);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
}
}
/* ---- Slide layer — gentle 3D page-flip transition ---- */
.evsh__slide {
position: absolute;
inset: 0;
display: block;
opacity: 0;
pointer-events: none;
transform-origin: center center;
transform: rotateY(42deg) translateX(20%) scale(0.96);
transition:
opacity 680ms var(--ease-slide),
transform 680ms var(--ease-slide);
will-change: transform, opacity;
backface-visibility: hidden;
}
.evsh__slide.is-active {
opacity: 1;
transform: rotateY(0) translateX(0) scale(1);
pointer-events: auto;
z-index: 2;
}
/* Leaving: flips gently to the LEFT */
.evsh__slide.is-leaving {
opacity: 0;
transform: rotateY(-42deg) translateX(-20%) scale(0.96);
z-index: 1;
}
/* ============================================================
Horizontal banner variant — unified layout for all 4 slides.
Row 1: full-width panel (portrait left + stacked words right).
3D hero floats off the top-right corner; price-tag tucked
under it — both clear of the panel text.
Row 2: two equal cards in a tidy row below the panel.
Zero overlap between panel words, hero product, and cards.
============================================================ */
.evsh__slide.evsh__slide--h .evsh__panel {
top: 0;
left: 0;
width: 100%;
height: 184px;
transform: translateX(0) scale(0.97);
border-radius: 28px;
padding: 18px 22px;
display: flex;
align-items: center;
justify-content: center;
}
.evsh__slide.evsh__slide--h.is-active .evsh__panel {
transform: translateX(0) scale(1) !important;
opacity: 1 !important;
}
.evsh__slide--h .evsh__portrait {
width: 118px;
height: 118px;
}
/* ── Floating glass pills — per-slide placement on panel edges ──
Big plate ("аналитика" / "контент" / ...) = evsh__word--top.
Small plate ("ecomvision") = evsh__word--bot.
Position is picked per-slide via --at-* modifier classes so each
slide gets its own composition: corner, edge, or centered stack. */
.evsh__slide--h .evsh__word {
position: absolute;
z-index: 10;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 26px;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(16px) saturate(1.3);
-webkit-backdrop-filter: blur(16px) saturate(1.3);
border: 1px solid color-mix(in srgb, var(--sh-c1) 24%, rgba(255, 255, 255, 0.55));
border-radius: 999px;
color: var(--sh-ink);
font-family: var(--font-sans);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.028em;
line-height: 1;
white-space: nowrap;
box-shadow:
0 18px 36px -18px color-mix(in srgb, var(--sh-c1) 55%, transparent),
0 4px 10px -4px rgba(10, 20, 60, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
opacity: 0;
translate: 0 10px;
transition:
opacity 560ms var(--ease-out),
translate 560ms var(--ease-spring-soft);
transition-delay: 140ms;
}
.evsh__slide--h .evsh__word--bot {
padding: 8px 20px;
font-size: 13.5px;
font-weight: 600;
color: var(--sh-ink);
background: rgba(255, 255, 255, 0.96);
transition-delay: 220ms;
z-index: 11;
}
.evsh__slide--h.is-active .evsh__word {
opacity: 1;
translate: 0 0;
}
/* Horizontally-centered variants: transform handles X-centering so
`translate` stays free for the entrance animation. */
.evsh__slide--h .evsh__word--at-tc,
.evsh__slide--h .evsh__word--at-bc,
.evsh__slide--h .evsh__word--at-mc,
.evsh__slide--h .evsh__word--at-mc-stack {
transform: translateX(-50%);
}
/* ── Position variants (anchored to slide; panel top=0, bottom≈184) ── */
.evsh__slide--h .evsh__word--at-tl { top: -16px; left: 12px; }
.evsh__slide--h .evsh__word--at-tc { top: -18px; left: 50%; }
.evsh__slide--h .evsh__word--at-tr { top: -16px; right: 12px; }
.evsh__slide--h .evsh__word--at-bl { top: 162px; left: 12px; }
.evsh__slide--h .evsh__word--at-bc { top: 162px; left: 50%; }
.evsh__slide--h .evsh__word--at-br { top: 162px; right: 4px; }
/* Stacked middle — big plate sits centered on the portrait with
extra horizontal padding so it peeks out on both sides of the
smaller "ecomvision" pill that lands on top of it. */
.evsh__slide--h .evsh__word--at-mc {
top: 64px;
left: 42%;
padding: 13px 40px;
font-size: 19px;
background: rgba(255, 255, 255, 0.62);
}
.evsh__slide--h .evsh__word--at-mc-stack {
top: 76px;
left: 42%;
z-index: 12;
padding: 9px 22px;
font-size: 13px;
}
/* 3D hero — floats off the top-right corner, sits above subtitle line */
.evsh__slide--h .evsh__3d {
top: -22px;
right: -18px;
width: 112px;
height: 112px;
z-index: 5;
}
.evsh__slide--h .evsh__price-tag {
top: 55px;
right: -4px;
z-index: 6;
}
/* Floating compact cards — airy, asymmetric placement that lightly
overlaps the coloured panel's bottom corners. Widths are auto /
content-driven, not locked to a 50/50 row. TL sits a bit higher
than BR so the pair feels hand-placed, not grid-aligned. */
.evsh__slide--h .evsh__card--tl {
top: 140px;
left: -48px;
right: auto;
width: auto;
max-width: 188px;
min-height: 0;
}
.evsh__slide--h .evsh__card--br {
top: 208px;
right: -6px;
left: auto;
width: auto;
max-width: 180px;
min-height: 0;
}
/* (Former full-stage pastel bg removed per user feedback —
only the central panel carries colour now.) */
/* ---- Head row (eyebrow + metric chip) ---- */
.evsh__head {
position: absolute;
top: 16px; left: 16px; right: 16px;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
height: 30px;
}
.evsh__eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 11px 5px 8px;
border-radius: var(--r-pill);
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(10, 20, 60, 0.07);
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--sh-ink);
letter-spacing: -0.005em;
box-shadow: 0 6px 14px -10px rgba(10, 20, 60, 0.18);
opacity: 0;
transform: translateY(-6px);
transition:
opacity 520ms var(--ease-out),
transform 520ms var(--ease-spring-soft);
transition-delay: 80ms;
}
.evsh__pulse {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--sh-c1);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--sh-c1) 18%, transparent);
animation: evshPulse 2.2s ease-in-out infinite;
}
@keyframes evshPulse {
0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sh-c1) 18%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sh-c1) 6%, transparent); }
}
/* (Chip removed per feedback — clashed with 3D in top-right corner) */
.evsh__slide.is-active .evsh__eyebrow {
opacity: 1;
transform: translateY(0);
}
/* ---- Panel — coloured frosted-glass (per-slide tinted glows + noise) ---- */
.evsh__panel {
position: absolute;
top: 44px;
left: 50%;
transform: translateX(-50%) scale(0.97);
width: var(--evsh-panel-w);
height: var(--evsh-panel-h);
border-radius: 34px;
background:
/* 1. Top gloss reflection (bright glass edge) */
linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 8%),
/* 2. Top-left bright highlight */
radial-gradient(140% 55% at 22% 0%, rgba(255, 255, 255, 0.5), transparent 55%),
/* 3. Bottom-right COLOURED glow — per-slide bloom */
radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--sh-c1) 42%, transparent), transparent 60%),
/* 4. Left accent colour streak */
linear-gradient(100deg, color-mix(in srgb, var(--sh-c1) 18%, transparent) 0%, transparent 35%),
/* 5. SVG noise for frosted grain */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"),
/* 6. Base pastel gradient */
linear-gradient(160deg, var(--sh-pale) 0%, var(--sh-pale2) 100%);
box-shadow:
0 26px 52px -26px color-mix(in srgb, var(--sh-c1) 42%, transparent),
0 10px 22px -12px rgba(10, 20, 60, 0.12),
inset 0 1.5px 0 rgba(255, 255, 255, 0.7),
inset 0 0 0 1px color-mix(in srgb, var(--sh-c1) 26%, rgba(255, 255, 255, 0.25)),
inset 0 -1.5px 2px color-mix(in srgb, var(--sh-c1) 14%, transparent);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 26px 18px 22px;
overflow: hidden;
opacity: 0;
z-index: 2;
transition:
opacity 760ms var(--ease-out),
transform 760ms var(--ease-spring-soft);
transition-delay: 60ms;
}
/* Drifting specular highlight — tinted by slide colour */
.evsh__panel::after {
content: "";
position: absolute;
top: 0; left: -50%;
width: 150%; height: 100%;
background: linear-gradient(115deg,
transparent 35%,
color-mix(in srgb, var(--sh-c1) 14%, rgba(255, 255, 255, 0.4)) 48%,
color-mix(in srgb, var(--sh-c1) 18%, rgba(255, 255, 255, 0.22)) 52%,
transparent 65%);
pointer-events: none;
animation: evshGlassShine 12s ease-in-out infinite;
mix-blend-mode: overlay;
border-radius: inherit;
}
@keyframes evshGlassShine {
0%, 100% { transform: translateX(-25%); opacity: 0.6; }
50% { transform: translateX(25%); opacity: 1; }
}
.evsh__slide.is-active .evsh__panel {
opacity: 1;
transform: translateX(-50%) scale(1);
}
/* ---- Portrait — middle flex child of panel, auto-centred between words ---- */
.evsh__portrait {
position: relative;
width: var(--evsh-portrait);
height: var(--evsh-portrait);
border-radius: 50%;
overflow: hidden;
z-index: 3;
flex: 0 0 auto;
align-self: center;
background: color-mix(in srgb, var(--sh-c1) 30%, #ffffff);
opacity: 0;
transform: scale(0.94);
transition:
opacity 820ms var(--ease-out),
transform 820ms var(--ease-spring-soft);
transition-delay: 220ms;
box-shadow:
0 14px 30px -12px rgba(10, 20, 60, 0.22),
0 4px 10px -4px rgba(10, 20, 60, 0.14),
inset 0 0 0 3px rgba(255, 255, 255, 0.7);
}
.evsh__portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%;
display: block;
}
.evsh__slide.is-active .evsh__portrait {
opacity: 1;
transform: scale(1);
}
/* ---- Floating cards — compact horizontal default ---- */
.evsh__card {
position: absolute;
z-index: 6;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 11px 7px 7px;
background: #fff;
border: 1px solid rgba(10, 20, 60, 0.07);
border-radius: 12px;
box-shadow:
0 14px 28px -14px rgba(10, 20, 60, 0.22),
0 3px 8px -3px rgba(10, 20, 60, 0.10);
opacity: 0;
transform: translateY(10px) scale(0.94);
transition:
opacity 620ms var(--ease-out),
transform 620ms var(--ease-spring-soft);
transition-delay: var(--d, 240ms);
white-space: nowrap;
}
.evsh__slide.is-active .evsh__card {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Corner badges removed per feedback — cards are quieter now. */
/* Compact thumb — 34×34 icon tile */
.evsh__card-thumb {
flex: none;
width: 34px; height: 34px;
border-radius: 9px;
background: color-mix(in srgb, var(--sh-c1) 12%, #ffffff);
color: var(--sh-c1);
display: grid;
place-items: center;
}
.evsh__card-thumb svg { width: 20px; height: 20px; display: block; }
.evsh__card-thumb--spark { padding: 6px 5px; }
.evsh__card-thumb--bars {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 2px;
padding: 6px 5px;
}
.evsh__card-thumb--bars i {
display: block;
flex: 1;
max-width: 4px;
height: var(--h, 40%);
border-radius: 1px;
background: currentColor;
opacity: 0.88;
}
/* Card icon/logo thumb — circular, full-bleed (no white ring) */
.evsh__card-logo {
flex: none;
width: 36px; height: 36px;
border-radius: 50%;
overflow: hidden;
display: block;
position: relative;
}
.evsh__card-logo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Tinted icon tile (replaces marketplace-logo thumbs) */
.evsh__card-icon {
flex: none;
width: 36px; height: 36px;
border-radius: 12px;
display: grid;
place-items: center;
color: #fff;
}
.evsh__card-icon svg { width: 20px; height: 20px; display: block; }
.evsh__card-icon--blue { background: linear-gradient(135deg, #5C85F0, #3D66D6); }
.evsh__card-icon--amber { background: linear-gradient(135deg, #F2C140, #D9A414); }
.evsh__card-icon--green { background: linear-gradient(135deg, #5EBB6B, #3E9B4B); }
.evsh__card-icon--coral { background: linear-gradient(135deg, #F17F6C, #D55C4A); }
.evsh__card-logo--tg {
background: linear-gradient(135deg, #34AADF, #229ED9);
color: #fff;
padding: 6px;
}
.evsh__card-logo--tg svg { width: 100%; height: 100%; display: block; }
/* Card body */
.evsh__card-body {
display: flex;
flex-direction: column;
line-height: 1.15;
min-width: 0;
}
.evsh__card-body strong {
font-weight: 600;
font-size: 12.5px;
letter-spacing: -0.01em;
color: var(--ink);
white-space: nowrap;
}
.evsh__card-body span {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: -0.005em;
color: var(--muted);
margin-top: 1px;
white-space: nowrap;
}
.evsh__card-price {
font-style: normal;
font-weight: 600;
font-size: 11px;
color: var(--sh-c2);
letter-spacing: -0.01em;
margin-top: 4px;
display: inline-flex;
align-items: baseline;
gap: 5px;
}
.evsh__card-price s {
font-weight: 400;
color: var(--muted);
font-size: 10px;
text-decoration-thickness: 1px;
}
.evsh__card-price--solid {
padding: 3px 8px;
border-radius: var(--r-pill);
background: color-mix(in srgb, var(--sh-c1) 14%, #ffffff);
color: var(--sh-c2);
}
/* ---- 3D hero product — top-right, slightly outside panel ---- */
.evsh__3d {
position: absolute;
top: 4px;
right: -18px;
width: 140px;
height: 140px;
z-index: 4;
opacity: 0;
transform: translateY(18px) rotate(-10deg) scale(0.88);
transition:
opacity 820ms var(--ease-out),
transform 820ms var(--ease-spring-soft);
transition-delay: var(--d, 260ms);
filter:
drop-shadow(0 24px 30px rgba(10, 20, 60, 0.22))
drop-shadow(0 6px 10px rgba(10, 20, 60, 0.12));
pointer-events: none;
}
.evsh__3d img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.evsh__slide.is-active .evsh__3d {
opacity: 1;
transform: translateY(0) rotate(-8deg) scale(1);
animation: evsh3dFloat 5.5s ease-in-out infinite 1.3s;
}
@keyframes evsh3dFloat {
0%, 100% { transform: translateY(0) rotate(-8deg); }
50% { transform: translateY(-6px) rotate(-5deg); }
}
/* Variant: warm-tinted fallback (temporary, for slide 2 until dedicated 3D yellow asset lands) */
.evsh__3d--warm img {
filter: hue-rotate(22deg) saturate(1.15) brightness(1.03);
}
/* ---- Floating price tag — overlaps 3D product (raised higher per feedback) ---- */
.evsh__price-tag {
position: absolute;
top: 82px;
right: 6px;
z-index: 6;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
padding: 6px 12px 7px;
background: #fff;
border-radius: 12px;
border: 1px solid rgba(10, 20, 60, 0.07);
box-shadow:
0 10px 20px -10px rgba(10, 20, 60, 0.22),
0 3px 8px -3px rgba(10, 20, 60, 0.10);
line-height: 1.08;
opacity: 0;
transform: translateY(6px) scale(0.92);
transition:
opacity 620ms var(--ease-out),
transform 620ms var(--ease-spring-soft);
transition-delay: var(--d, 440ms);
}
.evsh__price-tag-val {
font-weight: 600;
font-size: 13px;
letter-spacing: -0.01em;
color: var(--sh-ink);
}
.evsh__price-tag-old {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
text-decoration: line-through;
text-decoration-thickness: 1px;
margin-top: 3px;
}
.evsh__slide.is-active .evsh__price-tag {
opacity: 1;
transform: translateY(0) scale(1);
}
.evsh__slide.is-active .evsh__price-tag {
animation: evshFloatB 7s ease-in-out infinite 1.6s;
}
body:not(.is-hero-settled) .evsh__panel {
transition-delay: 720ms;
}
body:not(.is-hero-settled) .evsh__portrait {
transition-delay: 880ms;
}
body:not(.is-hero-settled) .evsh__slide--h .evsh__word {
transition-delay: 1040ms;
}
body:not(.is-hero-settled) .evsh__slide--h .evsh__word--bot {
transition-delay: 1140ms;
}
body:not(.is-hero-settled) .evsh__3d {
transition-delay: 960ms;
animation-delay: 2100ms;
}
body:not(.is-hero-settled) .evsh__price-tag {
transition-delay: 1220ms;
animation-delay: 2200ms;
}
body:not(.is-hero-settled) .evsh__card {
transition-delay: calc(var(--d, 240ms) + 940ms);
}
/* ============================================================
Unique card variants — each plashka has its own identity.
(Telegram bubble, live ticker, product preview, search rank,
bidder bars, donut ring, integration flow, clock face.)
============================================================ */
.evsh__tg,
.evsh__growth,
.evsh__audit,
.evsh__rank,
.evsh__bidder,
.evsh__donut,
.evsh__stack,
.evsh__clock {
padding: 10px 12px;
align-items: stretch;
gap: 6px;
min-width: 156px;
white-space: normal;
flex-direction: column;
}
/* 1. Telegram notification bubble */
.evsh__tg .evsh__tg-head { display: flex; align-items: center; gap: 8px; }
.evsh__tg-avatar {
flex: none;
width: 26px; height: 26px;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(135deg, #34AADF, #229ED9);
box-shadow: 0 3px 8px -2px rgba(34, 158, 217, 0.45);
}
.evsh__tg-avatar svg { width: 14px; height: 14px; }
.evsh__tg-meta { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.evsh__tg-meta strong { font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.evsh__tg-meta span { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); margin-top: 1px; }
.evsh__tg-msg {
font-size: 11.5px;
line-height: 1.35;
color: var(--ink-soft);
padding: 6px 10px;
background: color-mix(in srgb, var(--sh-c1) 10%, #ffffff);
border-radius: 10px 10px 10px 3px;
letter-spacing: -0.005em;
}
.evsh__tg-msg b { color: var(--sh-c2); font-weight: 600; }
/* 2. Growth widget — big percentage + area sparkline */
.evsh__growth .evsh__growth-head {
display: flex;
justify-content: space-between;
align-items: center;
}
.evsh__growth-label {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.evsh__growth-arrow {
width: 18px; height: 18px;
border-radius: 50%;
display: grid; place-items: center;
background: color-mix(in srgb, var(--sh-c1) 18%, #ffffff);
color: var(--sh-c2);
}
.evsh__growth-arrow svg { width: 10px; height: 10px; }
.evsh__growth-val {
font-size: 26px;
font-weight: 600;
letter-spacing: -0.03em;
color: var(--sh-c2);
line-height: 1;
display: inline-flex;
align-items: baseline;
gap: 2px;
}
.evsh__growth-val small {
font-size: 14px;
font-weight: 500;
opacity: 0.7;
}
.evsh__growth-spark { width: 100%; height: 24px; color: var(--sh-c1); }
/* 3. Content audit — progress bar + checklist */
.evsh__audit .evsh__audit-head {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.evsh__audit-head strong {
font-size: 12.5px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink);
}
.evsh__audit-pct {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--sh-c2);
letter-spacing: -0.01em;
}
.evsh__audit-bar {
display: block;
width: 100%;
height: 3px;
background: color-mix(in srgb, var(--sh-c1) 14%, #ffffff);
border-radius: 99px;
overflow: hidden;
}
.evsh__audit-bar em {
display: block;
width: var(--w, 50%);
height: 100%;
background: linear-gradient(90deg, var(--sh-c1), var(--sh-c2));
border-radius: 99px;
animation: evshAuditFill 1.4s var(--ease-spring) 400ms backwards;
}
@keyframes evshAuditFill {
from { width: 0; }
to { width: var(--w, 50%); }
}
.evsh__audit-list {
display: flex;
flex-direction: column;
gap: 4px;
list-style: none;
padding: 0;
margin: 0;
}
.evsh__audit-list li {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink-soft);
letter-spacing: -0.005em;
}
.evsh__audit-list svg {
width: 12px; height: 12px;
color: var(--sh-c2);
flex: none;
}
/* 4. Search rank (big #1) */
.evsh__rank { flex-direction: row !important; align-items: center; gap: 10px; }
.evsh__rank-num {
flex: none;
font-size: 30px;
font-weight: 600;
letter-spacing: -0.04em;
line-height: 1;
color: var(--sh-c2);
display: inline-flex;
align-items: baseline;
}
.evsh__rank-hash { font-size: 14px; color: color-mix(in srgb, var(--sh-c2) 55%, transparent); margin-right: 1px; }
.evsh__rank-body { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; min-width: 0; }
.evsh__rank-body strong { font-weight: 600; font-size: 12px; letter-spacing: -0.01em; color: var(--ink); }
.evsh__rank-body span { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
/* 5. Bidder competing bars */
.evsh__bidder .evsh__bidder-bars {
display: flex;
align-items: flex-end;
gap: 3px;
height: 26px;
padding: 2px 0;
}
.evsh__bidder-bars i {
flex: 1;
height: var(--h, 50%);
min-height: 2px;
border-radius: 2px 2px 1px 1px;
background: color-mix(in srgb, var(--sh-c1) 22%, #ffffff);
}
.evsh__bidder-bars i[style*="--active"] {
background: linear-gradient(180deg, var(--sh-c1), var(--sh-c2));
box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--sh-c1) 55%, transparent);
}
.evsh__bidder-body strong { font-weight: 600; font-size: 13px; letter-spacing: -0.01em; color: var(--ink); }
.evsh__bidder-body span { font-family: var(--font-mono); font-size: 10px; color: var(--muted); display: block; margin-top: 2px; }
/* 6. Donut ring metric */
.evsh__donut { flex-direction: row !important; align-items: center; gap: 10px; }
.evsh__donut-ring {
flex: none;
position: relative;
width: 44px; height: 44px;
color: var(--sh-c2);
}
.evsh__donut-ring svg { width: 100%; height: 100%; display: block; }
.evsh__donut-num {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 10.5px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
}
.evsh__donut-body { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; min-width: 0; }
.evsh__donut-body strong { font-weight: 600; font-size: 13px; letter-spacing: -0.01em; color: var(--ink); }
.evsh__donut-body span { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
/* 7. API status list — 3 rows with marketplace logo + name + online dot */
.evsh__stack .evsh__stack-head {
display: flex;
align-items: center;
gap: 6px;
}
.evsh__stack-head strong {
font-size: 12.5px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink);
margin-right: auto;
}
.evsh__stack-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #23C552;
box-shadow: 0 0 0 3px rgba(35, 197, 82, 0.22);
animation: evshPulse 2s ease-in-out infinite;
flex: none;
}
.evsh__stack-tag {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #23C552;
padding: 2px 7px;
border-radius: 99px;
background: rgba(35, 197, 82, 0.12);
}
.evsh__stack-rows {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.evsh__stack-rows li {
display: grid;
grid-template-columns: 22px 1fr auto;
align-items: center;
gap: 8px;
}
.evsh__stack-icn {
width: 22px; height: 22px;
border-radius: 7px;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--sh-c1) 14%, #ffffff);
color: var(--sh-c2);
flex: none;
}
.evsh__stack-icn svg { width: 12px; height: 12px; display: block; }
.evsh__stack-name {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--ink-soft);
letter-spacing: -0.005em;
}
.evsh__stack-status {
width: 6px; height: 6px;
border-radius: 50%;
background: #23C552;
box-shadow: 0 0 0 2.5px rgba(35, 197, 82, 0.22);
}
/* 8. Clock / SLA timer */
.evsh__clock { flex-direction: row !important; align-items: center; gap: 10px; }
.evsh__clock-face { flex: none; width: 42px; height: 42px; color: var(--sh-c2); }
.evsh__clock-face svg {
width: 100%; height: 100%;
display: block;
animation: evshClockSpin 40s linear infinite;
transform-origin: center;
}
@keyframes evshClockSpin {
to { transform: rotate(360deg); }
}
.evsh__clock-body { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; min-width: 0; }
.evsh__clock-body strong { font-weight: 600; font-size: 13px; letter-spacing: -0.01em; color: var(--ink); }
.evsh__clock-body span { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); }
/* Per-card placement — stage 360×400, panel 208×308 at top=44.
3D hero TR + price-tag. TL sits MID-LEFT, BR sits MID-RIGHT — both raised
per user feedback so they align tighter and look premium. */
.evsh__card--tl { top: 168px; left: -6px; max-width: 170px; }
.evsh__card--br { top: 218px; right: -6px; max-width: 186px; left: auto; }
/* (Mid-right pill removed per feedback — it overlapped the portrait) */
/* Gentle idle float on cards when active */
.evsh__slide.is-active .evsh__card--tl { animation: evshFloatA 7s ease-in-out infinite 900ms; }
.evsh__slide.is-active .evsh__card--br { animation: evshFloatB 8s ease-in-out infinite 1400ms; }
/* Horizontal layout keeps the two cards rigidly aligned as a row */
.evsh__slide--h.is-active .evsh__card--tl,
.evsh__slide--h.is-active .evsh__card--br { animation: none; }
@keyframes evshFloatA {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-2px, -4px); }
}
@keyframes evshFloatB {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(3px, -3px); }
}
@keyframes evshFloatC {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-2px, 3px); }
}
/* ════════════════════════════════════════════════════════════
CARD ANIMATIONS — restrained, tasteful, replay per slide
Rule: at most 2 active animations per card. No infinite loops
on big elements. Stagger ~80ms. Easing always natural.
════════════════════════════════════════════════════════════ */
/* ── 1. TELEGRAM BOT ── online dot + message slide-in ── */
.evsh__tg-avatar { position: relative; }
.evsh__tg-online {
position: absolute;
bottom: -1px; right: -1px;
width: 8px; height: 8px;
border-radius: 50%;
background: #23C552;
border: 1.5px solid #fff;
animation: evshTgOnline 2s ease-in-out infinite;
}
@keyframes evshTgOnline {
0%, 100% { box-shadow: 0 0 0 0 rgba(35,197,82,0.5); }
60% { box-shadow: 0 0 0 4px rgba(35,197,82,0); }
}
.evsh__tg-msg b { color: var(--sh-c2); font-weight: 600; }
.evsh__slide.is-active .evsh__tg-msg {
animation: evshTgMsgIn 460ms cubic-bezier(0.22, 1, 0.36, 1) 600ms backwards;
}
@keyframes evshTgMsgIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── 2. AUDIT — bar fill (already exists) + checks fade-in ── */
.evsh__slide.is-active .evsh__audit-list li {
animation: evshAuditCheckIn 360ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.evsh__slide.is-active .evsh__audit-list li:nth-child(1) { animation-delay: 900ms; }
.evsh__slide.is-active .evsh__audit-list li:nth-child(2) { animation-delay: 1020ms; }
.evsh__slide.is-active .evsh__audit-list li:nth-child(3) { animation-delay: 1140ms; }
@keyframes evshAuditCheckIn {
from { opacity: 0; transform: translateX(-6px); }
to { opacity: 1; transform: translateX(0); }
}
/* ── 3. BIDDER — bars rise + active pulse + WON badge ── */
.evsh__bidder-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.evsh__bidder-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
min-width: 0;
}
.evsh__bidder-row strong {
font-weight: 600;
font-size: 13px;
letter-spacing: -0.01em;
color: var(--ink);
white-space: nowrap;
}
.evsh__bidder-sub {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
}
.evsh__bidder-won {
flex: none;
font-family: var(--font-mono);
font-size: 8.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
background: #23C552;
padding: 2px 6px;
border-radius: 99px;
box-shadow: 0 1px 4px -1px rgba(35,197,82,0.55);
opacity: 0;
}
.evsh__bidder-bars i { transform-origin: bottom; }
.evsh__slide.is-active .evsh__bidder-bars i {
animation: evshBidderRise 600ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.evsh__slide.is-active .evsh__bidder-bars i:nth-child(1) { animation-delay: 400ms; }
.evsh__slide.is-active .evsh__bidder-bars i:nth-child(2) { animation-delay: 480ms; }
.evsh__slide.is-active .evsh__bidder-bars i:nth-child(3) { animation-delay: 560ms; }
.evsh__slide.is-active .evsh__bidder-bars i:nth-child(4) { animation-delay: 640ms; }
.evsh__slide.is-active .evsh__bidder-bars i:nth-child(5) { animation-delay: 720ms; }
.evsh__slide.is-active .evsh__bidder-bars i:nth-child(6) { animation-delay: 800ms; }
@keyframes evshBidderRise {
from { transform: scaleY(0.05); opacity: 0; }
to { transform: scaleY(1); opacity: 1; }
}
.evsh__slide.is-active .evsh__bidder-won {
animation: evshBidderWonIn 380ms cubic-bezier(0.22, 1, 0.36, 1) 1100ms forwards;
}
@keyframes evshBidderWonIn {
from { opacity: 0; transform: translateY(-3px) scale(0.85); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ── 4. API STACK — rows stagger + status ping (no scan-line) ── */
.evsh__slide.is-active .evsh__stack-rows li {
animation: evshStackRowIn 360ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.evsh__slide.is-active .evsh__stack-rows li:nth-child(1) { animation-delay: 500ms; }
.evsh__slide.is-active .evsh__stack-rows li:nth-child(2) { animation-delay: 620ms; }
.evsh__slide.is-active .evsh__stack-rows li:nth-child(3) { animation-delay: 740ms; }
@keyframes evshStackRowIn {
from { opacity: 0; transform: translateX(-6px); }
to { opacity: 1; transform: translateX(0); }
}
.evsh__stack-rows li .evsh__stack-status {
animation: evshStackPing 2.2s ease-in-out infinite;
}
.evsh__stack-rows li:nth-child(1) .evsh__stack-status { animation-delay: 0s; }
.evsh__stack-rows li:nth-child(2) .evsh__stack-status { animation-delay: 0.4s; }
.evsh__stack-rows li:nth-child(3) .evsh__stack-status { animation-delay: 0.8s; }
@keyframes evshStackPing {
0%, 100% { box-shadow: 0 0 0 0 rgba(35,197,82,0.5); }
60% { box-shadow: 0 0 0 4px rgba(35,197,82,0); }
}
/* (Dots navigation removed per feedback — autoplay only, no explicit controls below) */
/* ---- Desktop hero: title+logos sit a bit below the top of the left
column, slides vertically centered on the right. Bottom row (lead
text + audit link) pulled up toward the middle. ---- */
@media (min-width: 901px) {
.promo__main { align-items: stretch; }
.promo__col--text { align-self: start; padding-top: 60px; }
.evsh { align-self: center; }
.promo__bottom { margin-top: -40px; padding-top: 12px; }
}
/* ---- Responsive: tablet-ish (narrower right rail) ---- */
@media (max-width: 1180px) {
.promo__main {
grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
gap: 32px;
}
.evsh {
--evsh-stage-h: 380px;
--evsh-panel-w: 200px;
--evsh-panel-h: 296px;
--evsh-portrait: 122px;
max-width: 400px;
}
.evsh__word { font-size: 26px; }
.evsh__word--bot { font-size: 19px; }
.evsh__card--tl { top: 168px; left: 0; }
.evsh__card--br { top: 218px; right: 0; left: auto; }
.evsh__3d { width: 136px; height: 136px; right: -8px; top: 6px; }
.evsh__price-tag { top: 62px; right: 8px; }
}
/* ---- Responsive: single-column stack ---- */
@media (max-width: 900px) {
.promo__main {
grid-template-columns: 1fr;
gap: 36px;
}
.evsh {
--evsh-stage-h: 400px;
--evsh-panel-w: 208px;
--evsh-panel-h: 308px;
--evsh-portrait: 124px;
max-width: 340px;
justify-self: center;
width: 100%;
}
.evsh__word { font-size: 26px; }
.evsh__word--bot { font-size: 20px; }
.evsh__card--tl { top: 168px; left: 2px; }
.evsh__card--br { top: 218px; right: 2px; left: auto; }
.evsh__3d { width: 140px; height: 140px; right: -14px; top: 4px; }
.evsh__price-tag { top: 58px; right: 6px; }
}
@media (max-width: 520px) {
.evsh {
--evsh-stage-h: 380px;
--evsh-panel-w: 188px;
--evsh-panel-h: 286px;
--evsh-portrait: 114px;
max-width: 316px;
}
.evsh__word { font-size: 22px; }
.evsh__word--bot { font-size: 17px; }
.evsh__card { padding: 6px 10px 6px 6px; gap: 7px; }
.evsh__card-thumb, .evsh__card-logo { width: 30px; height: 30px; }
.evsh__3d { width: 126px; height: 126px; right: -12px; top: 8px; }
.evsh__price-tag { top: 50px; padding: 5px 10px; right: 6px; }
.evsh__price-tag-val { font-size: 12px; }
.evsh__card-body strong { font-size: 11px; }
.evsh__card-body span { font-size: 9.5px; }
/* Only the two badges that overflow on mobile — raise them higher.
2-class specificity needed to beat the .evsh__slide--h .evsh__card--tl
rule defined earlier in the file (which has top: 140px). */
.evsh__slide--h .evsh__audit.evsh__card--tl,
.evsh__slide--h .evsh__stack.evsh__card--tl { top: 56px; }
}
/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
.promo__status,
.promo__title-line,
.promo__avatar,
.promo__logos,
.promo__logo,
.promo__lead-body,
.promo__lead-caption,
.promo__meta .promo__link,
.promo__note,
.evsh,
.evsh__stage,
.evsh__slide,
.evsh__panel,
.evsh__word,
.evsh__portrait,
.evsh__portrait img,
.evsh__eyebrow,
.evsh__card,
.evsh__3d,
.evsh__price-tag {
animation: none !important;
transition: opacity 200ms ease !important;
transform: none !important;
opacity: 1 !important;
filter: none !important;
clip-path: none !important;
}
.evsh__portrait { transform: none !important; }
.evsh__panel { transform: translateX(-50%) !important; }
.evsh__slide--h .evsh__panel { transform: none !important; }
.evsh__3d { transform: rotate(-6deg) !important; }
.evsh__pulse { animation: none !important; }
}
/* ============================================================
HERO STATS STRIP
============================================================ */
.hero-stats {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--bg-alt);
}
.hero-stats__inner {
max-width: var(--container);
margin: 0 auto;
padding: 32px var(--pad-x);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.hero-stat {
display: flex; flex-direction: column; gap: 8px;
padding-right: 24px;
border-right: 1px solid var(--line);
}
.hero-stat:last-child { border-right: 0; }
.hero-stat__num {
font-size: clamp(32px, 3.6vw, 48px);
font-weight: 500;
letter-spacing: -0.03em;
line-height: 1;
color: var(--ink);
}
.hero-stat__num span {
font-size: 0.55em;
color: var(--muted);
font-weight: 400;
letter-spacing: -0.02em;
margin-left: 2px;
}
.hero-stat__label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
line-height: 1.45;
}
/* ============================================================
CLIENTS (marquee)
============================================================ */
.clients {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 28px 0;
margin-top: 64px;
background: var(--bg);
overflow: hidden;
position: relative;
mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee {
display: flex;
gap: 0;
width: max-content;
animation: marquee-scroll 40s linear infinite;
}
.marquee__track {
display: flex; align-items: center; gap: 36px;
padding-right: 36px;
}
.marquee__item {
font-size: 28px;
letter-spacing: -0.02em;
color: var(--ink);
}
.marquee__sep {
font-family: var(--font-mono);
color: var(--mute-2);
font-size: 22px;
}
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ============================================================
PARTNERS
============================================================ */
.partners {
border-bottom: 1px solid var(--line);
background: var(--bg-alt);
}
.partners__inner {
max-width: var(--container);
margin: 0 auto;
padding: 64px var(--pad-x) 72px;
}
.partners__head {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 10px 24px;
margin-bottom: 40px;
}
.partners__title {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 20px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.018em;
color: var(--ink);
}
.partners__verified {
width: 18px; height: 18px;
display: block;
flex: none;
transform: scale(0.6) translateY(1px);
opacity: 0;
animation: partnersVerifiedIn 460ms cubic-bezier(0.34, 1.5, 0.5, 1) 180ms forwards;
}
@keyframes partnersVerifiedIn {
to { transform: scale(1) translateY(1px); opacity: 1; }
}
.partners__hint {
font-family: var(--font-mono);
font-size: 11px;
color: var(--mute-2);
letter-spacing: 0.04em;
text-transform: lowercase;
}
.partners__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.partner {
display: grid;
grid-template-rows: auto minmax(2.6em, auto) 1fr;
row-gap: 12px;
position: relative;
transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.partner:hover { transform: translateY(-3px); }
.partner__year {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--royal);
letter-spacing: 0.04em;
text-transform: lowercase;
justify-self: flex-start;
transition: color 260ms var(--ease);
}
.partner:hover .partner__year { color: var(--royal-deep); }
.partner__name {
font-size: 16px;
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.018em;
color: var(--ink);
align-self: start;
}
.partner__name::after {
content: "";
display: block;
margin-top: 10px;
width: 22px;
height: 1px;
background: var(--mute-2);
opacity: 0.5;
transition:
width 380ms cubic-bezier(0.22, 1, 0.36, 1),
background 320ms var(--ease),
opacity 320ms var(--ease);
}
.partner:hover .partner__name::after {
width: 42px;
background: var(--ink);
opacity: 1;
}
.partner__desc {
font-size: 13px;
line-height: 1.55;
color: var(--muted);
margin: 0;
letter-spacing: -0.005em;
align-self: start;
}
/* ============================================================
MANIFESTO
============================================================ */
/* Sticky-stack wrapper bounds the sticky range so manifesto only stays
pinned while .services scrolls up over it. When the stack ends, sticky
releases automatically. */
.sticky-stack { position: relative; }
.manifesto {
padding: 140px var(--pad-x);
max-width: var(--container);
margin: 0 auto;
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Atmosphere — 4 oversized morphing blobs behind the content.
Why this reads as alive and why there are no hard edges:
— Orbs are 540-960px (bigger than the visible area). Their radial-gradient
falloff happens off-canvas, so when they drift near .manifesto's
overflow-clip boundary there's nothing solid to cut — only near-transparent
pixels.
— `.manifesto__atmosphere` carries its own radial mask that fades to 0
well BEFORE the clip border. Anything that does touch the edge is
already transparent, so the clip seam becomes invisible.
— Each orb has an irregular border-radius that morphs on its own cycle
(41/53/59/67s) AND drifts with rotate on another (67/79/89/97s) — two
coprime rhythms, so the shape never repeats.
— A separate opacity "breath" loop (13/17/19/23s) decouples brightness
from position.
— One pale orb uses mix-blend-mode: plus-lighter → soft light-leak. */
.manifesto__atmosphere {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
/* Horizontal fade: keeps centre visible, guarantees edges reach 0 opacity
well before the section clip boundary — no hard cut-off possible. */
-webkit-mask-image: linear-gradient(90deg,
transparent 0%, rgba(0,0,0,0.4) 6%, #000 15%, #000 85%, rgba(0,0,0,0.4) 94%, transparent 100%);
mask-image: linear-gradient(90deg,
transparent 0%, rgba(0,0,0,0.4) 6%, #000 15%, #000 85%, rgba(0,0,0,0.4) 94%, transparent 100%);
}
.manifesto__orb {
position: absolute;
opacity: 0;
will-change: transform, border-radius, opacity;
}
/* All orbs: use transform-based centering (translate -50%) so the centre
sits at the (left, top) % and the radial gradient's transparent falloff
naturally lives at the clip boundary. */
.manifesto__orb {
transform: translate(-50%, -50%);
}
/* A — brand navy, upper-left quadrant */
.manifesto__orb--a {
width: 820px; height: 820px;
left: 22%; top: 28%;
background: radial-gradient(circle at 50% 50%,
rgba(24, 72, 200, 0.24) 0%,
rgba(24, 72, 200, 0.09) 38%,
transparent 72%);
filter: blur(110px);
border-radius: 52% 48% 62% 38% / 44% 56% 44% 56%;
animation:
manifestoFade 3200ms ease-out 200ms forwards,
manifestoBreathA 8s ease-in-out 3s infinite,
manifestoDriftA 38s linear 0s infinite,
manifestoMorphA 23s ease-in-out 0s infinite;
}
/* B — warm amber, lower-right quadrant */
.manifesto__orb--b {
width: 760px; height: 760px;
left: 78%; top: 72%;
background: radial-gradient(circle at 50% 50%,
rgba(255, 175, 60, 0.22) 0%,
rgba(255, 175, 60, 0.08) 40%,
transparent 75%);
filter: blur(100px);
border-radius: 48% 52% 40% 60% / 54% 46% 54% 46%;
animation:
manifestoFade 3200ms ease-out 450ms forwards,
manifestoBreathB 11s ease-in-out 3.5s infinite,
manifestoDriftB 43s linear 0s infinite,
manifestoMorphB 29s ease-in-out 0s infinite;
}
/* C — cool mint, centre-bottom (depth) */
.manifesto__orb--c {
width: 700px; height: 700px;
left: 55%; top: 92%;
background: radial-gradient(circle at 50% 50%,
rgba(80, 200, 170, 0.16) 0%,
rgba(80, 200, 170, 0.05) 48%,
transparent 78%);
filter: blur(120px);
border-radius: 58% 42% 50% 50% / 40% 60% 40% 60%;
animation:
manifestoFade 3200ms ease-out 700ms forwards,
manifestoBreathC 13s ease-in-out 2s infinite,
manifestoDriftC 47s linear 0s infinite,
manifestoMorphC 31s ease-in-out 0s infinite;
}
/* D — pale highlight, luminous "light leak" (upper-centre) */
.manifesto__orb--d {
width: 480px; height: 480px;
left: 48%; top: 22%;
background: radial-gradient(circle at 50% 50%,
rgba(255, 255, 255, 0.30) 0%,
rgba(255, 255, 255, 0.08) 40%,
transparent 75%);
filter: blur(90px);
border-radius: 60% 40% 55% 45% / 50% 50% 45% 55%;
mix-blend-mode: plus-lighter;
animation:
manifestoFade 3200ms ease-out 950ms forwards,
manifestoBreathD 17s ease-in-out 4s infinite,
manifestoDriftD 53s linear 0s infinite,
manifestoMorphD 37s ease-in-out 0s infinite;
}
@keyframes manifestoFade { to { opacity: 1; } }
/* Breath (opacity only) */
@keyframes manifestoBreathA { 0%,100% { opacity: 0.85; } 50% { opacity: 1.00; } }
@keyframes manifestoBreathB { 0%,100% { opacity: 0.90; } 50% { opacity: 1.00; } }
@keyframes manifestoBreathC { 0%,100% { opacity: 0.72; } 50% { opacity: 0.95; } }
@keyframes manifestoBreathD { 0%,100% { opacity: 0.55; } 50% { opacity: 0.90; } }
/* Drift — noticeably larger amplitude (~100-180px) so motion is visible */
@keyframes manifestoDriftA {
0% { transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg); }
20% { transform: translate(-50%, -50%) translate3d(90px, -60px, 0) rotate(18deg); }
40% { transform: translate(-50%, -50%) translate3d(140px, 40px, 0) rotate(32deg); }
60% { transform: translate(-50%, -50%) translate3d(80px, 110px, 0) rotate(22deg); }
80% { transform: translate(-50%, -50%) translate3d(-40px, 90px, 0) rotate(8deg); }
100% { transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes manifestoDriftB {
0% { transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg); }
20% { transform: translate(-50%, -50%) translate3d(-100px, -50px, 0) rotate(-16deg); }
40% { transform: translate(-50%, -50%) translate3d(-160px, 50px, 0) rotate(-28deg); }
60% { transform: translate(-50%, -50%) translate3d(-70px, 120px, 0) rotate(-18deg); }
80% { transform: translate(-50%, -50%) translate3d( 30px, 70px, 0) rotate(-6deg); }
100% { transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes manifestoDriftC {
0% { transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg); }
25% { transform: translate(-50%, -50%) translate3d(-60px, -70px, 0) rotate(12deg); }
50% { transform: translate(-50%, -50%) translate3d( 80px, -40px, 0) rotate(-10deg); }
75% { transform: translate(-50%, -50%) translate3d( 40px, 80px, 0) rotate(14deg); }
100% { transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes manifestoDriftD {
0% { transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg) scale(1); }
20% { transform: translate(-50%, -50%) translate3d(80px, -30px, 0) rotate(22deg) scale(1.12); }
40% { transform: translate(-50%, -50%) translate3d(140px, 40px, 0) rotate(38deg) scale(1.04); }
60% { transform: translate(-50%, -50%) translate3d(60px, 90px, 0) rotate(28deg) scale(1.18); }
80% { transform: translate(-50%, -50%) translate3d(-40px, 40px, 0) rotate(12deg) scale(1.06); }
100% { transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg) scale(1); }
}
/* Morph — organic irregular border-radius shifts */
@keyframes manifestoMorphA {
0%, 100% { border-radius: 52% 48% 62% 38% / 44% 56% 44% 56%; }
25% { border-radius: 58% 42% 54% 46% / 48% 52% 48% 52%; }
50% { border-radius: 46% 54% 50% 50% / 56% 44% 52% 48%; }
75% { border-radius: 54% 46% 58% 42% / 42% 58% 54% 46%; }
}
@keyframes manifestoMorphB {
0%, 100% { border-radius: 48% 52% 40% 60% / 54% 46% 54% 46%; }
25% { border-radius: 54% 46% 44% 56% / 48% 52% 58% 42%; }
50% { border-radius: 42% 58% 48% 52% / 58% 42% 50% 50%; }
75% { border-radius: 50% 50% 52% 48% / 46% 54% 46% 54%; }
}
@keyframes manifestoMorphC {
0%, 100% { border-radius: 58% 42% 50% 50% / 40% 60% 40% 60%; }
33% { border-radius: 48% 52% 56% 44% / 52% 48% 52% 48%; }
66% { border-radius: 52% 48% 44% 56% / 46% 54% 50% 50%; }
}
@keyframes manifestoMorphD {
0%, 100% { border-radius: 60% 40% 55% 45% / 50% 50% 45% 55%; }
50% { border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%; }
}
@media (prefers-reduced-motion: reduce) {
.manifesto__orb {
animation: manifestoFade 800ms ease-out 200ms forwards !important;
}
}
.manifesto__inner { max-width: 1000px; position: relative; z-index: 1; }
.manifesto__tag {
display: inline-flex;
align-items: center;
gap: 0;
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
margin-bottom: 32px;
letter-spacing: 0.02em;
}
.manifesto__text {
font-size: clamp(24px, 2.8vw, 40px);
line-height: 1.25;
letter-spacing: -0.02em;
font-weight: 500;
display: flex; flex-direction: column; gap: 18px;
max-width: 900px;
}
.manifesto__muted { color: var(--muted); font-weight: 400; }
.manifesto__text em {
font-style: normal;
background: linear-gradient(95deg, var(--royal) 0%, var(--royal-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Background grid for the manifesto block. */
.manifesto__orb { display: none; }
.manifesto__atmosphere {
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.manifesto__atmosphere::after {
content: "";
position: absolute;
inset: 18% -8% 12%;
background:
linear-gradient(rgba(10,10,10,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(10,10,10,0.045) 1px, transparent 1px);
background-size: 48px 48px;
transform: rotate(-2deg);
opacity: 0.7;
z-index: 0;
}
/* Principles — editorial monochrome: ink rule on top, amber hairline slides
over it on hover, title glides right, meta tags darken. No icons, no colors,
no cards. Pure typography hierarchy. */
.manifesto__principles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
margin-top: 96px;
}
.principle {
display: flex; flex-direction: column; gap: 14px;
position: relative;
padding: 28px 20px 4px 0;
border-top: 1px solid var(--ink);
min-height: 230px;
}
.principle::before {
content: "";
position: absolute;
top: -1px;
left: 0;
height: 1px;
width: 0;
background: var(--amber);
transition: width 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
.principle:hover::before { width: 42%; }
.principle__num {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink);
letter-spacing: 0.04em;
display: inline-flex; align-items: baseline; gap: 4px;
}
.principle__num em {
font-style: normal;
color: var(--mute-2);
font-size: 11px;
letter-spacing: 0.02em;
}
.principle__title {
font-size: 22px;
letter-spacing: -0.02em;
font-weight: 500;
line-height: 1.2;
margin: 0;
transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.principle:hover .principle__title { transform: translateX(6px); }
.principle__desc {
font-size: 14px;
color: var(--muted);
line-height: 1.55;
margin: 0;
}
.principle__meta {
margin-top: auto;
padding-top: 20px;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--mute-2);
letter-spacing: 0.06em;
transition: color 320ms var(--ease);
}
.principle:hover .principle__meta { color: var(--ink); }
/* ============================================================
SERVICES
============================================================ */
.services {
max-width: var(--container);
margin: 0 auto;
padding: 80px var(--pad-x);
}
.services__head { margin-bottom: 56px; max-width: 900px; }
.services__label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
margin-bottom: 16px;
}
.services__title {
font-size: clamp(32px, 4.4vw, 60px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 500;
}
.services__title em {
font-style: normal;
color: var(--muted);
}
.services__intro {
font-size: 16px;
color: var(--muted);
line-height: 1.5;
max-width: 640px;
margin-top: 20px;
}
.services__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.svc-card {
--theme: var(--royal);
position: relative;
background: var(--card);
border-radius: var(--r-lg);
padding: 32px;
display: flex; flex-direction: column; gap: 18px;
min-height: 440px;
transition:
background 280ms var(--ease-hover),
transform 280ms var(--ease-hover),
box-shadow 280ms var(--ease-hover);
overflow: hidden;
}
.svc-card[data-theme="market"] { --theme: var(--theme-market); }
.svc-card[data-theme="creative"] { --theme: var(--theme-creative); }
.svc-card[data-theme="infra"] { --theme: var(--theme-infra); }
.svc-card::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(600px 300px at 100% 0%, color-mix(in srgb, var(--theme) 18%, transparent), transparent 60%);
opacity: 0;
transition: opacity 280ms var(--ease-hover);
pointer-events: none;
}
.svc-card:hover::before { opacity: 1; }
.svc-card:hover { transform: translateY(-4px); }
.svc-card__head {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
.svc-card__num { color: var(--theme); font-weight: 500; }
.svc-card__title {
font-size: 28px;
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: 500;
}
.svc-card__desc {
font-size: 14px;
color: var(--muted);
line-height: 1.5;
}
.svc-card__list {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: auto;
}
.svc-card__list li {
font-family: var(--font-mono);
font-size: 12px;
padding: 5px 10px;
border: 1px solid var(--line);
border-radius: var(--r-pill);
background: var(--bg);
color: var(--ink-soft);
transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.svc-card:hover .svc-card__list li { border-color: color-mix(in srgb, var(--theme) 40%, var(--line)); }
.svc-card__platforms {
display: flex; flex-wrap: wrap; gap: 10px;
padding-top: 18px;
margin-top: 4px;
border-top: 1px dashed var(--line);
}
.svc-card__platforms span {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: -0.005em;
}
.svc-card__platforms span::before {
content: "→ ";
color: var(--theme);
}
.svc-card__cta {
font-family: var(--font-mono);
font-size: 13px;
color: var(--ink);
margin-top: 6px;
display: inline-flex; align-items: center; gap: 6px;
transition: gap 200ms var(--ease), color 200ms var(--ease);
}
.svc-card__cta:hover { color: var(--theme); gap: 10px; }
/* ============================================================
CUSTOM DEVELOPMENT
============================================================ */
.dev {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background:
linear-gradient(rgba(10,10,10,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(10,10,10,0.035) 1px, transparent 1px),
var(--bg-alt);
background-size: 48px 48px;
}
.dev__inner {
max-width: var(--container);
margin: 0 auto;
padding: 108px var(--pad-x);
}
.dev__head {
max-width: 920px;
margin-bottom: 48px;
}
.dev__label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
margin-bottom: 16px;
}
.dev__title {
font-size: clamp(32px, 4.4vw, 60px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 500;
}
.dev__title em {
font-style: normal;
color: var(--muted);
}
.dev__intro {
max-width: 680px;
margin-top: 20px;
font-size: 16px;
color: var(--muted);
line-height: 1.55;
}
.dev__layout {
display: grid;
grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
gap: 24px;
align-items: stretch;
}
.dev__visual {
position: relative;
min-height: 480px;
padding: 0;
background: transparent;
display: flex;
flex-direction: column;
}
/* Dashboard panel mock */
.dev__panel {
position: relative;
display: flex; flex-direction: column;
gap: 18px;
padding: 20px 22px 22px;
background: #fff;
border: 1px solid rgba(10,10,10,0.08);
border-radius: var(--r-md);
box-shadow:
0 30px 80px -40px rgba(10,10,10,0.35),
0 4px 12px -6px rgba(10,10,10,0.1);
overflow: hidden;
opacity: 0;
transform: translateY(14px) scale(0.98);
animation: devPanelIn 720ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards;
}
@keyframes devPanelIn {
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Section labels — mono uppercase, like editorial eyebrows */
.dev__section-label {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mute-2);
padding-bottom: 10px;
}
.dev__section-label::before {
content: "";
width: 16px; height: 1px;
background: var(--line);
}
.dev__panel::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(rgba(10,10,10,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(10,10,10,0.025) 1px, transparent 1px);
background-size: 48px 48px;
mask: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 70%);
-webkit-mask: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.dev__panel > * { position: relative; z-index: 1; }
.dev__panel-head {
display: flex; align-items: center; gap: 12px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(10,10,10,0.06);
opacity: 0;
animation: devHeadIn 520ms cubic-bezier(0.22, 1, 0.36, 1) 400ms forwards;
}
@keyframes devHeadIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.dev__panel-dots { display: inline-flex; gap: 5px; }
.dev__panel-dots i {
width: 9px; height: 9px; border-radius: 50%;
background: #E4E6EB;
}
.dev__panel-dots i:nth-child(1) { background: #FF5F57; }
.dev__panel-dots i:nth-child(2) { background: #FEBC2E; }
.dev__panel-dots i:nth-child(3) { background: #28C840; }
.dev__panel-addr {
flex: 1;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--mute-2);
letter-spacing: 0.02em;
text-align: center;
padding: 4px 10px;
background: var(--bg-alt);
border-radius: 99px;
max-width: 240px;
margin: 0 auto;
}
.dev__panel-live {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #10B981;
}
.dev__panel-live em {
width: 6px; height: 6px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 0 0 rgba(16,185,129,0.6);
animation: devPanelLive 1.8s ease-in-out infinite;
font-style: normal;
}
@keyframes devPanelLive {
0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.6); }
60% { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}
/* ── Hero: orders today + marketplace split ── */
.dev__hero {
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
align-items: center;
padding: 6px 2px 4px;
opacity: 0;
animation: devHeroIn 520ms cubic-bezier(0.22, 1, 0.36, 1) 500ms forwards;
}
@keyframes devHeroIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.dev__hero-main { display: flex; flex-direction: column; gap: 4px; }
.dev__hero-label {
font-family: var(--font-mono);
font-size: 10px;
color: var(--mute-2);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.dev__hero-row { display: inline-flex; align-items: baseline; gap: 10px; }
.dev__hero-val {
font-size: 34px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.035em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.dev__hero-trend {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-mono);
font-size: 11px;
color: #10B981;
font-weight: 500;
}
.dev__hero-trend i {
width: 0; height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 5px solid #10B981;
}
.dev__hero-split { display: flex; flex-direction: column; gap: 5px; }
.dev__split-row {
display: grid;
grid-template-columns: 42px 1fr 32px;
gap: 8px;
align-items: center;
font-family: var(--font-mono);
font-size: 10px;
}
.dev__split-bar {
height: 6px;
background: rgba(10,10,10,0.06);
border-radius: 99px;
overflow: hidden;
}
.dev__split-bar i {
display: block;
height: 100%;
width: var(--w, 50%);
background: currentColor;
border-radius: 99px;
transform-origin: left;
animation: devSplitFill 900ms cubic-bezier(0.22, 1, 0.36, 1) 900ms backwards;
}
@keyframes devSplitFill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.dev__split-num {
color: var(--ink);
font-weight: 500;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Marketplace brand chips */
.dev__mp {
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px;
padding: 3px 8px;
border-radius: 5px;
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.04em;
color: #fff;
line-height: 1;
flex: none;
font-style: normal;
}
.dev__mp--wb { background: #7D14A6; }
.dev__mp--ozon { background: #005BFF; }
.dev__mp--ym { background: #FFD60A; color: #1A1A1A; }
.dev__split-row .dev__mp {
background: transparent; padding: 0;
justify-content: flex-start;
font-weight: 600; min-width: 0;
}
.dev__split-row .dev__mp--wb { color: #7D14A6; }
.dev__split-row .dev__mp--ozon { color: #005BFF; }
.dev__split-row .dev__mp--ym { color: #B8860B; }
.dev__split-row:nth-child(1) .dev__split-bar i { background: #7D14A6; }
.dev__split-row:nth-child(2) .dev__split-bar i { background: #005BFF; }
.dev__split-row:nth-child(3) .dev__split-bar i { background: #FFD60A; }
/* ── Orders feed — live list with marketplace + status ── */
.dev__orders {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column;
gap: 6px;
}
.dev__order {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding: 10px 12px;
background: var(--bg-alt);
border: 1px solid rgba(10,10,10,0.05);
border-radius: var(--r-sm);
opacity: 0;
animation: devOrderIn 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
transition: border-color 240ms var(--ease), background 240ms var(--ease);
}
.dev__order:nth-child(1) { animation-delay: 700ms; }
.dev__order:nth-child(2) { animation-delay: 860ms; }
.dev__order:nth-child(3) { animation-delay: 1020ms; }
@keyframes devOrderIn {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
.dev__order:hover {
background: #fff;
border-color: color-mix(in srgb, var(--royal) 20%, var(--line));
}
.dev__order-body {
display: flex; flex-direction: column;
gap: 2px;
min-width: 0;
}
.dev__order-name {
font-size: 12.5px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.012em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dev__order-meta {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.dev__order-status {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 8px;
border-radius: 99px;
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
flex: none;
}
.dev__order-status--new { color: var(--royal); background: var(--royal-soft); }
.dev__order-status--new::before {
content: "";
width: 5px; height: 5px; border-radius: 50%;
background: var(--royal);
box-shadow: 0 0 0 0 rgba(0,91,255,0.5);
animation: devOrderPulse 1.6s ease-in-out infinite;
}
.dev__order-status--work { color: var(--amber); background: rgba(255,189,23,0.14); }
.dev__order-status--work::before {
content: "";
width: 7px; height: 7px; border-radius: 50%;
border: 1.4px solid var(--amber);
border-right-color: transparent;
animation: devOrderSpin 1s linear infinite;
}
.dev__order-status--done { color: #10B981; background: rgba(16,185,129,0.1); }
.dev__order-status--done::before {
content: "✓"; width: 10px;
text-align: center; font-size: 9px;
}
@keyframes devOrderPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0,91,255,0.5); }
60% { box-shadow: 0 0 0 4px rgba(0,91,255,0); }
}
@keyframes devOrderSpin { to { transform: rotate(360deg); } }
/* ── Foot: "→ автоматически" pipe with travelling dot ── */
.dev__foot-label {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--mute-2);
letter-spacing: 0.02em;
margin-right: 4px;
}
.dev__foot-pipe {
display: inline-flex; align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.dev__foot-pipe span {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink);
padding: 4px 9px;
background: var(--bg-alt);
border: 1px solid rgba(10,10,10,0.06);
border-radius: 6px;
}
.dev__foot-pipe i {
position: relative;
width: 18px; height: 1px;
background: rgba(10,10,10,0.14);
}
.dev__foot-pipe i::before {
content: "";
position: absolute;
left: 0; top: 50%;
width: 4px; height: 4px;
margin-top: -2px;
border-radius: 50%;
background: var(--royal);
box-shadow: 0 0 6px rgba(0,91,255,0.6);
animation: devFootParticle 2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
opacity: 0;
}
.dev__foot-pipe i:nth-child(4)::before { animation-delay: 1s; }
@keyframes devFootParticle {
0% { left: 0; opacity: 0; transform: scale(0.6); }
15% { opacity: 1; transform: scale(1); }
85% { opacity: 1; transform: scale(1); }
100% { left: calc(100% - 4px); opacity: 0; transform: scale(0.6); }
}
/* Legacy .dev__services (not used by new markup) */
.dev__services {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.dev__svc {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
column-gap: 12px;
align-items: center;
padding: 12px 14px;
background: var(--bg-alt);
border: 1px solid rgba(10,10,10,0.05);
border-radius: var(--r-sm);
opacity: 0;
transform: translateY(8px);
animation: devSvcIn 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
transition:
border-color 280ms var(--ease),
background 280ms var(--ease),
transform 280ms var(--ease);
}
.dev__svc:nth-child(1) { animation-delay: 600ms; }
.dev__svc:nth-child(2) { animation-delay: 720ms; }
.dev__svc:nth-child(3) { animation-delay: 840ms; }
.dev__svc:nth-child(4) { animation-delay: 960ms; }
@keyframes devSvcIn {
to { opacity: 1; transform: translateY(0); }
}
.dev__svc::after {
content: "";
position: absolute;
left: 14px; right: 14px; bottom: 0;
height: 2px;
background: var(--royal);
transform: scaleX(0);
transform-origin: left center;
transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dev__svc:hover {
border-color: color-mix(in srgb, var(--royal) 24%, var(--line));
background: #fff;
}
.dev__svc:hover::after { transform: scaleX(1); }
.dev__svc-main {
display: flex; flex-direction: column;
gap: 3px;
min-width: 0;
}
.dev__svc-name {
font-size: 13px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.015em;
text-transform: lowercase;
}
.dev__svc-text {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
line-height: 1.35;
letter-spacing: -0.002em;
margin: 0;
}
.dev__svc-status {
display: inline-flex; align-items: center; gap: 5px;
flex: none;
padding: 3px 7px 3px 6px;
border-radius: 99px;
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
.dev__svc-status em {
width: 5px; height: 5px;
border-radius: 50%;
font-style: normal;
}
.dev__svc-status--live {
color: #10B981;
background: rgba(16,185,129,0.1);
}
.dev__svc-status--live em {
background: #10B981;
box-shadow: 0 0 0 0 rgba(16,185,129,0.5);
animation: devSvcLive 1.8s ease-in-out infinite;
}
@keyframes devSvcLive {
0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
60% { box-shadow: 0 0 0 4px rgba(16,185,129,0); }
}
.dev__svc-status--sched {
color: var(--royal);
background: var(--royal-soft);
}
.dev__svc-status--sched em { background: var(--royal); }
/* ── Dark terminal — real-looking API sync log ── */
.dev__terminal {
display: flex; flex-direction: column;
gap: 8px;
padding: 14px 14px 14px;
background: linear-gradient(180deg, #0E0F14 0%, #0A0B10 100%);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 20px 48px -24px rgba(10,10,10,0.45);
font-family: var(--font-mono);
}
.dev__terminal-head {
display: flex; align-items: center; gap: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,0.08);
font-size: 10px;
letter-spacing: 0.02em;
color: rgba(255,255,255,0.5);
}
.dev__terminal-prompt { color: #10B981; }
.dev__terminal-run { color: rgba(255,255,255,0.9); }
.dev__terminal-time { margin-left: auto; color: rgba(255,255,255,0.38); }
.dev__terminal-lines {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column;
gap: 4px;
padding-top: 4px;
}
/* Terminal lines — 4 columns: arrow / action / status / meta */
.dev__terminal-line {
display: grid;
grid-template-columns: 14px minmax(0, 1fr) 46px 84px;
gap: 10px;
align-items: center;
height: 22px;
font-size: 10.5px;
letter-spacing: -0.002em;
font-variant-numeric: tabular-nums;
opacity: 0;
animation: devTerminalLineIn 380ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.dev__terminal-line:nth-child(1) { animation-delay: 400ms; }
.dev__terminal-line:nth-child(2) { animation-delay: 560ms; }
.dev__terminal-line:nth-child(3) { animation-delay: 720ms; }
.dev__terminal-line:nth-child(4) { animation-delay: 880ms; }
@keyframes devTerminalLineIn {
from { opacity: 0; transform: translateX(-6px); }
to { opacity: 1; transform: translateX(0); }
}
.dev__terminal-arrow {
color: #10B981;
text-align: center;
font-size: 11px;
line-height: 1;
}
.dev__terminal-line--run .dev__terminal-arrow {
color: var(--amber);
animation: devTerminalSpinner 1.1s linear infinite;
}
@keyframes devTerminalSpinner {
to { transform: rotate(360deg); }
}
.dev__terminal-endpoint {
color: rgba(255,255,255,0.92);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dev__terminal-status {
color: #10B981;
font-weight: 500;
padding: 2px 0;
background: rgba(16,185,129,0.14);
border-radius: 3px;
font-size: 9.5px;
text-align: center;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.dev__terminal-status--run {
color: var(--amber);
background: rgba(255,189,23,0.16);
text-transform: none;
}
.dev__terminal-data {
color: rgba(255,255,255,0.55);
font-size: 10px;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Panel section wrapper — label + content block */
.dev__panel-section {
display: flex; flex-direction: column;
gap: 8px;
}
/* Flow footer — источники → API → выход with travelling particles */
.dev__panel-foot {
display: grid;
grid-template-columns: 1fr 24px auto 24px 1fr;
gap: 10px;
align-items: center;
padding-top: 14px;
border-top: 1px solid rgba(10,10,10,0.06);
opacity: 0;
animation: devFootIn 520ms cubic-bezier(0.22, 1, 0.36, 1) 1200ms forwards;
}
@keyframes devFootIn {
to { opacity: 1; }
}
.dev__flow-chip {
display: flex; flex-direction: column;
gap: 2px;
padding: 9px 12px;
background: var(--bg-alt);
border: 1px solid rgba(10,10,10,0.06);
border-radius: var(--r-sm);
min-width: 0;
}
.dev__flow-chip--hub {
background: var(--ink);
border-color: var(--ink);
color: #fff;
text-align: center;
position: relative;
}
.dev__flow-chip--hub::before {
content: "";
position: absolute;
inset: -2px;
border-radius: var(--r-sm);
background: conic-gradient(from 0deg, transparent 70%, rgba(255,189,23,0.55), transparent);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 1px;
animation: devHubSweep 4s linear infinite;
pointer-events: none;
}
@keyframes devHubSweep {
to { transform: rotate(360deg); }
}
.dev__flow-chip--hub .dev__flow-label { color: rgba(255,255,255,0.55); }
.dev__flow-chip--hub strong { color: #fff; position: relative; z-index: 1; }
.dev__flow-label {
font-family: var(--font-mono);
font-size: 9px;
color: var(--mute-2);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.dev__flow-chip strong {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Connector line with travelling amber particle */
.dev__flow-sep {
position: relative;
height: 1px;
background: linear-gradient(90deg, rgba(10,10,10,0.08), rgba(10,10,10,0.14), rgba(10,10,10,0.08));
overflow: visible;
}
.dev__flow-sep::before {
content: "";
position: absolute;
top: 50%; left: 0;
width: 6px; height: 6px;
margin-top: -3px;
border-radius: 50%;
background: var(--amber);
box-shadow: 0 0 8px 1px rgba(255,189,23,0.5);
animation: devFlowParticle 2.2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
opacity: 0;
}
.dev__panel-foot > .dev__flow-sep:last-of-type::before { animation-delay: 1.1s; }
@keyframes devFlowParticle {
0% { left: 0; opacity: 0; transform: scale(0.6); }
15% { opacity: 1; transform: scale(1); }
85% { opacity: 1; transform: scale(1); }
100% { left: calc(100% - 6px); opacity: 0; transform: scale(0.6); }
}
.dev__map {
position: absolute;
inset: 24px 22px auto 22px;
min-height: 210px;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr);
gap: 14px;
align-items: stretch;
pointer-events: none;
}
.dev__map-column {
display: flex;
flex-direction: column;
gap: 0;
padding: 14px 14px 10px;
background: rgba(255,255,255,0.88);
border: 1px solid rgba(10,10,10,0.06);
border-radius: 10px;
box-shadow: 0 22px 54px -40px rgba(10,10,10,0.26);
}
.dev__map-head {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-bottom: 10px;
margin-bottom: 4px;
border-bottom: 1px solid rgba(10,10,10,0.06);
}
.dev__map-title {
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.dev__map-count {
font-family: var(--font-mono);
font-size: 10px;
color: var(--royal);
letter-spacing: 0.04em;
padding: 1px 6px;
background: color-mix(in srgb, var(--royal) 9%, transparent);
border-radius: 99px;
}
.dev__map-item {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
min-height: 34px;
padding: 0 2px;
border-top: 1px solid rgba(10,10,10,0.05);
font-family: var(--font-mono);
color: var(--ink-soft);
}
.dev__map-column .dev__map-item:first-of-type { border-top: 0; }
.dev__map-name {
font-size: 11.5px;
letter-spacing: -0.005em;
}
.dev__map-meta {
font-size: 10px;
color: var(--mute-2);
letter-spacing: 0.02em;
}
/* Central API hub — circular node with radiating lines to columns */
.dev__map-hub {
position: relative;
display: grid;
place-items: center;
align-self: center;
height: 100%;
min-height: 168px;
}
.dev__map-hub::before,
.dev__map-hub::after {
content: "";
position: absolute;
top: 50%;
width: 24px;
height: 1px;
background: linear-gradient(90deg, rgba(255,189,23,0.55), transparent);
}
.dev__map-hub::before { left: -10px; transform: translateY(-50%); }
.dev__map-hub::after {
right: -10px;
transform: translateY(-50%) scaleX(-1);
}
.dev__map-hub-ring {
position: relative;
width: 54px; height: 54px;
border-radius: 50%;
background: #fff;
border: 1px solid rgba(10,10,10,0.1);
box-shadow:
0 0 0 1px rgba(255,189,23,0.18),
0 0 0 6px rgba(255,189,23,0.06),
0 12px 32px -18px rgba(10,10,10,0.25);
display: grid; place-items: center;
}
.dev__map-hub-ring::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 50%;
border: 1px solid transparent;
background: conic-gradient(from 0deg, rgba(255,189,23,0), rgba(255,189,23,0.7), rgba(255,189,23,0)) border-box;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: devHubOrbit 5s linear infinite;
}
@keyframes devHubOrbit {
to { transform: rotate(360deg); }
}
.dev__map-hub-label {
position: relative;
z-index: 1;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--ink);
letter-spacing: 0.08em;
}
/* Travelling data particles along the ring radial connectors */
.dev__map-hub::before,
.dev__map-hub::after { overflow: visible; }
.dev__console {
position: relative;
z-index: 1;
padding: 18px;
border-radius: 8px;
background: var(--ink);
color: #fff;
box-shadow: 0 20px 50px -28px rgba(10,10,10,0.48);
}
.dev__console-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,0.12);
font-family: var(--font-mono);
font-size: 11px;
color: rgba(255,255,255,0.64);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.dev__console-head em {
font-style: normal;
color: #10B981;
display: inline-flex;
align-items: center;
gap: 6px;
}
.dev__console-head em::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 0 0 rgba(16,185,129,0.55);
animation: devConsoleDot 1.8s ease-in-out infinite;
}
.dev__console-head em::after {
content: "_";
display: inline-block;
color: #10B981;
margin-left: -2px;
animation: devConsoleCursor 1.1s step-end infinite;
}
@keyframes devConsoleDot {
0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.55); }
60% { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}
@keyframes devConsoleCursor {
50% { opacity: 0; }
}
.dev__sync-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: baseline;
padding: 15px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dev__sync-key {
font-family: var(--font-mono);
font-size: 12px;
color: rgba(255,255,255,0.72);
}
.dev__sync-line {
position: relative;
height: 1px;
background-image: linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px);
background-size: 6px 1px;
transform: translateY(-3px);
overflow: hidden;
}
.dev__sync-line::after {
content: "";
position: absolute;
inset: -1px 0;
background: linear-gradient(90deg, transparent, rgba(255,189,23,0.7), transparent);
transform: translateX(-100%);
animation: devSyncShimmer 3.6s ease-in-out infinite;
}
.dev__sync-row:nth-child(2) .dev__sync-line::after { animation-delay: 0.8s; }
.dev__sync-row:nth-child(3) .dev__sync-line::after { animation-delay: 1.6s; }
@keyframes devSyncShimmer {
0% { transform: translateX(-100%); }
55%, 100% { transform: translateX(200%); }
}
.dev__sync-row strong {
font-family: var(--font-mono);
font-size: 12px;
color: #fff;
font-weight: 500;
}
.dev__flow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding-top: 16px;
}
.dev__flow span {
font-family: var(--font-mono);
font-size: 10.5px;
color: rgba(255,255,255,0.82);
padding: 5px 8px;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 8px;
}
.dev__flow i {
width: 18px;
height: 1px;
background: var(--amber);
}
.dev__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
}
.dev-card {
position: relative;
padding: 22px 2px 6px;
display: flex;
flex-direction: column;
gap: 12px;
background: transparent;
border: 0;
border-radius: 0;
transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dev-card::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: var(--ink);
}
.dev-card::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 0; height: 1px;
background: var(--royal);
z-index: 1;
transition: width 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dev-card:hover { transform: translateY(-3px); }
.dev-card:hover::before { width: 40%; }
.dev-card__head {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
}
.dev-card__tag {
display: inline-flex; align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
transition: color 260ms var(--ease);
}
.dev-card__tag i {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--royal);
flex: none;
box-shadow: 0 0 0 0 rgba(0,91,255,0.4);
transition: box-shadow 320ms var(--ease);
}
.dev-card:hover .dev-card__tag { color: var(--ink); }
.dev-card:hover .dev-card__tag i {
box-shadow: 0 0 0 4px rgba(0,91,255,0.14);
}
.dev-card__title {
font-size: 20px;
line-height: 1.22;
letter-spacing: -0.022em;
font-weight: 500;
color: var(--ink);
margin: 2px 0 0;
}
.dev-card__text {
font-size: 13.5px;
color: var(--muted);
line-height: 1.55;
margin: 0;
letter-spacing: -0.005em;
flex: 1;
}
.dev-card__stack {
display: flex;
flex-wrap: wrap;
gap: 14px;
padding-top: 4px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ink-soft);
letter-spacing: -0.005em;
}
.dev-card__stack span {
position: relative;
}
.dev-card__stack span:not(:last-child)::after {
content: "·";
color: var(--mute-2);
margin-left: 14px;
}
.dev-card__result {
position: relative;
margin: 4px 0 0;
padding: 12px 0 0 16px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ink);
line-height: 1.5;
letter-spacing: -0.005em;
}
.dev-card__result::before {
content: "";
position: absolute;
left: 0; top: 17px;
width: 8px; height: 1px;
background: var(--royal);
}
.dev__summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
margin-top: 18px;
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
background: var(--line);
}
.dev__summary span {
min-height: 58px;
display: flex;
align-items: center;
padding: 14px 16px;
background: rgba(255,255,255,0.82);
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-soft);
}
.dev__summary span::before {
content: "";
width: 6px;
height: 6px;
margin-right: 10px;
border-radius: 50%;
background: var(--amber);
}
/* ============================================================
CASES
============================================================ */
.cases {
max-width: var(--container);
margin: 0 auto;
padding: 80px var(--pad-x);
}
.cases__head {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: end;
gap: 24px;
margin-bottom: 40px;
}
.cases__label {
font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
.cases__title {
grid-column: 1 / 3;
font-size: clamp(32px, 4.4vw, 60px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 500;
}
.cases__all {
font-family: var(--font-mono); font-size: 13px;
border-bottom: 1px solid var(--ink);
padding-bottom: 2px;
}
.cases__all:hover { color: var(--royal); border-bottom-color: var(--royal); }
.cases__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.case {
display: flex; flex-direction: column;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--card);
transition: transform 280ms var(--ease);
}
.case:hover { transform: translateY(-4px); }
.case__media {
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.case__media--1 { background: linear-gradient(135deg, #FFF8E1 0%, #FFEBAE 100%); }
.case__media--2 { background: linear-gradient(135deg, #EFEAFF 0%, #D9CEFF 100%); }
.case__media--3 { background: linear-gradient(135deg, #E3ECFF 0%, #C9D6FF 100%); }
.case__media--4 { background: linear-gradient(135deg, #FFE9F0 0%, #FFD1DB 100%); }
/* ──────── Compact case (скрин кабинета как превью) ──────── */
.case__media--shot {
aspect-ratio: 16 / 10;
background: #0a0a0a;
}
.case__shot {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transition: transform 600ms var(--ease);
}
.case:hover .case__shot { transform: scale(1.03); }
.case__shot-overlay {
position: absolute;
left: 16px;
bottom: 16px;
right: 16px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
background: rgba(10, 10, 10, 0.78);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 12px;
color: #fff;
font-size: 13px;
letter-spacing: -0.01em;
pointer-events: none;
}
.case__shot-brand {
font-weight: 600;
font-size: 15px;
letter-spacing: -0.02em;
}
.case__shot-platform {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.02em;
color: rgba(255,255,255,0.72);
white-space: nowrap;
}
/* Dashboard visual inside case card */
.case__dashboard {
position: absolute; inset: 24px;
background: rgba(255,255,255,0.85);
backdrop-filter: blur(8px);
border-radius: var(--r-md);
padding: 16px 16px 12px;
display: flex; flex-direction: column;
gap: 10px;
border: 1px solid rgba(10,10,10,0.05);
box-shadow: 0 6px 20px -8px rgba(10,10,10,0.08);
}
.case__dashboard-head {
display: flex; justify-content: space-between; align-items: center;
}
.case__dashboard-title {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: -0.005em;
}
.case__dashboard-pill {
font-family: var(--font-mono);
font-size: 11px;
padding: 3px 8px;
border-radius: var(--r-pill);
background: var(--ink);
color: #fff;
letter-spacing: -0.005em;
}
.case__chart { width: 100%; flex: 1; }
.case__dashboard-foot {
display: flex; justify-content: space-between;
font-family: var(--font-mono);
font-size: 10px;
color: var(--mute-2);
letter-spacing: 0.02em;
}
.case__dashboard-foot strong {
color: var(--ink);
font-weight: 500;
}
/* bars dashboard */
.case__bars {
display: flex; align-items: flex-end;
gap: 8px;
flex: 1;
padding-top: 6px;
}
.case__bar {
flex: 1;
display: flex; flex-direction: column; justify-content: flex-end;
align-items: center; gap: 6px;
height: 100%;
position: relative;
}
.case__bar::before {
content: "";
display: block;
width: 100%;
height: var(--h);
background: linear-gradient(180deg, var(--royal) 0%, var(--royal-deep) 100%);
border-radius: 4px 4px 0 0;
}
.case__bar--accent::before {
background: linear-gradient(180deg, #FFBD17 0%, #F59E0B 100%);
}
.case__bar span {
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
}
/* kpi dashboard */
.case__kpis {
display: flex; flex-direction: column;
gap: 8px;
flex: 1; justify-content: center;
}
.case__kpi {
display: grid;
grid-template-columns: 1fr 70px 40px;
align-items: center;
gap: 8px;
}
.case__kpi-label {
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink-soft);
}
.case__kpi-bar {
height: 8px;
background: rgba(46,90,255,0.1);
border-radius: var(--r-pill);
overflow: hidden;
}
.case__kpi-bar span {
display: block;
height: 100%;
width: var(--w);
background: linear-gradient(90deg, var(--royal) 0%, var(--royal-deep) 100%);
border-radius: inherit;
}
.case__kpi-val {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink);
text-align: right;
}
/* grid dashboard */
.case__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 1fr;
gap: 4px;
flex: 1;
padding: 4px 0;
}
.case__grid span {
border-radius: 4px;
background: rgba(255,122,158,0.22);
transform: scale(0.82);
opacity: 0.55;
transition:
transform 420ms cubic-bezier(0.34, 1.4, 0.5, 1),
opacity 360ms var(--ease),
background 280ms var(--ease);
}
.case__grid span.is-accent { background: #FF7A9E; }
/* category-tinted squares */
.case__grid span[data-cat="a"] { background: rgba(255, 138, 170, 0.22); }
.case__grid span[data-cat="b"] { background: rgba(193, 107, 255, 0.22); }
.case__grid span[data-cat="c"] { background: rgba(255, 160, 94, 0.22); }
.case__grid span[data-cat="d"] { background: rgba(255, 122, 158, 0.22); }
.case__grid span[data-cat="a"].is-accent { background: #FF8AAA; }
.case__grid span[data-cat="b"].is-accent { background: #C16BFF; }
.case__grid span[data-cat="c"].is-accent { background: #FFA05E; }
.case__grid span[data-cat="d"].is-accent { background: #FF7A9E; }
/* ══════════════════════════════════════════════════════════
ROAS CASE — growth arc (hero) with HTML-overlaid nodes
══════════════════════════════════════════════════════════ */
/* No-JS / pre-init fallback: keep the card readable before reveal JS attaches. */
.case--roas:not([data-reveal]) .roas-arc__line { stroke-dasharray: 50 100; }
.case--roas:not([data-reveal]) .roas-node__dot {
opacity: 1;
transform: scale(1);
box-shadow:
0 2px 6px rgba(10,10,10,0.10),
0 0 0 4px color-mix(in srgb, var(--dot-c) 22%, transparent);
}
.case--roas:not([data-reveal]) .roas-tag {
opacity: 1;
transform: translateY(0);
}
.case--roas:not([data-reveal]) .roas-tag strong i {
opacity: 1;
transform: translateY(0);
}
.case--roas:not([data-reveal]) .roas-budget {
opacity: 1;
transform: translate(-50%, 0);
}
.roas-board {
position: relative;
flex: 1;
min-height: 130px;
}
/* Arc stretches to fill board; strokes stay crisp (non-scaling) */
.roas-arc {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
/* Pale rail — always drawn, sits BEHIND the vivid line */
.roas-arc__bg {
opacity: 0;
transition: opacity 600ms var(--ease-out);
}
.case--roas.is-inview .roas-arc__bg,
.case--roas.is-peek .roas-arc__bg,
.case--roas:hover .roas-arc__bg { opacity: 1; }
/* Vivid progress line — animates left → right with soft colored glow */
.roas-arc__line {
stroke-dasharray: 0 100;
transition:
stroke-dasharray 1600ms cubic-bezier(0.22, 1, 0.36, 1),
filter 480ms var(--ease-out);
filter: drop-shadow(0 2px 6px rgba(122, 79, 255, 0.28));
}
.case--roas:hover .roas-arc__line {
filter: drop-shadow(0 3px 12px rgba(178, 63, 255, 0.45));
}
/* Subtle "breathing" shimmer on the pale rail when card is in focus */
@keyframes roasRailShimmer {
0%, 100% { stroke-opacity: 0.85; }
50% { stroke-opacity: 1; }
}
.case--roas:hover .roas-arc__bg,
.case--roas.is-peek .roas-arc__bg {
animation: roasRailShimmer 2.4s ease-in-out infinite;
}
/* Soft pulse halo around each dot — fires after its scale-in completes */
@keyframes roasDotPulse {
0% { box-shadow: 0 2px 6px rgba(10,10,10,0.10), 0 0 0 0 color-mix(in srgb, var(--dot-c) 55%, transparent); }
70% { box-shadow: 0 2px 6px rgba(10,10,10,0.10), 0 0 0 14px color-mix(in srgb, var(--dot-c) 0%, transparent); }
100% { box-shadow: 0 2px 6px rgba(10,10,10,0.10), 0 0 0 0 color-mix(in srgb, var(--dot-c) 0%, transparent); }
}
.case--roas.is-inview .roas-node--brand .roas-node__dot { animation: roasDotPulse 1.4s ease-out 0.55s 1; }
.case--roas.is-inview .roas-node--cat .roas-node__dot { animation: roasDotPulse 1.4s ease-out 0.95s 1; }
.case--roas.is-inview .roas-node--search .roas-node__dot { animation: roasDotPulse 1.4s ease-out 1.40s 1; }
.case--roas.is-peek .roas-node--brand .roas-node__dot { animation: roasDotPulse 1.4s ease-out 0.55s 1; }
.case--roas.is-peek .roas-node--cat .roas-node__dot { animation: roasDotPulse 1.4s ease-out 0.95s 1; }
.case--roas.is-peek .roas-node--search .roas-node__dot { animation: roasDotPulse 1.4s ease-out 1.40s 1; }
/* Campaign nodes — dot + label stack, positioned at % that match arc curve.
Transform shifts the node up by half the dot height so the dot CENTER
sits exactly on the anchor point (= on the arc), not the stack centre. */
.roas-node {
position: absolute;
transform: translate(-50%, -7px);
display: flex; flex-direction: column; align-items: center;
gap: 6px;
z-index: 2;
pointer-events: none;
}
.roas-node__dot {
width: 14px; height: 14px;
border-radius: 50%;
background: #fff;
border: 2.5px solid var(--dot-c, #2E5AFF);
box-shadow: 0 2px 6px rgba(10,10,10,0.10);
opacity: 0;
transform: scale(0);
transition:
opacity 380ms var(--ease-out),
transform 380ms var(--ease-spring-soft),
box-shadow 380ms var(--ease-out);
flex: none;
}
.roas-node--brand { --dot-c: #2E5AFF; }
.roas-node--cat { --dot-c: #7A4FFF; }
.roas-node--search { --dot-c: #B23FFF; }
.roas-tag {
display: flex; flex-direction: column; align-items: center;
gap: 1px;
font-family: var(--font-mono);
letter-spacing: 0.01em;
text-align: center;
opacity: 0;
transform: translateY(6px);
transition:
opacity 420ms var(--ease-out),
transform 420ms var(--ease-spring-soft);
white-space: nowrap;
}
.roas-tag em {
font-style: normal;
font-size: 9.5px;
color: var(--muted);
letter-spacing: 0.05em;
}
.roas-tag strong {
font-weight: 500;
font-size: 15px;
color: var(--ink);
letter-spacing: -0.01em;
display: inline-flex; align-items: baseline; gap: 2px;
}
.roas-tag strong i {
font-style: normal;
font-size: 10px;
color: #10B981;
opacity: 0;
transform: translateY(3px);
transition:
opacity 300ms var(--ease-out),
transform 300ms var(--ease-spring-soft);
}
/* Budget callout bottom-center under the arc */
.roas-budget {
position: absolute;
left: 50%;
bottom: 2px;
display: inline-flex; align-items: baseline; gap: 6px;
font-family: var(--font-mono);
opacity: 0;
transform: translate(-50%, 4px);
transition:
opacity 420ms var(--ease-out),
transform 420ms var(--ease-spring-soft);
pointer-events: none;
}
.roas-budget strong {
font-weight: 500;
font-size: 13px;
color: var(--ink);
letter-spacing: -0.01em;
}
.roas-budget span {
font-size: 9px;
color: var(--muted);
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* ── Hover choreography (also fires via .is-peek on touch devices when
the case scrolls into view — see JS initAutoPeek) ── */
/* 1. Arc draws left → right.
.is-inview / .is-peek → 50% (entry state, "прогресс остановился на половине")
:hover → 100% (вау-достройка) */
.case--roas.is-peek .roas-arc__line,
.case--roas.is-inview .roas-arc__line { stroke-dasharray: 50 100; }
.case--roas:hover .roas-arc__line { stroke-dasharray: 100 100; }
/* 2. Dots scale in synced to arc-draw position (tighter cascade) */
.case--roas:hover .roas-node--brand .roas-node__dot,
.case--roas.is-peek .roas-node--brand .roas-node__dot { opacity: 1; transform: scale(1); transition-delay: 0.18s; }
.case--roas:hover .roas-node--cat .roas-node__dot,
.case--roas.is-peek .roas-node--cat .roas-node__dot { opacity: 1; transform: scale(1); transition-delay: 0.54s; }
.case--roas:hover .roas-node--search .roas-node__dot,
.case--roas.is-peek .roas-node--search .roas-node__dot { opacity: 1; transform: scale(1); transition-delay: 0.88s; }
/* 3. Labels rise right after their dot appears */
.case--roas:hover .roas-node--brand .roas-tag,
.case--roas.is-peek .roas-node--brand .roas-tag { opacity: 1; transform: translateY(0); transition-delay: 0.28s; }
.case--roas:hover .roas-node--cat .roas-tag,
.case--roas.is-peek .roas-node--cat .roas-tag { opacity: 1; transform: translateY(0); transition-delay: 0.64s; }
.case--roas:hover .roas-node--search .roas-tag,
.case--roas.is-peek .roas-node--search .roas-tag { opacity: 1; transform: translateY(0); transition-delay: 0.98s; }
/* 4. Green ↑ deltas pop last */
.case--roas:hover .roas-node--brand .roas-tag strong i,
.case--roas.is-peek .roas-node--brand .roas-tag strong i { opacity: 1; transform: translateY(0); transition-delay: 0.46s; }
.case--roas:hover .roas-node--cat .roas-tag strong i,
.case--roas.is-peek .roas-node--cat .roas-tag strong i { opacity: 1; transform: translateY(0); transition-delay: 0.82s; }
.case--roas:hover .roas-node--search .roas-tag strong i,
.case--roas.is-peek .roas-node--search .roas-tag strong i { opacity: 1; transform: translateY(0); transition-delay: 1.16s; }
/* 5. Dots gain a soft colored glow ring */
.case--roas:hover .roas-node__dot,
.case--roas.is-peek .roas-node__dot {
box-shadow:
0 2px 6px rgba(10,10,10,0.10),
0 0 0 4px color-mix(in srgb, var(--dot-c) 22%, transparent);
}
/* 6. Budget callout fades in at the end */
.case--roas:hover .roas-budget,
.case--roas.is-peek .roas-budget {
opacity: 1;
transform: translate(-50%, 0);
transition-delay: 1.1s;
}
/* Pill subtle press */
.case__dashboard-pill { transition: transform 320ms var(--ease-spring); }
.case--roas:hover .case__dashboard-pill,
.case--roas.is-peek .case__dashboard-pill { transform: scale(1.05); }
/* Home page card: replay the arc choreography as the case enters view.
Stops at 50% on entry; hover completes to 100%. */
.cases__grid .case--roas.is-inview .roas-arc__line { stroke-dasharray: 50 100; }
.cases__grid .case--roas.is-inview:hover .roas-arc__line { stroke-dasharray: 100 100; }
.cases__grid .case--roas.is-inview .roas-node--brand .roas-node__dot { opacity: 1; transform: scale(1); transition-delay: 0.18s; }
.cases__grid .case--roas.is-inview .roas-node--cat .roas-node__dot { opacity: 1; transform: scale(1); transition-delay: 0.54s; }
.cases__grid .case--roas.is-inview .roas-node--search .roas-node__dot { opacity: 1; transform: scale(1); transition-delay: 0.88s; }
.cases__grid .case--roas.is-inview .roas-node--brand .roas-tag { opacity: 1; transform: translateY(0); transition-delay: 0.28s; }
.cases__grid .case--roas.is-inview .roas-node--cat .roas-tag { opacity: 1; transform: translateY(0); transition-delay: 0.64s; }
.cases__grid .case--roas.is-inview .roas-node--search .roas-tag { opacity: 1; transform: translateY(0); transition-delay: 0.98s; }
.cases__grid .case--roas.is-inview .roas-node--brand .roas-tag strong i { opacity: 1; transform: translateY(0); transition-delay: 0.46s; }
.cases__grid .case--roas.is-inview .roas-node--cat .roas-tag strong i { opacity: 1; transform: translateY(0); transition-delay: 0.82s; }
.cases__grid .case--roas.is-inview .roas-node--search .roas-tag strong i { opacity: 1; transform: translateY(0); transition-delay: 1.16s; }
.cases__grid .case--roas.is-inview .roas-node__dot {
box-shadow:
0 2px 6px rgba(10,10,10,0.10),
0 0 0 4px color-mix(in srgb, var(--dot-c) 22%, transparent);
}
.cases__grid .case--roas.is-inview .roas-budget {
opacity: 1;
transform: translate(-50%, 0);
transition-delay: 1.1s;
}
/* ── Timeline (SKU case) ── */
.case__timeline {
position: relative;
height: 34px;
padding: 0 12px;
margin-top: 2px;
}
.case__timeline-track {
position: absolute;
left: 12px; right: 12px;
top: 8px;
height: 2px;
background: rgba(255, 122, 158, 0.18);
border-radius: 2px;
}
.case__timeline-fill {
position: absolute;
left: 12px;
top: 8px;
height: 2px;
width: 0;
background: linear-gradient(90deg, #FF8AAA 0%, #FF7A9E 100%);
border-radius: 2px;
transition: width 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.case__ms {
position: absolute;
top: 0;
left: var(--p, 0%);
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center;
gap: 2px;
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
white-space: nowrap;
}
.case__ms-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: #fff;
border: 2px solid rgba(255, 122, 158, 0.4);
box-shadow: 0 0 0 3px rgba(255,255,255,0.9);
transition:
border-color 300ms var(--ease),
transform 400ms var(--ease-spring),
box-shadow 300ms var(--ease);
}
.case__ms-label {
margin-top: 2px;
letter-spacing: 0.02em;
}
.case__ms-val {
font-weight: 500;
color: var(--ink);
font-size: 10px;
letter-spacing: -0.005em;
}
/* Category legend (SKU case) */
.case__cats {
display: flex; gap: 10px;
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 9.5px;
color: var(--muted);
padding-top: 2px;
letter-spacing: 0.02em;
}
.case__cat {
display: inline-flex; gap: 5px; align-items: center;
transition: color 280ms var(--ease);
}
.case__cat-dot {
width: 6px; height: 6px;
border-radius: 2px;
display: inline-block;
}
.case__cat-dot[data-cat="a"] { background: #FF8AAA; }
.case__cat-dot[data-cat="b"] { background: #C16BFF; }
.case__cat-dot[data-cat="c"] { background: #FFA05E; }
.case__cat-dot[data-cat="d"] { background: #FF7A9E; }
/* ── Hover animations (SKU case) — also fire via .is-peek on touch ── */
.case--sku:hover .case__timeline-fill,
.case--sku.is-peek .case__timeline-fill { width: calc(100% - 24px); }
.case--sku .case__ms-dot {
transition-delay: 0s;
}
.case--sku:hover .case__ms:nth-child(3) .case__ms-dot,
.case--sku.is-peek .case__ms:nth-child(3) .case__ms-dot {
border-color: #FF8AAA;
background: #FF8AAA;
transform: scale(1.15);
transition-delay: 200ms;
}
.case--sku:hover .case__ms:nth-child(4) .case__ms-dot,
.case--sku.is-peek .case__ms:nth-child(4) .case__ms-dot {
border-color: #FF7A9E;
background: #FF7A9E;
transform: scale(1.15);
transition-delay: 600ms;
}
.case--sku:hover .case__ms:nth-child(5) .case__ms-dot,
.case--sku.is-peek .case__ms:nth-child(5) .case__ms-dot {
border-color: #FF5A85;
background: #FF5A85;
transform: scale(1.25);
box-shadow:
0 0 0 3px rgba(255,255,255,0.9),
0 0 0 6px rgba(255, 90, 133, 0.25);
transition-delay: 1000ms;
}
/* Grid squares fade in with stagger on hover */
.case--sku:hover .case__grid span,
.case--sku.is-peek .case__grid span {
opacity: 1;
transform: scale(1);
}
.case__grid span:nth-child(5n+1) { transition-delay: 0.05s; }
.case__grid span:nth-child(5n+2) { transition-delay: 0.10s; }
.case__grid span:nth-child(5n+3) { transition-delay: 0.15s; }
.case__grid span:nth-child(5n+4) { transition-delay: 0.20s; }
.case__grid span:nth-child(5n+5) { transition-delay: 0.25s; }
.case__grid span:nth-child(n+11) { transition-delay: 0.30s; }
.case__grid span:nth-child(n+16) { transition-delay: 0.40s; }
.case--sku:hover .case__grid span.is-accent,
.case--sku.is-peek .case__grid span.is-accent {
box-shadow: 0 0 0 2px rgba(255,255,255,0.6), 0 4px 12px -2px rgba(255, 122, 158, 0.4);
}
.case__desc {
font-size: 13px;
color: var(--muted);
line-height: 1.5;
padding: 10px 24px 0;
}
.case__meta {
display: flex; gap: 8px; flex-wrap: wrap;
padding: 20px 24px 0;
}
.case__tag {
font-family: var(--font-mono);
font-size: 11px;
padding: 4px 10px;
border: 1px solid var(--line);
border-radius: var(--r-pill);
background: var(--bg);
color: var(--muted);
}
.case__title {
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.02em;
font-weight: 500;
padding: 12px 24px 0;
}
.case__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 24px;
margin-top: auto;
border-top: 1px solid var(--line);
}
.case__stats div { display: flex; flex-direction: column; gap: 2px; }
.case__stats strong {
font-size: 20px; font-weight: 500; letter-spacing: -0.02em;
}
.case__stats span {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
}
/* ============================================================
STACK-COVER — cases pins while trust slides up over it.
Creates an editorial "reveal underneath" transition.
============================================================ */
.stack-cover {
position: relative;
background: var(--bg);
}
.stack-cover > .cases {
position: sticky;
top: var(--cases-sticky-top, 0);
z-index: 1;
background: var(--bg);
padding-top: 80px;
padding-bottom: 80px;
/* Promote to compositor — keeps sticky smooth during momentum scroll,
especially on iOS Safari where sticky-vs-layout handoffs can stutter. */
transform: translateZ(0);
backface-visibility: hidden;
}
.stack-cover > .trust {
z-index: 2;
box-shadow: 0 -40px 60px -20px rgba(10, 20, 60, 0.06);
/* Own compositor layer so its scroll-into-place is a GPU blit, not a
per-frame layout. */
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
.stack-cover > .cases { position: static; }
.stack-cover > .trust { box-shadow: none; }
}
/* Mobile: same sticky reveal as desktop, with a rounded top edge on
.trust so the "reveal underneath" reads as a premium card-slide-up
instead of a flat cover. Softer, broader shadow to sell the depth. */
@media (max-width: 780px) {
.stack-cover > .cases {
padding-top: 40px;
padding-bottom: 72px;
}
.stack-cover > .trust {
border-top-left-radius: 28px;
border-top-right-radius: 28px;
box-shadow:
0 -48px 64px -24px rgba(10, 20, 60, 0.10),
0 -12px 24px -12px rgba(10, 20, 60, 0.06);
}
}
/* Scroll-driven slide-up on capable browsers (Chrome 115+, Safari 26+).
Gives buttery native animation tied to scroll position — no JS, no
jank. Gracefully degrades to plain sticky on older browsers. */
@supports (animation-timeline: view()) {
.stack-cover > .trust {
animation: trustSlideUp linear both;
animation-timeline: view();
animation-range: entry 0% cover 35%;
}
@keyframes trustSlideUp {
from { transform: translate3d(0, 80px, 0); }
to { transform: translate3d(0, 0, 0); }
}
}
/* ============================================================
METRICS
============================================================ */
/* ============================================================
TRUST — portrait + «доверьтесь нам» headline + start pill.
Sits above the agency block as a warm, editorial transition.
============================================================ */
.trust {
background: var(--bg-alt);
padding: 96px var(--pad-x) 64px;
position: relative;
overflow: hidden;
}
.trust__inner {
position: relative;
z-index: 1;
max-width: var(--container);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 56px;
}
.trust__media {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 760px;
}
.trust__photo {
width: 100%;
height: auto;
display: block;
border-radius: 28px;
box-shadow:
0 36px 64px -28px rgba(10, 20, 60, 0.22),
0 14px 28px -14px rgba(10, 20, 60, 0.12),
0 4px 10px -4px rgba(10, 20, 60, 0.06);
}
.trust__quote {
position: absolute;
top: 12%;
right: -28px;
max-width: 240px;
margin: 0;
padding: 20px 22px 22px;
background: #fff;
border-radius: 22px;
border: 1px solid rgba(10, 20, 60, 0.05);
box-shadow:
0 24px 48px -22px rgba(10, 20, 60, 0.22),
0 8px 18px -8px rgba(10, 20, 60, 0.10);
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
line-height: 1.45;
color: var(--ink-soft);
letter-spacing: -0.01em;
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.trust__quote-mark {
font-family: var(--font-sans);
font-size: 28px;
font-weight: 700;
line-height: 0.8;
color: var(--royal);
flex: none;
}
.trust__foot {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.trust__head { max-width: 620px; }
.trust__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--muted);
margin-bottom: 16px;
}
.trust__eyebrow-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--royal);
box-shadow: 0 0 0 3px rgba(0, 91, 255, 0.14);
flex: none;
}
.trust__title {
margin: 0;
font-size: clamp(32px, 4.4vw, 56px);
font-weight: 800;
line-height: 1.04;
letter-spacing: -0.035em;
color: var(--ink);
}
.trust__title-sub {
display: block;
font-size: clamp(15px, 1.15vw, 17px);
font-weight: 400;
letter-spacing: -0.005em;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
max-width: 440px;
}
.trust__title-sub em {
font-style: normal;
background: linear-gradient(92deg, #F59E0B 0%, #EF4444 50%, #EC4899 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
}
.trust__cta {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 22px 36px 20px;
border-radius: 22px;
background: #fff;
color: var(--ink);
border: 1px solid rgba(10, 20, 60, 0.04);
transition:
transform 260ms var(--ease-spring),
box-shadow 240ms var(--ease),
background 240ms var(--ease);
box-shadow:
0 24px 48px -22px rgba(10, 20, 60, 0.20),
0 8px 18px -8px rgba(10, 20, 60, 0.08);
white-space: nowrap;
flex: none;
position: relative;
text-align: center;
}
.trust__cta-k {
font-family: var(--font-sans);
font-weight: 800;
letter-spacing: -0.02em;
font-size: 22px;
line-height: 1.15;
color: var(--ink);
}
.trust__cta-v {
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
letter-spacing: -0.005em;
color: #8896AC;
}
.trust__cta-arrow {
display: none;
}
.trust__cta:hover {
transform: translateY(-2px);
box-shadow:
0 30px 56px -22px rgba(10, 20, 60, 0.24),
0 10px 22px -8px rgba(10, 20, 60, 0.10);
}
/* Tablet */
@media (max-width: 900px) {
.trust { padding: 72px var(--pad-x) 80px; }
.trust__inner { gap: 32px; }
.trust__quote { top: 10%; right: -8px; max-width: 180px; font-size: 12px; padding: 12px 14px; }
.trust__foot { gap: 24px; }
}
/* Mobile */
@media (max-width: 640px) {
.trust { padding: 56px var(--pad-x) 64px; }
.trust__inner { gap: 24px; }
.trust__photo { border-radius: 20px; }
.trust__quote {
top: auto;
bottom: -20px;
right: 8px;
max-width: 240px;
font-size: 14px;
line-height: 1.4;
padding: 16px 18px 18px;
border-radius: 18px;
}
.trust__quote-mark { font-size: 26px; }
.trust__foot {
flex-direction: column;
align-items: stretch;
gap: 20px;
padding-top: 20px;
}
.trust__head { max-width: none; }
.trust__title-sub { margin-top: 10px; font-size: 15px; }
.trust__cta { align-self: flex-end; padding: 12px 18px; }
.trust__cta-k { font-size: 14px; }
}
/* ============================================================
AGENCY (light metrics block)
============================================================ */
.agency {
background: var(--bg-alt);
border-bottom: 1px solid var(--line);
}
.agency__inner {
max-width: var(--container);
margin: 0 auto;
padding: 40px var(--pad-x) 120px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 80px;
align-items: start;
}
.agency__side {
position: sticky;
top: 96px;
display: flex; flex-direction: column; gap: 20px;
}
.agency__label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
}
.agency__title {
font-size: clamp(32px, 4.4vw, 56px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 500;
}
.agency__title em {
font-style: normal;
background: linear-gradient(95deg, var(--royal) 0%, var(--royal-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.agency__text {
font-size: 15px;
color: var(--ink-soft);
line-height: 1.55;
max-width: 460px;
}
.agency__cta {
align-self: flex-start;
margin-top: 12px;
display: inline-flex; align-items: center; gap: 8px;
font-size: 15px;
border-bottom: 1px solid var(--ink);
padding-bottom: 2px;
transition: gap 200ms var(--ease), color 200ms var(--ease);
}
.agency__cta:hover { color: var(--royal); border-bottom-color: var(--royal); gap: 14px; }
/* Agency stats — editorial vertical list, hair-line dividers only */
.agency__stats {
list-style: none; margin: 0; padding: 0;
display: flex;
flex-direction: column;
}
.agency__stat {
display: grid;
grid-template-columns: minmax(140px, 200px) 1fr;
align-items: baseline;
gap: 32px;
padding: 28px 0;
border-bottom: 1px solid rgba(10, 20, 60, 0.08);
transition: padding-left 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.agency__stat:first-child { padding-top: 4px; }
.agency__stat:last-child { border-bottom: 0; padding-bottom: 0; }
.agency__stat:hover { padding-left: 6px; }
.agency__stat-num {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-weight: 500;
line-height: 0.95;
letter-spacing: -0.045em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.agency__stat-val {
font-size: clamp(52px, 6vw, 80px);
}
.agency__stat-unit {
font-style: normal;
font-size: clamp(16px, 1.6vw, 22px);
font-weight: 400;
color: var(--muted);
letter-spacing: -0.015em;
transition: color 260ms var(--ease);
}
.agency__stat:hover .agency__stat-unit { color: var(--royal); }
.agency__stat-text {
display: flex; flex-direction: column;
gap: 8px;
padding-bottom: 6px;
}
.agency__stat-label {
font-size: clamp(15px, 1.2vw, 17px);
color: var(--ink);
line-height: 1.35;
letter-spacing: -0.015em;
font-weight: 500;
}
.agency__stat-since {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: lowercase;
}
/* Fifth row — avito proof as inline text link, no box */
.agency__stat--proof .agency__stat-text { gap: 10px; padding-bottom: 4px; }
.agency__stat-link {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 8px;
padding-bottom: 3px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid rgba(10, 20, 60, 0.18);
transition:
color 240ms var(--ease),
border-color 240ms var(--ease),
gap 260ms var(--ease-spring);
}
.agency__stat-link svg {
width: 10px; height: 10px;
flex: none;
transition: transform 260ms var(--ease-spring);
}
.agency__stat-link:hover {
color: var(--royal);
border-bottom-color: var(--royal);
gap: 12px;
}
.agency__stat-link:hover svg { transform: translate(2px, -2px); }
/* ============================================================
PROCESS
============================================================ */
.process {
max-width: var(--container);
margin: 0 auto;
padding: 100px var(--pad-x);
}
.process__head { margin-bottom: 56px; }
.process__label {
font-family: var(--font-mono); font-size: 12px; color: var(--muted);
margin-bottom: 16px;
}
.process__title {
font-size: clamp(32px, 4.4vw, 60px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 500;
}
.process__intro {
font-size: 16px;
color: var(--muted);
line-height: 1.5;
max-width: 620px;
margin-top: 20px;
}
.process__steps {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
counter-reset: step;
}
.step {
padding: 28px 28px 32px;
border-radius: var(--r-lg);
background: var(--card);
display: flex; flex-direction: column; gap: 12px;
position: relative;
}
.step::before {
content: "";
position: absolute; top: 28px; left: 28px; right: 28px;
height: 2px; background: var(--amber);
}
.step__head {
display: flex; justify-content: space-between; align-items: center;
padding-top: 16px;
margin-bottom: 4px;
}
.step__num {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink);
letter-spacing: -0.005em;
}
.step__time {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink);
padding: 4px 10px;
background: var(--bg);
border-radius: var(--r-pill);
border: 1px solid var(--line);
}
.step__title {
font-size: 24px;
letter-spacing: -0.02em;
font-weight: 500;
line-height: 1.15;
}
.step__desc {
font-size: 14px;
color: var(--muted);
line-height: 1.5;
}
.step__deliverables {
display: flex; flex-direction: column; gap: 6px;
margin-top: 8px;
padding-top: 16px;
border-top: 1px dashed var(--line);
}
.step__deliverables li {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-soft);
padding-left: 18px;
position: relative;
}
.step__deliverables li::before {
content: "→";
position: absolute; left: 0;
color: var(--amber);
}
/* ============================================================
CTA bridge
============================================================ */
.cta {
max-width: var(--container);
margin: 0 auto;
padding: 120px var(--pad-x);
}
.cta__inner {
background:
/* top-center mint halo (very soft) */
radial-gradient(620px 440px at 50% -12%, rgba(16,185,129,0.05) 0%, transparent 65%),
/* bottom-right warm hint (very soft) */
radial-gradient(480px 360px at 95% 110%, rgba(255,189,23,0.05) 0%, transparent 68%),
var(--card);
border-radius: var(--r-xl);
padding: 80px 64px;
display: flex; flex-direction: column; gap: 32px;
align-items: flex-start;
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Amber swirl — top-right (soft, heavily blurred) */
.cta__inner::before {
content: "";
position: absolute; right: -220px; top: -220px;
width: 620px; height: 620px;
background:
radial-gradient(circle at 50% 50%, rgba(255,189,23,0.18) 0%, rgba(255,189,23,0.06) 45%, transparent 75%);
filter: blur(52px);
pointer-events: none;
z-index: -1;
animation: ctaGlowAmber 18s ease-in-out infinite alternate;
}
/* Royal blue swirl — bottom-left (soft, heavily blurred) */
.cta__inner::after {
content: "";
position: absolute; left: -260px; bottom: -260px;
width: 660px; height: 660px;
background:
radial-gradient(circle at 50% 50%, rgba(0,91,255,0.10) 0%, rgba(0,91,255,0.04) 45%, transparent 75%);
filter: blur(60px);
pointer-events: none;
z-index: -1;
animation: ctaGlowRoyal 22s ease-in-out infinite alternate;
}
@keyframes ctaGlowAmber {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-24px, 28px) scale(1.06); }
100% { transform: translate(14px, 46px) scale(1.10); }
}
@keyframes ctaGlowRoyal {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(36px, -24px) scale(1.08); }
100% { transform: translate(-18px, -42px) scale(1.12); }
}
.cta__eyebrow {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
}
.cta__title {
font-size: clamp(32px, 4.6vw, 64px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 500;
max-width: 900px;
}
.cta__title em {
font-style: normal;
background: linear-gradient(95deg, var(--royal) 0%, var(--royal-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.cta__bullets {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 900px;
padding: 20px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.cta__bullet {
display: flex; flex-direction: column; gap: 8px;
font-size: 14px;
color: var(--ink);
line-height: 1.4;
padding-right: 16px;
}
.cta__bullet-num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--amber);
}
.cta__actions {
display: flex; gap: 12px; flex-wrap: wrap;
}
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
border-radius: var(--r-pill);
font-family: var(--font-mono);
font-size: 14px;
transition: transform 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease);
}
.btn--primary {
background: var(--ink); color: #fff;
}
.btn--primary:hover { background: var(--royal); transform: translateY(-1px); }
.btn--ghost {
background: var(--bg); color: var(--ink);
border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-1px); }
.cta__note {
font-family: var(--font-mono); font-size: 13px; color: var(--muted);
}
/* ============================================================
FOOTER
============================================================ */
.footer {
background: var(--bg);
border-top: 1px solid var(--line);
}
.footer__inner {
max-width: var(--container);
margin: 0 auto;
padding: 72px var(--pad-x) 48px;
display: grid;
grid-template-columns: 1.4fr repeat(3, 1fr);
gap: 48px;
}
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col--brand { gap: 20px; }
.footer__pitch {
font-size: 14px;
color: var(--muted);
max-width: 320px;
line-height: 1.5;
}
.footer__label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--mute-2);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 8px;
}
.footer__link {
font-size: 14px;
color: var(--ink);
transition: color 200ms var(--ease);
}
.footer__link:hover { color: var(--royal); }
.footer__muted {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
margin-top: 4px;
}
/* Legal requisites strip */
.footer__legal {
max-width: var(--container);
margin: 0 auto;
padding: 28px var(--pad-x) 20px;
border-top: 1px solid var(--line);
}
.footer__legal-head {
margin-bottom: 14px;
}
.footer__legal-label {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--mute-2);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.footer__legal-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px 32px;
}
.footer__legal-item {
display: flex; flex-direction: column;
gap: 3px;
}
.footer__legal-k {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.footer__legal-v {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink);
letter-spacing: -0.002em;
font-variant-numeric: tabular-nums;
}
.footer__bottom {
max-width: var(--container);
margin: 0 auto;
padding: 22px var(--pad-x) 36px;
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 14px 24px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
}
.footer__copy {
letter-spacing: 0.02em;
color: var(--muted);
}
.footer__bottom-links {
display: inline-flex; align-items: center;
gap: 14px;
justify-self: center;
}
.footer__bottom-link {
color: var(--muted);
border-bottom: 1px dashed var(--mute-2);
padding-bottom: 1px;
transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.footer__bottom-link:hover {
color: var(--ink);
border-bottom-color: var(--ink);
}
.footer__dot {
width: 3px; height: 3px;
border-radius: 50%;
background: var(--mute-2);
display: inline-block;
}
/* EV Web credit — the signature */
.footer__credit {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 12px;
border-radius: var(--r-pill);
color: var(--mute-2);
text-decoration: none;
transition: background 280ms var(--ease), transform 280ms var(--ease);
}
.footer__credit:hover {
background: rgba(120, 180, 255, 0.08);
transform: translateY(-1px);
}
.footer__credit-label {
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: lowercase;
color: var(--muted);
}
.footer__credit-brand {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1;
}
.footer__credit-ev {
color: var(--ink);
transition: color 260ms var(--ease);
}
.footer__credit:hover .footer__credit-ev { color: var(--ink); }
.footer__credit-web {
background: linear-gradient(
90deg,
#8FC2FF 0%,
#C7E1FF 50%,
#8FC2FF 100%
);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 0 6px rgba(143, 194, 255, 0.38));
animation: evWebShimmer 6s ease-in-out infinite;
letter-spacing: -0.01em;
}
@keyframes evWebShimmer {
0%, 100% { background-position: 0% center; }
50% { background-position: 100% center; }
}
@media (max-width: 780px) {
.footer__bottom {
grid-template-columns: 1fr;
justify-items: center;
gap: 4px;
padding: 10px var(--pad-x) 14px;
text-align: center;
font-size: 10px;
}
.footer__copy { font-size: 10px; letter-spacing: 0.02em; }
.footer__bottom-links { gap: 8px; }
.footer__bottom-link { font-size: 10px; }
.footer__dot { width: 2px; height: 2px; }
.footer__credit {
gap: 6px;
padding: 2px 8px;
background: transparent;
border: 0;
}
.footer__credit-label { font-size: 9.5px; }
.footer__credit-brand { font-size: 12px; gap: 4px; }
}
@media (max-width: 900px) {
.footer__legal-grid { grid-template-columns: 1fr 1fr; gap: 14px 24px; }
}
@media (max-width: 640px) {
.footer__legal { padding: 18px var(--pad-x) 14px; }
.footer__legal-grid { grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.footer__legal-k { font-size: 8.5px; }
.footer__legal-v { font-size: 11.5px; line-height: 1.35; }
.footer__legal-head { margin-bottom: 12px; }
}
@media (max-width: 380px) {
.footer__legal-grid { grid-template-columns: 1fr; gap: 8px; }
}
/* ════════════════════════════════════════════════════════════
LEGAL PAGE (privacy.html) — editorial long-form styling
════════════════════════════════════════════════════════════ */
.legal {
background: var(--bg);
border-top: 1px solid var(--line);
}
.legal__inner {
max-width: 920px;
margin: 0 auto;
padding: 72px var(--pad-x) 96px;
}
.legal__crumbs {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--mute-2);
letter-spacing: 0.04em;
margin-bottom: 32px;
}
.legal__crumbs a {
color: var(--ink);
border-bottom: 1px solid var(--line);
padding-bottom: 1px;
transition: border-color 180ms var(--ease);
}
.legal__crumbs a:hover { border-bottom-color: var(--ink); }
.legal__crumbs span[aria-hidden] { color: var(--mute-2); }
.legal__head {
margin-bottom: 56px;
padding-bottom: 28px;
border-bottom: 1px solid var(--line);
}
.legal__title {
font-size: clamp(30px, 3.4vw, 46px);
font-weight: 500;
line-height: 1.08;
letter-spacing: -0.025em;
color: var(--ink);
margin-bottom: 16px;
}
.legal__subtitle {
font-size: 15px;
line-height: 1.55;
color: var(--muted);
max-width: 640px;
margin: 0;
}
.legal__section {
padding-top: 40px;
padding-bottom: 40px;
border-bottom: 1px solid var(--line);
}
.legal__section:last-of-type { border-bottom: 0; }
.legal__anchor {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--royal);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 18px;
}
.legal__h2 {
font-size: 20px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--ink);
margin: 28px 0 10px;
line-height: 1.3;
}
.legal__h2:first-of-type { margin-top: 0; }
.legal__section p {
font-size: 14.5px;
line-height: 1.65;
color: var(--ink-soft);
margin: 0 0 12px;
letter-spacing: -0.005em;
}
.legal__section p a,
.legal__foot a {
color: var(--royal);
border-bottom: 1px solid color-mix(in srgb, var(--royal) 30%, transparent);
padding-bottom: 1px;
transition: border-color 180ms var(--ease);
}
.legal__section p a:hover,
.legal__foot a:hover { border-bottom-color: var(--royal); }
.legal__list {
list-style: none;
padding: 0;
margin: 0 0 16px;
display: flex; flex-direction: column;
gap: 8px;
}
.legal__list li {
position: relative;
padding-left: 20px;
font-size: 14.5px;
line-height: 1.6;
color: var(--ink-soft);
letter-spacing: -0.005em;
}
.legal__list li::before {
content: "";
position: absolute;
left: 0; top: 0.65em;
width: 10px; height: 1px;
background: var(--royal);
}
.legal__req {
display: grid;
grid-template-columns: 1fr;
gap: 12px 32px;
margin: 14px 0 24px;
padding: 20px 22px;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-sm);
}
.legal__req > div {
display: grid;
grid-template-columns: 220px 1fr;
gap: 16px;
align-items: baseline;
padding: 8px 0;
border-bottom: 1px dashed rgba(10,10,10,0.08);
}
.legal__req > div:last-child { border-bottom: 0; }
.legal__req dt {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--mute-2);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.legal__req dd {
margin: 0;
font-size: 13.5px;
color: var(--ink);
line-height: 1.5;
letter-spacing: -0.005em;
font-variant-numeric: tabular-nums;
}
.legal__req dd a {
color: var(--royal);
border-bottom: 1px solid color-mix(in srgb, var(--royal) 30%, transparent);
transition: border-color 180ms var(--ease);
}
.legal__req dd a:hover { border-bottom-color: var(--royal); }
.legal__foot {
display: flex; justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 56px;
padding-top: 24px;
border-top: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 11px;
color: var(--mute-2);
letter-spacing: 0.04em;
}
.legal__back {
color: var(--ink);
border-bottom: 1px solid var(--ink);
padding-bottom: 2px;
transition: color 180ms var(--ease), border-color 180ms var(--ease), gap 200ms var(--ease);
}
.legal__back:hover { color: var(--royal); border-bottom-color: var(--royal); }
@media (max-width: 640px) {
.legal__inner { padding: 48px var(--pad-x) 72px; }
.legal__title { font-size: clamp(26px, 7vw, 36px); }
.legal__req > div { grid-template-columns: 1fr; gap: 2px; }
.legal__req dt { font-size: 10px; }
.legal__req dd { font-size: 13px; }
}
/* ============================================================
REVEAL (scroll-in) — Apple-inspired cinematic entry
Bigger translate + subtle scale + blur fade with premium easing.
Drives by IntersectionObserver → `.is-inview` from script.js.
============================================================ */
[data-reveal] {
opacity: 0;
transform: translateY(36px) scale(0.98);
transition:
opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform, opacity;
}
[data-reveal].is-inview {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Stronger hero entry for title-level elements — compositor-only */
.manifesto__text[data-reveal],
.services__head[data-reveal],
.dev__head[data-reveal],
.cases__head[data-reveal],
.process__head[data-reveal],
.cta__inner[data-reveal] {
transform: translateY(56px) scale(0.97);
transition-duration: 920ms;
}
.manifesto__text.is-inview,
.services__head.is-inview,
.dev__head.is-inview,
.cases__head.is-inview,
.process__head.is-inview,
.cta__inner.is-inview {
transform: translateY(0) scale(1);
}
/* Card grids: slight stagger feel via nth-child delay
(JS also adds per-index delays, this layers extra polish) */
.svc-card[data-reveal],
.dev__visual[data-reveal],
.dev-card[data-reveal],
.case[data-reveal],
.step[data-reveal],
.metric[data-reveal] {
transform: translateY(48px) scale(0.97);
}
/* ============================================================
BRANDED CASES (VNSK, Biologique Recherche) + CASE SHEET MODAL
============================================================ */
/* Brand-card hero area inside .case__media */
.case--brand .case__title strong {
font-weight: 500;
letter-spacing: -0.005em;
}
.case--brand .case__title strong::after {
content: "";
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
margin-left: 6px;
transform: translateY(-4px);
opacity: 0.55;
}
.case__tag--own {
color: var(--ink);
border-color: rgba(10,10,10,0.18);
background: #fff;
}
/* ============================================================
VNSK — editorial fashion lookbook
============================================================ */
.case__media--vnsk {
background: radial-gradient(140% 100% at 100% 0%, #F3F3F2 0%, #E4E4E2 45%, #D2D2D0 100%);
}
.brand-card--vnsk {
position: absolute; inset: 18px;
padding: 22px 34px 16px;
background: linear-gradient(180deg, #FCFCFB 0%, #F1F1EF 100%);
border: 1px solid rgba(10,10,10,0.12);
border-radius: var(--r-md);
color: var(--ink);
overflow: hidden;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.7),
0 10px 28px -14px rgba(10,10,10,0.22);
display: grid;
grid-template-rows: auto 1fr auto auto;
gap: 8px;
}
.brand-card--vnsk::before {
content: "";
position: absolute; inset: 0;
background: repeating-linear-gradient(90deg, rgba(10,10,10,0.035) 0 1px, transparent 1px 14px);
pointer-events: none;
mix-blend-mode: multiply;
}
.brand-card--vnsk::after {
content: "";
position: absolute; right: -40px; top: -30px;
width: 180px; height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, transparent 70%);
pointer-events: none;
}
.vnsk-corner {
position: absolute;
width: 10px; height: 10px;
border: 1px solid rgba(10,10,10,0.28);
pointer-events: none;
z-index: 1;
}
.vnsk-corner--tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.vnsk-corner--tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.vnsk-corner--bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.vnsk-corner--br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
/* Models (editorial fashion photography — blended into paper) */
.vnsk-model {
position: absolute;
bottom: -2%;
height: 108%;
width: auto;
z-index: 1;
pointer-events: none;
opacity: 0.92;
transition: transform 500ms var(--ease), opacity 500ms var(--ease);
}
.vnsk-model--left { left: 3%; transform-origin: bottom left; }
.vnsk-model--right { right: 3%; transform-origin: bottom right; }
.case--vnsk:hover .vnsk-model--left,
.case--vnsk:hover .vnsk-model--right { transform: translateY(-4px) scale(1.015); }
.vnsk-row {
position: relative; z-index: 3;
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.vnsk-meta { display: inline-flex; gap: 8px; align-items: baseline; }
.vnsk-meta__key { color: var(--muted); }
.vnsk-meta__val { color: var(--ink); font-weight: 500; letter-spacing: 0.02em; }
.vnsk-pill {
font-family: var(--font-mono);
font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
padding: 4px 9px;
border-radius: var(--r-pill);
background: var(--ink); color: #fff;
}
.vnsk-side {
position: absolute;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
transform-origin: center;
display: inline-flex; gap: 6px; align-items: center;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
z-index: 3;
pointer-events: none;
}
.vnsk-side--left { left: 4px; }
.vnsk-side--right { right: 4px; }
.vnsk-side__bullet {
width: 3px; height: 3px;
border-radius: 50%;
background: currentColor;
opacity: 0.5;
}
.vnsk-stage {
position: relative; z-index: 2;
display: grid;
grid-template-rows: auto auto auto auto;
align-items: center; justify-items: center;
gap: 8px;
padding: 2px 0;
}
.vnsk-stage__line {
width: 100%;
height: 1px;
background: rgba(10,10,10,0.28);
position: relative;
}
.vnsk-stage__line::before,
.vnsk-stage__line::after {
content: "";
position: absolute; top: 50%;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--ink);
transform: translateY(-50%);
}
.vnsk-stage__line::before { left: 0; }
.vnsk-stage__line::after { right: 0; }
.vnsk-wordmark {
display: inline-flex;
gap: clamp(2px, 0.6vw, 10px);
font-weight: 500;
letter-spacing: -0.04em;
font-size: clamp(50px, 8.8vw, 116px);
line-height: 0.9;
color: var(--ink);
position: relative;
z-index: 2;
}
.vnsk-wordmark span {
display: inline-block;
transition: transform 260ms var(--ease);
}
.case--vnsk:hover .vnsk-wordmark span:nth-child(1) { transform: translateY(-3px); }
.case--vnsk:hover .vnsk-wordmark span:nth-child(2) { transform: translateY( 3px); }
.case--vnsk:hover .vnsk-wordmark span:nth-child(3) { transform: translateY(-3px); }
.case--vnsk:hover .vnsk-wordmark span:nth-child(4) { transform: translateY( 3px); }
.vnsk-tagline {
display: inline-flex; gap: 8px; align-items: center;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.04em;
text-transform: lowercase;
}
.vnsk-tagline__dash { opacity: 0.45; }
.vnsk-ticker {
position: relative; z-index: 3;
display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
padding: 6px 0;
border-top: 1px dashed rgba(10,10,10,0.25);
border-bottom: 1px dashed rgba(10,10,10,0.25);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.04em;
color: var(--ink-soft);
background:
linear-gradient(90deg,
rgba(252,252,251,0) 0%,
rgba(252,252,251,0.9) 14%,
rgba(252,252,251,0.9) 86%,
rgba(252,252,251,0) 100%);
}
.vnsk-ticker__item { display: inline-flex; gap: 5px; align-items: baseline; }
.vnsk-ticker__item em {
font-style: normal;
color: var(--muted);
font-size: 9px;
}
.vnsk-row--bot {
padding-top: 2px;
color: var(--ink-soft);
}
.vnsk-kpi {
display: inline-flex; gap: 6px; align-items: baseline;
color: var(--muted);
letter-spacing: 0.04em;
}
.vnsk-kpi strong {
color: var(--ink);
font-family: var(--font-mono);
font-weight: 500;
font-size: 12px;
letter-spacing: 0;
}
/* ============================================================
Biologique Recherche — ivory apothecary etiquette
============================================================ */
.case__media--br {
background: linear-gradient(155deg, #F3E9CC 0%, #ECDFB9 52%, #DFCF9B 100%);
overflow: hidden;
}
.br-bg {
position: absolute;
inset: -24px;
width: calc(100% + 48px);
height: calc(100% + 48px);
object-fit: cover;
filter: blur(13px) saturate(1.08) brightness(1.03);
opacity: 0.85;
z-index: 0;
pointer-events: none;
transform: scale(1.04);
transition: transform 900ms var(--ease), filter 700ms var(--ease), opacity 600ms var(--ease);
}
.br-bg-tint {
position: absolute; inset: 0;
background:
radial-gradient(120% 90% at 80% 0%, rgba(245,234,203,0.35) 0%, rgba(223,207,155,0.55) 60%, rgba(184,159,100,0.5) 100%),
linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(10,10,10,0.08) 100%);
z-index: 0;
pointer-events: none;
transition: opacity 600ms var(--ease);
}
/* ── Hover animation for Biologique Recherche case ── */
/* Reveal the cream: reduce blur on both outer banner and inner label bg,
fade tint, slight scale — so the product becomes visible. */
.case--br:hover .br-bg {
transform: scale(1.09);
filter: blur(4px) saturate(1.18) brightness(1.07);
opacity: 0.95;
}
.case--br:hover .br-bg-tint { opacity: 0.55; }
.br-label-bg { transition: filter 700ms var(--ease), opacity 500ms var(--ease); }
.case--br:hover .br-label-bg {
filter: blur(1.5px) saturate(1.14) brightness(1.08);
opacity: 0.72;
}
/* Paper label lifts, tilts slightly, shadow deepens */
.brand-card--br {
transition:
transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 520ms var(--ease);
will-change: transform;
}
.case--br:hover .brand-card--br {
transform: translateY(-6px) rotate(-0.4deg) scale(1.012);
box-shadow:
0 0 0 3px #F5EACB,
0 0 0 4px rgba(10,10,10,0.32),
0 26px 46px -18px rgba(10,10,10,0.42);
}
/* Serif «Biologique Recherche» — alternating nudge like VNSK wordmark */
.br-label__serif-it,
.br-label__serif-rg {
display: inline-block;
transition: transform 420ms var(--ease), letter-spacing 420ms var(--ease);
}
.case--br:hover .br-label__serif-it {
transform: translate(-1px, -2px) rotate(-0.6deg);
letter-spacing: 0.02em;
}
.case--br:hover .br-label__serif-rg {
transform: translate( 1px, 1px) rotate( 0.4deg);
letter-spacing: 0.025em;
}
/* Stars spin */
.br-star,
.br-label__star {
display: inline-block;
transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
transform-origin: center;
}
.case--br:hover .br-star { transform: translateY(-1px) rotate(72deg) scale(1.18); }
.case--br:hover .br-label__star { transform: rotate(-72deg) scale(1.22); }
/* Accent values (×4.1, −42%) pulse on hover */
.br-spec__v--accent {
transition: transform 400ms var(--ease-spring);
}
.case--br:hover .br-spec__v--accent { transform: scale(1.08); }
.brand-card--br { z-index: 1; }
.brand-card--br {
position: absolute; inset: 10% 14%;
background: #F5EACB;
border: 1px solid rgba(10,10,10,0.85);
border-radius: 3px;
padding: 8px;
box-shadow:
0 0 0 3px #F5EACB,
0 0 0 4px rgba(10,10,10,0.25),
0 12px 30px -16px rgba(10,10,10,0.38);
overflow: hidden;
}
.brand-card--br::before {
content: "";
position: absolute; inset: 0;
background:
repeating-linear-gradient(0deg, rgba(10,10,10,0.015) 0 1px, transparent 1px 3px),
repeating-linear-gradient(90deg, rgba(180,140,70,0.05) 0 1px, transparent 1px 4px);
pointer-events: none;
mix-blend-mode: multiply;
}
.br-label {
position: absolute; inset: 8px;
border: 1px solid rgba(10,10,10,0.65);
border-radius: 1px;
padding: 12px 18px 10px;
display: grid;
grid-template-rows: auto auto auto auto 1fr auto;
gap: 6px;
color: var(--ink);
background: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,0.35) 0%, transparent 60%);
overflow: hidden;
}
.br-label-bg {
position: absolute;
inset: -6px;
width: calc(100% + 12px);
height: calc(100% + 12px);
object-fit: cover;
filter: blur(5px) saturate(1.08) brightness(1.06);
opacity: 0.52;
z-index: 0;
pointer-events: none;
}
.br-label > *:not(.br-label-bg) { position: relative; z-index: 1; }
.br-label__top {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
}
.br-label__top-left { display: inline-flex; gap: 6px; align-items: center; }
.br-star {
color: #B8252A;
font-size: 14px;
line-height: 1;
transform: translateY(-1px);
}
.br-label__top-right { letter-spacing: 0.24em; }
.br-label__serif {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
font-family: 'Times New Roman', 'Georgia', serif;
font-weight: 400;
text-align: center;
line-height: 0.96;
color: var(--ink);
padding: 2px 0 0;
}
.br-label__serif-it {
font-style: italic;
font-size: clamp(22px, 3.2vw, 34px);
letter-spacing: 0.01em;
}
.br-label__serif-rg {
font-size: clamp(22px, 3.2vw, 34px);
letter-spacing: 0.015em;
margin-top: -2px;
}
.br-label__sep {
display: flex; align-items: center; justify-content: center;
gap: 10px;
padding: 0;
}
.br-label__line {
flex: 1;
max-width: 140px;
height: 1px;
background: rgba(10,10,10,0.55);
}
.br-label__star {
color: var(--ink);
font-size: 11px;
line-height: 1;
}
.br-label__products {
display: flex; justify-content: center; align-items: center;
gap: 8px; flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
}
.br-label__dot {
width: 3px; height: 3px;
border-radius: 50%;
background: rgba(10,10,10,0.5);
display: inline-block;
}
.br-label__specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 22px;
padding: 2px 2px 0;
align-content: center;
}
.br-spec {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
line-height: 1.2;
white-space: nowrap;
}
.br-spec__k { color: var(--ink-soft); }
.br-spec__dots {
height: 6px;
background-image: radial-gradient(circle, rgba(10,10,10,0.55) 1px, transparent 1.2px);
background-size: 4px 2px;
background-repeat: repeat-x;
background-position: 0 50%;
align-self: center;
}
.br-spec__v { color: var(--ink); letter-spacing: 0.04em; }
.br-spec__v--accent { color: #B8252A; font-weight: 500; }
.br-label__bot {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
padding-top: 4px;
border-top: 1px dashed rgba(10,10,10,0.35);
}
.br-label__barcode {
display: inline-flex; align-items: stretch;
height: 14px;
gap: 1.5px;
margin: 0 auto;
}
.br-label__barcode i {
display: inline-block;
width: 1.5px; height: 100%;
background: var(--ink);
}
.br-label__barcode i:nth-child(2n) { width: 2.5px; }
.br-label__barcode i:nth-child(3n) { width: 1px; opacity: 0.85; }
.br-label__barcode i:nth-child(5n) { width: 3px; }
.br-label__barcode i:nth-child(7n) { width: 1px; }
.br-label__lot { letter-spacing: 0.18em; color: var(--ink-soft); }
/* Case foot — read button + shops */
.case__foot {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 14px 24px 22px;
flex-wrap: wrap;
}
.case__read {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink);
padding: 9px 14px;
border-radius: var(--r-pill);
background: var(--ink);
color: #fff;
transition: transform 200ms var(--ease), background 200ms var(--ease), gap 200ms var(--ease);
}
.case__read svg { transition: transform 200ms var(--ease); }
.case__read:hover {
background: var(--royal);
gap: 12px;
}
.case__read:hover svg { transform: translate(2px, -2px); }
.case__shops {
display: inline-flex; gap: 6px; flex-wrap: wrap;
}
.case__shop {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono);
font-size: 11px;
padding: 6px 10px;
border-radius: var(--r-pill);
border: 1px solid var(--line);
background: #fff;
color: var(--ink-soft);
transition: transform 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), background 200ms var(--ease);
}
.case__shop:hover { transform: translateY(-1px); border-color: var(--ink); color: var(--ink); }
.case__shop--wb { color: #CB11AB; border-color: rgba(203,17,171,0.3); }
.case__shop--wb:hover { background: #CB11AB; color: #fff; border-color: #CB11AB; }
.case__shop--ozon { color: var(--royal); border-color: rgba(0,91,255,0.3); }
.case__shop--ozon:hover { background: var(--royal); color: #fff; border-color: var(--royal); }
/* ============================================================
CASE SHEET (modal for deep-dive)
============================================================ */
.case-sheet {
position: fixed; inset: 0;
z-index: 200;
display: flex; align-items: center; justify-content: center;
padding: 24px;
opacity: 0;
pointer-events: none;
transition: opacity 260ms var(--ease);
}
.case-sheet[data-open] {
opacity: 1;
pointer-events: auto;
}
.case-sheet__backdrop {
position: absolute; inset: 0;
background: rgba(10,10,10,0.52);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.case-sheet__dialog {
position: relative;
width: min(920px, 100%);
max-height: calc(100vh - 48px);
overflow: hidden;
background: var(--bg);
border-radius: var(--r-lg);
box-shadow: 0 30px 80px -30px rgba(10,10,10,0.45);
transform: translateY(18px) scale(0.98);
transition: transform 340ms var(--ease-spring);
display: flex; flex-direction: column;
}
.case-sheet[data-open] .case-sheet__dialog { transform: translateY(0) scale(1); }
.case-sheet__close {
position: absolute; top: 16px; right: 16px;
z-index: 3;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.9);
border: 1px solid var(--line);
display: inline-flex; align-items: center; justify-content: center;
color: var(--ink);
backdrop-filter: blur(10px);
transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.case-sheet__close:hover { background: var(--ink); color: #fff; transform: rotate(90deg); }
.case-sheet__panel {
display: flex; flex-direction: column;
overflow-y: auto;
flex: 1;
}
.case-sheet__panel[hidden] { display: none; }
.case-sheet__hero {
position: relative;
padding: 32px 40px 26px;
background: radial-gradient(120% 80% at 80% 0%, #F1ECE1 0%, #F8F4EB 60%, #FAF7EF 100%);
border-bottom: 1px solid var(--line);
color: var(--ink);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto auto auto;
column-gap: 28px;
row-gap: 8px;
align-items: start;
}
.case-sheet__hero--br {
background: linear-gradient(160deg, #F6EFDE 0%, #FAF2DF 60%, #F2E6C8 100%);
}
.case-sheet__eyebrow {
grid-column: 1 / -1;
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--muted);
text-transform: uppercase;
margin-bottom: 4px;
}
.case-sheet__eyebrow-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--royal);
animation: caseSheetPulse 2.4s var(--ease) infinite;
}
@keyframes caseSheetPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.35); opacity: 0.6; }
}
.case-sheet__wordmark {
grid-column: 1;
font-weight: 500;
letter-spacing: -0.05em;
font-size: clamp(42px, 6vw, 68px);
line-height: 0.9;
color: var(--ink);
margin: 0;
}
.case-sheet__serif {
grid-column: 1;
display: flex; flex-direction: column;
font-family: 'Times New Roman', 'Georgia', serif;
font-weight: 400;
line-height: 0.95;
letter-spacing: 0.01em;
color: var(--ink);
}
.case-sheet__serif span:first-child { font-style: italic; font-size: clamp(28px, 4vw, 44px); }
.case-sheet__serif span:last-child { font-size: clamp(28px, 4vw, 44px); }
.case-sheet__brand-sub {
grid-column: 1;
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
margin: 0;
letter-spacing: 0.04em;
}
.case-sheet__title {
grid-column: 1 / -1;
margin-top: 10px;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.25;
letter-spacing: -0.02em;
font-weight: 500;
max-width: 760px;
color: var(--ink);
}
.case-sheet__kpi {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(10,10,10,0.12);
}
.case-sheet__kpi div {
display: flex; flex-direction: column; gap: 3px;
padding-right: 14px;
border-right: 1px solid rgba(10,10,10,0.08);
}
.case-sheet__kpi div:last-child { border-right: 0; }
.case-sheet__kpi strong {
font-size: clamp(18px, 2.2vw, 26px);
font-weight: 500;
letter-spacing: -0.02em;
font-feature-settings: 'tnum';
}
.case-sheet__kpi span {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.04em;
}
.case-sheet__body {
padding: 26px 40px 28px;
display: flex; flex-direction: column;
gap: 0;
}
.case-sheet__block {
display: grid;
grid-template-columns: 32px 1fr;
column-gap: 14px;
row-gap: 8px;
align-items: baseline;
padding: 20px 0;
border-bottom: 1px solid var(--line);
}
.case-sheet__block > *:not(.case-sheet__block-num) { grid-column: 2; }
.case-sheet__block-num {
grid-column: 1;
grid-row: 1;
align-self: baseline;
}
.case-sheet__block:last-child { border-bottom: 0; padding-bottom: 0; }
.case-sheet__block:first-child { padding-top: 4px; }
/* Gallery of cabinet screenshots inside case-sheet */
.case-sheet__gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
margin-top: 8px;
}
.case-sheet__gallery a {
position: relative;
display: block;
border-radius: var(--r-md);
overflow: hidden;
background: #0a0a0a;
border: 1px solid var(--line);
cursor: zoom-in;
aspect-ratio: 16 / 10;
transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.case-sheet__gallery a::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(10,10,10,0.15) 100%);
opacity: 0;
transition: opacity 220ms var(--ease);
pointer-events: none;
}
.case-sheet__gallery a:hover {
transform: translateY(-2px);
border-color: var(--ink);
box-shadow: 0 12px 28px -14px rgba(10,10,10,0.3);
}
.case-sheet__gallery a:hover::after { opacity: 1; }
.case-sheet__gallery img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center top;
transition: transform 520ms var(--ease);
}
.case-sheet__gallery a:hover img { transform: scale(1.04); }
.case-sheet__proof {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 8px;
}
.case-sheet__proof div {
min-height: 112px;
padding: 14px;
border: 1px solid var(--line);
border-radius: var(--r-md);
background:
linear-gradient(180deg, rgba(255,255,255,0.82), rgba(250,250,247,0.94)),
var(--bg-alt);
display: flex;
flex-direction: column;
gap: 8px;
}
.case-sheet__proof strong {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
}
.case-sheet__proof span {
font-size: 13.5px;
line-height: 1.45;
color: var(--ink-soft);
}
/* ──── Universal gallery lightbox ──── */
.gl-lb {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 16px;
opacity: 0;
pointer-events: none;
transition: opacity 260ms var(--ease);
}
.gl-lb[data-open] { opacity: 1; pointer-events: auto; }
.gl-lb__backdrop {
position: absolute; inset: 0;
background: rgba(10, 10, 10, 0.88);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
cursor: zoom-out;
}
.gl-lb__dialog {
position: relative;
z-index: 1;
width: min(1280px, 100%);
max-height: calc(100vh - 64px);
display: flex;
align-items: center;
justify-content: center;
transform: scale(0.96);
transition: transform 320ms var(--ease);
}
.gl-lb[data-open] .gl-lb__dialog { transform: scale(1); }
.gl-lb__stage {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
max-width: 100%;
max-height: calc(100vh - 96px);
}
.gl-lb__img {
max-width: min(1200px, 96vw);
max-height: calc(100vh - 140px);
width: auto; height: auto;
display: block;
border-radius: 10px;
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
background: #0a0a0a;
}
.gl-lb__cap {
font-family: var(--font-mono);
font-size: 12px;
color: rgba(255,255,255,0.72);
letter-spacing: 0.04em;
text-align: center;
padding: 0 16px;
max-width: 860px;
}
.gl-lb__close {
position: absolute;
top: -40px; right: 4px;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
color: #fff;
border: 0;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background 180ms var(--ease), transform 220ms var(--ease);
}
.gl-lb__close:hover { background: rgba(255,255,255,0.22); transform: scale(1.06); }
.gl-lb__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px; height: 48px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
color: #fff;
border: 0;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background 180ms var(--ease), transform 220ms var(--ease);
z-index: 2;
}
.gl-lb__nav:hover { background: rgba(255,255,255,0.22); }
.gl-lb__nav--prev { left: -64px; }
.gl-lb__nav--next { right: -64px; }
.gl-lb__nav[hidden] { display: none; }
.gl-lb__counter {
position: absolute;
bottom: -32px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 12px;
color: rgba(255,255,255,0.65);
letter-spacing: 0.08em;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
}
body[data-gl-lb-open] { overflow: hidden; }
@media (max-width: 720px) {
.gl-lb { padding: 16px 10px; }
.gl-lb__nav { width: 40px; height: 40px; }
.gl-lb__nav--prev { left: 8px; top: auto; bottom: 8px; transform: none; }
.gl-lb__nav--next { right: 8px; top: auto; bottom: 8px; transform: none; }
.gl-lb__close { top: 8px; right: 8px; }
.gl-lb__img { max-height: calc(100vh - 200px); }
.gl-lb__counter { bottom: -26px; font-size: 11px; }
}
.case-sheet__block-num {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
padding-top: 6px;
}
.case-sheet__block h3 {
font-size: 18px; font-weight: 500;
letter-spacing: -0.01em;
margin-bottom: 10px;
}
.case-sheet__block p {
color: var(--ink-soft);
line-height: 1.55;
font-size: 14.5px;
}
.case-sheet__block ul {
display: flex; flex-direction: column; gap: 8px;
}
.case-sheet__block li {
position: relative;
padding-left: 20px;
color: var(--ink-soft);
line-height: 1.5;
font-size: 14.5px;
}
.case-sheet__block li::before {
content: "";
position: absolute;
left: 0; top: 10px;
width: 12px; height: 1px;
background: var(--ink);
opacity: 0.5;
}
.case-sheet__chart {
margin-top: 18px;
padding: 18px 20px 14px;
border: 1px solid var(--line);
border-radius: var(--r-md);
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
display: grid;
gap: 10px;
}
.case-sheet__chart-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--muted);
text-transform: uppercase;
}
.case-sheet__chart-delta {
color: var(--royal);
font-weight: 500;
letter-spacing: 0.04em;
}
.case-sheet__chart-svg {
width: 100%;
height: 80px;
display: block;
overflow: visible;
}
.case-sheet__chart-axis {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 10px;
color: var(--mute-2);
letter-spacing: 0.04em;
}
.case-sheet__stack {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.case-sheet__stack li {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink);
padding: 6px 11px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-pill);
transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.case-sheet__stack li::before { display: none; }
.case-sheet__stack li:hover {
background: var(--ink);
border-color: var(--ink);
color: #fff;
}
.case-sheet__foot {
padding: 20px 40px 28px;
border-top: 1px solid var(--line);
background: var(--bg-alt);
}
.case-sheet__foot-title {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 12px;
}
.case-sheet__shops {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.case-sheet__shop {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto;
align-items: center;
gap: 2px 12px;
padding: 14px 16px;
border-radius: var(--r-md);
background: #fff;
border: 1px solid var(--line);
color: var(--ink);
transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.case-sheet__shop:hover {
transform: translateY(-2px);
border-color: var(--ink);
box-shadow: 0 10px 26px -14px rgba(10,10,10,0.28);
}
.case-sheet__shop-pin {
grid-row: 1 / 3;
align-self: center;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 4px 8px;
border-radius: var(--r-pill);
background: var(--ink);
color: #fff;
}
.case-sheet__shop--wb .case-sheet__shop-pin { background: #CB11AB; }
.case-sheet__shop--ozon .case-sheet__shop-pin { background: var(--royal); }
.case-sheet__shop-name {
font-size: 14px; font-weight: 500;
letter-spacing: -0.005em;
}
.case-sheet__shop-sub {
grid-column: 2;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
}
.case-sheet__shop-arr {
grid-row: 1 / 3;
align-self: center;
color: var(--muted);
transition: transform 220ms var(--ease), color 220ms var(--ease);
}
.case-sheet__shop:hover .case-sheet__shop-arr {
color: var(--ink);
transform: translate(3px, -3px);
}
/* lock body scroll when sheet is open */
body[data-case-sheet-open] {
overflow: hidden;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
.mega__inner { grid-template-columns: repeat(3, 1fr); }
.mega__preview { display: none; }
.promo__avatar { width: 48px; height: 48px; }
.promo__title-row { gap: 18px; }
.promo__logo { width: 36px; height: 36px; }
.promo__logos { gap: 2px; margin-top: 24px; }
.promo__logo:nth-child(5) { margin-left: 0; }
.promo__logo:nth-child(7) { margin-left: -8px; }
.promo__logo[data-platform="direct"] { padding: 0; }
.promo__logo:hover { transform: translateY(-5px) rotate(0deg) scale(1.18); }
.promo__logo:nth-child(6):hover ~ .promo__logo:nth-child(7) { transform: translate(14px, -2px) rotate(-18deg); }
.promo__logo:nth-child(7):hover { transform: translate(4px, -5px) rotate(0deg) scale(1.18); }
.promo__bottom { grid-template-columns: 1fr; gap: 28px; align-items: flex-start; }
.hero-stats__inner { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
.hero-stat:nth-child(2) { border-right: 0; }
.agency__inner { grid-template-columns: 1fr; gap: 48px; padding: 80px var(--pad-x); }
.agency__side { position: static; }
.services__grid { grid-template-columns: 1fr; }
.dev__layout { grid-template-columns: 1fr; }
.dev__visual { min-height: 380px; }
.dev__summary { grid-template-columns: repeat(2, 1fr); }
.process__steps { grid-template-columns: 1fr; }
.cases__grid { grid-template-columns: 1fr; }
.partners__row { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.manifesto__principles { grid-template-columns: 1fr; gap: 24px; }
.principle { min-height: auto; padding-bottom: 20px; }
.cta__bullets { grid-template-columns: 1fr; }
.footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
/* Give brand-card media more vertical room on mobile */
.case__media { aspect-ratio: 4 / 3; }
/* Case body — consistent compact paddings */
.case__meta { padding: 14px 18px 0; gap: 6px; }
.case__tag { font-size: 10.5px; padding: 5px 10px; }
.case__title { padding: 10px 18px 0; font-size: 19px; line-height: 1.22; }
.case__desc { padding: 10px 18px 16px; font-size: 13.5px; line-height: 1.5; }
/* Cases head — stack on mobile for clean rhythm */
.cases__head {
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 56px;
padding: 0 var(--pad-x);
}
.cases__label { font-size: 11px; margin: 0; }
.cases__title {
grid-column: auto;
font-size: clamp(28px, 6.8vw, 38px);
line-height: 1.08;
padding-bottom: 4px;
}
.cases__all { justify-self: flex-start; font-size: 12.5px; margin-top: 8px; }
/* VNSK mobile — same aspect as other cases, girl further left, guy further right */
.case__media--vnsk { aspect-ratio: 4 / 3; }
.brand-card--vnsk { inset: 10px; padding: 12px 12px 10px; gap: 6px; }
.vnsk-model {
height: 106%;
bottom: -3%;
opacity: 0.94;
}
.vnsk-model--left { left: -5%; }
.vnsk-model--right { right: -17%; }
/* Scroll anchor — so sticky header doesn't crop the eyebrow */
.cases { scroll-margin-top: calc(var(--header-h) + 16px); }
/* Biologique mobile — soften the background blur so the cream feels lighter */
.case--br .br-bg { filter: blur(6px) saturate(1.04) brightness(1.03); }
.case--br:hover .br-bg { filter: blur(2px) saturate(1.1) brightness(1.05); }
.vnsk-stage { gap: 4px; padding: 2px 0 0; }
.vnsk-wordmark {
font-size: clamp(34px, 12vw, 52px);
gap: 2px;
letter-spacing: -0.035em;
}
.vnsk-tagline { font-size: 10px; gap: 6px; }
.vnsk-stage__line { width: 82%; }
.vnsk-ticker {
gap: 6px 10px;
font-size: 9.5px;
padding: 5px 6px;
background: rgba(252,252,251,0.94);
border-radius: 6px;
border-top: 0;
border-bottom: 0;
}
.vnsk-ticker__item em { font-size: 8.5px; }
.vnsk-side { display: none; }
.vnsk-pill { font-size: 9px; padding: 3px 7px; }
.vnsk-row { font-size: 9.5px; }
.vnsk-row--bot {
background: rgba(252,252,251,0.94);
padding: 4px 8px;
border-radius: 4px;
}
.vnsk-corner { width: 8px; height: 8px; }
.vnsk-corner--tl, .vnsk-corner--tr { top: 4px; }
.vnsk-corner--tl { left: 4px; }
.vnsk-corner--tr { right: 4px; }
.vnsk-corner--bl, .vnsk-corner--br { bottom: 4px; }
.vnsk-corner--bl { left: 4px; }
.vnsk-corner--br { right: 4px; }
/* Biologique Recherche mobile — expand label so it fills the media
instead of hovering in the middle. Specs collapse to one column. */
.brand-card--br { inset: 4% 6%; padding: 5px; }
.br-label { inset: 5px; padding: 10px 14px 8px; gap: 5px; }
.br-label__serif-it, .br-label__serif-rg { font-size: clamp(24px, 7vw, 32px); }
.br-label__line { max-width: 60px; }
.br-label__products { font-size: 9px; gap: 5px; letter-spacing: 0.1em; }
.br-label__specs { grid-template-columns: 1fr; gap: 2px; }
.br-spec { font-size: 9px; }
.br-spec__dots { flex: 1; }
.br-label__top, .br-label__bot { font-size: 8.5px; letter-spacing: 0.12em; }
.br-label__bot { gap: 6px; }
.br-label__barcode { height: 10px; }
/* Case foot — compact row: shops left, read-button corner right */
.case__foot {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 18px 16px;
}
.case__shops {
order: 1;
gap: 6px;
flex-wrap: wrap;
flex: 1 1 auto;
min-width: 0;
}
.case__shop { font-size: 10.5px; padding: 5px 9px; }
.case__read {
order: 2;
flex: none;
padding: 8px 10px 8px 12px;
font-size: 11.5px;
gap: 5px;
}
.case__read svg { width: 12px; height: 12px; }
.case-sheet { padding: 0; align-items: flex-end; }
.case-sheet__dialog {
width: 100%;
max-height: 92vh;
border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.case-sheet__hero { padding: 40px 24px 24px; }
.case-sheet__body { padding: 28px 24px; }
.case-sheet__block { grid-template-columns: 1fr; gap: 6px; }
.case-sheet__block-num { padding-top: 0; }
.case-sheet__proof { grid-template-columns: 1fr; }
.case-sheet__kpi { grid-template-columns: repeat(2, 1fr); gap: 14px; padding-top: 18px; margin-top: 18px; }
.case-sheet__foot { padding: 20px 24px 28px; }
.case-sheet__shops { grid-template-columns: 1fr; }
.case-sheet__close { top: 10px; right: 10px; width: 32px; height: 32px; }
}
/* ════════════════════════════════════════════════════════════
TABLET — collapse multi-column grids (900px breakpoint)
Fills the dead zone between desktop and 780px mobile.
════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* Promo — drop full viewport height, tighter title */
.promo { min-height: unset; padding: 28px var(--pad-x) 36px; }
.promo__title { font-size: clamp(28px, 4.4vw, 40px); line-height: 1.08; }
.promo__title-row { gap: 14px; }
.promo__avatar { width: 48px; height: 48px; }
.promo__bottom { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
.promo__main { gap: 24px; }
/* EV showcase — align flush to container edges like the text block
above; no auto-margin so hero reads as one cohesive left-aligned
unit on narrow screens. */
.evsh {
max-width: 100%;
margin: 0;
justify-self: stretch;
--evsh-stage-h: 340px;
--evsh-panel-w: 200px;
--evsh-panel-h: 280px;
--evsh-portrait: 116px;
}
/* Mega menu — drop preview column */
.mega__inner { grid-template-columns: repeat(2, 1fr); gap: 28px; }
.mega__preview { display: none; }
/* Hero stats — 4→2 */
.hero-stats__inner { grid-template-columns: repeat(2, 1fr); gap: 24px 28px; }
.hero-stat { padding-right: 18px; }
.hero-stat:nth-child(2) { border-right: 0; padding-right: 0; }
/* Partners — 4→2 */
.partners__row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
/* Services — 3→2 (last card spans full width) */
.services__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.svc-card { min-height: 380px; padding: 26px; }
.svc-card:last-child { grid-column: 1 / -1; min-height: 320px; }
.svc-card__title { font-size: 24px; }
/* Dev — single column, visual on top */
.dev__layout { grid-template-columns: 1fr; gap: 24px; }
.dev__visual { min-height: 360px; order: -1; }
.dev__cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
/* Cases — 2→1 */
.cases__grid { grid-template-columns: 1fr; gap: 18px; }
/* Process — 3→2 (third spans both) */
.process__steps { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.step:last-child { grid-column: 1 / -1; }
.step { padding: 24px 24px 28px; }
/* Agency — drop sticky side, single column */
.agency__inner { grid-template-columns: 1fr; gap: 36px; padding: 40px var(--pad-x) 72px; }
.agency__side { position: relative; top: auto; }
.agency__stat { grid-template-columns: minmax(120px, 160px) 1fr; gap: 24px; padding: 22px 0; }
.agency__stat-val { font-size: clamp(44px, 7vw, 60px); }
/* CTA — tighter padding, bullets 3→2 */
.cta__inner { padding: 64px 40px; }
.cta__bullets { grid-template-columns: repeat(2, 1fr); gap: 18px; }
/* Contact — collapse to single column earlier */
.contact__grid { grid-template-columns: 1fr; }
.contact__map { min-height: 360px; }
/* Footer — 4→2 with brand spanning */
.footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; padding: 56px var(--pad-x) 28px; }
.footer__col--brand { grid-column: 1 / -1; max-width: 520px; }
/* Manifesto — tone down padding, principles 3→1 */
.manifesto { padding: 96px var(--pad-x); }
.manifesto__orb--c, .manifesto__orb--d { display: none; }
.manifesto__principles { grid-template-columns: 1fr; gap: 32px; margin-top: 56px; }
.principle { min-height: unset; padding-bottom: 8px; }
}
@media (max-width: 780px) {
:root { --pad-x: 20px; --header-h: 60px; }
.nav, .header__right { display: none; }
.header__inner { grid-template-columns: 1fr auto; }
.burger { display: block; position: relative; z-index: 60; cursor: pointer; }
/* Smaller logo on mobile — less overpowering */
.logo__mark { width: 30px; height: 30px; }
.logo__text { font-size: 16px; }
.logo { gap: 8px; }
.promo { padding-top: 28px; padding-bottom: 20px; min-height: unset; }
.promo__status { margin-bottom: 12px; }
.promo__title { font-size: clamp(30px, 8.2vw, 44px); }
.promo__title-row { gap: 16px; }
.promo__avatar { width: 54px; height: 54px; border-width: 2px; }
.promo__logos { margin-top: 18px; }
.promo__logo { width: 36px; height: 36px; }
.manifesto { padding: 80px var(--pad-x); }
.manifesto__text { font-size: 20px; }
.manifesto__atmosphere::after {
inset: 24% -12% 8%;
background-size: 36px 36px;
}
.services { padding: 60px var(--pad-x); }
.services__grid { gap: 12px; }
.svc-card { padding: 24px; min-height: unset; }
.dev { background-size: 36px 36px; }
.dev__inner { padding: 60px var(--pad-x); }
.dev__head { margin-bottom: 32px; }
.dev__layout { gap: 14px; }
.dev__visual { min-height: 360px; padding: 18px; }
.dev__visual::before {
inset: 0;
opacity: 0.72;
}
.dev__map {
inset: 18px 16px auto 16px;
min-height: 190px;
height: auto;
grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
gap: 8px;
transform: none;
}
.dev__map-column { padding: 10px; }
.dev__map-title { font-size: 9.5px; margin-bottom: 8px; }
.dev__map-item { min-height: 34px; font-size: 11px; }
.dev__console { padding: 16px; }
.dev__sync-row { grid-template-columns: 1fr auto; row-gap: 8px; }
.dev__sync-line { grid-column: 1 / -1; grid-row: 2; }
.dev__cards { grid-template-columns: 1fr; gap: 12px; }
.dev-card { min-height: unset; padding: 22px; }
.dev__summary { grid-template-columns: 1fr; margin-top: 12px; }
.dev__summary span { min-height: 50px; }
.cases { padding: 60px var(--pad-x); }
.cases__head { grid-template-columns: 1fr; }
.cases__title { grid-column: 1; }
.agency__inner { padding: 32px var(--pad-x) 56px; gap: 36px; }
.agency__stat { grid-template-columns: 100px 1fr; gap: 18px; padding: 18px 0; }
.agency__stat-val { font-size: clamp(38px, 8.2vw, 52px); }
.agency__stat-label { font-size: 13px; }
.agency__stat-link { font-size: 13px; }
.hero-stats__inner { padding: 24px var(--pad-x); gap: 20px 18px; }
.hero-stat { padding-right: 12px; }
.process { padding: 60px var(--pad-x); }
.process__steps { grid-template-columns: 1fr; }
.partners__row { grid-template-columns: 1fr; gap: 12px; }
.cta { padding: 60px var(--pad-x); }
.cta__inner { padding: 48px 28px; border-radius: var(--r-lg); }
.footer__inner { grid-template-columns: 1fr 1fr; padding: 48px var(--pad-x) 24px; gap: 32px; }
}
/* ════════════════════════════════════════════════════════════
MOBILE — phone breakpoints (640px and 480px)
Tightens grids to single column, kills horizontal overflow,
scales decorative elements down.
════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* Hero stats — single column */
.hero-stats__inner { grid-template-columns: 1fr; gap: 18px; padding: 24px var(--pad-x); }
.hero-stat { padding-right: 0; border-right: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.hero-stat:last-child { border-bottom: 0; padding-bottom: 0; }
/* Partners — single column with bottom borders */
.partners__row { grid-template-columns: 1fr; gap: 12px; }
.partner { padding: 18px 18px 16px; }
/* Services — full width single column */
.services__grid { grid-template-columns: 1fr; gap: 12px; }
.svc-card, .svc-card:last-child { min-height: unset; padding: 22px; grid-column: auto; }
/* Process — single column, hide leader line */
.process__steps { grid-template-columns: 1fr; gap: 12px; }
.step:last-child { grid-column: auto; }
.step::before { display: none; }
/* Agency — single column for cards */
.agency__grid,
.agency__stats { grid-template-columns: 1fr; gap: 20px; }
.agency__card { min-height: unset; padding: 20px; }
.agency__stat { padding-top: 14px; }
/* CTA — single column bullets */
.cta__bullets { grid-template-columns: 1fr; gap: 14px; }
.cta__actions { flex-direction: column; align-items: stretch; }
.cta__actions .btn { justify-content: center; width: 100%; }
/* Marquee — calm pace and tighter gap on small screens */
.marquee__track { gap: 18px; }
.marquee__item { font-size: 18px; }
/* Footer — compact editorial rows on mobile */
.footer__inner {
grid-template-columns: 1fr;
gap: 0;
padding: 28px var(--pad-x) 16px;
}
.footer__col--brand {
max-width: none;
gap: 8px;
padding-bottom: 18px;
margin-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.footer__col--brand .footer__pitch { font-size: 12px; line-height: 1.5; margin: 0; color: var(--muted); }
/* Link columns — editorial rows: mono label line + inline list */
.footer__col:not(.footer__col--brand) {
display: block;
padding: 10px 0;
border-bottom: 1px solid var(--line);
}
.footer__col:not(.footer__col--brand):last-child { border-bottom: 0; }
.footer__col:not(.footer__col--brand) .footer__label {
display: block;
font-family: var(--font-mono);
font-size: 9.5px;
color: var(--mute-2);
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0 0 4px;
}
/* Inline flow: links render as text, separated by dots, wrapping naturally */
.footer__col:not(.footer__col--brand) .footer__link,
.footer__col:not(.footer__col--brand) .footer__muted {
display: inline;
font-size: 12.5px;
padding: 0;
margin: 0;
color: var(--ink);
line-height: 1.55;
}
.footer__col:not(.footer__col--brand) .footer__muted {
color: var(--mute-2);
font-size: 11px;
display: block;
margin-top: 4px;
}
.footer__col:not(.footer__col--brand) .footer__link + .footer__link::before {
content: " · ";
color: var(--mute-2);
}
/* Manifesto — kill heavy decoration */
.manifesto { padding: 64px var(--pad-x); }
.manifesto__orb { display: none; }
/* Dev — compact visual */
.dev__visual { min-height: 300px; }
.dev__cards { grid-template-columns: 1fr; }
/* Case stats — keep 3 columns, tighter sizing so all 3 fit the row */
.case__stats {
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
padding: 18px !important;
}
.case__stats strong { font-size: clamp(16px, 4.8vw, 20px); }
.case__stats span { font-size: 10px; line-height: 1.3; }
/* Header logo text — drop on very narrow */
.logo__text { font-size: 16px; }
}
@media (max-width: 480px) {
:root { --pad-x: 16px; }
/* Promo — kill horizontal overflow from absolute children */
.promo, .evsh { overflow-x: clip; }
.evsh__3d, .evsh__photo { max-width: 100%; }
.promo__title { font-size: clamp(26px, 7.6vw, 36px); }
.promo__avatar { width: 44px; height: 44px; }
.promo__title-row { gap: 10px; }
.promo__logo { width: 36px; height: 36px; }
/* Marquee — slower text, no font shock */
.marquee__item { font-size: 16px; }
.marquee__track { gap: 14px; }
/* Partner mark + name compact */
.partner__name { font-size: 14px; }
.partner__meta { font-size: 11px; }
/* CTA inner padding */
.cta__inner { padding: 36px 20px; }
.cta__title { font-size: clamp(26px, 7.4vw, 36px); }
/* Hide noisy decor on dev section */
.dev__pulse, .dev__pulse--b, .dev__pulse--c, .dev__node { opacity: 0.5; }
}
/* ════════════════════════════════════════════════════════════
HERO (promo + EV showcase) — deep mobile polish
════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {
/* Lead text + meta stack, tighter spacing */
.promo__bottom { grid-template-columns: 1fr; gap: 18px; margin-top: 12px; }
.promo__main { gap: 14px; }
.promo__lead { font-size: 15px; line-height: 1.55; gap: 8px; }
.promo__lead-caption { font-size: 12px; padding-top: 8px; }
.promo__meta { gap: 12px; }
.promo__link { font-size: 14px; }
.promo__note { font-size: 11px; }
.promo__status { font-size: 11px; padding: 5px 12px 5px 8px; }
/* Everything in the hero block centers on mobile so the title, logos,
slide, body copy and CTAs all sit symmetrically on the viewport. */
.promo__col--text { text-align: center; }
.promo__status { align-self: center; }
.promo__title-row { justify-content: center; }
.promo__lead { align-self: center; text-align: center; }
.promo__lead-caption { text-align: center; }
/* CTAs side by side, clustered around center. Manager note wraps to
a new row below (full width), also centered. */
.promo__meta {
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px 24px;
width: 100%;
}
.promo__meta .promo__link { flex: 0 0 auto; }
.promo__meta .promo__note {
flex-basis: 100%;
justify-content: center;
text-align: center;
margin-top: 4px;
}
/* EV showcase — push the colored slide down toward the lead text so the
hero feels balanced (title at top, slide+lead+CTA cluster sits lower
in the viewport with breathing room above the slide). */
.promo__main { gap: 56px; align-items: center; }
.promo__bottom { margin-top: 28px; padding-top: 22px; }
/* Logos — tight overlapping flex row, centered on mobile */
.promo__logos {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 0;
margin-top: 14px;
max-width: none;
}
.promo__logo {
width: 36px;
height: 36px;
aspect-ratio: 1;
padding: 0;
margin-left: -6px !important;
}
.promo__logo:first-child { margin-left: 0 !important; }
.promo__logo:nth-child(7) { margin-left: -10px !important; }
/* EV showcase — preserve desktop layout + proportions, uniformly scale
the whole stage down. Slight margin above to drop it below logos;
aggressive negative margin-bottom pulls everything after back up
so the manager row stays visible in viewport. */
.promo__main { overflow-x: clip; gap: 20px; }
.evsh {
overflow: visible;
max-width: 100%;
padding: 0;
margin-top: 32px;
margin-bottom: -20px;
justify-self: center;
}
.promo__bottom { margin-top: 28px; padding-top: 18px; }
.promo__lead { gap: 6px; }
.promo__lead-caption { padding-top: 6px; }
.evsh__stage {
width: 460px;
max-width: none;
margin: 0 auto;
zoom: 0.72;
overflow: visible;
}
/* Mobile slide transition: smooth opacity-only crossfade. 3D rotateY
+ translateX combined with zoom creates sub-pixel jitter on iOS, so
on phones we use a pure fade (no transforms between slides). */
.evsh__slide {
transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1) !important;
transform: none !important;
}
.evsh__slide.is-active {
transform: none !important;
opacity: 1 !important;
}
.evsh__slide.is-leaving {
transform: none !important;
opacity: 0 !important;
}
/* Inner elements — opacity-only staggered entrance. No transforms
(zoom makes transforms jitter), just a soft per-layer fade so the
active slide composes in instead of snapping. */
.evsh__panel,
.evsh__portrait,
.evsh__word,
.evsh__3d,
.evsh__price-tag,
.evsh__card {
transform: none !important;
opacity: 0;
transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.evsh__slide.is-active .evsh__panel { opacity: 1; transition-delay: 40ms !important; }
.evsh__slide.is-active .evsh__portrait { opacity: 1; transition-delay: 140ms !important; }
.evsh__slide.is-active .evsh__word { opacity: 1; transition-delay: 220ms !important; }
.evsh__slide.is-active .evsh__word--bot { transition-delay: 280ms !important; }
.evsh__slide.is-active .evsh__3d { opacity: 1; transition-delay: 320ms !important; }
.evsh__slide.is-active .evsh__price-tag { opacity: 1; transition-delay: 400ms !important; }
.evsh__slide.is-active .evsh__card { opacity: 1; transition-delay: 460ms !important; }
/* Inactive slide — instantly reset so stagger restarts cleanly on next
activation. No delay on the way out. */
.evsh__slide:not(.is-active) .evsh__panel,
.evsh__slide:not(.is-active) .evsh__portrait,
.evsh__slide:not(.is-active) .evsh__word,
.evsh__slide:not(.is-active) .evsh__3d,
.evsh__slide:not(.is-active) .evsh__price-tag,
.evsh__slide:not(.is-active) .evsh__card {
transition-delay: 0ms !important;
}
/* Kill ALL idle float / spin / pulse loops inside the stage — they all
run in zoomed coord space and look jittery. Also kill the inner
sub-element enter animations (audit list check-ins, bidder bars,
stack rows) that stagger in with backwards-fill; on mobile we just
want the whole slide to appear at once. */
.evsh__stage *,
.evsh__stage *::before,
.evsh__stage *::after {
animation: none !important;
}
/* Neutralize auto-peek transform pulses (JS won't add .is-peek on
small touch viewports, but guard anyway). */
.evsh__slide--h.is-active.is-peek .evsh__panel,
.evsh__slide--h.is-active.is-peek .evsh__portrait,
.evsh__slide--h.is-active.is-peek .evsh__portrait img,
.evsh__slide--h.is-active.is-peek .evsh__3d,
.evsh__slide--h.is-active.is-peek .evsh__price-tag,
.evsh__slide--h.is-active.is-peek .evsh__word,
.evsh__slide--h.is-active.is-peek .evsh__card--tl,
.evsh__slide--h.is-active.is-peek .evsh__card--br {
transform: none !important;
box-shadow: inherit;
}
}
@media (max-width: 520px) {
/* Smaller scale for phones */
.evsh__stage { zoom: 0.62; }
/* Promo title shrinks more aggressive */
.promo__title { font-size: clamp(24px, 7vw, 34px); line-height: 1.06; }
.promo__avatar { width: 40px; height: 40px; }
/* Logos — slightly smaller, still overlapping */
.promo__logo { width: 32px; height: 32px; margin-left: -5px !important; }
.promo__logo:first-child { margin-left: 0 !important; }
.promo__logo:nth-child(7) { margin-left: -8px !important; }
}
@media (max-width: 380px) {
/* Very narrow phones — keep overlap, shrink logos more */
.promo__logo { width: 30px; height: 30px; margin-left: -5px !important; }
.promo__logo:first-child { margin-left: 0 !important; }
.promo__logo:nth-child(7) { margin-left: -7px !important; }
/* Title even tighter */
.promo__title { font-size: clamp(22px, 6.6vw, 30px); }
.promo__title-row { gap: 8px; }
.promo__avatar { width: 36px; height: 36px; }
/* Ultra-narrow: raise the two overflowing badges a touch more */
.evsh__slide--h .evsh__audit.evsh__card--tl,
.evsh__slide--h .evsh__stack.evsh__card--tl { top: 44px; }
}
/* On touch devices kill heavy 3D float animations to save battery */
@media (hover: none) and (pointer: coarse) and (max-width: 780px) {
.evsh__card--tl, .evsh__card--br,
.evsh__photo, .evsh__3d {
animation: none !important;
}
.promo__star { animation: none !important; }
}
/* ════════════════════════════════════════════════════════════
SCROLL REVEAL — smooth, personality-per-section, no hide bugs.
• Only translate + opacity + scale (never clip-path/rotate 3D —
those can lock content invisible if observer misses).
• Premium easing throughout (1000-1200ms for dramatic entries,
600-800ms for minor accents).
• Bidirectional: distinct .is-leaving exit for each section.
════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }
/* Base fallback — every [data-reveal] becomes visible with gentle lift */
[data-reveal] {
opacity: 0;
transform: translateY(36px);
transition:
opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform, opacity;
}
[data-reveal].is-inview {
opacity: 1;
transform: translateY(0);
}
[data-reveal].is-leaving {
opacity: 0;
transform: translateY(-32px);
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hero — always visible */
.promo__status[data-reveal],
.promo__title[data-reveal],
.promo__logos[data-reveal],
.promo__logo[data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
/* ─── MANIFESTO — quiet editorial lift ─── */
.manifesto__tag[data-reveal] { transform: translateY(20px); transition-duration: 800ms; }
.manifesto__text[data-reveal] { transform: translateY(44px); transition-duration: 1200ms; }
.principle[data-reveal] {
transform: translateY(40px) scale(0.96);
transition:
opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1100ms cubic-bezier(0.34, 1.4, 0.5, 1);
}
.principle.is-inview { transform: translateY(0) scale(1); }
.manifesto__text.is-leaving { transform: translateY(-28px) scale(0.97); }
.principle.is-leaving { transform: translateY(-32px) scale(0.95); }
/* ─── SERVICES — cards slide from left with spring ─── */
.services__head[data-reveal] { transform: translateY(36px); transition-duration: 1000ms; }
.svc-card[data-reveal] {
transform: translateX(-50px) translateY(20px) scale(0.96);
transition:
opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1100ms cubic-bezier(0.34, 1.4, 0.5, 1);
}
.svc-card.is-inview { transform: translate(0, 0) scale(1); }
.svc-card.is-leaving { transform: translate(-24px, -32px) scale(0.96); }
/* ─── CASES — cards grow with spring, alternating side drift ─── */
.cases__head[data-reveal] { transform: translateY(36px); transition-duration: 1000ms; }
.case[data-reveal] {
transform: translateY(60px) scale(0.94);
transition:
opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1100ms cubic-bezier(0.34, 1.5, 0.5, 1);
}
.case.is-inview { transform: translateY(0) scale(1); }
.case.is-leaving { transform: translateY(-40px) scale(1.03); }
/* Subtle alternating lateral drift for grid variety — desktop only */
@media (min-width: 901px) {
.case:nth-child(odd)[data-reveal] { transform: translate(-18px, 60px) scale(0.94); }
.case:nth-child(even)[data-reveal] { transform: translate(18px, 60px) scale(0.94); }
.case.is-inview { transform: translate(0, 0) scale(1); }
.case:nth-child(odd).is-leaving { transform: translate(-16px, -40px) scale(1.02); }
.case:nth-child(even).is-leaving { transform: translate(16px, -40px) scale(1.02); }
}
/* ─── AGENCY — side slides from left, cards from bottom with spring ─── */
.agency__side[data-reveal] {
transform: translateX(-32px);
transition-duration: 1100ms;
}
.agency__side.is-inview { transform: translateX(0); }
.agency__side.is-leaving { transform: translate(24px, -24px); }
.agency__card[data-reveal],
.agency__stat[data-reveal] {
transform: translateY(44px) scale(0.95);
transition:
opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1100ms cubic-bezier(0.34, 1.4, 0.5, 1);
}
.agency__card.is-inview,
.agency__stat.is-inview { transform: translateY(0) scale(1); }
.agency__card.is-leaving { transform: translateY(-36px) scale(1.04); }
/* ─── PROCESS — steps slide from right with stagger ─── */
.process__head[data-reveal] { transform: translateY(36px); transition-duration: 1000ms; }
.step[data-reveal] {
transform: translateX(40px) translateY(20px);
transition:
opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1000ms cubic-bezier(0.34, 1.4, 0.5, 1);
}
.step.is-inview { transform: translate(0, 0); }
.step.is-leaving { transform: translate(-24px, -28px) rotate(-1.2deg); }
/* ─── PARTNERS — alternating diagonal entrance ─── */
.partner[data-reveal] {
transform: translateY(28px) scale(0.96);
transition-duration: 900ms;
}
.partner.is-inview { transform: translateY(0) scale(1); }
.partner.is-leaving { transform: translateY(-24px) scale(0.97); }
.partner:nth-child(odd)[data-reveal] { transform: translate(-22px, 24px) scale(0.96); }
.partner:nth-child(even)[data-reveal] { transform: translate(22px, 24px) scale(0.96); }
.partner.is-inview { transform: translate(0, 0) scale(1); }
.partner:nth-child(odd).is-leaving { transform: translate(16px, -20px) scale(0.98); }
.partner:nth-child(even).is-leaving { transform: translate(-16px, -20px) scale(0.98); }
/* ─── METRICS — scale-spring pop ─── */
.metric[data-reveal] {
transform: scale(0.84);
transition:
opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1000ms cubic-bezier(0.34, 1.7, 0.5, 1);
}
.metric.is-inview { transform: scale(1); }
.metric.is-leaving { transform: scale(1.12) translateY(-16px); }
/* ─── CTA — title lifts, actions scale-pop, note fades ─── */
.cta__eyebrow[data-reveal] { transform: translateY(16px); transition-duration: 700ms; }
.cta__title[data-reveal] { transform: translateY(44px); transition-duration: 1200ms; }
.cta__bullet[data-reveal] {
transform: translateY(28px) scale(0.97);
transition-duration: 800ms;
}
.cta__bullet.is-inview { transform: translateY(0) scale(1); }
.cta__bullet.is-leaving { transform: translateY(-20px) scale(0.96); }
.cta__actions[data-reveal] {
transform: scale(0.88);
transition:
opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
transform 900ms cubic-bezier(0.34, 1.6, 0.5, 1);
}
.cta__actions.is-inview { transform: scale(1); }
.cta__actions.is-leaving { transform: translateY(-16px) scale(1.06); }
.cta__note[data-reveal] { transform: translateY(14px); transition-duration: 600ms; }
@media (prefers-reduced-motion: reduce) {
[data-reveal],
[data-reveal].is-inview,
[data-reveal].is-leaving {
transform: none !important;
opacity: 1 !important;
transition: none !important;
}
}
/* ════════════════════════════════════════════════════════════
POLISH — per-group cascade delays + deeper choreography
Apple-style: layered arrivals (opacity first, transform settles).
════════════════════════════════════════════════════════════ */
/* Services grid — cards cascade with 140ms between each */
.services__grid > .svc-card:nth-child(1)[data-reveal] { transition-delay: 0ms; }
.services__grid > .svc-card:nth-child(2)[data-reveal] { transition-delay: 140ms; }
.services__grid > .svc-card:nth-child(3)[data-reveal] { transition-delay: 280ms; }
/* Cases grid — 160ms cascade, deeper spring */
.cases__grid > .case:nth-child(1)[data-reveal] { transition-delay: 0ms; }
.cases__grid > .case:nth-child(2)[data-reveal] { transition-delay: 160ms; }
.cases__grid > .case:nth-child(3)[data-reveal] { transition-delay: 320ms; }
.cases__grid > .case:nth-child(4)[data-reveal] { transition-delay: 480ms; }
/* Process steps — 220ms slow sequential countdown feel */
.process__steps > .step:nth-child(1)[data-reveal] { transition-delay: 0ms; }
.process__steps > .step:nth-child(2)[data-reveal] { transition-delay: 220ms; }
.process__steps > .step:nth-child(3)[data-reveal] { transition-delay: 440ms; }
/* Agency cards — 120ms tight cascade */
.agency__grid > .agency__card:nth-child(1)[data-reveal] { transition-delay: 0ms; }
.agency__grid > .agency__card:nth-child(2)[data-reveal] { transition-delay: 120ms; }
.agency__grid > .agency__card:nth-child(3)[data-reveal] { transition-delay: 240ms; }
.agency__grid > .agency__card:nth-child(4)[data-reveal] { transition-delay: 360ms; }
/* Partners row — 100ms quick snap */
.partners__row > .partner:nth-child(1)[data-reveal] { transition-delay: 0ms; }
.partners__row > .partner:nth-child(2)[data-reveal] { transition-delay: 100ms; }
.partners__row > .partner:nth-child(3)[data-reveal] { transition-delay: 200ms; }
.partners__row > .partner:nth-child(4)[data-reveal] { transition-delay: 300ms; }
/* Metrics — 140ms between numbers (sense of build-up) */
.metrics__grid > .metric:nth-child(1)[data-reveal] { transition-delay: 0ms; }
.metrics__grid > .metric:nth-child(2)[data-reveal] { transition-delay: 140ms; }
.metrics__grid > .metric:nth-child(3)[data-reveal] { transition-delay: 280ms; }
.metrics__grid > .metric:nth-child(4)[data-reveal] { transition-delay: 420ms; }
/* Principles cascade within manifesto */
.manifesto__principles > .principle:nth-child(1)[data-reveal] { transition-delay: 0ms; }
.manifesto__principles > .principle:nth-child(2)[data-reveal] { transition-delay: 180ms; }
.manifesto__principles > .principle:nth-child(3)[data-reveal] { transition-delay: 360ms; }
/* CTA bullets — slow cascade for gravitas */
.cta__bullets > .cta__bullet:nth-child(1)[data-reveal] { transition-delay: 0ms; }
.cta__bullets > .cta__bullet:nth-child(2)[data-reveal] { transition-delay: 180ms; }
.cta__bullets > .cta__bullet:nth-child(3)[data-reveal] { transition-delay: 360ms; }
/* ─── Manifesto text — individual lines stagger in ─── */
.manifesto__text span {
display: block;
opacity: 0;
transform: translateY(28px);
transition:
opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform, opacity;
}
.manifesto__text.is-inview span:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
.manifesto__text.is-inview span:nth-child(2) { opacity: 1; transform: none; transition-delay: 200ms; }
.manifesto__text.is-inview span:nth-child(3) { opacity: 1; transform: none; transition-delay: 400ms; }
.manifesto__text.is-leaving span {
opacity: 0;
transform: translateY(-24px);
transition-duration: 700ms;
}
.manifesto__text.is-leaving span:nth-child(1) { transition-delay: 0ms; }
.manifesto__text.is-leaving span:nth-child(2) { transition-delay: 80ms; }
.manifesto__text.is-leaving span:nth-child(3) { transition-delay: 160ms; }
/* ─── Exit cascade — reverse direction so it feels like content leaves
in the opposite flow from entry ─── */
.services__grid > .svc-card:nth-child(1).is-leaving { transition-delay: 120ms; }
.services__grid > .svc-card:nth-child(2).is-leaving { transition-delay: 60ms; }
.services__grid > .svc-card:nth-child(3).is-leaving { transition-delay: 0ms; }
.cases__grid > .case:nth-child(1).is-leaving { transition-delay: 180ms; }
.cases__grid > .case:nth-child(2).is-leaving { transition-delay: 120ms; }
.cases__grid > .case:nth-child(3).is-leaving { transition-delay: 60ms; }
.cases__grid > .case:nth-child(4).is-leaving { transition-delay: 0ms; }
.process__steps > .step:nth-child(1).is-leaving { transition-delay: 240ms; }
.process__steps > .step:nth-child(2).is-leaving { transition-delay: 120ms; }
.process__steps > .step:nth-child(3).is-leaving { transition-delay: 0ms; }
/* Step number gets its own "bounce" — it scales in after container */
.step .step__num {
transform: scale(0.7);
transition: transform 700ms cubic-bezier(0.34, 1.6, 0.5, 1) 250ms;
}
.step.is-inview .step__num { transform: scale(1); }
.step.is-leaving .step__num {
transform: scale(0.9);
transition-delay: 0ms;
}
/* Service card title subtle lift on reveal */
.svc-card .svc-card__title {
transform: translateY(8px);
opacity: 0.4;
transition:
opacity 800ms cubic-bezier(0.22, 1, 0.36, 1) 200ms,
transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}
.svc-card.is-inview .svc-card__title {
opacity: 1;
transform: none;
}
/* Case stats numbers get extra emphasis */
.case .case__stats strong {
opacity: 0.5;
transform: translateY(6px);
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) 350ms,
transform 800ms cubic-bezier(0.34, 1.5, 0.5, 1) 350ms;
}
.case.is-inview .case__stats strong {
opacity: 1;
transform: none;
}
/* Metric big numbers get delayed counter-pop */
.metric strong {
transform: scale(0.85);
opacity: 0.4;
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) 250ms,
transform 800ms cubic-bezier(0.34, 1.7, 0.5, 1) 250ms;
}
.metric.is-inview strong { transform: scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.manifesto__text span,
.step .step__num,
.svc-card .svc-card__title,
.case .case__stats strong,
.metric strong {
transform: none !important;
opacity: 1 !important;
transition: none !important;
}
}
/* ════════════════════════════════════════════════════════════
CONTACT — map + lead form, editorial, no empty space
════════════════════════════════════════════════════════════ */
.contact {
max-width: var(--container);
margin: 0 auto;
padding: 108px var(--pad-x) 132px;
}
.contact__inner { display: flex; flex-direction: column; gap: 44px; }
/* ─── Header ─── */
.contact__head {
display: flex; flex-direction: column;
gap: 18px;
max-width: 860px;
}
.contact__eyebrow {
display: inline-flex; align-items: center;
gap: 8px;
padding: 6px 12px 6px 10px;
align-self: flex-start;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink);
letter-spacing: 0.06em;
text-transform: lowercase;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-pill);
}
.contact__eyebrow-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--royal);
box-shadow: 0 0 0 3px rgba(0,91,255,0.14);
}
.contact__title {
font-size: clamp(30px, 4vw, 52px);
line-height: 1.04;
letter-spacing: -0.03em;
font-weight: 500;
margin: 0;
}
.contact__title em {
font-style: normal;
background: linear-gradient(95deg, var(--royal) 0%, var(--royal-deep) 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.contact__lead {
font-size: 15px;
line-height: 1.55;
color: var(--muted);
max-width: 640px;
margin: 0;
}
/* ─── Two-column grid ─── */
.contact__grid {
display: grid;
grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
gap: 16px;
align-items: stretch;
}
/* ─── Shared column base ─── */
.contact__col {
display: flex; flex-direction: column;
background: var(--card);
border: 1px solid var(--line-soft);
border-radius: var(--r-lg);
overflow: hidden;
position: relative;
}
/* ═══════ LEFT — Map + info ═══════ */
.contact__col--map { padding: 0; }
.contact__map {
position: relative;
flex: 1 1 auto;
min-height: 380px;
background: #e8e9ec;
overflow: hidden;
}
.contact__map iframe {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
filter: saturate(0.92) contrast(1.02);
}
/* Floating brand badge — top-left */
.contact__map-badge {
position: absolute;
left: 16px; top: 16px;
display: inline-flex; flex-direction: column;
gap: 2px;
padding: 10px 14px;
background: rgba(255,255,255,0.96);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid rgba(10,10,10,0.08);
border-radius: var(--r-md);
box-shadow: 0 12px 32px -14px rgba(10,10,10,0.22);
pointer-events: none;
z-index: 3;
}
.contact__map-badge-k {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.contact__map-badge strong {
font-weight: 500;
font-size: 14px;
letter-spacing: -0.015em;
color: var(--ink);
line-height: 1.1;
}
/* Info block under map */
.contact__info {
display: flex; flex-direction: column;
padding: 24px 26px 26px;
background: var(--card);
border-top: 1px solid var(--line);
}
.contact__info-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
padding-bottom: 20px;
flex-wrap: wrap;
}
.contact__info-body {
display: flex; flex-direction: column;
gap: 6px;
min-width: 0;
flex: 1 1 auto;
}
.contact__info-k {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.contact__info-v {
font-size: 19px;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--ink);
line-height: 1.25;
}
.contact__info-cta {
display: inline-flex; align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink);
padding: 10px 16px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-pill);
white-space: nowrap;
transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.contact__info-cta:hover {
background: var(--ink);
color: #fff;
border-color: var(--ink);
transform: translateY(-1px);
}
.contact__info-cta-arrow { transition: transform 220ms var(--ease); }
.contact__info-cta:hover .contact__info-cta-arrow { transform: translateX(3px); }
/* Facts strip — 3-up grid, mono labels */
.contact__facts {
list-style: none;
margin: 0;
padding: 16px 0 0;
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.contact__facts li {
display: flex; flex-direction: column;
gap: 4px;
font-family: var(--font-mono);
font-size: 12px;
}
.contact__fact-k {
color: var(--muted);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.contact__fact-v {
color: var(--ink);
font-weight: 500;
letter-spacing: -0.005em;
line-height: 1.3;
}
/* ═══════ RIGHT — Form ═══════ */
.contact__col--form {
padding: 28px 26px 26px;
}
.contact__form-head {
display: flex; flex-direction: column;
gap: 6px;
padding-bottom: 22px;
margin-bottom: 22px;
border-bottom: 1px solid var(--line);
}
.contact__form-title {
font-size: 22px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.2;
margin: 0;
}
.contact__form-sub {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: -0.005em;
margin: 0;
}
.contact__form-body {
display: flex; flex-direction: column;
gap: 14px;
}
.contact__field {
display: flex; flex-direction: column;
gap: 7px;
}
.contact__field-label {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.contact__input {
font-family: var(--font-sans);
font-size: 14.5px;
color: var(--ink);
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: 13px 14px;
outline: none;
transition: border-color 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease);
}
.contact__input::placeholder { color: var(--mute-2); }
.contact__input:hover { border-color: var(--mute-2); }
.contact__input:focus {
border-color: var(--royal);
background: #fff;
box-shadow: 0 0 0 4px rgba(0,91,255,0.08);
}
.contact__input--ta {
resize: vertical;
min-height: 92px;
font-family: inherit;
line-height: 1.5;
}
.contact__submit {
display: inline-flex; align-items: center; justify-content: space-between;
padding: 15px 20px;
background: var(--ink);
color: #fff;
border-radius: var(--r-sm);
font-family: var(--font-mono);
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0.02em;
cursor: pointer;
margin-top: 18px;
transition: background 220ms var(--ease), transform 200ms var(--ease), box-shadow 220ms var(--ease);
border: 0;
width: 100%;
box-shadow: 0 8px 24px -10px rgba(10,10,10,0.35);
}
.contact__submit:hover {
background: var(--royal);
transform: translateY(-1px);
box-shadow: 0 14px 28px -10px rgba(0,91,255,0.45);
}
.contact__submit-arrow { transition: transform 220ms var(--ease); }
.contact__submit:hover .contact__submit-arrow { transform: translateX(4px); }
.contact__form-note {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--muted);
line-height: 1.55;
margin: 12px 0 0;
}
.contact__form-note a {
color: var(--ink);
border-bottom: 1px dashed var(--mute-2);
transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.contact__form-note a:hover {
color: var(--royal);
border-bottom-color: var(--royal);
}
.contact__alt {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 20px;
margin-top: auto;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.contact__alt-sep { display: none; }
.contact__alt-link {
display: inline-flex; flex-direction: column;
gap: 3px;
min-width: 0;
color: var(--ink);
transition: color 200ms var(--ease);
}
.contact__alt-link:hover { color: var(--royal); }
.contact__alt-k {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.contact__alt-v {
font-family: var(--font-mono);
font-size: 12.5px;
color: inherit;
border-bottom: 1px dashed var(--mute-2);
padding-bottom: 1px;
transition: border-color 200ms var(--ease);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.contact__alt-link:hover .contact__alt-v { border-bottom-color: var(--royal); }
/* ─── Adaptive ─── */
@media (max-width: 1024px) {
.contact__grid { grid-template-columns: 1fr; }
.contact__map { min-height: 360px; }
}
@media (max-width: 780px) {
.contact { padding: 84px var(--pad-x) 96px; }
.contact__inner { gap: 36px; }
}
@media (max-width: 640px) {
.contact { padding: 72px var(--pad-x) 88px; }
.contact__inner { gap: 32px; }
.contact__map { min-height: 300px; }
.contact__info { padding: 20px; }
.contact__info-row {
flex-direction: column;
align-items: stretch;
gap: 14px;
padding-bottom: 16px;
}
.contact__info-cta { justify-content: center; }
.contact__info-v { font-size: 17px; }
.contact__facts { grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 14px; }
.contact__col--form { padding: 22px 18px 20px; }
.contact__form-head { gap: 6px; margin-bottom: 16px; }
.contact__form-title { font-size: 22px; }
.contact__form-sub { font-size: 13px; }
.contact__form-body { gap: 12px; }
.contact__field-label { font-size: 10.5px; }
.contact__input { font-size: 14px; padding: 12px 14px; }
.contact__input--ta { min-height: 72px; }
.contact__submit { padding: 14px 16px; font-size: 13px; margin-top: 14px; }
.contact__form-note { font-size: 11px; margin-top: 10px; line-height: 1.5; }
/* Alt contact links — tidy 2-col grid with subtle dividers, no wrap chaos */
.contact__alt {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 16px;
padding-top: 16px;
margin-top: 16px;
border-top: 1px solid var(--line);
}
.contact__alt-sep { display: none; }
.contact__alt-link { gap: 4px; min-width: 0; }
.contact__alt-k { font-size: 9.5px; letter-spacing: 0.12em; }
.contact__alt-v { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact__map-badge { padding: 8px 12px; left: 12px; top: 12px; }
}
/* ============================================================
Lead form sheet — minimalist modal to capture leads.
Single column, neutral palette, no branding or marketing copy.
============================================================ */
.lead-sheet {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 340ms cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 340ms;
}
.lead-sheet[data-open] {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition:
opacity 340ms cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0s;
}
.lead-sheet__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 10, 12, 0);
backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
cursor: pointer;
transition:
background 340ms cubic-bezier(0.22, 1, 0.36, 1),
backdrop-filter 340ms cubic-bezier(0.22, 1, 0.36, 1),
-webkit-backdrop-filter 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lead-sheet[data-open] .lead-sheet__backdrop {
background: rgba(10, 10, 12, 0.38);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.lead-sheet__dialog {
position: relative;
z-index: 1;
width: min(500px, 100%);
max-height: min(calc(100dvh - 48px), 780px);
display: flex;
flex-direction: column;
background: #FFFFFF;
border: 1px solid var(--line);
border-radius: 20px;
box-shadow:
0 30px 60px -24px rgba(10, 20, 60, 0.28),
0 10px 20px -10px rgba(10, 20, 60, 0.12);
transform: translateY(20px) scale(0.95);
opacity: 0;
transition:
transform 420ms cubic-bezier(0.34, 1.25, 0.5, 1),
opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
overflow: hidden;
}
.lead-sheet[data-open] .lead-sheet__dialog {
transform: translateY(0) scale(1);
opacity: 1;
transition:
transform 460ms cubic-bezier(0.34, 1.3, 0.4, 1) 60ms,
opacity 320ms cubic-bezier(0.22, 1, 0.36, 1) 60ms;
}
.lead-sheet__close {
position: absolute;
top: 14px;
right: 14px;
z-index: 3;
width: 30px;
height: 30px;
border-radius: 50%;
background: transparent;
border: none;
color: var(--muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: background 180ms var(--ease), color 180ms var(--ease), transform 240ms var(--ease);
}
.lead-sheet__close:hover {
background: var(--line-soft);
color: var(--ink);
transform: rotate(90deg);
}
.lead-sheet__form {
padding: 26px 26px 22px;
display: flex;
flex-direction: column;
gap: 14px;
overflow-y: auto;
overscroll-behavior: contain;
flex: 1 1 auto;
min-height: 0;
}
.lead-sheet__head {
display: flex;
flex-direction: column;
gap: 4px;
padding-right: 32px;
}
.lead-sheet__title {
margin: 0;
font-size: 22px;
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.2;
color: var(--ink);
}
.lead-sheet__title [data-lead-topic] {
font-weight: 600;
color: var(--ink);
}
.lead-sheet__sub {
margin: 0;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--muted);
letter-spacing: -0.005em;
}
.lead-sheet__fields {
display: flex;
flex-direction: column;
gap: 14px;
}
.lead-sheet__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.lead-sheet__label {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.lead-sheet__input {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 10px;
background: #FFFFFF;
font-family: var(--font-sans);
font-size: 14px;
color: var(--ink);
outline: none;
transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.lead-sheet__input::placeholder { color: var(--mute-2); }
.lead-sheet__input:hover { border-color: var(--mute-2); }
.lead-sheet__input:focus {
border-color: var(--ink);
box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
}
.lead-sheet__input--ta {
resize: vertical;
min-height: 72px;
line-height: 1.45;
font-family: var(--font-sans);
}
.lead-sheet__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.lead-sheet__chip {
position: relative;
cursor: pointer;
}
.lead-sheet__chip input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.lead-sheet__chip span {
display: inline-flex;
padding: 7px 12px;
border-radius: 999px;
background: #FFFFFF;
border: 1px solid var(--line);
font-size: 12.5px;
letter-spacing: -0.005em;
color: var(--ink-soft);
transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}
.lead-sheet__chip:hover span { border-color: var(--ink-soft); }
.lead-sheet__chip input:checked + span {
background: var(--ink);
border-color: var(--ink);
color: #FFFFFF;
}
.lead-sheet__chip input:focus-visible + span {
box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.1);
}
.lead-sheet__footer {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 4px;
}
.lead-sheet__submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 20px;
border: none;
border-radius: 10px;
background: var(--ink);
color: #FFFFFF;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.01em;
cursor: pointer;
transition: background 200ms var(--ease), transform 180ms var(--ease);
}
.lead-sheet__submit:hover { background: #1F1F1F; transform: translateY(-1px); }
.lead-sheet__submit:active { transform: translateY(0); }
.lead-sheet__note {
margin: 0;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--muted);
line-height: 1.5;
}
.lead-sheet__note a {
color: var(--ink);
border-bottom: 1px dashed var(--mute-2);
transition: border-color 180ms var(--ease);
}
.lead-sheet__note a:hover { border-bottom-color: var(--ink); }
.lead-sheet__success {
display: none;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-radius: 12px;
background: var(--bg-alt);
border: 1px solid var(--line);
}
.lead-sheet__success:not([hidden]) { display: flex; }
.lead-sheet__success-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.lead-sheet__success strong {
font-size: 14px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.01em;
}
.lead-sheet__success span {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--muted);
}
/* Body scroll lock when modal is open */
body[data-lead-open] { overflow: hidden; }
/* Mobile — bottom sheet style */
@media (max-width: 640px) {
.lead-sheet { padding: 12px; align-items: flex-end; }
.lead-sheet__dialog {
border-radius: 18px;
max-height: 92dvh;
}
.lead-sheet__form { padding: 24px 20px 20px; gap: 14px; }
.lead-sheet__title { font-size: 20px; }
}
/* ════════════════════════════════════════════════════════════
TOUCH DEFAULTS — always-on states for elements that rely on
:hover to show their theme/accent (no mouse on phones)
════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
/* Services 3-card block — theme colour tint stays visible permanently */
.svc-card::before { opacity: 0.7; }
.svc-card:hover::before { opacity: 0.7; }
/* List-chips also stay lightly tinted by theme on touch */
.svc-card__list li {
border-color: color-mix(in srgb, var(--theme) 24%, var(--line));
}
}
/* ════════════════════════════════════════════════════════════
AUTO-PEEK — mirror key :hover effects for touch devices
JS adds .is-peek to cards when they scroll into view, so the
reveal animations play once even without a mouse.
════════════════════════════════════════════════════════════ */
/* --- generic cards: lift --- */
.case.is-peek { transform: translateY(-4px); }
.svc-card.is-peek { transform: translateY(-4px); }
.svc-card.is-peek::before { opacity: 1; }
.dev-card.is-peek { transform: translateY(-3px); }
.dev-card.is-peek::before { width: 40%; }
.dev-card.is-peek .dev-card__tag { color: var(--ink); }
.dev-card.is-peek .dev-card__tag i {
box-shadow: 0 0 0 4px rgba(0,91,255,0.14);
}
.dev__svc.is-peek {
background: #fff;
border-color: color-mix(in srgb, var(--royal) 24%, var(--line));
}
.dev__svc.is-peek::after { transform: scaleX(1); }
/* --- partners: year colour + name underline grows --- */
.partner.is-peek { transform: translateY(-3px); }
.partner.is-peek .partner__year { color: var(--royal-deep); }
.partner.is-peek .partner__name::after {
width: 42px;
background: var(--ink);
opacity: 1;
}
/* --- principles: amber rule + title shift --- */
.principle.is-peek::before { width: 42%; }
.principle.is-peek .principle__title { transform: translateX(6px); }
.principle.is-peek .principle__meta { color: var(--ink); }
/* --- VNSK: models lift + wordmark letters offset --- */
.case--vnsk.is-peek .vnsk-model--left,
.case--vnsk.is-peek .vnsk-model--right { transform: translateY(-4px) scale(1.015); }
.case--vnsk.is-peek .vnsk-wordmark span:nth-child(1) { transform: translateY(-3px); }
.case--vnsk.is-peek .vnsk-wordmark span:nth-child(2) { transform: translateY( 3px); }
.case--vnsk.is-peek .vnsk-wordmark span:nth-child(3) { transform: translateY(-3px); }
.case--vnsk.is-peek .vnsk-wordmark span:nth-child(4) { transform: translateY( 3px); }
/* --- Biologique: reduce blur to reveal product --- */
.case--br.is-peek .br-bg {
transform: scale(1.09);
filter: blur(2px) saturate(1.14) brightness(1.06);
opacity: 0.95;
}
.case--br.is-peek .br-bg-tint { opacity: 0.55; }
.case--br.is-peek .br-label-bg {
filter: blur(1px) saturate(1.14) brightness(1.08);
opacity: 0.72;
}
.case--br.is-peek .brand-card--br {
transform: translateY(-6px) rotate(-0.4deg) scale(1.012);
}
.case--br.is-peek .br-label__serif-it { transform: translateY(-1.5px); }
.case--br.is-peek .br-label__serif-rg { transform: translateY(1.5px); }
.case--br.is-peek .br-star { transform: translateY(-1px) rotate(72deg) scale(1.18); }
.case--br.is-peek .br-label__star { transform: rotate(-72deg) scale(1.22); }
/* --- agency cards: lift + stat micro-slide --- */
.agency__card.is-peek { transform: translateY(-4px); }
.agency__stat.is-peek { padding-left: 6px; }
.agency__stat.is-peek .agency__stat-unit { color: var(--royal); }
/* --- metrics: soft scale pop --- */
.metric.is-peek { transform: scale(1.03); }
/* --- process steps: subtle lift --- */
.step.is-peek { transform: translateY(-3px); }
/* --- hero marketplace logos: playful 1-shot lift + scale
(Above-fold — peek fires soon after intro settles) --- */
.promo__logo.is-peek img { transform: scale(1.20); }
.promo__logo.is-peek { transform: translateY(-4px); }
/* Ensure all transitioned properties fire cleanly during peek */
.is-peek {
transition-duration: 620ms;
}
/* ════════════════════════════════════════════════════════════
CONSENT — checkbox + disabled submit + cookie banner (ФЗ-152)
════════════════════════════════════════════════════════════ */
/* Shared consent checkbox (lead + contact forms) */
.lead-sheet__consent,
.contact__consent {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 0 12px;
cursor: pointer;
user-select: none;
}
.lead-sheet__consent input[type="checkbox"],
.contact__consent input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 18px; height: 18px;
margin: 0;
cursor: pointer;
}
.lead-sheet__consent-box,
.contact__consent-box {
flex: none;
width: 18px; height: 18px;
border: 1.5px solid var(--line);
border-radius: 4px;
background: #fff;
display: grid; place-items: center;
color: transparent;
transition: border-color 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease);
margin-top: 1px;
}
.lead-sheet__consent-box svg,
.contact__consent-box svg { width: 12px; height: 10px; display: block; }
.lead-sheet__consent:hover .lead-sheet__consent-box,
.contact__consent:hover .contact__consent-box {
border-color: var(--ink);
}
.lead-sheet__consent input:checked + .lead-sheet__consent-box,
.contact__consent input:checked + .contact__consent-box {
background: var(--ink);
border-color: var(--ink);
color: #fff;
}
.lead-sheet__consent input:focus-visible + .lead-sheet__consent-box,
.contact__consent input:focus-visible + .contact__consent-box {
outline: 2px solid var(--royal);
outline-offset: 2px;
}
.lead-sheet__consent-text,
.contact__consent-text {
font-size: 11.5px;
line-height: 1.5;
color: var(--muted);
letter-spacing: -0.002em;
}
.lead-sheet__consent-text a,
.contact__consent-text a {
color: var(--ink);
border-bottom: 1px dashed var(--mute-2);
padding-bottom: 1px;
transition: border-color 180ms var(--ease);
}
.lead-sheet__consent-text a:hover,
.contact__consent-text a:hover { border-bottom-color: var(--ink); }
/* Disabled submit state */
.lead-sheet__submit:disabled,
.contact__submit:disabled {
opacity: 0.42;
cursor: not-allowed;
transform: none !important;
box-shadow: none;
}
.lead-sheet__submit:disabled:hover,
.contact__submit:disabled:hover {
background: var(--ink);
transform: none;
}
/* Cookie consent banner */
.cookie {
position: fixed;
left: 16px; right: 16px; bottom: 16px;
z-index: 90;
display: flex; justify-content: center;
pointer-events: none;
opacity: 0;
transform: translateY(16px);
transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.cookie[data-show] {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.cookie__inner {
display: flex;
align-items: center;
gap: 16px;
max-width: 640px;
padding: 12px 12px 12px 18px;
background: rgba(10, 10, 10, 0.94);
-webkit-backdrop-filter: saturate(1.4) blur(12px);
backdrop-filter: saturate(1.4) blur(12px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--r-pill);
box-shadow: 0 22px 48px -16px rgba(10,10,10,0.45);
color: #fff;
}
.cookie__text {
margin: 0;
flex: 1;
font-family: var(--font-mono);
font-size: 11.5px;
line-height: 1.5;
color: rgba(255,255,255,0.82);
letter-spacing: -0.002em;
}
.cookie__text a {
color: #fff;
border-bottom: 1px dashed rgba(255,255,255,0.4);
transition: border-color 180ms var(--ease);
}
.cookie__text a:hover { border-bottom-color: #fff; }
.cookie__btn {
flex: none;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
color: var(--ink);
background: #fff;
padding: 10px 18px;
border-radius: var(--r-pill);
cursor: pointer;
transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.cookie__btn:hover {
background: var(--amber);
transform: translateY(-1px);
}
@media (max-width: 640px) {
.cookie { left: 12px; right: 12px; bottom: 12px; }
.cookie__inner {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 12px 14px;
border-radius: var(--r-md);
}
.cookie__btn { width: 100%; padding: 12px; }
}
/* Honeypot field — invisible to humans, bots will try to fill it */
.hp {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* ════════════════════════════════════════════════════════════
APPLE-CLASS SCROLL CHOREOGRAPHY (phase II)
Per-section enter + leave animations for every block
the user reads on the way down AND on the way back up.
All compositor-only (transform + opacity), premium easing.
════════════════════════════════════════════════════════════ */
/* ─── TRUST — photo rises with gentle zoom, quote drifts in,
title stagger, CTA pops ─── */
.trust__photo[data-reveal] {
transform: translateY(64px) scale(0.94);
transition:
opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.trust__photo.is-inview { transform: translateY(0) scale(1); }
.trust__photo.is-leaving { transform: translateY(-32px) scale(1.02); }
.trust__quote[data-reveal] {
transform: translate(18px, 24px) scale(0.92);
transition:
opacity 820ms cubic-bezier(0.22, 1, 0.36, 1),
transform 960ms cubic-bezier(0.34, 1.4, 0.5, 1);
transition-delay: 220ms;
}
.trust__quote.is-inview { transform: translate(0, 0) scale(1); }
.trust__quote.is-leaving { transform: translate(16px, -18px) scale(0.96); transition-delay: 0ms; }
.trust__title[data-reveal] {
transform: translateY(44px);
transition-duration: 960ms;
transition-delay: 140ms;
}
.trust__title.is-inview { transform: translateY(0); }
.trust__title.is-leaving { transform: translateY(-26px) scale(0.98); transition-delay: 0ms; }
.trust__cta[data-reveal] {
transform: translateY(28px) scale(0.88);
transition:
opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
transform 820ms cubic-bezier(0.34, 1.6, 0.5, 1);
transition-delay: 280ms;
}
.trust__cta.is-inview { transform: translateY(0) scale(1); }
.trust__cta.is-leaving { transform: translateY(-14px) scale(1.04); transition-delay: 0ms; }
/* ─── AGENCY extras — label/title/text/cta lift sequentially ─── */
.agency__label[data-reveal] { transform: translateY(16px); transition-duration: 680ms; }
.agency__label.is-inview { transform: translateY(0); }
.agency__label.is-leaving { transform: translateY(-12px); }
.agency__title[data-reveal] {
transform: translateY(48px);
transition-duration: 1020ms;
transition-delay: 100ms;
}
.agency__title.is-inview { transform: translateY(0); }
.agency__title.is-leaving { transform: translateY(-30px) scale(0.98); transition-delay: 0ms; }
.agency__text[data-reveal] {
transform: translateY(26px);
transition-duration: 820ms;
}
.agency__text.is-inview { transform: translateY(0); }
.agency__text.is-leaving { transform: translateY(-18px); }
.agency__text:nth-of-type(1)[data-reveal] { transition-delay: 220ms; }
.agency__text:nth-of-type(2)[data-reveal] { transition-delay: 320ms; }
.agency__text.is-leaving { transition-delay: 0ms !important; }
.agency__cta[data-reveal] {
transform: translateY(20px);
transition-duration: 720ms;
transition-delay: 400ms;
}
.agency__cta.is-inview { transform: translateY(0); }
.agency__cta.is-leaving { transform: translateY(-14px); transition-delay: 0ms; }
/* Agency stats — editorial rows slide in one by one with tight cascade */
.agency__stat[data-reveal] {
transform: translateY(32px);
transition:
opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.agency__stat.is-inview { transform: translateY(0); }
.agency__stat.is-leaving { transform: translateY(-22px); }
.agency__stats > .agency__stat:nth-child(1)[data-reveal] { transition-delay: 0ms; }
.agency__stats > .agency__stat:nth-child(2)[data-reveal] { transition-delay: 110ms; }
.agency__stats > .agency__stat:nth-child(3)[data-reveal] { transition-delay: 220ms; }
.agency__stats > .agency__stat:nth-child(4)[data-reveal] { transition-delay: 330ms; }
.agency__stats > .agency__stat:nth-child(5)[data-reveal] { transition-delay: 440ms; }
/* Exit mirrors entry — reverse so the list "unravels" upward */
.agency__stats > .agency__stat:nth-child(5).is-leaving { transition-delay: 0ms; }
.agency__stats > .agency__stat:nth-child(4).is-leaving { transition-delay: 60ms; }
.agency__stats > .agency__stat:nth-child(3).is-leaving { transition-delay: 120ms; }
.agency__stats > .agency__stat:nth-child(2).is-leaving { transition-delay: 180ms; }
.agency__stats > .agency__stat:nth-child(1).is-leaving { transition-delay: 240ms; }
/* ─── CONTACT — info + map glide in from opposing sides ─── */
.contact__title[data-reveal] {
transform: translateY(44px);
transition-duration: 980ms;
}
.contact__title.is-inview { transform: translateY(0); }
.contact__title.is-leaving { transform: translateY(-26px) scale(0.98); }
.contact__info[data-reveal] {
transform: translateX(-36px) translateY(20px);
transition-duration: 960ms;
transition-delay: 120ms;
}
.contact__info.is-inview { transform: translate(0, 0); }
.contact__info.is-leaving { transform: translate(-24px, -20px); transition-delay: 0ms; }
.contact__map[data-reveal] {
transform: translateX(36px) translateY(20px) scale(0.96);
transition-duration: 1040ms;
transition-delay: 200ms;
}
.contact__map.is-inview { transform: translate(0, 0) scale(1); }
.contact__map.is-leaving { transform: translate(24px, -20px) scale(0.98); transition-delay: 0ms; }
/* ─── FOOTER — columns fade up with short cascade ─── */
.footer__col[data-reveal] {
transform: translateY(28px);
transition-duration: 820ms;
}
.footer__col.is-inview { transform: translateY(0); }
.footer__col.is-leaving { transform: translateY(-16px); }
.footer__inner > .footer__col:nth-child(1)[data-reveal] { transition-delay: 0ms; }
.footer__inner > .footer__col:nth-child(2)[data-reveal] { transition-delay: 90ms; }
.footer__inner > .footer__col:nth-child(3)[data-reveal] { transition-delay: 180ms; }
.footer__inner > .footer__col:nth-child(4)[data-reveal] { transition-delay: 270ms; }
.footer__inner > .footer__col.is-leaving { transition-delay: 0ms !important; }
/* ─── HERO evsh — subtle parallax via scroll-driven animation.
Progressive enhancement: browsers without scroll-timeline fall
back to the static (non-parallax) layout. ─── */
@supports (animation-timeline: view()) {
.promo__main .evsh {
animation: evshParallax linear both;
animation-timeline: scroll(root);
animation-range: 0 1400px;
will-change: transform;
}
@keyframes evshParallax {
from { transform: translateY(0); }
to { transform: translateY(-56px); }
}
}
/* ─── STACK-COVER — trust slides up over pinned cases.
Subtle top-edge glow intensifies as trust rises over cases
(purely visual — no JS) ─── */
.stack-cover > .trust {
transition: box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.promo__main .evsh { animation: none !important; transform: none !important; }
}
/* ════════════════════════════════════════════════════════════
EV SHOWCASE — hover choreography
Hover on active slide → composition opens up, portrait zooms in,
floating elements drift apart, cards lift. Smooth & coordinated.
════════════════════════════════════════════════════════════ */
/* Base transitions — applied regardless of hover, so state changes are smooth */
.evsh__slide--h.is-active .evsh__portrait,
.evsh__slide--h.is-active .evsh__portrait img,
.evsh__slide--h.is-active .evsh__panel,
.evsh__slide--h.is-active .evsh__3d,
.evsh__slide--h.is-active .evsh__price-tag,
.evsh__slide--h.is-active .evsh__word,
.evsh__slide--h.is-active .evsh__card {
transition:
transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 420ms var(--ease),
filter 420ms var(--ease);
}
/* On hover (or .is-peek auto-trigger on touch) — KILL the idle float animations
so our hover transform wins cleanly (infinite animations own `transform`). */
.evsh__slide--h.is-active:hover .evsh__3d,
.evsh__slide--h.is-active.is-peek .evsh__3d,
.evsh__slide--h.is-active:hover .evsh__price-tag,
.evsh__slide--h.is-active.is-peek .evsh__price-tag,
.evsh__slide--h.is-active:hover .evsh__card--tl,
.evsh__slide--h.is-active.is-peek .evsh__card--tl,
.evsh__slide--h.is-active:hover .evsh__card--br,
.evsh__slide--h.is-active.is-peek .evsh__card--br {
animation: none !important;
}
/* Panel — gentle breathe */
.evsh__slide--h.is-active:hover .evsh__panel,
.evsh__slide--h.is-active.is-peek .evsh__panel {
transform: scale(1.018);
box-shadow:
0 34px 62px -24px color-mix(in srgb, var(--sh-c2) 35%, transparent),
0 12px 28px -10px color-mix(in srgb, var(--sh-c2) 18%, transparent);
}
/* Portrait — zoom the photo INSIDE the circle (parent stays put) */
.evsh__slide--h.is-active:hover .evsh__portrait img,
.evsh__slide--h.is-active.is-peek .evsh__portrait img {
transform: scale(1.08);
}
.evsh__slide--h.is-active:hover .evsh__portrait,
.evsh__slide--h.is-active.is-peek .evsh__portrait {
box-shadow:
0 22px 44px -16px rgba(10, 20, 60, 0.32),
0 6px 16px -4px rgba(10, 20, 60, 0.18),
inset 0 0 0 3px rgba(255, 255, 255, 0.82);
}
/* 3D product — floats up-right with a tilt */
.evsh__slide--h.is-active:hover .evsh__3d,
.evsh__slide--h.is-active.is-peek .evsh__3d {
transform: translate(6px, -8px) rotate(4deg) scale(1.07);
filter: drop-shadow(0 18px 30px rgba(10, 20, 60, 0.28));
}
/* Price tag — drops down-left (opposite of 3D, balanced composition) */
.evsh__slide--h.is-active:hover .evsh__price-tag,
.evsh__slide--h.is-active.is-peek .evsh__price-tag {
transform: translate(-6px, 6px) scale(1.02);
box-shadow:
0 18px 32px -14px rgba(10, 20, 60, 0.28),
0 6px 12px -4px rgba(10, 20, 60, 0.14);
}
/* Words — separate in opposite diagonals */
.evsh__slide--h.is-active:hover .evsh__word--top,
.evsh__slide--h.is-active.is-peek .evsh__word--top { transform: translate(8px, -5px); }
.evsh__slide--h.is-active:hover .evsh__word--bot,
.evsh__slide--h.is-active.is-peek .evsh__word--bot { transform: translate(-8px, 5px); }
/* Floating cards — spread outward with deeper shadow */
.evsh__slide--h.is-active:hover .evsh__card--tl,
.evsh__slide--h.is-active.is-peek .evsh__card--tl {
transform: translate(-8px, -4px);
box-shadow:
0 22px 44px -18px rgba(10, 20, 60, 0.30),
0 6px 14px -4px rgba(10, 20, 60, 0.14);
}
.evsh__slide--h.is-active:hover .evsh__card--br,
.evsh__slide--h.is-active.is-peek .evsh__card--br {
transform: translate(8px, 4px);
box-shadow:
0 22px 44px -18px rgba(10, 20, 60, 0.30),
0 6px 14px -4px rgba(10, 20, 60, 0.14);
}
/* Reduced-motion — static composition, no hover drift */
@media (prefers-reduced-motion: reduce) {
.evsh__slide--h.is-active:hover .evsh__panel,
.evsh__slide--h.is-active:hover .evsh__portrait img,
.evsh__slide--h.is-active:hover .evsh__3d,
.evsh__slide--h.is-active:hover .evsh__price-tag,
.evsh__slide--h.is-active:hover .evsh__word,
.evsh__slide--h.is-active:hover .evsh__card { transform: none !important; }
}
/* ============================================================
SERVICES PAGE (/services.html)
light, lowercase, typographic — kolibri-flavoured.
Prefix: .svc-* (shared with header/footer from main file)
============================================================ */
.page-services { background: var(--bg); }
/* shared eyebrow */
.svc-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.svc-eyebrow::before {
content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.55;
}
/* ---- HERO ---- */
.svc-hero {
padding: 88px var(--pad-x) 64px;
background: var(--bg);
}
.svc-hero__inner {
max-width: var(--container);
margin: 0 auto;
}
.svc-hero__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.06em;
padding: 7px 14px 7px 12px;
border: 1px solid var(--line);
border-radius: var(--r-pill);
background: var(--bg-alt);
}
.svc-hero__eyebrow-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--royal);
box-shadow: 0 0 0 4px var(--royal-soft);
}
.svc-hero__title {
margin-top: 28px;
font-weight: 500;
font-size: clamp(40px, 7vw, 96px);
line-height: 0.96;
letter-spacing: -0.035em;
color: var(--ink);
}
.svc-hero__line { display: block; }
.svc-hero__line--accent em {
font-style: normal;
background: linear-gradient(92deg, var(--royal) 0%, var(--royal-deep) 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.svc-hero__lead {
margin-top: 28px;
max-width: 640px;
font-size: clamp(15px, 1.3vw, 18px);
line-height: 1.55;
color: var(--ink-soft);
}
.svc-hero__chips {
margin-top: 36px;
display: flex; flex-wrap: wrap; gap: 10px;
}
.svc-chip {
display: inline-flex; align-items: center; gap: 12px;
padding: 12px 20px;
border-radius: var(--r-pill);
border: 1px solid var(--line);
background: var(--bg-alt);
font-family: var(--font-mono);
font-size: 13px;
color: var(--ink);
transition:
background 220ms var(--ease),
border-color 220ms var(--ease),
transform 220ms var(--ease),
box-shadow 240ms var(--ease);
}
.svc-chip:hover {
background: #fff;
border-color: rgba(10,10,10,0.18);
transform: translateY(-1px);
box-shadow: 0 8px 22px -10px rgba(10,10,10,0.12);
}
.svc-chip__dot {
width: 8px; height: 8px; border-radius: 50%;
background: currentColor; opacity: 0.85;
}
.svc-chip__num {
font-size: 11px;
color: var(--muted);
padding-left: 10px;
border-left: 1px solid var(--line);
}
.svc-chip--market { color: var(--theme-market); }
.svc-chip--creative { color: var(--theme-creative); }
.svc-chip--infra { color: var(--theme-infra); }
.svc-chip__label { color: var(--ink); }
.svc-hero__meta {
margin: 56px 0 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.svc-hero__meta > div {
padding: 22px 24px 22px 0;
display: flex; flex-direction: column; gap: 6px;
border-right: 1px solid var(--line);
}
.svc-hero__meta > div:last-child { border-right: 0; padding-right: 0; }
.svc-hero__meta > div + div { padding-left: 24px; }
.svc-hero__meta dt {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.svc-hero__meta dd {
margin: 0;
font-size: clamp(22px, 2.2vw, 30px);
letter-spacing: -0.02em;
color: var(--ink);
}
/* ---- PROCESS ---- */
.svc-process {
padding: 80px var(--pad-x);
background: var(--bg-alt);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.svc-process__inner {
max-width: var(--container);
margin: 0 auto;
}
.svc-section-head {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: 40px 80px;
align-items: end;
margin-bottom: 48px;
}
.svc-section-head__title {
grid-column: 1;
margin-top: 14px;
font-weight: 500;
font-size: clamp(30px, 4.6vw, 56px);
line-height: 1.02;
letter-spacing: -0.03em;
color: var(--ink);
}
.svc-section-head__lead {
grid-column: 2;
font-size: clamp(14px, 1.1vw, 16px);
line-height: 1.55;
color: var(--ink-soft);
max-width: 460px;
}
.svc-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.svc-step {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 28px 28px 32px;
display: flex; flex-direction: column; gap: 18px;
transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease), transform 240ms var(--ease);
}
.svc-step:hover {
border-color: rgba(10,10,10,0.16);
box-shadow: 0 12px 30px -16px rgba(10,10,10,0.18);
transform: translateY(-2px);
}
.svc-step__num {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
color: var(--royal);
padding: 4px 10px;
border: 1px solid var(--royal-soft);
border-radius: var(--r-pill);
align-self: flex-start;
background: var(--royal-soft);
}
.svc-step__title {
font-weight: 500;
font-size: clamp(20px, 2vw, 26px);
letter-spacing: -0.02em;
color: var(--ink);
}
.svc-step__body p {
margin-top: 10px;
font-size: 14.5px;
line-height: 1.55;
color: var(--ink-soft);
}
.svc-step__bullets {
margin-top: 16px;
display: flex; flex-direction: column; gap: 8px;
}
.svc-step__bullets li {
position: relative;
padding-left: 16px;
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--muted);
}
.svc-step__bullets li::before {
content: ""; position: absolute; left: 0; top: 9px;
width: 6px; height: 1px; background: var(--mute-2);
}
/* ---- SERVICES SECTION (single grid, 11 cards) ---- */
.svc-services {
padding: 96px var(--pad-x);
background: var(--bg);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.svc-services__inner {
max-width: var(--container);
margin: 0 auto;
}
/* per-card theme accents (set via [data-theme] on .svc-card) */
.svc-card { --cat-accent: var(--royal); --cat-accent-2: var(--royal-deep); --cat-accent-soft: var(--royal-soft); }
.svc-card[data-theme="ad"] { --cat-accent: #005BFF; --cat-accent-2: #0046CC; --cat-accent-soft: rgba(0,91,255,0.08); }
.svc-card[data-theme="creative"] { --cat-accent: #C28A00; --cat-accent-2: #FFBD17; --cat-accent-soft: rgba(255,189,23,0.14); }
.svc-card[data-theme="infra"] { --cat-accent: #0E9F6E; --cat-accent-2: #10B981; --cat-accent-soft: rgba(16,185,129,0.10); }
/* ---- CARD GRID ---- */
.svc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.svc-card {
position: relative;
display: flex; flex-direction: column;
padding: 28px 28px 32px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-lg);
scroll-margin-top: 100px;
transition:
border-color 260ms var(--ease),
box-shadow 280ms var(--ease),
transform 260ms var(--ease),
background 240ms var(--ease);
}
.svc-card:hover {
border-color: var(--cat-accent);
box-shadow: 0 18px 40px -22px rgba(10,10,10,0.22);
transform: translateY(-3px);
}
.svc-card:target {
border-color: var(--cat-accent);
box-shadow:
0 0 0 4px var(--cat-accent-soft),
0 18px 40px -22px rgba(10,10,10,0.18);
}
.svc-card--lg {
grid-column: span 2;
background:
radial-gradient(120% 90% at 100% 0%, var(--cat-accent-soft) 0%, transparent 60%),
var(--bg);
}
/* chips row at the bottom of cards (e.g. wildberries / ozon) */
.svc-card__chips {
margin-top: 18px;
display: flex; flex-wrap: wrap; gap: 6px;
}
.svc-card__chips li {
font-family: var(--font-mono);
font-size: 11px;
padding: 5px 10px;
border-radius: var(--r-pill);
background: var(--bg-alt);
border: 1px solid var(--line);
color: var(--ink-soft);
}
.svc-card__chips li.is-accent {
background: var(--cat-accent);
color: #fff;
border-color: var(--cat-accent);
}
.svc-card__head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
}
.svc-card__num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--muted);
}
.svc-card__tag {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cat-accent);
padding: 4px 9px;
border: 1px solid currentColor;
border-radius: var(--r-pill);
background: var(--cat-accent-soft);
}
.svc-card__title {
font-weight: 500;
font-size: clamp(24px, 2.4vw, 34px);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--ink);
}
.svc-card__lead {
margin-top: 12px;
font-size: 14.5px;
line-height: 1.55;
color: var(--ink-soft);
}
.svc-card__feats {
margin-top: 22px;
display: flex; flex-direction: column; gap: 8px;
padding-top: 18px;
border-top: 1px dashed var(--line);
}
.svc-card__feats li {
position: relative;
padding-left: 18px;
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--ink-soft);
}
.svc-card__feats li::before {
content: "";
position: absolute; left: 0; top: 7px;
width: 8px; height: 8px;
border-radius: 2px;
background: var(--cat-accent);
opacity: 0.7;
transform: rotate(45deg);
}
/* ---- CTA ---- */
.svc-cta {
padding: 96px var(--pad-x) 112px;
background: var(--bg-alt);
border-top: 1px solid var(--line);
}
.svc-cta__inner {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.2fr) auto;
gap: 48px 80px;
align-items: end;
}
.svc-cta__copy { display: flex; flex-direction: column; gap: 16px; }
.svc-cta__title {
font-weight: 500;
font-size: clamp(30px, 4.6vw, 56px);
line-height: 1.02;
letter-spacing: -0.03em;
color: var(--ink);
}
.svc-cta__title em {
font-style: normal;
background: linear-gradient(92deg, var(--royal) 0%, var(--royal-deep) 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.svc-cta__lead {
font-size: clamp(14px, 1.1vw, 16px);
line-height: 1.55;
color: var(--ink-soft);
max-width: 560px;
}
.svc-cta__actions {
display: flex; flex-direction: column; gap: 10px;
min-width: 240px;
}
.svc-cta__btn {
display: inline-flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 16px 22px;
border-radius: var(--r-pill);
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.02em;
border: 1px solid var(--line);
background: var(--bg);
color: var(--ink);
transition:
background 240ms var(--ease),
color 240ms var(--ease),
border-color 240ms var(--ease),
transform 220ms var(--ease),
box-shadow 260ms var(--ease);
}
.svc-cta__btn:hover { transform: translateY(-1px); }
.svc-cta__btn--primary {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.svc-cta__btn--primary:hover {
background: var(--royal);
border-color: var(--royal);
box-shadow: 0 14px 32px -12px rgba(0,91,255,0.45);
}
.svc-cta__btn--ghost:hover {
border-color: var(--ink);
background: var(--bg);
}
/* ---- responsive ---- */
@media (max-width: 1080px) {
.svc-grid { grid-template-columns: repeat(2, 1fr); }
.svc-card--lg { grid-column: span 2; }
.svc-steps { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
.svc-hero { padding: 60px var(--pad-x) 48px; }
.svc-hero__meta { grid-template-columns: repeat(2, 1fr); }
.svc-hero__meta > div { border-right: 0; padding-left: 0 !important; padding-right: 0; }
.svc-hero__meta > div:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 18px; }
.svc-hero__meta > div:nth-child(even) { padding-left: 18px !important; }
.svc-hero__meta > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.svc-process,
.svc-cat,
.svc-cta { padding-top: 64px; padding-bottom: 64px; }
.svc-section-head,
.svc-cat__head,
.svc-cta__inner {
grid-template-columns: 1fr;
gap: 18px;
}
.svc-grid { grid-template-columns: 1fr; }
.svc-card--lg { grid-column: span 1; }
.svc-cta__actions { min-width: 0; }
}
/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
.svc-chip, .svc-card, .svc-step, .svc-cta__btn { transition: none; }
.svc-chip:hover, .svc-card:hover, .svc-step:hover, .svc-cta__btn:hover { transform: none; }
}
/* ============================================================
SERVICES — MAGAZIN BANNER (.svc-magazin)
"ещё нет магазина?" — soft full-width accent
============================================================ */
.svc-magazin {
padding: 32px var(--pad-x);
background: var(--bg);
}
.svc-magazin__inner {
max-width: var(--container);
margin: 0 auto;
padding: 64px 56px;
background:
radial-gradient(80% 120% at 100% 0%, rgba(0,91,255,0.10) 0%, transparent 60%),
radial-gradient(70% 100% at 0% 100%, rgba(255,189,23,0.10) 0%, transparent 60%),
var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-xl);
display: grid;
grid-template-columns: minmax(0, 1.3fr) auto;
gap: 56px;
align-items: center;
}
.svc-magazin__copy { display: flex; flex-direction: column; gap: 16px; }
.svc-eyebrow--light { color: var(--royal); }
.svc-eyebrow--light::before { background: var(--royal); opacity: 0.65; }
.svc-magazin__title {
font-weight: 500;
font-size: clamp(40px, 6vw, 80px);
line-height: 0.96;
letter-spacing: -0.035em;
color: var(--ink);
}
.svc-magazin__title em {
font-style: normal;
background: linear-gradient(92deg, var(--royal) 0%, var(--royal-deep) 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.svc-magazin__lead {
font-size: clamp(14px, 1.1vw, 16px);
line-height: 1.55;
color: var(--ink-soft);
max-width: 540px;
}
.svc-magazin__actions {
margin-top: 8px;
display: flex; gap: 10px; flex-wrap: wrap;
}
.svc-magazin__btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
border-radius: var(--r-pill);
font-family: var(--font-mono);
font-size: 13px;
border: 1px solid var(--line);
background: var(--bg);
color: var(--ink);
transition: transform 220ms var(--ease), background 240ms var(--ease), border-color 240ms var(--ease), box-shadow 260ms var(--ease);
}
.svc-magazin__btn:hover { transform: translateY(-1px); }
.svc-magazin__btn--primary {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.svc-magazin__btn--primary:hover {
background: var(--royal);
border-color: var(--royal);
box-shadow: 0 14px 32px -12px rgba(0,91,255,0.45);
}
.svc-magazin__btn--ghost:hover { border-color: var(--ink); }
.svc-magazin__meta {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
min-width: 220px;
}
.svc-magazin__metric {
padding: 18px 22px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-md);
display: flex; flex-direction: column; gap: 4px;
}
.svc-magazin__metric-num {
font-size: clamp(28px, 3.2vw, 40px);
letter-spacing: -0.025em;
color: var(--ink);
}
.svc-magazin__metric-cap {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.06em;
}
/* ============================================================
SERVICES — STUDIO BLOCK (.svc-studio)
"фотосессии и инфографика для сильных карточек товара"
============================================================ */
.svc-studio {
padding: 96px var(--pad-x);
background: var(--bg-alt);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.svc-studio__inner {
max-width: var(--container);
margin: 0 auto;
display: flex; flex-direction: column; gap: 32px;
}
.svc-studio__rail {
display: flex; flex-wrap: wrap; gap: 16px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
padding-bottom: 4px;
border-bottom: 1px solid var(--line);
}
.svc-studio__rail-dot { color: var(--mute-2); }
.svc-studio__title {
font-weight: 500;
font-size: clamp(36px, 5.6vw, 76px);
line-height: 0.98;
letter-spacing: -0.035em;
color: var(--ink);
display: flex; flex-direction: column; gap: 14px;
}
.svc-studio__title-row {
display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
.svc-pill {
display: inline-flex; align-items: baseline;
padding: 4px 16px 6px;
border-radius: var(--r-pill);
font-style: normal;
letter-spacing: -0.02em;
line-height: 1;
}
.svc-pill--blue { background: rgba(0,91,255,0.10); color: var(--royal-deep); }
.svc-pill--amber { background: rgba(255,189,23,0.18); color: #8B5E00; }
.svc-pill--green { background: rgba(16,185,129,0.14); color: #0E7E5A; }
.svc-studio__lead {
max-width: 720px;
font-size: clamp(15px, 1.3vw, 18px);
line-height: 1.55;
color: var(--ink-soft);
}
.svc-studio__grid {
margin-top: 8px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.svc-studio__cell {
padding: 26px 24px 28px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-lg);
display: flex; flex-direction: column; gap: 10px;
transition: border-color 240ms var(--ease), box-shadow 260ms var(--ease), transform 240ms var(--ease);
}
.svc-studio__cell:hover {
border-color: rgba(10,10,10,0.18);
box-shadow: 0 14px 32px -18px rgba(10,10,10,0.18);
transform: translateY(-2px);
}
.svc-studio__cell-num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--muted);
}
.svc-studio__cell-title {
font-weight: 500;
font-size: 20px;
letter-spacing: -0.02em;
color: var(--ink);
}
.svc-studio__cell p {
font-size: 14px;
line-height: 1.55;
color: var(--ink-soft);
}
.svc-studio__cell--photo .svc-studio__cell-num { color: var(--royal); }
.svc-studio__cell--video .svc-studio__cell-num { color: #C28A00; }
.svc-studio__cell--info .svc-studio__cell-num { color: #0E9F6E; }
.svc-studio__cell--brand .svc-studio__cell-num { color: var(--ink); }
/* ============================================================
responsive — services page
============================================================ */
@media (max-width: 1080px) {
.svc-studio__grid { grid-template-columns: repeat(2, 1fr); }
.svc-magazin__inner { grid-template-columns: 1fr; padding: 48px 36px; gap: 32px; }
.svc-magazin__meta { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
.svc-services { padding: 64px var(--pad-x); }
.svc-magazin__inner { padding: 36px 24px; }
.svc-magazin__meta { grid-template-columns: 1fr; }
.svc-studio { padding: 64px var(--pad-x); }
.svc-studio__grid { grid-template-columns: 1fr; }
.svc-studio__title { font-size: clamp(30px, 8vw, 44px); }
}
NEW BRAND CARDS · Велсора + VOIS
(на главной + на странице /cases.html)
════════════════════════════════════════════════════════════════ */
/* ── Велсора — furniture / warm paper editorial ── */
.case__media--velsora {
background:
radial-gradient(130% 90% at 100% 0%, #F3E9D6 0%, #EADCBE 55%, #D9C89F 100%);
overflow: hidden;
}
.brand-card--velsora {
position: absolute; inset: 18px;
padding: 22px 30px 16px;
background:
linear-gradient(180deg, #FBF5E6 0%, #F2E8D0 100%);
border: 1px solid rgba(60,40,20,0.14);
border-radius: var(--r-md);
color: #2A2016;
overflow: hidden;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.65),
0 10px 28px -14px rgba(60,40,20,0.22);
display: grid;
grid-template-rows: auto 1fr auto auto;
gap: 8px;
}
.brand-card--velsora::before {
content: "";
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(60,40,20,0.03) 0 1px, transparent 1px 13px),
repeating-linear-gradient(45deg, rgba(60,40,20,0.02) 0 1px, transparent 1px 9px);
pointer-events: none;
mix-blend-mode: multiply;
}
.brand-card--velsora::after {
content: "";
position: absolute; left: -40px; bottom: -30px;
width: 220px; height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, transparent 70%);
pointer-events: none;
}
.vs-corner {
position: absolute;
width: 10px; height: 10px;
border: 1px solid rgba(60,40,20,0.35);
pointer-events: none;
z-index: 1;
}
.vs-corner--tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.vs-corner--tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.vs-corner--bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.vs-corner--br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.vs-row {
position: relative; z-index: 3;
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(60,40,20,0.65);
}
.vs-meta { display: inline-flex; gap: 8px; align-items: baseline; }
.vs-meta__key { color: rgba(60,40,20,0.55); }
.vs-meta__val { color: #2A2016; font-weight: 500; letter-spacing: 0.02em; font-style: italic; }
.vs-pill {
font-family: var(--font-mono);
font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
padding: 4px 9px;
border-radius: var(--r-pill);
background: #2F4A3A; color: #F5EDDA;
}
.vs-side {
position: absolute;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
transform-origin: center;
display: inline-flex; gap: 6px; align-items: center;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(60,40,20,0.6);
white-space: nowrap;
z-index: 3;
pointer-events: none;
}
.vs-side--left { left: 4px; }
.vs-side--right { right: 4px; }
.vs-stage {
position: relative; z-index: 2;
display: grid;
grid-template-rows: 1fr auto auto;
align-items: center; justify-items: center;
gap: 6px;
padding: 2px 0;
}
.vs-sofa {
width: clamp(160px, 55%, 280px);
height: auto;
color: rgba(60,40,20,0.42);
transition: transform 560ms var(--ease), color 420ms var(--ease);
}
.case--velsora:hover .vs-sofa { transform: translateY(-2px) rotate(-0.4deg); color: rgba(60,40,20,0.6); }
.vs-wordmark {
display: inline-flex;
gap: clamp(2px, 0.5vw, 7px);
font-weight: 500;
letter-spacing: -0.03em;
font-size: clamp(38px, 6.4vw, 78px);
line-height: 0.9;
color: #2A2016;
position: relative;
z-index: 2;
}
.vs-wordmark span {
display: inline-block;
transition: transform 280ms var(--ease);
}
.case--velsora:hover .vs-wordmark span:nth-child(odd) { transform: translateY(-2px); }
.case--velsora:hover .vs-wordmark span:nth-child(even) { transform: translateY( 2px); }
.vs-tagline {
display: inline-flex; gap: 8px; align-items: center;
font-family: var(--font-mono);
font-size: 11px;
color: rgba(60,40,20,0.62);
letter-spacing: 0.04em;
text-transform: lowercase;
}
.vs-tagline__dash { opacity: 0.45; }
.vs-tagline__it { font-style: italic; font-family: 'Georgia', 'Times New Roman', serif; letter-spacing: 0; text-transform: none; font-size: 12px; color: #2F4A3A; }
.vs-ticker {
position: relative; z-index: 3;
display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
padding: 6px 0;
border-top: 1px dashed rgba(60,40,20,0.28);
border-bottom: 1px dashed rgba(60,40,20,0.28);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.04em;
color: rgba(60,40,20,0.7);
}
.vs-ticker__item { display: inline-flex; gap: 5px; align-items: baseline; }
.vs-ticker__item em {
font-style: normal;
color: rgba(60,40,20,0.45);
font-size: 9px;
}
.vs-row--bot {
padding-top: 2px;
color: rgba(60,40,20,0.72);
}
.vs-kpi {
display: inline-flex; gap: 6px; align-items: baseline;
color: rgba(60,40,20,0.55);
letter-spacing: 0.04em;
}
.vs-kpi strong {
color: #2F4A3A;
font-family: var(--font-mono);
font-weight: 500;
font-size: 12px;
letter-spacing: 0;
}
/* ── VOIS — clinical ivory / version system ── */
.case__media--vois {
background:
radial-gradient(130% 90% at 0% 100%, #ECEBE2 0%, #DCDFD4 55%, #C4CBBB 100%);
overflow: hidden;
}
.brand-card--vois {
position: absolute; inset: 18px;
padding: 20px 28px 16px;
background: linear-gradient(180deg, #F7F4EB 0%, #EDE8DA 100%);
border: 1px solid rgba(40,48,36,0.14);
border-radius: var(--r-md);
color: #1D2218;
overflow: hidden;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.75),
0 10px 28px -14px rgba(40,48,36,0.20);
display: grid;
grid-template-rows: auto 1fr auto auto;
gap: 8px;
}
.vo-grid {
position: absolute; inset: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
pointer-events: none;
z-index: 0;
opacity: 0.38;
}
.vo-grid span {
border-right: 1px solid rgba(40,48,36,0.09);
border-bottom: 1px solid rgba(40,48,36,0.09);
}
.vo-grid span:nth-child(4n) { border-right: 0; }
.vo-grid span:nth-child(n+13) { border-bottom: 0; }
.vo-row {
position: relative; z-index: 3;
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(40,48,36,0.62);
}
.vo-meta {
display: inline-flex; gap: 6px; align-items: baseline;
}
.vo-meta__star { color: #6B8055; }
.vo-meta--right { letter-spacing: 0.18em; color: #1D2218; font-weight: 500; }
.vo-stage {
position: relative; z-index: 2;
display: grid;
grid-template-rows: auto auto auto;
align-items: center; justify-items: center;
gap: 8px;
padding: 6px 0 2px;
}
.vo-wordmark {
display: inline-flex;
gap: clamp(4px, 0.8vw, 14px);
font-weight: 500;
letter-spacing: -0.03em;
font-size: clamp(52px, 9vw, 120px);
line-height: 0.86;
color: #1D2218;
}
.vo-wordmark span {
display: inline-block;
transition: transform 280ms var(--ease);
}
.case--vois:hover .vo-wordmark span:nth-child(1) { transform: translateY(-3px); }
.case--vois:hover .vo-wordmark span:nth-child(2) { transform: translateY( 3px); }
.case--vois:hover .vo-wordmark span:nth-child(3) { transform: translateY(-3px); }
.case--vois:hover .vo-wordmark span:nth-child(4) { transform: translateY( 3px); }
.vo-sub {
font-family: var(--font-mono);
font-size: 11px;
color: rgba(40,48,36,0.62);
letter-spacing: 0.08em;
text-transform: lowercase;
}
.vo-versions {
display: inline-flex; align-items: stretch; gap: 12px;
font-family: var(--font-mono);
padding: 6px 14px;
border: 1px solid rgba(40,48,36,0.22);
border-radius: var(--r-pill);
background: rgba(255,255,255,0.52);
}
.vo-ver {
display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
font-size: 10px;
}
.vo-ver em {
font-style: normal;
font-weight: 500;
color: #1D2218;
letter-spacing: 0.02em;
}
.vo-ver i {
font-style: normal;
font-size: 9px;
color: rgba(40,48,36,0.6);
letter-spacing: 0.02em;
}
.vo-ver-sep {
width: 1px; background: rgba(40,48,36,0.22);
}
.vo-cats {
position: relative; z-index: 3;
display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
padding: 6px 0;
border-top: 1px dashed rgba(40,48,36,0.22);
border-bottom: 1px dashed rgba(40,48,36,0.22);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.04em;
color: rgba(40,48,36,0.72);
}
.vo-cat { display: inline-flex; gap: 6px; align-items: center; }
.vo-dot {
width: 7px; height: 7px; border-radius: 50%;
display: inline-block;
}
.vo-dot[data-cat="a"] { background: #A7B5A0; }
.vo-dot[data-cat="b"] { background: #D7A89A; }
.vo-dot[data-cat="c"] { background: #B8B0D9; }
.vo-dot[data-cat="d"] { background: #E5C47F; }
.vo-row--bot {
padding-top: 2px;
color: rgba(40,48,36,0.72);
}
.vo-kpi {
display: inline-flex; gap: 6px; align-items: baseline;
color: rgba(40,48,36,0.55);
letter-spacing: 0.04em;
}
.vo-kpi strong {
color: #6B8055;
font-family: var(--font-mono);
font-weight: 500;
font-size: 12px;
letter-spacing: 0;
}
/* ── Case-sheet modal — новые панели Велсора & VOIS ── */
.case-sheet__hero--velsora {
background: linear-gradient(160deg, #F6EBD5 0%, #EEDFBE 55%, #E3D09F 100%);
}
.case-sheet__hero--vois {
background: linear-gradient(160deg, #EEEBE0 0%, #E0DED2 55%, #CDD2C1 100%);
}
.case-sheet__wordmark--velsora {
letter-spacing: -0.02em;
font-size: clamp(48px, 7vw, 82px);
color: #2A2016;
}
.case-sheet__wordmark--vois {
letter-spacing: -0.04em;
color: #1D2218;
}
.case-sheet__hero--velsora .case-sheet__title,
.case-sheet__hero--velsora .case-sheet__kpi strong { color: #2A2016; }
.case-sheet__hero--velsora .case-sheet__kpi span,
.case-sheet__hero--velsora .case-sheet__brand-sub { color: rgba(60,40,20,0.6); }
.case-sheet__hero--velsora .case-sheet__eyebrow-dot { background: #2F4A3A; }
.case-sheet__hero--vois .case-sheet__title,
.case-sheet__hero--vois .case-sheet__kpi strong { color: #1D2218; }
.case-sheet__hero--vois .case-sheet__kpi span,
.case-sheet__hero--vois .case-sheet__brand-sub { color: rgba(40,48,36,0.6); }
.case-sheet__hero--vois .case-sheet__eyebrow-dot { background: #6B8055; }
/* FEA — travel beauty / warm peach-coral */
.case-sheet__hero--fea {
background: linear-gradient(160deg, #FDEBDD 0%, #F8D2BC 55%, #EFB39A 100%);
}
.case-sheet__wordmark--fea {
letter-spacing: -0.03em;
font-size: clamp(50px, 7vw, 86px);
color: #4A2218;
}
.case-sheet__hero--fea .case-sheet__title,
.case-sheet__hero--fea .case-sheet__kpi strong { color: #4A2218; }
.case-sheet__hero--fea .case-sheet__kpi span,
.case-sheet__hero--fea .case-sheet__brand-sub { color: rgba(74,34,24,0.62); }
.case-sheet__hero--fea .case-sheet__eyebrow-dot { background: #D4664A; }
/* Сахар — beauty studio · champagne rose */
.case-sheet__hero--sahar {
background: linear-gradient(160deg, #FAEFEA 0%, #F1DFD6 50%, #DDB7AB 100%);
}
.case-sheet__hero--sahar .case-sheet__title,
.case-sheet__hero--sahar .case-sheet__kpi strong { color: #4A1E26; }
.case-sheet__hero--sahar .case-sheet__kpi span,
.case-sheet__hero--sahar .case-sheet__brand-sub { color: rgba(74,30,38,0.62); }
.case-sheet__hero--sahar .case-sheet__eyebrow-dot { background: #B8252A; }
/* Аква Профи — water blues */
.case-sheet__hero--aqua {
background: linear-gradient(160deg, #E8F2FA 0%, #C8DFEF 55%, #A4C5DF 100%);
}
.case-sheet__wordmark--aqua {
letter-spacing: -0.02em;
font-size: clamp(46px, 6.5vw, 76px);
color: #12365C;
}
.case-sheet__hero--aqua .case-sheet__title,
.case-sheet__hero--aqua .case-sheet__kpi strong { color: #12365C; }
.case-sheet__hero--aqua .case-sheet__kpi span,
.case-sheet__hero--aqua .case-sheet__brand-sub { color: rgba(18,54,92,0.62); }
.case-sheet__hero--aqua .case-sheet__eyebrow-dot { background: #2E82C8; }
/* ── Case-sheet modal — панели MOYÖRY & BOS ── */
.case-sheet__hero--moyoti {
background: linear-gradient(160deg, #F4E6D2 0%, #D9C4A4 45%, #B78D54 100%);
}
.case-sheet__hero--moyoti .case-sheet__title,
.case-sheet__hero--moyoti .case-sheet__kpi strong { color: #2A1809; }
.case-sheet__hero--moyoti .case-sheet__kpi span,
.case-sheet__hero--moyoti .case-sheet__brand-sub { color: rgba(42,24,9,0.6); }
.case-sheet__hero--moyoti .case-sheet__eyebrow-dot { background: #B78D54; box-shadow: 0 0 0 2px rgba(183,141,84,0.3); }
.case-sheet__hero--moyoti .case-sheet__eyebrow { color: rgba(42,24,9,0.7); }
.case-sheet__hero--moyoti .case-sheet__wordmark { color: #2A1809; }
.case-sheet__hero--bos {
background: linear-gradient(160deg, #F6EEDC 0%, #D4BFA0 45%, #8B5F3E 100%);
}
.case-sheet__hero--bos .case-sheet__title,
.case-sheet__hero--bos .case-sheet__kpi strong { color: #2A1809; }
.case-sheet__hero--bos .case-sheet__kpi span,
.case-sheet__hero--bos .case-sheet__brand-sub { color: rgba(42,24,9,0.6); }
.case-sheet__hero--bos .case-sheet__eyebrow-dot { background: #6B4423; box-shadow: 0 0 0 2px rgba(107,68,35,0.3); }
.case-sheet__hero--bos .case-sheet__eyebrow { color: rgba(42,24,9,0.7); }
.case-sheet__hero--bos .case-sheet__wordmark { color: #2A1809; }
.case-sheet__shop--ym .case-sheet__shop-pin { background: #FDC51E; color: #1a1a1a; }
.case__shop--ym { background: #FDC51E; color: #1a1a1a; border-color: rgba(0,0,0,0.08); }
/* ════════════════════════════════════════════════════════════════
CASES PAGE — /cases.html
════════════════════════════════════════════════════════════════ */
body.cases-body { background: var(--bg); }
/* ── Compact hero — just eyebrow + title ── */
.cp-hero {
max-width: var(--container);
margin: 0 auto;
padding: 48px var(--pad-x) 24px;
position: relative;
}
.cp-hero__meta {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 22px;
margin-bottom: 28px;
border-bottom: 1px solid var(--line);
flex-wrap: wrap;
gap: 12px;
}
.cp-hero__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.06em;
}
.cp-hero__eyebrow-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--royal);
animation: caseSheetPulse 2.4s var(--ease) infinite;
}
.cp-hero__breadcrumbs {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.04em;
display: inline-flex; align-items: center; gap: 6px;
}
.cp-hero__breadcrumbs a { color: var(--muted); border-bottom: 1px dashed var(--mute-2); padding-bottom: 1px; }
.cp-hero__breadcrumbs a:hover { color: var(--ink); border-color: var(--ink); }
.cp-hero__breadcrumbs em { font-style: normal; color: var(--ink); }
.cp-hero__title--compact {
font-size: clamp(26px, 2.6vw, 38px);
line-height: 1.1;
letter-spacing: -0.025em;
font-weight: 500;
color: var(--ink);
max-width: 680px;
}
/* ════════════════════════════════════════════════════════════════
CP FEATURE · journal-spread layout for VNSK + Biologique Recherche
════════════════════════════════════════════════════════════════ */
.cp-feature {
max-width: var(--container);
margin: 0 auto;
padding: 28px var(--pad-x) 44px;
position: relative;
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 44px;
align-items: center;
background: transparent;
border-radius: 0;
overflow: visible;
box-shadow: none;
}
.cp-feature:hover { transform: none; }
/* Giant number floats top-left (or top-right for reversed) */
.cp-feature__num {
position: absolute;
top: 24px;
left: var(--pad-x);
display: inline-flex; align-items: baseline; gap: 14px;
pointer-events: none;
z-index: 2;
}
.cp-feature__num--right {
left: auto;
right: var(--pad-x);
}
.cp-feature__num-lg {
font-weight: 500;
font-size: clamp(72px, 8vw, 120px);
line-height: 0.85;
letter-spacing: -0.05em;
color: var(--ink);
opacity: 0.06;
transition: opacity 320ms var(--ease);
}
.cp-feature:hover .cp-feature__num-lg { opacity: 0.1; }
.cp-feature__num-sm {
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
padding-top: 4px;
}
/* Media column — the existing brand-card */
.cp-feature__media {
position: relative;
aspect-ratio: 5 / 4;
border-radius: var(--r-lg);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
transition: transform 360ms var(--ease);
}
.cp-feature:hover .cp-feature__media { transform: translateY(-3px); }
/* Reversed: body on left, media on right */
.cp-feature--reverse .cp-feature__media { order: 2; }
.cp-feature--reverse .cp-feature__body { order: 1; }
/* Body column */
.cp-feature__body {
display: flex;
flex-direction: column;
gap: 18px;
padding: 8px 0;
max-width: 520px;
}
.cp-feature__meta {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 2px;
}
.cp-feature__meta .case__tag {
font-family: var(--font-mono);
font-size: 11px;
padding: 5px 11px;
border: 1px solid var(--line);
border-radius: var(--r-pill);
color: var(--ink-soft);
background: var(--bg);
letter-spacing: 0.04em;
text-transform: lowercase;
}
.cp-feature__title {
font-size: clamp(24px, 2.4vw, 36px);
line-height: 1.12;
letter-spacing: -0.018em;
font-weight: 500;
color: var(--ink);
}
.cp-feature__title strong {
font-weight: 500;
}
.cp-feature__title strong::after {
content: "";
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
margin-left: 6px;
transform: translateY(-4px);
opacity: 0.55;
}
.cp-feature__desc {
font-size: 15.5px;
line-height: 1.6;
color: var(--ink-soft);
}
.cp-feature__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin-top: 4px;
border-top: 1px solid var(--ink);
padding-top: 16px;
}
.cp-feature__stats > div {
display: flex; flex-direction: column; gap: 4px;
padding-right: 14px;
border-right: 1px solid var(--line);
}
.cp-feature__stats > div:last-child { border-right: 0; padding-right: 0; }
.cp-feature__stats strong {
font-size: clamp(22px, 2vw, 28px);
font-weight: 500;
letter-spacing: -0.02em;
color: var(--ink);
}
.cp-feature__stats span {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.02em;
}
.cp-feature__foot {
display: flex;
align-items: center;
gap: 14px;
margin-top: 4px;
flex-wrap: wrap;
justify-content: space-between;
}
.cp-feature__read {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-sans);
font-size: 14.5px;
font-weight: 500;
letter-spacing: -0.005em;
padding: 13px 20px;
border-radius: var(--r-pill);
background: var(--ink);
color: #fff;
transition: transform 220ms var(--ease), background 220ms var(--ease);
cursor: pointer;
}
.cp-feature__read:hover { transform: translateY(-2px); background: var(--royal); }
.cp-feature__read svg { transition: transform 220ms var(--ease); }
.cp-feature__read:hover svg { transform: translate(3px, -3px); }
.cp-feature__shops {
display: inline-flex;
gap: 6px;
flex-wrap: wrap;
}
.cp-feature__shops .case__shop {
font-family: var(--font-mono);
font-size: 11.5px;
padding: 8px 12px;
border: 1px solid var(--line);
border-radius: var(--r-pill);
color: var(--ink-soft);
background: var(--bg);
display: inline-flex; align-items: center; gap: 5px;
text-transform: uppercase;
letter-spacing: 0.06em;
transition: all 200ms var(--ease);
}
.cp-feature__shops .case__shop:hover {
border-color: var(--ink);
color: var(--ink);
}
.cp-feature__shops .case__shop--wb { background: #CB11AB; color: #fff; border-color: transparent; }
.cp-feature__shops .case__shop--ozon { background: var(--royal); color: #fff; border-color: transparent; }
.cp-feature__shops .case__shop--ym { background: #FDC51E; color: #1a1a1a; border-color: transparent; }
.cp-feature__shops .case__shop--wb:hover,
.cp-feature__shops .case__shop--ozon:hover { transform: translateY(-2px); color: #fff; }
.cp-feature__shops .case__shop--ym:hover { transform: translateY(-2px); color: #1a1a1a; }
/* Divider line between features */
.cp-feature + .cp-feature::before {
content: "";
position: absolute;
top: 0;
left: var(--pad-x);
right: var(--pad-x);
height: 1px;
background: var(--line);
}
/* Reset inherited .case display rules */
.cp-feature.case {
display: grid;
flex-direction: unset;
}
/* Inherit brand-card hover choreography via existing .case--vnsk / .case--br rules */
/* Inside cp-feature, remove the aspect-ratio of .case__media override */
.cp-feature .case__media {
aspect-ratio: 5 / 4;
border-radius: var(--r-lg);
height: 100%;
width: 100%;
position: relative;
}
/* ── "другие кейсы" heading ── */
.cp-rest-head {
max-width: var(--container);
margin: 0 auto;
padding: 36px var(--pad-x) 12px;
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: auto 1fr;
align-items: end;
gap: 24px;
}
.cp-rest-head__label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.04em;
}
.cp-rest-head__title {
grid-column: 1 / 3;
font-size: clamp(26px, 3vw, 40px);
line-height: 1.08;
letter-spacing: -0.028em;
font-weight: 500;
color: var(--ink);
margin-top: 4px;
}
/* Legacy stat class kept (used in CTA banner) */
.cp-stat {
display: flex; flex-direction: column; gap: 6px;
padding: 14px 0 0;
border-top: 1px solid var(--ink);
}
.cp-stat strong {
font-size: clamp(22px, 2vw, 28px);
font-weight: 500;
letter-spacing: -0.02em;
color: var(--ink);
display: inline-flex; align-items: baseline; gap: 3px;
}
.cp-stat strong em {
font-style: normal;
font-size: 0.55em;
color: var(--muted);
font-family: var(--font-mono);
letter-spacing: 0;
font-weight: 400;
}
.cp-stat span {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.02em;
}
/* ── Marquee of brand names ── */
.cp-marquee {
overflow: hidden;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--bg-alt);
padding: 18px 0;
margin-bottom: 20px;
}
.cp-marquee__track {
display: flex;
gap: 64px;
white-space: nowrap;
font-family: var(--font-mono);
font-size: 13px;
color: var(--ink-soft);
letter-spacing: 0.04em;
animation: cpMarquee 52s linear infinite;
will-change: transform;
}
.cp-marquee__item { display: inline-flex; gap: 14px; align-items: center; }
.cp-marquee__item em {
font-style: normal;
color: var(--muted);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.cp-marquee__item i {
font-style: normal;
width: 4px; height: 4px; border-radius: 50%;
background: var(--mute-2);
display: inline-block;
}
@keyframes cpMarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ── Filter chips ── */
.cp-filter {
max-width: var(--container);
margin: 0 auto;
padding: 20px var(--pad-x) 16px;
display: flex;
flex-wrap: wrap;
gap: 8px 6px;
align-items: center;
justify-content: space-between;
}
.cp-filter__group {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
}
.cp-filter__label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.1em;
text-transform: uppercase;
padding-right: 12px;
}
.cp-chip {
font-family: var(--font-mono);
font-size: 12px;
padding: 8px 14px;
border: 1px solid var(--line);
border-radius: var(--r-pill);
color: var(--ink-soft);
background: #fff;
transition: all 200ms var(--ease);
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer;
}
.cp-chip:hover { border-color: var(--ink); color: var(--ink); }
.cp-chip[aria-pressed="true"] {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.cp-chip__num {
font-size: 10px;
opacity: 0.5;
}
.cp-chip[aria-pressed="true"] .cp-chip__num { opacity: 0.75; }
.cp-filter__count {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.02em;
}
/* ── FAQ ── */
.cp-faq {
max-width: var(--container);
margin: 0 auto;
padding: 56px var(--pad-x) 72px;
border-top: 1px solid var(--line);
}
.cp-faq__head {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 36px;
align-items: end;
margin-bottom: 36px;
}
.cp-faq__label {
grid-column: 1; grid-row: 1;
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.04em;
}
.cp-faq__title {
grid-column: 1; grid-row: 2;
margin-top: 14px;
font-size: clamp(28px, 3.6vw, 48px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 500;
color: var(--ink);
}
.cp-faq__title em {
font-style: normal;
color: var(--royal);
font-weight: 500;
}
.cp-faq__lead {
grid-column: 2; grid-row: 2;
font-size: 15px;
line-height: 1.55;
color: var(--muted);
max-width: 460px;
align-self: end;
margin-bottom: 6px;
}
.cp-faq__lead a { border-bottom: 1px solid var(--line); color: var(--ink); }
.cp-faq__lead a:hover { color: var(--royal); border-color: var(--royal); }
.cp-faq__list {
list-style: none;
margin: 0; padding: 0;
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
background: var(--bg);
}
.cp-faq__item + .cp-faq__item { border-top: 1px solid var(--line); }
.cp-faq__item details { background: var(--bg); transition: background 220ms var(--ease); }
.cp-faq__item details[open] { background: var(--bg-alt); }
.cp-faq__item summary {
list-style: none;
cursor: pointer;
padding: 22px 24px;
display: flex;
align-items: center;
gap: 18px;
user-select: none;
transition: color 220ms var(--ease);
}
.cp-faq__item summary::-webkit-details-marker { display: none; }
.cp-faq__item summary:hover { color: var(--royal); }
.cp-faq__q {
flex: 1;
font-size: 15.5px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
}
.cp-faq__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: 50%;
border: 1px solid var(--line);
color: var(--ink);
transition: transform 280ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease);
}
.cp-faq__item details[open] .cp-faq__toggle {
transform: rotate(180deg);
background: var(--ink);
border-color: var(--ink);
color: #fff;
}
.cp-faq__a {
padding: 0 24px 22px 24px;
font-size: 14.5px;
line-height: 1.6;
color: var(--ink-soft);
display: flex;
flex-direction: column;
gap: 10px;
max-width: 760px;
animation: cpFaqIn 320ms var(--ease-out) both;
}
.cp-faq__a p { margin: 0; }
@keyframes cpFaqIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
@media (max-width: 720px) {
.cp-faq__head { grid-template-columns: 1fr; }
.cp-faq__lead { grid-column: 1; grid-row: 3; max-width: 100%; align-self: start; margin-bottom: 0; }
.cp-faq__item summary { padding: 18px 18px; gap: 14px; }
.cp-faq__q { font-size: 14.5px; }
.cp-faq__a { padding: 0 18px 18px; font-size: 14px; }
}
/* ── Awards strip ── */
.cp-awards {
max-width: var(--container);
margin: 0 auto;
padding: 56px var(--pad-x) 28px;
border-top: 1px solid var(--line);
}
.cp-awards__head {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 36px;
align-items: end;
margin-bottom: 28px;
}
.cp-awards__label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.04em;
}
.cp-awards__title {
grid-column: 1;
grid-row: 2;
margin-top: 14px;
font-size: clamp(28px, 3.6vw, 48px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 500;
color: var(--ink);
}
.cp-awards__title em {
font-style: normal;
color: var(--royal);
font-weight: 500;
}
.cp-awards__list {
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
background: var(--bg);
}
.cp-awards__item {
display: grid;
grid-template-columns: auto auto 1fr auto;
align-items: center;
gap: 14px;
padding: 18px 22px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
transition: background 220ms var(--ease);
}
.cp-awards__item:hover { background: var(--bg-alt); }
.cp-awards__item:nth-child(2n) { border-right: 0; }
.cp-awards__item:nth-last-child(-n+2) { border-bottom: 0; }
.cp-awards__year {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--mute-2);
font-weight: 500;
width: 32px;
}
.cp-awards__icon {
font-size: 14px;
color: var(--royal);
width: 18px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cp-awards__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.cp-awards__brand {
font-size: 14px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
}
.cp-awards__title-row {
font-size: 12.5px;
color: var(--muted);
line-height: 1.4;
}
.cp-awards__plat {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mute-2);
padding: 4px 8px;
border: 1px solid var(--line);
border-radius: var(--r-pill);
}
@media (max-width: 720px) {
.cp-awards__head { grid-template-columns: 1fr; }
.cp-awards__list { grid-template-columns: 1fr; }
.cp-awards__item { border-right: 0 !important; padding: 14px 16px; gap: 10px; }
.cp-awards__item:last-child { border-bottom: 0; }
.cp-awards__title-row { font-size: 12px; }
}
/* ── Stats band ── */
.cp-stats {
max-width: var(--container);
margin: 8px auto 0;
padding: 0 var(--pad-x);
}
.cp-stats__inner {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
border: 1px solid var(--line);
border-radius: var(--r-lg);
background:
linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
overflow: hidden;
position: relative;
}
.cp-stats__inner::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(80% 100% at 0% 0%, rgba(0,91,255,0.045), transparent 60%);
pointer-events: none;
}
.cp-stats__item {
position: relative;
padding: 22px 22px 22px;
display: flex;
flex-direction: column;
gap: 10px;
border-right: 1px solid var(--line);
transition: background 240ms var(--ease);
}
.cp-stats__item:last-child { border-right: 0; }
.cp-stats__item:hover { background: rgba(0,91,255,0.03); }
.cp-stats__num {
font-size: clamp(24px, 2.4vw, 34px);
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1;
color: var(--ink);
display: inline-flex;
align-items: baseline;
gap: 4px;
white-space: nowrap;
}
.cp-stats__num em {
font-style: normal;
font-family: var(--font-mono);
font-size: 0.4em;
font-weight: 400;
color: var(--royal);
letter-spacing: 0.04em;
text-transform: lowercase;
margin-left: 2px;
}
.cp-stats__cap {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--muted);
line-height: 1.5;
}
@media (max-width: 1100px) {
.cp-stats__inner { grid-template-columns: repeat(3, 1fr); }
.cp-stats__item:nth-child(3n) { border-right: 0; }
.cp-stats__item:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) {
.cp-stats__inner { grid-template-columns: repeat(2, 1fr); }
.cp-stats__item { padding: 16px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cp-stats__item:nth-child(2n) { border-right: 0; }
.cp-stats__item:nth-child(n+5) { border-bottom: 0; }
.cp-stats__num { font-size: 24px; }
}
/* ── Cases grid (reuses .case* classes, but larger gap) ── */
.cp-grid {
max-width: var(--container);
margin: 0 auto;
padding: 16px var(--pad-x) 56px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}
.cp-grid .case { animation: cpCardIn 620ms var(--ease-out) both; }
.cp-grid .case:nth-child(1) { animation-delay: 40ms; }
.cp-grid .case:nth-child(2) { animation-delay: 100ms; }
.cp-grid .case:nth-child(3) { animation-delay: 160ms; }
.cp-grid .case:nth-child(4) { animation-delay: 220ms; }
.cp-grid .case:nth-child(5) { animation-delay: 280ms; }
.cp-grid .case:nth-child(6) { animation-delay: 340ms; }
.cp-grid .case:nth-child(7) { animation-delay: 400ms; }
.cp-grid .case:nth-child(8) { animation-delay: 460ms; }
.cp-grid .case.is-hidden { display: none; }
@keyframes cpCardIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* ════════════════════════════════════════════════════════════════
FEA — travel cosmetics / passport aesthetic
════════════════════════════════════════════════════════════════ */
.case__media--fea {
background:
radial-gradient(130% 90% at 100% 100%, #E5ECE8 0%, #C8D4CF 55%, #A9B8B4 100%);
overflow: hidden;
}
.brand-card--fea {
position: absolute; inset: 18px;
padding: 22px 30px 16px;
background: linear-gradient(180deg, #F4EEE1 0%, #EAE0CC 100%);
border: 1px solid rgba(30,50,48,0.14);
border-radius: var(--r-md);
color: #1F302C;
overflow: hidden;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.62),
0 10px 28px -14px rgba(30,50,48,0.22);
display: grid;
grid-template-rows: auto 1fr auto auto;
gap: 8px;
}
.brand-card--fea::before {
content: "";
position: absolute; inset: 0;
background:
repeating-linear-gradient(0deg, rgba(30,50,48,0.04) 0 1px, transparent 1px 12px),
radial-gradient(100% 70% at 50% 0%, rgba(255,255,255,0.5), transparent 75%);
pointer-events: none;
mix-blend-mode: multiply;
}
.fea-stamp {
position: absolute; top: 50%; right: -12px;
transform: translateY(-50%) rotate(-8deg);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 14px 18px;
border: 2px solid rgba(30,50,48,0.35);
color: rgba(30,50,48,0.55);
border-radius: 8px;
z-index: 2;
opacity: 0.7;
pointer-events: none;
}
.fea-stamp strong { font-weight: 500; display: block; }
.fea-row {
position: relative; z-index: 3;
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(30,50,48,0.6);
}
.fea-meta { display: inline-flex; gap: 8px; align-items: baseline; }
.fea-meta__key { color: rgba(30,50,48,0.55); }
.fea-meta__val { color: #1F302C; font-weight: 500; }
.fea-pill {
font-family: var(--font-mono);
font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
padding: 4px 9px;
border-radius: var(--r-pill);
background: #1F302C; color: #F4EEE1;
}
.fea-stage {
position: relative; z-index: 2;
display: grid;
grid-template-rows: 1fr auto auto;
align-items: center; justify-items: center;
gap: 6px;
padding: 2px 0;
}
.fea-wordmark {
display: inline-flex;
gap: clamp(2px, 0.5vw, 8px);
font-weight: 500;
letter-spacing: -0.04em;
font-size: clamp(58px, 10vw, 128px);
line-height: 0.9;
color: #1F302C;
}
.fea-wordmark span { display: inline-block; transition: transform 280ms var(--ease); }
.case--fea:hover .fea-wordmark span:nth-child(odd) { transform: translateY(-3px); }
.case--fea:hover .fea-wordmark span:nth-child(even) { transform: translateY( 3px); }
.fea-tagline {
display: inline-flex; gap: 8px; align-items: center;
font-family: 'Georgia', 'Times New Roman', serif;
font-style: italic;
font-size: 14px;
color: rgba(30,50,48,0.72);
}
.fea-ticker {
position: relative; z-index: 3;
display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
padding: 6px 0;
border-top: 1px dashed rgba(30,50,48,0.24);
border-bottom: 1px dashed rgba(30,50,48,0.24);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.04em;
color: rgba(30,50,48,0.72);
}
.fea-ticker span { display: inline-flex; gap: 5px; align-items: baseline; }
.fea-ticker em { font-style: normal; font-size: 9px; color: rgba(30,50,48,0.5); }
.fea-row--bot {
color: rgba(30,50,48,0.72);
padding-top: 2px;
}
.fea-row--bot strong {
color: #1F302C; font-family: var(--font-mono);
font-weight: 500; font-size: 12px; letter-spacing: 0;
}
/* ════════════════════════════════════════════════════════════════
Aquaprofi — water / technical blue
════════════════════════════════════════════════════════════════ */
.case__media--aqua {
background:
radial-gradient(130% 90% at 50% 0%, #DDEAF5 0%, #B7CEE3 55%, #8AAECC 100%);
overflow: hidden;
}
.brand-card--aqua {
position: absolute; inset: 18px;
padding: 22px 30px 16px;
background: linear-gradient(180deg, #F5FAFE 0%, #E3EEF7 100%);
border: 1px solid rgba(18,60,100,0.14);
border-radius: var(--r-md);
color: #12365C;
overflow: hidden;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.72),
0 10px 28px -14px rgba(18,60,100,0.22);
display: grid;
grid-template-rows: auto 1fr auto auto;
gap: 8px;
}
.brand-card--aqua::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(60% 60% at 50% 55%, rgba(46,130,200,0.12), transparent 70%),
repeating-linear-gradient(90deg, rgba(18,60,100,0.04) 0 1px, transparent 1px 22px);
pointer-events: none;
mix-blend-mode: multiply;
}
.aqua-ripples {
position: absolute;
top: 46%; left: 50%;
width: 220px; height: 220px;
transform: translate(-50%, -50%);
pointer-events: none;
opacity: 0.45;
}
.aqua-ripples span {
position: absolute; inset: 0;
border-radius: 50%;
border: 1px solid rgba(46,130,200,0.55);
transform: scale(0.2);
animation: aquaRipple 4.2s ease-out infinite;
}
.aqua-ripples span:nth-child(2) { animation-delay: 1.2s; }
.aqua-ripples span:nth-child(3) { animation-delay: 2.4s; }
@keyframes aquaRipple {
0% { transform: scale(0.18); opacity: 0.85; }
100% { transform: scale(1); opacity: 0; }
}
.aqua-row {
position: relative; z-index: 3;
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(18,60,100,0.62);
}
.aqua-meta { display: inline-flex; gap: 8px; align-items: baseline; }
.aqua-meta__key { color: rgba(18,60,100,0.55); }
.aqua-meta__val { color: #12365C; font-weight: 500; }
.aqua-pill {
font-family: var(--font-mono);
font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
padding: 4px 9px;
border-radius: var(--r-pill);
background: #12365C; color: #F5FAFE;
}
.aqua-stage {
position: relative; z-index: 2;
display: grid;
grid-template-rows: 1fr auto auto;
align-items: center; justify-items: center;
gap: 6px;
padding: 2px 0;
}
.aqua-wordmark {
display: inline-flex;
gap: clamp(2px, 0.5vw, 8px);
font-weight: 500;
letter-spacing: -0.03em;
font-size: clamp(36px, 6vw, 72px);
line-height: 0.9;
color: #12365C;
z-index: 2;
}
.aqua-wordmark__mark {
display: inline-block;
color: #2E82C8;
transition: transform 400ms var(--ease);
}
.case--aqua:hover .aqua-wordmark__mark { transform: translateY(-2px) rotate(4deg); }
.aqua-sub {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: lowercase;
color: rgba(18,60,100,0.62);
}
.aqua-ticker {
position: relative; z-index: 3;
display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
padding: 6px 0;
border-top: 1px dashed rgba(18,60,100,0.22);
border-bottom: 1px dashed rgba(18,60,100,0.22);
font-family: var(--font-mono);
font-size: 10.5px;
color: rgba(18,60,100,0.72);
letter-spacing: 0.04em;
}
.aqua-ticker span { display: inline-flex; gap: 5px; align-items: baseline; }
.aqua-ticker em { font-style: normal; font-size: 9px; color: rgba(18,60,100,0.5); }
.aqua-row--bot { color: rgba(18,60,100,0.72); padding-top: 2px; }
.aqua-row--bot strong { color: #2E82C8; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0; }
/* ════════════════════════════════════════════════════════════════
Салон Сахар — beauty / champagne rose
════════════════════════════════════════════════════════════════ */
.case__media--sahar {
background:
radial-gradient(130% 90% at 0% 0%, #F3E0DA 0%, #E8CAC1 55%, #D4A79A 100%);
overflow: hidden;
}
.brand-card--sahar {
position: absolute; inset: 18px;
padding: 22px 30px 16px;
background: linear-gradient(180deg, #FAEFEA 0%, #F1DFD6 100%);
border: 1px solid rgba(110,50,60,0.14);
border-radius: var(--r-md);
color: #4A1E26;
overflow: hidden;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.72),
0 10px 28px -14px rgba(110,50,60,0.22);
display: grid;
grid-template-rows: auto 1fr auto auto;
gap: 8px;
}
.brand-card--sahar::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(70% 60% at 50% 100%, rgba(218,150,130,0.22), transparent 75%);
pointer-events: none;
}
.sh-sparkle {
position: absolute;
color: rgba(180,100,90,0.55);
pointer-events: none;
z-index: 1;
animation: shSparkle 3.2s ease-in-out infinite alternate;
}
.sh-sparkle--1 { top: 14%; left: 8%; font-size: 18px; }
.sh-sparkle--2 { top: 72%; left: 12%; font-size: 14px; animation-delay: 0.8s; }
.sh-sparkle--3 { top: 22%; right: 10%; font-size: 14px; animation-delay: 1.6s; }
.sh-sparkle--4 { top: 68%; right: 8%; font-size: 20px; animation-delay: 0.4s; }
@keyframes shSparkle {
0% { transform: scale(0.8) rotate(0deg); opacity: 0.4; }
100% { transform: scale(1.15) rotate(22deg); opacity: 0.95; }
}
.sh-row {
position: relative; z-index: 3;
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(110,50,60,0.62);
}
.sh-meta { display: inline-flex; gap: 8px; align-items: baseline; }
.sh-meta__key { color: rgba(110,50,60,0.55); }
.sh-meta__val { color: #4A1E26; font-weight: 500; font-style: italic; }
.sh-pill {
font-family: var(--font-mono);
font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
padding: 4px 9px;
border-radius: var(--r-pill);
background: #4A1E26; color: #FAEFEA;
}
.sh-stage {
position: relative; z-index: 2;
display: grid;
grid-template-rows: auto auto auto;
align-items: center; justify-items: center;
gap: 6px;
padding: 2px 0;
}
.sh-wordmark {
font-family: 'Georgia', 'Times New Roman', serif;
font-style: italic;
font-weight: 400;
letter-spacing: 0.02em;
font-size: clamp(54px, 9vw, 108px);
line-height: 0.9;
color: #4A1E26;
z-index: 2;
}
.sh-wordmark strong {
font-weight: 400;
font-style: italic;
}
.sh-sub {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(110,50,60,0.6);
}
.sh-sub__dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin: 0 8px; display: inline-block; transform: translateY(-2px); opacity: 0.5; }
.sh-services {
position: relative; z-index: 3;
display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
padding: 6px 0;
border-top: 1px dashed rgba(110,50,60,0.24);
border-bottom: 1px dashed rgba(110,50,60,0.24);
font-family: var(--font-mono);
font-size: 10.5px;
color: rgba(110,50,60,0.75);
letter-spacing: 0.04em;
}
.sh-services span { display: inline-flex; gap: 5px; align-items: baseline; }
.sh-services em { font-style: normal; font-size: 9px; color: rgba(110,50,60,0.5); }
.sh-row--bot { color: rgba(110,50,60,0.72); padding-top: 2px; }
.sh-row--bot strong { color: #4A1E26; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0; }
/* ════════════════════════════════════════════════════════════════
CP — Clients wall (all brands grid)
════════════════════════════════════════════════════════════════ */
.cp-clients {
max-width: var(--container);
margin: 0 auto;
padding: 56px var(--pad-x) 40px;
border-top: 1px solid var(--line);
}
.cp-clients__head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 24px;
align-items: end;
margin-bottom: 28px;
}
.cp-clients__label {
font-family: var(--font-mono); font-size: 12px; color: var(--muted);
letter-spacing: 0.04em;
}
.cp-clients__title {
grid-column: 1 / 3;
font-size: clamp(28px, 3.6vw, 48px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 500;
color: var(--ink);
}
.cp-clients__title em {
font-style: normal;
color: var(--royal);
font-weight: 500;
}
.cp-clients__note {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
}
.cp-clients__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.cp-client {
position: relative;
aspect-ratio: 1 / 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 18px;
gap: 6px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--bg);
text-align: center;
transition: background 280ms var(--ease), transform 300ms var(--ease-spring-soft);
}
.cp-client:hover { background: var(--bg-alt); transform: scale(1.02); z-index: 2; }
.cp-client[hidden] { display: none; }
/* Button version (clickable — opens cabinet screenshot lightbox) */
button.cp-client {
font: inherit;
color: inherit;
border: 0;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.cp-client--clickable { cursor: pointer; }
.cp-client__hint {
position: absolute;
left: 0; right: 0; bottom: 10px;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
opacity: 0;
transition: opacity 220ms var(--ease);
pointer-events: none;
}
.cp-client--clickable:hover .cp-client__hint,
.cp-client--clickable:focus-visible .cp-client__hint { opacity: 1; }
.cp-client--clickable:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.cp-client[data-tone="dark"].cp-client--clickable:hover .cp-client__hint,
.cp-client[data-tone="royal"].cp-client--clickable:hover .cp-client__hint { color: rgba(255,255,255,0.72); }
/* ──────── Client cabinet screenshot lightbox ──────── */
.client-sheet {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 40px 16px;
overflow-y: auto;
opacity: 0;
pointer-events: none;
transition: opacity 260ms var(--ease);
}
.client-sheet[data-open] { opacity: 1; pointer-events: auto; }
.client-sheet__backdrop {
position: fixed;
inset: 0;
background: rgba(10, 10, 10, 0.72);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.client-sheet__dialog {
position: relative;
z-index: 1;
width: min(960px, 100%);
background: #fff;
border-radius: 18px;
padding: 36px 32px 32px;
box-shadow: 0 30px 90px -20px rgba(10,10,10,0.4);
transform: translateY(14px);
transition: transform 280ms var(--ease);
}
.client-sheet[data-open] .client-sheet__dialog { transform: translateY(0); }
.client-sheet__close {
position: absolute;
top: 14px; right: 14px;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--line-soft);
border: 0;
color: var(--ink);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 180ms var(--ease);
}
.client-sheet__close:hover { background: var(--line); }
.client-sheet__head { margin-bottom: 22px; }
.client-sheet__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 10px;
}
.client-sheet__eyebrow-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--royal, #4a5fd9);
}
.client-sheet__title {
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 500;
letter-spacing: -0.02em;
margin: 0 0 6px;
color: var(--ink);
}
.client-sheet__sub {
margin: 0;
color: var(--ink-soft);
font-size: 14.5px;
line-height: 1.5;
}
/* Hero stage with prev/next navigation */
.client-sheet__stage {
position: relative;
margin: 0 0 16px;
border-radius: 14px;
overflow: hidden;
background: #0a0a0a;
border: 1px solid var(--line);
min-height: 260px;
}
.client-sheet__stage[hidden] { display: none; }
.client-sheet__hero {
display: block;
background: #0a0a0a;
line-height: 0;
}
.client-sheet__hero img {
width: 100%;
max-height: 68vh;
display: block;
object-fit: contain;
background: #0a0a0a;
}
.client-sheet__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
border: 0;
color: #0a0a0a;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px -10px rgba(0,0,0,0.45);
transition: background 180ms var(--ease), transform 220ms var(--ease);
z-index: 2;
}
.client-sheet__nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.client-sheet__nav:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.client-sheet__nav[hidden] { display: none; }
.client-sheet__nav--prev { left: 12px; }
.client-sheet__nav--next { right: 12px; }
.client-sheet__counter {
position: absolute;
right: 14px; bottom: 14px;
padding: 5px 10px;
background: rgba(10, 10, 10, 0.72);
backdrop-filter: blur(8px);
color: #fff;
border-radius: var(--r-pill);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
z-index: 2;
}
.client-sheet__counter[hidden] { display: none; }
/* Thumbnails strip */
.client-sheet__thumbs {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 4px 2px 12px;
scrollbar-width: thin;
}
.client-sheet__thumbs[hidden] { display: none; }
.client-sheet__thumbs::-webkit-scrollbar { height: 6px; }
.client-sheet__thumbs::-webkit-scrollbar-thumb { background: rgba(10,10,10,0.2); border-radius: 3px; }
.client-sheet__thumb {
flex: 0 0 auto;
width: 92px;
height: 66px;
padding: 0;
border: 2px solid transparent;
border-radius: 8px;
overflow: hidden;
background: #0a0a0a;
cursor: pointer;
transition: border-color 180ms var(--ease), opacity 180ms var(--ease), transform 180ms var(--ease);
opacity: 0.65;
}
.client-sheet__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.client-sheet__thumb:hover { opacity: 1; transform: translateY(-1px); }
.client-sheet__thumb.is-active { border-color: var(--ink); opacity: 1; }
.client-sheet__thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
body[data-client-sheet-open] { overflow: hidden; }
/* Platforms chips in client-sheet header */
.client-sheet__plats {
display: inline-flex; flex-wrap: wrap; gap: 6px;
margin: 10px 0 0;
}
.client-sheet__plats[hidden] { display: none; }
.client-sheet__plat {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: var(--r-pill);
background: var(--line-soft);
color: var(--muted);
}
.client-sheet__plat--ozon { background: rgba(0,91,255,0.12); color: var(--royal,#005BFF); }
.client-sheet__plat--wb { background: rgba(203,17,171,0.12); color: #B11091; }
.client-sheet__plat--ym { background: rgba(255,204,0,0.16); color: #B78F00; }
.client-sheet__plat--site { background: rgba(10,10,10,0.08); color: var(--ink); }
/* KPI row */
.client-sheet__kpi {
list-style: none; margin: 14px 0 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.client-sheet__kpi[hidden] { display: none; }
.client-sheet__kpi li {
padding: 12px 14px;
border-right: 1px solid var(--line);
display: flex; flex-direction: column; gap: 2px;
}
.client-sheet__kpi li:last-child { border-right: 0; }
.client-sheet__kpi strong {
font-size: clamp(17px, 1.9vw, 22px);
font-weight: 500;
letter-spacing: -0.02em;
color: var(--ink);
font-feature-settings: 'tnum';
}
.client-sheet__kpi span {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
/* NDA fallback when no real screenshots */
.client-sheet__nda {
margin-top: 18px;
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border: 1px dashed var(--line);
border-radius: var(--r-md);
background: var(--bg-alt);
}
.client-sheet__nda[hidden] { display: none; }
.client-sheet__nda-icon { font-size: 18px; line-height: 1; }
.client-sheet__nda-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.client-sheet__nda-text strong {
font-size: 13px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
}
.client-sheet__nda-text span {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--muted);
letter-spacing: 0.02em;
}
.client-sheet__nda-text a { color: var(--ink); border-bottom: 1px solid var(--line); }
.client-sheet__nda-text a:hover { color: var(--royal); border-color: var(--royal); }
/* Body with numbered chapters */
.client-sheet__body {
margin-top: 22px;
padding-top: 22px;
border-top: 1px solid var(--line);
display: flex; flex-direction: column;
gap: 0;
}
.client-sheet__chapter {
position: relative;
display: grid;
grid-template-columns: 32px 1fr;
column-gap: 14px;
padding: 16px 0;
border-bottom: 1px solid var(--line);
}
.client-sheet__chapter:last-child { border-bottom: 0; }
.client-sheet__chapter > *:not(.client-sheet__chapter-num) { grid-column: 2; }
.client-sheet__chapter-num {
position: static;
grid-column: 1; grid-row: 1;
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.02em;
padding-top: 2px;
}
.client-sheet__chapter h4 {
font-size: 17px;
font-weight: 500;
letter-spacing: -0.01em;
margin: 0 0 6px;
color: var(--ink);
}
.client-sheet__chapter p {
font-size: 14.5px;
line-height: 1.55;
color: var(--ink-soft);
margin: 0;
}
.client-sheet__chapter ul {
margin: 0; padding: 0;
list-style: none;
display: flex; flex-direction: column;
gap: 6px;
}
.client-sheet__chapter ul li {
position: relative;
padding-left: 18px;
font-size: 14px;
line-height: 1.55;
color: var(--ink-soft);
}
.client-sheet__chapter ul li::before {
content: "";
position: absolute;
left: 0; top: 9px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--royal, #005BFF);
}
.client-sheet__chapter--result p {
font-weight: 500;
color: var(--ink);
background: linear-gradient(90deg, rgba(0,91,255,0.06), transparent);
padding: 12px 14px;
border-left: 3px solid var(--royal, #005BFF);
border-radius: 0 6px 6px 0;
font-size: 14.5px;
}
@media (max-width: 560px) {
.client-sheet { padding: 20px 10px; }
.client-sheet__dialog { padding: 26px 16px 18px; border-radius: 14px; }
.client-sheet__close { top: 10px; right: 10px; width: 32px; height: 32px; }
.client-sheet__nav { width: 38px; height: 38px; }
.client-sheet__nav--prev { left: 8px; }
.client-sheet__nav--next { right: 8px; }
.client-sheet__thumb { width: 76px; height: 54px; }
.client-sheet__stage { min-height: 200px; }
.client-sheet__kpi { grid-template-columns: repeat(2, 1fr); }
.client-sheet__kpi li:nth-child(2n) { border-right: 0; }
.client-sheet__kpi li { padding: 10px 12px; }
.client-sheet__chapter { grid-template-columns: 26px 1fr; column-gap: 10px; padding: 14px 0; }
.client-sheet__chapter-num { font-size: 10px; }
}
.cp-client__name {
font-weight: 500;
font-size: 15px;
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1.1;
max-width: 100%;
overflow-wrap: anywhere;
}
.cp-client__name--serif {
font-family: 'Georgia', 'Times New Roman', serif;
font-style: italic;
font-weight: 400;
}
.cp-client__cat {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
max-width: 100%;
overflow-wrap: anywhere;
}
.cp-client__plats {
display: inline-flex; gap: 4px;
flex-wrap: wrap;
justify-content: center;
margin-top: 4px;
}
.cp-client__plats span {
font-family: var(--font-mono);
font-size: 9px;
padding: 2px 6px;
border-radius: var(--r-pill);
background: var(--line-soft);
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.cp-client[data-tone="dark"] { background: #0C0C0B; color: #F5F5F0; }
.cp-client[data-tone="dark"] .cp-client__name { color: #F5F5F0; }
.cp-client[data-tone="dark"] .cp-client__cat { color: rgba(245,245,240,0.55); }
.cp-client[data-tone="dark"] .cp-client__plats span { background: rgba(255,255,255,0.08); color: rgba(245,245,240,0.72); }
.cp-client[data-tone="dark"]:hover { background: #1a1a18; }
/* accent cards scattered across the grid */
.cp-client[data-tone="royal"] { background: var(--royal); color: #fff; }
.cp-client[data-tone="royal"] .cp-client__name,
.cp-client[data-tone="royal"] .cp-client__cat { color: #fff; }
.cp-client[data-tone="royal"] .cp-client__plats span { background: rgba(255,255,255,0.18); color: #fff; }
.cp-client[data-tone="cream"] { background: #F3E9CC; }
.cp-client[data-tone="sage"] { background: #E0E5D8; }
.cp-client[data-tone="rose"] { background: #F4E0D8; }
/* ════════════════════════════════════════════════════════════════
CP — Studio portfolio (photo / video)
════════════════════════════════════════════════════════════════ */
.cp-studio {
max-width: var(--container);
margin: 0 auto;
padding: 56px var(--pad-x) 56px;
border-top: 1px solid var(--line);
}
.cp-studio__head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 24px;
align-items: end;
margin-bottom: 28px;
}
.cp-studio__label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.04em;
}
.cp-studio__title {
grid-column: 1 / 3;
font-size: clamp(28px, 3.6vw, 48px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 500;
color: var(--ink);
margin: 0;
}
.cp-studio__title em {
font-style: normal;
color: var(--royal);
font-weight: 500;
}
.cp-studio__note {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.02em;
text-align: right;
}
.cp-studio__body {
display: grid;
grid-template-columns: minmax(0, 1.15fr) auto;
gap: 36px;
align-items: center;
padding: 32px;
border: 1px solid var(--line);
border-radius: 20px;
background: linear-gradient(135deg, #fafafa 0%, #f4f4f3 100%);
}
.cp-studio__lead {
margin: 0 0 18px;
font-size: 17px;
line-height: 1.5;
color: var(--ink-2, #2a2a2a);
max-width: 54ch;
grid-column: 1;
grid-row: 1;
}
.cp-studio__tags {
grid-column: 1;
grid-row: 2;
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cp-studio__tags li span {
display: inline-block;
padding: 6px 12px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.02em;
color: var(--ink);
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
}
.cp-studio__btn {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 22px;
background: var(--ink);
color: #fff;
border-radius: 14px;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.01em;
text-decoration: none;
transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 12px 32px -16px rgba(0,0,0,0.4);
white-space: nowrap;
}
.cp-studio__btn:hover {
background: #000;
transform: translateY(-1px);
box-shadow: 0 18px 40px -18px rgba(0,0,0,0.55);
}
.cp-studio__btn-icon {
display: inline-flex;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
background: #fc3f1d;
border-radius: 8px;
color: #fff;
}
.cp-studio__btn-arr {
color: rgba(255,255,255,0.7);
transition: transform 0.2s ease, color 0.2s ease;
}
.cp-studio__btn:hover .cp-studio__btn-arr {
color: #fff;
transform: translate(2px, -2px);
}
@media (max-width: 900px) {
.cp-studio { padding: 44px var(--pad-x) 44px; }
.cp-studio__head { grid-template-columns: 1fr; align-items: start; }
.cp-studio__title { grid-column: 1; }
.cp-studio__note { text-align: left; }
.cp-studio__body {
grid-template-columns: 1fr;
padding: 24px;
gap: 20px;
}
.cp-studio__lead { grid-row: 1; font-size: 16px; }
.cp-studio__tags { grid-row: 2; }
.cp-studio__btn { grid-column: 1; grid-row: 3; width: 100%; justify-content: center; }
}
/* ════════════════════════════════════════════════════════════════
CP — Testimonials
════════════════════════════════════════════════════════════════ */
.cp-reviews {
max-width: var(--container);
margin: 0 auto;
padding: 56px var(--pad-x) 56px;
border-top: 1px solid var(--line);
}
.cp-reviews__head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 24px;
align-items: end;
margin-bottom: 36px;
}
.cp-reviews__label { font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.cp-reviews__title {
grid-column: 1 / 3;
font-size: clamp(28px, 3.6vw, 48px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 500;
color: var(--ink);
}
.cp-reviews__title em { font-style: normal; color: var(--royal); font-weight: 500; }
/* Marquee · two infinite lanes */
.cp-reviews__marquee {
position: relative;
display: grid;
gap: 16px;
margin-bottom: 56px;
}
.cp-reviews__lane {
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cp-reviews__track {
display: flex;
gap: 16px;
width: max-content;
will-change: transform;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: var(--cp-marquee-dur, 72s);
padding: 6px 0; /* keep room for hover lift */
}
.cp-reviews__lane--left .cp-reviews__track { animation-name: cp-marquee-left; }
.cp-reviews__lane--right .cp-reviews__track { animation-name: cp-marquee-right; }
.cp-reviews__lane:hover .cp-reviews__track,
.cp-reviews__lane:focus-within .cp-reviews__track { animation-play-state: paused; }
@keyframes cp-marquee-left {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(calc(-50% - 8px), 0, 0); }
}
@keyframes cp-marquee-right {
from { transform: translate3d(calc(-50% - 8px), 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.cp-reviews__track { animation: none; }
}
.cp-review {
position: relative;
padding: 28px 24px 24px;
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--bg);
display: flex; flex-direction: column;
gap: 16px;
transition: transform 280ms var(--ease), border-color 280ms var(--ease), box-shadow 300ms var(--ease);
}
.cp-reviews__marquee .cp-review {
flex: 0 0 380px;
width: 380px;
}
.cp-review:hover {
transform: translateY(-3px);
border-color: var(--ink);
box-shadow: 0 18px 40px -24px rgba(10,10,10,0.28);
}
.cp-review__q {
font-size: 38px;
font-family: 'Georgia', serif;
line-height: 1;
color: var(--royal);
height: 14px;
}
.cp-review__text {
font-size: 15px;
line-height: 1.55;
color: var(--ink-soft);
flex: 1;
}
.cp-review__text strong { color: var(--ink); font-weight: 500; }
.cp-review__foot {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.cp-review__avatar {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--line-soft);
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink);
font-weight: 500;
}
.cp-review__author {
display: flex; flex-direction: column; gap: 1px;
min-width: 0;
}
.cp-review__author-name {
font-size: 13.5px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
}
.cp-review__author-role {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.02em;
}
.cp-review__brand {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
border-left: 1px solid var(--line);
padding-left: 12px;
}
/* ───── Real Avito reviews · stars + source badge + trust-bar ───── */
.cp-review__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: -2px;
}
.cp-review__stars {
display: inline-flex;
gap: 1.5px;
color: #f3a93f;
font-size: 14px;
line-height: 1;
letter-spacing: 0.5px;
}
.cp-review__source {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px 4px 7px;
border-radius: 999px;
background: #eaf6cb;
border: 1px solid #cee79e;
color: #4a7000;
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.05em;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
transition: background 200ms var(--ease, ease-out), color 200ms;
white-space: nowrap;
}
.cp-review__source:hover { background: #dceeb0; color: #2e4500; }
.cp-review__source-dot {
display: inline-block;
width: 5px; height: 5px;
border-radius: 50%;
background: #97cf26;
box-shadow: 0 0 0 2px rgba(151, 207, 38, 0.18);
}
.cp-reviews__trust {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding: 14px 22px;
margin: 0 0 28px;
border: 1px solid var(--line);
border-radius: 999px;
background: linear-gradient(135deg, #fbfbf8 0%, #f5f7fc 100%);
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--muted);
letter-spacing: 0.02em;
}
.cp-reviews__trust b {
color: var(--ink);
font-weight: 500;
letter-spacing: 0;
}
.cp-reviews__trust-score {
display: inline-flex;
align-items: center;
gap: 8px;
}
.cp-reviews__trust-stars {
color: #f3a93f;
font-size: 15px;
letter-spacing: 1px;
line-height: 1;
}
.cp-reviews__trust-sep {
display: inline-block;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--line);
flex-shrink: 0;
}
.cp-reviews__trust-link {
margin-left: auto;
color: var(--royal);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 500;
font-family: var(--font-mono);
}
.cp-reviews__trust-link:hover { text-decoration: underline; }
.cp-reviews__trust-link svg { transition: transform 220ms var(--ease, ease-out); }
.cp-reviews__trust-link:hover svg { transform: translateX(2px); }
@media (max-width: 720px) {
.cp-reviews__trust { font-size: 11.5px; padding: 12px 16px; gap: 10px; }
.cp-reviews__trust-link { margin-left: 0; width: 100%; justify-content: flex-start; }
}
/* Leave-a-review form */
.cp-reviews__form-wrap {
display: grid;
grid-template-columns: 0.8fr 1.4fr;
gap: 36px;
padding: 36px;
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
position: relative;
overflow: hidden;
}
.cp-reviews__form-wrap::before {
content: "";
position: absolute;
inset: -1px;
background: radial-gradient(ellipse 60% 80% at 0% 0%, rgba(0,91,255,0.06), transparent 60%);
pointer-events: none;
border-radius: inherit;
}
.cp-reviews__form-intro {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
}
.cp-reviews__form-label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.04em;
}
.cp-reviews__form-title {
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: 500;
color: var(--ink);
margin: 0;
}
.cp-reviews__form-title em {
font-style: normal;
color: var(--royal);
font-weight: 500;
}
.cp-reviews__form-lead {
font-size: 14px;
line-height: 1.55;
color: var(--muted);
max-width: 320px;
margin: 0;
}
.cp-reviews__form-perks {
margin-top: 6px;
display: flex;
flex-direction: column;
gap: 6px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--muted);
letter-spacing: 0.02em;
}
.cp-reviews__form-perks li { display: flex; gap: 8px; }
.cp-reviews__form-perks li span { color: var(--royal); }
.cp-reviews__form {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
align-content: start;
}
.cp-reviews__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cp-reviews__field { display: flex; flex-direction: column; gap: 6px; }
.cp-reviews__field > span {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.cp-reviews__field input,
.cp-reviews__field textarea {
font-family: var(--font-sans);
font-size: 14px;
color: var(--ink);
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: 12px 14px;
outline: none;
transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
width: 100%;
}
.cp-reviews__field textarea {
resize: vertical;
min-height: 96px;
line-height: 1.5;
font-family: var(--font-sans);
}
.cp-reviews__field input::placeholder,
.cp-reviews__field textarea::placeholder { color: var(--mute-2); }
.cp-reviews__field input:focus,
.cp-reviews__field textarea:focus {
border-color: var(--ink);
box-shadow: 0 0 0 3px rgba(0,91,255,0.10);
}
.cp-reviews__field--text { grid-column: 1 / -1; }
.cp-reviews__form-row {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 22px;
margin-top: 4px;
}
.cp-reviews__rating { display: flex; align-items: center; gap: 12px; }
.cp-reviews__rating-label {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.cp-reviews__stars { display: flex; gap: 2px; }
.cp-reviews__star {
font-size: 22px;
line-height: 1;
color: var(--line);
padding: 4px 2px;
transition: color 180ms var(--ease), transform 160ms var(--ease);
}
.cp-reviews__star.is-active { color: #FFBD17; }
.cp-reviews__star:hover { transform: scale(1.15); }
.cp-reviews__star:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; border-radius: 4px; }
.cp-reviews__agree {
display: flex; align-items: center; gap: 10px;
font-size: 13px; color: var(--muted); cursor: pointer;
user-select: none;
}
.cp-reviews__agree input { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; }
.cp-reviews__submit {
margin-left: auto;
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 22px;
background: var(--ink); color: #fff;
border-radius: var(--r-pill);
font-size: 14px; font-weight: 500;
transition: background 220ms var(--ease), transform 200ms var(--ease), box-shadow 240ms var(--ease);
}
.cp-reviews__submit:hover {
background: var(--royal);
transform: translateY(-1px);
box-shadow: 0 14px 30px -18px rgba(0,91,255,0.55);
}
.cp-reviews__submit:disabled { opacity: 0.6; cursor: progress; transform: none; box-shadow: none; }
.cp-reviews__submit svg { transition: transform 200ms var(--ease); }
.cp-reviews__submit:hover svg { transform: translateX(2px); }
.cp-reviews__form-success,
.cp-reviews__form-error {
grid-column: 1 / -1;
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0.02em;
margin: 0;
padding: 10px 14px;
border-radius: var(--r-sm);
}
.cp-reviews__form-success {
color: #0E8B5F;
background: rgba(16,185,129,0.08);
border: 1px solid rgba(16,185,129,0.22);
}
.cp-reviews__form-error {
color: #B8252A;
background: rgba(184,37,42,0.06);
border: 1px solid rgba(184,37,42,0.22);
}
@media (max-width: 880px) {
.cp-reviews__marquee { gap: 14px; margin-bottom: 40px; }
.cp-reviews__marquee .cp-review { flex-basis: 290px; width: 290px; padding: 22px 20px; }
.cp-reviews__form-wrap { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
.cp-reviews__form { grid-template-columns: 1fr; }
.cp-reviews__submit { width: 100%; justify-content: center; margin-left: 0; }
.cp-reviews__form-row { gap: 16px; }
}
/* ════════════════════════════════════════════════════════════════
CASES PAGE — Motion System
Hero → Cases → Clients → Studio → Reviews → Case Sheet
════════════════════════════════════════════════════════════════ */
body.cases-body {
--cp-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
--cp-motion-ease-soft: cubic-bezier(0.18, 0.88, 0.32, 1);
--cp-motion-distance: 46px;
--cp-motion-blur: 14px;
}
@keyframes cp-card-sheen {
0% {
opacity: 0;
transform: translate3d(-135%, 0, 0);
}
18% { opacity: 0.24; }
100% {
opacity: 0;
transform: translate3d(135%, 0, 0);
}
}
@keyframes cp-ambient-drift {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(0, -8px, 0) scale(1.04); }
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-hero__eyebrow,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-hero__breadcrumbs,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-hero__title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__media,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__meta,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__desc,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__stats,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__stats strong,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__foot,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-clients__label,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-clients__title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-clients__note,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-client,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio__label,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio__title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio__note,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio__body,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio__lead,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio__tags li,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio__btn,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews__label,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews__title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-review,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-review__q,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-review__text,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-review__foot,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__backdrop,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__dialog,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__eyebrow,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__wordmark,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__serif,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__brand-sub,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__kpi > div,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__block,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__foot-title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__shop {
will-change: transform, opacity, filter;
backface-visibility: hidden;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-hero__eyebrow,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-hero__breadcrumbs {
opacity: 0;
filter: blur(8px);
transform: translate3d(0, 18px, 0);
transition:
transform 760ms var(--cp-motion-ease),
opacity 560ms ease,
filter 560ms ease;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-hero__eyebrow { transition-delay: 40ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-hero__breadcrumbs { transition-delay: 120ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-hero__title {
opacity: 0;
filter: blur(12px);
transform: translate3d(0, 34px, 0) scale(0.985);
transition:
transform 900ms var(--cp-motion-ease),
opacity 680ms ease,
filter 680ms ease;
transition-delay: 160ms;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body.cp-hero-entered .cp-hero__eyebrow,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body.cp-hero-entered .cp-hero__breadcrumbs,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body.cp-hero-entered .cp-hero__title {
opacity: 1;
filter: blur(0);
transform: none;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case {
position: relative;
animation: none !important;
opacity: 0;
filter: blur(18px);
transform: translate3d(var(--cp-card-shift, 0px), calc(var(--cp-motion-distance) + 8px), 0) scale(0.972);
transform-origin: 50% 100%;
transition:
transform 980ms var(--cp-motion-ease),
opacity 720ms ease,
filter 760ms ease,
box-shadow 560ms var(--cp-motion-ease);
transition-delay: calc(var(--cp-card-order, 0) * 58ms);
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(118deg,
transparent 14%,
rgba(255, 255, 255, 0.84) 24%,
rgba(255, 255, 255, 0.18) 31%,
transparent 43%);
opacity: 0;
transform: translate3d(-135%, 0, 0);
mix-blend-mode: screen;
pointer-events: none;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__media,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__meta,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__desc,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__stats,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__foot,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__stats strong {
opacity: 0;
filter: blur(10px);
transition:
transform 760ms var(--cp-motion-ease-soft),
opacity 560ms ease,
filter 560ms ease;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__media {
transform: translate3d(0, 20px, 0) scale(0.985);
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__meta,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__desc,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__stats,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__foot {
transform: translate3d(0, 18px, 0);
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case__stats strong {
transform: translate3d(0, 12px, 0) scale(0.92);
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case.is-visible {
opacity: 1;
filter: blur(0);
transform: translate3d(0, 0, 0) scale(1);
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case.is-visible::after {
animation: cp-card-sheen 1.2s var(--cp-motion-ease) calc(var(--cp-card-order, 0) * 58ms + 120ms) both;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case.is-visible .case__media,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case.is-visible .case__meta,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case.is-visible .case__title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case.is-visible .case__desc,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case.is-visible .case__stats,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case.is-visible .case__foot,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case.is-visible .case__stats strong {
opacity: 1;
filter: blur(0);
transform: none;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case.is-visible .case__media { transition-delay: 100ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case.is-visible .case__meta { transition-delay: 180ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case.is-visible .case__title { transition-delay: 240ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case.is-visible .case__desc { transition-delay: 300ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case.is-visible .case__stats { transition-delay: 360ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case.is-visible .case__stats strong { transition-delay: 410ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case.is-visible .case__foot { transition-delay: 430ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case.is-visible:hover,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case.is-visible.is-peek {
transform: translate3d(0, -8px, 0) scale(1.012);
box-shadow: 0 28px 52px -34px rgba(10, 10, 10, 0.28);
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-clients__label,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-clients__title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-clients__note,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio__label,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio__title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio__note,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews__label,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews__title {
opacity: 0;
filter: blur(10px);
transform: translate3d(0, 30px, 0);
transition:
transform 820ms var(--cp-motion-ease),
opacity 620ms ease,
filter 620ms ease;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-clients.is-visible .cp-clients__label,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-clients.is-visible .cp-clients__title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-clients.is-visible .cp-clients__note,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio.is-visible .cp-studio__label,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio.is-visible .cp-studio__title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio.is-visible .cp-studio__note,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews.is-visible .cp-reviews__label,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews.is-visible .cp-reviews__title {
opacity: 1;
filter: blur(0);
transform: none;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-clients.is-visible .cp-clients__label,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio.is-visible .cp-studio__label,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews.is-visible .cp-reviews__label { transition-delay: 40ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-clients.is-visible .cp-clients__title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio.is-visible .cp-studio__title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews.is-visible .cp-reviews__title { transition-delay: 120ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-clients.is-visible .cp-clients__note,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio.is-visible .cp-studio__note { transition-delay: 220ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-client {
opacity: 0;
filter: blur(10px);
transform: translate3d(0, 28px, 0) scale(0.965);
transition:
transform 760ms var(--cp-motion-ease-soft),
opacity 560ms ease,
filter 560ms ease,
background 280ms var(--ease),
box-shadow 320ms var(--ease);
transition-delay: calc(var(--cp-client-order, 0) * 16ms + 120ms);
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-client.is-visible {
opacity: 1;
filter: blur(0);
transform: none;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-client.is-visible:hover {
transform: translate3d(0, -4px, 0) scale(1.024);
box-shadow: 0 18px 32px -26px rgba(10, 10, 10, 0.34);
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio__body {
position: relative;
overflow: hidden;
opacity: 0;
filter: blur(14px);
transform: translate3d(0, 36px, 0) scale(0.988);
transition:
transform 900ms var(--cp-motion-ease),
opacity 680ms ease,
filter 680ms ease;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio__body::after {
content: "";
position: absolute;
inset: auto -12% -34% 42%;
height: 52%;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 91, 255, 0.12) 0%, rgba(0, 91, 255, 0) 72%);
opacity: 0;
filter: blur(26px);
pointer-events: none;
transition: opacity 900ms ease;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio__lead,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio__tags li,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio__btn {
opacity: 0;
filter: blur(9px);
transform: translate3d(0, 20px, 0);
transition:
transform 760ms var(--cp-motion-ease-soft),
opacity 540ms ease,
filter 540ms ease;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio__tags li {
transition-delay: calc(var(--cp-studio-tag-order, 0) * 48ms + 240ms);
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio.is-visible .cp-studio__body,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio.is-visible .cp-studio__lead,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio.is-visible .cp-studio__tags li,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio.is-visible .cp-studio__btn {
opacity: 1;
filter: blur(0);
transform: none;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio.is-visible .cp-studio__body::after {
opacity: 1;
animation: cp-ambient-drift 9s ease-in-out 900ms infinite;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio.is-visible .cp-studio__body { transition-delay: 80ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio.is-visible .cp-studio__lead { transition-delay: 180ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-studio.is-visible .cp-studio__btn { transition-delay: 430ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews__title { transition-delay: 100ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-review {
opacity: 0;
filter: blur(12px);
transform: translate3d(var(--cp-review-shift, 0px), 34px, 0) scale(0.972);
transition:
transform 860ms var(--cp-motion-ease),
opacity 620ms ease,
filter 620ms ease,
box-shadow 320ms var(--ease),
border-color 320ms var(--ease);
transition-delay: calc(var(--cp-review-order, 0) * 70ms + 90ms);
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-review__q,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-review__text,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-review__foot {
opacity: 0;
filter: blur(8px);
transform: translate3d(0, 16px, 0);
transition:
transform 680ms var(--cp-motion-ease-soft),
opacity 520ms ease,
filter 520ms ease;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-review.is-visible,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-review.is-visible .cp-review__q,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-review.is-visible .cp-review__text,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-review.is-visible .cp-review__foot {
opacity: 1;
filter: blur(0);
transform: none;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-review.is-visible .cp-review__q { transition-delay: 130ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-review.is-visible .cp-review__text { transition-delay: 220ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-review.is-visible .cp-review__foot { transition-delay: 320ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-review.is-visible:hover {
transform: translate3d(0, -6px, 0) scale(1.01);
}
/* Stats band · marquee · form · awards · process · faq enter as units */
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-stats,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-awards,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-faq {
opacity: 0;
transform: translate3d(0, 24px, 0);
transition: transform 760ms var(--cp-motion-ease), opacity 580ms ease;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-stats.is-visible,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-awards.is-visible,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-faq.is-visible {
opacity: 1;
transform: none;
}
/* Marquee · cards inside don't get per-card stagger reveal — the lane reveals as a whole */
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews__marquee .cp-review,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews__marquee .cp-review .cp-review__q,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews__marquee .cp-review .cp-review__text,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews__marquee .cp-review .cp-review__foot {
opacity: 1;
filter: none;
transform: none;
transition: transform 280ms var(--ease), border-color 280ms var(--ease), box-shadow 300ms var(--ease);
transition-delay: 0ms;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews__marquee .cp-review:hover {
transform: translate3d(0, -4px, 0);
}
/* Marquee + form wrap: fade-in as a single unit when the section enters */
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews__marquee,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews__form-wrap {
opacity: 0;
transform: translate3d(0, 24px, 0);
transition: transform 760ms var(--cp-motion-ease), opacity 580ms ease;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews__marquee.is-visible,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews__form-wrap.is-visible {
opacity: 1;
transform: none;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews__marquee.is-visible { transition-delay: 200ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-reviews__form-wrap.is-visible { transition-delay: 80ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__backdrop {
opacity: 0;
transition:
opacity 360ms ease,
backdrop-filter 480ms var(--cp-motion-ease);
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet[data-open] .case-sheet__backdrop {
opacity: 1;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__dialog {
opacity: 0;
transform: translateY(28px) scale(0.978);
transition:
transform 520ms var(--cp-motion-ease),
opacity 360ms ease;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet[data-open] .case-sheet__dialog {
opacity: 1;
transform: translateY(0) scale(1);
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__eyebrow,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__wordmark,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__serif,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__brand-sub,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__kpi > div,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__block,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__foot-title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__shop {
opacity: 0;
filter: blur(10px);
transform: translate3d(0, 22px, 0);
transition:
transform 760ms var(--cp-motion-ease-soft),
opacity 560ms ease,
filter 560ms ease;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__eyebrow,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__wordmark,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__serif,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__brand-sub,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__kpi > div,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__block,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__foot-title,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__shop {
opacity: 1;
filter: blur(0);
transform: none;
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__eyebrow { transition-delay: 80ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__wordmark,
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__serif { transition-delay: 140ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__brand-sub { transition-delay: 210ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__title { transition-delay: 260ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__kpi > div:nth-child(1) { transition-delay: 320ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__kpi > div:nth-child(2) { transition-delay: 380ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__kpi > div:nth-child(3) { transition-delay: 440ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__kpi > div:nth-child(4) { transition-delay: 500ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__body .case-sheet__block:nth-of-type(1) { transition-delay: 360ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__body .case-sheet__block:nth-of-type(2) { transition-delay: 460ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__body .case-sheet__block:nth-of-type(3) { transition-delay: 560ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__foot-title { transition-delay: 560ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__shops .case-sheet__shop:nth-child(1) { transition-delay: 620ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__shops .case-sheet__shop:nth-child(2) { transition-delay: 690ms; }
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .case-sheet__panel.is-active .case-sheet__shops .case-sheet__shop:nth-child(3) { transition-delay: 760ms; }
@media (max-width: 780px) {
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-grid .case {
transform: translate3d(0, 34px, 0) scale(0.982);
}
html.cases-motion-js:not(.cases-motion-reduce) body.cases-body .cp-review {
transform: translate3d(0, 28px, 0) scale(0.978);
}
}
@media (prefers-reduced-motion: reduce) {
.cases-body .cp-hero__eyebrow,
.cases-body .cp-hero__breadcrumbs,
.cases-body .cp-hero__title,
.cases-body .cp-grid .case,
.cases-body .cp-grid .case__media,
.cases-body .cp-grid .case__meta,
.cases-body .cp-grid .case__title,
.cases-body .cp-grid .case__desc,
.cases-body .cp-grid .case__stats,
.cases-body .cp-grid .case__stats strong,
.cases-body .cp-grid .case__foot,
.cases-body .cp-clients__label,
.cases-body .cp-clients__title,
.cases-body .cp-clients__note,
.cases-body .cp-client,
.cases-body .cp-studio__label,
.cases-body .cp-studio__title,
.cases-body .cp-studio__note,
.cases-body .cp-studio__body,
.cases-body .cp-studio__lead,
.cases-body .cp-studio__tags li,
.cases-body .cp-studio__btn,
.cases-body .cp-reviews__label,
.cases-body .cp-reviews__title,
.cases-body .cp-review,
.cases-body .cp-review__q,
.cases-body .cp-review__text,
.cases-body .cp-review__foot,
.cases-body .case-sheet__backdrop,
.cases-body .case-sheet__dialog,
.cases-body .case-sheet__eyebrow,
.cases-body .case-sheet__wordmark,
.cases-body .case-sheet__serif,
.cases-body .case-sheet__brand-sub,
.cases-body .case-sheet__title,
.cases-body .case-sheet__kpi > div,
.cases-body .case-sheet__block,
.cases-body .case-sheet__foot-title,
.cases-body .case-sheet__shop {
opacity: 1 !important;
filter: none !important;
transform: none !important;
animation: none !important;
transition: none !important;
}
.cases-body .cp-grid .case::after,
.cases-body .cp-studio__body::after {
animation: none !important;
transition: none !important;
}
}
/* ════════════════════════════════════════════════════════════════
CP — Showcase banner / CTA
════════════════════════════════════════════════════════════════ */
.cp-banner {
max-width: var(--container);
margin: 0 auto 56px;
padding: 0 var(--pad-x);
}
.cp-banner__inner {
position: relative;
padding: clamp(48px, 6vw, 80px) clamp(32px, 5vw, 72px);
background: #0C0C0B;
color: #F5F5F0;
border-radius: var(--r-xl);
overflow: hidden;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 40px;
align-items: center;
}
.cp-banner__inner::before {
content: "";
position: absolute; right: -120px; bottom: -140px;
width: 420px; height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,91,255,0.48) 0%, rgba(0,91,255,0) 70%);
pointer-events: none;
}
.cp-banner__inner::after {
content: "";
position: absolute; left: -80px; top: -120px;
width: 360px; height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,189,23,0.22) 0%, rgba(255,189,23,0) 70%);
pointer-events: none;
}
.cp-banner__text {
position: relative; z-index: 1;
display: flex; flex-direction: column; gap: 18px;
max-width: 620px;
}
.cp-banner__eyebrow {
font-family: var(--font-mono);
font-size: 12px;
color: rgba(245,245,240,0.6);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.cp-banner__title {
font-size: clamp(30px, 4vw, 56px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 500;
color: #F5F5F0;
}
.cp-banner__title em {
font-style: normal;
font-family: 'Georgia', serif;
color: #FFBD17;
font-weight: 400;
}
.cp-banner__lead {
font-size: 16px;
line-height: 1.55;
color: rgba(245,245,240,0.72);
max-width: 480px;
}
.cp-banner__actions {
display: flex; flex-wrap: wrap; gap: 12px;
margin-top: 8px;
}
.cp-banner__btn {
font-family: var(--font-sans);
font-size: 14.5px;
font-weight: 500;
letter-spacing: -0.005em;
padding: 14px 22px;
border-radius: var(--r-pill);
display: inline-flex; align-items: center; gap: 10px;
transition: transform 220ms var(--ease), background 220ms var(--ease), color 220ms var(--ease);
cursor: pointer;
}
.cp-banner__btn--primary {
background: #fff; color: var(--ink);
}
.cp-banner__btn--primary:hover { transform: translateY(-2px); background: #FFBD17; }
.cp-banner__btn--ghost {
background: transparent;
color: rgba(245,245,240,0.8);
border: 1px solid rgba(245,245,240,0.2);
}
.cp-banner__btn--ghost:hover { color: #F5F5F0; border-color: rgba(245,245,240,0.5); }
.cp-banner__stats {
position: relative; z-index: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
border: 1px solid rgba(245,245,240,0.14);
border-radius: var(--r-md);
overflow: hidden;
}
.cp-banner__stat {
padding: 18px 20px;
border-right: 1px solid rgba(245,245,240,0.1);
border-bottom: 1px solid rgba(245,245,240,0.1);
display: flex; flex-direction: column; gap: 4px;
}
.cp-banner__stat:nth-child(2n) { border-right: 0; }
.cp-banner__stat:nth-child(n+3) { border-bottom: 0; }
.cp-banner__stat strong {
font-size: 24px;
font-weight: 500;
letter-spacing: -0.02em;
color: #F5F5F0;
}
.cp-banner__stat strong em {
font-style: normal;
font-size: 13px;
color: rgba(245,245,240,0.5);
font-family: var(--font-mono);
letter-spacing: 0;
font-weight: 400;
}
.cp-banner__stat span {
font-family: var(--font-mono);
font-size: 11px;
color: rgba(245,245,240,0.55);
letter-spacing: 0.02em;
}
/* ── Responsive tweaks for cases page ── */
@media (max-width: 1100px) {
.cp-hero__intro { grid-template-columns: 1fr; gap: 28px; }
.cp-hero__stats { grid-template-columns: repeat(4, 1fr); }
.cp-clients__grid { grid-template-columns: repeat(4, 1fr); }
.cp-reviews__grid { grid-template-columns: repeat(2, 1fr); }
.cp-banner__inner { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
.cp-hero { padding: 44px var(--pad-x) 28px; }
.cp-hero__head { grid-template-columns: 1fr; align-items: start; }
.cp-hero__stats { grid-template-columns: repeat(2, 1fr); }
.cp-filter { flex-direction: column; align-items: flex-start; gap: 10px; }
.cp-grid { grid-template-columns: 1fr; gap: 18px; }
.cp-clients__grid { grid-template-columns: repeat(2, 1fr); }
.cp-clients__head { grid-template-columns: 1fr; }
.cp-clients__title { grid-column: 1; }
.cp-reviews__grid { grid-template-columns: 1fr; }
.cp-reviews__head { grid-template-columns: 1fr; }
.cp-reviews__title { grid-column: 1; }
.cp-banner__inner { padding: 40px 28px; border-radius: var(--r-lg); }
.cp-banner__stats { grid-template-columns: 1fr; }
.cp-banner__stat { border-right: 0; border-bottom: 1px solid rgba(245,245,240,0.1); }
}
/* ════════════════════════════════════════════════════════════════
NEW BRAND CARDS · MOYÖRY + BOS · cinematic cover (v3)
Реальный скрин витрины как blurred background + бренд-оверлей.
════════════════════════════════════════════════════════════════ */
/* ── MOYÖRY ── pastel blush parfum editorial ── */
.case__media--moyoti {
background:
radial-gradient(130% 90% at 50% 0%, #FFF7EE 0%, #FDECDB 45%, #F5D8C0 100%);
overflow: hidden;
position: relative;
}
.case__media--moyoti::before {
content: "";
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(185, 127, 90, 0.02) 0 1px, transparent 1px 14px),
radial-gradient(60% 50% at 20% 85%, rgba(247, 206, 176, 0.24) 0%, transparent 70%);
mix-blend-mode: multiply;
pointer-events: none;
}
.case__media--moyoti::after {
content: "";
position: absolute; right: -80px; bottom: -80px;
width: 320px; height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 250, 240, 0.7) 0%, transparent 70%);
pointer-events: none;
}
.moyo-corner {
position: absolute;
width: 12px; height: 12px;
border: 1px solid rgba(138, 94, 62, 0.32);
pointer-events: none;
z-index: 2;
}
.moyo-corner--tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.moyo-corner--tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.moyo-corner--bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.moyo-corner--br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.moyo-inner {
position: absolute; inset: 0;
padding: 18px 24px 16px;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 10px;
color: #5A3624;
z-index: 1;
}
.moyo-top {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(90, 54, 36, 0.68);
}
.moyo-eyebrow {
display: inline-flex; gap: 8px; align-items: center;
color: rgba(90, 54, 36, 0.72);
}
.moyo-eyebrow__dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #B97F5A;
box-shadow: 0 0 0 2px rgba(185, 127, 90, 0.22);
}
.moyo-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
border: 1px solid rgba(90, 54, 36, 0.28);
border-radius: var(--r-pill);
color: #5A3624;
font-size: 10px;
background: rgba(255, 247, 237, 0.55);
}
.moyo-badge__dot {
width: 6px; height: 6px; border-radius: 50%;
background: #E2A27A;
box-shadow: 0 0 0 2px rgba(226, 162, 122, 0.22);
}
.moyo-stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
padding: 2px 0;
overflow: hidden;
}
.moyo-chip {
position: absolute;
display: flex; flex-direction: column;
gap: 2px;
font-family: 'Georgia', 'Times New Roman', serif;
color: #9E6F4A;
opacity: 0.82;
transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.moyo-chip__num {
font-style: italic;
font-size: clamp(13px, 1.3vw, 17px);
color: #8A5E3E;
letter-spacing: 0.02em;
}
.moyo-chip__label {
font-family: 'IBM Plex Mono', monospace;
font-size: clamp(8px, 0.75vw, 10px);
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(158, 111, 74, 0.65);
}
.moyo-chip--left {
top: 50%;
left: 4%;
transform: translateY(-50%);
text-align: left;
}
.moyo-chip--right {
top: 50%;
right: 4%;
transform: translateY(-50%);
text-align: right;
}
.moyo-chip--right .moyo-chip__num,
.moyo-chip--right .moyo-chip__label { text-align: right; }
.case--moyoti:hover .moyo-chip--left { transform: translate(-4px, -50%); opacity: 1; }
.case--moyoti:hover .moyo-chip--right { transform: translate(4px, -50%); opacity: 1; }
.moyo-bottle {
position: relative;
z-index: 2;
height: 96%;
max-width: 48%;
aspect-ratio: 200 / 280;
transition: transform 560ms var(--ease), filter 560ms var(--ease);
filter: drop-shadow(0 16px 26px rgba(158, 111, 74, 0.26));
}
.moyo-bottle svg {
width: 100%; height: 100%; display: block;
}
.case--moyoti:hover .moyo-bottle {
transform: translateY(-4px) rotate(-0.8deg);
filter: drop-shadow(0 22px 32px rgba(158, 111, 74, 0.3));
}
.case--moyoti:hover .moyo-bottle {
transform: translateY(-4px) rotate(-1deg);
filter: drop-shadow(0 20px 28px rgba(138, 94, 62, 0.32));
}
.moyo-kpi {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
padding-top: 10px;
border-top: 1px solid rgba(90, 54, 36, 0.2);
}
.moyo-kpi > div {
display: flex; flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.moyo-kpi strong {
font-size: clamp(16px, 1.9vw, 22px);
font-weight: 500;
letter-spacing: -0.02em;
color: #4A2818;
font-family: 'Geist', sans-serif;
font-feature-settings: 'tnum';
}
.moyo-kpi span {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(90, 54, 36, 0.55);
}
/* ── BOS ── pastel ivory атлье, пара мужская+женская обувь ── */
.case__media--bos {
background:
radial-gradient(120% 90% at 30% 0%, #FFF8E8 0%, #FBEFD2 55%, #F2DDAF 100%);
overflow: hidden;
position: relative;
}
.case__media--bos::before {
content: "";
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(138, 90, 46, 0.022) 0 1px, transparent 1px 14px),
repeating-linear-gradient(45deg, rgba(138, 90, 46, 0.018) 0 1px, transparent 1px 12px);
mix-blend-mode: multiply;
pointer-events: none;
}
.case__media--bos::after {
content: "";
position: absolute; left: -80px; top: -80px;
width: 320px; height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 252, 240, 0.75) 0%, transparent 70%);
pointer-events: none;
}
.bos-corner {
position: absolute;
width: 12px; height: 12px;
border: 1px solid rgba(58, 36, 16, 0.32);
pointer-events: none;
z-index: 2;
}
.bos-corner--tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.bos-corner--tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.bos-corner--bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.bos-corner--br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.bos-inner {
position: absolute; inset: 0;
padding: 20px 26px 18px;
display: grid;
grid-template-rows: auto 1fr auto auto;
gap: 8px;
color: #3A2410;
z-index: 1;
}
.bos-top {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(58, 36, 16, 0.62);
}
.bos-top__brand {
display: inline-flex; gap: 8px; align-items: center;
color: #3A2410;
font-weight: 500;
}
.bos-top__dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #8A5A2E;
box-shadow: 0 0 0 2px rgba(138, 90, 46, 0.22);
}
.bos-top__stamp {
padding: 3px 10px;
border: 1px solid rgba(58, 36, 16, 0.28);
border-radius: 2px;
font-family: 'Georgia', 'Times New Roman', serif;
font-style: italic;
text-transform: none;
letter-spacing: 0.01em;
font-size: 11px;
color: #3A2410;
background: rgba(255, 248, 225, 0.4);
}
/* Stage: him-shoe · centered wordmark · her-shoe */
.bos-stage {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
justify-items: center;
gap: clamp(8px, 1.5vw, 22px);
padding: 4px 0 2px;
min-height: 0;
}
.bos-shoe {
width: 100%;
max-width: clamp(130px, 18vw, 190px);
height: auto;
aspect-ratio: 170 / 120;
transition: transform 520ms var(--ease), filter 520ms var(--ease);
filter: drop-shadow(0 10px 16px rgba(58, 24, 9, 0.22));
}
.bos-shoe--him { justify-self: end; }
.bos-shoe--her { justify-self: start; }
.case--bos:hover .bos-shoe--him { transform: translate(-3px, -2px) rotate(-0.8deg); }
.case--bos:hover .bos-shoe--her { transform: translate(3px, -2px) rotate(0.8deg); }
.bos-mark {
display: flex; flex-direction: column; align-items: center;
gap: 6px;
}
.bos-wordmark {
display: flex; align-items: baseline;
gap: clamp(4px, 1vw, 12px);
font-weight: 500;
letter-spacing: -0.04em;
font-size: clamp(44px, 6.4vw, 72px);
line-height: 0.86;
color: #3A2410;
}
.bos-wordmark span {
display: inline-block;
transition: transform 320ms var(--ease);
}
.case--bos:hover .bos-wordmark span:nth-child(1) { transform: translateY(-3px); }
.case--bos:hover .bos-wordmark span:nth-child(2) { transform: translateY(2px); }
.case--bos:hover .bos-wordmark span:nth-child(3) { transform: translateY(-3px); }
.bos-subtitle {
display: flex; align-items: center; justify-content: center;
gap: 10px;
font-family: 'Georgia', 'Times New Roman', serif;
font-style: italic;
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(58, 36, 16, 0.7);
white-space: nowrap;
}
.bos-subtitle__line {
width: 24px; height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(58, 36, 16, 0.55) 50%, transparent 100%);
}
.bos-sizes {
display: flex; justify-content: center; align-items: center;
gap: 8px;
padding: 8px 0;
border-top: 1px dashed rgba(58, 36, 16, 0.28);
border-bottom: 1px dashed rgba(58, 36, 16, 0.28);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.05em;
color: rgba(58, 36, 16, 0.75);
}
.bos-sizes__label {
color: rgba(58, 36, 16, 0.5);
font-family: 'Georgia', serif;
font-style: italic;
letter-spacing: 0;
margin-right: 4px;
}
.bos-sizes i {
display: inline-block;
width: 3px; height: 3px;
border-radius: 50%;
background: rgba(58, 36, 16, 0.32);
}
.bos-sizes span:nth-of-type(2),
.bos-sizes span:nth-last-of-type(1) { color: #3A2410; font-weight: 500; }
.bos-bot {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(58, 36, 16, 0.6);
}
.bos-cats { letter-spacing: 0.14em; }
.bos-kpi {
display: inline-flex; gap: 6px; align-items: baseline;
color: rgba(58, 36, 16, 0.55);
}
.bos-kpi strong {
color: #3A2410;
font-family: var(--font-mono);
font-weight: 600;
font-size: 12px;
letter-spacing: 0;
}
@media (max-width: 780px) {
.bos-stage { gap: 4px; }
.bos-shoe { max-width: 120px; }
.bos-wordmark { font-size: clamp(36px, 9vw, 56px); gap: 6px; }
.bos-subtitle { font-size: 10px; gap: 6px; }
.bos-subtitle__line { width: 16px; }
}
@media (max-width: 600px) {
.moyo-inner, .bos-inner { padding: 16px 18px 14px; }
.moyo-kpi { gap: 8px; padding-top: 6px; }
.moyo-kpi strong { font-size: 16px; }
.moyo-kpi span { font-size: 9px; }
.moyo-bottle { width: 56px; }
.bos-shoe { max-width: 100px; }
.bos-wordmark { font-size: clamp(30px, 10vw, 48px); gap: 4px; }
.bos-subtitle { display: none; }
.bos-sizes { font-size: 10px; gap: 6px; }
.bos-sizes__label { display: none; }
.bos-corner { width: 10px; height: 10px; }
}
/* ============================================================
BLOG PAGE
============================================================ */
.page-blog {
background: var(--bg);
--blog-lime: #D9FF00;
--blog-pink: #FFD7F7;
--blog-mint: #DFF4E8;
--blog-sky: #D9E7FF;
--blog-warm: #F3E3B3;
--blog-panel: #F7F7F3;
}
.page-blog .nav__item[aria-current="page"] {
background: var(--ink);
color: #fff;
}
.blog-shell {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--pad-x);
}
.blog-hero {
padding: clamp(42px, 6vw, 76px) 0 clamp(40px, 5.5vw, 68px);
border-bottom: 1px solid var(--line);
background:
linear-gradient(180deg, #fff 0%, #fff 58%, #FAFAF7 100%);
}
.blog-crumbs {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: clamp(30px, 5vw, 58px);
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
}
.blog-crumbs a {
border-bottom: 1px dashed currentColor;
padding-bottom: 1px;
}
.blog-crumbs a:hover { color: var(--ink); }
.blog-hero__kicker,
.blog-section-head > span,
.blog-cta__label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.blog-hero__kicker {
margin-bottom: 18px;
}
.blog-hero__title {
max-width: 940px;
font-size: clamp(40px, 5.8vw, 78px);
line-height: 1;
font-weight: 500;
letter-spacing: 0;
text-wrap: balance;
}
.blog-hero__bottom {
display: grid;
grid-template-columns: minmax(0, 580px) minmax(300px, 410px);
gap: clamp(28px, 6vw, 74px);
align-items: stretch;
margin-top: clamp(28px, 5vw, 48px);
}
.blog-hero__bottom p {
align-self: end;
max-width: 620px;
font-size: clamp(17px, 1.6vw, 22px);
line-height: 1.35;
color: var(--ink-soft);
}
.blog-hero__deck {
min-height: 210px;
display: grid;
align-content: space-between;
gap: 18px;
padding: 18px;
border: 1px solid var(--line);
border-radius: 8px;
background:
linear-gradient(135deg, rgba(217,255,0,0.22) 0%, rgba(217,255,0,0) 46%),
linear-gradient(315deg, rgba(0,91,255,0.10) 0%, rgba(0,91,255,0) 50%),
#fff;
}
.blog-hero__deck-head {
display: flex;
justify-content: space-between;
gap: 18px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.blog-hero__deck-head strong {
color: var(--ink);
font-weight: 500;
}
.blog-hero__deck-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.blog-hero__deck-grid span {
min-height: 48px;
display: grid;
place-items: center;
border: 1px solid rgba(10,10,10,0.08);
border-radius: 6px;
background: rgba(255,255,255,0.72);
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-soft);
}
.blog-hero__deck-grid span:nth-child(2),
.blog-hero__deck-grid span:nth-child(5) {
background: var(--ink);
color: #fff;
}
.blog-hero__deck-line {
display: grid;
gap: 8px;
}
.blog-hero__deck-line span {
height: 6px;
width: var(--w);
border-radius: var(--r-pill);
background: var(--ink);
}
.blog-topics a,
.blog-lead__theses span {
display: inline-flex;
align-items: center;
min-height: 34px;
border: 1px solid var(--line);
border-radius: var(--r-pill);
padding: 7px 12px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
background: rgba(255,255,255,0.72);
}
.blog-topics {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: clamp(34px, 5vw, 72px);
padding-top: 18px;
border-top: 1px solid var(--line);
}
.blog-topics a {
transition: color 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}
.blog-topics a:hover {
color: var(--ink);
border-color: var(--ink);
background: #fff;
}
.blog-featured,
.blog-path,
.blog-faq {
padding: clamp(64px, 8vw, 104px) 0;
}
.blog-path {
padding-top: clamp(48px, 6vw, 78px);
}
.blog-featured__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(30px, 5vw, 58px);
align-items: start;
}
.blog-lead {
display: grid;
grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1fr);
gap: clamp(26px, 4vw, 52px);
align-items: start;
padding: 26px 0;
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--line);
}
.blog-cover {
min-height: 390px;
display: grid;
align-content: space-between;
gap: 18px;
padding: clamp(18px, 2.4vw, 28px);
overflow: hidden;
border: 1px solid var(--line);
border-radius: 8px;
background:
radial-gradient(circle at 20% 20%, rgba(255,189,23,0.32), transparent 34%),
radial-gradient(circle at 86% 14%, rgba(0,91,255,0.16), transparent 32%),
linear-gradient(135deg, #fff 0%, #F5F5F0 100%);
transition: transform 220ms var(--ease), border-color 220ms var(--ease);
}
.blog-cover:hover {
transform: translateY(-3px);
border-color: rgba(10,10,10,0.28);
}
.blog-cover__top,
.blog-cover__queries span,
.blog-cover__product {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.blog-cover__top {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.blog-cover__top strong { color: var(--ink); font-weight: 500; }
.blog-cover__queries {
display: grid;
gap: 8px;
}
.blog-cover__queries span {
min-height: 46px;
padding: 0 12px;
border: 1px solid rgba(10,10,10,0.08);
border-radius: 7px;
background: rgba(255,255,255,0.78);
}
.blog-cover__queries b {
font-weight: 500;
font-size: 14px;
}
.blog-cover__queries em,
.blog-cover__product em {
font-family: var(--font-mono);
font-size: 11px;
font-style: normal;
color: var(--muted);
}
.blog-cover__product {
justify-content: flex-start;
padding: 14px;
border-radius: 8px;
background: var(--ink);
color: #fff;
}
.blog-cover__product i {
width: 44px;
height: 44px;
flex: none;
border-radius: 7px;
background:
linear-gradient(135deg, var(--blog-lime) 0%, var(--blog-lime) 46%, transparent 46%),
linear-gradient(315deg, var(--royal) 0%, var(--royal) 48%, transparent 48%),
#fff;
}
.blog-cover__product strong {
font-size: 17px;
font-weight: 500;
}
.blog-cover__product em { margin-left: auto; color: rgba(255,255,255,0.62); }
.blog-cover__bars {
display: flex;
align-items: end;
gap: 6px;
height: 76px;
}
.blog-cover__bars i {
flex: 1;
height: var(--h);
border-radius: 6px 6px 0 0;
background: var(--ink);
opacity: 0.88;
}
.blog-lead__body {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 18px;
}
.blog-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.blog-meta span + span::before {
content: "";
display: inline-block;
width: 4px;
height: 4px;
margin: 0 10px 2px 0;
border-radius: 50%;
background: var(--amber);
}
.blog-lead h2 {
max-width: 780px;
font-size: clamp(30px, 3.4vw, 48px);
line-height: 1.05;
font-weight: 500;
letter-spacing: 0;
text-wrap: balance;
}
.blog-lead p {
max-width: 610px;
font-size: 18px;
color: var(--ink-soft);
}
.blog-lead__theses {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 6px;
}
.blog-side {
display: grid;
grid-template-columns: minmax(240px, 0.8fr) repeat(3, minmax(0, 1fr));
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.blog-side__head {
display: grid;
gap: 8px;
padding: 22px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.blog-side__head span,
.blog-side__item span {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.blog-side__head strong {
font-size: clamp(24px, 2.5vw, 34px);
line-height: 1.05;
font-weight: 500;
}
.blog-side__item {
display: grid;
gap: 10px;
padding: 22px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
transition: color 180ms var(--ease);
}
.blog-side__item p {
color: var(--ink-soft);
font-size: 17px;
}
.blog-side__item:hover p { color: var(--royal); }
.blog-section-head {
display: grid;
grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
gap: clamp(24px, 5vw, 72px);
align-items: start;
margin-bottom: clamp(30px, 5vw, 54px);
}
.blog-section-head h2 {
max-width: 840px;
font-size: clamp(30px, 4vw, 56px);
line-height: 1.04;
font-weight: 500;
letter-spacing: 0;
text-wrap: balance;
}
.blog-section-head--library {
grid-template-columns: minmax(160px, 0.32fr) minmax(0, 0.88fr) minmax(280px, 0.5fr);
}
.blog-section-head--library p {
color: var(--ink-soft);
font-size: 18px;
line-height: 1.35;
}
.blog-path__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.blog-path__item {
min-height: 220px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 34px;
padding: clamp(22px, 3vw, 34px);
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
transition: background 180ms var(--ease), color 180ms var(--ease);
}
.blog-path__item span {
font-size: clamp(21px, 2vw, 30px);
line-height: 1.05;
font-weight: 500;
text-wrap: balance;
}
.blog-path__item p {
color: var(--muted);
font-size: 15px;
}
.blog-path__item:hover {
background: var(--ink);
color: #fff;
}
.blog-path__item:hover p { color: rgba(255,255,255,0.72); }
.blog-library {
padding: clamp(68px, 9vw, 112px) 0;
background: var(--bg-alt);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.blog-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.blog-card {
min-height: 420px;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.blog-card:hover {
transform: translateY(-4px);
border-color: rgba(10,10,10,0.24);
box-shadow: 0 24px 52px rgba(10,10,10,0.08);
}
.blog-card__media {
display: grid;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--blog-panel);
}
.blog-visual {
position: relative;
min-height: 190px;
align-content: space-between;
gap: 12px;
padding: 18px;
color: var(--ink);
isolation: isolate;
}
.blog-visual::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(rgba(10,10,10,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(10,10,10,0.045) 1px, transparent 1px);
background-size: 22px 22px;
mask-image: linear-gradient(180deg, rgba(0,0,0,0.72), rgba(0,0,0,0.08));
}
.blog-visual__label,
.blog-visual__caption,
.blog-visual__row,
.blog-visual__profit,
.blog-visual__sentiment,
.blog-visual__formula,
.blog-visual--logistics span,
.blog-visual--launch span,
.blog-visual--audit span,
.blog-visual__route {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.blog-visual__label { color: var(--muted); }
.blog-visual__bars {
height: 92px;
display: flex;
align-items: end;
gap: 8px;
}
.blog-visual__bars i {
flex: 1;
height: var(--h);
min-height: 22px;
border-radius: 7px 7px 0 0;
background: var(--ink);
}
.blog-visual__row {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 30px;
padding-top: 8px;
border-top: 1px solid rgba(10,10,10,0.1);
}
.blog-visual__row b,
.blog-visual__row em {
font-weight: 500;
font-style: normal;
}
.blog-visual--ads {
background:
radial-gradient(circle at 82% 18%, rgba(255,189,23,0.34), transparent 30%),
#fff;
}
.blog-visual--economics {
color: #fff;
background:
linear-gradient(135deg, rgba(217,255,0,0.12), transparent 48%),
#141414;
}
.blog-visual--economics::before {
background:
linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
background-size: 22px 22px;
}
.blog-visual__formula {
display: flex;
flex-wrap: wrap;
gap: 8px;
color: rgba(255,255,255,0.62);
}
.blog-visual__formula b { color: #fff; font-weight: 500; }
.blog-visual__formula em { font-style: normal; color: var(--blog-lime); }
.blog-visual__profit {
justify-self: start;
padding: 10px 12px;
border-radius: var(--r-pill);
background: var(--blog-lime);
color: var(--ink);
}
.blog-visual__line {
height: 8px;
border-radius: var(--r-pill);
background: rgba(255,255,255,0.12);
}
.blog-visual__line i {
display: block;
width: var(--w);
height: 100%;
border-radius: inherit;
background: #fff;
}
.blog-visual--content {
background:
linear-gradient(135deg, rgba(255,215,247,0.7), transparent 56%),
#fff;
}
.blog-visual__slides {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
align-items: end;
}
.blog-visual__slides i {
min-height: 118px;
display: flex;
align-items: end;
padding: 10px;
border: 1px solid rgba(10,10,10,0.1);
border-radius: 8px;
background: rgba(255,255,255,0.74);
font-family: var(--font-mono);
font-size: 11px;
font-style: normal;
color: var(--muted);
}
.blog-visual__slides i:nth-child(2) {
min-height: 142px;
background: var(--ink);
color: #fff;
}
.blog-visual__caption {
justify-self: end;
color: var(--ink-soft);
}
.blog-visual--reviews {
background:
radial-gradient(circle at 18% 18%, rgba(0,91,255,0.13), transparent 34%),
#fff;
}
.blog-visual__score {
align-self: start;
font-size: 64px;
line-height: 0.9;
font-weight: 500;
letter-spacing: 0;
}
.blog-visual__comments {
display: grid;
gap: 8px;
}
.blog-visual__comments i {
height: 16px;
border-radius: var(--r-pill);
background: rgba(10,10,10,0.12);
}
.blog-visual__comments i:nth-child(1) { width: 76%; }
.blog-visual__comments i:nth-child(2) { width: 54%; }
.blog-visual__comments i:nth-child(3) { width: 86%; }
.blog-visual__sentiment {
color: var(--muted);
}
.blog-visual--logistics {
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
background: linear-gradient(135deg, var(--blog-mint), #fff);
}
.blog-visual--logistics span {
min-height: 74px;
display: grid;
place-items: center;
border: 1px solid rgba(10,10,10,0.1);
border-radius: 8px;
background: rgba(255,255,255,0.68);
}
.blog-visual--logistics i {
width: 34px;
height: 1px;
background: rgba(10,10,10,0.28);
}
.blog-visual--launch {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-content: stretch;
gap: 8px;
background:
radial-gradient(circle at 80% 20%, rgba(217,255,0,0.36), transparent 32%),
#fff;
}
.blog-visual--launch span,
.blog-visual--audit span {
display: grid;
place-items: center;
min-height: 72px;
border: 1px solid rgba(10,10,10,0.1);
border-radius: 8px;
background: rgba(255,255,255,0.72);
}
.blog-visual--launch span:nth-child(4) {
background: var(--ink);
color: #fff;
}
.blog-visual--traffic {
background:
linear-gradient(135deg, var(--blog-sky), #fff 64%);
}
.blog-visual__route {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.blog-visual__route b {
font-weight: 500;
}
.blog-visual__route i {
flex: 1;
height: 1px;
background: rgba(10,10,10,0.24);
}
.blog-visual__traffic-lines {
display: grid;
gap: 10px;
}
.blog-visual__traffic-lines i {
height: 10px;
border-radius: var(--r-pill);
background: var(--ink);
}
.blog-visual__traffic-lines i:nth-child(1) { width: 88%; }
.blog-visual__traffic-lines i:nth-child(2) { width: 62%; opacity: 0.6; }
.blog-visual__traffic-lines i:nth-child(3) { width: 74%; opacity: 0.36; }
.blog-visual__traffic-lines i:nth-child(4) { width: 42%; opacity: 0.22; }
.blog-visual--audit {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-content: stretch;
gap: 8px;
background: linear-gradient(135deg, var(--blog-warm), #fff);
}
.blog-visual--audit span:nth-child(1) {
background: var(--ink);
color: #fff;
}
.blog-card__body {
min-height: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
padding: 22px;
}
.blog-card h3 {
font-size: clamp(21px, 1.8vw, 27px);
line-height: 1.08;
font-weight: 500;
letter-spacing: 0;
text-wrap: balance;
}
.blog-card p {
margin-top: auto;
color: var(--muted);
font-size: 15px;
}
.blog-card--dark {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.blog-card--dark .blog-card__media {
background: #141414;
}
.blog-card--dark .blog-meta,
.blog-card--dark p {
color: rgba(255,255,255,0.66);
}
.blog-card--accent {
background: #F1E3B4;
border-color: #E3D095;
}
.blog-card--accent .blog-meta,
.blog-card--accent p {
color: rgba(10,10,10,0.66);
}
.blog-faq__grid {
display: grid;
grid-template-columns: minmax(260px, 0.52fr) minmax(0, 1fr);
gap: clamp(34px, 6vw, 86px);
}
.blog-faq__grid .blog-section-head {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
margin: 0;
position: sticky;
top: calc(var(--header-h) + 28px);
}
.blog-faq__list {
border-top: 1px solid var(--line);
}
.blog-faq details {
border-bottom: 1px solid var(--line);
background: #fff;
}
.blog-faq summary {
list-style: none;
cursor: pointer;
padding: 26px 0;
font-size: clamp(22px, 2vw, 32px);
line-height: 1.12;
font-weight: 500;
}
.blog-faq summary::-webkit-details-marker { display: none; }
.blog-faq summary:hover { color: var(--royal); }
.blog-faq details p {
max-width: 780px;
padding: 0 0 28px;
color: var(--ink-soft);
font-size: 18px;
}
.blog-cta {
padding: clamp(34px, 5vw, 64px) 0;
background: var(--ink);
color: #fff;
}
.blog-cta__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 32px;
align-items: center;
}
.blog-cta__label { color: rgba(255,255,255,0.5); }
.blog-cta h2 {
max-width: 920px;
margin-top: 12px;
font-size: clamp(30px, 4vw, 56px);
line-height: 1.04;
font-weight: 500;
letter-spacing: 0;
text-wrap: balance;
}
.blog-cta__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 0 24px;
border-radius: var(--r-pill);
background: #fff;
color: var(--ink);
font-family: var(--font-mono);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.04em;
transition: transform 180ms var(--ease), background 180ms var(--ease);
}
.blog-cta__button:hover {
transform: translateY(-2px);
background: var(--amber);
}
@media (max-width: 1180px) {
.blog-featured__grid,
.blog-lead,
.blog-section-head--library,
.blog-faq__grid {
grid-template-columns: 1fr;
}
.blog-side {
grid-template-columns: 1fr;
border-left: 0;
}
.blog-side__head,
.blog-side__item {
padding: 20px 0;
border-right: 0;
}
.blog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blog-path__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blog-faq__grid .blog-section-head {
position: static;
}
}
@media (max-width: 760px) {
.blog-shell { padding: 0 18px; }
.blog-hero__bottom,
.blog-section-head,
.blog-cta__inner {
grid-template-columns: 1fr;
}
.blog-hero {
padding-top: 46px;
}
.blog-hero__title {
font-size: clamp(36px, 11vw, 50px);
line-height: 1.02;
}
.blog-hero__deck {
min-height: 184px;
}
.blog-hero__deck-grid span {
min-height: 42px;
}
.blog-grid,
.blog-path__grid {
grid-template-columns: 1fr;
}
.blog-cover {
min-height: 330px;
}
.blog-cover__product {
display: grid;
grid-template-columns: 44px 1fr;
}
.blog-cover__product em {
grid-column: 2;
margin-left: 0;
}
.blog-section-head h2,
.blog-cta h2 {
font-size: clamp(30px, 8.6vw, 42px);
}
.blog-visual {
min-height: 172px;
}
.blog-card {
min-height: 0;
}
.blog-path__item {
min-height: 210px;
}
.blog-cta__button {
width: 100%;
}
}
/* --- Cases page: related-services CTA block --- */
.cp-related{padding:80px 24px;background:linear-gradient(180deg,#FFF 0%,#F6F6F3 100%);border-top:1px solid #EDEDED}
.cp-related__inner{max-width:960px;margin:0 auto}
.cp-related__lead{font-size:20px;line-height:1.55;color:#0A0A0A;margin:0 0 32px;letter-spacing:-.005em}
.cp-related__lead a{color:#005BFF;text-decoration:none;border-bottom:1px solid rgba(0,91,255,.25);transition:border-color .2s}
.cp-related__lead a:hover{border-bottom-color:#005BFF}
.cp-related__links{display:flex;flex-wrap:wrap;gap:10px}
.cp-related__links a{display:inline-block;padding:10px 18px;background:#fff;border:1px solid #EDEDED;border-radius:999px;font-size:14px;color:#373737;text-decoration:none;transition:all .2s}
.cp-related__links a:hover{background:#0A0A0A;color:#fff;border-color:#0A0A0A}
@media (max-width:640px){.cp-related{padding:56px 20px}.cp-related__lead{font-size:17px}}
/* ============================================================
BLOG · комплексная доработка (2026-04-25)
Reveal-стаггер на карточках, плавные hover-состояния, полиш
деталей, mobile-fix для grid'ов.
============================================================ */
/* — Reveal stagger для карточек (волна появления) — */
.blog-grid .blog-card[data-reveal] { transition-delay: 0ms; }
.blog-grid .blog-card[data-reveal]:nth-child(2) { transition-delay: 70ms; }
.blog-grid .blog-card[data-reveal]:nth-child(3) { transition-delay: 140ms; }
.blog-grid .blog-card[data-reveal]:nth-child(4) { transition-delay: 210ms; }
.blog-grid .blog-card[data-reveal]:nth-child(5) { transition-delay: 280ms; }
.blog-grid .blog-card[data-reveal]:nth-child(6) { transition-delay: 350ms; }
.blog-grid .blog-card[data-reveal]:nth-child(7) { transition-delay: 420ms; }
.blog-grid .blog-card[data-reveal]:nth-child(8) { transition-delay: 490ms; }
.blog-path__grid .blog-path__item[data-reveal]:nth-child(1) { transition-delay: 0ms; }
.blog-path__grid .blog-path__item[data-reveal]:nth-child(2) { transition-delay: 80ms; }
.blog-path__grid .blog-path__item[data-reveal]:nth-child(3) { transition-delay: 160ms; }
.blog-path__grid .blog-path__item[data-reveal]:nth-child(4) { transition-delay: 240ms; }
.blog-side .blog-side__item[data-reveal]:nth-child(2) { transition-delay: 80ms; }
.blog-side .blog-side__item[data-reveal]:nth-child(3) { transition-delay: 160ms; }
.blog-side .blog-side__item[data-reveal]:nth-child(4) { transition-delay: 240ms; }
/* — Hover-лифт + усиление контраста — */
.blog-card,
.blog-path__item,
.blog-side__item {
transition:
transform 280ms var(--ease-spring-soft),
box-shadow 280ms var(--ease-out),
border-color 220ms var(--ease-out);
}
.blog-card:hover,
.blog-path__item:hover {
transform: translateY(-4px);
box-shadow:
0 8px 24px -8px rgba(10,10,10,0.16),
0 2px 6px -2px rgba(10,10,10,0.08);
border-color: rgba(10,10,10,0.18);
}
.blog-side__item:hover {
transform: translateX(3px);
border-color: rgba(10,10,10,0.18);
}
.blog-side__item:hover span {
color: var(--royal);
}
/* Заголовок карточки подсвечивается на hover — общий принцип сайта */
.blog-card h3 a {
background-image: linear-gradient(currentColor, currentColor);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 0% 1px;
transition: background-size 240ms var(--ease-out), color 200ms var(--ease-out);
}
.blog-card:hover h3 a {
background-size: 100% 1px;
}
/* — Плавный hover на cover hero-статьи — */
.blog-cover {
position: relative;
}
.blog-cover::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.4), transparent 60%);
opacity: 0;
pointer-events: none;
transition: opacity 360ms var(--ease-out);
}
.blog-cover:hover::before { opacity: 1; }
/* — Bars в blog-cover дышат на hover — */
@keyframes blogBarsPulse {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(1.08); }
}
.blog-cover:hover .blog-cover__bars i {
animation: blogBarsPulse 1.4s ease-in-out infinite;
transform-origin: bottom;
}
.blog-cover:hover .blog-cover__bars i:nth-child(2) { animation-delay: 0.10s; }
.blog-cover:hover .blog-cover__bars i:nth-child(3) { animation-delay: 0.20s; }
.blog-cover:hover .blog-cover__bars i:nth-child(4) { animation-delay: 0.30s; }
.blog-cover:hover .blog-cover__bars i:nth-child(5) { animation-delay: 0.40s; }
.blog-cover:hover .blog-cover__bars i:nth-child(6) { animation-delay: 0.50s; }
/* То же для bid-control bars в .blog-visual--ads */
.blog-visual--ads:hover .blog-visual__bars i {
animation: blogBarsPulse 1.6s ease-in-out infinite;
transform-origin: bottom;
}
.blog-visual--ads:hover .blog-visual__bars i:nth-child(2) { animation-delay: 0.10s; }
.blog-visual--ads:hover .blog-visual__bars i:nth-child(3) { animation-delay: 0.20s; }
.blog-visual--ads:hover .blog-visual__bars i:nth-child(4) { animation-delay: 0.30s; }
.blog-visual--ads:hover .blog-visual__bars i:nth-child(5) { animation-delay: 0.40s; }
/* — Topics-чипсы: микро-анимация на hover — */
.blog-topics a {
position: relative;
overflow: hidden;
}
.blog-topics a::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(0,91,255,0.10) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 520ms var(--ease-out);
}
.blog-topics a:hover::after { transform: translateX(100%); }
/* — FAQ details: плавный disclosure + микро-индикатор — */
.blog-faq details {
transition: border-color 200ms var(--ease-out);
}
.blog-faq details[open] {
border-color: var(--ink);
}
.blog-faq summary {
position: relative;
padding-right: 32px;
cursor: pointer;
transition: color 180ms var(--ease-out);
}
.blog-faq summary::after {
content: "+";
position: absolute;
right: 4px;
top: 50%;
width: 22px; height: 22px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--card);
color: var(--ink);
font-family: var(--font-mono);
font-size: 16px;
line-height: 1;
transform: translateY(-50%);
transition: transform 220ms var(--ease-spring), background 200ms var(--ease-out);
}
.blog-faq details[open] summary::after {
content: "−";
transform: translateY(-50%) rotate(180deg);
background: var(--ink);
color: #fff;
}
.blog-faq details p {
animation: blogFaqOpen 360ms var(--ease-out);
}
@keyframes blogFaqOpen {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* — Hero deck: bars и chips «дышат» — */
@keyframes blogDeckLine {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
.blog-hero__deck-line span {
animation: blogDeckLine 3.2s ease-in-out infinite;
}
.blog-hero__deck-line span:nth-child(2) { animation-delay: 0.4s; }
.blog-hero__deck-line span:nth-child(3) { animation-delay: 0.8s; }
@keyframes blogDeckChip {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
.blog-hero__deck-grid span:nth-child(2),
.blog-hero__deck-grid span:nth-child(5) {
animation: blogDeckChip 4s ease-in-out infinite;
}
.blog-hero__deck-grid span:nth-child(5) { animation-delay: 0.6s; }
/* — CTA: анимированный градиент-ободок при hover — */
.blog-cta__button {
position: relative;
overflow: hidden;
z-index: 0;
}
.blog-cta__button::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 720ms var(--ease-out);
z-index: -1;
}
.blog-cta__button:hover::before { transform: translateX(100%); }
/* — Mobile fix: hero-deck перепрыгивает на новый ряд — */
@media (max-width: 880px) {
.blog-hero__bottom {
grid-template-columns: 1fr;
}
.blog-hero__bottom p {
align-self: start;
font-size: 16px;
}
.blog-hero__deck { min-height: auto; }
}
/* — Featured grid → 1 колонка на узких экранах — */
@media (max-width: 880px) {
.blog-lead {
grid-template-columns: 1fr;
padding: 18px 0;
}
.blog-cover { min-height: 280px; }
.blog-lead h2 { font-size: clamp(22px, 4.4vw, 30px); line-height: 1.18; }
}
/* — Library grid: на мобиле в 1 колонку для чистоты — */
@media (max-width: 640px) {
.blog-grid {
grid-template-columns: 1fr;
}
.blog-card { min-height: auto; }
}
/* — FAQ grid: hero-head стакается над списком на мобиле — */
@media (max-width: 720px) {
.blog-faq__grid { grid-template-columns: 1fr; gap: 24px; }
.blog-faq__grid .blog-section-head { position: static; }
}
/* — CTA-секция стакается на мобиле — */
@media (max-width: 720px) {
.blog-cta__inner { grid-template-columns: 1fr; gap: 22px; }
.blog-cta__button { width: 100%; justify-content: center; }
}
/* — Reveal hero-title чуть мощнее (как на других страницах) — */
.blog-hero__title[data-reveal] {
transform: translateY(48px) scale(0.97);
transition-duration: 900ms;
}
.blog-hero__title.is-inview { transform: translateY(0) scale(1); }
/* ============================================================
BLOG · COMPLETE DESIGN PASS (2026-04-25)
Премиум-полиш: градиенты, типографика, depth, micro-motion
============================================================ */
/* ===== HERO ===== */
.blog-hero {
position: relative;
background:
radial-gradient(ellipse 60% 50% at 80% 0%, rgba(0, 91, 255, 0.06), transparent 60%),
radial-gradient(ellipse 40% 60% at 12% 100%, rgba(255, 189, 23, 0.05), transparent 60%),
linear-gradient(180deg, #fff 0%, #fff 70%, #FAFAF7 100%);
overflow: hidden;
}
.blog-hero::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(10,10,10,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(10,10,10,0.025) 1px, transparent 1px);
background-size: 32px 32px;
-webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000, transparent 70%);
mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000, transparent 70%);
pointer-events: none;
}
.blog-hero > * { position: relative; z-index: 1; }
.blog-hero__title {
background: linear-gradient(180deg, #0A0A0A 0%, #2A2A2A 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.blog-hero__deck {
background:
linear-gradient(135deg, rgba(0, 91, 255, 0.08) 0%, transparent 50%),
linear-gradient(315deg, rgba(217, 255, 0, 0.18) 0%, transparent 50%),
rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(10, 10, 10, 0.08);
box-shadow:
0 1px 3px rgba(10, 10, 10, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
border-radius: 12px;
}
/* TOPICS chips */
.blog-topics a {
background: #fff;
border-color: rgba(10, 10, 10, 0.1);
color: var(--ink-soft);
font-weight: 500;
transition: all 220ms var(--ease-out);
}
.blog-topics a:hover {
background: var(--ink);
color: #fff;
border-color: var(--ink);
transform: translateY(-1px);
}
/* ===== FEATURED — LEAD ARTICLE ===== */
.blog-lead {
padding: 32px 0;
border-top: 2px solid var(--ink);
}
.blog-cover {
background:
radial-gradient(circle at 25% 0%, rgba(0, 91, 255, 0.18), transparent 55%),
radial-gradient(circle at 75% 100%, rgba(255, 189, 23, 0.15), transparent 55%),
linear-gradient(135deg, #FAFAF7 0%, #F0F0EC 100%);
border: 1px solid rgba(10, 10, 10, 0.08);
border-radius: 12px;
box-shadow:
0 1px 2px rgba(10, 10, 10, 0.04),
inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.blog-cover__queries span {
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(10, 10, 10, 0.06);
border-radius: 8px;
padding: 9px 12px;
font-size: 11px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.blog-cover__product {
background: var(--ink);
border-radius: 12px;
padding: 14px 16px;
color: #fff;
box-shadow: 0 8px 24px rgba(10, 10, 10, 0.16);
}
.blog-cover__product i {
background: linear-gradient(135deg, #2E5AFF 0%, #7A4FFF 100%);
}
.blog-cover__bars {
height: 64px;
align-items: end;
gap: 6px;
}
.blog-cover__bars i {
border-radius: 6px 6px 0 0;
background: linear-gradient(180deg, #2E5AFF 0%, #7A4FFF 100%);
opacity: 0.92;
}
.blog-cover__bars i:nth-child(odd) {
background: linear-gradient(180deg, #FFBD17 0%, #FF8C17 100%);
}
/* ===== BLOG VISUAL CARDS — все 8 декораций ===== */
/* Ads — bid control */
.blog-visual--ads {
background:
radial-gradient(circle at 80% 0%, rgba(255, 189, 23, 0.5), transparent 55%),
radial-gradient(circle at 20% 100%, rgba(0, 91, 255, 0.10), transparent 55%),
linear-gradient(135deg, #FFFEF5 0%, #FFF5DC 100%);
}
.blog-visual--ads .blog-visual__bars i {
background: linear-gradient(180deg, #1A1A1A 0%, #444 100%);
border-radius: 6px 6px 0 0;
}
.blog-visual--ads .blog-visual__bars i:nth-child(odd) {
background: linear-gradient(180deg, #FFBD17 0%, #FF9417 100%);
}
.blog-visual--ads .blog-visual__row em {
background: var(--ink);
color: #fff;
padding: 4px 10px;
border-radius: 6px;
font-family: var(--font-mono);
font-size: 11px;
}
/* Economics — dark premium */
.blog-visual--economics {
background:
radial-gradient(circle at 80% 100%, rgba(217, 255, 0, 0.20), transparent 60%),
radial-gradient(circle at 0% 0%, rgba(217, 255, 0, 0.06), transparent 50%),
linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
position: relative;
overflow: hidden;
}
.blog-visual__formula {
font-size: 13px;
font-weight: 500;
}
.blog-visual__profit {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
box-shadow: 0 4px 16px rgba(217, 255, 0, 0.25);
}
.blog-visual__line i {
background: linear-gradient(90deg, #D9FF00 0%, #fff 100%);
}
/* Content — slides */
.blog-visual--content {
background:
radial-gradient(circle at 20% 0%, rgba(255, 215, 247, 0.85), transparent 55%),
linear-gradient(135deg, #FFFAFC 0%, #FFE5F5 100%);
}
.blog-visual__slides i {
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 2px 6px rgba(10, 10, 10, 0.06);
font-weight: 500;
border: 1px solid rgba(10, 10, 10, 0.08);
}
.blog-visual__slides i:nth-child(2) {
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
box-shadow: 0 6px 18px rgba(10, 10, 10, 0.20);
}
.blog-visual__caption {
font-weight: 500;
background: var(--ink);
color: #fff;
padding: 5px 12px;
border-radius: var(--r-pill);
font-size: 10.5px;
}
/* Reviews — rating */
.blog-visual--reviews {
background:
radial-gradient(circle at 0% 0%, rgba(0, 91, 255, 0.13), transparent 55%),
linear-gradient(135deg, #fff 0%, #F3F7FF 100%);
}
.blog-visual__score {
background: linear-gradient(135deg, #2E5AFF 0%, #7A4FFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 72px;
font-weight: 600;
position: relative;
display: inline-block;
}
.blog-visual__score::after {
content: "★";
position: absolute;
top: 4px;
right: -22px;
font-size: 22px;
-webkit-text-fill-color: #FFBD17;
}
.blog-visual__comments i {
background: linear-gradient(90deg, rgba(46, 90, 255, 0.20) 0%, rgba(46, 90, 255, 0.04) 100%);
height: 12px;
}
/* Logistics — flow */
.blog-visual--logistics {
background:
radial-gradient(circle at 50% 100%, rgba(16, 185, 129, 0.16), transparent 60%),
linear-gradient(135deg, #F5FBF8 0%, #DFF4E8 100%);
}
.blog-visual--logistics span {
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 2px 6px rgba(10, 10, 10, 0.04);
border: 1px solid rgba(16, 185, 129, 0.20);
font-weight: 500;
}
.blog-visual--logistics i {
width: 32px;
height: 2px;
background: linear-gradient(90deg, transparent, #10B981 50%, transparent);
}
/* Launch — 2x2 */
.blog-visual--launch {
background:
radial-gradient(circle at 80% 20%, rgba(217, 255, 0, 0.50), transparent 55%),
linear-gradient(135deg, #FFFEF5 0%, #FAFAF7 100%);
}
.blog-visual--launch span {
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 2px 6px rgba(10, 10, 10, 0.04);
border: 1px solid rgba(10, 10, 10, 0.08);
font-weight: 500;
}
.blog-visual--launch span:nth-child(4) {
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
border-color: #1a1a1a;
box-shadow: 0 6px 18px rgba(10, 10, 10, 0.20);
}
/* Traffic — route */
.blog-visual--traffic {
background:
radial-gradient(circle at 0% 0%, rgba(0, 91, 255, 0.16), transparent 55%),
linear-gradient(135deg, #F3F7FF 0%, #fff 65%);
}
.blog-visual__route b {
font-weight: 600;
font-size: 11px;
background: #fff;
padding: 6px 12px;
border-radius: var(--r-pill);
border: 1px solid rgba(0, 91, 255, 0.22);
color: #2E5AFF;
}
.blog-visual__route i {
height: 2px;
background: linear-gradient(90deg, transparent, #2E5AFF 50%, transparent);
}
.blog-visual__traffic-lines i {
background: linear-gradient(90deg, #2E5AFF 0%, #7A4FFF 100%);
height: 8px;
border-radius: var(--r-pill);
}
/* Audit */
.blog-visual--audit {
background:
radial-gradient(circle at 80% 0%, rgba(243, 227, 179, 0.65), transparent 55%),
linear-gradient(135deg, #FFFCF5 0%, #FAFAF7 100%);
}
.blog-visual--audit span {
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 2px 6px rgba(10, 10, 10, 0.04);
font-weight: 500;
}
.blog-visual--audit span:nth-child(1) {
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
box-shadow: 0 6px 18px rgba(10, 10, 10, 0.20);
}
/* ===== CARDS — typography & meta ===== */
.blog-card {
border-radius: 12px;
background: linear-gradient(180deg, #fff 0%, #FDFDFB 100%);
}
.blog-card__body {
padding: 24px;
gap: 14px;
}
.blog-card h3 {
font-size: 17px;
line-height: 1.32;
font-weight: 500;
letter-spacing: -0.005em;
}
.blog-meta {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
font-family: var(--font-mono);
display: flex;
gap: 10px;
align-items: center;
}
.blog-meta span:first-child {
background: var(--card);
padding: 4px 9px;
border-radius: 5px;
color: var(--ink);
}
.blog-meta span + span::before {
content: none;
}
/* Dark + accent variants */
.blog-card--dark {
background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
color: #fff;
border-color: #1a1a1a;
}
.blog-card--dark .blog-meta span:first-child {
background: rgba(255, 255, 255, 0.10);
color: #fff;
}
.blog-card--dark p {
color: rgba(255, 255, 255, 0.72);
}
.blog-card--accent {
background: linear-gradient(135deg, #FFBD17 0%, #FFE066 100%);
border-color: rgba(255, 189, 23, 0.45);
}
.blog-card--accent .blog-meta span:first-child {
background: rgba(10, 10, 10, 0.14);
}
/* ===== PATH SECTION ===== */
.blog-path__item {
background: linear-gradient(135deg, #fff 0%, #FAFAF7 100%);
border-radius: 12px;
padding: 24px;
border: 1px solid var(--line);
position: relative;
overflow: hidden;
transition: transform 280ms var(--ease-spring-soft), border-color 220ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.blog-path__item::after {
content: "→";
position: absolute;
top: 18px; right: 20px;
font-size: 18px;
color: var(--royal);
opacity: 0;
transform: translateX(-6px);
transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.blog-path__item:hover::after {
opacity: 1;
transform: translateX(0);
}
.blog-path__item span {
font-weight: 500;
}
/* ===== SIDE editorial column ===== */
.blog-side {
display: grid;
gap: 0;
}
.blog-side__head {
border-bottom: 1px solid var(--line);
padding-bottom: 16px;
margin-bottom: 4px;
}
.blog-side__item {
display: block;
padding: 18px 0;
border-bottom: 1px solid var(--line);
}
.blog-side__item:last-child { border-bottom: none; }
.blog-side__item span {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
font-family: var(--font-mono);
margin-bottom: 6px;
transition: color 200ms var(--ease-out);
}
.blog-side__item p {
font-size: 14px;
line-height: 1.5;
color: var(--ink-soft);
}
/* ===== FAQ ===== */
.blog-faq details {
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px 22px;
background: #fff;
margin-bottom: 12px;
transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.blog-faq details[open] {
box-shadow: 0 6px 18px rgba(10, 10, 10, 0.06);
}
.blog-faq summary {
font-size: 16px;
font-weight: 500;
color: var(--ink);
}
.blog-faq details p {
margin-top: 12px;
font-size: 14px;
line-height: 1.6;
color: var(--ink-soft);
}
/* ===== CTA ===== */
.blog-cta {
background:
radial-gradient(circle at 80% 0%, rgba(0, 91, 255, 0.20), transparent 55%),
radial-gradient(circle at 0% 100%, rgba(255, 189, 23, 0.10), transparent 55%),
linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
position: relative;
overflow: hidden;
}
.blog-cta::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 40px 40px;
-webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000, transparent 80%);
mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000, transparent 80%);
pointer-events: none;
}
.blog-cta__inner { position: relative; z-index: 1; }
.blog-cta h2 {
font-size: clamp(26px, 3.8vw, 40px);
line-height: 1.16;
font-weight: 500;
letter-spacing: -0.005em;
text-wrap: balance;
}
.blog-cta__label {
color: rgba(255, 255, 255, 0.55);
margin-bottom: 12px;
display: block;
}
.blog-cta__button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 28px;
border-radius: var(--r-pill);
background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%);
color: var(--ink);
font-weight: 500;
text-decoration: none;
box-shadow: 0 4px 16px rgba(255, 255, 255, 0.12);
transition: transform 220ms var(--ease-spring-soft), box-shadow 220ms var(--ease-out);
}
.blog-cta__button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(255, 255, 255, 0.22);
}
/* ===== SECTION HEADS ===== */
.blog-section-head { margin-bottom: clamp(32px, 4vw, 48px); }
.blog-section-head h2 {
font-size: clamp(28px, 4vw, 44px);
line-height: 1.05;
font-weight: 500;
letter-spacing: -0.01em;
margin-top: 8px;
text-wrap: balance;
}
/* ===== MOBILE refinements ===== */
@media (max-width: 720px) {
.blog-cta { border-radius: 0; }
.blog-cover__bars { height: 50px; }
.blog-visual__score { font-size: 56px; }
}
/* ============================================================
BLOG · REFINEMENT (2026-04-25 #2)
Понизить лайм-кислоту, заполнить пустоту, добавить смысла
в визуальные элементы (нумерация, метрики, иконки)
============================================================ */
/* ===== HERO DECK — связать chips и bars ===== */
.blog-hero__deck {
padding: 22px;
gap: 22px;
}
.blog-hero__deck-grid span {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
min-height: 56px;
border-radius: 8px;
text-transform: lowercase;
}
/* Активные (чёрные) чипсы немного крупнее */
.blog-hero__deck-grid span:nth-child(2),
.blog-hero__deck-grid span:nth-child(5) {
box-shadow: 0 4px 12px rgba(10, 10, 10, 0.12);
}
/* Bars становятся «метриками» — каждая со своим прогрессом + лейблом */
.blog-hero__deck-line {
position: relative;
padding-top: 10px;
border-top: 1px dashed rgba(10, 10, 10, 0.10);
gap: 10px;
}
.blog-hero__deck-line span {
height: 8px;
border-radius: var(--r-pill);
background: linear-gradient(90deg, #1A1A1A 0%, #4A4A4A 100%);
position: relative;
}
.blog-hero__deck-line span:nth-child(2) {
background: linear-gradient(90deg, #2E5AFF 0%, #7A4FFF 100%);
}
.blog-hero__deck-line span:nth-child(3) {
background: linear-gradient(90deg, #FFBD17 0%, #FF9417 100%);
}
/* ===== LEAD COVER — bars в едином стиле, без оранж-фиолет-чехарды ===== */
.blog-cover__bars {
height: 64px;
align-items: end;
gap: 8px;
padding-top: 14px;
border-top: 1px dashed rgba(10, 10, 10, 0.10);
}
.blog-cover__bars i {
flex: 1;
border-radius: 6px 6px 0 0;
background: linear-gradient(180deg, #2E5AFF 0%, #5C42FF 100%);
opacity: 1;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.blog-cover__bars i:nth-child(odd) {
background: linear-gradient(180deg, #7A4FFF 0%, #5C42FF 100%);
opacity: 0.55;
}
/* ===== ADS — bid control: акцентируем шапку, унифицируем bars ===== */
.blog-visual--ads {
background:
radial-gradient(circle at 80% 0%, rgba(255, 189, 23, 0.42), transparent 60%),
linear-gradient(135deg, #FFFEF7 0%, #FFF6DC 100%);
}
.blog-visual--ads .blog-visual__label {
display: inline-flex;
align-items: center;
gap: 6px;
}
.blog-visual--ads .blog-visual__label::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #FF9417;
box-shadow: 0 0 0 3px rgba(255, 148, 23, 0.18);
}
.blog-visual--ads .blog-visual__bars i {
background: linear-gradient(180deg, #1A1A1A 0%, #3A3A3A 100%);
border-radius: 7px 7px 0 0;
}
.blog-visual--ads .blog-visual__bars i:nth-child(odd) {
background: linear-gradient(180deg, #FFBD17 0%, #FF8C17 100%);
}
/* ===== ECONOMICS — спокойная палитра, lime приглушаем ===== */
.blog-visual--economics {
background:
radial-gradient(circle at 80% 100%, rgba(200, 221, 46, 0.16), transparent 60%),
linear-gradient(135deg, #1F1F1F 0%, #0F0F0F 100%);
}
.blog-visual__formula em {
/* Минусы — приглушённый лайм вместо ядовитого */
color: #C8DD2E;
}
.blog-visual__profit {
background: linear-gradient(135deg, #C8DD2E 0%, #D5E64A 100%);
color: #0A0A0A;
font-weight: 600;
font-size: 11.5px;
padding: 9px 14px;
box-shadow:
0 4px 14px rgba(200, 221, 46, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.blog-visual__line {
height: 6px;
background: rgba(255, 255, 255, 0.08);
}
.blog-visual__line i {
background: linear-gradient(90deg, #C8DD2E 0%, rgba(200, 221, 46, 0.55) 100%);
}
/* ===== REVIEWS — добавить звёзды и числа отзывов ===== */
.blog-visual--reviews {
background:
radial-gradient(circle at 0% 0%, rgba(0, 91, 255, 0.10), transparent 55%),
linear-gradient(135deg, #fff 0%, #F3F7FF 100%);
}
.blog-visual__score {
font-size: 64px;
font-weight: 600;
}
.blog-visual__score::before {
/* 5 звёзд под рейтингом */
content: "★ ★ ★ ★ ★";
display: block;
font-size: 12px;
color: #FFBD17;
letter-spacing: 0.18em;
margin-bottom: 6px;
-webkit-text-fill-color: #FFBD17;
background: none;
}
.blog-visual__score::after {
content: " /5";
font-size: 16px;
font-weight: 400;
-webkit-text-fill-color: var(--muted);
background: none;
vertical-align: super;
position: static;
}
.blog-visual__comments {
gap: 6px;
}
.blog-visual__comments i {
height: 8px;
background: linear-gradient(90deg, #2E5AFF 0%, rgba(46, 90, 255, 0.20) 100%);
border-radius: var(--r-pill);
}
/* ===== LOGISTICS — добавляем стрелки и подписи под чипами ===== */
.blog-visual--logistics {
background:
radial-gradient(circle at 50% 100%, rgba(16, 185, 129, 0.18), transparent 60%),
linear-gradient(135deg, #F5FBF8 0%, #DCEFE5 100%);
align-content: center;
align-items: center;
min-height: 200px;
}
.blog-visual--logistics span {
min-height: 76px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.blog-visual--logistics i {
width: 38px;
height: 2px;
background: #10B981;
position: relative;
}
.blog-visual--logistics i::after {
content: "▶";
position: absolute;
right: -2px;
top: 50%;
transform: translateY(-50%);
font-size: 9px;
color: #10B981;
}
/* ===== LAUNCH — нумеруем чипы как этапы 01-02-03-04 ===== */
.blog-visual--launch {
background:
radial-gradient(circle at 80% 20%, rgba(200, 221, 46, 0.40), transparent 55%),
linear-gradient(135deg, #FFFEF5 0%, #FAFAF7 100%);
position: relative;
counter-reset: launchStep;
}
.blog-visual--launch span {
position: relative;
counter-increment: launchStep;
padding: 14px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
}
.blog-visual--launch span::before {
content: "0" counter(launchStep);
position: absolute;
top: 8px;
left: 12px;
font-size: 9px;
font-family: var(--font-mono);
color: var(--muted);
letter-spacing: 0.08em;
font-weight: 500;
opacity: 0.6;
}
.blog-visual--launch span:nth-child(4)::before {
color: rgba(255, 255, 255, 0.6);
}
/* ===== TRAFFIC — подписи под bars (источник трафика) ===== */
.blog-visual--traffic {
background:
radial-gradient(circle at 0% 0%, rgba(0, 91, 255, 0.13), transparent 55%),
linear-gradient(135deg, #F3F7FF 0%, #fff 65%);
}
.blog-visual__route b {
background: #fff;
color: #2E5AFF;
border: 1px solid rgba(0, 91, 255, 0.18);
padding: 6px 12px;
font-weight: 600;
font-size: 10.5px;
}
.blog-visual__route i {
height: 1px;
background: rgba(0, 91, 255, 0.30);
}
.blog-visual__traffic-lines {
position: relative;
gap: 8px;
}
.blog-visual__traffic-lines i {
height: 7px;
border-radius: var(--r-pill);
background: linear-gradient(90deg, #2E5AFF 0%, #7A4FFF 100%);
position: relative;
/* Подпись справа от полоски */
}
.blog-visual__traffic-lines i:nth-child(1)::after { content: "поиск 38%"; }
.blog-visual__traffic-lines i:nth-child(2)::after { content: "директ 24%"; }
.blog-visual__traffic-lines i:nth-child(3)::after { content: "соц 22%"; }
.blog-visual__traffic-lines i:nth-child(4)::after { content: "email 16%"; }
.blog-visual__traffic-lines i::after {
position: absolute;
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
font-family: var(--font-mono);
font-size: 9.5px;
color: var(--muted);
letter-spacing: 0.04em;
white-space: nowrap;
text-transform: lowercase;
}
/* ===== AUDIT — ✓ checkmark на тёмном чипе ===== */
.blog-visual--audit {
background:
radial-gradient(circle at 80% 0%, rgba(243, 227, 179, 0.55), transparent 55%),
linear-gradient(135deg, #FFFCF5 0%, #FAFAF7 100%);
}
.blog-visual--audit span {
position: relative;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.03em;
}
.blog-visual--audit span:nth-child(1)::after {
content: "✓";
position: absolute;
top: 8px;
right: 10px;
font-size: 11px;
color: #C8DD2E;
font-weight: 700;
}
/* ===== CONTENT — подписи под слайдами ===== */
.blog-visual--content {
background:
radial-gradient(circle at 20% 0%, rgba(255, 215, 247, 0.7), transparent 55%),
linear-gradient(135deg, #FFFAFC 0%, #FFE5F5 100%);
}
.blog-visual__slides i {
position: relative;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
padding: 12px;
align-items: end;
text-transform: uppercase;
}
/* ===== Больше воздуха в blog-visual padding ===== */
.blog-visual {
padding: 22px;
min-height: 200px;
align-content: space-between;
display: grid;
}
/* ============================================================
BLOG · DIAGRAM REDESIGN (2026-04-25 #3)
Разнообразие визуальных языков: donut, funnel, timeline,
radar, ranking pyramid. Уход от «все одинаковые bars».
============================================================ */
/* ===== SEARCH SHELF (lead cover) — RANKING PYRAMID ===== */
/* Bars становятся «pyramid»: левые низкие → центральная высокая,
с подписями top-N над каждой колонкой */
.blog-cover__bars {
height: 76px;
align-items: end;
gap: 8px;
padding-top: 22px;
border-top: 1px dashed rgba(10, 10, 10, 0.10);
position: relative;
}
.blog-cover__bars::before {
content: "распределение позиций по запросам";
position: absolute;
top: 4px;
left: 0;
font-family: var(--font-mono);
font-size: 9.5px;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.blog-cover__bars i {
flex: 1;
border-radius: 8px 8px 0 0;
background: linear-gradient(180deg, #2E5AFF 0%, #5C42FF 80%, #7A4FFF 100%);
position: relative;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 4px 12px rgba(46, 90, 255, 0.18);
}
.blog-cover__bars i:nth-child(odd) {
background: linear-gradient(180deg, rgba(46, 90, 255, 0.25) 0%, rgba(122, 79, 255, 0.20) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.blog-cover__bars i::before {
position: absolute;
bottom: calc(100% + 4px);
left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 9px;
color: var(--ink-soft);
letter-spacing: 0.04em;
white-space: nowrap;
}
.blog-cover__bars i:nth-child(1)::before { content: "top-22"; }
.blog-cover__bars i:nth-child(2)::before { content: "top-7"; }
.blog-cover__bars i:nth-child(3)::before { content: "top-15"; }
.blog-cover__bars i:nth-child(4)::before { content: "top-3"; color: #2E5AFF; font-weight: 600; }
.blog-cover__bars i:nth-child(5)::before { content: "top-5"; }
.blog-cover__bars i:nth-child(6)::before { content: "top-12"; }
/* ===== HERO DECK — bars становятся реальными метриками ===== */
.blog-hero__deck-line {
position: relative;
padding-top: 14px;
border-top: 1px dashed rgba(10, 10, 10, 0.10);
gap: 12px;
}
.blog-hero__deck-line span {
height: 8px;
border-radius: var(--r-pill);
position: relative;
}
.blog-hero__deck-line span::before {
position: absolute;
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.04em;
white-space: nowrap;
}
.blog-hero__deck-line span:nth-child(1) {
background: linear-gradient(90deg, #1A1A1A 0%, #4A4A4A 100%);
}
.blog-hero__deck-line span:nth-child(1)::before {
content: "seo · 78%"; color: var(--ink);
}
.blog-hero__deck-line span:nth-child(2) {
background: linear-gradient(90deg, #2E5AFF 0%, #7A4FFF 100%);
}
.blog-hero__deck-line span:nth-child(2)::before {
content: "ads · 54%"; color: #2E5AFF;
}
.blog-hero__deck-line span:nth-child(3) {
background: linear-gradient(90deg, #FFBD17 0%, #FF8C17 100%);
}
.blog-hero__deck-line span:nth-child(3)::before {
content: "ops · 88%"; color: #FF8C17;
}
/* ===== ADS — bid control: «эквалайзер» из 9 баров вместо 5 ===== */
.blog-visual--ads {
background:
radial-gradient(circle at 80% 0%, rgba(255, 189, 23, 0.30), transparent 60%),
linear-gradient(135deg, #FFFEF5 0%, #FFF8E0 100%);
}
.blog-visual--ads .blog-visual__bars {
height: 78px;
gap: 5px;
position: relative;
}
.blog-visual--ads .blog-visual__bars i {
flex: 1;
border-radius: 4px;
position: relative;
}
/* Каскадная высота — реалистичный bid pattern */
.blog-visual--ads .blog-visual__bars i:nth-child(1) { height: 38%; background: linear-gradient(180deg, #FFBD17, #FF8C17); }
.blog-visual--ads .blog-visual__bars i:nth-child(2) { height: 76%; background: linear-gradient(180deg, #1A1A1A, #3A3A3A); }
.blog-visual--ads .blog-visual__bars i:nth-child(3) { height: 50%; background: linear-gradient(180deg, #FFBD17, #FF8C17); }
.blog-visual--ads .blog-visual__bars i:nth-child(4) { height: 92%; background: linear-gradient(180deg, #1A1A1A, #3A3A3A); }
.blog-visual--ads .blog-visual__bars i:nth-child(5) { height: 64%; background: linear-gradient(180deg, #FFBD17, #FF8C17); }
/* ===== REVIEWS — DONUT chart c sentiment ===== */
.blog-visual--reviews {
background:
radial-gradient(circle at 0% 0%, rgba(0, 91, 255, 0.10), transparent 55%),
linear-gradient(135deg, #fff 0%, #F3F7FF 100%);
grid-template-columns: auto 1fr;
align-items: center;
gap: 18px;
}
.blog-visual--reviews .blog-visual__score {
position: relative;
width: 110px;
height: 110px;
border-radius: 50%;
font-size: 28px;
font-weight: 600;
display: grid;
place-items: center;
background:
conic-gradient(
#2E5AFF 0deg 234deg, /* 65% позитив (синий) */
#7A4FFF 234deg 320deg, /* 24% нейтральный */
rgba(255,189,23,0.85) 320deg 360deg /* 11% негативный */
);
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-text-fill-color: var(--ink);
color: var(--ink);
isolation: isolate;
}
.blog-visual--reviews .blog-visual__score::before {
content: "";
position: absolute;
inset: 12px;
background: #fff;
border-radius: 50%;
z-index: -1;
box-shadow: inset 0 1px 4px rgba(10, 10, 10, 0.08);
}
.blog-visual--reviews .blog-visual__score::after {
content: "★ 4.8";
position: static;
font-size: 17px;
font-weight: 600;
color: var(--ink);
-webkit-text-fill-color: var(--ink);
}
/* Скрываем оригинальный текст 4.8 — оставляем только ::after */
.blog-visual--reviews .blog-visual__score {
font-size: 0;
background-clip: border-box;
-webkit-background-clip: border-box;
}
.blog-visual--reviews .blog-visual__comments {
gap: 10px;
}
.blog-visual--reviews .blog-visual__comments i {
position: relative;
height: 8px;
border-radius: var(--r-pill);
}
.blog-visual--reviews .blog-visual__comments i:nth-child(1) {
background: linear-gradient(90deg, #2E5AFF, rgba(46, 90, 255, 0.25));
}
.blog-visual--reviews .blog-visual__comments i:nth-child(2) {
background: linear-gradient(90deg, #7A4FFF, rgba(122, 79, 255, 0.25));
}
.blog-visual--reviews .blog-visual__comments i:nth-child(3) {
background: linear-gradient(90deg, #FFBD17, rgba(255, 189, 23, 0.25));
}
.blog-visual--reviews .blog-visual__comments i::after {
position: absolute;
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
white-space: nowrap;
letter-spacing: 0.04em;
}
.blog-visual--reviews .blog-visual__comments i:nth-child(1)::after { content: "65%"; color: #2E5AFF; }
.blog-visual--reviews .blog-visual__comments i:nth-child(2)::after { content: "24%"; color: #7A4FFF; }
.blog-visual--reviews .blog-visual__comments i:nth-child(3)::after { content: "11%"; color: #FF8C17; }
.blog-visual--reviews .blog-visual__sentiment {
grid-column: 1 / -1;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
/* ===== TRAFFIC — FUNNEL (трапеции вместо линий) ===== */
.blog-visual--traffic {
background:
radial-gradient(circle at 50% 0%, rgba(0, 91, 255, 0.12), transparent 55%),
linear-gradient(135deg, #F3F7FF 0%, #fff 65%);
align-content: start;
gap: 14px;
}
.blog-visual__route {
margin-bottom: 8px;
}
.blog-visual__route b {
font-weight: 600;
font-size: 10px;
background: #fff;
padding: 5px 10px;
border-radius: var(--r-pill);
border: 1px solid rgba(0, 91, 255, 0.18);
color: #2E5AFF;
}
.blog-visual__route i {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 91, 255, 0.45) 50%, transparent);
}
.blog-visual__traffic-lines {
display: grid;
gap: 4px;
margin: 0 auto;
width: 100%;
max-width: 240px;
}
.blog-visual__traffic-lines i {
height: 18px;
background: linear-gradient(90deg, #2E5AFF 0%, #7A4FFF 100%);
border-radius: 2px;
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 9.5px;
color: rgba(255, 255, 255, 0.95);
letter-spacing: 0.04em;
font-style: normal;
font-weight: 600;
text-transform: lowercase;
}
.blog-visual__traffic-lines i:nth-child(1) { width: 100%; opacity: 1; }
.blog-visual__traffic-lines i:nth-child(2) { width: 78%; opacity: 0.86; }
.blog-visual__traffic-lines i:nth-child(3) { width: 54%; opacity: 0.72; }
.blog-visual__traffic-lines i:nth-child(4) { width: 32%; opacity: 0.58; }
.blog-visual__traffic-lines i::before {
content: "";
}
.blog-visual__traffic-lines i:nth-child(1)::after { content: "клик · 100%"; }
.blog-visual__traffic-lines i:nth-child(2)::after { content: "карточка · 78%"; }
.blog-visual__traffic-lines i:nth-child(3)::after { content: "корзина · 54%"; }
.blog-visual__traffic-lines i:nth-child(4)::after { content: "заказ · 32%"; }
.blog-visual__traffic-lines i::after {
position: relative;
font-family: var(--font-mono);
font-size: 9px;
color: rgba(255, 255, 255, 0.95);
white-space: nowrap;
letter-spacing: 0;
left: 0;
top: 0;
transform: none;
}
/* ===== LOGISTICS — flow с реальными иконками ===== */
.blog-visual--logistics {
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
background:
radial-gradient(circle at 50% 100%, rgba(16, 185, 129, 0.20), transparent 65%),
linear-gradient(135deg, #F3FBF7 0%, #DCEFE5 100%);
min-height: 200px;
}
.blog-visual--logistics span {
display: grid;
place-items: center;
gap: 8px;
min-height: 96px;
padding: 16px 12px;
background: #fff;
border: 1px solid rgba(16, 185, 129, 0.20);
border-radius: 10px;
box-shadow: 0 6px 16px rgba(16, 185, 129, 0.10);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.blog-visual--logistics span::before {
font-size: 22px;
line-height: 1;
}
.blog-visual--logistics span:nth-child(1)::before { content: "📦"; }
.blog-visual--logistics span:nth-child(3)::before { content: "📊"; }
.blog-visual--logistics span:nth-child(5)::before { content: "🏆"; }
.blog-visual--logistics i {
width: 36px;
height: 2px;
background: #10B981;
position: relative;
}
.blog-visual--logistics i::after {
content: "";
position: absolute;
right: -1px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 6px solid #10B981;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
/* ===== LAUNCH — горизонтальный TIMELINE из 4 этапов ===== */
.blog-visual--launch {
display: grid;
grid-template-columns: 1fr;
background:
radial-gradient(circle at 80% 20%, rgba(200, 221, 46, 0.40), transparent 55%),
linear-gradient(135deg, #FAFFE8 0%, #FAFAF7 100%);
gap: 0;
align-content: center;
padding: 22px 22px;
min-height: 200px;
position: relative;
}
.blog-visual--launch::before {
content: "";
position: absolute;
left: 35px;
right: 35px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #C8DD2E 0%, #1A1A1A 100%);
z-index: 0;
}
.blog-visual--launch span {
display: none;
}
/* Превращаем 4 spans в timeline-точки */
.blog-visual--launch {
grid-template-columns: repeat(4, 1fr);
align-content: center;
align-items: center;
}
.blog-visual--launch span {
display: grid;
place-items: center;
position: relative;
z-index: 1;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink);
height: auto;
min-height: 0;
text-align: center;
}
.blog-visual--launch span::before {
content: "";
width: 32px;
height: 32px;
margin-bottom: 8px;
border-radius: 50%;
background: #fff;
border: 2px solid #C8DD2E;
box-shadow: 0 4px 10px rgba(200, 221, 46, 0.30);
display: grid;
place-items: center;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: #1A1A1A;
}
.blog-visual--launch span:nth-child(1)::before { content: "01"; }
.blog-visual--launch span:nth-child(2)::before { content: "02"; }
.blog-visual--launch span:nth-child(3)::before { content: "03"; }
.blog-visual--launch span:nth-child(4)::before { content: "04"; background: #1A1A1A; color: #C8DD2E; border-color: #1A1A1A; box-shadow: 0 4px 12px rgba(10, 10, 10, 0.30); }
/* ===== CONTENT (slides) — добавляем «прогресс» сверху как сторис ===== */
.blog-visual--content {
position: relative;
background:
radial-gradient(circle at 20% 0%, rgba(255, 215, 247, 0.85), transparent 55%),
linear-gradient(135deg, #FFFAFC 0%, #FFE5F5 100%);
}
.blog-visual--content::before {
content: "";
position: absolute;
top: 14px;
left: 22px;
right: 22px;
height: 3px;
border-radius: 2px;
background:
linear-gradient(90deg,
#1A1A1A 0%, #1A1A1A 33%,
rgba(10,10,10,0.18) 33%, rgba(10,10,10,0.18) 66%,
rgba(10,10,10,0.18) 66%, rgba(10,10,10,0.18) 100%);
background-size: 100% 100%;
z-index: 1;
}
/* ===== AUDIT — checklist с галочками ===== */
.blog-visual--audit {
background:
radial-gradient(circle at 80% 0%, rgba(243, 227, 179, 0.55), transparent 55%),
linear-gradient(135deg, #FFFCF5 0%, #FAFAF7 100%);
}
.blog-visual--audit span {
position: relative;
padding-left: 36px;
text-align: left;
display: flex;
align-items: center;
font-size: 12.5px;
font-weight: 600;
}
.blog-visual--audit span::before {
content: "✓";
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border-radius: 50%;
background: #C8DD2E;
color: #0A0A0A;
font-size: 11px;
font-weight: 700;
display: grid;
place-items: center;
}
.blog-visual--audit span:nth-child(1)::before {
background: rgba(255, 255, 255, 0.20);
color: #C8DD2E;
}
.blog-visual--audit span:nth-child(1)::after {
content: none;
}
/* ===== TELEGRAM CARD (новый) ===== */
.blog-card--telegram {
background: linear-gradient(135deg, #229ED9 0%, #2E5AFF 100%);
border-color: transparent;
color: #fff;
position: relative;
overflow: hidden;
}
.blog-card--telegram::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.20), transparent 50%),
radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.10), transparent 50%);
pointer-events: none;
}
.blog-card--telegram .blog-card__media {
background: transparent;
position: relative;
display: grid;
align-content: space-between;
gap: 14px;
padding: 22px;
min-height: 200px;
z-index: 1;
}
.blog-card--telegram::after {
content: "";
position: absolute;
top: -60px;
right: -60px;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 70%);
pointer-events: none;
}
.blog-tg__live {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.85);
align-self: start;
}
.blog-tg__live i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #00FF94;
box-shadow: 0 0 8px #00FF94;
animation: tgPulse 2s ease-in-out infinite;
}
@keyframes tgPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.85); }
}
.blog-tg__plane {
align-self: center;
justify-self: center;
color: #fff;
filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.20));
animation: tgFloat 4s ease-in-out infinite;
}
@keyframes tgFloat {
0%, 100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-6px) rotate(-3deg); }
}
.blog-tg__count {
display: flex;
align-items: baseline;
gap: 8px;
align-self: end;
position: relative;
z-index: 2;
}
.blog-tg__count b {
font-size: 30px;
font-weight: 600;
letter-spacing: -0.01em;
}
.blog-tg__count em {
font-style: normal;
font-size: 11px;
font-family: var(--font-mono);
color: rgba(255, 255, 255, 0.75);
letter-spacing: 0.04em;
text-transform: lowercase;
}
.blog-tg__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
position: relative;
z-index: 2;
}
.blog-tg__chips i {
font-style: normal;
font-family: var(--font-mono);
font-size: 10px;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.22);
color: #fff;
padding: 5px 10px;
border-radius: var(--r-pill);
letter-spacing: 0.04em;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.blog-card--telegram .blog-meta span:first-child {
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
.blog-card--telegram p {
color: rgba(255, 255, 255, 0.78);
}
.blog-card--telegram h3 a {
color: #fff;
}
/* ============================================================
BLOG · CLEANUP PASS (2026-04-25 #4)
Less is more: убрать эмодзи, лишние подписи,
привести все диаграммы к спокойному монохромному стилю
с одним акцентным цветом на карточку
============================================================ */
/* ===== HERO DECK — убрать % метрики (просто bars) ===== */
.blog-hero__deck-line span::before { content: none !important; }
.blog-hero__deck-line span:nth-child(1) { background: #1A1A1A; opacity: 0.85; }
.blog-hero__deck-line span:nth-child(2) { background: #1A1A1A; opacity: 0.55; }
.blog-hero__deck-line span:nth-child(3) { background: #1A1A1A; opacity: 0.30; }
/* ===== SEARCH SHELF — убрать «top-N» лейблы над барами ===== */
.blog-cover__bars i::before { content: none !important; }
.blog-cover__bars::before { content: none !important; }
.blog-cover__bars { padding-top: 0; border-top: none; height: 56px; }
.blog-cover__bars i {
background: linear-gradient(180deg, #2E5AFF 0%, #5C42FF 100%) !important;
opacity: 1 !important;
box-shadow: none !important;
}
.blog-cover__bars i:nth-child(odd) {
opacity: 0.32 !important;
}
/* ===== ADS — убрать orange-чёрные чередования; единый монохром ===== */
.blog-visual--ads {
background:
radial-gradient(circle at 80% 0%, rgba(255, 189, 23, 0.16), transparent 60%),
linear-gradient(135deg, #FFFCF0 0%, #FFF7E0 100%);
}
.blog-visual--ads .blog-visual__bars i {
background: #1A1A1A !important;
border-radius: 4px !important;
box-shadow: none !important;
}
.blog-visual--ads .blog-visual__bars i:nth-child(odd) {
background: rgba(26, 26, 26, 0.32) !important;
}
.blog-visual--ads .blog-visual__label::before { content: none; }
/* ===== ECONOMICS — спокойнее, lime только акцент в pill ===== */
.blog-visual--economics {
background: linear-gradient(135deg, #1F1F1F 0%, #0F0F0F 100%);
}
.blog-visual--economics::before {
background:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 22px 22px;
}
.blog-visual__profit {
background: #C8DD2E !important;
color: #0A0A0A !important;
box-shadow: none !important;
font-weight: 600;
}
.blog-visual__line { height: 4px; }
.blog-visual__line i {
background: #C8DD2E !important;
}
/* ===== REVIEWS — упростить donut: один акцент, аккуратнее текст ===== */
.blog-visual--reviews {
grid-template-columns: auto 1fr;
align-items: center;
gap: 18px;
background: linear-gradient(135deg, #fff 0%, #F4F7FF 100%);
}
.blog-visual--reviews .blog-visual__score {
width: 88px;
height: 88px;
background:
conic-gradient(
#2E5AFF 0deg 234deg,
rgba(46, 90, 255, 0.18) 234deg 360deg
) !important;
}
.blog-visual--reviews .blog-visual__score::before {
inset: 8px;
}
.blog-visual--reviews .blog-visual__score::after {
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
}
.blog-visual--reviews .blog-visual__comments i::after { content: none !important; }
.blog-visual--reviews .blog-visual__comments {
gap: 8px;
}
.blog-visual--reviews .blog-visual__comments i {
height: 6px !important;
background: #2E5AFF !important;
}
.blog-visual--reviews .blog-visual__comments i:nth-child(1) { width: 76%; opacity: 1; }
.blog-visual--reviews .blog-visual__comments i:nth-child(2) { width: 54%; opacity: 0.6; }
.blog-visual--reviews .blog-visual__comments i:nth-child(3) { width: 86%; opacity: 0.32; }
.blog-visual--reviews .blog-visual__sentiment {
grid-column: 1 / -1;
font-size: 9.5px;
color: var(--muted);
margin-top: 2px;
letter-spacing: 0.06em;
}
/* ===== TRAFFIC — funnel-стиль остаётся, но без подписей внутри ===== */
.blog-visual--traffic {
background: linear-gradient(135deg, #F3F7FF 0%, #fff 65%);
}
.blog-visual__traffic-lines i::after { content: none !important; }
.blog-visual__traffic-lines i {
height: 14px !important;
background: #2E5AFF !important;
border-radius: 2px !important;
font-size: 0;
}
.blog-visual__traffic-lines i:nth-child(1) { width: 100%; opacity: 1; }
.blog-visual__traffic-lines i:nth-child(2) { width: 78%; opacity: 0.72; }
.blog-visual__traffic-lines i:nth-child(3) { width: 54%; opacity: 0.48; }
.blog-visual__traffic-lines i:nth-child(4) { width: 32%; opacity: 0.28; }
/* ===== LOGISTICS — убрать эмодзи, чистые чипы ===== */
.blog-visual--logistics span::before { content: none !important; }
.blog-visual--logistics {
background: linear-gradient(135deg, #F4FAF7 0%, #DCEFE5 100%);
min-height: 200px;
align-items: center;
}
.blog-visual--logistics span {
min-height: 64px;
padding: 12px;
background: #fff;
border: 1px solid rgba(16, 185, 129, 0.20);
border-radius: 8px;
font-size: 11.5px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
box-shadow: none !important;
}
.blog-visual--logistics i {
width: 28px;
height: 1.5px;
background: rgba(16, 185, 129, 0.55);
}
.blog-visual--logistics i::after { content: none !important; }
/* ===== LAUNCH — timeline без gradient lime, просто черно-белый ===== */
.blog-visual--launch {
background: linear-gradient(135deg, #FAFAF7 0%, #F2F2EE 100%);
min-height: 200px;
}
.blog-visual--launch::before {
background: linear-gradient(90deg, rgba(10,10,10,0.18) 0%, rgba(10,10,10,0.32) 70%, #1A1A1A 100%) !important;
height: 1.5px;
}
.blog-visual--launch span::before {
border-color: rgba(10, 10, 10, 0.18);
box-shadow: none;
background: #fff;
}
.blog-visual--launch span:nth-child(4)::before {
background: #1A1A1A;
color: #fff;
border-color: #1A1A1A;
box-shadow: 0 4px 10px rgba(10, 10, 10, 0.18);
}
/* ===== CONTENT — убрать stories-progress, оставить только slides ===== */
.blog-visual--content::before { content: none !important; }
.blog-visual--content {
background: linear-gradient(135deg, #FFF8FB 0%, #FFEAF5 100%);
}
.blog-visual__slides i {
background: rgba(255, 255, 255, 0.92) !important;
border: 1px solid rgba(10, 10, 10, 0.08) !important;
box-shadow: none !important;
}
.blog-visual__slides i:nth-child(2) {
background: #1A1A1A !important;
color: #fff !important;
box-shadow: 0 4px 14px rgba(10, 10, 10, 0.16) !important;
}
/* ===== AUDIT — убрать pill-checkmark с не-dark чипов ===== */
.blog-visual--audit span::before { content: none !important; }
.blog-visual--audit span {
padding: 14px;
text-align: left;
font-size: 12.5px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 8px;
display: grid;
place-items: center;
background: #fff;
box-shadow: none !important;
}
.blog-visual--audit span:nth-child(1) {
background: #1A1A1A;
color: #fff;
position: relative;
}
.blog-visual--audit span:nth-child(1)::after {
content: "✓";
position: absolute;
top: 8px;
right: 10px;
font-size: 11px;
color: #C8DD2E;
font-weight: 700;
}
/* ===== TELEGRAM — доработка ===== */
.blog-card--telegram {
background: linear-gradient(135deg, #229ED9 0%, #1F7BC4 60%, #1A5FA8 100%);
}
.blog-card--telegram::before {
background:
radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.18), transparent 50%),
radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0.15), transparent 50%);
}
.blog-card--telegram::after {
/* Декоративная точка-сетка вместо круглого glow */
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
background-size: 16px 16px;
-webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,0.8), transparent 70%);
mask-image: linear-gradient(135deg, rgba(0,0,0,0.8), transparent 70%);
pointer-events: none;
width: auto;
height: auto;
top: 0;
right: 0;
border-radius: 0;
}
.blog-card--telegram .blog-card__media {
padding: 24px;
min-height: 220px;
}
.blog-tg__plane {
align-self: center;
justify-self: end;
margin-right: 4px;
}
.blog-tg__plane svg {
width: 56px;
height: 56px;
}
.blog-tg__count {
align-self: end;
}
.blog-tg__count b {
font-size: 36px;
letter-spacing: -0.02em;
}
.blog-tg__count em {
font-size: 11px;
}
/* ===== Универсальные правки ===== */
/* Убрать grid pattern overlay со всех visual'ов — слишком шумно */
.blog-visual::before {
opacity: 0.5;
}
.blog-visual--economics::before {
opacity: 0.4;
}
/* Card border унификация */
.blog-card {
border: 1px solid rgba(10, 10, 10, 0.08);
border-radius: 12px;
}
.blog-card--accent { border-color: rgba(255, 189, 23, 0.25); }
.blog-card--dark { border-color: rgba(10, 10, 10, 0.30); }
.blog-card--telegram { border-color: rgba(34, 158, 217, 0.30); }
/* ============================================================
BLOG · TELEGRAM CARD COMPLETE REDESIGN (2026-04-25 #5)
Полная композиция: avatar + handle + chat preview + CTA
============================================================ */
/* ===== Сброс старых классов телеграма (чтобы не накладывалось) ===== */
.blog-card--telegram .blog-tg__chips,
.blog-card--telegram .blog-tg__plane:not(.blog-tg__top .blog-tg__plane) {
display: none !important;
}
/* ===== CARD container ===== */
.blog-card--telegram {
background:
radial-gradient(circle at 90% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
linear-gradient(135deg, #2DA9E1 0%, #229ED9 35%, #1F7BC4 70%, #1A5FA8 100%);
border: 1px solid rgba(34, 158, 217, 0.32);
position: relative;
overflow: hidden;
}
.blog-card--telegram::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
background-size: 14px 14px;
-webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,0.7) 10%, transparent 70%);
mask-image: linear-gradient(135deg, rgba(0,0,0,0.7) 10%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.blog-card--telegram::after {
/* Мягкий световой блик в правом-верхнем углу */
content: "";
position: absolute;
top: -80px;
right: -80px;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 60%);
pointer-events: none;
z-index: 0;
}
.blog-card--telegram .blog-card__media {
display: grid;
grid-template-rows: auto 1fr auto;
gap: 16px;
padding: 20px 22px;
min-height: 240px;
position: relative;
z-index: 1;
background: transparent;
}
/* ===== TOP row: avatar + handle + plane ===== */
.blog-tg__top {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
}
.blog-tg__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #fff 0%, #DDF0FF 100%);
display: grid;
place-items: center;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
position: relative;
}
.blog-tg__avatar span {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: #1A5FA8;
text-transform: uppercase;
line-height: 1;
}
.blog-tg__avatar::after {
/* Зелёная точка-«online» рядом с аватаркой */
content: "";
position: absolute;
bottom: -1px;
right: -1px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #00FF94;
border: 2px solid #1F7BC4;
box-shadow: 0 0 8px rgba(0, 255, 148, 0.6);
}
.blog-tg__id {
display: grid;
gap: 2px;
min-width: 0;
}
.blog-tg__id strong {
color: #fff;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
font-family: var(--font-sans);
}
.blog-tg__live {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.78);
font-weight: 500;
}
.blog-tg__live i {
width: 6px;
height: 6px;
border-radius: 50%;
background: #00FF94;
box-shadow: 0 0 6px rgba(0, 255, 148, 0.8);
animation: tgPulse 1.8s ease-in-out infinite;
}
@keyframes tgPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.7); }
}
.blog-tg__top .blog-tg__plane {
display: inline-block !important;
color: #fff;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.20));
animation: tgFloat 4.5s ease-in-out infinite;
align-self: start;
margin-top: 2px;
}
@keyframes tgFloat {
0%, 100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-4px) rotate(-6deg); }
}
/* ===== MESSAGE bubbles preview ===== */
.blog-tg__messages {
display: grid;
gap: 8px;
align-content: center;
}
.blog-tg__bubble {
background: rgba(255, 255, 255, 0.96);
color: #1F7BC4;
padding: 9px 13px;
border-radius: 14px 14px 14px 4px;
font-size: 12px;
line-height: 1.35;
font-weight: 500;
max-width: 88%;
justify-self: start;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
position: relative;
letter-spacing: -0.005em;
opacity: 0;
transform: translateY(6px);
animation: tgBubbleIn 600ms var(--ease-out) 0.2s forwards;
}
.blog-tg__bubble--reply {
background: linear-gradient(135deg, #DDF0FF 0%, #B3DBF8 100%);
color: #16487F;
font-size: 11.5px;
align-self: end;
justify-self: end;
border-radius: 14px 14px 4px 14px;
max-width: 76%;
animation-delay: 0.45s;
}
@keyframes tgBubbleIn {
to { opacity: 1; transform: translateY(0); }
}
/* ===== BOTTOM: subscribers + CTA ===== */
.blog-tg__bottom {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 12px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.blog-tg__count {
display: flex;
flex-direction: column;
gap: 2px;
}
.blog-tg__count b {
font-size: 28px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1;
color: #fff;
display: inline-flex;
align-items: baseline;
}
.blog-tg__count b i {
font-style: normal;
font-size: 18px;
color: rgba(255, 255, 255, 0.7);
margin-left: 1px;
}
.blog-tg__count em {
font-style: normal;
font-size: 10px;
font-family: var(--font-mono);
color: rgba(255, 255, 255, 0.65);
letter-spacing: 0.04em;
text-transform: lowercase;
}
.blog-tg__cta {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.28);
padding: 8px 14px;
border-radius: var(--r-pill);
color: #fff;
font-family: var(--font-mono);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 500;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition:
background 220ms var(--ease-out),
color 220ms var(--ease-out),
transform 220ms var(--ease-spring-soft);
}
.blog-tg__cta svg {
transition: transform 220ms var(--ease-out);
}
/* ===== HOVER state ===== */
.blog-card--telegram:hover .blog-tg__cta {
background: #fff;
color: #1F7BC4;
transform: translateY(-1px);
}
.blog-card--telegram:hover .blog-tg__cta svg {
transform: translateX(3px);
}
.blog-card--telegram:hover .blog-tg__plane {
animation-duration: 2.5s;
}
/* ===== TEXT/META overrides for telegram card body ===== */
.blog-card--telegram .blog-meta span:first-child {
background: rgba(34, 158, 217, 0.14);
color: #1F7BC4;
}
.blog-card--telegram .blog-meta span:not(:first-child) {
color: var(--muted);
}
/* ============================================================
BLOG · FINAL POLISH (2026-04-25 #6)
Содержательные визуалы вместо плейсхолдеров,
единая палитра, реальные мокапы и метрики.
Этот пасс перебивает все предыдущие конфликтные правила.
============================================================ */
/* Универсальная шапка визуала: label + pill */
.blog-visual__head {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 10px;
font-family: var(--font-mono);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
}
.blog-visual__head .blog-visual__label { color: var(--muted); }
.blog-visual__pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: var(--r-pill);
background: rgba(10, 10, 10, 0.06);
color: var(--ink);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.06em;
}
.blog-visual__pill--green {
background: rgba(16, 185, 129, 0.14);
color: #0E8A66;
}
.blog-visual__pill--blue {
background: rgba(46, 90, 255, 0.12);
color: #2E5AFF;
}
.blog-visual__pill--dark {
background: #1A1A1A;
color: #fff;
}
/* ===== ADS · бар-чарт с подписями кампаний и ставками ===== */
.blog-visual--ads {
background:
radial-gradient(circle at 86% 0%, rgba(255, 189, 23, 0.18), transparent 55%),
linear-gradient(135deg, #FFFCF0 0%, #FFF6DA 100%) !important;
display: grid !important;
grid-template-rows: auto 1fr auto;
gap: 12px;
}
.blog-visual--ads .blog-visual__bars {
height: auto !important;
display: grid !important;
grid-template-columns: repeat(5, 1fr);
align-items: end;
gap: 8px;
padding-top: 6px;
border-top: 1px dashed rgba(10, 10, 10, 0.08);
}
.blog-visual--ads .blog-visual__bars i {
position: relative;
height: auto !important;
min-height: 0 !important;
flex: none !important;
display: grid;
grid-template-rows: 1fr auto auto;
gap: 4px;
align-items: end;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
font-style: normal;
}
.blog-visual--ads .blog-visual__bars i::before {
content: "";
display: block;
background: linear-gradient(180deg, #1A1A1A 0%, #2D2D2D 100%);
border-radius: 4px 4px 0 0;
margin-top: auto;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.blog-visual--ads .blog-visual__bars i:nth-child(1)::before { height: 26px; }
.blog-visual--ads .blog-visual__bars i:nth-child(2)::before { height: 18px; background: rgba(26, 26, 26, 0.32); }
.blog-visual--ads .blog-visual__bars i:nth-child(3)::before { height: 12px; background: rgba(26, 26, 26, 0.28); }
.blog-visual--ads .blog-visual__bars i:nth-child(4)::before { height: 22px; background: rgba(26, 26, 26, 0.32); }
.blog-visual--ads .blog-visual__bars i:nth-child(5)::before {
height: 36px;
background: linear-gradient(180deg, #FFBD17 0%, #FF8C17 100%);
box-shadow: 0 4px 10px rgba(255, 140, 23, 0.28);
}
.blog-visual--ads .blog-visual__bars b {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 500;
color: var(--muted);
letter-spacing: 0.04em;
text-transform: lowercase;
text-align: center;
font-style: normal;
}
.blog-visual--ads .blog-visual__bars em {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
color: var(--ink);
font-style: normal;
text-align: center;
letter-spacing: -0.01em;
}
.blog-visual--ads .blog-visual__bars i:nth-child(5) em {
color: #FF8C17;
}
.blog-visual--ads .blog-visual__metrics {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding-top: 10px;
border-top: 1px dashed rgba(10, 10, 10, 0.08);
}
.blog-visual--ads .blog-visual__metric {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 12px;
border-radius: 8px;
background: #fff;
border: 1px solid rgba(10, 10, 10, 0.06);
font-family: var(--font-mono);
}
.blog-visual--ads .blog-visual__metric em {
font-size: 9.5px;
font-style: normal;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.blog-visual--ads .blog-visual__metric b {
font-size: 13px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
}
.blog-visual--ads .blog-visual__metric--alt b {
color: #FF8C17;
}
/* убираем хвосты от старых правил */
.blog-visual--ads .blog-visual__row { display: none !important; }
.blog-visual--ads .blog-visual__label::before { content: none !important; }
.blog-visual--ads:hover .blog-visual__bars i { animation: none !important; }
/* ===== REVIEWS · score + распределение звёзд + цитата ===== */
.blog-visual--reviews {
display: grid !important;
grid-template-rows: auto auto !important;
grid-template-columns: 1fr !important;
gap: 14px !important;
padding: 22px !important;
background:
radial-gradient(circle at 0% 0%, rgba(46, 90, 255, 0.10), transparent 55%),
linear-gradient(135deg, #fff 0%, #F4F7FF 100%) !important;
align-content: space-between !important;
}
.blog-visual--reviews .blog-visual__rev-top {
display: grid;
grid-template-columns: auto 1fr;
gap: 16px;
align-items: center;
}
.blog-visual--reviews .blog-visual__score {
width: auto !important;
height: auto !important;
background: none !important;
display: grid;
gap: 2px;
font-size: 0;
-webkit-text-fill-color: initial;
color: var(--ink);
isolation: auto;
}
.blog-visual--reviews .blog-visual__score::before,
.blog-visual--reviews .blog-visual__score::after { content: none !important; }
.blog-visual__score-num {
font-size: 38px;
font-weight: 600;
line-height: 0.95;
letter-spacing: -0.02em;
color: var(--ink);
background: linear-gradient(135deg, #2E5AFF 0%, #7A4FFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.blog-visual__score-sub {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.04em;
text-transform: lowercase;
color: var(--muted);
}
.blog-visual__stars {
display: grid;
gap: 4px;
}
.blog-visual__star-row {
display: flex;
align-items: center;
gap: 4px;
}
.blog-visual__star {
width: 10px;
height: 10px;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
background: rgba(10, 10, 10, 0.16);
}
.blog-visual__star.is-on { background: #FFBD17; }
.blog-visual__star-row em {
margin-left: 6px;
font-style: normal;
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.04em;
color: var(--muted);
text-transform: lowercase;
}
.blog-visual--reviews .blog-visual__quote {
display: flex;
gap: 6px;
padding: 10px 12px;
border-radius: 10px;
background: #fff;
border: 1px solid rgba(46, 90, 255, 0.12);
font-size: 12px;
line-height: 1.32;
color: var(--ink);
font-weight: 500;
letter-spacing: -0.005em;
text-transform: none;
font-family: var(--font-sans);
}
.blog-visual__quote-mark {
display: inline-block;
font-family: 'Georgia', serif;
font-size: 24px;
line-height: 0.6;
color: #2E5AFF;
margin-top: 4px;
flex: none;
}
/* удаляем старые подписи %, comments-bars */
.blog-visual--reviews .blog-visual__comments,
.blog-visual--reviews .blog-visual__sentiment {
display: none !important;
}
/* ===== LOGISTICS · сравнительная таблица FBO vs FBS ===== */
.blog-visual--logistics {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto 1fr !important;
gap: 12px;
align-items: stretch !important;
align-content: start !important;
padding: 22px !important;
min-height: 0 !important;
background:
radial-gradient(circle at 100% 100%, rgba(16, 185, 129, 0.18), transparent 60%),
linear-gradient(135deg, #F4FBF7 0%, #DEF1E6 100%) !important;
}
.blog-visual--logistics > span:not(.blog-visual__head):not(.blog-log-table) {
display: none !important;
}
.blog-visual--logistics > i { display: none !important; }
.blog-log-table {
display: grid !important;
gap: 4px;
padding: 10px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(16, 185, 129, 0.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.blog-log-table__row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 6px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.02em;
color: var(--ink);
font-style: normal;
text-transform: none;
}
.blog-log-table__row em {
font-style: normal;
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
}
.blog-log-table__row b {
font-weight: 600;
font-size: 11.5px;
letter-spacing: -0.01em;
color: var(--ink);
}
.blog-log-table__row b.is-good { color: #0E8A66; }
.blog-log-table__row--head {
border-bottom: 1px solid rgba(16, 185, 129, 0.14);
margin-bottom: 2px;
padding-bottom: 8px;
}
.blog-log-table__row--head b {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #0E8A66;
}
/* ===== LAUNCH · timeline с описаниями ===== */
.blog-visual--launch {
display: grid !important;
grid-template-rows: auto 1fr !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
align-content: start !important;
align-items: stretch !important;
padding: 22px !important;
min-height: 0 !important;
background:
radial-gradient(circle at 80% 0%, rgba(122, 79, 255, 0.10), transparent 55%),
linear-gradient(135deg, #FAFAF7 0%, #F2F2EE 100%) !important;
position: relative;
}
.blog-visual--launch::before { content: none !important; }
.blog-visual--launch > span:not(.blog-visual__head):not(.blog-launch),
.blog-visual--launch > span.blog-visual--launch span:not(.blog-launch__step) {
display: none !important;
}
.blog-launch {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
align-items: start;
gap: 8px;
position: relative;
padding-top: 22px;
}
.blog-launch::before {
content: "";
position: absolute;
top: 32px;
left: 12.5%;
right: 12.5%;
height: 2px;
background: linear-gradient(90deg, rgba(10, 10, 10, 0.14) 0%, rgba(10, 10, 10, 0.14) 75%, #1A1A1A 75%, #1A1A1A 100%);
}
.blog-launch__step {
display: grid !important;
grid-template-rows: auto auto auto;
justify-items: center;
gap: 4px;
position: relative;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
font-style: normal !important;
text-transform: none !important;
letter-spacing: normal !important;
min-height: 0 !important;
height: auto !important;
text-align: center;
z-index: 1;
}
.blog-launch__step::before { content: none !important; }
.blog-launch__step i {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
border: 1.5px solid rgba(10, 10, 10, 0.18);
font-family: var(--font-mono);
font-size: 9px;
font-weight: 600;
font-style: normal;
color: var(--ink);
letter-spacing: 0.02em;
}
.blog-launch__step.is-current i {
background: #1A1A1A;
color: #fff;
border-color: #1A1A1A;
box-shadow: 0 4px 10px rgba(10, 10, 10, 0.20);
}
.blog-launch__step b {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--ink);
text-transform: uppercase;
margin-top: 4px;
}
.blog-launch__step.is-current b { color: #1A1A1A; }
.blog-launch__step em {
font-style: normal;
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
letter-spacing: 0.02em;
text-transform: lowercase;
line-height: 1.3;
text-align: center;
max-width: 84px;
}
/* ===== TRAFFIC · аккуратная воронка с цифрами ===== */
.blog-visual--traffic {
display: grid !important;
grid-template-rows: auto 1fr !important;
gap: 14px !important;
padding: 22px !important;
align-content: start !important;
background:
radial-gradient(circle at 0% 0%, rgba(46, 90, 255, 0.12), transparent 55%),
linear-gradient(135deg, #F4F7FF 0%, #fff 65%) !important;
}
.blog-visual--traffic .blog-visual__route,
.blog-visual--traffic .blog-visual__traffic-lines {
display: none !important;
}
.blog-funnel {
display: grid !important;
gap: 6px;
align-content: center;
}
.blog-funnel__step {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 10px;
padding: 7px 14px;
width: var(--w);
margin: 0 auto;
min-width: 36%;
border-radius: 6px;
background: linear-gradient(90deg, #2E5AFF 0%, #5C42FF 100%);
color: #fff;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.02em;
box-shadow: 0 4px 10px rgba(46, 90, 255, 0.15);
}
.blog-funnel__step:nth-child(1) { opacity: 1; }
.blog-funnel__step:nth-child(2) { opacity: 0.86; }
.blog-funnel__step:nth-child(3) { opacity: 0.74; }
.blog-funnel__step.is-final {
background: linear-gradient(90deg, #FFBD17 0%, #FF8C17 100%);
box-shadow: 0 4px 10px rgba(255, 140, 23, 0.30);
opacity: 1;
}
.blog-funnel__step em {
font-style: normal;
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.9;
}
.blog-funnel__step b {
font-size: 12px;
font-weight: 700;
letter-spacing: -0.01em;
}
.blog-funnel__delta {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 500;
padding: 2px 6px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.18);
letter-spacing: 0.04em;
text-transform: lowercase;
white-space: nowrap;
}
/* ===== AUDIT · чек-лист метрик с индикаторами ===== */
.blog-visual--audit {
display: grid !important;
grid-template-rows: auto 1fr !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
align-content: start !important;
padding: 22px !important;
min-height: 0 !important;
background:
radial-gradient(circle at 80% 0%, rgba(255, 189, 23, 0.16), transparent 55%),
linear-gradient(135deg, #FFFCF5 0%, #FAFAF7 100%) !important;
}
.blog-card--accent .blog-visual--audit,
.blog-visual--audit {
background:
radial-gradient(circle at 80% 0%, rgba(255, 189, 23, 0.18), transparent 55%),
linear-gradient(135deg, #FFFCF5 0%, #FAFAF7 100%) !important;
}
.blog-visual--audit > span:not(.blog-visual__head):not(.blog-audit) {
display: none !important;
}
.blog-audit {
display: grid !important;
gap: 4px;
padding: 8px;
background: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(10, 10, 10, 0.06);
border-radius: 10px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.blog-audit__row {
display: grid;
grid-template-columns: minmax(0, 0.9fr) auto auto;
align-items: center;
gap: 10px;
padding: 6px 10px;
border-radius: 7px;
background: #fff;
border: 1px solid rgba(10, 10, 10, 0.05);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.02em;
font-style: normal;
}
.blog-audit__row em {
font-style: normal;
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
}
.blog-audit__row b {
font-weight: 700;
font-size: 12px;
color: var(--ink);
letter-spacing: -0.01em;
}
.blog-audit__row i {
font-style: normal;
font-size: 9px;
padding: 3px 7px;
border-radius: 4px;
background: rgba(10, 10, 10, 0.06);
color: var(--muted);
letter-spacing: 0.04em;
text-transform: lowercase;
white-space: nowrap;
}
.blog-audit__row.is-good i {
background: rgba(16, 185, 129, 0.14);
color: #0E8A66;
}
.blog-audit__row.is-good b { color: #0E8A66; }
.blog-audit__row.is-warn i {
background: rgba(255, 189, 23, 0.18);
color: #B57700;
}
.blog-audit__row.is-bad i {
background: rgba(220, 38, 38, 0.10);
color: #B91C1C;
}
.blog-audit__row.is-bad b { color: #B91C1C; }
/* Убираем все ::after-галочки из старых пассов */
.blog-visual--audit span::before,
.blog-visual--audit span::after { content: none !important; }
/* ===== ECONOMICS · подчистить хвосты ===== */
.blog-visual--economics {
background: linear-gradient(135deg, #1F1F1F 0%, #0F0F0F 100%) !important;
display: grid !important;
grid-template-rows: auto auto auto !important;
gap: 12px !important;
padding: 22px !important;
}
/* ===== CONTENT · чище ===== */
.blog-visual--content {
background:
radial-gradient(circle at 20% 0%, rgba(255, 215, 247, 0.7), transparent 55%),
linear-gradient(135deg, #FFFAFC 0%, #FFE5F5 100%) !important;
}
/* ===== SIDE · «что влияет на рост» — editorial 1+3 ===== */
.blog-side {
display: grid !important;
grid-template-columns: 1fr !important;
border: 1px solid rgba(10, 10, 10, 0.08) !important;
border-radius: 12px;
padding: 22px;
background: linear-gradient(180deg, #FCFBF7 0%, #fff 100%);
gap: 18px;
}
.blog-side__head {
display: grid !important;
gap: 8px;
padding: 0 0 16px !important;
margin-bottom: 0 !important;
border-right: 0 !important;
border-bottom: 1px solid rgba(10, 10, 10, 0.06) !important;
}
.blog-side__eyebrow {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 8px;
}
.blog-side__eyebrow::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #2E5AFF;
box-shadow: 0 0 0 3px rgba(46, 90, 255, 0.18);
}
.blog-side__head strong {
font-size: clamp(20px, 1.9vw, 26px) !important;
line-height: 1.12 !important;
font-weight: 600 !important;
letter-spacing: -0.01em;
color: var(--ink);
text-wrap: balance;
}
.blog-side__lead {
margin: 0 !important;
font-size: 13px !important;
line-height: 1.45 !important;
color: var(--muted) !important;
max-width: 480px;
}
.blog-side__list {
display: grid;
gap: 4px;
}
.blog-side__item {
display: grid !important;
grid-template-columns: auto 1fr auto !important;
align-items: start;
gap: 16px;
padding: 16px 14px !important;
border: 1px solid transparent !important;
border-bottom: 1px solid rgba(10, 10, 10, 0.06) !important;
border-radius: 10px;
transition:
background 220ms var(--ease-out),
border-color 220ms var(--ease-out),
transform 220ms var(--ease-spring-soft) !important;
text-decoration: none;
}
.blog-side__item:last-child { border-bottom: 1px solid transparent !important; }
.blog-side__item:hover {
background: #fff;
border-color: rgba(46, 90, 255, 0.14) !important;
transform: translateX(2px) !important;
box-shadow: 0 6px 20px rgba(10, 10, 10, 0.05);
}
.blog-side__num {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--muted);
padding: 4px 8px;
border: 1px solid rgba(10, 10, 10, 0.10);
border-radius: 5px;
background: #fff;
margin-top: 2px;
transition: color 220ms var(--ease-out), border-color 220ms var(--ease-out), background 220ms var(--ease-out);
}
.blog-side__item:hover .blog-side__num {
color: #2E5AFF;
border-color: rgba(46, 90, 255, 0.32);
background: rgba(46, 90, 255, 0.06);
}
.blog-side__body {
display: grid;
gap: 6px;
min-width: 0;
}
.blog-side__tag {
font-family: var(--font-mono) !important;
font-size: 9.5px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--muted) !important;
margin-bottom: 0 !important;
display: inline-block;
}
.blog-side__title {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.25;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--ink);
text-wrap: balance;
}
.blog-side__item p {
font-size: 13px !important;
line-height: 1.5 !important;
color: var(--ink-soft) !important;
margin: 0 !important;
}
.blog-side__arrow {
font-family: var(--font-mono);
font-size: 16px;
color: rgba(10, 10, 10, 0.20);
align-self: center;
transition: color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.blog-side__item:hover .blog-side__arrow {
color: #2E5AFF;
transform: translateX(3px);
}
/* отрубаем старые правила side */
.blog-side__item:hover span,
.blog-side__item:hover p {
color: inherit !important;
}
/* ===== TELEGRAM · компактнее, plane маленький в углу ===== */
.blog-card--telegram .blog-card__media {
min-height: 220px !important;
padding: 20px !important;
gap: 14px !important;
}
.blog-tg__top .blog-tg__plane svg {
width: 22px !important;
height: 22px !important;
}
.blog-tg__plane {
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
opacity: 0.85;
}
.blog-tg__count b {
font-size: 26px !important;
letter-spacing: -0.02em;
}
.blog-tg__count b i {
font-size: 14px !important;
}
.blog-tg__count em {
font-size: 10px !important;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.62) !important;
}
.blog-tg__bubble {
font-size: 11.5px !important;
padding: 8px 12px !important;
border-radius: 12px 12px 12px 4px !important;
}
.blog-tg__bubble--reply {
border-radius: 12px 12px 4px 12px !important;
}
.blog-card--telegram .blog-meta span:first-child {
background: rgba(34, 158, 217, 0.14) !important;
color: #1F7BC4 !important;
}
.blog-card--telegram .blog-meta span:not(:first-child) {
color: var(--muted) !important;
}
/* ===== Универсальный sweep — скрыть «голые» span'ы старых визуалов ===== */
.blog-visual--launch > span:nth-child(n+3):not(.blog-visual__head):not(.blog-launch) { display: none !important; }
.blog-visual--audit > span:nth-child(n+3):not(.blog-visual__head):not(.blog-audit) { display: none !important; }
.blog-visual--logistics > span:nth-child(n+3):not(.blog-visual__head):not(.blog-log-table) { display: none !important; }
/* ===== MOBILE adjustments ===== */
@media (max-width: 720px) {
.blog-side {
padding: 18px;
}
.blog-side__item {
padding: 14px 12px !important;
gap: 12px !important;
}
.blog-launch {
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.blog-launch::before { display: none; }
.blog-funnel__step {
min-width: 60%;
}
.blog-audit__row {
grid-template-columns: 1fr auto;
}
.blog-audit__row i {
grid-column: 1 / -1;
justify-self: start;
}
.blog-log-table__row {
font-size: 10.5px;
grid-template-columns: minmax(0, 1.1fr) 1fr 1fr;
}
}
@media (max-width: 480px) {
.blog-visual--ads .blog-visual__bars b { font-size: 8px; }
.blog-visual--ads .blog-visual__bars em { font-size: 9px; }
.blog-funnel__step {
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
}
.blog-funnel__delta { grid-column: 1 / -1; justify-self: start; }
}
/* ============================================================
BRANDS STRIP — тонкая лента-связка между секциями
============================================================ */
.brands-strip {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: transparent;
overflow: hidden;
position: relative;
}
.brands-strip__inner {
max-width: none;
margin: 0;
padding-left: max(var(--pad-x), calc((100% - var(--container)) / 2 + var(--pad-x)));
padding-right: 0;
display: grid;
grid-template-columns: minmax(180px, 232px) 1fr;
align-items: stretch;
min-height: 140px;
}
.brands-strip__title {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
padding: 24px 36px 24px 0;
position: relative;
}
/* Градиентный вертикальный разделитель — не упирается в горизонтальные борта секции */
.brands-strip__title::after {
content: "";
position: absolute;
top: 18px;
bottom: 18px;
right: 0;
width: 1px;
background: linear-gradient(180deg,
transparent 0%,
rgba(10, 10, 10, 0.10) 18%,
rgba(10, 10, 10, 0.10) 82%,
transparent 100%);
}
.brands-strip__eyebrow {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
color: var(--muted);
text-transform: lowercase;
margin-bottom: 4px;
}
.brands-strip__num {
display: inline-flex;
align-items: baseline;
font-size: clamp(40px, 5vw, 60px);
font-weight: 500;
line-height: 0.92;
letter-spacing: -0.03em;
color: var(--ink);
transition: color 320ms var(--ease-out);
}
.brands-strip__num i {
font-style: normal;
font-size: 0.42em;
margin-left: 4px;
font-weight: 400;
color: rgba(46, 90, 255, 0.65);
letter-spacing: 0;
align-self: baseline;
transform: translateY(-0.4em);
transition: color 320ms var(--ease-out);
}
.brands-strip__label {
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.32;
letter-spacing: 0.04em;
color: var(--muted);
text-transform: lowercase;
margin-top: 4px;
}
/* Hover на ленте — title мягко акцентируется в синхрон с расцветающими лого */
.brands-strip:hover .brands-strip__num i { color: #2E5AFF; }
.brands-strip__viewport {
position: relative;
align-self: stretch;
min-width: 0;
overflow: hidden;
display: flex;
align-items: center;
padding-left: 36px; /* воздух после вертикального разделителя */
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 98%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 98%, transparent 100%);
}
.brands-strip__rails {
display: flex;
width: max-content;
flex: none;
animation: brandsScroll 52s linear infinite;
}
.brands-strip__viewport:hover .brands-strip__rails {
animation-play-state: paused;
}
.brands-strip__track {
display: flex;
align-items: center;
gap: 84px;
padding-right: 84px;
flex: none;
}
.brands-strip__item {
display: inline-flex;
align-items: center;
justify-content: center;
width: 168px;
height: 96px;
flex: none;
}
.brands-strip__item img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
filter: grayscale(1) contrast(0.92);
opacity: 0.55;
transition:
filter 320ms var(--ease-out),
opacity 320ms var(--ease-out),
transform 320ms var(--ease-spring-soft);
}
.brands-strip__item:hover img {
filter: none;
opacity: 1;
transform: scale(1.04);
}
/* ─── PER-LOGO BALANCING ───
Все scale-значения подобраны так, чтобы видимый логотип занимал
≈ 70% слота по большей оси. Целевой диапазон scale: 1.10 – 1.55.
Padding используется для wide wordmark'ов. */
/* GROUP A — Wide wordmark (тонкие по высоте) */
.brands-strip__item img[src*="Group%201899"] { padding: 18px 4px; } /* Blesk Home */
.brands-strip__item img[src*="VOIS.png"] { padding: 30px 12px; } /* VOIS — поджать сильнее */
.brands-strip__item img[src*="ABRAU"] { padding: 26px 10px; } /* ABRAU Cosmetics */
/* GROUP B — HD ChatGPT (1536×1024) с центральным логотипом и пустыми полями */
.brands-strip__item img[src*="01_21_15"] { padding: 0; transform: scale(1.40); transform-origin: center; } /* MOYÖRY */
.brands-strip__item:hover img[src*="01_21_15"] { transform: scale(1.46); }
.brands-strip__item img[src*="01_20_08"] { padding: 0; transform: scale(1.35); transform-origin: center; } /* Luxo Light */
.brands-strip__item:hover img[src*="01_20_08"] { transform: scale(1.41); }
.brands-strip__item img[src*="01_19_12"] { padding: 0; transform: scale(1.40); transform-origin: center; } /* dopamean */
.brands-strip__item:hover img[src*="01_19_12"] { transform: scale(1.46); }
.brands-strip__item img[src*="01_33_20"] { padding: 0; transform: scale(1.30); transform-origin: center; } /* adjø */
.brands-strip__item:hover img[src*="01_33_20"] { transform: scale(1.36); }
.brands-strip__item img[src*="01_35_02"] { padding: 0; transform: scale(1.20); transform-origin: center; } /* Sportalm — меньше */
.brands-strip__item:hover img[src*="01_35_02"] { transform: scale(1.26); }
.brands-strip__item img[src*="01_28_46"] { padding: 0; transform: scale(1.05); transform-origin: center; } /* БОРТ ПРЕСС — меньше */
.brands-strip__item:hover img[src*="01_28_46"] { transform: scale(1.11); }
.brands-strip__item img[src*="01_30_11"] { padding: 0; transform: scale(1.70); transform-origin: center; } /* MR.KARUSS */
.brands-strip__item:hover img[src*="01_30_11"] { transform: scale(1.76); }
.brands-strip__item img[src*="01_08_01"] { padding: 0; transform: scale(1.20); transform-origin: center; } /* От Нуля */
.brands-strip__item:hover img[src*="01_08_01"] { transform: scale(1.26); }
.brands-strip__item img[src*="00_44_05"] { padding: 0; transform: scale(0.70); transform-origin: center; } /* FEA — был 1.05, тесная кадрировка */
.brands-strip__item:hover img[src*="00_44_05"] { transform: scale(0.74); }
/* GROUP C — Photoroom 640×640 с разреженным контентом */
.brands-strip__item img[src*="Mask%20group"] { padding: 0; transform: scale(1.40); transform-origin: center; } /* Ореховская вода */
.brands-strip__item:hover img[src*="Mask%20group"] { transform: scale(1.46); }
.brands-strip__item img[src*="23.45.08"] { padding: 0; transform: scale(1.20); transform-origin: center; } /* Velsora */
.brands-strip__item:hover img[src*="23.45.08"] { transform: scale(1.26); }
.brands-strip__item img[src*="00.43.22"] { padding: 0; transform: scale(1.15); transform-origin: center; } /* HH icon */
.brands-strip__item:hover img[src*="00.43.22"] { transform: scale(1.21); }
.brands-strip__item img[src*="01.03.00"] { padding: 0; transform: scale(1.25); transform-origin: center; } /* PAYA shield */
.brands-strip__item:hover img[src*="01.03.00"] { transform: scale(1.31); }
.brands-strip__item img[src*="01.26.55"] { padding: 0; transform: scale(1.18); transform-origin: center; } /* STAK арочный */
.brands-strip__item:hover img[src*="01.26.55"] { transform: scale(1.24); }
/* GROUP D — Photoroom 640×640 с дensе-контентом — лёгкий padding */
.brands-strip__item img[src*="Biologique"] { padding: 6px 0; }
.brands-strip__item img[src*="x480-Photoroom"] { padding: 18px 12px; } /* BOS — поджать */
.brands-strip__item img[src*="01.03.42"] { padding: 4px 0; } /* Mix Cotton */
.brands-strip__item img[src*="23.44.59"] { padding: 10px 0; } /* AQUA PROFI — был 4px */
.brands-strip__item img[src*="IMG_5011"] { padding: 14px 0; } /* АвтоТок — был 4px, очень плотный */
.brands-strip__item img[src*="00.43.34"] { padding: 6px 0; } /* P-stamp */
.brands-strip__item img[src*="00.43.40"] { padding: 4px 0; } /* ЛЕКС */
.brands-strip__item img[src*="00.43.48"] { padding: 8px 0; } /* LA RETTI */
.brands-strip__item img[src*="00.44.29"] { padding: 14px 0; } /* PRO EV — был 4px, машина+текст+слоган */
.brands-strip__item img[src*="00.44.40"] { padding: 8px 0; } /* NOBLE BLOOM — был 4px */
.brands-strip__item img[src*="00.43.28"] { padding: 4px 0; } /* Panda */
.brands-strip__item img[src*="logo-Photoroom"] { padding: 8px 0; } /* красное сердце */
.brands-strip__item img[src*="23.44.47"] { padding: 4px 0; } /* 3D куб */
.brands-strip__item img[src*="23.45.19"] { padding: 8px 0; } /* World Center — был 4px */
.brands-strip__item img[src*="00.42.03"] { padding: 8px 0; } /* HypeVibe stamp */
.brands-strip__item img[src*="00.43.53"] { padding: 0; } /* ZIPTRON banner — на полный слот */
.brands-strip__item img[src*="fff48836"] { padding: 0; } /* Remoem пиксельный */
/* Beshedoo — пастельный wordmark с большим whitespace; масштабируем + усиливаем контраст */
.brands-strip__item img[src*="Group%201903"] {
padding: 0;
transform: scale(1.55);
transform-origin: center;
filter: grayscale(1) contrast(2.6) brightness(0.7);
opacity: 0.78;
}
.brands-strip__item:hover img[src*="Group%201903"] {
transform: scale(1.61);
filter: grayscale(1) contrast(2.6) brightness(0.55);
opacity: 1;
}
/* Пиксельный Remoem — натуральный масштаб (если используется screenshot вариант) */
.brands-strip__item img[src*="Screenshot%202025-09-05%20at%2013.47.26"] {
width: auto;
height: auto;
max-width: 116px;
max-height: 60px;
padding: 0;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
/* (старые ограничители для Luxo Light/dopameana убраны —
заменены на HD-версии 01_20_08 и 01_19_12 выше) */
@keyframes brandsScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.brands-strip__viewport { animation: none; }
.brands-strip__pulse { animation: none; }
}
@media (max-width: 720px) {
/* Mobile: compact "40+ брендов" chip on the left, dense scrolling rail
on the right. Title takes the bare minimum so the logo strip is the
hero of this section. */
.brands-strip__inner {
grid-template-columns: auto 1fr;
min-height: 0;
padding: 0 0 0 var(--pad-x);
gap: 0;
align-items: center;
}
.brands-strip__title {
display: inline-flex;
flex-direction: row;
align-items: baseline;
gap: 6px;
padding: 12px 12px 12px 0;
}
.brands-strip__title::after {
top: 12px;
bottom: 12px;
}
.brands-strip__eyebrow { display: none; }
.brands-strip__num {
font-size: 20px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.03em;
}
.brands-strip__num i {
font-size: 0.55em;
margin-left: 1px;
transform: translateY(-0.35em);
}
.brands-strip__label {
font-family: var(--font-mono);
font-size: 10.5px;
line-height: 1.1;
margin: 0;
letter-spacing: 0.04em;
color: var(--muted);
text-transform: lowercase;
}
.brands-strip__label br { display: none; }
.brands-strip__label::after {
content: " брендов";
}
/* Source markup says "брендов
в портфеле" — on mobile we hide the br
and replace the visible text with just "брендов" via SR-only swap */
.brands-strip__label { font-size: 0; }
.brands-strip__label::after { font-size: 10.5px; }
.brands-strip__viewport {
height: 52px;
padding-left: 12px;
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 96%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 96%, transparent 100%);
}
.brands-strip__rails { animation-duration: 34s; }
.brands-strip__item { width: 72px; height: 52px; }
.brands-strip__track { gap: 20px; padding-right: 20px; }
.brands-strip__item img[src*="Group%201899"] { padding: 6px 2px; }
.brands-strip__item img[src*="VOIS.png"] { padding: 10px 4px; }
.brands-strip__item img[src*="ABRAU"] { padding: 10px 4px; }
.brands-strip__item img[src*="Group%201903"] { transform: scale(1.35); }
.brands-strip__item img[src*="Screenshot%202025-09-05%20at%2013.47.26"] { max-width: 64px; max-height: 36px; }
}
/* ═══════════════════════════════════════════════════════════════
Av-trust · кликабельная карточка с рейтингом Avito (5★ + цитата)
Стоит между #audit и #contact на index. Вся полоска — один
→ переход в профиль на Avito. Namespace .av-trust чтобы не
конфликтовать с .trust (баннер «доверьтесь нам» с фото).
═══════════════════════════════════════════════════════════════ */
.av-trust {
max-width: var(--container);
margin: 0 auto;
padding: 24px var(--pad-x) 56px;
position: relative;
z-index: 1; /* над любыми сияниями соседних секций */
}
.av-trust__strip {
display: flex;
align-items: center;
gap: 18px;
padding: 14px 18px 14px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg);
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--ink-soft, #4a4a4a);
letter-spacing: 0.01em;
flex-wrap: wrap;
text-decoration: none;
cursor: pointer;
transition:
border-color 220ms ease-out,
transform 220ms ease-out,
box-shadow 220ms ease-out;
}
.av-trust__strip:hover,
.av-trust__strip:focus-visible {
border-color: #c9c9c0;
transform: translateY(-1px);
box-shadow: 0 14px 30px -18px rgba(10,10,10,0.22);
}
.av-trust__strip:focus-visible {
outline: 2px solid var(--royal);
outline-offset: 3px;
}
/* Avito brand chip (4-dot logo + wordmark) */
.av-trust__brand {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px 5px 7px;
border-radius: 999px;
background: var(--bg-alt, #f4f4ee);
font-size: 11px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.02em;
flex-shrink: 0;
}
.av-trust__brand svg { display: block; }
.av-trust__rating {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.av-trust__stars {
color: #f3a93f;
font-size: 14px;
letter-spacing: 0.5px;
line-height: 1;
}
.av-trust__score {
color: var(--ink);
font-size: 13px;
letter-spacing: -0.01em;
}
.av-trust__score b { font-weight: 600; }
.av-trust__score em {
font-style: normal;
color: var(--muted);
}
.av-trust__sep {
display: inline-block;
width: 3px; height: 3px;
border-radius: 50%;
background: var(--line);
flex-shrink: 0;
opacity: 0.85;
}
.av-trust__count {
flex-shrink: 0;
white-space: nowrap;
}
.av-trust__count b { color: var(--ink); font-weight: 500; }
.av-trust__quote {
flex: 1;
min-width: 0;
color: var(--ink);
font-family: var(--font-sans);
font-size: 13.5px;
line-height: 1.4;
letter-spacing: -0.005em;
font-style: italic;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.av-trust__quote em {
font-style: normal;
font-family: var(--font-mono);
color: var(--muted);
font-size: 11.5px;
margin-left: 8px;
letter-spacing: 0.02em;
}
.av-trust__cta {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 12px 7px 14px;
border-radius: 999px;
background: var(--ink);
color: #fff;
font-weight: 500;
font-size: 12px;
letter-spacing: 0.01em;
white-space: nowrap;
margin-left: auto;
flex-shrink: 0;
transition: background 220ms ease-out, transform 220ms ease-out;
}
.av-trust__cta svg { transition: transform 220ms ease-out; }
.av-trust__strip:hover .av-trust__cta { background: var(--royal); }
.av-trust__strip:hover .av-trust__cta svg { transform: translate(2px, -2px); }
@media (max-width: 980px) {
.av-trust__strip { gap: 12px; }
.av-trust__sep--quote { display: none; }
.av-trust__quote {
white-space: normal;
flex-basis: 100%;
order: 99;
font-size: 13px;
padding-left: 2px;
}
.av-trust__cta { margin-left: auto; }
}
@media (max-width: 560px) {
.av-trust { padding: 16px var(--pad-x) 40px; }
.av-trust__strip {
padding: 12px 12px 12px 10px;
font-size: 11.5px;
border-radius: 20px;
gap: 10px;
}
.av-trust__brand { padding: 4px 8px 4px 6px; font-size: 10.5px; }
.av-trust__quote { font-size: 12.5px; order: 99; flex-basis: 100%; }
.av-trust__quote em { display: block; margin-left: 0; margin-top: 2px; }
.av-trust__cta { padding: 6px 10px 6px 12px; font-size: 11.5px; }
}