patx/afterdarklabs
indexerd 4 -> ADL
Commit d54c565 · patx · 2026-09-03T02:20:28-04:00
Comments
No comments yet.
Diff
diff --git a/docs/indexerd.html b/docs/indexerd.html
index 274172b..765368b 100644
--- a/docs/indexerd.html
+++ b/docs/indexerd.html
@@ -58,8 +58,8 @@
:root {
--neon: #ccff00;
- --page-bg: #ffffff;
- --page-bg-rgb: 23, 33, 43;
+ --page-bg: #000000;
+ --page-bg-rgb: 0, 0, 0;
--site-nav-height: 5.75rem;
}
@@ -96,7 +96,7 @@
}
.heading,
- .logo-font { font-family: inherit; color: #000; }
+ .logo-font { font-family: inherit; color: #fff; }
.hero-bg { background: var(--page-bg); }
@@ -106,11 +106,11 @@
}
.neon-ink {
- color: #000;
+ color: #fff;
}
.bg-black\/90 {
- background-color: #fff; !important;
+ background-color: #000 !important;
}
.neon-text {
@@ -217,11 +217,19 @@
align-items: center;
justify-content: center;
padding: 0.75rem 1.15rem;
+ background-color: #000 !important;
+ color: #fff !important;
font-size: clamp(1.05rem, 5vw, 1.3rem);
line-height: 1;
letter-spacing: -0.035em;
}
+ .nav-cta:hover,
+ .nav-cta:focus-visible {
+ background-color: #fff !important;
+ color: #000 !important;
+ }
+
.nav-brand-word {
display: flex;
padding-right: 0.08em;
@@ -262,7 +270,7 @@
.hero-vignette {
position: absolute;
inset: 0;
- background: #fff;
+ background: #000;
pointer-events: none;
z-index: 1;
}
@@ -309,6 +317,32 @@
will-change: opacity, filter, transform;
}
+ .hero-letter-group {
+ display: inline-flex;
+ flex-direction: column;
+ align-items: flex-start;
+ vertical-align: top;
+ line-height: 0.8;
+ }
+
+ .hero-letter-label {
+ margin-top: 0.12em;
+ color: currentColor;
+ font-size: clamp(0.7rem, 1.65vw, 1.5rem);
+ font-weight: 500;
+ line-height: 1;
+ letter-spacing: -0.045em;
+ }
+
+ .hero-letter-group:nth-child(1) .hero-letter-label {
+ margin-left: clamp(0.35rem, 0.7vw, 0.8rem);
+ }
+
+ .hero-letter-group:nth-child(2) .hero-letter-label,
+ .hero-letter-group:nth-child(3) .hero-letter-label {
+ margin-left: clamp(0.65rem, 4vw, 5rem);
+ }
+
@keyframes neon-letter-flicker {
0%, 4.8%, 5.4%, 5.9%, 37.5%, 38%, 38.6%, 100% {
opacity: 1;
@@ -371,7 +405,7 @@
flex-wrap: wrap;
gap: 0 0.2em;
margin: 0 auto;
- color: #000;
+ color: #fff;
font-size: clamp(2.85rem, 8vw, 7rem);
font-weight: 700;
line-height: 0.94;
@@ -400,7 +434,7 @@
}
.work-heading-email:focus-visible {
- outline: 0.055em solid #000;
+ outline: 0.055em solid #fff;
outline-offset: 0.075em;
}
@@ -531,7 +565,7 @@
align-items: center;
overflow: hidden;
padding: clamp(1rem, 2.5vw, 2.75rem);
- background: rgba(255, 255, 255, 0.94);
+ background: rgba(0, 0, 0, 0.94);
opacity: 0;
clip-path: inset(100% 0 0 0);
pointer-events: none;
@@ -565,7 +599,7 @@
#work-scroller > article > .portfolio-details > p {
width: 100%;
margin: 0;
- color: #000;
+ color: #fff;
font-size: clamp(1.2rem, 3vw, 3.5rem);
font-weight: 500;
line-height: 0.98;
@@ -575,7 +609,7 @@
.portfolio-description {
display: block;
- color: #000;
+ color: #fff;
}
.portfolio-name {
@@ -584,7 +618,7 @@
.portfolio-live-link {
display: inline-block;
- color: #000;
+ color: #fff;
font-weight: 500;
text-decoration: none;
transition: font-weight 160ms ease;
@@ -597,7 +631,7 @@
}
.portfolio-live-link:focus-visible {
- outline: 0.09em solid #000;
+ outline: 0.09em solid #fff;
outline-offset: 0.08em;
}
@@ -721,7 +755,7 @@
<div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:py-5">
<div class="flex items-center justify-between gap-3 lg:hidden">
<a href="#hero" class="nav-brand flex min-w-0 items-center rounded-2xl p-1.5 pr-3 text-left text-white transition-colors hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00]" aria-label="Go to top">
- <span class="nav-brand-word logo-font font-semibold" aria-hidden="true"><span class="nav-brand-letter">E</span><span class="nav-brand-letter">R</span><span class="nav-brand-letter">D</span></span>
+ <span class="nav-brand-word logo-font font-semibold" aria-hidden="true"><span class="nav-brand-letter">A</span><span class="nav-brand-letter">D</span><span class="nav-brand-letter">L</span></span>
</a>
<a href="mailto:[email protected]" class="nav-cta neon-ink shrink-0 rounded-2xl bg-[#fff] font-semibold transition-colors hover:bg-white">Let's Talk</a>
</div>
@@ -729,7 +763,7 @@
<div class="hidden items-center justify-between lg:flex">
<a href="#hero" class="nav-brand flex items-center gap-3" aria-label="Go to top">
<div>
- <span class="nav-brand-word logo-font font-semibold" aria-hidden="true"><span class="nav-brand-letter">E</span><span class="nav-brand-letter">R</span><span class="nav-brand-letter">D</span></span>
+ <span class="nav-brand-word logo-font font-semibold" aria-hidden="true"><span class="nav-brand-letter">A</span><span class="nav-brand-letter">D</span><span class="nav-brand-letter">L</span></span>
</div>
</a>
<a href="mailto:[email protected]" class="nav-cta neon-ink rounded-2xl bg-[#fff] font-semibold transition-colors hover:bg-white">Let's Talk</a>
@@ -743,7 +777,7 @@
<div class="hero-content mx-auto grid w-full max-w-7xl justify-items-center gap-10 px-6 py-32 text-center">
<div>
- <h1 class="heading text-7xl font-bold leading-none tracking-tighter md:text-8xl lg:text-7xl xl:text-8xl" aria-label="ERD"><span class="hero-letter" aria-hidden="true">E</span><span class="hero-letter" aria-hidden="true">R</span><span class="hero-letter" aria-hidden="true">D</span></h1>
+ <h1 class="heading text-7xl font-bold leading-none tracking-tighter md:text-8xl lg:text-7xl xl:text-8xl" aria-label="ADL"><span class="hero-letter-group" aria-hidden="true"><span class="hero-letter">A</span><span class="hero-letter-label">After</span></span><span class="hero-letter-group" aria-hidden="true"><span class="hero-letter">D</span><span class="hero-letter-label">Dark</span></span><span class="hero-letter-group" aria-hidden="true"><span class="hero-letter">L</span><span class="hero-letter-label">Labs</span></span></h1>
</div>
</div>
@@ -870,7 +904,7 @@
<span class="work-heading-word">business</span>
<span class="work-heading-word">forward</span>
<span class="work-heading-word">→</span>
- <a class="work-heading-word work-heading-email" href="mailto:[email protected]">[email protected]</a>
+ <a class="work-heading-word work-heading-email" href="mailto:[email protected]">[email protected]</a>
</span>
</h2>
</div>
@@ -926,6 +960,7 @@
const hero = document.getElementById('hero');
const heading = hero?.querySelector('.hero-content h1');
const letters = Array.from(heading?.querySelectorAll('.hero-letter') || []);
+ const labels = letters.map(letter => letter.parentElement?.querySelector('.hero-letter-label'));
const nav = document.querySelector('nav');
const brands = Array.from(document.querySelectorAll('.nav-brand'));
const navLetterGroups = brands.map(brand => Array.from(brand.querySelectorAll('.nav-brand-letter')));
@@ -952,6 +987,11 @@
letter.style.removeProperty('--hero-letter-blur');
letter.style.removeProperty('--hero-letter-scale');
});
+ labels.forEach(label => {
+ label?.style.removeProperty('opacity');
+ label?.style.removeProperty('filter');
+ label?.style.removeProperty('transform');
+ });
navLetterGroups.forEach(group => group.forEach(letter => {
letter.style.setProperty('--nav-letter-opacity', revealBrand ? '1' : '0');
letter.style.removeProperty('--nav-letter-blur');
@@ -979,6 +1019,12 @@
letter.style.setProperty('--hero-letter-opacity', (1 - eased).toFixed(4));
letter.style.setProperty('--hero-letter-blur', `${(eased * headingSize * 0.018).toFixed(2)}px`);
letter.style.setProperty('--hero-letter-scale', (1 - eased * 0.055).toFixed(4));
+ const label = labels[index];
+ if (label) {
+ label.style.opacity = (1 - eased).toFixed(4);
+ label.style.filter = `blur(${(eased * headingSize * 0.018).toFixed(2)}px)`;
+ label.style.transform = `scale(${(1 - eased * 0.055).toFixed(4)})`;
+ }
navLetterGroups.forEach(group => {
const navLetter = group[index];