zzstoatzz.io
interactive intro to open social
at-me.zzstoatzz.io
1/* Landing page styles */
2
3* { margin: 0; padding: 0; box-sizing: border-box; }
4
5body {
6 font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Menlo, 'Courier New', monospace;
7 min-height: 100vh;
8 background: radial-gradient(ellipse at center, #0a0a0f 0%, #000000 100%);
9 color: #e5e5e5;
10 overflow: hidden;
11 perspective: 1000px;
12}
13
14@media (max-width: 768px) {
15 body {
16 overflow-y: auto;
17 overflow-x: hidden;
18 }
19}
20
21.atmosphere {
22 position: fixed;
23 inset: 0;
24 transform-style: preserve-3d;
25 animation: rotate 120s infinite linear;
26}
27
28@keyframes rotate {
29 from { transform: rotateY(0deg); }
30 to { transform: rotateY(360deg); }
31}
32
33.app-orb {
34 position: absolute;
35 border-radius: 50%;
36 display: flex;
37 align-items: center;
38 justify-content: center;
39 transition: all 0.3s ease;
40 cursor: pointer;
41 backdrop-filter: blur(4px);
42}
43
44.app-orb:hover {
45 transform: scale(1.2) !important;
46 z-index: 100;
47}
48
49.app-orb img {
50 width: 100%;
51 height: 100%;
52 border-radius: 50%;
53 object-fit: cover;
54}
55
56.app-orb .fallback {
57 font-size: 1.5rem;
58 font-weight: 600;
59 color: rgba(255, 255, 255, 0.9);
60}
61
62.app-tooltip {
63 position: absolute;
64 background: rgba(10, 10, 15, 0.95);
65 border: 1px solid rgba(255, 255, 255, 0.1);
66 padding: 0.5rem 0.75rem;
67 border-radius: 4px;
68 font-size: 0.7rem;
69 white-space: nowrap;
70 pointer-events: none;
71 opacity: 0;
72 transition: opacity 0.2s;
73 z-index: 1000;
74}
75
76.app-orb:hover .app-tooltip {
77 opacity: 1;
78}
79
80.container {
81 position: fixed;
82 inset: 0;
83 display: flex;
84 align-items: center;
85 justify-content: center;
86 z-index: 10;
87}
88
89@media (max-width: 768px) {
90 .container {
91 position: relative;
92 min-height: 100vh;
93 padding: 2rem 0;
94 }
95}
96
97.search-card {
98 background: transparent;
99 border: 1px solid rgba(255, 255, 255, 0.1);
100 padding: 2.5rem 3rem;
101 border-radius: 8px;
102 backdrop-filter: blur(2px);
103 text-align: center;
104 max-width: min(500px, 90vw);
105}
106
107h1 {
108 font-size: 2rem;
109 margin-bottom: 0.5rem;
110 font-weight: 300;
111 letter-spacing: 0.05em;
112}
113
114.subtitle {
115 font-size: 0.75rem;
116 color: rgba(255, 255, 255, 0.5);
117 margin-bottom: 2rem;
118}
119
120input {
121 font-family: inherit;
122 font-size: 0.9rem;
123 padding: 0.75rem 1rem;
124 margin-bottom: 1rem;
125 background: rgba(10, 10, 15, 0.8);
126 border: 1px solid rgba(255, 255, 255, 0.2);
127 border-radius: 4px;
128 color: #e5e5e5;
129 width: 100%;
130 transition: all 0.2s;
131}
132
133input:focus {
134 outline: none;
135 border-color: rgba(255, 255, 255, 0.4);
136 background: rgba(10, 10, 15, 0.9);
137}
138
139input::placeholder {
140 color: rgba(255, 255, 255, 0.3);
141}
142
143.input-wrapper {
144 position: relative;
145 width: 100%;
146}
147
148.autocomplete-results {
149 position: absolute;
150 z-index: 100;
151 width: 100%;
152 max-height: 240px;
153 overflow-y: auto;
154 background: rgba(10, 10, 15, 0.98);
155 border: 1px solid rgba(255, 255, 255, 0.2);
156 border-radius: 4px;
157 margin-top: 0.25rem;
158 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
159 display: none;
160 scrollbar-width: thin;
161 scrollbar-color: rgba(255, 255, 255, 0.2) rgba(10, 10, 15, 0.5);
162}
163
164.autocomplete-results::-webkit-scrollbar {
165 width: 8px;
166}
167
168.autocomplete-results::-webkit-scrollbar-track {
169 background: rgba(10, 10, 15, 0.5);
170 border-radius: 4px;
171}
172
173.autocomplete-results::-webkit-scrollbar-thumb {
174 background: rgba(255, 255, 255, 0.2);
175 border-radius: 4px;
176}
177
178.autocomplete-results::-webkit-scrollbar-thumb:hover {
179 background: rgba(255, 255, 255, 0.3);
180}
181
182.autocomplete-results.show {
183 display: block;
184}
185
186.autocomplete-item {
187 width: 100%;
188 display: flex;
189 align-items: center;
190 gap: 0.75rem;
191 padding: 0.75rem;
192 background: transparent;
193 border: none;
194 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
195 color: #e5e5e5;
196 text-align: left;
197 font-family: inherit;
198 cursor: pointer;
199 transition: background 0.15s;
200}
201
202.autocomplete-item:last-child {
203 border-bottom: none;
204}
205
206.autocomplete-item:hover {
207 background: rgba(255, 255, 255, 0.1);
208}
209
210.autocomplete-avatar {
211 width: 36px;
212 height: 36px;
213 border-radius: 50%;
214 object-fit: cover;
215 border: 1px solid rgba(255, 255, 255, 0.2);
216 flex-shrink: 0;
217}
218
219.autocomplete-avatar-placeholder {
220 width: 36px;
221 height: 36px;
222 border-radius: 50%;
223 background: rgba(255, 255, 255, 0.1);
224 flex-shrink: 0;
225 display: flex;
226 align-items: center;
227 justify-content: center;
228 font-size: 0.9rem;
229 color: rgba(255, 255, 255, 0.5);
230}
231
232.autocomplete-info {
233 flex: 1;
234 min-width: 0;
235 overflow: hidden;
236}
237
238.autocomplete-name {
239 font-weight: 500;
240 color: rgba(255, 255, 255, 0.9);
241 margin-bottom: 0.125rem;
242 overflow: hidden;
243 text-overflow: ellipsis;
244 white-space: nowrap;
245 font-size: 0.85rem;
246}
247
248.autocomplete-handle {
249 font-size: 0.75rem;
250 color: rgba(255, 255, 255, 0.5);
251 overflow: hidden;
252 text-overflow: ellipsis;
253 white-space: nowrap;
254}
255
256.search-spinner {
257 position: absolute;
258 right: 0.75rem;
259 top: 50%;
260 transform: translateY(-50%);
261 color: rgba(255, 255, 255, 0.4);
262 font-size: 0.75rem;
263}
264
265button {
266 font-family: inherit;
267 font-size: 0.9rem;
268 padding: 0.75rem 2rem;
269 cursor: pointer;
270 background: rgba(10, 10, 15, 0.8);
271 border: 1px solid rgba(255, 255, 255, 0.2);
272 border-radius: 4px;
273 color: #e5e5e5;
274 transition: all 0.2s;
275 width: 100%;
276}
277
278button:hover {
279 background: rgba(10, 10, 15, 0.9);
280 border-color: rgba(255, 255, 255, 0.4);
281}
282
283.divider {
284 display: flex;
285 align-items: center;
286 gap: 1rem;
287 margin: 1.5rem 0 1rem;
288 color: rgba(255, 255, 255, 0.3);
289 font-size: 0.7rem;
290}
291
292.divider::before,
293.divider::after {
294 content: '';
295 flex: 1;
296 height: 1px;
297 background: rgba(255, 255, 255, 0.1);
298}
299
300.suggestions {
301 display: flex;
302 gap: 0.75rem;
303 flex-wrap: wrap;
304 justify-content: center;
305}
306
307.suggestion-btn {
308 font-family: inherit;
309 font-size: 0.8rem;
310 padding: 0.5rem 1rem;
311 cursor: pointer;
312 background: transparent;
313 border: 1px solid rgba(255, 255, 255, 0.15);
314 border-radius: 4px;
315 color: rgba(255, 255, 255, 0.6);
316 transition: all 0.2s;
317 width: auto;
318}
319
320.suggestion-btn:hover {
321 background: rgba(10, 10, 15, 0.5);
322 border-color: rgba(255, 255, 255, 0.3);
323 color: rgba(255, 255, 255, 0.8);
324}
325
326.info-toggle {
327 margin-top: 1.5rem;
328 color: rgba(255, 255, 255, 0.5);
329 font-size: 0.75rem;
330 cursor: pointer;
331 border: none;
332 background: none;
333 padding: 0.5rem;
334 transition: color 0.2s;
335 text-decoration: underline;
336 text-underline-offset: 2px;
337}
338
339.info-toggle:hover {
340 color: rgba(255, 255, 255, 0.8);
341}
342
343.info-content {
344 max-height: 0;
345 overflow: hidden;
346 transition: max-height 0.3s ease;
347 margin-top: 1rem;
348}
349
350.info-content.expanded {
351 max-height: 500px;
352 overflow-y: auto;
353}
354
355@media (max-width: 768px) {
356 .info-content.expanded {
357 max-height: none;
358 overflow-y: visible;
359 }
360}
361
362.info-section {
363 background: rgba(10, 10, 15, 0.6);
364 border: 1px solid rgba(255, 255, 255, 0.1);
365 border-radius: 4px;
366 padding: 1.5rem;
367 text-align: left;
368}
369
370.info-section h3 {
371 font-size: 0.85rem;
372 font-weight: 500;
373 margin-bottom: 0.75rem;
374 color: rgba(255, 255, 255, 0.9);
375}
376
377.info-section p {
378 font-size: 0.7rem;
379 line-height: 1.6;
380 color: rgba(255, 255, 255, 0.6);
381 margin-bottom: 1rem;
382}
383
384.info-section p:last-child {
385 margin-bottom: 0;
386}
387
388.info-section strong {
389 color: rgba(255, 255, 255, 0.85);
390}
391
392.info-section a {
393 color: rgba(255, 255, 255, 0.8);
394 text-decoration: underline;
395 text-underline-offset: 2px;
396}
397
398.info-section a:hover {
399 color: rgba(255, 255, 255, 1);
400}
401
402.footer {
403 position: fixed;
404 bottom: 1rem;
405 left: 50%;
406 transform: translateX(-50%);
407 font-size: 0.7rem;
408 color: rgba(255, 255, 255, 0.3);
409 z-index: 20;
410}
411
412.footer a {
413 color: rgba(255, 255, 255, 0.5);
414 text-decoration: none;
415 transition: color 0.2s;
416}
417
418.footer a:hover {
419 color: rgba(255, 255, 255, 0.8);
420}