fix(ui): implement sticky footer and update docs

css/style.css

@@ -136,6 +136,11 @@ a:hover {
   flex-direction: column;
 }
 
+.content-wrapper {
+  flex: 1; /* Pushes footer down */
+  width: 100%;
+}
+
 .card {
   background: var(--bg-secondary);
   border: 1px solid var(--border);
@@ -449,7 +454,7 @@ textarea:-webkit-autofill:focus {
 /* Footer */
 footer {
   text-align: center;
-  margin-top: 6rem; /* Even more separation from buttons */
+  margin-top: auto; /* Sticky bottom logic */
   padding-top: 2rem;
   padding-bottom: 2rem;
   color: var(--fg-tertiary);

login.html

@@ -28,6 +28,8 @@
             </div>
         </div>
 
+        <!-- Main Content Wrapper -->
+        <main class="content-wrapper">
             <!-- Header -->
             <header class="header">
                 <img src="img/logo-twinpath.svg" alt="" data-asset="logo" data-brand-name class="logo-img">
@@ -58,7 +60,6 @@
                     </div>
                 </div>
 
-            <!-- Login Form -->
                 <!-- Login Form (Voucher & Member Only) -->
                 <form name="login" action="$(link-login-only)" method="post" onsubmit="return doLogin()">
                     <input type="hidden" name="dst" value="$(link-orig)">
@@ -156,6 +157,7 @@
                     </div>
                 </div>
             </div>
+        </main>
 
         <footer>
             <p><span data-i18n="powered_by">Powered by</span> <span data-brand-name></span> • <a href="#" data-brand-link="credit" target="_blank" data-brand-credit></a></p>