File size: 2,937 Bytes
6d65f0c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/* Tailwind CSS directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base layer with theme configuration */
@layer base {
  /* Root color variables for theming */
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }

  /* Base HTML and body styles */
  html, body {
    @apply h-full w-full;
    -webkit-overflow-scrolling: touch;
    position: relative;
    overscroll-behavior-y: none;
  }

  /* Body specific styles */
  body {
    @apply bg-neutral-light text-neutral-dark antialiased;
  }
}

/* Conference card component styles */
.conference-card {
  @apply bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 p-4 flex flex-col;
}

/* Tag component styles */
.tag {
  @apply inline-flex items-center px-2 py-1 rounded-full text-sm font-medium bg-primary/10 text-primary;
}

/* Countdown component styles */
.countdown {
  @apply text-2xl font-semibold text-primary;
}

/* Animation for scaling up elements */
@keyframes scale-up {
  from {
    transform: scale(0.8);
    opacity: 0;
    filter: blur(8px);
  }
  to {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

/* Animation for scaling down elements */
@keyframes scale-down {
  from {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
  to {
    transform: scale(0.8);
    opacity: 0;
    filter: blur(8px);
  }
}

/* Dialog content animation styles */
.dialog-content {
  animation: scale-up 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}

/* Dialog overlay animation styles */
.dialog-overlay {
  animation: fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dialog content animation when closed */
[data-state="closed"] .dialog-content {
  animation: scale-down 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dialog overlay animation when closed */
[data-state="closed"] .dialog-overlay {
  animation: fade-out 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animation for fading in elements */
@keyframes fade-in {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(4px);
  }
}

/* Animation for fading out elements */
@keyframes fade-out {
  from {
    opacity: 1;
    backdrop-filter: blur(4px);
  }
  to {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
}