/* ========================================================================= ZOSTAJE W GŁOWIE — wygląd „KSIĄŻKA” ------------------------------------------------------------------------- Drugi, przełączalny wygląd kursu — obok „Kokpitu”. Charakter wzięty z niemieckieczytanki.pl: ciepły papier zamiast białej gazety, miękkie cienie zamiast linii 1 px, duże promienie (20–30 px zamiast 2–4 px), szyna JASNA i szeroka zamiast ciemnej i wąskiej, nagłówki rozdziałów z okrągłą plakietką numeru, dialogi w dymkach, kafle poziomów jako osobne karty z cieniem. Pismo: Fraunces (nagłówki, niemiecki) + Nunito (interfejs i polski) — oba trzymamy U SIEBIE, w assets/fonty/, żeby przeglądarka kursanta nie łączyła się z serwerami Google. JAK TO DZIAŁA ------------- Arkusz wczytuje się na KAŻDEJ stronie kursu, ale wszystkie reguły są zamknięte w `html[data-wyglad="ksiazka"]`. Przy „Kokpicie” atrybut ma inną wartość i ten plik nie zmienia ani jednego piksela. Kolejność arkuszy w : styl-nowy.css (podkład „Atelier”) → styl-kokpit.css → TEN PLIK. PUŁAPKI WAGI SELEKTORÓW (te same, o które potknął się „Kokpit”) --------------------------------------------------------------- • `html[data-wyglad="ksiazka"]` (0,1,1) bije `:root` (0,1,0) z obu poprzednich arkuszy — ale NIE bije `html[data-motyw="ciemny"]` (też 0,1,1, a stoi wcześniej… i wygrywa kolejnością tylko wtedy, gdy jest PÓŹNIEJ w pliku). Dlatego tryb ciemny „Książki” pisany jest jako `html[data-wyglad="ksiazka"][data-motyw="ciemny"]` (0,2,1) — wygrywa zawsze i nie zależy od kolejności plików. • Tokeny przestawiane w `@media` przez poprzednie arkusze (np. `--pad` na telefonie) trzeba POWTÓRZYĆ w naszej regule medialnej — inaczej nasza reguła bazowa (wyższa waga) obowiązuje także na telefonie. • Reguły stanów ćwiczeń (`.opcja[aria-pressed]`, `.luka.ok/.zle`, `.wyjasnienie.widoczne`, `.podpowiedz.otwarta`) zmieniamy TYLKO kosmetycznie — pomyłka tutaj pokazuje odpowiedzi przed sprawdzeniem. ========================================================================= */ /* ============================================================== PISMO === */ /* Fraunces i Nunito na licencji SIL OFL 1.1 (assets/fonty/LICENCJA-OFL.txt). Wariant zmienny: jeden plik na całą rodzinę zamiast pięciu grubości. */ @font-face { font-family: 'Fraunces kursu'; src: url('fonty/fraunces-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces kursu'; src: url('fonty/fraunces-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito kursu'; src: url('fonty/nunito-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito kursu'; src: url('fonty/nunito-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ============================================================= TOKENY === */ html[data-wyglad="ksiazka"] { /* --- powierzchnie: ciepły papier --- */ --tlo: #fff8ee; --arkusz: #ffffff; --arkusz-2: #fff3e2; --arkusz-3: #ffe8cd; --atrament: #2b2118; --na-atramencie: #fff8ee; /* „Plama” — najmocniejsze wypełnienie: przycisk główny, główki tabel, pasek cennika. W „Książce” jest CIEPŁYM POMARAŃCZEM, nie atramentem. */ --plama: #e2662c; --na-plamie: #ffffff; /* --- tekst --- */ --tekst: #2b2118; --tekst-2: #6b5a48; /* 6.2:1 na papierze */ --tekst-3: #8e7962; /* 4.6:1 — tylko podpisy */ /* --- linie: miękkie, ciepłe; strukturę rysują cienie, nie kreski --- */ --linia: #f3e3cb; --linia-2: #e6cca6; --linia-3: #e2662c; --linia-mocna: #b99a72; /* --- cienie: sedno tego wyglądu --- */ --cien-1: 0 2px 6px rgba(122, 82, 32, .07); --cien-2: 0 10px 30px rgba(122, 82, 32, .11); --cien-3: 0 26px 64px rgba(90, 58, 20, .30); /* --- szyna: JASNA w jasnym motywie (w „Kokpicie” jest zawsze ciemna) --- */ --szyna-tlo-1: #fff3e2; --szyna-tlo-2: #ffeacf; --szyna-tekst: #2b2118; --szyna-tekst-2: #4d3c2c; --szyna-tekst-3: #8b7660; --szyna-nakladka: rgba(226, 102, 44, .10); --szyna-nakladka-2: rgba(226, 102, 44, .20); --szyna-linia: rgba(150, 110, 60, .20); --szyna-linia-2: rgba(150, 110, 60, .34); --szyna-dziura: #fff3e2; --szyna-tor: rgba(150, 110, 60, .22); --szyna-postep-1: #3fa96b; --szyna-postep-2: #e2662c; --szyna-suwak: #c08a56; /* suwak przewijania listy lekcji */ /* --- kolory poziomów --- */ --p-a1: #2f6bd9; --p-a1-tlo: #e7effe; --p-a2: #178f5e; --p-a2-tlo: #e2f7ea; --p-b1: #c2681b; --p-b1-tlo: #fdeedd; --p-b2: #7b5ce0; --p-b2-tlo: #eee8ff; /* --- semantyka: cieplejsza od „Kokpitu” --- */ --ok: #2f9e60; --ok-tlo: #e5f7ec; --zle: #d93a58; --zle-tlo: #ffe9ee; --uwaga: #c2681b; --uwaga-tlo: #fff0dc; /* --- promienie: duże, książkowe --- */ --r-s: 12px; --r: 20px; --r-l: 26px; --r-xl: 30px; /* --- siatka --- */ --szyna: 272px; --spis: 244px; --miara: 64ch; --breakout: 1240px; --pad: clamp(18px, 3vw, 44px); --gora-h: 62px; /* --- typografia --- */ --f-tytul: 'Fraunces kursu', Georgia, 'Times New Roman', serif; --f-tekst: 'Nunito kursu', 'Segoe UI', system-ui, -apple-system, sans-serif; --f-de: 'Fraunces kursu', Georgia, 'Times New Roman', serif; --f-dek: 'Fraunces kursu', Georgia, 'Times New Roman', serif; --f-cyfry: 'Nunito kursu', 'Segoe UI', system-ui, sans-serif; --t-mega: clamp(2.4rem, 5.4vw, 3.8rem); --t-h1: clamp(2rem, 4.2vw, 3.1rem); --t-h2: clamp(1.5rem, 2.4vw, 2.05rem); --t-h3: clamp(1.14rem, .6vw + 1rem, 1.34rem); --t-tekst: clamp(1.06rem, .22vw + 1rem, 1.14rem); --t-de: clamp(1.14rem, .3vw + 1.05rem, 1.28rem); --t-mala: .92rem; } /* ------------------------------------------- tryb ciemny: ciepła noc -- */ /* Waga (0,2,1) — bije zarówno `:root` z „Kokpitu”, jak i blok ciemny z „Atelier”, niezależnie od kolejności plików. */ html[data-wyglad="ksiazka"][data-motyw="ciemny"] { --tlo: #17120c; --arkusz: #211a12; --arkusz-2: #2a2118; --arkusz-3: #362b20; --atrament: #0f0b07; --na-atramencie: #f6ece0; --plama: #f2843f; --na-plamie: #1d1409; --tekst: #f7ede1; --tekst-2: #cdbba6; --tekst-3: #a68f76; --linia: #3a2e22; --linia-2: #554435; --linia-3: #f2843f; --linia-mocna: #a68f76; --cien-1: 0 2px 6px rgba(0, 0, 0, .35); --cien-2: 0 10px 30px rgba(0, 0, 0, .45); --cien-3: 0 26px 64px rgba(0, 0, 0, .70); --szyna-tlo-1: #201911; --szyna-tlo-2: #1a140e; --szyna-tekst: #f7ede1; --szyna-tekst-2: #d8c8b4; --szyna-tekst-3: #a68f76; --szyna-nakladka: rgba(242, 132, 63, .12); --szyna-nakladka-2: rgba(242, 132, 63, .24); --szyna-linia: rgba(242, 220, 190, .12); --szyna-linia-2: rgba(242, 220, 190, .24); --szyna-dziura: #201911; --szyna-tor: rgba(242, 220, 190, .16); --szyna-postep-1: #4fd3a0; --szyna-postep-2: #f2843f; --szyna-suwak: #a68f76; --p-a1: #8fadff; --p-a1-tlo: rgba(47, 107, 217, .22); --p-a2: #5cd3a0; --p-a2-tlo: rgba(23, 143, 94, .24); --p-b1: #f2ac5c; --p-b1-tlo: rgba(194, 104, 27, .26); --p-b2: #bb9dff; --p-b2-tlo: rgba(123, 92, 224, .26); --ok: #5cd3a0; --ok-tlo: rgba(47, 158, 96, .20); --zle: #ff8098; --zle-tlo: rgba(217, 58, 88, .22); --uwaga: #f2ac5c; --uwaga-tlo: rgba(194, 104, 27, .22); } /* =============================================================== BODY === */ html[data-wyglad="ksiazka"] body { font-family: var(--f-tekst); font-size: var(--t-tekst); line-height: 1.68; letter-spacing: 0; overflow-wrap: break-word; /* dwie ciepłe poświaty w rogach — papier nigdy nie jest płaski */ background: radial-gradient(1100px 560px at 8% -8%, #fff 0%, transparent 58%), radial-gradient(900px 520px at 108% 4%, #ffe4d2 0%, transparent 55%), var(--tlo); background-attachment: fixed; } html[data-wyglad="ksiazka"][data-motyw="ciemny"] body { background: radial-gradient(1100px 560px at 8% -8%, #241b12 0%, transparent 58%), radial-gradient(900px 520px at 108% 4%, #2c1c12 0%, transparent 55%), var(--tlo); } html[data-wyglad="ksiazka"] :focus-visible { outline: 3px solid var(--lekcja, var(--plama)); outline-offset: 2px; border-radius: 8px; } html[data-wyglad="ksiazka"] ::selection { background: #ffe08a; color: #2b2118; } /* ============================================================ SZKIELET == */ /* ---------------------------------------------------------- lewa szyna -- */ html[data-wyglad="ksiazka"] .szyna { background: var(--szyna-tlo-1); border-right: 1px solid var(--szyna-linia); } html[data-wyglad="ksiazka"] .marka { padding: 18px 16px 14px; gap: 12px; } html[data-wyglad="ksiazka"] .marka-plytka { width: 46px; height: 46px; border-radius: 16px; background: #fff; box-shadow: var(--cien-1); padding: 5px; } html[data-wyglad="ksiazka"] .marka b { font-family: var(--f-tytul); font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; } html[data-wyglad="ksiazka"] .marka span span { font-size: .76rem; letter-spacing: .01em; text-transform: none; color: var(--szyna-tekst-3); } /* postęp: pigułka z pierścieniem, nie prostokątny pasek */ html[data-wyglad="ksiazka"] .szyna-postep { margin: 4px 14px 14px; padding: 12px 14px; border-radius: var(--r); background: #fff; border: 1px solid var(--szyna-linia); box-shadow: var(--cien-1); } html[data-wyglad="ksiazka"][data-motyw="ciemny"] .szyna-postep { background: var(--arkusz); } html[data-wyglad="ksiazka"] .szyna-postep:hover { background: var(--arkusz-2); transform: translateY(-1px); } html[data-wyglad="ksiazka"] .postep-belka { height: 8px; border-radius: 999px; margin-top: 11px; } html[data-wyglad="ksiazka"] .postep-belka > i { border-radius: 999px; } html[data-wyglad="ksiazka"] .postep-tresc b { font-size: .88rem; font-weight: 800; } /* pozycje menu jako zaokrąglone pigułki */ html[data-wyglad="ksiazka"] .szyna-grupa { font-family: var(--f-tekst); /* nie schodzić poniżej 0,75 rem (12 px) — narzedzia/kontrola-wygladu.html zgłasza każdy napis mniejszy niż 11,5 px, a kursu używa dziecko */ font-size: .75rem; font-weight: 800; letter-spacing: .14em; color: var(--szyna-tekst-3); border-top: none; margin-top: 14px; } html[data-wyglad="ksiazka"] .szyna-grupa + .poz { border-top: none; } html[data-wyglad="ksiazka"] .poz { margin: 2px 10px; padding: 9px 12px; border-radius: 14px; font-size: .92rem; font-weight: 600; border: none; } html[data-wyglad="ksiazka"] .poz:hover { background: var(--szyna-nakladka); transform: translateX(2px); } html[data-wyglad="ksiazka"] .poz.aktywna, html[data-wyglad="ksiazka"] .poz[aria-current="page"] { background: var(--szyna-nakladka-2); color: var(--szyna-tekst); font-weight: 800; box-shadow: inset 3px 0 0 var(--plama); } html[data-wyglad="ksiazka"] .poz-ikona { width: 30px; height: 30px; border-radius: 11px; background: var(--szyna-nakladka); } html[data-wyglad="ksiazka"] .poz-licznik { border-radius: 999px; font-size: .72rem; font-weight: 800; padding: 2px 8px; } html[data-wyglad="ksiazka"] .poz-partner { border-radius: var(--r-s); background: var(--szyna-nakladka); } html[data-wyglad="ksiazka"] .szyna-wiecej-btn { border-radius: 999px; background: var(--szyna-nakladka); color: var(--szyna-tekst-2); font-weight: 700; } html[data-wyglad="ksiazka"] .szyna-wiecej-btn:hover { background: var(--szyna-nakladka-2); color: var(--szyna-tekst); } /* ---------------------------------------- przewijanie szyny (widoczne) -- */ /* „Kokpit” rysuje tu BIAŁY suwak w prawie czarnym rowku — bo jego szyna jest ciemna w obu motywach. W „Książce” szyna jest ciepła i jasna, więc ten sam rowek byłby czarną szramą przez całe menu. Zasada zostaje ta sama: suwak ma być gruby i wyraźny, żeby było widać, że lista leci dalej. */ @media (min-width: 900px) { html[data-wyglad="ksiazka"] .szyna { scrollbar-color: var(--szyna-suwak) var(--szyna-tlo-2); } html[data-wyglad="ksiazka"] .szyna::-webkit-scrollbar-track { background: var(--szyna-tlo-2); } html[data-wyglad="ksiazka"] .szyna::-webkit-scrollbar-thumb { background: var(--szyna-suwak); border: 3px solid var(--szyna-tlo-2); border-radius: 999px; } /* mgiełka nad przyciskiem „niżej” musi być w kolorze JASNEJ szyny */ html[data-wyglad="ksiazka"] .szyna-wiecej { background: linear-gradient(to top, var(--szyna-tlo-1) 52%, transparent); } } /* --------------------------------------------------------- pasek górny -- */ html[data-wyglad="ksiazka"] .gora { background: rgba(255, 248, 238, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linia); } html[data-wyglad="ksiazka"][data-motyw="ciemny"] .gora { background: rgba(23, 18, 12, .86); } html[data-wyglad="ksiazka"] .okruszki { font-family: var(--f-tekst); font-size: .88rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tekst-2); } html[data-wyglad="ksiazka"] .ikonka { width: 40px; height: 40px; border-radius: 14px; border: 1px solid var(--linia); background: var(--arkusz); box-shadow: var(--cien-1); } html[data-wyglad="ksiazka"] .ikonka:hover { background: var(--arkusz-2); transform: translateY(-1px); } html[data-wyglad="ksiazka"] .gora-marka { width: 38px; height: 38px; border-radius: 13px; } /* =================================================== SEKCJE I NAGŁÓWKI == */ html[data-wyglad="ksiazka"] .sekcja + .sekcja { border-top: none; } html[data-wyglad="ksiazka"] .sekcja > h2 { font-family: var(--f-tytul); font-weight: 800; letter-spacing: -.018em; line-height: 1.14; padding-top: 0; margin-bottom: .55em; } html[data-wyglad="ksiazka"] .sekcja > h2::before { display: none; } html[data-wyglad="ksiazka"] .lead { font-family: var(--f-tekst); font-size: clamp(1.08rem, .5vw + 1rem, 1.22rem); line-height: 1.62; color: var(--tekst-2); } html[data-wyglad="ksiazka"] .lead b { color: var(--tekst); font-weight: 800; } /* nagłówek rozdziału z okrągłą plakietką numeru — znak rozpoznawczy „Książki” */ html[data-wyglad="ksiazka"] main h2 { font-family: var(--f-tytul); font-size: var(--t-h2); font-weight: 800; letter-spacing: -.018em; line-height: 1.18; margin-top: 2.6em; padding-top: 0; padding-left: 62px; border-top: none; position: relative; min-height: 48px; display: flex; align-items: center; } html[data-wyglad="ksiazka"] main h2::before { content: counter(rozdzial); position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 0; border-radius: 16px; background: var(--lekcja, var(--plama)); color: #fff; font-family: var(--f-tekst); font-size: 1.02rem; font-weight: 800; letter-spacing: 0; box-shadow: var(--cien-1); } html[data-wyglad="ksiazka"] main h3 { font-family: var(--f-tytul); font-weight: 700; letter-spacing: -.01em; margin-top: 1.9em; } html[data-wyglad="ksiazka"] main p { margin-top: .9em; line-height: 1.72; } html[data-wyglad="ksiazka"] .de { font-family: var(--f-de); font-size: var(--t-de); } /* spis rozdziałów: pigułki zamiast listy z kreską */ html[data-wyglad="ksiazka"] .spis a { padding: 8px 14px; border-left: none; border-radius: 12px; font-size: .88rem; font-weight: 600; } html[data-wyglad="ksiazka"] .spis a:hover { background: var(--arkusz-2); color: var(--tekst); border-left-color: transparent; } html[data-wyglad="ksiazka"] .spis a.aktywny { background: var(--lekcja, var(--plama)); color: #fff; font-weight: 800; box-shadow: var(--cien-1); } /* ============================================================ PRZYCISKI = */ html[data-wyglad="ksiazka"] .btn { font-family: var(--f-tekst); border-radius: 999px; border: 2px solid var(--linia-2); background: var(--arkusz); font-weight: 800; letter-spacing: 0; box-shadow: var(--cien-1); transition: transform .14s, box-shadow .14s, background .14s, border-color .14s; } html[data-wyglad="ksiazka"] .btn:hover { background: var(--arkusz-2); border-color: var(--plama); transform: translateY(-2px); box-shadow: var(--cien-2); } html[data-wyglad="ksiazka"] .btn:active { transform: translateY(0); box-shadow: var(--cien-1); } html[data-wyglad="ksiazka"] .btn-glowny { background: var(--plama); border-color: var(--plama); color: var(--na-plamie); } html[data-wyglad="ksiazka"] .btn-glowny:hover { background: var(--plama); border-color: var(--plama); color: var(--na-plamie); opacity: 1; filter: brightness(1.06); } html[data-wyglad="ksiazka"] .btn-cichy { border-color: transparent; background: transparent; box-shadow: none; } html[data-wyglad="ksiazka"] .btn-maly { border-radius: 999px; } /* żółty przycisk odsłuchu zostaje żółty — dziecko szuka go wzrokiem */ html[data-wyglad="ksiazka"] .mow, html[data-wyglad="ksiazka"] .btn-sluch { border-radius: 999px; border: 2px solid #f0c33c; box-shadow: var(--cien-1); } html[data-wyglad="ksiazka"] .mow:hover, html[data-wyglad="ksiazka"] .btn-sluch:hover { background: #ffe873; transform: translateY(-2px); box-shadow: var(--cien-2); } html[data-wyglad="ksiazka"] .klik-mow { border-bottom: 2px dotted #e0a800; } html[data-wyglad="ksiazka"] .klik-mow:hover { background: #fff2c4; border-radius: 6px; } /* ======================================================== GŁOWA LEKCJI == */ html[data-wyglad="ksiazka"] .lekcja-glowa { position: relative; margin: clamp(16px, 2vw, 26px) auto 0; max-width: calc(var(--breakout) + 2 * var(--pad)); padding: clamp(26px, 3.4vw, 44px) clamp(24px, 3vw, 42px) clamp(24px, 2.8vw, 36px); border: none; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--lekcja, #e2662c) 16%, var(--arkusz)) 0%, var(--arkusz) 68%); box-shadow: var(--cien-2); } html[data-wyglad="ksiazka"] .lekcja-glowa::after { /* delikatna plama koloru lekcji w prawym górnym rogu */ content: ""; display: block; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: var(--lekcja, #e2662c); opacity: .10; pointer-events: none; } html[data-wyglad="ksiazka"] .lekcja-glowa > * { position: relative; z-index: 1; } html[data-wyglad="ksiazka"] .lekcja-etykieta { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; margin: 0 0 14px; border-radius: 999px; background: var(--lekcja, var(--plama)); color: #fff; font-family: var(--f-tekst); font-size: .78rem; font-weight: 800; letter-spacing: .08em; box-shadow: var(--cien-1); } html[data-wyglad="ksiazka"] .lekcja-etykieta::before { content: "📖"; width: auto; height: auto; background: none; font-size: .95rem; } html[data-wyglad="ksiazka"] .lekcja-glowa h1 { font-family: var(--f-tytul); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; } /* cele lekcji jako pigułki — jak „plan rozdziału” w czytankach */ html[data-wyglad="ksiazka"] ul.cele { border-top: none; padding-top: .4rem; gap: 9px; display: flex; flex-wrap: wrap; } html[data-wyglad="ksiazka"] ul.cele li { padding: 8px 15px 8px 15px; border-radius: 999px; background: var(--arkusz); border: 1px solid var(--linia); box-shadow: var(--cien-1); font-size: .9rem; font-weight: 600; } html[data-wyglad="ksiazka"] ul.cele li::before { display: none; } html[data-wyglad="ksiazka"] .pasek-postepu { height: 8px; border-radius: 999px; } html[data-wyglad="ksiazka"] .pasek-postepu > i { border-radius: 999px; } /* ==================================================== BLOKI W TREŚCI === */ html[data-wyglad="ksiazka"] .karta, html[data-wyglad="ksiazka"] .ramka, html[data-wyglad="ksiazka"] .cw, html[data-wyglad="ksiazka"] .dialog, html[data-wyglad="ksiazka"] .czytanka, html[data-wyglad="ksiazka"] .tabela-opak, html[data-wyglad="ksiazka"] figure.grafika, html[data-wyglad="ksiazka"] .slownik-grupa { box-shadow: var(--cien-1); } html[data-wyglad="ksiazka"] .karta { padding: 22px 24px; border: 1px solid var(--linia); border-radius: var(--r); } html[data-wyglad="ksiazka"] .siatka { gap: 16px; } html[data-wyglad="ksiazka"] .siatka .karta { border-radius: var(--r); } /* ramki: kolorowe pola z ikoną, nie kreska z boku */ html[data-wyglad="ksiazka"] .ramka { padding: 20px 24px; border: 1px solid var(--linia); border-left: 1px solid var(--linia); border-radius: var(--r); background: var(--arkusz-2); } html[data-wyglad="ksiazka"] .ramka-tytul { font-family: var(--f-tekst); font-size: .84rem; font-weight: 800; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; } /* IKON TU NIE DODAJEMY. Treść lekcji ma emoji wpisane wprost w tekst tytułu ramki („📐 Jedna reguła…”, „💡 Wyłów z dialogu”), więc ikona z `::before` stałaby obok drugiej takiej samej. */ html[data-wyglad="ksiazka"] .ramka-regula { background: color-mix(in srgb, var(--p-b2) 9%, var(--arkusz)); border-color: color-mix(in srgb, var(--p-b2) 26%, var(--arkusz)); } html[data-wyglad="ksiazka"] .ramka-regula .ramka-tytul { color: var(--p-b2); } html[data-wyglad="ksiazka"] .ramka-uwaga { background: var(--uwaga-tlo); border-color: color-mix(in srgb, var(--uwaga) 26%, var(--arkusz)); } html[data-wyglad="ksiazka"] .ramka-uwaga .ramka-tytul { color: var(--uwaga); } html[data-wyglad="ksiazka"] .ramka-tip { background: var(--ok-tlo); border-color: color-mix(in srgb, var(--ok) 26%, var(--arkusz)); } html[data-wyglad="ksiazka"] .ramka-tip .ramka-tytul { color: var(--ok); } html[data-wyglad="ksiazka"] .ramka-pulapka { background: var(--zle-tlo); border-color: color-mix(in srgb, var(--zle) 26%, var(--arkusz)); } html[data-wyglad="ksiazka"] .ramka-pulapka .ramka-tytul { color: var(--zle); } html[data-wyglad="ksiazka"] figure.grafika { border-radius: var(--r); padding: 20px; } html[data-wyglad="ksiazka"] figure.grafika figcaption { border-top: 1px dashed var(--linia-2); font-size: .86rem; } html[data-wyglad="ksiazka"] .tabela-opak { border-radius: var(--r); /* przewijanie w poziomie MUSI zostać — inaczej szerokie tabele urywają się na telefonie (ta sama pułapka co w „Kokpicie”) */ overflow-x: auto; } html[data-wyglad="ksiazka"] table { font-size: .96rem; } html[data-wyglad="ksiazka"] thead th { background: var(--plama); color: var(--na-plamie); font-family: var(--f-tekst); font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: none; padding: 11px 14px; } html[data-wyglad="ksiazka"] tbody td { padding: 11px 14px; } html[data-wyglad="ksiazka"] tbody tr:nth-child(even) td { background: var(--arkusz-2); } html[data-wyglad="ksiazka"] .chip { border-radius: 999px; border: 1px solid var(--linia-2); padding: 6px 13px; font-weight: 600; box-shadow: var(--cien-1); } html[data-wyglad="ksiazka"] .tag { border-radius: 999px; font-size: .76rem; letter-spacing: .02em; text-transform: none; font-weight: 800; } html[data-wyglad="ksiazka"] .plakietka { border-radius: 999px; letter-spacing: .02em; } /* ------------------------------------------------------------ dialog -- */ /* dymki rozmowy — najbardziej „czytankowy” element */ html[data-wyglad="ksiazka"] .dialog { border: 1px solid #f7cfdc; border-radius: var(--r-l); background: #fff5f8; } html[data-wyglad="ksiazka"][data-motyw="ciemny"] .dialog { background: #2a1a1f; border-color: #4a2a34; } html[data-wyglad="ksiazka"] .dialog-scena { background: transparent; border-bottom: 1px dashed #f0b9cc; font-family: var(--f-tekst); font-size: .9rem; font-weight: 600; color: #b03a5e; } html[data-wyglad="ksiazka"][data-motyw="ciemny"] .dialog-scena { color: #ff9ab4; border-bottom-color: #4a2a34; } html[data-wyglad="ksiazka"] .kwestia-kto { font-family: var(--f-tekst); font-size: .78rem !important; font-weight: 800; letter-spacing: .06em; text-transform: none; color: var(--tekst-2); } html[data-wyglad="ksiazka"] .kwestia > div:last-child, html[data-wyglad="ksiazka"] .kwestia:nth-child(even) > div:last-child { background: #fff; border-radius: 22px 22px 22px 6px; box-shadow: var(--cien-1); border: 1px solid #f7dfe7; padding: 13px 17px; } html[data-wyglad="ksiazka"] .kwestia:nth-child(even) > div:last-child { border-radius: 22px 22px 6px 22px; } html[data-wyglad="ksiazka"][data-motyw="ciemny"] .kwestia > div:last-child, html[data-wyglad="ksiazka"][data-motyw="ciemny"] .kwestia:nth-child(even) > div:last-child { background: var(--arkusz); border-color: var(--linia); } html[data-wyglad="ksiazka"] .kwestia-pl { font-size: .9rem; color: var(--tekst-2); } html[data-wyglad="ksiazka"] .kwestia.gra > div:last-child { box-shadow: 0 0 0 3px #ffe08a, var(--cien-1); } /* ---------------------------------------------------------- czytanka -- */ html[data-wyglad="ksiazka"] .czytanka { border: 1px solid var(--linia); border-radius: var(--r-l); position: relative; overflow: hidden; } html[data-wyglad="ksiazka"] .czytanka::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; background: linear-gradient(180deg, var(--lekcja, var(--plama)), #f7a325); } html[data-wyglad="ksiazka"] .czytanka-glowa { background: var(--arkusz-2); border-bottom: 1px dashed var(--linia-2); padding-left: 26px; } html[data-wyglad="ksiazka"] .czytanka-etykieta { font-family: var(--f-tekst); font-size: .78rem; font-weight: 800; letter-spacing: .06em; color: var(--lekcja, var(--plama)); } html[data-wyglad="ksiazka"] .czytanka-tytul { font-family: var(--f-tytul); font-weight: 800; letter-spacing: -.015em; } html[data-wyglad="ksiazka"] .czytanka-tresc { padding-left: 26px; } html[data-wyglad="ksiazka"] .czytanka-tresc > p:first-of-type::first-letter { font-family: var(--f-tytul); font-weight: 800; color: var(--lekcja, var(--plama)); } html[data-wyglad="ksiazka"] .czytanka-pytania { background: var(--arkusz-2); border-top: 1px dashed var(--linia-2); padding-left: 26px; } /* --------------------------------------------------------- słowniczek - */ html[data-wyglad="ksiazka"] .slownik { gap: 14px; } html[data-wyglad="ksiazka"] .slowo { border: 1px solid var(--linia); border-radius: var(--r-s); padding: 15px 17px; box-shadow: var(--cien-1); transition: transform .14s, box-shadow .14s; } html[data-wyglad="ksiazka"] .slowo:hover { background: var(--arkusz); transform: translateY(-2px); box-shadow: var(--cien-2); } html[data-wyglad="ksiazka"] .slowo-de { font-family: var(--f-de); font-size: 1.1rem; } html[data-wyglad="ksiazka"] .ipa { font-size: .84rem; color: var(--tekst-3); } /* ============================================================ ĆWICZENIA = */ html[data-wyglad="ksiazka"] .cw { border: 1px solid var(--linia); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--cien-2); } html[data-wyglad="ksiazka"] .cw-glowa { background: color-mix(in srgb, var(--lekcja, #e2662c) 10%, var(--arkusz)); border-bottom: 1px solid var(--linia); padding: 18px 20px; } /* `.cw-nr` to NIE numer, tylko etykieta („Ćwiczenie 3") — kwadratowa plakietka o stałym rozmiarze ucina jej tekst. Ma być pigułką, która rośnie razem z napisem. */ html[data-wyglad="ksiazka"] .cw-nr { display: inline-block; width: auto; height: auto; margin: 0 0 12px; padding: 6px 14px; border-radius: 999px; background: var(--lekcja, var(--plama)); color: #fff; font-family: var(--f-tekst); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: var(--cien-1); } html[data-wyglad="ksiazka"] .cw-tytul { font-family: var(--f-tytul); font-size: 1.2rem; font-weight: 800; letter-spacing: -.012em; } html[data-wyglad="ksiazka"] .cw-polecenie { font-size: .92rem; } html[data-wyglad="ksiazka"] .cw-stopka { border-top: 1px dashed var(--linia-2); } html[data-wyglad="ksiazka"] .zadanie { border-top: 1px dashed var(--linia); } html[data-wyglad="ksiazka"] .zadanie-nr { border-radius: 999px; font-weight: 800; background: var(--arkusz-2); } html[data-wyglad="ksiazka"] .luka { border-radius: 12px; border: 2px solid var(--linia-2); background: var(--arkusz); font-family: var(--f-de); } html[data-wyglad="ksiazka"] .luka:focus { border-color: var(--lekcja, var(--plama)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lekcja, #e2662c) 22%, transparent); } html[data-wyglad="ksiazka"] .luka.ok { border-color: var(--ok); background: var(--ok-tlo); } html[data-wyglad="ksiazka"] .luka.zle { border-color: var(--zle); background: var(--zle-tlo); } html[data-wyglad="ksiazka"] .opcja { border-radius: 999px; border: 2px solid var(--linia-2); font-weight: 600; box-shadow: var(--cien-1); transition: transform .14s, box-shadow .14s, background .14s, border-color .14s; } html[data-wyglad="ksiazka"] .opcja:hover { background: var(--arkusz-2); border-color: var(--lekcja, var(--plama)); transform: translateY(-2px); box-shadow: var(--cien-2); } /* stan „wybrana” musi zostać jednoznaczny — to on nie może zniknąć */ html[data-wyglad="ksiazka"] .opcja[aria-pressed="true"] { background: var(--lekcja, var(--plama)); border-color: var(--lekcja, var(--plama)); color: #fff; } html[data-wyglad="ksiazka"] .opcja.ok { border-color: var(--ok); background: var(--ok-tlo); color: var(--ok); box-shadow: inset 0 0 0 2px var(--ok), var(--cien-1); } html[data-wyglad="ksiazka"] .opcja.zle { border-color: var(--zle); background: var(--zle-tlo); color: var(--zle); box-shadow: inset 0 0 0 2px var(--zle), var(--cien-1); } html[data-wyglad="ksiazka"] .para-el { border-radius: 14px; border: 2px solid var(--linia-2); box-shadow: var(--cien-1); } html[data-wyglad="ksiazka"] .klocek { border-radius: 12px; border: 2px solid var(--linia-2); box-shadow: var(--cien-1); font-family: var(--f-de); } html[data-wyglad="ksiazka"] .szyk-wynik, html[data-wyglad="ksiazka"] .szyk-zapas { border-radius: var(--r-s); border: 2px dashed var(--linia-2); } html[data-wyglad="ksiazka"] .podpowiedz-btn { border-radius: 999px; border: 2px solid var(--linia-2); font-weight: 700; } html[data-wyglad="ksiazka"] .podpowiedz-btn:hover { border-color: var(--plama); } html[data-wyglad="ksiazka"] .podpowiedz-tresc { border-radius: var(--r-s); background: var(--arkusz-2); } html[data-wyglad="ksiazka"] .wyjasnienie { border-radius: var(--r-s); border-left: 5px solid var(--ok); background: var(--ok-tlo); } /* ============================================================== FISZKI == */ html[data-wyglad="ksiazka"] .fiszka-str { border-radius: var(--r-xl); border: 1px solid var(--linia); box-shadow: var(--cien-2); } html[data-wyglad="ksiazka"] .fiszka-tyl { background: var(--arkusz-2); border-color: var(--lekcja, var(--plama)); } html[data-wyglad="ksiazka"] .fiszka-slowo { font-family: var(--f-de); font-weight: 800; letter-spacing: -.02em; } html[data-wyglad="ksiazka"] .btn-odwroc { border-radius: 999px; } html[data-wyglad="ksiazka"] .btn-odwroc:hover { transform: translateY(-2px); opacity: 1; } html[data-wyglad="ksiazka"] .ocena-btn { border-radius: var(--r-s); box-shadow: var(--cien-1); font-weight: 800; } html[data-wyglad="ksiazka"] .ocena-btn:hover { transform: translateY(-2px); box-shadow: var(--cien-2); } /* ============================================================= SŁOWNIK == */ html[data-wyglad="ksiazka"] #szukaj { border-radius: 999px; border: 2px solid var(--linia-2); padding-left: 20px; } html[data-wyglad="ksiazka"] #szukaj:focus { border-color: var(--plama); box-shadow: 0 0 0 4px color-mix(in srgb, var(--plama) 20%, transparent); } /* ================================================= DOLNY PASEK (telefon) = */ html[data-wyglad="ksiazka"] .dolny-pasek { background: rgba(255, 248, 238, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--linia); } html[data-wyglad="ksiazka"][data-motyw="ciemny"] .dolny-pasek { background: rgba(23, 18, 12, .94); } html[data-wyglad="ksiazka"] .dp-btn { border-radius: 999px; border: 2px solid var(--linia-2); font-weight: 800; box-shadow: var(--cien-1); } html[data-wyglad="ksiazka"] .dp-btn.dp-glowny { background: var(--plama); border-color: var(--plama); color: var(--na-plamie); } html[data-wyglad="ksiazka"] .arkusz-rozdzialow > div { border-radius: var(--r-l) var(--r-l) 0 0; } html[data-wyglad="ksiazka"] .arkusz-rozdzialow a { border-radius: 12px; } html[data-wyglad="ksiazka"] .okno { border-radius: var(--r-l); border: 1px solid var(--linia); box-shadow: var(--cien-3); } html[data-wyglad="ksiazka"] .pole { border-radius: 14px; border: 2px solid var(--linia-2); min-height: 46px; } html[data-wyglad="ksiazka"] .pasek-zgody { border-radius: var(--r); box-shadow: var(--cien-2); } /* ========================================================================= ================= S T R O N A G Ł Ó W N A (klasy k-*) =============== ========================================================================= */ html[data-wyglad="ksiazka"] .k-nad { font-family: var(--f-tekst); font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: var(--plama); } html[data-wyglad="ksiazka"] .k-nad::after { display: none; } /* --------------------------------------------------------------- hero -- */ html[data-wyglad="ksiazka"] .k-hero { padding: clamp(26px, 3.4vw, 46px); border-radius: var(--r-xl); background: linear-gradient(135deg, #ffe9d8 0%, #ffffff 62%); box-shadow: var(--cien-2); border: 1px solid var(--linia); } html[data-wyglad="ksiazka"][data-motyw="ciemny"] .k-hero { background: linear-gradient(135deg, #33231a 0%, var(--arkusz) 62%); } html[data-wyglad="ksiazka"] .k-hero h1 { font-family: var(--f-tytul); font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -.022em; line-height: 1.06; } html[data-wyglad="ksiazka"] .k-fakty { gap: 12px; } html[data-wyglad="ksiazka"] .k-fakt { border-radius: var(--r); border: 1px solid var(--linia); padding: 18px; box-shadow: var(--cien-1); text-align: center; } html[data-wyglad="ksiazka"] .k-fakt b { font-family: var(--f-tytul); font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: var(--plama); } html[data-wyglad="ksiazka"] .k-fakt span { font-size: .82rem; font-weight: 600; } html[data-wyglad="ksiazka"] .k-fakt-szeroki { background: var(--plama); border-color: var(--plama); color: var(--na-plamie); } html[data-wyglad="ksiazka"] .k-fakt-szeroki b { color: var(--na-plamie); font-size: 1.5rem; } html[data-wyglad="ksiazka"] .k-fakt-szeroki span { color: var(--na-plamie); opacity: .9; } /* -------------------------------------------------------------- tablica - */ /* „Kokpit” rysuje tablicę jedną siatką z liniami 1 px. „Książka” rozbija ją na cztery osobne karty z cieniem — tak jak półka z czterema książkami. */ html[data-wyglad="ksiazka"] .k-tablica { gap: 18px; background: none; border: none; border-radius: 0; overflow: visible; } html[data-wyglad="ksiazka"] .k-poziom { border: 1px solid var(--linia); border-radius: var(--r-l); padding: 22px; box-shadow: var(--cien-1); background: var(--arkusz); position: relative; overflow: hidden; } html[data-wyglad="ksiazka"] .k-poziom::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--poziom); } html[data-wyglad="ksiazka"] .k-poziom-glowa { border-bottom: 1px dashed var(--linia-2); } html[data-wyglad="ksiazka"] .k-znak { width: 42px; height: 42px; border-radius: 15px; font-family: var(--f-tekst); font-size: .9rem; font-weight: 800; color: #fff; box-shadow: var(--cien-1); } html[data-wyglad="ksiazka"] .k-poziom-tytul b { font-family: var(--f-tytul); font-size: 1.15rem; font-weight: 800; } html[data-wyglad="ksiazka"] .k-poziom-tytul span { font-size: .82rem; } html[data-wyglad="ksiazka"] .k-cena { border-radius: 999px; border: 2px solid var(--poziom); color: var(--poziom); font-size: .82rem; padding: 5px 12px; } html[data-wyglad="ksiazka"] .k-chipy { gap: 8px; } html[data-wyglad="ksiazka"] .k-chip { border-radius: 14px; border: 2px solid var(--linia-2); font-family: var(--f-tekst); font-size: .92rem; font-weight: 800; box-shadow: var(--cien-1); transition: transform .14s, box-shadow .14s, background .14s, border-color .14s; } html[data-wyglad="ksiazka"] .k-chip:hover { border-color: var(--poziom); background: var(--poziom-tlo); transform: translateY(-3px); box-shadow: var(--cien-2); } html[data-wyglad="ksiazka"] .k-chip.k-zrobiona { color: #fff; } html[data-wyglad="ksiazka"] .k-chip.k-toku { border-width: 3px; } html[data-wyglad="ksiazka"] .k-chip.k-test { border-radius: 999px; font-size: .8rem; } html[data-wyglad="ksiazka"] .k-chip u { height: 4px; border-radius: 0 0 11px 11px; } html[data-wyglad="ksiazka"] .k-odblokuj { border-radius: 999px; border-width: 2px; } html[data-wyglad="ksiazka"] .k-legenda { border-top: 1px dashed var(--linia-2); font-size: .82rem; } html[data-wyglad="ksiazka"] .k-legenda i { width: 17px; height: 17px; border-radius: 6px; border-width: 2px; } /* ------------------------------------------------------------- cennik -- */ html[data-wyglad="ksiazka"] .k-cennik { border: 1px solid var(--linia); border-radius: var(--r-l); box-shadow: var(--cien-1); } html[data-wyglad="ksiazka"] .k-wiersz { padding: 16px 20px; border-top: 1px dashed var(--linia); } html[data-wyglad="ksiazka"] .k-wiersz:hover { background: var(--arkusz-2); } html[data-wyglad="ksiazka"] .k-wiersz-cena { font-family: var(--f-tytul); font-size: 1.2rem; font-weight: 800; } html[data-wyglad="ksiazka"] .k-wiersz.k-komplet { background: var(--plama); border-top-color: var(--plama); } html[data-wyglad="ksiazka"] .k-wiersz.k-komplet:hover { background: #c9551f; } html[data-wyglad="ksiazka"] .k-wiersz.k-komplet .k-znak { background: #ffd93b; color: #2b2118; } /* -------------------------------------------------------- kroki lekcji -- */ html[data-wyglad="ksiazka"] .k-kroki { gap: 16px; background: none; border: none; border-radius: 0; overflow: visible; } html[data-wyglad="ksiazka"] .k-krok { border: 1px solid var(--linia); border-radius: var(--r); padding: 22px; box-shadow: var(--cien-1); } html[data-wyglad="ksiazka"] .k-krok b { font-family: var(--f-tekst); font-size: .78rem; letter-spacing: .1em; text-transform: none; color: var(--plama); } html[data-wyglad="ksiazka"] .k-krok h3 { font-family: var(--f-tytul); font-size: 1.14rem; font-weight: 800; } html[data-wyglad="ksiazka"] .k-krok p { font-size: .92rem; } /* ------------------------------------------------------------- stopka -- */ html[data-wyglad="ksiazka"] .k-stopka { border-top: 2px dashed var(--linia-2); font-size: .88rem; } /* ========================================================================= ================== P R Z E Ł Ą C Z N I K W Y G L Ą D U =============== Wygląd samego przełącznika w „Książce”; podstawa (wspólna dla obu wyglądów) siedzi w styl-kokpit.css. ========================================================================= */ html[data-wyglad="ksiazka"] .wyglad-menu { border-radius: var(--r); border: 1px solid var(--linia); box-shadow: var(--cien-3); } html[data-wyglad="ksiazka"] .wyglad-opcja { border-radius: var(--r-s); } html[data-wyglad="ksiazka"] .wyglad-opcja[aria-checked="true"] { background: var(--plama); color: var(--na-plamie); border-color: var(--plama); } html[data-wyglad="ksiazka"] .wyglad-opcja[aria-checked="true"] small { color: var(--na-plamie); opacity: .88; } /* ========================================================================= ========================= T E L E F O N (< 900) ======================= Tokeny, które „Kokpit” przestawia w swojej regule medialnej, muszą być powtórzone tutaj — nasza reguła bazowa ma wyższą wagę i bez tego obowiązywałaby także na telefonie. ========================================================================= */ @media (max-width: 899px) { html[data-wyglad="ksiazka"] { --pad: 16px; --gora-h: 56px; } html[data-wyglad="ksiazka"] .ikonka { width: 44px; height: 44px; } html[data-wyglad="ksiazka"] .btn-maly { min-height: 44px; } html[data-wyglad="ksiazka"] .szyna { border-right: none; box-shadow: var(--cien-3); } html[data-wyglad="ksiazka"] .lekcja-glowa { margin: 12px var(--pad) 0; max-width: none; border-radius: var(--r-l); padding: 24px 20px 22px; } /* w „Kokpicie” bloki idą na telefonie od krawędzi do krawędzi i tracą zaokrąglenia — w „Książce” zostają kartami z marginesem */ html[data-wyglad="ksiazka"] main > figure.grafika, html[data-wyglad="ksiazka"] main > .czytanka, html[data-wyglad="ksiazka"] main > .dialog, html[data-wyglad="ksiazka"] main > .cw { margin-left: 0; margin-right: auto; border-radius: var(--r); border-left: 1px solid var(--linia); border-right: 1px solid var(--linia); } html[data-wyglad="ksiazka"] main > .dialog { border-color: #f7cfdc; } html[data-wyglad="ksiazka"] main h2 { padding-left: 52px; min-height: 40px; } html[data-wyglad="ksiazka"] main h2::before { width: 38px; height: 38px; border-radius: 13px; font-size: .92rem; } /* spis rozdziałów jako pasek pigułek */ html[data-wyglad="ksiazka"] .spis { padding: 0 12px; gap: 8px; } html[data-wyglad="ksiazka"] .spis a { flex: none; padding: 8px 14px; border: none; border-radius: 999px; background: var(--arkusz-2); font-size: .86rem; } html[data-wyglad="ksiazka"] .spis a.aktywny { background: var(--lekcja, var(--plama)); color: #fff; border-bottom-color: transparent; } html[data-wyglad="ksiazka"] ul.cele { grid-template-columns: 1fr; display: flex; } html[data-wyglad="ksiazka"] .k-hero { padding: 22px 18px; border-radius: var(--r-l); } html[data-wyglad="ksiazka"] .k-poziom { padding: 18px; } } @media (max-width: 380px) { html[data-wyglad="ksiazka"] { --t-tekst: 1.02rem; } } /* ========================================================================= ======================== K O M P U T E R (≥ 900) ====================== ========================================================================= */ @media (min-width: 900px) { html[data-wyglad="ksiazka"] .kwestia { padding: 4px clamp(16px, 2vw, 26px); } html[data-wyglad="ksiazka"] .kwestia:hover { background: none; } html[data-wyglad="ksiazka"] .kwestia.gra { background: none; } } @media (min-width: 1240px) { html[data-wyglad="ksiazka"] .spis { border-left: none; padding-left: 10px; } html[data-wyglad="ksiazka"] .spis > div:first-child { font-size: .74rem !important; letter-spacing: .1em !important; color: var(--plama); } } /* ============================================================== DRUK ==== */ @media print { html[data-wyglad="ksiazka"] body { background: #fff; } html[data-wyglad="ksiazka"] .lekcja-glowa { box-shadow: none; border-bottom: 2px solid #000; } }