/* Marathon onboarder — arkusz główny. Kolejność sekcji: fonty → tokeny → reset → typografia → komponenty → powłoka → ekrany. Trzymaj się jej przy dopisywaniu, inaczej kaskada zacznie zaskakiwać. */ /* Inter jako font zmienny (variable font), podzielony wg unicode-range na podzbiory alfabetów zamiast na wagi. Przeglądarka pobiera tylko te pliki, których znaki faktycznie występują na stronie — polski użytkownik nigdy nie płaci transferem za cyrylicę, a jeden plik obsługuje od razu wszystkie wagi 400-800 (regular/semibold/extrabold). UWAGA: te @font-face NIE SĄ DZIŚ UŻYWANE. Inter wypadł z --font-sans przy przejściu na humi, bo humi nie ładuje żadnego własnego pisma — bierze domyślny stos systemowy Tailwinda (patrz --font-sans w sekcji tokenów). Deklaracje zostają, bo mają unicode-range i przeglądarka nie pobiera pliku, którego rodzina nigdzie nie występuje: nic nie kosztują, a przywrócenie Intera to dopisanie jednego słowa do --font-sans. Jeżeli decyzja o piśmie systemowym się utrwali, usuń stąd Intera RAZEM z plikami woff2 i wpisem w licencji (pilnuje jej TestFontLicenseCoversEveryEmbeddedFont). */ @font-face { font-family: Inter; src: url("/static/c940764593d0/fonts/inter-latin.woff2") format("woff2"); font-weight: 400 800; 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: Inter; src: url("/static/a28eb6d3ccb5/fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 400 800; 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: Inter; src: url("/static/aebf2ab4a4ce/fonts/inter-cyrillic.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: Inter; src: url("/static/fccca918fea4/fonts/inter-cyrillic-ext.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* Inter nie ma alfabetu gruzińskiego — bez tego panel po gruzińsku renderowałby się fontem systemowym. Noto Sans Georgian (OFL), też zmienny, wzięty WYŁĄCZNIE w podzbiorze georgian: łacinę i cyrylicę pokrywa już Inter, a dociąganie ich drugi raz zmieniłoby wygląd polskiego tekstu. unicode-range sprawia, że przeglądarka pobiera ten plik tylko wtedy, gdy na stronie faktycznie są znaki gruzińskie — pl/en/uk/ru nie płacą za niego ani bajtem. Dlatego dopisanie go do --font-sans globalnie jest bezpieczne. */ @font-face { font-family: "Noto Sans Georgian"; src: url("/static/471ae4eb863b/fonts/noto-sans-georgian.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31; } :root { /* ══════════════════════════════════════════════════════════════════════ PALETA I SKALE — 1:1 Z HUMI ONBOARDER ══════════════════════════════════════════════════════════════════════ Źródłem prawdy dla całej warstwy wizualnej jest front humi onboardera (decyzja zamawiającego, 22.08.2026: „design sam w sobie ma być identyczny jak na humi"). Humi stoi na shadcn-svelte z bazą `slate` (components.json: "baseColor": "slate") i domyślnym motywem shadcn — czyli tym samym zestawem zmiennych --background/--foreground/--primary/…, tyle że zapisanym w HSL i mapowanym Tailwindem na klasy. Ten blok to ten sam zestaw, przeliczony na hex i podpięty pod NASZE nazwy tokenów, żeby 3700 linijek reguł niżej nie musiało się zmieniać. Poprzednikiem był system „Cluo — Core" z Figmy (Inter, indygo, promienie 10/6/16, neutralne Zinc). Zniknął stąd w całości — nie dlatego, że był zły, tylko dlatego, że mamy JEDNO źródło prawdy i jest nim humi. Brand book klienta dopasujemy później; wtedy zmienia się TEN blok, nie reguły. Przeliczenie HSL → hex (src/app.css w humi → tutaj): --background 0 0% 100% → #ffffff --foreground 222.2 84% 4.9% → #020817 (slate 950) --muted 210 40% 96.1% → #f1f5f9 (slate 100) --muted-foreground 215.4 16.3% 46.9% → #64748b (slate 500) --border/--input 214.3 31.8% 91.4% → #e2e8f0 (slate 200) --primary 222.2 47.4% 11.2% → #0f172a (slate 900) --primary-foreground 210 40% 98% → #f8fafc (slate 50) --secondary/--accent 210 40% 96.1% → #f1f5f9 --destructive 0 84.2% 60.2% → #ef4444 (red 500) --ring 215 20.2% 65.1% → #94a3b8 (slate 400) --radius 0.5rem → 8px (md = 6px, sm = 4px) */ /* color-scheme mówi przeglądarce, w jakim schemacie malować to, czego nie malujemy sami: klasyczne pasy przewijania, rozwiniętą listę , tło autouzupełniania i wewnętrzne przyciski input[type=date/file] maluje przeglądarka, nie my — bez tego zostawały jasne. */ color-scheme: dark; /* ── powierzchnie i tekst ── */ --color-bg: var(--zinc-950); --color-surface: var(--zinc-900); --color-surface-muted: var(--zinc-800); --color-surface-subtle: var(--zinc-850); --color-surface-muted-hover: var(--zinc-750); --color-fg: var(--zinc-50); --color-fg-soft: var(--zinc-200); /* Zinc 400 na karcie 6,9:1 i na tle strony 7,7:1 — z zapasem nad progiem AA 4,5:1 dla tekstu poniżej 18,66 px, czyli dla okruszków, podtytułów i plakietek, które w jasnym motywie wymusiły slate 550. */ --color-fg-muted: var(--zinc-400); --color-fg-faint: var(--zinc-500); --color-meta-fg: var(--zinc-500); /* Zinc 825, nie 800: krok 800 dawał na karcie 1,19:1, czyli obrys BLEDSZY niż slate 200 na bieli w jasnym motywie (1,23:1) — a to ta sama krecha i ma nieść tyle samo. 825 daje 1,28:1 na karcie i 1,42:1 na tle strony. */ /* Nakładka bieli zamiast odcienia ze skali — uzasadnienie przy tokenach jasnego motywu. Krycia dobrane pod dotychczasowy wygląd: 12% bieli na karcie (#18181b) daje (52,52,54) wobec zinc-825 (44,44,49) — o włos mocniejsza kreska w środku karty, o włos słabsza na tle strony, w obie strony poniżej progu dostrzegalności na jednym pikselu. Zinc-825 nie ma już przez to ani jednego czytelnika i zostaje w skali tylko jako punkt odniesienia dla liczb w komentarzach. */ --color-border: rgb(255 255 255 / 12%); --color-border-strong: rgb(255 255 255 / 17%); /* ── akcent ── Odwrócony, tak jak w shadcn: w jasnym motywie akcentem jest niemal czarny slate 900, w ciemnym niemal biały zinc 50. Napis na przycisku ma wtedy 17:1 i jest to najmocniejsza para w całym interfejsie — przycisk główny ma być najgłośniejszym elementem ekranu w obu motywach, a nie tylko w jednym. */ --color-accent: var(--zinc-50); --color-accent-strong: var(--zinc-50); --color-accent-deep: var(--zinc-300); --color-accent-fg: var(--zinc-900); --color-ring: var(--zinc-500); /* Pierścień fokusu: slate 400 z 50% krycia (wartość z jasnego motywu) składa się na czerni w ledwie widoczną szarość. Zinc 400 z 65% daje na karcie 4,4:1 jako obwódka, czyli dobrze ponad progiem 3:1 dla elementów nietekstowych. */ --color-ring-shadow: rgb(161 161 170 / 65%); --color-chip-bg: var(--zinc-800); --color-chip-fg: var(--zinc-50); --color-chip-add-bg: var(--zinc-800); /* ── powłoka (pasek boczny) ── Pasek jest o krok JAŚNIEJSZY od tła strony, tak jak w jasnym motywie jest biały na szarym tle: w obu wypadkach czyta się jako panel leżący na stronie, a nie jako jej wycięcie. */ --color-nav: var(--zinc-900); --color-nav-fg: var(--zinc-300); --color-nav-hover: var(--zinc-800); --color-nav-active-fg: var(--zinc-50); /* Indygo 300 (8,9:1 na pasku) zamiast 600 z jasnego motywu — pozycja bieżąca jest NAPISEM, nie pigułką, więc musi zdać próg tekstowy. */ --color-nav-active-accent: var(--indigo-300); --color-nav-chip-active: var(--zinc-50); --color-nav-chip-active-fg: var(--zinc-900); --color-nav-line: rgb(255 255 255 / 9%); --color-avatar-ring: var(--zinc-50); --color-avatar-ring-track: var(--zinc-800); /* ── stany ── Czerwień, zieleń i żółć idą o dwa–trzy stopnie w górę skali: odcienie 500/600 z jasnego motywu mają na czerni 2–3:1 i jako napis przepadają. Napis NA czerwieni zmienia się razem z nią: jasny czerwony wymaga ciemnego napisu (zinc 900 na #f87171 daje 6,4:1; biel — 2,7:1). */ --color-danger: #f87171; --color-danger-hover: #fca5a5; --color-danger-fg: var(--zinc-900); --color-progress: #4ade80; --color-ok-bg: rgb(34 197 94 / 16%); --color-ok-fg: #4ade80; --color-warn-bg: rgb(234 179 8 / 16%); --color-warn-fg: #facc15; --color-error-bg: rgb(239 68 68 / 16%); --color-error-fg: #f87171; /* ── akcent edycji ćwiczenia ── Napis w górę (emerald 400, 9,2:1). Wypełnienie ZOSTAJE na emerald 600 — patrz komentarz przy --color-edit-fill: to kompromis 1:1 z jasnego motywu, a nie liczba, którą tu poprawiamy. */ --color-edit: var(--emerald-400); --color-edit-deep: var(--emerald-300); --color-edit-ring: var(--emerald-500); /* ── kolory typów ćwiczeń ── Kroki 400 zamiast 500/600: te same barwy, o stopień jaśniejsze, bo ikona typu stoi obok tytułu i czyta się razem z nim. */ --color-extype-czytanka: var(--emerald-400); --color-extype-quiz: var(--purple-400); --color-extype-otwarte: var(--indigo-400); --color-extype-luki: var(--teal-400); --color-extype-dopasowanie: var(--orange-400); /* ── wykresy ── Serie o stopień jaśniejsze, bo na tle karty kroki 600 gasną. Ta sama trójka (niebieski + bursztyn + róż) przeszła walidator palet dla tej powierzchni: kontrast ≥3:1 i rozróżnialność WSZYSTKICH par przy protanopii, deuteranopii i tritanopii. */ --color-chart-line: var(--blue-400); --color-chart-a: var(--blue-400); --color-chart-b: var(--amber-500); --color-chart-c: var(--pink-500); /* ── plansza po ukończeniu lekcji ── Ta sama plansza przygaszona, żeby nie świeciła w oczy w nocy; napis zostaje jasny, bo tło jest tu ciemniejsze od niego. */ --color-done-from: #15803d; --color-done-to: #047857; --color-done-fg: #fff; --color-star-fill: #fde68a; --color-star-stroke: #fbbf24; --color-done-retry-from: #b45309; --color-done-retry-to: #92400e; --color-done-retry-fg: #fff; /* ── cień przewijania i wygaszenie krawędzi ── Cień musi być MOCNIEJSZY niż w jasnym motywie (12% czerni na bieli widać, 12% czerni na czerni — nie), a wygaszenie musi być kolorem powierzchni: biel z kryciem 0 dawałaby na ciemnym siwą smugę. */ --color-scroll-shadow: rgb(0 0 0 / 60%); --color-surface-fade: rgb(24 24 27 / 0%); /* Zinc 700: napis ma na nim 10:1, a sam bąbel odstaje od tła strony (1,88:1) mocniej niż karta — czyli dalej czyta się jako „to napisałem ja", tylko bez świecenia w oczy. */ --color-bubble-user-bg: var(--zinc-700); --color-bubble-user-fg: var(--zinc-50); } /* ═══════════════════════════════════════════════════════════════════════════ PRZEJŚCIE MIĘDZY MOTYWAMI ═══════════════════════════════════════════════════════════════════════════ Animujemy TOKENY na :root, a nie właściwości na elementach. Ta różnica jest sednem, nie stylem zapisu — pierwsza wersja (31.08.2026) miała `:root.motyw-przejscie * { transition: color …, background-color …; }` i dawała MRUGNIĘCIE TEKSTU pod koniec przejścia. Zgłoszone przez Eryka, zmierzone klatka po klatce: napis dochodził do koloru docelowego w 480 ms, w 516 ms wracał prawie do wyjściowego i dojeżdżał drugi raz do 950 ms. DLACZEGO TAK BYŁO. `color` jest właściwością DZIEDZICZONĄ. Reguła na gwiazdce dawała transition KAŻDEMU elementowi, więc tę samą wartość animowały niezależnie: (u którego `color: var(--color-fg)` jest wpisane wprost) i każdy jego potomek (u którego wartość jest dziedziczona, czyli JEJ CELEM jest bieżąca — wciąż animowana — wartość rodzica). Potomek przejeżdżał więc swoją własną animację do wartości końcowej, a kiedy mu się skończyła, przeglądarka przeliczała jego styl z wartości ZADEKLAROWANEJ, czyli z rodzica, który był jeszcze w drodze — i napis skakał wstecz, żeby dojechać po raz drugi razem z nim. Żadne skrócenie czasu ani inny timer tego nie naprawiały, bo to nie był problem timingu. Rejestracja tokenów przez @property zdejmuje problem u źródła: interpolacją zajmuje się DOKŁADNIE JEDEN element (:root), a wszystkie reguły niżej czytają `var(--color-…)` i dostają wartość pośrednią za darmo, bez własnej animacji. Nie ma czego gonić, nie ma czego dosynchronizowywać, tło i tekst idą w jednym kroku. Przy okazji znika `!important` na gwiazdce — własne przejścia komponentów (hover przycisku, .15 s) nie są już podmieniane, więc interfejs nie robi się na te 420 ms gumowy. @property WYMAGA absolutnej wartości w initial-value (var() jest tam zabronione), dlatego niżej stoją hexy, a nie nazwy ze skali. Blok jest GENEROWANY z bloków :root/[data-theme="dark"] — patrz TestNapisyPrzeskakujaTlaPrzenikaja, który pilnuje, że lista pokrywa wszystkie tokeny różniące się między motywami ORAZ że każdy stoi we właściwej grupie (napis czy powierzchnia). Token dopisany bez wpisu tutaj przeskakiwałby, gdy reszta ekranu jeszcze się przelewa. TOKENY-ALIASY SĄ ZABRONIONE dla tokenów animowanych. `--color-nav: var(--color-surface)` wyglądało niewinnie, ale skoro --color-surface animuje, to cel --color-nav zmieniałby się w każdej klatce i wracałby dokładnie ten sam problem gonienia, tylko o poziom wyżej. Dlatego trzy takie aliasy zostały rozwinięte do skali (patrz komentarze przy nich). */ @property --color-bg { syntax: ""; inherits: true; initial-value: #f4f4f5; } @property --color-surface { syntax: ""; inherits: true; initial-value: #ffffff; } @property --color-surface-muted { syntax: ""; inherits: true; initial-value: #f1f5f9; } @property --color-fg { syntax: ""; inherits: true; initial-value: #020817; } @property --color-fg-muted { syntax: ""; inherits: true; initial-value: #5b6b7f; } @property --color-border { syntax: ""; inherits: true; initial-value: #e2e8f0; } @property --color-fg-soft { syntax: ""; inherits: true; initial-value: #374151; } @property --color-fg-faint { syntax: ""; inherits: true; initial-value: #9ca3af; } @property --color-border-strong { syntax: ""; inherits: true; initial-value: #d1d5db; } @property --color-surface-subtle { syntax: ""; inherits: true; initial-value: #f9fafb; } @property --color-surface-muted-hover { syntax: ""; inherits: true; initial-value: #f4f7fa; } @property --color-meta-fg { syntax: ""; inherits: true; initial-value: #94a3b8; } @property --color-ring-shadow { syntax: ""; inherits: true; initial-value: rgb(148 163 184 / 50%); } @property --color-scroll-shadow { syntax: ""; inherits: true; initial-value: rgb(15 23 42 / 12%); } @property --color-surface-fade { syntax: ""; inherits: true; initial-value: rgb(255 255 255 / 0%); } @property --color-bubble-user-bg { syntax: ""; inherits: true; initial-value: #020817; } @property --color-bubble-user-fg { syntax: ""; inherits: true; initial-value: #ffffff; } @property --color-accent { syntax: ""; inherits: true; initial-value: #0f172a; } @property --color-accent-strong { syntax: ""; inherits: true; initial-value: #0f172a; } @property --color-accent-deep { syntax: ""; inherits: true; initial-value: #272e3f; } @property --color-accent-fg { syntax: ""; inherits: true; initial-value: #f8fafc; } @property --color-ring { syntax: ""; inherits: true; initial-value: #94a3b8; } @property --color-chip-bg { syntax: ""; inherits: true; initial-value: #f1f5f9; } @property --color-chip-fg { syntax: ""; inherits: true; initial-value: #0f172a; } @property --color-chip-add-bg { syntax: ""; inherits: true; initial-value: #f1f5f9; } @property --color-nav { syntax: ""; inherits: true; initial-value: #ffffff; } @property --color-nav-fg { syntax: ""; inherits: true; initial-value: #374151; } @property --color-nav-hover { syntax: ""; inherits: true; initial-value: #f9fafb; } @property --color-nav-active-fg { syntax: ""; inherits: true; initial-value: #111827; } @property --color-nav-active-accent { syntax: ""; inherits: true; initial-value: #4f46e5; } @property --color-nav-chip-active { syntax: ""; inherits: true; initial-value: #000000; } @property --color-nav-chip-active-fg { syntax: ""; inherits: true; initial-value: #ffffff; } @property --color-nav-line { syntax: ""; inherits: true; initial-value: #e5e7eb; } @property --color-avatar-ring { syntax: ""; inherits: true; initial-value: #111827; } @property --color-avatar-ring-track { syntax: ""; inherits: true; initial-value: #e5e7eb; } @property --color-danger { syntax: ""; inherits: true; initial-value: #ef4444; } @property --color-danger-hover { syntax: ""; inherits: true; initial-value: #f15757; } @property --color-danger-fg { syntax: ""; inherits: true; initial-value: #ffffff; } @property --color-edit { syntax: ""; inherits: true; initial-value: #059669; } @property --color-edit-deep { syntax: ""; inherits: true; initial-value: #047857; } @property --color-extype-czytanka { syntax: ""; inherits: true; initial-value: #10b981; } @property --color-extype-quiz { syntax: ""; inherits: true; initial-value: #a855f7; } @property --color-extype-otwarte { syntax: ""; inherits: true; initial-value: #4f46e5; } @property --color-extype-luki { syntax: ""; inherits: true; initial-value: #14b8a6; } @property --color-extype-dopasowanie { syntax: ""; inherits: true; initial-value: #f97316; } @property --color-progress { syntax: ""; inherits: true; initial-value: #22c55e; } @property --color-chart-line { syntax: ""; inherits: true; initial-value: #2563eb; } @property --color-chart-a { syntax: ""; inherits: true; initial-value: #2563eb; } @property --color-chart-b { syntax: ""; inherits: true; initial-value: #d97706; } @property --color-chart-c { syntax: ""; inherits: true; initial-value: #db2777; } @property --color-ok-bg { syntax: ""; inherits: true; initial-value: rgb(34 197 94 / 10%); } @property --color-ok-fg { syntax: ""; inherits: true; initial-value: #15803d; } @property --color-warn-bg { syntax: ""; inherits: true; initial-value: rgb(234 179 8 / 10%); } @property --color-warn-fg { syntax: ""; inherits: true; initial-value: #8a5406; } @property --color-error-bg { syntax: ""; inherits: true; initial-value: rgb(239 68 68 / 10%); } @property --color-error-fg { syntax: ""; inherits: true; initial-value: #b91c1c; } @property --color-done-from { syntax: ""; inherits: true; initial-value: #4ade80; } @property --color-done-to { syntax: ""; inherits: true; initial-value: #34d399; } @property --color-star-fill { syntax: ""; inherits: true; initial-value: #fef9c3; } @property --color-star-stroke { syntax: ""; inherits: true; initial-value: #fde68a; } @property --color-done-retry-from { syntax: ""; inherits: true; initial-value: #fbbf24; } @property --color-done-retry-to { syntax: ""; inherits: true; initial-value: #f59e0b; } @property --persona-preview-bg { syntax: ""; inherits: true; initial-value: #f1f5f9; } @property --persona-preview-fg { syntax: ""; inherits: true; initial-value: #020817; } @property --persona-preview-photo-bg { syntax: ""; inherits: true; initial-value: rgb(15 23 42 / 8%); } @property --persona-preview-border { syntax: ""; inherits: true; initial-value: #e2e8f0; } /* Klasę `motyw-przejscie` nakłada i zdejmuje theme.js — tylko na czas przełączenia. Bez tego warunku KAŻDA zmiana tokenu (dziś żadna, ale to kwestia jednej przyszłej funkcji) przelewałaby się przez 420 ms. */ @media (prefers-reduced-motion: no-preference) { /* NA CZAS PRZEŁĄCZENIA ŻADEN ELEMENT NIE ANIMUJE NIC WŁASNEGO. Kilkanaście reguł niżej ma własne krótkie przejścia kolorów — przycisk (`transition: background-color .15s`), litera odpowiedzi w quizie, wiersz tabeli zużycia, przełącznik, kafelek wyboru. Kiedy token pod nimi jedzie przez 420 ms, taka reguła nie przemalowuje się razem z nim: traktuje każdą klatkę jako NOWĄ zmianę i zaczyna do niej własne 150-milisekundowe dojście, czyli działa jak filtr opóźniający. Zmierzone na przycisku primary: rozjazd do 113 (na 255) wobec wartości tokenu i koniec 130 ms po resztą ekranu — zgłoszone jako „przyciski dziwnie zmieniają kolor i nie pasuje to do naszej animacji". Zerowanie ich przejść jest bezpieczne właśnie dlatego, że interpolacją zajmuje się :root: element ma po prostu NARYSOWAĆ wartość, którą token ma w tej klatce. `!important` jest konieczne, bo reguły komponentów mają wyższą swoistość niż gwiazdka. `:root.motyw-przejscie *` to selektor POTOMKA — nie trafia w :root, więc animacja tokenów, którą włączamy zaraz niżej, zostaje nietknięta. To nie jest szczegół, na którym można oszczędzić: `*` samo w sobie trafia także w :root i skasowałoby całe przejście. UWAGA: dotyczy WYŁĄCZNIE `transition`. `animation` (kropki pisania czatu, poblask kafla okładki, pasek nieokreślony) chodzi dalej — to inna właściwość i nie ma jej na tej liście. */ :root.motyw-przejscie *, :root.motyw-przejscie *::before, :root.motyw-przejscie *::after { transition: none !important; } :root.motyw-przejscie { /* POWIERZCHNIE przenikają — tło strony, karty, pasek, obrysy, wypełnienia, cienie. To jest ta płynna zmiana, o którą chodzi. */ transition: --color-bg var(--theme-fade) var(--theme-fade-ease), --color-surface var(--theme-fade) var(--theme-fade-ease), --color-surface-muted var(--theme-fade) var(--theme-fade-ease), --color-surface-subtle var(--theme-fade) var(--theme-fade-ease), --color-surface-muted-hover var(--theme-fade) var(--theme-fade-ease), --color-ring-shadow var(--theme-fade) var(--theme-fade-ease), --color-scroll-shadow var(--theme-fade) var(--theme-fade-ease), --color-surface-fade var(--theme-fade) var(--theme-fade-ease), --color-bubble-user-bg var(--theme-fade) var(--theme-fade-ease), --color-accent var(--theme-fade) var(--theme-fade-ease), --color-accent-strong var(--theme-fade) var(--theme-fade-ease), --color-accent-deep var(--theme-fade) var(--theme-fade-ease), --color-ring var(--theme-fade) var(--theme-fade-ease), --color-chip-bg var(--theme-fade) var(--theme-fade-ease), --color-chip-add-bg var(--theme-fade) var(--theme-fade-ease), --color-nav var(--theme-fade) var(--theme-fade-ease), --color-nav-hover var(--theme-fade) var(--theme-fade-ease), --color-nav-chip-active var(--theme-fade) var(--theme-fade-ease), --color-avatar-ring var(--theme-fade) var(--theme-fade-ease), --color-avatar-ring-track var(--theme-fade) var(--theme-fade-ease), --color-danger var(--theme-fade) var(--theme-fade-ease), --color-danger-hover var(--theme-fade) var(--theme-fade-ease), --color-progress var(--theme-fade) var(--theme-fade-ease), --color-chart-line var(--theme-fade) var(--theme-fade-ease), --color-chart-a var(--theme-fade) var(--theme-fade-ease), --color-chart-b var(--theme-fade) var(--theme-fade-ease), --color-chart-c var(--theme-fade) var(--theme-fade-ease), --color-ok-bg var(--theme-fade) var(--theme-fade-ease), --color-warn-bg var(--theme-fade) var(--theme-fade-ease), --color-error-bg var(--theme-fade) var(--theme-fade-ease), --color-done-from var(--theme-fade) var(--theme-fade-ease), --color-done-to var(--theme-fade) var(--theme-fade-ease), --color-done-retry-from var(--theme-fade) var(--theme-fade-ease), --color-done-retry-to var(--theme-fade) var(--theme-fade-ease), --persona-preview-bg var(--theme-fade) var(--theme-fade-ease), --persona-preview-photo-bg var(--theme-fade) var(--theme-fade-ease), --persona-preview-border var(--theme-fade) var(--theme-fade-ease), /* ────────── NAPISY PRZESKAKUJĄ, NIE PRZENIKAJĄ ────────── Kolory tekstu wymieniają się JEDNYM krokiem w połowie przejścia. Powód jest arytmetyczny i to on stał za zgłoszeniem „kolory przycisków się glitchują": napis i jego tło idą w PRZECIWNE strony jasności (przycisk primary jest w jasnym motywie ciemny z jasnym napisem, w ciemnym odwrotnie), więc przenikając oba naraz mijają się W TEJ SAMEJ SZAROŚCI. Zmierzone wewnątrz przycisku przy poprzedniej wersji: t=140 ms, tło #7a7f89, napis #929395, kontrast 1,31:1 — napis fizycznie znikał na kilka klatek i wracał odwrócony. To samo działo się z każdym napisem na stronie, bo --color-fg i --color-bg też są taką parą. Krok w połowie zdejmuje to całkowicie: tło płynie dalej, a napis wymienia się w jednej klatce — DOKŁADNIE w momencie, w którym jego kontrast jest i tak najniższy, czyli najmniej to widać. Najgorsza klatka ma teraz ~3,3:1 zamiast 1,31:1, czyli napis jest czytelny przez cały czas przejścia. Dlatego też krzywa powyżej musi być symetryczna — patrz komentarz przy --theme-fade-ease. KTÓRE tokeny tu trafiają: te używane WYŁĄCZNIE jako kolor tekstu (color/fill/stroke). Token, który jest gdzieś tłem, MUSI przenikać — inaczej przeskakiwałaby powierzchnia, a to widać dużo mocniej niż napis. Pilnuje tego TestNapisyPrzeskakujaTlaPrzenikaja. */ --color-fg var(--theme-fade) var(--theme-fade-krok), --color-fg-soft var(--theme-fade) var(--theme-fade-krok), --color-fg-muted var(--theme-fade) var(--theme-fade-krok), --color-fg-faint var(--theme-fade) var(--theme-fade-krok), --color-meta-fg var(--theme-fade) var(--theme-fade-krok), --color-accent-fg var(--theme-fade) var(--theme-fade-krok), --color-chip-fg var(--theme-fade) var(--theme-fade-krok), --color-nav-fg var(--theme-fade) var(--theme-fade-krok), --color-nav-active-fg var(--theme-fade) var(--theme-fade-krok), --color-nav-active-accent var(--theme-fade) var(--theme-fade-krok), --color-nav-chip-active-fg var(--theme-fade) var(--theme-fade-krok), --color-danger-fg var(--theme-fade) var(--theme-fade-krok), --color-bubble-user-fg var(--theme-fade) var(--theme-fade-krok), --color-edit var(--theme-fade) var(--theme-fade-krok), --color-edit-deep var(--theme-fade) var(--theme-fade-krok), --color-extype-czytanka var(--theme-fade) var(--theme-fade-krok), --color-extype-quiz var(--theme-fade) var(--theme-fade-krok), --color-extype-otwarte var(--theme-fade) var(--theme-fade-krok), --color-extype-luki var(--theme-fade) var(--theme-fade-krok), --color-extype-dopasowanie var(--theme-fade) var(--theme-fade-krok), --color-ok-fg var(--theme-fade) var(--theme-fade-krok), --color-warn-fg var(--theme-fade) var(--theme-fade-krok), --color-error-fg var(--theme-fade) var(--theme-fade-krok), --color-star-fill var(--theme-fade) var(--theme-fade-krok), --color-star-stroke var(--theme-fade) var(--theme-fade-krok), --persona-preview-fg var(--theme-fade) var(--theme-fade-krok), --color-border var(--theme-fade) var(--theme-fade-krok), --color-border-strong var(--theme-fade) var(--theme-fade-krok), --color-nav-line var(--theme-fade) var(--theme-fade-krok); } } *, *::before, *::after { box-sizing: border-box; } /* [hidden] { display: none !important; } — ZNALEZISKO BLOKUJĄCE z re-recenzji (H1). Arkusz UA (domyślne style przeglądarki) niesie WŁASNĄ regułę `[hidden] { display: none }`, o swoistości atrybutu (0,1,0) — dokładnie tej samej, co jedna klasa. Kaskada CSS rozstrzyga NAJPIERW pochodzenie (author > user-agent), DOPIERO POTEM swoistość w obrębie tego samego pochodzenia — więc reguła AUTORSKA bije regułę UA NIEZALEŻNIE OD SWOISTOŚCI. Skutek: każda reguła niżej w tym arkuszu, która ustawia `display` na klasie noszącej ZARAZ obok atrybut `hidden` w markupie (np. .work-bar__error-row { display: flex; ... } w sekcji paska robót w tle), bije regułę UA i `hidden` przestaje wizualnie znaczyć cokolwiek — mimo że atrybut jest poprawnie ustawiany/zdejmowany w DOM-ie. Bez tej reguły: (1) KAŻDY zdrowy wiersz paska renderował pusty czerwony akapit błędu i ŻYWY przycisk × (I1 miał je chować `hidden`-em przy renderze, ale .work-bar__error-row — a od migracji 0024 także .work-bar__done-row, zielony wiersz „gotowe” — nadpisywała to na `display: flex`); (2) `errorRow.hidden = true` w workbar.js (powrót z błędu na żywo) nie robił NIC wizualnie; (3) kliknięcie × na zdrowym wierszu zapisywało error_dismissed_at i uzbrajało CICHE ukrycie wiersza dopiero wtedy, gdy plik NAPRAWDĘ utknie. Naprawa: jedna globalna reguła resetu z `!important` — reguła autorska z !important bije DOWOLNĄ inną regułę autorską bez !important, niezależnie od jej swoistości i pozycji w pliku, więc `[hidden]` znowu naprawdę chowa, obojętnie co inna reguła gdzie indziej w arkuszu ustawia na `display` tego samego selektora. BEZPIECZNE dla wszystkiego, co już dziś ma być chowane przez `hidden` (sprawdzone grepem po `hidden` w szablonach/JS): .work-bar__stale, .work-bar__percent/.work-bar__stage-stale (layout.html/ workbar.js), workbar-course-labels/workbar-file-labels/ workbar-error-fallback (kontenery tłumaczeń dla JS-u, nigdy nie mają być widoczne same), data-progress-track i status-labels w knowledge.html — żadne z nich nie ma wzorca „hidden w markupie + JS/CSS pokazuje przez WŁASNY inline style="display:..." bez własnego !important" (taki wzorzec ta reguła by złamała). TestHiddenAttributeAlwaysHidesElement (workbar_test.go) pilnuje, że ta deklaracja zostaje w arkuszu. */ [hidden] { display: none !important; } body { margin: 0; background: var(--color-bg); color: var(--color-fg); /* 16px/24px — domyślny rozmiar dokumentu w humi (Tailwind nie ustawia go nigdzie, więc obowiązuje preflight). Patrz --fs-base w sekcji tokenów. */ font: 400 var(--fs-base)/var(--lh-base) var(--font-sans); -webkit-text-size-adjust: 100%; } /* Wagi i zaciskanie liter za humi: `text-3xl font-bold` na h1 stron (np. „Team Management", „Resources"), `font-semibold tracking-tight` na tytułach kart i dialogów. Poprzednio wszystkie poziomy miały 700 — h2/h3/h4 schodzą na 600, bo w referencji bold jest zarezerwowany dla h1 strony. */ h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; letter-spacing: -.025em; margin: 0 0 var(--space-2); } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; letter-spacing: -.025em; margin: 0 0 var(--space-6); } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; letter-spacing: -.025em; margin: 0 0 var(--space-5); } h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; margin: 0 0 var(--space-3); } /* NAGŁÓWKI ŁAMIĄ SIĘ W ŚRODKU SŁOWA, gdy inaczej się nie da. W nagłówkach stoją DANE UŻYTKOWNIKA — nazwa pliku (file.html), nazwa działu (department.html), tytuł kursu (course.html) — a nazwa pliku bywa jednym nierozdzielnym tokenem bez spacji. Bez tej reguły „MARATHON_First_Day__PL__2026__1__20260825…pdf" rozpychał /knowledge/{id} do 865 px przy oknie 390 (zmierzone 30.08.2026) i przeglądarka pomniejszała całą stronę — ta sama awaria co przy .u-scroll-x niżej, tylko z innej strony. Reguła osobna, nie dopisek do bloków wyżej: te opisują STOPIEŃ i wagę, ta zachowanie przy braku miejsca. `anywhere`, nie `break-word`: tylko pierwsze pozwala łamać także wtedy, gdy liczy się szerokość minimalna zawartości — czyli dokładnie w tabelach i kolumnach elastycznych, gdzie ten problem powstaje. */ h1, h2, h3, h4 { overflow-wrap: anywhere; } p { margin: 0 0 var(--space-6); } a { color: inherit; text-underline-offset: 2px; } /* Pierścień fokusu z humi: shadcn daje kontrolkom `focus-visible:ring-ring/50 focus-visible:ring-[3px]`, czyli 3 px obwódkę w kolorze --ring (slate 400) z połową krycia. Zastąpiło to dwukolorowy pierścień (2 px akcentu + 2 px --color-fg), który istniał dlatego, że dawny akcent — najpierw bursztyn, potem Indigo 500 — sam nie dobijał do progu 3:1 z WCAG 2.2 SC 1.4.11 na jasnym tle. Po przejściu na humi akcentem jest slate 900 i ten powód zniknął, ale JEDEN przypadek z tamtego uzasadnienia trzeba było zastąpić czym innym, nie po prostu skasować: pierścień musi kontrastować także z WŁASNYM tłem elementu, a przycisk primary ma tło slate 900. Sam slate 400 daje na nim 5,04:1 — wystarczy z zapasem, więc drugi pierścień faktycznie przestał być potrzebny. outline zostaje `solid transparent` (nie `none`), żeby wskaźnik przetrwał tryb wysokiego kontrastu Windows (forced-colors), który ignoruje box-shadow, ale honoruje outline. UWAGA: box-shadow to JEDNA właściwość, nie lista warstw — każda reguła ustawiająca box-shadow na klasie, którą nosi element fokusowalny, PODMIENI ten pierścień. Dlatego przyciski i pola NIE dostają `shadow-xs` z humi (0 1px 2px rgb(0 0 0 / 5%) — przy obramowanej kontrolce i tak niewidoczne); pilnuje tego TestNoBoxShadowClassOnFocusableElement. */ :focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px var(--color-ring-shadow); } @media (prefers-reduced-motion: reduce) { /* iteration-count: 1 dokłada się do skróconego czasu trwania: bez tego animacja `infinite` (kropki pisania czatu) przy .01ms nie znika, tylko stroboskopuje — cykl kręci się dalej, szybciej niż klatki ekranu. */ *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---------- przyciski ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid transparent; background: none; color: inherit; font: 500 14px/1 var(--font-sans); cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s; /* `shadow-xs` z buttonVariants. box-shadow na elemencie fokusowalnym PODMIENIŁBY globalny pierścień z :focus-visible (to jedna właściwość, nie lista warstw), dlatego zaraz niżej stoi własna reguła fokusu, która niesie pierścień I cień naraz. Bez tamtej reguły ta deklaracja kasuje wskaźnik fokusu; pilnuje tego TestNoBoxShadowClassOnFocusableElement. */ box-shadow: var(--shadow-sm); } .btn:focus-visible { box-shadow: 0 0 0 3px var(--color-ring-shadow), var(--shadow-sm); } /* Warianty bez wypełnienia nie mają czego cieniować — `ghost` i `link` w humi jako jedyne nie niosą `shadow-xs`. */ .btn--ghost, .btn--link { box-shadow: none; } .btn--ghost:focus-visible, .btn--link:focus-visible { box-shadow: 0 0 0 3px var(--color-ring-shadow); } /* Warianty 1:1 z buttonVariants (ui/button/button.svelte w humi). Waga napisu jest w BAZIE (`font-medium`, 500) i żaden wariant jej nie zmienia — poprzednio primary podbijał się do 600. Hovery to półprzezroczyste wersje koloru bazowego złożone na białym tle, policzone tutaj, żeby nie zależeć od przezroczystości (przycisk potrafi stać na karcie albo na tle strony): primary hover:bg-primary/90 → #272e3f secondary hover:bg-secondary/80 → #f4f7fa (jaśniej, nie ciemniej — tak działa /80 na białym; to nie pomyłka) destructive hover:bg-destructive/90 → #f15757 outline / ghost hover:bg-accent → --color-surface-muted */ .btn--primary { background: var(--color-accent-strong); color: var(--color-accent-fg); } .btn--primary:hover { background: var(--color-accent-deep); } .btn--secondary { background: var(--color-surface-muted); color: var(--color-fg); } .btn--secondary:hover { background: var(--color-surface-muted-hover); } .btn--outline { background: var(--color-surface); border-color: var(--color-border); } .btn--outline:hover { background: var(--color-surface-muted); } .btn--ghost:hover { background: var(--color-surface-muted); } .btn--danger { background: var(--color-danger); color: var(--color-danger-fg); } .btn--danger:hover { background: var(--color-danger-hover); } /* size="sm" → h-8 gap-1.5 px-3; size="lg" → h-10 px-6. Rozmiar pisma NIE zmienia się z rozmiarem przycisku (baza `text-sm` obowiązuje wszystkie trzy) — wcześniej sm miał 13px, a lg 15px, czyli trzy różne stopnie tam, gdzie referencja ma jeden. */ .btn--sm { min-height: 32px; padding: 0 12px; gap: 6px; } .btn--lg { min-height: 40px; padding: 0 24px; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; } /* ---------- tabela kursów (układ Humi) + modal potwierdzenia ---------- */ .page-header__subtitle { margin: var(--space-2) 0 0; color: var(--color-fg-muted); font-size: var(--fs-lg); line-height: var(--lh-lg); } /* .table-wrap NIE ma już własnej ramki ani promienia. Tabela stała wcześniej w obramowanym pudełku WEWNĄTRZ obramowanej .card — pudełko w pudełku, dwie linie o milimetr od siebie. W humi tabela leży wprost na płachcie: jedyne linie to podkreślenie nagłówka kolumn i separatory wierszy. Białą płachtę zostawia .card i to jest ŚWIADOME odejście od dosłownego 1:1: w humi tło treści jest białe, a u nas szare (#f4f4f5, tak jak w routes/(navbar)/+layout.svelte), więc tabela bez płachty leżałaby na szarym i wyglądałaby GORZEJ, nie lepiej. overflow-x zostaje — to on, a nie ramka, jest powodem istnienia tego diva. GEOMETRIA (wysokości wierszy, paddingi, nagłówki) NIE STOI JUŻ TUTAJ. Aplikacja miała cztery niezależne implementacje tabeli — .courses-table, .list-table, .usage-table i .progress-table — każdą z innym rytmem, co jest dosłownie zarzut „jednorazowe, lokalne style". Zostały dwie, dokładnie tyle, ile ma humi: • LISTA GŁÓWNA (.list-table + .courses-table) = ui/table-custom, czyli wiersze 64 px, nagłówek 48 px, komórki 16 px — kursy, działy, pliki; • TABELA ZWARTA (.usage-table i jej pochodne) = ui/table, czyli nagłówek 40 px i komórki 8 px — lekcje, członkowie, zgłoszenia, zużycie AI. Wspólne reguły listy głównej stoją w sekcji „lista działów" niżej, przy opisie, z których klas Tailwinda są przepisane. */ .table-wrap, .list-table-wrap { position: relative; width: 100%; overflow: auto; } /* PLAKIETKA TYLKO DLA STANÓW WYJĄTKOWYCH — najważniejsza rzecz z referencji. W Humi „Published" jest gołym przygaszonym tekstem, a kolorową pigułkę dostają wyłącznie „4 reported" i „Generating…", czyli to, co wymaga uwagi. U nas KAŻDY status był zieloną pigułką, więc kolumna Status świeciła się na zielono w każdym wierszu i przestała cokolwiek znaczyć — dokładnie „za dużo niepotrzebnych informacji". Reguła jest ZAKRESOWA (tylko w .courses-table), nie zmienia partiala file-badge-class: na stronie pliku i w pasku robót w tle zielone „gotowy" jest właśnie tym, po co tam patrzysz. */ .courses-table .badge--ok { background: transparent; border-color: transparent; color: var(--color-fg-muted); font-weight: 400; padding-left: 0; padding-right: 0; } /* WYJĄTEK od reguły wyżej, dla tabeli PLIKÓW (nie kursów) — decyzja Eryka z 22.08: „status pliku »gotowy« powinien tez byc jako taki kolorowy babelek jak inne statusy a nie jako zwykly tekst, daj kolor zielony". Powód, dla którego to nie kłóci się z akapitem wyżej: tam problemem było, że KAŻDY kurs jest zwykle „gotowy", więc kolumna świeciła się na zielono w całości i przestawała nieść informację. Lista plików czyta się inaczej — przez nią przechodzi ruch (wgrany → parsowanie → osadzanie → gotowy/błąd) i patrzy się na nią WŁAŚNIE po to, żeby jednym rzutem oka zobaczyć, co już przeszło, a co nie. Zieleń jest tu odpowiedzią na pytanie, nie ozdobą. Zakres zostaje ciasny (modyfikator na tabeli), więc lista kursów, dla której tamtą regułę napisano, zachowuje się bez zmian. */ .courses-table--files .badge--ok { background: var(--color-ok-bg); color: var(--color-ok-fg); font-weight: 600; padding-left: 10px; padding-right: 10px; } .courses-table .num { font-variant-numeric: tabular-nums; color: var(--color-fg); white-space: nowrap; } /* LISTA PLIKÓW MA SIĘ MIEŚCIĆ W EKRANIE — zgłoszenie z 29.08.2026: „podczas wgrywania pliku, gdy jest status przetwarzania, status wychodzi poza ekran i tworzy się lista do scrollowania w bok. A tego nie chcesz — żeby był statyczny ekran bez scrollowania". ZMIERZONE (okno 1440, kolumna treści 1118 px): wiersz w toku potrzebował 1203 px, czyli o 85 px za dużo, i .table-wrap robił z tego poziomy pasek przewijania. Winne są dwie komórki, obie NIEŚCIŚLIWE: • NAZWA. Nazwa z eksportu to jedno nieprzełamywalne słowo („MARATHON_First_Day__PL__2026__1__20260825_130846-1.pdf" — 394 px), a bez punktu podziału minimalna szerokość kolumny RÓWNA SIĘ jej pełnej długości. Dlatego tabela była za szeroka także dla pliku gotowego; przetwarzanie tylko dokładało do już przekroczonej miary. • STATUS. Napisy etapów są ZDANIAMI, uzgodnionymi z zamawiającym i pilnowanymi testami (etapy_pliku.go): „Tekst gotowy, grafiki w drodze… 83%" to 277 px w jednej linii. ZWĘŻA SIĘ NAZWA, NIE PLAKIETKA. Pierwsze podejście pozwalało łamać się plakietce (`white-space: normal` tylko w tej tabeli) — zamawiający odrzucił je z miejsca: „wygląda bardzo brzydko". Miał rację, bo pigułka z promieniem 999 px rozlana na trzy linijki przestaje czytać się jak pigułka. Kolumna nazwy jest za to jedynym miejscem w tym wierszu, które ma naturalny sposób na zwężenie: obcięcie wielokropkiem, znane z każdego menedżera plików. Pełna nazwa zostaje w atrybucie title i na stronie pliku, a to, co odróżnia dwa sąsiednie eksporty (ogon nazwy), jest i tak dostępne po najechaniu. JAK to działa: `max-width` na komórce zeruje jej apetyt na szerokość (kolumna przestaje żądać całej nazwy), a `width: 100%` każe jej wziąć CAŁĄ resztę, która zostanie po kolumnach o stałej treści. Bez tej drugiej deklaracji nadmiar rozlewa się po sąsiadach i nazwa dostaje 43 px (zmierzone), bo kolumna o zerowym apetycie nie dostaje nic z podziału wolnego miejsca. Numeracja nth-child odpowiada kolumnom w knowledge.html: 1 ikona, 2 nazwa, 3 dział, 4 rozmiar, 5 dodano, 6 status, 7 menu wiersza — i dlatego selektory pytają o `tbody td`, a nie o `th`: w nagłówku nazwa siedzi w JEDNEJ komórce z colspan=2, więc numery są tam przesunięte o jeden i ta sama liczba trafiałaby w inną kolumnę. */ .courses-table--files tbody td:nth-child(2) { width: 100%; max-width: 1px; } /* .kb-upload__name obok : nazwa WGRYWANEGO pliku nie jest odnośnikiem (nie ma jeszcze adresu — patrz [data-upload-row] w knowledge.html), a skracać się musi tak samo, bo inaczej długa nazwa rozpycha tabelę poza ekran akurat na czas wgrywania. */ .courses-table--files tbody td:nth-child(2) > a, .courses-table--files tbody td:nth-child(2) > .kb-upload__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* „5 godzin temu" w jednej linii: kolumna jest wąska, a łamane na trzy linijki podnosiło wiersz bardziej, niż oszczędzało szerokości. */ .courses-table--files tbody td:nth-child(5) { white-space: nowrap; } td.courses-table__thumb-cell, th.courses-table__thumb-cell { width: 56px; padding-right: 0; } /* Okładka w wierszu listy. 56 px i promień 4 px — dokładnie rozmiar, jaki humi daje kursowi ZE zdjęciem (patrz komentarz przy .list-table__thumb-cell); u nas ta gałąź była martwa do czasu, aż kursy dostały okładki. Trasa /okladki/... zawsze coś zwraca (obraz albo placeholder w tej samej stylistyce), więc szablon nie ma wariantu „bez obrazu" i wiersz nigdy nie skacze wysokością. */ .cover-thumb { display: block; width: 56px; height: 56px; flex: none; border-radius: 4px; object-fit: cover; background: var(--color-surface-muted); } /* Lista lekcji stoi gęściej niż lista kursów — tam miniatura zjadałaby wiersz. */ .cover-thumb--sm { width: 40px; height: 40px; border-radius: var(--radius); } /* MIEJSCE NA OKŁADKĘ w trakcie rysowania (course-heading, .cover-slot). Kwadrat dziedziczy rozmiar i promień z .cover-thumb, więc nagłówek NIE SKACZE w chwili, gdy obraz wskoczy na miejsce lodera. Ruch przez `transform`, nigdy przez `background-position` ani `width` — ten sam powód co przy .progress--indeterminate niżej (animowanie właściwości układu wymusza reflow w każdej klatce i szarpie). */ .cover-slot { position: relative; overflow: hidden; } .cover-slot--rysuje::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 60%) 50%, transparent 80%); transform: translateX(-100%); animation: cover-shimmer 1.5s ease-in-out infinite; } @keyframes cover-shimmer { to { transform: translateX(100%); } } /* Bez ruchu: globalna reguła prefers-reduced-motion zeruje czas animacji i zostawiłaby poblask ZA kadrem, czyli pusty prostokąt. Zamiast tego statyczna, przygaszona plama — nadal czytelna jako „coś tu powstaje". */ @media (prefers-reduced-motion: reduce) { .cover-slot--rysuje::after { transform: none; animation: none; opacity: .35; } } .courses-table__name a { color: var(--color-fg); text-decoration: none; font-weight: 600; } .courses-table__name a:hover { text-decoration: underline; } .courses-table__variant { margin-left: 8px; color: var(--color-fg-muted); font-size: 12px; } .courses-table__date { color: var(--color-fg-muted); white-space: nowrap; } .courses-table__reports { text-decoration: none; } td.courses-table__actions, th.courses-table__actions { text-align: right; width: 44px; } /* Kafelek-miniatura (placeholder — nie mamy zdjęć kursów jak Humi): ikona w przygaszonym FG (adaptuje się do motywu) na tle barwionym wg poziomu. Amber tylko jako TŁO (guard kontrastu dopuszcza), nigdy jako color: tekstu. */ .course-thumb { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); color: var(--color-fg-muted); background: var(--color-bg); } .course-thumb svg { width: 20px; height: 20px; } .course-thumb--przewodnik { background: rgb(34 197 94 / 15%); } .course-thumb--podstawy { background: rgb(59 130 246 / 15%); } .course-thumb--masterclass { background: rgb(255 196 0 / 22%); } /* Nasz modal potwierdzenia (confirm-modal.js) — stylowany naszymi tokenami, przyciemniony backdrop. box-shadow siedzi na .confirm__box (
), nie na elemencie fokusowalnym (pilnuje focus_ring_test). */ .confirm { border: 0; background: transparent; padding: 0; } .confirm::backdrop { background: rgb(0 0 0 / 45%); } .confirm__box { width: 420px; max-width: 92vw; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 22px; display: flex; flex-direction: column; gap: 10px; } .confirm__title { font-size: 18px; margin: 0; } .confirm__msg { margin: 0; color: var(--color-fg-muted); line-height: 1.5; } .confirm__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; } /* ---------- karty ---------- */ /* box-shadow niżej stoi ZA regułą :focus-visible z sekcji typografii i ma tę samą swoistość, więc na elemencie fokusowalnym PODMIENIŁBY pierścień fokusu, a nie dołożył cień (box-shadow to jedna właściwość, nie lista warstw). Dlatego .card siedzi wyłącznie na
-ach — kafel kursu jest
, a linkiem jest jego tytuł. Pilnuje tego test, nie tylko ten komentarz: TestNoBoxShadowClassOnFocusableElement (focus_ring_test.go) zbiera klasy z box-shadow wprost z tego arkusza i wywala się, gdy któraś trafi na /