Add gray noise background

This should fix #1305

Background images are moved to pseudo elements before .card-list to not
interfere with background noise.

Reviewed-by: Joseph Nuthalapati <njoseph@thoughtworks.com>

static/themes/default/css/plinth.css

@@ -60,8 +60,7 @@ body {
     position: relative;
     font-family: Lato, sans-serif;
     font-size: 15px;
-    background-repeat: no-repeat;
-    background-position: 22.5px 75px;
+    background: url('../img/noise.png') #f1f1f1;
 }
 
 .multiple-checkbox li {
@@ -319,11 +318,13 @@ a.menu_link_active {
 
 .card {
     text-align: center;
-    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.08);
+    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.12);
     transition: box-shadow 0.3s ease-in-out;
     width: 16rem;
     padding: 0;
     margin: 0 10px 20px;
+    border: none;
+    border-radius: 8px;
 }
 
 .card:hover {
@@ -387,15 +388,28 @@ a.menu_link_active {
     margin: 0;
 }
 
-.background-logo {
+.background-logo .card-list:before,
+.background-apps .card-list:before,
+.background-system .card-list:before {
+    position: relative;
+    width: 40rem;
+    height: 40rem;
+    margin-left: -40rem;
+    margin-bottom: -40rem;
+    left: 30rem;
+    top: -2rem;
+    content: " ";
+    background-size: 100%;
     background-image: url('../img/freedombox-logo-background.svg');
+    background-repeat: no-repeat;
+    z-index: -1;
 }
 
-.background-apps {
+.background-apps .card-list:before {
     background-image: url('../img/apps-background.svg');
 }
 
-.background-system {
+.background-system .card-list:before {
     background-image: url('../img/system-background.svg');
 }