/* Theme Name: Swan Lake - Lead Generation Marketing Landing Page Author: Adnan and Ahmed Author URI: Version: 1.0 Text Domain: Swan Lake Tags: one-column, two-columns Theme URI: */ /*------------------------------------------------------------------ 1. import files 2. Global style classes 3. main headinig styles / .main-heading 4. main wrapper styles / #wrapper 5. header of the page styles / #header 6. navigation of the page styles / #nav 7. main banner of the page styles / .main-banner 8. quote form of the page styles / .quote-form 9. about section of the page styles / .about-section 10. counter section of the page styles / .counter-section 11. services section of the page styles / .services-section 12. price section of the page styles / .price-section 13. quote section of the page styles / .quote-section 14. footer of the page styles / #footer -------------------------------------------------------------------*/ // devices viewport width starts at: $breakpoints: ( xs-phone: 320px, phone: 480px, tablet: 768px, desktop: 1024px, widescreen: 1300px ); // keywords $media-expressions: ( 'screen': 'screen', 'print': 'print', 'handheld': 'handheld', 'landscape': '(orientation: landscape)', 'portrait': '(orientation: portrait)', 'retina2x': '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)', 'retina3x': '(-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 240dpi)' ); /*------------------------------------------------------------------ 1. import files -------------------------------------------------------------------*/ // ligatured operators ≥ ≤ @import 'vendors/include-media'; @import "bootstrap-custom"; @import "vendors/bootstrap/variables"; @import "vendors/bootstrap/mixins"; @import 'base/mixins'; @import 'base/helpers'; @import "base/wp-reset"; /*------------------------------------------------------------------ 2. Global style classes -------------------------------------------------------------------*/ .dark-bg{background-color: $color1;} .bg-img-full{ background-repeat: no-repeat; background-position: center; background-size: cover; } .bg-img-parallax{background-attachment: fixed;} .overlay{ top: 0; left: 0; right: 0; bottom: 0; opacity: 0.75; position: absolute; pointer-events: none; background-color: $black; } .divider{ background-image: url(images/divider.png); width: 65px; height: 10px; display: block; margin: 0 0 15px; } .divider.center{margin: 0 auto 10px;} .divider.white{background-image: url(images/divider2.png);} .section{ width: 100%; overflow: hidden; position: relative; } .mar-top-xs{margin-top: 30px !important;} .mar-top-sm{margin-top: 60px !important;} .mar-top-md{margin-top: 90px !important;} .pad-top-xs{padding-top: 30px !important;} .pad-top-sm{padding-top: 60px !important;} .pad-top-md{padding-top: 90px !important;} .mar-top-lg{margin-top: 120px !important;} .pad-top-lg{padding-top: 120px !important;} .mar-bottom-xs{margin-bottom: 30px !important;} .mar-bottom-sm{margin-bottom: 60px !important;} .mar-bottom-md{margin-bottom: 90px !important;} .pad-bottom-sm{padding-bottom: 60px !important;} .pad-bottom-xs{padding-bottom: 30px !important;} .pad-bottom-md{padding-bottom: 90px !important;} .mar-bottom-lg{margin-bottom: 120px !important;} .pad-bottom-lg{padding-bottom: 120px !important;} .btn-default{ border: 0; color: $white; font-weight: 700; border-radius: 2px; padding: 16px 43px; transition: all ease 0.3s; font-family: $font-family-ubuntu; &:focus, &:active, &:hover{ color: $white; background-color: $color1 !important; } } body{ &.pattern1{background-image: url(images/patterns/pattern1.png);} &.pattern2{background-image: url(images/patterns/pattern2.png);} &.pattern3{background-image: url(images/patterns/pattern3.png);} &.pattern4{background-image: url(images/patterns/pattern4.png);} &.pattern5{background-image: url(images/patterns/pattern5.png);} &.pattern6{background-image: url(images/patterns/pattern6.png);} &.pattern7{background-image: url(images/patterns/pattern7.png);} &.pattern8{background-image: url(images/patterns/pattern8.png);} &.pattern9{background-image: url(images/patterns/pattern9.png);} &.pattern10{background-image: url(images/patterns/pattern10.png);} &.pattern11{background-image: url(images/patterns/pattern11.png);} &.pattern12{background-image: url(images/patterns/pattern12.png);} &.pattern13{background-image: url(images/patterns/pattern13.png);} &.pattern14{background-image: url(images/patterns/pattern14.png);} } body.boxed-v #wrapper { max-width: 80%; margin: 20px auto; border-radius: 3px; box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.1); } /*------------------------------------------------------------------ 3. main headinig styles / .main-heading -------------------------------------------------------------------*/ .main-heading{ margin-bottom: 76px; .heading{ color: $color5; margin: 0 0 18px; font: 700 28px/30px $font-family-ubuntu; } p{margin: 0;} } /*------------------------------------------------------------------ 4. main wrapper styles / #wrapper -------------------------------------------------------------------*/ #wrapper { width: 100%; overflow: hidden; position: relative; } /*------------------------------------------------------------------ 5. header of the page styles / #header -------------------------------------------------------------------*/ #header{ z-index: 2; position: relative; padding: 34px 0 70px; &.sticky{ #nav{ top: 0; bottom: auto; position: fixed; .nav-list{ border-radius: 0 4px 4px 0; box-shadow: 0 0 10px rgba(0,0,0,0.1); } } } .nav-opener{ width: 45px; height: 40px; display: none; font-size: 24px; margin: 4px 0 0; line-height: 34px; border-radius: 3px; text-align: center; transition: all ease 0.3s; border: 1px solid rgba(255, 255, 255, 0.5); } } /*------------------------------------------------------------------ 6. navigation of the page styles / #nav -------------------------------------------------------------------*/ #nav{ left: 0; right: 0; bottom: -38px; font-weight: bold; position: absolute; transition: all ease 0.3s; font-family: $font-family-ubuntu; .nav-list{ margin: 0; overflow: hidden; background: $white; border-radius: 4px; padding: 18px 31px 18px 28px; li{ padding: 7px 27px 0 0; vertical-align: middle; } a{ color: $color5; transition: all ease 0.3s; } .button{ float: right; padding: 0; } .btn{ color: $white; font-size: 12px; padding: 9px 15px; } } } .top-list{ margin: 0; font-family: $font-family-ubuntu; li{ position: relative; padding: 0 8.8% 0 7%; } .fa{ right: 0; top: -3px; width: 50px; height: 50px; font-size: 18px; line-height: 50px; position: absolute; text-align: center; background: #1f1f1f; border-radius: 560%; border: 1px solid #292929; } strong{ display: block; margin: 0 0 -4px; } a{ color: $color7; } } .mt-social{ margin: 0; font-size: 16px; li{ padding: 0 0 0 5%; } a{ opacity: 0.3; color: $white; transition: all ease 0.3s; &:hover{opacity: 1;} } } #main{ width: 100%; overflow: hidden; position: relative; } /*------------------------------------------------------------------ 7. main banner of the page styles / .main-banner -------------------------------------------------------------------*/ .main-banner{ padding: 220px 0; overflow: hidden; position: relative; &.small{ padding: 180px 0; } .title{ color: $color8; display: block; margin: 0 0 4px; } .heading{ color: $white; margin: 0 0 18px; font: 700 48px/60px $font-family-ubuntu; } .divider{ margin: 0 0 41px; vertical-align: top; display: inline-block; } .btn{ padding: 18px 28px; } .arrow{ right: 40px; width: 185px; height: 103px; bottom: -39px; position: absolute; background-size: cover; background-position: center; background-repeat: no-repeat; } .promo-info{ color: $white; display: block; letter-spacing: 1px; font-family: $font-family-ubuntu; } .btn-play{ width: 60px; height: 60px; font-size: 16px; line-height: 60px; border-radius: 50%; background: $white; text-align: center; padding: 0 0 0 4px; margin: 0 18px 0 0; display: inline-block; vertical-align: middle; transition: all ease 0.3s; } .txt{ z-index: 2; color: $white; position: relative; display: inline-block; vertical-align: middle; font-family: $font-family-ubuntu; } .img-holder{ max-width: 500px; border-radius: 5px; position: relative; margin: 0 auto 30px; box-shadow: 0 44px 32px 0 rgba(0, 0, 0, 0.6); img{border-radius: 5px;} .btn-play{ top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); } } } .main-slider{ .slick-arrow{ top: 50%; border: 0; padding: 0; z-index: 2; width: 30px; opacity: 0.2; font-size: 0; height: 30px; line-height: 0; position: absolute; background: transparent; transition: all ease 0.3s; border: solid $white; border-width: 3px 3px 0 0; transform: translateY(-50%) rotate(45deg); &:hover{opacity: 1;} } .slick-prev{ left: 55px; transform: translateY(-50%) rotate(-135deg); } .slick-next{ right: 55px; } .slick-dots{ left: 0; right: 0; margin: 0; padding: 0; bottom: 40px; text-align: center; position: absolute; li{ padding: 0 3px; text-align: left; display: inline-block; vertical-align: middle; &.slick-active button{opacity: 1;} } button{ border: 0; padding: 0; width: 10px; height: 10px; opacity: 0.2; display: block; overflow: hidden; border-radius: 50%; background: $white; text-indent: -9999px; transition: all ease 0.3s; &:hover{opacity: 1;} } } } /*------------------------------------------------------------------ 8. quote form of the page styles / .quote-form -------------------------------------------------------------------*/ .quote-form{ margin: -97px 0; border-radius: 3px; padding: 56px 30px 69px; background-color: $white; background-repeat: no-repeat; background-position: -470px -270px; .form-heading{ color: $color5; display: block; margin: 0 0 3px; font: 700 28px/30px $font-family-ubuntu; } .form-title{ display: block; margin: 0 0 49px; } .form-control{ height: 48px; outline: none; color: $color3; box-shadow: none; padding: 6px 23px; background: #f5f5f5; border-color: $color6; } .form-group{ overflow: hidden; margin: 0 0 20px; &.has-error .form-control{ color: #ff3333; border-color: #ff3333; } } .fa{ font-size: 12px; margin-right: 2px; } .info{ float: left; font-size: 11px; padding: 16px 0 0; } .btn{ float: right; padding: 11px 28px; opacity: 1 !important; } .form-message{ color: $white; font-size: 11px; font-weight: 600; position: relative; &:after{ top: 14px; left: 17px; width: 20px; content: ""; height: 20px; border-radius: 50%; position: absolute; text-align: center; font-family:'FontAwesome'; } &.error{ margin: 0 0 20px; background: #ff3333; padding: 15px 5px 13px 50px; &:after{ content:"\f00d"; background: #cc2929; } } &.success{ margin: 0 0 20px; background: #698cf0; padding: 15px 5px 13px 50px; &:after{ content:"\f00c"; background: #5470c0; } } } &.style2{ max-width: 1000px; padding: 15px 20px; margin: 0 auto 30px; .form-group{ float: left; width: 250px; margin: 0 20px 0 0; } .form-message{ left: 50%; bottom: -30px; position: absolute; transform: translateX(-50%); padding: 15px 25px 13px 50px; } &.small{ max-width: 460px; } } } /*------------------------------------------------------------------ 9. about section of the page styles / .about-section -------------------------------------------------------------------*/ .about-box{ line-height: 22px; .num{ display: block; margin: 0 0 34px; font: 700 28px/17px $font-family-ubuntu; } .title{ display: block; color: $color5; margin: 0 0 19px; font: 700 18px/20px $font-family-ubuntu; } .divider{ width: 35px; margin: 0 0 17px; } .more{font: 700 12px/20px $font-family-ubuntu;} p{margin: 0 0 20px;} } /*------------------------------------------------------------------ 10. counter section of the page styles / .counter-section -------------------------------------------------------------------*/ .counter-section{ overflow: hidden; .counter{ display: block; font-size: 72px; margin: 0 0 -6px; line-height: 80px; } .txt{ display: block; font-family: $font-family-ubuntu; } } /*------------------------------------------------------------------ 11. services section of the page styles / .services-section -------------------------------------------------------------------*/ .services-section{ overflow: hidden; .services-box{ margin: 0; overflow: hidden; border-radius: 4px; li{ width: 50%; float: left; height: 230px; overflow: hidden; position: relative; background: rgba(33,33,33,1); &:last-child, &:first-child{background: rgba(33,33,33,0.9);} &:hover{ .over { -webkit-transform: translateY(-67%); -ms-transform: translateY(-67%); transform: translateY(-67%); } .icomoon { opacity: 0; -webkit-transform: translateY(-62%); -ms-transform: translateY(-62%); transform: translateY(-62%); } p { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } } .over{ left: 0; right: 0; top: 50%; position: absolute; transition: all ease 0.3s; transform: translateY(-32%); } .divider{ width: 35px; margin: 0 auto 0; } .icomoon{ display: block; font-size: 50px; margin: 0 0 16px; transition: all ease 0.3s; } p{ opacity: 0; color: $color4; max-width: 90%; line-height: 20px; margin: 15px auto 0; transition: all ease 0.3s; transform: translateY(50%); } .title{ display: block; margin: 0 0 15px; font: 700 18px/24px $font-family-ubuntu; } } .txt-box{ padding: 41px 0 0 7.8%; .divider{margin: 0 0 10px;} .main-heading{margin-bottom: 37px;} .list{ color: $color4; font-weight: bold; font-family: $font-family-ubuntu; .fa{ font-size: 17px; margin: 0 11px 0 4px; vertical-align: middle; } li{margin: 0 0 11px;} } } } /*------------------------------------------------------------------ 12. price section of the page styles / .price-section -------------------------------------------------------------------*/ .price-box{ background: $white; border: 1px solid $color6; .header{ color: $color4; font-size: 12px; padding: 30px 10% 33px; } .title{ color: $color5; display: block; font-size: 14px; font-family: $font-family-ubuntu; } .price-txt{ display: block; font-size: 14px; margin-bottom: 5px; .price{ font-size: 38px; line-height: 50px; display: inline-block; vertical-align: bottom; margin: 0 4px -5px -5px; } .txt{ letter-spacing: 1px; display: inline-block; vertical-align: bottom; } } p{margin: 0;} .box{ line-height: 22px; padding: 38px 9.4%; border-top: 1px solid $color6; p{margin: 0 0 22px;} } h3{ color: $color5; margin: 0 0 19px; font: 700 18px/24px $font-family-ubuntu; } .divider{ width: 34px; margin: 0 0 15px 3px; } .order{font: 700 12px/16px $font-family-ubuntu;} } /*------------------------------------------------------------------ 13. quote section of the page styles / .quote-section -------------------------------------------------------------------*/ .quote-section{ color: $color8; overflow: hidden; position: relative; .subtitle{display: block;} h2{ margin: 0 0 23px; font: 700 48px/69px $font-family-ubuntu; } p{margin: 0 0 28px;} .divider{margin: 0 auto 14px;} } /*------------------------------------------------------------------ 14. footer of the page styles / #footer -------------------------------------------------------------------*/ #footer{ width: 100%; overflow: hidden; position: relative; .bottom{ margin-top: 30px; padding-top: 21px; border-top: 1px solid $color2; } } .popup-holder{ height: 0; overflow: hidden; position: relative; } .lightbox .quote-form{ margin: 0; width: 450px; } #back-top { bottom: 0; opacity: 0; z-index: 9; right: 20px; width: 50px; color: #fff; height: 50px; z-index: 9999; cursor: pointer; font-size: 25px; position: fixed; line-height: 47px; text-align: center; border-radius: 3px; background: #252525; transition: all .6s ease; transform: translateY(40px); -ms-transform: translateY(40px); -webkit-transition: all .6s ease; -webkit-transform: translateY(40px); } #back-top.show { opacity: 1; transform: translateY(-20px); -ms-transform: translateY(-20px); -webkit-transform: translateY(-20px); } #back-top:hover {opacity: .9;} .loader-container{ top: 0; left: 0; right: 0; bottom: 0; z-index: 99; position: fixed; background: rgba(0, 0, 0, 0.7); .holder{ top: 50%; left: 50%; position: absolute; transform: translate(-50%,-50%); } } .la-line-scale, .la-line-scale > div { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .la-line-scale { display: block; font-size: 0; color: #fff; } .la-line-scale.la-dark { color: #333; } .la-line-scale > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor; } .la-line-scale { width: 40px; height: 32px; } .la-line-scale > div { width: 4px; height: 32px; margin: 2px; margin-top: 0; margin-bottom: 0; border-radius: 0; -webkit-animation: line-scale 1.2s infinite ease; -moz-animation: line-scale 1.2s infinite ease; -o-animation: line-scale 1.2s infinite ease; animation: line-scale 1.2s infinite ease; } .la-line-scale > div:nth-child(1) { -webkit-animation-delay: -1.2s; -moz-animation-delay: -1.2s; -o-animation-delay: -1.2s; animation-delay: -1.2s; } .la-line-scale > div:nth-child(2) { -webkit-animation-delay: -1.1s; -moz-animation-delay: -1.1s; -o-animation-delay: -1.1s; animation-delay: -1.1s; } .la-line-scale > div:nth-child(3) { -webkit-animation-delay: -1s; -moz-animation-delay: -1s; -o-animation-delay: -1s; animation-delay: -1s; } .la-line-scale > div:nth-child(4) { -webkit-animation-delay: -.9s; -moz-animation-delay: -.9s; -o-animation-delay: -.9s; animation-delay: -.9s; } .la-line-scale > div:nth-child(5) { -webkit-animation-delay: -.8s; -moz-animation-delay: -.8s; -o-animation-delay: -.8s; animation-delay: -.8s; } .la-line-scale.la-sm { width: 20px; height: 16px; } .la-line-scale.la-sm > div { width: 2px; height: 16px; margin: 1px; margin-top: 0; margin-bottom: 0; } .la-line-scale.la-2x { width: 80px; height: 64px; } .la-line-scale.la-2x > div { width: 8px; height: 64px; margin: 4px; margin-top: 0; margin-bottom: 0; } .la-line-scale.la-3x { width: 120px; height: 96px; } .la-line-scale.la-3x > div { width: 12px; height: 96px; margin: 6px; margin-top: 0; margin-bottom: 0; } #bgvid { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 777px; width: auto; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: 1s opacity; transition: 1s opacity; } #bgvid .vegas-slide{height: 100%;} /* * Animation */ @-webkit-keyframes line-scale { 0%, 40%, 100% { -webkit-transform: scaleY(.4); transform: scaleY(.4); } 20% { -webkit-transform: scaleY(1); transform: scaleY(1); } } @-moz-keyframes line-scale { 0%, 40%, 100% { -webkit-transform: scaleY(.4); -moz-transform: scaleY(.4); transform: scaleY(.4); } 20% { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); transform: scaleY(1); } } @keyframes line-scale { 0%, 40%, 100% { -webkit-transform: scaleY(.4); -moz-transform: scaleY(.4); -o-transform: scaleY(.4); transform: scaleY(.4); } 20% { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } } @-o-keyframes line-scale { 0%, 40%, 100% { -webkit-transform: scaleY(.4); -o-transform: scaleY(.4); transform: scaleY(.4); } 20% { -webkit-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } }