/* * Main.less * Main Design for theme * This file contains information about the Structure of the theme. * * Index: * * • Pre Requisite/CSS * • Top Bar * • Top Menu * • Search Bar * • Social Icons * • Masthead a.k.a Header * • Slider * • Content * • Primary * • Secondary(if any) * • Footer * • Widget Area(if any) * • Colophon * • Other Responsive Codes (Responsive codes are present, below each section) */ /* ---------------- Fonts ----------------------------------- */ @import url(http://fonts.googleapis.com/css?family=Roboto:100,300,400,600,700,300); /* ---------------Parametric Mixins ------------------------ */ .transition(@value) { transition: @value; -webkit-transition: @value; -moz-transition: @value; -o-transition: @value; -ms-transition: @value; } /* --------------- Color Variables ------------------------- */ @accent: #A45555; @accent-hover: saturate(@accent,20%); @content: #393939; @default-background: #ffffff; @footer: #252525; /* ---------------- Font Variables ------------------------- */ .site-title-font { font-family: 'Roboto', Arial, sans-serif; } .body-font { font-family: "Roboto", sans-serif; } /* ------------------- Pre Requisite/Reset ---------------- */ .container { margin: auto; } a:hover { text-decoration: none; } body { overflow-x: hidden; background: #eee; .body-font; color: @content; } #page { background: @default-background; padding: 0; margin-top: 15px; } #content { background: @default-background; clear: both; } a { color: @accent; transition: 0.4s all ease; &:visited { color: @accent; } &:hover { color: @accent-hover; } } /*------------------masthead-----------------*/ #masthead { text-align: left; padding: 20px 0px; border: none; position: relative; margin-bottom: 20px; .site-title { .site-title-font; position: relative; padding-top: 18px; a { color: @accent; font-size: 36px; font-weight: 300; -webkit-backface-visibility: hidden; -webkit-transform-style: flat; display: inline-block; } margin-top: 7px; margin-bottom: 5px; } .site-description { margin-top: 10px; font-size: 14px; margin-bottom: 0px; font-weight: normal; color: @content; } //------------Social Icons -------------------- // #social-icons { padding-top: 2px; float: right; margin-top:2px; overflow: hidden; padding-bottom: 7px; -webkit-backface-visibility: hidden; text-align: right; padding-right: 0px; clear: both; img { width: 33px; } } //----------------- Top Search Form ---------- // .search-form-top { float: right; padding-top: 7px; input[type=text] { border-radius: 0px; border-color: #eee; padding: 7px; outline: none; width: 240px; .transition(0.4s ease); } } @media screen { @media (max-width: 991px) { #social-icons, .search-form-top { float: none; text-align: center; } #social-icons { a { float: none; text-align: center; } } .search-form-top { margin-right: 0px; } .container .col-md-6 { text-align: center; } } } } /*------------------ Navigation -------------- */ #top-nav { #site-navigation { margin-bottom: 0px; text-align: center; font-size: 15px; padding-left: 0px; -webkit-backface-visibility: hidden; margin-top: 0px; a { color: @content; padding:20px 15px; padding-top: 5px; .body-font; &:hover { color: @accent; } } ul { margin-left: 0px; z-index: 99999; float:left; li{ float: left; display: inline-block; } & > li:first-child a { padding-left: 0px; } ul { background: @default-background; border-top: solid 2px @accent; box-shadow: none; padding: 15px; padding-bottom: 25px; top:3.1em; a { padding: 4px 0px; font-size: 14px; text-align: left; color: lighten(@content, 40%); box-shadow: 0 1px 1px -1px #ddd; font-weight: lighter; } ul { top: -0.1em; } } } } @media screen { @media (max-width: 600px) { h1.menu-toggle { .site-title-font; font-size: 18px; text-transform: uppercase; margin-bottom: 15px; } #site-navigation { ul ul { display: none !important; } ul { margin-left: 16%;} ul li { display: block; width: 80%; a { padding: 5px inherit; } } } } } } /* -------------------- Slider -------------------*/ #slider-wrapper { clear: both; position: relative; margin-bottom: 50px; margin-top: -20px; border-top: solid 1px @accent; border-bottom: solid 1px @accent; z-index: 9999; a.slideurl { display: block; width: inherit; height: inherit; pointer-events: all; } .frame-c { padding: 0px; } .slider-caption { position: absolute; pointer-events: none; left: 35px; right: 0px; bottom: 35px; padding: 7px 17px; padding-left: 20px; text-align: left; color: white; .slider-caption-title { .body-font; font-size: 28px; font-weight: 300; text-shadow: 2px 2px 0px @content, 0 0 7px lighten(@content,50%); background: fade(@accent,20%); padding:10px 15px; padding-right: 30px; display: inline-block; clear: both; float: left; } .slider-caption-desc { .body-font; font-size: 16px; font-weight: 300; text-shadow: 1px 1px 4px @content; background: fade(black,20%); padding: 8px 10px; display: inline-block; clear: left; float: left; margin-bottom: 5px; } @media screen { @media (max-width: 767px) { box-shadow: none; background: none; padding: 3px 8px; .slider-caption-title { font-size: 14px; padding: 5px} .slider-caption-desc { font-size: 11px; margin-bottom: 0; padding: 3px } } } } a { color: white } @media screen { @media (max-width: 767px) { } } } .bx-wrapper { box-shadow: none; margin-bottom: 0; ul { width: 100%; margin-left: 0px; } img { min-width: 100%; } .bx-viewport { box-shadow: none; border: none; left:0px; } a.bx-prev { background: url(../images/arrows.png) 0 0; height: 46px; width: 24px; opacity: .8; transition-property: opacity; transition-delay: .5s; transition-timing-function: ease; &:hover { background-position-y: 46px; opacity: 1; } } a.bx-next { margin-right: 12px; background: url(../images/arrows.png) 24px 0; height: 46px; width: 24px; opacity: 0.8; transition-property: opacity; transition-delay: .5s; transition-timing-function: ease; &:hover { background-position: 24px 46px; opacity: 1; } } @media screen { @media (max-width: 767px) { a.bx-next, a.bx-prev { display: none; } } } .bx-pager.bx-default-pager a { width: 20px; border-radius: 0px; height: 8px; background: fade(@accent,60%); text-indent: 9999px; } .bx-pager-item .active { background: fade(saturate(@accent,40%),90%) !important; } .bx-pager { text-align: right; position: absolute; top: 1px; right: 20px; height: 15px; } } /* -------------------- Showcase ----------------- */ // grid - showcase, li = .showcase, figcaption = .showcase-caption, figure = figure #showcase { max-width: 1300px; margin: 0 auto; display: block; list-style: none; margin-bottom: 0px; overflow: hidden; .showcase { display: inline-block; position: relative; perspective: 1700; -webkit-perspective: 1000; figure { position: relative; transform-style: preserve-3d; & > div { overflow: hidden; } img { max-width: 100%; z-index: 10; .transition (all 0.9s); -webkit-backface-visibility: hidden; transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); z-index: 888; } .showcase-caption { display: block; text-align: center; position: absolute; bottom: 0; left: 0; width: 100%; padding: 5px 20px; background: fade(@accent, 80%); color: white; opacity: 0; z-index: 99999; transform-origin: bottom; -moz-transform-origin: bottom; -ms-transform-origin: bottom; -o-transform-origin: bottom; -webkit-transform-origin: bottom; transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); .transition(all 0.8s); -moz-transition: all 0.4s; z-index: 9999; .showcase-caption-title { .site-title-font; font-size: 17px; } .showcase-caption-desc { font-size: 12px; font-weight: lighter; } } &:hover { .showcase-caption { opacity: 1.0; transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); } img { transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); -webkit-transform: scale(1.05); } } } } @media screen { @media (max-width: 991px) and (min-width: 768px) { .showcase { padding: 2px; } } @media (max-width: 767px) { text-align: center; .showcase { max-width: 80%; margin: 0 auto; margin-bottom: 30px; figure .showcase-caption { transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); opacity: 1; } } } @media (max-width: 550px) { .showcase { max-width: 100%; } } } } /* -------------------- features zone ------------ */ #features-area { margin: 55px auto; .feature { text-align: center; img { margin-bottom: 15px; } } .features-caption { text-align: center; .features-caption-title { font-weight: 300; font-size:26px; } .features-caption-desc { font-size: 13px; color: @content; } } @media screen { @media (max-width: 767px) { .feature { margin-bottom: 30px; } } } } /* -------------------- featured posts ----------- */ #featured-wrapper { margin: 30px 0; overflow: auto; .featured-excerpt { color: lighten(@content,5%); font-weight: 400; font-size: 14px; line-height: 1.6em; padding: 0; } .featured-post-1 { .featured-title { font-size: 26px; margin-bottom: 15px; } } .right-featured-container { margin-top: 8px; } .featured-post-right { margin-bottom: 5px; margin-top: 5px; .featured-right-title { margin-bottom: 10px; font-size: 18px; padding: 0; } } @media screen { @media (max-width: 991px) { .featured-post-right .featured-excerpt { padding: 15px; } } } @media screen { @media (max-width: 767px) { .featured-excerpt { padding: 15px; } .featured-post-right { padding: 0; .featured-right-title { padding: 15px; margin-bottom: 0; padding-bottom: 0px; } } } } } /* -------------------- Content ------------------ */ #content { padding-top: 10px; margin-top: 30px; } .page-header { margin-top: -20px; } #home-title { .site-title-font; font-size: 22px; display: inline-block; padding-bottom: 10px; color: @content; text-align: center; padding-bottom: 15px; margin-top: -3px; margin-bottom: 30px; width: 100%; span { font-size: 22px; text-transform: uppercase; border-bottom: solid 2px @content; } @media screen and (max-width: 768px) { text-align: center; margin: 10px auto; display: block; border-bottom: none; width: 100%; } } #primary { article { .featured-thumb { } .after-thumb { overflow: auto; margin-top: -20px; .entry-title a { font-size: 22px; color: @accent; &:hover { color: @accent-hover; } } h1.entry-title { margin-top: 4px; margin-bottom: 0px; .site-title-font; } } } .entry-content { margin-top: 0.3em; border-bottom: solid 1px #eee; margin-bottom: 10px; padding-bottom: 10px; } article.grid { display: block; padding-left: 0px; padding-right: 0px; min-height: 210px; margin-bottom: 3px; h1.entry-title { .site-title-font; font-size: 16px; margin-top:12px; margin-bottom: 12px; a { color: white; } } .featured-thumb { padding-right: 1px; padding-left: 1px; img { .transition(all 0.9s ease); -webkit-backface-visibility: hidden; } &:hover { img { .transition(all 0.9s ease); -webkit-filter: brightness(85%); } } } .in-thumb { position: absolute; bottom: 0; padding: 0; width: 99%; .transition(all 0.4s ease); h1.entry-title a { display: block; width:100%; margin-bottom: -12px; background: fade(@accent,65%); padding: 10px; &:hover { background: fade(@accent, 85%); } } } @media screen { @media (max-width: 767px) and (min-width: 401px) { width: 50%; clear: none; float: left; } } } article.grid2 { padding: 0; -webkit-backface-visibility: hidden; .featured-thumb { padding: 0; overflow: hidden; .transition(.5s all ease); img { -webkit-backface-visibility: hidden; .transition(.6s all ease); z-index: 0; &:hover { -webkit-transform: scale(1.03); transform: scale(1.03); } } @media screen { @media (max-width: 991px) { margin: 10px; } } } .out-thumb { h1.entry-title { margin: 0 0 10px 0px; font-size: 17px; a { color: saturate(@accent,4%); &:hover { color: darken(@content,20%); } } } .entry-excerpt { color: @content; font-size: 13px; line-height: 1.5em; } .readmore { .site-title-font; text-align: right; font-size: 13px; margin-top: 10px; display: block; &:hover { a{ color: darken(@content,20%); }} } } @media screen { @media (max-width: 767px) { width: 65%; margin: 10px auto; margin-bottom: 25px; } @media (max-width: 450px) { width: 100%; } } } article.grid3 { padding: 7px; -webkit-backface-visibility: hidden; .featured-thumb { padding: 0; overflow: hidden; .transition(.5s all ease); img { -webkit-backface-visibility: hidden; .transition(.6s all ease); z-index: 0; width: 100%; } @media screen { @media (max-width: 991px) { margin: 10px; } } } .out-thumb { padding: 10px 0px; @media screen and (max-width: 991px) { padding: 10px 10px; } h1.entry-title { margin: 0 0 10px 0px; font-size: 16px; a { color: @content; font-weight: bold; &:hover { color: @accent; } } } .entry-excerpt { color: lighten(@content,16%); font-size: 13px; line-height: 1.6em; } .readmore { .site-title-font; font-size: 13px; margin-top: 10px; &:hover { a{ color: darken(@content,20%); }} } } @media screen { @media (max-width: 991px) and (min-width: 768px) { &:nth-child(odd) { clear: both; } } @media (max-width: 767px) { width: 65%; margin: 10px auto; margin-bottom: 25px; } @media (max-width: 450px) { width: 100%; } } } } .header-title { span{ background: #f7f7f7; padding: 20px 15px; display: block; margin-top: -40px; margin-bottom: 60px; border: solid 1px #eee; font-size: 30px; color: lighten(@content,24%); } } #primary-mono { #main { margin-top: -25px; } h1.entry-title { .site-title-font; font-size: 32px; } .entry-meta { font-size: 13px; border-bottom: solid 1px lighten(@content,65%); border-top: solid 1px lighten(@content, 65%); padding:7px 10px; font-weight: lighter; color: lighten(@content,40%); a { color: lighten(@content,40%); &:hover { color: @accent;} } i.fa-user { margin-left: 15px; } i.fa { margin-right: 4px; } .byline { float: right; } } .entry-content { color: lighten(@content,18%); line-height: 1.7em; a { &:hover { color: darken(@content,20%); } } } .footer-meta { margin-top: 25px; border-bottom: solid 1px lighten(@content,65%); border-top: solid 1px lighten(@content, 65%); padding:7px 10px; font-weight: lighter; color: lighten(@content,40%); a { color: lighten(@content,40%); &:hover {color: @accent;}} i.fa { margin-left: 15px; } i:first-child { margin-left: 0px; } } .edit-link { float: right; } code { background: #eee; color: black; font-weight: bold; .site-title-font; } article.page { h1.entry-title { span { background: url(../images/pattern2.png); padding: 10px 15px; display: inline-block; .site-title-font; font-size: 15px; text-transform: uppercase; font-weight: normal; } border-bottom: solid 2px @accent; margin-bottom: 20px; margin-top: 12px; } } } #secondary { margin-top: -23px; .widget { background: #f7f7f7; border: solid 1px lighten(@content,65%); padding: 10px; color: @content; } .widget { margin-bottom: 30px; & > ul { margin-left: 0px; li { list-style: none; padding-bottom: 6px; padding-top: 6px; border-bottom: solid lighten(@content,65%) 1px; &:last-child { border-bottom: none; } &:before { content: "\f105"; font-family: "FontAwesome"; margin-right: 6px; } } } } h1.widget-title { font-size: 15px; padding-top: 10px; padding-bottom: 0px; padding-left: 1px; margin-top: 0px; margin-bottom: -10px; .site-title-font; font-weight: bold; color: white; span { padding: 5px 8px; background: @accent; position: relative; top: -30px; border-bottom: solid 2px #ccc; box-shadow: 0 5px 5px -4px #777; } } a { color: lighten(@content,18%); font-weight: lighter; &:hover { color: @accent; } } ul { margin-left: 20px; ul { margin-left: 5px; } } font-size: 13px; .widget_search { label { width: 100%; margin-top: 5px; input[type=search] { width: 100%; } } } } article { table { border: solid 1px #eee; tr:nth-child(even) { background: lighten(grey,50%); } th { background: black; color: white; padding: 5px 10px; } td { padding: 5px 10px; } } h1,h2,h3 { .site-title-font; } } /* --------------- archives -------------- */ .archive { section#primary { h1.page-title { span { background: url(../images/pattern2.png); padding: 10px 15px; display: inline-block; .site-title-font; font-size: 15px; text-transform: uppercase; font-weight: normal; } border-bottom: solid 2px @accent; margin-bottom: 20px; margin-top: 11px; } .page-header { border-bottom: none; margin-bottom: 0px; padding-bottom: 0px; } } } /* --------------- pagination ------------ */ .pagination { margin: 20px 0; padding-top: 25px; text-align: center; width: 100%; clear: both; ul { list-style: none; display: inline-block; text-align: center; margin-bottom: 0; margin-left: 0px; & > li { display: inline; & > a { color: darken(@accent, 1%); transition: all 0.4s ease; } & > a:hover { color: @accent-hover; background: darken(@default-background, 5%); } } } .current { background: darken(@default-background, 5%); } } .pagination ul &>li &>a, .pagination ul &>li &>span { float: left; padding: 4px 12px; line-height: 20px; text-decoration: none; margin-right: 5px; background-color: darken(@default-background, 1%); border: 1px solid darken(@default-background, 5%); display: inline-block; color: @content; &:hover { background: none; } } /* .pagination ul &>li:first-child &>a, .pagination ul &>li:first-child &>span { border-left-width: 1px; } .pagination ul &>li:last-child &>a, .pagination ul &>li:last-child &>span { border-rigth-width: 1px; } */ /* --------------- comments -------------- */ #respond { input[type=text] { max-width: 450px; } } #comments { margin-top: 55px; h2.comments-title { font-size: x-large; .site-title-font; } ol.comment-list { list-style: none; margin-left: 0px; } li.comment { border: solid 1px #eee; padding: 10px; margin-top: 15px; list-style: none; background: #f9f9f9; .comment-content { color: darken(@content,10%); } } li.trackback { background: #f9f9f9; padding: 10px; margin-top: 15px; margin-bottom: 15px; border: solid 1px #eee; font-weight: bold; a { font-weight: normal; } } .vcard img { border: solid 4px lighten(grey,40%); border-radius: 5px; margin: 0 10px 10px 0; } .comment-metadata { font-weight: bold; } } @media screen and (max-width:480px) { li.comment { margin-left: -5%; } } /* -------------- footer widget area -------- */ @foooter-color: #777; @footer-link: @foooter-color + #222; #footer-sidebar { padding-top: 20px; background: @footer; margin-top: 30px; padding-bottom: 50px; color: @foooter-color; font-weight: lighter; a { color: @footer-link; &:hover { color: white; } } h1.widget-title { font-weight: bold; .site-title-font; font-size: 16px; color: lighten(@footer-link,30%); margin-bottom: 20px; } .widget_recent_comments { ul { margin-left: 5px; } li { list-style: none; padding-bottom: 6px; padding-top: 6px; border-bottom: solid darken(@foooter-color,25%) 1px; &:before { content: "\f075" !important; font-family: "FontAwesome"; margin-right: 6px; } } } .widget { & > ul { margin-left: 0px; li { list-style: none; padding-bottom: 6px; padding-top: 6px; border-bottom: solid darken(@foooter-color,25%) 1px; &:before { content: "\f105"; font-family: "FontAwesome"; margin-right: 6px; } } } } .widget_nav_menu { ul.menu { margin-left: 0px; & > li { list-style: none; padding-bottom: 6px; padding-top: 6px; border-bottom: solid darken(@foooter-color,25%) 1px; &:before { content: "\f054"; font-family: "FontAwesome"; margin-right: 6px; } ul { margin-left: 40px; ul { margin-left: 20px; } } } } } .widget_recent_entries { ul { margin-left: 5px; } li { list-style: none; padding-bottom: 6px; padding-top: 6px; border-bottom: solid darken(@foooter-color,25%) 1px; &:before { content: "\f0f6" !important; font-family: "FontAwesome"; margin-right: 6px; } } } } /* --------------- colophon ---------------- */ #colophon { text-align: center; padding: 15px; background: darken(@footer,10%); padding-bottom: 4px; color: @foooter-color; .site-info { text-align: left; } a { color: @footer-link; font-weight: lighter; &:hover { color: #ddd; } } .footer-menu { text-align: right; ul ul { display: none; } ul { li { display: inline; padding-right: 10px; } } } @media screen { @media (max-width: 991px) { .site-info { text-align: center; margin: 20px; } .footer-menu { text-align: center; } } } } /*--------------- woocommerce -----------------*/ .woocommerce,.woocommerce-page { .woocommerce-breadcrumb { display: none; } .button { background: @accent !important; border: none !important; text-shadow: none !important; color: white !important; } .header-title { margin-top: -40px; } .woocommerce-message:before { padding-top: 0 !important; } p.woocommerce-result-count { font-style: italic; font-size: 12px; font-weight: lighter; color: lighten(@content,40%); } div.related, div.upsells { h2 { font-size: 16px; font-weight: bold; } } ul.products { li.product { text-align: center; div.star-rating { margin: 1px auto 6px auto !important; } a,h3 { color: @content; font-weight: bold; font-size: 14px; } img { box-shadow: none !important; -webkit-box-shadow: none !important; } .add_to_cart_button { display: none; } span.amount { color: @accent; font-weight: bold; } span.onsale { border-radius: 0px; background: fade(@accent,80%); border-bottom: none; box-shadow: none; padding: 1px 12px; font-size: 14px; margin: 5px 5px 0 0; } } } #content { div.product { color: @content; div.star-rating { /* margin: 1px auto 6px auto !important; */ } a.woocommerce-review-link { color: lighten(@content,35%); font-size: small; font-weight: lighter; } a,h3 { color: @content; font-weight: bold; font-size: 14px; } .entry-summary { color: lighten(@content,30%); line-height: 1.7em; } img { box-shadow: none !important; -webkit-box-shadow: none !important; } .single_add_to_cart_button { background: @accent; border: none; text-shadow: none; } span.amount { color: @accent; font-weight: bold; font-size: 18px; } del { span.amount { font-size: 13px; color: lighten(@content,30%); } } span.onsale { border-radius: 0px; background: fade(@accent,80%); border-bottom: none; box-shadow: none; padding: 1px 12px; font-size: 14px; margin: 5px 5px 0 0; } h1.product_title { margin-top: 0px; font-weight: bold; margin-top: -20px; color: @content; } .product_meta { padding: 6px 0px; border-top: solid 1px lighten(@content,60%); border-bottom: solid 1px lighten(@content,60%); font-weight: lighter; a { color: @content; font-weight: lighter; } } .woocommerce-tabs { h2 { font-weight: bold; color: @content; font-size: 14px; margin-top: -1px; } div.entry-content { color: lighten(@content,30%); line-height: 1.7em; } ul.tabs { li { background: lighten(@content,65%); text-shadow: none; margin-right: 10px; a { text-shadow: none; } } .active { background: white; } } } } } .shop_table { th { background: lighten(@content,73%); color: @content; font-weight: bold; } .shipping, .cart-subtotal, .order-total { th { border-right: solid 1px #ddd;} } td { font-weight: lighter; } } } .single_product { div.entry-summary { color: lighten(@content,20%); } } .woocommerce-cart { .entry-content { .woocommerce { h2 { font-size: 18px; font-weight: bold; } .cart-collaterals { th { background: lighten(@content,73%); color: @content; border-right: solid 1px #ddd; border-bottom: solid 1px #ddd; } th, td { padding: 5px; } .order-total { th { border-bottom: none; } } td { padding-left: 12px; } .shipping_calculator { h2 { a {font-size: 14px;} } } } } } } /*--------------- responsive cheats ----------- */ @media screen and (max-width: 991px) { #social-icons { float: none; text-align: center; padding-bottom: 20px; overflow: auto; img { float: none !important } } .featured-thumb { margin-bottom: 15px; } #secondary, #secondary-2 { margin-top: 25px; } } /* ----- Bug Fixes ----------*/ .woocommerce .woocommerce-error:before, .woocommerce .woocommerce-info:before, .woocommerce .woocommerce-message:before, .woocommerce-page .woocommerce-error:before, .woocommerce-page .woocommerce-info:before, .woocommerce-page .woocommerce-message:before { padding-top: 0 !important; }