/* ============================================================================
holmes.css — shared "Lunar Authority / HOLMES IV" terminal theme kit
Model Citizen (AI/LLM/MCP) category — SAINTCON 2026 Hackers Challenge.
Green-phosphor CRT aesthetic. Import into the hub and any stage UI:
...
.
========================================================================== */
:root {
--bg: #02120a; /* near-black, green-tinted */
--bg-panel: #04190e;
--p: #33ff88; /* phosphor green */
--p-bright: #b6ffd6;
--dim: #1c8a4e;
--dimmer: #0e4d2b;
--amber: #ffcf5a; /* caution / locked accents (use sparingly) */
--danger: #ff5f5f; /* sealed / denied */
--glow: 0 0 6px rgba(51,255,136,.55);
--glow-soft: 0 0 3px rgba(51,255,136,.35);
--mono: 'DejaVu Sans Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
background: var(--bg);
color: var(--p);
font: 15px/1.55 var(--mono);
text-shadow: var(--glow-soft);
}
/* ---- CRT screen container: scanlines, vignette, flicker ------------------ */
.crt { position: relative; min-height: 100vh; overflow-x: hidden; }
/* scanlines + vignette overlay */
.crt::before {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9;
background:
repeating-linear-gradient(180deg,
rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px,
rgba(0,0,0,.22) 3px, rgba(0,0,0,.22) 3px),
radial-gradient(120% 120% at 50% 50%,
rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
mix-blend-mode: multiply;
}
/* faint moving scan glow + flicker */
.crt::after {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 10;
background: linear-gradient(180deg, rgba(51,255,136,.05), rgba(51,255,136,0) 40%);
animation: flicker 5.5s steps(60) infinite;
opacity: .5;
}
@keyframes flicker {
0%,100% { opacity: .45; } 47% { opacity: .5; } 48% { opacity: .32; }
49% { opacity: .5; } 92% { opacity: .48; } 93% { opacity: .34; }
}
.wrap { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; padding: 0 18px 60px; }
/* ---- text helpers -------------------------------------------------------- */
.glow { text-shadow: var(--glow); }
.bright { color: var(--p-bright); }
.dim { color: var(--dim); }
.amber { color: var(--amber); }
.danger{ color: var(--danger); }
.mono { font-family: var(--mono); }
h1,h2,h3 { font-weight: 700; letter-spacing: 1px; text-shadow: var(--glow); }
a { color: var(--p-bright); text-decoration: none; }
a:hover { text-shadow: var(--glow); }
hr { border: none; border-top: 1px dashed var(--dimmer); margin: 22px 0; }
/* blinking cursor */
.cursor::after { content: "▋"; margin-left: 2px; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* ---- header / status bar ------------------------------------------------- */
.hdr { display: flex; align-items: center; gap: 16px; padding: 20px 0 8px; }
.hdr .seal { width: 76px; height: 76px; filter: drop-shadow(0 0 5px rgba(51,255,136,.5)); flex: none; }
.hdr .titles { line-height: 1.25; }
.hdr .titles .k { font-size: 12px; letter-spacing: 3px; color: var(--dim); }
.hdr .titles h1 { margin: 2px 0; font-size: 26px; }
.statusbar {
display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; letter-spacing: 1px;
color: var(--dim); border-top: 1px solid var(--dimmer); border-bottom: 1px solid var(--dimmer);
padding: 7px 0; margin: 10px 0 20px;
}
.statusbar b { color: var(--p); font-weight: 400; }
/* ---- generic panel ------------------------------------------------------- */
.panel { background: var(--bg-panel); border: 1px solid var(--dimmer); padding: 16px; }
.panel + .panel { margin-top: 14px; }
.label { color: var(--dim); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
/* ---- subsystem board ----------------------------------------------------- */
.board { display: flex; flex-direction: column; gap: 10px; }
.sub {
display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 4px 16px;
border: 1px solid var(--dimmer); background: var(--bg-panel);
padding: 14px 16px; color: inherit; transition: box-shadow .12s, border-color .12s;
}
a.sub:hover { border-color: var(--p); box-shadow: inset 0 0 24px rgba(51,255,136,.08), var(--glow-soft); }
.sub .num { grid-row: 1 / span 2; font-size: 26px; color: var(--dim); text-align: center; }
.sub .name { font-size: 17px; letter-spacing: .5px; }
.sub .sys { grid-column: 2; font-size: 12px; color: var(--dim); letter-spacing: 1px; }
.sub .desc { grid-column: 2; margin-top: 4px; font-size: 13.5px; color: var(--p); opacity: .9; }
.sub .st { grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end; font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.sub.sealed { opacity: .62; }
.st-open { color: var(--p); }
.st-open::before { content: "◍ "; }
.st-sealed { color: var(--danger); }
.st-sealed::before { content: "⊘ "; }
/* ---- form controls (for stage UIs adopting the kit) ---------------------- */
input, textarea {
background: #031c10; color: var(--p); border: 1px solid var(--dim);
padding: 10px; font: inherit; outline: none; text-shadow: var(--glow-soft);
}
input:focus, textarea:focus { box-shadow: 0 0 8px var(--dim); }
textarea { min-height: 200px; resize: vertical; width: 100%; }
button, .btn {
background: var(--dim); color: #02120a; border: none; padding: 10px 18px;
font: inherit; font-weight: 700; letter-spacing: .5px; cursor: pointer;
text-shadow: none;
}
button:hover, .btn:hover { background: var(--p); box-shadow: var(--glow); }
/* ---- boot overlay -------------------------------------------------------- */
#boot {
position: fixed; inset: 0; z-index: 40; background: var(--bg);
padding: 8vh 8vw; font-size: 15px; color: var(--p);
transition: opacity .5s ease; white-space: pre-wrap;
}
#boot.done { opacity: 0; pointer-events: none; }
#boot .ok { color: var(--p-bright); }
#boot .skip { position: fixed; bottom: 18px; right: 22px; font-size: 12px; color: var(--dim); }
.reveal { opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; }
.reveal.in { opacity: 1; transform: none; }
footer { margin-top: 34px; border-top: 1px solid var(--dimmer); padding-top: 14px;
font-size: 12px; color: var(--dim); letter-spacing: 1px; }
@media (max-width: 560px) {
.sub { grid-template-columns: 34px 1fr; }
.sub .st { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 6px; }
.hdr .titles h1 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
.crt::after { animation: none; }
.cursor::after { animation: none; }
.reveal { transition: none; opacity: 1; transform: none; }
}