Fixed graphical glitches (hopefully).

assets/less/classes/auth.less

@@ -1,20 +1,12 @@
 .auth {
-    background: var(--background-colour);
     max-width: 400px;
     margin: 0 auto;
     margin-bottom: 2px;
 
     &__header {
-        background: var(--user-header) center / cover no-repeat, var(--background-pattern);
-        background-color: var(--accent-colour);
-        background-blend-mode: normal, multiply;
-
-        &__wrapper {
         display: flex;
         justify-content: center;
         padding: 20px;
-            background-image: linear-gradient(0deg, var(--background-colour-translucent), transparent);
-        }
     }
 
     &__warning {

assets/less/classes/container.less

@@ -1,5 +1,5 @@
 .container {
-    // todo: make this now bad
+    // todo: make this not bad
     background-image: linear-gradient(0deg, var(--background-colour-translucent), var(--background-colour-translucent));
     background-color: var(--accent-colour);
 

assets/less/classes/profile/header.less

@@ -3,10 +3,10 @@
     flex-direction: column;
     margin-bottom: 2px;
     color: #fff;
+    background-color: var(--background-colour);
 
-    background: var(--user-header) center / cover no-repeat, var(--background-pattern);
+    --profile-header-overlay-start: transparent;
-    background-color: var(--accent-colour);
+    --profile-header-overlay-stop: var(--background-colour-translucent-9);
-    background-blend-mode: normal, multiply;
 
     @media (max-width: @site-mobile-width) {
         height: auto;
@@ -14,6 +14,25 @@
         background-position: center top;
     }
 
+    &__background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: var(--accent-colour) var(--background-pattern);
+        background-blend-mode: multiply;
+    }
+
+    &--has-header {
+        --profile-header-overlay-start: var(--background-colour-translucent-3);
+    }
+
+    &--has-header &__background {
+        background: var(--user-header) center / cover no-repeat;
+        background-blend-mode: unset;
+    }
+
     &__avatar {
         --avatar-checked-colour: fade(#000, 13%);
 
@@ -85,7 +104,7 @@
         display: flex;
         align-items: flex-end;
         padding: 20px;
-        background-image: linear-gradient(0deg, var(--background-colour-translucent), transparent);
+        background-image: linear-gradient(0deg, var(--profile-header-overlay-stop), var(--profile-header-overlay-start));
 
         &__content {
             margin: 5px 10px;
@@ -98,7 +117,7 @@
 
         &__relation {
             font-variant: all-small-caps;
-            background: var(--background-colour-translucent);
+            background: var(--profile-header-overlay-stop);
             border-radius: 2px;
             line-height: 1.2em;
             padding: 1px 5px 4px;
@@ -113,7 +132,7 @@
 
     &__options {
         min-height: 62px;
-        background-color: var(--background-colour-translucent);
+        background-color: var(--profile-header-overlay-stop);
         padding: 0 20px;
         display: flex;
         justify-content: space-between;

assets/less/classes/usercard.less

@@ -6,6 +6,7 @@
     color: #fff;
     text-shadow: 0 1px 4px #111;
     box-shadow: 0 1px 2px #000;
+    background-color: var(--accent-colour);
 
     &:hover {
         box-shadow: 0 1px 4px #000;
@@ -14,19 +15,19 @@
 
     &__background {
         position: absolute;
-        left: 0;
         top: 0;
-        height: 100%;
+        left: 0;
         width: 100%;
-        background: var(--user-header) center / cover no-repeat, var(--background-pattern);
+        height: 100%;
-        background-color: var(--accent-colour);
+        background: var(--accent-colour) var(--background-pattern);
-        background-blend-mode: normal, multiply;
+        background-blend-mode: multiply;
+        mask-image: linear-gradient(0deg, transparent 0%, var(--background-colour) 90%);
+        -webkit-mask-image: linear-gradient(0deg, transparent 0%, var(--background-colour) 90%);
     }
 
     &__container {
         height: 100%;
         width: 100%;
-        //border: 1px solid var(--accent-colour);
         pointer-events: none;
         display: flex;
         flex-direction: column;

assets/less/main.less

@@ -8,8 +8,19 @@
     --site-max-width: 1200px;
 
     --background-image: initial;
-    --background-colour: #111;
+
-    --background-colour-translucent: fade(#111, 93%);
+    @background-colour: #111;
+    --background-colour: @background-colour;
+    --background-colour-translucent-1: fade(@background-colour, 10%);
+    --background-colour-translucent-2: fade(@background-colour, 20%);
+    --background-colour-translucent-3: fade(@background-colour, 30%);
+    --background-colour-translucent-4: fade(@background-colour, 40%);
+    --background-colour-translucent-5: fade(@background-colour, 50%);
+    --background-colour-translucent-6: fade(@background-colour, 60%);
+    --background-colour-translucent-7: fade(@background-colour, 70%);
+    --background-colour-translucent-8: fade(@background-colour, 80%);
+    --background-colour-translucent-9: fade(@background-colour, 90%);
+    --background-colour-translucent: var(--background-colour-translucent-9); // switch to the numbered ones
     --background-pattern: url('/images/clouds.png') fixed;
 
     --text-colour: #fff;

templates/auth/macros.twig

@@ -12,10 +12,10 @@
             {{ input_hidden('auth[redirect]', redirect) }}
         {% endif %}
 
+        <div class="container__title">
+            <div class="container__title__background"></div>
             <div class="auth__header">
-            <div class="auth__header__wrapper">
+                <div class="avatar auth__avatar js-login-avatar" style="background-image:url('/profile.php?u=0&amp;m=avatar');"></div>
-                <div class="avatar auth__avatar js-login-avatar"
-                    style="background-image:url('/profile.php?u=0&amp;m=avatar');"></div>
             </div>
         </div>
 

templates/user/_layout/header.twig

@@ -1,6 +1,8 @@
 {% from '_layout/input.twig' import input_checkbox_raw %}
 
 <div class="container profile__header">
+    <div class="profile__header__background"></div>
+
     <div class="profile__header__details">
         <div class="profile__header__avatar">
             {% if is_editing and perms.edit_avatar %}