/** * Tokeny designu KIOE. Jedyne miejsce z wartościami kolorów, typografii i ruchu. * Komponenty odwołują się wyłącznie do zmiennych, nigdy do wartości wprost. * Źródło: 03-identyfikacja-wizualna.md */ :root { /* Kolory marki */ --kioe-granat: #0b1f3a; --kioe-stal: #2e5e8c; --kioe-zysk: #00c875; --kioe-bursztyn: #ffb020; --kioe-ink: #1a1e26; --kioe-tlo: #f4f6f9; --kioe-bialy: #ffffff; /* Warianty użytkowe zieleni. Zmierzone kontrasty (WCAG 2.1): #00C875 na bieli 2,21:1 (tło tak, tekst nie) #00A05E na bieli 3,39:1 (tylko tekst od 24 px, NIE dla tekstu podstawowego) #00874F na bieli 4,59:1 (AA dla tekstu podstawowego) #00C875 na granacie 7,49:1 (AA, i to z zapasem) */ --kioe-zysk-tekst: #00874f; /* zielony tekst na jasnym tle */ --kioe-zysk-tekst-duzy: #00a05e; /* wyłącznie nagłówki i liczby od 24 px */ --kioe-zysk-na-granacie: #00c875; /* zielony tekst na ciemnym tle */ --kioe-zysk-jasny: #e6f9f0; --kioe-granat-80: rgba(11, 31, 58, 0.8); --kioe-granat-65: rgba(11, 31, 58, 0.65); --kioe-linia: rgba(11, 31, 58, 0.12); /* Role semantyczne */ --kioe-tekst: var(--kioe-ink); --kioe-tekst-drugi: #55606f; --kioe-tlo-sekcji: var(--kioe-bialy); --kioe-tlo-alt: var(--kioe-tlo); --kioe-tlo-kontrast: var(--kioe-granat); /* CTA. Napis na zielonym przycisku MUSI być granatowy. Biel na #00C875 daje 2,21:1 i nie przechodzi AA, granat daje 7,49:1. */ --kioe-cta-tlo: var(--kioe-zysk); --kioe-cta-tlo-hover: #00b268; --kioe-cta-tekst: var(--kioe-granat); /* Bursztyn na bieli to 1,83:1, więc nigdy jako tekst ani jako samo tło pod tekst. Dozwolone: obwódka pigułki, tło z granatowym napisem (9,03:1), akcent na granacie. */ --kioe-bursztyn-tekst-na-nim: var(--kioe-granat); /* Typografia */ --kioe-font-naglowki: "Archivo", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; --kioe-font-tekst: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; --kioe-h1: clamp(2rem, 5vw, 3.5rem); --kioe-h2: clamp(1.5rem, 3.5vw, 2.25rem); --kioe-h3: 1.25rem; --kioe-body: 1.0625rem; --kioe-caption: 0.875rem; --kioe-liczba-hero: clamp(2.5rem, 7vw, 4rem); --kioe-line-tight: 1.15; --kioe-line-normal: 1.6; /* Przestrzeń */ --kioe-space-xs: 0.5rem; --kioe-space-s: 1rem; --kioe-space-m: 1.75rem; --kioe-space-l: 3rem; --kioe-space-xl: 5rem; --kioe-sekcja-y: clamp(3rem, 8vw, 6rem); --kioe-max-szerokosc: 1200px; /* Kształt i cień */ --kioe-radius-s: 6px; --kioe-radius-m: 12px; --kioe-radius-l: 20px; --kioe-cien-karta: 0 2px 8px rgba(11, 31, 58, 0.06), 0 8px 24px rgba(11, 31, 58, 0.08); --kioe-cien-cta: 0 4px 16px rgba(0, 200, 117, 0.28); /* Ruch */ --kioe-czas-szybki: 160ms; --kioe-czas-sredni: 320ms; --kioe-czas-wolny: 640ms; --kioe-easing: cubic-bezier(0.22, 0.61, 0.36, 1); } /* Liczby w tabelach i licznikach mają równą szerokość, żeby nie skakały przy animacji */ .kioe-liczba { font-family: var(--kioe-font-naglowki); font-weight: 800; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Reveal na scroll. Nigdy nie stosować powyżej linii załamania: element LCP nie może czekać na JavaScript, bo to psuje wynik wydajności. Ukrycie działa TYLKO gdy JS wystartował i dodał klasę .kioe-js na . Bez tego warunku wyłączony albo niedoładowany JavaScript zostawia puste sekcje, bo nikt nie doda .is-shown. */ .kioe-js .kioe-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--kioe-czas-wolny) var(--kioe-easing), transform var(--kioe-czas-wolny) var(--kioe-easing); } .kioe-js .kioe-reveal.is-shown { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .kioe-js .kioe-reveal, .kioe-js .kioe-reveal.is-shown { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }