File size: 2,686 Bytes
c224adc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

@layer base {
  html {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-ivory-50 text-charcoal-600;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, serif;
    @apply text-charcoal-700;
  }
}

@layer components {
  .wedding-card {
    @apply bg-white rounded-2xl border border-ivory-200 shadow-soft;
  }

  .wedding-card-hover {
    @apply wedding-card transition-all duration-300 hover:shadow-lg hover:border-gold-200 hover:-translate-y-0.5;
  }

  .wedding-btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-charcoal-700 text-ivory-50 rounded-xl
           font-body font-medium text-sm tracking-wide
           transition-all duration-300
           hover:bg-charcoal-600 hover:shadow-gold active:scale-[0.98];
  }

  .wedding-btn-gold {
    @apply inline-flex items-center justify-center px-6 py-3 bg-gold-400 text-white rounded-xl
           font-body font-medium text-sm tracking-wide
           transition-all duration-300
           hover:bg-gold-500 hover:shadow-gold active:scale-[0.98];
  }

  .wedding-btn-rose {
    @apply inline-flex items-center justify-center px-6 py-3 bg-rose-400 text-white rounded-xl
           font-body font-medium text-sm tracking-wide
           transition-all duration-300
           hover:bg-rose-500 hover:shadow-rose active:scale-[0.98];
  }

  .wedding-btn-outline {
    @apply inline-flex items-center justify-center px-6 py-3 border-2 border-charcoal-200 text-charcoal-600 rounded-xl
           font-body font-medium text-sm tracking-wide
           transition-all duration-300
           hover:border-gold-300 hover:text-gold-500 active:scale-[0.98];
  }

  .wedding-input {
    @apply w-full px-4 py-3 bg-ivory-50 border border-ivory-200 rounded-xl
           font-body text-sm text-charcoal-600
           placeholder:text-charcoal-300
           transition-all duration-200
           focus:outline-none focus:border-gold-300 focus:ring-2 focus:ring-gold-100;
  }

  .wedding-section {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .wedding-divider {
    @apply w-16 h-px bg-gradient-to-r from-transparent via-gold-300 to-transparent mx-auto;
  }

  .wedding-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium font-body;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}