Home page: a DeadAir section, with its silences shrinking (#216)

A waveform in the dial's navy frame: the talk keeps its width, each
silence lights in the needle's orange and shrinks to a short pause, and
the episode ends sooner. CSS only, as the page's CSP allows no script of
its own; with reduced motion it shows the shortened episode, still. The
player section no longer mentions DeadAir, which has its own now.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

site/build.sh

@@ -5,7 +5,7 @@ set -e
 here=$(dirname "$0")
 rm -rf "$here/dist"
 mkdir -p "$here/dist/fonts"
-cp "$here/index.html" "$here/site.css" "$here/_headers" "$here/dist/"
+cp "$here/index.html" "$here/site.css" "$here/wave.svg" "$here/_headers" "$here/dist/"
 # The reader's own typeface, the same file ipx-web serves.
 cp "$here/../web/InterVariable.woff2" "$here/dist/fonts/inter.woff2"
 cp "$here/../web/logo.svg" "$here/../web/favicon.png" "$here/dist/"

site/index.html

@@ -78,12 +78,31 @@
     <div class="feature wide">
       <div class="say">
         <h3>Pick up where you left off</h3>
-        <p>The player keeps your place in every episode, on every device. Turn on DeadAir for a show and it plays without the long silences, leaving the pause you choose.</p>
+        <p>The player keeps your place in every episode, on every device.</p>
       </div>
       <figure class="frame"><img class="cut player" src="/shots/player.webp" width="1200" height="80" loading="lazy"
         alt="The player along the bottom of the page: the episode playing, back and forward, how far in it is, its speed and the volume."></figure>
     </div>
 
+    <!-- DeadAir: talk keeps its length, the quiet between it shrinks to a short pause, and the
+         episode ends sooner. CSS only; the page runs no script of its own. -->
+    <div class="feature wide">
+      <div class="say">
+        <h3>DeadAir</h3>
+        <p>Turn it on for a show and long silences shrink to a short pause, so episodes finish sooner while every voice keeps its own pace. You choose how much of a pause to leave.</p>
+      </div>
+      <figure class="frame deadair" role="img" aria-label="A waveform whose silent gaps shrink to short pauses, so the episode ends sooner.">
+        <div class="wave" aria-hidden="true">
+          <span class="talk t1"></span><span class="hush"></span>
+          <span class="talk t2"></span><span class="hush"></span>
+          <span class="talk t3"></span><span class="hush"></span>
+          <span class="talk t4"></span><span class="hush"></span>
+          <span class="talk t5"></span><span class="hush"></span>
+          <span class="talk t6"></span>
+        </div>
+      </figure>
+    </div>
+
     <div class="feature">
       <div class="say">
         <h3>A shared directory</h3>

site/site.css

@@ -71,6 +71,20 @@ h2{margin:0 0 1.5rem;color:var(--navy);font-weight:800;font-size:clamp(1.75rem,4
 .feature p{margin:0;max-width:34rem}
 .frame{margin:0;justify-self:start;max-width:100%;padding:clamp(.6rem,1.6vw,1.1rem);background:var(--navy);border-radius:1.1rem}
 .frame img{display:block;max-width:100%;height:auto;border-radius:.55rem}
+/* DeadAir: the track is the episode's full length; talk keeps its width, each silence lights
+   in the needle's orange and shrinks to a pause, and the end comes in from the right. */
+.frame.deadair{justify-self:stretch}
+.wave{display:flex;align-items:center;height:4.5rem;border-radius:.55rem;background:rgba(143,194,234,.08)}
+.talk{height:100%;background:url(/wave.svg) 0 50%/auto 100% repeat-x}
+.talk:first-child{border-radius:.55rem 0 0 .55rem}
+.t1{flex:0 0 14%}.t2{flex:0 0 19%}.t3{flex:0 0 9%}.t4{flex:0 0 16%}.t5{flex:0 0 12%}.t6{flex:0 0 10%}
+.hush{flex:0 0 4%;align-self:stretch;background:linear-gradient(var(--tick),var(--tick)) 50%/100% 2px no-repeat;border-radius:.3rem;animation:hush 7s ease-in-out infinite}
+@keyframes hush{
+  0%,14%{flex-basis:4%;background-color:transparent}
+  24%,30%{flex-basis:4%;background-color:rgba(255,85,0,.35)}
+  48%,86%{flex-basis:.8%;background-color:rgba(255,85,0,.35)}
+  100%{flex-basis:4%;background-color:transparent}}
+@media (prefers-reduced-motion:reduce){.hush{animation:none;flex-basis:.8%;background-color:rgba(255,85,0,.35)}}
 .also{margin:2rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 3.5rem}
 .also dt{color:var(--navy);font-weight:750;font-size:1.2rem;line-height:1.25}
 .also dd{margin:.45rem 0 0;max-width:34rem}

site/wave.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="64" viewBox="0 0 48 64" fill="#8fc2ea"><rect x="1" y="22" width="3" height="20" rx="1.5"/><rect x="7" y="10" width="3" height="44" rx="1.5"/><rect x="13" y="17" width="3" height="30" rx="1.5"/><rect x="19" y="3" width="3" height="58" rx="1.5"/><rect x="25" y="14" width="3" height="36" rx="1.5"/><rect x="31" y="7" width="3" height="50" rx="1.5"/><rect x="37" y="20" width="3" height="24" rx="1.5"/><rect x="43" y="12" width="3" height="40" rx="1.5"/></svg>