create-ex-den-kit/frontend/src/index.css

Create exam projects with Ex-Den-Kit

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-primary: #4F46E5;
  --color-secondary: #7C3AED;
  --color-accent: #EC4899;
}

/* Темы для разных проектов */
[data-theme="bookexchange"] {
  --color-primary: #4F46E5;
  --color-secondary: #7C3AED;
  --color-accent: #EC4899;
}

[data-theme="cargo"] {
  --color-primary: #EA580C;
  --color-secondary: #DC2626;
  --color-accent: #FBBF24;
}

[data-theme="courses"] {
  --color-primary: #059669;
  --color-secondary: #0891B2;
  --color-accent: #8B5CF6;
}

[data-theme="restaurant"] {
  --color-primary: #DC2626;
  --color-secondary: #EA580C;
  --color-accent: #FBBF24;
}

@layer base {
  body {
    @apply bg-gray-50 text-gray-900;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary text-white px-6 py-3 rounded-lg font-medium 
           hover:opacity-90 transition-all duration-200 
           transform hover:scale-105 active:scale-95
           shadow-lg hover:shadow-xl;
  }
  
  .btn-secondary {
    @apply bg-secondary text-white px-6 py-3 rounded-lg font-medium 
           hover:opacity-90 transition-all duration-200
           transform hover:scale-105 active:scale-95;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-lg p-6 
           transition-all duration-300 hover:shadow-xl
           border border-gray-100;
  }
  
  .input-field {
    @apply w-full px-4 py-3 rounded-lg border border-gray-300 
           focus:border-primary focus:ring-2 focus:ring-primary focus:ring-opacity-20
           transition-all duration-200 outline-none;
  }
  
  .error-message {
    @apply text-red-500 text-sm mt-1 animate-slide-in;
  }
}

/* Анимации */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(79, 70, 229, 0.5); }
  50% { box-shadow: 0 0 40px rgba(79, 70, 229, 0.8); }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}