/* Tokeny wyglądu Surprise Me: jedyne źródło kolorów, czcionek i odstępów. Kolory wzięte z logo Jacka (SurpriseMe/Logo): granat nocy + kropki róż, błękit, cyjan, żółty. Nowy kolor = nowy token tutaj, nigdy wartość wpisana w styl.css. */ :root { color-scheme: dark; /* strona jest ciemna z założenia: przeglądarka ma jej nie przyciemniać po swojemu */ /* tło i powierzchnie */ --tlo: #0a0d1f; --tlo-2: #10142b; --tlo-polprzezroczyste: rgba(10, 13, 31, 0.75); --karta: #151a36; --karta-2: #1c2246; --linia: rgba(255, 255, 255, 0.08); --linia-mocna: rgba(255, 255, 255, 0.18); /* tekst */ --tekst: #eef0ff; --tekst-2: #a6acd0; --na-gradiencie: #ffffff; --tekst-3: #8a91bd; /* kontrast ≥ 5:1 na każdym tle (WCAG AA) */ /* kolory logo */ --roz: #ff3e9a; --fiolet: #7b5cff; --blekit: #2f6bff; --cyjan: #29d3ff; --zolty: #ffc93c; /* znaczenia */ --akcent: var(--roz); --sukces: #3ee08f; --uwaga: var(--zolty); --blad: #ff6b6b; --gradient-logo: linear-gradient(100deg, var(--roz) 0%, var(--fiolet) 45%, var(--blekit) 75%, var(--cyjan) 100%); /* mapa (wariant "wieczór", wybrany przez Jacka 2026-10-14); ulice w jednej tonacji, główne nieco jaśniejsze */ --mapa-tlo: #272c62; --mapa-zabudowa: #2d3372; --mapa-zielen: #2e6a80; --mapa-woda: #29b8f0; --mapa-budynki: #363d86; --mapa-ulica: #4f58ab; --mapa-ulica-srednia: #5d67bd; --mapa-ulica-glowna: #6c77d0; --mapa-tory: #474d93; /* niebo na kartach pogody: dzień (jasny błękit ze słońcem w rogu, 2026-10-27), zmierzch, noc (granat z gwiazdami) */ --niebo-dzien-gora: #2f8fe0; --niebo-dzien-dol: #1f4fc4; --niebo-dzien-slonce: rgba(255, 201, 60, 0.5); --niebo-zmierzch: #3b2457; --niebo-noc-gora: #1b2160; --niebo-noc: #0c0f2b; --gwiazdy: rgba(238, 240, 255, 0.55); /* płynne szkło (decyzja 2026-10-20): bez linii obramowania, krawędź robi miękkie światło od środka */ --szklo-tlo: linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.045) 42%, rgba(255, 255, 255, 0.065) 100%); --szklo-tlo-mocne: linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.1) 100%); --szklo-pelne: #1a1d45; /* zamiast szkła, gdy przeglądarka nie umie rozmywać tła */ --szklo-rozmycie: blur(26px) saturate(170%); --szklo-swiatlo: inset 0 1px 1.5px rgba(255, 255, 255, 0.34), inset 0 -1px 1px rgba(255, 255, 255, 0.06), inset 20px 0 32px -28px rgba(41, 211, 255, 0.4), inset -20px 0 32px -28px rgba(255, 62, 154, 0.4), 0 24px 48px -30px rgba(0, 0, 0, 0.75); --szklo-wybrane: inset 0 1px 1.5px rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 62, 154, 0.55), inset 0 0 22px rgba(255, 62, 154, 0.22), 0 0 18px rgba(255, 62, 154, 0.28); --poswiata-przycisku: 0.6; /* jasność rozmytej poświaty pod głównym przyciskiem */ --tlo-plyn-1: rgba(47, 107, 255, 0.55); --tlo-plyn-2: rgba(255, 62, 154, 0.42); --tlo-plyn-3: rgba(123, 92, 255, 0.5); --tlo-plyn-4: rgba(41, 211, 255, 0.3); /* neon noir (decyzja 2026-10-23, na razie tylko ekran "Twoje wyjście"): czarna szyba, rurki neonu o gorącym rdzeniu i barwnej poświacie */ --noir-tlo: #020203; --noir-szklo: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012) 60%, rgba(255, 255, 255, 0.03)); --noir-rurka-zgaszona: rgba(255, 255, 255, 0.14); --noir-roz-rdzen: #ffe0f0; --noir-roz-halo: 0 0 3px #ffb3d9, 0 0 10px var(--roz), 0 0 28px rgba(255, 62, 154, 0.7), inset 0 0 8px rgba(255, 62, 154, 0.55), inset 0 0 26px rgba(255, 62, 154, 0.25); --noir-cyjan-rdzen: #dffaff; --noir-cyjan-halo: 0 0 3px #b0f1ff, 0 0 10px var(--cyjan), 0 0 28px rgba(41, 211, 255, 0.7), inset 0 0 8px rgba(41, 211, 255, 0.55), inset 0 0 26px rgba(41, 211, 255, 0.25); --noir-nic: #ff5aac; /* neonowa nić budżetu */ --noir-slupek: #d6f8ff; --noir-slupek-halo: 0 0 4px #bff3ff, 0 0 12px var(--cyjan); --sprezyna: cubic-bezier(0.34, 1.45, 0.64, 1); --miekko: cubic-bezier(0.22, 0.8, 0.24, 1); /* czcionki */ --font-tytul: "Sora", "Segoe UI", system-ui, sans-serif; --font-tekst: "Manrope", "Segoe UI", system-ui, sans-serif; /* skala */ --r-maly: 10px; --r: 16px; --r-duzy: 24px; --odstep-1: 4px; --odstep-2: 8px; --odstep-3: 12px; --odstep-4: 16px; --odstep-5: 24px; --odstep-6: 32px; --odstep-7: 48px; --przycisk-h: 56px; --nawigacja-h: 72px; /* dolny pasek nawigacji (bez strefy bezpiecznej) */ --rolka-h: 44px; /* wysokość jednej pozycji rolki godzin */ --szerokosc: 480px; --ruch: 220ms cubic-bezier(0.2, 0.7, 0.2, 1); /* bilet premium na ekranie drogi (2026-10-28, wyjątek od zakazu gradientów): czarny w każdym motywie, przez który płynie wiązka pryzmatu */ --bilet-tlo: #0b0c1c; --bilet-tekst: #ffffff; --bilet-etykieta: #ffb4dc; --bilet-akcent: #ffe08a; --bilet-linia: rgba(255, 255, 255, 0.14); --pryzmat: linear-gradient(180deg, #ff3d9a, #ff9a3d 20%, #ffe66d 38%, #3dffa2 55%, #2fb7ff 72%, #7a4bff 90%); --pryzmat-1: #ff7ac8; --pryzmat-2: #ffe66d; --pryzmat-3: #5ef2ff; --bilet-cien: linear-gradient(180deg, rgba(11, 12, 28, 0.15), rgba(11, 12, 28, 0.55)); } /* motyw Neon noir dla całej aplikacji (2026-10-23): podmienia tokeny tła, szkła i mapy, więc wszystkie ekrany i okna czerpią z jednego miejsca. Włącza go (Ustawienia → Wygląd). Zaznaczenie (--szklo-wybrane) to rurka neonu: rdzeń z poświatą. Mapa zmienia kolory po odświeżeniu strony. */ html[data-motyw="noir"] { --tlo: var(--noir-tlo); --tlo-2: #07070b; --tlo-polprzezroczyste: rgba(2, 2, 3, 0.78); --karta: #0b0b11; --karta-2: #12121a; --szklo-tlo: var(--noir-szklo); --szklo-tlo-mocne: linear-gradient(170deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 60%, rgba(255, 255, 255, 0.045)); --szklo-pelne: #0b0b11; --szklo-swiatlo: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 22px 40px -28px #000; --szklo-wybrane: inset 0 0 0 1.5px var(--noir-roz-rdzen), 0 0 3px #ffb3d9, 0 0 10px var(--roz), 0 0 26px rgba(255, 62, 154, 0.65), inset 0 0 8px rgba(255, 62, 154, 0.5), inset 0 0 22px rgba(255, 62, 154, 0.22); --mapa-tlo: #07070d; --mapa-zabudowa: #0d0d16; --mapa-zielen: #0a1a1d; --mapa-woda: #0b3f55; --mapa-budynki: #14141f; --mapa-ulica: #28283c; --mapa-ulica-srednia: #36364e; --mapa-ulica-glowna: #48486c; --mapa-tory: #1d1d2b; }