/* ── Warstwa responsywna HydroNexis ────────────────────────────────────────── * Układ pochodzi z canvasu projektowanego na 1440 px i opiera się w całości na * atrybutach style="…". Takich reguł nie da się nadpisać inaczej niż !important, * dlatego selektory celują we wzorce wartości, a nie w konkretne elementy. * Dzięki temu arkusz przeżywa kolejne eksporty canvasu. * * Punkty łamania: * 900 px tablet / duży telefon poziomo — siatki schodzą do dwóch kolumn, * nagłówek zwija się do jednego rzędu z menu * 620 px telefon pionowo — wszystko do jednej kolumny */ /* Zasoby nigdy nie rozpychają układu. W arkuszu z canvasu tego brakuje. */ img, video, canvas, svg, iframe { max-width: 100%; } /* Menu telefonu (gen.js, zbudujHeader): te same odnośniki co pasek zakładek i nawigacja nagłówka, zebrane w jednym rozwijanym panelu. Na szerokim ekranie zbędne. */ .hn-menu { display: none; } /* ── Tablet i poniżej ─────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* Siatki o sztywnej liczbie kolumn schodzą do dwóch. minmax(0,1fr) zamiast 1fr — bez tego kolumna nie zejdzie poniżej swojej zawartości i to ona wypycha stronę poza ekran. */ [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns:1.5fr 1fr 1fr 1.3fr"], [style*="grid-template-columns:1.5fr 0.9fr 1.3fr"], [style*="grid-template-columns:1.1fr 1fr 1fr"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Rzędy flex zostają rzędami: znacznik i tekst (–, +, 01, pole zgody) stoją obok siebie, a tekst zawija się we własnej kolumnie. Zawijanie wszystkich rzędów zostawiało znacznik samotnie nad tekstem. Rzędy, które mają się łamać, mają flex-wrap:wrap już w canvasie. Wyjątek to etykieta i wartość rozsunięte na boki: wartość schodzi pod etykietę zamiast wystawać. */ [style*="display:flex"][style*="justify-content:space-between"] { flex-wrap: wrap !important; } /* Projekt wymusza minimalne szerokości kolumn (np. flex:1;min-width:340px), żeby zawijały się do nowego rzędu. Przy 360 px taka kolumna sama jest szersza niż ekran, więc min-width zerujemy. Sam zerowy min-width odbiera jej jednak zawijanie: flex:1 to podstawa 0, więc kolumna zostaje w rzędzie i ściska się do kilkudziesięciu pikseli. Próg zawijania przejmuje flex-basis. */ [style*="min-width:"] { min-width: 0 !important; } [style*="flex:1;min-width:"]:not([style*="min-width:0"]) { flex-basis: 240px !important; } /* Hero PBW: nakładka z canvasu przyciemnia tylko lewą stronę zdjęcia, bo na desktopie tekst zajmuje lewą kolumnę. Na telefonie rozciąga się na całą szerokość i trafia na rozjaśnione niebo. Dokładamy równomierne przyciemnienie - inset box-shadow kładzie się na tle, a pod treścią. */ [style*="pbw-hero.png"] { box-shadow: inset 0 0 0 9999px rgba(10, 27, 51, 0.45) !important; } /* Duże odstępy z desktopu zjadają na telefonie całą szerokość. */ [style*="gap:56px"], [style*="gap:40px"], [style*="gap:36px"], [style*="gap:32px"] { gap: 24px !important; } /* Marginesy boczne kontenerów. */ [style*="padding:0 32px"] { padding-left: 20px !important; padding-right: 20px !important; } /* Wysokość sekcji. */ [style*="padding:88px 0"] { padding-top: 48px !important; padding-bottom: 48px !important; } /* Nagłówki skalowane płynnie. clamp trzyma dolną granicę czytelności i nie pozwala przekroczyć wartości z projektu. */ [style*="font-size:56px"] { font-size: clamp(30px, 8.5vw, 56px) !important; } [style*="font-size:52px"] { font-size: clamp(29px, 8.0vw, 52px) !important; } [style*="font-size:48px"] { font-size: clamp(28px, 7.6vw, 48px) !important; } [style*="font-size:40px"] { font-size: clamp(26px, 7.0vw, 40px) !important; } [style*="font-size:38px"] { font-size: clamp(25px, 6.8vw, 38px) !important; } [style*="font-size:36px"] { font-size: clamp(25px, 6.6vw, 36px) !important; } [style*="font-size:34px"] { font-size: clamp(24px, 6.2vw, 34px) !important; } [style*="font-size:30px"] { font-size: clamp(22px, 5.6vw, 30px) !important; } [style*="font-size:28px"] { font-size: clamp(21px, 5.2vw, 28px) !important; } [style*="font-size:27px"] { font-size: clamp(21px, 5.1vw, 27px) !important; } [style*="font-size:26px"] { font-size: clamp(20px, 5.0vw, 26px) !important; } [style*="font-size:25px"] { font-size: clamp(20px, 4.8vw, 25px) !important; } [style*="font-size:24px"] { font-size: clamp(19px, 4.6vw, 24px) !important; } [style*="font-size:23px"] { font-size: clamp(19px, 4.4vw, 23px) !important; } /* Nagłówek w jednym rzędzie: logo, Konsultacja i przycisk menu. Pasek zakładek i pozostałe odnośniki nawigacji są w panelu menu. Wcześniej oba paski zawijały się do kilku rzędów i zajmowały ponad jedną czwartą ekranu. */ [style*="position:sticky"][style*="z-index:120"] { display: none !important; } [style*="position:sticky"][style*="top:41px"] { top: 0 !important; } [style*="height:74px"] { height: 60px !important; gap: 10px !important; } header nav > :not([data-form-typ]) { display: none !important; } header nav > [data-form-typ] { padding: 10px 14px !important; } .hn-logo img { height: 30px !important; } /* Kotwice zatrzymują się pod niższym nagłówkiem, nie 70 px niżej. */ [style*="scroll-margin-top:130px"] { scroll-margin-top: 72px !important; } .hn-menu { display: block; } .hn-menu > summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; color: #0B2230; } .hn-menu > summary:focus-visible { outline: 2px solid #0E7BB8; outline-offset: -2px; } /* Trzy kreski, po otwarciu krzyżyk. */ .hn-menu-ikona, .hn-menu-ikona::before, .hn-menu-ikona::after { display: block; width: 20px; height: 2px; background: currentColor; } .hn-menu-ikona { position: relative; } .hn-menu-ikona::before, .hn-menu-ikona::after { content: ""; position: absolute; left: 0; } .hn-menu-ikona::before { top: -6px; } .hn-menu-ikona::after { top: 6px; } .hn-menu[open] .hn-menu-ikona { background: transparent; } .hn-menu[open] .hn-menu-ikona::before { top: 0; transform: rotate(45deg); } .hn-menu[open] .hn-menu-ikona::after { top: 0; transform: rotate(-45deg); } /* Panel pod nagłówkiem, na całą szerokość. Nagłówek jest sticky, więc to on jest punktem odniesienia dla position:absolute. */ .hn-menu-panel { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border-bottom: 1px solid #E3EAEF; box-shadow: 0 18px 32px rgba(11, 34, 48, 0.16); } .hn-menu-strony, .hn-menu-kotwice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 10px 20px; } .hn-menu-strony a, .hn-menu-kotwice a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; } /* Kolory jak w pasku zakładek i nawigacji z canvasu; kontrast ≥ 4,6:1. */ .hn-menu-strony { background: #0A1A24; } .hn-menu-strony a { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #8FB3C6; } .hn-menu-strony a:hover { color: #fff; text-decoration: none; } .hn-menu-strony a[aria-current] { background: #0E7BB8; color: #fff; } .hn-menu-kotwice a { font-size: 15.5px; font-weight: 500; color: #33505F; } .hn-menu-kotwice a:hover { color: #0B2230; background: #F4F8FA; text-decoration: none; } .hn-menu-jezyk { padding: 4px 20px 12px; border-top: 1px solid #E3EAEF; } .hn-menu-jezyk [style*="padding:4px 8px"] { padding: 12px !important; font-size: 13px !important; } /* kontrast.js nie zna tła elementów z klasą, więc #8AA3B0 z przełącznika zostaje tu nieskorygowany (2,6:1). Ten sam odcień co w nagłówku: 4,7:1. */ .hn-menu-jezyk a { color: #657780 !important; } /* Pasek z terminem ustawowym jest pozycjonowany absolutnie względem hero. Przy 390 px wystaje o ponad 160 px poza prawą krawędź i zostaje ucięty, bo rodzic ma overflow:hidden. Wracamy nim do normalnego przepływu. */ .hn-alarm { position: static !important; top: auto !important; left: auto !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; text-align: center !important; margin: 0 0 22px !important; } /* Hero rezerwowało górne miejsce na ten pasek - już zbędne. */ [style*="padding:76px 32px 56px"] { padding-top: 18px !important; } /* iOS powiększa stronę po dotknięciu pola z czcionką mniejszą niż 16 px i nie oddaje skali po wyjściu z pola. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; } /* Pole zgody ma domyślne 13 px - za mało dla palca. */ input[type="checkbox"] { width: 20px; height: 20px; flex: none; } /* Kropki rotatora hero mają 4 px wysokości. Powiększamy pole dotyku, a kreska zostaje cienka (tło tylko pod treścią przycisku). */ [data-hero-dot] { height: 24px !important; padding: 10px 0 !important; background-clip: content-box !important; } /* Długie nazwy ustaw, adresy i identyfikatory nie rozpychają kolumn. */ body { overflow-wrap: break-word; } } /* ── Telefon pionowo ──────────────────────────────────────────────────────── */ @media (max-width: 620px) { /* Wszystkie siatki do jednej kolumny. */ [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; } /* Wyjątki od jednej kolumny. Tabela porównawcza (sytuacja | Excel | HydroNexis) ułożona w jedną kolumnę traci podpisy i nie wiadomo, który opis jest czyj. Sytuacja idzie nad dwie kolumny, a nagłówek zostaje nad nimi. */ [style*="grid-template-columns:1.1fr 1fr 1fr"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [style*="grid-template-columns:1.1fr 1fr 1fr"] > :first-child { grid-column: 1 / -1; } [style*="grid-template-columns:1.1fr 1fr 1fr"][style*="background:#0B2230"] > :first-child { display: none; } [style*="grid-template-columns:1.1fr 1fr 1fr"] > * { padding: 12px 14px !important; } [style*="grid-template-columns:1.1fr 1fr 1fr"] > :nth-child(2) { border-left: 0 !important; } /* Stopka: kolumny odnośników obok siebie, logo i dane firmy na całą szerokość. */ [style*="grid-template-columns:1.5fr 1fr 1fr 1.3fr"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [style*="grid-template-columns:1.5fr 1fr 1fr 1.3fr"] > :first-child, [style*="grid-template-columns:1.5fr 1fr 1fr 1.3fr"] > :last-child { grid-column: 1 / -1; } /* Tabela czynników ceny: podpisy kolumn tracą sens, gdy komórki stoją jedna pod drugą - nazwa, skala i opis czytają się bez nich. */ [style*="grid-template-columns:1.5fr 0.9fr 1.3fr"][style*="background:#0B2230"] { display: none !important; } [style*="gap:28px"], [style*="gap:24px"] { gap: 18px !important; } [style*="padding:0 32px"] { padding-left: 16px !important; padding-right: 16px !important; } .hn-menu-strony, .hn-menu-kotwice { padding-left: 16px; padding-right: 16px; } .hn-menu-jezyk { padding-left: 16px; padding-right: 16px; } /* Wewnętrzne wypełnienia kart. */ [style*="padding:24px 28px"] { padding: 18px 16px !important; } [style*="padding:20px 24px"] { padding: 16px 14px !important; } [style*="padding:20px 22px"] { padding: 16px 14px !important; } [style*="padding:18px 20px"] { padding: 14px 13px !important; } /* Moduły (akordeon): nazwa modułu nad tytułem, a rozwinięta treść bez wcięcia pod kolumnę nazwy - wcięcie 108 px zostawiało tekstowi pół ekranu. */ [data-modul] { flex-wrap: wrap !important; row-gap: 6px !important; } [data-modul] > :first-child { width: 100% !important; } [style*="padding:4px 28px 32px 108px"] { padding: 0 16px 24px !important; } /* Pasek z terminem łamie się tu na dwa wiersze, więc pionowa kreska między terminem a tytułem zostawała sama na końcu wiersza. Tytuł może się łamać: przy 320 px angielski nie mieścił się w czerwonym polu. */ .hn-alarm > [style*="width:1px"] { display: none !important; } .hn-alarm > span { white-space: normal !important; } /* Tytuły kroków zakupu (strona główna) stoją w jednym wierszu z czasem trwania i nie łamią się. Najdłuższy ma 290 px i poniżej 360 px wystawał za ekran. */ [style*="flex-wrap:wrap"] > [style*="font-size:18px"][style*="white-space:nowrap"] { white-space: normal !important; } /* Przyciski i pola na pełną szerokość — łatwiej trafić palcem. */ [style*="display:inline-flex"][style*="padding:16px 30px"], [style*="display:inline-flex"][style*="padding:15px 28px"], [style*="display:inline-flex"][style*="padding:14px 24px"] { width: 100% !important; justify-content: center !important; } /* Zakładki formularza (konsultacja / webinar) jedna pod drugą, równej szerokości. hn-app.js przełącza im style, więc reguła celuje w atrybut, nie w wartości. */ [data-form-tab] { flex: 1 1 100% !important; } /* Kody QR skanuje się telefonem z cudzego ekranu albo wydruku. Na telefonie to kilka ekranów martwej treści: własnego ekranu nie zeskanujesz, a karty nie są odnośnikami. */ #kody-qr { display: none !important; } /* One-pager (materialy/): arkusz A4 z marginesami 13 mm i układem flex. Elementy flex nie kurczą się poniżej swojej minimalnej zawartości, więc tabela kosztów (kolumny po 26 mm) rozpychała całą kartkę o 62 px. min-width:0 pozwala im się zwęzić, a tabela przewija się u siebie. Strony prawne mają własny kontener .tabela-scroll i tego nie potrzebują. */ .page { padding: 12px 14px !important; } /* min-width pozwala elementom flex się zwęzić, max-width zabrania im rosnąć ponad kartkę. Bez tej drugiej reguły opakowanie tabeli rozdymało się do szerokości jej zawartości i ciągnęło za sobą całą stronę. */ .page, .page * { min-width: 0 !important; max-width: 100% !important; } .page table { display: block; overflow-x: auto; } }