@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"); :root {
--thw-matrix-green: #00ff41;
--thw-matrix-green-dim: rgba(0, 255, 65, 0.1);
--thw-matrix-green-glow: rgba(0, 255, 65, 0.4);
--thw-critical-red: #ff003c;
--thw-critical-glow: rgba(255, 0, 60, 0.4);
--thw-high-orange: #ff8c00;
--thw-high-glow: rgba(255, 140, 0, 0.3);
--thw-medium-yellow: #ffeb3b;
--thw-medium-glow: rgba(255, 235, 59, 0.3);
--thw-bg-dark: #0a0a0a;
--thw-bg-card: #0d0d0d;
--thw-border-dim: #1a1a1a;
--thw-border-bright: #333;
--thw-text-primary: #e0e0e0;
--thw-text-dim: #666;
--thw-font-mono: 'JetBrains Mono', 'Courier New', monospace;
} .thw-cve-container::before,
.thw-cve-single::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.03) 0px,
rgba(0, 0, 0, 0.03) 1px,
transparent 1px,
transparent 2px
);
pointer-events: none;
z-index: 1;
opacity: 0.5;
}
.thw-cve-container,
.thw-cve-single {
position: relative;
}
.thw-cve-container > *,
.thw-cve-single > * {
position: relative;
z-index: 2;
} .thw-cve-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
opacity: 0.02;
pointer-events: none;
z-index: 1;
} .thw-cve-container {
background: 
linear-gradient(rgba(0, 255, 65, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 65, 0.02) 1px, transparent 1px),
#0a0a0a;
background-size: 50px 50px, 50px 50px;
} .thw-cve-container,
.thw-cve-single,
.thw-cve-card,
a.thw-cve-id,
.thw-copy-btn,
.thw-export-btn,
.thw-severity-tab {
font-family: var(--thw-font-mono) !important;
} .thw-cve-single-body h3::before,
h3.thw-cve-main-title::after {
content: ' _';
color: var(--thw-matrix-green);
animation: thw-cursor-blink 1s step-end infinite;
margin-left: 5px;
}
@keyframes thw-cursor-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
} @keyframes thw-glitch-subtle {
0%, 100% {
text-shadow: none;
transform: translate(0);
}
10% {
text-shadow: 1px 0 #ff003c, -1px 0 #00ff41;
}
20% {
text-shadow: -1px 0 #ff003c, 1px 0 #00ff41;
transform: translate(-1px, 0);
}
30% {
text-shadow: 1px 0 #ff003c, -1px 0 #00ff41;
transform: translate(1px, 0);
}
40% {
text-shadow: none;
transform: translate(0);
}
} a.thw-cve-id.thw-glitch-active,
.thw-cve-title.thw-glitch-active {
animation: thw-glitch-subtle 0.3s ease-in-out;
} a.thw-cve-id:hover {
color: var(--thw-matrix-green) !important;
text-shadow: 0 0 8px var(--thw-matrix-green-glow);
transition: all 0.2s ease;
} @keyframes thw-typing-cursor {
0%, 100% { border-right-color: var(--thw-matrix-green); }
50% { border-right-color: transparent; }
}
.thw-cve-search-bar input[type="text"]:placeholder-shown {
border-right: 2px solid var(--thw-matrix-green);
animation: thw-typing-cursor 1s step-end infinite;
}
.thw-cve-search-bar input[type="text"]:focus {
border-right: none;
animation: none;
} @keyframes thw-pulse-glow {
0%, 100% {
box-shadow: 0 0 5px var(--thw-matrix-green), 0 0 10px var(--thw-matrix-green-glow);
transform: scale(1);
}
50% {
box-shadow: 0 0 15px var(--thw-matrix-green), 0 0 25px var(--thw-matrix-green-glow);
transform: scale(1.05);
}
}
.thw-new-badge {
animation: thw-pulse-glow 2s ease-in-out infinite !important;
} span.thw-cve-badge.critical,
.thw-cve-badge-lg.critical {
box-shadow: 0 0 10px var(--thw-critical-red), 0 0 20px var(--thw-critical-glow), inset 0 0 10px rgba(255, 0, 60, 0.2) !important;
text-shadow: 0 0 5px var(--thw-critical-red);
animation: thw-critical-pulse 2s ease-in-out infinite;
}
@keyframes thw-critical-pulse {
0%, 100% { box-shadow: 0 0 10px var(--thw-critical-red), 0 0 20px var(--thw-critical-glow); }
50% { box-shadow: 0 0 20px var(--thw-critical-red), 0 0 40px var(--thw-critical-glow); }
}
span.thw-cve-badge.high,
.thw-cve-badge-lg.high {
box-shadow: 0 0 8px var(--thw-high-orange), 0 0 15px var(--thw-high-glow) !important;
text-shadow: 0 0 3px rgba(255, 140, 0, 0.5);
}
span.thw-cve-badge.medium,
.thw-cve-badge-lg.medium {
box-shadow: 0 0 6px var(--thw-medium-yellow), 0 0 12px var(--thw-medium-glow) !important;
} div.thw-cve-card {
position: relative;
background: linear-gradient(135deg, #0d0d0d 0%, #111 50%, #0d0d0d 100%) !important;
overflow: visible;
} div.thw-cve-card::after {
content: '';
position: absolute;
top: 8px;
right: 8px;
width: 20px;
height: 20px;
border-top: 2px solid var(--thw-border-bright);
border-right: 2px solid var(--thw-border-bright);
opacity: 0.3;
transition: all 0.3s ease;
}
div.thw-cve-card:hover::after {
border-color: var(--thw-matrix-green);
opacity: 0.8;
width: 25px;
height: 25px;
} @keyframes thw-scan-line {
0% { top: 0; opacity: 1; }
100% { top: 100%; opacity: 0; }
}
div.thw-cve-card.scanning::before {
content: '';
position: absolute;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--thw-matrix-green), transparent);
animation: thw-scan-line 0.8s ease-out;
z-index: 10;
} div.thw-cve-card:hover {
transform: translateX(4px) translateY(-2px) !important;
box-shadow: 
-4px 4px 0 var(--thw-matrix-green-dim),
-8px 8px 20px rgba(0, 255, 65, 0.1) !important;
}
div.thw-cve-card.severity-critical:hover {
box-shadow: 
-4px 4px 0 rgba(255, 0, 60, 0.2),
-8px 8px 30px var(--thw-critical-glow) !important;
}
div.thw-cve-card.severity-high:hover {
box-shadow: 
-4px 4px 0 rgba(255, 140, 0, 0.2),
-8px 8px 25px var(--thw-high-glow) !important;
} .thw-cvss-gauge {
background: linear-gradient(180deg, #0f0f0f 0%, #080808 100%) !important;
border: 1px solid var(--thw-border-bright) !important;
box-shadow: 
0 4px 30px rgba(0, 0, 0, 0.8),
inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
} @keyframes thw-needle-swing {
0% { transform: rotate(-90deg); }
60% { transform: rotate(var(--needle-target)); }
80% { transform: rotate(calc(var(--needle-target) - 5deg)); }
100% { transform: rotate(var(--needle-target)); }
}
.thw-gauge-needle {
animation: thw-needle-swing 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
transform-origin: 100px 100px;
} .thw-cvss-gauge.critical {
box-shadow: 
0 4px 30px rgba(0, 0, 0, 0.8),
0 0 30px var(--thw-critical-glow),
inset 0 0 20px rgba(255, 0, 60, 0.1) !important;
}
.thw-cvss-gauge.high {
box-shadow: 
0 4px 30px rgba(0, 0, 0, 0.8),
0 0 25px var(--thw-high-glow),
inset 0 0 15px rgba(255, 140, 0, 0.1) !important;
} .thw-score-num {
text-shadow: 0 0 10px currentColor;
}
.thw-cvss-gauge.critical .thw-score-num {
color: var(--thw-critical-red) !important;
text-shadow: 0 0 15px var(--thw-critical-red);
}
.thw-cvss-gauge.high .thw-score-num {
color: var(--thw-high-orange) !important;
text-shadow: 0 0 12px var(--thw-high-orange);
} @keyframes thw-copy-success {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.thw-copy-btn.copied {
animation: thw-copy-success 0.3s ease-out !important;
} .thw-copy-toast {
background: linear-gradient(135deg, #111 0%, #0a0a0a 100%) !important;
border: 1px solid var(--thw-matrix-green) !important;
color: var(--thw-matrix-green) !important;
font-family: var(--thw-font-mono) !important;
box-shadow: 
0 0 20px var(--thw-matrix-green-glow),
0 10px 40px rgba(0, 0, 0, 0.5) !important;
}
.thw-copy-toast::before {
content: '> ';
opacity: 0.7;
} @keyframes thw-matrix-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.thw-loading-skeleton {
background: linear-gradient(
90deg,
var(--thw-bg-card) 0%,
var(--thw-matrix-green-dim) 50%,
var(--thw-bg-card) 100%
);
background-size: 200% 100%;
animation: thw-matrix-shimmer 1.5s infinite;
border-radius: 4px;
}
.thw-cve-card.loading {
min-height: 120px;
}
.thw-cve-card.loading .thw-cve-header,
.thw-cve-card.loading .thw-cve-body,
.thw-cve-card.loading .thw-cve-footer {
background: linear-gradient(
90deg,
var(--thw-bg-card) 0%,
var(--thw-matrix-green-dim) 50%,
var(--thw-bg-card) 100%
);
background-size: 200% 100%;
animation: thw-matrix-shimmer 1.5s infinite;
border-radius: 4px;
color: transparent !important;
} .thw-keyboard-hint {
background: linear-gradient(135deg, #111 0%, #0a0a0a 100%) !important;
border: 1px solid var(--thw-border-bright) !important;
font-family: var(--thw-font-mono) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}
.thw-keyboard-hint kbd {
background: var(--thw-bg-dark) !important;
border: 1px solid var(--thw-matrix-green) !important;
color: var(--thw-matrix-green) !important;
box-shadow: 0 0 5px var(--thw-matrix-green-dim);
padding: 3px 8px !important;
border-radius: 3px;
} .thw-time-blink {
animation: thw-cursor-blink 1s step-end infinite;
} .thw-ascii-divider {
text-align: center;
color: var(--thw-border-bright);
font-family: var(--thw-font-mono);
font-size: 0.8em;
margin: 20px 0;
letter-spacing: 2px;
opacity: 0.5;
}
.thw-ascii-divider::before {
content: '═══════════════════════════════════════';
} .thw-cve-search-bar input[type="text"] {
caret-color: var(--thw-matrix-green) !important;
text-shadow: 0 0 1px var(--thw-matrix-green-dim);
}
.thw-cve-search-bar input[type="text"]:focus {
background: linear-gradient(180deg, #000 0%, #050505 100%) !important;
box-shadow: 
0 0 20px var(--thw-matrix-green-glow),
inset 0 0 30px rgba(0, 255, 65, 0.03),
0 0 0 1px var(--thw-matrix-green) !important;
} .thw-search-input-wrap:focus-within .thw-search-icon {
animation: thw-pulse-glow 1.5s ease-in-out infinite;
} .thw-cve-search-bar button,
.thw-export-btn,
.thw-btn-primary {
position: relative;
overflow: hidden;
}
.thw-cve-search-bar button::before,
.thw-export-btn::before,
.thw-btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.5s ease;
}
.thw-cve-search-bar button:hover::before,
.thw-export-btn:hover::before,
.thw-btn-primary:hover::before {
left: 100%;
} .thw-severity-tabs {
background: linear-gradient(180deg, #111 0%, #0d0d0d 100%) !important;
border: 1px solid var(--thw-border-dim) !important;
}
.thw-severity-tab {
position: relative;
overflow: hidden;
}
.thw-severity-tab::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0;
background: var(--thw-matrix-green-dim);
transition: height 0.3s ease;
}
.thw-severity-tab:hover::before {
height: 100%;
}
.thw-severity-tab.active::before {
height: 100%;
background: var(--thw-matrix-green-dim);
}
.thw-severity-tab[data-severity="critical"].active::before {
background: rgba(255, 0, 60, 0.1);
}
.thw-severity-tab[data-severity="high"].active::before {
background: rgba(255, 140, 0, 0.1);
} .thw-vector-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
}
.thw-vector-item {
background: linear-gradient(135deg, #111 0%, #0d0d0d 100%);
border: 1px solid var(--thw-border-dim);
padding: 12px;
text-align: center;
transition: all 0.3s ease;
}
.thw-vector-item:hover {
border-color: var(--thw-matrix-green);
box-shadow: 0 0 15px var(--thw-matrix-green-dim);
transform: translateY(-2px);
}
.thw-vector-label {
display: block;
font-size: 0.7em;
color: var(--thw-text-dim);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
}
.thw-vector-val {
display: block;
font-size: 0.9em;
font-weight: 600;
color: var(--thw-matrix-green);
} .thw-vector-val.high-impact {
color: var(--thw-critical-red);
}
.thw-vector-val.medium-impact {
color: var(--thw-high-orange);
} .thw-cve-references ul {
list-style: none;
padding: 0;
margin: 0;
}
.thw-cve-references li {
padding: 10px 15px;
margin-bottom: 8px;
background: var(--thw-bg-card);
border-left: 3px solid var(--thw-border-dim);
transition: all 0.3s ease;
}
.thw-cve-references li:hover {
border-left-color: var(--thw-matrix-green);
background: linear-gradient(90deg, var(--thw-matrix-green-dim), transparent);
padding-left: 20px;
}
.thw-cve-references li::before {
content: '→ ';
color: var(--thw-matrix-green);
opacity: 0;
transition: opacity 0.3s ease;
}
.thw-cve-references li:hover::before {
opacity: 1;
} .thw-resource-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
}
.thw-resource-link {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 15px;
background: linear-gradient(135deg, #111 0%, #0d0d0d 100%);
border: 1px solid var(--thw-border-dim);
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.thw-resource-link::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--thw-matrix-green);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.thw-resource-link:hover::before {
transform: scaleX(1);
}
.thw-resource-link:hover {
border-color: var(--thw-matrix-green);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 255, 65, 0.1);
}
.thw-resource-icon {
color: var(--thw-text-dim);
margin-bottom: 10px;
transition: all 0.3s ease;
}
.thw-resource-link:hover .thw-resource-icon {
color: var(--thw-matrix-green);
transform: scale(1.1);
}
.thw-resource-name {
color: #fff;
font-weight: 600;
font-size: 0.9em;
margin-bottom: 5px;
}
.thw-resource-desc {
color: var(--thw-text-dim);
font-size: 0.75em;
} .thw-scroll-top {
background: linear-gradient(135deg, #111 0%, #0a0a0a 100%) !important;
border: 1px solid var(--thw-border-bright) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}
.thw-scroll-top:hover {
border-color: var(--thw-matrix-green) !important;
box-shadow: 
0 0 20px var(--thw-matrix-green-glow),
0 4px 20px rgba(0, 0, 0, 0.5) !important;
} nav.thw-breadcrumbs {
background: linear-gradient(90deg, #111 0%, #0d0d0d 100%) !important;
border-left: 3px solid var(--thw-matrix-green) !important;
}
nav.thw-breadcrumbs a {
position: relative;
}
nav.thw-breadcrumbs a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: var(--thw-matrix-green);
transition: width 0.3s ease;
}
nav.thw-breadcrumbs a:hover::after {
width: 100%;
} a.thw-page-btn {
position: relative;
overflow: hidden;
}
a.thw-page-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: var(--thw-matrix-green);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.3s ease, height 0.3s ease;
opacity: 0.2;
}
a.thw-page-btn:hover::after {
width: 200%;
height: 200%;
} .thw-share-btn {
position: relative;
overflow: hidden;
}
.thw-share-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: currentColor;
opacity: 0;
transition: opacity 0.3s ease;
}
.thw-share-btn:hover::before {
opacity: 0.1;
} @media (max-width: 768px) {
.thw-cve-container::before,
.thw-cve-container::after {
display: none; }
div.thw-cve-card:hover {
transform: translateX(2px) !important;
}
.thw-resource-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.thw-resource-grid {
grid-template-columns: 1fr;
}
} @media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}  .thw-vector-val[data-value="Network"],
.thw-vector-val[data-value="NETWORK"] {
color: var(--thw-critical-red) !important;
}
.thw-vector-val[data-value="Adjacent"],
.thw-vector-val[data-value="ADJACENT_NETWORK"] {
color: var(--thw-high-orange) !important;
}
.thw-vector-val[data-value="Local"],
.thw-vector-val[data-value="LOCAL"] {
color: var(--thw-medium-yellow) !important;
}
.thw-vector-val[data-value="Physical"],
.thw-vector-val[data-value="PHYSICAL"] {
color: var(--thw-matrix-green) !important;
} .thw-vector-val[data-value="High"],
.thw-vector-val[data-value="HIGH"] {
color: var(--thw-critical-red) !important;
}
.thw-vector-val[data-value="Low"],
.thw-vector-val[data-value="LOW"] {
color: var(--thw-medium-yellow) !important;
}
.thw-vector-val[data-value="None"],
.thw-vector-val[data-value="NONE"] {
color: var(--thw-matrix-green) !important;
} .thw-vector-val[data-value="Changed"],
.thw-vector-val[data-value="CHANGED"] {
color: var(--thw-critical-red) !important;
}
.thw-vector-val[data-value="Unchanged"],
.thw-vector-val[data-value="UNCHANGED"] {
color: var(--thw-matrix-green) !important;
} article.thw-cve-single {
position: relative;
overflow: hidden;
} article.thw-cve-single::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.03) 0px,
rgba(0, 0, 0, 0.03) 1px,
transparent 1px,
transparent 2px
);
pointer-events: none;
z-index: 1;
opacity: 0.4;
}
article.thw-cve-single > * {
position: relative;
z-index: 2;
} .thw-cve-title {
position: relative;
}
.thw-cve-title:hover {
animation: thw-glitch 0.3s ease-in-out;
} .thw-cve-badge-lg.critical {
animation: thw-critical-pulse 2s ease-in-out infinite;
} .thw-cpe-list li {
transition: all 0.3s ease;
}
.thw-cpe-list li:hover {
border-left-color: var(--thw-matrix-green);
background: linear-gradient(90deg, var(--thw-matrix-green-dim), transparent);
padding-left: 15px;
} .thw-cve-weaknesses li {
padding: 8px 12px;
background: rgba(255, 140, 0, 0.1);
border-left: 3px solid var(--thw-high-orange);
margin-bottom: 10px;
transition: all 0.3s ease;
}
.thw-cve-weaknesses li:hover {
background: rgba(255, 140, 0, 0.15);
padding-left: 20px;
} .thw-copy-btn:focus,
.thw-export-btn:focus,
.thw-share-btn:focus,
.thw-severity-tab:focus,
a.thw-page-btn:focus {
outline: 2px solid var(--thw-matrix-green);
outline-offset: 2px;
} @media print {
.thw-cve-container::before,
.thw-cve-container::after,
article.thw-cve-single::before,
.thw-matrix-canvas {
display: none !important;
}
* {
animation: none !important;
transition: none !important;
}
} body.thw-hacker-mode {
background: #000 !important;
}
body.thw-hacker-mode .thw-cve-container,
body.thw-hacker-mode .thw-cve-single {
background: #000 !important;
border-color: var(--thw-matrix-green) !important;
box-shadow: 
0 0 30px var(--thw-matrix-green-glow),
inset 0 0 50px rgba(0, 255, 65, 0.05) !important;
}
body.thw-hacker-mode .thw-cve-card {
border-color: var(--thw-matrix-green) !important;
box-shadow: 0 0 15px var(--thw-matrix-green-dim) !important;
}
body.thw-hacker-mode * {
color: var(--thw-matrix-green) !important;
}
body.thw-hacker-mode a {
color: #00ff41 !important;
}
body.thw-hacker-mode .thw-cve-badge,
body.thw-hacker-mode .thw-cve-badge-lg,
body.thw-hacker-mode .thw-new-badge {
background: #000 !important;
border: 1px solid var(--thw-matrix-green) !important;
color: var(--thw-matrix-green) !important;
}
body.thw-hacker-mode .thw-matrix-canvas {
opacity: 0.1 !important;
} body.thw-hacker-mode .thw-cve-container::before {
opacity: 0.8 !important;
background: repeating-linear-gradient(
0deg,
rgba(0, 255, 65, 0.03) 0px,
rgba(0, 255, 65, 0.03) 1px,
transparent 1px,
transparent 2px
) !important;
}