202 lines
5.3 KiB
SCSS
202 lines
5.3 KiB
SCSS
@use '../utils' as *;
|
|
|
|
/*=============================
|
|
10. Pricing
|
|
===============================*/
|
|
.pricing {
|
|
&__bg {
|
|
padding: 120px 0 90px;
|
|
position: relative;
|
|
z-index: 1;
|
|
background-size: cover;
|
|
background-position: center;
|
|
@media #{$xs} {
|
|
padding: 100px 0 70px;
|
|
}
|
|
&-two {
|
|
padding: 255px 0 90px;
|
|
margin-top: -135px;
|
|
@media #{$xs} {
|
|
padding: 235px 0 70px;
|
|
}
|
|
}
|
|
}
|
|
&__tab {
|
|
@include flexbox();
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
margin-bottom: 40px;
|
|
&-btn {
|
|
cursor: pointer;
|
|
color: var(--tg-border-5);
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
user-select: none;
|
|
font-family: var(--tg-heading-font-family);
|
|
@include transition(.3s);
|
|
&.monthly_tab_title {
|
|
color: var(--tg-heading-color);
|
|
&.active {
|
|
color: var(--tg-border-5);
|
|
}
|
|
}
|
|
&.annual_tab_title {
|
|
&.active {
|
|
color: var(--tg-heading-color);
|
|
}
|
|
}
|
|
}
|
|
&-switcher {
|
|
height: 30px;
|
|
width: 60px;
|
|
display: inline-block;
|
|
@include border-radius(30px);
|
|
position: relative;
|
|
margin: 0 15px;
|
|
-webkit-transform: translateY(0px);
|
|
-ms-transform: translateY(0px);
|
|
transform: translateY(0px);
|
|
cursor: pointer;
|
|
background: var(--tg-theme-primary);
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 2px;
|
|
top: 2px;
|
|
bottom: 2px;
|
|
width: 26px;
|
|
@include border-radius(50%);
|
|
background: var(--tg-color-white-default);
|
|
@include transition(.3s);
|
|
}
|
|
&.active {
|
|
&:before {
|
|
left: calc(100% - 28px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__box {
|
|
background: var(--tg-color-white-default);
|
|
border: 1px solid #CFDDE2;
|
|
@include border-radius(15px);
|
|
padding: 50px 65px;
|
|
margin-bottom: 30px;
|
|
@media #{$lg} {
|
|
padding: 40px 25px;
|
|
}
|
|
@media #{$md} {
|
|
padding: 40px 30px;
|
|
}
|
|
&-two {
|
|
text-align: center;
|
|
& .pricing__price {
|
|
margin-bottom: 20px;
|
|
& .price {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
& .pricing__list {
|
|
& .list-wrap {
|
|
& li {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__head {
|
|
margin-bottom: 20px;
|
|
& .title {
|
|
margin-bottom: 0;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
display: inline-block;
|
|
background: var(--tg-color-gray-3);
|
|
@include border-radius(30px);
|
|
padding: 12px 22px;
|
|
}
|
|
}
|
|
&__price {
|
|
margin-bottom: 40px;
|
|
& .price {
|
|
@include flexbox();
|
|
margin-bottom: 0;
|
|
font-size: 48px;
|
|
align-items: flex-end;
|
|
line-height: 1;
|
|
& strong {
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
margin: 4px 3px auto 0;
|
|
color: var(--tg-border-5);
|
|
}
|
|
& span {
|
|
color: var(--tg-border-5);
|
|
text-transform: lowercase;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
margin-left: 5px;
|
|
margin-bottom: 7px;
|
|
text-transform: capitalize;
|
|
}
|
|
&.annual_price {
|
|
display: none;
|
|
}
|
|
}
|
|
&.change-subs-duration {
|
|
& .monthly_price {
|
|
display: none;
|
|
}
|
|
& .annual_price {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
&__content {
|
|
& p {
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
&__list {
|
|
margin-bottom: 30px;
|
|
& .list-wrap {
|
|
& li {
|
|
@include flexbox();
|
|
align-items: center;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
text-transform: capitalize;
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__shape {
|
|
&-wrap {
|
|
& img {
|
|
position: absolute;
|
|
z-index: -1;
|
|
&:nth-child(1) {
|
|
left: 0;
|
|
top: 0;
|
|
@media #{$xs} {
|
|
width: 200px;
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
right: 0;
|
|
bottom: 0;
|
|
@media #{$xs} {
|
|
width: 200px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |