/* ============================================================ Para dla pary — kierunek „Przenikanie — wspólna część" (p2) Colour system: TRANSLUCENT LAYERED — OVERLAPPING FIELDS ------------------------------------------------------------ Dwa miękkie akcenty — przykurzony błękit (accent-a) i przygaszony śliwkowy (accent-b) — których NAKŁADANIE daje trzeci, widoczny ton (accent-strong: głęboki indygo-śliwka = „wspólna część"). Tu jednak warstwy nie chowają się za białymi kartami: są DUŻE, PÓŁPRZEZROCZYSTE i WIDOCZNE, a treść mieszka w soczewce przecięcia. Mieszanki budujemy przez rgba/color-mix; wszystkie wartości lite trzymane w tokenach. Wszystkie pary tekst/UI: WCAG-AA (>= 4.5:1). ============================================================ */ :root{ /* — 9 wymaganych slotów (wartości lite) — */ --bg: #ECE7F3; /* przykurzona liliowa baza — NIE biel */ --surface: #F7F4FB; /* pole „pod soczewką" — bardzo jasny liliowy */ --text: #221F30; /* atramentowy indygo-grafit */ --text-muted: #4E4965; /* przygaszony fiolet-szary */ --accent-a: #5E79A6; /* przykurzony błękit — jedna perspektywa */ --accent-b: #95709F; /* przygaszony śliwkowy — druga perspektywa */ --accent-strong: #45386A; /* nakładanie obu = trzeci ton (wspólna część) */ --accent-soft: #E3DCEF; /* mglisty liliowy — tło wspólnej strefy */ --on-accent: #F7F4FB; /* tekst na accent-strong */ /* — przezroczyste warstwy: RDZEŃ kierunku, mają być widoczne — */ --layer-a: rgba(94, 121, 166, 0.55); /* błękitne pole */ --layer-b: rgba(149, 112, 159, 0.55); /* śliwkowe pole */ --layer-a-mid: rgba(94, 121, 166, 0.30); --layer-b-mid: rgba(149, 112, 159, 0.30); --layer-a-faint: rgba(94, 121, 166, 0.14); --layer-b-faint: rgba(149, 112, 159, 0.14); /* soczewka = obie warstwy widziane przez siebie (multiply-podobny ton) */ --lens: color-mix(in srgb, var(--accent-a) 50%, var(--accent-b) 50%); --lens-wash: color-mix(in srgb, var(--accent-soft) 62%, var(--lens) 38%); --lens-line: color-mix(in srgb, var(--accent-strong) 60%, transparent); --on-lens: #F7F4FB; /* tekst na pełnej soczewce */ /* — kreski / kontury soczewek — */ --line-a: color-mix(in srgb, var(--accent-a) 72%, transparent); --line-b: color-mix(in srgb, var(--accent-b) 72%, transparent); --hairline: rgba(69, 56, 106, 0.18); /* — promienie — */ --r-lens: 50%; --r-card: 20px; --r-pill: 999px; /* — cienie (rozproszone światło) — */ --shadow-soft: 0 16px 44px -28px rgba(69, 56, 106, 0.40); --shadow-lift: 0 30px 80px -38px rgba(69, 56, 106, 0.55); /* — skala typografii (mobile-first, clamp) — */ --step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem); --step-0: clamp(1rem, 0.96rem + 0.25vw, 1.12rem); --step-1: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); --step-3: clamp(2.2rem, 1.6rem + 3vw, 4rem); --step-4: clamp(2.9rem, 1.9rem + 5.2vw, 6rem); /* — rytm — */ --measure: 60ch; --gap: clamp(1rem, 0.7rem + 1.5vw, 2rem); --section: clamp(3.5rem, 2rem + 7vw, 7rem); } /* ============================================================ DOPISKI dla brand/motif.css — grunty „poświaty" (ambient wash) + geometria masek sygnaturowych „Przenikanie". ------------------------------------------------------------ Dodane NA KOŃCU osobnym blokiem :root — NIE ruszają ani nie redefiniują żadnego tokenu powyżej (paleta, --layer-*, --lens-*, promienie, cienie, skala pozostają nietknięte). Konsumowane przez brand/motif.css, który ładuje się PO tokens.css. Kontrast: pod tekstem zostają tylko WYBLAKŁE ogony radiali; tekst siada na gęstych końcach albo na --accent-strong. Grunty używają par, które matryca WCAG marki już sprawdza (--accent-soft ↔ --bg/ --surface; --on-accent/--accent-soft ↔ --accent-strong), więc każdy punkt pod tekstem trzyma ≥ próg tych par. Maski są tintowane w motif.css (currentColor/token), tu trzymamy samą GEOMETRIĘ (alpha). ============================================================ */ :root{ /* — grunty „poświaty" (register d — ambient wash) — */ --wash-a: radial-gradient(60% 60% at 22% 40%, var(--layer-a-mid), transparent 70%); --wash-b: radial-gradient(60% 60% at 78% 40%, var(--layer-b-mid), transparent 70%); --wash-split: var(--wash-a), var(--wash-b); /* a z lewej, b z prawej */ --wash-corner: radial-gradient(80% 120% at 100% 0%, var(--layer-a-faint), transparent 62%); /* na ciemnym --accent-strong: miękkie radiale a/-b + baza; BEZ multiply */ --wash-deep: radial-gradient(60% 92% at -4% 50%, color-mix(in srgb, var(--accent-a) 55%, transparent), transparent 70%), radial-gradient(60% 92% at 104% 50%, color-mix(in srgb, var(--accent-b) 55%, transparent), transparent 70%), var(--accent-strong); /* — surowa geometria masek sygnaturowych (viewBox monochrom = alpha) — szew (register b): vesica na całą szerokość + węzeł w centrum, viewBox 0 0 120 24 */ --motif-seam: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2024'%3E%3Cpath%20d='M6%2012%20Q60%202%20114%2012'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'/%3E%3Cpath%20d='M6%2012%20Q60%2022%20114%2012'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'/%3E%3Ccircle%20cx='60'%20cy='12'%20r='3.2'%20fill='%23000'/%3E%3C/svg%3E"); /* sygnet (register c): dwa kontury okręgów + wypełniona soczewka (A∩B), viewBox 0 0 120 120 */ --motif-sig: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%3E%3CclipPath%20id='s'%3E%3Ccircle%20cx='72'%20cy='60'%20r='40'/%3E%3C/clipPath%3E%3Ccircle%20cx='48'%20cy='60'%20r='38.2'%20fill='none'%20stroke='%23000'%20stroke-width='3.2'/%3E%3Ccircle%20cx='72'%20cy='60'%20r='38.2'%20fill='none'%20stroke='%23000'%20stroke-width='3.2'/%3E%3Ccircle%20cx='48'%20cy='60'%20r='40'%20fill='%23000'%20clip-path='url(%23s)'/%3E%3C/svg%3E"); }