RC!

Payment setup

assets/css/base.css

@@ -34,7 +34,7 @@
 
 /* ── 1. FONTS + RESET ───────────────────────────────────────────────── */
 
-@import "https://fonts.bunny.net/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,700;9..144,900&family=JetBrains+Mono:wght@400;600&family=Manrope:wght@400;500;600;700&display=swap";
+@import "https://fonts.bunny.net/css2?family=Fraunces:ital,wght@0,300;0,500;0,700;0,900;1,300;1,500;1,700;1,900&family=JetBrains+Mono:wght@400;600&family=Manrope:wght@400;500;600;700&display=swap";
 
 *,
 *:before,

assets/css/header.css

@@ -39,9 +39,9 @@
   font-style: normal;
 }
 
-.utci-title .title-scope {              /* "Scope"  —  italic */
+.utci-title .title-scope {              /* "Scope"  —  italic light, matching about page */
   font-style: italic;
-  font-weight: 900;
+  font-weight: 300;
   color: #1e1208;
 }
 

assets/js/app.js

@@ -113,7 +113,19 @@ export function UTCIForecast() {
   // FLIP THE `false` BELOW TO `true` TO PREVIEW THE PRO EXPERIENCE.
   // When this is wired to real billing/auth, replace `useState(false)`
   // with a check against the logged-in user.
-  const [isPro, setIsPro] = useState(false);
+  //const [isPro, setIsPro] = useState(false);
+  const [isPro, setIsPro] = useState(() => {
+    // Check URL param first (just returned from Stripe checkout)
+    const params = new URLSearchParams(window.location.search);
+    if (params.get('pro') === '1') {
+      localStorage.setItem('sunscope_pro', '1');
+      // Clean the URL so the param doesn't stay visible
+      window.history.replaceState({}, '', window.location.pathname);
+      return true;
+    }
+    // Check localStorage (returning Pro subscriber)
+    return localStorage.getItem('sunscope_pro') === '1';
+  });
 
   // How many days the free tier shows. Days beyond this get a 🔒.
   // Bump this number if you want to give free users more access.
@@ -910,7 +922,7 @@ export function UTCIForecast() {
                       color: '#c8922a',
                       marginTop: '10px',
                     }}>
-                      £2 / month  ·  launching soon
+                      £2 / month  ·  cancel any time
                     </div>
                   </div>
                   <div style=${{
@@ -920,7 +932,9 @@ export function UTCIForecast() {
                     alignItems: 'flex-end',
                   }}>
                     <a
-                      href=${`mailto:fraxle@yahoo.co.uk?subject=${encodeURIComponent('SunScope Extra — notify me at launch')}&body=${encodeURIComponent('Hi — please let me know when SunScope Extra launches. (Triggered by ' + dayLong + ')')}`}
+                      href="https://buy.stripe.com/test_28E00j4xr6Es0izeE3fw400"
+					   target="_blank"
+						rel="noopener noreferrer"
                       style=${{
                         display: 'inline-block',
                         padding: '10px 18px',
@@ -935,7 +949,22 @@ export function UTCIForecast() {
                         whiteSpace: 'nowrap',
                       }}
                     >
-                      Notify me at launch
+                      Subscribe — £2/month
+                    </a>
+                    <a
+                      href="/restore.php"
+                      style=${{
+                        fontFamily: 'JetBrains Mono, monospace',
+                        fontSize: '10px',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.14em',
+                        color: '#c8922a',
+                        textDecoration: 'none',
+                        borderBottom: '1px solid rgba(200,146,42,0.4)',
+                        paddingBottom: '1px',
+                      }}
+                    >
+                      Already subscribed? Restore access →
                     </a>
                     <button
                       onClick=${() => setProPromptDay(null)}