@charset "UTF-8"; /* ========================================================================== ipn-a11y.css — arkusz stylów portali Instytutu Pamięci Narodowej -------------------------------------------------------------------------- Standardy: WCAG 2.2 poziom AA / EN 301 549 / polska Ustawa o dostępności cyfrowej z 4 kwietnia 2019 r. Zależności: pure-min.css (3.x) + grids-responsive-min.css (3.x) — wyłącznie siatka (.pure-g / .pure-u-*) i drobne utility. Wszystkie komponenty portalu są zdefiniowane w tym pliku. -------------------------------------------------------------------------- SPIS TREŚCI 01. Zmienne CSS — motyw jasny (zestaw obowiązkowy) 02. Zmienne CSS — motyw ciemny (zestaw obowiązkowy) 03. Zmienne pochodne — mapowanie kontrastów WCAG (jasny / ciemny) 04. Reset, podstawy typografii i rytm 05. Dostępność: .sr-only, skip links, :focus-visible 06. Kontenery (.container / --wide / --narrow) + siatka pomocnicza 07. Nagłówki sekcji i typografia treści 08. Linki, przyciski, etykiety (.tag) 09. Pasek instytucjonalny (.topbar) + przełącznik motywu 10. Nagłówek portalu (.masthead) + wyszukiwarka (.search) 11. Nawigacja główna (.nav) + wariant mobilny sterowany przyciskiem 12. Sekcja wyróżniona (.featured) + lista komunikatów (.newslist) 13. Karty (.card) — wzorzec dostępnej karty z rozciągniętym linkiem 14. Kafle działów tematycznych (.tile) 15. Multimedia (.video, transkrypcja) 16. Akordeon natywny
/ 17. Stopka instytucjonalna (.site-footer) 18. Okruszki chleba (.breadcrumbs) 19. Treść CMS (.cms-content) 20. Tabele danych (.table-wrap, table) 21. Pliki do pobrania (.downloads) 22. Galeria zdjęć (.gallery) 23. Panel boczny (.sidebar) 24. Formularze i filtry (.form) 25. Paginacja (.pagination) 26. Komunikaty systemowe (.notice, .status) 27. Wydruk (print) i prefers-reduced-motion ========================================================================== */ /* ========================================================================== 01. ZMIENNE CSS — MOTYW JASNY (zestaw obowiązkowy, nie modyfikować wartości) ========================================================================== */ :root, [data-theme="light"] { --font: "Figtree", sans-serif; --font-header: "Memoria", Georgia, serif; --font-icon: "ipn"; --color-body-bg: #f5efe9; --color-light-bg: #fff; --color-dark-bg: #111; --color-text: #111; --color-text-highlight: #444; --color-main: #2b4a91; --color-main-opacity: rgba(0,158,248,0.8); --color-grey: #4D4D4D; --color-dark-grey: #262626; --color-light-grey: #E3E3E3; --color-light-text: #7e7c7d; --color-green: #267c01; --color-navy: #2B4A91; --color-light-navy: #5885C9; --color-extra-light-navy: #B8D1F6; --color-red: #E1003D; --color-gold: #C58160; --color-light-gold: #DEB585; --color-extra-light-gold: #F7E1B1; --color-black: #111; --color-white: #fff; --color-beige: #f5efe9; --color-yellow: #FBFF2B; --color-facebook: #3a559f; --color-youtube: #ea412c; --color-twitter: #222; --color-linkedin: #0077b5; --color-instagram: #555; --gradient: linear-gradient(180deg, rgba(0,74,105,0.85) 0%, rgba(0,160,227,0.3) 100%); --gradient-left: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); --gradient-right: linear-gradient(270deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); --gradient-top: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%); --gradient-bottom: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%); --gradient-light: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 100%); --gradient-light-left: linear-gradient(90deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 100%); --gradient-light-right: linear-gradient(270deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 100%); --greyscale: grayscale(100%); --greyscale--: grayscale(0); --border-radius: 0px; --border-radius-button: 1px; --box-shadow: 0 0 10px rgba(160,160,160,0.2); --box-shadow-hover: 0 0 10px rgba(160,160,160,0.6); --text-shadow: 0 0 20px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,0.8), 1px 1px 0px rgba(255,255,255,0.9); --text-shadow-dark: 0 0 20px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,0.8), 1px 1px 0px rgba(0,0,0,0.9); --vcenter: translate(-50%,0); --hcenter: translate(0,-50%); --center: translate(-50%,-50%); --breakpoint-l: 1200px; --breakpoint-m: 992px; --breakpoint-s: 768px; --breakpoint-xs: 576px; --gap: 30px; --gap0: 0; --gap1: 35px; --gap2: 40px; --gap3: 50px; --margin: 2em; --padding: 2em; --inside: 12%; --inside-narrow: 24%; --inside-wide: 6%; --logo-height: 100px; --slider-min-height: 50vh; --slider-max-height: 70vh; --slider-article-min-height: 35vh; --slider-article-max-height: 60vh; --video-width: 100%; --video-height: 60vh; --cerabox-border-width: 0; } /* ========================================================================== 02. ZMIENNE CSS — MOTYW CIEMNY (zestaw obowiązkowy, nie modyfikować wartości) ========================================================================== */ [data-theme="dark"] { --color-body-bg: #000; --color-main: #777; --color-light-bg: #000; --color-dark-bg: #111; --color-main-opacity: rgba(255,255,255,0.8); --color-grey: #555; --color-dark-grey: #444; --color-light-grey: #111; --color-text: #fff; --color-text-highlight: #fa0000; --color-light-text: #f4f4f4; --color-green: #267c01; --color-navy: #2B4A91; --color-light-navy: #25626c; --color-extra-light-navy: #25626c; --color-red: #E1003D; --color-gold: #000; --color-light-gold: #000; --color-extra-light-gold: #000; --color-black: #000; --color-white: #fff; --color-beige: #000; --color-yellow: #FBFF2B; --color-facebook: #3a559f; --color-youtube: #ea412c; --color-twitter: #222; --color-linkedin: #0077b5; --color-instagram: #555; } /* ========================================================================== 03. ZMIENNE POCHODNE — MAPOWANIE KONTRASTÓW (gwarancja WCAG 2.2 AA) -------------------------------------------------------------------------- Zasady realizowane przez ten blok: • Tekst pomocniczy: motyw jasny -> --color-grey (#4D4D4D, 7.46:1 na #fff), motyw ciemny -> --color-light-text (#f4f4f4, 19:1 na #000). Zmienna --color-light-text NIGDY nie jest używana do tekstu w trybie jasnym. • Złote kolory wyłącznie jako TŁO (--color-extra-light-gold) z ciemnym tekstem --color-black; nigdy jako kolor czcionki na jasnym tle. • Linki: jasny -> --color-main (#2b4a91), ciemny -> --color-yellow. • Obramowania kontrolek: --ui-border = #4D4D4D (jasny) / #f4f4f4 (ciemny). --color-light-grey nie jest używany do obramowań pól formularzy. ========================================================================== */ :root { /* Kolory interfejsu */ --ui-border: var(--color-grey); /* obramowania kontrolek: 7.4:1 na białym */ --hairline: var(--color-light-grey); /* linie dekoracyjne / separatory sekcji */ --text-body: var(--color-text); --text-muted: var(--color-grey); /* metadane, daty, podpisy — 7.46:1 */ --text-danger: var(--color-red); /* komunikaty błędów — 5.9:1 */ /* Powierzchnie i pasy tła */ --page-bg: var(--color-body-bg); --masthead-bg: var(--color-light-bg); --surface: var(--color-light-bg); --surface-2: var(--color-light-bg); --band-navy: var(--color-navy); --accent-fill: var(--color-navy); --accent-line: var(--color-navy); --table-head-bg: var(--color-navy); --nav-border: var(--color-navy); --nav-current: var(--color-yellow); --band-link-hover: var(--color-yellow); /* Linki */ --link: var(--color-main); --link-hover: var(--color-navy); --link-visited: #3d3a6b; /* Karty, panele i pola formularzy */ --card-bg: var(--color-light-bg); --card-border: var(--color-light-grey); --field-bg: var(--color-light-bg); /* Pasy nawigacyjne i stopka */ --topbar-bg: var(--color-dark-grey); --topbar-text: var(--color-white); --nav-bg: var(--color-navy); --nav-text: var(--color-white); --nav-hover-bg: rgba(255,255,255,0.16); --footer-bg: var(--color-dark-grey); --footer-text: var(--color-white); --footer-hairline: rgba(255,255,255,0.3); /* Przyciski */ --btn-primary-bg: var(--color-main); --btn-primary-text: var(--color-white); --btn-primary-hover: #1e3670; --btn-secondary-text: var(--color-text); /* Wyróżnienia (etykiety kategorii) */ --tag-bg: var(--color-extra-light-gold); --tag-text: var(--color-black); --tag-border: transparent; } /* -------------------------------------------------------------------------- NATURALNY TRYB CIEMNY Zasady: brak czystej czerni (#000) i brak neonowych akcentów. Warstwy tła rozjaśniają się stopniowo (page 16181c -> surface 1e2126 -> band 23272d), tekst jest złamany (e8e6e2) zamiast czystej bieli, akcenty stonowane (błękit a8c6f0 zamiast #FBFF2B). Kontrasty: tekst 8–16:1, obramowania 3.4:1+. -------------------------------------------------------------------------- */ [data-theme="dark"] { --ui-border: #6d747e; /* 3.4–3.8:1 — WCAG 1.4.11 */ --hairline: #2b3037; --text-body: #e8e6e2; /* 14.3:1 */ --text-muted: #b9b7b2; /* 8.9:1 */ --text-danger: #ffb0b0; /* 10.2:1 */ --page-bg: #16181c; --masthead-bg: #16181c; --surface: #1e2126; --surface-2: #23272d; --band-navy: #1f2530; --accent-fill: #2f3a4d; --accent-line: #5c7196; --table-head-bg: #2a3140; --nav-border: #2f3a4d; --nav-current: #a8c6f0; --band-link-hover: #d5e4f9; --link: #a8c6f0; /* 10.2:1 na tle strony */ --link-hover: #d5e4f9; --link-visited: #c3b6e6; --card-bg: #1e2126; --card-border: #2f353d; --field-bg: #1b1e22; --topbar-bg: #101215; --nav-bg: #1f2530; --nav-text: #eceae6; --nav-hover-bg: rgba(255,255,255,0.08); --footer-bg: #101215; --footer-text: #e6e4e0; --footer-hairline: rgba(255,255,255,0.16); --btn-primary-bg: #a8c6f0; --btn-primary-text: #10131a; --btn-primary-hover: #c6daf6; --btn-secondary-text: #e8e6e2; --tag-bg: #2e2b22; --tag-text: #f2e6c9; --tag-border: #5b5340; /* Cienie: na ciemnym tle delikatna jasna obwódka zamiast szarej poświaty */ --box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 2px 10px rgba(0,0,0,0.45); --box-shadow-hover: 0 0 0 1px rgba(255,255,255,0.07), 0 4px 18px rgba(0,0,0,0.55); } /* ========================================================================== 04. RESET, PODSTAWY TYPOGRAFII I RYTM ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { /* WCAG 2.4.11 Focus Not Obscured: fokus nigdy nie chowa się pod belką nagłówka */ scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; padding: 0; /* Długie, nieprzerywalne ciągi (URL, kody, nazwy) nie mogą rozepchnąć układu przy 320px (WCAG 1.4.10). */ overflow-wrap: break-word; background-color: var(--page-bg); color: var(--text-body); font-family: var(--font); font-size: 1rem; line-height: 1.65; font-weight: 400; /* Stopka zawsze na dole dokumentu (krótkie widoki) */ display: flex; flex-direction: column; min-height: 100vh; } main { display: block; flex: 1 0 auto; } img, svg, video { max-width: 100%; } img { height: auto; border: 0; } svg { fill: currentColor; } hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--margin) 0; } ::selection { background: var(--color-yellow); color: var(--color-black); } /* ========================================================================== 05. DOSTĘPNOŚĆ: .sr-only, SKIP LINKS, :focus-visible ========================================================================== */ /* Treść tylko dla czytników ekranu */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* WCAG 2.4.7 / 2.4.11 / 2.4.13 — globalny, dwukolorowy wskaźnik fokusu. Żółta obwódka + czarna otoczka = widoczność na każdym tle (jasnym i ciemnym). */ :focus-visible { outline: 3px solid var(--color-yellow) !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px var(--color-black) !important; } /* Skip links — ukryte poza ekranem, widoczne po otrzymaniu fokusu */ .skip-links { position: absolute; top: 0; left: 0; z-index: 9000; list-style: none; margin: 0; padding: 0; } .skip-links ul { margin: 0; padding: 0; list-style: none; } .skip-links li { margin: 0; padding: 0; } .skip-link { position: absolute; top: -100px; left: 0.5rem; display: inline-block; padding: 0.75rem 1.25rem; min-height: 44px; background: var(--color-black); color: var(--color-yellow); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; border: 2px solid var(--color-yellow); border-radius: var(--border-radius-button); white-space: nowrap; } .skip-link:focus, .skip-link:focus-visible { top: 0.5rem; } /* ========================================================================== 06. KONTENERY (.container / --wide / --narrow) + SIATKA POMOCNICZA -------------------------------------------------------------------------- Pasy tła sekcji są zawsze 100% szerokości okna (na
lub
), a treść wyśrodkowują trzy kontenery w stylu ipn.gov.pl. ========================================================================== */ .container { display: block; width: 100%; margin-inline: auto; padding-inline: var(--inside); } .container--wide { display: block; width: 100%; margin-inline: auto; padding-inline: var(--inside-wide); } .container--narrow { display: block; width: 100%; margin-inline: auto; padding-inline: var(--inside-narrow); } /* Rytm sekcji — pas tła na pełną szerokość + wewnętrzny kontener */ .section { padding-block: var(--gap2); } .section + .section { border-top: 1px solid var(--hairline); } .section--muted { background-color: var(--surface-2); } .section--navy { background-color: var(--band-navy); color: var(--color-white); } .section--navy h2, .section--navy h3 { color: var(--color-white); } .section--navy a { color: var(--color-white); text-decoration-color: currentColor; } .section--navy a:hover { color: var(--band-link-hover); } /* Odstępy w siatce Pure (guttery) */ .gutters { margin-inline: calc(var(--gap) / -2); } .gutters > [class*="pure-u-"] { padding-inline: calc(var(--gap) / 2); padding-bottom: var(--gap); } /* Nagłówek sekcji: tytuł + opcjonalny link „zobacz wszystkie” */ .section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem var(--gap); margin-bottom: calc(var(--gap) / 2); } .section__title { margin: 0 0 var(--gap); font-family: var(--font-header); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); font-weight: 700; line-height: 1.25; color: var(--color-text); } .section__head .section__title { margin-bottom: 0; } .section__subtitle { margin: -0.75rem 0 var(--gap); max-width: 70ch; font-size: 1rem; color: var(--text-muted); } /* --- Responsywność kontenerów (WCAG 1.4.10 Reflow do 320px) ---------------- Wcięcia boczne zmniejszają się płynnie na breakpointach --breakpoint-l, --breakpoint-m, --breakpoint-s i --breakpoint-xs. Nadpisujemy WYŁĄCZNIE zmienne odstępów — kolory motywów pozostają nietknięte. ------------------ */ @media (max-width: 1200px) { :root { --inside: 6%; --inside-narrow: 12%; --inside-wide: 4%; } } @media (max-width: 992px) { :root { --inside: 5%; --inside-narrow: 7%; --inside-wide: 5%; --gap: 24px; --gap1: 28px; --gap2: 32px; --video-height: 50vh; } } @media (max-width: 768px) { :root { --inside: 5%; --inside-narrow: 5%; --inside-wide: 5%; --gap: 20px; --gap1: 24px; --gap2: 28px; --logo-height: 72px; --video-height: 40vh; } } @media (max-width: 576px) { :root { --inside: 16px; --inside-narrow: 16px; --inside-wide: 16px; --logo-height: 56px; } } /* ========================================================================== 07. NAGŁÓWKI I TYPOGRAFIA TREŚCI ========================================================================== */ h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-family: var(--font-header); font-weight: 700; line-height: 1.25; color: var(--color-text); text-wrap: balance; } h1 { margin-bottom: 0.6em; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); } h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); } h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); } h4 { font-size: 1.05rem; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } strong, b { font-weight: 700; } abbr[title] { text-decoration: underline dotted; cursor: help; } /* Nagłówek strony podrzędnej (artykuł, kategoria) */ .page-head { margin-bottom: var(--gap); } .page-head__kicker { display: block; margin-bottom: 0.5rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .page-head__lead { max-width: 72ch; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); line-height: 1.55; color: var(--text-body); } /* Metadane (data, kategoria, autor) */ .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin: 0 0 1rem; font-size: 0.9rem; color: var(--text-muted); } .meta time, .meta .meta__item { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-muted); } /* ========================================================================== 08. LINKI, PRZYCISKI, ETYKIETY (.tag) ========================================================================== */ a { color: var(--link); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.2em; } a:hover { color: var(--link-hover); text-decoration-thickness: 0.12em; } a:visited { color: var(--link-visited); } /* Elementy nawigacyjne nie są podkreślane — kontekst jest jednoznaczny */ .topbar a, .masthead a, .nav a, .card a, .tile a, .pagination a, .site-footer a, .breadcrumbs a, .btn, .section__more, .newslist a, .sidebar a { text-decoration: none; } /* Spójny kolor linków już odwiedzonych w obrębie komponentów nawigacyjnych (karty, kafle, listy) — bez fioletu przeglądarki na kaflach. */ .card__link:visited, .tile__link:visited, .featured__link:visited, .newslist a:visited, .related a:visited, .sidebar__list a:visited, .section__more:visited { color: var(--link); } /* Przyciski */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 44px; min-height: 44px; padding: 0.6rem 1.35rem; font-family: var(--font); font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center; border: 2px solid transparent; border-radius: var(--border-radius-button); cursor: pointer; transition: background-color 0.15s linear, color 0.15s linear, border-color 0.15s linear; } .btn--primary { background-color: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-bg); } .btn--primary:hover, .btn--primary:focus { background-color: var(--btn-primary-hover); border-color: var(--btn-primary-hover); color: var(--btn-primary-text); } .btn--secondary { background-color: transparent; color: var(--btn-secondary-text); border-color: var(--ui-border); } .btn--secondary:hover, .btn--secondary:focus { background-color: var(--accent-fill); border-color: var(--accent-fill); color: var(--color-white); } /* Link „Wszystkie aktualności” w nagłówku sekcji */ .section__more { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0.35rem 0.25rem; font-weight: 700; color: var(--link); border-bottom: 2px solid currentColor; } .section__more:hover { color: var(--link-hover); } .section__more::after { content: ""; width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); } /* Etykieta kategorii — złote tło + ciemny tekst (kontrast 12:1). W motywie ciemnym: czarne tło, biały tekst i wyraźne obramowanie. */ .tag { display: inline-block; padding: 0.15rem 0.6rem; font-family: var(--font); font-size: 0.78rem; font-weight: 700; line-height: 1.6; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--tag-text); background-color: var(--tag-bg); border: 1px solid var(--tag-border); border-radius: var(--border-radius); } /* ========================================================================== 09. PASEK INSTYTUCJONALNY (.topbar) + PRZEŁĄCZNIK MOTYWU -------------------------------------------------------------------------- Zawiera wyłącznie linki instytucjonalne oraz JEDEN przełącznik wizualny (#theme-toggle). Brak jakiegokolwiek paska „ułatwień dostępu”. ========================================================================== */ .topbar { width: 100%; background-color: var(--topbar-bg); color: var(--topbar-text); font-size: 0.875rem; border-bottom: 1px solid var(--footer-hairline); } .topbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem var(--gap); padding-block: 0.35rem; } .topbar__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; margin: 0; padding: 0; list-style: none; } .topbar__list li { margin: 0; padding: 0; } .topbar a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.15rem; font-weight: 600; color: var(--topbar-text); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 0.25em; } .topbar a:hover, .topbar a:focus { color: var(--band-link-hover); text-decoration-color: currentColor; } .topbar a[aria-current="page"] { color: var(--color-yellow); text-decoration-color: currentColor; } /* Przełącznik motywu — jedyny element wizualny w pasku */ .theme-toggle { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 44px; min-height: 44px; padding: 0.35rem 0.85rem; font-family: var(--font); font-size: 0.875rem; font-weight: 600; color: var(--topbar-text); background-color: transparent; border: 2px solid var(--topbar-text); border-radius: var(--border-radius-button); cursor: pointer; } .theme-toggle__icon { display: block; flex: 0 0 auto; } .theme-toggle:hover { background-color: var(--color-white); color: var(--color-black); } /* Etykieta przycisku opisuje CEL kliknięcia: w trybie jasnym „Tryb ciemny”, w trybie ciemnym „Tryb jasny”. Przełączanie odbywa się w czystym CSS (bez JS), a ukryta etykieta nie trafia do drzewa dostępności — dzięki temu czytnik ekranu czyta zawsze tylko aktualną wersję. */ .theme-toggle__label--light { display: none; } [data-theme="dark"] .theme-toggle__label--light { display: inline; } [data-theme="dark"] .theme-toggle__label--dark { display: none; } /* ========================================================================== 10. NAGŁÓWEK PORTALU (.masthead) + WYSZUKIWARKA (.search) ========================================================================== */ .masthead { width: 100%; background-color: var(--masthead-bg); border-bottom: 1px solid var(--hairline); } .masthead__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap); padding-block: calc(var(--gap) * 0.85); } .masthead__brand { display: flex; flex: 0 1 auto; align-items: center; gap: 1.25rem; min-width: 0; min-height: 44px; color: var(--color-text); } @media (max-width: 768px) { .masthead__brand { flex: 1 1 100%; gap: 0.9rem; } } .masthead__logo-link { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--color-text); text-decoration: none; } .masthead__logo-link:hover .masthead__logo { box-shadow: var(--box-shadow-hover); } /* Godło IPN jest ciemną grafiką (#1d1d1b) — w motywie ciemnym umieszczamy je na białej płytce, aby znak pozostał czytelny (WCAG 1.4.11). */ [data-theme="dark"] .masthead__logo-link { padding: 0.35rem 0.5rem; background-color: var(--color-white); } .masthead__logo { display: block; flex: 0 0 auto; width: auto; height: var(--logo-height); max-height: var(--logo-height); } .masthead__brand-text { display: flex; flex-direction: column; min-width: 0; gap: 0.15rem; } .masthead__portal { display: block; margin: 0; font-family: var(--font-header); font-size: clamp(1.15rem, 1rem + 0.9vw, 1.6rem); font-weight: 700; line-height: 1.2; color: var(--color-text); } .masthead__tagline { display: block; margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--text-muted); } /* Wyszukiwarka — formularz z jawną etykietą .sr-only i widocznym przyciskiem */ .search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; width: 100%; max-width: 26rem; margin: 0; } .search .search__input { flex: 1 1 12rem; min-width: 0; } /* ========================================================================== 11. NAWIGACJA GŁÓWNA (.nav) + WARIANT MOBILNY -------------------------------------------------------------------------- Desktop: pełna lista pozioma (bez JS). Mobile: lista zwijana przyciskiem .nav__toggle z aria-expanded (ipn-a11y.js). Gdy JS jest wyłączony, na nie ma klasy .js i lista pozostaje w pełni widoczna i dostępna (progressive enhancement). ========================================================================== */ .nav { position: relative; width: 100%; background-color: var(--nav-bg); color: var(--nav-text); border-bottom: 4px solid var(--nav-border); } /* Przyklejony pasek nawigacji tylko na desktopie (na mobile rozwinięte menu bywa wyższe niż viewport — wtedy lepiej pozostawić je w naturalnym przepływie). scroll-padding-top: 6rem na chroni fokus (WCAG 2.4.11). */ @media (min-width: 769px) { .nav { position: sticky; top: 0; z-index: 60; } } .nav__inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } .nav__toggle { display: none; align-items: center; gap: 0.6rem; min-width: 44px; min-height: 44px; margin: 0.5rem 0; padding: 0.4rem 0.9rem; font-family: var(--font); font-size: 1rem; font-weight: 700; color: var(--nav-text); background-color: transparent; border: 2px solid var(--nav-text); border-radius: var(--border-radius-button); cursor: pointer; } .nav__toggle-icon { position: relative; display: block; flex: 0 0 auto; width: 22px; height: 2px; background-color: currentColor; } .nav__toggle-icon::before, .nav__toggle-icon::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background-color: currentColor; } .nav__toggle-icon::before { top: -7px; } .nav__toggle-icon::after { top: 7px; } .nav__toggle[aria-expanded="true"] { color: var(--color-white); background-color: var(--accent-fill); border-color: var(--accent-fill); } .nav__list { display: flex; flex-wrap: wrap; align-items: stretch; margin: 0; padding: 0; list-style: none; } .nav__list > li { margin: 0; padding: 0; } .nav__link { display: flex; align-items: center; min-height: 44px; padding: 0.85rem 0.95rem; font-size: 0.95rem; font-weight: 600; color: var(--nav-text); text-decoration: none; border-bottom: 4px solid transparent; } .nav__link:visited { color: var(--nav-text); } .nav__link:hover, .nav__link:focus { background-color: var(--nav-hover-bg); color: var(--color-white); text-decoration: underline; text-underline-offset: 0.25em; } .nav__link[aria-current="page"] { background-color: var(--nav-hover-bg); border-bottom-color: var(--nav-current); } /* Wariant mobilny — tylko gdy JavaScript jest aktywny */ @media (max-width: 768px) { html.js .nav__list { display: none; width: 100%; border-top: 1px solid var(--footer-hairline); } html.js .nav--open .nav__list { display: flex; flex-direction: column; } html.js .nav__toggle { display: inline-flex; } html.js .nav__list > li { width: 100%; border-bottom: 1px solid var(--footer-hairline); } html.js .nav__list > li:last-child { border-bottom: 0; } html.js .nav__link { width: 100%; padding: 0.85rem 0.15rem; border-bottom: 0; border-left: 4px solid transparent; } html.js .nav__link[aria-current="page"] { background-color: var(--nav-hover-bg); border-left-color: var(--nav-current); } } /* ========================================================================== 12. SEKCJA WYRÓŻNIONA (.featured) + LISTA KOMUNIKATÓW (.newslist) -------------------------------------------------------------------------- Statyczny układ redakcyjny (bez karuzel JS): jeden temat główny + spokojna kolumna komunikatów obok. ========================================================================== */ .featured { position: relative; display: flex; flex-direction: column; height: 100%; background-color: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--box-shadow); } .featured:hover { box-shadow: var(--box-shadow-hover); } .featured__media { margin: 0; overflow: hidden; background-color: var(--color-light-grey); } .featured__image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* ====== Wariant „hero” — wyróżniony temat na tle grafiki ================== Odtwarza zabieg graficzny portalu podziemiezbrojne.ipn.gov.pl: rozmyte tło + przyciemniająca nakładka, na której leży tytuł i lead (biały tekst). Nakładka nie przechwytuje zdarzeń (pointer-events: none), fokus i kliknięcia trafiają do linku rozciągniętego przez ::after. ============================ */ .featured--hero { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; /* Wysokość z treści (nie rozciągamy do wysokości kolumny obok) */ height: auto; min-height: clamp(18rem, 26vw, 24rem); overflow: hidden; background-color: #2d2d2d; border-color: #2d2d2d; } .featured--hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.3) 100%); } .featured__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .featured--hero .featured__body { position: relative; z-index: 2; width: 100%; padding: clamp(1.25rem, 3vw, 2.25rem); } .featured--hero .featured__title { color: var(--color-white); } .featured--hero .featured__link { color: var(--color-white); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.2em; } .featured--hero .featured__link:hover { color: var(--color-yellow); } .featured--hero .featured__lead, .featured--hero .featured__more { color: var(--color-white); } .featured--hero .meta, .featured--hero .meta time { color: var(--color-white); } .featured__body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; } .featured__title { margin: 0; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.85rem); } .featured__link { color: var(--link); text-decoration: none; } .featured__link::after { content: ""; position: absolute; inset: 0; } .featured__link:hover { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.2em; } .featured__lead { margin: 0; font-size: 1.05rem; color: var(--text-body); } .featured__more { margin: 0; font-weight: 700; color: var(--link); } /* Fokus karty przenoszony na całą powierzchnię (link rozciągnięty przez ::after) */ .featured:focus-within, .card:focus-within, .tile:focus-within { outline: 3px solid var(--color-yellow) !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px var(--color-black) !important; } .featured__link:focus-visible, .card__link:focus-visible, .tile__link:focus-visible { outline: none !important; box-shadow: none !important; } /* Lista komunikatów (kolumna boczna sekcji wyróżnionej) */ .newslist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); } .newslist > li { margin: 0; padding: 0.85rem 0; border-bottom: 1px solid var(--hairline); } .newslist time { display: block; margin-bottom: 0.15rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); } .newslist a { display: inline-block; padding-block: 0.15rem; font-size: 0.975rem; font-weight: 600; line-height: 1.4; color: var(--link); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 0.06em; text-underline-offset: 0.2em; } .newslist a:hover, .newslist a:focus { color: var(--link-hover); text-decoration-color: currentColor; } /* ========================================================================== 13. KARTY (.card) — WZORZEC DOSTĘPNEJ KARTY -------------------------------------------------------------------------- Jeden link w nagłówku h3 rozciągnięty na całą kartę przez ::after. Brak duplikacji linków (zdjęcie / tytuł / „czytaj więcej”). ========================================================================== */ .cards { margin: 0; padding: 0; list-style: none; } .cards > li { margin: 0; } .card { position: relative; display: flex; flex-direction: column; height: 100%; background-color: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--box-shadow); transition: box-shadow 0.15s linear; } .card:hover { box-shadow: var(--box-shadow-hover); } .card__media { margin: 0; overflow: hidden; background-color: var(--color-light-grey); } .card__image { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: var(--greyscale--); } .card:hover .card__image { filter: var(--greyscale); } .card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.55rem; padding: 1.15rem 1.25rem 1.35rem; } .card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.85rem; margin: 0; font-size: 0.82rem; color: var(--text-muted); } .card__meta time { font-weight: 600; color: var(--text-muted); } .card__title { margin: 0; font-size: 1.12rem; line-height: 1.35; } .card__link { color: var(--link); } .card__link:hover { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.2em; } .card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .card__lead { margin: 0; font-size: 0.94rem; line-height: 1.55; color: var(--text-body); } .card__more { margin: auto 0 0; padding-top: 0.5rem; font-size: 0.875rem; font-weight: 700; color: var(--link); } /* ========================================================================== 14. KAFLE DZIAŁÓW TEMATYCZNYCH (.tile) ========================================================================== */ .tiles { margin: 0; padding: 0; list-style: none; } .tile { position: relative; display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding: 1.5rem 1.35rem; background-color: var(--card-bg); border: 1px solid var(--card-border); border-top: 4px solid var(--accent-line); box-shadow: var(--box-shadow); } .tile:hover { box-shadow: var(--box-shadow-hover); } .tile__icon { display: block; width: 32px; height: 32px; margin-bottom: 0.25rem; color: var(--link); } .tile__title { margin: 0; font-size: 1.12rem; line-height: 1.35; } .tile__link { color: var(--link); } .tile__link:hover { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.2em; } .tile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .tile__desc { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--text-body); } /* ========================================================================== 15. MULTIMEDIA (.video) + TRANSKRYPCJA ========================================================================== */ .video { margin: 0; } .video__player { display: block; width: var(--video-width); max-width: 100%; max-height: var(--video-height); background-color: #000; border: 1px solid var(--card-border); } .video__caption { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.55; color: var(--text-muted); } .video__caption strong { color: var(--color-text); } .transcript { margin-top: 1rem; } /* ========================================================================== 16. AKORDEON NATYWNY
/ -------------------------------------------------------------------------- Wykorzystuje natywną dostępność znacznika (stan, klawiatura). Nie usuwamy natywnego markera — jest komunikowany przez czytniki ekranu. ========================================================================== */ .accordion { margin: 0 0 0.75rem; background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--border-radius); } .accordion > summary { min-height: 48px; padding: 0.9rem 1.15rem; font-family: var(--font); font-size: 1rem; font-weight: 700; color: var(--color-text); cursor: pointer; } .accordion > summary:hover { background-color: var(--color-light-bg); box-shadow: inset 4px 0 0 var(--link); } .accordion[open] > summary { border-bottom: 1px solid var(--hairline); } .accordion__body { padding: 1rem 1.15rem 1.15rem; } .accordion__body > *:last-child { margin-bottom: 0; } /* ========================================================================== 17. STOPKA INSTYTUCJONALNA (.site-footer) ========================================================================== */ .site-footer { width: 100%; margin-top: var(--gap2); padding-block: var(--gap2) var(--gap); background-color: var(--footer-bg); color: var(--footer-text); font-size: 0.94rem; } .site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--footer-text); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 0.25em; } .site-footer a:hover, .site-footer a:focus { color: var(--band-link-hover); text-decoration-color: currentColor; } .footer__heading { margin: 0 0 0.5rem; font-family: var(--font); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-white); } .footer__nav ul { margin: 0; padding: 0; list-style: none; } .footer__nav li { margin: 0; padding: 0; } .footer__address { font-style: normal; line-height: 1.7; } .footer__address span { display: block; } .footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem var(--gap); margin-top: var(--gap1); padding-top: var(--gap); border-top: 1px solid var(--footer-hairline); font-size: 0.875rem; } .footer__bottom p { margin: 0; } .footer__legal { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; } /* Linki do mediów społecznościowych — ikona + etykieta .sr-only */ .social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; } .social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--footer-hairline); border-radius: var(--border-radius); } .social a:hover { background-color: var(--color-white); color: var(--color-black); border-color: var(--color-white); } .social svg { display: block; width: 22px; height: 22px; } /* ========================================================================== 18. OKRUSZKI CHLEBA (.breadcrumbs) -------------------------------------------------------------------------- Separator rysowany ramką CSS (brak tekstu „/”, który bywa czytany przez SR). ========================================================================== */ .breadcrumbs { padding-block: 0.75rem; font-size: 0.9rem; background-color: var(--page-bg); border-bottom: 1px solid var(--hairline); } .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.35rem; margin: 0; padding: 0; list-style: none; } .breadcrumbs li { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 0; } .breadcrumbs li + li::before { content: ""; display: inline-block; width: 0.45em; height: 0.45em; margin-inline-end: 0.6rem; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(-45deg); } .breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; } .breadcrumbs a:hover, .breadcrumbs a:focus { text-decoration-color: currentColor; } .breadcrumbs [aria-current="page"] { font-weight: 600; color: var(--color-text); } /* ========================================================================== 19. TREŚĆ CMS (.cms-content) ========================================================================== */ .cms-content { font-size: 1.0625rem; line-height: 1.7; color: var(--text-body); } .cms-content > *:first-child { margin-top: 0; } .cms-content h2 { margin: 2.25rem 0 0.85rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--hairline); } .cms-content h3 { margin: 1.75rem 0 0.65rem; } .cms-content h4 { margin: 1.5rem 0 0.5rem; } .cms-content p { margin: 0 0 1.15em; } .cms-content ul, .cms-content ol { margin: 0 0 1.25em; padding-inline-start: 1.6em; } .cms-content li { margin-bottom: 0.45em; } .cms-content li::marker { font-weight: 700; color: var(--accent-line); } .cms-content a { color: var(--link); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.2em; } /* Cytat */ .cms-content blockquote { margin: 0 0 1.5em; padding: 0.75rem 0 0.75rem 1.35rem; font-family: var(--font-header); font-size: 1.125rem; font-style: italic; color: var(--text-body); border-left: 4px solid var(--accent-line); } .cms-content blockquote > *:last-child { margin-bottom: 0; } .cms-content blockquote cite, .cms-content cite { display: block; margin-top: 0.6rem; font-family: var(--font); font-size: 0.9rem; font-style: normal; color: var(--text-muted); } /* Figury i podpisy */ .cms-content figure { margin: 0 0 1.5em; } .cms-content figure img { display: block; width: 100%; height: auto; } .cms-content figcaption { margin-top: 0.6rem; font-size: 0.9rem; line-height: 1.55; color: var(--text-muted); } /* Podkreślenia semantyczne */ .cms-content mark { padding: 0 0.15em; color: var(--color-black); background-color: var(--color-yellow); } .cms-content code, .cms-content kbd { padding: 0.1em 0.35em; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.95em; color: var(--color-text); background-color: var(--color-light-bg); border: 1px solid var(--hairline); } /* ========================================================================== 20. TABELE DANYCH -------------------------------------------------------------------------- Tabela zawsze w kontenerze .table-wrap (overflow-x = WCAG 1.4.10 Reflow), z oraz . ========================================================================== */ .table-wrap { max-width: 100%; margin: 0 0 1.5em; overflow-x: auto; background-color: var(--card-bg); border: 1px solid var(--card-border); } .table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .table-wrap caption { padding: 0.85rem 1rem; caption-side: top; text-align: left; font-family: var(--font); font-size: 0.95rem; font-weight: 700; color: var(--color-text); background-color: var(--color-light-bg); border-bottom: 1px solid var(--card-border); } .table-wrap th, .table-wrap td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--card-border); } .table-wrap thead th { font-weight: 700; color: var(--color-white); background-color: var(--table-head-bg); } .table-wrap tbody th { font-weight: 700; color: var(--color-text); } .table-wrap tbody tr:nth-child(even) { background-color: var(--color-light-bg); } .table-wrap tbody tr:last-child th, .table-wrap tbody tr:last-child td { border-bottom: 0; } /* ========================================================================== 21. PLIKI DO POBRANIA (.downloads) -------------------------------------------------------------------------- Format i rozmiar pliku są częścią treści linku (WCAG 2.4.4, 3.2.4). ========================================================================== */ .downloads { margin: 0; padding: 0; list-style: none; } .downloads > li { margin: 0 0 0.6rem; padding: 0.9rem 1rem; background-color: var(--card-bg); border: 1px solid var(--card-border); border-left: 4px solid var(--link); } .downloads a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 24px; font-weight: 700; color: var(--link); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.2em; } .downloads svg { flex: 0 0 auto; width: 20px; height: 20px; } .downloads__note { display: block; margin-top: 0.25rem; font-size: 0.85rem; color: var(--text-muted); } /* ========================================================================== 22. GALERIA ZDJĘĆ (.gallery) ========================================================================== */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; } .gallery > li { margin: 0; padding: 0; } .gallery figure { height: 100%; margin: 0; background-color: var(--card-bg); border: 1px solid var(--card-border); } .gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .gallery figcaption { padding: 0.6rem 0.75rem; font-size: 0.85rem; line-height: 1.5; color: var(--text-muted); } /* ========================================================================== 23. PANEL BOCZNY (.sidebar) ========================================================================== */ .sidebar__box { margin: 0 0 var(--gap); padding: 1.35rem; background-color: var(--card-bg); border: 1px solid var(--card-border); border-top: 4px solid var(--accent-line); } .sidebar__title { margin: 0 0 0.75rem; font-size: 1.1rem; line-height: 1.3; } .sidebar__box p { margin: 0 0 0.85rem; font-size: 0.94rem; } .sidebar__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); } .sidebar__list > li { margin: 0; padding: 0; border-bottom: 1px solid var(--hairline); } .sidebar__list a { display: flex; align-items: center; min-height: 44px; padding: 0.4rem 0; font-size: 0.95rem; font-weight: 600; color: var(--link); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; } .sidebar__list a:hover, .sidebar__list a:focus { text-decoration-color: currentColor; } .sidebar__list a[aria-current="page"] { padding-inline-start: 0.75rem; color: var(--color-text); box-shadow: inset 3px 0 0 var(--link); } /* Lista powiązanych artykułów (z datą) */ .related { margin: 0; padding: 0; list-style: none; } .related > li { margin: 0; padding: 0.65rem 0; border-bottom: 1px solid var(--hairline); } .related > li:last-child { border-bottom: 0; } .related time { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); } .related a { font-size: 0.95rem; font-weight: 600; line-height: 1.45; color: var(--link); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; } .related a:hover { text-decoration-color: currentColor; } /* ========================================================================== 24. FORMULARZE I FILTRY (.form) -------------------------------------------------------------------------- Każde pole ma jawną etykietę