/* ============================================================
«АРТЕФАКТ» — дизайн-система многостраничника РЫБЦЕХ.РФ
Тёплая тьма #100904 · кремовая типографика #ffedd7 · ембер #dc5000
Музейная подача: секции-залы, пунктирные служебные хайрлайны,
ноль UI-хрома, кадры с острым краем, rim-свет справа-сверху.
Источник: одностраничник «Рыбцех — Артефакт» + refs/full/Артефакт/DESIGN.md
(ORYZO AI Darkroom product editorial).
Шрифты — локальные файлы в assets/fonts/, без внешнего CDN
(см. РАЗВЕДКА-ТИПОГРАФИКА.md). Две роли — не три: у эталона ORYZO/Lusion
правило «один шрифт на 99% текста», Golos Text повторяет его буквально:
--ff Golos Text — рабочая: дисплей, заголовки, тело, подписи (вся страница)
--fm JetBrains Mono — моно: вертикальная серийная метка, теги-бирки в прайсе
.nano/.stampnote сознательно остаются на системном Arial — так у самого
эталона (см. РАЗВЕДКА-ТИПОГРАФИКА.md §2.1, сноска про .btn) — это приём,
не недоделка. Подключение — только через @font-face ниже, на
Google Fonts в HTML больше не нужен и не должен возвращаться в .
============================================================ */
/* ---------- 0а. ШРИФТЫ (локально, assets/fonts/) ---------- */
@font-face{
font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;
src:url('fonts/GolosText-cyr.woff2') format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;
src:url('fonts/GolosText-lat.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+20BD,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/JetBrainsMono-cyr.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/JetBrainsMono-lat.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+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ---------- 0. ТОКЕНЫ ---------- */
:root{
/* палитра — шесть тонов, глубина цветом, не тенью */
--cream:#ffedd7; /* текст, блики, единственное «украшение» */
--walnut:#100904; /* канвас: тёплая тьма */
--bark:#382416; /* заливка пилюли, тёплая ступень */
--bark-05:#1a0f07; /* единственный промежуточный тон */
--cork:#40372e; /* границы, пунктиры, разделители */
--drift:#9e8d7a; /* вторичный текст, служебные подписи. Поднято
с #6c5f51 (аудит М2 01.09): было 3,19:1 на
--walnut и 2,37:1 на --bark — ниже порога
4,5:1 для мелкого текста (--micro 10–12px).
Новое значение — 6,16:1 на --walnut и
4,57:1 на --bark (более тугой порог держит
цвет в узде, дальше не поднимать). */
--ember:#dc5000; /* ТОЛЬКО метки, ID, активные состояния */
--hair:rgba(64,55,46,.62); /* волосяная линия таблиц и списков */
--ff:'Golos Text','Halyard Display',ui-sans-serif,system-ui,'Segoe UI',sans-serif; /* рабочая: 99% сайта — дисплей, тело, подписи */
--fm:'JetBrains Mono','Courier New',Courier,monospace; /* моно: серийная метка, теги-бирки прайса */
/* лестница кеглей (на 1440: 51 / 41 / 29 / 18 / 12 px) */
--display:clamp(34px,3.55vw,64px);
--heading:clamp(28px,2.85vw,48px);
--body:clamp(19px,2.02vw,32px);
--body-s:clamp(15px,1.15vw,18px);
--micro:clamp(10px,.78vw,12px);
--bloom:0; /* прогресс тёплого пятна света, ставит JS */
--r-pill:36px;
--r-ghost:22.5px;
--r-card:12px;
--card-pad:24px;
--pad:clamp(18px,4.2vw,64px); /* боковое поле полосы */
--gap:clamp(24px,3.4vw,56px);
--sec-pad:clamp(96px,11vh,132px); /* воздух под служебной шапкой зала — ужат 02.09: было 132–170, между залами лежали полосы пустоты по 360–450 px */
--maxw:1560px;
--e:cubic-bezier(.2,.8,.2,1);
--t:var(--t-420) var(--e);
--tq:.4s ease;
}
/* ---------- 1. RESET / БАЗА ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
body{
background:var(--walnut);color:var(--cream);
font-family:var(--ff);font-weight:500;font-size:var(--micro);
line-height:1.4;letter-spacing:.02em;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
input{font:inherit;color:inherit;background:none;border:0}
a{color:inherit;text-decoration:none}
::selection{background:var(--ember);color:var(--walnut)}
:focus-visible{outline:1px solid var(--ember);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--bark);padding:12px 18px;
font-size:var(--micro);letter-spacing:.06em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}
/* ---------- 2. ТИПОГРАФИЧЕСКИЙ СЛОВАРЬ ----------
Пять классов на весь сайт. Ничего сверх — иначе музей рассыпается. */
.u{text-transform:uppercase;font-weight:500}
.lbl{ /* надглазник / служебная метка */
display:inline-block;font-size:var(--micro);font-weight:500;text-transform:uppercase;
letter-spacing:.06em;color:var(--drift);line-height:1.2;
}
.lbl--cream{color:var(--cream)}
.lbl--em{color:var(--ember)} /* «УЛОВ 2026», «ОТБОРНЫЙ», «СПЕЦ-ПОСОЛ» */
.d{ /* дисплей: 1 на страницу */
font-size:var(--display);line-height:.9;font-weight:500;text-transform:uppercase;
letter-spacing:0;
}
.h{ /* заголовок зала */
font-size:var(--heading);line-height:.9;font-weight:500;text-transform:uppercase;
letter-spacing:0;text-wrap:balance;max-width:13ch;
}
.b{ /* лид — крупный, короткий */
font-size:var(--body);line-height:1.26;font-weight:400;letter-spacing:0;
max-width:24ch;color:var(--cream);
}
.b--wide{max-width:34ch}
.bs{ /* тело */
font-size:var(--body-s);line-height:1.42;font-weight:400;letter-spacing:0;
max-width:42ch;color:var(--cream);
}
.dim{color:var(--drift)}
.em{color:var(--ember)}
.nano{ /* каталожная сноска, Arial 8px */
font-family:Arial,Helvetica,sans-serif;font-size:8px;line-height:1.5;
text-transform:uppercase;letter-spacing:.08em;color:var(--drift);font-weight:400;
}
.nano--note{border-top:1px dashed var(--cork);padding-top:9px;display:inline-block}
/* ---------- 3. РАЗДЕЛИТЕЛИ ---------- */
.dash{border:0;border-top:1px solid var(--hair);margin:0;height:0}
.dash--soft{border-top-color:var(--drift);opacity:.45}
.dash--dot{border:0;border-top:1px dashed var(--cork);margin:0;height:0}
/* ---------- 4. КНОПКИ ---------- */
.ghost{ /* основная: контурная капсула */
display:inline-flex;align-items:center;gap:.7em;
border:1px solid var(--cream);border-radius:var(--r-ghost);
padding:.85em 1.5em;font-size:var(--micro);text-transform:uppercase;letter-spacing:.05em;
transition:background var(--t),color var(--t);
}
.ghost:hover,.ghost:focus-visible{background:var(--cream);color:var(--walnut)}
.pill{ /* залитая: максимум ОДНА на страницу */
display:inline-flex;align-items:center;gap:.7em;
background:var(--bark);color:var(--cream);border-radius:var(--r-pill);
padding:1.05em 2em;font-size:var(--micro);text-transform:uppercase;letter-spacing:.05em;
transition:transform var(--t);
}
.pill:hover,.pill:focus-visible{transform:translateY(-3px)}
.link{ /* текстовая ссылка на подчёркивании */
display:inline-block;text-transform:uppercase;font-size:var(--micro);letter-spacing:.05em;
border-bottom:1px solid var(--cork);padding-bottom:.28em;
transition:border-color var(--tq),color var(--tq);
}
.link:hover,.link:focus-visible{border-color:var(--cream)}
.btns{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
/* ---------- 5. НАВИГАЦИЯ ПО СТРАНИЦАМ ---------- */
.nav{
position:fixed;inset:0 0 auto 0;z-index:60;
display:flex;align-items:center;gap:clamp(16px,2.2vw,38px);
padding:clamp(14px,1.7vw,22px) calc(var(--pad) + 40px) clamp(14px,1.7vw,22px) var(--pad);
border-bottom:1px solid transparent;
transition:background var(--t),border-color var(--t);
}
.nav.is-stuck{
background:rgba(16,9,4,.86);border-bottom-color:var(--cork);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.nav__logo{font-size:var(--micro);text-transform:uppercase;letter-spacing:.10em;font-weight:500;flex:0 0 auto}
.nav__menu{display:flex;gap:clamp(16px,2.2vw,38px);align-items:center;margin-inline:auto}
/* единственный «живой» пунктир сайта — подчёркивание активной страницы */
.nav__menu a{
font-size:var(--micro);text-transform:uppercase;letter-spacing:.05em;color:var(--cream);opacity:.72;
border-bottom:1px dashed transparent;padding-bottom:.3em;
transition:border-color var(--tq),opacity var(--tq);
}
.nav__menu a:hover,.nav__menu a:focus-visible{opacity:1}
.nav__menu a.is-active,.nav__menu a[aria-current="page"]{border-bottom-color:var(--cream);opacity:1}
.nav__tel{
flex:0 0 auto;font-size:var(--micro);text-transform:uppercase;letter-spacing:.05em;
white-space:nowrap;transition:color var(--tq);
}
.nav__tel:hover,.nav__tel:focus-visible{color:var(--ember)}
.burger{display:none;width:34px;height:22px;position:relative;flex:0 0 auto;margin-left:auto}
.burger span{position:absolute;left:0;right:0;height:1px;background:var(--cream);
transition:transform var(--t-420) var(--e),opacity .3s}
.burger span:nth-child(1){top:5px}
.burger span:nth-child(2){bottom:5px}
body.menu-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}
.drawer{
position:fixed;inset:0;z-index:55;background:var(--walnut);
display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);
opacity:0;visibility:hidden;transform:translateY(-2%);
transition:opacity var(--t-420) ease,transform var(--t-420) var(--e),visibility var(--t-420);
}
body.menu-open .drawer{opacity:1;visibility:visible;transform:none}
.drawer a{
display:block;padding:clamp(14px,3.2vh,26px) 0;border-bottom:1px solid var(--cork);
font-size:clamp(26px,8vw,41px);line-height:.9;text-transform:uppercase;font-weight:500;
transition:color var(--tq);
}
.drawer a:first-of-type{border-top:1px solid var(--cork)}
.drawer a[aria-current="page"],.drawer a:hover{color:var(--ember)}
.drawer__foot{margin-top:clamp(18px,3vh,30px);display:flex;flex-wrap:wrap;gap:10px 26px}
/* ---------- 6. ВЕРТИКАЛЬНАЯ «СЕРИЙНАЯ» МЕТКА (сигнатура) ---------- */
.vlabel{
position:fixed;top:0;right:0;z-index:70;
writing-mode:vertical-rl;text-orientation:mixed;
background:var(--cream);color:var(--walnut);
padding:18px 9px 26px;border-radius:0 0 0 var(--r-card);
font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
pointer-events:none;
}
.vlabel span{display:block}
/* Модуль в конце assets/artefakt.js оживляет метку в перетаскиваемый
ползунок прокрутки — добавляет этот класс сам, только когда включён
(не reduced-motion, не узкий экран). Без JS/при этих условиях метка
остаётся как была: тот же .vlabel{pointer-events:none} строкой выше,
вид не меняется ни на пиксель. */
.vlabel.is-scrollbar{
pointer-events:auto;cursor:grab;touch-action:none;
transition:top .12s linear;
}
.vlabel.is-scrollbar.is-dragging{cursor:grabbing;transition:none}
.vlabel.is-scrollbar:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
@media (forced-colors:active){
.vlabel.is-scrollbar:focus-visible{outline:2px solid Highlight}
}
/* ---------- 7. ТЁПЛОЕ ПЯТНО СВЕТА (соляной bloom) ---------- */
body::after{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(64% 62% at 8% 92%, rgba(220,80,0,.30), transparent 68%);
mix-blend-mode:screen;opacity:var(--bloom);
}
/* служебная сноска вьюпорта — проявляется в «глубине» страницы */
.stampnote{
position:fixed;right:calc(var(--pad) + 40px);bottom:14px;z-index:41;margin:0;
pointer-events:none;opacity:0;transition:opacity var(--t-700) ease;text-align:right;
}
body.is-deep .stampnote{opacity:.9}
body.is-quiet .stampnote{opacity:0} /* гаснет над таблицами/каталогом */
/* ---------- 8. КАРКАС: ЗАЛ ---------- */
.sec{
/* Было min-height:100svh — короткий зал растягивался на весь экран, а
центрирование делило остаток пустотой сверху и снизу (полосы 360–450 px
на 1440×900, владелец видел их глазами). Насыщенным залам хватает и так. */
position:relative;z-index:1;min-height:clamp(560px,78vh,900px);min-height:clamp(560px,78svh,900px);
padding:var(--sec-pad) var(--pad);
border-top:1px solid var(--cork);
display:flex;flex-direction:column;justify-content:center;
}
.sec--flow{justify-content:flex-start} /* длинный контент: прайс, каталог */
.sec--tight{min-height:0;padding-block:clamp(52px,7vh,96px)} /* служебный зал */
.sec--first{border-top:0}
.wrap{max-width:var(--maxw);margin-inline:auto;width:100%}
/* служебная шапка зала: номер + название, пунктир снизу — сигнатура концепта */
.sec__head{
position:absolute;top:clamp(62px,8.2vh,92px);left:var(--pad);right:calc(var(--pad) + 40px);
padding-bottom:.9em;border-bottom:1px dashed var(--cork);
}
.sec--tight .sec__head{position:static;margin-bottom:clamp(22px,3.4vh,38px)}
.sec__head span{font-size:var(--micro);letter-spacing:.06em;text-transform:uppercase;color:var(--drift)}
/* ---------- 9. МЕДИА-СЛОТЫ ----------
Кадр — с острым краем, без рамок и подписей. Пропорцию задаёт --ar. */
.ph{
position:relative;margin:0;overflow:hidden;border-radius:0;border:0;
background:radial-gradient(92% 72% at 68% 20%, var(--bark) 0%, var(--bark-05) 46%, var(--walnut) 100%);
aspect-ratio:var(--ar,16/9);
display:grid;place-items:center;isolation:isolate;
}
.ph::after{ /* мягкий rim справа-сверху */
content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
background:radial-gradient(80% 64% at 66% 18%, rgba(255,237,215,.09), transparent 68%);
}
.ph__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* .ph--shot — слот с настоящим кадром: снимает световое пятно, кладёт кино-протяг */
.ph--shot{background:radial-gradient(92% 72% at 68% 20%, var(--bark-05) 0%, #130b05 52%, var(--walnut) 100%)}
.ph--shot::after{
background:linear-gradient(180deg,rgba(16,9,4,.30) 0%,transparent 26%,transparent 68%,rgba(16,9,4,.42) 100%);
}
.ph--fill{aspect-ratio:auto;height:100%;min-height:180px}
.ph--plain::after{display:none} /* когда поверх кадра идут controls */
.ph__corners{position:absolute;inset:14px;pointer-events:none;z-index:3}
.ph__corners i{position:absolute;width:14px;height:14px;border:0 solid rgba(255,237,215,.38)}
.ph__corners i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px}
.ph__corners i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px}
.ph__corners i:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.ph__corners i:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.sec .ph__corners{display:none} /* приводочные уголки — только в герое */
.ph__play{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
width:clamp(52px,5vw,74px);aspect-ratio:1;border:1px solid rgba(255,237,215,.55);border-radius:50%;
display:grid;place-items:center;transition:opacity var(--t-420) ease;
}
.ph__play::after{content:"";border-left:9px solid var(--cream);
border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
button.ph__play{background:none;padding:0;font:inherit;color:inherit;cursor:pointer}
button.ph__play:hover{border-color:var(--cream)}
.ph--vid.is-playing .ph__play{opacity:0;pointer-events:none}
/* полоса во всю ширину: кадр край-в-край между залами */
.band{padding:0;border-top:1px solid var(--cork);min-height:0;justify-content:flex-start}
.band .ph{border-radius:0;max-width:none}
.band .ph--shot::after{
background:
linear-gradient(180deg,rgba(16,9,4,.55) 0%,rgba(16,9,4,.12) 34%,rgba(16,9,4,.12) 62%,rgba(16,9,4,.62) 100%),
linear-gradient(90deg,rgba(16,9,4,.45),rgba(16,9,4,0) 38%,rgba(16,9,4,0) 66%,rgba(16,9,4,.45));
}
.band .ph__img{filter:brightness(.82) saturate(1.05)}
.band__cap{display:flex;justify-content:space-between;gap:16px;padding:14px var(--pad) 0;flex-wrap:wrap}
/* ---------- 10. HERO ---------- */
.hero{position:relative;z-index:1;min-height:100vh;min-height:100svh;padding:0;display:block;overflow:hidden}
.hero--short{min-height:min(66svh,660px)} /* внутренние страницы */
.hero__media{position:absolute;inset:0;z-index:0}
.hero .ph--fill{height:100%;border:0;border-radius:0}
.hero__scrim{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(180deg,rgba(16,9,4,.74) 0%,rgba(16,9,4,.30) 34%,rgba(16,9,4,.18) 56%,rgba(16,9,4,.80) 100%),
linear-gradient(90deg,rgba(16,9,4,.62) 0%,rgba(16,9,4,.10) 46%,rgba(16,9,4,.34) 100%);
}
.hero__top{
position:absolute;z-index:3;top:clamp(58px,8.2vh,92px);left:var(--pad);
width:min(48vw,660px);
display:flex;gap:8px 22px;align-items:baseline;flex-wrap:wrap;
}
.hero .hero__plate{
position:absolute;z-index:3;top:clamp(76px,10.6vh,124px);left:var(--pad);
width:min(48vw,660px);padding:0;
}
.hero--short .hero__plate{top:auto;bottom:clamp(26px,4.4vh,54px);width:min(56vw,760px)}
/* Надглазник внутренней страницы остаётся на базовом месте .hero__top — у верха героя.
Пластина здесь прижата к низу и при коротком слове («ОПТЪ», «ПРАЙСЪ») дорастает до
потолка 190px: с line-height .8 её выносные ушли бы прямо в надглазник.
Правило одно на все hero--short; локальных перебивок на страницах быть не должно. */
.hero__lead{position:absolute;z-index:3;right:var(--pad);top:44%;max-width:24ch}
.hero__card{
position:absolute;z-index:3;left:var(--pad);bottom:clamp(26px,4.4vh,54px);
width:min(320px,27vw);border-radius:var(--r-card);padding:var(--card-pad);
background:rgba(255,237,215,.06);
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
display:flex;flex-direction:column;gap:14px;
}
.hero__card .lbl{color:var(--cream);line-height:1.35}
.hero__card p{font-size:var(--body-s);font-weight:400;line-height:1.3;color:var(--cream)}
.hero__scroll{
position:absolute;z-index:3;left:50%;bottom:clamp(18px,3vh,34px);transform:translateX(-50%);
display:flex;align-items:center;gap:14px;
}
.hero__scroll i{
width:26px;height:26px;border:1px solid rgba(255,237,215,.55);border-radius:50%;
display:grid;place-items:center;font-style:normal;font-size:9px;line-height:1;
transition:background var(--tq),color var(--tq);
}
.hero__scroll:hover i{background:var(--cream);color:var(--walnut)}
/* вторичная точка входа в правом нижнем углу героя.
Тот же угол занимает фиксированная .fab (кнопка связи, --fab-h меряет
её высоту в рантайме) — приподнимаем карточку над кнопкой, а не прячем
кнопку: замер bounding-rect показал 8,5 px нахлёста на 1600×1000
(аудит 01.09), на ≤980px карточка возвращается в поток и оффсет не
участвует — там коллизии не было и без правки. */
.hero__vid{
position:absolute;z-index:3;right:var(--pad);
bottom:calc(clamp(26px,4.4vh,54px) + var(--fab-h,38px) + 14px);
width:min(210px,19vw);overflow:hidden;display:block;line-height:0;
transition:transform var(--t-420) var(--e);
}
.hero__vid img{width:100%;height:auto;opacity:.86}
.hero__vid:hover{transform:translateY(-4px)}
.hero__vidcap{
position:absolute;inset:auto 0 0 0;padding:8px 10px;
background:linear-gradient(180deg,transparent,rgba(16,9,4,.82));
font-size:9px;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;color:var(--cream);
}
.hero__vid span.ph__play{width:34px}
.hero__vid span.ph__play::after{border-left-width:7px;border-top-width:5px;border-bottom-width:5px}
/* ---------- 11. НОМЕРНАЯ ПЛАСТИНА (JS-фиттер) ---------- */
.plate{display:block;width:100%;min-width:0;line-height:.8;letter-spacing:0}
.plate span{display:inline-block;white-space:nowrap;font-weight:500;text-transform:uppercase;font-size:80px}
/* ---------- 12. РАСКЛАДКИ ЗАЛА ---------- */
/* манифест: заголовок — текст — кадр */
.manifest{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.92fr) minmax(0,.78fr);
gap:var(--gap);align-items:end}
.manifest .d{max-width:15ch}
/* reveal-триптих: колонка — экспонат — колонка */
.reveal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr);
gap:var(--gap);align-items:center}
.reveal--wide{grid-template-columns:minmax(0,1fr) min(44vw,630px) minmax(0,1fr)}
.reveal__col{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,24px);align-items:flex-start}
.reveal__col--end{align-self:end}
.reveal .ph{width:100%;max-width:min(46vw,660px);justify-self:center}
/* две колонки: текст | кадр */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:center}
.duo--wide{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
/* экспозиция: три витрины, средняя опущена */
.expo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,22px);align-items:end}
.expo figure:nth-child(2){transform:translateY(clamp(10px,3vh,42px))}
/* ---------- 13. ХРОНИКА ---------- */
.chron{position:relative;overflow:hidden}
.chron__vp{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chron__vp::-webkit-scrollbar{display:none}
.chron__track{display:flex;gap:clamp(18px,2.4vw,40px);padding:0 0 8px;width:max-content}
.era{
position:relative;flex:0 0 auto;width:clamp(258px,26vw,380px);
border:1px solid var(--cork);border-radius:var(--r-card);
padding:clamp(20px,2vw,30px);display:flex;flex-direction:column;gap:14px;
transition:border-color var(--t),transform var(--t-700) var(--e);
}
.era:hover{border-color:var(--drift);transform:translateY(-6px)}
.era__y{font-size:clamp(34px,4.4vw,64px);line-height:.86;font-weight:500;letter-spacing:-.02em}
.era__t{font-size:var(--micro);letter-spacing:.06em;text-transform:uppercase;color:var(--drift)}
.era--now{border-color:var(--bark);background:var(--bark-05)}
/* ---------- 14. ТЕХНОЛОГИЯ: липкий рельс + шаги ---------- */
.tech{display:grid;grid-template-columns:minmax(150px,.42fr) minmax(0,2fr);gap:var(--gap);align-items:start}
.tech__rail{position:sticky;top:26vh;display:flex;flex-direction:column;gap:12px}
.tech__rail button{
display:flex;gap:14px;align-items:baseline;text-align:left;
font-size:var(--micro);letter-spacing:.06em;text-transform:uppercase;color:var(--drift);
padding:.6em 0;border-bottom:1px solid transparent;
transition:color var(--t),border-color var(--t);
}
.tech__rail button.is-on{color:var(--cream);border-bottom-color:var(--cork)}
.step{
/* Было min-height:88vh при кадре 16/9 в полширины (~365 px): вокруг кадра
оставалось ~400 px тьмы. Теперь шаг ниже, а кадр — выше и заполняет его:
фото читается как экспонат, а не как марка в углу (владелец видел пустоты). */
min-height:72vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:var(--gap);align-content:center;align-items:center;
padding:clamp(26px,5vh,60px) 0;border-top:1px solid var(--cork);
}
.step .ph--shot:not(.ph--vid){aspect-ratio:auto;height:min(60vh,560px)}
@media (max-width:980px){ .step .ph--shot:not(.ph--vid){aspect-ratio:var(--ar,16/9);height:auto} }
.step:first-child{border-top:0}
.step__txt{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px);align-items:flex-start}
/* ---------- 15. ФЛАГМАН И ВЕСОВАЯ ЛИНЕЙКА ---------- */
.flag{padding-top:clamp(110px,12.5vh,138px);padding-bottom:clamp(26px,4vh,52px)}
.flag__stagewrap{display:flex;flex-direction:column;gap:clamp(16px,2.6vh,32px);margin-top:clamp(28px,4vh,46px)}
.flag__grid{display:grid;grid-template-columns:minmax(0,.92fr) min(56vw,800px) minmax(0,1fr);
gap:var(--gap);align-items:center}
.flag__stage{position:relative;display:grid;place-items:center;
min-height:max(300px, min(58vh, calc(100vh - 430px)))}
/* экспонат в движении: края растворяются в тьме, рамки нет */
.flag__vidbox{position:relative;width:min(100%,640px);aspect-ratio:16/9}
.flag__vidbox video,.flag__vidbox img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
-webkit-mask:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
-webkit-mask-composite:source-in;
mask:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
mask-composite:intersect;
}
.flag__badge{position:absolute;top:0;right:0;opacity:0;transform:translateY(-6px);
transition:opacity var(--t-420) ease,transform var(--t-420) var(--e)}
.flag__badge.is-on{opacity:1;transform:none}
.flag__read{display:flex;flex-direction:column;gap:8px}
.flag__price{font-size:clamp(34px,4.6vw,68px);line-height:.9;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.flag__sum{white-space:nowrap}
.flag__price small{display:inline-block;white-space:nowrap;font-size:var(--micro);
letter-spacing:.06em;color:var(--drift);vertical-align:.9em;margin-left:.5em}
.ruler{border-top:1px solid var(--cork);padding-top:clamp(14px,2vh,22px)}
.ruler__row{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none}
.ruler__row::-webkit-scrollbar{display:none}
.notch{
flex:1 0 auto;min-width:96px;position:relative;padding:26px 10px 12px;text-align:left;
color:var(--drift);font-size:var(--micro);letter-spacing:.06em;text-transform:uppercase;
transition:color var(--tq);
}
.notch::before{content:"";position:absolute;left:0;top:0;width:1px;height:16px;background:var(--cork);
transition:height var(--t-420) var(--e),background var(--tq)}
.notch:last-child::after{content:"";position:absolute;right:0;top:0;width:1px;height:16px;background:var(--cork)}
.notch:hover,.notch.is-on{color:var(--cream)}
.notch.is-on::before{height:30px;background:var(--cream)}
.ruler__scale{display:flex;justify-content:space-between;padding-top:12px}
/* ---------- 16. КАТАЛОГ-ОПИСЬ (аккордеон) ---------- */
.cat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap) clamp(30px,5vw,90px)}
.cat__h{display:flex;justify-content:space-between;align-items:baseline;
padding-bottom:1em;border-bottom:1px solid var(--cork);margin-bottom:6px}
.item{border-bottom:1px solid var(--hair)}
.item__btn{
width:100%;display:grid;grid-template-columns:2.6em minmax(0,1fr) auto;gap:12px;align-items:baseline;
padding:clamp(13px,1.5vh,19px) 0;text-align:left;transition:color var(--tq);
}
.item__i{font-size:var(--micro);letter-spacing:.04em;color:var(--drift);transition:color var(--tq)}
.item__n{font-size:clamp(15px,1.35vw,21px);text-transform:uppercase;font-weight:500;letter-spacing:.01em;
transition:transform var(--t-420) var(--e)}
.item__p{font-size:var(--micro);letter-spacing:.04em;color:var(--drift);white-space:nowrap;
transition:color var(--tq)}
.item:hover .item__n{transform:translateX(9px)}
.item:hover .item__i,.item:hover .item__p{color:var(--cream)}
.item__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-420) var(--e)}
.item.is-open .item__body{grid-template-rows:1fr}
.item__inner{overflow:hidden}
.item__pad{padding:0 0 clamp(16px,2vh,24px) 3.6em;display:flex;flex-direction:column;gap:10px}
.item.is-open .item__i{color:var(--ember)}
.item__tag{font-size:var(--micro);letter-spacing:.04em;color:var(--drift);text-transform:uppercase}
/* ---------- 17. ПРАЙС ---------- */
.price__tools{
display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,26px);align-items:flex-end;justify-content:space-between;
padding:clamp(16px,2.4vh,30px) 0;
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
border:1px solid rgba(255,237,215,.34);border-radius:var(--r-ghost);padding:.72em 1.15em;
font-size:var(--micro);letter-spacing:.04em;text-transform:uppercase;color:var(--drift);
transition:color var(--tq),border-color var(--tq);
}
.chip:hover{color:var(--cream);border-color:rgba(255,237,215,.6)}
.chip.is-on{color:var(--cream);border-color:var(--cream)}
.search{display:flex;flex-direction:column;gap:8px;flex:1 1 260px;max-width:420px}
.search input{
border-bottom:1px solid var(--cream);color:var(--cream);
font-size:var(--body-s);font-weight:400;letter-spacing:.02em;padding:.5em 0;width:100%;
}
.search input::placeholder{color:var(--drift)}
.search input:focus{outline:0;border-bottom-color:var(--ember)}
.table{border-top:1px solid var(--cork)}
.thead{
position:sticky;top:0;z-index:12;background:var(--walnut);
display:grid;grid-template-columns:minmax(0,1fr) 116px 116px;gap:16px;
padding:.95em 0;border-bottom:1px solid var(--hair);
}
.thead span{font-size:var(--micro);letter-spacing:.06em;text-transform:uppercase;color:var(--drift)}
.thead span:nth-child(n+2){text-align:right}
.grp{padding:clamp(26px,3.4vh,44px) 0 .6em;border-bottom:1px solid var(--hair)}
.pr{
display:grid;grid-template-columns:minmax(0,1fr) 116px 116px;gap:16px;align-items:baseline;
padding:.95em 0;border-bottom:1px solid var(--hair);position:relative;
}
.pr__n{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;transition:transform var(--t-420) var(--e)}
.pr__n b{font-weight:500;font-size:clamp(13px,1.05vw,16px);text-transform:uppercase;letter-spacing:.02em}
.pr__p{text-align:right;font-size:clamp(13px,1.05vw,16px);font-weight:500;letter-spacing:.04em;
white-space:nowrap;color:var(--drift);transition:color var(--tq);font-variant-numeric:tabular-nums}
.pr__p--r{color:var(--cream)}
.pr::before{content:"";position:absolute;left:-16px;top:50%;width:8px;height:1px;background:var(--ember);
transform:scaleX(0);transform-origin:right;transition:transform var(--t-420) var(--e)}
.pr:hover::before{transform:scaleX(1)}
.pr:hover .pr__n{transform:translateX(9px)}
.pr:hover .pr__p{color:var(--cream)}
.pr.is-off,.grp.is-off{display:none}
.tag{
font-family:var(--fm);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ember);
border:1px solid var(--ember);border-radius:var(--r-ghost);padding:.25em .6em;line-height:1;
white-space:nowrap;
/* карточки прайса (.pcard__v) дают первой колонке узкую minmax(0,1fr) —
без nowrap длинный текст бирки («Фирменный рецепт») ломался на 2 строки
прямо внутри пилюли вместо того, чтобы перенести саму пилюлю целиком */
}
.tag--dim{color:var(--drift);border-color:var(--cork)}
.price__note{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:var(--gap);padding-top:clamp(22px,3vh,40px)}
.empty{padding:2.6em 0;color:var(--drift);font-size:var(--micro);letter-spacing:.06em;text-transform:uppercase}
/* ---------- 18. КАРТОЧКИ И ФАКТЫ ---------- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--gap)}
.fact{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--cork)}
.card{
border:1px solid var(--cork);border-radius:var(--r-card);padding:clamp(20px,2.2vw,34px);
display:flex;flex-direction:column;gap:14px;
transition:border-color var(--t),transform var(--t-700) var(--e);
}
.card:hover{border-color:var(--drift);transform:translateY(-5px)}
.card__big{font-size:clamp(22px,2.35vw,36px);line-height:.92;font-weight:500;text-transform:uppercase;
overflow-wrap:break-word}
/* карточка-мостик на другую страницу: кадр + подпись */
.gate{position:relative;display:block;overflow:hidden;border-radius:0}
.gate .ph{transition:transform var(--t-1200) var(--e)}
.gate:hover .ph{transform:scale(1.03)}
.gate__body{
position:absolute;inset:auto 0 0 0;z-index:4;padding:clamp(16px,2vw,26px);
display:flex;flex-direction:column;gap:8px;align-items:flex-start;
background:linear-gradient(180deg,transparent,rgba(16,9,4,.86));padding-top:80px;
}
.gate__t{font-size:clamp(18px,1.9vw,27px);line-height:.95;font-weight:500;text-transform:uppercase;
transition:color var(--tq)}
.gate:hover .gate__t{color:var(--ember)}
.gates{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(12px,1.4vw,22px)}
/* ---------- 19. ФИЛЬМ ---------- */
.film{display:flex;flex-direction:column;gap:clamp(18px,2.6vh,30px);
scroll-margin-top:clamp(84px,11vh,120px)}
.film__meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
padding-bottom:.9em;border-bottom:1px dashed var(--cork)}
.film__grid{display:grid;grid-template-columns:minmax(0,1fr) min(56vw,880px);gap:var(--gap);align-items:end}
.film__col{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,24px);align-items:flex-start}
.film__frame{width:100%;justify-self:end}
.film__frame::after{display:none} /* нативные controls не топим в градиенте */
.film__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;background:#0b0603}
/* ---------- 20. КОНТАКТЫ И ФУТЕР ---------- */
.contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--gap)}
.person{display:flex;flex-direction:column;gap:9px;padding-top:16px;border-top:1px solid var(--cork);
align-items:flex-start}
/* крупный кегль — только прямым ссылкам роли (телефон, почта):
ряд мессенджеров лежит внутри
, .link — микро-кеглем */
.person > a:not(.link){font-size:clamp(17px,1.55vw,23px);text-transform:uppercase;font-weight:500;
letter-spacing:.01em;transition:color var(--tq)}
.person > a:not(.link):hover,.person > a:not(.link):focus-visible{color:var(--ember)}
.foot{position:relative;z-index:1;padding:0 var(--pad) clamp(22px,3vh,34px);border-top:1px solid var(--cork)}
.foot__plate{padding:clamp(48px,6vh,74px) 0 clamp(16px,2vh,24px);max-width:min(70vw,900px)}
.foot__specs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
padding-top:clamp(14px,2vh,22px);border-top:1px solid var(--cork);align-items:start}
.foot__specs .bs{max-width:26ch}
.foot__cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.foot__nav{display:flex;flex-wrap:wrap;gap:10px 26px;padding-top:clamp(16px,2.4vh,26px)}
.foot__contacts{display:flex;flex-wrap:wrap;gap:10px 26px;padding-top:clamp(10px,1.4vh,16px)}
.foot__row{display:flex;flex-wrap:wrap;gap:18px 30px;justify-content:space-between;
padding-top:16px;border-top:1px solid var(--cork);margin-top:clamp(20px,3vh,36px)}
/* ---------- 21. ПОЯВЛЕНИЯ ----------
Прячем ТОЛЬКО когда JS подтвердил, что наблюдатель работает (body.rv-armed).
Без JS контент обязан остаться видимым. */
body.rv-armed [data-rv]{opacity:0;transform:translateY(16px);
transition:opacity .8s var(--e),transform .8s var(--e)}
body.rv-armed [data-rv].is-in{opacity:1;transform:none}
[data-rv][data-delay="1"]{transition-delay:.08s}
[data-rv][data-delay="2"]{transition-delay:.16s}
[data-rv][data-delay="3"]{transition-delay:.24s}
/* ============================================================
АДАПТИВ
============================================================ */
@media (max-width:1180px){
.reveal,.reveal--wide{grid-template-columns:minmax(0,1fr)}
.reveal__col--end{align-self:auto}
.reveal .ph{max-width:min(100%,560px)}
.duo,.duo--wide{grid-template-columns:minmax(0,1fr)}
.flag__grid{grid-template-columns:minmax(0,1fr)}
.flag__vidbox{width:min(100%,560px)}
.film__grid{grid-template-columns:minmax(0,1fr)}
.film__frame{justify-self:stretch;max-width:min(100%,720px)}
.foot__specs{grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,30px)}
.hero__card{width:min(300px,32vw)}
.hero__vid{width:min(180px,22vw)}
}
@media (max-width:1024px){
.vlabel{display:none}
.stampnote,.sec__head{right:var(--pad)}
.tech{grid-template-columns:minmax(0,1fr)}
.tech__rail{position:static;flex-direction:row;flex-wrap:wrap;gap:8px 22px;top:auto}
.step{grid-template-columns:minmax(0,1fr);min-height:0}
.cat{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:980px){
/* герой возвращается в поток — на узком экране читается всё */
.hero{display:flex;flex-direction:column;align-items:stretch;min-height:100svh;
padding:96px var(--pad) clamp(26px,4vh,44px);gap:clamp(16px,2.6vh,26px)}
.hero--short{min-height:0;padding-top:110px}
.hero__media{position:absolute;inset:0}
.hero .ph--fill{min-height:100%}
.hero > *{min-width:0;max-width:100%}
.hero .hero__top,.hero .hero__plate,.hero .hero__lead,
.hero .hero__card,.hero .hero__scroll,.hero .hero__vid{
position:relative;transform:none;right:auto;left:auto;bottom:auto;top:auto;
}
.hero .hero__plate,.hero .hero__top{width:100%}
.hero--short .hero__plate{margin-top:clamp(8px,1.6vh,16px)} /* line-height .8: «Й»/«Ъ» не задевают надглазник */
.hero .hero__lead{width:100%;max-width:34ch}
.hero .hero__card{width:min(100%,420px)}
.hero .hero__vid{width:min(210px,52vw);align-self:flex-end}
.hero .hero__scroll{align-self:center;margin-top:auto}
.nav{padding-right:var(--pad)}
}
@media (max-width:860px){
.nav__menu,.nav__tel{display:none}
.stampnote{display:none}
.burger{display:block}
.manifest{grid-template-columns:minmax(0,1fr);align-items:start}
.expo{grid-template-columns:minmax(0,1fr)}
.expo figure:nth-child(2){transform:none}
.thead{display:none}
.pr{grid-template-columns:auto auto;justify-content:start;column-gap:32px;row-gap:7px;padding:1.15em 0}
.pr__n{grid-column:1 / -1}
.pr__p{text-align:left;font-size:14px}
.pr__p::before{content:attr(data-l) " ";display:block;color:var(--drift);font-size:9px;
letter-spacing:.2em;margin-bottom:.35em}
.pr::before{display:none}
.pr:hover .pr__n{transform:none}
.sec__head{position:static;margin-bottom:clamp(24px,4vh,40px)}
.sec{padding-top:clamp(74px,10vh,100px)}
.flag{padding-top:clamp(74px,10vh,100px)}
}
@media (max-width:520px){
.foot__specs{grid-template-columns:minmax(0,1fr);gap:16px}
.foot__plate{max-width:none}
.cols{grid-template-columns:minmax(0,1fr)}
.search{max-width:none}
.hero{padding-top:82px}
.hero__vid{width:min(190px,60vw)}
/* плита влезает в экран даже если JS-фиттер не отработал */
.plate{max-width:100vw}
.plate span{font-size:min(80px,9.4vw)}
}
/* ---------- 22. ДВИЖЕНИЕ ---------- */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important;scroll-behavior:auto !important;
}
body.rv-armed [data-rv]{opacity:1 !important;transform:none !important}
body::after{opacity:0 !important}
.gate:hover .ph,.card:hover,.era:hover{transform:none}
}
/* ---------- 23. СВЯЗЬ · МЕССЕНДЖЕРЫ ----------
Иконки — инлайн-спрайт в начале каждой страницы:
#i-wa (WhatsApp) · #i-tg (Telegram) · #i-vb (Viber) · #i-max (MAX, слот).
Только тонкий контур currentColor: фирменные заливки брендов разорвали бы
шестицветную палитру концепта. Ембер — исключительно на hover/focus,
как и у телефона в шапке (правило 1 гайда: «ембер — не краска, а метка»). */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.msgs{display:flex;flex-wrap:wrap;gap:7px 18px;margin:0}
.msg{
display:inline-flex;align-items:center;gap:7px;
font-size:var(--micro);line-height:1.2;letter-spacing:.05em;text-transform:uppercase;font-weight:500;
color:var(--drift);transition:color var(--tq);
}
.msg svg{
width:13px;height:13px;flex:0 0 auto;
stroke:currentColor;fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;
}
.msg:hover,.msg:focus-visible{color:var(--ember)}
/* MAX (max.ru) — слот готов, кнопка выключена.
Ссылок по номеру телефона у MAX нет: нужна персональная https://max.ru/u/<хеш>,
которую генерирует владелец аккаунта. Иконка — #i-max, стиль — тот же .msg.
Раскомментировать разметку и подставить хеш — больше ничего не требуется. */
.msg svg use[href="#i-max"]{stroke-width:1.3}
/* ---------- 24. КОНТАКТНЫЙ РЯД ПОДВАЛА ----------
Один и тот же блок на всех шести страницах и на 404. */
.foot__people{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);
padding-top:clamp(16px,2.4vh,26px);
}
.fp{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
padding-top:14px;border-top:1px dashed var(--cork)}
.fp__tel{
font-size:clamp(15px,1.35vw,20px);line-height:1.1;font-weight:500;letter-spacing:.01em;
text-transform:uppercase;white-space:nowrap;transition:color var(--tq);
}
.fp__tel:hover,.fp__tel:focus-visible{color:var(--ember)}
.fp .msgs{margin-top:2px}
.foot__place{
display:flex;flex-direction:column;gap:6px;align-items:flex-start;
padding-top:clamp(12px,1.8vh,18px);margin-top:clamp(14px,2vh,20px);
border-top:1px dashed var(--cork);
}
.foot__place a{border-bottom:1px solid var(--cork);transition:color var(--tq),border-color var(--tq)}
.foot__place a:hover,.foot__place a:focus-visible{color:var(--ember);border-color:var(--ember)}
@media (max-width:860px){.foot__people{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,28px)}}
@media (max-width:520px){.foot__people{grid-template-columns:minmax(0,1fr);gap:16px}}
/* ---------- 25. ПЛАВАЮЩАЯ КНОПКА СВЯЗИ ----------
Разметку строит assets/artefakt.js — одна и та же на всех страницах.
Правый нижний угол, та же вертикаль, что у .vlabel и .stampnote:
сноска поднимается ровно на высоту кнопки (--fab-h ставит JS),
поэтому пересечения со служебной сноской нет ни на одной ширине. */
.fab{
position:fixed;z-index:62;
right:calc(var(--pad) + 40px);
bottom:max(14px,env(safe-area-inset-bottom));
display:flex;flex-direction:column;align-items:flex-end;gap:12px;
/* visibility — шагом: показ мгновенный, уход после затухания.
Плавный переход visibility ломает focus() в только что открытую панель. */
transition:opacity var(--t),transform var(--t),visibility 0s;
}
@media (max-width:1024px){.fab{right:var(--pad)}}
.fab.away,body.menu-open .fab{
opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;
transition:opacity var(--t),transform var(--t),visibility 0s linear var(--t-420);
}
body.has-fab .stampnote{bottom:calc(24px + var(--fab-h,38px))}
.fab-btn{
display:inline-flex;align-items:center;gap:.7em;
background:rgba(16,9,4,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border:1px solid var(--cork);border-radius:var(--r-ghost);color:var(--cream);
padding:.85em 1.4em;font-size:var(--micro);text-transform:uppercase;letter-spacing:.05em;
transition:border-color var(--tq),color var(--tq);
}
.fab-btn::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ember);flex:0 0 auto}
.fab-btn svg{width:14px;height:14px;flex:0 0 auto;stroke:currentColor;fill:none;
stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.fab-btn:hover,.fab-btn:focus-visible,.fab-btn[aria-expanded="true"]{border-color:var(--cream)}
.fab-panel{
width:min(330px,calc(100vw - 2 * var(--pad)));
max-height:min(68svh,540px);overflow-y:auto;
background:var(--walnut);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
border:1px solid var(--cork);border-radius:var(--r-card);
padding:16px 18px 18px;
opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity var(--t),transform var(--t),visibility 0s linear var(--t-420);
}
.fab.open .fab-panel{
opacity:1;visibility:visible;transform:none;
transition:opacity var(--t),transform var(--t),visibility 0s;
}
.fab-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding-bottom:11px;border-bottom:1px dashed var(--cork)}
.fab-x{width:26px;height:26px;display:grid;place-items:center;margin-right:-4px;
color:var(--drift);transition:color var(--tq)}
.fab-x svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round}
.fab-x:hover,.fab-x:focus-visible{color:var(--ember)}
.fab-role{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding-top:14px}
.fab-role + .fab-role{margin-top:13px;border-top:1px dashed var(--cork)}
.fab-role .r-tel{
font-size:clamp(17px,1.5vw,22px);line-height:1.1;font-weight:500;letter-spacing:.01em;
text-transform:uppercase;white-space:nowrap;transition:color var(--tq);
}
.fab-role .r-tel:hover,.fab-role .r-tel:focus-visible{color:var(--ember)}
.fab-role .msgs{margin-top:1px;gap:6px 15px}
.fab-foot{margin-top:14px;padding-top:11px;border-top:1px dashed var(--cork);
display:flex;flex-wrap:wrap;gap:8px 16px}
.fab-foot a{transition:color var(--tq)}
.fab-foot a:hover,.fab-foot a:focus-visible{color:var(--ember)}
@media (prefers-reduced-motion:reduce){
.fab,.fab-panel{transition:none !important;transform:none !important}
.fab.away,body.menu-open .fab{transform:none !important}
}
/* На узком экране кнопка сжимается в круглую иконку: подпись героя
«листайте дальше» и низ страницы остаются свободными. */
@media (max-width:520px){
.fab-btn{padding:.95em;border-radius:50%}
.fab-btn::before,.fab-btn__t{display:none}
.fab-btn svg{width:16px;height:16px}
}
/* Почта и телефон внутри абзаца — видимая ссылка, а не просто текст.
Ряд мессенджеров и .link ведут себя по-своему и сюда не попадают. */
.bs a:not(.link):not(.msg),.b a:not(.link):not(.msg),.nano a:not(.link):not(.msg){
border-bottom:1px solid var(--cork);
transition:color var(--tq),border-color var(--tq);
}
.bs a:not(.link):not(.msg):hover,.bs a:not(.link):not(.msg):focus-visible,
.b a:not(.link):not(.msg):hover,.b a:not(.link):not(.msg):focus-visible{
color:var(--ember);border-color:var(--ember);
}
/* ============================================================
24. СЛОЙ АНИМАЦИЙ «АРТЕФАКТ» · 24.1 ТОКЕНЫ
Кривые сняты с продакшена igloo.inc (CustomEase → cubic-bezier).
Идея слоя: свет. Ничего не «выезжает» — всё ПРОЯВЛЯЕТСЯ под
полосой света, идущей сверху вниз, и подсвечивается тёплым
пятном из точки касания. Ембер — только метка и активное
состояние, светом он не красит.
============================================================ */
:root{
/* --- кривые (разведка, п.7) --- */
--e-entry:cubic-bezier(.36,0,.28,1); /* entry_ease: вход элементов */
--e-entry2:cubic-bezier(.388,.082,.924,.862); /* entry_ease_2: 1-в-1 */
--e-entry3:cubic-bezier(.3,0,.3,1); /* entry_ease_3: симметричный */
--e-igloo:cubic-bezier(.662,.073,.047,1); /* igloo_ease_1: 1-в-1, тягучий */
--e-inout3:cubic-bezier(.6,0,0,1); /* inOut3: 1-в-1 */
--e-antic:cubic-bezier(.4,0,0,1); /* inOut4, x2 подрезан с −.06:
CSS не берёт x вне [0,1] */
--e-out:cubic-bezier(.2,.8,.2,1); /* = --e, для симметрии имён */
/* --- длительности --- */
--d-xs:.16s; /* блик под курсором, смена цвета */
--d-s:.28s; /* подчёркивания, чипы, строки таблицы */
--d-m:var(--t-420); /* карточки, аккордеон */
--d-l:.9s; /* появление блока */
--d-xl:1.5s; /* параллакс, длинный протяг */
--d-mat:2.2s; /* МАТЕРИАЛИЗАЦИЯ кадра (интро igloo: 2.25с) */
--d-line:var(--t-1200); /* прорисовка контура */
/* --- стаггер --- */
--stag:80ms; /* шаг волны между соседями */
--stag-word:44ms; /* шаг между словами заголовка */
/* --- геометрия света --- */
--mat-feather:26%; /* растушёвка полосы материализации */
--glow-r:220px; /* радиус тёплого пятна касания */
--gx:50%; /* точка касания X, ставит JS */
--gy:50%; /* точка касания Y, ставит JS */
--gl:0; /* яркость пятна 0…1 */
}
/* Все токены слоя глушатся разом: одна точка отключения движения. */
@media (prefers-reduced-motion:reduce){
:root{
--d-xs:.001s;--d-s:.001s;--d-m:.001s;--d-l:.001s;
--d-xl:.001s;--d-mat:.001s;--d-line:.001s;
--stag:0ms;--stag-word:0ms;--gl:0;
}
}
/* ---------- 24.2 МИКРОИНТЕРАКЦИИ · СВЕТ ИЗ ТОЧКИ КАСАНИЯ ----------
Сквозная идея: под курсором зажигается тёплая лампа. Свет рождается
ровно там, где палец/курсор коснулся элемента (--gx/--gy ставит JS,
без JS — центр), растекается мягким пятном и гаснет. Никакого сдвига
геометрии там, где его не было. Ембер остаётся меткой: он приходит
только на :focus-visible и в активные состояния. */
/* пятно-лампа поверх элемента: общий примитив слоя */
.glow-lamp{
position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background:radial-gradient(circle var(--glow-r) at var(--gx) var(--gy),
rgba(255,237,215,.10) 0%,rgba(255,237,215,.05) 38%,transparent 72%);
opacity:0;transition:opacity var(--d-s) var(--e-out);
}
/* .ghost — свет НАЛИВАЕТ капсулу от точки касания, а не «включает» фон */
.ghost{position:relative;overflow:hidden;isolation:isolate;
transition:color var(--d-m) var(--e-entry),border-color var(--d-s) var(--e-out)}
.ghost::after{
content:"";position:absolute;z-index:-1;left:var(--gx);top:var(--gy);
width:var(--glow-r);height:var(--glow-r);margin:calc(var(--glow-r) / -2);
border-radius:50%;background:var(--cream);
transform:scale(0);transition:transform var(--d-m) var(--e-entry3);
}
.ghost:hover,.ghost:focus-visible{background:transparent;color:var(--walnut)}
.ghost:hover::after,.ghost:focus-visible::after{transform:scale(3)}
/* .pill — залитая: лампа поверх заливки + прежний подъём */
.pill{position:relative;overflow:hidden;
transition:transform var(--d-m) var(--e-entry),box-shadow var(--d-m) var(--e-out)}
.pill::after{
content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background:radial-gradient(circle var(--glow-r) at var(--gx) var(--gy),
rgba(255,237,215,.16) 0%,rgba(255,237,215,.07) 40%,transparent 74%);
opacity:0;transition:opacity var(--d-s) var(--e-out);
}
.pill:hover::after,.pill:focus-visible::after{opacity:1}
/* .link — свет бежит по подчёркиванию ОТ точки касания в обе стороны */
.link{position:relative}
.link::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
background:var(--cream);transform:scaleX(0);transform-origin:var(--gx) 50%;
transition:transform var(--d-s) var(--e-entry3);
}
.link:hover::after,.link:focus-visible::after{transform:scaleX(1)}
/* навигация: та же линия света под пунктом; активный пункт не трогаем */
.nav__menu a{position:relative}
.nav__menu a::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
background:var(--cream);transform:scaleX(0);transform-origin:var(--gx) 50%;
transition:transform var(--d-s) var(--e-entry3);
}
.nav__menu a:hover::after,.nav__menu a:focus-visible::after{transform:scaleX(1)}
.nav__menu a.is-active::after,.nav__menu a[aria-current="page"]::after{transform:none}
/* чипы фильтра — лампа внутри капсулы, ембер только на активном */
.chip{position:relative;
transition:color var(--d-s) var(--e-out),border-color var(--d-s) var(--e-out)}
.chip::after{
content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background:radial-gradient(circle 140px at var(--gx) var(--gy),
rgba(255,237,215,.13) 0%,transparent 70%);
opacity:0;transition:opacity var(--d-s) var(--e-out);
}
.chip:hover::after,.chip:focus-visible::after{opacity:1}
.chip.is-on::after{opacity:.55}
/* строка прайса — свет ложится на строку, засечка-ембер остаётся меткой */
.pr::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(circle 260px at var(--gx) 50%,
rgba(255,237,215,.07) 0%,transparent 68%);
opacity:0;transition:opacity var(--d-s) var(--e-out);
}
.pr:hover::after,.pr:focus-within::after{opacity:1}
.pr::before{transition:transform var(--d-s) var(--e-entry3)}
.pr__n{transition:transform var(--d-m) var(--e-entry)}
/* карточки и «эры» хроники — лампа в углу касания */
.card,.era{position:relative;isolation:isolate}
.card::after,.era::after{
content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background:radial-gradient(circle var(--glow-r) at var(--gx) var(--gy),
rgba(255,237,215,.09) 0%,rgba(255,237,215,.04) 42%,transparent 74%);
opacity:0;transition:opacity var(--d-m) var(--e-out);
}
.card:hover::after,.card:focus-within::after,
.era:hover::after,.era:focus-within::after{opacity:1}
.card{transition:border-color var(--d-m) var(--e-out),transform var(--d-m) var(--e-entry)}
.era{transition:border-color var(--d-m) var(--e-out),transform var(--d-m) var(--e-entry)}
/* строка каталога-описи */
.item__btn{position:relative}
.item__btn::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(circle 240px at var(--gx) 50%,
rgba(255,237,215,.07) 0%,transparent 70%);
opacity:0;transition:opacity var(--d-s) var(--e-out);
}
.item:hover .item__btn::after,.item__btn:focus-visible::after{opacity:1}
.item__n{transition:transform var(--d-m) var(--e-entry)}
/* карточка-мостик: свет проявляется в кадре, подпись догоняет */
.gate .ph{transition:transform var(--d-xl) var(--e-igloo)}
.gate__t{transition:color var(--d-s) var(--e-out)}
/* :focus-visible — ембером, поверх любой лампы: клавиатура всегда видна */
.ghost:focus-visible,.pill:focus-visible,.chip:focus-visible,.link:focus-visible,
.card:focus-visible,.era:focus-visible,.item__btn:focus-visible,
.nav__menu a:focus-visible,.msg:focus-visible,.notch:focus-visible{
outline:1px solid var(--ember);outline-offset:4px;
}
.ghost:focus-visible{outline-offset:3px}
/* без движения — только смена цвета, лампы и сдвиги выключены */
@media (prefers-reduced-motion:reduce){
.ghost::after,.pill::after,.chip::after,.card::after,.era::after,
.pr::after,.item__btn::after,.glow-lamp{display:none}
.ghost:hover,.ghost:focus-visible{background:var(--cream);color:var(--walnut)}
.link::after,.nav__menu a::after{transition:none}
}
/* ---------- 24.3 ПОЯВЛЕНИЯ · МАТЕРИАЛИЗАЦИЯ ----------
Приём из разведки (п.1): объект не «фейдится», а ВЫСТУПАЕТ из тьмы
под мягкой полосой света, идущей сверху вниз. На CSS это маска-
градиент с растушёвкой --mat-feather, положение полосы — --mat. */
/* базовое появление: мягче прежнего, кривая entry_ease */
body.rv-armed [data-rv]{
transition:opacity var(--d-l) var(--e-entry),transform var(--d-l) var(--e-entry);
}
/* стаггер до 8 шагов: соседи в ряду просыпаются волной */
[data-rv][data-delay="1"]{transition-delay:calc(var(--stag) * 1)}
[data-rv][data-delay="2"]{transition-delay:calc(var(--stag) * 2)}
[data-rv][data-delay="3"]{transition-delay:calc(var(--stag) * 3)}
[data-rv][data-delay="4"]{transition-delay:calc(var(--stag) * 4)}
[data-rv][data-delay="5"]{transition-delay:calc(var(--stag) * 5)}
[data-rv][data-delay="6"]{transition-delay:calc(var(--stag) * 6)}
[data-rv][data-delay="7"]{transition-delay:calc(var(--stag) * 7)}
[data-rv][data-delay="8"]{transition-delay:calc(var(--stag) * 8)}
/* автостаггер по позиции в контейнере: JS ставит --i, разметка чистая */
body.rv-armed [data-rv][style*="--i"]{transition-delay:calc(var(--stag) * var(--i,0))}
/* варианты входа */
[data-rv="up"]{--rv-y:22px}
[data-rv="soft"]{--rv-y:10px}
[data-rv="none"]{--rv-y:0px}
body.rv-armed [data-rv]{transform:translateY(var(--rv-y,16px))}
body.rv-armed [data-rv].is-in{transform:none}
/* МАТЕРИАЛИЗАЦИЯ КАДРА [data-mat]
Приём igloo (п.1): мягкая полоса света идёт сверху вниз и «выводит»
объект из тьмы. Реализация — маска вдвое выше кадра со сглаженным
краем; едет не градиент, а mask-position, стандартное анимируемое
свойство: работает без @property и не зависит от поддержки
интерполяции пользовательских свойств.
mask-position 0% 100% — кадр целиком под маской (не виден)
mask-position 0% 0% — маска ушла, кадр материализован
Без JS (нет .is-mat) и при reduce-motion маска не навешивается. */
body.rv-armed [data-mat]{
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 62%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 62%,transparent 100%);
-webkit-mask-size:100% 300%;mask-size:100% 300%;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:0% 100%;mask-position:0% 100%;
transition:-webkit-mask-position var(--d-mat) var(--e-entry2),
mask-position var(--d-mat) var(--e-entry2);
will-change:mask-position;
}
body.rv-armed [data-mat].is-mat{-webkit-mask-position:0% 0%;mask-position:0% 0%}
/* тёплый отсвет ведущей кромки: полоса света физически светит */
body.rv-armed [data-mat]::before{
content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
background-image:linear-gradient(180deg,transparent 0%,transparent 40%,
rgba(255,237,215,.18) 50%,rgba(255,237,215,0) 60%,transparent 100%);
background-size:100% 300%;background-repeat:no-repeat;background-position:0% 100%;
opacity:0;
transition:background-position var(--d-mat) var(--e-entry2),opacity var(--d-s) linear;
}
body.rv-armed [data-mat].is-mat::before{background-position:0% 0%;opacity:1}
body.rv-armed [data-mat].is-done::before{opacity:0}
@media (prefers-reduced-motion:reduce){
body.rv-armed [data-mat]{-webkit-mask-image:none;mask-image:none}
body.rv-armed [data-mat]::before{display:none}
}
/* ПАРАЛЛАКС [data-par] — 6…10 % хода, JS ставит --par в px.
Двигается только картинка внутри слота, кадр стоит на месте. */
[data-par]{overflow:hidden}
[data-par] .ph__img,[data-par] > img,[data-par] > .pic > img,img[data-par]{
transform:translate3d(0,var(--par,0px),0) scale(var(--par-s,1.1));
will-change:transform;
}
@media (prefers-reduced-motion:reduce){
[data-par] .ph__img,[data-par] > img,[data-par] > .pic > img,img[data-par]{transform:none}
}
/* ---------- 24.4 ДВУХСЛОЙНОЕ ПОЯВЛЕНИЕ .blueprint ----------
Приём igloo (п.2 и п.8): сначала рисуется тонкий чертёж — рамка и
приводочные линии, — затем ВНУТРИ него полосой света материализуется
изображение, а чертёж гаснет. «Чертёж превращается в продукт».
Разметка (чертёж вставляет JS, руками писать не нужно):
Фазы (тайминг интро igloo): .is-draw → +0.6с .is-mat → +1.6с .is-done.
Слой чертежа — отдельный : псевдоэлементы .ph заняты
rim-светом и кромкой материализации. */
.blueprint{position:relative}
.bp{
position:absolute;inset:0;z-index:6;pointer-events:none;
opacity:0;transition:opacity var(--d-s) linear;
}
body.rv-armed .blueprint.is-draw .bp{opacity:1}
/* Гасим чертёж ДВАЖДЫ: прозрачностью — чтобы это было видно, и
visibility — чтобы это было гарантировано. Одной opacity мало:
линии .bp__v/.bp__h подняты трансформом в отдельный слой и в Chrome
переживают opacity:0 родителя (проверено на полигоне — оставались
волосяные линии по центру кадра). */
body.rv-armed .blueprint.is-done .bp{
opacity:0;visibility:hidden;
transition:opacity var(--d-xl) var(--e-entry2),visibility 0s linear var(--d-xl);
}
/* рамка чертежа рисуется сверху вниз (clip-path), линии — вслед */
.bp__f{position:absolute;inset:0;border:1px solid rgba(255,237,215,.40);
clip-path:inset(0 0 100% 0);transition:clip-path var(--d-line) var(--e-inout3)}
body.rv-armed .blueprint.is-draw .bp__f{clip-path:inset(0 0 0 0)}
/* приводочные линии по третям — «чертёжный» слой, а не украшение */
.bp__v,.bp__h{position:absolute;background:rgba(255,237,215,.20)}
.bp__v{top:0;bottom:0;width:1px;left:50%;transform:scaleY(0);transform-origin:50% 0;
transition:transform var(--d-line) var(--e-inout3) .12s}
.bp__h{left:0;right:0;height:1px;top:50%;transform:scaleX(0);transform-origin:0 50%;
transition:transform var(--d-line) var(--e-inout3) .22s}
body.rv-armed .blueprint.is-draw .bp__v{transform:scaleY(1)}
body.rv-armed .blueprint.is-draw .bp__h{transform:scaleX(1)}
/* уголки-приводки: те же 14px, что у .ph__corners героя */
.bp__c{position:absolute;width:14px;height:14px;border:0 solid rgba(255,237,215,.55);opacity:0;
transition:opacity var(--d-s) linear var(--t-420)}
body.rv-armed .blueprint.is-draw .bp__c{opacity:1}
.bp__c--tl{top:10px;left:10px;border-top-width:1px;border-left-width:1px}
.bp__c--tr{top:10px;right:10px;border-top-width:1px;border-right-width:1px}
.bp__c--bl{bottom:10px;left:10px;border-bottom-width:1px;border-left-width:1px}
.bp__c--br{bottom:10px;right:10px;border-bottom-width:1px;border-right-width:1px}
@media (prefers-reduced-motion:reduce){.bp{display:none}}
/* ---------- 24.5 АНТИБАНДИНГ · СИНИЙ ШУМ + ДИАГОНАЛЬНОЕ УМНОЖЕНИЕ ----------
Разведка, п.4: плёночное зерно и RGB-сдвиг у igloo остались
ЗАКОММЕНТИРОВАННЫМИ — фактуру дал синий шум. Наша болячка — полосы
в почти-чёрных градиентах (--walnut → --bark-05). Лечим тайлом 64×64
высокочастотного шума (ранговое выравнивание гистограммы, тор без шва),
запечённым в CSS как data-URI: нулевой запрос, нулевая правка страниц.
Плюс п.5: не радиальная виньетка, а диагональное умножение —
левый низ 80 % яркости, правый верх 100 %. */
:root{--noise:url("data:image/png;base64,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")}
/* Слой шума и диагональ — один фиксированный элемент
,
который JS вставляет первым ребёнком . Псевдоэлементы body заняты
(::after — соляной bloom), а ::before body отдан диагонали: она чистая
и ни с чем не спорит. Тайл строго 64 px: масштабировать нельзя. */
body::before{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(135deg,rgba(255,237,215,.030) 0%,rgba(16,9,4,.36) 100%);
}
.grade{
position:fixed;inset:0;z-index:0;pointer-events:none;
background-image:var(--noise);background-size:64px 64px;background-repeat:repeat;
opacity:.05;mix-blend-mode:soft-light;
}
/* мобильный: зерно чуть плотнее — экраны ярче, полосы заметнее */
@media (max-width:860px){.grade{opacity:.06}}
/* ---------- 24.6 SPLIT-TEXT · ЗАГОЛОВОК ПРОЯВЛЯЕТСЯ ВОЛНОЙ ----------
Разбивку по СЛОВАМ делает JS: [data-split] → слово.
.w — окно с overflow:hidden (маска строки), — само слово, оно
выезжает снизу и одновременно светлеет. line-height .8 сохраняем:
окно получает вертикальный запас через padding, иначе съест выносные. */
[data-split]{--sw:0}
.w{display:inline-block;overflow:hidden;vertical-align:top;
padding:.14em .02em .18em;margin:-.14em -.02em -.18em}
.w > i{display:inline-block;font-style:inherit;will-change:transform}
body.rv-armed [data-split] .w > i{
transform:translateY(105%);opacity:0;
transition:transform var(--d-l) var(--e-entry),opacity var(--d-m) linear;
transition-delay:calc(var(--stag-word) * var(--wi,0));
}
body.rv-armed [data-split].is-in .w > i{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
body.rv-armed [data-split] .w > i{transform:none;opacity:1}
}
/* ---------- 24.7 СЧЁТЧИКИ [data-count] ---------- */
.cnt{font-variant-numeric:tabular-nums}
/* ---------- 24.8 @KEYFRAMES ----------
В концепте до этого не было НИ ОДНОГО @keyframes: всё держалось на
transition. Три петли, которые живут без наведения, — минимум, дающий
залу ощущение работающего света. */
@keyframes bp-breathe{0%,100%{opacity:.34}50%{opacity:.62}} /* оставлен как словарь: на линиях чертежа не применять — бесконечная анимация под opacity:0 родителя даёт артефакт композитинга */
@keyframes lamp-flicker{0%,100%{opacity:var(--bloom)}47%{opacity:calc(var(--bloom) * .86)}
52%{opacity:calc(var(--bloom) * 1.06)}}
@keyframes scroll-hint{0%{transform:translateY(0);opacity:1}
55%{transform:translateY(7px);opacity:.35}100%{transform:translateY(0);opacity:1}}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.hero__scroll i{animation:scroll-hint 3.4s var(--e-entry3) infinite}
/* лента фактов для полосы .band:
…
Дорожка дублируется JS, поэтому сдвиг ровно −50 % и шва не видно. */
.mq{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq__t{display:flex;width:max-content;gap:clamp(28px,4vw,64px);
animation:marquee var(--mq-d,42s) linear infinite;will-change:transform}
.mq:hover .mq__t{animation-play-state:paused}
.mq__i{display:flex;align-items:center;gap:clamp(28px,4vw,64px);white-space:nowrap;
font-size:var(--micro);letter-spacing:.06em;text-transform:uppercase;color:var(--drift)}
.mq__i::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--ember);flex:0 0 auto}
@media (prefers-reduced-motion:reduce){
.hero__scroll i,.mq__t,.bp__v,.bp__h{animation:none !important}
}
/* ---------- 24.9 ПЕРЕХОДЫ МЕЖДУ СТРАНИЦАМИ (View Transitions) ----------
Свет гаснет — свет зажигается. Пластина героя (РЫБЦЕХЪ → ПРАЙСЪ)
переезжает одним элементом: JS ставит ей view-transition-name.
Где API нет — короткий фейд средствами класса .vt-out (фолбэк). */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:var(--d-m)}
::view-transition-old(root){
animation:vt-fade-out var(--d-s) var(--e-entry2) both;
}
::view-transition-new(root){
animation:vt-fade-in var(--d-l) var(--e-entry) both;
}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0;-webkit-mask-image:linear-gradient(180deg,#000 -30%,transparent 0%);
mask-image:linear-gradient(180deg,#000 -30%,transparent 0%)}
to{opacity:1;-webkit-mask-image:linear-gradient(180deg,#000 130%,transparent 160%);
mask-image:linear-gradient(180deg,#000 130%,transparent 160%)}}
/* пластина и шапка переезжают, а не растворяются */
::view-transition-group(plate){animation-duration:var(--d-l);animation-timing-function:var(--e-igloo)}
::view-transition-group(nav){animation-duration:var(--d-m)}
::view-transition-old(plate),::view-transition-new(plate){mix-blend-mode:normal;height:100%}
/* фолбэк без API: уход страницы гасит свет */
body.vt-out{opacity:0;transition:opacity var(--d-s) var(--e-entry2)}
@media (prefers-reduced-motion:reduce){
::view-transition-old(root),::view-transition-new(root),
::view-transition-group(plate){animation:none !important}
body.vt-out{opacity:1;transition:none}
}
/* ---------- 24.10 МЕЛОЧИ СЛОЯ ---------- */
/* полоса прокрутки в палитре зала, а не в системной серости */
html{scrollbar-color:var(--cork) var(--walnut);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--walnut)}
::-webkit-scrollbar-thumb{background:var(--cork);border:3px solid var(--walnut);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--drift)}
/* магнитная кнопка: JS ставит --mx/--my в px, CSS только возит */
.pill{--mx:0px;--my:0px}
.pill.is-mag{transform:translate3d(var(--mx),calc(var(--my) - 3px),0)}
/* липкий рельс технологии: линия прогресса вдоль кнопок */
.tech__rail{position:sticky}
.tech__rail::before{
content:"";position:absolute;left:-14px;top:0;width:1px;height:100%;
background:linear-gradient(180deg,var(--cream) 0%,var(--cream) calc(var(--rail,0) * 100%),
var(--cork) calc(var(--rail,0) * 100%),var(--cork) 100%);
transition:background var(--d-s) linear;
}
@media (max-width:1024px){.tech__rail::before{display:none}}
@media (prefers-reduced-motion:reduce){.pill.is-mag{transform:none}}
/* не должен создавать коробку: абсолютные слои
(канвас WebGL, шторы, градиенты) обязаны считать отступы
от прежнего родителя кадра, а не от обёртки. */
.pic{display:contents}
/* ---------- 26. ДОСТУПНОСТЬ: ЦЕЛИ НАЖАТИЯ ≥44px (аудит М5) ----------
Расширяем ОБЛАСТЬ нажатия невидимым псевдоэлементом с отрицательным
inset — кегль, паддинг и вид самого элемента не меняются ни на пиксель.
Величины подобраны по реальному gap/padding до соседней цели в каждом
контейнере (не больше половины — иначе цели начнут перекрывать друг
друга и воровать клики друг у друга), кроме .burger — вокруг него в
шапке достаточно пустого поля, можно смело до полных 44×44. */
.burger::before{content:"";position:absolute;inset:-11px -5px}
.nav__menu a::before{content:"";position:absolute;inset:-9px -8px}
.chip::before{content:"";position:absolute;inset:-4px}
a.lbl{position:relative}
a.lbl::before{content:"";position:absolute;inset:-5px -10px}
.foot__place a{position:relative}
.foot__place a::before{content:"";position:absolute;inset:-3px}
.fp__tel{position:relative}
.fp__tel::before{content:"";position:absolute;inset:-8px -6px}
.msg{position:relative}
.msg::before{content:"";position:absolute;inset:-3px -9px}
/* ---- Приёмка 02.09, п.5: остальные цели нажатия ≥44px на 375, тем же
приёмом (невидимый ::before, отрицательный inset — размер/кегль самого
элемента не трогаем). У .ghost/.pill уже есть свой overflow:hidden
(изоляция под блик у магнитной кнопки) — псевдоэлемент с отрицательным
inset там обрежется тем же overflow, поэтому вместо накладки — честный
min-height на мобильном, без изменения паддинга/кегля текста. */
/* ::before у .fab-btn уже занят декоративной точкой (см. «22.» выше) —
расширяем область нажатия через ::after, чтобы её не перебить. */
.fab-btn{position:relative}
.fab-btn::after{content:"";position:absolute;inset:-5px}
.fab-x{position:relative}
.fab-x::before{content:"";position:absolute;inset:-8px}
.tech__rail button{position:relative}
.tech__rail button::before{content:"";position:absolute;inset:-6px -8px}
@media (max-width:768px){
.ghost,.pill{min-height:44px}
}
/* «×» заявки — order.css общий на «Россо»/«Артефакт», тема различается
атрибутом [data-order-theme]; правило только для артефактовской темы,
order.css не трогаем. */
[data-order-theme="artefakt"] .ord-x{position:relative}
[data-order-theme="artefakt"] .ord-x::before{content:"";position:absolute;inset:-7px}
[data-order-theme="artefakt"] .ord-line__x{position:relative}
[data-order-theme="artefakt"] .ord-line__x::before{content:"";position:absolute;inset:-6px -8px}
/* ---------- 27. ДОСТУПНОСТЬ: forced-colors (Windows «Высокая контрастность»), аудит М6 ----------
В этом режиме браузер принудительно заменяет color/background/border-color
на системную палитру — различия токенов --cream/--drift/--ember между
обычным и «активным» состоянием (.is-on, aria-pressed, aria-current)
схлопываются и визуально сливаются. Highlight/HighlightText — системные
ключевые слова именно для этого случая, forced-colors их не трогает. */
@media (forced-colors:active){
.chip.is-on,
.notch.is-on,
.tech__rail button.is-on,
[aria-pressed="true"],
[aria-selected="true"],
.nav__menu a.is-active,.nav__menu a[aria-current="page"],
.drawer a[aria-current="page"]{
outline:2px solid Highlight;outline-offset:2px;
}
.notch.is-on::before{background:Highlight}
.flag__badge.is-on{outline:2px solid Highlight;outline-offset:3px}
.item.is-open .item__btn{outline:2px solid Highlight;outline-offset:-2px}
}
/* ---- Обёртка плавающей кнопки не должна ловить нажатия.
Панель внутри скрыта (visibility:hidden), но сам контейнер занимает
~320×390px над углом экрана и на телефоне перехватывал тапы по главным
кнопкам героя. Прозрачной коробке — pointer-events:none, детям — обратно. */
.fab{pointer-events:none}
.fab>*{pointer-events:auto}
/* ---- Приёмка 02.09, п.3: «Заявка» (.ord-fab, order.js/order.css — файлы не
трогаем) не участвует в системе .fab и не прячется вместе со шторкой меню,
поэтому на 375 при открытом меню закрывает почту в шторке. Прячем тем же
приёмом, что .fab. */
body.menu-open .ord-fab{opacity:0;visibility:hidden;pointer-events:none}
/* ---- price.html: кнопка «Заявка» висит fixed в правом нижнем углу и в
покое перекрывает крайний правый столбец карточек (#cat, п. 2) и строку
с датой прайса в подвале — оба элемента тоже прижаты к правому краю той
же вертикали. Резервируем под кнопку отступ на десктопе (>860px), не
трогая мобильную раскладку. */
@media (min-width:861px){
body.pg-price #cat{padding-right:220px}
body.pg-price .foot__row{padding-right:220px}
}
/* ---------- ПЕЧАТЬ (02.09, п.4) ----------
Сцена собрана тёмной (кремовый текст на --walnut), а печать по умолчанию
не выводит фон — кремовый/drift текст на белом листе нечитаем. Плюс
[data-rv]/[data-split]/[data-mat] ждут прокрутки, чтобы появиться —
на листе, где прокрутки не будет, они так и остаются в исходном
(невидимом) состоянии. rosso.css отдельного блока не содержит — печать
там разнесена по cursor.css/order.css; order.css уже гасит .ord-fab и
компанию (см. «9. ПЕЧАТЬ» там же), здесь — тёмный текст на белом, показ
всего, что ждало появления, и то же самое для .fab. */
@media print{
*,*::before,*::after{
background:#fff!important;color:#111!important;
box-shadow:none!important;text-shadow:none!important;
animation:none!important;transition:none!important;
}
html,body{background:#fff}
a{color:#111!important;text-decoration:underline}
.nav,.drawer,.burger,.hero__scroll,.hero__vid,.ph__play,
.fab,.fab-btn,.fab-panel,.vlabel,.stampnote,
[data-gl],canvas,video{display:none!important}
.sec{min-height:auto!important;border-top-color:#ccc!important}
.thead{position:static!important}
.pr,.thead,.grp,.item{border-bottom-color:#ccc!important}
.pr::before{display:none!important}
/* карточки прайса (п. 2.7 СПЕК-V2): 2 колонки, светлые волосяные линии,
без подъёма при «наведении» (курсора на бумаге не бывает) — кнопки
заявки уже гасит order.css (.ord-ctl{display:none!important}) */
#cat{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
.pcard{border-color:#ccc!important;transform:none!important}
.pcard__row,.pcard__grp{border-bottom-color:#ccc!important}
/* mix-blend-mode:multiply живым прогоном на печати даёт сплошной белый
прямоугольник вместо фото (CDP --print, вероятно и настоящая печать) —
на бумаге фотографии и так без подложки, блендить не с чем */
.pcard__img{mix-blend-mode:normal!important}
[data-rv],[data-split],[data-mat],[data-stagger]{
opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;
}
.tag{border-color:#111!important}
.chip{border-color:#999!important}
}
/* ---------- ПРОХОД КУРАТОРА ГЛАЗАМИ (02.09) ---------- */
/* Широкий разворот .reveal--wide: боковые колонки узкие (≈345 px на 1440), слово
«ПРЕРЫВАЕТСЯ.» в --heading уходило под картинку. Заголовок подчиняется ширине колонки. */
@media (min-width:1181px){ .reveal--wide .reveal__col .h{font-size:min(var(--heading),2.4vw)} } /* 2.4vw: «ПРЕРЫВАЕТСЯ.» (12 знаков × .72em) влезает в колонку 345 px на 1440 и 270 px на 1181 */
/* Касание без серой вспышки на iOS/Android */
html{-webkit-tap-highlight-color:transparent}
/* ============================================================
«АРТЕФАКТ» · КАРТОЧКИ ПРАЙСА .pcard (СПЕК-V2, 04.09.2026)
Музейные таблички экспонатов — заменяют строчную .table/.pr/.thead
в price.html (#cat). Старые правила .pr/.grp/.table/.thead НЕ
удалены (их ещё используют печать и _anim-demo.html/_smoke.html) —
пространства имён .pcard* с ними не пересекаются.
============================================================ */
/* 04.09 (куратор): не grid, а колонки. У «Леща» 12 позиций, у «Толстолоба» одна —
в grid ряд тянулся по самой высокой карточке и под короткими зияла пустота
в пол-экрана. Многоколоночная раскладка укладывает карточки плотно, порядок —
сверху вниз по колонке, затем следующая. */
#cat{
/* display:block обязателен: у элемента ещё класс .cat (старый grid, строка ~514),
а многоколоночная раскладка работает только на блочном контейнере */
display:block;column-count:3;column-gap:var(--gap);
}
#cat .pcard{break-inside:avoid;margin:0 0 var(--gap);display:block}
@media (max-width:1180px){ #cat{column-count:2} }
@media (max-width:760px){ #cat{column-count:1} #cat .pcard{margin-bottom:clamp(20px,6vw,32px)} }
/* фильтр/поиск/сортировка правят .hidden нативным атрибутом — display
у .pcard/.pcard__row/.pcard__grp свой (grid/flex/block), у обычного
[hidden] в UA-таблице специфичность (0,1,0) и он проигрывает тем
правилам без !important */
#cat [hidden]{display:none!important}
.pcard{
position:relative;isolation:isolate;display:block;
border:1px solid var(--cork);border-radius:var(--r-card);overflow:hidden;
transition:border-color var(--t),transform var(--t-700) var(--e);
}
.pcard:hover{border-color:var(--drift);transform:translateY(-5px)}
/* табличка-витрина: КВАДРАТ 1:1 (04.09, владелец: фото — генерации серии «на сланце»,
портретные 3:4; квадрат из центра держит рыбу целиком, 4:3 резал бы).
Фон — тёплая тёмная ступень, без blend-режимов: снимки сами тёмные. */
.pcard__plate{
position:relative;aspect-ratio:1/1;background:var(--bark);overflow:hidden;
display:grid;place-items:center;
}
.pcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* табличка без образца — ниже квадрата (4:3): двенадцать пустых квадратов подряд
давили страницу; с приходом фото карточка сама станет квадратной */
.pcard__plate--empty{aspect-ratio:4/3}
/* уголки .ph__corners живут «только в герое» по правилу .sec .ph__corners{display:none}
(раздел 9) — в табличке карточки их нужно вернуть, ID-селектор перебивает класс */
#cat .ph__corners{display:block}
#cat .ph__corners i{border-color:rgba(255,237,215,.32)}
.pcard__num{
position:absolute;right:12px;bottom:10px;z-index:3;
font-family:var(--fm);font-size:10px;letter-spacing:.06em;color:rgba(255,237,215,.55);
}
/* без образца: латинское имя курсивом (синтетический наклон Golos Text — приём эталона) */
.pcard__label{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
text-align:center;padding:22px;
}
.pcard__label b{
font-family:var(--ff);font-style:italic;font-weight:500;
font-size:clamp(22px,2.2vw,30px);line-height:1.08;color:var(--cream);
}
.pcard__label span{
font-family:var(--fm);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--drift);
}
/* шапка: имя · латинское · происхождение */
.pcard__head{padding:20px 22px 0}
.pcard__name{
font-size:clamp(22px,2.35vw,36px);line-height:.92;font-weight:500;
text-transform:uppercase;overflow-wrap:break-word;
}
.pcard__latin{margin-top:6px;font-family:var(--fm);font-size:11px;letter-spacing:.06em;color:var(--drift)}
.pcard__origin{margin-top:9px;display:block}
.pcard__blurb{padding:10px 22px 0}
/* строки-позиции */
.pcard__rows{padding:16px 22px 20px;margin-top:16px;border-top:1px solid var(--hair)}
.pcard__grp{display:block;padding:.7em 0 .35em;border-bottom:1px solid var(--hair)}
.pcard__grp:first-child{padding-top:0}
.pcard__row{
/* align-items:start, не center — у длинного варианта («средний, 150–300 г»)
первая колонка переносится на 2 строки, а цену/кнопку читатель ждёт
на одной высоте с ПЕРВОЙ строкой варианта, не в геометрическом центре
между двумя строками (проверено живым прогоном на карточке «Судак») */
/* Три колонки в один ряд (вариант · цена · кнопка) на карточке 288px не
сходятся: с дорогой ценой (4 цифры + копейки, «Форель» х/к «тушка»)
кнопку «В заявку» срезало краем карточки (overflow:hidden), а с полом
у 1-й колонки короткие однословные варианты («целиком», «кольцо»)
ломались посреди слова — оба варианта проверены живым прогоном и оба
хуже, чем вторая строка. Вариант и цена делят верхнюю строку (2
колонки), контрол order.js — своя строка снизу, кнопка прижата вправо
(переопределение ниже), без растяжения на всю ширину. */
/* 04.09 (куратор): третья колонка вернулась — кнопка order.js в карточке
стала компактным кружком «+»/«−» (переопределение ниже), 30px ей хватает
при любой цене; строка позиции — одна, а не две. */
display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;
gap:4px 12px;padding:.6em 0;border-bottom:1px solid var(--hair);
}
.pcard__row:last-child{border-bottom:0}
.pcard__v{
/* НЕ display:flex: на анонимном флекс-айтеме голого текста («целиком»,
без пробелов — переносить нечем) overflow-wrap:break-word не сработал
живым прогоном — колонка 43px, текст рвался за карточку. Обычный
блок с нормальным переносом строк держит и однословный вариант, и
многословный («средний, 150–300 г» у «Судак» уже переносится по
словам), бирка после текста — тем же потоком, с отступом слева. */
display:block;min-width:0;
font-size:var(--micro);letter-spacing:.04em;text-transform:uppercase;color:var(--drift);
overflow-wrap:break-word;
}
.pcard__v .tag{margin-left:6px;vertical-align:middle}
.pcard__price{display:flex;align-items:baseline;gap:10px;font-variant-numeric:tabular-nums}
.pcard__price b,.pcard__price small{
font-size:clamp(14px,1.1vw,17px);font-weight:500;letter-spacing:.03em;white-space:nowrap;
transition:color var(--tq);
}
.pcard__price b{color:var(--cream)}
.pcard__price small{color:var(--drift)}
#cat.is-opt .pcard__price b{color:var(--drift)}
#cat.is-opt .pcard__price small{color:var(--cream)}
/* контрол order.js вставляет сам в конец .pcard__row — степпер прячем;
кнопка «В заявку/Убрать» — своя строка на всю ширину (это уже поведение
order.css по умолчанию, .ord-ctl{grid-column:1/-1;width:100%} — здесь
только прижимаем содержимое вправо и убираем верхний отступ) */
#cat .ord-ctl{grid-column:auto;width:auto;flex-basis:auto;margin-top:0;gap:0}
.pcard .ord-q,.pcard .ord-ctl__note,.pcard .ord-ctl__tag{display:none}
/* кнопка-кружок: текст «В заявку»/«Убрать» остаётся в aria-label (order.js ставит его сам),
визуально — «+», в заявке — «−» акцентом; область нажатия 44px через ::before у .ord-b */
#cat .ord-ctl .ord-b{
width:30px;height:30px;min-height:0;padding:0;border-radius:50%;font-size:0;line-height:0;
display:inline-flex;align-items:center;justify-content:center;
}
#cat .ord-ctl .ord-b::after{content:"+";font-size:17px;line-height:1;font-weight:500;font-family:var(--fm)}
#cat .ord-ctl.is-in .ord-b{border-color:var(--ember);color:var(--ember)}
#cat .ord-ctl.is-in .ord-b::after{content:"−"}
#cat .ord-ctl .ord-b::before{content:"";position:absolute;inset:-7px}
@media (prefers-reduced-motion:reduce){
.pcard:hover{transform:none}
}
@media (max-width:760px){
#cat .ord-ctl .ord-b{width:36px;height:36px}
}