polishing

Author: KSemenenko

src/components/Apply.astro

@@ -41,6 +41,9 @@ const recaptchaNotice = apply.recaptchaNotice;
         data-apply-form
         data-endpoint={formEndpoint}
         data-error={apply.errorBody}
+        data-fallback-email={site.email}
+        data-mailto-label={apply.errorMailtoLabel}
+        data-mailto-subject={apply.errorMailtoSubject}
         data-sending={apply.sendingLabel}
         data-verifying={apply.verifyingLabel}
         data-recaptcha-api-url={recaptchaApiUrl}
@@ -185,7 +188,14 @@ const recaptchaNotice = apply.recaptchaNotice;
         </noscript>
       </form>
 
-      <div class="apply__success card" data-apply-success hidden tabindex="-1">
+      <div
+        class="apply__success card"
+        data-apply-success
+        hidden
+        tabindex="-1"
+        role="status"
+        aria-live="polite"
+      >
         <p class="apply__success-mark font-pixel" aria-hidden="true">✓</p>
         <h3 class="apply__success-h font-display">{apply.successHeading}</h3>
         <p class="apply__success-body font-serif">{apply.successBody}</p>
@@ -351,6 +361,17 @@ const recaptchaNotice = apply.recaptchaNotice;
   :global(:root[data-theme='dark']) .apply__status[data-state='error'] {
     color: var(--accent-2);
   }
+  .apply__status-mailto {
+    display: inline-block;
+    margin-top: 0.4rem;
+    color: var(--accent-2-text);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    font-weight: 600;
+  }
+  .apply__status-mailto:hover {
+    text-decoration: none;
+  }
   .apply__disabled {
     font-size: var(--step--2);
     line-height: 1.5;
@@ -746,6 +767,37 @@ const recaptchaNotice = apply.recaptchaNotice;
         if (status) {
           status.dataset.state = 'error';
           status.textContent = errorMsg;
+          // One-tap escape hatch for the highest-intent action: a mailto
+          // pre-filled with what they already typed, so a script-blocked /
+          // reCAPTCHA-down / offline CTO never dead-ends on a generic error.
+          const fallbackEmail = form.dataset.fallbackEmail;
+          const mailtoLabel = form.dataset.mailtoLabel;
+          if (fallbackEmail && mailtoLabel) {
+            const fd = new FormData(form);
+            const get = (k: string) => String(fd.get(k) ?? '').trim();
+            const subject = `${form.dataset.mailtoSubject || 'Open-source patronage'}${
+              get('company') ? ` — ${get('company')}` : ''
+            }`;
+            const body = [
+              get('company') && `Company: ${get('company')}`,
+              get('email') && `Work email: ${get('email')}`,
+              get('name') && `Name: ${get('name')}`,
+              get('grade') && `Grade: ${get('grade')}`,
+              get('budget') && `Funding shape: ${get('budget')}`,
+              get('timeline') && `Timeline: ${get('timeline')}`,
+              get('stack') && `Open source we depend on:\n${get('stack')}`,
+              get('notes') && `Notes: ${get('notes')}`,
+            ]
+              .filter(Boolean)
+              .join('\n\n');
+            const link = document.createElement('a');
+            link.href = `mailto:${fallbackEmail}?subject=${encodeURIComponent(
+              subject
+            )}&body=${encodeURIComponent(body)}`;
+            link.className = 'apply__status-mailto';
+            link.textContent = mailtoLabel;
+            status.append(document.createElement('br'), link);
+          }
         }
         if (submit) {
           submit.disabled = false;

src/components/Header.astro

@@ -62,6 +62,7 @@ import Logo from './Logo.astro';
       </button>
     </div>
   </div>
+  <div class="nav-scrim" data-nav-scrim aria-hidden="true"></div>
 </header>
 
 <style>
@@ -225,6 +226,36 @@ import Logo from './Logo.astro';
     display: block;
   }
 
+  /* Backdrop scrim behind the mobile drawer — gives the open menu a real modal
+     affordance and a click-away target. Sits below the header bar (so the close
+     button stays tappable) and below the drawer, above the page. Desktop: off. */
+  .nav-scrim {
+    display: none;
+    position: fixed;
+    inset: 4.25rem 0 0 0;
+    z-index: 1;
+    background: color-mix(in srgb, var(--bg) 55%, transparent);
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 0.35s var(--ease-out),
+      visibility 0s linear 0.35s;
+  }
+  .nav-scrim[data-open='true'] {
+    opacity: 1;
+    visibility: visible;
+    transition:
+      opacity 0.35s var(--ease-out),
+      visibility 0s;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .nav-scrim {
+      transition: none;
+    }
+  }
+
   .nav-toggle {
     display: none;
   }
@@ -260,6 +291,9 @@ import Logo from './Logo.astro';
     .nav-toggle {
       display: inline-grid;
     }
+    .nav-scrim {
+      display: block;
+    }
     .brand {
       gap: 0;
       min-width: 0;
@@ -272,6 +306,7 @@ import Logo from './Logo.astro';
       top: 4.25rem;
       right: 0;
       left: 0;
+      z-index: 2;
       width: auto;
       flex-direction: column;
       align-items: stretch;
@@ -345,6 +380,9 @@ import Logo from './Logo.astro';
       top: 4rem;
       max-height: calc(100svh - 4rem);
     }
+    .nav-scrim {
+      top: 4rem;
+    }
   }
 
   @media (max-width: 22rem) {

src/components/Hero.astro

@@ -1,6 +1,6 @@
 ---
-import { hero, motto } from '../data/site';
-import GitHubMark from './GitHubMark.astro';
+import { hero, motto, miniGame } from '../data/site';
+import Logo from './Logo.astro';
 
 // Precompute the headline as a trusted HTML string. Keep the H1 visible at
 // first paint: this text is the LCP candidate, so it must not wait for JS reveal.
@@ -64,11 +64,18 @@ const mottoHalf = Array.from({ length: 4 })
         <ul class="hero__badges" role="list" data-reveal style="--reveal-delay:720ms">
           {hero.badges.map((badge) => <li class="chip chip--dot">{badge}</li>)}
         </ul>
+
+        <button class="hero__play" type="button" data-game-launch data-reveal style="--reveal-delay:820ms">
+          <span class="hero__play-glyph" aria-hidden="true">▶</span>
+          <span class="hero__play-text font-pixel">{miniGame.launchCta}</span>
+          <span class="hero__play-tag font-mono" aria-hidden="true">{miniGame.footerLabel} · 60s</span>
+          <span class="visually-hidden"> — {miniGame.footerLabel}, {miniGame.launchHint}</span>
+        </button>
       </div>
 
       <aside class="hero__crest" data-reveal style="--reveal-delay:320ms">
         <div class="crest">
-          <GitHubMark size={160} class="crest__github-mark" />
+          <Logo size={160} decorative class="crest__mark" />
         </div>
         <pre
           class="crest__status terminal__body font-mono"
@@ -212,6 +219,51 @@ const mottoHalf = Array.from({ length: 4 })
     gap: 0.5rem;
     margin-top: var(--space-m);
   }
+
+  /* Arcade launcher — surfaces the signature mini-game in the first viewport
+     without competing with the primary CTAs. "Insert coin" energy. */
+  .hero__play {
+    margin-top: var(--space-m);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.7em;
+    padding: 0.55em 0.9em;
+    background: transparent;
+    color: var(--fg);
+    border: var(--border-px) solid var(--hairline-strong);
+    box-shadow: var(--shadow-px-sm);
+    cursor: pointer;
+    transition:
+      transform 0.12s var(--ease-out),
+      box-shadow 0.12s var(--ease-out),
+      border-color 0.2s;
+  }
+  .hero__play:hover,
+  .hero__play:focus-visible {
+    transform: translate(-2px, -2px);
+    box-shadow: 5px 5px 0 var(--fg);
+    border-color: var(--fg);
+  }
+  .hero__play-glyph {
+    color: var(--accent);
+    font-size: 0.8em;
+    animation: blink 1.1s steps(2, start) infinite;
+  }
+  .hero__play-text {
+    font-size: clamp(0.5rem, 0.42rem + 0.35vw, 0.6rem);
+    color: var(--fg);
+  }
+  .hero__play-tag {
+    font-size: var(--step--2);
+    color: var(--fg-faint);
+    padding-left: 0.7em;
+    border-left: 1.5px solid var(--hairline-strong);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .hero__play-glyph {
+      animation: none;
+    }
+  }
   .chip--dot::before {
     content: '';
     width: 7px;
@@ -220,8 +272,9 @@ const mottoHalf = Array.from({ length: 4 })
     flex: none;
   }
 
-  /* ── The hero emblem — the GitHub octocat mark on a soft gold halo, with a
-     slim 3-line mono "mission status" caption below it. */
+  /* ── The hero emblem — the ManagedCode `< >` brand mark on a soft gold halo,
+     with a slim 3-line mono "mission status" caption below it. Using our own
+     mark (not GitHub's) keeps the most-judged frame authored and on-brand. */
   .hero__crest {
     --reveal-y: 0px;
     align-self: center;
@@ -237,20 +290,29 @@ const mottoHalf = Array.from({ length: 4 })
     max-width: clamp(13rem, 21vw, 18rem);
     margin-inline: auto;
   }
-  :global(.crest__github-mark) {
+  :global(.crest__mark) {
     position: absolute;
     top: 50%;
     left: 50%;
     z-index: 2;
-    width: 54%;
+    width: 70%;
     height: auto;
     color: var(--fg);
     transform: translate(-50%, -50%);
     pointer-events: none;
     filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--gold) 30%, transparent));
+    /* smooths the desktop cursor-magnet parallax (app.ts initMagnetic) */
+    transition: transform 0.3s var(--ease-out);
+    will-change: transform;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :global(.crest__mark) {
+      transition: none;
+    }
   }
-  /* a faint patron-gold halo BEHIND the canvas — a separate layer, so it never
-     blurs the pixel emblem itself */
+  /* a faint patron-gold halo BEHIND the mark — a separate layer, so it never
+     blurs the emblem itself. It breathes slowly (composited scale/opacity only):
+     "the lights are on" — the one subtle, on-brand kinetic beat on the hero. */
   .crest::before {
     content: '';
     position: absolute;
@@ -262,6 +324,24 @@ const mottoHalf = Array.from({ length: 4 })
       transparent 68%
     );
     pointer-events: none;
+    will-change: transform, opacity;
+    animation: crest-breathe 5s ease-in-out infinite;
+  }
+  @keyframes crest-breathe {
+    0%,
+    100% {
+      transform: scale(0.94);
+      opacity: 0.7;
+    }
+    50% {
+      transform: scale(1.06);
+      opacity: 1;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .crest::before {
+      animation: none;
+    }
   }
   :global(:root[data-theme='dark']) .crest::before {
     background: radial-gradient(
@@ -356,8 +436,8 @@ const mottoHalf = Array.from({ length: 4 })
       max-width: none;
       margin-inline: 0;
     }
-    :global(.crest__github-mark) {
-      width: 66%;
+    :global(.crest__mark) {
+      width: 78%;
     }
     .crest__status {
       flex: 1 1 auto;

src/components/Sla.astro

@@ -69,6 +69,8 @@ import { sla } from '../data/site';
         ))
       }
     </ul>
+
+    <p class="sla__sources font-mono" data-reveal>{sla.sources}</p>
   </div>
 </section>
 
@@ -268,6 +270,15 @@ import { sla } from '../data/site';
     color: var(--accent);
   }
 
+  /* ---- Source footnote (matches the stat-card rigor elsewhere) ---- */
+  .sla__sources {
+    margin-top: clamp(1rem, 0.7rem + 1vw, 1.6rem);
+    max-width: 70ch;
+    font-size: var(--step--2);
+    line-height: 1.6;
+    color: var(--fg-faint);
+  }
+
   /* =========================================================
      RESPONSIVE SWAP
      ========================================================= */

src/components/Tiers.astro

@@ -8,7 +8,7 @@ import { tiers } from '../data/site';
 const meterCells = (fill: number) =>
   Array.from(
     { length: tiers.meterTotal },
-    (_, i) => `<i class="plan__cell"${i < fill ? ' data-on' : ''}></i>`
+    (_, i) => `<i class="plan__cell"${i < fill ? ' data-on' : ''} style="--i:${i}"></i>`
   ).join('');
 ---
 
@@ -383,12 +383,35 @@ const meterCells = (fill: number) =>
     height: 0.62rem;
     border: 1.5px solid color-mix(in srgb, var(--plan-tone) 32%, transparent);
     background: color-mix(in srgb, var(--plan-tone) 8%, transparent);
+    transition:
+      background-color 0.32s var(--ease-out),
+      border-color 0.32s var(--ease-out);
   }
   .plan__meter-bar :global(.plan__cell[data-on]) {
     border-color: var(--plan-tone);
     background: var(--plan-tone);
     box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 30%, transparent);
   }
+  /* Signature motion: the capacity meter "charges" left→right as the card
+     reveals — motion that communicates the reserved band filling up. Gated on
+     :root.js so a no-JS / crawler paint shows the meter already full; the
+     visual-test helper reveals every card, so frames settle on the lit state. */
+  :root.js .tiers__plan[data-reveal]:not(.is-visible) .plan__meter-bar :global(.plan__cell[data-on]) {
+    border-color: color-mix(in srgb, var(--plan-tone) 30%, transparent);
+    background: color-mix(in srgb, var(--plan-tone) 8%, transparent);
+    box-shadow: none;
+  }
+  .tiers__plan.is-visible .plan__meter-bar :global(.plan__cell[data-on]) {
+    transition-delay: calc(0.22s + var(--i, 0) * 0.055s);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .plan__meter-bar :global(.plan__cell) {
+      transition: none;
+    }
+    .tiers__plan.is-visible .plan__meter-bar :global(.plan__cell[data-on]) {
+      transition-delay: 0s;
+    }
+  }
 
   .plan__rule {
     margin-block: 0.1rem;