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

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

/* Smooth Scroll Behavior and iOS Overscroll Prevention */
html {
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  /* Proper iOS viewport handling */
  height: -webkit-fill-available;
  /* Prevent horizontal scrolling */
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

body {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  /* Prevent double-tap zoom on mobile */
  touch-action: manipulation;
  /* Prevent horizontal scrolling */
  overflow-x: hidden !important;
  max-width: 100vw !important;
  position: relative;
}

/* 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%);

    /* Responsive Spacing Scale */
    --space-xs: clamp(0.5rem, 2vw, 0.75rem);
    --space-sm: clamp(1rem, 3vw, 1.5rem);
    --space-md: clamp(1.5rem, 4vw, 2rem);
    --space-lg: clamp(2rem, 5vw, 3rem);
    --space-xl: clamp(3rem, 6vw, 4rem);
    --space-2xl: clamp(4rem, 8vw, 6rem);

    /* Fluid Typography */
    --text-xs: clamp(0.75rem, 2vw, 0.875rem);
    --text-sm: clamp(0.875rem, 2.5vw, 1rem);
    --text-base: clamp(1rem, 2.5vw, 1.125rem);
    --text-lg: clamp(1.125rem, 3vw, 1.25rem);
    --text-xl: clamp(1.25rem, 3.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 4vw, 1.875rem);
    --text-3xl: clamp(1.875rem, 5vw, 2.25rem);
    --text-4xl: clamp(2.25rem, 6vw, 3rem);
    --text-5xl: clamp(3rem, 7vw, 3.75rem);
  }
}

/* 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;
    will-change: transform;
  }

  .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;
      width: clamp(260px, 80vw, 360px);
      max-height: clamp(160px, 45vw, 220px);
      margin: 0 auto;
      object-fit: contain;
    }

    /* Proper hero sizing on mobile */
    .hero-content {
      padding: var(--space-sm);
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    /* Ensure touch targets are at least 48px for better mobile UX */
    button, .btn-primary-warm, .btn-secondary-warm {
      min-height: 50px;
      min-width: 50px;
      font-size: var(--text-base);
      padding: 14px clamp(20px, 5vw, 32px);
      width: 100%;
      max-width: 340px;
    }
  }

  .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-3xl md:text-5xl lg:text-6xl font-serif font-bold text-harbor-navy;
    @apply mb-4;
  }

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

  @media (max-width: 768px) {
    .section-title {
      font-size: 1.875rem;
      line-height: 1.2;
      padding: 0 10px;
    }

    .section-subtitle {
      font-size: 1rem;
      line-height: 1.4;
      padding: 0 10px;
    }
  }
}

/* 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;
  /* Removed transform scale to prevent overflow */
  /* transform: scale(1.1); */
}

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

/* Responsive Typography Scale */
@media (max-width: 768px) {
  html {
    font-size: 16px; /* Keep base font size for readability */
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  body {
    width: 100%;
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Ensure all containers use full width */
  .container,
  .content-wrapper,
  main {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
}

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