`tailwind.config.js`

148 lines
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // Omega Brand Colors
        'omega-red': '#C8102E',
        'omega-navy': '#1A1A2E',
        'omega-gold': '#D4AF37',
        'omega-champagne': '#F7E7CE',
        'omega-silver': '#C0C0C0',
        'omega-platinum': '#E5E4E2',

        // Legacy omega object for compatibility
        omega: {
          red: '#C8102E',
          gold: '#FFD700',
          navy: '#1A1A2E',
          silver: '#C0C0C0'
        },

        // Luxury Palette
        'gold': {
          DEFAULT: '#D4AF37',
          50: '#FFF9E6',
          100: '#FFF3CC',
          200: '#FFE799',
          300: '#FFDB66',
          400: '#FFCF33',
          500: '#D4AF37',
          600: '#B8962E',
          700: '#9C7D25',
          800: '#80641C',
          900: '#644B13',
        },
        'rose-gold': {
          DEFAULT: '#B76E79',
          50: '#F9F0F1',
          100: '#F3E1E3',
          200: '#E7C3C7',
          300: '#DBA5AB',
          400: '#CF878F',
          500: '#B76E79',
          600: '#A05864',
          700: '#89424F',
          800: '#722C3A',
          900: '#5B1625',
        },
      },
      fontFamily: {
        'display': ['"Playfair Display"', 'serif'],
        'luxury': ['"Cormorant Garamond"', 'serif'],
        'sans': ['Montserrat', 'system-ui', 'sans-serif'],
      },
      backgroundImage: {
        'gradient-gold': 'linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%)',
        'gradient-rose-gold': 'linear-gradient(135deg, #B76E79 0%, #E8B4BC 50%, #B76E79 100%)',
        'gradient-platinum': 'linear-gradient(135deg, #E5E4E2 0%, #F8F8F8 50%, #E5E4E2 100%)',
        'gradient-omega': 'linear-gradient(135deg, #1A1A2E 0%, #C8102E 100%)',
        'gradient-luxury-dark': 'linear-gradient(180deg, #0A0A14 0%, #1A1A2E 50%, #2D2D44 100%)',
      },
      boxShadow: {
        'luxury': '0 30px 60px -15px rgba(0, 0, 0, 0.3), 0 0 40px rgba(200, 16, 46, 0.05)',
        'gold': '0 0 30px rgba(212, 175, 55, 0.4), 0 0 60px rgba(212, 175, 55, 0.2)',
        'red': '0 0 30px rgba(200, 16, 46, 0.4), 0 0 60px rgba(200, 16, 46, 0.2)',
        'deep': '0 50px 100px -20px rgba(0, 0, 0, 0.5)',
      },
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in',
        'slide-up': 'slideUp 0.5s ease-out',
        'slide-down': 'slideDown 0.5s ease-out',
        'scale-in': 'scaleIn 0.3s ease-out',
        'float': 'float 6s ease-in-out infinite',
        'shimmer': 'shimmer 2s linear infinite',
        'pulse-glow': 'pulseGlow 3s ease-in-out infinite',
        'tick-tock': 'tickTock 4s ease-in-out infinite',
        'price-rise': 'priceRise 2s ease-out forwards',
        'luxury-spin': 'luxurySpin 1s cubic-bezier(0.87, 0, 0.13, 1) infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' }
        },
        slideUp: {
          '0%': { transform: 'translateY(20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' }
        },
        slideDown: {
          '0%': { transform: 'translateY(-20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' }
        },
        scaleIn: {
          '0%': { transform: 'scale(0.9)', opacity: '0' },
          '100%': { transform: 'scale(1)', opacity: '1' }
        },
        float: {
          '0%, 100%': { transform: 'translateY(0px) translateZ(0)' },
          '50%': { transform: 'translateY(-20px) translateZ(0)' },
        },
        shimmer: {
          '0%': { backgroundPosition: '-1000px 0' },
          '100%': { backgroundPosition: '1000px 0' },
        },
        pulseGlow: {
          '0%, 100%': {
            boxShadow: '0 0 20px rgba(212, 175, 55, 0.3), 0 0 40px rgba(212, 175, 55, 0.1)',
          },
          '50%': {
            boxShadow: '0 0 40px rgba(212, 175, 55, 0.5), 0 0 80px rgba(212, 175, 55, 0.2)',
          },
        },
        tickTock: {
          '0%, 100%': { transform: 'rotate(0deg)' },
          '25%': { transform: 'rotate(5deg)' },
          '75%': { transform: 'rotate(-5deg)' },
        },
        priceRise: {
          '0%': {
            transform: 'translateY(20px)',
            opacity: '0',
          },
          '50%': {
            opacity: '1',
          },
          '100%': {
            transform: 'translateY(-10px)',
            opacity: '0',
          },
        },
        luxurySpin: {
          '0%': { transform: 'rotate(0deg)' },
          '100%': { transform: 'rotate(360deg)' },
        },
      },
      backdropBlur: {
        xs: '2px',
      },
    },
  },
  plugins: [],
}