html, body {
height: 100%;
margin: 0;
padding: 0;
}
/* Global Styles */
:root {
--cli-green: #0f0;
--cli-bg: #050505;
--cli-font: 'VT323', 'Courier New', Courier, monospace;
}
body {
margin: 0;
padding: 0;
font-family: var(--cli-font);
color: var(--cli-green);
scroll-behavior: smooth;
background-color: var(--cli-bg);
position: relative;
overflow-x: hidden;
min-height: 100dvh;
}
/* Nascondere la barra di scorrimento ma mantenere lo scrolling */
::-webkit-scrollbar {
display: none;
}
* {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
/* CRT Effects */
.crt::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
z-index: 999;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
.scanlines {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 998;
background: linear-gradient(
to bottom,
rgba(255,255,255,0),
rgba(255,255,255,0) 50%,
rgba(0,0,0,0.2) 50%,
rgba(0,0,0,0.2)
);
background-size: 100% 4px;
pointer-events: none;
}
/* Glitch Animation */
.glitch-text {
animation: glitch 1s linear infinite;
}
@keyframes glitch {
2%, 64% { transform: translate(2px,0) skew(0deg); }
4%, 60% { transform: translate(-2px,0) skew(0deg); }
62% { transform: translate(0,0) skew(5deg); }
}
/* Background Overlay with animated glitch */
#background-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('background.png') center center / contain no-repeat;
filter: grayscale(100%) blur(8px);
opacity: 0.4;
z-index: -2;
pointer-events: none;
animation: glitchBG 3s infinite;
}
@keyframes glitchBG {
0% { transform: translate(0, 0); }
20% { transform: translate(-5px, 5px); }
40% { transform: translate(5px, -5px); }
60% { transform: translate(-5px, -5px); }
80% { transform: translate(5px, 5px); }
100% { transform: translate(0, 0); }
}
/* Inject Page */
.inject-bg {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
background: black;
}
.inject-container h1 { margin-bottom: 20px; }
#injectBtn {
padding: 10px 30px;
font-family: var(--cli-font);
font-size: 1.5em;
background: transparent;
color: var(--cli-green);
border: 2px solid var(--cli-green);
cursor: pointer;
text-transform: uppercase;
transition: all 0.2s;
}
#injectBtn:hover {
background: var(--cli-green);
color: var(--cli-bg);
}
.console {
margin-top: 20px;
text-align: left;
width: 80%;
max-width: 600px;
font-size: 1.2em;
}
/* Home Page Terminal Layout */
.terminal-container {
padding: 40px;
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 10;
}
.terminal-header {
border-bottom: 1px dashed var(--cli-green);
margin-bottom: 20px;
padding-bottom: 10px;
}
.terminal-header h1 {
margin: 0;
font-size: 2rem;
}
.directory-list {
margin-bottom: 30px;
}
.file-link {
display: flex;
align-items: center;
background: transparent;
color: var(--cli-green);
border: 1px solid transparent;
font-family: var(--cli-font);
font-size: 1.5rem;
text-align: left;
cursor: pointer;
margin: 10px 0;
padding: 10px;
min-height: 48px; /* Ottimizzazione touch target */
transition: background 0.2s, color 0.2s, border 0.2s;
width: 100%;
}
.file-link:hover, .file-link:active {
background: var(--cli-green);
color: var(--cli-bg);
}
.file-viewer {
border: 1px solid var(--cli-green);
padding: 20px;
margin-bottom: 30px;
background: rgba(5, 5, 5, 0.85);
}
.file-viewer.hidden {
display: none;
}
.file-header {
display: flex;
justify-content: space-between;
border-bottom: 1px dashed var(--cli-green);
margin-bottom: 15px;
padding-bottom: 5px;
}
.close-btn {
background: transparent;
color: var(--cli-green);
border: 1px solid transparent;
font-family: var(--cli-font);
font-size: 1.5rem;
cursor: pointer;
min-height: 48px;
min-width: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.close-btn:hover, .close-btn:active {
color: #ff0000;
border-color: #ff0000;
}
.file-content p {
font-size: 1.2rem;
line-height: 1.5;
}
/* Specific Content Styles */
.cctv-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.cctv-feed {
border: 2px solid #555;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: #111;
color: #888;
}
.cctv-overlay {
position: absolute;
top: 5px;
left: 5px;
color: #fff;
font-size: 0.9rem;
background: rgba(255, 0, 0, 0.5);
padding: 2px 5px;
}
.cli-input {
background: transparent;
border: none;
border-bottom: 1px solid var(--cli-green);
color: var(--cli-green);
font-family: var(--cli-font);
font-size: 1.2rem;
padding: 10px 5px;
width: 100%;
max-width: 300px;
outline: none;
min-height: 48px;
}
.cli-button {
background: var(--cli-green);
color: var(--cli-bg);
border: none;
font-family: var(--cli-font);
font-size: 1.2rem;
padding: 10px 20px;
cursor: pointer;
min-height: 48px;
margin-top: 10px;
width: 100%;
max-width: 300px;
}
.botnet-form {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.ascii-face {
color: var(--cli-green);
font-size: 1rem;
line-height: 1.1;
text-align: center;
animation: glitch 0.5s infinite;
}
/* ARG Terminal */
.arg-terminal {
border-top: 1px dashed var(--cli-green);
padding-top: 20px;
margin-top: 40px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.blinking-prompt {
font-size: 1.5rem;
margin-right: 10px;
position: relative;
}
.blinking-prompt::after {
content: '_';
animation: blink 1s step-end infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
#commandInput {
background: transparent;
border: none;
color: var(--cli-green);
font-family: var(--cli-font);
font-size: 1.5rem;
outline: none;
flex-grow: 1;
}
#response {
width: 100%;
margin-top: 10px;
font-size: 1.2rem;
}
/* Video Background adjustments */
#bg-video {
position: fixed;
top: 50%; left: 50%;
width: auto; height: auto;
min-width: 100%; min-height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: 1;
pointer-events: none;
opacity: 0.15;
}
#bg-video { visibility: hidden; }
#bg-video.loaded { visibility: visible; }
/* Footer Social Links */
.terminal-footer {
margin-top: 50px;
padding-top: 20px;
border-top: 1px dashed var(--cli-green);
}
.footer-content {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.footer-eye-img {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 50%;
border: 1px solid var(--cli-green);
}
.social-links {
display: flex;
justify-content: center;
gap: 30px;
list-style: none;
padding: 0;
margin: 0;
}
.social-link {
color: var(--cli-green);
text-decoration: none;
font-size: 1.5rem;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.2s;
padding: 5px 10px;
}
.social-link:hover {
background: var(--cli-green);
color: var(--cli-bg);
}
.social-icon {
width: 24px;
height: 24px;
fill: currentColor;
}
/* Snake Game */
.snake-wrapper {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
align-items: flex-start;
margin-top: 20px;
}
.snake-container {
text-align: center;
position: relative;
display: inline-block;
}
.snake-leaderboard {
border: 1px dashed var(--cli-green);
padding: 15px;
min-width: 250px;
text-align: left;
background: rgba(5, 5, 5, 0.85);
}
.snake-leaderboard h3 {
margin-top: 0;
border-bottom: 1px solid var(--cli-green);
padding-bottom: 5px;
}
.snake-leaderboard ul {
list-style: none;
padding: 0;
margin: 0;
}
.snake-leaderboard li {
display: flex;
justify-content: space-between;
margin: 5px 0;
font-size: 1.2rem;
}
#score-submit-section {
margin-top: 15px;
}
#score-submit-section .cli-input {
width: 150px;
text-align: center;
}
.snake-header {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 1.5rem;
}
#snake-canvas {
border: 2px solid var(--cli-green);
background: #050505;
display: block;
margin: 0 auto;
max-width: 100%;
touch-action: none; /* Impedisce lo scroll della pagina durante lo swipe del minigioco */
}
#snake-gameover {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.9);
border: 2px solid #ff0000;
color: #ff0000;
padding: 20px;
text-align: center;
z-index: 100;
}
#snake-gameover.hidden {
display: none;
}
#snake-gameover h3 {
margin-top: 0;
font-size: 2rem;
animation: glitch 0.5s infinite;
}
.snake-controls {
margin-top: 10px;
font-size: 1.2rem;
color: #888;
}
/* Responsive & Mobile Optimization (320px - 768px) */
@media (max-width: 768px) {
.terminal-container {
padding: 20px 15px;
}
.terminal-header h1 {
font-size: 1.5rem;
}
.file-link {
font-size: 1.2rem;
padding: 15px 10px; /* Aumenta area touch */
}
.file-viewer {
padding: 15px 10px;
}
.file-content p {
font-size: 1.1rem;
}
.cctv-grid {
grid-template-columns: 1fr; /* Una colonna su mobile */
}
.arg-terminal label {
font-size: 1.2rem;
display: block;
width: 100%;
margin-bottom: 5px;
}
#commandInput {
font-size: 1.2rem;
width: 100%;
padding: 10px 0;
}
.social-links {
gap: 15px;
}
.social-link {
font-size: 1rem;
}
#snake-canvas {
max-width: 100%;
height: auto;
touch-action: none;
}
.snake-wrapper {
flex-direction: column;
align-items: center;
}
}