patx/afterdarklabs
simplify the hero
Commit 3189be0 · patx · 2026-07-08T17:12:52-04:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index 176268a..0025448 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -26,7 +26,7 @@
<meta name="twitter:image:alt" content="After Dark Labs Florida website design and development">
<link rel="stylesheet" href="index.tailwind.css?v=2">
<style>
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=Syne:wght@500;600;700;800&family=Yellowtail&display=swap');
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=Syne:wght@500;600;700;800&display=swap');
:root {
--neon: #ccff00;
@@ -58,15 +58,10 @@
isolation: isolate;
display: inline-flex;
align-items: baseline;
- font-family: 'Yellowtail', cursive;
- font-size: clamp(0.94em, 18vw, 1.22em);
- font-weight: 400;
- letter-spacing: 0.01em;
- line-height: 0.9;
+ font: inherit;
+ letter-spacing: inherit;
+ line-height: inherit;
color: var(--neon);
- transform: rotate(-1deg);
- transform-origin: left center;
- vertical-align: -0.03em;
white-space: nowrap;
}
@@ -74,21 +69,22 @@
.neon-gap {
position: relative;
display: inline-block;
+ font: inherit;
+ letter-spacing: inherit;
+ line-height: inherit;
}
.neon-letter {
color: #ccff00;
-webkit-text-fill-color: currentColor;
- -webkit-text-stroke: 0.012em rgba(250,255,205,0.88);
+ -webkit-text-stroke: 0.006em rgba(235,255,120,0.58);
filter:
- drop-shadow(0 0 0.014em rgba(255,255,235,0.72))
+ drop-shadow(0 0 0.012em rgba(235,255,120,0.54))
drop-shadow(0 0 0.045em rgba(204,255,0,0.72))
drop-shadow(0 0 0.105em rgba(204,255,0,0.26));
text-shadow:
- 0 0 0.035em rgba(255,255,235,0.55),
+ 0 0 0.026em rgba(235,255,120,0.38),
0 0 0.095em rgba(204,255,0,0.42);
- animation: neon-letter-idle 5.2s ease-in-out infinite;
- animation-delay: var(--idle-delay, 0s);
}
.neon-letter::after {
@@ -104,15 +100,12 @@
}
.neon-letter--flicker {
- animation-name: neon-letter-idle, neon-letter-flicker;
- animation-duration: 5.2s, var(--flicker-duration, 9s);
- animation-timing-function: ease-in-out, linear;
- animation-iteration-count: infinite, infinite;
- animation-delay: var(--idle-delay, 0s), var(--flicker-delay, 0s);
+ animation: neon-letter-flicker var(--flicker-duration, 12s) steps(1, end) infinite;
+ animation-delay: var(--flicker-delay, 0s);
}
.neon-gap {
- width: 0.22em;
+ width: 0.18em;
}
.hero-content {
@@ -130,38 +123,26 @@
z-index: 1;
}
- @keyframes neon-letter-idle {
- 0%, 100% {
+ @keyframes neon-letter-flicker {
+ 0%, 4.8%, 5.4%, 5.9%, 37.5%, 38%, 38.6%, 100% {
+ opacity: 1;
+ -webkit-text-stroke-color: rgba(235,255,120,0.58);
filter:
- drop-shadow(0 0 0.014em rgba(255,255,235,0.72))
+ drop-shadow(0 0 0.012em rgba(235,255,120,0.54))
drop-shadow(0 0 0.045em rgba(204,255,0,0.72))
drop-shadow(0 0 0.105em rgba(204,255,0,0.26));
}
- 50% {
- filter:
- drop-shadow(0 0 0.018em rgba(255,255,235,0.84))
- drop-shadow(0 0 0.055em rgba(204,255,0,0.80))
- drop-shadow(0 0 0.13em rgba(204,255,0,0.32));
- }
- }
-
- @keyframes neon-letter-flicker {
- 0%, 4%, 6%, 9%, 37%, 39%, 41%, 100% {
- opacity: 1;
- -webkit-text-stroke-color: rgba(250,255,205,0.88);
+ 5%, 37.8% {
+ opacity: 0.08;
+ -webkit-text-stroke-color: rgba(204,255,0,0.18);
+ filter: none;
}
- 4.7%, 38% {
- opacity: 0.22;
- -webkit-text-stroke-color: rgba(204,255,0,0.28);
+ 5.7%, 38.3% {
+ opacity: 0.38;
+ -webkit-text-stroke-color: rgba(204,255,0,0.36);
filter:
- drop-shadow(0 0 0.006em rgba(204,255,0,0.30))
- drop-shadow(0 0 0.025em rgba(204,255,0,0.18));
- }
- 5.4%, 40% {
- opacity: 0.64;
- }
- 70%, 71.5% {
- opacity: 0.48;
+ drop-shadow(0 0 0.012em rgba(204,255,0,0.34))
+ drop-shadow(0 0 0.036em rgba(204,255,0,0.20));
}
}
@@ -294,7 +275,7 @@
<div class="hero-content mx-auto grid w-full max-w-7xl gap-10 px-6 py-32 text-left lg:grid-cols-[1.3fr_0.7fr] lg:items-end">
<div>
<h1 class="heading text-7xl font-bold leading-none tracking-tighter md:text-8xl lg:text-7xl xl:text-8xl">
- Websites and tools that help businesses<br><span class="neon-text" aria-hidden="true"><span class="neon-letter neon-letter--flicker" data-letter="s" style="--idle-delay:-0.4s; --flicker-delay:-1.1s; --flicker-duration:11s;">s</span><span class="neon-letter" data-letter="t" style="--idle-delay:-1.6s;">t</span><span class="neon-letter neon-letter--flicker" data-letter="a" style="--idle-delay:-2.2s; --flicker-delay:-5.6s; --flicker-duration:13s;">a</span><span class="neon-letter" data-letter="n" style="--idle-delay:-0.8s;">n</span><span class="neon-letter neon-letter--flicker" data-letter="d" style="--idle-delay:-3.1s; --flicker-delay:-8.4s; --flicker-duration:15s;">d</span><span class="neon-gap"></span><span class="neon-letter" data-letter="o" style="--idle-delay:-1.2s;">o</span><span class="neon-letter neon-letter--flicker" data-letter="u" style="--idle-delay:-2.7s; --flicker-delay:-3.3s; --flicker-duration:12s;">u</span><span class="neon-letter" data-letter="t" style="--idle-delay:-3.6s;">t</span></span><span class="sr-only">stand out</span>
+ Websites and tools that help businesses<br><span class="neon-text" aria-hidden="true"><span class="neon-letter neon-letter--flicker" data-letter="s" style="--flicker-delay:-1.1s; --flicker-duration:11s;">s</span><span class="neon-letter" data-letter="t">t</span><span class="neon-letter neon-letter--flicker" data-letter="a" style="--flicker-delay:-5.6s; --flicker-duration:13s;">a</span><span class="neon-letter" data-letter="n">n</span><span class="neon-letter neon-letter--flicker" data-letter="d" style="--flicker-delay:-8.4s; --flicker-duration:15s;">d</span><span class="neon-gap"></span><span class="neon-letter" data-letter="o">o</span><span class="neon-letter neon-letter--flicker" data-letter="u" style="--flicker-delay:-3.3s; --flicker-duration:12s;">u</span><span class="neon-letter" data-letter="t">t</span></span><span class="sr-only">stand out</span>
</h1>
</div>
<div class="mx-auto flex max-w-xl flex-col items-start gap-8 lg:mx-0">