/* ═══════════════════════════════════════════════════════════════════════════ CLUE — KONFIGURACJA WYGLĄDU Flat design + liquid glass. Język wizualny w duchu Flying Bisons. ═══════════════════════════════════════════════════════════════════════════ To jedyny plik, w którym opisany jest wygląd aplikacji. Zmiana wartości tutaj przebudowuje cały interfejs — typografię, kolory, przyciski, wpisy, stany hover/active/focus, zaokrąglenia i animacje. ZASADA: w pozostałych plikach nie ma "gołych" wartości (px, hex, ms). Wszystko odwołuje się do zmiennych zdefiniowanych poniżej. ── FILOZOFIA ────────────────────────────────────────────────────────────── 1. FLAT. Domyślnie płasko: pełne wypełnienia, wyraźne krawędzie, zero gradientów i dekoracyjnych cieni. Hierarchię buduje KOLOR, TYPOGRAFIA i PRZESTRZEŃ — nie udawana głębia. Cień pojawia się wyłącznie tam, gdzie warstwa naprawdę unosi się nad treścią. 2. LIQUID GLASS. Zarezerwowane dla warstw pływających nad zawartością: nagłówek, pasek filtrów, kompozytor, modale. Szkło = półprzezroczyste tło + rozmycie tego, co pod spodem (--glass-*). Nigdy na zwykłej karcie — inaczej efekt się zużywa i wszystko robi się mgliste. 3. TYPOGRAFIA NIESIE UKŁAD. Nagłówki szeryfowe (--font-display) kontra geometryczny grotesk w treści. Ciasny trakcing na dużych stopniach (ujemny --ls-*), rozstrzelone WERSALIKI na etykietach. ── SPIS TREŚCI ──────────────────────────────────────────────────────────── 1. TYPOGRAFIA ......... kroje, skala rozmiarów, grubości, interlinia 2. PRZESTRZEŃ ......... skala odstępów, wysokości kontrolek 3. KSZTAŁT ............ zaokrąglenia, grubość obrysu 4. KOLOR .............. powierzchnie, tekst, role semantyczne 5. SZKŁO .............. warstwy pływające, rozmycie, cienie 6. RUCH ............... czasy i krzywe animacji 7. STANY .............. hover / active / focus / disabled 8. KOMPONENTY ......... przyciski, pola, wpisy, panele ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ─── 1. TYPOGRAFIA ──────────────────────────────────────────────────────── Dwa kroje w kontrze — to główny nośnik charakteru: --font-display szeryfowy, do nagłówków i liczb. Nadaje powagę dokumentu (dziennik zdarzeń to materiał dowodowy). --font-sans geometryczny grotesk, do całej reszty interfejsu. Podmiana tych dwóch wartości zmienia wyraz całej aplikacji. */ --font-display:'Instrument Serif',Georgia,'Times New Roman',serif; --font-sans:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-mono:ui-monospace,'SF Mono',Consolas,'Liberation Mono',monospace; --font:var(--font-sans); /* alias zgodności wstecznej */ /* Skala rozmiarów. Krok ~1.2 — na tyle ciasny, żeby drobny UI pozostał czytelny, i na tyle szeroki, żeby nagłówki naprawdę dominowały. */ --fs-2xs:10px; /* znaczniki, indeksy górne */ --fs-xs:11px; /* etykiety wersalikami, drobny meta */ --fs-sm:12px; /* podpisy, tekst pomocniczy */ --fs-base:13px; /* domyślny drobny UI, metadane */ --fs-md:14px; /* tekst treści, przyciski */ --fs-lg:15px; /* tekst bazowy dokumentu, pola */ --fs-xl:18px; /* nagłówki sekcji, tytuły paneli */ --fs-2xl:22px; /* nagłówki widoków */ --fs-3xl:28px; /* tytuł ekranu */ --fs-display:38px; /* stany puste, duże liczby */ --fs-hero:52px; /* akcent liczbowy */ /* Grubości. Grotesk jest wyrazisty, więc treść stoi na 400 — pogrubienia rezerwujemy na realne akcenty, nie na "wszystko ważne". */ --fw-regular:400; --fw-medium:500; /* przyciski drugorzędne, meta */ --fw-semibold:600; /* etykiety, akcje, aktywne zakładki */ --fw-bold:700; /* nagłówki */ --fw-heavy:800; /* wyróżnienia liczbowe */ /* Interlinia */ --lh-none:1; /* ikony, pigułki jednoliniowe */ --lh-tight:1.15; /* duże nagłówki — zwarty blok */ --lh-snug:1.4; /* zwarte bloki UI */ --lh-normal:1.55; /* pola tekstowe */ --lh-relaxed:1.65; /* treść wpisu — najdłuższe czytanie */ /* Światło międzyliterowe. Ujemne na dużych stopniach (sygnatura tego stylu), dodatnie i szerokie na WERSALIKACH. */ --ls-tighter:-.035em; /* --fs-3xl i wyżej */ --ls-tight:-.02em; /* nagłówki średnie */ --ls-normal:-.01em; /* tekst interfejsu */ --ls-wide:.01em; /* drobny tekst — rozluźniamy */ --ls-wider:.02em; --ls-caps:.08em; /* WERSALIKI wymagają światła */ --ls-caps-lg:.14em; /* ─── 2. PRZESTRZEŃ ──────────────────────────────────────────────────────── Skala 4-punktowa. Płaski interfejs bez cieni potrzebuje POWIETRZA, żeby grupy się rozdzieliły — stąd odstępy hojniejsze niż w wersji z ramkami. Zwiększenie --space-unit rozluźnia cały interfejs. */ --space-unit:4px; --sp-0:0; --sp-1:calc(var(--space-unit) * 1); /* 4px */ --sp-2:calc(var(--space-unit) * 1.5); /* 6px */ --sp-3:calc(var(--space-unit) * 2); /* 8px */ --sp-4:calc(var(--space-unit) * 2.5); /* 10px */ --sp-5:calc(var(--space-unit) * 3); /* 12px */ --sp-6:calc(var(--space-unit) * 3.5); /* 14px */ --sp-7:calc(var(--space-unit) * 4); /* 16px */ --sp-8:calc(var(--space-unit) * 5); /* 20px */ --sp-9:calc(var(--space-unit) * 6); /* 24px */ --sp-10:calc(var(--space-unit) * 7.5);/* 30px */ --sp-12:calc(var(--space-unit) * 10); /* 40px */ /* Wysokości kontrolek — spójne, żeby elementy w rzędzie się zgadzały */ --control-h-sm:30px; /* przyciski nawigacji, drobne akcje */ --control-h:40px; /* standardowy przycisk ikonowy */ --control-h-lg:46px; /* pola formularza, akcja główna */ /* Układ */ --layout-max:1020px; /* maksymalna szerokość treści */ --header-h:64px; --subheader-h:56px; /* ─── 3. KSZTAŁT ─────────────────────────────────────────────────────────── Flat = ostro. Zaokrąglenia są minimalne i służą tylko zmiękczeniu krawędzi, nie "pęcherzykowaniu" interfejsu. Wyjątkiem są pigułki (filtry, przyciski akcji), gdzie pełne zaokrąglenie niesie znaczenie. Ustaw --radius-unit:0, a interfejs stanie się całkowicie kanciasty. */ --radius-unit:4px; --r-xs:calc(var(--radius-unit) * .5); /* 2px — znaczniki */ --r-sm:calc(var(--radius-unit) * .75); /* 3px — drobne pigułki */ --r-md:var(--radius-unit); /* 4px — pola drobne */ --r:var(--radius-unit); /* 4px — domyślne */ --r-lg:calc(var(--radius-unit) * 1.5); /* 6px — karty */ --r-xl:calc(var(--radius-unit) * 3); /* 12px — modale, szkło */ --r-pill:9999px; /* przyciski kapsułkowe */ --r-circle:50%; --bw:1px; /* domyślna grubość obrysu */ --bw-thick:2px; /* akcent boczny, cytat */ /* ─── 4. KOLOR ───────────────────────────────────────────────────────────── Paleta zbudowana na kontraście atramentu i chłodnego papieru, z jednym mocnym akcentem. Podział ról jest celowy i nie należy go mieszać: FIOLET (--accent) = akcja i interakcja. Dodaj wpis, Zapisz, PDF, hover, focus, aktywna zakładka. Jedyny nasycony kolor w interfejsie, więc oko idzie dokładnie tam. ATRAMENT (--text) = treść i wypełnienia kontrastowe. CZERWIEŃ (--imp) = ważność treści, nie interakcja. */ /* Powierzchnie */ --bg:#f7fafb; /* tło aplikacji — chłodny papier */ --surface:#ffffff; /* karty, wpisy, panele */ --surface-raised:#ffffff;/* elementy nad kartą */ --surface-sunken:#eef3f5;/* zagłębienia, pasy tabeli */ --input:#eef3f5; /* pola i wypełnienia */ --border:#dde5e9; /* obrys domyślny */ --border-subtle:#e9eff2; /* delikatny podział */ --border-strong:#0c1518; /* obrys w stanie hover — atrament*/ /* Tekst */ --text:#0c1518; /* atrament — treść główna */ --text-2:#647077; /* drugorzędny, metadane */ --text-3:#767f85; /* wyciszony, podpisy (>=4.5:1) */ /* POMARAŃCZ — akcja i interakcja (jedyny nasycony kolor w interfejsie). Dwa warianty, bo jeden nie może robić obu rzeczy czytelnie: --accent żywy, pod WYPEŁNIENIA (biały tekst na nim) --accent-ink ciemniejszy, pod TEKST i ikony na jasnym tle (>=4.5:1) Nigdy nie pisz --accent tekstem na białym — ma tylko 3.8:1. */ --ui:#d94f04; --ui-hover:#b4460a; --ui-fg:#ffffff; --ui-soft:#fdf1e9; /* tło hover */ --ui-soft-2:#fbe3d2; /* tło zaznaczenia */ --ui-line:rgba(217,79,4,.30); --ui-ring:rgba(217,79,4,.22); --accent:#d94f04; /* wypełnienia, przyciski akcji */ --accent-ink:#a83e08; /* tekst, etykiety, ikony */ --accent-hover:#b4460a; --accent-fg:#ffffff; --accent-soft:rgba(217,79,4,.10); --accent-softer:rgba(217,79,4,.05); --accent-ring:rgba(217,79,4,.22); /* CZERWIEŃ — ważność treści, nie interakcja. Świadomie chłodniejsza i ciemniejsza od pomarańczu, żeby te dwa kolory dało się rozróżnić. Wpis ważny NIE zalewa się tłem — niesie go gwiazdka i belka z boku. */ --imp:#b3261e; --imp-bg:#fdeceb; /* pigułki i przyciski "Ważne" */ --imp-bg-hover:#fbdedb; --imp-border:rgba(179,38,30,.30); /* Wiersz ważnego wpisu: bez zalewania tłem — niesie go belka z boku i gwiazdka. Ustaw --imp-row-bg na --imp-bg, jeśli wolisz kolorowe tło. */ --imp-row-bg:transparent; --imp-row-bg-hover:var(--surface-sunken); --imp-row-bar:var(--bw-thick); /* Stany pomocnicze */ --success:#1f7a5c; --success-soft:rgba(31,122,92,.12); --danger:#b3261e; --danger-soft:rgba(179,38,30,.09); --danger-border:rgba(179,38,30,.30); --danger-ring:rgba(179,38,30,.22); --stat-color:#647077; /* liczby, dane pomocnicze */ --stat-soft:rgba(100,112,119,.10); /* Wypełnienie kontrastowe — przycisk główny "wypełniony" */ --primary:#0c1518; --primary-hover:#232f34; --primary-fg:#f7fafb; --primary-ring:rgba(12,21,24,.22); /* Aliasy zgodności wstecznej */ --hover:var(--ui-soft); --active:var(--ui-soft-2); --ring:var(--ui-ring); --peach:var(--ui-soft); /* Pasek przewijania */ --scrollbar-w:6px; --scrollbar-thumb:#c9d4d9; --scrollbar-thumb-hover:#767f85; /* ─── 5. SZKŁO I WARSTWY ─────────────────────────────────────────────────── LIQUID GLASS. Warstwa pływająca nie jest białym prostokątem — jest półprzezroczysta i rozmywa to, co pod nią przepływa. Stąd wrażenie "cieczy": treść przewija się i widać ją przez taflę. Stosować WYŁĄCZNIE na warstwach nad treścią: nagłówek, pasek filtrów, kompozytor, modale, popovery. Na zwykłej karcie efekt się zużywa. --glass-bg półprzezroczyste tło tafli --glass-blur promień rozmycia tła (backdrop-filter) --glass-border krawędź łapiąca światło Ustaw --glass-blur:0px, żeby zejść do czystego flat bez szkła. */ --glass-bg:rgba(255,255,255,.72); --glass-bg-strong:rgba(255,255,255,.86); /* gdy pod spodem gęsta treść */ --glass-blur:18px; --glass-saturate:180%; --glass-border:rgba(12,21,24,.09); --glass-highlight:rgba(255,255,255,.60); /* górna krawędź tafli */ --glass-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); /* Cienie. Flat = prawie żadnych. Zostają wyłącznie tam, gdzie warstwa naprawdę unosi się nad treścią — i są miękkie, nie "wytłoczone". */ --shadow-color:12,21,24; --shadow-sm:none; --shadow:0 1px 2px rgba(var(--shadow-color),.05); --shadow-md:0 16px 48px -12px rgba(var(--shadow-color),.18); --shadow-glass:0 8px 32px -8px rgba(var(--shadow-color),.12); --shadow-header:0 1px 0 var(--glass-border); --shadow-accent:none; --shadow-ui:none; /* Obwódka fokusu — widoczna dla klawiatury */ --ring-w:3px; --ring-focus:0 0 0 var(--ring-w) var(--ui-ring); --ring-focus-accent:0 0 0 var(--ring-w) var(--accent-ring); --ring-focus-danger:0 0 0 var(--ring-w) var(--danger-ring); --ring-focus-primary:0 0 0 var(--ring-w) var(--primary-ring); /* ─── 6. RUCH ────────────────────────────────────────────────────────────── Krótkie czasy dla stanów wskaźnika, dłuższe dla zmiany układu. Ustaw --dur-fast:0ms, by wyłączyć reakcje hover. */ --ease-out:cubic-bezier(0.22,1,0.36,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1); --ease-drawer:cubic-bezier(0.32,0.72,0,1); --dur-instant:80ms; --dur-fast:150ms; /* hover, zmiana koloru */ --dur-press:120ms; /* wciśnięcie */ --dur-normal:280ms; /* rozwinięcie, wygaszenie */ --dur-slow:420ms; /* szuflady, panele boczne */ --transition:var(--dur-fast) var(--ease-out); --transition-press:var(--dur-press) var(--ease-out); --transition-panel:var(--dur-slow) var(--ease-drawer); /* ─── 7. STANY ───────────────────────────────────────────────────────────── Flat nie ma cienia do odebrania, więc reakcja musi być widoczna w KOLORZE i KRAWĘDZI. Wciśnięcie ledwo zauważalne — interfejs ma być rzeczowy. */ --state-hover-bg:var(--ui-soft); --state-hover-border:var(--border-strong); --state-active-bg:var(--ui-soft-2); --state-press-scale:0.985; --state-lift:-1px; --state-disabled-opacity:.40; --state-muted-opacity:.60; /* ─── 8. KOMPONENTY ──────────────────────────────────────────────────────── Wartości specyficzne dla elementów. Odwołują się do skal powyżej, więc zmiana skali przenosi się tutaj automatycznie — ale można je też nadpisać punktowo, nie ruszając reszty systemu. */ /* Przycisk */ --btn-py:var(--sp-4); --btn-px:var(--sp-7); --btn-fs:var(--fs-base); --btn-fw:var(--fw-medium); --btn-radius:var(--r-pill); --btn-gap:var(--sp-2); /* Pole formularza */ --field-h:var(--control-h-lg); --field-px:var(--sp-6); --field-fs:var(--fs-md); --field-radius:var(--r-md); --field-bg:var(--input); --field-bg-focus:var(--surface); --field-border-focus:var(--accent); /* Wpis (rekord) — płaska karta: krawędź zamiast cienia */ --entry-bg:var(--surface); --entry-border:var(--border); --entry-radius:var(--r-lg); --entry-shadow:none; --entry-shadow-hover:var(--shadow); --entry-text-fs:var(--fs-md); --entry-text-lh:var(--lh-relaxed); --entry-label-fs:var(--fs-xs); --entry-label-color:var(--accent-ink); --entry-meta-fs:var(--fs-sm); /* Panel / modal — tafla szkła nad przyciemnioną treścią */ --panel-bg:var(--glass-bg-strong); --panel-radius:var(--r-xl); --panel-shadow:var(--shadow-md); --panel-overlay:rgba(12,21,24,.32); /* Miniatura załącznika */ --thumb-w:150px; --thumb-h:110px; } /* ─── WARSTWY SZKLANE ────────────────────────────────────────────────────── Klasa pomocnicza. Element z .glass staje się taflą: rozmywa tło, łapie światło na górnej krawędzi i nie rzuca ciężkiego cienia. @supports pilnuje, żeby w przeglądarce bez backdrop-filter tafla została po prostu nieprzezroczysta — czytelność przed efektem. */ .glass{ background:var(--glass-bg); border:var(--bw) solid var(--glass-border); box-shadow:var(--shadow-glass); } @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass{ -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter); } } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass{background:var(--surface)} } /* ─── NAGŁÓWKI ───────────────────────────────────────────────────────────── Krój szeryfowy wchodzi automatycznie na nagłówki. Reszta interfejsu zostaje na grotesku. */ h1,h2,h3{ font-family:var(--font-display); font-weight:var(--fw-regular); letter-spacing:var(--ls-tight); line-height:var(--lh-tight); } /* ─── DOSTĘPNOŚĆ ────────────────────────────────────────────────────────── System operacyjny może prosić o ograniczenie animacji — respektujemy to. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } }