html, body { height: 100%; a > span { vertical-align: middle; } } /*@media (max-width: @screen-xs-max) { ... } // phone (from 0 to 767) @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } // Tablet (from 768 - 991) @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } // Small Desktop (992 - 1199) @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { } // Large Desktop (1200 - 1365) 1366 - ... */ .mb-3 { font-size: 90%; text-transform: uppercase; color: #777777; } .display-3 { font-size: 4rem; font-weight: 400; line-height: 1.2; } .mt-2 { margin-top: 20px; } body { background-color: #12181f; //#252E39; } .contact-body { background-color: #f8f9fb; } #support { padding: 120px 0; border-bottom: 1px solid @border-grey; .support-icon-container { text-align: right; @media (max-width: @screen-sm-max) { text-align: center; } > span { font-size: 70px; color: #37A7E8; } } .support-text-container { h3 { margin: 10px 0; } @media (max-width: @screen-sm-max) { text-align: center; } } } #usage { padding: 120px 0; border-bottom: 1px solid @border-grey; .support-icon-container { text-align: right; @media (max-width: @screen-sm-max) { text-align: center; } > span { font-size: 46px; color: #37A7E8; } } .support-text-container { h3 { margin: 10px 0; line-height: 1.5; } @media (max-width: @screen-sm-max) { text-align: center; } } } .second-text { font-size: 1.4em; line-height: 1.6em; color: #fff; color: hsla(0,0%,100%,.8); width: 100%; margin-bottom: 25px; @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { font-size: 1.1em; } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { font-size: 1.2em; } } .domain-container { position: relative; #explain { margin-bottom: 10px; text-align: center; } input { width: 230px; display: inline-block; } #domain-id { display: block; position: absolute; top: 36px; left: 235px; font-weight: bold; } ul.errorlist { right: 132px !important; @media (max-width: @screen-xs-max) { display: none; } } } .outer-footer { border-bottom: 1px solid @border-grey; } .static-header { width: 100%; margin-bottom: 20px; text-align: center; padding-top: 40px; padding-bottom: 30px; background-color: #23b3b9; background-image: -webkit-radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47, 70, 0.26)), -webkit-linear-gradient(108deg, #23b3b9, #1a2980 90%); background-image: radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47, 70, 0.26)), -webkit-linear-gradient(108deg, #23b3b9, #1a2980 90%); .container { position: relative; } .home { color: #fff; text-transform: uppercase; font-weight: bold; } .logo { color: #fff; font-weight: bold; letter-spacing: -1px; background-color: @navbar-default-brand-color; display: inline-block; padding: 10px; } h3 { color: #fff; margin: 15px 0; } } .static-container { .copy-right { display: inline; } .last { text-align: center; border-top: 1px solid @border-grey; padding: 20px 0; margin-top: 20px; } } .vdivider { margin: 0 5px 0 5px; display: inline-block; vertical-align: middle; color: #fff; } #demo-request { .demo-request-container { .col-md-9 { padding: 20px 0 21px; background: rgba(255,255,255,0.125); border: 1px solid @border-grey; p { font-size: 21px; color: #ddd; margin: 0; text-align: center; strong { color: #fff; } } } .col-md-3 { padding: 20px; text-align: center; background: rgba(255,255,255,0.08); border: 1px solid @border-grey; border-left: 0; } } } .round-icon { width: 70px; height: 70px; padding: 10px; text-align: center; margin: 0 auto; -webkit-filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); -moz-filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); -ms-filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); -o-filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); background-color: #fff; border-radius: 70px; border: 0px solid #fff; >span { color: #fff; padding: 4px; font-size: 42px; font-weight: 400; } &.blue { background-color: @blue-color; } &.pink { background-color: @pink-color; } &.purple { background-color: @purple-color; } &.green { background-color: @green-color; } &.teal { background-color: @teal-color; } } #slide-bg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1; > div { position: absolute; top: 0; right: 0; left: 0; bottom: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); z-index: 1; } > div.prev { opacity: 1; transition: opacity 450ms ease; z-index: 3 !important; } > div.fade-out { opacity: 0 !important; z-index: 3 !important; } .landing-bg { #gradient > .front-radial(@light-blue-color); } &.landing > .landing-bg { opacity: 1; z-index: 2; } .product-bg { background: #1e1635; background: -webkit-linear-gradient(bottom right,#4cddff,#3b9aca 10%,#2d6ca5 20%,#2a5291 27%,#283d81 35%,#222654 50%,#1e1635 63%,#0c0010 93%,#000); background: linear-gradient(to top left,#4cddff,#3b9aca 10%,#2d6ca5 20%,#2a5291 27%,#283d81 35%,#222654 50%,#1e1635 63%,#0c0010 93%,#000); } &.product > .product-bg { opacity: 1; z-index: 2; } .pricing-bg { #gradient > .front-radial(lighten(@pink-color, 18%)); } &.pricing > .pricing-bg { opacity: 1; z-index: 2; } .privacy-bg { background: #1b2128; background-image: -webkit-linear-gradient(287deg,#1b2128,#61758e); background-image: linear-gradient(163deg,#1b2128,#61758e); } &.privacy > .privacy-bg { opacity: 1; z-index: 2; } .contact-bg { #gradient > .front-radial-second(lighten(@green-color,12%),@green-color); //background-image: -webkit-linear-gradient(163deg,darken(@green-color, 10%) 20%,@green-color 50%,lighten(@green-color, 10%) 30%); //background-image: linear-gradient(163deg,darken(@green-color, 10%) 20%,@green-color 50%,lighten(@green-color, 10%) 30%); } &.contact > .contact-bg { opacity: 1; z-index: 2; } .managed-bg { background: #c6274c; background-image: -webkit-linear-gradient(287deg,#c6274c,lighten(#c6274c, 10%)); background-image: linear-gradient(163deg,#c6274c,lighten(#c6274c, 10%)); } &.managed > .managed-bg { opacity: 1; z-index: 2; } } .nav-row { margin-bottom: 30px; @media (max-width: @screen-xs-max) { text-align: center; } .pull-left { padding: 0 5px; @media (max-width: @screen-xs-max) { float: none !important; } } .pull-right { padding: 9px 0; } .links { display: inline-block; } a { color: #fff; font-weight: bold; display: inline-block; vertical-align: middle; margin: 0 3px; font-size: 12px; } @media (min-width: @screen-md-min) { a { margin: 0 5px; } } } .characters-msg { margin-top: 0 !important; margin-bottom: 10px !important; } #hero { min-height: 600px; max-height: 1200px; width: 100%; color: #fff; position: relative; height: 100%; @media (max-height: 600px) { position: relative; } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { min-height: 800px; } sup { color: @green-color; margin-left: 2px; } .copyright { font-weight: normal; font-size: 11px; padding: 16px !important; @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { width: 100%; text-align: center; } } .outer-container { position: absolute; top: 0; right: 0; left: 0; bottom: 48px; overflow: hidden; &.full-height { bottom: 0; } @media (max-width: @screen-xs-max) { position: static; } .header { padding-top: 10px; position: relative; z-index: 1000; >.row > div { display: inline-block; vertical-align: middle; } } .slider { position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin-top: 75px; &.animate { -webkit-transition: -webkit-transform .77s cubic-bezier(.225,.5,.165,1); transition: transform .77s cubic-bezier(.225,.5,.165,1); } } .slide-content { position: absolute; left: -100px; top: 0; right: -100px; height: 100%; display: none; @media (max-width: @screen-xs-max) { position: static; } h1 { font-size: 36px; margin: 10px 0; font-weight: 400; line-height: 1.3; @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { font-size: 26px; } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { font-size: 26px; } @media (max-width: @screen-xs-max) { font-size: 17px; } } > div { position: relative; height: 100%; z-index: 40; padding: 0 70px; .row { height: 100%; > div { height: 100%; @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { height: auto; } } } } } .chart-bg { background-image: url("https://app-static.datareportive.com/images/background@2x.png"); background-position: 0 100%; background-repeat: repeat-x; opacity: .05; background-size: 1164px 300px; position: absolute; bottom: 0; width: 100%; height: 135px; @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url("https://app-static.datareportive.com/images/background.png"); } } } .outer-footer { position: absolute; right: 0; left: 0; bottom: 0; font-weight: 600; height: 48px; .container { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { margin: 0 auto; padding: 0; } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { margin: 0; padding: 0; width: 100%; } } .pull-right { padding: 14px; color: @text-color; } .nav-lower-btns { @media (max-width: @screen-xs-max) { display: none; } a { font-weight: 600; padding: 16px 0 15px; display: inline-block; width: 150px; text-align: center; text-decoration: none; font-size: 11px; text-transform: uppercase; @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { width: 125px; } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { width: 16.66%; } .transition(all 250ms ease-in); &.blue { &:hover { color: #fafafa; background-color: @blue-color; } } &.green { &:hover { color: #fafafa; background-color: @green-color; } } &.pink { &:hover { color: #fafafa; background-color: @pink-color; } } &.purple { &:hover { color: #fafafa; background-color: @purple-color; } } &.teal { &:hover { color: #fafafa; background-color: @teal-color; } } &.orange { &:hover { color: #fafafa; background-color: @orange-color; } } } } } } .slide-text { text-shadow: 0 1px 2px rgba(0,0,0,.2); -webkit-font-smoothing: antialiased; } .arrow-container { position: absolute; top: 0; width: 70px; bottom: 0; cursor: pointer; z-index: 120; &:hover { span { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-filter: alpha(opacity=100); -moz-filter: alpha(opacity=100); -ms-filter: alpha(opacity=100); -o-filter: alpha(opacity=100); filter: alpha(opacity=100); } } span { content: ""; display: block; position: absolute; top: 0; bottom: 0; margin: auto 0; width: 19px; height: 58px; background-image: url('../images/arrow.png'); background-repeat: no-repeat; opacity: .8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -webkit-filter: alpha(opacity=80); -moz-filter: alpha(opacity=80); -ms-filter: alpha(opacity=80); -o-filter: alpha(opacity=80); filter: alpha(opacity=80); -webkit-transition: background .4s ease; transition: background .4s ease; top: 50%; position: absolute; margin-top: -26px; } } .left-arrow-container { left: 0; span { left: 20px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } } .right-arrow-container { right: 0; span { right: 20px; } } .feature-table { width: 100%; max-width: 590px; margin: 0 auto; td { padding: 15px; width: 50%; } } .left-container { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max), (max-width: @screen-xs-max) { position: static !important; margin-top: 40px !important; text-align: center !important; } } .right-menu { @media (max-width: @screen-xs-max) { display: none !important; } } #landing-slide { .left-container { position: absolute; top: 50%; margin-top: -166.5px; @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { margin-top: -158.5px; } .btn-primary { margin-right: 5px; } } h3 { @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { font-size: 20px; } } h2 { font-weight: 200; max-width: 768px; margin: 20px auto 0; line-height: 1.5em; margin-bottom: 25px; font-size: 36px; } } #contact-slide { .mheader { min-height: 0; background: #F4F4F6; border-bottom: 0; position: relative; text-align: center; padding: 20px 0; } h3 { color: #fff; font-weight: 200; color: rgba(255, 255, 255, 0.8); text-align: center; margin-bottom: 30px; line-height: 1.3; } h5 { color: #5b5b65; } input[type="submit"] { margin-top: 20px; } span { font-size: 28px; color: #37A7E8; } form { position: relative; overflow: hidden; } .success { background-color: #5cb85c; text-align: center; padding: 8px; font-weight: 600; border-radius: 7px; position: absolute; width: 100%; transition: 300ms all ease; left: 0; &.slide-out { left: -400px; } } .input-label-inline input[type="text"], .input-label-inline input[type="email"] { height: auto; } .form-group { margin: 0 0 10px 0; } .body-modal { position: absolute; top: 50%; left: 50%; margin-top: -233px; margin-left: -170px; width: 340px; } .left-container { position: absolute; top: 50%; margin-top: -163px; } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .body-modal { position: static; margin: 50px auto 0; } } } form .loader > img { display: block; height: 34px; margin: 10px auto 0; } #managed-slide { a { color: #fff; font-weight: bold; } a:hover { color: #fff; } } #product-slide, #privacy-slide, #managed-slide { h3 { color: #fff; font-weight: 200; color: rgba(255, 255, 255, 0.8); text-align: center; margin-bottom: 30px; line-height: 1.3; @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { font-size: 21px; } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { font-size: 17px; } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { font-size: 17px; } } .feature { padding: 20px 0; text-align: center; } .features-menu { padding: 15px; border-top: 1px solid @border-grey; border-bottom: 1px solid @border-grey; } .title-area { > h3 { font-size: 16px; font-weight: 400; margin: 15px 0 5px; color: #fff; @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { font-size: 15px; } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { font-size: 15px; } } > p { color: rgba(255, 255, 255, 0.8); } } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .feature { text-align: left; margin: 0 15px; h3 { text-align: left; } .title-area { display: inline-block; vertical-align: middle; margin-left: 20px; } .round-icon { display: inline-block; vertical-align: middle; } } } } #product-slide, #privacy-slide, #managed-slide { position: absolute; top: 50%; margin-top: -177px; @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { position: static !important; margin-top: 0; } } #pricing-slide, #dashboard-slide { >.row { text-align: center; } .left-container { position: absolute; top: 50%; margin-top: -315px; left: 50%; margin-left: -497px; height: 630px; width: 994px; @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { margin-left: -410px; margin-top: -240px; height: 480px !important; width: 820px; } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { margin-left: -408px; margin-top: -240px; height: 480px !important; width: 820px; } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { position: static; margin-top: 0; margin-left: 0; width: 100%; } } h1 { font-size: 36px; margin-bottom: 10px; font-weight: 600; @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { font-size: 32px; } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { font-size: 26px; } } h3 { color: #fff; font-weight: 200; color: rgba(255, 255, 255, 0.8); @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { font-size: 17px; } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { font-size: 15px; } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { font-size: 14px; } } .pricing-containers { margin-top: 50px; } .pricing-features { margin-top: 40px; } .pricing-container { max-width: 220px; margin: 0 auto; max-height: 500px; border-radius: 7px; width: 300px; margin: 10px; display: inline-block; padding: 10px; height: 400px; box-shadow: 0 15px 35px rgba(0,0,0,.1),0 3px 10px rgba(0,0,0,.07); position: relative; vertical-align: top; .price { font-size: 27px; font-weight: 600; margin: 10px; line-height: 1.1; span { display: block; font-size: 15px; font-weight: 400; margin-top: 5px; } } .icon { font-size: 36px; display: inline-block; vertical-align: middle; margin-right: 10px; } .pf > .title { font-size: 13px; font-weight: bold; display: inline-block; vertical-align: middle; } .btn { width: 100%; position: absolute; bottom: 0; left: 0; padding: 20px; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; text-transform: uppercase; border: 0; font-weight: 600; background-color: rgba(0,0,0,0.2); &:hover { background-color: rgba(0,0,0,0.3); } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { font-size: 11px; } } .pf { padding: 10px; font-size: 14px; } &.free { background-color: @green-color; #gradient > .directional(@green-color, lighten(@green-color, 18%)); } &.plus { background-color: @teal-color; #gradient > .directional(@teal-color, lighten(@teal-color, 18%)); } &.pro { background-color: @orange-color; #gradient > .directional(@orange-color, lighten(@orange-color, 18%)); } &.unlimited { background-color: @brick-color; #gradient > .directional(@brick-color, lighten(@brick-color, 18%)); } @media (min-width: @screen-md-min) and (max-width: @screen-md-max), (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { max-width: 250px; width: 180px; height: 280px; padding: 5px; .price { font-size: 24px; span { font-size: 12px; } } .annum-price { font-size: 12px; margin-bottom: 10px; } .pricing-features { margin-top: 0; } .pricing-container { .btn-primary { font-size: 14px; } } .pf { padding: 5px; .icon { font-size: 26px; } .title { font-size: 13px; } } } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { max-width: 135px; width: 135px; height: 280px; padding: 5px; margin: 10px; .price { font-size: 22px; span { font-size: 13px; } } .annum-price { font-size: 12px; margin-bottom: 20px; } .pricing-features { margin-top: 0; } .icon { font-size: 22px; display: none; } .pf { padding: 5px; .title { font-size: 12px; } } .btn-primary { font-size: 10px; } } } } #landing-image, #product-image, #privacy-image, #dashboard-report-image, #dashboard-report-image-mobile, #managed-image, #db-image { height: 100%; background-size: 100%; background-repeat: no-repeat; background-position: center; @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { background-size: 90%; } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { background-size: 70%; } } #landing-image, #landing-image-mobile { width: 800px; background-image: url('../images/macbook-retina-big.png'); background-position: left; margin-top: -37px; margin-left: -65px; @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { margin-left: -45px; } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { height: 350px; margin: 30px auto; width: 100%; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('../images/macbook-retina-big@2x.png'); } } #dashboard-report-image, #dashboard-report-image-mobile { width: 250px; height: 300px; background-image: url('../images/analytics-box.png'); margin: 0 auto; //margin-left: -65px; @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { width: 250px; height: 300px; margin: 10px auto; background-size: 100%; } @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max), (min-width: @screen-md-min) and (max-width: @screen-md-max) { width: 250px; height: 300px; margin: 10px auto; background-size: 100%; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('../images/analytics-box@2x.png'); } } #dashboard-report-image-mobile { width: 250px !important; height: 300px !important; @media (max-width: @screen-xs) { height: 300px !important; } } #landing-image-mobile { width: 250px !important; height: 250px !important; background-size: 100%; background-repeat: no-repeat; margin: 0 auto; @media (max-width: @screen-xs) { height: 250px !important; } } #product-image { width: 420px; background-image: url('../images/ipad-report.png'); margin: -17px auto 0; @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('../images/ipad-report@2x.png'); } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { width: 355px; background-size: 85%; } @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { width: 355px; background-size: 85%; } } #privacy-image-sm, #db-image-sm { width: 100px; height: 100px; margin: 0 auto 20px; background-image: url('../images/lock.png'); background-size: 100%; @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('../images/lock@2x.png'); } } #privacy-image, #db-image { width: 350px; height: 350px; margin: -38px auto 0; background-image: url('../images/lock.png'); @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('../images/lock@2x.png'); } } #db-image-sm, #db-image { background-image: url('../images/db.svg') !important; } #db-image { height: 390px; } #managed-image-sm { width: 100px; height: 100px; margin: 0 auto 20px; background-image: url('../images/cog.png'); background-size: 100%; @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('../images/cog.png'); } } #managed-image { width: 350px; height: 350px; margin: -38px auto 0; background-image: url('../images/cog.png'); background-size: 100%; @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('../images/cog.png'); } } #large-logo { width: 75px; height: 75px; margin: 0 auto; background-size: 75px; background-image: url('../images/logo@75.png'); @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('../images/logo@150.png'); } } #logo { display: inline-block; vertical-align: middle; width: 48px; height: 48px; background-size: 48px; background-image: url('../images/logo@48.png'); @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('../images/logo@96.png'); } } #logo-text { display: inline-block; vertical-align: middle; color: #fff; font-size: 16px; font-weight: 800; letter-spacing: -1px; margin-left: 8px; } #error-page { width: 100%; height: 100%; background-image: -webkit-radial-gradient(closest-corner,rgba(16,47,70,0) 60%,rgba(16,47,70,.26)),-webkit-linear-gradient(108deg,@teal-color,#1a2980 90%); background-image: radial-gradient(closest-corner,rgba(16,47,70,0) 60%,rgba(16,47,70,.26)),-webkit-linear-gradient(108deg,@teal-color,#1a2980 90%); color: #fff; .section-inner { text-align: center; padding-top: 100px; } a { color: #fff; } } .contact-container { padding-top: 40px; padding-bottom: 40px; @media (max-width: @screen-sm-max) { padding-top: 0; padding-bottom: 0; } .left-container { padding-top: 60px; @media (max-width: @screen-sm-max) { padding-top: 0; margin-top: 0 !important; } } .col-md-5 { @media (max-width: @screen-sm-max) { margin-top: 50px; } .body-modal { @media (max-width: @screen-sm-max) { width: 100%; } @media (max-width: @screen-sm-max) { margin-bottom: 30px; } } } } #hero-page { h1, h2, h3 { color: #fff; } &.contact { #gradient > .front-radial(@light-blue-color); } .header { padding-top: 10px; >.row > div { display: inline-block; vertical-align: middle; } } &.features-page { background-image: none !important; h1 { text-align: center; font-size: 36px; margin: 10px 0; font-weight: 400; line-height: 1.3; margin-top: 100px; } h4 { font-size: 1.4em; line-height: 1.6em; color: #fff; color: hsla(0, 0%, 100%, 0.8); width: 100%; margin-bottom: 25px; margin: 40px 0; } .analytics-box { height: 300px; width: 300px; background-size: 100%; margin: 50px auto; } .arrow-down { background-image: url('../images/arrow.png'); background-repeat: no-repeat; height: 58px; width: 19px; -webkit-transform: rotate(180deg); transform: rotate(90deg); margin: 30px auto; } } } .round-logo { width: 75px; height: 75px; margin: 0 auto; position: absolute; top: -38px; left: 50%; margin-left: -37px; background-size: 75px; background-image: url('../images/logo@75.png'); @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('../images/logo@150.png'); } } #sign-overlay { height: 100%; #gradient > .front-radial(@light-blue-color); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; .top { background-position: 0 100%; background-repeat: repeat-x; opacity: .07; background-size: 1164px 300px; width: 100%; bottom: 70px; position: absolute; top: 0; } } .signup-base { height: auto; } #sign-layout { .form-container { /*position: fixed; top: 50%; left: 50%; transition: all 1100ms ease; z-index: 2;*/ @media (max-width: @screen-xs-max) { .body-modal { width: 100%; #explain { font-size: 10px; } .domain { width: 130px !important; } #domain-id { left: 143px !important; } } } margin-top: 50px; &.slide-out { top: 180%; } .btn-success { width: 100%; } &.signup { } &.signin { #id_domain { margin-bottom: 0; } #domain-id { top: 7px; } &.signin-redirect { margin-left: -200px; margin-top: (-1)*(94.5px+37.5px); } } .mheader { position: relative; background-color: #23b3b9; color: #fff; #gradient > .front-radial(#23b3b9); } h4 { text-align: center; margin: 50px 0 0 0; } .mcontent { padding: 20px; } .subtitle { color: #fff; font-size: 13px; text-align: center; padding: 5px 50px 20px; } p { text-align: center; margin: 10px 0 0; } } .registration-footer { width: 100%; bottom: 0; background: @body-bg; } } .signup-container { @media (min-height: 750px) { .registration-footer { position: fixed; bottom: 0; } /*.form-container { position: fixed; top: 50%; left: 50%; z-index: 2; &.signup { margin-left: -200px !important; margin-top: (-1)*(318.5px+37.5px) !important; } }*/ } } .signin-container { @media (min-height: 400px) { .registration-footer { position: fixed; bottom: 0; } .form-container { position: fixed; top: 50%; left: 50%; z-index: 2; &.signin { margin-left: -200px !important; margin-top: (-1)*(116px+37.5px) !important; } } } @media (max-width: @screen-xs-max) { .form-container { position: static; &.signin { margin-left: 0 !important; margin-top: 50px !important; } } } } .main-form { position: relative; color: @body-bg; a { color: @brand-primary; } .form-control { margin-bottom: 10px; } ul.errorlist { list-style-type: none; position: absolute; margin: 0; padding: 6px 10px; right: 1px; color: red; background-color: #fff; margin-top: 1px; background-color: rgba(255,255,255,0.8); border-top-right-radius: 4px; border-top-left-radius: 4px; border-left: 1px solid @border-grey; } } .headline-text { font-size: 33px; font-weight: 800; letter-spacing: -1px; } .marketing-signup { img.content-img { width: 70%; margin: 30px auto 15px; display: block; } h1 { text-align: center; font-weight: 300; line-height: 1.4; } .marketing-content { max-width: 600px; margin: 0 auto 70px; } .features-header { text-align: center; text-transform: uppercase; font-size: 13px; font-weight: 600; margin-bottom: 25px; } .pr-icon { border-radius: 40px; width: 40px; height: 40px; padding: 10px; font-size: 20px; font-weight: 600; &.blue { background-color: @blue-color; } &.purple { background-color: @purple-color; } &.pink { background-color: @pink-color; } &.green { background-color: @green-color; } &.teal { background-color: @teal-color; } &.orange { background-color: @orange-color; } &.grey { background-color: @dark-grey; } &.yellow { background-color: @yellow-color; } } .pr-feature { margin-top: 10px; display: block; font-size: 14px; } .feature-table td { padding: 10px; vertical-align: top; text-align: center; } } footer ul li { list-style-type: none; padding: 0; margin: 0 10px 0 0; display: inline; } footer { font-size: 13px; margin-top: 40px; border-top: 1px solid @border-grey; padding: 15px 0 5px; ul { padding: 0; display: inline-block; } p { display: inline-block; } div { padding-bottom: 10px; font-size: 10px; } } .home-href { &:hover { text-decoration: none; } } .pricing-table { h1 { margin-bottom: 0; } h3 { margin-top: 0; } } #hero-btns { margin: 40px 0; @media (min-width: @screen-sm-min) { .row { display: table; } [class*="col-"] { float: none; display: table-cell; vertical-align: top; } } .feature-container { /*&:last-child { border-right: 1px solid @border-grey; }*/ text-align: center; //border-left: 1px solid @border-grey; //border-bottom: 1px solid @border-grey; padding: 40px; .feature { h5, p, a { font-size: 14px; } h5 { margin-top: 20px; } } } } #supported_dbs { text-align: center; padding: 120px 0; img { max-width: 820px; width: 100%; } .mb-3 { margin-bottom: 30px; } } #lower-hero-container { background-color: #12181f; @media (max-width: @screen-xs-max) { .scroll-table { overflow: scroll; } } } .features-section { margin: 150px auto 0 !important; } #features { margin: 60px auto 150px; @media (max-width: @screen-xs-max) { text-align: center; } } #dr-customers { background: rgba(255,255,255,0.08); i { height: 100px; background-position: center; background-repeat: no-repeat; background-size: 75%; display: block; @media (max-width: @screen-md-max) { background-size: 100%; } } } .big-section-title { h2 { font-size: 4rem; font-weight: 400; line-height: 1.2; } .col { margin-bottom: 100px; } } #quote { .left-side { background: rgba(255,255,255,0.05); .cnt { width: 100%; vertical-align: middle; height: 500px; position: relative; display: table-cell; blockquote { text-align: left; p { font-size: 23px; } footer { text-align: left; } } } } .outer-cnt { padding: 0; } .right-side { background: #36A8D0; overflow: visible; padding: 0; .cnt { width: 500px; height: 500px; background-size: 125%; background-repeat: no-repeat; overflow: visible; background-position: center; @media (max-width: @screen-xs-max) { width: 95%; } } } } #three-pillars { margin: 120px auto; } #lead-text { margin: 150px 0 120px; } .pricing-table { margin: 0 0 70px; ul { list-style: none; padding: 0; } .table > thead > tr > th { border-bottom: 0; text-align: center; } .table { tr { th, td { border-top: 0; text-align: center; } th { width: 150px; } } } li, td { padding: 10px; &.check { color: lighten(@green-color,20%); &:after { content: "\2714"; } } } } .full-list-title { margin: 50px 0; } .faq-section { h2 { margin-bottom: 50px; } div { margin-bottom: 30px; } } #f-white-label { img { width: 100%; } } #f-embed { iframe { width: 100%; border: 0; height: 1086px; } } #f-emails { img { width: 100%; max-width: 500px; margin: 0 auto; display: block; } } .features-product { margin: 150px auto 50px; } #open-mobile-menu { position: fixed; z-index: 999999; font-size: 26px; top: 0; left: 0; width: 45px; height: 45px; padding: 5px 10px; } #close-mobile-menu { padding: 15px; text-align: right; position: relative; height: 54px; > div { position: absolute; right: 0; padding: 17px 20px; top: 0; } } #mobile-menu { position: fixed; top: 0; bottom: 0; right: 0; left: 0; background: rgba(0,0,0,0.95); z-index: 999999999999; overflow-y: scroll; padding: 0; -webkit-overflow-scrolling: touch!important; cursor: pointer; .transition(250ms all ease-in-out); .translate(0, 0); &.closed { .translate(0, 100%); } .mobile-lng { width: 25px !important; height: 25px !important; background-size: 25px !important; } > a { display: block; padding: 15px; border-top: 1px solid @border-grey; height: 54px; &.icon { line-height: 1.8; } &.link { text-decoration: none; > i { margin-right: 10px; font-size: 25px; vertical-align: middle; } } } }