--

README.md

@@ -1,6 +1,12 @@
 
 # применяя правила:
 
+## Цвета и управление темами
+во всех *.styl файлах используй цвета в виде переменных, определённых в файле tailwind.config.js
+
+## Стили
+все глобальный настройки стилей, пиши в app/temp.styl в остальных файлах, строго стили необходимые только для данного компаонента
+
 ## стиль написания классов 
 .container.mx-auto.px-4 - не правильно
 div(class="container.mx-auto  px-4") - правильно

vue/app/pages/About/index.styl

@@ -1,119 +1,27 @@
-// app/pages/About/index.styl
-
-// Анимации появления
-@keyframes fadeInUp
-  0%
-    opacity: 0
-    transform: translateY(30px)
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-.animate-fade-in-up
-  animation: fadeInUp 0.6s ease-out forwards
-
-// Задержки для анимаций
-.bg-white, .bg-accent, .bg-primary, .bg-secondary
-  opacity: 0
-  
-  &.animate-fade-in-up
-    opacity: 1
+// Локальные стили только для About страницы
+.about-section
+  .info-item
+    transition: all 0.3s ease
+    padding: 0.5rem
+    border-radius: 0.5rem
     
-  &:nth-child(1)
-    animation-delay: 0.1s
-  &:nth-child(2)
-    animation-delay: 0.2s
-  &:nth-child(3)
-    animation-delay: 0.3s
-  &:nth-child(4)
-    animation-delay: 0.4s
-
-// Стили для карточек с иконками
-.bg-white, .bg-gray-800
-  transition: all 0.3s ease
-  
-  &:hover
-    transform: translateY(-5px)
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)
-
-// Градиентные тени для акцентных карточек
-.bg-accent, .bg-primary, .bg-secondary
-  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
-
-// Стили для типографики
-.prose
-  p
-    line-height: 1.7
-    margin-bottom: 1rem
+    &:hover
+      background-color: rgba(0, 0, 0, 0.02)
+      
+      .dark &
+        background-color: rgba(255, 255, 255, 0.02)
     
-  strong
-    color: #d69e2e
-    font-weight: 600
+    .icon
+      transition: transform 0.3s ease
+      
+    &:hover .icon
+      transform: scale(1.1)
 
 // Адаптивность для мобильных устройств
 @media (max-width: 768px)
-  .grid
-    gap: 1.5rem
-    
-  .bg-white, .bg-gray-800
-    padding: 1.5rem
-    
-  .text-4xl
-    font-size: 2.25rem
-    line-height: 2.5rem
-    
-  .text-2xl
-    font-size: 1.5rem
-    line-height: 2rem
-
-// Темная тема улучшения
-.dark
-  .bg-white
-    background-color: #1f2937
-    
-  .prose
-    p
-      color: #d1d5db
+  .about-section
+    .grid
+      gap: 1.5rem
       
-    strong
-      color: #d69e2e
-
-// Плавный скролл для всей страницы
-html
-  scroll-behavior: smooth
-
-// Кастомные стили для иконок
-.w-12.h-12
-  transition: all 0.3s ease
-  
-  &:hover
-    transform: scale(1.1)
-
-// Эффекты для кнопок призыва к действию
-.bg-gradient-to-r
-  position: relative
-  overflow: hidden
-  
-  &::after
-    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::after
-    left: 100%
+    .bg-white, .bg-gray-800
+      padding: 1.5rem

vue/app/shared/EventDetailModal/index.styl

@@ -1,5 +1,4 @@
-// app/shared/EventDetailModal/index.styl
-
+// Локальные стили для модального окна
 .event-detail
   .event-stats
     .stat
@@ -10,29 +9,6 @@
         border-color: #d69e2e
         transform: translateY(-2px)
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
-      
-      .stat-value
-        transition: color 0.3s ease
-        
-      .stat-label
-        transition: color 0.3s ease
-
-  .info-item
-    transition: all 0.3s ease
-    padding: 0.5rem
-    border-radius: 0.5rem
-    
-    &:hover
-      background-color: rgba(0, 0, 0, 0.02)
-      
-      .dark &
-        background-color: rgba(255, 255, 255, 0.02)
-    
-    .icon
-      transition: transform 0.3s ease
-      
-    &:hover .icon
-      transform: scale(1.1)
 
   .action-buttons
     button
@@ -58,158 +34,3 @@
         
       &:active
         transform: scale(0.98)
-
-  .social-share
-    button
-      transition: all 0.3s ease
-      position: relative
-      overflow: hidden
-      
-      &::after
-        content: ''
-        position: absolute
-        top: 0
-        left: -100%
-        width: 100%
-        height: 100%
-        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent)
-        transition: left 0.5s
-        
-      &:hover::after
-        left: 100%
-
-// Анимации для модального контента
-.modal-content
-  .event-visual
-    img
-      transition: transform 0.5s ease
-      
-    &:hover img
-      transform: scale(1.02)
-
-// Кастомные стили для категорий
-.category-badge
-  &.classical
-    background: linear-gradient(135deg, #3b82f6, #1d4ed8)
-    
-  &.folk
-    background: linear-gradient(135deg, #10b981, #047857)
-    
-  &.jazz
-    background: linear-gradient(135deg, #8b5cf6, #7c3aed)
-    
-  &.pop
-    background: linear-gradient(135deg, #ec4899, #db2777)
-    
-  &.dance
-    background: linear-gradient(135deg, #f59e0b, #d97706)
-    
-  &.experimental
-    background: linear-gradient(135deg, #6366f1, #4f46e5)
-    
-  &.theater
-    background: linear-gradient(135deg, #ef4444, #dc2626)
-    
-  &.opera
-    background: linear-gradient(135deg, #14b8a6, #0d9488)
-
-// Адаптивность
-@media (max-width: 1024px)
-  .event-detail
-    .grid
-      grid-template-columns: 1fr !important
-      
-    .event-stats
-      grid-template-columns: repeat(3, 1fr)
-      
-    .action-buttons
-      flex-direction: column
-
-@media (max-width: 640px)
-  .event-detail
-    .event-stats
-      grid-template-columns: 1fr
-      gap: 0.5rem
-      
-    .info-item
-      flex-direction: column
-      align-items: flex-start
-      
-      .icon
-        margin-bottom: 0.5rem
-        margin-right: 0
-
-// Анимация появления статистики
-@keyframes statAppear
-  0%
-    opacity: 0
-    transform: translateY(20px)
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-.event-stats .stat
-  animation: statAppear 0.6s ease forwards
-  
-  &:nth-child(1)
-    animation-delay: 0.1s
-  &:nth-child(2)
-    animation-delay: 0.2s
-  &:nth-child(3)
-    animation-delay: 0.3s
-
-// Стили для состояния "мало билетов"
-.low-availability
-  .stat-value
-    animation: pulse 2s infinite
-    
-  @keyframes pulse
-    0%, 100%
-      opacity: 1
-    50%
-      opacity: 0.7
-
-// Стили для иконок
-.icon
-  svg
-    transition: all 0.3s ease
-    
-  &:hover svg
-    filter: drop-shadow(0 2px 4px rgba(214, 158, 46, 0.3))
-
-// Темная тема улучшения
-.dark
-  .event-detail
-    .info-item:hover
-      background-color: rgba(255, 255, 255, 0.05)
-      
-    .stat
-      background: linear-gradient(135deg, rgba(55, 65, 81, 0.8), rgba(31, 41, 55, 0.8))
-      border: 1px solid rgba(75, 85, 99, 0.5)
-      
-      &:hover
-        border-color: #d69e2e
-        background: linear-gradient(135deg, rgba(55, 65, 81, 1), rgba(31, 41, 55, 1))
-
-// Плавные переходы для всего контента
-.event-detail > *
-  transition: all 0.3s ease
-
-// Кастомный скроллбар для модального окна
-.modal-content
-  &::-webkit-scrollbar
-    width: 6px
-    
-  &::-webkit-scrollbar-track
-    background: rgba(0, 0, 0, 0.1)
-    border-radius: 3px
-    
-    .dark &
-      background: rgba(255, 255, 255, 0.1)
-      
-  &::-webkit-scrollbar-thumb
-    background: #d69e2e
-    border-radius: 3px
-    
-    &:hover
-      background: #b8860b

vue/tailwind.config.js

@@ -1,121 +1,79 @@
 module.exports = {
-  content: ['./src/**/*.{html,js,ts,jsx,tsx,pug,styl,json}'],
-  darkMode: 'class', // или 'media' для автоматического определения системной темы
+  content: [
+    "./app/**/*.{pug,js,coffee,vue}",
+    "./shared/**/*.{pug,js,coffee,vue}"
+  ],
+  darkMode: 'class',
   theme: {
     extend: {
+      // Цветовая палитра из ваших styl-файлов
       colors: {
-        // Основная палитра на основе красного золота
-        'primary': {
-          50: '#fef7ee',
-          100: '#fdedd6',
-          200: '#fbd7ad',
-          300: '#f8ba79',
-          400: '#f49343',
-          500: '#f17317', // Базовый красное золото
-          600: '#e2570d',
-          700: '#bc3f0d',
-          800: '#963213',
-          900: '#792b14',
-          950: '#411308',
+        primary: '#1a202c',
+        accent: '#d69e2e', 
+        secondary: '#742a2a',
+        // Полупрозрачные цвета для анимаций
+        overlay: {
+          light: 'rgba(255, 255, 255, 0.1)',
+          dark: 'rgba(0, 0, 0, 0.02)',
+          white: 'rgba(255, 255, 255, 0.2)'
         },
-        
-        // Вторичные цвета - глубокие благородные тона
-        'secondary': {
-          50: '#f8fafc',
-          100: '#f1f5f9',
-          200: '#e2e8f0',
-          300: '#cbd5e1',
-          400: '#94a3b8',
-          500: '#64748b',
-          600: '#475569',
-          700: '#334155',
-          800: '#1e293b',
-          900: '#0f172a',
-          950: '#020617',
-        },
-        
-        // Акцентные цвета - контрастные элементы
-        'accent': {
-          50: '#fffbeb',
-          100: '#fef3c7',
-          200: '#fde68a',
-          300: '#fcd34d',
-          400: '#fbbf24',
-          500: '#f59e0b', // Теплый золотой акцент
-          600: '#d97706',
-          700: '#b45309',
-          800: '#92400e',
-          900: '#78350f',
-          950: '#451a03',
-        },
-        
-        // Фоновые цвета для светлой и темной тем
-        'surface': {
-          light: {
-            DEFAULT: '#ffffff',
-            variant: '#f8fafc',
-            elevated: '#ffffff',
+        // Градиентные цвета для категорий
+        gradient: {
+          classical: ['#3b82f6', '#1d4ed8'],
+          folk: ['#10b981', '#047857'],
+          jazz: ['#8b5cf6', '#7c3aed'],
+          pop: ['#ec4899', '#db2777'],
+          dance: ['#f59e0b', '#d97706'],
+          experimental: ['#6366f1', '#4f46e5'],
+          theater: ['#ef4444', '#dc2626'],
+          opera: ['#14b8a6', '#0d9488']
+        }
+      },
+      // Анимации из index.styl
+      animation: {
+        'fade-in-up': 'fadeInUp 0.6s ease-out forwards',
+        'pulse-slow': 'pulse 2s infinite',
+        'stat-appear': 'statAppear 0.6s ease forwards',
+        'slide-in': 'slideIn 0.5s ease-out'
+      },
+      keyframes: {
+        fadeInUp: {
+          '0%': { 
+            opacity: '0',
+            transform: 'translateY(30px)'
           },
-          dark: {
-            DEFAULT: '#0f172a',
-            variant: '#1e293b',
-            elevated: '#334155',
+          '100%': { 
+            opacity: '1',
+            transform: 'translateY(0)'
           }
         },
-        
-        // Статусные цвета
-        'success': {
-          50: '#f0fdf4',
-          100: '#dcfce7',
-          200: '#bbf7d0',
-          300: '#86efac',
-          400: '#4ade80',
-          500: '#22c55e',
-          600: '#16a34a',
-          700: '#15803d',
-          800: '#166534',
-          900: '#14532d',
-        },
-        'warning': {
-          50: '#fffbeb',
-          100: '#fef3c7',
-          200: '#fde68a',
-          300: '#fcd34d',
-          400: '#fbbf24',
-          500: '#f59e0b',
-          600: '#d97706',
-          700: '#b45309',
-          800: '#92400e',
-          900: '#78350f',
+        statAppear: {
+          '0%': {
+            opacity: '0',
+            transform: 'translateY(20px)'
+          },
+          '100%': {
+            opacity: '1', 
+            transform: 'translateY(0)'
+          }
         },
-        'error': {
-          50: '#fef2f2',
-          100: '#fee2e2',
-          200: '#fecaca',
-          300: '#fca5a5',
-          400: '#f87171',
-          500: '#ef4444',
-          600: '#dc2626',
-          700: '#b91c1c',
-          800: '#991b1b',
-          900: '#7f1d1d',
+        slideIn: {
+          '0%': {
+            opacity: '0',
+            transform: 'translateX(-100px)'
+          },
+          '100%': {
+            opacity: '1',
+            transform: 'translateX(0)'
+          }
         }
       },
-      
-      // Дополнительные настройки темы
-      fontFamily: {
-        'display': ['Playfair Display', 'serif'], // Для заголовков
-        'body': ['Inter', 'sans-serif'], // Для основного текста
-      },
-      
-      backgroundImage: {
-        'gold-gradient': 'linear-gradient(135deg, #f17317 0%, #f59e0b 100%)',
-        'premium-gradient': 'linear-gradient(135deg, #792b14 0%, #411308 100%)',
-      },
-      
-      boxShadow: {
-        'gold': '0 4px 14px 0 rgba(241, 115, 23, 0.3)',
-        'premium': '0 8px 32px 0 rgba(121, 43, 20, 0.4)',
+      // Задержки для анимаций
+      transitionDelay: {
+        '100': '100ms',
+        '200': '200ms',
+        '300': '300ms',
+        '400': '400ms'
       }
     },
   },