station 0.0.120 → 0.0.121

data/lib/nexmo_developer/app/webpacker/stylesheets/layout/_footer.scss

@@ -1,33 +1,37 @@
 #footer {
+  min-height: 336px;
   background: $black;
   border-radius: 4px;
   color: rgba($white, 0.7);
-  padding: $spacing*2 0 $spacing;
-  margin-top: $spacing;
   line-height: 1.8;
   z-index: 2;
-  flex: 0 0 100%;
   width: 100%;
 
+  @media #{$L-plus} {
+    padding: 0 95px;
+  }
+
   .container {
+    background: $black;
     display: flex;
+    margin: 80px auto;
     flex-wrap: wrap;
 
+    @media #{$S-only} {
+      margin: 40px auto;
+    }
+
     > div {
       flex: 3;
-      margin-right: 2.5%;
       min-width: 150px;
       margin-bottom: $spacing;
     }
 
-    #footer-support {
-      flex: 2;
-    }
-
     #footer-outbound-links {
-      flex: 4;
+      display: flex;
+      flex-direction: column;
       min-width: 260px;
-      text-align: center;
+      align-items: center;
 
       h5 {
         margin-bottom: 0px;
@@ -40,6 +44,10 @@
       a {
         display: flex;
       }
+
+      @media #{$S-only} {
+        align-items: flex-start;
+      }
     }
 
     @include tablet {
@@ -47,12 +55,7 @@
         flex-grow: 1.45;
       }
 
-      #footer-support {
-        flex: 3;
-      }
-
       #footer-outbound-links {
-        border-top: 1px solid $gray;
         margin-top: $spacing;
         flex: none;
         width: 100%;
@@ -60,28 +63,36 @@
     }
   }
 
+  .Vlt-col {
+    @media #{$S-only} {
+      margin-bottom: 32px;
+    }
+  }
+
   h5 {
     color: $white;
+    line-height: 24px;
+    padding-bottom: 8px;
   }
 
   a {
     color: rgba($white, 0.7);
     font-size: 1.4rem;
     display: block;
+    line-height: 14px;
 
     &:hover {
       color: $white;
     }
   }
+
+  p {
+    color: $white;
+  }
 }
 
 #footer-logo {
   margin: 0 auto $spacing;
-  max-width: 350px;
-
-  .Nxd-product__separator {
-    margin: 0 10px;
-  }
 
   .Nxd-product__title {
     align-items: baseline;
@@ -89,7 +100,12 @@
   }
 
   .Nxd-logo__image {
-    width: 44%;
+    width: 220px;
+    height: 28px;
+  }
+
+  @media #{$S-only} {
+    margin: auto auto 20px 0;
   }
 }
 
@@ -103,11 +119,17 @@
   text-align: center;
   font-size: 24px;
   display: flex;
-  margin-top: 20px;
+  margin-top: 25px;
   justify-content: center;
+  width: 100%;
+  justify-content: space-around;
 
   a {
     margin: 0 10px;
     display: inline-block;
   }
-}
+
+  @media #{$S-only} {
+    justify-content: flex-start;
+  }
+}

data/lib/nexmo_developer/app/webpacker/stylesheets/layout/_header.scss

@@ -1,199 +1,218 @@
-.Nxd-header {
+.Adp-header {
+  background-color: $black;
+  position: relative;
+  left: 0;
+  right: 0;
   width: 100%;
-  z-index: 700;
-  display: flex;
-  flex-direction: column;
-  position: fixed;
 
-  @media #{$S-only} {
-    height: auto;
-  }
+  font-family: Spezia;
+  font-size: 14px;
+  line-height: 20px;
 }
 
-#header {
-  outline: none;
-}
-
-.Nxd-header__main {
-  align-items: center;
-  background: $white;
-  color: $white;
+.Adp-header__nav {
+  top: 0;
+  bottom: 62.37%;
+  height: 36px;
   display: flex;
-  flex: 0 0 100%;
-  padding: $unit2;
-  transition: height .5s;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 6px;
 
-  @media #{$S-only} {
-    justify-content: space-between;
-    text-align: center;
-    padding: 0 $unit2;
+  .Vlt-icon {
+    height: 8px;
+    width: 8px;
+  }
 
-    .Nxd-scroll-minify & {
-      height: 0;
-      overflow: hidden;
-    }
+  a {
+    margin-right: 32px;
   }
 
-  .Vlt-btn {
+  #signup {
+    background-color: $purple;
     margin: 0;
   }
-}
 
-.Nxd-logo {
-  display: flex;
-  max-width: 100%;
-  flex: 1 0 0;
+  #locale-switcher {
+    margin-right: 32px;
 
-  @media #{$M-plus} {
-    position: relative;
-    align-items: center;
+    button {
+      height: 20px;
+      min-height: unset;
+      padding: 0;
+      font-weight: inherit;
+    }
+
+    .Vlt-dropdown__panel__content {
+      background: $black;
+      color: $grey;
+      box-shadow: inset 0 0 0 1px $black, 0 2px 5px rgba(0, 0, 0, 15%);
+    }
+
+    .Vlt-dropdown__link {
+      color: inherit;
+    }
   }
+}
+
+.Adp-header__sub {
+  bottom: 0;
+  top: 34.41%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 
   @media #{$S-only} {
-    flex: 0 0 auto;
+    padding: 0 18px;
   }
 
-  a:nth-child(2) {
-    flex-shrink: 0;
-  }
+  .logo {
+    height: 28px;
+    align-self: center;
+    padding: 0 72px 0 24px;
 
-  img {
-    height: 35px;
+    @media #{$S-only} {
+      padding: 0 72px 0 0;
+    }
   }
 
-  .Nxd-product__title {
+  nav {
     display: flex;
-    flex-direction: column;
+  }
 
-    h4 {
-      line-height: 2rem;
-      margin-bottom: 0px;
+  .Vlt-tabs__link {
+    padding: 0;
+    margin-right: 40px;
+
+    &:active {
+      background-color: $black !important;
     }
-  }
 
-  .Nxd-product__separator {
-    height: 35px;
-    flex: 0;
-    margin: 0 21px;
-    border-left: 1px solid $black;
-  }
+    &:focus {
+      background-color: $black !important;
+    }
 
-  .Nxd-product__hiring {
-    align-self: flex-end;
-    margin-left: 8px;
-  }
-}
+    @media #{$S-only} {
+      padding: 0;
+      width: 100%;
+      min-height: 60px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
 
-.Nxd-header__nav {
-  display: flex;
-  text-align: right;
+      &-menu {
+        align-items: flex-start;
+      }
+    }
 
-  @media #{$M-plus} {
-    white-space: nowrap;
-    text-align: right;
-  }
+    p {
+      margin: 0;
+      display: inline;
+    }
 
-  a {
-    display: inline-block;
-    margin: $unit2 $unit1;
-    color: rgba($white, 80);
+    a {
+      line-height: 24px;
 
-    @media #{$M-plus} {
-       margin: $unit1 $unit3 $unit1 $unit1;
-     }
+      &:hover {
+        text-decoration: none;
+      }
+    }
 
-    &:hover {
-      color: $white;
+    button:hover {
+      text-decoration: none;
     }
-  }
 
-  @media #{$S-only} {
-    text-align: right;
-  }
-}
+    svg {
+      height: 15px;
+      width: 15px;
+    }
 
-.Nxd-header__sub {
-  align-items: center;
-  background: $white;
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0 $unit2 4px;
-  position: relative;
+    &:after {
+      background: none;
+    }
+  }
 
   &__menu {
-    flex: 1;
     display: flex;
-    overflow-x: auto;
+    align-items: center;
+    line-height: 24px;
+  }
 
-    a {
-      display: inline-block;
-    }
+  .Vlt-topmenu {
+    width: 100%;
+    visibility: hidden;
+    z-index: 15;
+    display: block;
+    position: absolute;
+    left: 0;
+    overflow: hidden;
+    min-width: 130px;
 
     @media #{$S-only} {
-      overflow-x: auto;
-      white-space: nowrap;
+      display: flex;
+      flex-direction: column;
     }
-  }
 
-  form {
-    float: right;
-    min-width: 350px;
-
-    @media only screen and (max-width: 876px) {
-      min-width: auto;
-      float: none;
-      margin-top: -$unit1;
-      margin-bottom: -$unit1;
-      margin-right: -$unit2;
-      flex-shrink: 0;
-
-      .Vlt-input input {
-        border: 0;
-        border-left: 1px solid $grey;
-        border-radius: 0;
-      }
+    &-active {
+      visibility: visible;
 
-      input {
-        transition: width .5s;
-        width: 0;
+      @media #{$S-only} {
+        position: static;
       }
 
-      .Nxd-search-expanded input {
-        width: 350px;
+      .Vlt-tabs__link-menu b {
+        text-decoration: underline;
       }
     }
   }
-}
-
-#locale-switcher {
-  margin-right: 24px;
-
-  @media only screen and (max-width: 320px) {
-    margin-right: 0px;
-  }
 
-  .Vlt-btn {
+  .Adp-header__sub__menu {
     @media #{$S-only} {
-      width: 100%;
-      padding: 1px 6px;
+      position: absolute;
+      height: 100vh;
+      width: 100vw;
+      background: $black;
+      z-index: 10;
+      top: 60px;
+      left: 0;
+      display: flex;
+      flex-direction: column;
+      padding: 50px;
+      align-items: flex-start;
     }
+  }
 
-    .Vlt-dropdown__link__icon {
-      @media only screen and (max-width: 320px) {
+  .Vlt-header__backdrop {
+    background: black;
+    height: 0px;
+    position: absolute;
+    width: 100%;
+    top: 96px;
+
+    &-active {
+      height: 214px;
+      z-index: 10;
+
+      @media #{$S-only} {
         display: none;
       }
-      margin-top: -4px;
     }
   }
 
-  .Vlt-dropdown__panel {
-    margin-top: 4px;
-  }
-}
+  .Vlt-topmenu__items {
+    height: auto;
+    display: flex;
+    flex-direction: column;
+
+    @media #{$S-only} {
+      align-items: center;
+    }
 
-.Nxd-main-header__link {
-  font-weight: 600;
-  padding-top: 2px;
+    .Vlt-topmenu__item {
+      margin-bottom: 16px;
+    }
+  }
 }
 
 #skip-to-content, #skip-to-navigation {
@@ -207,3 +226,7 @@
     z-index: 1000;
   }
 }
+
+.subnav-logo {
+  display: flex;
+}