/*@import "_variables"; */ :root { font-size: 14px; } /* variables */ $BE__color__background-body: #fff; $BE__color__background-screen: #f2f2f2; $BE__color__background-hr: #ccc; $BE__color__background-button: #006fe5; $BE__color__background-pre: #eee; $BE__color__background-ins: #fff9c0; $BE__color__background-blue:#004998; $BE__color__background-dark-blue:#346ca9; $BE__color__background-light-blue:#4592e4; $BE__color__background-dark-bluenew:#001933; $BE__color__background-dark-gray:#3b3b3b; $BE__color__text-screen: #757577; $BE__color__text-input: #666; $BE__color__text-input-focus: #111; $BE__color__link: #004998; $BE__color__link-visited: #006fe5(1); $BE__color__link-hover: #006fe5; $BE__color__text-main: #8d8d8d; $BE__color__white-text:#ffffff; $BE__color__heading:#252525; $BE__color__sub-link:#252525; $BE__color__date:#b0b0b0; $BE__color__important:#ff0000; $BE__color__gray-text:#cccccc; $BE__color__border-button: #e5e5e5; $BE__color__border-button-hover: #ccc #bbb #aaa; $BE__color__border-button-focus: #aaa #bbb #bbb; $BE__color__border-input: #e3e3e4; $BE__color__border-abbr: #666; $BE__color__border-white:#ffffff; $BE__color__border-link:#004998; $BE__font__main: sans-serif; $BE__font__code: Roboto; $BE__font__pre: "Courier 10 Pitch", Courier, monospace; $BE__font__line-height-body: 1.5; $BE__font__line-height-pre: 1.6; $BE__font__code__script:'Sacramento', cursive; $BE__font__code__ico: FontAwesome; /* Mixings */ @mixin font-size($sizeValue: 1) { font-size: ($sizeValue * 14) * 1px; font-size: $sizeValue * 1rem; } @mixin border-radius($sizeValue: 1) { -webkit-border-radius: $sizeValue * 1rem; -moz-border-radius: $sizeValue * 1rem; -ms-border-radius: $sizeValue * 1rem; border-radius: $sizeValue * 1rem; } @mixin box-shadow($top, $left, $blur, $color, $inset: false) { @if $inset { -webkit-box-shadow:inset $top $left $blur $color; -moz-box-shadow:inset $top $left $blur $color; box-shadow:inset $top $left $blur $color; } @else { -webkit-box-shadow: $top $left $blur $color; -moz-box-shadow: $top $left $blur $color; box-shadow: $top $left $blur $color; } } body{ font-family: $BE__font__code; @include font-size(1); color:$BE__color__text-main; } a, a:visited{color:$BE__color__link;} a, a:hover{text-decoration:none} a:active, a:hover { color: $BE__color__link-hover; } h1, h2, h3, h4, h5, h6 {font-weight:bold; color:$BE__color__heading;} .site-title a{color:$BE__color__text-screen; &:hover{color:$BE__color__link-hover;} } h1.site-title{ margin-bottom:0 } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea, select{ @include border-radius(0); border-color:$BE__color__border-input;} section{margin:5rem 0} .site-description sub{@include font-size(.8);} button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover{background-color:transparent;} button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus{border:none; outline:0} button, input[type="button"], input[type="reset"], input[type="submit"]{border:none; background:transparent;} .btn{padding:0} h1{@include font-size(1.5); @media (min-width: 576px) { @include font-size(2) } @media (min-width: 736px) { @include font-size(2) } } h2{@include font-size(1.4); @media (min-width: 576px) { @include font-size(1.8) } @media (min-width: 736px) { @include font-size(1.5) } } h3{@include font-size(1.2); @media (min-width: 576px) { @include font-size(1.5) } } /* Extend */ .cta-btn-border { border: 2px solid $BE__color__border-white; padding: 1rem; color: $BE__color__white-text; text-transform:uppercase; @include border-radius(0); } .heading3{ color:$BE__color__heading; } .box-hover-effect{ @include box-shadow(0, 0px, 20px, rgba(166, 166, 166, 0.25)); background-color:$BE__color__background-body; padding:3rem; } .fontawesome-icon{ font-family: $BE__font__code__ico; font-style: normal; font-weight: normal; text-decoration: inherit; position: absolute; } .rating{ @include font-size(.8); span{ &:before{ color:$BE__color__background-dark-blue; }} } span.onsale{position: absolute; background-color: $BE__color__background-dark-blue; padding: 0.3rem 1rem; top: 14px; left: 0px; color: $BE__color__white-text; font-weight: bold; z-index: 9; width: 60px} /* Responsive nav menu */ .menu-toggle{ top: 30px; right: 3px; text-transform: uppercase; width: auto !important; width: 7%; height: 30px; position:fixed; > div{ height: 10px; width: 10px; margin-left: 0.35vw; display: inline-block; position:relative; } div span{ display: block; position: absolute; top: 8px; width: 10px; height: 1px; margin-top: -1px; background-color:$BE__color__text-screen; &:first-child{ margin-top:-5px; } &:last-child{ margin-top:3px; } } } .bcorporate_home_banner_section{ position:relative; .caption-text{ position: absolute; top: 0; right: 0; left: 0; height: 50px; bottom: 0; margin: auto; } } h2.caption-text-heading{ color:$BE__color__white-text; @include font-size(1.6); span{ font-family:$BE__font__code__script; font-weight:400;} } .about_bottom_text{ margin:4rem 0; a{ font-family:$BE__font__code__script; @include font-size(1.8); text-decoration:underline; } &:hover{ text-decoration:none } } .home_services_post_wrap{ .services_single{ margin:1rem 0; h3{ margin:2rem 0 1.5rem; &:hover{color:$BE__color__link;} } .content_part_feature{ margin:1rem } } } .cta-btn{ @extend .cta-btn-border; @include font-size(1); background-color:$BE__color__background-light-blue; border-color:$BE__color__background-light-blue; padding:.5rem 1rem; } .star-rating{@extend .rating; display: inline-block;} input[type="number"]{width: 5rem; padding: 0.35rem; margin-right: 1rem;} #bcorporate_home_portfolio_wrap{ background-color:$BE__color__background-screen;padding:4rem 0; margin-bottom:0; @media (min-width: 1024px) { padding: 6rem 0; } h1{} .homepage_portfolio_sub_text{@include font-size(1.2);} } .home_portfolio_post_wrap{ .portfolio_single_wrap{ background-color:$BE__color__background-body;margin-top:2rem; h3 a{ @extend .heading3; &:hover{color:$BE__color__link} } img{width:100%} .category{margin-bottom:.5rem} } .content_part_portfolio{padding:1.5rem} ul.post-categories{margin:0; padding:0; list-style:none; a{ @include font-size(.9); font-weight:bold; color:$BE__color__sub-link; } } } #bcorporate_home_ctaone_wrap{ background-color:$BE__color__background-blue; padding:4rem 0; color:$BE__color__white-text; margin-top:0; h1{ @include font-size(2); color:$BE__color__white-text; } .bcorporate_home_ctaone_sub-text{@include font-size(1.2);} .cta-btn{ @extend .cta-btn-border; @include font-size(1.2); width:238px; background-color: transparent; } } #bcorporate_home_feature_wrap{ @media (min-width: 1024px) { margin: 7rem 0; } .services_single{margin-top:3rem; .services_single-wrap{padding: 0 1rem;}} .home_feature_icon{margin-bottom:2rem;} } #bcorporate_home_services_wrap{ h3 a{ @extend .heading3; &:hover{color:$BE__color__link} } .services_single-warp{ padding:3rem; &:hover{@extend .box-hover-effect; } } } #bcorporate_home_blog_wrap{ background-color:$BE__color__background-screen;padding:4rem 0; margin-bottom:0; .home_blog_post_wrap{ margin:1rem 0; } .blog_single{ margin-top:2rem; img{ width:100%;} } .content_part_blog{ background-color:$BE__color__background-body; padding:2rem ; } h3 a{ @extend .heading3; &:hover{color:$BE__color__link} } .read_me_blog{ @extend .cta-btn-border; @include font-size(1); width:168px; color:$BE__color__link; border-color:$BE__color__border-link; text-transform: none; padding:.5rem 1rem; } .Bcorp_comment{ line-height: 2.6rem; vertical-align: middle;} .comment_num{ color:$BE__color__text-main; .fa{ margin-right: .5rem; }}} #bcorporate_home_testimonial_wrap{ background-color:$BE__color__background-dark-blue; margin-top:0; padding:4rem 0; color:$BE__color__white-text; span.homepage_testimonial_sub_title{ @include font-size(1.2); } h1.homepage_testimonial_main_title{ color:$BE__color__white-text; @include font-size(2); } .main_content_testimonial{ @include font-size(.9); padding:0 2rem } .testimonial_image {margin:2rem 0 1.5rem ;} .testimonial_image img{ @include border-radius(50); width:86px; height:86px; } .testimonial_single{ margin-top:3rem; } .testimonial_author{ h3{ color:$BE__color__white-text; } span{ display :block; opacity:.46; @include font-size(.8); font-weight:300; display:block; margin:.8rem 0; } } } #bcorporate_home_ctatwo_wrap{ h1{ @include font-size(2.5); } .bcorporate_home_ctatwo_sub-text{@include font-size(1.2); font-weight:300;} .cta-btn{ @extend .cta-btn-border; @include font-size(1); width:138px; background-color:$BE__color__background-light-blue; border-color:$BE__color__background-light-blue; padding:.5rem; } } .bcorp_top_footer { background-color:$BE__color__background-dark-bluenew; padding:4rem 0; color:$BE__color__white-text; margin-top:0; margin-bottom:0; h2.widget-title{ color:$BE__color__white-text; margin-bottom: 1.5rem; } .fa{margin-right:10px} .bcorp_email_footer, .bcorp_phone_footer, .bcorp_location_footer{ @include font-size(.8); margin-bottom:.8rem; } hr{ background-color:$BE__color__background-body; opacity:.1; margin-bottom: .7rem; margin-top: .7rem; } .widget-area{ .widget_nav_menu ul{ margin:0; padding:0; li{list-style: none; border:none; a{ color:$BE__color__white-text; padding-left: 0; font-weight: normal; &:before{content:'';} }} } .widget{ margin-bottom: 3rem; } } } .site-info{background-color:$BE__color__background-dark-gray; .copyright{margin-top:1.5rem; color:$BE__color__white-text; a{color:$BE__color__white-text;}}} @media (min-width: 576px){ .bcorporate_home_banner_section { .caption-text{ height:0; top:0; } } } @media (min-width: 736px){ .headerwrap{ position: absolute; top: 0; left: 0; width: 100%; z-index: 999; } .site-title a{color:$BE__color__white-text;} .site-description sub{color:$BE__color__white-text; @include font-size(1.2); } .main-navigation{ > ul { margin-top: 0; > li{ @include font-size(1.2); margin: 0 1rem; padding: 2.3rem 0; } .bcorporate_download_btn{background-color:$BE__color__background-button; padding:0; margin-top: 1.7rem; a{ padding: 0.5rem 1.4rem;} } a{ color:$BE__color__white-text; text-transform:uppercase; } ul.sub-menu{margin: 0; box-shadow: none; background-color: $BE__color__background-body; padding: 2rem; text-align: left; @include font-size(1); a{ color:$BE__color__text-screen; padding: .5rem 0; text-transform: none; &:hover{ font-weight:bold; color:$BE__color__link-hover; } } } } } } @media (min-width: 1024px){ h2.caption-text-heading{@include font-size(5.5); width: 910px; margin: 0 auto;} #bcorporate_home_about_wrap{background-position: center bottom; background-repeat: no-repeat; background-size: cover;} .about_bottom_text{ a{ @include font-size(3.5); } } .bcorporate_home_banner_section { .caption-text{top: -150px;} } #bcorporate_home_feature_wrap{ .header_part_feature{float:left;} .content_part_feature{float: left; width: calc(100% - 64px); text-align: left; margin-left: 25px; h3{ margin-bottom: 1.5rem; }}} .bcorp_top_footer { h2.widget-title{ @include font-size(1.4); } } .site-branding{ position:absolute; left:2rem; top:2rem; } .main-navigation{ position:absolute; right:0; top:2rem; } #bcorporate_home_testimonial_wrap{ h1.homepage_testimonial_main_title{@include font-size(3.5);}} } /*blog*/ .site-content{margin:7rem 0; } .bcorporate_banner_section{ position:relative; .text-center{ position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; height:200px; color:$BE__color__white-text; } h1.inner_page_title{color:$BE__color__white-text; } span[property="itemListElement"] span{color:$BE__color__white-text;} } .woocommerce , .widget-area { h2.widget-title{@include font-size(1.3);} .widget{margin-bottom:3rem; ul{margin:0; padding:0; list-style:none; > li{padding:1rem 0; border-bottom:1px solid $BE__color__border-button; ul.children{ margin:1rem 1rem 0; li{border:none; padding:.1rem 0; a{font-weight: 400;}} } } a{display:inline-block; color:$BE__color__heading; font-weight:bold; position: relative; padding-left: 1rem; &:before{ content: "\f0c8"; @extend .fontawesome-icon; @include font-size(.35); left: 0; top: 40%; } &:hover{color:$BE__color__link-hover; } } span.post-date{ &:before{ content:'';} } } ul.product_list_widget{list-style: none; li{ &:after{clear:both; content: ''; display: table;} } a{ padding-left: 0; display: block; &:before{ content:''; } img{ width: 80px; height: 80px; float: left; margin-right: 1rem;} } } .search-form, .woocommerce-product-search{ position: relative; label{display:block;} input.search-field{padding:1rem; width:100%; position: relative; } .search-submit, input[type="submit"]{ display: none; } &:after{ content: "\f002"; @extend .fontawesome-icon; right: 20px; top: 30%; color: $BE__color__sub-link; } } } .widget_recent_entries ul a{ display: block; } .widget_price_filter .price_slider_wrapper .ui-widget-content{margin:2rem 0;} .widget_price_filter .ui-slider .ui-slider-range{background-color: $BE__color__background-light-blue;} .widget_price_filter .ui-slider .ui-slider-handle{background-color: $BE__color__background-dark-blue;} .widget_price_filter .price_slider_amount .button{@extend .cta-btn-border; @include font-size(.8); width:118px; background-color:$BE__color__background-light-blue; border-color:$BE__color__background-light-blue; padding:.5rem; line-height:1.5;} .widget_price_filter .price_label{font-weight: bold; color: $BE__color__heading; } .price ins, .woocommerce-Price-amount{color:$BE__color__heading;} del .woocommerce-Price-amount{color:$BE__color__gray-text;} } article{ border-bottom:1px solid $BE__color__border-button; margin-bottom:4rem;} img{margin-bottom:2rem;} .bcorporate_pubslised_date strong, .post-categories a, .bcorporate_tag a{color:$BE__color__heading;margin-right:1rem; &:hover{ color:$BE__color__link-hover; }} .post-categories{margin:0; padding:0; list-style:none; display: inline-block;} h2.entry-title{ margin:2rem 0 1rem; @include font-size(2); a{color:$BE__color__heading; &:hover{color:$BE__color__link-hover;}} } .entry-content{margin-bottom:2rem;} .entry-footer{ a{color:$BE__color__heading; @include font-size(1.1); font-weight:bold; &:hover{color:$BE__color__link-hover;}} } nav.pagination{ .page-numbers{ display: inline-block; vertical-align: middle; line-height: normal; @include font-size(1); min-width: 34px; height: 34px; line-height: 34px; text-align: center; font-weight: bold; color: $BE__color__text-main; &:hover{color:$BE__color__link-hover;} } .next, .prev{ position: relative; border: 1px solid $BE__color__border-button; } .current{ &:hover{ color: $BE__color__text-main;} } } .blog-single-page{ .post-navigation{ border-top: 1px solid $BE__color__border-button ; border-bottom: 3px solid $BE__color__border-button; padding: 1.2rem 0; .nav-previous a i{margin-right: 1rem;} .nav-next a i{margin-left: 1rem;} } article.category-blog{ margin-bottom:4rem;} img{margin-bottom:2rem;} .post-categories{margin:0; padding:0; list-style:none; display: inline-block;} .bcorporate_pubslised_date strong, .post-categories a, .bcorporate_tag a{color:$BE__color__heading;margin-right:1rem; &:hover{ color:$BE__color__link-hover;} } } .page-template-tpl-contact { .site-content{margin-top:0} .contact_social_wrap{background-color:$BE__color__background-screen; padding:7rem 0;} } .contact_social_wrap { strong{ color:$BE__color__heading; @include font-size(1.2);} .contact-info{margin-bottom:2rem} .fa-icon{display:inline-block; vertical-align:top; } .fa{margin-right:1rem; @include font-size(2); color:$BE__color__heading;} .contact-desc{display:inline-block; @include font-size(1.1); font-weight:300;} } .contact_form_wrap{padding:7rem 0 0; h2{margin-bottom:2rem;} label{width:8rem; font-weight:bold; color:$BE__color__heading; span{color:$BE__color__important;}} .wpcf7-form-control-wrap input, .wpcf7-form-control-wrap textarea{padding:0.8rem .5rem; width:calc(100% - 8rem);} label[for="your-message"]{vertical-align :top;} .wpcf7-submit{ @extend .cta-btn-border; @include font-size(1); width:138px; background-color:$BE__color__background-light-blue; border-color:$BE__color__background-light-blue; padding:.5rem; line-height:1.5; } .contact_map{margin-top:6rem; iframe{border:.5rem solid $BE__color__border-input;}} } /*shop*/ .woocommerce{ .woocommerce-result-count{font-weight: bold; color: $BE__color__heading; float: left; line-height: 3.9rem;} .woocommerce-ordering{float: right; margin: 0 0 2rem; select{padding:1rem; position: relative; } } ul.products{ clear:both; li.product{text-align: center; position: relative; img{margin-bottom: 2.8rem;} .woocommerce-loop-product__title{ @include font-size(1.5); margin-bottom: 1.5rem;} a{color: $BE__color__text-main;} .button{ @extend .cta-btn-border; @include font-size(.8); width:118px; background-color:$BE__color__background-light-blue; border-color:$BE__color__background-light-blue; padding:.5rem; margin: 1.5rem auto; } span.onsale{position: absolute; background-color: $BE__color__background-dark-blue; padding: 0.3rem 1rem; top: 10px; right: 10px; color: $BE__color__white-text; font-weight: bold; left:inherit;} .star-rating{position: absolute;left: 10px;top: 10px; @extend .rating; } } .price ins, .woocommerce-Price-amount{color:$BE__color__heading;} del .woocommerce-Price-amount{color:$BE__color__gray-text;} } .single_add_to_cart_button{@extend .cta-btn-border; @include font-size(.8); width:118px; background-color:$BE__color__background-light-blue; border-color:$BE__color__background-light-blue; padding:.5rem; line-height:1.5;} .cross-sells{width: 47.8260869565%; float: left; margin-right: 4.347826087%;} .cart_totals { width: 47.8260869565%; float: right; margin-right: 0;} .checkout-button{@extend .cta-btn-border; @include font-size(1.2); display: block; background-color:$BE__color__background-dark-blue; border-color:$BE__color__background-dark-blue; padding:1rem; line-height:1.5; text-align: center;} } .quantity{display: inline-block;} nav.woocommerce-pagination{ ul{margin: 0; padding: 0; text-align: center; li{ display: inline-block; a.page-numbers{ display: inline-block; vertical-align: middle; line-height: normal; @include font-size(1); min-width: 34px; height: 34px; line-height: 34px; text-align: center; font-weight: bold; color: $BE__color__text-main; &:hover{color:$BE__color__link-hover;} } .next, .prev{ position: relative; border: 1px solid #e5e5e5;} } }} .error-404{ .main_404_title{ @include font-size(10); font-weight: bold; color:$BE__color__heading; margin: 5rem 0 0; } .sub_404_title{ @include font-size(1.5); color: $BE__color__heading; margin:0 0 2rem; } .main_404_text{margin-bottom:2rem;} } .single-product div.product .woocommerce-product-gallery{ width: 40%; float: left; } .single-product div.product .summary{width: 60%; float: right;padding-left: 2rem; } .single-product div.product .woocommerce-tabs{clear: both; padding: 3rem 0 0;} .woocommerce .woocommerce-tabs ul.tabs li{display: inline-block;} .woocommerce .woocommerce-tabs ul.tabs li a{@extend .cta-btn-border; @include font-size(1.2); background-color:$BE__color__background-light-blue; border-color:$BE__color__background-light-blue; padding:.5rem 2rem; line-height:1.5; text-transform: none;} .woocommerce .woocommerce-tabs ul.tabs li.active a{background-color: transparent; color: $BE__color__text-screen;} .woocommerce div.product div.images .flex-control-thumbs li{ padding: .2rem; } .woocommerce-info, .woocommerce-noreviews, p.no-comments{ background-color: transparent !important; } p.stars{ @include font-size(.8); display: inline-block; &:hover a:before{color:$BE__color__background-dark-blue !important;} } .comment-form-comment{ label{vertical-align: top; } textarea{padding: 0.8rem 0.5rem; width: calc(100% - 8rem);} } .product_meta{margin: 1rem 0;} p.form-submit{ input{ @extend .cta-btn-border; @include font-size(1); width:138px; background-color:$BE__color__background-light-blue; border-color:$BE__color__background-light-blue; padding:.5rem; line-height:1.5; } } .woocommerce-Reviews{ label{width:8rem; font-weight:bold; color:$BE__color__heading; span{color:$BE__color__important;}} } .woocommerce .related.products, .woocommerce .cart-collaterals{ h2{margin-bottom: 2rem;} } .woocommerce-cart .site-main .woocommerce-cart-form{ background-color: $BE__color__background-screen; padding:3rem; margin-bottom: 5rem; } table.shop_table_responsive thead{background-color: $BE__color__background-body; } table.shop_table_responsive { tr{ td, th{ padding: 1rem; color: $BE__color__heading; } td{ border-bottom:1px solid $BE__color__border-button; } td.product-name{@include font-size(1.3); font-weight: bold; a{color: $BE__color__heading;}} } .product-thumbnail{ img{width: 130px} } #coupon_code{padding: .6rem;} .coupon{float: left;} input.button{@extend .cta-btn-border; @include font-size(1); width:138px; background-color:$BE__color__background-light-blue; border-color:$BE__color__background-light-blue; padding:.5rem; line-height:1.5;} input[name="update_cart"]{float: right;} } .search-results section.content-area{margin-top: 0; margin-bottom: 0} .pagination{ .page-numbers{ display: inline-block; vertical-align: middle; line-height: normal; @include font-size(1); min-width: 34px; height: 34px; line-height: 34px; text-align: center; font-weight: bold; color: $BE__color__text-main; padding: 0 1rem; &:hover{color:$BE__color__link-hover;} } .next, .prev{ position: relative; border: 1px solid $BE__color__border-button; } .current{ &:hover{ color: $BE__color__text-main;} } } .gallery-caption{ text-decoration: none; }