:root{
--bg:#030712;
--panel:rgba(15, 23, 42, 0.85);
--card:rgba(30, 41, 59, 0.5);
--card-hover:rgba(30, 41, 59, 0.8);
--text:#f8fafc;
--muted:#94a3b8;
--rose:#f43f5e;
--rose-glow:rgba(244, 63, 94, 0.3);
--indigo:#6366f1;
--border:rgba(255, 255, 255, 0.08);
--font-main:'Outfit', 'Inter', -apple-system, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html, body{
width:100%;
max-width:100%;
overflow-x:hidden!important;
scroll-behavior:smooth;
}
body{
background:var(--bg);
color:var(--text);
font-family:var(--font-main);
min-height:100vh;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
button,input{font:inherit}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#030712}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:999px}
/* LIGHTWEIGHT OPTIMIZED AMBIENT GLOW */
.ambient{
position:fixed;
width:300px;height:300px;border-radius:50%;
filter:blur(100px);
opacity:.1;
pointer-events:none;
z-index:-1;
}
.ambient.a{top:-50px;left:10%;background:#e11d48}
.ambient.b{top:45%;right:5%;background:#4f46e5}
.glass{
background:var(--panel);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border-bottom:1px solid var(--border);
}
.wrap{
width:100%;
max-width:1260px;
margin:0 auto;
padding:0 16px;
}
/* TOPBAR & HEADER FIX */
.topbar{
position:sticky;top:0;z-index:999;
width:100%;
min-height:64px;
display:flex;align-items:center;
}
.header-inner{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.nav{display:flex;gap:24px;align-items:center;color:#cbd5e1;font-size:15px;font-weight:600}
.nav a{transition:color .2s ease}
.nav a:hover{color:#fff}
/* BRAND LOGO & ANIMATED ICON */
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-0.5px}
.brand-icon{
width:38px;height:38px;border-radius:10px;
display:grid;place-items:center;
background:linear-gradient(135deg,#f43f5e,#6366f1);
box-shadow:0 4px 15px var(--rose-glow);
}
.brand-icon i{color:#fff;font-size:16px}
.brand-text{
background: linear-gradient(90deg, #ffffff, #f43f5e, #818cf8, #ffffff);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textShimmer 5s infinite linear;
}
@keyframes textShimmer{
0%{ background-position: 0% 50%; }
100%{ background-position: 200% 50%; }
}
.search{
width:200px;
max-width:100%;
position:relative;
}
.search input{
width:100%;padding:8px 14px 8px 36px;
border-radius:999px;border:1px solid var(--border);
background:rgba(2,6,23,.75);color:#e2e8f0;outline:none;
font-size:12px;font-weight:500;
}
.search i{position:absolute;left:12px;top:10px;color:#64748b;font-size:12px}
.mobile-btn{display:none;background:none;border:0;color:#cbd5e1;font-size:20px;cursor:pointer;padding:4px}
.mobile-nav{display:none;width:100%;padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--border)}
.mobile-nav a{display:block;padding:10px 0;color:#cbd5e1;font-weight:600;font-size:14px;border-bottom:1px solid rgba(255,255,255,.05)}
.mobile-nav a:last-child{border-bottom:none}
/* HERO SLIDER */
.hero{
margin-top:16px;
position:relative;overflow:hidden;border-radius:20px;
min-height:320px;
background:#0f172a;
border:1px solid var(--border);
width:100%;
}
.slide{display:none;position:relative;min-height:320px;width:100%}
.slide.active{display:block;animation:fade .4s ease-out}
@keyframes fade{from{opacity:.3}to{opacity:1}}
.slide-media-box{
position:absolute;
inset:0;
width:100%;
height:100%;
overflow:hidden;
background:#0f172a;
}
.slide-media-box video,
.slide-media-box iframe,
.slide-media-box img {
width:100%!important;
height:100%!important;
object-fit:cover!important;
border:none!important;
}
.shade{position:absolute;inset:0;background:linear-gradient(0deg,#020617 25%,rgba(2,6,23,.2) 70%,transparent);pointer-events:none;z-index:2}
.slide-content{position:absolute;left:0;bottom:0;padding:20px;max-width:100%;z-index:3;pointer-events:none}
.badge{
display:inline-flex;align-items:center;gap:4px;
padding:4px 10px;border-radius:999px;
background:linear-gradient(135deg,#f43f5e,#6366f1);
font-size:10px;font-weight:700;
text-transform:uppercase;
}
.slide h1{font-size:20px;line-height:1.3;margin:8px 0 6px;color:#fff;font-weight:800;pointer-events:auto}
.slide h1 a{color:#fff}
.slider-arrow{
position:absolute;top:50%;transform:translateY(-50%);
width:36px;height:36px;border-radius:50%;
border:1px solid rgba(255,255,255,.15);
background:rgba(15,23,42,.8);color:#fff;cursor:pointer;z-index:4;
font-size:12px;
}
.slider-arrow.left{left:10px}.slider-arrow.right{right:10px}
/* POST GRID */
.section-head{display:flex;align-items:center;justify-content:space-between;margin:24px 0 16px}
.section-head h2{font-size:20px;margin:0;font-weight:800;display:flex;align-items:center;gap:8px}
.section-head h2:before{
content:'';width:4px;height:18px;
background:linear-gradient(180deg,var(--rose),var(--indigo));
border-radius:999px;display:inline-block;
}
.sidebar-grid{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start;width:100%}
.blog-posts{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
width:100%;
}
.post-outer{
background:var(--card);
border:1px solid var(--border);
border-radius:18px;
overflow:hidden;
display:flex;
flex-direction:column;
}
/* 3:4 ASPECT RATIO BOX */
.post-thumb-box{
width:100%;
aspect-ratio:3/4;
overflow:hidden;
position:relative;
background:#0f172a;
}
.video-overlay-wrapper{
position:relative;
width:100%;
height:100%;
}
.post-thumb-box video,
.post-thumb-box iframe,
.post-thumb-box img {
width:100%!important;
height:100%!important;
object-fit:cover!important;
border:none!important;
display:block!important;
}
.play-trigger-btn{
position:absolute;
inset:0;
z-index:10;
background:transparent;
cursor:pointer;
}
.post-title{
padding:12px 14px 12px!important;
font-size:15px!important;
font-weight:700!important;
line-height:1.35!important;
margin:0!important;
}
.post-title a{color:#f8fafc!important}
.post-body{display:none!important;}
/* FLOATING LIGHTBOX / MODAL VIDEO PLAYER WITH BLUR BACKGROUND */
.video-modal-backdrop{
position:fixed;
inset:0;
z-index:99999;
background:rgba(2, 6, 23, 0.85);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
display:none;
align-items:center;
justify-content:center;
padding:16px;
opacity:0;
transition:opacity 0.3s ease;
}
.video-modal-backdrop.active{
display:flex;
opacity:1;
}
.video-modal-container{
width:100%;
max-width:520px;
background:rgba(15, 23, 42, 0.95);
border:1px solid var(--border);
border-radius:24px;
padding:16px;
box-shadow:0 25px 50px -12px rgba(0,0,0,0.7);
position:relative;
max-height:92vh;
overflow-y:auto;
display:flex;
flex-direction:column;
gap:10px;
animation:modalUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalUp{
from{transform:scale(0.9) translateY(20px);}
to{transform:scale(1) translateY(0);}
}
.modal-close-btn{
position:absolute;
top:12px;
right:12px;
width:32px;
height:32px;
border-radius:50%;
background:rgba(255,255,255,0.1);
border:none;
color:#fff;
font-size:16px;
cursor:pointer;
z-index:20;
display:grid;
place-items:center;
transition:background 0.2s;
}
.modal-close-btn:hover{background:var(--rose);}
.modal-video-title{
font-size:16px;
font-weight:800;
color:#fff;
padding-right:36px;
line-height:1.3;
}
.modal-video-wrapper{
width:100%;
aspect-ratio:3/4;
border-radius:16px;
overflow:hidden;
background:#000;
position:relative;
}
.modal-video-wrapper video,
.modal-video-wrapper iframe{
width:100%!important;
height:100%!important;
object-fit:cover!important;
}
/* BLOG COMMENTS STYLING WITH PROFILE PICTURE SUPPORT */
.comments .comment-block {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px;
margin-bottom: 12px;
}
.comments .avatar-image-container {
float: left;
margin-right: 12px;
}
.comments .author-avatar {
width: 40px!important;
height: 40px!important;
border-radius: 50%!important;
object-fit: cover!important;
border: 2px solid var(--rose);
}
.comments .comment-author {
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.comments .comment-body {
color: #cbd5e1;
font-size: 14px;
}
.comments .comment-timestamp a {
color: var(--muted);
font-size: 12px;
}
/* DYNAMIC NUMBERED PAGINATION */
#blog-pager{
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
margin:28px 0 16px!important;
clear:both!important;
width:100%;
}
#blog-pager a, #blog-pager .current-page{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-width:38px!important;
height:38px!important;
padding:0 10px!important;
border-radius:10px!important;
background:rgba(30,41,59,.5)!important;
border:1px solid var(--border)!important;
color:#f8fafc!important;
font-weight:700!important;
font-size:13px!important;
}
#blog-pager .current-page{
background:linear-gradient(135deg,#f43f5e,#6366f1)!important;
border-color:transparent!important;
}
/* SIDEBAR WIDGETS */
.sidebar{width:100%}
.sidebar .widget{
background:var(--card);
border:1px solid var(--border);
border-radius:18px;
padding:16px;
margin-bottom:20px;
}
.sidebar h2{font-size:15px;margin:0 0 12px;color:#fff;font-weight:700}
/* RESPONSIVE LAYOUT MOBILE FIXES */
@media(max-width:1024px){
.blog-posts{grid-template-columns:repeat(2,minmax(0,1fr))}
.sidebar-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
.topbar{min-height:56px}
.nav{display:none}
.mobile-btn{display:block}
.mobile-nav.open{display:block}
.brand{font-size:18px;gap:8px}
.brand-icon{width:32px;height:32px;border-radius:8px}
.search{width:120px}
.search input{padding:6px 8px 6px 28px;font-size:11px}
.hero{min-height:240px;margin-top:12px;border-radius:16px}
.slide{min-height:240px}
.slide-content{padding:14px}
.slide h1{font-size:16px}
.blog-posts{grid-template-columns:repeat(1,1fr);gap:16px}
}