/* ────────────────────────────────────────────────────────────────────────────── ping-land.css — TYLKO to, czego nie ma w arkuszach landingow webup.pl Serwer: /var/www/clients/client1/web31/web/public/css/ping-land.css Kopia w repo: ping-server/ping.ngo/ping-land.css Strona glowna ping.ngo stoi na DWOCH kopiach wdrozonych arkuszy portalu: /css/landing.css = landings/_shared/landing.css (hero, sekcje, kafle, cennik, kroki, FAQ, pasek CTA, makieta maila `mock-mail` z pierscieniem oceny `mr-*`, stos `pk-stack`, sciana logotypow `logo-wall`, siatka liczb `sp-liczby`) /css/sc-style.css = landings/cookie/style.css (pasek `sc-top`, lista jezykow) Ten plik doklada wylacznie rzeczy, ktorych tam nie ma, bo sa wylacznie tutaj: przycisk „Sign in with Google", plakietka weryfikacji aplikacji i cztery bloki raportu. ⚠️ NIE DOPISUJ TU regul, ktore powinny byc we wspolnym arkuszu — jesli czegos brakuje na landingach webup.pl, poprawka idzie TAM, a tutaj tylko odswieza sie kopie (polecenie z README: `curl … > css/landing.css`). ⚠️ `main.css` (Pico 2024) NA TEJ STRONIE NIE JEST LADOWANY. Pozostale ekrany serwisu (podpinanie konta, regulamin, polityka, cookies) dalej na nim stoja razem z nakladka `webup.css` — tamtych dwoch plikow ta strona nie dotyka i odwrotnie. ────────────────────────────────────────────────────────────────────────────── */ /* ── GORA STRONY ────────────────────────────────────────────────────────────── Pasek jest `position:absolute` (ze `sc-style.css`), wiec plywa NAD ekranem powitalnym i nie zajmuje wysokosci. Tresc hero zaczynala sie przez to 43 px wyzej niz na smartcookie.io i cala gora wygladala na scisnieta (Oskar 17.10.2026: „caly header daj nizej, tak jak na smartcookie"). Zmierzone na obu stronach: smartcookie ma nadtytul na 136 px od gory, ping.ngo mial na 93 px — stad te 44 px. `.hero` liczy padding jako `calc(X + 73px)`, bo kompensuje `margin-top:-73px`, ktorym wspolny arkusz wsuwa ekran powitalny pod pasek nawigacji. */ @media (min-width: 761px) { .hero { padding-top: calc(88px + 73px); } } /* ── PRZYCISK „POLACZ Z GOOGLE" ──────────────────────────────────────────────── Wyglad wprost z wytycznych marki Google dla przycisku logowania, wariant jasny: wypelnienie #FFFFFF, obrys 1 px #747775, tekst #1F1F1F 14/20, znak 20 px, bez cienia. ⚠️ Znak Google wolno pokazac WYLACZNIE na przycisku logowania. Nie dorabiaj wlasnej wersji znaku, nie zmieniaj jego kolorow ani proporcji; `img/googleg.png` to oryginal z gstatic. Odstepstwa od wytycznych sa dwa i oba swiadome: pismo (Inter zamiast Google Sans Medium, ktorego nie hostujemy) oraz tekst — patrz komentarz przy `hero.cta` w `index.php`. Ten przycisk jest GLOWNYM wezwaniem na stronie, wiec w ekranie powitalnym i w pasku CTA dostaje wieksza wysokosc; kolorow nie ruszamy, bo ich ruszac nie wolno. */ .gsi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 10px 22px; border-radius: 999px; background: #fff; color: #1F1F1F; border: 1px solid #747775; font-size: .95rem; font-weight: 500; line-height: 20px; letter-spacing: .01em; text-decoration: none; white-space: nowrap; transition: background-color .15s; } .gsi-btn:hover { background: #F7F8F8; color: #1F1F1F; } .gsi-btn:active { background: #EFF0F0; } /* Proporcji znaku nie wolno zmieniac — stad staly rozmiar i zakaz kurczenia. */ .gsi-btn img { width: 20px; height: 20px; flex: 0 0 20px; display: block; } /* W ekranie powitalnym przycisk jest GLOWNYM wezwaniem strony, wiec dostaje wieksza wysokosc. Kolorow nie ruszamy, bo ich ruszac nie wolno. ⚠️ Pasek CTA na dole NIE MA juz przycisku Google — od 17.10.2026 prowadzi do zamowienia Assistanta (zwykly `btn-primary`), wiec reguly dla `.cta-strip .gsi-btn` zostaly stad zdjete zamiast wisiec martwe. */ .hero-ctas .gsi-btn { min-height: 52px; padding: 14px 28px; font-size: 1rem; box-shadow: 0 2px 10px rgba(15,23,42,.08); } /* Znak „Aplikacja zweryfikowana przez Google" — ZAWSZE POD PRZYCISKIEM, w jednej linijce, dokladnie tak szeroki jak przycisk, napis wysrodkowany. DROGA DO TEGO (trzy zgloszenia Oskara, zeby nikt tego nie cofnal): · byl pigulka z ramka — przy przycisku Google wygladal jak drugi przycisk; · byl przypisem lamanym na dwie linie (`max-width:215px`) — „daj w jednej linijce"; · staneli OBOK siebie — i tu zaczely sie klopoty, bo miescili sie w kolumnie ekranu powitalnego (542 px) z zapasem CZTERECH pikseli: 307 + 12 + 219 = 538. Kazda drobnostka po stronie przegladarki — inne renderowanie Intera, powiekszenie strony, wiekszy domyslny rozmiar pisma — zjada te cztery piksele, plakietka spada pod przycisk i jest od niego wyraznie krotsza. U mnie w pomiarach miescila sie zawsze, u Oskara nigdy: „nie jest tej samej dlugosci", „dalej nie jest wysrodkowana", „dalej mi sie nie pokazuje". Dlatego NIE MA juz zadnego ukladu „obok" ani progu w pikselach: kolumna flex o szerokosci `max-content` jest dokladnie tak szeroka jak najszerszy element (czyli jak przycisk), a plakietka rozciaga sie do niej i srodkuje napis. Wyglada tak samo przy kazdej szerokosci okna i przy kazdym powiekszeniu. ⚠️ Nie wracaj tu z `flex-direction:row` ani z `max-width` na plakietce — to sa dokladnie te dwie rzeczy, ktore trzeba bylo trzy razy poprawiac. */ .pg-verified { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; padding: 0; background: none; border: 0; box-shadow: none; font-size: .72rem; font-weight: 500; line-height: 1.3; color: var(--fg-secondary); } .pg-verified svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--green); } .hero-ctas.pg-connect { flex-direction: column; align-items: stretch; gap: 12px; width: max-content; max-width: 100%; } /* ── CZTERY BLOKI RAPORTU W MAKIECIE MAILA ──────────────────────────────────── Dyktando Oskara 17.10.2026: ocena konta (pierscien), zgodnosc z zasadami, propozycje, tresci, konwersje. Pierscien i jego opis bierzemy ze wspolnego arkusza (`mr-score`), a ponizej idzie gotowy stos `pk-stack` — tu zdejmujemy z niego wlasna ramke i cien, bo stoi juz wewnatrz koperty `mock-mail`. */ /* ⚠️ ZERO obramowan. Pierwsza wersja miala tu `border-top`, a tuz nad nim konczyl sie pierscien oceny, ktory ma wlasny `border-bottom` (`.mr-score` we wspolnym arkuszu) — dwie kreski dwa piksele od siebie czytaly sie jak ramka nad „Zgodnoscia z zasadami". Rozdziela je sam pierscien. */ .mock-mail .pk-stack.pg-raport { background: transparent; border: 0; box-shadow: none; padding: 0; } /* `border-radius` MUSI tu zejsc do zera. Wspolny arkusz daje wierszowi `border-bottom` i `border-radius:10px` naraz — kreska zakrzywia sie wtedy na obu koncach i cale trzy wiersze czytaja sie jak ramki dookola kazdego z nich (Oskar: „usun to obramowanie kazdego wiersza, dziwnie wyglada"). Zostaje prosta linijka rozdzielajaca. */ .pg-raport .pk-row { padding: 11px 0; align-items: center; border-radius: 0; } .pg-raport .pk-row:last-of-type { border-bottom: 0; } .pg-raport .pk-row b { font-size: .88rem; } .pg-raport .pk-row span:not(.pk-ok) { font-size: .78rem; } /* Blok „Nowe propozycje" to lista rzeczy do zatwierdzenia, wiec ma punkty. */ .pg-bul { list-style: none; margin: 3px 0 0; padding: 0; } .pg-bul li { position: relative; padding: 2px 0 2px 13px; font-size: .78rem; line-height: 1.45; color: var(--fg-secondary); } .pg-bul li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .pg-raport .pk-row i { font-size: .82rem; font-weight: 800; padding: 4px 11px; } /* Kolor pigulki niesie werdykt: czerwony = zasady do naprawy, pomaranczowy = propozycje do zatwierdzenia, zielony = pieniadze, ktore juz wplynely. */ .pg-raport .pg-r1 i { background: #FEE2E2; color: var(--red); } .pg-raport .pg-r2 i, .pg-raport .pg-r3 i { background: var(--accent-soft); color: var(--accent-fg); } .pg-raport .pg-r4 i { background: var(--green-soft); color: var(--green); } /* ── OKRES PROBNY NA KARCIE CENNIKA ──────────────────────────────────────────── */ .pg-trial { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: var(--green-soft); border: 1px solid color-mix(in srgb, var(--green) 28%, transparent); font-size: .76rem; font-weight: 800; letter-spacing: .01em; color: var(--green); } /* Karta Free ma w miejscu CTA oficjalny przycisk Google — musi byc rowno z przyciskami sasiadek, czyli przyklejony do dolu karty i na pelna szerokosc. */ .price-card .gsi-btn { margin-top: auto; width: 100%; } .price-card .price-feats + .gsi-btn { margin-top: 18px; } /* Kwota przy kursie Ad Grants. Mniejsza od nazwy i NIEŁAMLIWA, zeby „1 599 zl" nigdy nie zostalo rozciete miedzy wiersze. Zmierzone 18.10.2026 na zywej stronie: nazwa pogrubiona 156 px, kwota 111 px, a szerokosc tekstu w karcie to 273 px przy 1120 px okna i tylko 228 px w pasmie, w ktorym trzy karty jeszcze mieszcza sie obok siebie (~1000–1100 px). Mniejsza kwota (103 px) trzyma jeden wiersz od 1120 px w gore; nizej karta jest po prostu za waska i nie da sie tego scisnac bez nieczytelnego stopnia pisma — wtedy zdanie lamie sie PRZED kwota, czyli w jedynym miejscu, w ktorym to wyglada celowo. */ .price-feats .price-wart { font-size: .82em; white-space: nowrap; } /* ── PRZYCISKI, KTORE OTWIERAJA KOSZYK ──────────────────────────────────────── Od 18.10.2026 zamowienie nie wyprowadza juz na `/ping/zamow` — przycisk w pasku i w pasku CTA otwiera okno zamowienia TUTAJ, wiec z `` zrobil sie `