/* ============================================================ RESPONSIVE.CSS — nakładka responsywna dla seniorplus.com.pl Podpinać JAKO OSTATNI arkusz CSS w . Wymaga też: Breakpointy: 1500 / 1320 / 991 / 767 / 520 ============================================================ */ img { max-width: 100%; height: auto; } iframe { max-width: 100%; } /* Ikony w menu i belce — twarde wymiary, żeby globalna reguła img ich nie zniekształcała */ .strona_glowna a img { width: 22px !important; height: 22px !important; max-width: none !important; } .srodek_box_top_zielony ul li img { width: 30px !important; height: 30px !important; max-width: none !important; } /* Hamburger — wstrzykiwany przez responsive-menu.js, domyślnie ukryty */ #sp_burger { display: none; position: absolute; top: 18px; right: 20px; width: 44px; height: 44px; cursor: pointer; z-index: 100; background: transparent; border: none; padding: 8px; } #sp_burger span { display: block; height: 3px; width: 100%; background: #2C3959; margin: 6px 0; border-radius: 2px; transition: transform .3s, opacity .3s; } #menu_box.menu-open #sp_burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); } #menu_box.menu-open #sp_burger span:nth-child(2) { opacity: 0; } #menu_box.menu-open #sp_burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* ============================================================ ≤1500px — menu (oryginalnie 1450px szerokości) ============================================================ */ @media (max-width: 1500px) { #menu { width: auto; max-width: 100%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } .logo_left { margin-right: 25px; } #menu nav a { margin-right: 18px; } } /* ============================================================ ≤1320px — główne kontenery (1280–1380px) ============================================================ */ @media (max-width: 1320px) { #srodek, #srodek3, .srodek_dlaczego, #kontakt2 { width: auto; max-width: 100%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } #srodek { margin-bottom: 120px; } .srodek_naglowek { width: auto; max-width: 1200px; } #srodek_klawisz { width: 100%; } /* Nagłówek centrowany hackiem margin-left:400px. display:block + fit-content: nagłówek osobno w linii, wycentrowany, zielona linia szerokości napisu, tekst spada pod spód. */ .naglowek_bold { display: block; width: fit-content; min-width: 0; margin: 0 auto 25px; } /* 3 boxy "O nas" na str. głównej — procentowo zamiast 380px (celowo #srodek .box_lewa, bo na podstronie o-nas .box_lewa to kolumna treści) */ #srodek .box_lewa { width: 31%; margin-right: 2%; margin-left: 0 !important; /* nadpisuje inline style */ height: auto; min-height: 420px; } #srodek .box_lewa img { width: 100%; height: auto; } /* Oferta — boxy 335px + inline margin-left:80px */ #srodek2_bg { height: auto; padding-bottom: 60px; overflow: hidden; } #srodek2_bg #srodek { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-bottom: 0; } #srodek2_bg #srodek .srodek_naglowek { flex-basis: 100%; } #box_pobyt { float: none; margin: 0 !important; } /* Sekcja "Świetne warunki" */ #srodek3_bg { height: auto; padding-bottom: 40px; overflow: hidden; } #srodek3 { height: auto; margin-bottom: 60px; overflow: hidden; } .srodek_naglowek3 { width: 48%; } .srodek3_slider { width: 48%; } #sale_slider2 { width: 100%; height: auto; margin-top: 60px; } #sale_slider2 .one-time img { width: 100%; height: auto; margin-top: 40px !important; } /* Atuty — 4 boxy */ .srodek_dlaczego { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; clear: both; padding-top: 40px; } .box_dlaczego { float: none; margin: 0 !important; } /* Kontakt */ #kontakt2 { height: auto; overflow: hidden; padding-bottom: 40px; } .kontakt_lewa { width: 34%; box-sizing: border-box; } .kontakt_lewa_mapka { width: 34%; } .kontakt_lewa_mapka iframe { width: 100%; } .kontakt_lewa3 { width: 66%; } } /* ============================================================ ≤991px — tablet: menu mobilne, układ jednokolumnowy ============================================================ */ @media (max-width: 991px) { /* --- Górna zielona belka --- */ #sticky_tosiechowa, .box_top_zielony { height: auto; } .srodek_box_top_zielony { width: 100%; float: none; display: flex; justify-content: center; margin-right: 0; padding: 6px 10px; box-sizing: border-box; font-size: 15px; } .srodek_box_top_zielony ul { margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; } .srodek_box_top_zielony ul li { padding-left: 20px; padding-right: 20px; top: 0; } .srodek_box_top_zielony ul li img { height: 22px !important; width: 22px !important; margin-right: 7px; } /* --- Menu mobilne --- */ #sp_burger { display: block; } #menu_box { height: auto; position: relative; } #menu { position: static; float: none; width: auto; padding-top: 15px; padding-bottom: 10px; } /* Wariant headera z podstron: logo w .logo_top obok #menu */ .logo_top { float: none; margin: 0; padding: 10px 20px 0; width: auto; } .logo_top .logo_left { margin-top: 0; } .logo_left { float: none; margin: 0; height: 55px; width: 160px; background-position: left center; } #menu section.color-7 { float: none; display: none; width: 100%; } #menu_box.menu-open #menu section.color-7 { display: block; } #menu nav.cl-effect-4 { display: block; padding-top: 10px; } #menu nav.cl-effect-4 a { display: block; margin: 0; padding: 14px 5px; border-bottom: 1px solid #eee; font-size: 17px; } .strona_glowna { display: none; } /* --- Hero --- */ #pozycjonowanie_animacji { width: 100%; height: 75vh; } #haslo_index_animacja { width: 90%; max-width: 600px; margin-top: 0; padding-top: 16vh; font-size: 34px; text-align: center; height: auto; } #index_klawisz { width: 100%; margin: 0; text-align: center; } #index_klawisz a { font-size: 18px; padding: 16px 26px; } /* --- Sekcja "O nas" --- */ body, td, th { font-size: 18px; } #srodek { margin-bottom: 70px; } .srodek_naglowek { padding-top: 40px; padding-bottom: 30px; } .naglowek_bold { font-size: 24px; min-width: 0; padding-bottom: 18px; } .naglowek_bold_left { font-size: 24px; width: auto; } #wspracujemy img { height: 140px; width: 140px; padding-right: 15px; } #srodek .box_lewa { float: none; width: 100%; max-width: 420px; margin: 0 auto 35px !important; min-height: 0; } #srodek_klawisz { height: auto; padding: 20px 0 50px; } /* --- Oferta --- */ #box_pobyt { width: 300px; height: 330px; background-size: 140px; } .box_pobyt_tytuly { top: 230px; font-size: 19px; } .box_pobyt_tytuly nav a { margin: 0 !important; position: static; } .box_pobyt_tytuly nav { text-align: center; } .box_pobyt_tytuly section, .box_pobyt_tytuly nav { float: none; } /* --- Świetne warunki --- */ .srodek_naglowek3 { float: none; width: 100%; padding-top: 30px; padding-bottom: 20px; } .srodek3_slider { float: none; width: 100%; max-width: 620px; margin: 0 auto; } #sale_slider2 { float: none; margin-top: 20px; } #sale_slider2 .one-time img { margin-top: 0 !important; } .box_dlaczego { width: 45%; max-width: 290px; background-size: 120px; } /* --- Kontakt --- */ #kontakt2 { font-size: 18px; } .kontakt_lewa { float: none; width: 100%; height: auto; padding-bottom: 30px; background-position: right bottom; background-size: contain; } .kontakt_linia1 { margin-top: 40px; width: auto; padding-left: 25px; padding-right: 25px; } .kontakt_lewa3 { float: none; width: 100%; border-left: none; border-right: none; } .kontakt_sekcja_gora, .kontakt_sekcja_dol { height: auto; overflow: hidden; } .gora_left, .dol_left { float: none; width: 100%; height: auto; padding: 15px 20px; margin: 0; box-sizing: border-box; overflow: hidden; } .gora_left_bg, .dol_left_bg { margin-left: 0; margin-top: 10px; } .gora_left ul, .dol_left ul { margin: 0; padding-left: 60px; } .gora_left ul li, .dol_left ul li { margin: 8px 0 !important; padding-top: 0 !important; position: static !important; top: auto !important; left: auto !important; margin-left: 0 !important; } #kontakt2 nav a { margin: 0 !important; position: static !important; top: auto !important; } #kontakt2 nav, #kontakt2 section { float: none; } .kontakt_lewa_mapka { float: none; width: 100%; height: 350px; margin-top: 20px; } .kontakt_lewa_mapka iframe { height: 350px; } #agencja { float: none; width: 100%; text-align: center; margin-top: 25px; padding: 0 15px 20px; box-sizing: border-box; } #agencja img { vertical-align: middle; } /* --- Klawisz do góry --- */ #do_gory { left: auto; right: 15px; bottom: 15px; } /* --- Popup wejściowy --- */ .window_content img { height: auto; max-width: 92vw; max-height: 70vh; width: auto; } } /* ============================================================ ≤767px — telefon ============================================================ */ @media (max-width: 767px) { .srodek_box_top_zielony ul li { padding-left: 10px; padding-right: 10px; font-size: 14px; } #haslo_index_animacja { font-size: 28px; padding-top: 14vh; } #index_klawisz a { font-size: 16px; padding: 14px 20px; } #wspracujemy img { height: 110px; width: 110px; } .naglowek_bold, .naglowek_bold_left { font-size: 21px; } .wciecie { padding-left: 0; padding-right: 0; } .box_dlaczego { width: 100%; max-width: 290px; } .kontakt_linia1 { font-size: 20px; } } /* ============================================================ ≤520px — małe telefony ============================================================ */ @media (max-width: 520px) { .srodek_box_top_zielony ul li:nth-child(3) { display: block; padding-top: 6px; text-align: center; } #haslo_index_animacja { font-size: 24px; } body, td, th { font-size: 16px; } #kontakt2 { font-size: 16px; } .gora_left, .dol_left { font-size: 17px !important; } #box_pobyt { width: 100%; max-width: 300px; } .logo_left { width: 140px; } } /* ============================================================ PODSTRONA "O NAS" (#srodek_o_nas, kolumny lewa/prawa) ============================================================ */ /* Sztywna wysokość 2500px → auto (overflow:hidden domyka floaty) */ #srodek_o_nas { height: auto !important; overflow: hidden; } @media (max-width: 1240px) { #srodek_o_nas { width: auto; max-width: 100%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; padding-top: 80px; margin-bottom: 80px; } /* Lewa kolumna (.box_lewa) + prawa kolumna procentowo */ #srodek_o_nas .box_lewa { width: 34%; margin-right: 3%; } #prawa_kolumna { width: 63%; } /* Slider w prawej kolumnie */ #prawa_kolumna .srodek3_slider { width: 100%; max-width: 600px; } #prawa_kolumna #sale_slider2 { width: 100%; float: none; } #prawa_kolumna .one-time img { width: 100%; height: auto; } #lewa_kolumna2 img, #lewa_kolumna3 img { width: 100%; height: auto; } #lewa_kolumna2, #lewa_kolumna3 { width: 100%; margin-right: 0; } } @media (max-width: 991px) { #srodek_o_nas { padding-top: 50px; margin-bottom: 40px; } /* Kolumny jedna pod drugą: najpierw treść (prawa), potem lewa z obrazkami */ #srodek_o_nas .box_lewa, #prawa_kolumna { float: none; width: 100%; margin-right: 0; } #prawa_kolumna { line-height: 30px; } #lewa_kolumna2 { margin-top: 40px; margin-bottom: 40px; } #lewa_kolumna3 { margin-top: 30px; margin-bottom: 40px; } #lewa_kolumna3 img { margin-bottom: 15px; } .box_lewa_naglowek_bold { font-size: 24px; width: auto; max-width: 320px; } .pisanie_pod_naglowekiem { font-size: 24px; margin-bottom: 35px; } .cytat { font-size: 22px; padding: 30px 15px; } .rozdzielacz { width: 85%; } /* Zeruj inline margin-top:100px na zdjęciach slidera */ #prawa_kolumna .one-time img { margin-top: 0 !important; } #prawa_kolumna #sale_slider2 { margin-top: 20px; margin-bottom: 30px; } #prawa_kolumna .srodek3_slider { margin: 0 auto; } } @media (max-width: 520px) { .box_lewa_naglowek_bold { font-size: 21px; } .pisanie_pod_naglowekiem { font-size: 21px; } .cytat { font-size: 20px; line-height: 30px; } } /* ============================================================ PODSTRONA "GALERIA" (#srodek_misja, siatka zdjęć, fancybox) ============================================================ */ /* Header podstron: logo z .logo_top ma margin-left 250px — zwężamy wcześniej */ @media (max-width: 1500px) { .logo_top { margin-left: 20px; } } @media (max-width: 1240px) { #srodek_misja { width: auto; max-width: 100%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; padding-top: 60px; margin-bottom: 60px; } #srodek_galeria, #srodek_galeria2 { display: flex; flex-wrap: wrap; padding-top: 30px; margin-bottom: 0; } /* Ramki zdjęć: procentowo, stała proporcja zamiast sztywnych 276x184 */ .zdjecie_ramka_podstrona, .zdjecie_ramka_podstrona_big { width: calc(25% - 24px); height: auto; margin: 12px; } .zdjecie_ramka_podstrona a img, .zdjecie_ramka_podstrona_big a img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; } /* Opisy pod zdjęciem zamiast overlay top:-95px (rozjeżdża się przy skalowaniu) */ .opis_zdjecie { position: static; top: 0; margin: 6px 0 0; font-size: 14px; } } @media (max-width: 991px) { .zdjecie_ramka_podstrona, .zdjecie_ramka_podstrona_big { width: calc(50% - 16px); margin: 8px; } .box_galeria_naglowek_bold { font-size: 24px; width: auto; max-width: 320px; } .pisanie_pod_naglowekiem_galeria { font-size: 24px; margin-bottom: 20px; } .box_lewa_misja { float: none; width: 100%; margin-right: 0; } #srodek_galeria, #srodek_galeria2 { padding-top: 15px; } } @media (max-width: 520px) { .zdjecie_ramka_podstrona, .zdjecie_ramka_podstrona_big { width: 100%; margin: 8px 0; } .box_galeria_naglowek_bold { font-size: 21px; } } /* ============================================================ PODSTRONA "MISJA" (#srodek_misja z height 1800, kolumny 650px) ============================================================ */ /* Sztywne wysokości sekcji misji → auto (na mobile treść jest dłuższa) */ #srodek_misja { height: auto !important; overflow: hidden; } @media (max-width: 1240px) { #prawa_kolumna_misja, #lewa_kolumna_o_nas { width: 58%; } #srodek_misja2, #srodek_misja3 { background-size: 38% auto; } } @media (max-width: 991px) { #prawa_kolumna_misja, #lewa_kolumna_o_nas { float: none; width: 100%; line-height: 30px; } /* Tła boczne lądowałyby pod tekstem — wyłączamy */ #srodek_misja2, #srodek_misja3 { background-image: none !important; padding-top: 40px; } .box_naglowek_misja { float: none; width: 100%; margin-right: 0; } .box_naglowek_misja_bold { font-size: 22px; } .pisanie_pod_naglowekiem_misja { font-size: 22px; margin-bottom: 25px; } .pisanie_pod_naglowekiem { font-size: 24px; margin-bottom: 35px; } } /* ============================================================ PODSTRONA "DO POBRANIA" (#srodek_pobierz, boxy PDF) ============================================================ */ #srodek_pobierz { height: auto !important; overflow: hidden; padding-bottom: 40px; } @media (max-width: 1320px) { #srodek_pobierz { width: auto; max-width: 100%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; padding-top: 80px; margin-bottom: 60px; } /* Kontener boxów PDF: 1280px w rodzicu 1200px — na flex z zawijaniem */ #srodek_oferta2 { width: 100%; height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-bottom: 40px; } #srodek_oferta2 #box_pobyt { float: none; margin: 0 !important; padding-bottom: 20px; } } @media (max-width: 991px) { #srodek_pobierz { padding-top: 50px; } /* Boxy PDF: mniejsze, ikona wycentrowana (oryginalnie background-position 94px) */ #srodek_oferta2 #box_pobyt { width: 285px; height: 355px; background-position: center 80px !important; } .box_oferta_tytuly { top: 250px; } .box_oferta_tytuly nav a { margin: 0 !important; position: static; } .box_oferta_tytuly nav { text-align: center; } .box_oferta_tytuly section, .box_oferta_tytuly nav { float: none; } .mala_litera_wnioski { top: 150px; margin-top: 0 !important; } } /* ============================================================ PODSTRONA "MISJA" (#srodek_misja z fixed height, kolumny 650px, tła bg.jpg/bg2.jpg za tekstem) ============================================================ */ /* Misja ma height:1800px, do-pobrania 1650px — wszędzie auto. Clearfix zamiast overflow:hidden, bo overflow obcinał ikony wystające poza kontener (rehabilitacja) */ #srodek_misja { height: auto !important; } #srodek_misja::after { content: ""; display: table; clear: both; } @media (max-width: 1240px) { #prawa_kolumna_misja, #lewa_kolumna_o_nas { width: 58%; } } @media (max-width: 991px) { /* Zdjęcia tła za tekstem — na wąskim ekranie nieczytelne, wyłączamy */ #srodek_misja2, #srodek_misja3 { background-image: none !important; padding-top: 40px; } #prawa_kolumna_misja, #lewa_kolumna_o_nas { width: 100%; float: none; line-height: 30px; } .box_naglowek_misja { float: none; width: 100%; margin-right: 0; } .box_naglowek_misja_bold { font-size: 22px; } .pisanie_pod_naglowekiem_misja { font-size: 21px; margin-bottom: 20px; } .pisanie_pod_naglowekiem { font-size: 24px; margin-bottom: 30px; } } /* ============================================================ PODSTRONA "DO POBRANIA" (#srodek_pobierz, boxy PDF 285px) ============================================================ */ #srodek_pobierz { height: auto !important; overflow: hidden; } @media (max-width: 1320px) { #srodek_pobierz { width: auto; max-width: 100%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; padding-top: 60px; margin-bottom: 60px; } #srodek_oferta2 { width: auto; max-width: 100%; height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-bottom: 40px; padding-bottom: 20px; } /* #box_pobyt już ma float:none; margin:0 !important z sekcji oferty */ } @media (max-width: 991px) { /* Wariant do-pobrania: ikona ma background-position 94px 80px — centrujemy */ #box_pobyt { background-position: center 80px !important; } .box_oferta_tytuly { top: 230px; font-size: 17px; } .box_oferta_tytuly nav { float: none; text-align: center; } .box_oferta_tytuly section { float: none; } .box_oferta_tytuly nav a { margin: 0 !important; position: static; } .mala_litera_wnioski { top: 135px; } /* Do-pobrania: oryginalny hack "position:relative;top:Xpx" liczy Y względem zwiniętej (float) wysokości elementów, więc na mobile podpis renderuje się NAD tytułem, prosto na ikonie. Zamiast kolejnych wartości top — normalny flow, wyskalowana mniejsza ikona i realny odstęp. Scoped do #srodek_pobierz, żeby nie ruszać boxów "Dodatkowo odpłatnie" na ofercie/rehabilitacji. */ #srodek_pobierz #srodek_oferta2 { align-items: flex-start; } #srodek_pobierz #box_pobyt { float: none !important; width: 100% !important; max-width: 300px !important; height: auto !important; padding: 185px 24px 28px !important; box-sizing: border-box !important; background-position: center 22px !important; background-size: auto 145px !important; margin: 0 auto 24px !important; } #srodek_pobierz .box_oferta_tytuly { position: static !important; top: auto !important; font-size: 18px !important; } #srodek_pobierz .box_oferta_tytuly section, #srodek_pobierz .box_oferta_tytuly nav { float: none !important; display: block !important; } #srodek_pobierz .box_oferta_tytuly nav a { margin: 0 !important; position: static !important; display: block !important; } #srodek_pobierz .mala_litera_wnioski { position: static !important; top: auto !important; clear: none !important; margin-top: 8px !important; } } /* ============================================================ PODSTRONY "OFERTA" i "REHABILITACJA" ============================================================ */ @media (max-width: 1320px) { /* Nagłówek "Dodatkowo odpłatnie" na całą szerokość flexa z boxami */ #srodek_oferta2 .srodek_naglowek { flex-basis: 100%; } } @media (max-width: 1240px) { /* Rehabilitacja: lewa kolumna z poziomymi boxami */ #lewa_kolumna_misja { width: 45%; } .box_oferta_poziomy { width: auto; max-width: 450px; padding-right: 20px; } } @media (max-width: 991px) { /* Oferta: tło bg.jpg za listą — wyłączamy jak w misji */ #srodek_oferta { background-image: none !important; padding-top: 20px; } /* Rehabilitacja: #prawa_kolumna ma top:-45px, lewa_kolumna_misja top:-50px */ #prawa_kolumna { position: static; } #lewa_kolumna_misja { width: 100%; float: none; position: static; margin-top: 30px; } /* Poziome boxy: flexbox — ikona po lewej, tekst wycentrowany w pionie. W HTML ikona jest PO tekście, więc order odwraca kolejność. */ .box_oferta_poziomy { display: flex; align-items: center; gap: 18px; width: auto; max-width: 450px; height: auto; min-height: 0; margin: 0 auto 30px; padding: 22px 20px; box-sizing: border-box; } .box_oferta_poziomy span { margin-left: 0 !important; order: 2; } .kolko_oferta_poziom_bg { position: static; left: 0; top: 0; order: 1; flex: 0 0 62px; height: 62px; width: 62px; } .pisanie_pod_naglowekiem_oferta { font-size: 26px; margin-bottom: 25px; } /* Lista świadczeń w ofercie */ #prawa_kolumna_misja ul { padding-left: 22px; } #prawa_kolumna_misja { margin-top: 0; } } /* ============================================================ STRONA GŁÓWNA — HERO/SLIDER na mobile: contain zamiast cover ============================================================ KLUCZOWE: wartość 62vw poniżej to proporcja zdjęć ze slidera. Wzór: (wysokość zdjęcia / szerokość zdjęcia) × 100. Przykłady: zdjęcie 1920×1080 (16:9) → 56.25vw zdjęcie 1920×1280 (3:2) → 66.6vw zdjęcie 1920×1200 → 62.5vw Sprawdź wymiary plików w katalogu slider/ i wstaw swoją wartość we WSZYSTKICH miejscach z 62vw — wtedy zdjęcie wypełni kontener w całości, bez kadrowania i bez białych pasów. */ @media (max-width: 991px) { /* backgroundTransition.css ustawia html/body na 75vh — resetujemy */ html, body { height: auto !important; } /* Zdjęcia slidera 1800×774: aspect-ratio gwarantuje idealną proporcję kontenera niezależnie od scrollbara/zooma (vw potrafiło zostawiać paski boczne). Przy zgodnej proporcji cover = pełne zdjęcie bez kadrowania, a nie zostawia mikro-pasów z zaokrągleń. */ .backgroundTransition, .backgroundTransition .image-top, .backgroundTransition .image-bottom { width: 100% !important; height: auto !important; aspect-ratio: 1800 / 774; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Hasło + przycisk: flexbox, wycentrowane w pionie, z odstępem */ #pozycjonowanie_animacji { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } #haslo_index_animacja { padding-top: 0; margin: 0 auto; width: 80%; max-width: 420px; height: 18vw; max-height: 95px; } #index_klawisz { width: 100%; margin: 5vw 0 0; text-align: center; } #index_klawisz a { position: static; top: 0; display: inline-block; font-size: 14px; padding: 10px 16px; } /* ALTERNATYWA (gdyby contain jednak nie pasował wizualnie): zostaw cover, ale kontroluj kadr — odkomentuj poniższe i usuń blok contain powyżej: .backgroundTransition, .backgroundTransition .image-top, .backgroundTransition .image-bottom { height: 60vh !important; background-size: cover !important; background-position: center 25% !important; } #pozycjonowanie_animacji { height: 60vh; } */ } /* ============================================================ FONT-DISPLAY: SWAP — eliminuje blokowanie renderu przez fonty Gilroy. Redeklaracja @font-face z tą samą nazwą+src, ładowana jako ostatnia, nadpisuje deskryptor font-display. Ścieżka ../ liczona od /css/ = root, poprawna dla strony głównej i wszystkich podstron. (Gdyby na jakiejś przeglądarce nie zadziałało — dopisz font-display: swap; bezpośrednio do @font-face w