/* ========================================= JANOVIA — arkusz stylów Kolory główne: #007DCC (niebieski), #FFB900 (żółty) ========================================= */ :root { --blue: #007DCC; --blue-light: #2FA6F0; --gold: #FFB900; --bg: #08090C; --bg-2: #0E1015; --surface: #14171E; --surface-2: #1B1F28; --line: rgba(255, 255, 255, 0.10); --text: #FFFFFF; --muted: #8D97A5; --wrap: 1360px; --pad: clamp(1.25rem, 4vw, 4rem); --ease: cubic-bezier(0.22, 1, 0.36, 1); /* lekkie przestrzelenie i powrót — element „dosiada" na miejsce zamiast tylko wyhamować; używane tam, gdzie coś się pojawia */ --ease-back: cubic-bezier(0.34, 1.42, 0.64, 1); /* ostre ruszenie, długie wytracanie — do przesunięć i najechań */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } /* scroll-behavior celowo NIE jest tu ustawione: płynnym przewijaniem zajmuje się Lenis (js/lenis.min.js), a natywne smooth gryzłoby się z nim przy skokach do kotwic. Zapasowe „smooth" włącza się tylko wtedy, gdy JS nie wystartował — patrz reguła html:not(.lenis) niżej. */ html:not(.lenis) { scroll-behavior: smooth; } body { font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; line-height: 1.55; color: var(--text); background-color: var(--bg); /* clip, nie hidden: hidden robi z własny kontener przewijania, przez co window.scrollY stoi w miejscu i Lenis nie ma czego przewijać. clip przycina tak samo, ale kontenera nie tworzy. */ overflow-x: clip; } /* ---------- Lenis (płynne przewijanie) ---------- */ /* Wklejone z node_modules/lenis/dist/lenis.css, żeby nie robić osobnego żądania po plik o kilkunastu linijkach. */ html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); } /* ---------- ELEMENTY WSPÓLNE ---------- */ .tag { display: inline-block; padding: 0.3rem 0.7rem; background-color: var(--blue); color: #FFFFFF; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .tag--sm { padding: 0.2rem 0.5rem; font-size: 0.62rem; } .arrow-link { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; padding-bottom: 3px; background-image: linear-gradient(var(--gold), var(--gold)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: background-size 0.45s var(--ease), color 0.3s; } .arrow-link::after { content: "→"; transition: transform 0.35s var(--ease); } .arrow-link:hover { background-size: 100% 2px; color: var(--gold); } .arrow-link:hover::after { transform: translateX(6px); } .arrow-link--sm { font-size: 0.75rem; } /* herb */ .crest { width: auto; height: 46px; object-fit: contain; flex-shrink: 0; transition: transform 0.4s var(--ease); } .crest--sm { height: 54px; } .crest--md { height: 78px; } /* Herb na jasnej podkładce. Herby klubów bywają granatowe albo czarne, więc na ciemnym tle strony potrzebują tła, żeby w ogóle było je widać. */ .crest-plate { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: #FFFFFF; border-radius: 8px; padding: 5px; width: 54px; height: 54px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55); transition: transform 0.4s var(--ease), box-shadow 0.4s; } .crest-plate img { max-width: 100%; max-height: 100%; object-fit: contain; } .crest-plate--xs { width: 32px; height: 32px; padding: 3px; border-radius: 5px; } .crest-plate--md { width: 78px; height: 78px; padding: 8px; border-radius: 10px; } .fixture:hover .crest-plate { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.65); } /* czytelna tylko dla czytników ekranu */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* zastępczy herb rywala */ .shield { position: relative; width: 46px; height: 54px; flex-shrink: 0; background-color: var(--surface-2); border: 2px solid var(--line); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); } .shield--xs { width: 26px; height: 30px; } .shield--md { width: 66px; height: 78px; } .shield::after { content: attr(data-letter); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 0.5rem; font-size: 1.3rem; font-weight: 800; color: var(--muted); } /* ---------- PASEK POSTĘPU ---------- */ .progress { position: fixed; top: 0; left: 0; z-index: 200; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--blue), var(--gold)); } /* ---------- NAGŁÓWEK ---------- */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 150; background-color: transparent; /* "top" chowa nagłówek zamiast "transform" celowo — transform, filter i backdrop-filter na .header tworzyłyby nowy kontekst odniesienia dla position:fixed menu mobilnego zagnieżdżonego w środku (.nav), przez co wysuwało się w złym miejscu zamiast na cały ekran. Dlatego rozmycie tła siedzi w osobnej warstwie .header__bg, a nie na .header wprost. */ transition: top 0.45s var(--ease), border-color 0.4s; border-bottom: 1px solid transparent; } .header__bg { position: absolute; inset: 0; z-index: -1; background-color: rgba(8, 9, 12, 0.85); backdrop-filter: blur(14px); opacity: 0; transition: opacity 0.4s var(--ease); } .header.is-stuck { border-bottom-color: var(--line); } .header.is-stuck .header__bg { opacity: 1; } .header.is-hidden { top: -100px; } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 var(--pad); height: 96px; transition: height 0.4s var(--ease); } .header.is-stuck .header__inner { height: 72px; } .header__side { display: flex; align-items: center; gap: 2rem; flex: 1; } .header__side--end { justify-content: flex-end; } .header__side a, .nav a { position: relative; font-size: 0.82rem; /* Poppins w 800 jest wyraźnie cięższy od dawnego system-ui przy tym samym numerze — 600 przywraca dawną wagę optyczną paska */ font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.4rem 0; transition: color 0.35s var(--ease-out); } .nav a:hover { color: var(--gold); } .header__side a::after, .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background-color: var(--gold); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.4s var(--ease); } .header__side a:hover::after, .nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; } .nav { display: flex; align-items: center; gap: 2rem; } .crest-link { position: absolute; left: 50%; transform: translateX(-50%); } .crest-link:hover .crest { transform: scale(1.08) rotate(-3deg); } .header.is-stuck .crest { height: 40px; } /* burger */ .nav-toggle { display: none; } .burger { display: none; width: 30px; height: 18px; position: relative; cursor: pointer; } .burger span, .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background-color: #FFFFFF; transition: transform 0.35s var(--ease), opacity 0.25s; } .burger span { top: 8px; } .burger span::before { top: -8px; } .burger span::after { top: 8px; } /* ---------- HERO ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; padding: 0 var(--pad) clamp(3rem, 8vh, 6rem); } .hero__bg { position: absolute; inset: -12% 0 -12% 0; background-color: #08090C; /* zanim zdjęcie się wczyta */ background-image: url("png/stadion1.jpg"); background-size: cover; background-position: center 45%; background-repeat: no-repeat; will-change: transform; } /* Przyciemnienie zdjęcia: mocne u dołu pod tytuł, lekkie u góry pod menu, plus delikatny niebieski refleks w barwach klubu. */ .hero__grain { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 9, 12, 0.96) 0%, rgba(8, 9, 12, 0.72) 22%, rgba(8, 9, 12, 0.28) 52%, rgba(8, 9, 12, 0.20) 78%, rgba(8, 9, 12, 0.55) 100%), linear-gradient(105deg, rgba(0, 125, 204, 0.22) 0%, transparent 55%); } .hero__content { position: relative; z-index: 2; max-width: 1100px; } .hero__meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .hero__time { font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 10px rgba(8, 9, 12, 0.9); } .hero__title { font-size: clamp(2.2rem, 6.5vw, 5.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: 2.25rem; /* zdjęcie ma jasno oświetlone boisko — cień trzyma tekst czytelnym */ text-shadow: 0 2px 28px rgba(8, 9, 12, 0.7); } .hero__title .line { display: block; overflow: hidden; } .hero__title .line > * { display: block; } .line--accent { color: var(--gold); } .hero__scroll { position: absolute; right: var(--pad); bottom: clamp(3rem, 8vh, 6rem); z-index: 2; display: flex; align-items: center; gap: 0.8rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .hero__scroll span { display: block; width: 1px; height: 54px; background: linear-gradient(to bottom, transparent, var(--gold)); animation: drop 2s var(--ease) infinite; } @keyframes drop { 0% { transform: scaleY(0); transform-origin: 50% 0; } 45% { transform: scaleY(1); transform-origin: 50% 0; } 55% { transform: scaleY(1); transform-origin: 50% 100%; } 100% { transform: scaleY(0); transform-origin: 50% 100%; } } /* animacja wejścia hero */ .hero__meta, .hero__title .line, .hero .arrow-link { opacity: 0; transform: translateY(28px); animation: rise 0.9s var(--ease) forwards; } .hero__meta { animation-delay: 0.15s; } .hero__title .line:nth-child(1) { animation-delay: 0.30s; } .hero__title .line:nth-child(2) { animation-delay: 0.40s; } .hero__title .line:nth-child(3) { animation-delay: 0.50s; } .hero .arrow-link { animation-delay: 0.70s; } @keyframes rise { to { opacity: 1; transform: none; } } /* ---------- PASEK SPONSORÓW ---------- */ .marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background-color: var(--bg-2); padding: 2rem 0; } .marquee__track { display: flex; align-items: center; gap: 3rem; width: max-content; /* Przesunięcie i czas ustawia JS po zmierzeniu jednego zestawu logo. Zapasowe 50% obsługuje pasek wpisany na sztywno w index.html, gdzie lista jest podwojona — przy danych z panelu kopii bywa więcej. */ animation: slide var(--czas-paska, 32s) linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__item { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; white-space: nowrap; } /* sponsor z podanym adresem jest odnośnikiem — sygnalizujemy to kursorem */ a.marquee__item { cursor: pointer; } .marquee__item .marquee__logo { display: flex; align-items: center; justify-content: center; height: 110px; width: 190px; background-color: var(--gold); -webkit-mask-image: var(--logo); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-mode: alpha; mask-image: var(--logo); mask-repeat: no-repeat; mask-position: center; mask-size: contain; mask-mode: alpha; transition: transform 0.3s; } .marquee__item:hover .marquee__logo { transform: translateY(-3px); } .marquee__item img { height: 100%; width: 100%; max-width: 100%; object-fit: contain; opacity: 0; } .marquee__logo.marquee__glow { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.35)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.2)); } .marquee__track span { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color 0.3s; } .marquee__item:hover span { color: var(--gold); } .marquee__track i { width: 6px; height: 6px; background-color: var(--blue); transform: rotate(45deg); flex-shrink: 0; } @keyframes slide { to { transform: translateX(calc(-1 * var(--przesuniecie, 50%))); } } /* ---------- SEKCJE ---------- */ .section { padding: clamp(4rem, 10vh, 8rem) 0; } .section--line { border-top: 1px solid var(--line); } .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.5rem; } .head h2 { font-size: clamp(1.8rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; } .head h2 em { font-style: normal; color: var(--gold); } .head__tools { display: flex; align-items: center; gap: 1.5rem; } .railnav { display: flex; gap: 0.5rem; } .railnav__btn { width: 42px; height: 42px; border: 1px solid var(--line); background-color: transparent; color: #FFFFFF; font-size: 1rem; cursor: pointer; transition: background-color 0.3s, border-color 0.3s, transform 0.3s var(--ease); } .railnav__btn:hover { background-color: var(--blue); border-color: var(--blue); transform: translateY(-2px); } .railnav__btn:active { transform: translateY(0) scale(0.94); } /* ---------- KARUZELE ---------- */ .rail { display: flex; gap: 1.25rem; overflow-x: auto; /* jawne overflow-y — bez tego przeglądarka domyślnie też traktuje pion jako przewijalny (auto), co razem ze scroll-snap potrafi na dotyku złapać gest przewijania strony zamiast puścić go dalej w górę/dół */ overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0 var(--pad) 1rem; scroll-padding-left: var(--pad); /* bez tego snap zjada lewy margines */ scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } .rail > * { scroll-snap-align: start; flex: 0 0 clamp(240px, 26vw, 330px); } /* karta aktualności */ .post { position: relative; cursor: pointer; } .post__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: linear-gradient(150deg, var(--blue), #06283D); transition: transform 0.6s var(--ease); } .post__media::after { content: ""; position: absolute; inset: 0; /* nad rozmytym tłem i nad samym zdjęciem */ z-index: 2; background: linear-gradient(to top, rgba(8, 9, 12, 0.7), transparent 55%); opacity: 0; transition: opacity 0.5s; } /* Zdjęcie z Facebooka nie może być przycięte (plakaty meczowe mają datę i godzinę przy samej krawędzi), ale zdjęcie poziome w pionowym kafelku zostawiało szerokie puste pasy. Kafelek wypełnia więc rozmyta, powiększona kopia tego samego zdjęcia, a ostre zdjęcie leży na niej w całości. Inline style="background-image" z JS-a służy tu tylko za źródło adresu — ::before dziedziczy je i przykrywa, więc samo tło nigdy nie jest widoczne. */ .post__media--foto { background-color: var(--surface); } .post__media--foto::before { content: ""; position: absolute; inset: 0; background-image: inherit; background-size: cover; background-position: center; /* powiększenie chowa wyblakłe krawędzie, które zostawia rozmycie */ transform: scale(1.25); filter: blur(24px) brightness(0.55) saturate(1.2); } .post__foto { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; } .post__media--2 { background: linear-gradient(150deg, var(--gold), #0D2B44); } .post__media--3 { background: linear-gradient(150deg, #06283D, var(--blue-light)); } .post__media--4 { background: linear-gradient(150deg, #005C96, var(--gold)); } .post__media--5 { background: linear-gradient(150deg, #C98F00, #08090C); } .post__media--6 { background: linear-gradient(150deg, var(--blue), var(--gold)); } .post:hover .post__media { transform: scale(1.04); } .post:hover .post__media::after { opacity: 1; } .post__body { padding-top: 1.1rem; } .post__time { margin-left: 0.7rem; font-size: 0.75rem; color: var(--muted); } .post__body h3 { margin-top: 0.7rem; font-size: 1.05rem; font-weight: 600; line-height: 1.35; transition: color 0.3s; } .post:hover h3 { color: var(--gold); } /* siatka na podstronie aktualnosci.html — te same karty co w karuzeli na stronie głównej, tylko wszystkie naraz, w rzędach jak na Instagramie */ .siatka-aktualnosci { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem 1.75rem; } /* karta meczu */ .fixture { display: flex; flex-direction: column; background-color: var(--surface); border: 1px solid var(--line); padding: 1.75rem 1.5rem; transition: transform 0.45s var(--ease), border-color 0.4s, background-color 0.4s; } .fixture:hover { transform: translateY(-6px); border-color: var(--blue); background-color: var(--surface-2); } .fixture__date { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; } .fixture__league { margin-top: 0.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } /* Herb, nazwa i forma jednej drużyny stoją w jednej kolumnie siatki, dzięki czemu dzielą tę samą oś pionową. Środkowa kolumna to „vs”. */ .fixture__match { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.75rem; padding: 1.75rem 0 0; text-align: center; } .fixture__side { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; } /* wysokość herbu, żeby „vs” trafiło w jego oś poziomą */ .fixture__vs { display: flex; align-items: center; height: 54px; font-size: 1.5rem; font-weight: 800; color: rgba(255, 255, 255, 0.16); } /* Wysokość nazw wyrównuje skrypt do najdłuższej w całym rzędzie kart (wyrownajNazwy w script.js), dzięki czemu kwadraciki formy stoją na jednym poziomie niezależnie od tego, ile linii zajmuje nazwa. Zapas na trzy linie działa, zanim skrypt zdąży policzyć. */ .fixture__team { display: flex; align-items: flex-start; justify-content: center; min-height: 3.4em; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* ---------- FORMA: OSTATNIE 5 MECZÓW ---------- */ .forma { display: inline-flex; gap: 3px; } .forma__box { position: relative; display: block; width: 15px; height: 15px; border-radius: 3px; background-color: var(--surface-2); } .forma__box::after { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; font-style: normal; line-height: 1; color: #FFFFFF; } /* wygrana — zielony kwadrat z fajką */ .forma__box--z { background-color: #2E9E5B; } .forma__box--z::after { content: "✓"; } /* remis — szary kwadrat z poziomą kreską */ .forma__box--r { background-color: #4A5560; } /* Kreska ma własne wymiary, więc nie może dziedziczyć rozciągania inset:0 z reguły wspólnej — zamiast tego wyśrodkowujemy ją przesunięciem. */ .forma__box--r::after { content: ""; inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 7px; height: 2px; border-radius: 1px; background-color: rgba(255, 255, 255, 0.85); } /* porażka — czerwony kwadrat z iksem */ .forma__box--p { background-color: #CE3F3D; } .forma__box--p::after { content: "✕"; font-size: 9px; } /* mecz jeszcze nierozegrany */ .forma__box--brak { background-color: transparent; border: 1px dashed rgba(255, 255, 255, 0.16); } .fixture__time { display: flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 1.5rem; font-size: 0.78rem; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; } .fixture__mapa { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background-color: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); transition: background-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s; } .fixture__mapa svg { width: 14px; height: 14px; } .fixture__mapa:hover { background-color: var(--gold); color: var(--bg); box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 4px rgba(255, 185, 0, 0.16); transform: scale(1.08); } /* karta zawodnika */ .player { position: relative; cursor: pointer; } .player__photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background-image: radial-gradient(75% 65% at 50% 22%, rgba(0, 125, 204, 0.6), transparent 72%), repeating-linear-gradient(135deg, #1A1F2A 0 22px, #232A38 22px 44px); transition: background-image 0.5s; } .player--featured .player__photo, .player:hover .player__photo { background-image: radial-gradient(70% 60% at 50% 25%, rgba(255, 185, 0, 0.55), transparent 70%), repeating-linear-gradient(135deg, #0D2033 0 22px, #123049 22px 44px); } /* zdjęcia zawodników to wycięte sylwetki na przezroczystym tle — leży nad gradientem z .player__photo, więc w przezroczystych miejscach (np. wokół ramion) prześwituje ten sam deseń co na pustych kafelkach, zamiast czarnego tła strony. */ .player__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; /* drop-shadow (nie box-shadow) celowo — trzyma się konturu wyciętej sylwetki, więc odrywa zawodnika od deseniu w tle zamiast rzucać cień na cały prostokątny kafelek. Dwie warstwy: ciasna kontaktowa + szeroka miękka, bo pojedynczy cień ginie na ciemnym deseniu. */ filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)) drop-shadow(0 18px 26px rgba(0, 0, 0, 0.65)); transition: transform 0.5s var(--ease); } /* powiększa się tylko zdjęcie — .player__photo ma overflow: hidden, więc kafelek trzyma swój rozmiar, a nadmiar po prostu się chowa */ .player:hover .player__foto { transform: scale(1.12); } /* Zawodnik bez wgranego zdjęcia dostaje sylwetkę z png/zdjecieProfilowe.png. Plik to czarny kształt na przezroczystym tle, więc wprost na ciemnym kafelku byłby prawie niewidoczny — bierzemy z niego sam kształt (maska) i wypełniamy stonowaną jasnością, tak jak loga sponsorów w pasku. Sylwetka stoi na dolnej krawędzi, bo to popiersie: obcięte u dołu ramiona wyglądają jak kadr prawdziwego zdjęcia, a nie jak ikonka wisząca w środku. */ .player__zastepcze { position: absolute; left: 50%; bottom: 0; width: 86%; aspect-ratio: 1; transform: translateX(-50%); background-color: rgba(255, 255, 255, 0.22); -webkit-mask-image: url('png/zdjecieProfilowe.png'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: bottom center; -webkit-mask-size: contain; mask-image: url('png/zdjecieProfilowe.png'); mask-repeat: no-repeat; mask-position: bottom center; mask-size: contain; transition: transform 0.5s var(--ease), background-color 0.5s; } /* ten sam ruch co przy prawdziwym zdjęciu — translateX trzyma wyśrodkowanie */ .player:hover .player__zastepcze { transform: translateX(-50%) scale(1.08); background-color: rgba(255, 255, 255, 0.32); } .player__label { display: flex; align-items: baseline; gap: 0.75rem; padding-top: 1rem; } .player__no { font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--gold); } .player__name small { display: block; font-size: 0.8rem; color: var(--muted); } .player__poz { display: block; margin-top: 0.15rem; font-style: normal; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .player__name strong { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; } /* ---------- OKNO Z PEŁNĄ TREŚCIĄ POSTA ---------- */ .modal[hidden] { display: none; } .modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); } .modal__tlo { position: absolute; inset: 0; background-color: rgba(4, 5, 7, 0.82); backdrop-filter: blur(6px); animation: modalTlo 0.35s var(--ease); } .modal__okno { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(980px, 100%); max-height: min(86vh, 760px); background-color: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); overflow: hidden; animation: modalOkno 0.4s var(--ease); transition: grid-template-columns 0.4s var(--ease), width 0.4s var(--ease), max-height 0.4s var(--ease); } /* kliknięcie w zdjęcie — okno rozszerza się na całą szerokość, panel z tekstem chowa się, zostaje sama powiększona fotografia */ .modal__okno--zoom { grid-template-columns: minmax(0, 1fr); width: min(1400px, 96vw); /* height, nie tylko max-height — inaczej pionowe zdjęcia (najczęstsze tu kadry z Facebooka) nie rosną wcale, bo to wysokość je ogranicza, a szersze okno samo w sobie nic im nie daje */ height: 92vh; max-height: 92vh; } .modal__okno--zoom .modal__tresc { display: none; } @keyframes modalTlo { from { opacity: 0; } } @keyframes modalOkno { from { opacity: 0; transform: translateY(24px) scale(0.98); } } .modal__zamknij { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; width: 40px; height: 40px; border: none; border-radius: 50%; background-color: rgba(8, 9, 12, 0.75); color: #FFFFFF; font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background-color 0.3s, transform 0.3s var(--ease); } .modal__zamknij:hover { background-color: var(--blue); transform: rotate(90deg); } .modal__media { position: relative; min-height: 260px; } /* contain, nie cover — grafiki z postów to najczęściej plakaty meczowe z datą i godziną przy krawędziach, więc nic nie może zostać obcięte */ .modal__foto { height: 100%; background-color: var(--bg-2); background-size: contain; background-position: center; background-repeat: no-repeat; min-height: 260px; cursor: zoom-in; } .modal__okno--zoom .modal__foto { cursor: zoom-out; } .modal__foto--wideo { cursor: default; } .modal__foto--wideo iframe { display: block; width: 100%; height: 100%; min-height: 260px; border: 0; } /* strzałki galerii — nakładka na zdjęcie, widoczna tylko gdy post ma więcej niż jedno zdjęcie (JS ustawia hidden) */ .modal__galeria { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 0.75rem; pointer-events: none; } /* [hidden] ma tę samą specyficzność co .modal__galeria, więc bez tej reguły samo ustawienie hidden w JS nic by nie dawało — display: flex wyżej i tak by wygrywał i pasek zostawałby widoczny */ .modal__galeria[hidden] { display: none; } .modal__strzalka { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 50%; background-color: rgba(8, 9, 12, 0.6); color: #FFFFFF; font-size: 1.1rem; cursor: pointer; pointer-events: auto; transition: background-color 0.3s, transform 0.2s; } .modal__strzalka:hover { background-color: var(--gold); color: var(--bg); transform: scale(1.08); } .modal__licznik { position: absolute; bottom: 0.85rem; left: 50%; transform: translateX(-50%); padding: 0.3rem 0.75rem; border-radius: 999px; background-color: rgba(8, 9, 12, 0.6); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; color: #FFFFFF; pointer-events: none; } /* post bez zdjęcia — okno zwęża się do samej treści */ .modal__okno.bez-foto { grid-template-columns: minmax(0, 1fr); width: min(620px, 100%); } .modal__okno.bez-foto .modal__media { display: none; } .modal__tresc { display: flex; flex-direction: column; /* max-height wprost na tym elemencie, nie tylko na .modal__okno — samo min-height:0 nie wystarcza, bo .modal__okno ma max-height (nie height), więc nie daje dzieciom określonej wysokości do przycięcia */ min-height: 0; max-height: min(86vh, 760px); padding: clamp(1.5rem, 4vw, 2.5rem); overflow-y: auto; } .modal__meta { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; } .modal__data { font-size: 0.8rem; color: var(--muted); } .modal__tytul { font-size: clamp(1.15rem, 2.5vw, 1.5rem); font-weight: 800; line-height: 1.25; margin-bottom: 1.1rem; } .modal__tekst { flex: 1; margin-bottom: 1.75rem; font-size: 0.95rem; line-height: 1.65; color: rgba(255, 255, 255, 0.82); white-space: pre-wrap; /* zachowuje akapity i łamania wierszy z Facebooka */ overflow-wrap: anywhere; } /* kafelek posta obsługiwany klawiaturą */ .post:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; } @media (max-width: 780px) { .modal__okno { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .modal__media { min-height: 200px; max-height: 34vh; } /* w trybie powiększenia okno rośnie do 92vh (patrz .modal__okno--zoom), ale bez tego override zdjęcie zostawało przycięte do 34vh z reguły wyżej — samo okno się powiększało, a fotografia w środku nie */ .modal__okno--zoom { grid-template-rows: minmax(0, 1fr); } .modal__okno--zoom .modal__media { max-height: none; } } /* ---------- ODLICZANIE ---------- */ .countdown { position: relative; padding: clamp(4rem, 10vh, 7rem) 0; } /* Poświaty mają wychodzić poza sekcję i wtapiać się w sąsiednie. Dlatego: brak overflow na sekcji, duży zapas w pionie, przezroczyste tło (żaden pełny kolor, bo zasłoniłby sąsiadów) i z-index pod treścią. */ .countdown__bg { position: absolute; inset: -340px 0; z-index: -1; pointer-events: none; background: radial-gradient(48% 34% at 18% 34%, rgba(0, 125, 204, 0.40), transparent 72%), radial-gradient(46% 32% at 84% 68%, rgba(255, 185, 0, 0.30), transparent 72%); will-change: transform; } .countdown__box { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem); background-color: rgba(20, 23, 30, 0.82); backdrop-filter: blur(12px); border: 1px solid var(--line); text-align: center; } .countdown__teams { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; } .countdown__teams .shield::after { font-size: 1.8rem; } .vs { font-size: 1.1rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .clock { display: flex; justify-content: center; gap: clamp(0.75rem, 3vw, 2.5rem); } /* ---------- mecz w trakcie ---------- */ /* na czas spotkania zegar ustępuje miejsca etykiecie */ .countdown.is-trwa .clock { display: none; } .countdown.is-trwa .countdown__trwa { display: flex; } /* Etykieta pokazuje się WYŁĄCZNIE przez klasę .is-trwa. Sam atrybut hidden tu nie wystarcza: reguła z display przebija [hidden] z arkusza przeglądarki, więc napis wisiał obok tykającego zegara. */ .countdown__trwa { display: none; align-items: center; justify-content: center; gap: 0.7rem; /* mniej więcej tyle, ile zajmował zegar — sekcja nie skacze przy zmianie */ min-height: clamp(3.4rem, 9vw, 5.4rem); font-size: clamp(1.3rem, 3.5vw, 2rem); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .countdown__kropka { width: 14px; height: 14px; border-radius: 50%; background-color: #E5342F; box-shadow: 0 0 0 0 rgba(229, 52, 47, 0.65); animation: puls 1.4s ease-out infinite; } /* kropka pulsuje i rozchodzi się poświatą — sygnał, że wynik żyje */ @keyframes puls { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(229, 52, 47, 0.65); } 70% { opacity: 0.55; box-shadow: 0 0 0 12px rgba(229, 52, 47, 0); } 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(229, 52, 47, 0); } } /* przy wyłączonych animacjach kropka ma zostać widoczna, nie zniknąć */ @media (prefers-reduced-motion: reduce) { .countdown__kropka { opacity: 1; box-shadow: none; } } .clock__unit strong { display: block; font-size: clamp(2.4rem, 7vw, 4.2rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .clock__unit span { display: block; margin-top: 0.4rem; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .countdown__meta { margin-top: 2rem; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--muted); } /* ---------- TABELA ---------- */ .table { width: 100%; border-collapse: collapse; } .table th { padding: 1rem; border-bottom: 1px solid var(--line); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; text-align: left; color: var(--muted); } .table td { padding: 1.15rem 1rem; border-bottom: 1px solid var(--line); font-size: 0.95rem; } .table__crest { width: 52px; padding-right: 0; padding-left: 0; line-height: 0; } .table tbody tr { transition: background-color 0.3s; } .table tbody tr:hover { background-color: var(--surface); } .table td:last-child { font-weight: 800; } .table .is-us { background-color: rgba(0, 125, 204, 0.14); box-shadow: inset 3px 0 0 var(--gold); } .table .is-us td { font-weight: 800; color: var(--gold); } .zrodlo { margin-top: 1.25rem; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--muted); } /* ---------- OSTATNIA KOLEJKA ---------- */ .wyniki { list-style: none; border-top: 1px solid var(--line); } .wyniki__pusto { padding: 2.5rem 1rem; text-align: center; color: var(--muted); font-size: 0.9rem; } .wynik { display: grid; /* pierwsza kolumna to termin meczu, potem gospodarz, wynik i gość */ grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: clamp(0.75rem, 3vw, 2rem); padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); transition: background-color 0.3s; } /* data nad godziną, wąska stała kolumna — dzięki temu nazwy klubów w kolejnych wierszach zaczynają się w tej samej osi */ .wynik__termin { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; min-width: 62px; font-size: 0.72rem; line-height: 1.2; color: var(--muted); font-variant-numeric: tabular-nums; } .wynik__termin b { font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .wynik__termin i { font-style: normal; color: var(--blue-light); font-weight: 700; } .wynik.is-us .wynik__termin i { color: var(--gold); } .wynik:hover { background-color: var(--surface); } /* mecz Janovii wyróżniony tak samo jak jej wiersz w tabeli */ .wynik.is-us { background-color: rgba(0, 125, 204, 0.14); box-shadow: inset 3px 0 0 var(--gold); } .wynik__druzyna { display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; font-size: 0.9rem; font-weight: 600; } /* gospodarz czyta się od środka na zewnątrz, jak na tablicy wyników */ .wynik__druzyna--gosp { justify-content: flex-end; text-align: right; } .wynik__rezultat { min-width: 74px; text-align: center; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .wynik.is-us .wynik__rezultat { color: var(--gold); } .wynik__rezultat--brak { color: var(--muted); font-weight: 400; } @media (max-width: 620px) { .wynik { /* czwarta kolumna nie zmieściłaby się obok nazw klubów, więc termin przenosimy do osobnego wiersza nad meczem, na całą szerokość */ grid-template-columns: 1fr auto 1fr; gap: 0.5rem; padding: 0.8rem 0.5rem; } .wynik__termin { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: center; gap: 0.4rem; min-width: 0; margin-bottom: 0.2rem; } .wynik__druzyna { flex-direction: column; gap: 0.4rem; font-size: 0.75rem; text-align: center; } /* w pionie herb ma być u góry po obu stronach — u gospodarza kolejność w kodzie jest odwrotna, więc odwracamy ją tutaj */ .wynik__druzyna--gosp { flex-direction: column-reverse; text-align: center; } .wynik__rezultat { min-width: 58px; } } /* przycisk pod wynikami ostatniej kolejki */ .pod-wynikami { margin-top: 2rem; text-align: center; } .przycisk { display: inline-block; padding: 0.95rem 2.25rem; border: 1px solid var(--line); background-color: var(--surface); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; transition: background-color 0.3s, border-color 0.3s, transform 0.3s var(--ease); } .przycisk:hover { background-color: var(--blue); border-color: var(--blue); transform: translateY(-2px); } /* ---------- PODSTRONA (terminarz) ---------- */ .podstrona { padding: calc(96px + clamp(2.5rem, 8vh, 5rem)) 0 clamp(1.5rem, 4vh, 3rem); background: radial-gradient(70% 120% at 20% 0%, rgba(0, 125, 204, 0.28), transparent 65%), var(--bg-2); border-bottom: 1px solid var(--line); } .powrot { display: inline-block; margin-bottom: 1.25rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); transition: color 0.3s; } .powrot:hover { color: var(--gold); } .podstrona h1 { font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; } .podstrona h1 em { font-style: normal; color: var(--gold); } .podstrona__opis { margin-top: 0.9rem; font-size: 0.9rem; letter-spacing: 0.04em; color: var(--muted); } .runda + .runda { margin-top: clamp(3rem, 8vh, 5rem); } .runda__tytul { margin-bottom: 1.75rem; font-size: clamp(1.4rem, 3.5vw, 2.1rem); font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; } .runda__tytul em { font-style: normal; color: var(--gold); } .kolejka { margin-bottom: 1rem; } /* Kolejka zwinięta pokazuje sam pasek z wynikiem Janovii, rozwinięta — wszystkie mecze. Otwarta zostaje ostatnia rozegrana i najbliższa nadchodząca; resztę rozwija się kliknięciem. */ .kolejka__head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 10px; background-color: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.3s, background-color 0.3s; } .kolejka__head:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Rozwijanie: siatka jedzie z 0fr do 1fr, więc przeglądarka sama animuje wysokość treści — bez mierzenia jej w JS i bez skoku na końcu. */ .kolejka__tresc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s var(--ease-out), opacity 0.3s; opacity: 0; } .kolejka__tresc > * { overflow: hidden; min-height: 0; } .kolejka.is-otwarta .kolejka__tresc { grid-template-rows: 1fr; opacity: 1; } .kolejka__head:hover { border-color: var(--blue); background-color: var(--surface-2); } .kolejka.is-otwarta .kolejka__head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; } /* własna strzałka po prawej, obracana przy rozwinięciu */ .kolejka__head::after { content: ""; width: 8px; height: 8px; margin-left: 0.25rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.35s var(--ease-out), border-color 0.3s; } /* strzałka obraca się razem z rozwinięciem */ .kolejka.is-otwarta .kolejka__head::after { transform: rotate(-135deg) translate(-2px, -2px); } .kolejka__head:hover::after { border-color: var(--gold); } /* wynik Janovii na zwiniętym pasku */ .kolejka__wynik { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; font-size: 0.8rem; font-weight: 700; color: var(--text); } .kolejka__wynik b { padding: 0.15rem 0.5rem; border-radius: 5px; background-color: var(--bg-2); color: var(--gold); font-size: 0.82rem; white-space: nowrap; } /* opis terminu odsuwamy od wyniku; gdy wyniku nie ma, sam idzie do prawej */ .kolejka__wynik ~ span { margin-left: 0; } .kolejka__head > span:not(.kolejka__wynik) { margin-left: auto; } .kolejka__wynik ~ span:not(.kolejka__wynik) { margin-left: 0; } .kolejka.is-otwarta .wyniki { border: 1px solid var(--line); border-top: none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 0.75rem 1rem; } .kolejka__head h3 { font-size: 1rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-light); } .kolejka__head span { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); } /* ---------- SEZONY ARCHIWALNE ---------- */ .sezon { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 1rem; overflow: hidden; background-color: var(--surface); } .sezon__head { display: flex; align-items: baseline; gap: 1rem 1.5rem; flex-wrap: wrap; padding: 1.25rem 1.5rem; list-style: none; cursor: pointer; } .sezon__head::-webkit-details-marker { display: none; } .sezon__head::before { content: '+'; order: -1; width: 1.4rem; font-size: 1.1rem; font-weight: 800; color: var(--gold); transition: transform 0.3s var(--ease); } .sezon[open] .sezon__head::before { transform: rotate(45deg); } .sezon__nazwa { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; } .sezon__nazwa em { font-style: normal; padding: 0.15em 0.6em; margin-left: 0.5em; border-radius: 999px; background-color: rgba(255, 185, 0, 0.16); color: var(--gold); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: middle; } .sezon__liga { font-size: 0.85rem; color: var(--muted); flex: 1 1 auto; } .sezon__wynik { font-size: 0.85rem; font-weight: 800; color: var(--blue-light); white-space: nowrap; } .sezon .table { border-top: 1px solid var(--line); } .sezon .table th:first-child, .sezon .table td:first-child { padding-left: 1.5rem; } .sezon .table th:last-child, .sezon .table td:last-child { padding-right: 1.5rem; } /* ---------- PEŁNA KADRA ---------- */ .kadra-grupa + .kadra-grupa { margin-top: clamp(3rem, 8vh, 5rem); } .kadra-grupa__tytul { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1.75rem; font-size: clamp(1.4rem, 3.5vw, 2.1rem); font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; } .kadra-grupa__tytul span { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; color: var(--muted); } .kadra-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.75rem 1.25rem; } /* ---------- LICZBY ---------- */ .stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background-color: var(--bg-2); padding: clamp(3rem, 8vh, 5rem) 0; } .stats__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem clamp(2.5rem, 8vw, 6rem); } .stat { text-align: center; } .stat strong { display: block; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--gold); font-variant-numeric: tabular-nums; } .stat span { display: block; margin-top: 0.6rem; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* ---------- STOPKA ---------- */ /* flex, nie sztywne 2fr 1fr 1fr 1fr: kolumn w stopce bywa raz jedna, raz kilka, a przy siatce na cztery ślady po usuniętych zostawały jako pusta przestrzeń po prawej */ .footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem clamp(2.5rem, 6vw, 5rem); padding-top: clamp(3rem, 8vh, 5rem); padding-bottom: 3rem; } .footer__brand { flex: 1 1 260px; } .footer__brand p { margin-top: 1.25rem; font-size: 0.9rem; color: var(--muted); } .footer__col h4 { margin-bottom: 1.25rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } .footer__col a { display: block; padding: 0.3rem 0; font-size: 0.9rem; color: var(--muted); transition: color 0.3s, transform 0.3s var(--ease); } .footer__col a:hover { color: var(--text); transform: translateX(5px); } .footer__bottom { border-top: 1px solid var(--line); padding: 1.5rem 0; } .footer__bottom .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--muted); } /* ========================================= ODSŁANIANIE PRZY PRZEWIJANIU ========================================= */ [data-reveal] { opacity: 0; transform: translateY(34px); /* przezroczystość wchodzi szybciej niż ruch (0.55s vs 0.9s), więc element jest już czytelny, gdy jeszcze dojeżdża — bez wrażenia, że treść „doskakuje" na końcu */ transition: opacity 0.55s var(--ease-out), transform 0.9s var(--ease-back); transition-delay: var(--d, 0ms); } /* warianty kierunku — muszą siedzieć PO bazowej regule [data-reveal], żeby wygrać przy równej specyficzności selektorów atrybutowych */ [data-reveal="left"] { transform: translateX(-46px); } [data-reveal="right"] { transform: translateX(46px); } [data-reveal="scale"] { transform: scale(0.9); } [data-reveal="zoom"] { transform: scale(1.08); } [data-reveal].is-in { opacity: 1; transform: none; } /* ========================================= RESPONSYWNOŚĆ ========================================= */ @media (max-width: 1000px) { .nav { position: fixed; inset: 0 0 0 auto; width: min(78vw, 340px); flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.5rem; padding: 2rem var(--pad); background-color: var(--bg-2); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform 0.5s var(--ease); } .nav a { font-size: 1.15rem; } .nav-toggle:checked ~ .nav { transform: none; } .burger { display: block; z-index: 160; } .nav-toggle:checked ~ .burger span { background-color: transparent; } .nav-toggle:checked ~ .burger span::before { transform: translateY(8px) rotate(45deg); } .nav-toggle:checked ~ .burger span::after { transform: translateY(-8px) rotate(-45deg); } .header__side--end { display: none; } /* Trzy liczby klubu w jednym rzędzie — przy flexie z dużym odstępem trzecia zawijała się do drugiej linii i zostawała samotnie pod spodem. Sztywne trzy kolumny trzymają je równo, a mniejszy podpis (krótszy odstęp między literami) mieści się w wąskiej kolumnie. */ .stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 0 0.75rem; } .stat span { margin-top: 0.45rem; font-size: 0.62rem; letter-spacing: 0.06em; } } @media (max-width: 620px) { .head { align-items: flex-start; } .rail > * { flex: 0 0 78vw; } .stats__grid { gap: 2rem 3rem; } .footer__inner { grid-template-columns: 1fr; } .hero__scroll { display: none; } /* kolumny: 1 poz. | 2 herb | 3 drużyna | 4 M | 5 bramki | 6 pkt */ .table th:nth-child(5), .table td:nth-child(5) { display: none; } .table th, .table td { padding-left: 0.5rem; padding-right: 0.5rem; } } /* ========================================= OGRANICZONY RUCH ========================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-reveal], .hero__meta, .hero__title .line, .hero .arrow-link { opacity: 1; transform: none; } }