File: /home/frenchy/refonte2023/wordpress/wp-content/plugins/ova-career/assets/css/_single.scss
.single-career {
.wrap-fullwidth {
background-color: #f4f2f9;
}
}
.career_single_container {
padding-bottom: 120px;
@media (max-width: 1024px) {
padding-bottom: 90px;
}
.career_banner {
margin-bottom: -120px;
@media (max-width: 1024px) {
margin-bottom: -70px;
}
img {
display: block;
width: 100%;
height: 600px;
object-fit: cover;
@media (max-width: 1024px) {
height: 480px;
}
@media (max-width: 767px) {
height: 380px;
}
}
}
}
.ova_career_single{
display: grid;
grid-template-columns: 0.7fr 0.3fr;
grid-gap: 30px;
@media (max-width: 1024px) {
grid-template-columns: 1fr;
}
.heading {
margin: 0;
font-size: 22px;
line-height: 1.3;
&.heading-related-career {
margin-bottom: 22px;
}
}
/*Main Content*/
.main_content {
position: relative;
background-color: #fff;
padding: 40px;
@media (max-width: 767px) {
padding: 30px;
}
.icon-heart {
position: absolute;
top: 30px;
right: 30px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(29, 23, 41, 0.1);
display: inline-flex;
align-items: center;
justify-content: center;
i {
display: inline-flex;
color: var(--primary);
}
}
.top-info {
position: relative;
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 45px;
margin-right: 45px;
padding-bottom: 45px;
border-bottom: 1px solid rgba(29, 23, 41, 0.1);
@media (max-width: 450px) {
flex-direction: column;
margin-right: 0;
}
.career-thumbnail {
display: block;
}
}
.career-title {
margin: 0 0 8px 0;
font-size: 24px;
font-weight: 800;
}
.by-and-categories {
margin-bottom: 15px;
line-height: 1.5;
.by, .categories {
display: inline-block;
}
.name {
color: var(--heading);
}
}
.tag-wrapper {
.tag {
position: relative;
display: inline-block;
margin: 0 10px 10px 0;
padding: 8px 10px;
font-size: 14px;
line-height: 1;
color: var(--heading);
background-color: #f3f3f3;
&.from {
color: #fff;
background-color: var(--primary);
}
i {
line-height: 1;
vertical-align: middle;
}
}
}
.share-social-icons {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
list-style: none;
padding: 30px 0;
margin: 0;
margin-top: 30px;
li {
display: inline-block;
a {
transition: all .3s ease;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
width: 46px;
height: 46px;
border-radius: 50%;
font-family: var(--secondary-font);
font-weight: 400;
font-size: 14px;
line-height: 1.2;
font-feature-settings: 'pnum' on, 'lnum' on, 'ordn' on;
color: var(--heading);
&:hover {
transition: all .3s ease;
background-color: var(--primary);
color: #fff;
}
i {
display: inline-flex;
}
}
}
.share {
font-size: 20px;
font-weight: bold;
color: var(--heading);
}
}
.career_gallery {
margin: 25px 0 50px 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap:15px;
@media (max-width: 767px) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 400px) {
grid-template-columns: 1fr;
}
.gallery-fancybox {
position: relative;
&:hover {
.blur-bg {
transition: all .5s ease;
opacity: 1;
}
}
.blur-bg {
transition: all .5s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(29, 23, 41, 0.85);
opacity: 0;
cursor: pointer;
.icon {
transition: all .5s ease;
position: absolute;
top: 50%;
left: 50%;
width: 45px;
height: 45px;
display: inline-flex;
justify-content: center;
align-items: center;
transform: translate(-50%,-50%);
border-radius: 50%;
background-color: var(--primary);
i {
display: inline-flex;
color: #fff;
}
}
}
img {
display: block;
width: 100%;
height: 180px;
object-fit: cover;
@media (max-width: 767px) {
height: 150px;
}
}
}
}
.career_map {
position: relative;
z-index: 1;
#ova_career_admin_show_map {
height: 400px;
margin-bottom: 55px;
@media (max-width: 767px) {
height: 320px;
}
}
}
.career-related-wrapper {
.item-career {
margin-bottom: 30px;
}
}
}
.career_sidebar {
position: sticky;
top: 0;
background-color: #fff;
border-top: 3px solid var(--primary);
height: fit-content;
.top-sidebar {
text-align: center;
padding: 40px 45px;
border-bottom: 1px solid rgba(29, 23, 41, 0.1);
}
.apply {
margin-bottom: 20px;
.days {
color: var(--primary);
}
}
.button-apply, .website {
transition: all .3s ease;
display: inline-block;
width: 100%;
padding: 20px 24px;
border-radius: 0;
font-size: 14px;
font-weight: bold;
line-height: 1.3;
text-align: center;
text-transform: uppercase;
background-color: var(--primary);
color: #fff;
i {
display: inline-block;
margin-left: 5px;
}
&:hover {
transition: all .3s ease;
background-color: var(--heading);
}
}
.message {
transition: all .3s ease;
display: inline-block;
width: 100%;
margin: 15px 0 30px 0;
padding: 20px 24px;
border-radius: 0;
border: 1px solid var(--primary);
font-size: 14px;
font-weight: bold;
line-height: 1.3;
text-align: center;
text-transform: uppercase;
background-color: #fff;
color: var(--primary);
i {
display: inline-block;
margin-left: 5px;
}
&:hover {
transition: all .3s ease;
color: #fff;
background-color: var(--primary);
}
}
.middle-bottom-sidebar {
padding: 40px;
.heading {
margin: 0 0 23px 0;
}
}
.listing-info-bar {
margin: 0;
padding: 0 0 20px 0;
list-style-type: none;
li {
position: relative;
margin: 0 0 15px 0;
padding-left: 30px;
font-size: 16px;
font-weight: 400;
line-height: 1.3;
color: var(--text);
i {
position: absolute;
left: 0;
top: 0;
color: var(--primary);
}
.details-content {
display: block;
margin: 5px 0 0 0;
color: var(--heading);
}
}
}
.social {
margin: 0;
padding: 0;
text-align: center;
list-style-type: none;
li {
transition: all .3s ease;
margin: 4px;
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #efeafd;
&:hover {
transition: all .3s ease;
background-color: var(--primary);
i {
transition: all .3s ease;
color: #fff;
}
}
a {
display: inline-flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
i {
transition: all .3s ease;
display: inline-flex;
font-size: 14px;
color: var(--primary);
}
}
}
}
}