/*
* Poprawki sekcji poza hero. Ladowane po styles.css prototypu.
* Kazdy blok opisuje, co bylo nie tak — zeby przy przenoszeniu do
* docelowego motywu bylo wiadomo, czego nie cofac.
*/
/* ---------- 1. Jednolita szerokosc kontenerow ---------- */
/*
* .wrap ma max-width:var(--maxw) i padding 0 24px, ale .split i .fixtures
* definiowaly wlasne szerokosci (.fixtures nawet 820px), przez co bloki
* mialy rozne krawedzie. Sprowadzamy wszystkie do tej samej miary.
*/
.split,
.roster,
.calsec__grid,
.promos .wrap,
.sponsors .wrap {
/*
* width:100% jest tu konieczne, nie ozdobne. body ma display:flex
* (wzorzec przyklejonej stopki), wiec sekcje sa elementami flex,
* a margin-inline:auto wylacza im rozciaganie na szerokosc kontenera.
* Bez tego .split spadal do szerokosci swojej tresci — 846px zamiast 1320px.
* max-width sam tego nie naprawi, bo jest limitem, a nie wymuszeniem.
*/
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: 24px;
}
/*
* .fixtures ma w srodku wlasny .wrap, wiec kontener ustawiamy TAM.
* Gdy padding-inline trafial na oba, wciecie sie podwajalo (48px)
* i sekcja byla wezsza od reszty mimo tej samej zmierzonej szerokosci.
*/
.fixtures { max-width: none; padding-inline: 0; }
.fixtures > .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
/* ---------- 2. Tabela na wysokosc kalendarza ---------- */
/*
* Tabela ma konczyc sie na wysokosci kalendarza i przewijac w srodku.
*
* align-items:stretch tego NIE zalatwia — wyrownuje kolumny do WYZSZEJ,
* wiec to kalendarz rozciagal sie do tabeli. Wysokosc kalendarza wynika
* z jego tresci i CSS jej nie zna, dlatego limit ustawia JS
* (redesign/js/ui.js, sekcja "Tabela na wysokosc kalendarza").
* Wartosc ponizej to zapas na wypadek, gdyby skrypt sie nie wykonal.
*/
.calsec__grid { align-items: start; }
.calsec__grid .ltable {
display: flex;
flex-direction: column;
min-height: 0;
}
.calsec__grid .ltable__scroll {
min-height: 0;
max-height: 430px;
overflow-y: auto;
overscroll-behavior: contain;
}
/* dyskretny pasek przewijania, zeby nie rozbijal karty */
.calsec__grid .ltable__scroll::-webkit-scrollbar { width: 8px; }
.calsec__grid .ltable__scroll::-webkit-scrollbar-thumb {
background: rgba(0,0,0,.18); border-radius: 4px;
}
/* naglowek tabeli zostaje widoczny przy przewijaniu */
.calsec__grid .ltable__table th {
position: sticky; top: 0; z-index: 1;
}
/* ---------- 3. Modal zawodnika: numer i zamkniecie ---------- */
/*
* Numer stoi PRZED pozycja i nazwiskiem, w jednym rzedzie z nimi.
*
* Wczesniej lezal osobno w gornym rogu: najpierw po prawej, gdzie
* zderzal sie z przyciskiem zamkniecia, potem po lewej — gdzie z kolei
* przykryly go plakietki ze statystykami. W rzedzie z nazwiskiem nie ma
* z czym kolidowac, a jego wysokosc odpowiada obu wierszom razem.
*/
.roster__mcard .pd__id {
display: flex;
align-items: center;
gap: 12px;
}
.roster__mcard .pd__num {
position: static;
right: auto;
left: auto;
top: auto;
/* tyle, ile lacznie zajmuja wiersz pozycji i wiersz nazwiska */
font-size: 40px;
line-height: 1;
flex: 0 0 auto;
}
.roster__mcard .pd__idtxt { min-width: 0; }
/* ---------- 4. Strzalki slidera kadry ---------- */
/*
* Byly widoczne dopiero po najechaniu na slider, wiec nic nie sugerowalo,
* ze da sie przewijac. Teraz widac je od razu, a strzalka wstecz pojawia
* sie dopiero, gdy jest dokad wracac (stan ustawia redesign/js/ui.js).
*/
.roster__slider .roster__arrow { opacity: 1; }
.roster__slider[data-at-start="true"] .roster__arrow--prev,
.roster__slider[data-at-end="true"] .roster__arrow--next {
opacity: 0;
pointer-events: none;
}
/* ---------- 5. Odstepy w sekcji kadry ---------- */
/* Bylo 64px/72px — za duzo swiatla wewnatrz sekcji. */
.squad { padding-top: 15px; padding-bottom: 15px; }
/* ---------- 6. Kadra na zdjeciu zespolowym ---------- */
/*
* Tlo jak w sekcji kadry powyzej — zdjecie + zielony gradient, a nie
* plaska zielen. Te same pliki i te same wartosci, zeby obie sekcje
* czytaly sie jako jedna calosc.
*/
/*
* Sekcja to samo zdjecie — bez wlasnego paska tla nad nim, bo widac wtedy
* szew miedzy plaska zieleria a fotografia. Naglowek lezy NA zdjeciu.
*/
.teamshot {
position: relative;
overflow: hidden;
background: var(--green-darker);
color: #fff;
padding: 0;
}
.teamshot__head {
position: absolute;
z-index: 2;
top: 0; left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: var(--maxw);
padding: 22px 24px 40px;
margin: 0;
/* delikatne przyciemnienie u gory, zeby tekst byl czytelny na kazdym kadrze */
background: linear-gradient(180deg, rgba(6,28,15,.72) 0%, rgba(6,28,15,0) 100%);
pointer-events: none;
}
.teamshot__stage { position: relative; z-index: 1; }
.teamshot__head {
max-width: var(--maxw);
margin: 0 auto 16px;
padding-inline: 24px;
}
.teamshot__title {
font-family: var(--font-display);
font-weight: 800;
text-transform: uppercase;
font-size: clamp(24px, 2.4vw, 38px);
margin: 4px 0 6px;
}
.teamshot__sub { color: var(--muted-jasny); font-size: 14px; margin: 0; }
.teamshot__stage {
max-width: var(--maxw);
margin: 0 auto;
padding-inline: 24px;
}
/* Ramka = dokladnie obszar zdjecia. Kropki maja procenty wzgledem NIEJ,
inaczej liczylyby sie od padding-boxa sekcji i przy krawedziach
rozjezdzalyby sie o szerokosc marginesu. */
.teamshot__frame { position: relative; }
.teamshot__img { display: block; width: 100%; height: auto; border-radius: 12px; }
/*
* Zdjecie zespolowe jest tu TLEM, dokladnie tak jak w sekcji kadry powyzej.
* Gradient przepisany 1:1 z .squad::after — te same wartosci, zeby obie
* sekcje wygladaly identycznie.
*/
.teamshot__veil {
position: absolute;
inset: 0;
border-radius: 12px;
background: linear-gradient(180deg,
rgba(6,28,15,.74) 0%, rgba(6,28,15,.70) 55%, rgba(6,28,15,.86) 100%);
pointer-events: none;
transition: background .3s ease;
}
/* Przy aktywnej sylwetce lekko pogłębiamy przyciemnienie reszty zdjecia. */
/* Po wybraniu osoby reszta ciemnieje jeszcze bardziej, zeby sylwetka wyszla. */
.teamshot__frame.has-spot .teamshot__veil {
background: linear-gradient(180deg,
rgba(6,28,15,.88) 0%, rgba(6,28,15,.86) 55%, rgba(6,28,15,.93) 100%);
}
/* kropka przy glowie */
.teamshot__dot {
position: absolute;
width: 26px; height: 26px;
margin: -13px 0 0 -13px; /* srodek kropki na wspolrzednej */
padding: 0; border: 0;
background: none; cursor: pointer;
z-index: 2;
}
.teamshot__dot span {
display: block;
width: 13px; height: 13px;
margin: 6px auto 0;
border-radius: 50%;
background: rgba(255,255,255,.92);
box-shadow: 0 0 0 2px rgba(31,122,67,.9), 0 2px 8px rgba(0,0,0,.5);
transition: transform .16s ease, background .16s ease;
}
.teamshot__dot:hover span,
.teamshot__dot.is-active span { transform: scale(1.35); background: var(--green); }
/* puls, zeby bylo widac, ze da sie kliknac */
@media (prefers-reduced-motion: no-preference) {
.teamshot__dot span { animation: teamshotPulse 2.6s ease-in-out infinite; }
@keyframes teamshotPulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(31,122,67,.9), 0 2px 8px rgba(0,0,0,.5); }
50% { box-shadow: 0 0 0 6px rgba(31,122,67,.35), 0 2px 8px rgba(0,0,0,.5); }
}
}
/* karta z danymi — pojawia sie przy klikietej kropce */
.teamshot__card {
position: absolute;
z-index: 5;
width: 250px;
background: #fff;
color: var(--ink);
border-radius: 12px;
box-shadow: 0 20px 50px rgba(0,0,0,.35);
padding: 14px 16px 16px;
}
.teamshot__card[hidden] { display: none; }
.teamshot__card .tc__pos { font-size: var(--fs-etykieta); letter-spacing: .12em; text-transform: uppercase; color: var(--green); font-weight: 700; }
.teamshot__card .tc__name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 18px; line-height: 1.05; margin: 2px 0 10px; }
.teamshot__card .tc__row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 4px 0; border-top: 1px solid rgba(0,0,0,.08); }
.teamshot__card .tc__row b { font-weight: 600; }
.teamshot__card .tc__close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(0,0,0,.08); cursor: pointer; }
.teamshot__card .tc__todo { font-size: 12px; color: var(--muted); line-height: 1.4; }
/* ---------- 7. Sponsorzy w naglowku ---------- */
/*
* Trojka glownych sponsorow obok "Betclic 3. Liga". Pasek pozostaje
* widoczny po przewinieciu — prototyp go wtedy chowal (display:none).
*/
.site-header.is-scrolled .site-header__top,
.site-header.is-solid .site-header__top {
display: flex;
padding-block: 4px;
}
.sh-sponsors {
display: flex;
align-items: center;
gap: 18px;
margin-right: 18px;
}
.sh-sponsors__logo {
height: 20px;
width: auto;
/* oryginalne kolory od razu — bez odbarwiania na ciemnym pasku */
opacity: 1;
transition: opacity .2s ease;
}
.sh-sponsors__logo:hover { opacity: 1; }
.site-header.is-scrolled .sh-sponsors__logo,
.site-header.is-solid .sh-sponsors__logo { height: 18px; }
@media (max-width: 700px) { .sh-sponsors { display: none; } }
/* ---------- 8. Sponsorzy na srodku paska naglowka ---------- */
/*
* Pasek jest wyrownany do prawej (justify-content:flex-end), wiec sponsorzy
* ladowali w rogu obok Betclic. Wyciagamy ich z ukladu i kotwiczymy na
* srodku — plakietka ligi zostaje po prawej.
*/
.site-header__top { position: relative; }
.sh-sponsors {
position: absolute;
left: 50%;
transform: translateX(-50%);
margin: 0;
}
/* ---------- 9. Stopka: zielona powloka zamiast czerni i bieli ---------- */
/*
* Prototyp odbarwial zdjecie (grayscale(1)) i przykrywal je neutralna
* szarościa — stopka odcinala sie od reszty strony. Zdejmujemy odbarwienie
* i dajemy te sama zielen, ktorej uzywa sekcja kadry.
*/
.footer::before {
filter: brightness(.5) contrast(.95) saturate(1.05);
}
.footer::after {
background: linear-gradient(180deg,
rgba(6, 28, 15, .74) 0%,
rgba(6, 28, 15, .70) 55%,
rgba(6, 28, 15, .90) 100%);
}
/* ---------- 10. Rozwijane podmenu w gornym menu ---------- */
.site-header .hnav__item { position: relative; display: inline-block; }
.site-header .hnav__sub {
position: absolute;
top: 100%;
left: 50%;
/* 5px nizej — panel dotykal pozycji menu i wygladal, jakby na nia nachodzil */
margin-top: 5px;
transform: translateX(-50%) translateY(6px);
min-width: 210px;
padding: 8px 0;
background: #fff;
border-radius: 8px;
box-shadow: 0 18px 40px rgba(0,0,0,.28);
opacity: 0;
visibility: hidden;
transition: opacity .16s ease, transform .16s ease, visibility .16s;
z-index: 60;
}
/*
* Mostek nad panelem: bez niego kursor gubi kontakt w odstepie miedzy
* linkiem a panelem i podmenu znika w polowie drogi.
*/
.site-header .hnav__sub::before {
content: "";
position: absolute;
/* mostek musi pokryc takze nowy 5px odstep, inaczej kursor gubi panel */
left: 0; right: 0; top: -16px;
height: 16px;
}
.site-header .hnav__item:hover .hnav__sub,
.site-header .hnav__item:focus-within .hnav__sub {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.site-header .hnav__sub a {
display: block;
padding: 9px 18px;
color: #14181a;
font-family: var(--font-display);
font-weight: 600;
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background .14s ease, color .14s ease;
}
.site-header .hnav__sub a:hover { background: rgba(23,128,58,.10); color: var(--green); }
/* ---------- 11. Znak wodny w menu pelnoekranowym ---------- */
/*
* Bylo samo "Wisłoka" w rozmiarze 38vw — zawsze wychodzilo poza kadr
* i czytalo sie jak przypadkowy fragment. Teraz herb i pelna nazwa,
* dopasowane do szerokosci.
*/
.menu-overlay__watermark {
bottom: 4%;
display: flex;
align-items: center;
gap: 2.2vw;
font-size: 0;
white-space: nowrap;
opacity: .07;
}
.menu-overlay__crest { width: 12vw; max-width: 190px; height: auto; display: block; }
.menu-overlay__wmtext {
font-family: var(--font-display);
font-weight: 700;
font-size: 9vw;
line-height: .85;
letter-spacing: .01em;
color: var(--green-dark);
text-transform: uppercase;
}
/* ---------- 12. Teksty na zielonym tle ---------- */
/*
* Na ciemnej zieleni siedzialy szarosci (--muted) i ciemne naglowki —
* praktycznie nieczytelne. Wszystko na biel albo kremowy odcien z hero.
*/
/* na ciemnych sekcjach --muted przelacza sie na jasny odpowiednik (9.55:1) */
.squad, .teamshot, .social, .footer { --muted: var(--muted-jasny); }
.squad .eyebrow,
.teamshot .eyebrow { color: var(--muted-jasny); }
.squad .roster__title,
.teamshot__title,
.squad .blocktitle,
.squad .section-label { color: #fff; }
.squad .roster__sub,
.teamshot__sub { color: var(--muted-jasny); }
.squad .roster__hint { color: var(--muted-jasny); }
/* ---------- 13. Jednolita kolorystyka buttonow ---------- */
/*
* Prototyp mial cztery warianty (zielony, przezroczysty z obrysem,
* bialy, ghost). Sprowadzamy wszystkie akcje do jednego: zielone tlo,
* bialy tekst. Zakladki kadry zostaja zakladkami — to przelacznik stanu,
* nie akcja, wiec musi sie roznic.
*/
.btn,
.btn--ghost,
.btn--outline,
.cal__full,
.calpop__btn,
.fix__btn,
.promo__btn,
.pd__cta,
.nm__notify,
.hbtn {
background: var(--green);
border: 1.5px solid var(--green);
color: #fff;
}
.btn:hover,
.btn--ghost:hover,
.btn--outline:hover,
.cal__full:hover,
.calpop__btn:hover,
.fix__btn:hover,
.promo__btn:hover,
.pd__cta:hover,
.nm__notify:hover,
.hbtn:hover {
background: var(--green-dark);
border-color: var(--green-dark);
color: #fff;
}
.nm__notify svg { color: #fff; }
/* ---------- 14. Zdjecie zespolowe na pelna szerokosc ---------- */
.teamshot { padding-bottom: 0; }
.teamshot__stage { max-width: none; padding-inline: 0; }
.teamshot__frame { border-radius: 0; }
.teamshot__img,
.teamshot__veil { border-radius: 0; }
/*
* Podswietlenie osoby.
*
* Nie jest to dziura w przyciemnieniu — gradient promienisty zawsze da
* miekka poswiate, a ma byc ostry obrys. Zamiast tego kladziemy WYCINEK
* tego samego zdjecia w pelnych barwach: to samo tlo, przesuniete tak,
* zeby piksele pokryly sie co do jednego, przyciete ksztaltem zblizonym
* do sylwetki (okragla gora, proste boki) i obwiedzione zielona linia.
*
* Rozmiar i pozycje ustawia redesign/js/ui.js, bo wymagaja zmierzenia
* ramki w pikselach.
*
* Uwaga: prawdziwa sylwetka kazdej osoby jest tu nieosiagalna. Vision
* przy tak ciasnej grupie zwraca caly tylny rzad jako jeden obiekt,
* wiec wycinek per osoba dzialal tylko dla przedniego rzedu.
*/
.teamshot__spot {
position: absolute;
z-index: 3;
/*
* Wycieta sylwetka danej osoby (tlo usuniete), nalozona dokladnie
* na jej miejsce w zdjeciu. Zielona poswiata pod spodem odcina ja
* od przyciemnionego tla i pelni role obrysu.
*/
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
filter: drop-shadow(0 0 3px rgba(23,128,58,.95))
drop-shadow(0 0 14px rgba(23,128,58,.55))
drop-shadow(0 8px 18px rgba(0,0,0,.5));
pointer-events: none;
}
.teamshot__spot[hidden] { display: none; }
/* ---------- 15. Stopka: tlo kibicowskie jak w hero ---------- */
.footer::before {
/* sciezka od korzenia witryny — piec poziomow "../" bylo kruche */
background-image: url("../assets/hero-bg-fans.jpg");
background-position: center 45%;
background-size: cover;
filter: brightness(.45) contrast(.95) saturate(1.05);
}
.footer { color: #fff; }
.footer a { color: rgba(255,255,255,.88); }
.footer a:hover { color: #fff; }
.footer__bar,
.footer__bar span { color: var(--muted-jasny); }
/* ---------- 16. Sponsorzy: statycznie i w oryginalnych kolorach ---------- */
/*
* Prototyp przesuwal loga w nieskonczonosc (animacja marquee) i pokazywal
* je odbarwione, dopiero po najechaniu w kolorze. Zatrzymujemy je i dajemy
* pelne kolory od razu.
*
* Duplikaty usuwa redesign/js/ui.js — script.js wypelnia pasek lista
* podwojona (list.concat(list)), zeby petla byla plynna; przy statycznym
* ukladzie kazde logo pokazywaloby sie dwa razy.
*/
.sponsors .marquee {
overflow: visible;
/* wygaszanie krawedzi mialo sens tylko przy przewijaniu */
-webkit-mask-image: none;
mask-image: none;
}
.sponsors .marquee__track {
animation: none;
transform: none;
width: auto;
flex-wrap: wrap;
justify-content: center;
gap: 34px 56px;
}
.sponsors .marquee__item {
opacity: 1;
filter: none;
}
.sponsors .marquee__item:hover { opacity: 1; filter: none; }
/* ---------- 17. Karty "Historia" i "Szkółka": wlasciwe zdjecia ---------- */
/*
* Bez przyciemniania i bez odbarwiania. Prototyp mial tu ogolne tlo
* kibicowskie z grayscale(1) i mocnym gradientem — teraz sa konkretne
* zdjecia, wiec zaslanianie ich mija sie z celem.
*
* Tekst zostaje czytelny dzieki delikatnemu cieniowi, a nie warstwie
* przykrywajacej zdjecie.
*/
.split__cell.history {
background: url("../assets/historia.webp") center/cover no-repeat;
}
.split__cell.school {
background: url("../assets/szkolka.webp") center 30%/cover no-repeat;
}
/*
* Zdjecia zostaja odsloniete, ale sam tekst musi byc czytelny — nad jasnym
* banerem szkolki ginal calkowicie. Zamiast przykrywac cala fotografie
* dajemy gradient tylko od lewej krawedzi, pod kolumne tekstu.
*/
.split__cell.history::after,
.split__cell.school::after { content: none; }
.split__cell.history::before,
.split__cell.school::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(90deg,
rgba(6,20,12,.88) 0%,
rgba(6,20,12,.72) 34%,
rgba(6,20,12,.28) 62%,
rgba(6,20,12,0) 84%);
filter: none;
}
/*
* Kolor JAWNIE bialy. W arkuszu prototypu naglowki tych kart maja
* color:var(--ink) — byly projektowane na jasnym kaflu, a redesign
* podlozyl pod nie fotografie, wiec ciemny tekst ginal w zdjeciu.
*/
.split__cell.history h2,
.split__cell.school h2 {
color: #fff;
text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.split__cell.history p,
.split__cell.school p {
color: rgba(255,255,255,.94);
text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
/* ---------- 18. Stopka: haslo i podpis wykonawcy ---------- */
/* Haslo ta sama czcionka co w hero. */
.footer .slogan {
font-family: 'Caveat', cursive;
font-weight: 700;
font-size: 26px;
font-style: normal;
color: #fff;
}
.footer__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.footer__credit {
flex: 1;
text-align: center;
font-size: 13px;
color: var(--muted-jasny);
}
.footer__credit a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__credit a:hover { color: var(--green); }
@media (max-width: 760px) {
.footer__bar { flex-direction: column; text-align: center; }
}
/* Paginacja aktualnosci */
.news-pager{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:40px}
.news-pager .page-numbers{display:grid;place-items:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line-dark);border-radius:8px;font-family:var(--font-display);font-weight:600;color:var(--ink);text-decoration:none;transition:.16s var(--ease)}
.news-pager .page-numbers:hover{border-color:var(--green);color:var(--green-dark)}
.news-pager .page-numbers.current{background:var(--green);border-color:var(--green);color:#fff}
.news-pager .page-numbers.dots{border:0}
/* ---------- 19. Hero podstron w stylistyce hero ze strony glownej ---------- */
/*
* Grafika byla ta sama (hero-bg-fans.jpg), roznilo sie przyciemnienie:
* strona glowna ma lekki gradient (.35 -> .12 -> .5), podstrony mialy
* ciezki (.88 -> .72 -> .84) i wygladaly przez to plasko.
* Przepisujemy wartosci ze strony glownej, zostawiajac dotychczasowa
* wysokosc sekcji.
*/
/*
* Jeden odstep od naglowka na WSZYSTKICH podstronach.
*
* Prototyp dawal tu 62 px ponad wysokoscia naglowka, strona meczu 14 px,
* a strona glowna jeszcze co innego — okruszki zaczynaly sie na kazdej
* podstronie w innym miejscu. Wszedzie 40 px.
*/
.subpage-hero {
background-position: center center;
/*
* JEDYNE miejsce, w ktorym ustawiamy ten odstep.
*
* var(--hh) to wysokosc PRZEZROCZYSTEGO naglowka, ktory lezy NA hero —
* bez tego skladnika okruszki chowaja sie pod menu. Do tego 8 px oddechu
* i nic wiecej: wczesniejsze 40 px robily pusty pas miedzy menu
* a sciezka nawigacji.
*/
padding-top: calc(var(--hh) + 8px);
}
.subpage-hero::before {
background: linear-gradient(180deg,
rgba(7,30,16,.35) 0%,
rgba(7,30,16,.12) 34%,
rgba(7,30,16,.5) 100%);
}
/* Czytelnosc tekstu bez zaciemniania calego kadru — jak w hero. */
.subpage-hero .crumbs,
.subpage-hero h1,
.subpage-hero p { text-shadow: 0 2px 14px rgba(0,0,0,.55); }
/* ---------- 20. Rozgrywki: terminarz, wyniki, przelacznik sezonow ---------- */
.rozgrywki { background: var(--paper); padding: 36px 0 56px; }
.rozgrywki__top {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
}
.rozgrywki__title {
font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(22px, 2.4vw, 34px); margin: 4px 0 0; color: var(--ink);
}
/* Przelacznik sezonow — biezacy jest pierwszy i domyslnie aktywny. */
.rozgrywki__seasons { display: flex; flex-wrap: wrap; gap: 8px; }
.rozgrywki__season {
padding: 8px 14px; border-radius: 3px;
border: 1.5px solid rgba(20,24,26,.18);
font-family: var(--font-display); font-weight: 600; font-size: 12px;
letter-spacing: .08em; text-transform: uppercase;
color: var(--ink); text-decoration: none;
transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.rozgrywki__season:hover { border-color: var(--green); color: var(--green); }
.rozgrywki__season.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.rozgrywki__bilans {
display: flex; flex-wrap: wrap; gap: 22px;
padding: 14px 0 18px; border-top: 1px solid rgba(20,24,26,.12);
font-size: 13px; color: var(--muted);
}
/*
* Na telefonie cztery pozycje łamały się na trzy wiersze, a ta sama treść
* w tabeli poprzednich sezonów mieści się w jednej linii — wyglądało to
* jak dwa różne bilanse. Ciaśniejsze odstępy trzymają wiersz w całości.
*/
@media (max-width: 560px) {
.rozgrywki__bilans { gap: 6px 14px; font-size: 12px; }
.rozgrywki__bilans b { font-size: 14px; }
}
.rozgrywki__bilans b { color: var(--ink); font-size: 16px; }
.rozgrywki__label {
font-family: var(--font-body); font-weight: 700; font-size: 12px;
letter-spacing: .16em; text-transform: uppercase;
color: var(--muted); margin: 26px 0 10px;
}
.rozgrywki__list { list-style: none; margin: 0; padding: 0; }
.rmatch {
display: grid;
grid-template-columns: 120px minmax(0, 1fr) auto;
align-items: center; gap: 16px;
padding: 12px 16px;
background: #fff; border: 1px solid rgba(20,24,26,.10);
border-left: 4px solid rgba(20,24,26,.18);
border-radius: 4px; margin-bottom: 8px;
}
/* Kreska po lewej niesie rezultat — bez czytania wyniku widac forme. */
.rmatch--w { border-left-color: var(--green); }
.rmatch--r { border-left-color: #c8a63a; }
.rmatch--p { border-left-color: #b4483f; }
.rmatch--next { border-left-color: rgba(20,24,26,.28); border-style: dashed; }
.rmatch__date { font-size: 12px; color: var(--muted); white-space: nowrap; }
/*
* Para druzyn na stalej osi.
*
* Wczesniej "vs" (albo wynik) szlo zaraz za nazwa gospodarza, wiec skakalo
* w poziomie zaleznie od jej dlugosci — przy przewijaniu listy oko nie mialo
* sie o co zaczepic. Srodkowa kolumna ma stala szerokosc, gospodarz dociaga
* do niej z prawej, gosc od lewej.
*/
.rmatch__teams {
display: grid;
grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
align-items: center;
font-family: var(--font-display); font-weight: 600; font-size: 14px;
text-transform: uppercase; color: var(--ink);
}
.rmatch__teams > .klub:first-of-type { justify-content: flex-end; text-align: right; }
.rmatch__teams em {
font-style: normal; font-weight: 800;
justify-self: center;
padding: 2px 8px; background: rgba(20,24,26,.07); border-radius: 3px;
white-space: nowrap;
}
/*
* Strzelcy pod nazwami druzyn — ta sama siatka co .rmatch__teams, wiec
* nazwisko stoi dokladnie pod swoim klubem. Kazdy gol w osobnym wierszu:
* ciag oddzielony kropkami przy czterech bramkach byl nie do rozplatania.
*/
.rmatch__scorers {
grid-column: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
font-size: 12px; color: var(--muted);
margin-top: 2px;
}
.rmatch__gole { display: grid; gap: 1px; align-content: start; }
.rmatch__gole--l { text-align: right; }
.rmatch__gole--p { grid-column: 3; text-align: left; }
.rmatch__gol { display: block; }
.rmatch__scorers i { font-style: normal; color: var(--green); font-weight: 600; }
.rmatch__badge {
font-size: var(--fs-etykieta); letter-spacing: .1em; text-transform: uppercase;
color: var(--muted); white-space: nowrap;
}
@media (max-width: 720px) {
.rmatch { grid-template-columns: 1fr; gap: 6px; }
.rmatch__scorers { grid-column: 1; }
}
/* ---------- 21. Rozgrywki: tabela obok wynikow ---------- */
/*
* Pol ekranu na tabele, pol na mecze. Tabela jest przyklejona przy
* przewijaniu — lista meczow calego sezonu jest dluga, a pozycja
* w tabeli to punkt odniesienia przy ich czytaniu.
*/
.rozgrywki__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: start;
}
/*
* Kolumna z tabela ligi nie jest juz przyklejona: pod tabela stoja
* statystyki zawodnikow, wiec cala kolumna jest dluga i lepki naglowek
* tylko by ja szarpal przy przewijaniu.
*/
.rozgrywki__tabela { position: static; }
/*
* Tabela ligi ma 18 wierszy — pokazujemy okolo polowy, reszta przewija
* sie w srodku ramki. Dzieki temu statystyki zawodnikow pod spodem sa
* widoczne bez przewijania calej strony.
*/
.ltab__scroll {
max-height: 330px;
overflow-y: auto;
border: 1px solid rgba(20,24,26,.10);
border-radius: 4px;
background: #fff;
}
/* ramke przejmuje kontener, zeby nie dublowac jej przy przewijaniu */
.ltab__scroll .ltab { border: 0; border-radius: 0; }
/* naglowek zostaje widoczny podczas przewijania tabeli */
.ltab__scroll thead th {
position: sticky;
top: 0;
z-index: 1;
}
.ltab {
width: 100%;
border-collapse: collapse;
background: #fff;
border: 1px solid rgba(20,24,26,.10);
border-radius: 4px;
overflow: hidden;
font-size: 13px;
}
.ltab th {
background: var(--green-darker); color: #fff;
font-family: var(--font-body); font-weight: 600;
font-size: var(--fs-etykieta); letter-spacing: .1em; text-transform: uppercase;
padding: 9px 10px; text-align: left;
}
.ltab td { padding: 7px 10px; border-bottom: 1px solid rgba(20,24,26,.08); }
.ltab tr:last-child td { border-bottom: 0; }
.ltab .num { text-align: right; white-space: nowrap; }
.ltab__club { font-weight: 600; }
/* Wisloka wyrozniona — inaczej trzeba jej szukac wzrokiem w 18 wierszach. */
.ltab tr.is-us { background: rgba(23,128,58,.10); }
.ltab tr.is-us .ltab__club { color: var(--green-tekst); }
@media (max-width: 1040px) {
.rozgrywki__grid { grid-template-columns: 1fr; }
}
/* ---------- 22. Kariera zawodnika w karcie kadry ---------- */
.pd__kariera { margin: 16px 0 18px; }
/*
* Liczby z biezacego sezonu na zdjeciu, w rzedzie z nazwiskiem — po prawej.
* Bialy tekst z cieniem, bo tlem jest fotografia o zmiennej jasnosci.
*/
.pcard__staty--modal {
/*
* Ten sam wyglad co plakietki na kartach kadry, tylko w lewym gornym
* rogu zdjecia w otwartej karcie. Dziedziczy caly styl z .pcard__staty,
* wiec zmiana ikon w jednym miejscu dziala w obu widokach.
*/
top: 14px;
left: 14px;
right: auto;
bottom: auto;
z-index: 3;
}
.pd__media .pdk__teraz b {
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
line-height: 1;
color: #fff;
text-shadow: 0 2px 10px rgba(0,0,0,.85);
}
.pdk__head {
font-size: var(--fs-etykieta); letter-spacing: .14em; text-transform: uppercase;
color: var(--muted); font-weight: 700; margin-bottom: 8px;
}
/* Kariera bywa dluga (Sokol ma 25 sezonow) — przewijamy zamiast rozciagac karte. */
.pdk__scroll { max-height: 230px; overflow-y: auto; border: 1px solid rgba(20,24,26,.10); border-radius: 4px; }
.pdk { width: 100%; border-collapse: collapse; font-size: 12px; }
.pdk th {
position: sticky; top: 0; z-index: 1;
background: var(--green-darker); color: #fff;
font-weight: 600; font-size: var(--fs-etykieta); letter-spacing: .08em; text-transform: uppercase;
padding: 7px 8px; text-align: left;
}
.pdk td { padding: 6px 8px; border-bottom: 1px solid rgba(20,24,26,.07); }
.pdk tr:last-child td { border-bottom: 0; }
.pdk .n { text-align: right; }
.pdk .kl { font-weight: 600; }
/* ---------- 23. Podstrona zawodnika ---------- */
/* Odstep na naglowek robi juz pasek kadry nad hero. */
.zaw-hero {
position: relative;
background: var(--green-darker) url("../assets/hero-bg-fans.jpg") center/cover no-repeat;
color: #fff;
/* tyle, ile zajmuje przezroczysty naglowek, plus 40 px oddechu */
padding: calc(var(--hh) + 40px) 0 32px;
overflow: hidden;
}
.zaw-hero::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background: linear-gradient(180deg, rgba(7,30,16,.55) 0%, rgba(7,30,16,.35) 40%, rgba(7,30,16,.7) 100%);
}
.zaw-hero .wrap { position: relative; z-index: 1; }
/*
* Zdjecie i dane stoja RAZEM na srodku, a nie rozciagniete na cala
* szerokosc kontenera. Przy 1500px druga kolumna zajmowala 1fr, przez co
* tabelka danych konczyla sie w polowie, a prawa polowa hero swiecila
* pustka. Kolumny dobieramy do tresci i centrujemy caly zestaw.
*/
.zaw-hero__grid {
display: grid;
grid-template-columns: minmax(0, 300px) minmax(0, 620px);
justify-content: center;
gap: 34px;
align-items: end;
}
.zaw-hero__foto {
position: relative;
border-radius: 8px;
overflow: hidden;
background: rgba(255,255,255,.06);
aspect-ratio: 3/4;
}
.zaw-hero__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Numer jak na karcie w kadrze — spójność między widokami. */
.zaw-hero__num {
position: absolute; left: 12px; top: 6px; z-index: 2;
font-family: var(--font-display); font-weight: 700; font-size: 56px;
line-height: 1; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
.zaw-hero__pos {
font-family: var(--font-display); text-transform: uppercase;
letter-spacing: .14em; font-size: 12px; color: #8fd6a6; margin-top: 14px;
}
.zaw-hero__name {
font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(30px, 4.4vw, 58px); line-height: 1.0; margin: 4px 0 18px;
}
/*
* Imie stoi w osobnym wierszu nad nazwiskiem. Nazwisko ma line-height .95,
* wiec jego linia ma ujemny odstep i wchodzila wersalikami w imie —
* dlatego imie dostaje wlasna interlinie i odstep pod spodem.
*/
.zaw-hero__name span {
display: block; font-weight: 400; font-size: .52em;
line-height: 1.15; margin-bottom: .34em; opacity: .8;
}
/* Statystyki sezonu na wierzchu — pierwsze, czego szuka kibic. */
/*
* Statystyki sezonu: ikona + liczba, bez podpisow slownych.
* Podpis siedzi w atrybucie title — informacja zostaje, a rzad nie lamie
* sie na dwie linie przez slowa dluzsze niz same liczby.
*/
.zaw-staty { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.zaw-staty div { display: inline-flex; align-items: center; gap: 8px; }
.zaw-staty .ps__i { width: 20px; height: 20px; flex: 0 0 auto; }
.zaw-staty b {
font-family: var(--font-display); font-weight: 800;
font-size: 30px; line-height: 1; color: #fff;
}
.zaw-staty__opis { margin: 8px 0 0; font-size: var(--fs-etykieta); color: var(--muted-jasny); letter-spacing: .08em; text-transform: uppercase; }
.zaw-fakty { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 0; max-width: 420px; }
.zaw-fakty li {
display: flex; justify-content: space-between; gap: 14px;
padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 13px;
}
.zaw-fakty span { color: var(--muted-jasny); text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-etykieta); }
.zaw-tresc { background: var(--paper); padding: 40px 0 56px; }
.zaw-tresc__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; align-items: start; }
.zaw-h2 {
font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
font-size: 20px; margin: 0 0 14px; color: var(--ink);
}
.zaw-brak { color: var(--muted); font-style: italic; }
.zaw-kariera__sum { margin: 0 0 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.zaw-tab { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid rgba(20,24,26,.10); border-radius: 4px; overflow: hidden; font-size: 13px; }
.zaw-tab th {
background: var(--green-darker); color: #fff; text-align: left;
font-size: var(--fs-etykieta); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: 9px 10px;
}
.zaw-tab td { padding: 7px 10px; border-bottom: 1px solid rgba(20,24,26,.08); }
.zaw-tab tr:last-child td { border-bottom: 0; }
.zaw-tab .n { text-align: right; }
.zaw-tab .kl { font-weight: 600; }
.zaw-tab tr.is-now { background: rgba(23,128,58,.10); }
.zaw-tab tr.is-now .kl { color: var(--green-tekst); }
@media (max-width: 900px) {
.zaw-hero__grid, .zaw-tresc__grid { grid-template-columns: 1fr; }
.zaw-hero__foto { max-width: 260px; }
}
/* ---------- 24. Kadra jak na boisku ---------- */
/*
* Tlo kadry to zdjecie druzynowe z sezonu 2026/27, przyciete do samych
* zawodnikow — bez paska social u gory i bez rwanej krawedzi, herbu
* oraz logotypow sponsorow z dolu plakatu. Studyjna szarosc znika pod
* ciemnozielonym gradientem, wiec tla nie trzeba wycinac pikselowo:
* i tak czyta sie jako zielen klubu.
*
* background-attachment: fixed daje efekt paralaksy — karty zawodnikow
* jada po nieruchomym zdjeciu.
*/
.boisko {
position: relative;
background: var(--green-darker) url("../assets/kadra-team-2627.jpg") center top/cover no-repeat;
background-attachment: fixed;
padding: 34px 0 46px;
overflow: hidden;
}
/* Zdjecie jest jasne i szczegolowe — bez przyciemnienia karty zawodnikow gina. */
.boisko::before {
content: "";
position: absolute; inset: 0; z-index: 0;
background: linear-gradient(180deg, rgba(6,26,15,.91) 0%, rgba(6,26,15,.86) 45%, rgba(6,26,15,.95) 100%);
}
.boisko .wrap { position: relative; z-index: 1; }
/* Etykieta formacji po lewej, zawodnicy po prawej — jak ustawienie na boisku. */
.boisko__linia {
display: grid;
grid-template-columns: 160px minmax(0, 1fr);
gap: 22px;
align-items: start;
padding: 18px 0;
border-top: 1px solid rgba(255,255,255,.14);
}
.boisko__linia:first-child { border-top: 0; }
.boisko__etykieta { position: sticky; top: 90px; }
.boisko__nazwa {
display: block;
font-family: var(--font-display);
font-weight: 800; text-transform: uppercase;
font-size: clamp(16px, 1.7vw, 24px);
line-height: 1.05; color: #fff;
}
.boisko__ile {
display: inline-block; margin-top: 6px;
font-size: var(--fs-etykieta); letter-spacing: .14em; text-transform: uppercase;
color: var(--muted-jasny);
}
/* Zawijanie zamiast przewijania — cala formacja ma byc widoczna naraz. */
.boisko__zawodnicy { display: flex; flex-wrap: wrap; gap: 14px; }
.bz {
width: 132px;
text-decoration: none;
color: #fff;
}
/* bez unoszenia po najechaniu — wyroznienie robi obwodka herbu */
.bz__foto {
position: relative;
display: block;
aspect-ratio: 3/4;
border-radius: 6px;
overflow: hidden;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.16);
}
.bz__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bz:hover .bz__foto { border-color: var(--green); }
/*
* Numer siedzi nad zdjeciem, a te bywaja jasne (biale stroje, jasne tlo
* sesji) — sam miekki cien dawal kontrast okolo 2:1 i numer znikal.
* Ciasna ciemna obwodka trzyma czytelnosc niezaleznie od kadru, a duzy
* numer w rogu zostaje taki, jak byl w projekcie.
*/
.bz__num {
position: absolute; left: 7px; top: 2px; z-index: 2;
font-family: var(--font-display); font-weight: 700; font-size: 26px;
line-height: 1; color: #fff;
text-shadow:
0 0 2px rgba(6,18,11,.95),
1px 1px 0 rgba(6,18,11,.85),
-1px 1px 0 rgba(6,18,11,.85),
1px -1px 0 rgba(6,18,11,.85),
-1px -1px 0 rgba(6,18,11,.85),
0 2px 10px rgba(0,0,0,.75);
}
.bz__imie { display: block; margin-top: 7px; font-size: 12px; color: var(--muted-jasny); }
.bz__nazwisko {
display: block;
font-family: var(--font-display); font-weight: 700;
text-transform: uppercase; font-size: 14px; line-height: 1.1;
}
/* zielen podstawowa na ciemnym tle to 2.46:1 — tu potrzebny jasny wariant */
.bz__staty { display: block; margin-top: 3px; font-size: var(--fs-etykieta); color: rgba(255, 255, 255, .78); }
@media (max-width: 860px) {
.boisko__linia { grid-template-columns: 1fr; gap: 10px; }
.boisko__etykieta { position: static; }
.bz { width: calc(33.333% - 10px); }
.boisko { background-attachment: scroll; }
}
/* ---------- 25. Pasek kadry na podstronie zawodnika ---------- */
/* Pasek jest teraz NAD kartoteka, wiec musi zostawic miejsce na naglowek. */
.zp {
flex: 0 0 auto;
width: 92px;
text-decoration: none;
color: #fff;
scroll-snap-align: center;
opacity: .62;
transition: opacity .16s ease;
}
.zp:hover { opacity: 1; }
/* Biezacy zawodnik wyrozniony, zeby bylo widac, gdzie sie jest. */
.zp.is-now { opacity: 1; }
.zp.is-now .zp__foto { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.zp__foto {
position: relative; display: block;
aspect-ratio: 3/4; border-radius: 5px; overflow: hidden;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.18);
}
.zp__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zp__num {
position: absolute; left: 5px; top: 1px; z-index: 2;
font-family: var(--font-display); font-weight: 700; font-size: 18px;
line-height: 1; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.75);
}
.zp__nazwisko {
display: block; margin-top: 5px;
font-family: var(--font-display); font-weight: 700;
text-transform: uppercase; font-size: var(--fs-etykieta); line-height: 1.15;
}
/* ---------- 26. Wyniki z herbami, klikalne ---------- */
.hero__aside .res__row {
display: grid;
/* stala kolumna srodkowa — wynik i data stoja w jednej pionowej osi */
grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
align-items: center;
gap: 8px;
padding: 8px 10px;
/*
* Bez paska po lewej.
*
* Wiersze mialy border-left: kolorowy przy wynikach (wygrana/remis/
* porazka) i przerywany przy nadchodzacych, ktory renderowal sie jako
* kolumna bialych kwadracikow i wygladal na usterke. Wynik i tak stoi
* w srodku wiersza, wiec pasek niczego nie dodawal.
*/
border-radius: 3px;
text-decoration: none;
color: #fff;
transition: background .15s ease;
}
.hero__aside .res__row:hover { background: rgba(255,255,255,.08); }
.res__side { display: flex; align-items: center; gap: 7px; min-width: 0; }
.res__side--r { justify-content: flex-end; }
.res__crest {
flex: 0 0 auto; width: 20px; height: 20px;
display: grid; place-items: center;
font-size: 8px; font-weight: 700; color: var(--muted-jasny);
}
.res__crest img { width: 100%; height: 100%; object-fit: contain; }
/*
* Pelna nazwa w dwoch liniach zamiast wielokropka.
*
* Kolumna ma okolo 95px, a "Podlasie Biala Podlaska" potrzebuje 144px —
* przy czytelnym stopniu pisma jedna linia zawsze by ucinala. Lamiemy
* na dwie i dopiero trzecia linia (nazwy, ktorych i tak nie ma) znika.
*/
.res__n {
font-size: var(--fs-drobny);
line-height: 1.15;
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.res__s {
font-family: var(--font-display); font-weight: 700; font-size: 14px;
padding: 1px 7px; background: rgba(255,255,255,.12); border-radius: 3px;
white-space: nowrap; justify-self: center;
}
/* ---------- 27. Podstrona meczu ---------- */
.mecz-hero {
position: relative;
background: var(--green-darker) url("../assets/hero-bg-fans.jpg") center/cover no-repeat;
color: #fff;
/* Ten sam zapas co na kazdej innej podstronie: naglowek + 8 px. */
padding: calc(var(--hh) + 8px) 0 32px;
overflow: hidden;
}
.mecz-hero::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background: linear-gradient(180deg, rgba(7,30,16,.62) 0%, rgba(7,30,16,.42) 45%, rgba(7,30,16,.78) 100%);
}
.mecz-hero .wrap { position: relative; z-index: 1; }
.mecz-hero__meta { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-jasny); margin-top: 10px; }
.mecz-hero__gdzie { text-align: center; font-size: 12px; color: var(--muted-jasny); margin-top: 14px; }
.mecz-tablica {
display: grid; grid-template-columns: 1fr auto 1fr;
align-items: center; gap: 20px; margin-top: 18px;
}
.mt__team { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.mt__crest { width: 78px; height: 78px; display: grid; place-items: center; }
.mt__crest img { width: 100%; height: 100%; object-fit: contain; }
.mt__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(13px, 1.5vw, 19px); }
.mt__wynik { text-align: center; }
.mt__wynik b { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 6vw, 72px); line-height: 1; }
.mt__wynik i { font-style: normal; opacity: .4; margin: 0 6px; }
/*
* Kolor wyniku niesie rezultat — zielony, zolty, czerwony. Zawsze z punktu
* widzenia Wisloki, niezaleznie od tego, po ktorej stronie tablicy stoi.
* Jasne odcienie, bo tablica lezy na ciemnym zdjeciu trybun.
*/
.mt__wynik--w b { color: #7ce8a8; }
.mt__wynik--r b { color: #f2cf5b; }
.mt__wynik--p b { color: #ff8a80; }
/* Bramki pod herbem — przy swojej druzynie, bez nagłówka „Bramki rywala”. */
.mt__gole { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.mt__gole li { font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.9); }
.mt__gole a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); }
.mt__gole a:hover { border-bottom-color: #7ce8a8; color: #7ce8a8; }
.mt__min {
display: inline-block; min-width: 34px; margin-right: 6px;
font-weight: 700; font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, .6);
}
/* Zielen tylko przy NASZYCH bramkach — minuta gola rywala nie moze
swiecic klubowym kolorem. */
.mt__gole--nasi .mt__min { color: #7ce8a8; }
.mt__vs { font-size: clamp(24px, 3vw, 38px) !important; opacity: .7; }
.mt__kiedy { display: block; margin-top: 6px; font-size: 12px; color: var(--muted-jasny); }
/* Kolor paska u dołu niesie rezultat, bez czytania cyfr. */
.mecz-hero--w { border-bottom: 4px solid var(--green); }
.mecz-hero--r { border-bottom: 4px solid #c8a63a; }
.mecz-hero--p { border-bottom: 4px solid #b4483f; }
/*
* Zakładki strony meczu. Mobile first: pasek przewijany poziomo, od tabletu
* wyśrodkowany. Aktywna podkreślona zielenią - jak w referencji, bez zmiany
* designu samych sekcji. Panele przełącza JS (atrybut hidden).
*/
.mecztaby { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
padding: 4px 12px 0; margin: 0; background: #fff;
border-bottom: 1px solid rgba(20, 24, 26, .12); scrollbar-width: none; }
.mecztaby::-webkit-scrollbar { display: none; }
.mecztaby__btn { flex: 0 0 auto; border: 0; background: none; cursor: pointer;
padding: 13px 12px; font: inherit; font-weight: 800; font-size: 13px;
text-transform: uppercase; letter-spacing: .04em; color: #6b7770;
border-bottom: 3px solid transparent; white-space: nowrap; }
.mecztaby__btn:hover { color: #14201a; }
.mecztaby__btn.is-akt { color: #14201a; border-bottom-color: var(--acc, var(--green, #17803a)); }
[data-tab][hidden] { display: none !important; }
@media (min-width: 720px) { .mecztaby { justify-content: center; gap: 8px; padding-inline: 16px; } }
/* Zakładka „Kolejka" - lista meczów kolejki. Mobile first, mecz Wisłoki wyróżniony. */
.mkolejka { background: var(--paper); padding: 30px 0 48px; }
.mkol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.mkol__row {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
padding: 10px 12px; background: #fff; border: 1px solid var(--line-dark, #e2e5e3);
border-radius: 12px; font-size: 14px;
}
.mkol__row.is-us { border-color: rgba(23, 128, 58, .4); background: rgba(23, 128, 58, .06); }
.mkol__team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mkol__team--h { justify-content: flex-end; text-align: right; }
.mkol__team--a { justify-content: flex-start; text-align: left; }
.mkol__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mkol__team .herb, .mkol__team img { flex: 0 0 auto; }
.mkol__w {
font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums;
min-width: 48px; text-align: center; white-space: nowrap;
}
/* Termin zamiast wyniku (mecz nierozegrany) - mniejszy, moze sie zawinac. */
.mkol__w--data {
font-family: var(--font-body); font-weight: 700; font-size: 12px;
white-space: normal; line-height: 1.15; color: var(--muted, #7b8079);
min-width: 64px;
}
@media (max-width: 560px) {
.mkol__row { font-size: 13px; gap: 6px; padding: 9px 10px; }
.mkol__n { font-size: 12px; }
}
/* =========================================================================
Oprawa meczu SPONSOROWANEGO. Wlacza sie tylko na podstronach z recznie
wybranym sponsorem (klasa .ma-sponsor + zmienna --sponsor). Cala paleta
akcentu liczy sie z JEDNEGO koloru marki sponsora przez color-mix.
========================================================================= */
.ma-sponsor {
--acc: var(--sponsor, var(--green, #17803a));
--acc-d: color-mix(in srgb, var(--acc) 62%, #000);
--acc-dd: color-mix(in srgb, var(--acc) 34%, #06110b);
--acc-soft:color-mix(in srgb, var(--acc) 10%, #fff);
--acc-ink: color-mix(in srgb, var(--acc) 80%, #000);
}
/* ① eyebrow „Partner spotkania · [SPONSOR]" w hero */
.mecz-hero__partner {
display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px;
font-family: var(--font-display, sans-serif); text-transform: uppercase;
letter-spacing: .16em; font-size: 12px; font-weight: 600;
}
.mecz-hero__partner span { color: #dfe6e1; opacity: .85; }
.mecz-hero__partner-logo {
height: 42px; width: auto; display: block;
/* bez kafelka — jasny obrys + poswiata + cien, zeby logo bylo widac na ciemnym hero */
filter:
drop-shadow(0 0 2px rgba(255, 255, 255, .95))
drop-shadow(0 0 9px rgba(255, 255, 255, .3))
drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
}
/* Fallback gdy sponsor nie ma logo — pokazujemy nazwe zamiast obrazka. */
.mecz-hero__partner-nazwa {
color: #fff; background: var(--acc); padding: 3px 12px; border-radius: 20px;
font-weight: 700; letter-spacing: .1em;
box-shadow: 0 4px 14px color-mix(in srgb, var(--acc) 45%, transparent);
}
.mspon-band__nazwa {
font-family: var(--font-display, sans-serif); font-weight: 800; text-transform: uppercase;
letter-spacing: .04em; font-size: clamp(26px, 5vw, 40px); color: #fff;
text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.mspon__logo-nazwa {
font-family: var(--font-display, sans-serif); font-weight: 800; text-transform: uppercase;
letter-spacing: .03em; font-size: clamp(24px, 4vw, 34px); color: var(--acc-ink); text-align: center;
}
/* ② wstega pod hero */
.mspon-band {
text-align: center; padding: 22px 0; color: #fff;
background: linear-gradient(180deg, var(--acc-d), var(--acc-dd));
border-top: 3px solid var(--acc);
}
.mspon-band__k {
display: block; font-family: var(--font-display, sans-serif);
text-transform: uppercase; letter-spacing: .22em; font-size: 12px; opacity: .88; margin-bottom: 13px;
}
.mspon-band__logo {
display: inline-flex; align-items: center; justify-content: center;
background: none; box-shadow: none; padding: 0; min-height: 0; transition: transform .18s ease;
}
a.mspon-band__logo:hover { transform: translateY(-2px); }
.mspon-band__logo img {
max-height: 144px; max-width: 440px; width: auto; height: auto; display: block;
/* jasny obrys + miekka poswiata + cien — logo nie zlewa sie z tlem w kolorze marki */
filter:
drop-shadow(0 0 2px rgba(255, 255, 255, .95))
drop-shadow(0 0 10px rgba(255, 255, 255, .35))
drop-shadow(0 6px 16px rgba(0, 0, 0, .55));
}
/* ④ blok sponsora — CAŁA SEKCJA w kolorze marki, logo wysrodkowane u gory (bez jasnego panelu) */
.mspon {
background: linear-gradient(180deg, var(--acc-d), var(--acc-dd));
color: #fff; padding: 44px 24px 48px;
}
.mspon__karta {
display: flex; flex-direction: column; align-items: center; text-align: center;
max-width: 860px; margin: 0 auto; background: none; border: 0; border-radius: 0; box-shadow: none;
}
.mspon__logo { background: none; border: 0; padding: 0 0 22px; display: block; }
.mspon__logo img {
max-height: 132px; max-width: 340px; width: auto; height: auto;
/* logo wysrodkowane na czerwonym — jasny obrys + poswiata + cien, zeby bylo widac */
filter:
drop-shadow(0 0 2px rgba(255, 255, 255, .92))
drop-shadow(0 0 12px rgba(255, 255, 255, .3))
drop-shadow(0 8px 18px rgba(0, 0, 0, .55));
}
.mspon__logo-nazwa {
font-family: var(--font-display, sans-serif); font-weight: 800; text-transform: uppercase;
letter-spacing: .03em; font-size: clamp(28px, 5vw, 44px); color: #fff;
}
.mspon__txt { padding: 0; background: none; color: #fff; }
.mspon__tag {
display: inline-block; font-family: var(--font-display, sans-serif); text-transform: uppercase;
letter-spacing: .14em; font-size: 11px; font-weight: 600; color: var(--acc-ink); background: #fff;
padding: 4px 12px; border-radius: 20px; margin-bottom: 12px;
}
.mspon__name { font-family: var(--font-display, sans-serif); text-transform: uppercase; letter-spacing: .02em; font-size: clamp(24px, 4vw, 30px); margin: 0 0 4px; color: #fff; }
.mspon__branza { color: #fff; opacity: .9; font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.mspon__opis { color: rgba(255, 255, 255, .9); line-height: 1.55; font-size: 15px; margin: 0 auto 16px; max-width: 60ch; }
.mspon__adres { display: flex; align-items: center; justify-content: center; gap: 8px; color: rgba(255, 255, 255, .78); font-size: 13.5px; margin-bottom: 18px; }
.mspon__adres svg { flex: 0 0 auto; fill: #fff; }
.mspon__btn {
display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--acc-ink); background: #fff;
font-family: var(--font-display, sans-serif); text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
font-size: 13px; padding: 12px 24px; border-radius: 8px; transition: background .15s ease;
}
.mspon__btn:hover { background: rgba(255, 255, 255, .86); }
@media (max-width: 640px) {
.mspon { padding: 34px 18px 38px; }
.mspon__logo img { max-height: 100px; }
.mspon__name { font-size: 22px; }
}
/* Dodatkowe banery sponsora — pod blokiem, obok siebie (nr 1 z lewej, nr 2 z prawej). */
.mspon-banery { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; padding: 26px 0 6px; }
.mspon-banery__el { display: block; width: 100%; border-radius: 12px; overflow: hidden; }
.mspon-banery__el img { display: block; width: 100%; height: auto; border-radius: 12px; }
a.mspon-banery__el { transition: transform .16s, box-shadow .16s; }
a.mspon-banery__el:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .14); }
@media (max-width: 640px) { .mspon-banery { grid-template-columns: 1fr; } }
/* Banery boczne sponsora — STICKY w bocznych szynach (mspon-rail) wokol tresci.
Przyklejaja sie od zakladek, a przy sekcji sponsora parkuja i wjezdzaja z
trescia (nie znikaja). Tylko szerokie ekrany, gdzie jest miejsce w marginesach. */
.mspon-host { position: relative; }
.mspon-rail { display: none; }
.mspon-bok {
display: block; width: 176px; padding: 20px 16px 18px; text-align: center; text-decoration: none;
background: linear-gradient(158deg, var(--acc-d), var(--acc-dd)); color: #fff;
border: 1px solid rgba(255, 255, 255, .14); border-radius: 0;
box-shadow: 0 18px 42px rgba(0, 0, 0, .34);
transition: transform .18s ease, box-shadow .18s ease;
}
.mspon-bok__k {
display: block; font-family: var(--font-display, sans-serif); text-transform: uppercase;
letter-spacing: .2em; font-size: 10px; opacity: .8; margin-bottom: 16px;
padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.mspon-bok__logo {
display: flex; align-items: center; justify-content: center; min-height: 58px; margin-bottom: 14px;
background: #fff; border-radius: 10px; padding: 12px 14px;
box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}
.mspon-bok__logo img { max-width: 100%; max-height: 58px; height: auto; display: block; }
.mspon-bok__nazwa { font-family: var(--font-display, sans-serif); font-weight: 800; text-transform: uppercase; font-size: 20px; line-height: 1.05; }
.mspon-bok__branza { display: block; font-size: 11px; line-height: 1.4; color: rgba(255, 255, 255, .82); margin-bottom: 16px; }
.mspon-bok__cta {
display: flex; align-items: center; justify-content: center; gap: 6px;
background: #fff; color: var(--acc-ink); border-radius: 9px; padding: 10px 12px;
font-family: var(--font-display, sans-serif); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 11px;
transition: background .15s ease;
}
/* Grafika w środku kafla — między logo a przyciskiem „Zobacz stronę". */
.mspon-bok__graf { display: block; margin: 14px 0; }
.mspon-bok__graf img { display: block; width: 100%; height: auto; border-radius: 8px; }
a.mspon-bok:hover { transform: translateY(-3px); box-shadow: 0 24px 50px rgba(0, 0, 0, .42); }
a.mspon-bok:hover .mspon-bok__cta { background: rgba(255, 255, 255, .88); }
/* Szyny pojawiaja sie tylko gdy jest miejsce w marginesach (poza trescia).
Baner sticky przykleja sie na srodku ekranu i parkuje na dole szyny (przed
blokiem sponsora), zamiast znikac. */
@media (min-width: 1500px) {
/* Treść meczu vs. boki — węższe banery po bokach. */
.mspon-host .wrap { max-width: 1320px; }
.mspon-rail {
display: block; position: absolute; top: 0; bottom: 0; z-index: 30;
width: calc((100vw - 1320px) / 2); pointer-events: none;
}
.mspon-rail--lewy { left: 0; }
.mspon-rail--prawy { right: 0; }
/* Sticky na wrapperze — karta + grafika jadą razem; lekki odstęp od góry. */
.mspon-rail .mspon-rail__box { position: sticky; top: 114px; pointer-events: auto; }
/* Karta i grafika na pełną szerokość szyny (ta sama szerokość), bez zaokrągleń. */
.mspon-rail .mspon-bok { pointer-events: auto; width: 100%; border-radius: 0; }
.mspon-rail--prawy .mspon-bok { border-right: 0; }
.mspon-rail--lewy .mspon-bok { border-left: 0; }
/* Grafika w szynie sięga do krawędzi boków (bez zaokrągleń). */
.mspon-rail .mspon-bok__graf { margin: 14px -16px; }
.mspon-rail .mspon-bok__graf img { border-radius: 0; }
/* Mniejsze odstępy w kaflu — nagłówek bliżej logo. */
.mspon-rail .mspon-bok__k { margin-bottom: 10px; padding-bottom: 10px; }
.mspon-rail .mspon-bok__logo { min-height: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; margin-bottom: 0; }
.mspon-rail .mspon-bok__logo img {
max-height: 120px; width: 100%; object-fit: contain;
filter:
drop-shadow(0 0 1px rgba(255, 255, 255, .9))
drop-shadow(0 0 6px rgba(255, 255, 255, .55))
drop-shadow(0 2px 4px rgba(0, 0, 0, .45));
}
/* Na szerokich ekranach grafiki są w bocznych szynach — dolny zapas chowamy. */
.mspon-banery { display: none; }
}
/* Cala podstrona meczu w barwach sponsora (klasa body .mecz-sponsorowany,
zmienna --sponsor ustawiona inline). Zielone akcenty schodza na kolor marki. */
.mecz-sponsorowany .mecz-hero--w,
.mecz-sponsorowany .mecz-hero--r,
.mecz-sponsorowany .mecz-hero--p { border-bottom-width: 0; }
/* Wynik zostaje w oryginalnym kolorze (zielony/zloty/czerwony wg rezultatu) —
na ciemnym tle sponsora barwa marki zlewala sie z tlem. */
.mecz-sponsorowany .mkol__row.is-us {
border-color: color-mix(in srgb, var(--sponsor) 42%, #fff);
background: color-mix(in srgb, var(--sponsor) 9%, #fff);
}
.mecz-sponsorowany .live__zdarzenie--gol_my .live__kto {
color: color-mix(in srgb, var(--sponsor) 80%, #000) !important;
}
.mecz-tresc { background: var(--paper); padding: 36px 0 52px; }
/*
* Jedna kolumna: prawa strona (terminarz sasiednich kolejek) zostala
* usunieta, a pusta kolumna 1fr sciskala sklady do 58% szerokosci.
* Gdy wroci tu relacja albo statystyki, wystarczy przywrocic drugi tor.
*/
.mecz-tresc__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; }
.mecz-gole { list-style: none; margin: 0; padding: 0; }
.mecz-gole li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(20,24,26,.10); }
.mg__min { font-family: var(--font-display); font-weight: 700; color: var(--green); min-width: 46px; }
.mecz-gole a { color: var(--ink); font-weight: 600; }
.mecz-inne { list-style: none; margin: 0; padding: 0; }
.mecz-inne a {
display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center;
padding: 8px 10px; text-decoration: none; color: var(--ink);
border-bottom: 1px solid rgba(20,24,26,.08); font-size: 13px;
}
.mecz-inne a:hover { background: rgba(23,128,58,.08); }
.mi__nr { color: var(--muted); }
.mi__w { font-family: var(--font-display); font-weight: 700; }
@media (max-width: 900px) { .mecz-tresc__grid { grid-template-columns: 1fr; } }
/* ---------- 29. Herb klubu przy nazwie ---------- */
.herb {
flex: 0 0 auto;
display: inline-grid;
place-items: center;
vertical-align: middle;
overflow: hidden;
}
/*
* aspect-ratio, a NIE height:100%.
*
* .herb jest inline-grid bez wlasnych wymiarow — rozmiar bierze z atrybutow
* width/height obrazka. Przez to wysokosc pudelka jest "nieokreslona"
* w rozumieniu CSS, wiec height:100% nie mial sie do czego odniesc i spadal
* do auto: herb 400x500 renderowal sie jako 18x24 w pudelku 18x18, a
* overflow:hidden ucinal mu gore i dol. Widac to bylo w tabeli i na stronie
* glownej na kazdym herbie, ktory nie jest kwadratem — kwadratowe (nasz
* crest.png 1024x1024) wychodzily dobrze i dlatego bledu nie bylo widac
* od razu.
*
* Kwadrat wymuszony proporcja nie potrzebuje znac wysokosci rodzica,
* a object-fit:contain wpisuje w niego herb w calosci.
*/
.herb img {
width: 100%;
aspect-ratio: 1;
height: auto;
object-fit: contain;
display: block;
}
/* Zastępcza plakietka, gdy nie mamy pliku — widoczna, ale nie krzykliwa,
żeby było wiadomo, który herb trzeba jeszcze dodać. */
/*
* currentColor zamiast --muted: plakietka trafia i na jasne, i na ciemne
* tlo, a --muted na ciemnym dawal 2.37:1. Dziedziczenie koloru z otoczenia
* sprawia, ze inicjaly sa czytelne w obu przypadkach.
*/
.herb--brak {
border-radius: 50%;
background: rgba(127,127,127,.18);
color: currentColor;
opacity: .85;
font-family: var(--font-display);
font-weight: 700;
font-size: 8px;
letter-spacing: .02em;
}
/* Nazwa klubu razem z herbem w jednej linii. */
.klub {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.klub span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---------- 30. Plakietka ligi w naglowku ---------- */
/* Pasek nad menu zniknal razem z logotypami sponsorow — zwalnia miejsce
nad hero, a sponsorzy jada teraz w tasmie. */
.site-header__top { display: none !important; }
.site-header__right .sh-league {
display: inline-flex; align-items: center; gap: 7px;
margin: 0 4px 0 10px;
padding: 5px 10px;
border-left: 1px solid rgba(255,255,255,.22);
border-right: 1px solid rgba(255,255,255,.22);
font-family: var(--font-display);
font-size: var(--fs-etykieta); letter-spacing: .1em; text-transform: uppercase;
white-space: nowrap; color: currentColor;
}
/*
* Lockup Betclic 3. Ligi jest niemal kwadratowy (215 x 234) — przy 14 px,
* ktore wystarczaly plaskiemu napisowi, sam wyraz „Betclic” mial 4 px
* i byl nieczytelny. Dajemy mu wysokosc calej plakietki.
*/
.site-header__right .sh-league__img { height: 36px; width: auto; display: block; }
.site-header.is-scrolled .site-header__right .sh-league,
.site-header.is-solid .site-header__right .sh-league {
border-color: rgba(20,24,26,.16);
}
@media (max-width: 1100px) { .site-header__right .sh-league { display: none; } }
/* ---------- 31. Kalendarz — poziomy pasek miesiaca ---------- */
.kal { background: #fff; padding: 34px 0 30px; position: relative; }
.kal__tytul {
font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(20px, 2.2vw, 28px); margin: 0 0 16px; color: var(--ink);
}
.kal__pasek-gora {
display: flex; align-items: center; justify-content: space-between;
gap: 20px; flex-wrap: wrap; margin-bottom: 14px;
}
.kal__nawigacja { display: flex; align-items: center; gap: 12px; }
.kal__strzalka {
width: 22px; height: 22px; padding: 0;
border: 0; background: none; cursor: pointer;
color: var(--green); font-size: 22px; line-height: 1;
}
.kal__strzalka:hover { color: var(--green-dark); }
.kal__miesiac {
font-family: var(--font-display); font-weight: 800;
text-transform: uppercase; font-size: clamp(15px, 1.6vw, 20px);
/* 45% czerni dawalo 2.93:1 — etykieta miesiaca byla wyblakla */
color: var(--ink); letter-spacing: .02em; white-space: nowrap;
}
.kal__legenda { display: flex; gap: 22px; flex-wrap: wrap; }
.kal__legenda span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); }
/* Ikony rysowane w CSS — bez dodatkowych plikow. */
.kal__ikona { width: 18px; height: 18px; flex: 0 0 auto; display: inline-block; background: center/contain no-repeat; }
.kal__ikona--mecz { background-image: url("data:image/svg+xml;utf8,"); }
.kal__ikona--uro { background-image: url("data:image/svg+xml;utf8,"); }
.kal__ikona--wyd { background-image: url("data:image/svg+xml;utf8,"); }
/*
* Caly miesiac w jednym rzedzie. Kolumny rowne, wiec pasek ma stala
* rytmike niezaleznie od dlugosci miesiaca; przy ciasnocie przewija sie
* w poziomie zamiast lamac.
*/
.kal__dni {
display: grid;
grid-auto-flow: column;
/* 42px, zeby dwie ikony (mecz + urodziny) zmiescily sie obok siebie */
grid-auto-columns: minmax(42px, 1fr);
gap: 2px;
overflow-x: auto;
padding-bottom: 6px;
}
.kd { text-align: center; padding: 4px 2px 6px; border-radius: 6px; }
.kd--ma { cursor: pointer; }
.kd--ma:hover { background: rgba(23,128,58,.08); }
.kd__dt { display: block; font-size: 12px; color: var(--muted); }
.kd--weekend .kd__dt { color: #c0392b; }
.kd__nr { display: block; font-weight: 700; font-size: 15px; color: var(--ink); margin-top: 2px; }
.kd--weekend .kd__nr { color: #c0392b; }
/* Dzisiaj — jedyny element w akcencie, zeby dalo sie go znalezc od razu. */
.kd--dzis .kd__dt,
.kd--dzis .kd__nr { color: var(--green); }
.kd--dzis { box-shadow: inset 0 -2px 0 var(--green); }
.kd__ikony { display: flex; justify-content: center; gap: 3px; min-height: 20px; margin-top: 4px; }
/* ---------- panel po najechaniu ---------- */
/* Pozycje (left/top) ustawia JS wzgledem najechanego dnia. */
.kal__panel {
position: absolute; z-index: 30;
width: min(460px, 92vw);
background: #fff; border-radius: 12px;
box-shadow: 0 22px 54px rgba(0,0,0,.20);
border: 1px solid rgba(20,24,26,.10);
padding: 16px 18px 12px;
}
.kal__panel[hidden] { display: none; }
.kp__head {
font-weight: 700; font-size: 15px; color: var(--ink);
padding-bottom: 10px; margin-bottom: 6px;
border-bottom: 1px solid rgba(20,24,26,.10);
}
.kp__poz {
display: grid; grid-template-columns: 20px 1fr auto;
align-items: center; gap: 12px;
padding: 9px 0; text-decoration: none; color: var(--ink);
}
.kp__poz + .kp__poz { border-top: 1px solid rgba(20,24,26,.07); }
.kp__poz:hover b { color: var(--green); }
.kp__liga { display: block; font-size: var(--fs-drobny); color: var(--muted); }
.kp__txt b { display: block; font-size: 14px; line-height: 1.25; }
.kp__w { font-family: var(--font-display); font-weight: 700; font-size: 14px; white-space: nowrap; }
/* Tabela zostaje pod paskiem, na pelnej szerokosci. */
.calsec__grid--tabela { grid-template-columns: 1fr !important; }
@media (max-width: 760px) {
.kal__dni { grid-auto-columns: 44px; }
}
/* ---------- 32. Pasek: sponsor meczu, termin i licznik ---------- */
.mpasek {
position: relative;
background: #14181a url("../assets/hero-bg-fans.jpg") center 30%/cover no-repeat;
color: #fff;
padding: 18px 0;
overflow: hidden;
}
.mpasek::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background: linear-gradient(90deg, rgba(8,12,10,.94) 0%, rgba(8,12,10,.78) 42%, rgba(8,12,10,.90) 100%);
}
.mpasek .wrap { position: relative; z-index: 1; }
.mpasek__grid {
display: grid;
grid-template-columns: minmax(150px, 1fr) auto minmax(220px, 1fr);
align-items: center;
gap: 26px;
}
/*
* Ponizej 1300 px czwarta kolumna robila sie tak waska, ze logotypy lamaly
* sie na dwa rzedy i pasek roslo do 231 px. Schodza wiec do wlasnego wiersza
* na calej szerokosci — zostaja w jednej linii i pasek nie puchnie.
*/
/*
* Miedzy 1100 a 1300 px logotypy zostaja w swojej kolumnie, tylko malej —
* przeniesienie ich do osobnego wiersza rozdymalo pasek ze 185 do 305 px,
* czyli lekarstwo bylo gorsze od choroby. Podpis znika, bo to on zabieral
* najwiecej miejsca w waskiej kolumnie.
*/
.mpasek__label {
display: block;
font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-etykieta); letter-spacing: .16em; text-transform: uppercase;
color: var(--muted-jasny); margin-bottom: 8px;
}
.mpasek__sponsor img { max-height: 34px; max-width: 170px; width: auto; object-fit: contain; display: block; }
.mpasek__brak { font-size: 12px; color: var(--muted-jasny); font-style: italic; }
.mpasek__mecz {
display: flex; align-items: center; justify-content: center; gap: 18px;
text-decoration: none; color: #fff;
}
.mpasek__team { display: flex; align-items: center; gap: 10px; }
.mpasek__team span {
font-family: var(--font-display); font-weight: 700;
text-transform: uppercase; font-size: 13px; white-space: nowrap;
}
.mpasek__team .herb--brak { background: rgba(255,255,255,.16); color: #fff; }
.mpasek__kiedy { text-align: center; }
.mpasek__kiedy b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.mpasek__kiedy span { display: block; font-size: var(--fs-drobny); color: var(--muted-jasny); }
.mpasek__licznik { text-align: right; }
.mpasek__licznik .mpasek__label { text-align: right; }
.odl { display: flex; align-items: flex-start; justify-content: flex-end; gap: 6px; }
.odl span { text-align: center; min-width: 46px; }
.odl b {
display: block;
font-family: var(--font-display); font-weight: 800;
font-size: clamp(24px, 3vw, 38px); line-height: 1;
font-variant-numeric: tabular-nums; /* cyfry nie skacza przy kazdej sekundzie */
}
.odl i { display: block; font-style: normal; font-size: var(--fs-etykieta); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-jasny); margin-top: 4px; }
.odl em { font-style: normal; font-size: clamp(20px, 2.4vw, 30px); line-height: 1; opacity: .35; }
@media (max-width: 1000px) {
.mpasek__grid { grid-template-columns: 1fr; text-align: center; gap: 16px; }
.mpasek__licznik, .mpasek__licznik .mpasek__label { text-align: center; }
.odl { justify-content: center; }
.mpasek__sponsor img { margin: 0 auto; }
/*
* Blok meczowy wysrodkowany w calosci.
*
* Wiersz z herbami byl rozpychany do krawedzi (space-between), przez co
* herby siedzialy przy brzegach ekranu, a nazwa i data tloczyly sie
* posrodku. Na waskim ekranie zestaw ma stac razem, jako jedna calosc.
*/
.mpasek__mecz { justify-content: center; gap: 14px; }
.mpasek__team { flex-direction: column; gap: 6px; text-align: center; }
.mpasek__team span { white-space: normal; }
/* przy dwoch herbach po 100px nazwy musza sie zmiescic miedzy nimi */
.mpasek__team .herb { width: 66px !important; height: 66px !important; }
}
@media (max-width: 560px) {
.mpasek__team .herb { width: 54px !important; height: 54px !important; }
.mpasek__mecz { gap: 8px; }
}
/* ---------- 33. Tabela w hero ---------- */
.hero__aside .mtabela { padding-bottom: 4px; }
.mtab { width: 100%; border-collapse: collapse; font-size: 12px; color: #fff; }
.mtab th {
font-family: var(--font-body); font-weight: 600;
font-size: var(--fs-etykieta); letter-spacing: .1em; text-transform: uppercase;
color: var(--muted-jasny); text-align: left; padding: 4px 6px;
border-bottom: 1px solid rgba(255,255,255,.16);
}
.mtab td { padding: 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mtab tr:last-child td { border-bottom: 0; }
.mtab .n { text-align: right; }
.mtab__k { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mtab__k span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtab .herb--brak { background: rgba(255,255,255,.16); color: var(--muted-jasny); }
/* Wisloka wyrozniona — po to ten wycinek w ogole tu jest. */
.mtab tr.is-us { background: rgba(23,128,58,.28); }
.mtab tr.is-us td { font-weight: 700; }
/* ---------- 34. Karta "Nastepne mecze" w hero ---------- */
.res__s--data {
display: flex; flex-direction: column; align-items: center;
line-height: 1.1; padding: 2px 7px; min-width: 44px;
}
.res__s--data b { font-family: var(--font-display); font-weight: 700; font-size: 12px; }
.res__s--data i { font-style: normal; font-size: var(--fs-drobny); color: var(--muted-jasny); }
/* ---------- 35. Podstrona sponsora ---------- */
.spon-hero {
position: relative;
background: var(--green-darker) url("../assets/hero-bg-fans.jpg") center/cover no-repeat;
color: #fff;
/* tyle, ile zajmuje przezroczysty naglowek, plus oddech — wczesniej
doliczalismy jeszcze wysokosc osobnego paska z tasma */
padding: calc(var(--hh) + 14px) 0 32px;
overflow: hidden;
}
.spon-hero::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background: linear-gradient(180deg, rgba(7,30,16,.72) 0%, rgba(7,30,16,.55) 45%, rgba(7,30,16,.86) 100%);
}
.spon-hero .wrap { position: relative; z-index: 1; }
.spon-hero__grid { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 30px; align-items: center; }
/* Logo na bialym kaflu — logotypy sa projektowane pod jasne tlo. */
.spon-hero__logo {
background: #fff; border-radius: 10px; padding: 18px;
display: grid; place-items: center; aspect-ratio: 3/2;
}
.spon-hero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.spon-hero__typ { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: var(--fs-etykieta); color: #8fd6a6; margin-top: 12px; }
.spon-hero__nazwa { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 3.6vw, 46px); line-height: 1; margin: 4px 0 8px; }
.spon-hero__branza { margin: 0 0 8px; color: var(--muted-jasny); font-size: 14px; }
.spon-hero__zajawka { margin: 0 0 16px; color: var(--muted-jasny); max-width: 60ch; }
.spon-hero__btn {
display: inline-block; padding: 11px 22px;
background: var(--green); color: #fff; border: 1.5px solid var(--green); border-radius: 3px;
font-family: var(--font-display); font-weight: 700; font-size: 12px;
letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
}
.spon-hero__btn:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.spon-tresc { background: var(--paper); padding: 36px 0 52px; }
.spon-tresc__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 34px; align-items: start; }
.spon-film { margin-bottom: 18px; }
.spon-film iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: 8px; display: block; }
.spon-dane { list-style: none; margin: 0; padding: 0; }
.spon-dane li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(20,24,26,.10); font-size: 14px; }
.spon-dane span { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-etykieta); }
.spon-dane a { color: var(--green); font-weight: 600; text-decoration: none; }
.spon-dane a:hover { text-decoration: underline; }
.spon-dane__brak { color: var(--muted); font-style: italic; justify-content: flex-start; }
.spon-inni { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.spon-inni a {
display: grid; place-items: center; padding: 8px;
background: #fff; border: 1px solid rgba(20,24,26,.10); border-radius: 6px;
aspect-ratio: 3/2;
}
.spon-inni a:hover { border-color: var(--green); }
.spon-inni img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 900px) {
.spon-hero__grid, .spon-tresc__grid { grid-template-columns: 1fr; }
.spon-hero__logo { max-width: 200px; }
}
/* Herby w pasku meczowym w skali logotypu sponsora — bez wewnetrznego luzu. */
/*
* Herby w pasku najblizszego meczu — 100px.
*
* !important, bo rozmiar wchodzi z atrybutu style w wisloka_herb();
* inaczej wygralby ten wpisany w znaczniku.
*/
.mpasek__team .herb { width: 100px !important; height: 100px !important; }
.mpasek__team .herb img { object-fit: contain; }
.mpasek__team .herb--brak { font-size: 22px; }
.mpasek__mecz { gap: 24px; }
/* ---------- 36. Sekcja sponsorow z bazy ---------- */
.sponsors .section-label { margin-bottom: 18px; }
/*
* Kafle bez ramek i bez tla — logotypy maja mowic same za siebie.
* Flex z zawijaniem i wysrodkowaniem zamiast siatki auto-fill: ostatni,
* niepelny rzad tez zostaje na srodku, a nie dosuniety do lewej.
*/
.spgrid {
display: flex;
flex-wrap: wrap;
justify-content: center;
/* od gory, nie do srodka — inaczej kafle z dluzsza nazwa przesuwaja
swoje logo w gore i rzad przestaje sie trzymac jednej linii */
align-items: flex-start;
gap: 26px 34px;
margin: 0 0 40px;
}
.spgrid__i {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 132px;
text-decoration: none;
color: var(--ink);
}
/*
* Stala wysokosc pola na logo + object-fit: contain sprawia, ze wszystkie
* logotypy zajmuja ten sam pas w pionie i ukladaja sie w jedna linie,
* mimo ze same pliki maja rozne proporcje.
*/
.spgrid__logo {
display: grid;
place-items: center;
width: 100%;
height: 62px;
overflow: hidden; /* nic nie wychodzi na podpis pod spodem */
}
/*
* Wysokosc w PIKSELACH, nie w procentach.
*
* max-height: 100% liczylo sie tu wzgledem obszaru siatki, a nie wysokosci
* pola — wysokie logotypy (kwadratowy lockup Betclic) wychodzily poza kafel
* i nakladaly sie na nazwe sponsora pod spodem.
*/
.spgrid__logo img {
max-width: 100%;
max-height: 62px;
object-fit: contain;
display: block;
}
/* logotypy nie zmieniaja rozmiaru — sygnalem jest podswietlenie nazwy */
.spgrid__nazwa {
font-size: var(--fs-drobny);
line-height: 1.3;
text-align: center;
color: var(--muted);
letter-spacing: .04em;
}
.spgrid__i:hover .spgrid__nazwa { color: var(--green); }
/* Sponsorzy glowni wieksi — hierarchia widoczna bez czytania naglowkow. */
.spgrid--glowny { gap: 30px 46px; }
.spgrid--glowny .spgrid__i { width: 190px; }
.spgrid--glowny .spgrid__logo { height: 86px; }
.spgrid--glowny .spgrid__logo img { max-height: 86px; }
.spgrid--glowny .spgrid__nazwa { font-size: 12px; color: var(--ink); font-weight: 600; }
@media (max-width: 600px) {
.spgrid { gap: 20px 22px; }
.spgrid__i { width: 104px; }
.spgrid__logo { height: 50px; }
.spgrid__logo img { max-height: 50px; }
.spgrid--glowny .spgrid__i { width: 140px; }
.spgrid--glowny .spgrid__logo { height: 66px; }
.spgrid--glowny .spgrid__logo img { max-height: 66px; }
}
/* ---------- 37. Statystyki sezonu na kartach kadry ---------- */
.pcard__staty {
position: absolute;
top: 8px; left: 8px; z-index: 3;
display: flex; flex-direction: column; gap: 3px;
align-items: flex-start;
pointer-events: none;
}
.pcard__staty span {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 7px 2px 5px;
background: rgba(8,20,13,.72);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
border-radius: 3px;
font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-drobny); line-height: 1.5; color: #fff;
}
/* Ikony w CSS — bez dodatkowych plikow i bez zapytan. */
.ps__i { width: 12px; height: 12px; flex: 0 0 auto; background: center/contain no-repeat; }
/* ---------- 38. Pasek statystyk social media ---------- */
/*
* Kanały dzielą pasek po równo, ile by ich nie było.
*
* Prototyp ma na „.social .wrap” siatkę repeat(3, 1fr) — bardziej szczegółową
* niż sama klasa siatki, więc czwarty kanał (Instagram) spadał do drugiego
* rzędu. Flex z „flex: 1” dzieli szerokość między tyle kafelków, ile jest,
* i nie trzeba go poprawiać po dodaniu TikToka.
*/
.social .wrap.social__grid {
display: flex;
flex-wrap: wrap;
gap: 0;
}
.social__grid > .social__item { flex: 1 1 190px; min-width: 0; justify-content: center; }
/* Na telefonie dwa na dwa — cztery w rzędzie zostawiłyby po 90 px na kafelek. */
@media (max-width: 700px) {
.social__grid > .social__item { flex: 1 1 40%; }
}
.social__item {
display: flex; align-items: center; gap: 14px;
padding: 20px 22px;
text-decoration: none; color: #fff;
border-left: 1px solid rgba(255,255,255,.12);
transition: background .18s ease;
}
.social__item:first-child { border-left: 0; }
.social__item:hover { background: rgba(255,255,255,.07); }
.social__ikona { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; }
.social__ikona svg { width: 100%; height: 100%; display: block; }
/* Kolory marek — rozpoznawalne bez czytania podpisu. */
.social__item--youtube .social__ikona { color: #ff0033; }
.social__item--facebook .social__ikona { color: #1877f2; }
.social__item--x .social__ikona { color: #fff; }
.social__item--tiktok .social__ikona { color: #25f4ee; }
.social__item--instagram .social__ikona { color: #e1306c; }
.social__txt b {
display: block;
font-family: var(--font-display); font-weight: 800;
font-size: clamp(18px, 2vw, 26px); line-height: 1;
}
.social__txt span { font-size: 12px; color: var(--muted-jasny); }
@media (max-width: 760px) {
.social__item { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
.social__item:first-child { border-top: 0; }
}
/*
* Na telefonie kanaly stoja OBOK SIEBIE, po jednym w kolumnie.
*
* Ulozone jeden pod drugim zajmowaly pol ekranu, a niosly cztery liczby.
* Ikona ladzie nad liczba, podpis skraca sie do trzech liter z kropka
* ("sub.", "obs.") — pelne slowo i tak by sie nie zmiescilo.
*/
@media (max-width: 760px) {
/* .social .wrap z arkusza prototypu ma wyzsza specyficznosc niz sama
klasa siatki — stad podwojny selektor, inaczej regula nie dziala */
/* tyle kolumn, ile aktywnych kanalow — przy trzech nie zostaje pusta czwarta */
.social .social__grid { grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; }
.social .social__item {
flex-direction: column;
align-items: center;
gap: 6px;
padding: 14px 4px;
text-align: center;
border-top: 0;
border-left: 1px solid rgba(255, 255, 255, .12);
}
.social__item:first-child { border-left: 0; }
.social__ikona { width: 24px; height: 24px; }
.social__txt b { font-size: 16px; }
.social__txt span { letter-spacing: .04em; }
}
/*
* Pełny podpis znika tam, gdzie naprawdę brakuje miejsca. Przy czterech
* kanałach „OBSERWUJĄCYCH” zaczyna rozpychać kafelki wcześniej niż przy
* trzech, więc próg poszedł w górę — lepiej skrócić napis niż złamać rząd.
*/
.social__skrot { display: none; }
@media (max-width: 1120px) {
.social__pelny { display: none; }
.social__skrot { display: inline; }
}
/* ---------- 39. Tasma sponsorow w hero kartoteki ---------- */
/* Tasma dzieli tlo z hero — bez wlasnego paska, bez szwu. */
.spon-hero__tasma { position: relative; z-index: 1; margin-bottom: 22px; }
.spon-hero__tasma .hero-tasma {
margin-left: 0;
height: 44px;
/* biale tlo tak samo jak w hero na stronie glownej — logotypy sponsorow
sa robione pod jasne podloze i na ciemnym po prostu gina */
background: #fff;
}
.spon-hero__tasma .ht img { height: calc(30px * var(--ht-s, 1)); max-width: 210px; }
/* ---------- 40. Ikony statystyk (zestaw jak w tabelach kariery) ---------- */
.ps__i--mecz { background-image: url("data:image/svg+xml;utf8,"); }
.ps__i--gol { background-image: url("data:image/svg+xml;utf8,"); }
.ps__i--asysta { background-image: url("data:image/svg+xml;utf8,"); }
.ps__i--zolta { background-image: url("data:image/svg+xml;utf8,"); }
.ps__i--czerwona { background-image: url("data:image/svg+xml;utf8,"); }
/* czyste konto: rekawica bramkarska — liczba tylko na kartach bramkarzy */
.ps__i--cs { background-image: url("data:image/svg+xml;utf8,"); }
.ps__i--min { background-image: url("data:image/svg+xml;utf8,"); }
/* ---------- 41. Plakietka po prawej stronie tasmy ---------- */
.hero-tasma__prawa {
flex: 0 0 auto;
display: inline-flex; align-items: center;
height: 100%; padding: 0 14px;
/* tak jak plakietka ligi po lewej — ciemna na bialej belce */
background: var(--green-darker);
border-left: 1px solid rgba(20, 24, 26, .12);
font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-etykieta); letter-spacing: .14em; text-transform: uppercase;
color: #fff; white-space: nowrap;
}
/*
* Asysta w blekicie, nie w zoltym — przy zoltej kartce (#ffcd00) obie
* ikony zlewaly sie w jedna plame. Blekit nie koliduje tez z zielenia
* bramek ani z biela meczow i minut.
*/
/* ---------- 42. Bez powiekszania po najechaniu ---------- */
/*
* Prototyp unosi i powieksza niemal kazdy kafel po najechaniu
* (translateY + scale). Wylaczamy to punktowo, z nazwy — szerokie
* `transform: none` na :hover zabiloby tez przesuniecia, ktore niosa
* uklad (sylwetka w hero, kropki na zdjeciu zespolowym, dymki).
*
* Sygnalem, ze cos jest klikalne, zostaje zmiana koloru, obwodki
* albo krycia — bez ruchu.
*/
.pcard:hover,
.newscard:hover,
.fix:hover,
.promo:hover,
a.tg__item:hover,
.sp-thumb:hover,
.fx-row:hover,
.news-card:hover,
.price-card:hover,
.player:hover,
.agegroup:hover,
.btn:hover,
.hsoc a:hover {
transform: none;
}
.pcard:hover .pcard__photo img,
.news-card:hover .news-card__img img,
.hist-gallery button:hover img {
transform: none;
}
/* ---------- 43. Jeden kontener dla calego serwisu ---------- */
/*
* PROBLEM: szerokosc kontenera byla wszedzie ta sama (--maxw: 1500px),
* ale margines wewnetrzny juz nie — naglowek mial 40px, .wrap 24px.
* Przez to tresc naglowka zaczynala sie 16px dalej od krawedzi niz tresc
* stopki i sekcji, co czytalo sie jako "stopka szersza od naglowka".
*
* KONTRAKT: kazdy kontener ma max-width: var(--maxw) i padding-inline:
* var(--gutter). Nowa sekcja dostaje klase .wrap i nie wymaga wlasnych
* regul; gdy z jakiegos powodu nie moze, dopisuje sie do listy nizej.
*/
:root {
--gutter: 24px;
/*
* Zielenie akcentu. Motyw uzywa var(--leaf) (nazwy druzyn, przycisk CTA
* slajdu) i var(--green-herb-jasny) (haslo "biało-zieloni"), ale sam ich
* nie definiowal - braly sie z :root prototypu design/styles.css. Lokalny
* mockup jest starszy i tych dwoch nie ma, wiec akcenty schodzily na biało.
* Definiujemy je TU, w motywie (jedzie na prod), wartosciami z produkcji.
*/
--leaf: #17803a;
--green-herb-jasny: #00b853;
}
.wrap,
.roster,
.split,
.boisko__stage,
.site-header__inner,
.site-header__top,
.kal .wrap,
.teamshot__head,
.teamshot__stage {
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* Sekcje, ktore same sa kontenerem — nie moga miec zagniezdzonego .wrap,
bo marginesy by sie zsumowaly (tak wygladalo to wczesniej w .fixtures). */
.fixtures,
.teamshot__stage--pelna {
max-width: none;
padding-inline: 0;
}
.fixtures > .wrap {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* Zdjecie zespolowe idzie na pelna szerokosc okna — swiadomy wyjatek. */
.teamshot__stage { max-width: none; padding-inline: 0; }
@media (max-width: 700px) {
:root { --gutter: 16px; }
}
/* ---------- 44. Solenizant w panelu kalendarza ---------- */
/*
* Wpis urodzinowy niesie wiecej niz meczowy: twarz, pozycje i dorobek
* w Wisloce. Zdjecie zastepuje ikonke, wiec szerokosc kolumny zostaje
* ta sama i wiersze w panelu nadal sie zgadzaja.
*/
.kp__foto {
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 50%;
overflow: hidden;
background: rgba(20, 24, 26, .06);
}
/*
* Zdjecia kadry sa niemal kwadratowe (ok. 4000x4160) i pokazuja cala
* sylwetke, wiec samo object-fit nic nie przycina — w kolku ladowala
* mikroskopijna postac. Powiekszamy obraz i przesuwamy tak, by srodek
* glowy (ok. 17% wysokosci, w osi kadru) wypadl lekko nad srodkiem kola.
* Sesja jest jednolita, wiec te same liczby dzialaja dla calej kadry.
*/
.kp__foto { position: relative; }
.kp__foto img {
position: absolute;
/* globalne img{max-width:100%} scinaloby powiekszenie do rozmiaru kola */
max-width: none;
width: 250%;
height: auto;
left: -73%;
top: -1%;
display: block;
}
.kp__stat {
display: block;
margin-top: 3px;
font-size: var(--fs-drobny);
color: var(--muted);
}
.kp__stat b { display: inline; font-size: var(--fs-drobny); color: var(--ink); font-weight: 800; }
.kp__stat i { margin: 0 5px; font-style: normal; opacity: .45; }
.kp__poz--uro { align-items: center; }
/* ---------- 45. Przeskok miedzy zawodnikami ---------- */
/*
* Zastepuje pasek "Pozostali zawodnicy", ktory zabieral caly ekran nad
* hero. Siedzi w prawym gornym rogu bloku z danymi, wiec nie przesuwa
* niczego w ukladzie; kolejnosc idzie po numerach na koszulce.
*/
.zaw-hero__dane { position: relative; }
.zaw-skok {
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
gap: 4px;
}
/*
* Przycisk opisany numerem i nazwiskiem, wiec nie jest juz kolkiem —
* rozciaga sie do tresci. Wysokosc zostaje stala, zeby oba wygladaly
* tak samo niezaleznie od dlugosci nazwiska.
*/
.zaw-skok__btn {
display: inline-flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 12px;
border-radius: 17px;
border: 1px solid rgba(255, 255, 255, .28);
color: #fff;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: background .18s ease, border-color .18s ease;
}
.zaw-skok__strzalka { font-size: 19px; opacity: .8; }
/* numer na koszulce — to po nim kibic rozpoznaje zawodnika */
.zaw-skok__nr {
font-family: var(--font-display);
font-weight: 800;
font-size: 15px;
color: #fff;
}
.zaw-skok__kto {
font-size: var(--fs-drobny);
font-weight: 600;
max-width: 15ch;
overflow: hidden;
text-overflow: ellipsis;
}
.zaw-skok__btn:hover {
background: rgba(255, 255, 255, .14);
border-color: var(--muted-jasny);
}
.zaw-skok__licznik {
min-width: 46px;
text-align: center;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
color: var(--muted-jasny);
}
/* nazwa sasiada zostaje dla czytnikow ekranu i w atrybucie title */
.zaw-skok__ukryte {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
@media (max-width: 700px) {
.zaw-skok { position: static; margin: 0 0 10px; justify-content: flex-end; }
}
/* ---------- 46. Zwijane listy meczow na /rozgrywki ---------- */
/*
* Terminarz sezonu to okolo 30 spotkan. Renderujemy WSZYSTKIE (sa w
* kodzie strony, wiec widzi je wyszukiwarka i dzialaja bez JS-a),
* ale poza pierwsza piatka chowamy je do czasu rozwiniecia.
*/
.rozgrywki__list.is-zwiniete .rmatch--poza { display: none; }
.rozgrywki__wiecej {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 2px 0 18px;
padding: 9px 16px;
border: 1px solid var(--line-dark);
border-radius: 6px;
background: #fff;
color: var(--ink);
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-etykieta);
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
transition: border-color .18s ease, background .18s ease;
}
.rozgrywki__wiecej:hover {
border-color: var(--green);
background: var(--paper);
}
/* strzalka obraca sie po rozwinieciu — jedyny ruch, bez powiekszania */
.rozgrywki__wiecej::after {
content: "▾";
font-size: 11px;
line-height: 1;
transition: transform .18s ease;
}
.rozgrywki__wiecej[aria-expanded="true"]::after { transform: rotate(180deg); }
/* ---------- 47. Statystyki zawodnikow na /rozgrywki ---------- */
.rozgrywki__zawodnicy { margin-top: 26px; }
/* tabela jest szeroka — na waskim ekranie przewija sie sama, a nie strona */
.ztab__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ztab {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-drobny);
min-width: 560px;
}
.ztab th {
text-align: left;
padding: 9px 10px;
background: var(--green-darker);
color: #fff;
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-etykieta);
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
}
.ztab td {
padding: 9px 10px;
border-bottom: 1px solid var(--line-dark);
vertical-align: middle;
}
.ztab tbody tr:nth-child(even) td { background: var(--paper); }
.ztab .num { text-align: right; white-space: nowrap; }
.ztab th.num { text-align: right; }
.ztab__lp { width: 34px; color: var(--muted); text-align: right; }
/* kolumna z nazwiskiem bierze caly luz, liczby trzymaja sie swojej szerokosci */
.ztab__kto { width: 100%; }
.ztab__kto a { color: var(--ink); text-decoration: none; font-weight: 700; }
.ztab__kto a:hover { color: var(--green-tekst); text-decoration: underline; }
/* pozycja pod nazwiskiem — mniejszy stopien, ale wciaz czytelny */
.ztab__poz {
display: block;
font-size: var(--fs-etykieta);
color: var(--muted);
text-transform: capitalize;
}
/*
* Kreska i zero sa wyszarzone CELOWO: liczba, ktora cos znaczy, ma sie
* rzucac w oczy, a puste pole ma nie odciagac uwagi. Kreska = brak danych,
* zero = wiemy, ze zero.
*/
.ztab i { font-style: normal; color: var(--muted); }
.ztab tbody.is-zwiniete .zrow--poza { display: none; }
/* ---------- 48. Sklady i bramki rywala na podstronie meczu ---------- */
/* Mobile first: jedna kolumna kart, dwie dopiero od tabletu w gorę. */
.mecz-sklady {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 12px;
}
/* Każda drużyna w białej karcie - porządkuje listę na jasnym tle sekcji. */
.msk {
background: #fff;
border: 1px solid var(--line-dark);
border-radius: 14px;
padding: 14px 16px;
}
.msk__team {
display: flex;
align-items: center;
gap: 9px;
margin: 0 0 10px;
padding-bottom: 10px;
border-bottom: 2px solid rgba(23, 128, 58, .22);
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
text-transform: uppercase;
letter-spacing: .02em;
}
.msk__lista { list-style: none; margin: 0; padding: 0; }
.msk__lista li {
display: grid;
grid-template-columns: 26px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 8px 0;
border-bottom: 1px solid var(--line-dark);
font-size: var(--fs-drobny);
}
.msk__lista li:last-child { border-bottom: 0; }
.msk__nr {
font-family: var(--font-display);
font-weight: 700;
color: var(--muted);
text-align: right;
}
.msk__kto a { color: var(--ink); text-decoration: none; font-weight: 700; }
.msk__kto a:hover { color: var(--green-tekst); text-decoration: underline; }
/* sklad bez numerow: kolumna znika zamiast stac pusta */
.msk--bez-nr .msk__lista li { grid-template-columns: minmax(0, 1fr) auto; }
.msk--bez-nr .msk__nr { display: none; }
.msk__znaki { display: inline-flex; align-items: center; gap: 5px; }
/* minuta zejscia z boiska — informacja drugoplanowa, ale czytelna */
.msk__zm {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-etykieta);
color: var(--muted);
}
/* bramki rywala odrozniamy kolorem minuty, nie osobnym ukladem */
.mecz-gole--rywal .mg__min { color: #b4483f; }
@media (min-width: 761px) {
.mecz-sklady { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
/* ---------- 49. Wskaznik podmenu w gornym pasku ---------- */
/*
* Sam mechanizm rozwijania jest wyzej (sekcja 10) — byl w arkuszu, tylko
* naglowek nigdy nie renderowal znacznikow .hnav__item, wiec nie mial sie
* na czym uruchomic. Tutaj zostaje juz tylko strzalka: bez niej nic nie
* sugeruje, ze pozycja cos ukrywa.
*/
.hnav__item--ma { margin-right: 11px; }
.hnav__item--ma > .hnav__link::before {
content: "";
position: absolute;
right: -11px;
top: 50%;
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-70%) rotate(45deg);
opacity: .7;
}
@media (max-width: 1040px) { .site-header .hnav__sub { display: none; } }
/* ===== Podstrony od Maurycego (szkolka, tabela, historia, 404, wpis) ===== */
/* ===== Szkółka piłkarska ===== */
.szk{padding:52px 0 66px}
.szk-intro{text-align:center;max-width:760px;margin:0 auto 40px}
.szk-intro h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(22px,3vw,32px);color:var(--ink);line-height:1.1;margin:0 0 20px}
.szk-cta{font-size:14px}
.szk-label{text-align:center;font-family:var(--font-body);font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:0 0 22px}
.szk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.szk-item{background:#fff;border:1px solid var(--line-dark);border-top:3px solid var(--green);border-radius:12px;padding:26px 20px;text-align:center;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.szk-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.szk-item__ico{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--paper)}
.szk-item__ico img{width:34px;height:34px;object-fit:contain}
.szk-item p{color:var(--ink);font-size:14px;line-height:1.45;margin:0;font-weight:600}
@media(max-width:900px){ .szk-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .szk-grid{grid-template-columns:1fr} }
.szk-boisko{display:grid;grid-template-columns:1.1fr 1fr;gap:0;margin-top:44px;border:1px solid var(--line-dark);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.szk-boisko__media{min-height:300px;position:relative;background:var(--green-darker)}
.szk-boisko__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.szk-boisko__body{padding:40px;display:flex;flex-direction:column;justify-content:center}
.szk-boisko__body h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.6vw,30px);color:var(--ink);margin:0 0 14px}
.szk-boisko__body p{color:var(--muted);font-size:16px;line-height:1.7;margin:0 0 22px}
.szk-boisko__body .btn{align-self:flex-start}
@media(max-width:820px){ .szk-boisko{grid-template-columns:1fr} .szk-boisko__media{min-height:220px} }
/* ===== Tabela ligowa (strona) ===== */
.ltable-page{padding:44px 0 60px}
.ltable-rank{text-align:center;margin:0 auto 34px}
.ltable-rank__num{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(64px,9vw,110px);line-height:1;color:var(--green)}
.ltable-rank__lbl{display:block;font-family:var(--font-body);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:6px}
.ltable-page .ltable__table th,.ltable-page .ltable__table td{padding:9px 10px}
.ltable-page .ltable__table td.num{white-space:nowrap}
/* ===== 404 ===== */
body.redesign-404{background:#0f2417}
.err404-hero{text-align:center;min-height:76vh;display:flex;flex-direction:column;justify-content:center}
.err404-hero .wrap{position:relative}
.err404-big{font-family:var(--font-display);font-weight:700;line-height:.9;font-size:clamp(120px,26vw,320px);letter-spacing:-.02em;color:rgba(255,255,255,.14)}
.err404-hero h1{margin:-8px 0 0;color:#fff}
.err404-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.err404-search{display:flex;gap:0;max-width:420px;width:100%;background:#fff;border-radius:6px;overflow:hidden}
.err404-search input{flex:1;border:0;padding:0 16px;font:inherit;font-size:15px;color:#0b1f14;background:transparent}
.err404-search input:focus{outline:2px solid var(--green);outline-offset:-2px}
.err404-search button{border:0;background:var(--green);color:#fff;font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:0 20px;cursor:pointer;min-height:48px}
.err404-search button:hover{filter:brightness(1.08)}
.err404-tips{padding:52px 0 64px}
.err404-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.err404-card{border:1px solid var(--line,#e5e7eb);border-top:3px solid var(--green);border-radius:10px;padding:26px 22px;background:#fff}
.err404-num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--green);color:#fff;font-family:var(--font-display);font-weight:700;margin-bottom:12px}
.err404-card p{margin:0;color:var(--muted);line-height:1.55}
.err404-card a{color:var(--green);font-weight:600}
.err404-links{text-align:center;margin-top:34px;color:var(--muted);font-size:14px}
.err404-links a{color:var(--green);font-weight:600}
@media(max-width:720px){.err404-grid{grid-template-columns:1fr}}
/* ===== Poprawki mobilne: menu + hero ===== */
/* Menu mobilne ma wygladac jak w designie — duze napisy z „+" (.menu-groups).
Chowamy pigulki (.menu-quick), ktore prototyp pokazywal na <=860px. */
.menu-quick { display: none !important; }
/* Hero na telefonie: haslo „Najstarsi bialo-zieloni w Polsce" nie moze
nachodzic na naglowek/herb — chowamy je na waskich ekranach. */
@media (max-width: 860px) {
.hero__tagcol,
.hero__main .hero__tagcol,
.hero__main .hero__tag { display: none !important; }
}
/* Duze linki w overlayu (pozycje bez podstron, np. Biznes) — jak naglowki grup */
.menu-group--link { text-decoration: none; }
/* Ikony social w menu mobilnym (overlay) */
.menu-socials { display: flex; gap: 14px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line-dark); }
.menu-socials a { width: 44px; height: 44px; border: 1px solid var(--line-dark); border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.menu-socials a:hover { background: var(--green); border-color: var(--green); color: #fff; }
.menu-socials svg { width: 19px; height: 19px; }
/* Pojedynczy wpis (aktualnosci) */
/*
* Kontener wpisu ma teraz pelna szerokosc .wrap, wiec kwadratowy plakat
* z social mediow rozciagalby sie na 1450 px. Zdjecie glowne trzymamy
* w rozsadnej skali, wyrownane z tekstem.
*/
/*
* Kontener wpisu ma teraz pelna szerokosc .wrap, wiec kwadratowy plakat
* z social mediow rozciagalby sie na 1450 px i zajmowal caly ekran.
* Ograniczamy WYSOKOSC — zdjecia poziome nadal ida na pelna miare tekstu,
* a plakaty nie spychaja tresci pod pierwsze przewiniecie.
*/
.single-post__cover { margin: 0 0 26px; max-width: 880px; }
.single-post__cover img {
max-width: 100%; max-height: 460px; width: auto; height: auto;
border-radius: 12px; display: block;
}
.single-post .page-body img { max-width: 100%; height: auto; border-radius: 10px; }
.single-post__pages { margin-top: 18px; font-weight: 600; }
.single-post__back { margin: 30px 0 0; }
/* ===== Historia klubu — dopracowanie wygladu ===== */
.history-club__lead {
font-size: 19px; line-height: 1.7; color: var(--ink); font-weight: 500;
border-left: 3px solid var(--green); padding-left: 18px; margin: 6px 0 32px;
}
.history-club .page-body h2 { position: relative; margin-top: 52px; padding-bottom: 12px; }
.history-club .page-body h2::after {
content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--green);
}
.history-club .page-body img:not([width="54"]) {
box-shadow: 0 14px 34px rgba(11,31,20,.14); margin: 22px 0 !important;
}
.history-club .galeria-masonry { margin-top: 44px; }
.history-club .galeria-masonry h4 {
text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--muted); margin: 0 0 14px;
}
.history-club .galeria-masonry .gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 0; }
.history-club .galeria-masonry .gallery-item { margin: 0 !important; width: auto !important; padding: 0; }
.history-club .galeria-masonry .gallery-item img {
width: 100%; height: 150px; object-fit: cover; border: 0 !important; border-radius: 8px;
box-shadow: 0 8px 20px rgba(11,31,20,.12); transition: transform .25s var(--ease);
}
.history-club .galeria-masonry .gallery-item img:hover { transform: scale(1.04); }
@media (max-width: 560px){ .history-club .galeria-masonry .gallery { grid-template-columns: repeat(2,1fr); } }
/* ---------- 50. Naglowek na telefonie: plakietka ligi przy herbie ---------- */
/*
* Ponizej 1100px plakietka "Betclic 3. Liga" znikala razem z reszta prawej
* kolumny — na telefonie zostawal sam herb i przycisk Bilety. Przywracamy
* ja obok herbu: sam logotyp, bez napisu, zeby zmiescic sie w waskim pasku.
*
* Herb jest wysrodkowany w siatce, wiec plakietke kotwiczymy do srodka
* paska i odsuwamy w prawo o polowe herbu plus odstep.
*/
@media (max-width: 1100px) {
.site-header__inner { position: relative; }
.site-header__right .sh-league {
display: inline-flex;
position: absolute;
left: 50%;
top: 50%;
transform: translate(46px, -50%);
margin: 0;
padding: 4px 8px;
border: 0;
background: rgba(255, 255, 255, .12);
border-radius: 3px;
pointer-events: none;
}
/* w pasku szerokosci ok. 430px napis "3. Liga" juz sie nie miesci */
.site-header__right .sh-league > span { display: none; }
.site-header__right .sh-league__img { height: 26px; }
.site-header.is-scrolled .site-header__right .sh-league,
.site-header.is-solid .site-header__right .sh-league {
background: rgba(20, 24, 26, .08);
}
/* po przewinieciu herb maleje — plakietka idzie za nim */
.site-header.is-scrolled .site-header__right .sh-league {
transform: translate(38px, -50%);
}
/*
* Wysrodkowana ma byc PARA: herb plus plakietka ligi, a nie sam herb.
* Dotad herb siedzial dokladnie na srodku, plakietka wisiala z jego prawej
* i cala grupa uciekala w prawo — przy krawedzi ekranu robilo sie ciasno.
*
* Przesuniecie to polowa tego, co plakietka dokłada z prawej: (4 px odstepu
* + 53 px plakietki) / 2. Nie zalezy od szerokosci herbu, wiec dziala tak
* samo przed i po przewinieciu.
*/
.site-header__logo { transform: translateX(-28px); }
.site-header__right .sh-league { transform: translate(18px, -50%); }
.site-header.is-scrolled .site-header__right .sh-league { transform: translate(10px, -50%); }
}
@media (max-width: 380px) {
.site-header__right .sh-league { display: none; } /* naprawde brak miejsca */
}
/* ---------- 51. Polaczona karta meczow (wyniki + terminarz) ---------- */
/*
* Trzy pozycje w kadrze, reszta pod przewinieciem.
*
* Wysokosc liczymy z realnego wiersza (~48px) — sztywna wartosc rozjezdza
* sie, gdy nazwa klubu lamie sie na dwie linie, i przycinalaby czwarty
* wiersz w polowie zamiast pokazac, ze jest co przewijac.
*/
/* desktop pokazuje komplet piatki, telefon trzy pozycje i przewijanie */
.res--scroll { max-height: none; }
@media (max-width: 1040px) {
.res--scroll { max-height: 172px; }
}
.res--scroll {
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, .35) transparent;
}
.res--scroll::-webkit-scrollbar { width: 5px; }
.res--scroll::-webkit-scrollbar-track { background: transparent; }
.res--scroll::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .28);
border-radius: 3px;
}
/* delikatna zapowiedz, ze lista siega dalej niz widac */
.mmecze .res {
-webkit-mask-image: linear-gradient(#000 82%, rgba(0, 0, 0, .35) 100%);
mask-image: linear-gradient(#000 82%, rgba(0, 0, 0, .35) 100%);
}
/* ---------- 52. Zapowiedz meczu: obie druzyny obok siebie ---------- */
.zap { padding: 30px 0 40px; background: var(--paper); }
.zap__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
margin-top: 14px;
}
/* pionowa kreska miedzy druzynami — czytelny podzial "my / oni" */
.zap__kol + .zap__kol { border-left: 1px solid var(--line-dark); padding-left: 28px; }
.zap__team {
display: flex; align-items: center; gap: 10px;
margin: 0 0 12px;
font-family: var(--font-display); font-weight: 700;
font-size: 17px; text-transform: uppercase;
}
.zap__pozycja {
display: flex; align-items: baseline; gap: 10px;
padding: 10px 0 14px;
border-bottom: 1px solid var(--line-dark);
}
.zap__pozycja b {
font-family: var(--font-display); font-weight: 800;
font-size: 30px; line-height: 1; color: var(--green-tekst);
}
.zap__pozycja span { font-size: var(--fs-drobny); color: var(--muted); }
.zap__pod {
margin: 16px 0 8px;
font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-etykieta); letter-spacing: .12em; text-transform: uppercase;
color: var(--muted);
}
.zap__forma, .zap__strzelcy, .zap__h2h { list-style: none; margin: 0; padding: 0; }
.zap__forma li, .zap__h2h li {
display: grid;
grid-template-columns: 24px minmax(0, 1fr) auto auto;
align-items: center;
gap: 10px;
padding: 7px 0;
border-bottom: 1px solid var(--line-dark);
font-size: var(--fs-drobny);
}
.zap__rywal { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap__gdzie { font-size: var(--fs-etykieta); color: var(--muted); white-space: nowrap; }
.zap__wynik { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
.zap__sezon { font-family: var(--font-display); font-weight: 700; }
/* litera wyniku zamiast kolorowego paska — czytelna takze bez koloru */
.zap__wynikbadge {
display: grid; place-items: center;
width: 22px; height: 22px; border-radius: 50%;
font-family: var(--font-display); font-weight: 700; font-size: 11px;
color: #fff;
}
.zap__wynikbadge--w { background: var(--green); }
.zap__wynikbadge--r { background: #c8a63a; }
.zap__wynikbadge--p { background: #b4483f; }
.zap__strzelcy li {
display: flex; align-items: baseline; gap: 8px;
padding: 6px 0;
border-bottom: 1px solid var(--line-dark);
font-size: var(--fs-drobny);
}
.zap__strzelcy li span { flex: 1 1 auto; min-width: 0; }
.zap__strzelcy li b { font-family: var(--font-display); font-weight: 800; }
.zap__strzelcy li i { font-style: normal; font-size: var(--fs-etykieta); color: var(--muted); }
/* zrodlo nie podaje asyst rywali — mowimy to wprost, zamiast wpisywac zero */
.zap__uwaga { margin: 8px 0 0; font-size: var(--fs-etykieta); color: var(--muted); font-style: italic; }
.zap__pod--h2h {
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
margin-top: 26px;
}
.zap__pod--h2h span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.zap__h2h li { grid-template-columns: auto minmax(0, 1fr) 24px auto; }
/*
* Bezposrednie spotkania w dwoch kolumnach USTAWIONYCH POD DRUZYNAMI:
* po lewej mecze przy Parkowej, po prawej u rywala. Ta sama siatka co
* przy glowach, wiec kolumny trafiaja dokladnie pod swoje herby.
*
* Wczesniej lista plynela przez dwie kolumny bez podzialu i kolumny
* niosly przypadkowe mecze — sasiedztwo herbu sugerowalo cos, co nie bylo
* prawda.
*/
.zap__grid--glowy { margin-bottom: 4px; }
.zap__pod--h2h { margin-top: 18px; }
.zap__grid--h2h { margin-top: 6px; }
.zap__kol--h2h .zap__pod { margin-top: 0; }
/* Miejsce nadchodzacego meczu — ta kolumna mowi, czego sie spodziewac. */
.zap__kol--h2h.is-teraz { position: relative; }
.zap__kol--h2h.is-teraz .zap__pod { color: var(--green-tekst); }
.zap__kol--h2h .zap__pod em {
font-style: normal; text-transform: none; letter-spacing: 0;
font-weight: 700; font-size: 11px;
margin-left: 8px; padding: 2px 8px; border-radius: 999px;
background: rgba(23, 128, 58, .12); color: var(--green-tekst);
}
@media (max-width: 760px) {
.zap__grid { grid-template-columns: 1fr; gap: 22px; }
.zap__kol + .zap__kol { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-dark); padding-top: 22px; }
}
/* ---------- 53. Porownanie sezonow po tej samej kolejce ---------- */
.por { margin: 6px 0 22px; }
.por__head {
font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-etykieta); letter-spacing: .1em; text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.por__tab { width: 100%; border-collapse: collapse; font-size: var(--fs-drobny); }
.por__tab th {
text-align: left; padding: 7px 10px;
font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-etykieta); letter-spacing: .08em; text-transform: uppercase;
color: var(--muted);
border-bottom: 1px solid var(--line-dark);
}
.por__tab td { padding: 8px 10px; border-bottom: 1px solid var(--line-dark); }
.por__tab .n { text-align: right; white-space: nowrap; }
.por__tab th.n { text-align: right; }
/* biezacy sezon wyrozniony — to on jest punktem odniesienia */
.por__teraz td { background: rgba(23, 128, 58, .08); }
.por__roznica td { color: var(--muted); }
.por__zmiana { font-style: normal; font-weight: 700; }
.por__zmiana--lepiej { color: var(--green-tekst); }
.por__zmiana--gorzej { color: #b4483f; }
.por__zmiana--rowno { color: var(--muted); font-weight: 400; }
/* ---------- 54. Tabela pakietow rozwijana po wyborze ---------- */
/*
* Zestawienie swiadczen ma kilkadziesiat wierszy. Rozlozone od razu
* spychalo w dol porownywarke i kontakt, czyli to, po co ktos tu wchodzi.
* Pokazuje sie po klknieciu pakietu — wtedy wiadomo, czego dotyczy.
*/
/* tabela, uwagi i kontakt czekaja na wybor pakietu */
.pkg-table-wrap.is-zwinieta,
.pkg-notes.is-zwinieta,
.pkg-cta.is-zwinieta { display: none; }
.pkg-podpowiedz {
margin: 6px 0 18px;
text-align: center;
font-size: var(--fs-drobny);
color: var(--muted);
font-style: italic;
}
/*
* Tabela pakietow na telefonie. Prototyp daje poziomy scroll (min-width),
* ale pierwsza kolumna (nazwa swiadczenia) uciekala przy przewijaniu i byla
* za szeroka. Przyklejamy ja do lewej i zwezamy - reszta kolumn scrolluje
* poziomo, a swiadczenie zawsze widac.
*/
@media (max-width: 700px) {
.pkg-table { min-width: 560px; font-size: 13px; }
.pkg-table thead th,
.pkg-table td { padding: 9px 8px; }
.pkg-table td.c { width: 72px; }
.pkg-table th:first-child,
.pkg-table td:first-child {
position: sticky;
left: 0;
z-index: 2;
width: 165px;
min-width: 165px;
max-width: 165px;
white-space: normal;
box-shadow: 6px 0 7px -6px rgba(0, 0, 0, .28); /* cien = jest wiecej w prawo */
}
/* Przyklejona kolumna musi miec pelne tlo, inaczej przeswituja komorki spod spodu. */
.pkg-table tbody td:first-child { background: #fff; }
.pkg-table tbody tr:nth-child(even) td:first-child { background: var(--paper); }
.pkg-table thead th:first-child { z-index: 3; background: var(--green-darker); }
}
/*
* Karta wyrozniona aktualnosci/galerii: obraz nie moze zostawiac zielonych
* pasow (szczegolnie na telefonie, gdzie kontener jest waski, a wysoki).
*
* Zdjecie poziome WYPELNIA kadr (cover). Plakat (pion/kwadrat) pokazujemy w
* calosci (contain), ale na ROZMYTYM tle z tego samego zdjecia - zamiast
* solidnej zieleni. Prototyp mial samo `contain` na zielonym tle.
*/
.news-featured__img:not(.is-plakat) img { object-fit: cover; }
.news-featured__img.is-plakat { isolation: isolate; }
.news-featured__img.is-plakat::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: var(--tlo) center / cover no-repeat;
filter: blur(22px) brightness(.75);
transform: scale(1.15);
}
.news-featured__img.is-plakat img { object-fit: contain; z-index: 1; }
/* Na telefonie karta wyrozniona nizsza - przy waskiej szerokosci 380px robilo
sie prawie kwadratem. */
@media (max-width: 700px) {
.news-featured__img { min-height: 240px; }
}
/* ---------- 55. Wizualizator: poprawki podgladu ---------- */
/*
* Pusty znacznik logo renderowal sie jako "zepsuty obrazek" z tekstem
* zastepczym na srodku koszulki. Atrybut hidden przegrywal z regula
* position:absolute z arkusza prototypu — stad jawne display:none.
*/
.wiz__logo[hidden] { display: none !important; }
/* podpowiedz nie moze siedziec na srodku nosnika — schodzi pod spod */
.wiz__stage .wiz__empty {
align-items: flex-end;
padding-bottom: 14px;
background: linear-gradient(to top, rgba(8, 20, 13, .55), rgba(8, 20, 13, 0) 38%);
color: #fff;
}
/* jasne tlo renderu koszulki — scena nie moze byc ciemnozielona */
.wiz__stage { background: #fff; }
.wiz__bg { width: 100%; height: 100%; object-fit: contain; display: block; }
/* wgrywanie logo jako pierwszy krok — wyrozniony przycisk nad lista nosnikow */
.wiz__upload--gora { margin: 0 0 14px; }
/* ---------- 56. Karta kadry: dane na zdjeciu ---------- */
/*
* Pozycja, imie i nazwisko wchodza NA ZDJECIE, w lewy dolny rog.
* Wczesniej wisialy pod kadrem i karta konczyla sie luznym blokiem tekstu
* na ciemnym tle sekcji — teraz kafelek jest jedna caloscia.
*
* Numer przenosimy w prawo, bo lewy dol zajmuja juz dane zawodnika.
*/
.pcard { position: relative; }
.pcard .pcard__info {
position: absolute;
left: 12px;
right: 54px; /* zapas na numer po prawej */
bottom: 10px;
z-index: 3;
padding: 0;
text-align: left;
pointer-events: none;
}
.pcard .pcard__num {
left: auto;
right: 12px;
bottom: 10px;
font-size: 30px;
opacity: .92;
}
/* nazwisko na zdjeciu potrzebuje mocniejszego kontrastu niz na tle sekcji */
.pcard .pcard__pos { color: rgba(255, 255, 255, .82); }
.pcard .pcard__first,
.pcard .pcard__last { color: #fff; }
.pcard .pcard__info > * { text-shadow: 0 1px 6px rgba(0, 0, 0, .75); }
/* mocniejsze przyciemnienie dolu kadru — inaczej jasne stroje zjadaja tekst */
.pcard .pcard__photo::after {
background: linear-gradient(180deg, transparent 38%, rgba(6, 32, 17, .96) 100%);
}
/* slowo "zieloni" w hasle — zielen z herbu klubu, rozjasniona pod ciemne tlo */
.hero__tag .is-leaf,
.slogan .is-leaf,
.caveat .is-leaf { color: var(--green-herb-jasny); }
/* zdjecie zawodnika w tabeli statystyk — twarz zamiast samego nazwiska */
.ztab__kto { display: flex; align-items: center; gap: 10px; }
.ztab__foto {
position: relative;
flex: 0 0 auto;
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
background: rgba(20, 24, 26, .06);
}
/*
* Zdjecia kadry sa niemal kwadratowe i pokazuja cala sylwetke, wiec
* kadrujemy je na twarz — tak samo, jak w panelu urodzinowym kalendarza.
*/
.ztab__foto img {
position: absolute;
max-width: none;
width: 250%;
height: auto;
left: -73%;
top: -1%;
display: block;
}
.ztab__dane { min-width: 0; }
/* ---------- 57. Bilety i gadzety w stylu kart promocyjnych ---------- */
/*
* Te dwie karty byly jasne i wygladaly jak obcy wtret pod ciemnym rzedem
* "Wspieraj Wisloke". Dostaja ten sam material: fotografia z ciemna
* przeslona, biale pismo, ta sama krzywizna i cien. Zostaja po dwie
* w rzedzie, wiec kazda zajmuje polowe szerokosci.
*/
.tg { gap: 18px; }
.tg__item {
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 12px;
min-height: 190px;
padding: 26px 28px;
color: #fff;
background: var(--green-darker) url("../assets/hero-bg-fans.jpg") center/cover no-repeat;
box-shadow: var(--shadow);
display: flex;
align-items: center;
gap: 22px;
}
.tg__item::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(150deg,
rgba(8, 40, 22, .84) 0%,
rgba(6, 26, 14, .72) 55%,
rgba(6, 26, 14, .88) 100%);
}
.tg__item > * { position: relative; z-index: 1; }
/* miniatura na jasnym kaflu — bilety i koszulka sa fotografowane na bielo */
.tg__thumb {
flex: 0 0 auto;
width: 104px;
height: 104px;
border-radius: 10px;
background: rgba(255, 255, 255, .92);
display: grid;
place-items: center;
}
.tg__body h3 { color: #fff; }
.tg__body p { color: var(--muted-jasny); }
@media (max-width: 760px) {
.tg { grid-template-columns: 1fr; }
.tg__item { min-height: 0; padding: 20px; gap: 16px; }
.tg__thumb { width: 76px; height: 76px; }
}
/* ---------- 58. Jeden rytm pionowy sekcji na telefonie ---------- */
/*
* Odstepy pochodzily z prototypu i byly przypadkowe: 0, 15, 26, 34, 52,
* 60 px od gory i podobnie od dolu. Jedne sekcje sie zlepialy, inne
* dzielila przepasc. Na waskim ekranie sprowadzamy je do jednej wartosci,
* liczonej od zmiennej — zmiana rytmu to jedna liczba, nie osiem regul.
*
* Hero i pasek meczowy zostaja nietkniete: pierwsze ma wlasna kompozycje,
* drugi jest celowo ciasny, bo to belka, nie sekcja tresci.
*/
@media (max-width: 760px) {
:root { --rytm: 26px; }
/*
* Sekcje HERO sa wylaczone z rytmu.
*
* Naglowek jest przyklejony i przezroczysty, wiec kazde hero musi
* zaczynac tresc PONIZEJ niego (calc(var(--hh) + ...)). Wspolna wartosc
* 26px kasowala ten zapas i okruszki wchodzily pod logo — dlatego
* wyliczamy je z listy wyjatkow, a nie dopisujemy im pozniej wyjatku.
*/
.site-main > section:not(.hero):not(.mpasek):not([class*="-hero"]),
.site-main > div > section:not(.hero):not(.mpasek):not([class*="-hero"]) {
padding-top: var(--rytm);
padding-bottom: var(--rytm);
}
/*
* Pasek social styka sie DOLEM z sekcja kadry, ktora ma wlasne ciemne tlo
* i kreske na gorze — odstep pod ikonami zostawialby miedzy nimi pas
* zieleni. Gora zostaje, bo nad paskiem jest jasny kalendarz.
*
* Selektor powtarza WSZYSTKIE wykluczenia z reguly rytmu. Kazde „:not()”
* liczy sie do szczegolowosci, wiec krotszy zapis przegrywal i nie robil
* nic — tak bylo przez caly czas z samym „.social”.
*/
.site-main > section.social:not(.hero):not(.mpasek):not([class*="-hero"]),
.site-main > div > section.social:not(.hero):not(.mpasek):not([class*="-hero"]) {
padding-bottom: 0;
}
/* naglowki sekcji siedzialy zbyt blisko gornej krawedzi */
.site-main > section > .wrap > .section-label:first-child,
.site-main > section > .wrap > h2:first-child { margin-top: 0; }
}
/* ---------- 59. Wizualizator: pakiet, szablon QR ---------- */
.wiz__pakiet { margin: 0 0 12px; }
.wiz__pakiet label {
display: block;
margin-bottom: 5px;
font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-etykieta); letter-spacing: .12em; text-transform: uppercase;
color: var(--muted);
}
.wiz__pakiet select {
width: 100%;
padding: 9px 10px;
border: 1px solid var(--line-dark);
border-radius: 6px;
background: #fff;
font: inherit;
font-size: var(--fs-drobny);
}
/*
* Nosnik spoza pakietu zostaje na liscie, tylko na czerwono.
* Ukrycie go byloby wygodniejsze technicznie, ale to wlasnie widok tego,
* czego firma NIE dostaje, jest argumentem za wyzszym pakietem.
*/
.wiz__pl.is-poza {
border-color: #b4483f;
color: #b4483f;
background: rgba(180, 72, 63, .06);
}
.wiz__pl.is-poza::after { content: " ✕"; font-weight: 700; }
.wiz__pl.is-doplata { border-color: #c8a63a; color: #7a6318; }
.wiz__pl.is-doplata::after { content: " +"; font-weight: 700; }
.wiz__brak {
margin: 8px 0 14px;
padding: 9px 12px;
border-radius: 6px;
background: rgba(180, 72, 63, .10);
color: #8e332c;
font-size: var(--fs-drobny);
line-height: 1.35;
}
.wiz__brak--doplata { background: rgba(200, 166, 58, .14); color: #6b5714; }
.wiz__szablon { margin: 14px 0; padding-top: 14px; border-top: 1px solid var(--line-dark); }
.wiz__przelacznik {
display: flex; align-items: center; gap: 8px;
font-size: var(--fs-drobny); font-weight: 600;
cursor: pointer;
}
.wiz__przelacznik input { width: 16px; height: 16px; accent-color: var(--green); }
/* display:grid bije atrybut hidden — stad jawna regula, inaczej pola
pokazywalyby sie mimo odznaczonego przelacznika */
.wiz__qrpola { display: grid; gap: 8px; margin-top: 10px; }
.wiz__qrpola[hidden] { display: none; }
.wiz__qrpola input {
width: 100%;
padding: 9px 10px;
border: 1px solid var(--line-dark);
border-radius: 6px;
font: inherit;
font-size: var(--fs-drobny);
}
/* informacja o wybranym pakiecie w konfiguratorze — wybor jest na kaflach wyzej */
.wiz__pakiet-info {
margin: 0 0 12px;
padding: 8px 11px;
border-radius: 6px;
background: rgba(23, 128, 58, .10);
color: var(--green-tekst);
font-size: var(--fs-drobny);
font-weight: 700;
}
/* sekcja z tabela swiadczen stoi pod konfiguratorem — bez powtorzonego odstepu u gory */
.pkg--tabela { padding-top: 0; }
/* ---------- 60. Podstrony z krotka trescia ---------- */
/*
* Kilka podstron czeka jeszcze na tresc (fotogalerie, WisłokaTV, wywiady).
* Bez tego stopka wjezdzala tuz pod hero i strona wygladala na zepsuta,
* a nie na pusta. Minimalna wysokosc daje jej normalne proporcje.
*/
.history-page { min-height: 38vh; }
/*
* Bez zaslepki tekstowej — pusta strona ma po prostu zachowac proporcje.
* (Zasada z reszty serwisu: nie obiecujemy "tresc zostanie uzupelniona".)
*/
/* wybor miejsc, w ktorych ma sie pojawic szablon z kodem QR */
.wiz__gdzie {
margin: 4px 0 0;
padding: 10px 12px;
border: 1px solid var(--line-dark);
border-radius: 6px;
}
.wiz__gdzie legend {
padding: 0 6px;
font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-etykieta); letter-spacing: .1em; text-transform: uppercase;
color: var(--muted);
}
.wiz__gdzie-poz {
display: flex; align-items: center; gap: 8px;
padding: 4px 0;
font-size: var(--fs-drobny);
cursor: pointer;
}
.wiz__gdzie-poz input { width: 15px; height: 15px; accent-color: var(--green); flex: 0 0 auto; }
/* ---------- 61. Menu pelnoekranowe: klikalne dzialy, czytelny odstep ---------- */
/*
* Nazwa dzialu prowadzi do jego strony, przycisk "+" rozwija podpozycje.
* To dwa osobne cele w jednym rzedzie — dlatego rzad jest kontenerem,
* a nie samym przyciskiem jak wczesniej.
*/
.menu-group-rzad {
display: flex;
align-items: baseline;
gap: 14px;
padding: 2px 0;
}
.menu-group-rzad .menu-group {
opacity: .55;
text-decoration: none;
/*
* Interlinia z zapasem na polskie znaki. Przy 1.05 ogonki i kropki
* (DRUŻYNA, SZKÓŁKA) wchodzily na wiersz nizej.
*/
line-height: 1.12;
}
.menu-group-rzad.is-active .menu-group,
.menu-group-rzad .menu-group:hover { opacity: 1; color: var(--green-dark); }
.menu-group-rzad .menu-group__plus {
flex: 0 0 auto;
width: 30px; height: 30px;
display: grid; place-items: center;
border: 1px solid var(--line-dark);
border-radius: 50%;
background: none;
color: var(--muted);
font-size: 17px; line-height: 1;
cursor: pointer;
transition: transform .25s var(--ease), border-color .18s ease, color .18s ease;
}
.menu-group-rzad .menu-group__plus:hover { border-color: var(--green); color: var(--green); }
.menu-group-rzad.is-active .menu-group__plus { transform: rotate(45deg); border-color: var(--green); color: var(--green); }
/*
* Na waskim ekranie nazwy dzialow nie moga wychodzic poza kadr —
* "WISŁOKA DĘBICA" bylo ucinane w polowie.
*/
@media (max-width: 600px) {
.menu-group-rzad .menu-group { font-size: clamp(22px, 7.4vw, 34px); }
.menu-group-rzad { gap: 10px; }
.menu-group-rzad .menu-group__plus { width: 26px; height: 26px; font-size: 15px; }
}
/* ---------- 62. Konfigurator: niezalezne warstwy ---------- */
/*
* Logo, kod QR i napis sa osobnymi elementami, kazdy przeciagany
* i skalowany z osobna. Wczesniej byly jednym sklejonym obrazem
* z kanwy, wiec nie dalo sie ruszyc samego kodu ani napisu.
*/
.wiz__warstwa {
position: absolute;
max-width: none;
cursor: grab;
touch-action: none;
user-select: none;
}
.wiz__warstwa.dragging { cursor: grabbing; }
.wiz__warstwa[hidden] { display: none !important; }
.wiz__logo, .wiz__qr { height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
/* kod QR na bialym podkladzie — inaczej ciemne tlo nosnika zjada modul */
.wiz__qr { background: #fff; border-radius: 3px; }
.wiz__napis {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 6px 10px;
border-radius: 4px;
text-align: center;
line-height: 1.15;
box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.wiz__napis b {
font-family: var(--font-display); font-weight: 800;
font-size: 1.6cqw; letter-spacing: .06em;
}
.wiz__napis span { font-size: 1.1cqw; }
/* jednostki cqw licza sie od sceny, nie od okna */
.wiz__stage { container-type: inline-size; }
.wiz__hint2 {
margin: 8px 0 0;
font-size: var(--fs-etykieta);
color: var(--muted);
font-style: italic;
}
/* ---------- 63. Tasma sponsorow nad stopka ---------- */
/*
* Pelna szerokosc okna, bez kontenera i bez zaokraglen — pas ma isc
* od krawedzi do krawedzi, jak belka sponsorska w telewizji.
* Biale tlo z tego samego powodu co w hero: logotypy sa projektowane
* pod jasne podloze i na ciemnym gina.
*/
.hero-tasma--stopka {
margin: 0;
width: 100%;
height: 62px;
border: 0;
border-radius: 0;
background: #fff;
}
.hero-tasma--stopka .hero-tasma__okno { height: 100%; }
.hero-tasma--stopka .hero-tasma__jazda { gap: 46px; padding-left: 46px; }
.hero-tasma--stopka .ht img { height: calc(37px * var(--ht-s, 1)); max-width: 235px; }
@media (max-width: 1040px) {
/* w hero taśma znika na waskim ekranie, ale nad stopka ma zostac */
.hero-tasma--stopka { display: flex; height: 54px; }
.hero-tasma--stopka .ht img { height: calc(30px * var(--ht-s, 1)); max-width: 185px; }
}
/* ---------- 64. Sportowa Stodola: wynajem ---------- */
.stod { padding: 30px 0 44px; }
.stod__wstep { max-width: 62ch; margin-bottom: 22px; }
.stod__wstep p { color: var(--muted); }
.stod__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 30px;
align-items: start;
}
.stod__legenda {
display: flex; flex-wrap: wrap; gap: 16px;
margin-bottom: 14px;
font-size: var(--fs-drobny); color: var(--muted);
}
.stod__legenda span { display: inline-flex; align-items: center; gap: 7px; }
.stod__kropka { width: 11px; height: 11px; border-radius: 3px; display: block; }
.stod__kropka--wolne { background: var(--green); }
.stod__kropka--zajete { background: #b4483f; }
.stod__kropka--minione { background: rgba(20, 24, 26, .18); }
.stod__miesiace {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 22px;
}
.stod__mies-nazwa {
margin: 0 0 10px;
font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-drobny); letter-spacing: .1em; text-transform: uppercase;
color: var(--muted);
}
.stod__siatka { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.stod__naglowek {
text-align: center;
font-size: var(--fs-etykieta);
color: var(--muted);
padding-bottom: 4px;
}
.stod__dzien {
display: grid; place-items: center;
aspect-ratio: 1;
border-radius: 5px;
font-size: var(--fs-drobny);
font-weight: 600;
}
/*
* Stan czytamy KOLOREM I TLEM naraz — sam kolor cyfry bylby nieczytelny
* dla osob nierozrozniajacych barw, a legenda stoi nad kalendarzem.
*/
.stod__dzien--wolne { background: rgba(23, 128, 58, .12); color: var(--green-tekst); }
.stod__dzien--zajete { background: rgba(180, 72, 63, .14); color: #8e332c; text-decoration: line-through; }
.stod__dzien--minione { background: transparent; color: rgba(20, 24, 26, .28); }
.stod__bok { display: grid; gap: 18px; }
.stod__cennik, .stod__kontakt {
padding: 18px;
border: 1px solid var(--line-dark);
border-radius: 8px;
background: #fff;
}
.stod__pod {
margin: 0 0 12px;
font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-etykieta); letter-spacing: .12em; text-transform: uppercase;
color: var(--muted);
}
.stod__cena { display: flex; align-items: baseline; gap: 9px; padding: 5px 0; }
.stod__cena b { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--green-tekst); }
.stod__cena span { font-size: var(--fs-drobny); color: var(--muted); }
.stod__uwaga { margin: 10px 0 0; font-size: var(--fs-etykieta); color: var(--muted); }
.stod__godziny { margin: 0 0 12px; font-size: var(--fs-drobny); color: var(--muted); }
.stod__mail { display: block; margin-top: 10px; font-size: var(--fs-drobny); color: var(--green-tekst); }
.stod__opis { margin-top: 30px; }
@media (max-width: 860px) {
.stod__grid { grid-template-columns: 1fr; }
}
/* ---------- 65. Jeden krój naglowkow sekcji na stronie glownej ---------- */
/*
* Sekcje mialy dwa rozne naglowki: "Kalendarz" w duzym kroju displayowym
* (.kal__tytul), a "Wspieraj Wisloke", "Sponsor glowny", "Sponsorzy"
* i "Partnerzy" w malym, rozstrzelonym .section-label z arkusza prototypu.
* Sprowadzamy wszystkie do wzorca kalendarza — to on wyglada jak naglowek
* sekcji, a nie jak podpis nad blokiem.
*/
.kal__tytul,
.section-label,
.squad__tytul,
.roster__title {
font-family: var(--font-display);
font-weight: 800;
text-transform: uppercase;
font-size: clamp(20px, 2.2vw, 28px);
letter-spacing: .01em;
line-height: 1.1;
color: var(--ink);
text-align: left;
margin: 0 0 16px;
}
/* na ciemnych sekcjach naglowek musi byc jasny */
.squad .section-label,
.squad__tytul,
.teamshot .section-label,
.social .section-label,
.footer .section-label { color: #fff; }
/*
* Podpis nad grupa sponsorow na ich podstronie zostaje maly — tam pelni
* role etykiety grupy, a nie naglowka sekcji.
*/
.sp-group .section-label {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-etykieta);
letter-spacing: .28em;
color: var(--muted);
margin-bottom: 14px;
}
/* ---------- 66. Bilans zawodnika: Wisloka obok calej kariery ---------- */
/*
* Duze liczby w wyroznionym pasie, zamiast jednej linijki drobnym pismem.
* Kolejnosc nieprzypadkowa: najpierw dorobek W WISLOCE — po to kibic klubu
* wchodzi na te strone — a obok cala kariera dla kontekstu.
*/
.zaw-bilans {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin: 4px 0 24px;
}
.zaw-bilans__blok {
padding: 16px 18px;
border: 1px solid var(--line-dark);
border-radius: 8px;
background: #fff;
}
/* nasz klub wyrozniony — to on jest punktem odniesienia */
.zaw-bilans__blok--nasz {
background: var(--green-darker);
border-color: var(--green-darker);
}
.zaw-bilans__tytul {
margin: 0 0 12px;
font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-etykieta); letter-spacing: .12em; text-transform: uppercase;
color: var(--muted);
}
.zaw-bilans__blok--nasz .zaw-bilans__tytul { color: #fff; }
.zaw-bilans__liczby {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
gap: 14px;
}
.zaw-bilans__liczby > div { display: flex; flex-direction: column; gap: 3px; }
.zaw-bilans__liczby .ps__i { width: 18px; height: 18px; }
.zaw-bilans__liczby b {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(26px, 3vw, 38px); line-height: 1;
/* separator tysiecy to spacja — w Oswaldzie rozjezdza liczbe, wiec sciagamy */
word-spacing: -.1em;
color: var(--ink);
}
.zaw-bilans__blok--nasz .zaw-bilans__liczby b { color: #fff; }
.zaw-bilans__liczby span {
font-size: var(--fs-etykieta); letter-spacing: .1em; text-transform: uppercase;
color: var(--muted);
}
.zaw-bilans__blok--nasz .zaw-bilans__liczby span { color: var(--muted-jasny); }
/* ---------- 67. Kadra po prawej na podstronie zawodnika ---------- */
.zaw-glowna { display: grid; gap: 34px; min-width: 0; }
.zaw-kadra {
position: sticky; top: calc(var(--hh, 72px) + 14px);
border: 1px solid var(--line-dark); border-radius: 8px;
background: #fff; padding: 16px;
}
.zaw-kadra .zaw-h2 { margin-top: 0; }
.zaw-kadra__grupa { border-top: 1px solid var(--line-dark); }
.zaw-kadra__grupa:first-of-type { border-top: 0; }
.zaw-kadra__grupa > summary {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 11px 2px; cursor: pointer; list-style: none;
font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-drobny); letter-spacing: .1em; text-transform: uppercase;
color: var(--ink);
}
.zaw-kadra__grupa > summary::-webkit-details-marker { display: none; }
.zaw-kadra__grupa > summary span {
font-size: var(--fs-etykieta); color: var(--muted); letter-spacing: .04em;
}
/* strzalka zamiast domyslnego trojkata — obraca sie po rozwinieciu */
.zaw-kadra__grupa > summary::after {
content: ''; width: 7px; height: 7px; margin-left: auto;
border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
transform: rotate(45deg); transition: transform .18s ease;
}
.zaw-kadra__grupa[open] > summary::after { transform: rotate(-135deg); }
.zaw-kadra ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 2px; }
.zaw-kadra__kto {
display: flex; align-items: center; gap: 10px;
padding: 5px 6px; border-radius: 6px;
color: var(--ink); text-decoration: none; font-size: var(--fs-drobny);
}
a.zaw-kadra__kto:hover { background: var(--paper); color: var(--green-tekst); }
.zaw-kadra li.is-now .zaw-kadra__kto { background: var(--green-darker); color: #fff; }
/* miniatura zamiast samej liczby — twarz rozpoznaje sie szybciej niz numer */
.zaw-kadra__foto {
width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
object-fit: cover; object-position: top center; background: var(--paper);
}
.zaw-kadra__foto--brak { border: 1px dashed var(--line-dark); }
.zaw-kadra__nr {
min-width: 22px; text-align: center;
font-family: var(--font-display); font-weight: 700; color: var(--muted);
}
.zaw-kadra li.is-now .zaw-kadra__nr { color: #fff; }
.zaw-kadra__imie { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zaw-kadra__all {
display: block; margin-top: 6px; padding-top: 12px;
border-top: 1px solid var(--line-dark);
font-size: var(--fs-drobny); font-weight: 700;
color: var(--green-tekst); text-decoration: none;
}
.zaw-kadra__all:hover { text-decoration: underline; }
/* ikony w naglowku tabeli kariery — te same co w statystykach sezonu */
/* .ps__i zyje normalnie w flexie; w komorce tabeli musi dostac display sam */
.zaw-tab thead .ps__i { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; }
.zaw-tab thead .ps__i--gol, .zaw-tab thead .ps__i--asysta { filter: brightness(0) invert(1); }
/*
* Ikony "mecz" i "min" sa biale (robione pod ciemne tlo), wiec w jasnym
* kaflu bilansu przyciemniamy je, zamiast dokladac drugi komplet plikow.
*/
.zaw-bilans__blok:not(.zaw-bilans__blok--nasz) .ps__i--mecz,
.zaw-bilans__blok:not(.zaw-bilans__blok--nasz) .ps__i--min { filter: brightness(0) opacity(.7); }
/*
* Podpis dla czytnikow ekranu. Musi miec swojego rodzica jako punkt
* odniesienia — bez tego wychodzil poza przewijana ramke tabeli i sam
* rozciagal strone do 446 px na kazdym telefonie.
*/
.zaw-tab th { position: relative; }
.zaw-tab__sr {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.zaw-tab tfoot td {
border-top: 2px solid var(--green-darker);
font-weight: 800; font-family: var(--font-display); color: var(--ink);
padding-top: 10px;
}
@media (max-width: 900px) {
.zaw-kadra { position: static; }
}
/* tabela kariery ma 6 kolumn — na telefonie przewijamy ja, a nie cala strone */
.zaw-tab__box { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.zaw-tab__box .zaw-tab { min-width: 440px; }
/* ---------- 68. Okruszki — jedno miejsce na kazdej podstronie ---------- */
/*
* Sciezka stoi zawsze jako pierwszy element hero: po lewej, tuz pod menu.
* Wczesniej kazdy szablon mial ja gdzie indziej (u sponsora obok logotypu,
* u zawodnika w kolumnie z danymi — na telefonie pod zdjeciem).
*/
.okruszki { position: relative; z-index: 2; margin-bottom: 14px; }
.okruszki__lista {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
font-size: var(--fs-etykieta); letter-spacing: .14em; text-transform: uppercase;
color: var(--muted-jasny);
}
.okruszki__lista li { display: flex; align-items: center; gap: 8px; }
.okruszki__lista li + li::before { content: '›'; opacity: .6; }
.okruszki__lista a { color: inherit; text-decoration: none; }
.okruszki__lista a:hover { color: #c9f0d5; text-decoration: underline; }
.okruszki__lista [aria-current] { color: #fff; }
/* Odstep hero ustala jedna regula wyzej (--hh + 40px) — tu byla druga,
z 14 px, ktora ja nadpisywala i okruszki lezaly tuz pod menu. */
.subpage-hero .okruszki__lista { text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
/* w hero zawodnika i sponsora okruszki wyszly ponad siatke — kasujemy
podwojny zapas, ktory dawal im wlasny .wrap */
.zaw-hero > .okruszki, .spon-hero > .okruszki, .mecz-hero > .okruszki { margin-bottom: 10px; }
/* ---------- 69. Kalendarz: mecz u siebie kontra wyjazd ---------- */
/*
* Stadion = gramy u siebie, autokar na zolto = wyjazd. Wczesniej obie
* sytuacje mialy te sama zielona pilke i z paska nie dalo sie odczytac,
* czy warto planowac wyjscie na mecz.
*/
.kal__ikona--dom {
background-image: url("data:image/svg+xml;utf8,");
}
.kal__ikona--wyjazd {
background-image: url("data:image/svg+xml;utf8,");
}
/* dzien wyjazdowy dostaje zolta podkreslke, zeby bylo widac go z daleka */
.kd--wyjazd:not(.kd--dom) { box-shadow: inset 0 -2px 0 #d99a1a; }
.kd--dzis.kd--wyjazd:not(.kd--dom) { box-shadow: inset 0 -2px 0 var(--green); }
.kd--wyjazd:not(.kd--dom):hover { background: rgba(217,154,26,.12); }
.kp__wyj { font-weight: 700; color: #a06000; }
/* Naglowki grup sponsorow na stronie glownej ida na srodek — same siatki
logotypow tez sa wysrodkowane, wiec podpis z lewej wisial krzywo. */
.sponsors .section-label { text-align: center; }
/* ---------- 70. Sportowa Stodola: oferta, galeria, nawigacja kalendarza ---------- */
.stod__lead { font-size: 17px; color: var(--ink); }
/* wyposazenie obiektu — cztery konkrety zamiast akapitu do przeczytania */
.stod__wypos {
list-style: none; margin: 0 0 26px; padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px;
}
.stod__wypos li {
display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto;
column-gap: 12px; align-items: center; align-content: center;
padding: 14px 16px; border: 1px solid var(--line-dark); border-radius: 8px; background: #fff;
}
.stod__wypos b { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.stod__wypos span { grid-column: 2; font-size: var(--fs-drobny); color: var(--muted); }
.stod__ikona {
grid-row: 1 / 3; width: 30px; height: 30px;
background: center/contain no-repeat;
}
.stod__ikona--grill { background-image: url("data:image/svg+xml;utf8,"); }
.stod__ikona--dj { background-image: url("data:image/svg+xml;utf8,"); }
.stod__ikona--ogien { background-image: url("data:image/svg+xml;utf8,"); }
.stod__ikona--boisko { background-image: url("data:image/svg+xml;utf8,"); }
/* pasek nad kalendarzem: nawigacja po kwartalach + legenda */
.stod__pasek {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 14px;
}
.stod__nawigacja { display: flex; align-items: center; gap: 10px; }
.stod__zakres {
font-family: var(--font-display); font-weight: 700; font-size: 15px;
letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
min-width: 20ch; text-align: center;
}
.stod__nawigacja .kal__strzalka[disabled] { opacity: .3; cursor: default; }
.stod__imprezy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.stod__imprezy li {
position: relative; padding-left: 18px; font-size: var(--fs-drobny); color: var(--muted);
}
.stod__imprezy li::before {
content: ''; position: absolute; left: 0; top: .55em;
width: 7px; height: 7px; border-radius: 2px; background: var(--green);
}
@media (max-width: 640px) {
.stod__zakres { min-width: 0; font-size: 13px; }
}
/* ---------- 71. Aktualnosci: plakaty z social mediow bez obcinania ---------- */
/*
* Kafel jest poziomy, a wiekszosc grafik klubowych to kwadraty i pionowe
* plakaty meczowe. Kadrowanie "cover" scinalo im gore i dol — razem z
* napisem "PARK ARENA!" i glowami zawodnikow. Plakat pokazujemy w calosci,
* a puste boki wypelnia rozmyte powiekszenie tego samego zdjecia, wiec
* kafel dalej ma jednakowy ksztalt i nie robi sie dziura w siatce.
*/
.news-card__img.is-plakat,
.news-featured__img.is-plakat { position: relative; isolation: isolate; }
.news-card__img.is-plakat::before,
.news-featured__img.is-plakat::before {
content: ''; position: absolute; inset: 0; z-index: -1;
background: var(--tlo) center/cover no-repeat;
filter: blur(26px) saturate(1.3) brightness(.62);
transform: scale(1.25);
}
.news-card__img.is-plakat img,
.news-featured__img.is-plakat img {
object-fit: contain;
width: 100%; height: 100%;
}
/* wyzszy kafel dla plakatow — pionowa grafika w proporcji 4:3 zostawala
waskim paskiem posrodku */
.news-card__img.is-plakat { aspect-ratio: 1 / 1; }
/* zadnego powiekszania po najechaniu — takze na plakacie */
.news-card:hover .news-card__img img { transform: none; }
/* herby druzyn w dymku kalendarza */
/*
* Wiersz meczu w dymku kalendarza.
*
* Herb i nazwa trzymaja sie razem (.kp__ekipa), a lamanie moze nastapic
* tylko MIEDZY druzynami — wczesniej dluga nazwa („AKS 1947 Busko Zdrój”)
* odrywala sie od swojego herbu, a mysnik przyklejal sie do sasiada.
*/
.kp__pary { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.kp__ekipa { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.kp__ekipa > span { font-size: 14px; line-height: 1.25; }
.kp__vs { font-style: normal; color: var(--muted); margin: 0 4px; flex: 0 0 auto; }
.kp__herb {
width: 22px; height: 22px; flex: 0 0 auto;
display: inline-grid; place-items: center;
}
.kp__herb img { max-width: 100%; max-height: 100%; object-fit: contain; }
/*
* Zastepnik dla klubu bez herbu: kolko z inicjalami, nie szary prostokat.
* Ma wygladac jak brakujacy herb, a nie jak bledny obrazek.
*/
.kp__herb--mono {
border-radius: 50%;
background: rgba(20, 24, 26, .07);
color: var(--muted);
font-family: var(--font-display); font-weight: 700;
font-size: 9px; letter-spacing: .02em;
}
/* ---------- 72. Odliczanie w kartotece meczu ---------- */
/*
* Ten sam licznik co w pasku na stronie glownej, ale wysrodkowany pod
* tablica wyniku. Do meczu, ktory sie odbyl, nie renderujemy go w ogole.
*/
.mecz-odl { margin: 22px 0 4px; text-align: center; }
.mecz-odl__label {
display: block; margin-bottom: 10px;
font-family: var(--font-display); font-weight: 600;
font-size: var(--fs-etykieta); letter-spacing: .16em; text-transform: uppercase;
color: var(--muted-jasny);
}
.mecz-odl .odl { justify-content: center; }
.mecz-odl .odl b { font-size: clamp(26px, 3.4vw, 44px); }
/* ---------- 73. Jeden kontener tresci na wszystkich podstronach ---------- */
/*
* Do tej pory tresc z edytora miala wlasne szerokosci: 760 px domyslnie,
* 820 px na historii klubu, do tego stary szkielet Foundation w niektorych
* podstronach dokladal swoje wciecia (.row / .columns / .medium-centered).
* Sekcje budowane w PHP szly tymczasem na pelna szerokosc .wrap.
* Efekt: kazda podstrona miala inny kontener.
*
* Jeden kontener na calym serwisie: tresc wypelnia .wrap dokladnie tak samo
* jak naglowek, okruszki i sekcje. Sam TEKST trzymamy w czytelnej mierze,
* bo wiersz na 1450 px byloby nie do przeczytania — ale krawedz kontenera
* i punkt startu tresci sa wszedzie te same.
*/
.page-body,
.history-club .page-body,
.single-post .page-body {
max-width: none;
margin-inline: 0;
}
.page-body p,
.page-body li { font-size: 17px; }
/* akapity i listy w mierze, ktora sie czyta — reszta bloku pelna szerokosc */
.page-body > p,
.page-body > ul,
.page-body > ol,
.page-body > blockquote { max-width: 78ch; }
.page-body > table { width: 100%; }
/*
* Stary szkielet Foundation w tresci z edytora.
*
* .row zwezal sie do wlasnej szerokosci, a .medium-centered / .large-centered
* dokladaly automatyczne marginesy — przez to tresc zaczynala sie kilkaset
* pikseli od lewej krawedzi kontenera. Zamieniamy siatke na flexa: kolumny
* dalej stoja obok siebie, ale caly blok trzyma sie krawedzi .wrap.
*/
.page-body .row {
display: flex; flex-wrap: wrap; gap: 22px;
width: auto; max-width: none; margin-inline: 0;
}
.page-body .columns {
float: none; width: auto; max-width: none;
padding-inline: 0; flex: 1 1 240px; min-width: 0;
}
/* wrappery centrujace calą sekcję maja zajmowac caly wiersz, nie polowe */
.page-body [class*="-centered"] { margin-inline: 0; flex: 1 1 100%; }
.page-body .row.collapse { gap: 22px; }
/* sztab w kolumnie bocznej: nazwisko i rola pod nim */
.zaw-kadra__osoba { display: grid; min-width: 0; }
.zaw-kadra__osoba b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zaw-kadra__osoba span { font-size: var(--fs-etykieta); color: var(--muted); }
.zaw-kadra li.is-now .zaw-kadra__osoba span { color: rgba(255, 255, 255, .8); }
/* sztab bez opisu: sama kolumna z listą, wyśrodkowana i szersza */
.zaw-tresc__grid--sam-bok { grid-template-columns: minmax(0, 420px); justify-content: center; }
/* ---------- 74. WisłokaTV ---------- */
.wtv { background: var(--paper); padding: 34px 0 52px; }
.wtv__glowny {
display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: 24px; align-items: center; margin-bottom: 30px;
}
/*
* Miniatura z przyciskiem zamiast osadzonej ramki — kilkanascie
* odtwarzaczy YouTube na raz spowolniloby strone i zostawilo ciasteczka
* komus, kto zadnego filmu nie wlaczyl.
*/
.wtv__player {
position: relative; aspect-ratio: 16 / 9; overflow: hidden;
border-radius: 8px; background: var(--green-darker);
}
.wtv__player img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wtv__player iframe { width: 100%; height: 100%; border: 0; display: block; }
.wtv__play {
position: absolute; inset: 0; width: 100%; height: 100%;
border: 0; background: rgba(7, 30, 16, .28); cursor: pointer;
display: grid; place-items: center;
transition: background .2s ease;
}
.wtv__play::after {
content: ''; width: 62px; height: 62px; border-radius: 50%;
background: var(--green) url("data:image/svg+xml;utf8,") center/26px no-repeat;
box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.wtv__play:hover { background: rgba(7, 30, 16, .12); }
.wtv__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.wtv__player--maly .wtv__play::after { width: 46px; height: 46px; background-size: 20px; }
.wtv__etykieta {
margin: 0 0 6px; font-family: var(--font-display); font-weight: 600;
font-size: var(--fs-etykieta); letter-spacing: .16em; text-transform: uppercase;
color: var(--green-tekst);
}
.wtv__opis h3 {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(19px, 2vw, 26px); line-height: 1.15; margin: 0 0 8px; color: var(--ink);
}
.wtv__data { margin: 0; font-size: var(--fs-drobny); color: var(--muted); }
.wtv__kanal {
display: inline-block; margin-top: 14px; font-weight: 700;
color: var(--green-tekst); text-decoration: none;
}
.wtv__kanal:hover { text-decoration: underline; }
.wtv__filtry { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.wtv__filtr {
border: 1px solid var(--line-dark); background: #fff; color: var(--ink);
border-radius: 999px; padding: 7px 15px; cursor: pointer;
font-family: var(--font-display); font-weight: 600;
font-size: var(--fs-drobny); letter-spacing: .04em; text-transform: uppercase;
}
.wtv__filtr span { color: var(--muted); margin-left: 4px; }
.wtv__filtr.is-active { background: var(--green-darker); border-color: var(--green-darker); color: #fff; }
/* Licznik przy aktywnym filtrze siedzi na ciemnym pasku — biel. */
.wtv__filtr.is-active span { color: rgba(255, 255, 255, .8); }
.wtv__siatka {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px;
}
.wtv__karta h3 {
font-family: var(--font-display); font-weight: 600; font-size: 15px;
line-height: 1.25; margin: 10px 0 4px; color: var(--ink);
display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
-webkit-box-orient: vertical; overflow: hidden;
}
.wtv__karta[hidden] { display: none; }
@media (max-width: 820px) {
.wtv__glowny { grid-template-columns: 1fr; }
}
/* ---------- 75. Wywiady ---------- */
.wyw { background: var(--paper); padding: 34px 0 52px; }
.wyw__wstep { max-width: 62ch; color: var(--muted); margin: 0 0 26px; }
.wyw__siatka {
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;
}
.wyw__foto { display: block; border-radius: 8px; overflow: hidden; background: var(--green-darker); }
.wyw__foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.wyw__typ {
margin: 10px 0 4px; font-family: var(--font-display); font-weight: 600;
font-size: var(--fs-etykieta); letter-spacing: .12em; text-transform: uppercase;
color: var(--green-tekst);
}
.wyw__karta--tekst .wyw__typ { color: var(--muted); }
.wyw__karta h3 {
font-family: var(--font-display); font-weight: 700; font-size: 17px;
line-height: 1.2; margin: 0 0 6px; color: var(--ink);
}
.wyw__karta h3 a { color: inherit; text-decoration: none; }
.wyw__karta h3 a:hover { color: var(--green-tekst); text-decoration: underline; }
.wyw__lead { margin: 0; font-size: var(--fs-drobny); color: var(--muted); line-height: 1.55; }
/* ---------- 76. Informacje o klubie ---------- */
.oklub { background: var(--paper); padding: 34px 0 56px; }
.oklub .kal__tytul { margin-top: 46px; }
/*
* Wizytowka: herb, nazwa i adres w jednym bloku, obok liczby.
* To po nie ludzie tu wchodza — wczesniej adres byl trzecim akapitem
* w kolumnie tekstu, a telefon lezal w osobnej kratce siatki Foundation.
*/
.oklub__wizytowka {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center; gap: 28px;
padding: 26px 30px;
background: var(--green-darker); color: #fff;
border-radius: 10px;
}
.oklub__herb .herb { display: block; }
.oklub__herb img { display: block; }
.oklub__od {
margin: 0 0 4px; font-family: var(--font-display); font-weight: 600;
font-size: var(--fs-etykieta); letter-spacing: .18em; text-transform: uppercase;
color: #fff;
}
.oklub__dane h2 {
font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(22px, 2.6vw, 34px); line-height: 1.05; margin: 0 0 10px; color: #fff;
}
.oklub__adres { margin: 0 0 8px; color: var(--muted-jasny); font-size: 17px; }
.oklub__tel {
font-family: var(--font-display); font-weight: 700; font-size: 20px;
color: #fff; text-decoration: none; border-bottom: 2px solid var(--leaf);
}
.oklub__tel:hover { color: var(--leaf); }
.oklub__liczby { display: flex; gap: 30px; margin: 0; }
.oklub__liczby div { text-align: center; }
.oklub__liczby dt {
font-size: var(--fs-etykieta); letter-spacing: .12em; text-transform: uppercase;
color: var(--muted-jasny); margin-bottom: 5px;
}
.oklub__liczby dd {
margin: 0; font-family: var(--font-display); font-weight: 800;
font-size: clamp(26px, 3vw, 38px); line-height: 1; color: #fff;
font-variant-numeric: tabular-nums;
}
.oklub__pasek {
display: flex; flex-wrap: wrap; gap: 0;
margin-top: 14px; border: 1px solid var(--line-dark); border-radius: 8px;
background: #fff; overflow: hidden;
}
.oklub__pasek span {
flex: 1 1 200px; padding: 14px 18px; font-size: 15px; color: var(--ink);
border-left: 1px solid var(--line-dark);
}
.oklub__pasek span:first-child { border-left: 0; }
.oklub__pasek b {
display: block; font-family: var(--font-display); font-weight: 600;
font-size: var(--fs-etykieta); letter-spacing: .12em; text-transform: uppercase;
color: var(--muted); margin-bottom: 3px;
}
/* ---- kontakt ---- */
.oklub__kontakty {
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px;
}
.oklub__kontakt {
padding: 18px 20px; background: #fff;
border: 1px solid var(--line-dark); border-radius: 8px;
border-top: 3px solid var(--green);
}
.oklub__dzial {
margin: 0 0 8px; font-family: var(--font-display); font-weight: 700;
font-size: 16px; color: var(--ink);
}
.oklub__osoba { margin: 0 0 6px; font-size: var(--fs-drobny); color: var(--muted); }
.oklub__mail, .oklub__nr { display: block; color: var(--green-tekst); text-decoration: none; font-weight: 600; }
.oklub__mail { word-break: break-word; }
.oklub__nr { margin-top: 4px; font-family: var(--font-display); font-size: 18px; }
.oklub__mail:hover, .oklub__nr:hover { text-decoration: underline; }
/* ---- sukcesy ---- */
/*
* Oś czasu zamiast rzędu ikonek pucharów: sezon niesie informację,
* puchar był tylko ozdobą powtórzoną cztery razy.
*/
.oklub__sukcesy {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0;
border: 1px solid var(--line-dark); border-radius: 8px; background: #fff; overflow: hidden;
}
.oklub__sukcesy li {
padding: 22px 24px; border-left: 1px solid var(--line-dark);
display: grid; align-content: start; gap: 2px;
}
.oklub__sukcesy li:first-child { border-left: 0; }
.oklub__sezon {
font-family: var(--font-display); font-weight: 600;
font-size: var(--fs-etykieta); letter-spacing: .12em; text-transform: uppercase;
color: var(--green-tekst);
}
.oklub__osiag {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(24px, 2.6vw, 32px); line-height: 1.05; color: var(--ink);
}
.oklub__gdzie { font-weight: 600; color: var(--ink); }
.oklub__opis { margin-top: 6px; font-size: var(--fs-drobny); color: var(--muted); line-height: 1.5; }
/* ---- władze ---- */
.oklub__wladze {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px;
}
.oklub__grupa {
background: #fff; border: 1px solid var(--line-dark); border-radius: 8px; padding: 20px 22px;
}
.oklub__grupa h3 {
margin: 0 0 14px; font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-drobny); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.oklub__grupa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.oklub__grupa li {
display: flex; align-items: center; gap: 12px;
padding: 7px 0; border-top: 1px solid var(--line-soft, rgba(20,24,26,.07));
}
.oklub__grupa li:first-child { border-top: 0; }
.oklub__foto {
width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%;
object-fit: cover; object-position: top center; background: var(--paper);
}
.oklub__foto--brak {
display: grid; place-items: center;
font-family: var(--font-display); font-weight: 700; font-size: 15px;
color: var(--muted); border: 1px dashed var(--line-dark);
}
.oklub__kto { display: grid; min-width: 0; }
.oklub__kto a, .oklub__kto b {
font-family: var(--font-display); font-weight: 600; font-size: 17px;
color: var(--ink); text-decoration: none;
}
.oklub__kto a:hover { color: var(--green-tekst); text-decoration: underline; }
.oklub__kto > span { font-size: var(--fs-drobny); color: var(--muted); }
@media (max-width: 860px) {
.oklub__wizytowka { grid-template-columns: auto minmax(0, 1fr); }
.oklub__liczby { grid-column: 1 / -1; justify-content: space-between; gap: 16px; }
}
@media (max-width: 560px) {
.oklub__wizytowka { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.oklub__sukcesy li { border-left: 0; border-top: 1px solid var(--line-dark); }
.oklub__sukcesy li:first-child { border-top: 0; }
}
/* ---------- 77. Kontakt ---------- */
.kont { background: var(--paper); padding: 34px 0 56px; }
.kont .kal__tytul { margin-top: 44px; }
.kont .kal__tytul:first-child { margin-top: 0; }
.kont__gora {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
gap: 20px; align-items: stretch;
}
.kont__karta--glowna {
background: var(--green-darker); color: #fff;
border-radius: 10px; padding: 26px 30px;
display: flex; flex-direction: column; gap: 4px;
}
.kont__etykieta {
margin: 0 0 6px; font-family: var(--font-display); font-weight: 600;
font-size: var(--fs-etykieta); letter-spacing: .16em; text-transform: uppercase;
color: var(--leaf);
}
.kont__karta--glowna h2 {
font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(20px, 2.2vw, 28px); line-height: 1.08; margin: 0 0 8px; color: #fff;
}
.kont__adres { margin: 0 0 12px; color: var(--muted-jasny); font-size: 17px; }
.kont__karta--glowna .kont__tel {
font-family: var(--font-display); font-weight: 700; font-size: 24px;
color: #fff; text-decoration: none; width: max-content;
border-bottom: 2px solid var(--leaf);
}
.kont__karta--glowna .kont__mail {
margin-top: 10px; color: var(--leaf); text-decoration: none; word-break: break-word;
}
.kont__karta--glowna .kont__mail:hover, .kont__karta--glowna .kont__tel:hover { color: #fff; text-decoration: underline; }
.kont__godziny { margin-top: auto; padding-top: 20px; }
.kont__godziny p {
display: flex; justify-content: space-between; gap: 14px;
margin: 0; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .14);
font-size: var(--fs-drobny); color: var(--muted-jasny);
}
.kont__godziny p:first-of-type { border-top: 0; }
.kont__godziny b { color: #fff; }
/* znacznik danych do podmiany — ma kłuć w oczy, dopóki tam siedzą */
.kont__do-podmiany, .kont__uwaga {
font-family: var(--font-body); font-weight: 700;
font-size: 11px; letter-spacing: .04em; text-transform: none;
color: #7a4a00; background: #ffe9bd; border-radius: 3px; padding: 1px 6px;
}
.kont__mapa { position: relative; border-radius: 10px; overflow: hidden; min-height: 330px; background: var(--green-darker); }
.kont__mapa iframe { width: 100%; height: 100%; min-height: 330px; border: 0; display: block; }
.kont__nawiguj {
position: absolute; right: 12px; bottom: 12px;
background: #fff; color: var(--green-tekst); text-decoration: none;
font-weight: 700; font-size: var(--fs-drobny);
padding: 8px 14px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}
.kont__nawiguj:hover { background: var(--green-darker); color: #fff; }
/* ---- działy ---- */
.kont__dzialy {
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px;
}
.kont__dzial {
background: #fff; border: 1px solid var(--line-dark); border-top: 3px solid var(--green);
border-radius: 8px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px;
}
.kont__dzial.is-przyklad { border-top-color: #d9a63a; }
.kont__dzial h3 {
margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink);
}
.kont__rola { margin: 0 0 4px; font-size: var(--fs-drobny); color: var(--muted); line-height: 1.45; }
.kont__osoba { margin: 0; font-weight: 600; color: var(--ink); }
.kont__dzial a { color: var(--green-tekst); text-decoration: none; font-weight: 600; word-break: break-word; }
.kont__dzial a:hover { text-decoration: underline; }
.kont__dzial .kont__nr { font-family: var(--font-display); font-size: 18px; }
.kont__uwaga { margin: 6px 0 0; width: max-content; }
/* ---- formularz + dane ---- */
.kont__dol {
display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 26px; align-items: start;
}
.kont__form {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
background: #fff; border: 1px solid var(--line-dark); border-radius: 10px; padding: 22px 24px;
}
.kont__form label { display: grid; gap: 5px; }
.kont__form label > span {
font-family: var(--font-display); font-weight: 600;
font-size: var(--fs-drobny); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.kont__form label > span b { color: #b4483f; }
.kont__form input, .kont__form select, .kont__form textarea {
font: inherit; font-size: 16px; color: var(--ink);
border: 1px solid var(--line-dark); border-radius: 5px; padding: 10px 12px;
background: #fff; width: 100%;
}
.kont__form input:focus, .kont__form select:focus, .kont__form textarea:focus {
outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green);
}
.kont__pelna { grid-column: 1 / -1; }
.kont__form textarea { resize: vertical; }
/* pułapka na boty — poza ekranem, ale nie display:none (bot to wykrywa) */
.kont__pulapka {
position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.kont__wyslij { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kont__wyslij p { margin: 0; font-size: var(--fs-drobny); color: var(--muted); }
.kont__ok, .kont__blad {
margin: 0 0 14px; padding: 12px 16px; border-radius: 6px; font-weight: 600;
}
.kont__ok { background: var(--green-darker); color: #fff; }
.kont__blad { background: #fbeceb; color: #8e332c; border: 1px solid #e3bab5; }
.kont__dane dl { margin: 0; display: grid; gap: 0; }
.kont__dane dl > div {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px;
padding: 10px 0; border-top: 1px solid var(--line-dark);
}
.kont__dane dl > div:first-child { border-top: 0; }
.kont__dane dt { font-size: var(--fs-drobny); color: var(--muted); }
.kont__dane dd { margin: 0; font-weight: 600; color: var(--ink); }
.kont__konto dd {
font-family: var(--font-display); font-size: 17px; letter-spacing: .01em;
font-variant-numeric: tabular-nums;
}
.kont__przypis { margin: 14px 0 0; font-size: var(--fs-drobny); color: var(--muted); }
.kont__stopka-uwaga {
margin: 30px 0 0; padding: 14px 18px;
background: #fff8e8; border: 1px solid #edd9a8; border-radius: 6px;
font-size: var(--fs-drobny); color: #6b4a10;
}
@media (max-width: 900px) {
.kont__gora, .kont__dol { grid-template-columns: 1fr; }
.kont__form { grid-template-columns: 1fr; }
}
/* etykieta z plakietka "do potwierdzenia" — bez tego chip wypychal napis */
.kont__godziny .kont__etykieta {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* ---------- 78. Podstrona klubu przeciwnika ---------- */
.klub-hero__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 30px; align-items: center; }
.klub-hero__herb .herb { display: block; }
.klub-hero__herb img { display: block; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .4)); }
.klub-hero__liga {
margin: 0 0 6px; font-family: var(--font-display); font-weight: 600;
font-size: var(--fs-etykieta); letter-spacing: .16em; text-transform: uppercase;
color: var(--leaf);
}
.klub-hero__dane h1 {
font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(28px, 4vw, 52px); line-height: 1; margin: 0 0 16px; color: #fff;
}
.klub-hero__staty { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 16px; }
.klub-hero__staty div { display: grid; gap: 2px; }
.klub-hero__staty b {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(24px, 2.8vw, 34px); line-height: 1; color: #fff;
font-variant-numeric: tabular-nums;
}
.klub-hero__staty span {
font-size: var(--fs-etykieta); letter-spacing: .12em; text-transform: uppercase;
color: var(--muted-jasny);
}
.klub-hero__forma { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.klub-hero__etykieta {
font-size: var(--fs-etykieta); letter-spacing: .14em; text-transform: uppercase;
color: var(--muted-jasny); margin-right: 4px;
}
/* litera zamiast kropki — od razu widac, czy to wygrana czy porazka */
.forma {
width: 28px; height: 28px; border-radius: 5px;
display: inline-grid; place-items: center;
font-family: var(--font-display); font-weight: 800; font-size: 14px; color: #fff;
cursor: help;
}
.forma--w { background: var(--green); }
.forma--r { background: #c8a63a; }
.forma--p { background: #b4483f; }
/* ---- bilans ---- */
.klub-bilans {
background: #fff; border: 1px solid var(--line-dark); border-radius: 10px;
padding: 22px 26px;
}
.klub-bilans__wynik { display: flex; flex-wrap: wrap; gap: 34px; }
.klub-bilans__poz { display: grid; gap: 2px; }
.klub-bilans__poz b {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(30px, 3.4vw, 44px); line-height: 1; color: var(--ink);
font-variant-numeric: tabular-nums;
}
.klub-bilans__poz--w b { color: var(--green-tekst); }
.klub-bilans__poz--r b { color: #8a6f14; }
.klub-bilans__poz--p b { color: #8e332c; }
.klub-bilans__poz span {
font-size: var(--fs-etykieta); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.klub-bilans__opis { margin: 16px 0 0; font-size: var(--fs-drobny); color: var(--muted); }
.klub-mecze { margin-top: 0; }
/* ---- zawodnicy rywala ---- */
.klub-zawodnicy {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}
.klub-zawodnicy__blok {
background: #fff; border: 1px solid var(--line-dark); border-radius: 10px; padding: 20px 22px;
}
.klub-zawodnicy__blok h3 {
margin: 0 0 12px; font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-drobny); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.klub-zawodnicy ol { list-style: none; margin: 0; padding: 0; counter-reset: poz; }
.klub-zawodnicy li {
display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
padding: 9px 0; border-top: 1px solid rgba(20, 24, 26, .07);
counter-increment: poz;
}
.klub-zawodnicy li:first-child { border-top: 0; }
.klub-zawodnicy li > span { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.klub-zawodnicy li > span::before {
content: counter(poz) '.'; color: var(--muted); font-size: var(--fs-drobny);
min-width: 18px; flex: 0 0 auto;
}
.klub-zawodnicy li i { font-style: normal; font-size: var(--fs-etykieta); color: var(--muted); }
.klub-zawodnicy li b {
font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ink);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.klub-zawodnicy li b small { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 3px; }
@media (max-width: 640px) {
.klub-hero__grid { grid-template-columns: 1fr; }
}
/* ---------- 79. Galeria Stodoły + powiększanie ---------- */
.stod__galeria { margin-bottom: 30px; }
/*
* Trzy wyroznione: pierwsze duze, dwa mniejsze obok. Wybor zdjec robi
* redakcja w ustawieniach, wiec uklad nie zalezy od kolejnosci wgrywania.
*/
.stod__glowne {
display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
.stod__glowne > :first-child { grid-row: 1 / 3; }
.stod__foto {
position: relative; display: block; padding: 0; border: 0; cursor: zoom-in;
border-radius: 8px; overflow: hidden; background: var(--green-darker);
}
.stod__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stod__glowne .stod__foto { aspect-ratio: 4 / 3; }
.stod__glowne > :first-child { aspect-ratio: auto; }
.stod__glowne > :first-child img { aspect-ratio: 4 / 3; }
.stod__podpis {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 26px 14px 10px; text-align: left;
font-family: var(--font-display); font-weight: 600; font-size: 14px; color: #fff;
background: linear-gradient(180deg, rgba(7, 30, 16, 0), rgba(7, 30, 16, .82));
}
.stod__foto:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.stod__mini {
display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 8px; margin-top: 10px;
}
.stod__foto--mala { aspect-ratio: 4 / 3; }
.stod__ile {
margin: 10px 0 0; font-size: var(--fs-drobny); color: var(--muted);
}
/* ---- powiększenie ---- */
.lb {
position: fixed; inset: 0; z-index: 200;
background: rgba(6, 16, 10, .93);
display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px;
align-items: center; padding: 20px;
}
.lb[hidden] { display: none; }
.lb__ramka { margin: 0; display: grid; gap: 12px; justify-items: center; min-width: 0; }
.lb__ramka img {
display: block; max-width: 100%; max-height: 78vh;
border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.lb__ramka figcaption {
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; justify-content: center;
color: #fff; font-size: 15px;
}
.lb__ramka figcaption b {
font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-drobny); letter-spacing: .1em; color: var(--leaf);
font-variant-numeric: tabular-nums;
}
.lb__zamknij, .lb__strzalka {
background: rgba(255, 255, 255, .1); border: 0; color: #fff; cursor: pointer;
border-radius: 50%; display: grid; place-items: center;
transition: background .18s ease;
}
.lb__zamknij:hover, .lb__strzalka:hover { background: rgba(255, 255, 255, .24); }
.lb__zamknij:focus-visible, .lb__strzalka:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }
.lb__zamknij {
position: absolute; top: 16px; right: 18px; width: 44px; height: 44px; font-size: 30px; line-height: 1;
}
.lb__strzalka { width: 52px; height: 52px; font-size: 34px; line-height: 1; justify-self: center; }
@media (max-width: 760px) {
.stod__glowne { grid-template-columns: 1fr; grid-template-rows: none; }
.stod__glowne > :first-child { grid-row: auto; }
.lb { grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 12px; }
.lb__strzalka { width: 40px; height: 40px; font-size: 26px; }
}
/* adres obiektu w leadzie — Stodola stoi przy Lisa, nie przy stadionie */
.stod__gdzie b { color: var(--ink); }
/* ---------- 80. Slajd meczowy w hero ---------- */
/*
* Mecz zamiast sylwetki zawodnika: dwa herby po prawej, nazwy druzyn
* jako naglowek. Pierwsze dwa slajdy to zawsze mecze — one zmieniaja sie
* co tydzien i po nie ludzie wchodza na strone.
*/
.torn__title--mecz { font-size: clamp(28px, 4.6cqw, 64px); line-height: 1.02; }
.torn__title--mecz .is-leaf { display: block; }
/* Kazda druzyna w swoim wierszu — zielen dostaje ta nasza, nie ta druga. */
.torn__title--mecz .torn__ekipa { display: block; }
/*
* Wynik w podpisie stoi na KREMOWYM papierze, wiec bialy byl praktycznie
* niewidoczny — „WYNIK 1:0” czytalo sie jako „WYNIK”. Zielen z zapasem
* kontrastu na jasnym tle (7.81:1), a na slajdach ze zdjeciem w tle bieleje
* razem z reszta tekstu.
*/
.slide--mecz .torn__sub b {
font-family: var(--font-display); font-weight: 800; font-size: 1.25em;
color: var(--green-tekst);
}
.is-foto-pelne .torn__sub b { color: #fff; }
.torn__herby {
position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
display: flex; align-items: center; gap: 22px;
z-index: 1; pointer-events: none;
}
.torn__herby .herb img { filter: drop-shadow(0 8px 26px rgba(0, 0, 0, .5)); }
.torn__vs {
font-family: var(--font-display); font-weight: 800; font-size: 30px;
color: var(--muted-jasny); letter-spacing: .04em;
}
@media (max-width: 1040px) {
.torn__herby { gap: 12px; right: 4%; }
.torn__herby .herb { width: 78px !important; height: 78px !important; }
.torn__herby .herb img { width: 78px; height: 78px; }
.torn__vs { font-size: 20px; }
}
@media (max-width: 640px) {
/*
* Herby zostaja w papierowej karcie, w jej prawym dolnym rogu.
* Wczesniej mialy position:static, a poniewaz tresc slajdu jest ulozona
* absolutnie, herby ladowaly na samej gorze slajdu: przykrywal je przycisk,
* a rwana krawedz papieru ucinala im dol.
*/
/* karta dostaje troche wysokosci, tresc idzie od gory, a herby staja
w wolnym pasie na dole — inaczej przycisk wchodzil na pierwszy herb */
.hero__main { --paper-h: 372px; }
.slide--torn .torn__inner {
justify-content: flex-start;
padding-top: 26px;
}
/*
* Herby na SRODKU dolnego pasa, nie w rogu. Przyklejone do prawej krawedzi
* wygladaly jak zapomniana naklejka, a nad nimi zostawal pas pustego papieru.
* Rozciagniete na cala szerokosc karty i powiekszone wypelniaja to miejsce
* i czytaja sie jak tablica „kto z kim”.
*/
.slide--torn .torn__herby {
position: absolute;
top: calc(var(--paper-top) + var(--paper-h) - 108px);
left: 6%; right: 6%;
justify-content: center;
gap: 18px;
transform: none;
margin: 0;
}
.slide--torn .torn__herby .herb { width: 74px !important; height: 74px !important; }
.slide--torn .torn__herby .herb img { width: 74px; height: 74px; }
.slide--torn .torn__vs { font-size: 22px; }
}
/*
* „vs” miedzy herbami bierze jasny kolor przeznaczony na ciemne tla,
* a na papierowej kartce bez zdjecia ledwo je widac.
*/
.slide--torn:not(.slide--mecz-foto):not(.is-foto-pelne) .torn__vs { color: var(--muted); }
/* ---------- 81. Stadion ---------- */
.stad { background: var(--paper); padding: 0 0 56px; }
.stad .kal__tytul { margin-top: 46px; }
/* zdjecie otwierajace na pelna szerokosc — obiekt jest tematem podstrony */
.stad__hero { position: relative; margin-bottom: 26px; }
.stad__hero > img {
display: block; width: 100%; height: clamp(280px, 46vh, 520px);
object-fit: cover; object-position: center 42%;
}
.stad__hero-tresc {
position: absolute; inset: auto 0 0 0; padding: 46px 0 26px; color: #fff;
background: linear-gradient(180deg, rgba(7, 30, 16, 0), rgba(7, 30, 16, .88));
}
.stad__nadtytul {
margin: 0 0 6px; font-family: var(--font-display); font-weight: 600;
font-size: var(--fs-etykieta); letter-spacing: .16em; text-transform: uppercase;
color: var(--leaf);
}
.stad__hero-tresc h2 {
font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(26px, 3.4vw, 44px); line-height: 1.02; margin: 0 0 10px; color: #fff;
}
.stad__lead { margin: 0; max-width: 62ch; color: var(--muted-jasny); font-size: 17px; }
.stad__lead b { color: #fff; }
.stad__dane {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
border: 1px solid var(--line-dark); border-radius: 8px; background: #fff; overflow: hidden;
}
.stad__dane li {
padding: 18px 22px; border-left: 1px solid var(--line-dark);
display: grid; gap: 3px; align-content: start;
}
.stad__dane li:first-child { border-left: 0; }
.stad__etykieta {
font-family: var(--font-display); font-weight: 600;
font-size: var(--fs-etykieta); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.stad__dane b {
font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink);
}
/* dane sprzed przebudowy sa nieaktualne — zaznaczamy, czego nie potwierdzilismy */
.stad__dane i {
font-style: normal; font-size: 11px; color: #7a4a00;
background: #ffe9bd; border-radius: 3px; padding: 1px 6px; width: max-content;
}
.stad__dol {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: 30px; align-items: start; margin-top: 10px;
}
.stad__trasa { margin-bottom: 18px; }
.stad__trasa h3 {
margin: 0 0 6px; font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-drobny); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.stad__trasa ol { margin: 0; padding-left: 20px; color: var(--ink); line-height: 1.6; }
.stad__uwaga { margin: 0 0 16px; font-size: var(--fs-drobny); color: var(--muted); }
.stad__historia p { max-width: 66ch; line-height: 1.7; }
.stad__zrodlo { font-size: var(--fs-drobny); color: var(--muted); }
@media (max-width: 900px) {
.stad__dol { grid-template-columns: 1fr; }
.stad__dane li { border-left: 0; border-top: 1px solid var(--line-dark); }
.stad__dane li:first-child { border-top: 0; }
}
/* ---------- 82. Bilety i karnety ---------- */
.bil { background: var(--paper); padding: 34px 0 56px; }
.bil__cennik {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
}
.bil__karta {
position: relative; background: #fff;
border: 1px solid var(--line-dark); border-radius: 10px; padding: 26px 28px;
}
/* karnet wyrozniony — to on jest realna ofertą dla kibica na caly sezon */
.bil__karta--polec { background: var(--green-darker); border-color: var(--green-darker); color: #fff; }
.bil__wstega {
position: absolute; top: -11px; left: 24px;
background: var(--leaf); color: var(--green-darker);
font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-etykieta); letter-spacing: .1em; text-transform: uppercase;
padding: 4px 12px; border-radius: 3px;
}
.bil__karta h2 {
font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(20px, 2.2vw, 26px); line-height: 1.1; margin: 0 0 4px; color: var(--ink);
}
.bil__karta--polec h2 { color: #fff; }
.bil__opis { margin: 0 0 20px; font-size: var(--fs-drobny); color: var(--muted); }
.bil__karta--polec .bil__opis { color: var(--muted-jasny); }
.bil__ceny { display: flex; flex-wrap: wrap; gap: 34px; }
.bil__ceny > div { display: grid; gap: 2px; }
.bil__ceny b {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(36px, 4.4vw, 54px); line-height: 1; color: var(--ink);
font-variant-numeric: tabular-nums;
}
.bil__karta--polec .bil__ceny b { color: #fff; }
.bil__ceny b small { font-size: .42em; font-weight: 600; margin-left: 3px; }
.bil__ceny span {
font-size: var(--fs-etykieta); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.bil__karta--polec .bil__ceny span { color: var(--leaf); }
.bil__ile {
margin: 16px 0 0; font-size: 16px; color: var(--ink);
padding: 14px 18px; background: #fff;
border: 1px solid var(--line-dark); border-left: 3px solid var(--green); border-radius: 6px;
}
.bil__ile b { font-family: var(--font-display); font-weight: 800; color: var(--green-tekst); }
.bil__info {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 18px; margin-top: 26px;
}
.bil__blok {
background: #fff; border: 1px solid var(--line-dark); border-radius: 8px; padding: 20px 22px;
}
.bil__blok h3 {
margin: 0 0 10px; font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-drobny); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.bil__blok p { margin: 0 0 8px; line-height: 1.6; }
.bil__blok ul { margin: 0; padding-left: 18px; line-height: 1.7; }
.bil__drobne { font-size: var(--fs-drobny); color: var(--muted); }
.bil__do-podmiany {
width: max-content; margin-top: 10px;
background: #ffe9bd; color: #7a4a00; border-radius: 3px; padding: 2px 8px;
}
.bil__tresc { margin-top: 30px; }
.bil__ile a { color: var(--green-tekst); font-weight: 700; text-decoration: none; }
.bil__ile a:hover { text-decoration: underline; }
/* cena wpisana na probe — ma sie rzucac w oczy, dopoki klub nie poda swojej */
.bil__tymczasowa {
display: block; width: max-content; margin-top: 6px;
font-style: normal; font-size: 11px; font-weight: 700;
color: #7a4a00; background: #ffe9bd; border-radius: 3px; padding: 1px 7px;
letter-spacing: 0; text-transform: none;
}
/*
* Wpis bez zdjecia: sam herb w nizszym kadrze. Wpisy przeniesione
* z Facebooka nie maja obrazkow (eksport ich nie zawiera), wiec bez tego
* lista aktualnosci bylaby sciana identycznych kafli na pol ekranu.
*/
.news-card__img.is-brak { aspect-ratio: 21 / 9; background: var(--green-darker); }
.news-card__img.is-brak::before { display: none; }
.news-card__img.is-brak img {
width: 42%; height: auto; margin: 0 auto; opacity: .55; object-fit: contain;
}
.news-featured__img.is-brak::before { display: none; }
.news-featured__img.is-brak img { width: 34%; height: auto; margin: auto; opacity: .5; }
/* ===== 83. Galeria zdjec we wpisie ===== */
/* Wpisy przeniesione z Facebooka maja po kilkanascie kadrow — pierwszy idzie
na obrazek wyrozniony, reszta tutaj, w siatce ktora sama dobiera liczbe
kolumn do szerokosci. */
.galeria { margin: 38px 0 10px; }
.galeria__tytul {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: .04em;
text-transform: uppercase;
margin: 0 0 16px;
padding-bottom: 10px;
border-bottom: 2px solid var(--green);
}
.galeria__siatka {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 12px;
}
.galeria__foto {
display: block;
padding: 0;
border: 0;
border-radius: 10px;
overflow: hidden;
cursor: zoom-in;
background: #e9edf0;
aspect-ratio: 4 / 3;
}
.galeria__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.galeria__foto:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
@media (max-width: 640px) {
.galeria__siatka { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
}
/* ===== 84. Aktualnosci: jednakowa wysokosc kafli ===== */
/*
* Zdjecia z Facebooka maja rozne proporcje: grafiki meczowe to pionowe 4:5,
* fotki z boiska 3:2. Przy roznych ramkach napisy w jednym rzedzie zaczynaly
* sie na roznej wysokosci i siatka wygladala na rozjechana. Jedna ramka dla
* wszystkich kafli — plakat dalej w calosci na rozmytym tle, zdjecie dalej
* kadrowane.
*/
.news-card__img,
.news-card__img.is-plakat,
.news-card__img.is-brak { aspect-ratio: 1 / 1; }
.news-card__img.is-brak img { width: 42%; }
/* ===== 85. Telefony: kolumny, ktore nie chcialy sie zwezic ===== */
/*
* Element siatki ma domyslnie min-width:auto, wiec nie zejdzie ponizej
* szerokosci swojej najszerszej zawartosci. Tabela ligi i tabela kariery
* maja ustawione min-width w pikselach, wiec rozpychaly cala strone w bok
* — przy 430 px dokument mial 648 px i cala strona jezdzila na boki.
* Po zwolnieniu kolumn tabele przewijaja sie w swoich ramkach, tak jak mialy.
*/
.rozgrywki__grid > *,
.zaw-glowna > * { min-width: 0; }
/* Zolta plakietka „do uzupelnienia” miala width:max-content i nie lamala
sie w waskiej karcie. */
.bil__do-podmiany { max-width: 100%; box-sizing: border-box; }
/* Dlugie adresy w tresci (regulaminy, polityka prywatnosci) nie mieszcza sie
w jednej linii na telefonie i wypychaly cala strone w bok. */
.page-body { overflow-wrap: break-word; }
/* Biuro nie ma stalych godzin — jedna osoba na etacie pracuje zmiennie,
wiec zamiast grafiku prosimy o kontakt. */
.kont__godziny-uwaga { margin: 4px 0 0; color: var(--muted); line-height: 1.5; }
/* Konfigurator sponsorski jest narzedziem roboczym klubu, nie atrakcja dla
odwiedzajacych — plakietka przypomina, ze widac go tylko po zalogowaniu. */
.wiz__wewnetrzny {
display: inline-block; margin: 0 0 8px;
padding: 3px 10px; border-radius: 3px;
background: #ffe9bd; color: #7a4a00;
font-size: var(--fs-etykieta); letter-spacing: .08em; text-transform: uppercase;
}
/* ===== 86. Naglowki wpisow wedlug rodzaju ===== */
/*
* Kazdy rodzaj wpisu dostaje nad trescia pasek z tym, co w nim najwazniejsze:
* relacja — wynik, zapowiedz — termin i bilety, transfer — kartotekę
* zawodnika. Wspolny szkielet, rozne wypelnienie.
*/
.wtyp {
margin: 0 0 26px;
padding: 18px 20px;
border: 1px solid var(--line-dark);
border-radius: 8px;
background: #fff;
}
.wtyp__etykieta {
margin: 0 0 12px;
font-family: var(--font-display);
font-size: var(--fs-etykieta);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
.wtyp__tablica {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 16px;
}
.wtyp__druzyna { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wtyp__druzyna:last-child { flex-direction: row-reverse; text-align: right; }
.wtyp__druzyna b { font-family: var(--font-display); font-weight: 700; line-height: 1.2; }
.wtyp__druzyna .herb img { display: block; }
.wtyp__wynik {
font-family: var(--font-display); font-weight: 800; font-size: 34px;
line-height: 1; color: var(--ink); white-space: nowrap;
}
.wtyp__wynik i { font-style: normal; color: var(--muted); margin: 0 4px; }
.wtyp__vs { font-family: var(--font-display); font-size: 18px; color: var(--muted); }
/* wynik meczu kolorem: wygrana zielono, porazka szaro — bez czerwieni,
zeby strona klubu nie krzyczala o porazkach */
.wtyp--relacja.is-wygrana .wtyp__wynik { color: var(--green-tekst); }
.wtyp--relacja.is-porazka .wtyp__wynik { color: var(--muted); }
.wtyp__strzelcy { margin: 14px 0 0; color: var(--muted); line-height: 1.6; }
.wtyp__strzelcy i { font-style: normal; color: var(--ink); }
.wtyp__termin { margin: 12px 0 0; font-weight: 600; }
.wtyp--zapowiedz .btn { margin-top: 12px; }
.wtyp--wywiad { border-left: 3px solid var(--green); }
.wtyp__cytat {
margin: 0; padding: 0; border: 0;
font-family: var(--font-display); font-weight: 700;
font-size: clamp(19px, 2.4vw, 26px); line-height: 1.3; color: var(--ink);
}
.wtyp__cytat::before { content: '„'; }
.wtyp__cytat::after { content: '”'; }
.wtyp__kto { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; }
.wtyp__kto img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.wtyp__osoba { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; }
.wtyp__foto img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; }
.wtyp__dane { display: grid; gap: 2px; }
.wtyp__dane b { font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.wtyp__wiecej { color: var(--green-tekst); font-size: var(--fs-drobny); }
.wtyp--multimedia { display: flex; align-items: center; gap: 12px; }
.wtyp__znacznik {
font-family: var(--font-display); font-size: var(--fs-etykieta);
letter-spacing: .08em; text-transform: uppercase; color: var(--green-tekst);
}
.wtyp__licznik { color: var(--muted); font-size: var(--fs-drobny); }
@media (max-width: 560px) {
.wtyp__tablica { gap: 10px; }
.wtyp__druzyna { flex-direction: column; text-align: center; gap: 6px; }
.wtyp__druzyna:last-child { flex-direction: column; text-align: center; }
.wtyp__druzyna b { font-size: 13px; }
.wtyp__wynik { font-size: 28px; }
}
/* ===== 87. Slajdy hero wedlug rodzaju wpisu ===== */
/*
* Kartka, tlo i uklad hero zostaja bez zmian — dochodzi tylko to, czego
* dotad nie bylo na slajdach z wpisow: wynik miedzy herbami przy relacji
* i cytat przy wywiadzie. Reszte obsluguja style, ktore juz sa.
*/
/* Cytat czyta sie inaczej niz naglowek: bez wersalikow i luzniej. */
.slide--torn .torn__cytat {
display: block; text-transform: none; font-weight: 600;
font-size: clamp(20px, 3.1cqw, 40px); line-height: 1.16; letter-spacing: 0;
}
.slide--wywiad .torn__sub { font-weight: 700; }
/*
* Slajd z herbami: kolumne tekstu ogranicza PRAWA krawedz, nie sztywna
* szerokosc. Przy `width: 68%` tytul wchodzil pod herby — na slajdach
* meczowych o 6-11 px, a przy relacji z wynikiem az o 55 px, bo blok
* z wynikiem jest szerszy od samego „vs”. Wiazanie przez `right` trzyma
* odstep niezaleznie od tego, co stoi po prawej.
*/
.slide--torn.has-no-cut.slide--mecz .torn__inner,
.slide--torn.has-no-cut.slide--zapowiedz .torn__inner { width: auto; right: 42%; }
.slide--torn.has-no-cut.slide--relacja .torn__inner { width: auto; right: 46%; }
@media (max-width: 1040px) {
.slide--torn.has-no-cut.slide--mecz .torn__inner,
.slide--torn.has-no-cut.slide--zapowiedz .torn__inner,
.slide--torn.has-no-cut.slide--relacja .torn__inner { right: 40%; }
}
@media (max-width: 640px) {
/* na telefonie herby schodza pod tekst, wiec kolumna moze byc pelna */
.slide--torn.has-no-cut.slide--mecz .torn__inner,
.slide--torn.has-no-cut.slide--zapowiedz .torn__inner,
.slide--torn.has-no-cut.slide--relacja .torn__inner { width: 82%; right: auto; }
}
/* ===== 88. Uklad slajdu ustawiany w panelu ===== */
/*
* Cztery przelaczniki z pola „Uklad slajdu” zamieniaja sie na te klasy.
* Kartka, tlo i kolory zostaja nietkniete — zmienia sie tylko rozklad.
* Zdjecie siedzi WEWNATRZ .torn, wiec maska rozdartych krawedzi obejmuje
* i papier, i kadr.
*/
.slide--torn .torn__foto {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center 32%;
}
.slide--torn .torn__zaslona { position: absolute; inset: 0; }
/* pol kadru — zdjecie po przeciwnej stronie niz tekst, wtapia sie w papier */
.is-foto-polowa .torn__foto { left: auto; width: 66%; }
.is-foto-polowa .torn__foto {
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 36%);
mask-image: linear-gradient(to right, transparent 0%, #000 36%);
}
.is-foto-polowa.is-tekst-prawo .torn__foto {
left: 0; right: auto;
-webkit-mask-image: linear-gradient(to left, transparent 0%, #000 36%);
mask-image: linear-gradient(to left, transparent 0%, #000 36%);
}
.is-foto-polowa .torn__zaslona {
background: linear-gradient(to right, transparent 45%, rgba(6, 20, 12, .28) 100%);
}
.is-foto-polowa.is-tekst-prawo .torn__zaslona {
background: linear-gradient(to left, transparent 45%, rgba(6, 20, 12, .28) 100%);
}
/*
* Cale tlo — zdjecie wypelnia kartke.
*
* Kartka ma staly rozmiar, bo slajdy stoja obok siebie w jednym sliderze
* i zmiana ksztaltu przy przewijaniu rzucala sie w oczy bardziej niz
* przyciete zdjecie. Probowalismy dopasowywac kartke do proporcji zdjecia
* — kadr byl wtedy caly, ale slajd ze zdjeciem byl wyraznie mniejszy od
* pozostalych.
*
* Skoro cos musi zostac przyciete, o TYM, CO ZOSTAJE, decyduje redakcja:
* pole „Co pokazac ze zdjecia” ustawia --foto-punkt (gora / srodek / dol).
*/
.is-foto-pelne .torn__foto {
object-fit: cover;
object-position: var(--foto-punkt, center 50%);
}
/* Pol kadru kadrujemy tak samo — tam tez zdjecie bywa przyciete. */
.is-foto-polowa .torn__foto { object-position: var(--foto-punkt, center 32%); }
/* cale tlo — tekst ladzie na zdjeciu, wiec bieleje i dostaje kurtyne */
.is-foto-pelne .torn__zaslona {
background:
linear-gradient(100deg, rgba(6, 20, 12, calc(var(--slajd-ciemnosc, .45) + .25)) 0%,
rgba(6, 20, 12, var(--slajd-ciemnosc, .45)) 55%,
rgba(6, 20, 12, calc(var(--slajd-ciemnosc, .45) * .5)) 100%);
}
.is-foto-pelne.is-tekst-prawo .torn__zaslona {
background:
linear-gradient(260deg, rgba(6, 20, 12, calc(var(--slajd-ciemnosc, .45) + .25)) 0%,
rgba(6, 20, 12, var(--slajd-ciemnosc, .45)) 55%,
rgba(6, 20, 12, calc(var(--slajd-ciemnosc, .45) * .5)) 100%);
}
.is-foto-pelne .torn__title,
.is-foto-pelne .torn__sub { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .5); }
.is-foto-pelne .torn__title .is-leaf { color: var(--leaf); }
.is-foto-pelne .torn__vs { color: rgba(255, 255, 255, .55); }
/*
* Plakietka („Aktualności · 29.08.2026”) zostaje CZARNA takze na slajdzie
* ze zdjeciem na cala kartke. Przezroczysta biel z rozmyciem robila z niej
* inny element niz ta sama plakietka na kazdym pozostalym slajdzie —
* a to ma byc jedna rzecz w calym sliderze, nie dwie.
*/
.is-foto-pelne .torn__badge { background: var(--ink); }
/* tekst po prawej — lustrzane odbicie kolumny i herbow */
.is-tekst-prawo .torn__inner { left: auto; right: 6%; }
.is-tekst-prawo .torn__herby { right: auto; left: 6%; }
.is-tekst-prawo .torn__stage { left: 0; right: auto; transform: scaleX(-1); }
.is-tekst-prawo .torn__stage .torn__cut { transform: scaleX(-1); }
/* bez zdjecia kolumna tekstu moze byc szersza */
.slide--torn.is-foto-brak .torn__inner { width: 82%; }
.slide--torn.is-foto-brak.is-tekst-prawo .torn__inner { width: 82%; }
/* Stan meczu po pierwszym gwizdku, gdy wyniku jeszcze nie ma w danych.
Licznik na 00:00:00:00 mowil nieprawde — mecz sie zaczal, a strona
dalej odliczala. */
.mecz-odl__stan {
margin: 18px 0 0;
font-family: var(--font-display);
font-size: var(--fs-etykieta);
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255, 255, 255, .8);
}
.mecz-odl__stan.is-trwa { color: var(--leaf); display: inline-flex; align-items: center; gap: 9px; }
.mecz-odl__stan.is-trwa::before {
content: ''; width: 8px; height: 8px; border-radius: 50%;
background: var(--leaf); animation: mecz-puls 1.6s ease-in-out infinite;
}
@keyframes mecz-puls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .mecz-odl__stan.is-trwa::before { animation: none; } }
/* ===== 89. Race na trybunach ===== */
/*
* Gdzieniegdzie w tlumie zapala sie raca i dopiero z niej idzie zielony dym.
* Nie jest to sama mgielka przesuwana w bok — najpierw rozpala sie zar,
* po chwili z tego samego punktu ucieka dym, a na koniec wszystko gasnie.
*
* Trzy race, kazda z wlasnym momentem zapalenia i dluga przerwa miedzy
* cyklami, zeby efekt zdarzal sie „co niegdzie”, a nie caly czas.
*
* Czysty CSS: zadnych klatek liczonych w JavaScripcie, wiec nic nie obciaza
* telefonu i nie ma czego zepsuc, gdy skrypt nie wystartuje.
*/
.hero__dym {
position: absolute;
left: 0; right: 0; top: 0;
height: 72%;
z-index: 1;
pointer-events: none;
overflow: hidden;
/* na ciemnej zieleni „screen” rozjasnia zamiast brudzic */
mix-blend-mode: screen;
-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
/* Punkt zaczepienia racy — sam w sobie nic nie rysuje. */
.hero__raca {
position: absolute;
width: 0; height: 0;
}
/*
* Race NA BOKACH kadru, nie na srodku.
*
* Srodkowa wypadala dokladnie za kartka slajdu i rozjasniala tlo tam,
* gdzie leza tytul i zdjecie — zamiast dodawac atmosfery, przeszkadzala
* w czytaniu. Zostaja dwie przy krawedziach, gdzie tlo i tak jest puste.
*/
.hero__raca--1 { left: 6%; top: 36%; --cykl: 26s; --start: -3s; }
.hero__raca--2 { left: 92%; top: 28%; --cykl: 31s; --start: -14s; }
.hero__raca--3 { display: none; }
/* ---------- zar ---------- */
.hero__zar {
position: absolute;
left: -110px; top: -110px;
width: 220px; height: 220px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(255, 255, 255, 1) 0%,
rgba(212, 255, 228, .92) 12%,
rgba(140, 235, 175, .62) 30%,
rgba(31, 146, 71, .3) 52%,
transparent 74%);
filter: blur(14px);
opacity: 0;
will-change: opacity, transform;
animation: raca-zar var(--cykl) linear infinite;
animation-delay: var(--start);
}
/*
* Zar zapala sie skokiem, chwile drga jak prawdziwa raca, potem przygasa.
* Drganie robimy skokami krycia, a nie osobna animacja — jedna animacja
* mniej na element to mniej pracy dla przegladarki.
*/
@keyframes raca-zar {
0% { opacity: 0; transform: scale(.5); }
2% { opacity: 1; transform: scale(1.15); }
4% { opacity: .72; transform: scale(.98); }
6% { opacity: 1; transform: scale(1.08); }
9% { opacity: .8; transform: scale(1); }
12% { opacity: 1; transform: scale(1.05); }
26% { opacity: .85; transform: scale(1); }
40% { opacity: .5; transform: scale(.92); }
55% { opacity: .12; transform: scale(.8); }
62% { opacity: 0; transform: scale(.7); }
100% { opacity: 0; transform: scale(.5); }
}
/* ---------- dym ---------- */
.hero__kleb {
position: absolute;
left: -150px; top: -150px;
width: 300px; height: 300px;
border-radius: 50%;
/* Zielen klubowa, nie szarosc — to dym z racy, nie z ogniska. */
background: radial-gradient(circle at 48% 58%,
rgba(233, 253, 241, .92) 0%,
rgba(176, 242, 205, .66) 24%,
rgba(96, 200, 138, .38) 48%,
rgba(31, 146, 71, .14) 66%,
transparent 78%);
filter: blur(26px);
opacity: 0;
will-change: transform, opacity;
animation: dym-z-racy var(--cykl) linear infinite;
}
/* Kleby wychodza jeden po drugim, kazdy troche inaczej — stad klebienie. */
.hero__kleb--1 { animation-delay: calc(var(--start) + 0.4s); }
.hero__kleb--2 { animation-delay: calc(var(--start) + 2.2s); width: 250px; height: 250px; left: -125px; top: -125px; filter: blur(32px); }
.hero__kleb--3 { animation-delay: calc(var(--start) + 4.4s); width: 350px; height: 350px; left: -175px; top: -175px; filter: blur(38px); }
.hero__kleb--4 { animation-delay: calc(var(--start) + 6.7s); width: 290px; height: 290px; left: -145px; top: -145px; filter: blur(30px); }
/*
* Dym startuje przy zarze, unosi sie, rosnie i rozplywa. Caly ruch mie&sci sie
* w pierwszej polowie cyklu — reszta to cisza przed kolejnym zapaleniem.
*/
@keyframes dym-z-racy {
0% { transform: translate3d(0, 0, 0) scale(.25) rotate(0deg); opacity: 0; }
3% { opacity: .85; }
16% { transform: translate3d(26px, -80px, 0) scale(.8) rotate(16deg); opacity: .9; }
30% { transform: translate3d(-22px, -165px, 0) scale(1.45) rotate(40deg); opacity: .68; }
44% { transform: translate3d(38px, -250px, 0) scale(2.1) rotate(64deg); opacity: .3; }
56% { transform: translate3d(14px, -325px, 0) scale(2.7) rotate(82deg); opacity: 0; }
100% { transform: translate3d(0, -325px, 0) scale(2.7); opacity: 0; }
}
/* Na telefonie kartka slajdu zaczyna sie tuz pod naglowkiem — zostawiamy
jedna race, bo rozmycie kosztuje tam najwiecej. */
@media (max-width: 640px) {
.hero__dym { height: 42%; }
.hero__raca--2, .hero__raca--3 { display: none; }
.hero__kleb--3, .hero__kleb--4 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero__zar { animation: none; opacity: .45; }
.hero__kleb { animation: none; opacity: .22; transform: translate3d(0, -120px, 0) scale(1.5); }
}
/* ===== 90. Grupy treningowe Akademii ===== */
/*
* Trzynascie grup — tabela bylaby na telefonie nie do czytania, wiec kazda
* grupa dostaje wlasny kafel. Numer trenera jest odsylaczem tel:, bo rodzic
* otwiera te strone glownie po to, zeby zadzwonic.
*/
.grupy { background: var(--paper); padding: 10px 0 56px; }
.grupy__wstep { max-width: 62ch; color: var(--muted); margin: 0 0 26px; }
.grupy__siatka {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 14px;
}
.grupa-k {
background: #fff;
border: 1px solid var(--line-dark);
border-left: 3px solid var(--green);
border-radius: 8px;
padding: 16px 18px;
}
.grupa-k__rocznik {
margin: 0 0 4px;
font-family: var(--font-display);
font-size: var(--fs-etykieta);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
.grupa-k h3 {
margin: 0 0 12px;
font-family: var(--font-display);
font-weight: 800;
font-size: 20px;
line-height: 1.15;
text-transform: uppercase;
}
.grupa-k__trenerzy { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.grupa-k__trenerzy li { display: grid; gap: 1px; }
.grupa-k__kto { font-weight: 700; color: var(--ink); text-decoration: none; }
a.grupa-k__kto { color: var(--green-tekst); }
a.grupa-k__kto:hover { text-decoration: underline; }
.grupa-k__tel {
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
letter-spacing: .04em;
color: var(--muted);
text-decoration: none;
width: max-content;
}
.grupa-k__tel:hover { color: var(--green-tekst); }
.grupy__bramkarze {
margin-top: 22px;
padding: 16px 18px;
background: #fff;
border: 1px solid var(--line-dark);
border-radius: 8px;
}
.grupy__etykieta {
margin: 0 0 4px;
font-family: var(--font-display);
font-size: var(--fs-etykieta);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
.grupy__bramkarze p:last-child { margin: 0; font-weight: 700; }
.grupy__bramkarze a { color: var(--green-tekst); }
/* ===== 91. Baner naboru do Akademii ===== */
/*
* Nabor stoi nad wszystkim, bo po niego rodzice tu wchodza. Ciemna zielen
* z poswiata — ten sam jezyk co hero, tylko spokojniejszy, zeby podstrona
* nie konkurowala ze strona glowna.
*/
.nabor {
position: relative;
overflow: hidden;
background: var(--green-darker);
color: #fff;
padding: 46px 0 44px;
}
.nabor::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(80% 120% at 88% 10%, rgba(23, 128, 58, .55), transparent 62%),
repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 9px);
}
.nabor__wrap {
position: relative; z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: 34px;
align-items: center;
}
@media (max-width: 860px) { .nabor__wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.nabor__plakietka {
display: inline-block;
background: rgba(255, 255, 255, .14);
font-family: var(--font-display);
font-size: var(--fs-etykieta);
letter-spacing: .16em;
text-transform: uppercase;
padding: 5px 12px;
margin-bottom: 14px;
}
.nabor__tytul {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(30px, 5vw, 58px);
/* miejsce na ogonki — akcent nastepnego wiersza nie moze wchodzic na poprzedni */
line-height: 1.04;
text-transform: uppercase;
margin: 0;
}
.nabor__tytul em { font-style: normal; color: #fff; display: block; }
.nabor__lead { max-width: 56ch; color: rgba(255, 255, 255, .86); margin: 14px 0 0; }
.nabor__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 22px; }
.nabor__cta { background: var(--green); border-color: var(--green); }
.nabor__nizej {
font-family: var(--font-display);
font-size: var(--fs-drobny);
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.nabor__nizej:hover { text-decoration: underline; }
.nabor__liczby { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nabor__liczby li { border-left: 3px solid var(--leaf); padding: 4px 0 4px 14px; }
.nabor__liczby b {
display: block;
font-family: var(--font-display); font-weight: 800;
font-size: clamp(22px, 2.6vw, 32px); line-height: 1;
font-variant-numeric: tabular-nums;
}
.nabor__liczby span {
font-size: var(--fs-drobny); letter-spacing: .08em; text-transform: uppercase;
color: rgba(255, 255, 255, .7);
}
/* ---------- podzial rozpiski na kategorie wiekowe ---------- */
.grupy__sekcja + .grupy__sekcja { margin-top: 30px; }
.grupy__glowa {
display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
margin-bottom: 12px; padding-bottom: 8px;
border-bottom: 2px solid var(--green);
}
.grupy__glowa h3 {
margin: 0;
font-family: var(--font-display); font-weight: 800;
font-size: 20px; letter-spacing: .04em; text-transform: uppercase;
}
.grupy__glowa span { color: var(--muted); font-size: var(--fs-drobny); }
/* ===== 89. Relacja na zywo i powiadomienia ===== */
/*
* Relacja czyta sie jak kanal wiadomosci: najnowsze zdarzenie na gorze,
* minuta w stalej kolumnie po lewej. Bez ozdob — w trakcie meczu liczy sie
* tylko to, zeby jednym rzutem oka zlapac, co sie wlasnie stalo.
*/
.live { padding: 46px 0 10px; }
.live__glowa { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.live__glowa .kal__tytul { margin: 0; display: flex; align-items: center; gap: 10px; }
.live__stan { margin: 0; color: var(--muted, #7b8a80); font-weight: 600; }
/* Kropka pulsuje tylko w trakcie meczu — po ostatnim gwizdku ma znieruchomiec. */
.live__kropka {
width: 11px; height: 11px; border-radius: 50%;
background: #e10014; flex: 0 0 auto; display: inline-block;
}
.live--trwa .live__kropka { animation: liveBicie 1.4s ease-in-out infinite; }
@keyframes liveBicie {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .35; transform: scale(.75); }
}
@media (prefers-reduced-motion: reduce) {
.live--trwa .live__kropka { animation: none; }
}
/*
* Strona meczu ma jasne tlo, wiec kontrasty licza sie od ciemnego tekstu.
* Pierwsza wersja miala kolory z ciemnych sekcji i minuta przy golu
* Wisloki byla jasnozielona na jasnozielonym pasku — nie do odczytania.
*/
/* ---- Oś czasu: [pigułka minuty] [linia z węzłem] [kafelek] ---- */
.live__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.live__zdarzenie {
display: grid;
grid-template-columns: 40px 18px minmax(0, 1fr);
align-items: center;
gap: 8px;
position: relative;
}
.live__zdarzenie[hidden] { display: none; }
/* Minuta jako szara pigułka — wyśrodkowana w pionie względem kafelka. */
.live__minuta {
display: inline-flex; align-items: center; justify-content: center;
padding: 4px 0; min-width: 40px;
border-radius: 999px; background: #eef1ef; color: #31413a;
font-weight: 800; font-variant-numeric: tabular-nums; font-size: 13px; line-height: 1;
}
.live__minuta i { font-style: normal; opacity: .55; }
/* Kolumna kropki: ciągła pionowa linia + kolorowy węzeł na środku wysokości kafelka. */
.live__dot { position: relative; align-self: stretch; }
.live__dot::before { content: ''; position: absolute; left: 50%; top: -10px; bottom: -10px; width: 2px; transform: translateX(-50%); background: #e2e6e3; }
.live__dot::after {
content: ''; position: absolute; left: 50%; top: 50%; z-index: 1;
width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%, -50%);
background: #c3ccc6; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07);
}
/* Linia nie wystaje nad pierwszym ani pod ostatnim węzłem. */
.live__zdarzenie:first-child .live__dot::before { top: 50%; }
.live__zdarzenie:last-child .live__dot::before { bottom: 50%; }
/* Kafelek zdarzenia — ikona w kwadraciku + treść. */
.live__karta {
display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 11px;
padding: 12px 14px; border-radius: 12px;
background: #fff; border: 1px solid rgba(0, 0, 0, .08);
box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.live__ikona {
width: 34px; height: 34px; display: grid; place-items: center;
border-radius: 9px; background: #eef1ef; font-size: 16px; line-height: 1;
}
@media (min-width: 641px) {
.live__zdarzenie { grid-template-columns: 52px 20px minmax(0, 1fr); gap: 10px; }
.live__minuta { min-width: 52px; font-size: 14px; }
.live__karta { grid-template-columns: 38px minmax(0, 1fr); gap: 13px; padding: 13px 16px; }
.live__ikona { width: 38px; height: 38px; font-size: 18px; }
}
/* Kolor węzła wg typu zdarzenia. */
.live__zdarzenie--sytuacja .live__dot::after,
.live__zdarzenie--czerwona .live__dot::after,
.live__zdarzenie--gol_ich .live__dot::after { background: #d8382e; }
.live__zdarzenie--zolta .live__dot::after { background: #e9bf00; }
.live__zdarzenie--zmiana .live__dot::after { background: #3b82c4; }
.live__zdarzenie--gol_my .live__dot::after { background: #17803a; }
/* Tło/obrys kafelka + tło ikony wg typu. */
.live__zdarzenie--sytuacja .live__karta { background: #fdf1f0; border-color: #f4d3cf; }
.live__zdarzenie--sytuacja .live__ikona { background: #fadad5; }
.live__zdarzenie--zolta .live__karta { background: #fefae6; border-color: #f2e4a8; }
.live__zdarzenie--zolta .live__ikona { background: #fbeeb0; }
.live__zdarzenie--czerwona .live__karta { background: #fdf1f0; border-color: #f4c9c4; }
.live__zdarzenie--czerwona .live__ikona { background: #fad2cd; }
.live__zdarzenie--zmiana .live__karta { background: #eef5fb; border-color: #cfe1f2; }
.live__zdarzenie--zmiana .live__ikona { background: #d8e8f7; }
.live__zdarzenie--gol_my .live__karta { background: #e9f7ee; border-color: #b9e3c7; }
.live__zdarzenie--gol_my .live__ikona { background: #c9edd5; }
.live__zdarzenie--gol_my .live__minuta { background: #cdebd5; color: #12692f; }
/*
* min-width:0 + overflow-wrap:anywhere — redakcja wkleja w komentarze adresy
* ("https://www.facebook.com/sklepyluxmar/"), które bez tego rozpychały cały
* dokument w wąskim ekranie (dolne menu wyjeżdżało poza telefon). anywhere,
* nie break-word: tylko ono liczy się przy wyliczaniu min-content.
*/
.live__tresc { min-width: 0; overflow-wrap: anywhere; }
.live__tresc b { display: block; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; color: #16321f; }
.live__tresc span { display: block; margin-top: 3px; color: #4a5a50; }
/* Skrypt chowa puste pola przez `hidden` — ta regula bije domyslne [hidden]. */
.live__tresc span[hidden] { display: none; }
/* Tytuł w kolorze typu — jak na projekcie. */
.live__zdarzenie--sytuacja .live__tresc b,
.live__zdarzenie--czerwona .live__tresc b { color: #c62f24; }
.live__zdarzenie--zmiana .live__tresc b { color: #2f6fb0; }
.live__zdarzenie--gol_my .live__tresc b { color: #12692f; }
/* Nazwisko wyzej niz opis: przy golu to jedyne, co kibic czyta w biegu. */
.live__kto { font-weight: 700; color: #16321f !important; }
.live__zdarzenie--gol_my .live__kto { color: #12692f !important; }
.live__zdarzenie--czerwona .live__kto { color: #b3261e !important; }
.live__pusto { color: #4a5a50; }
/*
* Sklad podany przed meczem.
*
* Do godziny przed gwizdkiem stoi tu sama zapowiedz — kibic ma wiedziec, po co
* i kiedy wrocic, a nie patrzec na pusta ramke. Same nazwiska pozyczaja uklad
* od skladow z protokolu (.msk), zeby jedno i drugie czytalo sie tak samo.
*/
.sklad { padding: 34px 0 6px; }
.sklad .live__glowa { margin-bottom: 14px; }
.sklad__czeka {
display: flex; align-items: baseline; gap: 10px;
margin: 0; padding: 16px 18px;
border-radius: 8px;
border: 1px dashed rgba(23, 128, 58, .38);
background: rgba(23, 128, 58, .06);
color: #2b3a31;
max-width: 640px;
}
.sklad__zegar { font-size: 18px; line-height: 1; }
.sklad__grupa {
margin: 14px 0 4px;
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-etykieta);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
}
/* Lawka to informacja drugiego rzedu — lzejsza od wyjsciowej jedenastki. */
.sklad__lawka li { padding: 4px 0; border-bottom: none; }
.sklad__lawka .msk__kto { color: #4a5a50; }
.sklad__lawka .msk__kto a { font-weight: 600; }
.sklad__trener { margin: 12px 0 0; font-size: var(--fs-drobny); color: var(--muted); }
.sklad__trener b { color: var(--ink); }
.sklad__brak { margin: 0; color: var(--muted); font-size: var(--fs-drobny); }
/* Sedzia domyka sekcje — jeden wiersz pod obiema kolumnami. */
.sklad__sedzia {
margin: 18px 0 0;
padding-top: 12px;
border-top: 1px solid var(--line-dark);
font-size: var(--fs-drobny);
color: var(--muted);
}
.sklad__sedzia b { color: var(--ink); }
/*
* Wyjsciowa jedenastka na boisku.
*
* Napastnicy na gorze, bramkarz na dole — tak samo, jak ustawienie pokazuje
* transmisja, wiec kibic nie musi go sobie obracac w glowie. Koszulki sa
* rysowane (SVG w pliku sklady.php), nie wgrywane: skaluja sie bez rozmycia
* i nie dokladaja zadnego pliku do pobrania.
*/
/* Oba boiska obok siebie; na telefonie jedno pod drugim. */
.ksk-pary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px;
margin-bottom: 26px;
}
.ksk-pary--jedno { grid-template-columns: minmax(0, 560px); }
.ksk-blok { margin: 0; }
.ksk-blok__glowa {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 10px;
}
.ksk-blok__glowa .klub { display: flex; align-items: center; gap: 9px; }
.ksk-blok__glowa b {
font-family: var(--font-display); font-weight: 700; font-size: 15px;
text-transform: uppercase; letter-spacing: .02em;
}
/* Ustawienie jako plakietka — liczba, ktorej szuka sie wzrokiem od razu. */
.ksk-blok__taktyka {
font-family: var(--font-display); font-weight: 700; font-size: 14px;
letter-spacing: .08em;
padding: 4px 11px; border-radius: 999px;
color: #fff; background: var(--green);
}
.ksk {
position: relative;
display: flex; flex-direction: column; justify-content: space-between;
gap: 6px;
padding: 20px 6px 16px;
min-height: 460px;
border-radius: 12px;
overflow: hidden;
background:
repeating-linear-gradient(180deg,
rgba(255, 255, 255, .05) 0 46px,
rgba(0, 0, 0, .05) 46px 92px),
linear-gradient(180deg, var(--green-dark, #0d5226), var(--green-darker, #0a3d1d));
}
/* Definicja pasow koszulki — niewidoczna, sluzy tylko jako wzor wypelnienia. */
.ksk__wzory { position: absolute; width: 0; height: 0; }
/* Boisko bez skladu nie znika — mowi wprost, ze danych jeszcze nie ma. */
.ksk__pusto {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
margin: 0; padding: 0 24px;
text-align: center; color: rgba(255, 255, 255, .72);
font-size: var(--fs-drobny);
}
/* Linie boiska: tylko tyle, zeby bylo wiadomo, ze to murawa. */
.ksk__murawa { position: absolute; inset: 8px; pointer-events: none; }
.ksk__murawa span { position: absolute; border: 2px solid rgba(255, 255, 255, .16); }
.ksk__kolo {
width: 128px; height: 128px; border-radius: 50%;
top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.ksk__pole { left: 22%; right: 22%; bottom: 0; height: 78px; border-bottom: none; }
.ksk__bramka { left: 36%; right: 36%; bottom: 0; height: 30px; border-bottom: none; }
.ksk__linia {
position: relative;
display: flex; justify-content: space-evenly; align-items: flex-start;
gap: 4px;
}
.ksk__gracz {
display: flex; flex-direction: column; align-items: center; gap: 5px;
width: 74px; min-width: 0;
color: #fff; text-decoration: none;
}
a.ksk__gracz:hover .ksk__koszulka { transform: translateY(-3px); }
a.ksk__gracz:hover .ksk__nazwisko { color: var(--green-herb-jasny, #00b853); }
.ksk__koszulka { position: relative; width: 54px; transition: transform .15s ease; }
.ksk__koszulka svg { display: block; width: 100%; height: auto; }
.ksk__nr {
position: absolute; left: 0; right: 0; top: 46%;
transform: translateY(-50%);
text-align: center;
font-family: var(--font-display); font-weight: 700; font-size: 19px;
color: var(--green-darker, #0a3d1d);
text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
/* Ciemna koszulka bramkarza — numer musi sie z niej wybic. */
.ksk__gracz--bramkarz .ksk__nr { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
/*
* Kartka i gol siadaja na ramieniu koszulki, nie pod nazwiskiem: przy jedenastu
* zawodnikach wzrok szuka ich na sylwetce, a dodatkowy wiersz tekstu rozpychalby
* caly rzad w pionie.
*/
.ksk__znaczki {
position: absolute; top: 30%; right: -10px;
display: flex; flex-direction: column; gap: 2px;
font-size: 13px; line-height: 1;
}
.ksk__znaczki i { font-style: normal; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.ksk__znaczki:empty { display: none; }
.ksk__nazwisko {
font-family: var(--font-display); font-weight: 600; font-size: 12px;
letter-spacing: .04em; text-transform: uppercase;
text-align: center; line-height: 1.15;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
transition: color .15s ease;
}
/* Telefon: piec koszulek w rzedzie musi sie zmiescic bez przewijania w bok. */
@media (max-width: 760px) {
/*
* minmax(0, 1fr), a NIE samo 1fr.
*
* "1fr" znaczy minmax(auto, 1fr), a "auto" jako minimum nie pozwala
* kolumnie zejsc ponizej min-content zawartosci. Boisko ze skladem ma
* min-content 620 px, wiec kolumna trzymala 620 px w kontenerze 358 px:
* prawa koszulka wychodzila poza ekran, a cala strona meczu rozjezdzala
* sie o 246 px w bok (Safari na iPhonie pozwala to przesunac palcem mimo
* html{overflow-x:hidden}). Zerowe minimum pozwala kolumnie sie zwezic,
* a koszulki sa juz zmniejszone w bloku @media ponizej.
*/
.ksk-pary { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 560px) {
.ksk { min-height: 400px; padding: 14px 2px 12px; }
.ksk__gracz { width: 58px; gap: 3px; }
.ksk__koszulka { width: 42px; }
.ksk__nr { font-size: 15px; }
.ksk__nazwisko { font-size: 10px; letter-spacing: .02em; }
.ksk__kolo { width: 92px; height: 92px; }
.ksk__znaczki { right: -7px; font-size: 11px; }
}
.mt__live {
display: inline-flex; align-items: center; gap: 7px;
margin-top: 8px; font-size: 13px; font-weight: 800; letter-spacing: .12em;
color: #ff8a80;
}
/* Dzwonek powiadomien — ukryty, dopoki skrypt nie sprawdzi, czy dzialaja. */
.push-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px; border-radius: 999px; cursor: pointer;
font: inherit; font-weight: 700; font-size: 14px;
color: #12692f; background: transparent;
border: 1.5px solid rgba(23, 128, 58, .45);
}
.push-btn:hover:not(:disabled) { background: rgba(23, 128, 58, .1); }
.push-btn:disabled { opacity: .55; cursor: not-allowed; }
.push-btn.is-wlaczone { background: #17803a; border-color: #17803a; color: #fff; }
/* Na ciemnym tle (stopka, sekcje z zielenia) ten sam przycisk musi zbielec. */
.footer .push-btn, .sekcja--ciemna .push-btn {
color: #fff; border-color: rgba(255, 255, 255, .3);
}
.footer .push-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }
/* Zachęta do powiadomień na stronie głównej - czysta, wyśrodkowana sekcja. */
.push-cta { padding: 40px 0; background: var(--paper); }
.push-cta__box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.push-cta__tytul { margin: 0; font-family: var(--font-display); font-weight: 800;
text-transform: uppercase; letter-spacing: .01em; font-size: clamp(20px, 3vw, 28px); color: var(--ink); }
.push-cta__opis { margin: 0; max-width: 52ch; color: var(--muted); font-size: 15px; line-height: 1.5; }
/*
* Ilustracje we wpisach.
*
* Przegladarka daje wlasny margines 0 40px, przez co zrzuty
* ekranu byly wciete wzgledem akapitow i wygladaly na wklejone przypadkiem.
*/
.page-body figure { margin: 28px 0; }
.page-body figure img {
display: block; width: 100%; height: auto;
border-radius: 10px; border: 1px solid rgba(0, 0, 0, .1);
}
.page-body figcaption {
margin-top: 9px;
font-size: 14px; line-height: 1.5; color: #5c6b62;
}
/* Caly wiersz terminarza jest linkiem — nakladka nad trescia, zeby nie
zaburzac siatki kolumn i nie zagniezdzac linkow w linkach. */
.rmatch { position: relative; }
.rmatch__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.rmatch__link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.rmatch:hover { background: rgba(23, 128, 58, .06); }
/* ---------- 90. Siatka sponsorow: jeden rozmiar dla kazdego znaku ---------- */
/*
* Logotypy maja skrajnie rozne proporcje — od plaskiego napisu 199x24 po
* kwadratowy herb. Samo ograniczenie wysokosci sprawialo, ze szerokie
* napisy zajmowaly caly kafelek, a kwadratowe znaki gubily sie obok nich.
* Kazdy dostaje wiec identyczne pole i miesci sie w nim w calosci.
*/
.sp-thumb__logo {
height: 76px;
width: 100%;
max-width: 150px;
margin: 0 auto;
display: grid; place-items: center;
overflow: hidden; /* zaden znak nie wyjdzie na podpis */
}
/*
* Wartosci w pikselach, nie w procentach: max-height:100% liczylo sie tu
* wzgledem obszaru siatki, a nie wysokosci pola, i logotypy urosly do 163 px
* zamiast zmiescic sie w 76.
*/
.sp-thumb__logo img {
max-height: 76px; max-width: 150px;
width: auto; height: auto;
object-fit: contain;
}
.sp-thumb { justify-content: space-between; min-height: 168px; }
/* Kolory zostaja — to maja byc te same znaki co w tasmie na stronie glownej.
Prototypowe odbarwienie do szarosci sprawialo, ze wygladaly na inne. */
.sp-thumb__logo img { filter: none; }
.sp-thumb__name { display: block; }
/* ---------- 91. Akademia: baner, oferta, wybor rocznika ---------- */
/* Baner naboru na tym samym zdjeciu co kafel akademii na stronie glownej. */
.nabor {
/*
* Najciemniej pod haslem, ale i po prawej musi zostac na tyle ciemno,
* zeby liczby czytaly sie na jasnym niebie ze zdjecia.
*/
background-image: linear-gradient(90deg, rgba(6,20,12,.95) 0%, rgba(6,20,12,.82) 38%,
rgba(6,20,12,.66) 68%, rgba(6,20,12,.6) 100%), var(--nabor-foto);
background-size: cover;
background-position: center 30%;
}
/*
* Warstwa dekoracyjna z prototypu (mocna zielona poswiata + prazki) kladla
* sie NA zdjeciu i calkowicie je zakrywala. Zostaja same prazki, ledwo
* widoczne — zdjecie ma byc tlem, a nie domyslem.
*/
.nabor::before {
background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 9px);
}
/* Oferta: ikona i zdanie w wierszu zamiast siedmiu kafli z ramkami. */
.szk-lista {
list-style: none; margin: 10px 0 0; padding: 0;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 34px;
}
.szk-lista li { display: flex; align-items: center; gap: 12px; line-height: 1.4; }
.szk-lista img { width: 28px; height: 28px; flex: 0 0 auto; object-fit: contain; }
@media (max-width: 760px) { .szk-lista { grid-template-columns: 1fr; } }
/* Wybor rocznika — przyciski zamiast trzynastu kafli naraz. */
.grupy__wybor {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 18px 0 22px;
}
.grupy__btn {
font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
padding: 9px 16px; border-radius: 999px;
color: var(--ink); background: #fff;
border: 1.5px solid rgba(20, 24, 26, .16);
}
.grupy__btn:hover { border-color: var(--green); }
.grupy__btn.is-wybrana { background: var(--green); border-color: var(--green); color: #fff; }
.grupy__btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.grupy__panele .grupa-k { max-width: 560px; }
/* ---------- 92. Wisloka Socios: porownanie pakietow ---------- */
/*
* Piec pakietow rozni sie kilkoma pozycjami, wiec pieć list jedna pod druga
* kazalo czytelnikowi porownywac je z pamieci. Tabela pokazuje roznice
* w jednym rzucie oka; na waskim ekranie przewija sie w poziomie, bo
* scisniecie piaciu kolumn zrobiloby z niej nieczytelna kratke.
*/
.soc { margin: 22px 0 8px; }
.soc__przewijanie { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.soc__tabela {
width: 100%; min-width: 720px;
border-collapse: collapse;
font-size: 15px;
}
.soc__tabela th, .soc__tabela td {
padding: 12px 14px;
border-bottom: 1px solid rgba(20, 24, 26, .1);
text-align: center;
}
.soc__tabela thead th { border-bottom-width: 2px; vertical-align: bottom; }
.soc__tabela tbody th {
text-align: left; font-weight: 600; color: var(--ink);
min-width: 240px;
}
.soc__tabela tbody tr:hover { background: rgba(23, 128, 58, .05); }
.soc__nazwa {
display: block;
font-family: var(--font-display); font-weight: 700;
text-transform: uppercase; letter-spacing: .06em; font-size: 15px;
}
.soc__cena { display: block; margin-top: 4px; font-weight: 700; color: var(--green-tekst); }
.soc__cena small { font-weight: 400; color: var(--muted); margin-left: 4px; }
.soc-tak { color: #12692f; font-weight: 800; font-size: 18px; }
.soc-nie { color: rgba(20, 24, 26, .28); }
.soc-ile { font-weight: 700; color: var(--ink); white-space: nowrap; }
.soc__uwaga { margin-top: 12px; font-size: 14px; color: var(--muted); }
/* Ostatnia kolumna to najwyzszy pakiet — delikatnie go wyrozniamy. */
.soc__tabela th:last-child, .soc__tabela td:last-child { background: rgba(23, 128, 58, .06); }
/* ---------- 93. Kolor wyniku: jedna zasada w calym serwisie ---------- */
/*
* Zielony zwyciestwo, zolty remis, czerwony porazka — zawsze z punktu
* widzenia Wisloki. Dwa zestawy odcieni, bo te same liczby stoja raz na
* ciemnym panelu w hero, a raz na kremowym papierze slajdu.
*/
.wynik-w { color: #7ce8a8; }
.wynik-r { color: #f2cf5b; }
.wynik-p { color: #ff8a80; }
/*
* Na jasnym tle potrzebne sa ciemniejsze odcienie — jasna zielen na kremie
* praktycznie znika. Selektory musza byc mocniejsze niz „.slide--mecz
* .torn__sub b”, ktore z zalozenia zazielenialo kazdy wynik na papierze.
*/
.slide--torn .torn__sub b.wynik-w, .paper .wynik-w, .page-body .wynik-w { color: #12692f; }
.slide--torn .torn__sub b.wynik-r, .paper .wynik-r, .page-body .wynik-r { color: #a8801a; }
.slide--torn .torn__sub b.wynik-p, .paper .wynik-p, .page-body .wynik-p { color: #b3261e; }
/* Dymek kalendarza lezy na bialym tle — ciemniejsze odcienie. */
.kp__w.wynik-w { color: #12692f; }
.kp__w.wynik-r { color: #a8801a; }
.kp__w.wynik-p { color: #b3261e; }
/* Terminarz stoi na jasnym papierze — tam tez ciemniejsze odcienie. */
.rmatch .wynik-w { color: #12692f; }
.rmatch .wynik-r { color: #a8801a; }
.rmatch .wynik-p { color: #b3261e; }
/* Slajd ze zdjeciem na calym tle jest ciemny — tam wracaja jasne odcienie. */
.is-foto-pelne .torn__sub b.wynik-w { color: #7ce8a8; }
.is-foto-pelne .torn__sub b.wynik-r { color: #f2cf5b; }
.is-foto-pelne .torn__sub b.wynik-p { color: #ff8a80; }
/* ---------- 94. Sponsorzy na stronie glownej: rowne kafle ---------- */
/*
* Same logotypy roznia sie proporcjami tak mocno (plaski napis 284x34 obok
* kwadratowego lockupu), ze ustawione luzem zawsze beda wygladac na rozne.
* Kladziemy je wiec na IDENTYCZNYCH bialych kaflach — tak jak na podstronie
* sponsorow — i to kafel niesie regularnosc, a nie sam znak.
*/
.spgrid__i {
width: 168px;
padding: 16px 14px 12px;
background: #fff;
border: 1px solid rgba(20, 24, 26, .1);
border-radius: 8px;
gap: 12px;
transition: border-color .2s ease, box-shadow .2s ease;
}
.spgrid__i:hover { border-color: var(--green); box-shadow: 0 6px 18px rgba(6, 20, 12, .1); }
.spgrid__logo { height: 60px; }
.spgrid__logo img { max-height: 60px; }
/* Sponsorzy glowni: ten sam kafel, tylko wiekszy. */
.spgrid--glowny .spgrid__i { width: 210px; padding: 20px 18px 14px; }
.spgrid--glowny .spgrid__logo { height: 78px; }
.spgrid--glowny .spgrid__logo img { max-height: 78px; }
@media (max-width: 600px) {
.spgrid__i { width: 132px; padding: 12px 10px 10px; }
.spgrid__logo, .spgrid__logo img { height: auto; max-height: 46px; }
.spgrid--glowny .spgrid__i { width: 156px; }
.spgrid--glowny .spgrid__logo, .spgrid--glowny .spgrid__logo img { max-height: 58px; }
}
/* ---------- 95. Wpis: jedna kolumna zamiast tekstu przyklejonego do lewej ---------- */
/*
* Prototypowe .history-page dawalo 52 px u gory — razem z odstepem hero
* robila sie z tego pusta wstega miedzy naglowkiem strony a zdjeciem.
* Wpis ma zaczynac sie od razu pod hero.
*/
.history-page.single-post { padding-top: 20px; }
/*
* Kontener wpisu mial 1500 px, a same akapity 78 znakow — tekst wisial
* przy lewej krawedzi, a dwie trzecie ekranu zostawaly puste. Artykul
* czyta sie w jednej kolumnie, wiec ZWEZAMY CALY kontener i stawiamy go
* na srodku: zdjecia, galeria i przycisk powrotu trzymaja te sama os.
*/
.single-post > .wrap { max-width: 920px; }
/* W wezszym kontenerze osobna miara dla akapitow nie ma juz sensu —
zostawialaby kolejny pusty margines w srodku kolumny. */
.single-post .page-body > p,
.single-post .page-body > ul,
.single-post .page-body > ol,
.single-post .page-body > blockquote { max-width: none; }
/* Zdjecie wyrozniajace na pelna szerokosc kolumny, nie na sztywne 880 px. */
.single-post__cover { width: 100%; }
.single-post__cover img { width: 100%; height: auto; display: block; }
/* ---------- 97. Pas sponsorow przyklejony do dolu okna ---------- */
/*
* Jeden pas na cala strone, zawsze w polu widzenia. Wczesniej sponsorzy
* jechali w hero (tylko strona glowna) albo nad stopka (dopiero po
* przewinieciu na sam dol) — czyli na wiekszosci podstron nie widzial ich
* nikt, kto nie doscrollowal do konca.
*/
:root { --tasma-h: 58px; }
.hero-tasma--przyklejona {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 60;
width: 100%;
height: var(--tasma-h);
border-radius: 0;
border-top: 1px solid rgba(20, 24, 26, .12);
box-shadow: 0 -6px 20px rgba(6, 20, 12, .18);
/*
* Zerujemy wszystko, co pas dziedziczy po wersji z hero: tam byl
* elementem flexa obok strzalek slidera i mial margines 18 px z lewej,
* przez ktory pasek zaczynal sie za krawedzia okna i tyle samo wystawal
* poza prawa. Przyklejony pas idzie od krawedzi do krawedzi.
*/
margin: 0;
flex: none;
max-width: none;
}
/* Miejsce pod pasem, zeby nie zaslanial konca stopki. */
body { padding-bottom: var(--tasma-h); }
/* Studio nakladki i sam kadr nagrania — tam pas bylby na nagraniu. */
body.studio, body.czysto { padding-bottom: 0; }
body.studio .hero-tasma--przyklejona,
body.czysto .hero-tasma--przyklejona { display: none; }
/* Pasek z licznikiem najblizszego meczu siedzi tuz nad taśma. */
.mecz-pasek { margin-bottom: 0; }
@media (max-width: 760px) {
:root { --tasma-h: 48px; }
}
/* ---------- 98. Sponsorzy glowni pod tabela w hero ---------- */
/*
* Dwa w rzedzie, na bialych kaflach, w kolumnie z wynikami i tabela.
* Wieksze niz w jadacym pasie na dole, bo to czolowka sponsorow i ma byc
* czytelna bez wpatrywania sie.
*/
.hero__sponsorzy {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 2px;
}
.hero__sponsorzy a {
display: grid; place-items: center;
height: 62px; padding: 10px 14px;
background: #fff; border-radius: 10px;
border: 1px solid rgba(0, 0, 0, .1);
transition: border-color .18s ease;
}
.hero__sponsorzy a:hover { border-color: var(--leaf); }
.hero__sponsorzy img {
max-height: 42px; max-width: 100%;
width: auto; object-fit: contain; display: block;
}
@media (max-width: 1040px) {
.hero__sponsorzy a { height: 54px; }
.hero__sponsorzy img { max-height: 36px; }
}
/* ---------- 99. Miniatury zamiast kropek pod sliderem ---------- */
/*
* Kropka niosla jedna informacje: ktory slajd jest teraz. Miniatura mowi,
* CO jest na kazdym z pozostalych — zdjecie wpisu albo herb rywala przy
* meczu. Aktywna dostaje pelne krycie i zielona ramke.
*/
.slider__dots { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero__main .hero__nav .dot--mini,
.dot--mini {
position: relative;
width: 74px; height: 46px;
padding: 0; border: 2px solid transparent; border-radius: 7px;
/* overflow VISIBLE — chmurka z tytulem musi wyjsc poza kafelek;
zaokraglenie przenosimy na sam obrazek. */
overflow: visible;
cursor: pointer;
background: rgba(6, 20, 12, .55);
/*
* Przygaszenie siedzi na OBRAZKU, nie na przycisku: opacity rodzica
* dotyczy takze chmurki z tytulem i ta wychodzila wyblakla.
*/
transition: border-color .18s ease, transform .18s ease;
}
.dot--mini img { opacity: .62; transition: opacity .18s ease; }
.dot--mini:hover img,
.dot--mini.is-active img { opacity: 1; }
/*
* Prototypowa kropka rysuje sie w ::before — przy miniaturze wisiala nad
* zdjeciem jako szary punkt. Selektor musi byc mocniejszy niz
* „.hero__main .hero__nav .dot::before” z hero.css, ktore ustawia
* jej rozmiar i tlo.
*/
.hero__main .hero__nav .dot--mini::before,
.dot--mini::before { display: none; }
.hero__main .hero__nav .dot--mini.is-active::before { display: none; }
.dot--mini img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 5px; }
/* Stany tez z prefiksem — inaczej „.hero__main .hero__nav .dot--mini”
wygrywa z krotszym „.dot--mini.is-active” i aktywna niczym sie nie rozni. */
.hero__main .hero__nav .dot--mini:hover,
.dot--mini:hover { transform: translateY(-2px); }
.hero__main .hero__nav .dot--mini.is-active,
.dot--mini.is-active { border-color: var(--leaf); }
.hero__main .hero__nav .dot--mini:focus-visible,
.dot--mini:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
/* Herb rywala nie moze byc kadrowany „na wypelnienie” — ma byc caly. */
.dot--herb img { object-fit: contain; padding: 6px; }
@media (max-width: 1040px) {
.hero__main .hero__nav .dot--mini,
.dot--mini { width: 58px; height: 38px; }
}
@media (max-width: 700px) {
/* na telefonie szesc miniatur nie miesci sie w rzedzie — wracaja kropki */
.hero__main .hero__nav .dot--mini,
.dot--mini { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.45); border-width: 0; }
.dot--mini img { display: none; }
.dot--mini.is-active { background: var(--leaf); border-color: transparent; }
}
/* ---------- 100. Naglowek: wieksze znaki klubu i ligi ---------- */
/*
* Herb i lockup ligi byly najmniejszymi elementami paska, choc to one
* mowia, czyja to strona i w jakiej lidze gra klub. Herb rosnie o polowe,
* plakietka ligi o jedna trzecia; po przewinieciu oba maleja jak dotad,
* zeby pasek nie zabieral ekranu.
*/
.site-header__logo img { width: 104px; height: 104px; }
.site-header.is-scrolled .site-header__logo img { width: 68px; height: 68px; }
.site-header__right .sh-league {
text-decoration: none;
transition: opacity .18s ease;
}
.site-header__right .sh-league:hover { opacity: .78; }
.site-header__right .sh-league__img { height: 48px; }
.site-header.is-scrolled .site-header__right .sh-league__img { height: 38px; }
@media (max-width: 1200px) {
.site-header__logo img { width: 84px; height: 84px; }
.site-header__right .sh-league__img { height: 40px; }
}
/* Pas jest wyzszy (58 px), wiec i logotypy moga byc wieksze — przy 20 px
ginely w bialym polu i caly pas wygladal na pusty.
Wyjatek dla kwadratowego lockupu ligi zniknal: mnoznik `--ht-s` sam
podnosi go do tych samych 44 px, ktore wpisywalismy tu recznie. */
.hero-tasma--przyklejona .ht img { height: calc(37px * var(--ht-s, 1)); max-width: 235px; }
@media (max-width: 760px) {
.hero-tasma--przyklejona .ht img { height: calc(30px * var(--ht-s, 1)); max-width: 185px; }
}
/*
* Chmurka z tytulem slajdu. Natywny title czeka sekunde i wyglada jak
* systemowy dymek — tu tytul pojawia sie od razu, nad miniatura, i znika
* razem z kursorem. Sam dymek nie lapie myszy, wiec nie miga przy przejsciu
* miedzy kafelkami.
*/
.dot--mini::after {
content: attr(data-tytul);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(4px);
z-index: 5;
max-width: 260px; width: max-content;
padding: 7px 11px;
background: #0b1a11;
color: #fff;
border: 1px solid rgba(124, 232, 168, .35);
border-radius: 6px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
font-size: 12px; font-weight: 600; line-height: 1.35;
text-align: center;
white-space: normal;
opacity: 0; visibility: hidden;
pointer-events: none;
transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.dot--mini:hover::after,
.dot--mini:focus-visible::after {
opacity: 1; visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* Skrajne kafelki: chmurka nie moze wyjsc poza kolumne hero. */
.dot--mini:first-child::after { left: 0; transform: translateX(0) translateY(4px); }
.dot--mini:first-child:hover::after { transform: translateX(0) translateY(0); }
@media (max-width: 700px) {
.dot--mini::after { display: none; } /* na dotyku nie ma najechania */
}
/*
* Rzad z nawigacja slidera musi byc POZYCJONOWANY.
*
* Mial juz z-index: 6, ale przy position: static ta wartosc nic nie znaczy —
* a slajdy (position: relative) malowaly sie nad nim. Efekt widac bylo
* dopiero przy chmurce z tytulem: wychodzila ponad kafelek i znikala
* pod warstwa slajdu.
*/
.hero__nav { position: relative; z-index: 6; }
/* ---------- 101. Slajd meczu: zdjęcie stadionu ---------- */
/*
* Zdjęcie wypełnia PRAWĄ część kartki i wtapia się w papier — po lewej
* zostaje jasne pole na nazwy drużyn i termin, po prawej widać, dokąd
* kibic ma przyjść. Herby leżą na zdjęciu, tak jak na plakatach meczowych.
*
* Ten sam kadr obsługuje trzy przypadki: Park Arenę przy meczu u siebie,
* obiekt gospodarza przy wyjeździe i zdjęcie wyróżnione wpisu, gdy redakcja
* wrzuci własne po meczu. Jedno kadrowanie, więc zapowiedź i relacja
* wyglądają jak jedna rodzina kartek.
*/
.torn__foto--stadion {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center 62%;
/* miękka krawędź od lewej — zdjęcie wychodzi z papieru, nie jest na nim naklejone */
-webkit-mask-image: linear-gradient(to right, transparent 40%, #000 66%);
mask-image: linear-gradient(to right, transparent 40%, #000 66%);
}
/*
* Kolumna tekstu węższa niż przy zwykłym slajdzie meczowym: nazwy drużyn
* wchodziły na zdjęcie i „DĘBICA” czytało się na tle trybuny. Teraz tekst
* kończy się, zanim zacznie się fotografia.
*/
.slide--mecz-foto .torn__inner { width: 44%; }
.slide--mecz-foto .torn__title--mecz { font-size: clamp(24px, 3.5cqw, 52px); }
/* Przyciemnienie tylko pod herbami, żeby białe i jasne herby nie ginęły. */
.torn__zaslona--stadion {
position: absolute; inset: 0;
background: linear-gradient(to right,
rgba(239, 236, 228, 0) 46%,
rgba(6, 20, 12, .34) 72%,
rgba(6, 20, 12, .52) 100%);
}
/* Herby na zdjęciu potrzebują cienia, inaczej zlewają się z trybuną. */
.slide--mecz-foto .torn__herby .herb img { filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .75)); }
.slide--mecz-foto .torn__vs { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
@media (max-width: 1040px) {
/* Na węższej kartce zdjęcie schodzi bardziej w prawo, żeby nie wchodzić pod tekst. */
.torn__foto--stadion {
-webkit-mask-image: linear-gradient(to right, transparent 48%, #000 74%);
mask-image: linear-gradient(to right, transparent 48%, #000 74%);
}
.slide--mecz-foto .torn__inner { width: 48%; }
}
@media (max-width: 700px) {
/*
* Na telefonie zdjecie NIE znika — obraca sie o cwierc obrotu.
* Na duzym ekranie tekst stoi z lewej, a stadion wypelnia prawa czesc
* kartki; na waskim ekranie tekst idzie na gore, a zdjecie zajmuje dol,
* dokladnie tam, gdzie leza herby. Zasada zostaje ta sama: kartka mowi
* kto z kim, a zdjecie DOKAD przyjsc.
*/
.torn__foto--stadion {
-webkit-mask-image: linear-gradient(to bottom, transparent 56%, #000 80%);
mask-image: linear-gradient(to bottom, transparent 56%, #000 80%);
/*
* Kadr przesuniety w gore: nad trybuna jest ciemne niebo i to na nim
* maja lezec herby oraz nazwy druzyn. Przy srodku kadru nazwa naszej
* druzyny — pisana klubowa zielenia — ladowala na jasnym dymie.
*/
object-position: center 30%;
}
.torn__zaslona--stadion {
background: linear-gradient(to bottom,
rgba(239, 236, 228, 0) 58%,
rgba(6, 20, 12, .40) 78%,
rgba(6, 20, 12, .62) 100%);
}
/* Kolumna tekstu z desktopu (44%) na telefonie dusilaby nazwy druzyn. */
.slide--mecz-foto .torn__inner { width: auto; }
/* Herby leza juz na zdjeciu — cien odkleja je od trybuny. */
.slide--mecz-foto .torn__herby .herb img { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .8)); }
}
/* ---------- 102. Nawigacja slidera: para herbow przy meczu ---------- */
/*
* Kafelek meczu niosl herb rywala i wygladal jak kafelek zwyklego wpisu
* o tym klubie. Dwa herby obok siebie czyta sie od razu jako spotkanie.
* Herby maja ciemne konturty i granatowe pola, wiec podkladka jest JASNA —
* na dotychczasowym ciemnym tle znikaly kontury.
*/
.hero__main .hero__nav .dot--herb,
.dot--herb {
background: rgba(255, 255, 255, .86);
}
.hero__main .hero__nav .dot--herby,
.dot--herby {
width: 96px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 5px 7px;
}
/* Bez tego dwa obrazki dziedzicza „width:100%” z .dot--mini img i drugi
wypada poza kafelek. */
.dot--herby img {
width: auto;
height: 100%;
flex: 1 1 0;
min-width: 0;
padding: 0;
object-fit: contain;
border-radius: 0;
}
/* Na jasnej podkladce krycie .62 robi z herbu plame — wystarczy lekkie
przygaszenie, zeby aktywny nadal sie wyroznial. */
.dot--herb img { opacity: .8; }
.dot--herb:hover img,
.dot--herb.is-active img { opacity: 1; }
.hero__main .hero__nav .dot--herb.is-active,
.dot--herb.is-active { background: #fff; }
@media (max-width: 1040px) {
.hero__main .hero__nav .dot--herby,
.dot--herby { width: 76px; padding: 4px 5px; gap: 3px; }
}
@media (max-width: 700px) {
/* Telefon wraca do kropek — te reguly stoja PO bloku 700px z sekcji 99,
wiec bez powtorzenia szerokosc 96px wygrywalaby z kropka. */
.hero__main .hero__nav .dot--herby,
.dot--herby { width: 12px; height: 12px; padding: 0; gap: 0; }
.hero__main .hero__nav .dot--herb,
.dot--herb { background: rgba(255,255,255,.45); }
.hero__main .hero__nav .dot--herb.is-active,
.dot--herb.is-active { background: var(--leaf); }
.dot--herby img { display: none; }
}
/* ---------- 103. Kadra: podsumowanie i sztab szkoleniowy ---------- */
/*
* Dwie liczby nad siatką zdjęć — ilu nas jest i w jakim wieku. Z samych
* kafelków nie da się tego odczytać, a to pierwsze pytanie po wejściu
* na kadrę.
*/
/*
* Sekcja kadry stoi na ciemnozielonym tle, wiec podsumowanie musi byc jasne.
* Pierwsza wersja brala kolory tekstu z jasnych podstron i po prostu znikala.
*/
.boisko__podsumowanie {
display: flex; flex-wrap: wrap; gap: 8px 26px;
margin: 0 0 26px; padding-bottom: 18px;
border-bottom: 1px solid rgba(255, 255, 255, .14);
font-size: var(--fs-drobny); color: rgba(255, 255, 255, .72);
}
/* Liczba stoi teraz PO opisie, wiec odstep tez idzie na druga strone. */
.boisko__podsumowanie b {
font-family: var(--font-display); font-size: 20px; color: #fff;
margin: 0 5px;
}
/*
* Kafelek sztabu jest tym samym kafelkiem co zawodnika — rozni sie tylko
* tym, ze zamiast bilansu meczow niesie funkcje, a zamiast zdjecia bywa
* jeszcze para inicjalow.
*/
.bz--sztab { display: block; }
.bz--sztab .bz__staty { color: rgba(255, 255, 255, .78); }
.bz__inicjaly {
position: absolute; inset: 0;
display: grid; place-items: center;
font-family: var(--font-display); font-weight: 700;
font-size: 34px; letter-spacing: .04em;
color: rgba(255, 255, 255, .34);
background: rgba(255, 255, 255, .05);
}
/* Bez odsylacza kafelek nie udaje klikalnego. */
span.bz--sztab { cursor: default; }
/* ---------- 104. Tabela ligowa na telefonie ---------- */
/*
* Na telefonie tabela miała 455 px w oknie o szerokości 356 — widać było
* „#”, klub i połowę kolumny „Bramki”, a PUNKTY, po które ludzie tu wchodzą,
* leżały poza ekranem i trzeba było się domyślić, że da się przesunąć palcem.
*
* Nazwa klubu może się teraz łamać na dwa wiersze zamiast rozpychać wiersz
* w bok — nic nie ucinamy, a cała tabela mieści się bez przewijania.
*/
@media (max-width: 560px) {
.ltab { font-size: 12px; }
.ltab th, .ltab td { padding: 6px 7px; }
.ltab__club .klub { align-items: flex-start; gap: 6px; }
.ltab__club .klub > span { white-space: normal; line-height: 1.25; }
.ltab__club .klub img { margin-top: 1px; }
.ltab thead th { font-size: 10px; letter-spacing: .06em; }
/* Ta sama wada piętro niżej: w statystykach zawodników „asysty” i kartki
kończyły się za krawędzią ekranu. */
.ztab { font-size: 12px; }
.ztab th, .ztab td { padding: 7px 6px; }
.ztab thead th { font-size: 10px; letter-spacing: .04em; }
.ztab__foto { display: none; }
}
/*
* Statystyk zawodnikow nie da sie zmiescic — szesc kolumn liczb nie wejdzie
* na telefon. Zamiast ucinac dane, pokazujemy, ze tabele da sie przesunac:
* przy krawedzi zostaje cien, ktory znika po przewinieciu do konca. Pasek
* przewijania na iOS jest niewidoczny, wiec bez tego nikt nie wie,
* ze cos tam jeszcze jest.
*/
.ztab__scroll,
.ltab__scroll {
background:
linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 32px 100% no-repeat local,
linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center / 32px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(20,24,26,.18), rgba(20,24,26,0)) left center / 14px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(20,24,26,.18), rgba(20,24,26,0)) right center / 14px 100% no-repeat scroll;
}
/* ---------- 105. Niedostępność zawodnika ---------- */
/*
* Jedno pole przy zawodniku, trzy miejsca na stronie: kafelek w kadrze,
* karta zawodnika i zapowiedź najbliższego meczu. Kolory jak przy wynikach —
* czerwień to kontuzja, żółć to pauza za kartki, bo tak samo czyta się
* kartki w protokole.
*/
.bz--pauza .bz__foto img { filter: grayscale(.75) brightness(.9); }
.bz__status {
position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
z-index: 3; white-space: nowrap;
padding: 2px 8px; border-radius: 999px;
font-family: var(--font-display); font-weight: 600;
font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
color: #fff; background: #b3261e;
box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.bz__status--pauza { background: #a8801a; }
.bz__status--inne { background: #4a4f52; }
.zaw-status {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
margin: 0 0 14px; padding: 10px 14px;
border-left: 4px solid #b3261e; border-radius: 6px;
background: rgba(179, 38, 30, .08);
}
.zaw-status--pauza { border-left-color: #a8801a; background: rgba(168, 128, 26, .1); }
.zaw-status--inne { border-left-color: #4a4f52; background: rgba(74, 79, 82, .09); }
.zaw-status b {
font-family: var(--font-display); font-weight: 600;
text-transform: uppercase; letter-spacing: .08em; font-size: 13px;
}
.zaw-status span { color: var(--muted); font-size: 14px; }
.zap__poza {
margin: 0 0 26px; padding: 16px 18px;
background: #fff; border: 1px solid var(--line-dark); border-radius: 10px;
}
.zap__poza-tytul {
margin: 0 0 10px; font-family: var(--font-body); font-weight: 700;
font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.zap__poza ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.zap__poza li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.zap__poza li a { font-weight: 700; color: var(--ink); text-decoration: none; }
.zap__poza li a:hover { color: var(--green-tekst); text-decoration: underline; }
.zap__poza-powod { font-size: 13px; color: #b3261e; }
.zap__poza-powod--pauza { color: #8a6a15; }
.zap__poza-powod--inne { color: var(--muted); }
/* Jubileusz czyta sie jak dobra wiadomosc, wiec zielen, nie czerwien alarmu. */
.zap__jub {
margin: 0 0 14px; padding: 16px 18px;
background: rgba(23, 128, 58, .07);
border: 1px solid rgba(23, 128, 58, .28); border-radius: 10px;
}
.zap__jub ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.zap__jub li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.zap__jub li a { font-weight: 700; color: var(--ink); text-decoration: none; }
.zap__jub li a:hover { color: var(--green-tekst); text-decoration: underline; }
.zap__jub li span { font-size: 14px; color: var(--green-tekst); }
/* ---------- 106. Strefa VIP na podstronie stadionu ---------- */
.stad__vip { margin-top: 34px; }
.stad__vip-opis { max-width: 62ch; margin: 0 0 18px; }
.stad__vip-foto {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px;
}
.stad__vip-foto img {
width: 100%; height: 100%; aspect-ratio: 3/2;
object-fit: cover; border-radius: 8px; display: block;
}
.stad__vip-cta { margin: 18px 0 0; }
/* ---------- 107. Poprawki na telefonie ---------- */
/*
* Przegląd na 390 px pokazał trzy rodzaje usterek: kafelki wychodzące poza
* ekran, elementy dotykowe mniejsze od opuszka palca i strzałki przyklejone
* do samej krawędzi. Wszystko poniżej naprawia je bez ruszania desktopu.
*/
/*
* Siatka sponsorów rozpychała się o 18 px i prawa kolumna była ucięta przy
* krawędzi. „1fr” nie zmniejszy kolumny poniżej jej zawartości, a kafelek
* ma sztywne 150 px na logo plus marginesy — dopiero minmax(0, …) pozwala
* mu się zwęzić.
*/
@media (max-width: 620px) {
.sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-thumb { min-width: 0; padding: 18px 10px; }
.sp-thumb__logo { max-width: 100%; }
.sp-thumb__name { font-size: 12px; overflow-wrap: anywhere; }
}
@media (max-width: 700px) {
/* Strzałki slidera dotykały krawędzi ekranu — wyglądały na ucięte. */
.hero__main .hero__nav { padding-left: 14px; padding-right: 14px; }
/*
* Cele dotykowe. Wartości poniżej biorą się z pomiaru: hamburger miał
* 30×28, strzałki kalendarza 22×22, kropki slidera 12×12. Powiększamy
* OBSZAR KLIKANIA, a nie rysunek — inaczej rozjechałby się układ.
*/
.hamburger { padding: 14px 10px; margin: -14px -10px; }
.menu-group__plus { min-width: 40px; min-height: 40px; }
.kal__strzalka { min-width: 40px; min-height: 40px; font-size: 20px; }
/*
* Kropki slidera mialy 12 px razem z polem klikania — trzeba bylo celowac.
* Przycisk rosnie do 34 px i staje sie przezroczysty, a widoczna kropka
* przenosi sie do ::before, wiec RYSUNEK zostaje 12-pikselowy.
*
* Nakladka ::after tu nie dziala: kafelki maja „overflow: hidden”
* (potrzebne, zeby przycinac miniatury), wiec cokolwiek wystaje poza
* przycisk, jest obcinane razem z polem klikania.
*/
/*
* Slajd bez miniatury zostaje kropka, ale w polu 34 px — rzad nie skacze,
* a palcem da sie trafic. Regula stoi PRZED kafelkami, bo „.dot” i
* „.dot--mini” maja te sama szczegolowosc i decyduje kolejnosc w pliku.
*/
.hero__main .hero__nav .dot {
width: 30px; height: 30px; flex: 0 0 auto;
background: none; border-width: 0; overflow: visible;
display: grid; place-items: center;
}
.hero__main .hero__nav .dot::before { width: 12px; height: 12px; border-radius: 50%; }
.hero__main .hero__nav .dot.is-active::before {
width: 12px; border-radius: 50%; background: var(--leaf);
}
/*
* Miniatury wracaja na telefon. Kropki mowily tylko „jest piec slajdow”,
* a kafelek od razu pokazuje, co na nim jest — przy meczu pare herbow.
* Przy pieciu slajdach rzad ma ok. 316 px i miesci sie bez przewijania.
*/
.hero__main .hero__nav { min-height: 40px; align-items: center; }
/*
* Rzad kafelkow ma do dyspozycji 274 px miedzy strzalkami, wiec rozmiary
* sa dobrane tak, zeby piec miniatur zmiescilo sie w jednej linii.
* Gdyby slajdow bylo wiecej, rzad przewija sie w bok zamiast lamac.
*/
.hero__main .hero__nav .slider__dots,
.slider__dots {
flex-wrap: nowrap; gap: 5px;
overflow-x: auto; scrollbar-width: none;
}
.slider__dots::-webkit-scrollbar { display: none; }
/*
* Gdy kafelki nie miesza sie w jednej linii, rzad urywal sie w polowie
* ostatniego i wygladalo to na blad. Miekkie zejscie przy prawej
* krawedzi mowi „jest tego wiecej, przewin”.
*/
.hero__main .hero__nav .slider__dots,
.slider__dots {
-webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%);
mask-image: linear-gradient(to right, #000 86%, transparent 100%);
}
.hero__main .hero__nav .dot--mini,
.dot--mini {
width: 44px; height: 30px; border-radius: 5px;
background: rgba(255, 255, 255, .10);
border-width: 1px; flex: 0 0 auto;
}
.hero__main .hero__nav .dot--mini img,
.dot--mini img { display: block; }
.hero__main .hero__nav .dot--mini::before,
.hero__main .hero__nav .dot--mini.is-active::before { display: none; }
.hero__main .hero__nav .dot--mini.is-active,
.dot--mini.is-active { background: rgba(255, 255, 255, .10); }
/*
* Para herbow potrzebuje wiecej miejsca w poziomie niz jedno zdjecie.
* Uklad musi byc jawnie flexowy: kafelki dziedzicza „display: grid”
* po zwyklej kropce i bez tego oba herby ustawialy sie jeden pod drugim,
* wychodzac poza kafelek.
*/
.hero__main .hero__nav .dot--herby,
.dot--herby {
width: 58px; padding: 3px 4px; gap: 3px;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .86);
}
.hero__main .hero__nav .dot--herby img,
.dot--herby img {
display: block; width: auto; height: 100%;
flex: 1 1 0; min-width: 0; object-fit: contain; padding: 0;
}
/* Pojedynczy herb (brak herbu rywala) tez na jasnym tle. */
.hero__main .hero__nav .dot--herb,
.dot--herb { background: rgba(255, 255, 255, .86); }
.hero__main .hero__nav .dot--herb.is-active,
.dot--herb.is-active { background: #fff; }
/* „Pełna ›” i podobne odsyłacze miały 19 px wysokości. */
.mcard__more { display: inline-block; padding: 7px 0; }
/* Taśma sponsorów w nagłówku: logotypy bywały wysokie na 24 px. */
.ht { min-height: 34px; display: inline-flex; align-items: center; }
}
/*
* Sekcja kadry na stronie głównej miała 48 px odstępu u góry i 64 u dołu
* — do tego dochodziło 26 px samej sekcji, więc na telefonie pod kartami
* zawodników zostawał pas pustej zieleni wysoki na jedną trzecią ekranu.
*/
@media (max-width: 700px) {
.roster { padding-top: 10px; padding-bottom: 18px; }
/* Ostatnie za male cele: okruszki i nazwiska w tabeli statystyk. */
.okruszki a { display: inline-block; padding: 6px 0; }
.ztab__kto a { display: inline-block; padding: 5px 0; }
}
/* Liczba zawodników w linii formacji czytała się jako „1 2” zamiast „12”. */
.boisko__ile { letter-spacing: 0; font-variant-numeric: tabular-nums; }
/* ---------- 108. Dane rejestrowe klubu ---------- */
.oklub__rejestr {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
}
.oklub__podmiot {
background: #fff; border: 1px solid var(--line-dark); border-radius: 8px; padding: 18px 20px;
}
.oklub__podmiot dl { margin: 12px 0 0; display: grid; gap: 8px; }
.oklub__podmiot dl > div { display: flex; gap: 12px; align-items: baseline; }
.oklub__podmiot dt {
flex: 0 0 62px; font-size: var(--fs-drobny); color: var(--muted);
text-transform: uppercase; letter-spacing: .08em;
}
/* Numery rejestrowe przepisuje sie z ekranu — cyfry musza byc rownej szerokosci. */
.oklub__podmiot dd {
margin: 0; font-weight: 600; color: var(--ink);
font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
/* ---------- 109. Kadra na stronie głównej: telefon ---------- */
/*
* Odsyłacz do pełnej kadry w miejscu dawnej etykiety „Nasza kadra”.
*/
.roster__caly {
display: inline-block;
text-decoration: none;
transition: color .18s var(--ease);
}
.roster__caly:hover { color: #fff; }
@media (max-width: 760px) {
/*
* Sekcja siedzi w zielonym pasie, który ma własny odstęp — 48/64 px kadry
* dokładało się do niego i pod kartami zostawał pas pustej zieleni.
*/
.roster { padding-top: 0; padding-bottom: 0; }
/*
* Strzałki schodzą POD karty. Leżąc na kartach zasłaniały plakietki
* z liczbą meczów i minut — czyli dokładnie to, po co się tam patrzy.
*
* Zostają pozycjonowane absolutnie, tylko kotwiczone do DOŁU suwaka:
* przełączenie kontenera na flexa rozciągało karty na całą szerokość
* i karuzela przestawała być karuzelą.
*/
.roster__slider { padding-bottom: 54px; }
.roster__arrow {
top: auto; bottom: 0; transform: none; opacity: 1;
width: 40px; height: 40px; border-radius: 3px;
background: #fff; border: 1.5px solid #fff;
/*
* Zielen z palety globalnej, nie „--leaf”: ta jest zdefiniowana tylko
* na .hero__main, wiec tutaj byla nieznana i strzalka dziedziczyla biel
* — na bialym kwadracie wygladalo to jak pusty przycisk.
*/
color: var(--green, #17803a);
-webkit-backdrop-filter: none; backdrop-filter: none;
}
.roster__arrow svg { stroke: currentColor; }
.roster__arrow:hover { background: #fff; }
.roster__arrow--prev { left: 50%; margin-left: -46px; }
.roster__arrow--next { left: 50%; right: auto; margin-left: 6px; }
}
/* ---------- 110. Menu pełnoekranowe na telefonie ---------- */
/*
* Podstrony działu wchodzą pod jego nagłówek (przenosi je ui.js). Wiersz
* działu musi więc umieć się złamać, a lista dostaje wcięcie, żeby było
* widać, że należy do tego, co nad nią.
*/
@media (max-width: 760px) {
.menu-group-rzad { flex-wrap: wrap; }
.menu-group__pod {
flex: 0 0 100%;
display: flex; flex-direction: column;
margin: 4px 0 10px;
padding-left: 14px;
border-left: 2px solid var(--line-dark);
}
.menu-group__pod .menu-item {
font-size: 14px; padding: 11px 2px;
border-bottom: 1px solid var(--line-soft, rgba(20,24,26,.08));
}
.menu-group__pod .menu-item:last-child { border-bottom: 0; }
/* Pusty pojemnik z desktopu nie ma czego rysować. */
.menu-items:empty { display: none; }
.menu-overlay__inner { padding-top: 92px; gap: 18px; }
}
/* ---------- 111. Mecze na telefonie: przewijane kartki ---------- */
/*
* Rzad niesie CALY sezon, ale na duzym ekranie karta ma pokazywac cztery
* pozycje jak dotad — dwa ostatnie wyniki i dwa najblizsze terminy.
* Reszta jest w markupie i czeka na telefon.
*/
.hero__aside .mmecze .res__row--poza { display: none; }
/* Kolumny hero muszą móc się zwęzić — inaczej szeroka zawartość je rozpycha. */
.hero__main, .hero__aside { min-width: 0; }
/*
* Na dużym ekranie lista meczów to wąskie wiersze w kolumnie obok slidera.
* Na telefonie kolumna robi się pełną szerokością i te same wiersze czytają
* się jak tabelka w Excelu: trzy drobne kolumny i nic, co przyciąga oko.
*
* Zamiast tego każdy mecz staje się kartką w rzędzie przewijanym palcem —
* z etykietą „u siebie / wyjazd”, datą i nazwami jedna pod drugą.
*/
.res__gdzie, .res__kiedy { display: none; }
@media (max-width: 700px) {
.mmecze .res--scroll {
display: flex; gap: 10px;
max-height: none;
overflow-x: auto; overflow-y: visible;
scroll-snap-type: x mandatory;
/*
* Bez ujemnych marginesów: rozpychały kolumnę hero o 34 px, a ta jest
* przycięta przez „overflow: hidden” sekcji — nie było tego widać
* w pomiarze przewijania strony, tylko na zrzucie.
*/
padding-bottom: 6px;
scrollbar-width: none;
}
.mmecze .res--scroll::-webkit-scrollbar { display: none; }
/* Na telefonie caly sezon wchodzi do rzedu. */
.hero__aside .mmecze .res__row--poza { display: grid; }
.hero__aside .mmecze .res__row {
flex: 0 0 78%;
scroll-snap-align: start;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"gdzie gdzie"
"kiedy kiedy"
"gosp wynik"
"gosc wynik";
gap: 5px 10px;
padding: 13px 14px 15px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 10px;
background: rgba(255, 255, 255, .05);
}
.res__gdzie {
grid-area: gdzie; display: inline-block; justify-self: start;
padding: 3px 8px; border-radius: 3px;
background: rgba(255, 255, 255, .16);
font-family: var(--font-display); font-weight: 600;
font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.res__gdzie--dom { background: var(--green, #17803a); }
.res__kiedy {
grid-area: kiedy; display: block;
font-size: var(--fs-drobny); color: var(--muted-jasny);
}
.mmecze .res__side:not(.res__side--r) { grid-area: gosp; }
.mmecze .res__side--r {
grid-area: gosc;
/* w markupie nazwa idzie przed herbem — na kartce herb ma być pierwszy */
flex-direction: row-reverse; justify-content: flex-end;
}
.mmecze .res__n { font-size: 15px; font-weight: 700; white-space: normal; }
.mmecze .res__s {
grid-area: wynik; align-self: center;
padding: 6px 10px; border-radius: 4px;
background: rgba(0, 0, 0, .28);
}
}
/* ---------- 112. Slajdy hero na telefonie: czyste zdjęcie ---------- */
/*
* Na telefonie na zdjęciu nie ma NICZEGO. Ani herbów, ani tytułu, ani
* terminu — napisy walczyły z kadrem i przegrywały: raz siadały na jasnej
* trybunie, raz na twarzach, i każdy slajd wyglądał inaczej.
*
* Cała treść zeszła pod kadr, do stopki: biały pasek z tytułem i zielony
* przycisk obok niego (sekcja 122). Zdjęcie zostaje zdjęciem.
*/
@media (max-width: 700px) {
/* ---- obraz na całą kartkę ---- */
.slide--torn .torn__foto--slajd,
.slide--torn .torn__foto--stadion {
position: absolute; inset: 0;
display: block; width: 100%; height: 100%;
object-fit: cover;
-webkit-mask-image: none; mask-image: none;
}
/* Kadr z panelu „Układ slajdu” — dziewięć pozycji, patrz slajd-uklad.php. */
.slide--torn .torn__foto--slajd,
.slide--torn .torn__foto--stadion { object-position: var(--foto-punkt, center 32%); }
/* Sylwetka i zdjęcie z układu ustępują miejsca — obraz jest już pod spodem. */
.slide--torn .torn__stage,
.slide--torn .torn__foto:not(.torn__foto--slajd):not(.torn__foto--stadion) { display: none; }
/*
* Przyciemnienie było po to, żeby białe napisy miały się od czego odbić.
* Napisów na zdjęciu już nie ma, więc i zasłona nie ma czego bronić.
*/
.slide--torn .torn__zaslona,
.slide--torn .torn__zaslona--slajd,
.slide--torn .torn__zaslona--stadion { display: none; }
/* ---- wszystko, co stało na zdjęciu, schodzi ---- */
.slide--torn .torn__herby,
.slide--torn .torn__badge,
.slide--torn .torn__title,
.slide--torn .torn__sub { display: none; }
/*
* Kartka nie musi już mieścić herbów, nazw i terminu — zostaje sam kadr
* ze stopką na dole.
*/
.hero__main { --paper-h: 340px; }
.slide--torn,
.slide--mecz-foto {
display: block; padding: 0;
}
.slide--torn .torn__inner {
position: static; display: block;
width: auto; height: auto; min-height: 0; padding: 0;
}
}
/* ---------- 113. Mecze / Tabela jako zakładki na telefonie ---------- */
/*
* Na dużym ekranie obie karty stoją w kolumnie obok slidera i widać je naraz.
* Na telefonie ta sama kolumna to dwa ekrany przewijania, zanim dojdzie się
* do reszty strony — więc jedna karta na raz, do wyboru.
*/
.aside-taby { display: none; }
@media (max-width: 700px) {
.aside-taby {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
margin-bottom: 12px;
}
.aside-tab {
appearance: none; cursor: pointer;
padding: 11px 8px;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 6px;
background: rgba(255, 255, 255, .05);
color: rgba(255, 255, 255, .7);
font-family: var(--font-display); font-weight: 600;
font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.aside-tab.is-active {
background: #fff; border-color: #fff; color: var(--green-dark, #0d3b1e);
}
.aside-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/*
* Karta musi mieć JAWNĄ szerokość.
*
* Kolumna hero jest flexem bez zawijania, więc szerokość linii bierze się
* z najszerszego elementu — a rząd meczów w trybie „max-content” ma 3180 px.
* Karta rozciągała się do tej linii, przewijanie przestawało działać,
* a jej prawa krawędź uciekała za ekran. Samo „min-width: 0” nie wystarcza:
* ono pozwala się zwęzić, ale nie mówi DO CZEGO.
*/
.hero__aside .mcard { min-width: 0; width: 100%; }
/* Karta poza wybraną zakładką znika razem ze swoim nagłówkiem. */
.hero__aside .mcard.is-schowana { display: none; }
/* Etykieta w karcie powtarzałaby napis z zakładki. */
.hero__aside .mcard .mcard__label { display: none; }
.hero__aside .mcard__head { justify-content: flex-end; }
}
/* ---------- 114. Przewijane rzędy: ciągnięcie myszką ---------- */
/*
* Kursor mówi, że rząd da się złapać. „grabbing” tylko w trakcie —
* inaczej łapka wisi nad wszystkim i myli z odsyłaczem.
*/
.roster__cards, .mmecze .res--scroll, .stod__mini { cursor: grab; }
.is-ciagniety { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.is-ciagniety * { pointer-events: none; }
/* ---------- 115. Wspólny rytm odstępów na telefonie ---------- */
/*
* Sekcje miały 26 px u góry i u dołu, ale bloki WEWNĄTRZ nich dobierały
* odstępy każdy po swojemu: kafle sponsorów przyklejały się do karty meczów
* (2 px), kalendarz kończył się 32 px pod siatką dni, a pasek meczowy miał
* 18 zamiast 26. Jedna wartość dla sekcji, jedna dla bloków w środku.
*/
@media (max-width: 700px) {
.mpasek { padding-top: 26px; padding-bottom: 26px; }
.hero__inner { padding-bottom: 26px; }
.hero__aside {
display: flex; flex-direction: column; gap: 16px;
padding-top: 16px; padding-bottom: 0;
}
/* Odstępy robi teraz „gap” kolumny — własne marginesy tylko by je dublowały. */
.aside-taby { margin-bottom: 0; }
.hero__sponsorzy { margin-top: 0; }
/* Pod siatką dni zostawał jeszcze pas na pasek przewijania. */
.kal__dni { padding-bottom: 0; }
}
/* ---------- 116. Slajdy na desktopie: kartka bez papieru ---------- */
/*
* Jeden układ dla WSZYSTKICH slajdów: wpisów i meczów.
*
* Kartka miała kremowe, papierowe tło. Teraz jest PRZEZROCZYSTA — pod nią
* widać zielone tło hero ze zdjęciem kibiców, a zdjęcie slajdu rozpływa się
* w nim po lewej stronie miękkim przejściem. Rwane krawędzie papieru
* zostają, bo to one trzymają kształt kartki.
*
* Tekst leży więc na ciemnej zieleni hero: biały, z zielenią tam,
* gdzie coś znaczy.
*/
@media (min-width: 701px) {
/* Papier znika — zostaje sama rwana krawędź. */
.slide--torn.ma-foto-slajd .torn,
.slide--mecz-foto .torn { background: transparent; }
.slide--torn.ma-foto-slajd .torn::after,
.slide--mecz-foto .torn::after { display: none; }
/*
* Zdjęcie wypełnia kartkę, ale po lewej rozpływa się do zera — tam,
* gdzie stoi tekst, widać tło sekcji.
*/
.slide--torn.ma-foto-slajd .torn__foto--slajd,
.slide--mecz-foto .torn__foto--stadion {
position: absolute; inset: 0; display: block;
width: 100%; height: 100%; object-fit: cover;
-webkit-mask-image: linear-gradient(to right, transparent 34%, #000 64%);
mask-image: linear-gradient(to right, transparent 34%, #000 64%);
}
.slide--torn.ma-foto-slajd .torn__foto--slajd,
.slide--mecz-foto .torn__foto--stadion { object-position: var(--foto-punkt, center 32%); }
/* Sylwetka i zdjęcie z wariantu ustępują — obraz jest już pod spodem. */
.slide--torn.ma-foto-slajd .torn__stage,
.slide--torn.ma-foto-slajd .torn__foto:not(.torn__foto--slajd),
.slide--torn.ma-foto-slajd .torn__zaslona:not(.torn__zaslona--slajd) { display: none; }
/* Ślad przyciemnienia pod herbami, żeby jasne herby nie ginęły w dymie. */
.slide--torn.ma-foto-slajd .torn__zaslona--slajd,
.slide--mecz-foto .torn__zaslona--stadion {
position: absolute; inset: 0; display: block;
background: linear-gradient(to right,
rgba(6, 20, 12, 0) 40%,
rgba(6, 20, 12, .18) 72%,
rgba(6, 20, 12, .34) 100%);
}
/*
* Jedna skala tytułu dla WSZYSTKICH slajdów.
*
* Stopień bierzemy z kartek meczowych, czyli MNIEJSZY: aktualności miały
* litery dwa razy większe niż mecz i przy przewijaniu slidera tytuł
* skakał z jednego rozmiaru na drugi. Mniejszy wygrywa też dlatego,
* że mieści dłuższy tytuł bez łamania go na cztery wiersze.
*/
.slide--torn .torn__title { font-size: clamp(24px, 3.5cqw, 52px); }
/* Kolumna tekstu zawsze po lewej i zawsze tej samej szerokości. */
.slide--torn.ma-foto-slajd .torn__inner,
.slide--mecz-foto .torn__inner {
width: 52%; align-items: flex-start; text-align: left;
}
/* Tekst na ciemnym tle sekcji: biel, zieleń przy nazwie naszej drużyny. */
.slide--torn.ma-foto-slajd .torn__title,
.slide--torn.ma-foto-slajd .torn__sub,
.slide--mecz-foto .torn__title,
.slide--mecz-foto .torn__sub { color: #fff; }
.slide--torn.ma-foto-slajd .torn__title,
.slide--mecz-foto .torn__title { text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.slide--mecz-foto .torn__sub { text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.slide--mecz-foto .torn__title .is-leaf { color: var(--leaf); }
/* Herby nad zdjęciem — bez papieru pod spodem potrzebują cienia. */
.slide--mecz-foto .torn__herby .herb img { filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .8)); }
}
/* ---------- 117. Kontuzja i pauza przy statystykach ---------- */
/*
* Ta sama informacja co w kadrze i na karcie zawodnika, w miejscach,
* gdzie zawodnik pojawia się z liczbami: karta w karuzeli na stronie
* głównej i tabela statystyk sezonu.
*/
/* Prawy gorny rog: lewa strona nalezy do plakietek ze statystykami,
a dol karty do imienia i nazwiska. */
.pcard__status {
position: absolute; right: 10px; top: 10px; z-index: 3;
padding: 3px 9px; border-radius: 999px;
font-family: var(--font-display); font-weight: 600;
font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
color: #fff; background: #b3261e;
box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.pcard__status--pauza { background: #a8801a; }
.pcard__status--inne { background: #4a4f52; }
.pcard--pauza .pcard__photo img { filter: grayscale(.7) brightness(.92); }
.ztab__status {
display: inline-block; margin-left: 8px;
padding: 2px 7px; border-radius: 3px;
font-weight: 700; font-size: 10px;
letter-spacing: .08em; text-transform: uppercase;
color: #fff; background: #b3261e;
}
.ztab__status--pauza { background: #8a6a15; }
.ztab__status--inne { background: #4a4f52; }
/* ---------- 118. Napisy na ciemnym tle ---------- */
/*
* Zasada: gdziekolwiek tlo jest ciemnozielone albo czarne, napis jest BIALY.
*
* Po ujednoliceniu zieleni akcenty na ciemnych sekcjach (statystyki pod
* nazwiskami w kadrze, pozycja na karcie zawodnika, liczby w bilansie)
* zeszly do kontrastu 2,46:1 i praktycznie znikaly. Zielen zostaje tam,
* gdzie tlo jest jasne — na ciemnym rzadzi biel.
*/
/* ---------- 118b. Pasek social: Instagram bez licznika ---------- */
/*
* Kanał bez wpisanej liczby obserwujących pokazuje nazwę serwisu. Nazwa jest
* dłuższa niż „24 tys.”, więc dostaje mniejszy stopień — inaczej rozpychała
* kafelek i rząd przestawał być równy.
*/
.social__nazwa { font-size: .68em; letter-spacing: .04em; }
/* ---------- 120. Historia klubu: pasy z tekstem i zdjęciem ---------- */
/*
* Dwa rytmy, na przemian — tak jak na dotychczasowej stronie klubu:
*
* .hist-pas--dwie tekst w lewej połowie, zdjęcie wypełnia prawą
* od krawędzi do krawędzi;
* .hist-pas--srodek tekst na środku, zdjęcie leży pod nim jako
* rozjaśnione tło.
*
* Zdjęcia archiwalne pokazujemy W CAŁOŚCI. Wcześniej szły tłem z
* „background-size: cover” i kadr ucinał im głowy — przy zdjęciu pionowym
* (Początek 20 stulecia ma proporcję 0,70) znikała połowa drużyny.
* Teraz to zwykłe ![]()
o naturalnych proporcjach, wyśrodkowane w swojej
* połowie pasa.
*/
.hist-pas { background: var(--paper); }
.hist-pas--dwie {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}
.hist-pas__tresc { padding: 76px clamp(24px, 5vw, 86px); max-width: 720px; justify-self: end; width: 100%; }
.hist-pas__foto { align-self: center; padding: 20px 0; }
/*
* Zdjęcia archiwalne mają po ok. 800 px szerokości. Rozciągnięte na całą
* połowę szerokiego ekranu robiły się miękkie, a pionowe zdjęcie („Początek
* 20 stulecia” ma 797 × 1145) rozpychało pas na półtora tysiąca pikseli.
* Ograniczamy wysokość i nie powiększamy ponad naturalny rozmiar — kadr
* zostaje nietknięty, tylko nie dominuje.
*/
.hist-pas__foto img {
display: block; margin: 0 auto;
width: auto; max-width: 100%; height: auto; max-height: 620px;
}
.hist-pas h2 {
font-family: var(--font-display);
font-size: clamp(30px, 3.6vw, 50px);
line-height: 1.04;
margin: 0 0 22px;
}
.hist-pas p { margin: 0 0 14px; }
.hist-pas__wstep { font-size: 17px; line-height: 1.6; }
/* Kluby: nazwa nad rokiem, dwie kolumny, rok w klubowej zieleni. */
.hist__kluby {
list-style: none; margin: 0 0 22px; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
max-width: 420px;
}
.hist__kluby li {
padding: 10px 14px 10px 0;
border-top: 1px solid var(--line-dark);
}
.hist__kluby li:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line-dark); }
.hist__kluby b {
display: block; font-weight: 700;
font-size: var(--fs-drobny); letter-spacing: .1em; text-transform: uppercase;
}
.hist__kluby i { font-style: normal; font-size: var(--fs-drobny); color: var(--green-tekst); }
.hist__nasz { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.hist__nasz span { display: grid; }
.hist__nasz b { font-size: var(--fs-drobny); letter-spacing: .1em; text-transform: uppercase; }
.hist__nasz i { font-style: normal; font-size: var(--fs-drobny); color: var(--green-tekst); }
/*
* Pas ze zdjęciem w tle. Zdjęcie jest mocno rozjaśnione — ma dawać
* fakturę, a nie konkurować z tekstem.
*/
.hist-pas--srodek {
position: relative;
background-size: cover; background-position: center;
padding: 78px clamp(20px, 5vw, 60px);
text-align: center;
}
.hist-pas--srodek::before {
content: ""; position: absolute; inset: 0;
background: rgba(244, 243, 239, .88);
}
.hist-pas__srodek { position: relative; max-width: 780px; margin: 0 auto; }
/*
* Pas dwóch zdjęć na całą szerokość, bez odstępu. „align-items: start”
* zamiast rozciągania: zdjęcia o różnych proporcjach zachowują swoje,
* zamiast być przycinane do wspólnej wysokości.
*/
.hist-pas__zdjecia {
display: grid; grid-template-columns: 1fr 1fr;
align-items: center; justify-items: center;
gap: 0;
}
.hist-pas__zdjecia img {
display: block;
width: auto; max-width: 100%; height: auto; max-height: 460px;
}
.hist-pas--kolumny {
position: relative;
background-size: cover; background-position: center;
}
.hist-pas--kolumny::before {
content: ""; position: absolute; inset: 0;
background: rgba(244, 243, 239, .9);
}
.hist-pas--kolumny > * { position: relative; }
.hist-pas__dwie {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(24px, 5vw, 70px);
max-width: 1180px; margin: 0 auto;
padding: 70px clamp(20px, 5vw, 40px);
}
.history-club--archiwum { padding-top: 34px; }
@media (max-width: 860px) {
/* Na telefonie zdjęcie idzie NAD tekst — inaczej ląduje pod nim jako pasek. */
.hist-pas--dwie { grid-template-columns: 1fr; }
.hist-pas__foto { order: -1; }
.hist-pas__tresc { padding: 34px 20px 40px; max-width: none; }
.hist-pas--srodek { padding: 40px 20px; }
.hist-pas__dwie { grid-template-columns: 1fr; padding: 34px 20px; gap: 30px; }
.hist__kluby { max-width: none; }
}
/* ---------- 121. Wynik meczu w miniaturze pod sliderem ---------- */
/*
* W hero wynik pokazujemy JEDEN raz — tutaj, miedzy herbami w nawigacji.
* Kartka slajdu ma juz tylko herby i „vs”: liczby po prawej i lista
* strzelcow powtarzaly to, po co kibic i tak wchodzi w relacje, a przy
* okazji zabieraly miejsce zdjeciu.
*
* Kolor niesie rezultat — ta sama trojka co na kazdej liscie w serwisie.
*/
.hero__main .hero__nav .dot--herby.dot--wynik,
.dot--herby.dot--wynik { width: 124px; gap: 5px; }
.dot__wynik {
flex: 0 0 auto;
font-family: var(--font-display);
font-size: 15px; font-weight: 900; line-height: 1;
letter-spacing: -.01em;
opacity: .8;
transition: opacity .18s ease;
}
.dot--herb:hover .dot__wynik,
.dot--herb.is-active .dot__wynik { opacity: 1; }
/* Podkladka kafelka jest jasna, wiec kolory bierzemy w wersji ciemnej. */
.dot__wynik.wynik-w { color: #12692f; }
.dot__wynik.wynik-r { color: #a8801a; }
.dot__wynik.wynik-p { color: #b3261e; }
@media (max-width: 1040px) {
.hero__main .hero__nav .dot--herby.dot--wynik,
.dot--herby.dot--wynik { width: 100px; gap: 4px; }
.dot__wynik { font-size: 13px; }
}
/*
* Na telefonie miniatury zostaja (sekcja 112), wiec wynik zostaje razem
* z nimi — to jedyne miejsce, gdzie go tam widac. Kafelek jest szerszy
* od zwyklej pary herbow; rzad i tak przewija sie palcem.
*/
@media (max-width: 700px) {
.hero__main .hero__nav .dot--herby.dot--wynik,
.dot--herby.dot--wynik { width: 82px; gap: 3px; padding: 3px 4px; }
.hero__main .hero__nav .dot--wynik .dot__wynik,
.dot__wynik { display: block; font-size: 12px; }
}
/* ---------- 122. Stopka slajdu na telefonie: biały pasek i przycisk ---------- */
/*
* Pod kadrem, przez całą szerokość: biały pasek z tytułem po lewej
* i zielony przycisk po prawej. Jedna wysokość, jedna linia — ten sam
* układ przy wpisie i przy meczu, więc przewijanie slidera niczym
* nie skacze.
*
* Na desktopie opakowanie „rozpuszcza się” (display: contents) i przycisk
* wraca na swoje miejsce w kolumnie tekstu, a paska nie ma wcale.
*/
.torn__stopka { display: contents; }
.torn__pasek { display: none; }
@media (max-width: 700px) {
.slide--torn .torn__stopka {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
display: flex; align-items: stretch;
/*
* Stala wysokosc, choc tytul raz ma jedna linijke, a raz dwie —
* inaczej stopka podskakiwala przy kazdym przewinieciu slidera.
*/
min-height: 52px;
}
.slide--torn .torn__pasek {
display: flex; align-items: center;
flex: 1 1 auto; min-width: 0;
padding: 12px 14px;
background: #fff; color: var(--ink);
font-family: var(--font-display);
font-size: 12px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
line-height: 1.16;
/* Długi tytuł łamie się najwyżej na dwie linijki — dłuższy rozpychał
stopkę na pół zdjęcia. Przycisk rośnie razem z paskiem (stretch). */
overflow: hidden;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
/* Przycisk przestaje wisieć w rogu — jest teraz drugą połową stopki. */
.slide--torn .torn__stopka .torn__cta {
position: static;
display: inline-flex; align-items: center;
flex: 0 0 auto;
margin: 0; padding: 12px 18px;
border: 0; border-radius: 0;
background: var(--green, #17803a); color: #fff;
font-size: 12px;
}
}
/* ---------- 123. Grafiki i logotypy pod treścią ---------- */
/*
* Plakat spotkania, logo sponsora tej kolejki, znak akcji charytatywnej —
* rzeczy, które nie są ani zdjęciem wyróżniającym, ani treścią. Redakcja
* wklejała je dotąd w tekst, gdzie rozjeżdżały układ.
*
* Znaki stoją na BIAŁYCH kafelkach, tak jak w taśmie sponsorów: logotypy
* są rysowane w rozmaitych kolorach i połowa z nich ginęła na ciemnej
* zieleni klubu.
*/
/*
* Sekcja trafia na JASNE strony (mecz, wpis), więc kolory idą z palety
* strony, a nie z ciemnego hero. „currentColor" zamiast twardej szarości —
* gdyby kiedyś stanęła na ciemnym tle, podpis pojedzie razem z tekstem.
*/
.grafiki {
padding: 30px 0 40px;
border-top: 1px solid rgba(0, 0, 0, .1);
}
/* Sponsor idzie osobno i z podpisem — to nie jest „jedna z grafik”. */
.grafiki__sponsor {
display: flex; align-items: center; gap: 16px;
margin-bottom: 22px;
}
.grafiki__sponsor:last-child { margin-bottom: 0; }
.grafiki__label {
font-family: var(--font-display);
font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
color: var(--muted);
flex: 0 0 auto;
}
.grafiki__rzad {
display: flex; flex-wrap: wrap; gap: 12px;
}
.grafiki__znak {
display: grid; place-items: center;
min-height: 68px; padding: 10px 16px;
background: #fff; border-radius: 10px;
border: 1px solid rgba(255, 255, 255, .14);
transition: border-color .18s ease;
}
a.grafiki__znak:hover { border-color: var(--leaf); }
.grafiki__znak img {
max-height: 48px; max-width: 100%;
width: auto; height: auto;
object-fit: contain; display: block;
}
@media (max-width: 700px) {
.grafiki { padding: 22px 0 28px; }
.grafiki__sponsor { flex-direction: column; align-items: flex-start; gap: 10px; }
.grafiki__znak { min-height: 58px; padding: 8px 12px; }
.grafiki__znak img { max-height: 38px; }
}
/*
* Grafiki meczu/wpisu jako klikalne miniatury galerii (nie logotypy).
* Wieksze niz taśma sponsorów i bez białej ramki - to pełne obrazy, a nie znaki.
* Klik otwiera lightbox (JS w parts/grafiki.php).
*/
.grafiki__link { padding: 0; overflow: hidden; background: transparent; cursor: zoom-in; }
.grafiki__link img { max-height: 160px; border-radius: 10px; }
@media (max-width: 700px) { .grafiki__link img { max-height: 120px; } }
.gfx-lb {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center;
background: rgba(8, 12, 10, .92); padding: 24px;
}
.gfx-lb[hidden] { display: none; }
.gfx-lb__img {
max-width: min(92vw, 900px); max-height: 88vh; width: auto; height: auto;
border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); background: #fff;
}
.gfx-lb__x {
position: absolute; top: 16px; right: 20px; width: 44px; height: 44px;
border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12);
color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
}
.gfx-lb__x:hover { background: rgba(255, 255, 255, .22); }
.gfx-lb__nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 52px; height: 52px; border: 0; border-radius: 50%;
background: rgba(255, 255, 255, .12); color: #fff; font-size: 34px;
line-height: 1; cursor: pointer;
}
.gfx-lb__nav:hover { background: rgba(255, 255, 255, .22); }
.gfx-lb__nav[hidden] { display: none; }
.gfx-lb__prev { left: 16px; }
.gfx-lb__next { right: 16px; }
.gfx-lb__licznik {
position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; opacity: .8;
}
@media (max-width: 600px) { .gfx-lb__nav { width: 44px; height: 44px; font-size: 28px; } }
/* ---------- 124. Zdjęcia zawodnika: przewijany zestaw ---------- */
/*
* Sesja daje po kilka kadrów na zawodnika. Jedno zdjęcie było wizytówką,
* reszta leżała na dysku. Teraz idą jednym zestawem — jak zdjęcia produktu
* w sklepie: strzałki po bokach, kropki na dole, kadr wypełnia całą ramkę.
*
* Kadry leżą jeden NA DRUGIM i przełączają się kryciem, nie przesuwaniem:
* ramka ma stałą proporcję 3/4, więc nie ma czego przesuwać, a zanikanie
* nie miga przy zdjęciach z tej samej sesji.
*/
.zawgal { touch-action: pan-y; }
.zawgal .zawgal__foto {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; display: block;
opacity: 0; transition: opacity .28s ease;
pointer-events: none;
}
.zawgal .zawgal__foto.is-aktywne { opacity: 1; }
/* Pojedynczy kadr zostaje zwykłym zdjęciem — bez pozycjonowania i krycia. */
.zaw-hero__foto:not(.zawgal) .zawgal__foto {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.zawgal__strzalka {
position: absolute; top: 50%; transform: translateY(-50%);
z-index: 3;
width: 38px; height: 38px; padding: 0;
display: grid; place-items: center;
border: 0; border-radius: 50%;
background: rgba(255, 255, 255, .92);
color: var(--green, #17803a);
font-size: 24px; line-height: 1; font-weight: 700;
cursor: pointer;
opacity: 0; transition: opacity .18s ease, background .18s ease;
box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
}
.zawgal__strzalka--wstecz { left: 10px; }
.zawgal__strzalka--dalej { right: 10px; }
.zawgal:hover .zawgal__strzalka,
.zawgal:focus-within .zawgal__strzalka { opacity: 1; }
.zawgal__strzalka:hover { background: #fff; }
.zawgal__kropki {
position: absolute; left: 0; right: 0; bottom: 10px;
z-index: 3;
display: flex; justify-content: center; gap: 6px;
}
.zawgal__kropka {
width: 7px; height: 7px; border-radius: 50%;
background: rgba(255, 255, 255, .5);
box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
transition: background .18s ease;
}
.zawgal__kropka.is-aktywna { background: #fff; }
@media (max-width: 700px) {
/* Na dotyku nie ma najechania — strzałki są widoczne od razu. */
.zawgal__strzalka { opacity: 1; width: 34px; height: 34px; font-size: 21px; }
.zawgal__strzalka--wstecz { left: 6px; }
.zawgal__strzalka--dalej { right: 6px; }
}
/* ---------- 125. Deklaracja członkowska Socios ---------- */
/*
* Formularz stoi na jasnej podstronie wpisu, więc bierze kolory stąd,
* a nie z ciemnego hero. Wypełnia się go z telefonu, stąd duże pola
* i pakiety jako kafelki do kliknięcia, nie lista rozwijana.
*/
.dekl {
margin: 34px 0;
padding: 26px 24px;
border: 1px solid rgba(0, 0, 0, .12);
border-top: 3px solid var(--green, #17803a);
background: #fff;
}
.dekl__tytul {
font-family: var(--font-display);
font-size: 22px; text-transform: uppercase; letter-spacing: .02em;
margin: 0 0 8px;
}
.dekl__wstep { margin: 0 0 20px; color: var(--muted); font-size: 14.5px; max-width: 62ch; }
.dekl__pola {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px 18px;
}
.dekl__szeroko { grid-column: 1 / -1; }
.dekl label {
display: flex; flex-direction: column; gap: 5px;
font-family: var(--font-display);
font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
color: var(--muted);
}
.dekl input[type="text"],
.dekl input[type="tel"],
.dekl input[type="email"],
.dekl input[type="date"] {
font: inherit;
font-family: var(--font-body);
font-size: 16px; /* 16px — mniejsze pole każe iPhone'owi przybliżyć stronę */
letter-spacing: 0; text-transform: none;
color: var(--ink);
padding: 11px 13px;
border: 1px solid rgba(0, 0, 0, .22);
border-radius: 3px;
background: #fff;
}
.dekl input:focus-visible { outline: 2px solid var(--green, #17803a); outline-offset: 1px; }
.dekl__grupa { border: 0; margin: 22px 0 0; padding: 0; }
.dekl__grupa legend {
font-family: var(--font-display);
font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
color: var(--muted); padding: 0 0 9px;
}
.dekl__pakiety { display: flex; flex-wrap: wrap; gap: 9px; }
.dekl__pakiet { flex: 1 1 130px; }
.dekl__pakiet input { position: absolute; opacity: 0; pointer-events: none; }
.dekl__pakiet span {
display: flex; flex-direction: column; gap: 2px;
padding: 11px 13px;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 3px;
cursor: pointer;
transition: border-color .16s ease, background .16s ease;
}
.dekl__pakiet b { font-family: var(--font-display); font-size: 15px; color: var(--ink); text-transform: uppercase; }
.dekl__pakiet i { font-style: normal; font-family: var(--font-body); font-size: 13px; letter-spacing: 0; color: var(--muted); }
.dekl__pakiet input:checked + span { border-color: var(--green, #17803a); background: rgba(23, 128, 58, .07); }
.dekl__pakiet input:focus-visible + span { outline: 2px solid var(--green, #17803a); outline-offset: 2px; }
.dekl__tak-nie { display: flex; gap: 22px; }
.dekl__tak-nie label { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.dekl__blad {
margin: 16px 0 0; padding: 10px 13px;
background: #fdecea; border-left: 3px solid #b3261e;
color: #7a1a15; font-size: 14px;
}
.dekl__akcje {
margin-top: 24px;
display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px;
}
.dekl__akcje .btn { cursor: pointer; border: 0; }
.dekl__plik { font-size: 14px; color: var(--muted); text-decoration: underline; }
.dekl__plik:hover { color: var(--green, #17803a); }
.dekl__potem {
margin: 22px 0 0; padding: 14px 16px;
background: rgba(23, 128, 58, .07);
border-left: 3px solid var(--green, #17803a);
font-size: 14.5px; line-height: 1.55;
}
@media (max-width: 700px) {
.dekl { padding: 20px 16px; margin: 26px 0; }
.dekl__pakiet { flex: 1 1 100%; }
.dekl__akcje .btn { width: 100%; justify-content: center; text-align: center; }
}
/* ---------- 126. Własne tło podstrony meczu ---------- */
/*
* Mecz ze sponsorem albo z własną oprawą dostaje swój kadr zamiast
* domyślnego zdjęcia trybun. Zmienną podstawia szablon (single-mecz.php),
* więc mecze bez wybranego tła wyglądają jak dotąd.
*
* Przyciemnienie zostaje takie samo — napisy w hero są białe i muszą
* się obronić także na jasnym zdjęciu, którego nikt nie sprawdził.
*/
.mecz-hero.ma-tlo {
background-image: var(--mecz-tlo);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* ---------- 127. Mecz w liście aktualności ---------- */
/*
* Wynik w tytule karty — kibic przeglądający listę pyta najpierw „ile było”,
* a dopiero potem wchodzi po szczegóły. Kolor niesie rezultat, ta sama
* trójka co wszędzie: zielony wygrana, żółty remis, czerwony porażka.
*/
.news-wynik {
display: inline-block;
margin: 0 .25em;
padding: 0 .3em;
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
border-radius: 3px;
background: rgba(0, 0, 0, .06);
}
.news-wynik.wynik-w { color: #12692f; }
.news-wynik.wynik-r { color: #a8801a; }
.news-wynik.wynik-p { color: #b3261e; }
/* ---------- 128. Dzwonek powiadomień w hero meczu i w pasku ---------- */
/*
* Bazowy .push-btn jest zielony na jasnym tle. W hero meczu i w pasku
* z licznikiem stoi na ciemnej zieleni, więc dostaje jasną wersję —
* inaczej zielony napis na zielonym tle po prostu znika.
*/
/*
* Kolumna, nie rząd: pod przyciskiem stoi komunikat i rozwijany poradnik.
* W rzędzie z align-items:stretch przycisk rozciągał się na wysokość poradnika
* i robił się z niego wielki owal (border-radius:999px). Kolumna + align-center
* trzyma przycisk w naturalnym rozmiarze, a resztę układa pod nim.
*/
.mecz-hero__push { margin-top: 16px; display: flex; flex-direction: column;
align-items: center; gap: 10px; }
.mecz-hero__push .push-btn,
.mpasek .push-btn {
border-color: rgba(255, 255, 255, .38);
color: #fff;
background: rgba(255, 255, 255, .08);
}
.mecz-hero__push .push-btn:hover:not(:disabled),
.mpasek .push-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, .16);
border-color: #fff;
}
.mpasek .push-btn { margin-top: 12px; font-size: 12px; padding: 8px 14px; }
@media (max-width: 700px) {
.mecz-hero__push { margin-top: 12px; }
.mpasek .push-btn { margin-top: 10px; }
}
/* Powód, dla którego dzwonek nie zadziałał — pod przyciskiem, nie w okienku. */
.push-info {
margin: 8px 0 0;
font-size: 12.5px;
line-height: 1.45;
color: rgba(255, 255, 255, .78);
max-width: 44ch;
}
.mecz-hero__push .push-info { text-align: center; margin-inline: auto; }
/* ---------- 129. Dolny pasek skrótów na telefonie ---------- */
/*
* Cztery kafelki na samym dole ekranu, tak jak w aplikacji. Stoją POD taśmą
* sponsorów: taśma zjeżdża o wysokość paska w górę, a strona dostaje zapas
* na oba, żeby nic nie zasłaniało końca stopki.
*
* Tylko na telefonie — na monitorze te same skróty są w górnym menu,
* a pasek u dołu ekranu byłby tam obcym elementem.
*/
:root { --mdol-h: 0px; }
.mdol { display: none; }
@media (max-width: 760px) {
:root { --mdol-h: 58px; }
.mdol {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 61; /* nad taśmą sponsorów (60) */
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
height: calc(var(--mdol-h) + env(safe-area-inset-bottom, 0px));
padding-bottom: env(safe-area-inset-bottom, 0px);
background: var(--green-darker, #071c11);
border-top: 1px solid rgba(255, 255, 255, .12);
}
.mdol__poz {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
text-decoration: none;
color: rgba(255, 255, 255, .72);
font-family: var(--font-display);
/*
* min-width: 0 jest tu WARUNKIEM, nie kosmetyka.
*
* Kolumny paska to 1fr, czyli minmax(auto, 1fr) - domyslne "auto" nie
* pozwala kolumnie zwezic sie ponizej szerokosci jej tresci. Przy krotkich
* etykietach (Sklad, Tabela, Biznes) miescilo sie to w 390 px, ale nazwy
* dzialow sa dluzsze (Rozgrywki, Sponsoring) i pasek rozpychal sie poza
* ekran - piaty kafelek wychodzil poza krawedz. Z min-width: 0 kolumny
* moga sie scisnac, a nadmiar tekstu obcina wielokropek nizej.
*/
min-width: 0;
/* Tekst schodzi wraz z szerokoscia ekranu, zeby nie dochodzilo do obcinania. */
font-size: clamp(8.5px, 2.5vw, 10.5px);
letter-spacing: .06em;
text-transform: uppercase;
line-height: 1;
/* Cały kafelek jest polem dotyku — nie sama ikona. */
-webkit-tap-highlight-color: transparent;
}
.mdol__poz span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdol__ikona { width: 22px; height: 22px; flex: 0 0 auto; }
/* Relacja w toku — czerwona kropka przy ikonie, jak wskaznik nagrywania. */
.mdol__poz { position: relative; }
.mdol__poz.is-live { color: #fff; }
.mdol__kropka {
position: absolute; top: 6px; left: 50%; margin-left: 9px;
width: 7px; height: 7px; border-radius: 50%;
background: #ff2d1f;
box-shadow: 0 0 0 2px var(--green-darker, #071c11);
animation: liveBicie 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.mdol__kropka { animation: none; }
}
.mdol__poz.is-tu { color: #fff; }
.mdol__poz.is-tu .mdol__ikona { color: var(--leaf, #2fa457); }
.mdol__poz:active { background: rgba(255, 255, 255, .07); }
/* Taśma sponsorów siada nad paskiem, a nie pod nim. */
.hero-tasma--przyklejona {
bottom: calc(var(--mdol-h) + env(safe-area-inset-bottom, 0px));
}
/* Zapas na oba paski naraz. */
body { padding-bottom: calc(var(--tasma-h) + var(--mdol-h) + env(safe-area-inset-bottom, 0px)); }
/* Studio nagrania i czysty kadr — tam żadnego z pasków nie ma. */
body.studio .mdol, body.czysto .mdol { display: none; }
body.studio, body.czysto { padding-bottom: 0; }
}
/* ---------- 130. Dzień meczowy: pasek, „MECZ” w menu i na dolnym pasku ---------- */
/*
* W dniu, w którym gramy, serwis ma to mówić od pierwszego spojrzenia —
* bez szukania w terminarzu. Trzy miejsca, jedna czerwień:
* 1. pasek „Dziś mecz” (kto z kim, o której, gdzie),
* 2. czerwone „Mecz” w górnym menu,
* 3. środkowy kafelek dolnego paska zamiast „Na żywo”.
*
* Włącza to wisloka_mecz_dzis() — cały dzień meczowy, nie tylko czas relacji.
*/
:root {
/* Tło paska: biały tekst na nim ma 5.9:1. */
--mecz-czerwony: #c3161c;
/*
* Napis na CIEMNYM tle (dolny pasek jest ciemnozielony) — tam #c3161c
* dawałby 2.1:1 i był nieczytelny. Jaśniejszy wariant ma 5.2:1.
*/
--mecz-czerwony-jasny: #ff5247;
/* Wysokość paska; potrzebna dołowi strony na telefonie. */
--pasek-mecz-h: 0px;
}
/* ---- 1. Pasek dnia meczowego ---- */
.pasek-mecz {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px 14px;
padding: 9px 24px;
background: var(--mecz-czerwony);
color: #fff;
text-decoration: none;
font-family: var(--font-display);
font-size: 14px;
line-height: 1.3;
letter-spacing: .02em;
}
.pasek-mecz:hover { background: #a81217; }
.pasek-mecz__etykieta {
font-weight: 800;
text-transform: uppercase;
letter-spacing: .1em;
font-size: 12px;
/* Plakietka odcina etykietę od reszty, żeby nie zlewała się z nazwami klubów. */
padding: 3px 9px;
border-radius: 999px;
background: rgba(255, 255, 255, .18);
}
.pasek-mecz__kto { font-weight: 700; text-transform: uppercase; }
.pasek-mecz__godzina { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Miejsce jest dopowiedzeniem — ciszej niż nazwy i godzina. */
.pasek-mecz__gdzie { opacity: .85; font-family: var(--font-body); font-size: 13px; }
.pasek-mecz__strzalka { font-size: 18px; line-height: 1; opacity: .9; }
/*
* Po przewinięciu pasek znika razem z resztą górnej wstęgi — tak samo
* zachowuje się .site-header__top. Nagłówek ma się kurczyć, a nie rosnąć
* o pasek na całej długości strony.
*/
.site-header.is-scrolled .pasek-mecz,
.site-header.is-solid .pasek-mecz { display: none; }
/* ---- 1b. Wstęga meczowa nad menu (styl Górnika) ---- */
/*
* Stała wysokość 34px - o tyle podbijamy odsunięcie treści (body.ma-mtop:
* --hh 76 -> 110), żeby pasek nie chował treści pod przypiętym nagłówkiem.
* Mobile first: jedna wyśrodkowana linia STATUS · herb · wynik · herb · #tag.
*/
.mtop {
display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
gap: 8px; height: 34px; padding: 0 14px; background: #0b120e; color: #fff;
text-decoration: none; font-family: var(--font-display); line-height: 1;
overflow: hidden;
}
body.ma-mtop { --hh: 110px; } /* 76 (menu) + 34 (pasek) */
.mtop__stan {
text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800;
color: rgba(255, 255, 255, .62); white-space: nowrap;
}
.mtop--dzis .mtop__stan { color: #ff5247; } /* dzień meczu - czerwony akcent */
.mtop--live .mtop__stan { color: #ff5247; display: inline-flex; align-items: center; }
.mtop__kropka { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: #ff2d20; margin-right: 6px; }
.mtop--live .mtop__kropka { animation: liveBicie 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .mtop__kropka { animation: none; } }
.mtop__herb { display: inline-flex; align-items: center; flex: 0 0 auto; }
.mtop__herb img, .mtop__herb .herb { display: block; height: 22px; width: 22px; }
.mtop__wynik {
font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums;
letter-spacing: .02em; white-space: nowrap;
}
.mtop__hash {
text-transform: uppercase; letter-spacing: .05em; font-size: 12px; font-weight: 800;
color: rgba(255, 255, 255, .5); white-space: nowrap;
}
@media (max-width: 520px) { .mtop { gap: 6px; padding: 0 10px; } .mtop__hash { display: none; } }
@media (min-width: 700px) { .mtop { gap: 12px; } }
/* ---- 2. „Mecz” w górnym menu ---- */
/*
* Plakietka, nie sam czerwony napis: nagłówek bywa przezroczysty na ciemnym
* zdjęciu i biały po przewinięciu, a czerwony tekst musiałby być czytelny
* na obu. Wypełnienie rozwiązuje to raz.
*/
.hnav__link--mecz {
/*
* inline-flex, nie domyslny inline: na elemencie inline pionowy padding
* nie powieksza wiersza, wiec czerwone tlo wylewalo sie nad i pod
* pozostale pozycje menu i plakietka wygladala na przycieta.
*/
display: inline-flex;
align-items: center;
line-height: 1;
background: var(--mecz-czerwony);
color: #fff !important;
padding: 6px 12px;
border-radius: 999px;
font-weight: 700;
}
.hnav__link--mecz:hover { background: #a81217; }
/* ---- 3. Środkowy kafelek dolnego paska ---- */
.mdol__poz.is-mecz-dzis {
color: var(--mecz-czerwony-jasny);
font-weight: 800;
}
.mdol__poz.is-mecz-dzis .mdol__ikona { color: var(--mecz-czerwony-jasny); }
@media (max-width: 760px) {
/*
* Na telefonie pasek schodzi na DÓŁ, nad nawigację — tam pada wzrok
* i tam sięga kciuk. Wychodzi z nagłówka przez position:fixed, więc
* w kodzie strony zostaje jeden znacznik zamiast dwóch kopii.
*
* Kolejność od dołu: .mdol (nawigacja) → .hero-tasma (sponsorzy) → pasek.
* Stąd suma obu zmiennych w `bottom`. z-index 62 stawia go nad taśmą (60)
* i nad nawigacją (61) — pasek nie ma być niczym przykryty.
*/
/* Zmierzona wysokosc jednowierszowego paska to 32 px; 34 daje zapas
na dluzsza nazwe klubu bez chowania tresci pod paskiem. */
:root { --pasek-mecz-h: 34px; }
.pasek-mecz {
position: fixed;
left: 0; right: 0;
bottom: calc(var(--mdol-h) + var(--tasma-h) + env(safe-area-inset-bottom, 0px));
z-index: 62;
padding: 7px 14px;
gap: 2px 10px;
font-size: 13px;
box-shadow: 0 -6px 18px rgba(0, 0, 0, .18);
}
/* Przewijanie nie może go chować — na telefonie to jego jedyne miejsce. */
.site-header.is-scrolled .pasek-mecz,
.site-header.is-solid .pasek-mecz { display: flex; }
.pasek-mecz__etykieta { font-size: 11px; padding: 2px 7px; }
.pasek-mecz__kto { font-size: 13px; }
/*
* Miejsce i strzałka ustępują jako pierwsze: „kto z kim” i godzina muszą
* zostać w JEDNYM rzędzie, a na 390 px nie ma miejsca na wszystko naraz.
* Bez tego strzałka spadała sama do drugiego wiersza i pasek wyglądał
* na złamany. Cały pasek jest odnośnikiem, więc strzałka niczego nie wnosi.
*/
.pasek-mecz__gdzie,
.pasek-mecz__strzalka { display: none; }
.pasek-mecz { flex-wrap: nowrap; }
/* Najdłuższy element może się skrócić, zamiast wypychać godzinę niżej. */
.pasek-mecz__kto {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pasek-mecz__etykieta,
.pasek-mecz__godzina { flex: 0 0 auto; }
/*
* Treść strony nie może chować się pod paskiem.
*
* :has() zamiast klasy na : pasek renderuje naglowek, a klase
* musialby dolozyc dokument-gora.php — czyli trzeci plik do zmiany
* po to, zeby przekazac jeden bit informacji, ktory i tak widac w DOM.
*/
body:has(.pasek-mecz) {
padding-bottom: calc(var(--tasma-h) + var(--mdol-h) + var(--pasek-mecz-h) + env(safe-area-inset-bottom, 0px));
}
}
@media (max-width: 380px) {
/* Na najwęższych ekranach zostaje sam komplet: kto z kim i o której. */
.pasek-mecz { font-size: 12px; }
.pasek-mecz__etykieta { display: none; }
}
/* ---------- 131. Sponsorzy nad stopką: biały pas z trzema grupami ---------- */
/*
* BIALE TLO JEST WARUNKIEM, NIE DEKORACJA.
*
* Logotypy sponsorow to w wiekszosci ciemny znak na przezroczystym tle -
* projektowane na jasne podloze. Wersja na ciemnej zieleni stopki gubila
* je calkowicie, a rozjasnianie filtrem zamienialo je w szare plamy.
* Na bialym nie trzeba zadnych sztuczek i kazdy znak wyglada tak, jak
* zaprojektowal go wlasciciel - czego zwykle wymagaja umowy sponsorskie.
*
* Sekcja stoi PRZED