1.9.5

Updated day tabs to shade based on weather

assets/css/header.css

@@ -10,7 +10,6 @@
   gap: 32px;
   align-items: center;
   padding-bottom: 32px;
-  border-bottom: 2px solid #c9b08a;
   margin-bottom: 32px;
 }
 

assets/css/table.css

@@ -73,7 +73,6 @@
 
 .utci-day-tabs {
   display: flex;
-  border-bottom: 2px solid #d4c0a0;
   overflow-x: auto;
   scroll-behavior: smooth;
   scrollbar-width: none;        /* Firefox */
@@ -84,7 +83,7 @@
 }
 
 .utci-day-tab {
-  flex-shrink: 0;
+  flex: 1 0 auto;
   padding: 12px 24px;
   cursor: pointer;
   font-family: Manrope, sans-serif;
@@ -93,13 +92,15 @@
   text-transform: uppercase;
   letter-spacing: 0.08em;
   background: transparent;
-  border: none;
+  border: 1px solid #c9b08a;
   color: #b09870;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -2px;
   transition: color 0.2s, border-color 0.2s;
 }
 
+.utci-day-tab + .utci-day-tab {
+  border-left: none;
+}
+
 .utci-day-tab:hover {
   color: #6b4f2a;
 }

assets/js/components/DayTabs.js

@@ -49,6 +49,19 @@ import { CloudIcon, PrecipIcon, CustomSelect } from '../components.js';
 
 const html = htm.bind(h);
 
+// Converts a base RGB colour into the same 135° gradient used by the thermal
+// bands legend: 50% white blend to pastelise, then a subtle light→dark sweep.
+function weatherGradient(r, g, b) {
+  const blend   = (c) => Math.round(c + (255 - c) * 0.68);
+  const [mr, mg, mb] = [blend(r), blend(g), blend(b)];
+  const lighten = (c) => Math.min(255, Math.round(c + (255 - c) * 0.30));
+  const darken  = (c) => Math.round(c * 0.96);
+  const light = `rgb(${lighten(mr)},${lighten(mg)},${lighten(mb)})`;
+  const mid   = `rgb(${mr},${mg},${mb})`;
+  const dark  = `rgb(${darken(mr)},${darken(mg)},${darken(mb)})`;
+  return `linear-gradient(135deg, ${light} 0%, ${mid} 60%, ${dark} 100%)`;
+}
+
 export function DayTabs({
   days,
   selectedDay, setSelectedDay,
@@ -106,6 +119,20 @@ export function DayTabs({
           const repDt      = midRow ? midRow.dt   : dDate;
           const showPrecip = dayPrecip >= 0.3 || daySnow >= 0.1;
 
+          // Base RGB for each weather condition — pastelised by weatherGradient()
+          const [wR, wG, wB] = (daySnow >= 0.1)                      ? [100, 160, 230]
+                              : (dayHi > 38)                          ? [210,  60,  30]
+                              : showPrecip                            ? [ 50, 120, 200]
+                              : (dayHi > 32)                          ? [220, 110,  30]
+                              : (dayHi > 26)                          ? [220, 180,  30]
+                              : modalCloudCat === 'overcast'          ? [100, 110, 130]
+                              : (dayHi !== null && dayHi < 9)         ? [ 60, 110, 180]
+                              : modalCloudCat === 'scattered'         ? [160, 150, 130]
+                              : modalCloudCat === 'wispy'             ? [200, 180, 130]
+                              :                                         [220, 190,  50];
+          const wBg  = weatherGradient(wR, wG, wB);
+          const wText = '#2a1d10';
+
           return html`
             <button
               key=${d.key}
@@ -123,17 +150,25 @@ export function DayTabs({
                 ? `${band.label} · SunScope Extra unlocks day ${i + 1}`
                 : `${band.label} · day ${i + 1} of 14`}
               style=${{
-                background: band.bg,
-                color: '#2a1d10',
-                borderStyle: 'solid',
-                borderWidth: '0 0 3px 0',
-                borderBottomColor: isActive ? '#1e1208' : band.edge,
+                background: wBg,
+                color: wText,
+                border: '1px solid #c9b08a',
                 opacity: locked ? 0.5 : 1,
                 cursor: locked ? 'not-allowed' : 'pointer',
                 position: 'relative',
-                filter: isActive ? 'saturate(1.15) brightness(1.02)' : 'none',
+                filter: isActive ? 'saturate(1.1) brightness(1.04)' : 'none',
               }}
             >
+              <span style=${{
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                right: 0,
+                height: isActive ? '5px' : '4px',
+                background: band.bg,
+                borderRadius: '0 0 2px 2px',
+                transition: 'height 0.1s',
+              }} aria-hidden="true"></span>
               ${locked && html`
                 <span style=${{ position: 'absolute', top: '3px', right: '5px', fontSize: '10px', opacity: 0.75 }}>🔒</span>`}
               ${dayName}