/* Akademia AI dla Niewidomych — style dostępnościowe. Trzy motywy wysokiego kontrastu sterowane atrybutem data-motyw na . */ @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root, [data-motyw="czarny-na-bialym"] { --tlo: #ffffff; --tekst: #000000; --akcent: #000000; --akcent-tekst: #ffffff; --ramka: #000000; --blad: #a80000; --sukces: #005a00; } [data-motyw="bialy-na-czarnym"] { --tlo: #000000; --tekst: #ffffff; --akcent: #ffffff; --akcent-tekst: #000000; --ramka: #ffffff; --blad: #ff8080; --sukces: #80ff80; } [data-motyw="zolty-na-niebieskim"] { --tlo: #00006a; --tekst: #ffff00; --akcent: #ffff00; --akcent-tekst: #00006a; --ramka: #ffff00; --blad: #ffb0b0; --sukces: #a0ffa0; } * { box-sizing: border-box; } html { font-size: 22px; } body { margin: 0; background: var(--tlo); color: var(--tekst); font-family: "Atkinson Hyperlegible", Arial, sans-serif; line-height: 1.65; max-width: 60rem; margin-inline: auto; padding: 0.8rem; } h1 { font-size: 2rem; line-height: 1.25; } h2 { font-size: 1.5rem; line-height: 1.3; margin-top: 2rem; } h3 { font-size: 1.25rem; } p, li { font-size: 1.05rem; } .lead { font-size: 1.15rem; } a { color: var(--tekst); text-decoration: underline; text-decoration-thickness: 0.14em; text-underline-offset: 0.18em; } /* Fokus musi być bardzo wyraźny. */ :focus-visible { outline: 5px solid var(--akcent); outline-offset: 4px; } [data-motyw="czarny-na-bialym"] :focus-visible { outline-color: #0000cc; } .skip { position: absolute; left: -999px; top: 0; background: var(--akcent); color: var(--akcent-tekst); padding: 1rem 1.5rem; z-index: 10; font-size: 1.2rem; } .skip:focus { left: 0; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } header { border-bottom: 4px solid var(--ramka); padding-bottom: 1rem; margin-bottom: 1.5rem; } .marka { font-size: 1.3rem; font-weight: 700; } .marka a { text-decoration: none; } footer { border-top: 4px solid var(--ramka); margin-top: 3rem; padding-top: 1rem; } /* Przyciski: ogromne, pełna szerokość kolumny, maksymalnie 3 w rzędzie. */ .przyciski { display: grid; gap: 0.9rem; margin: 1rem 0 1.5rem; } .przyciski-1 { grid-template-columns: 1fr; } .przyciski-2 { grid-template-columns: 1fr; } .przyciski-3 { grid-template-columns: 1fr; } @media (min-width: 560px) { .przyciski-2 { grid-template-columns: repeat(2, 1fr); } .przyciski-3 { grid-template-columns: repeat(3, 1fr); } } button, .przycisk, input[type="submit"] { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 5rem; padding: 1rem 1.2rem; font-size: 1.2rem; font-weight: 700; font-family: inherit; background: var(--akcent); color: var(--akcent-tekst); border: 4px solid var(--ramka); border-radius: 1rem; text-decoration: none; cursor: pointer; width: 100%; } button:active, .przycisk:active { transform: scale(0.985); } /* Pola formularzy: duże i wyraźne. */ label { display: block; font-weight: 700; font-size: 1.1rem; margin-bottom: 0.4rem; } input, select, textarea { width: 100%; min-height: 4.2rem; font-size: 1.3rem; font-family: inherit; padding: 0.8rem 1rem; background: var(--tlo); color: var(--tekst); border: 4px solid var(--ramka); border-radius: 0.8rem; } fieldset { border: 4px solid var(--ramka); border-radius: 1rem; padding: 1rem 1.2rem; margin: 1.5rem 0; } legend { font-weight: 700; font-size: 1.15rem; padding: 0 0.6rem; } /* Opcje quizu: ogromny obszar dotyku. */ .opcja { display: flex; align-items: center; gap: 1rem; padding: 0.4rem 0; } .opcja input[type="radio"], .opcja input[type="checkbox"] { width: 2.4rem; height: 2.4rem; min-height: 0; flex: none; } .opcja label { margin: 0; font-weight: 400; font-size: 1.15rem; } .blad { color: var(--blad); font-weight: 700; border: 4px solid var(--blad); border-radius: 0.8rem; padding: 1rem; } .sukces { color: var(--sukces); font-weight: 700; border: 4px solid var(--sukces); border-radius: 0.8rem; padding: 1rem; } .lista-lekcji { list-style: none; padding: 0; } .lista-lekcji li { border: 3px solid var(--ramka); border-radius: 0.8rem; padding: 1rem; margin: 0.7rem 0; } .lista-lekcji a { display: block; } /* Piktogramy gestów: duże schematyczne rysunki. */ .gest { border: 3px solid var(--ramka); border-radius: 1rem; padding: 1rem 1.2rem; margin: 1.2rem 0; } .pikto { display: block; max-width: 22rem; width: 100%; height: auto; margin: 0.6rem 0; } .pikto-ramka { fill: none; stroke: var(--ramka); stroke-width: 5; } .pikto-palec { fill: var(--tekst); } .pikto-strzalka { fill: none; stroke: var(--tekst); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; } .pikto-tekst { fill: var(--tekst); font-size: 26px; font-weight: 700; font-family: inherit; } audio { width: 100%; min-height: 4rem; } .wiersz-form { margin: 0.6rem 0; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* Stopka i elementy rozwijane — etap 1 */ footer[role="contentinfo"] { margin-top: 3rem; padding: 1.5rem 0; border-top: 3px solid currentColor; } .stopka-linki { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; } .stopka-linki a { min-height: 44px; display: inline-flex; align-items: center; } details.rozwijane > summary { cursor: pointer; font-size: 1.2em; font-weight: 700; min-height: 44px; display: flex; align-items: center; } details.rozwijane { margin-bottom: 2rem; } fieldset { border: 2px solid currentColor; margin: 1rem 0; padding: 1rem; } legend { font-weight: 700; padding: 0 .5rem; } textarea { width: 100%; font-size: inherit; font-family: inherit; border: 2px solid currentColor; padding: .75rem; background: inherit; color: inherit; } /* Etap 2: listy stanowisk */ .lista-czysta { list-style: none; padding: 0; } .lista-czysta > li { margin: 0 0 2rem 0; padding-bottom: 1.5rem; border-bottom: 2px solid currentColor; } select { font-size: inherit; font-family: inherit; border: 2px solid currentColor; padding: .5rem; min-height: 44px; background: inherit; color: inherit; } /* Etap 3: strona startowa pierwszego kontaktu */ .przycisk-startowy { display: block; width: 100%; min-height: 45vh; font-size: 1.6em; font-weight: 700; border: 4px solid currentColor; background: inherit; color: inherit; padding: 2rem; margin: 1rem 0 2rem 0; font-family: inherit; cursor: pointer; } .przycisk-startowy:focus-visible { outline: 5px solid currentColor; outline-offset: 4px; } /* ------------------------- Etap 4: grafiki, kafelki, panele ------------------------- */ /* Grafiki reagujace na motyw kontrastu: na jasnym tle biale tlo kafelka znika, na ciemnych motywach obraz jest odwracany, a czern staje sie przezroczysta. */ .grafika-kontrastowa { mix-blend-mode: multiply; } [data-motyw="bialy-na-czarnym"] .grafika-kontrastowa, [data-motyw="zolty-na-niebieskim"] .grafika-kontrastowa { filter: invert(1); mix-blend-mode: screen; } .marka-link { display: inline-flex; align-items: center; gap: 1rem; text-decoration: none; } .logo { width: 72px; height: 72px; object-fit: contain; } .karta-kursu { margin-bottom: 3rem; } .kafelek-link { display: block; max-width: 30rem; border: 4px solid var(--ramka); } .kafelek-link:focus-visible { outline: 5px solid var(--tekst); outline-offset: 4px; } .kafelek { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; } .miniatura { width: 2.2em; height: 2.2em; object-fit: contain; vertical-align: middle; margin-right: .5em; } /* Lista lekcji bez ramek, numer w kolku */ .lista-lekcji { list-style: none; padding: 0; } .lekcja-pozycja { display: flex; gap: 1.25rem; align-items: flex-start; margin: 0 0 2.25rem 0; border: 0; } .nr-kolko { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; background: var(--tekst); color: var(--tlo); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.3em; } .lekcja-tytul { font-size: 1.1em; margin: .3rem 0 .5rem 0; } .lekcja-opis { flex: 1 1 auto; } .formularz-w-przyciskach { display: contents; } /* Lamanie dlugich wyrazow i adresow oraz odtwarzacz audio */ main { overflow-wrap: break-word; hyphens: auto; } a { overflow-wrap: anywhere; } audio { width: 100%; min-height: 44px; }