/* ========================================================================== QS GPS / PractiQS: 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). 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 15 mapa instalatorów 07 strona główna 16 animacje 08 urządzenia i aplikacje 17 dotyk i czytelność (WCAG 2.2) 09 liczby i CTA 18 najwęższe ekrany 19 baner i polityka cookies (Complianz) ========================================================================== */ /* Tokeny */ :root{ /* Kolory: tylko odcienie niebieskiego */ --navy:#0a1020; --navy-2:#0b1b3f; --blue-900:#1e3a8a; --blue-700:#1d4ed8; --blue:#2563eb; --blue-500:#3b82f6; --sky:#60a5fa; --sky-2:#93c5fd; --sky-3:#bfdbfe; --pale:#eff6ff; --pale-2:#f4f8ff; --pale-3:#dbeafe; --white:#fff; /* Role kolorów */ --ink:var(--navy-2); /* nagłówki */ --text:#34456a; /* tekst */ --muted:#5a6d93; /* opisy, podpisy */ --akcent-niebieski:var(--blue); /* akcent kart działów (Kontakt) */ --blad:#b42318; /* komunikat błędu (formularz) */ --blad-tlo:#fef3f2; --line:var(--pale-3); /* linie i ramki kart */ --line-strong:var(--sky-3); /* ramki wyróżnione */ --on-dark:var(--pale-3); /* tekst na granacie */ --on-dark-line:rgba(147,197,253,.16); --photo-bg:#d9d9d9; /* tło zdjęć produktów (packshoty na szarym tle i PNG bez tła wyglądają tak samo) */ /* Półprzezroczyste: na niebieskim, granacie i zdjęciach */ --glass-soft:rgba(255,255,255,.1); /* tło kafelków na niebieskiej planszy */ --glass:rgba(255,255,255,.16); /* tło ikon na niebieskim i na zdjęciach */ --glass-strong:rgba(255,255,255,.2); /* tło ikon w wyróżnionej karcie, ramki kafelków */ --glass-line:rgba(255,255,255,.3); /* ramki na zdjęciach */ --glass-line-strong:rgba(255,255,255,.45); /* ramka przycisku języka */ --on-accent-2:rgba(255,255,255,.85); /* opisy na niebieskim */ --header-bg:rgba(255,255,255,.78); /* nagłówek strony (z rozmyciem tła) */ --header-line:rgba(219,234,254,.95); /* linia pod nagłówkiem (zawsze widoczna) */ --flag-ring:rgba(11,27,63,.15); /* obwódka flag */ --backdrop:rgba(11,27,63,.82); /* tło pod oknem powiększenia */ --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) */ --tint-blue:linear-gradient(135deg,rgba(37,99,235,.15),rgba(96,165,250,.05)); /* lekki niebieski odcień zdjęcia */ --shade-photo:linear-gradient(180deg,rgba(11,27,63,0) 45%,rgba(11,27,63,.55) 70%,rgba(10,16,32,.92) 100%); /* przyciemnienie zdjęcia pod napisem */ /* Stan: jest / nie ma (tabele funkcji, zalety i wady) */ --focus:var(--blue-700); /* obwódka fokusu (klawiatura): 6,7:1 na białym */ --placeholder:#667597; /* podpowiedź w polu formularza: jaśniej niż tekst, 4,6:1 na białym */ --check-ring:rgba(11,27,63,.3); /* obwódka pola wyboru w formularzu */ --ok:#16a34a; /* zielony: funkcja jest */ --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"); /* Mapa instalatorów */ --map-land:var(--sky-3); /* województwa */ --map-land-hover:var(--sky-2); --map-border:var(--white); /* granice województw */ --map-pin:var(--blue); /* instalator */ --map-hq:var(--navy-2); /* siedziba */ /* Gradienty */ --grad:linear-gradient(135deg,var(--blue) 0%,var(--sky) 100%); /* przyciski, ikony */ --grad-mocny:linear-gradient(135deg,var(--blue-700) 0%,var(--blue) 100%); /* tło pod białym tekstem (przyciski, numery): kontrast min. 5,2:1 (WCAG AA) */ --grad-solid:linear-gradient(135deg,var(--blue) 0%,var(--blue-500) 100%); /* duże niebieskie plansze */ --grad-text:linear-gradient(90deg,var(--blue) 0%,var(--blue-500) 100%); /* wyróżnione słowa w nagłówkach */ --grad-navy:linear-gradient(160deg,var(--navy-2) 0%,var(--navy) 100%); /* granatowe akcenty */ --grad-cta:linear-gradient(135deg,var(--blue) 0%,var(--blue-900) 100%); /* Cienie: tylko dla elementów wyskakujących */ --shadow-pop:0 18px 40px -26px rgba(11,27,63,.32); --shadow-item:0 6px 18px -8px rgba(11,27,63,.22); --shadow-lift:0 30px 60px -30px rgba(37,99,235,.45),0 12px 24px -18px rgba(11,27,63,.2); /* karta uniesiona po najechaniu */ --shadow-btn:0 12px 26px -12px rgba(37,99,235,.7); /* poświata niebieskiego przycisku */ --spot:rgba(96,165,250,.16); /* światło za kursorem na karcie */ --spot-line:var(--blue); /* ramka podświetlona za kursorem */ /* Promienie */ --r-xl:32px; --r-lg:28px; --r:20px; --r-md:16px; --r-sm:14px; --r-xs:12px; --r-2xs:10px; --r-pill:999px; /* Typografia */ --font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --fs-body:16.5px; --fs-h1:clamp(2.35rem,6.2vw,4.9rem); --fs-h1-page:clamp(2.1rem,4.6vw,3.6rem); --fs-h2:clamp(1.85rem,3.8vw,3rem); --fs-h3:1.15rem; --fs-lead:1.08rem; --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) */ /* Odstępy i układ */ --container:1360px; --gutter:clamp(16px,4vw,32px); --section:clamp(72px,9vw,128px); --gap:16px; --gap-lg:clamp(32px,5vw,80px); --head-gap:clamp(36px,5vw,60px); --header:88px; /* Ruch */ --ease:cubic-bezier(.2,.7,.2,1); --lift:translateY(-3px); } @media (max-width:900px){:root{--header:76px}} @media (max-width:600px){:root{--fs-body:16px}}