/* --------------------------------------------------------------------------- uklad.css - poprawki ukladu przy zoomie i waskim oknie Podpinane przez scripts/typografia-nbsp.py razem z typografia.css Obejmuje wszystkie strony z szablonem serwisu, takze osiem deckow ofertowych (oferta*) - one uzywaja tej samej stopki i tych samych klas tresci, wiec dostaja te same poprawki. Reguly Astro sa scope'owane atrybutem (np. .hero-h1--wrap[data-astro-cid-...]), wiec maja wyzsza specyficznosc niz zwykla klasa. Zeby nadpisac je z zewnetrznego arkusza bez zalewania pliku !important, klasa jest tu podwojona (.hero-panel.hero-panel) - to podnosi specyficznosc do tego samego poziomu, a kolejnosc (link na koncu ) rozstrzyga na korzysc tego pliku. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- 1. Stopka - osiem sztywnych kolumn nie miescilo sie w kontenerze Suma minimow: 180+120+168+132+160+122+106+126 = 1114 px, plus 7 x 32 px odstepu = 1338 px. Kontener ma max 1280 px, wiec ostatnia kolumna ("Prawne") wychodzila poza obszar i byla przycinana - na kazdej szerokosci powyzej 1024 px, nie tylko przy zoomie. Ponizej 1024 px dzialaly juz media query z dwoma i jedna kolumna. --------------------------------------------------------------------------- */ @media (min-width: 1025px) { .footer-top.footer-top { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; row-gap: 44px; } } /* Pasek technologii pod stopka byl az do 34 px - dekoracja przykrywala tresc. Zostaje ta sama animacja, mniejsza skala. */ .footer-marquee-item span { font-size: clamp(14px, 1.8vw, 24px); } /* --------------------------------------------------------------------------- 2. Hero - przy niskim oknie tresc uciekala nad krawedz ekranu Panel jest kotwiczony do dolu sekcji, a jego wysokosc wynika z tresci. Typografia skalowala sie wylacznie szerokoscia (6.4vw), wiec przy 1280x600 gorna krawedz panelu ladowala na -88 px i kicker "MKM LABS SP. Z O.O." znikal nad ekranem. Teraz kazdy wymiar bierze mniejsza z dwoch wartosci: procent szerokosci albo procent wysokosci okna. Zakres od 481 px w gore - ponizej dziala dedykowany uklad mobilny. --------------------------------------------------------------------------- */ @media (min-width: 481px) { .hero-h1.hero-h1--wrap { font-size: clamp(28px, min(6.4vw, 8.4dvh), 76px); } .hero-signature.hero-signature--compact { font-size: clamp(16px, min(1.8vw, 2.6dvh), 26px) !important; } .hero-kicker.hero-kicker { margin-bottom: clamp(10px, 2.2dvh, 22px); padding: clamp(6px, 1.2dvh, 10px) 12px; } .hero-cta.hero-cta { margin-top: clamp(14px, 3dvh, 32px); } /* Kreska pod naglowkiem - przy niskim oknie zjada cala rezerwe miejsca. */ .hero-copy.hero-copy:after { margin-top: clamp(14px, min(3.2vw, 3dvh), 42px); } .hero-panel.hero-panel { padding: clamp(20px, min(4vw, 5dvh), 64px); } .hero-content-container.hero-content-container { padding-bottom: clamp(20px, 6dvh, 56px); } }