style existing Art Radar MailChimp signup section

assets/_src/less/ascribe.less

@@ -19,6 +19,7 @@
 @import 'ascribe/_helpers.less';
 @import 'ascribe/_buttons.less';
 @import 'ascribe/_media.less';
+@import 'ascribe/_forms.less';
 
 @import 'ascribe/_grid.less';
 @import 'ascribe/_footer.less';
@@ -412,63 +413,22 @@
         &:extend(.list-unstyled all);
     }
 }
-.contact {
-    label {
-        &:extend(.small);
 
-        &.required {
-            &:after {
-                content: '*';
-                color: @pink;
-            }
-        }
-    }
-    input, textarea {
-        margin-bottom: 20px;
-        padding: 10px;
-        color: @greyText;
-        width: 80%;
-        margin-top: 5px;
-        border: 1px solid @greyHr;
-        outline: none;
 
-        &[aria-invalid=true] {
-            border: 1px solid @pink;
-        }
-    }
-    input[type=submit] {
-        &:extend(.button, .button.blue);
-        width: auto;
-    }
-    .contact-point {
-
-        h1 {
-            &:extend(.fontRegular);
-            font-size: 19px;
-            color: @pink;
-            text-align: left;
-            margin-bottom:0;
-        }
-    }
-    .required-info {
-        .copyTextSmall;
+//
+// Contact
+//
+.contact-point {
+    h1 {
+        &:extend(.fontRegular);
+        font-size: 19px;
         color: @pink;
-    }
-    .wpcf7-not-valid-tip {
-        .copyTextSmall;
-        color: @pink;
-        margin-top: -20px;
-        margin-bottom: 10px;
-    }
-    div.wpcf7-validation-errors {
-        border: none;
-        padding:0;
-        margin:0;
-    }
-    div.wpcf7-response-output, div.wpcf7-display-none, div.wpcf7-mail-sent-ok {
-        border: 0!important;
+        text-align: left;
+        margin-bottom:0;
     }
 }
+
+
 .press-articles {
     text-align: center;
 

assets/_src/less/ascribe/_blog.less

@@ -93,6 +93,39 @@
 }
 
 
+//
+// Art Radar MailChimp Signup
+//
+#mc-embedded-subscribe-form {
+    position: relative;
+
+    .button {
+        &:extend(.button.small all);
+        font-size: @font-size-base;
+        height: 46px;
+        border: 1px solid @greyHr;
+    }
+
+    // try to deal with the existing messy markup
+    #mce-EMAIL {
+        margin-bottom: 0;
+    }
+    .button { width: 100%; }
+
+    @media (@screen-sm) {
+        #mce-EMAIL {
+            width: 70%;
+        }
+        .button {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 31%;
+        }
+    }
+}
+
+
 //
 // Pagination
 //

assets/_src/less/ascribe/_forms.less

@@ -0,0 +1,57 @@
+label {
+    &:extend(.small);
+
+    &.required {
+        &:after {
+            content: '*';
+            color: @pink;
+        }
+    }
+}
+
+.form-control {
+    margin: 0 0 (@spacer / 2) 0;
+    padding: 10px;
+    color: @greyText;
+    width: 100%;
+    border: 1px solid @greyHr;
+    outline: none;
+
+    &[aria-invalid=true] {
+        border: 1px solid @pink;
+    }
+}
+
+input[type="text"],
+input[type="email"],
+input[type="number"],
+input[type="range"],
+input[type="search"],
+textarea {
+    &:extend(.form-control all);
+}
+
+input[type=submit] {
+    &:extend(.button, .button.blue);
+    width: auto;
+}
+
+.required-info {
+    .copyTextSmall;
+    color: @pink;
+}
+
+.wpcf7-not-valid-tip {
+    .copyTextSmall;
+    color: @pink;
+    margin-top: -20px;
+    margin-bottom: 10px;
+}
+div.wpcf7-validation-errors {
+    border: none;
+    padding:0;
+    margin:0;
+}
+div.wpcf7-response-output, div.wpcf7-display-none, div.wpcf7-mail-sent-ok {
+    border: 0!important;
+}