/* Nadpisania: brakujace obrazki z img/ oraz tlo strony.
5 powierzchni: L0 #14101a, L1 #1c1121, L2 #20132b, L3 #33253c, L4 #e4a101.
Żadnych dodatkowych hexów powierzchni. Tokeny: WBL DESIGN SYSTEM.
Nowe reguły WBL: sekcja „WBL DESIGN SYSTEM” na końcu tego pliku.
Nie dokładaj przypadkowych override'ów powyżej — najpierw token --wbl-*. */
/* Ciemne tlo strony — szablon nie ustawia tla na body, Bootstrap zostawia biel.
Kolor jak .header-top-area. */
body {
background-color: var(--tlo);
font-variant-numeric: tabular-nums;
overflow-x: clip;
color: var(--wbl-text);
}
/* WYJATEK: system typografii WBL — trzy kroje, jeden rytm odstępów.
Szablon ładuje Oxanium; Inter i Barlow Condensed dochodzą w layoucie.
Nie zmieniamy palety kolorów, tylko hierarchię pisma. */
/* =========================================================
WBL DESIGN SYSTEM
=========================================================
Jedyna oficjalna paleta publicznego portalu. Nowe komponenty
(.wbl-*) biorą kolory, kroje i odstępy stąd.
Panel admina (/style.css z src/style.css) to osobny stos Tailwind
— te dwa arkusze nie kaskadują na jednej stronie.
Aliasy --tlo/--zloto poniżej spajają starsze reguły z tokenami
--wbl-*, bez przepisywania setek selektorów Geco.
========================================================= */
:root {
--wbl-font-display: "Oxanium", sans-serif;
--wbl-font-ui: "Inter", sans-serif;
--wbl-font-data: "Barlow Condensed", sans-serif;
--wbl-space-1: 4px;
--wbl-space-2: 8px;
--wbl-space-3: 12px;
--wbl-space-4: 16px;
--wbl-space-5: 24px;
--wbl-space-6: 32px;
--wbl-space-7: 48px;
--wbl-space-8: 64px;
--wbl-tracking-display: -0.03em;
--wbl-tracking-data: -0.02em;
--wbl-tracking-ui: 0.01em;
--wbl-tracking-label: 0.12em;
--wbl-text-tertiary-opacity: 0.72;
--wbl-radius: 2px;
--wbl-hover-border: var(--ramka-wlos);
--wbl-hover-ms: 180ms;
/* W/P — semantyka poza 5 powierzchniami; nie mapować wygranej na złoto. */
--wygrana: #4ea56b;
--przegrana: #b8455a;
--wys-nawigacji: 0px; /* nagłówek nie jest position:sticky — thead klei się do okna */
/* 5 powierzchni — I KONIEC. Żadnych dodatkowych hexów powierzchni. */
--wbl-page: #14101a; /* L0 PAGE */
--wbl-surface: #1c1121; /* L1 PRIMARY SURFACE */
--wbl-emphasis: #20132b; /* L2 INNER / EMPHASIS */
--wbl-structure: #33253c; /* L3 STRUCTURE / DIVIDERS */
--wbl-signal: #e4a101; /* L4 SIGNAL */
/* Te same hex L0–L2, z alpha — karty/tabele przepuszczają wideo. */
--wbl-page-fill: rgba(20, 16, 26, 0.72);
--wbl-page-transparent: rgba(20, 16, 26, 0);
--wbl-surface-fill: rgba(28, 17, 33, 0.80);
--wbl-emphasis-fill: rgba(32, 19, 43, 0.86);
--wbl-bg: var(--wbl-page);
--wbl-gold: var(--wbl-signal);
--wbl-border: var(--wbl-structure);
/* Hairline = L3 z alpha, NIE nowy hue (#ece9f0). */
--wbl-border-subtle: rgba(51, 37, 60, 0.65);
--wbl-text: #ece9f0; /* PRIMARY — tekst, nie 6. powierzchnia */
--wbl-text-muted: #8b8296; /* SECONDARY */
/* Hover: linia L4 z alpha. Tło = światło z PRIMARY text, nie nowa powierzchnia. */
--wbl-interaction-line: rgba(228, 161, 1, 0.85);
--wbl-interaction-bg: rgba(236, 233, 240, 0.025);
--wbl-interaction-ms: 180ms;
--wbl-press-ms: 160ms;
--wbl-drawer-ms: 280ms;
/* --wbl-toast-ms już poniżej — nie duplikować. */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
/* WYJATEK: krzywe trzech animacji portalu (kupon, odsłanianie, paski). */
--wbl-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--wbl-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
--wbl-kupon-wejscie-ms: 280ms;
--wbl-kupon-wyjscie-ms: 200ms;
--wbl-toast-ms: 200ms;
--wbl-text-secondary: var(--wbl-text-muted);
--wbl-container: 1180px;
--wbl-gutter: 24px;
/* Semantyka publiczna (mono + złoto). W/P formy zostają poza tymi 5. */
--wbl-win: var(--wbl-text);
--wbl-loss: var(--wbl-text-muted);
--wbl-live: var(--wbl-gold);
--wbl-warning: var(--wbl-gold);
--wbl-team: var(--wbl-text);
--tlo: var(--wbl-page);
--karta: var(--wbl-surface-fill);
--ramka: var(--wbl-structure);
--ramka-wlos: var(--wbl-border-subtle);
--tekst: var(--wbl-text);
--tekst-cichy: var(--wbl-text-muted);
--zloto: var(--wbl-signal);
--zloto-tlo: rgba(228, 161, 1, 0.09);
--wiersz-hover: var(--wbl-interaction-bg);
--wbl-nav-idle: var(--wbl-text-muted);
}
body,
p,
a,
li,
input,
button,
.btn,
.footer-text p,
.coming-match-info p,
.copyright-text p {
font-family: var(--wbl-font-ui);
letter-spacing: var(--wbl-tracking-ui);
}
/* Geco maluje linki i przyciski na niebiesko (a, button: #1696e7; a:hover: #2B96CC).
To drugi kolor akcentu — zakazany. Link bez własnej klasy dostaje złoto, po
najechaniu kolor tekstu (jak menu). Ta sama waga co u Geco, późniejszy plik wygrywa;
linki z własnymi klasami niżej w tym pliku zostają przy swoich kolorach. */
a {
color: var(--wbl-gold);
}
a:hover,
a:focus-visible {
color: var(--wbl-text);
}
button {
color: inherit;
}
/* Oxanium tylko tożsamość: h1–h3, nicki, drużyny. Nie na cały UI. */
h1,
h2,
h3,
.section-title h2,
.profil-hero-nick,
.karta-gracza-nick,
.match-team-name span,
.match-team-name a {
font-family: var(--wbl-font-display);
letter-spacing: var(--wbl-tracking-display);
overflow-wrap: anywhere;
}
h4,
h5,
h6 {
font-family: var(--wbl-font-ui);
letter-spacing: var(--wbl-tracking-ui);
font-weight: 600;
}
/* KROK 10: Geco landing leftovers — padding nav, tabela 790px.
Aktywna zakładka: pełne reguły w bloku KROK 5 na końcu pliku. */
.navbar-wrap ul li a {
font-family: var(--wbl-font-ui);
letter-spacing: 0.1em;
font-weight: 600;
padding: var(--wbl-space-4) var(--wbl-space-5);
}
.wbl-eyebrow {
display: block;
font-family: var(--wbl-font-data);
font-size: 11px;
font-weight: 600;
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
color: var(--wbl-text-muted);
}
.wbl-heading {
font-family: var(--wbl-font-display);
font-weight: 700;
letter-spacing: var(--wbl-tracking-display);
line-height: 1.1;
}
.wbl-data {
font-family: var(--wbl-font-data);
font-variant-numeric: tabular-nums;
letter-spacing: var(--wbl-tracking-data);
}
.section-title > span,
.stat-label,
.stat-etykieta,
table.tabela-wynikowa thead th,
.mecz-hero-naglowek .stat-etykieta,
.profil-mecz-data,
.profil-mecz-mapa,
table.tabela-wynikowa .community-post-content span {
font-family: var(--wbl-font-data);
font-size: 11px;
font-weight: 500;
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
color: var(--wbl-text-muted);
}
.karta-gracza-meta {
font-family: var(--wbl-font-data);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--wbl-text-muted);
font-variant-numeric: tabular-nums;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.section-title > span {
display: block;
line-height: 1;
margin-bottom: var(--wbl-space-2);
}
.section-title h2 {
font-family: var(--wbl-font-display);
font-weight: 700;
letter-spacing: var(--wbl-tracking-display);
line-height: 1.1;
font-size: clamp(1.75rem, 1.1rem + 3.2vw, 2.5rem);
margin-bottom: 0;
}
/* Analityczny nagłówek sekcji (klasy z HTML: .section-header + h2.section-title).
Tytuł = Inter, nie Geco 45px i nie małe wersaliki. Tag/akcja = dane. */
/* #5 Logowanie: pełne reguły (hexy, hover, złoty ring) w bloku KROK 8 wyżej.
Ten duplikat nadpisywał specyfikację (L2 zamiast #1c1121, hover bez #5a3f6e). */
/* Analityczny nagłówek — źródło prawdy kaskady (po KROK 9).
Tytuł Inter + wrap; tag Barlow; linia; tokeny odstępu. Bije Geco `.section-title h2`. */
.naglowek-sekcji.section-header {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--wbl-space-2) var(--wbl-space-4);
margin-top: var(--wbl-space-5);
margin-bottom: var(--wbl-space-5);
padding-bottom: var(--wbl-space-3);
border-bottom: 1px solid var(--ramka-wlos);
}
section.pt-90 > .container > .naglowek-sekcji:first-child,
section.pt-120 > .container > .naglowek-sekcji:first-child {
margin-top: 0;
}
.naglowek-sekcji.section-header h2.section-title {
flex: 1 1 12rem;
min-width: 0;
margin: 0;
font-family: var(--wbl-font-ui);
font-size: clamp(1.125rem, 0.55rem + 2.4vw, 1.375rem);
font-weight: 600;
letter-spacing: var(--wbl-tracking-ui);
text-transform: none;
color: var(--wbl-text);
line-height: 1.2;
overflow-wrap: anywhere;
}
.naglowek-sekcji.section-header .section-tag,
.naglowek-sekcji.section-header .meta {
font-family: var(--wbl-font-data);
font-size: 12px;
font-weight: 600;
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
color: var(--wbl-text-muted);
}
.naglowek-sekcji.section-header .wbl-eyebrow {
flex: 1 0 100%;
margin: 0;
}
.naglowek-sekcji.section-header .akcja {
margin-left: auto;
font-family: var(--wbl-font-ui);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--wbl-tracking-ui);
color: var(--wbl-text-muted);
text-decoration: none;
}
.naglowek-sekcji.section-header .akcja:hover,
.naglowek-sekcji.section-header .akcja:focus {
color: var(--wbl-text);
text-decoration: none;
}
.section-title h2 span {
font-family: var(--wbl-font-display);
color: inherit;
}
.stat-value,
.stat-wartosc,
.tabela-wynikowa-liczba,
.tabela-wynikowa-punkty,
.mecz-hero-wynik,
.profil-hero-pkt,
.profil-mecz-wynik,
.profil-mecz-kd,
.coming-match-info h5 span,
.coming-match-status h5,
table.tabela-wynikowa tbody td {
font-family: var(--wbl-font-data);
font-variant-numeric: tabular-nums;
letter-spacing: var(--wbl-tracking-data);
}
.coming-match-status {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--wbl-space-2);
margin-left: var(--wbl-space-4);
margin-right: var(--wbl-space-4);
}
.coming-match-status h5 {
margin: 0;
font-size: 28px;
font-weight: 700;
line-height: 1;
letter-spacing: var(--wbl-tracking-data);
}
.coming-match-status > span {
font-family: var(--wbl-font-data);
font-size: 11px;
font-weight: 500;
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
}
.coming-match-info h5 {
font-family: var(--wbl-font-ui);
font-size: 18px;
font-weight: 600;
letter-spacing: var(--wbl-tracking-ui);
margin-bottom: var(--wbl-space-2);
}
.coming-match-info h5.wbl-data {
font-family: var(--wbl-font-data);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--wbl-text-muted);
}
.coming-match-info h5 span {
color: var(--tekst-cichy);
}
.coming-match-info h5 span.zwyciezca,
.zwyciezca {
color: var(--zloto);
}
.coming-match-info p.wbl-data {
font-family: var(--wbl-font-data);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--wbl-text-muted);
}
table.tabela-wynikowa .community-post-content > a {
font-family: var(--wbl-font-display);
font-weight: 700;
color: var(--wbl-text);
}
.match-team-name a,
.match-team-name span {
margin-top: var(--wbl-space-2);
}
/* Ozdobniki wtyczek: preloader, odliczanie, strzalki karuzeli. */
#preloader,
.coming-time,
.owl-carousel .owl-nav,
.owl-carousel .owl-dots,
.slick-arrow,
.slick-dots {
display: none;
}
/* Zastepuje img/images/btn_overlay.png — bez złotej plamy i skosu. */
.btn::before,
.btn::after,
.btn.btn-style-two::before,
.btn.btn-style-two::after {
display: none;
content: none;
}
.btn,
.btn.btn-style-two {
border-radius: var(--wbl-radius);
padding: var(--wbl-space-3) var(--wbl-space-5);
margin: 0;
background-image: none;
background-color: var(--zloto);
color: var(--wbl-page);
box-shadow: none;
}
.btn:hover,
.btn.btn-style-two:hover {
color: var(--wbl-page);
background-color: var(--zloto);
}
/* Zastepuje img/images/offer_count_bg.png */
.header-top-offer .time-count > span::before {
background-image: none;
background-color: var(--karta);
}
/* Zastepuje img/bg/header_bg.jpg */
.main-header {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/header_bg.jpg */
.menu-style-two {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/header_bg.jpg */
.sticky-menu {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/header_social_bg.jpg */
.t-header-top-area .header-top-social ul li a {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/h3_header_bg.jpg */
.third-header-bg .bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/header_bottom_bg.png */
.header-bottom-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/h3_header_bg.jpg */
.third-header-bg .sticky-menu {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/fourth_header_top_bg.jpg */
.header-style-four .header-top-area {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/breadcrumb_bg.jpg */
.breadcrumb-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/breadcrumb_bg02.jpg */
.s-breadcrumb-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/breadcrumb_bg03.jpg */
.third-breadcrumb-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/slider/slider_bg.jpg */
.slider-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/slider/slider_bg02.jpg */
.slider-style-two {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/slider/third_banner_bg.jpg */
.third-banner-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/slider/fourth_banner_bg.jpg */
.home-four-slider .slider-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/brand_bg.jpg */
.brand-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/s_brand_bg.jpg */
.home-four-brand.brand-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/area_bg01.jpg */
.area-bg-one {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/area_bg02.jpg */
.area-bg-two {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/home_four_area_bg.png */
.home-four-area-bg .bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/images/title_bar.png — belka 270×13px to ozdobnik landing page. */
.title-style-two::before,
.title-style-three::before,
.title-style-three.white-title::before,
.home-four-title.text-center h2::after {
content: none;
display: none;
background-image: none;
background-color: transparent;
}
.title-style-two,
.title-style-three {
padding-bottom: 0;
}
/* Zastepuje img/bg/third_about_bg.jpg */
.third-about-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/images/section_line.png */
.third-section-title::after {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/my_info_box_bg.png */
.my-info-box-top {
background-image: none;
background-color: var(--wbl-surface);
}
/* title_bar04: ukryte razem z title-style-two::before */
/* Zastepuje img/images/dots.png */
.live-match-team::before {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/released_slide_bg.jpg */
.released-game-item-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/images/released_game_brush.png */
.released-game-content h4::before {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/game_manage_bg.jpg */
.game-mange-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/featured_game_bg.png */
.featured-game-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/cta_bg.jpg */
.cta-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/latest_match_bg.jpg */
.latest-match-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/third_team_bg.jpg */
.team-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/team_content_bg.png */
.third-team-content .main-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/team_content_hover_bg.png */
.third-team-content .hover-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/game_gallery_bg.png */
.game-gallery-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/just_gamer_bg.jpg */
.just-gamers-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/images/gamers_bg_conve01.png */
.just-gamers-bg::before {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/images/gamers_bg_conve02.png */
.just-gamers-bg::after {
background-image: none;
background-color: var(--wbl-surface);
}
/* title_bar03: ukryte razem z title-style-two::before */
/* Zastepuje img/bg/gamer_list_icon_bg.jpg */
.just-gamers-list-icon {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/features_bg.jpg */
.features-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/home_four_shop_bg.jpg */
.home-four-shop-area {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/upc_game_bg.jpg */
.upcoming-games-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/donation_bg.jpg */
.donation-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/my_match_bg.jpg */
.my-match-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/third_contact_bg.jpg */
.third-contact-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/footer_bg.jpg */
.footer-bg {
background-image: none;
background-color: var(--tlo);
}
/* Zastepuje img/bg/t_footer_bg.jpg */
.third-footer-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/s_footer_bg.jpg */
.s-footer-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/slider/fifth_banner_bg.jpg */
.home-five-banner {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/streaming_bg.jpg */
.live-streaming-area {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/h5_footer_bg.jpg */
.home-five-footer .footer-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/slider/magazine_banner_bg.jpg */
.home-six-banner {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/slider/shop_slider_bg.jpg */
.home-seven-slider {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/images/s_section_line.png */
.game-shop-title::after {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/makes_chair_bg.jpg */
.makes-gaming-chair {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/images/mgc_bg_conve01.png */
.makes-gaming-chair::before {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/images/mgc_bg_conve02.png */
.makes-gaming-chair::after {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/images/chair_discount_shape.png */
.chair-discount-area::before {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/streaming_bg02.jpg */
.live-streaming-two {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/latest_game_news.jpg */
.latest-game-news-area {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/h5_footer_bg.jpg */
.home-six-footer .footer-bg {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/game_gallery_bg.png */
.game-gallery-area.position-relative {
background-image: none;
background-color: var(--wbl-surface);
}
/* Zastepuje img/bg/header_bg.jpg */
.transparent-header {
background-image: none;
background-color: var(--wbl-surface);
}
/* WYJĄTEK: ciemna tabela wynikowa — brak w szablonie Geco.
Emblematy drużyn: jasnoszary #ece9f0 (monochrom), nie barwy z bazy.
Złoto tylko na numerze i punktach pierwszego miejsca.
Nagłówki (R, W, P, Mecze) to etykiety — mniejsze i przygaszone. */
table.tabela-wynikowa {
background: var(--wbl-surface);
color: var(--wbl-text);
}
table.tabela-wynikowa thead tr,
table.tabela-wynikowa thead th {
background: var(--wbl-emphasis);
border-color: var(--wbl-structure);
}
table.tabela-wynikowa tbody td,
table.tabela-wynikowa tbody th {
background: var(--wbl-surface);
color: var(--wbl-text);
border-color: var(--wbl-structure);
}
table.tabela-wynikowa .community-post-content {
display: flex;
align-items: center;
gap: var(--wbl-space-3);
text-align: left;
}
table.tabela-wynikowa tbody td,
table.tabela-wynikowa .tabela-wynikowa-liczba,
table.tabela-wynikowa .tabela-wynikowa-punkty {
font-variant-numeric: tabular-nums;
}
table.tabela-wynikowa .tabela-wynikowa-liczba {
font-weight: 700;
color: var(--wbl-text);
}
table.tabela-wynikowa .tabela-wynikowa-punkty {
color: var(--tekst);
font-weight: 700;
font-size: 16px;
}
table.tabela-wynikowa .tabela-pozycja-1,
table.tabela-wynikowa tbody tr:first-child .tabela-wynikowa-punkty {
color: var(--zloto);
font-weight: 800;
}
.community-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
.community-wrap table {
background: var(--wbl-surface);
box-shadow: none;
}
.community-wrap table.tabela-wynikowa {
width: 100%;
max-width: none;
min-width: 640px;
margin-top: 0;
}
table.tabela-wynikowa tbody tr td,
table.tabela-wynikowa tbody tr th {
transition: background-color var(--wbl-hover-ms) ease;
}
table.tabela-wynikowa tbody tr:hover td,
table.tabela-wynikowa tbody tr:hover th {
background: var(--wiersz-hover);
}
.table-row {
transition: background-color var(--wbl-interaction-ms) ease;
}
.table-row:hover {
background: var(--wbl-interaction-bg);
}
.form-strip {
display: inline-flex;
gap: 4px;
}
.form-item {
width: 18px;
height: 18px;
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.08);
font: 800 9px/1 "Inter", sans-serif;
}
.form-win {
background: rgba(255, 255, 255, 0.18);
color: var(--wbl-text);
border-color: rgba(255, 255, 255, 0.14);
}
.form-loss {
background: rgba(255, 255, 255, 0.04);
color: var(--wbl-text-muted);
border-color: rgba(255, 255, 255, 0.07);
}
@media (max-width: 1199.98px) {
.table-row:first-child::before {
display: none;
}
}
/* WYJĄTEK: etykieta vs wartość — Faceit/HLTV, nie szablon Geco.
Etykiety (MECZE, BILANS, K/D) nie krzyczą tak samo jak liczby. */
.stat-label,
.stat-etykieta {
display: block;
margin: 0 0 var(--wbl-space-1);
line-height: 1.3;
}
.stat-value,
.stat-wartosc {
display: block;
margin: 0;
font-size: 20px;
font-weight: 700;
line-height: 1.2;
letter-spacing: var(--wbl-tracking-data);
color: var(--wbl-text);
font-family: var(--wbl-font-data);
font-variant-numeric: tabular-nums;
}
.stat-wartosc-akcent {
color: var(--tekst);
}
.stat-para {
margin: 0 0 var(--wbl-space-3);
}
.stat-para:last-child {
margin-bottom: 0;
}
/* WYJĄTEK: karta gracza / drużyny — surface, nie coming-match-item z 5px złota. */
a.karta-gracza,
a.karta-druzyny {
display: flex;
align-items: center;
gap: var(--wbl-space-4);
width: 100%;
box-sizing: border-box;
padding: var(--wbl-space-4);
background-color: var(--wbl-surface);
border: 1px solid var(--wbl-border);
border-top: 1px solid var(--wbl-border);
border-bottom: 1px solid var(--wbl-border);
border-radius: var(--wbl-radius);
text-decoration: none;
color: inherit;
box-shadow: none;
transition: background-color var(--wbl-interaction-ms) ease, border-color var(--wbl-interaction-ms) ease;
}
a.karta-gracza:hover,
a.karta-gracza:focus,
a.karta-gracza:focus-visible,
a.karta-druzyny:hover,
a.karta-druzyny:focus,
a.karta-druzyny:focus-visible {
transform: none;
text-decoration: none;
color: inherit;
}
.karta-gracza-avatar {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background-color: var(--wbl-emphasis);
border: 1px solid var(--wbl-border);
color: var(--wbl-text-muted);
font-size: 20px;
font-weight: 700;
line-height: 1;
border-radius: var(--wbl-radius);
}
img.wbl-plik {
display: block;
object-fit: cover;
object-position: center;
flex-shrink: 0;
background-color: var(--wbl-emphasis);
border: 1px solid var(--wbl-border);
}
img.wbl-plik--karta {
width: 40px;
height: 40px;
}
img.herb.wbl-plik {
width: 18px;
height: 18px;
border-width: 0;
background: transparent;
}
.karta-gracza-avatar img.wbl-plik,
img.karta-gracza-avatar.wbl-plik {
width: 56px;
height: 56px;
}
.karta-gracza-avatar img.wbl-plik,
img.karta-gracza-avatar.wbl-plik,
.profil-hero-avatar.wbl-plik,
.chat-avatar img.wbl-plik,
.header-user-login img.header-avatar,
img.wbl-plik--osoba {
border-radius: 50%;
}
.profil-hero-avatar img.wbl-plik,
.profil-hero-avatar.wbl-plik {
width: 100%;
height: 100%;
}
.chat-avatar img.wbl-plik {
width: 32px;
height: 32px;
border: 0;
}
.header-user-login img.header-avatar {
display: inline-block;
width: 18px;
height: 18px;
object-fit: cover;
margin-right: 6px;
vertical-align: -3px;
border: 1px solid var(--wbl-border);
}
.wbl-wgrywanie {
margin-top: 28px;
}
.wbl-wgrywanie-etykieta {
margin: 0 0 8px;
font-family: Oxanium, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wbl-gold);
}
.wbl-wgrywanie-zasady {
margin: 0 0 16px;
color: var(--wbl-text-muted);
font-size: 13px;
line-height: 1.4;
}
.wbl-wgrywanie-podglad {
display: flex;
align-items: center;
justify-content: center;
width: 96px;
height: 96px;
margin-bottom: 12px;
background-color: var(--wbl-emphasis);
border: 1px solid var(--wbl-border);
overflow: hidden;
}
.wbl-wgrywanie-podglad img {
width: 96px;
height: 96px;
object-fit: cover;
display: block;
}
.wbl-wgrywanie-waga,
.wbl-wgrywanie-blad {
margin: 0 0 12px;
font-size: 13px;
}
.wbl-wgrywanie-blad {
color: var(--wbl-loss, #b8455a);
}
.karta-gracza-tresc {
display: flex;
flex-direction: column;
min-width: 0;
gap: var(--wbl-space-1);
}
.karta-gracza-nick {
font-size: 16px;
font-weight: 700;
line-height: 1.2;
color: var(--wbl-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.karta-druzyny-emblemat {
flex-shrink: 0;
line-height: 0;
}
.karta-druzyny-emblemat .emblemat,
.karta-druzyny-emblemat .black-bg {
width: 56px !important;
height: 56px !important;
opacity: 0.9;
}
.karta-druzyny-emblemat .black-bg {
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--wbl-emphasis);
border: 1px solid var(--wbl-border);
box-sizing: border-box;
}
.karta-druzyny-emblemat .black-bg h4 {
margin: 0;
font-size: 20px;
line-height: 1;
font-weight: 700;
color: var(--wbl-gold);
}
.karta-druzyny-tresc {
display: flex;
flex-direction: column;
min-width: 0;
gap: var(--wbl-space-1);
}
a.karta-gracza:hover .karta-gracza-nick,
a.karta-gracza:focus .karta-gracza-nick,
a.karta-druzyny:hover .karta-gracza-nick,
a.karta-druzyny:focus .karta-gracza-nick {
color: var(--wbl-text);
}
/* WYJATEK: profil gracza / drużyny — karta zawodnika (analityka), nie coming-match-item.
Hierarchia: avatar → tożsamość → punkty → meta. Separator = linia/gap, nie box na każdą wartość.
Gradient wewnętrzny: wyjątek na prośbę (alpha 0.025), bez glow. */
.profil-hero {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wbl-space-5);
padding: var(--wbl-space-5);
background:
linear-gradient(90deg, rgba(228, 161, 1, 0.12), transparent 48%),
var(--karta);
border: 1px solid var(--wbl-border);
border-radius: var(--wbl-radius);
}
.profil-hero--pusty {
padding: var(--wbl-space-4) var(--wbl-space-5);
}
.profil-hero--pusty .profil-hero-avatar {
width: 64px;
height: 64px;
font-size: 28px;
}
.profil-hero .profil-hero-avatar {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 96px;
height: 96px;
overflow: hidden;
background-color: var(--wbl-emphasis);
border: 1px solid var(--wbl-border);
border-radius: var(--wbl-radius);
color: var(--wbl-gold);
font-size: 40px;
font-weight: 700;
line-height: 1;
}
.profil-hero-avatar .emblemat,
.profil-hero-avatar .black-bg {
width: 64px !important;
height: 64px !important;
opacity: 0.9;
}
.profil-hero-avatar .black-bg {
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent !important;
box-sizing: border-box;
}
.profil-hero-avatar .black-bg h4 {
margin: 0;
font-size: inherit;
line-height: 1;
font-weight: 700;
color: var(--wbl-gold);
}
.profil-hero-tresc {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wbl-space-5);
min-width: 0;
flex: 1 1 12rem;
}
.profil-hero-tozsamosc {
min-width: 0;
flex: 1 1 10rem;
}
.profil-hero-tozsamosc .wbl-eyebrow {
margin: 0 0 var(--wbl-space-1);
}
.profil-hero-nick {
margin: 0;
font-size: clamp(1.75rem, 1.15rem + 3vw, 2.5rem);
font-weight: 700;
line-height: 1.1;
color: var(--wbl-text);
overflow-wrap: anywhere;
}
.profil-hero-pkt {
margin: 0;
flex: 0 0 auto;
padding-left: var(--wbl-space-5);
border-left: 1px solid var(--wbl-border-subtle);
font-size: 48px;
font-weight: 700;
line-height: 1;
letter-spacing: var(--wbl-tracking-data);
color: var(--wbl-text);
font-family: var(--wbl-font-data);
font-variant-numeric: tabular-nums;
}
.profil-hero-pkt--lider {
color: var(--zloto);
}
.profil-hero-pkt .stat-etykieta {
display: inline;
margin: 0 0 0 var(--wbl-space-2);
font-size: 14px;
vertical-align: 0.35em;
}
.rating-wysoki {
color: var(--zloto);
}
.rating-niski,
.rating-brak {
color: var(--tekst-cichy);
}
.statystyki-szczegoly {
margin: 0 0 var(--wbl-space-6);
padding: var(--wbl-space-4);
background-color: var(--karta);
border: 1px solid var(--wbl-border);
border-radius: 0;
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.profil-rating-skrot {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.statystyki-szczegoly summary {
cursor: pointer;
font-family: var(--wbl-font-data);
font-weight: 700;
letter-spacing: var(--wbl-tracking-data);
color: var(--wbl-text);
}
.statystyki-szczegoly .profil-statystyki {
margin-top: var(--wbl-space-4);
}
.profil-hero-meta {
flex: 1 1 8rem;
min-width: 0;
padding-left: var(--wbl-space-5);
border-left: 1px solid var(--wbl-border-subtle);
}
.profil-hero-meta .stat-etykieta {
margin: 0;
}
.profil-hero-meta .stat-etykieta + .stat-etykieta {
margin-top: var(--wbl-space-1);
}
.profil-hero-meta .puls-formy,
.profil-statystyki .puls-formy {
height: 22px;
gap: 3px;
}
.profil-hero-meta .puls-formy i,
.profil-statystyki .puls-formy i {
width: 7px;
}
.profil-statystyki {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--wbl-space-5) var(--wbl-space-6);
padding: var(--wbl-space-5);
background-color: var(--karta);
border: 1px solid var(--wbl-border);
border-radius: var(--wbl-radius);
}
.profil-statystyki .stat-para {
margin: 0;
padding: 0;
border: none;
background: none;
box-shadow: none;
}
.profil-statystyki .stat-wartosc {
font-size: 22px;
font-weight: 700;
}
a.profil-mecz {
display: grid;
grid-template-columns: 72px minmax(0, 0.9fr) minmax(0, 1.2fr) 64px 52px;
align-items: center;
gap: 8px 12px;
width: 100%;
box-sizing: border-box;
padding: var(--wbl-space-3) var(--wbl-space-4);
margin-bottom: var(--wbl-space-2);
background-color: var(--wbl-surface);
border: 1px solid var(--wbl-structure);
border-left-width: 3px;
border-radius: var(--wbl-radius);
text-decoration: none;
color: var(--wbl-text);
font-variant-numeric: tabular-nums;
transition: background-color var(--wbl-interaction-ms) ease, border-color var(--wbl-interaction-ms) ease;
}
a.profil-mecz:last-child {
margin-bottom: 0;
}
a.profil-mecz-w {
border-left-color: var(--wygrana);
}
a.profil-mecz-p {
border-left-color: var(--przegrana);
}
a.profil-mecz:hover,
a.profil-mecz:focus,
a.profil-mecz:focus-visible {
transform: none;
text-decoration: none;
color: var(--wbl-text);
}
.profil-mecz-data,
.profil-mecz-mapa {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profil-mecz-przeciwnik {
font-family: var(--wbl-font-display);
font-size: 14px;
font-weight: 700;
color: var(--wbl-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profil-mecz-wynik,
.profil-mecz-kd {
font-size: 16px;
font-weight: 700;
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.profil-mecz-w .profil-mecz-wynik {
color: var(--wbl-text);
}
@media (max-width: 768px) {
.profil-hero {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
gap: var(--wbl-space-4);
padding: var(--wbl-space-4);
}
.profil-hero .profil-hero-avatar {
width: 72px;
height: 72px;
font-size: 28px;
align-self: flex-start;
}
.profil-hero-avatar .emblemat,
.profil-hero-avatar .black-bg {
width: 48px !important;
height: 48px !important;
}
.profil-hero-tresc {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
gap: 0;
}
.profil-hero-tozsamosc {
flex: 0 0 auto;
padding-bottom: var(--wbl-space-3);
}
.profil-hero-nick {
font-size: 28px;
}
.profil-hero-pkt,
.profil-hero-meta {
padding-left: 0;
padding-top: var(--wbl-space-3);
border-left: none;
border-top: 1px solid var(--wbl-border-subtle);
}
.profil-hero-pkt {
font-size: 36px;
}
.profil-statystyki {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wbl-space-4);
padding: var(--wbl-space-4);
}
.profil-rating-skrot {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.section-title h2 {
font-size: 28px;
}
a.profil-mecz {
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-rows: auto auto;
padding: var(--wbl-space-3);
}
.profil-mecz-przeciwnik {
grid-column: 1;
grid-row: 1;
}
.profil-mecz-wynik {
grid-column: 2;
grid-row: 1;
}
.profil-mecz-kd {
grid-column: 3;
grid-row: 1;
}
.profil-mecz-data {
grid-column: 1;
grid-row: 2;
}
.profil-mecz-mapa {
grid-column: 2 / 4;
grid-row: 2;
text-align: right;
}
}
/* WYJĄTEK: kwadraty formy — fallback, gdy pasek W/L nie jest użyty.
Monochrom jak .form-win / .form-loss, nie Bootstrap zieleń/czerwień. */
.forma-meczu {
white-space: nowrap;
}
.forma-meczu span {
display: inline-block;
width: 10px;
height: 10px;
margin-left: 2px;
vertical-align: middle;
}
.forma-meczu span:first-child {
margin-left: 0;
}
.forma-meczu .forma-wygrana {
background: rgba(255, 255, 255, 0.09);
}
.forma-meczu .forma-przegrana {
background: rgba(255, 255, 255, 0.025);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.forma-meczu .forma-brak {
background: rgba(255, 255, 255, 0.04);
}
/* WYJATEK: dashboard strony glownej — hierarchia, nie piec rownych kart Geco. */
.wbl-dashboard {
padding-top: var(--wbl-space-6);
padding-bottom: var(--wbl-space-4);
}
.wbl-dashboard + .game-manage-area {
padding-top: var(--wbl-space-7);
}
.wbl-dashboard-naglowek {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--wbl-space-4);
margin-bottom: var(--wbl-space-4);
}
.wbl-dashboard-naglowek .wbl-eyebrow {
margin-bottom: var(--wbl-space-2);
}
.wbl-dashboard-naglowek h1 {
margin: 0;
font-size: clamp(1.5rem, 1.05rem + 2vw, 2rem);
line-height: 1.1;
overflow-wrap: anywhere;
}
.wbl-dashboard-kto {
display: flex;
align-items: center;
gap: var(--wbl-space-2);
min-width: 0;
text-decoration: none;
color: var(--wbl-text);
}
.wbl-dashboard-kto:hover,
.wbl-dashboard-kto:focus {
color: var(--wbl-text);
text-decoration: none;
}
.wbl-dashboard-kto .wbl-heading {
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wbl-dashboard-kto .emblemat,
.wbl-dashboard-kto .black-bg {
width: 32px !important;
height: 32px !important;
padding: 0 !important;
}
.wbl-dashboard-kto .black-bg {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--wbl-emphasis);
border: 1px solid var(--wbl-border);
box-sizing: border-box;
}
.wbl-dashboard-kto h4 {
margin: 0;
font-size: 14px;
line-height: 1;
font-weight: 700;
color: var(--wbl-gold);
}
.wbl-dashboard .card {
display: flex;
align-items: center;
gap: var(--wbl-space-4);
box-sizing: border-box;
width: 100%;
margin-bottom: var(--wbl-space-4);
padding: var(--wbl-space-4) var(--wbl-space-5);
background-color: var(--wbl-surface);
border: 1px solid var(--wbl-structure);
border-radius: var(--wbl-radius);
text-decoration: none;
color: var(--wbl-text);
box-shadow: none;
transition: background-color var(--wbl-interaction-ms) ease, border-color var(--wbl-interaction-ms) ease;
}
.wbl-dashboard .card:hover {
transform: none;
}
.wbl-dashboard .card:focus {
text-decoration: none;
color: var(--wbl-text);
}
.wbl-dashboard-mecz {
min-height: 88px;
}
.wbl-dashboard-mecz-live {
border-left: 2px solid var(--tekst-cichy);
background-color: var(--wbl-interaction-bg);
}
.wbl-dashboard-mecz-tresc,
.wbl-dashboard-druzyna-tresc {
min-width: 0;
flex: 1;
}
.wbl-dashboard-mecz .wbl-eyebrow,
.wbl-dashboard-druzyna .wbl-eyebrow {
margin-bottom: var(--wbl-space-1);
}
.wbl-dashboard-mecz h2 {
margin: 0 0 var(--wbl-space-2);
font-size: 24px;
line-height: 1.15;
}
.wbl-dashboard-mecz h2 span {
font-family: var(--wbl-font-data);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--wbl-text-muted);
}
.wbl-dashboard-mecz .wbl-data {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--wbl-text-muted);
}
.wbl-dashboard-statystyki {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--wbl-space-4);
margin-bottom: var(--wbl-space-4);
padding: var(--wbl-space-4) var(--wbl-space-5);
background-color: var(--wbl-surface);
border: 1px solid var(--wbl-structure);
border-radius: 2px;
}
.wbl-dashboard-statystyki .stat-para {
margin: 0;
}
.wbl-dashboard-statystyki .stat-etykieta {
letter-spacing: 0.1em;
}
.wbl-dashboard-statystyki .stat-wartosc {
font-size: 28px;
line-height: 1;
color: var(--wbl-text);
}
.wbl-dashboard-statystyki .stat-wartosc-akcent {
color: var(--tekst);
}
.wbl-dashboard-statystyki .forma-meczu {
justify-content: flex-start;
}
.wbl-dashboard-bonus {
margin: calc(-1 * var(--wbl-space-3)) 0 var(--wbl-space-4);
}
.wbl-dashboard-druzyna h2 {
margin: 0 0 var(--wbl-space-2);
font-size: 18px;
line-height: 1.2;
}
.wbl-dashboard-druzyna p {
margin: 0;
font-size: 13px;
color: var(--wbl-text-muted);
}
.wbl-dashboard-druzyna p:not(.wbl-eyebrow):not(.wbl-data) {
opacity: var(--wbl-text-tertiary-opacity);
}
.wbl-dashboard-druzyna .wbl-data {
margin-top: var(--wbl-space-1);
font-size: 12px;
}
@media (max-width: 991.98px) {
.wbl-dashboard-statystyki {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
.wbl-dashboard-naglowek {
align-items: flex-start;
flex-direction: column;
gap: var(--wbl-space-3);
}
.wbl-dashboard-naglowek h1 {
font-size: 28px;
}
.wbl-dashboard-statystyki {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wbl-space-4) var(--wbl-space-3);
padding: var(--wbl-space-4);
}
.wbl-dashboard-statystyki .stat-wartosc {
font-size: 24px;
}
.wbl-dashboard-mecz h2 {
font-size: 20px;
}
}
/* WYJATEK: pasek metryki — CSS, bez bibliotek wykresów. Max 1–2 na ekran. */
.metric-bars {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--wbl-space-5);
margin-bottom: var(--wbl-space-4);
}
.metric-bar__top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.metric-bar__top span {
font: 500 10px/1 var(--wbl-font-data);
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
color: var(--wbl-text-muted);
}
.metric-bar__top strong {
font-family: var(--wbl-font-data);
font-weight: 700;
font-size: 14px;
letter-spacing: var(--wbl-tracking-data);
color: var(--wbl-text);
font-variant-numeric: tabular-nums;
}
.metric-bar__track {
height: 4px;
overflow: hidden;
background: rgba(255, 255, 255, 0.07);
}
.metric-bar__track > span {
display: block;
height: 100%;
background: var(--zloto);
opacity: 0.75;
/* WYJATEK: paski metryk — bez animacji. To dane do czytania, nie ceremonia. */
}
.metric-bar--benchmark .metric-bar__track {
background-color: rgba(255, 255, 255, 0.07);
background-image: linear-gradient(
to right,
transparent calc(100% - 1px),
rgba(236, 233, 240, 0.12) 0
);
}
.metric-bar--benchmark .metric-bar__track > span {
background: var(--zloto);
opacity: 0.75;
}
.metric-bar--niski .metric-bar__track > span {
background: var(--wbl-text-muted);
opacity: 0.4;
}
@media (max-width: 767px) {
.metric-bar__track {
height: 3px;
}
}
/* WYJATEK: karta meczu — match center, nie coming-match-item z 5px złota. */
.wbl-match-card {
display: block;
box-sizing: border-box;
width: 100%;
margin-bottom: var(--wbl-space-4);
padding: var(--wbl-space-4) var(--wbl-space-5);
background-color: var(--wbl-surface);
border: 1px solid var(--wbl-border-subtle);
border-radius: var(--wbl-radius);
text-decoration: none;
color: var(--wbl-text);
box-shadow: none;
transition: background-color var(--wbl-interaction-ms) ease, border-color var(--wbl-interaction-ms) ease;
}
.wbl-match-card.wbl-match-status--live {
border-left: 2px solid var(--tekst-cichy);
background-color: var(--wbl-interaction-bg);
box-shadow: none;
}
.wbl-match-card.wbl-match-status--live:hover,
.wbl-match-card.wbl-match-status--live:focus,
.wbl-match-card.wbl-match-status--live:focus-visible {
border-left-color: var(--tekst-cichy);
background-color: var(--wbl-interaction-bg);
}
.wbl-match-card:hover,
.wbl-match-card:focus,
.wbl-match-card:focus-visible {
transform: none;
text-decoration: none;
color: var(--wbl-text);
background-color: #201227;
border-color: #4a3358;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.wbl-match-card:hover .wbl-heading,
.wbl-match-card:focus .wbl-heading,
.wbl-match-card:hover .wbl-match-card-wynik,
.wbl-match-card:focus .wbl-match-card-wynik {
color: var(--wbl-text);
}
.wbl-match-card:hover .wbl-eyebrow,
.wbl-match-card:focus .wbl-eyebrow,
.wbl-match-card:hover .wbl-match-card-format,
.wbl-match-card:focus .wbl-match-card-format,
.wbl-match-card:hover .wbl-match-card-mapa,
.wbl-match-card:focus .wbl-match-card-mapa,
.wbl-match-card:hover .wbl-data,
.wbl-match-card:focus .wbl-data {
color: var(--wbl-text-muted);
}
.wbl-match-card:hover .match-live,
.wbl-match-card:focus .match-live,
.wbl-match-card:hover .badge-live,
.wbl-match-card:focus .badge-live {
color: var(--wbl-text);
}
.wbl-match-card-naglowek {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wbl-space-3);
margin-bottom: var(--wbl-space-4);
}
.wbl-match-card-naglowek .wbl-eyebrow {
display: inline;
margin-bottom: 0;
}
.wbl-match-card-format {
font-family: var(--wbl-font-data);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tekst-cichy);
}
.match-live,
.znacznik-live {
display: inline-flex;
align-items: center;
gap: var(--wbl-space-2);
position: relative;
z-index: 1;
font: 700 11px/1 var(--wbl-font-data);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wbl-text);
box-shadow: none;
}
.match-live::before,
.znacznik-live::before {
content: "";
width: 7px;
height: 7px;
flex-shrink: 0;
border-radius: 50%;
background: currentColor;
box-shadow: none;
animation: wbl-live-dot 1.6s ease-in-out infinite;
}
@keyframes wbl-live-dot {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.22;
}
}
.badge-live {
color: var(--wbl-text);
font-weight: 700;
animation: none;
box-shadow: none;
}
.wbl-match-card-strony {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: var(--wbl-space-3);
}
.wbl-match-status--live .wbl-match-card-strony {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.wbl-match-card-druzyna {
display: flex;
flex-direction: column;
gap: var(--wbl-space-2);
min-width: 0;
}
.wbl-match-card-druzyna-a {
align-items: flex-end;
text-align: right;
}
.wbl-match-card-druzyna-b {
align-items: flex-start;
text-align: left;
}
.wbl-match-card-druzyna .wbl-heading {
font-size: 14px;
font-weight: 700;
color: var(--wbl-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.wbl-match-card .match-team-logo {
line-height: 0;
flex-shrink: 0;
}
.wbl-match-card .emblemat,
.wbl-match-card .black-bg {
width: 52px !important;
height: 52px !important;
opacity: 0.9;
}
.wbl-match-card .black-bg {
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--wbl-emphasis);
border: 1px solid var(--wbl-border);
box-sizing: border-box;
}
.wbl-match-card .black-bg h4 {
margin: 0;
font-size: 20px;
line-height: 1;
color: var(--wbl-text);
}
.wbl-match-card-wynik {
margin: 0;
font-family: var(--wbl-font-display);
font-weight: 800;
font-size: 32px;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.03em;
text-align: center;
color: var(--wbl-text);
}
.wbl-match-status--upcoming .wbl-match-card-wynik {
color: var(--wbl-text-muted);
font-weight: 700;
}
.wbl-match-status--live > .wbl-match-card-wynik {
margin-bottom: var(--wbl-space-3);
color: var(--wbl-text);
font-size: 36px;
font-weight: 800;
}
.wbl-match-status--final .wbl-match-card-wynik {
color: var(--wbl-text);
}
.wbl-match-card-mapa {
margin: var(--wbl-space-3) 0 0;
font-family: var(--wbl-font-data);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: center;
color: var(--wbl-text-muted);
display: flex;
align-items: center;
justify-content: center;
gap: var(--wbl-space-2);
}
.wbl-match-card-czas {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wbl-space-3);
margin-top: var(--wbl-space-3);
}
.wbl-match-card-czas .wbl-data {
font-size: 12px;
font-weight: 600;
color: var(--wbl-text-muted);
}
@media (max-width: 767.98px) {
.wbl-match-card {
padding: var(--wbl-space-4);
}
.wbl-match-card-wynik {
font-size: 24px;
}
.wbl-match-status--live > .wbl-match-card-wynik {
font-size: 28px;
}
.wbl-match-card .emblemat,
.wbl-match-card .black-bg {
width: 40px !important;
height: 40px !important;
}
}
/* WYJĄTEK: odstępy szablonu zakładają zdjęcia, których nie używamy
Tylko padding-top / padding-bottom / margin-top / margin-bottom.
Wartości mniej więcej o połowę względem default.css i style.css. */
.pt-120 {
padding-top: var(--wbl-space-8);
}
.pb-120 {
padding-bottom: var(--wbl-space-8);
}
.pt-90 {
padding-top: var(--wbl-space-6);
}
.pb-90 {
padding-bottom: var(--wbl-space-6);
}
.pb-180 {
padding-bottom: var(--wbl-space-7);
}
.mb-20 {
margin-bottom: var(--wbl-space-4);
}
.mb-50 {
margin-bottom: var(--wbl-space-6);
}
.mb-60 {
margin-bottom: var(--wbl-space-6);
}
.mb-40 {
margin-bottom: var(--wbl-space-4);
}
.mb-35 {
margin-bottom: var(--wbl-space-4);
}
.mb-30 {
margin-bottom: var(--wbl-space-4);
}
.mt-40 {
margin-top: var(--wbl-space-5);
}
.coming-match-team {
padding: var(--wbl-space-4) var(--wbl-space-5);
}
.coming-match-info {
padding: var(--wbl-space-4) var(--wbl-space-5);
background: var(--karta);
border: 1px solid var(--ramka-wlos);
box-shadow: none;
}
.coming-match-item {
position: relative;
overflow: hidden;
border: 1px solid var(--ramka-wlos);
background-color: var(--karta);
box-shadow: none;
border-radius: var(--wbl-radius);
transition:
background-color var(--wbl-interaction-ms) ease,
border-color var(--wbl-interaction-ms) ease,
box-shadow var(--wbl-interaction-ms) ease;
}
.coming-match-item:not(.mecz-hero)::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background-color: var(--zloto);
transform: scaleY(0);
transform-origin: center;
transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.coming-match-item:not(.mecz-hero) {
cursor: pointer;
}
.coming-match-item:not(.mecz-hero):hover,
.coming-match-item:not(.mecz-hero):focus,
.coming-match-item:not(.mecz-hero):focus-visible {
background-color: #201227;
border-color: #4a3358;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.coming-match-item:not(.mecz-hero):hover::before,
.coming-match-item:not(.mecz-hero):focus::before,
.coming-match-item:not(.mecz-hero):focus-visible::before {
transform: scaleY(1);
}
.coming-match-item .coming-match-info {
border: none;
}
.match-team-name a {
margin-top: var(--wbl-space-2);
}
.match-info-action {
margin-top: var(--wbl-space-4);
}
.tournament-schedule-content,
.latest-match-box .tournament-schedule-content {
padding-top: var(--wbl-space-4);
padding-bottom: var(--wbl-space-4);
}
.match-team-logo .black-bg {
padding-top: var(--wbl-space-2);
padding-bottom: var(--wbl-space-2);
}
/* Logo SVG: wymiary ustala .nav-logo-mark-box (48px). Stary 28px zostaje
tylko gdy w .logo wpadnie zwykły ![]()
bez marki. */
.logo img:not(.nav-logo-mark) {
display: inline-block;
height: 28px;
width: auto;
max-height: 28px;
vertical-align: middle;
}
/* WYJATEK: hero strony meczu — wynik + pasek map z puli /grafika/mapy/. */
.coming-match-item.mecz-hero {
border: 1px solid var(--ramka-wlos);
background-color: var(--karta);
overflow: hidden;
}
.pasek-stanu {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
padding: 0.625rem 0.875rem;
border: 1px solid var(--ramka-wlos);
border-bottom: none;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--tekst-cichy);
}
.coming-match-item.mecz-hero > .pasek-stanu {
border-left: none;
border-right: none;
border-top: none;
background-color: var(--wbl-surface-fill);
}
.pasek-stanu .mocne {
color: var(--tekst);
}
.mecz-hero-pas {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
box-sizing: border-box;
padding: var(--wbl-space-5);
background-color: transparent;
}
.mecz-hero-naglowek {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wbl-space-3);
}
.h2h-liczby {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
}
.h2h-liczby > span {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.h2h-liczby .stat-etykieta,
.h2h-liczby .stat-value {
display: inline;
margin: 0;
}
.h2h-puste {
margin: 0;
color: var(--tekst-cichy);
}
.bilans-pasek {
display: flex;
align-items: center;
gap: 2px;
margin: 0.5rem 0;
min-height: 1.25rem;
}
.bilans-segment {
height: 6px;
min-width: 4px;
border-radius: 3px;
transition: flex 0.3s;
}
.bilans-lewy {
background: var(--wbl-signal);
}
.bilans-prawy {
background: var(--wbl-text-muted);
}
.bilans-lewy.is-reversed {
background: var(--wbl-text-muted);
}
.bilans-prawy.is-reversed {
background: var(--wbl-signal);
}
.bilans-pasek--remis .bilans-lewy,
.bilans-pasek--remis .bilans-prawy,
.bilans-pasek--remis .bilans-lewy.is-reversed,
.bilans-pasek--remis .bilans-prawy.is-reversed {
background: var(--wbl-signal);
}
.bilans-srodek {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.5rem;
min-width: 2.75rem;
}
.bilans-wynik {
font-family: var(--wbl-font-data);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
font-size: 0.9375rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.04em;
color: var(--wbl-text);
white-space: nowrap;
}
.mecz-hero .coming-match-team {
flex-wrap: nowrap;
align-items: center;
padding: var(--wbl-space-4) 0 0;
}
.mecz-hero .coming-match-team > .match-team-info:first-of-type {
padding-left: var(--wbl-space-3);
box-shadow: inset 3px 0 0 var(--wbl-kolor-druzyny, var(--wbl-structure));
}
.mecz-hero .coming-match-team > .match-team-info:last-of-type {
padding-right: var(--wbl-space-3);
box-shadow: inset -3px 0 0 var(--wbl-kolor-druzyny, var(--wbl-structure));
}
.mecz-hero-wynik {
margin: 0;
font-size: 56px;
font-weight: 800;
line-height: 1;
color: var(--tekst);
font-family: var(--wbl-font-display);
font-variant-numeric: tabular-nums;
letter-spacing: -0.03em;
}
.mecz-hero-wynik-vs {
color: var(--wbl-text);
font-size: 36px;
font-weight: 700;
}
.mecz-hero .match-team-name span {
font-size: 16px;
font-weight: 800;
color: var(--wbl-text);
}
/* WYJATEK: scoreboard pomeczowy — linie tylko poziome, cyfry stalej szerokosci.
Szablon na <1200px ustawia .table { width: 790px } — kontener tnie to scrollem. */
.scoreboard-przewijanie,
.scoreboard-przewijanie .table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
.scoreboard-przewijanie table.table {
width: 100%;
max-width: none;
min-width: 520px;
margin-top: 0;
border-collapse: collapse;
border: none;
}
table.tabela-scoreboard thead th,
table.tabela-scoreboard tbody td,
table.tabela-scoreboard tbody th {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid var(--wbl-structure);
padding: 10px 14px;
}
table.tabela-scoreboard thead tr,
table.tabela-scoreboard thead th {
background: var(--wbl-page);
}
table.tabela-scoreboard thead th {
font-family: var(--wbl-font-data);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wbl-text-muted);
}
table.tabela-scoreboard tbody td,
table.tabela-scoreboard .tabela-wynikowa-liczba {
font-variant-numeric: tabular-nums;
font-weight: 700;
}
table.tabela-scoreboard tbody tr:last-child td,
table.tabela-scoreboard tbody tr:last-child th {
border-bottom: none;
}
table.tabela-scoreboard tbody tr {
transition: background-color var(--wbl-interaction-ms) ease;
}
table.tabela-scoreboard tbody td,
table.tabela-scoreboard tbody th {
transition: background-color var(--wbl-interaction-ms) ease, box-shadow var(--wbl-interaction-ms) ease;
}
table.tabela-scoreboard tbody tr:hover {
background: var(--wbl-interaction-bg);
}
table.tabela-scoreboard tbody tr:hover td,
table.tabela-scoreboard tbody tr:hover th {
background: var(--wbl-interaction-bg);
}
table.tabela-scoreboard tbody tr:hover td:first-child,
table.tabela-scoreboard tbody tr:hover th:first-child {
box-shadow: inset 2px 0 0 var(--wbl-interaction-line);
}
.scoreboard-carry {
color: var(--zloto);
font-weight: 700;
white-space: nowrap;
}
table.tabela-scoreboard tbody td.scoreboard-carry {
color: var(--zloto);
}
.scoreboard-carry-znak {
margin-left: 4px;
color: var(--zloto);
font-size: 12px;
vertical-align: super;
}
@media (max-width: 767.98px) {
.mecz-hero-pas {
padding: 16px 12px 18px;
}
.mecz-hero-wynik {
font-size: 36px;
}
.mecz-hero-wynik-vs {
font-size: 24px;
}
.mecz-hero .coming-match-status {
margin: 0 8px;
}
.mecz-hero .emblemat {
width: 32px !important;
height: 32px !important;
}
.mecz-hero .match-team-name span {
font-size: 13px;
}
}
/* WYJATEK: Szczegoly na karcie meczu — ramka, nie złoto. */
.match-info-action .btn,
.match-info-action .btn:hover {
background-image: none;
}
.match-info-action .btn {
background-color: transparent;
border: 1px solid var(--ramka-wlos);
border-radius: 2px;
color: var(--tekst-cichy);
font-size: 13px;
font-weight: 700;
padding: 10px 16px;
text-transform: uppercase;
transition: background-color 0.2s ease, color 0.2s ease;
}
.match-info-action .btn::before {
display: none;
}
/* WYJATEK: skrot druzyny na karcie jest w srodku , wiec dziedziczy
niebieski kolor linku szablonu (#1696e7). Ma byc jasny monochrom,
jak emblemat — zloto zostaje dla BO1 i wyniku. */
.coming-match-item a .match-team-name span,
.coming-match-item .match-team-name span {
color: var(--wbl-text);
}
/* WYJATEK: kolorowanie emblematow drużyn kolorem z bazy.
Pliki sa biale z przezroczystoscia, maska pozwala uzyc jednego
pliku dla kazdego koloru zamiast 16 x 12 wariantow. */
.emblemat {
display: inline-block;
pointer-events: none;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
/* WYJATEK: wideo tlo całego portalu publicznego.
Pelny ekran pod trescia. Karty/tabele maja L0–L2 z alpha — wideo przebija. */
.tlo-wideo {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
background-color: var(--tlo);
background-image: url("/grafika/tlo/tlo-plakat.webp");
background-size: cover;
background-position: center;
}
.tlo-wideo-odtwarzacz {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.tlo-wideo::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
/* Veil na kadr + 140px fade do L0 na dole viewportu, bez ostrego cięcia foto. */
background:
linear-gradient(to bottom, var(--wbl-page-transparent), var(--wbl-page)) bottom / 100% 140px no-repeat,
radial-gradient(
ellipse 80% 70% at 50% 38%,
rgba(20, 16, 26, 0.12) 0%,
rgba(20, 16, 26, 0.48) 100%
),
linear-gradient(
to bottom,
rgba(20, 16, 26, 0.32) 0%,
rgba(20, 16, 26, 0.24) 45%,
rgba(20, 16, 26, 0.32) 100%
);
}
header {
position: relative;
z-index: 2;
}
main,
footer {
position: relative;
z-index: 1;
}
@media (max-width: 767px) {
.tlo-wideo {
background-image: url("/grafika/tlo/tlo-plakat-maly.webp");
}
.tlo-wideo::after {
background:
linear-gradient(to bottom, var(--wbl-page-transparent), var(--wbl-page)) bottom / 100% 140px no-repeat,
radial-gradient(
ellipse 85% 75% at 50% 40%,
rgba(20, 16, 26, 0.08) 0%,
rgba(20, 16, 26, 0.4) 100%
),
linear-gradient(
to bottom,
rgba(20, 16, 26, 0.32) 0%,
rgba(20, 16, 26, 0.16) 20%,
rgba(20, 16, 26, 0.22) 55%,
rgba(20, 16, 26, 0.45) 100%
);
}
}
/* Logowanie: ten sam kadr 16:9, słabsze przyciemnienie niż przy kartach. */
body.strona-logowania {
min-height: 100vh;
}
body.strona-logowania .tlo-wideo {
background-image: url("/grafika/tlo/tlo-plakat.webp");
}
body.strona-logowania .tlo-wideo::after {
background:
linear-gradient(to bottom, var(--wbl-page-transparent), var(--wbl-page)) bottom / 100% 140px no-repeat,
radial-gradient(
ellipse 70% 60% at 50% 45%,
rgba(20, 16, 26, 0.2) 0%,
rgba(20, 16, 26, 0.58) 100%
),
linear-gradient(
to bottom,
rgba(20, 16, 26, 0.45) 0%,
rgba(20, 16, 26, 0.28) 40%,
rgba(20, 16, 26, 0.5) 100%
);
}
/* Ranking, mecz, czat: mocniejszy welon, żeby tabele i listy zostały czytelne. */
body:not(.strona-glowna):not(.strona-logowania) .tlo-wideo::after {
background:
linear-gradient(to bottom, var(--wbl-page-transparent), var(--wbl-page)) bottom / 100% 160px no-repeat,
radial-gradient(
ellipse 80% 70% at 50% 38%,
rgba(20, 16, 26, 0.28) 0%,
rgba(20, 16, 26, 0.62) 100%
),
linear-gradient(
to bottom,
rgba(20, 16, 26, 0.45) 0%,
rgba(20, 16, 26, 0.38) 45%,
rgba(20, 16, 26, 0.5) 100%
);
}
body.strona-logowania main {
min-height: 100vh;
display: flex;
align-items: center;
}
body.strona-logowania main > section {
width: 100%;
}
/* Formularz logowania: pola ciemniejsze niż karta, złoty focus, przycisk nie-baner.
Nie stylujemy globalnie input[type="text"] (wyszukiwarki). outline: none
wyłącznie na :focus ze złotym ringiem. */
body.strona-logowania .login-card {
background-color: rgba(28, 17, 33, 0.82);
border: none;
border-radius: var(--wbl-radius);
padding: var(--wbl-space-6) var(--wbl-space-5);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.06),
0 24px 64px rgba(0, 0, 0, 0.6),
0 8px 24px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
body.strona-logowania .third-contact-form .input-wbl,
body.strona-logowania .input-wbl,
body.strona-logowania input[type="text"],
body.strona-logowania input[type="password"],
body.strona-logowania input[type="email"] {
width: 100%;
box-sizing: border-box;
background-color: var(--wbl-page);
border: 1px solid var(--wbl-structure);
border-radius: var(--wbl-radius);
color: var(--wbl-text);
padding: 14px 16px;
font-family: var(--wbl-font-ui);
font-size: 0.9rem;
-webkit-appearance: none;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5);
transition:
border-color var(--wbl-interaction-ms) ease,
box-shadow var(--wbl-interaction-ms) ease,
background-color var(--wbl-interaction-ms) ease;
}
body.strona-logowania .third-contact-form .input-wbl::placeholder,
body.strona-logowania .input-wbl::placeholder,
body.strona-logowania input[type="text"]::placeholder,
body.strona-logowania input[type="password"]::placeholder,
body.strona-logowania input[type="email"]::placeholder {
color: var(--wbl-text-muted);
opacity: 0.5;
}
body.strona-logowania .third-contact-form .input-wbl:hover,
body.strona-logowania .input-wbl:hover,
body.strona-logowania input[type="text"]:hover,
body.strona-logowania input[type="password"]:hover,
body.strona-logowania input[type="email"]:hover {
border-color: #5a3f6e;
background-color: var(--wbl-emphasis);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45);
}
body.strona-logowania .third-contact-form .input-wbl:focus,
body.strona-logowania .third-contact-form .input-wbl:focus-visible,
body.strona-logowania .input-wbl:focus,
body.strona-logowania .input-wbl:focus-visible,
body.strona-logowania input[type="text"]:focus,
body.strona-logowania input[type="text"]:focus-visible,
body.strona-logowania input[type="password"]:focus,
body.strona-logowania input[type="password"]:focus-visible,
body.strona-logowania input[type="email"]:focus,
body.strona-logowania input[type="email"]:focus-visible {
outline: none;
border-color: var(--zloto);
box-shadow: 0 0 0 3px rgba(228, 161, 1, 0.14), inset 0 1px 4px rgba(0, 0, 0, 0.45);
background-color: var(--wbl-emphasis);
}
body.strona-logowania .login-card .btn,
body.strona-logowania .login-card .btn.btn-style-two,
body.strona-logowania .login-card button[type="submit"] {
width: auto;
min-width: 160px;
padding: 12px 32px;
display: inline-block;
margin: 0 auto;
font-family: var(--wbl-font-data);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
}
.header-user-login > a {
border-top: 1px solid var(--wbl-structure);
background: var(--wbl-surface);
color: var(--wbl-text);
border-radius: var(--wbl-radius);
}
.header-user-login a,
.header-user-login a:hover,
.header-user-login a:focus {
color: var(--wbl-text);
text-decoration: none;
}
.header-user-login > a i {
background: var(--wbl-emphasis);
color: var(--wbl-text-muted);
}
@media (max-width: 1199.98px) {
.community-wrap table.table {
width: 100%;
max-width: none;
min-width: 640px;
margin-top: 0;
}
}
body.strona-glowna #tabela,
body.strona-glowna .latest-match-area,
body.strona-glowna footer {
background-color: var(--wbl-page);
}
.tabela-scroll {
-webkit-overflow-scrolling: touch;
}
.tabela-danych {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.tabela-danych thead th {
position: sticky;
top: var(--wys-nawigacji);
z-index: 2;
background: var(--tlo);
padding: 0.5rem 0.75rem;
height: 34px;
font-family: var(--wbl-font-data);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
color: var(--tekst-cichy);
text-align: right;
white-space: nowrap;
border-bottom: 1px solid var(--ramka);
}
.tabela-danych th.tekst,
.tabela-danych thead th:first-child {
text-align: left;
}
.tabela-danych tbody td {
height: 42px;
padding: 0 0.75rem;
font-family: var(--wbl-font-data);
font-size: 0.875rem;
text-align: right;
color: var(--tekst);
border-bottom: 1px solid var(--ramka-wlos);
vertical-align: middle;
white-space: nowrap;
}
.tabela-danych td.tekst,
.tabela-danych tbody td:first-child {
text-align: left;
}
.tabela-danych tbody tr {
position: relative;
transition: background-color var(--wbl-interaction-ms) ease;
}
.tabela-danych tbody td:first-child,
.tabela-danych tbody th:first-child {
transition: box-shadow var(--wbl-interaction-ms) ease, background-color var(--wbl-interaction-ms) ease;
}
.tabela-danych a.wiersz-caly {
color: inherit;
text-decoration: none;
}
.tabela-danych a.wiersz-caly::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.tabela-danych tbody tr:hover {
background: var(--wbl-interaction-bg);
}
.tabela-danych tbody tr:hover td:first-child {
box-shadow: inset 2px 0 0 var(--wbl-interaction-line);
}
.standings-row {
border-left: 3px solid transparent;
transition: background-color 0.15s ease, border-left-color 0.15s ease;
}
.standings-row:hover {
background-color: var(--wbl-emphasis);
}
.standings-row.rank-1 {
border-left-color: var(--wbl-signal);
}
.standings-row.rank-2 {
border-left-color: var(--wbl-text-muted);
}
.standings-row.rank-3 {
border-left-color: var(--wbl-structure);
}
.standings-row.rank-1 .rank-number {
color: var(--wbl-signal);
font-weight: 700;
}
table.tabela-danych tbody tr.standings-row {
border-left: 3px solid transparent;
transition: background-color 0.15s ease, border-left-color 0.15s ease;
}
table.tabela-danych tbody tr.standings-row:hover {
background-color: var(--wbl-emphasis);
}
table.tabela-danych tbody tr.standings-row:hover td:first-child {
box-shadow: none;
}
.tabela-danych td.cicha,
span.cicha {
color: var(--tekst-cichy);
}
.tabela-danych .nazwa {
font-family: var(--wbl-font-display);
font-weight: 600;
letter-spacing: var(--wbl-tracking-display);
color: inherit;
text-decoration: none;
}
.tabela-danych .nazwa:hover,
.tabela-danych .nazwa:focus {
color: inherit;
text-decoration: none;
}
.tabela-danych .lokata {
width: 36px;
color: var(--tekst-cichy);
font-size: 0.8125rem;
}
.tabela-danych tbody tr.lider .lokata,
.tabela-danych tbody tr.lider .komorka-pkt strong {
color: var(--zloto);
}
.tabela-danych .herb {
display: inline-block;
width: 18px;
height: 18px;
opacity: 0.85;
vertical-align: -3px;
margin-right: 0.5rem;
font-size: 0.625rem;
font-weight: 700;
line-height: 18px;
text-align: center;
}
.tabela-danych .herb.monogram-litera {
opacity: 1;
box-sizing: border-box;
line-height: 16px;
background-color: var(--wbl-emphasis);
border: 1px solid var(--wbl-border);
border-radius: var(--wbl-radius);
color: var(--wbl-text-muted);
}
.tabela-danych tbody tr.lider .herb.monogram-litera {
color: var(--zloto);
}
.komorka-pkt {
position: relative;
overflow: hidden;
}
.komorka-pkt::before {
content: "";
position: absolute;
top: 9px;
bottom: 9px;
right: 0;
width: var(--pct, 0%);
background: rgba(236, 233, 240, 0.25);
border-right: 1px solid rgba(236, 233, 240, 0.2);
pointer-events: none;
/* WYJATEK: pasek punktów w tabeli — ta sama zasada co metryki na profilu: bez ruchu. */
}
.tabela-danych tbody tr.lider .komorka-pkt::before,
.tabela-danych tbody tr.miejsce-2 .komorka-pkt::before,
.tabela-danych tbody tr.miejsce-3 .komorka-pkt::before {
background: rgba(228, 161, 1, 0.55);
border-right-color: rgba(228, 161, 1, 0.7);
}
.tabela-danych tbody tr.ranking-wiersz-nieaktywny td,
.tabela-danych tbody tr.ranking-wiersz-nieaktywny th {
opacity: 0.45;
}
.tabela-danych tbody tr.ranking-wiersz-nieaktywny:hover td,
.tabela-danych tbody tr.ranking-wiersz-nieaktywny:hover th {
opacity: 0.65;
}
.komorka-pkt strong {
position: relative;
z-index: 1;
font-weight: 700;
}
.tabela-danych .roznica-rund {
color: var(--tekst-cichy);
font-size: 0.75rem;
}
@media (max-width: 640px) {
.tabela-scroll {
overflow-x: auto;
}
.tabela-danych.przypnij-pierwsza td:first-child,
.tabela-danych.przypnij-pierwsza th:first-child {
position: sticky;
left: 0;
background: var(--tlo);
z-index: 1;
}
.tabela-danych.przypnij-pierwsza thead th:first-child {
z-index: 3;
}
.tabela-danych.przypnij-pierwsza tbody tr:hover td:first-child {
background: var(--wbl-interaction-bg);
}
.tabela-danych tbody td {
height: 38px;
font-size: 0.8125rem;
}
}
.puls-formy {
display: inline-flex;
align-items: flex-end;
gap: var(--wbl-space-1);
height: 16px;
line-height: 0;
vertical-align: middle;
}
.puls-formy i {
display: block;
width: 6px;
border-radius: var(--wbl-radius);
height: var(--h, 35%);
min-height: 8px;
background: rgba(236, 233, 240, 0.12);
}
/* W/P — semantyka poza 5 powierzchniami. Nie mapować wygranej na złoto L4. */
.puls-formy i.w {
background: #228b22;
opacity: 0.8;
}
.puls-formy i.p {
background: #b22222;
opacity: 0.8;
}
.puls-formy i.r {
background: #6b7280;
opacity: 0.8;
}
.tabela-skladu .puls-formy {
height: 20px;
}
.tabela-skladu .puls-formy i {
width: 6px;
}
.tabela-skladu .puls-formy i.w,
.tabela-skladu .puls-formy i.p,
.tabela-skladu .puls-formy i.r {
opacity: 0.85;
}
.puls-formy i.brak {
height: 4px;
min-height: 4px;
background: rgba(236, 233, 240, 0.1);
}
.strona {
min-width: 0;
}
.strona.przegrany {
opacity: 0.55;
font-weight: 400;
}
.strona.zwyciezca {
font-weight: 700;
}
.wynik-meczu {
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.wynik-meczu .przegrany-nr {
color: var(--tekst-cichy);
font-weight: 400;
}
.wynik-meczu .zwyciezca-nr {
color: var(--tekst);
font-weight: 700;
}
.wbl-drabinka-wrap {
position: relative;
}
.wbl-drabinka-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
padding-bottom: 8px;
}
.wbl-drabinka-wrap::before,
.wbl-drabinka-wrap::after {
content: "";
pointer-events: none;
position: absolute;
top: 0;
bottom: 8px;
width: 36px;
z-index: 1;
}
.wbl-drabinka-wrap::before {
left: 0;
background: linear-gradient(to right, var(--tlo), transparent);
box-shadow: inset 12px 0 12px -8px rgba(0, 0, 0, 0.45);
}
.wbl-drabinka-wrap::after {
right: 0;
background: linear-gradient(to right, transparent, var(--tlo));
box-shadow: inset -12px 0 12px -8px rgba(0, 0, 0, 0.45);
}
@media (min-width: 992px) {
.wbl-drabinka-wrap::before,
.wbl-drabinka-wrap::after {
display: none;
}
}
.wbl-drabinka-svg {
display: block;
max-width: none;
}
.wbl-drabinka-wezel {
fill: var(--tlo, #1c1121);
stroke: var(--ramka, #33253c);
stroke-width: 1;
}
.wbl-drabinka-wezel--zaplanowany {
stroke: var(--tekst-cichy, #8b8296);
}
.wbl-drabinka-wezel--trwa,
.wbl-drabinka-wezel--zakonczony {
stroke: var(--zloto, #e4a101);
stroke-width: 2;
}
.wbl-drabinka-wezel-status {
fill: var(--zloto, #e4a101);
font-family: Oxanium, sans-serif;
}
.wbl-lobby-pasek {
margin: 0;
padding: var(--wbl-space-3) var(--wbl-space-5);
background: var(--zloto);
color: var(--tlo, #1c1121);
font-family: var(--wbl-font-ui);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.04em;
text-align: center;
text-transform: uppercase;
}
/* „Przejdź do Veto” to jedyne wejście gracza do lobby jego meczu — przycisk,
nie podkreślony tekst. Ciemny na złotym pasku, pełne 44px pola dotyku. */
.wbl-lobby-pasek a {
display: inline-flex;
align-items: center;
min-height: 44px;
margin: var(--wbl-space-2) 0 0 var(--wbl-space-2);
padding: 0 var(--wbl-space-4);
background: var(--wbl-page);
border-radius: var(--wbl-radius);
color: var(--wbl-gold);
text-decoration: none;
white-space: nowrap;
}
.wbl-lobby-pasek a:hover,
.wbl-lobby-pasek a:focus-visible {
background: var(--wbl-emphasis);
color: var(--wbl-gold);
text-decoration: none;
}
.wbl-lobby-pasek a:focus-visible {
outline: 2px solid var(--wbl-page);
outline-offset: 2px;
}
.wiersz-meczu-gracza td:first-child {
box-shadow: inset 3px 0 0 var(--przegrana);
}
.wiersz-meczu-gracza.wygrany td:first-child {
box-shadow: inset 3px 0 0 var(--wygrana);
}
.wiersz-meczu-gracza.remis td:first-child,
.wiersz-meczu-gracza.remis th:first-child {
box-shadow: inset 3px 0 0 var(--tekst-cichy);
}
.wiersz-meczu-gracza.brak-wyniku td:first-child,
.wiersz-meczu-gracza.brak-wyniku th:first-child {
box-shadow: inset 3px 0 0 var(--ramka);
}
.tabela-danych tbody tr.wiersz-meczu-gracza:hover td:first-child {
box-shadow: inset 3px 0 0 var(--przegrana);
}
.tabela-danych tbody tr.wiersz-meczu-gracza.wygrany:hover td:first-child {
box-shadow: inset 3px 0 0 var(--wygrana);
}
.tabela-danych tbody tr.wiersz-meczu-gracza.remis:hover td:first-child {
box-shadow: inset 3px 0 0 var(--tekst-cichy);
}
.tabela-danych tbody tr.wiersz-meczu-gracza.brak-wyniku:hover td:first-child {
box-shadow: inset 3px 0 0 var(--ramka);
}
:focus-visible {
outline: 2px solid var(--zloto);
outline-offset: 2px;
}
::selection {
background: var(--wbl-gold);
color: var(--wbl-page);
}
@media (prefers-reduced-motion: reduce) {
.match-live::before,
.znacznik-live::before,
.badge-live {
animation: none;
}
.wbl-match-card,
.wbl-match-card .match-team-logo,
.wbl-match-card::after,
a.karta-gracza::after,
a.karta-druzyny::after,
a.profil-mecz::after,
.wbl-dashboard a.card::after,
.wbl-card-interactive:not(tr)::after,
.bilans-segment {
transition: none;
}
.kupon-panel,
.kupon-tlo,
.kupon-toast {
transition: none;
}
.tlo-wideo-odtwarzacz {
display: none;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (max-width: 767px) {
:root {
--wbl-gutter: 16px;
}
}
/* Geco .black-bg było #1c181e — trzeci fiolet. Duże płaty = L1. Inner (avatar) nadpisuje na L2. */
.black-bg {
background: var(--wbl-surface);
}
.header-top-area {
background: var(--wbl-surface);
}
/* ---------------------------------------------------------
RAPORT ARCHITEKTURY (krok 5.5) — nie kasować do fazy D
---------------------------------------------------------
DUPLIKATY
- --wbl-font-display/ui/data: src/style.css (admin) i ten plik (public).
To nie jest konflikt kaskady — layoutPubliczny ładuje Geco+nadpisania,
layoutPanel ładuje /style.css. Ten sam zestaw krojów, dwa stosy.
- .emblemat + mask: skopiowane 1:1 w src/style.css i tu (~linia 1992).
- .naglowek-sekcji: src/style.css i tu (~linia 138). Publiczna wersja
wygrywa tylko na stronach z nadpisania.css.
- :root: jeden blok na górze pliku (fonty + paleta).
LEGACY NADAL WPŁYWA NA WBL
- header-top-area, main-header, navbar-wrap, .navbar-wrap ul li.show
(Geco). .wbl-match-card / .wbl-dashboard już własny język, header nie.
- .coming-match-item, .match-item, .community-wrap — stare karty szablonu.
Nowe mecze używają .wbl-match-card, ale hero meczu nadal .coming-match-*.
- Blok „Zastepuje img/bg”: tła Geco przez var(--wbl-surface) L1.
Nie usuwać reguł — bez nich wraca grafika szablonu.
- table.wbl-tabela-liga tło var(--wbl-surface) L1 (było Geco #1c181e).
- --wbl-surface-2 #261a2e USUNIĘTE — zlane do L2 --wbl-emphasis #20132b.
- .container Bootstrapa (1170px przy lg) vs --wbl-container 1180px.
Klasa .wbl-container jest gotowa, HTML jeszcze używa .container.
WYSOKA SPECIFICITY
- table.wbl-tabela-liga tbody .table-row:first-child .tabela-wynikowa-punkty.wbl-tabela-liga-pkt
- .navbar-wrap ul li.active:hover > a, .navbar-wrap ul li.show:hover > a
- table.tabela-scoreboard tbody tr:last-child td
- .tabela-danych.przypnij-pierwsza tbody tr:hover td:first-child
- !important na wymiarach emblematów (.wbl-dashboard-kto, .wbl-match-card,
.karta-druzyny) — walka z .match-team-logo img szablonu.
RYZYKO KONFLIKTU
- Kolejny .wbl-match-card { } vs .coming-match-item (5px złota w Geco
style.css). Dziś wygrywa nasz blok, dopóki nie pojawi się selektor
szablonu z wyższą wagą.
- Bootstrap .table { width: 790px } poniżej 1200px vs nasze tabele —
obchodzone w .scoreboard-przewijanie i .wbl-tabela-liga-scroll.
- animate.min.css vs nasze transition 180ms (reduced-motion na końcu).
KOLORY POZA MONO+GOLD (zostają, propozycja zamiany)
- --wygrana #4ea56b / --przegrana #b8455a
użycie: a.profil-mecz-w/p (lewa krawędź); .wiersz-meczu-gracza box-shadow.
Puls formy: #228b22 / #b22222 + opacity 0.8 (krok 7).
Propozycja (krok 8.5): var(--wbl-win) / var(--wbl-loss).
- --color-wygrana/#4ade80, --color-przegrana/#f87171, --color-live/#ef4444
tylko admin Tailwind (src/style.css). Publiczny LIVE: .match-live / .znacznik-live
(kropka 1.6s, --wbl-text). .badge-live to alias, bez #dc3545.
- --color-druzyna-* w @theme + KOLORY_DRUZYN — baza i admin (emblematy).
Publiczny herb na kartach: monochrom #ece9f0. Nie ruszać bazy.
- .bilans-pasek: L4 --wbl-signal vs SECONDARY --wbl-text-muted (przegrany / is-reversed).
Remis: obie strony L4 (.bilans-pasek--remis). Wysokość 6px na .bilans-segment.
- .wbl-drabinka-wrap::after używa linear-gradient (fade przewijania).
Wyjątek funkcjonalny, nie dekoracja marki.
NIE W TEJ FAZIE
- Ticker, rank movement, data meters.
- Usuwanie bloku img/bg i selektorów Geco.
KROK 11–12: lockup 48px + dwuliniowe WarBro / League + stopka z siatką.
Status: #3a9a5c (zastępuje stary wyjątek #28a745).
========================================================= */
/* ---------------------------------------------------------
KROK 5: hierarchia — złoto tylko akcentem
Geco maluje aktywne menu przez ::before { background:#e4a101 }
(waga .navbar-wrap ul li.show a::before). Belka = border-bottom.
--------------------------------------------------------- */
.navbar-wrap ul li a::before,
.navbar-wrap ul li a::after,
.navbar-wrap ul li.show a::before,
.navbar-wrap ul li.show a::after,
.navbar-wrap ul li.active a::before,
.navbar-wrap ul li.active a::after,
.navbar-wrap ul li:hover > a::before,
.navbar-wrap ul li:hover > a::after,
.navbar-wrap ul li.show:hover > a::before,
.navbar-wrap ul li.show:hover > a::after,
.navbar-wrap ul li.active:hover > a::before,
.navbar-wrap ul li.active:hover > a::after {
content: none;
display: none;
opacity: 0;
background: none;
background-color: transparent;
height: 0;
width: 0;
}
.navbar-wrap ul li > a {
font-family: var(--wbl-font-ui);
letter-spacing: 0.1em;
font-weight: 600;
color: var(--wbl-nav-idle);
background: transparent;
background-color: transparent;
border-bottom: 2px solid transparent;
box-shadow: none;
}
.navbar-wrap ul li:hover > a {
color: var(--wbl-text);
background: transparent;
background-color: transparent;
}
.navbar-wrap ul li.active > a,
.navbar-wrap ul li.show > a,
.navbar-wrap ul li.active:hover > a,
.navbar-wrap ul li.show:hover > a {
color: var(--wbl-text);
background: transparent;
background-color: transparent;
border-bottom: 2px solid var(--wbl-gold);
}
/* ---------------------------------------------------------
Telefon (< 992px): konto w nagłówku i pasek nawigacji.
Geco wypełniał menu mobilne wtyczką jQuery; po jej wycięciu telefon
został bez nawigacji. Pasek przewija się w bok (bez JS), aktywna
pozycja ma tę samą złotą belkę co na komputerze. Pola dotyku 44px.
--------------------------------------------------------- */
.wbl-konto-mobilne {
display: flex;
align-items: center;
gap: var(--wbl-space-2);
margin-left: auto;
}
.wbl-konto-mobilne-link,
.wbl-konto-mobilne-konto {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--wbl-space-2);
min-width: 44px;
min-height: 44px;
padding: 0 var(--wbl-space-3);
background: var(--wbl-surface);
border: 1px solid var(--wbl-structure);
border-radius: var(--wbl-radius);
color: var(--wbl-text);
font-family: var(--wbl-font-ui);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: var(--wbl-tracking-ui);
text-decoration: none;
}
.wbl-konto-mobilne-link:hover,
.wbl-konto-mobilne-konto:hover,
.wbl-konto-mobilne-link:focus-visible,
.wbl-konto-mobilne-konto:focus-visible {
border-color: var(--wbl-gold);
color: var(--wbl-text);
text-decoration: none;
}
.wbl-konto-mobilne-link i {
color: var(--wbl-text-muted);
}
.wbl-konto-mobilne-link.header-saldo i {
color: var(--wbl-gold);
}
.wbl-konto-mobilne-konto {
padding: 0;
width: 44px;
}
.wbl-konto-mobilne-konto img.header-avatar {
width: 28px;
height: 28px;
margin: 0;
vertical-align: middle;
}
.wbl-konto-mobilne-konto i {
color: var(--wbl-text-muted);
}
.wbl-nav-mobilna {
border-top: 1px solid var(--wbl-structure);
margin: 0 calc(var(--wbl-gutter) * -1);
}
.wbl-nav-mobilna ul {
position: relative; /* offsetLeft pozycji liczony od listy — skrypt w nagłówku */
display: flex;
gap: 0;
margin: 0;
padding: 0 var(--wbl-gutter);
list-style: none;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.wbl-nav-mobilna ul::-webkit-scrollbar {
display: none;
}
.wbl-nav-mobilna li {
flex: 0 0 auto;
scroll-snap-align: start;
}
.wbl-nav-mobilna a {
display: flex;
align-items: center;
min-height: 44px;
padding: 0 var(--wbl-space-3);
border-bottom: 2px solid transparent;
color: var(--wbl-nav-idle);
font-family: var(--wbl-font-ui);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
}
.wbl-nav-mobilna a:hover,
.wbl-nav-mobilna a:focus-visible {
color: var(--wbl-text);
text-decoration: none;
}
.wbl-nav-mobilna li.show > a {
color: var(--wbl-text);
border-bottom-color: var(--wbl-gold);
}
.karta-gracza-avatar,
.monogram-litera {
box-sizing: border-box;
background-color: var(--wbl-emphasis);
border: 1px solid var(--wbl-border);
color: var(--wbl-text-muted);
font-weight: 700;
box-shadow: none;
}
.profil-hero .profil-hero-avatar,
.profil-hero .profil-hero-avatar.monogram-litera {
color: var(--wbl-gold);
}
/* ---------------------------------------------------------
KROK 8: hover = aktywacja krawędzi, nie uniesienie karty.
Zastępuje krok 6 (translateY + glow). Złoto tylko jako linia ::after.
Tabele: lewy inset, bez ::after na całą szerokość.
--------------------------------------------------------- */
:is(
a.karta-gracza,
a.karta-druzyny,
a.profil-mecz,
.wbl-match-card,
.wbl-dashboard a.card,
.wbl-card-interactive:not(tr)
) {
position: relative;
transition:
background-color var(--wbl-interaction-ms) ease,
border-color var(--wbl-interaction-ms) ease;
}
:is(
a.karta-gracza,
a.karta-druzyny,
a.profil-mecz,
.wbl-match-card,
.wbl-dashboard a.card,
.wbl-card-interactive:not(tr)
)::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--wbl-interaction-line);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--wbl-interaction-ms) ease;
pointer-events: none;
}
:is(
a.karta-gracza,
a.karta-druzyny,
a.profil-mecz,
.wbl-match-card,
.wbl-dashboard a.card,
.wbl-card-interactive:not(tr)
):is(:hover, :focus, :focus-visible) {
transform: none;
background-color: color-mix(in srgb, var(--wbl-surface) 97.5%, var(--wbl-text) 2.5%);
}
:is(
a.karta-gracza,
a.karta-druzyny,
a.profil-mecz,
.wbl-match-card,
.wbl-dashboard a.card,
.wbl-card-interactive:not(tr)
):is(:hover, :focus, :focus-visible)::after {
transform: scaleX(1);
}
.tabela-danych tbody tr.wbl-card-interactive:hover,
.tabela-danych tbody tr.wbl-card-interactive:focus-within {
transform: none;
z-index: auto;
box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
:is(
a.karta-gracza,
a.karta-druzyny,
a.profil-mecz,
.wbl-match-card,
.wbl-dashboard a.card,
.wbl-card-interactive:not(tr)
)::after {
transition: none;
}
:is(
a.karta-gracza,
a.karta-druzyny,
a.profil-mecz,
.wbl-match-card,
.wbl-dashboard a.card,
.wbl-card-interactive:not(tr)
):is(:hover, :focus, :focus-visible) {
transform: none;
}
:is(
a.karta-gracza,
a.karta-druzyny,
a.profil-mecz,
.wbl-match-card,
.wbl-dashboard a.card,
.wbl-card-interactive:not(tr)
):is(:hover, :focus, :focus-visible)::after {
transform: scaleX(1);
}
.tabela-danych tbody tr.wbl-card-interactive:hover,
.tabela-danych tbody tr.wbl-card-interactive:focus-within {
transform: none;
box-shadow: none;
}
}
/* ---------------------------------------------------------
KROK 11–12: lockup 48px + dwuliniowa typografia WarBro / League
Publiczny portal NIE ładuje Tailwinda. Opakowanie .logo to Geco.
Prompt Figmy: gradient tła, blur glow, box-shadow, drop-shadow —
pominięte (zakaz WBL: cienie, blur, gradienty). Złoto tylko --wbl-gold.
--------------------------------------------------------- */
.main-header .logo,
.main-menu nav > .logo {
display: flex;
align-items: center;
flex-shrink: 0;
min-width: max-content;
}
/* === LOGO MARK — naglowek i stopka === */
.nav-logo {
display: inline-flex;
align-items: center;
gap: var(--wbl-space-4);
text-decoration: none;
flex-shrink: 0;
line-height: 1;
position: relative;
}
.main-header .nav-logo {
min-height: 80px;
}
.nav-logo-mark-box {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 48px;
height: 48px;
flex-shrink: 0;
padding: 6px;
border-radius: var(--wbl-radius);
background-color: var(--wbl-page);
border: 1px solid color-mix(in srgb, var(--wbl-gold) 40%, transparent);
position: relative;
z-index: 1;
transition: border-color var(--wbl-interaction-ms) ease;
}
.nav-logo-mark {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
flex-shrink: 0;
}
.nav-logo-text {
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1;
white-space: nowrap;
}
.nav-logo-primary {
font-family: var(--wbl-font-display);
font-size: 22px;
font-weight: 800;
letter-spacing: -0.05em;
line-height: 1;
text-transform: uppercase;
color: var(--wbl-text);
}
.nav-logo-secondary {
font-family: var(--wbl-font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3em;
line-height: 1;
text-transform: uppercase;
color: var(--wbl-gold);
margin-top: var(--wbl-space-1);
}
@media (hover: hover) {
.nav-logo:hover .nav-logo-mark-box {
border-color: var(--wbl-gold);
}
}
.nav-logo:focus-visible .nav-logo-mark-box {
border-color: var(--wbl-gold);
}
/* === STOPKA === */
.wbl-stopka {
margin-top: var(--wbl-space-7);
border-top: 1px solid var(--wbl-structure);
background-color: var(--tlo);
}
.wbl-stopka-wnetrze {
max-width: 1200px;
margin: 0 auto;
padding: var(--wbl-space-6) var(--wbl-space-5) var(--wbl-space-5);
}
/* Górna sekcja: logo + nawigacja + status */
.wbl-stopka-gora {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wbl-space-5);
flex-wrap: wrap;
}
/* Nawigacja w stopce */
.wbl-stopka-nav {
display: flex;
align-items: center;
gap: var(--wbl-space-6);
flex-wrap: wrap;
}
.wbl-stopka-link {
font-family: var(--wbl-font-data);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
color: var(--wbl-text-muted);
text-decoration: none;
opacity: 0.7;
transition: opacity var(--wbl-interaction-ms) ease, color var(--wbl-interaction-ms) ease;
}
.wbl-stopka-link:hover {
opacity: 1;
color: var(--wbl-text);
text-decoration: none;
}
/* Status systemu */
.wbl-stopka-status {
display: flex;
align-items: center;
gap: 7px;
flex-shrink: 0;
}
.wbl-stopka-status-kropka {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #3a9a5c;
box-shadow: 0 0 5px rgba(58, 154, 92, 0.4);
flex-shrink: 0;
}
.wbl-stopka-status-tekst {
font-family: var(--wbl-font-data);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
color: #3a9a5c;
}
/* Separator */
.wbl-stopka-separator {
height: 1px;
background-color: var(--wbl-structure);
margin: var(--wbl-space-5) 0 var(--wbl-space-4);
opacity: 0.5;
}
/* Dolna sekcja: tagline + copyright */
.wbl-stopka-dol {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wbl-space-4);
flex-wrap: wrap;
}
.wbl-stopka-tagline {
font-family: var(--wbl-font-ui);
font-size: 0.7rem;
color: var(--wbl-text-muted);
opacity: 0.5;
margin: 0;
}
.wbl-stopka-copy {
font-family: var(--wbl-font-data);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--wbl-text-muted);
opacity: 0.35;
margin: 0;
white-space: nowrap;
}
/* ---------------------------------------------------------
Audyt wizualny — karty meczów (lewy ::before) + #2–#7.
KROK 8 ::after (dolna linia) zostaje na kartach graczy/drużyn.
Na .wbl-match-card wygrywa ta specyfikacja. Logo/stopka bez zmian.
Hover kart: świadomy wyjątek #201227 / #4a3358 (nie L2/L3).
--------------------------------------------------------- */
a.wbl-match-card,
.wbl-match-card {
position: relative;
overflow: hidden;
cursor: pointer;
border: 1px solid var(--wbl-structure);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.03);
transition: background-color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
/* Dolna linia KROK 8 — wyłączona na kartach meczów (zostaje lewy scaleY). */
a.wbl-match-card.wbl-card-interactive::after,
.wbl-match-card.wbl-card-interactive::after,
a.wbl-match-card::after,
.wbl-match-card::after {
content: none;
display: none;
width: 0;
height: 0;
transform: none;
background: none;
box-shadow: none;
}
/* 3px w paddingu (left:0), nie poza boxem — overflow:hidden nie obcina linii. */
a.wbl-match-card::before,
.wbl-match-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--wbl-signal);
transform: scaleY(0);
transform-origin: center;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 2;
}
a.wbl-match-card.wbl-card-interactive:hover,
a.wbl-match-card.wbl-card-interactive:focus,
a.wbl-match-card.wbl-card-interactive:focus-visible,
a.wbl-match-card:hover,
a.wbl-match-card:focus,
a.wbl-match-card:focus-visible,
.wbl-match-card:hover,
.wbl-match-card:focus,
.wbl-match-card:focus-visible {
transform: none;
background-color: #201227;
border-color: #4a3358;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
text-decoration: none;
color: var(--wbl-text);
}
a.wbl-match-card:hover::before,
a.wbl-match-card:focus::before,
a.wbl-match-card:focus-visible::before,
.wbl-match-card:hover::before,
.wbl-match-card:focus::before,
.wbl-match-card:focus-visible::before {
transform: scaleY(1);
}
/* LIVE: zostaw 2px marker + .match-live. Hover ::before to ten sam złoty reveal. */
a.wbl-match-card.wbl-match-status--live,
.wbl-match-card.wbl-match-status--live {
border-left-width: 2px;
border-left-color: var(--tekst-cichy);
}
a.wbl-match-card.wbl-match-status--live:hover,
a.wbl-match-card.wbl-match-status--live:focus,
a.wbl-match-card.wbl-match-status--live:focus-visible,
.wbl-match-card.wbl-match-status--live:hover,
.wbl-match-card.wbl-match-status--live:focus,
.wbl-match-card.wbl-match-status--live:focus-visible {
border-left-width: 2px;
border-left-color: var(--tekst-cichy);
}
@media (prefers-reduced-motion: reduce) {
a.wbl-match-card::before,
.wbl-match-card::before {
transition: none;
}
a.wbl-match-card.wbl-card-interactive:hover,
a.wbl-match-card.wbl-card-interactive:focus-visible,
a.wbl-match-card:hover,
a.wbl-match-card:focus-visible {
transform: none;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
a.wbl-match-card:hover::before,
a.wbl-match-card:focus-visible::before,
.wbl-match-card:hover::before,
.wbl-match-card:focus-visible::before {
transform: scaleY(1);
}
}
/* #3 Tabela: pasek 3px na cały wiersz (inset 1. komórki — collapse gubi border na ). */
table.tabela-danych tbody tr.lider td:first-child,
table.tabela-danych tbody tr.standings-row.rank-1 td:first-child,
table.tabela-danych tbody tr.lider:hover td:first-child,
table.tabela-danych tbody tr.standings-row.rank-1:hover td:first-child {
box-shadow: inset 3px 0 0 var(--wbl-signal);
}
table.tabela-danych tbody tr.miejsce-2 td:first-child,
table.tabela-danych tbody tr.standings-row.rank-2 td:first-child,
table.tabela-danych tbody tr.miejsce-2:hover td:first-child,
table.tabela-danych tbody tr.standings-row.rank-2:hover td:first-child {
box-shadow: inset 3px 0 0 var(--wbl-text-muted);
}
table.tabela-danych tbody tr.miejsce-3 td:first-child,
table.tabela-danych tbody tr.standings-row.rank-3 td:first-child,
table.tabela-danych tbody tr.miejsce-3:hover td:first-child,
table.tabela-danych tbody tr.standings-row.rank-3:hover td:first-child {
box-shadow: inset 3px 0 0 var(--wbl-structure);
}
table.tabela-danych tbody tr.lider,
table.tabela-danych tbody tr.standings-row.rank-1 {
border-left: 3px solid var(--wbl-signal);
}
table.tabela-danych tbody tr.miejsce-2,
table.tabela-danych tbody tr.standings-row.rank-2 {
border-left: 3px solid var(--wbl-text-muted);
}
table.tabela-danych tbody tr.miejsce-3,
table.tabela-danych tbody tr.standings-row.rank-3 {
border-left: 3px solid var(--wbl-structure);
}
table.tabela-danych tbody tr.miejsce-2 .lokata,
table.tabela-danych tbody tr.standings-row.rank-2 .rank-number {
color: var(--wbl-text-muted);
}
table.tabela-danych tbody tr.miejsce-3 .lokata,
table.tabela-danych tbody tr.standings-row.rank-3 .rank-number {
color: var(--wbl-structure);
}
/* Fade pod kartami, nie za nimi — inaczej widać tylko 32px i wychodzi kreska. */
section#nadchodzace.game-manage-area.hero-section {
position: relative;
background: transparent;
background-image: none;
padding-bottom: 0;
}
section#nadchodzace.game-manage-area.hero-section > .container {
position: relative;
z-index: 1;
}
section#nadchodzace.game-manage-area.hero-section::after {
content: "";
display: block;
height: 280px;
pointer-events: none;
/* Pełne L0 w połowie — inaczej ostatnie piksele gradientu wychodzą kreską na #tabela. */
background: linear-gradient(
to bottom,
var(--wbl-page-transparent) 0%,
var(--wbl-page) 55%,
var(--wbl-page) 100%
);
}
/* #7 Profil: radius 2px zostaje; więcej L2 wokół avatara. Pasek złoty; --niski szary. */
.profil-hero .profil-hero-avatar,
.profil-hero .profil-hero-avatar.monogram-litera {
box-sizing: border-box;
padding: 10px;
background-color: var(--wbl-emphasis);
border-radius: 2px;
}
.metric-bar__top strong,
.metric-bar .stat-wartosc {
color: var(--wbl-text);
}
/* Miniaturki map: sekcja „Wynik po mapach”. Nagłówek meczu ma tylko tekst (BO3/BO5). */
.mecz-hero-mapy-tekst {
margin: var(--wbl-space-3) 0 0;
text-align: center;
font-family: var(--wbl-font-data);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--wbl-text-muted);
}
.mecz-korekty {
margin: var(--wbl-space-3) 0 0;
text-align: center;
}
.mecz-korekty p {
margin: 0.2rem 0 0;
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.45;
letter-spacing: 0;
text-transform: none;
color: var(--tekst-cichy);
}
.kupon-po-korekcie {
display: inline;
font-size: 0.75rem;
font-weight: 400;
}
.row.karta-mapy-rzad {
display: flex;
flex-wrap: wrap;
}
.row.karta-mapy-rzad--jedna {
justify-content: center;
}
.row.karta-mapy-rzad--jedna > .karta-mapy-kolumna {
flex: 0 0 50%;
width: 50%;
max-width: 50%;
}
.coming-match-info.karta-mapy-meczu {
overflow: hidden;
padding: 0;
width: 100%;
}
.coming-match-info.karta-mapy-meczu .mapa-miniaturka {
display: block;
width: 100%;
max-width: none;
height: auto;
aspect-ratio: 4 / 1;
object-fit: cover;
margin: 0;
}
.karta-mapy-meczu h5,
.karta-mapy-meczu p {
padding-left: var(--wbl-space-5);
padding-right: var(--wbl-space-5);
}
.karta-mapy-meczu h5 {
padding-top: var(--wbl-space-4);
}
.karta-mapy-meczu p {
padding-bottom: var(--wbl-space-4);
margin-bottom: 0;
}
.wbl-match-card-mapa .mapa-miniaturka {
width: 40px;
height: 24px;
object-fit: cover;
flex-shrink: 0;
}
/* Regulamin: prawdziwy checkbox, wygląd portalu. Hierarchia: h2 > akapit. */
.wbl-zgoda {
display: grid;
grid-template-columns: 20px 1fr;
align-items: start;
column-gap: 12px;
margin: 0;
cursor: pointer;
color: var(--wbl-text);
font-weight: 400;
}
.wbl-zgoda-input {
grid-column: 1;
grid-row: 1;
width: 20px;
height: 20px;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
appearance: none;
-webkit-appearance: none;
}
.wbl-zgoda-mark {
grid-column: 1;
grid-row: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
box-sizing: border-box;
border: 1px solid var(--wbl-text-muted);
border-radius: var(--wbl-radius);
background-color: var(--wbl-surface);
pointer-events: none;
}
.wbl-zgoda-input:focus-visible + .wbl-zgoda-mark {
outline: 2px solid var(--wbl-signal);
outline-offset: 2px;
}
.wbl-zgoda-input:checked + .wbl-zgoda-mark {
background-color: var(--wbl-signal);
border-color: var(--wbl-signal);
}
.wbl-zgoda-input:checked + .wbl-zgoda-mark::after {
content: "";
width: 5px;
height: 9px;
margin-top: -1px;
border: solid var(--wbl-page);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.wbl-zgoda-input:disabled + .wbl-zgoda-mark {
opacity: 0.7;
}
.wbl-zgoda-input:disabled ~ .wbl-zgoda-tekst {
opacity: 0.55;
cursor: default;
}
.wbl-zgoda-tekst {
grid-column: 2;
grid-row: 1;
font-family: var(--wbl-font-ui);
font-size: 0.9rem;
font-weight: 400;
line-height: 1.4;
}
#regulamin-tresc,
#regulamin-tresc.black-bg {
color: var(--wbl-text);
font-weight: 400;
}
#regulamin-tresc p,
#regulamin-tresc.black-bg p,
#regulamin-tresc li,
#regulamin-tresc.black-bg li {
font-family: var(--wbl-font-ui);
font-size: 0.95rem;
font-weight: 400;
color: var(--wbl-text);
line-height: 1.55;
}
#regulamin-tresc h2,
#regulamin-tresc.black-bg h2 {
font-family: var(--wbl-font-ui);
font-size: 1.25rem;
font-weight: 600;
letter-spacing: var(--wbl-tracking-ui);
color: var(--wbl-text);
margin: 1.35em 0 0.45em;
text-transform: none;
}
#regulamin-tresc h2:first-child {
margin-top: 0;
}
#regulamin-tresc h3 {
font-family: var(--wbl-font-ui);
font-size: 1rem;
font-weight: 600;
color: var(--wbl-text);
margin: 1.1em 0 0.4em;
}
#regulamin-tresc ol,
#regulamin-tresc ul {
margin: 0.4em 0 0.9em;
padding-left: 1.35em;
}
#regulamin-tresc strong {
font-weight: 600;
color: var(--wbl-text);
}
#regulamin-tresc .tabela-scroll {
margin: 0.6em 0 1em;
}
#regulamin-tresc .tabela-danych thead th {
background: var(--wbl-emphasis);
top: 0;
}
/* Wideo przebija przez karty w hero/dashboard. Tabela i stopka = PAGE po fade. */
.main-header,
.menu-style-two,
.sticky-menu,
.header-top-area {
background-color: var(--wbl-surface-fill);
}
.wbl-match-card,
a.karta-gracza,
a.karta-druzyny,
.profil-statystyki,
.wbl-dashboard .card,
.wbl-dashboard-statystyki,
.community-wrap table,
.tabela-scroll,
table.tabela-danych {
background-color: var(--wbl-surface-fill);
}
@media (max-width: 640px) {
.tabela-danych.przypnij-pierwsza td:first-child,
.tabela-danych.przypnij-pierwsza th:first-child {
background: var(--wbl-page-fill);
}
}
/* === EMPTY STATE === */
.wbl-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--wbl-space-3);
padding: var(--wbl-space-7) var(--wbl-space-5);
background-color: transparent;
border: 1px dashed var(--wbl-structure);
border-radius: var(--wbl-radius);
text-align: center;
}
.wbl-empty-state-naglowek,
.wbl-empty-state p.wbl-empty-state-naglowek {
font-family: var(--wbl-font-data);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
color: var(--wbl-text-muted);
opacity: 0.6;
margin: 0;
}
.wbl-empty-state-opis,
.wbl-empty-state p.wbl-empty-state-opis {
font-family: var(--wbl-font-ui);
font-size: 0.75rem;
font-weight: 400;
color: var(--wbl-text-muted);
opacity: 0.4;
margin: 0;
max-width: 260px;
}
.zysk-plus {
color: var(--wygrana);
}
.zysk-minus {
color: var(--przegrana);
}
.wiersz-meczu-gracza.kupon-czeka {
opacity: 0.55;
box-shadow: none;
}
.typerzy-zakladki {
position: relative;
}
.typerzy-zakladki > input[type="radio"] {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.typerzy-nav {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
}
.typerzy-nav label {
cursor: pointer;
font-family: var(--wbl-font-data);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
color: var(--wbl-text-muted);
border-bottom: 2px solid transparent;
padding-bottom: 4px;
}
.typerzy-zakladki > .typerzy-panel {
display: none;
}
.typerzy-zakladki > #typerzy-zysk:checked ~ #panel-zysk,
.typerzy-zakladki > #typerzy-skutecznosc:checked ~ #panel-skutecznosc,
.typerzy-zakladki > #typerzy-rekordy:checked ~ #panel-rekordy {
display: block;
}
.typerzy-zakladki > #typerzy-zysk:checked ~ .typerzy-nav label[for="typerzy-zysk"],
.typerzy-zakladki > #typerzy-skutecznosc:checked ~ .typerzy-nav label[for="typerzy-skutecznosc"],
.typerzy-zakladki > #typerzy-rekordy:checked ~ .typerzy-nav label[for="typerzy-rekordy"] {
color: var(--wbl-text);
border-bottom-color: var(--wbl-gold);
}
.typerzy-rekord {
padding: 20px;
border: 1px solid var(--wbl-structure);
}
/* WYJATEK: kupon bukmacherski — Geco nie ma zakładów. Tokeny --wbl-*, mobile-first. */
.wbl-match-card-link {
display: block;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.wbl-match-card-link:hover,
.wbl-match-card-link:focus,
.wbl-match-card-link:focus-visible {
text-decoration: none;
color: inherit;
}
.wbl-match-card {
cursor: default;
}
.kupon-rynek {
position: relative;
z-index: 3;
margin-top: var(--wbl-space-4);
padding-top: var(--wbl-space-3);
border-top: 1px solid var(--wbl-structure);
}
.mecz-hero .kupon-rynek {
width: 100%;
align-self: stretch;
border-top-color: var(--ramka-wlos);
}
.kupon-odliczanie,
.kupon-rynek-zamkniety,
.kupon-rynek-blokada {
margin: 0 0 var(--wbl-space-2);
font-family: var(--wbl-font-data);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
text-align: center;
color: var(--wbl-text-muted);
}
.kupon-odliczanie--pilne {
color: var(--przegrana);
}
.mecz-format-uwaga {
margin: 0 0 var(--wbl-space-2);
font-family: var(--wbl-font-data);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
text-align: center;
color: var(--wbl-text-muted);
}
.mecz-format-uwaga a {
color: inherit;
text-decoration: underline;
}
.kupon-kursy {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--wbl-space-2);
}
.kupon-kurs {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wbl-space-2);
width: 100%;
min-height: 48px;
padding: var(--wbl-space-2) var(--wbl-space-3);
margin: 0;
appearance: none;
-webkit-appearance: none;
background: var(--wbl-emphasis);
border: 1px solid var(--wbl-structure);
border-radius: var(--wbl-radius);
color: var(--wbl-text);
cursor: pointer;
box-shadow: none;
text-align: left;
}
.kupon-kurs:hover,
.kupon-kurs:focus,
.kupon-kurs:focus-visible,
.kupon-kurs.is-aktywny {
border-color: var(--wbl-gold);
outline: none;
}
.kupon-kurs.is-aktywny {
box-shadow: inset 0 0 0 1px var(--wbl-gold);
background: color-mix(in srgb, var(--wbl-gold) 12%, var(--wbl-emphasis));
}
.kupon-kurs-skrot {
font-family: var(--wbl-font-data);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
color: var(--wbl-text-muted);
}
.kupon-kurs-wartosc {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--wbl-font-data);
font-size: 1.6rem;
font-weight: 700;
letter-spacing: var(--wbl-tracking-data);
color: var(--wbl-gold);
line-height: 1;
}
.kupon-kurs-wartosc .fa-caret-up {
color: var(--wbl-text);
font-size: 0.7em;
}
.kupon-kurs-wartosc .fa-caret-down {
color: var(--przegrana);
font-size: 0.7em;
}
.kupon-proporcje {
display: flex;
align-items: center;
gap: var(--wbl-space-2);
margin-top: var(--wbl-space-3);
font-family: var(--wbl-font-data);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: var(--wbl-tracking-data);
color: var(--wbl-text-muted);
}
.kupon-proporcje-tor {
flex: 1;
height: 4px;
background: var(--wbl-structure);
overflow: hidden;
}
.kupon-proporcje-tor i {
display: block;
height: 100%;
background: var(--wbl-signal);
font-style: normal;
}
.header-saldo span {
font-family: var(--wbl-font-data);
font-weight: 700;
letter-spacing: var(--wbl-tracking-data);
color: var(--wbl-gold);
}
.header-user-login > a.header-saldo i,
.header-saldo i {
color: var(--wbl-gold);
}
/* WYJATEK: kupon — szuflada z dołu na telefonie i komputerze.
Wejście 280ms, zejście 200ms. Bez fade na pulpicie. */
.kupon-tlo {
position: fixed;
inset: 0;
z-index: 1190;
background: var(--wbl-page-fill);
opacity: 0;
transition: opacity var(--wbl-kupon-wyjscie-ms) var(--wbl-ease-drawer);
}
.kupon-tlo.is-open {
opacity: 1;
transition-duration: var(--wbl-kupon-wejscie-ms);
}
.kupon-panel {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1200;
max-height: min(92dvh, 92vh, 640px);
overflow: auto;
overscroll-behavior: contain;
padding: var(--wbl-space-4) var(--wbl-space-5);
padding-bottom: max(var(--wbl-space-5), env(safe-area-inset-bottom));
background: var(--wbl-surface);
border-top: 1px solid var(--wbl-structure);
transform: translateY(100%);
transition: transform var(--wbl-kupon-wyjscie-ms) var(--wbl-ease-drawer);
}
.kupon-panel.is-open {
transform: translateY(0);
transition-duration: var(--wbl-kupon-wejscie-ms);
}
.kupon-panel-uchwyt {
width: 40px;
height: 4px;
margin: 0 auto var(--wbl-space-3);
background: var(--wbl-structure);
border-radius: var(--wbl-radius);
}
.kupon-panel-zamknij {
position: absolute;
top: var(--wbl-space-3);
right: var(--wbl-space-4);
width: 36px;
height: 36px;
padding: 0;
border: 0;
background: transparent;
color: var(--wbl-text-muted);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.kupon-panel form {
position: relative;
display: flex;
flex-direction: column;
gap: var(--wbl-space-3);
}
.kupon-panel-mecz {
margin: 0;
font-family: var(--wbl-font-data);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
color: var(--wbl-text-muted);
}
.kupon-panel-wybor {
display: flex;
align-items: center;
gap: var(--wbl-space-3);
}
.kupon-panel-emblemat .emblemat,
.kupon-panel-emblemat .black-bg {
width: 36px !important;
height: 36px !important;
}
.kupon-panel-laczny-etykieta {
margin: 0;
font-family: var(--wbl-font-data);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
color: var(--wbl-text-muted);
}
.kupon-panel-uwaga {
margin: 0;
font-family: var(--wbl-font-ui);
font-size: 0.8rem;
color: var(--wbl-text-muted);
}
.kupon-pozycje {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--wbl-space-2);
max-height: min(40dvh, 40vh);
overflow: auto;
overscroll-behavior: contain;
}
.kupon-pozycja {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wbl-space-2);
min-width: 0;
padding: var(--wbl-space-2) var(--wbl-space-3);
background: var(--wbl-emphasis);
border: 1px solid var(--wbl-structure);
border-radius: var(--wbl-radius);
}
.kupon-pozycja-tresc {
min-width: 0;
}
.kupon-pozycja-mecz,
.kupon-pozycja-wybor {
margin: 0;
}
.kupon-pozycja-mecz {
font-family: var(--wbl-font-data);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
color: var(--wbl-text-muted);
}
.kupon-pozycja-wybor {
font-family: var(--wbl-font-ui);
font-size: 0.9rem;
color: var(--wbl-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kupon-pozycja-usun {
flex-shrink: 0;
width: 36px;
height: 36px;
padding: 0;
border: 0;
background: transparent;
color: var(--wbl-text-muted);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
}
.kupon-wyczysc {
width: 100%;
min-height: 36px;
padding: var(--wbl-space-2);
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 1px solid var(--wbl-structure);
border-radius: var(--wbl-radius);
color: var(--wbl-text-muted);
font-family: var(--wbl-font-data);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
cursor: pointer;
}
.kupon-wyczysc:hover,
.kupon-wyczysc:focus {
border-color: var(--wbl-gold);
color: var(--wbl-text);
}
.kupon-pasek {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1180;
min-height: 48px;
padding: var(--wbl-space-3) var(--wbl-space-5);
padding-bottom: max(var(--wbl-space-3), env(safe-area-inset-bottom));
appearance: none;
-webkit-appearance: none;
background: var(--wbl-surface);
border: 0;
border-top: 1px solid var(--wbl-gold);
color: var(--wbl-gold);
font-family: var(--wbl-font-data);
font-size: 1rem;
font-weight: 700;
letter-spacing: var(--wbl-tracking-data);
text-align: center;
cursor: pointer;
}
body.kupon-ma-koszyk {
padding-bottom: 56px;
}
.kupon-tasma summary {
cursor: pointer;
font-family: var(--wbl-font-data);
font-weight: 700;
color: var(--wbl-gold);
}
.kupon-tasma ul {
margin: var(--wbl-space-2) 0 0;
padding-left: 1.1rem;
}
.kupon-panel-kurs {
margin: 0;
font-family: var(--wbl-font-data);
font-size: 2rem;
font-weight: 700;
letter-spacing: var(--wbl-tracking-data);
color: var(--wbl-gold);
line-height: 1;
}
#kupon-stawka {
width: 100%;
min-height: 52px;
padding: var(--wbl-space-3);
background: var(--wbl-emphasis);
border: 1px solid var(--wbl-structure);
border-radius: var(--wbl-radius);
color: var(--wbl-text);
font-family: var(--wbl-font-data);
font-size: 2rem;
font-weight: 700;
letter-spacing: var(--wbl-tracking-data);
}
#kupon-stawka:focus {
border-color: var(--wbl-gold);
outline: none;
}
.kupon-chipy {
display: flex;
flex-wrap: wrap;
gap: var(--wbl-space-2);
}
.kupon-chip {
flex: 1 1 4.5rem;
min-width: 0;
min-height: 44px;
padding: var(--wbl-space-2);
appearance: none;
-webkit-appearance: none;
background: var(--wbl-emphasis);
border: 1px solid var(--wbl-structure);
border-radius: var(--wbl-radius);
color: var(--wbl-text);
font-family: var(--wbl-font-data);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: var(--wbl-tracking-label);
text-transform: uppercase;
cursor: pointer;
}
.kupon-chip:hover,
.kupon-chip:focus {
border-color: var(--wbl-gold);
}
.kupon-panel-wygrana {
margin: 0;
font-family: var(--wbl-font-ui);
font-size: 0.8rem;
color: var(--wbl-text-muted);
}
.kupon-panel-wygrana strong {
display: block;
margin-top: var(--wbl-space-1);
font-family: var(--wbl-font-data);
font-size: 2rem;
font-weight: 700;
letter-spacing: var(--wbl-tracking-data);
color: var(--wbl-gold);
line-height: 1;
}
.kupon-panel-saldo {
margin: 0;
font-family: var(--wbl-font-data);
font-size: 0.8rem;
color: var(--wbl-text-muted);
}
.kupon-panel .btn {
width: 100%;
text-transform: uppercase;
}
.kupon-panel .btn:disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.kupon-toast {
position: fixed;
top: max(var(--wbl-space-5), env(safe-area-inset-top));
left: 50%;
z-index: 1300;
width: max-content;
max-width: min(92vw, 420px);
padding: var(--wbl-space-3) var(--wbl-space-4);
background: var(--wbl-emphasis);
border: 1px solid var(--wbl-structure);
border-radius: var(--wbl-radius);
color: var(--wbl-text);
font-family: var(--wbl-font-ui);
font-size: 0.9rem;
text-align: center;
overflow-wrap: anywhere;
box-sizing: border-box;
transform: translate(-50%, calc(-100% - var(--wbl-space-5)));
opacity: 0;
pointer-events: none;
transition:
opacity var(--wbl-toast-ms) var(--wbl-ease-out),
transform var(--wbl-toast-ms) var(--wbl-ease-out);
}
.kupon-toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
body.kupon-otwarty {
overflow: hidden;
}
@media (min-width: 768px) {
.kupon-panel {
left: auto;
right: var(--wbl-space-5);
bottom: var(--wbl-space-5);
width: 360px;
max-width: calc(100vw - 48px);
border: 1px solid var(--wbl-structure);
}
.kupon-panel-uchwyt {
display: none;
}
}
@media (max-width: 767px) {
.kupon-pozycje {
max-height: min(28dvh, 28vh);
}
.kupon-panel-kurs {
font-size: 1.6rem;
}
.kupon-panel-wygrana strong {
font-size: 1.5rem;
}
}
/* Wąski pasek przewijania — czat i inne listy w karcie. */
.wbl-scrollbar {
scrollbar-width: thin;
scrollbar-color: var(--wbl-structure) transparent;
}
.wbl-scrollbar:hover {
scrollbar-color: color-mix(in srgb, var(--wbl-gold) 70%, var(--wbl-page)) transparent;
}
.wbl-scrollbar::-webkit-scrollbar {
width: 4px;
}
.wbl-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.wbl-scrollbar::-webkit-scrollbar-thumb {
background: var(--wbl-structure);
border-radius: 4px;
}
.wbl-scrollbar::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--wbl-gold) 70%, var(--wbl-page));
}
/* Czat to aplikacja na całą wysokość ekranu: nagłówek, lista wiadomości (przewija
się w środku), pole pisania przypięte na dole. Strona sama się nie przewija —
wcześniej pole pisania na telefonie wypadało pod krawędź ekranu.
vh przed dvh: starsze Safari nie zna dvh i wtedy zostaje vh zamiast braku wysokości. */
body.strona-czatu {
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
overflow: hidden;
}
body.strona-czatu .wbl-stopka {
display: none;
}
body.strona-czatu .kupon-pasek,
body.strona-czatu #kupon-panel,
body.strona-czatu #kupon-tlo {
display: none !important;
}
body.strona-czatu main {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
align-items: stretch;
padding: var(--wbl-space-5) var(--wbl-gutter);
}
.wbl-czat {
display: flex;
flex-direction: column;
width: 100%;
max-width: 720px;
flex: 1;
min-height: 0;
margin: 0 auto;
padding: 0;
background: var(--wbl-emphasis-fill);
border: 1px solid var(--wbl-structure);
border-radius: var(--wbl-radius);
overflow: hidden;
}
@media (min-width: 768px) {
.wbl-czat {
max-height: 760px;
}
}
.wbl-czat-naglowek {
flex-shrink: 0;
padding: var(--wbl-space-4) var(--wbl-space-4) var(--wbl-space-2);
}
.wbl-czat-naglowek .naglowek-sekcji.section-header {
margin-top: 0;
margin-bottom: var(--wbl-space-2);
}
.wbl-czat-naglowek .section-tag {
color: var(--wbl-gold);
}
.wbl-czat-starsze {
flex-shrink: 0;
align-self: center;
margin: 0 0 var(--wbl-space-2);
padding: var(--wbl-space-1) var(--wbl-space-4);
background: none;
border: 0;
color: var(--wbl-gold);
font-family: var(--wbl-font-ui);
font-size: 0.8rem;
cursor: pointer;
}
.wbl-czat-starsze.is-ukryty,
.wbl-czat-wznow.is-ukryty {
display: none;
}
.wbl-czat-lista {
flex-grow: 1;
min-height: 0;
overflow-y: auto;
list-style: none;
margin: 0;
padding: var(--wbl-space-2) 0;
scrollbar-width: thin;
scrollbar-color: var(--wbl-structure) transparent;
}
.wbl-czat-lista::-webkit-scrollbar {
width: 3px;
}
.wbl-czat-lista::-webkit-scrollbar-track {
background: transparent;
}
.wbl-czat-lista::-webkit-scrollbar-thumb {
background: var(--wbl-structure);
}
/* Wiersz czatu i karta zaproszenia — wyjątek poza Geco, surowy CSS.
Hover tła / kolorów: feedback, ~kilkadziesiąt razy dziennie, tylko color (nie transform).
Wciśnięcie przycisku: transform scale(0.97), 160ms --wbl-ease-out.
Bez cienia/glow (zakaz WBL) — stawka Akceptuj to pełna płaszczyzna złota. */
.chat-msg {
display: flex;
flex-direction: row;
gap: 12px;
padding: 8px 12px;
font-family: var(--wbl-font-ui);
}
@media (hover: hover) and (pointer: fine) {
.chat-msg {
transition: background-color var(--wbl-hover-ms) ease;
}
.chat-msg:hover {
background-color: var(--wbl-page);
}
}
.chat-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background-color: #2a1b31;
border: 1px solid var(--wbl-structure);
border-radius: 0;
flex-shrink: 0;
color: var(--wbl-text-muted);
}
.chat-avatar-ikona {
width: 18px;
height: 18px;
display: block;
}
.chat-msg--admin .chat-avatar {
border-color: var(--wbl-gold);
color: var(--wbl-gold);
}
.chat-msg-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.chat-msg-meta {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
}
.chat-time {
display: inline;
margin: 0;
color: var(--wbl-text-muted);
font-family: var(--wbl-font-data);
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
letter-spacing: var(--wbl-tracking-data);
}
.chat-nick {
font-weight: 700;
color: var(--wbl-text);
font-size: 14px;
}
.chat-msg--admin .chat-nick {
color: var(--wbl-gold);
}
.chat-msg--wlasna:not(.chat-msg--propozycja) {
background-color: color-mix(in srgb, var(--wbl-gold) 7%, transparent);
box-shadow: inset -3px 0 0 var(--wbl-gold);
}
@media (hover: hover) and (pointer: fine) {
.chat-msg--wlasna:not(.chat-msg--propozycja):hover {
background-color: color-mix(in srgb, var(--wbl-gold) 11%, var(--wbl-page));
}
}
.chat-badge {
display: inline-block;
padding: 1px 5px;
background: var(--wbl-gold);
color: var(--wbl-page);
font-family: var(--wbl-font-display);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.4;
border-radius: 0;
}
.chat-text {
color: var(--wbl-text);
font-size: 14px;
line-height: 1.4;
word-break: break-word;
}
.chat-text--usunieta {
color: var(--wbl-text-muted);
font-style: italic;
}
.chat-embed {
margin-top: 8px;
background-color: var(--wbl-page);
border-left: 3px solid var(--wbl-gold);
padding: 12px;
max-width: 100%;
}
.embed-kicker {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
color: var(--wbl-gold);
font-family: var(--wbl-font-display);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.embed-kicker::before {
content: "";
width: 6px;
height: 6px;
background: var(--wbl-gold);
flex-shrink: 0;
}
.embed-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.embed-label {
color: var(--wbl-text);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.embed-tag {
color: var(--wbl-gold);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
flex-shrink: 0;
}
.embed-match {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 14px;
}
.embed-side {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: 1px solid var(--wbl-structure);
color: var(--wbl-gold);
font-family: var(--wbl-font-display);
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
}
.embed-team {
color: var(--wbl-text);
font-family: var(--wbl-font-display);
font-size: 16px;
font-weight: 700;
letter-spacing: var(--wbl-tracking-display);
text-transform: uppercase;
}
.embed-vs {
color: var(--wbl-text-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.embed-footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.embed-termin {
display: flex;
flex-direction: column;
gap: 4px;
}
.embed-termin .embed-label {
color: var(--wbl-text-muted);
}
.embed-time {
font-variant-numeric: tabular-nums;
color: var(--wbl-gold);
font-family: var(--wbl-font-data);
font-size: 14px;
font-weight: 700;
display: block;
}
.embed-actions {
display: flex;
gap: 8px;
}
.embed-status {
margin: 0;
font-family: var(--wbl-font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.embed-status--ok {
color: var(--wbl-gold);
}
.embed-status--nie {
color: var(--wbl-text-muted);
}
.btn-embed {
padding: 8px 14px;
font-family: var(--wbl-font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 0;
cursor: pointer;
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
transition:
transform 160ms var(--wbl-ease-out),
background-color var(--wbl-hover-ms) ease,
color var(--wbl-hover-ms) ease,
border-color var(--wbl-hover-ms) ease;
}
.btn-embed:active {
transform: scale(0.97);
}
.btn-embed:disabled {
cursor: wait;
opacity: 0.55;
}
.btn-embed-accept {
border: 1px solid var(--wbl-gold);
color: var(--wbl-page);
background: var(--wbl-gold);
}
.btn-embed-reject {
border: 1px solid var(--wbl-structure);
color: var(--wbl-text);
background: transparent;
}
@media (hover: hover) and (pointer: fine) {
.btn-embed-accept:hover,
.btn-embed-accept:focus-visible {
background: var(--wbl-text);
border-color: var(--wbl-text);
color: var(--wbl-page);
}
.btn-embed-reject:hover,
.btn-embed-reject:focus-visible {
border-color: var(--wbl-text-muted);
color: var(--wbl-text-muted);
}
}
@media (prefers-reduced-motion: reduce) {
.chat-msg,
.btn-embed,
.wbl-czat-wyslij {
transition: none;
}
.btn-embed:active,
.wbl-czat-wyslij:active {
transform: none;
}
}
.wbl-czat-usun {
margin-left: auto;
background: none;
border: 0;
color: var(--wbl-text-muted);
font-size: 0.7rem;
text-transform: uppercase;
cursor: pointer;
}
.wbl-czat-pusty {
color: var(--wbl-text-muted);
padding: var(--wbl-space-4) 12px;
}
.wbl-czat-form {
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--wbl-space-3);
margin-top: auto;
padding: var(--wbl-space-3) var(--wbl-space-4) calc(var(--wbl-space-3) + env(safe-area-inset-bottom, 0px));
background: var(--wbl-surface-fill);
border-top: 1px solid var(--wbl-structure);
}
.wbl-czat-form input {
flex: 1;
min-width: 0;
min-height: 44px;
padding: 0 var(--wbl-space-4);
background: var(--wbl-page);
border: 1px solid var(--wbl-structure);
/* WYJĄTEK Faza 4: pole czatu ma 8px na życzenie. Reszta portalu zostaje przy clip-path / max 4px. */
border-radius: 8px;
color: var(--wbl-text);
font-family: var(--wbl-font-ui);
outline: none;
box-shadow: none;
}
.wbl-czat-form input:focus,
.wbl-czat-form input:focus-visible {
border-color: var(--wbl-gold);
outline: 1px solid var(--wbl-gold);
}
.wbl-czat-form input::placeholder {
color: var(--wbl-text-muted);
}
.wbl-czat-form-hint {
flex-basis: 100%;
margin: 0;
text-align: center;
color: var(--wbl-text-muted);
font-family: var(--wbl-font-data);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.wbl-czat-wyslij {
flex-shrink: 0;
min-height: 44px;
padding: 0 var(--wbl-space-5);
border: 0;
background: var(--wbl-gold);
color: var(--wbl-page);
font-family: var(--wbl-font-display);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
cursor: pointer;
transition:
transform 160ms var(--wbl-ease-out),
background-color var(--wbl-hover-ms) ease,
color var(--wbl-hover-ms) ease;
}
.wbl-czat-wyslij:active {
transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
.wbl-czat-wyslij:hover,
.wbl-czat-wyslij:focus-visible {
background: var(--wbl-text);
color: var(--wbl-page);
outline: none;
}
}
.wbl-czat-uwaga,
.wbl-czat-wznow {
flex-shrink: 0;
padding: var(--wbl-space-3) var(--wbl-space-4);
font-size: 0.85rem;
color: var(--wbl-text-muted);
text-align: center;
}
.wbl-czat-uwaga a {
color: var(--wbl-gold);
font-weight: 600;
}
.wbl-czat-wznow button {
display: block;
margin-bottom: var(--wbl-space-2);
background: none;
border: 1px solid var(--wbl-gold);
color: var(--wbl-gold);
font-family: var(--wbl-font-display);
font-weight: 700;
text-transform: uppercase;
padding: var(--wbl-space-2) var(--wbl-space-4);
cursor: pointer;
}
.wbl-czat-mecz-link {
margin: var(--wbl-space-3) 0 0;
text-align: center;
}
.wbl-czat-mecz-link a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 var(--wbl-space-3);
font-family: var(--wbl-font-display);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--wbl-gold);
}
@media (max-width: 767px) {
.wbl-czat {
max-width: none;
}
}
/* Pula map turnieju. Bez grafiki (Dust2, Train) zostaje jednolite tło. */
.wbl-pula-siatka {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wbl-space-3, 0.75rem);
margin-bottom: var(--wbl-space-6, 1.5rem);
}
@media (min-width: 768px) {
.wbl-pula-siatka {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.wbl-pula-kafel {
position: relative;
display: flex;
align-items: flex-end;
min-height: 72px;
padding: 10px 12px;
overflow: hidden;
border: 1px solid var(--wbl-structure, rgba(236, 233, 240, 0.12));
background-color: var(--wbl-emphasis, #261a2e);
background-size: cover;
background-position: center;
}
.wbl-pula-kafel.kafel-mapy::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(20, 16, 26, 0.88), transparent 62%);
}
.wbl-pula-kafel-nazwa {
position: relative;
font-family: var(--wbl-font-display, Oxanium, sans-serif);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wbl-text, #ece9f0);
}
/* Banowanie map — Faceit-style veto */
.wbl-ban-blad {
margin: 0 0 var(--wbl-space-4);
color: var(--przegrana);
font-family: var(--wbl-font-ui);
font-size: 0.9375rem;
}
.wbl-ban-nozowka {
margin: 0 0 var(--wbl-space-4);
font-family: var(--wbl-font-ui);
font-size: 0.95rem;
color: var(--wbl-text-muted, #8b8296);
}
.wbl-ban-licznik {
margin: 0;
font-family: var(--wbl-font-data);
font-size: 2rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--wbl-signal);
}
.wbl-ban-klikacz {
padding: var(--wbl-space-3) var(--wbl-space-4);
border: 1px solid var(--wbl-structure);
background: var(--wbl-surface-fill);
}
.wbl-ban-klikacz-tekst {
margin: 0;
font-family: var(--wbl-font-ui);
font-size: 0.875rem;
color: var(--wbl-text-muted);
}
.wbl-ban-siatka {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wbl-space-3);
width: 100%;
max-width: 32rem;
margin: 0 auto var(--wbl-space-5);
align-self: center;
}
@media (min-width: 768px) {
.wbl-ban-siatka--szeroka {
grid-template-columns: repeat(4, minmax(0, 1fr));
max-width: 52rem;
}
}
.wbl-ban-kafel-komorka {
position: relative;
min-width: 0;
aspect-ratio: 1 / 1;
}
.wbl-ban-kafel-form {
position: absolute;
inset: 0;
min-width: 0;
min-height: 0;
}
.wbl-ban-kafel-komorka > .wbl-ban-kafel {
position: absolute;
inset: 0;
}
.wbl-ban-kafel {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
box-sizing: border-box;
width: 100%;
height: 100%;
min-height: 0;
padding: var(--wbl-space-3) var(--wbl-space-4);
overflow: hidden;
border: 1px solid var(--wbl-structure);
background-color: var(--wbl-emphasis);
background-size: cover;
background-position: center;
color: var(--wbl-text);
text-align: left;
font: inherit;
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
button.wbl-ban-kafel {
cursor: pointer;
position: absolute;
inset: 0;
min-height: 0;
}
button.wbl-ban-kafel:hover,
button.wbl-ban-kafel:focus-visible {
border-color: var(--wbl-signal);
outline: none;
}
button.wbl-ban-kafel:disabled {
cursor: wait;
}
.wbl-ban-kafel.kafel-mapy::before {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 48%;
background: var(--wbl-page);
opacity: 0.78;
}
.wbl-ban-kafel-nazwa {
position: relative;
font-family: var(--wbl-font-display);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wbl-ban-kafel-ban {
position: relative;
margin-top: var(--wbl-space-1);
font-family: var(--wbl-font-ui);
font-size: 0.75rem;
color: var(--wbl-text-muted);
}
.wbl-ban-kafel--ban {
opacity: 0.42;
pointer-events: none;
}
.wbl-ban-kafel--ban::after {
content: "";
position: absolute;
left: -10%;
top: 50%;
width: 120%;
height: 3px;
background: var(--wbl-signal);
transform: rotate(-18deg);
}
.wbl-ban-kafel--zostala {
border-color: var(--wbl-signal);
border-width: 2px;
}
.wbl-ban-hist-druzyna {
font-family: var(--wbl-font-display);
font-weight: 700;
}
.wbl-ban-hist-kto {
color: var(--wbl-text-muted);
}
.wbl-ban-powrot {
margin: var(--wbl-space-6) 0 0;
}
.wbl-ban-powrot a {
color: var(--wbl-signal);
font-family: var(--wbl-font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* Lobby meczu — trzy kolumny jak w poczekalni przed connect */
.wbl-lobby-kolumna {
padding: var(--wbl-space-4);
border: 1px solid var(--wbl-structure);
background: var(--wbl-surface-fill);
}
.wbl-lobby-gracze-etykieta {
margin: var(--wbl-space-3) 0 var(--wbl-space-2);
font-family: var(--wbl-font-display);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wbl-text-muted);
}
.wbl-lobby-gracze {
display: flex;
flex-direction: column;
gap: var(--wbl-space-2);
margin-bottom: var(--wbl-space-3);
}
.wbl-lobby-gracz {
display: flex;
align-items: center;
gap: var(--wbl-space-3);
min-width: 0;
min-height: 44px;
}
.wbl-lobby-gracz--odbicie {
flex-direction: row-reverse;
text-align: right;
}
.wbl-lobby-gracz--odbicie .wbl-lobby-gracz-tekst {
align-items: flex-end;
}
.wbl-lobby-gracz-tekst {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--wbl-space-1);
}
.wbl-lobby-gracz-nick {
display: flex;
align-items: center;
gap: 0.35rem;
margin: 0;
font-family: var(--wbl-font-display);
font-size: 1.35rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.wbl-lobby-gracz-nick a {
color: inherit;
}
.wbl-lobby-korona {
display: inline-flex;
color: var(--wbl-signal);
flex-shrink: 0;
}
.wbl-lobby-badge {
flex-shrink: 0;
padding: 0.15rem 0.5rem;
border: 1px solid var(--wbl-structure);
font-family: var(--wbl-font-ui);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--wbl-text-muted);
}
.wbl-lobby-badge--tu {
border-color: rgba(228, 161, 1, 0.45);
background: rgba(228, 161, 1, 0.08);
color: var(--wbl-signal);
}
.wbl-lobby-pusto,
.wbl-lobby-czekanie,
.wbl-lobby-serwer-czekaj,
.wbl-lobby-serwer-ostrzezenie {
margin: 0 0 var(--wbl-space-3);
font-family: var(--wbl-font-ui);
font-size: 0.95rem;
color: var(--wbl-text-muted);
}
.wbl-lobby-serwer-ostrzezenie {
color: var(--wbl-przegrana, #f87171);
}
.wbl-lobby-serwer-ostrzezenie a {
color: inherit;
text-decoration: underline;
}
.wbl-lobby-serwer-kroki {
list-style: none;
margin: 0 0 var(--wbl-space-3);
padding: 0;
text-align: left;
font-family: var(--wbl-font-ui);
font-size: 0.95rem;
color: var(--wbl-text-muted);
}
.wbl-lobby-serwer-krok {
margin: 0 0 0.2rem;
}
.wbl-lobby-serwer-krok--ok {
color: var(--wbl-signal);
}
.wbl-lobby-connect-licznik {
margin: 0 0 var(--wbl-space-4);
font-size: 2.5rem;
}
.wbl-lobby-connect {
display: inline-block;
margin-bottom: var(--wbl-space-3);
}
/* Lobby od veto do Connect. Ten sam kadr mapy, treść w .container.
WYJĄTEK od 30-wyglad: zasłona i szum na kadrze mapy — wyłącznie token
--wbl-page, bez nowych barw i bez animacji. CTA: obwódka przez opacity. */
.wbl-lobby--pokoj {
padding: var(--wbl-space-5) 0 var(--wbl-space-8);
}
.wbl-pokoj-scena {
position: relative;
isolation: isolate;
min-height: 36rem;
margin-bottom: var(--wbl-space-6);
overflow: hidden;
}
.wbl-pokoj-tlo {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
background: var(--wbl-page);
}
.wbl-pokoj-tlo img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: grayscale(1) contrast(1.25);
mix-blend-mode: luminosity;
opacity: 0.55;
}
.wbl-pokoj-tlo-zaslona {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(to bottom, var(--wbl-page), var(--wbl-page-transparent) 22%, var(--wbl-page-transparent) 58%, var(--wbl-page)),
radial-gradient(ellipse 80% 70% at 50% 40%, var(--wbl-page-transparent), var(--wbl-page));
}
.wbl-pokoj-tlo-ziarn {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.14;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wbl-pokoj-warstwa {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
min-height: 36rem;
padding-top: var(--wbl-space-4);
padding-bottom: var(--wbl-space-7);
}
.wbl-pokoj-naglowek {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--wbl-space-4);
margin-bottom: var(--wbl-space-6);
}
.wbl-pokoj-faza {
margin: 0;
font-family: var(--wbl-font-display);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wbl-signal);
}
.wbl-pokoj-timer {
display: flex;
align-items: center;
gap: var(--wbl-space-3);
}
.wbl-lobby--pokoj .wbl-lobby-connect-licznik {
margin: 0;
font-family: var(--wbl-font-display);
font-size: 2.75rem;
line-height: 1;
color: var(--wbl-text);
}
.wbl-pokoj-fale {
display: flex;
align-items: flex-end;
gap: 3px;
height: 1.35rem;
}
.wbl-pokoj-fale i {
display: block;
width: 2px;
background: var(--wbl-signal);
opacity: 0.55;
}
.wbl-pokoj-fale i:nth-child(1) {
height: 40%;
}
.wbl-pokoj-fale i:nth-child(2) {
height: 100%;
}
.wbl-pokoj-fale i:nth-child(3) {
height: 62%;
}
.wbl-pokoj-srodek {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.wbl-pokoj-mapa {
margin: 0;
font-family: var(--wbl-font-display);
font-size: clamp(3rem, 8vw, 6.25rem);
font-weight: 800;
letter-spacing: var(--wbl-tracking-display);
line-height: 0.9;
text-transform: uppercase;
text-align: center;
color: var(--wbl-text);
}
.wbl-pokoj-format {
margin: var(--wbl-space-3) 0 0;
font-family: var(--wbl-font-display);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--wbl-text-muted);
}
.wbl-pokoj-kolej {
width: 100%;
margin: 0 0 var(--wbl-space-4);
font-family: var(--wbl-font-display);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
text-align: center;
color: var(--wbl-signal);
}
.wbl-lobby--pokoj .wbl-lobby-czekanie,
.wbl-lobby--pokoj .wbl-ban-blad {
width: 100%;
text-align: center;
}
.wbl-lobby--pokoj .wbl-ban-klikacz-tekst {
margin-top: var(--wbl-space-2);
}
.wbl-pokoj-druzyny {
display: grid;
grid-template-columns: 1fr;
gap: var(--wbl-space-4);
width: 100%;
min-width: 0;
margin: var(--wbl-space-6) 0;
align-items: start;
}
.wbl-pokoj-vs {
display: flex;
align-items: center;
justify-content: center;
gap: var(--wbl-space-3);
padding: var(--wbl-space-3) 0;
font-family: var(--wbl-font-display);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--wbl-text-muted);
}
.wbl-pokoj-vs span {
display: block;
width: 2.5rem;
height: 1px;
background: var(--wbl-structure);
}
.wbl-lobby--pokoj .wbl-lobby-kolumna {
padding: 0;
border: 0;
background: transparent;
min-width: 0;
}
.wbl-lobby-kolumna--odbicie {
text-align: right;
}
.wbl-lobby-kolumna--odbicie .wbl-lobby-gracze-etykieta {
text-align: right;
}
.wbl-lobby--pokoj .wbl-mecz-connect {
width: 100%;
max-width: 32rem;
margin: 0 auto var(--wbl-space-4);
text-align: center;
}
.wbl-lobby--pokoj .wbl-lobby-serwer-kroki,
.wbl-lobby--pokoj .wbl-lobby-serwer-ostrzezenie,
.wbl-lobby--pokoj .wbl-lobby-serwer-czekaj {
text-align: left;
}
.wbl-lobby--pokoj .wbl-ban-nozowka {
text-align: center;
}
.wbl-pokoj-akcje {
display: flex;
flex-direction: column;
gap: var(--wbl-space-3);
}
.wbl-pokoj-akcje-rzad {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: var(--wbl-space-2);
}
.wbl-pokoj-cta {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 12rem;
min-height: 44px;
padding: var(--wbl-space-4) var(--wbl-space-6);
border: 0;
background: var(--wbl-text);
color: var(--wbl-page);
font-family: var(--wbl-font-display);
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
}
.wbl-pokoj-cta::after {
content: "";
position: absolute;
inset: -6px;
border: 1px solid var(--wbl-signal);
opacity: 0;
pointer-events: none;
transition: opacity var(--wbl-hover-ms) ease;
}
@media (hover: hover) and (pointer: fine) {
.wbl-pokoj-cta:hover,
.wbl-pokoj-cta:focus-visible {
background: var(--wbl-signal);
color: var(--wbl-page);
text-decoration: none;
}
.wbl-pokoj-cta:hover::after,
.wbl-pokoj-cta:focus-visible::after {
opacity: 1;
}
.wbl-pokoj-kopiuj-komende:hover,
.wbl-pokoj-kopiuj-komende:focus-visible {
border-color: var(--wbl-signal);
color: var(--wbl-signal);
}
}
.wbl-pokoj-terminal {
display: flex;
align-items: center;
gap: var(--wbl-space-2);
min-height: 44px;
padding: var(--wbl-space-2) var(--wbl-space-3);
border: 1px solid var(--wbl-structure);
background: var(--wbl-page);
text-align: left;
}
.wbl-pokoj-terminal-linia {
display: flex;
align-items: baseline;
gap: var(--wbl-space-2);
min-width: 0;
flex: 1;
margin: 0;
overflow-x: auto;
font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
font-size: 0.8rem;
color: var(--wbl-text-muted);
}
.wbl-pokoj-terminal-prompt {
flex-shrink: 0;
color: var(--wbl-signal);
}
.wbl-pokoj-terminal code {
font-family: inherit;
font-size: inherit;
color: var(--wbl-text);
letter-spacing: 0;
}
.wbl-pokoj-kopiuj-komende {
flex: 0 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 var(--wbl-space-4);
border: 1px solid var(--wbl-structure);
background: var(--wbl-page);
color: var(--wbl-text);
cursor: pointer;
font-family: var(--wbl-font-display);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wbl-pokoj-connect-status {
margin: 0;
font-family: var(--wbl-font-ui);
font-size: 0.85rem;
color: var(--wbl-signal);
}
.wbl-pokoj-connect-status[hidden] {
display: none;
}
.wbl-pokoj-stopka {
padding-bottom: var(--wbl-space-4);
}
.wbl-pokoj-logi {
margin: 0 0 var(--wbl-space-5);
padding-top: var(--wbl-space-4);
border-top: 1px solid var(--wbl-structure);
}
.wbl-pokoj-logi-naglowek {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--wbl-space-2);
margin-bottom: var(--wbl-space-3);
font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wbl-text-muted);
}
.wbl-pokoj-logi-tresc {
margin: 0;
padding: 0;
list-style: none;
font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
font-size: 0.8rem;
color: var(--wbl-text-muted);
}
.wbl-pokoj-logi-tresc li {
display: grid;
grid-template-columns: 9ch minmax(0, 1fr);
gap: var(--wbl-space-3);
margin: 0 0 var(--wbl-space-2);
}
.wbl-pokoj-log-czas {
font-variant-numeric: tabular-nums;
color: var(--wbl-text-muted);
}
.wbl-pokoj-log--akcent {
color: var(--wbl-text);
}
.wbl-pokoj-log--akcent strong {
color: var(--wbl-signal);
font-weight: 700;
}
@media (min-width: 992px) {
.wbl-pokoj-druzyny {
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
}
}
@media (max-width: 991px) {
.wbl-lobby-kolumna--odbicie,
.wbl-lobby-gracz--odbicie {
text-align: left;
}
.wbl-lobby-gracz--odbicie {
flex-direction: row;
}
.wbl-lobby-kolumna--odbicie .wbl-lobby-gracze-etykieta,
.wbl-lobby-gracz--odbicie .wbl-lobby-gracz-tekst {
text-align: left;
align-items: flex-start;
}
}
.wbl-mecz-mapa-przed {
margin-top: var(--wbl-space-4);
}
.wbl-mecz-ban-link {
margin: var(--wbl-space-3) 0 0;
}
.wbl-mecz-ban-link a {
color: var(--wbl-signal);
font-family: var(--wbl-font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.wbl-mecz-connect {
margin: var(--wbl-space-4) 0 0;
padding: var(--wbl-space-4);
border: 1px solid var(--wbl-structure);
background: var(--wbl-emphasis-fill);
}
.wbl-mecz-connect p {
margin: 0 0 var(--wbl-space-2);
font-family: var(--wbl-font-ui);
font-size: 0.95rem;
}
.wbl-mecz-connect .wbl-pokoj-terminal-linia {
margin: 0;
font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
font-size: 0.8rem;
}
.wbl-mecz-connect .wbl-pokoj-terminal code {
font-family: inherit;
font-size: inherit;
letter-spacing: 0;
color: var(--wbl-text);
}
/* ==========================================================
RUCH 1/4 — koniec z globalnym "transition: all" z Geco
Żywe w naszym HTML: `a` (menu, stopka, karty, tabele) i `.btn`
(Zaloguj, POSTAW KUPON, czat, regulamin). `.button` zostaje z pary
Geco `a, .button` — klasy nie ma w HTML, ale ta sama reguła źródłowa.
Pozostałe `transition: all` z Geco są na martwych klasach (audyt 2026-09-02):
.img, .header-shop-cart ul.minicart, .navbar-wrap ul li > .submenu,
.submenu li a, .rotated-btn::before/::after, .lg-tag a::before,
.product-content/.features-item .product-tag a::before,
.uc-game-price h5::before, .blog-list-post-tag a::before,
.my-match-info .live-btn:before, .community-post-tag a::before,
.home-five-header/.home-six-header … header-top-login i, .border-btn.
.rotated-btn NIE rysuje ścięć WBL — to martwy przycisk Geco z trójkątami
z border. Ścięcia: clip-path (.sciecie-* panel, kafle banowania).
Pseudoelementy .btn.btn-style-two::before/::after (skos Geco) są
wyłączone wyżej (display:none). Nie nadpisujemy martwego CSS.
========================================================== */
a,
.button,
.btn {
transition: none;
}
@media (hover: hover) and (pointer: fine) {
.navbar-wrap ul li a,
.header-user-login a,
.wbl-stopka-link,
.tabela-danych a,
.wbl-match-card-link,
a.karta-gracza,
a.karta-druzyny {
transition: color var(--wbl-interaction-ms) ease;
}
.wbl-pokoj-cta {
transition:
color var(--wbl-interaction-ms) ease,
background-color var(--wbl-interaction-ms) ease;
}
}
/* ==========================================================
RUCH 1/4 — wciśnięcie ma być widoczne
========================================================== */
.kupon-kurs,
.kupon-chip,
#kupon-submit {
transition:
transform var(--wbl-press-ms) var(--ease-out),
background-color var(--wbl-interaction-ms) ease,
border-color var(--wbl-interaction-ms) ease,
color var(--wbl-interaction-ms) ease;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.kupon-kurs:active:not(:disabled):not([aria-disabled="true"]),
.kupon-chip:active:not(:disabled):not([aria-disabled="true"]),
#kupon-submit:active:not(:disabled):not([aria-disabled="true"]) {
transform: scale(0.97);
}
.sticky-menu {
animation: none;
}
.wbl-steam-pasek {
margin: 0;
padding: var(--wbl-space-3) var(--wbl-space-5);
background: #2a1218;
border-bottom: 1px solid var(--przegrana, #b8455a);
color: #ece9f0;
font-family: var(--wbl-font-ui);
font-size: 0.9rem;
text-align: center;
}
.wbl-steam-pasek a {
color: var(--wbl-gold, #e4a101);
font-weight: 600;
text-decoration: underline;
}
.wbl-konto-steam-hint {
margin: 0 0 var(--wbl-space-4);
font-size: 0.8rem;
color: var(--wbl-text-muted, #8b8296);
}