Aurora Command Card

1<script>
2  export let eyebrow = "Premium Component";
3  export let title = "Aurora Command Card";
4  export let description =
5    "Eine hochwertige UI-Card mit Tiefe, Lichtkante, sauberem Hover und starkem SaaS-Look.";
6
7  export let metric = "98%";
8  export let metricLabel = "UI Quality";
9
10  export let badge = "Live";
11  export let ctaLabel = "Details ansehen";
12  export let href = "#";
13
14  export let accent = "#8b5cf6";
15  export let accentTwo = "#22d3ee";
16</script>
17
18<article
19  class="aurora-card"
20  style={`--accent: ${accent}; --accent-two: ${accentTwo};`}
21>
22  <div class="aurora-card__glow" aria-hidden="true"></div>
23  <div class="aurora-card__scan" aria-hidden="true"></div>
24
25  <div class="aurora-card__header">
26    <div class="aurora-card__icon" aria-hidden="true">
27      <span></span>
28    </div>
29
30    <span class="aurora-card__badge">
31      <span class="aurora-card__pulse"></span>
32      {badge}
33    </span>
34  </div>
35
36  <div class="aurora-card__content">
37    <p class="aurora-card__eyebrow">{eyebrow}</p>
38    <h3>{title}</h3>
39    <p class="aurora-card__description">{description}</p>
40  </div>
41
42  <div class="aurora-card__footer">
43    <div class="aurora-card__metric">
44      <strong>{metric}</strong>
45      <span>{metricLabel}</span>
46    </div>
47
48    <a class="aurora-card__cta" href={href} aria-label={`${ctaLabel}: ${title}`}>
49      {ctaLabel}
50      <svg viewBox="0 0 24 24" aria-hidden="true">
51        <path d="M7 17L17 7M9 7h8v8" />
52      </svg>
53    </a>
54  </div>
55</article>
56
57<style>
58  .aurora-card {
59    --accent: #8b5cf6;
60    --accent-two: #22d3ee;
61
62    position: relative;
63    isolation: isolate;
64    width: min(100%, 360px);
65    min-height: 270px;
66    padding: 24px;
67    overflow: hidden;
68    border-radius: 28px;
69    color: #f8fafc;
70    background:
71      radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 34%),
72      radial-gradient(circle at 100% 20%, color-mix(in srgb, var(--accent-two) 24%, transparent), transparent 32%),
73      linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
74    border: 1px solid rgba(255, 255, 255, 0.12);
75    box-shadow:
76      0 28px 80px rgba(0, 0, 0, 0.46),
77      inset 0 1px 0 rgba(255, 255, 255, 0.14),
78      inset 0 -1px 0 rgba(255, 255, 255, 0.04);
79    transform: translateZ(0);
80    transition:
81      transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
82      border-color 260ms ease,
83      box-shadow 260ms ease;
84  }
85
86  .aurora-card::before {
87    content: "";
88    position: absolute;
89    inset: 0;
90    z-index: -2;
91    border-radius: inherit;
92    padding: 1px;
93    background:
94      linear-gradient(
95        135deg,
96        color-mix(in srgb, var(--accent-two) 80%, white 10%),
97        transparent 32%,
98        rgba(255, 255, 255, 0.08) 52%,
99        color-mix(in srgb, var(--accent) 82%, white 8%)
100      );
101    mask:
102      linear-gradient(#000 0 0) content-box,
103      linear-gradient(#000 0 0);
104    mask-composite: exclude;
105    pointer-events: none;
106  }
107
108  .aurora-card::after {
109    content: "";
110    position: absolute;
111    inset: 1px;
112    z-index: -3;
113    border-radius: inherit;
114    background: rgba(2, 6, 23, 0.86);
115  }
116
117  .aurora-card:hover {
118    transform: translateY(-6px);
119    border-color: rgba(255, 255, 255, 0.2);
120    box-shadow:
121      0 34px 100px rgba(0, 0, 0, 0.56),
122      0 0 42px color-mix(in srgb, var(--accent) 22%, transparent),
123      inset 0 1px 0 rgba(255, 255, 255, 0.18);
124  }
125
126  .aurora-card__glow {
127    position: absolute;
128    top: -22%;
129    right: -18%;
130    width: 180px;
131    height: 180px;
132    border-radius: 999px;
133    background:
134      radial-gradient(circle, color-mix(in srgb, var(--accent-two) 46%, transparent), transparent 62%);
135    filter: blur(18px);
136    opacity: 0.86;
137    pointer-events: none;
138    animation: aurora-breathe 4.8s ease-in-out infinite;
139  }
140
141  .aurora-card__scan {
142    position: absolute;
143    inset: -40% -80%;
144    z-index: -1;
145    background:
146      linear-gradient(
147        115deg,
148        transparent 40%,
149        rgba(255, 255, 255, 0.12) 48%,
150        rgba(255, 255, 255, 0.04) 52%,
151        transparent 60%
152      );
153    transform: translateX(-35%) rotate(4deg);
154    animation: aurora-scan 5.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
155    pointer-events: none;
156  }
157
158  .aurora-card__header,
159  .aurora-card__footer {
160    position: relative;
161    z-index: 1;
162    display: flex;
163    align-items: center;
164    justify-content: space-between;
165    gap: 16px;
166  }
167
168  .aurora-card__icon {
169    width: 48px;
170    height: 48px;
171    display: grid;
172    place-items: center;
173    border-radius: 18px;
174    background:
175      linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
176      radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent-two) 55%, transparent), transparent 58%);
177    border: 1px solid rgba(255, 255, 255, 0.14);
178    box-shadow:
179      inset 0 1px 0 rgba(255, 255, 255, 0.18),
180      0 14px 30px rgba(0, 0, 0, 0.28);
181  }
182
183  .aurora-card__icon span {
184    width: 20px;
185    height: 20px;
186    border-radius: 7px;
187    background:
188      linear-gradient(135deg, var(--accent-two), var(--accent));
189    box-shadow:
190      0 0 18px color-mix(in srgb, var(--accent-two) 65%, transparent),
191      0 0 32px color-mix(in srgb, var(--accent) 45%, transparent);
192    transform: rotate(45deg);
193    animation: aurora-icon 2.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
194  }
195
196  .aurora-card__badge {
197    display: inline-flex;
198    align-items: center;
199    gap: 8px;
200    padding: 8px 11px;
201    border-radius: 999px;
202    color: rgba(248, 250, 252, 0.82);
203    background: rgba(255, 255, 255, 0.07);
204    border: 1px solid rgba(255, 255, 255, 0.12);
205    font: 700 12px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
206    letter-spacing: 0.02em;
207  }
208
209  .aurora-card__pulse {
210    width: 7px;
211    height: 7px;
212    border-radius: 999px;
213    background: #86efac;
214    box-shadow: 0 0 0 5px rgba(134, 239, 172, 0.12);
215    animation: aurora-pulse 1.8s ease-in-out infinite;
216  }
217
218  .aurora-card__content {
219    position: relative;
220    z-index: 1;
221    margin-top: 38px;
222  }
223
224  .aurora-card__eyebrow {
225    margin: 0 0 10px;
226    color: color-mix(in srgb, var(--accent-two) 75%, white 20%);
227    font: 800 11px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
228    letter-spacing: 0.16em;
229    text-transform: uppercase;
230  }
231
232  .aurora-card h3 {
233    margin: 0;
234    max-width: 13ch;
235    color: #ffffff;
236    font: 800 30px/0.98 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
237    letter-spacing: -0.055em;
238  }
239
240  .aurora-card__description {
241    max-width: 30ch;
242    margin: 16px 0 0;
243    color: rgba(226, 232, 240, 0.72);
244    font: 500 14px/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
245  }
246
247  .aurora-card__footer {
248    margin-top: 34px;
249  }
250
251  .aurora-card__metric {
252    display: grid;
253    gap: 3px;
254  }
255
256  .aurora-card__metric strong {
257    color: #ffffff;
258    font: 850 24px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
259    letter-spacing: -0.04em;
260  }
261
262  .aurora-card__metric span {
263    color: rgba(226, 232, 240, 0.58);
264    font: 700 11px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
265    text-transform: uppercase;
266    letter-spacing: 0.12em;
267  }
268
269  .aurora-card__cta {
270    display: inline-flex;
271    align-items: center;
272    gap: 9px;
273    min-height: 42px;
274    padding: 0 14px 0 16px;
275    border-radius: 999px;
276    color: #020617;
277    background:
278      linear-gradient(135deg, color-mix(in srgb, var(--accent-two) 88%, white 12%), color-mix(in srgb, var(--accent) 82%, white 14%));
279    text-decoration: none;
280    font: 800 13px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
281    box-shadow:
282      0 14px 30px color-mix(in srgb, var(--accent) 22%, transparent),
283      inset 0 1px 0 rgba(255, 255, 255, 0.36);
284    transition:
285      transform 180ms ease,
286      box-shadow 180ms ease,
287      filter 180ms ease;
288  }
289
290  .aurora-card__cta svg {
291    width: 17px;
292    height: 17px;
293    fill: none;
294    stroke: currentColor;
295    stroke-width: 2.2;
296    stroke-linecap: round;
297    stroke-linejoin: round;
298    transition: transform 180ms ease;
299  }
300
301  .aurora-card__cta:hover {
302    transform: translateY(-2px);
303    filter: brightness(1.06);
304    box-shadow:
305      0 18px 38px color-mix(in srgb, var(--accent) 30%, transparent),
306      inset 0 1px 0 rgba(255, 255, 255, 0.42);
307  }
308
309  .aurora-card__cta:hover svg {
310    transform: translate(2px, -2px);
311  }
312
313  .aurora-card__cta:focus-visible {
314    outline: 3px solid color-mix(in srgb, var(--accent-two) 70%, white 30%);
315    outline-offset: 4px;
316  }
317
318  @keyframes aurora-breathe {
319    0%,
320    100% {
321      transform: scale(0.88);
322      opacity: 0.58;
323    }
324
325    50% {
326      transform: scale(1.08);
327      opacity: 0.96;
328    }
329  }
330
331  @keyframes aurora-scan {
332    0%,
333    42% {
334      transform: translateX(-42%) rotate(4deg);
335      opacity: 0;
336    }
337
338    52% {
339      opacity: 1;
340    }
341
342    68%,
343    100% {
344      transform: translateX(42%) rotate(4deg);
345      opacity: 0;
346    }
347  }
348
349  @keyframes aurora-icon {
350    0%,
351    100% {
352      transform: rotate(45deg) scale(1);
353    }
354
355    42% {
356      transform: rotate(45deg) scale(1);
357    }
358
359    55% {
360      transform: rotate(135deg) scale(1.08);
361    }
362
363    68% {
364      transform: rotate(135deg) scale(1);
365    }
366  }
367
368  @keyframes aurora-pulse {
369    0%,
370    100% {
371      transform: scale(1);
372      box-shadow: 0 0 0 5px rgba(134, 239, 172, 0.12);
373    }
374
375    50% {
376      transform: scale(0.82);
377      box-shadow: 0 0 0 8px rgba(134, 239, 172, 0.04);
378    }
379  }
380
381  @media (prefers-reduced-motion: reduce) {
382    .aurora-card,
383    .aurora-card__cta,
384    .aurora-card__cta svg {
385      transition: none;
386    }
387
388    .aurora-card__glow,
389    .aurora-card__scan,
390    .aurora-card__icon span,
391    .aurora-card__pulse {
392      animation: none;
393    }
394
395    .aurora-card:hover {
396      transform: none;
397    }
398  }
399</style>