1054 lines
20 KiB
SCSS
1054 lines
20 KiB
SCSS
@import "normalize";
|
|
@import "mixins";
|
|
@import "animations";
|
|
@import "handwritten";
|
|
|
|
@import "partials/global-styles";
|
|
@import "partials/form-controls";
|
|
|
|
@import "partials/neon-sign";
|
|
@import "partials/music";
|
|
@import "partials/vu-meter";
|
|
@import "partials/terminal";
|
|
@import "partials/now-playing";
|
|
@import "partials/lavalamp";
|
|
@import "partials/floppy";
|
|
@import "partials/lcd-display";
|
|
@import "partials/window";
|
|
@import "partials/crt-tv";
|
|
@import "partials/graphs";
|
|
@import "partials/companion-cube";
|
|
|
|
@import "partials/content-screens";
|
|
|
|
@import "pages/homepage";
|
|
@import "pages/about";
|
|
@import "pages/audio";
|
|
@import "pages/now";
|
|
@import "pages/blog";
|
|
@import "pages/media";
|
|
@import "pages/resources";
|
|
@import "pages/button-generator";
|
|
@import "pages/lavalamp-adoptable";
|
|
@import "pages/guestbook";
|
|
@import "pages/buttons";
|
|
|
|
@import url(https://fonts.bunny.net/css?family=abel:400|barlow-condensed:400,500|caveat:400|lato:300,300i,400,400i|neonderthaw:400);
|
|
|
|
@font-face {
|
|
font-family: "DSEG7-Classic";
|
|
src:
|
|
url("../fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2") format("woff2"),
|
|
url("../fonts/DSEG7-Classic/DSEG7Classic-Bold.woff") format("woff"),
|
|
url("../fonts/DSEG7-Classic/DSEG7Classic-Bold.ttf") format("truetype");
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "DSEG14-Classic";
|
|
src:
|
|
url("../fonts/DSEG14-Classic/DSEG14Classic-Bold.woff2") format("woff2"),
|
|
url("../fonts/DSEG14-Classic/DSEG14Classic-Bold.woff") format("woff"),
|
|
url("../fonts/DSEG14-Classic/DSEG14Classic-Bold.ttf") format("truetype");
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
width: 100%;
|
|
height: 100vh;
|
|
font-family: "Lato", sans-serif;
|
|
background: #1a1a1a;
|
|
position: relative;
|
|
}
|
|
|
|
#latest-post {
|
|
display: none;
|
|
}
|
|
|
|
.crt::after {
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(18, 16, 16, 0.1);
|
|
opacity: 0;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
animation: flicker 0.15s infinite;
|
|
}
|
|
.crt::before {
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
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: 2;
|
|
background-size:
|
|
100% 2px,
|
|
3px 100%;
|
|
pointer-events: none;
|
|
}
|
|
.crt {
|
|
position: absolute;
|
|
animation: textShadow 1.6s infinite;
|
|
background: black;
|
|
color: greenyellow;
|
|
font-family: monospace;
|
|
|
|
> .scroll {
|
|
overflow: scroll;
|
|
max-height: 100%;
|
|
@include scrollbar-custom(#0f0, 3px);
|
|
}
|
|
}
|
|
|
|
.crt a {
|
|
color: greenyellow;
|
|
text-decoration-style: dotted;
|
|
}
|
|
|
|
/* Brick wall background */
|
|
.wall {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background:
|
|
linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
transparent 49%,
|
|
#0a0a0a 49%,
|
|
#0a0a0a 51%,
|
|
transparent 51%
|
|
),
|
|
linear-gradient(
|
|
0deg,
|
|
transparent 0%,
|
|
transparent 49%,
|
|
#0a0a0a 49%,
|
|
#0a0a0a 51%,
|
|
transparent 51%
|
|
);
|
|
background-size: 120px 60px;
|
|
background-position:
|
|
0 0,
|
|
60px 30px;
|
|
}
|
|
|
|
.wall::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background:
|
|
repeating-linear-gradient(
|
|
0deg,
|
|
#0f0a06 0px,
|
|
#1a110a 30px,
|
|
#0f0a06 30px,
|
|
#0f0a06 60px
|
|
),
|
|
/* Dirt and grime texture */
|
|
radial-gradient(
|
|
ellipse at 15% 20%,
|
|
rgba(20, 15, 10, 0.4) 0%,
|
|
transparent 30%
|
|
),
|
|
radial-gradient(
|
|
ellipse at 85% 40%,
|
|
rgba(15, 10, 5, 0.5) 0%,
|
|
transparent 25%
|
|
),
|
|
radial-gradient(
|
|
ellipse at 40% 80%,
|
|
rgba(25, 15, 10, 0.3) 0%,
|
|
transparent 35%
|
|
),
|
|
radial-gradient(
|
|
ellipse at 70% 60%,
|
|
rgba(10, 8, 5, 0.6) 0%,
|
|
transparent 20%
|
|
),
|
|
/* Stains and discoloration */
|
|
radial-gradient(
|
|
circle at 25% 50%,
|
|
rgba(40, 25, 15, 0.2) 0%,
|
|
transparent 40%
|
|
),
|
|
radial-gradient(
|
|
circle at 60% 30%,
|
|
rgba(35, 20, 10, 0.3) 0%,
|
|
transparent 30%
|
|
),
|
|
radial-gradient(
|
|
circle at 90% 70%,
|
|
rgba(30, 18, 10, 0.25) 0%,
|
|
transparent 35%
|
|
);
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.wall::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background:
|
|
/* More aggressive dark patches */
|
|
radial-gradient(circle at 10% 15%, rgba(10, 5, 0, 0.5) 0%, transparent 25%),
|
|
radial-gradient(circle at 30% 70%, rgba(15, 8, 2, 0.4) 0%, transparent 30%),
|
|
radial-gradient(
|
|
circle at 75% 25%,
|
|
rgba(12, 6, 0, 0.45) 0%,
|
|
transparent 28%
|
|
),
|
|
radial-gradient(
|
|
circle at 50% 90%,
|
|
rgba(18, 10, 3, 0.35) 0%,
|
|
transparent 35%
|
|
),
|
|
radial-gradient(circle at 95% 50%, rgba(8, 4, 0, 0.5) 0%, transparent 22%),
|
|
/* Noise/texture overlay */
|
|
repeating-linear-gradient(
|
|
45deg,
|
|
transparent 0px,
|
|
rgba(0, 0, 0, 0.03) 1px,
|
|
transparent 2px,
|
|
transparent 4px
|
|
);
|
|
}
|
|
|
|
.window {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 20%;
|
|
aspect-ratio: 16/9;
|
|
width: 350px;
|
|
border: 5px solid #c4b89a;
|
|
border-top: 0px;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -5px;
|
|
left: -3%;
|
|
width: 106%;
|
|
height: 10px;
|
|
background-color: #c4b89a;
|
|
}
|
|
}
|
|
|
|
/* Post-it notes and papers on wall */
|
|
.sticky-note {
|
|
font-family: "Caveat", cursive;
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #ffd966;
|
|
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
|
|
z-index: 2;
|
|
font-size: 12px;
|
|
padding: 5px;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
}
|
|
|
|
.note1 {
|
|
top: 19%;
|
|
left: 66%;
|
|
transform: rotate(-8deg);
|
|
}
|
|
|
|
.note2 {
|
|
top: 20%;
|
|
left: 32%;
|
|
transform: rotate(5deg);
|
|
background: #ff9999;
|
|
}
|
|
|
|
.note3 {
|
|
top: 21%;
|
|
left: 38%;
|
|
transform: rotate(-3deg);
|
|
background: #99ff99;
|
|
}
|
|
|
|
.note4 {
|
|
top: 43%;
|
|
left: 18%;
|
|
transform: rotate(12deg);
|
|
background: #99ccff;
|
|
}
|
|
|
|
/* Poster on wall */
|
|
.poster {
|
|
position: absolute;
|
|
top: 10%;
|
|
right: 8%;
|
|
width: 200px;
|
|
height: 200px;
|
|
background: #000;
|
|
border: 8px solid #1a1a1a;
|
|
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
|
|
transform: rotate(-2deg);
|
|
z-index: 1;
|
|
}
|
|
|
|
.poster-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect fill="%23222" width="200" height="200"/><text x="50%" y="50%" fill="%23666" font-size="20" text-anchor="middle" dominant-baseline="middle" font-family="monospace">NOW PLAYING</text></svg>');
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Now Playing post-it note */
|
|
.now-playing-note,
|
|
.now-playing-artist {
|
|
position: absolute;
|
|
bottom: 145px;
|
|
right: 150px;
|
|
width: 60px;
|
|
height: 60px;
|
|
background: #ffd966;
|
|
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
|
|
z-index: 2;
|
|
transform: rotate(8deg);
|
|
font-size: 14px;
|
|
font-family: "Caveat", cursive;
|
|
padding: 8px;
|
|
line-height: 1.3;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
/* Word wrapping */
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
word-break: break-word;
|
|
hyphens: auto;
|
|
-webkit-hyphens: auto;
|
|
-moz-hyphens: auto;
|
|
-ms-hyphens: auto;
|
|
}
|
|
|
|
.now-playing-artist {
|
|
bottom: -15px;
|
|
right: -20px;
|
|
transform: rotate(-8deg);
|
|
}
|
|
|
|
/* X-Files "I want to believe" poster */
|
|
.xfiles-poster {
|
|
position: absolute;
|
|
top: 15%;
|
|
left: 7%;
|
|
width: 220px;
|
|
height: 300px;
|
|
background: #000;
|
|
border: 10px solid #2a2a2a;
|
|
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6);
|
|
transform: rotate(1.5deg);
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.xfiles-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(180deg, #001a33 0%, #000814 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.ufo-illustration {
|
|
width: 140px;
|
|
height: 80px;
|
|
position: relative;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.ufo-body {
|
|
width: 100%;
|
|
height: 40px;
|
|
background: linear-gradient(180deg, #444 0%, #222 50%, #111 100%);
|
|
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
|
|
position: relative;
|
|
box-shadow: 0 -5px 20px rgba(100, 150, 255, 0.6);
|
|
}
|
|
|
|
.ufo-dome {
|
|
width: 50px;
|
|
height: 25px;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(100, 150, 200, 0.4) 0%,
|
|
rgba(50, 100, 150, 0.2) 100%
|
|
);
|
|
border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
|
|
position: absolute;
|
|
top: -15px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.ufo-lights {
|
|
position: absolute;
|
|
bottom: -5px;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.ufo-light {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #ffeb3b;
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
0 0 10px #ffeb3b,
|
|
0 0 20px #ffeb3b;
|
|
animation: ufo-blink 2s infinite;
|
|
}
|
|
|
|
.ufo-light:nth-child(2) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
.ufo-light:nth-child(3) {
|
|
animation-delay: 0.8s;
|
|
}
|
|
|
|
.ufo-light:nth-child(4) {
|
|
animation-delay: 1.2s;
|
|
}
|
|
|
|
@keyframes ufo-blink {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
.light-beam {
|
|
position: absolute;
|
|
bottom: -40px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60px;
|
|
height: 50px;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(150, 200, 255, 0.4) 0%,
|
|
transparent 100%
|
|
);
|
|
clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%);
|
|
animation: beam-pulse 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes beam-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
.believe-text {
|
|
color: #fff;
|
|
font-family: "Courier New", monospace;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
letter-spacing: 2px;
|
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* CRT Monitor container */
|
|
|
|
/* CRT Monitor bezel */
|
|
.crt-monitor {
|
|
width: 670px;
|
|
height: 500px;
|
|
background: linear-gradient(145deg, #e8e0c8, #c4b89a);
|
|
border-radius: 12px;
|
|
padding: 25px 30px 45px 30px;
|
|
box-shadow:
|
|
0 30px 60px rgba(0, 0, 0, 0.8),
|
|
inset 0 2px 4px rgba(255, 255, 255, 0.3),
|
|
inset 0 -2px 4px rgba(0, 0, 0, 0.3);
|
|
position: relative;
|
|
|
|
@include media-down(lg) {
|
|
width: 100%;
|
|
padding: 0px 0px 45px 0px;
|
|
border-radius: 0px;
|
|
}
|
|
}
|
|
|
|
/* Brand logo on bezel */
|
|
.crt-monitor::before {
|
|
content: "ARASAKA";
|
|
position: absolute;
|
|
bottom: 15px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #666;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
letter-spacing: 2px;
|
|
|
|
@include media-down(lg) {
|
|
content: "RITUAL.SH";
|
|
}
|
|
}
|
|
|
|
/* Power indicator LED */
|
|
.crt-monitor::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 15px;
|
|
right: 40px;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #0f0;
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
0 0 10px #0f0,
|
|
0 0 20px #0f0;
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Stand neck */
|
|
.stand-neck {
|
|
width: 40px;
|
|
height: 50px;
|
|
background: linear-gradient(90deg, #b8ac90, #a89978);
|
|
margin: 0 auto;
|
|
border-radius: 5px;
|
|
box-shadow:
|
|
inset -2px 0 5px rgba(0, 0, 0, 0.3),
|
|
2px 0 5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Stand base */
|
|
.stand-base {
|
|
width: 120px;
|
|
height: 30px;
|
|
background: linear-gradient(180deg, #a89978, #8a7d62);
|
|
border-radius: 50% 50% 5px 5px;
|
|
box-shadow:
|
|
0 5px 15px rgba(0, 0, 0, 0.4),
|
|
inset 0 2px 3px rgba(255, 255, 255, 0.2);
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
|
|
.stand-base::before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 5px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 80px;
|
|
height: 2px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* CRT Screen */
|
|
.crt-screen {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000;
|
|
border-radius: 8px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow:
|
|
inset 0 0 80px rgba(0, 255, 100, 0.1),
|
|
inset 0 0 40px rgba(0, 255, 100, 0.05),
|
|
inset 3px 3px 8px rgba(255, 255, 255, 0.1),
|
|
inset -3px -3px 8px rgba(0, 0, 0, 0.5);
|
|
|
|
@include media-down(lg) {
|
|
border-radius: 0px;
|
|
}
|
|
}
|
|
|
|
/* Screen curvature/glass emboss effect */
|
|
.crt-screen::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -5%;
|
|
left: -5%;
|
|
right: -5%;
|
|
bottom: -5%;
|
|
background:
|
|
radial-gradient(
|
|
ellipse at 30% 30%,
|
|
rgba(255, 255, 255, 0.15) 0%,
|
|
transparent 40%
|
|
),
|
|
radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Scanlines */
|
|
.crt-screen::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
rgba(0, 0, 0, 0.15) 0px,
|
|
rgba(0, 0, 0, 0.15) 1px,
|
|
transparent 1px,
|
|
transparent 2px
|
|
);
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
animation: scanline 8s linear infinite;
|
|
}
|
|
|
|
@keyframes scanline {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
transform: translateY(10px);
|
|
}
|
|
}
|
|
|
|
/* Screen flicker */
|
|
.crt-flicker {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 255, 100, 0.02);
|
|
animation: flicker 0.15s infinite;
|
|
pointer-events: none;
|
|
z-index: 4;
|
|
}
|
|
|
|
@keyframes flicker {
|
|
0% {
|
|
opacity: 0.98;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0.97;
|
|
}
|
|
}
|
|
|
|
/* Content area */
|
|
.content {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 3px;
|
|
color: #0f0;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
|
|
}
|
|
|
|
.content h1 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
animation: textGlow 1.5s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.content p {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.6;
|
|
max-width: 500px;
|
|
text-align: center;
|
|
}
|
|
|
|
@keyframes textGlow {
|
|
from {
|
|
text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
|
|
}
|
|
to {
|
|
text-shadow:
|
|
0 0 20px rgba(0, 255, 0, 1),
|
|
0 0 30px rgba(0, 255, 0, 0.6);
|
|
}
|
|
}
|
|
|
|
/* Desk */
|
|
.desk {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 25%;
|
|
background:
|
|
/* Wear and tear patterns */
|
|
radial-gradient(
|
|
ellipse at 30% 40%,
|
|
rgba(20, 15, 10, 0.3) 0%,
|
|
transparent 30%
|
|
),
|
|
radial-gradient(
|
|
ellipse at 70% 60%,
|
|
rgba(15, 10, 5, 0.4) 0%,
|
|
transparent 25%
|
|
),
|
|
radial-gradient(
|
|
ellipse at 50% 20%,
|
|
rgba(25, 18, 10, 0.2) 0%,
|
|
transparent 40%
|
|
),
|
|
/* Coffee stains */
|
|
radial-gradient(
|
|
circle at 20% 50%,
|
|
rgba(40, 25, 10, 0.6) 0%,
|
|
rgba(30, 20, 8, 0.3) 5%,
|
|
transparent 8%
|
|
),
|
|
radial-gradient(
|
|
circle at 65% 30%,
|
|
rgba(35, 22, 8, 0.5) 0%,
|
|
rgba(25, 15, 5, 0.2) 4%,
|
|
transparent 7%
|
|
),
|
|
/* Scratches and marks */
|
|
linear-gradient(
|
|
92deg,
|
|
transparent 45%,
|
|
rgba(50, 40, 30, 0.1) 49%,
|
|
transparent 51%
|
|
),
|
|
linear-gradient(
|
|
88deg,
|
|
transparent 60%,
|
|
rgba(40, 30, 20, 0.15) 62%,
|
|
transparent 64%
|
|
),
|
|
linear-gradient(
|
|
94deg,
|
|
transparent 25%,
|
|
rgba(45, 35, 25, 0.12) 27%,
|
|
transparent 29%
|
|
),
|
|
/* Base wood color */ linear-gradient(180deg, #2d1f12 0%, #1d1208 100%);
|
|
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
|
|
z-index: 5;
|
|
}
|
|
|
|
.desk::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #1d1208, #0d0804, #1d1208);
|
|
}
|
|
|
|
.desk::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background:
|
|
/* Dust and grime texture */ repeating-linear-gradient(
|
|
60deg,
|
|
transparent 0px,
|
|
rgba(0, 0, 0, 0.02) 1px,
|
|
transparent 2px,
|
|
transparent 5px
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Secondary monitors on desk */
|
|
/* Secondary CRT monitors - positioned relative to main monitor */
|
|
.secondary-screen {
|
|
position: absolute;
|
|
border-radius: 8px;
|
|
z-index: 6;
|
|
padding: 8px 10px 20px 10px;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
/* Desk-mounted CRT - on desk left side */
|
|
.desk-monitor {
|
|
bottom: 10%;
|
|
left: 6%;
|
|
width: 200px;
|
|
height: 145px;
|
|
background: linear-gradient(145deg, #d8d0b8, #b8b098);
|
|
box-shadow:
|
|
0 8px 20px rgba(0, 0, 0, 0.7),
|
|
inset 0 2px 4px rgba(255, 255, 255, 0.3),
|
|
inset 0 -2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.desk-monitor::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 6px;
|
|
right: 10px;
|
|
width: 5px;
|
|
height: 5px;
|
|
background: #0f0;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 8px #0f0;
|
|
animation: pulse 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* Equipment stacks */
|
|
.equipment-stack {
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* LED indicators on equipment */
|
|
.led-indicator {
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 3px;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 4px currentColor;
|
|
}
|
|
|
|
.led-green {
|
|
background: #0f0;
|
|
color: #0f0;
|
|
top: 50%;
|
|
right: 5px;
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.led-red {
|
|
background: #f00;
|
|
color: #f00;
|
|
top: 50%;
|
|
right: 12px;
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.monitor-stand-small {
|
|
position: absolute;
|
|
bottom: -20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60%;
|
|
height: 20px;
|
|
background: linear-gradient(180deg, #a8a898 0%, #888878 100%);
|
|
z-index: 4;
|
|
border-radius: 0 0 8px 8px;
|
|
box-shadow:
|
|
0 5px 15px rgba(0, 0, 0, 0.6),
|
|
inset 0 1px 2px rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.monitor-stand-small::before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -8px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 90%;
|
|
height: 8px;
|
|
background: linear-gradient(90deg, transparent, #666, transparent);
|
|
border-radius: 50%;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.screen-display {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000;
|
|
padding: 8px;
|
|
font-family: monospace;
|
|
font-size: 10px;
|
|
color: #0f0;
|
|
overflow: hidden;
|
|
line-height: 1.3;
|
|
border-radius: 6px;
|
|
box-shadow:
|
|
inset 0 0 40px rgba(0, 255, 100, 0.08),
|
|
inset 0 0 20px rgba(0, 255, 100, 0.05),
|
|
inset 2px 2px 6px rgba(255, 255, 255, 0.08),
|
|
inset -2px -2px 6px rgba(0, 0, 0, 0.4);
|
|
position: relative;
|
|
}
|
|
|
|
.screen-display::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -3%;
|
|
left: -3%;
|
|
right: -3%;
|
|
bottom: -3%;
|
|
background:
|
|
radial-gradient(
|
|
ellipse at 25% 25%,
|
|
rgba(255, 255, 255, 0.12) 0%,
|
|
transparent 35%
|
|
),
|
|
radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.25) 100%);
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.screen-display::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
rgba(0, 0, 0, 0.15) 0px,
|
|
rgba(0, 0, 0, 0.15) 1px,
|
|
transparent 1px,
|
|
transparent 2px
|
|
);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.screen-display.large {
|
|
font-size: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.screen-display.tiny {
|
|
font-size: 7px;
|
|
padding: 5px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.screen-display.amber {
|
|
color: #ff9900;
|
|
background: #0a0600;
|
|
}
|
|
|
|
.screen-display.amber::after {
|
|
background:
|
|
radial-gradient(
|
|
ellipse at 25% 25%,
|
|
rgba(255, 200, 100, 0.12) 0%,
|
|
transparent 35%
|
|
),
|
|
radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.25) 100%);
|
|
}
|
|
|
|
.screen-display.cyan {
|
|
color: #00ffff;
|
|
background: #001a1a;
|
|
}
|
|
|
|
.screen-display.cyan::after {
|
|
background:
|
|
radial-gradient(
|
|
ellipse at 25% 25%,
|
|
rgba(100, 255, 255, 0.12) 0%,
|
|
transparent 35%
|
|
),
|
|
radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.25) 100%);
|
|
}
|
|
|
|
/* Scrolling text animation */
|
|
.scroll-text {
|
|
animation: scroll-up 5s linear infinite;
|
|
display: block;
|
|
}
|
|
|
|
@keyframes scroll-up {
|
|
0% {
|
|
transform: translateY(0px);
|
|
}
|
|
100% {
|
|
transform: translateY(-200px);
|
|
}
|
|
}
|
|
|
|
/* Blinking cursor effect on screens */
|
|
.cursor-blink {
|
|
animation: cursor 1s infinite;
|
|
}
|
|
|
|
@keyframes cursor {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes blink-fast {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-slow {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.3;
|
|
}
|
|
}
|