/* ============================================ by.mairon — RESPONSIVE LAYER Pojedyncze źródło prawdy dla zachowania na różnych urządzeniach: laptopy, tablety, telefony (iOS/Android), landscape/portrait, urządzenia dotykowe i z notchem. Ten plik ŁADUJE SIĘ JAKO OSTATNI w , więc każda reguła tutaj nadpisuje base'y z main.css/faq.css/offer.css. Breakpointy: ≤1280px — duże tablety / małe laptopy ≤1024px — iPad landscape, mniejsze laptopy ≤ 900px — iPad portrait, duże telefony landscape ≤ 768px — tablet mini, telefony landscape ≤ 600px — telefony (większość Androida i iPhone) ≤ 420px — małe telefony (iPhone SE/12 mini, kompaktowe Androidy) ≤ 360px — bardzo małe telefony (stare urządzenia) ============================================ */ /* ── No-JS fallback ── */ /* Bez JS sekcje z .reveal startują z opacity:0 (GSAP miał je animować). Gdy JS jest wyłączony lub jeszcze się nie załadował, pokazujemy treść. Klasę .no-js zdejmujemy inline scriptem w . */ .no-js .reveal, .no-js .hero-badge, .no-js .hero-title, .no-js .hero-sub, .no-js .hero-actions, .no-js .hero-scroll-hint, .no-js .hero-floaters { opacity: 1 !important; transform: none !important; } /* ── Globalne ustawienia mobile-friendly ── */ /* Zapobiegamy poziomemu scrollowi / rozszerzaniu layout viewportu. Bez tego mobilne przeglądarki potrafią rozszerzyć innerWidth do sumarycznej szerokości fixed-position childów (np. nav-drawer ustawiony off-screen przez translateX(100%)) i wtedy nav, hamburger, floatery itd. lądują poza widocznym obszarem. */ html, body { overflow-x: hidden; max-width: 100%; } html { width: 100%; } /* Bezpieczne marginesy dla iPhone z notchem (env(safe-area-*)) */ @supports (padding: env(safe-area-inset-top)) { body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } #nav { padding-top: max(18px, env(safe-area-inset-top)); } footer { padding-bottom: max(20px, env(safe-area-inset-bottom)); } #nav-drawer { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } } /* Off-screen nav drawer: zamiast `transform: translateX(100%)` (które pcha element poza prawy edge viewportu i rozdyma layout viewport na mobile), trzymamy go w obrębie viewportu i ukrywamy przez visibility/opacity. Otwarcie nadal wjeżdża z prawej. */ #nav-drawer { transform: translateX(100%); visibility: hidden; will-change: transform; } #nav-drawer.open { transform: translateX(0); visibility: visible; } /* iOS: input/textarea o font-size <16px wywołuje zoom przy focus. Wymuszamy minimum 16px na inputach żeby tego uniknąć. */ @media (max-width: 768px) { .form-field input, .form-field textarea, .form-field select, .select-wrap select { font-size: 16px; } } /* Urządzenia dotykowe: brak hover, brak custom-cursora, większe tap-targety */ @media (hover: none), (pointer: coarse) { body, body * { cursor: auto !important; } #cursor, #cursor-ring { display: none !important; } /* Wyłącz transformacje przy hover (na touch nie ma sensu) */ .gallery-item:hover img { transform: scale(1.04); filter: brightness(0.82) saturate(0.8); } .gallery-item:hover .gallery-item-overlay { opacity: 1; } .gallery-item .gallery-item-overlay { opacity: 1; background: linear-gradient(to top, rgba(3,9,18,0.78) 0%, transparent 60%); } /* Minimalny rozmiar targetu kliknięcia 44×44 (Apple HIG) */ .nav-cta, .btn-glass, .btn-blue, .btn-send, .filter-pill, .nav-links a, .social-pill, .lb-close, .lb-prev, .lb-next { min-height: 44px; } /* Wyłącz niebieskie tap-highlight (mobile Safari) */ a, button { -webkit-tap-highlight-color: transparent; } } /* Zmniejsz ruch dla osób z preferencją reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .bg-orb, .marquee-track, .hero-bg-img img { animation: none !important; } } /* ════════════════════════════════════════════ ≤ 1280px — duże tablety, małe laptopy ════════════════════════════════════════════ */ @media (max-width: 1280px) { section { padding: 110px 40px; } #nav, #nav.scrolled { padding-left: 40px; padding-right: 40px; } .hero-content { padding: 0 40px; } .hero-scroll-hint { left: 40px; } .hero-floaters { right: 40px; bottom: 56px; } footer { padding: 32px 40px; } #about { gap: 70px; } .contact-grid { gap: 60px; } } /* ════════════════════════════════════════════ ≤ 1024px — iPad landscape, mniejsze laptopy ════════════════════════════════════════════ */ @media (max-width: 1024px) { /* Pojedyncze kolumny w głównych sekcjach (już w main.css, ale dla pewności) */ #about { grid-template-columns: 1fr; gap: 60px; } .contact-grid { grid-template-columns: 1fr; gap: 50px; } /* Hero: zmniejszone tło z 3 kolumn na 2 */ .hero-bg { grid-template-columns: 1.4fr 1fr; } .hero-bg-img:nth-child(3) { display: none; } #hero { min-height: 640px; } /* About image nie powinien zajmować pół ekranu */ .about-img-wrap { max-width: 540px; margin: 0 auto; width: 100%; } .about-img-wrap::before { display: none; } /* Stats — wciąż 3 kolumny, ale niższe paddingi */ .about-stat { padding: 18px 12px; } .about-stat-num { font-size: 30px; } /* Portfolio masonry — większe kolumny */ .gallery-masonry { column-gap: 12px; } .gallery-item { margin-bottom: 12px; } /* Marquee szybsze (większy fragment widoczny) */ .marquee-track { gap: 40px; } } /* ════════════════════════════════════════════ ≤ 900px — iPad portrait, duże telefony landscape Hero + nav redesign dla touch/mobile: • nav zawsze ma backdrop blur (czytelne nad zdjęciem) • hero używa svh/dvh (iOS Safari nie psuje wysokości URL barem) • padding-top hero clears fixed nav • tło pojedyncze, bez ścisku ════════════════════════════════════════════ */ @media (max-width: 900px) { /* Portfolio: 2 kolumny (jest też w main.css, redundancja dla pewności) */ .gallery-masonry { columns: 2; } /* ── NAV: zawsze widoczne tło (nie tylko przy scrollu) ── */ #nav { padding: 14px 24px; background: rgba(3, 9, 18, 0.78); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } #nav.scrolled { padding: 12px 24px; background: rgba(3, 9, 18, 0.9); } .nav-logo { font-size: 19px; } .nav-links, .nav-cta { display: none; } /* Hamburger: jasno widoczna kapsuła w niebieskim akcencie — niemożliwa do przeoczenia */ .nav-hamburger { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0; background: rgba(29, 78, 216, 0.35); border: 1.5px solid rgba(147, 197, 253, 0.55); border-radius: 12px; flex-shrink: 0; box-shadow: 0 2px 12px rgba(29, 78, 216, 0.35); cursor: pointer; } .nav-hamburger:hover, .nav-hamburger:active { background: rgba(29, 78, 216, 0.6); border-color: var(--blue-bright); box-shadow: 0 0 18px var(--blue-glow); } .nav-hamburger span { display: block; width: 22px; height: 2.5px; background: #FFFFFF; border-radius: 2px; transition: transform .3s var(--ease-out), opacity .3s; } /* ── HERO: pełna wysokość viewportu, content nie pod navem ── */ #hero { min-height: 100vh; /* fallback */ min-height: 100svh; /* iOS Safari: bez paska URL */ height: auto; padding: 92px 0 60px; /* 92px clears fixed nav (~58px wysokości + odstęp) */ display: flex; align-items: center; } /* Tło: pojedyncze zdjęcie, full-bleed */ .hero-bg { grid-template-columns: 1fr; gap: 0; } .hero-bg-img:nth-child(2), .hero-bg-img:nth-child(3) { display: none; } .hero-bg-img img { filter: brightness(0.48) saturate(0.85); } /* Floatery i scroll-hint chowamy — overlap z contentem */ .hero-floaters { display: none; } /* Mocniejszy overlay — czytelność tekstu nad zdjęciem */ .hero-overlay { background: linear-gradient(to top, rgba(2,4,8,0.92) 0%, rgba(2,4,8,0.45) 55%, rgba(2,4,8,0.55) 100%), linear-gradient(to right, rgba(2,4,8,0.45) 0%, rgba(2,4,8,0.2) 100%); } /* Content: pełna szerokość, padding boczne, max-width zniesiony */ .hero-content { padding: 0 32px; max-width: 100%; width: 100%; } /* Sekcje */ section { padding: 100px 32px; } footer { padding: 30px 32px; } /* Hero hint / floatery */ .hero-scroll-hint { left: 32px; bottom: 32px; } /* Home sections */ .home-offers, .home-faq { padding-left: 32px; padding-right: 32px; } .offer-header, .offer-body, .offer-gallery, .offer-faq, .offer-related, .offer-final-cta { padding-left: 32px; padding-right: 32px; } /* Mniejsze nagłówki */ .section-heading { font-size: clamp(30px, 5vw, 46px); } /* Filtry — pełna szerokość, scrollable horizontal */ .filter-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; margin-right: -32px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .filter-row::-webkit-scrollbar { display: none; } .filter-pill { flex-shrink: 0; } } /* ════════════════════════════════════════════ ≤ 768px — tablet mini, telefon landscape (TU pojawia się hamburger; istniejące reguły w main.css) ════════════════════════════════════════════ */ @media (max-width: 768px) { /* Hero — typografia mniejsza, hero-floaters ukryte */ .hero-floaters { display: none; } .hero-title { font-size: clamp(40px, 9vw, 64px); margin-bottom: 22px; } .hero-sub { font-size: 14px; margin-bottom: 36px; max-width: 100%; } .hero-badge { margin-bottom: 24px; } .hero-actions { flex-wrap: wrap; gap: 10px; } .btn-glass, .btn-blue { padding: 12px 22px; font-size: 12px; } /* Marquee */ .marquee-track { gap: 30px; animation-duration: 18s; } .marquee-track span { font-size: 13px; } /* About */ .about-stats { gap: 10px; margin-top: 32px; } .about-stat-num { font-size: 28px; } .about-stat-lbl { font-size: 8px; } /* Contact form card */ .contact-form-card { padding: 28px 22px; border-radius: 20px; } .contact-form { gap: 18px; } /* Lightbox */ #lightbox img { max-width: 94vw; max-height: 78vh; } .lb-close { top: 16px; right: 16px; padding: 7px 14px; font-size: 10px; } .lb-prev, .lb-next { width: 40px; height: 40px; } .lb-prev { left: 12px; } .lb-next { right: 12px; } .lb-caption { bottom: 18px; padding: 7px 18px; } .lb-caption p { font-size: 13px; } /* Drawer nav — większe odstępy, mniejsze fonty */ #nav-drawer { gap: 24px; } #nav-drawer a { font-size: 30px; } /* Toast */ #toast { bottom: 22px; font-size: 12px; padding: 10px 22px; max-width: calc(100% - 32px); white-space: normal; text-align: center; } /* Offer subpages */ .offer-h1 { font-size: clamp(28px, 6vw, 42px); } .offer-intro { font-size: 16px; } .offer-cta-row { gap: 10px; } .offer-bullets-card { padding: 22px; } .offer-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .offer-related-grid { grid-template-columns: 1fr; } /* Home offers */ .home-offers-grid { grid-template-columns: 1fr; } .home-offer-card { padding: 22px; } } /* ════════════════════════════════════════════ ≤ 600px — telefony (większość Androida i iPhone portrait) ════════════════════════════════════════════ */ @media (max-width: 600px) { section { padding: 80px 20px; } #nav { padding-left: 20px; padding-right: 20px; } #nav.scrolled { padding-left: 20px; padding-right: 20px; } .hero-content { padding: 0 20px; } .hero-scroll-hint { left: 20px; bottom: 28px; } footer { padding: 28px 20px; flex-direction: column; gap: 12px; text-align: center; } /* Home sections */ .home-offers, .home-faq { padding-left: 20px; padding-right: 20px; padding-top: 70px; } .offer-header, .offer-body, .offer-gallery, .offer-faq, .offer-related, .offer-final-cta { padding-left: 20px; padding-right: 20px; } .offer-header { padding-top: 40px; padding-bottom: 30px; } /* Hero size — zachowujemy 100svh z @900px, tylko redukujemy odstęp na dole */ #hero { padding: 84px 0 48px; } .hero-title { font-size: clamp(34px, 10vw, 52px); line-height: 1.15; } /* Filter row — adjust margin do nowego paddingu */ .filter-row { margin-right: -20px; } /* Portfolio: 1 kolumna (redundancja z main.css 580px) */ .gallery-masonry { columns: 1; column-gap: 0; } .gallery-item { margin-bottom: 12px; } /* Na 1 kolumnie overlay zawsze widoczny, żeby user wiedział co to */ .gallery-item .gallery-item-overlay { opacity: 1; padding: 18px; background: linear-gradient(to top, rgba(3,9,18,0.85) 0%, transparent 55%); } /* Stats: 3 kolumny ale mniejsze */ .about-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; } .about-stat { padding: 14px 8px; } .about-stat-num { font-size: 22px; } .about-stat-lbl { font-size: 7px; letter-spacing: 0.18em; } /* About card */ .about-glass-card { padding: 12px 14px; left: 14px; right: 14px; bottom: 14px; } .about-glass-card p { font-size: 11px; } .about-glass-card strong { font-size: 12px; } /* Form */ .contact-form-card { padding: 22px 18px; border-radius: 18px; } .form-row { grid-template-columns: 1fr; gap: 14px; } .btn-send { width: 100%; justify-content: center; } /* Drawer nav */ #nav-drawer a { font-size: 26px; } /* Section heading marginy */ .section-heading { font-size: clamp(28px, 7vw, 40px); margin-bottom: 16px; } .tag-label { font-size: 9px; letter-spacing: 0.24em; } .portfolio-intro { font-size: 14px; } /* Floaty fonta paragrafu */ .about-text p { font-size: 14px; line-height: 1.85; } .contact-info p { font-size: 14px; } } /* ════════════════════════════════════════════ ≤ 420px — małe telefony (iPhone SE, 12 mini, kompaktowe Androidy) ════════════════════════════════════════════ */ @media (max-width: 420px) { section { padding: 70px 16px; } #nav { padding: 14px 16px; } #nav.scrolled { padding: 10px 16px; } .hero-content { padding: 0 16px; } .hero-scroll-hint { left: 16px; bottom: 22px; } .hero-scroll-hint span { display: none; } footer { padding: 24px 16px; } .home-offers, .home-faq { padding-left: 16px; padding-right: 16px; } .offer-header, .offer-body, .offer-gallery, .offer-faq, .offer-related, .offer-final-cta { padding-left: 16px; padding-right: 16px; } #hero { padding: 78px 0 40px; } .hero-title { font-size: clamp(30px, 10vw, 44px); } .hero-sub { font-size: 13px; } .hero-badge { padding: 6px 14px 6px 8px; margin-bottom: 20px; } .hero-badge span { font-size: 10px; letter-spacing: 0.16em; } .hero-actions { gap: 8px; } .btn-glass, .btn-blue { padding: 11px 18px; font-size: 12px; flex: 1 1 auto; justify-content: center; } .filter-row { margin-right: -16px; } .filter-pill { font-size: 10px; padding: 7px 14px; } /* About stats: w pionie 2x2 lub 1 col */ .about-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; } .about-stat { padding: 12px 6px; } .about-stat-num { font-size: 20px; } .contact-form-card { padding: 18px 14px; } #nav-drawer { gap: 18px; } #nav-drawer a { font-size: 22px; } /* Lightbox: pełniejszy ekran */ #lightbox img { max-width: 96vw; max-height: 74vh; } .lb-prev, .lb-next { width: 36px; height: 36px; font-size: 14px; } } /* ════════════════════════════════════════════ ≤ 360px — bardzo małe telefony (stare urządzenia, Galaxy Fold zamknięty) ════════════════════════════════════════════ */ @media (max-width: 360px) { section { padding: 60px 14px; } .hero-title { font-size: clamp(26px, 11vw, 38px); } .section-heading { font-size: clamp(24px, 8vw, 34px); } /* Stats: tylko 1 kolumna na minimalnych ekranach */ .about-stats { grid-template-columns: 1fr; } .about-stat { padding: 14px 10px; } .about-stat-num { font-size: 24px; } .about-stat-lbl { font-size: 9px; letter-spacing: 0.2em; } .btn-glass, .btn-blue { width: 100%; flex: 1 1 100%; } .hero-actions { flex-direction: column; align-items: stretch; } .nav-logo { font-size: 18px; } #nav-drawer a { font-size: 20px; } } /* ════════════════════════════════════════════ Landscape phones (niski viewport, szeroki) — np. iPhone w poziomie ════════════════════════════════════════════ */ @media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) { #hero { min-height: 100vh; min-height: 100svh; padding: 72px 0 32px; } .hero-title { font-size: clamp(28px, 6vw, 44px); margin-bottom: 16px; } .hero-sub { margin-bottom: 24px; max-width: 480px; } .hero-badge { margin-bottom: 16px; } .hero-scroll-hint { display: none; } section { padding: 60px 24px; } } /* ════════════════════════════════════════════ High-DPI displays (Retina, większość telefonów) — wyłącz pewne efekty, żeby nie były rozmyte ════════════════════════════════════════════ */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { body::before { background-size: 240px; opacity: 0.018; } }