/* ============================================================
FOAM HEROES — дизайн-система v1 «Гараж-зин»
База: чёрный + тёплая бумага + кислотный жёлтый,
акценты — цвета линейки составов (см. --c-*)
============================================================ */
/* ---------- 1. Шрифты (лицензионные, из папки «Шрифты») ----------
Заголовочный шрифт — Wix Madefor Display (19.08). Gotham Pro убран целиком
21.08: лицензии нет, файлы больше не раздаём.
THURSTON — только латиница, для названий составов.
Веб-текст (body) = Manrope — решение владельца 31.07. Museo Sans Cyrl 500 куплен, но
это единственный вес; для веба оставляем Manrope (все веса, кириллица, единый рендер
на всех машинах). Museo убран из стека, чтобы не «плыть» на машинах, где он установлен. */
/* Manrope (body) + JetBrains Mono (моно) — самохостинг вместо Google Fonts (перф + 152-ФЗ).
Вариативные (1 файл/сабсет), веса 400–700, кир+лат сабсеты. OFL, самохостинг легален. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/manrope-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/manrope-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/manrope-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/manrope-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/jbmono-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/jbmono-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/jbmono-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/jbmono-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ---------- 2. Токены ---------- */
:root {
/* цвет */
--ink: #0C0C0C;
--paper: #F2F3F5; /* холодный светло-серый: единая светлая база, без бежевого */
--white: #FFFFFF;
--acid: #FFD02F; /* фирменный акцент, hover/выделения */
--acid-deep: #F5B90A;
/* цвета линейки составов (= цвета категорий) */
--c-wash: #1F3BD1; /* мойка и экстерьер — Chuck NoRinse blue */
--c-int: #F58A1F; /* интерьер — Clean Ton orange */
--c-prot: #E63A7E; /* защита — Mad Drops pink */
--c-kit: #FFC93C; /* оборудование — yellow */
--c-acc: #5A34B8; /* аксессуары — Pure Wheels purple */
--c-eco: #63BF4A; /* Lime Scrub green — сервисный/успех */
--ink-08: rgba(12, 12, 12, .08);
--ink-16: rgba(12, 12, 12, .16);
--ink-55: rgba(12, 12, 12, .62);
/* типографика */
--f-disp: "Wix Madefor Display",system-ui,sans-serif;
--f-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
--f-mono: "JetBrains Mono", ui-monospace, monospace;
/* Маркерный шрифт (21.08): Thurston убран — в файле «All Rights Reserved»,
лицензия не указана, ровно как было с Gotham Pro. Заменён на заголовочный
Wix Madefor Display: он свободный (OFL), уже грузится на каждой странице,
значит замена стоит ноль дополнительных байт, и кириллица у него есть. */
--f-marker: "Wix Madefor Display", system-ui, sans-serif;
--fs-hero: clamp(2.5rem, 6.4vw, 5.9rem);
--fs-h2: clamp(2rem, 4.6vw, 4.25rem);
--fs-page-title: clamp(1.9rem, 3.6vw, 3rem); /* заголовок ВНУТРЕННЕЙ страницы (не геройский hero) */
--fs-h2-section: clamp(1.75rem, 3vw, 2.75rem); /* секционный H2 — единый (был то 44, то 68px) */
--acid-rgb: 255,208,47; --c-kit-rgb: 255,201,60; --c-prot-rgb: 230,58,126; /* RGB-каналы фирм-цветов для rgba() */
--fs-h3: clamp(1.25rem, 2.2vw, 1.75rem);
--fs-body: 1.0625rem; /* 17px */
--fs-small: .875rem;
--fs-mono: .8125rem;
/* пространство (8pt) */
--s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px;
--s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;
/* форма — стикерная пластика */
--r-chip: 999px;
--r-xs: 8px;
--r-sm: 12px;
--r-card: 14px;
--r-lg: 20px;
--r-panel: 24px;
--header-h: 92px; /* высота липкой шапки — единый оффсет для sticky/scroll-anchor */
--border: 1.5px solid var(--ink);
--hairline: 1px solid rgba(12, 12, 12, .14);
--shadow-sticker: 0 22px 48px -22px rgba(12, 12, 12, .30);
--shadow-sticker-hover: 0 32px 64px -26px rgba(12, 12, 12, .38);
/* движение */
--t-fast: 150ms cubic-bezier(.2, .8, .3, 1);
--t-med: 280ms cubic-bezier(.2, .8, .3, 1);
--container: 1280px;
--gutter: clamp(16px, 4vw, 48px);
/* ★ 21.08: единый отступ от конца страницы до подвала (см. блок «ЕДИНЫЙ ОТСТУП») */
--gap-footer: clamp(48px, 5vw, 64px);
}
/* ---------- 3. Сброс и база ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter:stable — место под полосу прокрутки резервируется ВСЕГДА.
19.08 (владелец: «при зуме фото скачет вёрстка»): при открытии просмотра фото и
мобильного меню скрипт ставит корню overflow:hidden — на Windows классическая полоса
прокрутки исчезает, документ становится шире на ~15 точек, и весь сайт прыгает вправо.
С резервом полосы ширина не меняется и прыжка нет. На iOS полоса накладная — там ничего
не меняется. */
html { scroll-behavior: smooth; overflow-x: clip; scrollbar-gutter: stable; }
/* Страховка от бокового скролла на мобиле (clip не ломает sticky-хедер). */
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
body {
margin: 0;
font-family: var(--f-body);
font-size: var(--fs-body);
line-height: 1.6;
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible {
outline: 3px solid var(--c-wash);
outline-offset: 3px;
border-radius: 4px;
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--ink); color: var(--white);
padding: 12px 20px; font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; }
.container {
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* ---------- 4. Типографика ---------- */
html { color-scheme: light; }
h1, h2, h3 { line-height: 1.02; margin: 0; text-wrap: balance; }
.h-display {
font-family: var(--f-disp);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -.015em;
}
h1.h-display { font-size: var(--fs-hero); }
/* 19.08: секционный H2 уважает предохранитель от разрыва слова — так же, как H1.
--h2cap приходит инлайном из render.js и равен кеглю, при котором самое длинное
слово этого заголовка влезает в колонку целиком. Где переменной нет, min() берёт
999px и правило работает как раньше. */
h2.h-display { font-size: min(var(--fs-h2-section), var(--h2cap, 999px)); }
.h3 { font-family: var(--f-disp); font-weight: 800; font-size: var(--fs-h3); letter-spacing: -.01em; }
/* маркер-выделение слова в заголовке */
.hl {
position: relative;
display: inline;
padding: 0 .02em;
background: linear-gradient(transparent 82%, var(--hl-c, var(--acid)) 82%, var(--hl-c, var(--acid)) 96%, transparent 96%);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.hl--pink { --hl-c: var(--c-prot); }
.hl--blue { --hl-c: var(--c-wash); }
/* моно-надзаголовок: гиковский слой */
.eyebrow {
font-family: var(--f-mono);
font-size: var(--fs-mono);
text-transform: uppercase;
letter-spacing: .08em;
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: var(--s-2);
}
.eyebrow::before { content: "▸"; color: var(--c-prot); }
.section-lead { max-width: 56ch; font-size: 1.125rem; margin-top: var(--s-2); }
.mono { font-family: var(--f-mono); font-size: var(--fs-mono); }
/* ---------- 5. Кнопки, чипы ---------- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 26px;
min-height: 48px;
font-family: var(--f-disp);
font-weight: 800;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .02em;
text-decoration: none;
border: var(--border);
border-radius: var(--r-chip);
background: var(--ink); color: var(--white);
transition: transform var(--t-fast), background var(--t-fast),
color var(--t-fast), border-color var(--t-fast);
}
.btn:hover { background: var(--acid); color: var(--ink); border-color: var(--acid); transform: scale(1.03); }
.btn:active { transform: scale(.99); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.btn--acid { background: var(--acid); color: var(--ink); }
.btn--acid:hover { background: var(--ink); color: var(--acid); }
.btn--ondark { border-color: var(--white); background: var(--white); color: var(--ink); }
.btn--ondark:hover { background: var(--acid); color: var(--ink); border-color: var(--acid); }
.btn--ondark-ghost { border-color: var(--white); background: transparent; color: var(--white); box-shadow: none; }
.btn--ondark-ghost:hover { background: var(--white); color: var(--ink); }
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 14px;
border: var(--border);
border-radius: var(--r-chip);
font-family: var(--f-mono);
font-size: var(--fs-mono);
background: var(--white);
white-space: nowrap;
}
.chip--acid { background: var(--acid); }
.chip--soft { border-color: var(--ink-16); }
/* стикер-бейдж (наклейка) */
.sticker {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
font-family: var(--f-mono);
font-size: .6875rem;
text-transform: uppercase;
letter-spacing: .12em;
border: 1px solid rgba(255,255,255,.4);
border-radius:var(--r-chip);
background: rgba(12,12,12,.42);
color: var(--white);
backdrop-filter: blur(8px);
}
.sticker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acid); }
.sticker--acid::before { background: var(--acid); }
.sticker--pink::before { background: var(--c-prot); }
.sticker--r::before { background: var(--white); }
/* ---------- 6. Хедер: чёрный, лого в белом круге (канон гайда) ---------- */
.site-header {
position: sticky; top: 0; z-index: 100;
background: var(--ink);
color: var(--white);
transition: box-shadow var(--t-med);
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(15,14,12,.45); }
.header-inner {
display: flex; align-items: center; gap: var(--s-2);
min-height: 92px;
}
.logo {
display: grid; place-items: center; flex-shrink: 0;
width: 72px; height: 72px;
background: var(--white);
border-radius: 50%;
transition: transform var(--t-med);
transform-origin: center center;
}
.logo img { width: 62px; height: auto; display: block; }
.logo:hover { transform: rotate(-6deg); }
/* язык + личный кабинет (структура как в v10, на тёмном) */
.hdr-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hdr-lang {
display: inline-flex;
border: 1.5px solid rgba(255,255,255,.4);
border-radius: var(--r-chip);
overflow: hidden;
}
.hdr-lang-btn {
border: 0; background: transparent;
padding: 7px 12px;
font-family: var(--f-disp); font-weight: 700; font-size: .8125rem;
color: rgba(255,255,255,.55);
transition: background var(--t-fast), color var(--t-fast);
}
.hdr-lang-btn.is-active { background: var(--white); color: var(--ink); }
.hdr-lang-btn:not(.is-active):hover { color: var(--white); }
.hdr-b2b {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px;
border: 1.5px solid rgba(255,255,255,.4);
border-radius: var(--r-chip);
color: var(--white);
font-family: var(--f-disp); font-weight: 700; font-size: .8125rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.hdr-b2b:hover { background: var(--acid); color: var(--ink); border-color: var(--acid); }
@media (max-width: 1280px) { .hdr-b2b span { display: none; } .hdr-b2b { padding: 9px 11px; } }
.main-nav { display: flex; gap: 6px; margin-inline: auto; }
.main-nav a {
padding: 9px 13px;
white-space: nowrap;
font-family: var(--f-disp);
font-weight: 700;
font-size: .875rem;
text-transform: uppercase;
letter-spacing: .02em;
text-decoration: none;
border-radius: var(--r-chip);
transition: background var(--t-fast), color var(--t-fast);
}
/* ховер только для мыши: на таче он «залипает» после нажатия (жёлтая пилюля оставалась в меню) */
@media (hover: hover) { .main-nav a:hover { background: var(--acid); color: var(--ink); } }
.main-nav a[aria-current="page"] { background: var(--white); color: var(--ink); }
.header-cta { margin-left: var(--s-2); }
.burger {
display: none;
margin-left: auto;
width: 48px; height: 48px;
border: var(--border); border-radius:var(--r-sm);
background: var(--white);
flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span { width: 20px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform var(--t-fast), opacity var(--t-fast); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
@media (max-width: 1060px) {
.main-nav, .header-cta, .hdr-actions { display: none; }
.burger { display: flex; }
.header-inner { min-height: 88px; }
.logo { width: 68px; height: 68px; }
.logo img { width: 58px; height: auto; }
/* язык и кабинет дублируются внизу мобильного меню */
.mnav-extra {
display: flex; align-items: center; gap: 16px;
padding: 20px 14px 0;
border-top: 1px solid rgba(255,255,255,.25);
margin-top: auto;
}
/* Полноэкранная шторка меню (утверждено 08.08; правки по живому iPhone-тесту):
фон блокируется классом html.menu-locked (ставит main.js).
Пока меню открыто, шапка = fixed: на iOS overflow:hidden убивает sticky,
и лого с крестом уезжали за экран — fixed чинит по построению. */
.site-header.nav-open { position: fixed; top: 0; left: 0; right: 0; }
/* Шторка вылезает за края вьюпорта на 120px: Safari на iOS рисует страницу
в зонах статус-бара и нижней панели — отрицательные top/bottom закрашивают
их чёрным, фон не «проскакивает» ни сверху, ни снизу. */
.site-header.nav-open .main-nav {
display: flex; flex-direction: column;
position: fixed; top: -120px; bottom: -120px; left: 0; right: 0; z-index: 250;
background: var(--ink);
padding: 224px var(--gutter) 28px;
padding-bottom: calc(max(28px, env(safe-area-inset-bottom)) + 120px);
overflow-y: auto; overscroll-behavior: contain;
}
/* лого и крест остаются поверх шторки */
.site-header.nav-open .logo,
.site-header.nav-open .burger { position: relative; z-index: 260; }
.site-header.nav-open .main-nav a { font-size: 1.05rem; padding: 12px 14px; border-radius: var(--r-sm); }
.site-header.nav-open .main-nav a:active { background: rgba(255,255,255,.08); }
/* низ шторки: язык и кабинет — без «чипов», читаемые на чёрном */
.site-header.nav-open .hdr-lang { border-color: rgba(255,255,255,.55); }
.site-header.nav-open .hdr-lang-btn { color: rgba(255,255,255,.85); }
.site-header.nav-open .hdr-lang-btn[data-lang] { opacity: .85; }
.site-header.nav-open .hdr-lang-btn.is-active { color: var(--ink); }
.site-header.nav-open .mnav-extra .hdr-b2b { border: 0; padding: 12px 0; font-size: .95rem; }
/* в полноэкранном меню подпись «Личный кабинет» видна (глобальное ≤1280 её прячет) */
.mnav-extra .hdr-b2b span { display: inline; }
/* фон не скроллится, пока открыто меню; холст страницы — чёрный:
даже за пределами вылета шторки (резинка iOS, зоны панелей Safari) — чернота */
html.menu-locked, html.menu-locked body { overflow: hidden; background: var(--ink); }
/* и сам контент страницы на время меню невидим (visibility — без сдвигов и потери
позиции скролла): подложка нижней панели Safari рисует документ, а не fixed-слои —
прятать контент = единственный надёжный способ убрать «просвет» снизу */
html.menu-locked body > :not(.site-header) { visibility: hidden; }
}
/* ---------- 7. Hero ---------- */
.hero {
position: relative;
/* влезает в один экран вместе с хедером (112px) */
min-height: clamp(460px, calc(100svh - 150px), 820px);
display: flex; align-items: flex-end;
color: var(--white);
overflow: hidden;
background: var(--ink);
}
.hero video, .hero .hero-fallback {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.2s ease;
}
.hero video.is-front { opacity: .62; }
.hero::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(15,14,12,.1) 30%, rgba(15,14,12,.82) 100%);
}
.hero-inner {
position: relative; z-index: 2;
width: 100%;
padding-block: var(--s-5) var(--s-5);
}
@media (max-width: 420px) {
:root { --fs-hero: clamp(1.9rem, 10vw, 2.4rem); }
}
@media (max-height: 760px) {
:root { --fs-hero: clamp(2.2rem, 5.6vw, 4.6rem); }
.hero-sub { font-size: 1.0625rem; margin-top: var(--s-2); }
.hero-cta { margin-top: var(--s-3); }
}
.hero .eyebrow { color: var(--acid); }
.hero .eyebrow::before { color: var(--acid); }
.hero h1 { max-width: 17ch; text-wrap: balance; }
.hero-sub {
max-width: 46ch;
font-size: 1.1875rem;
margin-top: var(--s-3);
color: rgba(255,255,255,.9);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.hero-stickers {
position: absolute; z-index: 2;
top: clamp(84px, 12vh, 140px); right: var(--gutter);
display: flex; flex-direction: column; gap: 14px; align-items: flex-end;
}
@media (max-width: 700px) { .hero-stickers { display: none; } }
/* ---------- 8. Marquee (бегущая строка) ---------- */
.marquee {
overflow: hidden;
border-block: var(--border);
background: var(--acid);
padding-block: 12px;
}
.marquee--tilt { transform: rotate(-1.2deg) scale(1.02); margin-block: -8px; position: relative; z-index: 3; }
.marquee-track {
display: flex; gap: 0;
width: max-content;
animation: marquee 84s linear infinite; /* -50% теперь = 3 копии, длительность ×3 → та же скорость */
}
.marquee span {
font-family: var(--f-mono);
font-weight: 700;
font-size: .8125rem;
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
padding-inline: 16px;
}
.marquee span::after { content: "·"; margin-left: 32px; opacity: .5; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; flex-wrap: wrap; width: auto; }
}
/* ---------- 9. Секции ---------- */
.section { padding-block: clamp(36px, 4vw, 60px); }
.section--white { background: var(--white); }
.section--ink { background: var(--ink); color: var(--white); }
.section-head { margin-bottom: clamp(20px, 2.5vw, 36px); }
/* заголовок внутри цветной секции шоукейса */
.showcase-head { padding-top: clamp(28px, 3vw, 44px); }
.showcase-head .eyebrow { color: rgba(255,255,255,.9); }
.showcase-head .eyebrow::before { color: var(--white); }
.section-head--row {
display: flex; flex-wrap: wrap; align-items: flex-end;
justify-content: space-between; gap: var(--s-3);
}
/* появление при скролле */
/* прячем контент для reveal-анимации ТОЛЬКО при работающем JS (html.js ставит инлайн-скрипт в head,
main.js подтверждает; нет JS — контент виден сразу, встроенные браузеры TG/VK не видят пустых страниц) */
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1); }
/* правила раскрытия обязаны быть НЕ слабее прячущего (html.js = 2 класса + элемент) */
html.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; } }
/* ---------- 11. Категории ---------- */
.cat-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--s-2);
}
.cat-card {
grid-column: span 2;
position: relative;
display: flex; flex-direction: column; justify-content: flex-end;
min-height: 240px;
padding: var(--s-3);
border: var(--border);
border-radius: var(--r-panel);
background: var(--cat, var(--white));
color: var(--cat-ink, var(--white));
text-decoration: none;
overflow: hidden;
transition: transform var(--t-med), box-shadow var(--t-med);
}
.cat-card:nth-child(1), .cat-card:nth-child(2) { grid-column: span 3; min-height: 280px; }
.cat-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-sticker-hover); }
.cat-card h3 {
font-family: var(--f-disp);
font-weight: 800;
font-size: clamp(1.5rem, 2.6vw, 2.25rem);
text-transform: uppercase;
letter-spacing: -.01em;
}
.cat-card .cat-count {
font-family: var(--f-mono);
font-size: var(--fs-mono);
opacity: .85;
margin-top: 6px;
}
.cat-card .cat-arrow {
position: absolute; top: var(--s-3); right: var(--s-3);
width: 44px; height: 44px;
display: grid; place-items: center;
border: 2px solid currentColor;
border-radius: 50%;
transition: transform var(--t-med), background var(--t-fast), color var(--t-fast);
}
.cat-card:hover .cat-arrow { transform: rotate(45deg); background: var(--white); color: var(--ink); border-color: var(--white); }
@media (max-width: 900px) {
.cat-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.cat-card, .cat-card:nth-child(1), .cat-card:nth-child(2) { grid-column: span 1; min-height: 200px; }
.cat-card:last-child { grid-column: span 2; }
}
@media (max-width: 540px) {
.cat-grid { grid-template-columns: minmax(0,1fr); }
.cat-card:last-child { grid-column: span 1; }
}
/* ---------- 13. Карточки продуктов ---------- */
.prod-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--s-3);
}
.prod-card {
position: relative;
display: flex; flex-direction: column;
background: var(--white);
border: var(--border);
border-radius: var(--r-card);
overflow: hidden;
text-decoration: none;
transition: transform var(--t-med), box-shadow var(--t-med);
}
.prod-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-sticker); }
.prod-media {
position: relative;
background: var(--white);
aspect-ratio: 1;
display: grid; place-items: center;
border-bottom: var(--border);
}
.prod-media img {
max-width: 84%; max-height: 84%; width: auto; height: auto;
object-fit: contain;
transition: transform var(--t-med);
}
.prod-card:hover .prod-media img { transform: scale(1.05) rotate(-1.5deg); }
/* фолбэк для товара без фото — брендовый водяной знак вместо бледного «Фото скоро» */
.prod-ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--paper); }
.prod-ph-logo { width: 46%; max-width: 96px; height: auto; opacity: .22; }
.prod-ph-cap { font-family: var(--f-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-55); }
/* фото вехи истории (about) и карта/фото контактов — из CMS */
/* 11.08 (владелец): вертикальные 3:4 вместо 4:3 */
.rm-photo { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-sm); margin-top: var(--s-3); }
/* на невысоких экранах (ноутбуки) фото вехи мягко режется по высоте, чтобы карточка
с заголовком секции влезала в вьюпорт во время закрепа ленты */
@media (min-width: 901px) {
.rm-photo { max-height: max(250px, calc(100vh - 535px)); }
}
.contact-map { display: block; width: 100%; min-height: 340px; border-radius: var(--r-lg); overflow: hidden; object-fit: cover; background: var(--paper); }
.contact-map iframe { width: 100%; height: 100%; min-height: 340px; display: block; border: 0; }
.prod-badge { position: absolute; top: 12px; left: 12px; }
.prod-body { padding: var(--s-2) var(--s-3) var(--s-3); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.prod-name {
font-family: var(--f-disp);
font-weight: 800;
font-size: 1.1875rem;
text-transform: uppercase;
}
.prod-line { font-size: var(--fs-small); color: var(--ink-55); }
.prod-scent { align-self: flex-start; }
.prod-meta {
margin-top: auto;
display: flex; align-items: center; justify-content: space-between;
padding-top: var(--s-2);
}
.prod-price { font-family: var(--f-disp); font-weight: 800; font-size: 1.25rem; }
.rub { font-weight: 500; } /* знак ₽ — вес 500: легче жирных цифр 800/900 */
.prod-rating { font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--ink-55); }
@media (max-width: 1100px) { .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Пакет Б (утв. владельцем 08.08): на телефоне 2 компактные колонки товаров вместо 1 гиганта (8 товаров были 13 экранов) */
@media (max-width: 540px) { .prod-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } }
/* фото-заглушка: что и куда вставить */
.ph {
position: relative;
display: grid; place-items: center;
aspect-ratio: var(--ph-ratio, 1);
border: 2px dashed var(--ink-55);
border-radius: var(--r-card);
background:
repeating-linear-gradient(45deg, transparent 0 14px, var(--ink-08) 14px 15px),
var(--white);
padding: var(--s-2);
text-align: center;
}
.ph .ph-label {
max-width: min(30ch, 100%);
font-family: var(--f-mono);
font-size: var(--fs-mono);
line-height: 1.5;
background: var(--white);
border: 1px solid var(--ink-16);
border-radius:var(--r-xs);
padding: 8px 12px;
}
.section--ink .ph, .scene .ph { background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,.07) 14px 15px), transparent; border-color: rgba(255,255,255,.5); }
.section--ink .ph .ph-label, .scene .ph .ph-label {
max-width: min(30ch, 100%); background: var(--ink); border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.85); }
/* ---------- 15. Отзывы ---------- */
.reviews-grid {
display: grid;
/* 12.08: auto-FILL, не auto-fit — при 2-3 реальных отзывах auto-fit схлопывал пустые
треки и растягивал карточки в полосы на 576px (у соседних блоков карточка 282px) */
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--s-4);
}
.review-card {
background: var(--white);
border: var(--border);
border-radius: var(--r-card);
box-shadow: 4px 4px 0 var(--ink-16);
padding: var(--s-3);
display: flex; flex-direction: column; gap: var(--s-2);
}
.review-card blockquote { margin: 0; font-size: 1.0625rem; }
.review-who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review-ava {
width: 44px; height: 44px; flex-shrink: 0;
border-radius: 50%;
border: var(--border);
display: grid; place-items: center;
font-family: var(--f-disp); font-weight: 800;
background: var(--av, var(--acid));
}
.review-name { font-weight: 700; font-size: var(--fs-small); }
.review-src { font-family: var(--f-mono); font-size: .75rem; color: var(--ink-55); }
.review-stars { color: var(--acid-deep); letter-spacing: 2px; }
.review-product {
font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em;
text-transform: uppercase; color: var(--ink-55);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* ---------- 16. Где купить ---------- */
.buy-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--s-2);
}
.buy-tile {
display: flex; flex-direction: column; gap: 6px;
padding: var(--s-3);
border: var(--border);
border-radius: var(--r-card);
background: var(--white);
text-decoration: none;
font-family: var(--f-disp); font-weight: 800; font-size: 1.125rem;
transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.buy-tile .mono { color: var(--ink-55); font-weight: 400; }
.buy-tile:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-sticker); background: var(--acid); }
@media (max-width: 900px) { .buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------- 17. FAQ ---------- */
/* 30.08: список во всю ширину контейнера. Было 820 при контейнере 1184, и
жёлтая плашка под ним не совпадала краем — расхождение 364 px. */
.faq-list { max-width: none; }
/* Плашка после списка — тоже во всю ширину, край совпадает. */
.faq-list + .hint { max-width: none; }
.faq-item { border-bottom: var(--border); }
/* 30.08: у последнего вопроса линии нет — сверху у первого её тоже нет,
и висящая снизу читалась как недоделка. */
.faq-item:last-child { border-bottom: 0; }
.faq-item summary {
list-style: none;
display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
padding: var(--s-3) 4px;
/* 30.08: вес 700, а не 800. На телефоне заголовок блока упирается в нижнюю
границу clamp и даёт 20px, вопрос — 17px: разница 1,18x при одинаковом весе,
и уровни сливались в один. Иерархию теперь держит насыщенность, а не кегль,
и это работает на любой ширине экрана. */
font-family: var(--f-disp); font-weight: 700; font-size: 1.1875rem;
line-height: 1.3; /* 09.08: вопросы в 2 строки не разъезжаются */
cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
flex-shrink: 0;
width: 40px; height: 40px;
display: grid; place-items: center;
border: var(--border); border-radius: 50%;
font-weight: 400; font-size: 1.5rem;
transition: transform var(--t-med), background var(--t-fast);
}
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--acid); }
/* 30.08: текст ответа 92ch (~900 px). Подобрано замером: у 12 живых ответов
число строк одинаково в диапазоне 900-1050 px — шире 900 строка только
удлиняется без выигрыша, уже 900 ответы распухают. */
.faq-item .faq-body { padding: 0 4px var(--s-3); max-width: 92ch; }
/* 30.08: гасим ВЕРХНИЙ margin абзаца — 17 px умолчания браузера, которых никто
не задавал: глобального сброса полей на сайте нет. От вопроса до его ответа
набегало 54 px против 79 до следующего вопроса, ответ висел посередине между
двумя вопросами. Стало 37 против 79.
Нижний margin оставлен НАМЕРЕННО: без него ответ подтянулся бы и к следующему
вопросу, соотношение упало бы до 1:1,7 — та же болезнь с другой стороны. Он же
держит расстояние между абзацами внутри длинного ответа. */
.faq-item .faq-body p { margin-top: 0; }
/* ---------- 19. Футер ---------- */
.site-footer {
background: var(--ink);
color: var(--white);
padding-block: var(--s-6) var(--s-4);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--s-4);
}
.footer-brand img { width: 72px; height: 72px; border-radius: 50%; }
.footer-brand .footer-logo { width: auto; height: 56px; border-radius: 0; }
.footer-brand p { color: rgba(255,255,255,.7); max-width: 30ch; }
/* 09.08: заголовки колонок — это навигация, ей голос Gotham (как в меню), а не мono;
жёлтый снят — самый громкий цвет подвала доставался самому служебному тексту */
.footer-col h3 {
font-family: var(--f-disp); font-weight: 800; font-size: .8125rem;
text-transform: uppercase; letter-spacing: .06em;
color: var(--white);
margin-bottom: var(--s-2);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { text-decoration: none; color: rgba(255,255,255,.85); }
.footer-col a:hover { color: var(--acid); }
.footer-bottom {
margin-top: var(--s-6);
padding-top: var(--s-3);
border-top: 1px solid rgba(255,255,255,.2);
display: flex; flex-wrap: wrap; gap: var(--s-2);
justify-content: space-between;
font-family: var(--f-mono); font-size: .75rem;
color: rgba(255,255,255,.55);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
/* --- Подвал: компакт-мобайл (Экран 3, утверждён 08.08: «верни как было» + шрифт ссылок -1.4px) --- */
@media (max-width: 640px) {
.site-footer { padding-block: 26px 16px; }
.footer-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px 14px; }
.footer-brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.footer-brand .footer-logo { height: 38px; }
.footer-brand p { font-size: .78rem; line-height: 1.35; margin: 0; max-width: none; color: rgba(255,255,255,.6); }
.footer-col h3 { margin-bottom: 6px; font-size: .68rem; }
.footer-col ul { gap: 0; }
.footer-col a { font-size: .82rem; display: inline-block; padding: 6px 0; }
nav[aria-label="Каталог"].footer-col { grid-column: 1; grid-row: 2 / span 2; }
nav[aria-label="Покупателям и партнёрам"].footer-col { grid-column: 2; grid-row: 2; }
nav[aria-label="Бренд"].footer-col { grid-column: 2; grid-row: 3; }
.footer-bottom { margin-top: 16px; padding-top: 10px; font-size: .68rem; gap: 4px 12px; }
}
/* ============================================================
ЧАСТЬ 2 — многостраничник: страницы, шоукейс, переходы
============================================================ */
/* (шторка-переход удалена по фидбэку) */
/* stagger для сеток: JS проставляет --d */
.reveal { transition-delay: var(--d, 0ms); }
/* ---------- 21. Заголовок внутренней страницы ---------- */
.page-head { padding-block: clamp(20px, 2.5vw, 36px) 0; }
/* заголовки внутренних страниц: длинные слова переносятся, не рвут вёрстку */
.page-head h1.h-display { font-size: var(--fs-page-title); } /* размер задан единым блоком в конце файла */
@media (max-width: 560px) { .page-head h1.h-display { font-size: clamp(1.7rem, 8.5vw, 2.4rem); } }
.breadcrumbs {
font-family: var(--f-mono); font-size: var(--fs-mono);
color: var(--ink-55);
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: var(--s-3);
}
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.on-dark .breadcrumbs { color: rgba(255,255,255,.75); }
.on-dark .breadcrumbs a:hover { color: var(--white); }
/* ---------- 22. Шоукейс составов (главная, 2-й экран) ---------- */
.showcase {
background: linear-gradient(125deg, var(--sc, var(--c-prot)) -25%, var(--ink) 52%); /* фолбэк без color-mix */
background:
radial-gradient(120% 130% at 22% 40%, color-mix(in oklab, var(--sc, var(--c-prot)) 46%, #0C0C0C) 0%, transparent 60%),
radial-gradient(90% 110% at 85% 90%, color-mix(in oklab, var(--sc, var(--c-prot)) 22%, #0C0C0C) 0%, transparent 55%),
var(--ink);
color: var(--white);
transition: background .6s ease;
overflow: hidden;
}
.showcase-inner {
display: grid;
grid-template-columns: minmax(280px, 5fr) 7fr;
gap: clamp(24px, 5vw, 72px);
align-items: center;
padding-block: clamp(28px, 4vw, 56px);
}
.showcase-media { position: relative; display: grid; place-items: center; min-height: clamp(280px, 32vw, 380px); }
.showcase-media::before {
content: "";
position: absolute; inset: 4% 8%;
background: radial-gradient(circle, var(--sc, var(--c-prot)) 0%, transparent 70%); /* фолбэк без color-mix */
background: radial-gradient(circle, color-mix(in oklab, var(--sc, var(--c-prot)) 75%, #fff) 0%, transparent 70%);
opacity: .5;
filter: blur(46px);
}
.showcase-media img {
position: relative;
width: min(78%, 380px);
filter: drop-shadow(10px 14px 0 rgba(15,14,12,.28));
animation: bottle-float 5s ease-in-out infinite;
}
@keyframes bottle-float {
0%, 100% { transform: translateY(0) rotate(-1.2deg); }
50% { transform: translateY(-14px) rotate(1.2deg); }
}
.showcase-media:hover img { animation: bottle-wobble .5s ease-in-out; }
@keyframes bottle-wobble {
0%,100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); }
}
.showcase-name {
color: var(--white);
font-family: var(--f-disp); /* был --f-marker (только латиница → кириллица падала в cursive) */
font-size: clamp(2.6rem, 5.4vw, 5rem);
line-height: 1;
text-transform: uppercase;
text-shadow: 4px 4px 0 rgba(15,14,12,.35);
}
.showcase-line { font-size: 1.125rem; margin-top: var(--s-2); max-width: 44ch; color: rgba(255,255,255,.94); }
.showcase-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-3); }
.showcase .chip { background: rgba(255,255,255,.08); color: var(--white); border-color: rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.showcase-cta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.showcase-tabs {
display: flex; flex-wrap: wrap; gap: 10px;
padding-bottom: clamp(24px, 3vw, 40px);
}
.showcase-tab {
width: 72px; height: 72px;
border: var(--border); border-radius:var(--r-card);
background: var(--white);
display: grid; place-items: center;
padding: 8px;
transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.showcase-tab img { max-height: 100%; object-fit: contain; }
.showcase-tab:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 rgba(15,14,12,.4); }
.showcase-tab[aria-selected="true"] {
box-shadow: 4px 4px 0 var(--ink);
transform: translate(-2px,-2px);
outline: 3px solid var(--white);
}
@media (max-width: 860px) {
.showcase-inner { grid-template-columns: minmax(0,1fr); }
.showcase-media { order: -1; }
.showcase-media img { width: min(52%, 260px); }
}
/* УТП-полоса под шоукейсом */
.utp-strip {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-4);
padding-block: clamp(40px, 6vw, 72px);
}
.utp-strip article { border-top: var(--border); padding-top: var(--s-2); }
.utp-strip .utp-num { display: block; margin-bottom: 6px; }
.utp-strip h3 { font-family: var(--f-disp); font-weight: 800; font-size: 1.1875rem; }
.utp-strip p { margin: 8px 0 0; font-size: var(--fs-small); color: var(--ink-55); }
@media (max-width: 860px) { .utp-strip { grid-template-columns: minmax(0,1fr); gap: var(--s-3); } }
/* ---------- 23. Страница категории ---------- */
.cat-hero {
background: linear-gradient(125deg, var(--cat, var(--c-wash)) -25%, var(--ink) 52%); /* фолбэк без color-mix */
background:
radial-gradient(120% 150% at 18% 30%, color-mix(in oklab, var(--cat, var(--c-wash)) 52%, #0C0C0C) 0%, transparent 62%),
var(--ink);
color: var(--white) !important;
}
.cat-hero-inner { padding-block: clamp(48px, 7vw, 96px); }
.cat-hero h1 { font-size: var(--fs-page-title); }
.cat-hero .lead { max-width: 52ch; font-size: 1.125rem; margin-top: var(--s-3); }
.cat-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-4); }
.cat-hero .chip { background: rgba(255,255,255,.92); color: var(--ink); border-color: var(--ink); }
/* хелпер-блок «подсказка» */
.hint {
border: var(--border); border-radius: var(--r-card);
background: var(--acid);
padding: var(--s-4);
display: flex; flex-wrap: wrap; gap: var(--s-3);
align-items: center; justify-content: space-between;
}
.hint p { margin: 0; max-width: 56ch; }
/* ---------- 24. Страница продукта ---------- */
.pp-grid {
display: grid;
grid-template-columns: minmax(300px, 5fr) 6fr;
gap: clamp(24px, 5vw, 72px);
padding-block: clamp(20px, 2.5vw, 36px) clamp(32px, 5vw, 64px);
}
.pp-gallery {
position: sticky; top: var(--header-h);
align-self: start;
border: var(--border); border-radius: var(--r-panel);
background: var(--white);
min-height: 420px;
display: grid; place-items: center;
padding: var(--s-4);
overflow: hidden;
}
.pp-gallery img {
max-height: 480px; width: auto; max-width: 100%;
filter: drop-shadow(8px 12px 0 rgba(15,14,12,.22));
}
.pp-info h1 { font-size: var(--fs-page-title); }
.pp-sub { font-size: 1.125rem; color: var(--ink-55); margin-top: 8px; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-3); }
.pp-buy {
margin-top: var(--s-3);
border: var(--border); border-radius: var(--r-card);
background: var(--white);
box-shadow: var(--shadow-sticker);
padding: var(--s-3);
display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2);
}
.pp-price { font-family: var(--f-disp); font-weight: 800; font-size: 2rem; }
.pp-buy-btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 420px) { .pp-buy-btns { width: 100%; } .pp-buy-btns .btn { flex: 1 1 100%; } }
.spec {
margin-top: var(--s-4);
border: var(--border); border-radius: var(--r-card);
overflow: hidden;
}
.spec-row {
display: grid; grid-template-columns: minmax(0, 1fr) 2fr; /* Пакет Б: длинный моно-лейбл распирал свою строку — «ступенька» в таблице реквизитов */
border-top: 1px solid var(--ink-16);
}
.spec-row:first-child { border-top: 0; }
.spec-row dt {
font-family: var(--f-mono); font-size: var(--fs-mono);
text-transform: uppercase; letter-spacing: .06em;
padding: 12px 16px;
background: var(--paper);
border-right: 1px solid var(--ink-16);
}
.spec-row dd { margin: 0; padding: 12px 16px; background: var(--white); }
.pp-details { margin-top: var(--s-4); }
.pp-details .faq-item summary { font-size: 1.0625rem; }
@media (max-width: 900px) {
.pp-grid { grid-template-columns: minmax(0,1fr); }
.pp-gallery { position: static; min-height: 320px; }
.pp-gallery img { max-height: 320px; }
}
/* ---------- 25. Калькулятор ---------- */
.calc-card {
border: var(--border); border-radius: var(--r-panel);
background: var(--white);
box-shadow: var(--shadow-sticker);
padding: clamp(24px, 4vw, 48px);
max-width: 760px;
}
.field { display: grid; gap: 8px; margin-bottom: var(--s-3); }
.field label { font-family: var(--f-disp); font-weight: 700; font-size: var(--fs-small); text-transform: uppercase; }
.field .help { font-family: var(--f-mono); font-size: .75rem; color: var(--ink-55); }
.input, select.input {
font: inherit;
padding: 12px 16px;
min-height: 48px;
border: var(--border); border-radius:var(--r-sm);
background: var(--paper);
width: 100%;
}
.input:focus-visible { outline: 3px solid var(--c-wash); outline-offset: 1px; }
/* --- Калькулятор V2: слева выбор концентрата, справа расчёт --- */
.calc-desk { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 860px) { .calc-desk { grid-template-columns: minmax(0, 1fr); } }
.calc-left { display: flex; flex-direction: column; min-height: 0; }
.calc-barhead { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.calc-lbl { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-55); margin: 0; display: flex; gap: 9px; align-items: center; }
.calc-n { font-family: var(--f-body); width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: .66rem; display: grid; place-items: center; font-weight: 800; letter-spacing: 0; }
.calc-shuffle { font-family: var(--f-mono); font-size: .72rem; border: var(--border); background: var(--white); border-radius: var(--r-chip); padding: 7px 13px; cursor: pointer; min-height: 34px; color: var(--ink); }
.calc-shuffle:hover { border-color: var(--ink); }
.calc-tiles { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .calc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 8px; } }
.calc-tile { position: relative; display: flex; gap: 12px; text-align: left; background: var(--white); border: 1px solid var(--ink-16); border-radius: var(--r-card); padding: 12px 13px 11px; cursor: pointer; font: inherit; color: inherit; transition: border-color var(--t-fast), transform var(--t-fast); box-shadow: 0 1px 2px rgba(12,12,12,.04); }
.calc-tile:hover { border-color: var(--ink-55); transform: translateY(-2px); }
.calc-tile-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* 19.08 (решение владельца, вариант 2): рамку вокруг фото убрали — карточка концентрата
и так обведена, вторая обводка внутри неё была лишней линией. У плиток инструментов
(ПК/Ведро/Помпа/Триггер) рамка остаётся: это кнопки выбора, ей они и опознаются. */
.calc-ph { flex: none; width: 52px; align-self: stretch; border-radius: 10px; background: var(--white); display: grid; place-items: center; overflow: hidden; }
/* 20.08 (владелец: «почему такие мелкие фотки в калькуляторе на компьютере, будто от мобилы»):
окно под фото было 52 точки при плитке в 197 — товар занимал четверть карточки, хотя
исходник 800×800. Ширина 52 разумна для телефона, где плитка вдвое уже. На компьютере
даём 76: текстовой части остаётся ~110 точек, названия линеек в неё укладываются. */
/* 20.08, итог (решение владельца): окно 51 точка. Считали от ТЕКСТА, а не на глаз —
самое широкое, что должно вставать в строку, это «Chuck NoRinse» (106 точек); «Ручная
мойка» требует 89, строка цены 99. Под текст и фото в плитке 157 точек, значит окну
остаётся 51. Фото при этом не мелкое: в калькуляторе показываются ОБРЕЗАННЫЕ копии
(имя_calc.webp) без прозрачных полей, поэтому товар занимает окно целиком. */
@media (min-width: 821px) { .calc-ph { width: 51px; } }
/* 20.08: кадр в калькуляторе — абсолютом. Обрезанные копии концентратов вытянутые
(флакон 199x666), и в обычном потоке картинка ЗАДАВАЛА высоту плитки: карточка вырастала
со 129 до 290 точек. Абсолютное положение убирает влияние кадра на размер — высоту
по-прежнему держит текст, а фото просто вписывается в оставшееся окно. */
.calc-ph { position: relative; }
/* доля из --ph применяется к ВЫСОТЕ: ширина остаётся полной, а object-fit вписывает
кадр внутрь. Если долю задавать обоим измерениям, широкая канистра упирается в
ширину окна и перестаёт расти в высоту — из-за этого 5 л и 500 мл выглядели одинаково. */
.calc-ph img { position: absolute; inset: 0; margin: auto; width: 100%; height: var(--ph, 100%); object-fit: contain; }
.calc-ph-cap { font-family: var(--f-mono); font-size: .5rem; color: var(--ink-55); text-align: center; padding: 2px; }
.calc-tile-cat { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-55); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.calc-tile-cat i { width: 7px; height: 7px; border-radius: 50%; background: var(--cc, var(--c-wash)); flex: none; }
.calc-tile-nm { font-weight: 800; font-size: .9rem; line-height: 1.1; }
.calc-tile-row { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--ink-08); }
.calc-rt { font-family: var(--f-mono); font-size: .7rem; color: var(--ink-55); }
.calc-pl { font-weight: 800; font-size: .95rem; } .calc-pl .u { font-size: .62rem; color: var(--ink-55); }
.calc-tile[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(255,208,47,.6); }
.calc-tile[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 10px; right: 11px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--acid); font-size: 12px; font-weight: 800; line-height: 1; display: grid; place-items: center; }
.calc-console { background: var(--white); border: var(--border); border-radius: var(--r-panel); padding: 18px; }
.calc-flab { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-55); margin: 0 0 8px; display: block; }
.calc-tools { display: flex; gap: 7px; margin-bottom: 16px; }
.calc-tool { position: relative; flex: 1; background: var(--paper); border: 1.5px solid var(--ink-16); border-radius: 12px; padding: 10px 6px 8px; text-align: center; cursor: pointer; font: inherit; color: inherit; transition: .14s; }
.calc-slot { width: 62px; height: 62px; margin: 2px auto 6px; border-radius: 12px; display: grid; place-items: center; }
.calc-slot img { width: 60px; height: 60px; object-fit: contain; display: block; }
.calc-tn { font-size: .64rem; font-weight: 700; line-height: 1.05; }
.calc-tool[aria-pressed="true"] { border-color: var(--ink); background: var(--white); box-shadow: 0 0 0 3px rgba(255,208,47,.6); }
.calc-tool.is-dim { opacity: .3; filter: grayscale(1); pointer-events: none; }
.calc-io { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; margin-bottom: 16px; }
.calc-vrow { display: flex; gap: 6px; }
.calc-input { font: inherit; font-size: 1.2rem; font-weight: 800; padding: 10px; border: 1.5px solid var(--ink-16); border-radius: 11px; background: var(--white); color: var(--ink); text-align: center; width: 100%; min-width: 0; min-height: 46px; }
.calc-input:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(12,12,12,.06); }
.calc-ratio { border-color: var(--acid); background: #fffdf3; }
.calc-ratio::placeholder { color: var(--ink-55); font-weight: 700; }
.calc-utog { display: flex; border: 1.5px solid var(--ink-16); border-radius: 11px; overflow: hidden; flex: none; }
.calc-utog button { font: inherit; font-weight: 800; border: 0; background: var(--white); padding: 0 11px; cursor: pointer; color: var(--ink-55); min-height: 46px; }
.calc-utog button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.calc-rr { display: flex; align-items: center; gap: 8px; }
.calc-one { font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.calc-result { background: var(--acid); border: 2px dashed rgba(12,12,12,.5); border-radius: var(--r-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.calc-part { display: flex; justify-content: space-between; align-items: center; min-height: 1.955rem; }
.calc-rl { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(12,12,12,.62); }
.calc-rv { font-family: var(--f-disp); font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; min-height: 1.15em; line-height: 1.15; }
.calc-rv .u { font-family: var(--f-body); font-size: .8rem; color: rgba(12,12,12,.55); font-weight: 700; }
.calc-cost { border-top: 2px dashed rgba(12,12,12,.35); padding-top: 9px; }
.calc-note { margin-top: 14px; font-family: var(--f-mono); font-size: .72rem; color: var(--ink-55); }
/* --- Калькулятор: компакт-мобайл (Экран 2 v3, утверждён 08.08: «человек пришёл считать») --- */
@media (max-width: 560px) {
.pg-calc { padding-block: 10px 0; }
.pg-calc .eyebrow, .pg-calc .section-lead { display: none; }
.pg-calc h1.h-display { font-size: 1.45rem; margin: 4px 0 0; }
/* плитка без фото и подписи категории: цвет-точка + имя одной строкой + 1:X и ₽/л */
.calc-ph, .calc-tile-cat { display: none; }
.calc-tile { padding: 9px 10px 8px; gap: 0; }
.calc-tile-nm { display: block; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calc-tile-nm::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cc, var(--c-wash)); margin-right: 6px; }
.calc-tile-row { margin-top: 4px; padding-top: 5px; }
.calc-rt { font-size: .66rem; } .calc-pl { font-size: .8rem; }
.calc-tile[aria-pressed="true"]::after { top: 7px; right: 7px; width: 16px; height: 16px; font-size: 10px; }
.calc-console { padding: 12px; }
.calc-flab { margin-bottom: 6px; }
.calc-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.calc-tool { min-width: 0; padding: 6px 3px; }
.calc-slot { width: auto; max-width: 52px; height: 42px; margin: 0 auto 4px; }
.calc-slot img { width: auto; max-width: 100%; height: 42px; }
.calc-io { gap: 8px; margin-bottom: 10px; }
.calc-barhead { margin-bottom: 8px; }
.calc-result { padding: 12px 14px; gap: 8px; }
}
/* ---------- 26. Журнал ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.post-card {
display: flex; flex-direction: column;
background: var(--white);
border: var(--border); border-radius: var(--r-card);
overflow: hidden;
text-decoration: none;
transition: transform var(--t-med), box-shadow var(--t-med);
}
.post-card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-sticker); }
.post-card .ph { border: 0; border-bottom: var(--border); border-radius: 0; --ph-ratio: 16/10; }
.post-body { padding: var(--s-3); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-kicker { font-family: var(--f-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-55); }
.post-title { font-family: var(--f-disp); font-weight: 800; font-size: 1.25rem; line-height: 1.15; }
.post-meta { margin-top: auto; font-family: var(--f-mono); font-size: .75rem; color: var(--ink-55); }
@media (max-width: 1000px) { .post-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (max-width: 620px) { .post-grid { grid-template-columns: minmax(0,1fr); } }
/* статья */
.prose { max-width: 720px; font-size: var(--fs-body); } /* 09.08: единый размер текста с сайтом (был 18px) */
.prose--tight h2:first-child { margin-top: 0; } /* 09.08: без провала после лида страницы */
.prose h2 { font-family: var(--f-disp); font-weight: 800; font-size: 1.75rem; margin: var(--s-5) 0 var(--s-2); letter-spacing: -.01em; }
.prose p { margin: 0 0 var(--s-3); }
.prose ul { padding-left: 1.2em; margin: 0 0 var(--s-3); }
.prose li { margin-bottom: 8px; }
.prose .callout {
border: var(--border); border-left-width: 8px;
border-radius:var(--r-sm);
background: var(--white);
padding: var(--s-3);
margin-block: var(--s-4);
}
/* ---------- 27. Контакты, партнёры, формы ---------- */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0,1fr); } }
.contact-card {
border: var(--border); border-radius: var(--r-card);
background: var(--white);
padding: var(--s-3);
display: grid; gap: 6px;
}
.contact-card .mono { color: var(--ink-55); }
.contact-card a { font-family: var(--f-disp); font-weight: 800; font-size: 1.25rem; text-decoration: none; }
.contact-card a:hover { color: var(--c-prot); }
.stack { display: grid; gap: var(--s-2); }
.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 900px) { .benefit-grid { grid-template-columns: minmax(0,1fr); } }
/* ---------- 28. Текстовые страницы, 404 ---------- */
.page-404 {
min-height: 60svh;
display: grid; place-items: center; text-align: center;
padding-block: var(--s-7) 0;
}
.page-404 img { width: min(280px, 60vw); margin-inline: auto; }
.page-404 h1 { font-size: var(--fs-page-title); margin-top: var(--s-3); }
.marquee--pink { background: var(--c-prot); color: var(--white); }
.marquee--ink { background: var(--ink); color: var(--acid); }
/* мини-карта заглушка */
.map-ph { --ph-ratio: 16/9; }
/* дилеры */
.dealer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.dealer {
border: var(--border); border-radius: var(--r-card);
background: var(--white); padding: var(--s-3);
}
.dealer h3 { font-family: var(--f-disp); font-weight: 800; font-size: 1.0625rem; }
.dealer p { margin: 6px 0 0; font-size: var(--fs-small); color: var(--ink-55); }
@media (max-width: 900px) { .dealer-grid { grid-template-columns: minmax(0,1fr); } }
/* скрыть дубли языка/кабинета в десктоп-навигации */
@media (min-width: 1061px) { .mnav-extra, .main-nav .mnav-only { display: none; } }
/* ---------- 29. Hero: моргание фар + вспышка (из v10) ---------- */
.cine-blink {
position: absolute; z-index: 2;
left: 50%; top: 44%;
width: 30vw; min-width: 280px; aspect-ratio: 1/1;
transform: translate(-50%, -50%);
border-radius: 50%;
pointer-events: none; opacity: 0;
background: radial-gradient(circle, rgba(var(--c-kit-rgb),.9) 0%, rgba(var(--c-kit-rgb),.35) 42%, rgba(var(--c-kit-rgb),0) 68%);
filter: blur(28px);
}
.cine-blink.is-on { animation: cineBlink 320ms linear both; }
@keyframes cineBlink {
0% { opacity: 0; } 18.75% { opacity: 1; } 37.5% { opacity: 0; }
62.5% { opacity: 0; } 81.25% { opacity: 1; } 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cine-blink { display: none !important; } }
/* ---------- 31. О бренде: полноэкранный hero + инфографика ---------- */
.about-hero {
min-height: calc(100svh - 112px);
display: flex; flex-direction: column; justify-content: center;
padding-block: var(--s-5);
}
.about-hero-grid {
display: grid;
grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr);
gap: clamp(24px, 4vw, 64px);
align-items: center;
}
.team-photo {
position: relative;
border-radius: var(--r-panel);
box-shadow: var(--shadow-sticker);
overflow: hidden;
}
.team-photo img {
display: block; width: 100%; height: 100%;
object-fit: cover;
border-radius: calc(var(--r-panel) - 2px);
}
.team-photo .sticker {
position: absolute; top: 14px; left: 14px;
}
.team-photo .sticker--r { top: auto; bottom: 14px; right: 14px; left: auto; }
@media (max-width: 900px) {
.about-hero-grid { grid-template-columns: minmax(0, 1fr); }
.team-photo { transform: rotate(0); margin-top: var(--s-3); }
}
.about-hero .lead { max-width: 60ch; font-size: clamp(1.0625rem, 1.6vw, 1.375rem); margin-top: var(--s-3); }
.about-stats {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--s-2);
margin-top: clamp(28px, 5vh, 56px);
}
.stat {
border-top: var(--hairline);
padding: var(--s-3) 0 0;
position: relative;
}
.stat::before {
content: "";
position: absolute; top: -4px; left: 0;
width: 8px; height: 8px; border-radius: 50%;
background: var(--acid);
}
.stat:nth-child(2)::before { background: var(--c-prot); }
.stat:nth-child(3)::before { background: var(--c-wash); }
.stat:nth-child(4)::before { background: var(--c-eco); }
.scene .stat { border-top-color: rgba(255,255,255,.22); }
.stat b {
display: block;
font-family: var(--f-disp); font-weight: 800;
font-size: clamp(1.75rem, 3.4vw, 2.75rem);
letter-spacing: -.02em;
}
.stat span { font-family: var(--f-mono); font-size: var(--fs-mono); }
.scene .stat span { color: rgba(255,255,255,.6); }
@media (max-width: 900px) {
.about-hero { min-height: auto; }
.about-stats { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
/* ============================================================
ЧАСТЬ 3 — v3 «Cinematic Loop»: тёмные сцены, каталог-список,
ритуал-сцена, фиксики-раннеры, чувак-попап, дорожная карта
============================================================ */
/* ---------- 32. Тёмная сцена со скруглением (референс-паттерн) ---------- */
.scene {
position: relative;
background: var(--ink);
color: var(--white);
border-radius: clamp(20px, 3vw, 40px);
margin-inline: clamp(8px, 1.2vw, 20px);
overflow: clip;
will-change: transform;
}
.scene .eyebrow { color: var(--acid); }
.scene .eyebrow::before { color: var(--acid); }
.showcase {
border-radius: clamp(20px, 3vw, 40px);
margin-inline: clamp(8px, 1.2vw, 20px);
border: 0;
overflow: clip;
}
.marquee--tilt { transform: none; }
/* мягче пятна на белом */
.bottles-splash { opacity: .22; filter: blur(80px); animation: splash-drift 14s ease-in-out infinite alternate; }
@keyframes splash-drift {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(40px, -30px) scale(1.15); }
}
.bottles { border-block: 0; }
/* ---------- 33. Каталог: editorial-строки ---------- */
.cat-list { border-top: var(--hairline); }
.cat-row {
display: flex; align-items: center; gap: clamp(14px, 2.5vw, 36px);
padding: clamp(20px, 3vw, 34px) 0;
border-bottom: var(--hairline);
text-decoration: none;
position: relative;
transition: padding-left .4s cubic-bezier(.2,.8,.2,1);
}
.cat-row::before { /* цветная нить слева при ховере */
content: "";
position: absolute; left: 0; top: 50%;
width: 0; height: 2px;
background: var(--cat, var(--acid));
transform: translateY(-50%);
transition: width .4s cubic-bezier(.2,.8,.2,1);
}
.cat-row:hover, .cat-row:focus-visible { padding-left: clamp(28px, 4vw, 56px); }
.cat-row:hover::before, .cat-row:focus-visible::before { width: clamp(16px, 2.6vw, 36px); }
.cat-row-num {
font-family: var(--f-mono); font-size: var(--fs-mono);
color: var(--ink-55); min-width: 2.4em;
}
.cat-row-title {
font-family: var(--f-disp); font-weight: 800;
font-size: clamp(1.5rem, 4vw, 3.3rem);
text-transform: uppercase; letter-spacing: -.015em;
line-height: 1;
transition: color .3s ease;
}
.cat-row:hover .cat-row-title { color: var(--cat, var(--ink)); color: color-mix(in oklab, var(--cat, var(--ink)) 72%, var(--ink)); }
.cat-row-meta {
font-family: var(--f-mono); font-size: var(--fs-mono);
color: var(--ink-55);
margin-left: auto; text-align: right;
}
.cat-row-thumb {
width: clamp(64px, 6.5vw, 96px); height: clamp(64px, 6.5vw, 96px);
border-radius:var(--r-card); flex-shrink: 0;
background: var(--white);
background: color-mix(in oklab, var(--cat, var(--acid)) 14%, var(--white));
border: var(--hairline);
display: grid; place-items: center;
overflow: hidden;
transition: transform .4s cubic-bezier(.2,.8,.2,1), background .3s ease;
}
.cat-row-thumb img { width: 78%; height: 84%; object-fit: contain; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.cat-row:hover .cat-row-thumb { transform: scale(1.08) rotate(2deg); background: var(--white); background: color-mix(in oklab, var(--cat, var(--acid)) 26%, var(--white)); }
.cat-row:hover .cat-row-thumb img { transform: scale(1.1); }
@media (max-width: 700px) {
.cat-row-meta { display: none; }
}
/* ---------- 37. Дорожная карта (о бренде) ---------- */
.roadmap { overflow: hidden; }
.roadmap-track {
display: flex; gap: clamp(20px, 3.5vw, 56px);
/* 11.08 (владелец): вертикальные отступы блока = боковым отступам карточек (были 48px);
карточки НЕ растягиваются под самую высокую — каждая своей высоты, снизу ровно
тот же отступ, что сверху над годом */
align-items: flex-start;
padding-block: clamp(20px, 2.2vw, 30px);
will-change: transform;
}
.rm-item {
/* 11.08: 400→360px — с вертикальными фото 3:4 карточка с заголовком секции
должна помещаться в вьюпорт ~960px при закрепе ленты */
flex: 0 0 min(360px, 76vw);
border-top: var(--hairline);
padding-top: var(--s-3);
position: relative;
}
.rm-item::before {
content: "";
position: absolute; top: -5px; left: 0;
width: 10px; height: 10px; border-radius: 50%;
background: var(--rm, var(--acid));
}
.rm-year {
font-family: var(--f-disp); font-weight: 800;
/* 11.08 (владелец): год = размер заголовка страницы («История…»), а не гигант 104px —
карточки с вертикальными фото не влезали на экран */
font-size: var(--fs-page-title);
line-height: 1; letter-spacing: -.04em;
color: var(--ink);
}
.rm-title { font-family: var(--f-disp); font-weight: 800; font-size: 1.25rem; margin-top: var(--s-2); }
.rm-text { color: var(--ink-55); margin-top: 8px; font-size: var(--fs-small); max-width: 34ch; }
.rm-item .ph { margin-top: var(--s-3); --ph-ratio: 16/10; }
.roadmap-fallback-scroll {
overflow-x: auto; scroll-snap-type: x mandatory;
scrollbar-width: thin;
}
.roadmap-fallback-scroll .rm-item { scroll-snap-align: start; }
/* ---------- 38. Ароматы-пузыри в шоукейсе ---------- */
.aroma-bubbles { position: absolute; inset: 0; pointer-events: none; }
.aroma-bubble {
position: absolute;
display: grid; place-items: center; text-align: center;
border-radius: 50%;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.4);
backdrop-filter: blur(10px);
color: var(--white);
font-family: var(--f-disp); font-weight: 800;
text-transform: uppercase;
box-shadow: 0 14px 30px -12px rgba(12,12,12,.4);
animation: bubble-float 6s ease-in-out infinite;
padding: 12px;
line-height: 1.05;
overflow: hidden;
}
/* 19.08: было `white-space:nowrap` — надпись жила одной строкой, и в кружок 98 точек
влезало только короткое. Разрешаем вторую строку: «Сила лайма» встаёт как «СИЛА /
ЛАЙМА» и читается кеглем 15 вместо обрезки многоточием. Переносы только по пробелу
и по уже стоящему дефису («Древесно-фруктовый») — дефисной расстановки нет, владелец
такие переносы не принимает. break-word — страховка на случай длинного слова без пробелов.
JS (renderAromas) по-прежнему ужимает шрифт, если и в две строки не влезло. */
.ab-txt { display: inline-block; white-space: normal; overflow-wrap: break-word; }
/* 1-е слово — внизу слева, 2-е — вверху справа; одинаковый размер, чтобы текст влезал */
.aroma-bubble:nth-child(1) { width: clamp(96px, 8.5vw, 122px); height: clamp(96px, 8.5vw, 122px); bottom: 8%; left: 2%; font-size: clamp(.7rem, .95vw, .875rem); }
.aroma-bubble:nth-child(2) { width: clamp(96px, 8.5vw, 122px); height: clamp(96px, 8.5vw, 122px); top: 4%; right: 4%; font-size: clamp(.7rem, .95vw, .875rem); animation-delay: 1.2s; animation-duration: 7s; }
.aroma-bubble:nth-child(3) { width: clamp(40px, 4vw, 60px); height: clamp(40px, 4vw, 60px); top: 18%; left: 8%; font-size: .625rem; animation-delay: 2.1s; animation-duration: 5.2s; background: rgba(255,255,255,.75); }
@keyframes bubble-float {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-16px) rotate(2deg); }
}
.aroma-note {
position: absolute; left: 0; bottom: -6px;
font-family: var(--f-mono); font-size: .6875rem;
color: rgba(255,255,255,.6);
}
/* ---------- 39. «Задай вопрос» — тёмная сцена вместо жёлтой карточки ---------- */
/* 11.08 (решение владельца + вердикт дизайнера): сцены с маскотом ВЛЕВО, как весь сайт —
центр дрался с маскотом (наезды заголовка, уменьшение, выпадание на ноутбуках) */
.ask-scene h2 {
font-size: clamp(2rem, 5.4vw, 4.6rem);
max-width: 18ch;
}
.ask-scene .section-lead { color: rgba(255,255,255,.7); }
/* ============================================================
ЧАСТЬ 4 — v5 «Editorial»: зерно, маски, номера секций, полировка
============================================================ */
/* тонкое зерно по всему сайту — «киношная» фактура */
body::after {
content: "";
position: fixed; inset: 0; z-index: 2000;
pointer-events: none;
opacity: .035;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
/* мягкая виньетка в тёмных сценах */
.scene::after, .hero::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background: radial-gradient(130% 100% at 50% 0%, transparent 55%, rgba(0,0,0,.4) 100%);
z-index: 1;
}
.hero::before { z-index: 1; }
/* маска-реавил заголовков (JS вешает .mask-reveal) */
.mask-reveal { clip-path: inset(0 0 100% 0); }
.mask-reveal.is-shown {
clip-path: inset(0 0 -8% 0);
transition: clip-path .9s cubic-bezier(.65, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) { .mask-reveal { clip-path: none !important; } }
/* номера секций по краю — издательская деталь */
.sec-num {
font-family: var(--f-mono);
font-size: .6875rem;
letter-spacing: .14em;
color: var(--ink-55);
display: block;
margin-bottom: var(--s-2);
}
.scene .sec-num, .showcase .sec-num { color: rgba(255,255,255,.45); }
/* eyebrow строже: без стрелки-треугольника; черта цветом самого кикера
(чёрная на светлом — решение владельца 09.08), не розовым от старой стрелки */
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; color: inherit; opacity: .8; }
/* заглушки фото: спокойнее */
.ph {
border: 1px dashed rgba(12,12,12,.28);
background: repeating-linear-gradient(45deg, transparent 0 18px, rgba(12,12,12,.035) 18px 19px), var(--white);
}
.ph .ph-label { border: var(--hairline); box-shadow: none; }
/* чипы: тоньше */
.chip { border-width: 1px; }
/* карточки/плитки: hover без прыжков-сдвигов */
.prod-card:hover, .post-card:hover, .buy-tile:hover { transform: translateY(-4px); }
.utp-card { border: var(--hairline); box-shadow: none; }
.review-card { border: var(--hairline); box-shadow: none; }
.buy-tile { border: var(--hairline); }
.buy-tile:hover { background: var(--white); box-shadow: var(--shadow-sticker); }
.hint { border: 0; }
.dealer, .contact-card, .calc-card { border: var(--hairline); }
.calc-card { box-shadow: var(--shadow-sticker); }
.prod-card { border: var(--hairline); }
.prod-media { border-bottom: var(--hairline); }
.faq-item { border-bottom: var(--hairline); }
.faq-item summary::after { border: var(--hairline); }
.spec, .spec-row dt { border-color: rgba(12,12,12,.14); }
.spec { border: var(--hairline); }
.pp-buy { border: var(--hairline); box-shadow: var(--shadow-sticker); }
/* фиксики: подпись-заглушка тише */
/* чувак: строже пузырь */
.buddy-bubble { border: var(--hairline); box-shadow: var(--shadow-sticker); border-radius: 14px 14px 14px 4px; }
.buddy-ava { border: 2px solid var(--white); }
/* hero 09.08 (консилиум, согласовано владельцем): блок выше — в нижней трети,
фару не перекрывает; воздух под строкой FOAM HEROES */
.hero-inner { padding-block: var(--s-6) clamp(64px, 16svh, 150px); }
.hero .eyebrow { margin-bottom: var(--s-2); }
/* ============================================================
ЧАСТЬ 5 — правки главной: UGC-доска, обложки каталога, где купить
============================================================ */
/* ---------- UGC: пинтерест-доска (masonry) ---------- */
.ugc-board { columns: 4 240px; column-gap: clamp(12px, 1.4vw, 18px); }
.ugc-card {
position: relative; display: block;
break-inside: avoid;
margin-bottom: clamp(12px, 1.4vw, 18px);
border-radius:var(--r-lg); overflow: hidden;
text-decoration: none; color: var(--white);
border: 1px solid var(--line, rgba(12,12,12,.14));
transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
/* 10.08 (правка маркетолога п.2): transform задан ПОСТОЯННО + карточка живёт в своём слое —
в Safari появление transform на ховере ВНУТРИ CSS columns перерисовывало карточку белой */
transform: translateY(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ugc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sticker); }
.ugc-ph {
display: grid; place-items: center;
aspect-ratio: var(--ratio, 3/4);
padding: 18px; text-align: center;
background:
repeating-linear-gradient(135deg, rgba(12,12,12,.04) 0 16px, rgba(12,12,12,.02) 16px 17px),
var(--paper);
}
.ugc-ph-label { font-family: var(--f-mono); font-size: .6875rem; line-height: 1.5; color: var(--ink-55); max-width: 22ch; }
.ugc-tag {
position: absolute; left: 12px; bottom: 12px; right: 12px;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 8px 12px; border-radius:var(--r-chip);
/* 12.08: убран backdrop-filter — в Safari он появлялся по ховеру ВНУТРИ CSS columns
и белил экран. Плотная тёмная плашка читается так же, без блюра-виновника. */
background: rgba(12,12,12,.74);
opacity: 0; transform: translateY(6px);
transition: opacity .3s ease, transform .3s ease;
}
.ugc-card:hover .ugc-tag { opacity: 1; transform: none; }
.ugc-tag b { font-family: var(--f-disp); font-weight: 700; font-size: .8125rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* пилюля площадки не сжимается — длинный ник обрезается в «…», а не выдавливает TG/VK/YT */
.ugc-plat { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em; border: 1px solid rgba(255,255,255,.4); border-radius:var(--r-chip); padding: 2px 8px; flex: 0 0 auto; }
/* Пакет А: колонки без жёсткой ширины — 2×160px не влезали в 328px (@360) и доска падала в 1 колонку высотой 3650px */
@media (max-width: 900px) { .ugc-board { columns: 2 auto; column-gap: 10px; } }
/* ---------- Каталог: тёмные обложки-фото (вариант B) ---------- */
.covers { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.4vw, 18px); }
.cover {
position: relative; overflow: hidden; border-radius:var(--r-lg);
min-height: clamp(260px, 30vw, 400px);
background: #191919; color: var(--white);
border: 1px solid rgba(255,255,255,.12);
display: flex; flex-direction: column; justify-content: flex-end;
padding: clamp(22px, 2.4vw, 34px);
text-decoration: none;
}
.cover:nth-child(1) { grid-column: span 7; }
.cover:nth-child(2) { grid-column: span 5; }
.cover:nth-child(3) { grid-column: span 5; }
.cover:nth-child(4) { grid-column: span 4; }
.cover:nth-child(5) { grid-column: span 3; }
.cover::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(130% 130% at 82% 8%, var(--c) 0%, transparent 55%);
opacity: .55; transition: opacity .5s ease;
}
.cover::after {
content: ""; position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
opacity: .06; pointer-events: none;
}
.cover:hover::before { opacity: .9; }
.cover img {
/* 12.08 ОТКАТ: пробовал показывать на плитах кадр без прозрачных полей (автокроп) —
у фото разные пропорции, и товары поехали в разном масштабе. Владелец: «стало
сильно хуже». Вернулись к исходным фото и прежней раскладке. */
position: absolute; right: -4%; top: 50%;
transform: translateY(-50%) rotate(-8deg);
height: 78%; width: auto;
filter: drop-shadow(0 30px 42px rgba(0,0,0,.55));
transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.cover:hover img { transform: translateY(-52%) rotate(-4deg) scale(1.07); }
.cover-ph {
position: absolute; right: 8%; top: 50%; transform: translateY(-50%);
width: 30%; aspect-ratio: 1/2.2;
border: 1px dashed rgba(255,255,255,.3); border-radius:var(--r-sm);
display: grid; place-items: center;
font-family: var(--f-mono); font-size: .625rem; color: rgba(255,255,255,.6);
text-align: center; padding: 10px;
}
.cover-idx { position: absolute; top: clamp(22px, 2.4vw, 34px); left: clamp(22px, 2.4vw, 34px); color: rgba(255,255,255,.7); z-index: 1; }
.cover-title {
position: relative; z-index: 1;
font-family: var(--f-disp); font-weight: 800; text-transform: uppercase;
font-size: clamp(1.15rem, 2vw, 2.2rem);
letter-spacing: -.02em; line-height: 1.05;
overflow-wrap: normal; word-break: keep-all; /* слова не рвём по буквам */
}
/* Четвёртая и пятая обложки на компьютере узкие (4 и 3 колонки из 12), поэтому заголовок
там мельче. ★ 20.08: на телефоне все обложки ОДНОЙ ширины, а правило продолжало работать —
владелец: «чем ниже, тем меньше шрифт, прям бросается в глаза». Замер на 390: первые три
заголовка 18,4 точки, четвёртый и пятый 16. Ограничиваем правило шириной, где узкие колонки
реально существуют. */
@media (min-width: 821px) {
.cover:nth-child(4) .cover-title, .cover:nth-child(5) .cover-title { font-size: clamp(1rem, 1.45vw, 1.55rem); }
}
/* нижний скрим — заголовок читается поверх флакона */
.cover .cover-scrim {
position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
background: linear-gradient(180deg, transparent, rgba(0,0,0,.62));
pointer-events: none;
}
.cover-meta { position: relative; z-index: 1; margin-top: 8px; color: rgba(255,255,255,.65); }
@media (max-width: 820px) {
.covers { grid-template-columns: 1fr 1fr; }
.cover, .cover:nth-child(n) { grid-column: span 1; min-height: 220px; }
.cover:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 520px) {
.covers { grid-template-columns: 1fr; }
.cover:nth-child(5) { grid-column: span 1; }
}
/* ============================================================
ЧАСТЬ 6 — секция ароматов + ровный ритм светлых зон
============================================================ */
/* ============================================================
ЧАСТЬ 7 — «Где купить» с иконками площадок + roadmap v2
============================================================ */
.buy-cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(12px, 1.4vw, 18px);
}
.buy-card {
position: relative;
display: flex; flex-direction: column; gap: 6px;
padding: clamp(18px, 2vw, 26px);
border: var(--hairline); border-radius:var(--r-lg);
background: var(--paper);
text-decoration: none; color: var(--ink);
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .3s ease;
}
.buy-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sticker); background: var(--white); }
.buy-logo {
/* слот под официальный логотип площадки — заменить на ![]()
*/
display: grid; place-items: center;
height: 46px; margin-bottom: 10px;
border: 1px dashed rgba(12,12,12,.25); border-radius:var(--r-sm);
font-size: .625rem; color: var(--ink-55);
}
.buy-card-name { font-family: var(--f-disp); font-weight: 800; text-transform: uppercase; font-size: 1.0625rem; letter-spacing: -.01em; }
.buy-card-desc { font-size: .875rem; color: var(--ink-55); }
.buy-card-arrow { position: absolute; top: 14px; right: 16px; color: var(--acid-deep); font-size: 1.125rem; transition: transform .3s ease; }
.buy-card:hover .buy-card-arrow { transform: translate(3px, -3px); }
@media (max-width: 900px) { .buy-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .buy-cards { grid-template-columns: minmax(0,1fr); } }
/* ---------- Дорожная карта v2: карточки, живой ритм ---------- */
.rm-item {
background: var(--white);
border: var(--hairline);
border-top: none;
border-radius:var(--r-lg);
padding: clamp(20px, 2.2vw, 30px);
box-shadow: 0 18px 40px -30px rgba(12,12,12,.25);
}
.rm-item::before { top: 0; left: clamp(20px, 2.2vw, 30px); width: 34px; height: 5px; border-radius:var(--r-chip); }
/* 12.08 (решение владельца): сдвиг чётных вех УДАЛЁН - он не работал (перебивался
анимацией появления .reveal.is-in{transform:none}), а карточки с вертикальными фото
и без него впритык по высоте при закрепе ленты. Лента ровной линией. */
.rm-year { margin-top: 4px; }
/* --- История «О бренде» на мобиле/планшете: вертикально, компакт (Экран 6 v2, утв. 08.08) --- */
@media (max-width: 900px) {
.roadmap-fallback-scroll { overflow-x: visible; scroll-snap-type: none; }
.roadmap-track { flex-direction: column; gap: 14px; padding-block: var(--s-4); position: relative; }
.roadmap-track::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--ink-16); }
.rm-item { flex: none; width: auto; margin-left: 34px; padding: 14px 16px 16px; }
.rm-item::before { left: -29px; top: 20px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--paper); }
.rm-year { font-size: 1.5rem; margin-top: 0; letter-spacing: -.02em; }
.rm-title { font-size: 1.05rem; line-height: 1.2; margin-top: 4px; }
.rm-text { margin-top: 6px; font-size: .85rem; line-height: 1.4; max-width: none; }
.rm-item .ph { margin-top: 10px; --ph-ratio: 21/9; }
}
/* ============================================================
ЧАСТЬ 8 — senior-полиш: фокус на тёмном, тач, ритм сцен
============================================================ */
/* фокус-кольцо на тёмных поверхностях — жёлтое, а не синее */
.scene :focus-visible,
.showcase :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.cat-hero :focus-visible {
outline-color: var(--acid);
}
/* подписи UGC-карточек: на тач-устройствах видны всегда (hover нет) */
@media (hover: none) {
.ugc-tag { opacity: 1; transform: none; }
/* Полировка (утв. роадмеп): ховеры-сдвиги — только для мыши, на таче «залипают» после нажатия */
.btn:hover { transform: none; }
.logo:hover { transform: none; }
.cat-card:hover { transform: none; box-shadow: var(--shadow-sticker); }
.cat-card:hover .cat-arrow { transform: none; }
.prod-card:hover { transform: none; }
.prod-card:hover .prod-media img { transform: none; }
.buy-tile:hover { transform: none; }
.showcase-tab:hover { transform: none; }
.calc-tile:hover { transform: none; border-color: var(--ink-16); }
.buy-card:hover .buy-card-arrow { transform: none; }
}
/* --- Полировка: функциональные подписи не мельче ~12px на мобиле (утв. роадмеп; декоративные номера не трогаем) --- */
@media (max-width: 640px) {
.calc-flab, .calc-rl, .calc-lbl, .calc-rt, .jr-tag, .aroma-note { font-size: .75rem; }
.calc-tn { font-size: .74rem; }
.calc-pl .u, .ugc-plat, .footer-bottom { font-size: .72rem; }
}
/* воздух между подряд идущими тёмными/цветными сценами и перед футером */
.scene + .scene,
.scene + .showcase,
.showcase + .scene,
.section--white + .scene,
.showcase + .section--white { margin-top: clamp(20px, 2.6vw, 44px); }
/* ============ ЕДИНЫЙ ОТСТУП ДО ПОДВАЛА (21.08, консилиум двух дизайнеров,
макет согласован владельцем) ============
Было: у каждого шаблона своё число — 20 у главной, 36 у вопросов, 72 у раздела,
92 у статьи, 96 у товара и 404. Владелец заметил на телефоне. Стало: одно число
--gap-footer, 48 на телефоне и 64 на компьютере.
Почему растёт к компьютеру, а не плоское: у подвала СВОЯ набивка, и она тоже
разная — 26 против 64 (см. .site-footer ниже). Плоский зазор сделал бы компьютер
визуально теснее телефона.
Зазор ставится ОДИН раз — на подвал. Всё, что давало его раньше, обнулено ТАМ,
ГДЕ ЛЕЖИТ: catalog.css (обёртка), journal.css (тема и статья), .page-404 выше,
.section и .scene здесь. Перебить catalog.css/journal.css отсюда нельзя — они
подключаются ПОЗЖЕ main.css.
:last-of-type, а НЕ :last-child: в конце у товара, раздела, журнала и
калькулятора лежат служебные