Hugging Face's logo

Spaces:
GXSNetwork
/
N4SM
Sleeping

App Files Community
N4SM
File size: 3,953 Bytes 
d591eb1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
153
 
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 245, 247, 250;
  --background-end-rgb: 228, 237, 249;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 15, 23, 42;
    --background-end-rgb: 30, 41, 59;
  }
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(to bottom, 
    rgb(var(--background-start-rgb)) 0%, 
    rgb(var(--background-end-rgb)) 100%);
  color: rgb(var(--foreground-rgb));
  min-height: 100vh;
}

/* Custom styles for our SDG platform */
.sdg-card {
  @apply bg-white/80 dark:bg-slate-800/80 backdrop-blur-lg rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 border border-white/20;
}

.sdg-card-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  @apply rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl border border-white/20;
}

.sdg-btn {
  @apply px-6 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-slate-900;
}

.sdg-btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  @apply text-white hover:opacity-90 focus:ring-indigo-500;
}

.sdg-btn-secondary {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  @apply text-white hover:opacity-90 focus:ring-pink-500;
}

.sdg-btn-tertiary {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  @apply text-white hover:opacity-90 focus:ring-green-500;
}

.mission-icon {
  @apply w-20 h-20 mx-auto mb-6 rounded-2xl flex items-center justify-center text-white text-3xl font-bold shadow-lg transform transition-transform duration-300;
}

.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-bg-2 {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.gradient-bg-3 {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.gradient-bg-4 {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.gradient-bg-5 {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.gradient-bg-6 {
  background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
}

.hero-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.text-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-2 {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.feature-card {
  @apply p-6 rounded-2xl shadow-lg transition-all duration-300 hover:shadow-xl bg-white/80 dark:bg-slate-800/80 backdrop-blur-lg border border-white/20;
}

.stat-card {
  @apply p-6 rounded-2xl shadow-lg bg-white/90 dark:bg-slate-800/90 backdrop-blur-lg border border-white/20;
}

/* Dark mode specific overrides */
.dark {
  --foreground-rgb: 255, 255, 255;
  --background-start-rgb: 15, 23, 42;
  --background-end-rgb: 30, 41, 59;
}

.dark .text-gray-600 {
  @apply text-gray-300;
}

.dark .text-gray-700 {
  @apply text-gray-200;
}

.dark .text-gray-800 {
  @apply text-gray-100;
}

.dark .bg-gray-50 {
  @apply bg-slate-700;
}

.dark input, .dark textarea, .dark select {
  @apply bg-slate-700 border-slate-600 text-white;
}

.dark .border-gray-100 {
  @apply border-slate-700;
}

.dark .border-gray-200 {
  @apply border-slate-600;
}

.dark .border-gray-300 {
  @apply border-slate-600;
}