/* ===================================================================== Moja Biblioteka — dobrzeustawieni.pl Język wizualny z makiety Mirka (WYTYCZNE-ekosystem-czarko.md, sekcja 2), ten sam co konto.czarko.pl: ecru, cegła, ostre rogi, zero cieni. Zasady, które trzymają ten wygląd razem: - hierarchię robią kreski 1 px i światło, nie ramki wokół wszystkiego, - jeden wypełniony przycisk na ekran, reszta obrysowa, - ostre rogi wszędzie POZA przełącznikiem motywu (znany kształt), - nagłówki 600 z ujemnym trackingiem, treść 400. ===================================================================== */ /* Krój w paczce, nie z serwera Google — inaczej adres IP każdego Klienta trafia do Google, zanim cokolwiek kliknie. Jeden plik zmienny pokrywa wagi 400-700. Licencja: /fonts/OFL-SchibstedGrotesk.txt */ @font-face { font-family: 'Schibsted Grotesk'; src: url('/fonts/SchibstedGrotesk-var.ttf') format('truetype-variations'); font-weight: 400 700; font-style: normal; font-display: swap; } :root { --tlo: #eceae4; /* Grunt strony — CIEMNIEJSZY od ramy. Rama ma odcinać się od marginesu, inaczej kreska 1 px jest jedynym, co je rozdziela, i przy jasnym ekranie strona wygląda na rozlaną. Wartość wprost z makiety Mirka (`podglad-biblioteka.html`: body #dedbd3, karta #eceae4). */ --tlo-strony: #dedbd3; --tlo-jasne: #f4f2ec; --karta: #ffffff; --zakreslenie:#ece4d4; --tekst: #111111; --tekst-slaby:rgba(17, 17, 17, .68); --tekst-cichy:rgba(17, 17, 17, .45); --kreska: rgba(17, 17, 17, .35); --kreska-cienka: rgba(17, 17, 17, .18); --przelacznik-obrys: rgba(17, 17, 17, .5); --cegla: #b8341f; --cegla-hover:#962714; --na-cegle: #ffffff; --zrobione: #2f5d47; --font: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Jedno wcięcie od krawędzi ramy dla całej strony. Pasy, które mają kreski na pełną szerokość (półki), zerują padding u siebie i wcinają dopiero treść — ale odstęp jest ten sam, więc wszystko stoi w jednej linii pionowej. */ --wciecie: 24px; /* Szerokość ramy. Wspólna z konto.czarko.pl. */ --rama: 1240px; } /* Tryb ciemny. Wybór siedzi w `data-motyw` na , ustawia go skrypt w jeszcze przed pierwszym malowaniem. Trzy stany, nie dwa: brak atrybutu = idziemy za systemem, "dark"/"light" = świadomy wybór. Akcent jaśnieje, bo ceglasty na czerni nie wyrabia wymaganych 4.5:1. */ @media (prefers-color-scheme: dark) { :root:not([data-motyw="light"]) { --tlo: #14120f; --tlo-strony: #0c0b09; --tlo-jasne: #1b1815; --karta: #1f1c18; --zakreslenie:#2b241a; --tekst: #f0ece3; --tekst-slaby:rgba(240, 236, 227, .7); --tekst-cichy:rgba(240, 236, 227, .46); --kreska: rgba(240, 236, 227, .32); --kreska-cienka: rgba(240, 236, 227, .16); --przelacznik-obrys: rgba(240, 236, 227, .5); --cegla: #e2726b; --cegla-hover:#f2938c; --na-cegle: #14120f; --zrobione: #7fb497; } } :root[data-motyw="dark"] { --tlo: #14120f; --tlo-strony: #0c0b09; --tlo-jasne: #1b1815; --karta: #1f1c18; --zakreslenie:#2b241a; --tekst: #f0ece3; --tekst-slaby:rgba(240, 236, 227, .7); --tekst-cichy:rgba(240, 236, 227, .46); --kreska: rgba(240, 236, 227, .32); --kreska-cienka: rgba(240, 236, 227, .16); --przelacznik-obrys: rgba(240, 236, 227, .5); --cegla: #e2726b; --cegla-hover:#f2938c; --na-cegle: #14120f; --zrobione: #7fb497; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--tlo-strony); color: var(--tekst); font: 400 16px/1.7 var(--font); -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--cegla); text-underline-offset: 3px; } a:hover { color: var(--cegla-hover); } :focus-visible { outline: 3px solid var(--cegla); outline-offset: 3px; } /* ── Rama i pasy ─────────────────────────────────────────────────────── Makieta nie ma kart pływających na tle: ma JEDNĄ ramę, a w niej pasy dzielące wspólne krawędzie. Dlatego pasy nie mają marginesów — sąsiadują kreską, a nie odstępem. Margines między nimi rozbiłby ten rytm i strona zaczęłaby wyglądać jak zbiór kafelków. */ .rama { max-width: var(--rama); margin: 0 auto; border: 1px solid var(--kreska); background: var(--tlo); } .pas { padding: 26px var(--wciecie); border-bottom: 1px solid var(--kreska); } .pas:last-child { border-bottom: none; } /* Pas ciemny (sekcja „co dalej") — barwy z wytycznych: #111 z tekstem kości i akcentem #e2726b. Akcent jest tu JAŚNIEJSZY niż ceglasty z reszty strony, bo cegła na czerni nie wyrabia wymaganych 4.5:1 kontrastu. Nadpisujemy tokeny lokalnie, więc wszystko w środku (karty, kreski, przyciski) dostaje właściwe barwy bez osobnych reguł na każdy element. */ .pas--ciemny { --tlo: #111111; --tlo-jasne: #191919; --karta: #111111; --tekst: #f0ece3; --tekst-slaby: rgba(240, 236, 227, .72); --tekst-cichy: rgba(240, 236, 227, .5); --kreska: rgba(240, 236, 227, .3); --kreska-cienka: rgba(240, 236, 227, .16); --cegla: #e2726b; --cegla-hover: #f2938c; --na-cegle: #111111; background: #111111; color: #f0ece3; } .stopka__srodek { max-width: var(--rama); margin: 0 auto; padding: 0 var(--wciecie); } .pomin { position: absolute; left: -9999px; background: var(--tekst); color: var(--tlo); padding: 12px 18px; text-decoration: none; } .pomin:focus { left: 10px; top: 10px; z-index: 100; } /* ── Nagłówek ──────────────────────────────────────────────────────── */ .naglowek { background: var(--tlo); border-bottom: 1px solid var(--kreska); position: sticky; top: 0; z-index: 10; } .naglowek__srodek { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 70px; padding: 0 var(--wciecie); flex-wrap: wrap; } /* Znak marki: rozstrzelenie .14em i czerwone „USTAWIENI". `.logo` jest kontenerem flex WYŁĄCZNIE po to, żeby rozdzielić znak od dopisku „Moja Biblioteka". Cały napis musi być JEDNYM dzieckiem — gdy „DOBRZE", „USTAWIENI" i „.PL" były trzema, odstęp flexa wchodził między nie i znak czytało się jako „DOBRZE USTAWIENI. PL". */ .logo { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } /* Rozstrzelenie siedzi na SAMYM znaku, nie na kontenerze — inaczej dotyka też dopisku. Ujemny margines z prawej zjada odstęp doklejony za ostatnią literą, przez który znak wyglądał na przesunięty względem dopisku. */ .logo__znak { font: 600 18px/1.2 var(--font); letter-spacing: .14em; margin-right: -.14em; color: var(--tekst); white-space: nowrap; } .logo__akcent { color: var(--cegla); } .logo__dopisek { font: 400 13px/1 var(--font); letter-spacing: 0; color: var(--tekst-cichy); } .naglowek__nawigacja { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .nav-link { display: inline-flex; align-items: center; min-height: 44px; font: 500 14.5px/1 var(--font); color: var(--tekst); text-decoration: none; } .nav-link:hover { color: var(--cegla); } /* Bieżąca zakładka: kolor + podkreślenie z odstępem 6 px, jak w makiecie. */ .nav-link--tu { color: var(--cegla); text-decoration: underline; text-underline-offset: 6px; } .naglowek__osoba { display: flex; align-items: center; gap: 10px; padding-left: 20px; border-left: 1px solid var(--kreska-cienka); } .awatar { display: grid; place-items: center; width: 32px; height: 32px; flex: none; background: var(--tekst); color: var(--tlo); font: 600 13px/1 var(--font); letter-spacing: 0; } /* ── Przełącznik jasny/ciemny ────────────────────────────────────────── Kształt przepisany z makiety: tor 38x20, kropka 14x14 skacząca z 2 na 20 px, po włączeniu w kolorze akcentu, obok księżyc. To JEDYNE zaokrąglenie w systemie — przy znanym kształcie przełącznika ostre rogi czytałyby się jak usterka. Pionowy padding daje 44 px celu dotykowego, czego wymagają wytyczne (WCAG 2.2 AA); wygląd bez zmian. */ .motyw { display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 12px 6px; min-height: 44px; color: var(--tekst); cursor: pointer; } .motyw__tor { position: relative; width: 38px; height: 20px; flex: none; border: 1px solid var(--przelacznik-obrys); border-radius: 999px; } .motyw__kropka { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--tekst); transition: left .15s, background .15s; } .motyw[aria-checked="true"] .motyw__kropka { left: 20px; background: var(--cegla); } .motyw:hover .motyw__tor { border-color: var(--cegla); } /* ── Przyciski ───────────────────────────────────────────────────────── Wytyczne: jeden wypełniony ceglasty na ekran. `.btn` jest wypełniony (jedyne wezwanie na stronie pustej półki), `.btn--obrys` — obrysowy. */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; background: var(--cegla); color: var(--na-cegle); border: 1px solid var(--cegla); border-radius: 0; font: 600 15px/1 var(--font); text-decoration: none; cursor: pointer; } .btn:hover { background: var(--cegla-hover); border-color: var(--cegla-hover); color: var(--na-cegle); } .btn--obrys { min-height: 44px; padding: 0 16px; background: transparent; color: var(--tekst); border-color: var(--kreska); font: 500 14px/1 var(--font); } .btn--obrys:hover { background: transparent; border-color: var(--cegla); color: var(--cegla); } .linkowy { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--tekst); font: 500 14px/1 var(--font); text-decoration: none; } .linkowy:hover { color: var(--cegla); text-decoration: underline; text-underline-offset: 6px; } /* ── Treść ─────────────────────────────────────────────────────────── */ .tresc { padding: 0; } .tytul { font: 600 clamp(30px, 4.4vw, 40px)/1.04 var(--font); letter-spacing: -1.8px; margin: 0 0 10px; } .powitanie .czk-lead { margin: 0; font-size: 16px; color: var(--tekst-slaby); max-width: 62ch; } .etykieta { margin: 0 0 8px; font: 500 11px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--cegla); } .komunikat { margin: 0 0 24px; padding: 14px 18px; background: var(--tlo-jasne); border: 1px solid var(--kreska); border-left: 3px solid var(--tekst); font-size: 15px; } .komunikat--error { border-left-color: var(--cegla); } /* ── „Wróć do słuchania" ─────────────────────────────────────────────── Bez ceglastej krechy z boku i bez białej karty: makieta trzyma ten blok na tle strony, a od reszty oddziela go kreska pasa. Krecha wyglądała jak ostrzeżenie, a to jest zaproszenie. */ .wroc { padding: 30px var(--wciecie) 34px; } .wroc__tytul { font: 600 clamp(28px, 4vw, 38px)/1.05 var(--font); letter-spacing: -1.6px; margin: 0 0 8px; } .wroc__meta { margin: 0 0 12px; font-size: 15px; color: var(--tekst-slaby); } .wroc__meta strong { color: var(--tekst); font-variant-numeric: tabular-nums; } .wroc__wskaz { margin: 0; font-size: 13.5px; color: var(--tekst-cichy); } /* Dwa przyciski obok siebie, jak w makiecie: ceglasty prowadzi do słuchania, obrysowy otwiera opis pakietu. Zawijają się, bo „Kontynuuj od 1:32:53” potrafi być szerokie, a na telefonie nie ma gdzie tego ścisnąć. */ .wroc__akcje { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; } /* ┌─ DLACZEGO ODTWARZACZ, A NIE KOTWICA ──────────────────────────┐ │ Do 16.09.2026 „Kontynuuj od…” było kotwicą do wiersza niżej: strona │ │ skakała w dół i dopiero tam coś zaczynało grać — przy trzydziestu │ │ półkach człowiek gubił, gdzie wylądował. Uwaga Piotra: „ten moduł │ │ powinien być odtwarzaczem”. Jest nim: pełny odtwarzacz stoi tutaj, │ │ ustawiony na miejscu przerwania, a przycisk go włącza. │ │ │ │ Ozdobny pasek postępu (`.wroc__pasek`) znika razem z tą zmianą — │ │ odtwarzacz ma własny, i to taki, który da się przeciągnąć. Dwa paski │ │ czterdzieści pikseli od siebie czytałoby się jak usterka. │ └────────────────────────────────────────────────────────────┘ */ .wroc__gracz { max-width: 560px; } /* Głowa odtwarzacza (tytuł, długość, „wracasz do 6:59”) w nagłówku znika: tytuł jest nagłówkiem strony, długość stoi w zdaniu obok, a miejsce wznowienia — na samym przycisku. Trzy razy to samo, jedno pod drugim. */ .wroc__gracz .mp__head { display: none; } /* Opis pakietu w nagłówku jest w ramce, a nie na pełną szerokość pasa jak ten przy półce: tam kreska dzieli sekcje, tutaj panel należy do jednego nagrania i musi być widać, gdzie się kończy. */ /* „O tym pakiecie” w nagłówku. Zostało
, choć wygląda jak przycisk: rozwijanie robi przeglądarka, więc działa bez JavaScriptu, a czytnik ekranu wie, że to coś do rozwinięcia. Zamknięte ma dokładnie wymiary `.btn--obrys` i przez to stoi równo z „Kontynuuj od…”. `flex: 0 1 auto` jest tu istotne: zamknięte pudełko ma szerokość napisu, otwarte — szerokość opisu. Stały `flex-basis` zostawiałby po zamknięciu dziurę między przyciskami. */ .opis--wroc { margin: 0; flex: 0 1 auto; max-width: 560px; border: 1px solid var(--kreska); background: transparent; } /* Zamknięte jest przyciskiem obrysowym (przezroczyste, jak `.btn--obrys` obok), otwarte staje się kartą — tak jak w makiecie, gdzie panel opisu jest biały na ecru. */ .opis--wroc[open] { background: var(--karta); } .opis--wroc .opis__klucz { display: flex; align-items: center; min-height: 44px; padding: 0 16px; font: 500 14px/1 var(--font); letter-spacing: normal; text-transform: none; color: var(--tekst); } .opis--wroc .opis__klucz:hover { color: var(--cegla); } /* Bez ceglastego „+” z półki: tam znak mówił, że wąski pasek w kreskach jest do rozwinięcia. Tutaj pudełko wygląda jak przycisk i samo to mówi — a w makiecie żadnego plusa nie ma. */ /* Podwójne `.opis--wroc` nie jest pomyłką: blok nagłówka stoi w arkuszu WYŻEJ niż `.opis[open] .opis__klucz::before`, a obie reguły mają tę samą wagę — wygrywałaby więc ta późniejsza i po rozwinięciu wracał `−`. */ .opis--wroc .opis__klucz::before, .opis--wroc.opis--wroc[open] .opis__klucz::before { content: none; } .opis--wroc .opis__tresc { padding: 0 16px 16px; font-size: 15px; max-width: 60ch; } /* Czerwony przycisk trzyma się góry, gdy sąsiad obok się rozwinie. */ .wroc__akcje { align-items: flex-start; } /* ── Półka ───────────────────────────────────────────────────────────── Nagłówek z kreską na pełną szerokość buduje rytm strony — dlatego sekcje nie potrzebują ramek wokół siebie. */ /* Półka nie ma poziomego paddingu pasa, bo kreski między wierszami mają iść od krawędzi do krawędzi — tak jest w makiecie. Wcięcie treści robią więc SAME wiersze i nagłówek półki, każde u siebie. UWAGA na kaskadę: `padding: 0` skasowałoby też pionowy padding pasa, przez co treść dotykała brzegów. Zerujemy wyłącznie boki. */ .polka { padding: 0; } /* ┌─ DLACZEGO SIATKA, A NIE FLEX ───────────────────────────────────────────┐ │ Na flexie z `flex-wrap` przycisk zwijania spadał na telefonie do nowego │ │ wiersza i wisiał sam pod tytułem — brzydko i myląco, bo wyglądał jak │ │ osobny element listy. Siatka z dwiema kolumnami trzyma go przy prawej │ │ krawędzi ZAWSZE: tytuł, opis i bony układają się w kolumnie pierwszej │ │ jeden pod drugim, przycisk stoi w drugiej przez całą wysokość. │ │ │ │ `minmax(0, 1fr)`, nie `1fr` — długi tytuł bez spacji rozepchnąłby │ │ kolumnę ponad ramę (ta sama pułapka co w pasie końcowym). │ └─────────────────────────────────────────────────────────────────────────┘ */ .polka__glowa { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 16px var(--wciecie); border-bottom: 1px solid var(--kreska); /* Klika się w CAŁY nagłówek, nie w mały przycisk — uwaga Piotra 16.09.2026. Przycisk zostaje jako znak stanu i jako uchwyt dla klawiatury; skrypt podpina zdarzenie tutaj. */ cursor: pointer; } .polka__glowa > * { grid-column: 1; } .polka__glowa > .polka__zwin { grid-column: 2; grid-row: 1 / -1; } /* Bez JavaScriptu nie ma czego zwijać, więc i kursor nie ma co obiecywać. Klasę zdejmuje skrypt razem z dołożeniem przycisku. */ .polka__glowa:not(.polka__glowa--klikalna) { cursor: default; } .polka__tytul { font: 600 21px/1.2 var(--font); letter-spacing: -.7px; } .polka__ile { margin: 0; font: 500 12px/1.5 var(--mono); color: var(--tekst-cichy); letter-spacing: .02em; } .polka--prezenty .polka__glowa { border-bottom-color: var(--cegla); } /* „O tym pakiecie" — opis przeniesiony z WooCommerce, domyślnie zwinięty. Kreska idzie od krawędzi do krawędzi ramy, jak wszystkie kreski na półce, dlatego wcięcie siedzi w środku, a nie na całym elemencie. */ .opis { border-bottom: 1px solid var(--kreska); } .opis__klucz { padding: 13px var(--wciecie); font: 500 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-cichy); cursor: pointer; /* Domyślny trójkącik przeglądarki siada nierówno przy majuskule i różni się w każdej z nich. Własny znak stoi tam, gdzie ma stać. */ list-style: none; } .opis__klucz::-webkit-details-marker { display: none; } .opis__klucz::before { content: '+ '; color: var(--cegla); font-weight: 600; } .opis[open] .opis__klucz::before { content: '− '; } .opis__klucz:hover { color: var(--tekst); } .opis__tresc { padding: 0 var(--wciecie) 22px; max-width: 68ch; font-size: 15.5px; line-height: 1.68; color: var(--tekst-slaby); } .opis__tresc p { margin: 0 0 12px; } .opis__tresc p:last-child { margin-bottom: 0; } .opis__tresc strong { color: var(--tekst); } .opis__tresc ul, .opis__tresc ol { margin: 0 0 12px; padding-left: 1.3em; } .opis__tresc li { margin-bottom: 5px; } .opis__tresc li::marker { color: var(--cegla); } /* Zwijanie półki. Znak „−"/„+" jest treścią przycisku, a nie tłem — czytnik ekranu i tak dostaje pełną etykietę („Zwiń: nazwa półki") z aria-label. */ .polka__zwin { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; color: var(--tekst); border: 1px solid var(--kreska); border-radius: 0; font: 400 20px/1 var(--font); cursor: pointer; } .polka__zwin:hover { border-color: var(--cegla); color: var(--cegla); } /* ┌─ ROZWIJANIE ────────────────────────────────────────────────────────────┐ │ Było `hidden` — lista znikała skokiem. Teraz przechodzimy │ │ `grid-template-rows` z `1fr` na `0fr`; to jedyny sposób, żeby animować │ │ „do wysokości treści" BEZ mierzenia jej w JavaScripcie. Mierzenie │ │ rozjeżdża się, gdy krój pisma dojedzie po pierwszym rysowaniu albo gdy │ │ ktoś rozwinie opis w środku. │ │ │ │ `min-height: 0` na dziecku jest obowiązkowe — bez niego element siatki │ │ nie zejdzie poniżej swojej najmniejszej treści i animacja stoi. │ │ │ │ Zwiniętą listę skrypt oznacza `inert`, więc nie da się w nią wejść │ │ tabulatorem i czytnik ekranu ją pomija. Samo schowanie wizualne │ │ zostawiłoby w niej kilkanaście przycisków „Odtwórz" bez żadnego obrazu. │ └─────────────────────────────────────────────────────────────────────────┘ */ .polka__pozycje { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .28s ease; } .polka__srodek { min-height: 0; overflow: hidden; } .polka--zwinieta .polka__pozycje { grid-template-rows: 0fr; } /* Zapas na przeglądarki bez animacji siatki i na stan bez skryptu. */ .polka__pozycje[hidden] { display: none; } .pozycja__nota { margin: 8px 0 0; font: 500 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-cichy); } /* ── Wiersz pozycji ──────────────────────────────────────────────────── Siatka z makiety: 44 px na przycisk, treść, pasek postępu, czas z prawej. Piąta komórka (odtwarzacz) spina cały wiersz i pojawia się dopiero po rozwinięciu — dlatego jest w osobnym rzędzie, a nie kolumnie. */ .wiersz { display: grid; grid-template-columns: 44px minmax(0, 1fr) 220px 130px; gap: 18px; align-items: center; /* Wcięcie w WIERSZU, nie w pasie — dzięki temu kreska idzie od krawędzi do krawędzi, a treść i tak nie dotyka brzegu. */ padding: 14px var(--wciecie); border-bottom: 1px solid var(--kreska-cienka); } .wiersz:last-child { border-bottom: none; } .wiersz__play { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--tekst); color: var(--tlo); border: none; border-radius: 0; font: 600 14px/1 var(--font); cursor: pointer; } .wiersz__play:hover { background: var(--cegla); color: var(--na-cegle); } .wiersz__play[aria-expanded="true"] { background: var(--cegla); color: var(--na-cegle); } .wiersz__tytul { margin: 0 0 3px; font: 600 16px/1.3 var(--font); letter-spacing: -.3px; } .wiersz__meta { margin: 0; font: 400 13.5px/1.4 var(--font); color: var(--tekst-slaby); } /* Wersja nagrania („wersja dla niej · zmień"). Ma być widoczna dla kogoś, kto jej szuka, i nie ma konkurować z tytułem — stąd kropka rozdzielająca i ten sam stopień szarości co reszta metryczki. */ .wiersz__wersja { color: var(--tekst-cichy); } .wiersz__wersja::before { content: ' · '; } .wiersz__wersja a { color: inherit; text-underline-offset: 2px; } .wiersz__wersja a:hover { color: var(--cegla); } .wiersz__postep { display: flex; flex-direction: column; gap: 6px; } .wiersz__pasek { display: block; position: relative; height: 3px; background: var(--kreska-cienka); } .wiersz__pasek i { position: absolute; inset: 0 auto 0 0; background: var(--cegla); } .wiersz__stan { font: 400 12.5px/1.4 var(--font); color: var(--tekst-cichy); } .wiersz__ile { justify-self: end; white-space: nowrap; font: 500 13.5px/1.4 var(--font); color: var(--tekst-slaby); font-variant-numeric: tabular-nums; } /* Odtwarzacz zajmuje całą szerokość wiersza, pod jego treścią. */ .wiersz__gracz { grid-column: 1 / -1; } .wiersz__gracz[hidden] { display: none; } .wiersz--brak .wiersz__ikona { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--kreska-cienka); color: var(--tekst-cichy); } @media (max-width: 860px) { /* Na wąskim ekranie czas z prawej i pasek schodzą pod tytuł — inaczej cztery kolumny ściskają tytuł do dwóch słów w linii. */ .wiersz { grid-template-columns: 44px minmax(0, 1fr); } .wiersz__postep { grid-column: 2 / -1; } .wiersz__ile { grid-column: 2 / -1; justify-self: start; } } .odznaka { display: inline-block; margin: 0 0 10px; padding: 3px 9px; border: 1px solid var(--kreska); font: 600 11px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-slaby); } /* Stan niesie też kształt obramowania, nie sam kolor — sam kolor nie wystarcza komuś, kto go nie rozróżnia. */ .odznaka--zrobione { border-color: var(--zrobione); color: var(--zrobione); } /* „Nieodsłuchane" to stan neutralny, nie ostrzeżenie — obrys przygaszony, żeby nie krzyczał z każdej pozycji na świeżo kupionej półce. */ .odznaka--nowe { border-color: var(--kreska-cienka); color: var(--tekst-cichy); } /* ── „Co dalej" ──────────────────────────────────────────────────────── Najwyżej dwie karty. Świadomie BEZ cen i bez wypełnionego przycisku: to podpowiedź, nie półka sklepowa. Gdyby kiedyś doszła trzecia kolumna, znaczyłoby to, że reguła przestała wybierać — i wtedy poprawiamy regułę, nie siatkę. */ .dalej__karta { padding: 20px 22px 22px; margin-bottom: 14px; background: var(--karta); border: 1px solid var(--kreska); } .dalej__karta:last-child { margin-bottom: 0; } .dalej__tytul { font: 600 19px/1.25 var(--font); letter-spacing: -.5px; margin-bottom: 8px; } .dalej__powod { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--tekst-slaby); max-width: 60ch; } /* ── Koniec półki: „dokończ drogę” i zdanie z książki ────────── Makieta (`podglad-biblioteka.html`, sekcja `#pb-konto`) kończy stronę pasem na dwie równe kolumny: po lewej jedno zaproszenie dalej, po prawej zdanie z książki na czerni. Dwie rzeczy, które ten układ załatwia naraz: cytat przestaje być luźną kartką na dole, a zaproszenie nie wygląda na reklamę doklejoną pod treścią — stoi w parze ze słowami, z których wynika. Pas zeruje własne wcięcie, bo kreska między kolumnami ma iść na pełną wysokość; wcina dopiero treść każdej kolumny — tym samym `--wciecie`, więc wszystko na stronie stoi w jednej linii pionowej. */ .koniec { padding: 0; /* `minmax(0, 1fr)`, nie samo `1fr`: domyślne `1fr` to `minmax(auto, 1fr)`, a `auto` nie pozwala kolumnie zwęzić się poniżej swojej najwęższej możliwej treści. Na telefonie czarna kolumna wychodziła przez to 18 px poza ramę i strona przewijała się w bok. */ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* Sam cytat, bez zaproszenia: nie zostawiamy pustej połowy pasa. */ .koniec--sam { grid-template-columns: minmax(0, 1fr); } .koniec__promo { padding: 28px var(--wciecie); border-right: 1px solid var(--kreska); } .koniec__tytul { margin: 0 0 6px; font: 600 22px/1.2 var(--font); letter-spacing: -.7px; } .koniec__opis { margin: 0 0 18px; max-width: 48ch; font-size: 14.5px; line-height: 1.6; color: var(--tekst-slaby); } /* Kolumna z cytatem trzyma własne barwy, a nie tokeny strony: to jedyne miejsce na półce, które ma wyglądać tak samo niezależnie od motywu — czarna plama z ceglastym podpisem, dokładnie jak w makiecie. */ .koniec__cytat { margin: 0; padding: 28px var(--wciecie); background: #111111; color: #f0ece3; display: flex; flex-direction: column; justify-content: center; gap: 12px; } .koniec__cytat blockquote { margin: 0; } .koniec__cytat p { margin: 0; font: 600 20px/1.4 var(--font); letter-spacing: -.5px; text-wrap: pretty; } .koniec__zrodlo { font: 500 11.5px/1.5 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #e2726b; } .koniec__zrodlo a { color: inherit; } .koniec__zrodlo a:hover { color: #f2938c; } /* W trybie ciemnym czerń na czerni znika — #111 i tło strony #14120f różni trzy jednostki, czyli nic. Kolumna idzie wtedy W GÓRĘ jasności: odcina się tak samo mocno, tylko w drugą stronę. */ @media (prefers-color-scheme: dark) { :root:not([data-motyw="light"]) .koniec__cytat { background: #241f19; } } :root[data-motyw="dark"] .koniec__cytat { background: #241f19; } @media (max-width: 860px) { /* Dwie kolumny po ~370 px łamią i tytuł, i cytat po dwa słowa w linii. */ .koniec { grid-template-columns: minmax(0, 1fr); } .koniec__promo { border-right: none; border-bottom: 1px solid var(--kreska); } } .brak { margin: 0; padding: 12px 16px; background: var(--tlo-jasne); border: 1px solid var(--cegla); border-left-width: 3px; font-size: 14.5px; } /* ── Pusta półka ───────────────────────────────────────────────────── */ .pusto { max-width: 60ch; } .pusto > * + * { margin-top: 16px; } .pusto__glowne { font: 600 22px/1.3 var(--font); letter-spacing: -.7px; } .pusto p { color: var(--tekst-slaby); } /* Pas dla Klienta, który ma konto i zakupy, ale ani jednego nagrania. To NIE jest `.pusto` — tam nie ma zupełnie nic, tu są prezenty i ćwiczenia, brakuje tylko rzeczy własnych. Powod, dla którego oba istnieją osobno, stoi w `polka/index.view.php`. */ .zacheta { max-width: 60ch; } .zacheta > p { margin: 0; color: var(--tekst-slaby); } .zacheta > * + * { margin-top: 14px; } /* Wyższa swoistość niż `.zacheta > p`, inaczej nagłówek zbladłby razem z resztą akapitów. */ .zacheta > .pusto__glowne { color: var(--tekst); } /* ── Logowanie i formularze ────────────────────────────────────────── */ .formularz { max-width: 460px; } /* Ekran logowania nie ma nic poza formularzem, więc kolumna wyrównana do lewej zostawiała po prawej pół ekranu pustki, a na desktopie wyglądało to jak niedokończona strona. Wyśrodkowane — razem z zakładaniem konta i odzyskiwaniem hasła, bo to jedna sprawa, nie trzy. */ .logowanie__srodek { max-width: 420px; margin: 0 auto; } .logowanie__srodek .tytul { margin-top: 0; } .formularz__wstep { color: var(--tekst-slaby); margin-bottom: 22px; } .formularz button { margin-top: 6px; } .formularz__obok { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--kreska-cienka); font-size: 14.5px; color: var(--tekst-slaby); } .pole { display: block; margin-bottom: 18px; } .pole label { display: block; margin-bottom: 6px; font: 500 12px/1.4 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-cichy); } .pole input { width: 100%; min-height: 48px; padding: 10px 14px; background: var(--karta); color: var(--tekst); border: 1px solid var(--kreska); border-radius: 0; font: 400 15.5px/1.5 var(--font); } .pole input:hover { border-color: var(--tekst-cichy); } /* ── Stopka ────────────────────────────────────────────────────────── */ .stopka { border-top: 1px solid var(--kreska); padding: 26px 0 44px; font-size: 14px; color: var(--tekst-slaby); } .stopka p { margin: 0 0 8px; } .stopka__drobne { font-size: 12.5px; color: var(--tekst-cichy); } /* ── Odtwarzacz ──────────────────────────────────────────────────────── Pakiet mediaplayer jest celowo monochromatyczny i cały jego wygląd siedzi w zmiennych `--mp-*`. Nadpisujemy je pod własną klasą i NIE RUSZAMY jego arkusza — dzięki temu aktualizacja pakietu nie zdejmuje naszych barw. Nazwy zmiennych są jego, angielskie; wartości nasze, z palety wyżej, więc odtwarzacz sam przechodzi w tryb ciemny razem ze stroną. */ .mp--czarko { --mp-bg: var(--karta); --mp-surface: var(--tlo-jasne); --mp-fg: var(--tekst); --mp-muted: var(--tekst-slaby); --mp-accent: var(--cegla); --mp-on-accent: var(--na-cegle); --mp-line: var(--kreska); --mp-track: var(--kreska-cienka); --mp-buffer: var(--tekst-cichy); --mp-font: var(--font); /* Ostre rogi — jedyny wyjątek w systemie to przełącznik motywu. */ --mp-radius: 0; } /* ┌─ WĄSKI EKRAN: JEDNO WCIĘCIE, NIE TRZY ──────────────────────────────────┐ │ Było tu trzy razy źle naraz i dopiero zrzut Piotra (17.09.2026) to │ │ pokazał: │ │ │ │ 1. `.ramka { padding: 0 18px }` celowało w klasę, KTÓREJ NIE MA — │ │ rama nazywa się `.rama`. Reguła nie zadziałała ani razu. │ │ 2. `.naglowek__srodek` dostawał `padding: 10px 0`, więc znak marki │ │ dotykał krawędzi karty. To właśnie widać na zrzucie. │ │ 3. `.tresc` dostawał 18 px, a pasy w środku i tak mają własne │ │ `var(--wciecie)` = 24 px. Na telefonie dawało to 42 px wcięcia — │ │ z czterystu pikseli szerokości zostawało 316. │ │ │ │ Zamiast łatać trzy miejsca: zmniejszamy JEDNĄ zmienną. Wszystko, co │ │ się nią wciska — pasy, nagłówek, stopka, półki — zwęża się razem i │ │ strona ma jeden margines zamiast trzech różnych. │ └─────────────────────────────────────────────────────────────────────────┘ */ @media (max-width: 640px) { :root { --wciecie: 18px; } .naglowek__srodek { min-height: 0; padding: 10px var(--wciecie); } .logo__dopisek { border-left: none; padding-left: 0; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ── Vouchery ─────────────────────────────────────────────────────────── Bon stoi przy produkcie, którego dotyczy, i drugi raz w zbiorczej sekcji. Romb niesie znaczenie razem z kolorem — sam ceglasty odcień nie wystarcza komuś, kto go nie rozróżnia. */ /* `block`, a nie `flex`: na wąskim ekranie flex łamał się między elementami, więc romb zostawał SAM w linijce, a opis schodził niżej. Jako zwykły tekst wszystko zawija się naturalnie i znak trzyma się pierwszego słowa. */ .bon { display: block; margin: 8px 0 0; padding: 0; font-size: 14px; line-height: 1.6; color: var(--tekst); } .bon__kod, .bon__do { display: inline-block; } .bon--lista { padding: 12px var(--wciecie); margin: 0; border-bottom: 1px solid var(--kreska-cienka); } .bon--lista:last-child { border-bottom: none; } .bon__znak { color: var(--cegla); font-size: 11px; margin-right: 5px; } .bon__kod { margin: 0 5px; font: 500 12.5px/1.4 var(--mono); letter-spacing: .04em; background: var(--zakreslenie); padding: 2px 7px; } .bon__do { font-size: 12.5px; color: var(--tekst-cichy); } /* ── 30 ćwiczeń ───────────────────────────────────────────────────────── Układ z makiety Mirka: siatka kafelków z numerem, filtr rozdziałów nad nią, pasek postępu w nagłówku. Wszystko server-side — filtr siedzi w adresie, odhaczanie jest zwykłym formularzem. */ .cw-glowa { padding: 34px var(--wciecie); } .cw-glowa .tytul { max-width: 22ch; } .cw-postep { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 22px 0 0; } .cw-postep__opis { font: 500 13px/1.4 var(--mono); letter-spacing: .06em; color: var(--tekst-cichy); white-space: nowrap; } .cw-postep__opis strong { color: var(--tekst); font-size: 15px; } .cw-postep__pasek { flex: 1; min-width: 200px; height: 3px; background: var(--kreska-cienka); position: relative; } .cw-postep__pasek i { position: absolute; inset: 0 auto 0 0; background: var(--cegla); } /* Filtry rozdziałów. Zawijają się na wąskim ekranie zamiast przewijać w bok — sześć pozycji mieści się w dwóch wierszach i nic nie ucieka. */ .cw-filtry { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px var(--wciecie); } .cw-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; background: var(--karta); color: var(--tekst); border: 1px solid var(--kreska); text-decoration: none; font: 500 14px/1 var(--font); } .cw-chip b { font-weight: 600; color: var(--tekst-cichy); } .cw-chip:hover { border-color: var(--cegla); color: var(--cegla); } .cw-chip.is-on { background: var(--tekst); color: var(--tlo); border-color: var(--tekst); } .cw-chip.is-on b { color: var(--tlo); } .cw-siatka { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); padding: 20px var(--wciecie) 28px; } .cw-kafel { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 168px; padding: 18px 20px 16px; background: var(--karta); border: 1px solid var(--kreska); color: var(--tekst); text-decoration: none; } .cw-kafel:hover { border-color: var(--cegla); } .cw-kafel__nr { position: absolute; right: 14px; top: 10px; font: 600 30px/1 var(--font); letter-spacing: -1.5px; color: var(--kreska-cienka); } .cw-kafel__rozdzial { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-cichy); } .cw-kafel__tytul { font: 600 17px/1.25 var(--font); letter-spacing: -.4px; padding-right: 34px; } .cw-kafel__poco { font-size: 14px; line-height: 1.5; color: var(--tekst-slaby); } .cw-kafel__stopa { margin-top: auto; padding-top: 8px; font: 500 12px/1.4 var(--mono); color: var(--tekst-cichy); } /* Zrobione: kreska u góry, nie samo zabarwienie — kolor sam nie wystarcza. */ .cw-kafel.is-zrobione { border-top: 3px solid var(--zrobione); } .cw-ptaszek { color: var(--zrobione); font-weight: 600; } /* Zamknięte: wygaszone, ale KLIKALNE — prowadzi na stronę, która tłumaczy, skąd wziąć dostęp. Kafelek bez celu wyglądałby na zepsuty. */ .cw-kafel.is-zamkniete { background: var(--tlo-jasne); } .cw-kafel.is-zamkniete .cw-kafel__tytul, .cw-kafel.is-zamkniete .cw-kafel__poco { color: var(--tekst-cichy); } .cw-zamek { display: inline-block; padding: 2px 8px; border: 1px solid var(--cegla); color: var(--cegla); font: 600 10.5px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; } .cw-zamek--duzy { font-size: 12.5px; padding: 5px 12px; margin-bottom: 14px; } .cw-zakup { padding: 30px var(--wciecie); } .cw-zakup p { max-width: 62ch; } .cw-zamkniete { padding: 30px var(--wciecie); } .cw-zamkniete p { max-width: 62ch; } .cw-zamkniete .btn + .btn { margin-left: 10px; } .cw-tresc { padding: 28px var(--wciecie) 32px; } .cw-tresc > * { max-width: 68ch; } .cw-meta { font-size: 14.5px; color: var(--tekst-slaby); } .cw-podtytul { margin: 28px 0 12px; font: 600 19px/1.2 var(--font); letter-spacing: -.5px; } .cw-kroki { margin: 0; padding-left: 1.4em; } .cw-kroki li { margin-bottom: 14px; line-height: 1.65; } .cw-kroki li::marker { color: var(--cegla); font-weight: 600; } /* Zdania do powiedzenia na głos — to nie instrukcja, tylko tekst, więc kursywa i kreska z boku zamiast punktora. */ .cw-zdania { list-style: none; margin: 0; padding: 0; } .cw-zdania li { margin: 0 0 10px; padding: 8px 0 8px 16px; border-left: 3px solid var(--cegla); font-style: italic; font-size: 17px; line-height: 1.55; } .cw-nakoniec { font-size: 16.5px; } .cw-stopka { padding: 22px var(--wciecie); } .cw-zrobione-info { margin: 0 0 10px; } .cw-nawigacja { display: flex; gap: 20px; flex-wrap: wrap; margin: 18px 0 0; font-size: 14.5px; } @media (max-width: 640px) { .cw-siatka { grid-template-columns: 1fr; } } /* Pasek ćwiczeń na półce — jeden wiersz zamiast trzydziestu. */ .cw-pasek__tresc { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 16px var(--wciecie); } .cw-pasek__tresc .cw-postep__pasek { flex: 1; min-width: 180px; } /* ── Drzwi: Półka przed zalogowaniem ─────────────────────────────────── Trzy osoby stoją pod tymi drzwiami i każda z nich ma tu swój akapit: ta, która chce po prostu wejść (formularz), ta, która nie wie, że ma konto (pole z adresem), i ta z YouTube'a (nagrania do posłuchania od ręki). Kolejność sekcji jest kolejnością częstości, nie ważności. */ /* Etykieta jest w znaczniku, ale nie na ekranie: przy jednym polu z widocznym przykładem adresu podpis „Twój adres e-mail" powtarzałby to samo dwa razy. Czytnik ekranu musi ją jednak usłyszeć, więc nie znika — tylko schodzi z widoku. */ .pomin-wzrokowo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* Co jest za logowaniem: trzy zdania, nie katalog. Zero cen. */ .drzwi-co-tam__lista { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 66ch; } .drzwi-co-tam__lista li { padding-left: 22px; position: relative; color: var(--tekst-slaby); } .drzwi-co-tam__lista li::before { content: '·'; position: absolute; left: 6px; top: -1px; color: var(--cegla); font-size: 20px; line-height: 1.2; } /* Zaproszenie do aplikacji — od 17.09.2026 to JEDYNE miejsce, w którym da się czegoś posłuchać bez konta. Stąd osobny akapit, a nie kolejny punkt listy: to nie jest „co dostaniesz po zalogowaniu”, tylko wyjście dla kogoś, kto logować się nie zamierza. */ .drzwi-co-tam__apka { margin-top: 20px; max-width: 66ch; color: var(--tekst-slaby); } .drzwi-co-tam__apka strong { color: var(--tekst); }