Card by krokettenkoal

1.card {
2  --bg-col: #010101;
3  --space-col: #2d093a;
4  --galaxy-col: #460a42;
5  --space-gradient: radial-gradient(ellipse at top, var(--bg-col), transparent),
6                    radial-gradient(ellipse at bottom, var(--galaxy-col) 10%, transparent 60%),
7                    radial-gradient(ellipse at bottom right, var(--space-col), transparent);
8  --space-gradient-alt: radial-gradient(ellipse at top left, var(--space-col), transparent),
9                    radial-gradient(ellipse at bottom, var(--galaxy-col) 10%, transparent 60%),
10                    radial-gradient(ellipse at bottom right, var(--bg-col), transparent);
11  --stars: radial-gradient(circle at 52% 54%, rgba(255, 255, 255, 0.582) 3px, transparent 4px),
12            radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.582) 2px, transparent 3px),
13            radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.582) 3px, transparent 8px),
14            radial-gradient(circle at 18% 21%, rgba(255, 255, 255, 0.582) 4px, transparent 5px),
15            radial-gradient(circle at 36% 9%, rgba(255, 255, 255, 0.582) 3px, transparent 5px),
16            radial-gradient(circle at 28% 31%, rgba(255, 255, 255, 0.39) 2px, transparent 3px),
17            radial-gradient(circle at 62% 61%, rgba(255, 255, 255, 0.532) 3px, transparent 4px),
18            radial-gradient(circle at 57% 66%, rgba(255, 255, 255, 0.842) 6px, transparent 8px),
19            radial-gradient(circle at 65% 71%, rgba(255, 255, 255, 0.534) 1px, transparent 3px),
20            radial-gradient(circle at 67% 68%, rgba(255, 255, 255, 0.651) 3px, transparent 3px),
21            radial-gradient(circle at 43% 44%, rgba(255, 255, 255, 0.74) 2px, transparent 6px),
22            radial-gradient(circle at 40% 39%, rgba(183, 243, 255, 0.842) 4px, transparent 10px),
23            radial-gradient(circle at 41% 40%, rgba(255, 255, 255, 0.699) 5px, transparent 6px),
24            radial-gradient(circle at 38% 38%, rgba(255, 255, 255, 0.349) 2px, transparent 4px),
25            radial-gradient(circle at 39% 42%, rgba(255, 255, 255, 0.747) 5px, transparent 7px),
26            radial-gradient(circle at 80% 31%, rgba(255, 255, 255, 0.781) 4px, transparent 6px),
27            radial-gradient(circle at 25% 64%, rgba(255, 255, 255, 0.425) 3px, transparent 4px),
28            radial-gradient(circle at 41% 49%, rgba(255, 255, 255, 0.678) 3px, transparent 6px),
29            radial-gradient(circle at 50% 37%, rgba(255, 255, 255, 0.336) 1px, transparent 3px),
30            radial-gradient(circle at 4% 37%, rgba(255, 255, 255, 0.336) 1px, transparent 3px),
31            radial-gradient(circle at 8% 60%, rgba(255, 255, 255, 0.336) 1px, transparent 4px),
32            radial-gradient(circle at 12% 54%, rgba(255, 255, 255, 0.336) 1px, transparent 5px),
33            radial-gradient(circle at 6% 59%, rgba(255, 255, 255, 0.336) 2px, transparent 10px),
34            radial-gradient(circle at 9% 57%, rgba(255, 255, 255, 0.336) 1px, transparent 2px),
35            radial-gradient(circle at 14% 61%, rgba(255, 255, 255, 0.336) 2px, transparent 6px);
36  min-width: 30rem;
37  padding: 2rem 4rem;
38  border-radius: 2rem;
39  background-color: #010101;
40  background-image: var(--space-gradient), var(--stars);
41  background-size: 175% 200%;
42  background-repeat: no-repeat;
43  box-shadow: 5px 7px 20px var(--bg-col);
44  overflow: clip;
45  animation: space-drift 180s ease-in-out infinite;
46}
47
48.heading {
49  font-size: .9rem;
50  text-align: center;
51  color: rgb(189, 188, 141);
52}
53
54.heading span {
55  font-size: 2.2rem;
56  font-weight: bold;
57  display: block;
58  font-style: italic;
59  margin-top: .25rem;
60  background-image: linear-gradient(90deg, rgba(196, 157, 182, 0.21), rgb(134, 71, 141), rgb(170, 84, 161), rgba(163, 130, 192, 0.094));
61  background-clip: text;
62  -webkit-background-clip: text;
63  -moz-background-clip: text;
64  -webkit-text-fill-color: transparent;
65  text-shadow: 15px 10px 55px plum;
66  text-transform: uppercase;
67  letter-spacing: 1rem;
68  z-index: 99;
69  animation: heading-stretch .7s forwards ease-out;
70}
71
72.heading span::before,
73.heading span::after {
74  content: '—';
75}
76
77.content {
78  display: grid;
79  place-items: center;
80  padding: 2rem;
81  z-index: 1;
82}
83
84.item {
85  --item-duration: 8s;
86  --idx: 0;
87  display: flex;
88  grid-area: 1 / 1;
89  flex-flow: column nowrap;
90  justify-content: center;
91  align-items: center;
92  gap: .5rem;
93  font-size: 1.1rem;
94  text-transform: lowercase;
95  font-style: italic;
96  opacity: 0;
97  animation: item-fade var(--item-duration) infinite ease-in-out;
98  animation-delay: calc(var(--idx) * var(--item-duration) / 3);
99}
100
101.item svg {
102  width: 3rem;
103  height: 3rem;
104}
105
106.item--create {
107  --idx: 0;
108}
109
110.item--post {
111  --idx: 1;
112}
113
114.item--inspire {
115  --idx: 2;
116}
117
118button {
119  --flight-duration: 3s;
120  position: relative;
121  width: 100%;
122  display: flex;
123  flex-flow: row nowrap;
124  justify-content: center;
125  align-items: center;
126  column-gap: 1ch;
127  border: none;
128  border-bottom: 2px solid rgb(189, 188, 141);
129  border-top: 2px solid rgb(189, 188, 141);
130  border-radius: .9rem;
131  background-color: transparent;
132  color: rgb(189, 188, 141);
133  padding: 1rem 2rem;
134  font-size: 1.2rem;
135  font-weight: bold;
136  cursor: pointer;
137  transition: all 200ms ease-out;
138  backdrop-filter: blur(20px);
139}
140
141button::before,
142button::after {
143  offset-path: path('m 0 10 c 8 -25 0 -45 400 -400');
144  position: absolute;
145  left: -30px;
146  opacity: 0;
147}
148
149button::before {
150  content: '🚀';
151  transform: rotate(60deg);
152  z-index: 1;
153}
154
155button::after {
156  content: '💨';
157  z-index: 0;
158  transform: scale(0) rotate(180deg);
159}
160
161button:hover {
162  color: var(--space-col);
163  border-color: transparent;
164  background-color: rgba(229, 202, 69, 0.637);
165}
166
167button:hover::before {
168  animation: rocket-flight var(--flight-duration) infinite ease-in-out;
169}
170
171button:hover::after {
172  z-index: 0;
173  transform: rotate(180deg);
174  animation: rocket-start var(--flight-duration) infinite ease-in-out;
175}
176
177
178/*
179    ANIMATION: HEADING
180*/
181
182@-webkit-keyframes heading-stretch {
183  from {
184    opacity: .8;
185    transform: scale(.8);
186    letter-spacing: normal;
187    filter: blur(50px);
188    text-shadow: none;
189  }
190
191  to {
192    opacity: unset;
193    transform: unset;
194    letter-spacing: 1rem;
195    filter: unset;
196  }
197}
198
199@-moz-keyframes heading-stretch {
200  from {
201    opacity: .8;
202    transform: scale(.8);
203    letter-spacing: normal;
204    filter: blur(50px);
205    text-shadow: none;
206  }
207
208  to {
209    opacity: unset;
210    transform: unset;
211    letter-spacing: 1rem;
212    filter: unset;
213  }
214}
215
216@keyframes heading-stretch {
217  from {
218    opacity: .8;
219    transform: scale(.8);
220    letter-spacing: normal;
221    filter: blur(50px);
222    text-shadow: none;
223  }
224
225  to {
226    opacity: unset;
227    transform: unset;
228    letter-spacing: 1rem;
229    filter: unset;
230  }
231}
232
233/*
234    ANIMATION: SPACE
235*/
236
237@-webkit-keyframes space-drift {
238  0% {
239    background-position: 0% 50%;
240  }
241
242  33% {
243    background-position: 80% 0%;
244  }
245
246  67% {
247    background-position: 80% 100%;
248  }
249
250  100% {
251    background-position: 0% 50%;
252  }
253}
254
255@-moz-keyframes space-drift {
256  0% {
257    background-position: 0% 50%;
258  }
259
260  33% {
261    background-position: 80% 0%;
262  }
263
264  67% {
265    background-position: 80% 100%;
266  }
267
268  100% {
269    background-position: 0% 50%;
270  }
271}
272
273@keyframes space-drift {
274  0% {
275    background-position: 0% 50%;
276  }
277
278  33% {
279    background-position: 80% 0%;
280  }
281
282  67% {
283    background-position: 80% 100%;
284  }
285
286  100% {
287    background-position: 0% 50%;
288  }
289}
290
291/*
292    ANIMATION: ROCKET FLIGHT
293*/
294
295@-webkit-keyframes rocket-flight {
296  0% {
297    opacity: 0;
298    offset-distance: 0%;
299  }
300
301  10% {
302    opacity: 1;
303  }
304
305  100% {
306    offset-distance: 100%;
307    opacity: .3;
308    transform: scale(.3);
309  }
310}
311
312@-moz-keyframes rocket-flight {
313  0% {
314    opacity: 0;
315    offset-distance: 0%;
316  }
317
318  10% {
319    opacity: 1;
320  }
321
322  100% {
323    offset-distance: 100%;
324    opacity: .3;
325    transform: scale(.3);
326  }
327}
328
329@keyframes rocket-flight {
330  0% {
331    opacity: 0;
332    offset-distance: 0%;
333  }
334
335  10% {
336    opacity: 1;
337  }
338
339  100% {
340    offset-distance: 100%;
341    opacity: .3;
342    transform: scale(.3);
343  }
344}
345
346/*
347    ANIMATION: ITEM FADE
348*/
349
350@-webkit-keyframes item-fade {
351  0%, 20% {
352    opacity: 0;
353    transform: translateX(10px);
354    filter: blur(5px);
355  }
356
357  40%, 60% {
358    opacity: 1;
359    transform: unset;
360    filter: unset;
361  }
362
363  70%, 100% {
364    opacity: 0;
365    transform: translateX(-10px);
366    filter: blur(5px);
367  }
368}
369
370@-moz-keyframes item-fade {
371  0%, 20% {
372    opacity: 0;
373    transform: translateX(10px);
374    filter: blur(5px);
375  }
376
377  40%, 60% {
378    opacity: 1;
379    transform: unset;
380    filter: unset;
381  }
382
383  70%, 100% {
384    opacity: 0;
385    transform: translateX(-10px);
386    filter: blur(5px);
387  }
388}
389
390@keyframes item-fade {
391  0%, 20% {
392    opacity: 0;
393    transform: translateX(10px);
394    filter: blur(5px);
395  }
396
397  40%, 60% {
398    opacity: 1;
399    transform: unset;
400    filter: unset;
401  }
402
403  70%, 100% {
404    opacity: 0;
405    transform: translateX(-10px);
406    filter: blur(5px);
407  }
408}
409
410/*
411    ANIMATION: ROCKET START (SMOKE)
412*/
413
414@-webkit-keyframes rocket-start {
415  0% {
416    transform: scale(0) rotate(180deg) translateX(0);
417  }
418
419  20% {
420    opacity: 1;
421    transform: scale(1) rotate(180deg) translateX(12px);
422  }
423
424  100% {
425    opacity: 0;
426    transform: scale(0) rotate(180deg) translateX(20px);
427  }
428}
429
430@-moz-keyframes rocket-start {
431  0% {
432    transform: scale(0) rotate(180deg) translateX(0);
433  }
434
435  20% {
436    opacity: 1;
437    transform: scale(1) rotate(180deg) translateX(12px);
438  }
439
440  100% {
441    opacity: 0;
442    transform: scale(0) rotate(180deg) translateX(20px);
443  }
444}
445
446@keyframes rocket-start {
447  0% {
448    transform: scale(0) rotate(180deg) translateX(0);
449  }
450
451  20% {
452    opacity: 1;
453    transform: scale(1) rotate(180deg) translateX(12px);
454  }
455
456  100% {
457    opacity: 0;
458    transform: scale(0) rotate(180deg) translateX(20px);
459  }
460}