/* ========================================================================== WARSTWA WSPÓLNA — typografia, tokeny, układ, komponenty. ========================================================================== Kolory bazowe (cztery na paletę) mieszkają w `themes.css`. Tutaj są tylko dwa rodzaje wartości barwnych: * POCHODNE — wyliczone z czterech kolorów palety przez `color-mix()`; * SEMANTYCZNE (`--danger`, `--success`) — IDENTYCZNE we wszystkich paletach. Mieszamy `in srgb`, a nie `in oklab`: oklab daje ładniejsze przejścia, ale wynik trudno policzyć na kartce. W srgb mieszanie jest zwykłą średnią ważoną składowych, więc każdy współczynnik poniżej dało się dobrać pod konkretny próg kontrastu i zweryfikować liczbowo, a nie „na oko". Współczynniki stoją na styk minimum — zmiana któregokolwiek wymaga ponownego przeliczenia. Rozmiary pisma pochodzą WYŁĄCZNIE ze skali `--text-*` (proporcja 1.25). Żadnego `font-size` z wartością wpisaną wprost; pilnuje tego test `test_arkusz_uzywa_wylacznie_skali_typograficznej`. ========================================================================== */ /* -------------------------------------------------------------------------- Skale — wartości niezależne od palety. Kroje pisma (`@font-face`, `--font-sans`, `--font-serif`) mieszkają w `fonts.css`: potrzebuje ich także `/admin/`, do którego ten arkusz nie wchodzi (ADR-064). -------------------------------------------------------------------------- */ :root { color-scheme: light; /* Skala modularna, proporcja 1.25, podstawa 1rem. Kolejne poziomy to kolejne potęgi proporcji — dzięki temu rozmiary są ze sobą w stałym stosunku, a nie dobierane po jednym „na czuja". */ --text-caption: 0.8rem; /* 1 / 1.25 — podpisy, podpowiedzi, błędy pola */ --text-body: 1rem; /* — treść */ --text-lead: 1.25rem; /* 1.25 — wyróżniony akapit, legenda sekcji */ --text-title: 1.5625rem; /* 1.25² — nagłówek karty */ --text-page: 1.9531rem; /* 1.25³ — nagłówek strony */ /* 1.25⁴ — stopień DISPLAY. Sufit skali, nie kolejny nagłówek: obowiązuje w całym projekcie, a używają go DWA miejsca, oba w ZAPROSZENIU — tytuł wydarzenia w hero Gościa i inicjał otwierający „naszą historię" (#17, profil editorialowy). Nagłówki panelu zostają na `--text-page` i nie wolno ich tym podmieniać — panel ogląda jedna osoba przez godziny, zaproszenie kilkaset osób przez chwilę, i tylko to drugie ma prawo krzyczeć. Drugie użycie jest po TEJ SAMEJ stronie tej granicy i dlatego wolno je było dołożyć: inicjał nie jest nagłówkiem, jest literą, a stoi na ekranie, który z założenia ma przyciągać. Trzeciego użycia w panelu Organizatora nie będzie. PŁYNNOŚĆ SIEDZI W TOKENIE, nie w regule. Gdyby `clamp()` stał przy `font-size`, każde kolejne użycie tego stopnia powtarzałoby trzy liczby i pierwsza rozbieżność między nimi rozjechałaby skalę po cichu. Tu wartość jest jedna i cała skala pozostaje jednym miejscem do zmiany. Sufit to dokładnie 1.25⁴ (2.4414rem), czyli kolejna potęga proporcji — nie liczba dobrana pod tytuł, który akurat mamy w danych. Podłoga to `--text-page` (1.9531rem): przy 390 px tytuł schodzi do stopnia nagłówka strony i ani o krok niżej, bo poniżej przestaje być najważniejszą rzeczą na ekranie. Człon zmienny domyka oba końce: podłoga wypada dokładnie przy 390 px (nasz cel mobilny), sufit przy 1200 px. Człon stały jest w `rem`, a nie zerowy, i to nie jest kosmetyka: `font-size` złożony z samych `vw` nie reaguje na powiększenie tekstu w przeglądarce, więc osoba, która ustawiła sobie większy krój, dostaje tytuł dokładnie tej samej wielkości co wszyscy (WCAG 1.4.4). */ --text-display: clamp(1.9531rem, 1.718rem + 0.96vw, 2.4414rem); /* 1.25⁴ */ --leading-tight: 1.2; /* nagłówki */ --leading-normal: 1.55; /* treść */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --radius: 10px; --radius-sm: 6px; /* Czasy przejść — górna granica z widełek 120–200 ms. */ --dur-fast: 120ms; --dur: 180ms; --measure: 40rem; /* komfortowa długość wiersza tekstu */ --card-max: 26rem; /* karta logowania i pozostałe ekrany tożsamości */ --card-max-wide: 34rem; /* formularz rejestracji (trzy sekcje) */ --legal-max: 46rem; /* dokument prawny — listy zagnieżdżone i tabele (#163) */ --panel-width: 68rem; --control-height: 2.75rem; /* jednolita wysokość wszystkich kontrolek */ --field-max: 24rem; /* pole nie rozciąga się na całą kartę */ /* -------------------------------------------------------------------- Tokeny SEMANTYCZNE — te same we wszystkich paletach, świadomie POZA blokami `[data-theme]`. Palety mają cztery kolory i żaden z nich nie jest czerwony ani zielony, więc barwy sygnalizacyjnej nie da się z nich wyliczyć. Powód, dla którego musi istnieć, nie jest estetyczny: przy zgodzie RODO w formularzu RSVP gość musi jednoznacznie zobaczyć, że zgoda NIE została zapisana — sama ikona i pogrubienie to za słaby sygnał na telefonie, w słońcu, na weselu. Czerwień w palecie `blush` i w `graphite` jest identyczna, bo znaczenie „błąd" nie zależy od tego, jakie wesele obsługujemy. Sygnał barwny UZUPEŁNIA rozróżnienia nietekstowe (ikona, grubość krawędzi, pogrubienie), nigdy ich nie zastępuje — WCAG 1.4.1. -------------------------------------------------------------------- */ --danger: #b3261e; --danger-bg: #fdecea; --success: #146c43; --success-bg: #e7f4ec; /* TRZECI sygnał, dołożony przy skanerze (#9, etap 3). „Już wpuszczony" nie jest ani błędem (gość wraca z zewnątrz), ani sukcesem (nikogo właśnie nie wpuszczono) — a ten sam bilet drugi raz może znaczyć, że ktoś przesłał kod dalej. Bez własnej barwy stan wypadał neutralnie i nie zatrzymywał wzroku tam, gdzie jest to jedyne zadanie karty. Bursztyn, bo zieleń i czerwień są zajęte, a te trzy znaczenia („w porządku", „popatrz", „nie") są w tej kolejności czytelne bez instrukcji. KONTRAST POLICZONY, nie oszacowany: #8a4b00 daje 6.11:1 na własnym tle, 6.80:1 na bieli i 6.26:1 na najciemniejszej powierzchni karty w paletach — próg AA dla tekstu to 4.5:1. Ten token, jak `--danger` i `--success`, mieszka w warstwie WSPÓLNEJ: znaczenie „popatrz" nie zależy od tego, jakie wesele obsługujemy. */ --attention: #8a4b00; --attention-bg: #fdf1e3; } /* Awaryjna wartość kroju nagłówkowego, gdyby dokument trafił tu bez palety. `:where()` zeruje wagę selektora — inaczej ten wpis (późniejszy w kolejności wczytywania, o tej samej specyficzności co `[data-theme="…"]`) przykryłby szeryfowy krój palet weselnych. */ :where(:root) { --font-display: var(--font-sans); } /* -------------------------------------------------------------------------- Tokeny pochodne — wyliczane z czterech kolorów aktywnej palety. Selektor obejmuje TAKŻE `[data-theme]`, nie tylko `:root`. Wartość zmiennej niestandardowej wylicza się na elemencie, na którym ją ZADEKLAROWANO, a niżej już tylko dziedziczy. Gdyby ta lista wisiała wyłącznie na `:root`, paleta nałożona na fragment strony zmieniłaby cztery kolory bazowe, ale pochodne (przyciski, komunikaty, obramowania) zostałyby policzone z palety dokumentu — i sekcja wyszłaby w dwóch zestawach barw naraz. Sprawdzone na podglądzie. -------------------------------------------------------------------------- */ :root, [data-theme] { /* Trzy role powierzchni. Pomieszanie ich to najczęstszy sposób, w jaki jasny interfejs staje się ciężki: --surface-card tło KARTY — najjaśniejszy ton palety, czyli `--surface` WPROST, bez rozjaśniania, --surface-page tło STRONY — ten sam ton przyciemniony domieszką `--surface-alt`, --surface-alt pasy sekcji, nagłówek nawigacji, naprzemienne wiersze tabel — NIGDY wypełnienie karty. Kierunek mieszania jest tu całą rzeczą. Pierwsza wersja rozjaśniała kartę bielą (`color-mix(#fff 88%, var(--surface))`) i wychodziło ~#FFFEFE w KAŻDEJ palecie: `--surface` jest już najjaśniejszym tonem, więc karta nie ma dokąd się rozjaśnić, a motyw znikał ze wszystkiego poza akcentami. Barwę niesie więc strona, a karta jest od niej jaśniejsza „za darmo". Domieszka 15 % (N = 85, dolna granica ustalonego zakresu 85–92): rozdział karta/strona jest tu najsłabszym ogniwem — przy N = 92 różnica jasności spada do ΔL* ≈ 0.6–1.0, czyli poniżej progu dostrzegalności na typowym ekranie. Przy N = 85 wychodzi ΔL* ≈ 1.3–1.9 i do tego wyraźna różnica ODCIENIA, bo strona ciągnie w stronę `--surface-alt`. */ --surface-card: var(--surface); --surface-page: color-mix(in srgb, var(--surface) 85%, var(--surface-alt)); /* Tekst pomocniczy: 84 % atramentu. Niżej zejść się nie da — na `--surface-alt` w palecie `blush` byłoby poniżej 4.5:1. */ --muted: color-mix(in srgb, var(--ink) 84%, var(--surface-card)); /* Surowy `--accent` NIE nadaje się ani na tekst, ani na tło pod tekstem: w paletach weselnych daje 2.50–3.12:1, czyli poniżej AA (`blush` z niemal białym napisem to 2.80:1). Jest kolorem identyfikacji palety — pierścień ogniska, podkreślenia, plamy dekoracyjne. Wszystko, co niesie treść, bierze przyciemniony wariant: 6.04–13.77:1. */ --accent-strong: color-mix(in srgb, var(--accent) 37%, var(--ink)); --accent-hover: color-mix(in srgb, var(--accent-strong) 78%, var(--ink)); --accent-active: color-mix(in srgb, var(--accent-strong) 58%, var(--ink)); --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface-card)); /* -------------------------------------------------------------------- POWIERZCHNIA HERO — tokeny liczone względem PARY z `themes.css` (`--hero-surface` / `--hero-ink`), nie względem `--ink`. Wszystkie tokeny wyżej zakładają jasne tło i to założenie jest w nich ukryte: mieszają się KU `--surface-card`. Hero bywa polem ciemnym (palety firmowe) albo jasnym (weselne, ADR-068), więc jeden kierunek mieszania nie wystarczy — a nie jest to brak wartości, tylko brak drugiego KIERUNKU. TU JEST CAŁA SZTUCZKA: kierunku nie wybiera ten arkusz ani reguła komponentu, tylko paleta — przez to, CZYM jest jej `--hero-ink`. Każdy token niżej miesza się w stronę tego atramentu, więc ten sam wzór daje ton jasny na ciemnym polu i ciemny na jasnym. Bez tego każda barwa hero istniałaby w dwóch wariantach, a reguła komponentu musiałaby wiedzieć, który wziąć. Dlaczego nie surowy `--accent`: na ciemnym hero daje 1.45–3.60:1, czyli w trzech paletach z sześciu poniżej progu 3:1 dla elementu NIETEKSTOWEGO (WCAG 1.4.11) — ornament w `slate` byłby granatem na prawie czarnym. To ta sama wada co przy `--accent` pod tekstem na karcie (ADR-027). Współczynniki są WSPÓLNE dla wszystkich palet. Jedyna wartość zależna od schematu (`--hero-accent-share`) stoi przy schemacie, w `themes.css`, i ma tam swoje uzasadnienie — sześć ręcznie dobranych wyjątków to sześć miejsc do zapomnienia przy siódmej palecie. -------------------------------------------------------------------- */ /* Akcent doprowadzony do czytelności NA HERO: mieszany ku atramentowi tego pola, czyli ku bieli na ciemnym i ku ciemnemu na jasnym. Ten sam token unosi ornament, nadkreślnik nad tytułem i płatki. Zmierzone 4.81–8.97:1, minimum w `blush`. */ --accent-on-hero: color-mix(in srgb, var(--accent) var(--hero-accent-share), var(--hero-ink)); /* Tekst drugorzędny na hero (termin, miejsce, czas pozostały). To jest DOKŁADNIE `--muted` policzony na powierzchni hero — ten sam współczynnik 84 %, bo pytanie jest to samo: o ile przygasić atrament, żeby został szeptem, a nie zniknął. Zmierzone 5.02–9.24:1. */ --on-hero-muted: color-mix(in srgb, var(--hero-ink) 84%, var(--hero-surface)); /* Podkładka pod znakiem Organizatora — barwa PRZECIWNA do hero, bo jej jedyne zadanie to unieść znak, który z tłem hero się zlewa. Wzór jest ten sam co przy `--accent-soft` (16 % akcentu w powierzchni), tylko powierzchnią jest tu atrament hero: na ciemnym polu wychodzi z tego jasna przepaska, na jasnym — ciemna. Odwrócenie schematu odwraca ją samo, bez ani jednej reguły więcej (ADR-068). */ --hero-plate: color-mix(in srgb, var(--accent) 16%, var(--hero-ink)); /* Ramka włosowa: niski udział atramentu. Rola dekoracyjna (obrys karty, separator) — nie identyfikuje komponentu, więc nie podlega progowi 3:1. */ --border: color-mix(in srgb, var(--ink) 28%, var(--surface-card)); /* Granica KONTROLKI. Tu próg 3:1 obowiązuje (WCAG 1.4.11): obrys pola jest jedyną rzeczą, po której widać, gdzie się kliknie. 58 % to minimum, przy którym warunek jest spełniony w każdej palecie względem karty I strony. */ --border-control: color-mix(in srgb, var(--ink) 58%, var(--surface-card)); --border-control-hover: color-mix(in srgb, var(--ink) 78%, var(--surface-card)); } /* -------------------------------------------------------------------------- Reset (minimalny — tyle, ile trzeba, żeby nie walczyć z przeglądarką) -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* `hidden` MUSI WYGRYWAĆ Z KAŻDĄ REGUŁĄ UKŁADU — i to jest poprawka błędu, nie ostrożność na wyrost. Przeglądarka realizuje ten atrybut regułą `[hidden] { display: none }` w SWOIM arkuszu, a każda nasza deklaracja `display` bije arkusz przeglądarki niezależnie od specyficzności. Skutek był widoczny na ekranie recepcji: bloki `.message` (czyli `display: flex`) stały odsłonięte WSZYSTKIE naraz, mimo `hidden` w znaczniku — ekran witał trzema ostrzeżeniami przy działającej kamerze. Wada tej klasy wraca przy KAŻDYM elemencie chowanym atrybutem, któremu ktoś kiedyś nada `display` — dlatego reguła stoi w resecie, a nie przy jednym komponencie. `!important` jest tu treścią: „ukryty" nie jest stanem do negocjacji z układem. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--surface-page); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-normal); font-synthesis-weight: none; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } fieldset { margin: 0; padding: 0; border: 0; } /* -------------------------------------------------------------------------- Typografia — wyłącznie ze skali `--text-*`. Waga 700 nie jest przypadkowa: wysyłamy Inter w 400 i 700 oraz Cormorant Garamond w 600. Prośba o wagę, której nie ma w pliku, kończyłaby się doborem najbliższej (mamy `font-synthesis-weight: none`, więc bez pogrubiania syntetycznego) — deklarujemy więc to, co realnie leży w `static/fonts/`. -------------------------------------------------------------------------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: var(--leading-tight); margin: 0 0 var(--space-4); text-wrap: balance; } h1 { font-size: var(--text-title); letter-spacing: -0.01em; } h2 { font-size: var(--text-lead); } h3 { font-size: var(--text-body); } /* Nagłówek STRONY — o stopień wyżej niż nagłówek karty. Karta na ekranie logowania ma nagłówek proporcjonalny do siebie, nie do przeglądarki. */ .page-title { font-size: var(--text-page); /* Nagłówek strony NIESIE CUDZY TEKST: tytuł wydarzenia, a od #100 także imię i nazwisko osoby na ekranie weryfikacji biletu. W największym stopniu pisma na ekranie jedno długie słowo bez spacji rozpycha stronę najszybciej — a wtedy przeglądarka oddala CAŁY dokument (patrz uzasadnienie przy `FREE_TEXT_SELECTORS` w `tests/test_presentation_guardrails.py`). */ overflow-wrap: anywhere; } p { margin: 0 0 var(--space-4); max-width: var(--measure); /* SIEROTA W OSTATNIM WIERSZU — `pretty` przesuwa łamanie tak, żeby na końcu akapitu nie zostawało jedno krótkie słowo. Nagłówki mają `balance` od początku; akapity nie miały nic i przy mierze 40 rem widać to wprost: zdanie o 105 znakach zostawiało na drugim wierszu samo „i Ty.". `pretty`, nie `balance`: `balance` wyrównuje DŁUGOŚĆ wszystkich wierszy i jest pomyślane dla dwóch–trzech wierszy nagłówka. W akapicie robi szkodę — przy sześciu wierszach przeglądarka i tak przestaje go stosować, a tam, gdzie go stosuje, skraca wiersze, które nie miały problemu. PRZEGLĄDARKA BEZ TEJ WARTOŚCI ŁAMIE JAK DZIŚ, więc reguła nie jest warunkiem poprawności układu — jest poprawką typograficzną. Treść, która nie ma prawa się rozjechać, musi to zapewnić SAMA (krótszym zdaniem albo `nowrap` na frazie, jak `.waiting__when strong`). */ text-wrap: pretty; } :where(p, li):last-child { margin-bottom: 0; } a { color: var(--accent-strong); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { color: var(--accent-hover); } small, .text-muted { color: var(--muted); font-size: var(--text-caption); } /* -------------------------------------------------------------------------- Dostępność — ognisko klawiatury, łącze pomijające, tekst dla czytnika -------------------------------------------------------------------------- */ /* Pierścień DWUTONOWY i to nie jest ozdoba. Sam `--accent` nie wystarcza: jako element nietekstowy podlega progowi 3:1 (WCAG 1.4.11), a w paletach weselnych daje 3.02–3.22 na karcie, 2.88–3.10 na tle strony i tylko 2.17–2.49 na `--surface-alt` — czyli na nagłówku nawigacji, gdzie stoi przycisk wylogowania. Wcześniejszy pomiar sprawdzał wyłącznie tło karty i dlatego wypadł pozytywnie. Zamiast odbierać `--accent` tę rolę (albo przyciemniać paletę, co przeciągnęłoby tożsamość weselną w brąz), pierścień dostaje drugą warstwę: wewnętrzny `box-shadow` niesie kolor palety, a zewnętrzna linia w `--ink` gwarantuje kontrast na każdym z trzech teł (9.53–15.56:1). Wskaźnik złożony z dwóch warstw, z których jedna spełnia próg, jest zgodny z 1.4.11. */ :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--accent); border-radius: var(--radius-sm); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Widoczne dopiero po sfokusowaniu tabulatorem — pierwszy element strony. */ .skip-link { position: absolute; left: var(--space-4); top: 0; z-index: 10; transform: translateY(-150%); padding: var(--space-2) var(--space-4); background: var(--surface-card); color: var(--accent-strong); border: 2px solid var(--border-control); border-radius: 0 0 var(--radius-sm) var(--radius-sm); text-decoration: none; transition: transform var(--dur-fast) ease-out; } .skip-link:focus { transform: translateY(0); } /* -------------------------------------------------------------------------- Znak graficzny (logo albo tekstowa nazwa produktu) -------------------------------------------------------------------------- */ .brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--ink); } /* Lockup poziomy. 2,75rem = 44 px to wysokość ZNAKU w lockupie i jest to PRÓG, nie upodobanie: poniżej ~40 px siatka dni w kalendarzu zlewa się w plamę (ADR-119). Tam, gdzie nie ma na tyle miejsca, wstawiamy nazwę tekstem, a nie mniejszy rysunek. */ .brand__lockup { display: block; height: 2.75rem; width: auto; } .brand__name { font-family: var(--font-display); font-size: var(--text-lead); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* Lockup pionowy na ekranach tożsamości. Wyżej napis zaczyna dominować nad formularzem, a lockup jest szeroki, więc na telefon nie trzeba go zmniejszać. */ .brand-wordmark { display: block; height: 7rem; width: auto; } /* Ścieżka BEZ pliku znaku — nazwa niesie wtedy całą tożsamość sama, więc dostaje podkreślenie i ma wyglądać jak decyzja typograficzna, a nie jak zasób, którego nie udało się wczytać. Ze znakiem obok byłaby to druga kreska w jednym miejscu: znak już domyka kompozycję. */ .brand--text .brand__name { border-bottom: 2px solid var(--accent); padding-bottom: 2px; } /* -------------------------------------------------------------------------- Układ: strony tożsamości (`base.html`) i panel (`base_panel.html`) -------------------------------------------------------------------------- */ .page { display: flex; flex-direction: column; align-items: center; justify-content: center; /* oddech nad i pod kartą */ gap: var(--space-6); min-height: 100vh; padding: var(--space-7) var(--space-4); } .page__body { width: 100%; max-width: var(--card-max); } .page__body--wide { max-width: var(--card-max-wide); } .panel { display: flex; flex-direction: column; min-height: 100vh; } /* Nagłówek nawigacji — jedno z trzech dozwolonych zastosowań `--surface-alt`. */ .panel__header { background: var(--surface-alt); border-bottom: 1px solid var(--border); } .panel__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; max-width: var(--panel-width); margin: 0 auto; padding: var(--space-4); } .panel__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); } .panel__main { width: 100%; max-width: var(--panel-width); margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-7); } /* Karta: prawie białe tło + ramka włosowa + promień. Bez cienia — cień na jasnym tle albo nie jest widoczny, albo brudzi barwę palety. */ .card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-6); } .stack > * + * { margin-top: var(--space-6); } /* -------------------------------------------------------------------------- Ikony — sprite SVG, kolor dziedziczony przez `currentColor` -------------------------------------------------------------------------- */ .icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; } /* -------------------------------------------------------------------------- GRAFIKA NIE WCHODZI DO ZAZNACZENIA Obrazek ani ikona nie są tekstem, ale przeciągnięcie myszą przez akapit zabiera je razem z nim: znak firmowy i ikonki podświetlają się wtedy na niebiesko, a próba zaznaczenia zdania kończy się złapaniem obrazka i rozpoczęciem jego przeciągania. Na ekranie zaproszenia, gdzie znak Organizatora stoi tuż pod podpisem, wygląda to na usterkę. REGUŁA JEST GLOBALNA, bo problem jest globalny — `app.css` wchodzi na KAŻDEJ stronie, także w warstwie Gościa (`base_public.html` rozszerza `base.html`), więc jedna deklaracja obejmuje panel, ekrany tożsamości i zaproszenie. CZEGO TA REGUŁA NIE ROBI i nie ma robić: nie chroni obrazków przed pobraniem. Menu podręczne, „zapisz obrazek jako", narzędzia deweloperskie i zwykły adres pliku działają dalej — plik w magazynie publicznym jest publiczny z definicji (ADR-056). To jest poprawka ERGONOMII zaznaczania tekstu, nie zabezpieczenie, i nie wolno jej opisywać jako zabezpieczenia. Tekst zostaje zaznaczalny wszędzie tam, gdzie był — reguła dotyczy wyłącznie elementów graficznych. Wyjątek `user-select: all` na kodzie dostępu (niżej w tym pliku) jest niezależny i nietknięty. -------------------------------------------------------------------------- */ img, svg { user-select: none; /* Przeciąganie obrazka to osobne zachowanie od zaznaczania i osobny atrybut: bez tego złapanie znaku myszą nadal startuje „przeciągnij i upuść", nawet gdy zaznaczenie jest już wyłączone. Własność jest niestandardowa (tylko WebKit/Blink), a w Firefoksie tę samą rolę pełni `draggable="false"` na elemencie — nie dokładamy go, bo w tej przeglądarce przeciąganie nie przerywa zaznaczania tekstu i nie ma czego naprawiać. */ -webkit-user-drag: none; } /* -------------------------------------------------------------------------- Przyciski i łącza akcji -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--accent-strong); color: var(--surface-card); font-weight: 700; line-height: var(--leading-tight); text-decoration: none; cursor: pointer; transition: background-color var(--dur-fast) ease-out; } .btn:hover { background: var(--accent-hover); color: var(--surface-card); } .btn:active { background: var(--accent-active); } /* Przycisk, który NIE MA CZEGO ZROBIĆ (dziś: zapis odpowiedzi bez zmiany — `guest.js`). Wygaszamy go BARWĄ, nie przezroczystością: `opacity` przygasza też tło pod spodem i przy nakładających się warstwach daje wynik zależny od tego, co akurat leży niżej. `cursor: not-allowed` mówi to samo wskaźnikowi, a `:hover` musi zostać zdjęty jawnie — inaczej nieaktywny przycisk rozjaśnia się pod kursorem i wygląda na klikalny. */ .btn:disabled, .btn:disabled:hover { background: var(--border); color: var(--muted); cursor: not-allowed; } /* Drugorzędny: bez wypełnienia. Tekst w `--accent-strong`, nie w surowym `--accent` — ten drugi nie przechodzi 4.5:1 w paletach weselnych. */ .btn--ghost { background: transparent; border-color: var(--border-control); color: var(--accent-strong); } .btn--ghost:hover { background: var(--accent-soft); border-color: var(--border-control-hover); color: var(--accent-hover); } .btn--ghost:active { color: var(--accent-active); } /* Przycisk DRUGORZĘDNY WOBEC TREŚCI, przy której stoi — dziś „Jak dojechać" pod adresem (#147). Niższy i drobniejszy od `.btn`, bo nie jest akcją tego ekranu: panel otwiera się po zaproszenie, a nawigacja jest przy nim udogodnieniem. Pełnowymiarowy przycisk przeciągał na siebie wzrok z adresu, czyli z tego, co ma być przeczytane. 36 px WYSOKOŚCI JEST DOLNĄ GRANICĄ, nie wartością dobraną pod oko: cel dotykowy ma minimum 24 px (WCAG 2.5.8) i tyle samo musi zostać po odjęciu obramowania. Pełne 44 px z `--control-height` należą się akcjom głównym (WCAG 2.5.5) i tam zostają. */ .btn--compact { min-height: 2.25rem; padding: 0 var(--space-3); font-size: var(--text-caption); } /* Przycisk z samą ikoną. Kwadrat o boku `--control-height` (44 px) — to nie jest wybór estetyczny, tylko minimalny cel dotykowy z WCAG 2.5.5; ikona ma 1.15em i sama w sobie dałaby cel wielkości paznokcia. Nazwę przycisku niesie tekst w `.visually-hidden` (patrz `_agenda.html`): ikona bez nazwy jest dla czytnika ekranu przyciskiem bez etykiety. */ .btn--icon { min-width: var(--control-height); padding: 0; } .btn--icon .icon { width: 1.25em; height: 1.25em; vertical-align: 0; } /* Akcja niszcząca: sygnał barwny dopiero na najechanie i na ognisko. Stale czerwony przycisk przy każdym wierszu zamieniłby listę w ścianę ostrzeżeń, a wtedy czerwień przestaje cokolwiek znaczyć (ta sama zasada co przy `message--danger`). Barwa UZUPEŁNIA nazwę „Usuń punkt", nie zastępuje jej. */ .btn--danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); } .btn--danger:focus-visible { border-color: var(--danger); color: var(--danger); } /* -------------------------------------------------------------------------- Pole formularza — struktura z `templates/partials/_field.html` -------------------------------------------------------------------------- */ .field + .field { margin-top: var(--space-5); } .field__label { display: block; font-weight: 700; margin-bottom: var(--space-2); } /* Podpowiedź stoi POD etykietą, przed kontrolką: użytkownik czyta ją, zanim zacznie pisać, a nie po tym, jak skończył. */ .field__help { margin: 0 0 var(--space-2); max-width: var(--field-max); color: var(--muted); font-size: var(--text-caption); } /* Wyjątki dla pól wyboru siedzą WEWNĄTRZ `:where()`, nie obok. `:not()` liczy specyficzność swojego argumentu, więc `:not([type="checkbox"])` dołożyłoby tu klasę wagi — i reguła stanu błędu niżej (o jedną klasę słabsza) przestałaby działać. Objaw: czerwony komunikat pod polem, ale ramka pola bez zmian. Wyszło na zrzucie ekranu formularza rejestracji z błędami. `:not(.visually-hidden)` dołożone przy #7 etap 2 i to jest wyjątek o INNYM powodzie niż dwa poprzednie. `.visually-hidden` ma dokładnie taką samą wagę co ta reguła (`.field` to jedna klasa, `:where()` zeruje swój argument), więc o wyniku decydowała KOLEJNOŚĆ W PLIKU — a ta reguła stoi niżej i wygrywała. Kontrolka pliku schowana przez `file-drop.js` dostawała wtedy `width: 100%` zamiast `1px`, zostając przy tym `position: absolute` z `clip-path`: element NIEWIDOCZNY, o szerokości całego ekranu, wystający poza prawą krawędź. Objaw był jeden i tylko na telefonie — ekran importu dawał się przesunąć w bok, czego nie robi żaden inny. Zmierzone sondą po `getBoundingClientRect()` na layoucie 380 px, nie zgadnięte. */ .field :where(input, select, textarea):where( :not([type="checkbox"]):not([type="radio"]):not(.visually-hidden) ) { display: block; width: 100%; max-width: var(--field-max); min-height: var(--control-height); padding: 0 var(--space-3); background: var(--surface-card); color: var(--ink); border: 1px solid var(--border-control); border-radius: var(--radius-sm); transition: border-color var(--dur-fast) ease-out; } /* `resize: vertical` daje uchwyt w rogu kontrolki. Bez `max-height` ten uchwyt nie ma GÓRNEJ granicy: pole da się przeciągnąć na dowolną wysokość, wypychając przyciski formularza daleko poza ekran. `min-height` bez `max-height` wygląda na komplet i nim nie jest — druga granica jest tak samo potrzebna. 30rem to mniej więcej ekran laptopa; tekst dłuższy niż tyle przewija się w środku pola. */ .field textarea { padding: var(--space-2) var(--space-3); line-height: var(--leading-normal); resize: vertical; min-height: 7rem; max-height: 30rem; } /* Licznik znaków. Wstawia go `field-counter.js` (warstwa nieobowiązkowa) — bez skryptu limit nadal działa, tylko nie widać, ile go zostało. Stąd brak tego elementu w `_field.html`: pusty licznik przy wyłączonym JS byłby polem informacyjnym, które nigdy nie niesie informacji. */ .field__counter { margin: var(--space-2) 0 0; max-width: var(--field-max); color: var(--muted); font-size: var(--text-caption); /* Cyfry o stałej szerokości — inaczej licznik drga przy każdym znaku, bo „1" jest węższa od „8". Ruch w kącie oka podczas pisania rozprasza. */ font-variant-numeric: tabular-nums; } /* Blisko limitu licznik przestaje być tłem i staje się ostrzeżeniem. Kolor NIE jest tu jedynym nośnikiem (WCAG 1.4.1): treść i tak podaje liczbę, a czytnik ekranu dostaje osobny komunikat z `role="status"`. */ .field__counter--near-limit { color: var(--danger); font-weight: 700; } /* Lista wyboru bez systemowej strzałki. Natywna kontrolka rysuje ją inaczej w każdej przeglądarce i to ona najbardziej zdradza „domyślny formularz". Strzałkę rysujemy DWOMA gradientami, a nie obrazkiem: `url()` w arkuszu jest zabroniony (test `test_stylesheet_does_not_reach_for_external_assets` łapie każdy `//`, a `data:` z SVG-iem niesie `xmlns` z adresem). Kolor bierze `currentColor`, więc strzałka blednie razem z tekstem podpowiedzi. */ .field select { appearance: none; padding-right: var(--space-7); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 1.35rem center, right 1rem center; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; } /* Pusty wybór („Wybierz typ wydarzenia") ma wyglądać jak PODPOWIEDŹ, nie jak wybrana wartość — inaczej formularz twierdzi, że użytkownik już zdecydował. Stan bierze się z `:invalid` na polu wymaganym, czyli z tego samego atrybutu, który i tak steruje walidacją; osobna klasa byłaby drugim źródłem prawdy. */ .field select:required:invalid { color: var(--muted); } .field :where(input, select, textarea):hover { border-color: var(--border-control-hover); } /* KONTROLKA WYŁĄCZONA MUSI WYGLĄDAĆ NA WYŁĄCZONĄ — znalezione zrzutem przy #299. Przeglądarka szarzy `:disabled` sama, ale robi to TŁEM — a tło nadajemy tu jawnie (`--surface-card`), więc jej styl przepada. Do #299 nie miało to objawu, bo zamrożone były OBA pola terminu naraz i nie było ich z czym porównać. Od #299 obok wyłączonej daty stoi CZYNNA godzina: dwie kontrolki wyglądające identycznie, z których jedna po cichu nie przyjmuje wpisu, to jest ekran wyglądający na zepsuty. Kursor i brak reakcji na `:hover` też są tu treścią, nie ozdobą: to one odpowiadają na pytanie „czy ja czegoś nie klikam nie tak". */ .field :where(input, select, textarea):disabled { background: var(--surface-page); color: var(--muted); border-style: dashed; cursor: not-allowed; } .field :where(input, select, textarea):disabled:hover { border-color: var(--border-control); } /* Stan błędu jedzie na atrybucie, który Django i tak wystawia dla czytników ekranu — nie ma drugiego źródła prawdy, które mogłoby się rozjechać. */ .field [aria-invalid="true"] { border-color: var(--danger); border-width: 2px; } /* POLE WYBORU I PRZYCISK RADIOWY NIE MAJĄ OBRAMOWANIA, KTÓRE DAŁOBY SIĘ POMALOWAĆ — i to jest dziura, nie niuans (znaleziona przy #21). Reguła bazowa pól tekstowych wyklucza `[type="checkbox"]` i `[type="radio"]`, więc kontrolka zostaje NATYWNA: przeglądarka rysuje ją sama, a `border` na `appearance: auto` po prostu ignoruje. Deklaracja wyżej wykonuje się wtedy bez żadnego skutku widocznego — czyli deklaracja martwa, tylko z innej strony niż zwykle: tam obramowanie ukrywała specyficzność, tu nie ma czego ukrywać. Ekran potwierdzenia anonimizacji (#21) składa się WYŁĄCZNIE z takich pól, więc jego stan błędu nie miał ani jednego sygnału poza czerwonym zdaniem pod spodem. `outline` działa na kontrolce natywnej i nie rusza układu (nie zajmuje miejsca), a barwa UZUPEŁNIA komunikat przy polu, nigdy go nie zastępuje (WCAG 1.4.1). Reguła jest OGÓLNA, bo dziura jest ogólna — dotyczy każdego wymaganego pola wyboru w projekcie, także zgód w formularzu rejestracji. */ .field :where(input[type="checkbox"], input[type="radio"])[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; } .field__errors { list-style: none; margin: var(--space-2) 0 0; padding: 0; max-width: var(--field-max); color: var(--danger); font-size: var(--text-caption); font-weight: 700; } /* Podświetlenie miejsca błędu na czas jednej animacji (#196). Klasę zakłada i zdejmuje `error-focus.js`; w HTML-u nie stoi nigdy, bo opisuje ZDARZENIE (formularz właśnie wrócił z błędem), a nie stan pola. `outline`, a nie ramka ani tło: nie zajmuje miejsca, więc podświetlenie niczym nie przesuwa w kolumnie pól — a to jest warunek, skoro dzieje się dokładnie w chwili, w której użytkownik czyta, gdzie się pomylił. Barwa UZUPEŁNIA komunikat pod polem, nigdy go nie zastępuje (WCAG 1.4.1). JEDNA deklaracja klatki, bez `to` — stanem po animacji jest stan SPOCZYNKOWY, czyli obrys przezroczysty (ta sama zasada co przy `scan-result-in`). Dzięki temu pole nie ma jak zostać obrysowane na czerwono, gdy animacja nie dojdzie do końca albo zostanie wygaszona przez `prefers-reduced-motion` — a wygaszenie jest tu poprawnym zachowaniem: przewinięcie do błędu zostaje, miga wyłącznie ozdoba. */ .flagged { outline: 2px solid transparent; outline-offset: var(--space-2); animation: error-flag 1.4s ease-out; } @keyframes error-flag { from, 60% { outline-color: var(--danger); } } /* Zgoda / pole wyboru: etykieta OBOK kontrolki, nie nad nią — nad polem wyboru wisiałaby w powietrzu, oderwana od kwadracika, który opisuje. */ .field__inline { display: flex; align-items: flex-start; gap: var(--space-3); } .field__inline input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin: 0.28rem 0 0; flex: none; accent-color: var(--accent-strong); } .field__inline .field__label { margin-bottom: 0; font-weight: 400; } /* Grupa przycisków radiowych (widget z `use_fieldset`) — od #99. `
` przychodzi z domyślną ramką i domyślnymi marginesami przeglądarki, których nie da się „nie zauważyć": bez tego zerowania każda grupa kontrolek dostaje obwódkę, jakiej nie ma żaden inny element formularza. Legenda jest zwykłą `.field__label`, więc etykieta grupy wygląda dokładnie tak samo jak etykieta pojedynczego pola — różnica jest w semantyce (`` opisuje WSZYSTKIE kontrolki sekcji), nie w wyglądzie. Django renderuje grupę jako `
` z jednym `
` na opcję, a w nim `