/* Kulturalny Koneser: nowa strona. Barwy KK z księgi znaku, barwy projektów i zespołów z ich stron. */ @font-face { font-family: "Archivo"; src: url(../fonty/archivo-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Archivo"; src: url(../fonty/archivo-latin.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ===== Podstawy ===== */ .kn-nowa { --kk-granat: #2E4769; --kk-granat-g: #1B2B45; --kk-noc: #0F1828; --kk-zielen: #3F6B61; --kk-zielen-j: #9FD0C4; --kk-pomarancz: #E35A01; --kk-pomarancz-h: #C94F00; --kk-pomarancz-t: #B84700; --kk-tusz: #1D1D1B; --tlo: #FBFAF7; --tlo-2: #F2EFE9; --karta: #FFFFFF; --tekst: #1D1D1B; --tekst-2: #4F5562; --linia: rgba(29, 29, 27, .12); --f: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --r-s: 12px; --r-m: 18px; --r-l: 26px; --r-xl: 34px; --ease: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --szer: 1320px; --odstep: clamp(16px, 4vw, 48px); --sekcja: clamp(72px, 9vw, 132px); --cien-s: 0 1px 0 rgba(21, 34, 56, .04), 0 16px 40px -26px rgba(21, 34, 56, .32); --naglowek-h: 78px; margin: 0; background: var(--tlo); color: var(--tekst); font-family: var(--f); font-size: 17px; line-height: 1.65; font-stretch: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .kn-nowa *, .kn-nowa *::before, .kn-nowa *::after { box-sizing: border-box; } :where(.kn-nowa) img { max-width: 100%; height: auto; } :where(.kn-nowa) a { color: inherit; } :where(.kn-nowa) button { font: inherit; } .kn-nowa :focus-visible { outline: 3px solid var(--kk-pomarancz); outline-offset: 3px; border-radius: 6px; } .kn-nowa .kn-ikona { width: 20px; height: 20px; flex: 0 0 auto; } /* Motyw (Bosa/Kirki) drukuje własne style h1–h6 (Poppins, capitalize, granatowy kolor); na nowej stronie neutralizujemy je. */ body.kn-nowa :is(h1, h2, h3, h4, h5, h6) { color: inherit; text-transform: none; } body.kn-nowa :is(a, button, label, li, p, span) { text-transform: none; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } .kn-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .kn-skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--kk-granat); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: top .2s; } .kn-skip:focus { top: 12px; } .kn-kontener { width: 100%; max-width: var(--szer); margin-inline: auto; padding-inline: var(--odstep); } .kn-kontener--waski { max-width: calc(760px + 2 * var(--odstep)); } .kn-kontener--sredni { max-width: calc(1000px + 2 * var(--odstep)); } /* ===== Typografia (jeden styl nagłówków na całej stronie) ===== */ .kn-tytul { margin: 0 0 .35em; font: 800 clamp(36px, 4.6vw, 68px)/1.02 var(--f); font-stretch: 112%; letter-spacing: -.03em; text-wrap: balance; color: var(--tekst); } .kn-tytul--h1 { font-size: clamp(42px, 6.2vw, 92px); line-height: 1; } .kn-tytul--sredni { font-size: clamp(30px, 3.4vw, 48px); } .kn-tytul--maly { font-size: clamp(24px, 2.2vw, 30px); } .kn-nad { margin: 0 0 14px; font: 650 15px/1.3 var(--f); color: var(--kk-pomarancz-t); } .kn-lead { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.55; color: var(--tekst); } .kn-glowa { max-width: 860px; margin-bottom: clamp(36px, 5vw, 60px); } .kn-glowa .kn-tytul { margin-bottom: 0; } .kn-glowa--rzad { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; } .kn-glowa__opis { margin: 18px 0 0; max-width: 52ch; font-size: 18px; color: var(--tekst-2); } .kn-glowa--rzad .kn-glowa__opis { margin-top: 0; } .kn-glowa__opis p { margin: 0 0 18px; } .kn-proza { font-size: 18px; line-height: 1.75; color: #2D323C; } .kn-proza > :first-child { margin-top: 0; } .kn-proza p { margin: 0 0 1.1em; } .kn-proza h2, .kn-proza h3, .kn-proza h4 { font-family: var(--f); font-stretch: 112%; font-weight: 800; color: var(--tekst); letter-spacing: -.02em; line-height: 1.15; margin: 1.6em 0 .6em; } .kn-proza h2 { font-size: clamp(26px, 2.6vw, 34px); } .kn-proza h3 { font-size: 23px; } .kn-proza a { color: var(--kk-pomarancz-t); text-underline-offset: 3px; } .kn-proza img { border-radius: 16px; } .kn-proza blockquote { margin: 2em 0; padding-left: 22px; border-left: 3px solid var(--kk-pomarancz); font-size: 1.1em; color: var(--tekst); } .kn-proza ul, .kn-proza ol { padding-left: 1.3em; } .kn-proza--bez p:last-child { margin-bottom: 0; } /* ===== Przyciski i linki ===== */ .kn-przycisk { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 999px; border: 1.5px solid var(--kk-granat); background: var(--kk-granat); color: #fff !important; font: 700 16px/1 var(--f); font-stretch: 105%; text-decoration: none; cursor: pointer; transition: background .3s var(--ease), border-color .3s, color .3s, transform .35s var(--ease), box-shadow .35s; } .kn-przycisk .kn-ikona { width: 18px; height: 18px; transition: transform .35s var(--ease); } .kn-przycisk:hover { transform: translateY(-2px); } .kn-przycisk:hover .kn-ikona { transform: translateX(3px); } .kn-przycisk--glowny { background: var(--kk-pomarancz); border-color: var(--kk-pomarancz); font-size: 18.7px; font-weight: 750; padding: 15px 26px; } .kn-przycisk--glowny:hover { background: var(--kk-pomarancz-h); border-color: var(--kk-pomarancz-h); box-shadow: 0 14px 34px -14px rgba(227, 90, 1, .8); } .kn-przycisk--obrys { background: transparent; color: var(--tekst) !important; border-color: currentColor; } .kn-przycisk--obrys:hover { background: var(--tekst); border-color: var(--tekst); color: #fff !important; } .kn-przycisk--jasny { background: #fff; border-color: #fff; color: var(--kk-noc) !important; } .kn-przycisk--jasny:hover { background: var(--kk-zielen-j); border-color: var(--kk-zielen-j); } .kn-przycisk--obrys-jasny { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff !important; } .kn-przycisk--obrys-jasny:hover { background: #fff; color: var(--kk-noc) !important; } .kn-przycisk--zespol { background: var(--z-akcent); border-color: var(--z-akcent); color: var(--z-akcent-tekst) !important; font-size: 18.7px; } .kn-przycisk--zespol:hover { box-shadow: 0 16px 40px -14px var(--z-akcent); } .kn-przyciski { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 30px 0 0; } .kn-link-strzalka { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--kk-granat); text-decoration: none; } .kn-link-strzalka .kn-ikona { width: 18px; height: 18px; transition: transform .35s var(--ease); } .kn-link-strzalka:hover .kn-ikona, a:hover .kn-link-strzalka .kn-ikona { transform: translateX(4px); } .kn-okragly { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--linia); background: #fff; color: var(--tekst); cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); } .kn-okragly:hover { background: var(--kk-granat); border-color: var(--kk-granat); color: #fff; transform: scale(1.06); } .kn-okragly--ciemny { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); color: #fff; } .kn-okragly--ciemny:hover { background: #fff; color: var(--z-tlo, var(--kk-noc)); border-color: #fff; } .kn-kopiuj { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 999px; background: var(--kk-pomarancz); color: #fff; font: 750 16px/1 var(--f); cursor: pointer; transition: background .3s; } .kn-kopiuj:hover { background: var(--kk-pomarancz-h); } .kn-kopiuj .kn-ikona { width: 18px; height: 18px; } .kn-kopiuj .kn-ikona--ok, .kn-kopiuj.is-ok .kn-ikona:not(.kn-ikona--ok) { display: none; } .kn-kopiuj.is-ok { background: var(--kk-zielen); } .kn-kopiuj.is-ok .kn-ikona--ok { display: block; } /* ===== Animacje wejścia (tylko z JS) ===== */ .kn-js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0ms); } .kn-js [data-reveal].is-in { opacity: 1; transform: none; } /* Odsłanianie zdjęć: przycinamy samo zdjęcie, nie obserwowany element (ten musi zostać widoczny dla IntersectionObservera i leniwego ładowania). Bez zasłony nad zdjęciem, więc na zaokrąglonych rogach nie prześwituje cienka obwódka. */ .kn-podhero__foto, .kn-pasek-zdjec li, .kn-biogram__foto, .kn-artykul__foto { position: relative; } .kn-js [data-odkryj] img { clip-path: inset(100% 0 0 0); transform: scale(1.18); transition: clip-path 1.3s var(--ease-io), transform 1.9s var(--ease); transition-delay: var(--d, 0ms); } .kn-js [data-odkryj].is-in img { clip-path: inset(0 0 0 0); transform: none; } .kn-sekcja--tlo, .kn-zespoly, .kn-aktualnosci--wiecej { --odkryj-tlo: var(--tlo-2); } /* Litery nagłówków wjeżdżają spod maski */ .kn-s { display: inline-block; white-space: nowrap; } .kn-l { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em .01em .14em; margin: -.16em -.01em -.14em; } .kn-l > span { display: inline-block; transform: translateY(115%) rotate(8deg); transform-origin: 0 100%; transition: transform .95s var(--ease); transition-delay: calc(var(--i, 0) * 22ms); } .is-in .kn-l > span { transform: none; } /* Nutki: litery hasła podskakują po kolei */ .kn-nuty .kn-n { display: inline-block; opacity: 0; transform: translateY(-.7em) rotate(-10deg); } .kn-nuty.is-in .kn-n { animation: kn-nuta .9s var(--ease) forwards; animation-delay: calc(.25s + var(--i, 0) * 45ms); } .kn-nuty.is-in:hover .kn-n { animation: kn-fala .7s ease-in-out; animation-delay: calc(var(--i, 0) * 30ms); opacity: 1; transform: none; } /* ===== Nagłówek ===== */ .kn-naglowek { position: sticky; top: 0; z-index: 60; background: var(--tlo); border-bottom: 1px solid transparent; view-transition-name: kn-naglowek; transition: background .45s var(--ease), border-color .45s, box-shadow .45s; } .admin-bar .kn-naglowek { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .kn-naglowek { top: 46px; } } @media screen and (max-width: 600px) { .admin-bar .kn-naglowek { top: 0; } } .kn-naglowek.is-przewiniety { background: rgba(251, 250, 247, .66); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-bottom-color: rgba(29, 29, 27, .07); } .kn-naglowek__wnetrze { max-width: var(--szer); margin-inline: auto; padding-inline: var(--odstep); height: var(--naglowek-h); display: flex; align-items: center; gap: 20px; } .kn-logo { display: inline-flex; flex: 0 0 auto; color: var(--kk-tusz); } .kn-logo__svg { display: block; height: 44px; width: auto; overflow: visible; transform-origin: left center; transition: transform .6s var(--ease); } .kn-naglowek.is-przewiniety .kn-logo__svg { transform: scale(.88); } .kn-nav { margin-left: auto; } .kn-nav__lista { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; } .kn-nav__el { position: relative; } .kn-nav__link { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 11px 13px; border: 0; border-radius: 999px; background: none; color: var(--tekst); font: 600 15.5px/1 var(--f); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .25s, color .25s; } .kn-nav__link:hover, .kn-nav__el.is-otwarty > .kn-nav__link { background: rgba(29, 29, 27, .06); } .kn-nav__link[aria-current], .kn-nav__el.is-aktywny > .kn-nav__link { color: var(--kk-pomarancz-t); } .kn-nav__strz { width: 16px !important; height: 16px !important; opacity: .55; transition: transform .35s var(--ease); } .kn-nav__link[aria-expanded="true"] .kn-nav__strz { transform: rotate(180deg); } .kn-panel { position: absolute; top: calc(100% + 12px); left: 50%; z-index: 5; min-width: 290px; padding: 10px; border-radius: 20px; background: #fff; box-shadow: 0 30px 70px -30px rgba(21, 34, 56, .45), 0 0 0 1px rgba(21, 34, 56, .07); opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity .25s, transform .4s var(--ease), visibility 0s .4s; } .kn-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .kn-js .kn-panel[hidden] { display: block; } html:not(.kn-js) .kn-nav__el:hover > .kn-panel, html:not(.kn-js) .kn-nav__el:focus-within > .kn-panel { display: block; opacity: 1; visibility: visible; transform: translate(-50%, 0); } .kn-nav__el.is-otwarty > .kn-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; } .kn-panel__kolumny { display: flex; gap: 6px; } .kn-panel__kolumny--grupy { min-width: 440px; } .kn-panel__kolumny > * { flex: 1 1 0; min-width: 200px; } .kn-panel__lista { list-style: none; margin: 0; padding: 0; } .kn-panel__naglowek { margin: 10px 12px 4px; font: 600 13px/1.2 var(--f); color: var(--tekst-2); } .kn-panel__link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 12px; border-radius: 12px; color: var(--tekst); font: 550 15.5px/1.3 var(--f); text-decoration: none; transition: background .25s, color .25s; } .kn-panel__link span { transition: transform .35s var(--ease); } .kn-panel__link .kn-ikona { width: 16px; height: 16px; opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .35s var(--ease); } .kn-panel__link:hover, .kn-panel__link[aria-current] { background: var(--tlo-2); } .kn-panel__link:hover span { transform: translateX(4px); } .kn-panel__link:hover .kn-ikona { opacity: 1; transform: none; } /* Wydarzenia: prosta lista, kolor marki tylko w akcencie */ .kn-panel--marki { min-width: 380px; padding: 8px; } .kn-panel__marki { list-style: none; margin: 0; padding: 0; } .kn-wiersz-marki { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding: 12px 14px 12px 22px; border-radius: 14px; color: var(--tekst); text-decoration: none; transition: background .3s; } .kn-wiersz-marki::before { content: ""; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 4px; border-radius: 4px; background: var(--m-grad); transform: scaleY(.35); transition: transform .4s var(--ease); } .kn-wiersz-marki__nazwa { font: 700 16.5px/1.25 var(--f); font-stretch: 108%; transition: color .3s; } .kn-wiersz-marki__haslo { grid-column: 1; font-size: 14px; line-height: 1.35; color: var(--tekst-2); } .kn-wiersz-marki__strz { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 18px !important; height: 18px !important; opacity: 0; transform: translate(-6px, 6px); transition: opacity .3s, transform .4s var(--ease); color: var(--m-a); } .kn-wiersz-marki:hover { background: color-mix(in srgb, var(--m-blask) 11%, #fff); } .kn-wiersz-marki:hover::before { transform: scaleY(1); } .kn-wiersz-marki:hover .kn-wiersz-marki__nazwa { color: var(--m-a); } .kn-wiersz-marki:hover .kn-wiersz-marki__strz { opacity: 1; transform: none; } .kn-panel__link--marka:hover { background: color-mix(in srgb, var(--m-blask) 12%, #fff); color: var(--m-a); } .kn-burger { display: none; align-items: center; gap: 8px; margin-left: auto; padding: 11px 16px; border: 1.5px solid var(--linia); border-radius: 999px; background: #fff; color: var(--tekst); font: 700 15px/1 var(--f); cursor: pointer; } /* Menu na telefonie */ .kn-mob { margin: 0 0 0 auto; padding: 0; width: min(460px, 100vw); height: 100dvh; max-height: none; max-width: none; border: 0; background: #fff; color: var(--tekst); overflow: auto; overscroll-behavior: contain; } .kn-mob::backdrop { background: rgba(15, 24, 40, .55); } .kn-mob[open] { animation: kn-z-prawej .55s var(--ease); } .kn-mob__gora { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--linia); } .kn-mob .kn-logo__svg { height: 38px; } .kn-mob__lista { list-style: none; margin: 0; padding: 8px 20px; } .kn-mob__lista > li { border-bottom: 1px solid var(--linia); } .kn-mob__link { display: flex; align-items: center; justify-content: space-between; padding: 18px 2px; font: 800 23px/1.15 var(--f); font-stretch: 110%; letter-spacing: -.015em; color: var(--tekst); text-decoration: none; cursor: pointer; list-style: none; } .kn-mob__link::-webkit-details-marker { display: none; } .kn-mob__link .kn-ikona { transition: transform .35s var(--ease); } details[open] > .kn-mob__link .kn-ikona { transform: rotate(180deg); } .kn-mob__pod { list-style: none; margin: 0; padding: 0 0 14px; } .kn-mob__naglowek { margin: 12px 0 2px; font: 600 13px/1.2 var(--f); color: var(--tekst-2); } .kn-mob__podlink { display: flex; align-items: center; gap: 12px; padding: 11px 12px; margin: 0 -12px; border-radius: 12px; font: 550 17px/1.3 var(--f); color: var(--tekst); text-decoration: none; transition: background .25s, color .25s; } .kn-mob__podlink i { width: 12px; height: 12px; border-radius: 50%; background: var(--m-grad); flex: 0 0 auto; } .kn-mob__podlink--marka:active, .kn-mob__podlink--marka:hover { background: color-mix(in srgb, var(--m-blask) 12%, #fff); color: var(--m-a); } .kn-mob__dol { display: grid; gap: 12px; padding: 20px 20px 32px; } .kn-mob__dol .kn-przycisk { justify-content: center; } .kn-mob__kontakt { display: flex; align-items: center; gap: 10px; color: var(--tekst-2); text-decoration: none; font-weight: 600; } .kn-okno__zamknij { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #fff; color: var(--tekst); cursor: pointer; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .4); transition: transform .3s var(--ease), background .3s, color .3s; } .kn-okno__zamknij:hover { transform: rotate(90deg); background: var(--tekst); color: #fff; } .kn-mob__gora .kn-okno__zamknij { position: static; box-shadow: none; background: var(--tlo-2); } .kn-przycisk--kontakt { padding: 12px 21px; background: var(--kk-pomarancz); border-color: var(--kk-pomarancz); font-size: 18.7px; font-weight: 750; } .kn-przycisk--kontakt:hover { background: var(--kk-pomarancz-h); border-color: var(--kk-pomarancz-h); box-shadow: 0 12px 30px -12px rgba(227, 90, 1, .75); } /* ===== Hero: slider pięciu projektów. Nowy slajd wjeżdża z boku, zdjęcie przesuwa się wolniej (głębia), stary cofa się i ciemnieje. Zdjęcia cały czas powoli płyną (Ken Burns), na komputerze reagują na ruch myszy. ===== */ .kn-hero { padding: 10px 12px 0; } .kn-hero__ramka { position: relative; height: clamp(620px, calc(100svh - var(--naglowek-h) - 22px), 920px); border-radius: var(--r-xl); overflow: hidden; background: #0C0A12; isolation: isolate; transition: transform 1.6s var(--ease), opacity 1.1s var(--ease); } .kn-wejscie .kn-hero__ramka { transform: translate3d(0, 40px, 0) scale(.95); opacity: 0; transition: none; } .kn-slajd { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; overflow: hidden; visibility: hidden; } .kn-slajd.is-aktywny { z-index: 3; visibility: visible; } .kn-slajd.is-wychodzi { z-index: 2; visibility: visible; animation: kn-slajd-wyj 1.25s var(--ease-io) both; } .kn-slajd.is-wchodzi { animation: kn-slajd-wej 1.25s var(--ease-io) both; } .kn-slajd.is-wchodzi .kn-slajd__tlo { animation: kn-slajd-glebia 1.25s var(--ease-io) both; } .kn-slajd::before { content: ""; position: absolute; inset: 0; z-index: 5; background: #07060B; opacity: 0; pointer-events: none; } .kn-slajd.is-wychodzi::before { animation: kn-slajd-cien 1.25s var(--ease-io) both; } @keyframes kn-slajd-wej { from { transform: translate3d(calc(var(--kier, 1) * 100%), 0, 0); } to { transform: none; } } @keyframes kn-slajd-glebia { from { transform: translate3d(calc(var(--kier, 1) * -60%), 0, 0) scale(1.1); } to { transform: none; } } @keyframes kn-slajd-wyj { from { transform: none; } to { transform: translate3d(calc(var(--kier, 1) * -28%), 0, 0) scale(.94); } } @keyframes kn-slajd-cien { to { opacity: .72; } } .kn-slajd__tlo { position: absolute; inset: 0; overflow: hidden; } .kn-slajd__ruch { position: absolute; inset: -30px; transform: translate3d(calc(var(--mx, 0) * -22px), calc(var(--my, 0) * -14px), 0); } .kn-slajd__ruch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); } .kn-slajd.is-aktywny .kn-slajd__ruch img, .kn-slajd.is-wychodzi .kn-slajd__ruch img { animation: kn-kb-a 12s cubic-bezier(.25, .6, .3, 1) both; } .kn-slajd:nth-of-type(even).is-aktywny .kn-slajd__ruch img, .kn-slajd:nth-of-type(even).is-wychodzi .kn-slajd__ruch img { animation-name: kn-kb-b; } @keyframes kn-kb-a { from { transform: scale(1.18) translate3d(-1.8%, 1%, 0); } to { transform: scale(1.04) translate3d(1.4%, -.8%, 0); } } @keyframes kn-kb-b { from { transform: scale(1.04) translate3d(1.6%, -.6%, 0); } to { transform: scale(1.17) translate3d(-1.6%, 1%, 0); } } .kn-slajd__tlo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 7, 14, .84) 0%, rgba(9, 7, 14, .55) 36%, rgba(9, 7, 14, .06) 70%, rgba(9, 7, 14, 0) 100%), linear-gradient(0deg, rgba(9, 7, 14, .7) 0%, rgba(9, 7, 14, 0) 44%); } /* Treść: wjeżdża z kierunku przesunięcia, hasło słowo po słowie spod maski */ .kn-slajd__tresc { position: relative; z-index: 3; width: 100%; max-width: 920px; padding: clamp(24px, 4svh, 56px) clamp(28px, 5vw, 72px) clamp(40px, 7svh, 80px) calc(clamp(14px, 2vw, 28px) + 60px + clamp(20px, 2.4vw, 36px)); color: #fff; transform: translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 6px), 0); } .kn-slajd__tresc > * { opacity: 0; transform: translate3d(calc(var(--kier, 1) * 48px), 0, 0); transition: opacity .45s var(--ease), transform .5s var(--ease); } .kn-slajd.is-aktywny .kn-slajd__tresc > * { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform 1.15s var(--ease); transition-delay: calc(.4s + var(--i, 0) * .085s); } .kn-slajd.is-wychodzi .kn-slajd__tresc > * { opacity: 0; transform: translate3d(calc(var(--kier, 1) * -36px), 0, 0); transition-duration: .4s; } .kn-wejscie .kn-slajd.is-aktywny .kn-slajd__tresc > * { opacity: 0; transform: translate3d(0, 36px, 0); transition: none; } .kn-slajd__tresc > :nth-child(2) { --i: 1; } .kn-slajd__tresc > :nth-child(3) { --i: 2; } .kn-slajd__tresc > :nth-child(4) { --i: 3; } .kn-slajd__tresc > :nth-child(5) { --i: 4; } .kn-slajd__tresc > .kn-slajd__haslo.is-slowa { opacity: 1; transform: none; } .kn-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .03em .14em; margin: -.1em -.03em -.14em; } .kn-w > span { display: inline-block; transform: translate3d(0, 110%, 0) rotate(4deg); transform-origin: 0 100%; transition: transform .45s var(--ease); } .kn-slajd.is-aktywny .kn-w > span { transform: none; transition: transform 1.1s var(--ease); transition-delay: calc(.48s + var(--w, 0) * .07s); } .kn-wejscie .kn-slajd.is-aktywny .kn-w > span { transform: translate3d(0, 110%, 0) rotate(4deg); transition: none; } .kn-slajd__etykieta { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 9px 16px 9px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); font: 650 14px/1 var(--f); } .kn-slajd__kropka { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--m-blask); } .kn-slajd__kropka::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--m-blask); opacity: 0; } .kn-slajd.is-aktywny .kn-slajd__kropka::after { animation: kn-kropka 2.2s ease-out 1s infinite; } .kn-slajd__logo { display: block; height: clamp(64px, min(9vw, 12svh), 124px); width: auto; max-width: min(72%, 380px); margin: 22px 0 18px; object-fit: contain; object-position: left center; filter: drop-shadow(0 8px 26px rgba(0, 0, 0, .35)); } .kn-slajd__haslo { margin: 0; max-width: 20ch; font: 800 clamp(32px, min(4.3vw, 6.4svh), 62px)/1.02 var(--f); font-stretch: 110%; letter-spacing: -.03em; text-wrap: balance; } .kn-slajd__opis { max-width: 52ch; margin: 16px 0 28px; font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.6; color: rgba(255, 255, 255, .9); } /* Przycisk: poświata pulsuje jako osobna warstwa (tylko przezroczystość i skala, bez przemalowywania cienia) */ .kn-cta { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 17px 28px; border-radius: 999px; background: var(--m-cta-tlo); color: var(--m-cta-tekst) !important; font: 750 17px/1 var(--f); font-stretch: 105%; text-decoration: none; box-shadow: 0 18px 44px -14px var(--m-blask); } .kn-cta::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--m-blask); opacity: 0; pointer-events: none; } .kn-slajd.is-aktywny .kn-cta::after { animation: kn-puls 2.8s var(--ease) 1.8s infinite; } .kn-slajd__tresc > .kn-cta { transition: opacity .7s var(--ease), transform .45s var(--ease); } .kn-cta .kn-ikona { transition: transform .35s var(--ease); } .kn-slajd.is-aktywny .kn-cta:hover { transform: translateY(-2px) scale(1.03); } .kn-cta:hover .kn-ikona { transform: translate(2px, -2px); } @keyframes kn-puls { 0% { opacity: .75; transform: scale(.98); } 75%, 100% { opacity: 0; transform: scale(1.1, 1.4); } } @media (max-height: 960px) and (min-width: 761px) { .kn-slajd__logo { height: clamp(56px, 11svh, 100px); margin: 14px 0 12px; } .kn-slajd__haslo { font-size: clamp(30px, 6.2svh, 54px); } .kn-slajd__opis { margin: 10px 0 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } /* Strzałki po bokach; prawą obiega pierścień odliczający czas do następnego slajdu */ .kn-hero__strzalka { position: absolute; z-index: 8; top: 50%; display: grid; place-items: center; width: 60px; height: 60px; margin-top: -30px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), 0 18px 40px -18px rgba(0, 0, 0, .6); transition: background .35s var(--ease), color .35s, transform .5s var(--ease); } .kn-hero__strzalka--lewo { left: clamp(14px, 2vw, 28px); --dx: -30px; } .kn-hero__strzalka--prawo { right: clamp(14px, 2vw, 28px); --dx: 30px; } .kn-hero__strzalka .kn-ikona { position: relative; width: 24px; height: 24px; transition: transform .45s var(--ease); } .kn-hero__strzalka:hover { background: #fff; color: #0C0A12; transform: scale(1.08); } .kn-hero__strzalka:active { transform: scale(.93); transition-duration: .15s; } .kn-hero__strzalka--lewo:hover .kn-ikona { transform: translateX(-3px); } .kn-hero__strzalka--prawo:hover .kn-ikona { transform: translateX(3px); } .kn-hero__strzalka:focus-visible { outline: 3px solid #fff; outline-offset: 4px; } .kn-wejscie .kn-hero__strzalka { opacity: 0; } .kn-hero.is-gotowy .kn-hero__strzalka { animation: kn-strz-wej 1s var(--ease) .75s backwards; } @keyframes kn-strz-wej { from { opacity: 0; transform: translate3d(var(--dx), 0, 0) scale(.8); } } .kn-hero__pierscien { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); transform: rotate(-90deg); fill: none; stroke-width: 2; pointer-events: none; } .kn-hero__pierscien circle { stroke: rgba(255, 255, 255, .16); } .kn-hero__pierscien .kn-hero__czas { stroke: var(--m-blask, #fff); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke .6s; } .kn-hero.is-gra .kn-hero__czas { animation: kn-czas var(--czas, 7000ms) linear forwards; } .kn-hero.is-pauza .kn-hero__czas { animation-play-state: paused; } @keyframes kn-czas { to { stroke-dashoffset: 0; } } /* ===== O nas ===== */ .kn-onas { padding: var(--sekcja) 0 calc(var(--sekcja) * .7); overflow: hidden; } .kn-onas__siatka { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 6vw, 96px); align-items: center; } .kn-onas__tekst p:not(.kn-lead) { color: var(--tekst-2); } .kn-onas__zdjecia { position: relative; min-height: clamp(420px, 44vw, 600px); } .kn-onas__foto { position: absolute; margin: 0; overflow: hidden; border-radius: var(--r-l); } .kn-onas__foto img { display: block; width: 100%; height: 100%; object-fit: cover; } .kn-onas__foto--1 { top: 0; right: 0; width: 84%; aspect-ratio: 4 / 3.1; } .kn-onas__foto--2 { left: -8px; bottom: -8px; width: calc(50% + 16px); aspect-ratio: 4 / 4.6; border: 8px solid var(--tlo); border-radius: calc(var(--r-l) + 8px); background: var(--tlo); --d: 200ms; } /* Znak KK na środku wolnego miejsca: na prawo od małego zdjęcia i pod dużym (84% szerokości x 3,1/4 = 65,1% szerokości) */ .kn-onas__zdjecia { container-type: inline-size; } .kn-onas__znak { position: absolute; left: calc(50% + 8px); right: 0; top: 65.1cqw; bottom: 0; display: grid; place-items: center; } .kn-onas__znak .kn-znak { width: clamp(60px, 17cqw, 112px); } .kn-znak { display: block; width: 100%; height: auto; overflow: visible; } .kn-js [data-znak] .kn-znak rect { opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; transition: opacity .5s var(--ease), transform .7s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i, 0) * 55ms + 300ms); } .kn-js [data-znak].is-in .kn-znak rect { opacity: 1; transform: none; } .kn-js [data-znak].is-in:hover .kn-znak rect { animation: kn-kwadrat .6s ease-in-out; animation-delay: calc(var(--i, 0) * 25ms); } .kn-liczby { list-style: none; margin: clamp(56px, 7vw, 100px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linia); } .kn-liczby__el { padding: 30px 24px 0 0; } .kn-liczby__el + .kn-liczby__el { padding-left: 28px; border-left: 1px solid var(--linia); } .kn-liczby__el:nth-child(2) { --d: 90ms; } .kn-liczby__el:nth-child(3) { --d: 180ms; } .kn-liczby__el:nth-child(4) { --d: 270ms; } .kn-liczby__n { display: flex; align-items: baseline; gap: 8px; font: 800 clamp(58px, 7.4vw, 108px)/.95 var(--f); font-stretch: 112%; letter-spacing: -.04em; color: var(--kk-granat); font-variant-numeric: tabular-nums; } .kn-liczby__el:nth-child(2) .kn-liczby__n { color: var(--kk-pomarancz); } .kn-liczby__el:nth-child(3) .kn-liczby__n { color: var(--kk-zielen); } .kn-liczby__n small { font-size: .28em; letter-spacing: 0; color: var(--tekst-2); } .kn-liczby__opis { display: block; max-width: 24ch; margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--tekst-2); } .kn-cytat { margin: clamp(72px, 9vw, 130px) auto 0; text-align: center; } .kn-cytat p { margin: 0; font: 800 clamp(36px, 5.4vw, 80px)/1.04 var(--f); font-stretch: 112%; letter-spacing: -.035em; text-wrap: balance; } .kn-cytat em { font-style: normal; color: var(--kk-pomarancz); } /* ===== Zespoły (strona główna) ===== */ .kn-zespoly { padding: var(--sekcja) 0; background: var(--tlo-2); } .kn-zespoly__siatka { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; } .kn-zespoly__siatka > li:nth-child(even) { margin-top: 56px; } .kn-zespol { display: flex; flex-direction: column; height: 100%; border-radius: var(--r-l); overflow: hidden; background: var(--karta); color: var(--tekst); text-decoration: none; box-shadow: var(--cien-s); transition: transform .55s var(--ease), box-shadow .55s var(--ease); } .kn-zespol__foto { display: block; aspect-ratio: 4 / 4.6; overflow: hidden; background: var(--z-tlo, var(--tlo-2)); } .kn-zespol__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .kn-zespol__opis { position: relative; display: grid; gap: 6px; padding: 20px 22px 22px; } .kn-zespol__opis::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 3px; background: var(--z-akcent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); } .kn-zespol__krotko { font-size: 14px; color: var(--tekst-2); } .kn-zespol__nazwa { font: 800 23px/1.12 var(--f); font-stretch: 108%; letter-spacing: -.02em; } .kn-zespol__wiecej { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font: 700 15px/1 var(--f); color: var(--z-tekst-akcent, var(--kk-granat)); } .kn-zespol__wiecej .kn-ikona { width: 18px; height: 18px; transition: transform .35s var(--ease); } .kn-zespol:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(21, 34, 56, .5); } .kn-zespol:hover .kn-zespol__foto img { transform: scale(1.06); } .kn-zespol:hover .kn-zespol__opis::before { transform: scaleX(1); } .kn-zespol:hover .kn-zespol__wiecej .kn-ikona { transform: translateX(4px); } /* ===== Projekty realizowane: programy z osią lat ===== */ .kn-realizowane { padding: var(--sekcja) 0; } .kn-programy { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .kn-program__wnetrze { position: relative; display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 6px 12px; height: 100%; padding: 24px 24px 22px; border-radius: var(--r-m); background: var(--karta); color: var(--tekst); text-decoration: none; box-shadow: 0 0 0 1px var(--linia); transition: box-shadow .45s var(--ease), transform .45s var(--ease); } a.kn-program__wnetrze:hover { transform: translateY(-4px); box-shadow: 0 0 0 1.5px var(--kolor-programu), 0 24px 50px -30px rgba(21, 34, 56, .45); } .kn-program--warsztaty { --kolor-programu: var(--kk-zielen); } .kn-program--koncerty { --kolor-programu: var(--kk-pomarancz); } .kn-program--inwestycja { --kolor-programu: var(--kk-granat); } .kn-program__rodzaj { align-self: center; justify-self: start; padding: 6px 11px; border-radius: 999px; background: color-mix(in srgb, var(--kolor-programu) 12%, #fff); color: color-mix(in srgb, var(--kolor-programu) 82%, #000); font: 650 13px/1 var(--f); } .kn-program__lata { align-self: center; font: 700 15px/1 var(--f); font-variant-numeric: tabular-nums; color: var(--tekst-2); } .kn-program__tytul { grid-column: 1 / -1; margin-top: 14px; font: 800 22px/1.15 var(--f); font-stretch: 108%; letter-spacing: -.02em; } .kn-program__opis { grid-column: 1 / -1; font-size: 15.5px; line-height: 1.45; color: var(--tekst-2); } .kn-program__os { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 18px; } .kn-program__os i { height: 8px; border-radius: 8px; background: var(--tlo-2); transition: background .5s var(--ease), transform .7s var(--ease); } .kn-program__os i.is-rok { background: var(--kolor-programu); } .kn-js .kn-program .kn-program__os i.is-rok { transform: scaleX(0); transform-origin: left; } .kn-js .kn-program.is-in .kn-program__os i.is-rok { transform: none; transition-delay: calc(var(--d, 0ms) + 400ms); } .kn-program__podpis { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 12.5px; color: var(--tekst-2); } .kn-lata { columns: 2 380px; column-gap: 48px; } .kn-lata__rok { break-inside: avoid; display: grid; grid-template-columns: 96px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--linia); } .kn-lata .kn-lata__liczba { margin: 0; font: 800 34px/1 var(--f); font-stretch: 112%; color: var(--kk-granat); } .kn-lata__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .kn-lata__t { display: block; font: 700 18px/1.3 var(--f); } .kn-lata__o { display: block; margin-top: 2px; font-size: 15px; color: var(--tekst-2); } .kn-cytat-blok blockquote { margin: 0; text-align: center; } .kn-cytat-blok blockquote p { margin: 0; font: 700 clamp(24px, 2.6vw, 36px)/1.3 var(--f); font-stretch: 105%; letter-spacing: -.015em; text-wrap: balance; } .kn-cytat-blok footer { margin-top: 18px; color: var(--tekst-2); font-weight: 600; } /* ===== Galeria ===== */ .kn-galeria { padding: var(--sekcja) 0; background: var(--kk-noc); color: #fff; } .kn-galeria .kn-tytul { color: #fff; } .kn-filtry { display: flex; flex-wrap: wrap; gap: 8px; } .kn-filtr { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .88); font: 600 14.5px/1 var(--f); text-decoration: none; cursor: pointer; transition: background .3s, color .3s, border-color .3s, box-shadow .3s; } .kn-filtr i { width: 10px; height: 10px; border-radius: 50%; background: var(--m-grad, linear-gradient(135deg, #3F6B61, #2E4769)); } .kn-filtr:hover { border-color: var(--m-blask, #9FD0C4); } .kn-filtr[aria-pressed="true"], .kn-filtr[aria-current] { background: #fff; border-color: #fff; color: var(--kk-noc); } .kn-filtry--jasne { margin-bottom: 36px; } .kn-filtry--jasne .kn-filtr { border-color: var(--linia); color: var(--tekst); } .kn-filtry--jasne .kn-filtr:hover { border-color: var(--tekst); } .kn-filtry--jasne .kn-filtr[aria-current] { background: var(--tekst); border-color: var(--tekst); color: #fff; } .kn-galeria__siatka { list-style: none; margin: 0; padding: 0; columns: 4 250px; column-gap: 14px; } .kn-galeria__el { break-inside: avoid; margin: 0 0 14px; transition: opacity .35s var(--ease), transform .45s var(--ease); } .kn-galeria__el.is-znika { opacity: 0; transform: scale(.96); } .kn-galeria__el.is-ukryty { display: none; } .kn-js .kn-galeria__siatka:not(.is-pelna) .kn-galeria__el:nth-child(n + 13) { display: none; } .kn-galeria__wiecej { margin: 36px 0 0; text-align: center; } .kn-galeria__siatka.is-pelna + .kn-galeria__wiecej { display: none; } .kn-galeria__btn { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #1B2436; cursor: zoom-in; } .kn-galeria__btn img { display: block; width: 100%; height: auto; transition: transform 1s var(--ease); } .kn-galeria__lupa { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--kk-noc); opacity: 0; transform: scale(.7); transition: opacity .3s, transform .4s var(--ease); } .kn-galeria__btn:hover img { transform: scale(1.05); } .kn-galeria__btn:hover .kn-galeria__lupa, .kn-galeria__btn:focus-visible .kn-galeria__lupa { opacity: 1; transform: none; } .kn-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 10, 16, .97); color: #fff; overflow: hidden; } .kn-lightbox::backdrop { background: rgba(8, 10, 16, .6); } .kn-lightbox[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; animation: kn-pojaw .4s var(--ease); } .kn-lightbox__kadr { grid-column: 2; display: grid; place-items: center; height: 100dvh; margin: 0; padding: 70px 8px; } .kn-lightbox__kadr img { max-width: 100%; max-height: calc(100dvh - 140px); width: auto; height: auto; border-radius: 12px; object-fit: contain; transition: opacity .35s, transform .5s var(--ease); } .kn-lightbox__kadr img.is-laduje { opacity: 0; transform: scale(.98); } .kn-lightbox__nav { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 clamp(8px, 2vw, 28px); border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background .25s; } .kn-lightbox__nav:hover { background: rgba(255, 255, 255, .14); } .kn-lightbox__nav--poprz { grid-column: 1; } .kn-lightbox__nav--nast { grid-column: 3; } .kn-lightbox .kn-okno__zamknij { top: 18px; right: 18px; } .kn-lightbox__licznik { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; font: 600 14px/1 var(--f); letter-spacing: .08em; color: rgba(255, 255, 255, .75); } /* ===== Aktualności ===== */ .kn-aktualnosci { padding: var(--sekcja) 0; } .kn-aktualnosci--wiecej { background: var(--tlo-2); } .kn-aktualnosci__siatka { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; } .kn-aktualnosci__siatka .kn-wpis--duzy { grid-row: span 2; } .kn-aktualnosci__siatka--trzy { grid-template-columns: repeat(3, 1fr); } .kn-wpis { min-width: 0; } .kn-wpis__link { display: flex; flex-direction: column; height: 100%; border-radius: var(--r-l); overflow: hidden; background: var(--karta); color: var(--tekst); text-decoration: none; box-shadow: var(--cien-s); transition: transform .55s var(--ease), box-shadow .55s var(--ease); } .kn-wpis__foto { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tlo-2); } .kn-wpis__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .kn-wpis__foto--brak { display: grid; place-items: center; background: var(--tlo-2); } .kn-wpis__foto--brak .kn-znak { position: static; width: 26%; opacity: .5; } .kn-wpis__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 22px 24px 0; font: 600 14px/1.3 var(--f); color: var(--tekst-2); } .kn-wpis__kat { padding: 6px 11px; border-radius: 999px; background: var(--tlo-2); color: var(--kk-granat); font: 650 13px/1 var(--f); text-decoration: none; } .kn-wpis__tytul { margin: 12px 24px 0; font: 800 22px/1.2 var(--f); font-stretch: 106%; letter-spacing: -.015em; text-wrap: balance; } .kn-wpis__zajawka { margin: 10px 24px 0; font-size: 15.5px; line-height: 1.55; color: var(--tekst-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .kn-wpis__dalej { display: inline-flex; align-items: center; gap: 8px; margin: auto 24px 24px; padding-top: 18px; font: 700 15px/1 var(--f); color: var(--kk-pomarancz-t); } .kn-wpis__dalej .kn-ikona { width: 18px; height: 18px; transition: transform .35s var(--ease); } .kn-wpis__link:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -34px rgba(21, 34, 56, .5); } .kn-wpis__link:hover .kn-wpis__foto img { transform: scale(1.06); } .kn-wpis__link:hover .kn-wpis__dalej .kn-ikona { transform: translateX(4px); } .kn-wpis--duzy .kn-wpis__foto { aspect-ratio: auto; flex: 1 1 340px; min-height: 340px; } .kn-wpis--duzy .kn-wpis__tytul { font-size: clamp(26px, 2.4vw, 34px); } .kn-aktualnosci__siatka:not(.kn-aktualnosci__siatka--trzy) .kn-wpis:not(.kn-wpis--duzy) .kn-wpis__link { display: grid; grid-template-columns: minmax(150px, 42%) 1fr; grid-template-rows: auto auto 1fr auto; } .kn-aktualnosci__siatka:not(.kn-aktualnosci__siatka--trzy) .kn-wpis:not(.kn-wpis--duzy) .kn-wpis__foto { grid-row: 1 / -1; aspect-ratio: auto; min-height: 100%; } .kn-aktualnosci__siatka:not(.kn-aktualnosci__siatka--trzy) .kn-wpis:not(.kn-wpis--duzy) .kn-wpis__zajawka { -webkit-line-clamp: 2; } /* ===== Wesprzyj (pas) ===== */ .kn-wesprzyj { position: relative; padding: var(--sekcja) 0; overflow: hidden; background: var(--kk-granat); color: #fff; } .kn-wesprzyj__siatka { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(36px, 6vw, 96px); align-items: center; } .kn-wesprzyj .kn-tytul { color: #fff; } .kn-wesprzyj__opis { max-width: 48ch; font-size: 18px; color: rgba(255, 255, 255, .86); } .kn-krs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 24px; padding: 10px 10px 10px 26px; border-radius: 999px; background: #fff; color: var(--tekst); } .kn-krs--jasny { box-shadow: 0 0 0 1px var(--linia); } .kn-krs__etykieta { font: 700 13px/1 var(--f); letter-spacing: .1em; color: var(--tekst-2); } .kn-krs__numer { font: 800 clamp(24px, 2.4vw, 30px)/1 var(--f); font-stretch: 108%; letter-spacing: .04em; font-variant-numeric: tabular-nums; } .kn-wesprzyj__linki { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .22); } .kn-wesprzyj__linki li { border-bottom: 1px solid rgba(255, 255, 255, .22); } .kn-wesprzyj__linki a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 6px; font: 800 clamp(24px, 2.4vw, 32px)/1.1 var(--f); font-stretch: 110%; letter-spacing: -.02em; color: #fff; text-decoration: none; isolation: isolate; } .kn-wesprzyj__linki a::before { content: ""; position: absolute; inset: 6px -14px; z-index: -1; border-radius: 16px; background: rgba(255, 255, 255, .1); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); } .kn-wesprzyj__linki a span, .kn-wesprzyj__linki a .kn-ikona { transition: transform .5s var(--ease); } .kn-wesprzyj__linki a:hover::before { transform: scaleX(1); } .kn-wesprzyj__linki a:hover span { transform: translateX(10px); } .kn-wesprzyj__linki a:hover .kn-ikona { transform: translateX(-6px); } .kn-wesprzyj__linki .kn-ikona { width: 26px; height: 26px; } /* ===== Stopka ===== */ .kn-stopka { padding: clamp(56px, 7vw, 96px) 0 30px; background: var(--kk-noc); color: rgba(255, 255, 255, .78); font-size: 15.5px; } .kn-stopka__marki { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding-bottom: 44px; margin-bottom: 52px; border-bottom: 1px solid rgba(255, 255, 255, .14); } .kn-stopka__marki .kn-etykieta { margin: 0; font: 650 15px/1.3 var(--f); color: var(--kk-zielen-j); } .kn-stopka__marki ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 34px; } .kn-stopka__marki a { display: grid; place-items: center; height: 64px; padding: 6px 10px; border-radius: 14px; transition: background .3s; } .kn-stopka__marki img { height: 48px; width: auto; max-width: 140px; object-fit: contain; opacity: .82; transition: opacity .3s, transform .4s var(--ease); } .kn-stopka__marki a:hover { background: color-mix(in srgb, var(--m-blask) 16%, transparent); } .kn-stopka__marki a:hover img { opacity: 1; transform: scale(1.05); } .kn-stopka__siatka { display: grid; grid-template-columns: 1.5fr 1.1fr 1fr .9fr; gap: 40px; } .kn-logo--plakietka { padding: 14px 18px; border-radius: 16px; background: #fff; } .kn-logo--plakietka .kn-logo__svg { height: 40px; } .kn-stopka__o p { max-width: 36ch; margin: 22px 0; } .kn-stopka__sociale { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; } .kn-stopka__sociale a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); color: #fff; transition: background .3s, color .3s, transform .3s var(--ease); } .kn-stopka__sociale a:hover { background: #fff; color: var(--kk-noc); transform: translateY(-2px); } .kn-stopka .kn-stopka__tytul { margin: 6px 0 18px; font: 700 15px/1.2 var(--f); color: var(--kk-zielen-j); } .kn-stopka__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .kn-stopka__lista a { color: rgba(255, 255, 255, .86); text-decoration: none; transition: color .2s; } .kn-stopka__lista a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } .kn-stopka__lista--ikony li { display: flex; gap: 10px; align-items: flex-start; } .kn-stopka__lista--ikony .kn-ikona { width: 18px; height: 18px; margin-top: 3px; color: var(--kk-zielen-j); } .kn-stopka__prawa { margin: 56px 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; color: rgba(255, 255, 255, .6); } /* ===== Podstrony: wspólne ===== */ .kn-podhero { padding: clamp(48px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); } .kn-podhero__siatka { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .kn-podhero--foto .kn-podhero__siatka { grid-template-columns: 1.05fr .95fr; } .kn-podhero__tekst { max-width: 960px; } .kn-podhero__lead { max-width: 60ch; margin: 22px 0 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; color: var(--tekst-2); } .kn-podhero__foto { margin: 0; aspect-ratio: 4 / 3.3; border-radius: var(--r-l); overflow: hidden; } .kn-podhero__foto img { width: 100%; height: 100%; object-fit: cover; } .kn-sekcja { padding: var(--sekcja) 0; } .kn-sekcja--ciasna { padding: clamp(8px, 2vw, 24px) 0 var(--sekcja); } .kn-sekcja--tlo { background: var(--tlo-2); } .kn-sekcja--ciasna + .kn-sekcja:not(.kn-sekcja--tlo) { padding-top: 0; } .kn-dwa { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; } .kn-dwa--waski-lewy { grid-template-columns: .6fr 1.4fr; } .kn-uwaga { margin-top: 28px; font-size: 15.5px; color: var(--tekst-2); } .kn-uwaga a { color: var(--kk-pomarancz-t); } .kn-podpis-sekcji { margin: 18px 0 0; font-size: 15px; color: var(--tekst-2); } /* Baner CTA na całą szerokość */ .kn-baner { padding: clamp(64px, 8vw, 112px) 0; background: var(--kk-granat); color: #fff; } .kn-baner__wnetrze { display: grid; justify-items: start; gap: 6px; } .kn-baner .kn-tytul { color: #fff; margin: 0; } .kn-baner p { margin: 0; max-width: 56ch; font-size: 18px; color: rgba(255, 255, 255, .86); } .kn-baner .kn-przyciski { margin-top: 22px; } /* Kontakt */ .kn-kontakt__karty { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .kn-kontakt__karta { display: grid; gap: 6px; align-content: start; height: 100%; padding: 24px; border-radius: var(--r-m); background: var(--karta); color: var(--tekst); text-decoration: none; box-shadow: 0 0 0 1px var(--linia); transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .kn-kontakt__karta:hover { transform: translateY(-4px); box-shadow: 0 0 0 1.5px var(--kk-pomarancz), 0 24px 50px -30px rgba(21, 34, 56, .45); } .kn-kontakt__ikona { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 14px; background: color-mix(in srgb, var(--kk-pomarancz) 12%, #fff); color: var(--kk-pomarancz-t); } .kn-kontakt__etykieta { font-size: 14px; color: var(--tekst-2); } .kn-kontakt__wartosc { font: 700 18px/1.35 var(--f); overflow-wrap: anywhere; } .kn-kontakt__siatka { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(32px, 5vw, 80px); align-items: start; } .kn-kontakt__dane { position: sticky; top: 100px; padding: 30px; border-radius: var(--r-l); background: var(--tlo-2); } .kn-kontakt__nazwa { margin: 0 0 18px; font-weight: 600; } .kn-dane { margin: 0 0 28px; display: grid; gap: 12px; } .kn-dane div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--linia); } .kn-dane dt { font-size: 14px; color: var(--tekst-2); } .kn-dane dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; } .kn-dane__konto dd { display: grid; gap: 10px; justify-items: start; } .kn-dane__konto .kn-kopiuj { padding: 9px 14px; font-size: 14px; } .kn-kontakt__sociale-tytul { margin: 0 0 12px; font: 700 16px/1.2 var(--f); } .kn-sociale { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .kn-sociale a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: #fff; color: var(--tekst); text-decoration: none; font-weight: 600; font-size: 15px; transition: background .3s, color .3s; } .kn-sociale a:hover { background: var(--tekst); color: #fff; } .kn-sociale .kn-ikona { width: 18px; height: 18px; } /* Formularz (Contact Form 7 i podgląd) */ .kn-formularz .wpcf7 p, .kn-formularz__podglad p { margin: 0 0 18px; } .kn-formularz label { display: grid; gap: 8px; font-size: 15px; font-weight: 600; color: var(--tekst); } .kn-formularz input[type="text"], .kn-formularz input[type="email"], .kn-formularz input[type="tel"], .kn-formularz textarea, .kn-formularz select { width: 100%; padding: 16px 18px; border: 1.5px solid var(--linia); border-radius: 14px; background: #fff; color: var(--tekst); font: 400 17px/1.4 var(--f); transition: border-color .25s, box-shadow .25s; } .kn-formularz input:focus, .kn-formularz textarea:focus { outline: none; border-color: var(--kk-granat); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kk-granat) 14%, transparent); } .kn-formularz textarea { min-height: 160px; resize: vertical; } .kn-formularz__dwa { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .kn-formularz__zgoda label, .kn-formularz .wpcf7-acceptance label, .kn-formularz .wpcf7-list-item label { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--tekst-2); } .kn-formularz input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--kk-pomarancz); flex: 0 0 auto; } .kn-formularz .wpcf7-submit { display: inline-flex; padding: 16px 28px; border: 0; border-radius: 999px; background: var(--kk-pomarancz); color: #fff; font: 750 18.7px/1 var(--f); cursor: pointer; transition: background .3s, transform .35s var(--ease); } .kn-formularz .wpcf7-submit:hover { background: var(--kk-pomarancz-h); transform: translateY(-2px); } .kn-formularz .wpcf7-not-valid-tip { margin-top: 6px; font-size: 14px; color: #B3261E; } .kn-formularz .wpcf7-response-output { margin: 18px 0 0 !important; padding: 14px 18px !important; border-radius: 14px; border-width: 1.5px !important; } /* Dokumenty */ .kn-dokumenty { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .kn-dokument { display: grid; grid-template-rows: auto 1fr auto; gap: 18px; height: 100%; padding: 28px; border-radius: var(--r-l); background: var(--karta); color: var(--tekst); text-decoration: none; box-shadow: 0 0 0 1px var(--linia); transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .kn-dokument:hover { transform: translateY(-5px); box-shadow: 0 0 0 1.5px var(--kk-granat), 0 30px 60px -34px rgba(21, 34, 56, .5); } .kn-dokument__ikona { position: relative; display: grid; place-items: center; width: 64px; height: 76px; border-radius: 12px; background: color-mix(in srgb, var(--kk-granat) 9%, #fff); color: var(--kk-granat); } .kn-dokument__ikona .kn-ikona { width: 30px; height: 30px; } .kn-dokument__ikona small { position: absolute; right: -10px; bottom: -8px; padding: 4px 7px; border-radius: 7px; background: var(--kk-pomarancz); color: #fff; font: 800 11px/1 var(--f); letter-spacing: .06em; } .kn-dokument__tytul { display: block; font: 800 22px/1.2 var(--f); font-stretch: 108%; letter-spacing: -.015em; } .kn-dokument__opis { display: block; margin-top: 8px; font-size: 15.5px; color: var(--tekst-2); } .kn-dokument__pobierz { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--kk-pomarancz-t); } .kn-dokument__pobierz .kn-ikona { width: 18px; height: 18px; transition: transform .35s var(--ease); } .kn-dokument:hover .kn-dokument__pobierz .kn-ikona { transform: translateY(3px); } .kn-pasek-danych { margin-top: 40px; padding: 24px 28px; border-radius: var(--r-m); background: var(--tlo-2); } .kn-pasek-danych p { margin: 0; } .kn-pasek-danych p + p { margin-top: 6px; color: var(--tekst-2); font-size: 15.5px; } /* Wolontariat i wsparcie: korzyści, kroki, sposoby */ .kn-korzysci, .kn-kroki, .kn-sposoby { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .kn-korzysc, .kn-krok, .kn-sposob { display: flex; flex-direction: column; gap: 10px; padding: 30px; border-radius: var(--r-l); background: var(--karta); box-shadow: 0 0 0 1px var(--linia); } .kn-korzysc p, .kn-krok p, .kn-sposob p { margin: 0; color: var(--tekst-2); } .kn-korzysc__ikona, .kn-krok__ikona, .kn-sposob__ikona { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 8px; border-radius: 16px; background: color-mix(in srgb, var(--kk-pomarancz) 12%, #fff); color: var(--kk-pomarancz-t); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); } .kn-korzysc:hover .kn-korzysc__ikona, .kn-krok:hover .kn-krok__ikona, .kn-sposob:hover .kn-sposob__ikona { transform: rotate(-8deg) scale(1.08); } .kn-korzysc__tytul, .kn-krok__tytul, .kn-sposob__tytul { margin: 0; font: 800 22px/1.2 var(--f); font-stretch: 108%; letter-spacing: -.015em; } .kn-sposob__dane { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--linia); } .kn-sposob__dane > span { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--tekst-2); } .kn-sposob__dane strong { font: 800 18px/1.2 var(--f); font-variant-numeric: tabular-nums; } .kn-sposob__dane .kn-kopiuj { padding: 9px 14px; font-size: 14px; } .kn-dzieki { margin: 48px 0 0; text-align: center; font: 800 clamp(26px, 3vw, 40px)/1.1 var(--f); font-stretch: 110%; letter-spacing: -.02em; color: var(--kk-pomarancz); } .kn-lista-ok { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .kn-lista-ok li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r-m); background: var(--karta); box-shadow: 0 0 0 1px var(--linia); } .kn-lista-ok .kn-ikona { color: var(--kk-zielen); margin-top: 3px; } .kn-pasek-zdjec { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .kn-pasek-zdjec li { aspect-ratio: 1 / 1; border-radius: var(--r-m); overflow: hidden; } .kn-pasek-zdjec img { width: 100%; height: 100%; object-fit: cover; } .kn-zakladki { display: flex; flex-wrap: wrap; gap: 8px; padding-top: clamp(24px, 3vw, 40px); } .kn-zakladki a { padding: 11px 18px; border-radius: 999px; background: var(--tlo-2); color: var(--tekst); font-weight: 600; text-decoration: none; transition: background .3s, color .3s; } .kn-zakladki a:hover { background: #E7E2D9; } .kn-zakladki a[aria-current] { background: var(--tekst); color: #fff; } .kn-wideo-plik { margin: 0; border-radius: var(--r-l); overflow: hidden; background: #000; } .kn-wideo-plik video { display: block; width: 100%; aspect-ratio: 16 / 9; } /* Osoby */ .kn-osoby { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .kn-osoba { display: flex; flex-direction: column; border-radius: var(--r-l); overflow: hidden; background: var(--karta); box-shadow: var(--cien-s); transition: transform .55s var(--ease); } .kn-osoba:hover { transform: translateY(-6px); } .kn-osoba__foto { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--tlo-2); } .kn-osoba__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .kn-osoba:hover .kn-osoba__foto img { transform: scale(1.05); } .kn-osoba__tekst { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 26px; } .kn-osoba__rola { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--kk-pomarancz-t); } .kn-osoba__nazwa { margin: 0; font: 800 24px/1.15 var(--f); font-stretch: 108%; letter-spacing: -.015em; } .kn-osoba__opis { margin: 6px 0 0; font-size: 15.5px; color: var(--tekst-2); } .kn-osoba .kn-link-strzalka { margin-top: 10px; } .kn-zarzad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 480px)); gap: 24px; } .kn-zarzad__karta { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 26px; border-radius: var(--r-l); background: var(--karta); color: var(--tekst); text-decoration: none; box-shadow: var(--cien-s); transition: transform .55s var(--ease), box-shadow .55s; } .kn-zarzad__karta:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(21, 34, 56, .5); } .kn-zarzad__foto { margin: 0 0 12px; aspect-ratio: 1 / 1; border-radius: calc(var(--r-l) - 8px); overflow: hidden; } .kn-zarzad__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .kn-zarzad__karta:hover .kn-zarzad__foto img { transform: scale(1.05); } .kn-zarzad__rola { padding: 0 8px; font-size: 14.5px; font-weight: 600; color: var(--kk-pomarancz-t); } .kn-zarzad__nazwa { padding: 0 8px; font: 800 30px/1.1 var(--f); font-stretch: 110%; letter-spacing: -.02em; } .kn-zarzad__lead { padding: 0 8px; color: var(--tekst-2); } .kn-zarzad__karta .kn-link-strzalka { padding: 6px 8px 0; } .kn-biogram { display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: clamp(28px, 5vw, 72px); align-items: end; padding-block: clamp(48px, 7vw, 96px) clamp(36px, 4vw, 56px); } .kn-biogram__foto { margin: 0; aspect-ratio: 1 / 1; border-radius: var(--r-l); overflow: hidden; } .kn-biogram__foto img { width: 100%; height: 100%; object-fit: cover; } /* Statut */ .kn-statut { display: grid; grid-template-columns: 300px 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; } .kn-statut__spis { position: sticky; top: 96px; } .kn-statut__spis ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .kn-statut__spis a { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; color: var(--tekst); text-decoration: none; font-size: 15px; line-height: 1.35; transition: background .25s, box-shadow .25s; } .kn-statut__spis a span { font-size: 13px; color: var(--tekst-2); } .kn-statut__spis a:hover, .kn-statut__spis a.is-aktywny { background: var(--tlo-2); } .kn-statut__spis a.is-aktywny { box-shadow: inset 3px 0 0 var(--kk-pomarancz); } .kn-statut__tresc { max-width: 760px; font-size: 17.5px; line-height: 1.7; color: #2D323C; } .kn-statut__rozdzial { padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--linia); scroll-margin-top: 100px; } .kn-statut__tytul { margin: 0 0 24px; font: 800 clamp(28px, 3vw, 40px)/1.1 var(--f); font-stretch: 110%; letter-spacing: -.02em; color: var(--tekst); } .kn-statut .kn-statut__par { margin: 28px 0 8px; font: 800 17px/1.2 var(--f); color: var(--kk-pomarancz-t); } .kn-statut__pod { margin: 24px 0 8px; font: 800 19px/1.25 var(--f); color: var(--tekst); } .kn-statut__lista { margin: 0 0 1em; padding-left: 1.4em; } .kn-statut__lista li { margin-bottom: .45em; padding-left: .2em; } .kn-statut p { margin: 0 0 1em; } /* Logotypy */ .kn-logotypy { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } .kn-sekcja--ciasna .kn-tytul + .kn-logotypy { margin-top: 28px; } .kn-logotyp { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 22px; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px var(--linia); transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .kn-logotyp img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .78; transition: filter .45s, opacity .45s, transform .6s var(--ease); } .kn-logotyp:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--linia), 0 24px 50px -30px rgba(21, 34, 56, .45); } .kn-logotyp:hover img { filter: none; opacity: 1; transform: scale(1.05); } /* Landing zespołu (barwy z --z-*) */ .kn-landing { background: var(--z-jasny, #fff); } .kn-landing__hero { position: relative; min-height: clamp(560px, 86svh, 900px); display: flex; align-items: flex-end; overflow: hidden; background: var(--z-tlo); color: #fff; isolation: isolate; } .kn-landing__tlo { position: absolute; inset: -6% 0; z-index: -2; } .kn-landing__tlo img { width: 100%; height: 100%; object-fit: cover; animation: kn-wjazd-landing 2.2s var(--ease) both; } .kn-landing__hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--z-tlo) 0%, color-mix(in srgb, var(--z-tlo) 70%, transparent) 34%, color-mix(in srgb, var(--z-tlo) 10%, transparent) 72%), linear-gradient(90deg, color-mix(in srgb, var(--z-tlo) 70%, transparent) 0%, transparent 60%); } .kn-landing__glowa { padding-block: 0 clamp(48px, 7vw, 96px); } .kn-landing__logo { display: block; height: clamp(56px, 7vw, 96px); width: auto; max-width: 300px; object-fit: contain; object-position: left; margin-bottom: 22px; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .35)); } .kn-zespol-con-grazia .kn-landing__logo { height: clamp(72px, 8vw, 110px); } .kn-landing__krotko { margin: 0 0 8px; font: 600 17px/1.3 var(--f); color: var(--z-akcent); } .kn-landing__nazwa { margin: 0; max-width: 16ch; font: 800 clamp(48px, 7.6vw, 116px)/.95 var(--f); font-stretch: 112%; letter-spacing: -.035em; text-wrap: balance; } .kn-landing__intro { padding: var(--sekcja) 0; background: var(--z-jasny); } .kn-landing__lead { margin: 0 0 32px; font: 700 clamp(22px, 2.2vw, 30px)/1.35 var(--f); font-stretch: 104%; letter-spacing: -.01em; color: var(--tekst); } .kn-fakty-duze { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 0; } .kn-fakty-duze div { padding: 18px 18px 18px 0; border-top: 1px solid var(--linia); } .kn-fakty-duze dt { font-size: 14px; color: var(--tekst-2); } .kn-fakty-duze dd { margin: 4px 0 0; font: 800 clamp(22px, 2vw, 28px)/1.15 var(--f); font-stretch: 108%; color: var(--z-tekst-akcent); } .kn-landing__galeria { padding: 0 0 var(--sekcja); background: var(--z-jasny); } .kn-mozaika { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(160px, 18vw, 260px); gap: 14px; } .kn-mozaika .kn-galeria__el { margin: 0; } .kn-mozaika .kn-galeria__btn { height: 100%; border-radius: var(--r-m); } .kn-mozaika .kn-galeria__btn img { height: 100%; object-fit: cover; } .kn-mozaika li:nth-child(1) { grid-column: span 4; grid-row: span 2; } .kn-mozaika li:nth-child(2) { grid-column: span 2; grid-row: span 1; } .kn-mozaika li:nth-child(3) { grid-column: span 2; grid-row: span 1; } .kn-mozaika li:nth-child(4), .kn-mozaika li:nth-child(5) { grid-column: span 3; grid-row: span 1; } .kn-mozaika li:nth-child(4):last-child { grid-column: span 6; } .kn-zespol-con-grazia .kn-mozaika li:nth-child(1), .kn-zespol-con-grazia .kn-mozaika li:nth-child(2) { grid-column: span 3; grid-row: span 2; } .kn-landing__nagrody { padding: var(--sekcja) 0; background: var(--z-tlo); color: #fff; } .kn-landing__nagrody .kn-tytul { color: #fff; } .kn-osiagniecia { list-style: none; margin: 0; padding: 0; } .kn-osiagniecia li { display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 17px; color: rgba(255, 255, 255, .9); } .kn-osiagniecia__rok { font: 800 20px/1.3 var(--f); font-stretch: 108%; color: var(--z-akcent); font-variant-numeric: tabular-nums; } .kn-landing__filmy { padding: var(--sekcja) 0; background: var(--z-jasny); } .kn-landing__filmy .kn-tytul, .kn-landing__inne .kn-tytul { margin-bottom: 32px; } .kn-landing__inne { padding: var(--sekcja) 0; background: var(--tlo); } .kn-inne-zespoly { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .kn-inny-zespol { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; padding: 24px; border-radius: var(--r-l); overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; } .kn-inny-zespol__foto { position: absolute; inset: 0; z-index: -2; } .kn-inny-zespol__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .kn-inny-zespol::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--z-tlo) 0%, color-mix(in srgb, var(--z-tlo) 30%, transparent) 70%); } .kn-inny-zespol__nazwa { font: 800 26px/1.1 var(--f); font-stretch: 110%; letter-spacing: -.02em; } .kn-inny-zespol__krotko { margin-top: 4px; color: var(--z-akcent); font-weight: 600; } .kn-inny-zespol:hover .kn-inny-zespol__foto img { transform: scale(1.07); } /* Filmy (lekki YouTube) */ .kn-filmy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .kn-filmy--duze .kn-film--glowny { grid-column: span 2; grid-row: span 2; } .kn-film { margin: 0; } .kn-film__przycisk { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--r-m); overflow: hidden; background: #000; cursor: pointer; } .kn-film__przycisk img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform 1s var(--ease), opacity .4s; } .kn-film__graj { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--tekst); transform: translate(-50%, -50%); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), background .3s, color .3s; } .kn-film__graj .kn-ikona { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; } .kn-film__przycisk:hover img { transform: scale(1.05); opacity: 1; } .kn-film__przycisk:hover .kn-film__graj { transform: translate(-50%, -50%) scale(1.12); background: var(--z-akcent, var(--kk-pomarancz)); color: #fff; } .kn-film iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-m); } .kn-film__tytul { margin-top: 12px; font: 700 16.5px/1.35 var(--f); color: var(--tekst); } .kn-film--glowny .kn-film__tytul { font-size: 20px; } .kn-odtwarzacz { border-radius: var(--r-l); overflow: hidden; background: var(--kk-noc); color: #fff; } .kn-odtwarzacz__okladka { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: clamp(24px, 4vw, 40px); } .kn-odtwarzacz__ikona { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 22px; background: var(--kk-pomarancz); } .kn-odtwarzacz__ikona .kn-ikona { width: 38px; height: 38px; } .kn-odtwarzacz .kn-nad { color: var(--kk-zielen-j); margin-bottom: 6px; } .kn-odtwarzacz__tytul { margin: 0; font: 800 clamp(24px, 2.6vw, 34px)/1.1 var(--f); font-stretch: 110%; } .kn-odtwarzacz__opis { margin: 8px 0 0; color: rgba(255, 255, 255, .78); } .kn-odtwarzacz__ramka iframe { display: block; width: 100%; height: 520px; border: 0; } /* Przestrzeń Kultury */ .kn-os-lat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .kn-os-lat li { position: relative; display: grid; gap: 10px; padding: 28px; border-radius: var(--r-l); background: var(--karta); box-shadow: 0 0 0 1px var(--linia); } .kn-os-lat__rok { font: 800 48px/1 var(--f); font-stretch: 112%; color: var(--kk-granat); } .kn-os-lat__opis { color: var(--tekst-2); } /* Wpisy */ .kn-artykul__glowa { padding-block: clamp(40px, 6vw, 88px) clamp(28px, 4vw, 48px); } .kn-artykul__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 22px; font: 600 15px/1.3 var(--f); color: var(--tekst-2); } .kn-artykul__wroc { display: inline-flex; align-items: center; gap: 6px; color: var(--tekst); text-decoration: none; } .kn-artykul__wroc .kn-ikona { width: 18px; height: 18px; transition: transform .35s var(--ease); } .kn-artykul__wroc:hover .kn-ikona { transform: translateX(-4px); } .kn-artykul__glowa .kn-tytul--h1 { font-size: clamp(36px, 4.8vw, 68px); } .kn-artykul__foto { margin: 0 auto 40px; } .kn-artykul__foto img { display: block; width: 100%; border-radius: var(--r-l); } .kn-tresc { padding-bottom: clamp(40px, 6vw, 80px); } .kn-archiwum { padding-bottom: clamp(64px, 8vw, 120px); } .kn-stronicowanie { display: flex; justify-content: center; margin-top: 48px; } .kn-stronicowanie .page-numbers { display: inline-grid; place-items: center; min-width: 46px; height: 46px; margin: 0 3px; padding: 0 12px; border-radius: 999px; color: var(--tekst); font-weight: 700; text-decoration: none; transition: background .25s; } .kn-stronicowanie a.page-numbers:hover { background: var(--tlo-2); } .kn-stronicowanie .current { background: var(--kk-granat); color: #fff; } .kn-pusto { font-size: 18px; color: var(--tekst-2); } /* Treść z Elementora w nowej oprawie: czcionki, kolory i ozdobniki ujednolicone */ .kn-tresc--elementor :is(.elementor-heading-title, h1, h2, h3, h4, h5, h6) { font-family: var(--f) !important; font-stretch: 110%; font-weight: 800 !important; letter-spacing: -.02em !important; line-height: 1.12 !important; text-transform: none !important; } .kn-tresc--elementor :is(p, li, .elementor-widget-text-editor, .elementor-icon-list-text, .elementor-button-text, .ekit-heading--subtitle, .elementskit-section-subtitle) { font-family: var(--f) !important; } .kn-tresc--elementor .elementor-widget-text-editor, .kn-tresc--elementor .elementor-widget-text-editor p { font-size: 17px; line-height: 1.7; color: #2D323C; } .kn-tresc--elementor :is(.elementskit-border-divider, .elementskit-border-star, .ekit_heading_separetor_wraper, .elementor-divider) { display: none !important; } .kn-tresc--elementor :is(.elementskit-section-subtitle, .ekit-heading--subtitle) { font-size: 15px !important; font-weight: 650 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--kk-pomarancz-t) !important; } .kn-tresc--elementor :is(.elementskit-section-subtitle, .ekit-heading--subtitle)::before, .kn-tresc--elementor :is(.elementskit-section-subtitle, .ekit-heading--subtitle)::after { display: none !important; } .kn-tresc--elementor .elementor-button { border-radius: 999px !important; background: var(--kk-pomarancz) !important; color: #fff !important; font-weight: 700 !important; } .kn-tresc--elementor img { border-radius: 14px; } /* ===== Przejścia między stronami ===== */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: kn-vt-wyj .35s var(--ease-io) both; } ::view-transition-new(root) { animation: kn-vt-wej .55s var(--ease) both; } ::view-transition-group(kn-naglowek) { animation: none; } /* ===== Klatki animacji ===== */ @keyframes kn-postep { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes kn-kropka { 0% { box-shadow: 0 0 0 0 var(--m-blask); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } } @keyframes kn-poswiata { 0%, 100% { box-shadow: 0 18px 44px -16px var(--m-blask), 0 0 0 0 transparent; } 50% { box-shadow: 0 20px 56px -10px var(--m-blask), 0 0 0 6px color-mix(in srgb, var(--m-blask) 22%, transparent); } } @keyframes kn-nuta { 0% { opacity: 0; transform: translateY(-.7em) rotate(-10deg); } 55% { opacity: 1; transform: translateY(.06em) rotate(3deg); } 100% { opacity: 1; transform: none; } } @keyframes kn-fala { 0%, 100% { transform: none; } 40% { transform: translateY(-.14em) rotate(-4deg); } } @keyframes kn-kwadrat { 0%, 100% { transform: none; } 45% { transform: scale(.8) rotate(10deg); } } @keyframes kn-z-prawej { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes kn-pojaw { from { opacity: 0; } to { opacity: 1; } } @keyframes kn-wjazd-landing { from { transform: scale(1.12); opacity: .4; } to { transform: none; opacity: 1; } } @keyframes kn-vt-wyj { to { opacity: 0; transform: translateY(-14px); } } @keyframes kn-vt-wej { from { opacity: 0; transform: translateY(22px); } } /* ===== Szerokości ===== */ /* Pełne menu z przełącznikiem języka potrzebuje ~1230 px: między 1261 a 1440 px ściskamy odstępy */ @media (min-width: 1261px) and (max-width: 1440px) { .kn-naglowek__wnetrze { gap: 12px; padding-inline: 28px; } .kn-nav__link { padding: 11px 10px; } .kn-jezyk .kn-jezyk__strz { display: none; } .kn-naglowek__wnetrze > .kn-przycisk--kontakt { padding: 12px 18px; } } @media (max-width: 1260px) { .kn-nav, .kn-naglowek__wnetrze > .kn-przycisk--kontakt { display: none; } .kn-burger { display: inline-flex; margin-left: 0; } .kn-jezyk { margin-left: auto; } .kn-naglowek__wnetrze { gap: 10px; } } @media (max-width: 1100px) { .kn-zespoly__siatka { grid-template-columns: repeat(2, 1fr); } .kn-zespoly__siatka > li:nth-child(even) { margin-top: 40px; } .kn-programy { grid-template-columns: repeat(2, 1fr); } .kn-stopka__siatka { grid-template-columns: 1fr 1fr; } .kn-kontakt__karty { grid-template-columns: repeat(2, 1fr); } .kn-osoby { grid-template-columns: repeat(2, 1fr); } .kn-statut { grid-template-columns: 1fr; } .kn-statut__spis { position: static; } .kn-statut__spis ol { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } } @media (max-width: 900px) { .kn-onas__siatka, .kn-wesprzyj__siatka, .kn-dwa, .kn-dwa--waski-lewy, .kn-kontakt__siatka, .kn-podhero--foto .kn-podhero__siatka { grid-template-columns: 1fr; } .kn-onas__zdjecia { min-height: 0; aspect-ratio: 1 / .92; } .kn-liczby { grid-template-columns: repeat(2, 1fr); } .kn-liczby__el:nth-child(3) { padding-left: 0; border-left: 0; } .kn-liczby__el:nth-child(n + 3) { border-top: 1px solid var(--linia); margin-top: 30px; } .kn-aktualnosci__siatka, .kn-aktualnosci__siatka--trzy { grid-template-columns: 1fr 1fr; } .kn-aktualnosci__siatka .kn-wpis--duzy { grid-column: 1 / -1; grid-row: auto; } .kn-aktualnosci__siatka:not(.kn-aktualnosci__siatka--trzy) .kn-wpis:not(.kn-wpis--duzy) .kn-wpis__link { display: flex; } .kn-aktualnosci__siatka:not(.kn-aktualnosci__siatka--trzy) .kn-wpis:not(.kn-wpis--duzy) .kn-wpis__foto { aspect-ratio: 16 / 10; min-height: 0; } .kn-korzysci, .kn-kroki, .kn-sposoby, .kn-dokumenty, .kn-inne-zespoly, .kn-os-lat { grid-template-columns: 1fr; } .kn-filmy { grid-template-columns: 1fr 1fr; } .kn-filmy--duze .kn-film--glowny { grid-column: 1 / -1; grid-row: auto; } .kn-kontakt__dane { position: static; } .kn-pasek-zdjec { grid-template-columns: repeat(2, 1fr); } .kn-biogram { grid-template-columns: 1fr; } .kn-biogram__foto { max-width: 360px; } .kn-mozaika { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; } .kn-mozaika li:nth-child(n) { grid-column: span 1 !important; grid-row: span 1 !important; } .kn-mozaika li:nth-child(1) { grid-column: 1 / -1 !important; grid-row: span 2 !important; } .kn-odtwarzacz__okladka { grid-template-columns: auto 1fr; } .kn-odtwarzacz__okladka .kn-przycisk { grid-column: 1 / -1; justify-self: start; } } @media (max-width: 760px) { .kn-hero { padding: 8px 8px 0; } .kn-hero__ramka { height: calc(100svh - var(--naglowek-h) - 16px); min-height: 600px; max-height: 820px; border-radius: 26px; } .kn-slajd__tlo::after { background: linear-gradient(0deg, rgba(9, 7, 14, .92) 0%, rgba(9, 7, 14, .66) 46%, rgba(9, 7, 14, .1) 80%); } .kn-slajd__tresc { padding: 24px 22px 92px; } .kn-hero__strzalka { top: auto; bottom: 16px; margin-top: 0; width: 52px; height: 52px; } .kn-hero__strzalka--lewo { left: 16px; } .kn-hero__strzalka--prawo { right: 16px; } .kn-slajd__logo { height: 76px; margin: 16px 0 12px; } .kn-slajd__opis { margin: 12px 0 22px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .kn-zespoly__siatka { grid-template-columns: 1fr 1fr; gap: 14px; } .kn-zespoly__siatka > li:nth-child(even) { margin-top: 28px; } .kn-zespol__nazwa { font-size: 19px; } .kn-zespol__opis { padding: 16px; } .kn-programy, .kn-aktualnosci__siatka, .kn-aktualnosci__siatka--trzy, .kn-osoby, .kn-zarzad, .kn-kontakt__karty { grid-template-columns: 1fr; } .kn-galeria__siatka { columns: 2; column-gap: 10px; } .kn-galeria__el { margin-bottom: 10px; } .kn-galeria__btn { border-radius: 12px; } .kn-stopka__siatka { grid-template-columns: 1fr; gap: 32px; } .kn-lightbox[open] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; } .kn-lightbox__kadr { grid-column: 1 / -1; grid-row: 1; height: auto; padding: 64px 8px 8px; } .kn-lightbox__kadr img { max-height: calc(100dvh - 170px); } .kn-lightbox__nav { grid-row: 2; margin: 0 auto 52px; } .kn-lightbox__nav--poprz { grid-column: 1; } .kn-lightbox__nav--nast { grid-column: 2; } .kn-krs { border-radius: 24px; padding: 16px 18px; } .kn-filmy { grid-template-columns: 1fr; } .kn-formularz__dwa { grid-template-columns: 1fr; } .kn-lata__rok { grid-template-columns: 1fr; gap: 10px; } .kn-osiagniecia li { grid-template-columns: 1fr; gap: 4px; } .kn-fakty-duze { grid-template-columns: 1fr 1fr; } .kn-odtwarzacz__ramka iframe { height: 420px; } } @media (max-width: 480px) { .kn-nowa { font-size: 16.5px; } .kn-logo__svg { height: 38px; } .kn-burger span { display: none; } .kn-liczby { grid-template-columns: 1fr 1fr; } .kn-liczby__el, .kn-liczby__el + .kn-liczby__el { padding: 24px 12px 0 0; border-left: 0; } .kn-liczby__el:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--linia); } .kn-zespoly__siatka { grid-template-columns: 1fr; } .kn-zespoly__siatka > li:nth-child(even) { margin-top: 0; } .kn-zespol__foto { aspect-ratio: 4 / 3.4; } .kn-mozaika { grid-auto-rows: 150px; } .kn-pasek-zdjec { grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { .kn-nowa *, .kn-nowa *::before, .kn-nowa *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } .kn-js [data-reveal] { opacity: 1; transform: none; } .kn-js [data-odkryj] img { clip-path: none; } .kn-js [data-odkryj] img, .kn-l > span { transform: none; } .kn-nuty .kn-n { opacity: 1; transform: none; } .kn-js [data-znak] .kn-znak rect { opacity: 1; transform: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* ===== Runda 3: płynność, menu, język, galeria, ładowanie ===== */ @keyframes kn-kropka { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } } /* Tłumaczenia: długie słowa (niemiecki „Zusammenschluss”, cyrylica) nie mogą rozpychać kolumn ani wychodzić poza ekran. Po przetłumaczeniu Google ustawia lang strony na język docelowy, więc hyphens: auto dzieli słowa według jego reguł. */ .kn-nowa :is([class*="__siatka"], .kn-dwa, .kn-glowa) > * { min-width: 0; } .kn-nowa :is(h1, h2, h3, .kn-tytul, .kn-slajd__haslo) { overflow-wrap: break-word; } html[class*="translated-"] .kn-nowa :is(h1, h2, h3, h4, .kn-tytul, .kn-slajd__haslo, .kn-przycisk, .kn-cta) { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; } /* Przełącznik języka (zamiast pływającej flagi GTranslate) */ .kn-nowa #gt_float_wrapper { display: none !important; } .kn-jezyk { position: relative; flex: 0 0 auto; } .kn-jezyk__btn { display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 12px 0 13px; border: 1.5px solid var(--linia); border-radius: 999px; background: transparent; color: var(--tekst); font: 700 14px/1 var(--f); letter-spacing: .04em; cursor: pointer; transition: background .3s, border-color .3s, transform .3s var(--ease); } .kn-jezyk__btn:hover, .kn-jezyk.is-otwarty .kn-jezyk__btn { background: #fff; border-color: rgba(29, 29, 27, .28); } .kn-jezyk__btn:active { transform: scale(.95); } .kn-jezyk__btn .kn-ikona { width: 18px; height: 18px; } .kn-jezyk .kn-jezyk__strz { width: 14px; height: 14px; opacity: .55; transition: transform .45s var(--ease); } .kn-jezyk.is-otwarty .kn-jezyk__strz { transform: rotate(180deg); } .kn-jezyk__lista { position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; min-width: 220px; margin: 0; padding: 8px; list-style: none; border-radius: 18px; background: #fff; box-shadow: 0 30px 70px -30px rgba(21, 34, 56, .45), 0 0 0 1px rgba(21, 34, 56, .07); opacity: 0; visibility: hidden; transform: translate3d(0, -8px, 0) scale(.95); transform-origin: top right; transition: opacity .25s var(--ease), transform .5s var(--ease), visibility 0s .5s; } .kn-jezyk.is-otwarty .kn-jezyk__lista { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .kn-jezyk__lista li { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .25s, transform .45s var(--ease); } .kn-jezyk.is-otwarty .kn-jezyk__lista li { opacity: 1; transform: none; transition-delay: calc(.05s + var(--i, 0) * .035s); } .kn-jezyk__lista button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 11px; background: none; color: var(--tekst); font: 550 15.5px/1.2 var(--f); text-align: left; cursor: pointer; transition: background .25s; } .kn-jezyk__lista b { display: inline-grid; place-items: center; min-width: 32px; height: 22px; border-radius: 6px; background: var(--tlo-2); font-size: 11.5px; letter-spacing: .05em; transition: background .25s, color .25s; } .kn-jezyk__lista button:hover { background: var(--tlo-2); } .kn-jezyk__lista button:hover b { background: #fff; } .kn-jezyk__lista button[aria-current] b { background: var(--kk-pomarancz); color: #fff; } @media (max-width: 480px) { .kn-jezyk__btn { height: 44px; padding: 0 10px; gap: 5px; } .kn-jezyk__btn .kn-jezyk__strz { display: none; } } /* Menu rozwijane na komputerze: panel spływa, pozycje wchodzą po kolei. Pod otwartą pozycją leży niewidzialny „most” do panelu, więc zjazd myszą w dół nie zamyka menu. */ .kn-panel { transform: translate3d(-50%, 8px, 0); transition: opacity .3s ease, transform .45s var(--ease), visibility 0s .45s; } .kn-nav__el.is-otwarty > .kn-panel { transform: translate3d(-50%, 0, 0); } .kn-nav__el--rozw.is-otwarty::after { content: ""; position: absolute; left: -24px; right: -24px; top: 100%; height: 24px; } .kn-js .kn-panel li { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .25s ease, transform .45s var(--ease); } .kn-js .kn-nav__el.is-otwarty .kn-panel li { opacity: 1; transform: none; transition-delay: calc(.03s + var(--i, 0) * .025s); } /* Menu na telefonie: okno na cały ekran, własne przyciemnienie (::backdrop nie wszędzie się animuje) i panel, który spokojnie wjeżdża z prawej; pozycje pojawiają się łagodnie, gdy panel jest już prawie na miejscu */ .kn-mob, .kn-mob[open] { margin: 0; padding: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; background: transparent; overflow: hidden; animation: none; } .kn-mob::backdrop { background: transparent; } .kn-mob::before { content: ""; position: absolute; inset: 0; background: rgba(15, 24, 40, .5); opacity: 0; transition: opacity .7s ease; } .kn-mob.is-widoczne::before { opacity: 1; } .kn-mob.is-zamyka::before { transition-duration: .5s; } .kn-mob__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: #fff; overflow: auto; overscroll-behavior: contain; transform: translate3d(100%, 0, 0); transition: transform .8s cubic-bezier(.65, 0, .35, 1); } .kn-mob.is-widoczne .kn-mob__panel { transform: none; } .kn-mob.is-zamyka .kn-mob__panel { transition-duration: .55s; } .kn-mob__lista > li, .kn-mob__dol > * { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .3s ease, transform .4s ease; } .kn-mob.is-widoczne .kn-mob__lista > li { opacity: 1; transform: none; transition: opacity .7s ease, transform .9s cubic-bezier(.22, .61, .36, 1); transition-delay: calc(.4s + var(--i, 0) * .06s); } .kn-mob.is-widoczne .kn-mob__dol > * { opacity: 1; transform: none; transition: opacity .7s ease, transform .9s cubic-bezier(.22, .61, .36, 1); transition-delay: .8s; } .kn-mob__pod { overflow: hidden; } .kn-mob__podlink { transition: background .25s, color .25s, transform .3s var(--ease); } .kn-mob__podlink:active { transform: scale(.98); } /* Galeria: zdjęcia wjeżdżają kaskadą i odsłaniają się od dołu (przycięte samo zdjęcie, bez zasłony) */ .kn-js .kn-galeria__el:not(.is-gotowy) { transition: opacity .9s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0ms); } .kn-js .kn-galeria__el:not(.is-gotowy) .kn-galeria__btn { background: transparent; } /* Tylko transformacje 2D: 3D na elementach układu kolumnowego potrafi w Safari wyłączyć malowanie kolejnych kolumn */ .kn-js .kn-galeria__el:not(.is-in) { opacity: 0; transform: translate(0, 64px) scale(.94); } .kn-js .kn-galeria__el:not(.is-in) .kn-galeria__btn img { clip-path: inset(100% 0 0 0); transform: scale(1.25); } .kn-js .kn-galeria__el.is-in:not(.is-gotowy) .kn-galeria__btn img { clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--ease-io), transform 1.8s var(--ease); transition-delay: calc(var(--d, 0ms) + 120ms); } .kn-galeria__el.is-gotowy { transition: opacity .35s var(--ease), transform .45s var(--ease); } /* Animacja ładowania z logo (raz na wizytę) */ .kn-ladowanie { display: none; } .kn-laduje .kn-ladowanie, .kn-wychodzi .kn-ladowanie { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; background: var(--tlo); } .kn-ladowanie__srodek { width: clamp(230px, 34vw, 420px); } .kn-ladowanie__svg { display: block; width: 100%; height: auto; overflow: visible; } .kn-ladowanie rect { transform-box: fill-box; transform-origin: center; animation: kn-l-kwadrat .75s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--d, 0) * 1ms + 120ms); } .kn-ladowanie g > * { transform-box: fill-box; transform-origin: 50% 100%; animation: kn-l-litera .7s var(--ease) both; animation-delay: calc(var(--l, 0) * 22ms + 420ms); } .kn-ladowanie__pasek { display: block; height: 3px; margin-top: clamp(20px, 3vw, 30px); border-radius: 3px; background: rgba(46, 71, 105, .1); overflow: hidden; } .kn-ladowanie__pasek i { display: block; height: 100%; border-radius: 3px; background: var(--kk-pomarancz); transform: scaleX(0); transform-origin: left; animation: kn-l-pasek 1.4s cubic-bezier(.45, 0, .2, 1) .2s forwards; } .kn-wychodzi .kn-ladowanie { animation: kn-l-kurtyna 1s cubic-bezier(.76, 0, .24, 1) .12s forwards; } .kn-wychodzi .kn-ladowanie__srodek { animation: kn-l-logo .55s var(--ease-io) forwards; } @keyframes kn-l-kwadrat { from { opacity: 0; transform: scale(0) rotate(-90deg); } to { opacity: 1; transform: none; } } @keyframes kn-l-litera { from { opacity: 0; transform: translate3d(0, 60%, 0) scaleY(1.2); } to { opacity: 1; transform: none; } } @keyframes kn-l-pasek { to { transform: scaleX(1); } } @keyframes kn-l-kurtyna { to { transform: translate3d(0, -100%, 0); border-radius: 0 0 50% 50% / 0 0 12vh 12vh; } } @keyframes kn-l-logo { to { opacity: 0; transform: translate3d(0, -28px, 0) scale(.96); } } @media (max-width: 760px) { /* Telefon: bez rozmycia pod szkłem na nagłówku (najdroższy efekt przy przewijaniu) */ .kn-naglowek.is-przewiniety { background: rgba(251, 250, 247, .94); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-reduced-motion: reduce) { .kn-ladowanie { display: none !important; } .kn-mob__panel { transform: none; } .kn-js .kn-galeria__el:not(.is-in), .kn-js .kn-galeria__el:not(.is-in) .kn-galeria__btn img { opacity: 1; transform: none; } .kn-js .kn-galeria__el:not(.is-in) .kn-galeria__btn img { clip-path: none; } .kn-slajd.is-wchodzi, .kn-slajd.is-wychodzi, .kn-slajd.is-wchodzi .kn-slajd__tlo { animation: none; } .kn-w > span { transform: none !important; } }