bkb.arcnode.xyz
at://Press
1@import "tailwindcss";
2
3@theme {
4 --color-ink: #cbd5e1;
5 --color-ink-bright: #e2e8f0;
6 --color-ink-dim: #94a3b8;
7 --color-paper: #0f172a;
8 --color-paper-raised: #1e293b;
9 --color-paper-dim: #141c27;
10 --color-accent: #3b82f6;
11 --color-accent-light: #8b5cf6;
12 --color-muted: #7a8a9e;
13 --color-border: #334155;
14 --color-border-light: #3f4f63;
15 --font-serif: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
16 --font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
17}
18
19/* Default: dark navy with blue-purple accents (ATAuth style) */
20/* Uses the @theme defaults above */
21
22/* Theme: Parchment — warm aged paper */
23[data-theme="parchment"] {
24 --color-ink: #3d3329;
25 --color-ink-bright: #1a1410;
26 --color-ink-dim: #6b5d4f;
27 --color-paper: #d9ccb4;
28 --color-paper-raised: #cfc1a7;
29 --color-paper-dim: #d3c5ab;
30 --color-accent: #7a3b10;
31 --color-accent-light: #904d22;
32 --color-muted: #5e4f3d;
33 --color-border: #bfb196;
34 --color-border-light: #c9bca3;
35}
36
37/* Theme: Moss — earthy green tones */
38[data-theme="moss"] {
39 --color-ink: #2d3a2e;
40 --color-ink-bright: #1a241b;
41 --color-ink-dim: #4d5e4f;
42 --color-paper: #dde6d5;
43 --color-paper-raised: #d0dbc7;
44 --color-paper-dim: #d5dfcc;
45 --color-accent: #3d6b35;
46 --color-accent-light: #4a8040;
47 --color-muted: #4d5e4f;
48 --color-border: #b8c9ad;
49 --color-border-light: #c4d3b9;
50}
51
52/* Theme: Slate — cool minimal gray */
53[data-theme="slate"] {
54 --color-ink: #37404a;
55 --color-ink-bright: #1a2029;
56 --color-ink-dim: #5a6674;
57 --color-paper: #eef0f3;
58 --color-paper-raised: #e2e5ea;
59 --color-paper-dim: #e8eaee;
60 --color-accent: #4a6fa5;
61 --color-accent-light: #5b82b8;
62 --color-muted: #5a6674;
63 --color-border: #d0d5dc;
64 --color-border-light: #dae0e6;
65}
66
67/* Theme: Rose — warm blush tones */
68[data-theme="rose"] {
69 --color-ink: #3d2d33;
70 --color-ink-bright: #1f1418;
71 --color-ink-dim: #6b5058;
72 --color-paper: #f0e2e4;
73 --color-paper-raised: #e6d5d8;
74 --color-paper-dim: #ebdadd;
75 --color-accent: #a04258;
76 --color-accent-light: #b85570;
77 --color-muted: #6b5058;
78 --color-border: #d4bfc4;
79 --color-border-light: #dec9ce;
80}
81
82/* Theme: E-Ink — color e-ink display */
83[data-theme="eink"] {
84 --color-ink: #2d2b28;
85 --color-ink-bright: #1a1918;
86 --color-ink-dim: #5c5955;
87 --color-paper: #e5e1dc;
88 --color-paper-raised: #dbd7d1;
89 --color-paper-dim: #dfdbd5;
90 --color-accent: #4a7a6e;
91 --color-accent-light: #5c8e82;
92 --color-muted: #605c57;
93 --color-border: #c9c4bd;
94 --color-border-light: #d3cec7;
95}
96
97/* Text selection — theme-matched highlight */
98::selection {
99 background: color-mix(in srgb, var(--color-accent) 25%, transparent);
100 color: var(--color-ink-bright);
101}
102
103html {
104 scroll-behavior: smooth;
105 -webkit-font-smoothing: antialiased;
106}
107
108/* Default body gradient — subtle blue/purple ambient glow */
109body {
110 background-image:
111 radial-gradient(ellipse at 20% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
112 radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
113 radial-gradient(ellipse at 50% 80%, rgba(14, 165, 233, 0.1) 0%, transparent 50%);
114}
115
116[data-theme="parchment"] body {
117 background-image:
118 radial-gradient(ellipse at 25% 15%, rgba(240, 225, 180, 0.7) 0%, transparent 30%),
119 radial-gradient(ellipse at 70% 5%, rgba(235, 218, 170, 0.5) 0%, transparent 25%),
120 radial-gradient(ellipse at 60% 50%, rgba(200, 165, 100, 0.35) 0%, transparent 35%),
121 radial-gradient(ellipse at 10% 70%, rgba(120, 105, 80, 0.3) 0%, transparent 30%),
122 radial-gradient(ellipse at 85% 80%, rgba(130, 112, 85, 0.25) 0%, transparent 28%),
123 radial-gradient(ellipse at 45% 90%, rgba(115, 100, 75, 0.2) 0%, transparent 35%),
124 radial-gradient(circle at 15% 50%, rgba(90, 75, 55, 0.2) 0%, transparent 20%),
125 radial-gradient(circle at 80% 35%, rgba(95, 80, 58, 0.15) 0%, transparent 18%),
126 radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(100, 85, 60, 0.4) 100%);
127}
128
129[data-theme="moss"] body {
130 background-image:
131 radial-gradient(ellipse at 25% 15%, rgba(200, 220, 180, 0.5) 0%, transparent 30%),
132 radial-gradient(ellipse at 70% 5%, rgba(190, 210, 170, 0.4) 0%, transparent 25%),
133 radial-gradient(ellipse at 60% 50%, rgba(150, 180, 120, 0.25) 0%, transparent 35%),
134 radial-gradient(ellipse at 10% 70%, rgba(80, 100, 60, 0.25) 0%, transparent 30%),
135 radial-gradient(ellipse at 85% 80%, rgba(90, 110, 70, 0.2) 0%, transparent 28%),
136 radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(70, 90, 50, 0.3) 100%);
137}
138
139[data-theme="slate"] body {
140 background-image:
141 radial-gradient(ellipse at 25% 15%, rgba(220, 225, 235, 0.6) 0%, transparent 30%),
142 radial-gradient(ellipse at 70% 5%, rgba(210, 218, 230, 0.4) 0%, transparent 25%),
143 radial-gradient(ellipse at 60% 50%, rgba(180, 195, 215, 0.2) 0%, transparent 35%),
144 radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(160, 170, 190, 0.2) 100%);
145}
146
147[data-theme="rose"] body {
148 background-image:
149 radial-gradient(ellipse at 25% 15%, rgba(245, 210, 215, 0.6) 0%, transparent 30%),
150 radial-gradient(ellipse at 70% 5%, rgba(240, 200, 210, 0.4) 0%, transparent 25%),
151 radial-gradient(ellipse at 60% 50%, rgba(210, 160, 175, 0.25) 0%, transparent 35%),
152 radial-gradient(ellipse at 10% 70%, rgba(140, 100, 110, 0.2) 0%, transparent 30%),
153 radial-gradient(ellipse at 85% 80%, rgba(150, 110, 120, 0.18) 0%, transparent 28%),
154 radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(120, 85, 95, 0.3) 100%);
155}
156
157[data-theme="eink"] body {
158 background-image:
159 radial-gradient(ellipse at 30% 20%, rgba(200, 195, 185, 0.3) 0%, transparent 40%),
160 radial-gradient(ellipse at 70% 70%, rgba(190, 185, 175, 0.2) 0%, transparent 35%);
161}
162
163/* ── E-Ink animation overrides ──
164 Mimics color e-ink display behavior:
165 - Full page refresh flash on load
166 - Discrete stepped rendering (no smooth fades)
167 - No glows, shadows, or smooth transitions
168 - No backdrop blur (e-ink can't blur)
169*/
170
171@keyframes einkRefresh {
172 0% { opacity: 1; }
173 50% { opacity: 1; }
174 100% { opacity: 0; }
175}
176
177@keyframes einkExit {
178 0% { opacity: 0; }
179 100% { opacity: 1; }
180}
181
182@keyframes einkFadeIn {
183 from { opacity: 0; }
184 to { opacity: 1; }
185}
186
187/* Flash overlay on page load */
188[data-theme="eink"] body::after {
189 content: "";
190 position: fixed;
191 inset: 0;
192 background: var(--color-ink-bright);
193 z-index: 9999;
194 animation: einkRefresh 0.5s steps(2) both;
195 pointer-events: none;
196}
197
198/* Flash overlay on navigation (exit) */
199[data-theme="eink"] body.eink-navigating::after {
200 animation: einkExit 0.25s steps(2) both;
201}
202
203/* Kill all smooth transitions */
204[data-theme="eink"] *,
205[data-theme="eink"] *::before,
206[data-theme="eink"] *::after {
207 transition-duration: 0s !important;
208}
209
210/* Stepped fade-in (no slide, no ease) */
211[data-theme="eink"] .fade-in {
212 animation: einkFadeIn 0.3s steps(4) 0.25s both;
213}
214
215[data-theme="eink"] .fade-in-delay {
216 animation: einkFadeIn 0.3s steps(4) 0.35s both;
217}
218
219/* Stepped stagger (delays follow the page flash) */
220[data-theme="eink"] .stagger-in > *:nth-child(1) { animation: einkFadeIn 0.2s steps(3) 0.3s both; }
221[data-theme="eink"] .stagger-in > *:nth-child(2) { animation: einkFadeIn 0.2s steps(3) 0.35s both; }
222[data-theme="eink"] .stagger-in > *:nth-child(3) { animation: einkFadeIn 0.2s steps(3) 0.4s both; }
223[data-theme="eink"] .stagger-in > *:nth-child(4) { animation: einkFadeIn 0.2s steps(3) 0.45s both; }
224[data-theme="eink"] .stagger-in > *:nth-child(5) { animation: einkFadeIn 0.2s steps(3) 0.5s both; }
225[data-theme="eink"] .stagger-in > *:nth-child(n+6) { animation: einkFadeIn 0.2s steps(3) 0.55s both; }
226
227/* Remove glows and shadows */
228[data-theme="eink"] .card-glow {
229 transition: none;
230}
231
232[data-theme="eink"] .card-glow:hover {
233 box-shadow: none;
234 border-color: var(--color-accent);
235}
236
237[data-theme="eink"] .avatar-glow {
238 box-shadow: 0 0 0 2px var(--color-paper);
239}
240
241/* About modal: instant, no blur, no slide */
242[data-theme="eink"] .about-overlay {
243 transition: none;
244}
245
246[data-theme="eink"] .about-backdrop {
247 backdrop-filter: none;
248 -webkit-backdrop-filter: none;
249 background: rgba(0, 0, 0, 0.6);
250}
251
252[data-theme="eink"] .about-panel {
253 transition: none;
254 transform: none;
255 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
256}
257
258[data-theme="eink"] .about-overlay.is-open .about-panel {
259 transform: none;
260}
261
262/* Login button: no hover glow or lift */
263[data-theme="eink"] .login-btn:hover {
264 transform: none;
265 box-shadow: none;
266}
267
268[data-theme="eink"] .login-card {
269 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
270}
271
272/* Fade-in animation */
273@keyframes fadeIn {
274 from { opacity: 0; transform: translateY(4px); }
275 to { opacity: 1; transform: translateY(0); }
276}
277
278.fade-in {
279 animation: fadeIn 0.4s ease-out both;
280}
281
282.fade-in-delay {
283 animation: fadeIn 0.4s ease-out 0.1s both;
284}
285
286/* Staggered fade-in for post lists */
287.stagger-in > *:nth-child(1) { animation: fadeIn 0.4s ease-out 0.05s both; }
288.stagger-in > *:nth-child(2) { animation: fadeIn 0.4s ease-out 0.1s both; }
289.stagger-in > *:nth-child(3) { animation: fadeIn 0.4s ease-out 0.15s both; }
290.stagger-in > *:nth-child(4) { animation: fadeIn 0.4s ease-out 0.2s both; }
291.stagger-in > *:nth-child(5) { animation: fadeIn 0.4s ease-out 0.25s both; }
292.stagger-in > *:nth-child(n+6) { animation: fadeIn 0.4s ease-out 0.3s both; }
293
294
295/* Gradient text utility */
296.text-gradient {
297 background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
298 -webkit-background-clip: text;
299 -webkit-text-fill-color: transparent;
300 background-clip: text;
301}
302
303/* Card hover glow */
304.card-glow {
305 transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
306}
307.card-glow:hover {
308 box-shadow: 0 0 20px color-mix(in srgb, var(--color-accent) 12%, transparent),
309 0 0 40px color-mix(in srgb, var(--color-accent-light) 6%, transparent);
310}
311
312/* Avatar glow ring */
313.avatar-glow {
314 box-shadow: 0 0 0 2px var(--color-paper),
315 0 0 12px color-mix(in srgb, var(--color-accent) 30%, transparent);
316}
317
318/* Gradient border line (header/footer) */
319.border-gradient {
320 border-image: linear-gradient(90deg, var(--color-border), color-mix(in srgb, var(--color-accent) 40%, var(--color-border)), color-mix(in srgb, var(--color-accent-light) 30%, var(--color-border)), var(--color-border)) 1;
321}
322
323/* Markdown content styles */
324.prose h1 {
325 font-family: var(--font-serif);
326 font-size: 2.25rem;
327 font-weight: 700;
328 line-height: 1.2;
329 margin-bottom: 1.5rem;
330 color: var(--color-ink-bright);
331}
332
333.prose h2 {
334 font-family: var(--font-serif);
335 font-size: 1.5rem;
336 font-weight: 600;
337 line-height: 1.3;
338 margin-top: 2.5rem;
339 margin-bottom: 1rem;
340 color: var(--color-ink-bright);
341}
342
343.prose h3 {
344 font-family: var(--font-serif);
345 font-size: 1.25rem;
346 font-weight: 600;
347 margin-top: 2rem;
348 margin-bottom: 0.75rem;
349 color: var(--color-ink-bright);
350}
351
352.prose p {
353 font-family: var(--font-serif);
354 font-size: 1.0625rem;
355 line-height: 1.8;
356 margin-bottom: 1.25rem;
357 color: var(--color-ink);
358}
359
360@media (min-width: 640px) {
361 .prose p {
362 font-size: 1.125rem;
363 }
364}
365
366.prose a {
367 color: var(--color-accent);
368 text-decoration: underline;
369 text-decoration-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
370 text-underline-offset: 3px;
371 transition: text-decoration-color 0.2s;
372}
373
374.prose a:hover {
375 text-decoration-color: var(--color-accent);
376}
377
378.prose blockquote {
379 border-left: 2px solid var(--color-accent);
380 padding-left: 1.25rem;
381 margin: 1.5rem 0;
382 font-style: italic;
383 color: var(--color-ink-dim);
384}
385
386.prose ul, .prose ol {
387 font-family: var(--font-serif);
388 font-size: 1.0625rem;
389 line-height: 1.8;
390 margin-bottom: 1.25rem;
391 padding-left: 1.5rem;
392 color: var(--color-ink);
393}
394
395@media (min-width: 640px) {
396 .prose ul, .prose ol {
397 font-size: 1.125rem;
398 }
399}
400
401.prose li {
402 margin-bottom: 0.25rem;
403}
404
405.prose pre {
406 background: var(--color-paper-dim);
407 color: var(--color-ink);
408 padding: 1.25rem;
409 border-radius: 0.5rem;
410 border: 1px solid var(--color-border);
411 overflow-x: auto;
412 -webkit-overflow-scrolling: touch;
413 font-family: var(--font-mono);
414 font-size: 0.875rem;
415 line-height: 1.6;
416 margin: 1.5rem 0;
417}
418
419.prose code {
420 font-family: var(--font-mono);
421 font-size: 0.875em;
422 background: var(--color-paper-raised);
423 padding: 0.15rem 0.4rem;
424 border-radius: 0.25rem;
425 color: var(--color-accent);
426}
427
428.prose pre code {
429 background: none;
430 padding: 0;
431 color: inherit;
432}
433
434.prose strong {
435 font-weight: 700;
436 color: var(--color-ink-bright);
437}
438
439.prose em {
440 font-style: italic;
441}
442
443.prose hr {
444 border: none;
445 margin: 2.5rem 0;
446 text-align: center;
447 line-height: 0;
448}
449
450.prose hr::after {
451 content: "· · ·";
452 font-family: var(--font-serif);
453 font-size: 1.25rem;
454 letter-spacing: 0.15em;
455 color: var(--color-muted);
456}
457
458.prose img {
459 max-width: 100%;
460 border-radius: 0.5rem;
461 margin: 1.5rem 0;
462}
463
464/* About modal */
465.about-overlay {
466 position: fixed;
467 inset: 0;
468 z-index: 50;
469 display: flex;
470 align-items: center;
471 justify-content: center;
472 opacity: 0;
473 pointer-events: none;
474 transition: opacity 0.2s ease;
475}
476
477.about-overlay.is-open {
478 opacity: 1;
479 pointer-events: auto;
480}
481
482.about-backdrop {
483 position: absolute;
484 inset: 0;
485 background: rgba(0, 0, 0, 0.5);
486 backdrop-filter: blur(8px);
487 -webkit-backdrop-filter: blur(8px);
488}
489
490.about-panel {
491 position: relative;
492 background: var(--color-paper);
493 border: 1px solid var(--color-border);
494 border-radius: 0.75rem;
495 padding: 2rem;
496 max-width: 480px;
497 width: calc(100% - 2rem);
498 max-height: calc(100vh - 4rem);
499 overflow-y: auto;
500 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
501 transform: translateY(8px);
502 transition: transform 0.2s ease;
503}
504
505.about-overlay.is-open .about-panel {
506 transform: translateY(0);
507}
508
509/* About modal prose (rendered markdown) */
510.prose-about p {
511 margin-bottom: 1rem;
512}
513
514.prose-about p:last-child {
515 margin-bottom: 0;
516}
517
518.prose-about a {
519 color: var(--color-accent);
520 text-decoration: underline;
521 text-underline-offset: 3px;
522 text-decoration-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
523 transition: text-decoration-color 0.2s;
524}
525
526.prose-about a:hover {
527 text-decoration-color: var(--color-accent);
528}
529
530/* Accessibility */
531.sr-only {
532 position: absolute;
533 width: 1px;
534 height: 1px;
535 padding: 0;
536 margin: -1px;
537 overflow: hidden;
538 clip: rect(0, 0, 0, 0);
539 white-space: nowrap;
540 border-width: 0;
541}
542
543:focus-visible {
544 outline: 2px solid var(--color-accent);
545 outline-offset: 2px;
546}
547
548.skip-link {
549 position: absolute;
550 left: -9999px;
551 z-index: 100;
552 padding: 0.5rem 1rem;
553 background: var(--color-accent);
554 color: var(--color-paper);
555 font-family: var(--font-mono);
556 font-size: 0.875rem;
557 border-radius: 0 0 0.5rem 0;
558 text-decoration: none;
559}
560.skip-link:focus {
561 left: 0;
562 top: 0;
563}