Hugging Face's logo

Spaces:
Vibranium0
/
ai_startup
Sleeping

App Files Community
P2THE28 commited on
Commit
410eb92
·
verified ·
1 Parent(s): ed69e22

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +333 -116
style.css CHANGED
@@ -1,180 +1,397 @@
1
  :root {
2
- --bg:#0f0f11;
3
- --panel:#161516;
4
- --muted:#9aa0a6;
5
- --accent:#7f3bf0;
6
- --accent-2:#6b2be8;
7
- --card-border:rgba(255,255,255,0.04);
 
 
 
 
 
 
 
8
  }
9
 
10
- * { box-sizing:border-box; }
11
  body {
12
- margin:0;
13
- background:var(--bg);
14
- color:#fff;
15
- font-family:Inter, system-ui;
 
16
  }
17
 
18
- /* TOPBAR */
19
  .topbar {
20
- height:72px;
21
- display:flex;
22
- align-items:center;
23
- justify-content:space-between;
24
- padding:0 28px;
25
- border-bottom:1px solid rgba(255,255,255,0.05);
26
  }
27
 
28
- .nav a { color:var(--muted); margin-right:16px; cursor:pointer; }
29
- .nav .active { color:#fff; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
 
31
- /* BUTTONS */
32
  .btn {
33
- padding:10px 16px;
34
- border-radius:8px;
35
- border:0;
36
- cursor:pointer;
37
- font-weight:600;
38
  }
39
 
40
  .btn.ghost {
41
- border:1px solid rgba(255,255,255,0.1);
 
 
42
  }
43
 
44
  .btn.primary {
45
- background:linear-gradient(90deg,var(--accent),var(--accent-2));
46
- color:white;
47
  }
48
 
 
49
  .pill {
50
- background:linear-gradient(90deg,var(--accent),var(--accent-2));
51
- color:white;
52
- padding:12px 20px;
53
- border-radius:10px;
 
 
 
54
  }
55
 
56
- /* HERO */
57
- .hero { text-align:center; padding:50px 20px; }
58
- .small-hero { padding:30px 20px; }
59
- .hero-title { font-size:48px; }
60
- .hero-title span { color:var(--accent); }
61
- .hero-sub { color:var(--muted); max-width:650px; margin:auto; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
 
63
- /* FEATURES */
64
  .feature-grid {
65
- display:grid;
66
- grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
67
- gap:20px;
68
  }
69
 
70
- .feature, .card-block {
71
- background:var(--panel);
72
- padding:20px;
73
- border-radius:12px;
74
- border:1px solid rgba(255,255,255,0.05);
 
75
  }
76
 
77
  .icon {
78
- background:rgba(127,59,240,0.1);
79
- padding:12px;
80
- border-radius:10px;
81
- width:44px; height:44px;
82
- display:flex;
83
- justify-content:center;
84
- align-items:center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85
  }
86
 
87
- /* CARDS */
88
  .card {
89
- padding:20px;
90
- background:rgba(255,255,255,0.02);
91
- border-radius:12px;
92
- width:45%;
 
 
 
93
  }
 
94
  .card.recommended {
95
- border:2px solid var(--accent);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
96
  }
97
 
98
- /* HISTORY ITEMS */
99
- .history-list { display:flex; flex-direction:column; gap:14px; }
100
  .history-item {
101
- padding:16px;
102
- background:#0d0d0d;
103
- border-radius:10px;
104
- border:1px solid rgba(255,255,255,0.05);
 
 
 
 
 
 
 
 
 
105
  }
106
 
107
- /* MODAL */
 
 
 
 
 
 
 
108
  .modal {
109
- position:fixed;
110
- inset:0;
111
- background:rgba(0,0,0,0.6);
112
- display:flex;
113
- justify-content:center;
114
- align-items:center;
 
 
 
 
115
  }
116
- .modal.hidden { display:none; }
117
 
118
  .modal-card {
119
- background:#181818;
120
- padding:20px;
121
- width:90%;
122
- max-width:550px;
123
- border-radius:12px;
124
- position:relative;
 
 
 
 
 
 
 
 
 
 
 
 
125
  }
126
 
127
  .modal-card input,
128
  .modal-card textarea,
129
  .modal-card select {
130
- width:100%;
131
- padding:10px;
132
- margin:8px 0;
133
- border-radius:8px;
134
- border:1px solid #333;
135
- background:#0f0f11;
136
- color:#fff;
 
 
 
 
 
 
 
 
137
  }
138
 
139
- /* DROPDOWN */
140
- .user-section { position:relative; cursor:pointer; }
141
  .user-photo {
142
- width:38px; height:38px; border-radius:50%;
143
- border:2px solid #ffffff50;
 
 
144
  }
145
 
146
  .dropdown {
147
- position:absolute;
148
- top:50px;
149
- right:0;
150
- background:#1e1e2e;
151
- padding:12px;
152
- width:180px;
153
- border-radius:12px;
154
- box-shadow:0 8px 20px #0003;
155
- animation:fadeIn 0.2s;
156
- }
157
- .dropdown.hidden { display:none; }
158
 
159
  .dropdown-item {
160
- padding:10px;
161
- border-radius:8px;
162
- cursor:pointer;
 
 
 
 
 
 
 
 
 
 
 
 
 
163
  }
164
- .dropdown-item:hover { background:#ffffff20; }
165
 
166
- .danger { color:#ff5252; }
 
 
 
167
 
168
- .hidden { display:none; }
 
 
 
 
169
 
 
170
  @keyframes fadeIn {
171
- from { opacity:0; transform:translateY(-8px); }
172
- to { opacity:1; transform:translateY(0); }
173
  }
174
 
175
- /* FOOTER */
176
- .foot {
177
- text-align:center;
178
- padding:30px;
179
- color:var(--muted);
180
  }
 
1
  :root {
2
+ --bg: #0f0f11;
3
+ --panel: #161516;
4
+ --muted: #9aa0a6;
5
+ --accent: #7f3bf0;
6
+ --accent-2: #6b2be8;
7
+ --border: rgba(255,255,255,0.05);
8
+ }
9
+
10
+ /* RESET */
11
+ * {
12
+ margin: 0;
13
+ padding: 0;
14
+ box-sizing: border-box;
15
  }
16
 
 
17
  body {
18
+ font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
19
+ background: linear-gradient(180deg, #0f0f11, #0b0b0c);
20
+ color: #e9e9ea;
21
+ line-height: 1.6;
22
+ overflow-x: hidden;
23
  }
24
 
25
+ /* ======================= NAVBAR ======================= */
26
  .topbar {
27
+ height: 72px;
28
+ display: flex;
29
+ align-items: center;
30
+ justify-content: space-between;
31
+ padding: 0 28px;
32
+ border-bottom: 1px solid var(--border);
33
  }
34
 
35
+ .brand {
36
+ font-size: 22px;
37
+ font-weight: 700;
38
+ }
39
+
40
+ .nav {
41
+ display: flex;
42
+ gap: 22px;
43
+ }
44
+
45
+ .nav a {
46
+ color: var(--muted);
47
+ cursor: pointer;
48
+ text-decoration: none;
49
+ font-weight: 500;
50
+ }
51
+
52
+ .actions {
53
+ display: flex;
54
+ gap: 16px;
55
+ }
56
 
57
+ /* Buttons */
58
  .btn {
59
+ border: 0;
60
+ padding: 10px 16px;
61
+ cursor: pointer;
62
+ border-radius: 10px;
63
+ font-weight: 600;
64
  }
65
 
66
  .btn.ghost {
67
+ border: 1px solid var(--border);
68
+ background: transparent;
69
+ color: #fff;
70
  }
71
 
72
  .btn.primary {
73
+ background: linear-gradient(90deg, var(--accent), var(--accent-2));
74
+ color: white;
75
  }
76
 
77
+ /* Pill button */
78
  .pill {
79
+ background: linear-gradient(90deg, var(--accent), var(--accent-2));
80
+ padding: 14px 20px;
81
+ border-radius: 12px;
82
+ border: 0;
83
+ cursor: pointer;
84
+ color: white;
85
+ font-weight: 700;
86
  }
87
 
88
+ /* Hidden */
89
+ .hidden {
90
+ display: none !important;
91
+ }
92
+
93
+ /* ======================= HERO ======================= */
94
+ .hero {
95
+ padding: 80px 0 40px;
96
+ text-align: center;
97
+ }
98
+
99
+ .hero-badge {
100
+ background: rgba(255,255,255,0.05);
101
+ padding: 8px 14px;
102
+ border-radius: 20px;
103
+ display: inline-block;
104
+ color: var(--muted);
105
+ font-size: 14px;
106
+ margin-bottom: 16px;
107
+ }
108
+
109
+ .hero-title {
110
+ font-size: 52px;
111
+ line-height: 1.1;
112
+ font-weight: 800;
113
+ margin-bottom: 12px;
114
+ }
115
+
116
+ .hero-title span {
117
+ color: var(--accent);
118
+ font-size: 64px;
119
+ display: block;
120
+ }
121
+
122
+ .hero-sub {
123
+ max-width: 820px;
124
+ margin: 18px auto 28px;
125
+ color: var(--muted);
126
+ font-size: 18px;
127
+ }
128
+
129
+ .hero-ctas {
130
+ display: flex;
131
+ justify-content: center;
132
+ gap: 18px;
133
+ }
134
+
135
+ /* ======================= FEATURES SECTION ======================= */
136
+ .features-intro {
137
+ padding: 40px 0;
138
+ max-width: 1150px;
139
+ margin: auto;
140
+ text-align: center;
141
+ }
142
+
143
+ .features-intro h2 {
144
+ font-size: 32px;
145
+ margin-bottom: 6px;
146
+ }
147
+
148
+ .features-intro p {
149
+ color: var(--muted);
150
+ margin-bottom: 28px;
151
+ }
152
 
 
153
  .feature-grid {
154
+ display: grid;
155
+ grid-template-columns: repeat(3, 1fr);
156
+ gap: 22px;
157
  }
158
 
159
+ .feature {
160
+ background: var(--panel);
161
+ padding: 22px;
162
+ border-radius: 12px;
163
+ border: 1px solid var(--border);
164
+ text-align: left;
165
  }
166
 
167
  .icon {
168
+ background: rgba(127,59,240,0.08);
169
+ width: 48px;
170
+ height: 48px;
171
+ border-radius: 10px;
172
+ display: flex;
173
+ align-items: center;
174
+ justify-content: center;
175
+ font-size: 22px;
176
+ margin-bottom: 10px;
177
+ }
178
+
179
+ .feature h3 {
180
+ margin-bottom: 8px;
181
+ }
182
+
183
+ /* ======================= CARDS ======================= */
184
+ .analysis-chooser {
185
+ padding: 40px 0;
186
+ max-width: 1150px;
187
+ margin: auto;
188
+ text-align: center;
189
+ }
190
+
191
+ .cards {
192
+ display: flex;
193
+ justify-content: center;
194
+ gap: 28px;
195
  }
196
 
 
197
  .card {
198
+ background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
199
+ border: 1px solid var(--border);
200
+ border-radius: 14px;
201
+ padding: 24px;
202
+ width: 45%;
203
+ position: relative;
204
+ text-align: left;
205
  }
206
+
207
  .card.recommended {
208
+ border: 2px solid rgba(127,59,240,0.6);
209
+ box-shadow: 0 10px 30px rgba(127,59,240,0.1);
210
+ }
211
+
212
+ .badge {
213
+ background: var(--accent);
214
+ color: white;
215
+ padding: 6px 16px;
216
+ border-radius: 12px;
217
+ font-size: 14px;
218
+ position: absolute;
219
+ top: -12px;
220
+ left: 50%;
221
+ transform: translateX(-50%);
222
+ }
223
+
224
+ .card-icon {
225
+ width: 56px;
226
+ height: 56px;
227
+ border-radius: 12px;
228
+ background: rgba(127,59,240,0.1);
229
+ display: flex;
230
+ align-items: center;
231
+ justify-content: center;
232
+ font-size: 22px;
233
+ margin-bottom: 10px;
234
+ }
235
+
236
+ .card ul {
237
+ color: var(--muted);
238
+ padding-left: 20px;
239
+ margin-bottom: 18px;
240
+ }
241
+
242
+ .start {
243
+ width: 100%;
244
+ padding: 14px;
245
+ border: 0;
246
+ border-radius: 12px;
247
+ cursor: pointer;
248
+ font-weight: 700;
249
+ background: linear-gradient(90deg, var(--accent), var(--accent-2));
250
+ color: white;
251
+ }
252
+
253
+ /* ======================= HISTORY ======================= */
254
+ .history-section {
255
+ padding: 20px 0;
256
+ max-width: 1150px;
257
+ margin: auto;
258
  }
259
 
 
 
260
  .history-item {
261
+ background: var(--panel);
262
+ padding: 14px;
263
+ border-radius: 8px;
264
+ margin-bottom: 10px;
265
+ border: 1px solid var(--border);
266
+ }
267
+
268
+ .muted {
269
+ color: var(--muted);
270
+ }
271
+
272
+ .small {
273
+ font-size: 13px;
274
  }
275
 
276
+ /* ======================= FOOTER ======================= */
277
+ .foot {
278
+ text-align: center;
279
+ padding: 28px 0;
280
+ color: var(--muted);
281
+ }
282
+
283
+ /* ======================= MODAL ======================= */
284
  .modal {
285
+ position: fixed;
286
+ inset: 0;
287
+ background: rgba(0,0,0,0.6);
288
+ display: flex;
289
+ justify-content: center;
290
+ align-items: center;
291
+ }
292
+
293
+ .modal.hidden {
294
+ display: none;
295
  }
 
296
 
297
  .modal-card {
298
+ background: #121212;
299
+ padding: 24px;
300
+ width: 90%;
301
+ max-width: 600px;
302
+ border-radius: 14px;
303
+ position: relative;
304
+ animation: fadeIn 0.2s ease-out;
305
+ }
306
+
307
+ .modal-close {
308
+ position: absolute;
309
+ top: 14px;
310
+ right: 14px;
311
+ cursor: pointer;
312
+ font-size: 18px;
313
+ color: var(--muted);
314
+ background: transparent;
315
+ border: none;
316
  }
317
 
318
  .modal-card input,
319
  .modal-card textarea,
320
  .modal-card select {
321
+ width: 100%;
322
+ padding: 12px;
323
+ background: #0f0f11;
324
+ border: 1px solid #222;
325
+ border-radius: 10px;
326
+ margin: 8px 0;
327
+ color: white;
328
+ }
329
+
330
+ /* ======================= USER DROPDOWN ======================= */
331
+ .user-section {
332
+ position: relative;
333
+ cursor: pointer;
334
+ display: flex;
335
+ align-items: center;
336
  }
337
 
 
 
338
  .user-photo {
339
+ width: 40px;
340
+ height: 40px;
341
+ border-radius: 50%;
342
+ border: 2px solid rgba(255,255,255,0.3);
343
  }
344
 
345
  .dropdown {
346
+ position: absolute;
347
+ top: 50px;
348
+ right: 0;
349
+ background: #1b1b1d;
350
+ padding: 14px;
351
+ border-radius: 12px;
352
+ width: 200px;
353
+ border: 1px solid var(--border);
354
+ box-shadow: 0 8px 24px rgba(0,0,0,0.35);
355
+ animation: dropDown 0.2s ease-out;
356
+ }
357
 
358
  .dropdown-item {
359
+ width: 100%;
360
+ padding: 10px;
361
+ border-radius: 8px;
362
+ text-align: left;
363
+ background: none;
364
+ border: none;
365
+ color: #fff;
366
+ cursor: pointer;
367
+ }
368
+
369
+ .dropdown-item:hover {
370
+ background: rgba(255,255,255,0.1);
371
+ }
372
+
373
+ .danger {
374
+ color: #ff4d4d;
375
  }
 
376
 
377
+ .dropdown-name {
378
+ font-weight: 700;
379
+ margin-bottom: 4px;
380
+ }
381
 
382
+ .dropdown-email {
383
+ font-size: 12px;
384
+ opacity: 0.7;
385
+ margin-bottom: 10px;
386
+ }
387
 
388
+ /* ======================= ANIMATIONS ======================= */
389
  @keyframes fadeIn {
390
+ from { opacity: 0; transform: scale(0.96); }
391
+ to { opacity: 1; transform: scale(1); }
392
  }
393
 
394
+ @keyframes dropDown {
395
+ from { opacity: 0; transform: translateY(-10px);}
396
+ to { opacity: 1; transform: translateY(0);}
 
 
397
  }