pricing.scss 4.4 KB
Newer Older
1
.pricing-hero__image {
2
  position: absolute;
3
  top: -50%;
4 5 6 7
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
Martin Schoeler's avatar
Martin Schoeler committed
8
  background-image: url("../images/cloud/hero.png");
9
  background-position: center bottom;
10
  background-repeat: no-repeat;
11
  background-size: 100% auto;
Martin Schoeler's avatar
Martin Schoeler committed
12
  background-color: #fff;
Martin Schoeler's avatar
Martin Schoeler committed
13 14
  background-color: $brand;
  background-position: 50% 105%; // Workaround for a bug in chrome, that creates a 1px gap under the background image, creating a blue line in this case.
15 16 17

  @media screen and (max-width: $tablet) {
  }
18
}
19 20
.pricing {

Martin Schoeler's avatar
Martin Schoeler committed
21 22 23 24 25
  .hero {
    height: 600px;
    min-height: unset !important;
  }

26 27 28 29 30 31
  &-concession{
    background-image: url("/images/press/hero@2x.jpg");
    background-size: auto 100%;
    background-color: #040b1b;
    .wrap {
      padding: 3em 5em;
Martin Schoeler's avatar
Martin Schoeler committed
32 33 34 35 36

      @media screen and (max-width: $tablet) {
        padding: 48px 32px;
        width: 100%;
        max-width: 100%;
37 38 39 40

        .button {
          width: 100%;
        }
Martin Schoeler's avatar
Martin Schoeler committed
41 42 43 44 45 46
      }
    }

    @media screen and (max-width: $tablet) {
      background-image: none;
      padding: 16px;
47 48 49
    }
  }

Martin Schoeler's avatar
Martin Schoeler committed
50 51 52 53 54 55
  .app-header_menu {
    @media screen and (max-width: $tablet) {
      background-color: $brand;
    }
  }

56 57 58
  section.container {
    margin: 2em auto;
  }
59

60 61
  .switch-container {
    display: flex;
62
    width: 434px;
63 64
    margin: 0 auto;
    justify-content: space-between;
65 66 67
    @media screen and (max-width: $tablet) {
      width: 100%;
    }
68 69 70 71 72 73
  }

  .col.title {
    margin-bottom: 102px;
  }

74
  .switch {
75 76
    border-radius: 2px;
    height: 43px;
Martin Schoeler's avatar
Martin Schoeler committed
77 78 79
    line-height: 42px;
    font-weight: 600;
    font-size: 16px;
80
    width: 50%;
Martin Schoeler's avatar
Martin Schoeler committed
81
    background: $brand;
82
    color: #fff;
Martin Schoeler's avatar
Martin Schoeler committed
83
    border: #FFF 1px solid;
84
    margin: 0 .5em;
Martin Schoeler's avatar
Martin Schoeler committed
85
    cursor: pointer;
86

87
    &.active {
Martin Schoeler's avatar
Martin Schoeler committed
88 89
      background-color: #fff;
      color: $brand;
90 91
    }

92 93


94 95 96 97 98 99 100 101 102 103
    p {
      color: #FFFFFF;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      letter-spacing: 0.25px;
      line-height: 42px;
    }
  }

Martin Schoeler's avatar
Martin Schoeler committed
104
  .cloud__container {
105 106
    display: none;
  }
107
}
108 109 110 111

.pricing_four-column {
  display: flex;
  align-content: center;
112
  justify-content: center;
113
  margin-top: -360px;
114

Martin Schoeler's avatar
Martin Schoeler committed
115 116 117 118
  @media screen and (max-width: $tablet) {
    flex-direction: column;
  }

119 120 121
  .plan_wrapper {
    width: 25%;
    border: 1px solid #e7ebf2;
122
    border-right-width: 0;
123 124 125 126 127 128
    color: #6b7d99;
    padding: 1em;
    vertical-align: top;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
129 130
    justify-content: space-between;
    text-align: center;
131 132 133 134 135 136
    background-color: #fff;
    border-radius: 2px;

    &:not(:last-child) {
      margin-right: 15px;
    }
137 138 139 140

		@media screen and (max-width: $container) {
			width: 33.333%;
		}
Martin Schoeler's avatar
Martin Schoeler committed
141

142 143 144
    &:last-child{
      border-right-width: 1px;
    }
Martin Schoeler's avatar
Martin Schoeler committed
145
    @media screen and (max-width: $tablet) {
146 147
      border: 1px solid #e7ebf2;
      margin: 1em auto;
Martin Schoeler's avatar
Martin Schoeler committed
148
      width: 100%;
149 150 151 152

      .button {
        font-size: 1em;
      }
Martin Schoeler's avatar
Martin Schoeler committed
153 154
    }

155
    &.footer {
156 157
      border: 1px solid #e7ebf2;
      min-height: 0;
158
      border-top: 0;
159 160 161 162 163

      &:nth-child(2){
        border: 0;
        border-bottom: 1px solid #e7ebf2;
      }
164 165 166 167 168
      @media screen and (max-width: $tablet) {
        display: none;
      }
    }
  }
169 170 171 172 173 174 175

}

// Pricing form

.pricing .featherlight:last-of-type {
  background: rgba(3,12,26,.85);
176
}
177 178 179 180 181 182 183 184 185 186 187
.pricing .featherlight-content {
  width: 544px;
  padding: 0 !important;
  box-shadow:  0 2px 16px 0 rgba(0, 0, 0, 0.5);

  @media screen and (max-width: $tablet) {
    width: auto;
  }

  #pricing-form {
    display: block;
Martin Schoeler's avatar
Martin Schoeler committed
188 189
    margin: 34px 48px;
    margin-bottom: 0;
190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239

    @media screen and (max-width: $tablet) {
      margin: 64px 32px;
    }
  }

  h3 {
    font-weight: bold;
  }

  #pricing-form__after-box {
    display: block;
    margin: 10px 30px;
    color: $space;
    h3 {
      font-weight: bold;
      font-size: 32px;
      color: $space;
      margin-bottom: 24px;
    }
  }


  .featherlight-close-icon {
    background: none;
    color: $grey;
    font-size: 1.2em;
    margin-right: 32px;
    margin-top: 32px;
  }
}
#pricing-form__after-box {
  display: none;
}

#pricing-form {
  display: none;

  #companySize, #inquiry {
    width: 100%;
    height: 44px;
    padding-left: 10px;
    option {
      color: $space;
    }

    option:first-child {
      color: $grey;
    }
  }
240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255
}

.app-header.top {
  background: none !important;

  .app-header_wrap {
    background: none !important;
  }

  .app-header_install {
    color: #fff;
    img {
      filter: invert(1) grayscale(1) brightness(3.5);
      transition: all 0.3;
    }
  }
256
}