3.2.4.1

Add values to thermal bands

assets/css/ui.css

@@ -1240,18 +1240,32 @@
 }
 
 .utci-legend-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
   padding: 6px 12px;
   font-family: Manrope, sans-serif;
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
   flex: 1;
   min-width: 110px;
   text-align: center;
   opacity: 0.9;
 }
 
+.utci-legend-item-label {
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.utci-legend-item-value {
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  opacity: 0.85;
+}
+
 
 /* ── 11. ABOUT + FOOTER ─────────────────────────────────────────────── */
 

assets/js/app.js

@@ -1756,13 +1756,13 @@ export function UTCIForecast() {
               <span class="utci-legend-label">Thermal stress bands</span>
               <div class="utci-legend-row">
                 ${[
-                  { t: -9,  label: 'Freezing' },
-                  { t:  1,  label: 'Cold' },
-                  { t: 11,  label: 'Cool' },
-                  { t: 21,  label: 'Comfortable', bold: true },
-                  { t: 29,  label: 'Caution' },
-                  { t: 36,  label: 'Extreme' },
-                  { t: 47,  label: 'Danger' },
+                  { t: -9,  label: 'Freezing',    value: '< 0°C' },
+                  { t:  1,  label: 'Cold',         value: '0–10°C' },
+                  { t: 11,  label: 'Cool',         value: '10–19°C' },
+                  { t: 21,  label: 'Comfortable',  value: '19–24°C', bold: true },
+                  { t: 29,  label: 'Caution',      value: '27–32°C' },
+                  { t: 36,  label: 'Extreme',      value: '32–41°C' },
+                  { t: 47,  label: 'Danger',       value: '41°C+' },
                 ].map((b, i) => {
                   const rgb = airTempRgb(b.t) || [200, 200, 200];
                   const mid = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
@@ -1771,7 +1771,10 @@ export function UTCIForecast() {
                   const bg = `linear-gradient(135deg, ${light} 0%, ${mid} 60%, ${dark} 100%)`;
                   const lum = (rgb[0]*299 + rgb[1]*587 + rgb[2]*114) / 1000;
                   const fg = lum > 165 ? '#1a1a1a' : '#ffffff';
-                  return html`<span key=${i} class="utci-legend-item" style=${{ background: bg, color: fg, ...(b.bold ? { fontWeight: 700 } : {}) }}>${b.label}</span>`;
+                  return html`<span key=${i} class="utci-legend-item" style=${{ background: bg, color: fg, ...(b.bold ? { fontWeight: 700 } : {}) }}>
+                    <span class="utci-legend-item-label">${b.label}</span>
+                    <span class="utci-legend-item-value">${b.value}</span>
+                  </span>`;
                 })}
               </div>
             </div>