Home page: a section on Signals (#254)

Drawn in CSS like DeadAir's: the noise fades and the three items about
the words listened for stay lit. No screenshot, since one would need a
TypeSafe key on the scratch server.

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

site/index.html

@@ -105,6 +105,30 @@
       </figure>
     </div>
 
+    <!-- Signals: every item from every feed is noise until the words someone listens for pick
+         a few out. CSS only, as DeadAir's. -->
+    <div class="feature">
+      <div class="say">
+        <h3>Pick the signal out of the noise</h3>
+        <p>Make a Signal with the words to listen for, and a sentence saying what you mean if the words are not enough. iPX reads everything your podcasts and blogs bring in and keeps what is about it in a list of its own, so one subject is in one place however many feeds it turns up in. Signals need a key of your own from <a href="https://typesafe.ai">typesafe.ai</a>.</p>
+      </div>
+      <figure class="frame signals" role="img" aria-label="A list of items from many feeds, most fading into the noise, while the three about the words listened for stay lit.">
+        <div class="tune" aria-hidden="true">
+          <p class="for">Listening for <b>rockets</b>, <b>launch</b>, <b>orbit</b></p>
+          <ul>
+            <li class="n"><i style="width:62%"></i></li>
+            <li class="s">What it takes to stay in orbit</li>
+            <li class="n"><i style="width:48%"></i></li>
+            <li class="n"><i style="width:70%"></i></li>
+            <li class="s">A week at the launch site</li>
+            <li class="n"><i style="width:55%"></i></li>
+            <li class="n"><i style="width:40%"></i></li>
+            <li class="s">Why the second stage came down early</li>
+          </ul>
+        </div>
+      </figure>
+    </div>
+
     <div class="feature">
       <div class="say">
         <h3>See what others listen to</h3>

site/site.css

@@ -85,6 +85,20 @@ h2{margin:0 0 1.5rem;color:var(--navy);font-weight:800;font-size:clamp(1.75rem,4
   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)}}
+/* Signals: the noise, every other item, fades; the items about the words stay lit, marked in the
+   needle's orange. */
+.frame.signals{justify-self:stretch;width:100%}
+.tune{padding:.4rem .5rem;border-radius:.55rem;background:rgba(143,194,234,.08);color:#fff}
+.tune .for{margin:0 0 .5rem;color:var(--tick);font-size:.9rem}
+.tune .for b{color:#fff;font-weight:650}
+.tune ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
+.tune li{display:flex;align-items:center;min-height:1.6rem;padding-left:.7rem;border-left:3px solid transparent;font-size:.95rem;font-weight:600;line-height:1.3}
+.tune .n i{display:block;height:.55rem;border-radius:.3rem;background:var(--tick)}
+.tune .n{animation:noise 7s ease-in-out infinite}
+.tune .s{animation:signal 7s ease-in-out infinite}
+@keyframes noise{0%,14%{opacity:.7}36%,86%{opacity:.15}100%{opacity:.7}}
+@keyframes signal{0%,14%{border-left-color:transparent}36%,86%{border-left-color:var(--needle)}100%{border-left-color:transparent}}
+@media (prefers-reduced-motion:reduce){.tune .n{animation:none;opacity:.15}.tune .s{animation:none;border-left-color:var(--needle)}}
 .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}