Skip to content

Commit 74321b3

Browse files
CopilotTechQuery
Copilot
and
TechQuery
committed
Make color scheme more vibrant with multiple gradients inspired by Hack Club
Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com>
1 parent 48ff7b8 commit 74321b3

1 file changed

Lines changed: 71 additions & 54 deletions

File tree

‎styles/Hackathon.module.less‎

Lines changed: 71 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.hero {
44
position: relative;
5-
background: radial-gradient(circle at top left, #312e81, #1e1b4b 55%, #0f172a);
5+
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
66
padding: 4rem 0;
77
overflow: hidden;
88
color: #fff;
@@ -12,7 +12,7 @@
1212
top: -50%;
1313
left: -50%;
1414
animation: grid-animation 20s linear infinite;
15-
background: radial-gradient(circle, rgb(99, 102, 241) 1px, transparent 1px);
15+
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
1616
background-size: 50px 50px;
1717
width: 200%;
1818
height: 200%;
@@ -34,7 +34,7 @@
3434
margin-bottom: 1rem;
3535
font-weight: 700;
3636
font-size: 3rem;
37-
text-shadow: 0 0 20px rgb(99, 102, 241);
37+
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
3838
}
3939

4040
.description {
@@ -48,15 +48,15 @@
4848
backdrop-filter: blur(10px);
4949
transition: all 0.3s ease;
5050
margin-bottom: 1rem;
51-
border: 1px solid rgb(99, 102, 241);
52-
border-radius: 12px;
53-
background: rgb(15, 23, 42);
51+
border: 2px solid rgba(255, 255, 255, 0.3);
52+
border-radius: 16px;
53+
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
5454
padding: 1.5rem;
5555

5656
&:hover {
57-
transform: translateY(-2px);
58-
box-shadow: 0 0 20px rgb(99, 102, 241);
59-
border-color: rgb(119, 122, 245);
57+
transform: translateY(-5px);
58+
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
59+
border-color: rgba(255, 255, 255, 0.5);
6060
}
6161
}
6262

@@ -68,78 +68,92 @@
6868
.sectionTitle {
6969
display: inline-block;
7070
margin-bottom: 2rem;
71-
border-bottom: 3px solid;
72-
border-image: linear-gradient(90deg, #6366f1, #4f46e5) 1;
71+
border-bottom: 4px solid;
72+
border-image: linear-gradient(90deg, #f093fb, #f5576c, #ffd140) 1;
7373
padding-bottom: 0.5rem;
7474
font-weight: 700;
7575
font-size: 2rem;
76+
background: linear-gradient(90deg, #f093fb, #f5576c, #ffd140);
77+
-webkit-background-clip: text;
78+
-webkit-text-fill-color: transparent;
79+
background-clip: text;
7680
}
7781

78-
// Dark cards - Blue/Purple gradient background
82+
// Vibrant cards - Multicolor gradient background
7983
.darkCard {
8084
transition: all 0.3s ease;
8185
margin-bottom: 1rem;
82-
border-radius: 8px;
83-
background: linear-gradient(135deg, rgb(99, 102, 241), rgb(139, 92, 246));
86+
border-radius: 16px;
87+
background: linear-gradient(135deg, #667eea, #764ba2);
8488
padding: 1.5rem;
8589
color: #fff;
90+
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
8691

8792
&:hover {
88-
transform: translateY(-3px);
89-
box-shadow: 0 8px 20px rgb(99, 102, 241);
90-
background: linear-gradient(135deg, rgb(119, 122, 245), rgb(159, 112, 250));
93+
transform: translateY(-5px) scale(1.02);
94+
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
95+
background: linear-gradient(135deg, #7d8ff5, #8a5cb8);
9196
}
9297
}
9398

94-
// Light cards - Pink gradient background
99+
// Bright cards - Warm gradient background
95100
.lightCard {
96101
transition: all 0.3s ease;
97102
margin-bottom: 1rem;
98-
border-radius: 8px;
99-
background: linear-gradient(135deg, rgb(244, 114, 182), rgb(236, 72, 153));
103+
border-radius: 16px;
104+
background: linear-gradient(135deg, #fa709a, #fee140);
100105
padding: 1.5rem;
101106
color: #1f2937;
107+
box-shadow: 0 4px 15px rgba(250, 112, 154, 0.3);
102108

103109
&:hover {
104-
transform: translateY(-3px);
105-
box-shadow: 0 8px 20px rgb(244, 114, 182);
106-
background: linear-gradient(135deg, rgb(248, 134, 196), rgb(240, 92, 167));
110+
transform: translateY(-5px) scale(1.02);
111+
box-shadow: 0 10px 30px rgba(250, 112, 154, 0.5);
112+
background: linear-gradient(135deg, #ff6b9d, #ffa400);
107113
}
108114
}
109115

110-
// Agenda items with dark background
116+
// Agenda items with vibrant gradient backgrounds
111117
.agendaItem {
112118
transition: all 0.3s ease;
113119
margin-bottom: 1rem;
114-
border-left: 4px solid;
115-
border-radius: 8px;
116-
background: linear-gradient(135deg, rgb(99, 102, 241), rgb(139, 92, 246));
120+
border-left: 5px solid;
121+
border-radius: 12px;
117122
padding: 1.5rem;
123+
color: #fff;
118124

119125
&:hover {
120-
transform: translateX(5px);
121-
box-shadow: 0 4px 15px rgb(99, 102, 241);
122-
background: linear-gradient(135deg, rgb(119, 122, 245), rgb(159, 112, 250));
126+
transform: translateX(8px) scale(1.02);
123127
}
124128

125129
&.workshop {
126-
border-left-color: #3b82f6;
130+
background: linear-gradient(135deg, #00c9ff, #92fe9d);
131+
border-left-color: #00c9ff;
132+
box-shadow: 0 4px 15px rgba(0, 201, 255, 0.3);
127133
}
128134

129135
&.presentation {
130-
border-left-color: #ef4444;
136+
background: linear-gradient(135deg, #f5576c, #f093fb);
137+
border-left-color: #f5576c;
138+
box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
131139
}
132140

133141
&.coding {
134-
border-left-color: #10b981;
142+
background: linear-gradient(135deg, #4facfe, #00f2fe);
143+
border-left-color: #4facfe;
144+
box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
135145
}
136146

137147
&.break {
138-
border-left-color: #f59e0b;
148+
background: linear-gradient(135deg, #ffd140, #ff6b6b);
149+
border-left-color: #ffd140;
150+
box-shadow: 0 4px 15px rgba(255, 209, 64, 0.3);
139151
}
140152

141153
&.ceremony {
142-
border-left-color: #8b5cf6;
154+
background: linear-gradient(135deg, #667eea, #764ba2);
155+
border-left-color: #667eea;
156+
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
143157
}
144158
}
145159

@@ -177,30 +191,30 @@
177191
margin-bottom: 2rem;
178192
}
179193

180-
// Project cards with light pink gradient
194+
// Project cards with vibrant gradient
181195
.projectCard {
182196
transition: all 0.3s ease;
183197
margin-bottom: 1.5rem;
184-
border: 1px solid rgb(244, 114, 182);
185-
border-radius: 12px;
186-
background: linear-gradient(135deg, rgb(244, 114, 182), rgb(236, 72, 153));
198+
border: 2px solid transparent;
199+
border-radius: 16px;
200+
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
187201
padding: 1.5rem;
202+
color: #1f2937;
188203

189204
&:hover {
190-
transform: translateY(-5px);
191-
box-shadow: 0 8px 25px rgb(244, 114, 182);
192-
border-color: rgb(248, 134, 196);
193-
background: linear-gradient(135deg, rgb(248, 134, 196), rgb(240, 92, 167));
205+
transform: translateY(-8px) scale(1.02);
206+
box-shadow: 0 12px 35px rgba(250, 112, 154, 0.4);
207+
background: linear-gradient(135deg, #ff6b9d 0%, #ffa400 100%);
194208
}
195209
}
196210

197211
.scoreCircle {
198212
display: flex;
199213
justify-content: center;
200214
align-items: center;
201-
box-shadow: 0 0 20px rgb(16, 185, 129);
215+
box-shadow: 0 0 25px rgba(0, 242, 254, 0.5);
202216
border-radius: 50%;
203-
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
217+
background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
204218
width: 60px;
205219
height: 60px;
206220
color: #fff;
@@ -210,41 +224,44 @@
210224

211225
// Circular avatars only for participants
212226
.avatar {
213-
box-shadow: 0 0 15px rgb(236, 72, 153);
214-
border: 3px solid rgb(236, 72, 153);
227+
box-shadow: 0 0 20px rgba(250, 112, 154, 0.5);
228+
border: 4px solid transparent;
215229
border-radius: 50%;
230+
background: linear-gradient(white, white) padding-box,
231+
linear-gradient(135deg, #f093fb, #f5576c) border-box;
216232
width: 80px;
217233
height: 80px;
218234
transition: all 0.3s ease;
219235
cursor: pointer;
220236

221237
&:hover {
222-
transform: scale(1.1);
223-
box-shadow: 0 0 20px rgb(236, 72, 153);
238+
transform: scale(1.15);
239+
box-shadow: 0 0 30px rgba(250, 112, 154, 0.7);
224240
}
225241
}
226242

227243
.skillBadge {
228244
display: inline-block;
229245
margin: 0.25rem;
230-
box-shadow: 0 2px 8px rgb(99, 102, 241);
246+
box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
231247
border-radius: 20px;
232-
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
233-
padding: 0.25rem 0.75rem;
248+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
249+
padding: 0.35rem 0.85rem;
234250
color: #fff;
235251
font-size: 0.85rem;
252+
font-weight: 600;
236253
}
237254

238255
.techGradient {
239-
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
256+
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
240257
-webkit-background-clip: text;
241258
-webkit-text-fill-color: transparent;
242259
background-clip: text;
243260
font-weight: 700;
244261
}
245262

246263
.glowText {
247-
text-shadow: 0 0 10px rgb(99, 102, 241);
264+
text-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
248265
}
249266

250267
.participantCloud {

0 commit comments

Comments
 (0)