2.2.3

Mobile fixes

assets/css/header.css

@@ -31,8 +31,13 @@
   align-items: flex-start;
 }
 
-.header-left .utci-search-wrap {
+/* Wraps the location line + the reveal-on-demand search overlay so the
+   search can position itself directly over the location to save space. */
+.utci-loc-search {
+  position: relative;
   margin-top: 18px;
+  width: 300px;
+  max-width: 100%;
 }
 
 /* Right column — now hosts the "Why it feels like this" panel,
@@ -76,16 +81,94 @@
   margin-top: 14px;
 }
 
-/* "↳ Location, Somewhere" */
+/* "↳ Location, Somewhere" + the magnifier that reveals the search */
 .utci-current-loc {
   font-family: Fraunces, serif;
   font-style: italic;
   font-weight: 800;
   font-size: 18px;
-  margin-top: 8px;
+  margin-top: 0;
   margin-bottom: 0;
   color: #1e1208;
   text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* The location name doubles as a search trigger — styled to read as plain
+   text but with a subtle hover cue so it's discoverable. */
+.utci-loc-name {
+  flex: 0 1 auto;
+  font: inherit;
+  color: inherit;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-align: left;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 5px;
+  border-bottom: 1px dashed transparent;
+  transition: color 0.2s, border-color 0.2s;
+}
+
+/* Map pin sits just ahead of the location name; nudge it onto the text
+   baseline and tint it brass so it reads as a location marker. */
+.utci-loc-pin {
+  flex: 0 0 auto;
+  align-self: center;
+  position: relative;
+  top: 1px;
+  color: #c8922a;
+}
+
+.utci-loc-name:hover {
+  color: #c8922a;
+  border-bottom-color: #c8922a80;
+}
+
+.utci-loc-name:focus-visible {
+  outline: none;
+  color: #c8922a;
+  border-bottom-color: #c8922a;
+}
+
+/* Small brass magnifying-glass button sitting beside the location name */
+.utci-search-toggle {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1.5px solid #c9b08a;
+  border-radius: 999px;
+  background: #fffcf2;
+  color: #9a7a3a;
+  cursor: pointer;
+  transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
+}
+
+.utci-search-toggle:hover {
+  color: #c8922a;
+  border-color: #c8922a;
+  background: #fef3dc;
+}
+
+.utci-search-toggle:focus-visible {
+  outline: none;
+  border-color: #c8922a;
+  box-shadow: 0 0 0 3px #c8922a24;
+}
+
+.utci-search-toggle[aria-expanded="true"] {
+  color: #fff;
+  background: #c8922a;
+  border-color: #c8922a;
 }
 
 /* The lat/lon below the location */
@@ -95,6 +178,7 @@
   font-size: 11px;
   color: #b09870;
   display: block;
+  flex-basis: 100%;          /* drop onto its own line below the name + magnifier */
   margin-top: 4px;
   margin-left: 0;
   letter-spacing: 0.08em;
@@ -211,6 +295,26 @@
   width: 300px;
 }
 
+/* When revealed, the search floats over the location line rather than
+   occupying its own vertical slot — keeps the header compact. */
+.utci-search-overlay {
+  position: absolute;
+  top: -4px;
+  left: 0;
+  width: 100%;
+  z-index: 60;
+}
+
+.utci-search-overlay .utci-search {
+  box-shadow: 0 6px 20px #64461426;   /* lift it off the location underneath */
+}
+
+/* The 300px wrapper would let .utci-fetch-time's default right-align drift to
+   the far edge; keep it left-aligned beneath the coords as before. */
+.utci-loc-search .utci-fetch-time {
+  text-align: left;
+}
+
 .utci-search-label {
   font-family: Manrope, sans-serif;
   font-size: 10px;
@@ -327,8 +431,13 @@
     width: 250px;
   }
 
-  .utci-current-loc {
+  .utci-loc-search {
+    width: 100%;
     margin-top: 4px;              /* tighten gap above location on mobile */
+  }
+
+  .utci-current-loc {
+    justify-content: center;      /* centre name + magnifier on mobile */
     text-align: center;
   }
 
@@ -336,8 +445,8 @@
     text-align: center;
   }
 
-  .utci-fetch-time {
+  .utci-loc-search .utci-fetch-time {
-    text-align: center;
+    text-align: center;           /* match the desktop override's specificity */
   }
 
   .utci-search-wrap {

assets/css/ui.css

@@ -1126,6 +1126,26 @@
     margin: 0;
     transform: translateY(-50%) rotate(45deg);
   }
+
+  /* Profile cards are full-bleed image tiles, not slim label pills — the
+     block/ellipsis treatment above collapses their flex scene to 0 height
+     and hides the thumbnail. Restore the column layout for them. */
+  .cs-btn.profile-card {
+    display: flex !important;
+    flex-direction: column;
+    padding: 0 !important;
+  }
+  .cs-btn.profile-card .cs-btn-label {
+    width: auto;                 /* span the full width via its left/right pins */
+  }
+  .cs-btn.profile-card .cs-arrow {
+    top: auto;
+    bottom: 7px;
+    transform: rotate(45deg);    /* pinned bottom-right, not vertically centred */
+  }
+  .cs-wrap.open .cs-btn.profile-card .cs-arrow {
+    transform: rotate(225deg);   /* keep the open-state flip */
+  }
 }
 
 

assets/js/app.js

@@ -21,6 +21,7 @@
 // ════════════════════════════════════════════════════════════════════════
 
 import { h, render, Fragment } from '../vendor/preact.js';
+import { useState, useRef, useEffect } from '../vendor/preact-hooks.js';
 import htm from '../vendor/htm.js';
 import {
   utciCategory, UTCI_BANDS, bandGradient,
@@ -45,7 +46,7 @@ export function UTCIForecast() {
   const {
     location, setLocationAndSave,
     forecast, airQuality, loading, error, now, fetchedAt,
-    searchQuery, setSearchQuery, searchResults, searching,
+    searchQuery, setSearchQuery, searchResults, setSearchResults, searching,
     selectedDay, setSelectedDay,
     proPromptDay, setProPromptDay,
     proPromptSource, setProPromptSource,
@@ -85,6 +86,37 @@ export function UTCIForecast() {
     bannerSlideTo, dismissBanner,
   } = useAppState();
 
+  // Search is hidden by default and revealed via the magnifier next to the
+  // location. The input then overlays the location line to save space.
+  const [searchOpen, setSearchOpen] = useState(false);
+  const searchWrapRef = useRef(null);
+  const searchInputRef = useRef(null);
+
+  // Focus the input the moment the search opens.
+  useEffect(() => {
+    if (searchOpen) searchInputRef.current?.focus();
+  }, [searchOpen]);
+
+  // Close the search on outside-click or Escape, clearing any stray query.
+  useEffect(() => {
+    if (!searchOpen) return;
+    const onDown = (e) => {
+      if (searchWrapRef.current && !searchWrapRef.current.contains(e.target)) {
+        setSearchOpen(false);
+        setSearchQuery('');
+      }
+    };
+    const onKey = (e) => {
+      if (e.key === 'Escape') { setSearchOpen(false); setSearchQuery(''); }
+    };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [searchOpen, setSearchQuery]);
+
 	// Columns that mark the start of a logical group - used to draw a faint
 	// vertical border separating groups in the forecast table.
 	const GROUP_ORDER = {
@@ -317,8 +349,43 @@ export function UTCIForecast() {
               <span class="title-sun">SUN</span><span class="title-scope">Scope</span>
             </h1>
             <div class="utci-tagline">See the sun the way your skin does.</div>
-            <div class="utci-search-wrap">
+            <div class="utci-loc-search" ref=${searchWrapRef}>
+              <div class="utci-current-loc">
+                <button
+                  type="button"
+                  class="utci-loc-name"
+                  aria-label="Search for a town or city"
+                  aria-expanded=${searchOpen}
+                  onClick=${() => setSearchOpen((v) => !v)}
+                >
+                  <svg class="utci-loc-pin" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">
+                    <path fill="currentColor" d="M12 2c-3.87 0-7 3.13-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" />
+                    <circle cx="12" cy="9" r="2.5" fill="#fffcf2" />
+                  </svg>
+                  ${location.name}
+                </button>
+                <button
+                  type="button"
+                  class="utci-search-toggle"
+                  aria-label="Search for a town or city"
+                  aria-expanded=${searchOpen}
+                  onClick=${() => setSearchOpen((v) => !v)}
+                >
+                  <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+                    <circle cx="10.5" cy="10.5" r="6.5" fill="none" stroke="currentColor" stroke-width="2" />
+                    <line x1="15.5" y1="15.5" x2="21" y2="21" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                  </svg>
+                </button>
+                <span class="utci-loc-coords">
+                  ${location.lat.toFixed(3)}°, ${location.lon.toFixed(3)}°
+                </span>
+              </div>
+              ${fetchedAt && !loading && html`
+                <div class="utci-fetch-time">Last update: ${fetchedAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>`}
+              ${searchOpen && html`
+                <div class="utci-search-wrap utci-search-overlay">
                   <input
+                    ref=${searchInputRef}
                     class="utci-search"
                     type="text"
                     placeholder="Search any town or city…"
@@ -341,6 +408,7 @@ export function UTCIForecast() {
                             setSearchQuery('');
                             setSearchResults([]);
                             setSelectedDay(0);
+                            setSearchOpen(false);
                           }}
                         >
                           <div>${r.name}${r.admin1 ? `, ${r.admin1}` : ''}</div>
@@ -350,15 +418,8 @@ export function UTCIForecast() {
                         </div>`)}
                     </div>`}
                   ${searching && html`<div class="utci-searching">Searching…</div>`}
+                </div>`}
             </div>
-            <div class="utci-current-loc">
-              ↳ ${location.name}
-              <span class="utci-loc-coords">
-                ${location.lat.toFixed(3)}°, ${location.lon.toFixed(3)}°
-              </span>
-            </div>
-            ${fetchedAt && !loading && html`
-              <div class="utci-fetch-time">Last update: ${fetchedAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>`}
           </div>
 
           <div class="scope-col">

assets/js/config.js

@@ -83,31 +83,31 @@ export const FILTER_PROFILES = {
 // Places sub-variants - each has its own column set.
 // Selecting a variant applies its cols to visibleCols.
 export const OUTDOORS_VARIANTS = {
-  urban:    { name: 'Urban',         cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true,  cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: true,  uvB: false, burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: true,  vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: true,  pollen: false } },
+  urban:    { name: 'Urban',         scene: "url('assets/images/profiles/urban.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true,  cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: true,  uvB: false, burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: true,  vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: true,  pollen: false } },
-  beach:    { name: 'Beach',         cols: { hour: true, air: true, rh: false, dew: true,  wind: true, dir: true,  cloud: true, sun: true,  direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: true,  uvB: true,  burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
+  beach:    { name: 'Beach',         scene: "url('assets/images/profiles/beach.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: false, dew: true,  wind: true, dir: true,  cloud: true, sun: true,  direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: true,  uvB: true,  burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
-  events:   { name: 'Events',        cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true,  cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: true,  uvB: false, burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: true,  vehicleT: false, indoorT: false, managedT: false, vis: false, aqi: false, pollen: true  } },
+  events:   { name: 'Events',        scene: "url('assets/images/profiles/events.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true,  cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: true,  uvB: false, burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: true,  vehicleT: false, indoorT: false, managedT: false, vis: false, aqi: false, pollen: true  } },
-  festival: { name: 'Festival', cols: { hour: true, air: true, rh: false, dew: true,  wind: true, dir: true,  cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: true,  uvB: false, burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: true,  concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: false, aqi: true,  pollen: true  } },
+  festival: { name: 'Festival', scene: "url('assets/images/profiles/festival.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: false, dew: true,  wind: true, dir: true,  cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: true,  uvB: false, burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: true,  concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: false, aqi: true,  pollen: true  } },
-  wintersports: { name: 'Winter Sports', proOnly: true, cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true,  cloud: true, sun: true,  direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: true,  uvB: true,  burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
+  wintersports: { name: 'Winter Sports', proOnly: true, scene: "url('assets/images/profiles/winter.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true,  cloud: true, sun: true,  direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: true,  uvB: true,  burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
-  naturist:     { name: 'Naturist', proOnly: true, cols: { hour: true, air: true, rh: false, dew: true,  wind: true, dir: false, cloud: true, sun: true,  direct: false, diffuse: false, tmrt: false, delta: false, utci: true,  uvA: true,  uvB: true,  burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: false, aqi: true,  pollen: true  } },
+  naturist:     { name: 'Naturist', proOnly: true, scene: "url('assets/images/profiles/naturist.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: false, dew: true,  wind: true, dir: false, cloud: true, sun: true,  direct: false, diffuse: false, tmrt: false, delta: false, utci: true,  uvA: true,  uvB: true,  burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: false, aqi: true,  pollen: true  } },
-  sailing:      { name: 'Sailing',       proOnly: true, cols: { hour: true, air: true, rh: false, dew: true,  wind: true, dir: true,  cloud: true, sun: true,  direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: true,  uvB: false, burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
+  sailing:      { name: 'Sailing',       proOnly: true, scene: "url('assets/images/profiles/sailing.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: false, dew: true,  wind: true, dir: true,  cloud: true, sun: true,  direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: true,  uvB: false, burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
   // Places - free
-  park:         { name: 'Park / Picnic',              cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: false, aqi: false, pollen: true  } },
+  park:         { name: 'Park / Picnic',              scene: "url('assets/images/profiles/park.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: false, aqi: false, pollen: true  } },
-  forest:       { name: 'Forest / Woodland',          cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: true,  pollen: true  } },
+  forest:       { name: 'Forest / Woodland',          scene: "url('assets/images/profiles/forest.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: true,  pollen: true  } },
-  airport:      { name: 'Airport / Travel',           cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true,  cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: false, precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
+  airport:      { name: 'Airport / Travel',           scene: "url('assets/images/profiles/airport.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true,  cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: false, precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
   // Places - Pro
-  construction: { name: 'Construction',  proOnly: true, cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true,  cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: true,  uvA: false, uvB: false, burn: false, utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: true,  pollen: false } },
+  construction: { name: 'Construction',  proOnly: true, scene: "url('assets/images/profiles/construction.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true,  cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: true,  uvA: false, uvB: false, burn: false, utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: true,  pollen: false } },
   // Activities - free
-  cycling:      { name: 'Cycling',                    cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true,  cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
+  cycling:      { name: 'Cycling',                    scene: "url('assets/images/profiles/cycling.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true,  cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
-  running:      { name: 'Running',                    cols: { hour: true, air: true, rh: true,  dew: false, wind: true, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: true,  uvA: false, uvB: false, burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: false, aqi: false, pollen: true  } },
+  running:      { name: 'Running',                    scene: "url('assets/images/profiles/running.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: true,  dew: false, wind: true, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: true,  uvA: false, uvB: false, burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: false, aqi: false, pollen: true  } },
-  dogwalk:      { name: 'Dog Walking',                cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: false, aqi: false, pollen: true  } },
+  dogwalk:      { name: 'Dog Walking',                scene: "url('assets/images/profiles/walking.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: false, aqi: false, pollen: true  } },
   // Activities - Pro
-  hiking:       { name: 'Hiking',        proOnly: true, cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true,  cloud: true, sun: true,  direct: false, diffuse: false, tmrt: false, delta: false, utci: true,  uvA: true,  uvB: true,  burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
+  hiking:       { name: 'Hiking',        proOnly: true, scene: "url('assets/images/profiles/hiking.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true,  cloud: true, sun: true,  direct: false, diffuse: false, tmrt: false, delta: false, utci: true,  uvA: true,  uvB: true,  burn: true,  utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
-  photography:  { name: 'Photography',   proOnly: true, cols: { hour: true, air: true, rh: false, dew: false, wind: false, dir: false, cloud: true, sun: true,  direct: true,  diffuse: true,  tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: false, precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
+  photography:  { name: 'Photography',   proOnly: true, scene: "url('assets/images/profiles/photography.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: false, dew: false, wind: false, dir: false, cloud: true, sun: true,  direct: true,  diffuse: true,  tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: false, precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
-  fishing:      { name: 'Fishing', proOnly: true, cols: { hour: true, air: true, rh: false, dew: true,  wind: true, dir: true,  cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
+  fishing:      { name: 'Fishing', proOnly: true, scene: "url('assets/images/profiles/fishing.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: false, dew: true,  wind: true, dir: true,  cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
   // Work variants
-  market:       { name: 'Market Trading', proOnly: true, cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true,  cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
+  market:       { name: 'Market Trading', proOnly: true, scene: "url('assets/images/profiles/market.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true,  cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
-  windowcleaning: { name: 'Window Cleaning', proOnly: true, cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true,  cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
+  windowcleaning: { name: 'Window Cleaning', proOnly: true, scene: "url('assets/images/profiles/window.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true,  cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true,  aqi: false, pollen: false } },
-  office:         { name: 'Office',          proOnly: true, cols: { hour: true, air: true, rh: true,  dew: false, wind: false, dir: false, cloud: true, sun: true,  direct: true,  diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: true,  vis: false, aqi: true,  pollen: false } },
+  office:         { name: 'Office',          proOnly: true, scene: "url('assets/images/profiles/office.png') center / cover no-repeat, linear-gradient(160deg,#c2d4cc,#e2ece6)", cols: { hour: true, air: true, rh: true,  dew: false, wind: false, dir: false, cloud: true, sun: true,  direct: true,  diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true,  precip: true, precipProb: true,  soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: true,  vis: false, aqi: true,  pollen: false } },
 };
 
 // Pollen type options shown in the pulldown selector.