/* Tymito — ujednolicenie wersji mobilnej. Plik dotyczy WYŁĄCZNIE ekranów do 768 px, więc nie rusza wyglądu desktopu. Zmierzone przed poprawką: odsunięcie treści od krawędzi wynosiło 0, 10, 20 lub 40 px zależnie od sekcji, a nagłówki H2 miały od 24 do 32 px na jednej podstronie. */ /* ---------- Indeks sekcji na Ofercie — USUNIĘTY ---------- Numery „01–04" pokazywały się wyłącznie do 880 px (na desktopie widget miał je ukryte), przez co na telefonie siedziały nad tytułem usługi. Zostały wycięte z treści widgetu (post 69). Reguła zostaje jako zapora, gdyby numer wrócił przy odtwarzaniu kopii. */ .to-service-num { display: none !important; } @media (max-width: 768px) { /* ---------- Jednakowe marginesy boczne ---------- */ .toa-inner, .toa-hero-inner, .tk3-inner, .ts2-inner, .tw2-inner, .tp3-inner, .tf-inner, .tn-inner, .tb-inner, .tc-inner, .ton-inner, .tr-inner, .to-inner { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } /* sekcje, które miały własne, większe odsunięcie — sprowadzamy do wspólnej wartości */ #tymito-oferta .to-service-inner { padding-left: 0 !important; padding-right: 0 !important; } #tymito-oferta .to-service, #tymito-oferta .to-hero { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } /* Kontakt: kontener Elementora odsuwa sekcję o 10 px, więc wrapper dokłada tylko 10, żeby w sumie wyszło te same 20 px co wszędzie. */ #tymito-kontakt .tk3-inner { padding-left: 10px !important; padding-right: 10px !important; } /* ---------- Spójna skala nagłówków ---------- */ #tymito-opieka h2, #tymito-oferta h2, #tymito-kontakt h2, #tymito-services h2, #tymito-why h2, #tymito-process h2, #tymito-faq h2, #tymito-cta h2, #tymito-newsletter h2, #tymito-banner h2 { font-size: 1.6rem !important; line-height: 1.25 !important; } #tymito-opieka h3, #tymito-oferta h3, #tymito-kontakt h3 { font-size: 1.1rem !important; line-height: 1.35 !important; } /* ---------- Spójny tekst ---------- */ #tymito-opieka p, #tymito-oferta p, #tymito-kontakt p { font-size: .95rem; line-height: 1.7; } /* drobne podpisy zostają mniejsze — inaczej straciłyby hierarchię */ #tymito-opieka .toa-uwaga, #tymito-opieka .toa-plan-netto, #tymito-opieka .toa-por-dla, #tymito-oferta .to-integr-note { font-size: .86rem; } /* ---------- Nagłówki sekcji wyśrodkowane, treść nadal do lewej ---------- Wyśrodkowanie akapitów pogarsza czytelność, więc centrujemy tylko etykietę, nagłówek i zdanie wprowadzające. */ #tymito-opieka > section > .toa-inner > .toa-label, #tymito-opieka > section > .toa-inner > h2, #tymito-opieka > section > .toa-inner > .toa-hero-sub { text-align: center; } /* ---------- Karty i przyciski ---------- */ .toa-plan { padding: 28px 22px 24px !important; } .toa-plan-cena { font-size: 2.1rem !important; } .toa-plan .to-btn-primary, .toa-cta-box .to-btn-primary, .toa-cta-tel { width: 100%; } .toa-cta-row { flex-direction: column; } .toa-cta-row > a { width: 100%; } /* ---------- Panel integracji ---------- */ #tymito-oferta .to-integr { padding: 22px 18px 20px !important; } } /* Bardzo wąskie ekrany (iPhone SE i podobne) */ @media (max-width: 380px) { .toa-inner, .toa-hero-inner, .tk3-inner, .ts2-inner, .tw2-inner, .tp3-inner, .tf-inner, .tn-inner, .tb-inner, .tc-inner, .ton-inner, .tr-inner, .to-inner { padding-left: 16px !important; padding-right: 16px !important; } #tymito-opieka h2, #tymito-oferta h2, #tymito-kontakt h2 { font-size: 1.45rem !important; } .toa-plan-cena { font-size: 1.9rem !important; } } /* ---------- „Dlaczego my": ucinana niebieska liczba ---------- Zmierzone na 390 px: .tw2-stat miało clientHeight 64 px przy scrollHeight 129 px (na jednej karcie 92 vs 186) — czyli 65–94 px treści znikało pod `overflow:hidden`, które jest tam potrzebne dla najeżdżającego gradientu ::before. Powód: to flex z `align-items: baseline` i `flex-wrap: wrap`; etykieta łamała się obok liczby, a pudełko zostawało wysokie na jedną linię. Rozwiązanie: na telefonie liczba i etykieta jedna pod drugą (blok) — wtedy wysokość liczy się z treści i nie ma czego przycinać. */ @media (max-width: 768px) { .tw2-stat { display: block !important; flex: 0 0 auto !important; /* nie kurczy się jako element flexa karty */ font-size: 2.5rem !important; margin: 0 !important; padding: 6px 12px !important; text-align: center !important; } .tw2-stat-lbl { display: block !important; margin-top: 8px; font-size: .85rem !important; line-height: 1.45 !important; } /* karta: mniej wewnętrznego marginesu, żeby tekst miał realną szerokość */ .tw2-card { padding: 32px 24px !important; gap: 16px !important; min-height: 0 !important; aspect-ratio: auto !important; } .tw2-card h3 { font-size: 1.15rem !important; } .tw2-card p { font-size: .93rem !important; line-height: 1.65 !important; } /* jedna kolumna już od tabletu — kwadratowe kafle w dwóch kolumnach przycinały treść (aspect-ratio 1/1 + overflow:hidden) */ .tw2-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .tw2-header { margin-bottom: 36px !important; } .tw2-header h2 { font-size: 1.6rem !important; } } /* ---------- Wspólna krawędź sekcji ---------- Zmierzone na 390 px: #tymito-services zaczynało się na x=0, #tymito-process na x=10, a #tymito-newsletter na x=30 — bo kontenery Elementora mają własne, różne odsunięcia, których wewnętrzne `-inner` nie widzi. Wypuszczamy sekcje na pełną szerokość ekranu, a jedynym źródłem marginesu zostaje `-inner`. */ @media (max-width: 768px) { #tymito-services, #tymito-why, #tymito-banner, #tymito-process, #tymito-cta, #tymito-newsletter, #tymito-faq, #tymito-opieka, #tymito-oferta, #tymito-kontakt, #tymito-wycena { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; width: 100vw !important; max-width: 100vw !important; box-sizing: border-box !important; } /* Kreator wyceny miał własne 16 px, a kontener Elementora dokładał 30 — treść zaczynała się na 46 px zamiast 20 px jak na pozostałych stronach. */ #tymito-wycena { padding-left: 20px !important; padding-right: 20px !important; } /* Stopka (szablon #153, prefiks tf4-) — jedyny element, którego przejście mobilne z 2 sierpnia nie objęło. Zmierzone: własny padding 40 px plus 20 px od kontenera Elementora dawały 60 px, czyli trzykrotność reszty stron. Wypuszczamy na pełną szerokość i wracamy do wspólnych 20 px. */ .tf4-main, .tf4-bottom-wrap { /* dolny pasek to osobny wrapper, nie dziecko .tf4-main */ margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; width: 100vw !important; max-width: 100vw !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } } @media (max-width: 380px) { .tf4-main, .tf4-bottom-wrap { padding-left: 16px !important; padding-right: 16px !important; } } /* ---------- Abonament: banery z podpisem na zdjęciu (figure.toa-vis) ---------- Widget liczył wysokość jako clamp(190px, 26vw, 340px) — na telefonie 26vw to ~97 px, więc zawsze wchodziła dolna granica 190 px. Podpis (nagłówek + dwie linie tekstu) zajmował na tym ~70 px, a przyciemniający gradient zaczynał się dopiero na 55% wysokości, czyli 104 px — tekst startował NAD gradientem, prosto na jasnym zdjęciu. Stąd nieczytelność. Poprawiamy dwie rzeczy naraz: kadr robi się wyższy, a scrim zaczyna się wcześniej i jest mocniejszy. Reguły z widgetu są inline w , więc przy równej wadze wygrywają — dlatego !important. */ @media (max-width: 768px) { /* wyższy kadr — zdjęcie ma się bronić samo, nie być paskiem pod nagłówkiem */ .toa-vis .toa-vis-img { height: clamp(300px, 78vw, 360px) !important; /* przy wyższym kadrze nie trzeba już tak mocno przygaszać samego zdjęcia, bo czytelność bierzemy z gradientu poniżej */ filter: saturate(.88) brightness(.86) contrast(1.04) !important; } /* scrim: start od 28% zamiast 55% i ciemniejsze dno — podpis leży wtedy w całości na przyciemnieniu, niezależnie od tego, co jest na zdjęciu */ .toa-vis::after { background: linear-gradient(180deg, rgba(20,20,20,0) 28%, rgba(20,20,20,.72) 62%, rgba(20,20,20,.97) 100%), linear-gradient(180deg, rgba(52,130,237,.14) 0%, rgba(52,130,237,0) 40%) !important; } /* podpis: większy, nie mniejszy — poprzednia wersja zjeżdżała do .85rem */ .toa-vis-podpis { left: 20px !important; right: 20px !important; bottom: 20px !important; } .toa-vis-podpis b { font-size: 1.05rem !important; line-height: 1.3 !important; margin-bottom: 8px !important; text-shadow: 0 2px 14px rgba(0,0,0,.75); } .toa-vis-podpis span { font-size: .9rem !important; line-height: 1.55 !important; color: rgba(255,255,255,.88) !important; text-shadow: 0 1px 10px rgba(0,0,0,.7); } } /* Na bardzo wąskich ekranach podpis ma trzy linie — dokładamy trochę kadru, żeby tekst nie dojeżdżał do środka zdjęcia. */ @media (max-width: 380px) { .toa-vis .toa-vis-img { height: 310px !important; } .toa-vis-podpis b { font-size: 1rem !important; } .toa-vis-podpis span { font-size: .87rem !important; } }