File size: 1,268 Bytes
71fac34
 
 
 
 
 
 
 
 
 
6a317c1
 
71fac34
 
d32544a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
71fac34
 
 
 
 
 
 
6a317c1
 
 
 
 
 
 
 
 
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
@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;
}


.glass-panel {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.glass-panel::before,
.glass-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.glass-panel::before {
  top: -20%;
  left: -20%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent);
  transform: rotate(45deg);
}

.glass-panel::after {
  bottom: -20%;
  right: -20%;
  width: 60%;
  height: 60%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-in-out;
}