/* ============================================================================ isseLaSiDo — Odświeżenie UI (lekkość + przyjazność dla najmłodszych) ---------------------------------------------------------------------------- Warstwa CZYSTO WIZUALNA nakładana na Tailwind (strona + panel admina). Zmienia typografię, wagi, cienie, zaokrąglenia i obramowania — NIE rusza układu, logiki ani kolorów marki (#961504 pozostaje). ODWRACALNE: usuń z . ============================================================================ */ :root { --brand: #961504; --brand-light: #b31a05; --brand-dark: #7a1103; --brand-rgb: 150 21 4; /* do miękkich, ocieplonych cieni */ } /* ---- Typografia: lekki, zaokrąglony krój z pełną obsługą polskich znaków --- Nunito — humanistyczny, zaokrąglony, świetne diakrytyki (ą ć ę ł ń ó ś ź ż). */ body { font-family: 'Nunito', 'Quicksand', ui-rounded, system-ui, sans-serif !important; font-weight: 400 !important; letter-spacing: .002em; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Nagłówki: ten sam krój, mocniejsze dla hierarchii, ale bez „ciężkiego" black */ h1, h2, h3, h4, h5, h6, .font-display { font-family: 'Nunito', 'Quicksand', sans-serif !important; font-weight: 700 !important; letter-spacing: -.005em; } /* Złagodzenie wag — hierarchia zostaje, ale bez betonu */ .font-black { font-weight: 700 !important; } .font-extrabold{ font-weight: 700 !important; } .font-bold { font-weight: 600 !important; } .font-semibold { font-weight: 500 !important; } .font-medium { font-weight: 500 !important; } /* Mikro-etykiety (UPPERCASE) niech „oddychają" zamiast krzyczeć */ .uppercase { letter-spacing: .05em !important; } /* ---- Cienie: lżejsze, bardziej rozmyte, lekko ocieplone marką ------------- */ .shadow-sm { box-shadow: 0 1px 2px rgb(var(--brand-rgb) / .05) !important; } .shadow { box-shadow: 0 2px 8px rgb(var(--brand-rgb) / .05) !important; } .shadow-md { box-shadow: 0 4px 14px rgb(var(--brand-rgb) / .06) !important; } .shadow-lg { box-shadow: 0 8px 22px rgb(var(--brand-rgb) / .07) !important; } .shadow-xl { box-shadow: 0 12px 30px rgb(var(--brand-rgb) / .08) !important; } .shadow-2xl { box-shadow: 0 18px 46px rgb(var(--brand-rgb) / .10) !important; } /* ---- Obramowania i zaokrąglenia: cieniej + bardziej „bąbelkowo" ----------- */ .border-2 { border-width: 1.5px !important; } .rounded-lg { border-radius: .8rem !important; } .rounded-xl { border-radius: 1rem !important; } .rounded-2xl { border-radius: 1.35rem !important; } .rounded-3xl { border-radius: 1.85rem !important; } .rounded-full{ border-radius: 9999px !important; } /* ---- Interakcje: delikatny, sprężysty ruch (bardziej „zabawowo") ---------- */ button, a, .btn, [role="button"] { transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, background-color .18s ease, color .18s ease !important; } /* Pola formularzy: miększy focus w kolorze marki (bez ciężkiego obrysu) */ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .12) !important; outline: none !important; } /* Delikatne ocieplenie tła kremowych sekcji panelu — spójna „miękkość". (Nie zmienia kolorów marki; tylko bardzo subtelny warm-tint neutralnych teł.) */ ::selection { background: rgb(var(--brand-rgb) / .16); } /* Pasek przewijania — cieńszy, brandowy, mniej „technologiczny" */ * { scrollbar-width: thin; scrollbar-color: rgb(var(--brand-rgb) / .35) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: rgb(var(--brand-rgb) / .3); border-radius: 9999px; } *::-webkit-scrollbar-thumb:hover { background: rgb(var(--brand-rgb) / .5); }