/* * Kolonia Gosławicka — pasek i panel ustawień dostępności. * * Osobny arkusz, nie `kg.css`: ten plik jest jedynym miejscem, w którym wolno * nadpisywać cudzy wygląd, i jedynym, w którym `!important` jest strategią. * Poza trybem wysokiego kontrastu żadna reguła stąd nie dotyka strony, dopóki * mieszkaniec sam czegoś nie włączy — domyślny wygląd serwisu zostaje * bajt w bajt taki sam (docs/08 §47: preferencje użytkownika, nie nowy motyw). * * Stan mieszka w atrybutach ``, ustawianych przez `assets/js/dostepnosc.js` * i przez wstawkę w `` (functions.php), żeby nie było mignięcia domyślną * paletą przy każdym wejściu na podstronę: * data-kg-text="lg|xl" — powiększenie * data-kg-contrast="high" — wysoki kontrast * data-kg-underline="on" — podkreślenie wszystkich linków */ /* ---------- 1. Pasek górny ---------- */ .kg-topbar { border-bottom: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--surface-alt); } .kg-topbar__inner { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 var(--wp--preset--spacing--50); } .kg-topbar__button, .kg-topbar__link { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 10px; border: 0; border-radius: var(--kg-radius-sm); background: none; color: var(--wp--preset--color--ink-muted); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; } /* Bez JavaScriptu przycisk nie miałby czego przełączać, więc odsłania go dopiero skrypt. Reguła jawna, bo `display` z klasy bije `[hidden]` z arkusza przeglądarki — ta sama pułapka co przy `.kg-filter-toggle`. */ .kg-topbar__button[hidden] { display: none; } .kg-topbar__button:hover, .kg-topbar__link:hover { background: var(--wp--preset--color--brand-faint); color: var(--wp--preset--color--brand-strong); } .kg-topbar__button .kg-icon { width: 17px; height: 17px; } .kg-topbar__button[aria-expanded="true"] { background: var(--wp--preset--color--brand-faint); color: var(--wp--preset--color--brand-strong); } /* Telefon i tablet mają ten sam panel pod przyciskiem w menu, więc pasek znika — nagłówek na małym ekranie i tak walczy o każdy wiersz. */ @media (max-width: 1023px) { .kg-topbar { display: none; } } /* ---------- 2. Przycisk w menu mobilnym ---------- */ .kg-mobile-panel__a11y { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: var(--kg-tap); padding: 0 14px; border: 1px solid var(--wp--preset--color--border); border-radius: var(--kg-radius-md); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; } .kg-mobile-panel__a11y[hidden] { display: none; } .kg-mobile-panel__a11y .kg-icon { width: 20px; height: 20px; } /* ---------- 3. Panel ustawień ---------- */ .kg-a11y-panel { border-bottom: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--surface-warm); } .kg-a11y-panel[hidden] { display: none; } .kg-a11y-panel__inner { max-width: 1120px; margin-inline: auto; padding: 20px var(--wp--preset--spacing--40) 24px; } .kg-a11y-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .kg-a11y-panel__title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--wp--preset--color--ink); } .kg-a11y-panel__note { margin: 4px 0 0; max-width: 64ch; font-size: 14px; color: var(--wp--preset--color--ink-muted); } .kg-a11y-panel__close { display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: var(--kg-tap); padding: 0 12px; border: 1px solid var(--wp--preset--color--border); border-radius: var(--kg-radius-md); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; } .kg-a11y-panel__close .kg-icon { width: 16px; height: 16px; } .kg-a11y-panel__groups { display: grid; gap: 18px; margin-top: 18px; } @media (min-width: 720px) { .kg-a11y-panel__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } } .kg-a11y-group { min-inline-size: 0; margin: 0; padding: 0; border: 0; } .kg-a11y-group__legend { margin-bottom: 10px; padding: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--ink-muted); } /* ----- Rozmiar tekstu ----- */ .kg-a11y-sizes { display: flex; flex-wrap: wrap; gap: 8px; } .kg-a11y-size { position: relative; display: inline-flex; align-items: baseline; gap: 8px; min-height: var(--kg-tap); padding: 0 14px; border: 1px solid var(--wp--preset--color--border); border-radius: var(--kg-radius-md); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); font-size: 15px; font-weight: 600; line-height: var(--kg-tap); cursor: pointer; } /* Kontrolka zostaje w DOM — to ona jest celem klawiatury i nazwą dla czytnika. Chowamy ją wizualnie, a stan pokazuje obramowanie i wypełnienie etykiety. */ .kg-a11y-size input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .kg-a11y-size__mark { font-weight: 700; letter-spacing: -0.03em; } .kg-a11y-size:nth-of-type(1) .kg-a11y-size__mark { font-size: 15px; } .kg-a11y-size:nth-of-type(2) .kg-a11y-size__mark { font-size: 18px; } .kg-a11y-size:nth-of-type(3) .kg-a11y-size__mark { font-size: 21px; } .kg-a11y-size:hover { border-color: var(--wp--preset--color--brand); background: var(--wp--preset--color--brand-faint); } .kg-a11y-size:has(input:checked) { border-color: var(--wp--preset--color--brand-strong); background: var(--wp--preset--color--brand-faint); color: var(--wp--preset--color--brand-deep); box-shadow: inset 0 0 0 1px var(--wp--preset--color--brand-strong); } .kg-a11y-size:has(input:focus-visible) { outline: 3px solid var(--wp--preset--color--focus); outline-offset: 3px; box-shadow: 0 0 0 2px var(--wp--preset--color--ink); } /* ----- Przełączniki ----- */ .kg-a11y-switch { position: relative; display: flex; align-items: center; gap: 12px; min-height: var(--kg-tap); padding: 6px 0; cursor: pointer; } .kg-a11y-switch + .kg-a11y-switch { border-top: 1px solid var(--wp--preset--color--border-warm); } .kg-a11y-switch input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .kg-a11y-switch__box { position: relative; flex: none; width: 46px; height: 26px; border: 1px solid var(--wp--preset--color--border); border-radius: 999px; background: var(--wp--preset--color--surface); transition: background-color var(--kg-duration) ease, border-color var(--kg-duration) ease; } .kg-a11y-switch__box::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--wp--preset--color--ink-muted); transition: transform var(--kg-duration) ease, background-color var(--kg-duration) ease; } .kg-a11y-switch:has(input:checked) .kg-a11y-switch__box { border-color: var(--wp--preset--color--brand-strong); background: var(--wp--preset--color--brand-strong); } .kg-a11y-switch:has(input:checked) .kg-a11y-switch__box::after { transform: translateX(20px); background: #fff; } .kg-a11y-switch:has(input:focus-visible) .kg-a11y-switch__box { outline: 3px solid var(--wp--preset--color--focus); outline-offset: 3px; box-shadow: 0 0 0 2px var(--wp--preset--color--ink); } .kg-a11y-switch__text { display: grid; gap: 2px; font-size: 16px; font-weight: 600; color: var(--wp--preset--color--ink); } .kg-a11y-switch__hint { font-size: 13px; font-weight: 400; color: var(--wp--preset--color--ink-muted); } /* ----- Stopka panelu ----- */ .kg-a11y-panel__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--wp--preset--color--border-warm); } .kg-a11y-panel__reset { display: inline-flex; align-items: center; min-height: var(--kg-tap); padding: 0 14px; border: 1px solid var(--wp--preset--color--border); border-radius: var(--kg-radius-md); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; } /* Odnośnik obok przycisku jest pełnoprawnym celem dotykowym (docs/08 §14) — sam `font-size` dałby 19 px wysokości. */ .kg-a11y-panel__foot a { display: inline-flex; align-items: center; min-height: var(--kg-tap); font-size: 15px; } /* Komunikat dla czytnika ekranu po przełączeniu ustawienia. */ .kg-a11y-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- 4. Powiększenie ---------- */ /* * `zoom` skaluje cały układ, a nie tylko deklaracje `font-size` — inaczej się * nie da, bo `kg.css` podaje 192 rozmiary w pikselach, więc przeskalowanie * `html { font-size }` nie ruszyłoby niczego. * * Haczyk: `zoom` na korzeniu zwęża układ, ale media queries nadal czytają * nieprzeskalowaną szerokość okna. Przy 1024 px i kroku 1,3 układ dostaje * 787 px, a obowiązują reguły desktopowe. Dlatego niżej stoją wyrównania * dla tych komponentów, które przy zmierzonym pomiarze wychodziły poza okno * (`node tests/e2e/dostepnosc.mjs`). Nie dopisuj tu nic „na wszelki wypadek” — * dopisuj to, co pokazał pomiar. */ :root[data-kg-text="lg"] { zoom: 1.15; } :root[data-kg-text="xl"] { zoom: 1.3; } @media (min-width: 1024px) { /* Nawigacja desktopowa nie mieści się w zwężonym układzie — przy powiększeniu przechodzi w drugi wiersz zamiast wyjść poza okno. */ :root[data-kg-text="lg"] .kg-header, :root[data-kg-text="xl"] .kg-header { flex-wrap: wrap; row-gap: 8px; } :root[data-kg-text="lg"] .kg-nav, :root[data-kg-text="xl"] .kg-nav { flex-wrap: wrap; justify-content: flex-end; } /* Po zawinięciu nawigacja zjada całą wolną przestrzeń pierwszego wiersza, więc sterowanie spadałoby na lewą krawędź drugiego. */ :root[data-kg-text="lg"] .kg-header__actions, :root[data-kg-text="xl"] .kg-header__actions { margin-left: auto; } } /* * Formularz „Mam sprawę” przechodzi na jedną kolumnę dopiero przy 960 px, a * prawa kolumna ma twarde `minmax(500px, …)`. W zwężonym układzie ta reguła * nie zdąży zadziałać, bo media query widzi pełną szerokość okna — więc * przesuwamy ją o tyle, ile wynosi krok powiększenia (960 × 1,15 = 1104, * 960 × 1,3 = 1248). To samo z siatką pól, która zwija się przy 600 px. */ @media (max-width: 1104px) { :root[data-kg-text="lg"] .kg-global-form { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 64px max(20px, calc((100% - 640px) / 2)); } :root[data-kg-text="lg"] .kg-global-form__intro { max-width: 640px; } } @media (max-width: 1248px) { :root[data-kg-text="xl"] .kg-global-form { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 64px max(20px, calc((100% - 640px) / 2)); } :root[data-kg-text="xl"] .kg-global-form__intro { max-width: 640px; } } @media (max-width: 690px) { :root[data-kg-text="lg"] .kg-form-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 780px) { :root[data-kg-text="xl"] .kg-form-grid { grid-template-columns: minmax(0, 1fr); } } /* * Opis partnera jest dymkiem dopiero od 768 px, a niżej rozwija się w kafelku. * W zwężonym układzie dymek na 320 px nie ma gdzie stanąć i wychodzi poza * kafelek, więc przy powiększeniu wraca do postaci z telefonu (768 × 1,15 = 883, * 768 × 1,3 = 998). Reguła celowo tylko cofa dymek — nie dubluje wyglądu * kafelka, który zostaje w `kg.css`. */ @media (max-width: 883px) { :root[data-kg-text="lg"] .kg-partner--has-card .kg-partner__panel { position: static; width: auto; padding: 14px 16px 16px; border: 0; border-top: 1px solid var(--wp--preset--color--border-warm); border-radius: 0; box-shadow: none; transform: none; } :root[data-kg-text="lg"] .kg-partner--has-card .kg-partner__panel::before { display: none; } } @media (max-width: 998px) { :root[data-kg-text="xl"] .kg-partner--has-card .kg-partner__panel { position: static; width: auto; padding: 14px 16px 16px; border: 0; border-top: 1px solid var(--wp--preset--color--border-warm); border-radius: 0; box-shadow: none; transform: none; } :root[data-kg-text="xl"] .kg-partner--has-card .kg-partner__panel::before { display: none; } } /* * Najwęższe telefony: przy kroku 1,3 układ dostaje 246 px, czyli mniej niż * 320 px, od których zaczyna się cokolwiek w tym motywie — i wtedy wychodzą * poza okno karty, filtry, pigułki i pola wyboru. Zmierzone, nie założone: * krok 1,15 jest czysty także przy 320 px, więc poniżej 416 px „Największy” * zatrzymuje się na nim. Lepiej dać mniejsze powiększenie niż rozjechany układ. */ @media (max-width: 415px) { :root[data-kg-text="xl"] { zoom: 1.15; } } /* ---------- 5. Podkreślenie linków ---------- */ /* * Przyciski, znak i paginacja zostają bez podkreślenia — to nie są linki * tekstowe, a podkreślona pigułka czyta się jak błąd renderowania. */ :root[data-kg-underline="on"] a:where(:not(.kg-btn, .kg-brand, .kg-scope__link, .kg-chip, .kg-taglist__item, .page-numbers, .kg-datownik__day, .kg-datownik__step)) { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: max(1px, 0.06em); } /* ---------- 6. Wysoki kontrast ---------- */ /* * Jedyne miejsce w projekcie, gdzie `!important` jest strategią, a nie * zaniedbaniem: tryb musi wygrać z każdą regułą motywu i wtyczki, łącznie * z kolorami wpisanymi wprost w atrybut `style` we wzorcach. Cały blok jest * zamknięty w `[data-kg-contrast="high"]`, więc dla kogoś, kto go nie włączył, * nie istnieje. * * Paleta: #000 i #FF0 (21:1), akcent #FFF na tle #000 (21:1) — mierzone, * nie oceniane (docs/08 §16.3). */ :root[data-kg-contrast="high"] { --kg-hc-bg: #000; --kg-hc-fg: #ff0; --kg-hc-accent: #fff; color-scheme: dark; } :root[data-kg-contrast="high"] body, :root[data-kg-contrast="high"] body *:not(svg):not(svg *) { background-color: var(--kg-hc-bg) !important; background-image: none !important; color: var(--kg-hc-fg) !important; border-color: var(--kg-hc-fg) !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; opacity: 1 !important; } /* Linki mają być rozpoznawalne bez koloru — w tym trybie zawsze podkreślone. */ :root[data-kg-contrast="high"] a:not(.kg-brand) { text-decoration: underline !important; text-underline-offset: 0.18em; } /* Wszystko, co się klika, dostaje własną ramkę — na jednolitej czerni sam kolor tła nie oddzieliłby przycisku od akapitu. */ :root[data-kg-contrast="high"] :is(button, .kg-btn, [type="submit"], [type="button"], [type="reset"], input, select, textarea, summary) { border: 2px solid var(--kg-hc-fg) !important; border-radius: var(--kg-radius-sm); } :root[data-kg-contrast="high"] :is(button, .kg-btn, [type="submit"], summary, a:not(.kg-brand)):hover { background-color: var(--kg-hc-fg) !important; color: var(--kg-hc-bg) !important; } :root[data-kg-contrast="high"] :is(button, .kg-btn, [type="submit"], summary, a):hover .kg-icon { color: var(--kg-hc-bg) !important; } /* Bieżąca pozycja menu: sam pogrubiony tekst na czerni jest nie do odróżnienia. */ :root[data-kg-contrast="high"] [aria-current="page"] { outline: 2px solid var(--kg-hc-accent); outline-offset: 2px; } :root[data-kg-contrast="high"] :focus-visible { outline: 3px solid var(--kg-hc-accent) !important; outline-offset: 3px; box-shadow: 0 0 0 2px var(--kg-hc-bg) !important; } /* Znak jest granatowym wektorem — na czerni zniknąłby, więc dostaje płytkę. */ :root[data-kg-contrast="high"] .kg-brand__mark { background-color: var(--kg-hc-accent) !important; border-radius: var(--kg-radius-sm); } /* Zdjęcia zostają: niosą treść (plakaty, dokumentacja projektów, galeria „O Kolonii”). Ramka oddziela je od tła, bo tło zdjęcia bywa czarne. */ :root[data-kg-contrast="high"] :is(img, video, iframe):not([aria-hidden="true"]) { border: 1px solid var(--kg-hc-fg) !important; } /* * Własne kontrolki panelu muszą pokazywać stan także wtedy, gdy paleta jest * spłaszczona do dwóch barw — inaczej po włączeniu kontrastu nie da się * odczytać, co jest włączone, a to jedyne miejsce, przez które da się go * wyłączyć. Przełącznik: czarny tor i żółta gałka = wyłączony, żółty tor * i czarna gałka = włączony. Wybrany rozmiar tekstu jest wypełniony na żółto. */ :root[data-kg-contrast="high"] .kg-a11y-switch__box::after { background: var(--kg-hc-fg) !important; } :root[data-kg-contrast="high"] .kg-a11y-switch:has( input:checked ) .kg-a11y-switch__box { background: var(--kg-hc-fg) !important; } :root[data-kg-contrast="high"] .kg-a11y-switch:has( input:checked ) .kg-a11y-switch__box::after { background: var(--kg-hc-bg) !important; } :root[data-kg-contrast="high"] .kg-a11y-size:has( input:checked ) { background-color: var(--kg-hc-fg) !important; color: var(--kg-hc-bg) !important; } :root[data-kg-contrast="high"] .kg-a11y-size:has( input:checked ) * { background-color: transparent !important; color: var(--kg-hc-bg) !important; } /* Stany, które w domyślnej palecie niosą znaczenie kolorem, przenoszą je tutaj na obramowanie — kolor i tak jest zrównany do żółtego. */ :root[data-kg-contrast="high"] :is(.kg-status, .kg-chip, .kg-badge, .kg-pill) { border: 1px solid var(--kg-hc-fg) !important; } /* ---------- 7. Ograniczenie ruchu ---------- */ /* * Nie jest osobnym przełącznikiem — przełączniki wyżej same w sobie zmieniają * wygląd i ich animacja rozpraszałaby przy każdym kliknięciu. */ @media (prefers-reduced-motion: reduce) { .kg-a11y-switch__box, .kg-a11y-switch__box::after { transition: none; } }