/* ========================================================================== V4 «Пульт с осью» — композиция варианта. Общие файлы (tokens.css, base.css) этот вариант не трогает: здесь только его каркас, шапка, первый экран, правая ось и заглушки секций. Правила, которые нельзя нарушить: · каждый собственный кегль домножается на ту ручку, чьей гарнитурой набран элемент (--khead для --f-display, --ktext для --f-text, --kui для --f-ui); · движение делает сама прокрутка (animation-timeline), обработчиков на каждый кадр нет; без поддержки и при prefers-reduced-motion всё видно; · ось декоративна: aria-hidden, pointer-events: none, живёт в безопасном поле справа и ни на одной ширине не заходит на контент. ========================================================================== */ :root { /* Фактическая высота шапки. От неё считаются якорные отступы и верх оси, поэтому она переменная, а не число в трёх местах. */ --v4-head-h: 64px; /* Нижняя граница основного текста V4 — 16 px после всех множителей (§11.2). Общий --t-sm даёт 15 px: он рассчитан на сноски и подписи, а не на предложения, которые читают. Множитель --ktext обязателен — иначе размер молча выпадет из регулировки кегля. */ --v4-t-read: max(1rem, calc(1rem * var(--ktext))); /* Цель нажатия §16. Высоту добираем паддингом и min-height, кегль подписей при этом не трогаем. */ --v4-tap: 44px; /* Воздух секции сверху и снизу. Своя мера вместо общего --s10 (96-160 px): задача владельца 11.08.2026 — каждый лист страницы должен умещаться в экран телефона, а два поля по 96 px съедали почти четверть его высоты. Секции от этого не слипаются: полосу между ними держат ещё и собственные фоны (--sink у тарифов, лайм у финала) и волосяные линии. С 12.08.2026 поле ещё вдвое меньше: владелец показал снимок пустого промежутка между таблицей и «Выберите срок» и попросил такой же зазор, как перед первым экраном (там 16 px). На телефоне между секциями теперь 48 px вместо 96, на 1440 px — 86 вместо 115. */ --v4-sec-pad: clamp(24px, 4vw, 72px); /* Отбивка от заголовка секции до её содержимого — одна на все секции, иначе они начинают расходиться по ритму при правках высоты. */ --v4-sec-gap: clamp(20px, 4.5vw, 48px); } /* Уменьшенная шапка. Класс ставит v4.js с гистерезисом; без JS шапка остаётся крупной, и это ничего не ломает. */ html.v4-head-small { --v4-head-h: 52px; } /* --- Шапка --------------------------------------------------------------- */ /* Переход по min-height и padding детектор помечает как анимацию раскладки, и в общем случае он прав. Здесь исключение осознанное: шапка меняет размер не покадрово при прокрутке, а один раз на переходе через порог с гистерезисом 32 px — за весь сеанс это единицы переключений, а не 60 в секунду. Заменить их на transform нельзя: шапка должна отдавать полосу контенту, а сжатие трансформацией высоту потока не меняет и текст полез бы под шапку. */ .v4-head .site-head__in { min-height: var(--v4-head-h); transition: min-height var(--d2) var(--e-out); } .v4-head .logo__paw { transition: width var(--d2) var(--e-out), height var(--d2) var(--e-out); } /* Полоса под шапкой появляется только после первого движения прокрутки (решение владельца 12.08.2026: «первая страница максимально чистая, при первом свайпе полоса появляется»). Убираем цветом, а не толщиной: нулевая граница сдвинула бы содержимое на пиксель в момент появления полосы. Класс на ставит v4.js от 4 px прокрутки. Правило живёт здесь, а не в base.css: тот общий, и полоса пропала бы заодно у V1–V3.1. При выключенном JS полоса стоит всегда — тогда её появиться некому. */ .v4-head { border-bottom-color: transparent; transition: border-color var(--d2) var(--e-out); } html.v4-scrolled .v4-head { border-bottom-color: var(--line); } @media (scripting: none) { .v4-head { border-bottom-color: var(--line); } } /* Сжатие шапки двигает высоту и поля кнопки. Три последних перехода — переписанный список из base.css: `transition` здесь сокращение, и без них оно молча отменяет отрыв кнопки от плиты. Кнопка шапки обязана вести себя ровно как «Взять три дня бесплатно» (правка владельца 12.08.2026), а без этих строк она перепрыгивала бы в наведённое состояние без анимации. */ .v4-head__cta { transition: min-height var(--d2) var(--e-out), padding var(--d2) var(--e-out), transform var(--d1) var(--e-out), background-color var(--d1) linear, box-shadow var(--d1) var(--e-out); } /* --- Знак в две строки ---------------------------------------------------- */ /* Бренд сверху, адрес сайта под ним. Части красятся по отдельности ручками панели: переменные объявлены в tokens.css, применяются здесь — в остальных вариантах адреса под знаком нет и применять нечего. */ /* Крупность знака (решение владельца 10.08.2026: «как можно крупнее»). Потолок задаёт кнопка «Войти» — самый высокий предмет шапки: 44 px цели нажатия плюс поля, фактически ~46 px. Знак упирается в 44 px и на этом останавливается, поэтому у шапки в 64 px остаётся зазор по 10 px сверху и снизу, а по горизонтали до кнопки не доходит ни на одной ширине. Три габарита — лапа, бренд, адрес — и один общий множитель `--v4-logo-k` для сжатой шапки. Множитель вынесен отдельно, чтобы сжатие не требовало переписывать все три числа в каждом медиазапросе: базовые размеры меняет ширина экрана, а прокрутка — только множитель. Кегли домножаются на --kui: иначе знак молча выпадет из ручки кегля меток, и приёмка посчитает его «неподвижным». Ограничивать их min() нельзя по той же причине — на краю диапазона размер перестанет меняться. */ .v4-head { --v4-logo-paw: 44px; --v4-logo-brand: 1.6875rem; /* 27px до множителей */ --v4-logo-dom: 0.8125rem; /* 13px до множителей */ --v4-logo-k: 1; } html.v4-head-small .v4-head { --v4-logo-k: 0.86; } @media (max-width: 430px) { .v4-head { --v4-logo-paw: 42px; --v4-logo-brand: 1.5rem; /* 24px */ --v4-logo-dom: 0.75rem; /* 12px */ } } @media (max-width: 379px) { .v4-head { --v4-logo-paw: 38px; --v4-logo-brand: 1.3125rem; /* 21px */ --v4-logo-dom: 0.6875rem; /* 11px */ } } .v4-head .logo__paw { width: calc(var(--v4-logo-paw) * var(--v4-logo-k)); height: calc(var(--v4-logo-paw) * var(--v4-logo-k)); } .v4-logo__word { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } /* Селектор из двух классов обязателен: в базовом слое кегль знака задан как `.logo__word`, и правило в один класс проиграло бы ему по весу молча. */ .v4-head .v4-logo__word { font-size: calc(var(--v4-logo-brand) * var(--kui) * var(--v4-logo-k)); } .v4-logo__brand { display: block; } .logo__gav { color: var(--logo-gav); } .v4-logo .logo__word i { color: var(--logo-vpn); } .v4-head .v4-logo__dom { /* Адрес набран шрифтом меток, а не заголовков: он читается как показание прибора и не спорит с брендом сверху. */ font-family: var(--f-ui); font-weight: 500; font-size: calc(var(--v4-logo-dom) * var(--kui) * var(--v4-logo-k)); letter-spacing: 0.14em; line-height: 1; color: var(--logo-dom); } @media (max-width: 430px) { .v4-head .v4-logo__dom { letter-spacing: 0.1em; } } /* Подпись кнопки ужимается только там, где ей есть куда ужиматься: на узкой шапке её кегль уже опущен правилами ниже, и перебивать их нельзя. */ @media (min-width: 431px) { html.v4-head-small .v4-head__cta { padding-inline: var(--s4); font-size: var(--t-btn-sm); } } /* Механизм двух подписей кнопки шапки снят 10.08.2026 вместе с самой подписью: владелец заменил «Три дня бесплатно» на «Войти», а одно слово сокращать не во что. Уменьшённая шапка по-прежнему поджимает поля и высоту (правила выше). */ /* --- Цели нажатия: 44 × 44 px (§16) --------------------------------------- Требование про фактический размер цели, а не про кегль подписи, поэтому высоту добирает паддинг и min-height. Правила стоят здесь, а не в base.css: тот общий, и такая правка поехала бы по V1–V3.1. */ .v4-head .logo { min-height: var(--v4-tap); } .v4-head .site-nav a { display: inline-flex; align-items: center; min-height: var(--v4-tap); } /* Кнопка шапки: базовый слой давал ей 42 px — на два пикселя ниже нормы §16. Уменьшённая шапка высоту цели больше не режет (было 38 px): в её 52 px кнопка в 44 px помещается свободно, а сокращаются поля и подпись. */ .v4-head .v4-head__cta { min-height: var(--v4-tap); } /* Тихие ссылки. Коробка растёт до 44 px, кегль подписи не меняется — но у .link подчёркивание нарисовано ::after по НИЖНЕЙ границе, и от одного лишь роста коробки линия уехала бы от букв на десяток пикселей. Поэтому линия отвязана от низа и привязана к середине строки: 0.62em ниже центра — это сразу под выносными элементами при любом кегле и любой высоте коробки. Расширять цель прозрачным слоем-псевдоэлементом здесь нельзя: замер целей идёт по коробкам, и слой в отчёте не виден. */ .v4-hero__quiet, .v4-final__quiet .link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--v4-tap); } .v4-hero__quiet::after, .v4-final__quiet .link::after { bottom: auto; top: calc(50% + 0.62em); } /* Узкая шапка. Знак плюс кнопка с nowrap в 320–430 px в полосу не влезают: без этих правил страница получала горизонтальную прокрутку ещё до первого экрана (замер на 320 px: правый край кнопки 357 при ширине окна 320). */ /* Селектор из двух классов не случаен: в базовом слое кегль и поля этой кнопки заданы как `.site-head .btn`, и правило в один класс молча проигрывает по весу — кнопка остаётся широкой, а страница едет вбок. */ @media (max-width: 430px) { .v4-head .site-head__in { gap: var(--s3); } .v4-head .logo { flex: none; } .v4-head .v4-head__cta { padding-inline: var(--s3); font-size: var(--t-label); letter-spacing: 0.06em; } } /* Габариты самого знака на узких ширинах задаёт блок «Знак в две строки» выше — тремя переменными на `.v4-head`. Здесь остаются только поля и кегль кнопки: у неё своя логика сжатия. */ @media (max-width: 379px) { .v4-head .v4-head__cta { padding-inline: var(--s2); font-size: var(--t-ui-xs); } } /* Якорь не должен уезжать под шапку — отступ считается от её высоты. */ .v4-hero, .v4-sec { scroll-margin-top: calc(var(--v4-head-h) + var(--s4)); } /* --- Указатель положения убран ------------------------------------------- Решение владельца 11.08.2026: лаймовый бегунок прокрутки у правого края вместе с рельсом и ромбами-узлами на границах секций снят со страницы. Разметка `.v4-axis` удалена из index.src.html, участок рельса в финале (.v4-final::after) — тоже. Возвращать — целиком, иначе останется рельс без бегунка или ромбы без рельса. */ /* --- Проявление секций ---------------------------------------------------- */ /* Один механизм на весь вариант: прокрутка сама и есть таймлайн. Без JS, без поддержки и при выключенном движении содержимое просто видно. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .v4-rise { animation: v4-rise linear both; animation-timeline: view(); animation-range: entry 4% cover 22%; } } } @keyframes v4-rise { from { opacity: 0.3; translate: 0 26px; } to { opacity: 1; translate: 0 0; } } .motion-off .v4-rise { animation: none; opacity: 1; translate: none; } /* --- Дымка домена --------------------------------------------------------- */ /* Задача слоя — не украшение, а память: имя сайта капсом должно осесть в голове настолько, чтобы его назвали другу вслух. Механика повторяет bubavpn.com (чанк df75012795cffa37.js): своя фаза у каждой надписи, бесконечный ход по четырём точкам, прозрачность 0.035-0.085. Слой строго под содержимым и нажатий не ловит. В отличие от образца дымка держится НА ВСЕЙ странице, а не в одном первом экране (решение владельца 10.08.2026). Способ — фиксированный слой во весь экран: тридцать надписей дают одинаковую плотность на любой длине страницы, тогда как выстилание всей высоты документа потребовало бы под три сотни бесконечных анимаций. Чтобы слой не выглядел наклейкой на стекле, он сам медленно едет от прокрутки; без поддержки scroll-таймлайна просто стоит. */ .v4-fog { /* Потолок кегля дымки. На широком экране его нет, на телефоне крупные надписи срезаются: надпись в половину ширины экрана перестаёт быть фоном, а на максимуме ручек кегля ещё и не помещается по ширине. */ --fog-cap: 99px; position: fixed; /* Запас сверху и снизу: слой едет от прокрутки и без запаса оголил бы край. */ inset: -9svh 0; z-index: 0; overflow: hidden; pointer-events: none; /* Дымка не участвует в раскладке страницы и не заставляет её пересчитывать: 30 бесконечных анимаций иначе дёргали бы весь документ. */ contain: layout paint; animation: v4-fog-scroll linear both; animation-timeline: scroll(root block); } /* Ход слоя за прокруткой — 9svh за всю страницу. Больше нельзя: дымка обгонит содержимое и начнёт читаться как второй, отстающий слой текста. Без поддержки scroll-таймлайна слой просто стоит — так же, как ось. */ @keyframes v4-fog-scroll { to { transform: translateY(-9svh); } } .v4-fog span { position: absolute; font-family: var(--f-display); font-weight: var(--w-head); font-stretch: var(--wd-head); letter-spacing: 0.08em; line-height: 1; white-space: nowrap; color: var(--paper); /* Поворот стоит в самих кадрах: отдельным свойством он спорил бы с transform анимации и молча пропадал. */ font-size: calc(min(var(--fog-fs) * 1px, var(--fog-cap)) * var(--khead)); animation: v4-fog-drift var(--fog-dur, 20s) ease-in-out var(--fog-delay, 0s) infinite; transform: rotate(var(--fog-r, 0deg)); } /* Ход снят с образца один в один: y [0,-40,10,-20,0], x [0,15,-10,20,0], поворот ±15° от своего угла, масштаб 0.95-1.05. */ @keyframes v4-fog-drift { 0% { transform: translate3d(0, 0, 0) rotate(var(--fog-r)) scale(1); } 25% { transform: translate3d(15px, -40px, 0) rotate(calc(var(--fog-r) + 15deg)) scale(1.05); } 50% { transform: translate3d(-10px, 10px, 0) rotate(calc(var(--fog-r) - 10deg)) scale(0.95); } 75% { transform: translate3d(20px, -20px, 0) rotate(calc(var(--fog-r) + 5deg)) scale(1.02); } 100% { transform: translate3d(0, 0, 0) rotate(var(--fog-r)) scale(1); } } /* Твик движения и системная просьба «меньше анимации» останавливают дымку, но не гасят её: имя сайта на экране остаётся. */ html.motion-off .v4-fog, html.motion-off .v4-fog span { animation: none; } @media (prefers-reduced-motion: reduce) { .v4-fog, .v4-fog span { animation: none; } } .v4-fog span:nth-child(1) { left: 7.09%; top: 5.49%; --fog-fs: 11; opacity: 0.035; --fog-r: 23deg; --fog-dur: 14.9s; --fog-delay: -11.9s; } .v4-fog span:nth-child(2) { left: 22.27%; top: 13.30%; --fog-fs: 23; opacity: 0.06; --fog-r: 16deg; --fog-dur: 18.9s; --fog-delay: -10.6s; } .v4-fog span:nth-child(3) { left: 40.19%; top: 14.28%; --fog-fs: 15; opacity: 0.074; --fog-r: 1deg; --fog-dur: 18.6s; --fog-delay: -10.7s; } .v4-fog span:nth-child(4) { right: 38.43%; top: 7.29%; --fog-fs: 15; opacity: 0.071; --fog-r: -8deg; --fog-dur: 26.5s; --fog-delay: -17.5s; } .v4-fog span:nth-child(5) { right: 21.60%; top: 5.44%; --fog-fs: 13; opacity: 0.04; --fog-r: 4deg; --fog-dur: 29.6s; --fog-delay: -8.1s; } .v4-fog span:nth-child(6) { right: 7.14%; top: 14.38%; --fog-fs: 15; opacity: 0.057; --fog-r: -23deg; --fog-dur: 18.8s; --fog-delay: -9.5s; } .v4-fog span:nth-child(7) { left: 8.33%; top: 31.94%; --fog-fs: 16; opacity: 0.072; --fog-r: -15deg; --fog-dur: 17.9s; --fog-delay: -5.1s; } .v4-fog span:nth-child(8) { left: 24.30%; top: 29.37%; --fog-fs: 14; opacity: 0.067; --fog-r: 8deg; --fog-dur: 22.6s; --fog-delay: -2.1s; } .v4-fog span:nth-child(9) { left: 40.35%; top: 34.10%; --fog-fs: 23; opacity: 0.047; --fog-r: 23deg; --fog-dur: 20.6s; --fog-delay: -14.8s; } .v4-fog span:nth-child(10) { right: 43.82%; top: 33.03%; --fog-fs: 21; opacity: 0.052; --fog-r: -4deg; --fog-dur: 28.5s; --fog-delay: -8.8s; } .v4-fog span:nth-child(11) { right: 25.39%; top: 26.67%; --fog-fs: 26; opacity: 0.079; --fog-r: -2deg; --fog-dur: 16.3s; --fog-delay: -4.2s; } .v4-fog span:nth-child(12) { right: 8.82%; top: 27.65%; --fog-fs: 16; opacity: 0.057; --fog-r: -11deg; --fog-dur: 16.1s; --fog-delay: -19.7s; } .v4-fog span:nth-child(13) { left: 10.94%; top: 49.59%; --fog-fs: 18; opacity: 0.073; --fog-r: 24deg; --fog-dur: 21.2s; --fog-delay: -5.8s; } .v4-fog span:nth-child(14) { left: 23.02%; top: 45.66%; --fog-fs: 18; opacity: 0.057; --fog-r: -24deg; --fog-dur: 17.5s; --fog-delay: -15.6s; } .v4-fog span:nth-child(15) { left: 42.50%; top: 45.65%; --fog-fs: 21; opacity: 0.068; --fog-r: -13deg; --fog-dur: 20.2s; --fog-delay: -4.4s; } .v4-fog span:nth-child(16) { right: 41.86%; top: 53.20%; --fog-fs: 22; opacity: 0.064; --fog-r: -1deg; --fog-dur: 16.2s; --fog-delay: -6.5s; } .v4-fog span:nth-child(17) { right: 28.38%; top: 52.18%; --fog-fs: 26; opacity: 0.077; --fog-r: 7deg; --fog-dur: 21.2s; --fog-delay: -7.8s; } .v4-fog span:nth-child(18) { right: 11.78%; top: 48.90%; --fog-fs: 16; opacity: 0.05; --fog-r: -19deg; --fog-dur: 25.1s; --fog-delay: -15.5s; } .v4-fog span:nth-child(19) { left: 7.38%; top: 70.33%; --fog-fs: 20; opacity: 0.062; --fog-r: -17deg; --fog-dur: 15.9s; --fog-delay: -13.3s; } .v4-fog span:nth-child(20) { left: 22.56%; top: 71.11%; --fog-fs: 25; opacity: 0.053; --fog-r: 4deg; --fog-dur: 19.5s; --fog-delay: -13.9s; } .v4-fog span:nth-child(21) { left: 43.49%; top: 74.20%; --fog-fs: 20; opacity: 0.072; --fog-r: 24deg; --fog-dur: 17.0s; --fog-delay: -19.9s; } .v4-fog span:nth-child(22) { right: 39.32%; top: 74.25%; --fog-fs: 20; opacity: 0.058; --fog-r: 10deg; --fog-dur: 24.2s; --fog-delay: -10.3s; } .v4-fog span:nth-child(23) { right: 24.47%; top: 67.52%; --fog-fs: 24; opacity: 0.045; --fog-r: -14deg; --fog-dur: 21.1s; --fog-delay: -18.5s; } .v4-fog span:nth-child(24) { right: 5.95%; top: 68.31%; --fog-fs: 14; opacity: 0.074; --fog-r: 0deg; --fog-dur: 14.6s; --fog-delay: -6.5s; } .v4-fog span:nth-child(25) { left: 10.15%; top: 88.58%; --fog-fs: 21; opacity: 0.056; --fog-r: 1deg; --fog-dur: 20.5s; --fog-delay: -3.7s; } .v4-fog span:nth-child(26) { left: 25.71%; top: 88.41%; --fog-fs: 23; opacity: 0.043; --fog-r: -17deg; --fog-dur: 28.6s; --fog-delay: -5.2s; } .v4-fog span:nth-child(27) { left: 40.05%; top: 86.84%; --fog-fs: 23; opacity: 0.075; --fog-r: 5deg; --fog-dur: 23.1s; --fog-delay: -13.0s; } .v4-fog span:nth-child(28) { right: 40.37%; top: 88.69%; --fog-fs: 26; opacity: 0.085; --fog-r: -7deg; --fog-dur: 17.8s; --fog-delay: -10.7s; } .v4-fog span:nth-child(29) { right: 22.38%; top: 93.86%; --fog-fs: 25; opacity: 0.084; --fog-r: -14deg; --fog-dur: 27.8s; --fog-delay: -10.5s; } .v4-fog span:nth-child(30) { right: 10.83%; top: 89.69%; --fog-fs: 19; opacity: 0.072; --fog-r: -11deg; --fog-dur: 19.8s; --fog-delay: -13.2s; } /* Телефон: 12 надписей из 30 сняты — на узком экране они сбивались в кучу, а каждая анимация стоит слоя отрисовки на слабой машине. */ @media (max-width: 640px) { .v4-fog { --fog-cap: 15px; } /* Снимается каждая вторая надпись, а не хвост списка: хвост — это два нижних ряда сетки, и телефон остался бы с дымкой только сверху. */ .v4-fog span:nth-child(even) { display: none; } } /* Содержимое страницы стоит НАД дымкой. Без этих строк поле z-index у .v4-fog накрыло бы ссылки и кнопки — они перестали бы нажиматься. Шапка своё поле уже имеет (sticky), подвал и основной поток — нет. */ main, .site-foot { position: relative; z-index: 1; } /* --- Первый экран --------------------------------------------------------- */ .v4-hero { position: relative; min-height: calc(100svh - var(--v4-head-h)); display: flex; /* Содержимое прижато к шапке, а не к середине экрана (решение владельца 11.08.2026): заголовок обязан быть первым, что видно, — при центрировании он уезжал на треть экрана вниз (замер 390 x 844: верх заголовка 217 px). */ align-items: flex-start; /* Верхнее поле поджато с 24 до 16 px (правка владельца 12.08.2026: на телефоне за срез уходила ссылка «Получить через Telegram»). Считать его нужно вместе с остальными четырьмя уступками — по отдельности ни одна ссылку в экран не возвращает, замер ниже у .v4-hero__quiet. */ padding-block: var(--s4) var(--s6); } /* Телефон: заголовок во всю ширину под шапкой, под ним узкая колонка подводки, справа от неё — Гавчик во весь свой рост, ниже печати и кнопки во всю ширину. Так первый экран начинается со слов, а не с пустоты. */ .v4-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) 48%; column-gap: var(--s4); /* Рядов четыре (слова, подводка с персонажем, печати, действия), поэтому шаг между ними мелкий: на 32 px три промежутка съедали бы сотню пикселей первого экрана. С 12.08.2026 шаг ещё на ступень ниже — три промежутка по 16 px стоили 48 px, а именно их не хватало нижней ссылке. */ row-gap: var(--s3); align-items: start; } .v4-hero__title { /* Во всю ширину сетки, а не в колонку слева: «ПРОПУСК В» набран плитой и в колонке 52 % рвался бы по слогам. Персонаж стоит ярусом ниже. */ grid-column: 1 / -1; grid-row: 1; /* Своя шкала: заголовок делит строку с персонажем и обязан уложиться в свою колонку на 320 px. Множитель --khead обязателен — иначе плита выпадет из регулировки кегля молча. */ font-size: calc(clamp(2rem, 10.4vw, 4.4rem) * var(--khead)); line-height: var(--lh-mega); display: grid; justify-items: start; } /* Две строки, вторая лаймовая — состав первого экрана V2, перенесённый сюда 11.08.2026. Плита набрана строками-блоками, поэтому «Пропуск в» не рвётся по ширине колонки, а слово «интернет» всегда стоит отдельной строкой. */ .v4-hero__title span { display: block; } .v4-hero__title span:last-child { color: var(--lime); } /* Подводка идёт вторым ярусом в своей колонке — рядом с Гавчиком, а не во всю ширину экрана (решение владельца 11.08.2026: строка на весь экран читается тяжело). Ширину держит сама колонка, поэтому меры в ch здесь нет: она спорила бы с ней на каждой ширине экрана. Колодца, из-за которого текст когда-то выносили во всю ширину, тут нет — ту раскладку душил ещё и заголовок в той же колонке, а он теперь ярусом выше. */ .v4-hero__lead { grid-column: 1; grid-row: 2; /* Колонка узкая, поэтому переносы решает браузер по всему абзацу, а не по одной строке: без этого последняя строка регулярно оставалась одним словом («нужна.»), а предпоследняя — предлогом. */ text-wrap: pretty; } /* Персонаж стоит вторым ярусом рядом с подводкой и заметно крупнее прежнего (48 % ширины против 33 %): ярус ему отдан целиком, а заголовок над ним больше не делит с ним строку. */ .v4-hero__dog { grid-column: 2; grid-row: 2; align-self: end; /* Шире мастера не растягиваем: 1440 px — родная ширина карточки. */ max-width: 1440px; } /* --- Печати преимуществ на первом экране --------------------------------- Приём мира, до сих пор не использованный ни разу: «наклонённые печати ломают ровный строй и делают страницу сделанной руками» (DESIGN.md, Shapes). Компонент взят готовый — `.stamp` из base.css, тот же, что в V1 и V2. Заливка только у первой печати, две другие — контур лаймом по тёмному. Причина: на первом экране лайм уже держит кнопку действия и знак в шапке, а три сплошные плиты рядом с кнопкой слились бы с ней в одно лаймовое пятно и отняли бы у неё роль главного сигнала («правило одного сигнала», DESIGN.md, Colors). Образец владельца — залитая печать — сохранён там, где он и был показан: «КАРТА НЕ НУЖНА». Ровно так же поступают V1 и V2: одна залитая печать на первом экране, остальные утверждения — контуром. Наклоны разные и в пределах ±3°, чтобы читалось как наклеенные по одной, а не как повторённый элемент. Печати ничего не открывают: ни курсора-руки, ни ответа на наведение у них нет. */ .v4-hero__stamps { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; /* На телефоне печати встают в столбик, и зазор здесь — вертикальный: два промежутка по 8 px против 4 (правка владельца 12.08.2026, тот же счёт за ссылку внизу первого экрана). Наклон печатей просвет сохраняет. */ gap: var(--s1); list-style: none; } .v4-hero__stamps .stamp { /* Курсора-руки и отклика на наведение здесь нет намеренно — это утверждение, а не кнопка. */ cursor: default; /* Межстрочный капсовой подписи: базовый 1.62 достался от текста и добавлял каждой печати по 6 px пустоты сверху и снизу — на 320 x 568 это ровно те 15 px, которых не хватало кнопкам (замер до и после: 97 → 83 px на три печати). */ line-height: 1.15; border-color: var(--lime); color: var(--lime); } .v4-hero__stamps .stamp--lime { color: #0a0a0a; border-color: #0a0a0a; } /* Наклон — у каждой печати свой. Классов в разметку не добавляем: это чистая визуальная деталь, и её место в стилях. */ .v4-hero__stamps li:nth-child(1) .stamp { rotate: -2.6deg; } .v4-hero__stamps li:nth-child(2) .stamp { rotate: 1.8deg; } .v4-hero__stamps li:nth-child(3) .stamp { rotate: -1.2deg; } /* Первая и вторая печати наклонены навстречу друг другу (-2.6 и +1.8), и на общем зазоре их углы налезают: замер с учётом поворота даёт -5.6 px на 390 px и -3.6 px на 440 против -1.6 и +0.4 у пары ниже, где наклоны расходятся. Четыре пикселя ровно этот перекос и снимают — зазор становится таким же, как между второй и третьей (правка владельца 12.08.2026). Общий gap для этого не годится: он раздвинул бы и вторую пару, которая уже стоит правильно, и стоил бы первому экрану вдвое дороже. */ .v4-hero__stamps li:nth-child(2) { margin-top: var(--s1); } .v4-hero__acts { grid-column: 1 / -1; grid-row: 4; display: flex; flex-direction: column; align-items: stretch; gap: var(--s2); } .v4-hero__acts .btn { width: 100%; } .v4-hero__quiet { align-self: start; margin-top: var(--s2); color: var(--paper-dim); } /* Первый экран после смены текстов 12.08.2026 (выбор владельца на стенде примерки). Заголовок стал длиннее на слово и встаёт в две крупные строки, подводка — в десять; без подтяжки нижняя ссылка «Получить через Telegram» уходила под кромку на 440 x 810. Экономить в тексте бесполезно: высоту первого яруса держит не он, а фигура. Поэтому платим тем, что реально весит: колонка персонажа 44 % вместо 48 % (−27 px), кнопки базовой высоты 56 px вместо 62 (−12 px), шаг ярусов и поля печатей на ступень ниже, шкала заголовка на 12 % мельче. Замер запаса под ссылкой: 440 x 780 +38, 440 x 800 +78, 390 x 844 +167. Порог `min-height: 701px` обязателен — ниже него своя раскладка (правила дальше по файлу), и её уступки выбраны отдельно. */ @media (max-width: 899px) and (min-height: 701px) { .v4-hero__title { font-size: calc(clamp(1.76rem, 9.15vw, 3.87rem) * var(--khead)); } .v4-hero__in { grid-template-columns: minmax(0, 1fr) 44%; row-gap: var(--s2); } .v4-hero__stamps { gap: var(--s1); } .v4-hero__stamps .stamp { padding: var(--s1) var(--s3); } .v4-hero__acts .btn--lg { min-height: 56px; padding-block: var(--s3); } /* Между двумя кнопками столько же воздуха, сколько между нижней кнопкой и ссылкой «Получить через Telegram» (правка владельца 12.08.2026). Считать надо по видимому тексту, а не по коробкам: у ссылки коробка 44 px под палец, а буквы в ней всего 17 px, и до них от кнопки 28 px при зазоре коробок в 16. Отсюда 24 + 4 — токенами, чтобы шкала осталась одна. На низкие экраны это не распространяется: там свои 8 px, и лишние 20 px увели бы кнопки за срез (замер 320 x 568: запас +3 px). */ .v4-hero__acts { gap: calc(var(--s5) + var(--s1)); } /* Ссылка — третий предмет того же столбца, и общий зазор ей достался бы сверх её собственной пустоты: коробка 44 px под палец против 17 px букв даёт лишние 12 px до текста. Отрицательный отступ ровно на них и стоит, иначе «до ссылки» получается 48 px против 28 между кнопками. */ .v4-hero__quiet { margin-top: calc(var(--s3) * -1); } } /* Низкий экран. Печати добавили первому экрану третий ярус, и на 320 x 568 он выталкивал обе кнопки за срез (замер: −126 px). Отыгрываем высоту там, где она ничего не стоит: воздух над словами, шаг между ярусами и сам кегль печатей. Кнопки и Гавчик остаются на месте — их размер не трогаем. */ @media (max-height: 700px) { .v4-hero { padding-block: var(--s4) var(--s6); } /* Низкий экран возвращает компактную раскладку: подводка идёт во всю ширину, а Гавчик встаёт рядом с заголовком. Причина — арифметика, а не вкус: в колонке 76 % подводка набирается на две строки длиннее, и эти 55 px здесь стоят дороже, чем крупный персонаж (замер 320 x 568: 639 px против 568). */ .v4-hero__title { grid-column: 1; } .v4-hero__lead { grid-column: 1 / -1; } .v4-hero__dog { grid-row: 1; } /* Колонка персонажа уже: подводка стала длиннее (текст V2, 11.08.2026) и в прежней ширине набирала на восемь строк вместо пяти. Каждый процент, отданный словам, снимает по строке — а строка здесь стоит 26 px первого экрана. Гавчик при этом остаётся целым, ему меняется только масштаб. */ .v4-hero__in { row-gap: var(--s2); } .v4-hero__stamps { gap: var(--s1) var(--s2); } .v4-hero__stamps .stamp { font-size: var(--t-ui-xs); padding: var(--s1) var(--s2); } /* Кнопки первого экрана теряют «большой» рост, но не цель нажатия: 52 px — базовая высота .btn и с запасом перекрывает 44 px (§16). Только это и ссылка под ними отыгрывают на 320 x 568 те самые 39 px, которых кнопкам не хватало, чтобы остаться в экране (замер до правки: низ 607 из 568). */ .v4-hero__acts .btn--lg { min-height: 52px; padding-block: var(--s3); } .v4-hero__quiet { margin-top: var(--s2); } /* Ряд заголовка ровно по нему: персонаж на низком экране мельче и не тянет ярус вниз своей высотой. */ .v4-hero__in { grid-template-columns: minmax(0, 1fr) 20%; } } /* Совсем низкий экран (iPhone SE, 320 x 568): вдобавок слово-плита чуть мельче и колонка слов шире — лид укладывается в меньшее число строк. */ @media (max-height: 600px) { .v4-hero { padding-block: var(--s3) var(--s5); } /* Разводка первой пары печатей стоит здесь вдвое дешевле: на 320 x 568 у первого экрана запаса всего пара пикселей, и полные 4 px уводили нижнюю ссылку за срез. Кегль печатей тут тоже мельче, перекос углов меньше. */ .v4-hero__stamps li:nth-child(2) { margin-top: calc(var(--s1) / 2); } .v4-hero__in { grid-template-columns: minmax(0, 1fr) 18%; } .v4-hero__title { font-size: calc(clamp(1.75rem, 8.6vw, 4.4rem) * var(--khead)); } .v4-hero__stamps { gap: 2px var(--s2); } .v4-hero__acts { gap: var(--s2); } } @media (min-width: 620px) { .v4-hero__acts { flex-direction: row; flex-wrap: wrap; align-items: center; } .v4-hero__acts .btn { width: auto; } .v4-hero__quiet { margin-top: 0; margin-left: var(--s3); align-self: center; } } @media (min-width: 900px) { /* Десктоп раскрывает две колонки: текст с действиями и колонка персонажа. Вторая строка забирает остаток высоты, а кнопки прижаты к её верху — иначе высокий персонаж растягивал бы обе строки и уносил кнопки вниз. */ .v4-hero__in { grid-template-columns: minmax(0, 54%); row-gap: var(--s6); align-items: start; } /* Текстовый блок встаёт по центру секции — как и Гавчик ниже (top: 50%, translate -50%). На узком экране это правило не действует: там заголовок обязан быть первым видимым (комментарий у .v4-hero остаётся про мобильный случай), а на десктопе персонаж и слова были выровнены по разным осям — находка владельца 11.08.2026, замер по красной рамке скриншота. */ .v4-hero { align-items: center; } .v4-hero__stamps { gap: var(--s3); } .v4-hero__title { font-size: calc(clamp(3rem, 5.4vw, 4.6rem) * var(--khead)); } .v4-hero__lead { max-width: 44ch; } .v4-hero__title { grid-column: 1; grid-row: 1; } .v4-hero__lead { grid-column: 1; grid-row: 2; } .v4-hero__stamps { grid-column: 1; grid-row: 3; } .v4-hero__acts { grid-column: 1; grid-row: 4; } /* Персонаж выведен из потока сетки намеренно: он выше текстовой группы, и пока он стоял ячейкой, его рост растягивал строки — слова липли к верху кадра, а низ пустовал. Теперь текст стоит по центру экрана, а Гавчик держит правую половину и выровнен по его правой границе. */ .v4-hero__dog { position: absolute; top: 50%; translate: 0 -50%; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); width: min(44%, 560px); } /* Целиком в первом экране: ограничение по высоте, а не по ширине — иначе на невысоком окне персонажу срезает лапы и обувь. */ .v4-hero__dog img { width: auto; max-width: 100%; max-height: calc(100svh - var(--v4-head-h) - var(--s9)); margin-inline: auto; } } /* Третья печать («Карту не привязываем») встаёт по центру ДВУХ первых, а не у левого края второй строки — правка владельца 12.08.2026. Сетка из двух колонок по содержимому: её ширина равна строке из первых двух печатей, и центр третьей считается от них, а не от колонки текста (та шире на ~77 px, и центрирование по контейнеру промахнулось бы на 38 px). Порог 1180: ниже него первые две печати в одну строку не помещаются (замер — на 1024 им нужно 567 px при 505 доступных), там остаётся прежний перенос флексом. */ @media (min-width: 1180px) { .v4-hero__stamps { display: grid; grid-template-columns: max-content max-content; justify-content: start; } .v4-hero__stamps li:nth-child(3) { grid-column: 1 / -1; justify-self: center; } } /* --- Секции ---------------------------------------------------------------- */ .v4-sec { position: relative; padding-block: var(--v4-sec-pad); } .v4-sec__h { max-width: 22ch; } /* Общая мера для колонки персонажа: карточки маскота шире мастера не растягиваются никогда, а 720 px — родная ширина всех трёх landing-карточек этой части страницы (manifest.json). */ .v4-devices__dog, .v4-privacy__dog, .v4-friends__dog { max-width: 720px; } /* --- Служебное ------------------------------------------------------------- */ /* Область объявлений для скринридера: пустая до первого выбора, поэтому в кадре её нет вовсе, а кегль всё равно ходит за ручкой текста. `overflow-wrap: anywhere` вместо привычного `white-space: nowrap` — не косметика: строка внутри коробки в 1 px иначе остаётся во всю свою длину, и `Range.getClientRects()` отдаёт её как настоящую строку через полэкрана. Приёмка правой оси меряет пересечения именно по строкам и ловила эту — невидимую глазу — подпись у самого края (замер 10.08.2026, 390 px). */ .v4-vh { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; overflow-wrap: anywhere; font-size: var(--t-sm); } /* --- 2. Маршрутизация ------------------------------------------------------ Тезисы стоят НАД таблицей и красятся тем же кодом, что и её колонки: лайм — «через нас», розовый — «напрямую». Их два (решение владельца 11.08.2026): прежние первый и второй сведены в одну фразу, поэтому черт на секции ровно две. Подписи под таблицей нет намеренно: она повторяла бы сказанное. */ .v4-claims { display: grid; gap: var(--s5); margin-top: var(--v4-sec-gap); } .v4-claim { padding-top: var(--s4); border-top: var(--bw-strong) solid var(--lime); font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--paper-dim); text-align: center; max-width: 46ch; margin-inline: auto; } .v4-claim--via { border-top-color: var(--lime); } .v4-claim--direct { border-top-color: var(--pink); } @media (min-width: 760px) { /* Десктоп §14: тезисы стоят точно над двухколоночной таблицей (та же сетка minmax(0,1fr) minmax(0,1fr), что у .v4-tab) — решение владельца 11.08.2026, выбор варианта 1 из newsite/routes-variants/: раньше тезисы шли в СВОЕЙ сетке из трёх колонок, второй съезжал к трети экрана вместо середины. Текст в колонке — по центру. */ .v4-claims { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); } } /* Таблица двух групп. Обе колонки стоят рядом на любой ширине — так они и читаются как таблица; длинное название не рвёт её, а переносится внутри своей ячейки (минимальная ширина колонки держится min-width: 0). */ .v4-tab { margin-top: var(--v4-sec-gap); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--raise); border: var(--bw) solid var(--line); } .v4-tab__col { min-width: 0; } /* Пунктир — тот же знак, которым в схеме показана дорога мимо туннеля. */ .v4-tab__col--direct { border-left: var(--bw) dashed var(--line-strong); } /* Заголовок колонки стоит по центру ячейки. Выравнивание по левому краю, поставленное утром 12.08.2026, владелец в тот же день отменил, посмотрев ПК: колонка там вдвое шире списка, и подпись у левого края висела в стороне от своего столбца. Строки под ним остаются по левому краю с отбивкой в два символа — так столбец читается как таблица, а не как подпись к списку. */ .v4-tab__h { display: flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s3); font-family: var(--f-ui); font-size: calc(0.875rem * var(--kui)); letter-spacing: 0.1em; text-transform: uppercase; } .v4-tab__h svg { flex: none; } /* На телефоне подпись колонки начинается там же, где названия сервисов (правка владельца 12.08.2026 по снимку с линиями). Центрирование остаётся только с 560 px: там колонка вдвое шире списка, и подпись у левого края висит в стороне от своего столбца — из-за этого центр и вернули утром. Отбивка считается тем же выражением, что у строки, иначе они разъедутся при смене гарнитуры в панели. */ @media (max-width: 559px) { .v4-tab__h { justify-content: flex-start; padding-left: calc(var(--s3) + 2ch); } } .v4-tab__col--via .v4-tab__h { color: var(--lime); } .v4-tab__col--direct .v4-tab__h { color: var(--pink); } .v4-tab__list li { /* Поле по вертикали мельче горизонтального: восемь строк в колонке, и каждые лишние 4 px сверху и снизу стоят секции 64 px высоты (задача «лист в экран», 11.08.2026). На 560 px и шире правило ниже возвращает просторные поля — там высота не в дефиците. */ padding: var(--s2) var(--s3); /* Отбивка в два символа набора самой строки: ширина ch считается по её шрифту, поэтому смена гарнитуры в панели её не рассинхронит. */ padding-left: calc(var(--s3) + 2ch); border-top: var(--bw) solid var(--line); font-size: var(--v4-t-read); color: var(--paper-dim); overflow-wrap: anywhere; } @media (min-width: 560px) { .v4-tab__h { padding: var(--s5) var(--s5) var(--s4); } .v4-tab__list li { padding: var(--s3) var(--s5); padding-left: calc(var(--s5) + 2ch); } } /* На ПК каждый раздел разложен в ДВА подстолбца — всего четыре на таблицу (версия 4 стенда `newsite/routes-pick/`, выбор владельца 12.08.2026). Секция была 1.37 экрана и стала 0.84: шестнадцать строк в колонку — это лист, мимо которого посетитель прокручивает всё остальное. Порядок внутри раздела — сверху вниз: первые восемь названий в левом подстолбце, остальные в правом (`grid-auto-flow: column` при восьми явных рядах). Названия стоят по центру своей ячейки, поэтому отбивка в два символа здесь снимается — с ней строка сидит правее истинного центра. Порог 900, а не 860: на 860 подстолбец сужается до ~203 px и «Пенсионный фонд» встаёт впритык к краю. Блок обязан идти ПОСЛЕ правила 560 px — специфичность у них одна, и стоя выше он молча проиграл бы. */ @media (min-width: 900px) { .v4-tab__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); grid-auto-flow: column; } .v4-tab__list li { padding-block: var(--s2); padding-inline: var(--s4); text-align: center; border-left: var(--bw) solid var(--line); } /* Левому подстолбцу вертикальная линия не нужна: там граница самой таблицы или пунктир раздела. */ .v4-tab__list li:nth-child(-n+8) { border-left: 0; } .v4-tab__h { padding: var(--s4) var(--s4) var(--s3); } } /* --- 3. Тарифы: настоящий выбор -------------------------------------------- Полоса выбора утоплена тоном (--sink) — это единственный пульт страницы. Ни одного числа в разметке: цены, лимит и необязательная скидка приходят метками. Кнопка оплаты решается CSS-селектором :has() на .v4-pick, поэтому выбор работает с выключенным JavaScript. */ .v4-tariffs { /* Плита пропускает дымку домена (задача владельца 11.08.2026: «на 3 и 7 странице слетел фон»). Дымка лежит ПОД main и сквозь непрозрачный фон не проходит физически — поднять её выше нельзя, она накроет текст. Поэтому сама плита стала полупрозрачной. Тон при этом сохраняется: --sink и --ink различаются по светлоте на сотые доли, и смесь их обоих глазу равна прежней плите, а надписи фона проступают. Утопленность держит сама заливка; серые линии сверху и снизу сняты (решение владельца 11.08.2026 — разделители между блоками страницы убраны). Мера общая с .v4-friends — вторая такая плита на странице. */ background: color-mix(in oklab, var(--sink) 55%, transparent); /* Растяжки на целый экран телефона у секции больше нет (правка владельца 12.08.2026 по снимку: «убрать пустоту, сделать как перед первым главным экраном»). Прежнее `min-height: 100svh` с центрированием (решение 11.08.2026, чтобы плита пульта дотягивалась до низа экрана) отдавало заголовку «Выберите срок» 175 px пустоты сверху; прижатие к верху просто переносило те же 175 px под кнопку. Высоту теперь задаёт содержимое, а воздух — общее поле секции. */ } .v4-tariffs__lead { margin-top: var(--s5); max-width: 62ch; } /* Строка про устройства. Стоит после кнопки оплаты и до «Трёх шагов» (решение владельца 12.08.2026): в карточках срока одно и то же число читалось как ограничение, здесь оно сказано один раз и как включённое. Оформление — волосяная линия и тон, без ещё одной плиты: секция и так утоплена, вторая коробка внутри неё спорила бы с карточками выбора. */ .v4-slots { margin-top: var(--v4-sec-gap); padding-top: var(--s5); border-top: var(--bw-strong) solid var(--lime); max-width: 62ch; } .v4-slots__t { margin: 0; font-family: var(--f-display); font-weight: var(--w-head); font-stretch: var(--wd-head); text-transform: uppercase; letter-spacing: -0.01em; font-size: calc(clamp(1.125rem, 4.6vw, 1.75rem) * var(--khead)); line-height: 1.1; } /* Само число лаймом: это единственная цифра в строке, и она же ответ на вопрос, который задают чаще прочих. */ .v4-slots__t b { font-weight: inherit; color: var(--lime); } .v4-slots__p { margin: var(--s3) 0 0; font-size: var(--v4-t-read); line-height: var(--lh-lead); color: var(--paper-dim); } /* Маркер по живому тексту: подсвечена ровно та фраза, ради которой абзац и написан, — что слоты докупаются в кабинете, а не через смену тарифа. Взят родной , а не span с фоном: выделение объявляется скринридером и переживает поиск по странице. На лайме текст обязан быть чернильным — тон абзаца (--paper-dim) на такой подложке нечитаем. box-decoration-break: clone здесь несущий, а не украшение: без него подложка на переносе строки тянется одной лентой до правого края блока и вторая строка получает прямоугольник в пустоте. Отрицательные поля по бокам гасят собственный отступ маркера, чтобы слова до и после него не разъезжались. */ .v4-mark { background: var(--lime); color: var(--ink); padding: 0.08em 0.26em; margin: 0 -0.08em; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Общий предок радиогруппы и кнопки: именно на нём стоят селекторы :has(), и именно от него отсчитывается спрятанная область объявлений. */ .v4-pick { position: relative; } .v4-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); margin-top: var(--v4-sec-gap); } /* Две карточки в ряд начинаются уже с 380 px, а не с 560: четыре срока столбиком давали секции 955 px при экране 844 — она одна не умещалась в лист. В паре карточка сохраняет и кружок выбора, и цену плитой; проверено снимком на 390 и 412. */ @media (min-width: 380px) { .v4-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 560px) { .v4-plans { gap: var(--s4); } } @media (min-width: 900px) { .v4-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .v4-plan { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); /* Две карточки в ряду делят 390 px, и каждые 4 px отступа от кружка выбора отнимаются у строки «Устройств: N» — на 16 px она рвалась надвое. */ column-gap: var(--s3); row-gap: var(--s2); align-items: start; min-height: 44px; padding: var(--s4); background: var(--raise); /* Рамка сразу 2 px: при выборе меняется только цвет, и карточка не дёргает соседей на пиксель. */ border: var(--bw-strong) solid var(--line); overflow: hidden; cursor: pointer; transition: border-color var(--d1) var(--e-out), background-color var(--d1) linear, transform var(--d1) var(--e-out); } /* Ответ на курсор — только там, где курсор есть. На тач-экране ховер залипает после касания: розовая рамка остаётся висеть на последней нажатой карточке и спорит с лаймовой рамкой выбранной. Поймано снимком телефона 10.08.2026. */ @media (hover: hover) and (pointer: fine) { .v4-plan:hover { border-color: var(--pink); transform: translateY(-3px); } } .v4-plan__in { grid-column: 1; grid-row: 1; appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex: none; background: transparent; border: var(--bw-strong) solid var(--line-strong); /* Круг — осознанное исключение из правила «не скруглять контентные поверхности» (DESIGN.md, Shapes). Скругление получает элемент управления, а не поверхность: квадрат 22 × 22 два независимых рецензента прочитали как флажок множественного выбора, то есть «можно отметить несколько сроков», — а срок здесь ровно один. Круг говорит про выбор одного из четырёх до того, как человек успеет попробовать. Форма выбора этим и исчерпывается: поведение группы, работа без JavaScript и клавиатура не меняются. */ border-radius: 50%; transition: background-color var(--d1) linear, border-color var(--d1) linear; } .v4-plan__in:checked { background: var(--lime); border-color: var(--lime); } /* Кольцо показывает вся карточка, а не квадрат 22 px: с клавиатуры видно, что именно сейчас переключают стрелки. */ .v4-plan__in:focus-visible { outline: none; } .v4-plan:has(.v4-plan__in:focus-visible) { outline: var(--bw-strong) solid var(--lime); outline-offset: 3px; } .v4-plan__term { grid-column: 2; font-size: var(--t-h); line-height: 1.2; } .v4-plan__cost { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3); } .v4-plan__price { flex: 0 0 100%; font-family: var(--f-display); font-weight: var(--w-head); font-size: calc(clamp(1.5rem, 6.2vw, 2.1rem) * var(--khead)); line-height: 1.1; letter-spacing: -0.01em; overflow-wrap: anywhere; } /* Старая цена и скидка приходят из кассы не всегда. Пустая подстановка гасит элемент целиком, поэтому дыры под ценой не остаётся. */ .v4-plan__was { font-size: var(--t-sm); color: var(--paper-mute); } .v4-plan__off { font-size: calc(0.75rem * var(--kui)); font-family: var(--f-ui); font-weight: 700; letter-spacing: 0.06em; color: #14060f; background: var(--pink); padding: 2px var(--s2); } .v4-plan__was:empty, .v4-plan__off:empty { display: none; } .v4-plan__lim { grid-column: 2; font-size: var(--v4-t-read); color: var(--paper-mute); } .v4-plan__lim b { font-weight: 600; color: var(--paper-dim); } /* Выбранная карточка: лаймовая рамка и лёгкий налив поля. */ .v4-plan:has(.v4-plan__in:checked) { border-color: var(--lime); background: color-mix(in oklab, var(--lime) 7%, var(--raise)); } .v4-plan:has(.v4-plan__in:checked) .v4-plan__term { color: var(--paper); } /* Световой отклик на выборе: одна волна по карточке, 380 мс. Дальше карточка держит состояние рамкой, а не движением. */ .v4-plan::after { content: ''; position: absolute; top: 0; bottom: 0; left: -55%; width: 55%; pointer-events: none; opacity: 0; background: linear-gradient(104deg, transparent 0%, color-mix(in oklab, var(--lime) 30%, transparent) 50%, transparent 100%); } @media (prefers-reduced-motion: no-preference) { .v4-plan:has(.v4-plan__in:checked)::after { animation: v4-lit 380ms var(--e-out) both; } } @keyframes v4-lit { from { opacity: 0; translate: 0 0; } 35% { opacity: 1; } to { opacity: 0; translate: 300% 0; } } .motion-off .v4-plan::after { animation: none; opacity: 0; } /* Кнопка оплаты. В собранной странице живёт одна из двух веток разметки (их выбирает build-v4.py). У ветки с живой кассой пять состояний, и какое видно — решает :has() на общем предке, поэтому JavaScript для выбора не нужен вовсе. У fail-closed ветки состояние одно, и своё правило показа ниже — см. .v4-pay--unavailable. */ .v4-pay { margin-top: var(--v4-sec-gap); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); } .v4-pay__go { display: none; width: 100%; max-width: 100%; /* Подпись кнопки длинная и несёт цену — переносить её честнее, чем выпускать за край экрана на 320 px. Габарит — как у «Взять три дня бесплатно» (решение владельца 11.08.2026): все пять состояний несут класс .btn--lg, здесь их поле по горизонтали не сужается против него. */ white-space: normal; text-align: center; letter-spacing: 0.08em; } .v4-pick:not(:has(.v4-plan__in:checked)) .v4-pay__go--none { display: inline-flex; } .v4-pick:has(#p30:checked) .v4-pay__go--30 { display: inline-flex; } .v4-pick:has(#p90:checked) .v4-pay__go--90 { display: inline-flex; } .v4-pick:has(#p180:checked) .v4-pay__go--180 { display: inline-flex; } .v4-pick:has(#p360:checked) .v4-pay__go--360 { display: inline-flex; } /* Неактивное состояние: пустая пунктирная плита. Она не притворяется живой — ни заливки, ни плиты-тени, ни отклика на курсор. */ .v4-pay__go--none { --btn-bg: transparent; --btn-fg: var(--paper-mute); border: var(--bw-strong) dashed var(--line-strong); box-shadow: none; cursor: not-allowed; } .v4-pay__go--none:hover, .v4-pay__go--none:active { transform: none; box-shadow: none; background: transparent; } /* Fail-closed плита показывается своим правилом, а не правилом выбора выше. Это не дубль: селектор `.v4-pick:not(:has(…))` целиком отбрасывается браузером без поддержки :has() (iOS Safari до 15.4, Firefox до 121) — там от строки 1074 не остаётся ничего, и сообщение «Оплата временно недоступна» пропало бы. Выбор срока в таком браузере и так не работает, а вот объяснение, почему нельзя оплатить, зависеть от современного селектора не имеет права. Здесь :has() не участвует вовсе. */ .v4-pay--unavailable .v4-pay__go--none { display: inline-flex; } .v4-pay__notice { width: 100%; max-width: 62ch; color: var(--paper-mute); line-height: 1.5; } @media (min-width: 620px) { .v4-pay__go { width: auto; } } /* --- 4. Три шага ------------------------------------------------------------ */ .v4-steps__list { display: grid; gap: var(--s4); margin-top: var(--v4-sec-gap); } @media (min-width: 860px) { /* Десктоп §14: три карточки в ряд. */ .v4-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } } /* Цифра стоит слева отдельной колонкой, заголовок начинается на её строке (решение владельца 11.08.2026). Сама цифра охватывает оба ряда и держится их серединой — от первой строки заголовка до последней строки пояснения, поэтому карточка с длинным текстом не оставляет её висеть у верхнего края. Пояснение идёт во второй ряд той же колонки, чтобы левая кромка текста осталась одной. */ .v4-step { padding: var(--s5); background: var(--raise); border: var(--bw) solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s4); align-items: start; } .v4-step__n { grid-column: 1; grid-row: 1 / span 2; align-self: center; font-family: var(--f-display); font-weight: var(--w-head); /* Два шага шкалы вверх от прежних 2.125-3rem (решение владельца 11.08.2026): шаг шкалы здесь 1.125, два шага — множитель 1.266. Множитель --khead обязателен, иначе цифра молча выпадет из ручки кегля в панели. */ font-size: calc(clamp(2.69rem, 10.63vw, 3.8rem) * var(--khead)); line-height: 1; color: var(--lime); } .v4-step__t { grid-column: 2; grid-row: 1; } /* Базовое место пояснения объявлено ДО медиа-запросов намеренно: специфичность у него та же, что у правил внутри @media, и стоя ниже по файлу оно молча перебивало бы их — пояснение уезжало бы в несуществующую вторую колонку. */ .v4-step__p { grid-column: 2; grid-row: 2; margin-top: var(--s2); font-size: var(--v4-t-read); color: var(--paper-dim); } /* Карточка шага на ПК: версия 4 стенда `newsite/steps-pick/` — выбор владельца 12.08.2026 взамен бледной подложки в правом углу («раньше яркие лаймовые цифры по левой стороне»). Цифра крупнее мобильной и стоит слева, но ширину отнимает ТОЛЬКО у заголовка: пояснение уходит вторым рядом во всю карточку, поэтому первая карточка с короткой подписью не выглядит полупустой — та самая причина, по которой цифру когда-то и увели вправо. Мобильную раскладку правка не трогает ни одной строкой (сверено геометрией всех элементов секции на 390 px). */ @media (min-width: 860px) { .v4-step { position: relative; } /* Кегль крупнее мобильного, но множитель --khead обязателен: без него цифра молча выпадет из ручки кегля в панели твиков и попадёт в счёт неподвижных элементов у приёмки. */ .v4-step__n { font-size: calc(clamp(3.4rem, 5.6vw, 4.75rem) * var(--khead)); line-height: 0.8; } /* 860–1023: цифра шапкой, текст под ней во всю ширину. Сбоку её здесь дать нельзя — в колонке рядом с цифрой слово «Зарегистрируйтесь» не переносится и вылезает за карточку на 42–56 px (замер по строкам через Range; по коробкам такого перелива не видно вовсе). */ .v4-step { grid-template-columns: minmax(0, 1fr); } .v4-step__n { grid-column: 1; grid-row: 1; align-self: start; margin-bottom: var(--s3); } .v4-step__t { grid-column: 1; grid-row: 2; } .v4-step__p { grid-column: 1; grid-row: 3; margin-top: var(--s2); } } /* От 1024 px карточка шире, и цифра встаёт слева от заголовка — ради этого вида правка и делалась. Пояснение по-прежнему во всю ширину. */ @media (min-width: 1024px) { .v4-step { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s3); } .v4-step__n { grid-column: 1; grid-row: 1; align-self: start; margin-bottom: 0; } .v4-step__t { grid-column: 2; grid-row: 1; align-self: center; } .v4-step__p { grid-column: 1 / -1; grid-row: 2; margin-top: var(--s4); } } /* --- 5. Устройства ---------------------------------------------------------- Три категории по форм-фактору. Коробок-карточек здесь нет намеренно: мир варианта держится на волосяной линии и тоне, и ещё один ряд одинаковых плиток после трёх шагов читался бы как заполнитель. Каждая категория — колонка под своей чертой. */ .v4-devs { display: grid; gap: var(--s5); margin-top: var(--v4-sec-gap); } .v4-dev { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s4); row-gap: var(--s1); align-items: center; padding-top: var(--s4); border-top: var(--bw-strong) solid var(--line); } .v4-dev__pic { grid-column: 1; grid-row: 1 / span 2; width: 46px; height: auto; /* Лайм, а не серый (решение владельца 11.08.2026): значок — единственная краска в перечне устройств, и серым он читался как выключенный. Правило одного сигнала не нарушено — кнопок и цен в секции нет. */ color: var(--lime); } .v4-dev__name { grid-column: 2; align-self: end; } .v4-dev__list { grid-column: 2; align-self: start; font-size: var(--v4-t-read); color: var(--paper-mute); } @media (min-width: 700px) { /* Десктоп §14: три категории в ряд. Значок уходит наверх — колонка читается сверху вниз, а не строкой. Три ряда общие на весь список (subgrid): без этого длинное «Телефон и планшет» переносится на вторую строку и уносит свой перечень вниз, а соседние остаются на месте — ряд ломается. */ .v4-devs { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: var(--s6); row-gap: var(--s3); } .v4-dev { grid-row: span 3; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; align-items: start; padding-top: var(--s5); } .v4-dev__pic { grid-column: 1; grid-row: auto; width: 56px; } .v4-dev__name, .v4-dev__list { grid-column: 1; align-self: start; } } /* Двое Гавчиков в подвале секции — с телефоном и с ноутбуком (правка владельца 12.08.2026: подпись про лимит устройств снята, на её месте персонаж). Стоят одной строкой на любой ширине и выровнены по низу: пол под ними один, иначе фигуры висят на разной высоте. Колонки неравные — карточка с телефоном вертикальная (720x1383) против почти квадратной с ноутбуком (720x840), и при равных ширинах она была бы вдвое выше соседа. */ .v4-devices__foot { margin-top: var(--v4-sec-gap); display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 48%); justify-content: space-between; column-gap: var(--s4); align-items: end; } .v4-devices__phone { justify-self: center; } @media (min-width: 900px) { /* Десктоп §14: три категории в ряд и Гавчик рядом с ними, а не под ними. Обёртка подписи растворяется (display: contents), чтобы её дети попали в сетку секции: иначе персонаж уезжал в отдельную полосу под рядом и слева от него оставалось поле в треть экрана. */ .v4-devices__in { display: grid; grid-template-columns: minmax(0, 1fr) 21%; column-gap: var(--s8); align-items: end; } .v4-devices__in > .v4-sec__h { grid-column: 1 / -1; } .v4-devs { grid-column: 1; grid-row: 2; } .v4-devices__foot { display: contents; } /* На ПК Гавчик один — с ноутбуком (выбор владельца 12.08.2026 по стенду примерки). Пара фигур в подвале секции оправдана только на телефоне, где персонаж с телефоном занял место снятой подписи про лимит устройств; на широком экране это были две картинки подряд без единого слова между ними. */ .v4-devices__phone { display: none; } .v4-devices__dog { grid-column: 2; grid-row: 2 / span 2; align-self: end; } } /* --- 6. Без привязок --------------------------------------------------------- Тихий экран: одна крупная фраза и три границы под ней. Фраза набрана текстовой гарнитурой в 500 — второй капсовой плиты подряд секция не несёт, и множитель у неё --ktext, а не --khead. */ .v4-privacy__in { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--v4-sec-gap); } .v4-privacy__line { margin-top: var(--s4); font-weight: 500; font-size: calc(clamp(1.375rem, 5.6vw, 2.125rem) * var(--ktext)); line-height: 1.22; max-width: 20ch; text-wrap: balance; } .v4-privacy__facts { display: grid; gap: var(--s3); margin-top: var(--v4-sec-gap); } /* Мера строки. Ограничивать надо сам абзац, а не его контейнер: у списка ширину держит вся колонка секции, и на 1440 px строка разгонялась до семидесяти девяти знаков при потолке 65–75. Единица ch считается по ширине нуля своего же кегля, поэтому предел едет вместе с ручкой текста. */ .v4-privacy__facts li, .v4-qa__a p { max-width: 46ch; } .v4-privacy__facts li { padding-top: var(--s4); border-top: var(--bw) solid var(--line); font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--paper-dim); } /* Персонаж стоит по центру колонки, а не у правого края (решение владельца 11.08.2026): секция тихая, и прижатая к краю фигура уводила взгляд с текста. Сам текст остаётся по левой стороне — центрируется только картинка. */ .v4-privacy__dog { justify-self: center; width: min(48%, 290px); } @media (min-width: 900px) { /* Десктоп §14: текст и Гавчик в двух колонках. */ .v4-privacy__in { grid-template-columns: minmax(0, 1fr) 30%; column-gap: var(--s8); align-items: center; } .v4-privacy__dog { width: 100%; } } /* --- 7. Друзья --------------------------------------------------------------- Единственная секция страницы с розовым главным пятном: приглашение — не покупка, и лайм здесь занял бы место оплаты. Кнопка розовая, ни верхней, ни нижней черты нет (решение владельца 11.08.2026 — секции достаточно фона-плиты, разделители между блоками страницы убраны). */ .v4-friends { /* Полупрозрачная плита — та же мера, что у тарифов: иначе дымка домена на этом листе не видна вовсе (см. комментарий у .v4-tariffs). */ background: color-mix(in oklab, var(--sink) 55%, transparent); } .v4-friends__in { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--v4-sec-gap); } .v4-friends__lead { margin-top: var(--s5); max-width: 52ch; } /* Габарит — как у кнопки оплаты (.btn--lg на обеих, решение владельца 11.08.2026). Цвета — ровно те же, что у «Взять три дня бесплатно»: лайм на розовой плите, класс .btn--zip (правка владельца 12.08.2026). Прежний набор (розовая заливка .btn--pink с лаймовой плитой) снят вместе с ручкой --btn-plate: у .btn--zip плита задана прямо в --btn-lift, и переменная на неё не действует — оставленная, она вводила бы в заблуждение. На узком экране .btn--lg через паддинг выталкивал подпись за срез (переполнение на 320 px, замер 327 px) — во всю ширину колонки кнопка встаёт тем же приёмом, что .v4-hero__acts .btn на первом экране, и тот же порог возврата к auto. */ .v4-friends__go { margin-top: var(--s6); width: 100%; } .v4-friends__dog { justify-self: center; width: min(56%, 300px); } @media (min-width: 620px) { .v4-friends__go { width: auto; } } @media (min-width: 900px) { /* Десктоп §14: Гавчик и текст в двух колонках — персонаж слева. Порядок в разметке обратный намеренно: заголовок секции обязан идти первым в потоке чтения, а место на экране раздаёт сетка. */ .v4-friends__in { grid-template-columns: 26% minmax(0, 1fr); column-gap: var(--s8); align-items: center; } .v4-friends__say { grid-column: 2; grid-row: 1; } .v4-friends__dog { grid-column: 1; grid-row: 1; width: 100%; justify-self: start; } } /* --- 8. Вопросы -------------------------------------------------------------- Семь
. Раскрытие плавное настоящей высотой (::details-content + interpolate-size), а не подделкой через max-height: последняя всегда либо режет длинный ответ, либо ждёт пустоту. Без поддержки и при выключенном движении ответ просто появляется — работа не зависит ни от того, ни от другого. */ .v4-qas { margin-top: var(--v4-sec-gap); border-top: var(--bw) solid var(--line); } .v4-qa { border-bottom: var(--bw) solid var(--line); } .v4-qa__q { display: flex; align-items: center; gap: var(--s4); min-height: 64px; padding-block: var(--s3); cursor: pointer; list-style: none; transition: color var(--d1) linear; } .v4-qa__q::-webkit-details-marker { display: none; } .v4-qa__q:hover { color: var(--lime); } .v4-qa__q:focus-visible { outline: var(--bw-strong) solid var(--lime); outline-offset: 3px; } /* Лицо — не украшение строки, а её опора слева: у каждого вопроса своё, и размер задан жёстко, чтобы строка не прыгала при подгрузке. */ .v4-qa__face { flex: none; width: 52px; } .v4-qa__t { flex: 1 1 auto; min-width: 0; font-size: var(--t-body); line-height: 1.3; } .v4-qa__chev { flex: none; color: var(--paper-mute); transition: transform var(--d2) var(--e-out), color var(--d1) linear; } .v4-qa[open] .v4-qa__chev { transform: rotate(180deg); color: var(--lime); } .v4-qa__a { padding-bottom: var(--s5); padding-left: calc(52px + var(--s4)); } .v4-qa__a p { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--paper-dim); max-width: var(--measure); } @media (max-width: 419px) { /* На узком телефоне ответ идёт во всю ширину: отступ под лицо съедал бы четверть строки. */ .v4-qa__a { padding-left: 0; } } @supports (interpolate-size: allow-keywords) { @media (prefers-reduced-motion: no-preference) { :root { interpolate-size: allow-keywords; } .v4-qa::details-content { block-size: 0; overflow: clip; transition: block-size var(--d2) var(--e-out), content-visibility var(--d2) allow-discrete; } .v4-qa[open]::details-content { block-size: auto; } } } /* Твик «движение выключено» — конечное состояние, не отдельная механика. */ .motion-off .v4-qa::details-content { transition: none; } .motion-off .v4-qa__chev { transition: none; } @media (min-width: 620px) { /* На десктопе лицо крупнее: 68 px вместо 60 — узнаваемая мимика начинается примерно с этого размера, а места в строке вопроса там хватает. На телефоне размер не трогаем: строка вопроса и так делит 390 px с шевроном. */ .v4-qa__q { gap: var(--s5); min-height: 80px; } .v4-qa__face { width: 68px; } .v4-qa__t { font-size: var(--t-lead); } .v4-qa__a { padding-left: calc(68px + var(--s5)); } } /* --- 9. Финал: лаймовая плита во всю ширину ----------------------------------- Главная находка мира (DESIGN.md, Overview): полосы обязаны чередоваться — «плотный тёмный блок, лаймовая плита во всю ширину, тихий блок с воздухом». До этой правки девять полос шли одной плотностью, а лайм появлялся только кнопкой. Финал взят целиком под лайм: последняя полоса страницы — и есть та самая плита, и другого места для неё нет, потому что после неё только подвал, а до неё розовая секция «Друзья». Иерархия действий не изменилась: плита регистрации, под ней две тихие ссылки; Telegram главным действием не становится ни здесь, ни выше. Лаймовый финал НЕ спорит с лаймовой кнопкой первого экрана: на одном экране они не встречаются никогда, а смысл сигнала один и тот же — «сюда». Кнопка на плите инвертирована (чёрная плита, лаймовая подпись), поэтому главное действие остаётся самым тёмным пятном на самом светлом поле страницы: это максимальный контраст, какой мир вообще может дать. Третьего акцента не заведено, розовый остался «Друзьям» и плите кнопки. Замер контраста на плите (tools/v4-probe, 390 px): заголовок 16.88:1, подпись кнопки 16.88:1, лид и тихие ссылки 13.36:1 — при нормах 3:1 для крупного и 4.5:1 для тела. Считалось переводом oklab в линейный sRGB: компьютед-стиль отдаёт color-mix как oklab(...), и наивный разбор строки даёт цифры, не имеющие отношения к делу. */ .v4-final { /* Роль DESIGN.md «чёрное на акценте». Токен объявлен здесь, а не в tokens.css: лаймовая поверхность на всю систему пока одна. */ --on-lime: #0a0a0a; position: relative; /* Лаймовая плита закрывает дымку домена, идущую фоном всей страницы. Шапка (--z-sticky), панель твиков и переключатель остаются выше. */ z-index: calc(var(--z-sticky) - 9); background: var(--lime); color: var(--on-lime); text-align: center; } .v4-final__h { margin-inline: auto; } .v4-final__lead { margin: var(--s5) auto 0; max-width: 34ch; /* Вторичный текст на цветном поле подмешивается из самого поля, а не разбавляется серым (craft-floor: «tint secondary text from that hue»). */ color: color-mix(in oklab, var(--on-lime) 86%, var(--lime)); } .v4-final__acts { margin-top: var(--s7); display: grid; justify-items: center; gap: var(--s6); } /* Кнопка на плите инвертирована: чёрная плита, лаймовая подпись. Плита-тень остаётся розовой — это тот же .btn--zip, что и на первом экране, и второй акцент мира здесь работает ровно как там. */ .v4-final__go { --btn-bg: var(--on-lime); --btn-fg: var(--lime); width: 100%; max-width: 420px; /* Подпись длинная: на 320 px честнее перенести её, чем выпустить за край. */ white-space: normal; padding-inline: var(--s5); } .v4-final__go:active { background: var(--on-lime); } .v4-final__quiet { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4) var(--s6); color: color-mix(in oklab, var(--on-lime) 86%, var(--lime)); } /* На лаймовом поле лайм не может означать «наведено» и «в фокусе»: и ховер ссылки, и кольцо фокуса становятся тёмными. */ .v4-final .link:hover, .v4-final .link:focus-visible { color: var(--on-lime); } .v4-final :focus-visible { outline-color: var(--on-lime); } .v4-final ::selection { background: var(--on-lime); color: var(--lime); } @media (min-width: 620px) { .v4-final__go { width: auto; padding-inline: var(--s7); } } /* --- Подвал --------------------------------------------------------------- Одна строка целиком (решение владельца 11.08.2026): знак слева, Оферта, Политика и почта — одной группой у правого края. Разбивка на два яруса (знак сверху, ссылки снизу через полосу-разделитель) читалась как два подряд идущих подвала — убрана. .spacer перед ссылками сдвигает всю группу вправо (тот же приём, что и в остальных барах страницы). Кегли домножены на свои ручки, цели нажатия — та же дисциплина §16: 19 px высоты пальцем не берутся, min-height даёт var(--v4-tap). */ .v4-foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); padding-block: var(--s5); font-family: var(--f-ui); font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-mute); } .v4-foot__row a { display: inline-flex; align-items: center; min-height: var(--v4-tap); } .v4-foot__row a:hover { color: var(--lime); } .v4-foot__row .spacer { margin-left: auto; } .v4-foot__row .logo__paw { width: 20px; height: 20px; } .v4-foot__row .logo__word { font-size: calc(0.8125rem * var(--kui)); } /* Адрес почты набран строчными, а не капсом, как остальные метки: это адрес, а не подпись раздела, и капс раздувает его на 30 px — ровно та ширина, из-за которой на телефоне не оставалось места ни на подпись знака, ни на воздух между ссылками. */ .v4-foot__row a[href^='mailto'] { text-transform: none; } /* Телефон. Правка владельца 11.08.2026: подпись «Гав VPN» вернуть к лапе, как в шапке, и развести Оферту, Политику и почту пошире (было 4 px, стало 16). Помещается это только вместе: зазор строки убран в ноль — расстояние «знак ↔ группа ссылок» и так держит .spacer, — подпись взята кеглем меток, почта строчными. Замер: со знаком строка требует 319 px, и запас на просвет между знаком и ссылками появляется только с 390 px — ниже подписи нет, там она упирается в «Оферту» вплотную. */ @media (max-width: 480px) { .v4-foot__row { flex-wrap: nowrap; column-gap: 0; row-gap: var(--s3); font-size: var(--t-ui-xs); letter-spacing: 0; } .v4-foot__row a + a { margin-left: var(--s4); } .v4-foot__row .logo { gap: var(--s2); } .v4-foot__row .logo__word { font-size: var(--t-ui-xs); } /* Распорка тянется сама, но при нулевом зазоре строки может схлопнуться в ноль — тогда знак касается «Оферты». Минимум держит просвет. */ .v4-foot__row .spacer { min-width: var(--s5); } } @media (max-width: 389px) { .v4-foot__row .logo__word { display: none; } /* На 320 px даже одна лапа плюс три ссылки не оставляют 24 px просвета — замер даёт перелив в 5 px. Минимум здесь ниже. */ .v4-foot__row .spacer { min-width: var(--s3); } }