hideout.scss

.hideout {
  position: relative;
  min-height: 100vh;
  background: $hideout-color;
  .heading {
    padding: 20px 80px;
    text-align: center;
    color: white;
    p {
      margin-top: 50px;
    }
  }
  .uploader {
    margin-top: 60px;
    input {
      display: block;
      position: relative;
      width: get-vw(190px);
      height: get-vw(190px);
      margin: 10px auto 40px;
      padding: get-vw(10px);
      border: 7px dashed white;
      outline: none;
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../../assets/transport256.svg') $hideout-color no-repeat center/90%;
        box-sizing: border-box;
      }
      &:after {
        @include align-hack;
        content: 'Drag and drop or click to plunder booty';
        top: auto;
        bottom: -40px;
        font: 400 18px 'Anonymous Pro';
        color: white;
        white-space: nowrap;
      }
    }
    progress {
      display: block;
      position: relative;
      width: get-vw(600px);
      height: 10px;
      margin: 15px auto;
      -webkit-appearance: none;
      &::-webkit-progress-bar {
        background: none;
        border-radius: 6px;
      }
      &::-webkit-progress-value {
        background: linear-gradient(90deg, #FDFC47 10%, #24FE41 90%);
        border-radius: 6px;
      }
    }
    a {
      display: block;
      padding: 10px;
      color: white;
      text-align: center;
    }
  }
}

main.scss

@import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css);
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro:400,700);

/**
 * Variables
 */

$primary-color: #D08504;
$secondary-color: #29407C;
$support-color: #757575;
$accent-color: #660000;
$hideout-color: #263238;
$warn-color: #f44336;
$success-color: #77D658;

$tablet: "max-width: 800px";
$mobile: "max-width: 640px";

/**
 * Mixins & Functions
 */

@function get-vw($target) {
  $vw-context: (1000*.01) * 1px;
  @return ($target/$vw-context) * 1vw;
}

@mixin vw($base-size, $break-size, $breakpoint) {
  font-size: get-vw($base-size);
  letter-spacing: -1px;
  @media screen and ($breakpoint) {
    font-size: $break-size;
  }
}

@mixin responsive-font($init, $scaled) {
  font-size: $init;
  @media screen and ($tablet) {
    font-size: $scaled;
  }
}

@mixin responsive-window($bg) {
  position: relative;
  height: 100vh;
  background: $bg;
}

@mixin align-hack {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/**
 * Globals
 */

body {
  position: relative;
  min-height: 100vh;
  background: $primary-color;
  font-family: 'Anonymous Pro';
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

h1 {
  font-size: get-vw(80px);
}

h2 {
  font-size: get-vw(65px);
}

h3 {
  @include vw(50px, 26px, $tablet);
}

h4 {
  @include vw(35px, 22px, $tablet);
}

h5 {
  @include vw(25px, 20px, $tablet);
}

h6 {
  @include vw(20px, 18px, $tablet);
}

p, span, a {
  @include responsive-font(20px, 14px);
  line-height: 1.25;
  letter-spacing: 1px;
}

.loader, .loader:before, .loader:after {
  width: get-vw(10px);
  height: 0;
  background: white;
  opacity: 0;
  animation-fill-mode: both;
  animation: loading 1.8s infinite ease-in-out;
}

.loader {
  @include align-hack;
  animation-delay: 0.16s;
  &:before, &:after {
    content: '';
    position: absolute;
    top: 0;
  }
  &:before {
    left: get-vw(-20px);
  }
  &:after {
    left: get-vw(20px);
    animation-delay: 0.32s;
  }
}

@keyframes loading {
  0%,
  80%,
  100% {height: get-vw(40px); opacity: 1;}
  40% {height: 0; opacity: 0;}
}

@import 'components/piratexchange.scss';
@import 'components/hideout.scss';

piratexchange.scss

.landing {
  .splash {
    display: flex;
    position: relative;
    height: 100vh;
    background: $primary-color;
    align-items: center;
    justify-content: space-around;
    .hero {
      align-self: center;
      h1, p {
        margin: 15px;
        text-align: center;
        color: white;
      }
      span {
        position: absolute;
        bottom: 15px;
        right: 15px;
        color: white;
      }
      button {
        display: block;
        margin: 20px auto;
        padding: 30px;
        background: $success-color;
        color: white;
        font-size: 28px;
        font-weight: 700;
        border: none;
        outline: none;
      }
    }
  }
  .callout {
    @extend .splash;
    background: $secondary-color;
    text-align: center;
    .hero {
      padding: 0 120px;
    }
    .icon {
      width: get-vw(150px);
      height: get-vw(150px);
    }
    figure {
      display: inline-block;
      margin: 0 auto;
      padding: get-vw(10px);
      border-radius: 100%;
    }
    p {
      @include vw(30px, 20px, $tablet);
    }
  }
  .info {
    @extend .splash;
    background: $accent-color;
    text-align: center;
    h4 {
      color: white;
    }
  }
  .footer {
    @extend .splash;
    height: 500px;
    background: darken($support-color, 30%);
  }
}