🧰 Story 1.2: configuration tailwind

assets/css/input.css

@@ -0,0 +1,190 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+
+  body {
+    @apply bg-background text-text-primary font-sans antialiased;
+  }
+
+  h1 { @apply text-display text-text-primary; }
+  h2 { @apply text-heading text-text-primary; }
+  h3 { @apply text-subheading text-text-primary; }
+  p { @apply text-body text-text-secondary; }
+
+  a {
+    @apply text-primary hover:text-primary-light transition-colors duration-150;
+  }
+
+  :focus-visible {
+    @apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-background;
+  }
+
+  ::selection {
+    @apply bg-primary/30 text-text-primary;
+  }
+}
+
+@layer components {
+  .container-content {
+    @apply max-w-content mx-auto px-4 sm:px-6 lg:px-8;
+  }
+
+  .btn {
+    @apply inline-flex items-center justify-center gap-2
+           px-6 py-3 font-medium rounded-lg
+           transition-all duration-150
+           focus:outline-none focus:ring-2 focus:ring-offset-2
+           focus:ring-offset-background
+           disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .btn-primary {
+    @apply btn bg-primary text-background
+           hover:bg-primary-light active:bg-primary-dark
+           focus:ring-primary;
+  }
+
+  .btn-secondary {
+    @apply btn border-2 border-primary text-primary bg-transparent
+           hover:bg-primary hover:text-background
+           focus:ring-primary;
+  }
+
+  .btn-ghost {
+    @apply btn text-primary bg-transparent
+           hover:text-primary-light hover:bg-surface-light
+           focus:ring-primary;
+  }
+
+  .badge {
+    @apply inline-flex items-center px-2.5 py-1
+           text-xs font-medium rounded
+           bg-surface-light text-text-secondary;
+  }
+
+  .badge-primary {
+    @apply bg-primary/20 text-primary;
+  }
+
+  .badge-muted {
+    @apply bg-border text-text-muted;
+  }
+
+  .card {
+    @apply bg-surface rounded-lg overflow-hidden
+           border border-border/50
+           transition-all duration-200;
+  }
+
+  .card-interactive {
+    @apply card cursor-pointer
+           hover:-translate-y-1 hover:shadow-card-hover
+           hover:border-border;
+  }
+
+  .card-body {
+    @apply p-4 sm:p-6;
+  }
+
+  .input {
+    @apply w-full px-4 py-3
+           bg-surface border border-border rounded-lg
+           text-text-primary placeholder-text-muted
+           transition-all duration-150
+           focus:outline-none focus:border-primary focus:shadow-input-focus;
+  }
+
+  .input-error {
+    @apply border-error focus:border-error
+           focus:shadow-[0_0_0_3px_rgba(248,113,113,0.2)];
+  }
+
+  .textarea {
+    @apply input min-h-[150px] resize-y;
+  }
+
+  .label {
+    @apply block text-sm font-medium text-text-secondary mb-2;
+  }
+
+  .label-required::after {
+    content: '*';
+    @apply text-error ml-1;
+  }
+
+  .error-message {
+    @apply text-sm text-error mt-1.5 flex items-center gap-1;
+  }
+
+  .section {
+    @apply py-16 sm:py-24;
+  }
+
+  .section-header {
+    @apply text-center mb-12;
+  }
+
+  .section-title {
+    @apply text-heading mb-4;
+  }
+
+  .section-subtitle {
+    @apply text-body text-text-secondary max-w-2xl mx-auto;
+  }
+
+  .testimonial {
+    @apply bg-surface-light rounded-lg p-6 border-l-4 border-primary;
+  }
+
+  .breadcrumb {
+    @apply flex items-center gap-2 text-sm text-text-muted;
+  }
+
+  .breadcrumb-link {
+    @apply text-text-secondary hover:text-primary transition-colors;
+  }
+
+  .breadcrumb-current {
+    @apply text-text-primary;
+  }
+}
+
+@layer utilities {
+  .animate-fade-in {
+    animation: fadeIn 0.6s ease-out forwards;
+  }
+
+  .animate-fade-in-up {
+    animation: fadeInUp 0.6s ease-out forwards;
+  }
+
+  .animation-delay-100 { animation-delay: 100ms; }
+  .animation-delay-200 { animation-delay: 200ms; }
+  .animation-delay-300 { animation-delay: 300ms; }
+
+  .aspect-thumbnail {
+    aspect-ratio: 16 / 9;
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}