: открывается без единой строки скрипта, работает с
клавиатуры и остаётся в разметке для поиска, даже когда свёрнут. */
.qa-list{ margin-top:clamp(24px, 3vw, 40px); max-width:76ch; }
.qa{
border-bottom:1px solid rgba(16,22,19,.12);
}
.qa summary{
list-style:none; cursor:pointer; position:relative;
padding:17px 44px 17px 0;
font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
font-size:clamp(15px, 1.3vw, 19px); line-height:1.35;
transition:color .2s ease;
}
.qa summary::-webkit-details-marker{ display:none; }
@media (hover:hover){ .qa summary:hover{ color:var(--mint-ink); } }
/* Плюс, который становится минусом. Рисуем двумя полосками, чтобы не
тащить иконку ради одного знака. */
.qa summary::before,
.qa summary::after{
content:''; position:absolute; right:6px; top:50%;
width:14px; height:2px; background:var(--mint-ink);
transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.qa summary::after{ transform:rotate(90deg); }
.qa[open] summary::after{ transform:rotate(0deg); }
.qa-a{ padding:0 44px 20px 0; }
.qa-a p{
margin:0; font-size:14.5px; line-height:1.65; color:var(--l-dim);
max-width:64ch;
}
/* ── пульт расчёта ──────────────────────────────────────────────────
Слева переключатели, справа табло. Табло тёмное и набрано моно —
это единственное место в светлой части страницы, где мы возвращаем
язык приборов, и здесь он к месту: это буквально показания.
Переключатели — обычные radio, спрятанные под своей же подписью.
Клавиатура и экранные читалки работают без единой строки скрипта. */
.calc{
display:grid; gap:clamp(16px, 2.4vw, 34px);
grid-template-columns:1.35fr 1fr;
margin-top:clamp(28px, 4vw, 48px);
align-items:start;
}
.calc-panel{
padding:clamp(18px, 2vw, 28px);
background:rgba(255,255,255,.6);
border:1px solid rgba(16,22,19,.09);
border-radius:18px;
}
.calc-row{ border:0; margin:0; padding:0; }
.calc-row + .calc-row{ margin-top:22px; padding-top:20px; border-top:1px solid rgba(16,22,19,.1); }
.calc-row legend{
padding:0; font-family:var(--hud-mono); font-size:10px;
letter-spacing:.2em; text-transform:uppercase; color:var(--mint-ink);
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chip{ display:block; cursor:pointer; }
.chip input{
position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}
.chip-face{
display:block; padding:9px 13px;
border:1px solid rgba(16,22,19,.16); border-radius:11px;
background:rgba(255,255,255,.5);
transition:border-color .2s ease, background .2s ease, transform .15s ease;
}
.chip-face b{
display:block; font-weight:500; font-size:14px; line-height:1.2;
color:var(--l-ink);
}
.chip-face i{
display:block; margin-top:3px; font-style:normal;
font-family:var(--hud-mono); font-size:10px; letter-spacing:.04em;
color:var(--l-dim);
}
@media (hover:hover){
.chip:hover .chip-face{ border-color:rgba(11,143,98,.45); }
}
/* Выбранное положение: заливка, а не галочка — на пульте важно видеть
состояние издалека, одним взглядом. */
.chip input:checked + .chip-face{
background:var(--mint); border-color:var(--mint);
}
.chip input:checked + .chip-face b{ color:#07281c; }
.chip input:checked + .chip-face i{ color:rgba(7,40,28,.7); }
.chip input:focus-visible + .chip-face{
outline:2px solid var(--mint-ink); outline-offset:2px;
}
.chip:active .chip-face{ transform:scale(.97); }
.chips-qty .chip-face b{ font-family:var(--hud-mono); letter-spacing:.04em; }
/* --- табло --- */
.calc-out{
padding:clamp(16px, 1.8vw, 24px);
background:#0e1512; color:var(--hud-ink);
border:1px solid rgba(255,255,255,.14);
border-radius:18px;
font-family:var(--hud-mono);
position:sticky; top:calc(var(--tb-h, 64px) + 16px);
}
.calc-out-head{ display:flex; align-items:center; gap:10px; }
.calc-out-head .co-rule{
flex:1 1 auto; height:1px; background:rgba(255,255,255,.22);
}
.calc-out-head .co-idx,
.calc-out-head .co-code{
font-size:9px; letter-spacing:.18em; color:var(--hud-dim);
}
.calc-out-head .co-code{ color:var(--mint); }
.calc-nums{ margin:18px 0 0; }
.calc-nums > div{
display:flex; justify-content:space-between; align-items:baseline;
gap:14px; padding:11px 0;
border-bottom:1px solid rgba(255,255,255,.1);
}
.calc-nums dt{
font-size:11px; letter-spacing:.06em; color:rgba(255,255,255,.62);
}
.calc-nums dd{
margin:0; font-family:var(--font-display); font-weight:700;
font-size:clamp(16px, 1.5vw, 21px); letter-spacing:-.02em; color:#fff;
}
/* Строка стоимости выключена намеренно: цен на сайте нет. Приглушаем,
чтобы её не приняли за посчитанное число. */
.calc-price dd{
font-family:var(--hud-mono); font-size:12px; font-weight:400;
letter-spacing:.06em; color:var(--hud-dim);
}
.calc-note{
margin:14px 0 0; font-size:11.5px; line-height:1.55;
color:var(--mint); min-height:1.55em;
}
.calc-brief{
margin-top:16px; padding-top:14px;
border-top:1px solid rgba(255,255,255,.12);
}
.calc-brief span{
font-size:9px; letter-spacing:.18em; text-transform:uppercase;
color:rgba(255,255,255,.45);
}
.calc-brief p{
margin:7px 0 0; font-size:12.5px; line-height:1.55; color:#fff;
}
.calc-snoska{
margin:14px 0 0; font-size:11px; line-height:1.5;
color:rgba(255,255,255,.45);
}
.calc-go{ display:block; margin-top:18px; text-align:center; }
@media (max-width:900px){
.calc{ grid-template-columns:1fr; }
.calc-out{ position:static; }
}
/* ── сезонный блок ──────────────────────────────────────────────────
Ни одной снежинки-иконки и ни одного красного пикселя. Зима здесь
делается двумя вещами: температурой света и редким снегом.
Фон тот же тёмный, что у работ, но подсвечен холодным синим — как
будто сцену переставили под другой свет. Мятный акцент остаётся
нашим, он и так почти ёлочный. Красно-зелёная гамма и шрифты-сосульки
превратили бы страницу в открытку из ларька. */
.sec-ny{
position:relative; overflow:hidden;
background:
radial-gradient(120% 90% at 70% 0%, rgba(86,140,190,.22) 0%, rgba(0,0,0,0) 60%),
linear-gradient(180deg, #0b1218 0%, #0c1512 100%);
}
/* Снег. Три слоя точек разного размера, каждый со своей скоростью —
иначе читается как падающая сетка, а не как снег. Рисуем градиентами,
без единой картинки и без скрипта. */
.ny-snow{
position:absolute; inset:-20% -10%; pointer-events:none; z-index:0;
opacity:.5;
background-image:
radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.9) 50%, transparent 51%),
radial-gradient(1.6px 1.6px at 70% 60%, rgba(255,255,255,.7) 50%, transparent 51%),
radial-gradient(1.2px 1.2px at 45% 80%, rgba(255,255,255,.55) 50%, transparent 51%);
background-size:340px 340px, 250px 250px, 180px 180px;
animation:nySnow 34s linear infinite;
}
@keyframes nySnow{
from{ transform:translate3d(0,-14%,0); }
to { transform:translate3d(-90px,14%,0); }
}
.sec-ny > .sec-in{ position:relative; z-index:1; }
/* --- таблица сроков --- */
.ny-lines{
list-style:none; margin:clamp(26px, 3.6vw, 44px) 0 0; padding:0;
border-top:1px solid rgba(255,255,255,.14);
}
.ny-line{
display:grid; align-items:baseline; gap:10px 18px;
grid-template-columns:minmax(0,1.5fr) 118px 128px minmax(0,1.3fr);
padding:15px 0;
border-bottom:1px solid rgba(255,255,255,.1);
}
.ny-head{
padding:9px 0; border-bottom:1px solid rgba(255,255,255,.18);
font-family:var(--hud-mono); font-size:9px; letter-spacing:.18em;
text-transform:uppercase; color:rgba(255,255,255,.45);
}
.ny-name{
font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
font-size:clamp(15px, 1.3vw, 19px); color:#fff;
}
.ny-date{
font-family:var(--hud-mono); font-size:13px; letter-spacing:.06em;
color:var(--mint);
}
/* «Осталось» — единственное число, которое меняется само. Держим его
табличными цифрами, чтобы строка не дёргалась при пересчёте. */
.ny-left{
font-family:var(--hud-mono); font-size:13px; letter-spacing:.06em;
font-variant-numeric:tabular-nums; color:#fff;
}
.ny-left.soon{ color:#ffcf6b; }
.ny-left.over{ color:rgba(255,255,255,.4); text-decoration:line-through; }
.ny-why{
font-size:12.5px; line-height:1.45; color:rgba(255,255,255,.55);
}
.ny-head .ny-name, .ny-head .ny-date,
.ny-head .ny-left, .ny-head .ny-why{
font-family:var(--hud-mono); font-size:9px; color:inherit;
font-weight:400; letter-spacing:.18em;
}
.ny-note{
margin:16px 0 0; font-size:12.5px; color:rgba(255,255,255,.5);
}
/* --- готовые наборы --- */
.ny-sets{
display:grid; gap:14px; margin-top:clamp(26px, 3.4vw, 42px);
grid-template-columns:repeat(3, 1fr);
}
.ny-set{
padding:20px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
}
.ny-set h3{ margin:0; font-size:clamp(17px, 1.5vw, 23px); color:#fff; }
.ny-kit{
margin:10px 0 0; font-family:var(--hud-mono); font-size:11.5px;
line-height:1.55; color:var(--mint);
}
.ny-set .ny-why{ margin:10px 0 0; }
@media (max-width:820px){
.ny-line{ grid-template-columns:1fr auto; gap:4px 14px; }
.ny-head{ display:none; }
.ny-name{ grid-column:1; }
.ny-date{ grid-column:2; text-align:right; }
.ny-left{ grid-column:2; text-align:right; }
.ny-why{ grid-column:1 / -1; }
.ny-sets{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
.ny-snow{ animation:none; }
}
/* ── плашка про куки ────────────────────────────────────────────────
Полоса внизу, а не окно на весь экран. Она обязана быть заметной, но
не обязана мешать: закрывать собой сайт ради юридического уведомления
— плохой обмен. */
.ck{
position:fixed; left:0; right:0; bottom:0; z-index:70;
display:flex; align-items:center; gap:clamp(12px, 2vw, 24px);
padding:12px clamp(14px, 3vw, 32px);
background:rgba(10,16,13,.92);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
border-top:1px solid rgba(255,255,255,.16);
animation:ckIn .45s cubic-bezier(.22,1,.36,1) both;
}
.ck[hidden]{ display:none; }
@keyframes ckIn{ from{ transform:translateY(100%); } to{ transform:none; } }
.ck-text{
margin:0; flex:1 1 auto;
font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.8);
max-width:82ch;
}
.ck-text a{ color:var(--mint); text-decoration:underline; text-underline-offset:2px; }
.ck-ok{
flex:0 0 auto; cursor:pointer;
padding:10px 22px; border:0; border-radius:100px;
font-family:inherit; font-size:13px; font-weight:600;
color:#07281c; background:var(--mint);
transition:transform var(--tap-ms, 120ms) ease;
}
.ck-ok:active{ transform:scale(.96); }
@media (max-width:640px){
.ck{ flex-direction:column; align-items:stretch; gap:10px; }
.ck-ok{ width:100%; }
}
/* ── сроки по технологиям ───────────────────────────────────────────
Таблица, а не карточки: шесть строк, которые сравнивают между собой,
читаются столбиком быстрее всего. Цифры табличные — колонка сроков
должна стоять ровно. */
.tt{
list-style:none; margin:clamp(26px, 3.6vw, 44px) 0 0; padding:0;
border-top:1px solid rgba(16,22,19,.16);
}
.tt-row{
display:grid; align-items:baseline; gap:6px 20px;
grid-template-columns:minmax(0,1fr) 132px minmax(0,1.4fr);
padding:15px 0;
border-bottom:1px solid rgba(16,22,19,.1);
}
.tt-head{
padding:9px 0;
font-family:var(--hud-mono); font-size:9px; letter-spacing:.18em;
text-transform:uppercase; color:var(--l-dim);
}
.tt-name{
font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
font-size:clamp(15px, 1.3vw, 20px);
}
.tt-days{
font-family:var(--hud-mono); font-size:13.5px; letter-spacing:.04em;
font-variant-numeric:tabular-nums; color:var(--mint-ink);
}
.tt-why{ font-size:13px; line-height:1.45; color:var(--l-dim); }
.tt-head .tt-name, .tt-head .tt-days, .tt-head .tt-why{
font-family:var(--hud-mono); font-size:9px; font-weight:400;
letter-spacing:.18em; color:inherit;
}
/* Срок рядом с названием шага: он тут важнее подробностей, поэтому
стоит в самом заголовке, а не в тексте под ним. */
.step-days{
display:inline-block; margin-left:8px; vertical-align:.08em;
font-family:var(--hud-mono); font-weight:400; letter-spacing:.04em;
font-size:.62em; color:var(--mint-ink);
}
@media (max-width:760px){
.tt-row{ grid-template-columns:1fr auto; }
.tt-head{ display:none; }
.tt-why{ grid-column:1 / -1; }
.step-days{ display:block; margin:3px 0 0; font-size:.8em; }
}
/* ╔══════════════════════════════════════════════════════════════════════╗
║ 6.9 ВНУТРЕННИЕ СТРАНИЦЫ ║
╠══════════════════════════════════════════════════════════════════════╣
║ Главная — кино: закреплённый экран, покадровое видео, приборы. ║
║ Внутренние — документы: их читают, а не смотрят. Поэтому здесь ║
║ обычная прокрутка, светлый фон и спокойная типографика. ║
║ ║
║ Общего с главной у них ровно столько, сколько нужно, чтобы это ║
║ читалось как один сайт: шрифты, цвета, шапка, подвал. ║
╚══════════════════════════════════════════════════════════════════════╝ */
body.inner{
background:var(--l-bg); color:var(--l-ink);
overflow-x:hidden;
}
body.inner.menu-open{ overflow:hidden; }
.inner-main{
padding:clamp(18px, 3vw, 34px) clamp(16px, 4vw, 56px) 0;
}
/* Колонка чтения уже общей сетки сайта.
Мера строки — 62 знака, это примерно 620 пикселей. В колонке
шириной 1180 такой абзац занимает половину, а вторая половина
стоит пустой, и страница выглядит недоделанной.
Ширина одна на все блоки страницы: как только у соседних блоков
она разная, их левые края перестают совпадать, и страница выглядит
собранной из кусков. Меру строки держит сам абзац (62 знака), а не
ширина колонки. */
.inner-main{ --read-w:1040px; }
.inner-main > *{ width:min(var(--read-w), 100%); margin-inline:auto; }
/* ── хлебные крошки ─────────────────────────────────────────────────
Не украшение: по ним поиск строит путь в выдаче, а человек понимает,
куда попал с чужой ссылки. */
.crumbs{
display:flex; align-items:center; gap:8px;
font-family:var(--hud-mono); font-size:10.5px; letter-spacing:.12em;
text-transform:uppercase; color:var(--l-dim);
padding:6px 0 0;
}
.crumbs a{ color:var(--mint-ink); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }
.crumbs b{ font-weight:400; color:var(--l-dim); }
/* ── первый экран страницы ──────────────────────────────────────────
Заголовок и подзаголовок. Крупно, но без картинки: на внутренней
странице человек уже пришёл за конкретным, и лишний баннер только
отодвигает ответ. */
.page-head{
padding:clamp(26px, 5vw, 60px) 0 clamp(22px, 4vw, 44px);
border-bottom:1px solid rgba(16,22,19,.12);
}
.page-head h1{
margin:0; font-family:var(--font-display); font-weight:700;
font-size:clamp(28px, 4.4vw, 56px); line-height:1.08;
letter-spacing:-.035em; text-wrap:balance;
max-width:20ch;
}
.page-head h1 em{ font-style:normal; color:var(--mint-ink); }
.page-head .lead{
margin:clamp(14px, 2vw, 22px) 0 0;
font-size:clamp(15px, 1.35vw, 19px); line-height:1.6;
color:var(--l-dim); max-width:56ch;
}
.page-head .eyebrow-l{ display:block; margin-bottom:12px; }
/* ── текстовые блоки страницы ───────────────────────────────────────
Здесь живёт то, ради чего страницы и заводили: связный текст, по
которому её находят в поиске. Мера одна — 62 знака в строке: длиннее
глаз теряет начало следующей строки. */
.page-sec{ padding:clamp(30px, 5vw, 62px) 0; }
.page-sec + .page-sec{ border-top:1px solid rgba(16,22,19,.1); }
.page-sec h2{
margin:0 0 clamp(14px, 2vw, 22px);
font-size:clamp(22px, 2.4vw, 34px);
}
.page-sec h3{
margin:clamp(20px, 3vw, 32px) 0 8px;
font-size:clamp(17px, 1.6vw, 22px);
}
.page-sec p{
margin:0 0 14px; max-width:62ch;
font-size:clamp(14.5px, 1.15vw, 17px); line-height:1.68;
color:var(--l-dim);
}
.page-sec p strong{ color:var(--l-ink); font-weight:600; }
.page-sec ul, .page-sec ol{
margin:0 0 16px; padding-left:0; list-style:none; max-width:62ch;
}
.page-sec li{
position:relative; padding-left:20px; margin-bottom:8px;
font-size:clamp(14px, 1.1vw, 16px); line-height:1.6; color:var(--l-dim);
}
.page-sec li::before{
content:''; position:absolute; left:0; top:.62em;
width:7px; height:7px; border:1px solid var(--mint-ink);
}
.page-sec ol{ counter-reset:n; }
.page-sec ol li{ padding-left:30px; counter-increment:n; }
.page-sec ol li::before{
content:counter(n, decimal-leading-zero);
border:0; width:auto; height:auto; top:0;
font-family:var(--hud-mono); font-size:11px; color:var(--mint-ink);
}
/* Врезка: короткая мысль, которую надо заметить, не читая всё подряд. */
.note{
margin:clamp(18px, 2.6vw, 28px) 0;
padding:clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px);
background:rgba(255,255,255,.62);
border-left:2px solid var(--mint-ink);
border-radius:0 12px 12px 0;
}
.note p{ margin:0; max-width:58ch; }
.note p + p{ margin-top:10px; }
/* ── карточки-ссылки на соседние страницы ───────────────────────────
Перелинковка. Без неё внутренние страницы — тупики: человек дочитал
и ушёл, а поиск не понимает, что разделы связаны. */
.next-grid{
display:grid; gap:12px; margin-top:8px;
grid-template-columns:repeat(auto-fit, minmax(232px, 1fr));
}
.next-card{
display:block; padding:18px 20px 16px; text-decoration:none;
background:rgba(255,255,255,.6);
border:1px solid rgba(16,22,19,.1); border-radius:14px;
transition:border-color .22s ease, transform .22s ease, background .22s ease;
}
@media (hover:hover){
.next-card:hover{
border-color:rgba(11,143,98,.45); background:rgba(255,255,255,.88);
transform:translateY(-2px);
}
}
.next-card b{
display:block; font-family:var(--font-display); font-weight:700;
letter-spacing:-.02em; font-size:17px; color:var(--l-ink);
}
.next-card span{
display:block; margin-top:6px; font-size:13px; line-height:1.45;
color:var(--l-dim);
}
.next-card i{
display:block; margin-top:10px; font-style:normal;
font-family:var(--hud-mono); font-size:10px; letter-spacing:.16em;
text-transform:uppercase; color:var(--mint-ink);
}
/* ── призыв в конце страницы ────────────────────────────────────────
Каждая страница обязана заканчиваться понятным следующим шагом,
иначе человек дочитывает и закрывает вкладку. */
.page-cta{
/* auto по бокам обязательно: без него блок прижимался к левому краю
колонки, и низ страницы выглядел съехавшим относительно всего
остального. Правило ширины у .inner-main > * задаёт margin-inline,
а этот margin его перебивал. */
margin:clamp(30px, 5vw, 60px) auto clamp(40px, 6vw, 80px);
padding:clamp(26px, 4vw, 46px) clamp(22px, 4vw, 44px);
background:#0e1512; color:#fff; border-radius:20px;
display:flex; flex-wrap:wrap; align-items:center;
justify-content:space-between; gap:clamp(16px, 3vw, 34px);
}
.page-cta h2{
margin:0; font-family:var(--font-display); font-weight:700;
letter-spacing:-.03em; font-size:clamp(21px, 2.4vw, 32px);
line-height:1.18; max-width:20ch;
}
.page-cta p{
margin:9px 0 0; font-size:14px; line-height:1.55;
color:rgba(255,255,255,.62); max-width:44ch;
}
.page-cta .btn{ flex:0 0 auto; }
/* ── подвал ─────────────────────────────────────────────────────────
Второй по важности навигационный узел после шапки: сюда доходят те,
кто дочитал, и здесь они должны увидеть карту всего сайта. */
.site-foot{
background:#0e1512; color:rgba(255,255,255,.7);
padding:clamp(34px, 5vw, 64px) clamp(16px, 4vw, 56px) 22px;
/* На главной за страницей лежит кадр ролика: он position:fixed и
z-index:1, то есть закрывает собой всё, что не поднято выше.
Блоки главной поднимаются классом .stub — подвалу нужна та же
подпорка, иначе он честно рисуется, но оказывается ПОД кадром, и
внизу страницы видно кухню из ролика вместо подвала.
На внутренних страницах ролика нет, и лишний слой там ничего не
меняет. */
position:relative; z-index:2; isolation:isolate;
}
.fo-in{
width:min(var(--sec-w), 100%); margin:0 auto;
display:grid; gap:clamp(24px, 4vw, 60px);
grid-template-columns:minmax(0, 1.1fr) minmax(0, 1.6fr);
}
.fo-brand .foot-brand{
display:block; font-family:var(--font-display); font-weight:700;
font-size:19px; letter-spacing:-.01em; color:#fff;
}
.fo-brand p{
margin:12px 0 0; font-size:13px; line-height:1.6; max-width:36ch;
color:rgba(255,255,255,.6);
}
.fo-phone{
display:inline-block; margin-top:16px;
font-family:var(--font-text); font-weight:600; font-size:17px;
font-variant-numeric:tabular-nums;
color:var(--mint); text-decoration:none;
}
.fo-cols{
display:grid; gap:clamp(18px, 3vw, 40px);
grid-template-columns:repeat(auto-fit, minmax(148px, 1fr));
}
.fo-col b{
display:block; font-family:var(--hud-mono); font-size:9.5px;
letter-spacing:.2em; text-transform:uppercase;
color:rgba(255,255,255,.45); margin-bottom:12px;
}
.fo-col ul{ list-style:none; margin:0; padding:0; }
.fo-col li{ margin-bottom:9px; }
.fo-col a{
font-size:14px; color:rgba(255,255,255,.82); text-decoration:none;
transition:color .2s ease;
}
.fo-col a:hover{ color:var(--mint); }
.fo-line{
width:min(var(--sec-w), 100%); margin:clamp(26px, 4vw, 48px) auto 0;
padding-top:16px; border-top:1px solid rgba(255,255,255,.12);
display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
font-size:12px; color:rgba(255,255,255,.45);
}
.fo-line a{ color:rgba(255,255,255,.6); text-decoration:none; }
.fo-line a:hover{ color:var(--mint); }
@media (max-width:820px){
.fo-in{ grid-template-columns:1fr; }
.page-cta{ flex-direction:column; align-items:flex-start; }
}
/* ── карточки контактов ─────────────────────────────────────────────
Телефон, почта и режим работы — три равные вещи, и на странице они
стоят рядом, а не списком. Так человек находит нужное за один взгляд,
а не читает абзац, чтобы выцепить из него номер. */
.ct-grid{
display:grid; gap:14px;
grid-template-columns:repeat(auto-fit, minmax(258px, 1fr));
}
.ct-card{
padding:clamp(18px, 2.2vw, 26px);
background:rgba(255,255,255,.62);
border:1px solid rgba(16,22,19,.1);
border-radius:16px;
}
.ct-label{
display:block; margin-bottom:12px;
font-family:var(--hud-mono); font-size:10px; letter-spacing:.2em;
text-transform:uppercase; color:var(--mint-ink);
}
.ct-big{
display:block; font-family:var(--font-text); font-weight:600;
font-size:clamp(19px, 2vw, 26px); letter-spacing:-.01em;
font-variant-numeric:tabular-nums;
color:var(--l-ink); text-decoration:none;
transition:color .2s ease;
}
a.ct-big:hover{ color:var(--mint-ink); }
/* Почта длиннее телефона и на узкой карточке не влезает целиком —
ей нужен свой кегль и разрешение переносить по символам. */
.ct-mail{
font-size:clamp(15px, 1.5vw, 20px); overflow-wrap:anywhere;
}
.ct-small{ font-size:clamp(16px, 1.6vw, 21px); }
.ct-note{
margin:12px 0 0 !important; font-size:13px; line-height:1.55;
color:var(--l-dim); max-width:none !important;
}
/* ── работы на отдельной странице ───────────────────────────────────
На главной работы стоят плиткой: там их проглядывают. Здесь у каждой
есть описание, поэтому раскладка другая — фотография слева, текст
справа, одна работа на строку. Читается, а не листается. */
.wk-list{ display:grid; gap:clamp(20px, 3vw, 40px); }
.wk{
display:grid; gap:clamp(16px, 2.4vw, 34px);
grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
align-items:center;
}
/* Чётные переворачиваем: строчка «фото-текст, текст-фото» не даёт
странице превратиться в однообразный столбик. */
.wk:nth-child(even) .wk-pic{ order:2; }
.wk-pic{
margin:0; border-radius:16px; overflow:hidden;
background:#141a17; aspect-ratio:4 / 3;
}
.wk-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.wk-body h2{ margin:0 0 8px; font-size:clamp(19px, 2vw, 28px); }
.wk-what{
margin:0 0 12px !important; font-family:var(--hud-mono);
font-size:11.5px; line-height:1.5; color:var(--mint-ink);
}
.wk-body .case-nums{
border-top:1px solid rgba(16,22,19,.14); margin-top:16px; padding-top:14px;
}
.wk-body .case-nums dt{ color:var(--l-dim); }
.wk-body .case-nums dd{ color:var(--mint-ink); }
@media (max-width:780px){
.wk{ grid-template-columns:1fr; }
.wk:nth-child(even) .wk-pic{ order:0; }
}
/* ── вопросы на всю ширину страницы ─────────────────────────────────
На главной список узкий: он там один из блоков. На своей странице
он главный, и колонку можно дать шире. */
.qa-wide{ max-width:none; }
.qa-wide .qa-a p{ max-width:70ch; }
.qa-wide .qa-a p + p{ margin-top:12px; }
/* ── таблица сроков на светлом фоне ─────────────────────────────────
Та же разметка, что в сезонном блоке на главной, но там она лежит на
тёмном. Здесь перекрашиваем: белый текст на светлом читать нельзя. */
.page-sec .ny-lines{
list-style:none; margin:clamp(20px, 3vw, 32px) 0 0; padding:0;
border-top:1px solid rgba(16,22,19,.16);
max-width:none;
}
.page-sec .ny-line{
display:grid; align-items:baseline; gap:6px 18px;
grid-template-columns:minmax(0,1.4fr) 128px 122px minmax(0,1.3fr);
padding:15px 0; margin:0;
border-bottom:1px solid rgba(16,22,19,.1);
}
.page-sec .ny-line::before{ content:none; }
.page-sec .ny-head{
padding:8px 0; border-bottom:1px solid rgba(16,22,19,.2);
color:var(--l-dim);
}
.page-sec .ny-name{ color:var(--l-ink); }
.page-sec .ny-date{ color:var(--mint-ink); }
.page-sec .ny-left{ color:var(--l-ink); }
.page-sec .ny-left.soon{ color:#b06a00; }
.page-sec .ny-why{ color:var(--l-dim); }
.page-sec .ny-head .ny-name,
.page-sec .ny-head .ny-date,
.page-sec .ny-head .ny-left,
.page-sec .ny-head .ny-why{ color:var(--l-dim); }
.ny-note-l{ margin-top:14px !important; font-size:13px !important; }
@media (max-width:820px){
.page-sec .ny-line{ grid-template-columns:1fr auto; }
.page-sec .ny-head{ display:none; }
.page-sec .ny-why{ grid-column:1 / -1; }
}
/* ── ссылки с главной вглубь сайта ──────────────────────────────────
Карточка направления теперь ссылка целиком: кликают по всей плитке,
а не по слову «подробнее» мелким шрифтом внизу. */
a.dir-link{ text-decoration:none; color:inherit; }
.dir-go{
display:block; padding:0 clamp(18px, 2vw, 28px) 18px;
font-family:var(--hud-mono); font-size:10px; letter-spacing:.16em;
text-transform:uppercase; color:var(--mint-ink);
transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.dir-go::after{ content:' →'; }
@media (hover:hover){
a.dir-link:hover .dir-go{ transform:translateX(4px); }
}
/* Строка «все работы» над блоком: короткая, но она единственная
говорит, что за блоком есть отдельная страница. */
.sec-more{
margin:clamp(20px, 3vw, 32px) 0 0;
font-family:var(--hud-mono); font-size:11px; letter-spacing:.1em;
}
.sec-more a:not(.mbtn){
color:var(--mint-ink); text-decoration:none;
border-bottom:1px solid rgba(11,143,98,.35);
padding-bottom:2px; transition:border-color .2s ease;
}
.sec-more a:not(.mbtn):hover{ border-bottom-color:var(--mint-ink); }
.sec-more-dark a{
color:var(--mint); border-bottom-color:rgba(143,232,196,.4);
}
.sec-more-dark a:hover{ border-bottom-color:var(--mint); }
/* Ссылка под телефоном на финальной карточке. Приборным шрифтом —
она стоит внутри HUD-плашки и не должна выбиваться. */
.contact-more{
display:inline-block; margin-top:16px;
font-family:var(--hud-mono); font-size:10.5px; letter-spacing:.1em;
color:var(--mint); text-decoration:none;
border-bottom:1px solid rgba(143,232,196,.35); padding-bottom:2px;
transition:border-color .2s ease;
}
.contact-more:hover{ border-bottom-color:var(--mint); }
/* ╔══════════════════════════════════════════════════════════════════════╗
║ 7. МИКРОВЗАИМОДЕЙСТВИЯ ║
╠══════════════════════════════════════════════════════════════════════╣
║ Правило одно на весь сайт: наведение — чуть приподнять и увеличить, ║
║ нажатие — проседание. Цифры собраны здесь, меняются в одном месте. ║
╚══════════════════════════════════════════════════════════════════════╝ */
:root{
--hover-lift: -2px; /* насколько кнопка приподнимается при наведении */
--hover-grow: 1.035; /* и насколько увеличивается */
--press-sink: 0.96; /* насколько проседает в момент нажатия */
--tap-ms: 120ms; /* скорость отдачи на нажатие — она всегда резче */
--hover-ms: 240ms; /* чем наведение */
}
/* --- крупные кнопки --- */
.btn{
transition:transform var(--hover-ms) cubic-bezier(.22,1,.36,1),
background var(--hover-ms) ease,
border-color var(--hover-ms) ease,
box-shadow var(--hover-ms) ease;
will-change:transform;
}
/* :hover только там, где есть настоящий курсор — на тачскрине он «залипает» */
@media (hover:hover){
.btn:hover{ transform:translateY(var(--hover-lift)) scale(var(--hover-grow)); }
}
.btn:active{ transform:scale(var(--press-sink)); transition-duration:var(--tap-ms); }
/* --- карточки шагов слегка всплывают --- */
.step-card{ transition:transform var(--hover-ms) cubic-bezier(.22,1,.36,1),
box-shadow var(--hover-ms) ease; }
@media (hover:hover){
.step:hover .step-card{ transform:translateY(-4px); }
}
/* ====================== КНОПКА «НАВЕРХ» ======================
Появляется, когда ушли ниже первого блока. Кликом возвращает
на самый верх — обратно в закреплённые экраны.
============================================================= */
.to-top{
position:fixed; z-index:48;
right:clamp(16px, 2.4vw, 30px);
bottom:calc(clamp(16px, 2.4vw, 30px) + env(safe-area-inset-bottom, 0px));
width:50px; height:50px; padding:0; cursor:pointer;
border-radius:50%;
border:1px solid rgba(11,143,98,.28);
background:rgba(255,255,255,.72);
backdrop-filter:blur(14px) saturate(1.6);
-webkit-backdrop-filter:blur(14px) saturate(1.6);
box-shadow:0 10px 26px rgba(10,40,30,.18);
display:flex; align-items:center; justify-content:center;
opacity:0; visibility:hidden; transform:translateY(14px) scale(.9);
transition:opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1),
visibility .35s, background var(--hover-ms) ease;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top svg{
width:22px; height:22px; fill:none; stroke:#0b8f62;
stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
transition:transform var(--hover-ms) cubic-bezier(.22,1,.36,1);
}
@media (hover:hover){
.to-top:hover{ background:rgba(255,255,255,.92); transform:translateY(-3px) scale(1.05); }
.to-top:hover svg{ transform:translateY(-2px); }
}
.to-top:active{ transform:scale(.9); transition-duration:var(--tap-ms); }
@media (max-width:560px){
.to-top{ width:44px; height:44px; }
.to-top svg{ width:19px; height:19px; }
}
@media (prefers-reduced-motion:reduce){
.film-hint i, .down-arrow svg, .helix .dot, .helix .rung{ animation:none; }
.panel{ transition:opacity .25s linear; }
/* без анимаций: наведение и нажатие ничего не двигают */
.btn, .tb-skip, .tb-burger, .tb-phone, .menu-phone, .menu-links a,
.tb-brand img, .step-card, .to-top, .to-top svg{ transition:none; }
@media (hover:hover){
.btn:hover, .tb-skip:hover, .tb-phone:hover, .menu-phone:hover,
.menu-links a:hover, .tb-brand:hover img, .step:hover .step-card,
.to-top:hover{ transform:none; }
}
}
/* ╔══════════════════════════════════════════════════════════════════════╗
║ РАЗБОР ОБРАЗА НА ПАРАЛЛАКСЕ ║
╠══════════════════════════════════════════════════════════════════════╣
║ Тот же язык, что и на стоп-кадрах: скошенные углы, волосяной штрих, ║
║ моноширинные подписи, мятный только на активном. ║
║ ║
║ Позиции квадратов задаёт main.js в пикселях: слой с манекеном ║
║ ездит за курсором и обрезается по cover, так что проценты экрана ║
║ тут не работают — нужен пересчёт из долей самой картинки. ║
╚══════════════════════════════════════════════════════════════════════╝ */
.pl-hud{
position:absolute; inset:0; pointer-events:none; z-index:3;
}
.pl-box{
position:absolute; display:block; width:26px; height:26px;
margin:-13px 0 0 -13px;
border:1px solid rgba(255,255,255,.55);
box-shadow:0 1px 3px rgba(0,0,0,.5);
opacity:0; transition:opacity .35s ease, transform .55s cubic-bezier(.22,1,.36,1);
transform:scale(1.25);
}
.pl-box.on{ opacity:1; transform:none; }
/* активный узел — мятный и чуть крупнее: видно, о чём сейчас речь */
.pl-box.hot{
border-color:var(--mint);
box-shadow:0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1px rgba(143,232,196,.25);
}
.pl-box::before, .pl-box::after{
content:''; position:absolute; width:5px; height:5px;
border:1px solid currentColor; color:inherit;
}
/* Дрейфующие: тот же квадрат, но тише — они ничего не измеряют и не
должны спорить с четырьмя рабочими. */
.pl-box-free{
border-color:rgba(255,255,255,.32);
box-shadow:none;
}
/* Залипший узел. Прибор его не отпускает: рамка не гаснет и медленно
пульсирует. Ничего не подписано — просто одна деталь ведёт себя не
как остальные одиннадцать. */
.pl-box.locked{
border-color:var(--mint);
animation:plLock 1.8s ease-in-out infinite;
}
@keyframes plLock{
0%, 100%{ opacity:1; box-shadow:0 1px 3px rgba(0,0,0,.5); }
50% { opacity:.45; box-shadow:0 1px 3px rgba(0,0,0,.5),
0 0 9px rgba(143,232,196,.45); }
}
.pl-box-free::before, .pl-box-free::after{ display:none; }
/* Три калибра. Мелкие ощупывают поверхность, крупные берут объект
целиком; средние — рабочие узлы разбора. */
/* Содержимое квадрата. Пустой — просто рамка; остальные три состояния
прибор включает на отдельных объектах. Размытие берёт то, что под
квадратом, поэтому на светлой куртке оно молочное, а на тёмной —
дымное: одно правило, разный вид. */
.pl-box.fill-w{
background:rgba(255,255,255,.22);
-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.pl-box.fill-d{ background:rgba(255,255,255,.11); }
.pl-box.fill-m{ background:rgba(143,232,196,.24); }
.pl-box.pl-sm{ width:14px; height:14px; margin:-7px 0 0 -7px; }
.pl-box.pl-lg{ width:42px; height:42px; margin:-21px 0 0 -21px; }
/* Залипший узел крупнее прочих: прибор на нём застрял и раскрыл рамку. */
.pl-box.locked{ width:42px; height:42px; margin:-21px 0 0 -21px; }
.pl-box::before{ left:-1px; top:-1px; border-right:0; border-bottom:0; }
.pl-box::after{ right:-1px; bottom:-1px; border-left:0; border-top:0; }
/* Зона клика на голове. Ничем не подсвечена специально: её находят по
подсказке, а не по кнопке — иначе это уже не загадка. */
.pl-head-hit{
position:absolute; width:74px; height:74px; margin:-37px 0 0 -37px;
padding:0; border:0; background:transparent; cursor:pointer;
z-index:4; opacity:0;
}
.pl-head-hit:focus-visible{ opacity:1; outline:1px solid var(--mint); }
/* ── палитра ───────────────────────────────────────────────────────── */
.pl-swatch{
position:absolute; right:clamp(10px, 1.8vw, 44px); top:50%; transform:translateY(-50%);
width:232px; z-index:3; pointer-events:none;
font-family:var(--hud-mono); text-shadow:var(--hud-shadow);
padding:12px 14px 11px;
background:rgba(6,10,8,.62);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,.26);
clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px,
100% 100%, 14px 100%, 0 calc(100% - 14px));
opacity:0; transition:opacity .5s ease;
}
.pl-swatch.on{ opacity:1; }
/* Восемь строк в один столбец занимали половину высоты экрана и
читались как список. В два столбца это снова прибор. */
.pl-swatch .ps-grid{
display:grid; grid-template-columns:1fr 1fr; gap:0 12px;
}
.ps-row{
display:flex; align-items:center; gap:6px; margin-bottom:4px;
font-size:9px; letter-spacing:.04em; color:rgba(255,255,255,.78);
}
.ps-row b{ font-weight:400; color:var(--hud-dim); font-size:9px; }
.ps-row em{
display:block; width:12px; height:12px; background:var(--c);
border:1px solid rgba(255,255,255,.4);
}
.ps-row span{ font-variant-numeric:tabular-nums; }
.ps-foot{
display:flex; justify-content:space-between; margin-top:9px; padding-top:8px;
border-top:var(--hud-hair) solid rgba(255,255,255,.22);
font-size:8px; letter-spacing:.18em; color:var(--mint);
}
/* На телефоне фигура стоит справа внизу — палитру уводим в левый нижний
угол и ужимаем, иначе восемь строк накрывают весь разбор. */
@media (max-width: 900px){
.pl-swatch{
right:auto; left:10px;
top:auto; bottom:14px; transform:none;
width:196px; padding:8px 9px 7px;
}
.pl-swatch .ps-grid{ gap:0 9px; }
.pl-swatch .cp-head{ margin-bottom:7px; }
.ps-row{ font-size:8px; margin-bottom:3px; gap:5px; }
.ps-row em{ width:9px; height:9px; }
.ps-foot{ margin-top:6px; padding-top:5px; font-size:8px; }
}
/* Связи между узлами и отвод к палитре. Тот же приём, что и с линиями
выносок: viewBox 0..1000 по обеим осям и растяжение без сохранения
пропорций, чтобы координаты задавались в промилле экрана. */
.pl-links{
position:absolute; inset:0; width:100%; height:100%;
pointer-events:none; z-index:3; overflow:visible;
}
.pl-links polyline{
fill:none; stroke:rgba(255,255,255,.5); stroke-width:1;
vector-effect:non-scaling-stroke; stroke-linejoin:miter;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.pl-links polyline.hot{ stroke:var(--mint); stroke-width:1.3; }
/* отводы неактивных узлов — тише связей между квадратами:
они висят постоянно и не должны спорить с картинкой */
.pl-links polyline.tie{ stroke:rgba(255,255,255,.32); }
/* то же правило откуса, что и на выносках */
.pl-links polyline.bite{ stroke:#fff; stroke-width:1.6; filter:none; }
/* Строка палитры, к которой сейчас идёт отвод */
.ps-row.hot{ color:#fff; }
.ps-row.hot em{ border-color:var(--mint); }
/* ── окно загадки ──────────────────────────────────────────────────── */
.pl-ask{
position:absolute; z-index:6; width:250px;
font-family:var(--hud-mono); text-shadow:var(--hud-shadow);
padding:12px 14px 12px;
background:rgba(6,10,8,.8);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
border:1px solid var(--mint);
clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px,
100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.pa-label{
display:block; font-size:9px; letter-spacing:.14em;
color:var(--hud-ink); margin:8px 0 7px;
}
.pa-row{ display:flex; gap:6px; }
.pa-input{
flex:1; min-width:0; height:26px; padding:0 8px;
font-family:inherit; font-size:11px; letter-spacing:.1em;
color:#fff; background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.3); border-radius:0;
outline:none;
}
.pa-input:focus{ border-color:var(--mint); }
.pa-go{
width:30px; height:26px; padding:0; cursor:pointer;
font-family:inherit; font-size:12px; color:#07110c;
background:var(--mint); border:0; border-radius:0;
}
.pa-note{
margin-top:8px; font-size:9px; letter-spacing:.08em; color:var(--hud-dim);
}
.pa-note.bad{ color:#ff8a8a; }
/* Телефон: поле кода ровно 16px. Ниже этого порога браузер считает поле
мелким и при нажатии подтягивает к нему всю страницу — со стороны это
выглядит как «сайт сам приблизился». Блок стоит здесь, сразу за
правилами окна: общий адаптив лежит выше по файлу, и оттуда размер
перебивался бы обратно на 11px. */
@media (max-width:900px){
.pl-ask{ width:min(280px, 86vw); }
.pa-input{ font-size:16px; height:34px; letter-spacing:.06em; }
.pa-go{ width:38px; height:34px; font-size:14px; }
}
/* ── ачивка под шапкой ─────────────────────────────────────────────── */
/* Явный display перебивает [hidden] — без этой строки ачивка висит
с первой секунды, ещё до всякой разгадки. */
.ach[hidden], .ach-toast[hidden]{ display:none; }
.ach{
position:fixed; left:50%; top:calc(var(--tb-h, 64px) + 12px);
transform:translateX(-50%);
z-index:60; display:flex; align-items:center; gap:10px;
font-family:var(--hud-mono); font-size:9px; letter-spacing:.18em;
padding:7px 14px;
background:rgba(6,10,8,.78);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.24);
clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px,
100% 100%, 10px 100%, 0 calc(100% - 10px));
color:var(--hud-dim);
animation:achIn .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes achIn{ from{ opacity:0; transform:translate(-50%, -8px) } to{ opacity:1 } }
.ach-dots{ display:flex; gap:5px; }
.ach-dots i{
display:block; width:8px; height:8px; border-radius:50%;
border:1px solid rgba(255,255,255,.4);
}
.ach-dots i.on{ background:var(--mint); border-color:var(--mint); }
.ach-toast{
position:fixed; right:24px; bottom:24px; z-index:60;
font-family:var(--hud-mono); font-size:10px; letter-spacing:.14em;
color:var(--mint); padding:9px 14px;
background:rgba(6,10,8,.78);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
border:1px solid rgba(143,232,196,.45);
clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px,
100% 100%, 10px 100%, 0 calc(100% - 10px));
animation:achIn .5s cubic-bezier(.22,1,.36,1) both;
}
@media (max-width: 900px){
/* Палитру на телефоне ставит блок выше, рядом с её описанием:
левый нижний угол, чтобы не накрывать фигуру. Здесь её не трогаем —
два правила в разных концах файла и привели к тому, что она висела
посреди экрана. */
.pl-box{ width:18px; height:18px; margin:-9px 0 0 -9px; }
.pl-box.pl-sm{ width:10px; height:10px; margin:-5px 0 0 -5px; }
.pl-box.pl-lg,
.pl-box.locked{ width:30px; height:30px; margin:-15px 0 0 -15px; }
.ach-toast{ right:12px; bottom:12px; font-size:9px; }
}
@media (prefers-reduced-motion: reduce){
.ach, .ach-toast{ animation:none; }
}
/* ==================================================================
ЖИВАЯ ЧАСТЬ: предметы, ритм страниц, появление при прокрутке
================================================================== */
/* ── чертежи предметов ────────────────────────────────────────────
Штрих берёт currentColor: один и тот же предмет читается и на
светлой странице, и на тёмной плашке. Заливка приглушена — предмет
должен читаться линией, иначе получается плоская иконка. */
.obj{
display:block; width:100%; height:auto;
fill:none; stroke:currentColor; stroke-width:3;
stroke-linecap:round; stroke-linejoin:round;
overflow:visible;
}
.obj .ac{ fill:var(--mint); stroke:none; opacity:.42; }
.dark-band .obj .ac,
.page-cta .obj .ac{ opacity:.3; }
/* ── появление ────────────────────────────────────────────────────
Всё скрытие живёт под .anim — класс ставит reveal.js. Не доехал
скрипт, старый браузер, отключённый JS — страница остаётся целой,
просто без движения. */
.anim .reveal,
.anim .reveal-l,
.anim .reveal-r{
opacity:0;
transition:opacity .62s cubic-bezier(.22,1,.36,1),
transform .62s cubic-bezier(.22,1,.36,1);
}
.anim .reveal { transform:translateY(22px); }
.anim .reveal-l{ transform:translateX(-34px); }
.anim .reveal-r{ transform:translateX(34px); }
.anim .reveal.in,
.anim .reveal-l.in,
.anim .reveal-r.in{ opacity:1; transform:none; }
/* ступенькой: номер ребёнку раздаёт скрипт, задержку считает CSS */
.anim .reveal-kids > *{
opacity:0; transform:translateY(16px);
transition:opacity .5s cubic-bezier(.22,1,.36,1),
transform .5s cubic-bezier(.22,1,.36,1);
transition-delay:calc(var(--i, 0) * 70ms);
}
.anim .reveal-kids.in > *{ opacity:1; transform:none; }
/* предмет прочерчивается: длину линии считает скрипт */
.anim .obj path,
.anim .obj circle,
.anim .obj ellipse,
.anim .obj rect{
transition:stroke-dashoffset 1.1s cubic-bezier(.33,1,.68,1);
transition-delay:calc(var(--i, 0) * 90ms);
}
.anim .obj.in path,
.anim .obj.in circle,
.anim .obj.in ellipse,
.anim .obj.in rect{ stroke-dashoffset:0 !important; }
.anim .obj .ac{
opacity:0;
transition:opacity .7s ease .5s;
}
.anim .obj.in .ac{ opacity:.42; }
.anim .dark-band .obj.in .ac{ opacity:.3; }
/* ── ритм страницы ────────────────────────────────────────────────
Раньше внутренняя страница была одной колонкой сверху донизу:
заголовок, абзац, заголовок, абзац. Читать такое можно, смотреть
невозможно — глазу не за что зацепиться. Дальше идут четыре
способа сменить ритм; в тексте страницы они чередуются. */
/* 1. Текст и предмет рядом. Модификатор flip меняет их местами,
и соседние блоки на странице всегда стоят в разные стороны. */
.pg-split{
display:grid; gap:clamp(24px, 5vw, 64px);
grid-template-columns:1.15fr .85fr;
align-items:center;
margin:clamp(38px, 6vw, 76px) auto;
max-width:var(--read-w); padding:0;
}
/* Два блока подряд не должны складывать поля: между ними получалась
пустая полоса в треть экрана, и страница выглядела оборванной. */
.pg-split + .pg-split,
.pg-split + .pg-claim,
.pg-claim + .pg-split{ margin-top:clamp(20px, 3vw, 40px); }
.dark-band + .pg-split,
.dark-band + .pg-claim,
.dark-band + .page-sec{ margin-top:clamp(24px, 4vw, 48px); }
.pg-split.flip > .pg-art{ order:-1; }
.pg-split > .pg-txt > :first-child{ margin-top:0; }
.pg-split > .pg-txt > :last-child{ margin-bottom:0; }
/* Предмет сидит в круге-подложке: без неё он висит в пустоте и
выглядит как забытая иконка. */
.pg-art{
position:relative;
display:grid; place-items:center;
padding:clamp(18px, 4vw, 40px);
}
.pg-art::before{
content:''; position:absolute; inset:0;
border-radius:50%;
background:radial-gradient(circle at 50% 46%,
rgba(143,232,196,.34) 0%,
rgba(143,232,196,.13) 42%,
rgba(215,246,232,0) 70%);
}
/* тонкая окружность — та же разметка, что в ролике поверх кадра */
.pg-art::after{
content:''; position:absolute;
left:50%; top:50%; width:min(94%, 340px); aspect-ratio:1;
transform:translate(-50%,-50%);
border:1px dashed rgba(11,143,98,.22); border-radius:50%;
}
.dark-band .pg-art::after{ border-color:rgba(143,232,196,.22); }
.pg-art .obj{ position:relative; max-width:290px; }
/* Снимок вместо чертежа. Круг под ним рисуют ::before и ::after, сам
снимок на прозрачном фоне — поэтому ему нужна только тень, чтобы он
не выглядел наклейкой, и потолок по высоте: у чертежа её задавала
картинка, а у фотографии пропорции свои. */
.pg-art img.art-foto{
width:auto; height:auto;
max-width:min(92%, 300px); max-height:300px;
filter:drop-shadow(0 14px 26px rgba(16,40,32,.20));
}
.page-sec.split > .pg-art img.art-foto{ max-width:min(92%, 340px);
max-height:340px; }
/* размерная выноска, как на чертеже: тонкая линия с засечками */
.pg-art .art-tag{
position:absolute; right:4px; bottom:6px;
font-family:var(--hud-mono); font-size:10px; letter-spacing:.14em;
text-transform:uppercase; color:var(--l-dim);
}
/* 2. Тёмная полоса во всю ширину. Ставится один раз на страницу,
примерно на середине: это привал для глаза и точка, к которой
человек возвращается, когда листает обратно. */
.dark-band{
background:var(--bg); color:var(--ink);
margin:clamp(56px, 9vw, 120px) 0;
padding:clamp(48px, 8vw, 96px) 20px;
position:relative; overflow:hidden;
}
.dark-band::after{
content:''; position:absolute; inset:0; pointer-events:none;
background:
repeating-linear-gradient(90deg,
rgba(143,232,196,.06) 0 1px, transparent 1px 64px);
}
.db-in{ max-width:var(--read-w); margin:0 auto; position:relative; }
.dark-band h2{ color:var(--ink); }
.dark-band h2 em{ color:var(--mint); font-style:normal; }
.dark-band p{ color:rgba(243,246,244,.76); }
.dark-band .eyebrow-l{ color:var(--mint); }
/* 3. Лента предметов. Стоит там, где иначе получился бы список из
двенадцати запятых, который никто не дочитывает. */
/* Ширину и маркеры перебиваем осознанно: лента лежит внутри .page-sec,
а там у любого ul стоит мера 62 знака и квадратик перед пунктом —
для строки текста верно, для сетки предметов нет. */
.ob-strip,
.page-sec .ob-strip{
list-style:none; margin:clamp(28px, 5vw, 48px) 0 0; padding:0;
max-width:none;
display:grid; gap:14px;
grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
}
/* Строго четыре в ряд — для лент, где предметов восемь. Обычная лента
подбирает число колонок сама, и это верно почти везде; но восемь
штук она раскладывает как семь плюс один, и одинокая плитка во
второй строке читается как ошибка вёрстки.
Ниже 720 не включаем: там своя раскладка под узкий экран (правило
с minmax(94px) ниже по файлу), и четыре колонки на телефоне
превратятся в полоски. */
@media (min-width:720px){
/* Оба селектора с весом 0-2-0, как у правила выше: одного класса
мало — «.page-sec .ob-strip» перебивает его специфичностью, и
лента остаётся на auto-fit. Проверено: было семь колонок. */
.ob-strip.ob-strip--4,
.page-sec .ob-strip--4{ grid-template-columns:repeat(4, 1fr); }
}
.ob-cell::before,
.page-sec .ob-cell::before{ content:none; }
.ob-cell,
.page-sec .ob-cell{
padding-left:10px; margin-bottom:0;
}
.ob-cell{
display:grid; justify-items:center; gap:10px;
padding:18px 10px 14px;
border:1px solid var(--l-line); border-radius:16px;
background:rgba(255,255,255,.5);
transition:transform .3s cubic-bezier(.22,1,.36,1),
border-color .3s ease, background .3s ease;
}
.ob-cell .obj{ width:58px; }
.ob-cell span{
font-size:12.5px; line-height:1.25; text-align:center; color:var(--l-dim);
}
.ob-cell .ob-label{
display:grid; justify-items:center; gap:7px;
}
.ob-cell .ob-price{
display:block; max-width:100%; padding:5px 9px;
border:1px solid rgba(11,143,98,.26); border-radius:999px;
background:rgba(143,232,196,.18);
font-size:clamp(12px, .9vw, 13px); font-weight:700; line-height:1.25;
color:#07583f; font-variant-numeric:tabular-nums; white-space:normal;
}
.ob-cell:hover{
transform:translateY(-4px);
border-color:rgba(11,143,98,.34);
background:#fff;
}
.dark-band .ob-cell{
border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.04);
}
.dark-band .ob-cell span{ color:rgba(243,246,244,.66); }
.dark-band .ob-cell:hover{
background:rgba(143,232,196,.08); border-color:rgba(143,232,196,.4);
}
/* 4. Крупная врезка: одна мысль большим кеглем, без соседей.
Работает как вдох между двумя плотными кусками текста. */
.pg-claim{
max-width:var(--read-w); margin:clamp(44px, 7vw, 84px) auto;
padding:0;
display:grid; grid-template-columns:auto 1fr; gap:clamp(20px, 4vw, 44px);
align-items:start;
}
.pg-claim .cl-mark{
font-family:var(--hud-mono); font-size:11px; letter-spacing:.16em;
text-transform:uppercase; color:var(--mint-ink);
padding-top:.7em; white-space:nowrap;
}
.pg-claim p{
margin:0;
font-family:var(--font-display); font-weight:700;
font-size:clamp(21px, 3.1vw, 34px); line-height:1.25;
letter-spacing:-.01em; color:var(--l-ink);
}
.pg-claim p em{ color:var(--mint-ink); font-style:normal; }
/* Тёмная полоса выходит за колонку на всю ширину окна. clip вместо
hidden сознательно: hidden на body делает из него контейнер
прокрутки и убивает липкую шапку, clip — нет. */
body.inner{ overflow-x:clip; }
.inner-main > .dark-band,
.inner-main > .beyond{
width:100vw; max-width:none;
margin-inline:calc(50% - 50vw);
}
/* ── «в каталоге далеко не всё» ───────────────────────────────────
Сквозной блок всего сайта. Люди читают перечень и решают, что
список — это и есть предел. Здесь мы прямо говорим, что нет.
Стоит на каждой странице, но текст везде свой: одна и та же
фраза, повторённая девять раз, перестаёт читаться со второго. */
.beyond{
background:
linear-gradient(180deg, rgba(215,246,232,.55), rgba(215,246,232,0)),
var(--l-bg);
border-top:1px solid var(--l-line);
border-bottom:1px solid var(--l-line);
padding:clamp(44px, 7vw, 88px) 20px;
margin:clamp(28px, 4vw, 56px) 0 0;
}
.be-in{ max-width:var(--read-w); margin:0 auto; }
.be-in h2{ margin:10px 0 14px; font-size:clamp(22px, 2.8vw, 38px); }
.be-in > p{
margin:0; max-width:62ch;
font-size:clamp(14.5px, 1.15vw, 17px); line-height:1.66; color:var(--l-dim);
}
.be-chips{
list-style:none; margin:clamp(20px, 3vw, 30px) 0; padding:0;
display:flex; flex-wrap:wrap; gap:8px;
}
.be-chips li{
padding:7px 14px; border-radius:999px;
border:1px solid rgba(11,143,98,.28);
background:rgba(255,255,255,.6);
font-size:13.5px; color:var(--l-ink);
transition:transform .25s cubic-bezier(.22,1,.36,1),
background .25s ease, border-color .25s ease;
}
.be-chips li:hover{
transform:translateY(-2px);
background:var(--mint-soft); border-color:var(--mint-ink);
}
.be-foot{
margin:0 0 clamp(20px, 3vw, 26px); max-width:58ch;
font-size:clamp(14.5px, 1.15vw, 17px); line-height:1.66; color:var(--l-dim);
}
/* ── мелкая жизнь: то, что замечаешь, только когда этого нет ─────── */
/* Заголовок разделов подчёркивается растущей линией — она въезжает
вместе с самим блоком, а не мигает отдельно. */
.page-sec h2, .db-in h2, .be-in h2{ position:relative; }
.page-sec h2::after, .db-in h2::after, .be-in h2::after{
content:''; position:absolute; left:0; bottom:-10px;
height:2px; width:46px; background:var(--mint-ink);
transform-origin:left center;
}
.anim .page-sec h2::after,
.anim .db-in h2::after,
.anim .be-in h2::after{
transform:scaleX(0);
transition:transform .7s cubic-bezier(.22,1,.36,1) .18s;
}
.anim .reveal.in h2::after,
.anim .in > .db-in h2::after,
.anim .in > .be-in h2::after{ transform:scaleX(1); }
/* Карточка соседней страницы: стрелка выезжает под курсором.
Движение маленькое — оно подсказывает, что это ссылка, а не
развлекает. */
.next-card{ transition:transform .28s cubic-bezier(.22,1,.36,1),
border-color .28s ease, box-shadow .28s ease; }
.next-card:hover{ transform:translateY(-4px); }
.next-card i{ transition:transform .28s cubic-bezier(.22,1,.36,1); }
.next-card:hover i{ transform:translateX(5px); }
/* Врезка .note получает мятную полосу, которая наливается сверху вниз */
.anim .note{ position:relative; }
.anim .note::before{
content:''; position:absolute; left:-2px; top:0; bottom:0; width:2px;
background:var(--mint-ink); transform:scaleY(0); transform-origin:top;
transition:transform .8s cubic-bezier(.22,1,.36,1) .1s;
}
.anim .reveal.in .note::before{ transform:scaleY(1); }
@media (max-width: 900px){
.pg-split{ grid-template-columns:1fr; gap:22px; }
.pg-split.flip > .pg-art{ order:0; } /* на телефоне колонка одна */
.pg-art{ padding:6px; }
.pg-art .obj{ max-width:190px; }
.pg-art .art-tag{ position:static; display:block; margin-top:10px;
text-align:center; }
.pg-claim{ grid-template-columns:1fr; gap:10px; }
.pg-claim .cl-mark{ padding-top:0; }
.ob-strip{ grid-template-columns:repeat(auto-fit, minmax(94px, 1fr));
gap:10px; }
.ob-cell{ padding:14px 8px 12px; }
.ob-cell .obj{ width:46px; }
.ob-cell span{ font-size:11.5px; }
.ob-cell .ob-price{ padding:4px 7px; font-size:12px; }
}
/* Просьба системы «поменьше движения» отменяет всё разом. Это не
урезанная версия сайта — это тот же сайт, просто без тряски. */
@media (prefers-reduced-motion: reduce){
.anim .reveal, .anim .reveal-l, .anim .reveal-r,
.anim .reveal-kids > *{
opacity:1 !important; transform:none !important; transition:none;
}
.anim .obj path, .anim .obj circle,
.anim .obj ellipse, .anim .obj rect{ transition:none; }
.anim .obj .ac{ opacity:.42; transition:none; }
.anim .page-sec h2::after, .anim .db-in h2::after,
.anim .be-in h2::after{ transform:scaleX(1); transition:none; }
.anim .note::before{ transform:scaleY(1); transition:none; }
.next-card, .next-card i, .be-chips li, .ob-cell{ transition:none; }
}
/* ── типографика новых блоков ─────────────────────────────────────
Заголовки и абзацы внутри .page-sec уже настроены выше. Новые
блоки (колонка рядом с предметом, тёмная полоса) — те же правила,
просто в другом окружении: повторяем их здесь, чтобы текст не
менял размер от того, в какой блок его положили. */
.pg-txt h2, .db-in h2{
margin:0 0 clamp(14px, 2vw, 22px);
font-family:var(--font-display); font-weight:700;
font-size:clamp(22px, 2.4vw, 34px); line-height:1.15;
letter-spacing:-.02em;
}
.pg-txt h2 em, .db-in h2 em, .be-in h2 em{
font-style:normal; color:var(--mint-ink);
}
.dark-band h2 em{ color:var(--mint); }
.pg-txt h3, .db-in h3{
margin:clamp(20px, 3vw, 32px) 0 8px;
font-size:clamp(17px, 1.6vw, 22px);
}
.pg-txt p, .db-in p{
margin:0 0 14px; max-width:62ch;
font-size:clamp(14.5px, 1.15vw, 17px); line-height:1.68;
color:var(--l-dim);
}
.db-in p{ color:rgba(243,246,244,.76); }
.pg-txt p strong{ color:var(--l-ink); font-weight:600; }
.db-in p strong, .db-in li strong{ color:var(--ink); font-weight:600; }
.db-in ul, .db-in ol{
margin:0 0 16px; padding-left:0; list-style:none; max-width:62ch;
}
.db-in li{
position:relative; padding-left:30px; margin-bottom:10px;
font-size:clamp(14px, 1.1vw, 16px); line-height:1.6;
color:rgba(243,246,244,.76);
}
.db-in ol{ counter-reset:n; }
.db-in ol li{ counter-increment:n; }
.db-in ol li::before{
content:counter(n, decimal-leading-zero);
position:absolute; left:0; top:0;
font-family:var(--hud-mono); font-size:11px; color:var(--mint);
}
.db-in ul li::before{
content:''; position:absolute; left:0; top:.62em;
width:7px; height:7px; border:1px solid var(--mint);
}
.db-in .note{
background:rgba(143,232,196,.07);
border-left-color:var(--mint);
}
.db-in .note p{ color:rgba(243,246,244,.82); }
.anim .dark-band .note::before{ background:var(--mint); }
/* ── модификаторы обычной секции ──────────────────────────────────
Чтобы сменить ритм на странице, не нужно переписывать её разметку:
к .page-sec добавляется слово. dark — секция становится тёмной
полосой во всю ширину окна, split — текст встаёт рядом с
предметом. Так правка ритма стоит одну строку, а не перестройку
блока, и текст страницы остаётся читаемым в исходнике. */
/* Селектор с .inner-main нужен, чтобы перебить правило ширины
колонки чтения выше: там у секций с лентой и карточками своя
ширина, и без этого тёмная полоса схлопывалась обратно в колонку. */
.inner-main > .page-sec.dark,
.page-sec.dark{
width:100vw; max-width:none;
margin-inline:calc(50% - 50vw);
margin-block:clamp(40px, 6vw, 84px);
padding:clamp(44px, 7vw, 88px) max(20px, calc(50vw - var(--read-w) / 2));
background:var(--bg); color:var(--ink);
border-top:0;
position:relative; overflow:hidden;
}
.page-sec.dark + .page-sec{ border-top:0; }
.page-sec.dark::after{
content:''; position:absolute; inset:0; pointer-events:none;
background:repeating-linear-gradient(90deg,
rgba(143,232,196,.06) 0 1px, transparent 1px 64px);
}
.page-sec.dark > *{ position:relative; }
.page-sec.dark h2, .page-sec.dark h3{ color:var(--ink); }
.page-sec.dark h2 em{ color:var(--mint); }
.page-sec.dark p, .page-sec.dark li{ color:rgba(243,246,244,.76); }
.page-sec.dark p strong, .page-sec.dark li strong{ color:var(--ink); }
.page-sec.dark li::before{ border-color:var(--mint); color:var(--mint); }
.page-sec.dark .eyebrow-l{ color:var(--mint); }
.page-sec.dark .note{
background:rgba(143,232,196,.07); border-left-color:var(--mint);
}
.page-sec.dark .note p{ color:rgba(243,246,244,.82); }
.anim .page-sec.dark .note::before{ background:var(--mint); }
.page-sec.dark .obj .ac{ opacity:.3; }
.anim .page-sec.dark .obj.in .ac{ opacity:.3; }
/* Ссылка и подпись к предмету на тёмном: без этого они остаются
тёмно-серыми и на чёрном фоне просто исчезают. */
.page-sec.dark a{ color:var(--mint); }
.page-sec.dark a:hover{ color:#fff; }
.page-sec.dark .art-tag,
.dark-band .art-tag{ color:rgba(243,246,244,.6); }
.page-sec.dark .pg-art::before,
.dark-band .pg-art::before{
background:radial-gradient(circle at 50% 46%,
rgba(143,232,196,.16) 0%, rgba(143,232,196,0) 68%);
}
/* Предмет обтекается текстом, а не стоит во второй колонке сетки:
сетке пришлось бы заранее знать, сколько в секции абзацев, и любой
дописанный абзац ломал бы раскладку. Обтекание переживает любое
число абзацев. */
.page-sec.split{ overflow:hidden; }
.page-sec.split > .pg-art{
float:right; width:min(38%, 320px);
margin:0 0 18px clamp(20px, 4vw, 52px);
shape-outside:circle(52%);
}
.page-sec.split.flip > .pg-art{
float:left;
margin:0 clamp(20px, 4vw, 52px) 18px 0;
}
.page-sec.split > .pg-art .obj{ max-width:none; }
/* Мера в 62 знака держит длину строки в обычной колонке. Рядом с
предметом её держит сам предмет, а ограничение только оставило бы
между текстом и рисунком пустой коридор. */
.page-sec.split > p,
.page-sec.split > ul,
.page-sec.split > ol{ max-width:none; }
@media (max-width: 900px){
.page-sec.split > .pg-art,
.page-sec.split.flip > .pg-art{
float:none; width:auto; margin:18px auto 4px;
}
.page-sec.dark{ padding-inline:20px; }
}
/* Блок «в каталоге далеко не всё» на главной. Он идёт сразу за
отраслями — тоже светлый, — поэтому получает мягкую мятную
подложку: иначе два светлых блока подряд читаются как один
длинный, и мысль про «список не потолок» теряется в середине. */
.sec-any{
background:
linear-gradient(180deg, rgba(215,246,232,.7), rgba(215,246,232,0) 60%),
var(--l-bg);
}
.sec-any .be-chips{ margin:clamp(22px, 3vw, 32px) 0; }
.sec-any .be-foot{
margin:0 0 clamp(20px, 3vw, 26px); max-width:58ch;
font-size:clamp(14.5px, 1.15vw, 17px); line-height:1.66; color:var(--l-dim);
}
/* ==================================================================
ССЫЛКА ВНУТРИ ТЕКСТА
==================================================================
Ссылка в абзаце набирается вывеской и мятным — так её видно, не
вчитываясь, и она сразу читается как «наше», а не как случайное
синее подчёркивание браузера.
Что здесь НЕ трогаем: шапку, выкатное меню, подвал, крошки,
карточки-ссылки и кнопки. Это навигация, у неё свой рисунок; если
и её набрать вывеской, выделение перестанет что-либо значить.
Кегль оставляем прежний, а вот межбуквенное сжимаем: Unbounded
заметно шире Exo 2, и без этого ссылка распирает строку и ломает
ритм абзаца. */
.page-sec p a:not(.mbtn),
.page-sec li a:not(.mbtn),
.page-head .lead a:not(.mbtn),
.pg-txt p a:not(.mbtn),
.pg-txt li a:not(.mbtn),
.pg-claim p a:not(.mbtn),
.db-in p a:not(.mbtn),
.db-in li a:not(.mbtn),
.be-in p a:not(.mbtn),
.be-foot a:not(.mbtn),
.note p a:not(.mbtn),
.sec-head p a:not(.mbtn),
.sec-in > p a:not(.mbtn),
.ck-text a:not(.mbtn),
.wk-note a:not(.mbtn),
.page-cta p a:not(.mbtn){
font-family:var(--font-display);
font-weight:600;
letter-spacing:-.045em; /* вывеска шире текста — поджимаем */
color:var(--mint-ink);
text-decoration:none;
background-image:linear-gradient(var(--mint-ink), var(--mint-ink));
background-size:100% 1px;
background-position:0 calc(100% - 1px);
background-repeat:no-repeat;
transition:background-size .25s ease, color .2s ease,
background-color .2s ease;
padding:0 .06em;
border-radius:2px;
}
/* Наведение: подчёркивание уходит, вместо него мятная подложка.
Толще линию делать нельзя — она полезет на нижние выносные. */
.page-sec p a:not(.mbtn):hover,
.page-sec li a:not(.mbtn):hover,
.page-head .lead a:not(.mbtn):hover,
.pg-txt p a:not(.mbtn):hover,
.pg-txt li a:not(.mbtn):hover,
.pg-claim p a:not(.mbtn):hover,
.db-in p a:not(.mbtn):hover,
.db-in li a:not(.mbtn):hover,
.be-in p a:not(.mbtn):hover,
.be-foot a:not(.mbtn):hover,
.note p a:not(.mbtn):hover,
.sec-head p a:not(.mbtn):hover,
.sec-in > p a:not(.mbtn):hover,
.ck-text a:not(.mbtn):hover,
.wk-note a:not(.mbtn):hover,
.page-cta p a:not(.mbtn):hover{
background-size:100% 100%;
background-position:0 0;
color:var(--l-ink);
}
/* На тёмной подложке мятный текст читается, а тёмный на мятном — нет,
поэтому там наведение работает наоборот. */
.page-sec.dark p a,
.page-sec.dark li a,
.db-in p a,
.db-in li a,
.sec-dark .sec-head p a,
.ck-text a{
color:var(--mint);
background-image:linear-gradient(var(--mint), var(--mint));
}
.page-sec.dark p a:hover,
.page-sec.dark li a:hover,
.db-in p a:hover,
.db-in li a:hover,
.sec-dark .sec-head p a:hover,
.ck-text a:hover{ color:#08120e; }
/* ==================================================================
НОВОГОДНЯЯ СЦЕНА
==================================================================
Баннер над таблицей сроков: зимний лес, манекен с зонтом, сугробы.
Три слоя вместо одной картинки — чтобы при прокрутке они разъезжались
с разной скоростью, как на большом параллаксе выше по странице.
Сцена ничего не сообщает: весь смысл лежит текстом под ней. Поэтому
она aria-hidden, а высота ограничена — баннер не должен занимать
экран целиком, за ним сразу идут даты, ради которых блок и живёт. */
.ny-scene{
position:relative;
height:clamp(320px, 52vw, 560px);
overflow:hidden;
background:#cfe3f2; /* цвет неба: виден, пока грузится */
}
.ny-l{
position:absolute; inset:0;
background-repeat:no-repeat;
will-change:transform;
}
/* дальний план — лес. Взят с запасом по высоте, чтобы сдвиг не обнажил
край картинки. */
.ny-far{
background-image:url('../img/sezon-ng/ny-far.webp');
background-size:cover;
background-position:50% 42%;
transform:scale(1.08);
}
/* Манекен. Обёртка нужна, чтобы к фигуре можно было привязать «сухую»
зону: она задана в долях от обёртки и потому едет вместе с ней. */
.ny-figure{
left:auto; right:6%; top:auto; bottom:-2%;
width:auto; height:88%; aspect-ratio:1024 / 1536;
}
.ny-hero{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:contain; object-position:bottom center;
filter:drop-shadow(0 24px 34px rgba(30,60,90,.28));
}
/* Столб чистого воздуха под куполом: от верхней кромки зонта до земли.
Доли подобраны по самой картинке — купол на ней занимает верхнюю
четверть и почти всю ширину. Блок невидимый, он только говорит
снегу, куда не лететь. */
.ny-dry{
position:absolute;
left:7%; right:9%; top:2%; bottom:0;
pointer-events:none;
}
/* сугробы — передний план, приклеены к низу и шире кадра: при сдвиге
вбок не должно появиться пустоты по краям. */
.ny-drift{
top:auto; height:30%; left:-4%; right:-4%; bottom:-3%;
background-image:url('../img/sezon-ng/ny-snow.webp');
background-size:118% auto;
background-position:50% 0;
}
/* Затемнения нет: сцена светлая и должна остаться светлой. Вместо него
мягкий переход в тёмный низ блока, чтобы баннер не обрывался
линейкой поперёк экрана. */
.ny-scene::after{
content:''; position:absolute; left:0; right:0; bottom:0; height:56%;
z-index:5; /* поверх снега и сугробов */
background:linear-gradient(180deg,
rgba(11,13,12,0) 0%,
rgba(11,13,12,.42) 46%,
rgba(11,13,12,.86) 78%,
var(--bg) 100%);
pointer-events:none;
}
/* ── надпись поверх сцены ───────────────────────────────────────── */
/* Сцена и надпись лежат в одной ячейке сетки, друг на друге. Раньше
надпись «подтягивалась» на сцену отрицательным полем — и на другой
высоте экрана уезжала то на сугробы, то за нижний край. В общей
ячейке она просто прижата к низу сцены и никуда не денется. */
.ny-top{ display:grid; position:relative; }
.ny-top > .ny-scene{ grid-area:1 / 1; }
.ny-banner{
grid-area:1 / 1; align-self:end; justify-self:stretch;
z-index:6; /* выше снега, сугробов и затемнения */
width:100%; max-width:var(--sec-w); margin:0 auto;
padding:0 clamp(16px, 4vw, 56px) clamp(22px, 3.4vw, 44px);
}
/* Надпись-марка стоит на светлом небе, и одной тени ей мало: мятный
по белому не читается ни при какой тени. Поэтому у неё своя тёмная
плашка — маленькая, ровно по словам. */
.ny-banner .eyebrow-l{
display:inline-block; margin-bottom:12px;
color:var(--mint);
background:rgba(8,18,14,.66);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
border:1px solid rgba(143,232,196,.34);
padding:6px 12px;
clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px,
100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.ny-big{
margin:0 0 clamp(18px, 3vw, 26px);
font-family:var(--font-display); font-weight:700;
font-size:clamp(26px, 4.6vw, 54px); line-height:1.06;
letter-spacing:-.035em; color:var(--ink);
text-shadow:0 2px 18px rgba(8,18,14,.5);
}
.ny-big em{ font-style:normal; color:var(--mint); }
@media (max-width: 700px){
/* На телефоне сцена выше: под манекеном должно остаться место
под надпись, иначе она ложится ему на ноги. */
.ny-scene{ height:clamp(420px, 108vw, 560px); }
/* Ноги должны уходить за сугробы, иначе манекен висит в воздухе.
Слой снега прижимаем к низу и показываем его ВЕРХНЮЮ кромку
(position 50% 0), а ступни ставим ниже этой кромки. */
.ny-figure{ right:-2%; height:56%; bottom:11%; }
.ny-drift{
background-size:150% auto; background-position:50% 0;
height:40%; bottom:0;
}
.ny-big{ text-shadow:0 2px 14px rgba(8,18,14,.75); }
}
/* Просьба «поменьше движения» останавливает разъезд слоёв. Сцена
остаётся на месте — картинкой, какой её и задумывали. */
@media (prefers-reduced-motion: reduce){
.ny-l{ transform:none !important; will-change:auto; }
.ny-far{ transform:scale(1.08) !important; }
}
/* ── манекен над карточкой «выставки и конференции» ───────────────
Он облокачивается на верхний край карточки и выходит за него.
Сама карточка обрезает всё по скруглению (overflow:hidden), поэтому
картинка живёт не внутри неё, а в обёртке .dir-cell рядом — и
ложится на карточку сверху.
Обёртка занимает ту же ячейку сетки, что занимала карточка, так что
раскладка блока не меняется: добавилось только поле сверху под саму
фигуру. */
.dir-cell{ position:relative; display:flex; }
.dir-cell > .dir{ flex:1 1 auto; }
/* Поле сверху обязано быть больше самой фигуры, иначе она наезжает на
текст над блоком. Держим их одной парой значений: поле = высота
фигуры плюс запас. */
.dir-grid{ --geko-w:clamp(170px, 20vw, 300px); --geko-pad:clamp(150px, 21vw, 310px); }
.dir-cell-wide{ grid-column:span 3; padding-top:var(--geko-pad); }
/* Стоит не над окном слева, а над самой надписью «Выставки и
конференции»: руки ложатся ровно на верхнюю кромку карточки в том
месте, где под ней начинается заголовок, — получается, что манекен
на него и облокотился. 44% ширины карточки занимает окно, поэтому
отсчитываем от него. */
.dir-geko{
position:absolute; z-index:3;
left:calc(44% + clamp(8px, 2vw, 34px));
/* Перекрытие считаем от ширины фигуры, а не фиксированными
пикселями: предплечья на снимке проходят примерно в 15% от низа
кадра, и опустить надо ровно настолько, чтобы они легли на
кромку карточки, а кисти свесились перед ней. При фиксированном
сдвиге на другом размере экрана манекен снова повисал бы. */
bottom:calc(100% - var(--geko-pad) - var(--geko-w) * 0.15);
width:var(--geko-w); height:auto;
filter:drop-shadow(0 22px 26px rgba(16,40,32,.3));
transition:transform .45s cubic-bezier(.22,1,.36,1);
pointer-events:none; /* карточка целиком — ссылка */
}
/* Наведение: манекен чуть подаётся вперёд вместе с карточкой. */
@media (hover:hover){
.dir-cell:hover .dir-geko{ transform:translateY(-5px); }
}
@media (max-width:900px){
.dir-cell-wide{ grid-column:auto; }
}
@media (prefers-reduced-motion: reduce){
.dir-geko{ transition:none; }
.dir-cell:hover .dir-geko{ transform:none; }
}
/* ── холст со снегом ──────────────────────────────────────────────
Лежит выше фона и фигуры, но ниже надписи: снег идёт перед
манекеном, а текст читается поверх снега. */
.snow-cv{
position:absolute; inset:0; z-index:3;
pointer-events:none;
}
.ny-scene > .ny-drift{ z-index:4; } /* сугробы всё-таки ближе снега */
/* ── снег на буквах заголовка ─────────────────────────────────────
Поверх заголовка лежит его же копия, залитая белым. Ей задана
маска-картинка: полоса с бугристым нижним краем, высотой в одну
строку и повторяющаяся вниз. Из-за этого белым остаётся только
верх букв — как налипший снег.
Копия выключена из потока (position:absolute) и повторяет строку в
строку, потому что набрана тем же текстом теми же правилами: любая
правка заголовка автоматически меняет и снежную копию. */
.ny-big{ position:relative; }
.ny-cap, .ny-txt{ display:block; }
.ny-cap{
position:absolute; left:0; right:0; top:0;
color:#fff;
/* Обводка расширяет белую форму за контур буквы, и шапка выступает
наружу, как налипший снег, а не просто закрашивает верх. */
-webkit-text-stroke:2px #fff;
transform:translateY(-0.02em);
-webkit-mask-image:url('../img/sezon-ng/snow-cap.png');
mask-image:url('../img/sezon-ng/snow-cap.png');
/* Шаг маски обязан совпадать с высотой строки до сотых: маска
повторяется вниз, и расхождение в две сотых em копится от строки
к строке — к третьей снег уже висит отдельно от букв. Поэтому
высоту строки и шаг маски держим одной переменной. */
-webkit-mask-size:auto var(--cap-step, 1.06em);
mask-size:auto var(--cap-step, 1.06em);
-webkit-mask-repeat:repeat;
mask-repeat:repeat;
/* Сдвиг вниз обязателен: в строке над прописными есть пустое поле,
и без него снег ложился в воздух над буквами, а не на них. */
-webkit-mask-position:0 0.14em;
mask-position:0 0.14em;
/* Голубоватая подсветка снизу: на белой строке белый снег иначе
сливается с буквой и виден только на мятной. */
filter:drop-shadow(0 1px 0 rgba(120,170,210,.85))
drop-shadow(0 2px 3px rgba(40,80,120,.35));
pointer-events:none;
}
/* Выделенная часть под снегом остаётся мятной только в нижнем слое:
в снежной копии всё белое, иначе снег на этих словах позеленеет. */
.ny-cap em{ color:#fff; font-style:normal; }
/* ==================================================================
ШАПКА СТРАНИЦЫ «НОВОГОДНИЙ МЕРЧ»
==================================================================
Те же три слоя, что в блоке на главной, но раскладка зеркальная:
там манекен справа и надпись под ним, здесь он слева, а заголовок
стоит рядом. Повторять главную один в один нельзя — переход на
страницу читался бы как сбой, будто попал не туда. */
.nyp{
position:relative;
width:100vw; max-width:none;
margin-inline:calc(50% - 50vw);
margin-bottom:clamp(6px, 1.5vw, 20px);
display:grid;
}
.nyp-scene{
grid-area:1 / 1;
position:relative; overflow:hidden;
height:clamp(400px, 46vw, 620px);
background:#cfe3f2;
}
.nyp-l{ position:absolute; inset:0; background-repeat:no-repeat; }
/* Лес взят другим куском кадра, чем на главной: там центр, здесь
правая часть с просветом — иначе две сцены выглядят одинаково. */
.nyp-far{
background-image:url('../img/sezon-ng/ny-far.webp');
background-size:cover; background-position:78% 46%;
}
.nyp-figure{
left:clamp(-24px, 2vw, 40px); right:auto; top:auto; bottom:-1%;
width:auto; height:86%; aspect-ratio:1024 / 1536;
}
.nyp-hero{
position:absolute; inset:0; width:100%; height:100%;
object-fit:contain; object-position:bottom center;
filter:drop-shadow(0 26px 32px rgba(30,60,90,.3));
}
.nyp-dry{ position:absolute; left:7%; right:9%; top:2%; bottom:0; }
.nyp-drift{
top:auto; height:30%; left:-4%; right:-4%; bottom:-3%;
background-image:url('../img/sezon-ng/ny-snow.webp');
background-size:118% auto; background-position:50% 0;
z-index:4;
}
/* Справа кадр уходит в цвет страницы: заголовок должен читаться на
любой картинке, а не только на удачном её куске. */
.nyp-scene::after{
content:''; position:absolute; inset:0; z-index:5; pointer-events:none;
background:linear-gradient(260deg,
var(--l-bg) 10%, rgba(238,242,236,.96) 34%,
rgba(238,242,236,.62) 52%, rgba(238,242,236,0) 78%);
}
/* Заголовок лежит в той же ячейке сетки поверх сцены, прижат вправо */
.nyp-head{
grid-area:1 / 1; z-index:6;
align-self:center; justify-self:end;
width:min(var(--read-w), 100%);
margin:0 auto; padding:0 clamp(16px, 4vw, 56px);
display:grid; justify-items:end; text-align:right;
}
/* Мера в em, а не в ch: ch у широкой вывески даёт совсем не ту
ширину, которую ожидаешь, и заголовок уезжал на фигуру. */
.nyp-head h1{ max-width:8.6em; position:relative; }
.nyp-head .lead{ max-width:40ch; color:var(--l-ink); }
.nyp-head .eyebrow-l{ display:block; margin-bottom:12px; }
/* Снежная копия заголовка выравнивается по правому краю вместе с ним */
.nyp-head .ny-cap{ left:auto; right:0; text-align:right; width:100%; }
.nyp-head .ny-cap em{ color:#fff; }
.nyp-head .ny-cap,
.nyp-head .ny-txt{ display:block; }
/* На светлом фоне снег белым по чёрному тексту не читается без
контура — даём ему тонкую холодную обводку. */
.nyp-head .ny-cap{
filter:drop-shadow(0 2px 0 rgba(74,124,168,1))
drop-shadow(0 4px 6px rgba(20,60,100,.45));
}
@media (max-width: 900px){
.nyp-scene{ height:clamp(420px, 96vw, 560px); }
.nyp-figure{ left:auto; right:0; height:52%; bottom:16%; }
.nyp-drift{ height:38%; background-size:160% auto; }
.nyp-scene::after{
background:linear-gradient(180deg,
rgba(238,242,236,0) 22%, rgba(238,242,236,.72) 52%,
var(--l-bg) 78%);
}
.nyp-head{
align-self:end; justify-self:stretch;
justify-items:start; text-align:left;
padding-bottom:clamp(18px, 4vw, 30px);
}
.nyp-head .ny-cap{ left:0; right:auto; text-align:left; }
}
/* ==================================================================
НОВОГОДНИЙ БЛОК — ПЕРЕРАБОТКА
==================================================================
Блок стал баннером во весь экран: таблица сроков и наборы уехали на
свою страницу, здесь остались сцена, надпись и кнопка. Ниже —
правки поверх исходных правил, поэтому они идут последними в файле
и перебивают то, что написано выше. */
/* Во весь экран. svh, а не vh: на телефоне vh считается по окну без
адресной строки, и блок оказывался выше экрана — низ с кнопкой
уезжал под браузер. */
.sec-ny{ padding:0; }
.ny-top{ min-height:100svh; }
.ny-scene{ height:100svh; min-height:520px; }
/* Затемнение снизу больше не нужно: под баннером сразу другой блок,
а не продолжение тёмной секции. Оставляем лёгкую вуаль только под
самой надписью — иначе текст тонет в снегу. */
.ny-scene::after{
height:52%;
background:linear-gradient(180deg,
rgba(6,14,20,0) 0%,
rgba(6,14,20,.24) 44%,
rgba(6,14,20,.62) 100%);
}
/* Оверлей: уже по ширине, без рамок и теней. Читаемость держит не
обводка текста, а мягкая подложка с размытием — снег может лежать
на буквах сколько угодно, надпись останется читаемой. */
/* Подложка без краёв: не карточка с рамкой, а сгущение темноты,
которое растворяется к краям. Прямоугольник со скруглением читался
как окно поверх картинки — именно от него и просили избавиться.
Растворение делает маска: она же гасит и размытие, поэтому шва по
границе не остаётся. */
.ny-banner{
position:relative;
max-width:min(620px, 92vw);
margin:0 auto 0 clamp(10px, 6vw, 96px);
padding:clamp(26px, 3.4vw, 42px) clamp(30px, 3.6vw, 52px)
clamp(30px, 3.6vw, 46px);
align-self:center;
background:none; border:0; border-radius:0; box-shadow:none;
-webkit-backdrop-filter:none; backdrop-filter:none;
}
/* Подложка живёт отдельным слоем: маску нельзя вешать на сам блок —
она обрежет по краям и текст вместе с фоном. */
.ny-banner::before{
content:''; position:absolute; z-index:-1;
inset:-14% -18%;
background:radial-gradient(58% 54% at 42% 50%,
rgba(6,14,18,.66) 0%, rgba(6,14,18,.52) 52%,
rgba(6,14,18,.14) 80%, rgba(6,14,18,0) 100%);
-webkit-backdrop-filter:blur(10px) saturate(1.06);
backdrop-filter:blur(10px) saturate(1.06);
-webkit-mask-image:radial-gradient(58% 54% at 42% 50%,
#000 46%, rgba(0,0,0,.6) 72%, transparent 100%);
mask-image:radial-gradient(58% 54% at 42% 50%,
#000 46%, rgba(0,0,0,.6) 72%, transparent 100%);
pointer-events:none;
}
.ny-banner .eyebrow-l{
display:block; margin-bottom:14px;
background:none; border:0; padding:0;
-webkit-backdrop-filter:none; backdrop-filter:none;
clip-path:none;
/* Мятный на светлом небе почти не виден — на подложке берём
светлее, ближе к белому с зеленцой. */
color:#d9f7ea;
text-shadow:0 1px 6px rgba(6,14,18,.7);
}
/* Цвета надписи — фирменные: белый, зелёный, салатовый. Тени нет:
её работу делает подложка блока. */
.ny-big{
font-size:clamp(30px, 5vw, 62px);
text-shadow:none;
margin-bottom:clamp(20px, 2.6vw, 30px);
}
.ny-big em{ color:#2ec98d; font-style:normal; } /* зелёный */
.ny-big b{ color:#c8f6e2; font-weight:700; } /* салатовый */
/* Снег на буквах остаётся белым и держится тонкой холодной кромкой —
на подложке этого достаточно, чтобы шапки читались как снег, а не
как выцветшие буквы. */
.ny-cap em, .ny-cap b{ color:#fff; font-style:normal; font-weight:700; }
.ny-cap{
filter:drop-shadow(0 1px 0 rgba(110,165,205,.9))
drop-shadow(0 2px 4px rgba(20,50,80,.45));
}
@media (max-width: 700px){
.ny-banner{
margin-inline:clamp(12px, 4vw, 20px);
max-width:none;
padding:clamp(18px, 4vw, 24px);
}
.ny-big{ font-size:clamp(26px, 8.4vw, 40px); }
}
/* ==================================================================
ПОЛНОЭКРАННАЯ ШАПКА ВНУТРЕННЕЙ СТРАНИЦЫ
==================================================================
Та же сцена, что у баннера на главной: дальний план, предмет,
сугробы — и снег поверх. Каждый слой едет со своей скоростью, от
этой разницы и возникает глубина.
Дальний кадр пока общий на все страницы: своих снимков под каждую
у нас нет. Он вынесен в переменную, поэтому подмена на свой кадр —
это одна строка в CSS, а не перевёрстка. */
.pgh{
position:relative; display:grid;
width:100vw; max-width:none;
margin-inline:calc(50% - 50vw);
margin-bottom:clamp(10px, 2vw, 26px);
/* Размер сцены длинами, а не процентами.
Пробовали жёсткий кадр с постоянными пропорциями: тогда всё —
рост фигур, отступы, колонка и кегль — считалось от одной
величины, и расстановка держалась на любом мониторе точь-в-точь.
От этого отказались намеренно. Заголовок при таком кадре
масштабируется вместе с картинкой: на большом мониторе он
становится непомерным, на маленьком мелким. Пусть лучше текст
ведёт себя как везде на сайте, а фигуры стоят чуть иначе — они и
задуманы висящими на разной глубине, и разница в паре процентов
там ничего не ломает.
Что от кадра осталось и уходить не должно: сами величины. Пока
фигура и её вуаль описывались процентами, они разъезжались на два
десятка точек, потому что проценты в разных свойствах считаются
от разного (у left — ширина родителя, у mask-position — разница
между родителем и картинкой). С длинами разъезжаться нечему. */
--sc-w:100vw;
--sc-h:max(100svh, 480px);
}
.pgh-scene{
grid-area:1 / 1;
position:relative; overflow:hidden;
height:var(--sc-h);
background:#0e1a20;
}
.pgh-l{ position:absolute; inset:0; background-repeat:no-repeat; }
/* Дальний план. Пока фотографии раздела нет — не зимний кадр и не
серая заглушка, а тот же тёмный воздух с мятным светом, что в
ролике на главной. Появится снимок — подставляется одной строкой
через --pgh-img, остальное менять не придётся. */
.pgh-far{
background-image:var(--pgh-img, none);
background-size:cover; background-position:50% 46%;
background-color:#0a1310;
}
.pgh-scene{
background:
radial-gradient(90% 70% at 78% 22%, rgba(143,232,196,.16), transparent 62%),
radial-gradient(70% 60% at 12% 88%, rgba(86,140,190,.14), transparent 66%),
linear-gradient(180deg, #0b1512 0%, #0a1210 62%, #0b0d0c 100%);
}
/* Приборная сетка — тот же язык, что на кадрах и в карточках. */
.pgh-grid{
z-index:2; opacity:.5;
background-image:
linear-gradient(rgba(143,232,196,.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(143,232,196,.09) 1px, transparent 1px);
background-size:64px 64px;
-webkit-mask-image:radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 100%);
mask-image:radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 100%);
}
/* Мятная вуаль поверх кадра — чтобы шапка читалась как часть сайта,
а не как вставленная чужая фотография. */
.pgh-scene::before{
content:''; position:absolute; inset:0; z-index:6;
background:
linear-gradient(180deg, rgba(8,16,20,.46) 0%, rgba(8,16,20,.14) 34%,
rgba(8,16,20,.58) 68%, rgba(8,16,20,.92) 100%),
radial-gradient(120% 80% at 74% 30%, rgba(143,232,196,.14), transparent 62%);
pointer-events:none;
}
/* Предмет — крупным контуром, как отметка на приборе. */
.pgh-figure{
left:auto; right:clamp(12px, 6vw, 110px); top:auto; bottom:8%;
width:min(38vw, 420px); height:auto; aspect-ratio:1 / 1;
z-index:3; opacity:.9;
}
.pgh-obj{ color:rgba(255,255,255,.92); stroke-width:2.2; }
.pgh-obj .ac{ fill:var(--mint); opacity:.2; }
.anim .pgh-obj.in .ac{ opacity:.2; }
/* ── ЛЮДИ НА ПЕРВОМ ЭКРАНЕ ──────────────────────────────────────
Фигуры стоят на полу кадра: снимки обрезаны по силуэту, поэтому
низ файла — это подошва, и bottom:0 ставит их ровно на пол.
Все числа приходят из разметки переменными, а сама раскладка
лежит в _tools/pages/pgh_scene.py. Здесь только механика: где у
фигуры точка отсчёта и что с ней делать на узком экране.
Слой один на всех, и он же едет при прокрутке (см. reveal.js):
фигуры должны двигаться вместе, иначе сцена рассыпается. */
/* ТРИ ПЛАНА, и разница между ними — не в порядке, а в том, где
проходит затемняющая вуаль. Вуаль это .pgh-scene::before, шестой
слой внутри сцены; она и приглушает фигуры, вписывая их в кадр.
тень — пятый слой, ПОД вуалью. Фигура приглушена, как фон.
свет — седьмой слой, НАД вуалью, но всё ещё внутри сцены, а сцена
целиком лежит под заголовком. Фигура яркая, текст поверх.
перед — отдельный слой рядом со сценой. Выше заголовка. Изнутри
сцены туда не подняться: у неё свой контекст наложения
(will-change:transform), и любой z-index остаётся внутри. */
.pgh-ludi{ z-index:5; }
.pgh-ludi-svet{ z-index:7; }
.pgh-ludi-pered{
position:absolute; inset:0; z-index:8;
overflow:hidden; pointer-events:none;
}
/* Вуаль для фигур, вынесенных перед текстом. Настоящую на них не
натянуть — она осталась внизу, под заголовком, — поэтому здесь её
точная копия, обрезанная по силуэтам.
Копия лежит на всю сцену (inset:0 у .pgh-ludi-pered — это тот же
прямоугольник, что у .pgh-scene), поэтому проценты в градиенте
попадают ровно туда же, где они на фоне: у пола глухо, на уровне
груди почти прозрачно. Ничего не пересчитывается, и цвет совпадает
с фигурами за текстом сам собой.
Обрезка — маской по тем же webp: снимки вырезаны по контуру, их
альфа и есть силуэт. Размер и позиция маски повторяют height/left/
bottom фигуры один в один, потому что считаются от той же коробки. */
.pgh-ten{
position:absolute; inset:0; z-index:20; pointer-events:none;
background:
linear-gradient(180deg, rgba(8,16,20,.46) 0%, rgba(8,16,20,.14) 34%,
rgba(8,16,20,.58) 68%, rgba(8,16,20,.92) 100%),
radial-gradient(120% 80% at 74% 30%, rgba(143,232,196,.14), transparent 62%);
-webkit-mask-image:var(--m); mask-image:var(--m);
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-size:auto calc(var(--hn, 64) * var(--sc-h) / 100);
mask-size:auto calc(var(--hn, 64) * var(--sc-h) / 100);
}
/* Позиция маски — те же числа, что у самой фигуры ниже, только через
другое свойство. Правят их парой.
Считается всё от левого верхнего угла, потому что так проценты и
длины складываются в одном calc. Правило перевода простое:
в mask-position 0 % ставит картинку к левому краю, 100 % — к
правому, 50 % — ровно по центру. Дальше прибавляется отступ. */
.pgh-ten--l{
-webkit-mask-position:calc(var(--xn, 0) * var(--sc-w) / 100)
calc(100% - var(--bn, 0) * var(--sc-h) / 100);
mask-position:calc(var(--xn, 0) * var(--sc-w) / 100)
calc(100% - var(--bn, 0) * var(--sc-h) / 100);
}
.pgh-ten--r{
-webkit-mask-position:calc(100% - var(--xn, 0) * var(--sc-w) / 100)
calc(100% - var(--bn, 0) * var(--sc-h) / 100);
mask-position:calc(100% - var(--xn, 0) * var(--sc-w) / 100)
calc(100% - var(--bn, 0) * var(--sc-h) / 100);
}
.pgh-ten--c{
-webkit-mask-position:calc(50% + var(--xn, 0) * var(--sc-w) / 100)
calc(100% - var(--bn, 0) * var(--sc-h) / 100);
mask-position:calc(50% + var(--xn, 0) * var(--sc-w) / 100)
calc(100% - var(--bn, 0) * var(--sc-h) / 100);
}
/* Висящая фигура отсчитывается от верха, а не от пола. */
.pgh-ten--v{
-webkit-mask-position:calc(50% + var(--xn, 0) * var(--sc-w) / 100)
calc(var(--bn, 0) * var(--sc-h) / 100);
mask-position:calc(50% + var(--xn, 0) * var(--sc-w) / 100)
calc(var(--bn, 0) * var(--sc-h) / 100);
}
/* Зеркальной фигуре переворачиваем весь слой: тогда переворачивается
и силуэт в маске. Позиция при этом считается от противоположного
края, поэтому в разметке сторона у неё указана наоборот. */
.pgh-ten--zerk{ transform:scaleX(-1); }
/* Тень у вынесенной вперёд фигуры такая же, как у остальных, и это
намеренно. Соблазн приглушить её есть: вуаль обрезана по силуэту и
тень не накрывает. Но тень падает на соседей, и если у одной фигуры
она слабее, вокруг неё появляется светлый ореол — глаз читает его
как свечение, хотя это просто недостающая чужая тень. */
.pgh-chel{
position:absolute;
bottom:calc(var(--bn, 0) * var(--sc-h) / 100);
height:calc(var(--hn, 64) * var(--sc-h) / 100);
width:auto; max-width:none;
z-index:var(--z, 4);
object-fit:contain; object-position:bottom center;
/* Тень не для красоты: без неё фигура висит над полом, потому что
на снимке своей тени нет вовсе. */
filter:drop-shadow(0 26px 44px rgba(0,0,0,.55));
pointer-events:none; -webkit-user-drag:none; user-select:none;
}
.pgh-chel--l{ left:calc(var(--xn, 0) * var(--sc-w) / 100); }
.pgh-chel--r{ right:calc(var(--xn, 0) * var(--sc-w) / 100); }
/* Сдвиг от середины задаём отступом, а не сдвигом: проценты у
transform считаются от ширины самой фигуры, а нам нужна ширина
экрана — иначе одно и то же число двигает разных людей по-разному. */
.pgh-chel--c{
left:50%; transform:translateX(-50%);
margin-left:calc(var(--xn, 0) * var(--sc-w) / 100);
}
/* Отражение по горизонтали. Нужно, когда фигуру переносят на другую
сторону кадра: человек, снятый вполоборота вправо, у левого края
смотрит из кадра наружу, а зеркальный — внутрь, на заголовок. */
.pgh-chel--zerk{ transform:scaleX(-1); }
.pgh-chel--c.pgh-chel--zerk,
.pgh-chel--v.pgh-chel--zerk{ transform:translateX(-50%) scaleX(-1); }
/* Висит сверху — трос, а не пол. */
.pgh-chel--v{
top:calc(var(--bn, 0) * var(--sc-h) / 100);
bottom:auto; left:50%; transform:translateX(-50%);
margin-left:calc(var(--xn, 0) * var(--sc-w) / 100);
object-position:top center;
}
/* ── ЧЕТЫРЕ РАЗМЕРА ЭКРАНА ───────────────────────────────────────
Сцена трёхмерная: кто-то стоит дальше и потому мельче и выше от
нижнего края, кто-то идёт на зрителя и потому крупнее, кто-то висит
на тросе, кто-то сидит на строке заголовка. Пересчитать такую
композицию из одной пропорции окна в другую нельзя — глубина
рассыпается. Поэтому раскладок четыре, каждая собрана руками, и
лежат они в _tools/pages/pgh_scene.py.
Здесь только выбор набора. Прежние правила «спрятать всех, кроме
крайних» убраны намеренно: состав фигур теперь часть раскладки, а
не следствие правила в стилях. На телефоне в кадре один человек не
потому, что остальных скрыли, а потому что их там нет.
Границы повторяют RAZMERY в pgh_scene.py — правят парой. */
.pgh-r{ display:none; }
@media (min-width: 1600px){ /* большой экран */
.pgh-r--b{ display:block; }
.pgh{
--t-x:var(--b-t-x, 0); --t-y:var(--b-t-y, 10);
--t-w:var(--b-t-w, 72); --t-h:var(--b-t-h, 24);
--t-we:var(--b-t-we, var(--t-w)); --t-wh:var(--b-t-wh, var(--t-w));
--t-wl:var(--b-t-wl, var(--t-w));
--t-ze:var(--b-t-ze, 7); --t-zh:var(--b-t-zh, 7);
--t-zl:var(--b-t-zl, 7);
--t-ke:var(--b-t-ke, 11); --t-kh:var(--b-t-kh, 56);
--t-kl:var(--b-t-kl, 19);
}
}
@media (min-width: 1200px) and (max-width: 1599px){ /* ноутбук */
.pgh-r--n{ display:block; }
.pgh{
--t-x:var(--n-t-x, 0); --t-y:var(--n-t-y, 10);
--t-w:var(--n-t-w, 72); --t-h:var(--n-t-h, 26);
--t-we:var(--n-t-we, var(--t-w)); --t-wh:var(--n-t-wh, var(--t-w));
--t-wl:var(--n-t-wl, var(--t-w));
--t-ze:var(--n-t-ze, 7); --t-zh:var(--n-t-zh, 7);
--t-zl:var(--n-t-zl, 7);
--t-ke:var(--n-t-ke, 11); --t-kh:var(--n-t-kh, 50);
--t-kl:var(--n-t-kl, 18);
}
}
@media (min-width: 700px) and (max-width: 1199px){ /* планшет */
.pgh-r--p{ display:block; }
.pgh{
--t-x:var(--p-t-x, 0); --t-y:var(--p-t-y, 10);
--t-w:var(--p-t-w, 72); --t-h:var(--p-t-h, 28);
--t-we:var(--p-t-we, var(--t-w)); --t-wh:var(--p-t-wh, var(--t-w));
--t-wl:var(--p-t-wl, var(--t-w));
--t-ze:var(--p-t-ze, 7); --t-zh:var(--p-t-zh, 7);
--t-zl:var(--p-t-zl, 7);
--t-ke:var(--p-t-ke, 11); --t-kh:var(--p-t-kh, 42);
--t-kl:var(--p-t-kl, 17);
}
}
@media (max-width: 699px){ /* телефон */
.pgh-r--t{ display:block; }
.pgh{
--t-x:var(--t-t-x, 0); --t-y:var(--t-t-y, 7);
--t-w:var(--t-t-w, 72); --t-h:var(--t-t-h, 38);
--t-we:var(--t-t-we, var(--t-w)); --t-wh:var(--t-t-wh, var(--t-w));
--t-wl:var(--t-t-wl, var(--t-w));
--t-ze:var(--t-t-ze, 7); --t-zh:var(--t-t-zh, 7);
--t-zl:var(--t-t-zl, 7);
--t-ke:var(--t-t-ke, 11); --t-kh:var(--t-t-kh, 32);
--t-kl:var(--t-t-kl, 16);
}
}
/* Сугробов и снега на обычных страницах нет: зима живёт в сезонном
блоке на главной и на новогодней странице, а не во всём сайте. */
/* Заголовок лежит в той же ячейке сетки, что и сцена, и держится той
же колонки чтения, что весь остальной текст страницы — иначе он
съезжает относительно блоков под ним. */
/* Положение и ширина текстового блока приходят из той же таблицы,
что и фигуры: их подбирают вместе, потому что весь смысл сцены —
как манекен стоит относительно заголовка.
Блок вынут из потока сетки и поставлен абсолютно. Иначе отступ
снизу пришлось бы задавать полями, а проценты у полей считаются
от ШИРИНЫ родителя, а не от высоты, — и на разных экранах текст
уезжал бы по вертикали сам по себе. У absolute с bottom проценты
честно считаются от высоты.
Сдвиг вбок — полем, а не сдвигом: у transform проценты считаются
от ширины самого блока, а нам нужна ширина кадра.
Кегли трёх частей — надстрочника, заголовка и лида — задаются
числами и своим на каждый размер экрана, как и всё остальное на
первом экране. Не clamp'ом: clamp тянет кегль от ширины окна, и
подобранная композиция от этого плывёт, а подправить её точечно
нечем. Числа — те же, что были у clamp'а в верхней точке: 11, 56
и 19 точек.
Ограничения ширины в знаках (20ch у заголовка, 56ch у лида) здесь
сняты намеренно. Они держали строку короткой независимо от рамки,
и расширение рамки не убирало переносы — а именно это и нужно,
когда рамку двигают руками. Ширину задаёт рамка, и только она. */
/* ОДНА РАМКА. Три части стояли врозь, каждая на своих числах, и
двигать текст стало нечем: за что ни возьмись — едет одна треть, а
composition держится на всех трёх сразу. Здесь рамка снова одна, а
части внутри неё идут потоком, как в обычном блоке.
Рамка — прямоугольник: сдвиг, низ, ширина, высота. Ширина решает,
где переносятся строки. Высота — не украшение: свободное место
внутри рамки раздаётся между частями поровну (space-between), и
растянуть рамку значит развести надстрочник, заголовок и абзац.
Это и есть та самая регулировка просвета, только одним числом и
без риска: потоку части не дадут ни наехать друг на друга, ни
поменяться местами.
Высота задана как min-height, а не height. Если текст на каком-то
экране переносится сильнее и не влезает, рамка вырастет сама, и
абзац не окажется поверх заголовка. */
.pgh > .page-head{
/* z-index у рамки НЕТ намеренно. Со своим номером она заводит
контекст наложения, и слои частей внутри перестают спорить с
фигурами: любой номер остаётся внутри рамки. Без него части
считаются наравне с «перед» (8) и со сценой, и манекен может
перекрыть заголовок, оставшись за абзацем. */
position:absolute;
/* Середина рамки стоит на 50% + сдвиг, но считаем это через left,
а НЕ через transform:translateX(-50%). Сдвиг преобразованием
заводит контекст наложения — даже без z-index, — и слои частей
оказывались заперты внутри рамки: манекен «перед» накрывал весь
текст разом, а кнопки слоя не делали ничего. */
left:calc(50% + (var(--t-x, 0) - var(--t-w, 72) / 2)
* var(--sc-w) / 100);
bottom:calc(var(--t-y, 10) * var(--sc-h) / 100);
width:calc(var(--t-w, 72) * var(--sc-w) / 100);
min-height:calc(var(--t-h, 0) * var(--sc-h) / 100);
display:flex; flex-direction:column; justify-content:space-between;
margin:0; padding:0; border-bottom:0;
pointer-events:none;
}
/* Слой у части свой. Ниже 8 — фигура плана «перед» её накроет, выше
8 — часть выйдет поверх фигуры. Ничем, кроме порядка наложения,
номер не управляет: приглушение так и остаётся делом плана. */
.pgh > .page-head > *{ max-width:none; position:relative; }
/* Ширина и кегль — у каждой части свои. Абзац часто нужно сузить,
а заголовок оставить во всю рамку: общая ширина этого не давала.
Своей ширины у части нет — берёт ширину рамки. Приставки e/h/l —
те же, что в таблице TEKST. */
.pgh > .page-head .eyebrow-l{
width:calc(var(--t-we, var(--t-w, 72)) * var(--sc-w) / 100);
font-size:calc(var(--t-ke, 11) * 1px);
z-index:var(--t-ze, 7);
}
.pgh > .page-head h1{
width:calc(var(--t-wh, var(--t-w, 72)) * var(--sc-w) / 100);
font-size:calc(var(--t-kh, 56) * 1px);
z-index:var(--t-zh, 7);
}
.pgh > .page-head .lead{
width:calc(var(--t-wl, var(--t-w, 72)) * var(--sc-w) / 100);
font-size:calc(var(--t-kl, 19) * 1px);
z-index:var(--t-zl, 7);
}
/* Ширины у частей свои, поэтому растягивать их по рамке нельзя —
иначе заданная ширина ничего не решала бы. */
.pgh > .page-head{ align-items:flex-start; }
.pgh--tc > .page-head{ align-items:center; }
/* Текст по центру своей рамки, когда так стоит в таблице. Полей auto
здесь быть не должно: они спорили бы со сдвигом рамки. */
.pgh--tc > .page-head{ text-align:center; }
.pgh .page-head h1{ color:var(--ink); }
.pgh .page-head h1 em{ color:var(--mint); }
.pgh .page-head .lead{ color:rgba(243,246,244,.82); }
.pgh .page-head .eyebrow-l{ color:var(--mint); }
/* Крошки лежат над сценой, поэтому им нужен светлый цвет — на тёмном
кадре тёмная строка не видна вовсе. */
.inner-main > .crumbs{
position:relative; z-index:8;
margin-bottom:calc(-1 * clamp(18px, 3vw, 34px));
}
.has-hero .crumbs,
.has-hero .crumbs b{ color:rgba(243,246,244,.72); }
.has-hero .crumbs a{ color:var(--mint); }
.has-hero .crumbs a:hover{ color:#fff; }
@media (max-width: 700px){
/* Высоту сцены на телефоне задаём через --sc-h, а не свойством.
От --sc-h считаются и рост фигур, и низ каждой части текста; если
сцена ниже, а переменная нет, всё внутри считается от чужой
высоты и уезжает вверх. Такое уже случилось однажды. */
.pgh{ --sc-h:max(72svh, 380px); }
.pgh-figure{
right:auto; left:50%; transform:translateX(-50%);
width:min(58vw, 260px); bottom:22%; opacity:.7;
}
/* Прежнее правило «колонка во всю ширину» убрано: ширина и сдвиг
каждой части текста теперь свои и на телефоне тоже — они лежат в
телефонной раскладке, а не задаются здесь общим махом. */
}
@media (prefers-reduced-motion: reduce){
.pgh-l, .nyp-l{ transform:none !important; }
}
/* На светлой шапке новогодней страницы цвета те же, что на главной,
но зелёный берём тёмный: салатовый по светлому фону не читается. */
.nyp-head h1 em{ color:var(--mint-ink); font-style:normal; }
.nyp-head h1 b{ color:#17a877; font-weight:700; }
.nyp-head .ny-cap em,
.nyp-head .ny-cap b{ color:#fff; }
/* ==================================================================
НОВОГОДНЕЕ ОКНО И КНОПКА
==================================================================
Окно всплывает на экране параллакса и ведёт на новогоднюю страницу.
Отдельным блоком на главной Новый год больше не стоит.
Окно намеренно не перекрывает экран целиком и не гасит фон: это
предложение, а не преграда. Человек может его не заметить и листать
дальше — и это нормально. */
/* Края растворяются. Карточка с рамкой и тенью читается как ещё один
блок страницы; окно, у которого края сходят на нет, — как всплывшее
поверх неё. Отсюда маска: середина непрозрачна, а полоса в
--pop-fade по всем четырём сторонам гаснет до нуля.
Из-за маски у окна нет ни угла, ни тени — их всё равно срезало бы.
Поэтому же кнопка и крестик отодвинуты от кромки дальше ширины
полосы: в самой полосе они бы поблёкли. */
.nyp-pop{
position:fixed; z-index:80;
left:clamp(12px, 3vw, 28px); bottom:clamp(12px, 3vw, 28px);
width:min(318px, calc(100vw - 24px));
overflow:hidden;
background:#0a1418;
--pop-fade:30px;
-webkit-mask-image:
linear-gradient(to right, transparent 0, #000 var(--pop-fade),
#000 calc(100% - var(--pop-fade)), transparent 100%),
linear-gradient(to bottom, transparent 0, #000 var(--pop-fade),
#000 calc(100% - var(--pop-fade)), transparent 100%);
mask-image:
linear-gradient(to right, transparent 0, #000 var(--pop-fade),
#000 calc(100% - var(--pop-fade)), transparent 100%),
linear-gradient(to bottom, transparent 0, #000 var(--pop-fade),
#000 calc(100% - var(--pop-fade)), transparent 100%);
-webkit-mask-composite:source-in;
mask-composite:intersect;
opacity:0; transform:translateY(18px) scale(.98);
transition:opacity .34s cubic-bezier(.22,1,.36,1),
transform .34s cubic-bezier(.22,1,.36,1);
}
.nyp-pop.on{ opacity:1; transform:none; }
/* Сцена внутри: кадр леса, манекен, снег. Тот же набор, что был у
большого блока, — просто в размер окна. */
/* Сцена выше прежнего: манекен опущен так, чтобы зонт помещался
целиком — раньше купол срезало верхней кромкой. */
.nyp-pop-scene{
position:relative; height:196px; overflow:hidden;
}
.nyp-pop-far{
position:absolute; inset:0;
background:url('../img/sezon-ng/ny-far.webp') 62% 44% / cover no-repeat;
}
/* Фигура опущена и уменьшена: зонт должен быть виден целиком, вместе
с куполом, — раньше он упирался в верхнюю кромку окна. */
.nyp-pop-figure{
position:absolute; right:2%; bottom:-14%; top:auto;
height:104%; aspect-ratio:1024 / 1536;
}
.nyp-pop-figure img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:contain; object-position:bottom center;
filter:drop-shadow(0 14px 18px rgba(20,50,80,.34));
}
.nyp-pop-dry{ position:absolute; left:7%; right:9%; top:2%; bottom:0; }
.nyp-pop-scene::after{
content:''; position:absolute; inset:0; z-index:6; pointer-events:none;
background:linear-gradient(180deg,
rgba(10,20,24,0) 40%, rgba(10,20,24,.7) 80%, #0a1418 100%);
}
/* Крестик в правом верхнем углу — над сценой, поэтому со своей
подложкой: без неё он теряется на снегу. */
.nyp-pop-x{
position:absolute; z-index:10; top:34px; right:34px;
width:30px; height:30px; display:grid; place-items:center;
border:0; border-radius:50%; cursor:pointer;
background:rgba(6,14,18,.55);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
color:rgba(255,255,255,.86);
transition:background .2s ease, color .2s ease, transform .2s ease;
}
.nyp-pop-x svg{ width:17px; height:17px; fill:none; stroke:currentColor;
stroke-width:2; stroke-linecap:round; }
.nyp-pop-x:hover{ background:#fff; color:#0a1418; transform:rotate(90deg); }
.nyp-pop-x:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }
/* Отступы шире полосы растворения: и заголовок, и кнопка должны
стоять на плотном фоне, иначе они выцветают вместе с кромкой. */
.nyp-pop-body{
position:relative; z-index:7;
padding:0 34px 36px;
margin-top:-30px;
}
.nyp-pop-body .eyebrow-l{
display:block; margin-bottom:7px; color:var(--mint);
}
.nyp-pop-h{
margin:0 0 14px;
font-family:var(--font-display); font-weight:700;
font-size:21px; line-height:1.12; letter-spacing:-.03em;
color:#fff;
}
.nyp-pop-h em{ color:#2ec98d; font-style:normal; }
.nyp-pop-h b{ color:#c8f6e2; font-weight:700; }
.nyp-pop-body .btn{ width:100%; justify-content:center; }
/* Кнопки «Готовимся к Новому году» здесь больше нет: её угол в правом
нижнем занял чат с Мерчи, а две кнопки в одном углу спорят друг с
другом. Стили под неё убраны — разметки и скрипта для неё тоже нет,
искать нечего. Вернуться к предложению можно через меню и подвал. */
@media (max-width: 520px){
.nyp-pop{ width:calc(100vw - 20px); left:10px; right:10px; bottom:10px; }
.nyp-pop-scene{ height:150px; }
.nyp-pop-h{ font-size:19.5px; }
/* Палец попадает по 44 точкам, мышь — по тридцати. Здесь только
палец, поэтому кнопка крупнее, а значок в ней прежний. */
.nyp-pop-x{ width:44px; height:44px; top:26px; right:26px; }
}
@media (prefers-reduced-motion: reduce){
.nyp-pop, .nyp-pop-x{ transition:none; }
.nyp-pop{ transform:none; }
}
/* ==================================================================
НОВОГОДНЯЯ СТРАНИЦА — ПЕРЕРАБОТКА
==================================================================
Правки поверх исходных правил .nyp, поэтому идут последними. */
/* Во весь экран и вплотную к следующему блоку: между шапкой и тёмной
секцией со сроками не должно быть ни полей, ни щели. */
.nyp{
margin-bottom:0;
margin-top:calc(-1 * clamp(18px, 3vw, 34px)); /* съедаем поле main */
}
.nyp-scene{ height:100svh; min-height:520px; }
/* Светлой вуали справа больше нет. Она перекрывала кадр наискось и
читалась как посторонний фон поверх зимы. Вместо неё — только
затемнение снизу: ровно столько, чтобы заголовок читался. */
.nyp-scene::after{
background:linear-gradient(180deg,
rgba(6,14,20,0) 34%,
rgba(6,14,20,.34) 62%,
rgba(6,14,20,.78) 88%,
rgba(6,14,20,.94) 100%);
}
/* Заголовок уходит вниз-влево, как на главной: у правого края стоит
фигура, и текст там пришлось бы жать. */
.nyp-head{
align-self:end; justify-self:start;
justify-items:start; text-align:left;
width:100%; max-width:var(--sec-w);
margin:0 auto;
padding:0 clamp(16px, 4vw, 56px) clamp(40px, 6vw, 74px);
}
.nyp-head h1{ max-width:13ch; color:#fff; }
.nyp-head h1 em{ color:#2ec98d; }
.nyp-head h1 b{ color:#c8f6e2; }
.nyp-head .lead{ color:rgba(243,246,244,.86); max-width:52ch; }
.nyp-head .eyebrow-l{ color:var(--mint); }
.nyp-head .ny-cap{ left:0; right:auto; text-align:left; }
.nyp-head .ny-cap em,
.nyp-head .ny-cap b{ color:#fff; }
.nyp-head .ny-cap{
filter:drop-shadow(0 1px 0 rgba(110,165,205,.9))
drop-shadow(0 2px 4px rgba(20,50,80,.45));
}
/* Фигура крупнее и правее: сцена теперь во весь экран, и прежний
размер терялся в кадре. */
.nyp-figure{
left:auto; right:clamp(0px, 4vw, 90px);
height:82%; bottom:0;
}
.nyp-drift{ height:26%; bottom:-2%; }
/* Тёмный блок сразу под шапкой: без верхнего поля и без светлой
полосы между ними — цвет продолжает затемнение сцены. */
.nyp + .page-sec.dark,
.inner-main > .nyp + .page-sec.dark{
margin-top:0;
padding-top:clamp(46px, 7vw, 92px);
background:linear-gradient(180deg, #060e14 0%, var(--bg) 34%);
}
/* Текст и цифры в тёмном блоке — светлые и непрозрачные. Полупрозрачный
текст на чёрном читается как выцветший: экономия контраста здесь
ничего не даёт, а мешает всерьёз. */
.page-sec.dark p,
.page-sec.dark li,
.page-sec.dark .ny-why,
.page-sec.dark .ny-name{ color:#e7efeb; }
.page-sec.dark .note p{ color:#f1f7f4; }
.page-sec.dark .ny-head span{ color:var(--mint); opacity:1; }
.page-sec.dark .ny-date{ color:#fff; font-variant-numeric:tabular-nums; }
.page-sec.dark .ny-left{ color:var(--mint); }
.page-sec.dark .ny-left.soon{ color:#ffd08a; }
.page-sec.dark .ny-left.over{ color:#ff9d9d; }
.page-sec.dark .ny-line{ border-color:rgba(255,255,255,.16); }
.page-sec.dark .ny-set{
background:rgba(255,255,255,.05);
border-color:rgba(255,255,255,.14);
}
.page-sec.dark .ny-set h3{ color:#fff; }
.page-sec.dark .ny-kit{ color:var(--mint); }
.page-sec.dark .ny-note{ color:#cfdbd6; }
@media (max-width: 900px){
.nyp-scene{ height:92svh; min-height:460px; }
.nyp-figure{ right:-4%; height:56%; bottom:14%; }
.nyp-head{ padding-bottom:clamp(26px, 6vw, 40px); }
}
/* ==================================================================
СТАРТОВЫЙ ЭКРАН УЕЗЖАЕТ, СЛЕДУЮЩИЙ БЛОК СТОИТ
==================================================================
Приём один на все страницы: шапка прокручивается вверх обычным
образом, а блок под ней прилипает к верху экрана и остаётся на
месте, пока шапка с него сходит. Получается, что шапка уезжает
с уже готового блока, а не тянет его за собой.
Липкий блок здесь не годится: первый блок страницы бывает в
несколько экранов, и он завис бы у верхней кромки надолго. Поэтому
двигается сама сцена — её уводит вверх скрипт, а блок под ней идёт
обычным ходом и потому кажется неподвижным. */
.pgh, .nyp{
position:relative; z-index:4; /* шапка лежит поверх стоящего блока */
overflow:hidden; /* сцена не вылезает, когда уходит */
background:#0a1210; /* сцена уходит вверх — под ней свой фон */
}
.pgh + *, .nyp + *{
position:relative; z-index:1; /* блок под шапкой стоит и ждёт */
}
/* Блок под шапкой обязан быть непрозрачным: сквозь него была бы видна
уезжающая сцена. */
.pgh + .page-sec,
.nyp + .page-sec{ background:var(--l-bg); }
.pgh + .page-sec.dark,
.nyp + .page-sec.dark{
background:linear-gradient(180deg, #060e14 0%, var(--bg) 34%);
}
/* Сцена внутри шапки уходит вверх быстрее самой страницы — от этого
кажется, что блок под ней стоит на месте, а шапка с него сходит.
Сдвиг ставит скрипт; здесь только сглаживание. */
.pgh-scene, .nyp-scene{ will-change:transform; }
@media (prefers-reduced-motion: reduce){
.pgh-scene, .nyp-scene{ transform:none !important; }
}
/* Шаг снежной маски = высота строки, у каждого заголовка своя.
На главной строка 1.06, у заголовка страницы 1.06 задаём здесь же —
иначе снег и буквы расходятся к третьей строке. */
.ny-big{ --cap-step:1.06em; line-height:1.06; }
.nyp-head h1{ --cap-step:1.06em; line-height:1.06; }
/* Обводка тоньше: при двух пикселях снежная копия заметно полнела и
буквы под ней казались жирнее соседних. */
.ny-cap{ -webkit-text-stroke:1.4px #fff; }
/* Заголовок новогоднего блока целиком зелёный — и на странице, и в
окне на главной. Белая половина спорила с мятной; одним цветом
надпись читается как одно высказывание. */
.nyp-head h1,
.nyp-head h1 em,
.nyp-head h1 b,
.nyp-pop-h,
.nyp-pop-h em,
.nyp-pop-h b{ color:#2ee39c; }
/* Снежная копия остаётся белой: это снег, а не буквы. */
.nyp-head .ny-cap,
.nyp-head .ny-cap em,
.nyp-head .ny-cap b{ color:#fff; }
/* ==================================================================
СТАРТОВЫЙ ЭКРАН: ШАПКА СХОДИТ, НИЖНИЙ БЛОК СТОИТ
==================================================================
Правки поверх прежних правил, поэтому идут последними.
Шапка занимает экран целиком и начинается от самой верхней точки
страницы — под прозрачным хедером её тёмный фон должен доходить до
кромки окна, иначе сверху видна светлая полоса.
Нижний блок не едет: скрипт поднимает обёртку .after-hero ровно на
высоту шапки и отпускает по мере прокрутки. Получается, что шапка
сходит с неподвижного блока, а не тянет его за собой. */
.inner-main{ padding-top:0; }
.inner-main > .pgh,
.inner-main > .nyp{
margin-top:0; margin-bottom:0;
width:100vw; max-width:none;
margin-inline:calc(50% - 50vw);
}
/* Обёртка всего, что ниже шапки. Двигаем её целиком: сдвинь одну
первую секцию — и всё, что под ней, разъедется.
Держит её липкость, а не скрипт. Раньше сдвиг считался на каждой
прокрутке и ставился через transform — браузер успевал показать
кадр до пересчёта, и блок мелко трясло. Здесь блок поднят на
высоту шапки обычным отрицательным отступом и приклеен к верхней
кромке: липкость живёт в самом браузере и от прокрутки не
отстаёт ни на кадр.
Отклеивается он ровно через высоту шапки — за это отвечает
распорка .hero-pad в конце : она делает контейнер на ту же
высоту длиннее, и дальше страница идёт обычным ходом. */
.after-hero{
position:sticky; top:0; z-index:1;
/* Без своего контекста верхний отступ первой секции слипался бы с
отступом обёртки, и блок прилипал бы на восемьдесят пикселей
позже, чем нужно. */
display:flow-root;
margin-top:calc(-1 * var(--hero-h, 100svh));
background:var(--l-bg);
}
.hero-pad{ height:var(--hero-h, 100svh); pointer-events:none; }
.after-hero > *{
width:min(var(--read-w, 1040px), 100%);
margin-inline:auto;
}
.after-hero > .page-sec.dark,
.after-hero > .beyond{
width:100vw; max-width:none; margin-inline:calc(50% - 50vw);
}
/* Крошки лежат внутри шапки, под хедером: раньше они шли строкой над
ней и оставляли светлую полосу поверх тёмного экрана. */
.pgh > .crumbs,
.nyp > .crumbs{
position:absolute; z-index:8;
top:calc(var(--tb-h, 64px) + 14px);
left:0; right:0;
width:min(var(--read-w, 1040px), 100%);
margin:0 auto; padding:0 clamp(16px, 4vw, 56px);
}
/* Заголовок шапки не должен уходить под хедер: он стоит внизу экрана,
но на невысоком окне мог доехать до верхней кромки. */
.nyp-head{
padding-top:calc(var(--tb-h, 64px) + 26px);
}
/* Рамке первого экрана этот отступ больше не нужен и мешает: она
теперь прямоугольник с заданной высотой, и 117 точек сверху
раздували её на треть — высота в таблице переставала что-либо
значить. От хедера рамку держат её собственные числа. */
/* Сцена и её содержимое занимают весь экран, считая от нуля. */
.pgh-scene, .nyp-scene{ top:0; }
/* Тёмный блок под шапкой не должен просвечивать: обёртка над ним
стоит на месте, и любой полупрозрачный участок открыл бы уехавшую
сцену. */
.after-hero > .page-sec.dark:first-child{
background:linear-gradient(180deg, #060e14 0%, var(--bg) 34%);
}
@media (prefers-reduced-motion: reduce){
.after-hero{ position:static; margin-top:0; }
.hero-pad{ display:none; }
}
/* ==================================================================
СИЛЬНЫЕ СЛОВА
==================================================================
Один приём на весь сайт: слово, на котором держится смысл абзаца,
в покое подчёркнуто тонкой мятной чертой, а под курсором заливается
фирменным цветом снизу вверх.
Отмечаем скупо — одно-два слова на блок. Если подсветить каждое
второе, страница станет рябой и приём перестанет что-либо значить:
выделено всё — значит, не выделено ничего.
Слово остаётся словом: ни ссылкой, ни кнопкой оно не притворяется,
поэтому курсор обычный и по нажатию ничего не происходит. */
.hot{
font-style:normal; font-weight:inherit; color:inherit;
padding:0 .16em; margin:0 -.16em;
border-radius:4px;
-webkit-box-decoration-break:clone; box-decoration-break:clone;
background-image:
linear-gradient(var(--mint), var(--mint)),
linear-gradient(var(--mint), var(--mint));
background-repeat:no-repeat;
background-position:0 100%, 0 100%;
background-size:100% 1.5px, 100% 0;
transition:background-size .32s cubic-bezier(.22,1,.36,1),
color .32s ease;
}
.hot:hover{
background-size:100% 1.5px, 100% 100%;
color:#08120e;
}
/* На тёмном фоне заливка та же, а буквы уходят в самый тёмный тон
страницы — иначе мятное на мятном не читается. */
.page-sec.dark .hot:hover,
.beyond .hot:hover,
.sec-dark .hot:hover{ color:#06100c; }
/* Пальцем навести нельзя: на касании подсветка залипала бы до
следующего касания в другом месте. Оставляем только черту. */
@media (hover: none){
.hot:hover{ background-size:100% 1.5px, 100% 0; color:inherit; }
}
@media (prefers-reduced-motion: reduce){
.hot{ transition:none; }
}
/* ==================================================================
ЖИВОСТЬ: ЗАЛИВКИ ВМЕСТО ПОДПРЫГИВАНИЙ
==================================================================
Правки поверх прежних правил, поэтому идут последними.
Общий принцип: под курсором элемент не прыгает и не растёт, а
заливается фирменным цветом. Прыжок сдвигает соседей и читается
как сбой вёрстки; заливка ничего не двигает и показывает границы
того, на что человек навёл.
================================================================== */
/* ── сильные слова ───────────────────────────────────────────────
Черта в покое убрана: слово среди обычного текста и без неё видно,
а строка с подчёркиваниями начинает выглядеть как список ссылок.
Два повода загореться: курсор и появление на экране. Второе — не
украшение: пока страницу листают быстро, выделенное слово успевает
мигнуть и подсказать, о чём абзац. Гаснет оно само. */
.hot{
background-image:linear-gradient(var(--mint), var(--mint));
background-size:100% 0;
background-position:0 100%;
}
.hot:hover,
.hot.lit{
background-size:100% 100%;
color:#08120e;
}
.page-sec.dark .hot.lit,
.dark-band .hot.lit,
.beyond .hot.lit{ color:#06100c; }
@media (hover: none){
.hot:hover{ background-size:100% 0; color:inherit; }
}
/* ── ленты предметов в «в каталоге далеко не всё» ────────────────
Заливка идёт слева направо, как будто по слову провели маркером.
Ничего не приподнимается: соседние ярлыки стоят вплотную, и
подскок одного расталкивал бы строку. */
.be-chips li{
background-image:linear-gradient(var(--mint), var(--mint));
background-repeat:no-repeat;
background-position:0 0;
background-size:0 100%;
transition:background-size .34s cubic-bezier(.22,1,.36,1),
border-color .25s ease, color .25s ease;
}
/* Заливку приходится называть заново: прежнее правило наведения
писало фон сокращением, а оно обнуляет картинку — маркер исчезал
ровно в тот момент, ради которого он и сделан. */
.be-chips li:hover{
transform:none;
background-color:rgba(255,255,255,.6);
background-image:linear-gradient(var(--mint), var(--mint));
background-repeat:no-repeat;
background-position:0 0;
background-size:100% 100%;
border-color:var(--mint-ink);
color:#08281c;
}
/* ── карточки «кому и что обычно нужно» ──────────────────────────
Линия обегает карточку: сначала пробегает по верху слева направо,
затем сходит вниз по обоим бокам и смыкается внизу. Карточка при
этом стоит на месте — обводка и есть весь отклик.
Две части, потому что одним переходом такое не сделать: верх и
остальная рамка растут в разные стороны и в разное время. Задержка
у второй части ровно такая, чтобы верхняя линия успела добежать до
правого угла и передать движение вниз. */
.ind{ overflow:hidden; }
.ind::before,
.ind::after{
content:''; position:absolute; z-index:2; pointer-events:none;
}
.ind::before{ /* верх: слева направо */
left:0; top:0; height:3px; width:100%;
background:var(--mint-ink);
transform:scaleX(0); transform-origin:0 50%;
transition:transform .34s cubic-bezier(.22,1,.36,1);
}
.ind::after{ /* бока и низ: сверху вниз */
inset:0; border-radius:inherit;
border:2px solid var(--mint-ink);
border-top-color:transparent;
clip-path:inset(0 0 100% 0);
transition:clip-path .46s cubic-bezier(.22,1,.36,1) .26s;
}
@media (hover:hover){
.ind:hover{ transform:none; }
.ind:hover::before{ transform:scaleX(1); }
.ind:hover::after{ clip-path:inset(0 0 0 0); }
/* Номер отрасли загорается вместе с линией: связка «обводка —
номер» подсказывает, что карточка одна, а не две половины. */
.ind:hover .ind-no{ color:#0b8f62; }
}
/* ── кнопки ──────────────────────────────────────────────────────
Раньше кнопка под курсором просто становилась крупнее. Увеличение
ничего не сообщает и на светлом фоне выглядит как дрожание.
Теперь по ней проходит тёмная волна слева направо, а надпись
уезжает на просвет. Кнопка остаётся ровно того же размера — рядом
с ней ничего не дёргается. */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
/* Волна лежит под надписью, но над фоном кнопки: отрицательный слой
внутри своего контекста рисуется после фона и до текста. Иначе
пришлось бы заворачивать надпись в лишний тег. */
.btn::after{
content:''; position:absolute; inset:0; z-index:-1;
background:currentColor; opacity:.14;
transform:scaleX(0); transform-origin:0 50%;
transition:transform .42s cubic-bezier(.22,1,.36,1);
}
.btn:hover, .btn:focus-visible{
transform:none;
}
.btn:hover::after, .btn:focus-visible::after{ transform:scaleX(1); }
/* У главной кнопки волна тёмная: мятное по мятному не читается
совсем. У остальных — наоборот, мятная по светлому, и надпись под
ней темнеет, иначе волна проходит незамеченной. */
.btn-primary::after{ background:#0a2a1e; opacity:.2; }
.btn:not(.btn-primary)::after{ background:var(--mint); opacity:.6; }
.btn:not(.btn-primary):hover,
.btn:not(.btn-primary):focus-visible{
color:#08281c; border-color:var(--mint-ink);
}
.btn-primary:hover{
background:var(--mint);
box-shadow:0 14px 30px rgba(20,140,100,.34);
}
/* ── тёмная полоса внутри страницы ───────────────────────────────
Правило на полную ширину знало только .page-sec.dark и .beyond, а
блок сроков на «Выставках» размечен как .dark-band — он и оставался
в колонке чтения, с полями по бокам. */
.after-hero > .dark-band{
width:100vw; max-width:none; margin-inline:calc(50% - 50vw);
}
@media (prefers-reduced-motion: reduce){
.be-chips li, .ind::before, .btn::after{ transition:none; }
}
/* ── поле под манекеном в «направлениях» ─────────────────────────
Между заголовком блока и первой карточкой зияла треть экрана.
Поле сверху существует ради манекена, который облокотился на
карточку, — но было взято с большим запасом, чем нужно.
Считаем по фигуре: над кромкой карточки торчит примерно две трети
её высоты, остальное перекрывает карточку. Поле — эта же величина
плюс небольшой воздух; больше не нужно, меньше — фигура полезет на
текст над блоком. */
.dir-grid{ --geko-pad:clamp(126px, 15vw, 222px); }
.dir-grid{ margin-top:clamp(22px, 2.6vw, 34px); }
/* ── направления: шапка сайта сверху и уровень манекена ───────────
Две жалобы разом: верх блока срезала шапка сайта, а между текстом и
карточками зияло поле, оставленное под манекена.
Первое лечим честно: верхнее поле секции считаем от РЕАЛЬНОЙ высоты
шапки (её пишет в --tb-h page.js), а не от голого vh.
Второе — тем, что текст и манекен ставим в одну полосу: шапка блока
занимает левую половину, сетка подтягивается вверх, и манекен
оказывается справа на уровне заголовка. Пустоты между ними больше
нет, а высота блока не растёт.
Пульт: первое число — насколько сетка уезжает вверх (больше — текст
ближе к карточкам, слишком много — заголовок полезет на манекена);
второе — ширина колонки текста. */
#directions{ padding-top:calc(var(--tb-h, 64px) + clamp(20px, 3vh, 44px)); }
@media (min-width:901px){
#directions .dir-grid{ margin-top:calc(-1 * clamp(66px, 8.5vw, 140px)); }
#directions .sec-head{ max-width:min(50%, 540px); }
}
/* ── зелень по краям блока направлений ────────────────────────────
Декор из папки Deko. Правило, которого держимся: растения живут по
краям, лежат ПОД содержимым, курсора не ловят и на текст не заходят.
Плотная колонна свисает справа сверху, ажурная нить — справа снизу:
вдвоём они держат правый край, не влезая в чтение.
Пульт: --dg-op — насколько зелень приглушена (1 — как в файле);
ширины у каждой фигуры свои, отрицательные отступы прячут срез за
край блока. Больше двух-трёх растений на блок не ставить — страница
становится рябой. */
/* Сочность зелени НЕ приглушаем — прямое требование Павла. Было
saturate(.92) brightness(.98), убрано: листва должна быть такой же
яркой, как в исходниках. Осталась только тень — она даёт объём,
а цвет не трогает. */
/* ДЫХАНИЕ ВМЕСТО ПАРАЛЛАКСА. От движения за курсором отказались: слои
просто сами не спеша ходят вбок, каждый со своим размахом и своим
периодом, поэтому сцена никогда не повторяется один в один и не
выглядит качелями. Никакого скрипта — только CSS-анимация ниже.
--dg-par-* здесь по-прежнему означает размах хода, и ровно этот же
запас заложен в боковые и нижние отступы слоёв, чтобы в крайних
положениях по краям не оголялся фон. */
#directions{ position:relative; overflow:hidden; --dg-op:1;
/* Дальние заросли внутри светлого блока. 10px за 38 с —
как было задумано, Павла тут всё устраивает.
Дважды разгоняли по ошибке, приняв их за ветку на
шве: ветка — это .seam-strip, она ниже по файлу.
Сюда не лезть. */
--dg-par-bg:10px; --dg-par-fr:16px;
/* точная подгонка ближнего плана: вверх и влево */
--dg-fr-up:10px; --dg-fr-left:7px; }
/* Колонка блока уже общесайтовой: по макету Павла заросли по бокам
должны быть шире, а карточки — заметно не во всю ширину. Одно число
на весь блок, включая шапку и первую широкую карточку. */
#directions .sec-in{
position:relative; z-index:1;
width:min(var(--sec-w), 100%);
max-width:var(--dir-w, 1040px);
}
.dir-deko{
position:absolute; inset:0; z-index:0;
pointer-events:none; overflow:hidden;
}
.dir-deko .dg{
position:absolute; height:auto; opacity:var(--dg-op);
filter:drop-shadow(0 16px 24px rgba(16,40,32,.16));
}
/* Передний план — тот же низ, но ПЕРЕД карточками (z-index 2 против 0
у дальнего слоя и 1 у контента). Три слоя вместе читаются как сцена:
дальние заросли просвечивают сквозь стеклянные карточки, ближние
проходят перед ними. */
.dir-deko-front{ z-index:2; }
.dg-fr{
/* Тонкая подгонка по просьбе Павла: на 4 px выше и на 7 px левее.
Сдвиг по горизонтали — обоими краями сразу, чтобы ширина полосы
не поехала. */
/* Боковой запас больше хода по курсору, иначе на краях появлялась бы
полоса фона, когда слой уводит мышью. */
left:calc(-17% - var(--dg-fr-left)); right:calc(-17% + var(--dg-fr-left));
width:134%;
/* Ближний план обрезан нижним краем блока — так и должно быть: он
ближе к камере. Утапливаем сильнее, иначе высокие кусты по краям
полосы закрывают последние строки карточек. Плюс запас под ход
параллакса, как у дальнего слоя. */
/* --dg-fr-vniz утапливает ближний план: от него нужна только верхняя
кромка листвы, которая ложится на низ карточек. Без утопления
полоса встаёт во весь свой рост и закрывает карточки целиком. */
bottom:calc(var(--dg-fr-up)
- (clamp(52px, 7vw, 130px) + var(--dg-fr-vniz, 0px) + var(--dg-par-fr)));
filter:drop-shadow(0 -6px 18px rgba(16,40,32,.18));
will-change:transform;
/* Ближний ходит шире и чуть быстрее, и период у него другой — от
этого слои постоянно расходятся, а не качаются в такт. */
animation:dgDriftB 27s ease-in-out infinite;
}
/* Само дыхание. Ход только вбок; размах берётся из --dg-par-*, поэтому
меняется одним числом наверху блока. */
@keyframes dgDriftA{
0%,100%{ transform:translate3d(calc(-1 * var(--dg-par-bg)), 0, 0); }
50% { transform:translate3d(var(--dg-par-bg), 0, 0); }
}
@keyframes dgDriftB{
0%,100%{ transform:translate3d(var(--dg-par-fr), 0, 0); }
50% { transform:translate3d(calc(-1 * var(--dg-par-fr)), 0, 0); }
}
/* «Поменьше движения» в системе — сцена замирает. */
@media (prefers-reduced-motion: reduce){
.dg-bg, .dg-fr{ animation:none; }
}
/* Лента фактов в сцене направлений. Идёт ПОД карточками, по зелени, и
лежит поверх обоих планов листвы — но не полосой во всю ширину:
подложка плотная только в середине и растворяется к краям, поэтому
заросли по бокам остаются нетронутыми.
Селектор с id намеренно: правило .fx{position:relative} стоит в файле
ниже, и при одинаковой специфичности выигрывало оно — лента вставала
в поток в самом верху блока. */
#directions .dir-fx{
position:absolute; left:0; right:0;
bottom:var(--dir-fx-niz, clamp(44px, 4.6vw, 74px));
/* Поверх зелени: по макету Павла строка читается целиком, а глубину
ей даёт не перекрытие листвой, а сама подложка — плотная по центру
и растворяющаяся к краям. */
z-index:3; pointer-events:none;
/* Подложка. К краям сходит в ничто вместе с текстом — маска режет
весь слой разом. Полупрозрачная: плотное белое пятно било по глазам сильнее, чем
сама надпись. Читаемость держит не белизна, а размытие фона под
подложкой — зелень под ней теряет рисунок, и текст ложится на
ровное поле. */
background:var(--dir-fx-fon, rgba(255,255,255,.5));
-webkit-backdrop-filter:blur(11px) saturate(1.06);
backdrop-filter:blur(11px) saturate(1.06);
/* Две маски разом: одна режет по горизонтали (края экрана), вторая —
ПО ВЕРТИКАЛИ. Вертикальная и есть главная: подложка плотная только
по средней линии, а к верхней и нижней кромке тает, поэтому у ленты
нет ни верхней, ни нижней границы — она проступает из зарослей.
Складываем их пересечением: где прозрачна любая — прозрачно всё. */
-webkit-mask-image:
linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 9%, #000 24%,
#000 76%, rgba(0,0,0,.55) 91%, transparent 100%),
linear-gradient(180deg, transparent 0, rgba(0,0,0,.5) 16%, #000 34%,
#000 66%, rgba(0,0,0,.5) 84%, transparent 100%);
mask-image:
linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 9%, #000 24%,
#000 76%, rgba(0,0,0,.55) 91%, transparent 100%),
linear-gradient(180deg, transparent 0, rgba(0,0,0,.5) 16%, #000 34%,
#000 66%, rgba(0,0,0,.5) 84%, transparent 100%);
-webkit-mask-composite:source-in;
mask-composite:intersect;
}
/* Лента выше обычной: растворению сверху и снизу нужен запас, иначе
оно съедает сам текст, а не поля вокруг него. */
#directions .dir-fx .fx-list{ height:clamp(78px, 6.2vw, 96px); }
@media (prefers-reduced-motion:reduce){
/* Без хода это просто строка текста поперёк сцены — убираем. */
.dir-fx{ display:none; }
}
@media (max-width:640px){ .dir-fx{ display:none; } }
.dg-top{
top:calc(-1 * clamp(24px, 4vw, 64px));
right:calc(-1 * clamp(16px, 2.4vw, 40px));
width:clamp(140px, 16vw, 290px);
}
/* Внизу — НЕ свисающая ветка: она обрывалась в воздухе и читалась как
висящий обрезок. Здесь заросли, которые растут от нижнего края блока
вверх: у них есть земля, и картинка выглядит продолжением сцены.
Зелень идёт по ВСЕМУ низу (правка Павла). Одну картинку на всю ширину
не растягиваем: она вымахала бы на пол-блока и полезла под карточки.
Вместо этого две РАЗНЫЕ полосы по половине ширины, левая отражена —
стык посередине не читается, а высота остаётся низкой.
Под зелень отведено нижнее поле секции (см. --dg-niz-h ниже): полоса
живёт в нём и на карточки не заходит. Хотите гуще — увеличивать
ширину полос и поле ОДНОВРЕМЕННО, иначе зелень полезет на текст. */
/* Поле под зелень урезано вдвое (правка Павла: «зачем столько места
снизу»). Слои при этом стали ниже — они уходят за край, а не стоят
в пустой полосе. */
#directions{ --dg-niz-h:clamp(135px, 16vw, 260px); }
#directions{ padding-bottom:calc(var(--dg-niz-h) + clamp(10px, 1.6vw, 26px)); }
/* Насколько ближние заросли заходят на карточки. Ровно на эту величину
карточкам добавлено нижнее поле — зелень перекрывает воздух под
ссылкой, а не саму ссылку. Меняем эти два значения только вместе. */
/* Увеличивать это в надежде отодвинуть текст от зелени бесполезно:
слой привязан к низу секции, а секция растёт вместе с карточками —
перекрытие остаётся тем же. Реально его меняют --dg-fr-up (поднять
или опустить слой) и --dg-niz-h (поле под зелень). */
#directions{ --dg-fr-over:clamp(16px, 2.4vw, 44px); }
#directions .dir-body{ padding-bottom:calc(clamp(18px, 2vw, 28px) + var(--dg-fr-over)); }
/* ДАЛЬНИЙ ПЛАН — одна крупная полоса, взятая ШИРЕ блока: заросли должны
быть большими и однородными, доходить до середины карточек и
просвечивать сквозь них. Две половинки вместо одной полосы выглядят
как две наклейки — так не делать. */
.dg-bg{
left:-15%; right:-15%; width:130%;
/* Лёгкое размытие: во-первых, сглаживает картинку, которая тянется
шире своего разрешения; во-вторых, это честная глубина резкости —
дальний план и должен быть мягче ближнего. */
filter:blur(4.5px) drop-shadow(0 16px 24px rgba(16,40,32,.16));
/* База + запас под параллакс: слой утоплен настолько, что даже на
самом верхнем положении хода его нижний край остаётся за краем
блока и снизу не оголяется полоса фона. */
/* --dg-bg-vniz утапливает лес дополнительно: между низом карточек и
кромкой листвы должна остаться светлая полоса, по которой идёт
лента фактов. Без неё лес начинается прямо под карточками и лента
скрыта целиком — видно только пустое место. */
bottom:calc(-1 * (clamp(48px, 6vw, 120px)
+ var(--dg-bg-vniz, 0px) + var(--dg-par-bg)));
will-change:transform;
/* Дальний ходит меньше и медленнее — он же дальше от нас. */
animation:dgDriftA 38s ease-in-out infinite;
}
/* На телефоне колонна сверху тише (экран узкий, она быстро начинает
спорить с карточками), а заросли внизу остаются: они не мешают
чтению и закрывают стык блоков. */
@media (max-width:900px){
/* Прозрачность не трогаем — цвет остаётся сочным, просто фигура мельче. */
.dg-top{ width:clamp(96px, 26vw, 150px); }
.dg-bg{ left:-30%; right:-30%; width:160%; }
/* На узком экране полоса переднего плана берётся шире экрана, иначе
кусты по её краям сжимаются в веточки. */
.dg-fr{ left:-14%; right:-14%; width:128%; }
}
/* === Реальные изображения в слоты-заглушки (реестр, вставка 31.08) === */
.dir-pic[data-pic="expo"]{ background-image:url('../img/b03-napravleniya/dir-expo.webp'); background-size:cover; background-position:50% 42%; }
.dir-pic[data-pic="corp"]{ background-image:url('../img/b03-napravleniya/dir-corp.webp'); background-size:cover; background-position:50% 42%; }
.dir-pic[data-pic="party"]{ background-image:url('../img/b03-napravleniya/dir-party.webp'); background-size:cover; background-position:50% 42%; }
/* Снимок карточки «Мерч для команды» заменён на B3_foto_3 (правка
Павла). Прежний файл dir-team.webp оставлен в папке — вернуть можно
этой одной строкой. */
.dir-pic[data-pic="team"]{ background-image:url('../img/b03-napravleniya/dir-team-2.webp'); background-size:cover; background-position:50% 42%; }
.dir-pic[data-pic="expo"]::before,
.dir-pic[data-pic="corp"]::before,
.dir-pic[data-pic="party"]::before,
.dir-pic[data-pic="team"]::before{ display:none; }
/* Фото-предмет в шапке страницы: то же место, что у контурного SVG */
img.pgh-figure{
position:absolute;
object-fit:contain;
filter:drop-shadow(0 18px 34px rgba(0,0,0,.35));
}
/* Фото-предмет во врезке .pg-art: прозрачный WebP на круге-подложке */
.pg-art img.obj{ height:auto; filter:drop-shadow(0 12px 24px rgba(16,40,32,.18)); }
/* ==================================================================
СТЕКЛО БЕЗ ПРЕЛОМЛЕНИЯ
==================================================================
Три слоя-копии — кадр под плашкой, полоса под шапкой и сцена под
плашкой параллакса — существовали только ради линзы: по ним шла
карта смещения, и края стекла изгибали фон. Линзы больше нет, и
слои не нужны никому: убираем их со сцены совсем.
Плашки остаются стеклом. Размытие фона, прозрачность, ободок,
блик и тень — всё на месте и всё задано прямо в CSS у каждой
плашки. Ушло только искажение по кромке.
Сами теги в разметке оставлены: на них ссылается полтора десятка
мест в main.js, и убирать их значило бы править все эти места ради
двух пустых элементов, которые ничего не весят.
================================================================== */
#lensCanvas,
#topLens,
#plLens{
display:none !important;
}
/* ==================================================================
НАПРАВЛЕНИЙ СТАЛО ТРИ
==================================================================
«Выставки» объединены с «Корпоративами», и обычных карточек под
широкой осталось две. В сетке на три колонки они оставляли справа
пустую треть ряда — заметную дыру. Колонок теперь две, широкая
карточка растягивается на обе.
================================================================== */
.dir-grid{ grid-template-columns:repeat(2, 1fr); }
.dir-cell-wide{ grid-column:span 2; }
@media (max-width: 860px){
.dir-grid{ grid-template-columns:1fr; }
.dir-cell-wide{ grid-column:auto; }
}
/* ══════════════════════════════════════════════════════════════════
ОТРАСЛИ — ТЁМНЫЙ БЛОК
Страница идёт чередованием: светлый блок, тёмный, светлый. «Кому и
что обычно нужно» — тёмный. Фон-фотография из папки Deko (дерево с
зелёным бархатом), поверх неё затемнение, карточки из белых
становятся стеклянными, весь текст переводится в светлый.
══════════════════════════════════════════════════════════════════ */
#industries{ position:relative; overflow:hidden; isolation:isolate; }
.ind-fon{
position:absolute; inset:0; z-index:0; pointer-events:none;
background:url('../img/b04-otrasli/fon-dark.webp') center/cover no-repeat;
}
/* Затемнение поверх фона. Без него мелкий текст теряется на светлых
участках дерева. Слева плотнее — там колонка заголовка. */
.ind-fon::after{
content:''; position:absolute; inset:0;
background:linear-gradient(100deg,
rgba(8,14,11,.90) 0%,
rgba(8,14,11,.74) 46%,
rgba(8,14,11,.56) 100%);
}
#industries .sec-in{ position:relative; z-index:1; }
/* Карточки на тёмном. Никакого backdrop-filter: их семь, а стекло на
странице и так дорогое — берём обычную полупрозрачную заливку. */
.sec-ind .ind{
background:rgba(255,255,255,.055);
border-color:rgba(255,255,255,.14);
}
@media (hover:hover){
.sec-ind .ind:hover{
background:rgba(255,255,255,.11);
border-color:rgba(143,232,196,.5);
transform:translateY(-2px);
}
}
.sec-ind .ind h3{ color:#fff; }
.sec-ind .ind-lead{ color:rgba(255,255,255,.72); }
.sec-ind .ind-kit{
color:rgba(255,255,255,.92);
border-top-color:rgba(255,255,255,.16);
}
.sec-ind .ind-no,
.sec-ind .ind-min{ color:var(--mint); }
/* ── лежащий манекен поверх карточек 03 и 04 ──────────────────────
Он не в потоке сетки, а лежит НАД ней: раскладка карточек от него не
зависит. Перекрывает верхнюю кромку правой пары карточек примерно на
пятую часть своей высоты — так он именно лежит на них, а не парит
рядом. Место под фигуру взято верхним полем сетки, поэтому на текст
выше он не заходит. Курсор не ловит: под ним живые карточки.
Пульт: --ind-geko-w (размер), --ind-geko-drop (насколько глубоко
ложится на карточки), верхнее поле сетки — рядом. */
/* Значение сразу отрицательное: calc(-1 * <процент из переменной>)
Chromium молча отбрасывал, и слой оставался без сдвига. */
/* Глубина посчитана по самой картинке (_tools\geko3_probe.py): низ
левой трети (плечо и локоть, на них фигура и опирается) приходится
на 81.6 % высоты кадра, низ всей фигуры — на 85.3 %. Значит при
сдвиге на 76 % локоть уходит на пару десятков пикселей ЗА кромку
карточек — читается как опора, — а низ фигуры перекрывает их всего
на треть сотни и заголовки остаются видны. Глубже 70 % закрывает
«Строительство» и «Медицину».
Наклон (--ind-geko-tilt) пробовали: при повороте задираются ноги и
поза читается как падение. Держим 0. */
#industries{ --ind-geko-w:clamp(300px, 44vw, 620px);
--ind-geko-drop:-76%; --ind-geko-tilt:0deg; }
#industries .ind-grid{ position:relative; margin-top:clamp(78px, 9vw, 150px); }
/* Пустоты между текстом и карточками было слишком много: место под
фигуру нужно справа, а слева зияло. Опускаем шапку блока вниз —
пустой воздух уходит наверх, а текст встаёт ближе к карточкам. */
#industries .sec-head{ margin-top:clamp(30px, 6vw, 110px); }
/* Селектор нарочно длинный: сетка размечена как `reveal-kids`, и
правило появления `.anim .reveal-kids > *.in{ transform:none }`
перебивало сдвиг фигуры — она оставалась стоять на нуле. */
#industries .ind-grid .ind-geko{
position:absolute; z-index:3; pointer-events:none;
right:-2%; top:0; width:var(--ind-geko-w); height:auto;
transform:translateY(var(--ind-geko-drop)) rotate(var(--ind-geko-tilt));
transform-origin:30% 80%; /* поворот вокруг локтя, а не центра */
filter:drop-shadow(0 26px 34px rgba(0,0,0,.45));
}
/* Заголовок блока держим слева, чтобы фигура справа стояла с ним в
одной полосе, как манекен в «направлениях». */
@media (min-width:901px){
#industries .sec-head{ max-width:min(54%, 600px); }
}
@media (max-width:900px){
#industries{ --ind-geko-w:min(88%, 430px); --ind-geko-drop:-72%; }
#industries .ind-grid{ margin-top:clamp(90px, 26vw, 170px); }
.ind-geko{ right:-6%; }
}
/* ══════════════════════════════════════════════════════════════════
ПЕРЕХОД МЕЖДУ СВЕТЛЫМ И ТЁМНЫМ БЛОКОМ — ПОЛОСОЙ ЗЕЛЕНИ
Прошлая попытка (прозрачный низ у светлого блока, тёмный подложен
под него) забракована: на телефоне выглядело грязно, и тёмный лез
туда, где должен быть белый фон.
Теперь просто: оба блока обычные, со своими сплошными фонами, а на
их границу кладётся отдельная картинка — полоса зарослей с
прозрачным верхом и низом (green_per_ 1). Верхней половиной она
лежит на светлом, нижней — на тёмном, и стык исчезает.
Дальние заросли внутри светлого блока остаются как были и обрезаются
его низом: они живут на белом фоне и в переход не лезут.
══════════════════════════════════════════════════════════════════ */
/* блок снова обрезает своих детей и снова со сплошным светлым фоном */
#directions{ overflow:hidden; }
/* Дальний план: низ чуть ниже низа блока — так его нижняя кромка
уходит под полосу-шов и не спорит с ней. Блок обрезает по себе,
поэтому «лишние» пиксели просто не видны. */
.dg-bg{ bottom:-10px; }
/* Полоса-шов. Лежит в тёмном блоке, но выезжает вверх на светлый:
он идёт раньше в потоке, поэтому полоса накрывает оба.
Пульт: --seam-w — ширина (больше 100 %, чтобы края уходили за
экран), --seam-y — насколько полоса поднята относительно границы
(50 % — ровно пополам). */
/* Числа не на глаз, а по самой картинке (_tools\per_probe.py):
полоса СПЛОШНАЯ (покрытие ≥ 92 %) в диапазоне 58…73 % своей высоты,
максимум 99 % на 64 %. Значит линия стыка должна проходить именно
по 64 % — там она физически ничем не просвечивает.
Края кадра, наоборот, редкие (покрытие 24 %), поэтому полоса берётся
заметно шире экрана: её прозрачные края обязаны уйти за края окна,
иначе стык будет виден по бокам. */
#industries{ overflow:visible; --seam-w:150%; --seam-y:64%; }
/* Подстраховки под полосой БОЛЬШЕ НЕТ (правка Павла). Раньше здесь
лежал светлый градиент на случай просветов между листьями — но он
же и светился белым сквозь листву на тёмном заборе. Убран совсем:
один слой втыкается в другой, а стык закрывает сама ветка. */
/* Воздух у границы: полоса не должна лезть на карточки сверху и на
заголовок снизу. Светлый блок держим коротким — он должен кончаться
близко к нижнему краю карточек. */
#directions{ padding-bottom:clamp(58px, 7vw, 120px); }
#industries{ padding-top:calc(clamp(56px, 8vh, 110px) + clamp(80px, 11vw, 200px)); }
.seam-strip{
position:absolute; z-index:6; pointer-events:none;
left:50%; top:0;
width:var(--seam-w); max-width:none; height:auto;
transform:translate(-50%, calc(-1 * var(--seam-y)));
/* ДЫХАНИЕ ВЕТКИ. Ход только вбок и небольшой: ветка лежит на самом
виду, поверх всего (z-index 6), и любое лишнее движение тут
превращается в качели. Вверх-вниз не двигаем совсем — уедет линия
стыка, ради которой полоса и положена.
Сдвиг вшит прямо в translate, потому что тот уже занят под
раскладку: полоса центрируется через -50 % и поднимается на
--seam-y. Отдельной анимацией transform его бы просто затёрло, и
ветка прыгнула бы в угол. Поэтому в каждом кадре повторяются оба
значения, а к горизонтали добавляется ход.
Запас есть: полоса берётся шире экрана (--seam-w:150 %), так что
26 px хода её прозрачные края за кромку не вытащат. */
--seam-hod:26px;
will-change:transform;
animation:seamDrift 26s ease-in-out infinite;
}
@keyframes seamDrift{
0%, 100%{ transform:translate(calc(-50% - var(--seam-hod)),
calc(-1 * var(--seam-y))); }
50% { transform:translate(calc(-50% + var(--seam-hod)),
calc(-1 * var(--seam-y))); }
}
/* «Поменьше движения» в системе — ветка замирает на месте. */
@media (prefers-reduced-motion: reduce){
.seam-strip{ animation:none; }
}
/* На узком экране полосу берём заметно шире экрана: иначе её крупные
листья по краям сжимаются в точки и переход не читается. */
@media (max-width:900px){
#industries{ --seam-w:280%; --seam-y:64%; }
}
/* Текст на карточках направлений читался плохо: подложка была почти
прозрачной, а под ней живая листва. Делаем её плотнее и добавляем
контраста тексту. */
.dir{ background:rgba(255,255,255,.92); }
@media (hover:hover){
.dir:hover{ background:#fff; }
}
.dir-lead{ color:#2c3b34; }
/* ══════════════════════════════════════════════════════════════════
КАРТОЧКИ НАПРАВЛЕНИЙ ПОДНЯТЫ
Ветка на стыке привязана к границе блоков, а не к карточкам —
поэтому единственное, что уводит текст из-под неё, это расстояние
от низа карточек до низа светлого блока. Увеличиваем его: карточки
уезжают вверх, ветка накрывает меньше строк. Пустоты не появляется,
в этом промежутке стоит дальний лес.
══════════════════════════════════════════════════════════════════ */
/* ВНИМАНИЕ: это правило перебивает padding-bottom, заданный выше через
--dg-niz-h. Менять высоту низа блока надо ЗДЕСЬ.
Значение вернулось к прежнему: карточки должны стоять НИЗКО, чтобы
ближний план накрывал их нижнюю кромку. Поднимать их ради ленты
больше не нужно — лента лежит перед дальним лесом и видна сама. */
#directions{ padding-bottom:clamp(120px, 13vw, 215px); }
/* Ближний план утоплен: видна только верхняя кромка листвы. */
#directions{ --dg-fr-vniz:clamp(305px, 32vw, 515px); }
/* ══════════════════════════════════════════════════════════════════
ФОН БЛОКА «ОТРАСЛИ» С ГОТОВЫМ ПЕРЕХОДОМ
Новый файл `DDF_ 1 per.png` → `fon-dark-per.webp` (1586×992): забор
из досок, а по низу — плющ на альфе, который свисает вниз. Замер
(_tools\ddfper_probe.py): картинка СПЛОШНАЯ до 72.9 % своей высоты,
дальше идёт прозрачный хвост из лиан.
Значит фон ставится не «cover по блоку», а так, чтобы сплошная часть
ровно закрыла блок, а хвост вылез за его нижнюю границу и лёг на
следующий блок. Никакой полосы поперёк для этого стыка не нужно —
переход уже нарисован в самой картинке.
Арифметика: если сплошная часть = 72.9 % картинки и она равна высоте
блока, то вся картинка = 100/72.9 = 137.2 % высоты блока, а хвост =
37.2 % высоты блока. Отсюда две переменные ниже; менять их только
вместе и только если Павел даст другой файл с другой долей.
══════════════════════════════════════════════════════════════════ */
#industries{
--ind-fon-tail:37.2%; /* насколько лианы свисают ниже блока */
--ind-fon-cut:27.1%; /* та же граница, но в долях самой картинки */
}
/* Контейнер фона: по бокам режет (картинка берётся шире экрана, чтобы
пропорции остались честными), снизу — нет, там и висят лианы. */
.ind-fon{
inset:auto; left:0; right:0; top:0;
bottom:calc(-1 * var(--ind-fon-tail));
background:none;
overflow:hidden;
}
.ind-fon-img{
position:absolute; left:50%; top:0;
height:100%; width:auto; min-width:100%; max-width:none;
transform:translateX(-50%);
}
/* Затемнение — только на площади блока. Ниже границы оно кончается,
иначе лианы потеряли бы сочность, а её приглушать нельзя. */
.ind-fon::after{
inset:auto; left:0; right:0; top:0; bottom:var(--ind-fon-cut);
}
/* Лианы вылезают за нижнюю границу блока, а следующий блок идёт дальше
по потоку и своим фоном их перекрывал. Поднимаем «Отрасли» над ним. */
#industries{ z-index:2; }
#anything{ position:relative; z-index:1; }
/* ── фон блока ──
Туманные джунгли с высоты. Не картинка «на посмотреть», а подложка:
держим её приглушённой и уводим в белое к низу, чтобы карточки и
бегущая лента ниже не тонули в ней. Отдельного слоя в разметке нет
намеренно: разметку этого блока собирает _tools\any\install.py, и
всё, что вписано руками, пропадёт при следующем прогоне. */
#anything{ --af-op:.3; }
#anything::before{
content:''; position:absolute; inset:0; z-index:0;
pointer-events:none;
background:url(../img/b09-katalog/fon-any.webp) 50% 20% / cover no-repeat;
opacity:var(--af-op);
-webkit-mask-image:linear-gradient(180deg,
#000 0, #000 38%, rgba(0,0,0,.35) 72%, transparent 100%);
mask-image:linear-gradient(180deg,
#000 0, #000 38%, rgba(0,0,0,.35) 72%, transparent 100%);
}
#anything > .sec-in{ position:relative; z-index:1; }
/* ── тот же фон на телефоне ─────────────────────────────────────────
Схема выше («сплошная часть картинки = высота блока») на узком
экране даёт чудовищное увеличение: блок высокий, картинка широкая,
и она раздувается вдесятеро — доски превращаются в мыло.
Поэтому на телефоне картинка берётся честным размером (150 vw) и
прижимается к низу: снизу — забор с лианами, выше — фактура дерева
обычным фоном секции, а стык между ними растворён маской.
Числа: 150 vw ширины при пропорции 1.599 дают 93.8 vw высоты,
из них хвост лиан 27.1 % = 25.4 vw — на столько картинка и свисает. */
@media (max-width:900px){
.ind-fon{
top:auto; left:0; right:0;
height:93.8vw; bottom:-25.4vw;
background:url('../img/b04-otrasli/fon-dark.webp') center/cover no-repeat;
background-attachment:local;
}
/* Фактура дерева выше картинки — обычным фоном секции. */
#industries{ background:#0d1210 url('../img/b04-otrasli/fon-dark.webp') center/cover no-repeat; }
.ind-fon{ background:none; }
.ind-fon-img{
top:0; height:100%; width:auto; min-width:0;
-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 30%);
mask-image:linear-gradient(to bottom, transparent 0, #000 30%);
}
/* Затемнение блока переезжает на саму секцию: контейнер фона теперь
занимает только низ, а текст идёт по всей высоте. */
.ind-fon::after{ display:none; }
#industries::before{
content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(100deg,
rgba(8,14,11,.90) 0%,
rgba(8,14,11,.80) 62%,
rgba(8,14,11,.74) 100%);
}
}
/* ══════════════════════════════════════════════════════════════════
«ПОДРОБНЕЕ О НАПРАВЛЕНИИ» — В ПРАВЫЙ ВЕРХНИЙ УГОЛ
Была строкой в самом низу карточки, и между ней и «от 30 комплектов»
зиял провал: список короткий, а высота карточки выровнена по соседке.
Теперь ссылка стоит в правом верхнем углу тела, на уровне номера —
как в широкой карточке 01, — а пустое место внизу остаётся пустым,
так и задумано (правка Павла).
Ссылка перенесена ВНУТРЬ .dir-body (в разметке) и позиционируется
абсолютно, поэтому в потоке её больше нет и высоту она не набивает.
══════════════════════════════════════════════════════════════════ */
.dir-body{ position:relative; }
.dir .dir-go{
position:absolute;
top:clamp(18px, 2vw, 28px);
right:clamp(18px, 2vw, 28px);
padding:0;
/* Одной строкой — в широкой карточке она раньше ломалась надвое. */
white-space:nowrap;
}
/* Номеру нужно место слева от ссылки, иначе на узком экране они
встретятся. Заголовок идёт ниже и ссылке не мешает. */
.dir .dir-no{ padding-right:clamp(140px, 15vw, 190px); }
/* Отключено: на телефоне строка тоже влезает в угол — при ширине
карточки 354 px она занимает ~188 px, номер слева ещё 20 px, запас
есть даже на экране 320 px. */
@media (max-width:0px){
/* На совсем узком экране строка длиннее половины карточки — уводим
её под номер, но по-прежнему вправо. */
.dir .dir-go{ position:static; display:block; text-align:right;
margin:0 0 6px; }
.dir .dir-no{ padding-right:0; }
}
/* ══════════════════════════════════════════════════════════════════
ЗАТЕМНЕНИЕ БЛОКА «ОТРАСЛИ» ВЫКЛЮЧЕНО (правка Павла)
Градиент лежал на площади блока и обрывался по его нижней границе:
листва на заборе оказывалась притемнена почти чёрным, а свисающие
ниже лианы — нет. Отсюда и разница в цвете по обе стороны линии.
Сняли совсем, смотрим, как живёт блок без него.
Вернуть — убрать эти две строки. Само правило с градиентом цело,
оно выше по файлу.
══════════════════════════════════════════════════════════════════ */
.ind-fon::after{ display:none; }
@media (max-width:900px){
#industries::before{ display:none; }
}
/* ══════════════════════════════════════════════════════════════════
ВЕТЕР В ЛИАНАХ
Лианы — часть той же картинки, что и забор, поэтому двигать её
целиком нельзя: поедут доски. Хвост отделён маской в три слоя,
каждый качается сам.
Движение — НЕ поворот, а skewX. Поворот наклонил бы всю линию
крепления: на краях кадра кромка ушла бы вверх-вниз на десяток
пикселей и открылась бы щель. skewX сдвигает по горизонтали
пропорционально расстоянию от transform-origin, поэтому вся линия
крепления (72.9 % высоты картинки — там, где кончается сплошная
часть) стоит намертво по всей ширине, а ход растёт книзу.
При хвосте в ~420 px и угле 0.9° кончик плети ходит на ~7 px.
Три зоны с разными периодами (9 / 13 / 11 с) — иначе всё качается
разом, как занавеска. Границы зон стоят на просветах между плетями:
38.5 % и 68.5 % ширины, посчитано _tools\sway_gaps.py (плотность
там 0.005 и 0.014 против 0.131 в среднем). Поэтому стыки резкие —
мягкая растушёвка дала бы двоение в зоне перекрытия.
══════════════════════════════════════════════════════════════════ */
#industries{
--ind-fon-solid:72.9%; /* где кончается сплошная часть картинки */
/* Хвост лиан у забора. Разгоняли до 2.6/1.7/2.1, решив, что
Павел про них — оказалось, про ветку на шве (.seam-strip).
Вернули исходные: тут лёгкое шевеление и задумано. */
--sway-a:0.9deg;
--sway-b:0.55deg;
--sway-c:0.7deg;
}
/* Основной слой теперь показывает только забор: хвост рисуют
качающиеся копии, иначе под ними просвечивал бы неподвижный. */
.ind-fon-img{
-webkit-mask-image:linear-gradient(to bottom, #000 0 var(--ind-fon-solid), transparent var(--ind-fon-solid));
mask-image:linear-gradient(to bottom, #000 0 var(--ind-fon-solid), transparent var(--ind-fon-solid));
}
/* Обёртка задаёт зону по горизонтали, картинка внутри — хвост по
вертикали. Две маски на двух элементах: так не нужен mask-composite,
который поддержан не везде. */
/* Обёртка обязана совпадать с КАРТИНКОЙ, а не с блоком: проценты в её
маске отсчитываются от собственной ширины, и если оставить её по
ширине экрана, границы зон уедут (картинка шире экрана, и 38.5 % у
них — разные точки). Отсюда aspect-ratio по пропорции файла: при
height:100% ширина получается ровно такой же, как у картинки. */
.ind-sway{
position:absolute; top:0; bottom:0; left:50%;
height:100%; width:auto; aspect-ratio:1586 / 992;
transform:translateX(-50%);
pointer-events:none;
}
/* Внутри обёртки картинка занимает её целиком — своё центрирование ей
больше не нужно, поэтому transform свободен под skew. */
.ind-sway .ind-sway-img{
position:absolute; left:0; top:0;
width:100%; height:100%; min-width:0; max-width:none;
}
.ind-sway-1{
-webkit-mask-image:linear-gradient(to right, #000 0 38.8%, transparent 38.8%);
mask-image:linear-gradient(to right, #000 0 38.8%, transparent 38.8%);
}
.ind-sway-2{
-webkit-mask-image:linear-gradient(to right, transparent 0 38.2%, #000 38.2% 68.8%, transparent 68.8%);
mask-image:linear-gradient(to right, transparent 0 38.2%, #000 38.2% 68.8%, transparent 68.8%);
}
.ind-sway-3{
-webkit-mask-image:linear-gradient(to right, transparent 0 68.2%, #000 68.2%);
mask-image:linear-gradient(to right, transparent 0 68.2%, #000 68.2%);
}
.ind-sway-img{
-webkit-mask-image:linear-gradient(to bottom, transparent 0 var(--ind-fon-solid), #000 var(--ind-fon-solid));
mask-image:linear-gradient(to bottom, transparent 0 var(--ind-fon-solid), #000 var(--ind-fon-solid));
transform-origin:50% var(--ind-fon-solid);
will-change:transform;
}
.ind-sway-1 .ind-sway-img{ animation:indSwayA 9s ease-in-out infinite; }
.ind-sway-2 .ind-sway-img{ animation:indSwayB 13s ease-in-out infinite; }
.ind-sway-3 .ind-sway-img{ animation:indSwayC 11s ease-in-out infinite -4s; }
/* translateX(-50%) обязан остаться в каждом кадре: он держит картинку
по центру. Уберёшь — слой прыгнет вбок на половину своей ширины. */
@keyframes indSwayA{
0%,100%{ transform:skewX(calc(-1 * var(--sway-a))); }
50% { transform:skewX(var(--sway-a)); }
}
@keyframes indSwayB{
0%,100%{ transform:skewX(var(--sway-b)); }
50% { transform:skewX(calc(-1 * var(--sway-b))); }
}
@keyframes indSwayC{
0%,100%{ transform:skewX(calc(-1 * var(--sway-c))); }
50% { transform:skewX(var(--sway-c)); }
}
@media (prefers-reduced-motion: reduce){
.ind-sway-img{ animation:none; }
}
/* На телефоне у основного слоя своя маска: верх растворён в фактуру
секции, низ по-прежнему обрезан по линии крепления. */
@media (max-width:900px){
.ind-fon-img{
-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 30%, #000 var(--ind-fon-solid), transparent var(--ind-fon-solid));
mask-image:linear-gradient(to bottom, transparent 0, #000 30%, #000 var(--ind-fon-solid), transparent var(--ind-fon-solid));
}
/* Качающимся копиям растворение не нужно — они и так только хвост. */
.ind-sway-img{
-webkit-mask-image:linear-gradient(to bottom, transparent 0 var(--ind-fon-solid), #000 var(--ind-fon-solid));
mask-image:linear-gradient(to bottom, transparent 0 var(--ind-fon-solid), #000 var(--ind-fon-solid));
}
}
/* ╔══════════════════════════════════════════════════════════════════════╗
║ МЕТАЛЛИЧЕСКАЯ КНОПКА .mbtn ║
╠══════════════════════════════════════════════════════════════════════╣
║ Кайма — это padding у .mbtn. Под телом лежит .mbtn__rim, а в нём ║
║ три вложенных слоя, у каждого своё движение и свой период: ║
║ ║
║ __spin квадрат в диагональ кнопки, оборот за 18 с ║
║ __pulse масштаб 1 → 1.65 за 40 с, туда-обратно ║
║ __drift сам материал, снос вбок ±0.35 плитки за 29 с ║
║ ║
║ Периоды 18 / 40 / 29 подобраны так, чтобы долго не сходиться: ║
║ общий цикл выходит 10440 с — почти три часа. Практически картинка ║
║ не повторяется никогда. ║
║ ║
║ Три слоя, а не одна анимация, потому что все они пишут в transform ║
║ и затирали бы друг друга. ║
║ ║
║ Без JS слоёв нет, и в кайме остаётся статичный градиент, заданный ║
║ здесь же. Кнопка рабочая всегда. ║
╚══════════════════════════════════════════════════════════════════════╝ */
:root{
/* Материал каймы: три широких чёрных участка, между ними серебряная
вспышка, золотая и снова серебряная. Почти половина полосы — чистый
чёрный: без него переливаться нечему, кайма просто светится. */
--mb-stops:#000 0%, #000 15%,
#3a464f 19%, #a8bcc9 22%, #ffffff 26%, #c6d3dc 29%, #46545f 32%,
#000 37%, #000 50%,
#4a3a10 54%, #b8892b 58%, #f2dc9e 62%, #8d6f1e 66%,
#000 70%, #000 83%,
#5a6b77 86%, #e8f0f5 90%, #ffffff 93%, #6d7c88 96%,
#000 100%;
--mb-spin:18s; /* оборот */
--mb-pulse:40s; /* полупериод дыхания */
--mb-drift:29s; /* полупериод сноса */
--mb-zoom:1.65; /* во сколько раз раздувается материал на пике */
--mb-amp:.35; /* амплитуда сноса, доля плитки */
--mb-rate:1.15; /* общий множитель темпа */
}
.mbtn{
/* Светлая секция — значения по умолчанию */
--mb-rim:1.5px; /* толщина каймы */
--mb-k:1.4; /* размер плитки как доля от размера кнопки */
--mb-crush:2; /* контраст материала */
--mb-bright:.9; /* яркость материала */
/* Форма кнопки одной ручкой. Сто пикселей — капсула: торцы всегда
полукруглые, какой бы ширины ни была кнопка. На телефоне кнопки
короче, и капсула читается как таблетка — там значение другое,
см. медиазапрос в конце файла. */
--mb-r:100px;
position:relative; isolation:isolate;
display:inline-flex; align-items:center; justify-content:center;
padding:var(--mb-rim);
border:0; border-radius:var(--mb-r);
cursor:pointer; text-decoration:none;
-webkit-tap-highlight-color:transparent;
/* статичная кайма — она же запасной вариант, если JS не отработал */
background-image:linear-gradient(100deg, var(--mb-stops));
background-size:200% 100%;
box-shadow:0 0 0 1px rgba(7,40,28,.35),
0 18px 30px rgba(20,140,100,.22),
0 6px 12px rgba(7,40,28,.18);
transition:transform .25s ease, box-shadow .15s cubic-bezier(.4,0,.2,1);
/* Плитка — доля от размера кнопки, а НЕ абсолютные пиксели.
С фиксированной плиткой круглая кнопка 46×46 целиком помещалась
внутрь одной полосы и не переливалась вообще: ей нечего показывать. */
--mb-tile:max(40px, calc(var(--mb-size, 220px) * var(--mb-k)));
--mb-amp-px:calc(var(--mb-tile) * var(--mb-amp));
}
.mbtn:hover{
transform:translateY(-2px); /* тот же лифт, что у .btn */
box-shadow:0 0 0 1px rgba(7,40,28,.45),
0 10px 20px rgba(20,140,100,.3), 0 3px 7px rgba(7,40,28,.2);
}
.mbtn:active{
transform:translateY(0);
box-shadow:0 0 0 1px rgba(7,40,28,.5), 0 2px 4px rgba(7,40,28,.25);
}
.mbtn:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; }
/* Тёмная секция — свои значения */
.sec-dark .mbtn, .mbtn--on-dark{
--mb-rim:1.5px; --mb-k:1.5; --mb-crush:3; --mb-bright:1.5;
box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 22px 30px rgba(0,0,0,.35), 0 6px 12px rgba(0,0,0,.3);
}
.sec-dark .mbtn:hover, .mbtn--on-dark:hover{
box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 12px 20px rgba(0,0,0,.4), 0 3px 7px rgba(0,0,0,.3);
}
/* Тёмное тело — своя тень. Селектор из двух классов, чтобы перебить
`.sec-dark .mbtn` выше: у них одинаковая специфичность, и выигрывает
тот, что идёт позже. */
.mbtn.mbtn--night{
box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 22px 30px rgba(0,0,0,.35), 0 6px 12px rgba(0,0,0,.3);
}
.mbtn.mbtn--night:hover{
box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 12px 20px rgba(0,0,0,.4), 0 3px 7px rgba(0,0,0,.3);
}
/* ── слои каймы ── */
.mbtn__rim{
position:absolute; inset:0; z-index:0;
border-radius:inherit; overflow:hidden; pointer-events:none;
}
/* сверху светлее, снизу темнее */
.mbtn__rim::after{
content:""; position:absolute; inset:0; z-index:5; border-radius:inherit;
background:linear-gradient(180deg, rgba(255,255,255,.18) 0%,
rgba(255,255,255,0) 40%,
rgba(0,0,0,.5) 100%);
}
.mbtn__spin{
position:absolute; left:50%; top:50%; z-index:1;
width:var(--mb-size,220px); height:var(--mb-size,220px);
margin-left:calc(var(--mb-size,220px) / -2);
margin-top:calc(var(--mb-size,220px) / -2);
transform-origin:50% 50%;
animation:mbtn-spin calc(var(--mb-spin) / var(--mb-rate)) linear infinite;
}
/* Масштаб только вверх от 1: квадрат ровно равен диагонали кнопки,
уменьшить его — значит при повороте оголить углы. */
.mbtn__pulse{
position:absolute; inset:0; transform-origin:50% 50%;
animation:mbtn-pulse calc(var(--mb-pulse) / var(--mb-rate)) ease-in-out infinite alternate;
}
/* Слой сноса шире родителя на амплитуду с каждой стороны — иначе на краю
сноса вылезет полоса пустоты. Материал живёт здесь. */
.mbtn__drift{
position:absolute; top:0; bottom:0;
left:calc(var(--mb-amp-px) * -1); right:calc(var(--mb-amp-px) * -1);
background-image:linear-gradient(100deg, var(--mb-stops));
background-repeat:repeat;
background-size:var(--mb-tile) var(--mb-tile);
filter:contrast(var(--mb-crush)) brightness(var(--mb-bright));
animation:mbtn-drift calc(var(--mb-drift) / var(--mb-rate)) ease-in-out infinite alternate;
}
@keyframes mbtn-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes mbtn-pulse{ from{transform:scale(1)} to{transform:scale(var(--mb-zoom))} }
@keyframes mbtn-drift{ from{transform:translateX(calc(var(--mb-amp-px) * -1))}
to {transform:translateX(var(--mb-amp-px))} }
/* Разгон под курсором делает metal-button.js через playbackRate.
Через animation-duration нельзя: браузер пересчитывает точку цикла,
и картинка прыгает — Павел это и увидел. */
/* ── тело кнопки ── */
.mbtn__body{
position:relative; z-index:1;
display:flex; align-items:center; justify-content:center; gap:8px;
/* Тело чуть меньше кнопки на толщину каймы, иначе на скруглении
кайма съедается телом и угол выглядит рваным. */
border-radius:calc(var(--mb-r) - var(--mb-rim));
overflow:hidden; /* чтобы рябь не вылезала */
padding:14px 27px; /* 15/28 у .btn минус кайма */
font-family:var(--font-text);
font-size:14px; font-weight:500; letter-spacing:.04em; line-height:1;
white-space:nowrap;
background:linear-gradient(180deg, #c8f6e2 0%, #8fe8c4 44%, #3fbf8c 100%);
color:#08281c;
box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
transition:transform .15s cubic-bezier(.4,0,.2,1), box-shadow .15s cubic-bezier(.4,0,.2,1);
}
.mbtn:active .mbtn__body{
transform:translateY(1px) scale(.99);
box-shadow:inset 0 2px 5px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.55);
}
.mbtn--night .mbtn__body{
background:linear-gradient(180deg, #1a2420 0%, #0e1512 55%, #060a08 100%);
color:var(--mint);
box-shadow:inset 0 1px 0 rgba(143,232,196,.22);
}
.mbtn--night:active .mbtn__body{
box-shadow:inset 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(143,232,196,.22);
}
.mbtn--lg .mbtn__body{
padding:17px 39px; font-size:clamp(16px, 2vw, 20px); letter-spacing:.06em;
}
.mbtn--icon .mbtn__body{ width:46px; height:46px; padding:0; }
/* Мелкая. Для служебных ссылок вроде «все работы»: та же кнопка со
всей каймой и переливом, но по весу — строчка, а не призыв. */
.mbtn--sm .mbtn__body{
padding:9px 19px; font-size:12px; letter-spacing:.06em;
}
/* ── наливная ──
Тёмная кнопка, в которую при наведении снизу поднимается мятная
заливка, а надпись под ней темнеет — тот же жест, что у карточек
отраслей. Слоёв фона два: мятный сверху, тёмный под ним. Растёт
не подложка, а высота мятного слоя, от нижнего края вверх.
Через background-size, а не через псевдоэлемент: надпись внутри
тела — голый текстовый узел, поднять её над псевдоэлементом
нечем, и заливка накрыла бы её целиком. */
.mbtn--naliv .mbtn__body{
background-color:transparent;
background-image:
linear-gradient(180deg, #c8f6e2 0%, #8fe8c4 45%, #3fbf8c 100%),
linear-gradient(180deg, #1a2420 0%, #0e1512 55%, #060a08 100%);
background-repeat:no-repeat, no-repeat;
background-position:50% 100%, 0 0;
background-size:100% 0%, 100% 100%;
transition:background-size .5s cubic-bezier(.22,1,.36,1),
color .3s ease,
transform .15s cubic-bezier(.4,0,.2,1),
box-shadow .15s cubic-bezier(.4,0,.2,1);
}
/* .navel вешает navedenie.js: одного :hover мало, если поверх страницы
лежит чужой слой — окно чата, панель расширения. */
.mbtn--naliv:hover .mbtn__body,
.mbtn--naliv.navel .mbtn__body{
background-size:100% 100%, 100% 100%;
color:#08281c;
}
@media (prefers-reduced-motion: reduce){
.mbtn--naliv .mbtn__body{ transition:none; }
}
/* ── рябь от нажатия ── */
.mbtn__ripple{
position:absolute; width:20px; height:20px; border-radius:50%; pointer-events:none;
background:radial-gradient(circle, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 70%);
animation:mbtn-ripple .6s ease-out forwards;
}
@keyframes mbtn-ripple{
0% { transform:translate(-50%,-50%) scale(0); opacity:.55; }
100%{ transform:translate(-50%,-50%) scale(4); opacity:0; }
}
/* Кнопки вне экрана не анимируются — страница и так тяжёлая. */
.mbtn.is-away .mbtn__spin,
.mbtn.is-away .mbtn__pulse,
.mbtn.is-away .mbtn__drift{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){
.mbtn__spin, .mbtn__pulse, .mbtn__drift{ animation:none; }
.mbtn, .mbtn__body{ transition:none; }
.mbtn__ripple{ display:none; }
}
/* ╔══════════════════════════════════════════════════════════════════════╗
║ ПЛАШКИ КАЛЬКУЛЯТОРА .mchip ║
╠══════════════════════════════════════════════════════════════════════╣
║ Механика та же, что у кнопки, но кайма несёт смысл, а не блеск: ║
║ не выбрано — горит персиково-коралловым, выбрано — нашим мятным. ║
║ ║
║ В покое кайма светится РОВНО: тридцать семь переливающихся плашек ║
║ в одном блоке читались бы как гирлянда. Живой перелив включается ║
║ под курсором — тогда он на одной плашке и к месту. ║
║ ║
║ Разметка не меняется: .chip остаётся label со скрытым input внутри, ║
║ а .chip-face — лицевой частью. Состояние держится на соседстве ║
║ input:checked + .chip-face, и рвать его нельзя — поэтому скрипт ║
║ ничего не заворачивает, а только вставляет слои каймы. ║
╚══════════════════════════════════════════════════════════════════════╝ */
:root{
/* Ровное свечение каймы */
--mch-warm:linear-gradient(160deg, #f7b39f 0%, #e8836b 55%, #cf6349 100%);
--mch-mint:linear-gradient(160deg, #cffbe6 0%, #6fd8ab 55%, #2f9d71 100%);
/* Живой материал под курсором: вместо чёрных участков — глубокий тон
той же семьи, иначе на мелкой плашке получается грязь. */
--mch-stops-warm:#8f3a26 0%, #8f3a26 14%,
#d4674a 19%, #ffd9c9 24%, #ffffff 27%, #f09078 31%,
#8f3a26 38%, #8f3a26 52%,
#e8836b 57%, #ffe3d6 62%, #ffffff 65%, #c2543c 69%,
#8f3a26 76%, #8f3a26 88%,
#f2a48d 92%, #ffffff 96%,
#8f3a26 100%;
--mch-stops-mint:#0e5f43 0%, #0e5f43 14%,
#3fbf8c 19%, #cffbe6 24%, #ffffff 27%, #6fd8ab 31%,
#0e5f43 38%, #0e5f43 52%,
#8fe8c4 57%, #eafff5 62%, #ffffff 65%, #2f9d71 69%,
#0e5f43 76%, #0e5f43 88%,
#a8f0d3 92%, #ffffff 96%,
#0e5f43 100%;
}
.mchip{
--mb-rim:1.5px;
--mb-k:1.6; /* плашка мелкая, плитку берём крупнее её самой */
--mb-crush:1.35; /* цвет не давим: тут важен тон, а не контраст */
--mb-bright:1.05;
--mb-tile:max(40px, calc(var(--mb-size, 160px) * var(--mb-k)));
--mb-amp-px:calc(var(--mb-tile) * var(--mb-amp));
position:relative; isolation:isolate;
display:block; padding:var(--mb-rim);
border-radius:12.5px; /* 11 у лица + кайма */
cursor:pointer;
-webkit-tap-highlight-color:transparent;
background-image:var(--mch-warm);
/* «Горит»: мягкий ореол тем же тоном */
box-shadow:0 0 0 1px rgba(180,72,48,.14), 0 2px 9px rgba(232,131,107,.28);
transition:box-shadow .2s ease, transform .15s ease;
}
.mchip:active{ transform:scale(.97); }
/* Выбрано — кайма уходит в мяту, ореол вместе с ней */
.mchip:has(input:checked){
background-image:var(--mch-mint);
box-shadow:0 0 0 1px rgba(11,143,98,.18), 0 2px 9px rgba(63,191,140,.32);
}
/* ── лицевая часть как тело ── */
.mchip .mbtn__body{
display:block; padding:9px 13px;
border:0; border-radius:11px;
background:rgba(255,255,255,.86);
color:inherit;
font-family:inherit; font-size:inherit; font-weight:inherit;
letter-spacing:normal; line-height:normal; white-space:normal;
box-shadow:none;
overflow:hidden; /* рябь не должна вылезать */
transition:background .2s ease;
}
.mchip input:checked + .mbtn__body{ background:var(--mint); }
.mchip input:focus-visible + .mbtn__body{ outline:2px solid var(--mint-ink); outline-offset:2px; }
.mchip:active .mbtn__body{ transform:none; }
/* ── слои каймы: в покое не видны, проявляются под курсором ── */
.mchip .mbtn__rim{ opacity:0; transition:opacity .25s ease; }
.mchip .mbtn__rim::after{ background:none; }
.mchip .mbtn__drift{
background-image:linear-gradient(100deg, var(--mch-stops-warm));
}
.mchip:has(input:checked) .mbtn__drift{
background-image:linear-gradient(100deg, var(--mch-stops-mint));
}
@media (hover:hover){
.mchip:hover .mbtn__rim{ opacity:1; }
.mchip:hover{ box-shadow:0 0 0 1px rgba(180,72,48,.22), 0 4px 14px rgba(232,131,107,.38); }
.mchip:has(input:checked):hover{
box-shadow:0 0 0 1px rgba(11,143,98,.26), 0 4px 14px rgba(63,191,140,.42);
}
}
/* Пока курсора нет, слои не крутятся вхолостую. */
.mchip:not(:hover) .mbtn__spin,
.mchip:not(:hover) .mbtn__pulse,
.mchip:not(:hover) .mbtn__drift{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){
.mchip .mbtn__rim{ display:none; }
}
/* ── стыковка с существующими классами кнопок ──────────────────────────
Старые модификаторы задавали padding и display самой кнопке. У .mbtn
padding — это толщина каймы, поэтому его надо вернуть, а размеры и
отступы перенести на тело или оставить только внешние. */
.mbtn.pl-btn{ padding:var(--mb-rim); margin-top:20px; }
.mbtn.calc-go{ display:flex; width:100%; margin-top:18px; }
.mbtn.calc-go .mbtn__body{ width:100%; }
.mbtn.mbtn--lg{ margin-top:26px; }
/* ── плашки: правки после первого просмотра ────────────────────────────
1. У выбранной плашки кайма была светлее собственного тела и сливалась
с ним — берём мяту глубже, тело остаётся светлым мятным.
2. Тело невыбранной слегка розовело: сквозь него просвечивала кайма.
Делаем подложку плотнее. */
:root{
--mch-mint:linear-gradient(160deg, #6fd8ab 0%, #2f9d71 55%, #0e6b4a 100%);
}
.mchip .mbtn__body{ background:#fbfdfc; }
/* ╔══════════════════════════════════════════════════════════════════════╗
║ ВИТРИННЫЕ ПЛАШКИ: .be-chips li и .ob-cell ║
╠══════════════════════════════════════════════════════════════════════╣
║ Не кнопки и не переключатели — просто перечисления. Кайма у них та ║
║ же металлическая и живая, но ряби от нажатия нет: жать не на что. ║
║ Классы в разметку не ставим — их десятки на девяти страницах, ║
║ скрипт находит их по этим же селекторам. ║
║ ║
║ Прежние рамка и заливка отдаются кайме, всё остальное переезжает ║
║ в тело: скрипт заворачивает содержимое в .mbtn__body. ║
╚══════════════════════════════════════════════════════════════════════╝ */
.be-chips > li{
--mb-rim:1.5px; --mb-k:1.5; --mb-crush:2; --mb-bright:.9;
--mb-tile:max(40px, calc(var(--mb-size, 120px) * var(--mb-k)));
--mb-amp-px:calc(var(--mb-tile) * var(--mb-amp));
position:relative; isolation:isolate;
padding:var(--mb-rim); border:0; border-radius:999px;
background-image:linear-gradient(100deg, var(--mb-stops));
box-shadow:0 0 0 1px rgba(7,40,28,.14), 0 3px 10px rgba(20,140,100,.14);
}
.be-chips > li .mbtn__body{
display:block; padding:7px 14px; border-radius:999px;
font-size:13.5px; font-weight:400; letter-spacing:normal; line-height:normal;
white-space:normal; text-align:left;
background:rgba(255,255,255,.94); color:var(--l-ink);
box-shadow:none;
}
.be-chips > li:hover{
transform:translateY(-2px);
box-shadow:0 0 0 1px rgba(7,40,28,.2), 0 6px 14px rgba(20,140,100,.2);
}
.be-chips > li:hover .mbtn__body{ background:#ffffff; }
.ob-cell{
--mb-rim:1.5px; --mb-k:1.4; --mb-crush:2; --mb-bright:.9;
--mb-tile:max(40px, calc(var(--mb-size, 160px) * var(--mb-k)));
--mb-amp-px:calc(var(--mb-tile) * var(--mb-amp));
position:relative; isolation:isolate;
display:block; padding:var(--mb-rim);
border:0; border-radius:17.5px;
background:none;
background-image:linear-gradient(100deg, var(--mb-stops));
box-shadow:0 0 0 1px rgba(7,40,28,.12), 0 6px 16px rgba(20,140,100,.14);
}
.ob-cell .mbtn__body{
display:grid; justify-items:center; gap:10px;
padding:18px 10px 14px; border-radius:16px;
background:#fbfdfc;
font-size:inherit; letter-spacing:normal; line-height:normal;
white-space:normal; box-shadow:none;
}
.ob-cell:hover{
transform:translateY(-4px);
background:none;
background-image:linear-gradient(100deg, var(--mb-stops));
box-shadow:0 0 0 1px rgba(7,40,28,.18), 0 10px 22px rgba(20,140,100,.2);
}
.ob-cell:hover .mbtn__body{ background:#fff; }
/* На тёмной полосе тело остаётся тёмным, меняются только параметры
материала — как у кнопок в тёмной секции. */
.dark-band .ob-cell{
--mb-k:1.5; --mb-crush:3; --mb-bright:1.5;
background:none; background-image:linear-gradient(100deg, var(--mb-stops));
box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 10px 22px rgba(0,0,0,.3);
}
.dark-band .ob-cell .mbtn__body{ background:#121a16; }
.dark-band .ob-cell:hover .mbtn__body{ background:#17241e; }
@media (max-width:900px){
.ob-cell .mbtn__body{ padding:14px 8px 12px; }
}
/* Тело плитки не растягивалось на всю ширину и кайма читалась как
широкая чёрная рама. Ширину задаём явно, а материал на крупной
плитке смягчаем: на светлом фоне чистый чёрный выглядит грязью. */
.ob-cell{ --mb-crush:1.5; --mb-bright:1.15; }
.ob-cell > .mbtn__body{ width:100%; box-sizing:border-box; }
.be-chips > li > .mbtn__body{ width:100%; box-sizing:border-box; }
/* ── непрозрачные подложки ─────────────────────────────────────────────
Мы выбрали металл, а не стекло: сквозь полупрозрачное тело был виден
бегущий за ним материал, и плашка читалась мутно. Все подложки
сплошные. */
.be-chips > li .mbtn__body{ background:#fbfdfc; }
.mchip .mbtn__body{ background:#fbfdfc; }
.mchip input:checked + .mbtn__body{ background:#8fe8c4; }
/* ╔══════════════════════════════════════════════════════════════════════╗
║ ОТРАСЛИ: КАЙМА, ПЛОТНОЕ ТЕЛО, МЯТНАЯ ЗАЛИВКА ║
╠══════════════════════════════════════════════════════════════════════╣
║ Восемь карточек блока «Кому и что обычно нужно» получают ту же ║
║ живую кайму, что кнопки. Селекторы через #industries — выше по ║
║ файлу карточки уже описаны дважды (общий вид и тёмная секция), и ║
║ перебить оба набора можно только весом идентификатора. ║
╚══════════════════════════════════════════════════════════════════════╝ */
/* Старая обводка выключается совсем. Она рисовалась двумя слоями —
верхняя черта и рамка по бокам — и ложилась ровно туда, где теперь
идёт металл. */
#industries .ind::before,
#industries .ind::after{ content:none; }
/* Сама карточка превращается в кайму: её «фон» — полоса металла, а
всё содержимое уезжает в тело, которое скрипт заворачивает сам.
Значения материала тёмные — блок тёмный, как и полоса под плитками
на внутренних страницах. */
#industries .ind{
--mb-rim:1.5px; --mb-k:1.5; --mb-crush:3; --mb-bright:1.5;
--mb-tile:max(40px, calc(var(--mb-size, 300px) * var(--mb-k)));
--mb-amp-px:calc(var(--mb-tile) * var(--mb-amp));
position:relative; isolation:isolate;
/* flex — чтобы тело растянулось на всю высоту карточки: сетка тянет
карточки ряда по самой длинной, а тело об этом не знает. */
display:flex; padding:var(--mb-rim);
border:0; border-radius:15.5px;
background:none;
background-image:linear-gradient(100deg, var(--mb-stops));
box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 14px 26px rgba(0,0,0,.3);
transition:transform .25s ease, box-shadow .15s cubic-bezier(.4,0,.2,1);
}
/* Тело. Общее правило .mbtn__body сделано под кнопку — текст в строку,
по центру, мятная заливка. Здесь всё наоборот: колонка, по левому
краю, тёмная плотная подложка. Поэтому перечисляем явно. */
#industries .ind > .mbtn__body{
flex:1 1 auto; min-width:0;
display:flex; flex-direction:column; align-items:stretch;
justify-content:flex-start; gap:0;
width:100%; box-sizing:border-box;
padding:20px 20px 18px; border-radius:14px;
background:#121a16;
font:inherit; letter-spacing:normal; line-height:normal;
white-space:normal; text-align:left;
color:inherit; box-shadow:none;
}
/* Мятная заливка. Круг с центром в левом верхнем углу: в покое нулевой,
под курсором раздувается за пределы карточки. Радиус 150 % — по
диагонали, чтобы дальний угол тоже закрасился.
Лежит под текстом, но над подложкой. */
/* Круг растёт из левого верхнего угла. Раньше это делал clip-path —
он залипал: курсор уходил, а заливка оставалась. Теперь transform,
он идёт композитором и откатывается всегда. Подробности в
_tools\zb_zalivka_fix.py. */
#industries .ind > .mbtn__body{ overflow:hidden; }
#industries .ind > .mbtn__body::after{
content:''; position:absolute; z-index:0; pointer-events:none;
left:0; top:0; width:300%; aspect-ratio:1; border-radius:50%;
background:linear-gradient(135deg, #c8f6e2 0%, #8fe8c4 45%, #3fbf8c 100%);
transform:translate(-50%, -50%) scale(0);
transform-origin:50% 50%;
transition:transform .55s cubic-bezier(.22,1,.36,1);
}
#industries .ind > .mbtn__body > *{ position:relative; z-index:1; }
@media (hover:hover){
/* Всюду ниже к :hover добавлен класс .navel — его вешает
js\navedenie.js. Одного :hover мало: Chromium не всегда
пересчитывает по нему стиль ПСЕВДОЭЛЕМЕНТА, и заливка не
запускалась при заходе курсора с правой стороны. Смена
класса на самом элементе пересчёт гарантирует. */
#industries .ind:hover,
#industries .ind.navel{
transform:translateY(-3px);
box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 20px 34px rgba(0,0,0,.38);
background:none;
background-image:linear-gradient(100deg, var(--mb-stops));
}
#industries .ind:hover > .mbtn__body,
#industries .ind.navel > .mbtn__body{ background:#121a16; }
#industries .ind:hover > .mbtn__body::after,
#industries .ind.navel > .mbtn__body::after{
transform:translate(-50%, -50%) scale(1); }
/* Текст на мяте. Светлый по мятному не читается совсем, поэтому вся
карточка на время наведения переходит в тёмно-зелёный. Переход
чуть быстрее заливки: буквы должны потемнеть до того, как волна
до них дойдёт, иначе на полсекунды они пропадают. */
#industries .ind:hover h3,
#industries .ind.navel h3{ color:#08281c; }
#industries .ind:hover .ind-lead,
#industries .ind.navel .ind-lead{ color:rgba(8,40,28,.78); }
#industries .ind:hover .ind-kit{
color:#08281c; border-top-color:rgba(8,40,28,.22);
}
#industries .ind:hover .ind-no,
#industries .ind:hover .ind-min{ color:#0b6b49; }
}
#industries .ind h3,
#industries .ind .ind-lead,
#industries .ind .ind-kit,
#industries .ind .ind-no,
#industries .ind .ind-min{
transition:color .32s ease, border-color .32s ease;
}
/* Телефон: кайма та же, поля тела меньше — как было у карточек. */
@media (max-width:560px){
#industries .ind > .mbtn__body{ padding:16px 16px 14px; }
}
/* ── манекен: чуть выше ноги ───────────────────────────────────────────
Просьба Павла: локоть лежит правильно, поднять только ноги, примерно
на десять пикселей. Ноги у фигуры справа, точка опоры (локоть) —
в левой трети, она же центр поворота. Поворот против часовой на
1.4° поднимает дальний край на те самые десять пикселей при ширине
фигуры 620 px и оставляет локоть на месте.
Раньше наклон держали на нуле, потому что на больших углах поза
читается как падение. Полтора градуса этого не делают. */
#industries{ --ind-geko-tilt:-1.4deg; }
/* ── ПРАВКИ ПОСЛЕ ПРОСМОТРА: ноги, заливка, высота, подложка ──
НОГИ. Первый заход поднял их на десять пикселей — мало. Фигура
поворачивается вокруг локтя, он остаётся на месте; четыре градуса
при ширине фигуры 620 px дают около тридцати пикселей на дальнем
конце. Больше уже читается как падение — на этом и остановились. */
#industries{ --ind-geko-tilt:-4deg;
/* Ниже прежнего: поднятые ноги увели пятку от карточки,
опускаем фигуру, чтобы она на неё легла. */
--ind-geko-drop:-70%; }
/* ЗАЛИВКА. Была градиентом до тёмно-зелёного внизу — накрытая
карточка получалась темнее соседних, и заливка читалась как тень, а
не как подсветка. Теперь ровная светлая мята: чуть светлее самой
карточки, без ухода в тёмное. */
#industries .ind > .mbtn__body::after{
background:linear-gradient(135deg, #ddfcef 0%, #b4f2da 55%, #a3eed0 100%);
}
/* ВЫСОТА БЛОКА. Между свисающей листвой и первой строкой лежало под
сотню пикселей голого дерева. Поле было взято под манекен, но он
стоит правее и выше — этому месту оно не нужно. Убираем почти всё:
блок поднимается целиком, вместе с карточками, и становится короче
ровно на снятое. */
#industries .sec-head{ margin-top:clamp(0px, 1vw, 16px); }
/* ПОДЛОЖКА ПОД «ОТРАСЛИ». Слово лежит на фотографии дерева, и на
светлых досках тонкие буквы теряются. Чёрная плашка со скруглением —
тот же приём, что у карточек, только мельче. */
#industries .sec-head .eyebrow-l{
display:inline-block;
padding:7px 15px 6px;
border-radius:999px;
background:#05100c;
box-shadow:0 0 0 1px rgba(143,232,196,.16), 0 6px 16px rgba(0,0,0,.4);
}
/* ╔══════════════════════════════════════════════════════════════════════╗
║ ШАПКА «МЕРЧЕЛЛИ» — НАЧАЛО БЛОКА ║
║ Присланная и утверждённая шапка. Внутри ничего не менялось, кроме ║
║ имён: на сайте уже заняты .panel (плашки стоп-кадров ролика), ║
║ .brand и .snow (снег на новогодней). Всё своё носит приставку hb- ║
║ (header button), переменные — --hb-. Поведение и вид те же. ║
║ Блок самодостаточный: вырезается целиком до парной строки «КОНЕЦ». ║
╚══════════════════════════════════════════════════════════════════════╝ */
.hdr{
/* ── одобренные значения. Менять только эти восемь строк ── */
--hb-r:16px; /* скругление кнопки */
--hb-rim:1.2px; /* толщина металлической каймы */
--hb-h:38px; /* высота кнопки */
--hb-disc:55px; /* диаметр круга-логотипа */
--hb-drop:0px; /* насколько круг выходит НИЖЕ плашки.
Пробовали 7 — фигура стала хуже, вернули 0.
Механика подъёма в header.js осталась:
при нуле она сводится к прежней формуле. */
--hb-crush:1; /* контраст металла */
--hb-bright:.85; /* яркость металла */
--hb-rate:1.15; /* общий темп анимаций */
--hb-jitter:.85; /* разброс: 0 — все в такт, 1 — вразнобой */
--hb-spin:18s; --hb-pulse:40s; --hb-drift:29s;
--hb-zoom:1.65; --hb-amp:.35;
--hb-mint:#8fe8c4; --hb-deep:#08281c;
--hb-font:"Exo 2","Segoe UI",system-ui,-apple-system,sans-serif;
--hb-font-display:"Unbounded","Segoe UI",system-ui,sans-serif;
position:fixed;top:0;left:0;right:0;z-index:60;padding:18px 26px;
font-family:var(--hb-font);
}
/* дымка сверху: без неё светлые кнопки тонут на светлых экранах сайта */
.hdr::before{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.28) 45%,transparent 100%)}
.hdr-in{max-width:1360px;margin:0 auto;display:flex;align-items:flex-end;gap:14px}
.hdr .hb-spacer{flex:1}
/* ══════════════════ КНОПКА ══════════════════
Кайма — не рамка, а слой металла во всю кнопку. Тело лежит сверху
с отступом в --hb-rim, и наружу выглядывает только ободок. Поэтому
кайма живая по всему периметру, а не покрашенный border. */
.hb{
position:relative;isolation:isolate;
display:inline-flex;align-items:center;justify-content:center;
padding:var(--hb-rim);border:0;border-radius:var(--hb-r);background:transparent;
cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;
box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 12px 22px rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.25);
transition:transform .25s ease, box-shadow .18s ease, border-radius .3s ease;
--hb-tile:max(40px, calc(var(--hb-size,220px) * 1.5));
--hb-ampx:calc(var(--hb-tile) * var(--hb-amp));
}
.hb:hover{transform:translateY(-2px)}
.hb:active{transform:translateY(0)}
.hb:focus-visible{outline:2px solid var(--hb-mint);outline-offset:3px}
/* Кнопка-помощник. Единственная в шапке, что меняет назначение по
месту: на ролике «К делу», при листании «Наверх», на внутренних
страницах «На главную». Среди одинаковых чёрных плашек меню она
терялась, поэтому кайма у неё толще и ярче, а под ней мятный свет. */
.hb-ctx{
--hb-rim:2.2px; /* кайма толще: 1.2 -> 2.2 */
--hb-crush:1.6; /* контраст металла выше */
--hb-bright:1.4; /* и яркость тоже */
box-shadow:0 0 0 1px rgba(143,232,196,.5),
0 0 18px rgba(143,232,196,.42),
0 12px 22px rgba(0,0,0,.34), 0 3px 8px rgba(0,0,0,.28);
}
.hb-ctx:hover{
box-shadow:0 0 0 1px rgba(143,232,196,.78),
0 0 28px rgba(143,232,196,.62),
0 12px 22px rgba(0,0,0,.34), 0 3px 8px rgba(0,0,0,.28);
}
/* три вложенных слоя, потому что все трое пишут в transform:
вращение → пульсация → снос. Периоды 18/40/29 взаимно просты,
поэтому точный повтор картинки наступает раз в несколько часов. */
.hb__rim{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.hb__rim::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;
background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,.5) 100%)}
.hb__spin{position:absolute;left:50%;top:50%;z-index:1;
width:var(--hb-size,220px);height:var(--hb-size,220px);
margin-left:calc(var(--hb-size,220px) / -2);margin-top:calc(var(--hb-size,220px) / -2);
transform-origin:50% 50%;
animation:hb-spin calc(var(--hb-spin)/var(--hb-rate)) linear infinite}
.hb__pulse{position:absolute;inset:0;transform-origin:50% 50%;
animation:hb-pulse calc(var(--hb-pulse)/var(--hb-rate)) ease-in-out infinite alternate}
.hb__drift{position:absolute;top:0;bottom:0;
left:calc(var(--hb-ampx) * -1);right:calc(var(--hb-ampx) * -1);
background-image:linear-gradient(100deg,var(--hb-stops));
background-repeat:repeat;background-size:var(--hb-tile) var(--hb-tile);
filter:contrast(var(--hb-crush)) brightness(var(--hb-bright));
animation:hb-drift calc(var(--hb-drift)/var(--hb-rate)) ease-in-out infinite alternate}
@keyframes hb-spin {from{transform:rotate(0)} to{transform:rotate(360deg)}}
@keyframes hb-pulse{from{transform:scale(1)} to{transform:scale(var(--hb-zoom))}}
@keyframes hb-drift{from{transform:translateX(calc(var(--hb-ampx) * -1))} to{transform:translateX(var(--hb-ampx))}}
.hb__body{
position:relative;z-index:1;
display:flex;align-items:center;justify-content:center;gap:8px;
height:calc(var(--hb-h) - var(--hb-rim) * 2);
border-radius:calc(var(--hb-r) - var(--hb-rim));overflow:hidden;
padding:0 18px;
font-size:13.5px;font-weight:600;letter-spacing:.03em;white-space:nowrap;
background:var(--hb-body-bg);color:var(--hb-body-ink);
box-shadow:inset 0 1px 0 var(--hb-body-gloss);
transition:background .25s ease, color .25s ease, border-radius .3s ease;
}
.hb:active .hb__body{transform:translateY(1px) scale(.99)}
.hb .hb-chev{width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
transform:rotate(45deg) translate(-1px,-1px);opacity:.65;transition:transform .25s ease;z-index:3}
.hb-grp.is-open .hb-chev{transform:rotate(-135deg) translate(-1px,-1px);opacity:1}
/* Заметные пункты — «Новый год» и «Вдохновение». Заголовочный шрифт,
полный вес и полная яркость: на цветной плашке обычная надпись
тонет, а это как раз то, мимо чего человек не должен пройти. */
.hb.is-strong .hb__body{
font-family:var(--hb-font-display);
font-weight:700;letter-spacing:.01em;font-size:13px;
color:var(--hb-strong-ink);
text-shadow:0 1px 2px var(--hb-strong-shadow);
}
/* Пункт без своей страницы («Вдохновение», «Блог»). Не ссылка, а
надпись: вести человека в никуда нечестно. Кайма та же, тело
приглушено, курсор обычный. Появятся страницы — снимется класс. */
.hb.is-soon{cursor:default}
.hb.is-soon:hover{transform:none}
/* Текущий раздел. Метка тихая — тонкая мятная черта под надписью, а
не заливка: пункт и так уже открыт, кричать об этом незачем, а
заливка спорила бы с «Новым годом» и «Вдохновением», которые
выделены по делу. Черту рисуем на теле кнопки, чтобы она не спорила
с живой каймой снаружи.
Ставит класс js/header.js по первому куску адреса. */
.hb.is-now .hb__body{ position:relative; }
.hb.is-now .hb__body::after{
content:''; position:absolute; left:0; right:0; bottom:-3px;
height:2px; border-radius:2px;
background:var(--hb-strong-ink, #8fe8c4); opacity:.9;
}
/* Раздел лежит в закрытой панели, поэтому помечаем и саму вкладку —
иначе снаружи не видно, где человек находится. */
.hb-grp.has-now > .hb .hb__body{ color:var(--hb-strong-ink, #8fe8c4); }
/* Приглушения тела НЕТ намеренно: плашка залита целиком, как все
остальные. Что раздела ещё нет, человек понимает иначе — пункт
просто не нажимается. */
/* ── снег внутри кнопки (сезонный эффект) ── */
.hb-snow{position:absolute;inset:0;z-index:2;overflow:hidden;border-radius:inherit;pointer-events:none}
.hb-snow i{position:absolute;top:-8px;left:var(--x);width:var(--s);height:var(--s);
border-radius:50%;background:#fff;opacity:0;
animation:hb-snowfall var(--d) linear var(--dl) infinite}
@keyframes hb-snowfall{
0%{transform:translateY(0);opacity:0} 14%{opacity:var(--o)}
72%{opacity:var(--o)} 100%{transform:translateY(var(--fall));opacity:0}
}
/* ══════════════════ ЛОГОТИП + ТЕЛЕФОН ══════════════════
Силуэт — объединение круга и полосы. Полоса выровнена по НИЗУ круга,
круг за счёт этого возвышается над рядом. Форма считается SVG-путём и
вешается clip-path'ом: отдельно на кайму, отдельно на тело внутри.
clip-path срезает box-shadow, поэтому тень — drop-shadow на обёртке. */
.hb-brandwrap{display:flex;filter:drop-shadow(0 9px 15px rgba(0,0,0,.45)) drop-shadow(0 2px 5px rgba(0,0,0,.35))}
.hb-brand{height:var(--hb-disc);border-radius:0;box-shadow:none;padding:var(--hb-rim);align-items:stretch}
.hb-brand .hb__body{height:auto;flex:1;border-radius:0;padding:0;gap:0;
justify-content:flex-start;align-items:stretch}
.hb-brand .hb-logo{flex:0 0 auto;width:calc(var(--hb-disc) - var(--hb-rim) * 2);
display:flex;align-items:center;justify-content:center;
font-family:var(--hb-font-display);font-weight:600;
font-size:calc(var(--hb-disc) * .34);letter-spacing:-.02em;color:var(--hb-body-ink)}
.hb-brand .hb-tel{display:flex;align-items:center;align-self:flex-end;
height:calc(var(--hb-h) - var(--hb-rim) * 2);
margin-bottom:var(--hb-drop);
overflow:hidden;white-space:nowrap;max-width:210px;padding-right:20px;
font-variant-numeric:tabular-nums;letter-spacing:.04em;
transition:max-width .42s cubic-bezier(.4,0,.2,1), padding-right .42s, opacity .28s}
.hdr.is-small .hb-brand .hb-tel{max-width:0;padding-right:0;opacity:0}
/* ══════════════════ РЯД ВКЛАДОК ══════════════════ */
.hdr .hb-nav{display:flex;align-items:flex-end;gap:10px}
.hb-groups{display:flex;align-items:flex-end;gap:10px;max-width:1200px;
transition:max-width .4s cubic-bezier(.4,0,.2,1), opacity .28s ease, transform .32s ease}
.hdr.is-small .hb-groups{max-width:0;opacity:0;transform:translateX(18px) scale(.96);pointer-events:none}
.hb-menupill{max-width:0;opacity:0;overflow:hidden;pointer-events:none;
transition:max-width .4s cubic-bezier(.4,0,.2,1), opacity .28s ease}
.hdr.is-small .hb-menupill{max-width:180px;opacity:1;pointer-events:auto}
.hb-grp{position:relative}
/* Подложки у панели НЕТ. Кнопки висят в воздухе. Сама .hb-panel —
невидимая коробка: она держит зазоры между кнопками внутри зоны
наведения, иначе мышь между ними проваливалась бы и панель
схлопывалась. */
.hb-panel{position:absolute;top:100%;left:50%;margin-top:12px;
display:flex;gap:9px;transform:translateX(-50%);pointer-events:none}
/* мост до панели: по дороге вниз мышь пересекает зазор */
.hb-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:16px}
.hb-grp.is-open .hb-panel{pointer-events:auto}
.hb-panel .hb__body{font-size:13px;padding:0 14px}
/* ── выкат: пункты выезжают из-под вкладки по очереди ──
Появление живёт на обёртке .hb-pit, а не на самой .hb: у кнопки свой
transform на наведении, они бы затирали друг друга. */
.hb-pit{display:inline-flex;opacity:0;
transform:translate(var(--hb-dx,0px), -18px) scale(.86);
transition:opacity .26s ease, transform .5s cubic-bezier(.22,1.35,.42,1);
transition-delay:0ms} /* закрывается разом, без обратной лесенки */
.hb-grp.is-open .hb-pit{opacity:1;transform:translate(0,0) scale(1);
transition-delay:calc(var(--hb-i,0) * 52ms)}
/* ══════════════════ ТЕЛЕФОНЫ И ПЛАНШЕТЫ ══════════════════
До 760px ряд вкладок в строку не влезает. Он уезжает под шапку колонкой
и открывается кнопкой «Меню». Подменю внутри разворачивается на месте,
не наплывая на соседей. Логика нажатий та же: тап открывает, тап закрывает. */
/* 1000, а не 760: на планшете ряд вкладок в строку не помещался и
продающая кнопка уезжала за край. Теперь и планшет, и телефон
ведут себя одинаково: «Меню» и колонка, одно нажатие раскрывает
подменю — держать палец не надо нигде. */
@media (max-width:1000px){
.hdr{padding:12px 14px}
.hdr-in{gap:10px}
/* Контекстная кнопка на телефоне не помещается: наверх поднимает
сама шапка, а на внутренних страницах есть хлебные крошки. */
.hb-ctx{display:none}
/* Но у неё есть второе состояние — «К делу» на заставке, и это
единственный способ пропустить ролик. Без неё человек с телефона
обязан пролистать вступление целиком. Пока ролик держит экран, на
body висит класс locked — по нему кнопку и возвращаем. */
body.locked .hb-ctx{display:flex}
.hb-brand .hb-tel{max-width:130px;padding-right:14px}
.hb-cta .hb__body{padding:0 13px}
.hb-menupill{max-width:180px;opacity:1;pointer-events:auto;overflow:visible}
.hdr.is-small .hb-menupill{max-width:180px}
.hb-groups,.hdr.is-small .hb-groups{
position:absolute;top:100%;left:14px;right:14px;margin-top:10px;
max-width:none;flex-direction:column;align-items:stretch;gap:8px;
opacity:0;transform:translateY(-10px) scale(1);pointer-events:none;
transition:opacity .24s ease, transform .32s cubic-bezier(.22,1.2,.42,1);
}
.hdr.is-menu .hb-groups,.hdr.is-menu.is-small .hb-groups{
opacity:1;transform:none;pointer-events:auto}
.hb-groups .hb{width:100%}
.hb-groups .hb__body{justify-content:space-between;width:100%}
/* подменю встаёт в поток колонкой — иначе оно перекрывает вкладки ниже */
.hb-panel{position:static;transform:none;margin:8px 0 2px;padding-left:14px;
flex-direction:column;gap:8px;pointer-events:auto;
display:none}
.hb-panel::before{display:none}
.hb-grp.is-open .hb-panel{display:flex}
.hb-pit{--hb-dx:0px;transform:translate(0,-10px) scale(.96)}
}
/* Совсем узкие экраны: номер убирается в круг. Круг сам по себе —
ссылка tel:, поэтому позвонить по-прежнему одно нажатие. */
@media (max-width:520px){
.hdr .hb-brand .hb-tel{max-width:0;padding-right:0;opacity:0}
.hdr-in{gap:8px}
}
@media (prefers-reduced-motion:reduce){
.hb__spin,.hb__pulse,.hb__drift,.hb-snow i{animation:none}
.hb-pit{transition-duration:.01ms}
}
/* ── знак в круге ──────────────────────────────────────────────────
Пока стоит тестовый знак сайта. Буква была заглушкой на время
сборки. Размер долей от круга, чтобы он оставался в центре при
любом --hb-disc. */
.hb-brand .hb-logo img{
display:block;width:82%;height:auto;margin:0 auto;
/* Знак тёмный, круг тоже. Слегка поднимаем яркость и подкладываем
мятное свечение — иначе на тридцати пикселях он читается как
пятно. Сам файл не трогаем: придёт настоящий знак — снимется
одна строка. */
filter:brightness(1.35) drop-shadow(0 0 6px rgba(143,232,196,.35))
drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
/* ── мобильное меню: по ширине текста, подменю влево ────────────────
Колонка во всю ширину экрана выглядела как список настроек, а не как
меню сайта. Теперь вкладки прижаты вправо, под кнопкой «Меню», и
каждая сидит по ширине своей надписи. Подменю раскрывается СЛЕВА от
вкладки такой же колонкой — рука уже там, тянуться никуда не надо. */
@media (max-width:1000px){
.hb-groups,
.hdr.is-menu .hb-groups,
.hdr.is-small .hb-groups{
left:auto;right:14px;width:auto;align-items:flex-end;
}
.hb-groups .hb{width:auto}
.hb-groups .hb__body{width:auto;justify-content:center;gap:10px}
/* Вкладка стоит на своём месте, подменю висит СЛЕВА от неё и вынуто
из потока. Пока панель была в потоке, раскрытый «Не пропусти»
сдвигал «О нас» вниз на всю высоту списка — соседи должны
оставаться там, где человек их видел. */
.hb-grp{display:flex;justify-content:flex-end;position:relative}
.hb-panel{
position:absolute;top:0;right:calc(100% + 8px);left:auto;
margin:0;padding:0;transform:none;
flex-direction:column;align-items:flex-end;gap:8px;
display:none}
.hb-grp.is-open .hb-panel{display:flex}
/* Лёгкая дуга, выгнутая влево: середина уходит дальше краёв. Прямая
колонка читается как список настроек, дуга — как меню. Величину
сдвига считает header.js от места пункта в списке. */
.hb-pit{--hb-dx:0px;transform:translate(16px,0) scale(.96)}
.hb-grp.is-open .hb-pit{transform:translate(var(--hb-bow,0px),0) scale(1)}
}
/* ╔══════════════════════════════════════════════════════════════════════╗
║ ШАПКА «МЕРЧЕЛЛИ» — КОНЕЦ БЛОКА ║
╚══════════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ ВОПРОСЫ В ВИДЕ ПЕРЕПИСКИ — НАЧАЛО БЛОКА ║
║ Присланный и проверенный код. Изменено только то, без чего он не ║
║ уживается с сайтом: ║
║ · все имена носят приставку fq- (в блоке были заняты .btn, .row, ║
║ .q, .a, .status, .bar, .field, .send, .note — всё это на сайте ║
║ уже значит другое); ║
║ · выброшены глобальные сбросы (* , html, body) — они перекрасили ║
║ бы всю страницу и сломали вёрстку всего сайта; ║
║ · секция светлая, поэтому своего фона у сцены нет. Экран телефона ║
║ остался тёмным — это же экран. ║
║ Блок самодостаточный: вырезается целиком до парной строки «КОНЕЦ». ║
╚══════════════════════════════════════════════════════════════════════╝ */
.fq-scene{
--fq-mint:#8fe8c4;
--fq-mint-deep:#5fc79c;
--fq-chat:#0f1614;
--fq-in:#1b2421; /* входящее сообщение */
--fq-in-text:#e7f3ee;
--fq-meta:#7d938b;
/* ВСЯ КОМПОЗИЦИЯ — ЗДЕСЬ. Двигать сцену этими переменными, а не
правкой разметки. */
--fq-stage-h: 505px; /* высота сцены */
--fq-img-w: 420px; /* ширина картинки с человеком */
--fq-img-right:384px; /* сдвинут влево: худи должна наполовину
уходить за телефон, а не лежать рядом */
--fq-img-bottom:-4px;
--fq-ph-scale: .60; /* размер телефона относительно натурального */
--fq-ph-tilt: 0deg; /* наклон. Павел просил ровно — держим 0 */
--fq-ph-left: 15%; /* ближе к текстовой колонке: иначе слева дыра */
--fq-ph-top: 50%;
position:relative;
min-height:var(--fq-stage-h);
margin-top:0;
font-family:var(--font-text, system-ui);
}
/* картинка с человеком и коробкой */
.fq-drop{
position:absolute;right:var(--fq-img-right);bottom:var(--fq-img-bottom);
width:var(--fq-img-w);height:auto;z-index:1;
pointer-events:none;user-select:none;
filter:drop-shadow(0 40px 60px rgba(0,0,0,.35));
}
/* ══════════════ ЗЕМЛЯ ПОД НОГАМИ ══════════════
Заросли лежат ВО ВСЮ ШИРИНУ ЭКРАНА по самому низу блока — прямое
требование Павла, дважды. Не полоса под человеком: он её так и
назвал — «на весь, сука, экран, слева направо». И вплотную к
нижней кромке: никакой щели между травой и следующим блоком.
Поэтому слой висит на самой секции, а не внутри сцены с
человеком — у сцены свои поля, из-за них щель и была.
Почему ДВЕ картинки, а не одна растянутая. Файл 1500 точек
шириной; растянутый на 1900 он раздувается, и трава становится
крупной и мыльной. Вместо этого две половины по 50 %, вторая
отражена: масштаб травы честный, а стык посередине не виден —
у отражённой копии левый край совпадает с правым краем первой
пиксель в пиксель. Один файл, одна загрузка.
Человек и телефон идут ПЕРЕД травой: у слоя z-index 0, а всё
содержимое секции лежит на 1. */
.fq-zem{
position:absolute; left:0; right:0; bottom:0; z-index:0;
display:flex; overflow:hidden; line-height:0;
pointer-events:none; user-select:none;
/* Пропорция НАРОЧНО ниже, чем у двух половин картинки (3000:298).
Разница — те самые нижние точки, где мох обрывается клочьями:
они уезжают за нижнюю кромку и наружу не видны. Ровно то, о чём
просил Павел: не дорисовывать землю, а опустить картинку.
Хотите глубже втопить — уменьшайте второе число. */
aspect-ratio:3000 / 272;
min-height:64px;
}
.fq-zem img{
display:block; width:50%; height:100%;
/* cover с привязкой к ВЕРХУ: обрезается всегда низ, а не трава. */
object-fit:cover; object-position:50% 0;
}
.fq-zem img + img{ transform:scaleX(-1); }
/* Секция должна быть точкой отсчёта для травы, а содержимое —
лежать поверх неё. */
#faq{ position:relative; overflow:hidden; }
#faq .sec-in{ position:relative; z-index:1; }
/* ══════════════ ЗАДНИЙ ПЛАН БЛОКА ══════════════
Пять слоёв в глубину: горы в тумане, пальмы, два бегущих манекена и
ближний куст. Всё привязано к НИЖНЕЙ кромке блока и к правому краю —
картинки сами растворяются влево, поэтому левая половина блока, где
стоит текст, остаётся чистой.
Правило глубины одно и держится строго: чем дальше слой, тем он
мельче по кадру, тем выше стоит, тем сильнее размыт и тем бледнее.
Без размытия пять резких картинок читаются как коллаж, а не как
сцена.
Все ручки — здесь. Разметку не трогаем. */
#faq{
--vp-op:1; /* общая видимость декораций */
/* f3 — горы. Самый дальний: почти без цвета, сильно размыт. */
--vp-f3-w:118%; --vp-f3-r:-9%; --vp-f3-b:150px;
--vp-f3-blur:7px; --vp-f3-op:.5;
/* f2 — пальмовые заросли, средний план. */
--vp-f2-w:110%; --vp-f2-r:-5%; --vp-f2-b:96px;
--vp-f2-blur:3.2px; --vp-f2-op:.82;
/* Манекены. Второй дальше первого: мельче, выше и мягче. */
/* m2 стоит выше первого: ближний куст закрывает ему ноги, и он
читается как бегущий ПОЗАДИ, а не приклеенный к тому же грунту. */
--vp-m2-w:172px; --vp-m2-r:8%; --vp-m2-b:188px;
--vp-m2-blur:.9px; --vp-m2-op:.86;
--vp-m1-w:240px; --vp-m1-r:16.5%; --vp-m1-b:104px;
--vp-m1-blur:.7px; --vp-m1-op:.92;
/* f1 — ближний куст с бревном. Резкий, стоит на самой земле. */
--vp-f1-w:94%; --vp-f1-r:-1%; --vp-f1-b:44px;
--vp-f1-blur:0px; --vp-f1-op:1;
}
.fq-fon{
position:absolute; inset:0; z-index:0;
pointer-events:none; user-select:none;
opacity:var(--vp-op);
}
.fq-fon .vp{
position:absolute; height:auto; max-width:none;
will-change:filter;
}
.vp-f3{ width:var(--vp-f3-w); right:var(--vp-f3-r); bottom:var(--vp-f3-b);
filter:blur(var(--vp-f3-blur)); opacity:var(--vp-f3-op); }
.vp-f2{ width:var(--vp-f2-w); right:var(--vp-f2-r); bottom:var(--vp-f2-b);
filter:blur(var(--vp-f2-blur)); opacity:var(--vp-f2-op); }
.vp-m2{ width:var(--vp-m2-w); right:var(--vp-m2-r); bottom:var(--vp-m2-b);
filter:blur(var(--vp-m2-blur)) drop-shadow(0 14px 20px rgba(16,40,32,.2));
opacity:var(--vp-m2-op); }
.vp-m1{ width:var(--vp-m1-w); right:var(--vp-m1-r); bottom:var(--vp-m1-b);
filter:blur(var(--vp-m1-blur)) drop-shadow(0 18px 26px rgba(16,40,32,.24));
opacity:var(--vp-m1-op); }
.vp-f1{ width:var(--vp-f1-w); right:var(--vp-f1-r); bottom:var(--vp-f1-b);
filter:blur(var(--vp-f1-blur)); opacity:var(--vp-f1-op); }
/* На телефоне сцена и так тесная: оставляем только ближний куст, всё
остальное превращается в кашу за текстом. */
@media (max-width:860px){
.vp-f3, .vp-f2, .vp-m1, .vp-m2{ display:none; }
#faq{ --vp-f1-w:150%; --vp-f1-r:-25%; --vp-f1-b:30px; }
.vp-f1{ opacity:.5; }
}
/* телефон */
.fq-fly{
position:absolute;left:var(--fq-ph-left);top:var(--fq-ph-top);
transform:translate(0,-50%) rotate(var(--fq-ph-tilt));
transform-origin:50% 50%;
/* Поверх земли и обеих половин человека: телефон летит ближе всех. */
z-index:5;
animation:fqFloat 6.5s ease-in-out infinite;
}
/* УМЕНЬШЕНИЕ — ZOOM, А НЕ SCALE.
Телефон свёрстан в натуральную величину (390×800) и показывается
мельче. Через transform:scale браузер рисует текст в полном размере,
а потом сжимает готовую картинку — буквы мылятся, ровно как было на
стартовом экране. zoom пересчитывает саму вёрстку, и текст рисуется
сразу в нужном кегле, чётким. Поворот и покачивание остались на
transform у .fq-fly — они на резкость не влияют. */
.fq-phone{ zoom:var(--fq-ph-scale); }
/* лёгкое покачивание — вещь в воздухе не висит неподвижно */
@keyframes fqFloat{
0%,100%{transform:translate(0,-50%) rotate(var(--fq-ph-tilt))}
50% {transform:translate(0,calc(-50% - 14px)) rotate(calc(var(--fq-ph-tilt) + 1deg))}
}
/* пока человек читает переписку, качание мешает — гасим */
.fq-fly:hover, .fq-fly:focus-within{animation-play-state:paused}
/* Кнопка «Все вопросы» в самом низу переписки. Ставится скриптом; здесь
только посадка: по центру ленты, с воздухом сверху и снизу, чтобы не
липла к последнему сообщению и к полю ввода. */
.fq-vse{
display:block;
margin:18px 0 6px;
}
/* Кнопка во всю ширину ленты. Тело обязано растянуться вместе с ней:
по умолчанию оно шириной по тексту, и по краям оставались тёмные
«уши» — голая кайма без тела. */
.fq-vse-btn{ --mb-rim:1.2px; display:flex; width:100%; }
.fq-vse-btn > .mbtn__body{
width:100%; box-sizing:border-box;
padding:13px 18px; font-size:13px; letter-spacing:.03em;
white-space:normal; text-align:center; line-height:1.25;
}
/* ══════════════════ ТЕЛЕФОН ══════════════════
Рамка собрана слоями: снаружи титановый кант с градиентом по кругу,
под ним чёрная кромка стекла, внутри экран. Толщина кантов взята с
реального аппарата — 12 точек, иначе выглядит игрушкой.
Картинкой это заменять нельзя: нарисованное кодом остаётся чётким на
любом экране и ничего не весит. */
.fq-phone{
position:relative;
width:390px;height:800px; /* логические точки iPhone 15 Pro */
border-radius:56px;
padding:12px;
background:
linear-gradient(160deg,#e8ece9 0%,#8f9a95 14%,#4a534f 30%,#8f9a95 50%,
#3f4744 70%,#98a29d 86%,#dfe4e1 100%);
box-shadow:
0 0 0 1px rgba(255,255,255,.16),
0 2px 3px rgba(0,0,0,.5),
0 40px 80px -28px rgba(0,0,0,.55),
0 18px 40px -20px rgba(0,0,0,.4);
}
.fq-phone::before{content:'';position:absolute;inset:9px;border-radius:48px;background:#000}
/* блик по стеклу: узкая полоса света наискось */
.fq-phone::after{
content:'';position:absolute;inset:12px;border-radius:45px;
background:linear-gradient(148deg,
rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 18%,
transparent 34%, transparent 68%, rgba(255,255,255,.045) 100%);
pointer-events:none;z-index:6;
}
/* кнопки по бокам */
.fq-key{position:absolute;background:linear-gradient(180deg,#b9c2be,#5d6764 40%,#3d4643);
border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.fq-key.act{left:-2px;top:150px;width:3px;height:32px}
.fq-key.vup{left:-2px;top:212px;width:3px;height:58px}
.fq-key.vdn{left:-2px;top:286px;width:3px;height:58px}
.fq-key.pwr{right:-2px;top:238px;width:3px;height:92px}
/* ══════════════════ ЭКРАН ══════════════════ */
.fq-screen{
position:relative;z-index:2;
width:100%;height:100%;border-radius:45px;overflow:hidden;
background:var(--fq-chat);
display:flex;flex-direction:column;
}
.fq-island{
position:absolute;left:50%;top:11px;transform:translateX(-50%);
width:124px;height:35px;border-radius:20px;background:#000;z-index:5;
box-shadow:inset 0 0 0 .5px rgba(255,255,255,.06);
}
.fq-island i{position:absolute;right:13px;top:50%;transform:translateY(-50%);
width:9px;height:9px;border-radius:50%;
background:radial-gradient(circle at 35% 35%,#31404b,#0a0f13 70%);
box-shadow:0 0 0 1px rgba(90,130,150,.25)}
.fq-status{
flex:none;height:54px;padding:16px 30px 0;
display:flex;align-items:flex-start;justify-content:space-between;
font:600 15px/1 system-ui,-apple-system,sans-serif;
color:#fff;letter-spacing:.01em;z-index:4;position:relative;
}
.fq-status .fq-ic{display:flex;align-items:center;gap:6px;margin-top:1px}
.fq-status svg{display:block}
.fq-bar{
flex:none;display:flex;align-items:center;gap:11px;
padding:6px 15px 11px;
background:rgba(15,22,20,.86);backdrop-filter:blur(14px);
border-bottom:1px solid rgba(143,232,196,.1);z-index:3;
}
.fq-back{color:var(--fq-mint);flex:none;opacity:.9;background:none;border:0;
padding:2px 4px;cursor:pointer;display:flex;-webkit-tap-highlight-color:transparent}
.fq-back:active{opacity:.5}
.fq-ava{
flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;
background:linear-gradient(145deg,var(--fq-mint),var(--fq-mint-deep));
box-shadow:0 2px 8px rgba(143,232,196,.28);
}
.fq-ava img{display:block;width:100%;height:100%;object-fit:contain;padding:3px}
.fq-who{flex:1;min-width:0;line-height:1.25}
.fq-who b{display:block;font-size:15px;font-weight:600;color:#eaf6f1}
.fq-who span{display:block;font-size:12px;color:var(--fq-mint);opacity:.85}
.fq-who span i{display:inline-block;width:5px;height:5px;border-radius:50%;
background:var(--fq-mint);margin-right:5px;vertical-align:middle}
.fq-call{color:var(--fq-mint);opacity:.85;flex:none;display:flex}
/* ══════════════════ ЛЕНТА ══════════════════ */
.fq-feed{
flex:1;overflow-y:auto;overscroll-behavior:contain;
padding:14px 12px 8px;
display:flex;flex-direction:column;gap:7px;
scroll-behavior:smooth;
}
.fq-feed::-webkit-scrollbar{width:0}
.fq-day{align-self:center;margin:2px 0 8px;padding:4px 12px;border-radius:999px;
background:rgba(255,255,255,.07);color:#9db3aa;font-size:11.5px;letter-spacing:.02em}
.fq-row{display:flex;flex-direction:column;max-width:100%}
.fq-row.out{align-items:flex-end}
.fq-row.in{align-items:flex-start}
.fq-msg{
position:relative;max-width:80%;
padding:9px 13px 8px;border-radius:19px;
font-size:14.5px;line-height:1.42;word-wrap:break-word;
animation:fqPop .22s cubic-bezier(.2,.9,.3,1.3) both;
}
@keyframes fqPop{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
/* исходящее — сам вопрос */
.fq-q{
background:linear-gradient(160deg,var(--fq-mint),var(--fq-mint-deep));
color:#08130e;font-weight:500;border-bottom-right-radius:6px;
cursor:pointer;user-select:none;
display:flex;align-items:flex-start;gap:9px;
transition:transform .12s ease, filter .12s ease;
-webkit-tap-highlight-color:transparent;
}
.fq-q:active{transform:scale(.975);filter:brightness(1.06)}
.fq-plus{
position:relative;flex:none;width:19px;height:19px;margin-top:1px;border-radius:50%;
background:rgba(8,19,14,.16);
display:flex;align-items:center;justify-content:center;
transition:transform .26s cubic-bezier(.3,1.4,.4,1);
}
.fq-plus::before,.fq-plus::after{content:'';position:absolute;background:#08130e;border-radius:1px}
.fq-plus::before{width:9px;height:1.6px}
.fq-plus::after{width:1.6px;height:9px;transition:opacity .2s ease,transform .26s ease}
.fq-row.open .fq-plus{transform:rotate(180deg)}
.fq-row.open .fq-plus::after{opacity:0;transform:scaleY(.2)}
/* входящее — ответ */
.fq-a{background:var(--fq-in);color:var(--fq-in-text);border-bottom-left-radius:6px}
.fq-meta{display:flex;align-items:center;gap:4px;margin:1px 6px 0;
font-size:10.5px;color:var(--fq-meta)}
.fq-row.out .fq-meta{color:#6f8a7e}
.fq-meta svg{display:block}
.fq-typing{background:var(--fq-in);border-radius:19px;border-bottom-left-radius:6px;
padding:13px 15px;display:flex;gap:4px;align-items:center}
.fq-typing i{width:6px;height:6px;border-radius:50%;background:#7fa394;animation:fqDot 1.15s infinite}
.fq-typing i:nth-child(2){animation-delay:.16s}
.fq-typing i:nth-child(3){animation-delay:.32s}
@keyframes fqDot{0%,60%,100%{opacity:.3;transform:translateY(0)}
30%{opacity:1;transform:translateY(-4px)}}
.fq-heart{position:absolute;left:-9px;bottom:-9px;font-size:14px;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
/* ══════════════════ СТРОКА ВВОДА ══════════════════ */
.fq-compose{
flex:none;padding:8px 12px 10px;
background:rgba(15,22,20,.9);backdrop-filter:blur(14px);
border-top:1px solid rgba(255,255,255,.07);
display:flex;align-items:center;gap:9px;
}
.fq-field{
flex:1;min-width:0;height:38px;border-radius:19px;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);
padding:0 14px;color:#e7f3ee;font:inherit;font-size:14px;
outline:none;-webkit-appearance:none;
}
.fq-field::placeholder{color:#7f978d}
.fq-field:focus{border-color:rgba(143,232,196,.42);background:rgba(143,232,196,.08)}
.fq-send{
flex:none;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
background:linear-gradient(150deg,var(--fq-mint),var(--fq-mint-deep));
display:flex;align-items:center;justify-content:center;
box-shadow:0 3px 10px rgba(143,232,196,.3);transition:transform .12s ease;
}
.fq-send:active{transform:scale(.92)}
.fq-home{flex:none;height:22px;display:flex;align-items:center;justify-content:center;
background:rgba(15,22,20,.9)}
.fq-home i{width:134px;height:5px;border-radius:3px;background:rgba(255,255,255,.32)}
/* ══════════════════ ЗАСТАВКА ══════════════════
«Назад» не уводит со страницы, а сворачивает переписку на экран
блокировки. Обратно — по уведомлению, как на настоящем телефоне. */
.fq-lock{
position:absolute;inset:0;z-index:20;border-radius:45px;overflow:hidden;
/* Своя сплошная подложка: без неё сквозь обои просвечивала лента —
мятные пузыри и отметки времени поверх заставки. */
background:#0b100e;
display:flex;flex-direction:column;
opacity:0;visibility:hidden;transform:scale(1.04);
transition:opacity .28s ease, transform .28s ease, visibility .28s;
}
.fq-lock.on{opacity:1;visibility:visible;transform:none}
.fq-wall{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:50% 8%}
/* затемнение: по краям сильнее, чтобы читались часы и уведомление */
.fq-lock::after{
content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.30) 22%,
rgba(0,0,0,.10) 42%,rgba(0,0,0,.30) 70%,rgba(0,0,0,.74) 100%);
}
/* Обои — исключение: они лежат подложкой, а не встают в колонку.
Без :not(.fq-wall) картинка вставала в поток и занимала верх экрана,
а низ оставался чёрным. */
.fq-lock > *:not(.fq-wall){position:relative;z-index:2}
.fq-lk-date{margin:6px 0 0;text-align:center;color:#fff;
font:600 17px/1.2 system-ui,-apple-system,sans-serif;
text-shadow:0 1px 12px rgba(0,0,0,.5);opacity:.95}
.fq-lk-time{margin:2px 0 0;text-align:center;color:#fff;
font:200 78px/1.05 system-ui,-apple-system,sans-serif;
letter-spacing:-.02em;text-shadow:0 2px 22px rgba(0,0,0,.45)}
.fq-lk-mid{flex:1}
.fq-note{
margin:0 12px 14px;padding:11px 12px;border-radius:19px;
background:rgba(38,44,42,.62);backdrop-filter:blur(24px) saturate(1.4);
border:.5px solid rgba(255,255,255,.13);
display:flex;align-items:flex-start;gap:10px;
cursor:pointer;-webkit-tap-highlight-color:transparent;
box-shadow:0 8px 26px rgba(0,0,0,.35);
transition:transform .13s ease, background .13s ease;
animation:fqNoteIn .42s cubic-bezier(.2,.9,.3,1.25) .25s both;
}
@keyframes fqNoteIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.fq-note:active{transform:scale(.975);background:rgba(52,60,57,.72)}
.fq-note .fq-nic{flex:none;width:38px;height:38px;border-radius:10px;overflow:hidden;
background:linear-gradient(145deg,var(--fq-mint),var(--fq-mint-deep))}
.fq-note .fq-nic img{display:block;width:100%;height:100%;object-fit:contain;padding:4px}
.fq-note .fq-tx{flex:1;min-width:0;color:#fff}
.fq-note .fq-tx b{display:block;font:600 14px/1.3 system-ui,sans-serif}
.fq-note .fq-tx span{display:block;font:14px/1.35 system-ui,sans-serif;opacity:.92}
.fq-note .fq-ago{flex:none;font:12px/1 system-ui,sans-serif;color:rgba(255,255,255,.65);margin-top:2px}
/* ══════════════════ КРУЖОК ДОЖИТИЯ ══════════════════
На сообщениях, которые фильтр завернул. Заполняется — и пара
«мусорный вопрос + ответ» исчезает. Без этого ленту можно засорить
так, что до настоящих вопросов не домотать. */
.fq-ring{width:16px;height:16px;flex:none;margin-left:2px}
.fq-ring circle{fill:none;stroke-width:2.4}
.fq-ring .bg{stroke:rgba(255,255,255,.16)}
.fq-ring .fg{
stroke:var(--fq-mint);stroke-linecap:round;
stroke-dasharray:37.7;stroke-dashoffset:37.7;
transform:rotate(-90deg);transform-origin:50% 50%;
animation:fqRing var(--fq-life,60s) linear forwards;
}
@keyframes fqRing{to{stroke-dashoffset:0}}
.fq-row.fading{transition:opacity .35s ease, transform .35s ease;
opacity:0;transform:translateY(-8px)}
/* Кнопка под сценой. Прижата к переписке: между ними не должно быть
пустой полосы — сначала короткие ответы здесь, сразу за ними путь к
подробным. */
/* Кнопка на страницу вопросов стоит сразу под текстом секции, до
телефона: так человек видит выход на подробные ответы, ещё не
начав листать переписку. Обёртка — свой блок, а не абзац: в абзаце
правила оформления ссылок ломали кнопке скругление и кайму. */
/* Шапка блока в две колонки: слева надзаголовок, заголовок и
поясняющая строка, справа — кнопка на страницу с подробными
ответами. Раньше кнопка стояла под текстом, и правая половина
ширины пустовала.
Колонка текста держит те же 44 знака в строке, что и у остальных
блоков: ширину задаём ей, а не всей шапке. */
#faq .sec-head{
max-width:none;
display:grid;
grid-template-columns:minmax(0, 44ch) auto;
justify-content:space-between;
align-items:center;
column-gap:clamp(24px, 4vw, 72px);
}
#faq .sec-head > .eyebrow-l,
#faq .sec-head > h2,
#faq .sec-head > p{ grid-column:1; margin-top:10px; }
.fq-more{ grid-column:2; grid-row:1 / -1; justify-self:end; margin:0; }
/* Секция поджата сверху и снизу: с прежними полями один этот блок
занимал полтора экрана. */
#faq{ padding-top:clamp(26px, 3.2vh, 44px); padding-bottom:clamp(18px, 2.4vh, 34px); }
/* На узком экране в строку они не помещаются — возвращаем в столбик. */
@media (max-width:900px){
#faq .sec-head{ display:block; max-width:44ch; }
.fq-more{ margin:clamp(14px, 2vw, 22px) 0 0; }
}
/* ══════════════════ ПЛАНШЕТ И ТЕЛЕФОН ══════════════════
Смартфон внутри смартфона выглядит странно, поэтому на узком экране
рамки нет совсем: переписка разворачивается во всю ширину, человек
уходит фоном. Это и решение Павла, и единственное, что тут читается. */
@media (max-width:1100px){
.fq-scene{--fq-ph-scale:.56;--fq-ph-left:16%;--fq-img-w:350px;
--fq-img-right:286px;--fq-stage-h:480px}
}
@media (max-width:820px){
.fq-scene{--fq-stage-h:auto;min-height:0;padding:0}
.fq-drop{
right:auto;left:50%;bottom:auto;top:0;
width:min(520px,120%);transform:translateX(-50%);
opacity:.16;filter:none;
}
/* Зелень по низу блока остаётся и здесь, только пониже. */
.fq-zem{ aspect-ratio:auto; height:70px; }
.fq-fly{
position:relative;left:auto;top:auto;transform:none;animation:none;
width:100%;
}
/* рамки нет: телефон превращается в обычный блок переписки */
.fq-phone{
width:100%;height:auto;padding:0;border-radius:22px;
background:none;box-shadow:0 18px 40px -22px rgba(0,0,0,.45);
}
.fq-phone::before,.fq-phone::after,.fq-key,.fq-island,.fq-status,.fq-home{display:none}
.fq-screen{border-radius:22px;height:auto;
box-shadow:0 0 0 1px rgba(7,40,28,.18)}
.fq-feed{height:min(62vh,520px);padding-top:10px}
.fq-bar{padding-top:11px}
.fq-lock{border-radius:22px}
.fq-lk-time{font-size:58px}
.fq-msg{max-width:86%}
}
@media (prefers-reduced-motion:reduce){
.fq-fly{animation:none}
.fq-msg,.fq-note{animation:none}
.fq-ring .fg{animation-duration:var(--fq-life,60s)}
}
/* ╔══════════════════════════════════════════════════════════════════════╗
║ ВОПРОСЫ В ВИДЕ ПЕРЕПИСКИ — КОНЕЦ БЛОКА ║
╚══════════════════════════════════════════════════════════════════════╝ */
/* ══════════════════════════════════════════════════════════════════
В КАТАЛОГЕ ДАЛЕКО НЕ ВСЁ — НАЧАЛО БЛОКА
══════════════════════════════════════════════════════════════════
Три части: короткий текст, светящаяся плашка с карточками и
картинкой поверх, и три бегущие строки со словами.
ВСЯ НАСТРОЙКА — переменными ниже. Двигать блок ими, а не правкой
разметки: разметку собирает _tools\any\install.py, и руками
внесённое там пропадёт при следующем прогоне.
══════════════════════════════════════════════════════════════════ */
#anything{
--an-glow:#8fe8c4; /* цвет свечения плашки */
--an-plate:#0e1512; /* тело плашки */
--an-r:34px; /* скругление плашки */
/* Числа ниже Павел подобрал сам в лаборатории — _lab\any-test.html,
собирается скриптом _tools\any\lab.py. Не менять их на глаз. */
--an-geko-h:235px; /* высота картинки с фигурами */
/* Насколько картинка выступает НАД плашкой. Подошвы лежат на
472-й строке исходника высотой 506 (замер _tools\any\feet.py),
то есть на 219 точках при этой высоте. Значит ноги оказываются
на 14 точках ниже кромки плашки — ровно на верхнем крае
карточек. Фигуры идут ПО ним, почти не утопая. */
--an-geko-rise:205px;
--an-geko-right:66px; /* отступ от правого края плашки */
/* Зазор между текстом и плашкой. Отдельно от подъёма картинки:
раньше он от него зависел, и чтобы фигуры шли по карточкам,
приходилось разгонять белое поле под текстом. Фигуры выступают
вверх справа, где текстовая колонка уже кончилась, — и это
поле им не нужно. */
--an-gap:clamp(16px, 2vw, 26px);
--an-mq-speed:20s; /* полный проход бегущей строки */
--an-mq-fade:146px; /* растворение лент по краям */
}
/* Заголовок опущен ниже: сверху в этот блок свисают листья, и
вплотную к ним надпись читается тяжело. */
#anything .an-head{ margin-top:clamp(70px, 11vw, 158px); }
/* Надзаголовок, заголовок и строка под ним идут одним плотным
куском: разреженные, они читались как три отдельные мысли. */
#anything .an-head .eyebrow-l{ margin-bottom:5px; }
#anything .an-head p{ max-width:46ch; margin-top:8px; }
/* ───────────────── светящаяся плашка ───────────────── */
.an-stage{
position:relative;
margin:var(--an-gap) 0 0;
/* Поля почти в ноль: карточки должны доходить до краёв плашки,
иначе она читается как рамка вокруг витрины, а не как сама
витрина. Числа из лаборатории. */
padding:8px 14px 11px;
border-radius:var(--an-r);
background:
radial-gradient(120% 90% at 50% -10%, rgba(143,232,196,.16), transparent 62%),
linear-gradient(180deg, #16201c 0%, var(--an-plate) 42%, #080d0b 100%);
box-shadow:
0 0 0 1px rgba(143,232,196,.16),
0 0 60px -12px rgba(143,232,196,.28),
0 40px 70px -30px rgba(6,20,15,.75);
/* isolation:isolate тут НЕЛЬЗЯ: она создаёт свой слой, и свечение
с z-index:-1 начинает рисоваться поверх тела плашки светлым
конусом. Без неё оно уходит туда, где ему место — под плашку. */
}
/* Свет по краю. Крутится сам градиент, а не элемент: если поворачивать
элемент, прямоугольник превращается в ромб и вылезает на страницу
огромным мятным крестом — проверено. */
@property --an-a{ syntax:''; inherits:false; initial-value:0deg; }
.an-stage::before{
content:''; position:absolute; inset:-1.5px; z-index:-1;
border-radius:calc(var(--an-r) + 1.5px);
--an-a:0deg;
background:conic-gradient(from var(--an-a),
rgba(143,232,196,0) 0deg, rgba(143,232,196,.8) 38deg,
rgba(143,232,196,0) 104deg, rgba(143,232,196,0) 188deg,
rgba(143,232,196,.6) 226deg, rgba(143,232,196,0) 296deg,
rgba(143,232,196,0) 360deg);
animation:an-rim 14s linear infinite;
}
/* Мягкое пятно света внутри — под ногами фигур, у правого края. */
.an-stage::after{
content:''; position:absolute; right:2%; top:-20px;
width:min(640px, 62%); height:170px;
border-radius:50%; pointer-events:none; z-index:0;
background:radial-gradient(closest-side, rgba(143,232,196,.13), transparent 72%);
filter:blur(22px);
}
@keyframes an-rim{ to{ --an-a:360deg; } }
/* Картинка с фигурами: идут по верхней кромке плашки, прижаты к
правому углу. Слева от них остаётся воздух — там заканчивается
текстовая колонка, и фигуры не спорят с ней за внимание. */
.an-geko{
/* Поверх карточек, а не под ними: под карточками ноги обрезаются
их верхним краем, и фигуры читаются как стоящие ЗА витриной.
Нам нужно, чтобы они шли ПО ней. */
position:absolute; z-index:3;
right:var(--an-geko-right); left:auto;
top:calc(var(--an-geko-rise) * -1);
height:var(--an-geko-h); width:auto; max-width:none;
pointer-events:none; user-select:none;
filter:drop-shadow(0 12px 18px rgba(0,0,0,.4));
}
/* ───────────────── карточки внутри плашки ───────────────── */
.an-stage .an-strip{
position:relative; z-index:2;
display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
gap:clamp(8px, .9vw, 12px); margin:0; padding:0; list-style:none;
}
/* Тело карточки тёмное — как у карточек на тёмной полосе. Кайма
остаётся металлической, её рисует metal-button.js. */
.an-strip .ob-cell{ --mb-crush:2.2; --mb-bright:1.3; }
.an-strip .ob-cell .mbtn__body{
position:relative; overflow:hidden;
padding:24px 8px 22px; gap:7px;
background:#121a16; color:rgba(243,246,244,.9);
}
.an-strip .ob-cell .obj{ width:52px; }
.an-strip .ob-cell span{
color:rgba(238,250,244,.92); font-weight:500; letter-spacing:.01em;
}
.an-strip .obj{ stroke:rgba(200,246,226,.92); }
.an-strip .obj .ac{ fill:var(--an-glow); opacity:.34; }
/* Заливка мятой от левого верхнего угла — тот же приём, что у
карточек отраслей: движение внутри карточки, а не подпрыгивание
всей карточки. */
/* Тот же круг на transform, что и у карточек отраслей, и по той же
причине: clip-path у псевдоэлемента залипал под курсором. */
.an-strip .ob-cell .mbtn__body{ overflow:hidden; }
.an-strip .ob-cell .mbtn__body::after{
content:''; position:absolute; z-index:0; pointer-events:none;
left:0; top:0; width:300%; aspect-ratio:1; border-radius:50%;
background:linear-gradient(140deg, #8fe8c4 0%, #5fc79c 100%);
transform:translate(-50%, -50%) scale(0);
transform-origin:50% 50%;
transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.an-strip .ob-cell .mbtn__body > *{ position:relative; z-index:1; }
@media (hover:hover) and (pointer:fine){
/* .navel рядом с :hover — его вешает js\navedenie.js.
Почему одного :hover мало — там же в шапке файла. */
.an-strip .ob-cell:hover .mbtn__body::after,
.an-strip .ob-cell.navel .mbtn__body::after{
transform:translate(-50%, -50%) scale(1); }
.an-strip .ob-cell:hover span,
.an-strip .ob-cell.navel span{ color:#08201a; }
.an-strip .ob-cell:hover .obj,
.an-strip .ob-cell.navel .obj{ stroke:#08201a; }
.an-strip .ob-cell:hover .obj .ac,
.an-strip .ob-cell.navel .obj .ac{ fill:#08201a; opacity:.16; }
}
/* ───────────────── бегущие строки ───────────────── */
.an-run{ margin:clamp(22px, 2.8vw, 36px) 0 clamp(18px, 2.4vw, 30px); }
.an-run-lead{
margin:0 0 clamp(10px, 1.2vw, 15px);
font-size:clamp(15px, 1.25vw, 18px); line-height:1.55; color:var(--l-dim);
}
.an-run-lead em{ font-style:normal; color:var(--mint-ink); font-weight:600; }
/* Ленты шире колонки текста: они идут во всю ширину секции и
растворяются по краям, иначе слова обрубаются на полуслове. */
.an-mq{
display:flex; flex-direction:column; gap:7px;
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--an-mq-fade),
#000 calc(100% - var(--an-mq-fade)), transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 var(--an-mq-fade),
#000 calc(100% - var(--an-mq-fade)), transparent 100%);
}
.an-mq-row{ overflow:hidden; }
.an-mq-track{
display:flex; width:max-content;
animation:an-mq-left var(--an-mq-speed) linear infinite;
}
/* Вправо — та же дорожка, пущенная задом наперёд. Отдельной
раскладки не надо: содержимое одинаковое. */
.an-mq--right .an-mq-track{ animation-direction:reverse; }
.an-mq-track i{
font-style:normal; white-space:nowrap;
padding:7px 17px; margin-right:8px;
border-radius:100px;
border:1px solid rgba(11,143,98,.22);
background:rgba(255,255,255,.72);
font-size:clamp(13.5px, 1.05vw, 16px); color:var(--l-ink);
transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.an-mq-track i::after{ content:''; }
@media (hover:hover) and (pointer:fine){
.an-mq-row:hover .an-mq-track{ animation-play-state:paused; }
.an-mq-track i:hover{
background:var(--mint); border-color:var(--mint); color:#08201a;
}
}
/* Дорожка написана дважды, поэтому уезжаем ровно на половину: в этот
момент вторая копия стоит там же, где стояла первая, и стык не
виден. */
@keyframes an-mq-left{
from{ transform:translateX(0); }
to { transform:translateX(-50%); }
}
/* Поля секции и завершающая строка поджаты: блок один занимал
полтора экрана, а говорит он одну простую мысль. */
#anything{ padding-top:clamp(20px, 2.6vh, 40px); padding-bottom:clamp(20px, 2.6vh, 38px); }
#anything .be-foot{ margin:0 0 clamp(14px, 1.8vw, 20px); }
/* ───────────────── планшет и телефон ───────────────── */
/* Правило посадки, одно на все экраны: подошвы лежат на 472-й
строке исходника высотой 506, значит при высоте H они приходятся
на H×0.933. Чтобы ноги встали на верхний край карточек, подъём
должен быть на 6 точек меньше этого числа. Меняем высоту —
пересчитываем подъём по этой формуле, иначе фигуры либо парят,
либо тонут в карточке по пояс. */
@media (max-width:1000px){
#anything{ --an-geko-h:150px; --an-geko-rise:134px;
--an-geko-right:20px; --an-mq-fade:80px; }
.an-stage .an-strip{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.an-strip .ob-cell .mbtn__body{ padding:20px 8px 18px; }
}
@media (max-width:640px){
/* Посадка та же — ноги на верхнем крае карточек. Но колонка
текста здесь во всю ширину, и фигуры стоят прямо над ней,
поэтому зазор до плашки увеличен ровно на их рост: они входят
в него целиком и ни на что не ложатся. */
#anything{ --an-geko-h:96px; --an-geko-rise:84px;
--an-geko-right:6px; --an-r:26px; --an-mq-fade:40px;
--an-gap:96px; }
#anything .an-head{ margin-top:46px; }
.an-stage{ padding:8px 10px 10px; }
.an-stage .an-strip{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.an-strip .ob-cell .mbtn__body{ padding:17px 8px 15px; }
.an-strip .ob-cell .obj{ width:44px; }
.an-mq-track i{ padding:8px 15px; }
}
@media (prefers-reduced-motion: reduce){
.an-stage::before{ animation:none; }
.an-mq-track{ animation:none; }
.an-strip .ob-cell .mbtn__body::after{ transition:none; }
}
/* ══════════════ В КАТАЛОГЕ ДАЛЕКО НЕ ВСЁ — КОНЕЦ БЛОКА ══════════════ */
/* ══════════════════════════════════════════════════════════════════
ПОРТНЫЕ НА БЛОКЕ РАБОТ — НАЧАЛО БЛОКА
══════════════════════════════════════════════════════════════════
Две фигуры, каждая своим файлом на общем холсте 1122x1402:
geko-sew-back стоит на коробках — уходит ЗА все карточки
geko-sew-front сидит и шьёт — лежит НАД карточками
РАЗМЕР У КАЖДОЙ СВОЙ. Фигуры нарисованы в разном масштабе, поэтому
общая высота --cs-h умножается на свой множитель для каждой. При
изменении размера фигура растёт ВВЕРХ, а низ остаётся на месте —
иначе после каждой правки пришлось бы заново ловить посадку.
ЗАДНЯЯ ФИГУРА уходит за карточки не сама по себе: карточки подняты
на свой слой (.case{ z-index:1 }), иначе они рисовались бы в том
же слое и порядок решала бы разметка — коробки лезли поверх.
Низ у неё растворяется, чтобы коробки исчезали, а не обрывались.
ВСЯ ПОСАДКА — переменными ниже. Подбирается в лаборатории
_lab\cases-test.html (собирает _tools\cases\lab.py), на глаз
руками не двигаем.
══════════════════════════════════════════════════════════════════ */
#cases{
--cs-h:517px; /* базовая высота, от неё считаются обе */
--cs-left:47%; /* сдвиг от левого края сетки */
--cs-rise:281px; /* насколько фигуры выступают НАД сеткой */
--cs-flip:1; /* -1 — отразить по горизонтали */
--cs-dim:0.88; /* яркость: <1 приглушает под тёмный блок */
/* Свой размер каждой фигуры: доля от базовой высоты. */
--cs-front-k:0.71;
--cs-back-k:0.90;
/* Тонкая доводка положения каждой. */
--cs-front-dx:-15px; --cs-front-dy:-57px;
--cs-back-dx:58px; --cs-back-dy:-19px;
/* Задняя фигура: растворение низа.
Картинка чёткая — размывать её нельзя. Полоса внизу бралась не от
резкости, а от того, что рисунок обрывался раньше, чем маска
доводила его до нуля: край доживал до обрыва ещё на треть
видимости и читался линией. Теперь спад начинается выше и
заканчивается ДО обрыва — гасить в конце уже нечего.
sharp — докуда фигура в полную силу;
gone — где от неё не остаётся ничего. */
--cs-back-sharp:72%;
--cs-back-gone:91%;
--cs-back-blur:0px; /* общее размытие фигуры — ощущение дальнего плана */
}
.case-stage{ position:relative; }
/* Карточки — свой слой поверх задней фигуры. Без этого они лежат в
одном слое с ней, и кто выше решает порядок в разметке. */
.case-stage .case{ position:relative; z-index:1; }
.case-geko{
position:absolute;
left:var(--cs-left);
/* Низ слоя стоит на месте при любом размере: чем меньше фигура,
тем ниже её верх. */
top:calc(var(--cs-h) - var(--cs-my-h) - var(--cs-rise));
width:auto; height:var(--cs-my-h);
pointer-events:none; user-select:none;
}
.case-geko--back{
--cs-my-h:calc(var(--cs-h) * var(--cs-back-k));
z-index:0;
transform:translate(var(--cs-back-dx), var(--cs-back-dy));
}
/* Картинка чёткая до самого конца — низ не размывается, а гаснет.
Ступени неравномерные: линейный градиент отдаёт последние проценты
рывком, и край рисунка успевает мелькнуть полоской. Здесь спад
растянут — к тому месту, где картинка обрывается, от неё уже
ничего не остаётся. */
.case-geko--back img{
-webkit-mask-image:linear-gradient(180deg,
#000 var(--cs-back-sharp),
rgba(0,0,0,.72) calc(var(--cs-back-sharp) + (var(--cs-back-gone) - var(--cs-back-sharp)) * .25),
rgba(0,0,0,.40) calc(var(--cs-back-sharp) + (var(--cs-back-gone) - var(--cs-back-sharp)) * .5),
rgba(0,0,0,.15) calc(var(--cs-back-sharp) + (var(--cs-back-gone) - var(--cs-back-sharp)) * .75),
transparent var(--cs-back-gone));
mask-image:linear-gradient(180deg,
#000 var(--cs-back-sharp),
rgba(0,0,0,.72) calc(var(--cs-back-sharp) + (var(--cs-back-gone) - var(--cs-back-sharp)) * .25),
rgba(0,0,0,.40) calc(var(--cs-back-sharp) + (var(--cs-back-gone) - var(--cs-back-sharp)) * .5),
rgba(0,0,0,.15) calc(var(--cs-back-sharp) + (var(--cs-back-gone) - var(--cs-back-sharp)) * .75),
transparent var(--cs-back-gone));
}
.case-geko--front{
--cs-my-h:calc(var(--cs-h) * var(--cs-front-k));
z-index:3;
transform:translate(var(--cs-front-dx), var(--cs-front-dy));
}
.case-geko img{
display:block; height:var(--cs-my-h); width:auto; max-width:none;
transform:scaleX(var(--cs-flip));
filter:brightness(var(--cs-dim)) drop-shadow(0 18px 26px rgba(0,0,0,.5));
}
.case-geko--back img{
filter:brightness(var(--cs-dim)) blur(var(--cs-back-blur))
drop-shadow(0 18px 26px rgba(0,0,0,.5));
}
/* ───────────────── планшет и телефон ───────────────── */
@media (max-width:1000px){
#cases{ --cs-h:380px; --cs-rise:206px; }
}
@media (max-width:640px){
/* На телефоне карточки идут в один столбец, и фигуры над ними
закрывали бы заголовок блока. Оставляем их поменьше и правее. */
#cases{ --cs-h:215px; --cs-left:auto; --cs-rise:118px; }
.case-geko{ left:auto; right:0; }
/* Фигуры стоят у правого края и наезжали на концы строк. Обтекания
тут не сделать — картинки лежат отдельным слоем, — поэтому идём
с двух сторон: фигуры чуть мельче, а колонка текста сужена до их
левой границы. Переносы случаются раньше, и ни одна строка под
фигуру не заходит — проверено на 390 и 360 точках. */
#cases .sec-head p,
#cases .sec-more{ max-width:56%; }
}
/* ══════════════ ПОРТНЫЕ НА БЛОКЕ РАБОТ — КОНЕЦ БЛОКА ══════════════ */
/* ══════════════════════════════════════════════════════════════════
КАРТОЧКИ РАБОТ — НАЧАЛО БЛОКА
══════════════════════════════════════════════════════════════════
Были стеклянными: полупрозрачная плёнка, фотография сверху, текст
в отдельном отсеке снизу. Переделано по образцу подписи с самих
фотографий: крупный снимок во всю карточку, а поверх него внизу —
вертикальная мятная полоска и текст. Значка подарка, который есть
на снимке, у нас нет: он там нужен, чтобы подпись не висела в
пустоте, а у нас её держит сама полоска.
Порядок в подписи: название работы вывеской, под ним состав мелким
приборным шрифтом, ещё ниже тираж и срок — то, ради чего блок и
существует.
Кайму рисует metal-button.js: он заворачивает содержимое карточки
в .mbtn__body и кладёт под него .mbtn__rim. Правила ниже
перебивают то, что тело получает как кнопка — там оно строка
текста в таблетке, а здесь снимок с подписью.
══════════════════════════════════════════════════════════════════ */
/* ── орнамент по фону блока ──
Выработка, как на дорогой ткани: вензеля повтором по всей секции.
Он не рисунок, а фактура — виден только вблизи и только краем глаза,
поэтому прозрачность держим на грани различимости. Цвет чуть тёплый,
зеленовато-золотой: на угольном фоне холодная линия читается как
типографский брак, тёплая — как ткань.
Сам тайл — img/obshee/ornament.svg, он сходится сам с собой.
По краям блока орнамент сходит на нет, иначе видно, где ковёр
кончается, а где начинается соседняя секция. */
#cases::before{
content:''; position:absolute; inset:0; z-index:0;
pointer-events:none;
background-image:url(../img/obshee/ornament.svg);
background-repeat:repeat;
/* Мелко. Вензель размером с ноготь читается как выработка ткани,
крупный — как обои: он начинает спорить с блоком за внимание. */
background-size:var(--cw-orn-size, 34px);
opacity:var(--cw-orn, .085);
-webkit-mask-image:linear-gradient(180deg,
transparent 0, #000 10%, #000 90%, transparent 100%);
mask-image:linear-gradient(180deg,
transparent 0, #000 10%, #000 90%, transparent 100%);
}
/* Содержимое — своим слоем поверх орнамента. */
#cases > .sec-in{ position:relative; z-index:1; }
/* Заголовок блока — одной строкой, без переносов (решение Павла).
Ради этого он мельче общего h2: строка длинная, и кегль подбирается
так, чтобы она укладывалась в колонку на любом экране. Ограничение
ширины снимаем с шапки и оставляем только абзацу — иначе перенос
вернётся сам. */
#cases .sec-head{ max-width:none; }
#cases .sec-head p{ max-width:44ch; }
#cases .sec-head h2{
white-space:nowrap;
/* Верхний предел ограничен не читаемостью, а сценой: справа на этой
же высоте стоит фигура портного, и длинная строка заезжала ей под
голову. Кегль подобран так, чтобы строка кончалась до неё. */
font-size:clamp(17px, 2.2vw, 34px);
letter-spacing:-.035em;
text-wrap:nowrap;
}
/* На телефоне одной строкой не выходит при читаемом кегле — там
заголовок живёт как везде, переносом. */
@media (max-width:700px){
#cases .sec-head h2{
white-space:normal; text-wrap:balance;
font-size:clamp(24px, 6.4vw, 32px);
}
#cases .sec-head{ max-width:44ch; }
}
#cases{
--cw-r:18px; /* скругление карточки */
--cw-bar:3px; /* толщина мятной полоски */
--cw-pad:clamp(16px, 1.6vw, 26px); /* поля подписи */
--cw-shade:62%; /* докуда снизу поднимается затемнение */
}
.case{
/* Кайма тонкая. На кнопке полтора-два пикселя читаются как ободок,
а на карточке в полтора экрана та же толщина превращалась в
широкую светящуюся раму и спорила со снимком. */
--mb-rim:1px;
/* И медленно. Темп общий для всех плашек, но карточка втрое
крупнее: при одинаковой скорости блик пробегает её за то же
время, и глазу кажется, что переливы несутся. Треть от общего
темпа — примерно та же видимая скорость, что у кнопки. */
--mb-rate:0.33;
/* Плитка материала — доля от размера элемента. У кнопки она больше
самой кнопки, и та светится целиком. Карточка втрое шире, и с
таким же множителем она попадала внутрь одного чёрного участка —
кайма выглядела просто тёмной рамкой. Берём мелкую плитку, чтобы
по периметру шло несколько бликов. */
--mb-k:0.4;
--mb-crush:2.4; /* контраст материала */
--mb-bright:1.35; /* яркость материала */
/* Размер плитки и амплитуду сноса каждая плашка считает у себя:
общее правило .mbtn до нас не доходит, карточка ему не родня.
Без этих двух строк background-size остаётся auto, материал
растягивается на всю карточку. Проверено. */
--mb-tile:max(40px, calc(var(--mb-size, 300px) * var(--mb-k)));
--mb-amp-px:calc(var(--mb-tile) * var(--mb-amp));
position:relative; isolation:isolate;
display:flex; padding:var(--mb-rim);
border:0; border-radius:var(--cw-r);
/* Статичная кайма — она же запасной вариант, если скрипт не
отработал. */
background:none;
background-image:linear-gradient(100deg, var(--mb-stops));
background-size:200% 100%;
cursor:default;
box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 24px 40px -22px rgba(0,0,0,.7);
}
/* Карточка не кнопка — не подпрыгивает под курсором. Оживает сама
кайма, она и так в постоянном движении. */
.case:hover{ transform:none; }
/* Тело — сам снимок. Подпись лежит на нём, а не под ним. */
.case > .mbtn__body{
position:relative;
display:flex; flex-direction:column; justify-content:flex-end;
align-items:stretch; gap:0;
width:100%; flex:1 1 auto; padding:0;
aspect-ratio:4 / 3;
border-radius:calc(var(--cw-r) - var(--mb-rim)); overflow:hidden;
background:#0e1512;
font:inherit; letter-spacing:normal; line-height:normal;
white-space:normal; box-shadow:none; color:inherit;
}
/* Первая карточка шире вдвое — и снимок у неё шире, а не выше. */
.case:first-child > .mbtn__body{ aspect-ratio:16 / 9; }
/* Снимок подложкой на всю карточку. */
.case-pic{
position:absolute; inset:0; margin:0; aspect-ratio:auto;
overflow:hidden; background:#0e1512; z-index:0;
}
.case-pic img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .5s cubic-bezier(.22,1,.36,1);
user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none;
}
/* Прозрачное стекло поверх снимка. Яндекс.Браузер и подобные вешают
на картинку свою панельку — «найти похожие», «скачать», — и она
выскакивает прямо посреди работы. Панель цепляется к самому ![]()
;
если сверху лежит другой элемент, курсор до картинки не достаёт и
панели нет. Наведение на карточку при этом работает: оно висит на
.case, а стекло лежит внутри неё. */
.case-pic::after{
content:''; position:absolute; inset:0; z-index:1;
background:transparent;
}
@media (hover:hover){
.case:hover .case-pic img{ transform:scale(1.04); }
}
/* Затемнение снизу — иначе подпись тонет в светлых местах снимка.
Не сплошная плашка: снимок должен оставаться снимком. */
.case > .mbtn__body::after{
content:''; position:absolute; left:0; right:0; bottom:0; z-index:1;
height:var(--cw-shade); pointer-events:none;
background:linear-gradient(180deg,
rgba(6,10,8,0) 0%, rgba(6,10,8,.45) 42%, rgba(6,10,8,.88) 100%);
}
/* ── подпись ── */
.case-body{
position:relative; z-index:2;
padding:var(--cw-pad); padding-left:calc(var(--cw-pad) + 14px);
background:transparent; display:block; flex:0 0 auto;
}
/* Та самая вертикальная полоска. Идёт вдоль всей подписи и держит
её на снимке — вместо значка, который стоит на фотографиях. */
.case-body::before{
content:''; position:absolute; left:var(--cw-pad);
top:calc(var(--cw-pad) + 2px); bottom:calc(var(--cw-pad) + 2px);
width:var(--cw-bar); border-radius:2px;
background:var(--mint);
box-shadow:0 0 12px rgba(143,232,196,.45);
}
.case h3{
margin:0; color:#fff;
font-family:var(--font-display); font-weight:700;
font-size:clamp(17px, 1.45vw, 24px); line-height:1.16;
letter-spacing:-.02em;
text-shadow:0 2px 14px rgba(0,0,0,.55);
}
.case:first-child h3{ font-size:clamp(20px, 1.9vw, 30px); }
.case-what{
margin:7px 0 0; font-family:var(--hud-mono); font-size:11.5px;
line-height:1.5; color:rgba(255,255,255,.72);
text-shadow:0 1px 10px rgba(0,0,0,.6);
}
/* Тираж и срок — одной строкой, без разделительной черты: под
снимком она смотрелась случайной линией. */
.case-nums{
display:flex; flex-wrap:wrap; gap:5px 18px;
margin:10px 0 0; padding-top:0; border-top:0;
}
/* Пара «подпись — число» не разрывается: в узкой карточке «1500
комплектов» уезжало на строку без своего слова «тираж». */
.case-nums > div{
display:flex; align-items:baseline; gap:7px; white-space:nowrap;
}
.case-nums dt{
font-family:var(--hud-mono); font-size:9px; letter-spacing:.16em;
text-transform:uppercase; color:rgba(255,255,255,.5);
}
.case-nums dd{
margin:0; font-family:var(--font-display); font-weight:700;
font-size:clamp(14px, 1.15vw, 17px); color:var(--mint);
text-shadow:0 1px 10px rgba(0,0,0,.6);
}
@media (max-width:980px){
.case:first-child > .mbtn__body{ aspect-ratio:16 / 10; }
}
@media (max-width:640px){
#cases{ --cw-pad:15px; }
.case > .mbtn__body,
.case:first-child > .mbtn__body{ aspect-ratio:4 / 3; }
}
/* ══════════════════ КАРТОЧКИ РАБОТ — КОНЕЦ БЛОКА ══════════════════ */
/* ══════════════════════════════════════════════════════════════════
ФОТОГРАФИИ ПРЕДМЕТОВ ВМЕСТО ЗНАЧКОВ — НАЧАЛО БЛОКА
══════════════════════════════════════════════════════════════════
Часть витринных карточек теперь показывает не рисованный контур, а
снимок настоящего изделия с нашим знаком. Класс .obj у них остался
— от него зависит раскладка карточки, — но правила для контура
(обводка, заливка, прочерчивание при появлении) к картинке не
применяются: она не SVG. Поэтому здесь только размер и посадка.
══════════════════════════════════════════════════════════════════ */
#anything{
/* Размер снимка в карточке каталога. Рисованный значок был мелким
осознанно — он читался силуэтом. Фотографии нужен размер: при
прежних 96 точках карточки выглядели пустыми, предмет терялся
в поле (правка Павла). */
--dop-w:144px;
}
/* Поля карточки поджаты: место отдаём снимку, а не воздуху вокруг. */
#anything .an-strip .ob-cell .mbtn__body{ padding:14px 8px 12px; }
/* Размер задаём ВЫСОТОЙ, а не шириной. Снимки разной формы: зонты
вытянуты вверх, пледы вширь. По ширине они выстраивались бы в
ряд разной высоты, и карточки в сетке разъезжались. */
.obj-photo{
display:block; width:auto; object-fit:contain;
user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none;
/* Снимки сняты на прозрачном фоне, тень даёт им опору. */
filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
transition:transform .42s cubic-bezier(.22,1,.36,1),
filter .42s cubic-bezier(.22,1,.36,1);
}
/* Прозрачное стекло поверх, чтобы браузер не вешал на снимок свою
панельку — тот же приём, что на карточках работ. */
.ob-cell{ position:relative; }
.ob-cell .obj-photo{ pointer-events:none; }
/* В каталоге на главной снимок крупнее рисованного значка: у
контура читался силуэт, а у фотографии — предмет, и ей нужно
место. */
/* На внутренних страницах витрина мельче, и там снимки стоят вперемешку
с рисованными значками — держим им одинаковую высоту, иначе ряд
разъезжается по высоте карточек. */
/* Ширину сбрасываем обязательно. Прежние правила задают значку
ширину в пикселях (52 в каталоге, 58 на внутренних), и картинка
вписывалась в эту узкую рамку: высота росла, а предмет оставался
мелким. Селекторы длиннее прежних, чтобы перебить их. */
.ob-strip .ob-cell .obj-photo,
.dark-band .ob-cell .obj-photo{ width:auto; height:58px; }
#anything .an-strip .ob-cell .obj-photo{ width:auto; height:var(--dop-w); }
/* ── НАВЕДЕНИЕ НА ОКНО: ПРЕДМЕТ ВЫХОДИТ ИЗ ВИТРИНЫ ──────────────────
Замысел Павла: предмет снят на прозрачном фоне, и при наведении он
должен вырасти и слегка накрениться влево — тогда он читается как
вещь НАД витриной, а не как картинка внутри плитки. Выход за края
окна тут не изъян, а весь смысл: именно он и даёт объём.
Что для этого пришлось снять:
· overflow:hidden у тела карточки — он и обрезал предмет. Снят
ТОЛЬКО в этом блоке: в других местах на нём держится заливка.
· вместо него ::after (мятная заливка) получил своё скругление,
иначе на месте срезанных углов появлялись мятные уголки.
· карточке под курсором поднят z-index — без него соседнее окно
рисуется поверх выросшего предмета.
Пульт: --dop-rost (насколько вырастает) и --dop-kren (наклон,
минус — влево). Точка роста внизу: предмет тянется вверх, а не
наползает на подпись. */
/* 1.42 не хватало: у снимков предметов широкие прозрачные поля,
и прирост уходил в пустоту — до ног фигур предмет не доставал,
а перекрывать их он должен. 1.6 плюс точка роста почти по
нижнему краю: рост целиком идёт вверх, к фигурам, и подпись
под предметом остаётся открытой. */
#anything{ --dop-rost:1.6; --dop-kren:-7deg; }
@media (hover:hover) and (pointer:fine){
/* overflow:visible тут был нужен, пока предмет вырастал прямо в
карточке. Теперь поверх фигур летит его копия, а оригинал
прячется, — обрезка не мешает, и заливке она даже нужна:
круг не должен вылезать за скругление карточки. */
/* Ни ряд, ни карточку тут больше не поднимаем. Пробовали и то,
и другое (:has на ряде, z-index на карточке) — оба раза фигуры
с мешком уходили ПОД витрину, чего быть не должно, а вдобавок
наведение начинало срываться: смена слоя прямо под курсором
заставляет браузер пересчитывать hover, и середина карточки
переставала отзываться.
Теперь поверх фигур летит отдельная копия предмета — её кладёт
js\an-vitrina.js, там же объяснено, почему копия, а не подъём.
Здесь остаётся только то, как выглядит оригинал под курсором. */
/* Точка роста внизу: предмет тянется вверх, а не наползает на
подпись. Держать одинаковой у оригинала и у копии. */
.an-strip .ob-cell .obj-photo,
#anything .an-letit{ transform-origin:50% 90%; }
}
/* Летящая копия предмета. Лежит в плашке, поверх фигур (у них 3),
но НИЖЕ ничего больше не трогает. Появляется и уезжает по тем же
числам, что и раньше стоял оригинал. */
#anything .an-letit{
position:absolute; z-index:4;
pointer-events:none; user-select:none;
object-fit:contain;
filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
transition:transform .42s cubic-bezier(.22,1,.36,1),
filter .42s cubic-bezier(.22,1,.36,1);
}
#anything .an-letit.vidno{
transform:scale(var(--dop-rost, 1.42)) rotate(var(--dop-kren, -7deg));
filter:drop-shadow(0 20px 30px rgba(0,0,0,.5));
}
@media (prefers-reduced-motion: reduce){
#anything .an-letit{ transition:none; }
}
@media (max-width:1000px){
#anything{ --dop-w:120px; }
}
@media (max-width:640px){
#anything{ --dop-w:104px; }
.ob-strip .ob-cell .obj-photo,
.dark-band .ob-cell .obj-photo{ height:48px; }
}
/* ════════ ФОТОГРАФИИ ПРЕДМЕТОВ ВМЕСТО ЗНАЧКОВ — КОНЕЦ БЛОКА ════════ */
/* ── сроки: барабан технологий ──────────────────────────────────────
Раньше шесть строк лежали таблицей: блок получался длинным, а взгляд
скользил по нему сверху вниз, не задерживаясь ни на одной технологии.
Барабан меняет способ чтения. В окне всегда три позиции — та, что
уехала, та, что в фокусе, и та, что подъезжает. Человек, который
пришёл за вышивкой, дожидается вышивки и читает её целиком, а не
выхватывает цифру из столбца.
Тёмное окно внутри светлой секции, а не тёмная секция целиком: перед
сроками уже стоит тёмный блок работ, и две тёмные секции подряд
склеились бы в одну длинную ночь. Окно даёт ту же густоту, но
остаётся предметом на светлой странице. */
/* Секция тёмная целиком, во всю ширину экрана: барабан — не виджет
внутри светлой страницы, а самостоятельный тёмный экран, на котором
светятся только плашки. Половинчатое тёмное окно с белыми полями по
бокам читалось как вставленный со стороны блок.
ВНИМАНИЕ при вставке: выше по странице уже стоит тёмный блок работ.
Две тёмные секции подряд — сознательное отступление от правила
чередования, решение заказчика. */
.sec-tl{
position:relative; overflow:hidden;
/* Цвет тёмной секции держим в переменной: тем же цветом красятся края
окна барабана, и разъехаться они не должны. */
--tl-bg:#0d1210;
}
/* Вертикальные линии на всю секцию — те же, что у тёмных полос на
внутренних страницах. Здесь у них вторая работа: на их фоне
разделитель между текстом и барабаном читается как часть сетки,
а не как случайная черта. */
.sec-tl::after{
content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
background:repeating-linear-gradient(90deg,
rgba(143,232,196,.07) 0 1px, transparent 1px 64px);
}
.sec-tl .sec-in{ position:relative; z-index:1; }
.tl-grid{
position:relative; z-index:1;
display:grid; gap:clamp(26px, 4vw, 64px);
grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
align-items:center;
margin-top:clamp(26px, 3.6vw, 44px);
}
/* Разделитель на две части. Не border у колонки: он растянулся бы на всю
её высоту, а линия должна быть короче — иначе она упирается в края и
становится рамкой. Мятная в середине, к концам растворяется. */
.tl-grid::before{
content:""; position:absolute; top:6%; bottom:6%;
left:calc(50% - .5px); width:1px;
background:linear-gradient(180deg,
rgba(143,232,196,0) 0%, rgba(143,232,196,.28) 22%,
rgba(143,232,196,.28) 78%, rgba(143,232,196,0) 100%);
}
.tl-grid .sec-head{ max-width:38ch; }
/* ── барабан ── */
/* Барабан стоит по центру своей половины, а не прижат к краю: пульт
справа даёт ему вес, и без центровки блок перекашивало вправо. */
.dr-box{
display:grid; grid-template-columns:minmax(0,1fr) auto;
gap:clamp(14px, 1.8vw, 24px); align-items:center;
width:min(100%, 520px); margin:0 auto;
}
.dr{
--dr-step:84px; /* шаг между плашками */
--dr-view:5; /* сколько видно разом */
position:relative;
height:calc(var(--dr-step) * var(--dr-view));
overflow:hidden;
cursor:grab;
touch-action:pan-x; /* вертикальный свайп забираем себе */
-webkit-tap-highlight-color:transparent;
/* Барабан листают перетаскиванием, а протяжка мышью по тексту — это
выделение: названия технологий подсвечивались синим прямо во время
листания. Выделение снимаем со всего барабана, включая пульт. */
user-select:none; -webkit-user-select:none;
}
.dr:active{ cursor:grabbing; }
.dr:focus-visible{ outline:2px solid var(--mint); outline-offset:6px; border-radius:16px; }
/* Верх и низ окна тают: без этого плашки обрезаются ровной линией и
барабан читается как список с overflow: hidden.
Раньше это была ШТОРКА — градиент, залитый цветом секции поверх окна.
Она и растворяла плашки, и заодно закрашивала всё, что лежит за
барабаном: вертикальные линии сетки пропадали ровно на её высоте,
и сверху с снизу шла тёмная полоса. Теперь вместо заливки маска на
самом барабане: плашки тают собственной прозрачностью, фон под ними
остаётся пустым, и сетка идёт насквозь. */
.dr{
-webkit-mask-image:linear-gradient(180deg,
transparent 0, #000 22%, #000 78%, transparent 100%);
mask-image:linear-gradient(180deg,
transparent 0, #000 22%, #000 78%, transparent 100%);
}
/* ── плашки ──
Кайма и слои достаются от .mbtn: селектор .dr-i перечислен в
metal-button.js рядом с .ob-cell и .be-chips. Здесь только размеры и
параметры материала — как у витринных плашек на тёмной полосе. */
.dr-i{
/* Темп вдвое ниже общесайтового. На кнопке перелив длится секунду
под курсором и там он к месту, а здесь плашки видны постоянно:
быстрый металл в шести штуках сразу читается как рябь. Точные
длительности каждой плашке раздаёт скрипт, это только базовый темп. */
--mb-rate:.5;
--mb-rim:1.5px; --mb-k:1.5; --mb-crush:3; --mb-bright:1.5;
--mb-tile:max(40px, calc(var(--mb-size, 320px) * var(--mb-k)));
--mb-amp-px:calc(var(--mb-tile) * var(--mb-amp));
position:absolute; left:2px; right:2px; top:50%;
height:calc(var(--dr-step) - 14px); margin-top:calc((var(--dr-step) - 14px) / -2);
isolation:isolate; padding:var(--mb-rim);
border:0; border-radius:16px;
background-image:linear-gradient(100deg, var(--mb-stops));
box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 18px 26px rgba(0,0,0,.32);
will-change:transform;
list-style:none;
}
.dr-i > .mbtn__body{
display:grid; align-content:center; gap:2px;
width:100%; height:100%;
padding:0 clamp(14px, 1.6vw, 20px);
border-radius:14.5px; background:#121a16;
grid-template-columns:minmax(0,1fr) auto;
font-family:inherit; letter-spacing:normal; line-height:normal;
white-space:normal; text-align:left; box-shadow:none;
transition:background .3s ease;
}
.dr-i.is-on > .mbtn__body{ background:#16211c; }
.dr-name{
grid-column:1; grid-row:1; align-self:center;
font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
font-size:clamp(15px, 1.4vw, 20px); line-height:1.15; color:var(--ink);
min-width:0;
}
.dr-days{
grid-column:2; grid-row:1; align-self:center;
font-family:var(--hud-mono); font-size:13px; letter-spacing:.04em;
font-variant-numeric:tabular-nums; color:var(--mint); white-space:nowrap;
}
/* Пояснение живёт только в плашке, стоящей в фокусе. В трёх сразу оно
превратилось бы в стену мелкого текста и убило разницу между ними. */
.dr-why{
grid-column:1 / -1; grid-row:2;
font-size:12.5px; line-height:1.35; color:rgba(243,246,244,.6);
max-height:0; opacity:0; overflow:hidden;
transition:max-height .3s ease, opacity .26s ease;
}
.dr-i.is-on .dr-why{ max-height:2.8em; opacity:1; }
/* ── пульт справа ──
Колесо мыши барабан намеренно не перехватывает: список кольцевой, у
него нет конца, и страница под курсором перестала бы прокручиваться
вовсе. Поэтому листание вынесено на кнопки — их видно, и они же
говорят, что барабан вообще листается. */
.dr-nav{ display:grid; justify-items:center; gap:10px;
user-select:none; -webkit-user-select:none; }
.dr-btn{
/* Кайме нужны и точка отсчёта, и параметры материала. Без position
слой каймы цепляется за ближайшего позиционированного предка —
это .tl-grid — и растекается металлом на весь блок. Без своих
--mb-* плитка не считается, и вместо перелива получается пятно. */
--mb-rate:.5;
--mb-rim:1.5px; --mb-k:1.6; --mb-crush:3; --mb-bright:1.4;
--mb-tile:max(40px, calc(var(--mb-size, 62px) * var(--mb-k)));
--mb-amp-px:calc(var(--mb-tile) * var(--mb-amp));
position:relative; isolation:isolate;
width:44px; height:44px; padding:var(--mb-rim);
border:0; border-radius:50%; cursor:pointer;
background-image:linear-gradient(100deg, var(--mb-stops));
box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 10px 18px rgba(0,0,0,.3);
transition:transform .18s ease, box-shadow .18s ease;
-webkit-tap-highlight-color:transparent;
}
.dr-btn:hover{ transform:translateY(-2px); }
.dr-btn:active{ transform:translateY(1px) scale(.97); }
.dr-btn:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; }
.dr-btn > .mbtn__body{
display:flex; align-items:center; justify-content:center;
width:100%; height:100%; padding:0; border-radius:50%;
background:#121a16; color:var(--mint); box-shadow:none;
}
.dr-btn svg{ width:15px; height:15px; display:block; }
/* Счётчик: сколько всего позиций и где мы сейчас. Без него барабан
выглядит бесконечным, и непонятно, дочитал ты список или нет. */
.dr-count{
font-family:var(--hud-mono); font-size:11px; letter-spacing:.14em;
color:rgba(243,246,244,.5); font-variant-numeric:tabular-nums;
}
.dr-count b{ color:var(--mint); font-weight:400; }
/* ── подпись ── */
.dr-foot{
position:relative; z-index:1;
margin:clamp(24px, 3vw, 38px) 0 0;
padding-top:clamp(18px, 2.2vw, 26px);
border-top:1px solid rgba(143,232,196,.16);
font-size:14px; line-height:1.6; color:rgba(243,246,244,.66);
}
/* Линия идёт во всю ширину блока, а ширину строки ограничивает текст
внутри: черта, обрывающаяся на середине, читается как недоделка. */
.dr-foot > span{ display:block; max-width:62ch; }
@media (max-width:900px){
.tl-grid{ grid-template-columns:1fr; align-items:start; }
/* Колонки встали друг под друга — вертикальная черта между ними
теперь ничего не разделяет. */
.tl-grid::before{ display:none; }
.dr-box{ margin:0; width:100%; }
.dr{ --dr-step:78px; --dr-view:5; }
}
@media (max-width:520px){
/* Название в две строки — норма для узкого экрана, поэтому плашке
дают высоту заранее. Ужимать шрифт дальше нельзя: срок и название
стоят в одной строке, и первым ломается именно название. */
.dr{ --dr-step:88px; --dr-view:3.6; }
.dr-box{ gap:10px; }
.dr-btn{ width:40px; height:40px; }
.dr-name{ font-size:14.5px; }
.dr-days{ font-size:12px; }
.dr-i > .mbtn__body{ padding:0 13px; }
}
/* Барабан крутится сам — для человека, попросившего убрать движение,
это ровно то, что он просил убрать. Показываем все позиции списком. */
@media (prefers-reduced-motion:reduce){
.dr{ height:auto; overflow:visible; cursor:auto; }
.dr::after{ display:none; }
.dr-nav{ display:none; }
.dr-box{ grid-template-columns:1fr; }
.dr-track{ position:static; display:grid; gap:8px; }
.dr-i{
position:static; margin:0; height:auto; min-height:64px;
transform:none !important; opacity:1 !important;
}
.dr-i > .mbtn__body{ padding:12px 16px; }
.dr-why{ max-height:none; opacity:1; }
}
/* ── бегущая строка фактов ──────────────────────────────────────────
Шов между первым экраном и содержанием, а не отдельная секция:
человек только что вышел из ролика, и ему нужно короткое «вот что
мы умеем», прежде чем он начнёт читать блоки.
Поэтому вертикальных отступов нет вовсе, а высота — одна строка.
Стоило добавить padding сверху и снизу, и полоса начинала читаться
как самостоятельный блок, который надо изучить.
Фактов дюжина, а не три: три цифры по кругу мельтешат и раздражают,
а любой случайный кусок дюжины читается как сводка. Цифры компании
перемешаны с производственной фактурой намеренно — рядом не должны
стоять «7 лет» и «400 проектов», иначе строка звучит как хвастовство.
Движение — чистый CSS. Список продублирован, лента едет ровно на
половину своей ширины и возвращается в начало: стык приходится на
одинаковые куски, поэтому шва не видно. */
.fx{
position:relative; overflow:hidden;
background:var(--bg); color:rgba(243,246,244,.82);
border-top:1px solid rgba(143,232,196,.14);
border-bottom:1px solid rgba(143,232,196,.14);
}
/* Края растворяются в фоне: строка должна уходить за экран, а не
обрываться о его границу. */
.fx::before,.fx::after{
content:""; position:absolute; top:0; bottom:0; width:clamp(40px, 8vw, 110px);
z-index:2; pointer-events:none;
}
.fx::before{ left:0; background:linear-gradient(90deg, var(--bg), rgba(11,13,12,0)); }
.fx::after { right:0; background:linear-gradient(270deg, var(--bg), rgba(11,13,12,0)); }
.fx-run{ display:flex; width:max-content; animation:fx-run 64s linear infinite; }
.fx:hover .fx-run,
.fx:focus-within .fx-run{ animation-play-state:paused; }
@keyframes fx-run{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.fx-list{
display:flex; align-items:center; gap:0;
margin:0; padding:0; list-style:none;
height:clamp(54px, 5.6vw, 62px);
}
.fx-list li{
display:flex; align-items:center;
padding:0 clamp(14px, 1.8vw, 26px);
font-size:clamp(12.5px, 1.05vw, 14px); line-height:1;
letter-spacing:.02em; white-space:nowrap;
}
/* Текст факта живёт в одном span: li — флекс-контейнер, и без обёртки
он делает флекс-элементом каждое слово, а пробелы между ними
схлопывает — получается «печать от10штук». */
.fx-list li > span{ display:block; }
/* Разделитель — псевдоэлемент, а не символ в тексте: иначе он попадёт
в выделение, в поиск по странице и в озвучку скринридера. */
.fx-list li::before{
content:""; flex:0 0 auto;
width:4px; height:4px; margin-right:clamp(14px, 1.8vw, 26px);
border-radius:50%; background:var(--mint); opacity:.5;
}
/* Цифра в факте — мятная: глаз цепляется за число, а не за слово. */
.fx-list b{ color:var(--mint); font-weight:500; font-variant-numeric:tabular-nums; }
/* На светлой полосе те же правила, другой цвет. Понадобится на
внутренних страницах, где тёмная полоса подряд была бы третьей. */
.fx--light{
background:var(--l-bg); color:var(--l-dim);
border-color:rgba(16,22,19,.12);
}
.fx--light::before{ background:linear-gradient(90deg, var(--l-bg), rgba(238,242,236,0)); }
.fx--light::after { background:linear-gradient(270deg, var(--l-bg), rgba(238,242,236,0)); }
.fx--light .fx-list b{ color:var(--mint-ink); }
.fx--light .fx-list li::before{ background:var(--mint-ink); opacity:.45; }
/* ── лента в глубине сцены ──
Тот же список фактов, но не полосой поверх вёрстки, а слоем внутри
блока: без подложки и рамок, приглушённая, за зеленью. Подложка ей
не нужна — она и так лежит на фоне секции, а рамки провели бы через
весь блок линию и разрезали сцену пополам. */
/* Подложку и края задаёт тот, кто ставит ленту в блок (см. .dir-fx):
здесь только текст. Он тёмный — лежит на белом. */
.fx--fon{ border:0; }
.fx--fon .fx-list li{ color:rgba(16,22,19,.78); }
.fx--fon .fx-list b{ color:var(--mint-ink); }
.fx--fon .fx-list li::before{ background:var(--mint-ink); opacity:.5; }
/* Свои градиенты по краям не нужны: край режет маска всего слоя. */
.fx--fon::before,.fx--fon::after{ display:none; }
/* Обратный ход: слева направо. Отдельные кадры, а не animation-direction:
reverse — с reverse ломается пауза по наведению, лента прыгает. */
.fx--nazad .fx-run{ animation-name:fx-run-nazad; }
@keyframes fx-run-nazad{ from{ transform:translateX(-50%) } to{ transform:translateX(0) } }
@media (max-width:640px){
/* На телефоне лента идёт медленнее: экран уже, и при той же скорости
факт успевает уехать раньше, чем его дочитают. */
.fx-run{ animation-duration:88s; }
}
@media (prefers-reduced-motion:reduce){
.fx-run{ animation:none; width:auto; }
.fx{ overflow-x:auto; scrollbar-width:thin; }
.fx::before,.fx::after{ display:none; }
.fx-copy{ display:none; } /* дубль нужен только ленте */
}
/* ── пульт расчёта: широкое табло и клетка ──────────────────────────
Раньше в пульте было три ряда: изделие, нанесение, тираж. Заказчик
всё равно дописывал остальное в переписке — размеры, материал, цвет,
дату. Теперь это спрашивает пульт, и бриф уходит готовым.
Табло справа прилипает под шапкой и стоит, пока левая колонка едет
мимо. Ход виден по клетке на фоне: без неё табло скользит по пустому
белому, и движение читается только по краю экрана.
ВАЖНО про overflow. У секции стоит clip, а не hidden: любой предок с
overflow, кроме visible и clip, перехватывает липкость на себя —
табло прилипло бы к секции, а не к экрану, и просто стояло бы на
месте. Ошибка тихая, поэтому оставлена эта запись. */
#calc{
--calc-split:1; /* во сколько раз правая колонка шире левой */
--gr-step:64px; /* шаг клетки */
--gr-a:.1; /* насыщенность линий */
--chip-cols:4; /* чипов в ряд */
position:relative; overflow:clip;
}
#calc::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:
repeating-linear-gradient(90deg, rgba(47,138,105,var(--gr-a)) 0 1px,
transparent 1px var(--gr-step)),
repeating-linear-gradient(180deg, rgba(47,138,105,var(--gr-a)) 0 1px,
transparent 1px var(--gr-step));
/* К краям клетка растворяется: сплошная сетка от края до края
читается как миллиметровка, а не как фактура. */
-webkit-mask-image:radial-gradient(120% 90% at 50% 45%, #000 40%, transparent 100%);
mask-image:radial-gradient(120% 90% at 50% 45%, #000 40%, transparent 100%);
}
/* Без своего z-index: иначе всё содержимое замыкается в один слой, и
поднять над рамками ОДНУ шапку блока становится нечем. Позиция всё
так же держит его поверх клетки (у неё z-index 0). */
#calc .sec-in{ position:relative; }
/* ── фон блока ──
Дальний пейзаж подложкой и рамка из лиан по краям окна. Слой лежит
ПОД клеткой и под содержимым: клетка — фактура табло, она должна
читаться поверх пейзажа, а не спорить с ним.
Все три слоя приглушены: это фон, а не картинка. Дальний вдобавок
размыт — по тому же правилу глубины, что и в блоке вопросов. */
#calc{
--cf-zad-op:.26; --cf-zad-blur:2.5px;
/* Ближний план идёт в полную силу: он не фон, он перед камерой.
Высота — вся секция, ширина считается сама по пропорции картинки:
так рамка не обрезается ни сверху, ни снизу. Заход на пульт от
этого получается сам собой, картинка широкая. */
--cf-bok-op:1; --cf-bok-blur:0px;
--cf-bok-k:1; /* множитель высоты рамки */
/* Где рамка переходит из переднего плана в задний. Разрез РЕЗКИЙ, по
верхней кромке чипа «DTF-печать»: всё выше идёт поверх пульта в
полную силу, всё ниже — за ним. Мягкий переход тут был ошибкой —
верх получался полупрозрачным, и вместо «лежит поверх» выходило
«просвечивает». Шва не видно: обе половины — одна и та же картинка
в одной и той же точке, разрез приходится ровно между ними. */
--cf-razrez:63%;
--cf-styk:.5%; /* волосяное перекрытие, чтобы не было щели */
/* Дыхание рамки вбок: без него сцена мёртвая. Обе половины одной
стороны ходят одной анимацией, иначе разрез поедет. */
--cf-hod:9px;
}
.calc-fon{
position:absolute; inset:0; z-index:0;
pointer-events:none; user-select:none;
}
.cf{ position:absolute; }
/* Дальний план на всю секцию. Сверху и снизу уходит в фон блока,
иначе видно, где картинка кончается. */
.cf-zad{
inset:0;
background:url(../img/b07-raschet/fon-calc.webp) 50% 30% / cover no-repeat;
opacity:var(--cf-zad-op);
filter:blur(var(--cf-zad-blur));
-webkit-mask-image:linear-gradient(180deg,
transparent 0, #000 14%, #000 82%, transparent 100%);
mask-image:linear-gradient(180deg,
transparent 0, #000 14%, #000 82%, transparent 100%);
}
/* ── ближний план: рамка из лиан ПОВЕРХ ВСЕГО ──
Лежит НАД пультом и табло и краем листвы заходит на них. В этом весь
смысл: перекрытие и создаёт объём — окна уходят в глубину, заросли
стоят перед камерой. Слой отдельный от .calc-fon (тот под всем) и с
высоким z-index — внутренние стековые контексты .sec-in он этим
перебивает целиком.
Половинки прижаты своим краем к краю ОКНА, не колонки: у левой
картинки гуща слева, у правой справа, потому и background-position
разный — иначе cover срезал бы как раз плотную часть. */
.calc-pered{
position:absolute; inset:0; z-index:6;
pointer-events:none; user-select:none;
}
/* Картинкой, а не фоном: у img ширина считается от высоты сама, и
рамка не режется ни сверху, ни снизу — раньше cover срубал ей низ
ровной линией. */
.cf-l, .cf-r{
position:absolute; top:0;
height:calc(100% * var(--cf-bok-k)); width:auto; max-width:none;
opacity:var(--cf-bok-op);
filter:blur(var(--cf-bok-blur));
}
/* Задвинуты за край окна ровно на величину хода. Без этого на качке
картинка отходила от края и там оголялась белая полоса фона: теперь
в крайнем положении она лишь доходит до края, а не уходит внутрь. */
.cf-l{ left:calc(-1 * var(--cf-hod)); }
.cf-r{ right:calc(-1 * var(--cf-hod)); }
/* Встречные маски с РЕЗКИМ разрезом. Верхняя копия (в .calc-pered)
обрывается на отметке, нижняя (в .calc-fon) с неё начинается. Обе в
полную силу — верх ничего не теряет в плотности, потому и читается
как лежащий поверх. */
.calc-pered .cf-l, .calc-pered .cf-r{
-webkit-mask-image:linear-gradient(180deg,
#000 var(--cf-razrez), transparent calc(var(--cf-razrez) + var(--cf-styk)));
mask-image:linear-gradient(180deg,
#000 var(--cf-razrez), transparent calc(var(--cf-razrez) + var(--cf-styk)));
}
.calc-fon .cf-l, .calc-fon .cf-r{
-webkit-mask-image:linear-gradient(180deg,
transparent var(--cf-razrez), #000 calc(var(--cf-razrez) + var(--cf-styk)));
mask-image:linear-gradient(180deg,
transparent var(--cf-razrez), #000 calc(var(--cf-razrez) + var(--cf-styk)));
}
/* Дыхание. Ход вбок, разные фазы у сторон — заросли шевелятся, а не
качаются в такт. Обе копии одной стороны получают одну и ту же
анимацию и стартуют вместе, поэтому разрез между ними не расходится. */
@keyframes cfDriftL{
0%,100%{ transform:translate3d(calc(-1 * var(--cf-hod)), 0, 0); }
50% { transform:translate3d(var(--cf-hod), 0, 0); }
}
@keyframes cfDriftR{
0%,100%{ transform:translate3d(var(--cf-hod), 0, 0); }
50% { transform:translate3d(calc(-1 * var(--cf-hod)), 0, 0); }
}
.cf-l{ will-change:transform; animation:cfDriftL 23s ease-in-out infinite; }
.cf-r{ will-change:transform; animation:cfDriftR 29s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){
.cf-l, .cf-r{ animation:none; }
}
/* Шапка блока — выше рамок и на своей подложке: заголовок не должен
тонуть в листве. Подложка светлая и полупрозрачная, фон под ней
размыт — тот же приём, что у ленты фактов. */
#calc .sec-head{
/* Слой 2: выше пульта, но НИЖЕ рамок. Рамки должны накрывать и её —
в этом весь смысл ближнего плана. Подложка нужна не чтобы спрятать
листву, а чтобы заголовок не терялся на пейзаже. */
position:relative; z-index:2;
width:max-content; max-width:100%;
padding:clamp(14px, 1.6vw, 22px) clamp(18px, 2.2vw, 30px);
border-radius:22px;
background:var(--cf-shapka, rgba(255,255,255,.5));
-webkit-backdrop-filter:blur(10px) saturate(1.05);
backdrop-filter:blur(10px) saturate(1.05);
}
/* На телефоне колонка занимает всю ширину — рамка легла бы на текст. */
@media (max-width:860px){
.calc-pered, .calc-fon .cf-l, .calc-fon .cf-r{ display:none; }
#calc{ --cf-zad-op:.18; }
#calc .sec-head{ width:auto; padding:0; background:none;
-webkit-backdrop-filter:none; backdrop-filter:none; }
}
/* ── зелень в правом верхнем углу ──
Две картинки, а не одна: одна колонна в углу читается как наклейка,
две разной формы — как угол зарослей. Колонна (--1) отражена по
горизонтали и утоплена за верхний край, поэтому видно только её низ;
куст с бусинами (--10) стоит вплотную к верху и чуть левее.
Обрезает их сама секция: у #calc уже стоит overflow:clip. Именно
clip, а не hidden — см. запись выше, от hidden отлипает табло.
Ходят они так же, как зелень в «направлениях»: тем же дыханием и
теми же ручками размаха, только тише — угол не должен махать. */
#calc{ --cz-op:.95; --dg-par-bg:7px; --dg-par-fr:9px; }
.calc-deko{
position:absolute; inset:0; z-index:0;
pointer-events:none; overflow:hidden;
}
.calc-deko .cz{
position:absolute; height:auto; opacity:var(--cz-op);
filter:drop-shadow(0 14px 22px rgba(16,40,32,.16));
will-change:transform;
}
/* Колонна: в самый угол, вправо за край и вверх за край. */
.cz-1{
right:calc(-1 * clamp(6px, 0.9vw, 18px));
top:calc(-1 * clamp(30px, 4vw, 72px));
width:clamp(160px, 20vw, 330px);
transform:scaleX(-1);
animation:czDrift 31s ease-in-out infinite;
}
/* Куст: глубже под верхний край, чем колонна, и правее — так, чтобы
уходить ей за спину. Начала у него не видно, свисает как продолжение
той же кроны, а не как отдельная висящая штука. Слой ниже колонны:
в разметке он идёт первым, оба на z-index 0. */
.cz-10{
right:clamp(74px, 9.5vw, 170px);
top:calc(-1 * clamp(66px, 8.5vw, 155px));
width:clamp(135px, 17vw, 285px);
animation:czDriftB 24s ease-in-out infinite;
}
/* Колонна отражена, поэтому её дыхание — отдельными кадрами: общий
dgDriftA сбросил бы scaleX(-1) и картинка перевернулась бы обратно. */
@keyframes czDrift{
0%,100%{ transform:scaleX(-1) translate3d(calc(-1 * var(--dg-par-bg)), 0, 0); }
50% { transform:scaleX(-1) translate3d(var(--dg-par-bg), 0, 0); }
}
@keyframes czDriftB{
0%,100%{ transform:translate3d(var(--dg-par-fr), 0, 0); }
50% { transform:translate3d(calc(-1 * var(--dg-par-fr)), 0, 0); }
}
@media (prefers-reduced-motion: reduce){
.cz-1, .cz-10{ animation:none; }
}
/* На телефоне угол занят шапкой блока — зелень только мешает. */
@media (max-width:640px){
.calc-deko{ display:none; }
}
/* Не грид: ширину колонки в гриде нельзя задать переменной-числом,
calc(1fr * N) не считается вовсе, и вторая колонка исчезает.
flex-grow берёт число как есть. */
.calc{ display:flex; align-items:flex-start; }
.calc .calc-panel{ flex:1 1 0; min-width:0; }
.calc .calc-out{ flex:var(--calc-split) 1 0; min-width:0; }
/* ── ряды ── */
.calc-row{ position:relative; }
.calc-row legend{ display:flex; align-items:baseline; gap:10px; width:100%; }
/* Выбранное значение стоит рядом с названием ряда: свёрнутый ряд на
телефоне должен говорить, что в нём выбрано, не разворачиваясь. */
.cr-val{
font-family:var(--hud-mono); font-size:11px; letter-spacing:.06em;
color:var(--mint-ink); opacity:.9; margin-left:auto;
}
.cr-body{ display:block; }
/* Чипы ровной решёткой: плашки разной ширины в ряду читаются как
случайный набор, одинаковые — как пульт. */
.calc-row .chips{
display:grid; gap:10px;
grid-template-columns:repeat(var(--chip-cols), minmax(0, 1fr));
}
.calc-row .chips-qty{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
.calc-row .chip{ width:auto; display:flex; }
/* Тело на всю плашку: иначе под ним видна подложка каймы, и ряд
выглядит так, будто чипы подтекают медью снизу. */
.calc-row .chip-face{
width:100%; height:100%; box-sizing:border-box;
display:flex; flex-direction:column; justify-content:center;
}
/* ── цвет изделия ── */
.cl-list{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cl{ position:relative; width:34px; height:34px; cursor:pointer; }
.cl input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.cl i{
display:block; width:100%; height:100%; border-radius:50%;
background:var(--c); box-shadow:0 0 0 1px rgba(16,22,19,.22);
transition:transform .15s ease, box-shadow .15s ease;
}
.cl input:checked + i{
transform:scale(1.08);
box-shadow:0 0 0 2px var(--l-bg), 0 0 0 4px var(--mint-ink);
}
.cl input:focus-visible + i{ box-shadow:0 0 0 2px var(--l-bg), 0 0 0 4px var(--mint-ink); }
/* Своя краска: кружок открывает системную палитру. Точный тон заказчик
всё равно уточнит голосом, здесь нужен только оттенок. */
.cl-own{ display:flex; align-items:center; gap:8px; }
.cl-own input[type=color]{
width:34px; height:34px; padding:0; border:0; border-radius:50%;
background:none; cursor:pointer;
}
.cl-own input[type=color]::-webkit-color-swatch{ border-radius:50%; border:1px dashed rgba(16,22,19,.4); }
.cl-own input[type=color]::-webkit-color-swatch-wrapper{ padding:0; }
.cl-own span{ font-size:12px; color:var(--l-dim); }
/* ── своё место нанесения и дата ── */
.calc-own{ margin-top:10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.calc-own input[type=text],
.calc-own input[type=date]{
flex:1 1 200px; min-width:0;
padding:10px 12px; border-radius:10px;
border:1px solid rgba(16,22,19,.18); background:#fff;
font:14px/1.2 inherit; color:var(--l-ink);
}
.calc-own input:focus-visible{ outline:2px solid var(--mint-ink); outline-offset:1px; }
/* Срочный заказ — не чип, а тумблер: он не выбирает из ряда, он меняет
режим счёта, и выглядеть должен иначе. */
.rush{
display:inline-flex; align-items:center; gap:9px; cursor:pointer;
padding:9px 14px; border-radius:999px;
border:1px solid rgba(16,22,19,.18); background:#fff;
font-size:13px; color:var(--l-ink); white-space:nowrap;
}
.rush input{ position:absolute; opacity:0; }
.rush i{
width:30px; height:17px; border-radius:999px; position:relative;
background:rgba(16,22,19,.2); transition:background .18s ease;
}
.rush i::after{
content:""; position:absolute; top:2px; left:2px;
width:13px; height:13px; border-radius:50%; background:#fff;
transition:transform .18s ease;
}
.rush input:checked + i{ background:var(--mint-ink); }
.rush input:checked + i::after{ transform:translateX(13px); }
.rush.on{ border-color:var(--mint-ink); }
/* ── ответ по дате ── */
.calc-date{ color:var(--mint); }
.calc-date.bad{ color:#ff9a8a; }
.calc-date.tight{ color:#ffd479; }
/* ── телефон ────────────────────────────────────────────────────────
Восемь рядов подряд на узком экране — простыня, по которой человек
скроллит, теряя, где он был. Ряды сворачиваются: развернул, отметил,
свернулся сам и открыл следующий. В свёрнутом виде ряд показывает
выбранное — список читается как чек. */
@media (max-width:760px){
.calc{ display:block; }
#calc .calc-row{
border:1px solid rgba(16,22,19,.14); border-radius:14px;
background:#fff; padding:0; margin:0 0 8px;
}
/* Шапка ряда — кнопка, по которой бьют пальцем: не ниже 48 пикселей. */
#calc .calc-row legend{ min-height:48px; }
.calc-row legend{
float:none; width:100%; box-sizing:border-box;
padding:14px 16px; margin:0; cursor:pointer; align-items:center;
}
/* Стрелка говорит, что ряд раскрывается: без неё свёрнутый ряд
читается как заголовок, и по нему не нажимают. */
.calc-row legend::after{
content:""; width:8px; height:8px; margin-left:10px; flex:0 0 auto;
border-right:2px solid var(--mint-ink); border-bottom:2px solid var(--mint-ink);
transform:rotate(45deg) translateY(-2px);
transition:transform .2s ease;
}
.calc-row.open legend::after{ transform:rotate(-135deg) translateY(-2px); }
.cr-body{
max-height:0; overflow:hidden; opacity:0; padding:0 16px;
transition:max-height .28s ease, opacity .2s ease, padding .28s ease;
}
.calc-row.open .cr-body{ max-height:640px; opacity:1; padding:0 16px 16px; }
.calc-row .chips{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.calc-row .chips-qty{ grid-template-columns:repeat(3, minmax(0,1fr)); }
/* Табло на телефоне не липнет: экран короткий, прилипшее табло съело
бы половину. Оно просто идёт последним. */
.calc-out{ position:static; }
}
/* Кнопка «Оставить заявку» под номером в блоке контактов. Номер —
крупная кнопка по центру, эта идёт следом и тем же порядком: не
спорит с ним размером, но стоит на той же оси. */
.ct-cta{
display:block; width:fit-content; margin:14px auto 0;
}
/* ── РАЗМЫТИЕ КАЙМЫ ─────────────────────────────────────────────────
Металл под плашкой рисуется резкими полосами, и на краю кнопки они
обрывались слишком жёстко — заметнее всего на «К делу» в шапке, где
кайма толще остальных. Размываем сам слой перелива: тело кнопки
лежит выше и остаётся чётким, мягче становится только свечение по
краю.
Величины разные: в шапке кайма толстая и просит больше размытия,
у витринных плашек она тонкая — там хватает совсем чуть-чуть.
Больше двух пикселей превращает перелив в мутное пятно. */
.mbtn__rim{ filter:blur(.9px); }
.hb__rim{ filter:blur(1.6px); }
/* Кнопка-помощник в шапке («К делу», «Наверх», «На главную») —
у неё кайма самая толстая, ей нужно заметнее. */
.hb-ctx .hb__rim{ filter:blur(2px); }
/* Витринные плашки: отрасли, каталог, работы, барабан сроков. */
.ind .mbtn__rim,
.ob-cell .mbtn__rim,
.case .mbtn__rim,
.dr-i .mbtn__rim,
.dr-btn .mbtn__rim{ filter:blur(1.2px); }
/* ══════════════ ФОРМА КНОПОК НА ТЕЛЕФОНЕ ══════════════
Радиус задан в пикселях, а ширина кнопки — нет. На широком экране
кнопка длинная, и полукруглые торцы занимают малую долю: форма
читается как прямоугольник со скруглением. На узком та же кнопка
вдвое короче, доля закругления растёт, и она превращается в
таблетку — при том, что правило одно и то же.
Поэтому на телефоне радиус конечный. Восемнадцать — тот же порядок,
что у вкладок шапки (16) и чипов пульта (12,5): кнопки перестают
спорить с остальным сайтом.
Круглые кнопки это не трогает: у стрелок барабана и «наверх» свой
радиус 50%, он перекрывает переменную. */
@media (max-width:640px){
.mbtn{ --mb-r:18px; }
}
/* ══════════════════════════════════════════════════════════════════
ПОЯВЛЕНИЕ ФИГУР
══════════════════════════════════════════════════════════════════
Блоки выезжают снизу вверх, фигуры на них — только проявляются.
Сдвига у фигур нет намеренно: у каждой свой transform (посадка под
углом, поворот вокруг локтя, вылет за кромку карточки), и общее
правило появления его перебивает — фигура садится мимо. Ровно из-за
этого у .ind-geko ниже по файлу стоит удлинённый селектор.
Задержка 0.3 с при ступеньке карточек в 70 мс: фигура начинает
проявляться, пока карточки ещё доезжают, и заканчивает последней.
Сначала встала витрина — потом на неё положили фигуру.
Класс geko-yav расставляет js\reveal.js, список фигур там же
(AS_GEKO). Всё скрытие — под .anim: не отработал скрипт, старый
браузер — фигуры просто видны, как и было.
══════════════════════════════════════════════════════════════════ */
.anim .geko-yav{
opacity:0;
transition:opacity .9s cubic-bezier(.22, 1, .36, 1) .3s;
}
.anim .geko-yav.in{ opacity:1; }
/* Фигура «Отраслей» лежит ВНУТРИ сетки-ступеньки, и правило появления
её детей забирает прозрачность себе. Возвращаем управление фигуре:
иначе она проявляется вместе с карточками, а должна — после. */
.anim .reveal-kids > .geko-yav,
.anim .reveal-kids.in > .geko-yav{ opacity:0; }
.anim .reveal-kids > .geko-yav.in,
.anim .reveal-kids.in > .geko-yav.in{ opacity:1; }
/* «Поменьше движения» — фигуры просто на месте. */
@media (prefers-reduced-motion: reduce){
.anim .geko-yav,
.anim .reveal-kids > .geko-yav{ opacity:1 !important; transition:none; }
}
/* На узком экране человек в блоке вопросов работает бледным фоном, и
у него своя прозрачность. Появление её перебивать не должно. */
@media (max-width:820px){
.anim .fq-drop.geko-yav,
.anim .fq-drop.geko-yav.in{ opacity:.16; }
}
/* ══════ ВИТРИНА ПРЕДМЕТОВ: ЧЕТЫРЕ В РЯД ══════════════════════════
Замечание Павла: «кайма и содержимое не сочетаются». Так и было, и
причин ровно две — обе механические.
Первая. Плашке дана рамка-кайма толщиной --mb-rim, она задана
отступом: padding:var(--mb-rim). Но выше по файлу у любого пункта
списка внутри .page-sec стоит padding-left:10px — правило весом
0-2-0, оно перебивает отступ каймы весом 0-1-0. Слева кайма
выходила вшестеро шире, чем справа, и плашка смотрелась перекошенной.
Вторая. Плитки в сетке тянутся по высоте самой высокой (подпись в
две строки), а белое тело внутри — нет: оно ровно по своему
содержимому. Разница добиралась каймой, и снизу у коротких плиток
набегала широкая чёрная полоса.
Лечим обе: отступ возвращаем кайме селектором потяжелее, тело
растягиваем на всю плитку и центрируем содержимое по вертикали. */
.page-sec .ob-strip .ob-cell{ padding:var(--mb-rim); }
.ob-strip .ob-cell{ display:flex; }
.ob-strip .ob-cell > .mbtn__body{ flex:1 1 auto; align-content:center; }
/* Восемь предметов в ряд по четыре — это две ровные строки вместо
семи плюс сирота. Освободившееся место отдаём самому предмету:
плашка вдвое шире прежней, снимок вдвое крупнее, и кайма в 2 px
на такой плашке читается как тонкий кант, а не как рама. */
@media (min-width:720px){
.ob-strip--4,
.page-sec .ob-strip--4{ gap:clamp(14px, 1.7vw, 24px); }
.ob-strip--4 .ob-cell{ --mb-rim:2px; border-radius:24px; }
.ob-strip--4 .ob-cell .mbtn__body{
gap:clamp(12px, 1.2vw, 18px);
padding:clamp(22px, 2.5vw, 36px) clamp(12px, 1.4vw, 20px)
clamp(18px, 2vw, 28px);
border-radius:22px;
}
.ob-strip--4 .ob-cell .obj-photo{
width:auto; height:clamp(88px, 8.4vw, 138px);
}
.ob-strip--4 .ob-cell .obj{ width:clamp(64px, 6vw, 96px); }
.ob-strip--4 .ob-cell span{ font-size:clamp(13px, 1.05vw, 15.5px); }
}
/* Фон под витриной. Секция сама шириной с колонку текста, а фон
должен идти от края до края окна — отсюда 100vw и сдвиг на
половину разницы. Снизу и сверху растворяется, чтобы стык с
обычным фоном страницы не читался линией.
z-index:-1 работает только внутри своего слоя, поэтому у секции
стоит isolation:isolate: без неё картинка ушла бы под фон всей
страницы и пропала. */
.page-sec--fon{ position:relative; isolation:isolate; }
.page-sec--fon::before{
content:''; position:absolute; z-index:-1; pointer-events:none;
top:calc(-1 * clamp(28px, 4vw, 64px));
bottom:calc(-1 * clamp(28px, 4vw, 64px));
left:50%; width:100vw; margin-left:-50vw;
background:url(../img/obshee/fon-strip.webp) 24% 52% / cover no-repeat;
opacity:var(--psf-op, .46);
-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14%,
#000 86%, transparent 100%);
mask-image:linear-gradient(180deg, transparent 0, #000 14%,
#000 86%, transparent 100%);
}
/* ══════ ТРИ КАРТОЧКИ СО СНИМКАМИ ════════════════════════════════
Три абзаца под витриной раньше шли подряд обычным текстом и читались
как продолжение статьи, хотя по смыслу это три разных предмета —
ровно те, что в витрине сверху. Карточка со снимком возвращает им
предметность: сначала видно вещь, потом читается, чем она хороша.
Порядок слоёв простой и без наложений: снимок сверху во всю ширину
карточки, под ним текст на тёмном, у нижнего края — строка из
четырёх пунктов. Надпись поверх фотографии мы пробовали: снимок
при этом наполовину съеден вуалью, а текст всё равно ложится на
складки и блики. Разложенные по вертикали, оба читаются целиком.
Ряд выходит за колонку текста на всю ширину окна: карточки тут не
иллюстрация к абзацу, а сам предмет разговора, и в колонке шириной
с текст они получались втрое уже своей высоты. */
.pg-tri{
width:100vw; max-width:none; box-sizing:border-box;
margin:clamp(34px, 4.4vw, 64px) 0 clamp(30px, 3.6vw, 52px);
margin-inline:calc(50% - 50vw);
padding-inline:clamp(16px, 4vw, 84px);
display:grid; grid-template-columns:repeat(3, 1fr);
gap:clamp(16px, 1.8vw, 28px);
}
/* Кайма — та же живая металлическая, что у плашек витрины: .tri-card
перечислен в metal-button.js, скрипт заворачивает содержимое в
.mbtn__body. Отступов у тела нет: снимок должен упираться в кайму,
поля есть только у текста. */
.tri-card{
--mb-rim:2px; --mb-k:1.7; --mb-crush:2.6; --mb-bright:1.4;
--mb-tile:max(40px, calc(var(--mb-size, 420px) * var(--mb-k)));
--mb-amp-px:calc(var(--mb-tile) * var(--mb-amp));
position:relative; isolation:isolate;
display:flex; padding:var(--mb-rim);
border:0; border-radius:28px;
background-image:linear-gradient(100deg, var(--mb-stops));
box-shadow:0 0 0 1px rgba(7,40,28,.16), 0 16px 40px rgba(8,26,20,.2);
}
.tri-card > .mbtn__body{
position:relative; overflow:hidden;
display:flex; flex-direction:column;
width:100%; box-sizing:border-box;
padding:0; border-radius:26px;
background:#0b1310; color:#eef4f1;
box-shadow:none; text-align:left;
font-size:inherit; font-weight:400; letter-spacing:normal;
line-height:normal; white-space:normal;
}
/* Низ снимка растворяется в тёмном теле, поэтому стыка не видно и
рамку рисовать не нужно. Текст поднят в эту растворённую полосу
отрицательным отступом: там от кадра остаётся почти чёрное, и
высота карточки не тратится на пустоту. */
.tri-foto{
position:relative; z-index:0; display:block;
width:100%; height:auto; max-width:none;
aspect-ratio:var(--tri-kadr, 1 / 1.08);
object-fit:cover; object-position:50% var(--tri-tochka, 26%);
-webkit-mask-image:linear-gradient(180deg, #000 72%, transparent 100%);
mask-image:linear-gradient(180deg, #000 72%, transparent 100%);
pointer-events:none; -webkit-user-drag:none; user-select:none;
}
.tri-in{
position:relative; z-index:1;
display:flex; flex-direction:column; flex:1 1 auto;
margin-top:calc(-1 * clamp(26px, 2.6vw, 44px));
padding:0 clamp(20px, 1.7vw, 30px) clamp(20px, 1.7vw, 28px);
}
.tri-in h3{
margin:0 0 10px;
font-family:var(--font-display); font-weight:700;
font-size:clamp(20px, 1.5vw, 27px); line-height:1.12;
letter-spacing:-.02em; color:#fff;
}
.tri-in h3 em{ font-style:normal; color:var(--mint, #8fe8c4); }
.tri-in p{
margin:0; max-width:none;
font-size:clamp(13px, .92vw, 14.5px); line-height:1.5;
color:rgba(238,244,241,.78);
}
/* Четыре пункта строкой у самого низа. margin-top:auto прижимает их
к нижнему краю, поэтому у карточек с текстом разной длины строка
стоит на одной высоте. Маркеры и отступы у списков внутри .page-sec
свои, здесь их снимаем: это сетка значков, а не перечисление. */
.tri-pl,
.page-sec .tri-pl{
list-style:none; max-width:none;
margin:auto 0 0; padding:clamp(16px, 1.7vw, 24px) 0 0;
border-top:1px solid rgba(143,232,196,.16);
display:grid; grid-template-columns:repeat(4, 1fr);
gap:clamp(8px, .9vw, 14px);
}
.tri-pl li,
.page-sec .tri-pl li{
margin:0; padding:0;
display:flex; flex-direction:column; align-items:center; gap:9px;
text-align:center; text-wrap:balance;
font-size:clamp(10.5px, .74vw, 12px); line-height:1.28;
color:rgba(238,244,241,.8);
}
.tri-pl li::before,
.page-sec .tri-pl li::before{ content:none; }
.tri-zn{
width:clamp(20px, 1.5vw, 24px); height:auto;
color:var(--mint, #8fe8c4); opacity:.95;
}
/* На среднем экране три колонки становятся уже своей высоты втрое —
тогда лучше одна широкая карточка и горизонтальный кадр. */
@media (max-width:1100px){
.pg-tri{ grid-template-columns:1fr; padding-inline:clamp(14px, 4vw, 40px); }
.tri-card{ --tri-kadr:4 / 3.4; --tri-tochka:12%; }
.tri-in h3{ font-size:clamp(21px, 4vw, 27px); }
.tri-in p{ font-size:14px; }
}
@media (max-width:560px){
.tri-card{ --tri-kadr:4 / 4.2; }
.tri-pl,
.page-sec .tri-pl{ grid-template-columns:1fr 1fr; gap:16px; }
}
/* Врезка «чем мерим успех» с предметом над надписью. Обычная врезка
ставит метку слева от текста в отдельной колонке; здесь предмет и
метка идут сверху вниз и прижаты к левому краю — так просил Павел. */
.pg-claim--dar{
grid-template-columns:1fr;
justify-items:start;
gap:clamp(10px, 1.2vw, 16px);
}
.pg-claim--dar .cl-dar{
display:block; width:clamp(104px, 9.5vw, 158px); height:auto;
margin:0 0 clamp(2px, .6vw, 8px);
}
.pg-claim--dar .cl-mark{ padding-top:0; }
/* ══════ ВЫСТАВОЧНЫЙ БЛОК И ТЁМНЫЕ СРОКИ ═════════════════════════
1. Четыре карточки вместо трёх. Разметка и стили те же, меняется
только число колонок. На среднем экране рвём на две пары, а не
на одну колонку: четыре широкие карточки подряд — это экран с
лишним прокрутки. */
.pg-tri--4{ grid-template-columns:repeat(4, 1fr); }
@media (min-width:1101px) and (max-width:1500px){
.pg-tri--4{ grid-template-columns:repeat(2, 1fr); }
.pg-tri--4 .tri-card{ --tri-kadr:4 / 3.6; --tri-tochka:22%; }
}
/* 2. Второй заголовок внутри большого блока. Он подчинён первому —
«Выставки и конференции» открывают тему, «что входит» перечисляет
её состав, — поэтому кегль меньше, а поле сверху больше: воздух
делит блок на две части надёжнее, чем горизонтальная линия. */
.page-sec h2.h2-mel{
margin-top:clamp(40px, 5vw, 76px);
font-size:clamp(19px, 1.75vw, 26px);
}
/* 3. Сроки — тёмная секция со своим снимком в подложке. Тёмный цвет
секции остаётся под снимком: он проступает там, где кадр светлее,
и держит блок в общей гамме страницы.
::after у тёмной секции уже занят вертикальными полосами, поэтому
снимок кладём в ::before. Дети секции позиционированы (правило
.page-sec.dark > * выше), так что оба слоя остаются под текстом. */
.ps-srok::before{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:url(../img/obshee/fon-blok-1.webp) 50% 42% / cover no-repeat;
opacity:var(--srok-op, .5);
-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 16%,
#000 84%, transparent 100%);
mask-image:linear-gradient(180deg, transparent 0, #000 16%,
#000 84%, transparent 100%);
}
/* Полосы поверх снимка слишком заметны — приглушаем их вдвое. */
.ps-srok::after{ opacity:.5; }
/* ВНИМАНИЕ. На главной у ленты предметов стоят ОБА класса —
ob-strip и an-strip, — и у неё своя механика: круг заливки там
растёт трансформацией на 300 % ширины плашки, а обрезка тела
держит его внутри. Наши правила снимали обрезку (чтобы предмет
выходил за плашку) и переопределяли тот же псевдоэлемент — круг
вырывался наружу и заливал полэкрана. Поэтому ниже везде стоит
:not(.an-strip): витрина главной остаётся при своём. */
/* ══════ ПРЕДМЕТ ВЫХОДИТ ИЗ ВИТРИНЫ ══════════════════════════════
То же движение, что у витрины на главной: при наведении снимок
вырастает и слегка кренится влево — вещь читается как предмет НАД
плашкой, а не как картинка внутри неё.
Точка роста у нижнего края: предмет тянется вверх и не наползает на
подпись. Плашке под курсором поднимаем z-index, иначе соседняя
нарисуется поверх выросшего снимка, и обрезку снимаем — выход за
край окна здесь не изъян, а весь смысл. */
@media (hover:hover) and (pointer:fine){
.ob-strip:not(.an-strip) .ob-cell{ --ob-rost:1.42; --ob-kren:-6deg; }
.ob-strip:not(.an-strip) .ob-cell .obj-photo{
transform-origin:50% 92%;
transition:transform .42s cubic-bezier(.22,1,.36,1);
will-change:transform;
}
.ob-strip:not(.an-strip) .ob-cell:hover,
.ob-strip:not(.an-strip) .ob-cell.navel{ z-index:3; }
.ob-strip:not(.an-strip) .ob-cell:hover > .mbtn__body,
.ob-strip:not(.an-strip) .ob-cell.navel > .mbtn__body{ overflow:visible; }
.ob-strip:not(.an-strip) .ob-cell:hover .obj-photo,
.ob-strip:not(.an-strip) .ob-cell.navel .obj-photo{
transform:scale(var(--ob-rost)) rotate(var(--ob-kren));
}
}
@media (prefers-reduced-motion: reduce){
.ob-strip:not(.an-strip) .ob-cell .obj-photo{ transition:none; }
}
/* ══════ КРУЖОК СРОКОВ И ЗАЛИВКА ВИТРИНЫ ═════════════════════════
1. Снимок в кружке сроков занимал едва две трети нарисованного
круга: у .pg-art есть внутреннее поле под чертёж, а у чертежа
вокруг рисунка своя пустота. У фотографии её нет — круг на
снимке идёт вплотную к краю кадра, поэтому поле здесь снимаем
и отдаём снимку всю коробку. Мятное свечение и пунктирная
окружность считаются от неё же, так что все три круга
совпадают. */
.ps-srok .pg-art{ padding:0; }
.page-sec.split.ps-srok > .pg-art{ width:min(42%, 400px); }
.page-sec.split.ps-srok > .pg-art img.art-foto{
width:100%; max-width:none; height:auto; max-height:none;
}
/* 2. Заливка мятой при наведении — та же, что у витрины на главной:
круг растёт из левого верхнего угла плашки.
Механика другая. На главной круг — псевдоэлемент на transform, и
плашке там нужна обрезка, чтобы он не вылез за скругление; из-за
обрезки предмет не может выйти за плашку, и поверх фигур летит
его отдельная копия (см. js\an-vitrina.js).
Здесь копии нет и обрезка нам мешает: предмет должен выходить за
край. Поэтому круг рисуем фоном самого псевдоэлемента и растим
через background-size. Псевдоэлемент лежит ровно по плашке и
наследует её скругление — фон не может из него выйти, обрезка
родителю не нужна, и предмет свободно вырастает поверх. */
@media (hover:hover) and (pointer:fine){
.ob-strip:not(.an-strip) .ob-cell .mbtn__body::after{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
border-radius:inherit;
background:linear-gradient(140deg, #a6f0d3 0%, #5fc79c 100%);
/* Круг режем маской, а не рисуем градиентом. Градиент растягивался
вместе с плашкой: она не квадратная, и «круг» выходил овалом, а
у полностью залитой плашки его кромки не видно вовсе — заливка
читалась квадратом. Маске задаём размер в пикселях, одинаковый
по обеим осям, поэтому она круглая всегда. */
-webkit-mask-image:radial-gradient(circle at 0 0,
#000 0 49.6%, transparent 50%);
mask-image:radial-gradient(circle at 0 0,
#000 0 49.6%, transparent 50%);
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-size:0 0; mask-size:0 0;
transition:-webkit-mask-size .55s cubic-bezier(.22,.61,.36,1),
mask-size .55s cubic-bezier(.22,.61,.36,1);
}
.ob-strip:not(.an-strip) .ob-cell .mbtn__body > *{ position:relative; z-index:1; }
/* .navel рядом с :hover вешает js\navedenie.js — там же объяснено,
почему одного :hover мало. */
.ob-strip:not(.an-strip) .ob-cell:hover .mbtn__body::after,
.ob-strip:not(.an-strip) .ob-cell.navel .mbtn__body::after{
-webkit-mask-size:1100px 1100px; mask-size:1100px 1100px; }
.ob-strip:not(.an-strip) .ob-cell:hover span,
.ob-strip:not(.an-strip) .ob-cell.navel span{ color:#08201a; }
.ob-strip:not(.an-strip) .ob-cell:hover .ob-price,
.ob-strip:not(.an-strip) .ob-cell.navel .ob-price{
border-color:rgba(8,40,28,.24); background:rgba(255,255,255,.58); color:#063d2d;
}
/* Тень под выросшим предметом: без неё он выглядит наклейкой,
а не вещью, поднятой над плашкой. */
.ob-strip:not(.an-strip) .ob-cell .obj-photo{
transition:transform .42s cubic-bezier(.22,1,.36,1),
filter .42s cubic-bezier(.22,1,.36,1);
}
.ob-strip:not(.an-strip) .ob-cell:hover .obj-photo,
.ob-strip:not(.an-strip) .ob-cell.navel .obj-photo{
filter:drop-shadow(0 16px 24px rgba(8,32,26,.34));
}
}
@media (prefers-reduced-motion: reduce){
.ob-strip:not(.an-strip) .ob-cell .mbtn__body::after{ transition:none; }
}
/* ══════ ФОНЫ БЛОКОВ И КРУГЛЫЕ СНИМКИ ════════════════════════════
1. Круглый снимок в предметном месте. У чертежа вокруг рисунка своя
пустота, у фотографии её нет: круг занимает 65,5 % ширины кадра,
остальное — выступающие за него голова и руки. Поэтому снимок
кладём во всю коробку, а нарисованные круги — мятное свечение и
пунктирную окружность — ужимаем до той же доли. Тогда все три
круга совпадают, чего и добивался Павел. */
.pg-art--k{ --k-dolya:65.5%; padding:0; }
.page-sec.split > .pg-art--k{ width:min(46%, 470px); }
.pg-art.pg-art--k img.art-foto,
.page-sec.split > .pg-art.pg-art--k img.art-foto{
width:100%; max-width:none; height:auto; max-height:none;
}
.pg-art--k::after{ width:var(--k-dolya); max-width:none; }
.pg-art--k::before{ inset:calc((100% - var(--k-dolya)) / 2); }
/* 2. Фоновые снимки блоков. Приём один и тот же: слой во всю ширину
окна, растворённый сверху и снизу, чтобы стык с обычным фоном
страницы не читался линией. Отличаются только картинка,
прозрачность и то, светлый блок или тёмный. */
.db--fon::before,
.ps--svet::before,
.ps--tmn::before,
.be--fon::before{
content:''; position:absolute; z-index:0; pointer-events:none;
top:0; bottom:0; left:50%; width:100vw; margin-left:-50vw;
background-position:50% 46%; background-size:cover;
background-repeat:no-repeat;
-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 12%,
#000 88%, transparent 100%);
mask-image:linear-gradient(180deg, transparent 0, #000 12%,
#000 88%, transparent 100%);
}
/* Тёмная полоса со сроками. ::after у неё занят вертикальными
полосами, снимок кладём в ::before и полосы поверх приглушаем. */
.db--fon::before{
background-image:url(../img/obshee/fon-blok-2.webp);
opacity:var(--dbf-op, .42);
}
.db--fon::after{ opacity:.5; }
.db--fon .db-in{ z-index:1; }
/* Тираж — светлый блок на нашем общем фоне. Сетке нужен свой слой:
без position:relative фон лёг бы поверх текста. */
.ps--svet{ position:relative; isolation:isolate; }
.ps--svet::before{
background-image:url(../img/obshee/fon-strip.webp);
opacity:var(--psv-op, .46); z-index:-1;
top:calc(-1 * clamp(24px, 3vw, 48px));
bottom:calc(-1 * clamp(24px, 3vw, 48px));
}
/* «Смотрите также» — тёмная секция во всю ширину со своим снимком.
Тёмный цвет держим под снимком: он проступает там, где кадр светлее,
и блок остаётся в общей гамме страницы. */
.ps--tmn{
position:relative; overflow:hidden;
width:100vw; max-width:none; margin-inline:calc(50% - 50vw);
margin-block:clamp(24px, 3.2vw, 48px);
padding:clamp(40px, 6vw, 76px) max(20px, calc(50vw - var(--read-w) / 2));
background:var(--bg); color:var(--ink); border-top:0;
}
.ps--tmn + .beyond{ margin-top:0; }
.ps--tmn::before{
background-image:url(../img/obshee/fon-blok-3.webp);
opacity:var(--pst-op, .5);
}
.ps--tmn > *{ position:relative; z-index:1; }
.ps--tmn h2{ color:var(--ink); }
.ps--tmn h2 em{ color:var(--mint); font-style:normal; }
/* «В каталоге далеко не всё» — тот же светлый фон, что у витрины.
Своя заливка у блока снимается: две подложки одна на другой дают
грязь вместо глубины. */
.be--fon{ position:relative; isolation:isolate; overflow:hidden;
background:var(--l-bg); }
.be--fon::before{
background-image:url(../img/obshee/fon-strip.webp);
opacity:var(--bef-op, .5); z-index:-1;
}
.be--fon .be-in{ position:relative; z-index:1; }
/* ══════ ТЁМНЫЕ ТАБЛИЧКИ С ПЕРЕЛИВАЮЩЕЙСЯ КРОМКОЙ ════════════════
Тот же приём, что у карточки в конце главной: тела нет, есть широкая
живая кайма, сквозь которую видно фон блока. На тёмном снимке это
читается как матовое стекло с переливом.
Кайму рисует metal-button.js — .next-card и .page-cta перечислены в
его scan(). Скрипт заворачивает содержимое в .mbtn__body, поэтому
собственные фон и рамка карточкам больше не нужны. */
.ps--dalee .next-grid{ gap:clamp(12px, 1.4vw, 20px); margin-top:clamp(14px, 2vw, 24px); }
.ps--dalee .next-card{
--mb-rim:7px; --ct-rim-op:.6; --mb-rate:.5; --mb-k:.6;
--mb-crush:2.2; --mb-bright:1.5;
--mb-tile:max(40px, calc(var(--mb-size, 300px) * var(--mb-k)));
--mb-amp-px:calc(var(--mb-tile) * var(--mb-amp));
position:relative; isolation:isolate;
display:flex; padding:var(--mb-rim);
border:0; border-radius:20px;
background:none; box-shadow:none;
}
.ps--dalee .next-card > .mbtn__rim{ opacity:var(--ct-rim-op); }
.ps--dalee .next-card > .mbtn__body{
width:100%; box-sizing:border-box;
padding:16px 18px 15px; border-radius:14px;
background:rgba(8,18,14,.55);
-webkit-backdrop-filter:blur(10px) saturate(1.05);
backdrop-filter:blur(10px) saturate(1.05);
box-shadow:none; text-align:left;
font-size:inherit; font-weight:400; letter-spacing:normal;
line-height:normal; white-space:normal;
}
.ps--dalee .next-card b{ color:#fff; }
.ps--dalee .next-card span{ color:rgba(238,244,241,.66); }
.ps--dalee .next-card i{ color:var(--mint); }
@media (hover:hover){
.ps--dalee .next-card:hover{ transform:translateY(-3px); }
.ps--dalee .next-card:hover > .mbtn__body{ background:rgba(12,26,20,.66); }
}
/* Финальный призыв — та же табличка, только одна и во всю ширину. */
.pc--fon{
position:relative; overflow:hidden;
--mb-rim:9px; --ct-rim-op:.55; --mb-rate:.45; --mb-k:.5;
--mb-crush:2.2; --mb-bright:1.5;
--mb-tile:max(40px, calc(var(--mb-size, 560px) * var(--mb-k)));
--mb-amp-px:calc(var(--mb-tile) * var(--mb-amp));
isolation:isolate;
padding:var(--mb-rim); border-radius:26px;
background:#0b1310; box-shadow:none;
}
.pc--fon > .mbtn__rim{ opacity:var(--ct-rim-op); }
.pc--fon > .mbtn__body{
position:relative; overflow:hidden;
width:100%; box-sizing:border-box;
display:flex; flex-wrap:wrap; align-items:center;
justify-content:space-between; gap:clamp(16px, 3vw, 34px);
padding:clamp(26px, 4vw, 46px) clamp(22px, 4vw, 44px);
border-radius:18px; background:none; box-shadow:none;
text-align:left; font-size:inherit; font-weight:400;
letter-spacing:normal; line-height:normal; white-space:normal;
}
.pc--fon > .mbtn__body::before{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:url(../img/obshee/fon-blok-4.webp) 50% 52% / cover no-repeat;
opacity:var(--pcf-op, .55);
}
.pc--fon > .mbtn__body::after{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:linear-gradient(100deg, rgba(6,14,11,.72), rgba(6,14,11,.34));
}
.pc--fon > .mbtn__body > *{ position:relative; z-index:1; }
/* ══════ ВОЗДУХ МЕЖДУ БЛОКАМИ ════════════════════════════════════
Ориентир — расстояние от шапки до первого блока: примерно шестьдесят
пикселей. Дальше по странице поля складывались (низ секции плюс верх
тёмной полосы) и в паре мест разрастались до двухсот — страница
выглядела разорванной. Ниже эти стыки приведены к одной мере. */
.page-sec--fon{ padding-bottom:clamp(22px, 2.8vw, 38px); }
.page-sec--fon .pg-tri{ margin-bottom:clamp(16px, 2vw, 26px); }
.page-sec--fon + .page-sec.dark,
.inner-main > .page-sec--fon + .page-sec.dark{
margin-top:clamp(18px, 2.4vw, 32px);
}
.page-sec.dark.ps-srok{ margin-block:clamp(18px, 2.4vw, 32px); }
.page-sec.dark + .page-sec--fon{ padding-top:clamp(22px, 3vw, 40px); }
.page-sec--fon + .dark-band,
.inner-main > .page-sec--fon + .dark-band{ margin-top:clamp(18px, 2.4vw, 32px); }
.dark-band.db--fon{ margin-block:clamp(18px, 2.4vw, 32px); }
/* ══════ ДОВОДКА: ЛЕНТЫ, ПРИЗЫВ, КРОМКИ ══════════════════════════
1. Ленты на страницах направлений. Скорость и растворение по краям
заданы переменными в блоке главной, а сюда они не доходят —
без --an-mq-speed анимация просто не запускается, и лента стоит
неподвижно с обрубленными краями. Задаём их здесь.
Ленты шире колонки текста: слова должны уезжать за край экрана,
а не упираться в границу абзаца. */
.be--fon{ --an-mq-speed:26s; --an-mq-fade:120px; }
.be--fon .an-run{
width:100vw; max-width:none;
margin-inline:calc(50% - 50vw);
padding-inline:clamp(16px, 4vw, 84px);
box-sizing:border-box;
}
.be--fon .an-run-lead{ max-width:62ch; }
@media (max-width:900px){
.be--fon{ --an-mq-fade:56px; }
}
/* 2. Финальный призыв. Кайма у него шире, чем у соседних табличек, —
блок один и крупный, — но плитка металла должна остаться мелкой:
на крупной плитке блики растягиваются в диагональные полосы во
всю карточку, и она читается как сигнальная лента, а не как
кромка. Отсюда маленький --mb-k. */
.pc--fon{ --mb-k:.22; --mb-crush:2; --mb-bright:1.35; }
.ps--dalee .next-card{ --mb-k:.3; --mb-crush:2; --mb-bright:1.4; }
/* Цвет текста задаём прямо в теле: у .page-cta он стоял на самом
блоке, а тело — новый слой между ним и содержимым. */
/* Тело призыва делаем плотным. Прозрачное тело у карточки контактов
уместно: под ней рейки, и перелив кромки читается сквозь стекло.
Здесь под телом лежит сам металл каймы во всю площадь блока, и
сквозь полупрозрачное тело он проступал диагональными полосами
через весь призыв — карточка выглядела сигнальной лентой. Плотное
тело оставляет металл только по периметру, где ему и место. */
.pc--fon > .mbtn__body{ color:#fff; background:#0b1310; }
.ps--dalee .next-card > .mbtn__body{ background:rgba(8,18,14,.74); }
.pc--fon h2{ color:#fff; }
.pc--fon p{ color:rgba(255,255,255,.72); }
/* ══════ ПРАВКИ ПАВЛА: ТАБЛИЧКИ, КРУЖКИ, ВОЗДУХ ══════════════════
1. ФИНАЛЬНЫЙ ЭКРАН ГЛАВНОЙ — В НАШ ЗЕЛЁНЫЙ.
Снимок реек тёплый, почти янтарный, и весь экран уходил в жёлтое.
Красим сам кадр: слой цвета поверх фотографии в режиме color
меняет тон, оставляя яркость и фактуру дерева нетронутыми. */
/* Зелёным красим одно слово в заголовке, а не весь экран: снимок
реек тёплый, и в зелени он терял всю глубину. */
.contact-card h2 em{ font-style:normal; color:var(--mint); }
/* 2. ТАБЛИЧКИ — РОВНО ТАКИЕ ЖЕ, КАК КАРТОЧКА КОНТАКТОВ НА ГЛАВНОЙ.
Там кайма широкая и приглушённая, тела нет вовсе, а блик снят:
содержимое лежит прямо на фоне блока, и рамка читается как
матовое стекло с переливом. Раньше здесь стояло полупрозрачное
тело — сквозь него проступал металл каймы во всю площадь, и
таблички выглядели полосатыми. Повторяем оригинал один в один. */
.ps--dalee .next-card,
.pc--fon{
--mb-rim:13px; --ct-rim-op:.55; --mb-rate:.4; --mb-k:.42;
--mb-crush:2.2; --mb-bright:1.5;
--mb-tile:max(40px, calc(var(--mb-size, 520px) * var(--mb-k)));
--mb-amp-px:calc(var(--mb-tile) * var(--mb-amp));
}
.ps--dalee .next-card{ --mb-rim:9px; border-radius:22px; }
.ps--dalee .next-card > .mbtn__rim,
.pc--fon > .mbtn__rim{ opacity:var(--ct-rim-op); }
.ps--dalee .next-card > .mbtn__rim::after,
.pc--fon > .mbtn__rim::after{ opacity:.55; }
.ps--dalee .next-card .gloss,
.pc--fon .gloss{ display:none; }
.ps--dalee .next-card > .mbtn__body,
.pc--fon > .mbtn__body{ background:none; box-shadow:none; }
.ps--dalee .next-card > .mbtn__body{ border-radius:13px; }
@media (hover:hover){
.ps--dalee .next-card:hover > .mbtn__body{ background:none; }
}
/* Фон и пелена были у тела призыва — теперь они не нужны: под ним
фон всего блока (см. ниже). */
.pc--fon > .mbtn__body::before,
.pc--fon > .mbtn__body::after{ content:none; }
/* 3. ПРИЗЫВ ЦЕЛИКОМ НА ТЁМНОМ ФОНЕ.
Снимок должен лежать под всем блоком, во всю ширину окна, а не
внутри одной карточки. Карточка на нём — только кромка. */
.pc--fon{
width:100vw; max-width:none;
margin-inline:calc(50% - 50vw);
margin-block:0 0;
padding:clamp(46px, 7vw, 96px) max(20px, calc(50vw - var(--read-w) / 2));
border-radius:0; background:#0b1310;
}
.pc--fon::before{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:url(../img/obshee/fon-blok-4.webp) 50% 52% / cover no-repeat;
opacity:var(--pcf-op, .5);
}
.pc--fon::after{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:linear-gradient(100deg, rgba(6,14,11,.62), rgba(6,14,11,.3));
}
.pc--fon > .mbtn__rim,
.pc--fon > .mbtn__body{ position:relative; z-index:1; }
.pc--fon > .mbtn__body{
padding:clamp(26px, 3.4vw, 42px) clamp(22px, 3vw, 40px);
border-radius:calc(26px - var(--mb-rim));
}
.pc--fon > .mbtn__rim{ inset:auto; position:absolute; }
/* 4. КРУЖКИ. Все одного размера — того, что у «доставки на площадку»,
он оказался верным. Пунктирную окружность снимаем: её рисовали
под чертёж, а у снимка свой край, и вторая линия рядом выглядит
разметкой, которую забыли убрать. */
.pg-art--k{ --k-dolya:65.5%; padding:0; }
.pg-art--k::after{ content:none; }
.page-sec.split > .pg-art--k,
.pg-split > .pg-art--k{ width:min(40%, 400px); }
/* Кружок стоит напротив заголовка, а не по центру колонки текста:
иначе он висит на уровне середины абзаца и связь с надписью
теряется. */
.pg-para .pg-split{ align-items:start; }
.pg-para .pg-split > .pg-art--k{ margin-top:0; }
/* 5. ПЛАШКА ПОД НАДПИСЬЮ. Тот же приём, что у заголовка «соберите
тираж» на главной: полупрозрачная подложка с размытием. На фоне
со снимком заголовок иначе спорит с фактурой. */
.ps--svet .pg-txt > h2,
.db--fon .db-in > h2{
display:inline-block; position:relative;
padding:clamp(9px, 1.1vw, 15px) clamp(15px, 1.7vw, 25px);
border-radius:16px;
-webkit-backdrop-filter:blur(10px) saturate(1.05);
backdrop-filter:blur(10px) saturate(1.05);
}
.ps--svet .pg-txt > h2{ background:rgba(255,255,255,.5); }
.db--fon .db-in > h2{
background:rgba(8,18,14,.5);
box-shadow:inset 0 0 0 1px rgba(143,232,196,.14);
}
/* Растущая линия под заголовком считалась от его края — внутри
плашки она упиралась в её поле. Сдвигаем к тексту. */
.ps--svet .pg-txt > h2::after,
.db--fon .db-in > h2::after{ left:clamp(15px, 1.7vw, 25px); bottom:6px; }
/* 6. ПОЛОСКИ. Вертикальная штриховка была у всех тёмных секций. На
снимке она читается как брак печати — снимаем везде, где под
секцией лежит фотография. */
.ps-srok::after,
.db--fon::after,
.ps--tmn::after{ content:none; }
/* 7. ВОЗДУХ. Между тёмным блоком «смотрите также» и «в каталоге» шла
светлая полоса: складывались нижнее поле первого, верхнее поле
второго и растворение маски у его фона. Полей больше нет, маска
второго блока начинается сразу от края. */
.ps--tmn{ margin-bottom:0; }
.beyond.be--fon{ margin-top:0; border-top:0; }
.be--fon::before{
-webkit-mask-image:none; mask-image:none;
}
.pg-para + .ps--tmn{ margin-top:clamp(18px, 2.4vw, 32px); }
/* 8. Лид бегущих строк выравниваем по колонке текста — он часть
абзаца, а не ленты. Во всю ширину окна уезжают только сами
ленты. */
.be--fon .an-run{
width:auto; max-width:none; margin-inline:0; padding-inline:0;
}
.be--fon .an-mq{
width:100vw; max-width:none;
margin-inline:calc(50% - 50vw);
}
/* ══════ ДОВОДКА ВТОРАЯ: ПРИЗЫВ, КРУЖКИ, ПЛАШКИ ══════════════════
1. Призыв: снимок лежит под всей секцией, а табличка стоит на нём.
Раньше карточку саму растянули во всю ширину — кайма при этом
расползлась по краям экрана и перестала читаться как табличка. */
.pc-sec{
position:relative; overflow:hidden;
width:100vw; max-width:none; margin-inline:calc(50% - 50vw);
margin-block:clamp(20px, 2.6vw, 36px) 0;
padding:clamp(46px, 7vw, 96px) max(20px, calc(50vw - var(--read-w) / 2));
background:#0b1310;
}
.pc-sec::before{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:url(../img/obshee/fon-blok-4.webp) 50% 52% / cover no-repeat;
opacity:var(--pcf-op, .5);
}
.pc-sec::after{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:linear-gradient(100deg, rgba(6,14,11,.6), rgba(6,14,11,.26));
}
.pc-sec > *{ position:relative; z-index:1; }
/* Табличка возвращается к своим размерам: ширина колонки, своя кайма,
прозрачное тело — один в один карточка контактов на главной. */
.pc--fon{
width:auto; max-width:none; margin:0 auto;
padding:var(--mb-rim); border-radius:26px; background:none;
}
.pc--fon::before, .pc--fon::after{ content:none; }
.pc--fon > .mbtn__body{
padding:clamp(26px, 3.4vw, 44px) clamp(24px, 3vw, 42px);
border-radius:calc(26px - var(--mb-rim));
}
/* 2. Плитка металла у табличек. У карточки контактов она шире
половины карточки, поэтому по периметру идёт один плавный
перелив. У маленьких табличек та же доля даёт частую полосу —
берём плитку крупнее самой таблички, и перелив снова один. */
.ps--dalee .next-card{ --mb-k:1.6; --ct-rim-op:.4; }
.pc--fon{ --mb-k:.85; --ct-rim-op:.5; }
/* 3. Кружки в парном блоке занимают свою колонку целиком: доля от
колонки давала полтораста пикселей вместо четырёхсот. */
.pg-split > .pg-art--k{ width:auto; }
.page-sec.split > .pg-art--k{ width:min(40%, 400px); }
/* 4. Плашка под надписью — своей строкой и по ширине текста.
inline-block ставил её в строку с надстрочной пометкой, и
заголовок уезжал вправо. */
.ps--svet .pg-txt > h2,
.db--fon .db-in > h2{ display:block; width:fit-content; }
/* 5. Светлый снимок под парным блоком приглушаем: справа он был
плотнее текста, и абзац на нём терялся. */
.ps--svet::before{ opacity:var(--psv-op, .3); }
/* ══════ КРОМКА БЕЗ СЕРЕДИНЫ ═════════════════════════════════════
Металлический слой лежит на всей площади плашки. У карточки
контактов это незаметно: она большая, плитка крупная, и на её
площади помещается один пологий перелив. У маленькой таблички та
же плитка накрывает её целиком — и вместо кромки получается
жёлтое пятно во весь прямоугольник.
Поэтому здесь слой обрезаем по рамке: маска оставляет только
полосу шириной с кайму, середина становится прозрачной, и сквозь
неё видно фон блока. Ровно тот вид, что у карточки на главной. */
.ps--dalee .next-card > .mbtn__rim,
.pc--fon > .mbtn__rim{
padding:var(--mb-rim); box-sizing:border-box;
-webkit-mask-image:linear-gradient(#000, #000), linear-gradient(#000, #000);
-webkit-mask-clip:content-box, border-box;
-webkit-mask-composite:xor;
mask-image:linear-gradient(#000, #000), linear-gradient(#000, #000);
mask-clip:content-box, border-box;
mask-composite:exclude;
}
/* Плитку задаём в пикселях, а не долей от плашки. Доля привязана к
её размеру: на карточке контактов 0,42 даёт триста пикселей и один
пологий перелив, а на маленькой табличке те же 0,42 — полторы
сотни, и по периметру идёт зебра из светлых и тёмных полос.
Триста пикселей — та же мера, что на главной, независимо от того,
какого размера сама табличка. Контраст материала тоже мягче:
у тонкой кромки он бьёт заметно сильнее, чем у широкой. */
.ps--dalee .next-card{
--mb-tile:300px; --ct-rim-op:.6; --mb-crush:1.5; --mb-bright:1.3;
--mb-amp-px:calc(300px * var(--mb-amp));
}
.pc--fon{
--mb-tile:300px; --ct-rim-op:.75; --mb-crush:1.5; --mb-bright:1.35;
--mb-amp-px:calc(300px * var(--mb-amp));
}
/* Тонкая мятная линия по внутреннему краю кромки. Материал живой:
под таблицу может попасть тёмный участок полосы, и тогда рамки
на тёмном фоне не видно вовсе. Линия держит контур всегда. */
.ps--dalee .next-card,
.pc--fon{ box-shadow:inset 0 0 0 1px rgba(143,232,196,.16); }
/* Ширину таблички призыва держим как у карточки на главной: на всю
колонку кайма растягивается и перестаёт читаться рамкой. */
.pc--fon{ width:min(900px, 100%); }
/* Светлая полоса перед призывом — сложенные поля соседей. */
.pc-sec{ margin-block:0; }
/* Блик кнопки внутри таблички. Общее правило .mbtn рисует его белым
пятном у левого края: на кнопке это подсветка, на карточке —
клякса посреди текста. Снимаем вместе со всеми служебными слоями
кнопки, которые табличке не нужны. */
.pc--fon .gloss,
.pc--fon > .mbtn__body::before,
.pc--fon > .mbtn__body::after,
.ps--dalee .next-card .gloss{ display:none !important; content:none !important; }
/* ══════ ПРАВКИ ПАВЛА: ПЛАШКИ, КРУЖКИ, ЛЕНТЫ ═════════════════════
1. СРОКИ: в плашке весь текст, а не один заголовок. Плашка тёмная
и без мятной обводки — на снимке она держит колонку целиком, и
блок читается как лист, положенный на фотографию. */
.db--fon .db-in{
padding:clamp(24px, 3vw, 42px) clamp(22px, 2.8vw, 40px);
border-radius:22px;
background:rgba(8,18,14,.5);
-webkit-backdrop-filter:blur(12px) saturate(1.05);
backdrop-filter:blur(12px) saturate(1.05);
}
.db--fon .db-in > h2{
display:block; width:auto; padding:0; border-radius:0;
background:none; box-shadow:none;
-webkit-backdrop-filter:none; backdrop-filter:none;
}
.db--fon .db-in > h2::after{ left:0; bottom:auto; }
/* 2. У «тиража» и «доставки» подложки под надписью нет: там текст и
так лежит на светлом, плашка только дробила блок. */
.ps--svet .pg-txt > h2{
display:block; width:auto; padding:0; border-radius:0;
background:none; -webkit-backdrop-filter:none; backdrop-filter:none;
}
.ps--svet .pg-txt > h2::after{ left:0; bottom:auto; }
/* 3. ВСЕ КРУГЛЫЕ СНИМКИ ОДНОГО РАЗМЕРА. Раньше один считался от
колонки сетки, другой — от ширины секции, и они отличались в
полтора раза. Теперь мера одна на всех. */
.pg-art--k{ --k-razmer:clamp(240px, 25vw, 360px); }
.page-sec.split > .pg-art--k,
.pg-split > .pg-art--k{ width:var(--k-razmer); }
.pg-split > .pg-art--k{ justify-self:center; }
/* В блоке сроков снимок стоит вплотную к заголовку: он обтекается
текстом, и без выравнивания по верху уезжал к середине абзаца. */
.page-sec.split.ps-srok > .pg-art--k{
float:right; margin:0 0 18px clamp(20px, 4vw, 52px);
}
.ps-srok > h2{ margin-top:0; }
/* 4. «СМОТРИТЕ ТАКЖЕ»: обычные плашки без металла.
Перелив тут ни к чему — это три ссылки, а не финальный призыв.
Тёмное полупрозрачное стекло, тонкая рамка, а при наведении из
левого верхнего угла растекается тёмно-зелёный круг — тот же
жест, что у витрины, только цвет глубокий, а не мятный. */
.ps--dalee .next-card{
padding:0; box-shadow:none; background:none;
border-radius:18px; overflow:hidden;
position:relative; isolation:isolate;
}
.ps--dalee .next-card > .mbtn__rim{ display:none; }
.ps--dalee .next-card > .mbtn__body{
position:relative; overflow:hidden;
width:100%; box-sizing:border-box;
padding:18px 20px 16px; border-radius:18px;
background:rgba(10,22,17,.55);
box-shadow:inset 0 0 0 1px rgba(143,232,196,.18);
-webkit-backdrop-filter:blur(10px) saturate(1.05);
backdrop-filter:blur(10px) saturate(1.05);
}
.ps--dalee .next-card > .mbtn__body::after{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
border-radius:inherit;
background:linear-gradient(140deg, #0f3b2c 0%, #072019 100%);
-webkit-mask-image:radial-gradient(circle at 0 0, #000 0 49.6%, transparent 50%);
mask-image:radial-gradient(circle at 0 0, #000 0 49.6%, transparent 50%);
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-size:0 0; mask-size:0 0;
transition:-webkit-mask-size .55s cubic-bezier(.22,.61,.36,1),
mask-size .55s cubic-bezier(.22,.61,.36,1);
}
.ps--dalee .next-card > .mbtn__body > *{ position:relative; z-index:1; }
@media (hover:hover){
.ps--dalee .next-card:hover > .mbtn__body::after{
-webkit-mask-size:1100px 1100px; mask-size:1100px 1100px;
}
.ps--dalee .next-card:hover > .mbtn__body{
background:rgba(10,22,17,.55);
box-shadow:inset 0 0 0 1px rgba(143,232,196,.34);
}
}
/* 5. ПРИЗЫВ: завершающая композиция, всё по центру.
Текст, подпись и кнопка выстроены столбиком — так же, как в
карточке контактов на главной, и по той же причине: последнее,
что видит человек, не должно расползаться по краям. */
.pc--fon{ box-shadow:none; }
.pc--fon > .mbtn__body{
display:block; text-align:center;
padding:clamp(34px, 4.4vw, 60px) clamp(26px, 4vw, 56px);
background:rgba(10,22,17,.5);
-webkit-backdrop-filter:blur(12px) saturate(1.05);
backdrop-filter:blur(12px) saturate(1.05);
}
.pc--fon h2{ margin:0 auto; max-width:22ch; }
.pc--fon p{ margin:14px auto 0; max-width:44ch; }
.pc--fon .mbtn{ margin-top:clamp(22px, 2.6vw, 32px); }
.pc--fon > .mbtn__body > div{ display:block; }
/* 6. КНОПКА «СПРОСИТЬ ПРО СВОЮ ВЕЩЬ»: мельче, в один пиксель
обводки, и чуть ниже — она отрывалась от абзаца. */
.be--fon .mbtn--night{ --mb-rim:1px; margin-top:clamp(14px, 1.8vw, 22px); }
.be--fon .mbtn--night .mbtn__body{
padding:11px 24px; font-size:13.5px;
}
/* 7. ЛЕНТЫ. Растворение начинается там же, где начинается текст
колонки: слово не должно возникать посреди пустого поля. Слева
и справа одинаково — маска считается от края окна до края
колонки. */
.be--fon{ --an-mq-fade:0px; }
.be--fon .an-mq{
--an-kraya:max(20px, calc((100vw - var(--read-w)) / 2));
-webkit-mask-image:linear-gradient(90deg, transparent 0,
#000 var(--an-kraya), #000 calc(100% - var(--an-kraya)), transparent 100%);
mask-image:linear-gradient(90deg, transparent 0,
#000 var(--an-kraya), #000 calc(100% - var(--an-kraya)), transparent 100%);
}
.page-sec.split.ps-srok > .pg-art--k{ width:var(--k-razmer); }
/* ══════ ШАПКА СТОИТ, СТРАНИЦА НАЕЗЖАЕТ ══════════════════════════
Первый экран приклеен к верхней кромке и остаётся на месте, а всё,
что ниже, едет поверх него. Приём тот же, что на главной, только
собран проще: раньше для него всю страницу заворачивали в отдельный
слой с отрицательным полем и распоркой — обёртка ломала ширину
полноэкранных блоков и накрывала шапку своим фоном.
Здесь приклеивается сама шапка, а не то, что после неё. Ей хватает
sticky и нулевого слоя; остальные блоки поднимаются на слой выше и
получают непрозрачный фон — сквозь прозрачный была бы видна
стоящая под ними сцена. */
/* ВАЖНО: только на странице, где под наезд собрана разметка — там
есть слой .posle-hero со сплошным фоном. На остальных внутренних
страницах такого слоя нет, и приклеенная шапка оставалась бы
стоять под прозрачным текстом: страницы разъезжались. */
body.inner:has(.posle-hero) .pgh{
position:sticky; top:0; z-index:0;
margin-bottom:0;
}
/* Всё, что ниже шапки, лежит в одном слое со сплошным фоном: он и
закрывает стоящую под ним сцену. Слоем накрываем разом, а не
каждый блок по отдельности — иначе сцена просвечивала бы в зазорах
между блоками. */
.posle-hero{
position:relative; z-index:1;
background:var(--l-bg);
width:100vw; max-width:none; margin-inline:calc(50% - 50vw);
padding-inline:max(20px, calc(50vw - var(--read-w) / 2));
}
/* Внутри слоя колонка снова своя, а полноширинные блоки считают
вылет от неё. */
.posle-hero > *{ width:min(var(--read-w), 100%); margin-inline:auto; }
.posle-hero > .page-sec.dark,
.posle-hero > .dark-band,
.posle-hero > .pg-para,
.posle-hero > .ps--tmn,
.posle-hero > .be--fon,
.posle-hero > .pc-sec,
.posle-hero > .page-sec--fon{
width:100vw; max-width:none;
margin-inline:calc(50% - 50vw);
}
.posle-hero > .page-sec--fon,
.posle-hero > .pg-para{
padding-inline:max(20px, calc(50vw - var(--read-w) / 2));
}
/* ══════ ОБТЕКАНИЕ КРУЖКА И ДОВОДКА ПРИЗЫВА ══════════════════════
1. Шапка ровно во весь экран. Сцена считалась в svh — это высота
окна без динамических панелей браузера, и на десктопе она на
десяток точек короче настоящей. Снизу из-под шапки вылезала
светлая кромка следующего слоя. */
/* height, а не min-height: коробку шапки в потоке держала строка
сетки ростом в 100svh, и min-height растягивал только видимый бокс.
Следующий слой при этом вставал на шестнадцать точек выше конца
шапки и накрывал её низ своим светлым фоном — та самая полоса. */
body.inner:has(.posle-hero) .pgh{ height:100vh; min-height:100vh; }
body.inner:has(.posle-hero) .pgh .pgh-scene{ height:100vh; min-height:100vh; }
/* Вот она, та самая белая полоса. Слои сцены — фон, сетка, фигуры —
считают свою высоту от --sc-h, а она стояла в svh. Это высота окна
без динамических панелей браузера: на десктопе она на полтора
процента короче настоящей, и снизу из-под сцены выглядывал светлый
слой страницы. Сама коробка шапки высоту уже получила в vh — теперь
ту же меру получают и слои внутри неё. */
body.inner:has(.posle-hero) .pgh{ --sc-h:max(100vh, 480px); }
.posle-hero{ margin-top:0; }
/* 2. Текст обтекает кружок, а не стоит с ним в двух колонках. Сетка
ставила снимок сбоку от всего блока разом, и рядом с коротким
абзацем оставался пустой коридор. При обтекании текст идёт от
самой верхней точки круга и огибает его по дуге — за форму
отвечает shape-outside, за отступ от неё shape-margin.
В разметке снимок теперь стоит перед текстом: плавающий элемент
обтекается только тем, что идёт после него. */
.pg-para .pg-split{
display:block; max-width:var(--read-w); margin-inline:auto;
}
.pg-para .pg-split > .pg-art--k{
float:right; width:var(--k-razmer);
margin:0 0 clamp(14px, 1.6vw, 22px) clamp(22px, 3vw, 46px);
shape-outside:circle(50%);
shape-margin:clamp(10px, 1.4vw, 20px);
}
.pg-para .pg-split.flip > .pg-art--k{
float:left;
margin:0 clamp(22px, 3vw, 46px) clamp(14px, 1.6vw, 22px) 0;
}
.pg-para .pg-split > .pg-txt{ display:block; }
.pg-para .pg-split > .pg-txt > h2{ margin-top:0; }
/* Следующий блок не должен подниматься под предыдущий кружок. */
.pg-para .pg-split::after{ content:''; display:block; clear:both; }
/* Кружок в блоке сроков обтекается так же — форма круга у него уже
была задана эллипсом, приводим к дуге. */
.page-sec.split > .pg-art--k{
shape-outside:circle(50%);
shape-margin:clamp(10px, 1.4vw, 20px);
}
/* 3. ПРИЗЫВ: та же лёгкая обводка, что у табличек «смотрите также»,
плашка прозрачнее и по ширине текста, а не во всю колонку. */
.pc--fon{
--mb-rim:0px;
width:min(760px, 100%);
border-radius:22px; background:none; box-shadow:none;
}
.pc--fon > .mbtn__rim{ display:none; }
.pc--fon > .mbtn__body{
border-radius:22px;
background:rgba(10,22,17,.36);
box-shadow:inset 0 0 0 1px rgba(143,232,196,.18);
padding:clamp(30px, 3.8vw, 52px) clamp(24px, 3.4vw, 46px);
}
/* ══════ ОБТЕКАНИЕ: СТРОКА ВО ВСЮ ШИРИНУ ═════════════════════════
Строки рядом с кружком выходили в три слова. Дело не в обтекании:
у абзаца стоит мера в 62 знака — она держит длину строки в обычной
колонке и там правильна. Но рядом с плавающим кружком она вычитает
его ширину из тех же 62 знаков, и на текст остаётся четверть меры.
В блоках с кружком меру снимаем: длину строки здесь задаёт сам
кружок, а не счёт знаков. */
.pg-para .pg-split > .pg-txt,
.pg-para .pg-split > .pg-txt > *,
.page-sec.split.ps-srok > p,
.page-sec.split.ps-srok > ul,
.page-sec.split.ps-srok > ol{ max-width:none; }
/* Кружок сроков теперь стоит первым в блоке — текст огибает его
начиная с заголовка, а не с середины первого абзаца. Отступ слева
меньше: круг подвинут внутрь колонки, как просил Павел. */
.page-sec.split.ps-srok > .pg-art--k{
margin:0 0 clamp(12px, 1.4vw, 20px) clamp(14px, 2vw, 30px);
}
.page-sec.split.ps-srok > h2{ margin-top:0; }
/* ══════ ПРИПИСКА В СРОКАХ: БЕЗ ПОДЛОЖКИ ═════════════════════════
«Если до выставки меньше недели» стоит внутри тёмной плашки блока,
и своя мятная подложка накладывалась на неё второй раз — пятно на
пятне. Полоску слева оставляем: она и отделяет приписку от списка. */
.db--fon .note{
background:none;
-webkit-backdrop-filter:none; backdrop-filter:none;
}
/* ══════ ЛЕНТЫ — КАК НА ГЛАВНОЙ ══════════════════════════════════
На главной лента идёт ровно по колонке текста: начинается там же,
где первая буква абзаца, и растворяется к своим краям на 146
точках. Здесь я её растянул во всю ширину окна — слова выезжали
из-за края экрана, и начало ленты не совпадало с началом текста.
Возвращаем колонку и ту же меру растворения. */
.be--fon{ --an-mq-fade:146px; }
.be--fon .an-mq{
width:auto; max-width:none; margin-inline:0;
}
.be--fon .an-mq{
-webkit-mask-image:linear-gradient(90deg, transparent 0,
#000 var(--an-mq-fade), #000 calc(100% - var(--an-mq-fade)),
transparent 100%);
mask-image:linear-gradient(90deg, transparent 0,
#000 var(--an-mq-fade), #000 calc(100% - var(--an-mq-fade)),
transparent 100%);
}
@media (max-width:900px){
.be--fon{ --an-mq-fade:80px; }
}
/* ══════ ИВЕНТЫ ══════════════════════════════════════════════════
Страница собрана теми же деталями, что «Корпоративы»: наезд, фоны,
стеклянные панели, бегущая строка. Здесь только то, чего там не
было.
1. Витрина по три в ряд — предметов шесть, и три на два ложатся
ровнее, чем авто-раскладка. */
@media (min-width:720px){
.ob-strip.ob-strip--3,
.page-sec .ob-strip--3{ grid-template-columns:repeat(3, 1fr); }
}
@media (min-width:720px){
.ob-strip--3{ gap:clamp(14px, 1.7vw, 24px); }
.ob-strip--3 .ob-cell{ --mb-rim:2px; border-radius:24px; }
.ob-strip--3 .ob-cell .mbtn__body{
gap:clamp(12px, 1.2vw, 18px);
padding:clamp(22px, 2.5vw, 36px) clamp(12px, 1.4vw, 20px)
clamp(18px, 2vw, 28px);
border-radius:22px;
}
.ob-strip--3 .ob-cell .obj-photo{
width:auto; height:clamp(88px, 8.4vw, 138px);
}
.ob-strip--3 .ob-cell span{ font-size:clamp(13px, 1.05vw, 15.5px); }
}
/* 2. Кружок зеркалим: фигура смотрела от текста, а должна к нему. */
.pg-art--zerk img.art-foto{ transform:scaleX(-1); }
/* 3. «Что делаем» — тёмный блок со снимком в подложке. Тот же приём,
что у «смотрите также», только картинка другая. */
.ps--tem::before{
background-image:url(../img/obshee/fon-blok-1.webp);
opacity:var(--pst-op, .46);
}
.ps--tem .ob-cell .mbtn__body{ background:#fbfdfc; }
/* Текст в этом блоке был рассчитан на светлую страницу. Фон стал
тёмным — цвета берём из тёмного набора, иначе абзац и врезка
читаются как пятно. */
.ps--tem h2{ color:var(--ink); }
.ps--tem h2 em{ color:var(--mint); font-style:normal; }
.ps--tem p, .ps--tem li{ color:rgba(243,246,244,.78); }
.ps--tem strong{ color:var(--ink); }
.ps--tem .pg-claim p{ color:var(--ink); }
.ps--tem .pg-claim p em{ color:var(--mint); }
.ps--tem .pg-claim .cl-mark{ color:var(--mint); }
/* 4. «Что нужно от вас» — светлый блок, а список и приписка на нём
были рассчитаны на тёмный. Возвращаем тёмный текст и убираем
подложку у приписки: полоска слева остаётся. */
.ps--nuzhno h2, .ps--nuzhno li, .ps--nuzhno li strong{ color:var(--l-ink); }
.ps--nuzhno li{ color:var(--l-dim); }
.ps--nuzhno .eyebrow-l{ color:var(--mint-ink); }
.ps--nuzhno .note{ background:none; }
.ps--nuzhno .note p{ color:var(--l-dim); }
/* Подложка под заголовком — та же, что в «сроках» на корпоративах. */
.ps--nuzhno > h2{
display:block; width:fit-content;
padding:clamp(9px, 1.1vw, 15px) clamp(15px, 1.7vw, 25px);
border-radius:16px; background:rgba(255,255,255,.5);
-webkit-backdrop-filter:blur(10px) saturate(1.05);
backdrop-filter:blur(10px) saturate(1.05);
}
.ps--nuzhno > h2::after{ left:clamp(15px, 1.7vw, 25px); bottom:6px; }
/* ═══ «Ивенты» — стык двух блоков и их высота ══════════════════════
1. Под «Почему это отдельное направление» шла белая полоса. Это
верхнее поле тёмного блока: сквозь него светила обёртка
страницы. Поле снимаем — блоки встают вплотную.
2. Светлый блок был заметно выше своего текста: внутри кружок
в 360 пикселей, и его удерживало overflow:hidden. Отпускаем
кружок — блок садится по тексту, а манекен свисает рукой уже
на тёмный блок. Нижнее поле и решает, насколько глубоко он
заходит; z-index держит кружок поверх соседа. */
body.inner .posle-hero > .page-sec--fon.split{
overflow:visible;
padding-bottom:clamp(56px, 6vw, 92px);
z-index:2;
}
/* Подложка светлого блока обрывается ровно по его низу, иначе она
легла бы поверх тёмного блока вместе с кружком. */
body.inner .posle-hero > .page-sec--fon.split::before{ bottom:0; }
body.inner .posle-hero > .page-sec--fon.split + .ps--tmn{ margin-top:0; }
/* 3. Тёмный блок «Что делаем» тоже поджимаем по высоте: полей
сверху и снизу было по 76 пикселей. */
.ps--tem{ padding-block:clamp(34px, 3.6vw, 52px); }
.ps--tem > .pg-claim{ margin-top:0; }
/* 4. «Что делаем» — не заголовок блока, а подпись над витриной:
делаем мельче и снимаем зелёную черту под ней. */
.ps--tem > h2{
font-size:clamp(17px, 1.35vw, 21px);
margin-bottom:clamp(14px, 1.6vw, 22px);
}
.ps--tem > h2::after{ display:none; }
/* 5. Плашки витрины на тёмном — ровно как карточки «кому и что
обычно нужно» на главной: непрозрачное тёмно-зелёное тело
#121a16, тонкая металлическая кромка в полтора пикселя и
мягкая тень под плашкой. Прозрачной заливке тут не место:
сквозь неё просвечивал снимок фона. */
.ps--tem .ob-cell,
.ps--tem .ob-strip .ob-cell{
--mb-rim:1.5px; --mb-k:1.5;
border-radius:15.5px;
box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 14px 26px rgba(0,0,0,.3);
}
.ps--tem .ob-cell .mbtn__body{
background:#121a16;
border:0; border-radius:14px;
box-shadow:none;
}
.ps--tem .ob-cell span{ color:rgba(255,255,255,.88); }
/* 7. Подложку под заголовком «Что нужно от вас» снимаем: под ним
теперь три карточки со снимками, и стеклянная плашка спорит
с ними. Зелёная черта под заголовком возвращается на место. */
.ps--nuzhno > h2{
display:block; width:auto; padding:0;
border-radius:0; background:none;
-webkit-backdrop-filter:none; backdrop-filter:none;
}
.ps--nuzhno > h2::after{ left:0; bottom:-10px; }
/* 8. Кружок в «Почему это отдельное направление» стоял ниже текста.
Дело в устройстве самого кружка: мятный круг занимает 65.5 %
от коробки со снимком, то есть его верх ниже верха коробки на
17.25 % её высоты. На корпоративах коробка стоит перед
заголовком и этот запас съедается — там круг ложится вровень
с первой строкой. Здесь заголовок длинный, впускать его в
обтекание нельзя, поэтому поднимаем коробку ровно на этот
запас. Пустая часть коробки заходит на строку заголовка, но
сам снимок и круг остаются под ней. */
body.inner .posle-hero > .page-sec--fon.split > .pg-art--k{
margin-top:calc(var(--k-razmer) * -0.1725);
}
/* Круг поднялся — нижнее поле блока уменьшаем, чтобы рука по-прежнему
свисала на тёмный блок примерно на ту же величину. */
body.inner .posle-hero > .page-sec--fon.split{
padding-bottom:clamp(34px, 4vw, 62px);
}
/* ═══ «Для команды» ═══════════════════════════════════════════════
Страница перебрана по образцу «Ивентов»: первый экран стоит на
месте, остальное наезжает сверху, светлые и тёмные блоки идут
через один. Ниже — только то, что отличается от общих правил.
1. Врезка про рассылку открывает тёмный блок, как «с чего всё
считается» на «Ивентах»: верхнего поля ей не нужно, а до
заголовка оставляем воздух. Сам «Набор новичка» — подпись над
витриной, а не заголовок блока: он остаётся мелким и без
черты, это приходит вместе с тёмной одеждой .ps--tem. */
.ps--nabor > .pg-claim{
margin-top:0;
margin-bottom:clamp(28px, 3.4vw, 48px);
}
/* 2. «Что учесть при расчёте»: врезка «зачем этот набор» стоит над
заголовком, дальше три снимка. Снимки сняты поперёк, поэтому
кадру задаём свою пропорцию — иначе обрезка съедает половину. */
.ps--raschet > .pg-claim{ margin-bottom:clamp(22px, 2.6vw, 38px); }
.ps--raschet .tri-foto{ --tri-kadr:1 / 0.86; }
/* 3. Первый светлый блок после первого экрана растягивал свою
подложку на 64 пикселя вверх — это задел на стык с соседом.
Здесь соседа нет: сверху первый экран, и полупрозрачная
светлая плёнка ложилась поверх него, было видно как мутную
полосу у верхнего края окна. Обрезаем подложку по границе. */
body.inner .posle-hero > .page-sec--fon:first-child::before{ top:0; }
/* ═══ «Работы» ════════════════════════════════════════════════════
У страницы свой фон — светлая вертикальная полоса fd1. Она белее
общей и тянется во всю высоту списка работ, поэтому берём её
плотнее обычного и без растворения по краям: снизу под ней сразу
тёмный блок «смотрите также», сверху — первый экран. */
.ps--raboty::before{
background-image:url(../img/obshee/fon-raboty.webp);
background-position:50% 0;
opacity:var(--psf-op, .9);
}
/* Текст каждой работы ложится на стеклянную подложку: фон светлый,
но неровный, и без неё абзац местами проваливается. Стекло очень
слабое — белая плёнка с размытием, а не плашка. */
.ps--raboty .wk-body{
padding:clamp(18px, 2vw, 30px) clamp(18px, 2.2vw, 34px)
clamp(20px, 2.2vw, 32px);
border-radius:20px;
background:rgba(255,255,255,.42);
border:1px solid rgba(255,255,255,.6);
-webkit-backdrop-filter:blur(14px) saturate(1.04);
backdrop-filter:blur(14px) saturate(1.04);
box-shadow:0 10px 30px rgba(18,30,25,.07);
}
/* ═══ «Новогодний мерч» ═══════════════════════════════════════════
Низ страницы приведён к общему виду, но живёт он в своей обёртке
.after-hero, а она держит детей в колонке текста. Блокам во всю
ширину это нужно снять — иначе тёмная полоса и лента обрываются
по краям колонки. */
.after-hero > .ps--tmn,
.after-hero > .be--fon,
.after-hero > .pc-sec{
width:100vw; max-width:none; margin-inline:calc(50% - 50vw);
}
/* Светлый блок остаётся в колонке текста: во всю ширину у него
уходит только подложка, она рисуется отдельным слоем. */
/* Обратный отсчёт — первый блок под шапкой, поэтому подложка у него
не растворяется сверху: под ней уехавшая сцена. */
.ps--otschet::before{
background-image:url(../img/obshee/fon-blok-2.webp);
opacity:var(--pst-op, .4);
}
.ps--otschet{ margin-top:0; }
/* «Готовые наборы» — светлый блок. Снимки наборов сняты поперёк,
кадру задаём свою пропорцию. */
.ps--nabory .tri-foto{ --tri-kadr:1 / 0.86; }
.ps--nabory > .ob-strip{ margin-top:clamp(26px, 3vw, 44px); }
/* Механику первого экрана переворачиваем: раньше шапка уезжала
вверх, а блок под ней стоял. Теперь как на остальных страницах —
шапка стоит приклеенной к верхней кромке, а всё, что ниже,
наезжает на неё сверху. Прокладка под шапкой больше не нужна:
обёртка идёт обычным ходом, сразу за шапкой. */
.nyp{
position:sticky; top:0; z-index:0;
height:100vh; min-height:520px;
margin-bottom:0;
}
.nyp-scene{ height:100vh; min-height:520px; }
.after-hero{
position:relative; top:auto; z-index:1;
margin-top:0;
background:var(--l-bg);
}
.hero-pad{ display:none; }
/* Заливка первого блока была нужна, пока под ним ездила сцена. */
.after-hero > .page-sec.dark:first-child{ background:var(--bg); }
/* «Готовые наборы» — без черты под заголовком. */
.ps--nabory > h2::after{ display:none; }
/* Врезка про год стоит перед витриной — отбиваем её с обеих сторон. */
.ps--nabory > .pg-claim{
margin-top:clamp(30px, 3.6vw, 52px);
margin-bottom:clamp(20px, 2.4vw, 34px);
}
/* Обёртка теперь едет поверх шапки, поэтому она должна закрывать
окно целиком: раньше она жила в колонке текста, и по бокам от неё
просвечивала стоящая шапка. Ширину отдаём окну, а колонку держим
внутренними полями — как в .posle-hero на остальных страницах. */
.after-hero{
width:100vw; max-width:none;
margin-inline:calc(50% - 50vw);
padding-inline:max(20px, calc(50vw - var(--read-w) / 2));
box-sizing:border-box;
}
.after-hero > *{ width:min(var(--read-w), 100%); margin-inline:auto; }
.after-hero > .ps--tmn,
.after-hero > .be--fon,
.after-hero > .pc-sec{
width:100vw; max-width:none;
margin-inline:calc(50% - 50vw);
}
/* Первый блок начинается ровно от кромки обёртки — иначе над ним
светлая полоса поверх шапки. */
.after-hero > .page-sec:first-child{ margin-top:0; }
/* ═══ «О компании» ════════════════════════════════════════════════
1. Врезка про одного подрядчика вынесена в свой тёмный блок и в
нём одна: полей у неё быть не должно, их держит сам блок. */
.ps--odin{ padding-block:clamp(30px, 3.4vw, 50px); }
.ps--odin > .pg-claim{ margin:0; }
/* 2. Четыре шага перенесены с главной. Там блок занимает экран
целиком и лежит на своей фотографии — на внутренней странице
это лишнее: он идёт в общем ряду блоков, высоту держит
содержимое, а фон остаётся светлым, как у соседей. */
.ps--shagi{
min-height:0;
width:100vw; max-width:none; margin-inline:calc(50% - 50vw);
padding-block:clamp(34px, 4vw, 60px);
}
.ps--shagi .steps-inner{
width:100%; max-width:none; margin-inline:0;
padding-inline:max(20px, calc(50vw - var(--read-w) / 2));
box-sizing:border-box;
}
.ps--shagi .steps-head h2{ margin:0; }
/* 3. Стык «четырёх шагов» и «о чём мы говорим честно». Между ними
складывались нижнее поле шагов и верхнее поле тёмной полосы —
выходила светлая щель. Полей больше нет, блоки идут встык. */
body.inner .posle-hero > .ps--shagi{
margin-block:0;
padding-bottom:clamp(20px, 2.2vw, 34px);
}
body.inner .posle-hero > .ps--chestno{ margin-top:0; }
/* Своя подложка у «честно»: у соседнего тёмного блока другой снимок,
иначе два одинаковых кадра подряд читаются как один длинный. */
.ps--chestno::before{
background-image:url(../img/obshee/fon-blok-4.webp);
opacity:var(--pst-op, .5);
}
/* 4. Врезка про одного подрядчика стоит между двумя светлыми
блоками. Тень по верхней и нижней кромке внутрь делает её
углублением, а не наклейкой поверх страницы. */
.ps--odin{
box-shadow:
inset 0 22px 34px -22px rgba(0,0,0,.85),
inset 0 -22px 34px -22px rgba(0,0,0,.85);
}
/* ═══ «О чём мы говорим честно» — окно с текстом и живая сцена ════
Блок стал двухколонным: слева перечень на матовой подложке,
справа манекен, вокруг которого висят материалы. Манекен стоит
на месте, вещи дышат — у каждой свой ход, своя длительность и
своя задержка, чтобы движение не читалось как одна общая волна. */
@media (min-width:960px){
.ps--chestno{
display:grid;
grid-template-columns:minmax(0, 1fr) minmax(300px, .82fr);
align-items:stretch;
gap:clamp(26px, 3.4vw, 56px);
}
/* Нижнее поле блока отдаём окну с текстом: сцена должна доходить
до самой кромки, иначе манекен стоит не на границе тёмной
полосы, а на восемьдесят восемь пикселей выше неё. */
body.inner .posle-hero > .ps--chestno{ padding-bottom:0; }
.ps--chestno > .ok-okno{ margin-bottom:clamp(40px, 5.5vw, 88px); }
}
/* Матовое окно под текстом — то же стекло, что у подложек на
тёмных блоках, только на весь перечень. */
.ok-okno{
padding:clamp(20px, 2.4vw, 36px) clamp(20px, 2.6vw, 40px)
clamp(22px, 2.6vw, 38px);
border-radius:22px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.13);
-webkit-backdrop-filter:blur(16px) saturate(1.05);
backdrop-filter:blur(16px) saturate(1.05);
box-shadow:0 18px 44px rgba(0,0,0,.28);
}
.ok-okno > :first-child{ margin-top:0; }
.ok-okno p, .ok-okno li{ max-width:none; }
/* Сцена тянется во всю высоту строки — то есть ровно на окно
текста слева. Манекен ростом с неё, ногами на нижней кромке. */
.ok-fly{
position:relative;
width:100%;
min-height:clamp(430px, 40vw, 700px);
pointer-events:none;
}
@media (max-width:959px){
.ok-fly{ aspect-ratio:1 / 1.16; min-height:0; }
}
/* Верхнее поле оставляет голову там же, где она стояла, а низ на
пару процентов уходит за кромку: в самом файле под ботинками
есть пустая полоса, и без этого манекен как бы висел. */
.ok-fly .fly-m{
position:absolute; left:56%; top:auto; bottom:-2.2%; z-index:2;
height:calc(100% - 60px); width:auto; max-width:none;
transform:translateX(-50%);
filter:drop-shadow(0 24px 40px rgba(0,0,0,.45));
}
.ok-fly .fly-o{
position:absolute; z-index:1; width:22%; height:auto;
filter:drop-shadow(0 14px 24px rgba(0,0,0,.4));
will-change:transform;
}
/* Пять траекторий. Ход небольшой: вверх-вниз заметно, вбок чуть-чуть,
поворот на градус-полтора — вещь качается, а не летает по экрану. */
@keyframes ok-fly-a{
0%,100%{ transform:translate3d(0,0,0) rotate(0deg); }
33% { transform:translate3d(-5px,-16px,0) rotate(-1.6deg); }
66% { transform:translate3d(4px,9px,0) rotate(1.1deg); }
}
@keyframes ok-fly-b{
0%,100%{ transform:translate3d(0,0,0) rotate(0deg); }
40% { transform:translate3d(7px,13px,0) rotate(1.8deg); }
72% { transform:translate3d(-3px,-11px,0) rotate(-0.9deg); }
}
@keyframes ok-fly-c{
0%,100%{ transform:translate3d(0,0,0) rotate(0deg); }
28% { transform:translate3d(-8px,10px,0) rotate(1.3deg); }
61% { transform:translate3d(5px,-14px,0) rotate(-1.5deg); }
}
/* Расстановка: три вещи слева от манекена и две справа, все на
одном отлёте от его середины. По высоте — плечо, бедро, голень.
Рулетка у плеча, нитки у бедра, планшет у голени; справа
полотенце у голени и ткань у бедра. */
.ok-fly .fly-o--1{ left:3.7%; top:20%;
animation:ok-fly-a 7.4s ease-in-out -1.2s infinite; }
.ok-fly .fly-o--2{ left:3.7%; top:49%;
animation:ok-fly-b 9.1s ease-in-out -3.4s infinite; }
.ok-fly .fly-o--3{ left:3.7%; top:76%;
animation:ok-fly-c 8.2s ease-in-out -0.6s infinite; }
.ok-fly .fly-o--4{ left:82.6%; top:49%;
animation:ok-fly-b 10.6s ease-in-out -5.1s infinite; }
.ok-fly .fly-o--5{ left:82.6%; top:76%;
animation:ok-fly-a 6.7s ease-in-out -2.3s infinite; }
@media (prefers-reduced-motion: reduce){
.ok-fly .fly-o{ animation:none; }
}
@media (max-width:959px){
.ok-fly{ margin-top:clamp(22px, 4vw, 40px); }
}
/* ═══ «Вопросы» ═══════════════════════════════════════════════════
1. Врезка «отправная точка» стоит в своём тёмном блоке одна —
полей у неё нет, их держит блок. */
.ps--tochka{ padding-block:clamp(30px, 3.4vw, 50px); }
.ps--tochka > .pg-claim{ margin:0; }
/* 2. Заголовок над списком вопросов: список идёт сразу за ним, и
обычного нижнего поля заголовку тут мало. */
.ps--qa > h2{ margin-bottom:clamp(20px, 2.4vw, 34px); }
/* 3. Витрина в «не нашли своего вопроса» — четыре в ряд, восемь
предметов ложатся ровно в два ряда. */
@media (min-width:820px){
.ob-strip.ob-strip--4,
.page-sec .ob-strip--4{ grid-template-columns:repeat(4, 1fr); }
}
/* ═══ «Контакты» ══════════════════════════════════════════════════
1. Карточки телефона, почты и режима работы под курсором раньше
заливались целиком. Оставляем отклик каймой и лёгким подъёмом,
как у карточек отраслей на главной: заливка на светлом фоне
выглядит как нажатая кнопка, хотя нажимать тут нечего. */
.ps--ct .ct-card{
transition:border-color .25s ease, background .25s ease,
transform .25s ease, box-shadow .25s ease;
}
@media (hover:hover){
.ps--ct .ct-card:hover{
background:rgba(255,255,255,.72);
border-color:rgba(11,143,98,.45);
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(18,30,25,.1);
}
}
/* 2. «Что прислать вместе с заявкой»: перечень лежит в матовом
окне, приписка под ним — на голом фоне с зелёной полосой. */
.ps--prislat > .ok-okno{ margin-bottom:clamp(22px, 2.6vw, 36px); }
.ps--prislat .note{ background:none; }
/* 3. Врезка про первое письмо — свой тёмный блок между двумя
светлыми, с тенью по кромкам внутрь: получается углубление. */
.ps--pismo{
padding-block:clamp(30px, 3.4vw, 50px);
box-shadow:
inset 0 22px 34px -22px rgba(0,0,0,.85),
inset 0 -22px 34px -22px rgba(0,0,0,.85);
}
.ps--pismo > .pg-claim{ margin:0; }
/* ═══ «Контакты» — вторая правка ══════════════════════════════════
4. Светлый блок под тёмным тянул свою подложку на 64 пикселя
вверх, и полупрозрачная светлая плёнка ложилась поверх соседа
сверху — казалось, что нижний блок наезжает. Обрезаем её по
границе везде, где светлый блок идёт сразу за тёмным. */
.ps--tmn + .page-sec--fon::before,
.dark-band + .page-sec--fon::before,
.page-sec.dark + .page-sec--fon::before{ top:0; }
/* И наоборот: тёмный блок после светлого не должен ловить чужую
плёнку снизу. */
.page-sec--fon:has(+ .ps--tmn)::before,
.page-sec--fon:has(+ .page-sec.dark)::before{ bottom:0; }
/* 5. Приписка «если ничего из этого пока нет» лежит в том же окне,
что и перечень: своей подложки у неё нет, остаётся только
зелёная полоса слева. */
.ps--prislat > .ok-okno{ margin-bottom:0; }
.ps--prislat .note{
background:none;
margin-bottom:0;
}
/* 6. Телефон, почта и режим работы: сплошное белое тело в общей
металлической кайме, как у кнопок. Под курсором из левого
верхнего угла разливается светло-зелёное — тем же приёмом
круглой маски, что у плашек витрины. */
.ps--ct .ct-card{
--mb-rim:1.5px; --mb-k:1.5;
position:relative; isolation:isolate;
display:flex; padding:var(--mb-rim);
border:0; border-radius:20px;
background:transparent;
box-shadow:0 0 0 1px rgba(16,22,19,.08), 0 14px 30px rgba(18,30,25,.09);
}
.ps--ct .ct-card > .mbtn__body{
position:relative; overflow:hidden;
display:flex; flex-direction:column;
width:100%; box-sizing:border-box;
padding:clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px) clamp(20px, 2.2vw, 30px);
border-radius:18.5px;
background:#fff; color:var(--l-ink);
text-align:left; font:inherit; letter-spacing:normal;
white-space:normal; box-shadow:none;
}
.ps--ct .ct-card > .mbtn__body::after{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
border-radius:inherit;
background:linear-gradient(140deg, #cdf5e4 0%, #9be0c4 100%);
-webkit-mask-image:radial-gradient(circle at 0 0, #000 0 49.6%, transparent 50%);
mask-image:radial-gradient(circle at 0 0, #000 0 49.6%, transparent 50%);
/* Без запрета на повтор маска размножается плиткой, и вместо одного
круга по плашке ползут десятки. */
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:0 0; mask-position:0 0;
-webkit-mask-size:0 0; mask-size:0 0;
transition:mask-size .55s cubic-bezier(.22,.61,.36,1),
-webkit-mask-size .55s cubic-bezier(.22,.61,.36,1);
}
@media (hover:hover){
.ps--ct .ct-card:hover > .mbtn__body::after{
-webkit-mask-size:1400px 1400px; mask-size:1400px 1400px;
}
/* Прежний отклик снимаем: теперь всё говорит заливка. */
.ps--ct .ct-card:hover{ transform:none; }
}
.ps--ct .ct-card > .mbtn__body > *{ position:relative; z-index:1; }
/* 7. Приписка внутри окна «что прислать» — без своей плашки и без
стекла: остаётся только зелёная полоса слева. */
.ps--prislat .ok-okno .note{
background:none;
-webkit-backdrop-filter:none; backdrop-filter:none;
box-shadow:none;
padding-right:0;
}
/* 8. «Документы и оплата» и «Доставка по России»: текст слева,
снимок справа. Снимок прижат к нижней кромке блока — у файлов
низ обрезан по фигуре, поэтому он именно стоит, а не висит. */
@media (min-width:960px){
.ps--doki, .ps--dostavka{
position:relative; z-index:1;
display:grid;
grid-template-columns:minmax(0, 1fr) minmax(300px, .68fr);
align-items:end;
gap:clamp(24px, 3vw, 52px);
min-height:clamp(380px, 33vw, 560px);
}
/* Снимок уходит из колонки за самый край окна — на пятнадцать
пикселей правее кромки — и уходит на восемьдесят ниже границы
блока: иначе он висел в воздухе над стыком. */
.ps--doki > .kt-foto, .ps--dostavka > .kt-foto{
position:absolute;
right:calc(50% - 50vw - 15px); bottom:-80px;
width:clamp(340px, 40vw, 660px);
}
/* У доставки колёса стоят на дороге чуть выше края кадра, поэтому
ей нужно на тридцать пикселей меньше. */
.ps--dostavka > .kt-foto{ bottom:-50px; }
/* Снимок к документам вертикальный: при общей ширине он вылезал
за верх блока и срезал фигуре голову. Сужаем его до той меры,
при которой он целиком помещается в высоту блока. */
/* У «документов» стороны поменяны местами: снимок уходит к левой
кромке окна, текст встаёт справа и выключен по правому краю —
прижат к кромке колонки. Отражать снимок больше не нужно: у
левого края он и так раскрывается внутрь, к тексту. */
.ps--doki{ grid-template-columns:minmax(300px, .68fr) minmax(0, 1fr); }
.ps--doki > .kt-txt{ grid-column:2; text-align:right; }
.ps--doki > .kt-foto{
width:clamp(300px, 29vw, 470px); bottom:-63px;
left:calc(50% - 50vw - 15px); right:auto;
}
}
.kt-txt > :first-child{ margin-top:0; }
.kt-foto{ display:flex; align-items:flex-end; justify-content:flex-end; }
.kt-foto img{
display:block; width:100%; height:auto; max-width:none;
filter:drop-shadow(0 18px 34px rgba(18,30,25,.18));
}
@media (max-width:959px){
.kt-foto{ margin-top:clamp(20px, 4vw, 36px); }
.kt-foto img{ width:min(460px, 100%); margin-inline:auto; }
}
/* Снимок на «Контактах» заходит на пятнадцать пикселей за правую
кромку окна. Здесь стояло html{overflow-x:clip} — и это была
ошибка: правило выше прямо запрещает трогать прокрутку на html.
Стоило его поставить, как перенос настройки прокрутки с body
прекратился, и колесо перестало листать страницу везде, кроме
узкой полосы у правого края.
Обрезать ничего и не нужно: body уже стоит overflow-x:hidden, и
пока html остаётся visible, браузер берёт это значение для всего
окна. Лишнего снимка за кромкой не видно, полосы прокрутки нет.
Тот scrollWidth больше ширины окна, который я тогда померил, —
просто ширина содержимого, а не настоящая прокрутка. */
/* ══════ ПЛОСКАЯ ШАПКА РАЗДЕЛА ═══════════════════════════════════
Сцена с манекенами на «Корпоративах», «Ивентах» и «Для команды»
убрана. Причина простая: фигуры расставлялись в процентах от окна,
и на каждой второй пропорции экрана они наползали на заголовок —
на моём окне закрывали его на треть. Вместо сцены — наше тёмное
дерево, тот же фон, что у блоков «смотрите также» и у шапки блога.
Все три страницы теперь одного роста, и текст на них стоит в одном
месте одного кегля: колонка сайта, по центру по высоте. Никаких
раскладок под размер экрана здесь больше нет — и разъезжаться
нечему. */
.pgh--plosk{
--sc-h:clamp(360px, 32vw, 480px);
min-height:var(--sc-h);
display:flex; align-items:center;
background:var(--bg);
overflow:clip;
padding:calc(var(--tb-h, 64px) + 30px) 0 clamp(26px, 3.4vw, 44px);
}
/* Фон и вуаль поверх него: без вуали светлые доски спорят с текстом. */
.pgh--plosk::before{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:url(../img/obshee/fon-blok-3.webp) 50% 50% / cover no-repeat;
opacity:.55;
}
.pgh--plosk::after{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:linear-gradient(180deg, rgba(8,16,20,.52) 0%,
rgba(8,16,20,.26) 42%, rgba(8,16,20,.66) 100%);
}
/* Текст выходит из абсолютной рамки сцены в обычную колонку сайта. */
.pgh--plosk > .page-head{
position:relative; z-index:2;
inset:auto;
width:100%; max-width:1180px;
margin:0 auto; padding:0 20px;
min-height:0;
display:block; pointer-events:auto;
}
.pgh--plosk > .page-head > h1,
.pgh--plosk > .page-head > .lead{
width:auto; max-width:none; z-index:auto;
}
.pgh--plosk > .page-head > h1{
margin:0;
font-size:clamp(32px, 3.8vw, 56px);
line-height:1.06; letter-spacing:-.035em;
max-width:18ch;
}
.pgh--plosk > .page-head > .lead{
margin:clamp(14px, 1.8vw, 22px) 0 0;
font-size:clamp(15.5px, 1.25vw, 18.5px);
line-height:1.6; max-width:62ch;
color:rgba(243,246,244,.84);
}
@media (max-width:699px){
.pgh--plosk{ --sc-h:clamp(300px, 62vw, 420px); }
.pgh--plosk > .page-head > h1{ max-width:none; }
}
/* ══════ СИЛЬНЫЕ СЛОВА: ПОДЛОЖКА ВМЕСТО ЗЕЛЁНОЙ ЗАЛИВКИ ══════════
Раньше отмеченная фраза заливалась мятным — и целиком, и при
появлении на экране. На длинной фразе, разорванной переносом,
это читалось как мазок маркером поперёк абзаца.
Теперь фраза лежит на нашей матовой подложке: та же, что под
текстом в шапке блога и в окне на «О компании», только маленькая.
Цвет подложки берётся из переменной — на светлом она тёмная, на
тёмном светлая, и одно правило работает по всему сайту.
Правила идут последними и перекрывают оба прежних блока про .hot. */
.hot,
.hot:hover,
.hot.lit{
background-image:none;
background-color:var(--hot-fon, rgba(16,22,19,.07));
box-shadow:inset 0 0 0 1px var(--hot-kant, rgba(16,22,19,.10));
color:inherit;
padding:.08em .32em;
margin:0 -.08em;
border-radius:7px;
-webkit-box-decoration-break:clone; box-decoration-break:clone;
transition:background-color .28s ease, box-shadow .28s ease;
}
/* Под курсором подложка чуть плотнее — не заливка, а нажим. */
.hot:hover{
background-color:var(--hot-fon-nav, rgba(16,22,19,.12));
box-shadow:inset 0 0 0 1px var(--hot-kant-nav, rgba(16,22,19,.16));
}
/* Тёмные места страницы: тёмная подложка на тёмном не видна. */
.page-sec.dark,
.dark-band,
.beyond,
.sec-dark,
.ps--tmn,
.ps--tem,
.ps--odin,
.ps--pismo,
.ps--chestno,
.pgh,
.blog-shapka,
.nyp{
--hot-fon:rgba(255,255,255,.10);
--hot-kant:rgba(255,255,255,.16);
--hot-fon-nav:rgba(255,255,255,.16);
--hot-kant-nav:rgba(255,255,255,.24);
}
@media (prefers-reduced-motion: reduce){
.hot{ transition:none; }
}
/* ══════ ПОПРАВКА: СЛОВА БЕЗ ПОДЛОЖКИ, ТЕКСТ — НА ПЛИТЕ ══════════
Предыдущая правка положила на подложку каждое отмеченное слово —
это было не то. Слова остаются обычным текстом, а на фирменную
стеклянную плиту ложится весь текстовый блок целиком.
Плита — та же, что у карточки «Расскажите, какой мерч нужен» внизу
каждой страницы: своего фона нет, фон за ней размыт и подсвечен,
по краю идёт переливающаяся кайма. */
.hot,
.hot:hover,
.hot.lit{
background:none;
box-shadow:none;
padding:0; margin:0;
border-radius:0;
color:inherit;
}
/* Плита под текстом первого экрана. Значения материала каймы взяты у
контактной карточки один в один — иначе перелив идёт другим темпом
и рядом эти две плиты читаются как из разных наборов. */
.pgh-plita{
--mb-rim:13px;
--ct-rim-op:.55;
--mb-rate:0.4;
--mb-k:0.42;
--mb-crush:2.2;
--mb-bright:1.5;
--mb-tile:max(40px, calc(var(--mb-size, 520px) * var(--mb-k)));
--mb-amp-px:calc(var(--mb-tile) * var(--mb-amp));
--ct-r:28px;
position:relative; isolation:isolate;
display:flex; padding:var(--mb-rim);
width:min(880px, 100%);
border:0; border-radius:var(--ct-r);
background:none;
--lg-drop:0 30px 70px rgba(10,40,30,.35);
color:var(--ink);
-webkit-backdrop-filter:blur(20px) saturate(1.7) brightness(1.04);
backdrop-filter:blur(20px) saturate(1.7) brightness(1.04);
}
.pgh-plita > .mbtn__rim{ opacity:var(--ct-rim-op); }
.pgh-plita > .mbtn__rim::after{ opacity:.55; }
.pgh-plita > .mbtn__body{
display:block; width:100%;
padding:clamp(24px, 3vw, 40px) clamp(24px, 3.2vw, 44px);
border-radius:calc(var(--ct-r) - var(--mb-rim));
text-align:left; white-space:normal;
font-family:var(--font-text); font-size:inherit; font-weight:400;
letter-spacing:normal; line-height:normal; color:var(--ink);
background:none; box-shadow:none;
}
.pgh-plita .mbtn__body > *{ position:relative; z-index:1; }
/* Кегли и ширины — те же, что были у плоской шапки, но теперь текст
лежит внутри тела плиты, и селекторы считают на шаг глубже. */
.pgh--plosk .page-head h1{
margin:0;
width:auto; max-width:none;
font-size:clamp(32px, 3.8vw, 56px);
line-height:1.06; letter-spacing:-.035em;
}
.pgh--plosk .page-head .lead{
margin:clamp(14px, 1.8vw, 22px) 0 0;
width:auto; max-width:62ch;
font-size:clamp(15.5px, 1.25vw, 18.5px);
line-height:1.6;
color:rgba(243,246,244,.84);
}
/* Кайма плиты: вырезаем середину, иначе материал заливает всю плиту
диагональными полосами — ровно то, что видно, если это правило
забыть. Такое же стоит у табличек внизу страниц направлений. */
.pgh-plita > .mbtn__rim{
padding:var(--mb-rim); box-sizing:border-box;
-webkit-mask-image:linear-gradient(#000, #000), linear-gradient(#000, #000);
-webkit-mask-clip:content-box, border-box;
-webkit-mask-composite:xor;
mask-image:linear-gradient(#000, #000), linear-gradient(#000, #000);
mask-clip:content-box, border-box;
mask-composite:exclude;
}
/* Плита стоит по левому краю колонки сайта, а не во всю её ширину:
строка в 62 знака читается, строка во весь монитор — нет. */
.pgh--plosk > .page-head.pgh-plita{
width:min(1000px, calc(100% - 40px));
max-width:min(1000px, calc(100% - 40px));
margin-left:max(20px, calc(50vw - 590px));
margin-right:auto;
padding:var(--mb-rim);
}
/* ══════ ШАПКА РАЗДЕЛА ПО ОБРАЗЦУ БЛОГА ══════════════════════════
Металлическая плита отменена: её кайма даёт в углах тёмные пятна,
а на тёмном дереве перелив всё равно не читается. Берём ровно то,
что стоит в шапке блога — матовое стекло с тонкой светлой обводкой
и мягкой тенью. Один вид на все разделы: слева текст на плашке,
справа снимок раздела. */
.pgh--plosk > .page-head.pgh-plashka{
position:relative; z-index:2;
display:block;
/* Уже, чем колонка: справа стоит сцена раздела, и плашка не должна
наезжать на людей в кадре. Мера та же, что в блоге. */
width:min(680px, calc(100% - 40px));
max-width:min(680px, calc(100% - 40px));
margin-left:max(20px, calc(50vw - 590px));
margin-right:auto;
padding:clamp(22px, 2.8vw, 34px) clamp(22px, 2.8vw, 36px);
border:1px solid rgba(255,255,255,.13);
border-radius:24px;
background:rgba(255,255,255,.07);
-webkit-backdrop-filter:blur(16px) saturate(1.05);
backdrop-filter:blur(16px) saturate(1.05);
box-shadow:0 18px 44px rgba(0,0,0,.28);
min-height:0; pointer-events:auto;
}
/* Снимок раздела: во всю высоту шапки, вплотную к правой кромке.
Тот же приём, что у декорации блога. */
.pgh-deko{
position:absolute; z-index:1; pointer-events:none;
top:0; bottom:0; right:0;
}
.pgh-deko img{ display:block; height:100%; width:auto; max-width:none; }
.pgh-deko[hidden]{ display:none; }
@media (max-width:1099px){
.pgh-deko{ display:none; }
.pgh--plosk > .page-head.pgh-plashka{
width:calc(100% - 40px); max-width:calc(100% - 40px);
margin-left:20px;
}
}
/* Металлическая плита больше не используется — гасим её остатки,
если класс где-то остался. */
.pgh-plita > .mbtn__rim{ display:none; }
/* ══════ РАЗНЫЕ ФОНЫ У ТЁМНЫХ БЛОКОВ ═════════════════════════════
Тёмных подложек у нас четыре, а стояла на всех блоках почти одна:
на иной странице fon-blok-4 повторялся трижды подряд, и низ
страницы выглядел как один длинный блок.
Теперь фон блока задаётся классом в разметке, а не жёстко в
правиле секции. Раскладка по страницам своя — см. zp_fon_raskid.py,
он же её и расставил. Первый экран в раскладке не участвует: там
везде дерево, то же, что в блоге. */
.fon-1::before{ background-image:url(../img/obshee/fon-blok-1.webp) !important; }
.fon-2::before{ background-image:url(../img/obshee/fon-blok-2.webp) !important; }
.fon-3::before{ background-image:url(../img/obshee/fon-blok-3.webp) !important; }
.fon-4::before{ background-image:url(../img/obshee/fon-blok-4.webp) !important; }
/* У плашки призыва снимок лежит ещё и в теле — иначе половина блока
осталась бы со старым фоном. */
.fon-1 > .mbtn__body::before{ background-image:url(../img/obshee/fon-blok-1.webp) !important; }
.fon-2 > .mbtn__body::before{ background-image:url(../img/obshee/fon-blok-2.webp) !important; }
.fon-3 > .mbtn__body::before{ background-image:url(../img/obshee/fon-blok-3.webp) !important; }
.fon-4 > .mbtn__body::before{ background-image:url(../img/obshee/fon-blok-4.webp) !important; }
/* Ещё три тёмные подложки из той же съёмки — чтобы фоны на странице
не повторялись вовсе, а первые экраны разных разделов отличались
друг от друга. */
.fon-5::before{ background-image:url(../img/obshee/fon-blok-5.webp) !important; }
.fon-6::before{ background-image:url(../img/obshee/fon-blok-6.webp) !important; }
.fon-7::before{ background-image:url(../img/obshee/fon-blok-7.webp) !important; }
.fon-5 > .mbtn__body::before{ background-image:url(../img/obshee/fon-blok-5.webp) !important; }
.fon-6 > .mbtn__body::before{ background-image:url(../img/obshee/fon-blok-6.webp) !important; }
.fon-7 > .mbtn__body::before{ background-image:url(../img/obshee/fon-blok-7.webp) !important; }
/* ══════ БЕЗ НАЕЗДА НА ПЛОСКИХ ШАПКАХ ════════════════════════════
Первый экран со сценой прилипал к верху, и следующий блок наезжал
на него — приём был нужен, пока в шапке стояли манекены. Плоская
шапка — обычный верх страницы, никакого перехода ей не нужно:
отклеиваем её и убираем сдвиг у слоя, который на неё наезжал. */
body.inner:has(.posle-hero) .pgh--plosk{
/* relative, а не static: снимок раздела внутри считает свои края от
шапки, и при static он начинал мерить от всей страницы — картинка
раздувалась на восемь тысяч точек. */
position:relative; top:auto; z-index:auto;
}
.pgh--plosk + .posle-hero{ margin-top:0; }
/* ══════ ПЛОСКИЕ ШАПКИ — ВСЕ ОДНОГО РОСТА ════════════════════════
Рост шапки брался из старого правила «наезда», а оно висело только
на страницах со слоем .posle-hero. У «Вопросов» такого слоя нет —
и её первый экран выходил вдвое ниже соседних: 480 против 772.
Снимок раздела тянется по высоте шапки, поэтому вместе с шапкой
он терял и ширину — кадр стоял обрезанным огрызком у правого края.
Рост задаём здесь для всех плоских шапок разом, независимо от того,
что идёт следом. Мера — vh, а не svh: svh считает окно без
выезжающих панелей браузера, это на полтора процента короче
настоящего, и снизу из-под шапки выглядывала светлая кромка. */
@media (min-width:700px){
body.inner .pgh--plosk{
--sc-h:max(100vh, 520px);
height:var(--sc-h); min-height:var(--sc-h);
}
}
/* ══════ ФОНЫ ПЕРВЫХ ЭКРАНОВ — СВОЙ НАБОР ════════════════════════
Раньше в шапке стоял тот же фон-дерево, что и во внутренних блоках,
и снимок раздела лежал на нём как наклейка: доски за спиной, а под
ногами у манекенов бетон.
Новый набор fon-shapka — это те же сцены, из которых вырезаны сами
снимки: тот же свет, та же линия пола, та же зелень по краям. Пол
продолжается из фона в снимок, и первый экран читается как одна
комната, а не как две картинки друг на друге.
Поэтому и плотность другая: у fon-blok было .55 (текстура, ей и надо
быть приглушённой), здесь почти в полную силу — это сама комната.
Вуаль ::after остаётся: без неё светлый пол спорит с текстом.
Набор отдельный от fon-blok, поэтому судоку внутренних блоков он не
касается — шапка и нижние блоки теперь физически не могут совпасть.
Блог живёт на своей .blog-shapka и сюда не попадает. */
.pgh--plosk.fsh-1::before{ background-image:url(../img/obshee/fon-shapka-1.webp) !important; opacity:.92; }
.pgh--plosk.fsh-2::before{ background-image:url(../img/obshee/fon-shapka-2.webp) !important; opacity:.92; }
.pgh--plosk.fsh-3::before{ background-image:url(../img/obshee/fon-shapka-3.webp) !important; opacity:.92; }
.pgh--plosk.fsh-4::before{ background-image:url(../img/obshee/fon-shapka-4.webp) !important; opacity:.92; }
.pgh--plosk.fsh-5::before{ background-image:url(../img/obshee/fon-shapka-5.webp) !important; opacity:.92; }
.pgh--plosk.fsh-6::before{ background-image:url(../img/obshee/fon-shapka-6.webp) !important; opacity:.92; }
.pgh--plosk.fsh-7::before{ background-image:url(../img/obshee/fon-shapka-7.webp) !important; opacity:.92; }
/* ══════ ВДОХНОВЕНИЕ: БЛОК ЛАБОРАТОРИИ ВО ВЕСЬ ЭКРАН ═════════════
Страница — это сам блок трекинга и больше ничего: ни первого
экрана, ни призыва, ни подвала. Сверху лежит только наша шапка.
Блок приходит из /lab/trekking.html отдельной страницей в iframe.
Так и надо: у него своя тёмная типографика и свои id (#win,
#stage, #scene), внутри он считает координаты от вьюпорта и сам
перекрывает окно. Втащить его разметку в сайт — значит переписать
половину его правил и ловить совпадения имён при каждой нашей
правке main.css.
overflow:hidden ставим на body, а не на html: html оставляем
visible, иначе ломается колесо мыши (правило в шапке этого файла).
Здесь странице и нечего прокручивать — кадр ровно в окно. */
body.vd-body{
height:100%; overflow:hidden;
background:#05080c; color:#dfe9f2;
overscroll-behavior:none;
}
.vd-frame{
position:fixed; inset:0; z-index:0;
width:100%; height:100%;
border:0; display:block;
}
/* Шапка поверх кадра: у блока внутри свой z-index до 5, но это
другой документ — считается только слой самого iframe. */
body.vd-body .hdr{ z-index:50; }
/* Здесь ровно одна кнопка — «На главную», слева вверху. Ни круга
с телефоном, ни вкладок меню, ни «узнать цену»: страница про вещь,
и уводить с неё некуда, кроме как назад.
Прячем стилями, а не вырезаем из разметки: header.js берёт
.hb-groups и .hb-menupill без проверки на пустоту и падает, если
их нет, — а кнопку «На главную» одевает он же, и хочется, чтобы
она выглядела в точности как на остальных страницах.
display:none, а не прозрачность: скрытое не должно ловить
ни клик, ни табуляцию. */
body.vd-body .hb-brandwrap,
body.vd-body .hb-nav{ display:none !important; }
body.vd-body .hb-spacer{ flex:1 1 auto; }
/* Полоса шапки тянется во всю ширину и лежит поверх кадра — значит она
же и перехватывает нажатия по всему верху страницы. Кнопка «Закрыть»
у блока стоит в правом верхнем углу, ровно под этой полосой: нажатие
до неё не доходило, и крестик срабатывал через раз — когда попадёшь
ниже кромки шапки. Именно отсюда «крестик не всё время трекается».
Сама полоса нажатий больше не ловит, ловит только кнопка на ней. */
body.vd-body .hdr,
body.vd-body .hdr-in{ pointer-events:none; }
body.vd-body .hdr .hb{ pointer-events:auto; }
/* Когда блок разворачивает карточку во весь экран, он ставит на нашем
теле класс vd-open (сам, изнутри кадра — домен один). Шапка на
раскрытой карточке лишняя: кнопка налезала на строку «объект
захвачен», а уходить со страницы в этот момент и не нужно — карточка
закрывается своим крестиком и возвращает шапку обратно. */
body.vd-body .hdr{ transition:opacity .34s ease; }
body.vd-body.vd-open .hdr{ opacity:0; pointer-events:none; }
/* ══════ ГЛАВНАЯ: НАПРАВЛЕНИЯ, ОТРАСЛИ, ВЕТКИ РАСЧЁТА ════════════
Правки 11.09.2026. Всё, что ниже, сознательно стоит в конце файла:
у блоков направлений и отраслей наверху длинная история подгонок,
и лезть туда правкой на месте — значит разбирать её заново. Здесь
перебивается только то, что поменялось, порядком следования. */
/* ── 1. Светлый фон под блоком направлений ──────────────────────
Ложится на самый задний план: ::before генерируется первым среди
детей, поэтому при одинаковом z-index рисуется раньше дальних
зарослей и остаётся за ними. Плотность небольшая — это подложка
под сцену, а не картинка. */
#directions::before{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:url(../img/obshee/fon-strip.webp) 50% 50% / cover no-repeat;
opacity:.42;
}
/* ── 2. Ветка целиком внутри блока направлений ──────────────────
Была швом: сидела в тёмном блоке и выезжала вверх на светлый,
склеивая границу. Теперь тёмный блок обычный, склеивать нечего —
ветка переехала сюда и прижата к низу. Блок режет своих детей
(overflow:hidden), поэтому на «Кому и что» её не видно совсем.
--seam-y теперь не подъём над границей, а посадка от низа блока.
Ноль — ветка прижата нижней кромкой к низу блока: плотная часть
(58…73 % высоты кадра) ложится прямо над границей, а редкий хвост
растворяется в светлом фоне у самого края. Поднимать её выше нельзя:
при 26 % плотная часть уходила за верх экрана, и в блоке оставался
один прозрачный хвост. */
#directions{ --seam-w:150%; --seam-y:0%; }
.seam-strip{ top:auto; bottom:0; }
/* ── 3. «Кому и что обычно нужно» — обычный тёмный блок ─────────
Сцена с деревом-переходом, тремя качающимися копиями и хвостом
лиан убрана из разметки: блок встал на общий набор fon-blok, как
тёмные блоки на внутренних страницах. Отсюда и правила те же —
картинка в ::before приглушённо, вуаль в ::after поверх неё.
Фон выбран шестой: на главной из этого набора он единственный,
а с соседями по цвету не спорит. */
#industries{
position:relative; overflow:hidden; isolation:isolate;
background:#0b1310;
/* запас сверху был под ветку-шов, которая выезжала на этот блок.
Ветки здесь больше нет — возвращаем обычное поле секции. */
padding-top:clamp(56px, 8vh, 110px);
}
#industries::before{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:url(../img/obshee/fon-blok-6.webp) 50% 50% / cover no-repeat;
/* Плотнее, чем у фонов внутренних страниц (там .55). Правка Павла:
сам фон блока должен быть обычной яркости, иначе на сплошной
темноте не виден уступ по кромкам — тень тонет в фоне, и весь
приём с утоплением пропадает. Затемнение кромок работает только
тогда, когда середине блока есть куда светлеть. */
opacity:.82;
display:block;
}
#industries::after{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:linear-gradient(100deg, rgba(6,14,11,.74), rgba(6,14,11,.44));
}
#industries > .sec-in{ position:relative; z-index:1; }
/* ── 4. Боковые ветки расчёта — только там, где есть место ──────
Рамка из лиан считает высоту от блока, а ширину берёт по пропорции
картинки: чем выше блок, тем шире каждая сторона. На широком экране
это красиво, на узком две стороны съедали больше половины ширины и
ложились на текст.
Порог по ширине окна, а не по «телефон/не телефон»: дело именно в
том, сколько остаётся колонке между двумя рамками.
1200 и выше — как было.
860…1200 — рамки остаются, но отодвинуты за край и ужаты, а колонка
пульта сужается им навстречу: текст важнее зелени.
Ниже 860 — рамок нет совсем (правило выше по файлу). */
@media (min-width:861px) and (max-width:1200px){
#calc{
/* короче — значит уже: ширина картинки считается от её высоты */
--cf-bok-k:.72;
--cf-bok-op:.5;
}
/* Уводим каждую сторону наружу на десятую часть окна. Гуща уходит
за кромку, в кадре остаётся только край листвы. */
.cf-l{ left:calc(-1 * var(--cf-hod) - 10vw); }
.cf-r{ right:calc(-1 * var(--cf-hod) - 10vw); }
/* Колонка сама подбирается, чтобы между рамками остался воздух. */
#calc > .sec-in{ max-width:min(calc(100% - 8vw), 760px); margin-inline:auto; }
#calc .sec-head{ max-width:100%; }
}
/* ══════ ГЛАВНАЯ: ДОВОДКА 11.09.2026, ВТОРОЙ ЗАХОД ══════════════ */
/* ── Ветка утоплена наполовину ──────────────────────────────────
Правка Павла: «опустить в самый низ, прям утоплена туда до
половины — на середине изображения». Значит середина кадра должна
лечь точно на нижнюю кромку блока, а вся нижняя половина уйти под
неё и обрезаться (у блока overflow:hidden).
Считает это --seam-y, взятый со знаком минус: в transform стоит
calc(-1 * var(--seam-y)), поэтому -50 % даёт сдвиг ВНИЗ на половину
высоты кадра. Верхняя половина остаётся в блоке целиком.
Дальше ветку подняли. Записано НЕ в пикселях, а долей от собственной
высоты кадра: проценты в transform считаются от самого элемента,
поэтому на любом экране ветка прикрывает блок ровно настолько же, а
не на фиксированные точки, которые на телефоне были бы вдвое
заметнее.
Число не на глаз. У этого кадра покрытие по альфе замерено
(_tools\per_probe.py): сплошная часть — 58…73 % высоты, пик 98.8 %
ровно на 64 %, края редкие (24 %). Нижняя кромка блока показывает
кадр на отметке (100 % − сдвиг). При сдвиге 47.56 % на кромку
приходилось 52 % высоты — это ещё редкая часть, и сквозь неё
просвечивал светлый фон блока: то самое «белое пятно внизу».
Ставим сдвиг 36 %: на кромку выходит ровно 64 %, самая плотная
строка кадра, и просвечивать нечему. */
#directions{ --seam-y:-36%; }
/* На узком экране ветка берётся заметно шире окна: её редкие края
(покрытие по альфе всего 24 %) обязаны уйти за кромки, иначе по
бокам видно, где кадр кончается. Правило было привязано к
#industries — вместе с переездом ветки переехало и оно. */
@media (max-width:900px){ #directions{ --seam-w:280%; } }
/* ── «Кому и что обычно нужно» утоплен глубже соседей ───────────
Приём простой: блок не отодвигается назад по-настоящему, а получает
тень по верхней и нижней кромке — как будто соседние слои нависают
над ним краями. Тень идёт в ::after вместе с вуалью, а не
box-shadow:inset: inset-тень рисуется под детьми, и ::before с
картинкой фона её бы закрыл.
Первый заход был слишком мягкий: тень начиналась с 78 % чёрного и
таяла за 120 точек — читалась как затемнение, а не как уступ.
Теперь строго по просьбе Павла «из черноты в прозрачное»: у самой
кромки сплошной чёрный, дальше долгий спад. Резкое начало и даёт
ощущение, что край соседнего слоя нависает прямо над блоком.
Светлого блика по кромке больше нет: на тёмном блоке он читался
швом между двумя блоками, а не подсвеченным ребром. */
#industries::after{
background:
linear-gradient(180deg, #000 0, rgba(0,0,0,.92) 10px, rgba(0,0,0,.52) 60px,
rgba(0,0,0,.2) 130px, rgba(0,0,0,0) 210px),
linear-gradient(0deg, #000 0, rgba(0,0,0,.92) 12px, rgba(0,0,0,.55) 66px,
rgba(0,0,0,.22) 140px, rgba(0,0,0,0) 225px),
/* Косая вуаль ослаблена вдвое: она была рассчитана на старый фон
в полсилы и вместе с ним давала сплошную темноту. Теперь фон
ярче, вуали остаётся только придержать светлые участки дерева
под текстом — иначе мелкие строки на них теряются. */
linear-gradient(100deg, rgba(6,14,11,.42), rgba(6,14,11,.2));
}
#industries{ box-shadow:none; }
/* ── Лежащий манекен на 5 точек выше ────────────────────────────
Посадка задана процентом (--ind-geko-drop:-76%), и трогать сам
процент нельзя: он считается от высоты фигуры и держит её позу
на всех экранах. Добавляем ровно пять точек отдельным слагаемым. */
#industries .ind-grid .ind-geko{
transform:translateY(calc(var(--ind-geko-drop) - 5px)) rotate(var(--ind-geko-tilt));
}
/* ── «В каталоге далеко не всё»: убираем провал над текстом ─────
Отступ в 158 точек был нужен, пока сверху в этот блок свисали лианы
с фона «Отраслей»: заголовок вплотную к ним не читался. Фон заменён
на обычный тёмный, свисать больше нечему — возвращаем нормальное
поле. */
#anything .an-head{ margin-top:clamp(26px, 3vw, 44px); }
/* ══════════════════════════════════════════════════════════════════
ГОРИЗОНТАЛЬНАЯ ГАРМОШКА ПРОДОЛГОВАТЫХ КАРТОЧЕК — ТОЛЬКО ТЕЛЕФОН
Пять мест на сайте: «Подарок удался» и «Что входит в выставочный
комплект» на «Корпоративах», «Что нужно от вас» на «Ивентах»,
«Что учесть при расчёте» на «Для команды», «Готовые наборы» на
«Новом годе». Три-четыре карточки, каждая высотой в экран: на
телефоне это была простыня на три-четыре прокрутки.
Как теперь: карточки стоят В РЯД. Одна раскрыта, остальные — тонкие
полосы с цифрой и одним словом вдоль. Ткнул в полосу — она
раскрылась, прежняя сжалась. Весь блок укладывается в один экран
по ширине и в одну карточку по высоте.
Класс .tri-garm ставит скрипт js/tri-garm.js и только на узком
экране; на широком его нет вообще. Плюс все правила ниже лежат в
медиазапросе — десктоп защищён с двух сторон.
Ширина раскрытой на экране 390: 390 − 28 поля − полосы по 34 −
зазоры по 6. Для трёх карточек это 278 точек, для четырёх — 238.
══════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
/* ПРЕДОХРАНИТЕЛЬ. Четвёрка карточек до сих пор оставалась в четыре
колонки на любом экране: правило .pg-tri--4 стоит в файле ПОСЛЕ
медиазапроса на 1100, той же силы, и перебивало его. На телефоне
это давало страницу шириной 815 точек при экране 390 — та самая
боковая прокрутка на «Корпоративах». Даже если скрипт гармошки не
доедет, в один столбец блок встанет. */
.pg-tri--4{ grid-template-columns:1fr; }
.pg-tri.tri-garm{
display:flex; flex-wrap:nowrap; align-items:stretch;
gap:6px; padding-inline:14px;
margin-block:clamp(26px, 6vw, 40px);
/* Высота ряда ФИКСИРОВАНА. Считает её скрипт: открывает каждую
карточку, меряет и берёт самую высокую. Иначе ряд подгоняется
под ту карточку, что сейчас раскрыта, и при каждом переключении
блок прыгает вверх-вниз вместе со всей страницей под ним. */
height:var(--tri-vys, auto);
}
/* На время замера переходы выключены: иначе мерялась бы карточка
в середине анимации. */
.pg-tri.tri-garm.tri-mer,
.pg-tri.tri-garm.tri-mer > .tri-card,
.pg-tri.tri-garm.tri-mer > .tri-card *{
transition:none !important; animation:none !important;
}
.pg-tri.tri-garm.tri-mer{ height:auto !important; }
/* Полоса в покое ровно 34 точки, раскрытая забирает весь остаток.
Анимируем flex-grow, а не ширину: в строке из трёх-четырёх
элементов только доля роста считается браузером без пересчёта
всей раскладки, поэтому переход идёт ровно и не дёргает соседей. */
.pg-tri.tri-garm > .tri-card{
flex:0 1 34px; min-width:34px; align-self:stretch;
border-radius:16px; cursor:pointer;
transition:flex-grow .44s cubic-bezier(.22,.9,.24,1);
/* Вертикальную прокрутку пальцем оставляем браузеру, боковой жест
забираем себе: иначе он то листает карточки, то нет — браузер
решает по-своему, что это была попытка прокрутки. */
touch-action:pan-y;
/* Свайп по карточке иначе тянет выделение текста: палец проехал —
половина абзаца подсвечена синим. */
-webkit-user-select:none; user-select:none;
}
.pg-tri.tri-garm > .tri-card.tri-on{ flex-grow:1; cursor:default; }
.pg-tri.tri-garm > .tri-card > .mbtn__body{ border-radius:14px; }
.pg-tri.tri-garm > .tri-card > .mbtn__rim{ border-radius:16px; }
/* Содержимое сжатой карточки выключено НАСОВСЕМ, а не спрятано
прозрачностью: в полосе 34 точки шириной абзац переносится по
одной букве и вытягивает всю строку карточек на несколько тысяч
точек в высоту. Высоту ряда задаёт раскрытая карточка, полосы
тянутся под неё. */
.pg-tri.tri-garm > .tri-card > .mbtn__body > .tri-foto,
.pg-tri.tri-garm > .tri-card > .mbtn__body > .tri-in{ display:none; }
.pg-tri.tri-garm > .tri-card.tri-on > .mbtn__body > .tri-foto{ display:block; }
.pg-tri.tri-garm > .tri-card.tri-on > .mbtn__body > .tri-in{ display:flex; }
/* Текст раскрытой появляется с задержкой — к тому моменту карточка
уже разъехалась, и строки не переползают на ходу. */
.pg-tri.tri-garm > .tri-card.tri-on > .mbtn__body > .tri-foto,
.pg-tri.tri-garm > .tri-card.tri-on > .mbtn__body > .tri-in{
animation:triPokaz .32s ease .16s both;
}
@keyframes triPokaz{ from{ opacity:0 } to{ opacity:1 } }
/* Кадр раскрытой ниже обычного: карточка теперь узкая и длинная,
и квадратный снимок съедал бы пол-экрана до первой строки. */
.pg-tri.tri-garm > .tri-card{ --tri-kadr:4 / 2.5; --tri-tochka:22%; }
.pg-tri.tri-garm .tri-in{
margin-top:-18px; padding:0 14px 16px;
}
.pg-tri.tri-garm .tri-in h3{ font-size:19px; margin-bottom:8px; }
.pg-tri.tri-garm .tri-in p{ font-size:13px; line-height:1.45; }
.pg-tri.tri-garm .tri-pl,
.pg-tri.tri-garm .page-sec .tri-pl{
grid-template-columns:1fr 1fr; gap:12px; padding-top:14px;
}
.pg-tri.tri-garm .tri-pl li{ font-size:10.5px; gap:7px; }
/* Ярлык полосы: цифра сверху, слово вдоль. Слово вертикально не из
красоты — в 34 точки горизонтально не влезает ни «Раздатка», ни
«Навигация», а сокращать подписи Павел не просил. */
.tri-yar{
position:absolute; inset:0; z-index:4;
display:flex; flex-direction:column; align-items:center;
gap:9px; padding:13px 0 14px;
pointer-events:none;
transition:opacity .2s ease .14s;
}
.tri-yar i{
flex:0 0 auto; font-style:normal;
/* Цифра стоит прямо: вертикальное письмо у соседней подписи —
её личное свойство, но браузер разворачивал заодно и цифру. */
writing-mode:horizontal-tb; text-orientation:mixed;
font-family:var(--font-display); font-weight:700;
font-size:13px; letter-spacing:.01em;
color:var(--mint, #8fe8c4); opacity:.92;
}
.tri-yar b{
writing-mode:vertical-rl; text-orientation:mixed;
font-weight:600; font-size:12.5px; letter-spacing:.05em;
color:rgba(238,244,241,.88); white-space:nowrap;
}
/* У раскрытой карточки ярлык не пропадает целиком: остаётся одна
цифра в боку. Без неё счёт рвётся — видно «2» и «3» на полосах, а
что раскрыта первая, догадывайся сам. Слово убираем: заголовок
карточки говорит то же самое и подробнее. */
.pg-tri.tri-garm > .tri-card.tri-on .tri-yar{
right:auto; width:34px;
transition-delay:0s;
}
.pg-tri.tri-garm > .tri-card.tri-on .tri-yar b{ display:none; }
.pg-tri.tri-garm > .tri-card.tri-on .tri-yar i{
padding:3px 7px 4px; border-radius:9px;
background:rgba(6,14,11,.5);
-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
/* Вне гармошки ярлык не существует: на широком экране карточка
обычная, и цифра поверх снимка там лишняя. */
}
.tri-yar{ display:none; }
@media (max-width:640px){
.pg-tri.tri-garm > .tri-card > .mbtn__body > .tri-yar{ display:flex; }
}
/* ── Та же четвёрка на планшете ─────────────────────────────────
Правило .pg-tri--4 стоит в файле после медиазапроса на 1100 и той
же силы, поэтому четыре колонки держались вплоть до самых узких
экранов. На планшете 700–1100 это давало страницу шириной 992 при
окне 700 — та же боковая прокрутка, что и на телефоне. Возвращаем
то, что задумано в блоке на 1100: одна колонка. Экраны шире 1100
не затронуты — там своя пара колонок. */
@media (max-width:1100px){
.pg-tri--4{ grid-template-columns:1fr; }
}
/* ── Задняя фигура блока работ не должна вылезать за экран ───────
На телефоне фигуры прижаты к правому краю (right:0), а доводка
--cs-back-dx:58px толкала заднюю ещё правее — главная получала
ширину 430 точек при экране 390 и ехала вбок. Доводка нужна была
для широкого экрана, где фигура стоит от левого края; на узком её
гасим. */
@media (max-width:640px){
#cases{ --cs-back-dx:0px; }
}
/* ══════════════════════════════════════════════════════════════════
МОБИЛЬНАЯ ВЕРСИЯ — ПРАВКИ ПАВЛА 19.09.2026
Всё, что ниже, живёт под 640 точками и не касается широкого экрана.
══════════════════════════════════════════════════════════════════ */
/* ── Пункты 1 и 12: крошки уступают место кнопке возврата ────────
Жалоба была одна и та же с двух сторон: «из внутренних страниц не
вернуться на главную» и «убери сверху ГЛАВНАЯ / КОРПОРАТИВЫ». На
телефоне строка пути бесполезна вдвойне: она занимает место, а
нажимать в ней нечего, кроме первого слова.
Разметку не трогаем: в крошках уже есть ссылка на главную и уже
стоит разметка Breadcrumb для поиска. Прячем хвост, а ссылку
превращаем в кнопку. Круг «М» остаётся звонком — Павел про звонок
не говорил, а отнимать нажатие у телефона студии нельзя. */
@media (max-width:640px){
.crumbs > span,
.crumbs > b{ display:none !important; }
.inner-main > .crumbs{ margin-bottom:0; }
.crumbs > a,
.has-hero .crumbs a{
display:inline-flex; align-items:center; gap:8px;
padding:9px 16px 9px 13px;
border:1px solid rgba(255,255,255,.16);
border-radius:100px;
background:rgba(10,18,15,.5);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
font-size:12.5px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase;
color:#eaf3ee; text-decoration:none;
}
.crumbs > a::before{
content:''; flex:0 0 auto;
width:14px; height:14px;
background:currentColor;
-webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m11 18-6-6 6-6'/%3E%3C/svg%3E") 50% / contain no-repeat;
mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m11 18-6-6 6-6'/%3E%3C/svg%3E") 50% / contain no-repeat;
}
}
/* ── Сквозное правило А: снимок раздела на первом экране ─────────
Снимок раздела (.pgh-deko) до сих пор выключался на всём, что уже
1100 точек: на широком экране он стоит справа от плашки, а на узком
вставать ему было некуда — плашка занимает всю ширину.
Павел просит вернуть его именно на телефоне: «с нашим изображением
на заднем фоне, прижатым в правый угол; что картинка не влезает
целиком — нормально». Так и делаем: полоса кадра сверху, правая
кромка снимка ровно по кромке экрана, левый край уходит за поле.
Низ растворяется, чтобы снимок не обрывался линией над плашкой.
Кадры широкие (3344×1882), поэтому при высоте 34% ширина выходит
около 510 точек — шире экрана, и это ровно то, что нужно: видно
правую часть кадра, а не всё подряд в марочный размер. */
@media (max-width:640px){
.pgh-deko{
display:block;
top:0; bottom:auto; right:0; left:auto;
height:clamp(190px, 34%, 320px);
opacity:.92;
-webkit-mask-image:linear-gradient(180deg, #000 52%, rgba(0,0,0,.45) 78%, transparent 100%);
mask-image:linear-gradient(180deg, #000 52%, rgba(0,0,0,.45) 78%, transparent 100%);
}
.pgh-deko img{ height:100%; width:auto; max-width:none; }
.pgh-deko[hidden]{ display:none !important; }
/* Плашка идёт поверх снимка — и должна быть плотнее обычного:
сквозь стекло на снимке текст читается хуже, чем на ровной
темноте. */
.pgh--plosk > .page-head.pgh-plashka{
background:rgba(9,16,13,.62);
}
/* Пункт 31: верхушка «Вопросов» была вдвое ниже соседних — 337
точек против 844. Поднимаем нижнюю границу; на остальных
страницах первый экран и так во весь экран, и правило до них не
дотягивается. */
.pgh--plosk{ min-height:clamp(430px, 66vh, 580px); }
}
/* ── Пункт 15: кружок больше не рвёт заголовок ───────────────────
«Ты очень дебильно разнёс текст» — и по делу. Кружок плавает у
кромки, а текст его обтекает начиная с заголовка. На широком экране
это красиво: заголовок длинный, обтекание читается как вёрстка
журнала. На 390 точках от заголовка слева остаётся полоска в два
слова — «Тираж и что с», дальше кружок, а «остатками» падает под
него отдельной строкой.
На телефоне обтекание отменяем целиком. Кружок встаёт своей
строкой и прижимается к той стороне, где стоял: у «Тиража» справа,
у «Доставки» слева — чередование, как и просил Павел. Заголовок и
абзацы идут во всю ширину. */
@media (max-width:640px){
.pg-para .pg-split{
display:flex; flex-direction:column;
}
.pg-para .pg-split > .pg-art--k{
float:none; width:min(54%, 196px);
margin:0 0 8px auto;
shape-outside:none;
}
.pg-para .pg-split.flip > .pg-art--k{
margin:0 auto 8px 0;
}
.pg-para .pg-split > .pg-txt{ width:100%; }
.pg-para .pg-split > .pg-txt > h2{ margin-top:6px; }
}
/* ── Сквозное правило Б: кружок опускается ниже заголовка ────────
Предмет в кружке нарисован крупнее самого кружка — голова манекена
выходит за круг вверх. На широком экране это и есть приём: фигура
как будто выступает из медальона. На телефоне кружок стоит сразу
под заголовком, и выступающая голова ложится ровно на подчёркивание
заголовка.
Двигаем не фигуру внутри круга (она посажена процентами и на всех
экранах одна), а весь кружок целиком — полем сверху. Пункты 18, 21
и 29 Павел назвал прямо, но встречается это на всех страницах
направлений, поэтому правило общее. */
@media (max-width:640px){
.page-sec.split > .pg-art,
.page-sec.split.flip > .pg-art{
margin-top:clamp(28px, 7vw, 44px);
}
/* Отдельно — кружок первого блока страниц направлений. Его нарочно
подтягивают вверх на 17.25 % высоты коробки: на широком экране
заголовок стоит слева, а пустая верхушка коробки заходит на его
строку, и круг встаёт вровень с текстом. На телефоне заголовок
идёт во всю ширину и стоит прямо над коробкой — тот же подъём
кладёт голову манекена на подчёркивание заголовка. Правило
сильнее общего (пять классов против трёх), поэтому гасить его
нужно так же прицельно. */
body.inner .posle-hero > .page-sec--fon.split > .pg-art--k{
margin-top:clamp(16px, 4vw, 28px);
}
}
/* ── Пункт 16: «Когда заказывать» — заголовок, кружок, текст ─────
Сейчас в разметке кружок стоит первым: так задумано для широкого
экрана, где текст огибает его начиная с заголовка. На телефоне
обтекания нет, и человек получает картинку раньше, чем узнаёт, о
чём блок.
Порядок переставляем показом, а не разметкой: широкому экрану
нужен прежний. */
@media (max-width:640px){
.page-sec.split.ps-srok{ display:flex; flex-direction:column; }
.page-sec.split.ps-srok > *{ order:3; }
.page-sec.split.ps-srok > h2{ order:1; margin-top:0; }
.page-sec.split.ps-srok > .pg-art--k{
order:2; float:none; margin:clamp(14px, 3vw, 22px) auto 8px;
shape-outside:none;
}
}
/* ── Пункты 2 и 10: крестик новогоднего окна ─────────────────────
«Он должен закрываться на крестик, в противном случае в нём нет
смысла». Обработчик на крестике стоял и работал — нажатие до него
не доходило.
Виновата сцена: слой снега .nyp-pop-dry растянут почти на всю её
ширину и краем накрывает правый низ крестика. Проверка показала
ровно это: в середине кнопки под пальцем кнопка, в правом нижнем
углу — снег. Отсюда и «не всё время трекается»: попал левее —
закрылось, попал в угол — нет.
Сцена целиком помечена aria-hidden, это декорация; нажатий ей не
нужно вовсе. Правило общее, не только для телефона: мышью тот же
угол так же мёртв, просто целиться проще. */
.nyp-pop-scene{ pointer-events:none; }
/* На телефоне крестик ещё и мелкий: 30 точек при рекомендованных
сорока четырёх. Увеличиваем зону нажатия, сам значок оставляем
прежним. */
@media (max-width:640px){
.nyp-pop-x{
top:14px; right:14px;
width:44px; height:44px;
background:rgba(6,14,18,.62);
}
.nyp-pop-x svg{ width:19px; height:19px; }
}
/* ── Пункт 4: переписка во всю ширину телефона ───────────────────
«Сейчас это просто чат в кусочке экрана». Так и было: на узком
экране рамку смартфона мы уже убирали, но сам блок оставался внутри
колонки с полями — переписка шириной 354 точки при экране 390 и
высотой в треть экрана.
Теперь блок выходит на всю ширину окна, а лента занимает столько,
сколько нужно настоящему чату.
Заодно убираем кнопку «назад» в шапке переписки. На широком экране
она осмысленна: там нарисован смартфон, и «назад» кладёт его на
экран блокировки — понятный жест. Без рамки телефона тот же жест
превращает блок в фотографию манекена без объяснений, и вернуться
можно только по уведомлению, которое ещё надо заметить. Это и есть
«непонятно, что к чему, особенно когда нажимаешь назад». */
@media (max-width:640px){
.fq-scene{
width:100vw; max-width:none;
margin-inline:calc(50% - 50vw);
}
.fq-phone{ border-radius:0; box-shadow:none; }
.fq-screen{ border-radius:0; box-shadow:none; }
.fq-lock{ border-radius:0; }
.fq-feed{ height:min(70vh, 620px); }
.fq-bar{ padding-inline:14px; }
.fq-msg{ max-width:90%; }
/* «Назад» и заставка на телефоне выключены. */
.fq-bar .fq-back{ display:none; }
}
/* Уведомление на заставке — не кнопка по разметке, и часть мобильных
браузеров нажатие по такому элементу до обработчика не доводит.
Указатель-палец здесь не украшение: именно он для них признак
того, что по элементу жмут. */
.fq-note{ cursor:pointer; -webkit-tap-highlight-color:rgba(255,255,255,.12); }
.fq-note:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; }
/* ── Пункт 5: блок опускается ниже ───────────────────────────────
Между перепиской и соседним блоком снизу оставался зазор, а сверху
она поджималась к предыдущему. Двигаем весь блок вниз — на телефоне
он и так идёт отдельным экраном. */
@media (max-width:640px){
#faq{ padding-top:clamp(26px, 7vw, 48px); }
}
/* ── Пункт 6: меню на телефоне ───────────────────────────────────
Было: три группы стоят колонкой у правого края, а раскрытая группа
выбрасывает пункты ВЛЕВО лесенкой, и каждый пункт своей ширины —
«Работы», «Новый год», «Вдохновение», «Блог» разъезжаются по всему
экрану ступеньками.
Просьба Павла: «Три группы стоят ГОРИЗОНТАЛЬНО в ряд. Нажал на
группу — её пункты разворачиваются ВЕРТИКАЛЬНО под самой этой
группой. Пункты выровнять по размеру.»
Так и делаем: ряд из трёх равных колонок во всю ширину, панель
пунктов висит под своей группой и вынута из потока — соседние
группы не съезжают. Крайние панели прижаты к своим краям, средняя
стоит по центру своей группы: иначе панель «О нас» уезжала бы за
правую кромку экрана.
Этот же удобный режим теперь используется на всех узких экранах
до 1000 px включительно. */
@media (max-width:1000px){
.hb-groups,
.hdr.is-menu .hb-groups,
.hdr.is-small .hb-groups{
left:14px; right:14px; width:auto;
display:grid; grid-template-columns:repeat(3, 1fr);
align-items:start; gap:7px;
}
.hb-grp{ display:block; position:relative; }
.hb-groups .hb-grp > .hb{ width:100%; }
.hb-groups .hb-grp > .hb .hb__body{
width:100%; justify-content:center; gap:5px;
padding-inline:9px;
font-size:12px; letter-spacing:.01em; white-space:nowrap;
}
/* Панель под своей группой. Ширина не уже самой группы, но и не уже
ста пятидесяти точек: «Корпоративы» в треть экрана не помещаются,
а переносить подписи в меню нельзя. */
.hb-panel{
position:absolute; top:calc(100% + 8px); left:0; right:auto;
width:max(100%, 152px);
flex-direction:column; align-items:stretch; gap:7px;
margin:0; padding:0;
}
.hb-grp:nth-child(2) .hb-panel{ left:50%; right:auto; margin-left:-76px; }
.hb-grp:nth-child(3) .hb-panel{ left:auto; right:0; }
/* Пункты одной ширины и без лесенки: дуга .hb-bow придумана для
колонки у края, в ровном списке она читается как брак. */
.hb-pit{
width:100%; --hb-dx:0px; --hb-bow:0px;
transform:translate(0, -8px) scale(.96);
}
.hb-grp.is-open .hb-pit{ transform:none; }
.hb-pit > .hb{ width:100%; }
.hb-pit .hb__body{ width:100%; justify-content:center; }
}
/* ── Пункт 8: спирали на первом экране возвращаются ──────────────
«На самом первом экране справа, у надписи "полный цикл", на
десктопе есть красивая штука вроде цепочки ДНК. Мне она всегда
нравилась. В мобильной версии её почему-то нет — вернуть.»
Выключили её мы сами и по делу: колонка спиралей 38 точек шириной,
а строки в карточке набраны моноширинным — на 390 точках экрана
каждая отнятая точка это буква, и строки начинали переноситься.
Возвращаем узкой: колонка 22 точки вместо 38, перекладина 12 вместо
18, ход точек по спирали ±6 вместо ±9 — иначе на узкой колонке они
выезжают за её края. Строкам остаётся почти столько же места,
сколько было. */
@media (max-width:640px){
.hello-card .helix{ display:block; width:22px; }
.hello-card .helix .rung{ width:12px; margin-left:-6px; }
.hello-card .helix .dot{ animation-name:helixTonkaya; }
.helix-scan{ width:16px; margin-left:-8px; }
}
@keyframes helixTonkaya{
0% { transform:translateX(0) scale(.6); opacity:.3; }
25% { transform:translateX(6px) scale(1); opacity:1; }
50% { transform:translateX(0) scale(.6); opacity:.3; }
75% { transform:translateX(-6px) scale(1); opacity:1; }
100% { transform:translateX(0) scale(.6); opacity:.3; }
}
/* ── Пункт 9: стоп-кадр без линии-выноски ────────────────────────
«Убрать линию-выноску. Оставить только точку трекинга и саму
надпись. Плашку с надписью опустить чуть ниже.»
Линия и узлы на ней — часть служебной обвязки видоискателя. На
широком экране она ведёт глаз от скобки к подписи через пустое
место кадра. На телефоне кадр узкий, подпись стоит почти вплотную
к скобке, и линия из указателя превращается в перечёркивающую
царапину.
Гасим линию и узлы, скобку и надпись оставляем — как и просил
Павел. Плашку опускаем на два с лишним десятка точек: она
поднималась к скобке как раз затем, чтобы линия была короче. */
@media (max-width:640px){
.co-lines,
.co-node{ display:none !important; }
.co-main{ margin-top:26px; }
}
/* ── Пункт 26: тёмный текст на тёмном ────────────────────────────
«Там же текст не читается — тёмный по тёмному.»
Осталось от прежнего устройства сильных слов. Тогда отмеченная
фраза заливалась мятным, и на тёмных блоках буквам полагался
почти чёрный цвет — иначе мятное на мятном. Потом заливку заменили
матовой подложкой, а правило про почти чёрные буквы осталось: оно
длиннее (три класса против двух) и перебивает новое color:inherit.
Итог был ровно такой, как увидел Павел: подложки нет, а буквы
красятся в #06100c поверх тёмного блока — фраза пропадает из
абзаца. Проверка показала у всех трёх слов background-image:none
при color:rgb(6,16,12).
Правка общая, не только для телефона: на широком экране те же
слова так же нечитаемы, просто мимо них чаще проскакивают. */
.page-sec.dark .hot.lit,
.dark-band .hot.lit,
.beyond .hot.lit,
.page-sec.dark .hot:hover,
.beyond .hot:hover,
.sec-dark .hot:hover{
color:inherit;
}
/* ── Пункт 25: «До какого числа мы успеваем» ─────────────────────
«Здесь всё очень криво сделано, прям всё.»
Строка таблицы — сетка из четырёх ячеек: название, дата приёма,
сколько осталось, почему так. На узком экране колонок оставалось
две, а ячейки раскладывались как придётся: название и дата в
первой строке, «56 дней» во второй слева, но прижатое вправо, а
пояснение под ними. Когда название переносилось на две строки —
«Шелкография, большой тираж», — счётчик уезжал ещё ниже, и таблица
рассыпалась.
Теперь место каждой ячейки назначено явно: слева название и под
ним пояснение, справа дата и под ней счётчик. Два ровных столбца
при любой длине названия. */
@media (max-width:640px){
.page-sec .ny-line{
grid-template-columns:minmax(0, 1fr) auto;
gap:3px 12px;
}
.page-sec .ny-name{ grid-column:1; grid-row:1; }
.page-sec .ny-date{ grid-column:2; grid-row:1; text-align:right; white-space:nowrap; }
.page-sec .ny-why { grid-column:1; grid-row:2; }
.page-sec .ny-left{ grid-column:2; grid-row:2; text-align:right; white-space:nowrap; }
}
/* ── Пункт 24: низ страницы из-под плашки кук ────────────────────
«Перекрывается стандартной плашкой, текст внизу прочитать
невозможно.» Плашка та самая — предупреждение о куках. На телефоне
она занимает 146 точек внизу экрана и накрывает последний столбец
подвала: «Связь», контакты, копирайт.
Двигаем не плашку, а подвал: пока предупреждение висит, снизу у
подвала появляется поле под её высоту. Ответили «Хорошо» — плашка
получает hidden, поле исчезает вместе с ней.
Заодно делаем саму плашку компактнее: на 390 точках она занимала
шестую часть экрана. */
@media (max-width:640px){
body:has(#cookieBar:not([hidden])) .site-foot{
padding-bottom:calc(150px + env(safe-area-inset-bottom, 0px));
}
.ck{ padding-block:12px 14px; }
.ck-text{ font-size:12.5px; line-height:1.45; }
}
/* ── Пункт 30: манекен в «О чём мы говорим честно» крупнее ───────
На телефоне сцена сжимается до квадрата с небольшим запасом по
высоте, и манекен в ней выходит мельче предметов, которые вокруг
него летают. Растягиваем саму сцену и уменьшаем верхнее поле —
фигура вырастает примерно на пятую часть, предметы остаются на
своих местах: они считаются в процентах от сцены. */
@media (max-width:640px){
.ok-fly{ aspect-ratio:1 / 1.26; }
.ok-fly .fly-m{ height:calc(100% - 20px); }
}
/* ── Пункт 33: снимок доставки крупнее и к правому углу ──────────
«Увеличить и прижать справа к углу.»
На телефоне снимок стоял по центру колонки шириной не больше 460
точек — то есть на 390-точечном экране это картинка в 350 точек с
полями по бокам. Теперь она шире экрана и правым краем уходит за
кромку, как на первых экранах: машина едет из угла.
Секцию на всякий случай обрезаем по горизонтали: сама по себе
картинка за правым краем прокрутку не создаёт (body на внутренних
страницах обрезан), но в этом блоке бывает разная верстка, и
обрезка здесь дешевле, чем разбираться потом. */
@media (max-width:640px){
.ps--dostavka{ overflow-x:clip; }
.ps--dostavka .kt-foto{
justify-content:flex-end;
margin-right:-20px;
}
.ps--dostavka .kt-foto img{
width:min(560px, 126%);
margin-inline:auto 0;
}
}
/* ══════════════════════════════════════════════════════════════════
ВТОРАЯ ПОРЦИЯ ПРАВОК ПАВЛА — ТЕЛЕФОН
══════════════════════════════════════════════════════════════════ */
/* ── Снимок раздела во весь первый экран ─────────────────────────
«Она должна быть на весь экран, пофигу, что там половину из этого
видно не будет, нам нужно просто эффект.»
Было полосой сверху на треть высоты. Теперь кадр занимает экран
целиком: высота 100 %, правая кромка ровно по краю окна, левая
уходит далеко за поле — кадры широкие, 16:9, и при высоте экрана
их ширина выходит вчетверо больше самого экрана. Так и задумано:
видно правую часть сцены крупно, а не всю мелко. */
@media (max-width:640px){
.pgh-deko{
top:0; bottom:0; right:0; left:auto;
height:100%;
opacity:.9;
-webkit-mask-image:linear-gradient(180deg, #000 74%, rgba(0,0,0,.5) 90%, transparent 100%);
mask-image:linear-gradient(180deg, #000 74%, rgba(0,0,0,.5) 90%, transparent 100%);
}
.pgh-deko img{ height:100%; width:auto; max-width:none; }
}
/* ── Кнопка возврата: та же, что «К делу» и «Наверх» ─────────────
Своя пилюля в строке крошек Павлу не понравилась, и правильно:
на сайте уже есть кнопка ровно для этого — контекстная в шапке.
На ролике она «К делу», на главной ниже первого экрана «Наверх»,
на внутренних страницах «На главную». Её и включаем: тот же металл,
тот же ряд, то же место, ничего нового человеку запоминать не надо.
Прятали её на узких экранах потому, что ряд шапки не помещался.
Теперь помещается: строку крошек мы убрали целиком, а она занимала
отдельную строку под шапкой. */
@media (max-width:640px){
.hb-ctx{ display:flex; }
/* Крошек на телефоне нет вовсе — ни строкой пути, ни кнопкой.
Селектор без родителя: крошки лежат внутри первого экрана, а не
прямо в main, и правило через .inner-main до них не доставало. */
.crumbs{ display:none !important; }
/* Четыре кнопки в ряд на 390 точках помещаются впритык: знак,
«На главную», «Меню» и «Узнать цену». Ужимаем кегль и поля —
иначе продающая кнопка уезжает за правую кромку. */
.hdr .hb-ctx .hb__body,
.hdr .hb-menupill .hb__body,
.hdr .hb-cta .hb__body{
font-size:12px; padding-inline:11px; letter-spacing:0;
}
.hdr-in{ gap:7px; }
.hdr{ padding-inline:11px; }
}
/* ── Текст заходит на кружок ─────────────────────────────────────
«Сделай так, чтобы текст находил на этот шарик. Шарик сделай
большой, не обязательно, чтобы он весь на экран помещался. Сделай
подложку под текст.»
Кружок перестаёт быть строкой в потоке и становится фоном: он
вынут из потока, увеличен почти вдвое и выходит за кромку экрана.
Текст ложится поверх его нижней части на матовой подложке — той
же, что под сильными словами: на светлом блоке светлая, на тёмном
тёмная.
Два места с этой разметкой: «Тираж и что с остатками» и «Доставка
прямо на площадку» на «Корпоративах». Сторона у каждого своя —
чередование, как и договаривались. */
@media (max-width:640px){
/* Обрезка обязательна: кружок вынесен за кромку на четверть своей
ширины, и без неё страница получает боковую прокрутку — браузер
на телефоне тут же расширяет раскладку под неё, и ряд шапки
разъезжается вместе со всем остальным. Режем только по
горизонтали, чтобы верх кружка остался виден. */
/* Место под кружок отдаём полем самого блока. Поле задано в
процентах, а проценты вертикального поля считаются от ШИРИНЫ
родителя — значит оно меняется вместе с кружком, который тоже
задан в процентах ширины. 64 % — это чуть выше нижней кромки
круга: заголовок ложится на него, а абзацы начинаются уже под
ним. */
.pg-para .pg-split{
position:relative; display:block; overflow-x:clip;
padding-top:64%;
}
.pg-para .pg-split > .pg-art--k{
position:absolute; z-index:0; margin:0;
top:-6px; right:-12%; left:auto;
width:84%;
pointer-events:none;
}
.pg-para .pg-split.flip > .pg-art--k{ right:auto; left:-12%; }
.pg-para .pg-split > .pg-txt{
position:relative; z-index:1;
margin-top:0; padding:0; background:none; box-shadow:none;
-webkit-backdrop-filter:none; backdrop-filter:none;
}
/* Плашка ТОЛЬКО под заголовком.
Ширина 70 % — это ровно до середины кружка: кружок 84 % ширины
блока и сдвинут за кромку на 12 %, значит его центр приходится
на 70 % (1.12 − 0.84/2 = 0.70). Заголовок кончается точно на
центре круга, когда круг справа, и начинается от центра, когда
круг слева. */
.pg-para .pg-split > .pg-txt > h2{
display:block; box-sizing:border-box;
width:70%; margin:0 0 14px;
padding:11px 15px 12px;
border-radius:16px;
background:var(--nakl-fon, rgba(255,255,255,.86));
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
box-shadow:0 10px 26px rgba(12,26,20,.18);
}
.pg-para .pg-split.flip > .pg-txt > h2{ margin-left:30%; }
/* Сам текст плашки не получает: он идёт ниже кружка, по чистому
фону страницы, как везде. */
.pg-para .pg-split > .pg-txt > p{ margin-top:0; }
}
/* То же самое на первом блоке страниц направлений: «Почему это
отдельное направление» на «Ивентах» и «Ежедневная одежда» на
«Для команды». Разметка здесь плоская — заголовок и абзацы лежат
прямо в секции, обёртки для них нет. Поэтому подложку получает
каждый из них, а нулевые поля между ними склеивают их в одну
плашку: соседние элементы с одинаковым фоном и без зазора дают
ровный прямоугольник. */
@media (max-width:640px){
/* Обрезка по горизонтали обязательна — как и в блоках «Тиража»:
кружок выходит за правую кромку почти на четверть ширины, и без
неё страница получает боковую прокрутку. Общее правило
.page-sec.split{overflow:hidden} сюда не доходит: у этих секций
свой фон, и оно им переопределено. */
body.inner .posle-hero > .page-sec--fon.split{
position:relative; overflow-x:clip;
}
body.inner .posle-hero > .page-sec--fon.split > .pg-art--k{
position:absolute; z-index:0; margin:0;
top:0; right:-12%; left:auto;
width:84%;
pointer-events:none;
}
/* Плашка только под заголовком, ширина до середины кружка — та же
арифметика, что и в блоках «Тиража»: 1.12 − 0.84/2 = 0.70.
Верхнее поле в процентах считается от ширины секции, поэтому
заголовок опускается вместе с кружком на любом экране. */
body.inner .posle-hero > .page-sec--fon.split > h2{
position:relative; z-index:1;
display:block; box-sizing:border-box;
width:70%;
margin:64% 0 16px !important;
padding:11px 15px 12px;
border-radius:16px;
background:var(--nakl-fon, rgba(255,255,255,.86));
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
box-shadow:0 10px 26px rgba(12,26,20,.18);
}
/* Текст идёт ниже кружка и никакой подложки не получает. */
body.inner .posle-hero > .page-sec--fon.split > p,
body.inner .posle-hero > .page-sec--fon.split > ul,
body.inner .posle-hero > .page-sec--fon.split > ol{
position:relative; z-index:1;
background:none; box-shadow:none;
-webkit-backdrop-filter:none; backdrop-filter:none;
padding-inline:0;
}
}
/* Тёмные блоки: подложка под текстом должна быть тёмной, иначе она
светится посреди чёрного. Значение то же, что у сильных слов. */
.page-sec.dark,
.dark-band,
.beyond,
.sec-dark,
.ps--tmn,
.ps--tem{
--nakl-fon:rgba(8, 16, 12, .8);
}
/* ── Крестик новогоднего окна: зона нажатия больше самой кнопки ──
Сам крестик 44 точки — это норма, но окно закрывается одним
нажатием и другого способа у него нет, поэтому зона щедрая:
невидимое поле вокруг кнопки добавляет по десять точек с каждой
стороны. Промахнуться мимо 64 точек пальцем уже трудно. */
.nyp-pop-x{ position:absolute; }
.nyp-pop-x::after{
content:''; position:absolute; inset:-10px; border-radius:50%;
}
/* ── Минимальный тираж: число вверху, единица внизу ──────────────
«От 30 штук» стояло одной строкой с номером карточки, а в правом
верхнем углу той же строки абсолютной ссылкой сидит «Подробнее о
направлении». На узкой карточке строка тиража доходила до 150
точек, ссылка занимала справа 190 — и они налезали друг на друга.
Первым это видно на карточке 02.
Правка Павла: вверху рядом с номером остаётся только «от 30»,
а слово — «штук», «комплектов» — уходит вниз карточки, в то самое
пустое место, которое там и так было.
Правило общее, на всех экранах: и на телефоне, и на широком. */
.dir-min{ margin-left:.5em; }
/* ПОПРАВКА. Единица уезжала в самый низ карточки — «а ты поставил
вот эти вот комплекты в самый низ». Слово должно стоять прямо под
строкой «01. от 30», как её вторая строка: это одна мысль, и читать
её через всю карточку неоткуда.
margin-top:auto убран — он и прижимал слово к низу колонки. Теперь
обычная строка следом за номером, а заголовок идёт после неё. */
.dir-ed{
display:block; margin:2px 0 0; padding:0;
font-family:var(--hud-mono); font-size:11px; letter-spacing:.2em;
text-transform:uppercase; color:var(--l-dim);
}
/* Место под ссылку в строке номера теперь нужно меньше: строка
тиража стала вдвое короче. Оставляем запас ровно под саму ссылку. */
.dir .dir-no{ padding-right:clamp(120px, 13vw, 170px); }
/* На тёмных карточках единица берёт тот же приглушённый тон, что и
остальная служебная мелочь. */
.sec-dark .dir-ed,
.dark-band .dir-ed{ color:rgba(243,246,244,.55); }
/* ── Настоящий смартфон в блоке «Что обычно спрашивают» ──────────
Правка Павла: «на мобильной версии нужно прям телефон нарисовать
полноценный, это элемент декора».
Рамку убирали на узком экране нарочно — «смартфон внутри смартфона
выглядит странно». На деле вышло наоборот: без рамки блок потерял
всякий смысл, а заставка с манекеном стала непонятной картинкой.
Возвращаем аппарат целиком: титановый кант, чёрная кромка стекла,
боковые кнопки, остров, строка состояния и полоска home.
Как он масштабируется. Телефон свёрстан в натуральную величину —
390×800, логические точки iPhone 15 Pro, — и уменьшается свойством
zoom, а не transform: zoom пересчитывает саму вёрстку, и текст
остаётся чётким. Ступени подобраны так, чтобы по бокам оставалось
поле, а высота помещалась в экран:
до 640 — 0.92 (на 430 точках аппарат 359, поля по 35);
до 400 — 0.88 (на 390 точках 343, поля по 23);
до 375 — 0.84 (на 360 точках 328, поля по 16);
до 340 — 0.76 (на 320 точках 296, поля по 12).
Высота при 0.88 выходит 704 точки — помещается даже в короткие
экраны. */
@media (max-width:640px){
/* Корпус возвращается целиком — на 820 его разбирали по частям. */
.fq-phone{
width:390px; height:800px;
padding:12px; border-radius:56px;
background:
linear-gradient(160deg,#e8ece9 0%,#8f9a95 14%,#4a534f 30%,#8f9a95 50%,
#3f4744 70%,#98a29d 86%,#dfe4e1 100%);
box-shadow:
0 0 0 1px rgba(255,255,255,.16),
0 2px 3px rgba(0,0,0,.5),
0 40px 80px -28px rgba(0,0,0,.55),
0 18px 40px -20px rgba(0,0,0,.4);
zoom:.92;
}
.fq-phone::before,
.fq-phone::after{ display:block; }
.fq-key{ display:block; }
.fq-island{ display:block; }
.fq-status{ display:flex; }
.fq-home{ display:block; }
/* Экран внутри корпуса — на всю его высоту, со своим скруглением. */
.fq-screen{
height:100%; border-radius:45px; box-shadow:none;
}
.fq-lock{ border-radius:45px; }
/* Лента снова занимает остаток экрана аппарата, а не свою долю
высоты окна: высота телефона теперь задана жёстко. */
.fq-feed{ height:auto; flex:1; padding-top:0; }
/* Аппарат по центру блока. */
.fq-fly{ display:flex; justify-content:center; }
/* Поля внутри экрана возвращаем к настольным: шапка переписки
сидит в корпусе, а не по кромке окна. */
.fq-bar{ padding:6px 15px 11px; }
.fq-msg{ max-width:80%; }
/* Кнопка «назад» снова имеет смысл: рамка на месте, и заставка
читается как экран блокировки телефона, а не как случайная
фотография. */
.fq-bar .fq-back{ display:flex; }
/* Сцена больше не тянется во всю ширину окна — по бокам аппарата
должен быть виден фон блока. */
.fq-scene{ width:auto; max-width:none; margin-inline:0; }
}
@media (max-width:400px){ .fq-phone{ zoom:.88; } }
@media (max-width:375px){ .fq-phone{ zoom:.84; } }
@media (max-width:340px){ .fq-phone{ zoom:.76; } }
/* ══════════════════════════════════════════════════════════════════
ТРЕТЬЯ ПОРЦИЯ ПРАВОК ПАВЛА — ТЕЛЕФОН
══════════════════════════════════════════════════════════════════ */
/* ── Ветка в «Под какую задачу нужен мерч» ниже на сто точек ─────
Передняя ветка прижата нижней кромкой к низу блока. На телефоне
она читалась висящей слишком высоко — опускаем ровно на сотню.
Двигаем посадкой (bottom), а не transform: transform у неё занят
покачиванием, и любое значение там анимация перетрёт. Блок режет
своих детей, поэтому ушедшая за кромку часть просто обрезается. */
@media (max-width:640px){
#directions .seam-strip{ bottom:-100px; }
}
/* ── Манекены в «Что мы уже сделали»: группу вправо и ниже ───────
Взаимное положение фигур трогать не надо — оно правильное с самого
начала. Двигаем ОБЕ как одну группу: вправо за кромку и вниз, чтобы
передняя фигура садилась на верхний угол первой карточки.
Вправо — полем справа у слоя (фигуры прижаты к правому краю сетки),
вниз — уменьшением подъёма над сеткой. Секция обрезана по
горизонтали, поэтому выход за кромку прокрутки не даёт. */
@media (max-width:640px){
#cases{ --cs-rise:84px; --cs-back-dx:64px; }
#cases .case-stage{ overflow-x:clip; overflow-y:visible; }
#cases .case-geko{ right:26px; }
}
/* ── «Новый год»: стартовый блок выше нижней панели ──────────────
Заголовок и лид первого экрана прижаты к его низу (align-self:end),
и снизу их накрывает плашка кук — 146 точек. На других страницах
текст стоит выше, поэтому проблема только здесь.
Поднимаем весь блок текста полем снизу. Значение с запасом: плашка
кук плюс кнопка Мерчи плюс воздух. Когда плашку закроют, внизу
останется снег и ёлка — там пусто и по замыслу. */
@media (max-width:640px){
.nyp-head{ padding-bottom:clamp(170px, 24vh, 220px); }
}
/* ── «Контакты»: снимок доставки ещё на полсотни вправо ──────────
Размер Павла устраивает, нужен только сдвиг. Двигаем сам снимок,
а не контейнер: контейнер прижимает его к правому краю, и любое
поле у контейнера меняло бы и ширину. За кромку выйти можно —
секция обрезана по горизонтали, прокрутки не будет. */
@media (max-width:640px){
.ps--dostavka .kt-foto img{ transform:translateX(50px); }
}
/* ══════ БОТЫ В TELEGRAM И MAX ═══════════════════════════════════
Ссылки на клиентских ботов по всему сайту. Разметку кнопок кладёт
js/boty.js — там же список меток и объяснение, где что стоит.
Кнопки — наши обычные металлические .mbtn. Пара всегда одинаковой
ширины, как бы ни отличались надписи: сетка на две равные колонки,
кнопка растянута на свою колонку (правка Павла). */
.mbtn--bot .mbtn__body{ gap:10px; white-space:nowrap; }
.mbtn--bot img,
.mbtn--bot svg{ width:24px; height:24px; flex:none; display:block; }
.bk-knopki{
display:grid; grid-template-columns:1fr 1fr; gap:12px;
width:min(100%, 380px);
}
.bk-knopki > .mbtn{ width:100%; min-width:0; }
.bk-knopki > .mbtn .mbtn__body{ width:100%; padding-inline:16px; }
/* Подпись над парой («или обсудить в»). Отступ сверху — отрыв от
главной кнопки: подпись относится к паре под ней, а не к ней. */
.bk-ili{
display:block; margin:20px 0 10px;
font-size:14.5px; line-height:1.3; opacity:.8;
}
/* ── «Контакты»: пара кнопок внизу карточки «Телефон» ─────────── */
.ct-card .bk-mesto{
display:flex; justify-content:center;
margin-top:18px;
}
/* ── подвал: значки без подложки, под номером ─────────────────── */
.bk-znaki{ display:flex; gap:16px; margin-top:14px; }
.bk-znaki a{ display:block; line-height:0; border-radius:8px;
transition:transform .2s, opacity .2s; }
.bk-znaki a:hover{ transform:translateY(-2px); }
.bk-znaki img{ width:30px; height:30px; display:block; }
/* ── внизу страниц направлений и 404: под главной кнопкой ─────── */
.bk-cta-kol{ display:flex; flex-direction:column; align-items:center; }
.bk-cta-kol .bk-mesto{ display:flex; flex-direction:column; align-items:center; width:100%; }
/* ── «Отследить заказ» ────────────────────────────────────────── */
.bk-sled{
position:relative;
width:100%; max-width:1180px; box-sizing:border-box;
margin:0 auto; padding:clamp(40px, 6vw, 80px) 20px;
color:var(--l-ink, #101613);
}
.bk-sled .eyebrow-l{ display:block; margin-bottom:10px; }
.bk-sled h2{
margin:0; font-family:var(--font-display); font-weight:700;
font-size:clamp(26px, 3.2vw, 44px); line-height:1.08; letter-spacing:-.035em;
}
.bk-sled h2 em{ font-style:normal; color:var(--mint-ink, #12855a); }
.bk-sled > p{
margin:14px 0 0; max-width:56ch;
font-size:clamp(15px, 1.25vw, 18px); line-height:1.6; color:var(--l-dim, #4d5a54);
}
.bk-shagi{
list-style:none; margin:clamp(22px, 3vw, 34px) 0; padding:0;
display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
counter-reset:bk;
}
.bk-shagi li{
position:relative; display:flex; align-items:center;
min-height:76px; padding:16px 18px 16px 66px; box-sizing:border-box;
border-radius:18px; background:#fbfdfc;
border:1px solid rgba(16,22,19,.08);
box-shadow:0 10px 26px rgba(16,40,30,.06);
font-size:16px; line-height:1.4; color:var(--l-ink, #101613);
}
.bk-shagi li::before{
counter-increment:bk; content:counter(bk);
position:absolute; left:16px; top:50%; transform:translateY(-50%);
width:36px; height:36px; border-radius:50%;
background:var(--mint, #8fe8c4); color:#06170f;
font:700 15px/36px var(--font-display); text-align:center;
}
.bk-sled .bk-mesto{ display:flex; }
/* На главной блок стоит между полноэкранными сценами — ему нужна
своя светлая полоса во всю ширину, как у «Четырёх шагов». */
.bk-sled-polosa{ position:relative; z-index:2; background:#eef2ec; }
@media (max-width:760px){
.bk-shagi{ grid-template-columns:1fr; }
.bk-sled .bk-mesto{ justify-content:center; }
}
/* ── блог: «Остались вопросы?» после статьи ───────────────────── */
.bk-blog{
max-width:700px; box-sizing:border-box;
margin:0 auto clamp(30px, 5vw, 56px);
padding:clamp(22px, 3vw, 32px);
border-radius:22px; background:#0f1a15; color:#f3f6f4;
text-align:center;
}
.bk-blog h2{
margin:0 0 8px; font-family:var(--font-display); font-weight:700;
font-size:clamp(20px, 2.4vw, 26px); line-height:1.15; letter-spacing:-.03em;
color:var(--mint, #8fe8c4);
}
.bk-blog p{ margin:0 auto 18px; max-width:44ch; opacity:.82; font-size:15.5px; line-height:1.55; }
.bk-blog .bk-knopki{ margin:0 auto; }
@media (max-width:760px){ .bk-blog{ margin-left:16px; margin-right:16px; } }
/* ── окно заявки: строка под формой и «спасибо» ───────────────── */
#mz-okno .bk-forma{
margin:14px 0 0; padding:14px 0 0;
border-top:1px solid var(--mz-line);
text-align:center;
}
#mz-okno .bk-forma p{ margin:0 0 10px; font-size:13.5px; color:var(--mz-muted); }
#mz-okno .bk-mz-para{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#mz-okno .bk-mz-para .mz-send{ width:100%; margin:0; text-decoration:none; }
#mz-okno .bk-mz-para .mz-send > span{
display:flex; align-items:center; justify-content:center; gap:9px;
padding-inline:12px; white-space:nowrap;
}
#mz-okno .bk-mz-para img{ width:24px; height:24px; flex:none; }
/* Под формой кнопки вторичные: главная там «Отправить заявку».
Селектор на ступень сильнее: стили окна лежат в самой странице
после main.css и при равной силе перебивают. */
#mz-okno .bk-forma .bk-mz--svet > span{ background:#fff; color:var(--mz-ink); }
#mz-okno .bk-forma .bk-mz--svet:hover > span{ background:var(--mz-dark); color:var(--mz-mint); }
#mz-okno .bk-spasibo{ margin:0 0 12px; }
#mz-okno .bk-zakryt{
background:none; border:0; padding:6px 10px; cursor:pointer;
font:inherit; font-size:14px; color:var(--mz-muted);
text-decoration:underline; text-underline-offset:3px;
}
@media (max-width:360px){ #mz-okno .bk-mz-para{ grid-template-columns:1fr; } }
/* ── окно «Как удобнее связаться?» ────────────────────────────── */
.bk-tel{
position:fixed; inset:0; z-index:9998;
display:flex; align-items:center; justify-content:center; padding:16px;
background:rgba(8,14,11,.66);
-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.bk-tel[hidden]{ display:none; }
.bk-tel-karta{
position:relative; width:100%; max-width:380px; box-sizing:border-box;
padding:28px 24px 24px; border-radius:22px;
background:#fbfdfc; color:#101613; text-align:center;
box-shadow:0 34px 90px rgba(0,0,0,.45);
}
.bk-tel-x{
position:absolute; top:12px; right:12px; width:38px; height:38px;
display:grid; place-items:center; border:0; border-radius:50%;
background:rgba(16,22,19,.06); color:#4d5a54; cursor:pointer;
}
.bk-tel-x:hover{ background:var(--mint, #8fe8c4); color:#06170f; }
.bk-tel h3{
/* поля по бокам — место под крестик, чтобы заголовок в него не упирался */
margin:4px 0 10px; padding:0 40px; font-family:var(--font-display); font-weight:700;
font-size:clamp(17px, 4.6vw, 20px); letter-spacing:-.03em; text-wrap:balance;
}
.bk-tel-nomer{
display:block; font-size:22px; font-weight:600; color:#101613;
text-decoration:none; font-variant-numeric:tabular-nums;
}
.bk-tel-chasy{ margin:6px 0 18px; font-size:13.5px; line-height:1.45; color:#4d5a54; }
.bk-tel-knopki{ display:grid; gap:10px; }
.bk-tel-knopki > .mbtn{ width:100%; }
.bk-tel-knopki > .mbtn .mbtn__body{ width:100%; }
@media (max-width:560px){
/* На телефоне — листом снизу, под большой палец. */
.bk-tel{ align-items:flex-end; padding:0; }
.bk-tel-karta{ max-width:none; border-radius:22px 22px 0 0;
padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:no-preference){
.bk-tel:not([hidden]) .bk-tel-karta{ animation:bk-vsplyv .22s cubic-bezier(.2,.8,.3,1); }
@keyframes bk-vsplyv{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
}
/* ── Мерчи: две ссылки на менеджера в ленте чата ──────────────── */
.mch-lenta .bk-mch{
display:flex; flex-direction:column; gap:8px; align-self:stretch;
margin:2px 0 6px;
}
.mch-lenta .bk-mch a{
display:flex; align-items:center; gap:10px;
padding:9px 14px; border-radius:999px;
background:#fff; border:1px solid rgba(16,22,19,.14);
color:#101613; font:600 13.5px/1.2 inherit; text-decoration:none;
transition:border-color .2s, background-color .2s;
}
.mch-lenta .bk-mch a:hover{ border-color:#12855a; background:#f2faf6; }
.mch-lenta .bk-mch img{ width:22px; height:22px; flex:none; }
/* ── подпись автора в самом низу подвала ────────────────────────────
«Сделано» + знак + подпись + телефон. Тише строки © над ней:
это служебная пометка, а не часть навигации. */
.fo-avtor{
width:min(var(--sec-w), 100%); margin:14px auto 0;
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:6px 14px;
font-size:12px; color:rgba(255,255,255,.4);
}
.fo-avtor-znaki{ position:relative; display:inline-block; }
/* знак — декоративный «апостроф» справа сверху над «Си» */
.fo-avtor-znak{ position:absolute; top:-7px; right:-5px; width:auto; height:12px; opacity:.75; }
.fo-avtor-podpis{ display:block; width:auto; height:40px; opacity:.8; margin:-4px 0; }
.fo-avtor-tel{
color:rgba(255,255,255,.55); text-decoration:none;
font-variant-numeric:tabular-nums; white-space:nowrap;
transition:color .2s ease;
}
.fo-avtor-tel:hover, .fo-avtor-tel:focus-visible{ color:var(--mint); }
.fo-avtor img{ -webkit-user-drag:none; user-select:none; }
/* Реквизиты оператора в подвале и на странице контактов. */
.fo-legal{
width:min(var(--sec-w), 100%); margin:clamp(24px, 3vw, 36px) auto 0;
padding-top:16px; border-top:1px solid rgba(255,255,255,.12);
font-size:12px; line-height:1.55; color:rgba(255,255,255,.55);
}
.fo-line{ margin-top:16px; }
@media (max-width:640px){
.fo-legal{ margin-top:20px; }
}