.hfc-post-head-wrap {
background-color: black;
padding: 50px 0 30px;
}
.hfc-post-head-inner {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
max-width: 1240px;
padding: 20px;
margin: 0 auto;
}
.hfc-post-head-meta {
flex-basis: 60%;
color: #fff;
}
.hfc-post-head-image {
position: relative;
flex-basis: 40%;
}
.hfc-post-head-meta h1 {
font-size: 57px;
font-weight: bold;
}
.hfc-post-head-meta-list {
display: flex;
justify-content: left;
align-items: center;
gap: 10px;
font-size: 19px;
line-height: 19px;
margin-top: 22px;
}
.hfc-post-head-meta-list div:not(:last-child) {
border-right: 1px solid #fff;
padding-right: 10px;
}
.hfc-post-auth-modal {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.1s linear;
transition-delay: 100ms;
position: absolute;
left: 0;
top: 30px;
box-sizing: border-box;
width: 400px;
background-color: #fff;
color: #000;
z-index: 999;
display: flex;
gap: 5px;
padding: 20px 15px;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.hfc-auth-profile-pic {flex-basis: 30%;}
.hfc-auth-profile-pic img {
border-radius: 0px 10px;
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
.hfc-auth-profile-details {
flex-basis: 70%;
font-size: 18px;
}
.hfc-auth-profile-details a {
font-size: 22px;
font-weight: bold;
color: #222;
margin-bottom: 10px;
display: inline-block;
}
.hfc-post-auth-name:hover .hfc-post-auth-modal,
.hfc-post-auth-modal:hover {
visibility: visible;
opacity: 1;
}
.hfc-post-auth-name {
position: relative;
}
.hfc-post-auth-name a {color: #fff;}
.hfc-auth-profile-details > a {color: #222;}
.hfc-auth-profile-details p {
margin: 0 !important;
}
.hfc-post-head-image:before {
position: absolute;
right: -25px;
top: -25px;
width: 100%;
height: 100%;
content: "";
border-radius: 10px;
border: 1px solid #747474;
background: #121212;
}
.hfc-post-head-image img {
position: relative;
width: 100%;
height: auto;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
z-index: 9;
object-fit: cover;
max-height: 350px;
object-position: center;
background-color: #fff;
}
span.hfc-cat-name svg {
fill: #787878;
height: 16px;
width: 16px;
}
.hfc-cat-wrap {
display: flex;
justify-content: left;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.hfc-cat-wrap .hfc-cat-name {
display: flex;
justify-content: center;
align-items: center;
gap: 3px;
}
.hfc-cat-name a {
font-size: 16px;
color: white;
}
.hfc-cat-name a:hover {
color: red;
} @media (max-width: 1200px) {
.hfc-post-head-image {margin-right: 20px;}
.hfc-post-head-image img {
max-width: 500px;
height: auto;
}
.hfc-post-head-meta h1 {font-size: 42px;}
}