/* ========================================================================== DataDrive: globalne style motywu, podzielone na pliki -------------------------------------------------------------------------- Motyw wczytuje wszystkie pliki assets/css/NN-*.css po kolei według numeru (functions.php, edytor bloków i podgląd robią to samo). Nowy plik z numerem wczyta się sam. Kolejność ma znaczenie: późniejszy plik wygrywa przy równej wadze selektora, dlatego 17 i 18 są na końcu (19 dotyczy tylko Complianz, 20–24 to wygląd DataDrive i nadpisują resztę). Tokeny kolorów i krój pisma (IBM Plex Sans) to wybrany kierunek wyglądu B (właściciel 13.10.2026). Zasady (obowiązują każdą podstronę): 1. Podstrony składają się wyłącznie z komponentów opisanych w tych plikach. Wzory HTML każdego komponentu: pages/_komponenty.html. 2. Kolory, odstępy, promienie, czcionki i cienie tylko z tokenów (ten plik). Zmiana tokenu zmienia całą stronę. Nie wpisuj wartości na sztywno. 3. Żadnych stylów inline w treści i żadnych reguł „dla jednej strony”. Brakujący element dodaj jako komponent do właściwego pliku i opisz w bibliotece. 4. Tła sekcji wyłącznie jasne; granat tylko jako akcent (karta, pas, przycisk). Pliki 01 tokeny 10 podstrony (page-hero, okruszki, listy) 02 baza i układ 11 stopka 03 elementy (przyciski…) 12 wiedza i blog 04 karty i kafelki 13 formularz i kontakt 05 media (zrzuty, lightbox, modyfikatory .media: tall, film, wide) 14 sekcje treści (karty, kroki, FAQ…) 06 nagłówek i menu 16 animacje 07 strona główna 17 dotyk i czytelność (WCAG 2.2) 08 urządzenia i aplikacje (karty produktów, aplikacja mobilna, wyróżnik) 18 najwęższe ekrany 09 liczby i CTA 19 baner i polityka cookies (Complianz) 20–24 wygląd DataDrive (kierunek B, ładowane ostatnie): 20 baza, elementy, kafelki; 21 nagłówek i menu; 22 pierwszy ekran i sekcje; 23 podstrony i stopka; 24 ruch, menu mobilne, tło Numeru 15 nie ma (we wzorze była pod nim mapa, której ten motyw nie ma). Poza numerami: edytor.css (podgląd w edytorze WordPressa) i panel-dd.css (Panel DD). ========================================================================== */ /* Tokeny wyglądu DataDrive (kierunek B, właściciel 13.10.2026). Barwy logo: #0086D5 → #009E8E → #01C41D. Opis kierunku: docs/zasady.md, „Wygląd i kod”. Wartości przeniesione z makiety projekty/kierunki/kierunek-b.css. */ :root{ /* Barwy logo (zmierzone z logo/datadrive-logo.png). Tylko tam, gdzie nie niosą drobnego tekstu */ --dd-blue:#0086d5; /* niebieski z logo: ikony, duże cyfry. 3,9:1 na białym, 3,6:1 na szarym */ --dd-teal:#009e8e; /* morski ze środka logo. 3,3:1 na białym */ --dd-green:#01c41d; /* zielony z logo: tylko ozdoba (linia, punkty list). 2,4:1 na białym */ /* Te same barwy trochę ciemniej: duży tekst i cyfry, min. 3:1 także na szarym tle */ --dd-teal-600:#009686; /* 3,4:1 na szarym */ --dd-green-600:#019f17; /* 3,5:1 na białym, 3,2:1 na szarym */ /* Te same barwy ciemno: tło pod biały napis (min. 4,5:1) i kolor tekstu */ --dd-blue-700:#006fb3; /* biały napis 5,4:1; jako tekst 5,4:1 na białym, 4,9:1 na szarym */ --dd-teal-700:#007f74; /* biały napis 4,9:1 */ --dd-green-700:#01840f; /* biały napis 4,9:1 */ /* Jeszcze ciemniej: po najechaniu */ --dd-blue-800:#005c96; /* biały napis 7,1:1 */ --dd-teal-800:#00695f; /* biały napis 6,6:1 */ --dd-green-800:#016e0c; /* biały napis 6,5:1 */ --dd-blue-50:#eaf4fb; /* tło po najechaniu na kartę i przycisk z ramką */ /* Cztery kroki przejścia z logo dla dużych cyfr (kroki, liczby): każdy min. 3,2:1 na szarym tle */ --dd-ramp-1:var(--dd-blue); --dd-ramp-2:#0094a6; --dd-ramp-3:#019a66; --dd-ramp-4:var(--dd-green-600); /* Nazwy z motywu wzorcowego z nowymi wartościami */ --navy:#051b2b; --navy-2:#072438; /* granat z niebieskiego logo: pasek górny, stopka. Biały napis 15,9:1 */ --blue-900:#004a7a; --blue-700:var(--dd-blue-800); /* po najechaniu, obwódka fokusu */ --blue:var(--dd-blue-700); /* linki, „więcej”, przycisk z ramką */ --blue-500:var(--dd-blue); --sky:#7ccbf7; /* jasny niebieski na granacie: 8,9:1 */ --sky-2:#a9dcf9; --sky-3:#c3d5e3; --pale:#f3f6f8; /* jasne sekcje: neutralny chłodny szary */ --pale-2:#f8fafb; --pale-3:#e3e9ee; /* Role kolorów */ --ink:#0e1e2b; /* nagłówki: 17,0:1 na białym, 15,6:1 na szarym */ --text:#33434f; /* tekst: 10,2:1 na białym, 9,4:1 na szarym */ --muted:#586876; /* opisy: 5,7:1 na białym, 5,3:1 na szarym */ --akcent-niebieski:var(--blue); --line:#d6dde3; --line-strong:#b5c0ca; --line-kontrast:#75838f; /* ramki, które muszą być widoczne (3,9:1): menu rozwijane, ramka „do dostarczenia” */ --on-dark:#d3dee7; /* tekst na granacie: 11,7:1 */ --on-dark-2:#a3b4c2; /* drobny tekst na granacie: 7,5:1 */ --on-dark-line:rgba(255,255,255,.16); --glass-soft:rgba(255,255,255,.08); --glass:rgba(255,255,255,.14); --glass-strong:rgba(255,255,255,.2); --glass-line:rgba(255,255,255,.35); --glass-line-strong:rgba(255,255,255,.55); --on-accent-2:#fff; --header-bg:var(--white); --header-line:var(--line); --flag-ring:rgba(14,30,43,.2); --backdrop:rgba(7,36,56,.84); --tint-blue:linear-gradient(135deg,rgba(0,134,213,.12),rgba(0,134,213,.02)); --shade-photo:linear-gradient(180deg,rgba(7,36,56,0) 45%,rgba(7,36,56,.55) 70%,rgba(5,27,43,.92) 100%); --focus:var(--blue-700); /* 7,1:1 na białym */ --placeholder:#63717d; /* 5,0:1 na białym */ --check-ring:rgba(14,30,43,.35); --ok:var(--dd-green-600); /* znak „jest” w tabelach funkcji: zielony z logo */ --map-pin:var(--dd-blue); /* Przejścia w barwach logo */ --grad-logo:linear-gradient(90deg,var(--dd-blue) 0%,var(--dd-teal) 50%,var(--dd-green) 100%); /* dokładnie jak logo: linia pod nagłówkiem */ --grad-mocny:linear-gradient(90deg,var(--dd-blue-700) 0%,var(--dd-teal-700) 55%,var(--dd-green-700) 100%); /* tło pod białym napisem: przycisk główny. Min. 4,9:1 na całej długości */ --grad-mocny-hover:linear-gradient(90deg,var(--dd-blue-800) 0%,var(--dd-teal-800) 55%,var(--dd-green-800) 100%); /* to samo po najechaniu. Min. 6,5:1 */ --grad:var(--grad-mocny); --grad-solid:linear-gradient(135deg,var(--dd-blue-700) 0%,var(--dd-teal-700) 100%); --grad-text:linear-gradient(90deg,var(--dd-blue) 0%,var(--dd-teal-600) 50%,var(--dd-green-600) 100%); /* wyróżnione słowa w nagłówkach: min. 3,5:1 na białym, 3,2:1 na szarym (duży tekst) */ --grad-navy:linear-gradient(0deg,var(--navy-2),var(--navy-2)); --grad-cta:linear-gradient(100deg,var(--dd-blue-700) 0%,var(--dd-teal-700) 55%,var(--dd-green-700) 100%); /* blok kontaktowy: biały tekst min. 4,9:1 */ /* Cienie: brak */ --shadow-pop:none; --shadow-item:none; --shadow-lift:none; --shadow-btn:none; --spot:transparent; --spot-line:var(--blue); /* Promienie: 4–8 px */ --r-xl:8px; --r-lg:8px; --r:6px; --r-md:6px; --r-sm:4px; --r-xs:4px; --r-2xs:4px; --r-pill:4px; /* Typografia: IBM Plex Sans, nagłówki 600–700, tekst 400 */ --font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --fs-body:16.5px; --fs-h1:clamp(2.25rem,4.4vw,3.25rem); --fs-h1-page:clamp(2rem,3.6vw,3rem); --fs-h2:clamp(1.7rem,3vw,2.5rem); --fs-h3:1.125rem; --fs-lead:1.0625rem; /* Odstępy i układ */ --container:1240px; --section:clamp(56px,7vw,96px); --gap-lg:clamp(32px,4.5vw,64px); --head-gap:clamp(32px,4vw,48px); --header:84px; /* Ruch: bez unoszenia */ --lift:none; /* Tokeny bazy komponentów bez zmian względem motywu wzorcowego (używane przez pliki 02–19) */ --white:#fff; --blad:#b42318; /* komunikat błędu (formularz) */ --blad-tlo:#fef3f2; --photo-bg:#d9d9d9; /* tło zdjęć produktów (packshoty na szarym tle i PNG bez tła wyglądają tak samo) */ --fade-white-r:linear-gradient(90deg,var(--white) 0%,rgba(255,255,255,0) 35%); /* zdjęcie przechodzące w białe tło (z lewej) */ --fade-white-b:linear-gradient(0deg,var(--white) 0%,rgba(255,255,255,0) 40%); /* to samo od dołu (telefon) */ --no:#dc2626; /* czerwony: brak */ --no-bg:#fee2e2; /* tło znaku „brak” */ --ico-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 1 0 20a10 10 0 0 1 0-20zM14.3 6.3l-5.8 5.8-2.8-2.8-1.4 1.4 4.2 4.2 7.2-7.2z'/%3E%3C/svg%3E"); --ico-no:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); --fs-text:1rem; /* tekst ciągły w sekcjach i artykułach */ --fs-sm:.92rem; --fs-xs:.8rem; --fs-min:.75rem; /* najmniejszy dopuszczalny tekst (12 px) */ --gutter:clamp(16px,4vw,32px); --gap:16px; --ease:cubic-bezier(.2,.7,.2,1); } @media (max-width:900px){:root{--header:72px}} @media (max-width:600px){:root{--fs-body:16px}}