/* ====== WITRYNA SZKOŁY — wspólny szablon wszystkich serwisów ====== Kolor przewodni przychodzi z ustawień serwisu jako --kolor (inline w ). Zasady dostępności (WCAG 2.1 AA), których pilnuje ten plik: - kontrast tekstu co najmniej 4,5:1 (kolor serwisu sprawdzany przy zapisie, php/kolory.php) - widoczny fokus klawiatury na każdym elemencie interaktywnym - powiększenie tekstu przyciskami A / A+ / A++ (rem, bez sztywnych px w treści) - tryb wysokiego kontrastu (klasa .kontrast na ) - ruch w banerze zatrzymywany przyciskiem i wyłączany przy prefers-reduced-motion */ :root { --kolor: #1b3a6b; --kolor-ciemny: color-mix(in srgb, var(--kolor) 72%, #000); --kolor-jasny: color-mix(in srgb, var(--kolor) 9%, #fff); --akcent: #c2410c; --akcent-jasny: color-mix(in srgb, var(--akcent) 10%, #fff); --akcent-ciemny: color-mix(in srgb, var(--akcent) 78%, #000); --czcionka-naglowkow: var(--czcionka); --tlo: #f5f7fb; --karta: #ffffff; --tekst: #1c2333; --szary: #566074; --linia: #e3e7ef; --promien: 16px; --cien: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .07); --cien-mocny: 0 2px 4px rgba(16, 24, 40, .08), 0 18px 40px rgba(16, 24, 40, .14); --szerokosc: 1200px; --czcionka: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 100%; } html.tekst-duzy { font-size: 112.5%; } html.tekst-bardzo-duzy { font-size: 125%; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* kotwice nie chowają się pod przyklejonym nagłówkiem */ [id] { scroll-margin-top: 110px; } body { margin: 0; font-family: var(--czcionka); font-size: 1rem; line-height: 1.6; color: var(--tekst); background: var(--tlo); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--kolor); text-underline-offset: .18em; } a:hover { color: var(--akcent); } :focus-visible { outline: 3px solid var(--akcent); outline-offset: 3px; border-radius: 4px; } h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .6em; color: var(--tekst); letter-spacing: -.01em; font-family: var(--czcionka-naglowkow); } h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); font-weight: 750; } h2 { font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2rem); font-weight: 720; } h3 { font-size: 1.15rem; font-weight: 680; } .kontener { width: min(100% - 2.5rem, var(--szerokosc)); margin-inline: auto; } [hidden] { display: none !important; } .ukryte { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* link „Przejdź do treści” — pierwszy element dla klawiatury */ .pomin { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--akcent); color: #fff; padding: .7rem 1.1rem; border-radius: 10px; font-weight: 650; text-decoration: none; transition: top .15s; } .pomin:focus { top: 1rem; color: #fff; } /* ---------- górny pasek: kontakt + narzędzia dostępności ---------- */ .gorny-pasek { background: var(--kolor-ciemny); color: #e8edf6; font-size: .86rem; } .gorny-pasek .kontener { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 42px; flex-wrap: wrap; } .gorny-pasek a { color: #fff; text-decoration: none; } .gorny-pasek a:hover { text-decoration: underline; color: #fff; } .pasek-kontakt { display: flex; gap: 1.4rem; flex-wrap: wrap; } .pasek-kontakt span, .pasek-kontakt a { display: inline-flex; align-items: center; gap: .45rem; } .pasek-kontakt svg { width: 15px; height: 15px; opacity: .85; } .narzedzia { display: flex; align-items: center; gap: .35rem; } .narzedzia button, .narzedzia .bip { font: inherit; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: .18rem .55rem; cursor: pointer; line-height: 1.4; } .narzedzia button:hover, .narzedzia .bip:hover { background: rgba(255,255,255,.22); } .narzedzia button[aria-pressed="true"] { background: #fff; color: var(--kolor-ciemny); } .narzedzia .bip { font-weight: 800; letter-spacing: .04em; text-decoration: none; margin-left: .4rem; } .narzedzia .separator { width: 1px; height: 18px; background: rgba(255,255,255,.25); margin: 0 .3rem; } /* ---------- nagłówek z nazwą i menu ---------- */ .naglowek { background: var(--karta); position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 var(--linia), 0 6px 20px rgba(16,24,40,.05); } .naglowek .kontener { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 84px; } .marka { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--tekst); } .marka img { width: 46px; height: auto; } .marka-nazwa { display: flex; flex-direction: column; line-height: 1.15; } .marka-nazwa strong { font-size: 1.12rem; font-weight: 760; color: var(--kolor); letter-spacing: -.01em; } .marka-nazwa small { font-size: .82rem; color: var(--szary); margin-top: .2rem; } .marka:hover { color: var(--tekst); } .menu > ul { list-style: none; display: flex; gap: .15rem; margin: 0; padding: 0; } .menu li { position: relative; } .menu a, .menu .rozwin { display: flex; align-items: center; gap: .3rem; padding: .6rem .8rem; border-radius: 10px; color: var(--tekst); text-decoration: none; font-weight: 600; font-size: .95rem; background: none; border: 0; font-family: inherit; cursor: pointer; } .menu a:hover, .menu .rozwin:hover, .menu li:focus-within > a { background: var(--kolor-jasny); color: var(--kolor); } .menu a[aria-current="page"] { color: var(--kolor); box-shadow: inset 0 -3px 0 var(--akcent); border-radius: 10px 10px 4px 4px; } .menu .strzalka { width: 14px; height: 14px; transition: transform .15s; } .menu .podmenu { list-style: none; margin: 0; padding: .45rem; position: absolute; top: calc(100% + 6px); left: 0; min-width: 270px; background: var(--karta); border-radius: 14px; box-shadow: var(--cien-mocny); border: 1px solid var(--linia); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .15s ease; } .menu li:hover > .podmenu, .menu li:focus-within > .podmenu, .menu li.otwarte > .podmenu { opacity: 1; visibility: visible; transform: none; } .menu li:hover > a .strzalka, .menu li:focus-within > a .strzalka { transform: rotate(180deg); } .menu .podmenu a { font-weight: 500; font-size: .93rem; padding: .55rem .8rem; } .przycisk-menu { display: none; } .rozwin-podmenu { display: none; } .menu a.w-dziale { color: var(--kolor); } /* ---------- baner (pokaz slajdów) ---------- */ .baner { position: relative; background: var(--kolor-ciemny); color: #fff; overflow: hidden; isolation: isolate; } /* slajdy ułożone w jednej komórce siatki: baner ma wysokość NAJWYŻSZEGO slajdu, więc dłuższy tekst na telefonie nie wychodzi pod przyciski sterowania */ .slajdy { display: grid; min-height: clamp(380px, 58vh, 560px); } .slajd { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; } .slajd.aktywny { opacity: 1; visibility: visible; } .slajd img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 7s ease-out; } .slajd.aktywny img { transform: scale(1); } .slajd::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--kolor-ciemny) 94%, transparent) 0%, color-mix(in srgb, var(--kolor-ciemny) 70%, transparent) 45%, color-mix(in srgb, var(--kolor-ciemny) 15%, transparent) 100%), linear-gradient(0deg, rgba(0,0,0,.35), transparent 40%); } /* przyciemnienie wybierane przy slajdzie: ciemne neutralne (zdjęcie bez zabarwienia), lekkie, brak (slajd bez napisów) */ .slajd-cien-ciemne::after { background: linear-gradient(90deg, rgba(8,10,14,.84) 0%, rgba(8,10,14,.6) 45%, rgba(8,10,14,.08) 100%), linear-gradient(0deg, rgba(0,0,0,.35), transparent 40%); } .slajd-cien-lekkie::after { background: linear-gradient(90deg, rgba(8,10,14,.66) 0%, rgba(8,10,14,.46) 42%, transparent 75%), linear-gradient(0deg, rgba(0,0,0,.3), transparent 35%); } .slajd-cien-lekkie .slajd-tresc { text-shadow: 0 1px 14px rgba(0,0,0,.55); } .slajd-cien-brak::after { background: linear-gradient(0deg, rgba(0,0,0,.28), transparent 30%); } .slajd .kontener { position: relative; z-index: 2; height: 100%; } .slajd-tresc { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 3.5rem 0 9.5rem; max-width: 640px; } .slajd-etykieta { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1.1rem; backdrop-filter: blur(6px); } .slajd-etykieta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--akcent) 55%, #fff); } .slajd h2 { color: #fff; font-size: clamp(2rem, 1.2rem + 3vw, 3.3rem); font-weight: 780; margin-bottom: .45em; text-wrap: balance; } .slajd p { font-size: 1.14rem; color: #e6ebf5; margin: 0 0 1.8rem; max-width: 34em; } .przyciski { display: flex; gap: .8rem; flex-wrap: wrap; } .przycisk { display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.35rem; border-radius: 12px; font-weight: 680; text-decoration: none; border: 2px solid transparent; transition: transform .15s, background .15s; font-size: 1rem; } .przycisk svg { width: 18px; height: 18px; } .przycisk:hover { transform: translateY(-1px); } .przycisk-glowny { background: var(--akcent); color: #fff; } .przycisk-glowny:hover { background: var(--akcent-ciemny); color: #fff; } .przycisk-jasny { border-color: rgba(255,255,255,.55); color: #fff; } .przycisk-jasny:hover { background: rgba(255,255,255,.12); color: #fff; } .sterowanie-banera { position: absolute; z-index: 3; left: 0; right: 0; bottom: 5.8rem; } .sterowanie-banera .kontener { display: flex; align-items: center; gap: .6rem; } .kropki { display: flex; gap: .45rem; margin-right: .4rem; } .kropki button { width: 34px; height: 5px; padding: 0; border: 0; border-radius: 3px; background: rgba(255,255,255,.35); cursor: pointer; } .kropki button[aria-current="true"] { background: #fff; } .sterowanie-banera .ster { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.18); color: #fff; cursor: pointer; backdrop-filter: blur(6px); } .sterowanie-banera .ster:hover { background: rgba(255,255,255,.2); } .sterowanie-banera svg { width: 16px; height: 16px; } /* ---------- kafle „na skróty” nachodzące na baner ---------- */ .kafle { position: relative; z-index: 5; margin-top: -4rem; } .kafle ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } .kafel { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.4rem 1.4rem 1.25rem; background: var(--karta); border-radius: var(--promien); box-shadow: var(--cien-mocny); text-decoration: none; color: var(--tekst); border: 1px solid var(--linia); transition: transform .18s, box-shadow .18s; } .kafel:hover { transform: translateY(-4px); color: var(--tekst); box-shadow: 0 4px 8px rgba(16,24,40,.08), 0 24px 48px rgba(16,24,40,.16); } /* kolor kafla: na przemian kolor strony, akcent, zieleń, fiolet (albo jeden kolor — opcja „Kolor ikon”) */ .kafle li { --kafel-kolor: var(--kolor); } .kafle li:nth-child(4n+2) { --kafel-kolor: var(--akcent); } .kafle li:nth-child(4n+3) { --kafel-kolor: #15803d; } .kafle li:nth-child(4n+4) { --kafel-kolor: #6d28d9; } .kafle.kafle-ikony-kolor li { --kafel-kolor: var(--kolor); } .kafle.kafle-ikony-akcent li { --kafel-kolor: var(--akcent); } .kafel { position: relative; overflow: hidden; isolation: isolate; } /* delikatna poświata w kolorze kafla w prawym górnym rogu, rośnie po najechaniu */ .kafel::before { content: ""; position: absolute; z-index: -1; width: 128px; height: 128px; right: -42px; top: -42px; border-radius: 50%; background: var(--kafel-kolor); opacity: .09; transition: transform .35s ease, opacity .35s; } .kafel:hover::before { transform: scale(1.35); opacity: .14; } .kafel:hover { border-color: color-mix(in srgb, var(--kafel-kolor) 45%, var(--linia)); } .kafel-ikona { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: .35rem; background: var(--kolor-jasny); color: var(--kolor); } .kafle .kafel-ikona { background: var(--kafel-kolor); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--kafel-kolor) 32%, transparent); transition: transform .2s; } .kafel:hover .kafel-ikona { transform: rotate(-6deg) scale(1.06); } .kafel-ikona svg { width: 26px; height: 26px; } .kafel-tekst { display: flex; flex-direction: column; gap: .35rem; } .kafel strong { font-size: 1.08rem; font-weight: 700; } .kafel-opis { color: var(--szary); font-size: .92rem; line-height: 1.45; } .kafel .dalej svg { width: 16px; height: 16px; transition: transform .2s; } .kafel .dalej { margin-top: auto; padding-top: .4rem; color: var(--kafel-kolor, var(--kolor)); font-weight: 650; font-size: .9rem; display: inline-flex; align-items: center; gap: .35rem; } .kafel:hover .dalej svg { transform: translateX(4px); } /* ---------- sekcje strony głównej ---------- */ .sekcja { padding: 4.2rem 0 0; } .sekcja:last-of-type { padding-bottom: 4.5rem; } .naglowek-sekcji { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; } .naglowek-sekcji h2 { margin: 0; } .naglowek-sekcji p { margin: .3rem 0 0; color: var(--szary); } .nadtytul { display: block; color: var(--akcent); font-size: .8rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .35rem; } .link-strzalka { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; text-decoration: none; white-space: nowrap; } .link-strzalka svg { width: 17px; height: 17px; transition: transform .15s; } .link-strzalka:hover svg { transform: translateX(3px); } /* komunikat (ogłoszenie przypięte) */ .komunikat { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: 14px; background: var(--akcent-jasny); border: 1px solid color-mix(in srgb, var(--akcent) 30%, #fff); color: color-mix(in srgb, var(--akcent) 55%, #000); margin-top: 2.2rem; } .komunikat svg { width: 24px; height: 24px; flex: none; color: var(--akcent); } .komunikat strong { color: color-mix(in srgb, var(--akcent) 55%, #000); } .komunikat a { color: var(--akcent-ciemny); font-weight: 650; margin-left: auto; white-space: nowrap; } /* aktualności */ .wpisy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; list-style: none; margin: 0; padding: 0; } .wpis { position: relative; display: flex; flex-direction: column; background: var(--karta); border-radius: var(--promien); overflow: hidden; box-shadow: var(--cien); border: 1px solid var(--linia); transition: transform .18s, box-shadow .18s; } .wpis:hover { transform: translateY(-3px); box-shadow: var(--cien-mocny); } .wpis-obraz { aspect-ratio: 16 / 10; overflow: hidden; background: var(--kolor-jasny); } .wpis-obraz img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .wpis:hover .wpis-obraz img { transform: scale(1.04); } .wpis-obraz.bez-zdjecia { display: grid; place-items: center; color: color-mix(in srgb, var(--kolor) 45%, #fff); background: linear-gradient(135deg, var(--kolor-jasny), color-mix(in srgb, var(--kolor) 18%, #fff)); } .wpis-obraz.bez-zdjecia svg { width: 54px; height: 54px; } .wpis-tresc { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .wpis-meta { display: flex; align-items: center; gap: .6rem; font-size: .84rem; color: var(--szary); } .znacznik { display: inline-block; font-size: .72rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 6px; background: var(--akcent-jasny); color: var(--akcent-ciemny); } .wpis h3 { margin: 0; font-size: 1.12rem; } .wpis h3 a { color: var(--tekst); text-decoration: none; } .wpis h3 a::after { content: ""; position: absolute; inset: 0; } /* cała karta klikalna, link jeden */ .wpis h3 a:hover { color: var(--kolor); } .wpis p { margin: 0; color: var(--szary); font-size: .95rem; } /* dwie kolumny: dokumenty + kontakt */ .dwie-kolumny { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.5rem; align-items: start; } .karta { background: var(--karta); border-radius: var(--promien); box-shadow: var(--cien); border: 1px solid var(--linia); padding: 1.6rem; } .karta > h2, .karta > h3 { margin-bottom: 1rem; } .dokumenty { list-style: none; margin: 0; padding: 0; } .dokument { display: flex; align-items: center; gap: 1rem; padding: .9rem .4rem; border-bottom: 1px solid var(--linia); } .dokument:last-child { border-bottom: 0; } .dokument-ikona { flex: none; width: 44px; height: 52px; border-radius: 8px; display: grid; place-items: center; font-size: .66rem; font-weight: 800; color: #fff; background: #dc2626; letter-spacing: .03em; position: relative; } .dokument-ikona.doc { background: #2563eb; } .dokument-ikona.xls { background: #16a34a; } .dokument-ikona.odt { background: #0891b2; } .dokument-opis { flex: 1; min-width: 0; } .dokument-opis a { font-weight: 640; color: var(--tekst); text-decoration: none; } .dokument-opis a:hover { color: var(--kolor); text-decoration: underline; } .dokument-opis small { display: block; color: var(--szary); font-size: .84rem; margin-top: .15rem; } .dokument-numer { font-weight: 700; color: var(--kolor); } .uchylony .dokument-opis a { color: var(--szary); } .uchylony .znacznik { background: #f1f2f5; color: #545c6b; } .kontakt-karta { background: linear-gradient(160deg, var(--kolor) 0%, var(--kolor-ciemny) 100%); color: #eaf0f9; border: 0; position: relative; overflow: hidden; } .kontakt-karta::before { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -90px; border-radius: 50%; background: rgba(255,255,255,.07); } .kontakt-karta h2, .kontakt-karta h3 { color: #fff; } .kontakt-karta a { color: #fff; } .kontakt-lista { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .95rem; position: relative; } .kontakt-lista li { display: flex; gap: .8rem; align-items: flex-start; } .kontakt-lista svg { width: 20px; height: 20px; flex: none; margin-top: .15rem; opacity: .9; } .kontakt-lista small { display: block; color: #b9c6dc; font-size: .8rem; } .kontakt-karta .przycisk { background: #fff; color: var(--kolor-ciemny); } .kontakt-karta .przycisk:hover { background: var(--akcent-jasny); } .karta-ochrona { margin-top: 1.5rem; display: flex; gap: 1rem; align-items: center; } .karta-ochrona .kafel-ikona { flex: none; margin: 0; background: #e8f6ee; color: #15803d; } .karta-ochrona strong { display: block; } .karta-ochrona span { color: var(--szary); font-size: .9rem; } /* galeria (zapowiedź na stronie głównej) */ .galeria-pasek { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 190px 190px; gap: .9rem; } .galeria-pasek a { position: relative; border-radius: 14px; overflow: hidden; display: block; } .galeria-pasek a:first-child { grid-row: span 2; } .galeria-pasek img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .galeria-pasek a:hover img { transform: scale(1.05); } .galeria-pasek span { position: absolute; left: .8rem; bottom: .8rem; background: rgba(12,20,38,.72); color: #fff; font-size: .85rem; font-weight: 600; padding: .3rem .7rem; border-radius: 8px; backdrop-filter: blur(4px); } /* boksy partnerów / reklamy */ .partnerzy { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; list-style: none; margin: 0; padding: 0; } .partnerzy a, .partnerzy div { height: 92px; display: grid; place-items: center; text-align: center; padding: .8rem; background: var(--karta); border: 1px solid var(--linia); border-radius: 14px; color: var(--szary); font-weight: 650; font-size: .88rem; text-decoration: none; transition: border-color .15s, box-shadow .15s; } .partnerzy a:hover { border-color: var(--kolor); box-shadow: var(--cien); } /* ---------- stopka ---------- */ .stopka { background: #0f1b31; color: #c7d0e0; margin-top: 4.5rem; font-size: .95rem; } .stopka-gora { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding: 3.6rem 0 2.6rem; } .stopka h2 { color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: .02em; margin-bottom: 1rem; } .stopka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .stopka a { color: #dfe6f2; text-decoration: none; } .stopka a:hover { color: #fff; text-decoration: underline; } .stopka .marka strong { color: #fff; } .stopka .marka small { color: #9fb0c9; } .stopka address { font-style: normal; margin-top: 1.1rem; line-height: 1.75; } .stopka-dol { border-top: 1px solid rgba(255,255,255,.1); } .stopka-dol .kontener { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.2rem 0; font-size: .85rem; color: #93a2ba; } .stopka-dol a { color: #b9c6dc; } /* ---------- podstrony ---------- */ .okruszki { font-size: .88rem; color: var(--szary); padding: 1.3rem 0 0; } .okruszki ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; } .okruszki li + li::before { content: "›"; margin-right: .4rem; color: #9aa3b5; } .okruszki a { color: var(--szary); } .naglowek-strony { background: linear-gradient(135deg, var(--kolor) 0%, var(--kolor-ciemny) 100%); color: #fff; padding: 2.6rem 0 2.8rem; position: relative; overflow: hidden; } .naglowek-strony::after { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -200px; border-radius: 50%; background: rgba(255,255,255,.06); } .naglowek-strony h1 { color: #fff; margin: 0; position: relative; } .naglowek-strony .okruszki { padding: 0 0 .9rem; color: #c9d4e6; position: relative; } .naglowek-strony .okruszki a { color: #e3e9f4; } /* baner strony: zdjęcie w pasku tytułu podstrony (php/baner-strony.php). Zdjęcie (::before) pod mocnym przyciemnieniem (::after), tytuł nad nimi — biały napis zawsze czytelny. */ .naglowek-strony.z-banerem { background: var(--kolor-ciemny); isolation: isolate; } .naglowek-strony.z-banerem::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--baner-obraz) var(--baner-x, 50%) var(--baner-y, 50%) / cover no-repeat; } .naglowek-strony.z-banerem::after { width: auto; height: auto; border-radius: 0; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } .naglowek-strony.z-banerem > .kontener { position: relative; z-index: 2; } .baner-cien-kolor::after { background: linear-gradient(90deg, color-mix(in srgb, var(--kolor-ciemny) 94%, transparent) 0%, color-mix(in srgb, var(--kolor-ciemny) 78%, transparent) 55%, color-mix(in srgb, var(--kolor-ciemny) 62%, transparent) 100%); } .baner-cien-ciemne::after { background: linear-gradient(90deg, rgba(8,10,14,.84) 0%, rgba(8,10,14,.66) 55%, rgba(8,10,14,.55) 100%); } .naglowek-strony.baner-niski { padding: 3.2rem 0 3.4rem; } .naglowek-strony.baner-wysoki { display: flex; align-items: flex-end; min-height: clamp(240px, 30vw, 420px); padding: 3rem 0 2.8rem; } .naglowek-strony.baner-wysoki h1 { font-size: clamp(2rem, 4vw, 3rem); } .podpis-strony { position: relative; margin: .55rem 0 0; max-width: 62ch; color: #eef2f8; font-size: 1.12rem; line-height: 1.5; } html.kontrast .naglowek-strony.z-banerem::before, html.kontrast .naglowek-strony.z-banerem::after { display: none; } .uklad-strony { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; padding: 2.4rem 0 1rem; align-items: start; } .tresc { background: var(--karta); border-radius: var(--promien); border: 1px solid var(--linia); box-shadow: var(--cien); padding: clamp(1.4rem, 1rem + 2vw, 2.6rem); font-size: 1.04rem; } .tresc > :first-child { margin-top: 0; } .tresc h2 { font-size: 1.5rem; margin-top: 1.6em; } .tresc h3 { font-size: 1.2rem; margin-top: 1.4em; } .tresc img { border-radius: 12px; margin: 1.2rem 0; } .tresc table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .95rem; display: block; overflow-x: auto; } .tresc th, .tresc td { border: 1px solid var(--linia); padding: .6rem .8rem; text-align: left; vertical-align: top; } .tresc th { background: var(--kolor-jasny); } .tresc blockquote { margin: 1.2rem 0; padding: .8rem 1.2rem; border-left: 4px solid var(--akcent); background: var(--akcent-jasny); border-radius: 0 10px 10px 0; } /* klocki edytora: kolumny, przycisk, położenie i rozmiar zdjęcia, film (klasy z HTML_KLASY w php/html.php) */ .tresc .kolumny-2, .tresc .kolumny-3 { display: grid; gap: 1.6rem; margin: 1.2rem 0; } .tresc .kolumny-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tresc .kolumny-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tresc .kolumna > :first-child { margin-top: 0; } .tresc .kolumna > :last-child { margin-bottom: 0; } .tresc .kolumna img { margin: .4rem 0; } .tresc a.przycisk-tresc { display: inline-flex; align-items: center; padding: .75rem 1.3rem; border-radius: 12px; background: var(--akcent); color: #fff; font-weight: 680; text-decoration: none; margin: .3rem .4rem .3rem 0; } .tresc a.przycisk-tresc:hover { background: var(--akcent-ciemny); color: #fff; } .tresc img.obraz-lewo { float: left; margin: .3rem 1.4rem 1rem 0; max-width: 50%; } .tresc img.obraz-prawo { float: right; margin: .3rem 0 1rem 1.4rem; max-width: 50%; } .tresc img.obraz-srodek { display: block; margin-left: auto; margin-right: auto; } .tresc img.obraz-maly { width: 240px; } .tresc img.obraz-sredni { width: 440px; } .tresc h2, .tresc h3, .tresc .kolumny-2, .tresc .kolumny-3, .tresc table, .tresc .film { clear: both; } .tresc::after { content: ""; display: block; clear: both; } .tresc a.film-youtube { display: inline-block; margin: .6rem 0; } .film { position: relative; aspect-ratio: 16 / 9; max-width: 820px; margin: 1.2rem 0; border-radius: var(--promien); overflow: hidden; background: var(--kolor-ciemny); } .film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .film-start { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1.2rem; border: 0; cursor: pointer; color: #fff; font: inherit; text-align: center; background: linear-gradient(135deg, var(--kolor-ciemny), var(--kolor)); } .film-start .film-ikona { width: 74px; height: 74px; border-radius: 50%; background: var(--akcent); display: grid; place-items: center; transition: transform .15s; } .film-start .film-ikona svg { width: 30px; height: 30px; margin-left: 5px; } .film-start:hover .film-ikona, .film-start:focus-visible .film-ikona { transform: scale(1.08); } .film-start strong { font-size: 1.15rem; max-width: 30em; } .film-start small { color: #dfe6f3; font-size: .85rem; } .boczne-menu { position: sticky; top: 110px; } .boczne-menu h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--szary); margin: 0 0 .8rem; } .boczne-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; } .boczne-menu a { display: block; padding: .6rem .85rem; border-radius: 10px; text-decoration: none; color: var(--tekst); font-weight: 560; } .boczne-menu a:hover { background: var(--kolor-jasny); color: var(--kolor); } .boczne-menu a[aria-current="page"] { background: var(--kolor); color: #fff; } .data-zmiany { color: var(--szary); font-size: .85rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linia); } .filtry { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.2rem; } .filtry a { padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--linia); text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--tekst); background: var(--karta); } .filtry a[aria-current="true"] { background: var(--kolor); border-color: var(--kolor); color: #fff; } .stronicowanie { display: flex; justify-content: center; gap: .4rem; margin: 2rem 0 0; } .stronicowanie a, .stronicowanie span { min-width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--linia); background: var(--karta); text-decoration: none; font-weight: 650; } .stronicowanie span[aria-current] { background: var(--kolor); color: #fff; border-color: var(--kolor); } .pusto { color: var(--szary); padding: 1rem 0; } .obraz-wpisu { border-radius: var(--promien); overflow: hidden; margin-bottom: 1.6rem; } /* ---------- elementy dołożone w szablonach PHP ---------- */ .pasek-podgladu { background: #facc15; color: #422006; text-align: center; font-weight: 650; font-size: .9rem; padding: .45rem 1rem; } .naglowek-glowny p { color: #d7e0ee; margin: .4rem 0 0; position: relative; } .kafle-bez-banera { margin-top: 2.4rem; } .sekcja-lista { padding: 2.4rem 0 1rem; } .uklad-pojedynczy { max-width: 900px; padding: 2.4rem 0 1rem; } /* ====== tło ze zdjęciem (Wygląd → Tło strony) ====== Za stroną: zdjęcie przygaszone kolorem tła, a treść na półprzezroczystych panelach (92% bieli + rozmycie), więc tekst ma ten sam kontrast co na jednolitym tle, niezależnie od zdjęcia. W paskach tytułów: zdjęcie pod kolorem przewodnim, po stronie tytułu prawie kryjącym (biały tekst). */ html.tlo-za-strona { --tlo-krycie: 80%; --szklo: color-mix(in srgb, #fff 92%, transparent); background: var(--tlo); } html.tlo-za-strona.tlo-lekkie { --tlo-krycie: 90%; } html.tlo-za-strona.tlo-wyrazne { --tlo-krycie: 62%; } html.tlo-za-strona body { background: transparent; } html.tlo-za-strona body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(color-mix(in srgb, var(--tlo) var(--tlo-krycie), transparent), color-mix(in srgb, var(--tlo) var(--tlo-krycie), transparent)), var(--tlo-obraz) center / cover no-repeat; } /* tło jednej strony albo wpisu (php/tlo-strony.php): zdjęcie z filtrami osobno, warstwa koloru tła nad nim — filtr jasności nie zmienia koloru warstwy, a rozmyte brzegi są schowane poza ekranem */ html.tlo-wlasne body::before { inset: calc(var(--tlo-rozmycie, 0px) * -2); background: var(--tlo-obraz) var(--tlo-x, 50%) var(--tlo-y, 50%) / cover no-repeat; filter: brightness(var(--tlo-jasnosc, 1)) blur(var(--tlo-rozmycie, 0px)) grayscale(var(--tlo-szarosc, 0)); } html.tlo-wlasne body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: color-mix(in srgb, var(--tlo) var(--tlo-krycie), transparent); } html.kontrast.tlo-wlasne body::before, html.kontrast.tlo-wlasne body::after { display: none; } html.tlo-za-strona .sekcja > .kontener, html.tlo-za-strona .sekcja-lista, html.tlo-za-strona .boczne-menu { background: var(--szklo); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: calc(var(--promien) + 6px); box-shadow: 0 10px 30px rgba(15, 27, 49, .08); } html.tlo-za-strona .sekcja > .kontener, html.tlo-za-strona .sekcja-lista { padding: 1.8rem clamp(1rem, 2.5vw, 2.2rem) 2rem; } html.tlo-za-strona .boczne-menu { padding: 1.1rem; } html.tlo-za-strona .sekcja { padding-top: 2.4rem; } html.tlo-za-strona .sekcja:last-of-type { padding-bottom: 3rem; } html.tlo-naglowki .naglowek-strony { background: linear-gradient(100deg, color-mix(in srgb, var(--kolor-ciemny) 94%, transparent) 0%, color-mix(in srgb, var(--kolor) 82%, transparent) 50%, color-mix(in srgb, var(--kolor) 40%, transparent) 100%), var(--tlo-obraz) center 40% / cover no-repeat; } html.tlo-naglowki:not(.stopka-jasna) .stopka { background: linear-gradient(rgba(15, 27, 49, .93), rgba(15, 27, 49, .93)), var(--tlo-obraz) center / cover no-repeat; } @media (max-width: 700px) { /* na telefonie tytuł zajmuje całą szerokość — przyciemnienie równe */ html.tlo-naglowki .naglowek-strony { background: linear-gradient(color-mix(in srgb, var(--kolor-ciemny) 88%, transparent), color-mix(in srgb, var(--kolor-ciemny) 88%, transparent)), var(--tlo-obraz) center / cover no-repeat; } } html.kontrast body::before { display: none; } html.kontrast .sekcja > .kontener, html.kontrast .sekcja-lista, html.kontrast .boczne-menu { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } html.kontrast .naglowek-strony, html.kontrast .stopka { background: #000; } /* sekcje dodane pod treścią podstrony (bloki z miejscem „strona”) */ .sekcje-strony { padding-bottom: 3rem; } .sekcje-strony .sekcja { padding-top: 2.2rem; } .sekcje-strony .sekcja:last-of-type { padding-bottom: 0; } .sekcje-strony .kafle-bez-banera { margin-top: 1.6rem; } .wstep { margin-bottom: 1.6rem; } .tresc .wstep > :last-child { margin-bottom: 0; } .grupa-dokumentow { font-size: 1.15rem; margin: 1.8rem 0 .4rem; padding-bottom: .4rem; border-bottom: 2px solid var(--kolor-jasny); } .grupa-dokumentow:first-of-type { margin-top: .6rem; } .archiwum-info { background: var(--kolor-jasny); border-radius: 10px; padding: .7rem 1rem; font-size: .92rem; } .tresc .dokumenty { margin: 0; padding: 0; } .tresc .dokument small + small { margin-top: .2rem; } .partnerzy .z-grafika { background: #fff; padding: .6rem; } .partnerzy img { max-height: 70px; width: auto; object-fit: contain; } .kontakt-samodzielny { max-width: 560px; } .wpis-meta time { white-space: nowrap; } .stopka-kol-1 { grid-template-columns: 1fr; } .stopka-kol-2 { grid-template-columns: 1.4fr 1fr; } .stopka-kol-3 { grid-template-columns: 1.4fr 1fr 1fr; } .stopka-kol-5 { grid-template-columns: 1.4fr repeat(4, 1fr); } .stopka-kol-6 { grid-template-columns: repeat(3, 1fr); } /* ---------- galeria ---------- */ .uklad-szeroki { max-width: var(--szerokosc); } .galeria-siatka { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; } .galeria-siatka li { display: flex; flex-direction: column; gap: .35rem; } .galeria-siatka a { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--kolor-jasny); } .galeria-siatka img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .galeria-siatka a:hover img { transform: scale(1.04); } .galeria-podpis { font-size: .88rem; color: var(--szary); } /* zdjęcia w siatkach nie dziedziczą marginesu i zaokrągleń obrazków z treści */ .tresc .galeria-siatka img, .tresc .wpis-obraz img, .tresc .galeria-pasek img { margin: 0; border-radius: 0; } .galeria-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 190px 190px; } .galeria-4 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 190px 190px; } .galeria-4 a:nth-child(4) { grid-column: 2 / span 2; } .galeria-1, .galeria-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 300px; } .galeria-1 a:first-child, .galeria-2 a:first-child { grid-row: auto; } .lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(8, 12, 22, .94); display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 3.5rem 4.5rem 1.2rem; } .lightbox img { max-width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .lightbox-opis { color: #e5e9f2; text-align: center; font-size: .95rem; padding-top: .8rem; min-height: 2.4rem; } .lightbox-opis small { display: block; color: #9aa6bd; margin-top: .2rem; } .lightbox button { position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 1.6rem; line-height: 1; } .lightbox button:hover { background: rgba(255,255,255,.25); } .lightbox .lb-zamknij { top: 1rem; right: 1rem; } .lightbox .lb-wstecz { left: 1rem; top: 50%; transform: translateY(-50%); } .lightbox .lb-dalej { right: 1rem; top: 50%; transform: translateY(-50%); } body.bez-przewijania { overflow: hidden; } @media (max-width: 640px) { .lightbox { padding: 3.5rem .6rem 1rem; } .lightbox .lb-wstecz, .lightbox .lb-dalej { top: auto; bottom: 1rem; transform: none; } .galeria-3, .galeria-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 140px 140px; } .galeria-3 a:first-child, .galeria-4 a:first-child { grid-column: span 2; grid-row: auto; } .galeria-4 a:nth-child(4) { grid-column: auto; } } /* ---------- ustawienia wyglądu (php/wyglad.php → klasy na ) ---------- */ /* menu boczne: pionowa lista obok treści, jak na dotychczasowej stronie */ .uklad-menu-bok { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 2rem; align-items: start; padding: 2rem 0 0; } .kolumna-menu { position: sticky; top: 104px; } .menu-pionowe > ul { flex-direction: column; gap: 0; background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien); box-shadow: var(--cien); padding: .45rem; } .menu-pionowe > ul > li { border-bottom: 1px solid var(--linia); } .menu-pionowe > ul > li:last-child { border-bottom: 0; } .menu-pionowe a { padding: .75rem .85rem; font-size: .97rem; line-height: 1.35; } .menu-pionowe a[aria-current="page"] { background: var(--kolor); color: #fff; box-shadow: none; border-radius: 10px; } .menu-pionowe a[aria-current="page"]:hover { color: #fff; background: var(--kolor); } .menu-pionowe .ma-podmenu { display: grid; grid-template-columns: 1fr auto; align-items: center; } .menu-pionowe .ma-podmenu > .podmenu { grid-column: 1 / -1; } .menu-pionowe .podmenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 .4rem .9rem; min-width: 0; display: none; } .menu-pionowe li.otwarte > .podmenu { display: block; } .menu-pionowe .rozwin-podmenu { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--szary); cursor: pointer; } .menu-pionowe .rozwin-podmenu:hover { background: var(--kolor-jasny); } .menu-pionowe .rozwin-podmenu svg { width: 16px; height: 16px; transition: transform .15s; } .menu-pionowe .rozwin-podmenu[aria-expanded="true"] svg { transform: rotate(180deg); } .kolumna-tresci { min-width: 0; } .kolumna-tresci .kontener { width: 100%; } .kolumna-tresci .baner { border-radius: var(--promien); } .kolumna-tresci .baner .kontener { padding: 0 2.2rem; } .kolumna-tresci .kafle .kontener { padding: 0 1.2rem; } .kolumna-tresci .kafle ul { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .kolumna-tresci .kafle-bez-banera { margin-top: 1rem; } .kolumna-tresci .kafle-bez-banera .kontener { padding: 0; } /* opcje sekcji kafli (Edycja sekcji → Wygląd kafli): liczba kolumn, rozmiar, kolor ikon */ .kafle.kafle-kol-2 ul { grid-template-columns: repeat(2, 1fr); } .kafle.kafle-kol-3 ul { grid-template-columns: repeat(3, 1fr); } .kafle.kafle-kol-4 ul { grid-template-columns: repeat(4, 1fr); } .kafle-kompaktowe .kafel { flex-direction: row; align-items: center; gap: .9rem; padding: .9rem 1.1rem; } .kafle-kompaktowe .kafel-ikona { width: 42px; height: 42px; border-radius: 12px; margin: 0; flex: none; } .kafle-kompaktowe .kafel-ikona svg { width: 21px; height: 21px; } .kafle-kompaktowe .kafel strong { font-size: 1rem; } .kafle-kompaktowe .kafel-opis { font-size: .85rem; } .kafle-kompaktowe .kafel .dalej { margin: 0 0 0 auto; padding: 0; font-size: 0; } /* sama strzałka, napis dla czytnika w tytule linku */ .kafle-kompaktowe .kafel .dalej svg { width: 18px; height: 18px; } .kafle-duze .kafel { padding: 1.9rem 1.8rem 1.6rem; gap: .7rem; min-height: 230px; } .kafle-duze .kafel-ikona { width: 64px; height: 64px; border-radius: 18px; } .kafle-duze .kafel-ikona svg { width: 32px; height: 32px; } .kafle-duze .kafel strong { font-size: 1.3rem; } .kafle-duze .kafel-opis { font-size: 1rem; } .kolumna-tresci .naglowek-strony { border-radius: var(--promien); padding: 2rem 2.2rem 2.2rem; } .kolumna-tresci .naglowek-strony .kontener { width: 100%; } .kolumna-tresci .uklad-pojedynczy { max-width: none; padding-top: 1.5rem; } .kolumna-tresci .sekcja:first-child { padding-top: 0; } .kolumna-tresci .komunikat { margin-top: 1.6rem; } .kolumna-tresci .wpisy { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .menu-bok .stopka { margin-top: 3.5rem; } /* logo (herb i nazwa) po prawej stronie nagłówka */ .logo-prawo .naglowek .kontener { flex-direction: row-reverse; } .logo-prawo .marka { flex-direction: row-reverse; text-align: right; } .logo-prawo .marka-nazwa { align-items: flex-end; } /* czcionka klasyczna: szeryfowe nagłówki i nazwa */ .czcionka-klasyczna { --czcionka-naglowkow: Georgia, Cambria, "Times New Roman", serif; } .czcionka-klasyczna .marka-nazwa strong, .czcionka-klasyczna .slajd h2 { font-family: var(--czcionka-naglowkow); letter-spacing: 0; } /* proste rogi zamiast zaokrąglonych */ html.rogi-proste { --promien: 4px; } .rogi-proste .przycisk, .rogi-proste .kafel-ikona, .rogi-proste .menu a, .rogi-proste .podmenu, .rogi-proste .komunikat, .rogi-proste .galeria-siatka a, .rogi-proste .galeria-pasek a, .rogi-proste .partnerzy a, .rogi-proste .partnerzy div, .rogi-proste .filtry a, .rogi-proste .stronicowanie a, .rogi-proste .stronicowanie span, .rogi-proste .slajd-etykieta, .rogi-proste .boczne-menu a, .rogi-proste .dokument-ikona, .rogi-proste .tresc img, .rogi-proste .obraz-wpisu, .rogi-proste .narzedzia button, .rogi-proste .narzedzia .bip, .rogi-proste .menu-pionowe a[aria-current="page"] { border-radius: 4px !important; } /* ====== style z ekranu Wygląd i z Szablonów ====== */ /* nagłówek w kolorze przewodnim (kolor ma kontrast ≥ 4,5:1 z bielą — pilnuje serwer) */ html.naglowek-kolor .naglowek { background: var(--kolor); box-shadow: 0 6px 20px rgba(16,24,40,.12); } html.naglowek-kolor .marka, html.naglowek-kolor .marka:hover, html.naglowek-kolor .marka-nazwa strong { color: #fff; } html.naglowek-kolor .marka-nazwa small { color: #e4e9f2; } @media (min-width: 961px) { html.naglowek-kolor .menu:not(.menu-pionowe) > ul > li > a, html.naglowek-kolor .menu:not(.menu-pionowe) > ul > li > .rozwin { color: #fff; } html.naglowek-kolor .menu:not(.menu-pionowe) > ul > li > a:hover, html.naglowek-kolor .menu:not(.menu-pionowe) > ul > li:focus-within > a { background: rgba(255,255,255,.14); color: #fff; } html.naglowek-kolor .menu:not(.menu-pionowe) > ul > li > a[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px 0 #fff; } html.naglowek-kolor .menu:not(.menu-pionowe) > ul > li > a.w-dziale { color: #fff; } } html.naglowek-kolor :focus-visible { outline-color: #fff; } html.naglowek-kolor .menu :focus-visible, html.naglowek-kolor main :focus-visible { outline-color: var(--akcent); } /* sekcje strony głównej: na przemian białe albo każda na karcie */ html.sekcje-naprzemienne .sekcja { padding: 3.6rem 0; } html.sekcje-naprzemienne .sekcja:nth-of-type(odd) { background: var(--karta); } html.sekcje-naprzemienne .sekcja:last-of-type { padding-bottom: 3.6rem; } html.sekcje-karty .sekcja > .kontener { background: var(--karta); border-radius: calc(var(--promien) + 6px); box-shadow: var(--cien); padding: 1.8rem clamp(1rem, 2.5vw, 2.2rem) 2rem; } html.sekcje-karty .sekcja { padding-top: 2.4rem; } html.sekcje-karty .sekcja:last-of-type { padding-bottom: 3rem; } html.sekcje-karty .sekcja > .kontener .tresc { box-shadow: none; border: 0; padding: 0; } /* stopka w kolorze przewodnim albo jasna */ html.stopka-kolor .stopka { background: var(--kolor-ciemny); } html.stopka-jasna .stopka { background: var(--karta); color: var(--tekst); border-top: 1px solid var(--linia); } html.stopka-jasna .stopka h2, html.stopka-jasna .stopka .marka strong { color: var(--kolor); } html.stopka-jasna .stopka a { color: var(--tekst); } html.stopka-jasna .stopka a:hover { color: var(--kolor); } html.stopka-jasna .stopka .marka small, html.stopka-jasna .stopka-dol .kontener { color: var(--szary); } html.stopka-jasna .stopka-dol { border-top-color: var(--linia); } html.stopka-jasna .stopka-dol a { color: var(--kolor); } /* menu wersalikami */ html.menu-wersaliki .menu > ul > li > a, html.menu-wersaliki .menu > ul > li > .rozwin { text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; padding-left: .6rem; padding-right: .6rem; } /* pozycja menu nigdy nie łamie się w środku nazwy — przy ciasnym nagłówku cała pozycja schodzi do drugiego rzędu */ @media (min-width: 961px) { .menu:not(.menu-pionowe) > ul { flex-wrap: wrap; } .menu:not(.menu-pionowe) > ul > li > a { white-space: nowrap; } } /* kompaktowe kafle w wąskiej kolumnie (menu z boku) — szersze kafle, mniej w rzędzie */ .kolumna-tresci .kafle-kompaktowe:not([class*="kafle-kol-"]) ul { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* napis na banerze wyśrodkowany — przyciemnienie równe na całej szerokości, żeby tekst był czytelny także na środku */ html.baner-srodek .slajd-tresc { margin: 0 auto; max-width: 780px; align-items: center; text-align: center; } html.baner-srodek .slajd-etykieta { align-self: center; } html.baner-srodek .slajd p { margin-left: auto; margin-right: auto; } html.baner-srodek .slajd .przyciski { justify-content: center; } html.baner-srodek .sterowanie-banera .kontener { justify-content: center; } html.baner-srodek .slajd::after { background: linear-gradient(color-mix(in srgb, var(--kolor-ciemny) 74%, transparent), color-mix(in srgb, var(--kolor-ciemny) 74%, transparent)); } html.baner-srodek .slajd.slajd-cien-ciemne::after { background: rgba(8,10,14,.64); } html.baner-srodek .slajd.slajd-cien-lekkie::after { background: rgba(8,10,14,.5); } html.baner-srodek .slajd.slajd-cien-brak::after { background: linear-gradient(0deg, rgba(0,0,0,.28), transparent 30%); } /* tytuły sekcji wyśrodkowane, z kreską w kolorze akcentu */ html.naglowki-srodek .naglowek-sekcji { flex-direction: column; align-items: center; text-align: center; } html.naglowki-srodek .naglowek-sekcji h2::after { content: ""; display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--akcent); margin: .75rem auto 0; } /* górny pasek w kolorze akcentu (akcent ma kontrast ≥ 4,5:1 z bielą) */ html.pasek-akcent .gorny-pasek { background: var(--akcent); color: #fff; } /* kolor tła strony (tekst pozostaje ciemny — kontrast jak na tle domyślnym) */ html.tlo-strony-biale { --tlo: #ffffff; } html.tlo-strony-biale.sekcje-naprzemienne .sekcja:nth-of-type(odd) { background: #f4f6fa; } html.tlo-strony-cieple { --tlo: #faf6ee; --linia: #ebe3d4; } html.tlo-strony-kolorowe { --tlo: color-mix(in srgb, var(--kolor) 6%, #fff); } /* szerokość treści */ html.szerokosc-waska { --szerokosc: 1080px; } html.szerokosc-szeroka { --szerokosc: 1380px; } /* wysokość banera */ .baner-niski .slajdy { min-height: clamp(300px, 42vh, 420px); } .baner-niski .slajd-tresc { padding: 2.4rem 0 8.2rem; } .baner-wysoki .slajdy { min-height: clamp(460px, 74vh, 720px); } /* ---------- tryb wysokiego kontrastu ---------- */ html.kontrast { --kolor: #000; --kolor-ciemny: #000; --kolor-jasny: #fff; --akcent: #000; --akcent-jasny: #fff; --tlo: #fff; --szary: #000; --linia: #000; --tekst: #000; } html.kontrast body { background: #fff; } html.kontrast a { color: #000; text-decoration: underline; } html.kontrast .gorny-pasek, html.kontrast .stopka, html.kontrast .naglowek-strony, html.kontrast .kontakt-karta { background: #000; color: #ff0; } html.kontrast .gorny-pasek a, html.kontrast .stopka a, html.kontrast .naglowek-strony h1, html.kontrast .naglowek-strony a, html.kontrast .kontakt-karta a, html.kontrast .kontakt-karta h2 { color: #ff0; } html.kontrast .slajd img { filter: grayscale(1) contrast(1.2); } html.kontrast .slajd::after { background: rgba(0,0,0,.82); } html.kontrast .przycisk-glowny, html.kontrast .kontakt-karta .przycisk { background: #ff0; color: #000; } html.kontrast .kafel, html.kontrast .wpis, html.kontrast .karta, html.kontrast .tresc { border: 2px solid #000; box-shadow: none; } html.kontrast .kafle li { --kafel-kolor: #000; } html.kontrast .kafel::before, html.kontrast .kafel-zdjecie, html.kontrast .kafle-zdjecia .kafel::after { display: none; } html.kontrast .komunikat { background: #fff; border: 2px solid #000; color: #000; } html.kontrast .komunikat strong, html.kontrast .komunikat a { color: #000; } html.kontrast :focus-visible { outline-color: #000; outline-width: 4px; } /* ---------- ruch ---------- */ @media (max-width: 700px) { .tresc .kolumny-2, .tresc .kolumny-3 { grid-template-columns: 1fr; } .tresc img.obraz-lewo, .tresc img.obraz-prawo { float: none; margin: 1rem 0; max-width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ---------- ekrany węższe ---------- */ @media (max-width: 1080px) { .kafle ul { grid-template-columns: repeat(2, 1fr); } .wpisy { grid-template-columns: repeat(2, 1fr); } .stopka-gora { grid-template-columns: 1fr 1fr; } .partnerzy { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 960px) { .przycisk-menu { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-weight: 650; padding: .6rem .9rem; border-radius: 10px; border: 1px solid var(--linia); background: var(--karta); color: var(--tekst); cursor: pointer; } .przycisk-menu svg { width: 20px; height: 20px; } .menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--karta); border-top: 1px solid var(--linia); box-shadow: var(--cien-mocny); display: none; max-height: calc(100vh - 84px); overflow: auto; } .menu.otwarte { display: block; } .menu > ul { flex-direction: column; padding: .8rem 1.25rem 1.2rem; } .menu .podmenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 1rem; min-width: 0; display: none; } .menu li.otwarte > .podmenu { display: block; } .menu .ma-podmenu { display: grid; grid-template-columns: 1fr auto; align-items: center; } .menu .ma-podmenu > .podmenu { grid-column: 1 / -1; } .menu .ma-podmenu > a .strzalka { display: none; } .rozwin-podmenu { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--linia); border-radius: 10px; background: var(--karta); color: var(--tekst); cursor: pointer; } .rozwin-podmenu svg { width: 18px; height: 18px; transition: transform .15s; } .rozwin-podmenu[aria-expanded="true"] svg { transform: rotate(180deg); } .dwie-kolumny, .uklad-strony { grid-template-columns: 1fr; } .boczne-menu { position: static; } .galeria-pasek { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 150px 150px; } .galeria-pasek a:first-child { grid-column: span 2; grid-row: auto; } } @media (max-width: 960px) { .uklad-menu-bok { grid-template-columns: 1fr; gap: 0; padding-top: 0; } .kolumna-menu { position: static; } .menu.menu-pionowe { position: static; box-shadow: none; border: 0; max-height: none; background: none; margin: 1rem 0 0; } .menu.menu-pionowe > ul { padding: .45rem; } .kolumna-tresci .baner, .kolumna-tresci .naglowek-strony { margin-top: 1rem; } } @media (max-width: 640px) { .kafle ul, .wpisy { grid-template-columns: 1fr; } .kolumna-tresci .baner .kontener { padding: 0 1.1rem; } .kolumna-tresci .naglowek-strony { padding: 1.4rem 1.2rem; } .kafle { margin-top: -3rem; } .stopka-gora { grid-template-columns: 1fr; } .partnerzy { grid-template-columns: repeat(2, 1fr); } .pasek-kontakt .opcjonalne { display: none; } .marka-nazwa small { display: none; } .komunikat { flex-wrap: wrap; } .komunikat a { margin-left: 0; } } /* kafle pełne w kolorze strony i akcentu, biały tekst */ .kafle.kafle-kolorowe .kafel { background: linear-gradient(145deg, var(--kafel-kolor), color-mix(in srgb, var(--kafel-kolor) 78%, #000)); border-color: transparent; color: #fff; } .kafle.kafle-kolorowe .kafel strong, .kafle.kafle-kolorowe .kafel-opis, .kafle.kafle-kolorowe .kafel .dalej { color: #fff; } .kafle.kafle-kolorowe .kafel .kafel-ikona { background: rgba(255,255,255,.18); color: #fff; box-shadow: none; } .kafle.kafle-kolorowe .kafel:hover { color: #fff; } .kafle.kafle-kolorowe .kafel:hover .dalej { color: #fff; text-decoration: underline; } .kafle.kafle-kolorowe .kafel:focus-visible { outline-color: var(--tekst); } /* kafle białe z paskiem koloru u góry (na przemian kolor strony i akcent) */ .kafle.kafle-obrys .kafel { border-top: 4px solid var(--kafel-kolor); } /* pas tła pod sekcją kafli: jasny odcień, kolor strony albo przyciemnione zdjęcie; kafle stoją na nim, pod banerem */ .kafle.kafle-tlo { margin-top: 0; padding: 2.8rem 0; } .kafle.kafle-tlo-jasne { background: var(--kolor-jasny); } .kafle.kafle-tlo-kolor { background: linear-gradient(135deg, var(--kolor), var(--kolor-ciemny)); } .kafle.kafle-tlo-zdjecie { background: linear-gradient(rgba(8,10,14,.5), rgba(8,10,14,.5)), var(--kafle-tlo) center / cover no-repeat; } .kafle.kafle-tlo-kolor .kafel, .kafle.kafle-tlo-zdjecie .kafel { box-shadow: 0 10px 30px rgba(0,0,0,.25); } .sekcje-strony .kafle.kafle-tlo { margin-top: 1.6rem; } .kolumna-tresci .kafle.kafle-tlo { border-radius: var(--promien); padding: 1.6rem 0; } .kolumna-tresci .kafle.kafle-tlo .kontener { padding: 0 1.2rem; } html.kontrast .kafle.kafle-tlo { background: #fff; } /* zdjęcie kafla w pozostałych stylach: u góry karty, ikona jako plakietka na krawędzi zdjęcia */ .kafle:not(.kafle-zdjecia) .kafel.ma-zdjecie { --kafel-foto: 150px; } .kafle-duze:not(.kafle-zdjecia) .kafel.ma-zdjecie { --kafel-foto: 190px; } .kafle:not(.kafle-zdjecia) .kafel.ma-zdjecie .kafel-zdjecie { position: relative; inset: auto; z-index: 0; display: block; width: calc(100% + 2.8rem); max-width: none; height: var(--kafel-foto); margin: -1.4rem -1.4rem 1.6rem; object-fit: cover; transition: transform .5s; } .kafle-duze:not(.kafle-zdjecia) .kafel.ma-zdjecie .kafel-zdjecie { width: calc(100% + 3.6rem); margin: -1.9rem -1.8rem 1.6rem; } .kafle.kafle-obrys .kafel.ma-zdjecie .kafel-zdjecie { margin-top: -1.4rem; } .kafle:not(.kafle-zdjecia) .kafel.ma-zdjecie .kafel-ikona { position: absolute; top: calc(var(--kafel-foto) - 25px); left: 1.4rem; margin: 0; box-shadow: 0 0 0 4px var(--karta), 0 6px 14px rgba(0,0,0,.18); } .kafle-kolorowe:not(.kafle-zdjecia) .kafel.ma-zdjecie .kafel-ikona { box-shadow: 0 0 0 4px var(--kafel-kolor); background: var(--kafel-kolor); } .kafle:not(.kafle-zdjecia) .kafel.ma-zdjecie:hover .kafel-zdjecie { transform: scale(1.04); } .kafle:not(.kafle-zdjecia) .kafel.ma-zdjecie::before { display: none; } /* kompaktowe: małe zdjęcie zamiast ikony */ .kafle-kompaktowe:not(.kafle-zdjecia) .kafel.ma-zdjecie .kafel-zdjecie { width: 56px; height: 56px; margin: 0; border-radius: 12px; flex: none; } .kafle-kompaktowe:not(.kafle-zdjecia) .kafel.ma-zdjecie .kafel-ikona { display: none; } .kafle-kompaktowe:not(.kafle-zdjecia) .kafel.ma-zdjecie:hover .kafel-zdjecie { transform: none; } .rogi-proste .kafle-kompaktowe .kafel-zdjecie { border-radius: 4px; } /* kafle ze zdjęciami: zdjęcie w tle, tytuł na przyciemnionym dole (biały tekst na ≥ 80% czerni — czytelny na każdym zdjęciu) */ .kafle.kafle-zdjecia .kafel { min-height: 240px; justify-content: flex-end; border: 0; color: #fff; background: linear-gradient(145deg, var(--kafel-kolor), color-mix(in srgb, var(--kafel-kolor) 70%, #000)); } .kafle.kafle-zdjecia .kafel::before { display: none; } .kafle.kafle-zdjecia .kafel-tekst { margin-top: auto; } .kafle.kafle-zdjecia .kafel .dalej { margin-top: 0; } .kafle.kafle-zdjecia .kafel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,10,14,.08) 0%, rgba(8,10,14,.35) 42%, rgba(8,10,14,.84) 100%); } .kafel-zdjecie { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .kafle.kafle-zdjecia .kafel:hover .kafel-zdjecie { transform: scale(1.07); } .kafle.kafle-zdjecia .kafel strong, .kafle.kafle-zdjecia .kafel-opis, .kafle.kafle-zdjecia .kafel .dalej, .kafle.kafle-zdjecia .kafel:hover { color: #fff; } .kafle.kafle-zdjecia .kafel .kafel-ikona { position: absolute; top: 1.1rem; left: 1.2rem; background: rgba(8,10,14,.42); color: #fff; box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .kafle.kafle-zdjecia.kafle-kompaktowe .kafel { min-height: 150px; } .kafle.kafle-zdjecia.kafle-duze .kafel { min-height: 300px; } .kafle.kafle-zdjecia .kafel:focus-visible { outline-color: var(--akcent); outline-offset: 3px; } /* przyciski w kształcie pigułki (po regułach prostych rogów, żeby wygrały) */ html.przyciski-pigulki .przycisk, html.przyciski-pigulki .tresc a.przycisk-tresc, html.przyciski-pigulki .stronicowanie a { border-radius: 999px !important; } @media (max-width: 1080px) { .kafle.kafle-kol-3 ul, .kafle.kafle-kol-4 ul { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .kafle.kafle-kol-2 ul, .kafle.kafle-kol-3 ul, .kafle.kafle-kol-4 ul { grid-template-columns: 1fr; } .kafle-duze .kafel { min-height: 0; } } @media print { .gorny-pasek, .naglowek .menu, .przycisk-menu, .sterowanie-banera, .stopka, .boczne-menu { display: none !important; } .naglowek { position: static; box-shadow: none; } body { background: #fff; } .tresc { box-shadow: none; border: 0; padding: 0; } }