Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 207 | espaco | 1 | .landing-wrapper { |
| 2 | background: #ffffff; |
||
| 3 | |||
| 4 | .landing-topbar { |
||
| 5 | height: 120px; |
||
| 6 | background: linear-gradient(180deg, #525D72 0%, #69768D 100%); |
||
| 7 | @include flex(); |
||
| 8 | @include flex-align-center(); |
||
| 9 | @include flex-justify-between(); |
||
| 10 | width: 100%; |
||
| 11 | z-index: 999; |
||
| 12 | |||
| 13 | #landing-menu-button { |
||
| 14 | display: none; |
||
| 15 | padding: 0 8px; |
||
| 16 | cursor: pointer; |
||
| 17 | } |
||
| 18 | |||
| 19 | .logo { |
||
| 20 | padding: 0 120px; |
||
| 21 | } |
||
| 22 | |||
| 23 | > ul { |
||
| 24 | list-style-type: none; |
||
| 25 | @include flex(); |
||
| 26 | @include flex-align-center(); |
||
| 27 | margin: 0; |
||
| 28 | padding: 0; |
||
| 29 | padding-right: 120px; |
||
| 30 | |||
| 31 | > li { |
||
| 32 | #landing-menu-close { |
||
| 33 | display: none; |
||
| 34 | } |
||
| 35 | > a{ |
||
| 36 | font-weight: 500; |
||
| 37 | letter-spacing: 0.08px; |
||
| 38 | color: #ffffff; |
||
| 39 | padding:8px 16px; |
||
| 40 | margin: 0 6px; |
||
| 41 | border-radius: 5px; |
||
| 42 | @include transition(background-color $transitionDuration); |
||
| 43 | |||
| 44 | &:hover { |
||
| 45 | background-color: rgba(#5cacf4,.3); |
||
| 46 | color:#ffffff ; |
||
| 47 | } |
||
| 48 | |||
| 49 | } |
||
| 50 | } |
||
| 51 | } |
||
| 52 | } |
||
| 53 | .landing-banner{ |
||
| 54 | background: linear-gradient(180deg, #69768D 0%, #ffffff 100%); |
||
| 55 | @include flex(); |
||
| 56 | @include flex-justify-between(); |
||
| 57 | @include flex-align-center(); |
||
| 58 | padding:120px 120px 180px; |
||
| 59 | |||
| 60 | .landing-banner-content { |
||
| 61 | > h2 { |
||
| 62 | font-weight: 600; |
||
| 63 | margin: 0; |
||
| 64 | margin-bottom: 12px; |
||
| 65 | color:#ffffff ; |
||
| 66 | |||
| 67 | > span { |
||
| 68 | color: #ffffff; |
||
| 69 | } |
||
| 70 | } |
||
| 71 | |||
| 72 | > h6 { |
||
| 73 | font-size: 15px; |
||
| 74 | font-weight: normal; |
||
| 75 | margin: 0; |
||
| 76 | margin-bottom: 24px; |
||
| 77 | color:#ffffff ; |
||
| 78 | max-width: 480px; |
||
| 79 | line-height: 1.5; |
||
| 80 | } |
||
| 81 | |||
| 82 | > button { |
||
| 83 | padding: 8px 20px; |
||
| 84 | span { |
||
| 85 | padding: 0; |
||
| 86 | display: block; |
||
| 87 | } |
||
| 88 | } |
||
| 89 | |||
| 90 | } |
||
| 91 | .landing-banner-image { |
||
| 92 | text-align: right; |
||
| 93 | img { |
||
| 94 | width: 80%; |
||
| 95 | height: auto; |
||
| 96 | max-height: 400px; |
||
| 97 | opacity: .8; |
||
| 98 | } |
||
| 99 | } |
||
| 100 | } |
||
| 101 | |||
| 102 | .section-header { |
||
| 103 | @include flex(); |
||
| 104 | flex-direction: column; |
||
| 105 | @include flex-justify-center(); |
||
| 106 | @include flex-align-center(); |
||
| 107 | text-align: center; |
||
| 108 | padding: 0 120px; |
||
| 109 | |||
| 110 | > h2 { |
||
| 111 | font-weight: 500; |
||
| 112 | margin: 0; |
||
| 113 | margin-bottom: 14px; |
||
| 114 | color: #2C3D57; |
||
| 115 | } |
||
| 116 | > h6 { |
||
| 117 | font-weight: normal; |
||
| 118 | margin: 0; |
||
| 119 | color: #2C3D57; |
||
| 120 | max-width: 480px; |
||
| 121 | line-height: 1.33; |
||
| 122 | } |
||
| 123 | } |
||
| 124 | |||
| 125 | .landing-features { |
||
| 126 | padding: 120px 0; |
||
| 127 | |||
| 128 | .features-cards { |
||
| 129 | padding: 120px 120px 0; |
||
| 130 | |||
| 131 | .feature-card { |
||
| 132 | @include border-radius(5px); |
||
| 133 | background-color: #ffffff; |
||
| 134 | padding: 24px 12px 36px; |
||
| 135 | text-align: left; |
||
| 136 | cursor: pointer; |
||
| 137 | @include transition(all $transitionDuration); |
||
| 138 | |||
| 139 | &:hover { |
||
| 140 | transform: scale3d(1.02, 1.02, 1); |
||
| 141 | } |
||
| 142 | |||
| 143 | h5 { |
||
| 144 | margin: 6px 0 12px; |
||
| 145 | } |
||
| 146 | |||
| 147 | > img { |
||
| 148 | height: 100px; |
||
| 149 | width: auto; |
||
| 150 | } |
||
| 151 | |||
| 152 | span { |
||
| 153 | line-height: 1.4; |
||
| 154 | display: block; |
||
| 155 | } |
||
| 156 | } |
||
| 157 | } |
||
| 158 | } |
||
| 159 | |||
| 160 | .landing-promo { |
||
| 161 | background: linear-gradient(360deg, #69768D 0%, #78849B 100%); |
||
| 162 | @include flex(); |
||
| 163 | @include flex-justify-between(); |
||
| 164 | @include flex-align-center(); |
||
| 165 | padding: 60px 120px; |
||
| 166 | |||
| 167 | .landing-promo-content { |
||
| 168 | > h2 { |
||
| 169 | font-weight: 600; |
||
| 170 | margin: 0; |
||
| 171 | margin-bottom: 14px; |
||
| 172 | color:#ffffff ; |
||
| 173 | |||
| 174 | > span { |
||
| 175 | color: #ffffff; |
||
| 176 | } |
||
| 177 | max-width: 650px; |
||
| 178 | } |
||
| 179 | |||
| 180 | > h6 { |
||
| 181 | font-size: 15px; |
||
| 182 | font-weight: normal; |
||
| 183 | margin: 0; |
||
| 184 | margin-bottom: 14px; |
||
| 185 | color:#ffffff ; |
||
| 186 | max-width: 480px; |
||
| 187 | line-height: 1.33; |
||
| 188 | } |
||
| 189 | |||
| 190 | > button { |
||
| 191 | padding: 8px 20px; |
||
| 192 | span { |
||
| 193 | padding: 0; |
||
| 194 | display: block; |
||
| 195 | } |
||
| 196 | } |
||
| 197 | |||
| 198 | } |
||
| 199 | .landing-promo-image { |
||
| 200 | text-align: right; |
||
| 201 | img { |
||
| 202 | width: 60%; |
||
| 203 | height: auto; |
||
| 204 | max-height: 400px; |
||
| 205 | } |
||
| 206 | } |
||
| 207 | } |
||
| 208 | |||
| 209 | .landing-testimonials { |
||
| 210 | padding: 120px 120px 60px; |
||
| 211 | |||
| 212 | .testimonials { |
||
| 213 | @include flex(); |
||
| 214 | @include flex-justify-center(); |
||
| 215 | |||
| 216 | .testimonials-wrapper { |
||
| 217 | overflow: hidden; |
||
| 218 | position: relative; |
||
| 219 | max-width: 100%; |
||
| 220 | |||
| 221 | .testimonials-content { |
||
| 222 | @include flex(); |
||
| 223 | padding: 32px 0 0; |
||
| 224 | flex-direction: row; |
||
| 225 | transition: transform 1000ms ease 0s; |
||
| 226 | transform: translate3d(0px, 0px, 0px); |
||
| 227 | |||
| 228 | .testimonial { |
||
| 229 | flex: 1 0 100vw; |
||
| 230 | @include transition(visibility .8s); |
||
| 231 | @include transition(transform 1000ms ease 0s); |
||
| 232 | max-width: 33%; |
||
| 233 | |||
| 234 | .testimonial-content { |
||
| 235 | opacity: .9; |
||
| 236 | margin: 0 6px; |
||
| 237 | position: relative; |
||
| 238 | height: 100%; |
||
| 239 | background-color: #ffffff; |
||
| 240 | padding: 65px 42px 66px; |
||
| 241 | @include flex(); |
||
| 242 | @include flex-justify-between(); |
||
| 243 | flex-direction: column; |
||
| 244 | |||
| 245 | > span { |
||
| 246 | display: block; |
||
| 247 | font-size: 14px; |
||
| 248 | line-height: 1.5; |
||
| 249 | color:#2C3D57; |
||
| 250 | margin-bottom: 20px; |
||
| 251 | flex-grow: 1; |
||
| 252 | } |
||
| 253 | |||
| 254 | > h5 { |
||
| 255 | font-weight: 500; |
||
| 256 | line-height: 1.2; |
||
| 257 | color:#2C3D57; |
||
| 258 | margin: 0; |
||
| 259 | } |
||
| 260 | |||
| 261 | > h6 { |
||
| 262 | font-weight: 500; |
||
| 263 | line-height: 1.5; |
||
| 264 | color: #66768D; |
||
| 265 | margin: 0; |
||
| 266 | } |
||
| 267 | |||
| 268 | } |
||
| 269 | } |
||
| 270 | } |
||
| 271 | |||
| 272 | .link-points { |
||
| 273 | .points { |
||
| 274 | @include flex(); |
||
| 275 | @include flex-align-center(); |
||
| 276 | @include flex-justify-center(); |
||
| 277 | padding-top: 36px; |
||
| 278 | |||
| 279 | .point { |
||
| 280 | width: 15px; |
||
| 281 | height: 15px; |
||
| 282 | background-color:#E6E9EF; |
||
| 283 | @include border-radius(50%); |
||
| 284 | margin: 3px; |
||
| 285 | cursor: pointer; |
||
| 286 | |||
| 287 | &.active-point{ |
||
| 288 | width: 19px; |
||
| 289 | height: 19px; |
||
| 290 | background-color: #2C3D57; |
||
| 291 | } |
||
| 292 | |||
| 293 | &.mobile { |
||
| 294 | display: none; |
||
| 295 | } |
||
| 296 | } |
||
| 297 | } |
||
| 298 | } |
||
| 299 | } |
||
| 300 | } |
||
| 301 | |||
| 302 | } |
||
| 303 | |||
| 304 | .landing-pricing { |
||
| 305 | padding: 120px 0; |
||
| 306 | .section-header { |
||
| 307 | @include flex-justify-center(); |
||
| 308 | @include flex-align-center(); |
||
| 309 | text-align: center; |
||
| 310 | } |
||
| 311 | |||
| 312 | .pricing-cards { |
||
| 313 | padding: 60px 120px; |
||
| 314 | |||
| 315 | .pricing-card { |
||
| 316 | margin: 12px; |
||
| 317 | height: auto; |
||
| 318 | } |
||
| 319 | } |
||
| 320 | } |
||
| 321 | |||
| 322 | .landing-contact { |
||
| 323 | padding: 60px 0 0; |
||
| 324 | background: linear-gradient(360deg, #69768D 0%, #ffffff 100%); |
||
| 325 | |||
| 326 | .section-header { |
||
| 327 | @include flex-justify-center(); |
||
| 328 | @include flex-align-center(); |
||
| 329 | text-align: center; |
||
| 330 | > h2 { |
||
| 331 | color: #2C3D57; |
||
| 332 | } |
||
| 333 | > h6 { |
||
| 334 | color: #2C3D57; |
||
| 335 | } |
||
| 336 | } |
||
| 337 | |||
| 338 | .landing-contact-content { |
||
| 339 | @include flex(); |
||
| 340 | @include flex-justify-center(); |
||
| 341 | padding: 60px 180px; |
||
| 342 | position: relative; |
||
| 343 | text-align: center; |
||
| 344 | |||
| 345 | .landing-contact-form { |
||
| 346 | padding: 20px; |
||
| 347 | |||
| 348 | > h3 { |
||
| 349 | font-size: 16px; |
||
| 350 | color: #ffffff; |
||
| 351 | margin: 0; |
||
| 352 | font-weight: 500; |
||
| 353 | margin-bottom: 20px; |
||
| 354 | } |
||
| 355 | |||
| 356 | > input, |
||
| 357 | > textarea { |
||
| 358 | width: 100%; |
||
| 359 | margin-bottom: 16px; |
||
| 360 | border-radius: 4px; |
||
| 361 | border: 1px solid #CED4DA; |
||
| 362 | padding: 10px 12px; |
||
| 363 | background-color: #F6F9FE; |
||
| 364 | color: #515C66; |
||
| 365 | |||
| 366 | &::placeholder { |
||
| 367 | color: #515C66; |
||
| 368 | } |
||
| 369 | } |
||
| 370 | > button { |
||
| 371 | width: 100%; |
||
| 372 | } |
||
| 373 | |||
| 374 | } |
||
| 375 | } |
||
| 376 | |||
| 377 | } |
||
| 378 | |||
| 379 | .landing-footer { |
||
| 380 | background: linear-gradient(360deg, #525D72 0%, #69768D 100%); |
||
| 381 | padding: 21px 120px; |
||
| 382 | @include flex(); |
||
| 383 | @include flex-align-center(); |
||
| 384 | @include flex-justify-between(); |
||
| 385 | |||
| 386 | > img { |
||
| 387 | height: 30px; |
||
| 388 | width: auto; |
||
| 389 | } |
||
| 390 | |||
| 391 | .social-icons { |
||
| 392 | @include flex(); |
||
| 393 | @include flex-align-center(); |
||
| 394 | |||
| 395 | a { |
||
| 396 | color: #ffffff; |
||
| 397 | margin-left: 18px; |
||
| 398 | cursor: pointer; |
||
| 399 | padding: 6px; |
||
| 400 | |||
| 401 | i { |
||
| 402 | font-size: 22px; |
||
| 403 | @include transition(color $transitionDuration); |
||
| 404 | } |
||
| 405 | |||
| 406 | &:hover { |
||
| 407 | i { |
||
| 408 | color: #CED4DA; |
||
| 409 | } |
||
| 410 | } |
||
| 411 | } |
||
| 412 | } |
||
| 413 | } |
||
| 414 | } |
||
| 415 | |||
| 416 | |||
| 417 | @media (max-width: $tabletBreakpoint) { |
||
| 418 | .landing-body { |
||
| 419 | &.block-scroll { |
||
| 420 | overflow: hidden; |
||
| 421 | |||
| 422 | .landing-wrapper { |
||
| 423 | .landing-mask { |
||
| 424 | display: block; |
||
| 425 | } |
||
| 426 | } |
||
| 427 | } |
||
| 428 | .landing-wrapper { |
||
| 429 | &.landing-menu-active { |
||
| 430 | .landing-topbar { |
||
| 431 | .landing-menu { |
||
| 432 | transform: translate3d(0px, 0px, 0px); |
||
| 433 | } |
||
| 434 | } |
||
| 435 | |||
| 436 | } |
||
| 437 | .landing-topbar { |
||
| 438 | .logo { |
||
| 439 | padding: 0 33px; |
||
| 440 | } |
||
| 441 | .landing-menu { |
||
| 442 | position: fixed; |
||
| 443 | flex-direction: column; |
||
| 444 | @include flex-align-end(); |
||
| 445 | right: 0; |
||
| 446 | top: 0; |
||
| 447 | padding: 40px 20px; |
||
| 448 | z-index: 999; |
||
| 449 | width: 240px; |
||
| 450 | height: 100%; |
||
| 451 | background-color: #69768D; |
||
| 452 | box-shadow: 0 24px 64px -2px rgba(0, 0, 0, 0.02), 0 6px 16px -2px rgba(0, 0, 0, 0.06), 0 2px 6px -2px rgba(0, 0, 0, 0.08); |
||
| 453 | transform: translate3d(260px, 0px, 0px); |
||
| 454 | @include transition(transform $transitionDuration); |
||
| 455 | |||
| 456 | > li { |
||
| 457 | margin: 0; |
||
| 458 | width: 100%; |
||
| 459 | margin-bottom: 12px; |
||
| 460 | |||
| 461 | > a { |
||
| 462 | padding: 6px 16px; |
||
| 463 | font-size: 14px; |
||
| 464 | text-align: left; |
||
| 465 | display: block; |
||
| 466 | color: #ffffff; |
||
| 467 | @include transition(background-color $transitionDuration); |
||
| 468 | &:hover { |
||
| 469 | background-color: rgba(#5cacf4,.3); |
||
| 470 | color:#ffffff ; |
||
| 471 | } |
||
| 472 | } |
||
| 473 | |||
| 474 | |||
| 475 | #landing-menu-close { |
||
| 476 | display: block; |
||
| 477 | font-size: 20px; |
||
| 478 | text-align: right; |
||
| 479 | color: #5cacf4; |
||
| 480 | @include transition(color $transitionDuration); |
||
| 481 | |||
| 482 | &:hover { |
||
| 483 | background-color: #69768D; |
||
| 484 | color: #ffffff; |
||
| 485 | } |
||
| 486 | } |
||
| 487 | } |
||
| 488 | } |
||
| 489 | |||
| 490 | #landing-menu-button { |
||
| 491 | display: block; |
||
| 492 | color: #ffffff; |
||
| 493 | font-size: 20px; |
||
| 494 | padding: 0 33px; |
||
| 495 | } |
||
| 496 | } |
||
| 497 | |||
| 498 | .landing-banner { |
||
| 499 | padding: 120px 42px 180px; |
||
| 500 | .landing-banner-content{ |
||
| 501 | text-align: center; |
||
| 502 | width: 100%; |
||
| 503 | h6 { |
||
| 504 | max-width: 100%; |
||
| 505 | } |
||
| 506 | } |
||
| 507 | |||
| 508 | .landing-banner-image { |
||
| 509 | display: none; |
||
| 510 | } |
||
| 511 | |||
| 512 | } |
||
| 513 | |||
| 514 | .landing-features { |
||
| 515 | padding: 42px 16px; |
||
| 516 | |||
| 517 | .features-cards { |
||
| 518 | padding: 0; |
||
| 519 | |||
| 520 | .feature-card { |
||
| 521 | text-align: center; |
||
| 522 | margin: 30px 0; |
||
| 523 | } |
||
| 524 | } |
||
| 525 | |||
| 526 | .features-content { |
||
| 527 | padding: 0; |
||
| 528 | flex-direction: column; |
||
| 529 | |||
| 530 | img { |
||
| 531 | width: 100%; |
||
| 532 | } |
||
| 533 | |||
| 534 | ul { |
||
| 535 | li { |
||
| 536 | margin: 16px 0; |
||
| 537 | max-width: 400px; |
||
| 538 | |||
| 539 | img { |
||
| 540 | width: 64px; |
||
| 541 | } |
||
| 542 | } |
||
| 543 | } |
||
| 544 | } |
||
| 545 | } |
||
| 546 | |||
| 547 | .section-header { |
||
| 548 | padding: 0px ; |
||
| 549 | } |
||
| 550 | |||
| 551 | .landing-promo { |
||
| 552 | padding: 36px 42px 64px; |
||
| 553 | |||
| 554 | .landing-promo-content { |
||
| 555 | text-align: center; |
||
| 556 | width: 100%; |
||
| 557 | h6 { |
||
| 558 | max-width: 100%; |
||
| 559 | } |
||
| 560 | } |
||
| 561 | .landing-promo-image { |
||
| 562 | display: none; |
||
| 563 | } |
||
| 564 | } |
||
| 565 | |||
| 566 | .landing-pricing { |
||
| 567 | padding: 36px 42px 64px; |
||
| 568 | |||
| 569 | .pricing-cards { |
||
| 570 | padding: 0; |
||
| 571 | } |
||
| 572 | } |
||
| 573 | |||
| 574 | .landing-testimonials { |
||
| 575 | padding: 36px 42px 64px; |
||
| 576 | |||
| 577 | .testimonials { |
||
| 578 | @include flex(); |
||
| 579 | @include flex-justify-center(); |
||
| 580 | |||
| 581 | .testimonials-wrapper { |
||
| 582 | overflow: hidden; |
||
| 583 | position: relative; |
||
| 584 | max-width: 100%; |
||
| 585 | |||
| 586 | .testimonials-content { |
||
| 587 | text-align: center; |
||
| 588 | padding: 0; |
||
| 589 | .testimonial { |
||
| 590 | max-width: 100%; |
||
| 591 | } |
||
| 592 | } |
||
| 593 | |||
| 594 | .link-points { |
||
| 595 | .points { |
||
| 596 | .point { |
||
| 597 | &.mobile { |
||
| 598 | @include flex(); |
||
| 599 | } |
||
| 600 | } |
||
| 601 | } |
||
| 602 | } |
||
| 603 | } |
||
| 604 | } |
||
| 605 | |||
| 606 | } |
||
| 607 | |||
| 608 | .landing-contact { |
||
| 609 | padding: 36px 42px 64px; |
||
| 610 | .landing-contact-content { |
||
| 611 | padding: 0; |
||
| 612 | } |
||
| 613 | .landing-contact-form { |
||
| 614 | width: 100%; |
||
| 615 | } |
||
| 616 | } |
||
| 617 | |||
| 618 | .landing-footer { |
||
| 619 | padding: 18px 24px 64px; |
||
| 620 | } |
||
| 621 | } |
||
| 622 | } |
||
| 623 | } |