ezsepa-website/styles.css

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

/* Custom CSS Variables */
:root {
  --color-brand-primary: #FF7A59;
  --color-brand-hover: #FF5733;
  --color-brand-blue: #2563EB;
  --color-brand-navy: #1E293B;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}

/* Base Styles */
@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply font-sans;
  }
}

/* Custom Component Styles */
@layer components {

  /* Button variants */
  .btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-primary text-white font-semibold rounded-lg hover:bg-brand-orange-dark transition-all shadow-md hover:shadow-lg transform hover:-translate-y-0.5;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-white text-secondary font-semibold rounded-lg border-2 border-secondary hover:bg-blue-50 transition-colors;
  }

  /* Card styles */
  .card {
    @apply bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow;
  }

  /* Section spacing */
  .section {
    @apply py-20;
  }

  .section-title {
    @apply text-3xl md:text-4xl font-bold text-gray-900 mb-4;
  }

  .section-subtitle {
    @apply text-xl text-gray-600 max-w-3xl mx-auto;
  }
}

/* Custom Utilities */
@layer utilities {

  /* Animation utilities */
  .animate-delay-100 {
    animation-delay: 100ms;
  }

  .animate-delay-200 {
    animation-delay: 200ms;
  }

  .animate-delay-300 {
    animation-delay: 300ms;
  }

  /* Custom focus styles */
  .focus-brand {
    @apply focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
  }

  /* Gradient text */
  .gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary;
  }
}

/* Custom Scrollbar (webkit browsers) */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
  @apply bg-primary rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-brand-orange-dark;
}

/* Smooth transitions for page load */
body {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Print styles */
@media print {

  nav,
  footer,
  .no-print {
    display: none !important;
  }

  body {
    @apply text-black bg-white;
  }
}

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .card {
    @apply border-2 border-gray-900;
  }

  button,
  a {
    @apply underline;
  }
}

/* Dark mode support (optional - disabled by default) */
/* Uncomment to enable dark mode */
/*
@media (prefers-color-scheme: dark) {
  body {
    @apply bg-gray-900 text-gray-100;
  }
  
  .card {
    @apply bg-gray-800 border-gray-700;
  }
  
  .section-title {
    @apply text-white;
  }
}
*/