/* * mobile-fixes.css * Poprawki responsywności dla strony głównej * Dołącz ten plik po style.css w */ /* ========================================= 1. HEADER – hamburger na sticky/normalnym ========================================= */ /* Zapewnij że przycisk hamburgera jest widoczny na mobile */ @media only screen and (max-width: 991px) { .hamburger_button { line-height: 1; height: 24px; width: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; position: relative; cursor: pointer; padding: 0; border: none; background: transparent; } .hamburger_button span { width: 28px; height: 2px; background: #fff; display: block; position: relative; transform: none; top: auto; left: auto; transition: 0.3s; border-radius: 2px; } .sticky-header.sticky .hamburger_button span { background: #322fb3; } /* Logo mobilny rozmiar */ .header-one .logo img { max-height: 40px; width: auto; } /* Guzik POBIERZ WNIOSEK ukryj na mobile – widoczny tylko na dużych ekranach */ .header-right_button.header-button { display: none; } /* Padding headerów mobilnych */ .header-wrapper .flex-center.justify-content-between { padding: 14px 0; } } /* ========================================= 2. SLIDER – poprawki na mobile ========================================= */ @media only screen and (max-width: 575px) { .sliderone-slingle { height: auto !important; min-height: 600px; padding-bottom: 40px; } .sliderone-content { flex-direction: column; align-items: flex-start; padding-top: 80px; } .sliderone-content .slider-content { width: 100% !important; padding: 0 10px; } .sliderone-content .slider-content .title { font-size: 28px !important; line-height: 1.3; color: #fff; } .sliderone-content .slider-content strong { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.9); display: block; margin-top: 12px; } /* Ukryj obraz slidera na bardzo małych ekranach – tekst ma pierwszeństwo */ .sliderone-content .slider-image { display: none; } } @media only screen and (max-width: 479px) { .sliderone-slingle { min-height: 520px; } .sliderone-content .slider-content .title { font-size: 24px !important; } } /* ========================================= 3. OŚ CZASU (TIMELINE CIRCLES) – główna sekcja ========================================= */ /* Problem: event-description jest absolutna – na mobile wychodzi poza ekran */ @media only screen and (max-width: 991px) { .timeline-circles-wrapper { min-height: auto; margin-bottom: 40px; } .circles-track { display: flex; flex-direction: column; align-items: center; gap: 80px; } .circle-event { margin: 0 !important; position: relative; padding-top: 140px; /* miejsce na opis nad kółkiem */ padding-bottom: 0; } /* Opis – statyczny, nie absolutny */ .event-description { position: static !important; transform: none !important; width: 100% !important; max-width: 320px; margin: 20px auto 0; text-align: center; bottom: auto !important; top: auto !important; } /* Opis nad kółkiem – przenosimy nad */ .circle-event:nth-child(odd) .event-description, .circle-event:nth-child(even) .event-description { position: absolute !important; top: 0 !important; bottom: auto !important; left: 50% !important; transform: translateX(-50%) !important; width: 280px !important; } /* Linia łącząca */ .event-connector { position: static !important; transform: none !important; display: block; width: 3px; height: 40px; margin: 0 auto; background: currentColor; } .circle-event:nth-child(odd) .event-connector, .circle-event:nth-child(even) .event-connector { bottom: auto !important; top: auto !important; } .connector-dot { display: none; } .timeline-header { margin-bottom: 60px; } .timeline-header h1 { font-size: 28px !important; line-height: 1.3; } .timeline-circles-container { padding: 0 15px !important; } } @media only screen and (max-width: 575px) { .event-circle { width: 180px !important; height: 180px !important; } .circle-inner { width: 130px !important; height: 130px !important; } .circle-date { font-size: 28px !important; } .circle-event { padding-top: 130px; } .circle-event:nth-child(odd) .event-description, .circle-event:nth-child(even) .event-description { width: 240px !important; } } /* ========================================= 4. SEKCJA O PROGRAMIE – infografika ========================================= */ /* Problem: info-stream używa position: absolute – układa się źle na mobile */ @media only screen and (max-width: 991px) { .about-content-wrapper { grid-template-columns: 1fr !important; gap: 40px !important; } .about-infographic { position: relative; min-height: 380px; } .info-stream:nth-child(1) { top: 0; } .info-stream:nth-child(2) { top: 95px; } .info-stream:nth-child(3) { top: 190px; } .info-stream:nth-child(4) { top: 285px; } } @media only screen and (max-width: 575px) { .about-program-section { padding: 30px 15px !important; border-radius: 15px; margin-top: 40px !important; margin-bottom: 40px !important; } .about-title { font-size: 26px !important; } .about-infographic { min-height: 360px; } .stream-content { min-width: 200px !important; padding: 12px 16px !important; } .stream-text { font-size: 12px !important; } .stream-icon { width: 56px !important; height: 56px !important; margin-left: -28px !important; } .stream-icon i { font-size: 22px !important; } .info-stream:nth-child(1) { top: 0; } .info-stream:nth-child(2) { top: 85px; } .info-stream:nth-child(3) { top: 170px; } .info-stream:nth-child(4) { top: 255px; } } /* ========================================= 5. MODUŁY PROGRAMU – diagram ========================================= */ @media only screen and (max-width: 991px) { .modules-section { padding: 50px 20px !important; margin-top: 60px !important; margin-bottom: 60px !important; border-radius: 20px; } .modules-header { margin-bottom: 60px; } .modules-title { font-size: 28px !important; } .modules-intro { font-size: 15px !important; } .modules-diagram { display: grid !important; grid-template-columns: 1fr !important; gap: 30px !important; min-height: auto !important; } .module-branch { position: relative !important; transform: none !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; } .central-circle { position: relative !important; margin: 0 auto !important; order: -1; } .module-arrow { width: 100% !important; max-width: 100% !important; padding: 25px 20px !important; } .module-name { font-size: 18px !important; } } /* ========================================= 6. DLA KOGO – grid beneficjentów ========================================= */ @media only screen and (max-width: 991px) { .beneficiaries-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } .for-whom-section { margin-top: 60px !important; margin-bottom: 60px !important; } .for-whom-title { font-size: 30px !important; } .box-title { min-height: auto !important; font-size: 17px !important; } .box-description { min-height: auto !important; } } @media only screen and (max-width: 575px) { .beneficiaries-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .beneficiary-box { padding: 30px 20px !important; } .box-icon { width: 80px !important; height: 80px !important; } .box-icon i { font-size: 36px !important; } .for-whom-title { font-size: 26px !important; } } /* ========================================= 7. SEKCJA DOFINANSOWANIA ========================================= */ @media only screen and (max-width: 575px) { .funding-section { padding: 30px 15px !important; border-radius: 10px; margin-bottom: 40px; } .funding-intro { padding: 20px 15px !important; } .funding-intro h3 { font-size: 16px !important; line-height: 1.5; } } /* ========================================= 8. KONSULTANCI – grid ========================================= */ @media only screen and (max-width: 575px) { .consultants-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .consultant-section { padding: 30px 15px !important; border-radius: 10px; margin-top: 40px; } .consultant-title { font-size: 20px !important; letter-spacing: 1px; } .consultant-subtitle { font-size: 15px !important; } .contact-item { font-size: 14px !important; } } /* ========================================= 9. SEKCJA CZYTAJ WIĘCEJ (READ MORE CARDS) ========================================= */ @media only screen and (max-width: 767px) { .read-more-cards { flex-direction: column !important; gap: 24px !important; align-items: center; } .read-card { max-width: 100% !important; width: 100%; padding: 35px 20px !important; } .card-connector { transform: rotate(90deg); margin: 0 !important; } .read-more-title { font-size: 28px !important; } } /* ========================================= 10. FOOTER ========================================= */ @media only screen and (max-width: 767px) { .footer-bottom { flex-wrap: wrap; gap: 30px; } .footer-copyright-inner { flex-direction: column; text-align: center; gap: 10px; } } /* ========================================= 11. GLOBALNE POPRAWKI MOBILE ========================================= */ /* Zapobiegaj poziomemu scrollowaniu */ @media only screen and (max-width: 767px) { body { overflow-x: hidden; } .container, .container-fluid { padding-left: 15px; padding-right: 15px; } /* Sekcje z dużymi marginesami – zmniejsz na mobile */ .timeline-circles-section, .about-program-section, .modules-section, .for-whom-section { overflow-x: hidden; } /* Nagłówki sekcji */ .timeline-header h1 { font-size: 28px !important; } .timeline-header p { font-size: 15px !important; } /* Przyciski – pełna szerokość na mobile */ .btn-style-one, .btn-style-two, .btn-style-three { font-size: 13px; } /* min-height fix dla kart z fixed heights */ .card-title { min-height: auto !important; } .card-description { min-height: auto !important; } } /* Extra small – 375px i mniej */ @media only screen and (max-width: 375px) { .consultant-title { font-size: 18px !important; } .sliderone-content .slider-content .title { font-size: 22px !important; } .about-title, .modules-title, .for-whom-title, .read-more-title, .timeline-info-title { font-size: 22px !important; } }