/* ============================================================================= Tło aplikacji — "brand wash" (light + dark) System designu automatyzacji · GOTOWIEC do KOPIUJ-WKLEJ. Źródło prawdy: nie przepisuj wartości z palca, kopiuj ten plik. ----------------------------------------------------------------------------- EFEKT: tło NIGDY nie jest płaskie. Cztery miękkie plamy kolorów marki (po jednej w każdym rogu) zlewają się w jeden delikatny, ambientowy wash. Rozkład rogów (ten sam w light i dark): lewy-górny = cyan prawy-górny = lawenda lewy-dolny = pink prawy-dolny = lime WAŻNE: wash jest TYLKO tłem. Treść (teksty, tabele) siedzi na solidnych, czytelnych powierzchniach NAD nim — nigdy nie pisz tekstu wprost na gradiencie. JEDYNA rzecz do dopasowania w Twoim projekcie: selektor trybu ciemnego. Domyślnie: [data-theme="dark"] na . Jeśli Twój projekt toggle'uje dark inaczej, zmień TYLKO ten selektor (np. `.dark`, `body.body--dark`) — albo owiń blok dark w `@media (prefers-color-scheme: dark)`. WARTOŚCI zostają 1:1. ============================================================================= */ :root { /* 4 kolory marki (nasycone, kanoniczne) — do akcentów w reszcie apki */ --brand-lime: #a3e635; --brand-cyan: #67e8f9; --brand-pink: #fda4af; --brand-lavender: #c084fc; /* baza tła (light): chłodny, prawie jednolity szary */ --app-bg: #e8ecf3; /* wash — 4 plamy na bazie --app-bg. Alfa celowo niska: to ma być ledwo wyczuwalne. Kolory podane literalnie (rgba), żeby było maksymalnie zgodne i niepsuwalne — NIE zamieniaj na var(), alfa musi zostać. */ --app-canvas: radial-gradient(85vw 85vh at -8% -14%, rgba(103, 232, 249, 0.30), transparent 60%), radial-gradient(82vw 82vh at 108% -10%, rgba(192, 132, 252, 0.26), transparent 58%), radial-gradient(85vw 88vh at -10% 116%, rgba(253, 164, 175, 0.24), transparent 60%), radial-gradient(85vw 88vh at 110% 114%, rgba(163, 230, 53, 0.22), transparent 60%), var(--app-bg); } /* --- TRYB CIEMNY --- te same 4 rogi, głębsze warianty hue, niższa siła, na prawie czarnej bazie. ZMIEŃ TYLKO SELEKTOR, jeśli trzeba (patrz nagłówek). */ [data-theme="dark"] { --app-bg: #0a0c11; --app-canvas: radial-gradient(85vw 85vh at -8% -14%, rgba(34, 211, 238, 0.20), transparent 60%), radial-gradient(82vw 82vh at 108% -10%, rgba(147, 51, 234, 0.22), transparent 58%), radial-gradient(85vw 88vh at -10% 116%, rgba(244, 114, 122, 0.16), transparent 60%), radial-gradient(85vw 88vh at 110% 114%, rgba(101, 163, 13, 0.16), transparent 60%), var(--app-bg); } /* Nałóż tło na całą aplikację. `fixed` sprawia, że plamy skalują się z oknem — mały laptop i monitor 4K wyglądają tak samo, środek się nie "wypłukuje". */ body { margin: 0; min-height: 100vh; background: var(--app-canvas); background-attachment: fixed; }