14.5 ← замер
То есть один и тот же блок, собранный из одних и тех же настроек, на двух
страницах набран РАЗНЫМ кеглем, и на витрине — самым мелким из всего, что
есть в тёмной карточке расчёта (соседние строки .calc__rows — 14).
А это единственное место на сайте, откуда гость переписывает номер счёта
руками, когда кнопка «Скопировать» не сработала.
Окно «Телефон» честно написало, что не знает, читаются ли 12.5 точки
на дешёвом телефоне, и просило посмотреть человека. Человек посмотрел
(владелец проекта, вечер 24.08.2026): увеличить.
🔴 ЧИСЛО ВЗЯТО НЕ С ПОТОЛКА, А У БЛИЗНЕЦА. 14.5 — это ровно тот кегль,
которым тот же самый блок набран на «Заявке принятой». Придумай мы третье
число — страницы разошлись бы снова, только уже в другую сторону.
Правило одно на обе страницы, как и всё остальное в этом блоке.
🔴 ПОЧЕМУ ПРАВИЛО СТОИТ ИМЕННО ЗДЕСЬ, А НЕ ВЫШЕ. Вес у «.poluchatel»
и у «.calc__note» одинаковый (один класс), и спор решает порядок строк.
Стой оно выше объявления .calc__note — на витрине не изменилось бы
ничего, а тест на кегль всё равно зеленел бы: он читает правило, а не
экран. Поэтому оно ниже, и переносить его выше нельзя.
Разметку не трогаем ни на одной из двух страниц: обе чужие, и на том,
что они дословно одинаковы, стоит сторож test_doveriya.test_d1_06. */
.poluchatel { font-size: 14.5px; }
.poluchatel strong { display: block; margin-bottom: 4px; }
/* 🔴 НАХОДКА ТЕЛЕФОН-2, Т2-2. СЧЁТ ОБРЫВАЛСЯ НА КРАЮ ЭКРАНА.
Поле, из которого сюда приходит значение, подписано владельцу «Реквизиты
ИЛИ ССЫЛКА НА ОПЛАТУ», а подсказка под ним говорит «номер счёта, ссылка
банка — что угодно». Ссылка на оплату — это одно слово без пробелов
длиной в шесть-семь десятков знаков, и разорвать его переносом браузеру
нечем: строка уезжает вправо за свою коробку.
Замерено на стенде ссылкой в 63 знака, окно 360:
· витрина — строка вылезает из тёмной карточки расчёта на 120 точек,
а хвост срезает край .site (у него overflow: hidden). Гость видит
начало ссылки и не видит конца — и не знает, что чего-то не видит;
· «Заявка принята» — там обрезать нечем, и вбок уезжает вся страница:
360 → 499 точек (139 вбок), 390 → 109, 430 → 69.
Правило одно на обе страницы, как и всё в этом блоке: беда у них общая
и приходит из одной настройки. overflow-wrap: anywhere рвёт слово ТОЛЬКО
когда оно не помещается, — короткие реквизиты выглядят ровно как раньше. */
/* 🔴 НАХОДКА ТЕЛЕФОН-2, Т2-3. КНОПКА СТОЯЛА ПОСРЕДИ СТРОКИ, И БЫЛО НЕ ПОНЯТЬ,
ЧЬЯ ОНА. Кнопка лежит в потоке текста, сразу за значением. Пока значение
в одну строку помещалось — вопросов не было; на телефоне не помещается
ни одно из трёх. Значение переносится, и кнопка садится в хвост ПОСЛЕДНЕЙ
строки — то есть вплотную над следующей подписью. Увидено на стенде,
окно 360: «Получатель: Магомедов Тамерлан / Русланович [Скопировать]»,
а строкой ниже «Статус: самозанятый [Скопировать]». Две кнопки в соседних
строках, и ни одна не стоит там, где начинается её значение.
Столбик отвечает на вопрос «чья кнопка» самим расположением: значение,
под ним его кнопка. align-items: flex-start — чтобы кнопка была шириной
по надписи, а не во всю строку: кнопка во всю ширину читается как главное
действие страницы, а главное здесь — не «скопировать», а «позвонить». */
.poluchatel__stroka {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
overflow-wrap: anywhere;
}
/* 🔴 НАХОДКА ТЕЛЕФОН-2, Т2-1. НА ВИТРИНЕ ЭТА КНОПКА НЕ БЫЛА ОДЕТА ВОВСЕ.
Разметка строки реквизитов на витрине и на «Заявке принятой» дословно
одна — это уговор, на нём стоит сторож test_doveriya.test_d1_06. А вид
выходил разный, и вот почему: ВСЕ правила вида кнопок в проекте привязаны
к .wrap (см. «Кнопки админки» ниже), а .wrap есть только на «Заявке
принятой». Витрина обёрнута в .site, и кнопка оставалась голой браузерной.
Замерено на стенде, окно 360 (одинаково на 390, 430 и 768):
«Заявка принята» 134.1 × 48 кегль 14.5
витрина 100.6 × 23.6 кегль 13.33
23.6 точки — вдвое меньше пальцевой цели. Кнопку завели РАДИ ТЕЛЕФОНА,
чтобы гость не переписывал номер счёта руками, и ровно на телефоне в неё
было труднее всего попасть.
🔴 ПРАВИЛО ПРИВЯЗАНО К .calc, А НЕ НАПИСАНО ГОЛЫМ КЛАССОМ. Голое
.poluchatel__kopiya достало бы и до «Заявки принятой», где эту кнопку
уже одевают .wrap button и .wrap .btn-ghost, — и однажды разошлось бы
с ними. Здесь сказано ровно то, что есть: так кнопка выглядит, когда
стоит в тёмной карточке расчёта.
Одежда взята у .calc__retry — единственной другой кнопки в этой же
карточке: своей третьей манеры для тёмного блока заводить незачем.
Кегль назван числом, а не оставлен наследоваться: вокруг .calc__note
с его 12.5, и надпись на кнопке вышла бы мельче, чем на соседней
странице у той же кнопки. */
.calc .poluchatel__kopiya {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--tap);
/* Отступы и кегль — как у этой же кнопки на «Заявке принятой»
(.wrap button ниже): у одной кнопки на двух страницах не должно быть
двух разных размеров, а разошлись бы они на первом же взгляде. */
padding: 12px 18px;
font: inherit;
font-size: 14.5px;
font-weight: 600;
line-height: 1.2;
border-radius: 12px;
cursor: pointer;
background: transparent;
border: 1px solid var(--on-dark);
color: var(--on-dark);
}
.calc__hint {
font-size: 13.5px;
padding: 11px 13px;
border-radius: 11px;
background: rgba(149, 159, 148, 0.2);
border: 1px solid rgba(194, 200, 189, 0.42);
color: var(--on-dark-4);
}
/* «Посчитать ещё раз» (волна 1, блок 2). Стоит в тёмном блоке расчёта, поэтому
цвета берутся из светлой части набора: до правки любой сбой связи гасил
кнопку заявки насмерть, и попробовать снова было нечем. */
/* Подпись про минимум ночей под сеткой календаря (волна 1, блок 8).
Число приходило на страницу и не читалось скриптом ни разу — гость узнавал
о минимуме только от сервера, после отказа. */
.cal__min {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.45;
color: var(--ink);
font-weight: 600;
}
/* Строка на месте кнопки «Забронировать эти даты», когда даты заняты
(волна 1, блок 4). Стоит ровно там, где была кнопка: пустое место на её
месте читается как «здесь ничего нет», а не как «эти даты нельзя». */
.calc__zanyato {
margin: 10px 0 0;
padding: 12px 14px;
border-radius: 12px;
font-size: 14.5px;
font-weight: 600;
line-height: 1.45;
text-align: center;
background: rgba(149, 159, 148, 0.2);
border: 1px solid rgba(194, 200, 189, 0.42);
color: var(--on-dark);
}
.calc__retry {
display: block;
width: 100%;
margin-top: 10px;
min-height: var(--tap);
padding: 12px 18px;
font: inherit;
font-weight: 600;
border-radius: 12px;
cursor: pointer;
background: transparent;
border: 1px solid var(--on-dark);
color: var(--on-dark);
}
/* ─────────── галерея ─────────── */
.gal { padding: 38px 0 40px; background: var(--green-mid); }
.gal__head { padding: 0 20px; display: flex; flex-direction: column; gap: 8px; }
.gal__head h2 {
margin: 0 0 4px;
font-family: var(--font-head);
font-size: 29px;
font-weight: 600;
line-height: 1.15;
color: var(--green-ink-2);
}
.gal__zones {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 14px 20px 4px;
scrollbar-width: none;
}
.gal__zones::-webkit-scrollbar { display: none; }
.zone {
flex: 0 0 auto;
height: 40px;
padding: 0 16px;
border-radius: 20px;
border: 1px solid rgba(77, 65, 57, 0.2);
background: var(--canvas);
color: var(--ink);
font-size: 13.5px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
}
.zone.on {
background: var(--graphite);
color: var(--on-dark-h);
border-color: var(--graphite);
}
.gal__shots {
padding: 14px 20px 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
/* Атрибут hidden браузер выключает правилом display:none, но правило класса
выше по силе — без этой строки на экран вываливались все восемь зон разом. */
.gal__shots[hidden] { display: none; }
.shot { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.shot--big { grid-column: span 2; }
.shot__frame {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 14px;
background: var(--stub);
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
overflow: hidden;
}
.shot--big .shot__frame { aspect-ratio: 4 / 3; }
.shot__frame--photo { padding: 0; }
/*
— обычный элемент, и во флексе он не растягивается сам:
без этой строки картинка занимала только свою долю кадра, а снизу
оставалась пустая подложка. */
.shot__frame picture { width: 100%; height: 100%; display: block; }
.shot__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot__stub {
font: 600 12px var(--font-text);
letter-spacing: 0.1em;
text-transform: uppercase;
color: #6E655A;
text-align: center;
line-height: 1.5;
}
.shot__cap {
padding: 4px 9px;
border-radius: 8px;
background: var(--canvas);
font-size: 12px;
color: var(--ink);
}
.gal__note { padding: 16px 20px 0; }
.tag {
display: inline-block;
padding: 5px 10px;
border-radius: 8px;
background: rgba(237, 231, 219, 0.5);
font: 600 12px var(--font-text);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink);
}
/* ─────────── почему Тамур ─────────── */
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.why > div {
background: var(--green-soft);
border-radius: 14px;
padding: 16px 15px 18px;
display: flex;
flex-direction: column;
gap: 8px;
}
.why > div::before { content: ""; width: 22px; height: 2px; background: var(--green); }
.why b {
font-family: var(--font-head);
font-size: 18px;
font-weight: 600;
line-height: 1.25;
color: var(--ink-dark);
}
.why span { font-size: 13px; line-height: 1.5; color: var(--ink); }
/* ─────────── что входит ─────────── */
.incl { padding: 0 20px 40px; background: var(--green-mid); }
.incl__head {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 30px 0 26px;
}
.incl__head .eyebrow {
font-size: 12px;
color: var(--green-ink);
}
.incl__head h2 {
margin: 0;
font-family: var(--font-head);
font-size: 29px;
font-weight: 600;
line-height: 1.15;
color: var(--green-ink-2);
text-align: center;
}
.ladoshka { width: 84px; height: 84px; }
.incl__list { background: var(--canvas); border-radius: 18px; padding: 4px 16px 8px; }
.incl__list > div {
display: flex;
gap: 14px;
padding: 15px 0;
border-bottom: 1px solid var(--line);
}
.incl__list > div:last-child { border-bottom: none; }
.incl__list b {
flex: 0 0 96px;
font-family: var(--font-head);
font-size: 17px;
font-weight: 600;
color: var(--ink);
}
.incl__list span { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.garden {
margin-top: 12px;
background: var(--terra);
border-radius: 18px;
padding: 20px 18px;
display: flex;
gap: 14px;
align-items: flex-start;
}
.garden > div { display: flex; flex-direction: column; gap: 9px; }
.garden b {
font-family: var(--font-head);
font-size: 20px;
font-weight: 600;
line-height: 1.3;
color: var(--on-terra);
}
.garden span { font-size: 14px; line-height: 1.55; color: var(--on-terra-2); }
.garden .ladoshka { width: 62px; height: 62px; flex: 0 0 62px; }
/* ─────────── удобства ─────────── */
.amen { display: flex; flex-direction: column; gap: 22px; }
.amen__group { display: flex; flex-direction: column; gap: 11px; }
.amen__group > b {
font: 700 12px var(--font-text);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--green);
}
.amen__list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 12px;
margin: 0;
padding: 0;
list-style: none;
}
.amen__list li {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 14px;
color: var(--ink);
}
.amen__list li::before {
content: "";
flex: 0 0 5px;
height: 5px;
border-radius: 50%;
background: var(--green);
transform: translateY(-3px);
}
.beds {
background: var(--green-soft);
border-radius: 16px;
padding: 18px 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.beds__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.beds__head b {
font-family: var(--font-head);
font-size: 19px;
font-weight: 600;
color: var(--ink-dark);
}
.beds__head span {
font: 700 12px var(--font-text);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--terra-dark);
}
.beds__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.beds__list li {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 14px;
color: var(--ink);
padding-bottom: 8px;
border-bottom: 1px solid rgba(77, 65, 57, 0.16);
}
.beds__list li:last-child { padding-bottom: 0; border-bottom: none; }
.beds__list b { color: var(--ink-2); font-weight: 400; }
/* ─────────── фотополоса ─────────── */
.strip { position: relative; height: 230px; overflow: hidden; }
.strip img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 42%;
}
.strip__cap {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 14px 20px;
/* 🔴 ДОСТУПНОСТЬ. ПОДПИСЬ ЛЕЖАЛА НА НЕБЕ И НЕ ЧИТАЛАСЬ ВОВСЕ.
Затемнение шло от нуля вверху до 0.7 внизу, а строка стоит в верхней
половине подписи — там, где затемнения ещё почти нет. Замерено
на самой фотографии: цвета кадра прочитаны из ![]()
через canvas,
сложены с затемнением по высоте строки, худшая точка — светлое небо:
контраст 1.36 при норме 4.5 (было 1.50 / 1.63 / 1.95 ниже по строке).
Число зависит от кадра: поставит владелец кадр светлее — станет хуже.
Поэтому затемнение набирает силу ДО строки, а не под ней: 0.82
достигнуто к 28% высоты подписи, а текст занимает 32–68%. 0.82
графита поверх ЧИСТО БЕЛОГО даёт 5.14 — то есть порог держится
на любой фотографии, какую бы владелец ни поставил, а не только
на нынешней. Верхние 28% остаются мягким переходом, как и были. */
background: linear-gradient(180deg, rgba(51, 56, 62, 0) 0%, rgba(51, 56, 62, 0.82) 28%);
font: 600 12px var(--font-text);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--on-dark-h);
}
/* ─────────── цены и условия ─────────── */
.price { display: flex; align-items: baseline; gap: 9px; margin: 12px 0 4px; }
.price b {
font-family: var(--font-head);
font-size: 44px;
font-weight: 700;
line-height: 1;
color: var(--terra-dark);
}
.price span { font-size: 16px; color: var(--ink-3); }
.price__sub { font-size: 15px; color: var(--ink-3); margin: 0 0 22px; }
.times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.times > div {
background: var(--card);
border: 1px solid var(--line);
border-radius: 13px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 5px;
}
.times b { font-family: var(--font-head); font-size: 19px; font-weight: 600; color: var(--ink); }
.terms { margin-top: 10px; display: flex; flex-direction: column; }
.terms > div {
display: flex;
justify-content: space-between;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--line);
}
/* 🔴 НАХОДКА ТЕЛЕФОНА Т-2. ЗАПРЕТ ПЕРЕНОСА СТОЯЛ НА ЧУЖОМ ТЕКСТЕ.
У правой половины строки условий стояло white-space: nowrap. Поставлено
оно было ради СУММ: «15 000 ₽» посреди строки рвать нельзя. Но в ту же
правую половину приходит и свободный текст владельца — настройка
`guests_note`, «дети считаются наравне со взрослым». Перенести его
браузеру запретили, ужать тоже (запрет переноса делает наименьшую ширину
узла равной всей строке), и он уехал за правый край экрана. Заодно левая
половина, которой не осталось места, рассыпала «всего в доме до 8 человек»
в столбик по одному-два слова.
🔴 СУММЫ ПРИ ЭТОМ НЕ РВУТСЯ, И ЭТО НЕ СЛУЧАЙНОСТЬ. booking.money() режет
разряды НЕРАЗРЫВНЫМ пробелом (U+00A0) ровно для этого — проверено:
«15 000 ₽» — это 0x31 0x35 0xA0 0x30 0x30 0x30 0xA0 0x20BD. Запрет
переноса в стилях был вторым, лишним поясом на том же месте, и именно он
ломал соседний случай. Не возвращать: место чужого текста здесь такое же
законное, как место суммы.
min-width: 0 у обеих половин — то, без чего гибкая раскладка не даёт
узлу стать уже своего содержимого. */
/* 🔴 НАХОДКА Г8-2 (глаза-8, боевой сайт, 17.08.2026). ОДНО ПРАВИЛО НА ДВА
РАЗНЫХ СЛУЧАЯ — И ЕГО ПЕРЕСТАВЛЯЛИ С КОНЦА НА КОНЕЦ.
В строке «Залог» справа вместо «10 000 ₽» стояло 1 / 0 / 0 / 0 / 0 / ₽,
по одному знаку в строку. Владелец снял это с телефона, в приватной
вкладке, то есть на свежем коде.
Разбор выше (находка Т-2) утверждает, что суммы не пострадают, потому
что разряды в них разделены НЕРАЗРЫВНЫМ пробелом. 🔴 Утверждение неверно.
Неразрывный пробел запрещает перенос В ПРОБЕЛЕ. `overflow-wrap: anywhere`
разрешает рвать В ЛЮБОМ МЕСТЕ, включая середину числа, — он для того
и заведён, чтобы не дать узлу вылезти за край любой ценой.
🔴 И это не всё, что делает `anywhere`. В отличие от `break-word`, он
учитывается при расчёте НАИМЕНЬШЕЙ СОБСТВЕННОЙ ширины узла: она
становится равной одному знаку. Для гибкой раскладки это значит
«этот узел можно сжимать до упора» — и она сжимает, когда слева тесно.
У строки «Залог» слева длинное пояснение про удержания, оно съедает
ширину, правой половине не остаётся места, и она разваливается в столбик.
🔴 ПОЧЕМУ ПОЧИНКА НЕ В ТОМ, ЧТОБЫ ВЕРНУТЬ КАК БЫЛО. В правую половину
строки условий приходят ДВА РАЗНЫХ СЛУЧАЯ, и у них противоположные
требования:
· СУММА — «10 000 ₽», «250 ₽ за сутки». Рвать нельзя вовсе, и сжимать
нельзя: она обязана занимать столько, сколько нужно;
· СВОБОДНЫЙ ТЕКСТ ВЛАДЕЛЬЦА — guests_note, cleaning_note, «дети
считаются наравне со взрослыми». Переносится обычным образом
по словам и обязан ужиматься.
Одно правило на оба случая ломало то один, то другой:
до 16.08 запрет переноса обоим свободный текст уехал за край
16.08 перенос где угодно обоим СУММЫ ВСТАЛИ СТОЛБИКОМ
Поэтому ниже случаи РАЗВЕДЕНЫ: `.terms b` — свободный текст,
`.terms b.summa` — сумма. Сторожа на оба конца сразу — test_glaza_8,
блок 2. Вернуть одно правило на оба случая нельзя ни в ту, ни в другую
сторону: на каждую сторону покраснеет свой сторож. */
.terms span {
font-size: 14.5px;
color: var(--ink);
min-width: 0;
/* Левая половина обязана УЖИМАТЬСЯ И ПЕРЕНОСИТЬСЯ, а не выталкивать
соседа: пояснение про удержания длинное, и место ему уступает
именно она. break-word, а не anywhere: рвать слово разрешается
только когда оно целиком не влезает в строку. */
overflow-wrap: break-word;
}
.terms span small { display: block; font-size: 13px; color: var(--ink-4); }
/* СЛУЧАЙ ПЕРВЫЙ: свободный текст владельца. Переносится по словам. */
/* 🔴 НАХОДКА О-4 (24.08.2026, владелец с телефона). СТРОКА ПРО ДЕТЕЙ
ВЫБИВАЛАСЬ ВЛЕВО — И ПРИЧИНА НЕ В НЕЙ, А В ЭТОМ ПРАВИЛЕ.
Замерено в рамке 390 (стенд _melochi_glaza.py), правый край правой
половины каждой строки условий:
Задаток при бронировании 10 000 ₽ 355
Залог 10 000 ₽ 355
Уборка входит в стоимость 355
Гости дети считаются… 337 и 256 ← рвано
Отмена за 5 суток возврат задатка 355
У соседей правая половина — короткая, в одну строку: её коробка обжимает
текст, и он сам собой встаёт вровень по правому краю (`space-between`
у строки). Свободный текст владельца в одну строку не влезает, переносится
и, будучи выключенным влево, обоих строк до правого края не дотягивает.
Глазами это читается ровно так, как записал владелец: строка стоит левее
соседних и в один ряд с ними не идёт.
Поэтому выключка вправо стоит здесь, у свободного текста, а не у строки
целиком: суммам она без надобности (их коробка и так по ширине текста),
а левой половине прямо вредна — подпись обязана начинаться слева.
Правило одной строкой и на своём селекторе; развод двух случаев,
объяснённый выше, не тронут. */
.terms b {
font-size: 14.5px;
font-weight: 700;
color: var(--terra-dark);
min-width: 0;
overflow-wrap: break-word;
text-align: right;
}
/* СЛУЧАЙ ВТОРОЙ: сумма. Не рвётся и не сжимается — ни при какой тесноте.
flex-shrink: 0 здесь важнее запрета переноса: без него гибкая раскладка
отберёт у суммы ширину, и запрет переноса обернётся выездом за край. */
.terms b.summa {
white-space: nowrap;
flex-shrink: 0;
min-width: auto;
overflow-wrap: normal;
}
.terms b.good { color: var(--green); }
/* 🔴 ДОСТУПНОСТЬ. ТЕРРАКОТА НА СВОЕЙ ЖЕ ПОДЛОЖКЕ ДАВАЛА 4.20 ПРИ НОРМЕ 4.5.
Причина не в цвете, а в соседстве: имя `warn` занято ещё и плашкой
состояний (.note/.ok/.err/.warn ниже по файлу), и
молча забирает у неё фон rgba(135,93,69,0.08). Терракота садится
на подкрашенную ею же подложку, и разница уходит под порог.
Берём --terra-dark: он уже назначен суммам задатка, а строка эта —
ровно про задаток («задаток остаётся»). Новых оттенков не заводим. */
.terms b.warn { color: var(--terra-dark); }
.terms b.plain { color: var(--ink); }
/* overflow-wrap — находка УБОРКА-1, разбор целиком стоит наверху, рядом
с .cover__lead. Сюда приходит `extra_charges`, приписка владельца про
доплаты: длинное слитное слово в ней уезжало за правый край, а край
его срезал (замер стенда, окно 360: вылезало 76 точек). Правило стоит
отдельным своим селектором, а не в общем списке через запятую, — этого
требует разборщик стилей у test_glaza_8. */
.terms__note {
margin-top: 14px;
font-size: 13px;
line-height: 1.5;
color: var(--ink-4);
overflow-wrap: anywhere;
}
/* ─────────── правила дома ─────────── */
.sec--dark h2 { margin: 8px 0 12px; }
.rules__lead { margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: var(--on-dark-2); }
.rules__who {
background: rgba(149, 159, 148, 0.22);
border: 1px solid rgba(194, 200, 189, 0.4);
border-radius: 16px;
padding: 18px 16px;
margin-bottom: 22px;
display: flex;
flex-direction: column;
gap: 9px;
}
.rules__who b {
font-family: var(--font-head);
font-size: 20px;
font-weight: 600;
line-height: 1.3;
color: var(--on-dark-h);
}
.rules__who span { font-size: 14.5px; line-height: 1.55; color: var(--on-dark-4); }
.rules__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; counter-reset: rule; }
.rules__list li {
display: flex;
gap: 13px;
padding: 16px 0;
border-top: 1px solid rgba(237, 231, 219, 0.16);
font-size: 15px;
line-height: 1.5;
color: var(--on-dark);
}
.rules__list li:last-child { border-bottom: 1px solid rgba(237, 231, 219, 0.16); }
.rules__list li::before {
counter-increment: rule;
content: counter(rule, decimal-leading-zero);
flex: 0 0 22px;
font: 700 12px var(--font-text);
color: var(--green-soft);
padding-top: 3px;
}
.rules__list b { font-weight: 700; }
.rules__tail { margin: 20px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--on-dark-2); }
/* Блок 2 «поля доверия»: запись в реестре под правилами дома. Цвет текста
и цвет ссылки взяты у соседей по этой же тёмной секции (.rules__tail
и счётчик правил), чтобы не заводить новую пару цветов на тёмном фоне:
каждая такая пара — это ещё одно место, где может не хватить различимости. */
.rules__reestr { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--on-dark-2); }
.rules__reestr a { color: var(--green-soft); }
/* ─────────── отзывы ─────────── */
.revs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.revs::-webkit-scrollbar { display: none; }
.rev {
flex: 0 0 236px;
border: 1px dashed var(--green-dash);
border-radius: 14px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 11px;
background: var(--card);
}
.rev__kind {
font: 600 12px var(--font-text);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-4);
}
/* 🔴 НАХОДКА ГЛАЗ Г7-3. Здесь жило правило `.rev i` — серые полоски на месте
ненаписанного текста отзыва. Убрано вместе с самими рамками: отзывов нет,
значит нет и раздела (см. index.html). Полоска-скелет уместна там, где
содержимое СЕЙЧАС ГРУЗИТСЯ и через миг придёт; у нас оно не грузится —
его просто нет, и рисовать его тень значило обещать несуществующее.
Правило ниже — под НАСТОЯЩИЙ текст отзыва, когда первый появится. */
.rev__tekst { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.rev__sign { margin-top: 4px; font-size: 13px; color: var(--ink-5); }
/* ─────────── как добраться ─────────── */
.route h2 { margin: 8px 0 16px; }
/* 🔴 НАХОДКА ГЛАЗ Г7-2. Здесь жило правило `.map` — прямоугольник 4:3
в серую полоску (var(--stub)) с подписью «КАРТА» посреди. Карты за ним
не стояло никакой: это была заглушка макета, вынесенная людям. Убрано
вместе с самим узлом (см. index.html); на его место встал блок «Сколько
ехать», и тот показывается, только когда владелец заполнил хоть одну
настройку. Пусто — в этой колонке нет НИЧЕГО, и решётка раздела просто
отдаёт всё место кнопкам связи.
Полоска `--stub` при этом остаётся в токенах: ею подписаны зоны галереи,
где заглушка законна — там кадр правда придёт, и рамка держит его место. */
.puti {
background: rgba(247, 243, 234, 0.55);
border: 1px solid rgba(220, 211, 194, 0.7);
border-radius: 16px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 2px;
}
.puti__cap {
font: 600 12px var(--font-text);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--green-ink);
margin-bottom: 8px;
}
/* Половины строки ужимаются и переносятся: справа стоит свободный текст
владельца («15 минут на машине, 9 км»), а он бывает какой угодно длины.
Ровно на этом обжёгся блок условий — находка Т-2, там текст владельца
уехал за правый край. Второй раз ту же яму не копаем. */
.puti__stroka {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid rgba(220, 211, 194, 0.55);
}
.puti__stroka:last-child { border-bottom: 0; }
.puti__stroka span { font-size: 14.5px; color: var(--ink-dark); min-width: 0; }
.puti__stroka b {
font-size: 14.5px;
font-weight: 700;
color: var(--green-ink-2);
min-width: 0;
text-align: right;
overflow-wrap: anywhere;
}
.route__btns { display: flex; gap: 9px; margin-top: 14px; }
.route__note { margin-top: 12px; }
/* ─────────── форма заявки ─────────── */
#form { padding: 40px 20px 44px; scroll-margin-top: 12px; }
#form h2 { margin: 8px 0 6px; }
#form .sec__lead { font-size: 14.5px; margin-bottom: 20px; }
.form__col { display: flex; flex-direction: column; gap: 12px; }
.form__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 🔴 ВОЛНА 1, БЛОК 6. ПОКАЗ ДАТ ОФОРМЛЕН КАК ПОКАЗ, А НЕ КАК ПОЛЕ ВВОДА.
Здесь стояли ровно те же три свойства, что у полей ввода строкой ниже:
background: var(--card), border: 1px solid var(--line), border-radius: 12px.
Гость видел четыре одинаковых прямоугольника, два верхних не нажимались —
и решал, что форма сломана.
Теперь ни фона поля, ни рамки поля, ни радиуса поля: дату отмечает полоса
слева, как подпись, а не как строку для ввода. Разойтись этим двум видам
заново не даст тест: он сверяет фактические свойства, а не селекторы. */
.form__dates > div {
background: transparent;
border: none;
border-left: 3px solid var(--green);
border-radius: 0;
padding: 2px 0 2px 11px;
display: flex;
flex-direction: column;
gap: 3px;
}
.form__dates b { font-size: 17px; font-weight: 700; }
/* «Изменить даты» — живая ссылка в календарь. Рядом с показом дат обязана
быть хоть одна работающая дорога: иначе человек, увидев не те даты, ищет,
куда нажать, не находит и уходит. */
.form__change {
align-self: flex-start;
min-height: var(--tap);
display: inline-flex;
align-items: center;
font-weight: 600;
color: var(--green);
text-decoration: underline;
}
/* 🔴 ВОЛНА 4, БЛОК 4-1. ВИДИМАЯ ПОДПИСЬ НАД ПОЛЕМ.
Раньше подписи полей формы стояли с классом .vh — размером 1×1 точка,
для программ чтения с экрана. Зрячий человек видел только подсказку
внутри поля, а она исчезает при первом набранном знаке.
Размер 14 точек — не меньше двенадцати (блок 4-2): подпись читают те же
люди 40–60 лет, что и всё остальное. Цвет --ink-2 — тот же, которым
набраны подписи в полях по всему сайту.
Отрицательный нижний отступ не прихоть: .form__col — колонка с зазором
12 точек между всеми детьми подряд, и подпись отстояла бы от своего поля
ровно так же, как от чужого. Минус 6 прижимает её к своему: 12 − 6 = 6
до своего поля против 12 до соседнего. */
.form__label {
font-size: 14px;
font-weight: 600;
color: var(--ink-2);
margin-bottom: -6px;
}
/* Подсказка, стоящая сразу ПОД своим полем, — та же беда с другого конца
и тот же приём. Сегодня такая одна: «Оставьте почту — пришлём подтверждение
заявки». .form__col — колонка с зазором 12 точек между всеми детьми подряд,
и подсказка отстояла бы от своего поля ровно так же, как от чужого «Гостей»
снизу: 25 точек вверх и 25 вниз, и по виду не понять, к какому полю она
относится. Минус 6 прижимает её к своему: 6 вверх против 12 вниз.
🔴 СТОЯЛО ЭТО В РАЗМЕТКЕ, style="margin-top:-6px", и переехало сюда
24.08.2026 (просьба окна «ГОСТЬ ПОСЛЕ КНОПКИ»: файл стилей ему править
не поручено, и оно честно записало долг вместо того, чтобы лезть в чужое).
🔴 ПОЧЕМУ ВЫБРАНА СОСЕДНЯЯ ПАРА «ПОЛЕ + ПОДСКАЗКА», А НЕ ПРОСТО
.form__why. Тем же классом набраны ещё две подсказки формы: «Даты
не выбраны» под парой дат и «Чтобы отправить…» под кнопкой. Им прижиматься
не к чему, и общий отрицательный отступ сдвинул бы обе. Отбор по соседству
с полем ввода описывает ровно то, ради чего отступ и нужен, — и остаётся
верным, если завтра такая подсказка появится под другим полем. */
.form__col input + .form__why { margin-top: -6px; }
.form__col input[type="text"],
.form__col input[type="tel"] {
height: 54px;
padding: 0 14px;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--card);
font-size: 16px;
width: 100%;
}
.form__col textarea {
padding: 13px 14px;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--card);
font-size: 16px;
line-height: 1.45;
resize: vertical;
width: 100%;
}
.form__guests {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
height: 54px;
padding: 0 8px 0 14px;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--card);
}
.form__guests > span { font-size: 16px; color: var(--ink-2); }
.form__consent {
display: flex;
gap: 11px;
align-items: flex-start;
padding: 4px 2px;
cursor: pointer;
}
.form__consent input {
width: 22px;
height: 22px;
flex: 0 0 22px;
margin: 1px 0 0;
accent-color: var(--green);
}
.form__consent span { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
/* Единственное место, где подчёркивание вернули: галочкой гость соглашается
на обработку своих данных, и ссылки на документы обязаны быть заметны.
Зелёный на кремовом в 13.5px читается как обычный текст. */
.form__consent a { text-decoration: underline; text-underline-offset: 2px; }
.form__why { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-4); }
.form__pair { display: flex; gap: 9px; }
/* ─────────── подвал ─────────── */
.foot {
padding: 34px 20px 108px;
background: var(--graphite);
color: var(--on-dark-2);
display: flex;
flex-direction: column;
gap: 22px;
}
.foot__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.foot__brand { display: flex; flex-direction: column; gap: 7px; }
.foot__brand b {
font-family: var(--font-head);
font-size: 22px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--on-dark-h);
}
.foot__brand span {
font: 600 12px var(--font-text);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--green-soft);
}
.foot .ladoshka { width: 66px; height: 66px; flex: 0 0 66px; }
.foot__about { font-size: 14px; line-height: 1.5; }
.foot__contacts { display: flex; flex-direction: column; gap: 9px; }
.foot__phone {
font-family: var(--font-head);
font-size: 25px;
font-weight: 600;
color: var(--on-dark-h);
}
.foot__links { display: flex; gap: 16px; font-size: 14px; }
.foot__links a, .foot__legal a { color: var(--green-soft); }
.foot__hr { height: 1px; background: rgba(237, 231, 219, 0.16); }
.foot__legal {
display: flex;
flex-direction: column;
gap: 7px;
font-size: 12.5px;
line-height: 1.5;
color: var(--on-dark-5);
}
.foot__legal .eyebrow { font-size: 12px; letter-spacing: 0.12em; color: var(--on-dark-6); }
.foot__legal > div { display: flex; gap: 16px; margin-top: 6px; }
/* Блок 2 «поля доверия»: та же запись в реестре, второе место показа.
Цвет наследуется от .foot__legal, ссылка — от .foot__legal a. */
.foot__reestr { margin: 6px 0 0; }
/* ─────────── липкая нижняя кнопка ─────────── */
.sticky {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
display: flex;
justify-content: center;
padding: 0 16px calc(var(--sticky-podval) + env(safe-area-inset-bottom));
pointer-events: none;
}
/* 🔴 НАХОДКА ГЛАЗ Г-1, вторая половина. Полоса, закрывающая собственную
форму, бесполезна вдвойне. На первом экране телефона прямо под ней лежит
карточка выбора дат: гость видел подписи «Заезд» и «Выезд», а самих полей
не видел — их закрывала кнопка, зовущая эти поля заполнить.
Пока карточка выбора дат на экране, полоса не нужна: дорога к действию
и так перед глазами. Полоса — про «вернуть кнопку, когда она уехала
вверх», и появляется она именно тогда.
Класс снимает скрипт. Начальное состояние — ВИДНА, а не спрятана: сломайся
скрипт, гость останется с сегодняшним поведением, а не без кнопки вовсе. */
.sticky--skryta { display: none; }
.sticky a {
pointer-events: auto;
width: 430px;
max-width: 100%;
height: var(--sticky-knopka);
border-radius: 15px;
background: var(--green);
color: var(--on-dark-h);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 16px;
font-weight: 700;
box-shadow: 0 12px 30px rgba(51, 56, 62, 0.36);
}
.sticky i { opacity: 0.6; font-style: normal; }
.sticky b { font-weight: 600; }
/* ─────────── живые состояния, которых в эталоне нет ─────────── */
.alert {
border-radius: 13px;
padding: 14px 16px;
font-size: 14.5px;
line-height: 1.5;
background: rgba(135, 93, 69, 0.12);
border: 1px solid rgba(135, 93, 69, 0.4);
color: var(--terra-dark);
}
.alert strong { display: block; font-weight: 700; margin-bottom: 3px; }
.alert--dark {
background: rgba(135, 93, 69, 0.26);
border-color: rgba(234, 224, 214, 0.4);
color: #F3E4DC;
}
/* Пустое состояние витрины. Имя НЕ .empty: так называется пустая клетка
в календаре админки (td.empty), и пунктирная рамка уезжала туда. */
.blank {
border-radius: 13px;
padding: 16px;
background: var(--card);
border: 1px dashed var(--green-dash);
font-size: 14px;
line-height: 1.5;
color: var(--ink-3);
}
/* ═══════════════════════════ простые страницы ═══════════════════════════
«Спасибо», «Политика», «Оферта», страница ошибки: тот же скин, без обложки.
Живут внутри .wrap — палитра и кегли те же, что у витрины. */
.hero {
border-radius: 18px;
background: var(--card);
border: 1px solid var(--line);
padding: 24px 18px;
margin: 18px 0;
text-align: center;
}
.hero h1 {
margin: 0 0 6px;
font-family: var(--font-head);
font-size: 29px;
font-weight: 600;
line-height: 1.15;
color: var(--ink);
}
.hero .tagline { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-3); }
ul.plain { padding-left: 20px; margin: 8px 0; }
ul.plain li { margin: 5px 0; line-height: 1.5; }
.page {
max-width: 720px;
margin: 0 auto;
background: var(--canvas);
min-height: 100vh;
padding: 32px 20px 48px;
}
.page h1 {
margin: 0 0 12px;
font-family: var(--font-head);
font-size: 29px;
font-weight: 600;
line-height: 1.15;
color: var(--ink);
}
.page h2 {
margin: 26px 0 10px;
font-family: var(--font-head);
font-size: 20px;
font-weight: 600;
color: var(--ink);
}
.page h3 { margin: 18px 0 8px; font-family: var(--font-head); font-size: 17px; font-weight: 600; }
.page p, .page li { font-size: 15px; line-height: 1.55; }
.page .muted { color: var(--ink-3); }
/* ═══════════════════════════ админка ═══════════════════════════
Та же палитра, но рабочая: кремовый фон, тёмная шапка, один акцент,
крупные элементы под палец. Порядок экранов не менялся. */
.wrap {
max-width: 900px;
margin: 0 auto;
background: var(--canvas);
min-height: 100vh;
padding: 0 14px 90px;
}
.wrap h1 { font-family: var(--font-head); font-size: 25px; line-height: 1.25; margin: 18px 0 10px; }
.wrap h2 { font-family: var(--font-head); font-size: 20px; font-weight: 600; margin: 26px 0 10px; }
.wrap h3 { font-family: var(--font-head); font-size: 17px; font-weight: 600; margin: 18px 0 8px; }
.wrap p { margin: 10px 0; }
.muted { color: var(--ink-3); font-size: 15px; }
.small { font-size: 14px; }
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0 -14px 12px;
padding: 12px 16px;
background: var(--graphite);
color: var(--on-dark-h);
}
.topbar .who {
font-family: var(--font-head);
font-weight: 600;
font-size: 19px;
letter-spacing: 0.04em;
color: var(--on-dark-h);
}
/* Сила селектора здесь не украшение: общее правило .wrap .btn-ghost идёт ниже
по файлу и при равном весе перекрасило бы «Выйти» в кремовый на тёмной шапке. */
.wrap .topbar .btn-ghost {
background: rgba(237, 231, 219, 0.16);
border-color: rgba(237, 231, 219, 0.34);
color: var(--on-dark-h);
}
/* 🔴 НАХОДКА ТЕЛЕФОНА Т-7. ЛЕНТА ВКЛАДОК ОБРЫВАЛАСЬ НА «ПЛО…».
Что было: лента прокручивалась вбок (overflow-x: auto), а полоса прокрутки
пряталась своим же правилом. На 390 точках в неё влезали четыре вкладки
с половиной, и «Настройки» не было видно вовсе — вместе с ценой, задатком,
буфером, временем заезда и всеми полями доверия. Признака прокрутки
на экране не было ни одного: ни полосы, ни обрыва, ни стрелки.
🔴 ПРИЗНАК НАЗВАН ПРЕЖДЕ, ЧЕМ ЧИНИТЬ — как велит грабля 01.08.
Тогда ленту чинили ПО ШИРИНЕ ЭКРАНА, и это было неверно: узкое окно
на компьютере — это по-прежнему мышь. Правильным признаком оказалось
«чем человек управляет» (см. правило внизу файла).
Здесь признак ТРЕТИЙ, и он не про экран и не про указатель:
ПОМЕЩАЕТСЯ ЛИ СПИСОК ЦЕЛИКОМ. Вкладок пять, они и есть вся карта
программы; вкладка, которой не видно, для владельца не существует.
Ни ширина, ни тип указателя на этот вопрос не отвечают.
Ответить на него правилом стилей нельзя: помещается или нет, считает
браузер. Поэтому вопрос СНЯТ — прокрутки нет вовсе, лента переносится
строками. Не помещается в строку — уходит на вторую, и видно по-прежнему
всё. Это работает на любой ширине и при любом указателе, и не зависит
от того, сколько вкладок будет завтра.
Не возвращать overflow-x: auto — за этим следит test_a16_25. */
nav.tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 4px 0 10px;
margin-bottom: 6px;
}
nav.tabs a {
flex: 0 0 auto;
padding: 0 16px;
height: 40px;
display: flex;
align-items: center;
border: 1px solid rgba(77, 65, 57, 0.2);
border-radius: 20px;
text-decoration: none;
color: var(--ink);
background: var(--card);
font-size: 13.5px;
font-weight: 600;
white-space: nowrap;
}
nav.tabs a.active { background: var(--graphite); color: var(--on-dark-h); border-color: var(--graphite); }
.badge {
display: inline-block;
min-width: 22px;
padding: 1px 7px;
margin-left: 6px;
border-radius: 999px;
background: var(--terra-dark);
color: var(--on-dark-h);
font-size: 13px;
text-align: center;
}
/* плашки */
.note, .ok, .err, .warn {
border-radius: 13px;
padding: 14px 16px;
margin: 12px 0;
border: 1px solid var(--line);
background: var(--card);
font-size: 14.5px;
line-height: 1.5;
}
.ok { background: rgba(75, 100, 72, 0.12); border-color: rgba(75, 100, 72, 0.4); color: #2E4A2C; }
.err { background: rgba(135, 93, 69, 0.12); border-color: rgba(135, 93, 69, 0.45); color: var(--terra-dark); }
.warn { background: rgba(135, 93, 69, 0.08); border-color: rgba(135, 93, 69, 0.3); color: #6B3E28; }
.err strong, .warn strong, .ok strong { display: block; margin-bottom: 3px; font-weight: 700; }
.err.compact { padding: 12px 14px; font-size: 14.5px; font-weight: 600; }
.err.compact a { color: inherit; text-decoration: none; display: block; }
.box {
border: 1px solid var(--line);
border-radius: 16px;
padding: 16px;
margin: 14px 0;
background: var(--card);
}
.box.soft { background: var(--canvas); }
/* Кнопки админки.
🔴 Все правила ниже обязаны быть привязаны к .wrap. Пока правило было
написано как просто `button`, оно доставало и до витрины: кнопкам «−/+»
и стрелкам календаря доставался кремовый цвет текста на кремовом фоне —
символы пропадали с экрана насовсем. Общих element-правил здесь не место. */
.wrap button, .wrap .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--tap);
padding: 12px 18px;
font: inherit;
font-weight: 600;
border-radius: 13px;
border: 1px solid var(--graphite);
background: var(--graphite);
color: var(--on-dark-h);
text-decoration: none;
cursor: pointer;
}
.wrap button:disabled, .wrap .btn:disabled { background: var(--busy); border-color: var(--busy); color: var(--ink-off-btn); cursor: not-allowed; }
.wrap .btn-main { background: var(--green); border-color: var(--green); color: var(--on-dark-h); font-size: 17px; }
.wrap .btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); font-weight: 600; }
/* 🔴 ОПАСНАЯ КНОПКА ЗАЛИТА ЦВЕТОМ, И ЭТО НЕ УКРАШЕНИЕ (задание №9, блок 6).
Замер глаз на экране смены ключа: «Да, сменить ключ» и «Нет, вернуться
назад» имели ОДИН фон rgb(247,243,234), один кегль и одну жирность —
отличался только цвет букв. Необратимое действие выглядело ровно так же,
как безобидное, да ещё стояло первым и во всю ширину.
Заливка обязана отличаться от обычной кнопки: цвет букв — единственное
отличие, которое не переживает ни слабый экран, ни солнце, ни дальтонизм. */
.wrap .btn-danger {
background: var(--terra-dark);
color: var(--on-dark-h);
border-color: var(--terra-dark);
font-weight: 700;
}
.btn-wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.btn-row > form { margin: 0; }
/* формы админки — тоже только внутри .wrap, чтобы не задеть форму витрины */
.wrap label { display: block; margin: 14px 0 0; font-weight: 600; font-size: 15px; }
.wrap label .hint { display: block; font-weight: 400; color: var(--ink-4); font-size: 13.5px; margin-top: 2px; }
/* 🔴 НАХОДКА ВЛАДЕЛЬЦА О-3, 24.08.2026. ПОЛЕ, КОТОРОЕ НЕ УМЕЕТ УЖИМАТЬСЯ,
ВЫЛЕЗАЕТ ЗА КРАЙ КАРТОЧКИ — И ГРОМЧЕ ВСЕГО ЭТО У ПОЛЕЙ ДАТ.
Владелец снял это на настоящем телефоне на вкладке «Цены»: поля
«С какого дня» и «По какой день» вылезали за границу белой карточки.
🔴 ЧЕСТНО: В БРАУЗЕРЕ, КОТОРЫЙ БЫЛ У ЭТОГО ОКНА, БЕДА НЕ ПОВТОРИЛАСЬ.
Замер на стенде (Chrome, настоящая раскладка в рамке заданной ширины,
все шесть вкладок админки на 360, 390 и 430):
/admin/prices @360 поле дат: ширина 283.2, наименьшая своя 115.1
/admin/prices @390 поле дат: ширина 313.6, наименьшая своя 115.1
/admin/prices @430 поле дат: ширина 353.6, наименьшая своя 115.1
за край родителя на всех шести вкладках и всех трёх ширинах — ничего
Значит движок у владельца другой (телефон), и своими глазами эту беду
это окно НЕ ВИДЕЛО. Поэтому чиним не «то, что видно», а сам зазор,
через который такая беда только и может пройти.
🔴 ЧЕМ ИМЕННО. У поля ввода есть СВОЯ наименьшая ширина, и берётся она
не из содержимого: браузер даёт полю ввода собственный размер (у поля
даты в него входит нарисованная им же дата и значок календаря). В гибкой
и в сеточной раскладке узел по умолчанию НЕ МОЖЕТ стать уже своей
наименьшей ширины (min-width: auto) — и когда места меньше, он не
ужимается, а вылезает. Ровно этот зазор окно «Телефон» закрывало
в блоке условий витрины (находка Т-2, min-width: 0 у обеих половин),
и приём здесь взят тот же, а не выдуман свой.
max-width: 100% — вторая половина того же: «width: 100%» задаёт ЖЕЛАЕМУЮ
ширину, и движок вправе оставить поле шире, если считает, что уже нельзя.
Верхний предел говорит прямо: шире своей коробки — никогда.
🔴 ЧЕГО ЗДЕСЬ НЕТ И БЫТЬ НЕ ДОЛЖНО — ОБРЕЗКИ. overflow: hidden убрал бы
признак беды (за край ничего не торчит) и оставил бы саму беду: часть
поля пропала бы с экрана, и владелец не увидел бы, что чего-то не видит.
Тот же довод, что у строки реквизитов (находка Т2-2, второй конец пары,
сторож test_telefon.test_t_07). За этим следит и наш сторож —
test_adminka_ponyatnost, блок О-3. */
.wrap input, .wrap textarea, .wrap select {
width: 100%;
min-width: 0;
max-width: 100%;
min-height: 54px;
padding: 12px 14px;
margin-top: 6px;
font: inherit;
font-size: 16px;
color: var(--ink);
border: 1px solid var(--line);
border-radius: 12px;
background: var(--card);
}
.wrap textarea { min-height: 84px; resize: vertical; }
.wrap input[type="checkbox"] {
width: 22px; height: 22px; min-height: 22px; margin: 0 10px 0 0; accent-color: var(--green);
}
.check { display: flex; align-items: flex-start; font-weight: 400; margin-top: 18px; }
.check span { flex: 1; font-size: 15px; }
/* На телефоне два поля в ряд не помещаются: поле даты уезжало за экран и вся
страница ехала вбок. Две колонки включаются только с 620px. */
.grid2 { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
/* 🔴 НАХОДКА ГЛАЗ Г5-4. ПАРА ПОЛЕЙ СТОИТ НА ОДНОЙ ЛИНИИ.
«С какого дня» и «По какой день» — одна пара, а поля ввода стояли
на разной высоте: под правым заголовком есть пояснение, под левым нет,
и правое поле уезжало вниз ровно на высоту этой строки. Пара, у которой
половинки не сходятся, читается как недогруженная страница, а поля дат
ещё и сравнивают глазами — их для того и поставили рядом.
Пояснение остаётся: оно объясняет, что день включительный, и убрать его
значило бы вылечить вид ценой смысла.
Лечение — подпись становится колонкой, и свободное место уходит МЕЖДУ
заголовком и полем: заголовки остаются на одной линии сверху, поля —
на одной линии снизу. Высоту задаёт та половинка, что выше; у неё
свободного места нет, и с ней ничего не происходит.
Правило общее для всех пар админки — на этих экранах беда одна и та же:
«Цены», «Календарь» (закрыть даты) и «Новая бронь». */
/* min-width: 0 — вторая половина находки О-3, и она про САМУ ПАРУ.
Половинка пары — узел сетки, и ей по умолчанию тоже нельзя стать уже
своего содержимого. Разреши ужиматься полю, но не половинке — и за край
поедет уже половинка вместе с полем внутри. Разрешать надо обоим. */
.grid2 > label {
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
}
/* ═══════ О-2. РАЗДЕЛЫ ЭКРАНА НАСТРОЕК ═══════
Экран настроек был одной длинной простынёй без единой перегородки.
Разделы отбиты рамкой и подписью, но НЕ закрыты: закрытая шторка прячет
в том числе и беду, а на этом экране первым стоит список недописанных
документов. Довод целиком — в templates/admin_settings.html, у оглавления.
🔴 min-width: 0 У РАМКИ — НЕ УКРАШЕНИЕ, А ТА ЖЕ НАХОДКА О-3.
У fieldset есть СВОЯ наименьшая ширина, и по умолчанию он не даёт себе
стать уже её — это его давняя особенность, а не наша ошибка. Обведи мы
поля рамкой и промолчи об этом, и на узком экране за край поехала бы уже
рамка вместе со всем, что внутри: чинили бы поля дат, а завели бы ту же
беду на десяти разделах сразу. */
.wrap fieldset.group {
min-width: 0;
margin: 18px 0;
padding: 0 14px 14px;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--canvas);
/* Оглавление ведёт сюда ссылкой-якорем. Без этого зазора подпись раздела
упирается в самый край окна и читается как обрезанная. */
scroll-margin-top: 12px;
}
.wrap fieldset.group > legend {
padding: 0 8px;
font-family: var(--font-head);
font-size: 16px;
font-weight: 600;
color: var(--ink);
}
/* Первое поле раздела не должно прижиматься к подписи вплотную: у .wrap label
отступ сверху 14, и внутри рамки его хватает. Здесь снимаем только лишний
отступ у самого первого узла, чтобы рамка не выглядела пустой сверху. */
.wrap fieldset.group > :first-child { margin-top: 6px; }
/* Оглавление разделов. Обычные ссылки-якоря, без единой строчки скрипта:
владельцу, зашедшему поменять номер телефона, один тычок вместо
пролистывания всего экрана.
Высота ссылки — --tap (наименьшая пальцевая цель в админке), а не 40,
как у ленты вкладок: это главная навигация ЭТОГО экрана, и промахиваться
по ней владелец будет с телефона. */
.ogl {
margin: 14px 0 18px;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--card);
}
.ogl__zagolovok { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.ogl ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ogl a {
display: flex;
align-items: center;
min-height: var(--tap);
padding: 0 14px;
border: 1px solid var(--line);
border-radius: 20px;
background: var(--canvas);
color: var(--ink);
text-decoration: none;
font-size: 13.5px;
font-weight: 600;
}
/* ═══════ О-7. ЛИПКАЯ ПОЛОСА «СОХРАНИТЬ» ═══════
Владелец дважды за десять минут потерял введённое, не нажав «Сохранить»:
кнопка была одна на все поля и лежала в самом низу простыни.
Решение принято владельцем проекта: липкая строка внизу экрана, такая же,
как полоса «Забронировать» на витрине. Разбор целиком — в шаблоне
templates/admin_settings.html, у самой полосы.
🔴 ЧИСЛА ВЗЯТЫ ГОТОВЫМИ, СВОИХ НЕ ЗАВЕДЕНО. Высота кнопки —
var(--sticky-knopka), отступ под ней — var(--sticky-podval), те же самые,
что у полосы витрины (объявлены в :root, там же расписано, почему они
считаются именно так). Кнопка у владельца и у гостя обязана быть одного
размера: это одна и та же полоса, только на разных экранах.
🔴 ТРЕТЬЕГО ЧИСЛА — МЕСТА ПОД ПОЛОСУ — ЗДЕСЬ НЕТ, И ЭТО НЕ ЗАБЫТО.
У витрины полоса лежит ПОВЕРХ страницы (position: fixed), поэтому под неё
отдельно отводится место (--sticky-h плюс --sticky-zapas), и два этих
числа приходится держать в согласии — за чем и следят test_a16_04
и test_resheniya.test_g1_02. Здесь полоса стоит В ПОТОКЕ (position: sticky)
и место под себя занимает сама. Разъезжаться нечему: числа одно.
position: sticky требует, чтобы у полосы был непрозрачный фон и своя
верхняя граница: под ней проезжают поля, и без фона они читались бы
сквозь кнопку. Отрицательные поля по бокам и снизу растягивают полосу
на всю ширину карточки: останься зазоры по 16 точек, в них было бы видно,
как под полосой едет содержимое. */
.polosa-sohranit {
position: sticky;
bottom: 0;
z-index: 5;
margin: 16px -16px -16px;
padding: 10px 16px calc(var(--sticky-podval) + env(safe-area-inset-bottom));
background: var(--card);
border-top: 1px solid var(--line);
/* Нижние углы — как у карточки (.box, 16px), минус её рамка в 1 точку. */
border-radius: 0 0 15px 15px;
box-shadow: 0 -10px 24px rgba(51, 56, 62, 0.10);
}
/* 🔴 ТА САМАЯ СТРОКА, КОТОРОЙ НЕ БЫЛО. Находка О-7 говорит дословно:
«Ничто не говорит человеку, что набранное ещё не записано». Вот она
и говорит — и говорит всегда, а не только когда что-то изменили:
слова верны в любом случае и ложной тревогой стать не могут. */
.polosa-sohranit__slovo {
margin: 0 0 8px;
font-size: 13px;
line-height: 1.35;
color: var(--ink-4);
}
.polosa-sohranit button { height: var(--sticky-knopka); }
/* четыре цифры */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.stats div {
border: 1px solid var(--line);
border-radius: 14px;
padding: 12px 14px;
background: var(--card);
}
.stats b { display: block; font-family: var(--font-head); font-size: 24px; font-weight: 600; line-height: 1.2; }
.stats span { font-size: 13.5px; color: var(--ink-4); }
/* ═══════ О-12. ДВЕ ДЕНЕЖНЫЕ ПЛИТКИ ═══════
Владелец видел обе цифры и не понимал, о чём они. Разбор — в шаблоне
templates/admin_calendar.html и в admin.py (DENGI_PODPISI_VLADELCA).
Во всю ширину — потому что цифр под числом теперь две строки: имя
владельца и точное имя правила. В квадрат 168 точек (две колонки на экране
390) они складываются в шесть строк мелким кеглем; во всю ширину ложатся
в две. И потому же, зачем их вообще поставили рядом: обе про деньги,
и смотреть на них надо одним взглядом, а не выхватывать из ряда
одинаковых квадратиков вместе с «заезжают сегодня».
Своей вёрстки при этом не заводится: плитка та же самая, .stats div,
с теми же рамкой, отступами и фоном. Меняется одно — сколько колонок
она занимает. */
.stats .stats__dengi { grid-column: 1 / -1; }
/* Точное имя правила: мельче и тусклее подписи владельца — читать его
каждый день не нужно, а вот тому, кто однажды спросит «почему они
не сходятся», оно и отвечает.
🔴 Кегль 12 — не «как можно мельче», а нижняя граница, до которой
в проекте уже опускались осознанно (.foot__legal .eyebrow). Ниже
не опускать: находка О-10 этого же дня — про то, чем кончается мелкий
кегль на дешёвом телефоне. */
.stats .stats__dengi small {
display: block;
margin-top: 3px;
font-size: 12px;
line-height: 1.35;
color: var(--ink-5);
}
/* календарь админки */
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 6px; }
.cal-nav .month { font-family: var(--font-head); font-size: 20px; font-weight: 600; text-transform: capitalize; }
.cal-nav a {
min-height: 44px; min-width: 52px; display: flex; align-items: center; justify-content: center;
border: 1px solid var(--line); border-radius: 12px; text-decoration: none;
color: var(--ink); background: var(--card);
}
table.cal { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
table.cal th { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--ink-5); padding: 6px 0; }
table.cal td { padding: 0; vertical-align: top; height: 62px; border-radius: 10px; background: var(--canvas); }
table.cal td.empty { background: transparent; }
table.cal a.day, table.cal .day {
display: block; height: 100%; min-height: 62px; padding: 5px 4px 4px;
text-decoration: none; color: inherit;
}
.day .dnum { font-size: 15px; font-weight: 600; }
/* 🔴 НАХОДКА ТЕЛЕФОНА Т-9. ИМЯ РЕЗАЛОСЬ НА ПЕРВЫХ ЧЕТЫРЁХ БУКВАХ.
Клетка на телефоне — ровно ~49px, и здесь стояла связка «не переносить +
обрезать многоточием». На широком экране она давала «Магомед» целиком,
а на настоящем телефоне — «манс…», «vfy», «ПРО…». Многоточие при этом
само съедает место: под буквы оставалось ещё меньше.
Имя в клетку приходит УЖЕ КОРОТКИМ: booking.short_name берёт первое слово
и только его — «Магомед Алиев» превращается в «Магомед» ещё в коде,
и по той же самой причине. Значит резать второй раз, уже стилями, незачем:
достаточно разрешить перенос, и первое слово ложится в одну-две строки.
Клетка от этого не расплывётся: высота td (62px) для таблицы —
НАИМЕНЬШАЯ, строка растёт под содержимое. Предел на три строки оставлен
на случай слова, которого не бывает: «ремонткухниисанузла» в причине
закрытия. Три строки по 10px как раз укладываются в сегодняшнюю высоту
клетки рядом с числом дня.
Не возвращать white-space: nowrap — за этим следит заслон
test_admin_16.test_a16_09. */
.day .dname {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
overflow-wrap: anywhere;
font-size: 10px;
letter-spacing: -.2px;
line-height: 1.15;
margin-top: 2px;
}
.day .dprice { display: block; font-size: 10px; color: var(--ink-4); margin-top: 1px; }
/* 🔴 «table.cal» в начале каждой строки — не украшение, а вся суть правки.
Выше стоит «table.cal td { background: var(--canvas) }», и он весит больше
(класс + два тега против класса и одного тега). Порядок строк тут ни при чём:
вес перебивает порядок. Поэтому все четыре клетки — «свободно», «занято»,
«закрыто», «заявка» — красились одним цветом rgb(237,231,219), при том что
легенда рядом обещала четыре разных.
Оба правила пришли ПЕРВЫМ коммитом: цветной календарь не работал ни дня.
Владелец смотрит на этот экран каждый день и занятость видит только по
именам в клетках.
Добавляя сюда новое состояние клетки, пишите его так же — с «table.cal».
Проверка test_shtab_7.test_b4_* держит это правило. */
table.cal td.free { background: var(--canvas); }
table.cal td.pending { background: rgba(135, 93, 69, 0.18); }
table.cal td.busy { background: var(--green-soft); }
table.cal td.blocked { background: var(--busy); }
/* Буфер — не «закрыто вами»: владелец этих ночей не закрывал, их закрыл сайт.
Та же косая штриховка, что у гостя на витрине: один смысл — один вид. */
table.cal td.bufer { background: repeating-linear-gradient(135deg,
var(--card) 0 5px, var(--ink-off) 5px 10px); }
td.past .dnum, td.past .dprice { color: var(--ink-off); }
td.is-today { box-shadow: inset 0 0 0 2px var(--terra-dark); }
td.picked { box-shadow: inset 0 0 0 2px var(--graphite); }
.legend { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--ink-4); }
.legend li { display: flex; align-items: center; gap: 6px; }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; border: 1px solid transparent; }
.sw.free { background: var(--canvas); border-color: var(--line); }
.sw.pending { background: rgba(135, 93, 69, 0.18); }
.sw.busy { background: var(--green-soft); }
.sw.blocked { background: var(--busy); }
.sw.bufer { background: repeating-linear-gradient(135deg,
var(--card) 0 3px, var(--ink-off) 3px 6px); border-color: var(--line); }
/* таблицы */
.tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0; }
table.grid { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.grid th, table.grid td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
table.grid th { background: var(--canvas); font-size: 13.5px; color: var(--ink-4); }
/* список броней */
.card {
display: block;
border: 1px solid var(--line);
border-left-width: 6px;
border-radius: 14px;
padding: 14px 16px;
margin: 10px 0;
text-decoration: none;
color: inherit;
background: var(--card);
}
/* display:block обязателен: без него соседние строки карточки склеиваются
в один абзац и телефон прилипает к сумме задатка. */
.card .line1 { display: block; font-weight: 700; font-size: 16px; }
.card .line2 { display: block; color: var(--ink-4); font-size: 14px; margin-top: 2px; }
.card.s-new { border-left-color: var(--terra); background: rgba(135, 93, 69, 0.1); }
.card.s-confirmed { border-left-color: var(--green); }
.card.s-prepaid { border-left-color: var(--green); background: rgba(75, 100, 72, 0.12); }
.card.s-checked_in { border-left-color: var(--graphite); background: rgba(51, 56, 62, 0.08); }
.card.s-checked_out { border-left-color: var(--ink-5); }
.card.s-cancelled, .card.s-expired { border-left-color: var(--line); background: var(--canvas); color: var(--ink-4); }
/* Вопрос владельцу о неприменённом обвале занятости (волна 1, блок 1).
Намеренно выглядит как ВОПРОС, а не как ещё одна строка счётчиков: пока
на него не ответили, занятость стоит на месте и брони не сняты. Раньше
второй пустой круг снимал их молча, и заметить это было нечем. */
.card .obval-vopros {
display: block;
margin: 12px 0 4px;
padding: 14px 16px;
border: 2px solid var(--terra);
border-radius: 12px;
/* Свой цвет здесь не заводится намеренно: сторож test_n21 справедливо
покраснел на новом оттенке — цвета, которого нет в брендбуке, дизайнер
не увидит никогда. Карточка вопроса и так отделена от карточки площадки
светлотой (--card светлее подложки s-new) и рамкой в две точки.
Заодно урок: сторож читает файл целиком, вместе с комментариями, —
код цвета нельзя даже упоминать в пояснении. */
background: var(--card);
color: var(--terra-dark);
}
.card .obval-vopros strong { font-weight: 700; }
.card .obval-vopros p { margin: 8px 0; font-size: 15px; line-height: 1.5; }
.card .obval-vopros form { margin-top: 12px; }
.pill {
display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12.5px;
background: var(--canvas); border: 1px solid var(--line);
}
.kv { margin: 0; }
.kv div { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.kv dt { flex: 0 0 44%; color: var(--ink-4); font-size: 14.5px; }
.kv dd { flex: 1; margin: 0; font-weight: 600; }
.total { font-family: var(--font-head); font-size: 22px; font-weight: 700; }
/* ═══════════════════════════ планшет ═══════════════════════════
В эталоне десктопа нет. Ниже только раскладка: палитра, кегли,
радиусы и отступы секций — те же, что на 430px. */
@media (min-width: 620px) {
.grid2 { grid-template-columns: 1fr 1fr; }
.stats { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 768px) {
.site {
max-width: 1180px;
margin: 26px auto 46px;
border-radius: 24px;
box-shadow: 0 26px 64px rgba(51, 56, 62, 0.22);
}
.sec, .gal__head, .gal__zones, .gal__shots, .gal__note, #dates, #form { padding-left: 40px; padding-right: 40px; }
.quick { padding: 0 40px; }
.incl { padding-left: 40px; padding-right: 40px; }
.foot { padding: 40px 40px 108px; }
.cover { height: 520px; }
.cover__title { font-size: 64px; }
.cover__lead { font-size: 22px; max-width: 460px; }
.gal__shots { grid-template-columns: repeat(3, 1fr); }
.shot--big { grid-column: span 3; }
.why { grid-template-columns: 1fr 1fr; }
.amen__list { grid-template-columns: repeat(3, 1fr); }
.strip { height: 320px; }
.revs { flex-wrap: wrap; overflow: visible; }
.rev { flex: 1 1 236px; }
.route__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.form__col { max-width: 640px; }
.wrap { padding-left: 20px; padding-right: 20px; }
.topbar { margin-left: -20px; margin-right: -20px; }
}
@media (min-width: 1024px) {
/* Липкая кнопка на десктопе не нужна: форма и телефон и так на виду. */
.sticky { display: none; }
/* Полосы нет — и места под неё не нужно: пустая полоса в конце страницы
выглядит недогруженной вёрсткой (находка Г-1). Прицел прокрутки
снимается там же и по той же причине: целиться выше нижнего края
незачем, когда внизу ничего не лежит. */
.site { padding-bottom: 0; }
html { scroll-padding-bottom: 0; }
.foot { padding-bottom: 40px; }
}
@media (min-width: 1280px) {
.cover { height: 620px; }
#dates { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; }
#dates .dates__head { grid-column: 1 / -1; }
.why { grid-template-columns: repeat(4, 1fr); }
.incl__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; align-items: start; }
.garden { margin-top: 0; }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
}
/* ═══════════════ горизонтальные ленты у посетителя с мышью ═══════════════
Признак здесь НЕ ширина экрана, и это принципиально. Ширина обманывает:
узкое окно на компьютере — это по-прежнему мышь, а широкий планшет —
палец. Ленты ломались именно в узком окне на компьютере, куда правило
по min-width не доставало.
Спрашиваем не «сколько пикселей», а «чем человек управляет»:
hover: hover — указатель умеет наводиться, не касаясь (мышь, трекпад);
pointer: fine — указатель точный, попадает в мелкие цели.
Вместе это и есть мышь. У такого посетителя горизонтальную ленту листать
нечем: полоса прокрутки скрыта своими же правилами, а колесо мыши крутит
страницу, а не ряд. Поэтому ряд переносим строками и прокрутку выключаем.
На телефоне и планшете (pointer: coarse, hover: none) правило НЕ включается:
там лента листается пальцем и остаётся ровно как в эталоне 430px.
🔴 nav.tabs ОТСЮДА УБРАНА (находка Т-7, 16.08.2026). Лента вкладок
админки больше не прокручивается вообще — ни при каком указателе, —
и правило здесь стало вторым местом, где сказано то же самое. Два места
про одно правило расходятся на первой правке: поправили бы здесь, а лента
осталась бы прокручиваемой на телефоне. Правило вкладок — одно, и оно
там же, где сама лента. */
@media (hover: hover) and (pointer: fine) {
.gal__zones, .revs { flex-wrap: wrap; overflow: visible; }
}