patx/afterdarklabs
Add full-screen contact form and minify page assets
Commit 46f9686 · patx · 2026-09-20T00:38:22-04:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index 64268f7..3612030 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -28,100 +28,8 @@
<meta name="twitter:image" content="https://afterdarklabs.io/twitter-card.png?v=4">
<meta name="twitter:image:alt" content="After Dark Labs. Custom websites and apps.">
<link rel="preload" href="https://afterdarklabs.io/fonts/ubuntu-700-latin.woff2" as="font" type="font/woff2" crossorigin>
- <style>
- @font-face{font-family:Ubuntu;font-style:normal;font-weight:700;font-display:swap;src:url(https://afterdarklabs.io/fonts/ubuntu-700-latin.woff2)format("woff2")}:root{--page-bg:#000;--site-nav-height:5.75rem}*,:before,:after{box-sizing:border-box}html{overscroll-behavior-x:none;scroll-behavior:smooth;-webkit-text-size-adjust:100%;max-width:100%;line-height:1.5;overflow-x:clip}@media (width>=1024px){:root{--site-nav-height:5.5rem}html{font-size:125%}}body{overscroll-behavior-x:none;background:var(--page-bg);color:#fff;max-width:100%;font-family:Ubuntu,system-ui,sans-serif;font-weight:700;line-height:inherit;margin:0;overflow-x:clip}h1,h2,p{margin:0}h1,h2{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:none}img,svg{vertical-align:middle;display:block}img{max-width:100%;height:auto}nav{z-index:50;background:#000;width:100%;position:fixed;top:0;backdrop-filter:none!important}.nav-shell{width:100%;max-width:80rem;margin-inline:auto;padding:1rem}.mobile-nav,.desktop-nav{justify-content:space-between;align-items:center}.mobile-nav{gap:.75rem;display:flex}.desktop-nav{display:none}.nav-brand{color:#fff;align-items:center;display:flex}.mobile-nav .nav-brand{text-align:left;border-radius:1rem;min-width:0;padding:.375rem .75rem .375rem .375rem;transition:background-color .15s cubic-bezier(.4,0,.2,1)}.mobile-nav .nav-brand:hover{background:#ffffff1a}.mobile-nav .nav-brand:focus{outline:none}.mobile-nav .nav-brand:focus-visible{outline-offset:2px;outline:2px solid #fff}.desktop-nav .nav-brand{gap:.75rem}@media (width>=640px){.nav-shell{padding-inline:1.5rem}}@media (width>=1024px){.nav-shell{padding-block:1.25rem}.mobile-nav{display:none}.desktop-nav{display:flex}}.hero-content{z-index:2;text-align:center;justify-items:center;gap:2.5rem;width:100%;max-width:none;margin-inline:auto;padding-block:0;padding-inline:0;display:grid;position:relative}#hero{box-sizing:border-box;background:var(--page-bg);height:100svh;min-height:100svh;padding-top:var(--site-nav-height);align-items:center;padding-bottom:0;display:flex;position:relative;overflow:hidden}.nav-brand{transform-origin:0}.nav-cta{letter-spacing:-.035em;border-radius:1rem;flex-shrink:0;justify-content:center;align-items:center;min-height:3.25rem;padding:.75rem 1.15rem;font-size:clamp(1.05rem,5vw,1.3rem);font-weight:700;line-height:1;transition:color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1);display:inline-flex;color:#fff!important;background-color:#000!important}.nav-cta:hover,.nav-cta:focus-visible{color:#000!important;background-color:#fff!important}.nav-brand-word{letter-spacing:-.055em;white-space:nowrap;gap:.22em;padding-right:.08em;font-size:clamp(1.25rem,5.8vw,1.7rem);font-weight:700;line-height:.9;display:flex}.nav-brand-letter{transform-origin:50%;display:inline-block}@media (width>=1024px){.nav-brand-word{font-size:clamp(1.5rem,2.2vw,2rem)}.nav-cta{min-height:2.75rem;padding:.72rem 1.35rem;font-size:clamp(1.2rem,2vw,1.6rem)}}.hero-vignette{pointer-events:none;z-index:1;background:#000;position:absolute;inset:0}@media (width<=767px){#hero{--mobile-nav-height:5.75rem;box-sizing:border-box;height:var(--mobile-hero-height,100svh);min-height:var(--mobile-hero-height,100svh);padding-top:var(--mobile-nav-height);align-items:stretch;padding-bottom:0}.hero-content{align-content:center;gap:0;padding-block:clamp(1.25rem,4svh,2rem)}.hero-content h1{font-size:clamp(2.75rem,min(17vw,9.5svh),4.5rem)}}.hero-content h1{width:max-content;font-size:31vw;font-size:min(31vw, calc((100svh - var(--site-nav-height)) * .4));letter-spacing:-.075em;flex-direction:column;align-items:center;padding-right:.1em;font-weight:700;line-height:.8;display:flex}.hero-letter{transform-origin:50%;display:inline-block}.hero-word{display:block}.hero-scroll-hint{bottom:max(1rem, env(safe-area-inset-bottom));z-index:3;color:#fff;letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:.55rem;font-size:clamp(.7rem,1.1vw,.85rem);font-weight:700;line-height:1;text-decoration:none;transition:opacity .16s;display:inline-flex;position:absolute;left:50%;transform:translate(-50%)}.hero-scroll-hint:after{content:"";border-bottom:.12em solid;border-right:.12em solid;width:.58em;height:.58em;animation:1.65s cubic-bezier(.45,0,.2,1) infinite hero-scroll-nudge}.hero-scroll-hint:hover{opacity:.68}.hero-scroll-hint:focus-visible{outline-offset:.4rem;outline:2px solid #fff}@keyframes hero-scroll-nudge{0%,to{transform:translateY(-.12rem)rotate(45deg)}50%{transform:translateY(.2rem)rotate(45deg)}}.work-intro{background:var(--page-bg);height:100svh;position:relative}.work-intro:not(.work-intro--closing){height:auto}.work-intro-stage{top:var(--site-nav-height);z-index:3;box-sizing:border-box;height:calc(100svh - var(--site-nav-height));align-items:center;padding:clamp(.75rem,1.5vw,1.25rem) clamp(1.5rem,5vw,4rem);display:flex;position:sticky;overflow:hidden}.work-intro:not(.work-intro--closing) .work-intro-stage{align-items:flex-start;height:auto;padding-top:0;padding-bottom:25px;position:relative;top:auto}.work-heading{color:#fff;letter-spacing:-.065em;text-wrap:balance;flex-wrap:wrap;gap:0 .2em;width:100%;max-width:78rem;margin:0 auto;font-size:clamp(2.85rem,8vw,7rem);font-weight:700;line-height:.94;display:flex}#work-heading{scroll-margin-top:calc(var(--site-nav-height) + 1rem)}.work-heading-words{display:contents}.work-heading-word{display:inline-block}.work-heading-email{color:inherit;width:100%;font-weight:700;text-shadow:.018em 0 transparent,-.018em 0 transparent;text-decoration:none;transition:text-shadow .16s}.work-heading-email .bi-send{vertical-align:-.06em;width:.9em;height:.9em;display:inline-block}.work-heading-email:hover,.work-heading-email:focus-visible{text-shadow:.018em 0,-.018em 0}.work-heading-email:focus-visible{outline-offset:.075em;outline:.055em solid #fff}.work-intro--closing{height:auto;min-height:0}.work-intro--closing .work-intro-stage{align-items:flex-start;height:auto;padding-top:48px;padding-bottom:56px;position:relative;top:auto}.work-stage{box-sizing:border-box;padding:clamp(0rem,.5vw,.5rem) clamp(1rem,2vw,2rem)}#work{background:var(--page-bg);scroll-margin-top:6rem}.work-stage-content{width:100%;min-width:0;max-width:none;margin-inline:auto}#work-scroller{touch-action:pan-y pinch-zoom;grid-template-columns:minmax(0,1fr);gap:clamp(.3rem,.6vw,.65rem);padding:0;display:grid;overflow:visible}#work-scroller>article{isolation:isolate;aspect-ratio:16/9;background:var(--page-bg);border-radius:0;width:100%;min-width:0;position:relative;overflow:hidden}#work-scroller>article>.portfolio-media{border-radius:0;width:100%;height:100%;display:block}#work-scroller>article>.portfolio-media>img{aspect-ratio:auto;object-fit:cover;width:100%;height:100%;transition:transform .6s cubic-bezier(.16,1,.3,1)}#work-scroller>article>.portfolio-details{z-index:2;box-sizing:border-box;opacity:0;pointer-events:none;transform-origin:bottom;backdrop-filter:blur(.35rem);background:#000000f0;align-items:center;padding:clamp(1rem,2.5vw,2.75rem);transition:opacity .18s,transform .52s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;inset:0;overflow:hidden;transform:translateY(7%)skewY(1.2deg)}#work-scroller>article:focus-within>.portfolio-details{opacity:1;pointer-events:auto;transform:none}#work-scroller>article:focus-within>.portfolio-media>img{transform:scale(1.025)}#work-scroller>article:focus-visible{outline-offset:-2px;outline:2px solid #fff}#work-scroller>article>.portfolio-details>p{color:#fff;width:100%;font-size:var(--portfolio-copy-size,clamp(1.2rem, 3vw, 3.5rem));letter-spacing:-.04em;text-wrap:balance;margin:0;font-weight:700;line-height:.98}#work-scroller>article:first-child{--portfolio-copy-size:clamp(12px, calc(8.165vw - 5.73px), 88px)}#work-scroller>article:nth-child(2){--portfolio-copy-size:clamp(12px, calc(7.715vw - 6.08px), 88px)}#work-scroller>article:nth-child(3){--portfolio-copy-size:clamp(12px, calc(6.816vw - 4.68px), 88px)}#work-scroller>article:nth-child(4){--portfolio-copy-size:clamp(12px, calc(7.715vw - 6.08px), 88px)}#work-scroller>article:nth-child(5){--portfolio-copy-size:clamp(12px, calc(8.015vw - 5.58px), 88px)}#work-scroller>article:nth-child(6){--portfolio-copy-size:clamp(12px, calc(6.779vw - 5.5px), 88px)}#work-scroller>article:nth-child(7){--portfolio-copy-size:clamp(12px, calc(6.816vw - 4.68px), 88px)}#work-scroller>article:nth-child(8){--portfolio-copy-size:clamp(12px, calc(6.779vw - 5.5px), 88px)}.portfolio-description{color:#fff;display:block}.portfolio-name{font-weight:700;text-shadow:.018em 0,-.018em 0}.portfolio-live-link{color:#fff;text-shadow:.018em 0 transparent,-.018em 0 transparent;white-space:nowrap;align-items:baseline;gap:.18em;font-weight:700;text-decoration:none;transition:text-shadow .16s;display:inline-flex}.portfolio-live-link svg{flex:none;width:.72em;height:.72em}.portfolio-live-link svg path{stroke:currentColor;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill;transition:stroke-width .16s}.portfolio-live-link:hover,.portfolio-live-link:focus-visible{text-shadow:.018em 0,-.018em 0;font-weight:700}.portfolio-live-link:hover svg path,.portfolio-live-link:focus-visible svg path{stroke-width:.45px}.portfolio-live-link:focus-visible{outline-offset:.08em;outline:.09em solid #fff}@media (width>=768px){#work-scroller{grid-template-columns:repeat(2,minmax(0,1fr))}#work-scroller>article:first-child{--portfolio-copy-size:clamp(12px, calc(3.576vw - .87px), 88px)}#work-scroller>article:nth-child(2){--portfolio-copy-size:clamp(12px, calc(3.238vw - .77px), 88px)}#work-scroller>article:nth-child(3){--portfolio-copy-size:clamp(12px, calc(2.995vw - .7px), 88px)}#work-scroller>article:nth-child(4){--portfolio-copy-size:clamp(12px, calc(3.229vw - .8px), 88px)}#work-scroller>article:nth-child(5){--portfolio-copy-size:clamp(12px, calc(3.507vw - .73px), 88px)}#work-scroller>article:nth-child(6){--portfolio-copy-size:clamp(12px, calc(2.769vw - .57px), 88px)}#work-scroller>article:nth-child(7){--portfolio-copy-size:clamp(12px, calc(3.003vw - .76px), 88px)}#work-scroller>article:nth-child(8){--portfolio-copy-size:clamp(12px, calc(2.856vw - .63px), 88px)}}@media (width>=768px) and (hover:hover){#work-scroller>article:hover>.portfolio-details{opacity:1;pointer-events:auto;transform:none}#work-scroller>article:hover>.portfolio-media>img{transform:scale(1.025)}}@media (hover:none),(pointer:coarse){#work-scroller>article{cursor:pointer}#work-scroller>article>.portfolio-details{backdrop-filter:none}}@supports (animation-timeline:scroll()){.hero-letter,.nav-brand-letter{animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root);animation-range-start:var(--hero-range-start);animation-range-end:var(--hero-range-end)}.hero-letter{will-change:opacity,transform;animation-name:hero-letter-out}.nav-brand-letter{will-change:opacity,transform;animation-name:nav-letter-in}.hero-letter:first-child,.nav-brand-letter:first-child{--hero-range-start:4.5svh;--hero-range-end:31svh}.hero-letter:nth-child(2),.nav-brand-letter:nth-child(2){--hero-range-start:25svh;--hero-range-end:51.5svh}.hero-letter:nth-child(3),.nav-brand-letter:nth-child(3){--hero-range-start:45.5svh;--hero-range-end:72svh}.nav-brand{animation-name:nav-brand-enable;animation-duration:auto;animation-timing-function:step-end;animation-fill-mode:both;animation-timeline:scroll(root);animation-range:4.5svh calc(4.5svh + 1px)}.hero-scroll-hint{animation-name:scroll-hint-out;animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root);animation-range:45.5svh 72svh}.work-intro:not(.work-intro--closing){view-timeline-name:--work-intro;view-timeline-axis:block}.work-intro:not(.work-intro--closing) .work-heading-word{animation-name:heading-word-in;animation-duration:auto;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both;animation-timeline:--work-intro;animation-range-start:var(--word-range-start);animation-range-end:var(--word-range-end);transform-origin:0 100%}.work-intro:not(.work-intro--closing) .work-heading-word:first-child{--word-range-start:cover 38%;--word-range-end:cover 44%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(2){--word-range-start:cover 39.2%;--word-range-end:cover 45.2%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(3){--word-range-start:cover 40.4%;--word-range-end:cover 46.4%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(4){--word-range-start:cover 41.6%;--word-range-end:cover 47.6%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(5){--word-range-start:cover 42.8%;--word-range-end:cover 48.8%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(6){--word-range-start:cover 44%;--word-range-end:cover 50%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(7){--word-range-start:cover 45.2%;--word-range-end:cover 51.2%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(8){--word-range-start:cover 46.4%;--word-range-end:cover 52.4%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(9){--word-range-start:cover 47.6%;--word-range-end:cover 53.6%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(10){--word-range-start:cover 48.8%;--word-range-end:cover 54.8%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(11){--word-range-start:cover 50%;--word-range-end:cover 56%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(12){--word-range-start:cover 51.2%;--word-range-end:cover 57.2%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(13){--word-range-start:cover 52.4%;--word-range-end:cover 58.4%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(14){--word-range-start:cover 53.6%;--word-range-end:cover 59.6%}#work-scroller>article{--card-start-blur:7px;--card-mid-blur:3.5px;--card-end-blur:1.25px;animation-name:portfolio-card-in-left;animation-duration:auto;transform-origin:bottom;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:cover 4% cover 45%}#work-scroller>article:nth-child(2n){animation-name:portfolio-card-in-right}.work-intro--closing{view-timeline-name:--closing-intro;view-timeline-axis:block}.work-intro--closing .work-heading-email,.work-intro--closing .work-heading-email>.work-heading-word{animation-name:heading-word-in;animation-duration:auto;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both;animation-timeline:--closing-intro;animation-range-start:var(--closing-range-start);animation-range-end:var(--closing-range-end);transform-origin:0 100%}.work-intro--closing .work-heading-email{--closing-range-start:entry 4%;--closing-range-end:entry 20%}.work-intro--closing .work-heading-email>.work-heading-word:first-child{--closing-range-start:entry 18%;--closing-range-end:entry 34%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(2){--closing-range-start:entry 32%;--closing-range-end:entry 48%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(3){--closing-range-start:entry 46%;--closing-range-end:entry 62%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(4){--closing-range-start:entry 60%;--closing-range-end:entry 76%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(5){--closing-range-start:entry 74%;--closing-range-end:entry 90%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(6){--closing-range-start:entry 84%;--closing-range-end:entry 100%}@media (orientation:portrait){#work-scroller>article:last-child{animation-range-end:cover 30%}}@media (width>=768px) and (orientation:portrait){#work-scroller>article:nth-last-child(2){animation-range-end:cover 30%}}}@keyframes hero-letter-out{0%{opacity:1;transform:scale(1)}35%{opacity:.72;transform:scale(.984)}65%{opacity:.28;transform:scale(.961)}to{opacity:0;transform:scale(.945)}}@keyframes nav-letter-in{0%{opacity:0;transform:translate(-1.35rem)rotate(-12deg)skew(-18deg)scale(.38,1.28)}35%{opacity:.28;transform:translate(-.82rem,.08rem)rotate(-6deg)skew(-10deg)scale(.61,1.15)}65%{opacity:.72;transform:translate(-.18rem,-.04rem)rotate(1.5deg)skew(2deg)scale(.9,1.04)}82%{opacity:.92;transform:translate(.05rem,.02rem)rotate(-.8deg)skew(-1deg)scale(1.02,.99)}to{opacity:1;transform:none}}@keyframes nav-brand-enable{0%{opacity:0}to{opacity:1}}@keyframes scroll-hint-out{0%{opacity:1}to{opacity:0}}@keyframes heading-word-in{0%{opacity:0;transform:translateY(.42em)rotate(1.5deg)}to{opacity:1;transform:none}}@keyframes portfolio-card-in-left{0%{opacity:0;transform:translate(-6vw,96px)rotate(-5deg)skewY(0)scale(.93,1.065)}50%{opacity:.82;transform:translate(-2vw,42px)rotate(-1.5deg)skewY(-.8deg)scale(.975,1.025)}72%{opacity:1;transform:translate(.35vw,8px)rotate(.7deg)skewY(.25deg)scale(1.006,.996)}to{opacity:1;transform:none}}@keyframes portfolio-card-in-right{0%{opacity:0;transform:translate(6vw,96px)rotate(5deg)skewY(0)scale(.93,1.065)}50%{opacity:.82;transform:translate(2vw,42px)rotate(1.5deg)skewY(.8deg)scale(.975,1.025)}72%{opacity:1;transform:translate(-.35vw,8px)rotate(-.7deg)skewY(-.25deg)scale(1.006,.996)}to{opacity:1;transform:none}}@media (hover:none),(pointer:coarse){#work-scroller>article{--card-start-blur:0px;--card-mid-blur:0px;--card-end-blur:0px}}@supports not (animation-timeline:scroll()){#work-scroller>article>.portfolio-details>p,.work-intro--closing .work-heading{ text-wrap:wrap;}#hero{display:none}.work-intro:not(.work-intro--closing){padding-top:calc(var(--site-nav-height) + 1.5rem)}}@media (prefers-reduced-motion:reduce){#hero{display:none}.work-intro:not(.work-intro--closing){padding-top:calc(var(--site-nav-height) + 1.5rem)}.nav-brand,.nav-brand-letter,.hero-letter,.hero-scroll-hint,.work-heading-word,#work-scroller>article{opacity:1;filter:none;visibility:visible;transform:none;animation:none!important}.nav-brand,.hero-scroll-hint{pointer-events:auto}.hero-scroll-hint:after{animation:none}.work-intro{height:auto}.work-intro-stage{height:auto;position:relative;top:auto}#work-scroller>article>.portfolio-media>img,#work-scroller>article>.portfolio-details{transition:none}}@media (width>=768px){#work-scroller>article:focus-within:not(:hover)>.portfolio-details{opacity:0;pointer-events:none;transform:translateY(7%)skewY(1.2deg)}#work-scroller>article:focus-visible>.portfolio-details{opacity:1;pointer-events:auto;transform:none}#work-scroller>article:focus-visible>.portfolio-media>img{transform:scale(1.025)}}@media (width<768px){#work-scroller>article:focus-within>.portfolio-details{opacity:0;pointer-events:none;transform:translateY(7%)skewY(1.2deg)}#work-scroller>article.is-active>.portfolio-details{opacity:1;pointer-events:auto;transform:none}#work-scroller>article.is-active>.portfolio-media>img{transform:scale(1.025)}}.footer{text-align:right;font-size:clamp(.65rem,1.5vw,.85rem);padding-right:clamp(1rem,2vw,2rem);padding-bottom:10px}.footer a:hover,.footer a:focus-visible{text-shadow:.018em 0,-.018em 0}
- </style>
- <script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@graph": [
- {
- "@type": ["Organization", "LocalBusiness", "ProfessionalService"],
- "@id": "https://afterdarklabs.io/#organization",
- "name": "After Dark Labs",
- "url": "https://afterdarklabs.io/",
- "logo": "https://afterdarklabs.io/logo_assets/icon-512.png",
- "telephone": "+1-954-621-8027",
- "email": "[email protected]",
- "address": {
- "@type": "PostalAddress",
- "streetAddress": "2755 NE 30th Ave",
- "addressLocality": "Lighthouse Point",
- "addressRegion": "FL",
- "postalCode": "33064",
- "addressCountry": "US"
- },
- "geo": {
- "@type": "GeoCoordinates",
- "latitude": 26.264305,
- "longitude": -80.083566
- },
- "founder": {
- "@type": "Person",
- "name": "Harrison Erd",
- "url": "https://harrisonerd.com/"
- },
- "areaServed": [
- { "@type": "AdministrativeArea", "name": "Broward County" },
- { "@type": "AdministrativeArea", "name": "Miami-Dade County" },
- { "@type": "AdministrativeArea", "name": "Palm Beach County" },
- { "@type": "City", "name": "Lighthouse Point" },
- { "@type": "City", "name": "Pompano Beach" },
- { "@type": "City", "name": "Fort Lauderdale" },
- { "@type": "City", "name": "Miami" },
- { "@type": "City", "name": "Miami Beach" },
- { "@type": "City", "name": "West Palm Beach" },
- { "@type": "City", "name": "Boca Raton" },
- { "@type": "Country", "name": "United States" }
- ],
- "description": "After Dark Labs provides South Florida website design and development for custom websites, Shopify stores, mobile apps, SaaS platforms, APIs, AI integrations, branding, hosting, and business tools."
- },
- {
- "@type": "WebSite",
- "@id": "https://afterdarklabs.io/#website",
- "url": "https://afterdarklabs.io/",
- "name": "After Dark Labs",
- "alternateName": "After Dark Labs Florida",
- "publisher": {
- "@id": "https://afterdarklabs.io/#organization"
- },
- "description": "After Dark Labs provides website design and development for custom websites, Shopify stores, mobile apps, and business tools."
- },
- {
- "@type": "Service",
- "@id": "https://afterdarklabs.io/#digital-services",
- "name": "Website, ecommerce, app, and business software development",
- "description": "Custom websites, ecommerce stores, mobile apps, SaaS platforms, branding, hosting, APIs, AI chatbots, and intelligent automation.",
- "provider": {
- "@id": "https://afterdarklabs.io/#organization"
- },
- "areaServed": [
- { "@type": "AdministrativeArea", "name": "Broward County" },
- { "@type": "AdministrativeArea", "name": "Miami-Dade County" },
- { "@type": "AdministrativeArea", "name": "Palm Beach County" },
- { "@type": "City", "name": "Lighthouse Point" },
- { "@type": "City", "name": "Pompano Beach" },
- { "@type": "City", "name": "Fort Lauderdale" },
- { "@type": "City", "name": "Miami" },
- { "@type": "City", "name": "Miami Beach" },
- { "@type": "City", "name": "West Palm Beach" },
- { "@type": "City", "name": "Boca Raton" },
- { "@type": "Country", "name": "United States" }
- ],
- "serviceType": [
- "Custom website design and development",
- "Shopify and ecommerce development",
- "Mobile app development",
- "Custom platforms, dashboards, and API integrations",
- "Brand identity and digital marketing",
- "Hosting and business technology",
- "AI integrations, chatbots, and intelligent automation"
- ],
- "url": "https://afterdarklabs.io/"
- }
- ]
- }
- </script>
+ <style>@font-face{font-family:Ubuntu;font-style:normal;font-weight:700;font-display:swap;src:url(https://afterdarklabs.io/fonts/ubuntu-700-latin.woff2) format("woff2")}:root{--page-bg:#000;--site-nav-height:5.75rem}*,:after,:before{box-sizing:border-box}html{overscroll-behavior-x:none;scroll-behavior:smooth;-webkit-text-size-adjust:100%;max-width:100%;line-height:1.5;overflow-x:clip}@media (width>=1024px){:root{--site-nav-height:5.5rem}html{font-size:125%}}body{overscroll-behavior-x:none;background:var(--page-bg);color:#fff;max-width:100%;font-family:Ubuntu,system-ui,sans-serif;font-weight:700;line-height:inherit;margin:0;overflow-x:clip}h1,h2,p{margin:0}h1,h2{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:none}img,svg{vertical-align:middle;display:block}img{max-width:100%;height:auto}nav{z-index:50;background:#000;width:100%;position:fixed;top:0;backdrop-filter:none!important}.nav-shell{width:100%;max-width:80rem;margin-inline:auto;padding:1rem}.desktop-nav,.mobile-nav{justify-content:space-between;align-items:center}.mobile-nav{gap:.75rem;display:flex}.desktop-nav{display:none}.nav-brand{color:#fff;align-items:center;display:flex}.mobile-nav .nav-brand{text-align:left;border-radius:1rem;min-width:0;padding:.375rem .75rem .375rem .375rem;transition:background-color .15s cubic-bezier(.4,0,.2,1)}.mobile-nav .nav-brand:hover{background:#ffffff1a}.mobile-nav .nav-brand:focus{outline:0}.mobile-nav .nav-brand:focus-visible{outline-offset:2px;outline:2px solid #fff}.desktop-nav .nav-brand{gap:.75rem}@media (width>=640px){.nav-shell{padding-inline:1.5rem}}@media (width>=1024px){.nav-shell{padding-block:1.25rem}.mobile-nav{display:none}.desktop-nav{display:flex}}.hero-content{z-index:2;text-align:center;justify-items:center;gap:2.5rem;width:100%;max-width:none;margin-inline:auto;padding-block:0;padding-inline:0;display:grid;position:relative}#hero{box-sizing:border-box;background:var(--page-bg);height:100svh;min-height:100svh;padding-top:var(--site-nav-height);align-items:center;padding-bottom:0;display:flex;position:relative;overflow:hidden}.nav-brand{transform-origin:0}.nav-cta{letter-spacing:-.035em;border-radius:1rem;flex-shrink:0;justify-content:center;align-items:center;min-height:3.25rem;padding:.75rem 1.15rem;font-size:clamp(1.05rem,5vw,1.3rem);font-weight:700;line-height:1;transition:color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1);display:inline-flex;color:#000!important;background-color:#fff!important}.nav-cta:focus-visible,.nav-cta:hover{color:#fff!important;background-color:#000!important}.nav-brand-word{letter-spacing:-.055em;white-space:nowrap;gap:.22em;padding-right:.08em;font-size:clamp(1.25rem,5.8vw,1.7rem);font-weight:700;line-height:.9;display:flex}.nav-brand-letter{transform-origin:50%;display:inline-block}@media (width>=1024px){.nav-brand-word{font-size:clamp(1.5rem,2.2vw,2rem)}.nav-cta{min-height:2.75rem;padding:.72rem 1.35rem;font-size:clamp(1.2rem,2vw,1.6rem)}}.hero-vignette{pointer-events:none;z-index:1;background:#000;position:absolute;inset:0}@media (width<=767px){#hero{--mobile-nav-height:5.75rem;box-sizing:border-box;height:var(--mobile-hero-height,100svh);min-height:var(--mobile-hero-height,100svh);padding-top:var(--mobile-nav-height);align-items:stretch;padding-bottom:0}.hero-content{align-content:center;gap:0;padding-block:clamp(1.25rem,4svh,2rem)}.hero-content h1{font-size:clamp(2.75rem,min(17vw,9.5svh),4.5rem)}}.hero-content h1{width:max-content;font-size:31vw;font-size:min(31vw, calc((100svh - var(--site-nav-height)) * .4));letter-spacing:-.075em;flex-direction:column;align-items:center;padding-right:.1em;font-weight:700;line-height:.8;display:flex}.hero-letter{transform-origin:50%;display:inline-block}.hero-word{display:block}.hero-scroll-hint{bottom:max(1rem,env(safe-area-inset-bottom));z-index:3;color:#fff;letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:.55rem;font-size:clamp(.7rem,1.1vw,.85rem);font-weight:700;line-height:1;text-decoration:none;transition:opacity .16s;display:inline-flex;position:absolute;left:50%;transform:translate(-50%)}.hero-scroll-hint:after{content:"";border-bottom:.12em solid;border-right:.12em solid;width:.58em;height:.58em;animation:1.65s cubic-bezier(.45,0,.2,1) infinite hero-scroll-nudge}.hero-scroll-hint:hover{opacity:.68}.hero-scroll-hint:focus-visible{outline-offset:.4rem;outline:2px solid #fff}@keyframes hero-scroll-nudge{0%,to{transform:translateY(-.12rem) rotate(45deg)}50%{transform:translateY(.2rem) rotate(45deg)}}.work-intro{background:var(--page-bg);height:100svh;position:relative}.work-intro:not(.work-intro--closing){height:auto}.work-intro-stage{top:var(--site-nav-height);z-index:3;box-sizing:border-box;height:calc(100svh - var(--site-nav-height));align-items:center;padding:clamp(.75rem,1.5vw,1.25rem) clamp(1.5rem,5vw,4rem);display:flex;position:sticky;overflow:hidden}.work-intro:not(.work-intro--closing) .work-intro-stage{align-items:flex-start;height:auto;padding-top:0;padding-bottom:25px;position:relative;top:auto}.work-heading{color:#fff;letter-spacing:-.065em;text-wrap:balance;flex-wrap:wrap;gap:0 .2em;width:100%;max-width:78rem;margin:0 auto;font-size:clamp(2.85rem,8vw,7rem);font-weight:700;line-height:.94;display:flex}#work-heading{scroll-margin-top:calc(var(--site-nav-height) + 1rem)}.work-heading-words{display:contents}.work-heading-word{display:inline-block}.work-heading-email{color:inherit;width:100%;font-weight:700;text-shadow:.018em 0 transparent,-.018em 0 transparent;text-decoration:none;transition:text-shadow .16s}.work-heading-email .bi-send{vertical-align:-.06em;width:.9em;height:.9em;display:inline-block}.work-heading-email:focus-visible,.work-heading-email:hover{text-shadow:.018em 0,-.018em 0}.work-heading-email:focus-visible{outline-offset:.075em;outline:.055em solid #fff}.work-intro--closing{height:auto;min-height:0}.work-intro--closing .work-intro-stage{align-items:flex-start;height:auto;padding-top:48px;padding-bottom:56px;position:relative;top:auto}.work-stage{box-sizing:border-box;padding:clamp(0rem,.5vw,.5rem) clamp(1rem,2vw,2rem)}#work{background:var(--page-bg);scroll-margin-top:6rem}.work-stage-content{width:100%;min-width:0;max-width:none;margin-inline:auto}#work-scroller{touch-action:pan-y pinch-zoom;grid-template-columns:minmax(0,1fr);gap:clamp(.3rem,.6vw,.65rem);padding:0;display:grid;overflow:visible}#work-scroller>article{isolation:isolate;aspect-ratio:16/9;background:var(--page-bg);border-radius:0;width:100%;min-width:0;position:relative;overflow:hidden}#work-scroller>article>.portfolio-media{border-radius:0;width:100%;height:100%;display:block}#work-scroller>article>.portfolio-media>img{aspect-ratio:auto;object-fit:cover;width:100%;height:100%;transition:transform .6s cubic-bezier(.16,1,.3,1)}#work-scroller>article>.portfolio-details{z-index:2;box-sizing:border-box;opacity:0;pointer-events:none;transform-origin:bottom;backdrop-filter:blur(.35rem);background:#000000f0;align-items:center;padding:clamp(1rem,2.5vw,2.75rem);transition:opacity .18s,transform .52s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;inset:0;overflow:hidden;transform:translateY(7%) skewY(1.2deg)}#work-scroller>article:focus-within>.portfolio-details{opacity:1;pointer-events:auto;transform:none}#work-scroller>article:focus-within>.portfolio-media>img{transform:scale(1.025)}#work-scroller>article:focus-visible{outline-offset:-2px;outline:2px solid #fff}#work-scroller>article>.portfolio-details>p{color:#fff;width:100%;font-size:var(--portfolio-copy-size,clamp(1.2rem, 3vw, 3.5rem));letter-spacing:-.04em;text-wrap:balance;margin:0;font-weight:700;line-height:.98}#work-scroller>article:first-child{--portfolio-copy-size:clamp(12px, calc(8.165vw - 5.73px), 88px)}#work-scroller>article:nth-child(2){--portfolio-copy-size:clamp(12px, calc(7.715vw - 6.08px), 88px)}#work-scroller>article:nth-child(3){--portfolio-copy-size:clamp(12px, calc(6.816vw - 4.68px), 88px)}#work-scroller>article:nth-child(4){--portfolio-copy-size:clamp(12px, calc(7.715vw - 6.08px), 88px)}#work-scroller>article:nth-child(5){--portfolio-copy-size:clamp(12px, calc(8.015vw - 5.58px), 88px)}#work-scroller>article:nth-child(6){--portfolio-copy-size:clamp(12px, calc(6.779vw - 5.5px), 88px)}#work-scroller>article:nth-child(7){--portfolio-copy-size:clamp(12px, calc(6.816vw - 4.68px), 88px)}#work-scroller>article:nth-child(8){--portfolio-copy-size:clamp(12px, calc(6.779vw - 5.5px), 88px)}.portfolio-description{color:#fff;display:block}.portfolio-name{font-weight:700;text-shadow:.018em 0,-.018em 0}.portfolio-live-link{color:#fff;text-shadow:.018em 0 transparent,-.018em 0 transparent;white-space:nowrap;align-items:baseline;gap:.18em;font-weight:700;text-decoration:none;transition:text-shadow .16s;display:inline-flex}.portfolio-live-link svg{flex:none;width:.72em;height:.72em}.portfolio-live-link svg path{stroke:currentColor;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill;transition:stroke-width .16s}.portfolio-live-link:focus-visible,.portfolio-live-link:hover{text-shadow:.018em 0,-.018em 0;font-weight:700}.portfolio-live-link:focus-visible svg path,.portfolio-live-link:hover svg path{stroke-width:.45px}.portfolio-live-link:focus-visible{outline-offset:.08em;outline:.09em solid #fff}@media (width>=768px){#work-scroller{grid-template-columns:repeat(2,minmax(0,1fr))}#work-scroller>article:first-child{--portfolio-copy-size:clamp(12px, calc(3.576vw - .87px), 88px)}#work-scroller>article:nth-child(2){--portfolio-copy-size:clamp(12px, calc(3.238vw - .77px), 88px)}#work-scroller>article:nth-child(3){--portfolio-copy-size:clamp(12px, calc(2.995vw - .7px), 88px)}#work-scroller>article:nth-child(4){--portfolio-copy-size:clamp(12px, calc(3.229vw - .8px), 88px)}#work-scroller>article:nth-child(5){--portfolio-copy-size:clamp(12px, calc(3.507vw - .73px), 88px)}#work-scroller>article:nth-child(6){--portfolio-copy-size:clamp(12px, calc(2.769vw - .57px), 88px)}#work-scroller>article:nth-child(7){--portfolio-copy-size:clamp(12px, calc(3.003vw - .76px), 88px)}#work-scroller>article:nth-child(8){--portfolio-copy-size:clamp(12px, calc(2.856vw - .63px), 88px)}}@media (width>=768px) and (hover:hover){#work-scroller>article:hover>.portfolio-details{opacity:1;pointer-events:auto;transform:none}#work-scroller>article:hover>.portfolio-media>img{transform:scale(1.025)}}@media (hover:none),(pointer:coarse){#work-scroller>article{cursor:pointer}#work-scroller>article>.portfolio-details{backdrop-filter:none}}@supports (animation-timeline:scroll()){.hero-letter,.nav-brand-letter{animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root);animation-range-start:var(--hero-range-start);animation-range-end:var(--hero-range-end)}.hero-letter{will-change:opacity,transform;animation-name:hero-letter-out}.nav-brand-letter{will-change:opacity,transform;animation-name:nav-letter-in}.hero-letter:first-child,.nav-brand-letter:first-child{--hero-range-start:4.5svh;--hero-range-end:31svh}.hero-letter:nth-child(2),.nav-brand-letter:nth-child(2){--hero-range-start:25svh;--hero-range-end:51.5svh}.hero-letter:nth-child(3),.nav-brand-letter:nth-child(3){--hero-range-start:45.5svh;--hero-range-end:72svh}.nav-brand{animation-name:nav-brand-enable;animation-duration:auto;animation-timing-function:step-end;animation-fill-mode:both;animation-timeline:scroll(root);animation-range:4.5svh calc(4.5svh + 1px)}.hero-scroll-hint{animation-name:scroll-hint-out;animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root);animation-range:45.5svh 72svh}.work-intro:not(.work-intro--closing){view-timeline-name:--work-intro;view-timeline-axis:block}.work-intro:not(.work-intro--closing) .work-heading-word{animation-name:heading-word-in;animation-duration:auto;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both;animation-timeline:--work-intro;animation-range-start:var(--word-range-start);animation-range-end:var(--word-range-end);transform-origin:0 100%}.work-intro:not(.work-intro--closing) .work-heading-word:first-child{--word-range-start:cover 38%;--word-range-end:cover 44%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(2){--word-range-start:cover 39.2%;--word-range-end:cover 45.2%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(3){--word-range-start:cover 40.4%;--word-range-end:cover 46.4%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(4){--word-range-start:cover 41.6%;--word-range-end:cover 47.6%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(5){--word-range-start:cover 42.8%;--word-range-end:cover 48.8%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(6){--word-range-start:cover 44%;--word-range-end:cover 50%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(7){--word-range-start:cover 45.2%;--word-range-end:cover 51.2%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(8){--word-range-start:cover 46.4%;--word-range-end:cover 52.4%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(9){--word-range-start:cover 47.6%;--word-range-end:cover 53.6%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(10){--word-range-start:cover 48.8%;--word-range-end:cover 54.8%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(11){--word-range-start:cover 50%;--word-range-end:cover 56%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(12){--word-range-start:cover 51.2%;--word-range-end:cover 57.2%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(13){--word-range-start:cover 52.4%;--word-range-end:cover 58.4%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(14){--word-range-start:cover 53.6%;--word-range-end:cover 59.6%}#work-scroller>article{--card-start-blur:7px;--card-mid-blur:3.5px;--card-end-blur:1.25px;animation-name:portfolio-card-in-left;animation-duration:auto;transform-origin:bottom;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:cover 4% cover 45%}#work-scroller>article:nth-child(2n){animation-name:portfolio-card-in-right}.work-intro--closing{view-timeline-name:--closing-intro;view-timeline-axis:block}.work-intro--closing .work-heading-email,.work-intro--closing .work-heading-email>.work-heading-word{animation-name:heading-word-in;animation-duration:auto;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both;animation-timeline:--closing-intro;animation-range-start:var(--closing-range-start);animation-range-end:var(--closing-range-end);transform-origin:0 100%}.work-intro--closing .work-heading-email{--closing-range-start:entry 4%;--closing-range-end:entry 20%}.work-intro--closing .work-heading-email>.work-heading-word:first-child{--closing-range-start:entry 18%;--closing-range-end:entry 34%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(2){--closing-range-start:entry 32%;--closing-range-end:entry 48%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(3){--closing-range-start:entry 46%;--closing-range-end:entry 62%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(4){--closing-range-start:entry 60%;--closing-range-end:entry 76%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(5){--closing-range-start:entry 74%;--closing-range-end:entry 90%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(6){--closing-range-start:entry 84%;--closing-range-end:entry 100%}@media (orientation:portrait){#work-scroller>article:last-child{animation-range-end:cover 30%}}@media (width>=768px) and (orientation:portrait){#work-scroller>article:nth-last-child(2){animation-range-end:cover 30%}}}@keyframes hero-letter-out{0%{opacity:1;transform:scale(1)}35%{opacity:.72;transform:scale(.984)}65%{opacity:.28;transform:scale(.961)}to{opacity:0;transform:scale(.945)}}@keyframes nav-letter-in{0%{opacity:0;transform:translate(-1.35rem) rotate(-12deg) skew(-18deg) scale(.38,1.28)}35%{opacity:.28;transform:translate(-.82rem,.08rem) rotate(-6deg) skew(-10deg) scale(.61,1.15)}65%{opacity:.72;transform:translate(-.18rem,-.04rem) rotate(1.5deg) skew(2deg) scale(.9,1.04)}82%{opacity:.92;transform:translate(.05rem,.02rem) rotate(-.8deg) skew(-1deg) scale(1.02,.99)}to{opacity:1;transform:none}}@keyframes nav-brand-enable{0%{opacity:0}to{opacity:1}}@keyframes scroll-hint-out{0%{opacity:1}to{opacity:0}}@keyframes heading-word-in{0%{opacity:0;transform:translateY(.42em) rotate(1.5deg)}to{opacity:1;transform:none}}@keyframes portfolio-card-in-left{0%{opacity:0;transform:translate(-6vw,96px) rotate(-5deg) skewY(0) scale(.93,1.065)}50%{opacity:.82;transform:translate(-2vw,42px) rotate(-1.5deg) skewY(-.8deg) scale(.975,1.025)}72%{opacity:1;transform:translate(.35vw,8px) rotate(.7deg) skewY(.25deg) scale(1.006,.996)}to{opacity:1;transform:none}}@keyframes portfolio-card-in-right{0%{opacity:0;transform:translate(6vw,96px) rotate(5deg) skewY(0) scale(.93,1.065)}50%{opacity:.82;transform:translate(2vw,42px) rotate(1.5deg) skewY(.8deg) scale(.975,1.025)}72%{opacity:1;transform:translate(-.35vw,8px) rotate(-.7deg) skewY(-.25deg) scale(1.006,.996)}to{opacity:1;transform:none}}@media (hover:none),(pointer:coarse){#work-scroller>article{--card-start-blur:0px;--card-mid-blur:0px;--card-end-blur:0px}}@supports not (animation-timeline:scroll()){#work-scroller>article>.portfolio-details>p,.work-intro--closing .work-heading{text-wrap:wrap}#hero{display:none}.work-intro:not(.work-intro--closing){padding-top:calc(var(--site-nav-height) + 1.5rem)}}@media (prefers-reduced-motion:reduce){#hero{display:none}.work-intro:not(.work-intro--closing){padding-top:calc(var(--site-nav-height) + 1.5rem)}#work-scroller>article,.hero-letter,.hero-scroll-hint,.nav-brand,.nav-brand-letter,.work-heading-word{opacity:1;filter:none;visibility:visible;transform:none;animation:none!important}.hero-scroll-hint,.nav-brand{pointer-events:auto}.hero-scroll-hint:after{animation:none}.work-intro{height:auto}.work-intro-stage{height:auto;position:relative;top:auto}#work-scroller>article>.portfolio-details,#work-scroller>article>.portfolio-media>img{transition:none}}@media (width>=768px){#work-scroller>article:focus-within:not(:hover)>.portfolio-details{opacity:0;pointer-events:none;transform:translateY(7%) skewY(1.2deg)}#work-scroller>article:focus-visible>.portfolio-details{opacity:1;pointer-events:auto;transform:none}#work-scroller>article:focus-visible>.portfolio-media>img{transform:scale(1.025)}}@media (width<768px){#work-scroller>article:focus-within>.portfolio-details{opacity:0;pointer-events:none;transform:translateY(7%) skewY(1.2deg)}#work-scroller>article.is-active>.portfolio-details{opacity:1;pointer-events:auto;transform:none}#work-scroller>article.is-active>.portfolio-media>img{transform:scale(1.025)}}.footer{text-align:right;font-size:clamp(1rem,2vw,1.25rem);padding-right:clamp(1rem,2vw,2rem);padding-bottom:10px}.footer a:focus-visible,.footer a:hover{text-shadow:.018em 0,-.018em 0}[data-contact-open]{border:0;cursor:pointer;font-family:inherit}button.work-heading-email{background:0 0;padding:0;text-align:left;font:inherit;letter-spacing:inherit;line-height:inherit}.nav-cta:focus-visible{outline:2px solid #fff;outline-offset:4px}.contact-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;padding:0;background:#000;color:#fff;overflow-y:auto;overscroll-behavior:contain}.contact-dialog::backdrop{background:#000}.contact-close{position:sticky;top:0;z-index:1;display:block;margin-left:auto;padding:1rem 1.5rem;border:0;background:#000;color:#fff;font:inherit;font-size:1rem;cursor:pointer}.contact-content{width:100%;max-width:calc(800px + 3rem);margin:0 auto;padding:clamp(1rem,4vh,3rem) 1.5rem max(2rem,env(safe-area-inset-bottom))}.contact-title{font-size:clamp(3rem,9vw,6rem);letter-spacing:-.065em;line-height:.95;margin-bottom:clamp(2rem,5vh,3rem)}.contact-success:focus,.contact-title:focus{outline:0}.contact-form{display:grid;gap:1.5rem}.contact-field{display:grid;gap:.35rem;font-size:clamp(1.1rem,2vw,1.4rem);letter-spacing:-.035em}.contact-field input,.contact-field textarea{width:100%;min-width:0;border:0;border-bottom:1px solid #777;border-radius:0;padding:.5rem 0;background:#000;color:#fff;font:inherit;font-size:clamp(1.3rem,3vw,2rem);line-height:1.25}.contact-field textarea{min-height:7rem;resize:vertical}.contact-field input:focus,.contact-field textarea:focus{outline:0;border-bottom-color:#fff;box-shadow:0 1px 0 #fff}.contact-submit{justify-self:start;border:1px solid #fff;border-radius:1rem;padding:.8rem 1.5rem;background:#fff;color:#000;font:inherit;font-size:clamp(1.3rem,3vw,2rem);letter-spacing:-.035em;cursor:pointer;transition:background-color .15s,color .15s}.contact-submit:focus-visible,.contact-submit:hover{background:#000;color:#fff}.contact-submit:disabled{opacity:.6;cursor:wait}.contact-dialog button:focus-visible,.contact-success a:focus-visible{outline:2px solid #fff;outline-offset:5px}.contact-error{font-size:1rem;line-height:1.4}.contact-success{font-size:clamp(1.5rem,4vw,2.75rem);line-height:1.15;letter-spacing:-.04em;overflow-wrap:anywhere}.contact-success p+p{margin-top:1.5rem}.contact-success a{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}.contact-dialog [hidden]{display:none}@media(prefers-reduced-motion:reduce){.contact-submit{transition:none}}</style>
+ <script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":["Organization","LocalBusiness","ProfessionalService"],"@id":"https://afterdarklabs.io/#organization","name":"After Dark Labs","url":"https://afterdarklabs.io/","logo":"https://afterdarklabs.io/logo_assets/icon-512.png","telephone":"+1-954-621-8027","email":"[email protected]","address":{"@type":"PostalAddress","streetAddress":"2755 NE 30th Ave","addressLocality":"Lighthouse Point","addressRegion":"FL","postalCode":"33064","addressCountry":"US"},"geo":{"@type":"GeoCoordinates","latitude":26.264305,"longitude":-80.083566},"founder":{"@type":"Person","name":"Harrison Erd","url":"https://harrisonerd.com/"},"areaServed":[{"@type":"AdministrativeArea","name":"Broward County"},{"@type":"AdministrativeArea","name":"Miami-Dade County"},{"@type":"AdministrativeArea","name":"Palm Beach County"},{"@type":"City","name":"Lighthouse Point"},{"@type":"City","name":"Pompano Beach"},{"@type":"City","name":"Fort Lauderdale"},{"@type":"City","name":"Miami"},{"@type":"City","name":"Miami Beach"},{"@type":"City","name":"West Palm Beach"},{"@type":"City","name":"Boca Raton"},{"@type":"Country","name":"United States"}],"description":"After Dark Labs provides South Florida website design and development for custom websites, Shopify stores, mobile apps, SaaS platforms, APIs, AI integrations, branding, hosting, and business tools."},{"@type":"WebSite","@id":"https://afterdarklabs.io/#website","url":"https://afterdarklabs.io/","name":"After Dark Labs","alternateName":"After Dark Labs Florida","publisher":{"@id":"https://afterdarklabs.io/#organization"},"description":"After Dark Labs provides website design and development for custom websites, Shopify stores, mobile apps, and business tools."},{"@type":"Service","@id":"https://afterdarklabs.io/#digital-services","name":"Website, ecommerce, app, and business software development","description":"Custom websites, ecommerce stores, mobile apps, SaaS platforms, branding, hosting, APIs, AI chatbots, and intelligent automation.","provider":{"@id":"https://afterdarklabs.io/#organization"},"areaServed":[{"@type":"AdministrativeArea","name":"Broward County"},{"@type":"AdministrativeArea","name":"Miami-Dade County"},{"@type":"AdministrativeArea","name":"Palm Beach County"},{"@type":"City","name":"Lighthouse Point"},{"@type":"City","name":"Pompano Beach"},{"@type":"City","name":"Fort Lauderdale"},{"@type":"City","name":"Miami"},{"@type":"City","name":"Miami Beach"},{"@type":"City","name":"West Palm Beach"},{"@type":"City","name":"Boca Raton"},{"@type":"Country","name":"United States"}],"serviceType":["Custom website design and development","Shopify and ecommerce development","Mobile app development","Custom platforms, dashboards, and API integrations","Brand identity and digital marketing","Hosting and business technology","AI integrations, chatbots, and intelligent automation"],"url":"https://afterdarklabs.io/"}]}</script>
</head>
<body>
<nav>
@@ -130,7 +38,7 @@
<a href="#hero" class="nav-brand" aria-label="After Dark Labs — go to top">
<span class="nav-brand-word" aria-hidden="true"><span class="nav-brand-letter">After</span><span class="nav-brand-letter">Dark</span><span class="nav-brand-letter">Labs</span></span>
</a>
- <a href="mailto:[email protected]?subject=Website%20or%20app%20project%20inquiry&body=Hi%20After%20Dark%20Labs%2C%0A%0AI%E2%80%99m%20interested%20in%20discussing%20a%20website%20or%20app%20project.%20Here%E2%80%99s%20a%20quick%20overview%3A%0A%0AProject%20type%3A%0AGoals%3A%0ATimeline%3A%0ABudget%3A%0A%0AThanks%21" class="nav-cta">Let's Talk</a>
+ <button type="button" data-contact-open aria-haspopup="dialog" aria-controls="contact-dialog" class="nav-cta">Let's Talk</button>
</div>
<div class="desktop-nav">
@@ -139,7 +47,7 @@
<span class="nav-brand-word" aria-hidden="true"><span class="nav-brand-letter">After</span><span class="nav-brand-letter">Dark</span><span class="nav-brand-letter">Labs</span></span>
</div>
</a>
- <a href="mailto:[email protected]?subject=Website%20or%20app%20project%20inquiry&body=Hi%20After%20Dark%20Labs%2C%0A%0AI%E2%80%99m%20interested%20in%20discussing%20a%20website%20or%20app%20project.%20Here%E2%80%99s%20a%20quick%20overview%3A%0A%0AProject%20type%3A%0AGoals%3A%0ATimeline%3A%0ABudget%3A%0A%0AThanks%21" class="nav-cta">Let's Talk</a>
+ <button type="button" data-contact-open aria-haspopup="dialog" aria-controls="contact-dialog" class="nav-cta">Let's Talk</button>
</div>
</div>
</nav>
@@ -273,7 +181,7 @@
<div class="work-intro-stage">
<h2 id="closing-heading" class="work-heading">
<span class="work-heading-words">
- <a class="work-heading-word work-heading-email" href="mailto:[email protected]?subject=Website%20or%20app%20project%20inquiry&body=Hi%20After%20Dark%20Labs%2C%0A%0AI%E2%80%99m%20interested%20in%20discussing%20a%20website%20or%20app%20project.%20Here%E2%80%99s%20a%20quick%20overview%3A%0A%0AProject%20type%3A%0AGoals%3A%0ATimeline%3A%0ABudget%3A%0A%0AThanks%21">
+ <button type="button" data-contact-open aria-haspopup="dialog" aria-controls="contact-dialog" class="work-heading-word work-heading-email" >
<span class="work-heading-word">Let’s</span>
<span class="work-heading-word">move</span>
<span class="work-heading-word">your</span>
@@ -284,7 +192,7 @@
<path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z"/>
</svg>
</span>
- </a>
+ </button>
</span>
</h2>
</div>
@@ -296,7 +204,25 @@
<footer>
<p class="footer"><a href="https://share.google/ZQj8plqi7MWZ8bfwU">★★★★★ on Google</a></p>
</footer>
- <script>(()=>{const e=document.querySelector("#work-scroller"),t=window.matchMedia("(max-width: 767px)");if(!e)return;const c=[...e.querySelectorAll(":scope > article")],s=()=>c.forEach(e=>e.classList.remove("is-active"));e.addEventListener("click",c=>{if(!t.matches||c.target.closest(".portfolio-live-link"))return;const o=c.target.closest("article");if(!o||o.parentElement!==e)return;const i=o.classList.contains("is-active");s(),i||o.classList.add("is-active")}),document.addEventListener("click",e=>{t.matches&&!e.target.closest("#work-scroller > article")&&s()}),t.addEventListener?.("change",s)})();</script>
+ <dialog id="contact-dialog" class="contact-dialog" aria-labelledby="contact-title">
+ <button type="button" class="contact-close" aria-label="Close contact form">Close ×</button>
+ <div class="contact-content">
+ <h2 id="contact-title" class="contact-title" tabindex="-1">Work with us</h2>
+ <form class="contact-form" action="https://formspree.io/f/xeedjery" method="POST">
+ <label class="contact-field" for="contact-name">Name<input id="contact-name" name="name" autocomplete="name" required></label>
+ <label class="contact-field" for="contact-email">Email<input id="contact-email" name="email" type="email" autocomplete="email" required></label>
+ <label class="contact-field" for="contact-message">Message<textarea id="contact-message" name="message" rows="3" required></textarea></label>
+ <p class="contact-error" role="alert" hidden></p>
+ <button class="contact-submit" type="submit">Submit</button>
+ </form>
+ <div class="contact-success" tabindex="-1" hidden>
+ <p>Thanks for reaching out, we will respond as soon as we can.</p>
+ <p>You can also <a href="https://cal.com/afterdarklabs/meet" target="_blank" rel="noopener noreferrer">book a phone call</a> or email us at <a href="mailto:[email protected]">[email protected]</a>.</p>
+ </div>
+ </div>
+ </dialog>
+ <script>(()=>{const e=document.querySelector("#contact-dialog"),t=e.querySelector("form"),o=e.querySelector(".contact-submit"),n=e.querySelector(".contact-error"),r=e.querySelector(".contact-success");let c,i,d=!1,l=!1,a=0;function s(){t.reset(),t.hidden=!1,r.hidden=!0,n.hidden=!0,l=!1}document.querySelectorAll("[data-contact-open]").forEach(t=>{t.addEventListener("click",()=>{e.open||(l&&s(),c=t,a=window.scrollY,i=document.body.getAttribute("style"),Object.assign(document.body.style,{position:"fixed",top:`-${a}px`,width:"100%"}),e.showModal(),e.scrollTop=0,e.querySelector(".contact-title").focus({preventScroll:!0}))})}),e.querySelector(".contact-close").addEventListener("click",()=>e.close()),e.addEventListener("close",()=>{null===i?document.body.removeAttribute("style"):document.body.setAttribute("style",i),window.scrollTo({top:a,behavior:"instant"}),c?.focus({preventScroll:!0}),l&&s()}),t.addEventListener("submit",async c=>{if(c.preventDefault(),!d&&t.reportValidity()){d=!0,o.disabled=!0,o.textContent="Sending…",t.setAttribute("aria-busy","true"),n.hidden=!0;try{if(!(await fetch(t.action,{method:"POST",body:new FormData(t),headers:{Accept:"application/json"}})).ok)throw new Error("Submission failed");l=!0,t.hidden=!0,r.hidden=!1,e.open&&r.focus()}catch{n.textContent="Your message could not be sent. Please try submitting again, or email [email protected].",n.hidden=!1}finally{d=!1,o.disabled=!1,o.textContent="Submit",t.removeAttribute("aria-busy")}}})})();</script>
+ <script>(()=>{const e=document.querySelector("#work-scroller"),t=window.matchMedia("(max-width: 767px)");if(!e)return;const c=[...e.querySelectorAll(":scope > article")],s=()=>c.forEach(e=>e.classList.remove("is-active"));e.addEventListener("click",c=>{if(!t.matches||c.target.closest(".portfolio-live-link"))return;const r=c.target.closest("article");if(!r||r.parentElement!==e)return;const i=r.classList.contains("is-active");s(),i||r.classList.add("is-active")}),document.addEventListener("click",e=>{t.matches&&!e.target.closest("#work-scroller > article")&&s()}),t.addEventListener?.("change",s)})();</script>
</body>
</html>