BIG update

stuff

app/pages/login/login.html

@@ -37,7 +37,6 @@
                 <p>Don't have an account? <a href="/signup">Signup</a>
             </div>
         </div>
-        <img style="aspect-ratio: 7/4;min-height: 317px;max-height: 390px;" class="d-lg-block d-none" src="/static/img/LoginImage2.png" alt="Login Image">
     </div>
 </div>
 {% endblock %}

app/pages/signup/signup.html

@@ -11,9 +11,9 @@
         <img src="/static/img/LoginLogo.png" alt="NEXIUM" class="logo-outside d-none d-lg-block" />
         <div class="signup-row">
             <div class="signup-card">
+                <p class="signup-subtitle">2016+ with freedom.</p>
                 <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>
@@ -48,9 +48,6 @@
                     </div>
             </div>
             </div>
-            <div class="signup-visual d-none d-lg-block">
-                <img style="width:100%;height:100%;object-fit:cover;min-height:400px;max-height:550px;" src="/static/img/LoginImage2.png" alt="Signup Image">
-            </div>
         </div>
     </div>
 </div>

app/static/css/signup.css

@@ -11,6 +11,54 @@ body {
     min-height: 100vh;
 }
 
+.logo-outside {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    max-width: 500px;
+    width: 500px;
+    height: auto;
+    z-index: 0;
+    pointer-events: none;
+    margin-top: -100px;
+    margin-right: 120px;
+}
+
+.form-control {
+    display: block;
+    width: 100%;
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--bs-body-color);
+    background-color: var(--bs-body-bg);
+    background-clip: padding-box;
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border-radius: var(--bs-border-radius);
+    max-width: 300px;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+
+.signup-subtitle {
+    text-align: center;
+    margin-bottom: 5px;
+    color: rgb(255 255 255 / 90%);
+    font-size: larger;
+    margin-left: 800px;
+}
+
+.element.style {
+    min-width: 300px;
+}
+
+.signup-wrapper img {
+    min-width: 700px;
+}
+
 .signup-container {
     min-width: 330px;
     display: inline-block;
@@ -96,11 +144,6 @@ a:hover {
 .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; }
-}
-
 /* Two-column layout for signup: left card + right visual */
 .signup-row {
   display: flex;