/* ========================================================================== SITE GO — CENTRALNA KONFIGURACJA WIZUALNA ========================================================================== To jest JEDYNE miejsce, w którym definiujemy kolory, czcionki, odstępy i promienie zaokrągleń dla całego motywu. Każdy inny plik CSS/PHP odwołuje się do zmiennych zdefiniowanych tutaj (var(--nazwa)). Chcesz przefarbować cały motyw pod nową markę? Zmień wartości poniżej (albo edytuj je wygodnie w WP Admin -> Wygląd -> Personalizacja -> Kolory i typografia — patrz inc/customizer.php, który nadpisuje te zmienne inline w na podstawie ustawień z Customizera). ========================================================================== */ :root { /* -------------------------------------------------------------------- 1. PALETA KOLORÓW -------------------------------------------------------------------- */ --color-primary: #E4227E; /* róż — CTA, linki, akcenty, kluczowy kolor marki */ --color-primary-dark: #C21B6C; /* róż hover/aktywne stany */ --color-secondary: #D6F84A; /* limonka — podkreślenia, plakietki, tła naprzemienne */ --color-secondary-dark: #C2E82F; --color-accent: #E4227E; /* alias — zachowany dla zgodności z inc/customizer.php */ --color-accent-dark: #C21B6C; --color-success: #7ea832; --color-danger: #B3473C; --color-warning: #D9A441; --color-info: #4A6FA5; --color-primary-tint: #FBEAF0; /* róż jasny — tła plakietek/badge */ --color-secondary-tint: #F7FBE0; /* limonka jasna — tła plakietek/naprzemienne sekcje */ --color-text: #1a1a1a; /* atrament — tekst i nagłówki */ --color-text-muted: #6b6a63; /* tekst pomocniczy / opisy */ --color-text-light: #FBFAF4; /* tekst na ciemnym tle */ --color-bg: #FBFAF4; /* kremowe tło strony */ --color-bg-alt: #F1EFE8; /* tło pasków / naprzemiennych bloków */ --color-surface: #FFFFFF; /* białe tło kart, przeglądarki, wyniku wyceny */ --color-border: #e2e0d5; /* -------------------------------------------------------------------- 2. TYPOGRAFIA -------------------------------------------------------------------- */ --font-heading: 'Merriweather', Georgia, 'Times New Roman', serif; --font-main: 'Lato', 'Segoe UI', Arial, sans-serif; --fs-base: 1rem; --fs-sm: 0.875rem; --fs-lg: 1.125rem; --fs-h1: clamp(2rem, 4vw, 2.9rem); --fs-h2: clamp(1.6rem, 3vw, 1.9rem); --fs-h3: clamp(1.3rem, 2.2vw, 1.5rem); --lh-base: 1.6; --letter-spacing-wide: 0.08em; /* -------------------------------------------------------------------- 3. ODSTĘPY / UKŁAD -------------------------------------------------------------------- */ --section-padding-y: 64px; --container-max: 1160px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 50px; /* "Sketch" — odręczny, asymetryczny kształt użyty na przyciskach, plakietkach i kafelkach (naprzemiennie z --radius-sketch-2, żeby nic nie wyglądało jak z linijki). */ --radius-sketch: 255px 15px 225px 15px/15px 225px 15px 255px; --radius-sketch-2: 15px 225px 15px 255px/255px 15px 225px 15px; /* -------------------------------------------------------------------- 4. CIENIE / EFEKTY -------------------------------------------------------------------- */ --shadow-sm: 0 2px 8px rgba(26, 26, 26, 0.06); --shadow-md: 0 8px 24px rgba(26, 26, 26, 0.10); --shadow-lg: 0 20px 45px rgba(26, 26, 26, 0.14); --transition-base: all 0.2s ease; --transition-slow: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* -------------------------------------------------------------------- 5. NADPISANIE ZMIENNYCH BOOTSTRAPA 5 (Bootstrap czyta te --bs-*) Bootstrap zostaje wczytany jako baza (grid, formularze, wzornik komponentów), ale wygląd sekcji marketingowych (front-page.php, header.php, footer.php) korzysta z własnych klas .sitego-* w main.css, niezależnych od komponentów Bootstrapa. -------------------------------------------------------------------- */ --bs-primary: var(--color-primary); --bs-secondary: var(--color-text-muted); --bs-success: var(--color-success); --bs-danger: var(--color-danger); --bs-warning: var(--color-warning); --bs-info: var(--color-info); --bs-body-font-family: var(--font-main); --bs-body-color: var(--color-text); --bs-body-bg: var(--color-bg); --bs-link-color: var(--color-primary); --bs-link-hover-color: var(--color-primary-dark); --bs-border-radius: var(--radius-sm); --bs-border-radius-lg: var(--radius-md); }