2 files changed, 111 insertions, 6 deletions

diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index 0cc23c539..b78d5ce5b 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -49,6 +49,30 @@ svg|g.site-logo__svg {
     @include svg-background-image("/cobrands/fixmystreet/images/site-logo");
 }
 
+// Big green banner A/B test.
+#map_box .big-green-banner {
+    position: absolute;
+    left: 50%;
+    bottom: 80px; // above #sub_map_links
+    transform: translateX(-50%);
+    margin: 0;
+    font-size: 1.2em;
+    line-height: 1.3em;
+    padding: 0.6em 1em 0.5em;
+    border-radius: 5px; // match .big-hide-pins-link
+    background-image: none; // remove "arrow" image
+
+    @media (min-width: 64em) {
+        bottom: 32px; // match #sub_map_links
+        left: calc( ( 100% - 220px ) / 2 );
+        max-width: calc( 100% - 300px );
+    }
+
+    @media (min-width: 82em) {
+        left: 50%;
+    }
+}
+
 .next-steps {
   margin: 0 -1em; // counteract padding on parent
   background-color: #faf7e2;
@@ -299,3 +323,67 @@ html.lazyload .js-lazyload {
     margin-bottom: 0;
   }
 }
+
+.postcode-form-test {
+    margin: 0 -1em;
+    padding: 1em;
+    background-color: $primary;
+    color: $primary_text;
+
+    label {
+        margin: 0;
+    }
+
+    // Lots of !important flags here to overpower
+    // selectors like `#front-main a#geolocate_link` and
+    // `body.fullwidthpage #front-main a#geolocate_link`
+    // in the core and fixmystreet.com styles.
+    #geolocate_link {
+        background: transparent !important;
+        border: none;
+        height: auto !important;
+        margin-top: 0 !important;
+        padding: 1em !important;
+
+        &:before {
+            vertical-align: -0.3em;
+        }
+    }
+}
+
+// Overloaded selector to beat input[type="text"]
+input.postcode-form-test__postcode {
+    max-width: 100%;
+    width: 30em;
+    margin: 0.5em auto 0 auto;
+    padding: 0.75em;
+    border: 1px solid darken($primary, 10%);
+    box-shadow: 0 1px 1px rgba(#000, 0.2);
+}
+
+.postcode-form-test__buttons {
+    margin: 1em -10px 0 -10px;
+
+    // Browsers without flex support will just lay out the buttons
+    // side-by-side, breaking onto two lines at narrow widths.
+    @include flex-container();
+    @include justify-content(center);
+
+    $btn-blue: #469bfc;
+
+    .btn {
+        color: #fff !important;
+        background: $btn-blue;
+        background-image: linear-gradient($btn-blue, darken($btn-blue, 5%));
+        border: none;
+        border-radius: 2px;
+        text-shadow: 0 1px 1px rgba(0,0,0,0.2);
+        box-shadow: 0 1px 1px rgba(0,0,0,0.2);
+        margin: 0 10px 10px 10px;
+
+        &:hover, &:focus {
+            background-color: darken($btn-blue, 5%);
+            background-image: linear-gradient(darken($btn-blue, 5%), darken($btn-blue, 10%));
+        }
+    }
+}
diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
index 0e37c9723..9c7f575a2 100644
--- a/web/cobrands/fixmystreet.com/layout.scss
+++ b/web/cobrands/fixmystreet.com/layout.scss
@@ -53,6 +53,8 @@
   font-style: normal;
 }
 
+$body-font: MuseoSans, Helmet, Freesans, sans-serif;
+
 /* Opera has a bug (from around 10.5 upwards to current 11.6) with showing the
  * table caption *at all* if the header is set to a font-face :( */
 noindex:-o-prefocus, #site-header {
@@ -122,17 +124,17 @@ body.fullwidthpage {
         h1 {
             font-size: 3em;
             font-weight: bold;
-            font-family: MuseoSans,Helmet,Freesans,sans-serif;
+            font-family: $body-font;
         }
         h2 {
-            font-family: MuseoSans,Helmet,Freesans,sans-serif;
+            font-family: $body-font;
         }
         #postcodeForm {
             div {
                 font-size: 1.3em;
                 width: 24em;
                 label {
-                    font-family: MuseoSans,Helmet,Freesans,sans-serif;
+                    font-family: $body-font;
                 }
                 input#pc {
                     color: #777;
@@ -147,13 +149,13 @@ body.fullwidthpage {
                     font-size: 1.1em;
                     height: 2.4em;
                     width: 3.5em;
-                    font-family: MuseoSans,Helmet,Freesans,sans-serif;
+                    font-family: $body-font;
                     font-weight: bold;
                 }
             }
         }
         a#geolocate_link {
-            font-family: MuseoSans,Helmet,Freesans,sans-serif;
+            font-family: $body-font;
             background: url(images/locate-me.png) $left 0 no-repeat;
             height: 34px;
             padding-#{$left}: 24px;
@@ -169,6 +171,21 @@ body.fullwidthpage {
     }
 }
 
+.postcode-form-test {
+    background: transparent;
+    padding-top: 1.5em;
+}
+
+// Overloaded selector to beat input[type="text"]
+input.postcode-form-test__postcode {
+    max-width: 25em; // down from 27em, now that "GO" button has gone
+    font-size: 1.2em;
+}
+
+.postcode-form-test__buttons .btn {
+    font-size: 1.2em;
+}
+
 body.frontpage {
     #site-logo {
         margin: 2em 0;
@@ -207,7 +224,7 @@ body.frontpage {
 }
 
 .next-steps__step {
-  font-family: MuseoSans,Helmet,Freesans,sans-serif;
+  font-family: $body-font;
   float: $left;
   width: 33%;
   padding: 1.8em;