/* ============================================================ AI4Buyers — tokeny marki JEDYNE źródło wartości. Nie wpisuj hexów ani rozmiarów w kodzie. Reguły użycia i zmierzony kontrast: .agents/brand.md Paleta pochodzi z projektu zleceniodawcy (design/base44/). Dwa odcienie z tamtej palety są skorygowane, bo nie przechodziły progu WCAG AA — powody przy wartościach. UWAGA NA DWA ZNACZENIA SŁOWA „CIEMNE". Token z przyrostkiem `-ciemne` (--ai-text-ciemne, --ai-rose-ciemne, --ai-bg-ciemne) znaczy „na granatowym PASIE SEKCJI" i pochodzi sprzed motywu ciemnego. Motyw ciemny to co innego: blok `[data-motyw="ciemny"]` na końcu tego pliku. Pasy granatowe istnieją w obu motywach, więc obie rzeczy żyją obok siebie i żadnej nie da się usunąć bez przepisania drugiej. ============================================================ */ :root{ /* --- wartości źródłowe --- Trzy kolory, które muszą być dostępne również WEWNĄTRZ pasów sekcji (css/95-pasy.css). Pas przedefiniowuje tokeny semantyczne pod swoje tło, więc na granacie „--ai-magenta" nie jest już karminem. Te trzy są stałe i nigdy nie są przedefiniowywane — tylko do nich wolno się odwołać, gdy potrzebna jest wartość niezależna od pasa. */ --ai-biel: #FFFFFF; --ai-karmin: #C73778; /* karmin z projektu zleceniodawcy */ --ai-karmin-ciemny: #9E2A5C; /* --- powierzchnie --- */ --ai-bg: var(--ai-biel); /* tło strony */ --ai-bg-alt: #F8FAFC; /* zimna biel — przekładki sekcji */ --ai-bg-ciemne: #242964; /* sekcje granatowe */ --ai-bg-ciemne-gl: #1A1E4D; /* głębszy granat — stopka, dolna część gradientu */ --ai-card: var(--ai-biel); /* karty */ --ai-card-alt: #F1F5F9; /* karty drugorzędne */ /* --- akcenty --- --ai-magenta jest kolorem MARKI, nie kolorem tekstu: plamy, logo, obramowania, wypełnienia przycisków. Tekst akcentowy bierze --ai-rose. ŻADEN odcień karminu nie jest tekstem na granacie. Nie jest to kwestia doboru, tylko sprzeczności: im ciemniejszy karmin, tym lepiej czyta się na bieli i tym gorzej na granacie (#C73778 daje tam 2,69:1, a każdy ciemniejszy jeszcze mniej). Na sekcjach granatowych akcentem jest --ai-rose-ciemne. */ --ai-magenta: var(--ai-karmin); /* karmin z projektu zleceniodawcy — 4,95:1 na bieli */ --ai-rose: #B3336E; /* ten sam odcień, przyciemniony — 5,81:1 na bieli */ --ai-rose-hover: var(--ai-karmin-ciemny); /* :hover wypełnionego przycisku — 7,14:1 */ --ai-rose-ciemne: #F4B3CF; /* akcent WYŁĄCZNIE na sekcjach granatowych — 7,74:1 */ /* --- tekst --- */ --ai-text: #2F3648; /* akapity — 12,05:1 na bieli */ --ai-text-mute: #5B6472; /* tekst pomocniczy — 5,98:1. Zastępuje #9CA3AF z projektu (2,54:1 — nieczytelny). */ --ai-heading: #1A1E4D; /* nagłówki — 15,71:1 */ --ai-on-accent: var(--ai-biel); /* tekst na karminowym przycisku — 5,81:1 */ --ai-text-ciemne: #D5D9F0; /* akapity na sekcjach granatowych — 9,52:1 */ --ai-heading-ciemne:var(--ai-biel); /* nagłówki na sekcjach granatowych — 13,32:1 */ /* --- linie --- --ai-line to DEKORACJA (1,1:1). Jeśli obramowanie niesie znaczenie (fokus, błąd, zaznaczenie) — użyj --ai-line-ui, min. 3:1. */ --ai-line: rgba(26,30,77,.10); --ai-line-strong: rgba(26,30,77,.14); --ai-line-ui: #7C8798; /* 3,64:1 na bieli */ --ai-line-ciemne: rgba(255,255,255,.18); /* dekoracja na sekcjach granatowych */ --ai-focus: var(--ai-rose); --ai-focus-ciemne: var(--ai-rose-ciemne); /* --- stany --- */ --ai-tint: rgba(199,55,120,.07); /* tło wyróżnień */ /* --- typografia --- */ --ai-font-display: 'Plus Jakarta Sans', system-ui, sans-serif; --ai-font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --ai-size-h1: clamp(2.1rem, 1.15rem + 3.5vw, 4rem); --ai-size-h2: clamp(1.6rem, 1.05rem + 2.1vw, 2.55rem); --ai-size-h3: 1.1875rem; --ai-size-lead: 1.1875rem; /* zdanie wprowadzające sekcji */ --ai-size-body: 1rem; /* 16px — 17px było kompensacją ciemnego tła */ --ai-size-small: .9375rem; --ai-size-label: .8125rem; /* wordmark w hero — „AI 4 / BUYERS" na dwie linie, jak w projekcie */ --ai-size-wordmark: clamp(3.2rem, 1.2rem + 8vw, 8rem); --ai-lh-tight: 1.1; --ai-lh-body: 1.65; --ai-ls-label: .06em; /* rozstrzelenie wersalikowych etykiet */ /* Długość wiersza. Powyżej ~75 znaków oko gubi początek następnej linii. */ --ai-miara: 64ch; /* ok. 74 znaki w Plus Jakarta Sans */ --ai-miara-waska: 52ch; /* tekst wyśrodkowany czyta się gorzej, więc krócej */ /* WERSALIKI TYLKO NA ETYKIETY — najwyżej trzy słowa. Zdanie złożone z wersalików czyta się o kilkanaście procent wolniej, bo znika linia górna wyrazu, po której rozpoznajemy jego kształt. */ /* --- rytm --- */ --ai-s1: 8px; --ai-s2: 12px; --ai-s3: 18px; --ai-s4: 24px; --ai-s5: 32px; --ai-s6: 48px; --ai-s7: clamp(56px, 7vw, 84px); /* odstęp między sekcjami */ /* --- kolumna --- */ --ai-col: 1240px; /* maksymalna szerokość treści */ --ai-pad: clamp(20px, 5vw, 44px); /* margines boczny kolumny */ --ai-pasek: 64px; /* wysokość paska nawigacji */ /* --- promienie --- */ --ai-r-sm: 4px; /* przyciski */ --ai-r-md: 8px; /* role, drobne karty */ --ai-r-lg: 12px; /* karty treści */ --ai-r-xl: 14px; /* karty materiałów */ /* --- cienie --- Na jasnym tle karty odcinają się cieniem, nie zmianą tła. Na ciemnym nie było takiej potrzeby, więc tego tokenu wcześniej nie było. */ --ai-cien: 0 1px 2px rgba(26,30,77,.06), 0 4px 12px rgba(26,30,77,.05); --ai-cien-mocny: 0 2px 4px rgba(26,30,77,.08), 0 12px 28px rgba(26,30,77,.10); /* --- ruch --- */ --ai-ease: cubic-bezier(.22,.7,.3,1); --ai-fast: .18s; } /* ============================================================ MOTYW CIEMNY Przedefiniowuje wyłącznie kolory. Rytm, typografia i promienie zostają — motyw zmienia oświetlenie sceny, nie jej budowę. Podstawą jest granat marki, nie neutralny grafit: strona ma dalej wyglądać na swoją. Tło `#12152F` jest CIEMNIEJSZE od granatu sekcji `#242964`, więc pas granatowy nadal odcina się od strony — tyle że teraz jako jaśniejszy blok, nie ciemniejszy. Rytm sekcji zostaje zachowany, zmienia się kierunek. Kontrasty zmierzone względem tła `#12152F`: biel 17,89:1 --ai-heading (biel) 17,89:1 --ai-text #C3C9E8 10,94:1 --ai-text-mute 7,19:1 --ai-rose #F4B3CF 10,39:1 --ai-magenta 7,83:1 Karmin #C73778 daje tu 3,62:1 — dlatego NIE jest tekstem w tym motywie, dokładnie z tego samego powodu, dla którego nie jest tekstem na granacie. ============================================================ */ [data-motyw="ciemny"]{ /* --- powierzchnie --- Cztery poziomy zamiast trzech: strona, przekładka, karta, pas. */ --ai-bg: #12152F; --ai-bg-alt: #191D40; /* przekładka — odpowiednik zimnej bieli */ --ai-card: #1B1F45; /* karta odcina się jaśniejszym tłem… */ --ai-card-alt: #232852; /* --ai-bg-ciemne i --ai-bg-ciemne-gl zostają bez zmian: to kolory PASA, a pas ma być rozpoznawalny w obu motywach. */ /* --- tekst --- Nagłówki bielą, akapity złamaną bielą o granatowym podtonie. Czysta biel w długim akapicie na ciemnym tle męczy — stąd #C3C9E8. */ --ai-heading: var(--ai-biel); --ai-text: #C3C9E8; --ai-text-mute: #9AA3C8; /* --- akcenty --- Ta sama zasada co na pasie granatowym: im ciemniejszy karmin, tym lepiej czyta się na bieli i tym gorzej tutaj. Akcentem jest róż. */ --ai-rose: var(--ai-rose-ciemne); /* 10,39:1 */ /* Akcent zmienił jasność, więc tekst NA akcencie musi zmienić ją w drugą stronę. Bez tego biały napis na jasnoróżowym przycisku miałby 1,7:1. Granat na różu daje 9,12:1. Ten jeden token naprawia wszystkie powierzchnie akcentowe naraz: przycisk, link pomijania, ikonę LinkedIn, przełącznik motywu. */ --ai-on-accent: var(--ai-bg-ciemne-gl); /* 9,12:1 */ --ai-magenta: #EC8FB8; /* 7,83:1 — wordmark, sygnet, „4" w logo */ --ai-focus: var(--ai-rose-ciemne); /* --- linie --- Granatowa linia na granatowym tle jest niewidoczna; linie rozjaśniają. */ --ai-line: rgba(255,255,255,.12); --ai-line-strong: rgba(255,255,255,.18); --ai-line-ui: rgba(255,255,255,.55); --ai-tint: rgba(244,179,207,.08); /* --- cienie --- Cień na ciemnym tle nie istnieje wizualnie: nie ma czego przyciemnić. Rolę „karta stoi wyżej niż tło" przejmuje jaśniejsze --ai-card i obramowanie. Zostawiamy delikatny cień pod duże elementy, żeby nie straciły osadzenia. */ --ai-cien: 0 1px 2px rgba(0,0,0,.35); --ai-cien-mocny: 0 2px 6px rgba(0,0,0,.45), 0 14px 32px rgba(0,0,0,.35); } @media (prefers-reduced-motion: reduce){ :root{ --ai-fast: .001ms; } }