Add static map to front page (36).

4 files changed, 36 insertions, 6 deletions

diff --git a/web/cobrands/zurich/_zurich.scss b/web/cobrands/zurich/_zurich.scss
index b71670a92..cfc89e88e 100644
--- a/web/cobrands/zurich/_zurich.scss
+++ b/web/cobrands/zurich/_zurich.scss
@@ -8,9 +8,14 @@ a:hover {
     text-decoration: underline;
 }
 
+// mySociety addition for box shadow on front page with static image
+body.frontpage #zurich-footer-wrapper {
+    padding: 1px 0;
+    @include box-shadow(0 0 6px 1px #000);
+}
+
 #zurich-footer {
-    margin-top: 2em; // mySociety
-    margin-left: 12px; // mySociety
+    margin: 2em auto; // mySociety
     font-size: 67.5%;
     line-height: 1.5em;
     clear: both;
diff --git a/web/cobrands/zurich/layout.scss b/web/cobrands/zurich/layout.scss
index f87b7702a..91f5a2ffa 100644
--- a/web/cobrands/zurich/layout.scss
+++ b/web/cobrands/zurich/layout.scss
@@ -19,12 +19,12 @@ body {
         border: none;
     }
 }
-// Except on map pages
-body.mappage .content {
+// Except on map pages (which includes the front page)
+body.mappage .content, body.frontpage .content {
     @include box-shadow(0 0 6px 1px #000);
 }
 .ie6, .ie7, .ie8  {
-    body.mappage .content {
+    body.mappage .content, body.frontpage .content {
         border: 1px solid #666;
     }
 }
@@ -51,6 +51,27 @@ body.frontpage #site-logo, #site-logo {
     left: auto; // base set this to 0
 }
 
+// Static map on front page
+body.frontpage {
+    .table-cell {
+        background-position: 50% 117px;
+        background-repeat: no-repeat;
+        background-image: url(mapbg-1024.jpg);
+        @media all and (min-width: 1025px) {
+            background-image: url(mapbg-1600.jpg);
+        }
+        .content {
+            margin: 2em auto; // Spacing around front content on top of static map
+        }
+    }
+
+    #site-header {
+        height: 117px;
+        background-color: #fff;
+        @include box-shadow(0 0 6px 1px #000);
+    }
+}
+
 #site-logo-text {
     position: absolute;
     top: 0;
@@ -63,7 +84,11 @@ body.frontpage #site-logo, #site-logo {
 
 .nav-wrapper {
     .nav-wrapper-2 {
-        border-top: solid 18px white;
+        border-top: none;
+    }
+    .nav-wrapper-3 {
+        height: 99px;
+        padding-top: 18px;
     }
 }
 
diff --git a/web/cobrands/zurich/mapbg-1024.jpg b/web/cobrands/zurich/mapbg-1024.jpg
new file mode 100644
index 000000000..9adb82b98
--- /dev/null
+++ b/web/cobrands/zurich/mapbg-1024.jpg
diff --git a/web/cobrands/zurich/mapbg-1600.jpg b/web/cobrands/zurich/mapbg-1600.jpg
new file mode 100644
index 000000000..9321bd612
--- /dev/null
+++ b/web/cobrands/zurich/mapbg-1600.jpg