/* TOKENS_WERSJA: 2026-09-07.1 */ /* ============================================================================ Nurtoo — tokeny wspólne dla strony (nurtoo.pl) i aplikacji (app.nurtoo.pl) ŹRÓDŁO PRAWDY dla warstwy wizualnej OBU powierzchni. Strona konsumuje ten plik bezpośrednio jako CSS custom properties. Aplikacja mapuje go raz do `@theme inline` w `globals.css` i dalej używa utilities Tailwinda 4. TRZY ZASADY, KTÓRE TRZYMAJĄ TEN PLIK W RYZACH 1. Hex występuje WYŁĄCZNIE w warstwie „primitives" niżej. Komponent, który zapisuje kolor inaczej niż przez token semantyczny, jest błędem. 2. Każdy token semantyczny ma nazwę roli („na czym stoi", „jak głośno mówi"), a nie nazwę koloru. `--nt-label-2` przetrwa zmianę palety; `--nt-slate` nie. 3. Znacznik wersji w pierwszej linii podbija się w tym samym commicie co treść. Ten plik będzie istniał w dwóch repozytoriach, a rozjazdu kopii nikt nie zgłasza sam — to ta sama mechanika co przy PROJECT_INSTRUCTIONS. KONTRASTY: wszystkie liczby w komentarzach zmierzone wzorem WCAG 2.1 (relative luminance + (L1+0.05)/(L2+0.05)), policzone dla KAŻDEGO tła danego motywu, a podana wartość jest MINIMUM z tych trzech. Pomiar wykonany skryptem, nie oceniony wzrokiem. ============================================================================ */ /* ============================================================================ 0. PRIMITIVES — jedyne miejsce z wartościami hex Wartości pochodzą z brandbooka `nurtoo/frontend/docs/nurtoo-brand.html`. Nie dopisuj tu nowych odcieni bez zmiany brandbooka: brand jest kanonem, a ten plik jego wykonaniem. ============================================================================ */ :root { /* marka */ --nt-c-teal-900: #0B3B35; /* brandbook: znak na zieleni */ --nt-c-teal-800: #0D4A43; /* brandbook: Zieleń Nurtoo, kolor podstawowy */ --nt-c-teal-600: #0F5E54; /* brandbook: hover, stany */ --nt-c-teal-300: #9BC2BA; /* brandbook: znak na zieleni, jasny wariant */ --nt-c-teal-100: #DCEAE6; /* brandbook: tła, słupki bierne */ --nt-c-gold-500: #E0A43B; /* brandbook: Sygnał uwolnienia, akcent */ --nt-c-gold-600: #C98E28; --nt-c-ink: #14201E; /* brandbook: Atrament */ --nt-c-paper: #F6F5F0; /* brandbook: Papier */ --nt-c-cloud: #FFFFFF; --nt-c-success: #1E8A5F; /* brandbook: Sukces */ --nt-c-danger: #C2463B; /* brandbook: Alarm */ /* wartości WYPROWADZONE z palety brandbooka, których brandbook NIE zawiera. 🔵 PROPOZYCJA, nie ustalenie — brandbook milczy o motywie ciemnym i o wariantach „do tekstu". Do rozstrzygnięcia przez Michała. */ --nt-c-ink-98: #0A0F0E; /* tło bazowe motywu ciemnego, atrament dociemniony */ --nt-c-ink-95: #171F1E; /* powierzchnia wyniesiona motywu ciemnego */ --nt-c-ink-99: #050807; /* powierzchnia zagłębiona motywu ciemnego */ --nt-c-teal-750: #123B35; /* pas marki w motywie ciemnym */ --nt-c-gold-ink: #241A04; /* tekst NA złocie: 7,79:1 na gold-500 */ --nt-c-gold-700: #8F6417; /* złoto na tyle ciemne, by być tekstem: 4,81:1 na papierze */ --nt-c-success-ink: #16724D; /* sukces jako TEKST: 5,42:1 na papierze (brandbookowy ma 3,96 — za mało) */ --nt-c-danger-ink: #A93A30; /* alarm jako TEKST: 5,77:1 na papierze */ --nt-c-success-dim: #5CCB9B; /* sukces jako tekst w motywie ciemnym: 9,56:1 */ --nt-c-danger-dim: #F2938A; /* alarm jako tekst w motywie ciemnym: 8,3:1 */ --nt-c-gold-dim: #D19A36; /* wypełnienie złotem w motywie ciemnym, o krok przygaszone */ } /* ============================================================================ 1. KOLORY SEMANTYCZNE — motyw jasny (domyślny) Cztery poziomy etykiet to PRZEZROCZYSTY ATRAMENT, nie cztery osobne szarości. Powód jest praktyczny, nie estetyczny: ta sama etykieta ląduje na papierze, na białej karcie i na tle zagłębionym, a przezroczystość sama dopasowuje ją do podkładu. Cztery hexy wymagałyby czterech wariantów każdego z nich. ============================================================================ */ :root { color-scheme: light; /* --- powierzchnie: trzy warstwy, nie więcej (HIG: base → grouped → elevated) */ --nt-surface-base: var(--nt-c-paper); --nt-surface-elevated: var(--nt-c-cloud); --nt-surface-sunken: #EFEEE8; --nt-surface-brand: var(--nt-c-teal-800); /* pas marki, 9,26:1 wobec base */ --nt-surface-brand-deep: var(--nt-c-teal-900); --nt-surface-tint: var(--nt-c-teal-100); /* delikatne tło pod ikoną, słupek bierny */ /* --- cztery poziomy etykiet. 1: 13,06:1 nagłówki i tekst główny 2: 7,03:1 tekst wspierający, wprowadzenia, treść kart 3: 4,77:1 metadane, podpisy, etykiety sekcji — wciąż przechodzi 4,5:1 4: 2,07:1 🔴 NIGDY TEKST NIOSĄCY ZNACZENIE. Stany wyłączone, znaki ozdobne, wypełniacze. Dzisiejsza strona łamie to w tabeli porównawczej: znak „–" w kolorze #c0b9b2 ma 1,94:1 i jest JEDYNYM nośnikiem informacji „tego nie ma". */ --nt-label-1: rgb(20 32 30 / 0.96); --nt-label-2: rgb(20 32 30 / 0.76); --nt-label-3: rgb(20 32 30 / 0.64); --nt-label-4: rgb(20 32 30 / 0.34); /* --- etykiety na pasie marki (przezroczysta biel na zieleni) 1: 10,11:1 2: 7,12:1 3: 4,76:1 */ --nt-label-on-brand-1: rgb(255 255 255 / 1); --nt-label-on-brand-2: rgb(255 255 255 / 0.80); --nt-label-on-brand-3: rgb(255 255 255 / 0.60); /* --- separatory. Dwa, bo mają dwa różne zadania. `separator` 1,29:1 — kreska OZDOBNA, rytm wewnątrz listy albo tabeli. `separator-strong` 3,15:1 — krawędź, która NIESIE granicę: obrys karty, jeśli nic innego jej nie wyznacza, obrys pola formularza, obwódka stanu. 🔴 Przezroczysty atrament na niemal białym tle nie osiąga 3:1, dopóki nie stanie się ciemną linią — dlatego granice grupujące robimy ODSTĘPEM albo krokiem tła, a nie hairlinem. To reguła, nie wymówka. */ --nt-separator: rgb(20 32 30 / 0.13); --nt-separator-strong: rgb(20 32 30 / 0.50); --nt-separator-on-brand: rgb(255 255 255 / 0.16); /* --- akcent: JEDEN, złoto, i wyłącznie jako WYPEŁNIENIE. 🔴 Złoto jako tekst nie przechodzi i nie da się tego obejść delikatnie: #E0A43B ma 2,02:1 na papierze, #C98E28 ma 2,61:1. Żeby złoto weszło do tekstu przy 4,5:1, trzeba zejść do #8F6417 (4,81:1) — a to już nie jest złoto, tylko brąz, i przestaje znaczyć „uwolniona transza". Dlatego akcent ma jedno zadanie: akcja główna i sygnał w grafice drabiny. Wariant `--nt-accent-ink-on-surface` istnieje dla przypadków, w których Michał zdecyduje, że złoty tekst musi zostać. */ --nt-accent: var(--nt-c-gold-500); --nt-accent-strong: var(--nt-c-gold-600); /* hover wypełnienia */ --nt-on-accent: var(--nt-c-gold-ink); /* tekst na złocie, 7,79:1 */ --nt-accent-ink-on-surface: var(--nt-c-gold-700); /* złoto DOPUSZCZALNE jako tekst, 4,81:1 */ /* --- interakcja. Osobno od akcentu, bo akcent nie może być tekstem (wyżej). teal-600 jako link: 7,00:1 na papierze, 7,64:1 na białym. */ --nt-link: var(--nt-c-teal-600); --nt-link-hover: var(--nt-c-teal-800); /* --- etykieta w kolorze marki. Osobny token, nie `--nt-link`, bo nie jest klikalna: służy wyróżnieniu członu nagłówka i podpisom pod znakiem. Zieleń marki na papierze: 9,26:1. Token istnieje po to, żeby wyróżnienie w nagłówku nie zaczęło wyglądać na link. */ --nt-label-brand: var(--nt-c-teal-800); /* --- pierścień fokusu. 🔴 Świadome odejście od reguły „fokus w kolorze akcentu": złoty pierścień ma 2,02:1 wobec papieru, czyli nie spełnia progu 3:1 dla wskaźnika fokusu. Dzisiejsza strona ma dokładnie ten defekt (`:focus-visible` = gold-500). Zieleń marki daje 9,26:1 na papierze i 10,11:1 na białym. */ --nt-focus-ring: var(--nt-c-teal-800); --nt-focus-ring-on-brand: var(--nt-c-cloud); /* 10,11:1 na pasie marki */ --nt-focus-ring-width: 3px; --nt-focus-ring-offset: 2px; /* --- statusy. Kolor brandbookowy jest WYPEŁNIENIEM; tekst dostaje wariant ciemniejszy, bo brandbookowy sukces ma jako tekst 3,96:1. */ --nt-status-success: var(--nt-c-success); --nt-status-success-ink: var(--nt-c-success-ink); --nt-status-danger: var(--nt-c-danger); --nt-status-danger-ink: var(--nt-c-danger-ink); /* --- cienie: miękkie, duże, o niskiej gęstości, albo żadne (HIG). */ --nt-shadow-1: 0 1px 2px rgb(13 74 67 / 0.05); --nt-shadow-2: 0 1px 2px rgb(13 74 67 / 0.04), 0 8px 24px rgb(13 74 67 / 0.06); --nt-shadow-3: 0 2px 4px rgb(13 74 67 / 0.04), 0 20px 48px rgb(13 74 67 / 0.12); /* --- materiał: przezroczystość znaczy „ta warstwa jest NAD treścią". Nasycenie w filtrze nie jest ozdobą — bez niego rozmycie wychodzi szare. */ /* --- słupki drabiny transz. Osobne tokeny, nie powierzchnie, bo to WYKRES: kolor niesie tu informację („uwolniona / w toku / oczekuje"), a nie warstwę. W motywie ciemnym trzeba je odwrócić — zieleń marki i tint zbliżają się tam do siebie na tyle, że drabina traci znaczenie. */ --nt-bar-done: var(--nt-c-teal-800); /* 8,16:1 wobec słupka biernego */ --nt-bar-idle: var(--nt-c-teal-100); --nt-material-bar: rgb(246 245 240 / 0.72); --nt-material-bar-opaque: var(--nt-c-paper); --nt-material-filter: saturate(180%) blur(20px); /* pole formularza stojące NA pasie marki: rozjaśnienie podkładu, nie własny kolor, żeby pole nie było czwartą warstwą wizualną w tym samym kadrze */ --nt-field-on-brand: rgb(255 255 255 / 0.08); } /* ============================================================================ 2. KOLORY SEMANTYCZNE — motyw ciemny 🔵 CAŁY TEN BLOK JEST PROPOZYCJĄ MENTORA, NIE USTALENIEM. Brandbook nie opisuje motywu ciemnego, a dzisiejsza strona nie ma go wcale (zmierzone: `prefers-color-scheme` występuje w repo strony 0 razy). `globals.css` w aplikacji nosi już jedną taką propozycję, oznaczoną tam dokładnie w ten sposób i czekającą na decyzję. Ciemny motyw jest osobnym projektem, nie inwersją jasnego. Trzy skutki: · powierzchnia WYNIESIONA jest JAŚNIEJSZA od bazowej, nie ciemniejsza; · pas marki nie może być zielenią #0D4A43, bo ta jest niemal tak ciemna jak tło i przestaje czytać się jako warstwa (1,17:1 wobec tła bazowego). Staje się nią teal-750, o krok jaśniejszy od tła: 1,57:1; · duże nasycone wypełnienia przygasają — złoto schodzi do #D19A36. ============================================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --nt-surface-base: var(--nt-c-ink-98); --nt-surface-elevated: var(--nt-c-ink-95); /* JAŚNIEJSZA od base, krok 1,15 */ --nt-surface-sunken: var(--nt-c-ink-99); --nt-surface-brand: var(--nt-c-teal-750); --nt-surface-brand-deep: #0D2A26; --nt-surface-tint: #16302B; /* 1: 13,17:1 2: 7,17:1 3: 4,85:1 4: 2,11:1 (nie tekst) */ --nt-label-1: rgb(255 255 255 / 0.88); --nt-label-2: rgb(255 255 255 / 0.62); --nt-label-3: rgb(255 255 255 / 0.48); --nt-label-4: rgb(255 255 255 / 0.25); /* 1: 12,33:1 2: 8,51:1 3: 5,52:1 */ --nt-label-on-brand-1: rgb(255 255 255 / 1); --nt-label-on-brand-2: rgb(255 255 255 / 0.80); --nt-label-on-brand-3: rgb(255 255 255 / 0.60); --nt-separator: rgb(255 255 255 / 0.12); /* 1,32:1 ozdobny */ --nt-separator-strong: rgb(255 255 255 / 0.36); /* 3,22:1 granica nośna */ --nt-separator-on-brand: rgb(255 255 255 / 0.18); --nt-accent: var(--nt-c-gold-dim); --nt-accent-strong: var(--nt-c-gold-500); --nt-on-accent: var(--nt-c-gold-ink); /* 6,85:1 na gold-dim */ --nt-accent-ink-on-surface: var(--nt-c-gold-500); /* 8,71:1 — w ciemnym złoto MOŻE być tekstem */ --nt-link: var(--nt-c-teal-300); /* 9,88:1 na tle bazowym */ --nt-link-hover: #C0DCD5; --nt-label-brand: var(--nt-c-teal-300); --nt-focus-ring: var(--nt-c-teal-300); /* 8,82:1 min */ --nt-focus-ring-on-brand: var(--nt-c-cloud); --nt-status-success-ink: var(--nt-c-success-dim); --nt-status-danger-ink: var(--nt-c-danger-dim); /* w ciemnym motywie cień prawie nie istnieje — warstwę wyznacza jasność powierzchni i granica, nie rozmyta plama */ --nt-shadow-1: 0 1px 2px rgb(0 0 0 / 0.40); --nt-shadow-2: 0 1px 2px rgb(0 0 0 / 0.40), 0 8px 24px rgb(0 0 0 / 0.32); --nt-shadow-3: 0 2px 4px rgb(0 0 0 / 0.40), 0 20px 48px rgb(0 0 0 / 0.48); /* słupki: w ciemnym „uwolniona" jest JAŚNIEJSZA, bo wypełnienie na ciemnym tle czyta się jasnością. done/idle 5,66:1, idle wobec panelu 1,32:1 */ --nt-bar-done: #7FB8AC; --nt-bar-idle: #203732; --nt-material-bar: rgb(10 15 14 / 0.72); --nt-material-bar-opaque: var(--nt-c-ink-98); } } /* Jawny wybór motywu przez atrybut. Nie wymaga JS na stronie i nie zmienia domyślnego stanu — istnieje po to, żeby dało się zrobić przełącznik w aplikacji i żeby przegląd projektowy nie wymagał zmiany ustawień systemu. */ :root[data-theme="dark"] { color-scheme: dark; --nt-surface-base: var(--nt-c-ink-98); --nt-surface-elevated: var(--nt-c-ink-95); --nt-surface-sunken: var(--nt-c-ink-99); --nt-surface-brand: var(--nt-c-teal-750); --nt-surface-brand-deep: #0D2A26; --nt-surface-tint: #16302B; --nt-label-1: rgb(255 255 255 / 0.88); --nt-label-2: rgb(255 255 255 / 0.62); --nt-label-3: rgb(255 255 255 / 0.48); --nt-label-4: rgb(255 255 255 / 0.25); --nt-label-on-brand-1: rgb(255 255 255 / 1); --nt-label-on-brand-2: rgb(255 255 255 / 0.80); --nt-label-on-brand-3: rgb(255 255 255 / 0.60); --nt-separator: rgb(255 255 255 / 0.12); --nt-separator-strong: rgb(255 255 255 / 0.36); --nt-separator-on-brand: rgb(255 255 255 / 0.18); --nt-accent: var(--nt-c-gold-dim); --nt-accent-strong: var(--nt-c-gold-500); --nt-on-accent: var(--nt-c-gold-ink); --nt-accent-ink-on-surface: var(--nt-c-gold-500); --nt-link: var(--nt-c-teal-300); --nt-link-hover: #C0DCD5; --nt-label-brand: var(--nt-c-teal-300); --nt-focus-ring: var(--nt-c-teal-300); --nt-focus-ring-on-brand: var(--nt-c-cloud); --nt-status-success-ink: var(--nt-c-success-dim); --nt-status-danger-ink: var(--nt-c-danger-dim); --nt-shadow-1: 0 1px 2px rgb(0 0 0 / 0.40); --nt-shadow-2: 0 1px 2px rgb(0 0 0 / 0.40), 0 8px 24px rgb(0 0 0 / 0.32); --nt-shadow-3: 0 2px 4px rgb(0 0 0 / 0.40), 0 20px 48px rgb(0 0 0 / 0.48); --nt-bar-done: #7FB8AC; --nt-bar-idle: #203732; --nt-material-bar: rgb(10 15 14 / 0.72); --nt-material-bar-opaque: var(--nt-c-ink-98); } /* ============================================================================ 3. TYPOGRAFIA Skala jest SEMANTYCZNA: nazwa mówi, jaką rolę pełni tekst, nie ile ma pikseli. `--nt-text-body` zostanie ciałem tekstu także wtedy, gdy zmieni się jego rozmiar; `--nt-text-15` nie. Trzy rzeczy, których dzisiejsza strona nie robi, a które są w regułach: · ROZMIARY W REM, żeby ustawienie rozmiaru tekstu w przeglądarce działało (webowy odpowiednik Dynamic Type). Dziś wszystko jest w px; · TRACKING ZMIENNY Z ROZMIAREM. Duży tekst potrzebuje ciaśniejszego, mały luźniejszego. Dziś jedna wartość -0.02em obsługuje cały zakres od 23px do 60px, a 33 różne deklaracje `font-size` dzielą 9 wartości `letter-spacing` bez związku z rozmiarem; · PODŁOGA ROZMIARU. Zmierzone dziś: 68 deklaracji poniżej 16px, w tym 8,5px i 9,5px. Najmniejszy token w tej skali ma 12px, i jest jeden. ============================================================================ */ :root { --nt-font-display: 'Sora', system-ui, -apple-system, sans-serif; --nt-font-text: 'Inter', system-ui, -apple-system, sans-serif; --nt-font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* rozmiar / waga / tracking / interlinia — cztery liczby na poziom */ --nt-text-display-1: clamp(2.25rem, 1.35rem + 4.2vw, 3.75rem); /* 36 → 60px */ --nt-text-display-1-weight: 700; --nt-text-display-1-track: -0.03em; --nt-text-display-1-leading: 1.04; --nt-text-display-2: clamp(1.875rem, 1.3rem + 2.7vw, 2.75rem); /* 30 → 44px */ --nt-text-display-2-weight: 700; --nt-text-display-2-track: -0.025em; --nt-text-display-2-leading: 1.08; --nt-text-title-1: 1.75rem; /* 28px */ --nt-text-title-1-weight: 600; --nt-text-title-1-track: -0.02em; --nt-text-title-1-leading: 1.15; --nt-text-title-2: 1.375rem; /* 22px */ --nt-text-title-2-weight: 600; --nt-text-title-2-track: -0.015em; --nt-text-title-2-leading: 1.2; --nt-text-title-3: 1.25rem; /* 20px */ --nt-text-title-3-weight: 600; --nt-text-title-3-track: -0.01em; --nt-text-title-3-leading: 1.25; --nt-text-headline: 1.0625rem; /* 17px, ta sama wielkość co tekst, inna waga */ --nt-text-headline-weight: 600; --nt-text-headline-track: -0.01em; --nt-text-headline-leading: 1.4; --nt-text-lead: 1.1875rem; /* 19px */ --nt-text-lead-weight: 400; --nt-text-lead-track: -0.005em; --nt-text-lead-leading: 1.5; --nt-text-body: 1.0625rem; /* 17px — kotwica skali */ --nt-text-body-weight: 400; --nt-text-body-track: 0em; --nt-text-body-leading: 1.5; --nt-text-subhead: 0.9375rem; /* 15px */ --nt-text-subhead-weight: 400; --nt-text-subhead-track: 0em; --nt-text-subhead-leading: 1.47; --nt-text-footnote: 0.8125rem; /* 13px */ --nt-text-footnote-weight: 400; --nt-text-footnote-track: 0.002em; --nt-text-footnote-leading: 1.45; --nt-text-caption: 0.75rem; /* 12px — podłoga skali */ --nt-text-caption-weight: 500; --nt-text-caption-track: 0.005em; --nt-text-caption-leading: 1.35; /* etykieta sekcji: monospace, kapitaliki, luźny tracking. Osobny poziom, bo rządzi się inaczej niż reszta — wielkie litery potrzebują MNIEJ interlinii i WIĘCEJ świateł międzyliterowych. */ --nt-text-eyebrow: 0.8125rem; /* 13px */ --nt-text-eyebrow-weight: 500; --nt-text-eyebrow-track: 0.09em; --nt-text-eyebrow-leading: 1.2; /* długość wiersza. Zapisana w `ch`, więc próg „poniżej 75 znaków" jest spełniony z konstrukcji, a nie z oszacowania w pikselach. */ --nt-measure-prose: 68ch; --nt-measure-lead: 56ch; --nt-measure-headline: 24ch; /* nagłówek display łamie się inaczej niż proza */ } /* ============================================================================ 4. ODSTĘPY — siatka 4px Odstęp jest podstawowym narzędziem grupowania i sięgamy po niego PRZED obramowaniem i przed kartą. Zmierzone dziś: ze 213 wystąpień wartości px w `padding` / `margin` / `gap` w `styles.css` 126 nie jest wielokrotnością 4 — czyli 59 procent. To nie jest kwestia gustu: bez siatki dwa elementy, które mają wyglądać na wyrównane, wyrównane nie są. ============================================================================ */ :root { --nt-space-1: 0.25rem; /* 4px */ --nt-space-2: 0.5rem; /* 8px */ --nt-space-3: 0.75rem; /* 12px */ --nt-space-4: 1rem; /* 16px */ --nt-space-5: 1.5rem; /* 24px */ --nt-space-6: 2rem; /* 32px */ --nt-space-7: 2.5rem; /* 40px */ --nt-space-8: 3rem; /* 48px */ --nt-space-9: 4rem; /* 64px */ --nt-space-10: 5rem; /* 80px */ --nt-space-11: 6rem; /* 96px */ --nt-space-12: 8rem; /* 128px */ /* rytm makro: pion sekcji i szerokości kolumn */ --nt-section-y: clamp(var(--nt-space-9), 6vw, var(--nt-space-11)); --nt-gutter: var(--nt-space-5); --nt-width-content: 1120px; /* bez zmian wobec dzisiejszego --maxw */ --nt-width-prose: calc(var(--nt-measure-prose) + 2 * var(--nt-gutter)); /* minimalny cel dotyku. Obowiązuje także wtedy, gdy kontrolka jest mniejsza — dopełnia się ją obszarem niewidocznym. */ --nt-target-min: 44px; } /* ============================================================================ 5. PROMIENIE — skalują się z rozmiarem elementu Zagnieżdżony promień liczy się jako `wewnętrzny = zewnętrzny − padding`, a nie „ten sam wszędzie". Zmierzone dziś: 18 różnych deklaracji `border-radius`, w tym 2px, 3px, 5px, 7px, 9px, 11px i 14px, bez związku z wielkością elementu, który obejmują. ============================================================================ */ :root { --nt-radius-xs: 6px; --nt-radius-sm: 8px; --nt-radius-md: 12px; --nt-radius-lg: 16px; --nt-radius-xl: 20px; --nt-radius-2xl: 28px; --nt-radius-full: 999px; } /* ============================================================================ 6. RUCH — sprężyny, nie krzywe o stałym czasie `--nt-spring` to numeryczne przybliżenie sprężyny masa-tłumik (sztywność 500, tłumienie 32, masa 1) policzone do 24 punktów. Nie jest to krzywa dobrana na oko: `linear()` odtwarza fizyczny przebieg razem z minimalnym przestrzeleniem, którego cubic-bezier nie potrafi. GRANICA UCZCIWOŚCI: `linear()` daje ruch o WŁAŚCIWYM KSZTAŁCIE, ale nadal o stałym czasie trwania — nie jest przerywalny i nie przejmuje prędkości gestu. Na statycznej stronie marketingowej nie ma UI prowadzonego gestem, więc to wystarcza. W aplikacji, gdzie takie UI będzie (arkusze, przeciąganie, panele), potrzebna jest prawdziwa sprężyna w JS i ten token jej NIE zastąpi. Czas trwania jest tokenem właśnie dlatego, że w bloku `prefers-reduced-motion` niżej podmieniamy same tokeny. Komponent, który używa `--nt-duration-*`, spełnia tę regułę bez własnego kodu. ============================================================================ */ :root { --nt-duration-fast: 120ms; /* hover, press — poniżej progu 150ms */ --nt-duration-base: 240ms; --nt-duration-slow: 320ms; --nt-duration-spring: 530ms; /* czas osiadania sprężyny niżej */ --nt-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --nt-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --nt-spring: linear( 0.0000, 0.1038, 0.3190, 0.5476, 0.7403, 0.8802, 0.9691, 1.0172, 1.0370, 1.0396, 1.0335, 1.0244, 1.0156, 1.0085, 1.0035, 1.0005, 0.9990, 0.9984, 0.9985, 0.9988, 0.9991, 0.9995, 0.9997, 0.9999 ); /* skala reakcji na dotknięcie: natychmiast, nie po sekundzie */ --nt-press-scale: 0.97; } @media (prefers-reduced-motion: reduce) { :root { --nt-duration-fast: 1ms; --nt-duration-base: 1ms; --nt-duration-slow: 1ms; --nt-duration-spring: 1ms; --nt-press-scale: 1; } } /* Przezroczystość znaczy „warstwa nad treścią". Gdy użytkownik jej nie chce albo przeglądarka nie umie, warstwa zostaje — traci tylko rozmycie. */ @media (prefers-reduced-transparency: reduce) { :root { --nt-material-bar: var(--nt-material-bar-opaque); --nt-material-filter: none; } } @supports not (backdrop-filter: blur(1px)) { :root { --nt-material-bar: var(--nt-material-bar-opaque); --nt-material-filter: none; } }