/* ========================================================================== Nunito — hostowany lokalnie Wcześniej fonty przychodziły z CDN Google. To kosztowało podwójnie: arkusz z fonts.googleapis.com blokował pierwsze malowanie strony (pomiar przy zimnym cache: FCP 2128 ms), a każdy odwiedzający wysyłał swój adres IP do Google, zanim cokolwiek zobaczył — patrz README, sekcja RODO. Pliki to wersje ZMIENNE: jeden plik na krój obejmuje całą oś grubości 400–800, więc cztery pliki zastępują wcześniejsze cztery statyczne i przy okazji dają dostęp do wszystkich pośrednich grubości. Podział na latin i latin-ext jest celowy: polskie znaki diakrytyczne (ą ć ę ł ń ó ś ź ż) siedzą w latin-ext. Dzięki unicode-range przeglądarka pobiera oba podzbiory dla polskiego tekstu, ale kursywy — dopiero gdy naprawdę wystąpią. Nunito: licencja SIL Open Font License 1.1, która wprost zezwala na hosting na własnym serwerze. ========================================================================== */ /* latin-ext — kursywa */ @font-face { font-family: "Nunito"; font-style: italic; font-weight: 600 700; font-display: swap; src: url("../assets/fonts/nunito-latin-ext-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin — kursywa */ @font-face { font-family: "Nunito"; font-style: italic; font-weight: 600 700; font-display: swap; src: url("../assets/fonts/nunito-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../assets/fonts/nunito-latin-ext-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../assets/fonts/nunito-latin-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================== Fundacja Koocham — design tokens Wartości kolorów odczytane bezpośrednio z mockupu. WAŻNE — dwa warianty każdego koloru akcentowego: --c-* kolor marki, do dużych plam, ilustracji, teł, ramek --c-*-text przyciemniony, do TEKSTU i ikon na białym tle Powód: kolory marki nie przechodzą progu WCAG 2.1 AA (4.5:1) jako tekst na białym. Zmierzone kontrasty: zieleń 2.45:1, błękit 3.91:1, magenta 4.42:1. Warianty -text mają odpowiednio 5.67, 5.92 i 5.85. Nie używaj --c-green / --c-blue / --c-magenta do tekstu. ========================================================================== */ :root { /* --- Kolory marki ------------------------------------------------------ */ --c-magenta: #e5177e; --c-magenta-text: #c2126a; /* tekst i linki na białym — 5.85:1 */ --c-magenta-btn: #d3126f; /* tło przycisku pod białym tekstem — 5.14:1 */ --c-magenta-dark: #a30f59; --c-magenta-soft: #fde8f1; /* tło badge'y, hover */ --c-violet: #7b2fbf; /* 7.00:1 — bezpieczny też jako tekst */ --c-violet-dark: #5b1f96; --c-violet-soft: #f3ecfc; --c-blue: #0e88c7; --c-blue-text: #0a6a9b; /* 5.92:1 */ --c-blue-soft: #e4f3fb; --c-green: #7db61c; --c-green-text: #4a7209; /* 5.67:1 */ --c-green-soft: #eef7e0; /* --- Tekst i tła ------------------------------------------------------- */ --c-navy: #241c5b; /* nagłówki — 15.08:1 */ --c-ink: #4a4666; /* tekst akapitów — 8.90:1 */ --c-ink-light: #6f6a8a; /* podpisy, metadane — 5.32:1 */ --c-white: #ffffff; --c-cream: #fdf6ea; --c-lavender: #f3eefb; /* tło sekcji "Historia" i "W mediach" */ --c-line: #e8e3f2; /* delikatne linie i ramki */ /* Duże cyfry porządkowe sekcji (02, 04, 06) i kart (01, 02, 03). Czysto dekoracyjne — w HTML mają aria-hidden, więc niski kontrast jest tu dopuszczalny. */ --c-number: #c3b3e6; --c-number-blue: #9ecbe8; --c-number-pink: #f2a8cc; --c-number-green: #c3dd8a; /* --- Gradienty --------------------------------------------------------- */ --g-hero: linear-gradient(155deg, #6b25a8 0%, #9b2299 48%, #c9188e 100%); --g-help: linear-gradient(90deg, #d6178c 0%, #a3219f 55%, #7b2fbf 100%); --g-footer: linear-gradient(100deg, #2c1e63 0%, #4b1f86 62%, #7c2597 100%); --g-quote: linear-gradient(90deg, #d6178c 0%, #7b2fbf 100%); /* --- Typografia -------------------------------------------------------- Nunito: ciepła, zaokrąglona, pełne wsparcie polskich znaków (ą ć ę ł ń ó ś ź ż) w zakresie latin-ext. */ --f-sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --fw-regular: 400; --fw-medium: 600; --fw-bold: 700; --fw-black: 800; /* Skala typograficzna — clamp() skaluje płynnie między mobile a desktop */ --fs-hero: clamp(2.6rem, 1.6rem + 4.4vw, 4.6rem); --fs-h2: clamp(1.9rem, 1.35rem + 2.2vw, 2.85rem); --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem); --fs-stat: clamp(2.2rem, 1.7rem + 2vw, 3rem); --fs-lead: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-eyebrow: 0.8rem; --lh-tight: 1.12; --lh-heading: 1.2; --lh-body: 1.65; /* --- Odstępy ----------------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --section-y: clamp(3.5rem, 2rem + 6vw, 6rem); /* pion sekcji */ --container: 1200px; --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem); /* --- Promienie --------------------------------------------------------- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px; /* --- Cienie ------------------------------------------------------------ Barwione na fiolet zamiast czerni — cień neutralny wygląda brudno na kremowym i lawendowym tle. */ --sh-sm: 0 2px 6px rgba(36, 28, 91, 0.06); --sh-md: 0 6px 20px rgba(36, 28, 91, 0.08); --sh-lg: 0 14px 40px rgba(36, 28, 91, 0.10); --sh-xl: 0 24px 60px rgba(36, 28, 91, 0.13); /* --- Ruch --------------------------------------------------------------- */ --t-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1); --t-base: 240ms cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 480ms cubic-bezier(0.16, 1, 0.3, 1); /* --- Warstwy ------------------------------------------------------------ */ --z-header: 100; --z-menu: 200; --z-skip: 300; }