l4.pm
dev vouch dev on at. thats about it
atvouch.dev
1@font-face {
2 font-family: 'DM Sans';
3 font-weight: 400;
4 font-style: normal;
5 font-display: swap;
6 src: url('/fonts/DM-Sans-400.ttf') format('truetype');
7}
8@font-face {
9 font-family: 'DM Sans';
10 font-weight: 500;
11 font-style: normal;
12 font-display: swap;
13 src: url('/fonts/DM-Sans-500.ttf') format('truetype');
14}
15@font-face {
16 font-family: 'DM Sans';
17 font-weight: 700;
18 font-style: normal;
19 font-display: swap;
20 src: url('/fonts/DM-Sans-700.ttf') format('truetype');
21}
22@font-face {
23 font-family: 'JetBrains Mono';
24 font-weight: 400;
25 font-style: normal;
26 font-display: swap;
27 src: url('/fonts/JetBrains-Mono-400.ttf') format('truetype');
28}
29@font-face {
30 font-family: 'JetBrains Mono';
31 font-weight: 700;
32 font-style: normal;
33 font-display: swap;
34 src: url('/fonts/JetBrains-Mono-700.ttf') format('truetype');
35}
36
37:root {
38 --bg: #0c0c0c;
39 --bg-raised: #141412;
40 --bg-input: #1a1a17;
41 --border: #2a2a25;
42 --border-strong: #3a3a33;
43 --text: #e8e4de;
44 --text-dim: #8a867e;
45 --text-faint: #5a5750;
46 --accent: #ff4f6d;
47 --accent-dim: #cc3f57;
48 --accent-bg: #ff4f6d08;
49 --error: #ff5f56;
50 --error-bg: #ff5f5608;
51 --serif: 'Instrument Serif', Georgia, serif;
52 --sans: 'DM Sans', system-ui, sans-serif;
53 --mono: 'JetBrains Mono', 'Courier New', monospace;
54}
55
56* {
57 box-sizing: border-box;
58 margin: 0;
59 padding: 0;
60}
61
62::selection {
63 background: var(--accent);
64 color: var(--bg);
65}
66
67body {
68 font-family: var(--sans);
69 font-size: 14px;
70 background: var(--bg);
71 color: var(--text);
72 line-height: 1.65;
73 -webkit-font-smoothing: antialiased;
74}
75
76/* ── layout ── */
77
78.container {
79 max-width: 1200px;
80 margin: 0 auto;
81 padding: 3rem 2rem;
82}
83
84h1 {
85 font-family: var(--sans);
86 font-size: 3.5rem;
87 font-weight: 400;
88 font-style: normal;
89 color: var(--text);
90 letter-spacing: -0.03em;
91 margin-bottom: 2.5rem;
92 line-height: 1;
93}
94
95h1::after {
96 content: '';
97 display: block;
98 width: 100%;
99 height: 2px;
100 background: var(--accent);
101 margin-top: 1rem;
102}
103
104h2 {
105 font-family: var(--sans);
106 font-size: 1.5rem;
107 font-weight: 400;
108 color: var(--text);
109 letter-spacing: -0.01em;
110 margin-bottom: 1rem;
111 line-height: 1.2;
112}
113
114.intro-block {
115 display: flex;
116 gap: 2rem;
117 margin-bottom: 2rem;
118}
119
120.intro {
121 color: var(--text);
122 font-size: 14px;
123 line-height: 1.7;
124 flex: 1;
125 padding-right: 2rem;
126 border-right: 1px solid var(--border);
127}
128
129.intro-right {
130 flex: 1;
131 display: flex;
132 flex-direction: column;
133 gap: 1rem;
134 padding-left: 2rem;
135}
136
137.instructions {
138 color: var(--text);
139 font-size: 14px;
140 text-align: right;
141 line-height: 1.7;
142}
143
144.instructions p {
145 margin-bottom: 0.25rem;
146}
147
148.notes {
149 color: var(--text-dim);
150 font-size: 12px;
151 text-align: right;
152 line-height: 1.7;
153 border-top: 1px solid var(--border);
154 padding-top: 1rem;
155}
156
157.notes p {
158 margin-bottom: 0.25rem;
159}
160
161a {
162 color: #ef4444;
163 text-decoration: none;
164}
165
166a:hover {
167 text-decoration: underline;
168}
169
170a:visited {
171 color: #b91c1c;
172}
173
174/* ── topbar ── */
175
176.topbar {
177 display: flex;
178 align-items: center;
179 justify-content: space-between;
180 gap: 1rem;
181 padding: 0.75rem 0;
182 border-bottom: 2px solid var(--border);
183 margin-bottom: 2rem;
184}
185
186.topbar span {
187 font-size: 15px;
188 color: var(--text-dim);
189 letter-spacing: 0.02em;
190 text-transform: uppercase;
191}
192
193.topbar code {
194 font-family: var(--mono);
195 font-size: 15px;
196 color: var(--accent);
197 text-transform: none;
198}
199
200/* ── two-column layout ── */
201
202.layout {
203 display: flex;
204 gap: 2rem;
205 align-items: flex-start;
206}
207
208.sidebar {
209 width: 260px;
210 flex-shrink: 0;
211 border: 1px solid var(--border);
212 border-top: 3px solid var(--accent);
213 padding: 1.25rem;
214 background: var(--bg-raised);
215}
216
217.main-panel {
218 flex: 1;
219 min-width: 0;
220}
221
222/* ── sections ── */
223
224section {
225 margin-bottom: 1.5rem;
226 padding: 1.25rem;
227 border: 1px solid var(--border);
228 border-left: 3px solid var(--border-strong);
229 background: var(--bg-raised);
230 transition: border-left-color 0.2s ease;
231}
232
233section:hover {
234 border-left-color: var(--accent);
235}
236
237section:last-child {
238 margin-bottom: 0;
239}
240
241/* ── text helpers ── */
242
243.muted {
244 color: var(--text-faint);
245 font-size: 12px;
246 letter-spacing: 0.03em;
247 text-transform: uppercase;
248}
249
250/* ── form fields ── */
251
252.field {
253 display: flex;
254 gap: 0;
255}
256
257input[type="text"] {
258 flex: 1;
259 padding: 0.6rem 0.85rem;
260 border: 1px solid var(--border);
261 border-right: none;
262 background: var(--bg-input);
263 color: var(--text);
264 font-family: var(--mono);
265 font-size: 13px;
266 transition: border-color 0.15s ease;
267}
268
269input[type="text"]::placeholder {
270 color: var(--text-dim);
271 font-style: italic;
272 font-family: var(--sans);
273 font-size: 13px;
274}
275
276input[type="text"]:focus {
277 outline: none;
278 border-color: var(--accent);
279 background: var(--bg);
280}
281
282input[type="text"].input-invalid {
283 border-color: var(--error);
284 background: var(--error-bg);
285}
286
287.field-hint {
288 color: var(--error);
289 font-size: 11px;
290 margin-top: 0.35rem;
291 letter-spacing: 0.02em;
292}
293
294button {
295 padding: 0.6rem 1.2rem;
296 border: 1px solid var(--border);
297 background: var(--bg-input);
298 color: var(--text);
299 cursor: pointer;
300 font-family: var(--sans);
301 font-size: 13px;
302 font-weight: 700;
303 letter-spacing: 0.06em;
304 text-transform: uppercase;
305 white-space: nowrap;
306 transition: all 0.15s ease;
307}
308
309button:hover:not(:disabled) {
310 background: var(--accent);
311 color: var(--bg);
312 border-color: var(--accent);
313}
314
315button:disabled {
316 opacity: 0.35;
317 cursor: not-allowed;
318}
319
320/* ── topbar logout button ── */
321
322.topbar button {
323 font-size: 11px;
324 padding: 0.4rem 0.8rem;
325 border-color: var(--border);
326}
327
328/* ── pre / code output ── */
329
330pre {
331 background: var(--bg);
332 border: 1px solid var(--border);
333 border-left: 3px solid var(--text-faint);
334 padding: 0.85rem 1rem;
335 overflow-x: auto;
336 font-family: var(--mono);
337 font-size: 12px;
338 margin-top: 0.75rem;
339 white-space: pre-wrap;
340 word-break: break-all;
341 line-height: 1.7;
342 color: var(--text-dim);
343}
344
345/* ── messages ── */
346
347.error {
348 color: var(--error);
349 background: var(--error-bg);
350 border: 1px solid var(--error);
351 border-left: 3px solid var(--error);
352 padding: 0.6rem 0.85rem;
353 margin-top: 0.75rem;
354 font-size: 12px;
355}
356
357.auth-warning {
358 color: #b5a13b;
359 background: #b5a13b18;
360 border: none;
361 border-left: 3px solid #b5a13b;
362 padding: 0.6rem 0.85rem;
363 margin-top: 0.75rem;
364 font-size: 12px;
365 line-height: 1.5;
366}
367
368.auth-warning a {
369 color: #ef4444;
370}
371
372.auth-warning-details {
373 margin-top: 0.5rem;
374 margin-bottom: 0;
375 margin-left: 0;
376 border: 1px solid #b5a13b44;
377 background: #131006;
378 padding: 0.6rem 0.85rem;
379 border-radius: 4px;
380}
381
382.auth-warning code {
383 font-size: 11px;
384 background: #b5a13b15;
385 padding: 0.1rem 0.3rem;
386 border-radius: 2px;
387}
388
389.success {
390 color: #4caf50;
391 border-color: #4caf50;
392 border-left: 3px solid #4caf50;
393 background: #4caf5008;
394}
395
396/* ── login form ── */
397
398form {
399 margin: 0;
400}
401
402/* ── vouch list ── */
403
404.vouch-list {
405 list-style: none;
406 margin-top: 0.75rem;
407 max-height: 60vh;
408 overflow-y: auto;
409}
410
411.vouch-list li {
412 display: flex;
413 justify-content: space-between;
414 align-items: baseline;
415 padding: 0.5rem 0;
416 border-bottom: 1px solid var(--border);
417 gap: 0.75rem;
418}
419
420.vouch-list li:last-child {
421 border-bottom: none;
422}
423
424
425.vouch-handle {
426 font-size: 15px;
427 overflow: hidden;
428 text-overflow: ellipsis;
429 white-space: nowrap;
430 flex: 1;
431}
432
433.vouch-date {
434 color: var(--text-dim);
435 font-size: 11px;
436 flex-shrink: 0;
437 font-variant-numeric: tabular-nums;
438}
439
440.vouch-delete {
441 background: none;
442 border: none;
443 cursor: pointer;
444 padding: 0 0.25rem;
445 font-size: 14px;
446 opacity: 0.5;
447 flex-shrink: 0;
448}
449
450.vouch-delete:hover {
451 opacity: 1;
452}
453
454/* ── right sidebar (remote vouches) ── */
455
456.sidebar-right {
457 width: 240px;
458 flex-shrink: 0;
459 border: 1px solid var(--border);
460 border-top: 3px solid var(--text-dim);
461 padding: 1.25rem;
462 background: var(--bg-raised);
463}
464
465.vouch-mutual {
466 color: var(--text-faint);
467 font-size: 10px;
468 letter-spacing: 0.06em;
469 text-transform: uppercase;
470 flex-shrink: 0;
471}
472
473
474/* ── pagination ── */
475
476.vouch-count {
477 font-weight: 400;
478 font-size: 0.85em;
479 color: var(--text-dim);
480}
481
482.load-more {
483 width: 100%;
484 margin-top: 0.5rem;
485 font-size: 11px;
486 padding: 0.4rem 0.8rem;
487}
488
489/* ── footer ── */
490
491.footer {
492 margin-top: 3rem;
493 padding-top: 1rem;
494 border-top: 1px solid var(--border);
495 color: var(--text-dim);
496 font-size: 12px;
497 text-align: center;
498}
499
500/* ── responsive ── */
501
502@media (max-width: 980px) {
503 .container {
504 padding: 2rem 1rem;
505 }
506
507 h1 {
508 font-size: 2.5rem;
509 }
510
511 .layout {
512 flex-direction: column;
513 }
514
515 .sidebar {
516 width: 100%;
517 }
518
519 .sidebar-right {
520 width: 100%;
521 }
522
523 .intro-block {
524 flex-direction: column;
525 }
526
527 .intro {
528 border-right: none;
529 border-bottom: 1px solid var(--border);
530 padding-right: 0;
531 padding-bottom: 1rem;
532 }
533
534 .intro-right {
535 padding-left: 0;
536 }
537
538 .instructions {
539 text-align: left;
540 }
541}
542
543/* Typeahead */
544.handle-input-wrapper {
545 position: relative;
546 flex: 1;
547}
548
549.handle-input-wrapper input {
550 width: 100%;
551 box-sizing: border-box;
552}
553
554.typeahead-dropdown {
555 position: absolute;
556 top: 100%;
557 left: 0;
558 right: 0;
559 margin: 0;
560 padding: 0;
561 list-style: none;
562 background: var(--bg);
563 border: 1px solid var(--border);
564 border-top: none;
565 z-index: 10;
566 max-height: 280px;
567 overflow-y: auto;
568}
569
570.typeahead-dropdown li {
571 display: flex;
572 align-items: center;
573 gap: 0.5rem;
574 padding: 0.4rem 0.6rem;
575 cursor: pointer;
576}
577
578.typeahead-dropdown li.typeahead-active {
579 background: var(--border);
580}
581
582.typeahead-avatar {
583 width: 24px;
584 height: 24px;
585 border-radius: 50%;
586 flex-shrink: 0;
587}
588
589.typeahead-info {
590 display: flex;
591 flex-direction: column;
592 min-width: 0;
593}
594
595.typeahead-name {
596 font-size: 0.85rem;
597 white-space: nowrap;
598 overflow: hidden;
599 text-overflow: ellipsis;
600}
601
602.typeahead-handle {
603 font-size: 0.75rem;
604 opacity: 0.6;
605 white-space: nowrap;
606 overflow: hidden;
607 text-overflow: ellipsis;
608}