3.8.1

Event header background shades now match day tabs

assets/js/app.js

@@ -457,8 +457,6 @@ export function UTCIForecast() {
         })();
     return raw.map(c => Math.min(255, Math.round(c + (255 - c) * whiteMix)));
   };
-  const airTempRgbStrong = (t) => airTempRgb(t, 0.42);
-  const airTempRgbVeryStrong = (t) => airTempRgb(t, 0.25);
 
   // Pet columns (Fur Colour, Pet Shade, Pet Home, Paw) reuse airTempRgb
   // exactly as-is - identical stops, identical whiteMix blend, identical
@@ -664,6 +662,18 @@ export function UTCIForecast() {
     };
   })();
 
+  // Single colour source for the quick view: the curve's gradient stops AND
+  // the cards' thermal tags both read from here, so a card's connector line
+  // can never land on a shade its own tag contradicts. (The tags used to take
+  // the discrete UTCI_BANDS hex — a flat #90d090 "Comfortable" chip sitting
+  // over a yellow-green 22°C point on the continuous ramp.)
+  //
+  // Pet mode goes through petAirTempRgb, which remaps the pet reading onto
+  // the human scale first (petEquivHumanTemp), exactly as the pet table
+  // columns and pet legend do.
+  const fscRgb = (t, whiteMix) =>
+    (simpleTemp === 'furSurfaceT' ? petAirTempRgb : airTempRgb)(t, whiteMix);
+
   // ─── 4. JSX RETURN ───────────────────────────────────────────────────
   // Everything below is the actual page markup, written as one big HTM
   // template. Search tips:
@@ -1190,6 +1200,17 @@ export function UTCIForecast() {
                     return null;
                   })();
                   const windMph = Math.round((r.gust ?? r.va) * 2.237);
+                  // Tag shade = the exact gradient stop the curve is painted
+                  // with at this card's landing hour (fsc-grad, whiteMix 0.42),
+                  // so the connector line lands on the colour the tag is
+                  // wearing. Band label and weight still come from the band.
+                  const feelRgb = fscRgb(dispTemp, 0.42) || [200, 200, 200];
+                  const feelLum = (feelRgb[0] * 299 + feelRgb[1] * 587 + feelRgb[2] * 114) / 1000;
+                  const feelStyle = {
+                    background: `rgb(${feelRgb[0]},${feelRgb[1]},${feelRgb[2]})`,
+                    color: feelLum > 165 ? '#1a1a1a' : '#ffffff',
+                    ...(cat.fontWeight ? { fontWeight: cat.fontWeight } : {}),
+                  };
                   return html`
                     <div key=${r.iso} class=${'fsc-card' + (isNow ? ' fsc-card--now' : '')}
                          style=${fscPlot && { gridColumn: fscPlot.cardCol(fscPlot.landing[ri]) }}>
@@ -1204,7 +1225,7 @@ export function UTCIForecast() {
                         <span class="fsc-meta-row fsc-meta-dir">${r.compass ? r.compass.label : '—'}</span>
                       </div>
                       <div class="fsc-temp">${Math.round(dispTemp)}°</div>
-                      <div class="fsc-feel" style=${{background: cat.bg, color: cat.fg}}>${cat.label}</div>
+                      <div class="fsc-feel" style=${feelStyle}>${cat.label}</div>
                     </div>
                   `;
                 })}
@@ -1246,14 +1267,14 @@ export function UTCIForecast() {
                     <defs>
                       <linearGradient id="fsc-grad" x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox">
                         ${fscSrc.map((r, j) => {
-                          const rgb = airTempRgbStrong(getT(r)) || [200, 200, 200];
+                          const rgb = fscRgb(getT(r), 0.42) || [200, 200, 200];
                           const fc = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
                           return html`<stop key=${j} offset=${`${fscStopPct(j)}%`} stop-color=${fc} />`;
                         })}
                       </linearGradient>
                       <linearGradient id="fsc-grad-strong" x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox">
                         ${fscSrc.map((r, j) => {
-                          const rgb = airTempRgbVeryStrong(getT(r)) || [200, 200, 200];
+                          const rgb = fscRgb(getT(r), 0.25) || [200, 200, 200];
                           const fc = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
                           return html`<stop key=${`s${j}`} offset=${`${fscStopPct(j)}%`} stop-color=${fc} />`;
                         })}