/* ========================================
JACK'S OFFICE - MS-DOS TERMINAL DESIGN
Ultra-minimalist retro aesthetic
Paste into Design > Custom CSS
======================================== */
/* Base DOS Terminal Style */
body {
background-color: #000 !important;
color: #00ff00 !important;
font-family: 'Courier New', Courier, monospace !important;
font-size: 14px !important;
line-height: 1.4 !important;
text-shadow: 0 0 5px #00ff00; /* Subtle glow */
filter: contrast(1.1) brightness(0.9); /* CRT vibe */
}
/* Scan lines for retro flicker */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
0deg,
rgba(0,255,0,0.03),
rgba(0,255,0,0.03) 2px,
transparent 2px,
transparent 4px
);
pointer-events: none;
z-index: 9999;
}
/* Limit width like old monitors */
.Site {
max-width: 800px !important;
margin: 0 auto !important;
padding: 20px !important;
}
/* Hide modern distractions (adjust selectors if template varies) */
.Header, .Footer {
background: transparent !important;
border: none !important;
color: #00ff00 !important;
}
.sqs-block-button-element--small, .sqs-block-button-element {
background: transparent !important;
border: 1px solid #00ff00 !important;
color: #00ff00 !important;
padding: 5px 10px !important;
}
/* Text blocks and headings */
h1, h2, h3 {
color: #00ff00 !important;
font-weight: normal !important;
text-transform: uppercase;
text-shadow: 0 0 8px #00ff00 !important;
}
p, .sqs-block-html, .sqs-block-text {
color: #00ff00 !important;
text-shadow: 0 0 3px #00ff00 !important;
}
/* Portfolio Gallery: Style as directory */
.sqs-gallery-block-grid .slide {
background: #000 !important;
border: 1px solid #00ff00 !important;
}
.sqs-gallery-block-grid .slide img {
filter: sepia(0.2) hue-rotate(90deg) !important; /* Green tint on images */
}
.sqs-gallery-block-grid .slide:hover .image-slide-title {
color: #ffff00 !important; /* Yellow flash */
text-shadow: 0 0 15px #ffff00 !important;
}
/* Links and Buttons as DOS Commands */
a, .sqs-block-button-element {
color: #00ff00 !important;
text-decoration: none;
border-bottom: 1px solid transparent; /* Hidden underline */
transition: border-bottom 0.3s ease, text-shadow 0.3s ease;
cursor: url("data:image/svg+xml;utf8,"), auto; /* Custom > pointer */
}
a:hover, .sqs-block-button-element:hover {
border-bottom: 1px solid #00ff00 !important; /* "Typing" underline */
text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00 !important; /* Intense glow */
color: #ffff00 !important; /* Yellow highlight */
}
/* Product/Shop Blocks: Green-tint and minimal */
.ProductItem, .ProductList {
background: #000 !important;
border: 1px solid #00ff00 !important;
color: #00ff00 !important;
}
.ProductItem .ProductItem-details h1 {
font-size: 18px !important;
text-transform: uppercase;
}
.ProductItem .sqs-block-button {
background: transparent !important;
border: 1px solid #00ff00 !important;
}
/* Home Directory List: Style as DOS 'ls' output */
.sqs-block-html ul {
list-style-type: none;
padding: 0;
margin: 20px 0;
}
.sqs-block-html ul li::before {
content: "DIR ";
color: #ffff00; /* Yellow for directories */
text-shadow: 0 0 5px #ffff00;
}
.sqs-block-html ul li a {
color: #00ff00 !important;
}
.sqs-block-html ul li a:hover {
color: #ffff00 !important;
text-shadow: 0 0 15px #ffff00 !important;
}
/* Blinking cursor for page headers (add to sub-pages via Header Injection) */
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
.page-header::after {
content: '_';
animation: blink 1s infinite;
color: #00ff00;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.Site { max-width: 100% !important; padding: 10px !important; }
body { font-size: 12px !important; }
}
/* Sub-business page-specific accents (add to each page's Header Code Injection: ) */
#collection-[FOSHORO-ID] { --accent-color: #00cc00; } /* Therapy green */
#collection-[OCULO-ID] { --accent-color: #00ffaa; } /* Aqua for swim */
#collection-[STODO-ID] { --accent-color: #ffaa00; } /* Orange for NFTs/doorstops */
#collection-[KSCITY-ID] { --accent-color: #cc0000; } /* KC red */
#collection-[JORA-ID] { --accent-color: #aa00ff; } /* Purple mask mystery */
#collection-[HERE-ID] { --accent-color: #ff6600; } /* Band orange */
#collection-[COJ-ID] { --accent-color: #666600; } /* Industrial green */
/* Use --accent-color in buttons/links if desired: a { color: var(--accent-color); } */
