`app/globals.css`

252 lines
@import "tailwindcss";

:root {
  --wine-primary: #8b0036;
  --wine-secondary: #c41e3a;
  --gold: #d4af37;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
  width: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: #8b0036;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #c41e3a;
}

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

/* Focus visible for accessibility */
*:focus-visible {
  outline: 2px solid #d4af37;
  outline-offset: 2px;
}

/* Mobile optimization - Ensure minimum touch target size */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Prevent iOS zoom on input focus */
@media (max-width: 768px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  /* Ensure buttons are easily tappable */
  button, a {
    min-height: 44px;
    padding: 12px 16px;
  }

  /* Optimize card spacing for mobile */
  .wine-card {
    margin-bottom: 16px;
  }

  /* Ensure horizontal scrolling is prevented */
  body {
    overflow-x: hidden;
    width: 100%;
  }

  /* Better mobile font sizes */
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }
  p { font-size: 16px; }
}

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Wine card styles */
.wine-card {
  @apply bg-white rounded-2xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105;
}

/* Badge styles */
.wine-badge-new {
  @apply px-3 py-1 bg-gradient-to-r from-green-500 to-emerald-600 text-white text-xs font-bold rounded-full shadow-md;
}

.wine-badge-deal {
  @apply px-3 py-1 bg-gradient-to-r from-red-500 to-pink-600 text-white text-xs font-bold rounded-full shadow-md;
}

.wine-badge-featured {
  @apply px-3 py-1 bg-gradient-to-r from-purple-500 to-indigo-600 text-white text-xs font-bold rounded-full shadow-md;
}

/* Mobile touch improvements */
@media (hover: none) {
  .wine-card:hover {
    transform: scale(1);
  }

  .wine-card:active {
    transform: scale(0.98);
  }
}

/* Prevent text selection on interactive elements */
button, a {
  -webkit-tap-highlight-color: transparent;
}

/* Custom input styles for iOS */
input[type="text"],
input[type="search"],
select {
  -webkit-appearance: none;
  appearance: none;
}

/* Loading shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.shimmer {
  animation: shimmer 2s linear infinite;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%
  );
  background-size: 1000px 100%;
}

/* Smooth transitions for interactive elements */
.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom gradient backgrounds */
.bg-wine-gradient {
  background: linear-gradient(135deg, #8b0036 0%, #c41e3a 100%);
}

.bg-gold-gradient {
  background: linear-gradient(135deg, #d4af37 0%, #f0c32e 100%);
}

/* Safe area padding for iOS notch */
@supports (padding: max(0px)) {
  .safe-top {
    padding-top: max(1rem, env(safe-area-inset-top));
  }

  .safe-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* Prevent zoom on input focus for iOS */
@media screen and (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Accessibility improvements */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .wine-card {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }

  body {
    background: white !important;
  }

  .wine-card {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ddd;
  }
}