Revamp onboarding page styling

pikit-web/onboarding/index.html

@@ -10,14 +10,21 @@
     <main class="card">
       <header>
         <div class="dot"></div>
-        <h1>Secure connection to your Pi-Kit</h1>
+        <h1>Welcome to your Pi-Kit</h1>
       </header>
 
-      <p>
-        You’re on your Pi-Kit. Everything stays on your local network. Let’s switch to the
-        secure (HTTPS) dashboard.
+      <p class="welcome">Great news — you’re already on your Pi-Kit and it’s responding.</p>
+      <p class="subtle">
+        Everything stays on your local network. Let’s move you to the secure (HTTPS) dashboard so you
+        can manage Pi-Kit safely.
       </p>
 
+      <div class="badges">
+        <span class="badge"><span class="dot"></span> Local-only traffic</span>
+        <span class="badge"><span class="dot"></span> Works for Pi-Kit & DietPi dashboards</span>
+        <span class="badge"><span class="dot"></span> HTTPS ready once trusted</span>
+      </div>
+
       <section class="actions">
         <button id="continueBtn">Continue to secure dashboard</button>
         <a class="ghost" id="downloadCa" href="/assets/pikit-ca.crt" download>Download Pi-Kit CA</a>
@@ -29,7 +36,7 @@
           <li>Brave/Chrome: click <strong>Advanced</strong> → <strong>Proceed</strong>.</li>
           <li>Firefox: click <strong>Advanced</strong> → <strong>Accept the Risk & Continue</strong>.</li>
         </ul>
-        <p>This is safe for your own Pi on your own network.</p>
+        <p>This warning is expected the first time. It’s safe for your own Pi on your own network.</p>
       </section>
 
       <section class="steps">
@@ -55,9 +62,7 @@
         </details>
       </section>
 
-      <p class="footnote">
-        Once trusted, this page will auto-forward you to the secure dashboard.
-      </p>
+      <p class="footnote">Once trusted, this page will auto-forward you to the secure dashboard.</p>
     </main>
 
     <script>