asdf

src/components/home/Contact.astro

@@ -16,7 +16,17 @@ const f = ui.contact.form;
       </address>
     </div>
 
-    <form class="contact__form" action="/contact" method="post" lang={lang}>
+    <form
+      class="contact__form"
+      action="/contact"
+      method="post"
+      lang={lang}
+      data-contact
+      data-sent={f.sent}
+      data-invalid={f.invalid}
+      data-failed={f.failed}
+    >
+      <input type="hidden" name="lang" value={lang} />
       <p class="visually-hidden" aria-hidden="true">
         <label for="website">{f.honeypot}</label>
         <input type="text" id="website" name="website" tabindex="-1" autocomplete="off" />
@@ -43,6 +53,22 @@ const f = ui.contact.form;
       </div>
     </form>
   </div>
+
+  <!-- The form's answer, as a toast in the lower left. Framed like the menu, on night. -->
+  <div
+    class="toast hud-frame"
+    data-toast
+    data-label-sending={f.toast.sending}
+    data-label-sent={f.toast.sent}
+    data-label-failed={f.toast.failed}
+  >
+    <div class="toast__head">
+      <p class="toast__label"><span data-toast-label></span><span class="toast__dots" aria-hidden="true"><span>.</span><span>.</span><span>.</span></span></p>
+      <button class="toast__close" type="button" data-toast-close>{f.toast.close}</button>
+    </div>
+    <p class="toast__message" role="status" aria-live="polite" data-toast-message></p>
+    <span class="toast__timer" aria-hidden="true" data-toast-timer></span>
+  </div>
 </section>
 
 <style>
@@ -89,6 +115,107 @@ const f = ui.contact.form;
     margin-top: var(--space-2);
   }
 
+  .contact__form[aria-busy='true'] .button { opacity: 0.6; cursor: progress; }
+
+  /* Toast: a night panel fixed in the lower right. The menu's corner crosses frame it; their arms
+     reach out onto the page, so they take the menu's line colour, not the night one. */
+  .toast {
+    --frame-color: var(--hud-line);
+    position: fixed;
+    right: var(--gutter);
+    bottom: var(--gutter);
+    z-index: 20;
+    width: min(26rem, calc(100% - 2 * var(--gutter)));
+    display: grid;
+    gap: var(--space-3);
+    padding: var(--space-4) var(--space-5) var(--space-5);
+    background: var(--night);
+    color: var(--ink-on-night);
+    /* Closed: lowered and slightly small, grown from its corner. Opening pops it up; closing
+       just sinks back, quicker and without the overshoot. */
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(var(--space-5)) scale(0.94);
+    transform-origin: bottom right;
+    transition:
+      opacity var(--dur-fast) var(--ease),
+      transform var(--dur-fast) var(--ease),
+      visibility 0s linear var(--dur-fast);
+  }
+  .toast[data-open] {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+    transition:
+      opacity var(--dur-fast) var(--ease),
+      transform var(--dur-slow) var(--ease-pop);
+  }
+  .toast__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+  }
+  .toast__label,
+  .toast__close {
+    font-family: var(--font-mono);
+    font-size: var(--step-micro);
+    font-weight: var(--weight-medium);
+    line-height: 1;
+    letter-spacing: var(--track-caps);
+    text-transform: uppercase;
+  }
+  .toast__label { color: var(--ink-on-night); }
+  /* While sending, three dots after the label light up one after another. */
+  .toast__dots { display: none; }
+  .toast[data-state='sending'] .toast__dots { display: inline; }
+  .toast__dots span { animation: calc(4 * var(--dur-slow)) steps(1, end) infinite; }
+  .toast__dots span:nth-child(1) { animation-name: toast-dot-1; }
+  .toast__dots span:nth-child(2) { animation-name: toast-dot-2; }
+  .toast__dots span:nth-child(3) { animation-name: toast-dot-3; }
+  .toast__close {
+    color: var(--ink-muted-on-night);
+    padding: var(--space-2);
+    margin: calc(-1 * var(--space-2));
+    transition: color var(--dur-fast) var(--ease);
+  }
+  .toast__close:hover { color: var(--ink-on-night); }
+  .toast__close:focus-visible { outline-color: var(--ink-on-night); }
+  .toast__message {
+    font-size: var(--step-small);
+    line-height: var(--leading-small);
+    color: var(--ink-muted-on-night);
+  }
+  .toast__message:empty { display: none; }
+  /* A hairline counts down the time until the toast leaves, longer for an error, which has more
+     to read. Pointer or focus pauses it. */
+  .toast__timer {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: var(--hud-line-width);
+    background: var(--ink-muted-on-night);
+    transform-origin: left;
+    transform: scaleX(0);
+  }
+  .toast[data-open][data-state='sent'] .toast__timer { animation: toast-timer var(--dur-toast) linear forwards; }
+  .toast[data-open][data-state='failed'] .toast__timer { animation: toast-timer var(--dur-toast-error) linear forwards; }
+  .toast:hover .toast__timer,
+  .toast:focus-within .toast__timer { animation-play-state: paused; }
+  @keyframes toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
+  /* One shared cycle in four beats: none, one, two, three dots. */
+  @keyframes toast-dot-1 { 0% { opacity: 0; } 25%, 100% { opacity: 1; } }
+  @keyframes toast-dot-2 { 0% { opacity: 0; } 50%, 100% { opacity: 1; } }
+  @keyframes toast-dot-3 { 0% { opacity: 0; } 75%, 100% { opacity: 1; } }
+
+  @media (prefers-reduced-motion: reduce) {
+    .toast, .toast[data-open] { transition: none; transform: none; }
+    .toast__dots span { animation: none; }
+    /* The timer still runs, since it dismisses the toast, but it is not drawn. */
+    .toast__timer { visibility: hidden; }
+  }
+
   @media (min-width: 48rem) {
     .contact__text { grid-column: 1 / span 5; }
     .contact__form { grid-column: 7 / span 6; }
@@ -98,3 +225,62 @@ const f = ui.contact.form;
     .field { grid-column: 1 / -1; }
   }
 </style>
+
+<script>
+  // With scripting the form sends in place and answers in a toast. Without it, the server
+  // redirects to /contact/sent or /contact/error.
+  const form = document.querySelector<HTMLFormElement>('[data-contact]');
+  const toast = document.querySelector<HTMLElement>('[data-toast]');
+  if (form && toast) {
+    const label = toast.querySelector<HTMLElement>('[data-toast-label]')!;
+    const message = toast.querySelector<HTMLElement>('[data-toast-message]')!;
+    const timer = toast.querySelector<HTMLElement>('[data-toast-timer]')!;
+    const close = toast.querySelector<HTMLButtonElement>('[data-toast-close]')!;
+    const submit = form.querySelector<HTMLButtonElement>('[type="submit"]')!;
+
+    const show = (state: 'sending' | 'sent' | 'failed', text: string) => {
+      toast.dataset.state = state;
+      toast.setAttribute('data-open', '');
+      // Restart the countdown for a second message in a row.
+      timer.style.animation = 'none';
+      void timer.offsetWidth;
+      timer.style.animation = '';
+      label.textContent = toast.dataset[`label${state[0].toUpperCase()}${state.slice(1)}`] ?? '';
+      // Set on the next frame, so the now visible live region announces it.
+      requestAnimationFrame(() => { message.textContent = text; });
+    };
+    const hide = () => {
+      if (toast.contains(document.activeElement)) submit.focus();
+      toast.removeAttribute('data-open');
+    };
+
+    timer.addEventListener('animationend', hide);
+    close.addEventListener('click', hide);
+    toast.addEventListener('keydown', (e) => { if (e.key === 'Escape') hide(); });
+
+    form.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      if (form.getAttribute('aria-busy') === 'true') return;
+      form.setAttribute('aria-busy', 'true');
+      show('sending', '');
+      let outcome = 'failed';
+      try {
+        const res = await fetch(form.action, {
+          method: 'POST',
+          headers: { Accept: 'application/json' },
+          body: new URLSearchParams(new FormData(form) as unknown as Record<string, string>),
+        });
+        outcome = (await res.json()).outcome ?? 'failed';
+      } catch {
+        outcome = 'failed';
+      }
+      if (outcome === 'sent') {
+        form.reset();
+        show('sent', form.dataset.sent ?? '');
+      } else {
+        show('failed', (outcome === 'invalid' ? form.dataset.invalid : form.dataset.failed) ?? '');
+      }
+      form.removeAttribute('aria-busy');
+    });
+  }
+</script>

src/components/home/Quote.astro

@@ -207,7 +207,9 @@ const quoted = (text: string) => (lang === 'de' ? `„${text}“` : `“${text}
   @media (min-width: 64rem) {
     .quote__frame { grid-template-columns: 11fr 9fr; }
     .quote__panel { padding: var(--space-8) var(--space-8); }
-    .quote__img, :global(.quote__img) { aspect-ratio: auto; }
+    /* The image's own ratio once loaded, and the same square reserved before, so the lazy
+       portrait does not grow the section when it arrives. Both portraits are square. */
+    .quote__img, :global(.quote__img) { aspect-ratio: auto 1 / 1; }
   }
 
   @media (prefers-reduced-motion: reduce) {

src/components/home/Sectors.astro

@@ -28,7 +28,7 @@ const items = ui.sectors.items.map((item, i) => ({ ...item, image: images[i], id
                 tabindex={i === 0 ? undefined : -1}
               >{item.title}</button>
             </h3>
-            <div class="sectors__panel" role="tabpanel" id={`${item.id}-panel`} aria-labelledby={`${item.id}-tab`} tabindex="0">
+            <div class="sectors__panel" role="tabpanel" id={`${item.id}-panel`} aria-labelledby={`${item.id}-tab`} tabindex="0" data-open={i === 0 ? '' : undefined}>
               <div class="sectors__panel-inner">
                 <p class="muted">{item.body}</p>
                 <Picture
@@ -104,7 +104,8 @@ const items = ui.sectors.items.map((item, i) => ({ ...item, image: images[i], id
   /* The stage image on the right exists for wide screens. On narrow screens each panel carries its own image. */
   .sectors__media { display: none; }
 
-  /* With scripting, one panel at a time; without, everything is readable. */
+  /* With scripting, one panel at a time; without, everything is readable. The first panel is
+     open in the markup, so nothing expands on load and the page below it does not move. */
   :global(html.js) .sectors__panel {
     display: grid;
     grid-template-rows: 0fr;