<!-- this is the markup, keep your hands off! -->

<form>
  <label for="email">Subscribe to our mailing list</label>
  <input type="email" value="" name="email" placeholder="email address" required>
  <input type="submit" value="Subscribe" name="subscribe">
</form>

// this is the styles panel, knock yourself out!

@import url(https://fonts.googleapis.com/css?family=Lora|pen+Sans:400,700);

// Variables

$base-font-family-fallback: sans-serif;
$base-font-family: 'Open Sans';
$base-font-size: 1em;
$base-font-weight: 400;
$base-line-height: 1.5em;

$headline-font-family: 'Lora';

// Colors

$color-base: #3d3d3d;
$color-base-bg: #eee;

$color-primary: #25656e;

$color-placeholder: #adadad;

$color-btn: $color-base-bg;
$color-btn-bg: $color-primary;
$color-btn-bg-hover: darken($color-btn-bg, 10%);

$color-btn-bg-disabled: #adadad;
$color-btn-bg-disabled-hover: darken($color-btn-bg-disabled, 10%);

$color-form-bg: #fff;

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    transition-timing-function: cubic-bezier(.215, .610, .355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}


// Base

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;

  &:before,
  &:after {
    box-sizing: border-box;
  }

}

html,
body {
  height: 100%;
}

html {
  -webkit-font-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background: $color-base-bg url('https://i.imgur.com/V8OMcDb.jpg') no-repeat 50% 50%;
  background-size: cover;
  color: $color-base;
  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family, $base-font-family-fallback;
  margin: 0;
  position: relative;

  &:after {
    background-color: rgba(0, 0, 0, .3);
    content: '';
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
  }

}

input {
  border: 0;
  border-radius: 0;
  color: inherit;
  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family, $base-font-family-fallback;
  margin: 0;
  outline-color: $color-primary;
  padding: 0;
  transition: background-color .3s;
  outline: 0;

  &::placeholder {
    color: $color-placeholder;
    font-style: italic;
    text-transform: capitalize;
  }

  &[type="submit"] {
    -webkit-appearance: button;
    background-color: $color-btn-bg;
    color: $color-btn;
    cursor: pointer;

    &:focus,
    &:hover {
      background: $color-btn-bg-hover;
    }

  }

}

label {
  color: inherit;
  display: inline-block;
  font: inherit;
  margin: 0;
  max-width: 100%;
  padding: 0;
  width: auto;
}

// Form

form {
  animation-duration: .75s;
  animation-name: bounceIn;
  background-color: $color-form-bg;
  bottom: 0;
  box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
  height: 34rem;
  left: 0;
  margin: auto;
  max-width: 34rem;
  padding: 6rem;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  z-index: 1;

  &:after {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAQAAAAm93DmAAABg0lEQVR4Ac3XsWpqMQDG8U8Eubi7OYmro14dvsVZD9y+hUPt6gvUOtnRJxAENx/AB+jaSXB00snFQSin4fARTjEE0mS4/Lcm+SEeT5ICYMYPNojIGkbJWHB35vyMJBtGyI2UgXvmRQc2f801eZCyB+uWPIaT4o4Uxzr4k2wFc60yR4Am/uFOfzyxHcS1edLKnVEg0FRzkGFcjbCgyK0Gz+z4IdXhWSu24gQqVrnWhIufFHfR7DWrRBl0k10v13VyZVBVuNLEK/8S7szIVbNWrBAu0E32nVzfyblBke9acOPwYXTIm0aX4vygWpRIN7cgbH5QvVlyRKiR5eZEAKhmWnxnRlD7UtGMCACd5D+Tn1OgvxchX6a8aErEgOCEeakJEQGqjeU2hPp/PuH04Tt81kjkU34yRT/lxL/DuX1TxoQa2zflNQBM/y5XuIzYbbz74YBwNPDsh2l3bP+Z0iM89TxnSrpTL/5cvjjO5cQ3h/R3m+S3r+T3w/Q32PR37OT/BSTuGwMIz+SLW3jxAAAAAElFTkSuQmCC) no-repeat;
    background-size: 100%;
    content: '';
    cursor: pointer;
    height: 1.5rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 1.5rem;
  }

  label,
  input {
    display: block;
  }

  label {
    font-family: $headline-font-family;
    font-size: 3rem;
    line-height: 1.2em;
    margin-bottom: 3rem;
  }

  input {
    margin: 1rem 0;
    padding: 1.5rem 2rem;
    text-align: center;
    width: 100%;
  }

  input[type="email"] {
    border: 1px solid $color-base;
    font-family: $headline-font-family;

    &:focus {
      border-color: $color-primary;
    }

    &:valid {

      & + input[type="submit"] {
        background-color: $color-btn-bg;
        cursor: pointer;

        &:hover {
          background-color: $color-btn-bg-hover
        }

      }

    }

  }

  input[type="submit"] {
    background-color: $color-btn-bg-disabled;
    cursor: not-allowed;
    font-weight: bold;
    letter-spacing: .25em;
    text-transform: uppercase;

    &:focus,
    &:hover {
      background-color: $color-btn-bg-disabled-hover;
    }

  }

}

// Enter a valid email to see the form on a valid input

// CREDITS

// Challenge:
// WebdesingTuts+: https://webdesign.tutsplus.com/articles/codepen-challenge-2-style-a-signup-form--cms-23678

// Fonts:
// Open Sans: https://www.google.com/fonts/specimen/Open+Sans
// Lora: https://www.google.com/fonts/specimen/Lora

// Images:
// Background by Unsplash: https://download.unsplash.com/13/unsplash_523ae1f5502d6_1.JPG

// Animation:
// Animate.css: https://github.com/daneden/animate.css

// Inspiration:
// Subscribe Form by Jenya Zaycev: https://dribbble.com/shots/1975004-Subscribe-form