DevImpact/app/globals.css at a2a25c6a54f43eef19bfef88c981cb6ed2a22f38 · O2sa/DevImpact · 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
@import "flag-icons/css/flag-icons.min.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: light;
  --theme-transition-duration: 420ms;
  --theme-transition-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --background: 210 40% 98%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --muted: 210 20% 96%;
  --muted-foreground: 215 16% 47%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 217 91% 60%;
  --primary: 217 91% 60%;
  --primary-foreground: 210 40% 98%;
  --secondary: 191 91% 42%;
  --secondary-foreground: 210 40% 98%;
  --accent: 199 89% 48%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
}

.dark {
  color-scheme: dark;
  --background: 222 47% 8%;
  --foreground: 210 40% 96%;
  --card: 222 47% 11%;
  --card-foreground: 210 40% 96%;
  --muted: 217 33% 17%;
  --muted-foreground: 215 20% 65%;
  --border: 217 33% 20%;
  --input: 217 33% 20%;
  --ring: 217 91% 60%;
  --primary: 217 91% 60%;
  --primary-foreground: 210 40% 98%;
  --secondary: 191 91% 42%;
  --secondary-foreground: 210 40% 98%;
  --accent: 199 89% 48%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62% 40%;
  --destructive-foreground: 210 40% 98%;
}

* {
  @apply box-border;
  border-color: hsl(var(--border));
}

body {
  @apply bg-background text-foreground antialiased;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background-color: hsl(var(--background));
  min-height: 100vh;
  position: relative;
  isolation: isolate;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity calc(var(--theme-transition-duration) + 120ms) var(--theme-transition-ease);
}

body::before {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.08), transparent 35%),
    radial-gradient(circle at 80% 0%, rgba(168, 85, 247, 0.08), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #f2f5f9 40%, #f9fafb 100%);
  opacity: 1;
}

body::after {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.08), transparent 35%),
    radial-gradient(circle at 80% 0%, rgba(124, 58, 237, 0.12), transparent 30%),
    linear-gradient(180deg, #0f172a 0%, #0b1221 40%, #0a0f1c 100%);
  opacity: 0;
}

.dark body {
  @apply bg-background text-foreground;
}

.dark body::before {
  opacity: 0;
}

.dark body::after {
  opacity: 1;
}

.card {
  @apply bg-card/90 text-card-foreground shadow-card rounded-2xl border border-border backdrop-blur;
  transition: transform 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
}


.dark .card {
  @apply bg-card/80 border-border;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition-property: background-color, border-color, color, fill, stroke, box-shadow, opacity, backdrop-filter;
  transition-duration: var(--theme-transition-duration);
  transition-timing-function: var(--theme-transition-ease);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--theme-transition-duration);
  animation-timing-function: var(--theme-transition-ease);
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transition,
  html.theme-transition *,
  html.theme-transition *::before,
  html.theme-transition *::after {
    transition: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}