/* XII ключей — /new/ · читаемость и зоны нажатия (28.10.2026) Грузится ПОСЛЕДНИМ: правки перебивают style/inspect/reels/decor без !important. Почему файл вообще нужен. Макет резиновый: html{font-size:calc(100vw/390*10)} на телефоне, то есть 1rem = 10px при ширине 390 и 8,2px при 320. Поэтому абзац в 1.4rem на айфоне SE превращается в 11,5px. Поднять базовый кегль нельзя — вместе с ним вырастут отступы и сетка, блоки перестанут влезать. Значит ставим ПОЛ в пикселях через max(), а наверху оставляем rem. */ /* Фокус: 1px золотой на фото почти не виден. */ :focus-visible{outline-width:2px} /* Поля ввода. Safari на iOS увеличивает страницу при фокусе в поле мельче 16px и обратно не возвращает — вёрстка остаётся съехавшей. */ .show_f input,.show_f textarea,.show_f select, input,textarea,select{font-size:max(16px,1.52rem)} @media (max-width:991px){ /* ── Абзацы. Всё, что человек читает строками, — не ниже 16px ── */ .inside_p,.footer-lead,.ks-block_text,.ks-final_text,.day_ad, .kharc_lead,.sx_cap,.floors_note,.loc-thesis, .day_night p, .floors_list p,.spec .is-wide dd{font-size:max(16px,1.6rem)} /* Пояснения и сноски — 14px, читаются, но остаются вторым планом. */ .loc-desc,.fine,.footer-b,.card-hour{font-size:max(14px,1.4rem)} /* Подписи-кикеры: КАПС с разрядкой. Поднимать их до 16px нельзя — разойдётся вся типографская иерархия, они перестанут быть подписями. Но 9–10px не читается ни на каком экране, поэтому пол 12px. */ .cap,.details-cap,.loc-path_note,.footer-addr, .plan_hint,.cplan_hint,.day_kick,figcaption, .preloader_caption,.old-cap,.footer-credit,.day_scroll, .tl_i span,.card-switch button,.pick_sw button, .floors_list span{font-size:max(12px,1.2rem)} /* ── Зоны нажатия: 44×44 по Apple HIG ── */ /* Крестик на видео-пузыре остаётся 22px по виду — больше он закроет сам кадр. Площадь нажатия растим прозрачным полем вокруг. */ .rbub_x::after{content:"";position:absolute;inset:-11px} /* Переключатели: время суток и «с мебелью / без мебели» — были 38px. */ .day_tod button,.card-switch button,.pick_sw button{min-height:44px} /* Ссылки и телефон в подвале: текст 17–29px высотой. Добираем полями, в подвале лишний воздух не мешает. */ .footer-b a{display:inline-block;padding:13px 0} .footer-phone{display:inline-block;padding:11px 0} } /* На ПК кнопки-ссылки тоже бывают ниже 44px — там курсор точнее пальца, но 36px мало и для мыши при плотной стопке. */ @media (min-width:992px){ .day_tod button{min-height:40px} } /* ── Раскладка: два блока считали ширину не от экрана (найдено 28.10) ── */ @media (max-width:991px){ /* Панель таймлайна выходила 421px при экране 375. Ширину ей задавало содержимое, а собственный padding у .tl_head ложился ЗА краем экрана: заголовок «Угол Горького и Кировского» и подпись упирались в обе стороны без единого пикселя поля. Привязываем к ширине окна — поля внутри .tl_head начинают работать. */ /* 100vw тут нельзя: на iOS ширина vw берётся от layout viewport, а он сам растягивается под содержимое — блок шириной 100vw раздувает документ, документ раздувает viewport, и так по кругу. Берём ширину от родителя. */ .loc-panel.tl,.tl_head{width:100%;max-width:100%} /* Снимок в разворот тянул margin:0 -2.3rem, чтобы вырваться из полей родителя. Но у .loc-track боковых полей нет, поэтому блок просто уезжал влево: слева срез 23px, справа щель 23px, подпись вместе с ним. */ .loc-track .sx.is-m{margin-left:0;margin-right:0} } /* ── Кегли, которые decor.css держит через !important ── В decor.css двадцать font-size с !important. Перебить их обычным правилом нельзя ни порядком файлов, ни специфичностью, поэтому ниже !important стоит осознанно — это не «на всякий случай», каждая строка отвечает конкретному правилу decor.css. Убирать их можно только вместе с исходными !important в decor.css. */ @media (max-width:991px){ .kharc_lead{font-size:max(16px,1.6rem)!important} /* decor.css:173 — было 1.5rem */ .day_night p:not(.day_kick){font-size:max(16px,1.6rem)!important} /* :361 — было 1.35rem */ .loc-stops b{font-size:max(14px,1.4rem)!important} /* :402 — было 1.1rem */ .loc-desc{font-size:max(14px,1.4rem)!important} /* :406 — было 1.2rem */ .lm figcaption{font-size:max(12px,1.2rem)!important} /* :387 — было 1.1rem */ .pick_sw button,.card-switch button{font-size:max(12px,1.2rem)!important} /* :674 — было .95rem */ .mbar a{font-size:max(11px,1.1rem)!important} /* :196 — было 10px; три кнопки в ряд, выше не влезет */ /* Панель таймлайна вырывалась из полей родителя минус-маргином, но у .loc-track боковых полей нет — блок просто уезжал влево на 23px. Та же история, что у .sx.is-m выше. */ .loc-panel.tl{margin-left:0;margin-right:0} } /* ── Добивка: правила, которые сидят выше по специфичности ── Селекторы ниже повторяют форму оригиналов (html.ks-static …, .loc-stops …, .idea_tx …) — иначе правило просто не доходит. */ @media (max-width:991px){ /* Рассказ идеолога — четыре абзаца подряд, самый длинный текст на сайте */ .idea_tx p:not(.cap):not(.idea_sign){font-size:max(16px,1.6rem)} /* style.css:649 — было 1.5rem */ .idea_sign{font-size:max(12px,1.2rem)} /* style.css:642 — было 1.1rem */ /* Горизонтальная дорожка «Построен, чтобы стоять веками» */ html.ks-static .ks-block_text{font-size:max(16px,1.6rem)} /* decor.css:305 — было 1.45rem */ html.ks-static .ks-p{font-size:max(16px,1.6rem)} /* decor.css:299 — было 1.4rem */ .ks-final_text{font-size:max(16px,1.6rem)!important} /* style.css:226 — было 1.4rem */ /* Заголовок дорожки упирался в правый край без единого пикселя поля. */ html.ks-static .ks-h2{right:var(--off)} .loc-stops .loc-desc{font-size:max(14px,1.4rem)!important} /* decor.css:406 — было 1.2rem */ /* Подписи к фото: .lm уже поднят выше, здесь остальные галереи. */ figcaption{font-size:max(12px,1.2rem)} } @media (max-width:991px){ .details-text{font-size:max(16px,1.6rem)} /* style.css:473 — было 1.6rem при базе 9,6px = 15,4 */ .int-fig figcaption{font-size:max(12px,1.2rem)} /* style.css:401 — было 1rem */ } /* ── Узкие телефоны (iPhone SE и прочие 320–359) ── База тут 8,2px за rem, и то, что на 390 ещё помещалось, вылезает. */ @media (max-width:359px){ /* «Века и минуты»: при 7.2rem строка шире колонки на 46px, курсивное «и минуты» уходило за оба края. */ .loc-title{font-size:6rem} /* Нижняя панель: после подъёма кегля до 11px «ПРЕЗЕНТАЦИЯ ↗» ломалась на две строки и стрелка повисала отдельно. Тут возвращаем 10px — на 375 и шире подъём остаётся. */ .mbar a{font-size:10px!important} } /* ── Форма заявки ── inspect.css:195 целится в .show_f input[type=text] / [type=tel] — это специфичнее, чем .show_f input выше, поэтому поля так и оставались 15,2px. Ровно на них iOS и срабатывает: тап в поле мельче 16px увеличивает страницу и обратно её не возвращает. */ .show_f input[type=text],.show_f input[type=tel]{font-size:max(16px,1.52rem)} /* ── Мышь тоже промахивается ── Текстовые ссылки высотой 15–21px на ПК. Поднимаем до 32 полями: видимый текст не меняется, растёт только область клика. */ @media (min-width:992px){ .footer-b a,.link{display:inline-block;padding:6px 0} } /* ── Остатки, найденные последним проходом ── */ @media (max-width:991px){ .g12_t p:not(.cap){font-size:max(16px,1.6rem)} /* галереи этажей — было 1.4rem */ .m-deck .slider_slide figcaption{font-size:max(12px,1.2rem)} /* decor.css:522 — было 1rem */ /* «Карта на весь экран» — текстовая кнопка высотой 19px. */ .link{padding-top:1.2rem;padding-bottom:1.2rem;min-height:44px;display:inline-flex;align-items:center} .footer-b a{padding:15px 0} /* было 41px высоты, не хватало трёх */ } /* Логотип-ссылка «наверх»: 42px по ширине, двух пикселей не хватало. */ .logo-mark{min-width:44px} /* ── Режим «Настольный сайт» в Safari (28.10) ── style.css:19 задаёт мобильную базу как calc(100vw / 390 * 10) и действует до 991px. Safari в режиме «Запросить настольный сайт» отдаёт ширину 980px, она в этот диапазон попадает — и база прыгает с 10px до 25,1px. Весь макет раздувается в два с половиной раза, Safari ужимает его под экран, и всё выглядит съехавшим вправо с обрезанными краями: крестик меню, нижняя панель, видео-окошко. Ставим потолок. До 390px формула работает как прежде (на 320 это 8,2px), выше 429px база замирает на 11px. */ @media (max-width:991px){ html{font-size:clamp(8px, calc(100vw / 390 * 10), 11px)} } /* Вводный абзац раздела «Внутри» — 1.5rem, до 16px не дотягивал. */ @media (max-width:991px){ .inside_lead p{font-size:max(16px,1.6rem)} } /* ── Центровка: дорожка видео уезжала влево (28.10) ── decor.css:517 даёт .m-deck_track ширину 100vw и ОДИН минус-маргин слева, чтобы вырваться из полей .details. Но .details — flex с align-items:center, а он делит непарный отрицательный маргин пополам: блок уезжал влево ровно на половину поля (12px при --off 24px), слева карточка срезалась, справа оставалась щель. Добавляем парный правый — центровке становится нечего делить, дорожка садится ровно по экрану. */ @media (max-width:991px){ .m-deck_track{margin-right:calc(var(--off) * -1)} } /* Подпись идеолога: после подъёма кегля до 12px «ИДЕОЛОГ ПРОЕКТА» перестало влезать в остаток строки и рвалось пополам — «ПРОЕКТА» уезжало вниз отдельным словом. Теперь должность переносится целиком. */ .idea_role{white-space:nowrap} /* decor.css:683 */ } /* Кнопка первого экрана ведёт в осмотр дома, а не в ролик (03.11). У треугольника play был сдвиг вправо для оптического центра — круговой стрелке он не нужен, иначе она стоит криво в кружке. */ .play-link.is-turn .play-link_ico svg{margin-left:0} /* ═══ Правки по видео Дмитрия от 03.11 ═══ */ /* Кругляшок «Осмотреть дом» справа внизу — «этот круг ни к чему вообще». Прячем только из виду: элемент остаётся в разметке, потому что кнопка первого экрана открывает осмотр именно через программный клик по нему (inspect.js: look.click()). Удалишь узел — сломается вход в осмотр. */ .look{display:none!important} /* Подсказки, которые объясняют очевидное — «и так понятно, что нажмёшь, и так понятно, что пролистнёшь». Снимаем их. Подсказки про комнаты на планировке оставлены: там кликабельность действительно не читается с первого взгляда. */ .hero-hint,.day_scroll,.pick_hint,.zoomhint{display:none!important} /* Блок «История не рождается сама» — рассказ от первого лица. «Никто не понимает, что дальше, убирай». */ #idea{display:none!important} /* Цифры в шапке слипались. Дело было не в зазоре: ширину каждой ячейки задаёт не число, а подпись под ним. «Мест в паркинге» — самая длинная, поэтому «17» прижималось к левому краю широкой ячейки, а справа от него оставалась пустота; рядом стоящее «98–126» читалось с ним одной группой. Выравниваем содержимое по центру ячейки — зрительные промежутки между числами выравниваются сами, без подгонки зазоров. */ .mf_facts{gap:3rem 5.6rem} .mf_facts div{text-align:center} @media (max-width:991px){ .mf_facts{gap:2.8rem 3.2rem} /* На двух колонках «98–126» при 5rem шире своей колонки и съедает весь воздух до соседа: между ним и «17» оставалось 74px против 147px в первом ряду. На 4.4rem число помещается в колонку и промежутки выравниваются. */ .mf_facts dd{font-size:4.4rem} } /* Курсор-кружок с подписями «Смотреть», «Листать», «Крупно», «Видео», «Этаж», «Карта» (fx.js, правила в rules). Заказчик: «смотреть, листать и т.п. убери». Без подписей кружок теряет смысл — на экране остаётся жёлтая точка поверх фото, — поэтому снимаем его целиком и возвращаем обычный курсор. Сам обработчик в fx.js не тронут: вернуть приём можно удалением этой строки. */ .cur{display:none!important} /* Заголовки, которые едут одной строкой и не помещались в экран. «Купеческий» при 13rem занимал 1020px на экране 1440 и почти всё время движения торчал за край — слово читалось лишь мельком. «Время на стороне дома» при 14rem вытягивалось на 2186px, то есть целиком не помещалось никогда: на экране всегда был кусок фразы. Кегли подобраны так, чтобы строка влезала с полями: 10rem → 785px, 8.6rem → ~1340px. */ .ks-block_word{font-size:10rem} .ks-text_big{font-size:7rem} /* «Города» на телефоне занимало ровно ширину экрана — буквы упирались в оба края без единого пикселя поля. 4.8rem даёт ~340px при экране 393. */ @media (max-width:991px){.kh-tr_title{font-size:4.8rem}} /* «Время на стороне дома» — единственный бордовый заголовок, который едет поверх фотографии фасада. Цвет #6E1220 имеет яркость 47 из 255, тёмный кирпич под ним — примерно столько же, контраст выходил 2,8 при норме 3 для крупного текста: буквы тонули в стене. Светлое свечение пробовал — оно только замыливает штрихи. Делаем надпись светлой с мягкой тёмной тенью, как у соседнего «Монолит и клинкер»: читается на любом участке фасада и не выбивается из ряда. «Купеческий Ростов» остаётся бордовым — он идёт по светлой панели. */ /* ПОПРАВКА 04.11: смена цвета на светлый не работала — theme-bordo.css задаёт .ks-text_big цвет через !important, и правило молча проигрывало. Сам цвет менять и не нужно: надпись едет поперёк ленты и одновременно лежит на тёмном фасаде справа и на светлой панели слева, так что любой один цвет проиграет на одной из половин. Даю кремовую обводку: на кирпиче она отделяет буквы, на светлой панели её не видно. */ .ks-text_big{text-shadow: .022em 0 0 #F6F2EC, -.022em 0 0 #F6F2EC, 0 .022em 0 #F6F2EC, 0 -.022em 0 #F6F2EC, .016em .016em 0 #F6F2EC, -.016em .016em 0 #F6F2EC, .016em -.016em 0 #F6F2EC, -.016em -.016em 0 #F6F2EC, 0 0 .34em rgba(246,242,236,.75)} /* Сплошная проверка всех крупных надписей, которые лежат прямо на фото. Замер по средней яркости кадров и цвету текста (WCAG, норма 3 для крупного): белые h3 ленты дня над sobor-lane.webp (L=154) — 2,83, ниже нормы; «18:00» над тем же кадром — 2,83; «XII КЛЮЧЕЙ» над hero-day.webp (L=124) — 3,95; «двенадцать цифр» над hero-day — 3,76. Это средние по кадру: на светлом небе и штукатурке реальный контраст ниже. У соседних подписей (.lz_cap, .hero-tabs, .play-link) тень в проекте уже есть — повторяю ровно её, чтобы не вводить второй стиль. */ .hero-title, .oday_list h3, .oday_time,.oday_time b, .day_nt{text-shadow:0 .2rem 2.4rem #000b, 0 0 .4rem #0009} /* «Лобби, лестницы и галереи этажей» — наоборот, тёмный текст поверх светлых кадров холлов. На самом тёмном (hall-1-s.webp, L=104) выходит 3,35 — впритык. Светлое свечение поднимает запас, не трогая цвет. */ .g12_t h2{text-shadow:0 0 .5rem #F6F2ECbf, 0 .1rem 1.6rem #F6F2EC99} /* «Галерея этажа» — самый длинный шаг зум-перехода: при кегле 4rem строка занимает 380px, а дорожка .lz_cap ol шириной 80vw даёт только 312px и режет её по overflow:hidden. На экране оставалось «ГАЛЕРЕЯ ЭТАЖ». Расширяю дорожку до поля в поле и снимаю 6px кегля — строка 323px при дорожке 344px. Проверено на 360, 390 и 430. */ @media (max-width:991px){ .lz_cap ol{width:calc(100vw - 4.8rem)} .lz_cap li{font-size:3.4rem} } /* Плавающий видеокружок .rbub стоит в правом нижнем углу (left=314 при экране 390) и накрывал правый край абзацев ленты дня на 42px: строка обрывалась на «знают по и…». Поднять кружок некуда — между ним и нижней панелью 14px. Сужаю абзацы ленты левее кружка. */ @media (max-width:991px){ .oday_list p{max-width:27rem} } /* Та же подпись упиралась не только в дорожку, но и в видеокружок: при экране 390 строка кончается на 347, кружок начинается на 314 — буква «А» уходила под него. Поднимаю подпись на один шаг выше кружка. */ @media (max-width:991px){ .lz_cap{bottom:17vh} } /* Бегущая строка «ключ архитектуры · монолит и клинкер» шла кеглем 22rem: слово «архитектуры» занимало 3274px при экране 2499 и 1887px при 1440 — в кадр не помещалось ни одного слова целиком, читались только обрывки. 10rem: «монолит» держится в кадре целиком 400px прокрутки (при 13rem — 325px, при 22rem — нисколько), рядом читается «…хитектуры». Посадку не трогаем: буквы, срезанные снизу, — это фаза въезда сцены, а не дефект. */ @media (min-width:992px){ .ks-final_title{font-size:10rem} } /* ═══ 04.11: две надписи главы «Архитектура» встали неподвижно ═══ Обе ехали поперёк экрана и прочитать их было нельзя. «Время на стороне дома»: проезд уводил её за левый край — замер в конце стадии S2 давал [-1597..300] при экране 2499, то есть в кадре оставался кусок шириной 300px из 1897. Теперь надпись стоит в правой половине, свободной от фотографии (фото к концу S2 сжимается в левые 50vw), и набрана двумя строками: «Время» прямым, «на стороне дома» курсивом. Цвет не меняю: em-акценты на светлом фоне по всему сайту velvet, в теме «Бордо» — wine-l. Золото #d6a360 на креме #f3ede3 даёт 1,9:1 при норме 3:1 для крупного текста — это была бы та же нечитаемость. «Ключ архитектуры»: бегущая строка длиной 11 600px заменена статичным заголовком в левом нижнем углу. */ @media (min-width:992px){ .ks-text_big{left:calc(30rem + 51vw);font-size:8.8rem;line-height:1.04;text-align:left} /* Маска режет по line-box, а чернила шрифта выходят за него: у Ricordi текстовый прямоугольник 1,36em, у курсивного Cormorant выносные «у» и «р» уходят ниже. При line-height 1,1 маска срезала хвост «клинкер». Межстрочное берём с запасом над метрикой шрифта. */ .ks-text_big b{font-weight:400;line-height:1.42} .ks-text_big em{font-size:.92em;line-height:1.4} .ks-final_title{left:var(--off);bottom:3.2rem;font-size:5.6rem;line-height:1.04;text-shadow:0 .2rem 2rem #000c} .ks-final_title b{font-weight:400;line-height:1.42} .ks-final_title em{font-size:.96em;line-height:1.4;color:var(--champ)} .ks-text_big .tb-l,.ks-final_title .ft-l{display:block;overflow:hidden} .ks-text_big .tb-in,.ks-final_title .ft-in{display:block} } /* телефон: глава идёт лентой (ks-static / ks-h), анимаций появления нет — строки стоят на месте, поэтому маски снимаем, чтобы ничего не срезало */ @media (max-width:991px){ .ks-text_big .tb-l,.ks-final_title .ft-l{display:block;overflow:visible} .ks-text_big .tb-in,.ks-final_title .ft-in{display:block} .ks-text_big b{font-weight:400} .ks-text_big em{font-size:.9em;line-height:1.2} } /* Финальный заголовок главы на телефоне. В ленте он был скрыт вместе с бегущей строкой (decor.css:294) — теперь, когда это обычный заголовок из двух строк, ему там место. Ставим над подписью «Таким был старый купеческий Ростов», которая в ks-h сидит на bottom:11rem. */ @media (max-width:991px){ html.ks-static .ks-final_title{display:block;left:var(--off);right:var(--off);bottom:17.5rem; font-size:2.8rem;line-height:1.04;white-space:nowrap;text-shadow:0 .2rem 2rem #000c} html.ks-static .ks-final_title b{font-weight:400;line-height:1.3} html.ks-static .ks-final_title em{font-size:.96em;line-height:1.3;color:var(--champ)} } /* ═══ 05.11: подпись перехода «Ключ города» на светлом фасаде ═══ Белый текст ложится на бежевую штукатурку и кирпич — штатной тени не хватало, буквы тонули. Даём ту же плотную тень, что у подписей на фото в других блоках, и мягкую тёмную подложку снизу кадра. */ .kh-tr .dp_cap{text-shadow:0 .2rem 2.4rem #000d, 0 0 .5rem #000b} .kh-tr .dp_cap .cap{color:#f6dcb4} /* Градиент на .kh-tr_img уходил под слой с фотографией: .dp_cover со своим transform создаёт стекинг-контекст. Поэтому подложка живёт внутри самой подписи — она всегда поверх кадра. */ .kh-tr .dp_cap{z-index:3} .kh-tr .dp_cap::before{content:"";position:absolute;z-index:-1; left:-2.4rem;right:-6rem;top:-2rem;bottom:-2.4rem; background:radial-gradient(120% 100% at 22% 60%, rgba(12,9,7,.72), rgba(12,9,7,.42) 55%, transparent 78%); pointer-events:none} /* ═══ 05.11: перекрытия на телефоне ═══ Верхняя плашка с логотипом шла с прозрачностью .96 — тёмный текст просвечивал сквозь неё при прокрутке. Делаем непрозрачной. Нижняя панель с кнопками (52px) накрывала последние строки — даём контенту отступ на её высоту. */ @media (max-width:991px){ html::before{background:#201410!important} html.t-bordo::before{background:#33060d!important} .inside_lead,.g12_t,.floors_note,.res-note,.loc-path.is-list, .details-text,.day_nt,.pick_detail{padding-bottom:calc(5.2rem + env(safe-area-inset-bottom,0px))} } /* ═══ 05.11: «Город пешком» на телефоне — лентой, как «Квартал сквозь время» ═══ Точки идут по одной в кадре, по центру, крупно. Раскладка повторяет .tl_map/.tl_i, чтобы оба блока листались одинаково. */ @media (max-width:991px){ .loc-path.is-rail{padding:0!important;display:block!important;overflow:visible!important} .loc-path.is-rail .lp-stick{position:sticky;top:0;height:100svh;overflow:hidden; display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:7rem 0 8rem} .loc-path.is-rail .loc-path_title{padding:0 var(--off)} .loc-path.is-rail .loc-path_note{padding:0 var(--off);margin-top:auto} .loc-path.is-rail .loc-path_map{flex:none!important;width:770vw!important;height:40svh!important; margin:2.4rem 0 0 var(--off)!important;will-change:transform;transform:translateZ(0)} .loc-path.is-rail .loc-path_map svg{display:block!important;position:absolute;left:0;top:50%; width:100%;height:18svh;translate:0 -50%;overflow:visible} .loc-path.is-rail .loc-path_line{stroke:#c08d4c!important;stroke-width:1.4!important;vector-effect:none!important} .loc-path.is-rail .loc-stops{display:block!important;position:static!important} .loc-path.is-rail .loc-stops li{position:absolute!important;left:var(--x)!important;top:50%!important; width:56vw!important;translate:-50% -50%!important;transform:none!important; display:flex!important;flex-direction:column;align-items:center!important;text-align:center!important; padding:0!important;border:0!important} .loc-path.is-rail .loc-stops li::after{display:block!important;content:"";position:relative!important; left:auto!important;bottom:auto!important;top:auto!important;order:-1;margin-bottom:1.2rem; width:1.2rem!important;height:1.2rem!important;border-radius:50%; background:#f3ede3!important;border:1px solid rgba(90,46,31,.45);transform:none!important; transition:background .4s,box-shadow .4s} .loc-path.is-rail .loc-stops li.lit::after{background:#d6a360!important;border-color:#d6a360; box-shadow:0 0 0 .6rem rgba(214,163,96,.2)} .loc-path.is-rail .loc-stops li:nth-child(1){--x:4.545%!important} .loc-path.is-rail .loc-stops li:nth-child(2){--x:13.636%!important} .loc-path.is-rail .loc-stops li:nth-child(3){--x:22.727%!important} .loc-path.is-rail .loc-stops li:nth-child(4){--x:31.818%!important} .loc-path.is-rail .loc-stops li:nth-child(5){--x:40.909%!important} .loc-path.is-rail .loc-stops li:nth-child(6){--x:50.000%!important} .loc-path.is-rail .loc-stops li:nth-child(7){--x:59.091%!important} .loc-path.is-rail .loc-stops li:nth-child(8){--x:68.182%!important} .loc-path.is-rail .loc-stops li:nth-child(9){--x:77.273%!important} .loc-path.is-rail .loc-stops li:nth-child(10){--x:86.364%!important} .loc-path.is-rail .loc-stops li:nth-child(11){--x:95.455%!important} /* Заголовок и подпись лежат в sticky-контейнере: он не движется относительно экрана, и триггер появления не срабатывает ни разу. Показываем их сразу — лучше без анимации, чем невидимыми. */ .loc-path.is-rail .loc-path_title, .loc-path.is-rail .loc-path_note{opacity:1!important;visibility:visible!important;transform:none!important} .loc-path.is-rail .loc-path_title .split-char, .loc-path.is-rail .loc-path_title .split-word, .loc-path.is-rail .loc-path_title .split-line{opacity:1!important;transform:none!important;rotate:none!important} .loc-path.is-rail .loc-stops b{font-size:1.5rem!important;white-space:normal!important} .loc-path.is-rail .loc-stops li:not(.lit) b, .loc-path.is-rail .loc-stops li:not(.lit) span{opacity:.4} .loc-path.is-rail .loc-stops b,.loc-path.is-rail .loc-stops span{transition:opacity .4s} .loc-path.is-rail .loc-stops .loc-desc{position:static!important;width:auto!important; transform:none!important;opacity:0!important;padding:0!important;background:none!important; box-shadow:none!important;margin-top:.8rem;font-size:1.2rem!important;line-height:1.45!important; text-align:center!important;transition:opacity .4s} .loc-path.is-rail .loc-stops li.lit .loc-desc{opacity:1!important} .loc-path.is-rail .loc-stops .is-home img{position:static!important;width:3rem;height:3rem;margin-bottom:.4rem} .loc-path.is-rail .loc-stops .is-home::after{background:var(--velvet)!important;width:1.4rem!important;height:1.4rem!important} } /* ═══ 12.11.2026 · правки Дмитрия Кирдана по /new/ ═══ */ /* Первый экран на телефоне: крупная кнопка «Осмотреть дом» спорила с заголовком. Осмотр остаётся в меню и в блоке «Нажмите, чтобы войти». */ @media (max-width:991px){ .hero-area .hero-r .play-link{display:none} } /* Лента «Квартал сквозь время» на телефоне: карточка is-up отсчитывалась от центра ленты и при длинной подписи («Пролётка на Малой Садовой») заезжала на заголовок. Теперь каждая половина ленты — своя коробка: верхняя от края до линии, нижняя от линии до края; фото при нехватке места ужимается, а не выталкивает подпись наверх. */ @media (max-width:991px){ .tl_i{height:auto} .tl_i.is-up{top:0;bottom:calc(50% + 2.2rem);translate:-50% 0;justify-content:flex-start} .tl_i.is-down{top:calc(50% + 2.2rem);bottom:0;translate:-50% 0;justify-content:flex-start} .tl_i.is-up::before{bottom:-2.9rem} .tl_i.is-down::before{top:-2.9rem} .tl_i figure{flex:0 1 auto;min-height:0} .tl_i figure img{height:100%} .tl_i span{max-width:36vw} .tl_stick{padding-top:8.4rem;gap:2.4rem} .tl_map{height:52svh} } /* на низких экранах (SE, 667) фото в ленте ужималось почти в полоску */ @media (max-width:991px) and (max-height:720px){ .tl_map{height:58svh} .tl_y{font-size:2.2rem} .tl_i span{font-size:.9rem;letter-spacing:.12em} } /* золотой контур скважины на первом экране (правка Кирдана 12.11.2026) */ .hero-kh_line{display:none!important} /* «Город пешком» на телефоне (правки Кирдана 12.11.2026): 1) заголовок в 5,6 рем не помещался в экран и обрезался слева; 2) точки стояли по центру карточки, и линия маршрута перечёркивала подпись. Теперь точка сидит на линии, а название и адрес идут под ней. */ @media (max-width:991px){ .loc-path.is-rail .loc-path_title{font-size:4rem;line-height:1.08} .loc-path.is-rail .loc-stops li{top:50%!important;translate:-50% 0!important} .loc-path.is-rail .loc-stops li::after{margin-top:-.6rem} .loc-path.is-rail .loc-stops .is-home img{margin-top:.6rem} } /* Переход-глава: крупная надпись на фасаде была в полтора экрана шириной, и на телефоне от неё читался только хвост («…4 88»). Ужимаем под ширину экрана. */ @media (max-width:991px){ .dp_word{font-size:min(9.5cqw, 10.5vw)} } /* 13.11.2026 · первый экран: «всё равно много текста». Абзац про монолит и подпись под кнопкой сняты: мысль про фасад раскрыта в главе о материалах, а кнопка «Осмотреть дом» понятна без пояснения. Узлы оставлены пустыми в разметке — на data-part завязано раскрытие из прелоадера, удаление узла ломает анимацию. */ .hero-note,.hero-r .play-link small{display:none!important} /* Форма записи: видимые подписи полей. Раньше были только placeholder — при вводе он исчезает, и человек не видит, что в поле. */ .show_lb{margin-bottom:-6px;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(242,236,225,.62)} /* Зоны касания на телефоне: крестик окошка с роликом был 22×22 при норме 44×44. Прозрачная рамка расширяет зону, круг остаётся прежнего размера. */ @media (max-width:991px){ .rbub_x{box-sizing:content-box;border:13px solid transparent;background-clip:padding-box;top:-19px;right:-19px} .fs_plan,.skip{min-height:44px} } /* 13.11.2026 · доделка правки Кирдана №1: «золотые контуры и скважина точно не нужны». 12.11 был скрыт только контур, светлое окно-скважина на фасаде осталось. Слой прячем прозрачностью, а не удаляем: на нём работают раскрытие из прелоадера и переход по прокрутке (app.js: --kh). Без слоя кадр просто проявляется из затемнения — фон осветляется той же прокруткой (--dim). */ .hero-kh{opacity:0!important} /* Там же: строка «В Ростове 10:45 · утро особняка» и золотой орнамент над фразой справа — лишние голоса на первом экране. Время суток дом по-прежнему показывает самим кадром. */ .tod,.hero-orn{display:none!important} /* Колонка глав: на первом экране скрыта, дальше плавно появляется (decor.js). */ .keys-rail{transition:opacity .45s ease} html.at-hero .keys-rail{opacity:0;pointer-events:none} /* Фраза справа: слово «раз» висело отдельной строкой. Выравниваем строки по длине. */ .hero-quote{text-wrap:balance} /* Телефон: под названием не было ни слова о том, что это и где — подзаголовок был скрыт. Возвращаем его двумя короткими строками. */ @media (max-width:991px){ .hero-sub{display:block!important;margin-top:1.4rem;text-align:center;font-size:1.05rem;line-height:1.7} } /* Доделка правки Кирдана №11: «лучше указать этаж вместо типов планировок А, Б, Г». В списке резиденций буквы убраны 12.11, а в характеристиках карточки строка «Тип планировки — А» оставалась. Строку прячем (узел нужен скрипту app.js), этаж в характеристиках уже есть. */ .spec_type{display:none!important} /* Телефон: подписи мельче 10,5 px не читаются. Поднимаем до 11 px. */ @media (max-width:991px){ .old-card figcaption,.map-cover span,.inside_k,.day_now,.day_tod button{font-size:11px!important} } /* 13.11.2026 · первый экран: «текст и слева и справа, непонятно куда смотреть». Оставлен один блок слева: название, строка о доме, кнопка осмотра. Правый блок с фразой «Такие дома строят один раз» снят — фраза не из утверждённых текстов, а второй центр внимания спорил с названием. Кнопка перенесена в левый блок в разметке. Узел .hero-r оставлен: на него ссылается прокрутка. */ .hero-r{display:none!important} .hero-l .play-link{margin-top:4.4rem;justify-self:start} @media (min-width:992px){ /* ширина левого блока считалась от размера скважины в центре; скважины нет */ .hero-l{width:min(46rem,38vw)!important} } @media (max-width:991px){ /* правка Кирдана №3 остаётся в силе: на телефоне кнопки осмотра на первом экране нет */ .hero-l .play-link{display:none!important} } /* Строка под названием лежит на светлом соседнем доме — убираем прозрачность текста и даём мягкую подложку-тень, чтобы она читалась на любом кадре. */ .hero-sub{color:#f3ede3!important;text-shadow:0 .1rem 1.4rem rgba(0,0,0,.55)} /* 13.11.2026 · «дом без оверлея, но текст всегда контрастный». Затемнение кадра (fx.css: .hero-bg::after, --dim) снято — фасад в своих цветах и днём, и ночью. Читаемость текста больше не зависит от кадра: – ПК: текст стоит на подложке цвета темы, прижатой к левому краю экрана, — она закрывает соседний дом, а не наш; – телефон и планшет в портрете: шапка и название стоят на сплошной полосе цвета темы (это фон .hero-w), кадр начинается под ней — дом не перекрыт. По прокрутке полоса уходит и кадр раскрывается на весь экран: привязано к той же переменной --dim, которую app.js уже ведёт от 1 к 0 (initHero). Доля полосы от высоты экрана — --hb-k, считает decor.js. Худший случай (под подложкой чистый белый): золото #d6a360 — 4,8:1, слоновая кость #f3ede3 — 9:1. Обводку не беру: на тонкой антикве она грубит, и уже ловили поломку глифа (память webkit-text-stroke-broken-glyph). Узкий экран в альбомной ориентации оставлен как был, с затемнением: полоса там съела бы кадр целиком. */ .hero-l{--plate:13,12,11} html.t-bordo .hero-l{--plate:51,6,13} @media (min-width:992px){ .hero-bg::after{display:none!important} .hero-l{left:0!important;width:auto!important;padding:4rem 3.2rem 4.4rem var(--off)} .hero-l::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(var(--plate),.82); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); box-shadow:inset 0 0 0 1px rgba(214,163,96,.26);transition:opacity .6s cubic-bezier(.23,1,.32,1)} html.is-loading .hero-l::before{opacity:0} .hero-title,.hero-sub,.hero-l .play-link{text-shadow:none!important} /* белый логотип над дневным небом без затемнения — 3,9:1 по самому светлому месту (замер 13.11). Мягкая тень только пока открыт первый экран. */ html.at-hero .logo-mark_light{filter:drop-shadow(0 .1rem .9rem rgba(6,16,34,.55))} } @media (max-width:991px) and (max-aspect-ratio:4/5){ .hero-bg::after{display:none!important} /* --hb-f: полоса стоит, пока текст не ушёл (app.js на узком экране гасит его за первые 0,16 хода, это --dim 1 → 0,54), и только потом уходит сама */ .hero-bg{--hb-f:min(1, var(--dim,1) / .55);clip-path:inset(calc(min(25rem,50%) * var(--hb-f)) 0 0 0)} /* картинка вдвое шире экрана: ужатая под полосу, она всё равно закрывает ширину */ .hero-bg img{left:-50%;right:auto;width:200%;max-width:none;transform-origin:50% 100%;transform:scale(calc(1 - var(--hb-k,.3) * var(--hb-f,1)))} /* шапка сжимается и получает свою подложку (decor.css, html::before) уже на 0,36 экрана — пока под логотипом ещё стоит полоса; класс m-head ставит decor.js */ html.m-head::before{transform:none} html.m-head .logo-mark{width:4.4rem!important;top:calc(env(safe-area-inset-top,0px) + .6rem)!important} html.m-head .menu-btn{color:#f3ede3!important} }