ZingLang/styles.css at main · mihai209/ZingLang · GitHub

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/* ── ZingLang Custom Styles (peste Tailwind) ──────────────────────── */

/* Glassmorphism utility */
.glass {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08);
}

/* Hero title gradient */
.hero-title {
  background: linear-gradient(135deg, #00ff66, #8a2be2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Section title gradient */
.section-title {
  background: linear-gradient(90deg, #e4e4e7, #8a2be2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Pulse dot for status */
.pulse-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #00ff66;
  box-shadow: 0 0 8px #00ff66;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.75); }
}

/* Glow effect */
.glow { transition: box-shadow .3s; }
.glow:hover { box-shadow: 0 0 28px rgba(138,43,226,.4); }

/* Copy button */
.copy-btn:active { transform: scale(.97); }

/* Tabs */
.tab {
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  color: #8b8b9e;
}
.tab:hover { border-color: #8a2be2; color: #e4e4e7; }
.tab.active { background: #8a2be2; border-color: #8a2be2; color: #fff; }

/* Code editor */
.editor-body { background: transparent; }
.editor-body code { color: #e4e4e7; }

/* Syntax highlighting */
.kw  { color: #ff7a30; }       /* keywords */
.str { color: #00ff66; }       /* strings */
.fn  { color: #b47cff; }       /* functions */
.mod { color: #8a2be2; }       /* modules */
.int { color: #f0c030; }       /* integers */
.cm  { color: #5a5a6e; font-style: italic; } /* comments */

/* Package cards */
.pkg-card {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 24px;
  transition: all .3s;
  animation: fadeInUp .45s ease-out both;
}
.pkg-card:nth-child(1) { animation-delay: .05s; }
.pkg-card:nth-child(2) { animation-delay: .12s; }
.pkg-card:nth-child(3) { animation-delay: .19s; }
.pkg-card:nth-child(4) { animation-delay: .26s; }
.pkg-card:nth-child(5) { animation-delay: .33s; }
.pkg-card:nth-child(6) { animation-delay: .40s; }
.pkg-card:nth-child(7) { animation-delay: .47s; }
.pkg-card:nth-child(8) { animation-delay: .54s; }
.pkg-card:hover { border-color: #8a2be2; transform: translateY(-2px); }

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

/* Make pre not have default margin from Tailwind reset */
.editor-body {
  margin: 0;
}