/**
* Blog Design System - High Performance & Premium UI
*/
/* Theme variables are now loaded from themes/light.css or themes/dark.css */
/* Enhanced Animations */
@keyframes blob-float {
0%, 100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.05);
}
}
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
@keyframes skeleton-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.skeleton-fade-out {
animation: fadeOut 0.3s ease-out forwards;
}
.skeleton-fade-in {
animation: fadeIn 0.3s ease-in forwards;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Enhanced Base Styles */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1;
font-kerning: normal;
}
/* Improved Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
}
p {
line-height: 1.7;
color: var(--color-mode-text-secondary);
}
/* Better Link Styles */
a {
transition: all 0.3s ease;
}
a:focus-visible {
outline: 2px solid var(--blog-accent);
outline-offset: 4px;
border-radius: 4px;
}
/* Animations */
[data-animate] {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity, transform;
}
[data-animate].animate-visible {
opacity: 1;
transform: translateY(0);
}
/* Smooth Scrolling */
html {
scroll-behavior: smooth;
}
/* Enhanced Visual Feedback */
.post-card {
will-change: transform, box-shadow;
}
.post-card:active {
transform: translateY(-4px) scale(0.98);
}
/* Modern Navbar Refined */
.blog-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
z-index: 1000;
background: transparent;
border-bottom: 1px solid transparent;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
will-change: height, background-color, backdrop-filter;
}
/* Initially white text for dark hero sections */
.blog-nav .blog-logo,
.blog-nav .blog-nav-link,
.blog-nav .theme-toggle-btn,
.blog-nav .mobile-menu-btn {
color: white;
}
.blog-nav.scrolled {
height: 70px;
background: var(--blog-glass);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--blog-glass-border);
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}
.blog-nav.scrolled .blog-logo,
.blog-nav.scrolled .blog-nav-link {
color: var(--color-mode-text);
}
.blog-nav.scrolled .theme-toggle-btn,
.blog-nav.scrolled .mobile-menu-btn {
color: var(--blog-accent);
}
.blog-nav-container {
width: 100%;
max-width: 1248px;
/* 1200px + padding */
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.blog-logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
transition: all 0.3s ease;
height: 40px;
}
.blog-logo:hover {
transform: scale(1.05);
opacity: 0.9;
}
.blog-logo-img {
height: 40px;
width: auto;
max-width: 200px;
object-fit: contain;
display: block;
transition: all 0.3s ease;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.blog-logo:hover .blog-logo-img {
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}
[data-theme="dark"] .blog-logo-img {
filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.1));
}
[data-theme="dark"] .blog-logo:hover .blog-logo-img {
filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.15));
}
.blog-nav-links {
display: flex;
align-items: center;
gap: 32px;
}
.blog-nav-link {
font-size: 15px;
font-weight: 600;
color: var(--color-mode-text-secondary);
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
padding: 10px 0;
}
.blog-nav-link::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 0;
height: 2px;
background: var(--blog-accent);
transition: width 0.3s ease;
}
.blog-nav-link:hover {
color: var(--blog-accent) !important;
}
.blog-nav-link:hover::after,
.blog-nav-link.active::after {
width: 100%;
}
.blog-nav.navbar-transparent .blog-nav-link:hover {
color: white !important;
}
.blog-nav.navbar-transparent .blog-nav-link::after {
background: white;
}
.blog-nav-actions {
display: flex;
align-items: center;
gap: 16px;
}
/* Mobile Toggle */
.mobile-menu-btn {
display: none;
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
transition: all 0.3s ease;
}
.blog-nav.scrolled .mobile-menu-btn {
background: rgba(var(--blog-accent-rgb), 0.1);
}
/* Login Button Refined */
.blog-nav-login-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 24px;
background: var(--blog-accent);
color: white !important;
border-radius: 30px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(var(--blog-accent-rgb), 0.3);
border: 1px solid transparent;
}
.blog-nav-login-btn:hover {
transform: scale(1.05);
background: var(--blog-accent-secondary);
}
/* Theme Toggle Enhancement */
.theme-toggle-btn {
width: 44px;
height: 44px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.blog-nav.scrolled .theme-toggle-btn {
background: rgba(var(--blog-accent-rgb), 0.1);
border-color: transparent;
}
.theme-toggle-btn:hover {
background: var(--blog-accent) !important;
color: white !important;
transform: scale(1.1);
}
/* Mobile Sidebar Drawer */
.blog-mobile-sidebar {
position: fixed;
top: 0;
right: -320px;
width: 300px;
height: 100vh;
background: var(--color-mode-bg);
z-index: 2000;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
padding: 30px;
display: flex;
flex-direction: column;
gap: 40px;
box-shadow: -20px 0 60px rgba(0, 0, 0, 0.1);
}
.blog-mobile-sidebar.open {
transform: translateX(-320px);
}
.blog-sidebar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
z-index: 1999;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
}
.blog-sidebar-overlay.open {
opacity: 1;
visibility: visible;
}
/* Enhanced Main Content Spacing */
.container.homepage {
padding-top: calc(var(--header-height) + 40px);
padding-left: clamp(16px, 4vw, 32px);
padding-right: clamp(16px, 4vw, 32px);
padding-bottom: 60px;
max-width: 1280px;
margin: 0 auto;
animation: fadeIn 0.6s ease-out;
position: relative;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (min-width: 1400px) {
.container.homepage {
max-width: 1400px;
padding-left: 40px;
padding-right: 40px;
}
}
@media (max-width: 768px) {
.container.homepage {
padding-left: 16px;
padding-right: 16px;
padding-top: calc(var(--header-height) + 16px);
}
}
@media (max-width: 991px) {
.blog-nav-links {
display: none;
}
.mobile-menu-btn {
display: flex;
}
.blog-nav {
height: 70px;
}
}
/* Small Mobile - Prevent Header Overlap */
@media (max-width: 576px) {
.blog-nav-container {
padding: 0 12px !important;
}
.blog-logo {
height: 36px !important;
}
.blog-logo-img {
height: 36px !important;
max-width: 150px !important;
}
.blog-nav-actions {
gap: 6px !important;
}
.theme-toggle-btn {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
border-radius: 10px !important;
font-size: 14px !important;
}
.mobile-menu-btn {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
border-radius: 10px !important;
font-size: 14px !important;
}
.blog-nav-login-btn {
padding: 8px 12px !important;
font-size: 12px !important;
gap: 0 !important;
}
.blog-nav-login-btn span {
display: none !important;
}
.blog-nav-login-btn i {
margin: 0 !important;
}
.blog-nav {
height: 56px !important;
}
.blog-mobile-sidebar {
width: 280px !important;
right: -300px !important;
padding: 20px !important;
}
.blog-mobile-sidebar.open {
transform: translateX(-300px) !important;
}
/* Content spacing fix */
.container.homepage {
padding-top: 70px !important;
}
.homepage-title {
font-size: 2rem !important;
}
.homepage-subtitle {
font-size: 1rem !important;
}
}
/* Extra Small Mobile (under 400px) */
@media (max-width: 400px) {
.blog-nav-login-btn {
display: none !important;
}
.blog-nav-container {
padding: 0 10px !important;
}
.blog-nav-actions {
gap: 4px !important;
}
}
/* Post Detail Mobile Fixes */
@media (max-width: 576px) {
.post-detail-page {
padding: 60px 12px 20px !important;
}
.back-btn {
padding: 8px 12px !important;
font-size: 13px !important;
}
.post-meta-detail {
flex-wrap: wrap !important;
gap: 8px 16px !important;
font-size: 12px !important;
}
.post-meta-detail span {
white-space: nowrap;
}
.post-title-main {
font-size: 1.5rem !important;
margin-bottom: 16px !important;
}
.post-excerpt-box {
padding: 16px 20px !important;
margin-bottom: 24px !important;
font-size: 1rem !important;
border-radius: 16px !important;
}
.post-body {
font-size: 1rem !important;
line-height: 1.7 !important;
}
.post-body img {
border-radius: 16px !important;
margin: 24px 0 !important;
}
.post-footer-detail {
flex-direction: column !important;
gap: 16px !important;
align-items: flex-start !important;
}
.share-box {
width: 100% !important;
}
.share-buttons {
gap: 8px !important;
}
.post-prev-next {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.nav-card {
text-align: left !important;
}
.post-tags-detail {
gap: 6px !important;
}
.tag-badge {
font-size: 11px !important;
padding: 4px 10px !important;
}
}
/* Enhanced Blog Logo Header */
.blog-logo-header {
margin-bottom: 60px;
padding: 40px 0;
display: flex;
justify-content: center;
align-items: center;
animation: fadeInDown 0.6s ease-out;
position: relative;
}
.blog-logo-header::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: linear-gradient(90deg, transparent, var(--blog-accent), transparent);
border-radius: 2px;
}
.blog-main-logo {
max-width: 100%;
height: auto;
max-height: 500px;
display: block;
object-fit: contain;
filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.blog-main-logo:hover {
transform: translateY(-4px) scale(1.02);
filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.18));
}
[data-theme="dark"] .blog-main-logo {
filter: drop-shadow(0 8px 24px rgba(255, 255, 255, 0.15));
}
[data-theme="dark"] .blog-main-logo:hover {
filter: drop-shadow(0 12px 32px rgba(255, 255, 255, 0.2));
}
@media (max-width: 768px) {
.blog-logo-header {
margin-bottom: 40px;
padding: 30px 0;
}
.blog-main-logo {
max-width: 90%;
max-height: 300px;
}
}
@media (max-width: 480px) {
.blog-logo-header {
margin-bottom: 30px;
padding: 20px 0;
}
.blog-main-logo {
max-width: 100%;
max-height: 250px;
}
.blog-logo-header::after {
width: 60px;
}
}
/* Homepage Header Refined */
.homepage-header {
margin-bottom: 80px;
animation: fadeInDown 0.8s ease-out;
position: relative;
padding: 0 20px;
}
.homepage-header-content {
text-align: center;
padding: 60px 20px 40px;
background: transparent;
border-radius: 0;
color: var(--color-mode-text);
position: relative;
overflow: visible;
box-shadow: none;
}
/* Hero Animated Blobs */
.hero-blob {
position: absolute;
width: 400px;
height: 400px;
filter: blur(80px);
opacity: 0.4;
border-radius: 50%;
z-index: 0;
pointer-events: none;
animation: blob-float 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}
.blob-1 {
background: var(--blog-accent);
top: -100px;
right: -100px;
}
.blob-2 {
background: var(--blog-accent-secondary);
bottom: -100px;
left: -100px;
animation-delay: -5s;
}
.homepage-header-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('data:image/svg+xml,');
opacity: 0.3;
}
.homepage-header-content>* {
position: relative;
z-index: 1;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.homepage-title {
font-size: clamp(3rem, 8vw, 5rem);
font-weight: 800;
color: var(--color-mode-text);
margin-bottom: 24px;
letter-spacing: -2px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
line-height: 1.1;
}
.homepage-title i {
font-size: 0.5em;
color: var(--blog-accent);
margin-bottom: 10px;
background: rgba(var(--blog-accent-rgb), 0.1);
padding: 20px;
border-radius: 24px;
}
.homepage-subtitle {
font-size: clamp(1.2rem, 3vw, 1.5rem);
color: var(--color-mode-text-secondary);
font-weight: 500;
max-width: 600px;
margin: 0 auto 40px;
line-height: 1.6;
}
.homepage-stats {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 40px;
flex-wrap: wrap;
}
.stat-item {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 24px;
background: var(--color-mode-bg-card);
border-radius: 100px;
font-size: 14px;
color: var(--color-mode-text);
border: 1px solid var(--color-mode-border);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: default;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.stat-item:hover {
transform: translateY(-2px);
border-color: var(--blog-accent);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.stat-item i {
font-size: 16px;
color: var(--blog-accent);
}
.stat-item strong {
font-size: 16px;
font-weight: 700;
color: var(--color-mode-text);
}
/* Blog Grid */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 32px;
margin-bottom: 60px;
}
/* Posts Grid - Modern Card Layout */
.posts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 32px;
margin-bottom: 80px;
}
@media (min-width: 1400px) {
.posts-grid {
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.posts-grid {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.posts-grid {
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
}
@media (max-width: 767px) {
.posts-grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* Blog Card */
.blog-card {
background: var(--color-mode-bg-card, #ffffff);
border: 1px solid var(--color-mode-border, #e2e8f0);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* Premium News Layout System */
.news-layout-container {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
position: relative;
}
/* Premium Featured News Card */
.featured-news-card {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 0;
align-items: stretch;
margin-bottom: 48px;
background: var(--color-mode-bg-card);
position: relative;
padding: 0;
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--color-mode-border);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.featured-news-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.featured-news-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(var(--blog-accent-rgb), 0.05) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none;
z-index: 1;
}
.featured-news-card:hover::after {
opacity: 1;
}
.featured-news-card:active {
transform: translateY(-8px) scale(1.004);
transition: transform 0.1s ease;
}
[data-theme="dark"] .featured-news-card {
background: rgba(30, 41, 59, 0.6);
backdrop-filter: blur(20px);
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .featured-news-card:hover {
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.f-image-wrapper {
position: relative;
border-radius: 20px 0 0 20px;
overflow: hidden;
height: 100%;
min-height: 320px;
background: var(--color-mode-bg-secondary);
z-index: 1;
}
.f-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.featured-image-placeholder {
width: 100%;
height: 100%;
background: var(--color-mode-bg-secondary);
display: flex;
align-items: center;
justify-content: center;
}
.featured-image-placeholder i {
font-size: 48px;
color: var(--color-mode-text-secondary);
opacity: 0.3;
transition: color 0.3s ease, opacity 0.3s ease;
}
[data-theme="dark"] .featured-image-placeholder i {
color: var(--color-mode-text-secondary);
opacity: 0.4;
}
[data-theme="light"] .featured-image-placeholder i {
color: var(--color-mode-text-secondary);
opacity: 0.25;
}
.f-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3), transparent);
z-index: 1;
transition: opacity 0.4s ease;
}
.f-badge {
position: absolute;
top: 16px;
left: 16px;
background: var(--blog-accent);
color: white;
padding: 6px 12px;
border-radius: 8px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 3;
border: none;
}
.f-content {
padding: clamp(24px, 5vw, 40px);
display: flex;
flex-direction: column;
justify-content: center;
background: var(--color-mode-bg-card);
border-radius: 0 20px 20px 0;
position: relative;
z-index: 2;
min-height: 320px;
}
.f-content::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
background: linear-gradient(180deg, transparent, var(--blog-accent), transparent);
opacity: 0;
transition: opacity 0.6s ease;
}
.f-content::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--blog-accent), var(--blog-accent-secondary));
border-radius: 0 4px 4px 0;
opacity: 0;
transition: opacity 0.4s ease;
}
.f-content h2 {
font-size: clamp(1.5rem, 4vw, 2.25rem);
font-weight: 700;
line-height: 1.3;
margin-bottom: 16px;
letter-spacing: -0.02em;
position: relative;
z-index: 2;
}
.f-content h2 a {
display: inline-block;
position: relative;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.f-content h2 a {
color: var(--color-mode-text);
text-decoration: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background-image: linear-gradient(120deg, var(--blog-accent) 0%, var(--blog-accent-secondary) 100%);
background-repeat: no-repeat;
background-size: 0% 0.2em;
background-position: 0 88%;
display: inline-block;
position: relative;
}
.f-content h2 a::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 4px;
background: linear-gradient(90deg, var(--blog-accent), var(--blog-accent-secondary));
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 2px;
box-shadow: 0 2px 8px rgba(var(--blog-accent-rgb), 0.4);
}
.f-content h2 a:hover {
background-size: 100% 0.2em;
color: var(--blog-accent);
}
.f-content h2 a:hover::before {
width: 100%;
}
.f-excerpt {
font-size: clamp(0.95rem, 2vw, 1.1rem);
line-height: 1.7;
color: var(--color-mode-text-secondary);
margin-bottom: 24px;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
position: relative;
z-index: 2;
font-weight: 400;
}
/* Premium News Grid List */
.news-grid-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
gap: clamp(20px, 4vw, 32px);
margin-top: 32px;
animation: fadeInUp 0.6s ease-out;
position: relative;
align-items: start;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (min-width: 1200px) {
.news-grid-list {
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 3vw, 32px);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.news-grid-list {
grid-template-columns: repeat(2, 1fr);
gap: clamp(20px, 3vw, 28px);
}
}
.news-card-item {
background: var(--color-mode-bg-card);
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--color-mode-border);
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: flex;
flex-direction: column;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
position: relative;
cursor: pointer;
width: 100%;
height: auto;
}
.news-card-item:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.news-card-item::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(var(--blog-accent-rgb), 0.03) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 1;
}
[data-theme="dark"] .news-card-item {
background: rgba(30, 41, 59, 0.6);
backdrop-filter: blur(20px);
border-color: rgba(255, 255, 255, 0.08);
}
/* Premium Colored Top Border Gradient */
.news-card-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: var(--card-border, var(--blog-accent));
opacity: 0;
transition: opacity 0.5s ease, height 0.5s ease;
z-index: 3;
border-radius: 28px 28px 0 0;
box-shadow: 0 4px 12px rgba(var(--blog-accent-rgb), 0.3);
}
.news-card-item:active {
transform: translateY(-8px) scale(1.015);
transition: transform 0.1s ease;
}
[data-theme="dark"] .news-card-item:hover {
box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5), 0 12px 24px -6px rgba(0, 0, 0, 0.3);
}
.news-img {
width: 100%;
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
background: var(--color-mode-bg-secondary);
border-radius: 16px 16px 0 0;
flex-shrink: 0;
}
.news-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.news-image-placeholder {
width: 100%;
height: 100%;
background: var(--color-mode-bg-secondary);
display: flex;
align-items: center;
justify-content: center;
}
.news-image-placeholder::before {
content: '\f03e';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 48px;
color: var(--color-mode-text-secondary);
opacity: 0.3;
}
[data-theme="dark"] .news-image-placeholder::before {
opacity: 0.4;
}
[data-theme="light"] .news-image-placeholder::before {
opacity: 0.25;
}
.news-body {
padding: clamp(20px, 4vw, 24px);
flex: 1;
display: flex;
flex-direction: column;
position: relative;
z-index: 2;
background: var(--color-mode-bg-card);
width: 100%;
}
.news-excerpt {
font-size: clamp(0.875rem, 2vw, 0.9375rem);
color: var(--color-mode-text-secondary);
line-height: 1.6;
margin-bottom: 16px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight: 400;
}
@media (min-width: 1200px) {
.news-img {
height: 260px;
}
}
.news-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.news-image-placeholder {
width: 100%;
height: 100%;
background: var(--color-mode-bg-secondary);
display: flex;
align-items: center;
justify-content: center;
}
.news-image-placeholder::before {
content: '\f03e';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 48px;
color: var(--color-mode-text-secondary);
opacity: 0.3;
}
[data-theme="dark"] .news-image-placeholder::before {
opacity: 0.4;
}
[data-theme="light"] .news-image-placeholder::before {
opacity: 0.25;
}
.news-body h3 {
font-size: clamp(1.125rem, 2.5vw, 1.375rem);
font-weight: 600;
margin-bottom: 12px;
line-height: 1.4;
letter-spacing: -0.01em;
display: flex;
align-items: flex-start;
flex-shrink: 0;
}
.news-body h3 a {
color: var(--color-mode-text);
text-decoration: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: block;
position: relative;
padding-bottom: 4px;
}
.news-body h3 a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 4px;
background: linear-gradient(90deg, var(--card-accent, var(--blog-accent)), var(--blog-accent-secondary));
border-radius: 2px;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(var(--blog-accent-rgb), 0.4);
}
.news-body h3 a:hover {
color: var(--card-accent, var(--blog-accent));
}
.news-body h3 a:hover::after {
width: 100%;
}
.read-more-link {
position: relative;
margin-top: auto;
padding-top: 12px;
padding-bottom: 4px;
color: var(--card-accent, var(--blog-accent));
font-weight: 600;
font-size: 13px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
flex-shrink: 0;
width: fit-content;
}
.read-more-link i {
font-size: 11px;
transition: transform 0.3s ease;
}
.read-more-link::before {
content: '';
position: absolute;
bottom: 6px;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--card-accent, var(--blog-accent)), var(--blog-accent-secondary));
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 2px;
box-shadow: 0 2px 6px rgba(var(--blog-accent-rgb), 0.3);
}
.read-more-link:hover {
color: var(--blog-accent-secondary) !important;
}
.read-more-link:hover::before {
width: 100%;
}
[data-theme="dark"] .news-body h3 a:hover {
color: var(--card-accent, var(--blog-accent));
}
/* Enhanced Responsive Media Queries for News Layout */
@media (max-width: 991px) {
.featured-news-card {
grid-template-columns: 1fr;
gap: 0;
border-radius: 16px;
margin-bottom: 32px;
}
.f-image-wrapper {
min-height: 240px;
border-radius: 16px 16px 0 0;
}
.f-content {
border-radius: 0 0 16px 16px;
padding: 24px;
min-height: auto;
}
.f-content h2 {
font-size: clamp(1.375rem, 5vw, 1.75rem);
margin-bottom: 12px;
}
.f-excerpt {
margin-bottom: 20px;
}
}
@media (max-width: 768px) {
.container.homepage {
padding-top: calc(var(--header-height) + 24px);
padding-bottom: 40px;
}
.news-layout-container {
gap: 32px;
margin-top: 0;
}
.f-image-wrapper {
min-height: 200px;
}
.news-grid-list {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 24px;
}
.news-card-item {
border-radius: 12px;
}
.news-img {
border-radius: 12px 12px 0 0;
}
.news-body {
padding: 20px;
}
.post-meta {
margin-bottom: 10px;
font-size: 10px;
}
.post-meta span {
padding: 3px 8px;
font-size: 10px;
}
}
/* Enhanced Post Card - Premium Design */
.post-card {
background: var(--color-mode-bg-card, #ffffff);
border-radius: 28px;
overflow: hidden;
position: relative;
border: 1px solid var(--color-mode-border, rgba(226, 232, 240, 0.8));
transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
display: flex;
flex-direction: column;
animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
will-change: transform, box-shadow;
height: 100%;
cursor: pointer;
}
.post-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--blog-accent), var(--blog-accent-secondary));
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
.post-card:hover::before {
opacity: 1;
}
.post-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 100%);
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
z-index: 1;
}
[data-theme="dark"] .post-card {
background: rgba(30, 41, 59, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-color: rgba(255, 255, 255, 0.05);
}
.post-card:hover {
transform: translateY(-14px) scale(1.01);
box-shadow: 0 28px 60px rgba(0, 0, 0, 0.15), 0 16px 32px rgba(0, 0, 0, 0.1);
border-color: var(--blog-accent, #6366f1);
}
.post-card:active {
transform: translateY(-8px) scale(1.005);
}
.post-card:hover::before {
opacity: 1;
}
/* Enhanced Loading Animation shimmer effect */
.post-card.loading {
animation: shimmer 2s infinite linear;
background: linear-gradient(to right,
var(--color-mode-bg-card) 0%,
var(--color-mode-bg-secondary) 50%,
var(--color-mode-bg-card) 100%);
background-size: 1000px 100%;
pointer-events: none;
opacity: 0.7;
}
/* Blog Post Skeleton Loader */
.blog-post-skeleton {
background: var(--color-mode-bg-card);
border-radius: 24px;
padding: 24px;
margin-bottom: 24px;
border: 1px solid var(--color-mode-border);
animation: shimmer 2s infinite linear;
background: linear-gradient(to right,
var(--color-mode-bg-card) 0%,
var(--color-mode-bg-secondary) 50%,
var(--color-mode-bg-card) 100%);
background-size: 1000px 100%;
}
.skeleton-image {
width: 100%;
height: 240px;
background: var(--color-mode-bg-secondary);
border-radius: 16px;
margin-bottom: 20px;
animation: shimmer 2s infinite linear;
}
.skeleton-title {
height: 28px;
background: var(--color-mode-bg-secondary);
border-radius: 8px;
margin-bottom: 16px;
width: 70%;
animation: shimmer 2s infinite linear;
}
.skeleton-text {
height: 16px;
background: var(--color-mode-bg-secondary);
border-radius: 8px;
margin-bottom: 12px;
animation: shimmer 2s infinite linear;
}
.skeleton-text.w-3-4 {
width: 75%;
}
.skeleton-text.w-1-2 {
width: 50%;
}
.skeleton-meta {
display: flex;
gap: 12px;
margin-bottom: 20px;
}
.skeleton-badge {
width: 80px;
height: 24px;
background: var(--color-mode-bg-secondary);
border-radius: 12px;
animation: shimmer 2s infinite linear;
}
/* Icon Colors - Match Text Colors */
i[class*="fa-"],
i[class*="fas"],
i[class*="far"],
i[class*="fab"],
i[class*="fal"],
i[class*="fad"] {
color: var(--color-mode-text);
transition: color 0.3s ease;
}
/* Icon Colors in Post Meta - Match Text Colors */
.post-meta i,
.post-meta span i {
color: var(--color-mode-text-secondary);
opacity: 1;
transition: color 0.3s ease, opacity 0.3s ease;
}
.post-meta span:hover i {
color: var(--color-mode-text);
opacity: 1;
}
/* Icon Colors in Links */
a i[class*="fa-"],
.read-more-link i,
.f-content a i {
color: inherit;
transition: color 0.3s ease, transform 0.3s ease;
}
/* Icon Colors in Buttons */
.btn i,
.btn-primary i,
.featured-read-btn i {
color: inherit;
}
/* Icon Colors in Pagination */
.pagination i {
color: inherit;
transition: color 0.3s ease;
}
.pagination a:hover i {
color: white;
}
/* Icon Colors in Empty State */
.empty-state i {
color: var(--blog-accent);
opacity: 0.7;
transition: all 0.4s ease;
}
.empty-state:hover i {
opacity: 1;
color: var(--blog-accent);
}
/* Featured Card Icons - Match Text Colors */
.f-content .post-meta i,
.featured-news-card .post-meta i {
color: var(--color-mode-text-secondary);
opacity: 1;
transition: color 0.3s ease;
}
.featured-news-card .post-meta span:hover i {
color: var(--color-mode-text);
}
/* News Card Icons - Match Text Colors */
.news-body .post-meta i {
color: var(--color-mode-text-secondary);
opacity: 1;
transition: color 0.3s ease;
}
.news-body .post-meta span:hover i {
color: var(--color-mode-text);
}
/* Dark Mode Icon Adjustments */
[data-theme="dark"] i[class*="fa-"] {
color: var(--color-mode-text);
}
[data-theme="dark"] .post-meta i,
[data-theme="dark"] .post-meta span i {
color: var(--color-mode-text-secondary);
opacity: 1;
}
[data-theme="dark"] .post-meta span:hover i {
color: var(--color-mode-text);
}
[data-theme="dark"] .f-content .post-meta i,
[data-theme="dark"] .featured-news-card .post-meta i {
color: var(--color-mode-text-secondary);
}
[data-theme="dark"] .news-body .post-meta i {
color: var(--color-mode-text-secondary);
}
[data-theme="dark"] .empty-state i {
color: var(--blog-accent);
opacity: 0.8;
}
[data-theme="dark"] .empty-state:hover i {
opacity: 1;
}
/* Light Mode Icon Adjustments */
[data-theme="light"] i[class*="fa-"] {
color: var(--color-mode-text);
}
[data-theme="light"] .post-meta i,
[data-theme="light"] .post-meta span i {
color: var(--color-mode-text-secondary);
opacity: 1;
}
[data-theme="light"] .post-meta span:hover i {
color: var(--color-mode-text);
}
[data-theme="light"] .f-content .post-meta i,
[data-theme="light"] .featured-news-card .post-meta i {
color: var(--color-mode-text-secondary);
}
[data-theme="light"] .news-body .post-meta i {
color: var(--color-mode-text-secondary);
}
/* Cursor and Selection Styles */
* {
cursor: default;
}
a,
button,
.blog-nav-link,
.news-card-item,
.featured-news-card,
.pagination a,
.btn,
.read-more-link,
.post-meta span {
cursor: pointer;
}
/* Text Selection Colors */
::selection {
background: rgba(var(--blog-accent-rgb), 0.3);
color: var(--color-mode-text);
}
::-moz-selection {
background: rgba(var(--blog-accent-rgb), 0.3);
color: var(--color-mode-text);
}
[data-theme="dark"] ::selection {
background: rgba(var(--blog-accent-rgb), 0.4);
color: var(--color-mode-text);
}
[data-theme="dark"] ::-moz-selection {
background: rgba(var(--blog-accent-rgb), 0.4);
color: var(--color-mode-text);
}
/* Enhanced Smooth Scroll Behavior */
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height) + 20px);
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--color-mode-bg-secondary);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, var(--blog-accent), var(--blog-accent-secondary));
border-radius: 10px;
transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, var(--blog-accent-secondary), var(--blog-accent));
}
/* Firefox Scrollbar */
* {
scrollbar-width: thin;
scrollbar-color: var(--blog-accent) var(--color-mode-bg-secondary);
}
/* Focus States for Accessibility */
.post-card:focus-within {
outline: 2px solid var(--color-mode-accent, #6366f1);
outline-offset: 4px;
}
.read-more:focus {
outline: 2px solid var(--color-mode-accent, #6366f1);
outline-offset: 4px;
border-radius: 4px;
}
.btn:focus {
outline: 2px solid var(--color-mode-accent, #6366f1);
outline-offset: 2px;
}
.blog-card-image {
width: 100%;
height: 200px;
object-fit: cover;
background: var(--color-mode-bg-secondary, #f8fafc);
}
/* Post Image Refined */
.post-image-wrapper {
width: 100%;
padding-top: 60%;
/* 16:9 Aspect Ratio */
position: relative;
overflow: hidden;
background: var(--color-mode-bg-secondary);
}
.post-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: transform;
}
/* Gradient Overlay on Hover */
.post-image-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.4) 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
.post-card:hover .post-image-wrapper::after {
opacity: 1;
}
.post-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease;
display: block;
filter: brightness(1) saturate(1);
}
.post-image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: rgba(255, 255, 255, 0.7);
font-size: 48px;
}
.post-card:hover .post-image {
transform: scale(1.1);
filter: brightness(1.1) saturate(1.1);
}
.blog-card-content {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
}
/* Post Content Refined */
.post-content {
padding: 32px;
flex: 1;
display: flex;
flex-direction: column;
background: var(--color-mode-bg-card, #ffffff);
position: relative;
z-index: 2;
}
[data-theme="dark"] .post-content {
background: transparent;
}
.post-meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 11px;
font-weight: 500;
color: var(--color-mode-text-secondary);
letter-spacing: 0.3px;
text-transform: uppercase;
flex-wrap: wrap;
flex-shrink: 0;
}
.post-meta span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: rgba(var(--blog-accent-rgb), 0.08);
border-radius: 6px;
transition: all 0.2s ease;
border: none;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.post-meta span:hover {
background: rgba(var(--blog-accent-rgb), 0.12);
}
.post-meta span i {
font-size: 11px;
color: var(--color-mode-text-secondary);
opacity: 1;
transition: transform 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.post-meta span:hover i {
transform: scale(1.1);
opacity: 1;
color: var(--color-mode-text);
}
.post-meta i {
color: var(--color-mode-text-secondary);
opacity: 1;
}
.post-title {
font-size: 1.5rem;
font-weight: 800;
line-height: 1.3;
margin-bottom: 16px;
color: var(--color-mode-text);
letter-spacing: -0.5px;
transition: color 0.3s ease;
}
.post-card:hover .post-title {
color: var(--blog-accent, #6366f1);
}
.post-excerpt {
font-size: 1.05rem;
line-height: 1.7;
color: var(--color-mode-text-secondary);
margin-bottom: 24px;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
opacity: 0.9;
}
.post-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 24px;
}
.tag-badge {
padding: 10px 20px;
border-radius: 14px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
border: 2px solid transparent;
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.tag-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.tag-badge:hover {
transform: scale(1.05);
border-color: currentColor;
}
.tag-badge:hover::before {
left: 100%;
}
.post-footer {
padding-top: 24px;
margin-top: auto;
border-top: 1px solid var(--color-mode-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.read-more {
font-size: 14px;
font-weight: 700;
color: var(--blog-accent);
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
padding: 8px 0;
}
.read-more::after {
content: '';
position: absolute;
bottom: 4px;
left: 0;
width: 0;
height: 2px;
background: var(--blog-accent);
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 1px;
}
.read-more i {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.post-card:hover .read-more {
color: var(--blog-accent-secondary);
transform: translateX(4px);
}
.post-card:hover .read-more::after {
width: 100%;
}
.post-card:hover .read-more i {
transform: translateX(6px);
}
.view-count {
font-size: 13px;
font-weight: 600;
color: var(--color-mode-text-muted);
display: flex;
align-items: center;
gap: 6px;
}
.blog-card-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--color-mode-text, #0f172a);
margin-bottom: 12px;
line-height: 1.4;
}
.blog-card-title a {
color: inherit;
text-decoration: none;
}
.blog-card-title a:hover {
color: var(--color-mode-accent, #6366f1);
}
.blog-card-excerpt {
font-size: 1rem;
color: var(--color-mode-text-secondary, #475569);
line-height: 1.6;
margin-bottom: 16px;
flex: 1;
}
.blog-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.875rem;
color: var(--color-mode-text-muted, #64748b);
padding-top: 16px;
border-top: 1px solid var(--color-mode-border, #e2e8f0);
}
.blog-card-author {
display: flex;
align-items: center;
gap: 8px;
}
.blog-card-date {
display: flex;
align-items: center;
gap: 8px;
}
/* Enhanced Empty State */
.empty-state {
text-align: center;
padding: 100px 60px;
animation: fadeIn 0.8s ease-out;
background: linear-gradient(135deg, rgba(var(--blog-accent-rgb), 0.05) 0%, rgba(var(--blog-accent-rgb), 0.02) 100%);
border-radius: 36px;
border: 2px dashed var(--color-mode-border);
margin: 80px 0;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
}
.empty-state::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(var(--blog-accent-rgb), 0.1), transparent);
transition: left 0.6s ease;
}
.empty-state:hover {
border-color: var(--blog-accent);
background: linear-gradient(135deg, rgba(var(--blog-accent-rgb), 0.08) 0%, rgba(var(--blog-accent-rgb), 0.03) 100%);
transform: scale(1.01);
box-shadow: 0 12px 32px rgba(var(--blog-accent-rgb), 0.15);
}
.empty-state:hover::before {
left: 100%;
}
[data-theme="dark"] .empty-state {
background: linear-gradient(135deg, rgba(var(--blog-accent-rgb), 0.1) 0%, rgba(var(--blog-accent-rgb), 0.05) 100%);
border-color: rgba(255, 255, 255, 0.1);
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.empty-state i {
font-size: 6rem;
color: var(--blog-accent);
margin-bottom: 40px;
opacity: 0.7;
display: block;
animation: pulse 2s ease-in-out infinite;
background: linear-gradient(135deg, var(--blog-accent), var(--blog-accent-secondary));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 4px 12px rgba(var(--blog-accent-rgb), 0.3));
}
.empty-state i::before {
content: '\f1ea';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
.empty-state h2 {
font-size: clamp(2rem, 4vw, 2.5rem);
font-weight: 900;
color: var(--color-mode-text);
margin-bottom: 20px;
letter-spacing: -0.03em;
line-height: 1.2;
}
.empty-state p {
font-size: 1.1rem;
color: var(--color-mode-text-secondary, #64748b);
margin-bottom: 32px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.empty-state .btn {
margin-top: 32px;
padding: 16px 40px;
font-size: 16px;
font-weight: 700;
border-radius: 16px;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
letter-spacing: 0.3px;
}
.empty-state .btn:hover {
transform: scale(1.05);
}
/* Button Styles */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
border-radius: 16px;
font-weight: 600;
font-size: 15px;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
font-family: inherit;
position: relative;
overflow: hidden;
}
.btn-primary {
background: var(--blog-accent);
color: white;
font-weight: 500;
letter-spacing: 0.2px;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-primary:hover {
background: var(--blog-accent-secondary);
opacity: 0.9;
}
.featured-read-btn {
position: relative;
overflow: hidden;
border: none;
transition: all 0.2s ease;
padding: 12px 24px;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.2px;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
}
.featured-read-btn i {
margin-left: 0;
transition: transform 0.3s ease;
}
.featured-read-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.7s ease;
}
.featured-read-btn::after {
content: '';
position: absolute;
inset: -2px;
border-radius: 14px;
padding: 2px;
background: linear-gradient(135deg, var(--blog-accent), var(--blog-accent-secondary));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease;
}
.featured-read-btn:hover {
transform: scale(1.02);
}
.featured-read-btn:hover::before {
left: 100%;
}
.featured-read-btn:hover::after {
opacity: 1;
}
.btn-primary:hover::before {
left: 100%;
}
.btn-primary:active {
transform: translateY(0);
}
/* Premium Pagination */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 48px;
margin-bottom: 40px;
flex-wrap: wrap;
padding: 24px 0;
position: relative;
}
.pagination::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 250px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--blog-accent), var(--blog-accent-secondary), transparent);
opacity: 0.5;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(var(--blog-accent-rgb), 0.2);
}
.pagination::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-mode-border), transparent);
opacity: 0.3;
}
.pagination a,
.pagination span {
padding: 10px 16px;
border: 1px solid var(--color-mode-border);
border-radius: 8px;
color: var(--color-mode-text);
text-decoration: none;
transition: all 0.2s ease;
min-width: 44px;
text-align: center;
font-weight: 500;
font-size: 14px;
background: var(--color-mode-bg-card);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
position: relative;
}
[data-theme="dark"] .pagination a,
[data-theme="dark"] .pagination span {
background: rgba(30, 41, 59, 0.6);
border-color: rgba(255, 255, 255, 0.1);
}
.pagination a:hover {
background: var(--blog-accent);
color: white;
border-color: var(--blog-accent);
}
.pagination a:active {
opacity: 0.8;
}
.pagination .current,
.pagination .pag-btn.active {
background: var(--blog-accent);
color: white;
border-color: var(--blog-accent);
}
@keyframes pulse {
0%,
100% {
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}
50% {
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.6);
}
}
.pagination .disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.pagination i {
font-size: 13px;
}
/* Responsive */
@media (max-width: 768px) {
.container.homepage {
padding: 24px 16px;
}
.homepage-header {
margin-bottom: 40px;
}
.homepage-header-content {
padding: 50px 24px;
border-radius: 24px;
}
.homepage-title {
font-size: 2rem;
flex-direction: column;
gap: 12px;
}
.homepage-subtitle {
font-size: 1rem;
}
.homepage-stats {
gap: 12px;
flex-direction: column;
align-items: stretch;
}
.stat-item {
padding: 12px 20px;
font-size: 14px;
width: 100%;
justify-content: center;
}
.blog-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.blog-card-title {
font-size: 1.25rem;
}
.posts-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.post-card {
border-radius: 20px;
}
.post-card:hover {
transform: translateY(-6px) scale(1.01);
}
.post-image {
height: 220px;
}
.post-content {
padding: 24px;
}
.post-title {
font-size: 1.25rem;
}
.post-excerpt {
font-size: 14px;
-webkit-line-clamp: 3;
line-clamp: 3;
}
/* Post Detail Page Refined */
.post-detail-page {
padding-top: calc(var(--header-height) + 40px);
max-width: 1000px !important;
margin: 0 auto;
}
.post-navigation-top {
margin-bottom: 30px;
}
.back-btn {
background: transparent;
border: 1px solid var(--color-mode-border);
padding: 10px 20px;
border-radius: 14px;
color: var(--color-mode-text);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
transition: all 0.3s ease;
}
.back-btn:hover {
background: rgba(var(--blog-accent-rgb), 0.05);
border-color: var(--blog-accent);
color: var(--blog-accent);
}
.post-detail-card {
background: var(--color-mode-bg-card);
border-radius: 40px;
overflow: hidden;
border: 1px solid var(--color-mode-border);
box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.08);
margin-bottom: 40px;
}
[data-theme="dark"] .post-detail-card {
background: rgba(30, 41, 59, 0.5);
backdrop-filter: blur(20px);
border-color: rgba(255, 255, 255, 0.05);
}
.post-featured-image-wrapper {
height: 500px;
overflow: hidden;
position: relative;
}
.post-featured-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.post-detail-card:hover .post-featured-image {
transform: scale(1.05);
}
.post-detail-content {
padding: 60px 80px;
}
.post-title-main {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
margin-bottom: 32px;
letter-spacing: -0.04em;
line-height: 1.1;
color: var(--color-mode-text);
}
.post-meta-detail {
margin-bottom: 24px;
display: flex;
gap: 24px;
font-size: 14px;
opacity: 0.7;
color: var(--color-mode-text);
}
.post-tags-detail {
margin-bottom: 40px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.post-excerpt-box {
background: rgba(var(--blog-accent-rgb), 0.05);
padding: 32px;
border-radius: 24px;
border-left: 6px solid var(--blog-accent);
margin-bottom: 48px;
font-style: italic;
font-size: 1.25rem;
color: var(--color-mode-text);
opacity: 0.9;
}
.post-body {
font-size: 1.15rem;
line-height: 1.8;
color: var(--color-mode-text);
}
.post-body h2 {
font-size: 1.85rem;
margin: 48px 0 24px;
font-weight: 800;
letter-spacing: -0.02em;
}
.post-body p {
margin-bottom: 24px;
}
.post-body img {
border-radius: 32px;
margin: 48px 0;
box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.2);
width: 100%;
}
.post-footer-detail {
margin-top: 60px;
padding-top: 40px;
border-top: 1px solid var(--color-mode-border);
display: flex;
align-items: center;
justify-content: space-between;
}
.share-box {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.share-label {
font-weight: 700;
color: var(--color-mode-text-secondary);
}
.share-buttons {
display: inline-flex;
gap: 10px;
flex-wrap: wrap;
}
/* Enhanced Social Share Buttons */
.share-btn {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: white;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
cursor: pointer;
}
.share-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 10px 25px -5px currentColor;
}
.share-twitter {
background: linear-gradient(135deg, #1DA1F2, #0d8ddb);
}
.share-facebook {
background: linear-gradient(135deg, #4267B2, #365899);
}
.share-linkedin {
background: linear-gradient(135deg, #0A66C2, #0855a3);
}
.share-whatsapp {
background: linear-gradient(135deg, #25D366, #1da851);
}
.share-copy {
background: linear-gradient(135deg, var(--blog-accent), var(--blog-accent-secondary));
}
.share-copy.copied {
background: linear-gradient(135deg, #10B981, #059669);
}
.share-copy.copied i::before {
content: "\\f00c";
}
/* Post Lead Paragraph */
.post-lead {
font-size: 1.25rem;
line-height: 1.7;
color: var(--color-mode-text-secondary);
margin-bottom: 32px;
padding-left: 20px;
border-left: 3px solid var(--blog-accent);
font-style: italic;
}
.post-prev-next {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 80px;
}
.nav-card {
padding: 24px;
text-decoration: none;
display: flex;
flex-direction: column;
gap: 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.1);
}
.nav-label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
color: var(--blog-accent);
letter-spacing: 0.1em;
}
.nav-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-mode-text);
transition: color 0.3s ease;
}
.nav-card:hover .nav-title {
color: var(--blog-accent);
}
@media (max-width: 768px) {
.post-detail-content {
padding: 40px 24px;
}
.post-detail-page {
padding-top: 100px;
}
.post-footer-detail {
flex-direction: column;
gap: 30px;
align-items: flex-start;
}
}
@media (max-width: 640px) {
.post-prev-next {
grid-template-columns: 1fr;
}
}
.post-meta {
font-size: 12px;
gap: 12px;
}
.pagination {
gap: 8px;
}
.pagination a,
.pagination span {
padding: 12px 16px;
font-size: 14px;
min-width: 44px;
}
}
@media (max-width: 480px) {
.container.homepage {
padding: 20px 12px;
}
.homepage-header-content {
padding: 40px 20px;
border-radius: 20px;
}
.post-content {
padding: 20px;
}
.homepage-header {
margin-bottom: 32px;
}
.homepage-title {
font-size: 1.75rem;
}
.stat-item {
padding: 10px 16px;
font-size: 13px;
}
.post-card {
border-radius: 16px;
}
.post-image {
height: 180px;
}
.btn {
padding: 12px 24px;
font-size: 14px;
}
.pagination {
flex-wrap: wrap;
gap: 6px;
}
.pagination a,
.pagination span {
padding: 10px 14px;
font-size: 13px;
min-width: 40px;
}
}
/* Dark Mode Support */
[data-theme="dark"] .post-card {
background: var(--color-mode-bg-card, #1e293b);
border-color: var(--color-mode-border, rgba(255, 255, 255, 0.1));
}
[data-theme="dark"] .post-card:hover {
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
border-color: var(--color-mode-border-hover, rgba(99, 102, 241, 0.4));
}
[data-theme="dark"] .post-content {
background: var(--color-mode-bg-card, #1e293b);
}
[data-theme="dark"] .post-title {
color: var(--color-mode-text, #f1f5f9);
}
[data-theme="dark"] .post-excerpt {
color: var(--color-mode-text-secondary, #94a3b8);
}
[data-theme="dark"] .blog-card {
background: var(--color-mode-bg-card);
border-color: var(--color-mode-border);
}
[data-theme="dark"] .blog-card:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
/* Dark Mode Homepage */
[data-theme="dark"] .homepage-header-content {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}
[data-theme="dark"] .empty-state {
background: var(--color-mode-bg-card, #1e293b);
border-color: var(--color-mode-border, rgba(255, 255, 255, 0.1));
}
[data-theme="dark"] .empty-state h2 {
color: var(--color-mode-text, #f1f5f9);
}
[data-theme="dark"] .empty-state p {
color: var(--color-mode-text-secondary, #94a3b8);
}
/* Post Detail Page Styles */
.container.post-detail {
max-width: 900px;
margin: 0 auto;
padding: 40px 20px;
}
.post-detail-wrapper {
width: 100%;
}
/* Back Link */
.back-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
margin-bottom: 32px;
color: var(--color-mode-text, #0f172a);
text-decoration: none;
font-weight: 600;
border-radius: 12px;
background: var(--color-mode-bg-secondary, #f1f5f9);
border: 1px solid var(--color-mode-border, #e2e8f0);
transition: all 0.2s ease;
}
.back-link:hover {
background: var(--color-mode-bg-hover, #e2e8f0);
transform: translateX(-4px);
}
.back-link i {
font-size: 14px;
}
/* Post Article */
.post-article {
background: var(--color-mode-bg-card, #ffffff);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border: 1px solid var(--color-mode-border, rgba(226, 232, 240, 0.8));
margin-bottom: 40px;
}
/* Post Header */
.post-header {
position: relative;
padding: 60px 40px;
background: linear-gradient(135deg, var(--color-mode-accent, #6366f1) 0%, var(--color-mode-accent-secondary, #8b5cf6) 100%);
color: white;
}
.post-header-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.1;
background-image: url('data:image/svg+xml,');
}
.post-header-content {
position: relative;
z-index: 1;
}
.post-header-top {
margin-bottom: 24px;
}
.post-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag-badge {
padding: 6px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: white;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.post-title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 800;
color: white;
margin: 0 0 24px 0;
line-height: 1.2;
letter-spacing: -0.02em;
}
.post-meta-simple {
display: flex;
flex-wrap: wrap;
gap: 24px;
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
}
.meta-simple-item {
display: flex;
align-items: center;
gap: 8px;
}
.meta-simple-item i {
font-size: 14px;
opacity: 0.8;
}
/* Post Image */
.post-image-wrapper {
width: 100%;
margin: 0;
}
.post-image {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* Post Content */
.post-detail-content {
padding: 60px 40px;
font-size: 18px;
line-height: 1.8;
color: var(--color-mode-text, #0f172a);
}
.post-detail-content h1,
.post-detail-content h2,
.post-detail-content h3,
.post-detail-content h4 {
margin-top: 40px;
margin-bottom: 20px;
font-weight: 700;
color: var(--color-mode-text, #0f172a);
line-height: 1.3;
}
.post-detail-content h1 {
font-size: 2.5rem;
}
.post-detail-content h2 {
font-size: 2rem;
}
.post-detail-content h3 {
font-size: 1.5rem;
}
.post-detail-content p {
margin-bottom: 24px;
}
.post-detail-content ul,
.post-detail-content ol {
margin-bottom: 24px;
padding-left: 32px;
}
.post-detail-content li {
margin-bottom: 12px;
}
.post-detail-content code {
background: var(--color-mode-bg-secondary, #f1f5f9);
padding: 2px 8px;
border-radius: 4px;
font-size: 0.9em;
color: var(--color-mode-accent, #6366f1);
}
.post-detail-content pre {
background: var(--color-mode-bg-secondary, #f1f5f9);
padding: 24px;
border-radius: 12px;
overflow-x: auto;
margin-bottom: 24px;
}
.post-detail-content pre code {
background: none;
padding: 0;
color: var(--color-mode-text, #0f172a);
}
.post-detail-content blockquote {
border-left: 4px solid var(--color-mode-accent, #6366f1);
padding-left: 24px;
margin: 32px 0;
font-style: italic;
color: var(--color-mode-text-secondary, #64748b);
}
.post-detail-content img {
max-width: 100%;
height: auto;
border-radius: 12px;
margin: 32px 0;
}
.post-detail-content a {
color: var(--color-mode-accent, #6366f1);
text-decoration: underline;
}
.post-detail-content a:hover {
color: var(--color-mode-accent-dark, #4f46e5);
}
/* Post TOC */
.post-toc {
background: var(--color-mode-bg-secondary, #f1f5f9);
border-radius: 12px;
padding: 24px;
margin: 40px 0;
border: 1px solid var(--color-mode-border, #e2e8f0);
}
.toc-header {
display: flex;
align-items: center;
gap: 12px;
font-weight: 700;
font-size: 18px;
margin-bottom: 16px;
color: var(--color-mode-text, #0f172a);
}
.toc-nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.toc-list {
padding-left: 0;
}
.toc-item {
margin-bottom: 8px;
}
.toc-link {
color: var(--color-mode-text-secondary, #64748b);
text-decoration: none;
transition: color 0.2s ease;
display: block;
padding: 4px 0;
}
.toc-link:hover {
color: var(--color-mode-accent, #6366f1);
}
.toc-sublist {
padding-left: 24px;
margin-top: 8px;
}
/* Post Navigation */
.post-navigation {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin: 40px 0;
}
.nav-link {
display: flex;
align-items: center;
gap: 16px;
padding: 24px;
background: var(--color-mode-bg-card, #ffffff);
border: 1px solid var(--color-mode-border, #e2e8f0);
border-radius: 12px;
text-decoration: none;
transition: all 0.2s ease;
}
.nav-link:hover {
background: var(--color-mode-bg-hover, #f1f5f9);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.nav-prev {
text-align: left;
}
.nav-next {
text-align: right;
flex-direction: row-reverse;
}
.nav-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-mode-accent, #6366f1);
color: white;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.nav-content {
flex: 1;
min-width: 0;
}
.nav-label {
display: block;
font-size: 12px;
color: var(--color-mode-text-secondary, #64748b);
margin-bottom: 4px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.nav-title {
display: block;
font-size: 16px;
font-weight: 600;
color: var(--color-mode-text, #0f172a);
}
/* Author Card */
.author-card {
display: flex;
align-items: center;
gap: 24px;
padding: 32px;
background: var(--color-mode-bg-card, #ffffff);
border: 1px solid var(--color-mode-border, #e2e8f0);
border-radius: 12px;
margin: 40px 0;
}
.author-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--color-mode-accent, #6366f1);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
flex-shrink: 0;
}
.author-info {
flex: 1;
}
.author-name {
font-size: 20px;
font-weight: 700;
margin: 0 0 8px 0;
color: var(--color-mode-text, #0f172a);
}
.author-bio {
margin: 0;
color: var(--color-mode-text-secondary, #64748b);
font-size: 14px;
}
/* Related Posts */
.related-posts {
margin: 60px 0;
}
.related-posts-header {
margin-bottom: 32px;
}
.related-posts-title {
font-size: 2rem;
font-weight: 700;
color: var(--color-mode-text, #0f172a);
margin: 0;
display: flex;
align-items: center;
gap: 12px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
.related-card {
background: var(--color-mode-bg-card, #ffffff);
border: 1px solid var(--color-mode-border, #e2e8f0);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
}
.related-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.related-image-wrapper {
width: 100%;
overflow: hidden;
}
.related-image {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.3s ease;
}
.related-card:hover .related-image {
transform: scale(1.05);
}
.related-content {
padding: 20px;
}
.related-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 12px 0;
}
.related-title a {
color: var(--color-mode-text, #0f172a);
text-decoration: none;
transition: color 0.2s ease;
}
.related-title a:hover {
color: var(--color-mode-accent, #6366f1);
}
.related-excerpt {
font-size: 14px;
color: var(--color-mode-text-secondary, #64748b);
margin: 0 0 12px 0;
line-height: 1.6;
}
.related-meta {
display: flex;
align-items: center;
gap: 16px;
font-size: 12px;
color: var(--color-mode-text-secondary, #64748b);
}
.related-date {
display: flex;
align-items: center;
gap: 6px;
}
/* Scroll to Top */
.scroll-to-top {
position: fixed;
bottom: 32px;
right: 32px;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--color-mode-accent, #6366f1);
color: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
}
.scroll-to-top.visible {
opacity: 1;
visibility: visible;
}
.scroll-to-top:hover {
background: var(--color-mode-accent-dark, #4f46e5);
transform: translateY(-4px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
/* Reading Progress */
.reading-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 4px;
background: rgba(0, 0, 0, 0.1);
z-index: 9999;
}
.reading-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--color-mode-accent, #6366f1), var(--color-mode-accent-secondary, #8b5cf6));
width: 0%;
transition: width 0.1s ease;
}
/* Responsive Post Detail */
@media (max-width: 768px) {
.container.post-detail {
padding: 20px 16px;
}
.post-header {
padding: 40px 24px;
}
.post-title {
font-size: 2rem;
}
.post-detail-content {
padding: 32px 24px;
font-size: 16px;
}
.post-detail-content h1 {
font-size: 2rem;
}
.post-detail-content h2 {
font-size: 1.5rem;
}
.post-detail-content h3 {
font-size: 1.25rem;
}
.post-navigation {
grid-template-columns: 1fr;
}
.nav-next {
flex-direction: row;
text-align: left;
}
.related-grid {
grid-template-columns: 1fr;
}
.author-card {
flex-direction: column;
text-align: center;
}
}
/* Dark Mode Post Detail */
[data-theme="dark"] .post-article {
background: var(--color-mode-bg-card, #1e293b);
border-color: var(--color-mode-border, rgba(255, 255, 255, 0.1));
}
[data-theme="dark"] .back-link {
background: var(--color-mode-bg-secondary, #334155);
border-color: var(--color-mode-border, rgba(255, 255, 255, 0.1));
color: var(--color-mode-text, #f1f5f9);
}
[data-theme="dark"] .post-detail-content {
color: var(--color-mode-text, #f1f5f9);
}
[data-theme="dark"] .post-detail-content h1,
[data-theme="dark"] .post-detail-content h2,
[data-theme="dark"] .post-detail-content h3,
[data-theme="dark"] .post-detail-content h4 {
color: var(--color-mode-text, #f1f5f9);
}
[data-theme="dark"] .nav-link {
background: var(--color-mode-bg-card, #1e293b);
border-color: var(--color-mode-border, rgba(255, 255, 255, 0.1));
}
[data-theme="dark"] .nav-title {
color: var(--color-mode-text, #f1f5f9);
}
[data-theme="dark"] .author-card {
background: var(--color-mode-bg-card, #1e293b);
border-color: var(--color-mode-border, rgba(255, 255, 255, 0.1));
}
[data-theme="dark"] .author-name {
color: var(--color-mode-text, #f1f5f9);
}
[data-theme="dark"] .related-card {
background: var(--color-mode-bg-card, #1e293b);
border-color: var(--color-mode-border, rgba(255, 255, 255, 0.1));
}
[data-theme="dark"] .related-title a {
color: var(--color-mode-text, #f1f5f9);
}
[data-theme="dark"] .post-toc {
background: var(--color-mode-bg-secondary, #334155);
border-color: var(--color-mode-border, rgba(255, 255, 255, 0.1));
}
[data-theme="dark"] .toc-header {
color: var(--color-mode-text, #f1f5f9);
}
/* ============================================
GLOBAL SOCIAL SHARE BUTTONS (No Media Query)
============================================ */
.share-btn {
width: 42px;
height: 42px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: white !important;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
cursor: pointer;
}
.share-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}
.share-twitter {
background: linear-gradient(135deg, #1DA1F2, #0d8ddb);
}
.share-facebook {
background: linear-gradient(135deg, #4267B2, #365899);
}
.share-linkedin {
background: linear-gradient(135deg, #0A66C2, #0855a3);
}
.share-whatsapp {
background: linear-gradient(135deg, #25D366, #1da851);
}
.share-copy {
background: linear-gradient(135deg, var(--blog-accent, #8B5CF6), var(--blog-accent-secondary, #A855F7));
}
.share-copy.copied {
background: linear-gradient(135deg, #10B981, #059669);
}
.share-copy.copied i::before {
content: "\f00c";
}
.share-buttons {
display: inline-flex;
gap: 10px;
flex-wrap: wrap;
}
.post-lead {
font-size: 1.25rem;
line-height: 1.7;
color: var(--color-mode-text-secondary);
margin-bottom: 32px;
padding-left: 20px;
border-left: 3px solid var(--blog-accent, #8B5CF6);
font-style: italic;
}
/* =============================================
POST DETAIL PAGE - Enhanced Styles
============================================= */
/* Base Post Detail Page Layout */
.post-detail-page {
padding-top: calc(var(--header-height, 80px) + 60px);
max-width: 1000px;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
padding-bottom: 80px;
}
/* Large Desktop Enhancement */
@media (min-width: 1200px) {
.post-detail-page {
max-width: 1100px;
padding-left: 40px;
padding-right: 40px;
}
}
.post-navigation-top {
margin-bottom: 32px;
}
.back-btn {
background: var(--color-mode-bg-card);
border: 1px solid var(--color-mode-border);
padding: 12px 24px;
border-radius: 16px;
color: var(--color-mode-text);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 14px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
position: relative;
overflow: hidden;
}
.back-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(var(--blog-accent-rgb), 0.1), transparent);
transition: left 0.5s ease;
}
.back-btn:hover::before {
left: 100%;
}
.back-btn:hover {
background: var(--blog-accent);
border-color: var(--blog-accent);
color: white;
transform: translateX(-4px);
box-shadow: 0 8px 20px rgba(var(--blog-accent-rgb), 0.25);
}
.back-btn i {
transition: transform 0.3s ease;
}
.back-btn:hover i {
transform: translateX(-3px);
}
/* Enhanced Post Detail Card */
.post-detail-card {
background: var(--color-mode-bg-card);
border-radius: 32px;
overflow: hidden;
border: 1px solid var(--color-mode-border);
box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.08);
margin-bottom: 40px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.post-detail-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--blog-accent), var(--blog-accent-secondary));
opacity: 0;
transition: opacity 0.4s ease;
}
.post-detail-card:hover::before {
opacity: 1;
}
[data-theme="dark"] .post-detail-card {
background: rgba(30, 41, 59, 0.6);
backdrop-filter: blur(20px);
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.4);
}
/* Featured Image */
.post-featured-image-wrapper {
height: 450px;
overflow: hidden;
position: relative;
}
.post-featured-image-wrapper::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(to top, var(--color-mode-bg-card), transparent);
pointer-events: none;
}
[data-theme="dark"] .post-featured-image-wrapper::after {
background: linear-gradient(to top, rgba(30, 41, 59, 0.6), transparent);
}
.post-featured-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.post-detail-card:hover .post-featured-image {
transform: scale(1.03);
}
/* Post Content Area */
.post-detail-content {
padding: 48px 56px 56px;
}
/* Post Header */
.post-header-detail {
margin-bottom: 40px;
}
.post-meta-detail {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 24px;
font-size: 13px;
color: var(--color-mode-text-secondary);
}
.post-meta-detail span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: rgba(var(--blog-accent-rgb), 0.08);
border-radius: 12px;
font-weight: 600;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.post-meta-detail span:hover {
background: rgba(var(--blog-accent-rgb), 0.15);
border-color: rgba(var(--blog-accent-rgb), 0.3);
transform: translateY(-2px);
}
.post-meta-detail i {
color: var(--blog-accent);
font-size: 12px;
}
.post-meta-detail span {
display: inline-flex;
align-items: center;
gap: 8px;
}
.post-meta-detail i {
color: var(--blog-accent);
font-size: 12px;
}
.post-title-main {
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.03em;
color: var(--color-mode-text);
margin-bottom: 24px;
}
.post-tags-detail {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.post-tags-detail .tag-badge {
padding: 8px 16px;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: all 0.3s ease;
}
.post-tags-detail .tag-badge:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
/* Excerpt Box */
.post-excerpt-box {
background: linear-gradient(135deg, rgba(var(--blog-accent-rgb), 0.08), rgba(var(--blog-accent-rgb), 0.04));
padding: 28px 32px;
border-radius: 20px;
border-left: 5px solid var(--blog-accent);
margin-bottom: 40px;
font-size: 1.15rem;
line-height: 1.7;
color: var(--color-mode-text);
font-style: italic;
}
.post-excerpt-box p {
margin: 0;
}
/* Post Body Content */
.post-body {
font-size: 1.1rem;
line-height: 1.85;
color: var(--color-mode-text);
}
.post-body h2 {
font-size: 1.75rem;
font-weight: 800;
margin: 48px 0 20px;
color: var(--color-mode-text);
letter-spacing: -0.02em;
}
.post-body h3 {
font-size: 1.4rem;
font-weight: 700;
margin: 36px 0 16px;
color: var(--color-mode-text);
}
.post-body p {
margin-bottom: 20px;
}
.post-body a {
color: var(--blog-accent);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s ease;
}
.post-body a:hover {
color: var(--blog-accent-secondary);
}
.post-body img {
border-radius: 24px;
margin: 40px auto;
width: 100%;
max-width: 100%;
height: auto;
display: block;
box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.15);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.post-body img:hover {
transform: scale(1.02);
box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .post-body img {
box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .post-body img:hover {
box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.5);
}
.post-body blockquote {
background: rgba(var(--blog-accent-rgb), 0.06);
border-left: 4px solid var(--blog-accent);
padding: 20px 28px;
margin: 32px 0;
border-radius: 0 16px 16px 0;
font-style: italic;
color: var(--color-mode-text);
}
.post-body code {
background: var(--color-mode-bg-secondary);
padding: 3px 8px;
border-radius: 6px;
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 0.9em;
}
.post-body pre {
background: var(--color-mode-bg-secondary);
padding: 24px;
border-radius: 16px;
overflow-x: auto;
margin: 32px 0;
}
.post-body pre code {
background: none;
padding: 0;
}
.post-body ul,
.post-body ol {
margin: 20px 0;
padding-left: 28px;
}
.post-body li {
margin-bottom: 10px;
}
/* Post Footer with Author Info */
.post-footer-detail {
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--color-mode-border);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px;
}
.post-author-info {
display: flex;
align-items: center;
gap: 16px;
}
.author-avatar {
width: 56px;
height: 56px;
border-radius: 16px;
background: linear-gradient(135deg, var(--blog-accent), var(--blog-accent-secondary));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
box-shadow: 0 8px 20px rgba(var(--blog-accent-rgb), 0.3);
}
.author-details {
display: flex;
flex-direction: column;
gap: 4px;
}
.author-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-mode-text-secondary);
}
.author-name {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-mode-text);
}
.post-stats-info {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.post-stats-info span {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--color-mode-text-secondary);
padding: 8px 16px;
background: var(--color-mode-bg-secondary);
border-radius: 10px;
}
.post-stats-info i {
color: var(--blog-accent);
}
/* Prev/Next Navigation */
.post-prev-next {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 60px;
}
.nav-card {
padding: 28px;
text-decoration: none;
display: flex;
flex-direction: column;
gap: 10px;
border-radius: 20px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12);
border-color: var(--blog-accent);
}
.nav-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--blog-accent);
}
.nav-title {
font-size: 1rem;
font-weight: 700;
color: var(--color-mode-text);
line-height: 1.4;
transition: color 0.2s ease;
}
.nav-card:hover .nav-title {
color: var(--blog-accent);
}
/* Post Detail Responsive */
@media (max-width: 768px) {
.post-detail-page {
padding-top: calc(var(--header-height, 70px) + 24px);
padding-left: 16px;
padding-right: 16px;
}
.post-detail-card {
border-radius: 24px;
}
.post-featured-image-wrapper {
height: 280px;
}
.post-detail-content {
padding: 32px 24px 40px;
}
.post-title-main {
font-size: 1.5rem;
margin-bottom: 20px;
}
.post-meta-detail {
gap: 12px 20px;
font-size: 12px;
}
.post-excerpt-box {
padding: 20px 24px;
font-size: 1rem;
border-radius: 16px;
}
.post-body {
font-size: 1rem;
line-height: 1.75;
}
.post-body h2 {
font-size: 1.4rem;
margin: 36px 0 16px;
}
.post-body img {
border-radius: 16px;
margin: 28px 0;
}
.post-footer-detail {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.post-stats-info {
width: 100%;
}
.post-stats-info span {
flex: 1;
justify-content: center;
}
.post-prev-next {
grid-template-columns: 1fr;
gap: 16px;
}
.nav-card {
padding: 20px;
}
.back-btn {
padding: 10px 18px;
font-size: 13px;
}
}
@media (max-width: 480px) {
.post-detail-page {
padding-top: calc(var(--header-height, 60px) + 16px);
}
.post-detail-content {
padding: 24px 20px 32px;
}
.post-title-main {
font-size: 1.35rem;
}
.author-avatar {
width: 48px;
height: 48px;
font-size: 20px;
}
.author-name {
font-size: 1rem;
}
.post-stats-info {
flex-direction: column;
gap: 10px;
}
.post-stats-info span {
width: 100%;
}
}
/* =============================================
DESKTOP ENHANCEMENTS (1024px+)
============================================= */
@media (min-width: 1024px) {
/* Enhanced Content Area */
.post-detail-content {
padding: 56px 72px 72px;
}
/* Larger Title */
.post-title-main {
font-size: 2.75rem;
margin-bottom: 28px;
}
/* Enhanced Meta */
.post-meta-detail {
gap: 28px;
font-size: 14px;
margin-bottom: 24px;
}
/* Better Excerpt */
.post-excerpt-box {
padding: 32px 40px;
font-size: 1.2rem;
margin-bottom: 48px;
}
/* Enhanced Body Typography */
.post-body {
font-size: 1.15rem;
line-height: 1.9;
}
.post-body h2 {
font-size: 2rem;
margin: 56px 0 24px;
}
.post-body h3 {
font-size: 1.5rem;
margin: 44px 0 20px;
}
/* Author Section - Desktop Card Style */
.post-footer-detail {
margin-top: 64px;
padding: 36px;
background: var(--color-mode-bg-secondary);
border-radius: 24px;
border-top: none;
}
.author-avatar {
width: 64px;
height: 64px;
font-size: 28px;
border-radius: 20px;
}
.author-name {
font-size: 1.2rem;
}
.post-stats-info span {
padding: 10px 20px;
font-size: 14px;
}
/* Featured Image */
.post-featured-image-wrapper {
height: 520px;
}
/* Navigation Cards */
.post-prev-next {
gap: 32px;
margin-bottom: 80px;
}
.nav-card {
padding: 32px;
}
.nav-title {
font-size: 1.1rem;
}
/* Back Button */
.back-btn {
padding: 14px 28px;
font-size: 15px;
}
}
/* =============================================
LARGE DESKTOP ENHANCEMENTS (1400px+)
============================================= */
@media (min-width: 1400px) {
.post-detail-page {
max-width: 1200px;
}
.post-detail-content {
padding: 64px 88px 88px;
}
.post-title-main {
font-size: 3rem;
}
.post-featured-image-wrapper {
height: 600px;
}
.post-body {
font-size: 1.2rem;
}
.post-body h2 {
font-size: 2.25rem;
}
}