Initial commit - Church Music Database

new-site/frontend/src/index.css

@@ -0,0 +1,193 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Base Styles */
+:root {
+  --color-primary: #3b82f6;
+  --color-primary-dark: #2563eb;
+  --color-glass-white: rgba(255, 255, 255, 0.1);
+  --color-glass-dark: rgba(0, 0, 0, 0.1);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transition: background 0.3s ease;
+  
+  /* Mobile optimization */
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  overscroll-behavior-y: none;
+}
+
+/* Light mode */
+html:not(.dark) body {
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
+}
+
+/* Dark mode */
+html.dark body {
+  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+  transition: background 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+/* Glassmorphism Utilities */
+@layer utilities {
+  .glass {
+    @apply bg-white/10 backdrop-blur-md border border-white/20 shadow-glass;
+  }
+  
+  .glass-dark {
+    @apply bg-black/10 backdrop-blur-md border border-black/10 shadow-glass;
+  }
+  
+  .glass-card {
+    @apply bg-white/90 backdrop-blur-lg border border-white/50 shadow-soft rounded-2xl;
+  }
+  
+  .glass-nav {
+    @apply bg-white/80 backdrop-blur-xl border-b border-white/30 shadow-soft;
+  }
+  
+  .btn-primary {
+    @apply px-6 py-2.5 bg-primary-600 text-white rounded-xl font-medium
+           hover:bg-primary-700 active:scale-[0.98] transition-all duration-200
+           shadow-soft hover:shadow-soft-lg;
+  }
+  
+  .btn-secondary {
+    @apply px-6 py-2.5 bg-white/20 backdrop-blur-sm text-white rounded-xl font-medium
+           border border-white/30 hover:bg-white/30 active:scale-[0.98]
+           transition-all duration-200;
+  }
+  
+  .btn-ghost {
+    @apply px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-xl font-medium
+           transition-all duration-200;
+  }
+  
+  .input-glass {
+    @apply w-full px-4 py-3 bg-white/80 backdrop-blur-sm border border-gray-200
+           rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500/50
+           focus:border-primary-500 transition-all duration-200 placeholder:text-gray-400;
+  }
+  
+  .card-hover {
+    @apply transition-all duration-300 hover:shadow-soft-lg hover:-translate-y-1;
+  }
+}
+
+/* Page Transitions */
+.page-enter {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.page-enter-active {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+}
+
+.page-exit {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.page-exit-active {
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
+}
+
+/* Selection */
+::selection {
+  background-color: rgba(59, 130, 246, 0.3);
+  color: inherit;
+}
+
+/* Focus Visible */
+:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+/* Prevent text selection on drag */
+.no-select {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Mobile Touch Optimization */
+@media (max-width: 768px) {
+  /* Larger touch targets */
+  button:not(.no-touch-target), 
+  a:not(.no-touch-target), 
+  input[type="checkbox"], 
+  input[type="radio"] {
+    min-height: 44px;
+  }
+  
+  /* Better spacing for mobile */
+  body {
+    font-size: 16px; /* Prevents iOS zoom on focus */
+  }
+  
+  input, textarea, select {
+    font-size: 16px; /* Prevents iOS zoom */
+  }
+  
+  /* Smooth scrolling on mobile */
+  * {
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* iPhone X and later (notch support) */
+@supports (padding: max(0px)) {
+  body {
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+  }
+}
+
+/* Tablet and Desktop refinements */
+@media (min-width: 768px) and (max-width: 1024px) {
+  /* iPad specific adjustments */
+  .container {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}