Skip to content

Commit a9da02d

Browse files
p4gsclaudehappy-otter
committed
Add neon glow effects to GRC orange/blue elements
Boost text-shadow and drop-shadow on title, tagline, buttons, nav logo, section titles, feature icons, and nav links for a cohesive neon sign aesthetic with GRC brand colors. Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
1 parent 63907d7 commit a9da02d

1 file changed

Lines changed: 18 additions & 10 deletions

File tree

docs/projects/nthpartyfinder/index.html

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
/* ── ICON SYSTEM ── */
5959
.feature-icon i {
6060
font-size: 2.2rem;
61-
text-shadow: 0 0 6px currentColor;
61+
filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 20px currentColor);
6262
}
6363
.badge i {
6464
font-size: 0.9rem;
@@ -96,7 +96,7 @@
9696
letter-spacing: 3px;
9797
text-transform: uppercase;
9898
color: var(--neon-pink);
99-
text-shadow: 0 0 20px rgba(255, 168, 79, 0.4);
99+
text-shadow: 0 0 10px rgba(255,168,79,.6), 0 0 30px rgba(255,168,79,.25), 0 0 60px rgba(255,168,79,.1);
100100
}
101101
.nav-links { display: flex; gap: 28px; }
102102
.nav-links a {
@@ -109,7 +109,7 @@
109109
}
110110
.nav-links a:hover {
111111
color: var(--neon-pink);
112-
text-shadow: 0 0 12px rgba(255, 168, 79, 0.5);
112+
text-shadow: 0 0 8px rgba(255,168,79,.6), 0 0 25px rgba(255,168,79,.3);
113113
}
114114

115115
/* ── HERO ── */
@@ -190,6 +190,11 @@
190190
-webkit-text-fill-color: transparent;
191191
background-clip: text;
192192
text-shadow: none;
193+
position: relative;
194+
filter: drop-shadow(0 0 12px rgba(255,168,79,.6)) drop-shadow(0 0 40px rgba(255,168,79,.3));
195+
}
196+
.hero-title span:not(.neon-word) {
197+
text-shadow: 0 0 20px rgba(255,255,255,.3), 0 0 60px rgba(27,149,193,.3);
193198
}
194199

195200
.hero-tagline {
@@ -198,7 +203,7 @@
198203
color: var(--neon-pink);
199204
margin-bottom: 24px;
200205
position: relative; z-index: 1;
201-
text-shadow: 0 0 15px rgba(255,168,79,.4);
206+
text-shadow: 0 0 10px rgba(255,168,79,.6), 0 0 30px rgba(255,168,79,.3), 0 0 60px rgba(255,168,79,.15);
202207
}
203208
@keyframes flicker {
204209
0%,19%,21%,23%,25%,54%,56%,100% { opacity:1; }
@@ -237,23 +242,25 @@
237242
display: inline-block;
238243
}
239244
.btn-neon-primary {
240-
background: linear-gradient(135deg, var(--neon-pink), #ff6b9d);
245+
background: linear-gradient(135deg, var(--neon-pink), #ffbe7a);
241246
color: #fff;
242-
box-shadow: 0 0 30px rgba(255,168,79,.3), inset 0 0 20px rgba(255,255,255,.05);
247+
box-shadow: 0 0 20px rgba(255,168,79,.4), 0 0 60px rgba(255,168,79,.15), inset 0 0 20px rgba(255,255,255,.05);
243248
}
244249
.btn-neon-primary:hover {
245250
transform: translateY(-2px);
246-
box-shadow: 0 0 50px rgba(255,168,79,.5), inset 0 0 20px rgba(255,255,255,.1);
251+
box-shadow: 0 0 30px rgba(255,168,79,.6), 0 0 80px rgba(255,168,79,.3), inset 0 0 20px rgba(255,255,255,.1);
247252
color: #fff;
248253
}
249254
.btn-neon-ghost {
250255
background: transparent;
251256
color: var(--neon-blue);
252-
border: 1px solid rgba(27,149,193,.3);
257+
border: 1px solid rgba(27,149,193,.4);
258+
text-shadow: 0 0 10px rgba(27,149,193,.5), 0 0 30px rgba(27,149,193,.2);
253259
}
254260
.btn-neon-ghost:hover {
255261
border-color: var(--neon-blue);
256-
box-shadow: 0 0 25px rgba(27,149,193,.2);
262+
box-shadow: 0 0 20px rgba(27,149,193,.4), 0 0 60px rgba(27,149,193,.15);
263+
text-shadow: 0 0 10px rgba(27,149,193,.7), 0 0 40px rgba(27,149,193,.3);
257264
color: var(--neon-blue);
258265
}
259266

@@ -287,7 +294,7 @@
287294
text-transform: uppercase;
288295
color: var(--neon-pink);
289296
margin-bottom: 8px;
290-
text-shadow: 0 0 10px rgba(255,168,79,.3);
297+
text-shadow: 0 0 8px rgba(255,168,79,.6), 0 0 25px rgba(255,168,79,.25);
291298
}
292299
.section-title {
293300
font-family: var(--font-display);
@@ -298,6 +305,7 @@
298305
color: var(--text-bright);
299306
margin-bottom: 8px;
300307
line-height: 1.3;
308+
text-shadow: 0 0 15px rgba(255,255,255,.2), 0 0 40px rgba(27,149,193,.15);
301309
}
302310
.section-sub {
303311
color: var(--text-dim);

0 commit comments

Comments
 (0)