forked from Shayanghosh03/HackMate
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstyles.css
More file actions
159 lines (136 loc) · 9.73 KB
/
Copy pathstyles.css
File metadata and controls
159 lines (136 loc) · 9.73 KB
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
/* Segmented tabs */
.tab-btn {
border-radius: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 600;
color: rgb(203 213 225);
background: transparent;
transition: all 150ms ease;
}
.tab-btn:hover { color: white; background: rgba(255,255,255,0.06); }
.tab-btn.active {
color: white;
background: linear-gradient(135deg, rgba(168,85,247,0.22), rgba(34,211,238,0.22));
box-shadow: 0 0 30px -12px rgba(168,85,247,0.5);
}
/* Skill list items */
.skill-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
border-radius: 0.5rem;
border: 1px solid rgba(255,255,255,0.1);
background: rgba(255,255,255,0.05);
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
cursor: pointer;
}
.skill-item:hover { background: rgba(255,255,255,0.08); }
.skill-left { display:flex; align-items:center; gap:0.5rem; }
.skill-icon { width: 1.35rem; height: 1.35rem; display:grid; place-items:center; border-radius:0.375rem; background: rgba(15,23,42,0.6); border:1px solid rgba(255,255,255,0.1); font-size: 0.85rem; }
.skill-check {
width: 1.75rem; height: 1.75rem; border-radius: 9999px; display:grid; place-items:center; border:1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: rgba(226,232,240,1); font-size: 0.9rem;
}
.skill-check.selected { border-color: rgba(34,197,94,0.6); background: rgba(16,185,129,0.2); color: rgb(167,243,208); }
/* Selected chips */
.chip { display:inline-flex; align-items:center; gap:0.375rem; border-radius:9999px; border:1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.08); padding: 0.25rem 0.625rem; font-size: 0.75rem; color: rgb(226,232,240); }
.chip button { border:none; border-radius:9999px; background: rgba(255,255,255,0.12); color: rgb(148,163,184); padding: 0 0.35rem; cursor:pointer; }
.chip button:hover { color:white; }
/* Cards */
.card { position: relative; overflow: hidden; border-radius: 1rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(2,6,23,0.6); backdrop-filter: blur(8px); }
.card::before { content:""; position:absolute; inset:-1px; background: radial-gradient(600px 120px at 80% -10%, rgba(168,85,247,0.18), transparent), radial-gradient(600px 120px at -10% 110%, rgba(34,211,238,0.18), transparent); pointer-events:none; }
.card-body { padding: 1.25rem; }
.badge { display:inline-flex; align-items:center; border-radius:0.375rem; background: rgba(255,255,255,0.08); padding: 0.125rem 0.5rem; font-size: 11px; color: rgb(203,213,225); }
/* Glow title */
.glow-text { background: linear-gradient(135deg, #fff, #a855f7, #22d3ee); -webkit-background-clip:text; background-clip:text; color: transparent; text-shadow: 0 0 12px rgba(168,85,247,0.35), 0 0 24px rgba(34,211,238,0.25); }
.glow-pulse { animation: glowPulse 3s ease-in-out infinite; }
@keyframes glowPulse { 0%,100% { filter: drop-shadow(0 0 0 rgba(168,85,247,0.4)); } 50% { filter: drop-shadow(0 0 18px rgba(168,85,247,0.6)); } }
/* ---------- Motion & micro-interactions ---------- */
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* Card hover lift and subtle glow */
.card { transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background-color 200ms ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px -18px rgba(168,85,247,0.35), 0 10px 24px -20px rgba(34,211,238,0.35); border-color: rgba(255,255,255,0.16); }
/* Header nav underline animation */
header nav a { position: relative; }
header nav a::after {
content: "";
position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%;
transform: scaleX(0); transform-origin: left;
background: linear-gradient(90deg, #a855f7, #22d3ee);
transition: transform 200ms ease;
}
header nav a:hover::after { transform: scaleX(1); }
/* Gradient buttons micro lift */
.bg-gradient-to-br { transition: transform 150ms ease, box-shadow 150ms ease; }
.bg-gradient-to-br:hover { transform: translateY(-1px); box-shadow: 0 12px 34px -16px rgba(34,211,238,0.6), 0 12px 34px -18px rgba(168,85,247,0.55); }
/* Press feedback */
button:active, .tab-btn:active { transform: translateY(0) scale(0.98); }
/* Scroll reveal: fade-up */
.reveal { opacity: 0; transform: translateY(12px); transition: transform 600ms cubic-bezier(.22,1,.36,1), opacity 600ms cubic-bezier(.22,1,.36,1); transition-delay: var(--reveal-delay, 0ms); }
.in-view { opacity: 1; transform: none; }
/* Chat modal: overlay + panel pop */
#chatModal > div:first-child { opacity: 0; transition: opacity 250ms ease; }
#chatModal.show > div:first-child { opacity: 1; }
#chatModal > .relative { opacity: 0; transform: translateY(12px) scale(.98); transition: transform 280ms cubic-bezier(.22,1,.36,1), opacity 280ms cubic-bezier(.22,1,.36,1); }
#chatModal.show > .relative { opacity: 1; transform: none; }
/* Message pop-in */
@keyframes popIn { from { transform: translateY(4px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.msg-pop { animation: popIn 220ms ease-out both; }
/* Floating background blobs */
.pointer-events-none.fixed.inset-0 > div:first-child { animation: blobFloat1 20s ease-in-out infinite alternate; }
.pointer-events-none.fixed.inset-0 > div:last-child { animation: blobFloat2 24s ease-in-out infinite alternate; }
@keyframes blobFloat1 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px, -10px) scale(1.05); } 100% { transform: translate(0, 10px) scale(1); } }
@keyframes blobFloat2 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-20px, 10px) scale(1.07); } 100% { transform: translate(0, -8px) scale(1); } }
/* ---------- Visual enhancements ---------- */
/* Hero aurora behind title */
#home .text-center { position: relative; }
#home .text-center::before {
content: ""; position: absolute; left: 50%; top: -40px; width: 520px; height: 220px;
transform: translateX(-50%);
background: radial-gradient(40% 60% at 50% 50%, rgba(168,85,247,0.25), rgba(34,211,238,0.18), transparent 70%);
filter: blur(40px); opacity: 0.5; pointer-events: none; animation: drift 12s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-48%) translateY(6px); } }
/* Animated gradient sheen for gradient buttons */
.sheen { background-size: 200% 200% !important; animation: sheen 6s ease infinite; }
@keyframes sheen { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
/* Shimmering heading text */
.shine { background: linear-gradient(90deg, #e2e8f0, #a855f7, #22d3ee, #e2e8f0); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shineText 6s linear infinite; }
@keyframes shineText { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
/* Typewriter caret */
.type-caret { display:inline-block; width: 1px; height: 1.2em; margin-left: 4px; background: #e2e8f0; animation: caretBlink 1s steps(1, end) infinite; vertical-align: middle; }
@keyframes caretBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
/* ---------- Login overlay (4s) ---------- */
#loginOverlay { display: none; }
#loginOverlay.flex { display: flex; }
.loader { width: 44px; height: 44px; border: 3px solid rgba(255,255,255,0.18); border-top-color: rgba(255,255,255,0.9); border-radius: 9999px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress { width: 240px; height: 8px; border-radius: 9999px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); }
.progress > div { height: 100%; width: 0%; background: linear-gradient(90deg, rgba(168,85,247,.8), rgba(99,102,241,.9), rgba(34,211,238,.9)); }
@keyframes load4s { from { width: 0%; } to { width: 100%; } }
/* Home loader overlay (removed) */
/* Background particle field */
.particle-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.particle { position: absolute; left: var(--l); top: var(--t); width: 6px; height: 6px; border-radius: 9999px; background: radial-gradient(#e2e8f0, transparent 70%); opacity: 0.5; animation: driftParticle var(--dur) ease-in-out infinite alternate; animation-delay: var(--delay); filter: blur(0.5px); }
@keyframes driftParticle { from { transform: translate(0,0) scale(1); } to { transform: translate(var(--dx), var(--dy)) scale(1.3); } }
/* Perf mode: disable particles */
:root.perf-low .particle-field { display: none !important; }
/* ---------- Performance mode (reduced effects) ---------- */
/* When the root element has class 'perf-low', turn off heavy paint/animation work */
:root.perf-low .pointer-events-none.fixed.inset-0 > div { display: none !important; }
:root.perf-low #home .text-center::before { content: none !important; }
:root.perf-low .glow-pulse, :root.perf-low .sheen, :root.perf-low .shine { animation: none !important; }
:root.perf-low .type-caret { animation: none !important; opacity: 1; }
:root.perf-low .card { transition: none !important; }
:root.perf-low .card:hover { transform: none !important; box-shadow: none !important; }
:root.perf-low .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
:root.perf-low header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:root.perf-low #chatModal > div:first-child, :root.perf-low #chatModal > .relative { transition: none !important; }