1  @import 'common/sass/variables';
  2  @import 'common/sass/mixins';
  3  
  4  .Promos {
  5    overflow: hidden;
  6  
  7    &-promo-wrapper {
  8      height: 6rem;
  9      overflow: hidden;
 10    }
 11  
 12    &-promo {
 13      position: relative;
 14      height: inherit;
 15      display: block;
 16      color: color(text-color-inverted);
 17      text-decoration: none;
 18      text-align: center;
 19      box-shadow: 0 1px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.12);
 20      border-radius: 2px;
 21      transition: opacity 200ms;
 22      @include clearfix;
 23  
 24      &:hover,
 25      &:focus,
 26      &:active {
 27        color: color(text-color-inverted);
 28        opacity: 0.92;
 29      }
 30  
 31      &-inner {
 32        position: absolute;
 33        display: flex;
 34        align-items: center;
 35        justify-content: center;
 36        top: 50%;
 37        left: 0;
 38        width: 100%;
 39        transform: translateY(-50%);
 40        padding: 0 $space;
 41      }
 42  
 43      &-text {
 44        flex: 5;
 45        padding-right: $space-xs;
 46        max-width: 220px;
 47  
 48        p,
 49        h4,
 50        h5,
 51        h6 {
 52          margin: 0.15rem 0;
 53        }
 54  
 55        p {
 56          font-size: 0.8rem;
 57        }
 58  
 59        h5 {
 60          font-size: 1.3rem;
 61        }
 62      }
 63  
 64      &-images {
 65        flex: 3;
 66        max-width: 108px;
 67        padding-left: $space-xs;
 68  
 69        img {
 70          display: block;
 71          margin: 0 auto;
 72          width: 100%;
 73          height: auto;
 74        }
 75      }
 76    }
 77  
 78    &-nav {
 79      text-align: center;
 80  
 81      &-btn {
 82        @include reset-button;
 83        display: inline-block;
 84        margin: 0 $space-xs;
 85        background: color(gray-dark);
 86        width: 12px;
 87        height: 12px;
 88        border: 3px solid color(gray-lightest);
 89        border-radius: 100%;
 90        opacity: 0.6;
 91  
 92        &.is-active {
 93          opacity: 1;
 94        }
 95      }
 96    }
 97  
 98    // Per-promo customizations
 99    $border-size: 6px;
100    &--hardware {
101      background-color: #6e9a3e;
102      background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2387bb4f' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
103      border: $border-size solid lighten(#6e9a3e, 8%);
104    }
105    &--coinbase {
106      background-color: #2b71b1;
107      background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23498dca' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
108      border: $border-size solid lighten(#2b71b1, 8%);
109    }
110    &--shapeshift {
111      background-color: #263a52;
112      background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234c627c' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
113      border: $border-size solid lighten(#263a52, 12%);
114      .Promos-promo-images {
115        max-width: 130px;
116      }
117    }
118    &--simplex {
119      background-color: #2d3139;
120      background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234d535e' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
121      border: $border-size solid lighten(#2d3139, 12%);
122    }
123  }
124  
125  .carousel-exit {
126    opacity: 1;
127    transform: translate(0%, -100%);
128    transition: opacity 300ms;
129    pointer-events: none;
130    &.carousel-exit-active {
131      opacity: 0;
132    }
133  }