/* ========================================================= TOKENY STYLI — jedno miejsce, z którego czerpią kolory/odstępy powtarzające się w wielu miejscach pliku. Poza wygodą (zmiana w jednym miejscu zamiast szukania po całym CSS) to też przygotowanie pod przyszły przełącznik jasny/ciemny motyw: cały motyw ciemny (obecny, jedyny na razie) jest zdefiniowany tu, w :root. Jasny motyw, kiedy powstanie, nadpisze te same nazwy zmiennych w jednym dodatkowym bloku (np. `html[data-theme="light"] { --bg-1: #fff; ... }`) zamiast wymagać przepisywania reguł w całym pliku. ========================================================= */ :root { /* AlkoCzwartek — akcent z logo (bursztyn piwa #e4ad3c). --accent to przyciemniony bursztyn: używany jako kolor TEKSTU linków i tła pod BIAŁYM napisem (pigułki menu, plakietki), więc musi mieć kontrast z bielą ok. 4.3:1 — czysty #e4ad3c ma tylko 2:1 i byłby nieczytelny. Jasny bursztyn z logo żyje w --accent-light i --brand-amber (przyciski z ciemnym tekstem, poświaty, wyróżnienia). */ --accent: #a86f10; --accent-light: #e4ad3c; --accent-dark: #7a4d08; --brand-amber: #e4ad3c; --brand-amber-strong: #d69b22; --brand-ink: #20201e; --brand-red: #c10016; /* Tło strony (radialny gradient pod całą stroną) i najciemniejszy odcień, w który wtapia się dół baneru działu — musi być NIEMAL identyczny z kolorem tła w tym miejscu, inaczej widać szew. */ --bg-1: #161616; --bg-2: #0a0a0a; --bg-3: #050505; --bg-deep: #060504; /* Baner-nagłówek działu (Pulpit/Trasy/Ogłoszenia/Wydarzenia/Galeria/Czat). --banner-gradient to CAŁA nakładka na zdjęciu jako jedna zmienna (nie tylko kolor końcowy) — ważne, bo w ciemnym motywie ma sens dociemniać AŻ do koloru tła strony (--bg-deep) i dać treści na nią "nachodzić" (--banner-overlap), a w jasnym motywie próba zrobienia tego samego (ciemna od razu na zdjęciu -> jasne tło strony) dawała brzydki, mętny "szew" — dwa bardzo różne kolory nie da się ładnie przenikać na krótkim dystansie. W jasnym motywie baner więc kończy się zwykłym, czystym cięciem (umiarkowany ciemny winieta na zdjęciu, bez próby dopasowania do koloru tła) i BEZ nachodzenia — patrz override niżej. */ --banner-gradient: linear-gradient(180deg, rgba(6,5,4,0.34) 0%, rgba(6,5,4,0.4) 30%, rgba(6,5,4,0.6) 55%, rgba(6,5,4,0.86) 76%, var(--bg-deep) 92%, var(--bg-deep) 100%); /* Osobna, dużo lżejsza nakładka na baner rozgrywki Statki (.battleship-game-banner) — --banner-gradient wyżej był dobrany pod zdjęcia bez wyrazistego pierwszego planu (dociemnia mocno, żeby nachodzący tekst zawsze był czytelny), a tu obcinał sporą część ładnej grafiki tła. Też kończy się w --bg-deep dla płynnego przejścia w tło strony, ale wcześniejsze przystanki są dużo jaśniejsze. */ --battleship-banner-gradient: linear-gradient(180deg, rgba(6,5,4,0.18) 0%, rgba(6,5,4,0.22) 35%, rgba(6,5,4,0.4) 62%, rgba(6,5,4,0.7) 84%, var(--bg-deep) 96%, var(--bg-deep) 100%); --banner-min-height: 260px; --banner-min-height-mobile: 190px; /* Wyrównane z jasnym motywem (patrz html[data-theme="light"] niżej) — brak nachodzenia treści na baner, tylko odstęp po nim. Wcześniej ciemny motyw miał overlap:46px/30px (treść wjeżdżała na baner) a jasny 0px + gap 20px — ta różnica dawała widoczne "skakanie" treści (i pośrednio paska do pisania w czacie) w dół/górę przy przełączaniu motywu. Ujednolicone na żądanie usera (test na telefonie ma zdecydować, czy to jest właściwy kierunek, czy odwrotny — nachodzenie w obu motywach). */ --banner-overlap: 0px; --banner-overlap-mobile: 0px; --banner-gap-after: 20px; /* --- "Chrome" strony — topbar, stopka, powitanie na pulpicie i inne elementy leżące BEZPOŚREDNIO na tle strony (nie w .card/.chat-layout/ modalu — te są już jasne i niezależne od motywu, więc nie są tu tokenizowane). To jest właściwa "podstawa pod przełącznik": jasny motyw (niżej, html[data-theme="light"]) nadpisuje te same nazwy. */ --text-hero: #fff; --text-hero-muted: #999; --text-chrome: #eee; --text-chrome-muted: #999; --text-chrome-faint: #666; --text-chrome-dim: #888; --chrome-fill: rgba(255,255,255,0.06); --chrome-fill-hover: rgba(255,255,255,0.11); --chrome-fill-strong: rgba(255,255,255,0.13); --chrome-border: rgba(255,255,255,0.08); --chrome-border-strong: rgba(255,255,255,0.12); --panel-bg: #151515; --panel-border: rgba(255,255,255,0.08); --panel-hover: rgba(255,255,255,0.07); --panel-shadow: 0 2px 12px rgba(0,0,0,0.3); --panel-ring: #1a1a1a; --nav-pill-bg: rgba(255,255,255,0.05); --nav-pill-hover: rgba(255,255,255,0.07); /* Karty/czat/auth-card są już jasne niezależnie od motywu (patrz komentarz przy html[data-theme="light"] niżej) — ta jedna zmienna to jedyna rzecz, którą dostają inną: odrobinę mocniejszą ramkę w jasnym motywie, żeby nie "znikały" na też-już-jasnym tle strony. */ --card-border: rgba(0,0,0,0.05); /* Tło ".card" (Trasy społeczności/Ranking/W tym tygodniu/Ogłoszenia i praktycznie każde inne okienko w serwisie) — zgłoszenie użytkownika 28.08.2026: po zmianie koloru motywu na niebieski zmieniły się tylko linki/przyciski, "a co z okienkami i ich odcieniami, to miał być cały serwis". Wydzielone do zmiennej właśnie po to, żeby dało się to nadpisać per-kolor (patrz html[data-theme-color=...] niżej). 15.09.2026, dwuetapowo: 1) --card-bg okazał się podpięty tylko pod samą .card — dziesiątki innych "okienek" (pasek boczny/pole czatu, dropdowny, kalendarz flatpickr, tło .chat-fullscreen, końcówki gradientów kilku kart specjalnych) miały ten sam odcień WPISANY NA SZTYWNO jako #f6f3ef, nie przez tę zmienną — nigdy nie doprowadzone do końca przy wprowadzaniu --card-bg 28.08.2026 (zgłoszenie: "okna się nie zmieniają kolorystycznie"). Wszystkie te miejsca podpięte pod var(--card-bg). 2) Dopiero PO tym domknięciu (żeby nie zrobić widocznego szwu) domyślny motyw dostaje własny, delikatnie czerwonawy odcień zamiast neutralnego kremu — ten sam wzorzec co reszta kolorów niżej (por. 'red'/"Bordowy" #f7eeec). 'orange' (dawny domyślny, patrz html[data-theme-color="orange"] niżej) NADPISUJE to z powrotem na dokładny stary #f6f3ef — nie jest tym dotknięty. POPRAWKA 17.09.2026, druga iteracja (produkcja, zrzut ekranu): #fae7e3 nadal był za mocno nasycony i przy dużych, jednolitych powierzchniach (Ranking/"W tym tygodniu"/"Z czatu") czytał się jako wyraźny róż, nie ciepły odcień kremu — zgłoszenie: "średnio pasuje... taki róż majtkowy" (i słusznie: dobierałem hex na oko, zamiast metodą, jaką robią to gotowe systemy). Sprawdzone jak podchodzi do tego Radix UI Colors/Material Design: tonalną powierzchnię buduje się jako niski % głównego koloru wmieszany w bazowe tło, nie osobno dobierany odcień — stąd teraz color-mix() zamiast sztywnego hex. Podgląd 3 wariantów (3/5/8%) — użytkownik najpierw wybrał środkowy (5%), potem jednak zmienił zdanie na najsubtelniejszy (3%, wariant A). Efekt ten sam co ten podgląd (#f5ece9 przy obecnym czerwonym --accent), ale automatycznie przeliczy się poprawnie, gdyby --accent kiedyś znów się zmienił — bez powtórki tego samego zgadywania. */ --card-bg: color-mix(in srgb, var(--accent) 3%, #f6f3ef); } /* --- Jasny motyw — nadpisuje WYŁĄCZNIE nazwy zmiennych z bloku :root powyżej. Zdjęcie w banerze zostaje wizualnie takie samo w obu motywach (ciemna nakładka na zdjęciu + biały tekst zawsze dobrze się czyta, niezależnie od tła strony wokół) — zmienia się tylko tło strony, topbar, stopka i elementy leżące bezpośrednio na tle. Karty/czat/modale są już jasne i teoretycznie niezależne od motywu, więc nie są tu ruszane — dostają jedynie odrobinę innej ramki (patrz .card niżej), żeby nie "zlewać się" wizualnie z też-już-jasnym tłem strony. */ html[data-theme="light"] { --bg-1: #fbf7ee; --bg-2: #f5eedd; --bg-3: #eee2c8; --bg-deep: #eee2c8; --text-hero: #17140f; --text-hero-muted: #6b6560; --text-chrome: #17140f; --text-chrome-muted: #6b6560; --text-chrome-faint: #8a847d; --text-chrome-dim: #8a847d; --chrome-fill: rgba(23,20,15,0.05); --chrome-fill-hover: rgba(23,20,15,0.09); --chrome-fill-strong: rgba(23,20,15,0.12); --chrome-border: rgba(23,20,15,0.1); --chrome-border-strong: rgba(23,20,15,0.16); --panel-bg: #ffffff; --panel-border: rgba(23,20,15,0.08); --panel-hover: rgba(23,20,15,0.05); --panel-shadow: 0 2px 12px rgba(23,20,15,0.14); --panel-ring: #f3f0e9; --nav-pill-bg: rgba(23,20,15,0.05); --nav-pill-hover: rgba(23,20,15,0.07); --card-border: rgba(23,20,15,0.13); /* Baner w jasnym motywie: zwykła, umiarkowana ciemna winieta na zdjęciu, która kończy się SAMA W SOBIE (nie próbuje dojechać do jasnego tła strony — stąd brak var(--bg-deep) w tym gradiencie, w przeciwieństwie do wersji ciemnej). Bez nachodzenia treści (overlap=0, gap zamiast tego daje odrobinę oddechu pod spodem) — czyste, płaskie przejście. */ --banner-gradient: linear-gradient(180deg, rgba(6,5,4,0.22) 0%, rgba(6,5,4,0.3) 40%, rgba(6,5,4,0.48) 70%, rgba(6,5,4,0.68) 100%); /* Lżejszy odpowiednik dla .battleship-game-banner, patrz komentarz przy wersji ciemnej wyżej. */ --battleship-banner-gradient: linear-gradient(180deg, rgba(6,5,4,0.12) 0%, rgba(6,5,4,0.18) 40%, rgba(6,5,4,0.32) 70%, rgba(6,5,4,0.51) 100%); --banner-overlap: 0px; --banner-overlap-mobile: 0px; --banner-gap-after: 20px; } /* --- Kolor motywu (opcjonalny, NIEZALEŻNY od atrybutu jasny/ciemny, ale każdy kolor ma WŁASNĄ ciemną i jasną odmianę — patrz drugi blok niżej) — zgłoszenie użytkownika 28.08.2026: "nie każdy lubi czarny i taki beżowy... żeby user mogli w profilu sobie wybrać dla całego serwisu", potem doprecyzowane: "pomarańczowy jest domyślny i zostaje z czarnym tłem, a pozostałe [kolory] jak ten kompletny motyw beżowy przy zmianie u góry na jasny" — czyli KAŻDY kolor ma być pełnym motywem (tło strony, panele, karty), nie tylko przefarbowanym akcentem, w obu wariantach jasny/ciemny (wybrane przez użytkownika w pytaniu doprecyzowującym: "Kolor = jasny I ciemny wariant"). Ten pierwszy blok = CIEMNA odmiana każdego koloru (domyślna, gdy nie ma html[data-theme="light"]) — nadpisuje --accent/--accent-light/ --accent-dark (sterują przyciskami/linkami/plakietkami/focus ringiem/ kalendarzem w całym serwisie, dzięki refaktorowi tego samego dnia, w którym każdy dotąd twardo wpisany #d97b2e/#b8631f/rgba(217,123,46,...) zamieniono na var(--accent...)/color-mix(...)), --card-bg (kremowe tło .card — WSPÓLNE dla jasnej i ciemnej odmiany tego samego koloru, karty zawsze zostają jasne niezależnie od motywu, dokładnie jak dotychczas przy przełączniku jasny/ciemny — stąd ta sama wartość --card-bg wystarcza tutaj, nie trzeba jej powtarzać w bloku jasnym niżej) oraz --bg-1/-2/-3/ -deep i --panel-bg/--panel-ring (żeby SAMO tło strony i paneli też się przefarbowało, nie tylko akcent — to dokładnie ta poprawka, o którą poprosił użytkownik). --chrome-fill/--chrome-border/--nav-pill-* celowo NIE są tu nadpisywane — to półprzezroczyste nakładki bieli (rgba(255,255,255,x)), które automatycznie dobrze wyglądają na dowolnym przefarbowanym tle, bez potrzeby osobnego nadpisania dla każdego koloru. Atrybut ustawiany server-side w render_header() (includes/layout.php) na podstawie users.theme_color — w przeciwieństwie do html[data-theme="light"] (ustawianego inline-skryptem z localStorage, bo to wybór lokalny dla przeglądarki), kolor motywu jest zapisany na koncie, więc może być ustawiony od razu, bez błysku złego koloru i bez osobnego JS-a. Brak atrybutu (wartość '' w users.theme_color) = domyślny pomarańczowy z :root wyżej, zawsze z czarnym tłem w trybie ciemnym — nic tu nie trzeba nadpisywać. AKTUALIZACJA 15.09.2026: domyślny (bezatrybutowy) motyw to teraz czerwony, nie pomarańczowy (patrz "Historia zmian domyślnego akcentu" w :root wyżej) — dawny pomarańczowy domyślny motyw został przeniesiony 1:1 do nowego, wybieralnego html[data-theme-color="orange"] niżej, więc nikt go nie stracił, tylko przestał być wymuszony. Klucze muszą się zgadzać z theme_color_options() w includes/helpers.php (tam też podgląd swatchy w profile.php). */ /* 'orange' DODANY 15.09.2026, tego samego dnia co zmiana domyślnego akcentu z pomarańczowego na czerwony (patrz "Historia zmian domyślnego akcentu" w :root wyżej) — zgłoszenie użytkownika: "jeśli ktoś jednak będzie chciał mieć ten stary kolor to dodajmy go do palety... czerwony jest nowy domyślny a pomarańcz zostaje do wyboru". Wartości 1:1 identyczne z tym, co przez cały czas było DOMYŚLNYM (bezatrybutowym) motywem przed tą zmianą: ten sam pomarańczowy akcent, to samo neutralne czarne tło w ciemnym wariancie i ten sam kremowy --card-bg — celowo BEZ własnego przefarbowanego tła jak blue/red/pink/gray niżej, bo pomarańczowy jako ówczesny domyślny zawsze zostawał z czarnym tłem (patrz komentarz o "Kolor motywu" wyżej: "pomarańczowy jest domyślny i zostaje z czarnym tłem"). Wybranie tego presetu odtwarza więc dokładnie to, jak serwis wyglądał przed dzisiejszą zmianą. */ html[data-theme-color="orange"] { --accent: #d97b2e; --accent-light: #f0994a; --accent-dark: #b8631f; --card-bg: #f6f3ef; --bg-1: #161616; --bg-2: #0a0a0a; --bg-3: #050505; --bg-deep: #060504; --panel-bg: #151515; --panel-ring: #1a1a1a; } html[data-theme-color="blue"] { --accent: #2f74c4; --accent-light: #5b9bdb; --accent-dark: #123457; --card-bg: #eef2f7; --bg-1: #121820; --bg-2: #0a0d12; --bg-3: #05070a; --bg-deep: #05070a; --panel-bg: #141a22; --panel-ring: #182028; } html[data-theme-color="red"] { --accent: #b8342c; --accent-light: #e2574f; --accent-dark: #6e120e; --card-bg: #f7eeec; --bg-1: #1a1210; --bg-2: #0d0908; --bg-3: #060504; --bg-deep: #060504; --panel-bg: #1c1412; --panel-ring: #201613; } /* 'purple' zastąpione 'pink' 28.08.2026 (zgłoszenie użytkownika ze screenshotem kafelka "Nadchodzących wydarzeń": "zamiast fioletowego zrobiłbym projekt pasujący do tych odcieni... jest ładny") — kolory 1:1 przejęte z .stat-card-tint-pink niżej w tym pliku (#c14a76/#611f37, obwódka #e07ea3), żeby motyw wyglądał dokładnie jak ten polubiony kafelek. Klucz musi się zgadzać z theme_color_options() w includes/helpers.php. */ html[data-theme-color="pink"] { --accent: #c14a76; --accent-light: #e07ea3; --accent-dark: #611f37; --card-bg: #f8eef2; --bg-1: #1a1218; --bg-2: #0d090b; --bg-3: #060505; --bg-deep: #060505; --panel-bg: #1c141a; --panel-ring: #201620; } html[data-theme-color="gray"] { --accent: #5a6472; --accent-light: #8a94a3; --accent-dark: #2e343d; --card-bg: #eef0f1; --bg-1: #17181a; --bg-2: #0b0c0d; --bg-3: #060606; --bg-deep: #060606; --panel-bg: #191a1c; --panel-ring: #1c1d1f; } /* Drugi blok = JASNA odmiana każdego koloru — selektor złożony z DWÓCH atrybutów (html[data-theme="light"][data-theme-color="blue"]) ma wyższą specyficzność niż sam html[data-theme-color="blue"] wyżej, więc te --bg-1/-2/-3/-deep/--panel-ring/--panel-bg poprawnie nadpisują ciemne wartości z bloku wyżej, gdy ktoś ma WŁĄCZONY jasny motyw (księżyc/słońce w topbarze) I wybrany kolor. NAPRAWA 28.08.2026 (zgłoszenie użytkownika ze screenshotem: czarny, nieczytelny prostokąt menu użytkownika w rogu na jasnym niebieskim motywie): --panel-bg (tło m.in. rozwijanego menu w topbarze) MUSI być tu jawnie powtórzone jako białe, nie wystarczy samo poleganie na tym, że zwykły html[data-theme="light"] wyżej już je ustawia na białe — ten blok i html[data-theme-color="blue"] (ciemna odmiana, ustawia --panel-bg na ciemny granat) mają RÓWNĄ specyficzność (jeden atrybut + html), więc o tym, który wygrywa, decydowała wyłącznie kolejność w pliku — a html[data-theme-color="blue"] jest zdefiniowany NIŻEJ (po html[data-theme="light"]), więc to jego ciemna wartość wygrywała nawet przy włączonym jasnym motywie. --bg-1/-2/-3/-deep/--panel-ring nie miały tego problemu, bo są jawnie powtórzone w tym bloku — --panel-bg był jedyną zmienną, która "wypadła" z tej reguły. --accent/--accent-light/ --accent-dark/--card-bg NIE są tu powtórzone (i to jest OK) — nie mają tego konfliktu, bo zwykły html[data-theme="light"] w ogóle ich nie dotyka, więc nie ma z czym "remisować" na równej specyficzności. */ /* Jasny wariant 'orange' — te same wartości co zwykły html[data-theme="light"] wyżej (bo to dokładnie to samo, w co zawsze zmieniał się dawny domyślny pomarańczowy motyw po przełączeniu na jasny), powtórzone jawnie z tego samego powodu specyficzności co reszta kolorów w tym bloku (patrz komentarz nad html[data-theme="light"][data-theme-color="blue"] niżej). */ html[data-theme="light"][data-theme-color="orange"] { --bg-1: #f3f0e9; --bg-2: #ebe6da; --bg-3: #e3ddce; --bg-deep: #e3ddce; --panel-bg: #ffffff; --panel-ring: #f3f0e9; } html[data-theme="light"][data-theme-color="blue"] { --bg-1: #eef2f8; --bg-2: #e2e9f2; --bg-3: #d7e0ec; --bg-deep: #d7e0ec; --panel-bg: #ffffff; --panel-ring: #eef2f8; } html[data-theme="light"][data-theme-color="red"] { --bg-1: #f8eeed; --bg-2: #f1e0de; --bg-3: #ead3d0; --bg-deep: #ead3d0; --panel-bg: #ffffff; --panel-ring: #f8eeed; } html[data-theme="light"][data-theme-color="pink"] { --bg-1: #f8eef3; --bg-2: #f1e0e8; --bg-3: #ead0dc; --bg-deep: #ead0dc; --panel-bg: #ffffff; --panel-ring: #f8eef3; } html[data-theme="light"][data-theme-color="gray"] { --bg-1: #eff0f1; --bg-2: #e3e5e7; --bg-3: #d7dadc; --bg-deep: #d7dadc; --panel-bg: #ffffff; --panel-ring: #eff0f1; } * { box-sizing: border-box; } /* Siatka bezpieczeństwa dla edytora TinyMCE (patrz initEditorDraftSafetyNet() w assets/editor.js) — zgłoszenie użytkownika 26.09.2026: kontener treści edytora potrafił zapaść się do wysokości 0 (zostawał tylko toolbar), najpewniej kaprys biblioteki po niefortunnym zamknięciu okienka (charmap/ link). min-height na samym kontenerze TinyMCE to druga, niezależna linia obrony — nawet gdyby to samo się powtórzyło, treść fizycznie nie zniknie z widoku (chowa się co najwyżej pod inną zawartością, nie do zera). Nie dotyka wewnętrznych elementów TinyMCE poza wysokością kontenera, więc nie koliduje z jego własnym layoutem/skórką. */ .tox-tinymce { min-height: 420px !important; } body { margin: 0; min-height: 100vh; overflow-x: hidden; /* Wyłącza powiększanie strony podwójnym stuknięciem na telefonie (np. przy szybkim, podwójnym kliknięciu w pozycję menu) — celowo "touch-action: manipulation", NIE "user-scalable=no" w meta viewport ani "touch-action: none": manipulation kasuje TYLKO double-tap-zoom, przewijanie i przybliżanie DWOMA palcami (pinch-zoom) — ważne dla osób słabowidzących — dalej działa normalnie. Zgłoszenie użytkownika 25.09.2026 ("czy idzie zablokować serwis, aby się nie powiększał przy dwukrotnym kliknięciu"). */ touch-action: manipulation; background: radial-gradient(ellipse at top, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%); background-attachment: fixed; color: var(--text-chrome); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } /* --- Baner-nagłówek działu: pełna szerokość okna, wtapia się dołem w tło strony (--bg-deep), a treść pod nim (.card / .chat-layout / .welcome-hero) nachodzi na ten wtapiający się fragment tak, żeby nie było widać żadnej przerwy ani szwu. Oba elementy dostają position:relative + z-index, bo inaczej pozycjonowany .section-banner (position:relative, potrzebne dla sztuczki z pełną szerokością) potrafi malować się NAD zwykłymi, niepozycjonowanymi elementami mimo że jest wcześniej w DOM — to właśnie ten błąd z nakładaniem się grafiki na treść. --- */ .section-banner { position: relative; z-index: 0; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; margin-top: 0; margin-bottom: calc(-1 * var(--banner-overlap)); padding-bottom: var(--banner-overlap); min-height: var(--banner-min-height); background-size: cover; background-position: center; background-color: #1a1712; display: flex; align-items: flex-end; } .section-banner-inner { max-width: 1180px; margin: 0 auto; width: 100%; padding: 24px 16px 58px; } .section-banner-inner h1 { color: #fff; font-size: 22px; margin: 0 0 4px; text-shadow: 0 1px 6px rgba(0,0,0,0.5); } .section-banner-inner p { color: #f0ece4; font-size: 13px; margin: 0; max-width: 640px; text-shadow: 0 1px 6px rgba(0,0,0,0.5); } /* Cokolwiek jest zaraz po banerze (.card, .chat-layout, .welcome-hero...) musi wygrywać nad nim w kolejności malowania — patrz komentarz wyżej. */ .section-banner + * { position: relative; z-index: 1; margin-top: var(--banner-gap-after); } /* Powitanie na pulpicie (.welcome-hero) nie ma własnego tła (w przeciwieństwie do .card, które zawsze jest jasne niezależnie od motywu) — więc "nachodzenie" na baner (--banner-overlap), które w reszcie serwisu chowa się bez śladu pod tłem kart, tutaj w motywie ciemnym wystawało na widok wprost na zdjęcie baneru. Efekt: zawsze czyste odsunięcie od baneru, tak jak w jasnym motywie, niezależnie od tego, czy w danym motywie baner ma nachodzenie włączone. (10.08.2026: quizzes.php/quiz_admin.php miały tu tymczasowo tę samą poprawkę pod .quiz-hero/.quiz-back-link, bo te dwa nie były kartami — ostatecznie naprawione u źródła: oba są teraz zawsze prawdziwą .card zaraz po banerze, więc dodatkowa reguła przestała być potrzebna.) */ .section-banner + .welcome-hero { margin-top: calc(var(--banner-overlap) + 20px); } @media (max-width: 720px) { .section-banner { min-height: var(--banner-min-height-mobile); margin-top: -14px; margin-bottom: calc(-1 * var(--banner-overlap-mobile)); padding-bottom: var(--banner-overlap-mobile); } .section-banner-inner { padding: 16px 12px 38px; } .section-banner-inner h1 { font-size: 18px; } .section-banner + .welcome-hero { margin-top: calc(var(--banner-overlap-mobile) + 16px); } } a { color: inherit; } .icon { display: inline-block; vertical-align: -3px; flex-shrink: 0; } .wrap { max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px; } /* --- Górny pasek nawigacji (dwuwierszowy: logo/szukaj/użytkownik + osobny rząd menu) --- */ .topbar { display: flex; flex-direction: column; gap: 12px; padding: 14px 4px 18px; margin-bottom: 6px; border-bottom: 1px solid var(--chrome-border); } .topbar-row1 { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .topbar .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: .01em; text-decoration: none; flex-shrink: 0; } .topbar .brand img { height: 54px; width: auto; display: block; } /* Logo AlkoCzwartek (assets/logo-alko.svg) jest kolorowe i ma własne, okrągłe tło — dobrze wygląda i na jasnym, i na ciemnym motywie, więc bez filtra (w SOG biały plik był tu przyciemniany do czerni). */ /* Przycisk "hamburger" i wrapper reszty paska — na desktopie oba są niewidoczne/przezroczyste dla layoutu (display:contents na wrapperze sprawia, że jego dzieci — szukajka/dzwonek/użytkownik — zachowują się dokładnie tak, jakby nie było wokół nich żadnego diva), więc desktop wygląda identycznie jak wcześniej. Realną rolę oba elementy zaczynają grać dopiero w mobilnej media query niżej. */ .topbar-menu-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; border: none; background: var(--chrome-fill); color: var(--text-chrome); cursor: pointer; flex-shrink: 0; } .topbar-menu-toggle:hover { background: var(--chrome-fill-hover); } .topbar-row1-extras { display: contents; } /* Wrapper Pomoc+dzwonek — na desktopie ma być przezroczysty dla layoutu, tak samo jak .topbar-row1-extras powyżej; własny display:flex dostaje dopiero na telefonie (patrz @media niżej), żeby te dwie ikonki stanęły obok siebie zamiast jedna pod drugą. Zgłoszenie 20.09.2026. */ .topbar-icon-row { display: contents; } /* Etykiety "Menu"/"Konto" nad wysuwanymi listami na telefonie (patrz includes/layout.php) — na desktopie oba dropdowny są same w sobie wystarczająco czytelne (małe, kontekstowe panele), więc etykiety tam są zbędne i pozostają ukryte; dostają wygląd dopiero w mobilnej media query niżej. */ .topbar-section-label { display: none; } .topbar-nav-row { display: flex; align-items: center; gap: 2px; background: var(--nav-pill-bg); border-radius: 7px; padding: 4px; flex-wrap: wrap; } .topbar-nav-row a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 5px; font-size: 12px; font-weight: 500; color: var(--text-chrome-muted); text-decoration: none; transition: background .15s, color .15s; white-space: nowrap; } .topbar-nav-row a:hover { color: var(--text-chrome); background: var(--nav-pill-hover); } .topbar-nav-row a.active { background: var(--accent); color: #fff; font-weight: 600; } /* Submenu "Rozrywka" (Quizy + Statki) w głównym pasku — przycisk-wyzwalacz wygląda jak zwykła pozycja .topbar-nav-row a (ten sam padding/rozmiar), ale to