3.3.2

Header menu and footer tidy

assets/about.css

@@ -56,6 +56,15 @@ header a.active { color: #c8922a; }
   display: inline-flex;
   align-items: center;
 }
+/* Invisible bridge so hover doesn't break between toggle and menu */
+.nav-dropdown::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  height: 4px;
+}
 .nav-dropdown-toggle .caret {
   display: inline-block;
   margin-left: 4px;
@@ -68,9 +77,9 @@ header a.active { color: #c8922a; }
 }
 .nav-dropdown-menu {
   position: absolute;
-  top: 100%;
+  top: calc(100% - 1px);
-  right: 0;
+  left: 50%;
-  margin-top: 10px;
+  margin-top: 0;
   background: #f5edd6;
   border: 1px solid #e0d0a8;
   border-radius: 8px;
@@ -81,7 +90,7 @@ header a.active { color: #c8922a; }
   padding: 6px;
   opacity: 0;
   visibility: hidden;
-  transform: translateY(-4px);
+  transform: translateX(-50%) translateY(-4px);
   transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
   z-index: 110;
 }
@@ -89,7 +98,7 @@ header a.active { color: #c8922a; }
 .nav-dropdown:focus-within .nav-dropdown-menu {
   opacity: 1;
   visibility: visible;
-  transform: translateY(0);
+  transform: translateX(-50%) translateY(0);
 }
 .nav-dropdown-menu a {
   text-transform: none;

assets/css/base.css

@@ -127,6 +127,15 @@ body {
   display: inline-flex;
   align-items: center;
 }
+/* Invisible bridge so hover doesn't break between toggle and menu */
+.utci-topnav .nav-dropdown::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  height: 4px;
+}
 .utci-topnav .nav-dropdown-toggle .caret {
   display: inline-block;
   margin-left: 4px;
@@ -139,9 +148,9 @@ body {
 }
 .utci-topnav .nav-dropdown-menu {
   position: absolute;
-  top: 100%;
+  top: calc(100% - 1px);
-  right: 0;
+  left: 50%;
-  margin-top: 10px;
+  margin-top: 0;
   background: #f5edd6;
   border: 1px solid #e0d0a8;
   border-radius: 8px;
@@ -152,7 +161,7 @@ body {
   padding: 6px;
   opacity: 0;
   visibility: hidden;
-  transform: translateY(-4px);
+  transform: translateX(-50%) translateY(-4px);
   transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
   z-index: 110;
 }
@@ -160,7 +169,7 @@ body {
 .utci-topnav .nav-dropdown:focus-within .nav-dropdown-menu {
   opacity: 1;
   visibility: visible;
-  transform: translateY(0);
+  transform: translateX(-50%) translateY(0);
 }
 .utci-topnav .nav-dropdown-menu a {
   text-transform: none;

assets/css/ui.css

@@ -1269,13 +1269,34 @@
 
 /* ── 11. ABOUT + FOOTER ─────────────────────────────────────────────── */
 
-.utci-about {
+.utci-bottom-grid {
+  display: flex;
+  gap: 24px;
   margin-top: 28px;
+  align-items: stretch;
+}
+
+.utci-about {
+  flex: 0 0 920px;
   padding: 24px 28px;
   background: #fdf8ee;
   border: 1.5px solid #c9b08a;
 }
 
+.utci-reading-box {
+  flex: 1;
+  min-width: 0;
+  padding: 24px 28px;
+  background: #fdf8ee;
+  border: 1.5px solid #c9b08a;
+}
+
+.utci-reading-box .utci-about-text {
+  max-width: none;
+  margin-left: 0;
+  margin-right: 0;
+}
+
 .utci-about-heading {
   font-family: Fraunces, serif;
   font-size: 18px;
@@ -1328,7 +1349,6 @@
 .utci-footer {
   margin-top: 36px;
   padding-top: 20px;
-  border-top: 1px solid #d4c0a0;
   font-family: Manrope, sans-serif;
   font-size: 10px;
   font-weight: 700;
@@ -1392,6 +1412,14 @@
 
 @media (max-width: 800px) {
 
+  .utci-bottom-grid {
+    flex-direction: column;
+  }
+
+  .utci-about {
+    flex: none;
+  }
+
   .utci-app {
     padding: 52px 10px 32px;
   }

assets/js/app.js

@@ -1873,45 +1873,52 @@ export function UTCIForecast() {
                 </div>`;
             })()}
 
-        <div class="utci-about">
+        <div class="utci-bottom-grid">
-          <h2 class="utci-about-heading">What is SunScope?</h2>
+          <div class="utci-about">
-          <p class="utci-about-text">
+            <h2 class="utci-about-heading">What is SunScope?</h2>
-            SunScope is a free hourly weather forecast built around <strong>felt temperature</strong>,
+            <p class="utci-about-text">
-            not just air temperature. It uses the <strong>Universal Thermal Climate Index (UTCI)</strong>
+              SunScope is a free hourly weather forecast built around <strong>felt temperature</strong>,
-            — the biometeorological standard used in heat-health warning systems worldwide — as its
+              not just air temperature. It uses the <strong>Universal Thermal Climate Index (UTCI)</strong>
-            foundation, combining air temperature, humidity, wind, and solar radiation into a single
+              — the biometeorological standard used in heat-health warning systems worldwide — as its
-            honest number. Then it goes further. Our <strong>SunSoak</strong> index layers three extra
+              foundation, combining air temperature, humidity, wind, and solar radiation into a single
-            dimensions on top: a rain and snow penalty so wet, windy days read as cold as they feel;
+              honest number. Then it goes further. Our <strong>SunSoak</strong> index layers three extra
-            an <strong>environment modifier</strong> that adjusts the solar load for where you actually
+              dimensions on top: a rain and snow penalty so wet, windy days read as cold as they feel;
-            are — forest canopy, alpine altitude, lakeside glare, shaded riverbank, desert ground heat;
+              an <strong>environment modifier</strong> that adjusts the solar load for where you actually
-            and the full radiant heat absorbed from surrounding surfaces. One number that honestly
+              are — forest canopy, alpine altitude, lakeside glare, shaded riverbank, desert ground heat;
-            answers: <em>what will my body actually feel out there?</em>
+              and the full radiant heat absorbed from surrounding surfaces. One number that honestly
-          </p>
+              answers: <em>what will my body actually feel out there?</em>
-          <p class="utci-about-text">
+            </p>
-            Beyond SunSoak, SunScope calculates <strong>vehicle cabin heat</strong> (choose your
+            <p class="utci-about-text">
-            vehicle type; toggle windows open), <strong>indoor temperature</strong> (seven building
+              Beyond SunSoak, SunScope calculates <strong>vehicle cabin heat</strong> (choose your
-            types including office blocks; managed heatwave mode), <strong>urban concrete surface
+              vehicle type; toggle windows open), <strong>indoor temperature</strong> (seven building
-            temperature</strong>, <strong>UV index and sunburn time</strong> by skin type, and
+              types including office blocks; managed heatwave mode), <strong>urban concrete surface
-            <strong>soil temperature and moisture</strong> for farming and motorhome use. Switch
+              temperature</strong>, <strong>UV index and sunburn time</strong> by skin type, and
-            profiles — Places, Activities, Work — to see the data that matters for your situation,
+              <strong>soil temperature and moisture</strong> for farming and motorhome use. Switch
-            or go Custom and build your own view.
+              profiles — Places, Activities, Work — to see the data that matters for your situation,
-            <a href="./about.html" class="utci-about-link">Learn more →</a>
+              or go Custom and build your own view.
-          </p>
+              <a href="./about.html" class="utci-about-link">Learn more →</a>
+            </p>
+          </div>
+          <div class="utci-reading-box">
+            <h2 class="utci-about-heading">Reading the table</h2>
+            <p class="utci-about-text">
+              SunSoak is the number to watch — it reflects everything your body
+              actually experiences, not just what the thermometer says. A large gap between SunSoak and Air
+              temperature means solar radiation is doing significant work on your body. On clear sunny days
+              that gap can exceed 10 °C even at modest air temperatures. The environment modifier in the
+              SunSoak dropdown adjusts the solar load for your surroundings — switch it to match where you are
+              for the most accurate reading.
+              ${' '}<a onClick=${openWelcome}
+                 style=${{ color: '#9a7d5a', borderBottom: '1px solid rgba(154,125,90,0.4)', paddingBottom: '1px', textDecoration: 'none', cursor: 'pointer' }}>
+                How it works →
+              </a>
+            </p>
+          </div>
         </div>
 
-        <div class="utci-footer">
+        ${isPro && html`
-          <em>Reading the table.</em> SunSoak is the number to watch — it reflects everything your body
+          <div class="utci-footer">
-          actually experiences, not just what the thermometer says. A large gap between SunSoak and Air
+            <div style=${{ marginTop: '10px', paddingTop: '10px', borderTop: '1px solid #d4c0a0', textAlign: 'center' }}>
-          temperature means solar radiation is doing significant work on your body. On clear sunny days
-          that gap can exceed 10 °C even at modest air temperatures. The environment modifier in the
-          SunSoak dropdown adjusts the solar load for your surroundings — switch it to match where you are
-          for the most accurate reading.
-          ${' '}<a onClick=${openWelcome}
-             style=${{ color: '#9a7d5a', borderBottom: '1px solid rgba(154,125,90,0.4)', paddingBottom: '1px', textDecoration: 'none', cursor: 'pointer' }}>
-            How it works →
-          </a>
-          ${isPro && html`
-            <div style=${{ marginTop: '10px', paddingTop: '10px', borderTop: '1px solid #d4c0a0' }}>
               SunScope Extra is active.
               <a href="https://billing.stripe.com/p/login/9B63cw7vl8k15Ei9DQd7q00"
                  target="_blank" rel="noopener noreferrer"
@@ -1919,8 +1926,8 @@ export function UTCIForecast() {
                 Manage or cancel subscription →
               </a>
             </div>
-          `}
+          </div>
-        </div>
+        `}
 
       <footer class="utci-site-footer">
         © 2026 <a href="https://fraxle.net" target="_blank" rel="noopener noreferrer">Fraxle.NET</a>