/* apr-wide.css — большие экраны (окно браузера от 2100 px: 2K и 4K). Вариант «Д — смешанный». 20.10.2026, решение Сергея: «только для 4К вариант Д — смешанный, только на dev». Макеты и снимки: C:\Users\Сергей\AP-R\mockups\shirokie-ekrany-2026-10-19\ (просмотрщик viewer\index.html). Окна уже 2100 px (FullHD, ноутбуки, планшеты, телефоны) этот файл НЕ меняет — все правила внутри (min-width:2100px). Два размера блоков: ШИРОКИЕ — ряды карточек, каталог с картой, генплан и шахматка, таблицы аналитики, шапка, подвал: до 2240, поля 64; СРЕДНИЕ — тексты, формы, баннеры, отзывы, новости, вопросы: 1600 по центру (--apr-mid). Всё крупнее: 2100+ ×1.1, 2400+ ×1.2, 3000+ ×1.5, 3600+ ×1.8 (html zoom). Под zoom 100vw/100vh НЕ пересчитываются — делим на --apr-z. Правила одной страницы ограничены её меткой, чтобы не задеть другие страницы: главная — :root:has(#quiz-city), город — :root:has(#quiz-zhk), ЖК — :root:has(.pdp-main--canon), общий каталог — :root:has(#aprCat); ипотека, новости, аналитика, «О компании» — по своим обёрткам (.ipoteka-main, .n2-wrap, .ax-page, .about-main). Подключает local/php_interface/apr_wide.php (последним стилем перед ). Откат — убрать его require из init.php. */ :root{--apr-z:1} @media (min-width:2100px){ html{zoom:1.1} :root{--apr-z:1.1; --apr-mid:1600px} } @media (min-width:2400px){ html{zoom:1.2} :root{--apr-z:1.2} } @media (min-width:3000px){ html{zoom:1.5} :root{--apr-z:1.5} } @media (min-width:3600px){ html{zoom:1.8} :root{--apr-z:1.8} } @media (min-width:2100px){ /* ---------- 1. Все страницы: широкая колонка, высоты «на экран» с поправкой на масштаб ---------- */ :root .container, :root .pdp-main .container{max-width:2240px; padding-left:64px; padding-right:64px} :root #apr-cmp-bar .apr-cmp-bar-row{max-width:2240px} :root .map-pane{height:calc(100vh / var(--apr-z) - 200px)} :root .apr-cat .map-pane{height:calc(100vh / var(--apr-z) - 180px)} :root .zhk-search-panel__box{max-height:calc(100vh / var(--apr-z) - 24px)} :root .pdp-rail{max-height:calc(100vh / var(--apr-z) - 140px)} :root .shah2-aside{max-height:calc(100vh / var(--apr-z) - 136px)} /* ---------- 2. Главная и города: средние блоки ---------- */ :root:has(#quiz-city) .apr-hcb-sec > .container, :root:has(#quiz-city) #quiz-city > .container, :root:has(#quiz-city) .trust-strip > .container, :root:has(#quiz-city) .reviews-section > .container, :root:has(#quiz-city) #novosti > .container, :root:has(#quiz-city) .compare-cta-section > .container, :root:has(#quiz-city) #services > .container, :root:has(#quiz-city) section.tone-cream:has(.faq) > .container, :root:has(#quiz-city) section.tone-white:has(.final) > .container, :root:has(#quiz-zhk) .apr-tp-sec > .container, :root:has(#quiz-zhk) #quiz-zhk > .container, :root:has(#quiz-zhk) .apr-hcb-sec > .container, :root:has(#quiz-zhk) section.tone-white:has(.showcases) > .container, :root:has(#quiz-zhk) section.tone-mint:has(.lm-rop-tg) > .container, :root:has(#quiz-zhk) section.tone-white:has(.lm-ai-analytics) > .container, :root:has(#quiz-zhk) #novosti > .container, :root:has(#quiz-zhk) .seo-block > .container, :root:has(#quiz-zhk) .apr-rl-sec > .container, :root:has(#quiz-zhk) #faq > .container, :root:has(#quiz-zhk) section.tone-mint:has(.nearby-cities) > .container, :root:has(#quiz-zhk) section.tone-white:has(.final) > .container{max-width:var(--apr-mid); padding-left:32px; padding-right:32px} :root:has(#quiz-city) .ceo-msg{max-width:calc(var(--apr-mid) - 64px); margin-left:auto; margin-right:auto} /* блок с PDF-гайдом: карточка и бежевая подложка — по средней колонке, а не по краю окна */ :root:is(:has(#quiz-city), :has(#quiz-zhk)) .lm-guide-wrap{max-width:calc(var(--apr-mid) - 64px); margin-left:auto; margin-right:auto} :root:is(:has(#quiz-city), :has(#quiz-zhk)) .lm-guide-section::before{right:calc((100% - var(--apr-mid)) / 2 + 32px); width:calc(var(--apr-mid) * .58 - 32px)} /* ---------- 3. Главная: широкие ряды ---------- */ :root:has(#quiz-city) .cities{grid-template-columns:repeat(7,1fr)} :root:has(#quiz-city) .zk-grid{grid-template-columns:repeat(6,1fr)} :root:has(#quiz-city) .mgr-grid{grid-template-columns:repeat(7,1fr)} :root:has(#quiz-city) .partners{grid-template-columns:repeat(12,1fr)} :root:has(#quiz-city) .svc-grid{grid-template-columns:repeat(2,1fr)} /* 2 карточки услуг — без пустой третьей колонки */ /* ---------- 4. Город: каталог — карта слева, справа 4 колонки ЖК; «ЖК по алфавиту» — 6 колонок ---------- */ :root:has(#quiz-zhk) .catalog-grid{grid-template-columns:minmax(0,1fr) minmax(0,2.3fr)} :root:has(#quiz-zhk) #catalog .catalog-grid .list-pane{grid-template-columns:repeat(4,minmax(0,1fr))} :root:has(#quiz-zhk) .zk-all-links-grid{grid-template-columns:repeat(6,1fr)} /* ---------- 5. Общий каталог ЖК: уже был широким (2800, поля 28) — ширину не трогаем, только масштаб ---------- */ :root:has(#aprCat) .container{max-width:2800px; padding-left:28px; padding-right:28px} /* ---------- 6. Страница ЖК: колонка контента до закреплённой карточки справа (до 1840), шапка во всю ширину ---------- */ :root:has(.pdp-main--canon){ --shell:min(1840px, calc(100vw / var(--apr-z) - var(--rail-w) - 3 * var(--pmin))); --side:calc((100vw / var(--apr-z) - var(--shell) - var(--rail-w)) / 3); } :root .pdp-main--canon #shah.pdp-section-flats > .container{max-width:none} :root:has(.pdp-main--canon) .header > .container, :root:has(.pdp-main--canon) .topbar > .container{max-width:none} /* ---------- 7. Ипотека: средняя ширина, широкий — только «5 шагов» ---------- */ :root .ipoteka-main section:not(#steps) > .container{max-width:var(--apr-mid); padding-left:32px; padding-right:32px} :root .lr-container{max-width:calc(var(--apr-mid) - 100px)} /* меню разделов («Калькулятор · Ставки банков · …») — в одну сетку с блоками ниже (20.10, Сергей: «слишком влево ушли») */ :root .ip-subnav > .container.ip-subnav-row{max-width:calc(var(--apr-mid) - 100px); padding-left:20px; padding-right:20px} /* ---------- 8. Новости и статья: средняя ширина, три колонки; текст статьи не шире 820 ---------- */ :root .n2-wrap > .container{max-width:var(--apr-mid); padding-left:32px; padding-right:32px} :root .n2-grid{grid-template-columns:200px minmax(0,1fr) 340px} :root .n2-main:not(article){max-width:none} :root article.n2-main{max-width:820px} /* ---------- 9. Аналитика: широкая (таблицы и карточки цифр) ---------- */ :root .ax-page .ax-main > .container{max-width:2240px; width:100%; padding-left:64px; padding-right:64px} /* ---------- 10. «О компании»: текст средний, логотипы застройщиков — 10 в ряд ---------- */ :root .about-hero > .container, :root .about-main section:not(:has(.partners)) > .container{max-width:var(--apr-mid); padding-left:32px; padding-right:32px} :root .about-main .partners{grid-template-columns:repeat(10,1fr)} /* ---------- 11. Яндекс-карты: внутри карты масштаб обратно 1 ---------- Под zoom страницы Яндекс неверно считает место клика: кластеры, метки и районы не нажимались (проверено 20.10 на dev в окне браузера). Карта при этом занимает то же место, только подписи на ней обычного размера. #city-map — город, .cat-map — каталог и посёлки, .apr-mm__map — окно «Выбрать ЖК на карте», #aprOfficeMap — офисы в «О компании», body[class*="-fullscreen"] > ymaps — встроенный «на весь экран» Яндекса (карта переносится в body). */ :root #city-map, :root .cat-map, :root .apr-mm__map, :root #aprOfficeMap, :root body[class*="-fullscreen"] > ymaps{zoom:calc(1 / var(--apr-z))} /* «На весь экран» каталога и посёлков: 100vw/100vh под zoom больше окна — делим на масштаб */ :root .map-pane.is-full, :root .apr-cat .map-pane.is-full{width:calc(100vw / var(--apr-z)); height:calc(100vh / var(--apr-z))} /* ---------- 12. Окна, которые скрипт ставит по координатам кнопки или мыши ---------- Под zoom скрипт ставит их в 1,2 раза дальше: выпадашки панели поиска уезжали вправо-вниз, «Расположение» — за край экрана. Сам блок — в масштабе 1 (координаты совпадают), его содержимое — снова в масштабе страницы. .hfb-pop — панель поиска (главная, города, ЖК), .cf-pop — фильтры каталога и посёлков, .cmf-pop — фильтры коммерции. */ :root .hfb-pop, :root .cf-pop, :root .cmf-pop{zoom:calc(1 / var(--apr-z))} :root .hfb-pop > *, :root .cf-pop > *, :root .cmf-pop > *{zoom:var(--apr-z)} :root .hfb-pop{min-width:calc(280px * var(--apr-z)); max-width:calc(420px * var(--apr-z)); padding:calc(14px * var(--apr-z)) calc(16px * var(--apr-z)) calc(12px * var(--apr-z)); border-radius:calc(14px * var(--apr-z))} :root .cf-pop{max-width:calc(340px * var(--apr-z)); padding:calc(13px * var(--apr-z)); border-radius:calc(14px * var(--apr-z))} :root .cmf-pop{width:calc(360px * var(--apr-z)); border-radius:calc(14px * var(--apr-z))} /* подсказки на графиках, в таблицах и на карте районов «Аналитики»: текст лежит прямо в блоке, а размеры у трёх оформлений разные — поэтому не пересчитываем их, а увеличиваем блок целиком от левого верхнего угла (он и стоит у курсора) */ :root .ax-tt{zoom:calc(1 / var(--apr-z)); transform:scale(var(--apr-z)); transform-origin:0 0} /* страница ЖК: подсказка у корпуса на генплане, карточка квартиры в шахматке, увеличенное фото менеджера */ :root .pdp-genplan-tip, :root .s2-pop, :root .pr-zoom{zoom:calc(1 / var(--apr-z))} :root .pdp-genplan-tip > *, :root .s2-pop > *{zoom:var(--apr-z)} :root .pdp-genplan-tip{padding:calc(8px * var(--apr-z)) calc(12px * var(--apr-z)); border-radius:calc(10px * var(--apr-z)); gap:calc(1px * var(--apr-z))} :root .s2-pop{width:calc(362px * var(--apr-z)); padding:calc(14px * var(--apr-z)); border-radius:calc(18px * var(--apr-z))} :root .pr-zoom{width:calc(210px * var(--apr-z)); padding:calc(6px * var(--apr-z)); border-radius:calc(16px * var(--apr-z))} /* каталог и посёлки: граница «список | карта» перетаскивается мышью — скрипт задаёт ширины колонок в пикселях экрана */ :root #catBody{zoom:calc(1 / var(--apr-z))} :root #catBody > *{zoom:var(--apr-z)} }