/* * Blog JustReview. Warstwa NA WIERZCHU stylow LP. * * Kolejnosc arkuszy w jest celowa i wazna: * 1. /assets/styles/bootstrap.min.css - siatka, na ktorej stoi nawigacja i stopka LP * 2. /assets/styles/style.css - fonty i wyglad nawigacji/stopki LP * 3. /blog/blog.css (ten plik) - typografia tresci, karty, CTA * Dlatego ten plik lezy w site-blog/public/, a nie w src/: Astro wrzucilby bundle * z src/ w losowe miejsce , a on musi byc OSTATNI, zeby wygrywac ze style.css. * * Tokeny marki te same co /pricing i /vs/* (assets/styles/pricing-page.css): * granat #1f2670, magenta #bf3664, fiolet #380552, lawenda #dcdef9, * bursztyn #faa633, szary #606060, karta: radius 14px, cien 0 3px 23px rgba(0,0,0,.15) */ :root { --jrb-navy: #1f2670; --jrb-magenta: #bf3664; --jrb-purple: #380552; --jrb-lavender: #dcdef9; --jrb-amber: #faa633; --jrb-grey: #606060; --jrb-line: #e9ebf5; --jrb-card: 0 3px 23px rgba(0, 0, 0, 0.15); } /* 🚨 DLACZEGO NADPISUJEMY overflow NA html I body `position: sticky` przestaje dzialac, gdy KTORYKOLWIEK przodek ma overflow inny niz visible. style.css LP ustawia `html { overflow-x: hidden }` i `body { overflow: hidden }`, co zamienia body w kontener przewijania - element sticky "przykleja sie" wtedy do scrollportu body, ktory sam nie jest przewijany, wiec spis tresci odjezdzal razem z tekstem. Zdiagnozowane po zgloszeniu Mateusza 2026-07-26. Ten arkusz laduje sie TYLKO na stronach bloga, wiec nadpisanie nie rusza LP. `overflow-x: clip` odcina wystajaca tresc dokladnie tak samo jak hidden, ale NIE tworzy kontenera przewijania, wiec sticky dziala. ⚠️ DRUGI, WAZNIEJSZY POWOD, dla ktorego sticky moze nie dzialac w tescie: Cookiebot na czas wyswietlania banera ustawia INLINE `body { overflow: hidden }` (blokada scrolla). Inline bije kazdy arkusz, wiec dopoki baner jest na ekranie, sticky nie dziala - ale wtedy strona i tak sie nie przewija, wiec uzytkownik tego nie widzi. W testach Playwright trzeba wyczyscic `document.body.style.overflow`, inaczej wyglada to na blad CSS, ktorym nie jest. */ html, body { overflow-x: clip; overflow-y: visible; } /* ---------- naglowek strony ---------- * To samo obejscie co w pricing-page.css i vs-page.css: globalny .header ma * min-height 690 px (pod hero strony glownej), a nawigacja jest w nim absolutna * i ma wysokosc 0. Bez tego nawigacja wchodzi na H1, a biale logo znika na jasnym tle. */ .jr-header-slim { min-height: 96px !important; } .jr-header-slim .navigation__logo--light { display: none !important; } .jr-header-slim .navigation__logo--colorful { display: block !important; opacity: 1 !important; } /* 🚨 Logo wychodzilo POD naglowek. `.navigation-default` z LP ma `padding-top: 40px` (zaprojektowane pod wysokie hero strony glownej), a slim header ma tylko 96 px. Logo ma 82 px, wiec 40 + 82 = 122 px i wystawalo 26 px ponizej belki, wchodzac na tresc. Zerujemy padding do 5 px, czyli tyle, ile LP ustawia w stanie po scrollu. Selektor ma wyzsza specyficznosc niz .navigation-default, wiec bez !important. */ .jr-header-slim .navigation { padding-top: 5px; } /* 🚨 Logo jest `position: absolute` w rodzicu o wysokosci 0, ktory flexbox ustawia na LINII SRODKA belki. Czyli logo zawsze zwisa w dol od srodka: przy belce 66 px i logo 82 px wystawalo 51 px pod belke, wprost na tresc. Na LP tego nie widac, bo pod belka jest ciemne hero strony glownej, ale na jasnej podstronie wyglada jak blad. Centrujemy je na tej linii (translateY) i ograniczamy do 52 px, zeby zmiescilo sie w belce (srodek 33 px, polowa logo 26 px, czyli 7-59 px). */ .jr-header-slim .navigation__logo { max-height: 52px; width: auto; transform: translateY(-50%); } /* ---------- kontener tresci ---------- */ /* ---------- szerokosc strony a szerokosc tekstu ---------- * DECYZJA (pomiar 2026-07-26): kolumna tekstu ZOSTAJE wezsza niz strona. * Zmierzone na zywym wpisie przez Range API: 720 px przy 18 px daje 77 znakow * w linii. Zalecana miara czytelnosci to 45-75 znakow, do 80 jest jeszcze OK, * wyzej oko gubi poczatek nastepnej linii. Rozciagniecie tekstu na 1180 px * (szerokosc LP) dalo by ~120 znakow, czyli wyraznie za duzo. * * Dlatego blog jest szeroki JAKO STRONA, nie jako akapit: * - kontener 1180 px, tak jak /pricing i /vs/* (spojnosc z serwisem), * - proza 690 px przy 19 px = 78 znakow w linii (zmierzone Range API na renderze, * Lato ma sredni znak 0,466 em, nie 0,5; przy 720/18 px bylo tyle samo), * do tego interlinia 1,75 zamiast 1,72, bo przy dluzszej mierze to ona decyduje, * czy oko trafia w poczatek nastepnej linii, * - tabele, kod, demo widgetu i CTA wychodza na pelne 900 px, * - spis tresci siedzi w lewej rynnie, wiec puste miejsce po lewej pracuje. */ .jrb { font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 1180px; margin: 0 auto; padding: 20px 20px 90px; color: #2b2f45; font-size: 19px; line-height: 1.75; } /* uklad: [spis tresci] [tresc], spis dopiero od 1240 px */ .jrb-layout { display: grid; grid-template-columns: minmax(0, 900px); justify-content: center; } @media (min-width: 1240px) { .jrb-layout { grid-template-columns: 230px minmax(0, 900px); gap: 50px; } } /* siatka "breakout": proza w srodkowej kolumnie, tabele i kod na calej szerokosci */ .jrb-article { display: grid; grid-template-columns: 1fr min(690px, 100%) 1fr; } .jrb-article > * { grid-column: 2; } .jrb-article > .table-scroll, .jrb-article > pre, .jrb-article > .jrb-bleed { grid-column: 1 / -1; } /* ---------- spis tresci ---------- */ .jrb-toc { display: none; } @media (min-width: 1240px) { .jrb-toc { display: block; position: sticky; top: 130px; align-self: start; /* margines gorny NIE jest kosmetyka: logo w nawigacji jest wyzsze niz pasek (68 px w 96 px belce) i siega ok. 140 px, a spis tresci stoi w tej samej rynnie. Bez odsuniecia pierwsza pozycja spisu wchodzi pod logo przy scrollu 0. */ margin-top: 44px; max-height: calc(100vh - 170px); overflow-y: auto; font-size: 15px; line-height: 1.5; border-left: 2px solid var(--jrb-line); padding-left: 18px; } } .jrb-toc__label { text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; font-weight: 700; color: var(--jrb-grey); margin: 0 0 12px; } .jrb-toc ul { list-style: none; padding: 0; margin: 0; } .jrb-toc li { margin-bottom: 10px; position: relative; } .jrb-toc li.is-sub { padding-left: 14px; font-size: 14px; } .jrb-toc a { color: var(--jrb-grey); text-decoration: none; transition: color .15s ease; } .jrb-toc a:hover { color: var(--jrb-magenta); } /* Sekcja aktualnie czytana. Kreska siedzi dokladnie na border-left listy (padding 18px), dlatego left: -20px, a nie -18px: 2px szerokosci kreski nachodzi na linie. */ .jrb-toc li.is-active > a { color: var(--jrb-navy); font-weight: 700; } .jrb-toc li.is-active::before { content: ''; position: absolute; left: -20px; top: 3px; bottom: 3px; width: 2px; background: var(--jrb-magenta); } /* Kotwice: naglowek nie moze schowac sie pod paskiem nawigacji po kliknieciu w spis. */ .jrb-article h2[id], .jrb-article h3[id] { scroll-margin-top: 120px; } .jrb .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- okruszki i metryka ---------- */ .jrb-crumbs { font-size: 14px; color: var(--jrb-grey); margin: 22px 0 10px; } .jrb-crumbs a { color: var(--jrb-grey); } .jrb-crumbs a:hover { color: var(--jrb-magenta); } .jrb-meta { font-size: 14.5px; color: var(--jrb-grey); margin: 0 0 34px; } .jrb-tag { display: inline-block; background: var(--jrb-lavender); color: var(--jrb-navy); border-radius: 100px; padding: 4px 14px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-right: 10px; } /* ---------- typografia artykulu ---------- */ .jrb article h1, .jrb h1 { font-size: 45px; line-height: 1.16; font-weight: 700; color: var(--jrb-navy); margin: 6px 0 16px; letter-spacing: -0.01em; } .jrb article h2 { font-size: 30px; line-height: 1.26; font-weight: 700; color: var(--jrb-navy); margin: 46px 0 14px; } .jrb article h3 { font-size: 22px; line-height: 1.35; font-weight: 700; color: var(--jrb-navy); margin: 32px 0 10px; } .jrb article p { margin: 0 0 18px; } .jrb article ul, .jrb article ol { margin: 0 0 20px; padding-left: 24px; } .jrb article li { margin-bottom: 9px; } .jrb article strong { color: var(--jrb-navy); font-weight: 700; } .jrb article a { color: var(--jrb-magenta); text-decoration: underline; text-underline-offset: 2px; } .jrb article a:hover { color: var(--jrb-purple); } .jrb article img { max-width: 100%; height: auto; border-radius: 10px; } .jrb article hr { border: 0; border-top: 1px solid var(--jrb-line); margin: 40px 0; } /* Tabele: zawsze prawdziwy . Cloudflare "Markdown for Agents" konwertuje je poprawnie na tabele markdown, a siatki z divow gubi - to warunek cytowalnosci. */ .jrb .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 30px; } /* min-width nie jest ozdoba: bez niego na telefonie 4 kolumny sciskaja sie do jednego slowa na linie i tabela jest nieczytelna. Z min-width uzytkownik przewija w bok (kontener ma overflow-x), a komorki maja sensowna szerokosc. */ .jrb article table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 16px; background: #fff; } .jrb article th, .jrb article td { border: 1px solid var(--jrb-line); padding: 10px 14px; text-align: left; vertical-align: top; } .jrb article th { background: var(--jrb-lavender); color: var(--jrb-navy); font-weight: 700; } .jrb article pre { background: #14161c; color: #eceef3; padding: 18px 20px; border-radius: 12px; overflow-x: auto; font-size: 14.5px; line-height: 1.6; margin: 0 0 22px; } .jrb article code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; } .jrb article :not(pre) > code { background: #f4f5fa; border: 1px solid var(--jrb-line); border-radius: 5px; padding: 1px 6px; color: var(--jrb-purple); } .jrb article blockquote { margin: 0 0 22px; padding: 14px 20px; border-left: 4px solid var(--jrb-magenta); background: #fbfbfe; border-radius: 0 10px 10px 0; } .jrb article blockquote p:last-child { margin-bottom: 0; } /* ---------- FAQ ---------- */ .jrb-faq { margin: 46px 0 0; } .jrb-faq h2 { margin-top: 0; } .jrb-faq h3 { font-size: 19px; margin: 22px 0 6px; } /* ---------- demo widgetu ---------- */ .jrb-demo { margin: 52px 0 0; padding: 30px 0 0; border-top: 1px solid var(--jrb-line); } .jrb-demo__label { font-size: 24px; font-weight: 700; color: var(--jrb-navy); margin: 0 0 6px; line-height: 1.3; } .jrb-demo__hint { font-size: 15.5px; color: var(--jrb-grey); margin: 0 0 22px; } .jrb-demo__stage { min-height: 120px; } .jrb-demo__fallback { font-size: 14.5px; color: var(--jrb-grey); } /* ---------- CTA ---------- */ .jrb-cta { margin: 38px 0 0; padding: 34px 30px 30px; border-radius: 14px; text-align: center; background: linear-gradient(135deg, var(--jrb-navy), var(--jrb-magenta)); color: #fff; } .jrb-cta h2 { color: #fff !important; font-size: 27px; margin: 0 0 10px !important; } .jrb-cta p { color: rgba(255, 255, 255, .93); font-size: 17.5px; margin: 0 0 20px; } .jrb-cta__btn { display: inline-block; background: var(--jrb-amber); color: #2b2f45 !important; font-weight: 700; border-radius: 100px; padding: 15px 38px; font-size: 18px; text-decoration: none !important; box-shadow: 0 3px 14px rgba(250, 166, 51, .45); } .jrb-cta__btn:hover { filter: brightness(1.06); } .jrb-cta__fine { font-size: 14px; color: rgba(255, 255, 255, .82); margin: 14px 0 0 !important; } /* ---------- powiazane wpisy ---------- */ .jrb-related { margin: 46px 0 0; padding-top: 24px; border-top: 1px solid var(--jrb-line); } .jrb-related h2 { font-size: 22px; margin: 0 0 12px; color: var(--jrb-navy); } .jrb-related ul { list-style: none; padding: 0; margin: 0; } .jrb-related li { margin-bottom: 8px; } .jrb-related a { color: var(--jrb-magenta); font-weight: 700; } /* ---------- lista wpisow ---------- */ .jrb-hero { text-align: center; padding: 26px 0 6px; } .jrb-eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 13px; font-weight: 700; color: var(--jrb-magenta); margin-bottom: 10px; } .jrb-hero h1 { font-size: 46px; line-height: 1.14; color: var(--jrb-navy); margin: 0 0 14px; font-weight: 700; } .jrb-hero p { font-size: 19px; color: var(--jrb-grey); max-width: 700px; margin: 0 auto; } .jrb-cards { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .jrb-card { background: #fff; border-radius: 14px; box-shadow: var(--jrb-card); padding: 24px 26px 22px; border-top: 4px solid var(--jrb-lavender); } .jrb-card h2 { font-size: 20px; line-height: 1.34; margin: 10px 0 10px; font-weight: 700; } .jrb-card h2 a { color: var(--jrb-navy); text-decoration: none; } .jrb-card h2 a:hover { color: var(--jrb-magenta); } .jrb-card p { font-size: 15.5px; color: var(--jrb-grey); margin: 0; } .jrb-card__date { display: block; margin-top: 14px; font-size: 13px; color: var(--jrb-grey); } .jrb-empty { padding: 40px 0; color: var(--jrb-grey); text-align: center; } @media (max-width: 900px) { .jrb { font-size: 17.5px; padding: 12px 16px 72px; } .jrb article h1, .jrb h1, .jrb-hero h1 { font-size: 30px; } .jrb article h2 { font-size: 24px; } .jrb-cta { padding: 26px 20px 24px; } }