--

vue/app/pages/About/index.styl

@@ -1,4 +1,6 @@
-// Локальные стили только для About страницы
+// vue/app/pages/About/index.styl
+// Стили исключительно для страницы "О зале"
+
 .about-section
   .info-item
     transition: all 0.3s ease
@@ -17,6 +19,22 @@
     &:hover .icon
       transform: scale(1.1)
 
+  // Стили для статистических карточек
+  .stat-card
+    transition: all 0.3s ease
+    position: relative
+    overflow: hidden
+    
+    &::before
+      content: ''
+      position: absolute
+      top: 0
+      left: 0
+      right: 0
+      bottom: 0
+      background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%)
+      pointer-events: none
+
 // Адаптивность для мобильных устройств
 @media (max-width: 768px)
   .about-section

vue/app/pages/Events/index.styl

@@ -1,4 +1,5 @@
-// app/pages/Events/index.styl
+// vue/app/pages/Events/index.styl
+// Стили исключительно для страницы мероприятий
 
 .events-list-enter-active,
 .events-list-leave-active
@@ -16,26 +17,15 @@
   transition: transform 0.5s ease
 
 .event-card
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
-  
-  &:hover
-    .event-image img
+  .event-image
+    img
+      transition: transform 0.5s ease
+      
+    &:hover img
       transform: scale(1.05)
 
-.line-clamp-2
-  display: -webkit-box
-  -webkit-line-clamp: 2
-  -webkit-box-orient: vertical
-  overflow: hidden
-
-.line-clamp-3
-  display: -webkit-box
-  -webkit-line-clamp: 3
-  -webkit-box-orient: vertical
-  overflow: hidden
-
-// Анимация появления карточек при загрузке
-@keyframes fadeInUp
+// Анимация появления карточек
+@keyframes eventsFadeIn
   from
     opacity: 0
     transform: translateY(40px)
@@ -44,7 +34,7 @@
     transform: translateY(0)
 
 .event-card
-  animation: fadeInUp 0.6s ease forwards
+  animation: eventsFadeIn 0.6s ease forwards
   
   for i in 1..12
     &:nth-child({i})
@@ -52,22 +42,14 @@
 
 // Адаптивность
 @media (max-width: 768px)
-  .event-card
-    margin-bottom: 1.5rem
-    
-  .events-grid
-    .grid
-      grid-template-columns: 1fr
+  .events-grid .grid
+    grid-template-columns: 1fr
 
-// Кастомные стили для пустого состояния
+// Стили для пустого состояния
 .empty-state
   .empty-icon
     opacity: 0.5
-
-// Стили для бейджей категорий
-.event-badge
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)
-
-// Плавная прокрутка к событиям
-html
-  scroll-behavior: smooth
+    transition: opacity 0.3s ease
+    
+  &:hover .empty-icon
+    opacity: 0.8

vue/app/pages/Home/index.styl

@@ -1,23 +1,21 @@
-// app/pages/Home/index.styl
+// vue/app/pages/Home/index.styl
+// Стили исключительно для главной страницы
 
 .hero-section
   margin-top: -2rem
   
+  .slide-content
+    transition: all 0.5s ease-in-out
+
 .event-card
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
   
   &:hover
-    transform: translateY(-8px)
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25)
-    
-.line-clamp-2
-  display: -webkit-box
-  -webkit-line-clamp: 2
-  -webkit-box-orient: vertical
-  overflow: hidden
+    .event-image img
+      transform: scale(1.05)
 
-// Анимация появления карточек
-@keyframes fadeInUp
+// Анимации для карточек мероприятий
+@keyframes cardAppear
   from
     opacity: 0
     transform: translateY(30px)
@@ -26,7 +24,7 @@
     transform: translateY(0)
 
 .event-card
-  animation: fadeInUp 0.6s ease forwards
+  animation: cardAppear 0.6s ease forwards
   
   &:nth-child(1)
     animation-delay: 0.1s

vue/app/shared/EventDetailModal/index.styl

@@ -1,4 +1,6 @@
-// Локальные стили для модального окна
+// vue/app/shared/EventDetailModal/index.styl
+// Стили исключительно для модального окна деталей мероприятия
+
 .event-detail
   .event-stats
     .stat
@@ -10,6 +12,13 @@
         transform: translateY(-2px)
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
 
+  .info-item
+    transition: all 0.3s ease
+    
+    &:hover
+      .icon
+        transform: scale(1.1)
+
   .action-buttons
     button
       transition: all 0.3s ease
@@ -34,3 +43,27 @@
         
       &:active
         transform: scale(0.98)
+
+// Анимации для модального контента
+.modal-content
+  .event-visual
+    img
+      transition: transform 0.5s ease
+      
+    &:hover img
+      transform: scale(1.02)
+
+// Адаптивность
+@media (max-width: 1024px)
+  .event-detail
+    .grid
+      grid-template-columns: 1fr !important
+      
+    .action-buttons
+      flex-direction: column
+
+@media (max-width: 640px)
+  .event-detail
+    .event-stats
+      grid-template-columns: 1fr
+      gap: 0.5rem

vue/app/shared/FormValidator/index.styl

@@ -0,0 +1,33 @@
+// vue/app/shared/FormValidator/index.styl
+// Стили исключительно для валидатора форм
+
+.form-validator
+  .form-group
+    transition: all 0.3s ease
+    
+  .validation-message
+    transition: all 0.3s ease
+    
+  .submit-btn
+    transition: all 0.3s ease
+    position: relative
+    overflow: hidden
+    
+    &:disabled
+      cursor: not-allowed
+      
+    &::before
+      content: ''
+      position: absolute
+      top: 50%
+      left: 50%
+      width: 0
+      height: 0
+      background: rgba(255, 255, 255, 0.2)
+      border-radius: 50%
+      transform: translate(-50%, -50%)
+      transition: width 0.6s, height 0.6s
+      
+    &:hover:not(:disabled)::before
+      width: 300px
+      height: 300px

vue/app/shared/ImageSlider/index.styl

@@ -1,10 +1,10 @@
+// vue/app/shared/ImageSlider/index.styl
+// Стили исключительно для слайдера изображений
+
 .imageslider
   .slides-container
     scroll-behavior: smooth
     
-  .slide-content
-    transition: all 0.5s ease-in-out
-    
   .nav-btn
     backdrop-filter: blur(8px)
     opacity: 0
@@ -18,3 +18,16 @@
     
   .progress-fill
     transition-timing-function: linear
+
+// Анимации для слайдов
+.slide-enter-active,
+.slide-leave-active
+  transition: all 0.5s ease
+
+.slide-enter-from
+  opacity: 0
+  transform: translateX(100px)
+
+.slide-leave-to
+  opacity: 0
+  transform: translateX(-100px)

vue/app/shared/MultiLevelMenu/index.styl

@@ -0,0 +1,20 @@
+// vue/app/shared/MultiLevelMenu/index.styl
+// Стили исключительно для многоуровневого меню
+
+.menu-item
+  .submenu-item
+    transition: all 0.3s ease
+    
+    &:hover
+      transform: translateX(5px)
+
+// Адаптивность для мобильного меню
+@media (max-width: 768px)
+  .mobile-menu-button
+    transition: all 0.3s ease
+    
+    &:hover
+      background-color: rgba(0, 0, 0, 0.1)
+      
+      .dark &
+        background-color: rgba(255, 255, 255, 0.1)

vue/app/shared/ThemeToggle/index.styl

@@ -0,0 +1,26 @@
+// vue/app/shared/ThemeToggle/index.styl
+// Стили исключительно для переключателя темы
+
+.theme-toggle
+  transition: all 0.3s ease
+  position: relative
+  overflow: hidden
+  
+  &::before
+    content: ''
+    position: absolute
+    top: 0
+    left: -100%
+    width: 100%
+    height: 100%
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent)
+    transition: left 0.5s
+    
+  &:hover::before
+    left: 100%
+
+  svg
+    transition: all 0.3s ease
+    
+  &:hover svg
+    filter: drop-shadow(0 2px 4px rgba(214, 158, 46, 0.3))

vue/app/temp.styl

@@ -1,11 +1,60 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-.page-slide-enter-active { transition: all 0.3s ease-out; }
-.page-slide-leave-active { transition: all 0.3s ease-in; }
-.page-slide-enter-from { opacity: 0; transform: translateX(30px); }
-.page-slide-leave-to { opacity: 0; transform: translateX(-30px); }
+// vue/app/temp.styl
+// Глобальные стили и анимации для всего проекта
 
-// app/temp.styl
-// Глобальные стили, которые сложно сделать на Tailwind
+// Анимации для плавного появления элементов
+@keyframes fadeInUp
+  0%
+    opacity: 0
+    transform: translateY(40px)
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes fadeIn
+  from
+    opacity: 0
+  to
+    opacity: 1
+
+@keyframes slideIn
+  from
+    opacity: 0
+    transform: translateX(-100px)
+  to
+    opacity: 1
+    transform: translateX(0)
+
+@keyframes pulse
+  0%, 100%
+    opacity: 1
+  50%
+    opacity: 0.7
+
+// Глобальные классы анимаций
+.animate-fade-in-up
+  animation: fadeInUp 0.6s ease-out forwards
+
+.animate-fade-in
+  animation: fadeIn 0.5s ease-out forwards
+
+.animate-slide-in
+  animation: slideIn 0.5s ease-out forwards
+
+.animate-pulse-slow
+  animation: pulse 2s infinite
+
+// Задержки для анимаций
+.animation-delay-100
+  animation-delay: 100ms
+
+.animation-delay-200
+  animation-delay: 200ms
+
+.animation-delay-300
+  animation-delay: 300ms
+
+.animation-delay-400
+  animation-delay: 400ms
 
 // Кастомная полоса прокрутки
 ::-webkit-scrollbar 
@@ -24,10 +73,61 @@
 .dark ::-webkit-scrollbar-thumb 
   background: #4b5563
 
-// Анимации для карточек
-.card-hover 
-  transition: all 0.3s ease
+// Глобальные утилиты
+.card-hover
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
   
-  &:hover 
+  &:hover
     transform: translateY(-8px)
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25)
+
+.line-clamp-2
+  display: -webkit-box
+  -webkit-line-clamp: 2
+  -webkit-box-orient: vertical
+  overflow: hidden
+
+.line-clamp-3
+  display: -webkit-box
+  -webkit-line-clamp: 3
+  -webkit-box-orient: vertical
+  overflow: hidden
+
+// Состояния загрузки
+.loading-skeleton
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)
+  background-size: 200% 100%
+  animation: loading 1.5s infinite
+
+.dark .loading-skeleton
+  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%)
+  background-size: 200% 100%
+
+@keyframes loading
+  0%
+    background-position: 200% 0
+  100%
+    background-position: -200% 0
+
+// Анимации для Vue переходов
+.modal-fade-enter-active,
+.modal-fade-leave-active
+  transition: opacity 0.3s ease
+
+.modal-fade-enter-from,
+.modal-fade-leave-to
+  opacity: 0
+
+.page-slide-enter-active
+  transition: all 0.3s ease-out
+
+.page-slide-leave-active
+  transition: all 0.3s ease-in
+
+.page-slide-enter-from
+  opacity: 0
+  transform: translateX(30px)
+
+.page-slide-leave-to
+  opacity: 0
+  transform: translateX(-30px)