patx/afterdarklabs
Keep navigation in contact modal and add portfolio projects
Commit 9ed9a56 · patx · 2026-09-20T01:53:49-04:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index 269ee4c..4d51ee1 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -28,7 +28,7 @@
<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}*,: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>
+ <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)}#work-scroller>article:nth-child(9){--portfolio-copy-size:clamp(12px, calc(6.779vw - 5.5px), 88px)}#work-scroller>article:nth-child(10){--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)}#work-scroller>article:nth-child(9){--portfolio-copy-size:clamp(12px, calc(2.856vw - .63px), 88px)}#work-scroller>article:nth-child(10){--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{padding-top:var(--site-nav-height)}.contact-dialog .nav-brand,.contact-dialog .nav-brand-letter{animation:none!important;opacity:1;transform:none;pointer-events:auto}.contact-dialog::backdrop{background:#000}.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>
@@ -173,6 +173,26 @@
</p>
</div>
</article>
+ <article tabindex="0">
+ <div class="portfolio-media">
+ <img src="rcraft.webp" srcset="rcraft-600.webp 600w, rcraft-800.webp 800w, rcraft.webp 1200w" sizes="(min-width: 768px) 50vw, 100vw" width="1200" height="701" loading="lazy" decoding="async" alt="R Craft Construction project by After Dark Labs">
+ </div>
+ <div class="portfolio-details">
+ <p>
+ <span class="portfolio-description">We built <span class="portfolio-name">R Craft Construction</span>’s business website to showcase their building services and completed projects, with local SEO for customers across Watford and the surrounding areas. <a class="portfolio-live-link" aria-label="View project: R Craft Construction (opens in a new tab)" href="https://rcraftconstruction.co.uk/" target="_blank" rel="noopener noreferrer">View project <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/></svg></a></span>
+ </p>
+ </div>
+ </article>
+ <article tabindex="0">
+ <div class="portfolio-media">
+ <img src="makeitpdf.webp" srcset="makeitpdf-600.webp 600w, makeitpdf-800.webp 800w, makeitpdf.webp 1200w" sizes="(min-width: 768px) 50vw, 100vw" width="1200" height="701" loading="lazy" decoding="async" alt="MakeItPDF project by After Dark Labs">
+ </div>
+ <div class="portfolio-details">
+ <p>
+ <span class="portfolio-description">We built <span class="portfolio-name">MakeItPDF</span>, a browser-based tool that combines PDFs, images, Word documents, spreadsheets, Markdown, and CSV files into one PDF. Files are processed on the user’s device without being uploaded. <a class="portfolio-live-link" aria-label="View project: MakeItPDF (opens in a new tab)" href="https://makeitpdf.org/" target="_blank" rel="noopener noreferrer">View project <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/></svg></a></span>
+ </p>
+ </div>
+ </article>
</div>
</div>
</div>
@@ -205,7 +225,6 @@
<p class="footer"><a href="https://share.google/ZQj8plqi7MWZ8bfwU" target="_blank" rel="noopener noreferrer">★★★★★ on Google</a></p>
</footer>
<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">
@@ -216,12 +235,12 @@
<button class="contact-submit" type="submit">Submit</button>
</form>
<div class="contact-success" tabindex="-1" hidden>
- <p>Thanks for reaching out, we will be in touch!.</p>
+ <p>Thanks for reaching out, we will be in touch!</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("#contact-dialog"),t=e.querySelector("form"),o=e.querySelector(".contact-submit"),r=e.querySelector(".contact-error"),n=e.querySelector(".contact-success"),a=document.querySelector("body>nav"),c=document.createComment("nav position"),i=[...a.querySelectorAll(".nav-cta")];a.before(c);let l,d,s=!1,u=!1,b=!1,y=0;function m(){t.reset(),t.hidden=!1,n.hidden=!0,r.hidden=!0,b=!1}document.querySelectorAll("[data-contact-open]").forEach(t=>{t.addEventListener("click",()=>{e.open?e.close():(b&&m(),l=t,y=window.scrollY,d=document.body.getAttribute("style"),Object.assign(document.body.style,{position:"fixed",top:`-${y}px`,width:"100%"}),e.prepend(a),i.forEach(e=>{e.textContent="Close",e.setAttribute("aria-label","Close contact form"),e.setAttribute("aria-expanded","true")}),e.showModal(),e.scrollTop=0,e.querySelector(".contact-title").focus({preventScroll:!0}))})}),a.querySelectorAll(".nav-brand").forEach(t=>t.addEventListener("click",t=>{e.open&&(t.preventDefault(),s=!0,e.close())})),e.addEventListener("close",()=>{c.after(a),i.forEach(e=>{e.textContent="Let's Talk",e.removeAttribute("aria-label"),e.setAttribute("aria-expanded","false")}),null===d?document.body.removeAttribute("style"):document.body.setAttribute("style",d),window.scrollTo({top:s?0:y,behavior:"instant"}),(s?a.querySelector(".nav-brand"):l)?.focus({preventScroll:!0}),s=!1,b&&m()}),t.addEventListener("submit",async a=>{if(a.preventDefault(),!u&&t.reportValidity()){u=!0,o.disabled=!0,o.textContent="Sending…",t.setAttribute("aria-busy","true"),r.hidden=!0;try{if(!(await fetch(t.action,{method:"POST",body:new FormData(t),headers:{Accept:"application/json"}})).ok)throw new Error("Submission failed");b=!0,t.hidden=!0,n.hidden=!1,e.open&&n.focus()}catch{r.textContent="Your message could not be sent. Please try submitting again, or email [email protected].",r.hidden=!1}finally{u=!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>
diff --git a/docs/makeitpdf-600.webp b/docs/makeitpdf-600.webp
new file mode 100644
index 0000000..79d09fe
Binary files /dev/null and b/docs/makeitpdf-600.webp differ
diff --git a/docs/makeitpdf-800.webp b/docs/makeitpdf-800.webp
new file mode 100644
index 0000000..0e0cb4f
Binary files /dev/null and b/docs/makeitpdf-800.webp differ
diff --git a/docs/makeitpdf.webp b/docs/makeitpdf.webp
new file mode 100644
index 0000000..10a0d95
Binary files /dev/null and b/docs/makeitpdf.webp differ
diff --git a/docs/rcraft-600.webp b/docs/rcraft-600.webp
new file mode 100644
index 0000000..6da193d
Binary files /dev/null and b/docs/rcraft-600.webp differ
diff --git a/docs/rcraft-800.webp b/docs/rcraft-800.webp
new file mode 100644
index 0000000..90f1372
Binary files /dev/null and b/docs/rcraft-800.webp differ
diff --git a/docs/rcraft.webp b/docs/rcraft.webp
new file mode 100644
index 0000000..0c06006
Binary files /dev/null and b/docs/rcraft.webp differ