/* ================================================================ СТРАНИЦА КВАРТИРЫ — ВИД 4A (06.09.2026) Единственный новый слой вида страницы квартиры. Заменяет двенадцать инлайн-блоков стилей, накопленных с 23.08 по 02.09 — то самое «лоскутное одеяло», из-за которого владелец 02.09 отправил страницу в Клод Дизайн: «ты чуть тут двигаешь, чуть там, а оно всё сломано и должно быть пересмотрено, оставив структуру и наполнение… разметка, типографика, буквально всё». ЧТО ЭТО. Перенос сборки «4a» из пакета _dlya-dizaynera/ВЕРНУЛОСЬ-ИЗ-ДИЗАЙНА-05-09-вечер-цель-4a/ Спецификация: README пакета, разделы 1а (рецепт), 4а (блоки), 10а (правки). Вид блоков — «Блоки финалов 3-4.dc.html» (варианты «4»), поведение — «Абая 10 финал v2.dc.html», доступность и группы фото — «финал v3». План работ и отклонения — ПЛАН-ПЕРЕНОСА-4A-06-09.md в корне проекта. КАК ВКЛЮЧАЕТСЯ. Классом на теле: . Все правила здесь начинаются с body.apt-4a — это и порт на шесть квартир в одну строку, и возможность снять весь новый вид одним движением. Специфичность body.apt-4a .x = (0,2,1) — бьёт «html body .x» (0,1,2) из shared-convergence и старых инлайн-блоков, но НЕ бьёт !important. Там, где в старых блоках стоит !important, блок снимается целиком. ТОКЕНЫ. Новых хексов не вводим: #121417 чернила → hsl(var(--ink)) #5c6066 серый текст → hsl(var(--ink) / .62) rgba(18,20,23,.1) → hsl(var(--ink) / .1) #e9e6e0 подложка фото → hsl(var(--paper-soft)) #f4f2ee плашка → hsl(var(--paper-soft)) #1FA855 зелёный → var(--wa) ⛔ хекс: hsl(var(--wa)) не работает Белый #fff у карточек 4a — осознанно: бумага сайта кремовая, карточки в макете белые, это и даёт им отделиться от фона. ШКАЛА КЕГЛЕЙ. 13 · 15 · 17 · 20 · 24 · 30 · 42. Кегль 24 добавлен решением владельца 06.09 (H1 телефона: на 30 не влезает в строку). ПОРОГИ ШИРИНЫ — три, у каждого своя причина: 900 — содержимое: мозаика галереи, две колонки удобств, три отзыва в ряд, пропорция карты. Порог спецификации 4a. 1024 — шапка сайта, шторка, языки. Порог общего CSS, не трогаем. 1280 — двухколонник с карточкой брони и скрытие панели. Оставлен как был: «на 1024 левая колонка ужималась до 572px» (23.08). ================================================================ */ /* ── 1. Основа страницы ──────────────────────────────────────── */ body.apt-4a { background: hsl(var(--paper)); color: hsl(var(--ink)); text-wrap: pretty; /* [ШКАЛА 06.09] Кегль 24 добавлен решением владельца: H1 «Абая 10, ЖК Столичный-2» на 30 не влезает в строку 390, а перенос на две ломает первый экран. Объявлен ЗДЕСЬ, а не в css/tokens.css: правило проекта от 09.07 — шаред-CSS без отдельного «ок» не править. */ --s-24: 24px; } /* Контейнер 4a — 1120 против 1280 у остального сайта: на широком экране строка в 1280 пикселей длиннее комфортной меры чтения. */ body.apt-4a .apt2-shell { max-width: 1120px; } /* ── 2. Шапка сайта и языки ──────────────────────────────────── */ /* Телефон начинается с фотографии, шапки нет — рецепт владельца 05.09. Разметку шапки и шторки НЕ удаляем: site.js ищет .site-header__burger и #site-drawer, без них initDrawer молча выходит. Прячем стилем. */ @media (max-width: 899.98px) { body.apt-4a .site-header { display: none; } /* Отступ под абсолютную шапку больше не нужен, иначе над фото 96 пустых px */ body.apt-4a .v2-main--offset { padding-top: 0; } /* [ЯЗЫКИ 06.09] Переключатель живёт ТОЛЬКО в шапке: в шторке он скрыт (.site-drawer__locale, shared-convergence), в подвале скрыт (.drf__prefs, dr-footer.css:198). Раз шапки на телефоне нет — возвращаем ряд в подвал, иначе гость остаётся без переключателя вовсе. Слово владельца 05.08: «Не убираем. Запомни на хуй. Они есть». */ body.apt-4a .drf__prefs { display: inline-flex; } } /* ── 2. Ритм страницы ────────────────────────────────────────── */ /* ⛔ Главная причина, по которой страница вышла на полтора экрана длиннее макета: у секций базовый отступ 56 px сверху И снизу, и между соседними блоками набегало 112 px пустоты — при том, что каждый блок несёт ещё и свой отступ. Ритм задаём ОДИН раз и в одном месте: воздух даёт внутренний отступ блока, границу — волосяная линия. Замер до правки: 663 px воздуха между блоками. */ body.apt-4a main > section, body.apt-4a .apt2-section { padding-top: 0; padding-bottom: 0; margin: 0; } /* Один шаг ритма на всю страницу */ body.apt-4a .apt2-host, body.apt-4a .f4-hl, body.apt-4a .f4-beds, body.apt-4a .apt2-rituals, body.apt-4a .rb, body.apt-4a .apt2-district, body.apt-4a .nd8, body.apt-4a .apt2-cond { padding: 24px 0; margin: 0; border-top: 0; border-bottom: 1px solid hsl(var(--ink) / .1); } /* Последний блок перед подвалом линию снизу не рисует: её роль берёт подвал */ body.apt-4a .apt2-cond { border-bottom: 0; } /* Район и «Что рядом» — один блок с подзаголовком, а не две секции подряд: так в макете, и так у гостя одна мысль вместо двух. */ body.apt-4a .nd8 { padding-top: 0; border-top: 0; } body.apt-4a .apt2-district { border-bottom: 0; padding-bottom: 0; } /* ── 2а. Заголовки секций — одно правило на всю страницу ─────── */ /* Было три разных заголовка: .apt2-h2 (300 вес, кегль от 30 до 56), .rb__title (600, своя шкала) и «Что рядом» на .apt2-h2 внутри nx-port. Отсюда и бралось ощущение лоскутного одеяла. Теперь один вид: 20 на телефоне, 30 на широком, вес 600 везде. Надзаголовки («О квартире», «Условия») скрыты общим CSS — кикеров на сайте нет с 27.06, это не трогаем. */ body.apt-4a .apt2-h2, body.apt-4a .rb__title, body.apt-4a .f4-h2 { margin: 0 0 8px; font-family: var(--font-sans); font-size: var(--s-20); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: hsl(var(--ink)); } @media (min-width: 900px) { body.apt-4a .apt2-h2, body.apt-4a .rb__title { font-size: var(--s-30); line-height: 1.2; } } /* ── 3. Галерея ──────────────────────────────────────────────── */ body.apt-4a .apt2-gallery__grid { position: relative; } /* Скроллер ленты. Ниже 900 — горизонтальная лента из сорока кадров со снапом; от 900 — display:contents, и пятёрка мозаики становится прямыми детьми сетки .apt2-gallery__grid (иначе сетка увидит один элемент вместо пяти). */ @media (max-width: 899.98px) { /* Кадр во всю ширину окна. Полями управляем на КОНТЕЙНЕРЕ галереи, а не отрицательным margin у ленты: отрицательный margin давал горизонтальную прокрутку (замер: 410 против 390), потому что боковой зазор .apt2-shell не равен --apt2-pad. */ body.apt-4a .apt2-gallery .apt2-shell { width: 100%; max-width: none; padding-inline: 0; margin-inline: 0; } body.apt-4a .apt2-gallery__side { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: hsl(var(--paper-soft)); } body.apt-4a .apt2-gallery__side::-webkit-scrollbar { display: none; } body.apt-4a .apt2-gallery__main, body.apt-4a .apt2-gallery__tile { flex: none; width: 100%; aspect-ratio: 4 / 3; scroll-snap-align: start; border-radius: 0; overflow: hidden; } body.apt-4a .apt2-gallery__main img, body.apt-4a .apt2-gallery__tile img { width: 100%; height: 100%; object-fit: cover; } /* Кнопка «Показать все 40 фото» на телефоне не нужна: её работу делает счётчик кадров в углу — он же вход в полный список. */ body.apt-4a .apt2-gallery__open { display: none; } } @media (min-width: 900px) { body.apt-4a .apt2-gallery__side { display: contents; } /* Кадры с шестого — только для ленты телефона */ body.apt-4a .apt2-gallery__tile--extra { display: none; } body.apt-4a .apt2-gallery__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: 480px; aspect-ratio: auto; border-radius: 16px; overflow: hidden; background: hsl(var(--paper-soft)); } body.apt-4a .apt2-gallery__main { grid-column: 1 / 2; grid-row: 1 / 3; border-radius: 0; } body.apt-4a .apt2-gallery__tile { border-radius: 0; } body.apt-4a .apt2-gallery__open { position: absolute; right: 16px; bottom: 16px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px hsl(var(--ink) / .7); font: 500 var(--s-13) / 1 var(--font-sans); color: hsl(var(--ink)); cursor: pointer; z-index: 2; } } /* Хром поверх кадров: две круглые кнопки сверху и счётчик снизу. Лежат в .apt2-gallery__grid, а НЕ в скроллере, иначе уезжают вместе с лентой. */ body.apt-4a .apt2-gallery__grid > .dr-back:not(.apt2-share), body.apt-4a .apt2-gallery__grid > .apt2-share { position: absolute; top: 12px; z-index: 3; width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0; border: 0; border-radius: 999px; background: #fff; color: hsl(var(--ink)); box-shadow: 0 2px 8px hsl(var(--ink) / .18); text-decoration: none; } /* ⛔ Селектор «назад» обязан исключать .apt2-share: кнопка «Поделиться» несёт ОБА класса (dr-back apt2-share), и без :not она получала left:12px из первого правила и right:12px из второго — при заданной ширине побеждает left, и обе кнопки садились одна на другую в левом углу. */ body.apt-4a .apt2-gallery__grid > .dr-back:not(.apt2-share) { left: 12px; font-size: 0; } body.apt-4a .apt2-gallery__grid > .apt2-share { right: 12px; left: auto; } /* Подписи прячем: над фотографией работает форма значка, а текст остаётся озвучкой для скринридера (aria-label у ссылки, aria-live у кнопки). */ body.apt-4a .apt2-gallery__grid > .apt2-share span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } body.apt-4a .apt2-gallery__grid > .dr-back svg, body.apt-4a .apt2-gallery__grid > .apt2-share svg { width: 20px; height: 20px; } /* Под лентой не должно быть воздуха: снизу к фото сразу идёт заголовок. Прежний отступ ставил снятый блок poryadok-23-08. */ body.apt-4a .apt2-gallery { padding-bottom: 0; } @media (max-width: 899.98px) { body.apt-4a .apt2-gallery__grid { display: block; aspect-ratio: auto; height: auto; padding: 0; } } body.apt-4a .apt2-gallery__count { position: absolute; right: 12px; bottom: 12px; z-index: 3; /* 44, а не 40 из макета: счётчик — единственный вход в полный список фото на телефоне, а минимальная цель нажатия в проекте 44 px. */ min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; border: 0; border-radius: 8px; background: hsl(var(--ink) / .72); color: hsl(var(--paper)); font: 500 var(--s-13) / 1 var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer; } /* ⛔ Скрытие счётчика на широком стоит ПОСЛЕ его базового правила: одинаковая специфичность, побеждает то, что ниже по файлу. Раньше правило лежало выше, и счётчик налезал на кнопку «Показать все 40 фото» в углу мозаики. */ @media (min-width: 900px) { body.apt-4a .apt2-gallery__count { display: none; } } /* Хендофф — вторая кнопка «посмотреть все фото» под галереей. Работу делают счётчик и кнопка в углу; оставлен в разметке ради отката, скрыт. */ body.apt-4a .apt2-gallery__handoff { display: none; } /* Подъём кадра при наведении снят: движение над фотографиями запрещено («говно при наведении подъём фоток и звёздочки», 28.07), а на таче правило без гарда (hover:hover) залипало после тапа. */ body.apt-4a .apt2-gallery__main:hover img, body.apt-4a .apt2-gallery__tile:hover img { transform: none; } /* ── 4. Заголовок ────────────────────────────────────────────── */ body.apt-4a .apt2-head { padding: 20px 0 0; } /* H1 кеглем 24 на телефоне: «Абая 10, ЖК Столичный-2» на 30 не влезает в строку ни на 390, ни на 360, а перенос на две строки съедает первый экран. Вес 600 против 300 у остального сайта — это вид 4a, страница им и живёт. */ body.apt-4a .apt2-head__title { margin: 0; font-size: var(--s-24); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; } body.apt-4a .apt2-head__place { margin: 4px 0 0; font-size: var(--s-15); line-height: 1.45; color: hsl(var(--ink) / .62); } body.apt-4a .apt2-head__ratingline { margin: 8px 0 0; } body.apt-4a .apt2-head__rating { display: inline-flex; align-items: baseline; /* ⛔ Без gap: он вставлял пробел перед запятой — «4.7 , 21 отзыв». Воздух после звезды даёт её собственный margin. */ gap: 0; font-size: var(--s-15); font-weight: 500; line-height: 1.45; color: hsl(var(--ink)); text-decoration: none; } body.apt-4a .apt2-head__star { margin-right: 5px; font-size: var(--s-15); line-height: 1; } /* Хит-зона строки оценки: текст 22 px высотой, палец требует 44 */ body.apt-4a .apt2-head__rating { position: relative; } body.apt-4a .apt2-head__rating::after { content: ''; position: absolute; inset: -11px -6px; } /* Подчёркнута только вторая половина строки — она и есть ссылка «в отзывы» */ body.apt-4a .apt2-head__rating .tabular:last-child { font-weight: 400; color: hsl(var(--ink) / .62); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: hsl(var(--ink) / .35); } body.apt-4a .apt2-head__facts { margin: 2px 0 0; font-size: var(--s-15); line-height: 1.45; } /* Лид на телефоне скрыт: в рецепте 4a его нет, первый экран занимают фото, название и цена. На широком он возвращается под строку фактов. */ body.apt-4a .apt2-head__sub { display: none; } /* ── 5. Хозяин ───────────────────────────────────────────────── */ body.apt-4a .apt2-host { display: flex; align-items: center; gap: 12px; padding: 20px 0; border-bottom: 1px solid hsl(var(--ink) / .1); } body.apt-4a .apt2-host__ava { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; /* Кадр смещён вверх: на квадрате из портрета иначе срезается лоб */ object-position: 50% 20%; } body.apt-4a .apt2-host__text { min-width: 0; line-height: 1.4; } body.apt-4a .apt2-host__name { margin: 0; font-size: var(--s-15); font-weight: 400; color: hsl(var(--ink) / .62); } /* Единственный вес 600 в блоке — имя. Два веса на блок, как в макете. */ body.apt-4a .apt2-host__name b { font-weight: 600; color: hsl(var(--ink)); } body.apt-4a .apt2-host__line { margin: 0; font-size: var(--s-13); color: hsl(var(--ink) / .62); } /* ⛔ Ни срока ответа, ни процентов отклика здесь нет. «Отвечаем за пару минут» — обещание, которое нельзя держать круглосуточно; проценты площадок меняются каждый месяц и протухают молча. Статусы стоят в блоке отзывов со ссылками. */ /* ⛔ Две пилюли «Позвонить» и «WhatsApp» у хозяина сняты с телефона: липкая панель с той же кнопкой стоит на экране всегда, и правило «в кадре одна кнопка действия» здесь нарушалось трижды подряд. На широком панели нет — там пилюли остаются. */ body.apt-4a .apt2-host__contact { display: none; } @media (min-width: 900px) { body.apt-4a .apt2-host__contact { display: flex; gap: 8px; margin: 0 0 0 auto; } body.apt-4a .apt2-host__contact a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; box-shadow: 0 0 0 1px hsl(var(--ink) / .22); font-size: var(--s-13); font-weight: 500; color: hsl(var(--ink) / .82); text-decoration: none; } } /* ── 7. Удобства ─────────────────────────────────────────────── */ body.apt-4a .apt2-rituals { padding: 24px 0 28px; } /* Секция — сетка с зазором 20 px. Свои отступы детей складывались с зазором: от заголовка до списка выходило 14 + 20 = 34 при 14 в макете, от списка до кнопки 20 + 20 = 40 при 20. Зазор оставляем сетке, у детей снимаем — новых чисел не вводим, убираем двойной счёт. [ЗАЗОРЫ УДОБСТВ 09.09] */ body.apt-4a .apt2-rituals__intro { margin: 0; } body.apt-4a .apt2-rituals__intro h2 { margin-bottom: 0; } body.apt-4a .apt2-rituals .am-toggle { margin-top: 0; } /* ── Кнопки «Все …» — форма Airbnb. СЛОВО ВЛАДЕЛЬЦА 09.09: «аирбнбшную» ── ⛔ ЭТО ОТМЕНЯЕТ ЗАПРЕТ 28.07 «кнопка обнимает свой текст, полоса в 350 px с двумя словами по центру читается как пустая плашка». Владелец выбрал форму Airbnb, увидев замер обеих. Узкую кнопку НЕ возвращать без его нового слова — запрет 28.07 больше не действует на эти три кнопки. Замер Airbnb живьём 09.09 (`_qa/airbnb-zamer3-09-09.js`, кадр `_qa/airbnb-09-09/05-popap.png`): 342×48 при экране 390, радиус 12, рамки нет, фон #F2F2F2 на белой бумаге. Почему заливка процентом, а не их кодом цвета: #F2F2F2 на белом — ровно 5% затемнения. На нашей КРЕМОВОЙ бумаге тот же серый читается грязным пятном, а 5% чернил дают то же соотношение. Шаг совпадает с правилом 28.07 «контейнерам — подложка шагом 4%», ховер идёт на следующую ступень. Кегль остаётся 15: у Airbnb 16, но в нашей шкале 13·15·17·20·30·42 шестнадцати нет, и заводить размер ради одной кнопки — плодить шкалу. Ширину даём и `width`, и `justify-self`, и `align-self`: родители у трёх кнопок разные — где-то сетка, где-то блок, где-то флекс. Специфичность через `html`: инлайн страницы (`main.nx-port .am-toggle`, apartment-abay10.html:209) держит пилюлю 999 и padding 12/22 и выигрывает ПО ПОРЯДКУ — специфичность у него та же 0,2,1, что у правила ниже по файлу. Та же поломка, что у ссылок карт 07.09, лечение то же. ⛔ `.u2-btn` («Подробнее» в условиях) сюда НЕ входит: это текстовая ссылка, и в макете она тоже ссылка. [КНОПКИ AIRBNB 09.09] */ html body.apt-4a .am-toggle, html body.apt-4a .nd8__more, html body.apt-4a .rb__more-link { width: 100%; justify-self: stretch; align-self: stretch; min-height: 48px; padding-block: 0; padding-inline: 24px; border: 0; border-radius: 12px; background: hsl(var(--ink) / .05); box-shadow: none; } html body.apt-4a .am-toggle:hover, html body.apt-4a .nd8__more:hover, html body.apt-4a .rb__more-link:hover { background: hsl(var(--ink) / .09); } /* ⛔ На телефоне ОДНА колонка. Две по 160 px ломали три подписи из шести на 390 и четыре на 360: строки распадались на две, значки уезжали по вертикали, и ровный список превращался в рваную сетку. Две колонки — только от 480. */ body.apt-4a .am-ico { display: grid; grid-template-columns: 1fr; gap: 12px 20px; margin: 0; padding: 0; list-style: none; } body.apt-4a .am-ico li { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: var(--s-15); } body.apt-4a .am-ico svg { flex: none; width: 24px; height: 24px; color: hsl(var(--ink) / .72); } /* Кнопки «Все …» — одна семья на всю страницу: удобства, места, отзывы */ /* ⛔ Кнопка обнимает свой текст, а не растягивается во всю ширину: полоса в 350 px с двумя словами по центру читается как пустая плашка, а не как действие. Ширину задаёт содержимое — это правило на все кнопки «Все …». */ body.apt-4a .am-toggle, body.apt-4a .nd8__more, body.apt-4a .rb__more-link, body.apt-4a .u2-btn { /* width: fit-content, а не align-self: родители у этих кнопок разные — где-то grid, где-то блок; fit-content жмёт ширину до текста в любом из них. */ width: fit-content; justify-self: start; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 20px; padding: 0 20px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px hsl(var(--ink) / .7); font-family: var(--font-sans); font-size: var(--s-15); font-weight: 500; color: hsl(var(--ink)); text-decoration: none; cursor: pointer; } body.apt-4a .am-toggle:hover, body.apt-4a .nd8__more:hover, body.apt-4a .rb__more-link:hover, body.apt-4a .u2-btn:hover { background: hsl(var(--paper-soft)); } @media (min-width: 480px) { body.apt-4a .am-ico { grid-template-columns: 1fr 1fr; } } /* ── 8. Отзывы ───────────────────────────────────────────────── */ body.apt-4a .rb { padding: 32px 0 0; margin-top: 8px; border-top: 1px solid hsl(var(--ink) / .1); } /* ⛔ Боковые поля блоку отзывов возвращаем: обнулив padding у .rb__shell, я упёр строки площадок в края экрана, и оценка справа обрезалась. Поля — те же, что у остальных блоков страницы (--apt2-pad), ширина — по контейнеру страницы. */ body.apt-4a .rb__shell { width: auto; max-width: 1120px; margin-inline: auto; padding-inline: var(--apt2-pad); } /* Лид под заголовком — как в макете: он объясняет, откуда отзывы, до того как гость увидит три чужих логотипа. */ body.apt-4a .rb__intro { margin: 4px 0 0; font-size: var(--s-13); line-height: 1.5; color: hsl(var(--ink) / .62); } /* Сводка: крупная оценка, звёзды, счёт — и три площадки строками-ссылками */ body.apt-4a .rb__head { display: block; margin-bottom: 12px; } /* Заголовок блока — сама оценка «★ 4.7, 21 отзыв», как в макете. Отдельная крупная оценка со звёздами скрыта: это был второй слой того же самого. Узлы оставлены в разметке — в них по-прежнему пишут оба генератора. */ body.apt-4a .rb__title-star { margin-right: 5px; } body.apt-4a .rb__title-count { font-weight: 400; color: hsl(var(--ink) / .62); } body.apt-4a .rb__scores-num-row, body.apt-4a .rb__scores-stars-row { display: none; } /* ⛔ flex-direction: row обязателен: у .rb__scores в общем CSS стоит column, и оценка со звёздами вставали двумя строками вместо одной. */ body.apt-4a .rb__scores { margin-top: 4px; max-width: 560px; display: flex; flex-flow: row wrap; align-items: baseline; gap: 4px 10px; } /* ⛔ Правило, возвращавшее старую строку «4.7 / 5 ★★★★★ 21 отзыв», снято: оценка живёт в заголовке блока. При равной специфичности побеждает то, что ниже по файлу — прежний display:none выше по файлу молча проигрывал. */ body.apt-4a .rb__scores-num { font-size: var(--s-20); font-weight: 600; letter-spacing: -.01em; } body.apt-4a .rb__scores-of, body.apt-4a .rb__scores-count { font-size: var(--s-13); color: hsl(var(--ink) / .62); } body.apt-4a .rb__scores-list { flex: 1 0 100%; margin: 10px 0 0; padding: 0; list-style: none; } body.apt-4a .rb__scores-row-link { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; padding: 8px 0; border-bottom: 1px solid hsl(var(--ink) / .1); text-decoration: none; color: hsl(var(--ink)); } body.apt-4a .rb__scores-row:last-child .rb__scores-row-link { border-bottom: 0; } /* Слева имя площадки, под ним статус мелким серым; справа оценка, под ней число отзывов. В прежнем виде статус стоял в одну строку с именем, строка не влезала на 390 и рвалась посередине. */ body.apt-4a .rb__scores-row-left { display: flex; flex-direction: column; gap: 1px; min-width: 0; } body.apt-4a .rb__scores-row-value { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; } body.apt-4a .rb__scores-row-value .rb__scores-value-num { order: 1; } body.apt-4a .rb__scores-row-value .rb__scores-value-of { order: 1; } /* Оценка и «/ 10» — одной строкой, число отзывов под ними */ body.apt-4a .rb__scores-row-value { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: baseline; column-gap: 3px; } body.apt-4a .rb__scores-row-value .rb__scores-row-count { grid-column: 1 / -1; text-align: right; } body.apt-4a .rb__scores-platform { display: flex; flex-direction: column; gap: 1px; font-size: var(--s-15); font-weight: 500; } body.apt-4a .rb__shx-word { font-size: var(--s-13); font-weight: 400; color: hsl(var(--ink) / .62); text-decoration: none; border-bottom: 0; } body.apt-4a .rb__scores-row-count { order: 2; font-size: var(--s-13); color: hsl(var(--ink) / .62); } body.apt-4a .rb__scores-value-num { font-size: var(--s-15); font-weight: 600; } body.apt-4a .rb__scores-value-of { font-size: var(--s-13); color: hsl(var(--ink) / .62); } /* ЛЕНТА КАРТОЧЕК на телефоне. ⛔ Текст отзыва НЕ режется: ни clamp, ни маски, ни «читать далее» — запрет владельца от 02.07, подтверждён 06.09 против макета, где стояла маска 113 px. Поэтому карточки разной высоты и выравниваются по верху, а не растягиваются под самую длинную. */ body.apt-4a .rb__grid { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 16px calc(var(--apt2-pad) * -1) 0; padding: 2px var(--apt2-pad); columns: auto; list-style: none; } body.apt-4a .rb__grid::-webkit-scrollbar { display: none; } body.apt-4a .rb__grid-item { flex: none; width: 300px; scroll-snap-align: start; break-inside: auto; margin: 0; } body.apt-4a .rvx__card { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px hsl(var(--ink) / .12); } /* Шапка карточки: оценка слева, месяц справа — гость видит оценку первой */ body.apt-4a .rvx__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } body.apt-4a .rvx__when { font-size: var(--s-13); color: hsl(var(--ink) / .62); } body.apt-4a .rvx__quote { margin: 0; font-size: var(--s-15); line-height: 1.5; white-space: pre-wrap; } body.apt-4a .rvx__reply { margin: 0; padding: 10px 12px; border-left: 0; border-radius: 12px; background: hsl(var(--paper-soft)); font-size: var(--s-13); line-height: 1.5; color: hsl(var(--ink) / .62); } body.apt-4a .rvx__reply-by { display: block; font-weight: 600; color: hsl(var(--ink)); } body.apt-4a .rvx__by { margin-top: auto; padding-top: 4px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } body.apt-4a .rvx__name { font-size: var(--s-15); font-weight: 500; } body.apt-4a .rvx__from, body.apt-4a .rvx__meta { font-weight: 400; color: hsl(var(--ink) / .62); } body.apt-4a .rvx__meta { font-size: var(--s-13); } body.apt-4a .rvx__score { font-size: var(--s-15); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } body.apt-4a .rvx__meta { display: none; } body.apt-4a .rvx__score-of { font-size: var(--s-13); font-weight: 400; color: hsl(var(--ink) / .62); } body.apt-4a .rvx__source { flex: none; font-size: var(--s-13); color: hsl(var(--ink) / .62); } /* Карточка не поднимается и не бросает тень при наведении (запрет 01–03.07) */ body.apt-4a .rvx__card:hover { transform: none; box-shadow: 0 0 0 1px hsl(var(--ink) / .12); } /* Хвост: узкая форма «Показан 1 из 21» больше не нужна — на телефоне видны все три карточки. Широкая форма превращена в кнопку «все отзывы». */ body.apt-4a .rb__more { margin: 0; } body.apt-4a .rb__more-narrow { display: none !important; } body.apt-4a .rb__more-wide { display: inline; } @media (min-width: 900px) { body.apt-4a .rb__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; overflow: visible; margin: 24px 0 0; padding: 0; } body.apt-4a .rb__grid-item { width: auto; } body.apt-4a .rvx__card { padding: 20px; } } /* ── 9. Район ────────────────────────────────────────────────── */ /* Секция светлая: «светлый кусок мне ближе» (вердикт 29.08). Тёмная лента из общего CSS перебивается здесь, а не инлайн-блоком nx-port. */ body.apt-4a .apt2-district { background: hsl(var(--paper)); color: hsl(var(--ink)); padding: 32px 0 0; margin-top: 32px; border-top: 1px solid hsl(var(--ink) / .1); } body.apt-4a .apt2-district__grid { display: block; } body.apt-4a .apt2-h2--paper { color: hsl(var(--ink)); } body.apt-4a .apt2-district__place { margin: 4px 0 16px; font-size: var(--s-15); color: hsl(var(--ink) / .62); } body.apt-4a .apt2-district__lede { margin: 14px 0 0; font-size: var(--s-15); line-height: 1.5; color: hsl(var(--ink)); } /* Кадр карты 4:3 — тот же, что у картинки внутри. Контейнер стоял квадратом, картинка своим 4:3 проигрывала и растягивалась: блок «Район» нёс 350 px карты вместо 263 и был выше макета на 88 px. Число не новое — то же 4 / 3, что строкой ниже у картинки. [КАДР КАРТЫ 09.09] */ body.apt-4a .apt2-district__map { aspect-ratio: 4 / 3; display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px hsl(var(--ink) / .08); background: hsl(var(--paper-soft)); } /* На телефоне карта 4:3, а не полоской 1180×520: в полоске 340×150 подпись пина не читается и район не понять. Кадр обрезается по центру, пин там же. */ body.apt-4a .apt2-district__map img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } body.apt-4a .apt2-district__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } body.apt-4a .apt2-district__links span { display: none; } body.apt-4a .apt2-district__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; box-shadow: 0 0 0 1px hsl(var(--ink) / .14); font-size: var(--s-13); font-weight: 500; color: hsl(var(--ink)); text-decoration: none; } /* [БЕЗ ЛИНИИ ПОД КАРТОЙ 07.09] Слово владельца 07.09: «Ссылки нужны без подчеркивания под картой». Совпадает с правилом сайта от 27.07: линию имеют только ссылки В ТЕКСТЕ, а это пилюли — линия внутри пилюли читается ошибкой вёрстки. Правило выше (0,2,2) не срабатывало: за этот элемент дерутся ЧЕТЫРЕ слоя, и побеждал инлайн страницы `main.nx-port .apt2-district .apt2-district__links a` (0,3,2), который идёт после apt-4a.css. Берём (0,3,3) через `html` + `.apt2-district` — тот же приём, что уже применён на странице для хит-зон. Без !important. Ниже по цепочке ещё `dr-map-fix.css` (0,2,1) — проигрывает обоим. */ html body.apt-4a .apt2-district .apt2-district__links a { text-decoration: none; } @media (min-width: 900px) { body.apt-4a .apt2-district__map, body.apt-4a .apt2-district__map img { aspect-ratio: 1180 / 520; } } /* ── 10. Что рядом ───────────────────────────────────────────── */ body.apt-4a .nd8 { padding: 24px 0 0; } body.apt-4a .nd8 .apt2-h2 { font-size: var(--s-17); margin: 28px 0 2px; } body.apt-4a .nd8__first { margin: 0; padding: 0; list-style: none; } body.apt-4a .nd8__row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid hsl(var(--ink) / .1); } body.apt-4a .nd8__ico { flex: none; width: 24px; height: 24px; color: hsl(var(--ink) / .72); } body.apt-4a .nd8__txt { min-width: 0; } body.apt-4a .apt2-near__name { margin: 0; font-size: var(--s-15); font-weight: 500; } body.apt-4a .apt2-near__note { margin: 0; font-size: var(--s-13); color: hsl(var(--ink) / .62); } body.apt-4a .nx-min { font-weight: 400; color: inherit; } body.apt-4a .b9x-wa { margin-top: 24px; border: 0; padding: 0; } body.apt-4a .b9x-wa p { margin: 0; font-size: var(--s-15); line-height: 1.5; color: hsl(var(--ink) / .62); } body.apt-4a .b9x-wa a, body.apt-4a .b9x-guide a { color: hsl(var(--ink)); } /* [ТЕКСТ, НЕ КНОПКА 07.09] Слово владельца 07.09: «Едете в клинику и эта вот тема пусть остается текстом, ты сделал уродскую кнопку и текст». Ссылка «Напишите адрес в WhatsApp» стоит ВНУТРИ предложения, поэтому обязана быть текстом. Зелёную пилюлю рисовал инлайн страницы `.b9x-wa a` (фон, поле, радиус), переживший переход на 4a; правило строкой выше перебивало только `color` — выходил тёмный текст на зелёном, он же разрывал предложение пополам. Гасим пилюлю целиком. Линия под словом ОСТАЁТСЯ: по правилу сайта от 27.07 её имеют именно ссылки в тексте. `html` в начале — чтобы обойти инлайн `main.nx-port …:active` (0,3,2), который поджимал ссылку как кнопку. */ html body.apt-4a .b9x-wa p a { display: inline; background: none; padding: 0; border-radius: 0; font-size: inherit; font-weight: 500; color: hsl(var(--ink)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: hsl(var(--ink) / .35); } html body.apt-4a .b9x-wa p a:active { scale: 1; } @media (hover: hover) { html body.apt-4a .b9x-wa p a:hover { color: hsl(var(--ink)); text-decoration-color: hsl(var(--ink)); } } body.apt-4a .b9x-guide { margin: 8px 0 0; font-size: var(--s-15); } /* Шторка мест — тот же приём, что шторка удобств: панель снизу на телефоне, окно по центру на широком, прокрутка внутри, фон затемнён. */ body.apt-4a .nd8-sheet { position: fixed; inset: 0; z-index: 300; display: none; } body.apt-4a .nd8-sheet.is-on { display: block; } body.apt-4a .nd8-sheet__scrim { position: absolute; inset: 0; background: hsl(var(--ink) / .42); } body.apt-4a .nd8-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; top: 8vh; display: flex; flex-direction: column; background: hsl(var(--paper)); border-radius: 16px 16px 0 0; box-shadow: 0 -16px 48px hsl(var(--ink) / .25); } body.apt-4a .nd8-sheet__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 8px; border-bottom: 1px solid hsl(var(--ink) / .1); } body.apt-4a .nd8-sheet__top b { font-size: var(--s-17); font-weight: 600; } body.apt-4a .nd8-sheet__close { width: 44px; height: 44px; flex: none; margin-right: -10px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: none; color: hsl(var(--ink) / .7); cursor: pointer; } body.apt-4a .nd8-sheet__body { overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 28px; } body.apt-4a .nd8-sheet .apt2-near__grp { padding-top: 22px; } body.apt-4a .nd8-sheet .apt2-near__group { margin: 0 0 4px; font-size: var(--s-13); font-weight: 500; letter-spacing: 0; text-transform: none; color: hsl(var(--ink) / .62); } body.apt-4a .nd8-sheet .apt2-near__list { margin: 0; padding: 0; list-style: none; } body.apt-4a .nd8-sheet .apt2-near__item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid hsl(var(--ink) / .08); } body.apt-4a .nd8-sheet .apt2-near__note { flex: none; max-width: 50%; text-align: right; } /* ── 12. Панель телефона и карточка брони ────────────────────── */ /* Панель белая во всю ширину вместо плавающей тёмной пилюли. Класс .apt2-bar сохранён: на нём держатся подушка body снизу, клиренс правовой строки подвала и место клика для счётчика. Высота 69 px влезает в готовую подушку 72 px. */ body.apt-4a .apt2-bar { left: 0; right: 0; bottom: 0; width: auto; max-width: none; transform: none; padding: 0; } body.apt-4a .apt2-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); border-radius: 0; border-top: 1px solid hsl(var(--ink) / .1); background: #fff; color: hsl(var(--ink)); box-shadow: 0 -6px 20px hsl(var(--ink) / .06); backdrop-filter: none; } body.apt-4a .apt2-bar__left { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } body.apt-4a .apt2-bar__price { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; } body.apt-4a .apt2-bar__price-prefix { display: none; } body.apt-4a .apt2-bar__price-amount { font-size: var(--s-17); font-weight: 600; letter-spacing: -.01em; color: hsl(var(--ink)); } body.apt-4a .apt2-bar__price-unit { display: inline; font-size: var(--s-13); color: hsl(var(--ink) / .62); } /* Кнопка дат — вторая строка левой колонки. Скрипт полосы снимает с неё hidden, когда собрался календарь, и пишет выбранный диапазон в первый span. */ body.apt-4a .apt2-bar__dates { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-height: 0; padding: 0; border: 0; background: none; color: hsl(var(--ink)); font-family: var(--font-sans); font-size: var(--s-13); line-height: 1.3; } body.apt-4a .apt2-bar__dates span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: hsl(var(--ink) / .4); } body.apt-4a .apt2-bar__chev { flex: none; color: hsl(var(--ink) / .62); } /* Невидимая хит-зона: сама строка дат 17 px высотой, а палец должен попадать в 44. Приём проекта — ::after с отрицательным inset, раскладка не сдвигается. */ body.apt-4a .apt2-bar__dates { position: relative; } body.apt-4a .apt2-bar__dates::after { content: ''; position: absolute; inset: -14px -8px; } body.apt-4a .apt2-bar__ctas { flex: none; } body.apt-4a .apt2-bar__cta { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 12px; background: var(--wa); color: #fff; font-size: var(--s-15); font-weight: 600; white-space: nowrap; } body.apt-4a .apt2-bar__cta svg { width: 20px; height: 20px; } body.apt-4a .apt2-bar__cta-label-long { display: none; } body.apt-4a .apt2-bar__cta-label-short { display: inline; } /* Кольцо фокуса на белой панели было бумажного цвета «под тёмный бар» — на белом оно невидимо. Возвращаем чернильное. */ body.apt-4a .apt2-bar__cta:focus-visible { outline: 2px solid hsl(var(--ink)); outline-offset: 3px; } /* Строка доступности в паспорте скрыта: то же «Свободна с …» теперь стоит в панели на телефоне и в карточке на широком, а дублировать её третий раз незачем. */ body.apt-4a .dr-avail { display: none; } /* Кнопка «Проверить свободные даты» под паспортом снята: она дублировала левую половину панели, которая всегда на экране. Решение владельца 05.09 — строку дат под фото убрать. Строки про скидки и месячную цену ОСТАЮТСЯ: на телефоне это единственное место, где гость видит их не открывая календарь. ⛔ Сам блок .dtb прятать нельзя — внутри него лежат шторка календаря и затемнение. */ body.apt-4a .dtb__btn { display: none; } /* ⛔ И строки про скидки, и строка месячной цены с телефона сняты. Они стояли ровно там, где гость решает — сразу под названием — и перебивали цену двумя абзацами серого текста. Скидки он видит в календаре при выборе дат и в карточке брони на широком; месячная цена — в календаре от 28 ночей. */ body.apt-4a .dtb__disc { display: none; } /* Карточка брони */ body.apt-4a .apt2-book { padding: 24px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px hsl(var(--ink) / .1), 0 8px 28px hsl(var(--ink) / .08); } body.apt-4a .apt2-book__price { margin: 0; display: flex; align-items: baseline; gap: 6px; } body.apt-4a .apt2-book__price b { font-size: var(--s-20); font-weight: 600; letter-spacing: -.01em; } body.apt-4a .apt2-book__price span { font-size: var(--s-15); color: hsl(var(--ink) / .62); } body.apt-4a .apt2-book__note { margin: 4px 0 0; font-size: var(--s-13); line-height: 1.5; color: hsl(var(--ink) / .62); } body.apt-4a .apt2-book__free { margin: 12px 0 0; font-size: var(--s-13); font-weight: 500; } body.apt-4a .apt2-book__free:empty { display: none; } body.apt-4a .apt2-book__fields { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px hsl(var(--ink) / .3); background: #fff; } body.apt-4a .apt2-book__f { display: block; min-height: 56px; padding: 10px 12px; border: 0; background: #fff; text-align: left; font-family: var(--font-sans); cursor: pointer; } body.apt-4a .apt2-book__f:first-child { border-right: 1px solid hsl(var(--ink) / .3); } body.apt-4a .apt2-book__f:hover { background: hsl(var(--paper-soft)); } body.apt-4a .apt2-book__f-lab { display: block; font-size: var(--s-13); color: hsl(var(--ink) / .62); } body.apt-4a .apt2-book__dates, body.apt-4a .apt2-book__f-val { display: block; margin-top: 2px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: hsl(var(--ink)); font-size: var(--s-15); font-weight: 500; text-align: left; } body.apt-4a .apt2-book__wa { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 16px; border-radius: 12px; background: var(--wa); color: #fff; font-size: var(--s-15); font-weight: 600; text-decoration: none; } body.apt-4a .apt2-book__trust { margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid hsl(var(--ink) / .1); list-style: none; display: grid; gap: 6px; font-size: var(--s-13); line-height: 1.5; color: hsl(var(--ink) / .62); } body.apt-4a .apt2-book__trust a { color: hsl(var(--ink)); } /* Подушка под панелью: базовые 112 px считались под плавающую пилюлю с отступом снизу. Панель 4a прижата к краю и высотой 69 — хватает 84. */ @media (max-width: 1279.98px) { body.apt-4a #v2-main { padding-bottom: 84px; } } /* ── 13. Календарь ───────────────────────────────────────────── */ /* Липкий низ: итог, кнопка и сноска всегда на экране, календарь прокручивается под ними. Отрицательные поля гасят собственный отступ шторки, иначе у полосы появляются белые поля по бокам. */ body.apt-4a .dtb__foot { position: sticky; bottom: calc(-12px - env(safe-area-inset-bottom)); z-index: 2; margin: 12px -12px calc(-12px - env(safe-area-inset-bottom)); padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: hsl(var(--paper)); box-shadow: 0 -12px 24px -12px hsl(var(--ink) / .18); } body.apt-4a .dtb__out { margin: 0; } /* ⛔ «Очистить даты» без переноса: на 360 текст ломался на две строки и толкал кнопку */ body.apt-4a .dtb__reset { white-space: nowrap; } @media (min-width: 768px) { body.apt-4a .dtb__foot { bottom: -24px; margin: 12px -28px -24px; padding: 12px 28px 24px; } } /* ── 11. Условия ─────────────────────────────────────────────── */ body.apt-4a .apt2-cond { padding: 32px 0 0; margin-top: 32px; border-top: 1px solid hsl(var(--ink) / .1); } /* Три группы вместо одного списка из десяти строк: гость ищет не «условия», а ответ на свой вопрос — про деньги, про правила или про заселение. */ body.apt-4a .u2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px 48px; max-width: none; } body.apt-4a .u2-grp__h { margin: 0; padding: 8px 0; font-size: var(--s-15); font-weight: 600; } body.apt-4a .u2-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border: 0; font-size: var(--s-15); line-height: 1.45; } body.apt-4a .u2-row .st-ico { flex: none; width: 24px; height: 24px; color: hsl(var(--ink) / .72); } /* «Подробнее» — подчёркнутая ссылка-кнопка, а не третья семья кнопок на странице */ body.apt-4a .u2-btn { min-height: 44px; margin-top: 4px; padding: 0; border-radius: 0; background: none; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; justify-content: flex-start; } body.apt-4a .u2-btn:hover { background: none; } body.apt-4a .st-agree { margin: 20px 0 0; max-width: 44rem; font-size: var(--s-13); line-height: 1.55; color: hsl(var(--ink) / .62); } /* Ссылки на оферту и правила оплаты — тексту 17 px, пальцу нужно 44. ⛔ Хит-зона добирается ТОЛЬКО по вертикали: по горизонтали зоны двух соседних ссылок в одном абзаце наедут друг на друга, и промах уведёт не туда. */ body.apt-4a .st-agree a { position: relative; color: hsl(var(--ink)); } body.apt-4a .st-agree a::after { content: ''; position: absolute; inset: -13px 0; } /* Свод условий в модалке: заголовку группы нужен запас сверху, иначе прокрутка по «Подробнее» ставит его ровно под липкую шапку и он не виден. */ body.apt-4a .ux-dlg h4 { scroll-margin-top: 56px; } @media (min-width: 900px) { body.apt-4a .nd8__first { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; } body.apt-4a .nd8-sheet__panel { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(680px, calc(100vw - 32px)); max-height: min(82vh, 760px); border-radius: 16px; box-shadow: 0 32px 80px hsl(var(--ink) / .3); } } @media (min-width: 900px) { body.apt-4a .apt2-host { gap: 16px; padding: 24px 0; } body.apt-4a .apt2-host__ava { width: 64px; height: 64px; } body.apt-4a .apt2-host__contact { margin-left: auto; } } /* ── 6. Факты и спальные места ───────────────────────────────── */ body.apt-4a .apt2-facts { padding: 0; } body.apt-4a .f4-hl { display: grid; gap: 18px; padding: 24px 0; border-bottom: 1px solid hsl(var(--ink) / .1); } body.apt-4a .f4-row { display: flex; gap: 14px; align-items: flex-start; } body.apt-4a .f4-ico { flex: none; color: hsl(var(--ink) / .72); } body.apt-4a .f4-txt { min-width: 0; } body.apt-4a .f4-t { margin: 0; font-size: var(--s-15); font-weight: 500; } body.apt-4a .f4-s { margin: 2px 0 0; font-size: var(--s-13); color: hsl(var(--ink) / .62); } body.apt-4a .f4-beds { padding: 24px 0; border-bottom: 1px solid hsl(var(--ink) / .1); } body.apt-4a .f4-h2 { margin: 0 0 4px; font-size: var(--s-20); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; } body.apt-4a .f4-row--bed { align-items: center; gap: 12px; padding: 8px 0; } body.apt-4a .f4-bed { margin: 0; font-size: var(--s-15); line-height: 1.45; color: hsl(var(--ink) / .62); } body.apt-4a .f4-bed b { font-weight: 500; color: hsl(var(--ink)); } @media (min-width: 900px) { body.apt-4a .apt2-head { padding: 24px 0 20px; } body.apt-4a .apt2-head__title { font-size: var(--s-30); line-height: 1.15; } /* На широком строка фактов идёт ПЕРЕД лидом: сперва сухая сводка, потом проза. В разметке порядок обратный (на телефоне лид скрыт), меняем порядком колонки. */ body.apt-4a .apt2-head__lede { display: flex; flex-direction: column; } body.apt-4a .apt2-head__title { order: 1; } body.apt-4a .apt2-head__place { order: 2; } body.apt-4a .apt2-head__ratingline { order: 3; } body.apt-4a .apt2-head__facts { order: 4; margin-top: 10px; font-size: var(--s-17); font-weight: 600; } body.apt-4a .apt2-head__sub { order: 5; } body.apt-4a .apt2-head__sub { display: block; margin: 8px 0 0; max-width: 42rem; font-size: var(--s-15); font-weight: 400; line-height: 1.55; color: hsl(var(--ink) / .62); } } /* ── 14. Боковые поля: возврат [ПОЛЯ 07.09] ──────────────────── */ /* Короткая запись `padding: 24px 0` в правилах выше обнуляет БОКОВОЕ поле. Для блоков внутри страницы это верно, но эти четыре — сама оболочка (.apt2-shell), и поле сайта (--apt2-pad, 20px) им нужно. Что было сломано, замер на 390: одиннадцать строк текста лежали на самом краю экрана вплотную — «Спальные места», «Что в квартире», «Условия проживания», три заголовка групп условий, три кнопки «Подробнее» и согласие с офертой. Заодно девять линий-разделителей из девятнадцати растягивались во всю ширину 390. Почему именно 20, а не другое число: в макете 4a ВСЕ пятнадцать линий идут 20/20, ни одной во всю ширину. Берём переменную сайта, нового числа не вводим. Правило стоит В КОНЦЕ файла намеренно: специфичность у него та же, что у правил выше и у правила на 900+, спор решает порядок в файле. */ body.apt-4a .apt2-host, body.apt-4a .apt2-facts, body.apt-4a .apt2-rituals, body.apt-4a .apt2-cond { padding-inline: var(--apt2-pad); } /* Линии-разделители тоже отходят от края. Рамка сидит СНАРУЖИ поля, боковым отступом её не сдвинуть — поэтому линию рисует полоска-псевдоэлемент, а сама рамка становится прозрачной. Рамку НЕ убираем совсем: её 1 px держит высоту, иначе страница подпрыгнет на семь пикселей. Замер 07.09: в макете 4a пятнадцать линий из пятнадцати идут 20/20, во всю ширину — ни одной. У нас во всю ширину шли семь. ⛔ Панель брони (.apt2-bar__inner) не трогаем: это не разделитель секций, а край липкой панели, он и должен идти от края до края. */ body.apt-4a .apt2-host, body.apt-4a .apt2-rituals, body.apt-4a .nd8, body.apt-4a .rb, body.apt-4a .apt2-cond { position: relative; } body.apt-4a .apt2-host, body.apt-4a .apt2-rituals, body.apt-4a .nd8, body.apt-4a .rb { border-bottom-color: transparent; } body.apt-4a .rb, body.apt-4a .apt2-district, body.apt-4a .apt2-cond { border-top-color: transparent; } /* ⛔ Полоску рисует ТОЛЬКО нижняя граница блока. Верхнюю не рисуем ни у кого: у отзывов, района и условий есть своя рамка сверху, и вместе с нижней рамкой соседа она давала ДВЕ линии в пяти пикселях друг от друга. Дефект был и до правки полей, просто на линиях во всю ширину его не замечали (кадр 07.09). Рамку сверху оставляем прозрачной, а не убираем: её 1 px держит высоту. */ body.apt-4a .apt2-host::after, body.apt-4a .apt2-rituals::after, body.apt-4a .nd8::after, body.apt-4a .rb::after { content: ''; position: absolute; left: var(--apt2-pad); right: var(--apt2-pad); height: 1px; background: hsl(var(--ink) / .1); pointer-events: none; } body.apt-4a .apt2-host::after, body.apt-4a .apt2-rituals::after, body.apt-4a .nd8::after, body.apt-4a .rb::after { bottom: -1px; } /* ── 15. Три листа — одна форма, по Airbnb [ЛИСТЫ AIRBNB 09.09] ────────────── Слово владельца 09.09: «если делаем попапы по нажатию, пусть будут как у аирбнб». Замер их листа живьём (`_qa/airbnb-zamer3-09-09.js`, кадр `_qa/airbnb-09-09/05-popap.png`): 390×832, верх 12, радиус верхних углов 32, фон белый, затемнения позади НЕТ, закрывашка 16×16 СЛЕВА с отступом 24/16, заголовок 26/700 едет с содержимым, заголовок группы 18/500, строка пункта высотой 73 при кегле 14. Листов в проекте ТРИ и все три собраны по-разному — отсюда и три разные поломки: удобства инлайном в странице, места в этом файле, условия — родной `