bid_main/static/bid_main/styles/_auth.sass

@@ -9,8 +9,9 @@ body.is-auth-page
     justify-content: center
 
   .box
-    backdrop-filter: blur(var(--spacer-4))
+    @extend .bg-filter-blur
-    background-color: rgba(white, .66)
+    @extend .bg-noise
+
     box-shadow: 0 var(--spacer) var(--spacer-5) rgba(black, .15)
     margin-bottom: var(--spacer-1)
     padding: var(--spacer)

bid_main/static/bid_main/styles/main.sass

@@ -396,3 +396,27 @@ svg.bi
 +media-lg
   .nav-global-container
     max-width: 117.0rem
+
+/* Utilities. */
+// TODO: make bg filter blur uniform in project
+// TODO: @web-assets move to web-assets
+.bg-filter-blur
+  background-color: transparent
+  backdrop-filter: blur(var(--spacer-4))
+  position: relative
+
+  &::before
+    background-color: var(--box-bg-color)
+    border-radius: var(--border-radius)
+    content: ""
+    height: 100%
+    left: 0
+    opacity: .8
+    position: absolute
+    top: 0
+    width: 100%
+    z-index: -1
+
+.bg-noise
+  // SVG generated at https://fffuel.co/nnnoise
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.102' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='15' specularConstant='0.75' specularExponent='20' lighting-color='%23f5a623' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='100'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3CfeColorMatrix type='saturate' values='0' x='0%25' y='0%25' width='100%25' height='100%25' in='specularLighting' result='colormatrix'%3E%3C/feColorMatrix%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='transparent'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23f5a623' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E")