Skip to content

Commit 28a1bbe

Browse files
p4gsclaudehappy-otter
committed
Bigger bolder title with lava lamp flowing drop shadow
Title font enlarged to 6.5rem max, weight 900, white text. Added lava-shadow animation that flows GRC orange/blue colors through zero-blur drop shadows with 6s ease-in-out cycle. "Finder" line runs same animation offset by 3s for organic feel. 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 ae3997f commit 28a1bbe

1 file changed

Lines changed: 22 additions & 13 deletions

File tree

docs/projects/nthpartyfinder/index.html

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -180,28 +180,37 @@
180180

181181
.hero-title {
182182
font-family: var(--font-display);
183-
font-size: clamp(2.4rem, 7vw, 5rem);
184-
font-weight: 700;
185-
line-height: 1.8;
186-
letter-spacing: 4px;
183+
font-size: clamp(3.2rem, 9vw, 6.5rem);
184+
font-weight: 900;
185+
letter-spacing: 6px;
187186
text-transform: uppercase;
188187
line-height: 1.15;
189-
color: var(--text-bright);
188+
color: #fff;
190189
margin-bottom: 12px;
191190
position: relative;
192191
z-index: 1;
193192
}
193+
@keyframes lava-shadow {
194+
0% { text-shadow: 3px 3px 0 #FFA84F, -2px 2px 0 #1B95C1; }
195+
15% { text-shadow: 3px 3px 0 #ffb86a, -2px 2px 0 #1da8d6; }
196+
30% { text-shadow: 3px 3px 0 #1B95C1, -2px 2px 0 #FFA84F; }
197+
45% { text-shadow: 3px 3px 0 #1da8d6, -2px 2px 0 #ffb86a; }
198+
60% { text-shadow: 3px 3px 0 #2bb5e0, -2px 2px 0 #ff9a35; }
199+
75% { text-shadow: 3px 3px 0 #FFA84F, -2px 2px 0 #2bb5e0; }
200+
100% { text-shadow: 3px 3px 0 #FFA84F, -2px 2px 0 #1B95C1; }
201+
}
194202
.hero-title .neon-word {
195-
background: linear-gradient(135deg, var(--neon-pink), var(--neon-blue));
196-
-webkit-background-clip: text;
197-
-webkit-text-fill-color: transparent;
198-
background-clip: text;
199-
text-shadow: none;
200-
position: relative;
201-
filter: drop-shadow(0 0 12px rgba(255,168,79,.6)) drop-shadow(0 0 40px rgba(255,168,79,.3));
203+
-webkit-text-fill-color: #fff;
204+
color: #fff;
205+
background: none;
206+
-webkit-background-clip: unset;
207+
background-clip: unset;
208+
animation: lava-shadow 6s ease-in-out infinite;
209+
filter: none;
202210
}
203211
.hero-title span:not(.neon-word) {
204-
text-shadow: 0 0 20px rgba(255,255,255,.3), 0 0 60px rgba(27,149,193,.3);
212+
animation: lava-shadow 6s ease-in-out infinite;
213+
animation-delay: -3s;
205214
}
206215

207216
.hero-tagline {

0 commit comments

Comments
 (0)