a digital entity named phi that roams bsky
phi.zzstoatzz.io
1/*
2 * phi cockpit — metroid prime 1 inspired hud
3 *
4 * palette: deep blue-black ambient, warm clay-orange chrome (the "phi color"),
5 * muted scan-cyan for data readouts, amber for warnings. heavy desaturation —
6 * this is an instrument, not a brochure.
7 *
8 * type: tall narrow geometric for chrome (uppercase tracked), inter for content,
9 * jetbrains mono for ids/timestamps.
10 */
11
12@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@300;400;500;600&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@300;400&display=swap');
13
14:root {
15 /* ambient — never pure black, slight blue */
16 --bg-void: #07090f;
17 --bg-deep: #0d1119;
18 --bg-elev: #141a26;
19 --bg-panel: rgba(20, 26, 38, 0.85);
20
21 /* hud — warm clay orange, the phi color */
22 --hud-dim: #4d2c14;
23 --hud-mid: #b86b3a;
24 --hud-hot: #e09060;
25 --hud-glow: rgba(184, 107, 58, 0.35);
26
27 /* scan visor — muted cyan/teal for data */
28 --scan-dim: #2a4a55;
29 --scan-mid: #4a8b9a;
30 --scan-hot: #7ec0d4;
31
32 /* warn amber — sparingly */
33 --warn: #c9a05a;
34 --warn-hot: #e0bb6a;
35
36 /* danger red — only for actual problems */
37 --danger: #a04848;
38
39 /* text */
40 --text: #d6d2c9;
41 --text-mid: #8c8579;
42 --text-dim: #5a554a;
43
44 /* lines — orange at low/med alpha */
45 /* --grid: very faint, only for background scaffolding (concentric circles, crosshairs) */
46 /* --line-dim: data edges (graph connections, time-trails) — must be readable */
47 /* --line-mid: panel borders */
48 /* --line-hot: active/hovered borders */
49 --grid: rgba(184, 107, 58, 0.05);
50 --line-dim: rgba(184, 107, 58, 0.22);
51 --line-mid: rgba(184, 107, 58, 0.32);
52 --line-hot: rgba(184, 107, 58, 0.6);
53 --line-scan: rgba(74, 139, 154, 0.3);
54
55 /* chrome typefaces */
56 --font-chrome: 'Saira Condensed', 'Barlow Condensed', system-ui, sans-serif;
57 --font-content: 'Inter', system-ui, sans-serif;
58 --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Menlo, monospace;
59}
60
61* {
62 box-sizing: border-box;
63}
64
65html,
66body {
67 margin: 0;
68 padding: 0;
69 background: var(--bg-void);
70 color: var(--text);
71 font-family: var(--font-content);
72 font-size: 13px;
73 line-height: 1.5;
74 -webkit-font-smoothing: antialiased;
75 -moz-osx-font-smoothing: grayscale;
76 overflow: hidden;
77 height: 100vh;
78}
79
80#svelte,
81body > div {
82 height: 100%;
83}
84
85/* ambient hexagonal grid + scanlines + vignette layered on the void */
86body::before {
87 content: '';
88 position: fixed;
89 inset: 0;
90 pointer-events: none;
91 z-index: 0;
92 background:
93 /* very faint hex pattern — chozo terminal feel */
94 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><g fill='none' stroke='%23b86b3a' stroke-width='0.6' opacity='0.08'><polygon points='14,2 42,2 56,18 42,34 14,34 0,18'/><polygon points='14,34 42,34 56,50 42,66 14,66 0,50'/></g></svg>"),
95 /* horizontal scanlines */
96 repeating-linear-gradient(
97 0deg,
98 rgba(255, 255, 255, 0.012) 0px,
99 rgba(255, 255, 255, 0.012) 1px,
100 transparent 1px,
101 transparent 3px
102 );
103 background-size:
104 56px 64px,
105 auto;
106}
107
108/* radial vignette */
109body::after {
110 content: '';
111 position: fixed;
112 inset: 0;
113 pointer-events: none;
114 z-index: 0;
115 background: radial-gradient(
116 ellipse at center,
117 transparent 0%,
118 transparent 55%,
119 rgba(0, 0, 0, 0.35) 100%
120 );
121}
122
123/* ---------- typography ---------- */
124
125.chrome {
126 font-family: var(--font-chrome);
127 text-transform: uppercase;
128 letter-spacing: 0.08em;
129 font-weight: 400;
130}
131
132.mono {
133 font-family: var(--font-mono);
134 font-size: 0.92em;
135}
136
137a {
138 color: var(--scan-mid);
139 text-decoration: none;
140}
141
142a:hover {
143 color: var(--scan-hot);
144}
145
146/* ---------- cockpit layout primitives ---------- */
147
148.cockpit {
149 position: fixed;
150 inset: 0;
151 display: grid;
152 grid-template-rows: 1fr;
153 z-index: 1;
154}
155
156.viewport {
157 position: relative;
158 width: 100%;
159 height: 100%;
160 overflow: hidden;
161}
162
163/* hud overlays — fixed, on top of viewport */
164.hud {
165 position: fixed;
166 z-index: 10;
167 pointer-events: none;
168}
169
170.hud > * {
171 pointer-events: auto;
172}
173
174.hud-tl {
175 top: 18px;
176 left: 22px;
177}
178
179.hud-tr {
180 top: 18px;
181 right: 22px;
182}
183
184.hud-bl {
185 bottom: 16px;
186 left: 22px;
187}
188
189.hud-br {
190 bottom: 16px;
191 right: 22px;
192}
193
194/* ---------- mobile: corner-hud collapses into header + footer strips ---------- */
195
196@media (max-width: 640px) {
197 .hud-tl {
198 top: 0;
199 left: 0;
200 right: 0;
201 padding: 8px 10px;
202 background: linear-gradient(to bottom, var(--bg-deep) 0%, transparent 100%);
203 border-bottom: 1px solid var(--line-dim);
204 }
205
206 .hud-tr {
207 top: 8px;
208 right: 8px;
209 }
210
211 .hud-bl {
212 bottom: 0;
213 left: 0;
214 right: 0;
215 padding: 6px 10px;
216 background: linear-gradient(to top, var(--bg-deep) 0%, transparent 100%);
217 border-top: 1px solid var(--line-dim);
218 }
219
220 .hud-br {
221 display: none;
222 }
223}
224
225/* ---------- chozo-terminal frame (corner brackets, hud-style) ---------- */
226/*
227 * .frame wraps any block in 4 small L-shaped corner brackets that suggest
228 * a mounted hud panel. drop on cards, drawers, hero strips, etc.
229 */
230
231.frame {
232 position: relative;
233}
234
235.frame::before,
236.frame::after,
237.frame > .frame-c1,
238.frame > .frame-c2 {
239 content: '';
240 position: absolute;
241 width: 10px;
242 height: 10px;
243 border-color: var(--hud-mid);
244 border-style: solid;
245 border-width: 0;
246 pointer-events: none;
247}
248
249.frame::before {
250 top: -1px;
251 left: -1px;
252 border-top-width: 1px;
253 border-left-width: 1px;
254}
255
256.frame::after {
257 top: -1px;
258 right: -1px;
259 border-top-width: 1px;
260 border-right-width: 1px;
261}
262
263.frame > .frame-c1 {
264 bottom: -1px;
265 left: -1px;
266 border-bottom-width: 1px;
267 border-left-width: 1px;
268}
269
270.frame > .frame-c2 {
271 bottom: -1px;
272 right: -1px;
273 border-bottom-width: 1px;
274 border-right-width: 1px;
275}
276
277/* ---------- diagonal-cut panel (chozo terminal aesthetic) ---------- */
278/*
279 * snipped corners on opposing sides — the MP1 hud panel signature.
280 * use .cut for a 10px snip on top-left and bottom-right.
281 */
282
283.cut {
284 clip-path: polygon(
285 10px 0,
286 100% 0,
287 100% calc(100% - 10px),
288 calc(100% - 10px) 100%,
289 0 100%,
290 0 10px
291 );
292}
293
294/* ---------- segmented divider — that hud-readout dashed line ---------- */
295
296.seg-divider {
297 height: 1px;
298 background: repeating-linear-gradient(
299 90deg,
300 var(--line-mid) 0px,
301 var(--line-mid) 6px,
302 transparent 6px,
303 transparent 10px
304 );
305 margin: 12px 0;
306}
307
308/* ---------- hexagonal bullet ---------- */
309
310.hex {
311 display: inline-block;
312 width: 7px;
313 height: 8px;
314 background: currentColor;
315 clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
316 flex-shrink: 0;
317}
318
319.hex.ring {
320 background: transparent;
321 box-shadow: inset 0 0 0 1px currentColor;
322}
323
324/* ---------- panel ---------- */
325
326.panel {
327 background: var(--bg-panel);
328 border: 1px solid var(--line-mid);
329 backdrop-filter: blur(8px);
330 -webkit-backdrop-filter: blur(8px);
331 padding: 12px 14px;
332}
333
334/* ---------- buttons ---------- */
335
336button {
337 background: transparent;
338 color: var(--text);
339 border: 1px solid var(--line-mid);
340 padding: 6px 12px;
341 font-family: var(--font-chrome);
342 font-size: 11px;
343 text-transform: uppercase;
344 letter-spacing: 0.08em;
345 cursor: pointer;
346 transition:
347 color 0.12s,
348 border-color 0.12s,
349 background 0.12s;
350}
351
352button:hover {
353 color: var(--hud-hot);
354 border-color: var(--hud-mid);
355 background: rgba(184, 107, 58, 0.05);
356}
357
358button.active {
359 color: var(--hud-hot);
360 border-color: var(--hud-mid);
361 background: rgba(184, 107, 58, 0.1);
362}
363
364/* ---------- pulse animation ---------- */
365
366@keyframes pulse {
367 0%,
368 100% {
369 opacity: 0.55;
370 filter: drop-shadow(0 0 0 currentColor);
371 }
372 50% {
373 opacity: 1;
374 filter: drop-shadow(0 0 4px currentColor);
375 }
376}
377
378.pulse {
379 animation: pulse 2.4s ease-in-out infinite;
380}
381
382/* ---------- utility text ---------- */
383
384.muted {
385 color: var(--text-mid);
386}
387
388.faint {
389 color: var(--text-dim);
390}
391
392.hot {
393 color: var(--hud-hot);
394}
395
396.scan {
397 color: var(--scan-mid);
398}
399
400/* ---------- scrollable surfaces ---------- */
401
402.scroll {
403 overflow-y: auto;
404 scrollbar-width: thin;
405 scrollbar-color: var(--line-mid) transparent;
406}
407
408.scroll::-webkit-scrollbar {
409 width: 6px;
410}
411
412.scroll::-webkit-scrollbar-track {
413 background: transparent;
414}
415
416.scroll::-webkit-scrollbar-thumb {
417 background: var(--line-mid);
418 border-radius: 3px;
419}
420
421/* ---------- focus ring ---------- */
422
423*:focus-visible {
424 outline: 1px solid var(--hud-mid);
425 outline-offset: 2px;
426}