/* Redesign GamesBoard 2026 - makiety 1a-1g. Paleta, układy i krój z makiety. */ /* Kroj serwisu (Titillium Web) deklarowany jest wylacznie w assets/css/fonts.css. Tu uzywamy go przez var(--gb-font), monospace przez var(--gb-mono). Kanon wag: 400 tekst, 600 wyroznienie, 700 naglowki i przyciski. */ :root { /* ================= WYSOKOSC PASKA NAWIGACJI (GB-114) ================= Pasek jest PRZYKLEJONY, wiec każde miejsce, które zakłada, że coś stoi u góry ekranu, musi znać jego wysokość. Wcześniej znało ją na cztery różne sposoby: 76, 96, 84 i 90 px, i żaden nie odpowiadał prawdzie (60 px treści + 1 px kreski). Skutkiem były kotwice chowające nagłówek pod paskiem i przyklejone panele nachodzące na siebie. JEDNO ŹRÓDŁO PRAWDY. Zmiana wysokości paska to zmiana jednej liczby tutaj. --gb-nav-h realna wysokość paska --gb-stick gdzie zaczyna się przyklejona zawartość (pasek + oddech) Kotwice załatwia `scroll-padding-top` na , więc nie trzeba dopisywać `scroll-margin-top` do każdego nagłówka z osobna. */ --gb-nav-h: 61px; --gb-stick: calc(var(--gb-nav-h) + 16px); --gb-bg: #0e1015; --gb-panel: #14161c; --gb-card: #1d2029; --gb-card2: #191c23; --gb-line: rgba(255, 255, 255, .07); --gb-line2: rgba(255, 255, 255, .14); --gb-accent: #ffc233; /* Jasniejszy stopien akcentu, wylacznie na hover akcentu (przycisk glowny, link w tresci, plakietka filtra, pastylka platformy). To NIE jest druga barwa znaczaca w rozumieniu kanonu, tylko podswietlenie tej samej - stad jeden token zamiast #ffd76a wpisanego w pieciu arkuszach. */ --gb-accent-hi: #ffd76a; --gb-green: #3ddc84; --gb-red: #ff4d5a; --gb-blue: #4da3ff; --gb-violet: #a78bfa; /* ================= KANON BARW (GB-59, 2026-08-07) ================= Powod: na jednym ekranie potrafilo siedziec szesc rodzin barw naraz (czerwony, zielony, niebieski, zolty, fiolet, cyjan). Kazda z osobna miala uzasadnienie, razem robily szum. Zasada trzech poziomow: 1. AKCENT MARKI - var(--gb-accent). JEDEN kolor akcentu na widok. Interakcja i nawigacja: przyciski glowne, hover tytulu, kropka naglowka sekcji, aktywny filtr, wyrozniony napis w feedzie. 2. BARWY ZNACZACE - tylko stan, ktorego nie da sie odczytac z tekstu w pol sekundy. Sa DWIE plus skala ocen: --gb-red TRWA TERAZ / na zywo. Jedyny stan rysowany plakietka WYPELNIONA - dzieki temu na liscie turniejow jest dokladnie jeden glosny element i widac go od razu. --gb-green otwarte / dostepne / zaleta (zapisy otwarte, wolny stol, plus w recenzji). Plakietka OBRYSOWANA, nie wypelniona. kolka ocen zostaja na wlasnej skali (zielony/zolty/pomaranczowy/ czerwony wg wartosci) - to liczba, nie stan interfejsu. Stany, ktore nie wymagaja reakcji ("nadchodzi", "wkrotce", "bye", "pending"), ida w neutral - brak akcji to brak koloru. 3. NEUTRALNE - cala reszta: --gb-dec, --gb-dec-soft, --gb-line, --gb-line2, --gb-muted, --gb-text2. Tu ida wszystkie dekoracje: paski zapelnienia, kreski pod okladka, obwodki kafli, ikony kafli gier, awatary, plakietki kategorii, znaczniki serwerow. WYCOFANE z roli dekoracyjnej: --gb-blue i --gb-violet (zostaja w palecie dla ewentualnych wykresow, ale NIE wracaja na plakietki, kropki sekcji ani obwodki), cyjan #22d3ee, drugi czerwony #ff7a84, pomaranczowy #ff8a3d. Zanim dolozysz kolor: jesli ta sama informacja jest juz w tekscie obok, kolor jest dekoracja i ma isc w --gb-dec. */ /* .34 nie jest wartoscia z sufitu: pasek zapelnienia rysowany tym kolorem na torze var(--gb-panel) daje 3,11:1, czyli lapie prog 3:1 dla grafiki niosacej informacje. Przy .26 bylo 2,35:1 i pasek gubil sie w torze. */ --gb-dec: rgba(255, 255, 255, .34); --gb-dec-soft: rgba(255, 255, 255, .07); /* ============ ZASADA OBRAMOWAN KONTENEROW (GB-60, 2026-08-07) ============ ROZSTRZYGNIETO: ramka zostaje, i to na KAZDYM kontenerze z plaskim tlem. Sprawdzany byl wariant przeciwny (zero ramek, karty odcinane samym kontrastem tla). Pomiar go przekreslil: karta #1d2029 na tle strony #0e1015 ....... 1,17:1 karta #1d2029 na panelu #14161c ........... 1,11:1 karta ciemniejsza #191c23 na tle strony ... 1,12:1 Prog dla granic elementow interfejsu to 3:1, wiec sam kontrast tla jest ponad dwa razy za slaby - na taniej matrycy TN albo przy podniesionej jasnosci karty po prostu znikaja. Dla porownania ramka .07 zlozona na karcie to rgb(45,48,56): 1,44:1 wzgledem tla strony i 1,23:1 wzgledem samej karty, czyli krawedz powstaje z DWOCH skokow jasnosci zamiast jednego i dlatego jest widoczna. Za ramka stoi tez zrodlo: makieta z Claude Design uzywa 'border:1px solid rgba(255,255,255,.07)' 72 razy - to najczestsza deklaracja w calym pliku makiety. KANON: a) Kazdy kontener z plaskim tlem (--gb-card, --gb-card2, --gb-panel) ma 'border: 1px solid var(--gb-line)'. Dotyczy kart, kafli, paneli bocznych, kafli serwerow, kart turniejow, paneli mega-menu, boksow reklamowych, stopki ORAZ hero - hero bylo jedyna sekcja bez ramki i wlasnie to robilo dwa jezyki wizualne na stronie glownej. b) Wyjatek dotyczy WYLACZNIE gniazda na obraz WEWNATRZ kontenera (.gb-card-media, .ggl-game-card-cover, .gb-mfeat-media, miniatura). Tam kadr wypelnia cala powierzchnie, krawedz daje samo zdjecie, a kreska 1 px czytalaby sie jak przeswit. Gniazdo siedzi w pudelku, ktore ramke ma - wiec kontener i tak jest obrysowany. c) Wiersze list wewnatrz kontenera (news, gry, ranking, feed) NIE dostaja wlasnej ramki - rozdziela je 'border-bottom: 1px solid var(--gb-line)'. Ramka nalezy do pudelka, nie do jego wierszy. d) Jedna wartosc dla wszystkich: var(--gb-line). var(--gb-line2) jest zarezerwowana dla hoveru i dla kontrolek (przycisk ghost, input, select, plakietka filtra). Zadnych wlasnych rgba .05/.08/.09/.12 ani nieprzezroczystych #2a2b31 - taka ramka nie skaluje sie z tlem pod spodem i rozjezdza sie przy kazdej zmianie palety. e) Wyroznienie kontenera robi TLO, nie grubsza kreska. Panel wazniejszy od sasiada dostaje jasniejsze tlo, nie var(--gb-line2). Zlamanie tej zasady widac natychmiast: dwa jezyki wizualne na jednym ekranie, dokladnie to zglaszal uzytkownik. */ /* Cztery poziomy tekstu, każdy zmierzony na najjaśniejszym tle karty (#1d2029): text 15.8:1, text2 10.9:1, muted 6.0:1 - wszystkie ponad próg AA 4.5:1. dim 3.6:1 jest WYŁĄCZNIE dla elementów dekoracyjnych (separatory, ramki), nigdy dla treści - wcześniej #555c6e i #3f4552 l� dowały w napisach i schodziły do 1,8-2,5:1, czyli poniżej jakiegokolwiek progu. */ --gb-text: #ffffff; --gb-text2: #c6cbd6; --gb-muted: #97a0b2; --gb-dim: #6b7386; /* Makieta rysowana była na karcie 1320 px; na realnych ekranach zostaje sporo zapasu po bokach, więc kontener idzie na 1420 px (decyzja Mattiego 2026-08-06). */ --gb-max: 1420px; /* ================= JEDEN SYSTEM HOVEROW (kanon 2026-08-06) ================= Zasada: hover PODSWIETLA element, nie rusza go z miejsca. 1. Tlo: powierzchnia idzie o jeden ton w gore. - tlo przezroczyste -> background: var(--gb-hover) - tlo var(--gb-panel) -> background: var(--gb-card) - tlo var(--gb-card) -> background: var(--gb-hover-card) Kazdy z tych krokow to dokladnie ~4% bieli nalozone na tlo bazowe. 2. Ramka: border-color -> var(--gb-line2) (w sekcjach kolorowych var(--gb-sec)). 3. Tytul: color -> var(--gb-accent) albo var(--gb-sec, var(--gb-accent)). 4. Czasy: .18s dla koloru/tla/ramki, .5s cubic-bezier(.22,.61,.36,1) dla zdjecia. ZAKAZANE na hoverze: transform: translateY/translateX (podnoszenie i przesuwanie kafli), box-shadow z poswiata, filter: drop-shadow, skalowanie calego kafla. DOZWOLONE wyjatki (prosba uzytkownika): - powiekszenie SAMEGO zdjecia wewnatrz kafla: transform: scale(1.06), transition .5s cubic-bezier(.22,.61,.36,1); - wysuwana strzalka w .gb-btn-arrow / .gb-link-arrow (::after, translateX). Wszystko, co tu dodane, musi byc zerowane w @media (prefers-reduced-motion: reduce). */ --gb-hover: rgba(255, 255, 255, .04); --gb-hover-card: #22252f; } /* Cały serwis na kroju z makiety. Podnosimy specyficzności� nad stare reguły, które wpisywały 'gigabold' (Saira) i 'main' (Lexend) w nagłówki i treść. */ body.gb-redesign, body.gb-redesign h1, body.gb-redesign h2, body.gb-redesign h3, body.gb-redesign h4, body.gb-redesign h5, body.gb-redesign h6, body.gb-redesign p, body.gb-redesign li, body.gb-redesign a, body.gb-redesign span, body.gb-redesign button, body.gb-redesign input, body.gb-redesign select, body.gb-redesign textarea, body.gb-redesign .gb-sec-title, body.gb-redesign .gb-page-title, body.gb-redesign .gb-hero-title, body.gb-redesign .gb-side-title, body.gb-redesign .gb-rank-title, body.gb-redesign .gb-quick-title, body.gb-redesign .gb-verdict-title, body.gb-redesign .gb-menu-item > a { font-family: var(--gb-font); } /* Wyj� tek: liczniki, zegary i notacja zostaj� monospace. */ body.gb-redesign .wb-clock-time, body.gb-redesign code, body.gb-redesign pre, body.gb-redesign kbd { font-family: var(--gb-mono); } body.gb-redesign { background: var(--gb-bg); color: var(--gb-text); } /* Stary nagłówek dokładał własn� kreskę pod
; nowy pasek ma swoj� . */ body.gb-redesign .gb-header { border-bottom: none; } /* Tło zostawało w starej palecie (#1e222b) i prześwitywało na krawędziach oraz przy przewijaniu poza treść. Redesign jest globalny, więc i to jest globalne. */ html { background: var(--gb-bg); /* Kotwice zatrzymują się PONIŻEJ przyklejonego paska (GB-114). Bez tego kliknięcie w spis treści przewijało nagłówek dokładnie pod pasek i tekst zaczynał się od drugiego akapitu. Jedna reguła na dokument załatwia wszystkie kotwice naraz - `scroll-margin-top` przy każdym nagłówku z osobna rozjeżdżał się przy pierwszej zmianie wysokości paska. */ scroll-padding-top: var(--gb-stick); } /* ================= SPROWADZENIE BARW WSTRZYKIWANYCH Z SZABLONOW (GB-59) Szablony PHP wpisuja kolory prosto w atrybut style: siatki sekcji podaja --gb-sec (#ff4d5a, #3ddc84, #a78bfa, #22d3ee, #ffc233), kafle gier koloruja ikone, awatary graczy maja wlasny kolor, kafle serwerow podaja --srv. Z tego robilo sie szesc rodzin barw na jednym ekranie. Deklaracja inline przegrywa tylko z !important, wiec tu jest on konieczny - to nie jest lenistwo, tylko jedyny sposob, zeby zrobic to z poziomu CSS bez ruszania szablonow (nad ktorymi rownolegle pracuje kto inny). Selektor [style*="..."] lapie kazdy punkt wstrzykniecia niezaleznie od pliku. Gdy kiedys szablony przestana podawac kolory, ten blok mozna skasowac. */ /* Sekcje: jeden kolor akcentu zamiast szesciu. */ body.gb-redesign [style*="--gb-sec"] { --gb-sec: var(--gb-accent) !important; } /* Kropka przy naglowku sekcji to czysta dekoracja - nazwa sekcji stoi obok. */ body.gb-redesign .gb-sec-dot { background: var(--gb-accent) !important; } /* Ikona kafla gry i awatar gracza: kolor nie kodowal niczego, czego nie ma w podpisie obok, wiec ida na neutralna powierzchnie. */ body.gb-redesign .gb-ptile-ic { background: var(--gb-dec-soft) !important; color: var(--gb-text2); } body.gb-redesign .gb-top-av { background: var(--gb-dec) !important; } /* Zastepnik okladki gry: inicjal w szarosci zamiast losowego koloru z palety. */ body.gb-redesign .gb-sg-letter { --sg: var(--gb-muted) !important; } /* Znacznik gry na kaflu serwera (pasek po lewej i poswiata w rogu). */ body.gb-redesign .gb-scard, body.gb-redesign .gb-mserv { --srv: var(--gb-line2) !important; } /* Ikona gry na liscie "Zaloz stol" (/graj/) - to samo co .gb-ptile-ic, tylko szablon nadaje jej goly class="ic" i wlasny kolor tla. */ body.gb-redesign .gb-lobby-new-btn .ic { background: var(--gb-dec-soft) !important; color: var(--gb-text2); } /* ------------------------------------------------------- artykuł i sidebar Layoutu artykułu nie ruszamy, wyrównujemy wył� cznie paletę: articles.css został na starych kolorach (#e2e2e8, #FFCC32, #181b22), przez co treść wpisu odstawała tonem od reszty redesignu. Mapowanie stary -> makietowy. */ /* Stare main miało 1200 px, więc artykuły byłyby węższe niż nagłówek i stopka. */ body.gb-redesign .gb-main { background: transparent; max-width: var(--gb-max); } body.gb-redesign .article-container { background: var(--gb-panel); } body.gb-redesign .article-thumb { background: var(--gb-panel); } body.gb-redesign .article-content, body.gb-redesign .article-content p, body.gb-redesign .article-content li, body.gb-redesign .article-content strong, body.gb-redesign .article-related-box { color: var(--gb-text2); } body.gb-redesign .article-meta, body.gb-redesign .article-author, body.gb-redesign .article-categories, body.gb-redesign .article-date { color: var(--gb-muted); } body.gb-redesign .article-sidebar, body.gb-redesign .sidebar-section, body.gb-redesign .sidebar-partner { color: var(--gb-text2); } /* Data wpisu siedziala na wlasnym #9aa3b5, czyli o wlos od --gb-muted obok. Po zejsciu na zmienna obie linie sa tym samym stopniem skali, wiec ida razem. */ body.gb-redesign .sidebar-latest-meta, body.gb-redesign .sidebar-latest-date { color: var(--gb-muted); } body.gb-redesign .sidebar-latest-thumb { background: var(--gb-card); } body.gb-redesign .sidebar-latest-cat { background: var(--gb-accent); color: var(--gb-panel); } body.gb-redesign .related-article { background: var(--gb-card); } body.gb-redesign .related-article-date { color: var(--gb-muted); } body.gb-redesign a.article-category { background: var(--gb-card); color: var(--gb-text2); } body.gb-redesign a.article-category:hover { background: var(--gb-card2); color: var(--gb-accent); } /* Stary żółty (#FFCC32) i jego hover (#ffe47a / #ffd857) w treści i sidebarze. */ body.gb-redesign .article-content a, body.gb-redesign .article-sidebar a { color: var(--gb-accent); } body.gb-redesign .article-content a:hover, body.gb-redesign .article-sidebar a:hover, body.gb-redesign .related-article a, body.gb-redesign .related-article-info, body.gb-redesign .article-container a:hover { color: var(--gb-accent-hi); } body.gb-redesign .related-article-info { color: var(--gb-text2); } /* Tła pod obrazkami (zanim się doczytaj� ) i pod avatarem. */ body.gb-redesign .article-content img, body.gb-redesign .related-article-thumb, body.gb-redesign img.avatar { background: var(--gb-panel); } /* ------------------------------------------------- archiwa: kategoria, tag, autor Te szablony maj� własne arkusze (category.css, tag.css, author.css) w starej palecie. */ body.gb-redesign .category-article, body.gb-redesign .tag-article, body.gb-redesign .author-article, body.gb-redesign .search-article { background: var(--gb-panel); } body.gb-redesign .category-article-thumb, body.gb-redesign .tag-article-thumb, body.gb-redesign .author-article-thumb { background: var(--gb-card); } body.gb-redesign .category-article-meta, body.gb-redesign .category-article-author, body.gb-redesign .category-article-date, body.gb-redesign .tag-article-meta, body.gb-redesign .author-article-meta { color: var(--gb-muted); } /* --------------------------------------------------- biblioteka gier (plugin GGL) Plugin trzyma paletę w swoich zmiennych, więc wystarczy je przemapować - stany aktywne (chipy, oceny) same pójd� za nimi. */ body.gb-redesign { /* Most do zmiennych wtyczki. Wartosci sa przepisywane ze zmiennych motywu, nie powtarzane liczbowo - inaczej zmiana palety w :root omijalaby ten blok. */ --ggl-bg-primary: var(--gb-panel); --ggl-bg-secondary: var(--gb-card2); --ggl-bg-card: var(--gb-card); --ggl-text-primary: var(--gb-text); --ggl-text-secondary: var(--gb-text2); --ggl-text-muted: var(--gb-muted); --ggl-accent-yellow: var(--gb-accent); --ggl-accent-red: var(--gb-red); --ggl-accent-green: var(--gb-green); /* Wtyczka biblioteki uzywa tej zmiennej w jednym miejscu (.ggl-badge--soon). "Wkrotce" to brak oceny, nie stan wymagajacy reakcji, wiec zmienna celuje w neutral - inaczej niebieski wracalby tylnymi drzwiami z wtyczki (GB-59). */ --ggl-accent-blue: var(--gb-text2); --ggl-border: rgba(255, 255, 255, .07); } /* Rankingi maj� część kolorów wpisanych na sztywno, poza zmiennymi. */ body.gb-redesign .gbr-single-ranking, body.gb-redesign .gbr-archive { background: transparent; } body.gb-redesign .search-result { background: var(--gb-panel); } body.gb-redesign .search-result-thumb { background: var(--gb-card); } body.gb-redesign .search-result-excerpt { color: var(--gb-text2); } body.gb-redesign .search-title, body.gb-redesign .search-result-date { color: var(--gb-accent); } body.gb-redesign .search-result-date { color: var(--gb-muted); } /* Kafle kategorii w treści wpisu i pozostałe stare żółcienie w artykule. */ body.gb-redesign .article-container a[class*="category"] { background: var(--gb-card); } body.gb-redesign .article-content strong, body.gb-redesign .sidebar-section strong { color: var(--gb-text2); } body.gb-redesign .article-container a { color: var(--gb-accent); } body.gb-redesign .article-author a { background: var(--gb-card); color: var(--gb-text2); } body.gb-redesign .article-author a:hover { color: var(--gb-accent); } /* Chip filtrów w bibliotece gier ma tło wpisane na sztywno, poza zmiennymi. */ body.gb-redesign .ggl-chip { background: var(--gb-card); } body.gb-redesign .ggl-chip.is-active { background: var(--gb-accent); color: var(--gb-panel); } body.gb-redesign .page-numbers { background: var(--gb-card); color: var(--gb-text2); border-color: var(--gb-line); } body.gb-redesign a.page-numbers:hover { background: var(--gb-card2); color: var(--gb-accent); } body.gb-redesign span.page-numbers.current, body.gb-redesign .page-numbers.current { background: var(--gb-accent); color: var(--gb-panel); } /* ---------------------------------------------------------------- stopka (1a) Jeden w� ski pasek: logo, zdanie o serwisie, linki dosunięte do prawej. Reguły starej stopki (.footer-info__*, .footer-tag, .footer-bottom) s� martwe, bo footer.php ich już nie renderuje. */ /* Stara reguła footer{} dokładała 30 px paddingu z góry i z dołu oraz marginesy, przez co w� ski pasek z makiety puchł do ~170 px. */ .gb-footer { background: #101218; border-top: 1px solid var(--gb-line); margin: 40px 0 0; padding: 0; font-size: 13px; line-height: 1.5; /* stare footer{color:#fafafa} i footer a{color:#ddd} nadal celuj� w ten element */ color: var(--gb-muted); } .gb-footer a { color: var(--gb-text2); } /* GB-25: .gb-footer to flex-column (footer{display:flex} z main.css), więc pasek jest tu elementem flex z min-width:auto i nie schodził poniżej swojej szerokości min-content (1067 px). Przy oknie 1024 px rozpychało to całą stronę w poziomie. width:100% + min-width:0 przypina pasek do szerokości stopki, a tagline ma już ellipsis i to on oddaje miejsce. */ .gb-footer-inner { max-width: var(--gb-max); margin: 0 auto; width: 100%; min-width: 0; box-sizing: border-box; display: flex; align-items: center; gap: 20px; padding: 18px 24px; } .gb-footer-logo { display: flex; align-items: center; flex: none; } .gb-footer-logo img { height: 22px; width: auto; display: block; } .gb-footer-tagline { font-size: 13px; color: var(--gb-muted); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gb-footer-links { margin-left: auto; flex: none; display: flex; align-items: center; gap: 14px; } .gb-footer-menu { display: flex; align-items: center; gap: 14px; list-style: none; margin: 0; padding: 0; } /* inline-flex + line-height:1 na obu typach, bo