/* ============================================================================= * ContentInAI — nakładka na style z home-v2.css (.hp-cia-* / .hp-ciap-*) * * home-v2.css NALEŻY DO KOGOŚ INNEGO i nie jest tu ruszany. Ten plik ładują oba * partiale ContentInAI (home-v2/contentinai.blade.php, product-v2/contentinai.blade.php) * linkiem tuż przed sekcją, więc leży PÓŹNIEJ w dokumencie niż home-v2.css i przy * tej samej specyficzności wygrywa. Nigdzie nie potrzeba tu !important poza tymi * miejscami, gdzie nadpisujemy regułę z !important z marketing.css (≤640px). * * Zawiera trzy rzeczy: * 1. TYPOGRAFIA belek kroków — "01 BrandinAI znajduje lukę" było za słabe (uwaga * właściciela). Zmierzone przed zmianą, przy body{zoom:.9}: * .hp-cia-stage-n 11px → 9,9px na ekranie, waga 400 * .hp-cia-stage-brand 13,5px → 12,15px na ekranie, waga 600 * .hp-cia-stage-title 13,5px → 12,15px na ekranie, waga 400 * Dla porównania w tej samej sekcji: lead 16,5px → 14,85px, a nazwa wiersza * w karcie (.hp-cia-cite-name) 12,5px → 11,25px. Czyli NAGŁÓWEK odsłony był * praktycznie tej samej wielkości co zawartość karty, którą zapowiada — * odwrócona hierarchia, nie sam "mały tekst". Kontrast był i jest w porządku * (5,1 / 17,8 / 7,9), więc ruszamy WYŁĄCZNIE stopień pisma i wagę, kolory * zostają. Rodzina zostaje ta sama: Poppins + IBM Plex Mono na numerze. * 2. UKŁAD SEKCJI NA HOME — nagłówek na całą szerokość, trzy odsłony obok siebie. * 3. STRONA PRODUKTU — prawy panel pokazuje teraz konspekt, a nie konfigurację. * 4. RUNDA DOPRACOWANIA — powietrze po odjęciu mebli (plakietki "Przykład", etykiety * "Kreator artykułu", plakietki "tu jesteś", zdania o przestawianiu sekcji, linii * statusu i powtarzanych meta w kartach na home). * 5. UKŁAD KOMPAKTOWY SEKCJI NA HOME (blok 9, na końcu pliku) — lewa kolumna nieruchoma, * prawa jako jedna scena, na której karty 01/02/03 pokazują się po kolei, w pętli. * Zastąpił rząd trzech kart stojących obok siebie. Bloki 2 i 8 opisują TAMTEN układ * i ich selektory (.hp-cia-row-head, .hp-cia-grid, .hp-cia-flow, .hp-cia-row-foot, * .hp-cia-arrow) szablon już nie renderuje — zostają na czas przeglądu przed startem * jako droga powrotna. Wszystko, co ubiera SAME KARTY, dalej działa: nowy szablon niesie * te same klasy .hp-cia-stage / .hp-cia-card i ich wnętrza co do jednej. * ========================================================================== */ /* --- 1. typografia belek kroków (oba warianty, obie strony) ----------------- */ /* 12px/600 zamiast 11px/400: na ekranie 10,8px zamiast 9,9px i wyraźnie mocniejszy rysunek. Numer zostaje w IBM Plex Mono, bo cała sekcja tak numeruje. */ .hp-cia .hp-cia-stage-n { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; } /* 15px → 13,5px na ekranie. Siada między leadem sekcji (14,85px) a zawartością karty (11,25px), czyli tam, gdzie nagłówek odsłony powinien być. */ .hp-cia .hp-cia-stage-brand, .hp-cia .hp-cia-stage-title { font-size: 15px; letter-spacing: -0.01em; } /* Opis pod belką schodzi o włos niżej w hierarchii, żeby belka odcinała się od niego wyraźniej; kolor bez zmian (kontrast 5,31). */ .hp-cia .hp-cia-stage-text { margin-top: 6px; font-size: 13px; line-height: 1.55; } /* marketing.css chowa ≤640px akapit tuż po h2 (`section h2 + p`). Tu ten akapit niesie jedyne zdanie o tym, czym jest ContentInAI i skąd 40+ agentów — bez niego na telefonie zostaje sam nagłówek nad mockupem. Bierzemy go z powrotem, tak jak robi to już sekcja produktowa (.hp-ciap w home-v2.css). */ @media (max-width: 640px) { .hp-cia .hp-cia-lead { display: block !important; text-align: center; margin-top: 14px; } } /* --- 2. układ sekcji na home: trzy odsłony obok siebie ---------------------- * Dlaczego tak, a nie lepką kolumną: tamten układ (tekst po lewej przyklejony, bardzo * wysoki słup kart po prawej) zostawiał 551 × 463 px pustego białego pola przy 1440 * i 1920, a 485 × 392 px przy 1024 — na iPadzie Pro w pionie (1024 × 1366) cała dziura * mieściła się na jednym ekranie. Był to też JEDYNY taki układ na tym landingu: każda * inna sekcja ma nagłówek na całą szerokość, a pod nim kompozycję. Ten układ wraca do * tej gramatyki (głowa, trzy równoległe odsłony, stopka z CTA) i skraca sekcję z 1113 * do ~990 px bez odejmowania treści. * * Modyfikator .hp-cia--row nosi tylko sekcja na home. Strona produktu dzieli z nią * .hp-cia (kolor, typografia, ruch), ale ma własny układ pod .hp-ciap. */ .hp-cia--row .hp-cia-row-head { max-width: 760px; } /* Układ domyślny rozbija .hp-cia-grid na dwie kolumny od 900px — tu ma być jedna. Specyficzność 0,2,0 > 0,1,0 z home-v2.css, więc wygrywa też wewnątrz media query. */ .hp-cia--row .hp-cia-grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 40px; } .hp-cia--row .hp-cia-flow { display: grid; /* Odstęp między odsłonami trzyma wyłącznie grid; margin-top na .hp-cia-stage + .hp-cia-stage został skasowany, żeby jedna liczba rządziła jedną przerwą. */ gap: 30px; align-items: stretch; } /* Trzy karty zaczynają się na tej samej wysokości (min-height opisu niżej) i kończą się w jednej linii. Kolejne podejścia i czemu żadne nie wystarczało: · flex: 1 — karty rozciągane na całą kolumnę. Działało, dopóki niosły podobną treść; po odchudzeniu karty 03 (dwa bloki zamiast pięciu) zostawało w niej ~180px pustego dna. · flex: 0 0 auto — każda karta kończy się na swojej treści. Zniknęło puste dno, pojawiło się poszarpane: przy 1440 karta 03 kończyła się 201px wyżej od sąsiadek, więc w wierszu siatki stało pod nią białe pole 350 × 201px ("dziwnie jak są ułożone tak nierówno"). · treść: karta 03 niesie ten sam prompt i te same trzy paski co karta 01, więc zapas do wyrównania spadł do kilkudziesięciu px — i tu zostaje. · justify-content: space-between na każdej karcie z osobna. Dna wyrównane, ale zapas dzielił się przez WŁASNĄ liczbę przerw karty: karta 01 ma pięcioro dzieci (cztery przerwy po ~21px), karta 03 czworo (trzy po ~15px). Efekt: wiersze dwóch kart, które mają być czytane obok siebie, rozjeżdżały się o 12,0px przy 1440 i 1920, o 2,5px przy 1024 i o 15,9px w drugą stronę przy 900. Linia poprowadzona przez środek paska „Adidas” w karcie 01 trafiała w karcie 03 w meta („4 z 6 modeli”), nie w pasek. Nierówność przeniosła się z dna kart jeden poziom niżej — dokładnie między dwie karty, które właściciel ma porównać. Mechanizm, który to domyka, jest w bloku @media (min-width: 900px) niżej: obie lustrzane karty mają tę samą część sztywną (etykieta, prompt, trzy wiersze) i jeden blok rozciągliwy na końcu. Tylko od 900px: niżej karty stoją jedna pod drugą, każda jest własnym wierszem siatki i rozciągać nie ma czego (reguła bazowa zostaje flex: 0 0 auto). */ .hp-cia--row .hp-cia-stage { height: 100%; } .hp-cia--row .hp-cia-card { flex: 0 0 auto; } /* Stopka sekcji = jedyne wyjście z niej. Właściciel: "tylko pod obrazkiem, to CTA jakoś traci swoją czytelność". Zmierzone przed zmianą, przy 1440: · od dna kart do kreski 34 px, a pod stopką 110 px wyściółki sekcji — czyli wyjście przyklejało się do trzech kart i czytało jak ich przypis, a nie jak koniec sekcji, · kreska #EDEEF2 miała 1,06:1 na bieli, czyli praktycznie jej nie było: nic nie mówiło, że kadry się skończyły, · między prawą krawędzią zdania a lewą krawędzią guzika leżało 493 px pustki — szare 13 px zdanie przy lewym marginesie i pomarańczowy guzik przy prawym nie czytały się jako jedno zdanie zamykające, tylko jako dwie niezwiązane rzeczy w jednym wierszu. Guzik naprawia się sam (waga, obrys i cień — .hp-cia-cta w home-v2.css); tutaj naprawia się to, w czym leży: · powietrze nad kreską 38 → 54 px w CSS, czyli 34 → 49 px na ekranie przy body{zoom:.9}: wyjście odkleja się od kart i przestaje czytać się jak ich przypis, · kreska #EDEEF2 → #DEE0E8, czyli dokładnie ten sam obrys, który mają karty nad nią (1,06:1 → 1,32:1) — jedna grubość i jeden kolor kreski w całej sekcji, · zdanie puszczone na jeden wiersz (było max-width: 56ch, czyli 448 px i łamanie na dwa nierówne wiersze: pełne "…z naszego ekosystemu," i krótki ogon "zintegrowane z BrandinAI."). Przy 1440 i 1920 mieści się teraz w jednej linii (471 px), a pustka między nim a guzikiem schodzi z 493 do 456 px. Zdanie zamykające czyta się jako jedna myśl, a nie jako przypis złamany na pół. Przy 1024 pustka ma 292 px, przy 900 — 76 px, poniżej 900 guzik schodzi pod zdanie, a poniżej 640 rozciąga się na całą szerokość (reguła niżej). Guzik zostaje przy prawej krawędzi sekcji, czyli równo z prawą krawędzią karty 03 nad nim. Czego tu NIE ma i dlaczego: zwężenie zdania pustki nie zamyka, tylko ją powiększa (przy justify-content: space-between każdy zabrany zdaniu piksel idzie w przerwę), a dosunięcie guzika do zdania przenosi dziurę na prawą stronę sekcji, pod kartę 03. Pustka między jednym zdaniem a jednym guzikiem to po prostu szerokość sekcji — problemem była czytelność guzika, nie odległość, i tam została naprawiona. */ .hp-cia--row .hp-cia-row-foot { margin: 54px 0 0; padding: 26px 0 0; border-top: 1px solid #DEE0E8; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 40px; } .hp-cia--row .hp-cia-row-foot .hp-cia-cta { margin: 0; flex: 0 0 auto; } .hp-cia--row .hp-cia-row-foot .hp-cia-note { margin: 0; max-width: none; } /* 1b. ZDANIE O RELACJI OBU PRODUKTÓW = AKAPIT, NIE DOPISEK -------------------- * Właściciel o tym zdaniu na żywej stronie głównej: „jako taki mały nad CTA wygląda słabo — * albo musimy lekko dopracować ten tekst i dać go jako RÓWNORZĘDNY akapit jak ten wyżej, * albo coś innego". Poprawka była dotąd zrobiona WYŁĄCZNIE w podglądzie układu * (pages/podglad-contentinai.blade.php, klasa .hp-cia-lead na tym akapicie), a żywa sekcja * na home i na produkcie dalej niosła dopisek. Ta reguła przenosi ją na żywe sekcje. * * Zmierzone PRZED, przy 1440 (piksele ekranu, body{zoom:.9}): * akapit wyżej (.hp-cia-lead) 16,5px CSS → 14,85px, interlinia 1,65, kolor #4C5163 (7,3:1) * to zdanie (.hp-cia-note) 13,0px CSS → 11,70px, interlinia 1,60, kolor #656B7E (5,3:1) * Czyli zdanie zamykające sekcję było o 21% mniejsze i o dwa stopnie jaśniejsze od akapitu, * z którym ma mówić jednym głosem — mniejsze nawet od nazwy marki w karcie (11,25px). Stąd * „mały szary dopisek". * * PO: te same cztery liczby, co .hp-cia-lead, i to NIE przepisane, tylko wzięte z jednego * miejsca w kaskadzie — gdyby ktoś ruszył lead w home-v2.css, ten akapit ma pójść za nim. * Nadpisujemy .hp-cia-note (0,1,0 z home-v2.css) selektorem 0,2,0 z pliku leżącego niżej, * więc bez !important. Zasięg: OBIE sekcje ContentInAI (home ma .hp-cia--row, produkt * .hp-ciap, obie mają .hp-cia) — zdanie jest w nich dosłownie to samo, więc i stopień ma być * ten sam. Poza tymi dwiema sekcjami klasa .hp-cia-note nie występuje nigdzie (sprawdzone * w resources/ i w całym themes/marketing/css). * * Czego ta reguła NIE zmienia: max-width i text-align zostają tam, gdzie były (stopki obu * sekcji zerują max-width, ≤640px równa do lewej), bo to układ, a nie stopień pisma. */ .hp-cia .hp-cia-note { margin-top: 18px; font-size: 16.5px; line-height: 1.65; color: #4C5163; } /* Akapit zajmuje w stopce wiersz, a nie tyle, ile ma znaków. 380px to ta sama baza, którą ma * ten akapit w podglądzie (.cia-k-foot w cia-kompakt.css) — poniżej niej wiersz się łamie * i przycisk schodzi pod akapit, powyżej akapit rośnie razem z sekcją, a przycisk zostaje * przy prawej krawędzi. Bez tej linii akapit stoi na flex-basis: auto, czyli na swojej * szerokości max-content: dwa zdania w 16,5px chcą 1146px przy 1440 i zostawiają przyciskowi * 34px — za mało, więc przycisk i tak spadał pod spód, tylko po złamaniu wiersza, nie przed. */ .hp-cia--row .hp-cia-row-foot .hp-cia-note, .hp-ciap .hp-ciap-foot .hp-cia-note { flex: 1 1 380px; } /* Tytuł artykułu w pasku edytora to JEDYNE miejsce, gdzie widać, CO ContentInAI napisał, więc * nigdy nie urywa się wielokropkiem — zawija się. Reguła stała wcześniej tylko w @media 900px+ * i przy węższych kadrach wracał stary błąd; zmierzone przed zmianą: * 390 i 360 → 97px tytułu ucięte wielokropkiem ("…które buty do …"), * 900 → pasek zostawiał tytułowi 72px obok znaku słownego: SZEŚĆ linii w rynience, * 1024 → 136px, trzy poszarpane linie. * Stąd dwie rzeczy, obie niezależne od szerokości okna: tytuł zawsze zawija, a pasek może się * łamać — flex-basis znaczy "jeśli obok ołówka nie zostaje przynajmniej tyle, zejdź do własnej * linii na pełną szerokość karty". Przy 1440 i 1920 zostaje 294,3px, więc pasek wygląda * dokładnie jak dotąd: ołówek i tytuł obok siebie. * * 200 → 140px. Liczba 200 jest STARSZA od tej makiety: pochodzi z czasów, kiedy przed tytułem * stał znak słowny ContentInAI (97,5px) i zejście do własnej linii oddawało tytułowi prawie sto * pikseli — wtedy opłacało się. Dziś przed tytułem stoi OŁÓWEK: 13px znaku + 8px przerwy = 21px. * Złamanie kupuje więc 21px szerokości za cały wiersz wysokości (+16,9px na pasku, a pasek jest * w najwyższej karcie rzędu, więc płacą wszystkie trzy) i zostawia ołówek samotnie nad tytułem — * ikonę bez rzeczy, którą oznacza. Zmierzone w paśmie 900–999px (trzy kolumny): obok ołówka * zostaje 189,1px przy 900 i 246,7px przy 999, czyli próg 200 wypadał DOKŁADNIE w środku pasma * i pasek łamał się od 900 do 929px. Przy 140px próg leży poniżej całego zakresu, jaki ten pasek * w ogóle widzi (najciaśniej: 189,1px), więc ołówek nie zostaje sam nigdzie — a bezpiecznik * (flex-wrap na pasku) zostaje na wypadek dłuższego tytułu. * Ta jedna liczba sięga też do podglądu układu (pages/podglad-contentinai.blade.php) — jego * sekcja ma .hp-cia--row i pożycza ten pasek. Zmierzone tam po zmianie: przy 900px pasek 72,7 → * 53,0px, ołówek przestaje wisieć sam, a odsłony schodzą z 450,7 na 431,0px; przy 380, 640, 768, * 950, 999, 1000, 1024, 1280, 1440 i 1920px — co do dziesiątej części piksela bez zmian. Czyli * ta sama usterka i ta sama naprawa, w jednym punkcie. */ .hp-cia--row .hp-cia-editor-bar { align-items: flex-start; flex-wrap: wrap; } .hp-cia--row .hp-cia-editor-title { flex: 1 1 140px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; } @media (min-width: 900px) { .hp-cia--row .hp-cia-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; } /* Opisy mają 2–3 wiersze przy tej szerokości; rezerwujemy trzy, żeby karty w trzech kolumnach zaczynały się na tej samej wysokości. */ .hp-cia--row .hp-cia-stage-text { min-height: 4.65em; } /* Strzałka z pionowej robi się pozioma i siada dokładnie w środku przerwy (44px): środek pudełka na 100% + 22px, translateX(-50%) zdejmuje jego własną szerokość, więc nie trzeba jej znać. */ .hp-cia--row .hp-cia-stage { position: relative; } .hp-cia--row .hp-cia-arrow { position: absolute; top: -2px; left: calc(100% + 22px); transform: translateX(-50%); margin: 0; } .hp-cia--row .hp-cia-arrow svg { transform: rotate(-90deg); } /* W kolumnie ~370px wnętrza kart dostają to samo traktowanie, co na telefonie: wynik SEO/GEO pod tekstem, a nie obok, i meta pod paskiem, a nie za nim. */ .hp-cia--row .hp-cia-editor-body { grid-template-columns: minmax(0, 1fr); gap: 12px; } /* RUNDA SKRACANIA KART. Pasek SEO/GEO stracił dwie rzeczy i obie wracają jako wysokość CAŁEGO wiersza siatki, bo karta 02 jest najwyższą z trzech kart i to ona ustawia pozostałe (wysokości własne przy 1440: 315,9 / 356,4 / 319,8): · podpis „gotowość pod wyszukiwarkę i pod odpowiedzi AI" — 17,2 px wiersza plus 14 px przerwy paska; powód treściowy przy kluczu 'editor_note' w lang/pl, · kreskę #F1E6D3 z 12 px wyściółki — ta sama zmiana, co w pasku modeli karty 03 (powód przy .hp-cia-cited w home-v2.css). Odstęp nad paskiem trzyma teraz wyłącznie gap ciała edytora (12 px), czyli jedna liczba na jedną przerwę. Zostają dwa mierniki, więc space-between rozpina je na całą szerokość karty — inaczej po odjęciu podpisu zostawało 134 px pustego dna po prawej stronie karty. */ .hp-cia--row .hp-cia-scores { flex-direction: row; align-items: center; justify-content: space-between; /* Para NIE zawija się nigdy — wymiary, które to gwarantują, stoją w bloku 5 niżej (--cia-meter). Zawijanie było tu bezpiecznikiem, ale w paśmie 900–971 px strzelało: para potrzebowała 203 px, a wnętrze karty dawało 179,3 px przy 900 i 199,3 px przy 960, więc GEO schodziło pod SEO, a włosowa kreska, która ma stać MIĘDZY miernikami, zostawała wisieć z boku dolnego wiersza. */ flex-wrap: nowrap; width: auto; border-left: 0; padding: 0; gap: 14px; } .hp-cia--row .hp-cia-cite { grid-template-columns: 86px minmax(0, 1fr); } .hp-cia--row .hp-cia-cite-meta { grid-column: 2; white-space: normal; } /* Wyrównanie dołu i WNĘTRZA — powody i cztery poprzednie podejścia przy regule bazowej wyżej. Karty 01 i 03 to jedno zdjęcie przed i po, czytane obok siebie, więc ich wiersze muszą stać na tych samych liniach. Kość obu kart jest od tej rundy identyczna: sztywno etykieta mono → prompt → lista trzech wierszy ruchomo jeden blok domykający (01: wniosek + przycisk w .hp-cia-close, 03: pasek modeli) Oba ruchome elementy — lista wierszy i blok domykający — dostają flex: 1 1 0, czyli tę samą podstawę i ten sam współczynnik. Zapas (karta 02 jest naturalnie najwyższa) dzieli się więc po połowie, a że część sztywna jest w obu kartach ta sama, obie dostają DOKŁADNIE tę samą wysokość listy i bloku. Wiersze lądują na tych samych liniach przy każdej szerokości i w obu językach — nie zależy to od tego, ile linii ma wniosek „Luka:” ani jak wysoki jest pasek modeli. Zmierzone po zmianie: 0,0px różnicy przy 900, 1024, 1440 i 1920, PL i EN. Zapas listy idzie w przerwy między wierszami (space-between — wiersze oddychają, zamiast zostawiać jedną dziurę), zapas bloku siada nad jego treścią, bo treść trzyma się dna karty. */ .hp-cia--row .hp-cia-card { flex: 1 1 auto; display: flex; flex-direction: column; } .hp-cia--row .hp-cia-card:not(.is-editor) .hp-cia-cites { flex: 1 1 0; justify-content: space-between; } /* Ta sama przerwa nad blokiem domykającym w obu kartach (12px): gdyby się różniły, o tę różnicę różniłaby się też wolna przestrzeń, a więc i wysokość obu list. */ .hp-cia--row .hp-cia-close, .hp-cia--row .hp-cia-cited { flex: 1 1 0; margin-top: 12px; display: flex; flex-direction: column; } /* 01: po zdjęciu przycisku (blok 7) w bloku został sam wniosek „Luka:”. Blok jest dalej rozciągliwy — musi być, bo to on i jego bliźniak w karcie 03 trzymają wiersze obu kart na tych samych liniach (wywód wyżej) — więc zapas wiersza siatki siada właśnie w nim: 57 px przy 1440, 44 px przy 1024. Zmierzone trzy położenia jednego wiersza tekstu w takim bloku: margin-top: auto (dno) — nad wnioskiem zostaje 57 px pustego pola ZARAZ POD KRESKĄ, czyli kreska zapowiada nic; najgorsze z trzech, margin-top: 0 (góra) — wniosek wchodzi tuż pod kreskę, ale karta kończy się 67 px pustego dna przy 27 px w karcie 02 i 10 px w karcie 03, oba auto (środek) — zapas dzieli się na pół, 28/29 px, i wniosek ląduje na tej samej wysokości, co para pierścieni w karcie 02 (różnica 2,5 px przy 1440) i pasek modeli w karcie 03 (11 px). Stąd oba auto: trzy puenty czytają się jako jeden rząd, a nie jako trzy różne piętra. */ .hp-cia--row .hp-cia-close .hp-cia-gap { margin-top: auto; margin-bottom: auto; } /* 03: cały pasek modeli trzyma się dna. Kreska nad etykietą wyszła w rundzie skracania kart (powód przy .hp-cia-cited w home-v2.css) — razem z nią wyszło stąd przeniesienie kreski z pudełka na etykietę, które istniało tylko po to, żeby kreska jechała z treścią w dół rozciągniętego bloku. Zostaje samo dosunięcie treści do dna. */ .hp-cia--row .hp-cia-cited { justify-content: flex-end; gap: 9px; } /* Karta 02 ma dwoje dzieci: pasek edytora i ciało. Zapas (o ile jakiś ma — zwykle to ona jest najwyższa) oddaje ciału, nie paskowi, a ciało rozkłada go między tekst artykułu i wyniki SEO/GEO, czyli pasek wyników zamyka kartę tak samo, jak pasek modeli zamyka kartę 03. */ .hp-cia--row .hp-cia-card.is-editor .hp-cia-editor-body { flex: 1 1 auto; align-content: space-between; } } @media (max-width: 640px) { .hp-cia--row .hp-cia-grid { margin-top: 26px; } .hp-cia--row .hp-cia-row-foot { margin-top: 28px; /* Do lewej, nie na środku: przy 545-640px zdanie jest krótsze niż wiersz, więc wyśrodkowany kontener odsuwał je o 48px od krawędzi sekcji, podczas gdy nagłówek, trzy odsłony i przycisk pod nim stoją równo przy x=20. Na stronie produktu to samo zdanie stoi przy x=20 na każdej z tych szerokości — teraz oba miejsca czytają się tak samo. */ justify-content: flex-start; text-align: left; } /* Zdanie o relacji obu produktów jest dosłownie to samo na home i na produkcie, więc na telefonie ma też wyglądać tak samo. Na produkcie stoi pod akapitem "Pętla się zamyka" i jest do lewej; home-v2.css centrował je tutaj, przez co te same słowa miały dwa formatowania. Do lewej równa je też z odsłonami 01–03 nad stopką — wyśrodkowane było w tej sekcji trzecim wyrównaniem. */ .hp-cia--row .hp-cia-row-foot .hp-cia-note { text-align: left; } } /* --- 3. strona produktu: prawy panel pokazuje KONSPEKT --------------------- * Błąd, który to naprawia: panel wypisywał temat, słowa kluczowe i profil głosu — * czyli krok 01 kreatora ("Set up the article: describe the topic, add keywords and * select a voice profile", contentinai.com) — a jednocześnie w kreatorze podświetlony * był krok 02 "Konspekt", i przycisk pod spodem mówił "Zatwierdź konspekt". * Teraz panel pokazuje to, co deklaruje: konspekt do zatwierdzenia. Konfiguracja * jest zamknięta, więc zwija się do jednej linii podsumowania z ptaszkiem. */ .hp-ciap-article { margin: 0; font-size: 14.5px; line-height: 1.35; font-weight: 600; color: #14162B; text-wrap: pretty; } /* Jedna linia: mono etykieta kroku 01 + to, co po nim zostało. Ptaszek i "Konfiguracja gotowa" stąd wyszły — był to stan "zrobione" na klatce końcowej, tej samej, którą widzi gość bez JS i z prefers-reduced-motion. Etykieta jest teraz taka sama jak nad konspektem niżej, więc obie części panelu numerują się tym samym głosem, a "za nami" mówi wygaszony kafelek kreatora. */ .hp-ciap-setup { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; margin: 2px 0 0; } .hp-ciap-setup-sum { font-size: 12px; color: #656B7E; min-width: 0; } .hp-ciap-outline { display: grid; gap: 9px; } .hp-ciap-outline ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .hp-ciap-outline li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 3px 10px; background: #FFFFFF; border: 1px solid #F0E4CE; border-radius: 11px; padding: 9px 12px; } .hp-ciap-outline-n { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.06em; color: var(--cia-ink); } .hp-ciap-outline-t { font-size: 13px; line-height: 1.4; color: #14162B; } /* Sekcja, która zapełnia lukę znalezioną w monitoringu — jedyny znacznik w tej liście, bo to jedyne miejsce, w którym oba produkty się spotykają. */ .hp-ciap-outline-tag { grid-column: 2; justify-self: start; font-family: 'IBM Plex Mono', monospace; /* 10px, nie 9,5px: przy body{zoom:.9} 9,5px schodzi na ekranie do 8,55px, czyli poniżej wszystkiego innego na stronie. Ta sama poprawka jest na etykietach mono. */ font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #4B4CD8; background: #EEF0FE; border: 1px solid #D6DAFB; border-radius: 999px; padding: 2px 8px; } /* Kreator siada pod tytułem jako pasek postępu, więc odstęp jak przy etykiecie. */ .hp-ciap .hp-ciap-wizard { margin: 0; } @media (max-width: 640px) { .hp-ciap-outline-t { font-size: 12.5px; } } /* --- ruch ------------------------------------------------------------------- * Ta sama umowa, co w home-v2.css: stan startowy istnieje WYŁĄCZNIE pod .is-armed, * którą dokłada skrypt, i tylko przy prefers-reduced-motion: no-preference. Bez JS * i przy zredukowanym ruchu serwer renderuje klatkę końcową i tak zostaje. * * Czasy są liczone od kliknięcia w lewym panelu, nie od wejścia sekcji w kadr. Lewy panel * to prawdziwy widżet v2.content-demo i opowiada swoje ~4,6 s (wczytuje 0–0,5, dopasowuje * 0,5–2,0, wybiera 2,0–2,75, przycisk "Pisz w ContentInAI →" wyskakuje 2,72 i siada ~3,12). * Wcześniej prawy panel był kompletny po ~1,4 s — cel docierał zanim źródło w ogóle wybrało * temat, a kolumna między nimi cały czas mówiła "jedno kliknięcie". Pełna tabela czasów stoi * przy bloku ruchu w home-v2.css. */ /* Inscenizacja linii konfiguracji (3480 ms), wierszy konspektu (3720–3990 ms) i przycisku * (3990 ms) stała tutaj i WYSZŁA w rundzie „naturalne rozwinięcie sekcji z home”. Powód i pomiary * stoją w bloku 6g na dole tego pliku: kremowy panel stał przez 3,5 s pusty, a to jest dokładnie * ta awaria, którą sekcja na home naprawiła rundą „karta nie może stać pusta”. Panel należy * teraz do stanu podstawowego, a rusza się w nim jedna rzecz — znacznik LUKA Z MONITORINGU, * czyli to, co naprawdę przyjechało kliknięciem z panelu obok. To miejsce zostaje puste * świadomie: reguly z odzyskanymi opóźnieniami wygrałyby z blokiem 6g (ten plik czyta się * dalej) i po cichu rozspójniły zegar sekcji. */ /* Ruch karty 03 miał tu własne nadpisania opóźnień (paski 1200 ms, pasek modeli 1480 ms, * modele 1620 ms), bo w poprzednim rozkładzie wszystkie trzy karty wjeżdżały razem i karta 03 * musiała odpychać się od sąsiadek ręcznie. Od rundy ruchu zegar sekcji jest jeden: każda * odsłona ma --cd (moment, w którym jej karta ZACZYNA MÓWIĆ — sama karta, od rundy "karta nie * może stać pusta", stoi od pierwszej klatki), a wszystko w jej wnętrzu liczy się od niego. * Nadpisania wyszły — pełna tabela czasów i cała mechanika stoją przy bloku ruchu w home-v2.css. * Gdyby wróciły tutaj, wygrałyby z tamtym blokiem (ten plik leży w dokumencie później) i cicho * rozspójniły trzy takty, więc to miejsce zostaje puste świadomie. */ /* --- 4. runda dopracowania: mniej mebli, więcej powietrza -------------------- * Właściciel obejrzał obie sekcje i poprosił o dopracowanie, nie o przebudowę. Kształt * zostaje; wyszły rzeczy, których widz nie potrzebuje, żeby odczytać kadr w trzy sekundy * (plakietki "Przykład", etykieta nad paskiem kroków, plakietka "tu jesteś", instrukcja * o przestawianiu sekcji, linia statusu, to samo zdanie powtórzone w trzech wierszach), * a miejsce po nich idzie w odstępy — bo druga prośba brzmiała "mniej wierszy, więcej * powietrza". Wszystko tutaj podnosi wyłącznie odstępy i wyrównania. */ /* Karty miały 13/14px wyściółki przy 14px promieniu — treść dotykała krawędzi. */ .hp-cia .hp-cia-card { padding: 16px 17px; } .hp-cia .hp-cia-editor-body { padding: 16px 17px; } .hp-cia .hp-cia-editor-bar { padding: 12px 17px; } /* Wiersze karty 01: po odjęciu powtarzanego "cytowany w" zostaje sama liczba, więc mogą oddychać. */ .hp-cia .hp-cia-cites { gap: 11px; } /* Karta 03: lista modeli wraca do jednego modelu na wiersz. W rundzie dopracowania stała się jedną linią, bo wtedy karta 03 była za chuda i każdy zaoszczędzony wiersz się liczył; teraz karta niesie ten sam komplet co karta 01, więc wysokość nie jest już walutą — a jedna linia w tej kolumnie NIE MIEŚCI SIĘ przewidywalnie. Zmierzone przy 1440: trzy pozycje zajmują 267px + 40px przerw = 307px na 317,8px szerokości wnętrza karty, czyli 10,8px zapasu. Tyle znika przy innym zaokrągleniu metryk pisma: przy devicePixelRatio 1 lista mieściła się w jednej linii, przy 2 łamała się na trzy i karta rosła o 54px — ta sama strona miała dwie wysokości na dwóch ekranach. Przy 1024 (263,2px wnętrza) jedna linia nie mieści się nigdy. Trzy wiersze są więc deterministyczne, a przy okazji czytelniejsze: nazwa, ptaszek, koniec. UWAGA: ten pomiar dotyczy KOLUMNY, czyli układu od 900px. Niżej karta jest szeroka na cały wiersz i jedna linia mieści się z zapasem — dlatego pasek modeli ma tam własny układ (zaraz pod spodem). Odstęp nad listą trzyma .hp-cia-cited (etykieta + lista), więc sama lista nie dokłada już marginesu. */ .hp-cia .hp-cia-models { gap: 9px; margin-top: 0; } /* Pasek modeli PONIŻEJ 900px. Karta jest tu szeroka na całą kolumnę (704px przy 768, 350px przy 390), a pasek zostawał wąskim słupkiem przy lewej krawędzi: przy 768 trzy nazwy zajmowały 106px z 668px paska, czyli 562 × 72px pustej karty, przy 390 — 212 × 72px. Nad nim trzy wiersze „nazwa | pasek | meta” biegną przez całą szerokość karty, więc urwanie się treści w jednej trzeciej widać natychmiast. Jedna gramatyka na wszystkie te szerokości: etykieta przy lewej krawędzi, modele przy prawej — tak jak wiersze wyżej mają nazwę przy lewej, a meta przy prawej. Różni je tylko to, czy modele stoją w rzędzie, czy w słupku: 700–899 w rzędzie. Pasek ma wtedy 32px zamiast 109px, czyli oddaje 77px z wysokości, którą karta 03 dołożyła tabletowi. Próg to 700, a nie 641: komplet w jednej linii to etykieta 157px + trzy modele z przerwami 342px + 24px odstępu = 523px, więc przy 641 (pasek 569px) zostaje 46px zapasu, a przy 700 (600px) — 77px. Obie etykiety, polska i angielska, mierzą po 157px, więc próg wypada tak samo w obu językach. ≤699 w słupku (trzy pozycje to 298px samego tekstu, a wnętrze karty przy 390 ma 318px — jedna linia „mieści się” na 10px zapasu, czyli nie mieści się wcale). Słupek stoi przy prawej krawędzi, więc pasek i tak spina obie krawędzie karty, a jest o 23px niższy (86px zamiast 109px) niż etykieta nad listą. Znaki modeli równają się do lewej krawędzi słupka, nie do prawej krawędzi karty — inaczej ikony stałyby w trzech różnych miejscach. Gdyby etykieta i słupek nie zmieściły się w jednej linii (bardzo wąska karta albo dłuższy ciąg), flex-wrap zrzuca słupek pod etykietę, czyli do układu sprzed tej rundy — nic się nie łamie. */ @media (max-width: 899px) { .hp-cia--row .hp-cia-cited { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; /* 16px, nie 24: ten odstęp decyduje, przy jakiej szerokości słupek zjeżdża pod etykietę. Przy 16px komplet potrzebuje 279px paska, czyli mieści się jeszcze przy oknie 360px. */ gap: 10px 16px; /* Odstęp nad paskiem po zdjęciu kreski (12 px z reguły bazowej to za mało TUTAJ, i tylko tutaj). W kolumnie od 900 px pasek stoi pod trzema wierszami biegnącymi przez całą szerokość karty i dostaje jeszcze zapas z rozciągnięcia, więc widać, że to osobna część. Poniżej 900 px karta jest szeroka na cały wiersz, pasek ma etykietę przy lewej krawędzi i modele przy prawej — czyli dokładnie rysunek wiersza „nazwa | meta" nad nim. Przy 12 px (wiersze mają 11 px przerwy) „Cytują Twój artykuł" czytało się jak czwarta marka na liście. 18 px to półtora odstępu wiersza: bez kreski, a widać, że lista się skończyła. Nadal o 10 px mniej niż przerwa, którą ten pasek miał wcześniej (14 + 13 + kreska). */ margin-top: 18px; } .hp-cia--row .hp-cia-cited > .hp-cia-mono { flex: 0 0 auto; } .hp-cia--row .hp-cia-models { flex: 0 0 auto; align-items: flex-start; } } @media (min-width: 700px) and (max-width: 899px) { .hp-cia--row .hp-cia-cited { align-items: center; gap: 10px 24px; } .hp-cia--row .hp-cia-models { flex-direction: row; flex-wrap: wrap; gap: 8px 22px; } } /* Panel na produkcie: w stopce została sama plakietka stanu (blok 10.9; do rundy P8a był tu przycisk), więc siada po prawej, jak w makiecie. */ .hp-ciap .hp-ciap-brief-foot { justify-content: flex-end; } /* Tu stały dwie reguły mostka: .hp-ciap-bridge { align-items: start } i rozciągnięcie kolumny przekazania na jego wysokość. Mostka nie ma — jego miejsce zajęła SCENA (.hp-ciap-stage, blok 10), na której panele są odsłonami, a nie sąsiadami. Równanie paneli przeniosło się do bloku 6f (klatka bazowa) i do skryptu (sekwencja: jedna wysokość dla obu odsłon), a kolumna przekazania stoi teraz poziomo NAD sceną, jako jej podpis, i nie ma czego rozciągać. Historia obu liczb — w bloku 6f. */ /* Powietrze w prawym panelu: po odjęciu etykiety kreatora, plakietki "tu jesteś", zdania o przestawianiu sekcji i linii statusu został sam konspekt, więc jego wiersze dostają odstępy, które wcześniej zjadały meble. (gap: 14px stał tu na .hp-ciap-panel. Od rundy „naturalne rozwinięcie” panel nie ma już własnych dzieci poza paskiem i ciałem — tę samą liczbę nosi teraz .hp-ciap-panel-body w bloku 6a, więc przerwa między tytułem, konfiguracją, kreatorem i konspektem jest ta sama, co była.) */ .hp-ciap .hp-ciap-outline { gap: 11px; } .hp-ciap .hp-ciap-outline ol { gap: 9px; } .hp-ciap .hp-ciap-outline li { padding: 11px 13px; } .hp-ciap .hp-ciap-setup { gap: 4px 9px; } /* Stopka sekcji na produkcie niosła dwa akapity — „Pętla się zamyka…” i zdanie o relacji obu produktów — więc miała własną kolumnę tekstu (.hp-ciap-foot-copy). Pierwszy akapit wyszedł na prośbę właściciela, więc kolumna straciła powód istnienia i wyszła razem z nim. Zostało jedno zdanie i CTA, czyli dokładnie ten sam skład, co w stopce na home — i dlatego stopka ma od tej rundy te same liczby (blok 6f niżej). */ @media (max-width: 640px) { .hp-cia .hp-cia-card { padding: 14px 15px; } .hp-cia .hp-cia-editor-body { padding: 14px 15px; } .hp-cia .hp-cia-editor-bar { padding: 11px 15px; } .hp-ciap .hp-ciap-foot .hp-cia-note { text-align: left; } } /* --- 5. runda „delikatne kreski" — trzy karty, jedna gramatyka --------------- * Właściciel obejrzał sekcję na żywo: „w sumie wizualnie bym tutaj odrobine poprawil, moze dal * jakies delikatnie kreski albo cos oddzielajacego zapytanie AI do wynikow itp? (…) 02 — moze bez * logo, a pokazac bardziej, ze to jest edytor? I jakos wizualnie to SEO / GEO do lewej i prawej * dziwnie — to musi byc obok siebie. 03 — moze modele obok siebie? Ale wazne, zeby boxy byly * 1 wysokosci. (…) nie zepsuj czystosci / przejrzystosci — w sensie nie zapchajmy iloscia * informacji itp." * * Cała runda ODEJMUJE albo PRZESTAWIA. Nie dochodzi ani jedno zdanie, ani jedna liczba, ani jedna * plakietka; wychodzi znak słowny z karty 02 i różowe pudełko wniosku z karty 01, a trzy kreski, * które dochodzą, są włosowe i każda zastępuje domyślanie się. * * DIAGNOZA. Karta 02 miała pasek głowy (kremowy, zamknięty kreską), karty 01 i 03 nie miały nic: * etykieta mono, prompt i pierwszy pasek marki szły jednym ciągiem, w tym samym odstępie, na tym * samym białym tle. Zmierzone przy 1440 przed zmianą: od dna promptu do środka paska „Adidas" * 22,4 px, a od dna etykiety mono do dna promptu 21,6 px — czyli przerwa MIĘDZY zapytaniem * a wynikami była co do piksela taka sama jak przerwa WEWNĄTRZ zapytania. Oko nie miało po czym * poznać, gdzie kończy się pytanie, a zaczyna odpowiedź. * * ODPOWIEDŹ. Wszystkie trzy karty czytają się teraz tak samo: PASEK GŁOWY („co to za widok" * i „na czym") na jaśniejszym tle, zamknięty włosową kreską, a pod nim CIAŁO z wynikami. * Karta 02 miała ten pasek od początku — 01 i 03 dostają jego neutralną wersję. * Druga kreska zamyka wyniki i otwiera PUENTĘ karty: wniosek „Luka:" w 01 i pasek modeli w 03. * Ta sama kreska w obu, ten sam odstęp, ta sama pozycja — bo te dwie karty są jednym zdjęciem * przed i po i wszystko musi w nich padać w tym samym miejscu. * * CZEGO TU NIE MA. Trzeciej kreski w karcie 02 (nad pierścieniami) — i to jest świadome. * Mierniki SEO/GEO nie są osobnym zdaniem o dokumencie, tylko jego ODCZYTEM, a karta 02 ma już * dwie rzeczy, których karty 01 i 03 nie mają: kremowe tło i pomarańczową ramkę. Kreska nad * pierścieniami zrobiłaby z tej karty trzy pudełka w pudełku. Pierścienie odcinają się teraz * czym innym — tym, że stoją w jednej, zwartej parze (niżej). * Nie ma też pudełka pod wnioskiem „Luka:" w karcie 01 (było: różowe tło #FDF1F0, promień 9 px, * 8-10 px wyściółki). Właściciel prosił o „delikatnie kreski", a nie o pudełka w pudełkach; przy * kresce nad puentą różowe tło mówiło to samo drugi raz i głośniej. Zdanie zostaje czerwone * (#B42318, 6,0:1 na bieli), czyli sygnał zostaje, a karta traci jedno pudełko i 16 px. * ========================================================================== */ /* 5a. PASEK GŁOWY KART 01 i 03 ------------------------------------------------ Karta przestaje mieć własną wyściółkę i dzieli się na pasek i ciało — dokładnie tak, jak od początku dzieli się karta 02 (.hp-cia-card.is-editor: padding 0, pasek 12-17, ciało 16-17). overflow: hidden, bo tło paska ma wejść pod promień karty; cień karty jest zewnętrzny, więc nic nie traci. Jaśniejsze tło zamiast kreski samej w sobie: sama kreska dzieli, ale nie mówi, KTÓRA strona jest pytaniem — jaśniejsze pole mówi to bez ani jednego słowa. Kontrast tła do bieli karty jest celowo minimalny (1,0425:1) — ma się odczytać jako inny grunt, a nie jako drugi kafelek. Kreska #EBEDF2 jest o stopień jaśniejsza od obrysu karty (#DEE0E8): wewnątrz karty nie może być mocniejsza niż jej krawędź. Odcień jedzie tokenem --mkt-surface (#FAFAFC, blok „podłoża” w css/marketing.css), a nie własnym #F9FAFC. Te dwa kolory różnią się jednym punktem kanału R (249 wobec 250) i niczym więcej: kontrast MIĘDZY NIMI to 1,0018:1, a do bieli karty 1,0444:1 wobec 1,0425:1 — pasek wygląda tak samo, a strona przestaje nieść szósty prawie-biały tylko po to, żeby dwa paski kart miały własny. To NIE jest wnętrze makiety widżetu (tam #F7F8FE zostaje) — to pasek realnej karty sekcji, zmierzone 348x59 px na /pl i na /, po dwie sztuki, więc należy do rodziny podłóż. Poprzedni komentarz podawał tu „1,02:1” — pomiar tego nie potwierdza. */ .hp-cia--row .hp-cia-card:not(.is-editor) { padding: 0; overflow: hidden; } .hp-cia--row .hp-cia-card-bar { padding: 12px 17px; background: var(--mkt-surface, #FAFAFC); border-bottom: 1px solid #EBEDF2; } /* 10 → 6 px: w pasku etykieta i prompt są JEDNĄ rzeczą (widok i jego zapytanie), więc trzymają się bliżej siebie niż paska trzyma się treść pod nim. */ .hp-cia--row .hp-cia-card-bar .hp-cia-prompt { margin-top: 6px; } .hp-cia--row .hp-cia-card-body { padding: 13px 17px 16px; display: flex; flex-direction: column; /* Od 900 px karta jest kolumną flex i to ciało przejmuje jej zapas — mechanika równania wierszy kart 01 i 03 (flex: 1 1 0 na liście i na puencie) została o poziom niżej i działa bez zmian, bo tamte reguły są zapisane jako potomkowie karty. */ flex: 1 1 auto; min-height: 0; } /* Odstęp nad listą trzyma teraz wyściółka ciała — jedna liczba na jedną przerwę. */ .hp-cia--row .hp-cia-card-body .hp-cia-cites { margin-top: 0; } /* 5b. KRESKA NAD PUENTĄ (01 i 03) -------------------------------------------- Puenta karty 01 to wniosek „Luka:" z przyciskiem przekazania, puenta karty 03 to pasek „Cytują Twój artykuł" — oba siedzą przy dolnej krawędzi i oba są tym, po co ta odsłona jest (to o nie pyta bramka odsłony w skrypcie sekcji). Kreska w obu jest ta sama i w tym samym miejscu, bo karty 01 i 03 muszą mieć tę samą kość. Poprzednia runda zdjęła kreskę znad paska modeli z powodu WYSOKOŚCI (karta 03 była wtedy najwyższa po karcie 02) i dlatego, że kreskę miały wtedy dwie karty z trzech. Oba powody zniknęły: pasek modeli oddał 3 wiersze na rzecz jednego (5d), a kreskę mają teraz wszystkie trzy karty — tyle że w karcie 02 jest nią dolna krawędź paska dokumentu. */ .hp-cia--row .hp-cia-close, .hp-cia--row .hp-cia-cited { /* Ta sama kreska i ten sam kolor, co pod paskiem głowy — w całej sekcji jest jedna kreska wewnętrzna (#EBEDF2, o stopień jaśniejsza od obrysu kart #DEE0E8) i jedna krawędź karty. margin-top stoi tutaj, a nie w bloku @media (min-width: 900px): poniżej 900 px karta 01 nie miała go wcale, więc jej kreska kleiła się do ostatniego paska, a kreska karty 03 miała nad sobą 18 px. Obie karty muszą łamać się w tym samym miejscu. */ margin-top: 12px; border-top: 1px solid #EBEDF2; padding-top: 12px; } /* Wniosek „Luka:" traci pudełko (powód w nagłówku bloku) i zostaje samym zdaniem. Margines zostaje po stronie .hp-cia-close, żeby jedna liczba trzymała jedną przerwę; od 900 px oba marginesy auto z reguły wyżej (.hp-cia-close .hp-cia-gap, specyficzność 0,3,0) dalej rozdzielają zapas po połowie i ta reguła im nie wchodzi w drogę. */ .hp-cia--row .hp-cia-gap { margin: 0; padding: 0; background: none; border-radius: 0; } /* 5c. PIERŚCIENIE SEO i GEO — JEDNA PARA ------------------------------------- Właściciel: „SEO / GEO do lewej i prawej dziwnie — to musi byc obok siebie". Stało tam justify-content: space-between, czyli dwa mierniki rozpięte na całą szerokość karty: zmierzone przy 1440 — 82 przy lewej krawędzi, 84 przy prawej, 159 px pustego pola między nimi. Dwie liczby w takiej odległości nie czytają się jako para, tylko jako dwa niezwiązane odczyty. Teraz stoją obok siebie jako jeden blok, wyśrodkowany pod tekstem artykułu, a między nimi jest kreska — ten sam gest, którym pasek edytora oddziela tytuł od tekstu. Space-between był tam po to, żeby po odjęciu podpisu nie zostawało 134 px pustego dna po prawej stronie karty; wyśrodkowanie rozwiązuje to samo bez rozrywania pary — powietrze jest po obu stronach, więc czyta się jako odstęp, a nie jako dziura (zmierzone po zmianie: para ma 196,9 px, czyli 61 px powietrza z każdej strony przy 1440 i 30,7 px przy 1024). */ /* Kreska stoi WYŁĄCZNIE tam, gdzie para leży w poziomie (od 900 px i na telefonie). W paśmie 641–899 px mierniki są pionowym słupkiem przy prawej krawędzi ciała edytora i mają tam własną kreskę — border-left całego słupka. */ /* 5d. TRZY MODELE OBOK SIEBIE (karta 03) -------------------------------------- Właściciel: „03 — moze modele obok siebie? Ale wazne, zeby boxy byly 1 wysokosci". Trzy pozycje „znak · nazwa · ptaszek" w jednej linii NIE MIESZCZĄ SIĘ w kolumnie karty — zmierzone: 296,7 px samej treści plus przerwy, przy 353,1 px wnętrza karty (1440) jeszcze tak, przy 292,4 px (1024) już nie, a przy 900 px wnętrze ma 215,3 px. Dlatego pozycja zmienia KSZTAŁT, a nie rozmiar: ptaszek przenosi się na znak modelu jako plakietka (jest werdyktem o tym modelu, więc nic nie traci), a nazwa schodzi pod znak. Trzy kafelki mierzą wtedy 58,9 / 64,4 / 44,4 px — 167,7 px razem, czyli mieszczą się w jednym rzędzie na KAŻDEJ szerokości, na której karty stoją w kolumnach. Rząd jest wyśrodkowany, tak samo jak para pierścieni w karcie 02 — obie karty zamykają się tym samym gestem, a rozpięcie na całą szerokość byłoby dokładnie tym, na co właściciel narzekał piętro wyżej. „Boxy 1 wysokosci": pasek modeli oddał 51 px, więc puenta karty 03 mierzy tyle samo, co puenta karty 01 (wniosek + przycisk) — inaczej zapas z wiersza siatki rozlałby się w karcie 03 w jedną dziurę nad paskiem, a wiersze obu kart zeszłyby z tych samych linii. Pomiary po zmianie stoją w raporcie rundy. PONIŻEJ 900 px pozycja zostaje pozioma („znak z plakietką · nazwa"): tam karta jest szeroka na cały wiersz, pasek ma etykietę przy lewej krawędzi i modele przy prawej, a kafelek z nazwą pod znakiem podniósłby ten pasek o 18 px na tablecie i o 54 px na telefonie. (NIEAKTUALNE od rundy H7: w układzie kompaktowym kafelek jest pionowy przy każdej szerokości — blok 9.7. Modele stoją tam w jednym rzędzie także na telefonie, więc kafelek kosztuje 22 px, a nie 54.) */ .hp-cia--row .hp-cia-model-mark { position: relative; display: inline-flex; flex: 0 0 auto; } /* Plakietka na znaku: biały pierścień odcina ją od samego znaku, żeby czytała się jako naklejka NA logo, a nie jako jego część. 11 px to najmniejszy krążek, na którym ptaszek 9 px jeszcze ma światło; kolory bez zmian (#E3F3EA / #276A4D, 4,8:1). */ .hp-cia--row .hp-cia-model .hp-cia-check { position: absolute; right: -4px; bottom: -4px; width: 11px; height: 11px; box-shadow: 0 0 0 1.5px #FFFFFF; } /* 5e. PASEK DOKUMENTU W KARCIE 02 -------------------------------------------- Znak słowny wyszedł (powód przy makiecie w partialu), a tytuł dostaje wagę NAZWY DOKUMENTU: ciemny i o pół stopnia cięższy, czyli tak, jak wygląda w prawdziwym pasku ContentInAI. Ołówek przed nim mówi, że ten tytuł da się pisać. 12,5px/500 w #14162B to 15,8:1 — tytuł był dotąd #4C5163 (8,0:1) i czytał się jak podpis pod logo. */ .hp-cia--row .hp-cia-editor-mark { display: inline-flex; flex: 0 0 auto; margin-top: 1px; color: var(--cia-ink); } /* Ciemny, ale w tej samej wadze, co dotąd. 12,5px/400 w #14162B to 15,8:1; tytuł był #4C5163 (8,0:1) i przy znaku słownym czytał się jak podpis pod logo, a nie jak nazwa dokumentu. Waga 500 była tu przez chwilę i wyszła z powodu ŁAMANIA: ciąg rośnie wtedy z 288,9 do 295,6 px przy 296 px wolnego miejsca w pasku (1440), czyli tytuł spadał na drugą linię i pasek rósł o 17 px — a to on trzyma wysokość całego wiersza kart. Kolor sam wystarczy: obok akapitów w #656B7E i etykiet mono tytuł jest najciemniejszą rzeczą w karcie. */ .hp-cia--row .hp-cia-editor-title { color: #14162B; } /* 10 → 8 px: ołówek jest znacznikiem tytułu, nie osobnym elementem paska, a te dwa piksele idą w zapas ciągu tytułu (289 px treści na 298 px wolnego przy 1440 i 1920). */ .hp-cia--row .hp-cia-editor-bar { gap: 8px; } /* 5f. AKCJE AI JAKO PŁYWAJĄCY PASEK NARZĘDZI --------------------------------- W ContentInAI zaznaczenie fragmentu otwiera pod nim pasek narzędzi, a w nim siedzą „Expand selected text (AI)", „Shorten selected text (AI)" i „Change tone of selected text (AI)" — czyli dokładnie te trzy akcje, które tu stoją (public/images/content-creation/hero-1.webp). Dotąd były trzema osobnymi kafelkami z własnym obrysem, leżącymi na podświetleniu. Teraz są jednym paskiem: biały, włosowy obrys, płytki cień, a między pozycjami włosowe przegródki. To ODEJMOWANIE pudełek — trzy ramki zamieniają się w jedną — i jednocześnie najmocniejszy dowód, że to edytor, a nie obrazek z tekstem. Pasek należy do stanu podstawowego i stoi pusty do swojego taktu, więc karta nie ma w tym miejscu białej plamy, tylko slot. ETYKIETY KAFELKÓW to SKRÓTY tamtych trzech akcji, nie ich pełne brzmienie: PL „Rozwiń · Skróć · Zmień ton", EN „Expand · Shorten · Tone". Trzecia pozycja po angielsku jest od tej rundy sama nazwą rzeczy, a nie zdaniem („Change tone" → „Tone"), bo to jedyny ciąg tej sekcji, którego długość decydowała o wysokości całego rzędu kart — pomiary przy 'editor_actions' w lang/en i w bloku 8 na dole tego pliku. */ .hp-cia--row .hp-cia-tools { width: max-content; max-width: 100%; /* 9 → 7 px nad paskiem i 2 px wyściółki w środku: cały blok „zaznaczenie + narzędzia" mierzy dokładnie tyle, co trzy osobne kafelki przedtem (34 px), więc karta 02 nie rośnie ani o piksel, a pasek siedzi bliżej zaznaczenia, z którego wyszedł — tak jak w prawdziwym edytorze. */ margin-top: 7px; gap: 0; padding: 2px; background: #FFFFFF; border: 1px solid #F0E2C8; border-radius: 9px; box-shadow: 0 6px 14px -9px rgba(20, 22, 43, 0.5); } .hp-cia--row .hp-cia-tool { border: 0; background: transparent; border-radius: 6px; padding: 3px 8px; } .hp-cia--row .hp-cia-tool + .hp-cia-tool { box-shadow: inset 1px 0 0 #F4E7D3; } @media (min-width: 900px) { /* Para pierścieni: wyśrodkowana, z kreską w środku, ZAWSZE w jednej linii. width: auto i zero wyściółki zostają z poprzedniej rundy — pion słupka 641–899 px ma własne reguły w regule bazowej. ---------------------------------------------------------------------------------------- JEDNA MIARA NA CAŁĄ PARĘ. Wcześniej pierścień (46 px), przerwa pierścień↔etykieta (10 px) i rynienka kreski (20 + 1 + 20 px) były trzema niezależnymi liczbami dobranymi pod kadr 1440 px. Para potrzebuje 2 × (pierścień + przerwa + etykieta) + 2 × rynienka + kreska, czyli 203 px przy tych liczbach, a wnętrze karty 02 w trzech kolumnach mierzy (szerokość okna − 152) / 3 − 70 — 179,3 px przy 900, 199,3 px przy 960, 202,7 px przy 970. Trzy liczby stały w miejscu, czwarta rosła z oknem, więc od 900 do 971 px para nie mieściła się w karcie i schodziła do dwóch wierszy (defekt: kreska wisiała z boku dolnego wiersza zamiast stać między miernikami). Właściciel prosił dokładnie o odwrotność: „to SEO / GEO do lewej i prawej dziwnie — to musi być obok siebie”. Od tej rundy wszystkie trzy wymiary są ułamkami JEDNEJ miary --cia-meter (średnicy pierścienia): przerwa = /4,6, rynienka = /2,3. Przy 46 px daje to dokładnie 10 i 20 px, czyli kadr 1000 px+ wygląda co do piksela tak jak dotąd; a gdy miara maleje, maleje razem z nią cała para — proporcje zostają, tylko skala schodzi. Pasmo 900–999 px podmienia jedną wartość (blok zaraz niżej) i to wystarczy. */ .hp-cia--row .hp-cia-scores { --cia-meter: 46px; justify-content: center; gap: 0; } /* svg ma width/height="46" w atrybutach, więc bez tych dwóch linii pierścień nie schodzi razem z miarą. flex: 0 0 auto trzyma go okrągłym — przy nowrap to on jako pierwszy dostałby ściśnięcie, gdyby kiedyś zabrakło miejsca. */ .hp-cia--row .hp-cia-ring { flex: 0 0 auto; width: var(--cia-meter, 46px); height: var(--cia-meter, 46px); } .hp-cia--row .hp-cia-ring svg { width: 100%; height: 100%; } .hp-cia--row .hp-cia-score { gap: calc(var(--cia-meter, 46px) / 4.6); } /* „SEO" i „GEO" to trzy znaki mono — nie ma w nich miejsca na złamanie, więc gdyby kiedyś doszedł dłuższy podpis, ma wyjechać widocznie, a nie po cichu rozbić wiersz. */ .hp-cia--row .hp-cia-score-label { white-space: nowrap; } .hp-cia--row .hp-cia-score + .hp-cia-score { border-left: 1px solid #F1E6D3; padding-left: calc(var(--cia-meter, 46px) / 2.3); margin-left: calc(var(--cia-meter, 46px) / 2.3); } /* Trzy kafelki w jednym rzędzie. flex-wrap zostaje jako bezpiecznik: gdyby kiedyś doszła czwarta nazwa albo dłuższy ciąg, rząd zejdzie do dwóch linii zamiast wyjechać z karty. */ .hp-cia--row .hp-cia-cited { gap: 10px; } .hp-cia--row .hp-cia-models { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 16px; } .hp-cia--row .hp-cia-model { flex-direction: column; align-items: center; gap: 4px; text-align: center; } /* W kafelku znak niesie całą wagę pozycji (nazwa jest pod nim, nie obok), więc wraca do 18 px — domyślnej wielkości .mkt-llm w siedmiu sąsiednich widżetach v2. Przy 15 px, dobranych pod wiersz „znak · nazwa", kafelek czytał się jak ikonka z podpisem. */ .hp-cia--row .hp-cia-model .mkt-llm { width: 18px; height: 18px; } } /* PASMO 900–999 px. Poniżej 1000 px nie działa body { zoom: .9 } (marketing.css), więc kolumna karty jest tu NAPRAWDĘ węższa niż w kadrze 1024 px: 249,3 px przy 900 wobec 328,6 px przy 1024. Miara pary jedzie więc z oknem: 6vw − 20px, czyli 34 px przy 900 i 39,9 px przy 999. Prosta jest CELOWO płaska — miernik ma trzymać ten sam udział w karcie, a nie dobijać do 46 px na samym progu. Udział wychodzi równy: 34/179,3 = 19,0% przy 900, 39,9/212,3 = 18,8% przy 999, 46/258,4 = 17,8% przy 1024. Na progu zoomu pierścień idzie 39,9 → 41,4 px urządzenia (46 px razy 0,9), czyli 1,5 px w tę samą stronę, w którą rośnie tam karta — skoku nie widać. clamp trzyma oba końce, gdyby reguła kiedyś wyszła poza swoje pasmo; przy oknie z klasycznym paskiem przewijania 100vw jest o ~15 px szersze niż próg @media, co daje pierścień większy o 0,9 px i zapas pary wciąż nie mniejszy niż 13 px. Zmierzone po zmianie, PL i EN co do dziesiątej części piksela tak samo (szerokość pary / wnętrze karty / zapas): 900 163,3 / 179,3 / 16,0 970 177,1 / 202,7 / 25,6 920 167,2 / 186,0 / 18,8 999 182,9 / 212,3 / 29,4 940 171,2 / 192,7 / 21,5 1024 201,0 / 258,4 / 57,4 960 175,2 / 199,3 / 24,1 1440 201,0 / 319,1 / 118,1 Przed zmianą para potrzebowała 203 px na KAŻDEJ z tych szerokości, więc do 971 px nie mieściła się i schodziła do dwóch wierszy. Od 1000 px nic się nie zmieniło co do piksela, a trzy karty rzędu dalej mają równo 0,0 px różnicy wysokości i wiersze kart 01 i 03 dalej stoją na tych samych liniach (0,0 px) na każdej z mierzonych szerokości. */ @media (min-width: 900px) and (max-width: 999px) { .hp-cia--row .hp-cia-scores { --cia-meter: clamp(34px, calc(6vw - 20px), 46px); } } @media (max-width: 899px) { /* Kreska nad paskiem modeli zastępuje 18 px samego powietrza, którym ten pasek odcinał się od listy, kiedy kreski nie miał. 12 px + kreska + 12 px czyta się tak samo jak w karcie 01. */ .hp-cia--row .hp-cia-cited { margin-top: 12px; } } @media (max-width: 640px) { /* Karta bez własnej wyściółki (5a) — telefonowa wersja paska i ciała. */ .hp-cia--row .hp-cia-card:not(.is-editor) { padding: 0; } .hp-cia--row .hp-cia-card-bar { padding: 11px 15px; } .hp-cia--row .hp-cia-card-body { padding: 12px 15px 14px; } /* Ta sama para, co w kolumnie: obok siebie, z kreską, wyśrodkowana. Karta ma tu całą szerokość ekranu, więc rozpięcie na space-between odsuwało oba mierniki od siebie o 159 px. */ .hp-cia--row .hp-cia-scores { justify-content: center; gap: 0; } .hp-cia--row .hp-cia-score + .hp-cia-score { border-left: 1px solid #F1E6D3; padding-left: 18px; margin-left: 18px; } } /* --- 6. runda „NATURALNE ROZWINIĘCIE SEKCJI Z HOME” (tylko strona produktu) ------ * Właściciel, oglądając /pl/produkt: „tutaj wizualka nie do końca mi się podoba — zróbmy, żeby * cała ta sekcja była naturalnym rozwinięciem tej ze strony głównej (…) te co dokładnie * contentinai — fajne. Nie podoba mi się to «pętla się zamyka» — myślę, żeby to usunąć”, * przy stałym zastrzeżeniu z poprzedniej rundy: „nie zapchajmy ilością informacji”. * * Runda NIE dokłada ani jednego zdania, ani jednej plakietki, ani jednego wiersza. Sekcja ma ten * sam kształt, co miała (nagłówek → mostek dwóch paneli → pasek „Co dokłada ContentInAI” → * stopka z CTA). Zmienia się to, czym ten kształt jest NARYSOWANY: sekcja bierze gramatykę kart * z home, zamiast mieć własną. * * CO SEKCJA BRAŁA OD HOME PRZED TĄ RUNDĄ: kolor (--cia-*), typografię głowy (kicker, h2 z drugą * połówką w pomarańczu, lead), etykiety mono i CTA. To wszystko. Kadry — czyli to, na co widz * patrzy przez 90% czasu — były rysowane inaczej. Zmierzone przed zmianą: * promień kart home 14 px produkt 18 px * wyściółka home pasek 12-17 + ciało 13-17-16 produkt jeden blok 16 px * pasek głowy home ma go w każdej z trzech kart produkt: w prawym panelu bez * gruntu i bez kreski, w lewym etykieta wisząca NAD panelem * zagnieżdżenie home: karta → treść (2 poziomy) * produkt: panel → ramka widżetu → karta rekomendacji (3 poziomy) * cień kart home 0 16px 34px -30px / 0 20px 44px -32px * produkt 0 18px 40px -34px / 0 22px 46px -34px * kreska stopki home #DEE0E8 (jak obrys kart), 54/26 px * produkt #EDEEF2, 34/24 px * Każda z tych różnic z osobna jest drobna; razem robią dwie sekcje o tym samym temacie, * narysowane dwiema różnymi rękami. Blok niżej zdejmuje wszystkie. * * CZEGO TU CELOWO NIE MA: * · belek odsłon „01 BrandinAI … / 02 ContentInAI …” znad paneli. Na home numerują one TRZY * takty jednej opowieści (luka → artykuł → dowód); tu są dwa panele jednego przekazania, * a drugi zestaw numerów 01/02 na tej samej stronie mówiłby o czymś innym niż numery na * home. Kto jest kim, mówią paski głowy, które już stoją — bez ani jednego nowego słowa. * · trzeciej karty („BrandinAI sprawdza efekt”). To jest puńta sekcji na home i to ona stała * tu słowami w akapicie „Pętla się zamyka…”, który właściciel kazał zdjąć. Strona produktu * nie ma jej powtarzać — ma iść o piętro głębiej w jednym miejscu, w którym oba produkty * naprawdę się stykają. * · zmian w pasku „Co dokłada ContentInAI”. Właściciel wskazał go jako to, co mu się podoba * („te co dokładnie contentinai — fajne”), a jego kremowa kreska 2 px to ten sam język * koloru, co na home: pomarańcz znaczy ContentInAI. Rusza się w nim wyłącznie zegar (6g). * ========================================================================== */ /* 6a. PANEL = KARTA Z HOME: PASEK GŁOWY I CIAŁO ------------------------------- Dokładnie ta sama kość, co w bloku 5a: karta nie ma własnej wyściółki, tylko dzieli się na pasek („co to za widok”, na jaśniejszym gruncie, zamknięty włosową kreską) i ciało (wyniki). Liczby są co do piksela te same, co na home — gdyby były „podobne”, różnica czytałaby się jako niedbalstwo, a nie jako wariant. overflow: hidden, bo tło paska ma wejść pod promień panelu. */ .hp-ciap .hp-ciap-panel { padding: 0; gap: 0; overflow: hidden; border-radius: 14px; box-shadow: 0 16px 34px -30px rgba(20, 22, 43, 0.55); } .hp-ciap .hp-ciap-panel.is-cia { box-shadow: 0 20px 44px -32px rgba(248, 163, 42, 0.8); } /* Neutralny pasek = pasek kart 01 i 03 na home (--mkt-surface / #EBEDF2, kontrast do bieli 1,0425:1: ma się odczytać jako inny grunt, a nie jako drugi kafelek). Kremowy = pasek dokumentu karty 02 (#FFF7EA / --cia-line). Ta sama para, te same kolory, ta sama wyściółka. Neutralny odcień szedł tu własnym #F9FAFC — szóstym prawie-białym na stronie, różnym od --mkt-surface o jeden punkt kanału R (kontrast między nimi 1,0018:1, czyli nic). Panel ma zmierzone 488x36 px na /pl/produkt, stoi na białej karcie i jest paskiem realnej sekcji, a nie wnętrzem makiety widżetu, więc należy do rodziny podłóż i jedzie jej tokenem. Kremowy zostaje własny: #FFF7EA to nie prawie-biały, tylko znacznik ContentInAI (1,0636:1 do bieli, ciepły — różnica jest w odcieniu, nie w jasności). */ .hp-ciap .hp-ciap-panel-bar { padding: 12px 17px; background: var(--mkt-surface, #FAFAFC); border-bottom: 1px solid #EBEDF2; } .hp-ciap .hp-ciap-panel.is-cia .hp-ciap-panel-bar { background: #FFF7EA; border-bottom-color: var(--cia-line); } .hp-ciap .hp-ciap-panel-body { padding: 13px 17px 16px; display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; min-height: 0; } /* 6b. WIDŻET BEZ WŁASNEJ RAMKI ------------------------------------------------ Były tu trzy pudełka jedno w drugim: obrys panelu (18 px), obrys ramki widżetu (12 px) i obrys otwartej rekomendacji w środku (11 px). Na home głębiej niż „karta → treść” nie schodzi nic, a runda „delikatne kreski” (blok 5) zdjęła nawet różowe pudełko pod wnioskiem „Luka:” — „właściciel prosił o delikatnie kreski, a nie o pudełka w pudełkach”. Środkowa ramka wychodzi: krawędzią ekranu jest obrys panelu, a że to zakładka „Tworzenie treści”, mówi pasek głowy nad nią. Wyściółka przenosi się z widżetu na ciało panelu, żeby oba panele miały tę samą krawędź wewnętrzną: przedtem treść lewego panelu miała 16 + 1 + 12 = 29 px odsunięcia od obrysu panelu, a prawego 16 px — i oba stoją obok siebie. Teraz oba mają 17 px (15 px na telefonie), czyli dokładnie tyle, co ciało karty na home. Widżet nie zmienia przez to KUBKA @container (progi .mkt-cd: 380, 470 i 620 px). Zmierzone szerokości pudełka treści .mkt-cd, przed → po: 390 290 → 318 px (oba ≤ 380) 768 644 → 668 px (oba ≥ 620) 1024 393 → 417 px (oba w 381–470) 1440 484 → 508 px (oba w 471–619) 1920 484 → 508 px (oba w 471–619) Widżet zyskuje po 24 px szerokości w każdym oknie i nie zmienia ani jednego stopnia pisma. */ .hp-ciap .hp-ciap-panel.is-bia .hp-ciap-panel-body { padding: 0; } .hp-ciap .hp-ciap-widget { border: 0; border-radius: 0; background: transparent; } .hp-ciap .hp-ciap-widget .mkt-widget.is-compact .mkt-widget-body { padding: 13px 17px 16px; } /* 6c. PRAWY PANEL: RÓWNE ODSTĘPY, JEDNA KOLUMNA ------------------------------ Odstępy wnętrza trzymał gap panelu (14 px) plus własny margines artykułu i linii konfiguracji. Teraz trzyma je gap ciała — jedna liczba na jedną przerwę, tak jak w karcie 02 na home. */ .hp-ciap .hp-ciap-panel-body .hp-ciap-article { margin: 0; } .hp-ciap .hp-ciap-panel-body .hp-ciap-setup { margin: 0; } /* 6d. STOPKA SEKCJI = STOPKA Z HOME ------------------------------------------- Po zdjęciu akapitu „Pętla się zamyka…” zostaje dokładnie ten sam skład, co na home: jedno zdanie o relacji obu produktów przy lewej krawędzi, CTA przy prawej, nad włosową kreską. Liczby te same, co w .hp-cia--row .hp-cia-row-foot: 54/26 px i kreska #DEE0E8 (ten sam kolor, co obrys paneli — #EDEEF2 było o stopień jaśniejsze od wszystkiego, co kreśli tę sekcję). */ .hp-ciap .hp-ciap-foot { margin: 54px 0 0; padding: 26px 0 0; border-top: 1px solid #DEE0E8; gap: 18px 40px; } .hp-ciap .hp-ciap-foot .hp-cia-note { margin: 0; max-width: none; } /* 6e. KOLUMNA PRZEKAZANIA ------------------------------------------------------ Zdanie w kolumnie między panelami robi to samo, co opis pod belką odsłony na home (.hp-cia-stage-text): mówi, co się właśnie dzieje. Dostaje więc jego stopień i interlinię (12 → 12,5 px, 1,45 → 1,5), a nie własne. Więcej nie może dostać: kolumna ma 151 px, a przy 13 px „projekt i rekomendacja idą razem z Tobą” łamie się na pięć linii zamiast czterech. */ .hp-ciap .hp-ciap-join-note { font-size: 12.5px; line-height: 1.5; } /* 6f. PANELE RÓWNEJ WYSOKOŚCI ------------------------------------------------- Właściciel przy home: „ale ważne, żeby boxy były 1 wysokości” — i tam trzy karty kończą się w jednej linii. Tu panele równały się górą (align-items: start), bo przy równaniu dołem nad przyciskiem „Zatwierdź konspekt” zostawało ~105 px pustego kremu. Ta przyczyna zniknęła razem z blokiem 6a: różnica własnych wysokości obu paneli spadła do kilkudziesięciu px, a zapas ma teraz gdzie pójść — rozdaje go lista konspektu, dokładnie tak, jak na home zapas karty rozdaje lista wierszy („zapas listy idzie w przerwy między wierszami — wiersze oddychają, zamiast zostawiać jedną dziurę”). Pomiary po zmianie — w raporcie rundy. */ @media (min-width: 900px) { .hp-ciap .hp-ciap-stage { align-items: stretch; } /* auto 1fr, nie auto auto: .hp-ciap-outline jest siatką o dwóch wierszach (etykieta, lista), a przy domyślnym `auto auto` rozciąganie rozdawało zapas OBU wierszom po równo — mono etykieta „Konspekt do zatwierdzenia” odpływała od pierwszego wiersza listy o kilkanaście px bez powodu. Zapas ma iść wyłącznie do listy. */ .hp-ciap .hp-ciap-outline { flex: 1 1 auto; min-height: 0; grid-template-rows: auto 1fr; } .hp-ciap .hp-ciap-outline ol { flex: 1 1 auto; justify-content: space-between; } } @media (max-width: 640px) { /* Telefonowa wersja paska i ciała — te same liczby, co w karcie na home (blok 5, @640). */ .hp-ciap .hp-ciap-panel-bar { padding: 11px 15px; } .hp-ciap .hp-ciap-panel-body { padding: 12px 15px 14px; } .hp-ciap .hp-ciap-panel.is-bia .hp-ciap-panel-body { padding: 0; } .hp-ciap .hp-ciap-widget .mkt-widget.is-compact .mkt-widget-body { padding: 12px 15px 14px; } .hp-ciap .hp-ciap-foot { margin-top: 34px; padding-top: 22px; } } /* 6h. PASMO 900–999 px: LEWY PANEL DOSTAJE Z POWROTEM TO, CO CHOWAŁ ------------ * To jest DRUGA POŁOWA bloku 6f i domknięcie tej samej awarii, którą home zamknęła rundą „KARTA * NIE MOŻE STAĆ PUSTA”. 6f zrównał panele (align-items: stretch) i rozdał zapas PRAWEGO panelu * liście konspektu. Lewemu panelowi nikt zapasu nie rozdał — i cały wylądował jedną dziurą pod * widżetem. Zmierzone w klatce ustalonej (dół panelu minus ostatnia zadrukowana linia): * 900 PL 198,9 EN 244,5 * 940 PL 221,1 EN 152,1 * 960 PL 221,1 EN 152,1 * 999 PL 221,1 EN 147,3 * dla porównania ten sam pomiar poza pasmem: 390 → 19,3 · 768 → 17,1 · 1024 → 16,3 · 1440 → 15,6. * Czyli dokładnie to, co właściciel odrzucił na home („karta nie może stać pusta”), przeniesione * z prawego panelu do lewego. * * DLACZEGO AKURAT TU. Widżet .mkt-cd skaluje się kubkiem (@container: progi 380, 470, 620 px), a * kubek mierzy TYLKO szerokość. W tym paśmie kolumna panelu ma 298–348 px kubka, więc widżet * wchodzi w swój najwęższy stopień — ten zrobiony dla KWADRATOWEJ klatki 350 × 350 w „Jak to * działa”, gdzie brakuje wysokości i trzeba oddać: pasek kolumn, opis rekomendacji i czwarty * wiersz. Tutaj jest odwrotnie: kolumna jest wąska, ale panel ma 473–585 px wysokości, bo taki * jest panel obok. Widżet oddaje więc treść, której akurat ma gdzie pokazać — * i ta oddana treść JEST tą dziurą. Pasmo to domyka się samo: ≥ 1000 px wchodzi body { zoom: .9 } * (marketing.css), kubek rośnie do 419 px i widżet sam pokazuje wszystko (zmierzone na 1000, 1010 * i 1023 — dziura 16,3 px, bez zmian). * * CO ZA TO ODDAJEMY (świadomy handel). Nie wracamy do align-items: start — weryfikator zmierzył, * że przy równaniu górą dziura ma 21 px, ale wtedy panele znowu kończą się w dwóch różnych * liniach, a to jest dokładnie to, co właściciel odrzucił przy home („ale ważne, żeby boxy były * 1 wysokości”). Zamiast tego lewy panel dostaje z powrotem trzy rzeczy, które i tak pokazuje * w każdym szerszym oknie — pasek TEMAT/WPŁYW, opis wybranej rekomendacji i czwarty wiersz listy * (czwartą było zdanie pod listą; wyszło z widżetu 30.09). Nie dochodzi ANI JEDNO nowe słowo: * to ta sama klatka, co na 1024 i 1440, tylko o stopień węższa. * Resztę zapasu (kilkadziesiąt px, różną w PL i EN, bo wysokość dyktuje panel obok) zjadają same * wiersze — mechanizm, który widżet ma od początku („the rows share whatever height the preview * has left”), tyle że jego sufit był policzony dla wiersza jednolinijkowego. W paśmie sufit idzie * na 80 px: przy zmierzonym najwyższym wierszu w paśmie (EN 900 → 57,8 px) zostaje po ~22 px na * wiersz zapasu na dłuższe tłumaczenie albo wyższy panel obok, zanim dziura mogłaby wrócić. * Po zmianie dziura wynosi 17,3 px na 900 / 940 / 960 / 999 w OBU językach — czyli tyle, co * wyściółka dolna panelu (16 px) plus obrys (1 px), dokładnie jak w każdym innym oknie. * ========================================================================== */ /* SEKWENCJA. Trzy reguły oddawania zostają pod :not(.is-seq): na scenie (440 px, blok 10.1) widżet * ma w tym paśmie kubek 404 px, powyżej progu 380, i sam pokazuje pasek kolumn, opis i czwarty * wiersz — nie ma czego oddać. Sufit 80 px obowiązuje za to w OBU klatkach. Wysokość sceny * dyktuje odsłona 03 (577 px wobec 409 px odsłony z widżetem), a odkąd widżet wypełnia panel * (home-v2.css, .hp-ciap-widget .mkt-widget), tę różnicę biorą wiersze. Przy suficie bazowym * (6,087 × --u = 53 px) pod listą zostawało 75 px bieli ponad wyściółkę; przy 80 px wiersze mają * 72 px, a pod ostatnim zostaje 16 px, czyli sama wyściółka ciała — PL i EN, co 5 px w paśmie. */ @media (min-width: 900px) and (max-width: 999px) { .hp-ciap:not(.is-seq) .mkt-cd-colhead { display: grid; } .hp-ciap:not(.is-seq) .mkt-cd-desc { display: block; } .hp-ciap:not(.is-seq) .mkt-cd-list > .mkt-cd-row:nth-child(n+5) { display: grid; } .hp-ciap .mkt-cd-row { max-height: 80px; } } /* 6g. ZEGAR PRZEWIJANIA — WYSZEDŁ RAZEM Z UKŁADEM, KTÓRY OBSŁUGIWAŁ --------------- * Stały tu 92 linie reguł pod .hp-ciap.is-armed / .is-in: drabinka wejścia obu paneli, kolumny * przekazania, kreatora, paska „Co dokłada ContentInAI” i pieczątki LUKA Z MONITORINGU, plus * zmienna --jd. Wszystkie dokładał blok contentinai w js/home-v2.js, przez atrybut data-hp-cia * na sekcji. Sekcja tego atrybutu już nie ma (partial), więc żadna z tych reguł nie miała jak * zadziałać — a martwa reguła kłamie o tym, co strona robi. * * DLACZEGO WYSZEDŁ, LICZBAMI. Ten zegar inscenizował CAŁĄ sekcję naraz: zmierzone przy 1440 * na wejściu w kadr, 53 animacje ruszały w jednej klatce i kończyły się do ~3 s. Właściciel * ostrzegał przed tym wprost („jak na raz zacznie migać wszystko to będzie kieeeepsko”). * Ruch był, następstwa nie było. Następstwo niesie teraz sekwencja z bloku 10: w kadrze pracuje * jedna odsłona, a wnętrze prawego panelu składa się po przekazaniu, krok po kroku. * * Co z tego bloku ZOSTAŁO, tylko w innym miejscu i na innym wyzwalaczu: pieczątka LUKA * Z MONITORINGU (blok 10.6 — ta sama skala 0,6 → 1 i to samo krycie, tylko wyzwalana wejściem * odsłony, nie przewijaniem strony). * Reguły .hp-cia.is-armed .hp-ciap-* w home-v2.css (blok „motion”) też nie mają już czego * ubierać; nie ruszam ich, bo to nie jest plik tej rundy — do sprzątnięcia razem * z .hp-cia-handoff (patrz 7a niżej). */ /* --- 7. runda „JEDNO MIEJSCE, W KTÓRE SIĘ KLIKA" ------------------------------ * Cztery uwagi właściciela z przeglądu przed startem, wszystkie o tej samej sekcji. * * 7a. PRZYCISK „Pisz w ContentInAI" W KARCIE 01 — WYCHODZI. Właściciel wracał do niego dwa razy * („wygląda, jakby można kliknąć"), a kliknąć się nie da: to kontrolka NARYSOWANA w makiecie. * Poprzednia runda leczyła objaw wagą — chip zszedł z pełnej pomarańczy na biel z włosową * ramką, 10,5 px, cursor: default — i to nie wystarczyło, bo element dalej miał KSZTAŁT * przycisku (tło, ramka, promień, strzałka), a w tej sekcji jest jedno miejsce, które * naprawdę klika: CTA w stopce. Reguły .hp-cia-handoff w home-v2.css nie mają już czego * ubierać — znacznik nie powstaje — i pójdą przy najbliższym sprzątaniu tamtego pliku. * Co z wysokością: karta 01 nie jest najwyższa, więc w siatce (od 900 px) nie zmienia się * nic — zapas wraca do bloku domykającego, a wniosek „Luka:" siada na dnie karty dokładnie * tak, jak pasek modeli siada na dnie karty 03 (margin-top: auto, blok @media wyżej). * Poniżej 900 px karta 01 skraca się o wysokość chipa i jego margines. * * 7b. KRESKA NAD PARĄ SEO/GEO. Karty 01 i 03 oddzielają puentę od wierszy włosową kreską * (12 px + 1 px + 12 px, blok 5b). Karta 02 nie miała jej wcale, choć jej puenta — para * pierścieni — jest w tej samej roli i na tym samym miejscu. Do tego kreski w karcie 02 * były w DWÓCH kolorach: pasek dokumentu zamykał się w var(--cia-line), a przegródka * między pierścieniami stała w #F1E6D3. Karty 01 i 03 mają jeden kolor kreski wewnętrznej * na kartę (#EBEDF2, ten sam, co pod paskiem głowy), więc karta 02 dostaje to samo: * jedna kreska wewnętrzna, var(--cia-line), i ten sam rytm 12/1/12. * Gdzie stoi: tam, gdzie para leży POD tekstem artykułu, czyli od 900 px i do 640 px. * W paśmie 641–899 px para jest pionowym słupkiem OBOK tekstu i oddziela ją border-left * tego słupka — nie ma nad sobą niczego, od czego miałaby się odcinać. * * 7c. NAZWY MODELI W KARCIE 03 — DO LEWEJ. Etykieta „Cytują Twój artykuł" stoi przy lewej * krawędzi karty, a trzy kafelki modeli wisiały pod nią wyśrodkowane (justify-content: * center z bloku 5d) — zmierzone przy 1440: etykieta zaczyna się na x = 951,1, a pierwszy * kafelek na x = 1020,1, czyli 69 px w prawo od słowa, które go zapowiada. Tak samo * w każdym wierszu wyżej nazwa marki stoi przy lewej krawędzi. Rząd zaczyna się teraz pod * etykietą, a nazwa siedzi pod swoim znakiem przy lewej krawędzi kafelka, nie na jego * środku. Przerwa między kafelkami ZOSTAJE na 16 px — powód i pomiary przy samej regule. * Para pierścieni w karcie 02 ZOSTAJE wyśrodkowana: nie ma nad sobą etykiety, do której * miałaby się równać, a sama para mierzy 287 z 319 px wnętrza karty przy 1440 — różnica * między środkiem a lewą to 16 px, czyli ruch, którego nie widać, za cenę zerwania * kształtu, o który właściciel prosił wprost („to musi byc obok siebie"). * * 7d. CTA POD KADRAMI. Właściciel: „wizualnie całościowo jest ładnie, podoba mi się to, tylko * pod obrazkiem to CTA jakoś traci swoją czytelność". Zmierzone na białym tle sekcji: * napis #1A1F2E na #F8A32A 8,02:1 — próg AA dla tekstu to 4,5:1, z zapasem * płyta #F8A32A na #FFFFFF 2,05:1 — to jest to, co się rozpływa * obrys #C67908 (--cia-ink-strong) 3,42:1 — ledwo nad progiem 3:1 z WCAG 1.4.11, * a przy body { zoom: .9 } 1 px CSS schodzi * do 0,9 px urządzenia i gaśnie w płycie * Płyty nie ruszamy: ciemniejsza pomarańcz to inny kolor marki i głośniejszy przycisk, * a ten ma być wyraźny, nie pierwszy na stronie — pierwsze CTA landingu („Sprawdź moją * markę") jest fioletowe i ma zostać najmocniejsze. Poprawiamy KRAWĘDŹ: obrys schodzi * na --cia-ink (#A05C06), czyli na ten sam atrament, którym ta sekcja pisze wszystkie małe * etykiety w pomarańczu. Po zmianie: * obrys #A05C06 na #FFFFFF 5,21:1 (było 3,42:1) — to jest ta granica, o którą * pyta WCAG 1.4.11: krawędź kontrolki wobec * tego, co obok, czyli wobec białego tła * obrys #A05C06 na płycie #F8A32A 2,55:1 (było 1,80:1) — granica wewnętrzna, progu * nie ma, ale krawędź widać też od środka * napis #1A1F2E na płycie 8,02:1 bez zmian * Masa, waga pisma, wyściółka, promień i cień zostają co do piksela, więc guzik nie robi * się głośniejszy — robi się ostrzejszy. Ta sama reguła obsługuje obie sekcje (home * i produkt), bo obie mają .hp-cia na sekcji. */ /* 7b */ @media (min-width: 900px) { /* Bez margin-top: 12 px nad kreską trzyma już gap ciała edytora (.hp-cia-editor-body, 12 px). Dołożenie marginesu dałoby 24 px nad kreską przy 12 px pod nią — kreska nie stałaby w połowie przerwy, tylko przy dolnym wierszu, i karta 02 urosłaby o 11 px, które w siatce zapłaciłyby wszystkie trzy karty. Rytm jest teraz ten sam, co w kartach 01 i 03: 12 px · kreska · 12 px. */ .hp-cia--row .hp-cia-scores { border-top: 1px solid var(--cia-line); padding-top: 12px; } .hp-cia--row .hp-cia-score + .hp-cia-score { border-left-color: var(--cia-line); } } @media (max-width: 640px) { .hp-cia--row .hp-cia-scores { border-top: 1px solid var(--cia-line); padding-top: 12px; } .hp-cia--row .hp-cia-score + .hp-cia-score { border-left-color: var(--cia-line); } } /* Słupek 641–899 px: kreska jest pionowa i już tam stoi — wyrównujemy tylko kolor. */ @media (min-width: 641px) and (max-width: 899px) { .hp-cia--row .hp-cia-scores { border-left-color: var(--cia-line); } } /* 7c */ @media (min-width: 900px) { /* Sama zmiana wyrównania, BEZ ruszania przerwy między kafelkami. Pierwsza wersja tej rundy podnosiła przerwę 16 → 26 px, żeby rząd zajmował podobną szerokość co wyśrodkowany. Zmierzone: rząd potrzebuje wtedy 167,7 px treści + 52 px przerw = 219,7 px, a wnętrze karty ma 179,3 px przy 900 i 212,3 px przy 999 — czyli rząd łamał się na dwa wiersze w CAŁYM paśmie 900–1090 px zamiast, jak dotąd, do 1000 px. Przerwa zostaje na 16 px: wtedy komplet mierzy 199,7 px i próg łamania stoi tam, gdzie stał. (Że poniżej ~1000 px rząd łamie się tak czy inaczej, jest sprawą starszą od tej rundy — trzy nazwy modeli po prostu nie mieszczą się w jednej trzeciej okna. Zgłoszone, nie naprawiane tutaj.) */ .hp-cia--row .hp-cia-models { justify-content: flex-start; } /* RZĄD do lewej, ale ZNAK NAD SWOJĄ NAZWĄ — na środku. Właściciel (H7): znak z plakietką stał przy lewej krawędzi nazwy, więc nad „Perplexity” wisiał w pierwszej jednej piątej słowa i czytał się jak ikonka przyklejona do rzędu, a nie jak znak tego modelu. Tu stało align-items: flex-start; text-align: left — zdjęte, więc kafelek wraca do środkowania z bloku 5d (flex-direction: column; align-items: center). Lewej krawędzi rzędu to nie przesuwa: nazwa jest w każdym kafelku szersza od znaku (18 px), więc kafelek zaczyna się krawędzią nazwy — tak jak etykieta nad nim i stopki kart 01 i 02. Plakietka wisi na znaku absolutnie (5d), więc środkuje się sam znak, nie znak z plakietką. */ } /* 7d — reguła stała TUTAJ i wyprowadziła się do home-v2.css, do samej deklaracji border w .hp-cia-cta. Powód jest mechaniczny, nie estetyczny: .hp-cia .hp-cia-cta ma specyficzność (0,2,0) — dokładnie tyle samo, co .hp-cia-cta:hover — a ten plik wczytuje się PO home-v2.css, więc przy równej specyficzności wygrywał także w stanie najechania. Zmierzone na żywo przed przeniesieniem, /pl i /pl/produkt, PL i EN: spoczynek rgb(160,92,6), najechanie rgb(160,92,6), czyli obrys nie zmieniał się wcale, choć płyta i cień zmieniały się normalnie. Kolor spoczynku z 7d zostaje co do bajtu (#A05C06) — przeniósł się tylko tam, gdzie mieszka reszta stanów guzika, żeby :hover i :focus-visible znowu czytały się w kolejności, w jakiej są napisane. Wyprowadzenie kontrastowe zostaje w komentarzu 7d wyżej — to nadal ten sam obrys. */ /* --- 8. PASMO 900–999 px: ten sam rząd kart, co od 1000 px w górę ------------ * Weryfikacja: „pasmo 900–999 px rozpada się wizualnie". Odtworzone co do dziesiątej części * piksela, PL i EN tak samo, sprawdzone co 1 px w 880–1020: * pasek akcji „Rozwiń / Skróć / Zmień ton" DWA wiersze w CAŁYM paśmie 900–999, * pasek edytora 80,8 px zamiast 53: tytuł brał własną linię, * a ołówek zostawał sam nad nim, * wysokość trzech kart 451,3 px przy 900, 435,7 przy 950, 419,5 przy 989 * — wobec 342,2 px od 1000 px w górę. * * JEDNA PRZYCZYNA NA WSZYSTKIE TRZY. marketing.css ma @media (min-width: 1000px) { body * { zoom: .9 } }. Poniżej progu strona jest 1:1, więc kolumna karty jest tu NAPRAWDĘ ciaśniejsza * niż o piksel okna dalej: 282,3 px CSS przy 999 i 319,7 px przy 1000. Trzydzieści siedem * pikseli, które zjawiają się na progu, to dokładnie tyle, ile brakuje paskowi akcji na jeden * wiersz i tytułowi na miejsce obok ołówka — a każda z tych dwóch rzeczy siedzi w karcie 02, * czyli w najwyższej karcie rzędu, więc płacą za nie wszystkie trzy karty naraz. * * CO TU STOI: ten sam zoom, który strona bierze przy 1000 px, podany o jeden próg niżej * i ogrodzony do jednego rzędu kart. To nie jest nowy mechanizm — to JEST mechanizm, na którym * stoi cały serwis, i dzięki temu wnętrze rzędu układa się w tych samych pikselach CSS, co przy * 1024 i 1440, a rysuje w tych samych pikselach urządzenia: 12 px tekstu artykułu to 10,8 px na * ekranie po obu stronach progu, 1 px obrysu to 0,9 px, pierścień ma 41,4 px. * Zmierzone po tej rundzie (wysokość kart, piksele urządzenia, co 1 px w 880–1020): * PL 342,2 px w całym paśmie 900–999 = 342,2 px od 1000 px w górę skok na progu 0,0 px * EN 342,2 px w całym paśmie 900–999 = 342,2 px od 1000 px w górę skok na progu 0,0 px * Angielski wiersz był do tej rundy inny (361,6 px przy 900–957, +19,4 px = +5,7%, bo pasek * akcji łamał się na dwa wiersze) i został naprawiony w ciągu, nie w CSS — 'editor_actions' * w lang/en, trzecia pozycja „Change tone" → „Tone", pomiary przy tamtym kluczu. * Trzy karty mają w każdym punkcie równo 0,0 px różnicy między sobą, pasek modeli i para * SEO/GEO stoją w jednym wierszu, nic nie wystaje poza kartę, nie ma przewijania w poziomie. * * DLACZEGO NA .hp-cia-flow, A NIE NA SEKCJI: głowa (kicker, h2, lead) i stopka (zdanie + CTA) * to tekst landingu i ma trzymać stopień sekcji sąsiednich, a te poniżej 1000 px też zoomu nie * mają. Skaluje się wyłącznie rząd makiet. Selektor celuje w .hp-cia-flow jeszcze z jednego * powodu: podgląd układu (pages/podglad-contentinai.blade.php) pożycza .hp-cia-stage, * .hp-cia-editor-bar i .hp-cia-tools, ale własnego rzędu NIE buduje na .hp-cia-flow — więc ten * blok go nie dotyka i wszystkie cztery reguły są tu zapisane jako potomkowie .hp-cia-flow. * * --cia-meter WRACA DO 46 px. clamp(34px, 6vw − 20px, 46px) z bloku 5 był ręczną protezą pod * BRAK zoomu; z prawdziwym zoomem proteza liczy się drugi raz i pierścień schodzi do 39,9 × 0,9 * = 35,9 px urządzenia przy 999 wobec 41,4 px przy 1000 — czyli nowy skok, tylko w drugą stronę. * 46 × 0,9 = 41,4 px, ten sam pierścień po obu stronach progu. Sam clamp ZOSTAJE w bloku 5: * .hp-cia--row .hp-cia-scores ubiera też podgląd, a tam zoomu nie ma. * * WYŚCIÓŁKA KAFELKA 8 → 6 px I PODŚWIETLENIA 11 → 9 px: ostatnie 12 + 4 px, których polskiemu * paskowi akcji brakuje na jeden wiersz przy dolnej krawędzi pasma. Zmierzone: pasek potrzebuje * 179,7 px, a kolumna tekstu karty daje 191,0 px przy 900 i 227,7 px przy 999 — 11,3 px zapasu * w najciaśniejszym punkcie. Przy 8/11 pasek potrzebował 191,7 px na 187,0 px wolnego, więc PL * dalej łamałby się od 900 do 913 px. * * PASEK AKCJI MIEŚCI SIĘ TERAZ W JEDNYM WIERSZU W OBU JĘZYKACH — i to jest zmiana tej rundy. * Wcześniej stało tu, że angielski komplet „Expand · Shorten · Change tone" (211,9 px) nie * mieści się w kolumnie tekstu karty (191,0 px przy 900 px okna), więc od 900 do 957 px schodzi * na dwa wiersze i podnosi WSZYSTKIE TRZY karty z 342,2 do 361,6 px. Objaw zniknął razem * z ciągiem: trzecia pozycja brzmi „Tone" (lang/en, 'editor_actions'). * Zmierzony ZAPAS paska (wolne miejsce w kolumnie minus szerokość paska w jednym wierszu, * piksele ekranu, co 1 px w 880–1020, oba języki): * przy 900 px przy 1000 px wierszy w paśmie 900–999 * PL przed i po + 9,95 px +31,05 px 1 (bez zmian) * EN przed −19,05 px + 2,05 px 2 na 58 ze 100 szerokości * EN po +23,95 px +45,05 px 1 na wszystkich * Najciaśniejszy punkt całego zakresu to zawsze 900 px, czyli lewa krawędź pasma trzech kolumn; * poniżej 900 px karty stoją jedna pod drugą i zapas paska skacze do +384 px (PL) / +394 (EN). * PRÓG, KTÓRY ZNIKNĄŁ: pasek przestawał się łamać dokładnie przy 958 px, a zapas miał tam * 1,3 px — o łamaniu decydowały setne części piksela, czyli metryki pisma, a nie układ. * Dziś w całym zakresie 880–1020 nie ma ani jednej szerokości, na której pasek się łamie, * a najbliższy próg leży o 9,95 px (PL) i 23,95 px (EN) od najciaśniejszego punktu. * Skąd zapas ma się brać, gdyby ktoś chciał go jeszcze powiększyć: NIE z ramy. Kafelki mają * tu 11 px pisma (najmniejszy stopień w tej sekcji to 10,5 px) i 6 px wyściółki bocznej, a przy * 2 px pasek zaczyna wyglądać jak trzy słowa bez pudełka. Zapas bierze się z ciągu — tak jak tu. * * DROBIAZG, KTÓRY ZNIKNĄŁ PRZY OKAZJI: przegródka kafelków to inset 1px po LEWEJ stronie * każdego kafelka poza pierwszym (blok 5f), więc kiedy pasek schodził do dwóch wierszy, kafelek * otwierający drugi wiersz niósł tę kreskę ze sobą i wisiała ona przy lewej krawędzi paska. * CSS nie umie zapytać „czy ten element zaczyna wiersz", a wszystkie obejścia (przegródka * z przerwy + tło paska, siatka o stałej liczbie kolumn, :nth-child pod konkretne miejsce * złamania) albo psują pusty slot w trakcie inscenizacji, albo wpisują na sztywno punkt * złamania, który zależy od metryk pisma. Reguła zostaje więc taka, jaka była — nie ma już * jednak ani jednej szerokości, na której ta kreska by wisiała. * * CZY DA SIĘ BEZ ZOOMU NA BLOKU WEWNĘTRZNYM — POLICZONE, ODPOWIEDŹ BRZMI „NIE". * Zarzut jest słuszny co do faktu: to JEDYNE miejsce na tym landingu, gdzie blok wewnętrzny * niesie własny zoom (drugie i ostatnie w całym themes/marketing/css to .cia-k-stage * w cia-kompakt.css, czyli podgląd układu, nie strona). Skutek widać w proporcji: stosunek * stopnia leadu sekcji do stopnia tekstu w makiecie wynosi 16,5/10,8 = 1,528 w paśmie * 900–999 i 14,85/10,8 = 1,375 od 1000 px w górę — rząd makiet jest w paśmie o 11,1% mniejszy * względem własnej głowy i stopki, niż jest metr dalej. * Zmierzone trzy alternatywy (PL i EN, co 1 px w 890–1010, po tej rundzie): * (A) ZDJĄĆ ZOOM CAŁKIEM (i oddać --cia-meter clampowi z bloku 5): * proporcja równa się (1,375 po obu stronach progu) — i to jedyna rzecz, która się * poprawia. Reszta: polski pasek akcji łamie się na dwa wiersze na 56 ze 100 szerokości * pasma (900–969), pasek dokumentu rośnie z 53,0 do 58,8–75,6 px, pierścień schodzi * z 41,4 do 34,0–39,9 px, a trzy karty rosną z 342,2 px do 373,4–446,2 px, czyli nawet * o 104,0 px (+30,4%) — i na progu 999→1000 wraca skok wysokości kart o 32,9 px. * Sama sekcja rośnie w paśmie o 41,9–114,7 px wobec dzisiejszej (1144,4–1212,0 px * zamiast 1097,2–1102,6 px). * (B) PRZENIEŚĆ ZOOM NA CAŁĄ SEKCJĘ (.hp-cia--row zamiast .hp-cia-flow): * wewnątrz sekcji idealnie — proporcja 1,375 po obu stronach progu, pasek w jednym * wierszu, karty 342,2 px, skok na progu 0,0 px i dla kart, i dla wysokości sekcji. * Płaci za to SZEW Z SĄSIADAMI, a on jest widoczny bez zmiany szerokości okna. Zmierzone * przy 999 px: h2 sekcji 37,8 px wobec 42,0 px w cenniku nad nią i w „Wiedzy" pod nią, * lead 14,85 px wobec 16,5 px w obu sąsiadkach, a wyściółka sekcji 99 px wobec 110 px — * czyli oba szwy ciaśniejsze o 11 px. Trzy sekcje jedna pod drugą i ta w środku o 10% * mniejsza: to jest dokładnie ten błąd, przed którym broni się pierwsze zdanie akapitu * „DLACZEGO NA .hp-cia-flow" wyżej. * (C) MNIEJSZY KROK ZOOMU (żeby zmniejszyć samą anomalię, nie usuwając mechanizmu): * 0,93 — oba języki dalej w jednym wierszu, ale karty mają w paśmie 354,9 px wobec * 342,2 px przy 1000 px, czyli wraca skok 12,7 px (+3,7%) na progu; anomalia * spada z 11,1% do 7,5%. * 0,95 — polski pasek łamie się na 12 ze 100 szerokości, karty 362,1–401,4 px. * 0,97 — polski pasek łamie się na 30 ze 100 szerokości, karty 369,2–409,0 px. * Czyli całą drogę od 0,90 do 0,97 płaci się skokiem na progu, a od 0,95 także łamaniem. * WNIOSEK: zoom zostaje na .hp-cia-flow. Anomalia proporcji jest widoczna dopiero wtedy, kiedy * porówna się dwie szerokości okna po obu stronach progu 1000 px; każda z trzech alternatyw * wymienia ją na defekt, który widać na JEDNEJ szerokości — złamany pasek akcji i o 30% wyższe * karty (A), sekcję o 10% mniejszą od obu sąsiadek (B), albo skok kart na progu (C). * * GDYBY PRZEGLĄDARKA NIE ZNAŁA zoom NA ELEMENCIE: wraca dokładnie dzisiejszy układ pasma, * czyli stan sprzed tej rundy — nic się nie psuje, sekcja tylko przestaje być zgrana z progiem. */ @media (min-width: 900px) and (max-width: 999px) { .hp-cia--row .hp-cia-flow { zoom: 0.9; } .hp-cia--row .hp-cia-flow .hp-cia-scores { --cia-meter: 46px; } .hp-cia--row .hp-cia-flow .hp-cia-tool { padding: 3px 6px; } .hp-cia--row .hp-cia-flow .hp-cia-sel { padding-left: 9px; padding-right: 9px; } } /* --- 9. UKŁAD KOMPAKTOWY SEKCJI NA HOME -------------------------------------- * (lewa kolumna nieruchoma + prawa jako jedna scena, karty 01/02/03 po kolei, w pętli) * * SKĄD TO JEST: blok jest przeniesiony 1:1 z podglądu /podglad-contentinai * (public/themes/marketing/css/cia-kompakt.css), który właściciel obejrzał i zatwierdził * („kierunek dobry, zatwierdzam"). Nie przepisano tu ani jednej liczby — wszystkie pomiary * w komentarzach niżej pochodzą z rund dopracowania podglądu i są jego dorobkiem. * Osobny arkusz dla JEDNEJ sekcji nie zostaje: 34 166 B cia-kompakt.css wchodzi w ten plik, * czyli sekcja ma dalej jeden arkusz i jedno żądanie zamiast dwóch. * SAM PODGLĄD (strona, trasa, cia-kompakt.css, cia-kompakt.js) jest DO SKASOWANIA po tym, jak * agent weryfikujący potwierdzi, że żywa sekcja przejęła wszystkie jego gwarancje — więc każde * odwołanie do niego w komentarzach niżej to zapis pochodzenia, a nie wskazówka, gdzie zajrzeć. * * NAZEWNICTWO W TYM BLOKU (i w komentarzach pod nim): * · „UKŁAD KOMPAKTOWY" / .is-seq — dwie kolumny i sekwencja. Włącza go WYŁĄCZNIE skrypt * (js/hv-contentinai.js) i wyłącznie przy prefers-reduced-motion: no-preference. * · „KLATKA BAZOWA" — to, co widzi gość bez JS i każdy z „ogranicz ruch": jedna kolumna, * a pod tekstem rząd trzech kart. To jest POPRZEDNI układ tej sekcji, odtworzony co do * liczby, więc bez skryptu nic nie ubywa. * · „UKŁAD POPRZEDNI" w starszych komentarzach tego pliku (blok 2 i 8, selektory * .hp-cia-row-head / .hp-cia-grid / .hp-cia-flow / .hp-cia-row-foot / .hp-cia-arrow) * opisuje rząd trzech kart, którego szablon już NIE renderuje. Reguły zostają na czas * przeglądu przed startem jako droga powrotna; do skasowania razem z trasą podglądu. * * TRZY RZECZY, KTÓRE TRZYMAJĄ TEN UKŁAD W RYZACH: * 1. Układ kompaktowy (dwie kolumny + scena) żyje CAŁY w @media (prefers-reduced-motion: * no-preference) i pod klasą .is-seq, którą dokłada wyłącznie skrypt. Bez JS i przy * zredukowanym ruchu nie działa ani jedna jego reguła — zostaje klatka bazowa. * 2. Wysokość sceny ustawia skrypt (inline, w px) na najwyższej z trzech kart przy * AKTUALNEJ szerokości. Tu nie ma ani jednej liczby wysokości — gdyby stała, przy jednej * szerokości by pasowała, a przy pozostałych scena skakałaby przy każdym przejściu. * 3. Wskaźnika przebiegu nie ma bez JS (display: none). Bez skryptu wszystkie trzy karty * i tak są widoczne, a wskaźnik, który niczego nie wskazuje, jest gorszy niż jego brak. * * KOLEJNOŚĆ W KASKADZIE: ten blok leży na końcu pliku, czyli PO wszystkim, co ubiera karty * (home-v2.css, bloki 1-8 tego pliku). Nadpisuje dokładnie trzy ich reguły i każda jest * podpisana słowem NADPISANIE. Dokładnie tę samą pozycję miał cia-kompakt.css, ładowany * w podglądzie po hv-contentinai.css. * ========================================================================== */ /* --- 9.1. rama sekcji -------------------------------------------------------- */ /* KADR. Sekcja pisała w atrybucie `style` max-width: 1180px, a na stronach v2 przykrywała to home-v2.css jedną regułą: [data-home-v2] [style*="max-width: 1180px"] { max-width: var(--hp-container) !important; } czyli 1320px. Po przejściu na klasę czytamy tę samą zmienną wprost — te same 1320px, ta sama rynienka 32px, co przy każdej sekcji, nawigacji, stopce i cenniku. Wartość awaryjna 1320px jest na wypadek, gdyby sekcja kiedyś stanęła na stronie bez data-home-v2 (tak stał podgląd). Zmierzone przy 1440 (body{zoom:.9}, więc na ekranie 0,9 × liczby układu): kontener na /pl (każda sekcja, nawigacja, stopka, cennik) 1320px → 1188,0px kontener podglądu, zanim tę regułę dopisano 1180px → 1062,0px Sto czterdzieści pikseli układu różnicy, z czego 126px na ekranie: w tamtym kadrze krawędzie sekcji stałyby o 63px do środka względem sekcji nad nią i pod nią. Poniżej 640px marketing.css zbija rynienkę do 20px (section > div, !important) i tak ma zostać — .cia-k-wrap jest bezpośrednim dzieckiem sekcji, więc ta reguła go łapie. */ .cia-k .cia-k-wrap { max-width: var(--hp-container, 1320px); margin: 0 auto; padding: 0 32px; } .cia-k .cia-k-grid { display: grid; gap: 34px; } /* KLATKA BAZOWA — jedna kolumna, a pod tekstem rząd trzech kart, czyli układ, który ta sekcja miała do tej rundy. Dlaczego nie dwie kolumny: dwie kolumny mają sens tylko wtedy, kiedy prawa jest JEDNĄ sceną. Bez sekwencji stoją w niej trzy karty jedna pod drugą, więc prawa kolumna robi się trzy razy wyższa od lewej. Zmierzone przed tą poprawką przy 1440 i 1024: siatka 1107,8px, lewa kolumna 369,5px wyśrodkowana w pionie (align-items: center), czyli 369,2px bieli nad kickerem i drugie tyle pod przyciskiem; cała sekcja 1305,8px wobec 978,6px układu poprzedniego (+33,4%). Klatka bazowa, która dla części ludzi jest wyższa i pustsza od tego, co zastępuje, niczego nie daje. „Ogranicz ruch" to nie egzotyka — u części ludzi na iOS i macOS ten przełącznik jest włączony i nigdy go nie dotykali. Zmierzone PO poprawce (bez JS i przy „ogranicz ruch" — te same liczby co do dziesiątej): sekcja 937,7px przy 1024, 1440 i 1920, zero bieli nad kickerem, trzy karty zaczynają się i kończą w jednej linii (top 407,8 / dno 838,7 przy 1440). Rząd trzech kart nie ma tamtego problemu, bo to układ, który na tej stronie już stał i jest zmierzony. Przerwa 44px i trzy równe kolumny — dokładnie te liczby, co w .hp-cia--row .hp-cia-flow w bloku 2, żeby klatka bazowa nie różniła się od układu poprzedniego ani o piksel. */ @media (min-width: 900px) { .cia-k .cia-k-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; align-items: stretch; } } /* UKŁAD KOMPAKTOWY — dwie kolumny, prawa jako scena. Tylko z sekwencją, czyli tylko wtedy, kiedy w prawej kolumnie stoi JEDNA karta naraz. Prawa kolumna ma SUFIT 440px, a nie „połowę ekranu": wnętrza kart są liczone pod kolumnę ~350px (pomiary w blokach 4 i 5 — tytuł artykułu, para pierścieni, rząd modeli), więc rozciągnięta na 600px karta zaczyna świecić pustymi polami. Skąd akurat 440px — z pomiaru WŁASNYCH wysokości trzech kart (karta 01 / 02 / 03, px; scena stoi na najwyższej z nich, więc rozrzut to dokładnie to powietrze, które musi wejść w kartę 01, żeby wszystkie trzy kończyły się w jednej linii): 360 280 / 380 / 328 rozrzut 100 400 280 / 346 / 328 rozrzut 66 440 280 / 327 / 328 rozrzut 48 500 280 / 309 / 328 rozrzut 48 Od 440px rozrzut już nie maleje (najwyższa robi się karta 03, a jej wysokości nie zmienia ani jeden piksel szerokości więcej), a karta robi się tylko rzadsza — więc to ostatni kadr, który cokolwiek daje. Podłoga 320px trzyma kartę w całości przy 900px, gdzie okno jest najciaśniejsze. */ @media (prefers-reduced-motion: no-preference) { @media (min-width: 900px) { .cia-k.is-seq .cia-k-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 44px; /* GÓRĄ, nie do środka. Poprzednia runda wyrównywała kolumny do środka, żeby pod krótszą z nich nie zostawał ogon. Kosztem było to, co właściciel zobaczył od razu: „te nagłówki 03 BrandinAI sprawdza efekt są wyżej niż nagłówki z lewej". Zmierzone przy 1440 PRZED zmianą (górne krawędzie, px ekranu): kicker sekcji (lewa kolumna) y = 121,3 belka karty (prawa kolumna) y = 99,0 → o 22,3px WYŻEJ Prawa kolumna była o 44,5px wyższa od lewej, więc środkowanie podnosiło ją o połowę tej różnicy i pierwsze, co oko łapało w sekcji, była podpowiedź z karty, a nie nagłówek. Teraz obie kolumny zaczynają się dokładnie w tej samej linii, a różnica wysokości zostaje na dole — tam jest powietrzem układu, a nie przestawioną hierarchią. Ta reguła MUSI zostać pod .is-seq: bez sekwencji po prawej stoją trzy karty (wywód przy klatce bazowej wyżej). */ align-items: start; } /* Scena wraca do jednej kolumny: rząd trzech kart z klatki bazowej jest tu niepotrzebny, bo karty leżą jedna na drugiej (absolut niżej). */ .cia-k.is-seq .cia-k-stage { display: block; } } @media (min-width: 1100px) { .cia-k.is-seq .cia-k-grid { gap: 64px; } } } .cia-k .cia-k-left { min-width: 0; } .cia-k .cia-k-right { min-width: 0; } /* Na telefonie nagłówek, kicker i lead są wyśrodkowane przez marketing.css (section h2, div:has(+ h2)) i przez blok 1 tego pliku (lead). Akapit o relacji obu produktów i CTA idą za nimi — inaczej w jednej kolumnie stałyby dwa różne wyrównania jedno pod drugim. Wskaźnik przebiegu zostaje wyrównany do lewej także tutaj: to jest oś czasu, a oś czasu czyta się od krawędzi, nie od środka. Jego pierwszy pasek stoi równo z lewą krawędzią belki i karty pod nim — tak samo, jak na /pl nagłówek odsłony stoi przy x=20, kiedy nagłówek sekcji nad nim jest wyśrodkowany. */ @media (max-width: 640px) { .cia-k .cia-k-left { text-align: center; } } /* KLATKA BAZOWA — stopka sekcji. Bez JS i przy „ogranicz ruch" akapit o relacji obu produktów i wyjście z sekcji stoją OBOK SIEBIE, dokładnie tak, jak stały w układzie poprzednim (.hp-cia--row .hp-cia-row-foot w bloku 2: flex, space-between, zawijanie, 18/40px przerwy). Bez tej reguły klatka bazowa łamała umowę „ma być niższa od układu, który zastępuje": zmierzone przed poprawką, klatka bazowa wobec układu poprzedniego przy tej samej szerokości — 320 -56,7 640 -58,1 860 -105,4 1024 -56,6 1440 -56,7 (niższa, dobrze) 900 +11,5 920 +11,4 940 +11,5 960 +11,4 980 +11,4 (WYŻSZA) Pasmo 900-999px jest jedynym, w którym akapit urósł z 13px na 16,5px (runda „równorzędny akapit"), a strony nie zbija jeszcze body{zoom:.9} z marketing.css — stąd cała nadwyżka siedziała dokładnie tam. Wiersz zamiast słupka oddaje te 11px z ogromnym zapasem, bo zdejmuje wysokość przycisku (47px) i jeden odstęp. Kreski nad stopką tu NIE MA i to jest różnica zamierzona: w układzie poprzednim kreska zamykała rząd trzech kart, a w klatce bazowej ten sam akapit stoi NAD kartami, więc kreska odcinałaby go od nagłówka, do którego należy. */ @media (min-width: 900px) { /* Miara wiersza. Układ poprzedni trzymał głowę w 760px (.hp-cia--row .hp-cia-row-head w bloku 2), a stopkę puszczał na całą szerokość kontenera — i tak samo ma wyglądać klatka bazowa. Bez tej reguły kicker, H2 i lead szłyby przez całe 1256px kontenera: zmierzone przy 1440, wiersz leadu miał 138 znaków wobec 84 w układzie poprzednim. W układzie kompaktowym reguła nie działa i nie jest potrzebna — tam lewą kolumnę zwęża siatka do 752px, czyli o 8px mniej niż te 760px. */ .cia-k:not(.is-seq) .cia-k-left > .hp-cia-kicker, .cia-k:not(.is-seq) .cia-k-left > .hp-cia-h2, .cia-k:not(.is-seq) .cia-k-left > .hp-cia-lead { max-width: 760px; } .cia-k:not(.is-seq) .cia-k-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 40px; /* Odstęp między akapitami. Zerujemy margines akapitu (niżej), żeby nie podnosił wiersza ponad przycisk, więc te same 18px, co niesie .hp-cia-lead w home-v2.css, muszą wejść tutaj. Bez tej linii oba akapity stały w klatce bazowej sklejone, bez przerwy. */ margin-top: 18px; } .cia-k:not(.is-seq) .cia-k-foot .hp-cia-lead { margin: 0; flex: 1 1 380px; } .cia-k:not(.is-seq) .cia-k-foot .hp-cia-cta { margin: 0; flex: 0 0 auto; } } /* --- 9.2. scena i odsłony ---------------------------------------------------- */ .cia-k .cia-k-stage { position: relative; min-width: 0; } /* NADPISANIE 1: .hp-cia--row .hp-cia-stage { height: 100% } z bloku 2. Tam odsłona jest komórką siatki trzech kolumn i ma się rozciągnąć na całą jej wysokość; tutaj wysokość odsłony jest tym, co dopiero mierzymy, więc 100% z niczego robiłoby błędne koło. W klatce bazowej (rząd trzech kart) odsłony i tak sięgają dna wiersza, bo siatka ma align-items: stretch, a przy height: auto to właśnie stretch ustala ich wysokość. */ .cia-k .cia-k-slide { height: auto; min-width: 0; } /* Klatka bez sekwencji poniżej 900px: trzy odsłony jedna pod drugą, ta sama przerwa co w rzędzie układu poprzedniego (30px). Reguła jest zamknięta w max-width, a nie zerowana wyżej w rzędzie: zerowanie miało tę samą specyficzność i stało PRZED nią, więc przegrywało kolejnością — zmierzone w klatce bazowej przy 1440: karta 01 startowała 27px wyżej od dwóch pozostałych (30px × zoom 0,9), czyli rząd, który ma być równy, był schodkiem. */ @media (max-width: 899px) { .cia-k .cia-k-slide + .cia-k-slide { margin-top: 30px; } } /* NADPISANIE 2: .hp-cia--row .hp-cia-stage-text { min-height: 4.65em } (od 900px, blok 2). Tam trzy opisy stoją OBOK siebie i rezerwa trzech wierszy wyrównuje starty trzech kart — i dokładnie po to zostaje w klatce bazowej, która jest tym samym rzędem. Znika WYŁĄCZNIE w sekwencji: tam karty stoją jedna na drugiej, więc belki równa skrypt (mierzy trzy i daje wszystkim wysokość najwyższej, min-height inline na .cia-k-head), a rezerwa „na oko" zostawiłaby przy szerokiej kolumnie dwa puste wiersze pod każdą belką. */ .cia-k.is-seq .hp-cia-stage-text { min-height: 0; } /* --- 9.3. sekwencja (tylko z JS i tylko przy niezredukowanym ruchu) ---------- */ @media (prefers-reduced-motion: no-preference) { /* Wszystkie trzy odsłony leżą w tym samym miejscu sceny. Nie znikają z drzewa dostępności: nie ma tu ani display: none, ani visibility: hidden, ani aria-hidden — czytnik ekranu ma dojście do całej treści wszystkich trzech kart, tak samo jak gość bez JS. Oko widzi jedną, bo pozostałe mają krycie 0. (Czego NIE robimy przy tej decyzji: nie ogłaszamy samoczynnych zmian karty. Uzasadnienie przy `announce` w js/hv-contentinai.js.) */ .cia-k.is-seq .cia-k-slide { position: absolute; inset: 0 0 auto 0; margin-top: 0; opacity: 0; transform: translateY(6px); pointer-events: none; user-select: none; /* WYJŚCIE. Trzy rzeczy naraz, każda z powodem: · linear, nie krzywa — przy krzywej „ease" krycie spada szybciej, niż wchodzi krycie następnej karty, i między nimi otwiera się biel, · 150ms opóźnienia — nowa karta ma czas dojść do ~0,37 krycia, ZANIM stara w ogóle zacznie gasnąć. To jest to, co zamyka dziurę: biel przebija się przez obie odsłony w ilości (1 − nowa) × (1 − stara), a ten iloczyn ma wtedy maksimum ~0,09 zamiast 0,93, · to samo opóźnienie na transform — inaczej stara karta osiadałaby o 6px w pełnym kryciu, czyli jedyne, co widać na początku przejścia, to dryf treści, która właśnie odchodzi. Zmierzone (próbkowanie krycia co klatkę, 1440px, Playwright): PRZED: suma kryć spadała do 0,073 w 117ms od startu przejścia — czyli na moment scena była białą plamą (z tej sumy wychodzi ~0,93 przebicia bieli), a przy takcie 3,2s działo się to osiemnaście razy na minutę, PO: najniższa suma kryć 1,000 (ani jedna klatka poniżej), największe przebicie bieli 0,097 w środku przejścia, całe przejście 534ms. Koszt, który świadomie bierzemy: przez ~0,2s obie karty są widoczne po połowie, więc tekst na moment się dubluje. W ruchu czyta się to jak rozpłynięcie; biała dziura czytała się jak awaria. */ transition: opacity 400ms linear 150ms, transform 400ms var(--cia-ease) 150ms; } /* WEJŚCIE zaczyna się natychmiast i trwa tyle samo, ile wyjście — to jest przenikanie, a nie „zgaś, poczekaj, zapal". z-index trzyma wchodzącą kartę NAD odchodzącą: gdyby było odwrotnie, przez wchodzącą treść prześwitywałaby ta, którą właśnie zastępuje. */ .cia-k.is-seq .cia-k-slide.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; user-select: auto; z-index: 1; transition: opacity 400ms linear, transform 460ms var(--cia-ease); } .cia-k.is-seq .cia-k-steps { display: flex; } /* CZEGO TU NIE MA, a przez jedną rundę było: rozciągania kart do wysokości sceny poniżej 900px (.hp-cia-card { flex: 1 1 auto } + .hp-cia-card-body { justify-content: space-between }). Pomysł był taki, żeby pod krótszą kartą nie zostawało puste pole do dna sceny. Skutek był gorszy od choroby: cały zapas lądował w JEDNEJ przerwie — między listą marek a puentą „Luka: …" — czyli w ŚRODKU karty, gdzie czyta się jak brakująca treść. Zmierzone przy 390px: przerwa rosła z 12px do 103,1px w karcie 01 i do 71,7px w karcie 03; przy 768px z 12px do 36px. W układzie poprzednim ta przerwa miała 12px w każdej karcie i przy każdej szerokości. Zostaje więc to, co robił układ poprzedni i co od 900px robi ten: karta poniżej 900px kończy się na swojej treści (flex: 0 0 auto z bloku 2), a zapas do dna sceny zostaje białym polem POD kartą — tam jest tłem sekcji, a nie dziurą w karcie. Od 900px karty dalej dorastają do jednej linii, bo tam robią to reguły z bloków 2 i 5 (zapas idzie w przerwy wierszy listy i w blok domykający). RUNDA DRUGA sprawdziła jeszcze dwa sposoby na to samo puste pole i oba odpadły z tego samego powodu — zamieniają biel POD kartą na dziurę W karcie: · mechanizm z ≥900px przepisany na <900px (karta flex: 1 1 auto, lista i blok domykający flex: 1 1 0). Dna wyrównane co do 0,1px przy 390 i 768, ale przy 390 zapas 91px poszedł w blok domykający i wniosek „Luka: …" zawisł w środku pustego pola, · sama karta rozciągliwa (flex: 1 1 auto, dzieci bez zmian). Dna też wyrównane, tylko puste pole przeniosło się pod ostatni wiersz karty: 106,1px w karcie 01 i 74,7px w karcie 03 pustego dna WEWNĄTRZ obrysu — karta czyta się jak niedoładowana. Zostaje więc biel pod kartą (91,1 / 0 / 59,7px przy 390, 62,0 / 38,2 / 62,2px przy 768). To jest tło sekcji tuż nad jej dolną wyściółką i NIC W NIM NIE STOI: wskaźnik przebiegu stoi nad sceną (blok 9.4), więc nie ma już czego odrywać od karty. */ } /* --- 9.4. wskaźnik przebiegu ------------------------------------------------- */ /* TO NIE JEST KARUZELA — i to jest cała decyzja tego bloku. Właściciel zapytał wprost: „nie wiem czy konieczna jest tutaj nawigacja jak w sliderze czy po prostu ładna animacja pokazująca flow?", a o samym rzędzie napisał, że „kuleje / odstaje". RUNDA DOPRACOWANIA — poprzednia odpowiedź (trzy włosowe segmenty rozciągnięte na szerokość kolumny, podpisane 01/02/03 monospace'em) była TRZECIM językiem wizualnym dla czynności, którą ten landing ma już rozwiązaną, i właśnie dlatego odstawała. Sekcja opinii na /pl robi dokładnie to samo — „która z N, kolejna sama po takcie, klikalna, aria-current" — paskami .hp-testi-dots (home-v2.css, blok „switcher"). Zmierzone rozjazdy między nimi (wskaźnik PRZED tą rundą wobec /pl): wysokość 2px wobec 4px (3,6px na ekranie) promień 2px wobec 999px (pigułka) tor #DEE0E8 wobec #D2D5DF, a tor aktywnego #D6DAFB WYPEŁNIENIE #14162B wobec #5B5CE6 — indygo jest na tej stronie kolorem postępu (wypełnienie w opiniach, .hp-aud-dot, a nawet numer „01" na belce tej właśnie karty) szerokość 123,6px wobec stałych 30px / 44px na aktywnym przerwa 14px wobec 8px podpisy 01/02/03 wobec BRAKU — na /pl „który z N" pada raz, jako mono licznik „01 / 06" w rogu karty Sześć liczb i jedna decyzja treściowa — czyli element, który wyglądał na przyniesiony z innej strony. Teraz nie ma ani jednej własnej liczby: wszystkie są przepisane z paska opinii. To ten sam przedmiot, w tej samej roli, na tej samej stronie. CO ZOSTAŁO PO NASZEJ STRONIE (i dlaczego to nie jest odstępstwo): · PRZEJECHANE ZOSTAJĄ PEŁNE. W opiniach sześć cytatów to lista równorzędnych rzeczy, więc wypełnia się tylko bieżący. Tu trzy karty to PROCES — 01 prowadzi do 02, 02 do 03 — więc linia ma się czytać jak przebieg, a nie jak trzy przyciski. Segment przejechany zostaje pełny (to samo indygo), nadchodzący pusty, a przy powrocie z 03 na 01 dwa pełne zwijają się w 260ms, zamiast zgasnąć w jednej klatce. · PODPISÓW NIE MA. Numer etapu pada w tej sekcji RAZ, na belce karty („01 BrandinAI znajduje lukę", .hp-cia-stage-n, 12px/600 w indygo). Do tej rundy padał dwa razy, dwoma krojami, w odległości 34–137px — dokładnie ta dwoistość, którą właściciel nazwał „te cyfry do nawigacji pod animacją". · STOI NAD SCENĄ, nie pod nią. Powód jest mierzalny, nie estetyczny: pod sceną wskaźnik ODRYWAŁ SIĘ od karty wszędzie poniżej 900px. Wysokość sceny jest zablokowana na najwyższej z trzech kart, a poniżej 900px karty nie dorastają do niej (kończą się na swojej treści — wywód w bloku 9.3), więc odległość od dna karty do wskaźnika zmieniała się z każdym obrotem pętli: przy 390px 137,1 / 46,4 / 105,7px (huśtanie 90,7px), przy 768px 62,0 / 38,2 / 62,2px. Właściciel skarżył się na dokładnie to wrażenie. Nad sceną odległość jest JEDNA przy każdej szerokości i na każdej karcie, bo górna krawędź sceny nie zależy od tego, co na niej stoi. Przy okazji wskaźnik zapowiada etap, zamiast podpisywać go po fakcie — i staje w jednej linii z kickerem lewej kolumny. Kontrasty, tło sekcji #FFFFFF (na /pl te same paski leżą na #F4F5F8): tor nieaktywny #D2D5DF 1,47:1 na bieli — na /pl ten sam tor ma 1,34:1 na swojej sekcji, czyli tutaj jest WIDOCZNIEJSZY niż we wzorcu, a do tego dwa razy wyższy (4px zamiast dotychczasowych 2px) i zaokrąglony. Tor niczego nie oznajmia: stan niesie wypełnienie, a dla kontrolki opisanej tekstem WCAG 1.4.11 nie wymaga kontrastu krawędzi. tor bieżącego #D6DAFB 1,38:1 — pod wypełnieniem, widać go tylko jako resztę paska wypełnienie #5B5CE6 5,10:1 na bieli i 3,71:1 na swoim torze obrys fokusu #5B5CE6 5,10:1 — ten sam, co fokus paska opinii */ .cia-k .cia-k-steps { display: none; align-items: center; /* 8px — przerwa paska opinii. Do tej rundy stało tu 14px i trzy kolumny siatki, przez co rząd rozciągał się na całą szerokość kolumny (123,6px przy 1440, 225,3px przy 768). */ gap: 8px; /* Odstęp DO belki karty. Kicker lewej kolumny oddaje nagłówkowi 14px (.hp-cia-h2 w home-v2.css) i tyle samo oddaje tu wskaźnik — z tym, że 12px z tych 14 niesie już dolna wyściółka przycisku (niżej), więc zostaje 2px. Jedna liczba na jedną przerwę. Zmierzone po zmianie, odstęp od dna rzędu do górnej krawędzi belki: 1,8px na ekranie (2px układu) przy KAŻDEJ z trzech kart — wcześniej, pod sceną, ta sama szczelina liczona od dna karty miała przy 390px 137,1 / 46,4 / 105,7px. */ margin-bottom: 2px; } /* Przycisk bez wyglądu przycisku — wyściółka 12px 0 jest przepisana z .hp-testi-dot i daje celowi 30 × 28px (2.5.8 chce 24 × 24px), więc osobnej reguły na telefon już nie trzeba. Skutek uboczny, który jest tu wartością: rząd zaczyna się w tej samej linii, co kicker lewej kolumny (zmierzone przy 1440: obie krawędzie górne na y = 99,0), a sam pasek leży w dolnej części wiersza kickera — jego środek jest 6,1px (ekran) niżej. Dwie małe rzeczy na jednej linii, po jednej w każdej kolumnie: lewa mówi, o czym jest sekcja, prawa — który to etap. */ .cia-k .cia-k-step { -webkit-appearance: none; appearance: none; display: block; margin: 0; padding: 12px 0; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Wymiary i kolory 1:1 z .hp-testi-dot-bar. Przemiana szerokości też: pasek bieżącego etapu rośnie z 30px do 44px w 0,3s, więc zmiana karty jest widoczna także na wskaźniku. */ .cia-k .cia-k-step-rail { position: relative; display: block; width: 30px; height: 4px; border-radius: 999px; background: #D2D5DF; overflow: hidden; transition: width 0.3s ease, background-color 0.2s ease; } .cia-k .cia-k-step[aria-current="true"] .cia-k-step-rail { width: 44px; background: #D6DAFB; } .cia-k .cia-k-step:hover .cia-k-step-rail { background: #B9BDF0; } /* Wypełnienie jedzie transformacją, nie szerokością: transform i opacity to jedyne dwie rzeczy, które przeglądarka animuje bez przeliczania układu, a ta animacja chodzi przez cały czas trwania karty. transform-origin po lewej, bo przebieg czyta się od lewej. */ .cia-k .cia-k-step-fill { position: absolute; inset: 0; border-radius: inherit; background: #5B5CE6; transform: scaleX(0); transform-origin: 0 50%; /* Cofnięcie na końcu pętli: kiedy wraca 01, segmenty 02 i 03 zwijają się w 260ms zamiast znikać w jednej klatce. Bieżący segment ma tę przemianę wyłączoną (reguła niżej), bo rządzi nim animacja i dwa mechanizmy na jednej właściwości robiłyby szarpnięcie. */ transition: transform 260ms var(--cia-ease); } .cia-k .cia-k-step-fill.is-done { transform: scaleX(1); } /* Czas trwania dokłada skrypt (inline, w ms), bo takt należy do KARTY, a nie do arkusza — liczy się go z tego, ile jest na niej do przeczytania (wywód przy DWELL_BASE w js/hv-contentinai.js). Tu stoi tylko wartość awaryjna. */ @keyframes cia-k-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .cia-k .cia-k-step[aria-current="true"] .cia-k-step-fill { transition: none; animation: cia-k-fill 4000ms linear forwards; } /* Pauza wskaźnika i pauza pętli to ma być JEDNA rzecz. Skrypt dokłada .is-held wszędzie tam, gdzie zatrzymuje zegar (sekcja poza kadrem, kursor na scenie, fokus klawiatury w scenie, karta przeglądarki w tle) i zdejmuje ją przy wznowieniu, dopisując zegarowi dokładnie tyle, ile zostało. Gdyby wypełnienie jechało dalej przy stojącej pętli, wskaźnik dojeżdżałby do końca i kłamał: „zaraz zmiana", a zmiany by nie było. */ /* Selektor jest tak długi celowo: reguła wyżej ustawia SKRÓT `animation`, a skrót zeruje animation-play-state do `running`. Zmierzone na krótszym selektorze (.cia-k.is-held .cia-k-step-fill, 0-3-0 wobec 0-4-0): po najechaniu kursorem pętla stawała, a wypełnienie jechało dalej i dobijało do 1,000 — wskaźnik obiecywał zmianę karty, której nie było. */ .cia-k.is-held .cia-k-step[aria-current="true"] .cia-k-step-fill { animation-play-state: paused; } .cia-k .cia-k-step:focus-visible { outline: 2px solid #5B5CE6; outline-offset: 2px; border-radius: 4px; } /* --- 9.5. ranga belki karty (tylko w sekwencji) ------------------------------ */ /* Właściciel: „ta hierarchia treści się sypie". Pierwsza połowa problemu to było wyrównanie (blok 9.1, align-items). Druga jest tutaj: belka karty miała WAGĘ I KOLOR nagłówka sekcji. Zmierzone przy 1440, px deklarowane / px na ekranie przy body{zoom:.9}: H2 sekcji 42px / 37,8px waga 600 #14162B .hp-cia-stage-brand 15px / 13,5px waga 600 #14162B ← ta sama waga, ten sam kolor .hp-cia-stage-title 15px / 13,5px waga 400 #4C5163 Stopień się różnił, ale waga i kolor nie — a to one decydują, co oko bierze za nagłówek, kiedy dwie rzeczy stoją obok siebie w jednym wierszu wzroku. W układzie poprzednim to nie przeszkadzało, bo tam H2 stało NAD kartami na całą szerokość i pytania o rangę nie było. W układzie dwukolumnowym belka jest sąsiadem H2, nie jego podwładnym, więc musi zejść — ale WYŁĄCZNIE kolorem: .hp-cia-stage-brand 15px / 13,5px waga 600 #4C5163 (7,88:1) .hp-cia-stage-title 15px / 13,5px waga 400 #5F6478 (5,86:1) Oba kolory są z palety tej strony: #4C5163 to lead każdej sekcji, #5F6478 to kicker. RUNDA DOPRACOWANIA — STOPIEŃ WRACA NA 15px. Poprzednia runda zbijała tu belkę z 15px na 13,5px i to była poprawka o jeden krok za daleko: ODWRACAŁA hierarchię WEWNĄTRZ karty, czyli robiła to samo, na co właściciel poskarżył się rundę wcześniej (blok 1 tego pliku: „NAGŁÓWEK odsłony był praktycznie tej samej wielkości co zawartość karty, którą zapowiada"). Zmierzone przed cofnięciem, px deklarowane: belka 13,5px opis pod nią (.hp-cia-stage-text) 13px (≥641px) belka 13,5px opis pod nią 14px (≤640px, bo marketing.css daje tam `p { font-size: 14px !important }`) Czyli na telefonie NAGŁÓWEK KARTY BYŁ MNIEJSZY OD WŁASNEGO TEKSTU, a na desktopie różnica wynosiła 0,5px przy tej samej wadze 400 na tytule — nie do odróżnienia. Po cofnięciu schodek jest z powrotem czytelny: 15 / 13px przy ≥641px i 15 / 14px przy ≤640px, dokładnie tak, jak w układzie poprzednim. Rangi wobec H2 to nie psuje, bo H2 jest 2,8× większe (42 wobec 15px) i jako jedyne w tej okolicy jest w #14162B. TYLKO pod .is-seq: klatka bazowa ma zostać co do piksela tym, czym był układ poprzedni, a tam belka jest jedyną głową swojej kolumny i jej dotychczasowy kolor jest słuszny. */ .cia-k.is-seq .hp-cia-stage-brand { color: #4C5163; } .cia-k.is-seq .hp-cia-stage-title { color: #5F6478; } /* Akapit o relacji obu produktów przestał być dopiskiem nad przyciskiem i jest zwykłym akapitem sekcji (.hp-cia-lead w szablonie, treść w kluczu 'home.note'). Tutaj zostaje jedno: na telefonie blok 1 tego pliku daje KAŻDEMU .hp-cia-lead w tej sekcji margin-top: 14px, więc oba akapity mają tam ten sam odstęp, co jest w porządku; od 641px pierwszy akapit dziedziczy swoje 18px z home-v2.css i drugi ma mieć dokładnie tyle samo. Nie ustawiamy więc nic — ta uwaga istnieje po to, żeby następna osoba nie „naprawiła" zgodnego odstępu własną liczbą. */ /* --- 9.6. drobne poprawki wnętrz kart pod szerszą kolumnę ------------------- */ /* NADPISANIE 3: .hp-cia--row .hp-cia-scores { --cia-meter: clamp(34px, 6vw - 20px, 46px) } w paśmie 900–999px (blok 4). Tamta miara jedzie z oknem, bo w układzie poprzednim karta była tam jedną trzecią rzędu i miała 179–212px wnętrza. W sekwencji karta ma w tym paśmie 424px szerokości, czyli tyle, co w kadrze 1440px, więc para pierścieni wraca do swojej pełnej miary — inaczej na progu 1000px miernik skakałby o 12px bez żadnego powodu w układzie. Pod .is-seq, bo w klatce bazowej karta JEST jedną trzecią rzędu i tamta miara jest słuszna. */ @media (min-width: 900px) and (max-width: 999px) { .cia-k.is-seq .hp-cia-scores { --cia-meter: 46px; } } /* KLATKA BAZOWA W PAŚMIE 900-999px — cztery reguły przepisane 1:1 z bloku 8. Tamten blok trzyma je pod selektorem .hp-cia--row .hp-cia-flow i mówi wprost dlaczego: klatka bazowa własnego rzędu NIE buduje na .hp-cia-flow, tylko na .cia-k-stage, więc tamten blok jej nie dotyka. Dla układu kompaktowego to bez znaczenia (tam karta stoi sama w kolumnie 440px i zoomu nie potrzebuje, stąd reguła wyżej). Dla KLATKI BAZOWEJ, która ma być rzędem trzech kart co do piksela, ma: marketing.css włącza body{zoom:.9} dopiero od 1000px, więc bez tego bloku rząd jest w tym paśmie naprawdę ciaśniejszy niż o piksel okna dalej i karta 02 rozpycha wszystkie trzy. Zmierzone przy 900px (wysokość jednej karty / wysokość sekcji): układ poprzedni 342,2px / 1068,5px klatka bazowa BEZ tego 446,2px / 1142,8px (+104,0 / +74,3) klatka bazowa Z tym 342,2px / 1028,2px (0,0 / -40,3 wobec poprzedniego) Pasmo 900-999px było jedynym, w którym klatka bazowa wychodziła WYŻSZA od układu, który zastępuje. Poza nim była niższa o 56-105px i taka zostaje. */ @media (min-width: 900px) and (max-width: 999px) { .cia-k:not(.is-seq) .cia-k-stage { zoom: 0.9; } .cia-k:not(.is-seq) .cia-k-stage .hp-cia-scores { --cia-meter: 46px; } .cia-k:not(.is-seq) .cia-k-stage .hp-cia-tool { padding: 3px 6px; } .cia-k:not(.is-seq) .cia-k-stage .hp-cia-sel { padding-left: 9px; padding-right: 9px; } } /* --- 9.7. jedna stopka w trzech kartach ------------------------------------------ */ /* Właściciel: „dół karty animacji — raz mamy wyśrodkowane, innym razem nie — ujednoliciłbym to". Trzy karty kończyły się trzema różnymi gestami: 01 — zdanie „Luka:" zawieszone w środku rozciągniętego bloku, 02 — para pierścieni wyśrodkowana, 03 — etykieta i modele przy lewej krawędzi, przy dnie (a poniżej 900 px etykieta obok modeli). Teraz każda karta kończy się tak samo, przy każdej szerokości: włosowa kreska, etykieta mono, treść — do lewej. 01 LUKA DO ZAPEŁNIENIA → zdanie o luce (czerwone, jak dotąd) 02 OCENA ARTYKUŁU → pierścienie SEO / GEO 03 CYTUJĄ TWÓJ ARTYKUŁ → modele Stopka ma swoją naturalną wysokość. Zapas (scena ma wysokość najwyższej karty) bierze lista wierszy w 01 i 03 (space-between z bloku 2 — wiersze oddychają) i tekst artykułu w 02 (align-content: space-between ciała edytora), więc kreska stopki stoi zawsze tuż nad nią, a nie nad pustym polem. Tylko home (.hp-cia--row) — strona produktu ma inne karty. */ .hp-cia--row.cia-k .hp-cia-close, .hp-cia--row.cia-k .hp-cia-cited { flex: 0 0 auto; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 8px; margin-top: 12px; border-top: 1px solid #EBEDF2; padding-top: 12px; } .hp-cia--row.cia-k .hp-cia-close .hp-cia-gap { margin: 0; } /* Modele zawsze w jednym rzędzie (poniżej 700 px stały jeden pod drugim — stopka 03 miała wtedy 107 px przy 55 px stopki 01). Trzy pozycje mieszczą się w rzędzie już przy 360 px. */ .hp-cia--row.cia-k .hp-cia-models { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 8px 18px; } /* H7 — ZNAK NAD SWOJĄ NAZWĄ, NA ŚRODKU, PRZY KAŻDEJ SZEROKOŚCI. Od 900 px kafelek był już pionowy (blok 5d), a środkowanie oddał mu blok 7c. Poniżej 900 px stał jeszcze wiersz „znak · nazwa" (15 px), czyli ta sama stopka miała dwa kształty zależnie od okna. Teraz jeden: znak 18 px z plakietką nad nazwą, oś znaku = oś nazwy (zmierzone 0,00 px różnicy przy 360–1440, PL i EN). Rząd dalej zaczyna się przy lewej krawędzi etykiety: nazwa jest w każdym kafelku szersza od znaku, więc kafelek zaczyna się krawędzią nazwy. Koszt poniżej 900 px: stopka karty 03 rośnie o 22 px. Karta 03 miała tam zapas do najwyższej karty (02), więc scena nie zmienia wysokości nigdzie poza pasmem ~560–640 px, gdzie rośnie o 6 px (440 → 446) — w każdej odsłonie tak samo, więc nic nie skacze. Pomiary w raporcie H7. */ .hp-cia--row.cia-k .hp-cia-model { flex-direction: column; align-items: center; gap: 4px; text-align: center; } .hp-cia--row.cia-k .hp-cia-model .mkt-llm { width: 18px; height: 18px; } /* 02: tekst artykułu nad stopką w każdym paśmie (wcześniej 641–899 px stał obok niej jako słupek), pierścienie w rzędzie od lewej, etykieta nad nimi. */ .hp-cia--row.cia-k .hp-cia-editor-body { grid-template-columns: minmax(0, 1fr); gap: 12px; } /* Karta 02 ma wyściółkę na samej karcie (pasek dokumentu jest wcięty) i drugą na ciele edytora, więc jej stopka kończyła się 32 px nad dnem przy 16 px w kartach 01 i 03. Dno ciała zeruje się, dolny odstęp stopki jest ten sam we wszystkich trzech kartach. */ .hp-cia--row.cia-k .hp-cia-card.is-editor .hp-cia-editor-body { padding-bottom: 0; } .hp-cia--row.cia-k .hp-cia-scores { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; row-gap: 8px; width: auto; border-left: 0; border-top: 1px solid var(--cia-line); padding: 12px 0 0; } .hp-cia--row.cia-k .hp-cia-scores > .hp-cia-foot-label { flex: 0 0 100%; } .hp-cia--row.cia-k .hp-cia-score + .hp-cia-score { border-left: 1px solid var(--cia-line); } /* ============================================================================= * 10. UKŁAD KOMPAKTOWY NA STRONIE PRODUKTU — TEN SAM, CO NA HOME * * Właściciel, po obejrzeniu zatwierdzonego układu na /pl: „I wtedy na produkcie to samo, ale * dodać tam niżej — typu co «co dokłada contentinai» / jakoś to rozszerzyć". * * „TO SAMO" ZNACZY TU UKŁAD I NASTĘPSTWO, NIE TREŚĆ. Home opowiada pętlę między produktami * w trzech taktach (luka → artykuł → cytowania) i ma po prawej trzy karty. Produkt pokazuje * JEDNO przejście w głąb: zakładkę „Tworzenie treści" w BrandinAI i to, co otwiera się po * drugiej stronie kliknięcia. Kart 01/02/03 z home tu nie ma i nie będzie — są dwa panele, * te same co dotąd, z tą samą treścią. Zmienia się to, że stoją JEDEN PO DRUGIM W CZASIE, * a nie obok siebie. * * CO TO NAPRAWIA — dwie rzeczy, obie zmierzone: * 1. RUCH BEZ NASTĘPSTWA. Sekcja miała 1158 px przy 1440 i przy wejściu w kadr startowała * 53 animacje w jednej klatce (zegar przewijania, blok 6g — wyszedł). Właściciel: „jak na * raz zacznie migać wszystko to będzie kieeeepsko". * 2. OBIETNICA BEZ POKRYCIA. Lead mówi: „Przy wybranym temacie klikasz «Pisz w ContentInAI» * i lądujesz w edytorze z projektem oraz briefem" — a na ekranie stały dwa panele obok * siebie i NIC ich nie łączyło poza strzałką w rynience. Teraz to samo zdanie dzieje się * na scenie: widżet po lewej dojeżdża do przycisku „Pisz w ContentInAI →", scena * przenika, a prawy panel SKŁADA SIĘ jako skutek (blok 10.6). * * CO JEST WZIĘTE Z ZATWIERDZONEGO UKŁADU, A NIE NAPISANE OD NOWA: * · WSKAŹNIK PRZEBIEGU — sekcja nosi klasę .cia-k i nazwy .cia-k-steps / -step / -step-rail / * -step-fill, więc wskaźnik ubiera BLOK 9.4, ten sam i dosłownie ten sam, co na home * (a ten jest przepisany 1:1 z paska opinii .hp-testi-dots). Ani jednej liczby nie ma tu * powtórzonej — gdyby była, dwa wskaźniki na jednym landingu zaczęłyby się rozjeżdżać przy * pierwszej poprawce. Z bloku 9 sekcja bierze WYŁĄCZNIE to: reguły .cia-k-wrap, -grid, * -left, -right, -stage, -slide, -foot i .cia-k.is-seq .hp-cia-stage-* nie mają tu czego * złapać, bo takich klas ta sekcja nie ma (sprawdzone selektor po selektorze). * · SEKWENCJA — prowadzi ją ten sam plik, js/hv-contentinai.js, bez jednej linii zmiany: * szuka [data-cia-kompakt] i jest napisany na N odsłon (`slides.length < 2` to jedyny próg), * a takt liczy z WŁASNEJ treści odsłony, więc dwa panele dostają swoje ~4,0 / 4,2 s same * z siebie. Pauza poza kadrem, pod kursorem, przy fokusie i w tle karty — stamtąd. * · PRZENIKANIE — te same 400 ms liniowo z tym samym opóźnieniem 150 ms na wyjściu * (blok 9.3): suma kryć nie spada poniżej 1, więc między odsłonami nie przebija biel. * * CZYM SEKCJA RÓŻNI SIĘ OD HOME I DLACZEGO: * · DWIE ODSŁONY, NIE TRZY — bo takie jest przejście: skąd i dokąd. * · ODSŁONA TO PANEL, nie belka z kartą pod spodem. Kto mówi, mówi PASEK GŁOWY panelu * („BrandinAI · Tworzenie treści" / znak słowny + „Nowy artykuł") — pasek stoi tam od * rundy „naturalne rozwinięcie" i jest tu dokładnie tym, czym na home jest belka odsłony. * Dlatego to on nosi [data-cia-head]: skrypt równa wysokości głów, żeby ciało panelu * zaczynało się w obu odsłonach w tej samej linii. * · SCENA JEST SZERSZA: 520 px zamiast 440 px (od 1000 px w górę i w całym paśmie 641–899 px). * Panel to zrzut ekranu aplikacji, a nie karta z trzema wierszami — widżet .mkt-cd skaluje * się kubkiem (@container: 380 / 470 / 620 px) i przy 440 px wpada o stopień niżej, czyli sam * chowa pasek kolumn, opis rekomendacji i piąty wiersz listy (ten sam mechanizm opisuje * blok 6h). Przy 520 px kubek ma 518 px, czyli ten sam stopień, co dziś przy 1440 (508 px) — * sekcja zmienia UŁOŻENIE paneli, nie ich zawartość. * · JEDYNE PASMO ZE SCENĄ 440 px TO 900–999 px. Kadr ma tam 836 px układu (body { zoom: .9 } * z marketing.css wchodzi dopiero od 1000 px), więc scena 520 px zostawiłaby lewej kolumnie * 282 px — nagłówek 42 px rozpadłby się na siedem wierszy. Scena dostaje tam te same * 320–440 px, co na home. * ========================================================================== */ /* --- 10.1. rama sekcji -------------------------------------------------------- */ /* KADR. Sekcja pisała max-width: 1180px w atrybucie style, a home-v2.css przykrywała to regułą [data-home-v2] [style*="max-width: 1180px"] { max-width: var(--hp-container) }. Czytamy tę samą zmienną wprost — te same 1320 px i ta sama rynienka, co w nawigacji, cenniku i stopce; zero zmiany na ekranie, o jedną regułę-niespodziankę mniej. Poniżej 640 px marketing.css zbija rynienkę do 20 px (section > div, !important) i tak ma zostać — .hp-ciap-wrap jest bezpośrednim dzieckiem sekcji, więc ta reguła go łapie. */ .hp-ciap .hp-ciap-wrap { max-width: var(--hp-container, 1320px); margin: 0 auto; padding: 0 32px; } .hp-ciap .hp-ciap-grid { display: grid; gap: 34px; } .hp-ciap .hp-ciap-left { min-width: 0; } .hp-ciap .hp-ciap-right { min-width: 0; } /* Miara wiersza. Dotąd trzymał ją .hp-ciap-head { max-width: 760px } (home-v2.css) i ma ją trzymać dalej — w układzie jednokolumnowym (do 999 px) kontener ma do 935 px, a lead puszczony na całą tę szerokość ma 112 znaków w wierszu wobec 84 dzisiaj. W układzie dwukolumnowym reguła nie bije: lewa kolumna ma tam 672–692 px. Stopka (zdanie o relacji obu produktów + CTA) celowo NIE jest ograniczona — w klatce bazowej jest wierszem od krawędzi do krawędzi, tak jak była, i tak samo robi to home. */ .hp-ciap .hp-ciap-left > .hp-cia-kicker, .hp-ciap .hp-ciap-left > .hp-cia-h2, .hp-ciap .hp-ciap-left > .hp-cia-lead { max-width: 760px; } /* STOPKA SEKCJI WESZŁA DO LEWEJ KOLUMNY — tak samo jak na home (.cia-k-foot). W układzie kompaktowym akapit o relacji obu produktów i CTA stoją jeden pod drugim, każde ze swoim własnym marginesem (18 px akapitu z bloku 1b, 26 px przycisku z home-v2.css), więc tutaj zerujemy tylko to, co stopce zostało po jej poprzednim życiu na dnie sekcji: margines 54 px, wyściółkę 26 px i włosową kreskę nad nią (blok 6d). KRESKI NAD NIĄ NIE MA I TO JEST RÓŻNICA ZAMIERZONA, ta sama, co na home: kreska zamykała rząd paneli pod sobą, a tutaj akapit stoi NAD nimi i kreska odcinałaby go od nagłówka, do którego należy. */ .hp-ciap .hp-ciap-foot { display: block; margin: 0; padding: 0; border-top: 0; } /* KLATKA BAZOWA (bez JS, „ogranicz ruch") — stopka wraca do wiersza: akapit przy lewej krawędzi, CTA przy prawej, dokładnie jak w układzie, który ta runda zastępuje. Bez tej reguły klatka bazowa rosłaby o wysokość przycisku i jeden odstęp — ten sam rachunek, który home zamknęła przy .cia-k-foot. Liczby (18/40 px przerwy, flex-basis 380 px akapitu) są te same, co tam i co w .hp-cia--row .hp-cia-row-foot; baza 380 px stoi w bloku 1b i dalej obowiązuje. */ @media (min-width: 900px) { .hp-ciap:not(.is-seq) .hp-ciap-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 40px; margin-top: 18px; } .hp-ciap:not(.is-seq) .hp-ciap-foot .hp-cia-note { margin: 0; } .hp-ciap:not(.is-seq) .hp-ciap-foot .hp-cia-cta { margin: 0; } } /* UKŁAD KOMPAKTOWY — dwie kolumny, prawa jako scena. Tylko z sekwencją, czyli tylko wtedy, kiedy w prawej kolumnie stoi JEDEN panel naraz; bez niej stoją tam dwa i kolumna byłaby dwa razy wyższa od lewej. Sufit sceny jedzie w dwóch krokach: 440 px w paśmie 900–999 px (tam kadr ma 836 px i nie ma z czego dać więcej) i 520 px od 1000 px w górę, kiedy wchodzi body { zoom: .9 } i kadr robi się 1111 px układu. Podłogi (320 / 380 px) trzymają prawy panel w całości na progu każdego z tych pasm; przy 1000 px kadr rozkłada się na 520 + 44 + 483 px lewej kolumny. Wyrównanie GÓRĄ, nie do środka — ta sama decyzja, co na home i z tego samego powodu: przy środkowaniu pasek głowy panelu wychodził wyżej niż kicker lewej kolumny i pierwsze, co oko łapało w sekcji, była etykieta makiety, a nie nagłówek. */ @media (prefers-reduced-motion: no-preference) { @media (min-width: 900px) { .hp-ciap.is-seq .hp-ciap-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 34px; align-items: start; } } /* PASMO 900–999 px jest jedynym, w którym scena jest WĘŻSZA niż docelowe 520 px, i to jest świadomy handel. Kadr ma tam 836 px układu (body { zoom: .9 } z marketing.css wchodzi dopiero od 1000 px), więc scena 520 px zostawiłaby lewej kolumnie 282 px — nagłówek 42 px rozpadłby się na siedem wierszy. Scena dostaje więc te same 320–440 px, co na home, a widżet wpada o stopień kubka niżej i sam chowa pasek kolumn, opis rekomendacji i piąty wiersz listy. Zmierzone w tym paśmie (wysokość sekcji, 900 px / 999 px): dziś, układ do tej rundy 1497,2 / 1457,1 jedna kolumna, scena na całą szerokość 1819,9 / 1911,3 (GORZEJ niż dziś) dwie kolumny, scena 440 px 1229,3 / 1181,1 (-17,9% / -18,9%) Wersja z jedną kolumną odpadła z pomiaru, nie z gustu: przy scenie na całą szerokość panel ma 766 px (900) i 852 px (999) własnej wysokości, bo widżet pokazuje w kubku 836 px WSZYSTKO — czyli sekcja wychodzi wyższa niż układ, który zastępuje. */ @media (min-width: 1000px) { .hp-ciap.is-seq .hp-ciap-grid { grid-template-columns: minmax(0, 1fr) minmax(380px, 520px); gap: 44px; } } @media (min-width: 1200px) { .hp-ciap.is-seq .hp-ciap-grid { gap: 64px; } } } /* PONIŻEJ 900 px SCENA MA TE SAME 520 px, CO W DWÓCH KOLUMNACH — i to jest pomiar, nie gust. Widżet w lewym panelu skaluje całą typografię szerokością kubka (--u jedzie z cqw), więc puszczony na całą szerokość kolumny rośnie bez końca, a panel z konspektem zostaje tam, gdzie był: scena stoi na wyższym z dwóch, więc pod krótszym otwierała się biel. Zmierzone (własna wysokość panelu z widżetem / panelu z konspektem, przy suficie sceny): 768 bez sufitu 643,6 / 473,3 → 170,3 px bieli pod krótszym 620 px 568,8 / 473,3 → 95,5 560 px 514,1 / 473,3 → 40,8 520 px 477,1 / 473,3 → 3,8 640 bez sufitu 550,1 / 464,9 → 85,2 520 px 475,3 / 464,9 → 10,4 860 bez sufitu 729,5 / 473,3 → 256,2 520 px 477,1 / 473,3 → 3,8 Przy 520 px oba panele kończą się praktycznie w jednej linii w całym paśmie 641–899 px, czyli dokładnie to, co daje siatka dwóch kolumn wyżej. Sufit jest ten sam, co tam, więc scena ma w każdym oknie od 641 px tę samą miarę i widżet ani razu nie zmienia stopnia pisma. Poniżej 641 px sufit nie bije (kadr jest węższy niż 520 px), więc na telefonie nic się nie zmienia. Wyrównanie idzie za tekstem: do lewej tam, gdzie tekst jest do lewej, i do środka tam, gdzie marketing.css środkuje nagłówek. Reguła jest pod .is-seq — klatka bazowa poniżej 900 px stawia panele jeden pod drugim na całą szerokość, tak jak dotąd. */ @media (prefers-reduced-motion: no-preference) and (max-width: 899px) { .hp-ciap.is-seq .hp-ciap-right { max-width: 520px; } } @media (prefers-reduced-motion: no-preference) and (max-width: 640px) { .hp-ciap.is-seq .hp-ciap-right { margin-left: auto; margin-right: auto; } } /* Na telefonie nagłówek, kicker i lead są wyśrodkowane przez marketing.css i przez blok 1 tego pliku, więc akapit o relacji obu produktów i CTA idą za nimi — inaczej w jednej kolumnie stałyby dwa różne wyrównania jedno pod drugim. Wskaźnik przebiegu i podpis przekazania zostają przy lewej krawędzi: to jest oś czasu, a oś czasu czyta się od krawędzi. */ @media (max-width: 640px) { .hp-ciap .hp-ciap-left { text-align: center; } } /* --- 10.2. scena, odsłony i klatka bazowa ------------------------------------ */ /* KLATKA BAZOWA — oba panele naraz, obok siebie od 900 px, jeden pod drugim niżej. To jest klatka z serwera: widzi ją gość bez JS i każdy z prefers-reduced-motion: reduce, i to ona jest układem, który ta sekcja miała do tej rundy. Kolumna przekazania (168 px w środku mostka) z niej wyszła — podpis stoi teraz poziomo nad sceną (blok 10.5). Po niej zostaje PRZERWA 88 px, czyli połowa tamtej kolumny, i to jest liczba zmierzona, a nie estetyczna. Widżet w lewym panelu skaluje całą typografię szerokością kubka (--u jedzie z cqw), więc każdy piksel oddany panelom wraca wysokością sekcji — zmierzone przy 1440 (szerokość panelu → własna wysokość panelu z widżetem): przerwa 24 px → 554,4 px → 508,2 px przerwa 44 px → 545,4 px → 500,1 px przerwa 64 px → 536,4 px → 490,9 px przerwa 88 px → 525,6 px → 480,1 px przerwa 120 px → 511,2 px → 468,7 px przerwa 168 px → 489,6 px → 449,6 px (dzisiejszy mostek, co do piksela) Wybrane jest 120 px, czyli te 168 px minus wyściółka, którą kolumna miała po obu stronach. Przy 88 px panele robiły się o 36 px szersze niż dziś i klatka bazowa rosła z tego tytułu o 30,5 px — a ona ma być NIŻSZA od układu, który zastępuje, nie wyższa (rachunek co do piksela przy każdej szerokości stoi w raporcie rundy). Przerwy 168 px też nie zostawiamy: dziś stoi w niej kolumna z kreską, krążkiem i podpisem, a po ich przeprowadzce nad scenę byłaby pustym polem szerokim na jedną trzecią panelu. */ .hp-ciap .hp-ciap-stage { position: relative; min-width: 0; margin: 18px 0 0; display: grid; gap: 18px; align-items: stretch; } @media (min-width: 900px) { .hp-ciap .hp-ciap-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 120px; } } /* Odsłona to PUDEŁKO NA PANEL, a nie sam panel — i to jest ta sama kość, co na home, gdzie .cia-k-slide obejmuje belkę i kartę. Powód jest mierzalny: skrypt daje odsłonom wspólną wysokość (najwyższa z dwóch przy aktualnej szerokości), żeby scena nie skakała przy zmianie. Gdyby odsłoną był sam panel, ta wysokość wchodziłaby W PANEL i pod treścią krótszego z nich otwierałaby się dziura w środku kremowego pudełka — dokładnie to, co właściciel odrzucił na home („karta nie może stać pusta"). Tak: od 900 px panel dorasta do odsłony CELOWO (bo tam zapas ma gdzie pójść — w konspekcie rozdaje go lista, blok 6f, w widżecie jego wiersze, blok 6h i .mkt-cd-row w product-v2.css), a poniżej 900 px kończy się na swojej treści i zapas zostaje BIELĄ POD PANELEM, czyli tłem sekcji. */ .hp-ciap .hp-ciap-slide { display: flex; flex-direction: column; min-width: 0; } .hp-ciap .hp-ciap-slide > .hp-ciap-panel { flex: 0 0 auto; width: 100%; } @media (min-width: 900px) { .hp-ciap .hp-ciap-slide > .hp-ciap-panel { flex: 1 1 auto; } } /* TELEFON: WIDŻET DOSTAJE Z POWROTEM TO, CO CHOWAŁ — druga połowa tej samej umowy, co blok 6h, tylko na drugim końcu skali. Widżet .mkt-cd chowa poniżej kubka 380 px opis rekomendacji, pasek kolumn i piąty wiersz, bo tamten stopień jest policzony pod KWADRATOWĄ klatkę 350 × 350 w „Jak to działa", gdzie brakuje wysokości. Na scenie jest odwrotnie: klatka ma 350 px szerokości i 540 px wysokości, bo taką wysokość dyktuje panel z konspektem — a różnica między nimi stawała się BIAŁĄ DZIURĄ pod panelem z widżetem. Zmierzone, własne wysokości paneli (widżet / konspekt): 390 przed 328,0 / 539,8 → 211,8 px bieli pod krótszym panelem po 476,0 / 539,8 → 63,8 px, czyli MNIEJ niż na home (91,1 px przy 390) 320 przed 359,7 / 610,3 → 250,6 po 487,9 / 610,3 → 122,4 Scena nie rośnie ani o piksel, bo dyktuje ją inna odsłona. Reguła siedzi pod .is-seq: w klatce bazowej panele stoją jeden pod drugim, każdy na swojej wysokości, i dziury nie ma czym leczyć, bo jej nie ma. Od rundy 10.8 scenę dyktuje odsłona 03 (390: 685 px wobec 475 px odsłony z widżetem). Panel kończy się tu na swojej treści (blok 10.2), więc W PANELU pod ostatnim wierszem jest sama wyściółka (14 px), a reszta to tło sekcji pod nim. Do panelu jej nie wciągamy: oddać nie ma już czego, a wiersze musiałyby urosnąć z 34 do ~86 px. */ @media (max-width: 640px) { .hp-ciap.is-seq .mkt-cd-colhead { display: grid; } .hp-ciap.is-seq .mkt-cd-desc { display: block; } .hp-ciap.is-seq .mkt-cd-list > .mkt-cd-row:nth-child(n+5) { display: grid; } } /* Klatka bazowa poniżej 900 px: panele jeden pod drugim, ta sama przerwa (18 px), co miał mostek — reguła w max-width, a nie zerowana wyżej, żeby nie zależeć od kolejności. */ @media (max-width: 899px) { .hp-ciap .hp-ciap-slide + .hp-ciap-slide { margin-top: 18px; } } /* --- 10.3. sekwencja (tylko z JS i tylko przy niezredukowanym ruchu) --------- */ @media (prefers-reduced-motion: no-preference) { /* Obie odsłony leżą w tym samym miejscu sceny. Żadna nie znika z drzewa dostępności: nie ma tu display: none, visibility: hidden ani aria-hidden — czytnik ekranu ma dojście do całej treści obu paneli, tak samo jak gość bez JS. Oko widzi jedną, bo druga ma krycie 0. Przenikanie: 400 ms liniowo, wyjście opóźnione o 150 ms, żeby suma kryć nie spadła poniżej 1 i między odsłonami nie przebiła się biel. Wyprowadzenie i pomiary — blok 9.3. */ .hp-ciap.is-seq .hp-ciap-stage { display: block; gap: 0; } .hp-ciap.is-seq .hp-ciap-slide { position: absolute; inset: 0 0 auto 0; margin-top: 0; opacity: 0; transform: translateY(6px); pointer-events: none; user-select: none; transition: opacity 400ms linear 150ms, transform 400ms var(--cia-ease) 150ms; } .hp-ciap.is-seq .hp-ciap-slide.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; user-select: auto; z-index: 1; transition: opacity 400ms linear, transform 460ms var(--cia-ease); } } /* --- 10.4. wskaźnik przebiegu ------------------------------------------------ */ /* Wskaźnika NIE MA W TYM BLOKU i to jest cała jego treść: sekcja nosi klasę .cia-k, a jego nazwy klas (.cia-k-steps / -step / -step-rail / -step-fill) ubiera blok 9.4 — ten sam, co na home, przepisany 1:1 z paska opinii na /pl (.hp-testi-dots): 30/44 × 4 px, pigułka, tor #D2D5DF i #D6DAFB, wypełnienie #5B5CE6, przerwa 8 px, obrys fokusu #5B5CE6. Obietnica „nie projektuj nowego wskaźnika" jest tu dotrzymana najmocniej, jak się dało: nie ma czego rozjechać, bo nie ma drugiego zestawu liczb. Zostaje jedna różnica i wynika z tego, że wskaźnik dzieli tu wiersz z podpisem przekazania: 2 px odstępu do sceny niesie .hp-ciap-scene-head, nie sam rząd segmentów. */ .hp-ciap .cia-k-steps { margin-bottom: 0; } /* --- 10.5. podpis przekazania ------------------------------------------------ */ /* KOLUMNA PRZEKAZANIA PRZESTAŁA BYĆ KOLUMNĄ. Stała między panelami, pionowo, i miała 168 px na 34-pikselowy krążek ze strzałką, etykietę i zdanie łamane na cztery wiersze w 20 znakach. W sekwencji nie ma „między panelami": panele leżą jeden na drugim. Ten sam podpis stoi więc POZIOMO NAD SCENĄ, w jednym wierszu ze wskaźnikiem — czyta się przed przejściem, a nie obok niego, i jest tą samą rzeczą w obu klatkach (w bazowej, bez wskaźnika, jest tytułem pary paneli pod sobą). Krążek schodzi z 34 px na 22 px: sąsiadem są teraz paski wskaźnika (4 px), a nie dwa panele po 470 px wysokości. Zdanie traci limit 20 znaków, bo ma cały wiersz kolumny: przy 520 px podpis mierzy 356 px razem ze wskaźnikiem (82 px) i przerwą — mieści się w jednej linii w każdym kadrze od 1000 px w górę, a niżej zawija się pod wskaźnik i tam też ma swoje miejsce. */ .hp-ciap .hp-ciap-scene-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 2px; } .hp-ciap .hp-ciap-join { flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 4px 8px; padding: 0; margin: 0; text-align: left; } /* Etykieta („jedno kliknięcie") nie łamie się nigdy na dwa wiersze: jest podpisem strzałki stojącej obok, a nie zdaniem. Zmierzone przy 390 px przed tą linią: wiersz miał 350 px, zdanie obok zabierało 230 px i etykieta łamała się na „JEDNO / KLIKNIĘCIE" — dwa wiersze mono wielkimi literami przy krążku wysokim na jeden. Teraz zawija się zdanie, czyli to, co jest zdaniem. */ .hp-ciap .hp-ciap-join-label { flex: 0 0 auto; } /* Zdanie zawija się w wierszu, a nie w 20 znakach: limit 20ch miał sens w kolumnie szerokiej na 151 px, a tutaj zdanie ma cały wiersz kolumny albo cały wiersz kadru. */ .hp-ciap .hp-ciap-join-note { flex: 1 1 auto; min-width: 0; max-width: none; } .hp-ciap .hp-ciap-join-mark { width: 22px; height: 22px; flex: 0 0 auto; } .hp-ciap .hp-ciap-join-mark svg { width: 14px; height: 8px; transform: none; } /* --- 10.6. prawy panel składa się jako SKUTEK przekazania -------------------- */ /* To jest odpowiedź na drugą awarię z nagłówka bloku: sekcja obiecywała przejście i go nie pokazywała. Teraz pokazuje, a umowa jest ta sama, co na home: STRUKTURA STOI OD PIERWSZEJ KLATKI, rusza się TREŚĆ. Panel z paskiem głowy, ciałem, kreatorem i przyciskiem jest na scenie od zera — składa się to, co w tym panelu jest ZDARZENIEM: tytuł artykułu → linia konfiguracji (krok 01, zamknięty) → kreator → cztery wiersze konspektu → pieczątka LUKA Z MONITORINGU → przycisk „Zatwierdź konspekt". Razem 11 animacji, jedna po drugiej, 120–1180 ms od wejścia odsłony — wobec 53 naraz w zegarze, który wyszedł (blok 6g). Wszystkie jadą na KRYCIU i PRZESUNIĘCIU, więc żadna nie zmienia wysokości panelu: skrypt mierzy scenę raz, przy włączeniu sekwencji, i ta miara ma zostać prawdziwa. Gra to wyłącznie odsłona WŁĄCZONA (.is-on), więc powtarza się przy każdym obrocie pętli — i wyłącznie przy niezredukowanym ruchu, bo cały blok siedzi w @media. Bez JS klasy .is-on nie ma nigdzie i panel stoi w klatce końcowej, tej samej, którą widzi gość bez skryptów. */ @media (prefers-reduced-motion: no-preference) { @keyframes hp-ciap-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } @keyframes hp-ciap-stamp { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } } .hp-ciap.is-seq .hp-ciap-slide.is-on .hp-ciap-article { animation: hp-ciap-rise 0.36s var(--cia-ease) 120ms backwards; } .hp-ciap.is-seq .hp-ciap-slide.is-on .hp-ciap-setup { animation: hp-ciap-rise 0.36s var(--cia-ease) 260ms backwards; } .hp-ciap.is-seq .hp-ciap-slide.is-on .hp-ciap-wizard { animation: hp-ciap-rise 0.36s var(--cia-ease) 380ms backwards; } /* Etykieta konspektu i jego wiersze idą osobno, bo etykieta nazywa to, co się właśnie składa, więc musi być pierwsza. --i niesie numer wiersza z szablonu. */ .hp-ciap.is-seq .hp-ciap-slide.is-on .hp-ciap-outline > .hp-cia-mono { animation: hp-ciap-rise 0.34s var(--cia-ease) 500ms backwards; } .hp-ciap.is-seq .hp-ciap-slide.is-on .hp-ciap-outline li { animation: hp-ciap-rise 0.36s var(--cia-ease) calc(600ms + var(--i) * 110ms) backwards; } /* PIECZĄTKA, nie wjazd z boku — jedyna rzecz w tym panelu, która naprawdę przyjechała kliknięciem, i jedyne miejsce, gdzie oba produkty się stykają. Ten sam gest i te same liczby, co miała w zegarze, który wyszedł (skala 0,6 → 1, krycie, 0,4 s). Wiersz nie skacze, bo znacznik ma swoje miejsce zajęte od pierwszej klatki — rusza się krycie i skala. Wchodzi PO swoim wierszu (02, czyli --i: 1 → 710 ms) i po jego dojściu: 1040 ms. */ .hp-ciap.is-seq .hp-ciap-slide.is-on .hp-ciap-outline-tag { animation: hp-ciap-stamp 0.4s var(--cia-ease) 1040ms backwards; } .hp-ciap.is-seq .hp-ciap-slide.is-on .hp-ciap-brief-foot { animation: hp-ciap-rise 0.36s var(--cia-ease) 1180ms backwards; } } /* --- 10.7. „Co dokłada ContentInAI" — pięć kart jak „Twój panel" ------------- */ /* Właściciel (P10): „różnica stylu względem BrandinAI jest fajna, ale układ nie siedzi — a gdyby to wyglądało jak boxy w «Twój panel»? tam też jest 5". Pasek w kremowej ramie z pionowymi kreskami wyszedł (stał w bloku 10.8 — tamta definicja jest usunięta, ta jest jedyna). KOŚĆ I MIARY SĄ PRZEPISANE Z KART PANELU (partials/marketing/product/panel.blade.php, style inline): siatka repeat(auto-fit, minmax(…, 1fr)) z przerwą 16 px, karta z obrysem 1 px, promieniem 16 px, wyściółką 24/22 px i przerwą 12 px, ikona 24 px z obrysem 1,8, tytuł 16/600 z -0,01em, tekst 13,5/1,6 w #4C5163. Układ przy szerokościach kontrolnych jest ten sam, co w panelu: 5 kart w rzędzie przy 1440, 4 + 1 przy 1024, 3 + 2 przy 768. JEDNA LICZBA JEST INNA: najwęższa kolumna 224 px zamiast 210 px. Panel ma krótkie tytuły, tu najdłuższe mierzą 173 px („Gotowy do publikacji", „Competitor analysis"; zmierzone 16 px / 600), a karta 210 px ma 164 px wnętrza — przy 210 tytuł łamał się na dwa wiersze w pasmach 726–750 px i 1060–1100 px, czyli tam, gdzie siatka dokłada kolumnę. Subgrid (niżej) zrobiłby wtedy z pierwszego wiersza dwa wiersze we WSZYSTKICH kartach rzędu. 224 = 173 px tytułu + 44 px wyściółki + 2 px obrysu + 5 px zapasu na inne zaokrąglenie metryk pisma (inny devicePixelRatio). RÓŻNI JE TYLKO TO, CO MÓWI „TO JEST ContentInAI": grunt karty w kremie ContentInAI (--cia-tint), obrys w jego pomarańczowej kresce (--cia-line) i ikona w jego atramencie (--cia-ink, #A05C06) zamiast indygo — te same trzy kolory, którymi ContentInAI mówi w scenie wyżej (pasek głowy panelu, kreator, pierścienie). CZWARTY WIERSZ — 'fact' — jest pod kreską i o stopień ciszej (12,5 px w #656B7E, 5,3:1 na kremie), bo to dopowiedzenie do zdania nad nim, a nie drugie zdanie tej samej wagi. Kreska ma ten sam krem co tabela w odsłonie 03 (#F1E6D3). SUBGRID: kreski nad 'fact' stoją w jednej linii w całym rzędzie kart. Bez niego każda stawała pod SWOIM tekstem, czyli na innej wysokości w każdej karcie — ten sam schodek, który poprzednia wersja paska miała z kreską poziomą (17 px przez całą szerokość kadru). Karta zajmuje cztery wiersze siatki rodzica (ikona, tytuł, tekst, fakt) i bierze je przez grid-template-rows: subgrid, więc najdłuższy tekst w rzędzie wyznacza, gdzie wszystkie kreski stoją. Bez obsługi subgridu (@supports) karta zostaje kolumną flex jak w panelu — wygląda tak samo, tylko kreski mogą nie trzymać jednej linii. */ .hp-ciap .hp-ciap-caps { margin: 34px 0 0; } /* W układzie kompaktowym pasek odrywa się od SIATKI DWÓCH KOLUMN, a nie od jednego rzędu paneli, więc dostaje o 10 px więcej powietrza — ale tylko tam, gdzie te dwie kolumny w ogóle stoją, czyli od 900 px. */ @media (min-width: 900px) { .hp-ciap.is-seq .hp-ciap-caps { margin-top: 44px; } } /* Reguły .hp-ciap-caps ul / li / .hp-ciap-cap-title / -text z home-v2.css (stara lista z kreską 2 px nad każdą pozycją) dalej tam stoją — ten plik ich nie rusza, tylko przykrywa każdą własność, którą ustawiały (specyficzność 0,2,0 wobec 0,1,1). */ .hp-ciap .hp-ciap-caps-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(224px, 100%), 1fr)); gap: 16px; } .hp-ciap .hp-ciap-cap { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px 22px; background: var(--cia-tint); border: 1px solid var(--cia-line); border-radius: 16px; } /* Najechanie jak .hv-card w panelu (ten sam cień, bez przejścia — panel też go nie ma), tylko obrys ciemnieje w pomarańczu ContentInAI, a nie w szarości #C4C8D6. */ .hp-ciap .hp-ciap-cap:hover { border-color: rgba(248, 163, 42, 0.62); box-shadow: 0 16px 34px -26px rgba(20, 22, 43, 0.4); } .hp-ciap .hp-ciap-cap-icon { display: block; flex: 0 0 auto; width: 24px; height: 24px; color: var(--cia-ink); } .hp-ciap .hp-ciap-cap-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #14162B; } .hp-ciap .hp-ciap-cap-text { margin: 0; font-size: 13.5px; line-height: 1.6; color: #4C5163; text-wrap: pretty; } .hp-ciap .hp-ciap-cap-fact { margin: 0; padding-top: 12px; border-top: 1px solid #F1E6D3; font-size: 12.5px; line-height: 1.55; color: #656B7E; text-wrap: pretty; } /* Od 641 px, czyli tam, gdzie karty stoją w siatce i oko widzi cały rząd naraz. W taśmie na telefonie (zaraz pod spodem) subgridu NIE MA celowo: tam wiersz wyznaczałby najdłuższy tekst z PIĘCIU kart, a widać jedną — sprawdzone przy 390: karta 01 dostawała ok. 45 px dziury między tekstem a kreską, żeby kreska stała równo z kartą, której nie widać. */ @supports (grid-template-rows: subgrid) { @media (min-width: 641px) { .hp-ciap .hp-ciap-cap { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; align-content: start; } } } /* TELEFON — tak jak karty panelu: marketing.css zamienia [data-panel-cards] poniżej 641 px w poziomą taśmę z przyciąganiem (flex, overflow-x: auto, scroll-snap x mandatory, przerwa 14 px, wyściółka 4/4/12 px, karta 82% szerokości, pasek przewijania schowany). Te same liczby stoją tutaj, a nie przez atrybut [data-panel-cards]: tamta reguła łapie wyłącznie dzieci-divy, a karty są tu elementami listy. Karty mają równą wysokość (rozciąga je taśma), a treść stoi od góry, jak w panelu. Przy okazji taśma oddaje ~700 px wysokości: pięć kart jedna pod drugą to był najdłuższy blok tej sekcji na telefonie. marketing.css daje tu każdemu p 14px !important — 'fact' wraca o stopień niżej (13 px), inaczej przy telefonie zrównałby się z tekstem nad sobą. */ @media (max-width: 640px) { .hp-ciap .hp-ciap-caps-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 4px 4px 12px; scrollbar-width: none; } .hp-ciap .hp-ciap-caps-grid::-webkit-scrollbar { display: none; } .hp-ciap .hp-ciap-cap { flex: 0 0 82%; scroll-snap-align: center; } .hp-ciap .hp-ciap-cap-fact { font-size: 13px !important; } } /* --- 10.8. runda „trzy kroki i kropka nad i" (strona produktu) ------------------------------ * * Właściciel o tej sekcji: (a) kreski wskaźnika i podpis obok mają mówić tą samą konwencją co na * home, (b) brakuje trzeciego kroku po zatwierdzeniu konspektu — edytora z artykułem, (c) tekst * po lewej zlewał się z przyciskiem, (d) pasek „Co dokłada ContentInAI" odstawał od landingu. * (a) Podpis przekazania obok wskaźnika wyszedł; każda odsłona ma belkę jak na home (numer, * marka, czynność + zdanie), a zdanie o jednym kliknięciu weszło do belki kroku 02. * (b) Odsłona 03 — ten sam panel ContentInAI, kreator na kroku 03, w ciele gotowa sekcja * artykułu i ocena SEO/GEO. Ruch tylko w sekwencji: akapity dochodzą po kolei, kursor * miga za ostatnim słowem, pierścienie zataczają łuk, na końcu wjeżdża przycisk eksportu. * (c) Lead w dwóch akapitach, przycisk 26 px pod akapitem (ta sama liczba, co .hp-cia-cta * na home). W klatce bazowej od 900 px stopka dalej stoi w wierszu (reguła z 10.1 ma * wyższą specyficzność i zeruje ten margines). * (d) Pasek „Co dokłada ContentInAI" — kremowa rama z tej rundy WYSZŁA w rundzie P10; jedyna * definicja kart stoi w bloku 10.7. */ .hp-ciap .hp-ciap-foot .hp-cia-cta { margin-top: 26px; } /* Klatka bazowa (bez JS, „ogranicz ruch") od 900 px: trzy panele w jednym rzędzie. */ @media (min-width: 900px) { .hp-ciap:not(.is-seq) .hp-ciap-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } } @media (prefers-reduced-motion: reduce) and (min-width: 900px) { .hp-ciap .hp-ciap-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } } /* Odsłona 03 — tekst artykułu i stopka z oceną. */ .hp-ciap .hp-ciap-draft { display: grid; gap: 7px; } .hp-ciap .hp-ciap-draft-h { margin: 2px 0 0; font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: #14162B; } .hp-ciap .hp-ciap-draft-p { margin: 0; font-size: 12.5px; line-height: 1.6; color: #4C5163; text-wrap: pretty; } .hp-ciap .hp-ciap-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -0.16em; background: var(--cia-ink); opacity: 0; } .hp-ciap .hp-ciap-draft-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--cia-line); display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .hp-ciap .hp-ciap-scores { display: grid; gap: 8px; } .hp-ciap .hp-ciap-score-row { display: flex; align-items: center; gap: 18px; } .hp-ciap .hp-ciap-score { display: inline-flex; align-items: center; gap: 8px; } .hp-ciap .hp-ciap-ring { position: relative; display: inline-flex; width: 34px; height: 34px; flex: 0 0 auto; } .hp-ciap .hp-ciap-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .hp-ciap .hp-ciap-ring-value { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; color: #14162B; } @media (prefers-reduced-motion: no-preference) { @keyframes hp-ciap-arc { from { stroke-dashoffset: 100.53; } } @keyframes hp-ciap-blink { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } } .hp-ciap.is-seq .hp-ciap-slide.is-on .hp-ciap-draft > .hp-cia-mono { animation: hp-ciap-rise 0.34s var(--cia-ease) 500ms backwards; } .hp-ciap.is-seq .hp-ciap-slide.is-on .hp-ciap-draft-h { animation: hp-ciap-rise 0.36s var(--cia-ease) 600ms backwards; } .hp-ciap.is-seq .hp-ciap-slide.is-on .hp-ciap-draft-p { animation: hp-ciap-rise 0.42s var(--cia-ease) calc(760ms + var(--i) * 250ms) backwards; } .hp-ciap.is-seq .hp-ciap-slide.is-on .hp-ciap-caret { animation: hp-ciap-blink 1s steps(1) 1500ms infinite; } .hp-ciap.is-seq .hp-ciap-slide.is-on .hp-ciap-draft-foot { animation: hp-ciap-rise 0.36s var(--cia-ease) 1450ms backwards; } .hp-ciap.is-seq .hp-ciap-slide.is-on .hp-ciap-ring-arc { animation: hp-ciap-arc 0.9s var(--cia-ease) 1600ms backwards; } .hp-ciap.is-seq .hp-ciap-slide.is-on .hp-ciap-draft-foot .hp-ciap-status { animation: hp-ciap-rise 0.36s var(--cia-ease) 2150ms backwards; } } /* 10.8 cd. — tabela w artykule i odstęp akapitu o relacji produktów nad przyciskiem. */ .hp-ciap .hp-ciap-foot .hp-cia-note { margin-top: 18px; } .hp-ciap .hp-ciap-draft-table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.4; color: #4C5163; } .hp-ciap .hp-ciap-draft-table th, .hp-ciap .hp-ciap-draft-table td { padding: 5px 8px; text-align: left; border-bottom: 1px solid #F1E6D3; } .hp-ciap .hp-ciap-draft-table thead th { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: #6B4A09; background: #FFF7EA; } .hp-ciap .hp-ciap-draft-table tbody th { font-weight: 600; color: #14162B; white-space: nowrap; } .hp-ciap .hp-ciap-draft-table tr:last-child > * { border-bottom: 0; } @media (prefers-reduced-motion: no-preference) { .hp-ciap.is-seq .hp-ciap-slide.is-on .hp-ciap-draft-table { animation: hp-ciap-rise 0.42s var(--cia-ease) 1000ms backwards; } } /* Poniżej 900px scena jest elementem siatki z marginesami auto (wyśrodkowana, do 520px). Jej szerokość wynikała dotąd z podpisu przekazania w wierszu nad sceną — po jego zdjęciu jedyną treścią w przepływie był wskaźnik (120px), a odsłony leżą absolutnie, więc scena kurczyła się do 120px. Szerokość jest teraz podana wprost. */ @media (max-width: 899px) { .hp-ciap .hp-ciap-right { width: 100%; } } /* --- 10.9. runda „zrzut ekranu, nie przycisk" (P8a, P8b) ---------------------------------- */ /* P8b — BELKA ODSŁONY BEZ ZDANIA POD SPODEM. Zdanie ('text' w 'steps') wyszło z szablonu, a to ono niosło odstęp do panelu: belka kończyła się na jego ostatnim wierszu, a panel przylegał do niej bez marginesu (zmierzone: 0 px między belką a panelem w każdej odsłonie i każdej szerokości). Bez zdania panel dotykałby samego wiersza „02 ContentInAI układa konspekt". 12 px to ta sama przerwa, co między wierszami karty w „Co dokłada" niżej (i w kartach „Twój panel"). Margines, nie wyściółka: skrypt równa belki po offsetHeight, a margines jest ten sam w trzech odsłonach, więc nic, co skrypt mierzy, nie zmienia się między nimi. */ .hp-ciap .cia-k-head { margin-bottom: 12px; } /* P8a — plakietki stanu zamiast przycisków. */ /* Właściciel: „Zatwierdź konspekt" (odsłona 02) i „Eksportuj artykuł" (odsłona 03) wyglądały jak prawdziwe CTA landingu. Miały wszystko, co ma przycisk na tej stronie: pomarańczową płytę, cień pod spodem (.hp-ciap-btn w home-v2.css, 0 10px 20px -14px), 12px/600 i promień 9 px — a obok, w lewej kolumnie, stoi prawdziwe CTA sekcji. Kliknięcie w nie nie robiło nic. Na ich miejscu stoi STAN EKRANU: pigułka bez płyty i bez cienia, z kursorem domyślnym, w tym samym kremie i tej samej kresce, co podświetlony krok kreatora wyżej w panelu (.is-here) — czyli w słowniku ZRZUTU, a nie landingu. Znak mówi, jaki to stan: kropka = czeka (02), ptaszek = gotowe (03). Napis #6B4A09 na #FFF7EA to 7,3:1. Klasa .hp-ciap-btn zniknęła z szablonu; jej reguła w home-v2.css jest teraz martwa (plik należy do kogoś innego — zgłoszone, nie ruszane). */ .hp-ciap .hp-ciap-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; background: #FFF7EA; border: 1px solid var(--cia-line); border-radius: 999px; box-shadow: none; color: #6B4A09; font-size: 12px; font-weight: 500; line-height: 1.35; cursor: default; } .hp-ciap .hp-ciap-status-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--cia-orange); box-shadow: 0 0 0 3px rgba(248, 163, 42, 0.2); } .hp-ciap .hp-ciap-status-tick { flex: 0 0 auto; color: var(--cia-ink); }