Refactor signup page layout and logo positioninguh

uh

app/pages/signup/signup.html

@@ -6,10 +6,12 @@
 {% endblock %}
 {% block content %}
 <div id="main">
-    <div class="signup-container d-flex align-items-center justify-content-center">
-        <div style="padding: 10px;min-width:300px;" class="ps-md-4 pe-md-4">
-            <h1>Nexium</h1>
-            <p>2018+ with freedom.</p>
+    <div class="signup-wrapper" style="position:relative;">
+        <!-- logo moved outside the signup card so it can overlap/escape the container -->
+        <img src="/static/img/LoginLogo.png" alt="NEXIUM" class="logo-outside d-none d-lg-block" />
+        <div class="signup-container d-flex align-items-center justify-content-center">
+            <div style="padding: 10px;min-width:300px;" class="ps-md-4 pe-md-4">
+                <p class="signup-subtitle">2018+ with freedom.</p>
             {% with messages = get_flashed_messages() %}
             {% if messages %}
             <div>

app/static/css/signup.css

@@ -79,3 +79,24 @@ a:hover {
     color: rgb(3, 133, 255) !important;
     transition: 0.2s;
 }
+
+/* Logo outside the signup card so it can overlap/escape the container */
+.signup-wrapper { position: relative; }
+.logo-outside {
+  position: absolute;
+  right: -40px; /* push beyond the card -- adjust to taste */
+  top: 50%;
+  transform: translateY(-50%);
+  max-width: 320px;
+  width: auto;
+  height: auto;
+  z-index: 0; /* behind the card; use higher if you want it above */
+  pointer-events: none;
+}
+.signup-container { position: relative; z-index: 1; }
+.signup-subtitle { text-align: center; margin-bottom: 12px; color: rgba(230,238,248,0.9); font-size: small; }
+
+@media (max-width: 992px) {
+  .logo-outside { display: none; }
+  .signup-container { min-width: 320px; }
+}