/*
Theme Name: Java Fleet
Theme URI: https://www.java-developer.online/
Author: Java Fleet Crew
Author URI: https://www.java-developer.online/
Description: Custom Theme für Java Fleet Blog – Landing Page, Seiten & Kategorien mit Hero-Bildern, robustes Menü, Performance-Optimierungen.
Version: 1.0.0
Text Domain: java-fleet
*/

:root{
--bg-color:#121212;
--bg-secondary:#1a1a1a;
--text-color:#e9e9e9;
--muted:#c7c7c7;
--accent-orange:#ff9500;
--link-blue:#4aa3ff;
--link-blue-hover:#76b9ff;
--card-bg:#1e1e1e;
--border:#2a2a2a;
}
body{ background:var(--bg-color); color:var(--text-color); }
h1, h2, h3, h4, h5, h6{ color:var(--accent-orange); }
a{ color:var(--link-blue); }
a:hover, a:focus{ color:var(--link-blue-hover); text-decoration:underline; }
.card{ background:var(--card-bg); border:1px solid var(--border); }
a:focus, button:focus{ outline:2px solid var(--accent-orange); outline-offset:2px; }
[data-theme="darkblue"]{
--bg-color:#0f0f0f;
--bg-secondary:#1a1a1a;
--card-bg:#1e1e1e;
--card-bg-hover:#2a2a2a;
--text-color:#4fc3f7;      
--text-white:#4fc3f7;      
--heading-color:#ff9500;   
--link-color:#29b6f6;      
--accent-color:#ff9500;    
--code-bg:#1e1e1e;
--border-color:#333333;
--meta-color:#81c784;      
--meta-light:#a4c3a2;      
--meta-dark:#6b9b6d;       
--header-bg-rgb:15, 15, 15;
}
[data-theme="blue"]{
--bg-color:#f0f4f8;
--bg-secondary:#e2e8f0;
--card-bg:#ffffff;
--card-bg-hover:#f7fafc;
--text-color:#2d3748;
--text-white:#1a202c;
--heading-color:#1a365d;
--link-color:#3182ce;
--accent-color:#4299e1;
--code-bg:#e2e8f0;
--border-color:#cbd5e0;
--meta-color:#4a5568;
--meta-light:#2d3748;
--meta-dark:#718096;
--header-bg-rgb:240, 244, 248;
}
[data-theme="green"]{
--bg-color:#f0fff4;
--bg-secondary:#e6fffa;
--card-bg:#ffffff;
--card-bg-hover:#f7fafc;
--text-color:#1a202c;
--text-white:#000000;
--heading-color:#22543d;
--link-color:#38a169;
--accent-color:#48bb78;
--code-bg:#e6fffa;
--border-color:#c6f6d5;
--meta-color:#4a5568;
--meta-light:#2d3748;
--meta-dark:#718096;
--header-bg-rgb:240, 255, 244;
}
[data-theme="sepia"]{
--bg-color:#f7f3e9;
--bg-secondary:#f5f5dc;
--card-bg:#fffef7;
--card-bg-hover:#f0ead6;
--text-color:#5d4e37;
--text-white:#3d2f1f;
--heading-color:#8b4513;
--link-color:#a0522d;
--accent-color:#cd853f;
--code-bg:#f5f5dc;
--border-color:#d2b48c;
--meta-color:#8b7355;
--meta-light:#5d4e37;
--meta-dark:#a0522d;
--header-bg-rgb:247, 243, 233;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:var(--font-family-primary, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
font-size:var(--font-size-base, 16px);
line-height:var(--line-height-base, 1.6);
color:var(--text-color);
background:var(--bg-color);
transition:background-color 0.3s ease, color 0.3s ease;
}
img{
max-width:100%;
height:auto;
display:block;
}
a{
text-decoration:none;
color:var(--link-color);
transition:all 0.3s ease;
}
a:hover{
color:var(--accent-color);
}
.main-header{
position:fixed;
top:0;
left:0;
right:0;
background:transparent;
z-index:1000;
padding:1.5rem 0;
border-bottom:1px solid var(--border-color);
transition:background-color 0.3s ease;
}
.main-header.scrolled{
background:rgba(var(--header-bg-rgb), 0.9);
}
.header-container{
max-width:1200px;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:1rem 2rem;
}
.logo{
display:flex;
align-items:center;
font-size:1.5rem;
font-weight:bold;
color:#FF9500;
}
.logo img, .site-logo img{
height:50px;
width:auto;
max-height:60px;
}
.site-logo{
display:flex;
align-items:center;
text-decoration:none;
}
.main-nav ul{
display:flex;
list-style:none;
gap:2rem;
}
.main-nav a{
color:var(--text-color);
font-weight:500;
text-transform:uppercase;
letter-spacing:0.5px;
padding:0.5rem 1rem;
border-radius:4px;
transition:all 0.3s ease;
}
.main-nav a:hover{
background:rgba(255, 149, 0, 0.1);
color:#FF9500;
}
.main-nav ul{
position:relative;
}
.main-nav li{
position:relative;
}
.main-nav .sub-menu{
position:absolute;
top:100%;
left:0;
background:var(--card-bg, #1e1e1e);
min-width:220px;
padding:0.5rem 0;
border-radius:8px;
box-shadow:0 8px 24px rgba(0, 0, 0, 0.3);
opacity:0;
visibility:hidden;
transform:translateY(-10px);
transition:all 0.3s ease;
z-index:1000;
display:flex;
flex-direction:column;
gap:0;
}
.main-nav li:hover > .sub-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.main-nav .sub-menu li{
width:100%;
}
.main-nav .sub-menu a{
display:block;
padding:0.75rem 1.5rem;
text-transform:none;
font-size:0.9rem;
white-space:nowrap;
border-radius:0;
}
.main-nav .sub-menu a:hover{
background:rgba(255, 149, 0, 0.15);
padding-left:2rem;
}
.main-nav .menu-item-has-children > a::after{
content:"▼";
font-size:0.7em;
margin-left:0.5rem;
opacity:0.7;
}
.main-nav .sub-menu .sub-menu{
top:0;
left:100%;
margin-top:0;
}
.main-nav .sub-menu .menu-item-has-children > a::after{
content:"▶";
float:right;
margin-left:1rem;
}
.search-toggle{
position:relative;
margin-left:1rem;
}
.search-icon{
background:rgba(255, 149, 0, 0.1);
border:none;
cursor:pointer;
padding:0.8rem;
border-radius:50%;
transition:all 0.3s ease;
position:relative;
box-shadow:0 2px 10px rgba(255, 149, 0, 0.2);
}
.search-icon:hover{
background:rgba(255, 149, 0, 0.2);
transform:scale(1.05) translateY(-2px);
box-shadow:0 4px 20px rgba(255, 149, 0, 0.3);
}
.search-icon::before{
content:"";
width:18px;
height:18px;
border:2px solid var(--accent-color, #FF9500);
border-radius:50%;
display:block;
position:relative;
transition:all 0.3s ease;
}
.search-icon::after{
content:"";
width:8px;
height:2px;
background:var(--accent-color, #FF9500);
position:absolute;
transform:rotate(45deg);
right:6px;
bottom:6px;
border-radius:1px;
transition:all 0.3s ease;
}
.search-icon:hover::before{
border-color:#e55a2b;
transform:scale(1.1);
}
.search-icon:hover::after{
background:#e55a2b;
transform:rotate(45deg) scale(1.1);
}
.hero-section{
height:60vh;
min-height:400px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
overflow:hidden;
}
.hero-image{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-2;
}
.hero-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}
.hero-background{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:cover;
background-position:center;
background-attachment:fixed;
z-index:-2;
}
@media (max-width:768px){
.hero-background{
background-attachment:scroll;
}
}
.hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, 0.5);
z-index:-1;
}
.hero-content{
max-width:800px;
padding:2rem;
z-index:1;
}
.hero-title{
font-size:3.5rem;
font-weight:bold;
color:#FF9500 !important;
margin-bottom:2rem;
line-height:1.2;
text-shadow:2px 2px 4px rgba(0, 0, 0, 0.7);
}
.hero-cta{
display:inline-flex;
align-items:center;
background:#FF9500;
color:#fff;
padding:1rem 2rem;
font-size:1.1rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:1px;
border-radius:6px;
transition:all 0.3s ease;
box-shadow:0 4px 15px rgba(255, 149, 0, 0.3);
}
.hero-cta:hover{
background:#e55a2b;
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(255, 149, 0, 0.4);
}
.hero-cta::after{
content:"→";
margin-left:0.5rem;
transition:transform 0.3s ease;
}
.hero-cta:hover::after{
transform:translateX(4px);
}
.hero-cta-download{
display:inline-flex !important;
align-items:center;
gap:0.5rem;
}
.hero-cta-download .download-icon{
font-size:1.3rem;
}
.hero-cta-download::after{
content:none !important;
}
#heroQuickWinText{
transition:opacity 0.15s ease;
}
#heroQuickWinText.fade-out{
opacity:0;
}
#heroQuickWinText.fade-in{
opacity:1;
}
.hero-quick-win-description{
margin:1rem auto 0;
padding:0 1rem;
max-width:600px;
color:rgba(255, 255, 255, 0.95);
font-size:1.1rem;
font-weight:400;
line-height:1.5;
text-align:center;
text-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
transition:opacity 0.15s ease;
}
.hero-quick-win-description.fade-out{
opacity:0;
}
.hero-quick-win-description.fade-in{
opacity:1;
}
.hero-quick-wins-link{
margin-top:1.5rem;
text-align:center;
}
.quick-wins-overview-link{
color:#ffffff;
font-size:1rem;
font-weight:500;
text-decoration:underline;
transition:all 0.3s ease;
display:inline-block;
text-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
}
.quick-wins-overview-link:hover{
color:#FF9500;
transform:translateY(-2px);
text-decoration:none;
}
.hero-section.page-hero{
height:40vh;
min-height:250px;
}
@media (max-width:768px){
.hero-section.page-hero{
height:50vh;
min-height:350px;
}
.hero-section:not(.page-hero){
height:60vh;
min-height:400px;
}
.hero-quick-win-description{
font-size:1rem;
padding:0 0.5rem;
max-width:90%;
}
}
@media (max-width:480px){
.hero-quick-win-description{
font-size:0.95rem;
}
}
.page-hero .hero-content{
max-width:900px;
text-align:center;
}
.page-hero .hero-title{
font-size:3rem;
color:#FF9500 !important;
margin-bottom:1rem;
line-height:1.2;
text-shadow:2px 2px 4px rgba(0, 0, 0, 0.7);
}
.page-hero .hero-subtitle{
font-size:1.2rem;
color:rgba(255, 255, 255, 0.9);
margin-bottom:0;
line-height:1.4;
text-shadow:1px 1px 2px rgba(0, 0, 0, 0.7);
}
.serien-section{
padding:6rem 0;
background:var(--bg-color);
}
.container{
max-width:1200px;
margin:0 auto;
padding:0 2rem;
}
.section-title{
font-size:2.5rem;
color:#FF9500;
text-align:center;
margin-bottom:1rem;
font-weight:bold;
}
.section-subtitle{
text-align:center;
font-size:1.2rem;
color:var(--meta-light);
margin-bottom:4rem;
max-width:600px;
margin-left:auto;
margin-right:auto;
}
.serien-grid,
.serien-grid-intelligent{
display:grid !important;
grid-template-columns:repeat(3, 1fr) !important;
grid-template-rows:repeat(2, minmax(320px, auto)) !important;
gap:2rem !important;
margin-bottom:4rem !important;
max-width:1200px !important;
margin-left:auto !important;
margin-right:auto !important;
}
.serien-grid:not(.serien-grid-intelligent){
display:grid;
grid-template-columns:repeat(3, 1fr);
grid-template-rows:repeat(2, minmax(320px, auto));
gap:2rem;
margin-bottom:4rem;
max-width:1200px;
margin-left:auto;
margin-right:auto;
}
.serie-card{
background:var(--card-bg);
padding:2rem;
border-radius:12px;
text-align:center;
transition:all 0.3s ease;
border:1px solid var(--border-color);
position:relative;
overflow:hidden;
}
.serie-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:var(--card-color, #FF9500);
transition:height 0.3s ease;
}
.serie-card:hover::before{
height:6px;
}
.serie-card:hover{
transform:translateY(-5px);
background:var(--card-bg-hover);
border-color:var(--card-color, #FF9500);
box-shadow:0 10px 30px rgba(0, 0, 0, 0.3);
}
.serie-icon{
font-size:3rem;
margin-bottom:1.5rem;
display:block;
}
.serie-title{
font-size:1.5rem;
color:#FF9500;
margin-bottom:1rem;
font-weight:600;
}
.serie-description{
color:var(--meta-light);
line-height:1.6;
font-size:0.95rem;
}
.serie-card:nth-child(1){ --card-color:#4A90E2; }
.serie-card:nth-child(2){ --card-color:#7ED321; }
.serie-card:nth-child(3){ --card-color:#9013FE; }
.serie-card:nth-child(4){ --card-color:#F5A623; }
.blog-preview-section{
padding:6rem 0;
background:var(--bg-secondary);
}
.blog-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
gap:2rem;
}
.blog-card{
background:var(--card-bg);
border-radius:12px;
overflow:hidden;
transition:all 0.3s ease;
border:1px solid var(--border-color);
}
.blog-card:hover{
transform:translateY(-5px);
border-color:#FF9500;
box-shadow:0 10px 30px rgba(0, 0, 0, 0.3);
}
.blog-content{
padding:2rem;
}
.blog-categories{
display:flex;
gap:0.5rem;
margin-bottom:1rem;
flex-wrap:wrap;
}
.blog-category{
background:#FF9500;
color:#fff;
padding:0.3rem 0.8rem;
border-radius:15px;
font-size:0.8rem;
font-weight:500;
text-transform:uppercase;
letter-spacing:0.5px;
}
.blog-title{
font-size:1.3rem;
color:var(--text-white);
margin-bottom:1rem;
line-height:1.4;
}
.blog-title a:hover{
color:#FF9500;
}
.blog-excerpt{
color:var(--meta-light);
line-height:1.6;
margin-bottom:1.5rem;
font-size:0.95rem;
}
.blog-meta{
display:flex;
justify-content:space-between;
align-items:center;
font-size:0.9rem;
color:var(--meta-dark);
}
.blog-author{
display:flex;
align-items:center;
gap:0.5rem;
}
.blog-read-more{
color:#FF9500;
font-weight:600;
transition:all 0.3s ease;
}
.blog-read-more:hover{
color:#e55a2b;
}
@media (max-width:768px){
.header-container{
padding:1rem;
}
.main-nav ul{
gap:1rem;
}
.main-nav a{
font-size:0.9rem;
padding:0.4rem 0.8rem;
}
.hero-title{
font-size:2.5rem;
}
.section-title{
font-size:2rem;
}
.serien-grid:not(.serien-grid-intelligent){
grid-template-columns:1fr;
gap:1.5rem;
}
.blog-grid{
grid-template-columns:1fr;
}
.container{
padding:0 1rem;
}
}
@media (max-width:480px){
.hero-title{
font-size:2rem;
}
.hero-cta{
padding:0.8rem 1.5rem;
font-size:1rem;
}
.serie-card,
.blog-content{
padding:1.5rem;
}
}
.hero-background{
will-change:transform;
}
.serie-card,
.blog-card{
will-change:transform;
}
img[loading="lazy"]{
opacity:0;
transition:opacity 0.3s ease-in-out;
}
img[loading="lazy"].lazy-loaded,
img[loading="lazy"]:not([src=""]){
opacity:1;
}
img{
image-rendering:-webkit-optimize-contrast;
image-rendering:optimize-contrast;
image-rendering:crisp-edges;
}
/* ===================================
ZUSÄTZLICHES CSS FÜR PHASE 2 & 3 
=================================== */
.mobile-menu-toggle{
display:none;
flex-direction:column;
background:none;
border:none;
cursor:pointer;
padding:0.75rem;
z-index:1001;
position:relative;
}
.mobile-menu-toggle span{
width:25px;
height:3px;
background:#fff;
margin:3px 0;
transition:0.3s;
border-radius:2px;
}
.mobile-menu-toggle.active span:nth-child(1){
transform:rotate(-45deg) translate(-5px, 6px);
}
.mobile-menu-toggle.active span:nth-child(2){
opacity:0;
}
.mobile-menu-toggle.active span:nth-child(3){
transform:rotate(45deg) translate(-5px, -6px);
}
.mobile-nav{
display:none;
position:absolute;
top:100%;
left:0;
right:0;
background:rgba(0, 0, 0, 0.95);
backdrop-filter:blur(10px);
border-top:1px solid var(--border-color);
z-index:1000;
box-shadow:0 4px 20px rgba(0, 0, 0, 0.3);
}
.mobile-nav.active{
display:block;
}
.mobile-nav-menu{
list-style:none;
padding:1rem 0;
}
.mobile-nav-menu li{
text-align:center;
border-bottom:1px solid rgba(255, 255, 255, 0.1);
}
.mobile-nav-menu a{
display:block;
padding:1rem 2rem;
color:#fff;
font-weight:500;
text-transform:uppercase;
letter-spacing:0.5px;
}
.mobile-nav-menu a:hover{
background:rgba(255, 149, 0, 0.1);
color:#FF9500;
}
.mobile-nav-menu .sub-menu{
display:none;
list-style:none;
padding-left:0;
background:rgba(0, 0, 0, 0.5);
}
.mobile-nav-menu .sub-menu.active{
display:block;
}
.mobile-nav-menu .sub-menu li{
border-bottom:1px solid rgba(255, 255, 255, 0.05);
}
.mobile-nav-menu .sub-menu a{
padding:0.75rem 2rem 0.75rem 3rem;
font-size:0.9rem;
text-transform:none;
}
.mobile-nav-menu .menu-item-has-children{
position:relative;
}
.mobile-nav-menu .menu-item-has-children > a{
display:flex;
justify-content:space-between;
align-items:center;
}
.mobile-nav-menu .menu-item-has-children > a::after{
content:"▼";
font-size:0.8em;
transition:transform 0.3s ease;
}
.mobile-nav-menu .menu-item-has-children.active > a::after{
transform:rotate(180deg);
}
.mobile-nav-menu .sub-menu .sub-menu a{
padding-left:4rem;
}
.search-overlay{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0, 0, 0, 0.95);
backdrop-filter:blur(10px);
z-index:2000;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition:all 0.3s ease;
}
.search-overlay.active{
opacity:1;
visibility:visible;
}
.search-container{
max-width:600px;
width:90%;
position:relative;
}
.search-form{
display:flex;
border-radius:50px;
overflow:hidden;
box-shadow:0 10px 40px rgba(0, 0, 0, 0.3);
}
.search-input{
flex:1;
padding:1.5rem 2rem;
border:none;
font-size:1.2rem;
background:#2a2a2a;
color:#fff; 
outline:none;
border-radius:25px 0 0 25px;
}
.search-submit{
background:#FF9500;
color:#fff;
border:none;
padding:1.5rem 2rem;
font-size:1.2rem;
font-weight:600;
cursor:pointer;
transition:background 0.3s ease;
}
.search-submit:hover{
background:#e55a2b;
}
.search-close{
position:absolute;
top:-50px;
right:0;
background:none;
border:none;
color:#fff;
font-size:2rem;
cursor:pointer;
padding:0.5rem;
}
.main-footer{
background:var(--bg-secondary);
color:var(--meta-light);
padding:4rem 0 1rem;
border-top:1px solid var(--border-color);
}
.footer-container{
max-width:1200px;
margin:0 auto;
padding:0 2rem;
}
.footer-widgets{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
gap:3rem;
margin-bottom:3rem;
}
.footer-widget h3{
color:#FF9500;
margin-bottom:1.5rem;
font-size:1.2rem;
font-weight:600;
}
.footer-widget p{
line-height:1.6;
margin-bottom:1rem;
}
.footer-widget ul{
list-style:none;
}
.footer-widget ul li{
margin-bottom:0.5rem;
}
.footer-widget ul a{
color:#ccc;
transition:color 0.3s ease;
}
.footer-widget ul a:hover{
color:#FF9500;
}
.social-links{
display:flex;
gap:1rem;
margin-top:1rem;
}
.social-links a{
font-size:1.5rem;
transition:transform 0.3s ease;
}
.social-links a:hover{
transform:scale(1.2);
}
.newsletter-form{
display:flex;
margin-top:1rem;
border-radius:25px;
overflow:hidden;
}
.newsletter-form input{
flex:1;
padding:0.8rem 1rem;
border:none;
background:#2a2a2a;
color:#fff;
outline:none;
}
.newsletter-form button{
background:#FF9500;
color:#fff;
border:none;
padding:0.8rem 1.5rem;
font-weight:600;
cursor:pointer;
transition:background 0.3s ease;
}
.newsletter-form button:hover{
background:#e55a2b;
}
.footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
padding-top:2rem;
border-top:1px solid rgba(255, 255, 255, 0.1);
font-size:0.9rem;
}
.footer-legal{
display:flex;
gap:2rem;
}
.footer-legal a{
color:#888;
transition:color 0.3s ease;
}
.footer-legal a:hover{
color:#FF9500;
}
.footer-legal-menu{
display:flex;
gap:2rem;
list-style:none;
margin:0;
padding:0;
}
.footer-legal-menu li{
margin:0;
}
.footer-legal-menu a{
color:#888;
transition:color 0.3s ease;
text-decoration:none;
}
.footer-legal-menu a:hover{
color:#FF9500;
}
.footer-navigation{
width:100%;
}
.footer-menu{
display:flex;
gap:2rem;
list-style:none;
margin:0;
padding:0;
}
.footer-menu li{
margin:0;
}
.footer-menu a{
color:var(--meta-dark, #888);
text-decoration:none;
transition:all 0.3s ease;
padding:0.5rem 0;
border-bottom:2px solid transparent;
font-weight:500;
}
.footer-menu a:hover{
color:var(--accent-color, #FF9500);
border-bottom-color:var(--accent-color, #FF9500);
transform:translateY(-2px);
}
@media (max-width:768px){
.footer-menu{
flex-direction:column;
gap:1rem;
text-align:center;
}
}
.blog-single-header{
background:linear-gradient(135deg, var(--bg-color) 0%, var(--bg-secondary) 100%);
padding:4rem 0;
border-bottom:1px solid var(--border-color);
}
.breadcrumb{
margin-bottom:2rem;
font-size:0.9rem;
}
.breadcrumb a{
color:#ccc;
transition:color 0.3s ease;
}
.breadcrumb a:hover{
color:#FF9500;
}
.breadcrumb span{
margin:0 0.5rem;
color:#666;
}
.post-categories{
margin-bottom:1rem;
}
.post-category{
background:#FF9500;
color:#fff;
padding:0.4rem 1rem;
border-radius:20px;
font-size:0.8rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.5px;
margin-right:0.5rem;
}
.post-title{
font-size:3rem;
color:#fff;
margin-bottom:2rem;
line-height:1.2;
font-weight:bold;
}
.post-meta{
background:var(--code-bg);
border:1px solid var(--border-color);
color:var(--text-color);
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:2rem;
}
.author-info{
display:flex;
align-items:center;
gap:1rem;
}
.author-info img{
border-radius:50%;
border:2px solid #FF9500;
}
.author-details{
display:flex;
flex-direction:column;
}
.author-name{
color:var(--text-color);
font-weight:600;
font-size:1.1rem;
}
.author-role{
color:#ccc;
font-size:0.9rem;
}
.author-email{
color:var(--link-color);
}
code, pre{
background:var(--code-bg);
border:1px solid var(--border-color);
color:var(--text-color);
}
.post-date{
display:flex;
flex-direction:column;
align-items:flex-end;
text-align:right;
}
.post-date time{
color:#fff;
font-weight:500;
}
.read-time{
color:#ccc;
font-size:0.9rem;
}
.blog-single-content{
padding:4rem 0;
background:var(--bg-color);
}
.content-wrapper{
display:grid;
grid-template-columns:1fr 300px;
gap:4rem;
max-width:1200px;
margin:0 auto;
}
.blog-single-main .content-wrapper{
display:grid;
grid-template-columns:1fr 300px;
gap:4rem;
max-width:1200px;
}
.post-content{
background:var(--card-bg);
border-radius:12px;
overflow:hidden;
border:1px solid var(--border-color);
}
.post-featured-image{
margin-bottom:0;
}
.post-featured-image img{
width:100%;
height:300px;
object-fit:cover;
}
.post-reading-time{
text-align:center;
padding:1.5rem 3rem;
background:var(--bg-secondary);
border-bottom:1px solid var(--border-color);
display:flex;
justify-content:center;
align-items:center;
}
.reading-time-text{
display:inline-flex;
align-items:center;
gap:0.5rem;
color:var(--meta-light);
font-size:0.9rem;
font-weight:500;
padding:0.6rem 1.2rem;
background:var(--code-bg);
border-radius:20px;
border:1px solid var(--border-color);
}
.reading-time-text::before{
content:'⏱️';
font-size:1rem;
}
.post-body{
padding:3rem;
color:var(--text-color);
line-height:1.8;
font-size:1.1rem;
}
.post-body h2{
color:#FF9500;
margin:2rem 0 1rem;
font-size:1.8rem;
}
.post-body h3{
color:var(--heading-color);
margin:1.5rem 0 1rem;
font-size:1.4rem;
}
.post-body p{
margin-bottom:1.5rem;
}
.post-body ul, .post-body ol{
margin:1.5rem 0;
padding-left:2rem;
}
.post-body li{
margin-bottom:0.5rem;
}
.post-body code{
background:var(--code-bg);
color:#FF9500;
padding:0.2rem 0.5rem;
border-radius:4px;
font-family:'Courier New', monospace;
font-size:0.9rem;
}
.post-body pre{
background:var(--code-bg);
color:var(--text-color);
padding:1.5rem;
border-radius:8px;
overflow-x:auto;
margin:2rem 0;
border:1px solid rgba(255, 149, 0, 0.2);
}
.post-body pre code{
background:none;
color:inherit;
padding:0;
}
.post-body blockquote{
border-left:4px solid #FF9500;
margin:2rem 0;
padding:1rem 2rem;
background:rgba(255, 149, 0, 0.05);
font-style:italic;
color:var(--meta-light);
}
.post-tags{
padding:2rem 3rem;
border-top:1px solid rgba(255, 255, 255, 0.1);
}
.post-tags h3{
color:#FF9500;
margin-bottom:1rem;
font-size:1.2rem;
}
.tag-list{
display:flex;
gap:0.5rem;
flex-wrap:wrap;
}
.tag-list a{
background:var(--code-bg);
color:var(--meta-color);
padding:0.5rem 1rem;
border-radius:20px;
font-size:0.9rem;
transition:all 0.3s ease;
border:1px solid var(--border-color);
}
.tag-list a:hover{
background:#FF9500;
color:#fff;
border-color:#FF9500;
}
.author-bio{
display:flex;
gap:2rem;
padding:3rem;
background:linear-gradient(135deg, var(--card-bg-hover) 0%, var(--card-bg) 100%);
border-top:1px solid var(--border-color);
}
body.hide-author-bio .author-bio,
body.hide-author-bio .post-content .author-bio,
body.hide-author-bio article .author-bio,
body.hide-author-bio .single-post-wrapper .author-bio,
body.hide-author-bio div.author-bio,
body.hide-author-bio .pp-multiple-authors-wrapper,
body.hide-author-bio .pp-authors-bio,
body.hide-author-bio .pp-author-boxes-wrapper,
body.hide-author-bio .multiple-authors-wrapper,
body.hide-author-bio [class*="author-box"],
body.hide-author-bio [class*="author-bio"],
body.hide-author-bio [class*="pp-author"],
body.hide-author-bio [class*="multiple-author"],
body.hide-author-bio .jfs-author-badge,
body.hide-author-bio div.jfs-author-badge,
body.hide-author-bio [class*="jfs-author"]{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
height:0 !important;
overflow:hidden !important;
margin:0 !important;
padding:0 !important;
max-height:0 !important;
}
.author-avatar img{
border-radius:50%;
border:3px solid #FF9500;
}
.author-info-extended h3{
color:#FF9500;
font-size:1.5rem;
margin-bottom:0.5rem;
}
.author-title{
color:#ccc;
font-size:1rem;
margin-bottom:1rem;
font-weight:500;
}
.author-bio-text{
color:var(--text-color);
line-height:1.6;
margin-bottom:1.5rem;
}
.post-navigation{
display:grid;
grid-template-columns:1fr 1fr;
gap:2rem;
padding:3rem;
border-top:1px solid rgba(255, 255, 255, 0.1);
}
.nav-link{
display:block;
padding:1.5rem;
background:var(--code-bg);
border-radius:8px;
transition:all 0.3s ease;
border:1px solid var(--border-color);
}
.nav-link:hover{
background:#333;
border-color:#FF9500;
transform:translateY(-2px);
}
.nav-direction{
display:block;
color:#FF9500;
font-size:0.9rem;
font-weight:600;
margin-bottom:0.5rem;
}
.nav-title{
display:block;
color:var(--text-color);
font-weight:500;
line-height:1.4;
}
.nav-next{
text-align:right;
}
.related-posts-section{
padding:4rem 0;
background:var(--bg-secondary);
border-top:1px solid var(--border-color);
}
.related-posts-section h2{
text-align:center;
color:#FF9500;
font-size:2.5rem;
margin-bottom:3rem;
}
.related-posts-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:2rem;
}
.related-post-card{
background:var(--card-bg);
border-radius:12px;
overflow:hidden;
border:1px solid var(--border-color);
transition:all 0.3s ease;
}
.related-post-card:hover{
transform:translateY(-5px);
border-color:#FF9500;
box-shadow:0 10px 30px rgba(0, 0, 0, 0.3);
}
.related-post-image{
height:200px;
overflow:hidden;
}
.related-post-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.3s ease;
}
.related-post-card:hover .related-post-image img{
transform:scale(1.05);
}
.related-post-content{
padding:1.5rem;
}
.related-post-meta{
margin-bottom:1rem;
}
.related-post-meta .cat-links a{
background:#FF9500;
color:#fff;
padding:0.3rem 0.8rem;
border-radius:15px;
font-size:0.8rem;
font-weight:500;
}
.related-post-title{
margin-bottom:1rem;
}
.related-post-title a{
color:var(--text-color);
font-size:1.2rem;
line-height:1.4;
transition:color 0.3s ease;
}
.related-post-title a:hover{
color:#FF9500;
}
.related-post-excerpt{
color:var(--meta-light);
line-height:1.6;
margin-bottom:1rem;
font-size:0.95rem;
}
.related-post-author{
color:var(--meta-dark);
font-size:0.9rem;
}
.blog-main{
padding-top:90px;
background:#1a1a1a;
}
.blog-header{
background:linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
padding:4rem 0;
text-align:center;
border-bottom:1px solid rgba(255, 255, 255, 0.1);
}
.blog-page-title{
font-size:3rem;
color:#FF9500;
margin-bottom:1rem;
font-weight:bold;
}
.blog-page-subtitle{
font-size:1.2rem;
color:#ccc;
max-width:600px;
margin:0 auto;
line-height:1.6;
}
.blog-content-area{
padding:4rem 0;
}
.blog-layout{
display:grid;
grid-template-columns:1fr 300px;
gap:4rem;
max-width:1200px;
margin:0 auto;
}
.blog-posts-container{
min-height:400px;
}
.featured-post{
background:#2a2a2a;
border-radius:12px;
overflow:hidden;
margin-bottom:3rem;
border:1px solid rgba(255, 255, 255, 0.1);
transition:all 0.3s ease;
}
.featured-post:hover{
border-color:#FF9500;
box-shadow:0 10px 30px rgba(0, 0, 0, 0.3);
}
.featured-post-image{
height:300px;
overflow:hidden;
}
.featured-post-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.3s ease;
}
.featured-post:hover .featured-post-image img{
transform:scale(1.05);
}
.featured-post-content{
padding:2rem;
}
.featured-post-meta{
display:flex;
align-items:center;
gap:1rem;
margin-bottom:1rem;
}
.featured-post-meta .cat-links a{
background:#FF9500;
color:#fff;
padding:0.4rem 1rem;
border-radius:20px;
font-size:0.8rem;
font-weight:600;
text-transform:uppercase;
}
.featured-badge{
background:linear-gradient(45deg, #FF9500, #e55a2b);
color:#fff;
padding:0.4rem 1rem;
border-radius:20px;
font-size:0.8rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.5px;
}
.featured-post-title{
margin-bottom:1rem;
}
.featured-post-title a{
color:#fff;
font-size:2rem;
line-height:1.3;
font-weight:600;
transition:color 0.3s ease;
}
.featured-post-title a:hover{
color:#FF9500;
}
.featured-post-excerpt{
color:#ccc;
line-height:1.6;
margin-bottom:2rem;
font-size:1.05rem;
}
.featured-post-bottom{
display:flex;
justify-content:space-between;
align-items:center;
}
.post-author-info{
display:flex;
align-items:center;
gap:1rem;
}
.post-author-info img{
border-radius:50%;
border:2px solid #FF9500;
}
.post-author-info div{
display:flex;
flex-direction:column;
}
.post-author-info .author-name{
color:#fff;
font-weight:600;
}
.post-author-info .post-date{
color:#ccc;
font-size:0.9rem;
}
.read-more-btn{
background:#FF9500;
color:#fff;
padding:0.8rem 1.5rem;
border-radius:6px;
font-weight:600;
transition:all 0.3s ease;
text-transform:uppercase;
letter-spacing:0.5px;
}
.read-more-btn:hover{
background:#e55a2b;
transform:translateY(-2px);
}
.blog-posts-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
gap:2rem;
margin-bottom:3rem;
}
.blog-post-card,
.featured-post{
background:var(--card-bg, #2a2a2a);
border-radius:12px;
overflow:hidden;
border:1px solid var(--border-color, rgba(255, 255, 255, 0.1));
transition:all 0.3s ease;
}
.blog-post-card:hover,
.featured-post:hover{
transform:translateY(-5px);
border-color:#FF9500;
box-shadow:0 10px 30px rgba(0, 0, 0, 0.3);
}
.blog-post-image{
height:200px;
overflow:hidden;
}
.blog-post-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.3s ease;
}
.blog-post-card:hover .blog-post-image img{
transform:scale(1.05);
}
.blog-post-content{
padding:1.5rem;
}
.blog-post-meta{
margin-bottom:1rem;
}
.blog-post-meta .cat-links a{
background:#FF9500;
color:#fff;
padding:0.3rem 0.8rem;
border-radius:15px;
font-size:0.8rem;
font-weight:500;
text-transform:uppercase;
}
.blog-post-title{
margin-bottom:1rem;
}
.blog-post-title a{
color:#FF9500 !important;
font-size:1.2rem;
line-height:1.4;
font-weight:500;
transition:color 0.3s ease;
}
.blog-post-title a:hover{
color:#FF9500;
}
.blog-post-excerpt{
color:#ccc;
line-height:1.6;
margin-bottom:1.5rem;
font-size:0.95rem;
}
.blog-post-footer{
display:flex;
justify-content:space-between;
align-items:center;
font-size:0.9rem;
}
.post-author{
color:#888;
}
.post-date{
color:#666;
}
.blog-pagination{
text-align:center;
margin:3rem 0;
}
.blog-pagination .page-numbers{
display:inline-block;
padding:0.8rem 1.2rem;
margin:0 0.3rem;
background:#2a2a2a;
color:#fff;
border-radius:6px;
text-decoration:none;
transition:all 0.3s ease;
border:1px solid rgba(255, 255, 255, 0.1);
}
.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current{
background:#FF9500;
border-color:#FF9500;
transform:translateY(-2px);
}
.blog-pagination .page-numbers.prev,
.blog-pagination .page-numbers.next{
font-weight:600;
}
.blog-sidebar{
background:var(--card-bg);
border-radius:12px;
padding:0;
border:1px solid var(--border-color);
height:fit-content;
position:sticky;
top:110px;
}
.sidebar-widgets{
padding:2rem;
}
.widget{
margin-bottom:3rem;
padding-bottom:2rem;
border-bottom:1px solid rgba(255, 255, 255, 0.1);
}
.widget:last-child{
margin-bottom:0;
padding-bottom:0;
border-bottom:none;
}
.widget-title{
color:#FF9500;
font-size:1.3rem;
font-weight:600;
margin-bottom:1.5rem;
padding-bottom:0.5rem;
border-bottom:2px solid #FF9500;
}
.sidebar-search-form{
display:flex;
border-radius:25px;
overflow:hidden;
border:1px solid rgba(255, 255, 255, 0.2);
}
.sidebar-search-input{
flex:1;
padding:0.8rem 1rem;
border:none;
background:var(--code-bg);
color:var(--text-color);
outline:none;
font-size:0.95rem;
}
.sidebar-search-input::placeholder{
color:var(--meta-dark);
}
.sidebar-search-submit{
background:#FF9500;
color:#fff;
border:none;
padding:0.8rem 1rem;
cursor:pointer;
transition:background 0.3s ease;
font-size:1rem;
}
.sidebar-search-submit:hover{
background:#e55a2b;
}
.categories-list{
list-style:none;
}
.category-item{
margin-bottom:0.8rem;
}
.category-link{
display:flex;
justify-content:space-between;
align-items:center;
padding:0.6rem 1rem;
background:var(--code-bg);
border-radius:6px;
transition:all 0.3s ease;
border:1px solid var(--border-color);
}
.category-link:hover{
background:var(--card-bg-hover);
border-color:#FF9500;
}
.category-name{
color:var(--text-color);
font-weight:500;
}
.category-count{
color:#FF9500;
font-weight:600;
font-size:0.9rem;
}
.recent-posts-list{
display:flex;
flex-direction:column;
gap:1rem;
}
.recent-post-item{
display:flex;
gap:1rem;
padding:1rem;
background:var(--code-bg);
border-radius:8px;
transition:all 0.3s ease;
border:1px solid var(--border-color);
}
.recent-post-item:hover{
background:var(--card-bg-hover);
border-color:#FF9500;
}
.recent-post-thumb{
flex-shrink:0;
}
.recent-post-thumb img{
border-radius:6px;
width:60px;
height:60px;
object-fit:cover;
}
.recent-post-info{
flex:1;
min-width:0;
}
.recent-post-title{
margin-bottom:0.5rem;
}
.recent-post-title a{
color:var(--text-color);
font-size:0.95rem;
line-height:1.3;
transition:color 0.3s ease;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.recent-post-title a:hover{
color:#FF9500;
}
.recent-post-meta{
font-size:0.8rem;
color:#888;
}
.recent-post-author{
margin-right:0.5rem;
}
.tags-cloud{
display:flex;
flex-wrap:wrap;
gap:0.5rem;
}
.tag-link{
padding:0.4rem 0.8rem;
background:var(--code-bg);
color:var(--meta-light);
border-radius:15px;
font-size:0.85rem;
transition:all 0.3s ease;
border:1px solid var(--border-color);
}
.tag-link:hover{
background:#FF9500;
color:#fff;
border-color:#FF9500;
transform:translateY(-1px);
}
.newsletter-signup-form{
display:flex;
flex-direction:column;
gap:1rem;
margin:1rem 0;
}
.newsletter-email{
padding:0.8rem 1rem;
border:1px solid var(--border-color);
border-radius:6px;
background:var(--code-bg);
color:var(--text-color);
outline:none;
font-size:0.95rem;
}
.newsletter-email::placeholder{
color:var(--meta-dark);
}
.newsletter-submit{
background:#FF9500;
color:#fff;
border:none;
padding:0.8rem 1rem;
border-radius:6px;
font-weight:600;
cursor:pointer;
transition:all 0.3s ease;
text-transform:uppercase;
letter-spacing:0.5px;
}
.newsletter-submit:hover{
background:#e55a2b;
transform:translateY(-2px);
}
.newsletter-note{
font-size:0.8rem;
color:#888;
line-height:1.4;
margin-top:0.5rem;
}
.featured-author-card{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
background:linear-gradient(135deg, #333 0%, #2a2a2a 100%);
padding:1.5rem;
border-radius:8px;
border:1px solid rgba(255, 255, 255, 0.1);
}
.featured-author-avatar{
margin-bottom:1rem;
}
.featured-author-avatar img{
width:80px;
height:80px;
border-radius:50%;
border:3px solid #FF9500;
}
.featured-author-info h4{
color:#FF9500;
font-size:1.2rem;
margin-bottom:0.5rem;
}
.author-role{
color:#ccc;
font-size:0.9rem;
margin-bottom:1rem;
font-weight:500;
}
.author-description{
color:#fff;
line-height:1.5;
margin-bottom:1.5rem;
font-size:0.9rem;
}
.author-link{
color:#FF9500;
font-weight:600;
transition:color 0.3s ease;
text-transform:uppercase;
letter-spacing:0.5px;
font-size:0.9rem;
}
.author-link:hover{
color:#e55a2b;
}
.team-main{
padding-top:90px;
background:#1a1a1a;
}
.team-header{
background:linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
padding:4rem 0;
text-align:center;
border-bottom:1px solid rgba(255, 255, 255, 0.1);
}
.team-page-title{
font-size:3rem;
color:#FF9500 !important;
margin-bottom:1rem;
font-weight:bold;
}
.team-page-subtitle{
font-size:1.2rem;
color:#ccc;
max-width:600px;
margin:0 auto;
line-height:1.6;
}
.team-content{
padding:4rem 0;
}
.team-intro,
.team-philosophy{
max-width:900px;
margin:0 auto 4rem auto;
padding:2rem 2.5rem;
background:linear-gradient(135deg, rgba(255, 149, 0, 0.05) 0%, rgba(255, 149, 0, 0.02) 100%);
border-left:4px solid var(--accent-orange);
border-radius:8px;
line-height:1.8;
font-size:1.1rem;
}
.team-intro,
.team-philosophy{
text-align:center;
border-left:none;
border-top:4px solid var(--accent-orange);
font-size:1.3rem;
font-weight:600;
color:var(--accent-orange);
}
.team-philosophy{
margin:4rem auto 0 auto;
}
.team-intro p,
.team-philosophy p{
margin-bottom:1rem;
color:var(--accent-orange);
}
.team-intro p:last-child,
.team-philosophy p:last-child{
margin-bottom:0;
}
.team-intro strong,
.team-philosophy strong{
color:var(--accent-orange);
}
.team-department-section{
margin:3rem 0 2rem 0;
}
.team-department-title{
font-size:2.5rem;
font-weight:700;
color:var(--accent-orange);
margin:0;
padding-bottom:1rem;
border-bottom:3px solid var(--accent-orange);
text-transform:uppercase;
letter-spacing:2px;
}
.team-department-section:first-child{
margin-top:0;
}
.team-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
gap:3rem;
margin-bottom:4rem;
}
.team-member{
perspective:1000px;
}
.member-card{
background:linear-gradient(135deg, #2a2a2a 0%, #333 100%);
border-radius:20px;
overflow:hidden;
border:1px solid rgba(255, 255, 255, 0.1);
transition:all 0.3s ease;
position:relative;
}
.member-card:hover{
transform:translateY(-10px) rotateX(5deg);
border-color:#FF9500;
box-shadow:0 20px 40px rgba(0, 0, 0, 0.3);
}
.member-image{
position:relative;
height:300px;
overflow:hidden;
}
.member-image-link{
display:block;
width:100%;
height:100%;
}
.member-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.3s ease;
cursor:pointer;
}
.member-card:hover .member-image img{
transform:scale(1.1);
}
.member-overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0, 0, 0, 0.7);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transition:opacity 0.3s ease;
}
.member-card:hover .member-overlay{
opacity:1;
}
.social-links{
display:flex;
gap:1rem;
}
.social-links a{
font-size:1.5rem;
padding:0.5rem;
background:rgba(255, 149, 0, 0.9);
border-radius:50%;
transition:all 0.3s ease;
}
.social-links a:hover{
background:#FF9500;
transform:scale(1.2);
}
.member-info{
padding:2rem;
}
.member-name{
color:#FF9500;
font-size:1.8rem;
font-weight:600;
margin-bottom:0.5rem;
}
.member-role{
color:#ccc;
font-size:1.1rem;
margin-bottom:0.5rem;
font-weight:500;
}
.member-speciality{
color:#fff;
font-size:1rem;
margin-bottom:1.5rem;
font-weight:600;
opacity:0.8;
}
.member-description{
color:#fff;
line-height:1.6;
margin-bottom:1.5rem;
font-size:0.95rem;
}
.member-stats{
display:flex;
justify-content:space-around;
margin:1.5rem 0;
padding:1rem;
background:rgba(255, 149, 0, 0.1);
border-radius:8px;
}
.stat{
text-align:center;
}
.stat-number{
display:block;
color:#FF9500;
font-size:1.5rem;
font-weight:bold;
}
.stat-label{
color:#ccc;
font-size:0.8rem;
text-transform:uppercase;
letter-spacing:0.5px;
}
.member-expertise{
display:flex;
flex-wrap:wrap;
gap:0.5rem;
margin:1.5rem 0;
}
.expertise-tag{
background:#1a1a1a;
color:#FF9500;
padding:0.4rem 0.8rem;
border-radius:15px;
font-size:0.8rem;
font-weight:500;
border:1px solid rgba(255, 149, 0, 0.3);
}
.member-articles-link{
display:inline-flex;
align-items:center;
background:#FF9500;
color:#fff;
padding:0.8rem 1.5rem;
border-radius:6px;
font-weight:600;
transition:all 0.3s ease;
text-transform:uppercase;
letter-spacing:0.5px;
font-size:0.9rem;
}
.member-articles-link:hover{
background:#e55a2b;
transform:translateY(-2px);
}
.team-stats-section{
text-align:center;
padding:4rem 0;
border-top:1px solid rgba(255, 255, 255, 0.1);
border-bottom:1px solid rgba(255, 255, 255, 0.1);
}
.team-stats-section h2{
color:#FF9500;
font-size:2.5rem;
margin-bottom:3rem;
font-weight:bold;
}
.team-stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
gap:2rem;
}
.team-stat{
text-align:center;
padding:2rem;
background:linear-gradient(135deg, #2a2a2a 0%, #333 100%);
border-radius:12px;
border:1px solid rgba(255, 255, 255, 0.1);
transition:all 0.3s ease;
}
.team-stat:hover{
transform:translateY(-5px);
border-color:#FF9500;
box-shadow:0 10px 30px rgba(0, 0, 0, 0.3);
}
.stat-number-large{
display:block;
color:#FF9500;
font-size:3rem;
font-weight:bold;
margin-bottom:0.5rem;
}
.stat-label-large{
color:#fff;
font-size:1.1rem;
font-weight:500;
}
.join-team-section{
text-align:center;
padding:4rem 0;
}
.join-team-section h2{
color:#FF9500;
font-size:2.5rem;
margin-bottom:1rem;
font-weight:bold;
}
.join-team-section p{
color:#ccc;
font-size:1.2rem;
max-width:600px;
margin:0 auto 2rem;
line-height:1.6;
}
.join-team-btn{
display:inline-flex;
align-items:center;
background:linear-gradient(45deg, #FF9500, #e55a2b);
color:#fff;
padding:1.2rem 2.5rem;
border-radius:8px;
font-size:1.1rem;
font-weight:600;
transition:all 0.3s ease;
text-transform:uppercase;
letter-spacing:1px;
box-shadow:0 4px 15px rgba(255, 149, 0, 0.3);
}
.join-team-btn:hover{
transform:translateY(-3px);
box-shadow:0 8px 25px rgba(255, 149, 0, 0.4);
}
.category-main{
padding-top:90px;
background:#1a1a1a;
}
.category-header{
background:linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
padding:4rem 0;
border-bottom:1px solid rgba(255, 255, 255, 0.1);
}
.category-info{
text-align:center;
max-width:800px;
margin:0 auto;
}
.category-icon{
font-size:4rem;
margin-bottom:1rem;
}
.category-title{
color:#FF9500;
font-size:3rem;
margin-bottom:1rem;
font-weight:bold;
}
.category-description{
color:#ccc;
font-size:1.2rem;
line-height:1.6;
margin-bottom:2rem;
}
.category-meta{
display:flex;
justify-content:center;
gap:2rem;
font-size:1rem;
color:#888;
}
.category-count{
font-weight:600;
color:#FF9500;
}
.category-author{
font-weight:500;
}
.category-content{
padding:4rem 0;
}
.category-layout{
display:grid;
grid-template-columns:1fr 300px;
gap:4rem;
max-width:1400px;
margin:0 auto;
width:95%;
}
.category-posts{
min-height:400px;
}
.category-featured-post{
background:#2a2a2a;
border-radius:12px;
overflow:hidden;
margin-bottom:3rem;
border:1px solid rgba(255, 255, 255, 0.1);
transition:all 0.3s ease;
}
.category-featured-post:hover{
border-color:#FF9500;
box-shadow:0 10px 30px rgba(0, 0, 0, 0.3);
}
.category-featured-post .featured-post-image{
height:300px;
overflow:hidden;
}
.category-featured-post .featured-post-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.3s ease;
}
.category-featured-post:hover .featured-post-image img{
transform:scale(1.05);
}
.category-featured-post .featured-post-content{
padding:2rem;
}
.category-featured-post .featured-post-meta{
display:flex;
align-items:center;
gap:1rem;
margin-bottom:1rem;
}
.category-featured-post .featured-badge{
background:linear-gradient(45deg, #FF9500, #e55a2b);
color:#fff;
padding:0.4rem 1rem;
border-radius:20px;
font-size:0.8rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.5px;
}
.category-featured-post .post-date{
color:#ccc;
font-size:0.9rem;
}
.category-featured-post .featured-post-title{
margin-bottom:1rem;
}
.category-featured-post .featured-post-title a{
color:#fff;
font-size:2rem;
line-height:1.3;
font-weight:600;
transition:color 0.3s ease;
}
.category-featured-post .featured-post-title a:hover{
color:#FF9500;
}
.category-featured-post .featured-post-excerpt{
color:#ccc;
line-height:1.6;
margin-bottom:2rem;
font-size:1.05rem;
}
.category-featured-post .featured-post-bottom{
display:flex;
justify-content:space-between;
align-items:center;
}
.category-featured-post .post-author-info{
display:flex;
align-items:center;
gap:1rem;
}
.category-featured-post .post-author-info img{
border-radius:50%;
border:2px solid #FF9500;
}
.category-featured-post .post-author-info div{
display:flex;
flex-direction:column;
}
.category-featured-post .author-name{
color:#fff;
font-weight:600;
}
.category-featured-post .reading-time{
color:#ccc;
font-size:0.9rem;
}
.category-posts-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:2rem;
margin-bottom:3rem;
}
.category-post-card{
background:#2a2a2a;
border-radius:12px;
overflow:hidden;
border:1px solid rgba(255, 255, 255, 0.1);
transition:all 0.3s ease;
}
.category-post-card:hover{
transform:translateY(-5px);
border-color:#FF9500;
box-shadow:0 10px 30px rgba(0, 0, 0, 0.3);
}
.category-post-image{
height:200px;
overflow:hidden;
}
.category-post-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.3s ease;
}
.category-post-card:hover .category-post-image img{
transform:scale(1.05);
}
.category-post-content{
padding:1.5rem;
}
.category-post-meta{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:1rem;
font-size:0.9rem;
color:#888;
}
.category-post-title{
margin-bottom:1rem;
}
.category-post-title a{
color:#fff;
font-size:1.2rem;
line-height:1.4;
font-weight:500;
transition:color 0.3s ease;
}
.category-post-title a:hover{
color:#FF9500;
}
.category-post-excerpt{
color:#ccc;
line-height:1.6;
margin-bottom:1.5rem;
font-size:0.95rem;
}
.category-post-footer{
display:flex;
justify-content:space-between;
align-items:center;
}
.category-post-footer .post-author{
display:flex;
align-items:center;
gap:0.5rem;
font-size:0.9rem;
color:#888;
}
.category-post-footer .post-author img{
border-radius:50%;
border:1px solid #FF9500;
}
.post-read-more{
color:#FF9500;
font-weight:600;
transition:color 0.3s ease;
font-size:0.9rem;
}
.post-read-more:hover{
color:#e55a2b;
}
.category-pagination{
text-align:center;
margin:3rem 0;
}
.category-pagination .page-numbers{
display:inline-block;
padding:0.8rem 1.2rem;
margin:0 0.3rem;
background:#2a2a2a;
color:#fff;
border-radius:6px;
text-decoration:none;
transition:all 0.3s ease;
border:1px solid rgba(255, 255, 255, 0.1);
}
.category-pagination .page-numbers:hover,
.category-pagination .page-numbers.current{
background:#FF9500;
border-color:#FF9500;
transform:translateY(-2px);
}
.category-sidebar{
background:#2a2a2a;
border-radius:12px;
padding:2rem;
border:1px solid rgba(255, 255, 255, 0.1);
height:fit-content;
position:sticky;
top:110px;
}
.related-categories-widget{
margin-bottom:3rem;
padding-bottom:2rem;
border-bottom:1px solid rgba(255, 255, 255, 0.1);
}
.related-categories{
display:flex;
flex-direction:column;
gap:0.8rem;
}
.related-category{
display:flex;
align-items:center;
gap:1rem;
padding:0.8rem 1rem;
background:#1a1a1a;
border-radius:8px;
transition:all 0.3s ease;
border:1px solid rgba(255, 255, 255, 0.1);
}
.related-category:hover{
background:#333;
border-color:#FF9500;
transform:translateX(5px);
}
.related-category .cat-icon{
font-size:1.5rem;
}
.related-category .cat-name{
flex:1;
color:#fff;
font-weight:500;
}
.related-category .cat-count{
color:#FF9500;
font-weight:600;
font-size:0.9rem;
}
.no-posts{
text-align:center;
padding:4rem 2rem;
background:#2a2a2a;
border-radius:12px;
border:1px solid rgba(255, 255, 255, 0.1);
}
.no-posts h2{
color:#FF9500;
font-size:2rem;
margin-bottom:1rem;
}
.no-posts p{
color:#ccc;
font-size:1.1rem;
margin-bottom:2rem;
}
.back-to-blog-btn{
display:inline-flex;
align-items:center;
background:#FF9500;
color:#fff;
padding:1rem 2rem;
border-radius:6px;
font-weight:600;
transition:all 0.3s ease;
text-transform:uppercase;
letter-spacing:0.5px;
}
.back-to-blog-btn:hover{
background:#e55a2b;
transform:translateY(-2px);
}
@media (max-width:1024px){
.content-wrapper,
.blog-layout,
.category-layout{
grid-template-columns:1fr;
gap:2rem;
}
.blog-sidebar,
.category-sidebar{
position:static !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
order:2 !important;
}
.team-grid{
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:2rem;
}
}
@media (max-width:768px){
.main-nav{
display:none;
}
.mobile-menu-toggle{
display:flex;
}
.search-toggle{
order:2;
margin-left:1rem;
margin-right:0;
}
.search-icon{
padding:0.6rem;
}
.search-icon::before{
width:16px;
height:16px;
}
.search-icon::after{
width:6px;
right:5px;
bottom:5px;
}
.header-container{
justify-content:space-between;
padding:0.5rem 1rem;
align-items:center;
}
.logo{
order:-1;
margin-right:auto;
padding-left:0.5rem;
font-size:1.2rem;
justify-self:flex-start;
}
.logo img, .site-logo img{
height:40px;
max-height:45px;
}
.mobile-menu-toggle{
order:1;
margin-left:auto;
}
.post-title{
font-size:2rem;
}
.post-meta{
flex-direction:column;
align-items:flex-start;
gap:1rem;
}
.post-date{
align-items:flex-start;
text-align:left;
}
.author-bio{
flex-direction:column;
text-align:center;
}
.post-navigation{
grid-template-columns:1fr;
gap:1rem;
}
.nav-next{
text-align:left;
}
.featured-post-title a{
font-size:1.5rem;
}
.blog-posts-grid,
.category-posts-grid{
grid-template-columns:1fr;
}
.team-page-title,
.blog-page-title,
.category-title{
font-size:2rem;
}
.team-stats-grid{
grid-template-columns:repeat(2, 1fr);
gap:1rem;
}
.stat-number-large{
font-size:2rem;
}
.footer-widgets{
grid-template-columns:1fr;
gap:2rem;
}
.footer-bottom{
flex-direction:column;
gap:1rem;
text-align:center;
}
}
@media (max-width:480px){
.container{
padding:0 1rem;
}
.hero-title{
font-size:1.8rem;
}
.section-title{
font-size:1.8rem;
}
.post-title{
font-size:1.5rem;
}
.member-card{
border-radius:12px;
}
.member-info{
padding:1.5rem;
}
.member-stats{
flex-direction:column;
gap:1rem;
}
.team-stats-grid{
grid-template-columns:1fr;
}
.search-container{
width:95%;
}
.search-input,
.search-submit{
padding:1rem 1.5rem;
font-size:1rem;
}
}
.hero-background,
.featured-post-image img,
.blog-post-image img,
.category-post-image img,
.related-post-image img,
.member-image img{
will-change:transform;
}
.serie-card,
.blog-card,
.blog-post-card,
.category-post-card,
.related-post-card,
.member-card,
.team-stat{
will-change:transform;
}
@media (prefers-reduced-motion:reduce){
*,
*::before,
*::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
scroll-behavior:auto !important;
}
}
@media print{
.main-header,
.main-footer,
.blog-sidebar,
.category-sidebar,
.search-overlay,
.mobile-nav{
display:none !important;
}
body{
background-color:var(--bg-color);
color:var(--text-color);
transition:all 0.3s ease; 
}
h1, h2, h3, h4, h5, h6{
color:#FF9500 !important;
}
.post-content,
.blog-single-content{
background:var(--card-bg) !important;
box-shadow:0 4px 20px rgba(0, 0, 0, 0.3) !important;
border:1px solid var(--border-color) !important;
}
}
.theme-switcher{
position:fixed;
top:20px;
right:20px;
background:rgba(26, 26, 26, 0.9);
border:2px solid rgba(255, 255, 255, 0.2);
border-radius:50px;
padding:10px;
display:flex;
gap:5px;
box-shadow:0 4px 15px rgba(0, 0, 0, 0.3);
backdrop-filter:blur(10px);
z-index:9999;
}
.theme-btn{
width:30px;
height:30px;
border-radius:50%;
border:2px solid transparent;
cursor:pointer;
transition:all 0.2s ease;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
}
.theme-btn:hover{
transform:scale(1.1);
border-color:var(--accent-color);
}
/* ===================================
SEARCH RESULTS PAGE STYLES
=================================== */
.search-results-header{
text-align:center;
margin-bottom:3rem;
padding:2rem 0;
border-bottom:1px solid rgba(255, 255, 255, 0.1);
}
.search-title{
font-size:2.5rem;
font-weight:700;
margin-bottom:1rem;
color:var(--primary-color);
}
.search-query{
color:#FF9500;
font-style:italic;
}
.search-count{
font-size:1.1rem;
color:var(--meta-dark);
margin:0;
}
.search-results-list{
display:flex;
flex-direction:column;
gap:2rem;
}
.search-result-item{
background:var(--card-bg);
border-radius:12px;
padding:2rem;
box-shadow:0 4px 20px rgba(0, 0, 0, 0.1);
transition:all 0.3s ease;
border:1px solid rgba(255, 255, 255, 0.1);
}
.search-result-item:hover{
transform:translateY(-2px);
box-shadow:0 8px 30px rgba(255, 149, 0, 0.15);
border-color:rgba(255, 149, 0, 0.3);
}
.search-result-title{
font-size:1.5rem;
font-weight:600;
margin-bottom:0.5rem;
}
.search-result-title a{
color:var(--primary-color);
text-decoration:none;
transition:color 0.3s ease;
}
.search-result-title a:hover{
color:#FF9500;
}
.search-result-title mark{
background:rgba(255, 149, 0, 0.2);
color:#FF9500;
padding:0.2em 0.4em;
border-radius:4px;
}
.search-result-meta{
display:flex;
gap:1rem;
align-items:center;
margin-bottom:1rem;
font-size:0.9rem;
color:var(--meta-dark);
}
.search-result-meta > *{
position:relative;
}
.search-result-meta > *:not(:last-child)::after{
content:"•";
position:absolute;
right:-0.6rem;
color:rgba(255, 255, 255, 0.3);
}
.search-result-type{
background:rgba(255, 149, 0, 0.1);
color:#FF9500;
padding:0.2rem 0.8rem;
border-radius:12px;
font-size:0.8rem;
font-weight:500;
}
.search-result-excerpt{
font-size:1.1rem;
line-height:1.6;
margin-bottom:1.5rem;
color:var(--text-light);
}
.search-result-excerpt mark{
background:rgba(255, 149, 0, 0.2);
color:#FF9500;
padding:0.2em 0.4em;
border-radius:4px;
}
.search-result-link{
color:#FF9500;
text-decoration:none;
font-weight:500;
transition:all 0.3s ease;
display:inline-flex;
align-items:center;
gap:0.5rem;
}
.search-result-link:hover{
color:#e55a2b;
transform:translateX(5px);
}
.no-search-results{
text-align:center;
padding:4rem 2rem;
}
.no-search-results h2{
font-size:2rem;
color:var(--primary-color);
margin-bottom:1rem;
}
.no-search-results p{
font-size:1.1rem;
color:var(--text-light);
margin-bottom:2rem;
}
.search-suggestions{
margin:3rem 0;
padding:2rem;
background:var(--card-bg);
border-radius:12px;
border:1px solid rgba(255, 255, 255, 0.1);
}
.search-suggestions h3{
color:#FF9500;
margin-bottom:1rem;
}
.search-suggestions ul{
list-style:none;
padding:0;
}
.search-suggestions li{
padding:0.5rem 0;
color:var(--text-light);
}
.search-suggestions li::before{
content:"→";
color:#FF9500;
margin-right:0.5rem;
}
.alternative-search{
margin:3rem 0;
padding:2rem;
background:var(--card-bg);
border-radius:12px;
border:1px solid rgba(255, 149, 0, 0.2);
}
.alternative-search h3{
color:#FF9500;
margin-bottom:1rem;
}
.recent-posts-search{
margin:3rem 0;
padding:2rem;
background:var(--card-bg);
border-radius:12px;
border:1px solid rgba(255, 255, 255, 0.1);
}
.recent-posts-search h3{
color:#FF9500;
margin-bottom:1rem;
}
.recent-posts-list{
list-style:none;
padding:0;
}
.recent-posts-list li{
padding:0.5rem 0;
border-bottom:1px solid rgba(255, 255, 255, 0.1);
}
.recent-posts-list li:last-child{
border-bottom:none;
}
.recent-posts-list a{
color:var(--text-light);
text-decoration:none;
transition:color 0.3s ease;
}
.recent-posts-list a:hover{
color:#FF9500;
}
.theme-btn.active{
border-color:var(--accent-color);
box-shadow:0 0 0 2px var(--accent-color);
}
.theme-light{ background:#ffffff; color:#333; }
.theme-dark{ background:#1a1a1a; color:#e4e4e4; }
.theme-darkblue{ background:#0f0f0f; color:#4fc3f7; }
.theme-blue{ background:#f0f4f8; color:#2d3748; }
.theme-green{ background:#f0fff4; color:#22543d; }
.theme-sepia{ background:#f7f3e9; color:#5d4e37; }
@media (max-width:768px){
.theme-switcher{
position:relative;
top:auto;
right:auto;
margin:20px auto;
justify-content:center;
}
}
.serien-grid-intelligent{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:2rem;
margin:2rem 0;
position:relative;
}
.serie-card{
position:relative;
background:var(--card-bg, #2a2a2a);
border-radius:12px;
padding:2rem;
transition:all 0.3s ease;
border:1px solid var(--border-color, #404040);
min-height:200px;
display:flex;
flex-direction:column;
justify-content:center;
}
.serie-card:hover{
transform:translateY(-4px);
box-shadow:0 8px 25px rgba(0, 0, 0, 0.2);
border-color:var(--accent-color, #4a90e2);
}
.serie-card-link{
display:block;
color:inherit;
text-decoration:none;
height:100%;
width:100%;
display:flex;
flex-direction:column;
justify-content:center;
}
.serie-card-link:hover{
color:inherit;
text-decoration:none;
}
.serie-card-link:focus{
outline:2px solid var(--accent-color, #4a90e2);
outline-offset:2px;
border-radius:12px;
}
.serie-icon{
font-size:2.5rem;
margin-bottom:1rem;
display:block;
line-height:1;
}
.serie-card-align-left{
text-align:left !important;
}
.serie-card-align-left .serie-icon{
text-align:left;
margin-right:auto;
}
.serie-card-align-center{
text-align:center !important;
}
.serie-card-align-center .serie-icon{
text-align:center;
margin:0 auto 1rem auto;
}
.serie-card-align-right{
text-align:right !important;
}
.serie-card-align-right .serie-icon{
text-align:right;
margin-left:auto;
}
.serien-grid-intelligent[data-tiles-count="4"]{
grid-template-columns:repeat(3, 1fr);
grid-template-rows:auto auto;
max-width:1200px;
margin:2rem auto;
}
.serien-grid-intelligent[data-tiles-count="4"] .grid-position-0{
grid-column:1;
grid-row:1;
}
.serien-grid-intelligent[data-tiles-count="4"] .grid-position-1{
grid-column:2;
grid-row:1;
}
.serien-grid-intelligent[data-tiles-count="4"] .grid-position-2{
grid-column:3;
grid-row:1;
}
.serien-grid-intelligent[data-tiles-count="4"] .grid-position-3{
grid-column:1 / 4;
grid-row:2;
max-width:400px;
justify-self:center;
}
.serien-grid-intelligent[data-tiles-count="5"]{
grid-template-columns:repeat(6, 1fr);
grid-template-rows:auto auto;
max-width:1200px;
margin:2rem auto;
}
.serien-grid-intelligent[data-tiles-count="5"] .grid-position-0{
grid-column:1 / 3;
grid-row:1;
}
.serien-grid-intelligent[data-tiles-count="5"] .grid-position-1{
grid-column:3 / 5;
grid-row:1;
}
.serien-grid-intelligent[data-tiles-count="5"] .grid-position-2{
grid-column:5 / 7;
grid-row:1;
}
.serien-grid-intelligent[data-tiles-count="5"] .grid-position-3{
grid-column:2 / 4;
grid-row:2;
}
.serien-grid-intelligent[data-tiles-count="5"] .grid-position-4{
grid-column:4 / 6;
grid-row:2;
}
.serien-grid-intelligent[data-tiles-count="6"]{
grid-template-columns:repeat(3, 1fr);
grid-template-rows:auto auto;
}
.serien-grid-intelligent[data-tiles-count="1"]{
grid-template-columns:1fr;
max-width:400px;
margin:2rem auto;
}
.serien-grid-intelligent[data-tiles-count="2"]{
grid-template-columns:repeat(2, 1fr);
max-width:800px;
margin:2rem auto;
}
.serien-grid-intelligent[data-tiles-count="3"]{
grid-template-columns:repeat(3, 1fr);
}
.tile-centered-solo{
justify-self:center;
}
.tile-second-row{
}
.tile-align-left{
justify-self:start;
}
.tile-align-center{
justify-self:center;
}
.tile-align-right{
justify-self:end;
}
.serie-title{
font-size:1.5rem;
font-weight:600;
margin:0 0 1rem 0;
color:var(--heading-color, #ffffff);
line-height:1.3;
}
.serie-description{
font-size:1rem;
line-height:1.6;
color:var(--text-color-secondary, #b3b3b3);
margin:0;
flex-grow:1;
}
.serie-card[style*="background-image"]{
color:#ffffff;
position:relative;
overflow:hidden;
}
.serie-card[style*="background-image"]::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(135deg, rgba(0,0,0,0.4), rgba(0,0,0,0.6));
z-index:1;
}
.serie-card[style*="background-image"] .serie-card-link,
.serie-card[style*="background-image"] .serie-icon,
.serie-card[style*="background-image"] .serie-title,
.serie-card[style*="background-image"] .serie-description{
position:relative;
z-index:2;
}
.serie-card[style*="background-image"] .serie-icon{
background:rgba(255, 255, 255, 0.9);
color:#333;
border-radius:50%;
width:60px;
height:60px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:1.8rem;
margin-bottom:1rem;
box-shadow:0 2px 10px rgba(0, 0, 0, 0.3);
}
.serie-card[style*="background-image"] .serie-title{
color:#ffffff;
text-shadow:0 2px 4px rgba(0, 0, 0, 0.7);
font-weight:700;
}
.serie-card[style*="background-image"] .serie-description{
color:#f0f0f0;
text-shadow:0 1px 3px rgba(0, 0, 0, 0.7);
}
@media (max-width:1024px){
.serien-grid-intelligent{
gap:1.5rem;
}
.serien-grid-intelligent[data-tiles-count="4"]{
grid-template-columns:repeat(3, 1fr);
grid-template-rows:auto auto;
}
.serien-grid-intelligent[data-tiles-count="4"] .grid-position-0{
grid-column:1;
grid-row:1;
}
.serien-grid-intelligent[data-tiles-count="4"] .grid-position-1{
grid-column:2;
grid-row:1;
}
.serien-grid-intelligent[data-tiles-count="4"] .grid-position-2{
grid-column:3;
grid-row:1;
}
.serien-grid-intelligent[data-tiles-count="4"] .grid-position-3{
grid-column:2;
grid-row:2;
}
.serien-grid-intelligent[data-tiles-count="5"]{
grid-template-columns:repeat(4, 1fr);
grid-template-rows:auto auto;
}
.serien-grid-intelligent[data-tiles-count="5"] .grid-position-0{
grid-column:1;
grid-row:1;
}
.serien-grid-intelligent[data-tiles-count="5"] .grid-position-1{
grid-column:2;
grid-row:1;
}
.serien-grid-intelligent[data-tiles-count="5"] .grid-position-2{
grid-column:3;
grid-row:1;
}
.serien-grid-intelligent[data-tiles-count="5"] .grid-position-3{
grid-column:2;
grid-row:2;
}
.serien-grid-intelligent[data-tiles-count="5"] .grid-position-4{
grid-column:3;
grid-row:2;
}
.serien-grid-intelligent[data-tiles-count="1"],
.serien-grid-intelligent[data-tiles-count="2"],
.serien-grid-intelligent[data-tiles-count="3"],
.serien-grid-intelligent[data-tiles-count="6"]{
grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}
}
@media (max-width:768px){
.serien-grid,
.serien-grid-intelligent{
grid-template-columns:1fr !important;
grid-template-rows:repeat(6, auto) !important;
gap:1.5rem !important;
margin:1rem 0 !important;
max-width:100% !important;
padding:0 1rem !important;
}
}
@media (max-width:1024px) and (min-width:769px){
.serien-grid,
.serien-grid-intelligent{
grid-template-columns:repeat(2, 1fr) !important;
grid-template-rows:repeat(3, auto) !important;
gap:1.75rem !important;
max-width:800px !important;
}
.serie-card{
padding:1.5rem;
min-height:150px;
}
.serie-card-align-left,
.serie-card-align-right{
text-align:center !important;
}
.serie-card-align-left .serie-icon,
.serie-card-align-right .serie-icon{
text-align:center;
margin:0 auto 1rem auto;
}
.serie-icon{
font-size:2rem;
}
.serie-title{
font-size:1.3rem;
}
.serie-description{
font-size:0.95rem;
}
.serien-grid-intelligent[data-tiles-count] .serie-card{
grid-column:1;
grid-row:auto;
}
}
.serie-card:hover .serie-title{
color:var(--accent-color, #4a90e2);
transition:color 0.3s ease;
}
.serie-card[style*="background-image"]:hover .serie-title{
color:#ffffff;
text-shadow:0 2px 8px rgba(74, 144, 226, 0.5);
}
.serie-card:focus-within{
outline:2px solid var(--accent-color, #4a90e2);
outline-offset:2px;
}
.serien-grid-intelligent{
transition:grid-template-columns 0.3s ease;
}
.serie-card{
transition:all 0.3s ease, transform 0.3s ease;
}
.serie-card.loading{
opacity:0.7;
pointer-events:none;
}
.serie-card.loading::after{
content:'';
position:absolute;
top:50%;
left:50%;
width:20px;
height:20px;
margin:-10px 0 0 -10px;
border:2px solid var(--accent-color, #4a90e2);
border-radius:50%;
border-top-color:transparent;
animation:spin 1s linear infinite;
}
@keyframes spin{
to{
transform:rotate(360deg);
}
}
.featured-author-card{
display:flex;
align-items:flex-start;
gap:1rem;
padding:1.5rem;
background:var(--card-bg, #2a2a2a);
border-radius:12px;
border:1px solid var(--border-color, #404040);
transition:all 0.3s ease;
}
.featured-author-card:hover{
border-color:var(--accent-color, #4a90e2);
transform:translateY(-2px);
box-shadow:0 4px 15px rgba(0, 0, 0, 0.1);
}
.featured-author-avatar{
flex-shrink:0;
width:80px;
height:80px;
position:relative;
}
.featured-author-avatar img{
width:80px !important;
height:80px !important;
border-radius:50% !important;
object-fit:cover;
border:3px solid var(--accent-color, #4a90e2);
transition:all 0.3s ease;
display:block;
}
.featured-author-avatar img:hover{
transform:scale(1.05);
border-color:var(--accent-hover, #357abd);
box-shadow:0 4px 15px rgba(74, 144, 226, 0.3);
}
.featured-author-avatar::before{
content:'👤';
position:absolute;
top:0;
left:0;
width:80px;
height:80px;
background:var(--accent-color, #4a90e2);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
color:white;
z-index:-1;
}
.featured-author-info{
flex-grow:1;
min-width:0;
}
.featured-author-info h4{
margin:0 0 0.5rem 0;
font-size:1.2rem;
font-weight:600;
color:var(--heading-color, #ffffff);
line-height:1.3;
}
.author-role{
font-size:0.9rem;
color:var(--accent-color, #4a90e2);
font-weight:500;
margin-bottom:0.75rem;
text-transform:uppercase;
letter-spacing:0.5px;
}
.author-description{
font-size:0.95rem;
line-height:1.5;
color:var(--text-color-secondary, #b3b3b3);
margin-bottom:1rem;
}
.author-link{
display:inline-flex;
align-items:center;
gap:0.5rem;
font-size:0.9rem;
color:var(--accent-color, #4a90e2);
text-decoration:none;
font-weight:500;
transition:all 0.3s ease;
}
.author-link:hover{
color:var(--accent-hover, #357abd);
transform:translateX(3px);
}
.author-link::after{
content:'→';
transition:transform 0.3s ease;
}
.author-link:hover::after{
transform:translateX(2px);
}
@media (max-width:768px){
.featured-author-card{
flex-direction:column;
text-align:center;
padding:1rem;
}
.featured-author-avatar{
align-self:center;
margin-bottom:1rem;
}
.featured-author-info h4{
font-size:1.1rem;
}
.author-description{
font-size:0.9rem;
}
}
.widget.featured-author-widget .widget-title{
color:var(--accent-color, #4a90e2);
display:flex;
align-items:center;
gap:0.5rem;
margin-bottom:1rem;
}
.featured-author-card::before{
content:'';
position:absolute;
top:-1px;
left:-1px;
right:-1px;
bottom:-1px;
background:linear-gradient(45deg, var(--accent-color, #4a90e2), var(--accent-hover, #357abd));
border-radius:12px;
z-index:-1;
opacity:0;
transition:opacity 0.3s ease;
}
.featured-author-card:hover::before{
opacity:0.1;
}
.featured-author-card::after{
content:'⭐';
position:absolute;
top:-8px;
right:-8px;
background:var(--accent-color, #4a90e2);
color:white;
width:24px;
height:24px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:0.8rem;
box-shadow:0 2px 8px rgba(0, 0, 0, 0.2);
}
.comments-section{
background:var(--bg-color, #1a1a1a);
padding:3rem 0;
border-top:1px solid var(--border-color, #404040);
}
.comments-wrapper{
max-width:800px;
margin:0 auto;
}
.comments-title{
font-size:1.8rem;
font-weight:600;
margin-bottom:2rem;
color:var(--heading-color, #ffffff);
border-bottom:2px solid var(--accent-color, #4a90e2);
padding-bottom:0.5rem;
}
.comments-list{
margin-bottom:3rem;
}
.comment{
margin-bottom:2rem;
padding:1.5rem;
background:var(--card-bg, #2a2a2a);
border:1px solid var(--border-color, #404040);
border-radius:12px;
transition:all 0.3s ease;
}
.comment:hover{
border-color:var(--accent-color, #4a90e2);
transform:translateY(-2px);
box-shadow:0 4px 15px rgba(0, 0, 0, 0.1);
}
.comment-meta{
display:flex;
align-items:flex-start;
gap:1rem;
margin-bottom:1rem;
}
.comment-author img{
width:50px;
height:50px;
border-radius:50%;
border:2px solid var(--accent-color, #4a90e2);
}
.comment-author-info{
flex-grow:1;
}
.comment-author-name{
font-weight:600;
font-size:1.1rem;
margin-bottom:0.25rem;
}
.comment-author-name a{
color:var(--heading-color, #ffffff);
text-decoration:none;
}
.comment-author-name a:hover{
color:var(--accent-color, #4a90e2);
}
.comment-metadata{
font-size:0.9rem;
color:var(--text-color-secondary, #b3b3b3);
}
.comment-metadata a{
color:var(--text-color-secondary, #b3b3b3);
text-decoration:none;
}
.comment-metadata a:hover{
color:var(--accent-color, #4a90e2);
}
.comment-content{
line-height:1.6;
color:var(--text-color, #e4e4e4);
margin-bottom:1rem;
}
.comment-content p{
margin-bottom:1rem;
}
.comment-content p:last-child{
margin-bottom:0;
}
.comment-reply{
text-align:right;
}
.comment-reply a{
color:var(--accent-color, #4a90e2);
text-decoration:none;
font-size:0.9rem;
font-weight:500;
padding:0.5rem 1rem;
border:1px solid var(--accent-color, #4a90e2);
border-radius:6px;
transition:all 0.3s ease;
}
.comment-reply a:hover{
background:var(--accent-color, #4a90e2);
color:white;
}
.children{
margin-left:2rem;
margin-top:1rem;
}
.children .comment{
border-left:3px solid var(--accent-color, #4a90e2);
margin-bottom:1rem;
}
.comment-awaiting-moderation{
color:var(--warning-color, #ffa500);
font-style:italic;
background:rgba(255, 165, 0, 0.1);
padding:0.5rem;
border-radius:6px;
border-left:3px solid var(--warning-color, #ffa500);
}
.comment-form{
background:var(--card-bg, #2a2a2a);
padding:2rem;
border-radius:12px;
border:1px solid var(--border-color, #404040);
}
.comment-form h3{
margin-bottom:1.5rem;
color:var(--heading-color, #ffffff);
font-size:1.5rem;
}
.comment-form p{
margin-bottom:1rem;
}
.comment-form label{
display:block;
margin-bottom:0.5rem;
font-weight:500;
color:var(--text-color, #e4e4e4);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
width:100%;
padding:0.75rem;
border:1px solid var(--border-color, #404040);
border-radius:6px;
background:var(--input-bg, #1a1a1a);
color:var(--text-color, #e4e4e4);
font-size:1rem;
transition:all 0.3s ease;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus{
outline:none;
border-color:var(--accent-color, #4a90e2);
box-shadow:0 0 0 2px rgba(74, 144, 226, 0.2);
}
.comment-form textarea{
resize:vertical;
min-height:120px;
font-family:inherit;
}
.comment-submit-button{
background:var(--accent-color, #4a90e2);
color:white;
border:none;
padding:0.75rem 2rem;
border-radius:6px;
font-size:1rem;
font-weight:500;
cursor:pointer;
transition:all 0.3s ease;
}
.comment-submit-button:hover{
background:var(--accent-hover, #357abd);
transform:translateY(-2px);
box-shadow:0 4px 15px rgba(74, 144, 226, 0.3);
}
.comment-submit-button:active{
transform:translateY(0);
}
.comment-navigation{
display:flex;
justify-content:space-between;
align-items:center;
margin:2rem 0;
padding:1rem;
background:var(--card-bg, #2a2a2a);
border-radius:8px;
}
.comment-navigation a{
color:var(--accent-color, #4a90e2);
text-decoration:none;
font-weight:500;
padding:0.5rem 1rem;
border-radius:6px;
transition:all 0.3s ease;
}
.comment-navigation a:hover{
background:var(--accent-color, #4a90e2);
color:white;
}
.no-comments{
text-align:center;
color:var(--text-color-secondary, #b3b3b3);
font-style:italic;
padding:2rem;
background:var(--card-bg, #2a2a2a);
border-radius:8px;
border:1px solid var(--border-color, #404040);
}
@media (max-width:768px){
.comments-section{
padding:2rem 0;
}
.comment-meta{
flex-direction:column;
gap:0.5rem;
}
.comment-author-info{
text-align:center;
}
.children{
margin-left:1rem;
}
.comment-form{
padding:1.5rem;
}
.comment-navigation{
flex-direction:column;
gap:1rem;
}
}
.theme-light .comments-section{
background:var(--bg-color-light, #ffffff);
}
.theme-light .comment{
background:var(--card-bg-light, #f8f9fa);
border-color:var(--border-color-light, #e0e0e0);
}
.theme-light .comment-form{
background:var(--card-bg-light, #f8f9fa);
border-color:var(--border-color-light, #e0e0e0);
}
.post-meta{
margin:1.5rem 0;
}
.post-meta-inline{
display:flex;
align-items:center;
gap:0.75rem;
flex-wrap:wrap;
color:var(--text-color-secondary, #b3b3b3);
font-size:0.95rem;
}
.author-avatar{
display:flex;
align-items:center;
}
.author-avatar img{
width:40px !important;
height:40px !important;
border-radius:50% !important;
border:2px solid var(--accent-color, #4a90e2) !important;
object-fit:cover;
transition:all 0.3s ease;
}
.author-avatar img:hover{
transform:scale(1.05);
border-color:var(--accent-hover, #357abd);
box-shadow:0 2px 8px rgba(74, 144, 226, 0.3);
}
.author-name{
font-weight:500;
color:var(--heading-color, #ffffff);
white-space:nowrap;
}
.meta-separator{
color:var(--accent-color, #4a90e2);
font-weight:bold;
user-select:none;
}
.post-date{
color:var(--text-color-secondary, #b3b3b3);
white-space:nowrap;
}
.reading-time-text{
color:var(--accent-color, #4a90e2);
font-weight:500;
white-space:nowrap;
}
.reading-time-text::before{
content:'📖';
margin-right:0.25rem;
}
/* ==========================================
AUTHOR ARCHIVE PAGE STYLING
========================================== */
.author-header{
background:linear-gradient(135deg, var(--primary-dark, #1a1a2e) 0%, var(--accent-color, #4a90e2) 100%);
color:white;
padding:3rem 0;
position:relative;
overflow:hidden;
}
.author-header::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="80" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="70" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
animation:float 20s infinite linear;
}
.author-content-header{
max-width:900px;
margin:0 auto 3rem auto;
text-align:center;
}
.author-header-image{
margin:0 0 2rem 0;
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0, 0, 0, 0.3);
display:inline-block;
max-width:100%;
}
.author-header-image img{
width:100%;
height:auto;
max-height:500px;
object-fit:cover;
display:block;
}
.author-bio-content{
padding:2rem 2.5rem;
background:linear-gradient(135deg, rgba(255, 149, 0, 0.05) 0%, rgba(255, 149, 0, 0.02) 100%);
border-left:4px solid var(--accent-orange);
border-radius:8px;
line-height:1.8;
font-size:1.1rem;
text-align:left;
max-width:100%;
word-wrap:break-word;
overflow-wrap:break-word;
}
.author-bio-content p{
margin-bottom:1rem;
color:var(--text-color);
}
.author-bio-content p:last-child{
margin-bottom:0;
}
.author-info{
display:flex;
align-items:center;
gap:2rem;
position:relative;
z-index:2;
}
.author-avatar-large img{
width:500px !important;   
height:auto !important;   
border-radius:12px !important;  
border:none !important;   
object-fit:contain !important;  
box-shadow:0 8px 32px rgba(0, 0, 0, 0.3);
}
.author-details h1{
margin:0 0 0.5rem 0;
font-size:2.5rem;
font-weight:700;
}
.author-role{
display:inline-block;
background:rgba(255, 255, 255, 0.2);
padding:0.25rem 0.75rem;
border-radius:20px;
font-size:0.9rem;
font-weight:500;
margin-bottom:1rem;
}
.author-bio{
font-size:1.1rem;
line-height:1.6;
margin-bottom:1.5rem;
opacity:0.9;
}
.author-stats{
display:flex;
gap:2rem;
margin-bottom:1.5rem;
}
.stat-item{
text-align:center;
}
.stat-number{
display:block;
font-size:2rem;
font-weight:700;
color:white;
}
.stat-label{
font-size:0.9rem;
opacity:0.8;
}
.author-links{
margin-top:1rem;
}
.author-website{
display:inline-flex;
align-items:center;
padding:0.75rem 1.5rem;
background:rgba(255, 255, 255, 0.1);
color:white;
text-decoration:none;
border-radius:25px;
border:2px solid rgba(255, 255, 255, 0.3);
transition:all 0.3s ease;
backdrop-filter:blur(10px);
}
.author-website:hover{
background:var(--card-bg-hover, #2a2a2a);
color:var(--accent-color, #4a90e2);
transform:translateY(-2px);
box-shadow:0 8px 25px rgba(74, 144, 226, 0.3);
}
.author-content{
padding:4rem 0;
}
.author-layout{
display:grid;
grid-template-columns:1fr 300px;
gap:3rem;
}
.author-posts-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:2rem;
padding-bottom:1rem;
border-bottom:3px solid var(--accent-color, #4a90e2);
}
.author-posts-header h2{
margin:0;
color:var(--heading-color, #ffffff);
}
.posts-count{
background:var(--accent-color, #4a90e2);
color:white;
padding:0.5rem 1rem;
border-radius:20px;
font-weight:600;
}
.author-posts-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:2rem;
margin-bottom:3rem;
}
.author-post-card{
background:var(--card-bg, #16213e);
border-radius:12px;
overflow:hidden;
transition:all 0.3s ease;
border:1px solid var(--border-color, #2a3447);
}
.author-post-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 30px rgba(74, 144, 226, 0.2);
}
.author-post-image img{
width:100%;
height:200px;
object-fit:cover;
}
.author-post-content{
padding:1.5rem;
}
.author-post-meta{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:1rem;
}
.post-category-small{
background:var(--accent-color, #4a90e2);
color:white;
padding:0.25rem 0.75rem;
border-radius:12px;
font-size:0.8rem;
text-decoration:none;
font-weight:500;
}
.author-post-title{
margin:0 0 1rem 0;
font-size:1.25rem;
}
.author-post-title a{
color:var(--heading-color, #ffffff);
text-decoration:none;
}
.author-post-title a:hover{
color:var(--accent-color, #4a90e2);
}
.author-post-excerpt{
color:var(--text-color-secondary, #b3b3b3);
line-height:1.6;
margin-bottom:1.5rem;
}
.author-post-footer{
display:flex;
justify-content:space-between;
align-items:center;
}
.read-more-link{
color:var(--accent-color, #4a90e2);
text-decoration:none;
font-weight:600;
transition:all 0.3s ease;
}
.read-more-link:hover{
color:var(--accent-hover, #357abd);
}
.author-sidebar{
position:sticky;
top:2rem;
height:fit-content;
}
.author-quick-info{
background:var(--card-bg, #16213e);
border-radius:12px;
padding:1.5rem;
margin-bottom:2rem;
border:1px solid var(--border-color, #2a3447);
}
.quick-stats{
display:flex;
flex-direction:column;
gap:1rem;
}
.quick-stat{
text-align:center;
padding:1rem;
background:rgba(74, 144, 226, 0.1);
border-radius:8px;
}
.quick-stat strong{
display:block;
font-size:1.5rem;
color:var(--accent-color, #4a90e2);
font-weight:700;
}
.no-posts{
text-align:center;
padding:4rem 2rem;
background:var(--card-bg, #16213e);
border-radius:12px;
border:1px solid var(--border-color, #2a3447);
}
.no-posts h2{
color:var(--heading-color, #ffffff);
margin-bottom:1rem;
}
.back-to-blog-btn{
display:inline-block;
margin-top:2rem;
padding:0.75rem 2rem;
background:var(--accent-color, #4a90e2);
color:white;
text-decoration:none;
border-radius:25px;
transition:all 0.3s ease;
}
.back-to-blog-btn:hover{
background:var(--accent-hover, #357abd);
transform:translateY(-2px);
}
.author-pagination{
display:flex;
justify-content:center;
margin-top:3rem;
}
@media (max-width:1024px){
.author-layout{
grid-template-columns:1fr;
gap:2rem;
}
.author-sidebar{
position:static;
}
}
@media (max-width:768px){
.author-info{
flex-direction:column;
text-align:center;
gap:1.5rem;
}
.author-stats{
justify-content:center;
}
.author-posts-header{
flex-direction:column;
gap:1rem;
text-align:center;
}
.author-posts-grid{
grid-template-columns:1fr;
}
}
@media (max-width:480px){
.author-header{
padding:2rem 0;
}
.author-details h1{
font-size:2rem;
}
.author-stats{
flex-direction:column;
gap:1rem;
}
}
/* ==========================================
TEAMS PAGE STYLING
========================================== */
.team-header{
background:linear-gradient(135deg, var(--primary-dark, #1a1a2e) 0%, var(--accent-color, #4a90e2) 100%);
color:white;
padding:4rem 0;
position:relative;
text-align:center;
}
.team-page-title{
font-size:3rem;
margin-bottom:1rem;
color:#FF9500 !important;
font-weight:700;
}
.team-page-subtitle{
font-size:1.2rem;
opacity:0.9;
max-width:600px;
margin:0 auto;
line-height:1.6;
}
.team-content{
padding:4rem 0;
}
.team-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
gap:3rem;
margin-bottom:4rem;
}
.team-member{
height:100%;
}
.member-card{
background:var(--card-bg, #16213e);
border-radius:20px;
padding:2rem;
height:100%;
display:flex;
flex-direction:column;
border:1px solid var(--border-color, #2a3447);
transition:all 0.3s ease;
position:relative;
overflow:hidden;
}
.member-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(74, 144, 226, 0.2);
}
.member-image{
position:relative;
margin-bottom:1.5rem;
align-self:center;
}
.member-image img{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
border:4px solid var(--accent-color, #4a90e2);
}
.member-overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(74, 144, 226, 0.9);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transition:all 0.3s ease;
}
.member-image:hover .member-overlay{
opacity:1;
}
.social-links{
display:flex;
gap:0.5rem;
}
.social-links a{
font-size:1.5rem;
text-decoration:none;
transition:transform 0.2s ease;
}
.social-links a:hover{
transform:scale(1.2);
}
.member-info{
text-align:center;
flex:1;
display:flex;
flex-direction:column;
}
.member-name{
font-size:1.5rem;
color:var(--heading-color, #ffffff);
margin-bottom:0.5rem;
font-weight:700;
}
.member-role{
color:var(--accent-color, #4a90e2);
font-weight:600;
margin-bottom:0.25rem;
font-size:1rem;
}
.member-speciality{
color:var(--text-color-secondary, #b3b3b3);
margin-bottom:1.5rem;
font-style:italic;
}
.member-description{
color:var(--text-color-secondary, #b3b3b3);
line-height:1.6;
margin-bottom:2rem;
flex:1;
}
.member-stats{
display:flex;
justify-content:space-around;
margin-bottom:1.5rem;
padding:1rem 0;
border-top:1px solid var(--border-color, #2a3447);
border-bottom:1px solid var(--border-color, #2a3447);
}
.stat{
text-align:center;
}
.stat-number{
display:block;
font-size:1.5rem;
font-weight:700;
color:var(--accent-color, #4a90e2);
}
.stat-label{
font-size:0.9rem;
color:var(--text-color-secondary, #b3b3b3);
}
.member-expertise{
display:flex;
flex-wrap:wrap;
gap:0.5rem;
justify-content:center;
margin-bottom:1.5rem;
}
.expertise-tag{
background:var(--accent-color, #4a90e2);
color:white;
padding:0.3rem 0.8rem;
border-radius:15px;
font-size:0.8rem;
font-weight:500;
}
.member-articles-link{
color:var(--accent-color, #4a90e2);
text-decoration:none;
font-weight:600;
padding:0.75rem 1.5rem;
border:2px solid var(--accent-color, #4a90e2);
border-radius:25px;
text-align:center;
transition:all 0.3s ease;
margin-top:auto;
}
.member-articles-link:hover{
background:var(--accent-color, #4a90e2);
color:white;
transform:translateY(-2px);
}
.team-stats-section{
text-align:center;
margin:4rem 0;
padding:3rem 0;
background:var(--card-bg, #16213e);
border-radius:20px;
border:1px solid var(--border-color, #2a3447);
}
.team-stats-section h2{
font-size:2.5rem;
margin-bottom:2rem;
color:var(--heading-color, #ffffff);
}
.team-stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
gap:2rem;
max-width:800px;
margin:0 auto;
}
.team-stat{
text-align:center;
}
.stat-number-large{
display:block;
font-size:3rem;
font-weight:700;
color:var(--accent-color, #4a90e2);
margin-bottom:0.5rem;
}
.stat-label-large{
color:var(--text-color-secondary, #b3b3b3);
font-size:1.1rem;
}
.join-team-section{
text-align:center;
margin-top:4rem;
padding:3rem;
background:linear-gradient(135deg, var(--accent-color, #4a90e2), var(--primary-dark, #1a1a2e));
border-radius:20px;
color:white;
}
.join-team-section h2{
font-size:2rem;
margin-bottom:1rem;
}
.join-team-section p{
font-size:1.1rem;
margin-bottom:2rem;
opacity:0.9;
}
.join-team-btn{
display:inline-block;
padding:1rem 2rem;
background:var(--card-bg, #2a2a2a);
color:var(--accent-color, #4a90e2);
text-decoration:none;
font-weight:700;
border-radius:25px;
border:2px solid var(--accent-color, #4a90e2);
transition:all 0.3s ease;
}
.join-team-btn:hover{
transform:translateY(-3px);
box-shadow:0 10px 30px rgba(74, 144, 226, 0.3);
background:var(--card-bg-hover, #2a3447);
}
@media (max-width:1024px){
.team-grid{
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:2rem;
}
.team-stats-grid{
grid-template-columns:repeat(2, 1fr);
gap:1.5rem;
}
}
@media (max-width:768px){
.team-page-title{
font-size:2.5rem;
}
.team-grid{
grid-template-columns:1fr;
gap:2rem;
}
.team-stats-grid{
grid-template-columns:1fr;
gap:1rem;
}
.member-stats{
flex-direction:column;
gap:1rem;
}
.member-expertise{
justify-content:center;
}
}
@media (max-width:480px){
.team-header{
padding:2rem 0;
}
.team-page-title{
font-size:2rem;
}
.member-card{
padding:1.5rem;
}
.stat-number-large{
font-size:2.5rem;
}
}
.post-meta-inline .author-name:hover{
color:var(--accent-color, #4a90e2);
cursor:pointer;
transition:color 0.3s ease;
}
.post-meta-inline .post-date:hover{
color:var(--text-color, #e4e4e4);
transition:color 0.3s ease;
}
@media (max-width:768px){
.post-meta-inline{
flex-direction:column;
align-items:flex-start;
gap:0.5rem;
text-align:left;
}
.post-meta-inline > div,
.post-meta-inline > span,
.post-meta-inline > time{
display:flex;
align-items:center;
gap:0.5rem;
}
.meta-separator{
display:none;
}
.author-avatar{
order:1;
}
.author-name{
order:2;
}
.post-date{
order:3;
}
.reading-time-text{
order:4;
}
.post-date::before{
content:'📅';
margin-right:0.25rem;
}
}
@media (max-width:480px){
.author-avatar img{
width:32px !important;
height:32px !important;
}
.post-meta-inline{
font-size:0.9rem;
gap:0.75rem;
}
.post-meta{
margin:1rem 0;
}
}
.theme-light .post-meta-inline{
color:var(--text-color-secondary-light, #666666);
}
.theme-light .author-name{
color:var(--heading-color-light, #333333);
}
.theme-light .post-date{
color:var(--text-color-secondary-light, #666666);
}
.post-meta-inline [role="button"],
.post-meta-inline [tabindex]{
outline:none;
border-radius:4px;
padding:2px 4px;
margin:-2px -4px;
}
.post-meta-inline [role="button"]:focus,
.post-meta-inline [tabindex]:focus{
outline:2px solid var(--accent-color, #4a90e2);
outline-offset:2px;
}
.post-meta-inline > *{
transition:all 0.3s ease;
}
.post-meta-inline:hover .author-avatar img{
transform:scale(1.05);
}
.author-name:hover{
text-shadow:0 0 8px rgba(74, 144, 226, 0.4);
}
.reading-time-text:hover{
text-shadow:0 0 8px rgba(74, 144, 226, 0.4);
}
.category-main{
min-height:100vh;
background:var(--bg-color, #1a1a1a);
}
.category-header{
background:var(--card-bg, #2a2a2a);
border-bottom:1px solid var(--border-color, #404040);
padding:2rem 0;
}
.category-info{
text-align:center;
max-width:800px;
margin:0 auto;
padding:2rem 0;
}
.category-icon{
font-size:4rem;
margin-bottom:1rem;
display:block;
}
.category-title{
font-size:2.5rem;
font-weight:700;
color:var(--heading-color, #ffffff);
margin-bottom:1rem;
line-height:1.2;
}
.category-description{
font-size:1.1rem;
line-height:1.6;
color:var(--text-color-secondary, #b3b3b3);
margin-bottom:1.5rem;
max-width:600px;
margin-left:auto;
margin-right:auto;
}
.category-meta{
display:flex;
justify-content:center;
gap:2rem;
flex-wrap:wrap;
color:var(--text-color-secondary, #b3b3b3);
font-size:0.95rem;
}
.category-count{
color:var(--accent-color, #4a90e2);
font-weight:600;
}
.category-author{
color:var(--text-color, #e4e4e4);
}
.category-content{
padding:3rem 0;
}
.category-content .container{
max-width:none !important;
width:100% !important;
}
.category-layout{
display:grid;
grid-template-columns:1fr 300px;
gap:3rem;
align-items:start;
max-width:none;
margin:0 auto;
width:95%;
}
.category-posts{
min-width:0;
}
.category-featured-post{
background:var(--card-bg, #2a2a2a);
border-radius:16px;
overflow:hidden;
margin-bottom:3rem;
border:1px solid var(--border-color, #404040);
transition:all 0.3s ease;
position:relative;
}
.category-featured-post:hover{
transform:translateY(-4px);
box-shadow:0 8px 25px rgba(0, 0, 0, 0.3);
border-color:var(--accent-color, #4a90e2);
}
.featured-post-image{
position:relative;
overflow:hidden;
aspect-ratio:16/9;
}
.featured-post-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.3s ease;
}
.category-featured-post:hover .featured-post-image img{
transform:scale(1.05);
}
.featured-post-content{
padding:2rem;
}
.featured-post-meta{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:1rem;
flex-wrap:wrap;
gap:0.5rem;
}
.featured-badge{
background:var(--accent-color, #4a90e2);
color:white;
padding:0.25rem 0.75rem;
border-radius:20px;
font-size:0.8rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.5px;
}
.featured-post-title{
font-size:1.8rem;
font-weight:700;
line-height:1.3;
margin-bottom:1rem;
}
.featured-post-title a{
color:var(--heading-color, #ffffff);
text-decoration:none;
transition:color 0.3s ease;
}
.featured-post-title a:hover{
color:var(--accent-color, #4a90e2);
}
.featured-post-excerpt{
font-size:1.1rem;
line-height:1.6;
color:var(--text-color-secondary, #b3b3b3);
margin-bottom:2rem;
}
.featured-post-bottom{
display:flex;
justify-content:space-between;
align-items:center;
gap:1rem;
}
.post-author-info{
display:flex;
align-items:center;
gap:0.75rem;
}
.post-author-info img{
width:40px;
height:40px;
border-radius:50%;
border:2px solid var(--accent-color, #4a90e2);
}
.post-author-info div{
display:flex;
flex-direction:column;
gap:0.25rem;
}
.author-name{
font-weight:600;
color:var(--heading-color, #ffffff);
font-size:0.95rem;
}
.reading-time{
font-size:0.85rem;
color:var(--text-color-secondary, #b3b3b3);
}
.read-more-btn{
background:var(--accent-color, #4a90e2);
color:white;
padding:0.75rem 1.5rem;
border-radius:8px;
text-decoration:none;
font-weight:600;
transition:all 0.3s ease;
white-space:nowrap;
}
.read-more-btn:hover{
background:var(--accent-hover, #357abd);
transform:translateY(-2px);
box-shadow:0 4px 15px rgba(74, 144, 226, 0.3);
}
.category-posts-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
gap:2rem;
}
.category-post-card{
background:var(--card-bg, #2a2a2a);
border-radius:12px;
overflow:hidden;
border:1px solid var(--border-color, #404040);
transition:all 0.3s ease;
height:fit-content;
}
.category-post-card:hover{
transform:translateY(-4px);
box-shadow:0 8px 25px rgba(0, 0, 0, 0.2);
border-color:var(--accent-color, #4a90e2);
}
.category-post-image{
position:relative;
aspect-ratio:16/10;
overflow:hidden;
}
.category-post-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.3s ease;
}
.category-post-card:hover .category-post-image img{
transform:scale(1.05);
}
.category-post-content{
padding:1.5rem;
}
.category-post-meta{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:1rem;
font-size:0.85rem;
color:var(--text-color-secondary, #b3b3b3);
}
.category-post-title{
font-size:1.2rem;
font-weight:600;
line-height:1.3;
margin-bottom:0.75rem;
}
.category-post-title a{
color:var(--heading-color, #ffffff);
text-decoration:none;
transition:color 0.3s ease;
}
.category-post-title a:hover{
color:var(--accent-color, #4a90e2);
}
.category-post-excerpt{
font-size:0.95rem;
line-height:1.5;
color:var(--text-color-secondary, #b3b3b3);
margin-bottom:1rem;
}
.category-post-footer{
display:flex;
justify-content:space-between;
align-items:center;
gap:1rem;
}
.post-author{
display:flex;
align-items:center;
gap:0.5rem;
font-size:0.9rem;
color:var(--text-color-secondary, #b3b3b3);
}
.post-author img{
width:24px;
height:24px;
border-radius:50%;
border:1px solid var(--accent-color, #4a90e2);
}
.post-read-more{
color:var(--accent-color, #4a90e2);
text-decoration:none;
font-weight:500;
font-size:0.9rem;
transition:all 0.3s ease;
}
.post-read-more:hover{
color:var(--accent-hover, #357abd);
transform:translateX(3px);
}
.category-sidebar{
position:sticky;
top:2rem;
}
.related-categories-widget{
background:var(--card-bg, #2a2a2a);
border-radius:12px;
padding:1.5rem;
border:1px solid var(--border-color, #404040);
margin-bottom:2rem;
}
.related-categories{
display:flex;
flex-direction:column;
gap:0.75rem;
}
.related-category{
display:flex;
align-items:center;
gap:0.75rem;
padding:0.75rem;
background:var(--bg-color, #1a1a1a);
border-radius:8px;
text-decoration:none;
border:1px solid transparent;
transition:all 0.3s ease;
}
.related-category:hover{
border-color:var(--accent-color, #4a90e2);
transform:translateX(4px);
}
.cat-icon{
font-size:1.2rem;
}
.cat-name{
color:var(--heading-color, #ffffff);
font-weight:500;
flex-grow:1;
}
.cat-count{
color:var(--text-color-secondary, #b3b3b3);
font-size:0.9rem;
}
.category-pagination{
margin-top:3rem;
text-align:center;
}
.category-pagination .page-numbers{
display:inline-block;
padding:0.75rem 1rem;
margin:0 0.25rem;
background:var(--card-bg, #2a2a2a);
color:var(--text-color, #e4e4e4);
text-decoration:none;
border-radius:6px;
border:1px solid var(--border-color, #404040);
transition:all 0.3s ease;
}
.category-pagination .page-numbers:hover,
.category-pagination .page-numbers.current{
background:var(--accent-color, #4a90e2);
color:white;
border-color:var(--accent-color, #4a90e2);
}
.no-posts{
text-align:center;
padding:4rem 2rem;
background:var(--card-bg, #2a2a2a);
border-radius:12px;
border:1px solid var(--border-color, #404040);
}
.no-posts h2{
color:var(--heading-color, #ffffff);
margin-bottom:1rem;
}
.no-posts p{
color:var(--text-color-secondary, #b3b3b3);
margin-bottom:2rem;
}
.back-to-blog-btn{
background:var(--accent-color, #4a90e2);
color:white;
padding:0.75rem 1.5rem;
border-radius:8px;
text-decoration:none;
font-weight:600;
transition:all 0.3s ease;
}
.back-to-blog-btn:hover{
background:var(--accent-hover, #357abd);
transform:translateY(-2px);
}
@media (max-width:1024px){
.category-layout{
grid-template-columns:1fr;
gap:2rem;
}
.category-sidebar{
order:-1;
position:static;
}
.related-categories{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
gap:1rem;
}
}
@media (max-width:768px){
.category-header{
padding:1.5rem 0;
}
.category-icon{
font-size:3rem;
}
.category-title{
font-size:2rem;
}
.category-meta{
flex-direction:column;
gap:0.5rem;
}
.category-content{
padding:2rem 0;
}
.category-posts-grid{
grid-template-columns:1fr;
gap:1.5rem;
}
.featured-post-content{
padding:1.5rem;
}
.featured-post-title{
font-size:1.5rem;
}
.featured-post-bottom{
flex-direction:column;
align-items:flex-start;
gap:1rem;
}
.related-categories{
grid-template-columns:1fr;
}
}
.theme-light .category-main{
background:var(--bg-color-light, #ffffff);
}
.theme-light .category-header{
background:var(--card-bg-light, #f8f9fa);
border-color:var(--border-color-light, #e0e0e0);
}
.theme-light .category-featured-post,
.theme-light .category-post-card,
.theme-light .related-categories-widget{
background:var(--card-bg-light, #ffffff);
border-color:var(--border-color-light, #e0e0e0);
}
.post-categories{
display:flex;
flex-wrap:wrap;
gap:0.75rem;
margin-bottom:1.5rem;
}
.post-category{
display:inline-flex;
align-items:center;
padding:0.5rem 1rem;
background:var(--accent-color, #4a90e2);
color:white;
text-decoration:none;
border-radius:20px;
font-size:0.85rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.5px;
transition:all 0.3s ease;
border:2px solid var(--accent-color, #4a90e2);
position:relative;
overflow:hidden;
}
.post-category:hover{
background:transparent;
color:var(--accent-color, #4a90e2);
transform:translateY(-2px);
box-shadow:0 4px 15px rgba(74, 144, 226, 0.3);
}
.post-category:active{
transform:translateY(0);
}
.post-category:focus{
outline:none;
box-shadow:0 0 0 3px rgba(74, 144, 226, 0.4);
}
.post-category[href*="learning-monday"]{
background:#f39c12;
border-color:#f39c12;
}
.post-category[href*="learning-monday"]:hover{
background:transparent;
color:#f39c12;
box-shadow:0 4px 15px rgba(243, 156, 18, 0.3);
}
.post-category[href*="jdk-migration"]{
background:#e74c3c;
border-color:#e74c3c;
}
.post-category[href*="jdk-migration"]:hover{
background:transparent;
color:#e74c3c;
box-shadow:0 4px 15px rgba(231, 76, 60, 0.3);
}
.post-category[href*="testing"]{
background:#9b59b6;
border-color:#9b59b6;
}
.post-category[href*="testing"]:hover{
background:transparent;
color:#9b59b6;
box-shadow:0 4px 15px rgba(155, 89, 182, 0.3);
}
.post-category[href*="docker"],
.post-category[href*="security"]{
background:#27ae60;
border-color:#27ae60;
}
.post-category[href*="docker"]:hover,
.post-category[href*="security"]:hover{
background:transparent;
color:#27ae60;
box-shadow:0 4px 15px rgba(39, 174, 96, 0.3);
}
.post-category[href*="learning-monday"]::before{
content:'🎓';
margin-right:0.5rem;
}
.post-category[href*="jdk-migration"]::before{
content:'🔧';
margin-right:0.5rem;
}
.post-category[href*="testing"]::before{
content:'⏰';
margin-right:0.5rem;
}
.post-category[href*="docker"]::before,
.post-category[href*="security"]::before{
content:'🛡️';
margin-right:0.5rem;
}
.post-category:not([href*="learning-monday"]):not([href*="jdk-migration"]):not([href*="testing"]):not([href*="docker"]):not([href*="security"])::before{
content:'📖';
margin-right:0.5rem;
}
.post-category::after{
content:'';
position:absolute;
bottom:0;
left:50%;
width:0;
height:2px;
background:currentColor;
transition:all 0.3s ease;
transform:translateX(-50%);
}
.post-category:hover::after{
width:80%;
}
@keyframes categoryPulse{
0%{
box-shadow:0 0 0 0 rgba(74, 144, 226, 0.4);
}
70%{
box-shadow:0 0 0 10px rgba(74, 144, 226, 0);
}
100%{
box-shadow:0 0 0 0 rgba(74, 144, 226, 0);
}
}
.post-category:hover{
animation:categoryPulse 0.6s ease-out;
}
@media (max-width:768px){
.post-categories{
justify-content:center;
margin-bottom:1rem;
}
.post-category{
font-size:0.8rem;
padding:0.4rem 0.8rem;
}
}
@media (max-width:480px){
.post-categories{
flex-direction:column;
align-items:center;
gap:0.5rem;
}
.post-category{
width:fit-content;
min-width:120px;
text-align:center;
justify-content:center;
}
}
.theme-light .post-category{
color:white;
}
.theme-light .post-category:hover{
background:transparent;
color:var(--accent-color, #4a90e2);
}
@media (prefers-contrast:high){
.post-category{
border-width:3px;
font-weight:700;
}
}
@media (prefers-reduced-motion:reduce){
.post-category{
transition:none;
}
.post-category:hover{
animation:none;
transform:none;
}
}
@media print{
.post-category{
background:none !important;
color:black !important;
border:1px solid black !important;
box-shadow:none !important;
}
.post-category::before{
display:none;
}
}
/* ==========================================
TAG ARCHIVE PAGE STYLING
========================================== */
.tag-main{
min-height:100vh;
background:var(--bg-color, #1a1a1a);
}
.tag-header{
background:var(--card-bg, #2a2a2a);
border-bottom:1px solid var(--border-color, #404040);
padding:2rem 0;
}
.tag-info{
text-align:center;
max-width:800px;
margin:0 auto;
padding:2rem 0;
}
.tag-icon{
font-size:4rem;
margin-bottom:1rem;
display:block;
}
.tag-title{
font-size:2.5rem;
font-weight:700;
color:var(--heading-color, #ffffff);
margin-bottom:1rem;
line-height:1.2;
}
.tag-description{
font-size:1.1rem;
line-height:1.6;
color:var(--text-color-secondary, #b3b3b3);
margin-bottom:1.5rem;
max-width:600px;
margin-left:auto;
margin-right:auto;
}
.tag-meta{
display:flex;
justify-content:center;
gap:2rem;
flex-wrap:wrap;
color:var(--text-color-secondary, #b3b3b3);
font-size:0.95rem;
}
.tag-count{
color:var(--accent-color, #4a90e2);
font-weight:600;
}
.tag-content{
padding:3rem 0;
}
.tag-layout{
display:grid;
grid-template-columns:1fr 300px;
gap:3rem;
align-items:start;
}
.tag-posts{
min-width:0;
}
.tag-featured-post{
background:var(--card-bg, #2a2a2a);
border-radius:16px;
overflow:hidden;
margin-bottom:3rem;
border:1px solid var(--border-color, #404040);
transition:all 0.3s ease;
position:relative;
}
.tag-featured-post:hover{
transform:translateY(-4px);
box-shadow:0 8px 25px rgba(0, 0, 0, 0.3);
border-color:var(--accent-color, #4a90e2);
}
.tag-posts-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
gap:2rem;
}
.tag-post-card{
background:var(--card-bg, #2a2a2a);
border-radius:12px;
overflow:hidden;
border:1px solid var(--border-color, #404040);
transition:all 0.3s ease;
height:fit-content;
}
.tag-post-card:hover{
transform:translateY(-4px);
box-shadow:0 8px 25px rgba(0, 0, 0, 0.2);
border-color:var(--accent-color, #4a90e2);
}
.tag-post-image{
position:relative;
aspect-ratio:16/10;
overflow:hidden;
}
.tag-post-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.3s ease;
}
.tag-post-card:hover .tag-post-image img{
transform:scale(1.05);
}
.tag-post-content{
padding:1.5rem;
}
.tag-post-meta{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:1rem;
font-size:0.85rem;
color:var(--text-color-secondary, #b3b3b3);
}
.tag-post-title{
font-size:1.2rem;
font-weight:600;
line-height:1.3;
margin-bottom:0.75rem;
}
.tag-post-title a{
color:var(--heading-color, #ffffff);
text-decoration:none;
transition:color 0.3s ease;
}
.tag-post-title a:hover{
color:var(--accent-color, #4a90e2);
}
.tag-post-excerpt{
font-size:0.95rem;
line-height:1.5;
color:var(--text-color-secondary, #b3b3b3);
margin-bottom:1rem;
}
.tag-post-footer{
display:flex;
justify-content:space-between;
align-items:center;
gap:1rem;
}
.tag-sidebar{
position:sticky;
top:2rem;
}
.related-tags-widget{
background:var(--card-bg, #2a2a2a);
border-radius:12px;
padding:1.5rem;
border:1px solid var(--border-color, #404040);
margin-bottom:2rem;
}
.related-tags{
display:flex;
flex-direction:column;
gap:0.75rem;
}
.related-tag{
display:flex;
align-items:center;
justify-content:space-between;
gap:0.75rem;
padding:0.75rem;
background:var(--bg-color, #1a1a1a);
border-radius:8px;
text-decoration:none;
border:1px solid transparent;
transition:all 0.3s ease;
}
.related-tag:hover{
border-color:var(--accent-color, #4a90e2);
transform:translateX(4px);
}
.tag-name{
color:var(--heading-color, #ffffff);
font-weight:500;
flex-grow:1;
}
.tag-count{
color:var(--text-color-secondary, #b3b3b3);
font-size:0.9rem;
}
.tag-pagination{
margin-top:3rem;
text-align:center;
}
.tag-pagination .page-numbers{
display:inline-block;
padding:0.75rem 1rem;
margin:0 0.25rem;
background:var(--card-bg, #2a2a2a);
color:var(--text-color, #e4e4e4);
text-decoration:none;
border-radius:6px;
border:1px solid var(--border-color, #404040);
transition:all 0.3s ease;
}
.tag-pagination .page-numbers:hover,
.tag-pagination .page-numbers.current{
background:var(--accent-color, #4a90e2);
color:white;
border-color:var(--accent-color, #4a90e2);
}
@media (max-width:1024px){
.tag-layout{
grid-template-columns:1fr;
gap:2rem;
}
.tag-sidebar{
order:-1;
position:static;
}
.related-tags{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
gap:1rem;
}
}
@media (max-width:768px){
.tag-header{
padding:1.5rem 0;
}
.tag-icon{
font-size:3rem;
}
.tag-title{
font-size:2rem;
}
.tag-content{
padding:2rem 0;
}
.tag-posts-grid{
grid-template-columns:1fr;
gap:1.5rem;
}
.related-tags{
grid-template-columns:1fr;
}
}
/* ===================================
PRIVATE LOGS PAGE STYLES
=================================== */
.private-logs-hero{
position:relative;
min-height:40vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
overflow:hidden;
background:linear-gradient(135deg, #4A90E2 0%, #9B59B6 100%);
}
.private-logs-hero .hero-background{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
z-index:1;
}
.private-logs-hero .hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(135deg, rgba(74, 144, 226, 0.8), rgba(155, 89, 182, 0.6));
z-index:2;
}
.private-logs-hero .hero-content{
position:relative;
z-index:3;
color:white;
max-width:800px;
margin:0 auto;
padding:0 2rem;
}
.private-logs-hero .hero-title{
font-size:4.5rem;
font-weight:800;
color:#FF9500 !important;
margin-bottom:1rem;
text-shadow:
3px 3px 8px rgba(0, 0, 0, 0.5),
0 0 30px rgba(255, 149, 0, 0.8),
0 0 50px rgba(255, 149, 0, 0.5),
0 0 80px rgba(255, 149, 0, 0.3);
letter-spacing:-0.5px;
}
.private-logs-hero .hero-subtitle{
font-size:1.3rem;
opacity:0.95;
line-height:1.6;
text-shadow:1px 1px 2px rgba(0, 0, 0, 0.3);
}
@media (max-width:768px){
.private-logs-hero{
min-height:35vh;
}
.private-logs-hero .hero-title{
font-size:3rem;
}
.private-logs-hero .hero-subtitle{
font-size:1.1rem;
}
}
.private-logs-section{
padding:4rem 0;
background:var(--bg-color);
}
.private-logs-intro{
text-align:center;
margin-bottom:4rem;
}
.private-logs-intro .section-title{
font-size:2.5rem;
font-weight:700;
color:var(--primary-color);
margin-bottom:1rem;
}
.private-logs-intro .section-subtitle{
font-size:1.2rem;
color:var(--text-light);
max-width:600px;
margin:0 auto;
}
.private-authors-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
grid-template-rows:repeat(2, auto);
gap:2rem;
margin-bottom:4rem;
max-width:1200px;
margin-left:auto;
margin-right:auto;
}
.private-author-tile{
position:relative;
background:var(--card-bg);
border-radius:16px;
overflow:hidden;
transition:all 0.3s ease;
border:1px solid rgba(255, 255, 255, 0.1);
}
.private-author-tile:hover{
transform:translateY(-5px);
box-shadow:0 10px 30px rgba(0, 0, 0, 0.2);
border-color:var(--author-color);
}
.private-author-card{
padding:2rem;
height:100%;
display:flex;
flex-direction:column;
}
.author-header{
display:flex;
align-items:center;
gap:1.5rem;
margin-bottom:1.5rem;
}
.author-avatar{
position:relative;
width:120px;
height:120px;
border-radius:50%;
overflow:hidden;
border:3px solid var(--author-color);
flex-shrink:0;
}
.author-avatar img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
border-radius:50% !important;
}
.private-author-tile .author-avatar img{
width:120px !important;
height:120px !important;
object-fit:cover !important;
border-radius:50% !important;
}
.avatar-fallback{
width:100%;
height:100%;
background:linear-gradient(135deg, var(--author-color), rgba(255, 255, 255, 0.1));
display:flex;
align-items:center;
justify-content:center;
font-size:3rem;
}
.author-info h3.author-name{
font-size:1.5rem;
font-weight:700;
color:var(--author-color);
margin-bottom:0.5rem;
}
.author-role{
font-size:1rem;
color:var(--text-light);
margin-bottom:0.3rem;
}
.author-specialty{
font-size:0.9rem;
color:var(--author-color);
font-weight:500;
}
.author-description{
margin-bottom:2rem;
flex-grow:1;
}
.author-description p{
color:var(--text-light);
line-height:1.6;
font-size:1rem;
}
.author-stats{
display:flex;
justify-content:space-between;
padding:1rem 0;
border-top:1px solid rgba(255, 255, 255, 0.1);
border-bottom:1px solid rgba(255, 255, 255, 0.1);
margin-bottom:2rem;
}
.stat-item{
text-align:center;
flex:1;
}
.stat-number{
display:block;
font-size:1.5rem;
font-weight:700;
color:var(--author-color);
margin-bottom:0.3rem;
}
.stat-label{
font-size:0.8rem;
color:var(--text-light);
text-transform:uppercase;
letter-spacing:0.5px;
}
.author-actions{
margin-top:auto;
}
.private-logs-btn{
display:flex;
align-items:center;
justify-content:center;
gap:0.8rem;
padding:1rem 1.5rem;
background:linear-gradient(135deg, var(--author-color), rgba(255, 255, 255, 0.1));
color:white;
text-decoration:none;
border-radius:8px;
font-weight:600;
transition:all 0.3s ease;
border:2px solid var(--author-color);
cursor:pointer;
font-family:inherit;
font-size:inherit;
width:100%;
}
.private-logs-btn:hover{
background:var(--author-color);
transform:translateY(-2px);
box-shadow:0 5px 15px rgba(0, 0, 0, 0.2);
color:white;
}
.btn-icon{
font-size:1.2rem;
}
.btn-arrow{
transition:transform 0.3s ease;
}
.private-logs-btn:hover .btn-arrow{
transform:translateX(5px);
}
.private-logs-coming-soon{
background:var(--card-bg);
border-radius:16px;
padding:3rem;
text-align:center;
border:1px solid rgba(255, 255, 255, 0.1);
margin-top:3rem;
}
.coming-soon-content h3{
font-size:2rem;
color:#FF9500;
margin-bottom:1rem;
}
.coming-soon-content p{
font-size:1.1rem;
color:var(--text-light);
margin-bottom:2rem;
max-width:800px;
margin-left:auto;
margin-right:auto;
}
.features-preview{
background:rgba(255, 149, 0, 0.1);
border-radius:12px;
padding:2rem;
margin-top:2rem;
border:1px solid rgba(255, 149, 0, 0.2);
}
.features-preview h4{
color:#FF9500;
font-size:1.3rem;
margin-bottom:1.5rem;
}
.features-preview ul{
list-style:none;
padding:0;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
gap:1rem;
}
.features-preview li{
color:var(--text-light);
padding:0.5rem 0;
display:flex;
align-items:center;
gap:0.5rem;
}
@media (max-width:1024px) and (min-width:769px){
.private-authors-grid{
grid-template-columns:repeat(2, 1fr);
grid-template-rows:auto;
gap:1.5rem;
}
}
@media (max-width:768px){
.private-authors-grid{
grid-template-columns:1fr;
grid-template-rows:auto;
gap:1.5rem;
max-width:400px;
margin:0 auto 4rem auto;
padding:0 1rem;
}
.private-author-tile{
margin:0 auto;
max-width:350px;
}
.author-header{
flex-direction:column;
text-align:center;
gap:1rem;
}
.author-avatar{
width:100px;
height:100px;
margin:0 auto;
}
.private-logs-intro .section-title{
font-size:2rem;
}
.private-logs-intro{
text-align:center;
padding:0 1rem;
}
.private-logs-coming-soon{
padding:2rem;
}
.features-preview ul{
grid-template-columns:1fr;
}
.author-stats{
flex-direction:column;
gap:1rem;
}
}
/* ===================================
BLOG LAYOUT OPTIMIERUNGEN (ENHANCED)
=================================== */
.blog-layout{
display:grid !important;
grid-template-columns:1fr 300px !important;
gap:3rem !important;
align-items:start !important;
max-width:1200px !important;
margin:0 auto !important;
}
.single-post-wrapper{
display:block !important;
margin:0 auto !important;
max-width:1200px !important; 
width:100% !important;
}
.single .post-content{
width:100% !important;
max-width:none !important;
margin:0 auto !important;
}
.single .blog-single-content{
width:100% !important;
max-width:none !important;
}
.related-posts-section,
.comments-section{
display:block !important;
grid-column:1 / -1 !important;
width:100% !important;
max-width:none !important;
}
.blog-single-main{
display:block !important;
}
.blog-single-content{
display:block !important;
}
.single .related-posts-section,
.single .comments-section{
display:block !important;
width:100% !important;
clear:both !important;
float:none !important;
grid-column:unset !important;
grid-row:unset !important;
}
.single .container{
margin:0 auto !important;
padding:0 2rem !important;
}
.page .container{
display:block !important;
width:100% !important;
max-width:none !important;
margin:0 auto !important;
padding:0 2rem !important;
}
.single .blog-single-main .container{
width:100% !important;
max-width:none !important;
padding:0 !important;
}
.related-posts-grid{
display:grid !important;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)) !important;
gap:2rem !important;
margin-top:2rem !important;
}
.blog-posts-container{
min-height:calc(100vh - 400px); 
}
.blog-posts-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:2rem;
margin-bottom:3rem;
}
.blog-pagination{
margin-top:2rem;
padding-top:2rem;
border-top:1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-widgets{
position:sticky;
top:2rem;
height:fit-content;
}
.sidebar-widgets .widget{
margin-bottom:2.5rem; 
}
.sidebar-widgets .widget:last-child{
margin-bottom:0;
}
.recent-posts-widget .recent-posts-list{
max-height:none; 
}
.tags-widget .tags-cloud{
min-height:120px; 
}
@media (max-width:768px){
.blog-layout{
grid-template-columns:1fr;
gap:2rem;
}
.sidebar-widgets{
position:static;
}
.blog-posts-container{
min-height:auto;
}
}
/* ===================================
KOMPAKTE AUTHOR/META STYLES
=================================== */
.post-meta-compact{
display:flex;
flex-wrap:wrap;
gap:1rem;
align-items:center;
margin:1.5rem 0 2rem 0;
padding-bottom:1.5rem;
border-bottom:1px solid var(--border-color);
}
.post-categories-inline{
display:flex;
gap:0.5rem;
flex-wrap:wrap;
}
.post-byline-compact{
display:flex;
align-items:center;
gap:0.75rem;
font-size:0.9rem;
color:var(--text-secondary);
}
.author-avatar-small{
display:flex;
align-items:center;
}
.author-avatar-small img{
width:32px;
height:32px;
border-radius:50%;
border:2px solid var(--border-color);
transition:border-color 0.3s ease;
}
.author-avatar-small a:hover img{
border-color:var(--primary-color);
}
.author-compact a{
color:var(--primary-color);
text-decoration:none;
}
.author-compact a:hover{
text-decoration:underline;
}
.meta-separator{
color:var(--text-muted);
}
.reading-time{
color:var(--text-muted);
}
@media (max-width:768px){
.post-meta-compact{
flex-direction:column;
align-items:flex-start;
gap:0.75rem;
}
.post-byline-compact{
font-size:0.85rem;
}
}
/* ===================================
SINGLE POST HERO STYLES
=================================== */
.single-post-hero{
position:relative;
height:60vh;
min-height:400px;
max-height:600px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}
.single-post-hero .hero-background{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
.single-post-hero .hero-background img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}
.single-post-hero .hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, 0.5);
z-index:2;
display:flex;
align-items:center;
justify-content:center;
}
.single-post-hero-content{
text-align:center;
color:white;
width:90%;
max-width:1200px;
margin:0 auto;
padding:2rem;
}
.breadcrumb-hero{
margin-bottom:1rem;
font-size:0.9rem;
opacity:0.9;
}
.breadcrumb-hero a{
color:white;
text-decoration:none;
opacity:0.8;
transition:opacity 0.3s ease;
}
.breadcrumb-hero a:hover{
opacity:1;
}
.breadcrumb-hero span{
margin:0 0.5rem;
opacity:0.6;
}
.hero-categories{
margin-bottom:1rem;
}
.hero-category{
display:inline-block;
background:rgba(255, 255, 255, 0.2);
color:white;
padding:0.25rem 0.75rem;
border-radius:20px;
font-size:0.8rem;
margin:0 0.25rem;
backdrop-filter:blur(10px);
}
.single-post-hero-title{
font-size:clamp(2.5rem, 6vw, 4.5rem);
font-weight:800;
margin:1.5rem 0;
line-height:1.2;
color:var(--accent-orange, #ff9500);
text-shadow:
3px 3px 8px rgba(0, 0, 0, 0.5),
0 0 30px rgba(255, 149, 0, 0.8),
0 0 50px rgba(255, 149, 0, 0.5),
0 0 80px rgba(255, 149, 0, 0.3);
max-width:100%; 
word-wrap:break-word; 
hyphens:auto; 
letter-spacing:-0.5px;
}
.hero-author-info{
display:flex;
align-items:center;
justify-content:center;
gap:1rem;
margin-top:2rem;
}
.hero-author-avatar img{
width:40px;
height:40px;
border-radius:50%;
border:2px solid white;
transition:border-color 0.3s ease, transform 0.3s ease;
}
.hero-author-avatar a:hover img{
border-color:rgba(255, 255, 255, 0.8);
transform:scale(1.05);
}
.hero-author-name a{
color:white;
text-decoration:none;
transition:opacity 0.3s ease;
}
.hero-author-name a:hover{
opacity:0.8;
text-decoration:underline;
}
.hero-author-details{
text-align:left;
}
.hero-author-name{
display:block;
font-size:1rem;
margin-bottom:0.25rem;
}
.hero-author-name strong{
font-weight:600;
}
.hero-post-meta-line{
font-size:0.9rem;
opacity:0.9;
}
.hero-post-meta-line span{
margin:0 0.5rem;
}
@media (max-width:768px){
.single-post-hero{
height:50vh;
min-height:350px;
}
.single-post-hero-content{
padding:1rem;
}
.single-post-hero-title{
font-size:2.5rem;
margin:1rem 0;
}
.hero-author-info{
flex-direction:column;
gap:0.5rem;
margin-top:1.5rem;
}
.hero-author-details{
text-align:center;
}
.single-post-wrapper{
padding:0 1rem !important;
}
.single .container{
padding:0 1rem !important;
}
.single-post-hero-content{
padding:1rem !important;
}
}
@media (max-width:1024px) and (min-width:769px){
}
@media (min-width:1200px){
}
@media (min-width:1600px){
}
/* ===================================
LIKE SYSTEM STYLES
=================================== */
.post-like-section{
margin:2rem 0;
padding:1.5rem;
background:var(--card-bg);
border-radius:12px;
border:1px solid rgba(255, 255, 255, 0.1);
text-align:center;
}
.post-like-btn{
display:inline-flex;
align-items:center;
gap:0.8rem;
padding:0.8rem 1.5rem;
background:linear-gradient(135deg, #FF9500, rgba(255, 149, 0, 0.8));
color:white;
border:none;
border-radius:50px;
font-size:1rem;
font-weight:600;
cursor:pointer;
transition:all 0.3s ease;
box-shadow:0 2px 10px rgba(255, 149, 0, 0.3);
position:relative;
overflow:hidden;
}
.post-like-btn:hover:not(:disabled){
background:linear-gradient(135deg, #e55a2b, #FF9500);
transform:translateY(-2px);
box-shadow:0 4px 15px rgba(255, 149, 0, 0.4);
}
.post-like-btn:active{
transform:translateY(0);
}
.post-like-btn.liked{
background:linear-gradient(135deg, #27AE60, #2ECC71);
box-shadow:0 2px 10px rgba(46, 204, 113, 0.3);
cursor:default;
}
.post-like-btn.liked:hover{
background:linear-gradient(135deg, #27AE60, #2ECC71);
transform:none;
}
.post-like-btn:disabled{
opacity:0.7;
cursor:not-allowed;
}
.like-icon{
font-size:1.2rem;
transition:transform 0.2s ease;
}
.post-like-btn:hover:not(:disabled) .like-icon{
transform:scale(1.2);
}
.like-text{
font-weight:600;
}
.like-count{
background:rgba(255, 255, 255, 0.2);
padding:0.2rem 0.6rem;
border-radius:20px;
font-size:0.9rem;
font-weight:700;
min-width:1.5rem;
text-align:center;
}
.like-stats{
margin-top:1rem;
padding-top:1rem;
border-top:1px solid rgba(255, 255, 255, 0.1);
}
.like-summary{
color:var(--text-light);
font-style:italic;
font-size:0.9rem;
}
.like-error{
background:#ff6b6b;
color:white;
padding:0.5rem 1rem;
border-radius:6px;
margin-top:1rem;
font-size:0.9rem;
}
@media (max-width:768px){
.post-like-section{
margin:1.5rem 0;
padding:1rem;
}
.post-like-btn{
padding:0.7rem 1.2rem;
font-size:0.9rem;
}
.like-icon{
font-size:1rem;
}
}
@keyframes likeAnimation{
0%{ transform:scale(1); }
50%{ transform:scale(1.2); }
100%{ transform:scale(1); }
}
.post-like-btn.animate-like{
animation:likeAnimation 0.3s ease-in-out;
}
.post-like-btn:before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
opacity:0;
transition:opacity 0.3s ease;
}
.post-like-btn:hover:not(:disabled):before{
opacity:1;
}
/* ===================================
SINGLE POST LAYOUT (OHNE SIDEBAR)
=================================== */
max-width:100%;
}
.single-post-wrapper .post-body{
font-size:1rem;
line-height:1.6;
}
.single-post-wrapper .post-navigation{
grid-template-columns:1fr;
gap:1rem;
}
.single-post-wrapper .post-featured-image{
margin:1rem 0;
}
}
/* ===================================
COMING SOON MODAL FOR PRIVATE LOGS
=================================== */
.coming-soon-modal{
display:flex;
align-items:center;
justify-content:center;
padding:2rem;
}
.coming-soon-modal .modal-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, 0.8);
backdrop-filter:blur(5px);
}
.coming-soon-modal .modal-content{
position:relative;
background:var(--background-color);
border-radius:12px;
max-width:500px;
width:100%;
max-height:80vh;
overflow-y:auto;
box-shadow:0 20px 40px rgba(0, 0, 0, 0.3);
animation:modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn{
from{
opacity:0;
transform:translateY(-20px) scale(0.95);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}
.coming-soon-modal .modal-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:1.5rem 2rem 1rem;
border-bottom:1px solid var(--border-color);
}
.coming-soon-modal .modal-header h3{
margin:0;
color:var(--primary-color);
font-size:1.5rem;
}
.coming-soon-modal .modal-close{
background:none;
border:none;
font-size:1.5rem;
cursor:pointer;
color:var(--text-color-secondary);
padding:0.5rem;
border-radius:50%;
transition:all 0.2s ease;
}
.coming-soon-modal .modal-close:hover{
background:var(--accent-color);
color:var(--background-color);
}
.coming-soon-modal .modal-body{
padding:1.5rem 2rem;
}
.coming-soon-modal .modal-body p{
margin-bottom:1rem;
line-height:1.6;
color:var(--text-color);
}
.coming-soon-modal .modal-features{
margin-top:1.5rem;
padding:1rem;
background:var(--card-background);
border-radius:8px;
border-left:4px solid var(--primary-color);
}
.coming-soon-modal .modal-features h4{
margin:0 0 1rem;
color:var(--heading-color);
font-size:1.1rem;
}
.coming-soon-modal .modal-features ul{
margin:0;
padding-left:1.5rem;
}
.coming-soon-modal .modal-features li{
margin-bottom:0.5rem;
color:var(--text-color);
line-height:1.5;
}
.coming-soon-modal .modal-footer{
padding:1rem 2rem 1.5rem;
border-top:1px solid var(--border-color);
text-align:right;
}
.coming-soon-modal .modal-btn-close{
background:var(--primary-color);
color:white;
border:none;
padding:0.75rem 1.5rem;
border-radius:6px;
cursor:pointer;
font-weight:500;
transition:all 0.2s ease;
}
.coming-soon-modal .modal-btn-close:hover{
background:var(--accent-color);
transform:translateY(-1px);
}
@media (max-width:768px){
.coming-soon-modal{
padding:1rem;
}
.coming-soon-modal .modal-content{
max-width:95%;
margin:0;
}
.coming-soon-modal .modal-header,
.coming-soon-modal .modal-body,
.coming-soon-modal .modal-footer{
padding-left:1.5rem;
padding-right:1.5rem;
}
.coming-soon-modal .modal-header h3{
font-size:1.3rem;
}
}
/* ===================================
PAGE LAYOUT - SAME WIDTH AS BLOG POSTS
=================================== */
.page-default{
padding:4rem 0;
background:var(--bg-color);
}
.page-default article.page{
margin:0 auto;
background:var(--card-bg);
border-radius:12px;
overflow:hidden;
border:1px solid var(--border-color);
}
.page-default .entry-content{
padding:3rem;
color:var(--text-color);
line-height:1.8;
font-size:1.1rem;
}
.page-default .entry-content h1,
.page-default .entry-content h2,
.page-default .entry-content h3,
.page-default .entry-content h4,
.page-default .entry-content h5,
.page-default .entry-content h6{
color:#FF9500 !important;
margin:2rem 0 1rem;
}
.page-default .entry-content h1{
font-size:2.2rem;
}
.page-default .entry-content h2{
font-size:1.8rem;
}
.page-default .entry-content h3{
font-size:1.4rem;
}
.page-default .entry-content h4{
font-size:1.2rem;
}
.page-default .entry-content h5,
.page-default .entry-content h6{
font-size:1.1rem;
}
.page-default .entry-content p{
margin-bottom:1.5rem;
}
.page-default .entry-content ul,
.page-default .entry-content ol{
margin:1.5rem 0;
padding-left:2rem;
}
.page-default .entry-content li{
margin-bottom:0.75rem;
line-height:1.7;
}
.page-default .entry-content img{
max-width:100%;
height:auto;
border-radius:8px;
margin:2rem 0;
}
.page-default .entry-content a{
color:#FF9500;
text-decoration:none;
border-bottom:1px solid transparent;
transition:all 0.3s ease;
}
.page-default .entry-content a:hover{
border-bottom-color:#FF9500;
}
@media (max-width:768px){
.page-default{
padding:2rem 0;
}
.page-default article.page{
margin:0 1rem;
border-radius:8px;
}
.page-default .entry-content{
padding:2rem 1.5rem;
font-size:1rem;
line-height:1.7;
}
.page-default .entry-content h1{
font-size:1.8rem;
}
.page-default .entry-content h2{
font-size:1.5rem;
}
.page-default .entry-content h3{
font-size:1.2rem;
}
}