:root {         --color-white: #ffffff;
--color-gray-50: #f9f9f9;
--color-gray-100: #f5f5f5;
--color-gray-200: #f0f0f0;
--color-gray-300: #e8e8e8;
--color-gray-400: #e5e7eb;
--color-gray-500: #ddd;
--color-gray-600: #9b9b9b;
--color-gray-700: #888;
--color-gray-800: #555;
--color-gray-900: #333;
--color-black: #000; --overlay-dark: rgba(0, 0, 0, 0.5);
--glass-bg: rgba(255, 255, 255, 0.2);
--glass-border: rgba(255, 255, 255, 0.3);
--glass-hover: rgba(255, 255, 255, 0.35); --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.16);
--shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.2);
--shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.3);
--text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
--text-shadow-light: 1px 1px 2px rgba(0, 0, 0, 0.2); --radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 25px;
--radius-circle: 50%; --spacing-xs: 8px;
--spacing-sm: 12px;
--spacing-md: 16px;
--spacing-lg: 20px;
--spacing-xl: 24px;
--spacing-2xl: 28px;
--spacing-3xl: 32px;
--spacing-4xl: 36px;
--spacing-5xl: 40px;
--spacing-6xl: 44px; --z-base: 1;
--z-banner-content: 1;
--z-banner-logo: 2;
--z-sticky: 10;
--z-dropdown: 100;
--z-modal-overlay: 1000;
--z-modal: 1001;
--z-tooltip: 1100; --font-family-primary: 'Korolev', sans-serif; --transition-speed: 0.2s;
--transition-speed-slow: 0.3s;
--transition-speed-fast: 0.15s; --banner-height: 350px;
--container-max-width-desktop: 1700px;
--container-max-width-mobile: 100%;
--sidebar-width-desktop: 370px; --breakpoint-tablet: 1024px;
--breakpoint-mobile: 768px; --admin-bar-desktop: 32px;
--admin-bar-mobile: 46px; --color-border-light: #e0e8f0;
--color-link-primary: #0066cc;
--color-link-primary-hover: #0052a3; --font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-base: 14px;
--font-size-md: 15px;
--font-size-lg: 16px;
--font-size-xl: 18px;
--font-size-2xl: 20px;
--font-size-3xl: 28px;
} @keyframes slideInFromRight {
from {
transform: translateX(30px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInFromLeft {
from {
transform: translateX(-30px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes arrow-pulse-accent {
0% { transform: scale(1); box-shadow: 0 0 8px 2px var(--accent-color); }
60% { transform: scale(1.15); box-shadow: 0 0 16px 4px var(--accent-color); }
80% { transform: scale(1.05); box-shadow: 0 0 10px 2px var(--accent-color); }
100% { transform: scale(1); box-shadow: 0 0 8px 2px var(--accent-color); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideDown {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}