2 files changed, 79 insertions, 0 deletions
diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index 0cc23c539..6088f842c 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -299,3 +299,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 9a8768562..9c7f575a2 100644
--- a/web/cobrands/fixmystreet.com/layout.scss
+++ b/web/cobrands/fixmystreet.com/layout.scss
@@ -171,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;