/* =========================================================
Zig Interconnected — Neon Dark Skin Override
Target: EyouCMS default PC template (pintuer grid)
Version: 2026-07-26
How to use:
1. Upload to /template/pc/skin/style/skin-override.css
2. Add to after existing style.css:
3. Refresh homepage. Full rollback = remove the .
========================================================= */
/* ---------- Fonts ---------- */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap");
/* ---------- Design tokens ---------- */
:root{
--z-bg:#050814;
--z-bg-2:#0a0f24;
--z-panel:rgba(255,255,255,0.03);
--z-panel-2:rgba(255,255,255,0.06);
--z-border:rgba(120,160,255,0.14);
--z-border-2:rgba(120,160,255,0.32);
--z-text:#e6ecff;
--z-dim:#8a94b8;
--z-mute:#5b6684;
--z-cyan:#00e5ff;
--z-violet:#7c5cff;
--z-magenta:#ff4dcb;
--z-mint:#4dffb5;
--z-grad:linear-gradient(90deg,#00e5ff 0%,#7c5cff 55%,#ff4dcb 100%);
--z-grad-2:linear-gradient(90deg,#4dffb5 0%,#00e5ff 55%,#7c5cff 100%);
--z-shadow:0 20px 60px -20px rgba(0,229,255,.45);
--z-shadow-2:0 20px 60px -20px rgba(124,92,255,.5);
}
/* ---------- Base ---------- */
html,body{
background:var(--z-bg)!important;
color:var(--z-text)!important;
font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif!important;
-webkit-font-smoothing:antialiased;
}
body{
position:relative;
overflow-x:hidden;
background-image:
linear-gradient(rgba(120,160,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(120,160,255,.05) 1px,transparent 1px)!important;
background-size:56px 56px!important;
background-attachment:fixed!important;
}
body::before,body::after{
content:"";position:fixed;z-index:0;pointer-events:none;
filter:blur(120px);border-radius:50%;opacity:.5;
}
body::before{
width:640px;height:640px;top:-160px;left:-160px;
background:radial-gradient(circle,#00e5ff,transparent 70%);
}
body::after{
width:720px;height:720px;top:200px;right:-200px;
background:radial-gradient(circle,#7c5cff,transparent 70%);
}
/* keep content above bg */
header, .layout, footer, section, #pc-header{position:relative;z-index:1;}
a{color:var(--z-text);}
a:hover{color:var(--z-cyan);}
/* neutralize legacy backgrounds */
.bg-gray{background:transparent!important;}
.bg-white{background:var(--z-panel)!important;color:var(--z-text)!important;border:1px solid var(--z-border);border-radius:16px;}
.bg-main{background:linear-gradient(180deg,#070b1c,#050814)!important;}
.bg-yellow{background:var(--z-grad)!important;color:#050814!important;}
.text-white{color:var(--z-text)!important;}
.text-gray{color:var(--z-dim)!important;}
.text-main{color:var(--z-text)!important;}
.text-sub{color:var(--z-cyan)!important;}
/* Selection */
::selection{background:var(--z-cyan);color:#050814;}
/* ---------- Header / Nav ---------- */
#pc-header{
background:rgba(5,8,20,.6)!important;
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border-bottom:1px solid var(--z-border);
position:sticky!important;top:0;z-index:100;
}
#pc-header .navbar{background:transparent!important;}
#pc-header .logo img{filter:drop-shadow(0 0 12px rgba(0,229,255,.4)) brightness(1.1);}
.nav-menu > li > a,
.nav.nav-menu a,
.nav-menu .first-level{
color:var(--z-dim)!important;
font-weight:500;
padding:8px 18px!important;
border-radius:999px;
transition:.25s;
}
.nav-menu > li:hover > a,
.nav-menu > li.active > a{
color:#fff!important;
background:var(--z-panel-2);
box-shadow:inset 0 0 0 1px var(--z-border-2);
}
.nav-menu .drop-menu{
background:rgba(10,15,36,.95)!important;
border:1px solid var(--z-border-2)!important;
border-radius:14px!important;
box-shadow:0 20px 60px -20px rgba(0,0,0,.6)!important;
padding:8px 0!important;
backdrop-filter:blur(18px);
}
.nav-menu .drop-menu li a{color:var(--z-dim)!important;padding:8px 20px!important;}
.nav-menu .drop-menu li a:hover{color:var(--z-cyan)!important;background:var(--z-panel);}
.search-ico,.user-ico{color:var(--z-text)!important;}
.searchBar-m .input{background:var(--z-panel-2)!important;color:var(--z-text)!important;border:1px solid var(--z-border-2)!important;}
/* ---------- Slides / hero ---------- */
.slides.owl-carousel .item img{
border-radius:24px;
box-shadow:0 30px 80px -20px rgba(0,229,255,.35),
0 20px 60px -30px rgba(124,92,255,.5);
}
.owl-carousel .owl-dots .owl-dot span{background:var(--z-border-2)!important;}
.owl-carousel .owl-dots .owl-dot.active span{
background:var(--z-grad)!important;width:24px!important;
}
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next{
background:var(--z-panel-2)!important;
border:1px solid var(--z-border-2)!important;
backdrop-filter:blur(10px);
}
/* ---------- Section titles ---------- */
.title-c h3{
color:var(--z-text)!important;
font-size:44px!important;
font-weight:900!important;
letter-spacing:-.01em;
background:var(--z-grad);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
padding-top:20px;
}
.title-c h3:before{
background:var(--z-grad)!important;
height:4px!important;width:60px!important;
margin-left:-30px!important;
border-radius:2px;
box-shadow:0 0 20px rgba(0,229,255,.7);
}
.title-c h3:after{
content:attr(data-en);
display:block;
font-family:"Orbitron",sans-serif;
font-size:11px;letter-spacing:.35em;
color:var(--z-mute);
margin-top:22px;
-webkit-text-fill-color:var(--z-mute);
}
/* ---------- Product Tabs ---------- */
.tab-normal .tab-nav{
display:inline-flex;
padding:6px;
background:var(--z-panel);
border:1px solid var(--z-border);
border-radius:999px;
gap:4px;
}
.tab-normal .tab-nav li{
border:0!important;
background:transparent!important;
border-radius:999px!important;
overflow:hidden;
}
.tab-normal .tab-nav li a{
color:var(--z-dim)!important;
padding:10px 24px!important;
border-radius:999px;
transition:.25s;
font-size:14px;
}
.tab-normal .tab-nav li.active a,
.tab-normal .tab-nav li:hover a{
background:var(--z-grad)!important;
color:#050814!important;
font-weight:700;
}
/* ---------- Product cards ---------- */
.carousel-pro .media,
.carousel-pro .media.bg-white{
background:var(--z-panel)!important;
border:1px solid var(--z-border)!important;
border-radius:20px!important;
overflow:hidden!important;
transition:.35s!important;
}
.carousel-pro .media:hover{
transform:translateY(-6px);
border-color:var(--z-border-2)!important;
box-shadow:var(--z-shadow-2)!important;
}
.carousel-pro .padding-large{padding:20px!important;}
.carousel-pro .media img{border-radius:14px;transition:.5s;}
.carousel-pro .media:hover img{transform:scale(1.03);}
.carousel-pro .media-body h2 a{
color:var(--z-text)!important;
font-size:15px!important;
font-weight:600!important;
display:block;
padding:14px 4px 4px;
}
.carousel-pro .media:hover .media-body h2 a{color:var(--z-cyan)!important;}
/* ---------- Solutions / media-img ---------- */
.media-img{
border-radius:20px!important;
overflow:hidden!important;
border:1px solid var(--z-border);
transition:.35s;
background:var(--z-panel);
}
.media-img:hover{
border-color:var(--z-border-2);
transform:translateY(-4px);
box-shadow:var(--z-shadow);
}
.media-img img{transition:.6s;}
.media-img:hover img{transform:scale(1.06);}
.media-img .mask{
background:linear-gradient(180deg,rgba(5,8,20,0) 30%,rgba(5,8,20,.92) 100%)!important;
color:var(--z-text);
}
.media-img .mask .text-white{color:var(--z-text)!important;}
.media-img .linear-link{
background:linear-gradient(180deg,transparent,rgba(5,8,20,.85))!important;
}
.media-img .subtitle h2,
.media-img .subtitle h3{
font-weight:700!important;
text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.media-img .more{
display:inline-block;
font-family:"Orbitron",sans-serif;
font-size:12px;letter-spacing:.2em;
color:var(--z-cyan)!important;
}
/* ---------- News ---------- */
.home-news-l,.home-news-r{margin:0!important;}
.home-news-h .media-img{border-radius:22px!important;}
.home-news-h .media-img .post-title{
background:rgba(10,15,36,.9)!important;
border:1px solid var(--z-border-2)!important;
color:var(--z-text)!important;
border-radius:16px!important;
backdrop-filter:blur(12px);
box-shadow:0 20px 40px -10px rgba(0,0,0,.5)!important;
}
.home-news-h .media-img .post-title h3 a{color:var(--z-text)!important;}
.home-news-h .media-img:hover .post-title h3 a{color:var(--z-cyan)!important;}
.home-news-h .media-img .post-title .text-gray{color:var(--z-mute)!important;}
.home-news-h .button{
background:var(--z-grad)!important;
color:#050814!important;
border-radius:10px!important;
}
.home-news-c,
.home-news-c.bg-white{
background:var(--z-panel)!important;
border:1px solid var(--z-border)!important;
border-radius:16px!important;
padding:16px!important;
transition:.25s;
}
.home-news-c:hover{
border-color:var(--z-border-2)!important;
transform:translateX(4px);
background:var(--z-panel-2)!important;
box-shadow:none!important;
}
.home-news-c img{border-radius:12px!important;}
.home-news-c .news-time{border-right:1px solid var(--z-border)!important;}
.home-news-c .news-time .text-large{
font-size:38px!important;
background:var(--z-grad);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
font-weight:800;
}
.home-news-c .news-time .text-middle{color:var(--z-mute)!important;font-size:12px!important;}
.home-news-c .news-title h2 a{color:var(--z-text)!important;font-size:15px!important;}
.home-news-c:hover .news-title h2 a{color:var(--z-cyan)!important;}
.home-news-c .news-title .text-gray{color:var(--z-dim)!important;font-size:13px!important;}
/* ---------- Footer ---------- */
footer.bg-main{
border-top:1px solid var(--z-border);
color:var(--z-dim);
}
footer .container-layout{padding:60px 0 20px;}
footer h3{
color:var(--z-text)!important;
font-size:15px!important;
font-weight:700!important;
margin-bottom:20px!important;
position:relative;
padding-left:14px;
}
footer h3::before{
content:"";position:absolute;left:0;top:6px;
width:4px;height:14px;border-radius:2px;
background:var(--z-grad);
}
footer ul li a{
color:var(--z-dim)!important;
font-size:13px;
transition:.2s;
}
footer ul li a:hover{color:var(--z-cyan)!important;}
footer .contact .media-x .float-left.bg-yellow{
background:var(--z-panel-2)!important;
color:var(--z-cyan)!important;
border:1px solid var(--z-border-2)!important;
width:38px;height:38px;line-height:38px;
}
footer .qr{
background:var(--z-panel)!important;
border:1px solid var(--z-border);
border-radius:14px;
}
footer .qr img{border-radius:8px;}
footer .qr .text-gray{color:var(--z-dim)!important;}
.copyright{
border-top:1px solid var(--z-border);
padding:24px 0!important;
color:var(--z-mute)!important;
font-size:12px;
}
.copyright a{color:var(--z-dim)!important;}
.copyright a:hover{color:var(--z-cyan)!important;}
.flink a{
color:var(--z-dim)!important;
padding:4px 12px;
margin:4px 6px 4px 0;
border-radius:999px;
background:var(--z-panel);
border:1px solid var(--z-border);
font-size:12px;
transition:.2s;
display:inline-block;
}
.flink a:hover{color:var(--z-cyan)!important;border-color:var(--z-border-2);}
.tab-head .tab-nav li a{color:var(--z-text)!important;}
/* ---------- Buttons ---------- */
.button{border-radius:10px!important;transition:.25s;}
.button.bg-yellow{
background:var(--z-grad)!important;
color:#050814!important;
border:0!important;
box-shadow:var(--z-shadow);
font-weight:700;
}
.button.bg-yellow:hover{filter:brightness(1.1);transform:translateY(-2px);}
/* ---------- Inputs / dialog ---------- */
.input,.dialog input[type=text],.dialog input[type=password]{
background:var(--z-panel-2)!important;
color:var(--z-text)!important;
border:1px solid var(--z-border-2)!important;
border-radius:10px!important;
}
.input:focus{border-color:var(--z-cyan)!important;outline:none;box-shadow:0 0 0 3px rgba(0,229,255,.15)!important;}
.dialog,.dialog-body,.dialog-head{
background:rgba(10,15,36,.95)!important;
color:var(--z-text)!important;
border:1px solid var(--z-border-2)!important;
border-radius:18px!important;
}
.dialog .close{color:var(--z-dim)!important;}
.dialog .tab li{color:var(--z-text)!important;}
/* ---------- Layout tweaks ---------- */
.layout.bg-gray + .layout.bg-gray{margin-top:0;}
.blank-large{height:60px;}
.blank-big{height:40px;}
/* ---------- Responsive ---------- */
@media (max-width:960px){
.title-c h3{font-size:32px!important;}
#pc-header .nav-menu{display:none;}
}