/* ------------------------------
Single Post Styles
--------------------------------*/
/* Badge and Banner Section */
.single-post-banner-section {
margin-top: 5rem;
margin-bottom: 2rem;
}
.post-badge {
display: inline-block;
background: #261C3F;
color: #ffffff;
padding: 0.375rem 0.75rem;
border-radius: 0.375rem;
font-size: 0.75rem;
font-weight: 600;
font-family: "Inter Display", sans-serif;
margin-bottom: 1rem;
}
.badge-text {
color: #ffffff;
}
.post-banner {
background: linear-gradient(135deg, #261C3F 0%, #4A3A6B 100%);
padding: 0rem;
border-radius: 0.5rem;
margin-bottom: 1.5rem;
position: relative;
overflow: hidden;
}
.post-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.banner-content {
position: relative;
z-index: 1;
height: 10rem;
overflow: hidden;
}
.banner-content::after{
content: '';
width: 26.875rem;
height: 9.688rem;
position: absolute;
top: 0;
right: 0;
background: url('data:image/svg+xml,') ;
}
.banner-tagline {
color: #ffffff;
font-size: 1.25rem;
font-weight: 500;
line-height: 1.6;
margin: 0;
font-family: "Inter Display", sans-serif;
}
.post-breadcrumbs {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: #6b7280;
font-family: "Inter Display", sans-serif;
margin-bottom: 2rem;
}
.pro-card {
width: 100%;
background: #fff;
padding: 1rem;
border-radius: 1rem;
border: 1px solid #e8efe8;
box-shadow: 0 3px 14px rgba(0,0,0,0.05);
}
.pro-card-header {
padding: 0.5rem;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.title-top {
font-size: 14px;
font-weight: 500;
color: #051C18;
margin-bottom: 0rem;
font-family: "Inter Display", sans-serif;
}
.title-top span.color{
font-weight: 700;
color: #015244;
}
.title-top span.title-top-sub{display: block; color: #7D8987;}
.pro-box {
background: #F5F5F5;
border: 1px solid rgba(1, 82, 68, 0.12);
border-radius: 1rem;
padding: 1rem;
font-size: 24px;
font-weight: 700;
}
.pro-box p.titletag {
color: #051C18;
margin: 0;
line-height: 28px;
}
.pro-box p span{ display: block; color: #015043;}
.subtext {
font-family: "Inter Display", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 22px;
margin-bottom: 24px;
margin-top: 8px;
}
.feature {
font-family: "Inter Display", sans-serif;
font-style: normal;
background: linear-gradient(90deg, rgba(1, 82, 68, 0.08) -25.22%, rgba(1, 82, 68, 0.008) 100%);
border-radius: 1000px;
font-weight: 500;
font-size: 12px;
line-height: 16px;
padding: 8px;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.feature .icon {
font-size: 18px;
}
.post-breadcrumbs a {
color: #6b7280;
text-decoration: none;
transition: color 0.2s ease;
}
.post-breadcrumbs a:hover {
color: #015244;
text-decoration: none;
}
.breadcrumb-separator {
color: #9ca3af;
}
.breadcrumb-current {
color: #111827;
font-weight: 500;
}
/* Single Post Hero Section */
.single-post-hero {
background: linear-gradient(179.54deg, #F8F8FC 0.42%, #EEF2FD 83.6%);
padding: 7rem 0 4rem 0;
min-height: 50vh;
display: flex;
align-items: center;
position: relative;
}
.latest-post-section::after, .single-post-hero::after {
content: '';
background-image: url(https://supersourcing.com/therighthire/wp-content/uploads/2024/01/custom-border.svg);
background-position: center;
position: absolute;
bottom: 0;
background-size: contain;
width: 100%;
height: 0.25rem;
flex-shrink: 0;
background-repeat: no-repeat;
}
.single-post-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
max-width: var(--max-width);
margin: 0 auto;
}
.single-post-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.single-post-header {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* Post Meta */
.single-post-meta {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem;
}
.single-post-category {
font-size: 0.75rem;
font-weight: 700;
color: #015244;
text-transform: uppercase;
letter-spacing: 0.1em;
background: rgba(27, 78, 255, 0.1);
padding: 0.375rem 0.75rem;
border-radius: 0.375rem;
}
.single-post-separator {
color: #6b7280;
font-size: 0.75rem;
}
.single-post-read-time {
font-size: 0.875rem;
font-weight: 500;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Post Title */
.single-post-title {
font-size: 2.5rem;
font-weight: 700;
color: #0a0a0a;
line-height: 1.2;
margin: 0 0 1rem 0;
font-family: "Inter Display", sans-serif;
}
.single-post-subtitle {
font-size: 1.5rem;
font-weight: 700;
color: #0a0a0a;
line-height: 1.3;
margin: 0 0 2rem 0;
font-family: "Inter Display", sans-serif;
}
/* Publication Date */
.single-post-date {
font-size: 1rem;
color: #6b7280;
font-weight: 400;
}
.single-post-date time {
color: inherit;
text-decoration: none;
}
/* Author Information */
.single-post-author {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 0.5rem;
}
.single-post-author-avatar {
width: 3rem;
height: 3rem;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.single-post-author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.single-post-author-info {
display: flex;
flex-direction: column;
line-height: 1.25rem;
}
.single-post-author-name {
font-size: 1.125rem;
font-weight: 600;
color: #111827;
margin: 0;
line-height: 1.25rem;
}
.single-post-author-role {
font-size: 0.875rem;
color: #6b7280;
margin: 0;
}
/* Feature Image */
.single-post-feature {
display: flex;
justify-content: center;
align-items: center;
}
.single-post-feature-image {
width: 100%;
height: 20.9375rem;
max-width: 100%;
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.feature-image {
width: 100%;
height: 100%;
object-fit: fill;
border-radius: 1rem;
box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.1);
}
/* Post Content Section */
.single-post-body {
position: relative;
padding: 8rem 0;
background: #ffffff;
}
.single-post-content-wrapper {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 22rem;
gap: 2rem;
}
.single-post-sidebar,
.single-post-sidebar .sidebar-widget {
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
.single-post-layout-content {
max-width: 60rem;
}
.single-post-article {
line-height: 1.7;
}
.single-post-content-text {
font-size: 1.25rem;
color: #374151;
margin-bottom: 2rem;
}
.single-post-content-text h2, .single-post-content-text h2 strong .single-post-content-text h2 b {
font-size: 1.75rem;
font-weight: 700 !important;
color: #111827;
margin: 2rem 0 1rem 0;
font-family: "Inter Display", sans-serif;
}
.single-post-content-text h3, .single-post-content-text h3 strong .single-post-content-text h3 b {
font-size: 1.5rem;
font-weight: 600;
color: #111827;
margin: 1.5rem 0 0.75rem 0;
font-family: "Inter Display", sans-serif;
}
.single-post-content-text p {
margin-bottom: 1.5rem;
line-height: 1.7;
}
.single-post-content-text ul,
.single-post-content-text ol {
margin-bottom: 1.5rem;
padding-left: 1.5rem;
}
.single-post-content-text li {
margin-bottom: 0.5rem;
}
.single-post-content-text blockquote {
border-left: 0.25rem solid #015244;
padding-left: 1.5rem;
margin: 2rem 0;
font-style: italic;
color: #6b7280;
background: #f9fafb;
padding: 1.5rem;
border-radius: 0.75rem;
}
.single-post-content-text code {
background: #f1f5f9;
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
font-size: 0.875rem;
color: #015244;
}
.single-post-content-text pre {
background: #1e293b;
color: #e2e8f0;
padding: 1.5rem;
border-radius: 0.5rem;
overflow-x: auto;
margin: 1.5rem 0;
}
.single-post-content-text pre code {
background: none;
padding: 0;
color: inherit;
}
/* Sidebar */
.single-post-sidebar {
display: flex;
flex-direction: column;
gap: 1rem;
height: fit-content;
}
.single-post-sidebar {
position: sticky;
top: 2rem;
}
.sidebar-widget.toc-widget,
.sidebar-widget.cta-widget {
max-width: 100%;
width: 100%;
margin: 0;
}
.sidebar-widget {
background: #ffffff;
border: 0.0625rem solid #e5e7eb;
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: 0 0.514204375rem 3.29090625rem rgba(40, 95, 245, 0.08);
}
.sidebar-widget.cta-widget {
padding: 0 !important;
}
.widget-title {
font-size: 1.125rem;
font-weight: 600;
color: #111827;
margin: 0 0 1rem 0;
font-family: "Inter Display", sans-serif;
}
/* Author Widget */
.author-widget .widget-title {
font-size: 0.75rem;
font-weight: 600;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1rem;
}
.author-card {
display: flex;
align-items: center;
gap: 1rem;
}
.author-avatar {
border-radius: 1rem;
flex-shrink: 0;
}
.author-avatar img{
border-radius: 1rem !important;
}
.author-avatar-img {
width: 4rem;
height: 4rem;
border-radius: 1rem;
object-fit: cover;
}
.author-info {
flex: 1;
}
.author-name {
font-size: 1rem;
font-weight: 600;
color: #111827;
margin: 0rem;
font-family: "Inter Display", sans-serif;
}
.author-title {
font-size: 0.875rem;
color: #6b7280;
margin: 0;
font-family: "Inter Display", sans-serif;
}
/* Post Details Widget */
.post-detail-box {
background: #f3f4f6;
border-radius: 0.5rem;
padding: 1rem !important;
}
.post-detail-box-content {
display: flex;
margin-top: 1.5rem;
gap: 1rem;
align-items: center;
}
.detail-icon {
width: 3rem;
height: 3rem;
background: #E2E8F0;
border-radius: 0.5rem;
padding: 0.5rem;
flex-shrink: 0;
}
.detail-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0rem;
}
.detail-label {
font-size: 0.875rem;
font-weight: 600;
color: #111827;
font-family: "Inter Display", sans-serif;
}
.detail-value {
font-size: 0.875rem;
font-weight: 400;
color: #111827;
font-family: "Inter Display", sans-serif;
}
/* CTA Widgets */
.cta-hirium-pro {
background: #f9fafb;
border: 0.0625rem solid #e5e7eb;
padding: 1.5rem !important;
}
.cta-hirium-pro .cta-content {
position: relative;
}
.cta-hirium-pro .cta-title {
font-size: 1rem;
font-weight: 600;
color: #111827;
margin: 0 0 0.25rem 0;
font-family: "Inter Display", sans-serif;
}
.cta-hirium-pro .cta-subtitle {
font-size: 0.875rem;
color: #6b7280;
margin: 0;
font-family: "Inter Display", sans-serif;
}
.cta-hirium-pro .cta-icon {
position: absolute;
top: 0;
right: 0;
font-size: 1.25rem;
color: #015244;
font-weight: 600;
}
.cta-go-pro {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border: 0.0625rem solid #bae6fd;
padding: 1.5rem !important;
position: relative;
overflow: hidden;
}
.cta-go-pro::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 12.5rem;
height: 12.5rem;
background: rgba(1, 82, 68, 0.05);
border-radius: 50%;
}
.cta-header {
margin-bottom: 1rem;
}
.cta-main-title {
font-size: 1.25rem;
font-weight: 700;
color: #111827;
margin: 0 0 0.25rem 0;
font-family: "Inter Display", sans-serif;
}
.cta-sub-title {
font-size: 1rem;
font-weight: 600;
color: #111827;
margin: 0;
font-family: "Inter Display", sans-serif;
}
.cta-description {
font-size: 0.875rem;
color: #6b7280;
margin: 0 0 1.25rem 0;
font-family: "Inter Display", sans-serif;
}
.cta-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.cta-feature-item {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
color: #111827;
font-family: "Inter Display", sans-serif;
}
.feature-icon {
width: 1.25rem;
height: 1.25rem;
color: #015244;
flex-shrink: 0;
}
.toc-nav {
margin: 0;
}
.toc-list {
list-style: none;
padding: 0;
margin: 0;
}
.toc-list li {
margin-bottom: 0rem;
}
.toc-list a {
color: #6b7280;
text-decoration: none;
font-size: 0.875rem;
transition: color 0.2s ease;
}
.toc-list a:hover {
color: #015244;
}
.toc-link:focus {
outline: 0rem solid transparent !important;
outline-offset: 0rem;
}
/* Post Tags */
.single-post-tags {
margin-top: 2rem;
padding-top: 2rem;
border-top: 0.0625rem solid #e5e7eb;
}
.tags-title {
font-size: 1rem;
font-weight: 600;
color: #111827;
margin: 0 0 1rem 0;
}
.tags-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag-item {
background: #f1f5f9;
color: #015244;
padding: 0.375rem 0.75rem;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s ease;
}
.tag-item a {
color: inherit;
text-decoration: none;
}
.tag-item:hover {
background: #015244;
color: #ffffff;
}
.tag-item:hover a {
color: inherit;
}
/* Related Posts */
.single-post-related {
padding: 4rem 0;
background: #F7F9FC;
border-top: 1px solid #E8E8E8;
}
.related-posts-title {
font-size: 1.75rem;
font-weight: 700;
color: #111827;
text-align: center;
margin: 0 0 2rem 0;
font-family: "Inter Display", sans-serif;
}
.related-posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
max-width: var(--max-width);
margin: 0 auto;
}
.related-post-card {
background: #ffffff;
border-radius: 0.75rem;
padding: 0.375rem;
overflow: hidden;
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
border: 0.0625rem solid #e5e7eb;
display: flex;
flex-direction: column;
}
.related-post-card:hover {
transform: translateY(-0.25rem);
box-shadow: 0 0.5rem 1.5625rem rgba(0, 0, 0, 0.12);
}
/* Banner Section with Featured Image */
.related-post-banner {
position: relative;
height: 14rem;
border-radius: 0.75rem;
overflow: hidden;
background: linear-gradient(180deg, #818CF8 0%, #6366F1 50%, #4F46E5 100%);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding: 1rem;
}
/* Chevron pattern overlay */
.related-post-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
repeating-linear-gradient(
45deg,
transparent,
transparent 15px,
rgba(255, 255, 255, 0.08) 15px,
rgba(255, 255, 255, 0.08) 16px,
transparent 16px,
transparent 30px
),
repeating-linear-gradient(
-45deg,
transparent,
transparent 15px,
rgba(255, 255, 255, 0.08) 15px,
rgba(255, 255, 255, 0.08) 16px,
transparent 16px,
transparent 30px
);
pointer-events: none;
opacity: 0.5;
z-index: 2;
}
/* Badge - White background with black text */
.related-post-badge {
position: relative;
z-index: 3;
display: inline-block;
background: #ffffff;
color: #111827;
padding: 0.125rem 0.5rem;
border-radius: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
font-family: "Inter Display", sans-serif;
text-transform: capitalize;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}
.related-post-content {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
flex-grow: 1;
}
.related-post-meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: #9ca3af;
font-family: "Inter Display", sans-serif;
}
.related-post-date {
color: #9ca3af;
text-decoration: none;
}
.related-post-separator {
color: #9ca3af;
font-weight: 600;
}
.related-post-read-time {
color: #9ca3af;
text-transform: uppercase;
font-size: 0.8125rem;
}
.related-post-title {
font-family: "Inter Display", sans-serif;
font-size: 1.25rem;
font-weight: 700;
color: #111827;
line-height: 1.4;
margin: 0;
}
.related-post-title a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.related-post-title a:hover {
color: #015244;
text-decoration: none;
}
.related-post-excerpt {
font-family: "Inter Display", sans-serif;
font-size: 0.875rem;
color: #6b7280;
line-height: 1.6;
margin: 0;
flex-grow: 1;
}
}
/* Page Links (Pagination within post) */
.page-links {
margin: 2rem 0;
text-align: center;
}
.page-links a {
display: inline-block;
padding: 0.5rem 1rem;
margin: 0 0.25rem;
background: #f1f5f9;
color: #015244;
text-decoration: none;
border-radius: 0.375rem;
font-weight: 500;
transition: all 0.2s ease;
}
.page-links a:hover {
background: #015244;
color: #ffffff;
}
/* Responsive Design for Single Post */
@media (max-width: 64rem) {
.single-post-layout {
grid-template-columns: 1fr;
gap: 2rem;
text-align: left;
}
.single-post-sidebar, .single-post-sidebar .sidebar-widget {width: 100% !important;}
.post-breadcrumbs { align-items: flex-start;}
.single-post-content-wrapper {
display: contents;}
.single-post-header {
gap: 1rem;
align-items: flex-start;
}
.single-post-title {
font-size: 2rem;
}
.single-post-content-wrapper {
grid-template-columns: 1fr;
gap: 2rem;
}
.related-posts-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 75rem) {
.single-post-feature-image {
width: 100%;
height: auto;
aspect-ratio: 595 / 335;
}
}
@media (max-width: 48rem) {
.single-post-banner-section {
margin-top: 4rem;
}
.single-post-body {
padding: 5rem 0;
}
.banner-tagline {
font-size: 1rem;
}
.single-post-hero {
padding: 5rem 0 2rem;
min-height: auto;
}
.single-post-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
.single-post-feature {
order: 2;
}
.single-post-content {
order: 1;
}
.single-post-feature-image {
width: 100%;
height: auto;
aspect-ratio: 595 / 335;
}
.single-post-title {
font-size: 1.75rem;
}
.single-post-subtitle {
font-size: 1.25rem;
}
.single-post-content-text {
font-size: 1rem;
}
.single-post-content-text h2 {
font-size: 1.5rem;
}
.single-post-content-text h3 {
font-size: 1.25rem;
}
.related-posts-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 30rem) {
.single-post-title {
font-size: 1.5rem;
}
.single-post-subtitle {
font-size: 1.125rem;
}
.single-post-category {
font-size: 0.625rem;
padding: 0.25rem 0.5rem;
}
.related-posts-grid {
grid-template-columns: 1fr;
}
.single-post-read-time {
font-size: 0.75rem;
}
.single-post-body {
padding: 5rem 0;
}
.single-post-author-avatar {
width: 2.5rem;
height: 2.5rem;
}
.single-post-author-name {
font-size: 0.875rem;
line-height: 1.25rem;
}
.single-post-author-role {
font-size: 0.75rem;
}
}