[www] Fix email-capture-form cross browser issues (#3553)

* pull shared <input>/<button> styles into constant
* add default background color
* add placeholder styles
* use Futura instead of Spectral for form inputs* help Safari rendering <button> and <input> at equal height (tested in v11.0.2)
* add focus styles
* add focus styles to CtaButton

Author: fk

www/src/components/cta-button.js

@@ -33,14 +33,20 @@ const CtaButton = ({ to, overrideCSS, children }) => (
         fontWeight: `normal`,
         backgroundColor: `transparent`,
         backgroundSize: `30px 30px`,
-        transiton: `all .15s ease-out`,
-        ":hover": {
+        transition: `all ${presets.animation.speedDefault} ${
+          presets.animation.curveDefault
+        }`,
+        ":hover, &:focus": {
           backgroundSize: `30px 30px`,
           backgroundColor: presets.brand,
           backgroundImage: `linear-gradient(45deg, rgba(0,0,0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.1) 75%, transparent 75%, transparent)`,
           color: `#fff`,
           animation: `${stripeAnimation} 2.8s linear infinite`,
         },
+        ":focus": {
+          outline: 0,
+          boxShadow: `0 0 0 0.2rem rgba(${presets.shadowColor}, .25)`,
+        },
         ":after": {
           content: ``,
           display: `block`,

www/src/components/email-capture-form.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { rhythm } from "../utils/typography"
+import { rhythm, options } from "../utils/typography"
 import presets from "../utils/presets"
 import jsonp from "jsonp"
 import { validate } from "email-validator"
@@ -10,6 +10,23 @@ let stripeAnimation = css.keyframes({
   "100%": { backgroundPosition: `30px 60px` },
 })
 
+const formInputDefaultStyles = {
+  backgroundColor: `#fff`,
+  border: `1px solid ${presets.lightPurple}`,
+  borderRadius: presets.radius,
+  color: presets.bodyColor,
+  fontFamily: options.headerFontFamily.join(`,`),
+  padding: rhythm(1 / 2),
+  verticalAlign: `middle`,
+  transition: `all ${presets.animation.speedDefault} ${
+    presets.animation.curveDefault
+  }`,
+  "::placeholder": {
+    color: presets.brandLight,
+    opacity: 1,
+  },
+}
+
 // Mailchimp endpoint
 // From: https://us17.admin.mailchimp.com/lists/integration/embeddedcode?id=XXXXXX
 // Where `XXXXXX` is the MC list ID
@@ -117,27 +134,41 @@ class EmailCaptureForm extends React.Component {
                   placeholder="[email protected]"
                   onChange={this._handleEmailChange}
                   css={{
-                    padding: rhythm(1 / 2),
+                    ...formInputDefaultStyles,
                     width: `250px`,
-                    color: presets.bodyColor,
+                    ":focus": {
+                      color: presets.bodyColor,
+                      borderColor: presets.brand,
+                      outline: 0,
+                      boxShadow: `0 0 0 0.2rem rgba(${
+                        presets.shadowColor
+                      }, .25)`,
+                    },
                   }}
                 />
                 <button
                   type="submit"
                   onClick={this._handleFormSubmit}
                   css={{
-                    borderRadius: `2px`,
-                    border: `1px solid ${presets.brand}`,
+                    ...formInputDefaultStyles,
+                    borderColor: presets.brand,
+                    color: presets.brand,
                     cursor: `pointer`,
-                    padding: rhythm(1 / 2),
-                    margin: `${rhythm(1 / 2)} 0 0 ${rhythm(1 / 2)}`,
-                    ":hover": {
+                    fontWeight: `bold`,
+                    marginLeft: rhythm(1 / 2),
+                    ":hover, &:focus": {
                       backgroundSize: `30px 30px`,
                       backgroundColor: presets.brand,
                       backgroundImage: `linear-gradient(45deg, rgba(0,0,0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.1) 75%, transparent 75%, transparent)`,
                       color: `#fff`,
                       animation: `${stripeAnimation} 2.8s linear infinite`,
                     },
+                    ":focus": {
+                      outline: 0,
+                      boxShadow: `0 0 0 0.2rem rgba(${
+                        presets.shadowColor
+                      },.25)`,
+                    },
                   }}
                 >
                   Subscribe