/* ══════════════════════════════════════════════════════════════════════════ SYSTEM DESIGNOWY — wnioski24.pl ────────────────────────────────────────────────────────────────────────── Jedyne źródło prawdy dla kolorów, typografii i odstępów motywu potomnego. W arkuszach i szablonach używaj wyłącznie var(--w24-*), nigdy wartości wpisanych na sztywno. Kolory bazowe pochodzą z tego, co strona renderuje DZIŚ (zmienne --ast-global-color-* Astry). Paleta Elementora (#6EC1E4 itd.) to fabryczne ustawienia domyślne, których nikt nie używa — celowo jej tu nie ma. Wszystkie współczynniki kontrastu w komentarzach są policzone wg WCAG 2.1 (progi: 4.5:1 tekst zwykły, 3:1 tekst duży >=18.66px bold / >=24px oraz elementy nietekstowe). ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── KOLORY: marka ──────────────────────────────────────────────────── */ /* Kolor funkcyjny — linki, stany, elementy interfejsu. --ast-global-color-0. */ --w24-color-primary: #0170B9; /* biały tekst na tym tle: 5.22:1 AA */ --w24-color-primary-dark: #015C97; /* :hover / :focus — 7.05:1 na białym */ /* CTA. UWAGA: biały tekst na akcencie daje 3.84:1 — wystarcza dla tekstu dużego/pogrubionego (próg 3:1), NIE dla zwykłego. Etykiety przycisków ustawiaj min. 18.66px bold. Alternatywa dla zwykłego tekstu: napis granatowy (--w24-color-navy na akcencie = 4.33:1). */ --w24-color-accent: #A87A20; --w24-color-accent-dark: #8A6417; /* :hover — biały tekst 5.36:1 AA */ /* Tło sekcji hero i akcentów. Ten sam granat, co w mailach obu wtyczek. */ --w24-color-navy: #0D1F35; /* biały tekst na granacie: 16.61:1 */ /* ── KOLORY: treść ──────────────────────────────────────────────────── */ --w24-color-heading: #3A3A3A; /* --ast-global-color-2 — 11.37:1 */ --w24-color-text: #4B4F58; /* --ast-global-color-3 — 8.21:1 */ --w24-color-text-muted: #555D66; /* podpisy, metadane — 6.68:1 */ --w24-color-text-inverse: #FFFFFF; /* tekst na ciemnym tle */ /* ── KOLORY: powierzchnie ───────────────────────────────────────────── */ --w24-color-bg: #FFFFFF; /* --ast-global-color-5 */ --w24-color-bg-alt: #F5F5F5; /* --ast-global-color-4 — sekcje naprzemienne */ --w24-color-border: #E5E5E5; /* --ast-global-color-6 */ /* ── KOLORY: komunikaty ─────────────────────────────────────────────── */ --w24-color-success: #1A7F4B; /* 5.02:1 na białym — AA */ /* Terminy i upływające deadline'y. Celowo pomarańczowy, nie złoty: musi być odróżnialny od CTA (--w24-color-accent). 5.02:1 na białym — AA. */ --w24-color-warning: #B45309; --w24-color-error: #B3261E; /* 6.54:1 na białym — AA */ /* Tła komunikatów — jasne warianty pod tekst w kolorach powyżej. */ --w24-color-success-bg: #E8F4EE; --w24-color-warning-bg: #FDF3E0; /* odcień już obecny na stronie głównej */ --w24-color-error-bg: #FBEAE9; /* ── KOLORY: dostępność ─────────────────────────────────────────────── */ /* Widoczny pierścień fokusa dla nawigacji klawiaturą. Celowo inny odcień niż --w24-color-primary, żeby fokus był odróżnialny od zwykłego linku. 6.44:1 na białym, 2.58:1 na granacie — na ciemnym tle używaj --w24-color-focus-inverse. */ --w24-color-focus: #0A58CA; --w24-color-focus-inverse: #FFFFFF; --w24-focus-ring-width: 3px; --w24-focus-ring-offset: 2px; /* ── TYPOGRAFIA: rodziny ────────────────────────────────────────────── */ /* Dokładnie te kroje, które strona ładuje dziś z Google Fonts. */ --w24-font-heading: "Playfair Display", Georgia, "Times New Roman", serif; --w24-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --w24-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace; /* ── TYPOGRAFIA: wagi ───────────────────────────────────────────────── */ --w24-weight-light: 300; --w24-weight-regular: 400; --w24-weight-medium: 500; --w24-weight-semibold: 600; --w24-weight-bold: 700; --w24-weight-black: 900; /* tylko Playfair Display, duże nagłówki */ /* ── TYPOGRAFIA: skala rozmiarów ────────────────────────────────────── */ /* clamp() = płynne skalowanie bez media queries; brak skoków układu na granicach breakpointów. */ --w24-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* 12 -> 13 px */ --w24-text-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); /* 14 -> 15 px */ --w24-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16 -> 17 px */ --w24-text-lg: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem); /* 18 -> 20 px */ --w24-text-xl: clamp(1.375rem, 1.3rem + 0.4vw, 1.625rem); /* 22 -> 26 px */ --w24-text-2xl: clamp(1.75rem, 1.6rem + 0.75vw, 2.25rem); /* 28 -> 36 px */ --w24-text-3xl: clamp(2.125rem, 1.9rem + 1.15vw, 3rem); /* 34 -> 48 px */ --w24-text-4xl: clamp(2.5rem, 2.1rem + 2vw, 4rem); /* 40 -> 64 px */ /* ── TYPOGRAFIA: interlinia i tracking ──────────────────────────────── */ --w24-leading-tight: 1.15; /* duże nagłówki */ --w24-leading-snug: 1.3; /* nagłówki sekcji */ --w24-leading-normal: 1.6; /* tekst ciągły */ --w24-leading-relaxed: 1.75; /* długie akapity, artykuły */ --w24-tracking-tight: -0.02em; --w24-tracking-normal: 0; --w24-tracking-wide: 0.04em; /* wersaliki, etykiety */ /* ── ODSTĘPY ────────────────────────────────────────────────────────── */ /* Skala oparta na 4 px — każdy odstęp w motywie musi być jednym z nich. */ --w24-space-0: 0; --w24-space-1: 0.25rem; /* 4 px */ --w24-space-2: 0.5rem; /* 8 px */ --w24-space-3: 0.75rem; /* 12 px */ --w24-space-4: 1rem; /* 16 px */ --w24-space-5: 1.5rem; /* 24 px */ --w24-space-6: 2rem; /* 32 px */ --w24-space-7: 3rem; /* 48 px */ --w24-space-8: 4rem; /* 64 px */ --w24-space-9: 6rem; /* 96 px */ /* Pionowy rytm sekcji — płynny, żeby na mobile nie powstawały puste ekrany. */ --w24-section-padding: clamp(2.5rem, 1.5rem + 5vw, 6rem); --w24-container-max: 1200px; --w24-content-max: 68ch; /* komfortowa długość wiersza tekstu */ /* ── PROMIENIE ──────────────────────────────────────────────────────── */ --w24-radius-none: 0; --w24-radius-sm: 3px; --w24-radius-md: 6px; --w24-radius-lg: 12px; --w24-radius-xl: 20px; --w24-radius-full: 9999px; /* ── CIENIE ─────────────────────────────────────────────────────────── */ --w24-shadow-sm: 0 1px 2px rgba(13, 31, 53, 0.06); --w24-shadow-md: 0 2px 8px rgba(13, 31, 53, 0.08); --w24-shadow-lg: 0 8px 24px rgba(13, 31, 53, 0.12); --w24-shadow-xl: 0 16px 48px rgba(13, 31, 53, 0.16); /* ── WARSTWY (z-index) ──────────────────────────────────────────────── */ /* Odstęp 10 między poziomami zostawia miejsce na wartości pośrednie bez przenumerowywania całej skali. */ --w24-z-base: 1; --w24-z-dropdown: 1000; --w24-z-sticky-bar: 1010; /* sticky CTA na mobile */ --w24-z-header: 1020; /* nagłówek przyklejony przy scrollu */ --w24-z-overlay: 1030; /* przyciemnienie tła pod modalem */ --w24-z-modal: 1040; --w24-z-popover: 1050; --w24-z-toast: 1060; /* zawsze na wierzchu */ /* ── ELEMENTY UKŁADU ────────────────────────────────────────────────── */ /* Wysokość sticky CTA na mobile. Używaj tej zmiennej także w padding-bottom treści i w scroll-padding-top, żeby pasek niczego nie zasłaniał. */ --w24-sticky-bar-height: 64px; --w24-header-height: 80px; /* ── ANIMACJE ───────────────────────────────────────────────────────── */ --w24-transition-fast: 120ms ease; --w24-transition-base: 200ms ease; --w24-transition-slow: 320ms ease; /* ── BREAKPOINTY ────────────────────────────────────────────────────── */ /* Custom properties NIE działają w @media — te zmienne są wyłącznie dokumentacją i do użycia w JS przez getComputedStyle(). W CSS wpisuj wartości wprost. Odpowiadają viewport_md / viewport_lg z kitu Elementora, żeby motyw łamał się w tych samych punktach co treść budowana w Elementorze. */ --w24-bp-sm: 480px; --w24-bp-md: 768px; /* = viewport_md Elementora */ --w24-bp-lg: 1025px; /* = viewport_lg Elementora */ --w24-bp-xl: 1200px; } /* ══════════════════════════════════════════════════════════════════════════ Mniej ruchu — respektuj ustawienie systemowe użytkownika. ══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { :root { --w24-transition-fast: 0ms; --w24-transition-base: 0ms; --w24-transition-slow: 0ms; } }