/*
Theme Name: Yann 2077 Stealth
Author: YC-77
Version: 1.0.0
*/
:root {
--zvxq-blood: #FF0F39;
--zvxq-cyan: #00F3FF;
--zvxq-void: #050505;
--zvxq-phantom: #1A1A1A;
--zvxq-font: 'Noto Sans KR', sans-serif;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
body {
background-color: var(--zvxq-void);
color: #e0e0e0;
font-family: var(--zvxq-font);
overflow-x: hidden;
line-height: 1.6;
font-size: 16px;
}
a {
text-decoration: none;
color: inherit;
transition: 0.3s;
}
.zvxq-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
.zvxq-glitch {
position: relative;
color: var(--zvxq-cyan);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
}
.zvxq-glitch::before, .zvxq-glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--zvxq-void);
}
.zvxq-glitch::before {
left: 2px;
text-shadow: -1px 0 var(--zvxq-blood);
clip: rect(44px, 450px, 56px, 0);
animation: zvxq-anim-glitch 5s infinite linear alternate-reverse;
}
.zvxq-glitch::after {
left: -2px;
text-shadow: -1px 0 var(--zvxq-cyan);
clip: rect(44px, 450px, 56px, 0);
animation: zvxq-anim-glitch2 5s infinite linear alternate-reverse;
}
@keyframes zvxq-anim-glitch {
0% { clip: rect(38px, 9999px, 81px, 0); }
20% { clip: rect(4px, 9999px, 86px, 0); }
40% { clip: rect(56px, 9999px, 2px, 0); }
60% { clip: rect(12px, 9999px, 43px, 0); }
80% { clip: rect(66px, 9999px, 30px, 0); }
100% { clip: rect(78px, 9999px, 19px, 0); }
}
@keyframes zvxq-anim-glitch2 {
0% { clip: rect(18px, 9999px, 91px, 0); }
20% { clip: rect(44px, 9999px, 16px, 0); }
40% { clip: rect(16px, 9999px, 92px, 0); }
60% { clip: rect(72px, 9999px, 13px, 0); }
80% { clip: rect(6px, 9999px, 60px, 0); }
100% { clip: rect(28px, 9999px, 9px, 0); }
}
.zvxq-btn {
display: inline-block;
background: var(--zvxq-blood);
color: #fff;
padding: 15px 30px;
font-weight: 700;
border: 1px solid var(--zvxq-blood);
box-shadow: 0 0 15px rgba(255, 15, 57, 0.4);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
cursor: pointer;
text-transform: uppercase;
}
.zvxq-btn:hover {
background: transparent;
color: var(--zvxq-blood);
box-shadow: 0 0 25px rgba(255, 15, 57, 0.8);
}
.zvxq-live-feed {
position: fixed;
bottom: 80px;
left: 20px;
background: rgba(5, 5, 5, 0.9);
border-left: 3px solid var(--zvxq-cyan);
padding: 12px 20px;
border-radius: 0 4px 4px 0;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
z-index: 9998;
font-size: 13px;
color: #fff;
display: flex;
align-items: center;
gap: 10px;
animation: zvxq-feed-fade 8s infinite ease-in-out;
opacity: 0;
backdrop-filter: blur(5px);
}
.zvxq-live-feed::before {
content: '';
width: 8px;
height: 8px;
background: var(--zvxq-blood);
border-radius: 50%;
box-shadow: 0 0 5px var(--zvxq-blood);
}
.zvxq-live-feed span {
font-weight: 700;
color: var(--zvxq-cyan);
}
@keyframes zvxq-feed-fade {
0%, 10% { opacity: 0; transform: translateY(20px); }
15%, 85% { opacity: 1; transform: translateY(0); }
90%, 100% { opacity: 0; transform: translateY(-20px); }
}
.zvxq-live-feed::after {
content: '시스템: VIP *** 님이 보안망에 접속했습니다.';
}
.zvxq-tab-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: rgba(26, 26, 26, 0.85);
backdrop-filter: blur(12px);
display: flex;
justify-content: space-around;
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.1);
z-index: 9999;
}
.zvxq-tab-item {
flex: 1;
text-align: center;
color: #888;
font-size: 11px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.zvxq-tab-item.active {
color: var(--zvxq-blood);
text-shadow: 0 0 10px rgba(255, 15, 57, 0.5);
}
.zvxq-tab-icon {
font-size: 20px;
}
@media (min-width: 769px) {
.zvxq-tab-bar { display: none; }
.zvxq-live-feed { bottom: 30px; }
}
.zvxq-drawer {
position: fixed;
top: 0;
right: -100%;
width: 80%;
max-width: 300px;
height: 100%;
background: var(--zvxq-phantom);
z-index: 10000;
transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1);
border-left: 1px solid var(--zvxq-blood);
padding: 40px 20px;
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8);
}
.zvxq-drawer.open {
right: 0;
}
.zvxq-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(3px);
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: 0.3s;
}
.zvxq-overlay.active {
opacity: 1;
pointer-events: auto;
}