Embed Brevo signup form inline with site-matched styling and CSP update

Author: ccross2

src/app.html

@@ -15,7 +15,7 @@
     <link rel="preload" href="/fonts/GeistMono-Variable.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
 
     <!-- Security (meta-enforced; complements Cloudflare response headers) -->
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data: https:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self' mailto:" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://sibforms.com; style-src 'self' 'unsafe-inline' https://sibforms.com; font-src 'self' https://assets.brevo.com; img-src 'self' data: https:; connect-src 'self' https://f4c90f0b.sibforms.com; frame-ancestors 'none'; base-uri 'self'; form-action 'self' mailto: https://f4c90f0b.sibforms.com" />
     <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
     <meta http-equiv="X-Content-Type-Options" content="nosniff" />
 

src/routes/augmentum/+page.svelte

@@ -2,6 +2,17 @@
   <title>Augmentum OS — Sovereign Command Infrastructure | Sovren Software</title>
   <meta name="description" content="Augmentum OS is your command center. Voice-native interface. Biometric-secured access. Local AI co-pilot. UX, privacy, and security — none sacrificed. Ships Summer 2026." />
   <link rel="canonical" href="https://sovren.software/augmentum" />
+  <link rel="stylesheet" href="https://sibforms.com/forms/end-form/build/sib-styles.css" />
+  <script>
+    window.REQUIRED_CODE_ERROR_MESSAGE = 'Please choose a country code';
+    window.LOCALE = 'en';
+    window.EMAIL_INVALID_MESSAGE = window.SMS_INVALID_MESSAGE = "The information provided is invalid. Please review the field format and try again.";
+    window.REQUIRED_ERROR_MESSAGE = "This field cannot be left blank.";
+    window.GENERIC_INVALID_MESSAGE = "The information provided is invalid. Please review the field format and try again.";
+    window.translation = { common: { selectedList: '{quantity} list selected', selectedLists: '{quantity} lists selected', selectedOption: '{quantity} selected', selectedOptions: '{quantity} selected' } };
+    var AUTOHIDE = Boolean(0);
+  </script>
+  <script defer src="https://sibforms.com/forms/end-form/build/main.js"></script>
   <meta property="og:title" content="Augmentum OS — One Operator. Total Authority." />
   <meta property="og:description" content="Voice-native command interface. Biometric-secured sessions. Local AI co-pilot. UX, privacy, and security — none sacrificed. Sovereign infrastructure for high-leverage operators." />
   <meta property="og:url" content="https://sovren.software/augmentum" />
@@ -77,8 +88,28 @@
         sovereign stack.
       </p>
 
-      <div class="launch-links">
-        <a class="btn-primary" href={AUGMENTUM_SIGNUP_URL} target="_blank" rel="noreferrer">GET THE BRIEFING →</a>
+      <div class="brevo-form-wrap">
+        <div id="sib-form-container" class="sib-form-container">
+          <div id="error-message" class="sib-form-message-panel brevo-msg brevo-msg--error">
+            <div class="sib-form-message-panel__text sib-form-message-panel__text--center">
+              <span class="sib-form-message-panel__inner-text">Your subscription could not be saved. Please try again.</span>
+            </div>
+          </div>
+          <div id="success-message" class="sib-form-message-panel brevo-msg brevo-msg--success">
+            <div class="sib-form-message-panel__text sib-form-message-panel__text--center">
+              <span class="sib-form-message-panel__inner-text">Confirmed. You will receive the launch briefing.</span>
+            </div>
+          </div>
+          <form id="sib-form" method="POST" action="https://f4c90f0b.sibforms.com/serve/MUIFAAbBH-WyHvhepdhs6G8ul1wze6MjoVvTKJ8hy6wQ2pt2zfKhS72lm7K5SfgHHreybw_QGra18wfbFENLUX33U10YYUe1aPoQOEePElxdHbiM2uGL0Sdsei-N34xBCkoktWbqbtQe1cMW95PLNJ4gd9cZ_YonM0j3W1TrUXhliIJyTXuJ7u4B8pL9aH8uFVKQbzNfUWpWw_ovuA==" data-type="subscription" class="brevo-form">
+            <div class="brevo-field-row">
+              <input class="brevo-input" type="text" id="EMAIL" name="EMAIL" autocomplete="off" placeholder="YOUR EMAIL ADDRESS" data-required="true" required />
+              <button class="btn-primary brevo-submit" form="sib-form" type="submit">SUBSCRIBE →</button>
+            </div>
+            <div class="entry__error entry__error--primary brevo-error-label" aria-live="polite"></div>
+            <input type="text" name="email_address_check" value="" class="input--hidden" style="display:none" />
+            <input type="hidden" name="locale" value="en" />
+          </form>
+        </div>
       </div>
 
       <p class="launch-note">Double opt-in enabled. Unsubscribe anytime.</p>
@@ -129,22 +160,92 @@
     color: var(--text-secondary);
   }
 
-  .launch-links {
-    display: flex;
-    gap: var(--space-lg);
-    flex-wrap: wrap;
-  }
-
   .launch-note {
     color: var(--text-muted);
     font-size: var(--fs-label);
     letter-spacing: var(--ls-wider);
     text-transform: uppercase;
   }
 
+  .brevo-form-wrap {
+    max-width: 560px;
+  }
+
+  .brevo-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+  }
+
+  .brevo-field-row {
+    display: flex;
+    gap: var(--space-sm);
+    flex-wrap: wrap;
+  }
+
+  .brevo-input {
+    flex: 1;
+    min-width: 0;
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    font-size: var(--fs-body-sm);
+    letter-spacing: var(--ls-wider);
+    padding: 0.75rem 1rem;
+    outline: none;
+    transition: border-color 0.15s;
+  }
+
+  .brevo-input::placeholder {
+    color: var(--text-muted);
+  }
+
+  .brevo-input:focus {
+    border-color: var(--text-primary);
+  }
+
+  .brevo-submit {
+    white-space: nowrap;
+  }
+
+  .brevo-error-label {
+    font-size: var(--fs-body-xs);
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
+    min-height: 1.2em;
+  }
+
+  .brevo-msg {
+    display: none;
+    padding: var(--space-sm) var(--space-md);
+    font-family: var(--font-mono);
+    font-size: var(--fs-body-sm);
+    letter-spacing: var(--ls-default);
+    border: 1px solid var(--border);
+  }
+
+  .brevo-msg--error {
+    color: var(--text-secondary);
+    border-color: var(--border);
+  }
+
+  .brevo-msg--success {
+    color: var(--text-primary);
+    border-color: var(--text-primary);
+  }
+
   @media (max-width: 768px) {
     .launch-briefing {
       padding: var(--space-5xl) var(--space-xl);
     }
+
+    .brevo-field-row {
+      flex-direction: column;
+    }
+
+    .brevo-submit {
+      width: 100%;
+    }
   }
 </style>