/* Sheriff Shooting Range — PALETA I KROJE, jedno miejsce dla całej aplikacji. Dotąd każdy ekran (app.css, obsluga/panel.css, instruktor/instruktor.css, wlasciciel/wlasciciel.css, rezerwacja/rezerwacja.css) dokładał własne kolory wpisane wprost w reguły. Przy jednym motywie to była niedogodność, przy trzech byłoby to źródło rozjazdu: zmiana barwy w jednym pliku i zapomniana w czterech. Dlatego paleta jest TUTAJ i tylko tutaj, a motyw wybiera atrybut na . TRZY MOTYWY, żadnego jasnego: klasyczny — czerń i mosiądz, to, co aplikacja miała do tej pory, strzelnica — akcent z barw strzelnicy (tenant.branding), tło chłodne, taktyczny — Range 'n' Roll: biel na czerni, czerwony sygnał; DOMYŚLNY. Motywu jasnego nie ma i nie ma być: ekran ogląda się na osi, w słońcu i w ochronnikach — jasne tło z cienką typografią czyta się tam gorzej. DLACZEGO GOŁY `:root` TO TAKTYCZNY: żeby domyślny motyw działał także wtedy, gdy JavaScript jeszcze nic nie ustawił (albo jest wyłączony). Dzięki temu pierwsze malowanie strony jest już w docelowych barwach, a nie w cudzych. NAZWY TOKENÓW mówią o ROLI, nie o barwie: `--akcent` w taktycznym jest bielą, a nie kolorem. Stare nazwy (`--sand`, `--red`, `--ink`, `--bone`) zostają jako aliasy, bo siedzą w kilkuset regułach w pięciu plikach — przepisywanie ich byłoby zmianą bez wartości dla nikogo poza czytającym CSS. CO SIĘ NIE ZMIENIA Z MOTYWEM: zieleń potwierdzenia i bursztyn ostrzeżenia. Mówią o STANIE rzeczy, nie o marce — gdyby chodziły za motywem, to samo ostrzeżenie znaczyłoby co innego na dwóch strzelnicach. Tak samo barwy serii na wykresach właściciela: to dane, nie ozdoba. */ /* ── wspólne dla wszystkich motywów ───────────────────────────────────────── */ :root{ /* Kroje: nagłówki wąskim Big Shoulders (czyta się z ukosa i z odległości), zdania Chivo (wysokie oczko, komplet polskich znaków), liczby Azeret Mono (jednakowa szerokość cyfr, więc kolumny nie skaczą przy zmianie wyniku). Wszystkie trzy ładujemy z podzbiorem latin-ext — bez niego „ś", „ż" i „ł" wypadają na krój zastępczy i wiersz zaczyna tańczyć. */ --d:'Big Shoulders Display','Arial Narrow',sans-serif; --b:'Chivo',system-ui,sans-serif; --m:'Azeret Mono',ui-monospace,monospace; --ease:cubic-bezier(.16,1,.3,1); --tabh:68px; /* wysokość dolnej nawigacji */ --pad:clamp(16px,4.5vw,24px); /* Stany — te same we wszystkich motywach, patrz nagłówek pliku. */ --green:#4cb87a; --amber:#e0a13c; } /* ── 3 · TAKTYCZNY (domyślny) ─────────────────────────────────────────────── */ /* Barwy produktu Range 'n' Roll (04.11.2026) — z logo: biel na czerni, czerwień tylko jako sygnał. To jest wygląd DOMYŚLNY: widzi go każdy, dopóki strzelnica nie wstawi własnej palety (motyw „strzelnica”, np. Czacz — ten się NIE zmienia). Akcent jest złamaną bielą, nie kolorem: przycisk główny to biel z czarnym napisem, jak litery logo. Czerwień (#E2231A, środek lunety) jest sygnałem — „dzieje się teraz”, odwołanie, błąd — więc nie konkuruje z akcentem. Tła to neutralny grafit bez brązu (wcześniej piasek/mosiądz, a jeszcze wcześniej oliwka z moro — oba odrzucone przez właściciela produktu). Klucz `taktyczny` zostaje w kodzie i w zapisanych ustawieniach — zmiana samej nazwy wylogowałaby ludzi z ich wyboru motywu. */ :root, :root[data-motyw="taktyczny"], [data-motyw="taktyczny"]{ --akcent:#F2EFE9; --akcent-jasny:#FFFFFF; --sygnal:#E2231A; --sygnal-jasny:#FF4A3D; --tlo:#0E0E0F; --tlo-2:#131315; --plyta:#18181B; --plyta-2:#202024; --plyta-akcent:#1F1F23; /* wierzch gradientu karty „to jest Twoje" */ --plyta-sygnal:#231312; /* wierzch gradientu karty „dzieje się teraz" */ --wlos:rgba(242,239,233,.10); --wlos-2:rgba(242,239,233,.18); --tekst:#F2EFE9; --tekst-2:#C6C3BD; --przygaszony:#94918B; --pasek:#131315; --pasek-dol:#18181B; } /* ── 1 · KLASYCZNY — czerń i mosiądz, dotychczasowy wygląd aplikacji ──────── */ :root[data-motyw="klasyczny"], [data-motyw="klasyczny"]{ --akcent:#c9a86a; --akcent-jasny:#dcc08a; --sygnal:#d02b22; --sygnal-jasny:#ff5a4a; --tlo:#0a0908; --tlo-2:#100e0c; --plyta:#16130f; --plyta-2:#1e1a15; --plyta-akcent:#1c1710; --plyta-sygnal:#1d1310; --wlos:rgba(236,231,222,.10); --wlos-2:rgba(236,231,222,.18); --tekst:#efeae1; --tekst-2:#c5bcae; --przygaszony:#a1978a; --pasek:rgba(10,9,8,.94); --pasek-dol:rgba(16,14,12,.97); } /* ── 2 · BARWY STRZELNICY ───────────────────────────────────────────────────── Akcent bierzemy z `tenant.branding` (czyta go lib/motyw.js i wstawia jako `--marka-akcent` na ). Zmienia się WYŁĄCZNIE akcent i chłodniejszy odcień tła — układ, wielkości i odstępy są identyczne we wszystkich motywach. Inaczej każda strzelnica dostawałaby inny produkt, a my trzy razy więcej pracy przy każdej zmianie ekranu. GDY STRZELNICA NIE MA ZAPISANEJ BARWY (dziś `branding` jest puste u obu licencjobiorców) — zostaje stal #3d86b5 z makiety. Nie zgadujemy koloru z logo i nie podstawiamy mosiądzu z klasycznego: motyw ma wtedy nadal być ROZPOZNAWALNIE innym motywem, a nie kopią klasycznego pod inną nazwą. Barwa wchodzi sama w chwili, gdy strzelnica wpisze ją sobie w dane. */ :root[data-motyw="strzelnica"], [data-motyw="strzelnica"]{ --akcent:var(--marka-akcent,#3d86b5); --akcent-jasny:var(--marka-akcent-jasny,#5ea3d0); --sygnal:#c0392b; --sygnal-jasny:#e2604f; --tlo:#080b0f; --tlo-2:#0c1116; --plyta:#101820; --plyta-2:#16212b; --plyta-akcent:#16232e; --plyta-sygnal:#201316; --wlos:rgba(222,232,240,.11); --wlos-2:rgba(222,232,240,.19); --tekst:#e6edf3; --tekst-2:#b9c8d4; --przygaszony:#8ea0b0; --pasek:rgba(8,11,15,.94); --pasek-dol:rgba(13,18,24,.97); } /* Podgląd motywu w ustawieniach: te same bloki wyżej działają na KAŻDYM elemencie z atrybutem `data-motyw`, nie tylko na . Dzięki temu przycisk wyboru maluje się swoją paletą, a paleta nadal jest opisana raz. UWAGA przy używaniu: wewnątrz takiego elementu działają nazwy własne (--akcent, --tlo, --tekst). Aliasy niżej (--sand, --ink, --bone) są policzone na :root i niosą barwy motywu CAŁEJ strony, nie tego podglądu. */ /* ── aliasy: stare nazwy tokenów, których używa cały dotychczasowy CSS ────── */ :root{ --ink:var(--tlo); --ink-2:var(--tlo-2); --panel:var(--plyta); --panel-2:var(--plyta-2); --hair:var(--wlos); --hair2:var(--wlos-2); --bone:var(--tekst); --bone-2:var(--tekst-2); --muted:var(--przygaszony); --sand:var(--akcent); --red:var(--sygnal); --red-br:var(--sygnal-jasny); } /* Czacz: te same kolory i kroje co strzelnicaczacz.pl/styl.css. Osobne selektory dla podglądu w ustawieniach i aktywnego motywu. Pozostali licencjobiorcy zachowują własną paletę. */ :root[data-strzelnica="czacz"][data-motyw="strzelnica"], :root[data-strzelnica="czacz"] [data-motyw="strzelnica"]{ --akcent:#c4a172; --akcent-jasny:#dcbd8c; --sygnal:#d02b22; --sygnal-jasny:#ff5a4a; --tlo:#060607; --tlo-2:#0c0b0b; --plyta:#131211; --plyta-2:#1b1917; --plyta-akcent:#211b14; --plyta-sygnal:#211311; --wlos:rgba(236,231,222,.08); --wlos-2:rgba(236,231,222,.16); --tekst:#f0ece6; --tekst-2:#c5bcae; --przygaszony:#988e7f; --pasek:rgba(6,6,7,.96); --pasek-dol:#0c0b0b; --d:'Big Shoulders Display','Arial Narrow',sans-serif; --b:'Archivo',system-ui,sans-serif; --m:'JetBrains Mono',ui-monospace,monospace; } :root[data-strzelnica="czacz"][data-motyw="strzelnica"] body{ background-image:none; } :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .top{ min-height:84px; } :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .top img{ width:auto;height:48px;max-width:140px;object-fit:contain; } :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .top .who{ font-size:22px;letter-spacing:.03em; } :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .top .who small{ font-size:12px;margin-top:4px; } :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .tabs button{ font-family:var(--b);font-weight:500;letter-spacing:0;text-transform:none; font-size:13px; } :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .tabs button[aria-current="page"]{ background:rgba(196,161,114,.12);color:var(--akcent-jasny); } :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .row .title, :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .poz .title, :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .poz .kto b{ font-family:var(--b);font-size:17px;font-weight:600; text-transform:none;line-height:1.4;letter-spacing:0; } :root[data-strzelnica="czacz"][data-motyw="strzelnica"] label{ font-family:var(--b);font-size:12px;font-weight:600; letter-spacing:.04em;line-height:1.5; } :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .btn{ border-radius:9px; } :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .btn.glowny{ color:#0b0a09;background:var(--akcent);border-color:var(--akcent); } :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .btn.glowny:hover{ background:var(--akcent-jasny);border-color:var(--akcent-jasny); } :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .card, :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .poz{ border-radius:14px; } @media(min-width:900px){ :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .tabs{padding-top:100px} :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .tabs button{font-size:14px;min-height:52px} } @media(max-width:540px){ :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .top{min-height:76px;gap:10px} :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .top img{height:38px;max-width:84px} :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .top .who{font-size:19px;letter-spacing:.01em} :root[data-strzelnica="czacz"][data-motyw="strzelnica"] .tabs button{font-size:10px} }