/* ===================================================================== RECRE-409 — повноекранний режим карт перегляду Окремий файл, а не нова секція main.css: той самий патерн, що atlas.css / map-overview.css / catalog-regions.css — стилі, потрібні рівно двом сторінкам з картою, не їдуть у кожен документ сайту. Підключається в templates/map.html і templates/park_detail.html (block extra_head) ПІСЛЯ main.css і atlas.css, тож усі змінні палітри (--green, --border, --terracotta…) і базові правила .pdm-map/.pdm-zoom/ .pdm-basemap уже визначені вище. Механіка — static/js/map-fullscreen.js. Два режими: A. .rm-mapfs — оверлей у , куди ПЕРЕЇЖДЖАЄ жива картка сцени Атласу .pdm-frame (легенда | полотно | док обраного об'єкта) — патерн RECRE-311; B. body.rm-mapfs-page — сторінковий режим великої карти /map/: сцена забирає вертикаль у шапки і стає на 100dvh, без перенесення вузлів. Спільне: body.rm-mapfs-open гасить скрол документа під режимом. ===================================================================== */ /* Скрол сторінки під будь-яким з режимів (той самий прийом, що body.mloc-fs-open у fullscreen-геопікері, RECRE-311) */ body.rm-mapfs-open { overflow: hidden; } /* ===================================================================== RECRE-437 (Show-stopper): сторінка /map/ не прокручується ВЗАГАЛІ. Корінь бага: десктопний футер «під першим екраном» (map.html, запит 2026-07-14) робив документ прокручуваним на свою висоту — колесо над лівою панеллю (після вичерпання її власного скролу), Space/PageDown чи смуга прокрутки випадково зсували сторінку, і карта «стискалась», відкриваючи футер (скриншот PO). Сам футер з /map/ видалено (див. коментар у map.html); це правило — страхувальна сітка на весь клас багів «щось знову розширило scrollable overflow документа» (прецеденти: transformed bottom-sheet до overflow:clip на .map-wrap; document-ліфт scrollIntoView 0→66px у QA-вимірі map.js). Селектор: .map-shell існує ЛИШЕ на /map/ — на /park/{slug}/, куди цей файл теж підключено, правило не матчиться і футер сторінки лишається досяжним. Без :has (старі браузери) деградація м'яка: видалення футера саме по собі повертає документ до рівно 100dvh без overflow. overflow: hidden, а НЕ clip — той самий прийом, що body.rm-mapfs-open вище: гасить лише скрол користувача; колесо над полотном і далі належить Leaflet (zoom), внутрішній скрол лівої панелі фільтрів — її власному overflow-контейнеру. overscroll-behavior: none — без ланцюжка/гумового bounce, коли скрол панелі впирається в край. ===================================================================== */ body:has(.map-shell) { overflow: hidden; overscroll-behavior: none; } /* --------------------------------------------------------------------- РЕЖИМ A — оверлей вбудованої карти (Атлас парку) 100dvh, а не лише 100vh: мобільний браузерний хром змінює висоту в'юпорта, і на 100vh нижня смуга карти йшла б під адресний рядок (той самий рецепт, що .mloc-fs). 100vh лишається фолбеком для браузерів без dvh. z-index 50 — свідомо НЕ «найбільший з можливих». Драбина проєкту: .park-overlay(40) = .rm-header(40) < .poi-scrim(45)/.poi-sheet(46) < .survey-popup(70) < .snu-overlay(75) < .obm-overlay(80)/.mloc-fs(80) < .ov-lightbox(90) < .rm-toast(4000). Повноекранна карта має накрити лише СЦЕНУ (overlay парку й шапку), а модалки, шторки й тости зобов'язані лишатись над нею — інакше «зберегти заклад» з картки POI відкривало б нюдж-модалку ПІД картою. Тому 50, а піднімаються рівно дві мобільні шторки (правило нижче), яких без цього не було б видно. --------------------------------------------------------------------- */ .rm-mapfs { position: fixed; inset: 0; z-index: 50; height: 100vh; height: 100dvh; background: var(--bg, #FBF5E9); overscroll-behavior: contain; } .rm-mapfs[hidden] { display: none !important; } /* Слот під живий вузол. isolation — z-index панелей Leaflet (200–1000) замикається всередині (той самий прийом, що .pdm-map і .mloc-fs__map) */ .rm-mapfs__slot { position: absolute; inset: 0; isolation: isolate; display: flex; } /* Картка сцени Атласу всередині оверлея: розтягується на весь слот, хром картки (рамка/радіус/тінь) знімається — у режимі «на весь екран» картки більше немає, є сцена. */ .rm-mapfs .pdm-frame { flex: 1 1 auto; min-width: 0; min-height: 0; border: none; border-radius: 0; box-shadow: none; background: none; overflow: hidden; } /* Полотно стає резиновою зоною сцени. Явні height .pdm-map (--scene-h на десктопі, min(--pdm-h, 480/400px) у мобільних media-правилах main.css) тут безглузді — перебиваємо СПЕЦИФІЧНІСТЮ (0,2,0 проти 0,1,0), без !important. position: relative лишається: на ньому тримаються всі абсолютні оверлеї карти. */ .rm-mapfs .pdm-map { flex: 1 1 auto; height: auto; max-height: none; min-height: 0; border: none; border-radius: 0; } /* Стеля висоти бічних зон рахувалась від --scene-h картки на сторінці (RECRE-204) — у повноекранній сцені її задає сам слот */ .rm-mapfs .pdm-side, .rm-mapfs .pdm-info { max-height: none; } /* ≤900px .pdm-frame — display:block (легенда стрічкою НАД полотном). У повноекранному режимі потрібна колонка, щоб полотно з'їло всю решту висоти, а стрічка/акордеон лишились над ним. */ @media (max-width: 900px) { .rm-mapfs .pdm-frame { display: flex; flex-direction: column; } .rm-mapfs .pdm-legend-toggle, .rm-mapfs .pdm-side { flex: none; } } /* ≥901px сцена — три картки з gap 14px (RECRE-194/196); поле довкола, щоб вони не приклеювались до країв екрана */ @media (min-width: 901px) { .rm-mapfs__slot { padding: 12px; box-sizing: border-box; } } /* Мобільні шторки обраного POI / події (.poi-sheet, RECRE-167 §4) — fixed-вузли в корені компонента, які лишаються на сторінці, коли сцена переїхала в оверлей. Без підняття над ним тап по піну в повноекранному Атласі не показував би нічого — саме та скарга («не було зрозуміло що за точки»), заради якої тікет і заведено. */ body.rm-mapfs-open .poi-scrim { z-index: 51; } body.rm-mapfs-open .poi-sheet { z-index: 52; } /* Полотно Leaflet у повноекранному режимі: під картою немає сторінки, яку можна було б гортати, тож жести повністю належать карті. Фактично це вже забезпечує сам Leaflet (dragging+touchZoom увімкнені → клас .leaflet-touch-drag.leaflet-touch-zoom → touch-action: none з leaflet.css), але правило лишається явним запобіжником: саме «браузер, а не карта, обробив жест масштабування» і був симптом зі скарги користувача (SMM-звіт 2026-08-27). */ .rm-mapfs .pdm-canvas.leaflet-container { touch-action: none; } /* Пілюля «Відкрити на карті» (/park/{slug}/) веде на іншу сторінку — у повноекранному Атласі це пастка: користувач хотів роздивитись схему, а не піти геть. Ховаємо на час режиму */ .pdm-map--fs .pdm-fullmap { display: none; } /* --------------------------------------------------------------------- Кнопка Атласу .pdm-fs Позиція — правий верхній кут, ТРЕТІМ у вже усталеній колонці Атласу (документована в atlas.css): 12px — контрол «Моє місцеположення» (.rm-locate, 32px), 52px — тумблер «Супутник» (.pdm-basemap, 32px), отже 92px = 52 + 32 + 8. Топ-ліво зайняте кнопками масштабу (.pdm-zoom), низ-право — пілюлею .pdm-fullmap, низ-ліво — атрибуцією. Позиція НЕ змінюється при вході/виході з режиму: кнопка лишається під тим самим пальцем, яким її щойно натиснули. Вигляд — сімейство .pdm-basemap (кремове скло), щоб Атлас не оброс ще одним різновидом кнопок; активний стан — та сама зелена інверсія, що в увімкненого «Супутника». --------------------------------------------------------------------- */ .pdm-fs { position: absolute; right: 12px; top: 92px; z-index: 10; display: inline-flex; align-items: center; gap: 7px; font-family: 'Mulish', system-ui, sans-serif; font-size: 11.5px; font-weight: 800; color: var(--green); background: rgba(251, 245, 233, 0.94); border: 1px solid var(--border); border-radius: 30px; padding: 8px 13px; cursor: pointer; box-shadow: 0 12px 26px -16px rgba(47, 74, 55, 0.55); transition: background .18s, color .18s, border-color .18s, transform .18s; } /* Клік-ціль ≥44px незалежно від візуального розміру пілюлі (прийом .panel-close::after з main.css): на мобільному кнопка згортається в кружечок ~30px, а палець має влучати без прицілювання */ .pdm-fs::after { content: ""; position: absolute; inset: -7px; border-radius: inherit; } .pdm-fs:hover { background: #FFFDF8; transform: translateY(-1px); } .pdm-fs:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126, 148, 102, 0.35); } .pdm-fs i, .pdm-fs svg { width: 14px; height: 14px; flex: none; color: var(--terracotta); } /* Режим активний (aria-pressed="true") — інверсія, як у ввімкненого «Супутника»: кнопка виходу має читатись як увімкнений стан */ .pdm-fs[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #FBF5E9; } .pdm-fs[aria-pressed="true"]:hover { background: var(--green-hover); } .pdm-fs[aria-pressed="true"] i, .pdm-fs[aria-pressed="true"] svg { color: #FBF5E9; } /* ≤680px: кругла іконка без підпису — те саме правило, що для .pdm-basemap (вузьке полотно ділять ще зум, геолокація і супутник) */ @media (max-width: 680px) { .pdm-fs { padding: 8px; border-radius: 50%; } .rm-mapfs-btn__label { display: none; } } /* --------------------------------------------------------------------- РЕЖИМ Б — сторінковий fullscreen великої карти /map/ Сцена .map-shell рахує висоту як 100dvh мінус шапка; у режимі шапка ховається, і сцена отримує всі 100dvh. Ніякого position: fixed і перенесення вузлів: усі оверлеї карти (ліва панель фільтрів, FAB «Фільтри» ≤680px, віджет довкілля, overlay деталей парку) лежать усередині .map-wrap і разом з нею просто стають вищими. Шапка (разом з банером підтримки ЗСУ) ховається лише на час явно ввімкненого користувачем режиму і повертається на виході — це тимчасовий режим перегляду, а не dismiss банера. --------------------------------------------------------------------- */ body.rm-mapfs-page .rm-header { display: none; } body.rm-mapfs-page .map-shell { height: 100vh; height: 100dvh; } /* --------------------------------------------------------------------- Кнопка великої карти — Leaflet-контрол .rm-mapfs-ctl (bottomright, над «Моїм місцеположенням» і зумом +/−: Leaflet вставляє контроли нижніх кутів першими дітьми). Вигляд — 1:1 з .rm-locate__btn (main.css), щоб нижній правий стовпчик кнопок лишався однорідним. --------------------------------------------------------------------- */ .rm-mapfs-ctl.leaflet-bar { border: none; /* стилі свої, не leaflet-bar дефолт */ box-shadow: none; background: transparent; } .rm-mapfs-ctl__btn { display: flex; align-items: center; justify-content: center; position: relative; width: 32px; height: 32px; border-radius: 10px; background: rgba(251, 245, 233, 0.95); border: 1px solid var(--border); color: var(--green); cursor: pointer; box-shadow: 0 8px 18px -12px rgba(47, 74, 55, 0.5); transition: background .18s, color .18s; } /* Клік-ціль ≥44px (див. коментар до .pdm-fs::after) */ .rm-mapfs-ctl__btn::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; } .rm-mapfs-ctl__btn i, .rm-mapfs-ctl__btn svg { width: 16px; height: 16px; flex: none; } .rm-mapfs-ctl__btn:hover { background: #FFFDF8; } .rm-mapfs-ctl__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126, 148, 102, 0.35); } .rm-mapfs-ctl__btn[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #FBF5E9; } .rm-mapfs-ctl__btn[aria-pressed="true"]:hover { background: var(--green-hover); }