A dark, mysterious five-act ARG built around hidden archives and forgotten witnesses.
Commit 8b219ea0
8b219ea0dd7aMerged
Fenria-Aspen <[email protected]> · 1 month ago · 1 file · ~1 modified
Description
Replace broken stylesheet with complete responsive styles
Details
- Commit
- 8b219ea0dd7a
- Parent
- 9eaa39d461b7
assets/css/style.cssmodifiedView file
@@ -1,284 +1,2 @@
1-
:root {2-
--bg-dark: #0a0a0a;3-
--bg-panel: #1a1a1a;4-
--text-primary: #e0e0e0;5-
--text-secondary: #999999;6-
--accent: #4ecca3;7-
--error: #ff6b6b;8-
--success: #4ecca3;9-
--border: #333333;10-
}11-
12-
* {13-
margin: 0;14-
padding: 0;15-
box-sizing: border-box;16-
}17-
18-
html, body {19-
width: 100%;20-
height: 100%;21-
font-family: 'Courier New', monospace;22-
background-color: var(--bg-dark);23-
color: var(--text-primary);24-
line-height: 1.6;25-
overflow-x: hidden;26-
}27-
28-
.noise {29-
position: fixed;30-
top: 0;31-
left: 0;32-
width: 100%;33-
height: 100%;34-
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" seed="1" /></filter><rect width="100" height="100" fill="%23000" filter="url(%23noise)" opacity="0.03"/></svg>');35-
pointer-events: none;36-
z-index: 1;37-
mix-blend-mode: overlay;38-
}39-
40-
header.topbar {41-
position: sticky;42-
top: 0;43-
display: flex;44-
justify-content: space-between;45-
align-items: center;46-
padding: 20px 40px;47-
background-color: rgba(10, 10, 10, 0.95);48-
border-bottom: 1px solid var(--border);49-
z-index: 100;50-
font-size: 14px;51-
letter-spacing: 2px;52-
}53-
54-
.brand {55-
font-weight: bold;56-
color: var(--accent);57-
}58-
59-
.status {60-
color: var(--text-secondary);61-
font-size: 12px;62-
}63-
64-
.container {65-
max-width: 800px;66-
margin: 0 auto;67-
padding: 60px 40px;68-
position: relative;69-
z-index: 2;70-
}71-
72-
.hero {73-
margin-bottom: 60px;74-
text-align: center;75-
}76-
77-
.hero.small-hero {78-
margin-bottom: 40px;79-
}80-
81-
.eyebrow {82-
font-size: 12px;83-
color: var(--text-secondary);84-
letter-spacing: 1px;85-
margin-bottom: 20px;86-
text-transform: uppercase;87-
}88-
89-
.hero h1,90-
.hero h2 {91-
font-size: 2.5rem;92-
margin-bottom: 20px;93-
color: var(--text-primary);94-
line-height: 1.3;95-
}96-
97-
.hero.small-hero h2 {98-
font-size: 1.8rem;99-
}100-
101-
.lead {102-
font-size: 1.1rem;103-
color: var(--text-secondary);104-
max-width: 600px;105-
margin: 0 auto;106-
}107-
108-
.panel {109-
background-color: var(--bg-panel);110-
border: 1px solid var(--border);111-
padding: 40px;112-
border-radius: 4px;113-
margin-top: 40px;114-
}115-
116-
.panel.final-panel {117-
border-color: var(--accent);118-
box-shadow: 0 0 20px rgba(78, 204, 163, 0.1);119-
}120-
121-
.panel-title {122-
font-size: 12px;123-
color: var(--accent);124-
letter-spacing: 2px;125-
margin-bottom: 20px;126-
text-transform: uppercase;127-
}128-
129-
blockquote {130-
font-style: italic;131-
color: var(--text-secondary);132-
border-left: 3px solid var(--accent);133-
padding-left: 20px;134-
margin: 20px 0 30px 0;135-
line-height: 1.8;136-
}137-
138-
.cipher-box {139-
background-color: rgba(78, 204, 163, 0.05);140-
border: 1px solid rgba(78, 204, 163, 0.2);141-
padding: 15px;142-
font-size: 1.1rem;143-
letter-spacing: 1px;144-
text-align: center;145-
margin: 20px 0;146-
}147-
148-
.hint {149-
font-size: 0.9rem;150-
color: var(--text-secondary);151-
margin: 15px 0;152-
padding: 10px;153-
border-left: 2px solid var(--text-secondary);154-
padding-left: 15px;155-
}156-
157-
form {158-
display: flex;159-
flex-direction: column;160-
gap: 15px;161-
margin-top: 30px;162-
}163-
164-
label {165-
font-size: 1rem;166-
color: var(--text-primary);167-
display: block;168-
margin-bottom: 10px;169-
}170-
171-
input[type="text"] {172-
background-color: rgba(255, 255, 255, 0.05);173-
border: 1px solid var(--border);174-
color: var(--text-primary);175-
padding: 12px;176-
font-family: 'Courier New', monospace;177-
font-size: 1rem;178-
border-radius: 2px;179-
transition: all 0.3s ease;180-
}181-
182-
input[type="text"]:focus {183-
outline: none;184-
border-color: var(--accent);185-
background-color: rgba(78, 204, 163, 0.05);186-
box-shadow: 0 0 8px rgba(78, 204, 163, 0.2);187-
}188-
189-
input[type="text"]::placeholder {190-
color: var(--text-secondary);191-
opacity: 0.6;192-
}193-
194-
button {195-
background-color: transparent;196-
border: 1px solid var(--accent);197-
color: var(--accent);198-
padding: 12px 20px;199-
font-family: 'Courier New', monospace;200-
font-size: 0.9rem;201-
letter-spacing: 1px;202-
text-transform: uppercase;203-
cursor: pointer;204-
transition: all 0.3s ease;205-
border-radius: 2px;206-
}207-
208-
button:hover {209-
background-color: var(--accent);210-
color: var(--bg-dark);211-
box-shadow: 0 0 12px rgba(78, 204, 163, 0.4);212-
}213-
214-
button:active {215-
transform: scale(0.98);216-
}217-
218-
.result {219-
margin-top: 15px;220-
padding: 12px;221-
border-radius: 2px;222-
font-size: 0.9rem;223-
min-height: 20px;224-
display: none;225-
}226-
227-
.result:not(:empty) {228-
display: block;229-
}230-
231-
.result.error {232-
color: var(--error);233-
background-color: rgba(255, 107, 107, 0.1);234-
border-left: 3px solid var(--error);235-
}236-
237-
.result.success {238-
color: var(--success);239-
background-color: rgba(78, 204, 163, 0.1);240-
border-left: 3px solid var(--success);241-
animation: fadeIn 0.4s ease;242-
}243-
244-
@keyframes fadeIn {245-
from {246-
opacity: 0;247-
transform: translateY(-5px);248-
}249-
to {250-
opacity: 1;251-
transform: translateY(0);252-
}253-
}254-
255-
footer {256-
text-align: center;257-
padding: 40px;258-
color: var(--text-secondary);259-
font-size: 0.85rem;260-
border-top: 1px solid var(--border);261-
margin-top: 60px;262-
}263-
264-
@media (max-width: 768px) {265-
.container {266-
padding: 40px 20px;267-
}268-
269-
header.topbar {270-
padding: 15px 20px;271-
flex-direction: column;272-
gap: 10px;273-
text-align: center;274-
}275-
276-
.hero h1,277-
.hero h2 {278-
font-size: 1.8rem;279-
}280-
281-
.panel {282-
padding: 25px;283-
}284-
}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}}