| Server IP : 172.67.71.254 / Your IP : 216.73.216.4 Web Server : nginx/1.27.1 System : Linux in-5 5.15.0-143-generic #153-Ubuntu SMP Fri Jun 13 19:10:45 UTC 2025 x86_64 User : arabianexpress ( 1872) PHP Version : 8.0.30 Disable Function : exec,passthru,shell_exec,system,proc_open,popen,parse_ini_file,show_source MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /storage/v9321/leapdubai/public_html/wp-content/themes/printx/assets/scss/layout/ |
Upload File : |
@use '../utils' as *;
/*----------------------------------------*/
/* 05. blog css start
/*----------------------------------------*/
.tp-blog {
&__item {
&:hover{
& .tp-blog__thumb{
& img {
transform: scale(1.2) rotate(-4deg);
}
}
}
}
&__thumb{
margin-bottom: 20px;
position: relative;
overflow: hidden;
border-radius: 20px;
@include tp-root('div'){
& img {
border-radius: 20px;
transition: .7s;
width: 387px;
height: 295px;
object-fit: cover;
}
}
}
&__thumb-text{
position: absolute;
top:0;
left: 20px;
width: 79px;
height: 94px;
background: #FA4D8B;
border-radius: 0px 0px 35.5px 35.5px;
display: flex;
align-items: center;
justify-content: center;
color: var(--tp-common-white);
& span{
font-weight: 700;
font-size: 24px;
line-height: 26px;
@media #{$lg}{
font-size: 20px;
}
& b {
font-size: 18px;
@media #{$lg}{
font-size: 15px;
}
}
}
}
&__meta{
& span {
font-weight: 400;
font-size: 18px;
font-family: var(--tp-ff-heading);
padding-bottom: 15px;
display: inline-block;
@media #{$lg,$md,$xs}{
font-size: 16px;
}
& b{
font-weight: 400;
position: relative;
&::before{
content: '';
height: 6px;
width: 6px;
border-radius: 50%;
background-color: var(--tp-common-purple);
display: inline-block;
transform: translateY(-2px);
margin-right: 7px;
margin-left: 5px;
}
}
}
}
&__title{
font-weight: 500;
font-size: 24px;
line-height: 32px;
margin-bottom: 0;
transition: .3s;
&:hover {
color: var(--tp-common-purple);
}
@media #{$lg,$md}{
font-size: 23px;
}
@media #{$xs}{
font-size: 23px;
& br {
display: none;
}
}
@media #{$sm}{
font-size: 21px;
& br {
display: none;
}
}
@media only screen and (min-width: 440px) and (max-width: 575px){
font-size: 24px;
}
}
&__link{
& a{
font-weight: 500;
font-size: 16px;
line-height: 20px;
font-family: var(--tp-ff-heading);
color: var(--tp-common-black);
display: inline-block;
margin-top: 20px;
& i {
display: inline-block;
transform: translateY(2px);
margin-left: 11px;
}
transition: .3s;
&:hover {
color: var(--tp-common-purple);
}
}
}
&__shape-1{
position: absolute;
top: 170px;
left:140px;
animation: moving 9s linear infinite;
}
&__shape-2{
position: absolute;
bottom: 130px;
left:90px;
animation: tpswing 1s forwards infinite alternate;
@media #{$xxxl}{
left: 20px;
}
@media #{$xxl}{
left: -20px;
bottom: 20px;
}
}
}
.tp-blog-4 {
&__item {
&:hover {
& .tp-blog-4__thumb {
& img {
transform: scale(1.2) rotate(-3deg);
}
}
}
}
&__thumb {
overflow: hidden;
& img {
width: 100%;
transition: .9s;
}
}
&__thumb-text {
position: absolute;
bottom: 0;
left: 0;
& span {
color: #1B1A1A;
font-family: 'Syne', sans-serif;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
height: 40px;
line-height: 40px;
padding: 0 22px;
background-color: var(--tp-common-white);
display: inline-block;
}
}
&__title {
font-size: 24px;
font-weight: 500;
line-height: 34px;
text-transform: capitalize;
padding-right: 30px;
padding-bottom: 7px;
transition: .3s;
&:hover {
color: var(--tp-common-purple-2);
}
@media #{$xl}{
font-size: 22px;
}
@media #{$lg}{
font-size: 19px;
padding-right: 0;
}
@media #{$md}{
font-size: 21px;
padding-right: 0;
}
@media #{$xs}{
font-size: 18px;
padding-right: 0;
}
@media #{$sm}{
font-size: 24px;
padding-right: 70px;
}
}
&__meta {
& span {
color: #000;
font-family: 'Syne', sans-serif;
font-size: 16px;
font-weight: 400;
margin-right: 20px;
}
}
&__content {
padding-top: 30px;
}
}
.sidebar{
&__widget{
padding: 30px 30px;
background: #F4F6F8;
@media #{$lg}{
padding: 30px 20px;
}
&-title{
position: relative;
display: inline-block;
font-weight: 600;
font-size: 22px;
color: #0A2C3D;
padding-left: 7px;
margin-bottom: 30px;
&::after{
position: absolute;
content: "";
left: 0px;
height: 21px;
width: 2px;
top: 50%;
background: var(--tp-common-purple-2);
@include transform(translateY(-50%));
}
}
& ul{
& li{
margin-bottom: 10px;
list-style: none;
&:hover{
& a{
color: var(--tp-common-purple-2);
}
}
&:last-child{
margin-bottom: 0;
}
a{
position: relative;
font-weight: 400;
font-size: 16px;
color:#445658;
display: block;
@media #{$lg,$md,$xs}{
font-size: 14px;
}
& span{
float: right;
}
}
}
}
}
&__about{
padding: 37px 0 38px 0;
}
&__thumb{
& img{
border-radius: 50%;
margin-bottom: 20px;
}
}
&__content{
&-title{
font-weight: 700;
font-size: 16px;
text-transform: uppercase;
color: var(--tp-common-black);
margin-bottom: 6px;
}
&-designation{
font-weight: 400;
font-size: 14px;
color: #727A7D;
display: block;
margin-bottom: 13px;
}
& p{
font-size: 16px;
color: #838383;
margin-bottom: 27px;
@media #{$lg}{
font-size: 13px;
}
@media #{$md}{
padding: 0 50px;
font-size: 16px;
}
@media #{$xs}{
font-size: 16px;
}
}
&-social{
& a{
height: 37px;
width: 42px;
line-height: 37px;
text-align: center;
display: inline-block;
border: 1px solid #E8E8E8;
margin-right: 12px;
& i{
transition: .3s;
}
&:hover{
border: 1px solid var(--tp-common-purple-2);
background-color: var(--tp-common-purple-2);
& i{
color: var(--tp-common-white);
}
}
}
}
}
&__search{
position: relative;
& input{
width: 100%;
height: 60px;
line-height: 60px;
background: var(--tp-common-white);
padding: 0 25px;
text-transform: capitalize;
border: 1px solid #fff;
outline: none;
padding-right: 50px;
color: #838383;
font-size: 16px;
font-weight: 400;
line-height: 26px;
&:focus{
border: 1px solid var(--tp-theme-2);
}
}
& button{
position: absolute;
top: 0;
right: 27px;
height: 100%;
line-height: 60px;
color: var(--tp-common-black);
}
}
&__banner{
&::after{
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba($color: #000, $alpha: .5);
}
&-content{
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
z-index: 1;
background: var(--tp-common-white);
& h4{
padding: 15px 20px;
font-size: 24px;
color: var(--tp-common-black);
text-transform: uppercase;
margin-bottom: 0;
}
}
}
}
.tagcloud{
& a{
font-weight: 400;
font-size: 14px!important;
color: #77787B;
text-transform: capitalize;
padding: 6px 22px;
margin-right: 5px;
background-color: var(--tp-common-white);
border: 1px solid #F6F3EE;
margin-bottom: 14px;
display: inline-block;
@media #{$xl}{
padding: 6px 18px;
}
@media #{$lg,$md,$xs}{
padding: 6px 12px;
}
@media #{$xs}{
padding: 6px 15px;
font-size: 13px;
}
&:hover{
color: var(--tp-common-white);
background-color: var(--tp-common-purple-2);
}
}
}
.rc{
&__post{
& ul{
& li{
&:not(:last-child){
margin-bottom: 15px;
}
}
}
&-title{
font-weight: 400;
font-size: 16px;
color: var(--tp-common-black-3);
line-height: 28.8px;
padding-right: 10px;
@media #{$lg}{
font-size: 12px;
line-height: 20px;
}
@media #{$md}{
font-size: 15px;
}
@media #{$xs}{
font-size: 12px;
padding-right: 0;
line-height: 20px;
}
@media #{$sm}{
font-size: 15px;
padding-right: 0;
line-height: 20px;
}
& a{
&:hover{
color: var(--tp-theme-2);
}
}
}
}
&__meta{
& span{
font-weight: 400;
font-size: 15px;
color: #888686;
display: block;
margin-bottom: 7px;
@media #{$lg,$md,$xs}{
font-size: 13px;
}
& svg{
transform: translateY(-2px);
margin-right: 3px;
}
}
}
&__post-thumb{
flex: 0 0 auto;
@media #{$lg}{
margin-right: 15px;
}
& img {
width: 105px;
height: 84px;
object-fit: cover;
}
}
}
/************/
.postbox{
&__thumb{
position: relative;
margin-bottom: 28px;
& .play-btn{
position: absolute;
top: 38%;
left: 44%;
z-index: 1;
& a{
height: 85px;
width: 85px;
line-height: 87px;
&::after{
display: none;
}
}
}
}
&__item{
&-single{
&:hover{
box-shadow: none;
}
}
}
&__tag{
position: absolute;
bottom: 0px;
left: 1px;
& p{
margin-bottom: 0;
font-weight: 700;
font-size: 12px;
text-align: center;
text-transform: uppercase;
color: #fff;
letter-spacing: 0.135em;
background: var(--tp-common-purple-2);
clip-path: polygon(0px 0px, 100% 0px, 92.7% 53.45%, 100% 100%, 0px 100%, 0px 50%);
width: auto;
padding: 6px 17px 6px 8px;
}
}
&__content{
@media #{$xs}{
padding-left: 10px;
padding-right: 10px;
}
&-single{
padding-left: 0;
padding-right: 0;
border: none;
}
}
&__title{
font-weight: 600;
font-size: 32px;
color: var(--tp-common-black);
margin-bottom: 22px;
@media #{$lg,$md,$sm}{
font-size: 28px;
}
@media #{$xs}{
font-size: 27px;
}
@media #{$sm}{
font-size: 23px;
}
& a{
&:hover{
color: var(--tp-theme-2);
}
}
}
&__meta{
margin-bottom: 20px;
& span{
position: relative;
font-weight: 400;
font-size: 15px;
line-height: 20px;
color: rgba($color: #020626, $alpha: 0.6);
margin-right: 25px;
@media #{$xs}{
font-size: 13px;
}
&:last-child{
margin-right: 0;
}
&:not(:last-of-type){
&::before{
position: absolute;
content: "";
height: 1px;
width: 9px;
background: #676A7D;
top: 10px;
right: -20px;
}
}
& i{
color: var(--tp-common-purple-2);
margin-right: 5px;
}
}
}
&__blockquote{
&-shape{
position: absolute;
bottom: 34px;
right: 44px;
}
& blockquote{
background: #F4F6F8;
padding: 35px 26px;
margin-bottom: 50px;
margin-top: 50px;
&::after{
position: absolute;
content: "";
top: 0;
left: 0;
clip-path: polygon(64% 0, 0 0, 0 68%);
background: var(--tp-common-purple-2);
height: 40px;
width: 40px;
}
& p{
font-family: var(--tp-ff-heading);
font-weight: 600;
font-size: 24px;
color: #121D2C;
margin-bottom: 25px;
@media #{$lg,$md}{
font-size: 20px;
}
@media #{$xs}{
font-size: 18px;
}
}
& cite{
font-weight: 400;
font-size: 16px;
color: #332D2D;
font-style: inherit;
position: relative;
&::before {
content: "";
font-size: 28px;
color: #fff;
padding-bottom: 0px;
display: inline-block;
background: #191515;
height: 2px;
width: 16px;
font-weight: 400;
text-align: center;
top: -4px;
margin-right: 10px;
position: relative;
}
}
}
}
&-details-desc-thumb-caption{
color: #0D0A0A;
text-align: center;
font-family: var(--tp-ff-heading);
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 32px;
margin-top: 30px;
margin-bottom: 50px;
display: block;
}
&__list{
margin-bottom: 60px;
&-title{
font-weight: 600;
font-size: 28px;
color: #121D2C;
margin-bottom: 50px;
@media #{$xs}{
font-size: 25px;
}
@media #{$sm}{
font-size: 23px;
}
}
&-content{
& ul{
@media #{$xs}{
margin-bottom: 50px;
}
& li{
list-style: none;
font-weight: 400;
font-size: 16px;
color: #445658;
margin-bottom: 24px;
position: relative;
padding-left: 40px;
@media #{$lg,$md,$xs}{
font-size: 14px;
}
& span{
height: 27px;
width: 27px;
line-height: 25px;
border-radius: 50%;
display: inline-block;
text-align: center;
background-color: var(--tp-common-white);
color: var(--tp-common-purple-2);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.06);
position: absolute;
top: 0;
left: 0;
& svg {
display:inline-block;
transform: translateY(-2px);
}
&.active{
background-color: var(--tp-common-purple-2);
color: var(--tp-common-white);
}
}
}
}
}
}
&__details{
&-share{
@media #{$xs}{
margin-top: 20px;
}
&-wrapper{
padding-top: 20px;
padding-bottom: 30px;
border-bottom: 1px solid #F7F7F7;
clear: both;
}
& span{
font-size: 20px;
font-weight: 500;
color: #121416;
margin-right: 15px;
@media #{$lg,$md,$xs}{
font-size: 16px;
}
}
& a{
height: 37px;
width: 37px;
text-align: center;
line-height: 37px;
display: inline-block;
background-color: #F2F6F7;
color: var(--tp-common-black);
margin-right: 10px;
transition: all .3s ease-in-out;
@media #{$lg} {
margin-bottom: 10px;
height: 30px;
width: 30px;
line-height: 30px;
margin-right: 8px;
}
&:hover{
background-color: var(--tp-common-purple-2);
color: var(--tp-common-white);
}
}
}
&-tag{
& span{
@media #{$lg,$md,$xs}{
font-size: 16px;
}
font-size: 20px;
font-weight: 500;
color: #121416;
margin-right: 6px;
}
}
}
&__read-more{
& .postbox-btn{
position: relative;
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
color: #132047;
& span{
margin-left: 5px;
&::before{
position: absolute;
content: "";
top: 1px;
right: -10px;
border: 1px solid #E8F2F9;
height: 28px;
width: 28px;
display: inline-block;
border-radius: 50%;
}
}
}
}
&__text{
& img{
max-width: 100%;
}
& p{
font-weight: 400;
font-size: 18px;
line-height: 1.8;
color: #838383;
margin-bottom: 28px;
@media #{$xxl,$xl}{
font-size: 16px;
}
@media #{$lg,$md}{
font-size: 15px;
}
@media #{$xs}{
font-size: 14px;
}
}
&-single{
& p{
margin-bottom: 15px;
}
}
}
&__slider{
& button{
position: absolute;
left: 50px;
top: 50%;
@include transform(translateY(-50%));
z-index: 1;
font-size: 30px;
color: var(--tp-common-white);
&.postbox-slider-button-next{
left: auto;
right: 50px;
@media #{$xs}{
right: 10px;
}
}
@media #{$xs}{
left: 10px;
}
}
}
&__comment{
& ul{
& li{
margin-bottom: 10px;
list-style: none;
&.children{
margin-left: 65px;
@media #{$xs}{
margin-left: 15px;
}
}
}
}
& .comment-respond {
margin-bottom: 40px;
padding: 65px 45px 80px 45px;
background: #F8F8F9;
@media #{$xs} {
padding: 20px;
}
&-title{
font-size: 26px;
font-weight: 600;
margin-bottom: 40px;
@media #{$lg,$md,$xs}{
font-size: 22px;
}
}
}
&-input{
position: relative;
margin-bottom: 20px;
& span{
font-weight: 600;
color: var(--tp-common-black);
margin-bottom: 12px;
display: block;
}
& input,
& textarea{
height: 55px;
padding: 0 20px;
width: 100%;
font-size: 14px;
color: var(--tp-common-black);
outline: none;
background: #FFFFFF;
border: 1px solid #E5E5E5;
box-shadow: 0px 15px 10px rgba(242, 242, 242, 0.18);
&:focus{
border: 1px solid var(--tp-common-purple-2);
&::placeholder{
font-size: 0;
}
}
}
& textarea{
height: 175px;
resize: none;
padding-bottom: 20px;
}
}
&-title{
font-size: 28px;
color: #121416;
font-weight: 600;
margin-bottom: 20px;
@media #{$lg,$md,$xs}{
font-size: 24px;
}
}
&-box{
padding-top: 20px;
}
&-avater{
& img{
width: 50px;
height: 50px;
border-radius: 50%;
}
}
&-name{
margin-bottom: 5px;
& h5{
font-weight: 600;
font-size: 18px;
line-height: 1;
color: #121416;
margin-bottom: 0;
}
& span{
font-weight: 500;
font-size: 12px;
color: #949392;
}
}
&-text{
@media #{$xs}{
margin-left: 0;
margin-top: 15px;
}
& p{
color: #838383;
font-size: 16px;
font-weight: 400;
line-height: 28.8px;
margin-bottom: 15px;
@media #{$lg} {
font-size: 15px;
}
@media #{$md,$xs} {
font-size: 14px;
}
}
}
&-reply{
& span{
position: absolute;
top: 22px;
right: 50px;
}
}
&-agree{
padding-left: 5px;
@media #{$xs}{
padding-left: 0;
flex-wrap: wrap;
}
@media #{$sm}{
padding-left: 5px;
flex-wrap:nowrap;
}
& input{
margin: 0;
appearance: none;
-moz-appearance: none;
display: block;
width: 16px;
height: 16px;
background: var(--tp-common-white);
border: 1px solid #949392;
outline: none;
flex : 0 0 auto;
@include transform(translateY(-1px));
&:checked{
position: relative;
background-color: var(--tp-common-purple-2);
border-color: transparent;
&::after{
box-sizing: border-box;
content: '\f00c';
position: absolute;
font-family:'Font Awesome 6 Pro';
font-size: 10px;
color: var(--tp-common-white);
top: 47%;
left: 50%;
@include transform(translate(-50%, -50%));
}
}
&:hover{
cursor: pointer;
}
}
& label{
padding-left: 8px;
color: #838383;
line-height: 1;
@media #{$lg,$md}{
font-size: 14px;
}
@media #{$xs}{
font-size: 14px;
padding-left: 0;
margin-top: 10px;
}
@media #{$sm}{
font-size: 12px;
padding-left: 10px;
margin-top: 0px;
}
& a{
color: var(--tp-common-black);
font-weight: 600;
padding-left: 4px;
&:hover{
color: var(--tp-theme-1);
}
}
&:hover{
cursor: pointer;
}
}
}
}
&__tag{
& span{
font-size: 16px;
margin-bottom: 17px;
color: var(--tp-common-black);
margin-right: 10px;
}
}
&__play-btn{
& a{
height: 85px;
width: 85px;
line-height: 85px;
background-color: var(--tp-common-white);
color: var(--tp-common-purple-2);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
border-radius: 50%;
animation: pulse 2s infinite;
@media #{$xs}{
height: 60px;
width: 60px;
line-height: 60px;
}
}
}
&__icon {
position: absolute;
top: -4px;
}
&__read-more {
margin-right: 65px;
& a {
text-transform: uppercase;
color: #132047;
font-size: 14px;
font-weight: 500;
letter-spacing: 2.52px;
text-transform: uppercase;
transition: .3s;
&:hover{
color: var(--tp-common-purple);
}
}
}
&__wrapper{
@media #{$md,$lg}{
margin-bottom: 50px;
}
}
}
.postbox{
&__slider-arrow-wrap{
& button{
height: 50px;
width: 50px;
line-height: 50px;
background-color: var(--tp-common-white);
color: var(--tp-common-black);
text-align: center;
font-size: 18px;
}
& .postbox-arrow-prev{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
z-index: 9;
}
& .postbox-arrow-next{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
z-index: 9;
}
}
}
.basic-pagination{
margin-top: 10px;
@media #{$xs} {
margin-bottom: 50px;
}
& ul{
padding-left: 0!important;
& li{
list-style: none;
display: inline-block;
margin-right: 14px;
@media #{$xs} {
margin-right: 5px;
}
&:hover{
& a{
color: var(--tp-common-white);
background-color: var(--tp-common-purple-2);
border: 2px solid var(--tp-common-purple-2);
}
}
& a{
height: 50px;
width: 50px;
display: inline-block;
line-height: 50px;
text-align: center;
font-weight: 900;
font-size: 15px;
color: #071C34;
border: 2px solid #EDEDED;
transform: translateY(3px);
transition: all .3s ease-in-out;
}
& .current{
height: 50px;
width: 50px;
display: inline-block;
line-height: 50px;
text-align: center;
font-weight: 900;
font-size: 15px;
color: var(--tp-common-white);
background-color: var(--tp-common-purple-2);
transition: all .3s ease-in-out;
}
}
}
}
.postbox__wrapper {
& .format-video {
& .video-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
background-color: var(--tp-common-purple-2);
border-radius: 50%;
color: var(--tp-common-white);
animation: pulse 2s infinite;
&:hover {
background: var(--tp-common-white);
color: var(--tp-common-purple-2);
}
}
}
}