website/apps/website/assets/css/main.css

/* Harbor Smith Main Styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Smooth Scroll Behavior */
html {
  scroll-behavior: smooth;
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .hero-video-container,
  .parallax {
    transform: none !important;
  }
}

/* Custom Properties */
@layer base {
  :root {
    /* Primary Colors */
    --primary-blue: #001f3f;
    --harbor-navy: #1e3a5f;
    --harbor-gold: #b48b4e;
    --harbor-amber: #9d7943;
    --harbor-yellow: #c9a56f;
    --harbor-light: #f0f0f0;

    /* Gradients */
    --gradient-warm: linear-gradient(135deg, #b48b4e 0%, #c9a56f 100%);
    --gradient-blue: linear-gradient(135deg, #001f3f 0%, #1e3a5f 100%);
  }
}

/* Typography */
@layer base {
  body {
    @apply font-sans text-gray-800 antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-serif;
  }

  h1 {
    @apply text-5xl md:text-6xl lg:text-7xl font-bold;
  }

  h2 {
    @apply text-4xl md:text-5xl font-bold;
  }

  h3 {
    @apply text-3xl md:text-4xl font-bold;
  }

  h4 {
    @apply text-2xl md:text-3xl font-semibold;
  }

  h5 {
    @apply text-xl md:text-2xl font-semibold;
  }

  h6 {
    @apply text-lg md:text-xl font-semibold;
  }
}

/* Page Transitions */
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from {
  opacity: 0;
  transform: translateY(20px);
}
.page-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

.layout-enter-active,
.layout-leave-active {
  transition: all 0.4s;
}
.layout-enter-from {
  opacity: 0;
  transform: scale(0.98);
}
.layout-leave-to {
  opacity: 0;
  transform: scale(1.02);
}

/* Harbor Smith Custom Components */
@layer components {
  /* Navigation Styles handled via voyage-layout.css */
  /* Button Styles */
  .btn-primary-warm {
    @apply px-8 py-3 bg-gradient-to-r from-harbor-gold to-harbor-yellow text-white font-semibold rounded-full;
    @apply hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-300;
    @apply relative overflow-hidden;
  }

  .btn-secondary-warm {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: 9999px;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;
  }

  .btn-secondary-warm:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(12, 35, 64, 0.25);
  }

  .btn-booking {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
  }

  .btn-booking:hover {
    background: rgba(255, 255, 255, 0.4);
    color: #10213c;
    border-color: rgba(255, 255, 255, 0.7);
  }

  .btn-booking.primary {
    background: #ffffff;
    color: #b48b4e;
    border-color: #ffffff;
    box-shadow: 0 10px 25px rgba(180, 139, 78, 0.25);
  }

  .btn-booking.primary:hover {
    background: linear-gradient(135deg, #b48b4e 0%, #c9a56f 100%);
    color: #ffffff;
    border-color: transparent;
  }

  .btn-booking.secondary {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
  }

  .btn-booking.secondary:hover {
    background: #ffffff;
    color: #10213c;
    border-color: #ffffff;
  }

  /* Card Styles */
  .story-card {
    @apply bg-white rounded-xl overflow-hidden shadow-lg;
    @apply transform transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl;
  }

  .booking-card {
    @apply bg-white rounded-2xl p-8 shadow-xl;
    @apply transform transition-all duration-500;
  }

  .booking-card.featured {
    @apply scale-105 border-4 border-harbor-gold;
    box-shadow: 0 20px 40px rgba(180, 139, 78, 0.2);
  }

  .yacht-card {
    @apply bg-white rounded-2xl overflow-hidden shadow-xl;
    @apply opacity-0 scale-95 transition-all duration-700;
  }

  .yacht-card.active {
    @apply opacity-100 scale-100;
  }

  /* Hero Section */
  .hero-video-container {
    @apply absolute inset-0 w-full h-full overflow-hidden;
  }

  .hero-overlay {
    @apply absolute inset-0;
    z-index: 2;
  }

  /* Hero Logo Styles */
  .hero-logo img {
    height: 250px;
    margin: 40px 0;
    width: auto;
    display: block;
  }

  @media (max-width: 768px) {
    .hero-logo img {
      height: auto;
      max-height: 150px;
      width: 90%;
      max-width: 280px;
      margin: 20px auto;
    }
  }

  .gradient-warm {
    background: linear-gradient(to bottom,
        rgba(0, 31, 63, 0.3) 0%,
        rgba(0, 31, 63, 0.5) 50%,
        rgba(0, 31, 63, 0.7) 100%);
  }

  .gradient-depth {
    background: linear-gradient(to right,
        rgba(220, 20, 60, 0.1) 0%,
        transparent 100%);
  }

  .hero-content {
    @apply relative z-10 text-white text-center;
  }

  /* Fleet Carousel */
  .fleet-nav {
    @apply absolute top-1/2 -translate-y-1/2 z-10;
    @apply w-12 h-12 bg-white/90 rounded-full shadow-xl;
    @apply flex items-center justify-center cursor-pointer;
    @apply hover:bg-white hover:scale-110 transition-all duration-300;
  }

  .fleet-prev {
    @apply fleet-nav left-4;
  }

  .fleet-next {
    @apply fleet-nav right-4;
  }

  .fleet-dots {
    @apply flex gap-3 justify-center mt-8;
  }

  .dot {
    @apply w-3 h-3 rounded-full bg-gray-300 cursor-pointer;
    @apply transition-all duration-300 hover:bg-harbor-gold;
  }

  .dot.active {
    @apply bg-harbor-gold w-8;
  }

  /* Trust Badge */
  .trust-badge {
    @apply inline-flex items-center gap-2 px-4 py-2 bg-harbor-gold/20 backdrop-blur-sm rounded-full;
  }

  /* Section Styles */
  .section-title {
    @apply text-4xl md:text-5xl lg:text-6xl font-serif font-bold text-harbor-navy;
    @apply mb-4;
  }

  .section-subtitle {
    @apply text-xl md:text-2xl text-gray-600 mb-12;
  }
}

/* Animation Utilities */
@layer utilities {
  .animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
  }

  .animate-fade-up-delay {
    animation: fadeUp 1s ease-out 0.3s both;
  }

  .animate-fade-up-delay-2 {
    animation: fadeUp 1s ease-out 0.6s both;
  }

  .animate-slide-up {
    animation: slideUp 0.6s ease-out forwards;
  }

  .animate-scale-in {
    animation: scaleIn 0.5s ease-out forwards;
  }

  .animate-wave {
    animation: wave 10s ease-in-out infinite;
  }

  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
  }
}

/* Scrollbar Styles */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--harbor-gold);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--harbor-amber);
}

/* Ripple Effect for Buttons */
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple 0.6s ease-out;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Gold Drop Shadows */
.shadow-gold {
  box-shadow: 0 4px 15px rgba(180, 139, 78, 0.2);
}

.shadow-gold-lg {
  box-shadow: 0 10px 25px rgba(180, 139, 78, 0.25);
}

.shadow-gold-xl {
  box-shadow: 0 20px 40px rgba(180, 139, 78, 0.3);
}

/* Apply gold shadows to key elements */
.btn-primary-warm,
.btn-secondary-warm {
  box-shadow: 0 4px 15px rgba(180, 139, 78, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary-warm:hover,
.btn-secondary-warm:hover {
  box-shadow: 0 8px 25px rgba(180, 139, 78, 0.35);
}

.story-card,
.booking-card,
.service-card {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.story-card:hover,
.booking-card:hover,
.service-card:hover {
  box-shadow: 0 20px 40px rgba(180, 139, 78, 0.25);
}

/* Video Background Optimization */
.hero-video {
  @apply absolute w-full h-full object-cover;
  transform: scale(1.1);
}

/* Loading States */
.skeleton {
  @apply bg-gray-200 animate-pulse rounded;
}

/* Responsive Typography Scale */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media (min-width: 1536px) {
  html {
    font-size: 18px;
  }
}