1011 lines
19 KiB
CSS

/*
Theme Name: Hefz Kala
Theme URI: https://HefzTeam.ir
Author: رسول محمدی خانقاه
Author URI: https://Rasoolmohammadi.ir
Description: این قالب در دوره طراحی قالب طراحی شده
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: HefzKala
*/
@font-face {
font-family: KalamehWeb;
font-style: normal;
font-weight: 100;
src: url('assets/fonts/woff2/KalamehWeb-Thin.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('assets/fonts/woff/KalamehWeb-Thin.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: KalamehWeb;
font-style: normal;
font-weight: 200;
src: url('assets/fonts/woff2/KalamehWeb-ExtraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('assets/fonts/woff/KalamehWeb-ExtraLight.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: KalamehWeb;
font-style: normal;
font-weight: 300;
src: url('assets/fonts/woff2/KalamehWeb-Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('assets/fonts/woff/KalamehWeb-Light.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: KalamehWeb;
font-style: normal;
font-weight: 500;
src: url('assets/fonts/woff2/KalamehWeb-Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('assets/fonts/woff/KalamehWeb-Medium.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: KalamehWeb;
font-style: normal;
font-weight: 600;
src: url('assets/fonts/woff2/KalamehWeb-Semibold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('assets/fonts/woff/KalamehWeb-Semibold.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: KalamehWeb;
font-style: normal;
font-weight: 800;
src: url('assets/fonts/woff2/KalamehWeb-ExtraBold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('assets/fonts/woff/KalamehWeb-ExtraBold.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: KalamehWeb;
font-style: normal;
font-weight: 900;
src: url('assets/fonts/woff2/KalamehWeb-Black.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('assets/fonts/woff/KalamehWeb-Black.woff') format('woff') /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: KalamehWeb;
font-style: normal;
font-weight: bold;
src: url('assets/fonts/woff2/KalamehWeb-Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('assets/fonts/woff/KalamehWeb-Bold.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: KalamehWeb;
font-style: normal;
font-weight: normal;
src: url('assets/fonts/woff2/KalamehWeb-Regular.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('assets/fonts/woff/KalamehWeb-Regular.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
body {
font-family: KalamehWeb !important;
direction: rtl;
margin: 0;
background-color: #f4f4f4;
}
h1, h2, h3, h4, h5, h6{
font-family: KalamehWeb !important;
}
.wrapper {
max-width: 900px;
margin: 20px auto;
padding: 30px;
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 10px #aaa;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
a{
text-decoration: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
header{
width: 1230px;
box-shadow: 0 0 15px #cdcdcd;
height: 80px;
border-radius: 50px;
display: block;
margin: 20px auto;
position: relative;
background-color: #fff;
}
.btnsearch{
width: 50px;
height: 50px;
border-radius: 100%;
box-shadow: 0 0 10px #8e17d1;
background: url(assets/img/search.svg),linear-gradient(45deg, #b333ef, #7a07c1);
background-repeat: no-repeat;
background-position: center;
position: absolute;
top:50%;
left: 15px;
transform: translateY(-50%);
}
.kitkala-basket{
width: 50px;
height: 50px;
border-radius: 100%;
border: 1px solid #16c10e;
box-shadow: 0 0 10px rgba(22, 193, 14, 35%);
background: url(assets/img/basket.png),#fff;
background-repeat: no-repeat;
background-position: center;
position: absolute;
top:50%;
left: 75px;
transform: translateY(-50%);
}
.registerbtn{
width: 150px;
height: 45px;
background: linear-gradient(45deg,#05baff,#0574ff);
display: inline-block;
border-radius: 30px;
position: absolute;
top:50%;
left: 140px;
transform: translateY(-50%);
text-align: center;
line-height: 45px;
color: #fff;
font-family:KalamehWeb;
box-shadow: 0 0 15px rgba(5, 116, 255, 35%);
}
.main-menu{
float: right;
margin: 20px 40px 20px 0px;
}
.main-menu > ul > li{
float: right;
margin-left: 20px;
position: relative;
}
.main-menu ul li a{
color: #716060;
font-size: 18px;
padding: 10px 15px;
display: block;
}
.main-menu ul li a:hover{
background: linear-gradient(45deg,#05baff,#0574ff);
color: #fff;
border-radius: 8px;
box-shadow: 0 0 15px rgba(5, 116, 255, 35%);
}
.main-menu ul li ul{
width: 240px;
height: auto;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 15px #d4d4d4;
position: absolute;
visibility: hidden;
z-index: 999;
}
.main-menu ul li ul li{
position: relative;
}
.main-menu ul li ul li ul{
top: 0;
right: 100%;
position: absolute;
}
.main-menu ul li:hover > ul{
visibility: visible;
}
.main-menu ul li ul li a{
border-radius: 0px !important;
font-size: 15px;
line-height: 25px;
border-bottom: 1px solid #efefef;
}
.logo img{
margin-right: 20px;
margin-top: 12px;
float: right;
}
.kitkala-center{
width: 1230px;
display: block;
margin: 0 auto;
}
.left-banner{
float: left;
width: 293px;
height: 300px;
border-radius: 8px;
}
.left-banner img{
max-width: 100%;
border-radius: 8px;
height: 100%;
}
.home-slider{
background: purple;
float: right;
width: 915px;
height: 300px;
margin-left: 20px;
border-radius: 8px;
}
.home-slider img{
width: 100%;
height:300px;
border-radius: 8px;
}
/* slider */
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
color: #fff;
}
.clear{
width: 100%;
height: 1px;
float: none;
clear: both;
}
.banner-container{
margin-top: 20px;
}
.banner-item{
width: calc(25% - 15px);
margin-left: 20px;
float: right;
}
.banner-item:last-child{
margin-left: 0px;
}
.banner-item img{
max-width: 100%;
border-radius: 8px;
}
.suggest-product{
float: left;
width: 253px;
height: 360px;
background-color: #fff;
box-shadow: 0 0 15px #d3d3d3;
margin-top: 20px;
border-radius: 8px;
padding: 20px;
position: relative;
}
.kitkala-suggest-title{
font-size: 18px;
font-weight: 700;
color: #484747;
padding-bottom: 10px;
border-bottom: 2px solid #d4d4d4;
}
.suggest-product-image{
width: 235px;
height: 175px;
display: block;
margin: 16px auto;
}
.title-product{
font-size: 16px;
color: #484747;
text-align: center;
width: 80%;
display: block;
line-height: 25px;
margin: 0 auto;
}
.sug-product-price{
color: #ff5757;
font-size: 18px;
display: block;
margin: 8px auto;
text-align: center;
}
.add-to-cart{
color: #ff5757;
border: 1px solid;
padding: 10px 50px;
border-radius: 25px;
display: block;
box-shadow: 0 0 10px #ffd0d0;
position: relative;
}
.add-to-cart::after{
width: 30px;
height: 30px;
content: "";
background:url(assets/img/add-to-cart.png), #ff5757;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
border-radius: 100%;
position: absolute;
top: 3px;
left: 4px;
}
.kitkala-suggest-title::after{
content: "";
height: 2px;
width: 40%;
background: #ff5757;
display: block;
position: absolute;
top: 48px;
}
.discount-box{
float: right;
width: 915px;
background-color: #fff;
box-shadow: 0 0 15px #d3d3d3;
height: 300px;
margin-top: 20px;
border-radius: 8px;
}
.discount-column img{
width: 250px;
height: 250px;
padding: 20px;
}
.sale-percent{
width: 40px;
height: 40px;
border-radius: 100%;
box-shadow: 0 0 15px rgba(255, 31, 39, 35%);
background-image: linear-gradient(45deg,#ff5757,#ff0f1a);
color: #fff;
line-height: 40px;
margin: 15px 15px 0 -55px;
float: right;
position: relative;
}
.discount-column{
float: right;
width: calc(33% - 6px);
height: 100%;
}
.regular-price{
background: #dcdcdc;
border-radius: 25px;
padding: 2px 10px;
margin-left: -25px;
padding: 2px 10px 2px 30px;
color: #474444;
position: relative;
}
.regular-price::after{
content: "";
height: 1px;
width: 80%;
background: #ff5757;
display: inline-block;
position: absolute;
right: 8px;
top: 13px;
transform: rotate(-12deg);
}
.sale-price{
background: #ff5757;
color: #fff;
border-radius: 25px;
padding: 2px 15px;
z-index: 99;
position: relative;
}
.product-prices{
margin-top: 30px;
}
.discount-column.content{
padding-right: 25px;
}
.discount-column .product-title{
margin-top: 35px;
color: #484747;
font-weight: 700;
font-size: 22px;
}
.sort-desc{
margin-top: 25px;
color: #484747;
line-height: 2;
}
.sugeest-time{
position: relative;
display: contents;
}
.text-suggest-time{
position: absolute;
top: 50%;
left:135px;
transform: translateY(-50%);
}
.wonderful-suggest{
font-size: 18px;
font-weight: 700;
color: #474444;
line-height: 2;
display: block;
}
.until-time{
color: #474444;
}
.countdown{
position: absolute;
top: 75%;
transform: translateY(-50%);
width: 100%;
direction: ltr;
left: 60px;
}
.countdown div{
display: inline-block;
}
.countdown .no{
background-color: #dcdcdc;
width: 50px;
height: 50px;
border-radius: 15px;
display: block;
text-align: center;
line-height: 50px;
color: #474444;
font-size: 18px;
margin-left: 5px;
}
.countdown .txt{
text-align: center;
display: block;
margin-top: 6px;
color:#474444;
}
.second .no{
background-color: #ff5757;
color: #fff;
}
.swiper-pagination{
top: 23% !important;
right: 92% !important;
direction: ltr;
}
.swiper-pagination-bullet{
border-radius: 20px !important;
width: 40px !important;
height: 16px !important;
color: #515151;
background: #dcdcdc !important;
opacity: 1 !important;
padding: 3px 5px;
font-size: 14px;
line-height: 16px;
}
.swiper-pagination-bullet-active{
background: #ff5757 !important;
color: #fff;
width: 45px !important;
}
.kitkala-feature{
background: #fff;
width: 915px;
height: 80px;
border-radius: 8px;
box-shadow:0 0 15px #d3d3d3;
float: right;
margin-top: 20px;
}
.kitkala-feature div{
display: flex;
}
.feature{
width: 152.5px;
font-size: 13px;
text-align: center;
}
.feature img{
display: block;
margin: 10px auto;
}
.most-sell-title{
color: #5d5b5b;
font-size: 18px;
font-weight: 700;
margin: 20px 10px;
display: inline-block;
width: 100%;
}
.most-sell-title::before{
content: "";
width: 35px;
height: 35px;
background: url(assets/img/laptop.png);
display: inline-block;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
margin-left: 10px;
opacity: 0.8;
}
.most-sell-title::after{
content: "";
width: 81%;
height: 2px;
background-color: #5d5b5b;
display: inline-block;
margin-right: 10px;
}
.inner-item-product{
width: clac(100% - 40px);
display: inline-block;
background: #fff;
box-shadow:0 0 15px #d3d3d3;
border-radius: 8px;
padding:10px 20px;
}
.inner-item-product .item-product{
width: 20%;
height: auto;
float: right;
text-align: center;
}
.item-product img{
max-width: 100%;
}
.item-product h3{
padding: 5px 35px;
line-height:1.5;
color: #626262;
}
.item-product span{
color:#ff5757;
line-height: 2;
}
.home-middle-banner{
width: 100%;
margin: 20px 0;
}
.home-middle-banner .adl-banner{
float: left;
width: 49%;
}
.home-middle-banner .adl-banner img,.home-middle-banner .adr-banner img{
max-width: 100%;
border-radius: 8px;
}
.home-middle-banner .adr-banner{
float: right;
width: 49%;
}
.home-art-title{
color: #5d5b5b;
font-size: 18px;
font-weight: 700;
margin: 20px 10px;
display: inline-block;
width: 100%;
}
.home-art-title::before{
content: "";
width: 35px;
height: 35px;
background: url(assets/img/article.png);
display: inline-block;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
margin-left: 10px;
opacity: 0.8;
}
.home-art-title::after{
content: "";
width: 83%;
height: 2px;
background-color: #5d5b5b;
display: inline-block;
margin-right: 10px;
}
.home-box-article{
width: 100;
}
.article-item{
width: calc(20% - 28px);
height: auto;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 15px #d3d3d3;
padding: 10px;
margin-left: 10px;
float: right;
}
.article-item:last-child{
margin-left: 0;
}
.article-item img{
max-width: 100%;
height: 150px;
}
.article-item h3{
color: #424141;
line-height: 1.5;
margin:10px 0 20px 0;
font-size: 15px;
}
.article-item .author a{
background: linear-gradient(45deg, #9b35fa, #60afff);
border-radius: 25px;
padding: 2px 10px;
color: #fff;
font-size: 13px;
}
.article-item .publish-date{
float: left;
color: #6a6a6a;
font-size: 13px;
}
.article-item .publish-date::before{
width: 25px;
height: 25px;
content: "";
display: inline-block;
background: url(assets/img/clock.png);
background-repeat: no-repeat;
background-position: center;
vertical-align: text-bottom;
margin-left: 2px;
}
.home-brand-title{
color: #5d5b5b;
font-size: 18px;
font-weight: 700;
margin: 20px 10px;
display: inline-block;
width: 100%;
}
.home-brand-title::before{
content: "";
width: 35px;
height: 35px;
background: url(assets/img/brand.png);
display: inline-block;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
margin-left: 10px;
opacity: 0.8;
}
.home-brand-title::after{
content: "";
width: 87%;
height: 2px;
background-color: #5d5b5b;
display: inline-block;
margin-right: 10px;
}
.home-brands{
width:100%;
background: #fff;
border-radius: 100px;
box-shadow: 0 0 15px #cdcdcd;
}
.center-item{
display: flex;
}
.brand-item{
border-radius: 100%;
box-shadow: 0 0 15px #cdcdcd;
width: 120px;
height: 120px;
position: relative;
margin: 20px auto;
}
.brand-item img{
position: absolute;
top: 50%;
left: 15%;
transform: translateY(-50%);
}
footer{
background: #333333;
width: 100%;
margin-top: 20px;
padding-top: 20px;
border-top: 5px solid #8ac3ffd1;
}
.feature-footer img{
display: block;
margin: 0 auto;
border-radius: 25px;
}
.footer-column{
width: 25%;
float: right;
margin-right: 100px;
margin-top: 20px;
}
.footer-column p{
color: #fff;
line-height: 3;
}
.footer-column h1 ,.footer-column h2 ,.footer-column h3,.footer-column h4 ,.footer-column h5 ,.footer-column h6{
font-weight: bold;
font-size: 19px;
color: #fff;
line-height: 4;
}
.footer-column ul li a{
color: #fff;
line-height: 3;
}
.copyright-text{
text-align: center;
}
.copyright-text p{
background: #fff;
display: inline-block;
line-height: 2;
border-radius: 20px 20px 0 0;
padding: 5px 30px;
box-shadow: 0 0 18px #ffffff87;
margin-top: 20px;
color: #333333;
}
.breadcrumb{
background: #fff;
height: 40px;
border-radius: 50px;
box-shadow: 0 0 15px #cdcdcd;
padding-right: 20px;
line-height: 40px;
color: #8e8d8d;
font-size: 15px;
margin-bottom: 20px;
}
.pages-content{
background: #fff;
border-radius: 8px;
float: right;
width: 870px;
padding: 20px;
}
aside{
width: 300px;
border-radius: 8px;
float: left;
}
.page-title{
font-size: 20px;
font-weight: bold;
color: #665e5e;
border-bottom: 2px solid #ececec;
padding-bottom: 15px;
}
.short-decs{
line-height: 2 !important;
}
.pages-content p{
line-height: 3;
color: #9a9a9a;
margin-top: 20px;
text-align: justify;
}
aside img{
max-width: 100%;
height: auto;
border-radius: 8px;
}
.sidebar-related-post{
background: #fff;
border-radius: 8px;
box-shadow: 0 0 15px #cdcdcd;
max-width: 100%;
height: auto;
margin-top: 20px;
padding: 20px;
margin-bottom: 20px;
}
.last-post-title{
font-size: 18px;
font-weight: bold;
color: #737373;
border-bottom: 1px solid #e2e2e2;
display: block;
padding-bottom: 10px;
}
.title-post{
display: inline-block;
vertical-align: middle;
color: #737373;
margin-top: 15px;
width: 65%;
line-height: 1.5;
}
.sidebar-related-post img{
margin-top: 20px;
vertical-align: middle;
width: 60px;
height: 60px;
border-radius: 5px;
margin-left: 10px;
}
.thumbnail-image{
float: right;
width: 50%;
}
.thumbnail-image img{
border-radius: 10px;
max-width: 100%;
}
.specification-post{
float: left;
width: calc(50% - 20px);
padding-right: 20px;
}
.category-post{
background: #c0dcff;
padding: 7px 15px;
border-radius: 5px;
color: #5aa3fd;
margin: 20px 0 20px 20px;
display: inline-block;
}
.post-title{
font-size: 22px;
font-weight: bold;
color: #665e5e;
}
.meta-info{
margin-top: 20px;
}
.meta-info span{
margin-left: 40px;
color: #9a9a9a;
}
.comment::before{
content: "";
background: url(assets/img/comment.png);
display: inline-block;
background-repeat: no-repeat;
width: 25px;
height: 25px;
vertical-align: bottom;
margin-left: 5px;
}
.publish-date::before{
content: "";
background: url(assets/img/date.png);
display: inline-block;
background-repeat: no-repeat;
width: 25px;
height: 25px;
vertical-align: bottom;
margin-left: 5px;
}
.author-name::before{
content: "";
background: url(assets/img/author.png);
background-repeat: no-repeat;
display: inline-block;
width: 25px;
height: 25px;
vertical-align: bottom;
margin-left: 5px;
}
.inner-content{
border-top: 2px solid #ececec;
margin-top: 15px;
}
.content404{
text-align: center;
}
.title404{
font-size: 40px;
font-weight: 900;
color: #386fc1;
margin: 55px 0 40px 0;
}
.content404 p{
font-size: 18px;
color: #313132;
margin: 40px 0 30px 0;
}
.gotohome{
background: linear-gradient(45deg, #005fe6, #00aeff);
padding: 12px 65px;
border-radius: 25px;
box-shadow: 0 0 20px #41bcff91;
color: #fff;
font-weight: 700;
margin-bottom: 50px;
display: inline-block;
}
.archive-content{
float: right;
width: 910px;
}
.archive-content .item{
width: calc(25% - 8px);
margin: 0 6px 20px 2px;
background: #fff;
text-align: center;
padding: 20px 0;
border-radius: 8px;
box-shadow: 0 0 15px #dfdfdf;
float: right;
}
.archive-content .item img{
max-width: 100%;
}
.archive-title{
color: #3f3d3d;
line-height: 1.5;
width: 80%;
display: block;
margin: 10px auto;
}
.readmore{
background: linear-gradient(45deg, #005fe6, #00aeff);
border-radius: 8px;
padding: 12px 55px;
color: #fff;
box-shadow: 0 0 15px #52a4ffcf;
display: inline-block;
font-size: 14px;
}
.archive-main-title{
text-align: right;
display: inline-block;
font-size: 22px;
font-weight: bold;
margin-bottom: 15px;
}
.price-product{
color: #ff5353;
margin: 12px auto;
display: block;
}
.add-to-cart-category{
background: linear-gradient(45deg, #005fe6, #00aeff);
border-radius: 8px;
padding: 12px 40px;
color: #fff;
box-shadow: 0 0 15px #52a4ffcf;
display: inline-block;
font-size: 14px;
}