3.5.3

Make profile bar sticky
Change to 24 hour cycle

assets/css/header.css

@@ -284,7 +284,7 @@
 /* Fixed-width label prevents the bar from shifting when text swaps */
 .scope-play-label {
   display: inline-block;
-  min-width: 58px;
+  min-width: 64px;
   font-family: 'JetBrains Mono', ui-monospace, monospace;
   font-variant-numeric: tabular-nums;
 }

assets/css/table.css

@@ -338,6 +338,11 @@
   color: #6a4c1a;
   transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
 }
+@media (min-width: 1024px) {
+  .floating-profile-btn {
+    display: none;
+  }
+}
 .floating-profile-btn:hover { background: #fff; border-color: #c8922a; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14); }
 .floating-profile-btn.is-open { background: #fff; border-color: #c8922a; }
 .floating-profile-icon { font-size: 16px; line-height: 1; flex: none; }
@@ -470,6 +475,23 @@
   cursor: pointer;
   transition: filter 0.15s, border-color 0.15s;
 }
+/* Remove alpha from the default fallback color and any potential inherited 
+   semi-transparent backgrounds while keeping the hue. */
+.active-profile-row:not([style*="background"]) {
+  background-color: #fdf8ee;
+}
+@media (min-width: 1024px) {
+  .active-profile-row {
+    position: sticky;
+    top: 0 !important; /* Stick to the very top of the viewport */
+    z-index: 11;
+  }
+  .utci-thead-sticky {
+    position: sticky;
+    top: 28px !important; /* Corrected to match the height of the active-profile-row + margins */
+    z-index: 10;
+  }
+}
 .active-profile-row:hover,
 .active-profile-row:focus-visible {
   filter: brightness(1.06);

assets/css/ui.css

@@ -1392,14 +1392,17 @@
 
 .utci-footer {
   margin-top: 36px;
-  padding-top: 20px;
+  padding: 10px 0;
   font-family: Manrope, sans-serif;
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.07em;
   color: #9a7d5a;
-  line-height: 2.2;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  line-height: 1.2;
 }
 
 /* The "Reading the table." intro snippet */
@@ -1415,7 +1418,7 @@
 /* Site-wide footer - matches about and faq pages */
 .utci-site-footer {
   text-align: center;
-  padding: 2rem 1.5rem;
+  padding: 10px 1.5rem;
   font-size: 0.82rem;
   color: #b09870;
   border-top: 1px solid #e0d0a8;

assets/js/app.js

@@ -896,7 +896,7 @@ export function UTCIForecast() {
                           class=${`scope-play ${(playing || simMs != null) ? 'is-playing' : ''}`}
                           onClick=${() => { if (playing || simMs != null) { setPlaying(false); setSimMs(null); } else setPlaying(true); }}
                           title=${playing ? 'Stop time-lapse' : 'Play a 24-hour time-lapse on the scope'}>
-                    <span class="scope-play-icon">${(playing || simMs != null) ? '◼' : '▶'}</span><span class="scope-play-label">${simClock ?? 'Day cycle'}</span>
+                    <span class="scope-play-icon">${(playing || simMs != null) ? '◼' : '▶'}</span><span class="scope-play-label">${simClock ?? 'Cycle 24h'}</span>
                   </button>
                   <${DayTimeline}
                     windowStart=${windowStart}

assets/js/components/DayTabs.js

@@ -34,7 +34,7 @@
 import { h, Fragment } from '../../vendor/preact.js';
 import htm from '../../vendor/htm.js';
 import { confidenceBand, utciCategory, VEHICLE_SPEEDS, VEHICLE_TYPES, BUILDING_TYPES, FUR_COLORS } from '../utils.js';
-import { FREE_DAYS, UTCI_ENVIRONMENTS, deriveProfileMain } from '../config.js';
+import { FREE_DAYS, UTCI_ENVIRONMENTS, deriveProfileMain, FILTER_PROFILES, variantIcons } from '../config.js';
 import { calcVehicleInteriorTemp } from '../physics.js';
 import { CloudIcon, PrecipIcon, HouseIcon, CarIcon, FogIcon, IceIcon } from '../components.js';
 import { SubscribeModal } from './SubscribeModal.js';
@@ -175,7 +175,12 @@ export function DayTabs({
         title="Change profile & settings">
         <span class="active-profile-row-item">
           <span class="active-profile-row-label">Profile</span>
-          <span class="active-profile-row-value">${mainLabel}</span>
+          <span class="active-profile-row-value">
+            ${activeProfile === 'outdoors' 
+              ? (variantIcons[outdoorsVariant] || '🌤️') 
+              : (FILTER_PROFILES[activeProfile]?.icon || '🎯')}
+            ${mainLabel}
+          </span>
         </span>
         ${mainConfigValue && html`
           <span class="active-profile-row-sep" aria-hidden="true">·</span>