html {
background: #050505;
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
background:
radial-gradient(
circle at center,
#151515 0%,
#080808 55%,
#020202 100%
);
color: #d8d8d8;
font-family:
"Courier New",
Courier,
monospace;
font-size: 16px;
line-height: 1.65;
min-height: 100vh;
}
.hidden {
display: none !important;
}
/* ================================
START
================================ */
#start-screen {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 30px;
box-sizing: border-box;
}
.boot-logo {
width: 260px;
max-width: 70vw;
margin-bottom: 30px;
}
.start-title {
font-size: 27px;
letter-spacing: 4px;
color: #e8e8e8;
}
.start-subtitle {
margin-top: 5px;
color: #888;
letter-spacing: 2px;
font-size: 14px;
}
#start-button {
margin-top: 45px;
}
/* ================================
BUTTONS
================================ */
button {
background: transparent;
border: 1px solid #777;
color: #ddd;
font-family:
"Courier New",
Courier,
monospace;
font-size: 15px;
padding: 10px 18px;
cursor: pointer;
transition:
background 0.15s,
color 0.15s,
border-color 0.15s;
}
button:hover {
background: #ddd;
color: #080808;
border-color: #ddd;
}
.menu-button {
display: block;
width: 100%;
max-width: 700px;
margin: 8px 0;
text-align: left;
}
/* ================================
TERMINAL
================================ */
#terminal {
width: min(900px, 90%);
margin: 60px auto;
padding-bottom: 100px;
}
.terminal-logo {
display: block;
width: 220px;
margin: 0 auto 40px auto;
}
#output {
white-space: pre-wrap;
color: #bcbcbc;
}
/* ================================
DATABASE
================================ */
#ray-file {
width: min(1000px, 90%);
margin: 0 auto;
padding: 45px 0 100px 0;
}
.database-header {
display: flex;
align-items: center;
gap: 25px;
border-bottom: 1px solid #555;
padding-bottom: 25px;
margin-bottom: 25px;
}
.header-logo {
width: 130px;
max-width: 25vw;
}
.header-title {
font-size: 24px;
letter-spacing: 3px;
}
.header-subtitle {
color: #777;
letter-spacing: 2px;
font-size: 13px;
}
/* ================================
STATUS
================================ */
.database-status {
border-left: 2px solid #555;
padding-left: 15px;
margin-bottom: 40px;
color: #888;
}
.status-online {
color: #aaa;
}
.important {
color: #c40000;
}
.highlight {
color: #eee;
font-weight: bold;
}
.observation {
color: #aaa;
font-style: italic;
}
.warning {
color: #c40000;
font-weight: bold;
}
/* ================================
RECORD
================================ */
.record {
max-width: 850px;
margin: 0 auto;
}
.record-line {
opacity: 0;
animation:
recordAppear
0.25s
forwards;
}
@keyframes recordAppear {
from {
opacity: 0;
transform:
translateY(4px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
/* ================================
SUBJECT
================================ */
.subject-image {
display: block;
width: 320px;
max-width: 90%;
margin: 30px auto;
border: 1px solid #555;
}
/* ================================
SUBJECT + MESSAGES
================================ */
.subject-with-messages {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
margin: 30px 0;
}
.subject-with-messages .subject-image {
margin: 0;
flex-shrink: 0;
}
.subject-messages {
width: 330px;
max-width: 45%;
min-height: 220px;
display: flex;
flex-direction: column;
justify-content: center;
}
.subject-message {
color: #aaa;
font-style: italic;
margin: 8px 0;
opacity: 0;
animation: messageFade 5s ease forwards;
}
@keyframes messageFade {
0% {
opacity: 0;
transform: translateX(8px);
}
15% {
opacity: 0.75;
transform: translateX(0);
}
75% {
opacity: 0.75;
}
100% {
opacity: 0;
transform: translateX(-5px);
}
}
/* ================================
VEHICLES
================================ */
.vehicle-entry {
margin:
35px
0
55px
0;
}
.vehicle-image {
display: block;
width: 650px;
max-width: 100%;
max-height: 450px;
object-fit: contain;
margin: 25px auto;
border: 1px solid #555;
}
.vehicle-name {
color: #eee;
font-weight: bold;
letter-spacing: 2px;
}
.vehicle-missing {
border: 1px dashed #444;
color: #555;
padding: 35px;
text-align: center;
margin-top: 20px;
}
/* ================================
FOOTER
================================ */
.database-footer {
margin-top: 100px;
padding-top: 20px;
border-top: 1px solid #333;
color: #555;
font-size: 11px;
letter-spacing: 1px;
text-align: center;
}
/* ================================
SPECIAL MODES
================================ */
.special-mode {
position: fixed;
inset: 0;
z-index: 99999;
overflow: hidden;
}
/* ================================
SHOKO MODE
================================ */
#shoko-mode {
background:
radial-gradient(
circle at center,
#07111f 0%,
#02060c 55%,
#000000 100%
);
color: #b8cce0;
}
.shoko-static {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.07;
background:
repeating-linear-gradient(
0deg,
transparent 0px,
transparent 2px,
#fff 3px,
transparent 4px
);
animation: staticMove 0.12s steps(2) infinite;
}
@keyframes staticMove {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
.shoko-vignette {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
circle,
transparent 35%,
rgba(0, 0, 20, 0.65) 100%
);
}
.shoko-chat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(700px, 85%);
background: rgba(0, 4, 12, 0.78);
border-left: 2px solid #263b59;
padding: 25px;
box-sizing: border-box;
box-shadow:
0 0 35px rgba(0, 20, 60, 0.35);
animation: shokoGlitch 3s infinite;
}
.shoko-chat-header {
display: flex;
align-items: center;
gap: 15px;
color: #d9e7f5;
letter-spacing: 3px;
font-weight: bold;
}
.shoko-chat-image {
width: 55px;
height: 55px;
object-fit: cover;
border: 1px solid #38506d;
}
.shoko-message {
margin-top: 20px;
min-height: 80px;
color: #c5d8ea;
white-space: pre-wrap;
}
@keyframes shokoGlitch {
0%, 90%, 100% {
transform: translate(-50%, -50%);
}
92% {
transform:
translate(calc(-50% + 3px), -50%);
}
94% {
transform:
translate(calc(-50% - 3px), -50%);
}
}
/* ================================
RED MODE
================================ */
#red-mode {
background: #000;
}
.red-static {
position: absolute;
inset: 0;
opacity: 0.16;
background:
repeating-linear-gradient(
0deg,
transparent 0px,
transparent 2px,
#fff 3px,
transparent 4px
);
animation: staticMove 0.09s steps(2) infinite;
}
.red-vignette {
position: absolute;
inset: 0;
background:
radial-gradient(
circle,
transparent 20%,
rgba(100, 0, 0, 0.35) 55%,
rgba(80, 0, 0, 0.95) 100%
);
}
.red-message {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 90%;
text-align: center;
color: #d00000;
font-size: clamp(18px, 4vw, 36px);
letter-spacing: 5px;
text-shadow:
0 0 8px #600000;
}
/* ================================
REJECTION
================================ */
#ray-rejection {
background: #000;
}
.rejection-static {
position: absolute;
inset: 0;
opacity: 0.12;
background:
repeating-linear-gradient(
0deg,
transparent 0px,
transparent 2px,
#fff 3px,
transparent 4px
);
}
.rejection-chat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
gap: 20px;
color: #eee;
}
.rejection-image {
width: 90px;
height: 90px;
object-fit: cover;
filter: grayscale(1);
}
.rejection-name {
color: #aaa;
letter-spacing: 3px;
}
.rejection-message {
margin-top: 8px;
max-width: 500px;
}
/* ================================
SHOKO PAGE GLITCH
================================ */
body.shoko-glitch {
animation: pageGlitch 0.18s steps(2) infinite;
}
@keyframes pageGlitch {
0% {
transform: translate(0);
}
25% {
transform: translate(1px, -1px);
}
50% {
transform: translate(-1px, 1px);
}
75% {
transform: translate(1px, 1px);
}
100% {
transform: translate(0);
}
}
/* ================================
MOBILE
================================ */
@media (max-width: 700px) {
body {
font-size: 14px;
}
#ray-file {
width: 90%;
}
.database-header {
align-items: flex-start;
}
.header-title {
font-size: 17px;
}
.header-subtitle {
font-size: 10px;
}
.header-logo {
width: 90px;
}
.boot-logo {
width: 200px;
}
.vehicle-image {
max-height: 300px;
}
.subject-with-messages {
flex-direction: column;
}
.subject-messages {
width: 100%;
max-width: 100%;
text-align: center;
}
.shoko-chat {
width: 90%;
}
}