.single-post-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: var(--spacing-2xl);
padding: var(--spacing-2xl) 0;
max-width: 100%; } .article-main {
background-color: #fff;
overflow-x: hidden; max-width: 100%;
}
.article-header {
margin-bottom: var(--spacing-xl);
}
.article-category {
margin-bottom: var(--spacing-md);
}
.article-title {
font-size: 2.5rem;
font-weight: var(--font-weight-black);
line-height: 1.2;
color: var(--color-secondary);
margin-bottom: var(--spacing-lg);
} .article-author {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding-bottom: var(--spacing-lg);
border-bottom: 1px solid var(--color-border);
}
.author-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-info {
flex: 1;
}
.author-name {
font-weight: var(--font-weight-bold);
color: var(--color-secondary);
margin-bottom: 2px;
}
.author-date {
font-size: var(--font-size-small);
color: var(--color-text-light);
} .article-featured-image {
margin: var(--spacing-xl) 0 0 0;
overflow: hidden;
}
.article-featured-image img {
width: 100%;
height: auto;
display: block;
} .social-share {
display: flex;
justify-content: flex-end;
gap: var(--spacing-sm);
padding: var(--spacing-lg) 0 var(--spacing-md);
margin-bottom: 2rem; border-top: 1px solid var(--color-border);
margin-top: var(--spacing-md);
} .article-content > p:first-child,
.article-content > .wp-block-paragraph:first-child {
margin-top: 0.5rem;
}
.social-share-btn {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 15px;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
cursor: pointer;
border: none;
}
.social-share-btn:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.social-share-btn.facebook {
background-color: #1877f2;
}
.social-share-btn.whatsapp {
background-color: #25d366;
}
.social-share-btn.twitter {
background-color: #000;
}
.social-share-btn.twitter svg {
display: block;
width: 16px;
height: 16px;
}
.social-share-btn.email {
background-color: #ea4335;
}
.social-share-btn.copy {
background-color: #6c757d;
}
.social-share-btn.link {
background-color: #0d6efd;
color: #fff;
} .article-content {
font-size: var(--font-size-medium);
line-height: 1.8;
color: var(--color-text);
overflow-x: hidden; word-wrap: break-word;
}
.article-content p {
margin-bottom: var(--spacing-lg);
}
.article-content p:last-child {
margin-bottom: 0;
}
.article-content h2 {
font-size: var(--font-size-h2);
font-weight: var(--font-weight-bold);
color: var(--color-secondary);
margin: var(--spacing-2xl) 0 var(--spacing-lg);
}
.article-content h3 {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
color: var(--color-secondary);
margin: var(--spacing-xl) 0 var(--spacing-md);
}
.article-content ul,
.article-content ol {
margin-bottom: var(--spacing-lg);
padding-left: var(--spacing-xl);
}
.article-content li {
margin-bottom: var(--spacing-sm);
}
.article-content a {
color: var(--color-primary);
text-decoration: underline;
}
.article-content a:hover {
color: var(--color-primary-dark);
}
.article-content img {
max-width: 100% !important;
height: auto !important;
border-radius: var(--radius-sm);
margin: var(--spacing-lg) 0;
width: auto !important; } .article-content .aligncenter,
.article-content img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
float: none;
}
.article-content .alignleft,
.article-content img.alignleft {
float: left;
margin-right: var(--spacing-lg);
margin-bottom: var(--spacing-md);
margin-top: 4px;
}
.article-content .alignright,
.article-content img.alignright {
float: right;
margin-left: var(--spacing-lg);
margin-bottom: var(--spacing-md);
margin-top: 4px;
} .article-content figure.wp-block-image {
margin: var(--spacing-lg) 0;
max-width: 100% !important; width: 100% !important;
}
.article-content figure.wp-block-image img {
max-width: 100% !important;
height: auto !important;
width: auto !important;
}
.article-content figure.wp-block-image.aligncenter {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.article-content figure.wp-block-image.aligncenter img {
display: block;
margin-left: auto;
margin-right: auto;
float: none;
}
.article-content figure.wp-block-image.alignleft {
float: left;
margin-right: var(--spacing-lg);
margin-bottom: var(--spacing-md);
}
.article-content figure.wp-block-image.alignright {
float: right;
margin-left: var(--spacing-lg);
margin-bottom: var(--spacing-md);
}
.article-content figure.wp-block-image figcaption {
font-size: var(--font-size-small);
color: var(--color-text-light);
text-align: center;
margin-top: 0.4rem;
font-style: italic;
} .article-content::after {
content: '';
display: table;
clear: both;
}
.article-content blockquote {
border-left: 4px solid var(--color-primary);
padding-left: var(--spacing-lg);
margin: var(--spacing-xl) 0;
font-style: italic;
color: var(--color-text-light);
} .single-sidebar {
position: sticky;
top: 1rem;
align-self: start;
} .sidebar-widget {
margin-bottom: var(--spacing-2xl);
}
.sidebar-widget:last-child {
margin-bottom: 0;
} .sidebar-widget-title {
font-size: var(--font-size-large);
font-weight: var(--font-weight-black);
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-text);
margin-bottom: var(--spacing-lg);
border-left: 4px solid var(--color-primary);
padding-left: 12px;
line-height: 1.2;
border-radius: 0 2px 2px 0;
}
.sidebar-widget-title::before {
display: none;
} body.dark-mode .sidebar-widget-title {
color: #f5f5f5;
} .related-articles {
background-color: var(--color-bg-light);
padding: var(--spacing-lg);
border-radius: var(--radius-md);
margin-bottom: var(--spacing-xl);
} .related-articles-inline {
background-color: transparent;
padding: 0;
margin-top: var(--spacing-2xl);
border-top: 1px solid rgba(0,0,0,0.08);
padding-top: var(--spacing-xl);
} .related-articles-inline .related-title {
border-bottom: none;
padding-bottom: 0;
position: relative;
padding-left: 1rem;
}
.related-articles-inline .related-title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 65%;
background-color: var(--color-primary);
border-radius: 2px;
}
.related-articles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
margin-top: var(--spacing-lg);
}
.related-title {
font-size: var(--font-size-large);
font-weight: var(--font-weight-black);
text-transform: uppercase;
letter-spacing: 1px;
padding-bottom: var(--spacing-md);
border-bottom: 3px solid var(--color-primary);
margin-bottom: var(--spacing-md);
color: var(--color-secondary);
} .author-box {
background-color: var(--color-bg-light);
padding: var(--spacing-xl);
border-radius: var(--radius-md);
margin: var(--spacing-2xl) 0;
display: flex;
gap: var(--spacing-lg);
align-items: flex-start;
}
.author-box-avatar {
flex-shrink: 0;
}
.author-box-avatar img {
width: 96px;
height: 96px;
border-radius: 50%;
border: 3px solid #fff;
box-shadow: var(--shadow-sm);
}
.author-box-content {
flex: 1;
}
.author-box-name {
font-size: var(--font-size-large);
font-weight: var(--font-weight-bold);
color: var(--color-secondary);
margin-bottom: var(--spacing-xs);
}
.author-box-bio {
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--color-text);
margin-bottom: var(--spacing-md);
}
.author-box-meta {
display: flex;
gap: var(--spacing-lg);
font-size: var(--font-size-small);
color: var(--color-text-light);
}
.author-box-meta span {
display: flex;
align-items: center;
gap: 4px;
} .author-box-social {
display: flex;
gap: 12px;
margin-top: var(--spacing-md);
margin-bottom: var(--spacing-sm);
}
.author-box-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--color-bg-light);
color: var(--color-text);
text-decoration: none;
transition: all 0.2s ease;
}
.author-box-social a:hover {
background-color: var(--color-primary);
color: #fff;
transform: translateY(-2px);
}
.author-box-social a i {
font-size: 16px;
}
.author-box-link {
color: var(--color-primary);
font-weight: var(--font-weight-medium);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: var(--spacing-sm);
position: relative;
z-index: 10; }
.author-box-link:hover {
color: var(--color-primary-dark);
text-decoration: underline;
} @media (max-width: 768px) {
.author-box-link {
display: block;
padding: 12px 16px;
background-color: var(--color-bg-light);
border-radius: 4px;
text-align: center;
margin-top: var(--spacing-md);
font-size: 15px;
min-height: 44px; }
.author-box-link:active {
background-color: var(--color-primary);
color: #fff;
}
} .article-tags {
margin-top: var(--spacing-2xl);
padding-top: var(--spacing-xl);
border-top: 1px solid var(--color-border);
}
.tags-list {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-top: var(--spacing-md);
}
.tag-link {
display: inline-block;
padding: 6px 14px;
background-color: var(--color-bg-light);
color: var(--color-text);
font-size: var(--font-size-small);
border-radius: var(--radius-sm);
transition: all var(--transition-fast);
}
.tag-link:hover {
background-color: var(--color-primary);
color: #fff;
} .post-navigation {
margin-top: var(--spacing-2xl);
padding: var(--spacing-xl) 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
}
.nav-previous,
.nav-next {
display: flex;
flex-direction: column;
}
.nav-label {
font-size: var(--font-size-small);
color: var(--color-text-light);
text-transform: uppercase;
margin-bottom: var(--spacing-xs);
}
.nav-title {
font-weight: var(--font-weight-bold);
color: var(--color-secondary);
}
.nav-title:hover {
color: var(--color-primary);
}
.nav-next {
text-align: right;
} .breadcrumbs {
padding: var(--spacing-md) 0;
font-size: var(--font-size-small);
color: var(--color-text-light);
}
.breadcrumbs a {
color: var(--color-text-light);
}
.breadcrumbs a:hover {
color: var(--color-primary);
}
.breadcrumbs span {
margin: 0 var(--spacing-xs);
} body.dark-mode .related-articles-inline {
border-top-color: rgba(255,255,255,0.1);
} @media (max-width: 1024px) {
.article-content img,
.article-content figure.wp-block-image img,
.article-content figure img {
max-width: 100% !important;
width: auto !important;
height: auto !important;
display: block;
}
.article-content figure.wp-block-image,
.article-content figure {
max-width: 100% !important;
width: 100% !important;
}
} .author-box-avatar-link {
flex-shrink: 0;
text-decoration: none;
display: block;
transition: transform 0.2s ease;
}
.author-box-avatar-link:hover {
transform: scale(1.05);
}
.author-box-name a {
color: var(--color-text);
text-decoration: none;
transition: color 0.2s ease;
}
.author-box-name a:hover {
color: var(--color-primary);
} .author-archive-header {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: var(--spacing-2xl);
margin: var(--spacing-2xl) 0;
text-align: center;
}
.author-archive-avatar {
margin: 0 auto var(--spacing-lg);
}
.author-archive-avatar img {
width: 120px !important;
height: 120px !important;
border-radius: 50% !important;
border: 4px solid #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.author-archive-info {
max-width: 600px;
margin: 0 auto;
}
.author-archive-name {
font-size: 2rem;
font-weight: 800;
color: var(--color-text);
margin: 0 0 var(--spacing-sm) 0;
line-height: 1.2;
}
.author-archive-meta {
display: flex;
justify-content: center;
gap: var(--spacing-lg);
font-size: var(--font-size-small);
color: var(--color-text-light);
margin-bottom: var(--spacing-md);
}
.author-archive-meta span {
display: flex;
align-items: center;
gap: 6px;
}
.author-archive-bio {
font-size: 1.05rem;
color: var(--color-text-light);
margin: var(--spacing-md) 0;
line-height: 1.6;
}
.author-archive-social {
display: flex;
justify-content: center;
gap: 12px;
margin-top: var(--spacing-md);
}
.author-archive-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--color-bg-light);
color: var(--color-text);
text-decoration: none;
transition: all 0.2s ease;
}
.author-archive-social a:hover {
background-color: var(--color-primary);
color: #fff;
transform: translateY(-3px);
}
.author-archive-social a i {
font-size: 18px;
}
.author-posts-heading {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text);
margin: var(--spacing-xl) 0 var(--spacing-lg) 0;
padding-bottom: var(--spacing-md);
border-bottom: 2px solid var(--color-border);
text-align: center;
} @media (max-width: 768px) {
.author-archive-header {
padding: var(--spacing-xl);
}
.author-archive-avatar img {
width: 100px !important;
height: 100px !important;
}
.author-archive-name {
font-size: 1.5rem;
}
.author-archive-bio {
font-size: 0.95rem;
}
} @media (max-width: 768px) {
body {
overflow-x: hidden !important;
max-width: 100vw !important;
}
.single-post-layout,
.article-main,
.article-content {
overflow-x: hidden !important;
max-width: 100% !important;
} .article-featured-image {
margin: var(--spacing-md) 0 0 0;
overflow: hidden;
} .social-share {
justify-content: center !important; padding: var(--spacing-md) 0 !important; margin: 0 auto !important; gap: 10px;
flex-wrap: wrap; max-width: 100%; text-align: center; }
.social-share-btn {
width: 42px; height: 42px;
font-size: 16px;
} .article-content img,
.article-content iframe,
.article-content video,
.article-content embed {
max-width: 100% !important;
height: auto !important;
} .article-content table {
display: block;
overflow-x: auto;
max-width: 100%;
}
.article-content pre,
.article-content code {
overflow-x: auto;
max-width: 100%;
}
} .article-content .aligncenter,
.article-content img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.article-content .wp-block-image.aligncenter,
.article-content figure.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
} .article-content .aligncenter iframe,
.article-content .aligncenter embed,
.article-content .aligncenter object {
display: block;
margin-left: auto;
margin-right: auto;
}
.article-content div.aligncenter {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
}