refactor: match login screen to Paper layout

web/themes/custom/doljak_theme/css/base/auth-styling.css

@@ -158,6 +158,13 @@
   width: 100%;
 }
 
+.auth-card > .auth-form,
+.auth-card form.auth-form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
 .auth-card__title {
   color: var(--color-text-primary);
   font-family: var(--font-display);
@@ -328,6 +335,13 @@
   margin-bottom: 0;
 }
 
+.auth-form .form-actions {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  width: 100%;
+}
+
 .auth-form__row {
   align-items: center;
   display: flex;
@@ -369,6 +383,127 @@
   text-decoration-color: var(--color-accent-dark);
 }
 
+@media (min-width: 1200px) {
+  .auth-page--login .auth-page__inner {
+    align-items: start;
+    gap: 0;
+    grid-template-columns: 470px 467px;
+    justify-content: space-between;
+    max-width: 1280px;
+    padding: 101px 0 98px;
+  }
+
+  .auth-page--login .auth-hero {
+    max-width: 470px;
+  }
+
+  .auth-page--login .auth-hero__eyebrow {
+    color: var(--color-accent);
+    font-size: 12px;
+    letter-spacing: 6px;
+    line-height: 1.2;
+    margin-bottom: 21px;
+  }
+
+  .auth-page--login .auth-hero__title {
+    font-size: 48px;
+    line-height: 1.16;
+    margin-bottom: 20px;
+    max-width: 470px;
+  }
+
+  .auth-page--login .auth-hero__desc {
+    font-size: 16px;
+    line-height: 1.75;
+    margin-bottom: 20px;
+    max-width: 430px;
+  }
+
+  .auth-page--login .auth-hero__stats {
+    gap: 14px;
+  }
+
+  .auth-page--login .auth-stat {
+    background: var(--color-bg-hero);
+    border: 0;
+    border-radius: 20px;
+    min-height: 110px;
+    min-width: 140px;
+    padding: 24px 20px 18px;
+  }
+
+  .auth-page--login .auth-stat strong {
+    font-size: 24px;
+    line-height: 1.2;
+    margin-bottom: 4px;
+  }
+
+  .auth-page--login .auth-stat span {
+    font-size: 13px;
+    line-height: 1.55;
+  }
+
+  .auth-page--login .auth-card {
+    border: 0;
+    border-radius: 28px;
+    box-shadow: 0 30px 64px rgba(65, 64, 64, 0.12);
+    max-width: 467px;
+    min-height: 504px;
+    padding: 34px;
+  }
+
+  .auth-page--login .auth-card__title {
+    font-size: 32px;
+    line-height: 1.15;
+    margin-bottom: 5px;
+  }
+
+  .auth-page--login .auth-card__subtitle {
+    font-size: 14px;
+    line-height: 1.45;
+    margin-bottom: 22px;
+  }
+
+  .auth-page--login .auth-field {
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+
+  .auth-page--login .auth-field label {
+    font-size: 13px;
+    line-height: 1.3;
+  }
+
+  .auth-page--login .auth-field input {
+    border: 0;
+    border-radius: 15px;
+    font-size: 14px;
+    min-height: 53px;
+    padding: 14px 16px;
+  }
+
+  .auth-page--login .auth-form__row {
+    margin-bottom: 15px;
+  }
+
+  .auth-page--login .auth-link {
+    font-size: 13px;
+  }
+
+  .auth-page--login .btn {
+    min-height: 55px;
+  }
+
+  .auth-page--login .btn--primary {
+    margin-bottom: 0;
+  }
+
+  .auth-page--login .btn--secondary {
+    margin-top: 20px;
+    min-height: 52px;
+  }
+}
+
 .auth-form__footer-text {
   color: var(--color-text-secondary);
   font-family: var(--font-body);

web/themes/custom/doljak_theme/templates/form--user-login-form.html.twig

@@ -23,7 +23,7 @@
       <h2 class="auth-card__title">Login</h2>
       <p class="auth-card__subtitle">Use your account name and password.</p>
 
-      <form {{ attributes }}>
+      <form{{ attributes }}>
         {{ element.name }}
         <div class="auth-form__row">
           <a href="/user/password" class="auth-link">Forgot password?</a>
@@ -33,12 +33,10 @@
         {{ element.form_token }}
         {{ element.form_build_id }}
         {{ element.form_id }}
-
-        </form>
-        <a href="/user/register" class="btn btn--secondary btn--full">Create Account</a>
+      </form>
 
+      <a href="/user/register" class="btn btn--secondary btn--full">Create Account</a>
     </div>
 
   </div>
 </section>
-

web/themes/custom/doljak_theme/templates/form--user-logout-confirm.html.twig

@@ -13,11 +13,12 @@
         Confirm to leave your account on this device.
       </p>
 
-      {{ element.actions }}
+      <form{{ attributes }}>
+        {{ element.actions }}
+        {{ element.form_token }}
+        {{ element.form_build_id }}
+        {{ element.form_id }}
+      </form>
     </div>
   </div>
 </section>
-
-{{ element.form_token }}
-{{ element.form_build_id }}
-{{ element.form_id }}

web/themes/custom/doljak_theme/templates/form--user-pass.html.twig

@@ -9,17 +9,21 @@
     <form {{ attributes }}>
     <div class="auth-card auth-card--centered">
 
+      <form{{ attributes }}>
         {{ element.name }}
         {{ element.form_token }}
         {{ element.form_build_id }}
         {{ element.form_id }}
 
         {{ element.actions }}
+        {{ element.form_token }}
+        {{ element.form_build_id }}
+        {{ element.form_id }}
 
         <a href="/user/login" class="auth-link auth-link--center">Back to login</a>
+      </form>
 
     </div>
     </form>
   </div>
 </section>
-

web/themes/custom/doljak_theme/templates/form--user-register-form.html.twig

@@ -13,6 +13,7 @@
       <h2 class="auth-card__title">Create Account</h2>
       <p class="auth-card__subtitle">Basic information to get started.</p>
 
+      <form{{ attributes }}>
 
         {{ element.account.name }}
 
@@ -21,6 +22,9 @@
         {{ element.account.pass }}
 
         {{ element.actions }}
+        {{ element.form_token }}
+        {{ element.form_build_id }}
+        {{ element.form_id }}
 
         {{ element.form_token }}
         {{ element.form_build_id }}
@@ -30,8 +34,8 @@
           Already have an account? <a href="/user/login" class="auth-link">Sign in</a>
         </p>
 
+      </form>
     </div>
     </form>
   </div>
 </section>
-