/home/moonrcjl/public_html/wp/wp-content/themes/arsha/assets/scss/layout/pages/_price.scss
@use '../../utils' as *;
/*----------------------------------------*/
/* 6.11 Pricing
/*----------------------------------------*/
.mtprice {
border: 1px solid rgba(255, 255, 255, 0.10);
padding: 60px 50px;
&__icon {
position: relative;
margin-bottom: 4px;
& span {
font-size: 115px;
position: relative;
z-index: 1;
margin-left: 23px;
}
&-shape {
position: absolute;
top: 0;
left: 0;
}
}
&__price {
& h4 {
font-size: 42px;
font-weight: 700;
color: var(--mt-common-white);
& span {
font-size: 16px;
}
}
}
&__title {
font-size: 24px;
color: var(--mt-common-white);
}
&__features {
list-style: none;
& li {
color: var(--mt-common-white);
margin-bottom: 19px;
@include flexbox();
& i {
margin-right: 10px;
font-size: 18px;
margin-top: 5px;
}
& span {
font-size: 17px;
}
}
}
&__sep {
border-top: 1px solid #57595C;
margin-top: 22px;
margin-bottom: 25px;
}
&__white {
& .mtprice {
border: 1px solid var(--mt-border-1);
transition: .3s;
&.active {
background-color: var(--mt-common-black);
& .mtprice__title {
color: var(--mt-common-white);
}
& .mtprice__price {
& h4 {
color: var(--mt-common-white);
& span {
color: var(--mt-common-white);
}
}
}
& .mtprice__features {
& li {
color: var(--mt-common-white);
}
}
& .mt-price-btn {
& a {
background-color: var(--mt-theme-1);
border: 1px solid var(--mt-theme-1);
color: var(--mt-common-black);
}
}
}
&:hover {
background-color: var(--mt-common-black);
& .mtprice__title {
color: var(--mt-common-white);
}
& .mtprice__price {
& h4 {
color: var(--mt-common-white);
& span {
color: var(--mt-common-white);
}
}
}
& .mtprice__features {
& li {
color: var(--mt-common-white);
}
}
& .mt-price-btn {
& a {
background-color: var(--mt-theme-1);
border: 1px solid var(--mt-theme-1);
color: var(--mt-common-black);
}
}
}
&__title {
color: var(--mt-common-black);
transition: .3s;
}
&__price {
& h4 {
color: var(--mt-common-black);
transition: .3s;
& span {
color: var(--mt-common-black);
transition: .3s;
}
}
}
&__features {
& li {
color: var(--mt-common-black);
transition: .3s;
}
}
}
& .mt-price-btn {
& a {
border: 1px solid var(--mt-border-1);
color: var(--mt-common-black);
&:hover {
background-color: var(--mt-common-dark);
}
}
}
}
}