/* Globalne ustawienia */ body { font-family: 'Open Sans', sans-serif; /* Upewnij się, że ten font jest zaimportowany w HTML */ margin: 0; padding: 0; background-color: #ffffff; color: #333; overflow-x: hidden; /* Zapobiega poziomemu przewijaniu */ line-height: 1.6; /* Lepsza czytelność tekstu */ } /* Kontener centralizujący i ograniczający szerokość */ /* Używamy go wewnątrz sekcji, żeby treść była wyśrodkowana */ .container { width: 90%; /* Domyślna szerokość na większych ekranach */ max-width: 1200px; /* Maksymalna szerokość kontenera */ margin: 0 auto; /* Wyśrodkowanie kontenera */ padding: 0 15px; /* Lekki padding po bokach, żeby treść nie dotykała krawędzi */ box-sizing: border-box; color: #555; /* Padding wliczany w szerokość */ } /* NOWY Styl dla sekcji startowej */ #intro-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 100vh; padding: 20px; box-sizing: border-box; background-color: #ffffff; color: #333; overflow: hidden; /* WAŻNE: Ukrywa kształty wychodzące poza sekcję */ position: relative; /* DODAJ TO: Umożliwia pozycjonowanie absolutne kształtów wewnątrz */ z-index: 1; /* Upewnij się, że treści (logo, tekst, przycisk) są nad kształtami */ } /* Styl dla logo w sekcji startowej */ #intro-screen .intro-logo { max-width: 450px; /* Większe logo niż w nagłówku */ height: auto; margin-bottom: 30px; /* Odstęp pod logo */ } /* Styl dla placeholderu obrazka (jeśli użyjesz) */ /* #intro-screen .intro-visual-placeholder { max-width: 80%; height: auto; margin-bottom: 30px; /* Możesz nadać mu tymczasowe tło np. background-color: #eee; min-height: 200px; aby widzieć miejsce */ /* } */ /* Stylowanie nagłówków i tekstu w sekcji startowej */ #intro-screen h1 { color: #d48206; /* Użyj koloru akcentującego */ margin-bottom: 15px; font-size: 2.2em; /* Dostosuj rozmiar */ line-height: 1.2; } #intro-screen p { color: #555; /* Dostosuj kolor */ margin-bottom: 30px; font-size: 1.1em; max-width: 600px; /* Ogranicz szerokość tekstu dla czytelności */ line-height: 1.6; } .background-shape { position: absolute; /* Pozycjonowanie absolutne w ramach #intro-screen */ box-sizing: border-box; border-width: 2px; /* Grubość ramki */ border-style: solid; /* Styl ramki */ background-color: transparent; /* Brak wypełnienia */ opacity: 0.3; /* Lekka przezroczystość */ z-index: -1; /* Upewnij się, że kształty są pod treścią */ animation: float-and-color-change infinite ease-in-out; /* Nazwa animacji, nieskończona, płynna */ } .shape-square { width: 80px; /* Rozmiar kwadratu */ height: 80px; border-radius: 5px; /* Lekko zaokrąglone rogi */ } /* Style dla okrągłych kształtów */ .shape-circle { width: 90px; /* Rozmiar koła */ height: 90px; border-radius: 50%; /* Idealnie okrągłe */ } /* Definicja animacji: ruch, obrót i zmiana koloru ramki */ @keyframes float-and-color-change { 0% { transform: translate(0, 0) rotate(0deg); /* Pozycja początkowa, obrót */ border-color: black; /* Kolor ramki na początku */ opacity: 0.3; } 25% { border-color: rgba(212, 150, 14, 0.5); /* Półprzezroczysty złoty */ } 50% { transform: translate(100px, 150px) rotate(180deg); /* Pozycja w środku animacji */ border-color: gold; /* Kolor ramki w środku */ opacity: 0.5; } 75% { border-color: rgba(212, 150, 14, 0.5); /* Półprzezroczysty złoty */ } 100% { transform: translate(200px, 0) rotate(360deg); /* Pozycja końcowa, obrót */ border-color: black; /* Kolor ramki na końcu */ opacity: 0.3; } } /* Ustawienie pozycji początkowej i parametrów animacji dla każdego kształtu */ .shape-1 { top: 10%; /* Początkowa pozycja */ left: 5%; animation-duration: 60s; /* Czas trwania animacji */ animation-delay: 0s; /* Opóźnienie startu */ } .shape-2 { bottom: 20%; right: 10%; animation-duration: 60s; animation-delay: 0s; /* Zmiana animacji dla tego kształtu, żeby "latał" inaczej */ animation-name: float-and-color-change-reverse; } .shape-3 { top: 30%; right: 5%; animation-duration: 60s; animation-delay: 0s } .shape-4 { bottom: 10%; left: 15%; animation-duration: 60s; animation-delay: 0s; /* Zmiana animacji dla tego kształtu */ animation-name: float-and-color-change-alt; } /* Dodatkowe klatki kluczowe dla innych wariantów ruchu */ @keyframes float-and-color-change-reverse { 0% { transform: translate(0, 0) rotate(0deg); border-color: gold; /* Zaczyna od złotego */ opacity: 0.3; } 25% { border-color: rgba(0, 0, 0, 0.5); /* Półprzezroczysty czarny */ } 50% { transform: translate(-100px, -150px) rotate(-180deg); /* Ruch w inną stronę */ border-color: black; opacity: 0.5; } 75% { border-color: rgba(0, 0, 0, 0.5); /* Półprzezroczysty czarny */ } 100% { transform: translate(-200px, 0) rotate(-360deg); border-color: gold; /* Kończy na złotym */ opacity: 0.3; } } @keyframes float-and-color-change-alt { 0% { transform: translate(0, 0) rotate(0deg); border-color: black; opacity: 0.4; } 40% { transform: translate(50px, 200px) rotate(100deg); border-color: gold; } 80% { transform: translate(150px, 50px) rotate(250deg); border-color: black; } 100% { transform: translate(0, 0) rotate(360deg); border-color: black; opacity: 0.4; } } /* Styl dla głównej zawartości - domyślnie ukryta przy ładowaniu */ #main-content.hidden { display: none; } /* Styl dla głównej zawartości - gdy jest widoczna (nadpisuje .hidden) */ #main-content { display: block; /* Upewnij się, że domyślnie ma display: block, gdy nie ma klasy hidden */ /* Dodaj przestrzeń na górze, aby treść nie chowała się pod stałym nagłówkiem */ /* Wartość powinna być większa niż wysokość nagłówka */ padding-top: 80px; /* Dostosuj tę wartość do dokładnej wysokości Twojego nagłówka */ } /* Nagłówek (istniejący) */ header { background-color: #ffffff; /* Zmieniono na białe zgodnie z analizą strony online */ color: #333; /* Zmieniono kolor tekstu, bo tło jest białe */ padding: 10px 0; /* text-align: center; */ /* Usunięto, bo flexbox w .container to lepiej ogarnia */ position: fixed; /* Domyślnie sticky, działa dobrze */ top: 0; left: 0; /* Dodano, żeby sticky dobrze działało na 100% szerokości */ width: 100%; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Dodano lekki cień, żeby był widoczny na tle treści */ } /* Kontener w nagłówku - dostosowanie flexbox */ header .container { display: flex; /* Upewnij się, że flexbox jest ustawiony */ justify-content: space-between; align-items: center; padding: 0 20px; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; /* Pozwala na zawijanie elementów */ } /* Logo w nagłówku (istniejące) */ header .logo { display: flex; align-items: center; /* margin-right: 20px; */ /* Można dodać margines */ } header .logo-img { max-width: 150px; /* Może mniejsze niż w intro */ height: auto; } /* Nawigacja (istniejąca) */ nav ul { list-style: none; padding: 0; margin: 0; display: flex; /* Flexbox dla elementów menu */ flex-wrap: wrap; /* Pozwala na zawijanie menu na małych ekranach */ justify-content: center; /* Centruje elementy menu */ } nav ul li { margin: 5px 10px; } nav ul li a { color: #000000; /* Upewnij się, że kolor jest widoczny na białym tle nagłówka */ text-decoration: none; font-weight: bold; font-size: 1em; transition: color 0.3s ease; /* Dodano płynne przejście koloru */ padding: 5px 0; /* Dodano padding dla lepszego obszaru kliknięcia */ } nav ul li a:hover { color: #d48206; /* Kolor przy najechaniu */ } header .menu a { position: relative; /* Kluczowe dla pozycjonowania podpowiedzi */ display: inline-block; /* Zmieniono na inline-block, jeśli nie było block wcześniej */ /* Pozostałe style a (kolor, font-weight, text-decoration, padding, transition) pozostają */ } /* Styl dla samej podpowiedzi (tworzymy ją jako pseudo-element ::after) */ header .menu a::after { content: attr(data-tooltip); /* Pobiera tekst z atrybutu data-tooltip */ position: absolute; /* Pozycjonuj absolutnie względem linku (position: relative) */ bottom: 100%; /* Umieść nad linkiem (100% wysokości linku w dół, więc "wystaje" w górę) */ left: 50%; /* Zacznij od środka linku */ transform: translateX(-50%); /* Przesuń w lewo o połowę własnej szerokości, aby wyśrodkować */ /* Wygląd prostokąta */ background-color: #333; /* Ciemne tło */ color: #fff; /* Biały tekst */ padding: 8px 12px; /* Wewnętrzny odstęp */ border-radius: 4px; /* Lekko zaokrąglone rogi */ font-size: 0.9em; /* Trochę mniejsza czcionka */ line-height: 1.4; text-align: center; /* Wyśrodkuj tekst */ white-space: nowrap; /* Zapobiega zawijaniu się tekstu w jednym wierszu */ /* Jeśli chcesz, aby tekst się zawijał, użyj: white-space: normal; max-width: 150px; (lub inną wartość) */ z-index: 1001; /* Upewnij się, że jest nad innymi elementami (większy niż z-index headera) */ pointer-events: none; /* Sprawia, że podpowiedź nie blokuje interakcji myszy z elementami pod nią */ /* Domyślnie ukryj podpowiedź */ opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; /* Płynne przejście */ } /* Styl ogólny dla sekcji (padding, margines) */ section { padding: 40px 0; /* Padding góra/dół dla wszystkich sekcji */ margin: 0; /* Sekcje nie powinny mieć domyślnych marginesów */ background-color: #fff; /* Domyślne tło sekcji */ } /* Styl dla nagłówków sekcji (H2) */ section h2 { color: #d48206; border-bottom: 2px solid #000000; padding-bottom: 10px; margin-top: 0; /* Usuń domyślny górny margines */ margin-bottom: 30px; /* Większy margines pod nagłówkiem */ text-align: center; /* Wyśrodkuj nagłówki sekcji */ max-width: 800px; /* Ogranicz szerokość linii pod nagłówkiem */ margin-left: auto; margin-right: auto; } /* NOWA SEKCJA: Dlaczego Finansowy Przewodnik (#why-us) */ #why-us { background-color: #f8f8f8; /* Jasnoszare tło dla odróżnienia */ } #why-us .benefits-container { display: flex; /* Użyj flexbox do ułożenia elementów obok siebie */ justify-content: space-around; /* Rozłóż elementy równomiernie */ flex-wrap: wrap; /* Pozwól elementom zawijać się na małych ekranach */ gap: 20px; /* Odstęp między elementami */ } #why-us .benefit-item { flex: 1; /* Elementy zajmują równą przestrzeń */ min-width: 250px; /* Minimalna szerokość elementu przed zawinięciem */ max-width: 350px; /* Maksymalna szerokość elementu */ text-align: center; padding: 20px; /* border: 1px solid #ddd; */ /* Opcjonalne obramowanie */ /* border-radius: 8px; */ /* Opcjonalne zaokrąglenie */ } #why-us .benefit-icon { width: 180px; /* Rozmiar ikon */ height: 180px; margin-bottom: 15px; border-radius: 8px; } #why-us .benefit-item h3 { color: #000000; margin-top: 0; margin-bottom: 10px; } #why-us .benefit-item p { color: #555; font-size: 1em; } /* NOWA SEKCJA: Główne Obszary / Kluczowe Kategorie (#categories) */ #categories { background-color: #fff; /* Białe tło */ } #categories .category-container { display: flex; /* Flexbox dla kafelków kategorii */ justify-content: center; /* Wyśrodkuj kafelki */ flex-wrap: wrap; /* Pozwól im zawijać się */ gap: 20px; /* Odstęp między kafelkami */ } #categories .category-item { width: 300px; /* Stała szerokość kafelka (lub min/max-width) */ border: 1px solid #ddd; border-radius: 16px; padding: 20px; text-align: center; transition: box-shadow 0.3s ease-in-out; background-color: #f8f8f8; /* Jasnoszare tło kafelka */ display: flex; /* Użyj flexbox do układu wewnątrz kafelka */ flex-direction: column; /* Elementy w kolumnie */ justify-content: space-between; /* Rozłóż elementy w pionie */ } #categories .category-item:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); } #categories .category-icon { width: 180px; /* Rozmiar ikon kategorii */ height: 180px; border-radius: 8px; margin: 0 auto 15px auto; /* Wyśrodkuj i dodaj odstęp pod ikoną */ } #categories .category-item h3 { color: #000000; margin-top: 0; margin-bottom: 10px; font-size: 1.2em; } #categories .category-item p { color: #555; font-size: 1em; margin-bottom: 20px; /* Odstęp przed przyciskiem */ flex-grow: 1; /* Pozwól tekstowi zajmować dostępną przestrzeń, spychając przycisk na dół */ } /* Styl dla przycisków w kafelkach kategorii - używamy klasy create-button */ #categories .category-item .create-button { margin-top: auto; /* Przycisk zawsze na dole kafelka */ width: 100%; /* Przycisk na całą szerokość kafelka */ box-sizing: border-box; /* Padding wliczony w szerokość */ } /* Sekcja ranking kont bieżących (zmieniono ID z #oferta) */ #ranking-kont-biezacych { padding: 40px 0; /* Spójny padding góra/dół */ background-color: #fff; /* Białe tło */ } /* Kontener w sekcji ranking */ #ranking-kont-biezacych .container { /* Używa stylów .container zdefiniowanych wcześniej */ } /* Artykuły w rankingu (istniejące) */ /* Style article, .article-header, .LogoPekao, .full-name, .description - pozostają takie same */ article { margin-bottom: 20px; border: 1px solid #ddd; border-radius: 8px; padding: 20px; transition: box-shadow 0.3s ease-in-out; background-color: #fff; } .article-header { /* Używa istniejących stylów article-header (flex, align-items, margin-bottom) */ /* Ewentualnie lekko zmniejsz margin-bottom */ margin-bottom: 10px; } .article-header h3 { /* Używa istniejących stylów h3 */ font-size: 1.4em; /* Może lekko większa czcionka niż w JakToDziala */ margin-bottom: 3px; /* Mniejszy odstęp pod nazwą banku */ } .article-header .full-name { /* Używa istniejących stylów p */ font-size: 1em; /* Standardowy rozmiar */ color: #555; /* Lekko jaśniejszy kolor */ margin-bottom: 0; /* Usuń margines, jeśli bonus jest od razu poniżej */ } /* STYL DLA WIZUALNEGO WYRÓŻNIENIA BONUSU */ .bonus-highlight { font-size: 1.6em; /* Duża, przyciągająca czcionka */ font-weight: bold; /* Pogrubienie */ color: #d4960e; /* Kolor akcentujący (złoty/pomarańczowy z logo) */ margin: 15px 0; /* Odstęp góra/dół */ text-align: center; /* Wyśrodkuj tekst bonusa */ /* Można dodać lekki background-color lub border */ /* background-color: #fff3e0; */ /* padding: 10px 0; */ } /* STYL DLA ZWIĘZŁEGO OPISU BONUSA */ .short-description { font-size: 1em; /* Standardowy rozmiar */ color: #333; /* Standardowy kolor */ margin: 10px 0 20px 0; /* Odstęp góra/dół */ text-align: center; /* Wyśrodkuj tekst */ line-height: 1.4; } /* STYL DLA LISTY NAJWAŻNIEJSZYCH CECH */ .key-features { /* Używamy nowej klasy */ list-style: none; /* Usuń domyślne kropki listy */ padding: 0; /* Usuń domyślny padding */ margin: 0 0 20px 0; /* Odstęp pod listą */ } .key-features li { margin-bottom: 8px; /* Odstęp między punktami listy */ font-size: 0.95em; /* Lekko mniejsza czcionka */ color: #444; line-height: 1.4; /* Możesz dodać własne ikony zamiast ✅ za pomocą ::before */ /* list-style-image: url('checkmark-icon.png'); */ /* lub */ position: relative; padding-left: 20px; /* Utwórz miejsce na customowy marker */ } .key-features li::before { content: '✅'; /* Możesz użyć emoji lub innego znaku */ position: absolute; left: 0; color: #28a745; /* Zielony kolor markera */ font-weight: bold; } /* Przycisk CTA - używa istniejącego stylu create-button */ .create-button { /* Używa istniejących stylów create-button */ } /* Responsywność dla artykułów rankingu (w sekcji media query @media (max-width: 768px)) */ @media (max-width: 768px) { .article-header { flex-direction: column; /* Logo nad nazwą banku na mobile */ align-items: center; /* Wyśrodkuj logo i tekst */ margin-bottom: 10px; } .article-header img { margin-right: 0; /* Usuń prawy margines */ margin-bottom: 10px; /* Dodaj margines pod logo */ } .article-header h3, .article-header .full-name { text-align: center; /* Wyśrodkuj tekst banku */ } .bonus-highlight { font-size: 1.4em; /* Mniejsza czcionka bonusa na mobile */ margin: 10px 0; } .short-description { font-size: 0.9em; /* Mniejsza czcionka opisu */ margin: 8px 0 15px 0; } .key-features li { font-size: 0.9em; /* Mniejsza czcionka listy */ margin-bottom: 6px; padding-left: 18px; } .key-features li::before { left: 0; /* Upewnij się, że marker jest na lewo */ font-size: 0.9em; } .create-button { /* Używa stylów create-button na mobile */ } } .disclaimer-note{ font-size: 10px; } article:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); } .article-header { display: flex; align-items: center; margin-bottom: 20px; } .LogoPekao, .LogoVelo, .LogoSantander, .LogoAlior, .LogoMbank, .LogoBnp, .LogoPko { width: 100px; height: auto; margin-right: 10px; border-radius: 7px; } .full-name { font-size: 0.9em; color: #555; } .description { margin-top: 10px; /* line-height: 1.6; */ /* Już zdefiniowane w body */ color: #333; /* Kolor tekstu opisu */ } /* Styl dla listy w opisie (UL poza P) */ .description + ul { /* Wybiera UL, które jest bezpośrednio po elemencie z klasą .description */ margin-top: 10px; margin-bottom: 10px; padding-left: 20px; color: #333; /* Kolor tekstu listy */ } .description + ul li { margin-bottom: 5px; } /* Przycisk (istniejący - używany też w intro i kategoriach) */ .create-button { display: inline-block; padding: 12px 25px; margin-top: 15px; background-color: #d4960e; color: #fff; border: none; border-radius: 25px; cursor: pointer; text-decoration: none; font-size: 1.1em; transition: background-color 0.3s ease, transform 0.3s ease; text-align: center; /* Centruj tekst przycisku */ } .create-button span { display: inline-block; margin-left: 8px; transition: transform 0.3s; } .create-button:hover { background-color: #c28a0d; transform: translateY(-2px); } .create-button:hover span { transform: translateX(5px); } /* Reklama (istniejąca) */ .ads { display: block; max-width: 100%; height: auto; margin: 30px auto; /* Większy margines góra/dół */ text-align: center; } .ads img { max-width: 100%; height: auto; display: block; } /* Stopka (istniejąca) */ footer { background-color: #d4960e; color: #fff; text-align: center; padding: 20px 0; margin-top: 40px; /* Większy margines górny */ width: 100%; box-sizing: border-box; } /* Sekcja/div kontakt w stopce */ .footer-contact-info { margin: 0 auto 15px auto; padding: 5px 20px; max-width: 1000px; /* border-bottom: 2px solid #000000; */ /* Usunięto obramowanie */ /* display: inline-block; */ /* Usunięto, bo tekst afiliacji jest teraz osobnym P */ } /* Tekst o afiliacji w stopce */ footer .ostatni { color: #000000; margin-bottom: 15px; padding: 0 15px; /* Dodano padding, żeby tekst nie dotykał krawędzi na mobile */ } /* Linki w stopce */ .stopa { color: #000000; text-decoration: none; font-weight: bold; font-size: 1em; margin: 0 10px; transition: color 0.3s ease; } .stopa:hover { color: #ffffff; } /* Przycisk do powrotu na górę strony (istniejący) */ #scroll-to-top { position: fixed; bottom: 20px; right: 20px; background-color: #d4960e; color: #fff; border: 1px solid #ddd; /* Zmieniono kolor obramowania */ padding: 10px 15px; border-radius: 5px; cursor: pointer; display: none; z-index: 1000; transition: background-color 0.3s ease, transform 0.3s ease; /* Dodano transform */ font-size: 0.9em; box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Dodano cień */ } #scroll-to-top:hover { background-color: #c28a0d; transform: translateY(-2px); /* Lekkie przesunięcie w górę */ } /* --- Nowe style dla formularza kontaktowego --- */ #contact-info { /* Możesz dodać tutaj specyficzne style dla sekcji kontaktowej, np. tło */ /* background-color: #f8f8f8; */ /* padding jest już zdefiniowany w globalnym section */ } #contact-info .email-link { margin-bottom: 30px; /* Odstęp pod linkiem email przed formularzem */ text-align: center; font-size: 1.1em; } #contact-form { max-width: 600px; /* Ogranicz szerokość formularza dla lepszej czytelności */ margin: 20px auto; /* Wyśrodkuj formularz i dodaj odstęp */ padding: 20px; border: 1px solid #ddd; /* Lekka ramka */ border-radius: 8px; background-color: #fff; /* Białe tło formularza */ box-shadow: 0 0 15px rgba(0,0,0,0.05); /* Delikatny cień */ } .form-group { margin-bottom: 15px; /* Odstęp między grupami pól */ } .form-group label { display: block; /* Etykieta nad polem */ margin-bottom: 5px; /* Odstęp pod etykietą */ font-weight: bold; color: #555; /* Kolor etykiety */ } .form-group input[type="text"], .form-group input[type="email"], .form-group textarea { width: 100%; /* Pola na całą szerokość kontenera form-group */ padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; /* Padding wliczony w szerokość */ font-size: 1em; font-family: 'Open Sans', sans-serif; /* Użyj czcionki strony */ color: #333; } .form-group input[type="text"]:focus, .form-group input[type="email"]:focus, .form-group textarea:focus { border-color: #d4960e; /* Kolor ramki przy aktywnym polu */ outline: none; /* Usuń domyślny outline */ box-shadow: 0 0 5px rgba(212, 150, 14, 0.5); /* Lekki cień przy aktywnym polu */ } #contact-form textarea { resize: vertical; /* Pozwól tylko na pionową zmianę rozmiaru */ } #contact-form .create-button { /* Używa istniejącego stylu create-button, ale możesz go tutaj nadpisać jeśli chcesz */ width: auto; /* Domyślnie create-button może mieć width: 100%; w kategoriach */ display: block; /* Przycisk jako blok, zajmujący swoją szerokość */ margin: 20px auto 0 auto; /* Wyśrodkuj przycisk pod formularzem */ } .napis-form { text-align: center; } /* --- Nowe style dla sekcji "Jak to działa" Q&A --- */ #jak-to-dziala .container { /* Używa ogólnych stylów .container */ } #jak-to-dziala h2 { /* Używa ogólnych stylów h2 sekcji */ } .qa-item { margin-bottom: 30px; /* Odstęp między poszczególnymi pytaniami/odpowiedziami */ padding: 20px; border: 1px solid #eee; /* Delikatna ramka */ border-radius: 8px; background-color: #fff; /* Białe tło dla każdego bloku Q&A */ box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Lekki cień */ } .qa-header { display: flex; /* Użyj flexbox do ułożenia ikony i nagłówka obok siebie */ align-items: center; /* Wyrównaj ikonę i tekst h3 do środka w pionie */ margin-bottom: 15px; /* Odstęp między nagłówkiem/ikoną a treścią odpowiedzi */ } .qa-icon { width: 40px; /* Rozmiar ikon (dostosuj w zależności od wielkości obrazków) */ height: 40px; /* Upewnij się, że są kwadratowe lub dostosuj */ margin-right: 15px; /* Odstęp między ikoną a tekstem nagłówka */ flex-shrink: 0; /* Zapobiega zmniejszaniu się ikony */ border-radius: 8px; } .qa-header h3 { margin: 0; /* Usuń domyślne marginesy h3, bo odstęp kontroluje .qa-header */ color: #000000; /* Kolor nagłówka pytania */ font-size: 1.3em; /* Rozmiar tekstu pytania */ line-height: 1.3; /* Lepsza czytelność nagłówka */ } .qa-content p { margin-top: 0; /* Usuń górny margines pierwszego paragrafu jeśli .qa-content */ margin-bottom: 10px; /* Odstęp między paragrafami odpowiedzi */ color: #333; /* Kolor tekstu odpowiedzi */ /* Line-height jest już zdefiniowany w body */ } /* Ostatni paragraf w qa-content może nie potrzebować dolnego marginesu */ .qa-content p:last-child { margin-bottom: 0; } /* Styl dla przycisku CTA na końcu sekcji Q&A */ .qa-cta { margin-top: 40px; /* Odstęp nad przyciskiem CTA */ text-align: center; /* Wyśrodkuj tekst i przycisk */ } .qa-cta p { font-size: 1.2em; margin-bottom: 20px; color: #555; } .qa-cta .create-button { /* Używa istniejącego stylu create-button */ } /* Responsywność dla sekcji Q&A */ @media (max-width: 768px) { .qa-item { padding: 15px; /* Mniejszy padding na mobile */ margin-bottom: 20px; /* Mniejszy odstęp między itemami */ } .qa-header { flex-direction: row; /* Nadal w rzędzie ikonka i tekst */ align-items: flex-start; /* Wyrównaj do góry, jeśli tekst się łamie */ margin-bottom: 10px; /* Mniejszy odstęp */ } .qa-icon { width: 30px; /* Mniejsze ikony na mobile */ height: 30px; margin-right: 10px; } .qa-header h3 { font-size: 1.1em; /* Mniejszy rozmiar nagłówka */ } .qa-content p { font-size: 0.95em; /* Mniejszy rozmiar tekstu */ } .qa-cta { margin-top: 30px; /* Mniejszy odstęp */ } .qa-cta p { font-size: 1em; margin-bottom: 15px; } .qa-cta .create-button { padding: 10px 20px; /* Dostosuj padding przycisku */ font-size: 1em; } } /* Responsywność formularza dla małych ekranów */ @media (max-width: 600px) { #contact-form { padding: 15px; /* Mniejszy padding na węższych ekranach */ } .form-group input[type="text"], .form-group input[type="email"], .form-group textarea { padding: 8px; /* Mniejszy padding w polach */ font-size: 0.9em; } #contact-form .create-button { /* Na bardzo małych ekranach można przycisk ustawić na 100% */ /* width: 100%; */ /* margin: 20px 0 0 0; */ padding: 10px 15px; /* Dostosuj padding przycisku */ } } /* Responsywność */ @media (max-width: 768px) { /* Zmieniono breakpoint */ /* Globalne padding body - usunięto */ body { padding: 0; margin: 0; overflow-x: hidden; } /* Nagłówek na mobile */ header { padding: 10px 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; /* Padding-top do main-content obsłuży odsunięcie treści */ } header .container { flex-direction: column; padding: 0 10px; } header .logo { margin-bottom: 5px; /* Mniejszy odstęp */ } header .logo-img { max-width: 100px; /* Zmniejszone logo w nagłówku na mobile */ } nav ul { flex-direction: column; align-items: center; width: 100%; } nav ul li { margin: 3px 0; } nav ul li a { font-size: 0.9em; } /* Stylowanie głównej zawartości na mobile */ #main-content { padding-top: 70px; /* Dostosuj do wysokości fixed header na mobile */ } /* NOWE style dla Intro Screen na mobile */ #intro-screen { padding: 15px; } #intro-screen .intro-logo { max-width: 200px; margin-bottom: 20px; } #intro-screen h1 { font-size: 1.8em; } #intro-screen p { font-size: 1em; max-width: 100%; } #intro-screen .create-button { max-width: 300px; /* Ogranicz szerokość przycisku w intro */ margin-left: auto; /* Wyśrodkuj przycisk */ margin-right: auto; } /* NOWE style dla Dlaczego My na mobile */ #why-us { padding: 30px 0; /* Mniejszy padding */ } #why-us .benefits-container { flex-direction: column; /* Elementy w kolumnie */ gap: 15px; /* Mniejszy odstęp */ } #why-us .benefit-item { min-width: auto; /* Usuń minimalną szerokość */ max-width: 100%; padding: 15px; } #why-us .benefit-icon { width: 100px; height: auto; margin-bottom: 10px; } #why-us .benefit-item h3 { font-size: 1.1em; } #why-us .benefit-item p { font-size: 0.9em; } /* NOWE style dla Kategorii na mobile */ #categories { padding: 30px 0; /* Mniejszy padding */ } #categories .category-container { display: flex; /* MUSI być! */ flex-direction: column; justify-content: center; align-items: center; /* Wyśrodkowanie w poziomie */ gap: 15px; } #categories .category-item { width: 100%; max-width: 350px; padding: 0px; /* Użyj display: flex / flex-direction: column już jest ustawione */ } #categories .category-icon { width: 22%; height: auto; margin: 0 auto 10px auto; padding-top: 10px; border-radius: 7px; } #categories .category-item h3 { font-size: 1.1em; } #categories .category-item p { font-size: 0.9em; margin-bottom: 15px; } #categories .category-item .create-button { margin: 20px auto 0 auto; width: 55%; /* Kluczowa zmiana */ align-self: center; /* Wyśrodkowanie w flexboxie */ box-sizing: border-box; display: block; margin-bottom: 20px; } /* Sekcja ranking kont na mobile */ #ranking-kont-biezacych { padding: 30px 0; /* Mniejszy padding */ background: #f9f9f9; } #ranking-kont-biezacych .container { padding: 0 10px; margin-top: auto; width: auto; /* Kluczowa zmiana */ align-self: center; /* Wyśrodkowanie w flexboxie */ box-sizing: border-box; } h2 { /* Nagłówki sekcji na mobile */ font-size: 1.5em; margin-bottom: 20px; } /* Artykuły na mobile */ article { padding: 15px; } .article-header { flex-direction: column; align-items: center; text-align: center; margin-bottom: 15px; } .LogoPekao, .LogoVelo, .LogoSantander, .LogoAlior, .LogoMbank, .LogoBnp { width: 90px; margin: 0 0 10px 0; border-radius: 7px; } .full-name { font-size: 0.8em; } .description { font-size: 0.9em; } .description + ul { padding-left: 15px; font-size: 0.9em; } /* Przycisk na mobile (w artykułach) */ /* Styl .create-button jest już globalny i dostosowany, ale możesz dodać specyficzny dla artykułów jeśli chcesz */ /* article .create-button { ... } */ /* Stopka na mobile */ footer { padding: 15px 10px; margin-top: 30px; } .footer-contact-info { padding: 5px 10px; } .stopa { margin: 0 5px; font-size: 0.9em; } /* Przycisk do powrotu na górę na mobile */ #scroll-to-top { bottom: 15px; /* Lekko wyżej */ right: 15px; /* Lekko dalej od krawędzi */ padding: 10px 15px; font-size: 0.9em; } /* Reklama na mobile */ .ads { margin: 20px auto; } } /* Ewentualnie dalsze media queries dla bardzo małych ekranów < 480px */ @media (max-width: 480px) { /* Zmniejsz nagłówki H1, H2 */ h1 { font-size: 1.8em; } #intro-screen h1 { font-size: 1.6em; } h2 { font-size: 1.3em; } /* Zmniejsz rozmiary logo i ikon */ header .logo-img { max-width: 80px; } #intro-screen .intro-logo { max-width: 180px; } #why-us .benefit-icon { width: 30%; height: 30%; } /* Mniejsze paddingi w sekcjach */ section { padding: 20px 0; } #why-us, #categories, #ranking-kont-biezacych { padding: 20px 0; } /* Mniejsze paddingi w kontenerach */ .container { padding: 0 10px; } /* Mniejsze odstępy w elementach */ .benefits-container, .category-container { gap: 10px; } article { padding: 10px; } /* Przycisk "Wchodzę" w intro */ #intro-screen .create-button { font-size: 1em; } /* Przyciski w kafelkach kategorii */ #categories .category-item .create-button { font-size: 0.9em; padding: 8px 0; } /* Przyciski w artykułach */ article .create-button { font-size: 0.9em; padding: 10px 15px; max-width: none; /* Usuń max-width jeśli był ustawiony na 100% dla mobile */ width: auto; /* Przywróć auto szerokość */ margin-left: auto; /* Wyśrodkuj przycisk */ margin-right: auto; } /* Stopka */ footer { padding: 10px 0; } .stopa { margin: 0 5px; font-size: 0.8em; } /* Przycisk do góry */ #scroll-to-top { bottom: 10px; right: 10px; padding: 6px 10px; font-size: 0.7em; } @media (max-width: 768px) { /* Na mobile kształty mogą być mniejsze */ .shape-square { width: 50px; height: 50px; } .shape-circle { width: 60px; height: 60px; } /* Możesz też dostosować animację dla mobile, np. krótsze czasy lub mniejszy zakres ruchu */ @keyframes float-and-color-change { /* Zmodyfikuj istniejącą animację lub dodaj nową */ 0% { transform: translate(0, 0) rotate(0deg); opacity: 0.3; } 50% { transform: translate(50px, 80px) rotate(180deg); opacity: 0.5; } 100% { transform: translate(100px, 0) rotate(360deg); opacity: 0.3; } } @keyframes float-and-color-change-reverse { /* Zmodyfikuj */ 0% { transform: translate(0, 0) rotate(0deg); opacity: 0.3; } 50% { transform: translate(-50px, -80px) rotate(-180deg); opacity: 0.5; } 100% { transform: translate(-100px, 0) rotate(-360deg); opacity: 0.3; } } @keyframes float-and-color-change-alt { /* Zmodyfikuj */ 0% { transform: translate(0, 0) rotate(0deg); opacity: 0.4; } 40% { transform: translate(30px, 100px) rotate(100deg); } 80% { transform: translate(80px, 30px) rotate(250deg); } 100% { transform: translate(0, 0) rotate(360deg); opacity: 0.4; } } /* Dostosuj pozycje startowe kształtów na mobile */ .shape-1 { top: 5%; left: 5%; } .shape-2 { bottom: 10%; right: 5%; } .shape-3 { top: 15%; right: 10%; } .shape-4 { bottom: 5%; left: 10%; } } /* Ewentualnie dalsze media queries dla bardzo małych ekranów < 480px */ @media (max-width: 480px) { /* Kształty jeszcze mniejsze */ .shape-square { width: 40px; height: 40px; } .shape-circle { width: 45px; height: 45px; } } } /* --- Style dla Menu Mobilnego (Hamburger) --- */ /* Styl dla ikony hamburgera */ .hamburger-icon { display: none; /* Domyślnie ukryty na desktopie */ background: none; border: none; cursor: pointer; padding: 10px; z-index: 1001; /* Upewnij się, że jest nad nagłówkiem */ /* Wyrównanie ikony - zostanie ustawione w media query */ } .hamburger-line { display: block; width: 25px; height: 3px; background-color: #000000; /* Kolor kresek hamburgera */ margin: 4px 0; /* Odstęp między kreskami */ transition: all 0.3s ease-in-out; } /* Stan "aktywny" ikony (gdy menu jest otwarte) */ .hamburger-icon.is-active .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger-icon.is-active .hamburger-line:nth-child(2) { opacity: 0; /* Ukryj środkową kreskę */ } .hamburger-icon.is-active .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Domyślne style dla menu (desktop) - są już w Twoim CSS */ nav ul.menu { list-style: none; padding: 0; margin: 0; display: flex; /* Flexbox dla elementów menu na desktop */ /* ... inne style desktopowe ... */ } /* Ukryj standardowe menu i pokaż ikonę hamburgera na mobile */ @media (max-width: 768px) { /* Pokaż ikonę hamburgera */ header .container { /* Upewnij się, że kontener nagłówka jest flex i wyrównuje elementy */ display: flex; justify-content: space-between; align-items: center; /* Wyrównanie w pionie ikony i logo */ /* ... inne style kontenera nagłówka na mobile ... */ } .hamburger-icon { display: block; /* Pokaż ikonę na mobile */ margin-left: 15px; /* Odstęp od prawej krawędzi (lub logo/innych elementów) */ } /* Ukryj menu linków (NAV) */ header nav { display: none; /* Ukryj całe menu na mobile domyślnie */ /* Style menu w stanie rozwiniętym (nakładka) */ position: absolute; /* Pozycja absolutna względem body lub viewport */ top: 60px; /* Umieść poniżej nagłówka (dostosuj do faktycznej wysokości nagłówka!) */ left: 0; width: 100%; background-color: #ffffff; /* Tło menu mobilnego */ box-shadow: 0 10px 10px rgba(0,0,0,0.1); /* Cieñ pod menu */ z-index: 999; /* Poniżej hamburgera, ale nad treścią */ overflow-y: auto; /* Jeśli menu będzie bardzo długie */ padding: 10px 0; /* Padding wewnątrz menu */ /* Animacja/przejście (opcjonalnie) */ /* transform: translateY(-100%); */ /* Np. wysuwanie z góry */ /* transition: transform 0.3s ease-in-out; */ } /* Styl listy linków (UL) w menu mobilnym */ nav ul.menu { flex-direction: column; /* Elementy listy pod sobą */ align-items: center; /* Wyśrodkuj linki na środku menu */ padding: 0; margin: 0; } nav ul.menu li { margin: 10px 0; /* Większy odstęp między linkami w pionie */ width: 100%; /* Linki na całą szerokość menu */ text-align: center; /* Wyśrodkuj tekst linku */ } nav ul.menu li a { font-size: 1.2em; /* Większa czcionka linków mobilnych */ padding: 10px; /* Większy obszar kliknięcia */ display: block; /* Sprawia, że cały obszar li jest klikalny */ /* Kolor i inne style z głównych reguł dla a */ } /* Stan "aktywny" menu (gdy menu jest otwarte - klasa .is-active dodana do body lub containera) */ /* Możemy dodać klasę .menu-open np. do body lub header */ header.menu-open nav { display: block; /* Pokaż menu */ /* transform: translateY(0); */ /* Wróć do pozycji widocznej */ } /* Opcjonalnie: ukryj przewijanie strony gdy menu jest otwarte */ /* body.menu-open { overflow: hidden; } */ } /* --- Koniec stylów dla Menu Mobilnego --- */ /* RESPONSYWNOŚĆ - Urządzenia mobilne */ @media screen and (max-width: 768px) { .container { padding: 0 15px; flex-direction: column; align-items: center; padding-top: 80px; } .logo-img { width: 150px; height: auto; } .menu { flex-direction: column; text-align: center; } .menu li { margin-bottom: 10px; } h1, h2, h3 { font-size: 1.4em; text-align: center; } .create-button { font-size: 1em; padding: 10px 20px; width: 90%; max-width: 300px; } .article-header { flex-direction: column; align-items: center; } .key-features li { font-size: 0.95em; } } /* OGÓLNE CTA */ .create-button { background-color: #d4960e; color: white; font-weight: bold; padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease; } .create-button:hover { background-color: #d4960e; } #hero { padding: 60px 20px; text-align: center; } .hero-wrapper { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 40px; max-width: 1200px; margin: 0 auto; } .hero-left { flex: 1 1 400px; max-width: 600px; } .hero-left h1 { font-size: 28px; margin-bottom: 10px; font-weight: 700; } .hero-left .brand { color: #000; } .hero-left h1 .brand + span { color: #d4a431; } .hero-left h2 { font-size: 36px; color: #d4a431; margin: 10px 0; font-weight: 700; } .hero-left h3 { font-size: 24px; margin-bottom: 20px; font-weight: 700; } .hero-left p { font-size: 18px; margin-bottom: 30px; line-height: 1.6; } .hero-buttons { display: flex; flex-direction: column; gap: 15px; } .hero-buttons .btn { padding: 15px 30px; font-size: 18px; text-decoration: none; border-radius: 8px; font-weight: 600; transition: all 0.3s ease; } .hero-buttons .btn-primary { background-color: #d4a431; color: #fff; } .hero-buttons .btn-primary:hover { background-color: #b79329; } .hero-buttons .btn-secondary { background-color: #000; color: #fff; } .hero-buttons .btn-secondary:hover { background-color: #333; } .hero-right img { max-width: 180px; border-radius: 12px; } .hero-actions { display: flex; align-items: center; gap: 30px; /* Odstęp między przyciskami a obrazkiem */ flex-wrap: wrap; /* Dla mobile */ justify-content: center; } .hero-image img { max-width: 150px; border-radius: 12px; border: 4px solid #dab032; } @media (max-width: 768px) { .hero-actions { flex-direction: column; align-items: center; } } .ranking-item { background: #fff; border-radius: 12px; padding: 30px; box-shadow: 0 0 20px rgba(0,0,0,0.05); margin-bottom: 40px; position: relative; } .item-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .rating-stars { font-size: 1.2em; color: #d4a431; margin-top: 5px; } .cta-button { background: #d4a431; color: #fff; border: none; padding: 15px 40px; border-radius: 50px; font-size: 1.1em; cursor: pointer; font-weight: bold; transition: background 0.3s; display: inline-block; } .cta-button:hover { background: #b79329; } @media (max-width: 768px) { .cta-button { display: block; /* blokowy, zajmie 100% width kontenera */ margin: 20px auto; /* wyśrodkowany */ width: 90%; /* ładny rozmiar na mobile */ max-width: 300px; /* nie za duży */ position: static; /* nie sticky */ transform: none; /* nie potrzebny */ text-align: center; } } /* ✅ NOWA STOPKA */ .site-footer { background: #111; color: #ddd; padding: 50px 20px 20px; } .footer-container { max-width: 1200px; margin: auto; display: flex; flex-wrap: wrap; gap: 40px; } .footer-col { flex: 1 1 200px; } .footer-logo { width: 150px; margin-bottom: 20px; } .footer-col h4 { color: #fff; margin-bottom: 15px; } .footer-col ul { list-style: none; padding: 0; } .footer-col ul li { margin-bottom: 10px; } .footer-col ul li a { color: #ddd; text-decoration: none; transition: color 0.3s; } .footer-col ul li a:hover { color: #fff; } .social-icons a { margin-right: 10px; } .social-icons img { width: 30px; height: 30px; } .footer-bottom { text-align: center; margin-top: 30px; color: #888; font-size: 0.9em; } .odstep { padding-left: 20px; } /* Poprawione CTA na mobile */ @media (max-width: 768px) { .create-button, .cta-button { width: auto; max-width: 300px; display: block; margin: 20px auto; font-size: 1.2em; } }