site/index.html

@@ -24,8 +24,8 @@
           <a href="#library">Library</a>
         </div>
         <div class="nav-auth">
-          <a class="nav-login" href="https://app.diagrav.com/">Log in</a>
+          <a class="nav-login app-link" href="https://app.diagrav.com/">Log in</a>
-          <a class="btn btn-primary btn-sm" href="https://app.diagrav.com/">Sign up</a>
+          <a class="btn btn-primary btn-sm app-link" href="https://app.diagrav.com/">Sign up</a>
         </div>
       </div>
     </div>
@@ -158,7 +158,7 @@
       <div class="strip">
         <h2>Stop guessing which cable you need</h2>
         <p>Plan the wiring first. Buy the right cables once.</p>
-        <a class="btn btn-primary btn-lg strip-cta" href="https://app.diagrav.com/">Sign up</a>
+        <a class="btn btn-primary btn-lg strip-cta app-link" href="https://app.diagrav.com/">Sign up</a>
       </div>
     </div>
   </section>
@@ -170,5 +170,21 @@
     </div>
   </footer>
 
+  <script>
+    // site/ has no build step (served as-is, no per-environment templating),
+    // so the app links above are hardcoded to production in the markup —
+    // this is the one place that needs to differ on staging.diagrav.com,
+    // rewritten at load time rather than maintaining a second copy of this
+    // file. Defaults to production's app host for anything else (the real
+    // domain, a bare file preview, etc.) — the safe assumption everywhere
+    // that isn't specifically the staging hostname.
+    (function () {
+      var appHost = location.hostname === 'staging.diagrav.com' ? 'staging-app.diagrav.com' : 'app.diagrav.com';
+      document.querySelectorAll('.app-link').forEach(function (a) {
+        a.href = 'https://' + appHost + '/';
+      });
+    })();
+  </script>
+
 </body>
 </html>