/* ======================================== Enter BHP – Main Stylesheet v2 Fonty są ładowane w (header.php) z non-blocking pattern. ======================================== */ /* ---- Reset & Base ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #111827; background: #fff; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { letter-spacing: -0.025em; line-height: 1.15; } a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; display: block; } button { cursor: pointer; font-family: inherit; } /* ---- Variables ---- */ :root { --green-50: #f0fdf4; --green-100: #dcfce7; --green-200: #bbf7d0; --green-400: #4ade80; --green-500: #22c55e; --green-600: #16a34a; --green-700: #15803d; --emerald-500:#10b981; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; --blue-600: #2563eb; --orange-600: #ea580c; --red-600: #dc2626; --purple-600: #9333ea; --yellow-600: #ca8a04; --rose-600: #e11d48; } /* ---- Container ---- */ .container { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; } @media (min-width:640px) { .container { padding: 0 1.5rem; } } @media (min-width:1024px) { .container { padding: 0 2rem; } } .container-md { max-width: 52rem; } .text-center { text-align: center; } /* ---- Animations ---- */ @keyframes fadeInUp { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:none; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes scaleIn { from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulseGlow { 0%,100% { opacity:.5; } 50% { opacity:1; } } .animate-fade-up { animation: fadeInUp 0.8s cubic-bezier(0.22,1,0.36,1) both; } .animate-fade-in { animation: fadeIn 0.6s ease both; } .animate-scale-in { animation: scaleIn 0.6s cubic-bezier(0.22,1,0.36,1) both; } .delay-100 { animation-delay:.1s; } .delay-200 { animation-delay:.2s; } .delay-300 { animation-delay:.3s; } .delay-400 { animation-delay:.4s; } .reveal { opacity:0; transform:translateY(36px); transition: opacity .8s cubic-bezier(0.22,1,0.36,1), transform .8s cubic-bezier(0.22,1,0.36,1); } .reveal.visible { opacity:1; transform:none; } .reveal.delay-1 { transition-delay:.1s; } .reveal.delay-2 { transition-delay:.2s; } .reveal.delay-3 { transition-delay:.3s; } .reveal.delay-4 { transition-delay:.4s; } .reveal.delay-5 { transition-delay:.5s; } /* =================================== FUNDING BAR (UE / Śląskie logotypy) =================================== */ :root { --funding-bar-h: 72px; } .funding-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 101; background: #fff; border-bottom: 1px solid var(--gray-100, #f3f4f6); display: flex; justify-content: center; align-items: center; padding: .5rem 1rem; height: var(--funding-bar-h); transition: transform .35s ease, opacity .35s ease; } body.has-funding-bar.scrolled .funding-bar { transform: translateY(-100%); opacity: 0; pointer-events: none; } .funding-bar img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } body.has-funding-bar { padding-top: var(--funding-bar-h); } @media (max-width: 640px) { :root { --funding-bar-h: 48px; } .funding-bar { padding: .375rem .5rem; } } /* Footer variant — normal flow, above dark