@hashicorp/react-components 0.0.0

package/packages/hero/style.css

@@ -0,0 +1,501 @@
+.g-hero {
+  background: var(--black);
+  color: var(--white);
+  padding: 128px 0 160px;
+  position: relative;
+  overflow: hidden;
+
+  @media (max-width: 1119px) {
+    padding: 78px 0 104px;
+  }
+
+  @media (max-width: 767px) {
+    padding: 56px 0 80px;
+  }
+
+  &.centered {
+    text-align: center;
+
+    & .g-container {
+      align-items: center;
+      flex-direction: column;
+
+      & > div:nth-child(2) {
+        margin-top: 48px;
+        width: 100%;
+      }
+    }
+
+    & .headline {
+      & .logo {
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      & .buttons {
+        justify-content: center;
+
+        & .g-btn {
+          @media (max-width: 600px) {
+            align-self: center;
+          }
+        }
+      }
+
+      & .help-text {
+        justify-content: center;
+        margin-right: 0;
+      }
+    }
+  }
+
+  &.consul-pink {
+    & .help-text svg {
+      & line {
+        stroke: var(--consul);
+      }
+
+      & path {
+        fill: var(--consul);
+      }
+    }
+
+    & .carousel .progress-bar span {
+      background: var(--consul);
+    }
+  }
+
+  &.nomad-green {
+    & .help-text svg {
+      & line {
+        stroke: var(--nomad);
+      }
+
+      & path {
+        fill: var(--nomad);
+      }
+    }
+
+    & .carousel .progress-bar span {
+      background: var(--nomad);
+    }
+  }
+
+  &.terraform-purple {
+    & .help-text svg {
+      & line {
+        stroke: var(--terraform);
+      }
+
+      & path {
+        fill: var(--terraform);
+      }
+    }
+
+    & .carousel .progress-bar span {
+      background: var(--terraform);
+    }
+  }
+
+  &.light {
+    background: var(--white);
+    color: var(--black);
+
+    & .headline {
+      & .g-alert {
+        & p,
+        & span {
+          color: var(--DEPRECATED-gray-1);
+        }
+      }
+
+      & h1 {
+        color: #252937;
+      }
+
+      & .help-text {
+        color: #252937;
+      }
+    }
+
+    & .carousel {
+      color: var(--black);
+
+      & .progress-bar {
+        background-color: var(--DEPRECATED-gray-9);
+      }
+    }
+  }
+
+  & .bg {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    object-fit: cover;
+    font-family: 'object-fit:cover'; /* IE polyfill */
+    min-width: 100%;
+    min-height: 100%;
+  }
+
+  & .g-container {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: space-between;
+
+    @media (max-width: 1119px) {
+      display: block;
+      text-align: center;
+    }
+
+    & > div {
+      flex-grow: 0;
+      flex-shrink: 0;
+      flex-basis: calc(50% - 16px);
+      width: 100%;
+
+      @media (max-width: 1119px) {
+        margin-left: auto;
+        margin-right: auto;
+        text-align: center;
+      }
+
+      &:nth-child(2) {
+        max-width: 816px;
+
+        @media (max-width: 1119px) {
+          margin-top: 40px;
+          padding-left: 48px;
+          padding-right: 48px;
+        }
+
+        @media (max-width: 767px) {
+          padding-left: 0;
+          padding-right: 0;
+        }
+
+        &.image {
+          flex-basis: calc(50% - 48px);
+        }
+      }
+    }
+  }
+
+  & .headline {
+    max-width: 564px;
+
+    @media (max-width: 1119px) {
+      max-width: 534px;
+    }
+
+    &:last-child {
+      flex-basis: auto;
+
+      @media (min-width: 1120px) {
+        max-width: 730px;
+      }
+    }
+
+    & .logo {
+      margin-bottom: 32px;
+      height: 60px;
+      display: block;
+
+      @media (max-width: 1119px) {
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+
+    & .g-alert {
+      margin-bottom: 24px;
+
+      @media (max-width: 1119px) {
+        display: inline-block;
+      }
+
+      @media (max-width: 767px) {
+        margin-bottom: 32px;
+      }
+
+      & .tag {
+        text-transform: uppercase;
+        color: #5d5d5d;
+        font-size: 0.9rem;
+        font-weight: var(--font-weight-bold);
+        margin-bottom: 32px;
+      }
+
+      & p,
+      & span {
+        color: var(--white);
+      }
+
+      & span {
+        @media (max-width: 1119px) {
+          display: inline-block;
+          margin-bottom: 12px;
+          margin-right: 0;
+        }
+      }
+    }
+
+    & h1 {
+      margin: 0;
+    }
+
+    & > p {
+      margin: 24px 0 0 0;
+
+      @media (max-width: 767px) {
+        margin-top: 16px;
+      }
+    }
+
+    & .form-lead {
+      margin-top: 40px;
+
+      & form {
+        position: relative;
+        width: 100%;
+
+        & > .form-elements {
+          display: flex;
+          transition: opacity 0.35s;
+
+          @media (max-width: 575px) {
+            flex-wrap: wrap;
+          }
+
+          & > .inputs {
+            flex-shrink: 1;
+            width: 100%;
+
+            @media (min-width: 1120px) {
+              max-width: 320px;
+            }
+
+            & .g-text-input {
+              @media (max-width: 575px) {
+                margin-bottom: 20px;
+                width: 100%;
+                flex: 1;
+              }
+
+              & input {
+                height: 48px;
+              }
+            }
+          }
+
+          & > .g-btn {
+            display: inline-block;
+            align-self: flex-start;
+            width: auto;
+            margin-left: 15px;
+            min-height: 48px;
+
+            @media (max-width: 575px) {
+              width: 100%;
+              margin-left: 0;
+              flex-grow: 1;
+              flex-shrink: 0;
+            }
+          }
+        }
+      }
+    }
+
+    & .buttons {
+      display: flex;
+      flex-wrap: wrap;
+      margin: 24px -8px 0;
+
+      @media (max-width: 1119px) {
+        justify-content: center;
+        margin-left: -12px;
+        margin-right: -12px;
+      }
+
+      @media (max-width: 767px) {
+        margin-top: 16px;
+      }
+
+      & .g-btn {
+        margin: 16px 8px 0;
+
+        @media (max-width: 1119px) {
+          margin-left: 12px;
+          margin-right: 12px;
+        }
+      }
+    }
+
+    & .help-text {
+      text-decoration: none;
+      color: white;
+      margin-top: 32px;
+      display: inline-block;
+      transition: 0.25s ease;
+      transition-property: opacity;
+      position: relative;
+
+      @media (max-width: 1119px) {
+        justify-content: center;
+      }
+
+      &:hover {
+        opacity: 0.75;
+      }
+
+      & div {
+        display: inline;
+      }
+
+      & p {
+        display: inline;
+        margin: 0;
+
+        & > a {
+          color: inherit;
+        }
+      }
+
+      & svg {
+        margin: 0 0 1px 12px;
+
+        @media (max-width: 1119px) {
+          margin-left: 6px;
+        }
+      }
+    }
+  }
+
+  & .image {
+    & picture,
+    & img,
+    & svg {
+      max-width: 720px;
+      width: 100%;
+    }
+
+    & img,
+    & svg {
+      @media (max-width: 1119px) {
+        padding: 0 16px;
+      }
+    }
+  }
+
+  & .carousel {
+    & .videos {
+      position: relative;
+    }
+
+    & .video-wrapper {
+      height: 0;
+      opacity: 0;
+      overflow: hidden;
+      position: relative;
+      transform: translateX(-60px);
+      line-height: 0;
+      box-shadow: 0px 14.3254px 14.3254px rgba(37, 41, 55, 0.16);
+
+      &.is-active {
+        opacity: 1;
+        padding-top: calc((100% * 0.63569) + 28px);
+        transform: translateX(0);
+        transition: opacity 0.5s, transform 0.5s;
+        transition-timing-function: ease-out;
+      }
+
+      &.is-deactivating {
+        opacity: 0;
+        transform: translateX(90px);
+        transition-timing-function: ease-in;
+      }
+    }
+
+    & .bar {
+      align-items: center;
+      background: #0e1016;
+      border-radius: 4px 4px 0 0;
+      display: flex;
+      height: 28px;
+      padding: 0 12px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+
+      & span {
+        background: #252937;
+        border-radius: 50%;
+        display: block;
+        height: 9px;
+        margin-right: 7px;
+        width: 9px;
+      }
+    }
+
+    & .video {
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      top: 28px;
+      right: 0;
+    }
+
+    & video {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+    }
+
+    & .controls {
+      display: flex;
+      padding: 28px 20px 0;
+
+      @media (max-width: 1119px) {
+        padding: 37px 0 0;
+      }
+    }
+
+    & .control {
+      cursor: pointer;
+      text-align: left;
+      width: 100%;
+
+      &:hover .control-hover {
+        transform: translateY(-4px);
+      }
+
+      & + .control {
+        margin-left: 24px;
+      }
+
+      & .control-hover {
+        transition: 0.3s ease-in-out;
+        transition-property: transform;
+      }
+    }
+
+    & .progress-bar {
+      background-color: var(--DEPRECATED-gray-3);
+      height: 2px;
+      margin-top: 4px;
+      position: relative;
+      width: 100%;
+
+      & span {
+        background: var(--brand);
+        display: block;
+        height: 2px;
+        position: absolute;
+        transition: width linear 0.2s;
+        width: 0;
+      }
+    }
+  }
+}