A dark, mysterious five-act ARG built around hidden archives and forgotten witnesses.

Viewing files at commit 0d24b8359f5aCommit detailsView latest

assets/css/style.css 2 lines · 3.9 KB · css
1
/* The Hollow Archive application styles */
2
:root{--bg-dark:#0a0a0a;--bg-panel:#1a1a1a;--text-primary:#e0e0e0;--text-secondary:#999;--accent:#4ecca3;--error:#ff6b6b;--border:#333}*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;font-family:'Courier New',monospace;background:var(--bg-dark);color:var(--text-primary);line-height:1.6}.noise{position:fixed;inset:0;pointer-events:none;opacity:.03;z-index:1;background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100"%3E%3Cfilter id="n"%3E%3CfeTurbulence baseFrequency=".9" numOctaves="3"/%3E%3C/filter%3E%3Crect width="100%" height="100%" filter="url(%23n)"/%3E%3C/svg%3E')}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:20px;padding:18px 40px;background:#0a0a0af2;border-bottom:1px solid var(--border)}.brand{color:var(--accent);font-weight:bold;letter-spacing:2px}.status{margin-left:auto;color:var(--text-secondary);font-size:12px}.progress-bar{width:160px;height:5px;background:var(--border)}.progress-fill{height:100%;width:0;background:var(--accent);transition:width .3s}.sidebar-nav{position:fixed;z-index:20;top:0;left:0;width:250px;height:100vh;padding-top:70px;background:var(--bg-panel);border-right:2px solid var(--border);transform:translateX(-250px);transition:transform .25s}.sidebar-nav.open{transform:translateX(0)}.nav-toggle{position:fixed;z-index:21;top:14px;left:14px;background:none;border:0;color:var(--text-primary);font-size:20px;cursor:pointer}.nav-menu{display:flex;flex-direction:column}.nav-menu a{padding:14px 20px;color:var(--text-secondary);text-decoration:none}.nav-menu a:hover,.nav-menu a.active{color:var(--accent);background:#4ecca31a}.container{position:relative;z-index:2;max-width:900px;min-height:calc(100vh - 130px);margin:auto;padding:55px 30px}.hero{text-align:center;margin-bottom:35px}.hero h1{font-size:2.4rem;margin-bottom:14px;color:var(--accent)}.lead{color:var(--text-secondary)}.panel{padding:30px;margin:25px 0;background:var(--bg-panel);border:1px solid var(--border);border-radius:4px}.panel-title{margin-bottom:16px;color:var(--accent);font-size:12px;letter-spacing:2px}.panel-content{margin-bottom:16px}.panel-content:last-child{margin-bottom:0}blockquote{margin:20px 0;border-left:3px solid var(--accent);padding-left:18px;color:var(--text-secondary);font-style:italic}.puzzle-form,.decoder-tool{display:flex;flex-direction:column;gap:12px;margin-top:20px}input{padding:12px;background:#ffffff0d;border:1px solid var(--border);color:var(--text-primary);font:inherit}input:focus{outline:none;border-color:var(--accent)}button{padding:11px 16px;background:transparent;border:1px solid var(--accent);color:var(--accent);font:inherit;cursor:pointer}button:hover{background:var(--accent);color:var(--bg-dark)}.puzzle-result,.decoder-output{min-height:24px;padding:8px}.puzzle-result.success{color:var(--accent)}.puzzle-result.error{color:var(--error)}.info-list{list-style:none}.info-list li{padding:6px 0;border-bottom:1px dotted var(--border)}.action-grid{display:grid;gap:12px}.inventory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:15px}.inventory-item{padding:20px;text-align:center;border:1px solid var(--border)}.item-icon{font-size:2.5rem}.item-name,.evidence-title{color:var(--accent);font-weight:bold}.item-desc,.evidence-excerpt{color:var(--text-secondary);font-size:.9rem}.evidence-item{display:flex;gap:15px;padding:14px;background:var(--bg-dark);border-left:3px solid var(--accent);margin:10px 0}.terminal-panel{background:#000;border-color:#0f0}.terminal{min-height:280px;max-height:400px;overflow:auto;padding:15px;color:#0f0}.terminal-input{border-color:#0f0;color:#0f0}.archive-footer{display:flex;justify-content:space-around;padding:20px;color:var(--text-secondary);border-top:1px solid var(--border)}@media(max-width:700px){.topbar{padding:16px 12px 16px 55px;flex-wrap:wrap}.progress-bar{width:100%}.container{padding:35px 15px}.hero h1{font-size:1.8rem}.panel{padding:20px}}