patx/afterdarklabs
change ctas back keep nav changes
Commit 1c2b8f8 · patx · 2026-07-04T00:16:46-04:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index 61e00c9..b006938 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -100,50 +100,6 @@
font-weight: 600;
}
- #mobile-nav-toggle .hamburger-icon {
- display: flex;
- flex-direction: column;
- gap: 4px;
- }
-
- #mobile-nav-toggle .hamburger-line {
- display: block;
- width: 20px;
- height: 2px;
- border-radius: 9999px;
- background: currentColor;
- }
-
- .sticky-demo-cta {
- position: fixed;
- left: 50%;
- bottom: calc(16px + env(safe-area-inset-bottom));
- z-index: 60;
- display: inline-flex;
- width: min(calc(100vw - 32px), 352px);
- min-height: 56px;
- align-items: center;
- justify-content: center;
- border-radius: 24px;
- background: var(--neon);
- color: #000;
- font-weight: 700;
- box-shadow: 0 18px 40px rgba(0,0,0,0.32);
- opacity: 0;
- pointer-events: none;
- transform: translate(-50%, calc(100% + 32px));
- transition: opacity 180ms ease, transform 180ms ease, background-color 150ms ease;
- }
-
- .sticky-demo-cta:hover {
- background: #fff;
- }
-
- .sticky-demo-cta.is-visible {
- opacity: 1;
- pointer-events: auto;
- transform: translate(-50%, 0);
- }
</style>
<script type="application/ld+json">
{
@@ -204,20 +160,14 @@
<nav class="fixed top-0 z-50 w-full bg-black/90 backdrop-blur-lg">
<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="flex min-w-0 items-center gap-2 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]">
+ <button type="button" id="mobile-nav-toggle" class="flex min-w-0 items-center gap-2 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-controls="mobile-nav-menu" aria-expanded="false" aria-label="Open navigation menu">
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-2xl border-2 border-[#ccff00] bg-black text-lg font-bold">🌑</span>
<span class="min-w-0">
<span class="logo-font block truncate text-xl font-semibold tracking-tighter">After Dark</span>
<span class="logo-font -mt-1 block text-xs tracking-[3px] text-[#ccff00]">LABS</span>
</span>
- </a>
- <button type="button" id="mobile-nav-toggle" class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl text-gray-300 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00]" aria-controls="mobile-nav-menu" aria-expanded="false" aria-label="Open navigation menu">
- <span class="hamburger-icon" aria-hidden="true">
- <span class="hamburger-line"></span>
- <span class="hamburger-line"></span>
- <span class="hamburger-line"></span>
- </span>
</button>
+ <a href="#questionnaire" class="shrink-0 rounded-2xl bg-[#ccff00] px-4 py-3 text-sm font-semibold text-black transition-colors hover:bg-white">Get Free Demo</a>
</div>
<div class="hidden items-center justify-between lg:flex">
@@ -235,6 +185,7 @@
<a href="#work" class="transition-colors hover:text-[#ccff00]" data-nav-link>Our Work</a>
<a href="#questionnaire" class="transition-colors hover:text-[#ccff00]" data-nav-link>Contact</a>
</div>
+ <a href="#questionnaire" class="rounded-2xl bg-[#ccff00] px-6 py-3 font-semibold text-black transition-colors hover:bg-white">Get Free Demo</a>
</div>
</div>
@@ -461,8 +412,6 @@
<img id="work-modal-image" class="max-h-[86vh] max-w-[94vw] object-contain shadow-2xl" alt="Selected work screenshot preview">
</div>
- <a id="sticky-demo-cta" href="#questionnaire" class="sticky-demo-cta" aria-hidden="true" tabindex="-1">Get Your Free Demo</a>
-
<script>
(function () {
const toggle = document.getElementById('mobile-nav-toggle');
@@ -492,40 +441,6 @@
});
})();
- (function () {
- const stickyCta = document.getElementById('sticky-demo-cta');
- const hero = document.getElementById('hero');
- const questionnaire = document.getElementById('questionnaire');
- const nav = document.querySelector('nav');
- if (!stickyCta || !hero || !questionnaire) return;
-
- function setStickyCtaVisible(isVisible) {
- stickyCta.classList.toggle('is-visible', isVisible);
-
- if (isVisible) {
- stickyCta.removeAttribute('aria-hidden');
- stickyCta.removeAttribute('tabindex');
- } else {
- stickyCta.setAttribute('aria-hidden', 'true');
- stickyCta.setAttribute('tabindex', '-1');
- }
- }
-
- function updateStickyCta() {
- const navHeight = nav ? nav.getBoundingClientRect().height : 0;
- const revealOffset = navHeight + 32;
- const contactEntryOffset = 160;
- const isPastHero = hero.getBoundingClientRect().bottom <= revealOffset;
- const isBeforeQuestionnaire = questionnaire.getBoundingClientRect().top > window.innerHeight - contactEntryOffset;
- setStickyCtaVisible(isPastHero && isBeforeQuestionnaire);
- }
-
- requestAnimationFrame(updateStickyCta);
- window.addEventListener('load', updateStickyCta);
- window.addEventListener('scroll', updateStickyCta, { passive: true });
- window.addEventListener('resize', updateStickyCta);
- })();
-
(function () {
const activeClasses = ['text-[#ccff00]', 'font-semibold'];
const navLinks = Array.from(document.querySelectorAll('nav a[data-nav-link]'));