/* ===================================================================== mobile-ui-fixes.css — końcowy nakładad CSS (ładuje się OSTATNI) ---------------------------------------------------------------------- Cel: definitywne usunięcie poziomego scrolla na telefonach oraz stabilizacja mobilnego nagłówka / menu (burger, logo, panel off-canvas) na najczęstszych szerokościach telefonów: 360 / 375 / 390 / 412 px. Zasada działania: - Ładowany po style.min.css i responsive-fixes.css, więc wygrywa specyficznością / kolejnością tam, gdzie to konieczne. - Stosujemy "!important" tylko tam, gdzie wcześniejsze warstwy ustawiły własności powodujące przepełnienie (np. fixed menu off-canvas). - Nie modyfikujemy treści, linków, SEO ani JSON-LD — wyłącznie CSS. Zakres zmian: 1) Twardy zakres szerokości dokumentu (brak poziomego scrolla). 2) Header / burger / logo — stabilne wymiary i pozycje. 3) Panel menu off-canvas — mieści się w ekranie. 4) Dedykowane breakpointy 360 / 375 / 390 / 412 px. 5) Ochrona obrazów / mediów przed wychodzeniem poza viewport. ===================================================================== */ /* ===================================================================== 1) POWSTRZYMANIE POZIOMEGO SCROLLA (cały dokument) ---------------------------------------------------------------------- Przeglądarki mobilne czasem nie przycinają elementów position:fixed (menu off-canvas zaparkowane translateX(100%)) mimo overflow-x:hidden na body. Nakładamy spójny zestaw na i oraz wymuszamy box-sizing dla szerokich kontenerów. ===================================================================== */ html, body { max-width: 100vw !important; overflow-x: hidden !important; overflow-x: clip !important; /* nowsze przeglądarki: obejmuje fixed */ } * { box-sizing: border-box; /* padding nie rozszerza szerokości */ } /* Każdy element blokowy nie może wystawać poza ekran w poziomie. */ img, svg, video, canvas, iframe, picture { max-width: 100% !important; height: auto; } /* Kontener i sekcje — twardo w granicach viewportu. */ .container, section, .site-header, .site-footer, .footer-bottom, main { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } /* ===================================================================== 2) HEADER / BURGER / LOGO (mobilne) ===================================================================== */ @media (max-width: 980px) { /* Górny pasek nagłówka — nie szerszy niż ekran. */ .site-header { width: 100vw !important; max-width: 100vw !important; overflow: hidden; } .header-inner { width: 100% !important; max-width: 100% !important; padding-inline: 14px !important; gap: 10px !important; } /* Logo: nie może „pchać" burgera poza ekran — mieści się w dostępnej przestrzeni i skraca tekst wielokropkiem, gdy brakuje miejsca. */ .brand { min-width: 0 !important; max-width: calc(100vw - 120px) !important; flex: 1 1 auto !important; } .brand-text { min-width: 0 !important; } .brand-name, .brand-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Burger: stabilny cel dotykowy 44x44, przyklejony do prawej krawędzi VIEWPORTU (nie dokumentu), by nie uciekał przy przepełnieniu. */ .nav-toggle { flex: 0 0 44px !important; width: 44px !important; height: 44px !important; position: fixed !important; top: 16px !important; right: 14px !important; margin: 0 !important; z-index: 1200 !important; } /* Mobilne akcje (Pokoje + telefon) na stronie głównej — nie wychodzą poza ekran, zachowują odstęp od burgera. */ .header-actions { margin-right: 56px !important; flex: 0 0 auto !important; min-width: 0 !important; } .hdr-btn { height: 42px !important; white-space: nowrap !important; } } /* ===================================================================== 3) PANEL MENU OFF-CANVAS (.main-nav) ---------------------------------------------------------------------- Panel jest position:fixed i zaparkowany translateX(100%) za prawą krawędzią. Musi mieć szerokość ograniczoną do viewportu, by w stanie zamkniętym nie powiększać szerokości dokumentu. ===================================================================== */ @media (max-width: 980px) { .main-nav { box-sizing: border-box !important; width: min(82vw, 320px) !important; max-width: 90vw !important; /* padding dopasowany do szerokości, by treść nie wychodziła w bok. */ padding-inline: clamp(18px, 5vw, 28px) !important; /* Odstęp od góry panelu ograniczony do wysokości przycisku-X (44px, top:16px) + mały margines — wcześniej 90px dawało puste "powietrze" nad pierwszym linkiem ("Pokoje"). */ padding-top: 72px !important; } /* Pastylki "Pokoje" / "Kontakt" — niższe o ok. 10%, cel dotykowy nadal >= 44px (10px padding pionowy + tekst ~1.1rem ≈ 44-45px całości). */ .main-nav > ul > li > a[href$="#pokoje"], .main-nav > ul > li > a[href$="#kontakt"] { padding: 10px 18px !important; } /* Zablokuj przewijanie wewnątrz panelu w poziomie. */ .main-nav, .main-nav > ul { overflow-x: hidden; } /* Linki w menu nie łamią układu. */ .main-nav > ul > li > a, .main-nav .submenu li a { word-break: break-word; overflow-wrap: break-word; } /* Przycisk CTA (telefon) w otwartym menu mieści się w panelu. */ .nav-cta { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; white-space: nowrap !important; } /* Zasłona (scrim) ograniczona do viewportu. */ .nav-backdrop { width: 100vw !important; max-width: 100vw !important; } /* Rozwijane submenu "Atrakcje Ustki" — na desktopie tłem jest granatowa płytka (dropdown), ale w panelu mobilnym po rozwinięciu wygląda to jak gruba granatowa belka / progress bar. Zastępujemy płaskim, jasnym tłem panelu i cienkim separatorem 1px zamiast wypełnienia. WAŻNE: w stanie zwiniętym (max-height:0) NIE dodajemy pionowego paddingu ani border-top — inaczej pod "Atrakcje Ustki" zostaje pusty ~13px pasek z kreską (padding/border wychodzą poza max-height:0). */ .main-nav .submenu { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 0 0 14px !important; } /* Separator + oddech tylko gdy submenu jest rozwinięte. */ .main-nav > ul > li.has-submenu.open > .submenu { border-top: 1px solid var(--c-line) !important; padding-top: 6px !important; padding-bottom: 6px !important; } .main-nav .submenu li a { color: var(--c-ink) !important; } .main-nav .submenu li a:hover, .main-nav .submenu li a:focus { background: transparent !important; color: var(--c-coral) !important; } /* ------------------------------------------------------------------ FIX: panel menu zwijał się do cienkiego paska PO PRZEWINIĘCIU strony. Przyczyna: .site-header.scrolled ma backdrop-filter (blur), który tworzy "containing block" dla elementów position:fixed. Wtedy .main-nav (fixed, top:0 bottom:0) był pozycjonowany względem headera (height:66px), a nie okna — i po dodaniu klasy .scrolled (scroll > 40px) kurczył się do ~66px, pokazując pusty biały pasek zamiast pełnego menu. Rozwiązanie: na mobile wyłączamy backdrop-filter na headerze (tło jest i tak w 96% kryjące, więc wizualnie bez różnicy). Desktop (>980px) bez zmian. ------------------------------------------------------------------ */ .site-header.scrolled { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } /* ===================================================================== 4) DEDYKOWANE BREAKPOINTY TELEFONÓW ---------------------------------------------------------------------- Optymalizacja dla fizycznych szerokości ekranów popularnych urządzeń. Cel: logo, header-actions i hero zawsze mieszczą się bez przepełnienia. ===================================================================== */ /* ---- 412 px (np. Pixel 5 / wiele Androidów 412 logical px) -------- */ @media (max-width: 412px) { .brand { max-width: calc(100vw - 130px) !important; } .brand-name { font-size: 1.38rem !important; } .brand-sub { font-size: .66rem !important; letter-spacing: 1.4px !important; } .header-actions { margin-right: 54px !important; gap: 7px !important; } .hdr-btn-pokoje { padding-inline: 12px !important; font-size: .88rem !important; } } /* ---- 390 px (np. iPhone 12/13/14/15) ------------------------------- */ @media (max-width: 390px) { .brand { max-width: calc(100vw - 124px) !important; gap: 9px !important; } .brand-name { font-size: 1.32rem !important; } .brand-sub { font-size: .64rem !important; letter-spacing: 1.2px !important; } .home .header-actions { margin-right: 52px !important; gap: 6px !important; } .home .hdr-btn-pokoje { padding-inline: 11px !important; font-size: .86rem !important; } .home .hdr-btn-tel { width: 42px !important; } /* Węższy panel menu, by na 390 px margines po jego stronie nie powodował „luftu" dającego wrażenie przepełnienia. */ .main-nav { width: min(80vw, 300px) !important; } } /* ---- 375 px (np. iPhone X/11/SE2/SE3, iPhone 12 Mini) -------------- */ @media (max-width: 375px) { .brand { max-width: calc(100vw - 116px) !important; gap: 8px !important; } .brand-mark { width: 42px !important; height: 42px !important; border-radius: 11px !important; } .brand-mark svg { width: 30px !important; height: 30px !important; } .brand-name { font-size: 1.25rem !important; } .brand-sub { font-size: .62rem !important; letter-spacing: 1px !important; } .home .header-actions { margin-right: 50px !important; gap: 6px !important; } .home .hdr-btn-pokoje { padding-inline: 10px !important; font-size: .84rem !important; } .home .hdr-btn-tel { width: 40px !important; } .home .hdr-btn-tel .ico { width: 18px !important; height: 18px !important; } /* Burger lekko mniejszy / bliżej krawędzi. */ .nav-toggle { width: 42px !important; height: 42px !important; top: 17px !important; right: 12px !important; } .main-nav { width: min(80vw, 290px) !important; padding-top: 68px !important; } /* Mniejsze nagłówki hero, by nie wymuszały szerokości długim tekstem. */ .hero h1 { font-size: clamp(1.95rem, 9vw, 2.3rem) !important; } } /* ---- 360 px (np. starsze Androidy, Galaxy S7/S8, Moto G) ----------- */ @media (max-width: 360px) { .brand { max-width: calc(100vw - 108px) !important; gap: 7px !important; } .brand-mark { width: 40px !important; height: 40px !important; } .brand-mark svg { width: 28px !important; height: 28px !important; } .brand-name { font-size: 1.18rem !important; letter-spacing: .1px !important; } .brand-sub { font-size: .58rem !important; letter-spacing: .8px !important; } .home .header-actions { margin-right: 48px !important; gap: 5px !important; } .home .hdr-btn-pokoje { padding-inline: 9px !important; font-size: .82rem !important; } .home .hdr-btn-tel { width: 38px !important; } .home .hdr-btn-tel .ico { width: 17px !important; height: 17px !important; } .nav-toggle { width: 40px !important; height: 40px !important; right: 10px !important; } .main-nav { width: min(82vw, 280px) !important; padding-top: 64px !important; } .hero h1 { font-size: clamp(1.85rem, 9vw, 2.2rem) !important; } .hero-lead { font-size: .96rem !important; } /* Kontener z mniejszymi paddingami, by uniknąć ciasnoty. */ .container { padding-inline: 14px !important; } } /* ===================================================================== 5) OCHRONA PRZED POZIOMYM PRZEPŁYNIĘCIEM — dodatkowe elementy ---------------------------------------------------------------------- Tabele, galerie, karty mogą mieć ustaloną min-content szerokość, która rozpycha stronę. Ograniczamy je do 100%. ===================================================================== */ @media (max-width: 480px) { table { display: block; width: 100% !important; max-width: 100% !important; overflow-x: auto; } /* Wszystkie siatki (grid) ograniczone do szerokości kontenera. */ [class*="grid"], [class*="features"], [class*="gallery"], [class*="reviews"], [class*="rooms"] { max-width: 100% !important; box-sizing: border-box !important; } /* Karty / bloki z borderem i paddingiem nie wystają. */ .feature-card, .room-card, .review-card, .faq-item, .attraction-card { max-width: 100% !important; box-sizing: border-box !important; overflow-wrap: break-word; word-break: break-word; } } /* ===================================================================== 6) BEZPIECZNY „ZAPAS" — najwęższe telefony (< 360 px) ---------------------------------------------------------------------- Dla bardzo małych viewportów zapobiegamy jakimukolwiek przepełnieniu i skracamy wszystko do absolutnego minimum. ===================================================================== */ @media (max-width: 340px) { html, body { min-width: 0 !important; } .container { padding-inline: 12px !important; } .brand { max-width: calc(100vw - 96px) !important; gap: 6px !important; } .brand-name { font-size: 1.08rem !important; } .brand-sub { display: none !important; /* ukryj podtytuł, by zmieścić logo */ } .home .header-actions { margin-right: 46px !important; } .nav-toggle { width: 38px !important; height: 38px !important; right: 9px !important; } .hero h1 { font-size: 1.7rem !important; } .hero-lead { font-size: .92rem !important; } } /* ===================================================================== 7) PŁYWAJĄCA IKONA SZUMU MORZA (.sound-toggle) — mobile ---------------------------------------------------------------------- Ma być NISKO w lewym dolnym rogu, mała (44px), spokojna wizualnie (bez etykiety, bez mocnego glow), by nie zasłaniała zdjęć/tekstu/FAQ/CTA. Przycisk "do góry" (.to-top) jest po PRAWEJ (right:22px) — brak kolizji. z-index bez zmian (900): pozostaje pod .nav-backdrop (1040) i .main-nav (1050), więc nie przeszkadza w otwartym menu. ===================================================================== */ @media (max-width: 560px) { .sound-toggle { left: 14px !important; /* nisko przy krawędzi, z uwzględnieniem safe-area (iPhone / gesty) */ bottom: max(18px, env(safe-area-inset-bottom)) !important; height: 44px !important; /* spokojniejszy cień zamiast dużego glow */ box-shadow: 0 6px 16px rgba(6, 50, 71, .22) !important; } .sound-ico-wrap { width: 44px !important; height: 44px !important; } /* Na ekranach dotykowych nie ma stanu hover — etykieta nie powinna rezerwować/zajmować dodatkowej przestrzeni nad treścią. */ .sound-label { display: none !important; } } /* ===================================================================== 8) STAŁA KOLEJNOŚĆ MENU MOBILNEGO — niezależna od strony i scrolla ---------------------------------------------------------------------- Przyczyna problemu (NIE scroll): każda strona ma inny PORZĄDEK znaczników
  • w