/** * Volkin Reborn - Modular Liquid Glass Design System * * ARCHITEKTURA: * 1. Zmienne globalne * 2. Custom scrollbar * 3. Globalne tło + Page fade * 4. Okna główne (main-window) * 5. Okienka wewnętrzne (inner-window) * 6. Przyciski (btn) * 7. Popupy przycisków (btn-popup) * 8. Menu bar (navbar) * 9. Pozostałe komponenty * 10. Utility classes * 11. Responsywność * 12. Infinite Marquee * 13. Scroll to top button * 14. Animacje * 15. Theme toggle * 16. Dark mode */ /* ======================================== 1. ZMIENNE GLOBALNE Edytuj tutaj żeby zmienić cały design ======================================== */ :root { /* === KOLORY === */ --color-primary: #4488EF; --color-primary-dark: #2656DC; --color-secondary: #6B8BFF; --color-accent: #A8C4FF; /* === TŁO GLOBALNE === */ --bg-global: #f0f2f5; --bg-global-secondary: #ffffff; /* === LIQUID GLASS - BAZOWE === */ --glass-bg: rgba(255, 255, 255, 0.6); --glass-bg-hover: rgba(255, 255, 255, 0.75); --glass-blur: 24px; --glass-border: rgba(255, 255, 255, 0.7); --glass-border-hover: rgba(255, 255, 255, 0.9); --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.3); --glass-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.4); /* === GLOW ZEWNĘTRZNY === */ --glow-outer: 0 0 40px rgba(68, 136, 239, 0.15); --glow-outer-hover: 0 0 60px rgba(68, 136, 239, 0.25); --glow-outer-strong: 0 0 80px rgba(68, 136, 239, 0.3); /* === CURSOR GLOW (subtelna poświata) === */ --cursor-glow-color: rgba(68, 136, 239, 0.12); --cursor-glow-size: 200px; /* === MAGNETIC EFFECT - SIŁA PRZYCIĄGANIA === */ --magnetic-navbar: 0.08; --magnetic-main-window: 0; --magnetic-inner-window: 0.15; --magnetic-btn: 0.25; /* === Z-INDEX HIERARCHY === */ --z-below: -1; --z-base: 0; --z-above: 1; --z-dropdown: 10; --z-sticky: 100; --z-overlay: 998; --z-navbar: 1000; --z-hamburger: 1001; --z-skip-link: 10000; /* === TIMING === */ --transition-fast: 0.2s ease-out; --transition-normal: 0.3s ease-out; --transition-slow: 0.5s ease-out; --transition-magnetic: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* === NAVBAR === */ --navbar-height: 56px; --navbar-bg: rgba(255, 255, 255, 0.55); --navbar-blur: 20px; --navbar-border: rgba(255, 255, 255, 0.8); --navbar-shadow: 0 4px 30px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 40px rgba(68, 136, 239, 0.08); /* === HOVER GLOW SYSTEM === Unified hover: glow podświetlenie zamiast rozjaśniania tła. Trzy poziomy: lg (main-window), sm (inner-window), btn (przyciski). Gradient buttons (primary, allegro, b2b) mają własny kolorowy glow. */ --hover-glow-color: 68, 136, 239; --hover-border-lg: rgba(var(--hover-glow-color), 0.25); --hover-border-sm: rgba(var(--hover-glow-color), 0.35); --hover-border-btn: rgba(var(--hover-glow-color), 0.3); --hover-glow-lg: 0 0 25px rgba(var(--hover-glow-color), 0.12), 0 0 50px rgba(var(--hover-glow-color), 0.06); --hover-glow-sm: 0 0 20px rgba(var(--hover-glow-color), 0.15), 0 0 40px rgba(var(--hover-glow-color), 0.08); --hover-glow-btn: 0 0 18px rgba(var(--hover-glow-color), 0.18), 0 0 35px rgba(var(--hover-glow-color), 0.08); /* === OKNA GŁÓWNE (main-window) === */ --main-window-bg: rgba(255, 255, 255, 0.45); --main-window-blur: 20px; --main-window-border: rgba(255, 255, 255, 0.6); --main-window-radius: 32px; --main-window-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 60px rgba(68, 136, 239, 0.1); --main-window-padding: 3rem; /* === OKIENKA WEWNĘTRZNE (inner-window) === */ --inner-window-bg: rgba(255, 255, 255, 0.55); --inner-window-bg-hover: rgba(255, 255, 255, 0.6); --inner-window-blur: 16px; --inner-window-border: rgba(255, 255, 255, 0.7); --inner-window-border-hover: var(--hover-border-sm); --inner-window-radius: 20px; --inner-window-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.35); --inner-window-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--hover-glow-sm); --inner-window-padding: 1.5rem; /* === PRZYCISKI (btn) === */ --btn-bg: rgba(255, 255, 255, 0.7); --btn-bg-hover: rgba(255, 255, 255, 0.7); --btn-blur: 12px; --btn-border: rgba(255, 255, 255, 0.8); --btn-border-hover: var(--hover-border-btn); --btn-radius: 14px; --btn-radius-pill: 9999px; --btn-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.35); --btn-shadow-hover: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--hover-glow-btn); --btn-padding: 0.75rem 1.5rem; --btn-padding-lg: 1rem 2rem; /* === POPUPY PRZYCISKÓW === */ --popup-bg: rgba(255, 255, 255, 0.9); --popup-blur: 24px; --popup-border: rgba(255, 255, 255, 0.8); --popup-radius: 16px; --popup-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.35); } /* ======================================== FALLBACK DLA BACKDROP-FILTER (Firefox) ======================================== */ @supports not (backdrop-filter: blur(1px)) { .navbar { background: rgba(255, 255, 255, 0.95) !important; } .dark .navbar { background: rgba(30, 30, 45, 0.95) !important; } .main-window { background: rgba(255, 255, 255, 0.95) !important; } .dark .main-window { background: rgba(35, 35, 50, 0.95) !important; } .inner-window { background: rgba(255, 255, 255, 0.95) !important; } .dark .inner-window { background: rgba(45, 45, 60, 0.95) !important; } .btn { background: rgba(255, 255, 255, 0.95) !important; } .dark .popup-menu { background: rgba(35, 35, 50, 0.95) !important; } }