devfinder/src/index.css at main · newelle-dev/devfinder · GitHub

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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
@import "tailwindcss";


@theme {
  --color-border: hsl(var(--border));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-ring: hsl(var(--ring));
  --color-input: hsl(var(--input));
}

@layer base {
  :root {
    --background: 210 40% 98%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --muted: 210 40% 96.5%;
    --muted-foreground: 215 16% 40%;
    --secondary: 210 40% 94%;
    --secondary-foreground: 222 47% 15%;
    --accent: 221 89% 63%;
    --accent-foreground: 210 20% 98%;
    --primary: 226 72% 55%;
    --primary-foreground: 210 20% 98%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 226 72% 55%;
  }

  .dark {
    --background: 222 47% 4%;
    --foreground: 213 31% 91%;
    --card: 222 47% 8%;
    --card-foreground: 213 31% 91%;
    --muted: 222 37% 12%;
    --muted-foreground: 217 15% 62%;
    --secondary: 223 36% 14%;
    --secondary-foreground: 213 31% 91%;
    --accent: 221 72% 60%;
    --accent-foreground: 222 47% 6%;
    --primary: 226 72% 63%;
    --primary-foreground: 222 47% 6%;
    --destructive: 358 75% 55%;
    --destructive-foreground: 222 47% 6%;
    --border: 216 34% 17%;
    --input: 216 34% 20%;
    --ring: 226 72% 63%;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  /* Optional smooth theme transitions (add class 'theme-transition' to <html> after initial paint) */
  .theme-transition * {
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, fill 200ms ease, stroke 200ms ease;
  }

  ::selection {
    background: hsl(var(--accent) / 0.85);
    color: hsl(var(--accent-foreground));
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slide-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  @keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
  }

  .animate-slide-up {
    animation: slide-up 0.6s ease-out forwards;
  }

  .animate-float {
    animation: float 3s ease-in-out infinite;
  }

  .glass {
    @apply bg-background/60 backdrop-blur-md border border-white/10 dark:border-white/5 shadow-xl;
  }

  .glass-card {
    @apply bg-card/40 backdrop-blur-md border border-border/50 hover:border-primary/30 transition-all duration-300;
  }

  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary via-accent to-primary bg-[length:200%_auto] animate-[gradient-shift_4s_ease_infinite];
  }

  html {
    scroll-behavior: smooth;
  }
}

#root {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}