/* landings/kursy/style.css — style WŁASNE landingu „Kursy" (/kursy i trzy podstrony kursów). Ładowany PO /landings/_shared/landing.css, więc nadpisuje go bez `!important`. Zasada: wszystko, co da się złożyć z klas wspólnych (.benefit-grid, .steps, .pricing, .compare, .faq, .audit-form), składamy z nich — tu leżą WYŁĄCZNIE rzeczy, których we wspólnym arkuszu nie ma: kafle kursów, program modułów i dwie makiety. Prefiks `ku-`/`km-`/`kn-` jest wolny w landing.css (sprawdzone 15.09.2026), więc nic nie koliduje. */ /* Akcent landingu. Pozostałe motywy zajmują niebieski, zielony, fiolet, czerwień, cyjan i bursztyn — kursy dostają indygo, żeby „Kursy" dało się odróżnić od „Strony WWW". */ body.theme-kursy { --lp:#4F46E5; --lp-soft:#EEF2FF; } /* ── kafle kursów (rozdzielacz /kursy) ───────────────────────────────────── */ .ku-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px; margin-top:34px; } .ku-tile { display:flex; flex-direction:column; text-decoration:none; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:24px 24px 20px; box-shadow:var(--shadow-sm); transition:border-color .18s, box-shadow .18s, transform .18s; } .ku-tile:hover { border-color:var(--accent); box-shadow:var(--shadow-lg); transform:translateY(-2px); } .ku-ico { width:52px; height:52px; border-radius:14px; background:var(--lp-soft); display:grid; place-items:center; margin-bottom:14px; } /* Znak wypełnia kafelek prawie do krawędzi (Oskar 21.10.2026: „ikonę i to w tle zrobiłbym bliżej siebie"). Było 34 px w polu 52 px, czyli 9 px luzu dookoła — plakietka pływała w środku zamiast siedzieć na tle. Teraz 44 px, czyli 4 px oddechu. */ .ku-ico svg { width:44px; height:44px; display:block; } /* ⚠️ DWA ZNAKI SIEDZĄ W KAFELKU ZA WYSOKO i trzeba je zepchnąć w dół (Oskar 22.10.2026: „obie ikony — Canva i Pakiet Fundraisera — wewnątrz tej kostki daj trochę niżej, są jakoś dziwnie wysoko"). Powód jest w samych rysunkach, nie w kafelku: `place-items:center` środkuje PŁÓTNO, a rysunek nie stoi na jego środku. Policzone z geometrii SVG, nie dobrane na oko: · Canva — płótno `23.25 24.01 53.5 53.5`, środek pionowy 50,76; rysunek (dwie płyty po `translate(12 12) scale(0.76)`) rozciąga się 27,2–66,7, czyli ma środek 46,95. Różnica 3,8 jednostki na 53,5 to przy 44 px około 3 px. · Pakiet Fundraisera — płótno `10 10 80 80`, środek 50; dwie metki zajmują 15,2–76,6, środek 45,9. Różnica 4,1 na 80 to przy 44 px około 2 px. Korygujemy TYLKO te dwa: znaki Ad Grants i LinkedIn mają rysunek na środku albo minimalnie poniżej i ich ruszanie zepsułoby to, co jest dobre. Gdybyś zmieniał `width/height` znaku, przelicz te wartości — są związane z rozmiarem, nie stałe. */ .ku-ico-canva svg { transform:translateY(3px); } .ku-ico-fundraiser svg { transform:translateY(2px); } .ku-tile h3 { font-size:1.08rem; font-weight:800; color:var(--navy); letter-spacing:-.01em; margin:0 0 6px; } .ku-meta { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.79rem; color:var(--fg-muted); font-variant-numeric:tabular-nums; margin-bottom:10px; } .ku-meta span { display:inline-flex; align-items:center; gap:5px; } .ku-meta span::before { content:""; width:4px; height:4px; border-radius:50%; background:var(--border-strong); } .ku-meta span:first-child::before { display:none; } .ku-tile p { flex:1; font-size:.91rem; line-height:1.62; color:var(--fg-secondary); margin:0 0 16px; } .ku-price { display:flex; align-items:baseline; gap:8px; padding-top:14px; border-top:1px solid var(--border-soft); } .ku-price b { font-size:1.22rem; font-weight:800; color:var(--navy); letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .ku-price span { font-size:.8rem; color:var(--fg-muted); } .ku-go { margin-top:12px; font-size:.9rem; font-weight:700; color:var(--accent-fg); } .ku-tile:hover .ku-go { text-decoration:underline; } /* ── program kursu: moduły rozwijane ─────────────────────────────────────── */ .ku-mods { max-width:820px; margin:32px auto 0; display:grid; gap:12px; text-align:left; } .ku-mod { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; } .ku-mod > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:15px 20px; } .ku-mod > summary::-webkit-details-marker { display:none; } .ku-mod > summary:hover { background:var(--bg); } /* MODUŁY DARMOWEGO MINI-KURSU — INNY KOLOR I RAMKA (Oskar 24.10.2026: „daj te moduły na inny kolor i jakąś ramkę wokół"). Klasę `ku-wolny` wstawia `ku_program()` tam, gdzie moduł niesie plakietkę, więc kolor i plakietka nie mogą się rozjechać. Zielony, nie kolor kursu: numer modułu nosi już kolor kursu, a tu chodzi o „to dostajesz bez płacenia". Ramka jest GRUBSZA (2 px) i wchodzi w miejsce ramki zwykłego modułu — nie dokłada się do niej — żeby pakiet stał w jednej linii z resztą listy, a nie wyskakiwał z niej o piksel. Tło zostaje bardzo jasne: moduł po rozwinięciu niesie kilkanaście lekcji i mocniejszy kolor zjadłby ich czytelność. */ .ku-mod.ku-wolny { border:2px solid color-mix(in srgb, var(--green) 42%, #fff); background:var(--green-soft); } .ku-mod.ku-wolny > summary:hover { background:color-mix(in srgb, var(--green) 9%, #fff); } .ku-mod.ku-wolny .ku-no { background:color-mix(in srgb, var(--green) 17%, #fff); color:var(--green); } .ku-mod.ku-wolny .ku-lek li { border-top-color:color-mix(in srgb, var(--green) 20%, #fff); } .ku-mod.ku-wolny .ku-umie-mod { background:color-mix(in srgb, var(--green) 10%, #fff); } /* NUMER MODUŁU W KOLORZE KURSU (Oskar 21.10.2026: „te moduły 1 2 3 daj w kolorze danego kursu — wyciągnij z pierwszej lekcji, Google Ad Grants jest żółty na polskiej wersji"). Kolor podaje `ku_program()` jako `--ku-kolor` na pojemniku `.ku-mods`; wartość jest zmierzona z planszy pierwszej lekcji, nie dobrana na oko (patrz `ku_kursy()`). Bez niej numery zostają pomarańczowe, czyli w akcencie serwisu — dlatego `var(--lp)` jako zapas. Tło liczymy z tego samego koloru, żeby nie trzymać drugiej zmiennej, która potrafi się rozjechać z pierwszą. */ .ku-no { flex:0 0 34px; height:34px; border-radius:10px; background:color-mix(in srgb, var(--ku-kolor, var(--lp)) 15%, #fff); color:var(--ku-kolor, var(--lp)); display:grid; place-items:center; font-size:.9rem; font-weight:800; font-variant-numeric:tabular-nums; } .ku-mt { flex:1; min-width:0; } .ku-mt b { display:block; font-size:.99rem; font-weight:700; color:var(--navy); line-height:1.35; } /* NAGŁÓWEK DARMOWEGO MINI-KURSU — JEDEN NAD GRUPĄ MODUŁÓW (Oskar 24.10.2026: „ten panel przy nazwie modułu fatalnie wygląda"). Zastąpił plakietkę przy każdym tytule: wciskała się między tytuł a strzałkę, na telefonie spadała pod tytuł, a przy czterech modułach z rzędu powtarzała to samo cztery razy. Stoi w siatce `.ku-mods` jak zwykły moduł, tyle że bez ramki i tła — zielone moduły pod nim same się bronią, a nagłówek ma tylko raz powiedzieć, co ten kolor znaczy. Dolny margines ujemny o wielkość przerwy w siatce: przykleja opis do pierwszego modułu pakietu, zamiast wisieć w połowie drogi między nim a sekcją wyżej. */ .ku-wolne-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:4px 2px -4px; } .ku-wolne-head b { font-size:.74rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--green); } .ku-wolne-head span { font-size:.82rem; color:var(--fg-muted); } .ku-mt span { display:block; font-size:.82rem; color:var(--fg-muted); margin-top:2px; } .ku-ar { flex:0 0 auto; color:var(--fg-muted); font-size:.8rem; transition:transform .18s; } .ku-mod[open] .ku-ar { transform:rotate(180deg); } .ku-lek { list-style:none; margin:0; padding:0 20px 8px 68px; } .ku-lek li { display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px solid var(--border-soft); font-size:.9rem; line-height:1.5; color:var(--fg-secondary); } /* KROPKA PRZY LEKCJI JEST SZARA, NIE W KOLORZE MOTYWU (Oskar 21.10.2026: „skąd tyle fioletowego"). Na rozwiniętym module były ich naraz cztery do siedmiu i razem z numerem modułu oraz nagłówkiem listy robiły z indyga kolor wiodący sekcji. Indygo zostaje tam, gdzie coś znaczy — na numerze modułu i na kafelkach kursów. */ .ku-lek li::before { content:""; flex:0 0 auto; width:7px; height:7px; margin-top:.45em; border-radius:50%; border:2px solid var(--border-strong); } .ku-suma { max-width:820px; margin:16px auto 0; text-align:center; font-size:.88rem; color:var(--fg-muted); } .ku-suma b { color:var(--navy); font-weight:800; font-variant-numeric:tabular-nums; } /* ── „po tym module umiecie" — wewnątrz rozwiniętego modułu (Oskar 21.10.2026) ───────── Wcięcie równe liście lekcji (68 px), żeby blok stał w jednej kolumnie z lekcjami, pod tytułem modułu. Jasne tło zamiast ramki: wewnątrz białej karty modułu wystarcza, żeby odciąć „efekt" od samych lekcji, a ramka w ramce robiła dwie kreski obok siebie. */ .ku-umie-mod { margin:8px 20px 18px 68px; padding:13px 16px 14px; background:var(--bg); border-radius:12px; } .ku-umie-t { display:block; font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--navy); margin:0 0 9px; } .ku-umie-mod ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; } .ku-umie-mod li { position:relative; padding-left:26px; font-size:.88rem; line-height:1.55; color:var(--fg-secondary); } .ku-umie-mod li::before { content:"✓"; position:absolute; left:0; top:.12em; width:18px; height:18px; border-radius:50%; background:var(--green-soft); color:var(--green); font-size:.66rem; font-weight:800; display:grid; place-items:center; } .ku-umie-mod b { color:var(--navy); font-weight:700; } @media (max-width:640px) { .ku-umie-mod { margin:8px 16px 16px; } } /* ── cztery znaki „co jest w cenie" pod listą „Dla kogo?" ────────────────────────────── Oskar 21.10.2026: „te ikony na kurs zrób obok siebie i też je tak zainimuj jak na stronie głównej", a po pierwszym podejściu: „daj te ikony bez opisów większych i bez tej dodatkowej ramki, tak jak na stronie głównej!". Dlatego rząd składa się z KAFLI USŁUG (`.wu-card` + `.wu-ico` z `landing.css`): znak stoi obok nazwy, a pomarańczowa obwódka znaku, pomarańczowa nazwa i powiększenie rysunku po najechaniu biorą się stamtąd. Markup: `ku_cechy()`. Tutaj zostają tylko trzy różnice: 1) BEZ WŁASNEGO TŁA I RAMKI. Pierwsza wersja miała obwódkę i jasne wypełnienie, żeby rząd odcinał się od białej sekcji — i to był błąd: na stronie głównej znak stoi na gołym tle. `background:none` stoi w tym arkuszu PO regule `.wu-card:hover` z `landing.css` i ma tę samą wagę, więc wygrywa także przy najechaniu: zmienia się wyłącznie znak i nazwa. 2) JEDEN WIERSZ, nie dwa. Pod nazwą nie ma już zdania, więc kafel ma jeden wiersz i nazwa jest wyśrodkowana w pionie względem 52-pikselowego znaku. Odpada przy tym `subgrid` z `.wu-cards` — nie ma czego wyrównywać między kaflami, a nazwa może się spokojnie złamać na dwie linie. 3) UKŁAD „ZNAK OBOK NAZWY" TAKŻE NA TELEFONIE: kafel usługi układa się tam w słupek (ikona nad nazwą), a tu chodzi o wiersz. Selektory są o jedną klasę dłuższe niż te z `landing.css`, więc wygrywają bez `!important` w każdej szerokości. 4) ZNAKI STOJĄ BLISKO SIEBIE, nie rozciągnięte na całą szerokość (Oskar 21.10.2026: „daj je wszystkie bliżej siebie"). Siatka czterech równych kolumn zostawiała po krótkiej nazwie pustą połowę kolumny, więc rząd wyglądał na rozsypany. Teraz to `flex`: każda pozycja jest szeroka na tyle, ile zajmuje, a między nimi jest stały odstęp. Nazwy łamią się na dwie linie wpisanym `
` (`ku_cechy()`), bo przy pakowaniu do szerokości treści przeglądarka nie złamałaby ich sama. */ .ku-cechy { display:flex; flex-wrap:wrap; justify-content:center; gap:20px 40px; margin:34px auto 0; text-align:left; } .ku-cechy > .wu-card { grid-template-columns:52px auto; grid-template-rows:auto; align-items:center; gap:0 14px; padding:0; background:none; border:0; box-shadow:none; } .ku-cechy > .wu-card > .wu-ico { grid-column:1; grid-row:1; width:52px; height:52px; } .ku-cechy > .wu-card > .wu-ico svg { width:26px; height:26px; } /* DELIKATNIEJ (Oskar 21.10.2026). Nazwy były granatowe i grube jak nagłówki, więc rząd konkurował z listą „Dla kogo?" tuż nad nim, zamiast ją domykać. Teraz pismo o pół stopnia mniejsze, półgrube i w kolorze tekstu drugiego planu — a samo pole znaku traci mocną obwódkę. Po najechaniu wszystko wraca do pomarańczu z `landing.css`, więc ruch zostaje. */ .ku-cechy > .wu-card > h3 { grid-column:2; grid-row:1; margin:0; font-size:.88rem; font-weight:600; line-height:1.4; color:var(--fg-secondary); } .ku-cechy > .wu-card > .wu-ico { border-color:var(--border-soft); color:var(--fg-muted); } .ku-cechy > .wu-card:hover > h3 { color:var(--accent-fg); } /* Ruch po najechaniu — po jednym kształcie na znak, jak przy znakach usług. Klasy `an-*` siedzą wprost w SVG (`ku_ico_cecha()`); przejście, `transform-box` i wyłączenie ruchu przy `prefers-reduced-motion` są w `landing.css`, więc tu stoją same cele. */ .wu-card:hover .an-wstazka { transform:translateY(1.6px); } /* wstążka medalu opada */ .wu-card:hover .an-petla { transform:scale(1.12); } /* prawa pętla nieskończoności */ .wu-card:hover .an-dolacza { transform:translateX(1.6px); } /* trzecia osoba dosuwa się */ .wu-card:hover .an-wezel-gora { transform:scale(1.22); } /* węzeł sieci pulsuje */ /* ⚠️ NA TELEFONIE NIE PAKUJEMY, TYLKO USTAWIAMY W SIATKĘ 2×2 (Oskar 21.10.2026: „na mobile te ikony certyfikat itd nie wyglądają dobrze"). Przy 390 px każdy kafel wchodził w osobny wiersz, a że rząd jest wyśrodkowany, a nazwy mają różną długość, każdy wiersz zaczynał się w innym miejscu — zmierzone szerokości 146 / 178 / 203 / 155 px. Wyglądało to na rozsypane, nie na zestaw. Dwie kolumny o równej szerokości, znak nad nazwą, wszystko wyśrodkowane w komórce: cztery znaki w dwóch rzędach zamiast czterech. */ @media (max-width:620px){ .ku-cechy { display:grid; grid-template-columns:1fr 1fr; gap:18px 10px; margin-top:26px; max-width:420px; text-align:center; } .ku-cechy > .wu-card { grid-template-columns:1fr; grid-template-rows:auto auto; justify-items:center; gap:7px 0; } .ku-cechy > .wu-card > .wu-ico { grid-column:1; grid-row:1; width:44px; height:44px; } .ku-cechy > .wu-card > .wu-ico svg { width:23px; height:23px; } .ku-cechy > .wu-card > h3 { grid-column:1; grid-row:2; font-size:.82rem; line-height:1.35; } } /* ── „dla kogo jest ten kurs" — dwie kolumny z ptaszkami ────────────────────────────── KOLUMNY CSS, NIE SIATKA (Oskar 21.10.2026: „to »dla kogo jest ten kurs« jakoś poukładaj lepiej, bo przerwy między bullet pointami nie są równe"). W siatce dwukolumnowej punkty stoją PARAMI: wiersz jest tak wysoki jak dłuższy z dwóch punktów, więc po krótszym zostawała większa dziura niż po dłuższym — i odstępy wyglądały przypadkowo. W kolumnach punkty płyną jeden za drugim, każdy ma swój własny odstęp pod spodem i wszystkie są równe. `break-inside:avoid` pilnuje, żeby żaden punkt nie został przecięty na pół między kolumnami. Dwa ostatnie punkty mogą przez to wypaść nierówno na dole — to jest zamierzone, bo liczy się rytm czytania, a nie równa krawędź. */ .ku-umie { list-style:none; margin:30px auto 0; padding:0; max-width:880px; text-align:left; columns:2; column-gap:34px; } .ku-umie li { position:relative; padding-left:30px; margin:0 0 13px; break-inside:avoid; font-size:.95rem; line-height:1.6; color:var(--fg-secondary); } .ku-umie li:last-child { margin-bottom:0; } /* PO RÓWNO W OBU KOLUMNACH (Oskar 21.10.2026: „aby było po równo po 3"; 22.10.2026 o kursie LinkedIn: „miało być po 2 punkty w dwóch kolumnach"). Same kolumny CSS dzielą listę po WYSOKOŚCI, więc przy punktach różnej długości wychodziło 2 i 3. Łamiemy więc kolumnę w POŁOWIE LISTY — ale punkt, po którym to robimy, zależy od tego, ile ich jest. ⚠️ SZTYWNE `nth-child(3)` ZOSTAWIAŁO NA KURSIE LINKEDIN 3 + 1, odkąd lista ma tam cztery punkty. Warunek `nth-last-child` liczy pozycję OD KOŃCA, więc jedna reguła obsługuje szóstkę, druga czwórkę, a przy nieparzystej liczbie żadna nie wchodzi i zostaje podział po wysokości. */ .ku-umie li:nth-child(3):nth-last-child(4) { break-after:column; } /* 6 punktów → 3 + 3 */ .ku-umie li:nth-child(2):nth-last-child(3) { break-after:column; } /* 4 punkty → 2 + 2 */ .ku-umie li::before { content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; background:var(--green-soft); color:var(--green); font-size:.72rem; font-weight:800; display:grid; place-items:center; } .ku-umie b { color:var(--fg); font-weight:700; } /* ── CENNIK I „CO ZAWIERA AKADEMIA" JAKO JEDEN PAS ──────────────────────────────────── Oskar 21.10.2026: „chyba to »Co zawiera Akademia« będzie lepiej dać na grantowym tle, ale nie wiem jak połączyć to tło z cennikiem u góry — możesz coś zaproponować?". Odpowiedź: nic nie trzeba dorabiać ani łączyć — wystarczy NIE przerywać. „Grantowe tło" to `section[data-tlo]` z `landing.css` (miękki błękit z ruchomymi plamami), który `landing_footer()` dokleja sam każdej sekcji o `id="cennik"`. Wygasza się do bieli u dołu tylko wtedy, gdy NASTĘPNA sekcja jest biała; „Co zawiera Akademia" jest zwykłą sekcją, więc kolor płynie dalej i oba bloki czyta się jak jeden pas. Pas kończy się dopiero na białym FAQ i to przejście też rysuje system (`section:not(.alt) + .alt`). W tym arkuszu nie ma więc ANI JEDNEJ reguły na tło tych dwóch sekcji — i tak ma zostać. Zostaje jedno: na błękicie cień kafla robi się brudną obwódką, więc kafle kursów go gubią i odzyskują dopiero po najechaniu. */ .ku-pas-koniec .ku-tile { box-shadow:none; } .ku-pas-koniec .ku-tile:hover { box-shadow:var(--shadow-sm); } /* ── trzecia kostka: Pakiet Fundraisera z przykładowymi zniżkami ────────────────────── Oskar 21.10.2026: „na kursie daj jednak ten Pakiet Fundraisera jako 3 kostka, ale pokaż te przykładowe zniżki, może pierwsze 3 + YouTube". Pozycje idą z `_fundraiser-dane.php`, czyli stamtąd, skąd bierze je tabela na `/google-ad-grants`. Kostka NIE JEST odnośnikiem (katalog zniżek jest za logowaniem), więc nie podnosi się po najechaniu i nie zmienia obwódki — inaczej obiecywałaby kliknięcie, którego nie ma. Lista rośnie (`flex:1`), żeby wiersz „w Akademii" stał równo z cenami w sąsiednich kaflach. */ .ku-tile-fr:hover { border-color:var(--border); box-shadow:none; transform:none; } /* SPIS ZNIŻEK JAK WYCIĄG, NIE JAK LISTA Z PTASZKAMI (Oskar 21.10.2026: „pakiet Fundraisera — spis pokaż jakoś inaczej, to zielone mi się nie podoba. Bardziej kompaktowo"). Zielona kwota po prawej czytała się jak zysk w tabelce finansowej i była najmocniejszym elementem całej kostki, choć to tylko przykłady. Teraz: nazwa po lewej, wartość po prawej, kreska między wierszami zamiast kropek — cztery wiersze w miejscu, w którym stały trzy. */ .ku-fr { flex:1; list-style:none; margin:0 0 14px; padding:0; display:grid; align-content:start; } .ku-fr li { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:5px 0; font-size:.82rem; line-height:1.35; border-top:1px solid var(--border-soft); } .ku-fr li:first-child { border-top:0; padding-top:0; } .ku-fr b { color:var(--fg); font-weight:600; } /* ZNAK I NAZWA W JEDNEJ LINII. Wiersz w kostce ma ok. 300 px, a musi pomieścić znak, nazwę i wartość zniżki — przy stopniu pisma sprzed 23.10.2026 („YouTube dla Non-Profit" 150 px plus „zwiększenie darowizn" 130 px) nie było na to miejsca i dwa z czterech wierszy schodziły na drugą linię. Dlatego cały wiersz jest o stopień mniejszy, a znak ma 15 px. `max-width` trzyma w ryzach logotyp Google Workspace, jedyny niekwadratowy z czwórki; `flex-shrink:0` nie pozwala go ścisnąć, gdy nazwa obok jest długa. `b` jest tu `flex`, bo raz niesie obrazek z tekstem, a raz sam tekst (pozycja bez pliku) — przy `inline` obrazek wisiałby na linii bazowej i rozpychał wiersz. */ .ku-fr li { align-items:center; } .ku-fr b { display:flex; align-items:center; gap:6px; min-width:0; } /* ⚠️ `min-width` RÓWNA NAZWY W KOLUMNĘ (24.10.2026, ta sama zmiana co w tabeli na `/google-ad-grants`). Znaki mają różne szerokości — Canva 15 px, Autenti 16, YouTube 21 — więc bez wspólnej szerokości nazwa zaczynała się w trzech różnych miejscach i Oskar zobaczył to jako „dziwnie wygląda". 22 px mieści najszerszy kwadratowy znak; logotyp Google Workspace jest szerszy i wychodzi poza tę miarę, ale on JEDYNY nie ma obok tekstu, więc nie ma się z czym równać. */ .ku-fr .ku-fr-znak { height:15px; width:auto; min-width:22px; max-width:86px; flex:0 0 auto; object-fit:contain; border-radius:3px; } .ku-fr span { color:var(--fg-muted); font-weight:700; font-size:.78rem; white-space:nowrap; } .ku-tile-fr .ku-price b { font-size:1rem; } /* ── KONIEC PASA ZAWSZE TAKI SAM ────────────────────────────────────────────────────── Oskar 21.10.2026: „tylko kurs Google Ad Grants — »Co zawiera Akademia« nie kończy się fadem, LinkedIn i Canva tak. Dlaczego! Masz to ujednolicać, bo potem nie zauważę tych problemów". Zmierzone: reguły na wszystkich trzech stronach były IDENTYCZNE. Różnica brała się stąd, że przejście rysowała sekcja NASTĘPNA (`section:not(.alt) + .alt` z `landing.css`) i miało wysokość 20% JEJ wysokości — a FAQ na stronie Ad Grants ma jedno pytanie więcej, więc to samo przejście rozciągało się na 139 px zamiast 124 px. Wystarczy, żeby jedna strona wyglądała „bez fadu", a dwie pozostałe z nim. Dlatego przejście przenosi się TUTAJ i dostaje STAŁĄ wysokość: pas gaśnie na swoich ostatnich 150 px, niezależnie od tego, co stoi pod nim i jak długie jest FAQ. Druga reguła gasi przejście w sekcji następnej, bo inaczej biel wychodziłaby dwa razy — a długi łańcuch `:not()` jest po to, żeby wagą pobić tamtą regułę z `landing.css` bez `!important`. */ .ku-pas-koniec { background:linear-gradient(180deg, var(--bg) 0%, var(--bg) calc(100% - 150px), var(--surface) 100%); padding-bottom:110px; } section.ku-pas-koniec:not(.alt):not(.wu-sec):not([data-tlo]):not(.hero) + .alt { background:var(--surface); } /* ── ramka informacyjna (kurs osobno vs Akademia) ────────────────────────── */ .ku-info { max-width:780px; margin:26px auto 0; background:var(--lp-soft); border:1px solid color-mix(in srgb, var(--lp) 26%, transparent); border-radius:var(--r-lg); padding:16px 20px; font-size:.92rem; line-height:1.65; color:var(--fg-secondary); text-align:left; } .ku-info b { color:var(--navy); } .ku-info a { color:var(--accent-fg); font-weight:600; } /* ── makieta: lista kursów w panelu (ekran powitalny /kursy) ─────────────── */ .ku-mock { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; } .km-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 17px; background:var(--bg); border-bottom:1px solid var(--border); font-size:.86rem; font-weight:700; color:var(--fg); } .km-head span { font-size:.74rem; font-weight:500; color:var(--fg-muted); } .km-row { display:flex; align-items:center; gap:13px; padding:13px 17px; border-bottom:1px solid var(--border-soft); } .km-row:last-child { border-bottom:0; } .km-ico { flex:0 0 36px; height:36px; border-radius:10px; background:var(--lp-soft); display:grid; place-items:center; } .km-ico svg { width:24px; height:24px; display:block; } .km-txt { flex:1; min-width:0; } .km-txt b { display:block; font-size:.87rem; font-weight:700; color:var(--fg); } .km-sub { display:block; font-size:.75rem; color:var(--fg-muted); margin:1px 0 6px; font-variant-numeric:tabular-nums; } .km-bar { display:block; height:5px; border-radius:999px; background:var(--border-soft); overflow:hidden; } .km-bar i { display:block; height:100%; border-radius:999px; background:var(--lp); } .km-tag { flex:0 0 auto; font-size:.7rem; font-weight:700; padding:4px 9px; border-radius:999px; background:var(--bg); color:var(--fg-muted); white-space:nowrap; } .km-tag.ok { background:var(--green-soft); color:var(--green); } .km-foot { padding:11px 17px; background:var(--bg); border-top:1px solid var(--border); font-size:.78rem; color:var(--fg-muted); text-align:center; } /* ── panel kursu z PRAWDZIWĄ lekcją (ekran powitalny podstron) ───────────── 15.09.2026, polecenie właściciela: „w hero każdego kursu miała być przykładowa lekcja! rzeczywista która jest na klient.webup.pl". Do tego dnia stała tu sama MAKIETA (lista lekcji bez żadnego nagrania pod spodem). Teraz w ramce panelu odtwarza się prawdziwy plik z `klient.webup.pl/uploads/videos/`, a makieta ZOSTAJE POD ODTWARZACZEM, skrócona do samych modułów: wideo sprzedaje jakość, lista modułów — zakres. Markup składa ku_panel() w landings/kursy/_wspolne.php. */ .ku-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; } .kn-top { display:flex; align-items:center; gap:11px; padding:11px 16px; background:var(--bg); border-bottom:1px solid var(--border); } .kn-dots { flex:0 0 auto; display:inline-flex; gap:5px; } .kn-dots i { width:8px; height:8px; border-radius:50%; background:var(--border-strong); } .kn-title { flex:1; min-width:0; font-size:.85rem; font-weight:700; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .kn-host { flex:0 0 auto; font-size:.73rem; color:var(--fg-muted); } /* Odtwarzacz. `aspect-ratio` trzyma miejsce ZANIM plakat się wczyta — bez tego ekran powitalny podskakuje przy ładowaniu. Nagrania są 1280×720 (sprawdzone ffprobe 15.09.2026), więc 16/9 zgadza się co do piksela i nie ma czarnych pasów. Samo `