pricing.scss 4.51 KB
Newer Older
Martin Schoeler's avatar
Martin Schoeler committed
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;
Danilo Woznica's avatar
Danilo Woznica committed
10
  background-repeat: no-repeat;
11
  background-size: 100% auto;
Martin Schoeler's avatar
Martin Schoeler committed
12
  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.
Martin Schoeler's avatar
Martin Schoeler committed
13

Martin Schoeler's avatar
Martin Schoeler committed
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
  @media screen and (max-width: $tablet) {
    background: $brand;
  }
}

.pricing-hero__background {
  position: absolute;
  top: -50%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  background-position: center bottom;
  background: linear-gradient(0deg, #fff 5%, #1d74f5 0% 50%);

Martin Schoeler's avatar
Martin Schoeler committed
29 30
  @media screen and (max-width: $tablet) {
  }
31
}
Martin Schoeler's avatar
Martin Schoeler committed
32 33


34 35
.pricing {

Martin Schoeler's avatar
Martin Schoeler committed
36 37 38 39 40
  .hero {
    height: 600px;
    min-height: unset !important;
  }

Martin Schoeler's avatar
Martin Schoeler committed
41 42 43 44 45 46
  .pricing_main {
    @media screen and (max-width: $tablet) {
      padding-left: 2em;
      padding-right: 2em;
    }
  }
47
  &-cloud-message {
Martin Schoeler's avatar
Martin Schoeler committed
48
    margin: 16px auto;
49
    display: none;
Martin Schoeler's avatar
Martin Schoeler committed
50 51 52 53 54 55 56 57 58 59 60
    width: 1040px;
    background: rgba(26, 34, 50, 0.24);
    border-radius: 2px;
    color: rgb(255, 255, 255);
    margin-top: 16px;
    padding: 4px;
    font-weight: 450;

    @media screen and (max-width: $tablet) {
      width: 100%;
    }
61 62
  }

63 64 65 66 67 68
  &-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
69 70 71 72 73

      @media screen and (max-width: $tablet) {
        padding: 48px 32px;
        width: 100%;
        max-width: 100%;
74 75 76 77

        .button {
          width: 100%;
        }
Martin Schoeler's avatar
Martin Schoeler committed
78 79 80 81 82 83
      }
    }

    @media screen and (max-width: $tablet) {
      background-image: none;
      padding: 16px;
84 85 86
    }
  }

Martin Schoeler's avatar
Martin Schoeler committed
87 88 89 90 91 92
  .app-header_menu {
    @media screen and (max-width: $tablet) {
      background-color: $brand;
    }
  }

93 94 95
  section.container {
    margin: 2em auto;
  }
Danilo Woznica's avatar
Danilo Woznica committed
96

97 98 99 100 101
  .self-disclaimer {
    text-align: right;
    margin-right: 128px;
  }

Martin Schoeler's avatar
Martin Schoeler committed
102 103
  .switch-container {
    display: flex;
Martin Schoeler's avatar
Martin Schoeler committed
104
    width: 892px;
Martin Schoeler's avatar
Martin Schoeler committed
105
    margin: 0 auto;
Martin Schoeler's avatar
Martin Schoeler committed
106 107 108
    border-radius: 2px;
    border: #FFF 1px solid;
    align-items: center;
109 110 111
    @media screen and (max-width: $tablet) {
      width: 100%;
    }
Martin Schoeler's avatar
Martin Schoeler committed
112 113 114 115 116 117
  }

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

118
  .switch {
Martin Schoeler's avatar
Martin Schoeler committed
119 120 121 122 123
    display: flex;
    flex-direction: column;
    height: 84px;
    font-weight: 800;
    height: max-content;
Martin Schoeler's avatar
Martin Schoeler committed
124
    font-size: 16px;
125
    width: 50%;
Martin Schoeler's avatar
Martin Schoeler committed
126
    background: $brand;
127
    color: #fff;
Martin Schoeler's avatar
Martin Schoeler committed
128 129
    margin: 0;
    padding: 16px;
Martin Schoeler's avatar
Martin Schoeler committed
130
    cursor: pointer;
131

Martin Schoeler's avatar
Martin Schoeler committed
132
    &.active {
Martin Schoeler's avatar
Martin Schoeler committed
133 134
      background-color: #fff;
      color: $brand;
135

Martin Schoeler's avatar
Martin Schoeler committed
136 137 138 139
      p {
        color: $grey;
      }
    }
140

Martin Schoeler's avatar
Martin Schoeler committed
141
    p {
Martin Schoeler's avatar
Martin Schoeler committed
142
      color: #fff;
Martin Schoeler's avatar
Martin Schoeler committed
143 144
      font-size: 16px;
      font-weight: 500;
Martin Schoeler's avatar
Martin Schoeler committed
145 146 147 148 149 150 151 152 153 154 155 156 157 158 159
      margin: 0 auto;
    }

    @media screen and (max-width: $tablet) {
      height: 106px;
      p {
        font-size: 14px;
      }
    }

    @media screen and (max-width: $mobile) {
      height: 126px;
        p {
          font-size: 12px;
        }
Martin Schoeler's avatar
Martin Schoeler committed
160 161 162
    }
  }

Martin Schoeler's avatar
Martin Schoeler committed
163
  .cloud__container {
Martin Schoeler's avatar
Martin Schoeler committed
164 165
    display: none;
  }
166
}
167 168 169 170

.pricing_four-column {
  display: flex;
  align-content: center;
171
  justify-content: center;
Martin Schoeler's avatar
Martin Schoeler committed
172
  margin-top: -326px;
173

Martin Schoeler's avatar
Martin Schoeler committed
174 175
  @media screen and (max-width: $tablet) {
    flex-direction: column;
Martin Schoeler's avatar
Martin Schoeler committed
176 177 178 179 180
    margin-top: -283px;
  }

  @media screen and (max-width: $mobile) {
    margin-top: -205px;
Martin Schoeler's avatar
Martin Schoeler committed
181 182
  }

183
  .plan_wrapper {
Martin Schoeler's avatar
Martin Schoeler committed
184 185
    width: 335px;
    height: 438px;
186
    border: 1px solid #e7ebf2;
187
    border-right-width: 0;
188 189
    color: #6b7d99;
    padding: 1em;
Martin Schoeler's avatar
Martin Schoeler committed
190
    padding-top: 1.6em;
191 192 193 194
    vertical-align: top;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
195 196
    justify-content: space-between;
    text-align: center;
Martin Schoeler's avatar
Martin Schoeler committed
197 198 199
    background-color: #fff;
    border-radius: 2px;

Martin Schoeler's avatar
Martin Schoeler committed
200 201 202 203
    .display {
      font-size: 1.6em;
    }

Martin Schoeler's avatar
Martin Schoeler committed
204 205 206
    &:not(:last-child) {
      margin-right: 15px;
    }
Guilherme Gazzo's avatar
Guilherme Gazzo committed
207 208 209 210

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

212 213 214
    &:last-child{
      border-right-width: 1px;
    }
Martin Schoeler's avatar
Martin Schoeler committed
215
    @media screen and (max-width: $tablet) {
216 217
      border: 1px solid #e7ebf2;
      margin: 1em auto;
Martin Schoeler's avatar
Martin Schoeler committed
218
      width: 100%;
219 220 221 222

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

225
    &.footer {
226 227
      border: 1px solid #e7ebf2;
      min-height: 0;
228
      border-top: 0;
229 230 231 232 233

      &:nth-child(2){
        border: 0;
        border-bottom: 1px solid #e7ebf2;
      }
234 235 236 237 238
      @media screen and (max-width: $tablet) {
        display: none;
      }
    }
  }
239 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
}