/* ═══════════════════════════════════════════════════════════════════════════════════════════════ space-public.css — SKÓRA STRON BEZ LOGOWANIA (08.08, pozycja S16) ⛔ PO CO TEN PLIK ISTNIEJE. Zmierzone 07.08: z 26 stron HTML platformy tylko DWIE wczytywały motyw. Zaproszenie było ZŁOTE, dołączanie FIOLETOWE, obie na innej czerni niż aplikacja, a żadna nie znała jasnego motywu — ten sam człowiek widział trzy różne produkty w ciągu minuty. Każda z tych stron miała też własne reguły układu, więc ta sama rzecz (pole, przycisk, tag) wyglądała inaczej na każdej z nich. Ten plik jest JEDNYM źródłem wyglądu dla ośmiu stron publicznych. Kolory bierze WYŁĄCZNIE z `space-theme.css` — czyli z tych samych ośmiu palet, co aplikacja po zalogowaniu. Zero własnych wartości: gdyby tu stanął choć jeden kolor wpisany liczbą, wróciłby dokładnie ten rozjazd, który ten plik zdejmuje (pilnuje tego `test:kolory-z-tokenu`). ═══ STANDARD, KTÓRY WYSZEDŁ Z OŚMIU MAKIET (ustalony z Jerzym 07.08) ═══ 1. JEDEN ZNAK: LINIA. Pola mają linię pod spodem, filtry mają linię pod spodem, sekcje rozdziela linia. ⛔ Ramka dookoła to TRZECI kształt, którego te strony nie używają — filtry w pigułkach i w prostokątach zostały odrzucone, zanim trafiliśmy w to. 2. TAGI BEZ RAMEK, rozdzielone kropką: to informacja, nie akcja. 3. TYPOGRAFIA: tytuły cienkie (waga 200) rozstrzelone wersalikami — odwrotność ciężkiej z wnętrza aplikacji. Etykiety, liczby, godziny i przyciski krojem maszynowym. Treść Outfitem. 4. SYGNATURA: liczenie taktu 5-6-7-8, ostatnia liczba zapalona. Jedyne miejsce, w którym wydajemy śmiałość. ⛔ NIE wchodzi do platformy po zalogowaniu: tu człowiek jest raz i przez chwilę, a w narzędziu otwieranym co rano przez rok ozdoba bez funkcji przeszkadza. 5. MARKA SZKOŁY na górze, BEZ MIASTA — miasto bierze się z bazy albo nie ma go wcale. 6. PRZEŁĄCZNIK MOTYWU JEST ELEMENTEM STRONY, nie narzędziem podglądu: ekran logowania widzi każdy, a po zalogowaniu na zmianę motywu jest już za późno. Ikona z SVG, `aria-label`, widoczny focus. ⛔ Zero emoji. 7. ODSTĘPY LUŹNIEJSZE niż w aplikacji — tu człowiek czyta, a nie pracuje osiem godzin. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ @font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap; src:url('/vendor/fonts/outfit/outfit-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;} /* ⛔ ZAWSZE OBA ZAKRESY. Bez `latin-ext` polskie znaki wypadają na inny krój i zdanie rozjeżdża się w połowie wyrazu — widać to dopiero na słowie „zajęcia", czyli na każdej z tych stron. */ @font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap; src:url('/vendor/fonts/outfit/outfit-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F;} :root{ --pub-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; /* ── DWIE SWIADOME SZEROKOSCI, TRZECIEJ NIE MA (10.08, RUN STR blok 1) ──────────────────────── ⛔ ZMIERZONE 09/10.08 na dziesieciu stronach bez logowania: SIEDEM roznych szerokosci — 560 (`/join`, `/dolacz`, `/probna`, `/zastepstwo`), 680 (strona wydarzenia), 720 (`/zapisy`), 760 (`/usuniecie-danych`), 794 (`/onboard`), 980 (`/legal`), 1040 (`/grafik`), 1080 (naglowek `/zapisy`). Zaden z tych numerow nie byl decyzja — kazdy powstal osobno przy swojej stronie. Skutek widzial Jerzy: na `/zapisy` naglowek jest szerszy niz tresc pod nim, bo dosłownie jest. ⛔ REGULA: strona bez logowania bierze JEDNA Z DWOCH szerokosci i nie wpisuje wlasnej liczby. `--pub-waski` (560) = FORMULARZ albo jeden komunikat. Czlowiek ma tu jedna rzecz do zrobienia, a linia tekstu dluzsza niz ~70 znakow gubi wzrok przy powrocie do lewej. `--pub-max` (1080) = LISTA do przegladania. Tu czlowiek POROWNUJE pozycje, wiec szerokosc pracuje na niego: wiecej wierszy na ekranie bez przewijania. Strona, ktora nie stoi na klasie `.pub-strona`, wskazuje token w swoim kontenerze (`max-width:var(--pub-max)`) — numer zyje TU, nie w dziesieciu plikach. Pilnuje tego bramka `test:szerokosc-stron-publicznych`: czyta liste stron z `vercel.json`, znajduje kontener otaczajacy `#pub-gora` i sprawdza, ktora szerokosc bierze. Nowa strona publiczna albo bierze jedna z dwoch, albo bramka swieci na czerwono. */ --pub-max:1080px; --pub-waski:560px; } *{box-sizing:border-box;margin:0;padding:0;} html,body{background:var(--color-bg-base);color:var(--color-text-primary);} body{font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased;line-height:1.55;min-height:100vh;} /* ── POLE NIGDY NIE BIERZE KOLORU OD PRZEGLĄDARKI (08.08, P0) ──────────────────────────────── ⛔ Zmierzone na produkcji, ciemny motyw: pole „Twój adres" na `/onboard` miało tekst `rgb(255,255,255)` na tle `rgb(252,252,253)` — kontrast 1,03 przy normie 4,5. Człowiek pisał i nie widział ani jednej litery. ROOT CAUSE, którego nie widać przy czytaniu jednej reguły: `input`, `textarea` i `select` NIE DZIEDZICZĄ koloru tekstu po stronie. Pole bez reguły `color` bierze go z domyślnego stylu przeglądarki, a ten idzie za motywem systemu — w ciemnym jest biały. Dopóki TŁO też szło od przeglądarki, para się zgadzała i nikt tego nie łapał. Wystarczyło wpisać jasne tło liczbą (`#fcfcfd`), żeby biały napis zniknął na białym. ⛔ CO TA REGUŁA ROBI, A CZEGO NIE: jest DOMYŚLNYM DNEM — żadne pole na żadnej stronie bez logowania nie zależy już od tego, jaki motyw ma system człowieka, także pole dopisane jutro. NIE URATUJE natomiast pola, które ma jasne tło wpisane liczbą: tam trzeba poprawić samo tło, bo jasny napis na jasnym tle jest nieczytelny niezależnie od tego, kto go ustawił. Zmierzone: pole z tłem `#fcfcfd` daje 1,21 nawet z tą regułą, a to samo pole z tłem z tokenu — 13,16. Selektor jest celowo najsłabszy z możliwych (sam element), więc każda reguła klasowa niżej normalnie go nadpisuje. Pilnuje tego bramka `test:pola-czytelne` — mierzy KONTRAST każdego pola i każdego przycisku na każdej z tych stron, w obu motywach, i pada poniżej 4,5. Ta bramka ma własny samotest: mierzy parę stron różniących się wyłącznie tym, czy tło idzie z tokenu. */ input,select,textarea{color:var(--color-text-primary);} input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]), select,textarea{background-color:var(--color-bg-surface);} input::placeholder,textarea::placeholder{color:var(--color-text-tertiary);opacity:1;} /* Autouzupełnianie przeglądarki maluje własne tło i własny kolor — na ciemnym motywie daje bladoniebieską plamę z ciemnym napisem. Cofamy to kolorem tekstu i cieniem w kolorze tła (jedyny sposób, w jaki da się nadpisać tło pola autouzupełnionego). */ input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus, textarea:-webkit-autofill,select:-webkit-autofill{ -webkit-text-fill-color:var(--color-text-primary); -webkit-box-shadow:0 0 0 1000px var(--color-bg-surface) inset; caret-color:var(--color-text-primary);} /* ── RUSZTOWANIE ─────────────────────────────────────────────────────────────────────────── */ .pub-strona{max-width:var(--pub-max);margin:0 auto;padding:24px 20px 64px;} .pub-waski{max-width:var(--pub-waski);} /* Gorny blok strony (marka, tytul, takt), gdy tresc idzie w osobnym kontenerze pod nim — dwa pudelka, jedna strona. Bylo wpisywane przy stronie jako `style="padding-bottom:0"`, wiec trzy strony powtarzaly te sama decyzje trzy razy. */ .pub-strona--gora{padding-bottom:0;} .pub-sekcja{padding:24px 0;border-bottom:1px solid var(--color-border);} .pub-sekcja:last-child{border-bottom:none;} /* ── GÓRA: MARKA SZKOŁY I PRZEŁĄCZNIK MOTYWU ─────────────────────────────────────────────── */ .pub-gora{display:flex;align-items:center;justify-content:space-between;gap:16px; padding-bottom:16px;border-bottom:1px solid var(--color-border);} .pub-marka{display:flex;align-items:center;gap:12px;min-width:0;} .pub-marka-znak{width:32px;height:32px;border:1px solid var(--color-border);border-radius:6px; background:var(--color-bg-surface);display:grid;place-items:center;font-family:var(--pub-mono); font-size:12px;color:var(--color-text-secondary);flex-shrink:0;overflow:hidden;} .pub-marka-znak img{width:100%;height:100%;object-fit:cover;} .pub-marka-nazwa{font-size:14px;font-weight:600;color:var(--color-text-primary); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .pub-marka-pod{font-family:var(--pub-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--color-text-tertiary);margin-top:2px;} .pub-motyw{width:32px;height:32px;border:1px solid var(--color-border);border-radius:6px; background:transparent;color:var(--color-text-secondary);cursor:pointer;display:grid; place-items:center;flex-shrink:0;transition:border-color .2s,color .2s;} .pub-motyw:hover{border-color:var(--color-border-strong);color:var(--color-text-primary);} .pub-motyw:focus-visible{outline:2px solid var(--color-brand);outline-offset:3px;} .pub-motyw svg{width:16px;height:16px;display:block;} .pub-motyw .ikona-slonce{display:none;} html[data-theme="light"] .pub-motyw .ikona-slonce{display:block;} html[data-theme="light"] .pub-motyw .ikona-ksiezyc{display:none;} /* ── TYTUŁ: CIENKI, WERSALIKI, ROZSTRZELONY ──────────────────────────────────────────────── */ .pub-tytul{font-weight:200;font-size:clamp(24px,3.2vw,36px);line-height:1.15;letter-spacing:.11em; text-transform:uppercase;color:var(--color-text-primary);margin:24px 0 8px;} .pub-podtytul{font-size:14px;color:var(--color-text-secondary);max-width:64ch;} .pub-naglowek{font-family:var(--pub-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--color-text-tertiary);margin-bottom:12px;} /* ── SYGNATURA: TAKT 5-6-7-8 ─────────────────────────────────────────────────────────────── */ .pub-takt{display:flex;align-items:center;gap:16px;margin:24px 0;} .pub-takt span{font-family:var(--pub-mono);font-size:16px;color:var(--color-text-tertiary);letter-spacing:.06em;} .pub-takt span:last-of-type{color:var(--color-text-primary);font-size:20px;} .pub-takt-kreska{flex:1;height:1px; background:linear-gradient(90deg,var(--color-border),rgba(var(--brand-rgb),.45));} /* ── POLA: LINIA POD SPODEM, NIGDY RAMKA ─────────────────────────────────────────────────── */ .pub-pole{margin-bottom:20px;} .pub-pole label{display:block;font-family:var(--pub-mono);font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:8px;} .pub-pole input,.pub-pole select,.pub-pole textarea{width:100%;background:transparent;border:none; border-bottom:1px solid var(--color-border);padding:8px 2px;color:var(--color-text-primary); font-family:inherit;font-size:16px;outline:none;transition:border-color .2s;border-radius:0;} .pub-pole textarea{resize:vertical;min-height:88px;line-height:1.5;} .pub-pole select{appearance:none;-webkit-appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--color-text-tertiary) 50%), linear-gradient(135deg,var(--color-text-tertiary) 50%,transparent 50%); background-position:calc(100% - 12px) 18px,calc(100% - 8px) 18px; background-size:4px 4px,4px 4px;background-repeat:no-repeat;padding-right:24px;} .pub-pole select option{background:var(--color-bg-surface);color:var(--color-text-primary);} .pub-pole input::placeholder,.pub-pole textarea::placeholder{color:var(--color-text-tertiary);} .pub-pole input:hover,.pub-pole select:hover,.pub-pole textarea:hover{border-bottom-color:var(--color-border-strong);} .pub-pole input:focus,.pub-pole select:focus,.pub-pole textarea:focus{border-bottom-color:var(--color-brand);} .pub-pole input:focus-visible,.pub-pole select:focus-visible,.pub-pole textarea:focus-visible{ outline:2px solid var(--color-brand);outline-offset:4px;border-radius:2px;} .pub-pole--zle input,.pub-pole--zle select{border-bottom-color:var(--color-error);} .pub-pole-pod{font-size:12px;color:var(--color-text-tertiary);margin-top:6px;line-height:1.45;} .pub-wiersz{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;} /* ── PRZYCISKI ───────────────────────────────────────────────────────────────────────────── */ .pub-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%; padding:13px 16px;border:1px solid var(--color-brand);border-radius:6px;background:transparent; color:var(--color-brand);font-family:var(--pub-mono);font-size:12px;letter-spacing:.16em; text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s;text-decoration:none;} .pub-btn:hover{background:var(--color-brand);color:var(--color-on-brand);} .pub-btn:focus-visible{outline:2px solid var(--color-text-primary);outline-offset:3px;} .pub-btn:disabled{opacity:.5;cursor:not-allowed;} .pub-btn:disabled:hover{background:transparent;color:var(--color-brand);} .pub-btn--cichy{border-color:var(--color-border);color:var(--color-text-secondary);} .pub-btn--cichy:hover{background:var(--color-bg-elevated);color:var(--color-text-primary);} .pub-btn--waski{width:auto;} .pub-albo{display:flex;align-items:center;gap:12px;margin:18px 0;font-family:var(--pub-mono); font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-tertiary);} .pub-albo::before,.pub-albo::after{content:'';flex:1;height:1px;background:var(--color-border);} /* ── TAGI: BEZ RAMEK, ROZDZIELONE KROPKĄ ─────────────────────────────────────────────────── */ .pub-tagi{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--pub-mono); font-size:11px;color:var(--color-text-tertiary);letter-spacing:.04em;} .pub-tagi>*+*::before{content:'·';margin-right:8px;color:var(--color-border-strong);} /* ── LISTA POZYCJI: LINIE, NIE PUDEŁKA ───────────────────────────────────────────────────── */ .pub-lista{list-style:none;} .pub-poz{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center; padding:14px 0;border-bottom:1px solid var(--color-border);} .pub-poz:last-child{border-bottom:none;} .pub-poz-czas{font-family:var(--pub-mono);font-size:12px;color:var(--color-text-secondary);white-space:nowrap;} .pub-poz-tyt{font-size:15px;color:var(--color-text-primary);font-weight:500;} .pub-poz-pod{font-size:12px;color:var(--color-text-tertiary);margin-top:3px;} .pub-poz-akcja{font-family:var(--pub-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--color-brand);cursor:pointer;background:none;border:none;white-space:nowrap;padding:4px 0; border-bottom:1px solid transparent;} .pub-poz-akcja:hover{border-bottom-color:var(--color-brand);} /* ── KOMUNIKATY ──────────────────────────────────────────────────────────────────────────── */ .pub-blad{display:flex;gap:8px;font-size:13px;color:var(--color-error);margin-top:10px;line-height:1.45;} .pub-blad span:first-child{font-family:var(--pub-mono);} .pub-ok{font-size:13px;color:var(--color-success);margin-top:10px;} .pub-info{font-size:13px;color:var(--color-text-secondary); border-left:2px solid var(--color-border);padding-left:12px;margin:16px 0;line-height:1.55;} .pub-pusto{font-size:14px;color:var(--color-text-tertiary);padding:32px 0;text-align:center;} /* ── STOPKA ──────────────────────────────────────────────────────────────────────────────── */ .pub-stopka{margin-top:40px;padding-top:16px;border-top:1px solid var(--color-border); display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between; font-family:var(--pub-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--color-text-tertiary);} .pub-stopka a{color:var(--color-text-tertiary);text-decoration:none;border-bottom:1px solid transparent;} .pub-stopka a:hover{color:var(--color-text-primary);border-bottom-color:var(--color-border);} /* ── TELEFON ─────────────────────────────────────────────────────────────────────────────── */ @media (max-width:600px){ .pub-strona{padding:16px 16px 48px;} .pub-tytul{letter-spacing:.09em;} .pub-poz{grid-template-columns:1fr auto;gap:10px;} .pub-poz-czas{grid-column:1/-1;} } /* ⛔ 349 px to ZWYKŁY TELEFON, nie przypadek brzegowy — na tej szerokości pracuje właściciel DI. */ @media (max-width:360px){ .pub-strona{padding:14px 12px 44px;} .pub-marka-nazwa{font-size:13px;} .pub-takt{gap:10px;} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}} /* ── POSTEP W FORMULARZU WIELOETAPOWYM (09.08, wdrozenie szkoly) ────────────────────────────── JEDYNY element, ktorego arkusz stron publicznych jeszcze nie mial. Powod: formularz wdrozenia ma JEDENASCIE sekcji i nikt nie wypelni go za jednym posiedzeniem — wiec najwazniejszy nie jest tam zaden pole, tylko widoczny postep i pewnosc, ze nic nie przepadnie. ⛔ Cienka linia, nie pudelko z procentami: te strony stoja na liniach. Wysokosc 2 px, kolor marki szkoly, zero tekstu w srodku — liczbe („4 z 11") mowi zdanie obok, bo w pasku byla by nieczytelna. */ .pub-postep{height:2px;background:var(--color-border);border-radius:2px;overflow:hidden;margin:10px 0 0;} .pub-postep i{display:block;height:100%;background:var(--color-brand);transition:width .3s;} .pub-postep-opis{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between; font-family:var(--pub-mono);font-size:11px;letter-spacing:.06em;color:var(--color-text-secondary);} .pub-postep-opis em{font-style:normal;color:var(--color-success);} /* ── SPIS, KTORY NA TELEFONIE SCHODZI Z DROGI (09.08, uwaga Jerzego) ────────────────────────── Na komputerze spis sekcji stoi z boku i nie przeszkadza. Na telefonie stanalby PRZED pytaniem — czyli czlowiek przewijalby jedenascie pozycji, zeby dojsc do pola, ktore ma wypelnic. ⛔ NIE hamburger: w platformie ten wzorzec jest zarezerwowany dla NAWIGACJI (`UX-STANDARD` §5 pkt 9 i §6) i na stronie bez logowania robilby drugi jezyk — a tam nie ma czego nawigowac, jest JEDNA lista do podejrzenia. Zwijamy natywnym `
`, bo dziala z klawiatura i czytnikiem ekranu bez ani jednej linii JavaScriptu. Sygnalem jest sama linia z numerem sekcji. */ .pub-zwin{border-bottom:1px solid var(--color-border);} .pub-zwin>summary{list-style:none;cursor:pointer;padding:12px 0;display:flex;align-items:center; justify-content:space-between;gap:12px;font-family:var(--pub-mono);font-size:11px; letter-spacing:.08em;color:var(--color-text-secondary);min-height:44px;} .pub-zwin>summary::-webkit-details-marker{display:none;} .pub-zwin>summary::after{content:'⌄';font-size:15px;color:var(--color-text-tertiary);transition:transform .2s;} .pub-zwin[open]>summary::after{transform:rotate(180deg);} .pub-zwin>summary:focus-visible{outline:2px solid var(--color-brand);outline-offset:3px;border-radius:2px;} .pub-zwin>summary b{color:var(--color-text-primary);font-weight:500;letter-spacing:0;font-size:14px;} /* ── CALY WIERSZ PROWADZI DALEJ (09.08, polecenie Jerzego) ──────────────────────────────────── Jego slowa: „napisy zapisz sie / kup sa bardzo male i ludzie czesto klikaja w caly napis i licza ze to wystarczy". Klasa dokladana przez `space-public.js` TYLKO wierszom, ktore maja dokad prowadzic — wiersz bez akcji (np. pozycja znizki) nie udaje klikalnego. ⛔ Bez tla na hover: te listy stoja na LINIACH, nie na pudelkach, a podswietlony pas zamienilby cennik w tabele. Sygnalem jest kursor i podkreslona akcja — to samo, co pokazuje sam przycisk. */ .pub-poz--klik{cursor:pointer;} .pub-poz--klik:hover .pub-poz-akcja{border-bottom-color:var(--color-brand);} .pub-poz--klik:hover .pub-poz-tyt{color:var(--color-brand);} /* ── POZYCJA ZWARTA: CENA ZOSTAJE W WIERSZU TAKŻE NA TELEFONIE (10.08, uwaga Jerzego) ────────── ⛔ ZMIERZONE w ramce 349 px: jedna pozycja `.pub-poz` ma **81 px** wysokości, bo reguła telefonu przenosi `.pub-poz-czas` do WŁASNEGO wiersza (`grid-column:1/-1`). Przy pięciu startach to 405 px, czyli prawie dwie trzecie ekranu na same wiersze — i to jest dokładnie to, co Jerzy nazwał „za bardzo rozciągnięte". ⛔ Dlaczego MODYFIKATOR, a nie zmiana reguły telefonu dla wszystkich: `.pub-poz-czas` bywa GODZINĄ („17:00–18:00”) obok długiej nazwy grupy — tam własny wiersz ratuje układ. Krótka etykieta (cena, numer porządkowy) własnego wiersza nie potrzebuje. Decyduje więc autor listy, a nie szerokość ekranu. ZMIERZONE PO ZMIANIE: **81 px → 66 px**, jeden wiersz siatki zamiast dwóch, a nazwa ma 225 px na zawinięcie (próg czytelności w bramce makiet to 140 px). ⛔ PIERWSZE PODEJSCIE BYLO GORSZE NIZ STAN WYJSCIOWY I ZLAPAL TO POMIAR, NIE OKO: dalem tu DWIE kolumny (`auto 1fr`), przez co akcja („Wybrane") spadala do drugiego wiersza siatki i pozycja rosla z 81 px do **99 px**. Trzy elementy nie mieszcza sie w dwoch kolumnach — to jest arytmetyka siatki, nie kwestia gustu. Stad trzy kolumny takze na telefonie, a `minmax(0,1fr)` na srodkowej, zeby dluga nazwa ZAWIJALA sie zamiast rozpychac wiersz. */ .pub-poz--zwarta{grid-template-columns:auto minmax(0,1fr) auto;} @media (max-width:600px){ .pub-poz--zwarta{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:10px 0;} .pub-poz--zwarta .pub-poz-czas{grid-column:auto;align-self:start;} } /* ── PASEK DECYZJI PRZY DOLE EKRANU (10.08) ──────────────────────────────────────────────────── PO CO: na telefonie decyzja („ile to kosztuje" i „wyślij") ma być pod kciukiem, a nie na górze strony, do której trzeba wrócić po przeczytaniu wszystkiego. ⛔ To zachowanie ISTNIAŁO, ale było zaszyte w `.pub-obok > aside`, czyli dostępne WYŁĄCZNIE przy układzie dwukolumnowym. Układ telefonu, który nie ma dwóch kolumn, nie miał jak go użyć i musiałby go skopiować — a kopia po miesiącu rozjeżdża się z oryginałem. Wydzielone. */ .pub-dol{position:sticky;bottom:0;background:var(--color-bg-base); border-top:1px solid var(--color-border);padding:12px 0 14px;margin-top:16px;} /* ── WYBRAŁEŚ ZAJĘCIA — NAGŁÓWEK ZAMIAST LISTY (10.08, RUN STR blok 3) ───────────────────────── PO CO: człowiek wchodzi tu z grafiku, linkiem do KONKRETNYCH zajęć. Do 10.08 dostawał nad formularzem 102 karty grup i 4 filtry, czyli cały wybór jeszcze raz. Teraz lista schodzi, a zostaje to, co musi potwierdzić wzrokiem (co, kiedy, ile) plus JEDNO wyjście, gdyby kliknął nie to, co chciał. ⛔ Bez pudełka i bez cienia: to jest nagłówek strony, a nie kolejna karta na liście, której właśnie NIE MA. Znakiem jest linia — tak jak wszędzie na tych stronach. ⛔ Reguła stoi TUTAJ, bo używają jej DWIE strony (`/zapisy` i `/probna`); kopia przy stronie rozjechałaby się po pierwszej poprawce. */ .wybrane-zajecia{border-bottom:1px solid var(--color-border);padding-bottom:18px;margin-bottom:22px;} .wybrane-zajecia .wz-nazwa{font-size:20px;font-weight:700;line-height:1.3;color:var(--color-text-primary);} .wybrane-zajecia .wz-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;font-size:13px; color:var(--color-text-secondary);} .wybrane-zajecia .wz-meta span+span::before{content:'· ';color:var(--color-text-tertiary);} .wybrane-zajecia .wz-wyjscie{margin-top:12px;background:none;border:none;padding:4px 0;cursor:pointer; color:var(--color-text-secondary);font:inherit;font-size:13px; border-bottom:1px solid var(--color-border);} .wybrane-zajecia .wz-wyjscie:hover{color:var(--color-brand);border-bottom-color:var(--color-brand);} .wybrane-zajecia .wz-wyjscie:focus-visible{outline:2px solid var(--color-brand);outline-offset:3px;} /* ── DWIE KOLUMNY: TREŚĆ OBOK KARTY DECYZJI (09.08, strona wydarzenia) ───────────────────────── PO CO: na stronie wydarzenia człowiek robi dwie rzeczy naraz — CZYTA (co to jest, dla kogo, co zabrać, program dnia) i ma podjąć JEDNĄ decyzję (cena, wolne miejsca, „zapisz się"). Dziś cena i przycisk stoją tylko na górze, więc po przewinięciu treści do końca decyzji nie ma pod palcem — a to właśnie na końcu człowiek jest gotowy ją podjąć. ⛔ To NIE jest pudełko z cieniem: karta stoi na LINII z lewej, tak jak wszystko na tych stronach. ⛔ Na telefonie kolumna znika, a karta przykleja się do DOŁU ekranu, bo tam jest kciuk — nie na górze, gdzie zjadłaby pierwszy ekran (ta sama lekcja co belka zgód, `space-consent.js`). */ .pub-obok{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:40px;align-items:start;} .pub-obok>aside{position:sticky;top:24px;border-left:1px solid var(--color-border);padding-left:20px;} @media (max-width:760px){ .pub-obok{grid-template-columns:minmax(0,1fr);gap:0;} .pub-obok>aside{position:sticky;top:auto;bottom:0;border-left:none;padding:12px 0 14px; border-top:1px solid var(--color-border);background:var(--color-bg-base);} } /* ── SPIS KROKOW OBOK PYTANIA (10.08, `/onboard` w nowej wersji) ─────────────────────────────── PO CO: formularz wdrozenia ma JEDENASCIE sekcji i nikt nie wypelni go za jednym posiedzeniem. Na komputerze spis stoi z boku i przez caly czas mowi, co zrobione i ile zostalo; na telefonie schodzi z drogi, bo tam stanalby PRZED pytaniem (`.pub-zwin`, ta sama lekcja co belka zgod). ⛔ To NIE jest `.pub-obok`: tamta stawia karte decyzji z PRAWEJ, przykleja ja do dolu telefonu i jest dla JEDNEJ akcji („zapisz sie"). Tu z lewej stoi lista do podejrzenia, a nie decyzja. ⛔ 220 px, bo nazwa sekcji („Miasta, lokalizacje i sale") ma sie zmiescic w dwoch wierszach. */ .pub-kroki{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:36px;align-items:start;} .pub-kroki>nav{position:sticky;top:24px;} @media (max-width:760px){ .pub-kroki{grid-template-columns:minmax(0,1fr);gap:0;} .pub-kroki>nav{position:static;} } /* ── UKRYTE ZNACZY UKRYTE (08.08, RUN 1 stron publicznych) ───────────────────────────────────── ⛔ ZNALEZIONE PRZY PISANIU `/join`, dotyczy KAZDEJ strony uzywajacej tych klas. Atrybut `hidden` dziala przez regule przegladarki `[hidden]{display:none}` o siledze 0,1,0 — czyli DOKLADNIE takiej samej, co nasza klasa. Przy remisie wygrywa regula pozniejsza w pliku, wiec `.pub-btn` (`display:inline-flex`) i `.pub-blad` (`display:flex`) POKONYWALY `hidden`: komunikat bledu i przycisk „Sprobuj ponownie" byly widoczne od wejscia, mimo ze znacznik mowil, ze maja nie byc. To ta sama klasa bledu co `styl_przy_elemencie_wygrywa_z_arkuszem` — tylko odwrotnie: to arkusz po cichu wygrywal ze znacznikiem. Regula stoi NA KONCU pliku swiadomie: bez `!important`, samym porzadkiem zrodla. Dzieki temu strona, ktora naprawde musi pokazac cos oznaczonego `hidden`, nadal moze to zrobic wlasna regula — a domyslnie „ukryte" znaczy ukryte. Pilnuje tego bramka `test:strony-maja-skore` §D. */ [hidden]{display:none;}