3.8

Improved 'Sow' and 'Harvest' calcs
Better background on the event banners

assets/js/app.js

@@ -685,6 +685,20 @@ export function UTCIForecast() {
         const startFmt = fmtDate(ev.start);
         const peakFmt  = fmtDate(ev.peak);
         const endFmt   = fmtDate(ev.end);
+        // Warning banners take their background from the day tabs' weather
+        // palette (ev.tint, set in events/weather-checks.js) so a heat alert
+        // reads the same orange as a hot day tab and a rain alert the same
+        // blue. Pastelised hard — the banner is a wide block of body text, so
+        // it needs far more headroom than a small tab — and drawn edge-in to
+        // echo the tabs' radial "colour radiating inward" look.
+        const noteTintStyle = (isPriority && ev.tint) ? (() => {
+          const pale = (amt) => `rgb(${ev.tint.map(c => Math.round(c + (255 - c) * amt)).join(',')})`;
+          const edge = pale(0.55), core = pale(0.82);
+          return {
+            background: `linear-gradient(90deg, ${edge} 0%, ${core} 35%, ${core} 65%, ${edge} 100%)`,
+            borderColor: `rgb(${ev.tint.map(c => Math.round(c * 0.72)).join(',')})`,
+          };
+        })() : undefined;
         const dateLine = (startFmt && endFmt)
           ? (startFmt === endFmt
               ? (peakFmt ? `Peak ${peakFmt}` : startFmt)
@@ -693,7 +707,7 @@ export function UTCIForecast() {
                   : `${startFmt} – ${endFmt}`))
           : null;
         return html`
-          <div class=${`event-note${isPriority ? ' is-priority' : ''}`}>
+          <div class=${`event-note${isPriority ? ' is-priority' : ''}${noteTintStyle ? ' is-tinted' : ''}`} style=${noteTintStyle}>
             <span class="event-note-accent" style=${{ background: ev.color === '#fdf8ee' ? '#c8922a' : ev.color }} />
             <div class=${`event-note-slide${noteFading ? ' is-fading' : ''}`}>
               <span class="event-note-emoji">${ev.emoji}</span>